P0006/src/view/main/main.vue

<template>
  <el-container>
    <el-header class="header linear">
      <el-menu :default-active="activeIndex" mode="horizontal" style="position: relative;padding-left: 100px;width: 960px;text-align: center;margin: 0 auto;border: none;background: transparent;overflow: visible">
        <div class="logo">
            <img src="../../assets/images/logo.jpg" style="width: 260px; height: 60px;">
        </div>
        <el-menu-item index="1"><router-link to="/overview">首页</router-link></el-menu-item>
        <el-menu-item index="2"><router-link to="/about">关于我们</router-link></el-menu-item>
        <el-menu-item index="3"><router-link to="/vip-service">协会会员</router-link></el-menu-item>
        <el-menu-item index="4"><router-link to="/company">企业认定</router-link></el-menu-item>
        <el-menu-item index="5"><router-link to="/news">新闻资讯</router-link></el-menu-item>
        <el-menu-item index="6"><router-link to="/policy">产业政策</router-link></el-menu-item>
        <el-menu-item index="7"><router-link to="/trode">行业动态</router-link></el-menu-item>
        <el-menu-item index="8"><router-link to="/exchange">合作交流</router-link></el-menu-item>
        <el-menu-item index="9"><router-link to="/km">知识产权</router-link></el-menu-item>
        <el-menu-item index="10"><router-link to="/member">会员产品</router-link></el-menu-item>
        <el-menu-item index="11"><router-link to="/people">人力资源</router-link></el-menu-item>
        <el-menu-item index="12"><router-link to="/data">数据上报</router-link></el-menu-item>
        <el-menu-item index="13"><router-link to="/connect">联系我们</router-link></el-menu-item>
      </el-menu>
    </el-header>
    <router-view/>
    <el-footer style="height: 100px;flex: 0 0 auto;width: 100%" class="linear">
      <div class="footer">
        <div class="footer-bar">
          <span @click="clickItem(index)"
            v-for="(item, index) in menuLists" :key="index" >{{item.text}}</span>
        </div>
        <div class="copyright">版权所有&nbsp;©&nbsp;上海市集成电路行业协会&nbsp;保留所有权利<br />技术支持：锐赢技术&nbsp;&nbsp;沪ICP备11022172号-1</div>
      </div>
    </el-footer>
  </el-container>
</template>
<script>
import SideMenu from './components/side-menu'
import HeaderBar from './components/header-bar'
import TagsNav from './components/tags-nav'
import User from './components/user'
import Fullscreen from './components/fullscreen'
import Language from './components/language'
import {mapMutations, mapActions} from 'vuex'
import {getNextRoute, routeEqual} from '@/libs/util'
import minLogo from '@/assets/images/logo-min.jpg'
import maxLogo from '@/assets/images/logo.jpg'
import './main.less'
import Layout from 'iview/src/components/layout/layout'
import customBreadCrumb from './components/header-bar/custom-bread-crumb'
import CommonIcon from '../../components/common-icon/common-icon'

export default {
  name: 'Main',
  components: {
    CommonIcon,
    Layout,
    SideMenu,
    HeaderBar,
    Language,
    TagsNav,
    Fullscreen,
    User,
    customBreadCrumb
  },
  data () {
    return {
      activeIndex:"1",
      collapsed: true,
      minLogo,
      maxLogo,
      isFullscreen: false,
      height: 'height:'+((document.documentElement.clientHeight || document.body.clientHeight) - 50)+'px',
      menuLists: [
          {text: '首页', path: '/overview'},
          {text: '关于我们', path: '/about'},
          {text: '协会会员', path: '/vip-service'},
          {text: '企业认定', path: '/company'},
          {text: '新闻资讯', path: '/news'},
          {text: '产业政策', path: '/policy'},
          {text: '行业动态', path: '/trode'},
          {text: '合作交流', path: '/exchange'},
          {text: '知识产权', path: '/km'},
          {text: '会员产品', path: '/member'},
          {text: '人力资源', path: '/people'},
          {text: '数据上报', path: '/data'},
          {text: '联系我们', path: '/connect'},
        ]
    }
  },
  computed: {
    tagNavList () {
      return this.$store.state.app.tagNavList
    },
    tagRouter () {
      return this.$store.state.app.tagRouter
    },
    userAvator () {
      return this.$store.state.user.avatorImgPath
    },
    cacheList () {
      return this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []
    },
    menuList () {
      return this.$store.getters.menuList
    },
    breadCrumbList () {
      return this.$store.state.app.breadCrumbList
    },
    local () {
      return this.$store.state.app.local
    }
  },
  methods: {
    ...mapMutations([
      'setBreadCrumb',
      'setTagNavList',
      'addTag',
      'setLocal'
    ]),
    ...mapActions([
      'handleLogin'
    ]),
    clickItem(index){
        this.activeIndex = index + 1 + ""
        this.$router.push(this.menuList[index].path)
        this.$forceUpdate()
    },
    turnToPage (route) {
      let {name, params, query} = {}
      if (typeof route === 'string') name = route
      else {
        name = route.name
        params = route.params
        query = route.query
      }
      if (name.indexOf('isTurnByHref_') > -1) {
        window.open(name.split('_')[1])
        return
      }
      this.$router.push({
        name,
        params,
        query
      })
    },
    handleCloseTag (res, type, route) {
      let openName = ''
      if (type === 'all') {
        this.turnToPage('home')
        openName = 'home'
      } else if (routeEqual(this.$route, route)) {
        if (type === 'others') {
          openName = route.name
        } else {
          const nextRoute = getNextRoute(this.tagNavList, route)
          this.$router.push(nextRoute)
          openName = nextRoute.name
        }
      }
      this.setTagNavList(res)
      this.$refs.sideMenu.updateOpenName(openName)
    },
    handleCollapsedChange (state) {
      this.collapsed = state
    },
    handleClick (item) {
      this.turnToPage(item)
    }
  },
  watch: {
    '$route' (newRoute) {
    //   console.log(newRoute)
      this.menuLists.map((item, index) => {
          if(newRoute.path.indexOf(item.path) > -1){
              this.activeIndex = index+1+""
        }
      })

      this.setBreadCrumb(newRoute)
    }
  },
  mounted () {
    /**
       * @description 初始化设置面包屑导航和标签导航
       */
    this.setTagNavList()
    this.addTag({
      route: this.$store.state.app.homeRoute
    })
    this.setBreadCrumb(this.$route)
    // 设置初始语言
    this.setLocal(this.$i18n.locale)
    let path = location.href;
    if(path.indexOf('overview')>=0){
      this.activeIndex = '1';
    }
    if(path.indexOf('about')>=0){
      this.activeIndex = '2';
    }
    if(path.indexOf('vip-service')>=0){
      this.activeIndex = '3';
    }
    if(path.indexOf('company')>=0){
      this.activeIndex = '4';
    }
    if(path.indexOf('news')>=0){
      this.activeIndex = '5';
    }
    if(path.indexOf('policy')>=0){
      this.activeIndex = '6';
    }
    if(path.indexOf('trode')>=0){
      this.activeIndex = '7';
    }
    if(path.indexOf('exchange')>=0){
      this.activeIndex = '8';
    }
    if(path.indexOf('km')>=0){
      this.activeIndex = '9';
    }
    if(path.indexOf('member')>=0){
      this.activeIndex = '10';
    }
    if(path.indexOf('people')>=0){
      this.activeIndex = '11';
    }
    if(path.indexOf('data')>=0){
      this.activeIndex = '12';
    }
  }
}
</script>
<style>
.logo{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

</style>