|
|
@@ -3,12 +3,8 @@
|
|
|
<div class="logo">青浦一张图</div>
|
|
|
<div class="menu">
|
|
|
<ul class="menu_ul">
|
|
|
- <li
|
|
|
- v-for="(item,index) in menuList"
|
|
|
- :key="index"
|
|
|
- :class="{'active':item.isActive}"
|
|
|
- @click="menuClick(item.index,$event)"
|
|
|
- >{{ item.label }}</li>
|
|
|
+ <li v-for="(item, index) in menuList" :key="index" :class="{ 'active': item.isActive }"
|
|
|
+ @click="menuClick(item.index, $event)">{{ item.label }}</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -21,18 +17,18 @@ export default {
|
|
|
return {
|
|
|
menuList: [
|
|
|
{ index: 1, label: "首页", isActive: true },
|
|
|
- { index: 2, label: "数据中心", isActive: false },
|
|
|
- { index: 3, label: "应用中心", isActive: false },
|
|
|
- { index: 4, label: "微功能中心", isActive: false },
|
|
|
- { index: 5, label: "开发中心", isActive: false },
|
|
|
- { index: 6, label: "运管中心", isActive: false },
|
|
|
- { index: 7, label: "综合展示", isActive: false }
|
|
|
+ { index: 2, label: "时空数据管理", isActive: false },
|
|
|
+ { index: 3, label: "二维GIS引擎", isActive: false },
|
|
|
+ { index: 4, label: "时空门户", isActive: false },
|
|
|
+ { index: 5, label: "微功能", isActive: false },
|
|
|
+ { index: 6, label: "应用管理", isActive: false },
|
|
|
+ { index: 7, label: "运行管理", isActive: false }
|
|
|
]
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
menuClick(index) {
|
|
|
- this.menuList.map(function(item) {
|
|
|
+ this.menuList.map(function (item) {
|
|
|
if (item.index == index) {
|
|
|
item.isActive = true;
|
|
|
} else {
|
|
|
@@ -54,7 +50,7 @@ export default {
|
|
|
this.$router.push("/function");
|
|
|
break;
|
|
|
case 5:
|
|
|
- this.$router.push("/development");
|
|
|
+ this.$router.push("/wgn");
|
|
|
break;
|
|
|
case 6:
|
|
|
this.$router.push("/oamc");
|
|
|
@@ -86,37 +82,41 @@ export default {
|
|
|
<style lang="less" scoped>
|
|
|
#header {
|
|
|
width: 1920px;
|
|
|
- height: 90px;
|
|
|
+ height: 70px;
|
|
|
background: linear-gradient(180deg, #2c2f74, #494d98);
|
|
|
color: #ffffff;
|
|
|
margin: 0 auto;
|
|
|
+
|
|
|
.logo {
|
|
|
display: inline-block;
|
|
|
- height: 90px;
|
|
|
+ height: 70px;
|
|
|
width: 200px;
|
|
|
text-align: center;
|
|
|
- line-height: 90px;
|
|
|
+ line-height: 70px;
|
|
|
font-size: 24px;
|
|
|
}
|
|
|
+
|
|
|
.menu {
|
|
|
display: inline-block;
|
|
|
float: right;
|
|
|
+
|
|
|
.menu_ul {
|
|
|
li {
|
|
|
display: inline-block;
|
|
|
height: 50px;
|
|
|
- width: 150px;
|
|
|
+ width: fit-content;
|
|
|
line-height: 50px;
|
|
|
text-align: center;
|
|
|
cursor: pointer;
|
|
|
- margin-top: 30px;
|
|
|
- margin-bottom: 10px;
|
|
|
- font-size: 24px;
|
|
|
+ margin: 10px 20px;
|
|
|
+ font-size: 20px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
+
|
|
|
li:hover {
|
|
|
color: #00bbff;
|
|
|
}
|
|
|
+
|
|
|
li.active {
|
|
|
color: #00bbff;
|
|
|
}
|