Skip to content

M
mancheng_code
Commit e2c64a49 by heshihao
Options

feat: 修改内部导航栏

parent ede7de1b
Showing with 108 additions and 132 deletions
src/components/Header.vue
<template> <template>
<header> <header>
<div class="title"> <div class="header-content">
<img src="../assets/images/header/head-title-left.png" alt="" srcset="" /> <img src="../assets/images/index/img-logo.png" alt="" style="position: absolute;left: 0;top: 0;z-index: 99;" />
</div> <div class="header-nav">
<div class="nav"> <div class="nav-content">
<el-menu <div
:default-active="activeIndex" :class="[activeIndex == item.router ? 'nav-title' : 'nav-item']"
class="el-menu-demo" v-for="item in navList"
mode="horizontal" :key="item.name"
@select="handleSelect" @click="handleSelect(item.router)"
background-color="#020929"
text-color="#818598"
active-text-color="#fff"
> >
<el-menu-item index="index"> {{ item.name }}
<img v-show="activeIndex == 'index'" src="../assets/images/header/icon-nav01.png" alt="" /> </div>
<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>
<div class="user"> <div class="users">
<div @click="goUserCenter"> <div class="u-left" @click="goUserCenter">
<img src="../assets/images/header/icon-user.png" alt="" /> <img src="@/assets/images/index/icon-user.png" alt="" />
<span>用户中心</span> <span>用户中心</span>
</div> </div>
<div @click="goLogin"> <div class="u-right" @click="goLogin">
<img src="../assets/images/header/icon-signout.png" alt="" /> <img src="@/assets/images/index/icon-signout.png" alt="" />
<span>退出登录</span> <span>退出登录</span>
</div> </div>
</div> </div>
</div>
</div>
</header> </header>
</template> </template>
...@@ -69,9 +34,36 @@ export default { ...@@ -69,9 +34,36 @@ export default {
return { return {
activeIndex: "index", activeIndex: "index",
nowTime: null, 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(() => { setInterval(() => {
this.getNowTime(); this.getNowTime();
}, 1000); }, 1000);
...@@ -114,98 +106,79 @@ img, ...@@ -114,98 +106,79 @@ img,
span { span {
vertical-align: middle; vertical-align: middle;
} }
header { header,
.header-content {
width: 100%;
height: 80px;
position: relative; position: relative;
height: 90px; left: 0;
line-height: 90px; top: 0;
background-color: #121c3b;
color: #fefefe;
overflow: hidden; overflow: hidden;
.title { .header-nav {
float: left;
height: 90px;
line-height: 90px;
margin-left: 10px;
cursor: pointer;
img {
margin-top: -4px;
}
}
.user {
position: absolute; position: absolute;
right: 30px; width: 1490px;
height: 100%;
right: 0;
top: 0; top: 0;
z-index: 11;
background: url("~@/assets/images/index/img-top-right.png") no-repeat;
display: flex; display: flex;
height: 90px; .nav-content {
line-height: 90px; 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; color: #fff;
div { opacity: 1;
margin-right: 24px; background: url("~@/assets/images/index/icon-nav-select1.png");
} }
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;
} }
.users {
display: flex;
align-items: center;
margin-left: 20px;
.u-right {
margin-left: 10px;
} }
span { span {
margin-left: 10px;
font-size: 20px; font-size: 20px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #ffffff; 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;
}
}
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 { img {
width: 66px; margin-right: 4px;
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 { ...@@ -310,3 +283,4 @@ header {
// } // }
// } // }
</style> </style>
import overviewVue from '../views/resources/page/overview.vue';
src/views/home.vue
<template> <template>
<div class="home"> <div class="home">
<Header></Header> <Header></Header>
<main> <main class="main-box">
<transition name="el-fade-in" mode="out-in"> <transition name="el-fade-in" mode="out-in">
<keep-alive> <keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view> <router-view v-if="$route.meta.keepAlive"></router-view>
...@@ -35,8 +35,8 @@ h1 { ...@@ -35,8 +35,8 @@ h1 {
text-align: center; text-align: center;
color: #fefefe; color: #fefefe;
} }
main { .main-box {
height: calc(100% - 90px); height: calc(100% - 80px);
} }
header { header {
background-color: transparent; background-color: transparent;
......
src/views/resources/resources.vue
...@@ -70,6 +70,8 @@ export default { ...@@ -70,6 +70,8 @@ export default {
default: default:
this.activeIndex = this.$route.name; this.activeIndex = this.$route.name;
} }
this.$bus.$emit("setActive", "resources");
}, },
watch: { watch: {
$route() { $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