Front_End_EN/src/pages/layout/header.vue

<template>
  <div class="nav" @click.stop>
    <div class="nav-content">
      <router-link :to="{name: 'home'}" class="logo" ><img width="128" height="37" src="http://video.cgaii.com/new4dage/images/images/logo_en.svg" @click="showMenu = false"></router-link>
      <div class="menu" :style="[{height: height}, style]" ref="menu">
        <Menu v-for="(menu,i) in menus"
            :link="menu.link"
            :key="i"
            :text="menu.text"
            :childs="menu.childs"
            :show="menu.show"
            class="menu-item"
            @open=" open(menu)"
            @hide="hide(menu)"
            @change="change(menu)"
            @tolink="showMenu = false">
        </Menu>
        <div class="head-info">
          <a class="number">400<span>-</span>6698<span>-</span>025</a><div class="language"
            :class="{pc: !isMobile}"
            @mouseenter="langShow = true"
            @mouseleave="langShow = false">
            <Menu
              v-if="!isMobile"
              :link="'#'"
              :text="langMap[language - 1]"
              :childs="[
                {link: '#', lang: '/cn/', text: '简体中文'},
                {link: '#', lang: '/en/', text: 'English'},
                {link: '#', lang: '/de/', text: 'Deutsch'}
              ]"
              :show="langShow"
              class="menu-item"
              @checkItem="changeLange">
            </Menu>

            <template v-else>
              <span @click="urlrep('/cn/')">简体中文</span> |
              <span @click="urlrep('/en/')">English</span> |
              <span @click="urlrep('/de/')">Deutsch</span>
            </template>
          </div>
        </div>
      </div>
      <button class="ctl" @click="changeState">
        <span></span><span></span><span></span>
      </button>
    </div>
  </div>
</template>

<script>
import Menu from '@/components/menu'
import browser from '@/util/browser'

export default {
  name: 'navigation',
  data () {
    return {
      langMap: ['中文简体', 'English', 'Deutsch'],
      language: global.language,
      langShow: false,
      menus: [
        {
          link: '/product',
          text: ' Products',
          show: false,
          childs: [
            {link: '/product?id=swkk', text: '4DKanKan'},
            {link: '/product?id=swmk', text: '4DModel'},
            {link: '/product?id=swys', text: '4DArt'},
            {link: '/product?id=swkz', text: '4DMuseum'},
            {link: '/product?id=wwq', text: '4DWall'},
            {link: '/product?id=swar', text: '4DAR'}
          ]
        },
        {
          link: '/planculture',
          text: 'Solutions',
          show: false,
          childs: [
            {link: '/planculture', text: 'Digital Museum'},
            {link: '/planlife', text: 'Digital Life'},
            {link: '/planindustry', text: 'Digital Industry'}
          ]
        },
        {
          link: '/technology',
          text: 'Technologies',
          show: false,
          childs: [
            {link: '/technology?id=szjm', text: 'Automatic 3D Digital Reconstruction'},
            {link: '/technology?id=jqsj', text: 'High-precision Machine Vision'},
            {link: '/technology?id=slam', text: 'Simultaneous Localization and Mapping'},
            {link: '/technology?id=sjjs', text: 'Computer Vision'}
          ]
        },
        {
          link: '/case/文博',
          text: '3D Showcase',
          show: false,
          childs: [
            {link: {name: 'case_details', params: {id: '文博'}}, text: 'Museum '},
            {link: {name: 'case_details', params: {id: '政务'}}, text: 'Administration '},
            {link: {name: 'case_details', params: {id: '电商'}}, text: ' E-Commerce'},
            {link: {name: 'case_details', params: {id: '工业'}}, text: 'Industry '},
            {link: {name: 'case_details', params: {id: '地产'}}, text: 'Real Estate'},
            {link: {name: 'case_details', params: {id: '文物'}}, text: ' Cultural Relic'}
          ]
        },
        {
          link: '/information/news',
          text: 'News',
          show: false,
          childs: [
            {link: '/information/news', text: 'news'},
            {link: '/information/media', text: 'media library'}
            // ,
            // {link: '/information/code', text: 'Social media'}
          ]
        },
        {
          link: '/about',
          text: 'About Us',
          show: false,
          childs: [
            {link: '/about?id=qyjj', text: 'Overview'},
            {link: '/about?id=jrwm', text: 'Job Search'}
          ]
        }
      ],
      showMenu: false,
      height: 0,
      mxHeight: null,
      isMobile: browser.mobile
    }
  },
  methods: {
    changeLange (item) {
      this.urlrep(item.lang)
    },
    urlrep (lg) {
      location.pathname = lg
    },
    open (menu) {
      this.menus.forEach(m => {
        m.show = false
      })
      menu.show = true
    },
    hide (menu) {
      menu.show = false
    },
    change (menu) {
      menu.show ? this.hide(menu) : this.open(menu)
    },
    over (menu) {
      menu.active = true
    },
    out (menu) {
      menu.active = false
    },
    changeState () {
      if (!this.menuHeight) {
        this.$refs.menu.style.visibility = 'hidden'
        this.$refs.menu.style.height = 'auto'
        this.menuHeight = this.$refs.menu.offsetHeight
        this.$refs.menu.style.visibility = ''
        this.$refs.menu.style.height = '0'
      }
      this.showMenu = !this.showMenu
    },
    sizeHandle () {
      if (window.innerWidth < 1230) {
        this.mxHeight = window.innerHeight - 65
      } else {
        this.mxHeight = 0
      }
    }
  },
  watch: {
    showMenu () {
      this.height = !this.showMenu ? '0' : this.menuHeight + 'px'
      this.showMenu && setTimeout(() => {
        this.height = 'auto'
      }, 300)
    }
  },
  computed: {
    style () {
      if (this.mxHeight) {
        return {
          maxHeight: this.mxHeight + 'px',
          overflowY: 'scroll'
        }
      } else {
        return {
          overflowY: 'inherit',
          maxHeight: 'auto'
        }
      }
    }
  },
  mounted () {
    document.documentElement.addEventListener('click', () => {
      this.showMenu = false
    })

    if (this.isMobile) {
      this.mxHeight = window.innerHeight - 65
    } else {
      this.sizeHandle = this.sizeHandle.bind(this)
      this.sizeHandle()
      this.$bus.$on('resize', this.sizeHandle)
    }
  },
  beforeDestroy () {
    this.$bus.$off('resize', this.sizeHandle)
  },
  components: { Menu }
}
</script>

