Skip to content

M
mancheng_code
Commit e2c64a49 by heshihao
Options

feat: 修改内部导航栏

parent ede7de1b
Showing with 122 additions and 146 deletions
src/components/Header.vue
<template>
<header>
<div class="title">
<img src="../assets/images/header/head-title-left.png" alt="" srcset="" />
</div>
<div class="nav">
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#020929"
text-color="#818598"
active-text-color="#fff"
>
<el-menu-item index="index">
<img v-show="activeIndex == 'index'" src="../assets/images/header/icon-nav01.png" alt="" />
<img v-show="activeIndex != 'index'" src="../assets/images/header/icon-nav01.png" alt="" />
<span>招商驾驶舱</span>
</el-menu-item>
<el-menu-item index="atlas" :disabled="false">
<img v-show="activeIndex == 'atlas'" src="../assets/images/header/icon-nav02-select.png" alt="" />
<img v-show="activeIndex != 'atlas'" src="../assets/images/header/icon-nav02.png" alt="" />
<span>产业现状图谱</span>
</el-menu-item>
<el-menu-item index="radar" :disabled="false">
<img v-show="activeIndex == 'radar'" src="../assets/images/header/icon-nav03-select.png" alt="" />
<img v-show="activeIndex != 'radar'" src="../assets/images/header/icon-nav03.png" alt="" />
<span>产业招商雷达</span>
</el-menu-item>
<el-menu-item index="map" :disabled="false">
<img v-show="activeIndex == 'map'" src="../assets/images/header/icon-nav04-select.png" alt="" />
<img v-show="activeIndex != 'map'" src="../assets/images/header/icon-nav04.png" alt="" />
<span>产业招商地图</span>
</el-menu-item>
<el-menu-item index="assess" :disabled="false">
<img v-show="activeIndex == 'assess'" src="../assets/images/header/icon-nav05-select.png" alt="" />
<img v-show="activeIndex != 'assess'" src="../assets/images/header/icon-nav05.png" alt="" />
<span>智能选址评估</span>
</el-menu-item>
<el-menu-item index="portrait" :disabled="false">
<img v-show="activeIndex == 'portrait'" src="../assets/images/header/icon-nav06-select.png" alt="" />
<img v-show="activeIndex != 'portrait'" src="../assets/images/header/icon-nav06.png" alt="" />
<span>360企业画像</span>
</el-menu-item>
<el-menu-item index="resources" :disabled="false">
<img v-show="activeIndex == 'resources'" src="../assets/images/header/icon-nav07-select.png" alt="" />
<img v-show="activeIndex != 'resources'" src="../assets/images/header/icon-nav07.png" alt="" />
<span>招商资源管理</span>
</el-menu-item>
</el-menu>
</div>
<div class="user">
<div @click="goUserCenter">
<img src="../assets/images/header/icon-user.png" alt="" />
<span>用户中心</span>
</div>
<div @click="goLogin">
<img src="../assets/images/header/icon-signout.png" alt="" />
<span>退出登录</span>
<div class="header-content">
<img src="../assets/images/index/img-logo.png" alt="" style="position: absolute;left: 0;top: 0;z-index: 99;" />
<div class="header-nav">
<div class="nav-content">
<div
:class="[activeIndex == item.router ? 'nav-title' : 'nav-item']"
v-for="item in navList"
:key="item.name"
@click="handleSelect(item.router)"
>
{{ item.name }}
</div>
</div>
<div class="users">
<div class="u-left" @click="goUserCenter">
<img src="@/assets/images/index/icon-user.png" alt="" />
<span>用户中心</span>
</div>
<div class="u-right" @click="goLogin">
<img src="@/assets/images/index/icon-signout.png" alt="" />
<span>退出登录</span>
</div>
</div>
</div>
</div>
</header>
......@@ -69,9 +34,36 @@ export default {
return {
activeIndex: "index",
nowTime: null,
navList: [
{
name: "招商驾驶舱",
router: "home",
},
{
name: "产业现状图谱",
router: "atlas",
},
{
name: "产业招商雷达",
router: "radar",
},
{
name: "产业招商地图",
router: "map",
},
{ name: "智能选址评估", router: "assess" },
{
name: "360企业画像",
router: "portrait",
},
{
name: "招商资源管理",
router: "resources",
},
],
};
},
mounted() {
created() {
setInterval(() => {
this.getNowTime();
}, 1000);
......@@ -114,99 +106,80 @@ img,
span {
vertical-align: middle;
}
header {
header,
.header-content {
width: 100%;
height: 80px;
position: relative;
height: 90px;
line-height: 90px;
background-color: #121c3b;
color: #fefefe;
left: 0;
top: 0;
overflow: hidden;
.title {
float: left;
height: 90px;
line-height: 90px;
margin-left: 10px;
cursor: pointer;
img {
margin-top: -4px;
}
}
.user {
.header-nav {
position: absolute;
right: 30px;
width: 1490px;
height: 100%;
right: 0;
top: 0;
z-index: 11;
background: url("~@/assets/images/index/img-top-right.png") no-repeat;
display: flex;
height: 90px;
line-height: 90px;
color: #fff;
div {
margin-right: 24px;
}
div:last-of-type {
position: relative;
margin-left: 24px;
&::after {
position: absolute;
top: 36px;
left: -24px;
content: "";
width: 1px;
height: 20px;
background: #ffffff;
opacity: 0.4;
.nav-content {
padding-left: 285px;
height: 80px;
line-height: 80px;
display: flex;
align-items: center;
.nav-item {
font-size: 17px;
font-family: JiangChengXieHei-900W;
font-weight: normal;
color: #8dbfee;
line-height: 40px;
width: 130px;
height: 40px;
text-align: center;
cursor: pointer;
background: linear-gradient(
0deg,
rgba(239, 251, 255, 0.53) 0%,
rgba(152, 212, 250, 0.53) 11.9140625%,
rgba(255, 254, 254, 0.53) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-title {
font-size: 17px;
font-family: JiangChengXieHei-900W;
font-weight: normal;
line-height: 40px;
width: 148px;
height: 40px;
text-align: center;
cursor: pointer;
color: #fff;
opacity: 1;
background: url("~@/assets/images/index/icon-nav-select1.png");
}
}
span {
margin-left: 10px;
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
opacity: 0.5;
}
}
}
.nav,
.ul {
margin-left: 60px;
display: inline-block;
height: 90px;
li {
width: 124px;
height: 90px;
margin-right: 14px;
font-size: 16px;
padding: 0;
text-align: center;
&:hover {
background-color: transparent;
.users {
display: flex;
align-items: center;
margin-left: 20px;
.u-right {
margin-left: 10px;
}
span {
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
}
img {
margin-right: 4px;
}
}
}
span {
margin-top: -25px;
font-size: 18px;
font-family: PangMenZhengDao;
font-weight: 400;
font-style: italic;
color: #eff8fc;
line-height: 27px;
opacity: 0.5;
}
img {
width: 66px;
height: 64px;
display: block;
margin: 0px auto -26px;
}
span,
img {
-moz-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
}
//导航栏去除下划线
......@@ -310,3 +283,4 @@ header {
// }
// }
</style>
import overviewVue from '../views/resources/page/overview.vue';
src/views/home.vue
<template>
<div class="home">
<Header></Header>
<main>
<main class="main-box">
<transition name="el-fade-in" mode="out-in">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
......@@ -35,8 +35,8 @@ h1 {
text-align: center;
color: #fefefe;
}
main {
height: calc(100% - 90px);
.main-box {
height: calc(100% - 80px);
}
header {
background-color: transparent;
......
src/views/resources/resources.vue
......@@ -70,6 +70,8 @@ export default {
default:
this.activeIndex = this.$route.name;
}
this.$bus.$emit("setActive", "resources");
},
watch: {
$route() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment