| | |
| | | <span class="navico" v-else @click="showNav"><img src="../img/close.png" alt=""></span> |
| | | <!-- pc端菜单列表 --> |
| | | <ul class="nav_ul" ref="nav_ul"> |
| | | <li v-for="(menu, index) in menus" :key="index" :class="{active1: cur === index}" @click="jump(menu.url)"> |
| | | <li v-for="(menu, index) in menus" :key="index" :class="{' menu-active': curtab === index, ' menu-hover': cur === index}" @click="jump(menu.url)"> |
| | | <span @mouseover="contrlSubmenu(index)">{{ menu.text }}</span> |
| | | </li> |
| | | <div class="list1 active" v-if="menus[1].flag"> |
| | |
| | | name: 'Header', |
| | | data() { |
| | | return { |
| | | activeNames: ['1'], |
| | | cur: 0, |
| | | cur: -1, |
| | | curtab: 0, |
| | | isShow: false, |
| | | selectedsubId: null, |
| | | menus: [{ |
| | |
| | | this.isShow = false |
| | | name = name.toLowerCase() |
| | | if (!type) { // 主页面跳转 |
| | | let change = { |
| | | index: 0, |
| | | successcase: 2, |
| | | partner: 3, |
| | | news: 4, |
| | | companyprofile: 5 |
| | | } |
| | | this.curtab = change[name] |
| | | if (name === 'companyprofile') { // 关于明科,锚点参数 |
| | | this.$router.push({name: name, params: {hash: 'null'}}) |
| | | } else { |
| | |
| | | } else if (type === 'submenu') { // 产品中心子页面跳转 |
| | | this.menus[1].flag = false |
| | | this.menus[5].flag = false |
| | | this.curtab = 1 |
| | | this.selectedsubId = index |
| | | this.$router.push({name: name, params: {menuId: index}}) |
| | | } else if (type === 'aboutUs') { // 关于明科子页面跳转 |
| | | this.curtab = 5 |
| | | if (index === 3) { // 加入明科 |
| | | this.$router.push({name: name}) |
| | | } else { |
| | | this.$router.push({name: 'companyprofile', params: {hash: `#anchor-${index + 1}`}}) |
| | | } |
| | | } |
| | | |
| | | }, |
| | | showNav () { |
| | | this.isShow = !this.isShow |
| | |
| | | } |
| | | }, |
| | | leave () { |
| | | this.cur = -1 |
| | | this.menus[1].flag = false |
| | | this.menus[5].flag = false |
| | | }, |
| | |
| | | -webkit-animation: gupIn 1s 0.1s both; |
| | | -moz-animation: gupIn 1s 0.1s both; |
| | | animation: gupIn 1s 0.1s both; |
| | | z-index: 8888; |
| | | z-index: 2000; |
| | | top: 0; |
| | | |
| | | .wrapper { |
| | |
| | | .active { |
| | | opacity: 1; |
| | | } |
| | | .active1 { |
| | | .menu-hover { |
| | | background: #232323; |
| | | } |
| | | .menu-active { |
| | | background: #212020; |
| | | } |
| | | </style> |