<style scoped type="text/css">
.nav {
  background-color: #292929;
  box-shadow: 0 0 20px rgba(0,0,0,0.7);
  position: relative;
  padding: 0 20px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  box-sizing: border-box;
  transition: all linear .3s;
}

.nav::after {
  content: '';
  display: block;
  clear: both;
}

.nav-content {
  max-width: 1400px;
  margin: 0 auto;
}

.ctl {
  float: right;
  border: 1px solid #fff;
  padding: 6px;
  background-color: transparent;
  width: 40px;
  overflow: hidden;
  margin: 18px 0;
}

.ctl span {
  background-color: #888;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  float: left;
}

.ctl span:nth-child(2) {
  margin: 4px 0;
}

.logo {
  float: left;
  padding: 13px 0;
}

.menu {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #292929;
  height: 0;
  transition: height ease-in-out .3s;
  overflow-y: scroll;
}

.menu .menu-item {
  text-decoration: none;
  padding: 0 24px;
  display: block;
}

.language span {
  transition: color .3s linear;
}

.language span:hover {
  color: #18ade9;
}

.language {
  vertical-align: middle;
  margin-left: 0;
  padding: 24px 0 24px 30px;
  display: block;
}

.number {
  vertical-align: middle;
  padding: 20px;
  position: relative;
  margin-left: 30px;
  padding-left: 30px;
  display: inline-block;
}

.number::before {
  position: absolute;
  content: '';
  width: 20px;
  height: 20px;
  background: url('http://video.cgaii.com/new4dage/images/images/phone.png') no-repeat left top;
  left: 0;
  top: 17px;
}

.number span {
  display: inline-block;
  transform: translateY(-2px)
}

.head-info {
  display: inline-block;
}

.language.pc {
  padding: 0 !important
}

@media screen and (min-width: 1230px) {
  .nav {
    text-align: right;
  }

  .ctl {
    display: none;
  }

  .menu {
    position: static;
    margin: 0;
    width: auto;
    display: inline-block;
    background: none;
    height: auto !important;
    overflow: inherit;
  }

  .menu .menu-item {
    height: 100%;
    padding: 24px 20px;
    display: inline-block;
  }

  .language {
    display: inline-block;
  }

  .number {
    display: inline-block;
    padding: 0;
    padding: 24px 0 24px 30px;
  }

  .number::before {
    top: 22px;
  }
}

@media screen and (min-width: 1400px) {
  .menu .menu-item {
    padding: 24px 40px;
  }
}

@media screen and (min-width: 1660px) {
  .nav {
    padding: 0 150px;
  }
}
</style>