You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
557 lines
14 KiB
557 lines
14 KiB
1 year ago
|
<template>
|
||
|
|
<div class="head">
|
||
|
|
<div class="headCon">
|
||
|
|
<div class="info">
|
||
|
|
<div class="iconTitle">
|
||
|
|
<img src="@/assets/image/newLogo.png" @click="handleLogo"/>
|
||
|
|
<!-- <img src="@/assets/image/logo/logo.png" @click="handleLogo"/>-->
|
||
|
|
<!-- <img src="@/assets/image/newTitle.png" @click="handleLogo"/>-->
|
||
|
|
<span>空天数据</span>
|
||
|
|
</div>
|
||
|
|
<div class="msg">
|
||
|
|
<div class="msgCon" @click="handleTrans">
|
||
|
|
<img src="../assets/Fill.png" alt="">
|
||
|
|
<span>翻译</span>
|
||
|
|
</div>
|
||
|
|
<div class="msgCon" @click="handleSearch">
|
||
|
|
<img src="../assets/iconSearch.png" alt="">
|
||
|
|
<span>检索</span>
|
||
|
|
</div>
|
||
|
|
<div class="msgCon" style="position: relative;left: 0; top: 0;">
|
||
|
|
<img src="../assets/iconUser.png" alt="">
|
||
|
|
<span @click="handlePerson"
|
||
|
|
style="width: 90px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{
|
||
|
|
$store.state.userInfo.nickName | ellipsis
|
||
|
|
}}</span>
|
||
|
|
<ul class="msgIndividual">
|
||
|
|
<li v-for="(item, index) in msgIndividual" :key="index" @click="handleIndividual(item)">{{ item.name }}
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="menu">
|
||
|
|
<div class="menu-wp" style="z-index: 1999" ref="menuWp" @mouseenter="handleOpen"
|
||
|
|
:style="{height: showSubMenu ? '171px' : '51px'}">
|
||
|
|
<hk-menu
|
||
|
|
:collapse-transition="false"
|
||
|
|
ref="menu"
|
||
|
|
:default-active="activeIndex"
|
||
|
|
class="el-menu-demo"
|
||
|
|
mode="horizontal"
|
||
|
|
menu-trigger="click"
|
||
|
|
@select="handleSelect"
|
||
|
|
>
|
||
|
|
<template v-for="(item, index) in menus">
|
||
|
|
<!-- 只有一级菜单 -->
|
||
|
|
<el-menu-item
|
||
|
|
v-if="!item.children" :key="index" :index="item.path" :id="item.path">
|
||
|
|
<span class="span4" slot="title">{{ item.name }}</span>
|
||
|
|
</el-menu-item>
|
||
|
|
<!-- 有二级菜单 -->
|
||
|
|
<hk-submenu
|
||
|
|
:popper-append-to-body="false"
|
||
|
|
popper-class="hk-popper"
|
||
|
|
v-else :key="index" :index="item.path" :id="item.path" ref="clearFix">
|
||
|
|
<template slot="title">
|
||
|
|
<span class="span4" slot="title">{{ item.name }}</span>
|
||
|
|
</template>
|
||
|
|
<template v-for="(etem, index) in item.children">
|
||
|
|
<el-menu-item
|
||
|
|
style="background:none; border-radius: 0" :index="etem.path" :key="index">
|
||
|
|
{{ etem.name }}
|
||
|
|
</el-menu-item>
|
||
|
|
</template>
|
||
|
|
</hk-submenu>
|
||
|
|
</template>
|
||
|
|
</hk-menu>
|
||
|
|
<!-- <transition name="el-zoom-in-top">-->
|
||
|
|
<!-- <div class="bg" style="z-index: 1999" v-show="showSubMenu"></div>-->
|
||
|
|
<!-- </transition>-->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<transition name="el-zoom-in-top">
|
||
|
|
<div class="bg" v-show="showSubMenu"></div>
|
||
|
|
</transition>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {loginOut} from "@/api/login";
|
||
|
|
import {msgIndividual} from "@/utils/partten/partten";
|
||
|
|
import hkMenu from "./hkMenu/index.vue";
|
||
|
|
import hkSubmenu from "./hkMenu/hkSubmenu.vue";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: ["menu", "count"],
|
||
|
|
components: {hkMenu, hkSubmenu},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
showSubMenu: false,
|
||
|
|
activeIndex: "",
|
||
|
|
menus: this.$partten.menus,
|
||
|
|
msgIndividual: msgIndividual,
|
||
|
|
subMenus: ['hkdata', 'hkknowledge', 'service'],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
$route: {
|
||
|
|
handler(val, oldval) {
|
||
|
|
this.activeIndex = val.matched[1].name;
|
||
|
|
},
|
||
|
|
// 深度观察监听
|
||
|
|
deep: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.activeIndex = this.$route.matched[1].name;
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.changeStyle();
|
||
|
|
let menuWp = this.$refs.menuWp
|
||
|
|
if (menuWp) {
|
||
|
|
menuWp.addEventListener('mouseleave', this.handleMenuClose)
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
destroyed() {
|
||
|
|
let menuWp = this.$refs.menuWp
|
||
|
|
if (menuWp) {
|
||
|
|
menuWp.removeEventListener('mouseleave', this.handleMenuClose)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleMenuClose(e) {
|
||
|
|
this.handleClose()
|
||
|
|
},
|
||
|
|
handleClose() {
|
||
|
|
if (!this.showSubMenu) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.showSubMenu = false
|
||
|
|
this.subMenus.forEach(path => this.$refs.menu.closeMenu(path))
|
||
|
|
},
|
||
|
|
handleOpen() {
|
||
|
|
if (this.showSubMenu) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.showSubMenu = true
|
||
|
|
this.subMenus.forEach(path => this.$refs.menu.openMenu(path))
|
||
|
|
|
||
|
|
},
|
||
|
|
//修改首页头部导航二级菜单的位置
|
||
|
|
changeStyle: function () {
|
||
|
|
this.$refs.clearFix[0].popperElm.style.marginLeft = '40px';
|
||
|
|
this.$refs.clearFix[1].popperElm.style.marginLeft = '40px';
|
||
|
|
this.$refs.clearFix[2].popperElm.style.marginLeft = '40px';
|
||
|
|
},
|
||
|
|
handleTrans() {
|
||
|
|
this.$router.push("/translate");
|
||
|
|
},
|
||
|
|
handleSearch() {
|
||
|
|
this.$router.push("/search");
|
||
|
|
},
|
||
|
|
handleSelect(key, keyPath) {
|
||
|
|
if (key == 'https://www.zg-learn.com') {
|
||
|
|
window.open(key, '_black');
|
||
|
|
this.handleClose()
|
||
|
|
} else {
|
||
|
|
|
||
|
|
this.$router.push("/" + key);
|
||
|
|
this.$store.commit('SET_QUERY_PARAMS', '')
|
||
|
|
this.handleClose()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handleLogo() {
|
||
|
|
this.$router.push("/polymerize");
|
||
|
|
},
|
||
|
|
handlePerson() {
|
||
|
|
this.$router.push("/person");
|
||
|
|
},
|
||
|
|
handleIndividual(item) {
|
||
|
|
if (item.path == '') {
|
||
|
|
loginOut().then(() => {
|
||
|
|
this.$store.commit("setToken", "");
|
||
|
|
this.$store.commit("setUserInfo", "");
|
||
|
|
this.$router.push("/");
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.$router.push({path: "/person", query: {OnlyTitle: item.path}});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handleLoginOut() {
|
||
|
|
loginOut().then(() => {
|
||
|
|
this.$store.commit("setToken", "");
|
||
|
|
this.$store.commit("setUserInfo", "");
|
||
|
|
this.$router.push("/");
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
filters: {
|
||
|
|
ellipsis(value) {
|
||
|
|
if (!value) return "";
|
||
|
|
if (value.length > 12) {
|
||
|
|
return value.slice(0, 12) + "...";
|
||
|
|
}
|
||
|
|
return value;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.bg {
|
||
|
|
position: absolute;
|
||
|
|
top: 51px;
|
||
|
|
|
||
|
|
width: 100%;
|
||
|
|
//margin-left: -8.6vw;
|
||
|
|
height: 120px;
|
||
|
|
background: #3B79D7;
|
||
|
|
opacity: 0.94;
|
||
|
|
z-index: 999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.head {
|
||
|
|
height: 110px;
|
||
|
|
//flex-shrink: 0;
|
||
|
|
//display: flex;
|
||
|
|
//justify-content: space-between;
|
||
|
|
//align-items: center;
|
||
|
|
//padding: 0 83px;
|
||
|
|
background: url("../assets/image/head-bg.png");
|
||
|
|
background-size: 100% 100%;
|
||
|
|
|
||
|
|
& > .headCon {
|
||
|
|
width: 83.4%;
|
||
|
|
min-width: 1320px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 0 42px;
|
||
|
|
padding-top: 13px;
|
||
|
|
|
||
|
|
& > div {
|
||
|
|
display: flex;
|
||
|
|
-webkit-box-align: center;
|
||
|
|
align-items: center;
|
||
|
|
-webkit-box-pack: justify;
|
||
|
|
-ms-flex-pack: justify;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
& > .iconTitle {
|
||
|
|
& > img {
|
||
|
|
width: 208px;
|
||
|
|
cursor: pointer;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
& > img:nth-child(1) {
|
||
|
|
width: 46px;
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
span {
|
||
|
|
display: inline-block;
|
||
|
|
margin: 0;
|
||
|
|
color: #fff;
|
||
|
|
font-weight: 600;
|
||
|
|
line-height: 46px;
|
||
|
|
/* font-size: 14px; */
|
||
|
|
font-size: 24px;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
& > .msg {
|
||
|
|
/deep/ .el-badge__content {
|
||
|
|
border: none;
|
||
|
|
background: #f53502;
|
||
|
|
}
|
||
|
|
|
||
|
|
/deep/ .el-badge__content.is-fixed {
|
||
|
|
right: 5px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.username {
|
||
|
|
height: 20px;
|
||
|
|
line-height: 20px;
|
||
|
|
|
||
|
|
& > span {
|
||
|
|
color: rgba(255, 255, 255, 0.81);
|
||
|
|
font-size: 14px;
|
||
|
|
position: relative;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
& > span {
|
||
|
|
position: absolute;
|
||
|
|
background-color: #f53502;
|
||
|
|
letter-spacing: 0px;
|
||
|
|
border-radius: 50%;
|
||
|
|
line-height: 15px;
|
||
|
|
height: 15px;
|
||
|
|
width: 15px;
|
||
|
|
text-align: center;
|
||
|
|
color: #ffffff;
|
||
|
|
font-size: 12px;
|
||
|
|
top: -3px;
|
||
|
|
right: -8px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
& > img {
|
||
|
|
//margin-left: 37px;
|
||
|
|
width: 20px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
& > .msgCon {
|
||
|
|
cursor: pointer;
|
||
|
|
margin: 0 13px;
|
||
|
|
float: left;
|
||
|
|
height: 45px;
|
||
|
|
line-height: 45px;
|
||
|
|
|
||
|
|
& > span {
|
||
|
|
color: rgba(255, 255, 255, 0.81);
|
||
|
|
font-size: 14px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
& > img {
|
||
|
|
width: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.msgIndividual {
|
||
|
|
list-style: none;
|
||
|
|
z-index: 100;
|
||
|
|
border: none;
|
||
|
|
padding: 5px 0;
|
||
|
|
-webkit-box-shadow: 0px 2px 4px 0px rgba(25, 90, 183, 0.07);
|
||
|
|
box-shadow: 0px 2px 4px 0px rgba(25, 90, 183, 0.07);
|
||
|
|
min-width: 90px;
|
||
|
|
border-radius: 5px;
|
||
|
|
top: 0;
|
||
|
|
margin-top: 45px;
|
||
|
|
padding-left: 0 !important;
|
||
|
|
position: absolute;
|
||
|
|
background: #ffffff;
|
||
|
|
display: none;
|
||
|
|
z-index: 9999;
|
||
|
|
|
||
|
|
li {
|
||
|
|
background-color: #FFF;
|
||
|
|
float: none;
|
||
|
|
height: 36px;
|
||
|
|
line-height: 36px;
|
||
|
|
padding: 0 10px;
|
||
|
|
color: #909399;
|
||
|
|
border-radius: 0px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
li:last-child {
|
||
|
|
text-align: left;
|
||
|
|
text-indent: 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
li:hover {
|
||
|
|
color: #1767E0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
& > .msgCon:last-child:hover .msgIndividual {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
& > .menu {
|
||
|
|
height: 47px;
|
||
|
|
//display: flex;
|
||
|
|
//align-items: center;
|
||
|
|
position: relative;
|
||
|
|
//padding-top: 15px;
|
||
|
|
& > .menu-wp {
|
||
|
|
//width: 83.4%;
|
||
|
|
width: 1070px;
|
||
|
|
height: 171px;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
//margin-left: 8.3%;
|
||
|
|
left: 8.3%;
|
||
|
|
padding-left: 42px;
|
||
|
|
|
||
|
|
& > .el-menu-demo {
|
||
|
|
background-color: inherit;
|
||
|
|
border-bottom: 0;
|
||
|
|
|
||
|
|
& > .el-menu-item:not(.is-disabled):focus,
|
||
|
|
.el-menu-item:not(.is-disabled):hover,
|
||
|
|
.el-submenu .el-submenu__title:hover {
|
||
|
|
background-color: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
& > .el-menu-item {
|
||
|
|
font-weight: 400;
|
||
|
|
color: rgba(255, 255, 255, 0.89);
|
||
|
|
letter-spacing: 0px;
|
||
|
|
font-size: 18px;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0 55px;
|
||
|
|
}
|
||
|
|
|
||
|
|
& > .el-menu-item:first-child {
|
||
|
|
margin-left: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.span4 {
|
||
|
|
font-weight: 500;
|
||
|
|
color: rgba(255, 255, 255, 0.89);
|
||
|
|
letter-spacing: 0px;
|
||
|
|
font-size: 18px;
|
||
|
|
padding: 0;
|
||
|
|
font-family: MicrosoftYaHei;
|
||
|
|
}
|
||
|
|
|
||
|
|
& > .el-menu-item.is-active {
|
||
|
|
border-bottom: 0;
|
||
|
|
position: relative;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
& > .el-submenu {
|
||
|
|
height: 51px;
|
||
|
|
line-height: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
& > .el-submenu.is-active {
|
||
|
|
.el-submenu__title {
|
||
|
|
//border-bottom: none;
|
||
|
|
position: relative;
|
||
|
|
&::after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
display: inline-block;
|
||
|
|
width: 16px;
|
||
|
|
height: 3px;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 2px;
|
||
|
|
left: 50%;
|
||
|
|
margin-left: -8px;
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
& > .el-menu-item.is-active::after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
width: 16px;
|
||
|
|
height: 3px;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 2px;
|
||
|
|
left: 50%;
|
||
|
|
margin-left: -8px;
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
& > .el-menu-item.is-active {
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
& > .el-menu-item:hover {
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
& > .el-submenu /deep/ .el-submenu__title:hover {
|
||
|
|
background-color: transparent !important;
|
||
|
|
// background-color: #41a3fb !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/deep/ .el-menu-item, /deep/ .el-submenu__title {
|
||
|
|
//height: 45px !important;
|
||
|
|
//line-height: 45px !important;
|
||
|
|
height: 40px !important;
|
||
|
|
line-height: 40px !important;
|
||
|
|
//border-bottom: 2px solid #5ee6f8;
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/deep/ .el-submenu__title {
|
||
|
|
margin: 0 55px;
|
||
|
|
padding: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/deep/ .el-submenu .el-submenu__icon-arrow {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
& > img {
|
||
|
|
cursor: pointer;
|
||
|
|
width: 18px;
|
||
|
|
margin-left: 30px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
& > div {
|
||
|
|
/deep/ .el-badge__content {
|
||
|
|
border: none;
|
||
|
|
background: #f53502;
|
||
|
|
}
|
||
|
|
|
||
|
|
/deep/ .el-badge__content.is-fixed {
|
||
|
|
right: 5px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.username {
|
||
|
|
height: 20px;
|
||
|
|
line-height: 20px;
|
||
|
|
|
||
|
|
& > span {
|
||
|
|
color: #b0adad;
|
||
|
|
font-size: 14px;
|
||
|
|
position: relative;
|
||
|
|
cursor: pointer;
|
||
|
|
font-weight: 500;
|
||
|
|
font-family: MicrosoftYaHei;
|
||
|
|
|
||
|
|
& > span {
|
||
|
|
position: absolute;
|
||
|
|
background-color: #f53502;
|
||
|
|
letter-spacing: 0px;
|
||
|
|
border-radius: 50%;
|
||
|
|
line-height: 15px;
|
||
|
|
height: 15px;
|
||
|
|
width: 15px;
|
||
|
|
text-align: center;
|
||
|
|
color: #ffffff;
|
||
|
|
font-size: 12px;
|
||
|
|
top: -3px;
|
||
|
|
right: -8px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
& > img {
|
||
|
|
margin-left: 37px;
|
||
|
|
width: 20px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|