d31e475c by 刘远

修改结构

1 parent 5184130d
<template>
<div class="container">
<div class="wrapper">
<div class="nav-box selected" :class="[isYZT?'selected':'no-selected']" @click="jumpNav('isYZT')">
<div class="nav-box" :class="[isYZT?'selected':'no-selected']" @click="jumpNav('isYZT')">
<span>一张图</span>
</div>
<div class="nav-box no-selected" :class="[isCGSC?'selected':'no-selected']" @click="jumpNav('isCGSC')">
<div class="nav-box" :class="[isCGSC?'selected':'no-selected']" @click="jumpNav('isCGSC')">
<span>成果审查管理</span>
</div>
<div class="nav-box no-selected" :class="[isSSJD?'selected':'no-selected']" @click="jumpNav('isSSJD')">
<div class="nav-box" :class="[isSSJD?'selected':'no-selected']" @click="jumpNav('isSSJD')">
<span>实施监督预警</span>
</div>
<div class="nav-box no-selected" :class="[isPGJG?'selected':'no-selected']" @click="jumpNav('isPGJG')">
<div class="nav-box" :class="[isPGJG?'selected':'no-selected']" @click="jumpNav('isPGJG')">
<span>批后监管</span>
</div>
</div>
</div>
</template>
......@@ -24,16 +23,20 @@
components: {},
data() {
return {
isYZT: true, // 一张图
isCGSC: false, // 成果审查管理
isYZT: false, // 一张图
isCGSC: true, // 成果审查管理
isSSJD: false, // 实施监督预警
isPGJG: false, // 批后监管
flagArr: ['isYZT', 'isCGSC', 'isSSJD', 'isPGJG']
}
},
mounted() {},
methods: {
jumpNav(val) {
this[val] = !this[val];
this.flagArr.forEach(ele => {
if (ele == val) this[val] = true;
else this[ele] = false;
});
},
}
}
......@@ -51,9 +54,9 @@
justify-content: space-around;
font-size: 24px;
color: #FFFFFF;
cursor: pointer;
}
.nav-box {
width: 306px !important;
text-align: center;
......
<template>
<div class="container">
<div class="assert-list"
:class="[isAssert?'a-selected':'a-no-selected']"
@click="changeSelect('isAssert')">
<div class="assert-list" :class="[isAssert?'a-selected':'a-no-selected']" @click="changeSelect('isAssert')">
<div class="expend">
<img src="../assets/一张图/icon_资源目录.png" alt="">
</div>
......@@ -12,9 +10,7 @@
<treeSearch @foldAssert='foldAssert'></treeSearch>
</div>
<div class="assert-list"
:class="[isZTFX?'a-selected':'a-no-selected']"
@click="changeSelect('isZTFX')"
<div class="assert-list" :class="[isZTFX?'a-selected':'a-no-selected']" @click="changeSelect('isZTFX')"
style="margin-top: 30px;">
<div class="expend">
<img src="../assets/一张图/icon_专题分析.png" alt="">
......@@ -25,9 +21,7 @@
<treeSearch @foldAssert='foldAssert'></treeSearch>
</div>
<div class="assert-list"
:class="[isFASC?'a-selected':'a-no-selected']"
@click="changeSelect('isFASC')"
<div class="assert-list" :class="[isFASC?'a-selected':'a-no-selected']" @click="changeSelect('isFASC')"
style="margin-top: 30px;">
<div class="expend">
<img src="../assets/一张图/icon_方案审查.png" alt="">
......@@ -42,7 +36,6 @@
</template>
<script>
import treeSearch from './treeSearch';
......@@ -65,7 +58,8 @@
methods: {
changeSelect(val) {
this.keepKey.forEach(ele => {
if(val == ele) this[ele] = true; else this[ele] = false;
if (val == ele) this[ele] = true;
else this[ele] = false;
})
},
foldAssert() {
......@@ -90,7 +84,7 @@
cursor: pointer;
}
.a-selected{
.a-selected {
background-image: url('../assets/一张图/bg_资源目录.png');
}
......
......@@ -32,8 +32,7 @@
name: 'mapPop',
components: {},
data() {
return {
}
return {}
},
mounted() {},
methods: {
......@@ -51,14 +50,14 @@
font-size: 16px;
}
.list-box span:nth-of-type(1){
.list-box span:nth-of-type(1) {
display: inline-block;
width: 98px;
margin-right: 20px;
color: rgba(255, 255, 255, .7);
}
.list-box span:nth-of-type(2){
.list-box span:nth-of-type(2) {
margin-top: 14px;
display: inline-block;
}
......
......@@ -36,6 +36,9 @@
},
mounted() {},
methods: {
handleSearch(val) {
this.$emit('searchRoat', val);
},
handleIs2D() {
this.is2D = !this.is2D;
this.$emit('is2D', this.is2D);
......@@ -52,9 +55,6 @@
this.isClear = !this.isClear;
this.$emit('isClear', this.isClear);
},
handleSearch(val) {
this.$emit('searchRoat', val);
}
}
}
</script>
......