修改结构
Showing
5 changed files
with
37 additions
and
41 deletions
| ... | @@ -13,11 +13,11 @@ | ... | @@ -13,11 +13,11 @@ |
| 13 | } | 13 | } |
| 14 | * { | 14 | * { |
| 15 | margin: 0px; | 15 | margin: 0px; |
| 16 | padding: 0px; | 16 | padding: 0px; |
| 17 | list-style: none; | 17 | list-style: none; |
| 18 | } | 18 | } |
| 19 | 19 | ||
| 20 | .cesium-viewer-toolbar, .cesium-viewer-animationContainer, .cesium-viewer-bottom, .cesium-viewer-fullscreenContainer { | 20 | .cesium-viewer-toolbar, .cesium-viewer-animationContainer, .cesium-viewer-bottom, .cesium-viewer-fullscreenContainer { |
| 21 | display: none !important; | 21 | display: none !important; |
| 22 | } | 22 | } |
| 23 | </style> | 23 | </style> | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <div class="container"> | 2 | <div class="container"> |
| 3 | <div class="wrapper"> | 3 | <div class="wrapper"> |
| 4 | <div class="nav-box selected" :class="[isYZT?'selected':'no-selected']" @click="jumpNav('isYZT')"> | 4 | <div class="nav-box" :class="[isYZT?'selected':'no-selected']" @click="jumpNav('isYZT')"> |
| 5 | <span>一张图</span> | 5 | <span>一张图</span> |
| 6 | </div> | 6 | </div> |
| 7 | <div class="nav-box no-selected" :class="[isCGSC?'selected':'no-selected']" @click="jumpNav('isCGSC')"> | 7 | <div class="nav-box" :class="[isCGSC?'selected':'no-selected']" @click="jumpNav('isCGSC')"> |
| 8 | <span>成果审查管理</span> | 8 | <span>成果审查管理</span> |
| 9 | </div> | 9 | </div> |
| 10 | <div class="nav-box no-selected" :class="[isSSJD?'selected':'no-selected']" @click="jumpNav('isSSJD')"> | 10 | <div class="nav-box" :class="[isSSJD?'selected':'no-selected']" @click="jumpNav('isSSJD')"> |
| 11 | <span>实施监督预警</span> | 11 | <span>实施监督预警</span> |
| 12 | </div> | 12 | </div> |
| 13 | <div class="nav-box no-selected" :class="[isPGJG?'selected':'no-selected']" @click="jumpNav('isPGJG')"> | 13 | <div class="nav-box" :class="[isPGJG?'selected':'no-selected']" @click="jumpNav('isPGJG')"> |
| 14 | <span>批后监管</span> | 14 | <span>批后监管</span> |
| 15 | </div> | 15 | </div> |
| 16 | </div> | 16 | </div> |
| 17 | |||
| 18 | </div> | 17 | </div> |
| 19 | </template> | 18 | </template> |
| 20 | 19 | ||
| ... | @@ -24,16 +23,20 @@ | ... | @@ -24,16 +23,20 @@ |
| 24 | components: {}, | 23 | components: {}, |
| 25 | data() { | 24 | data() { |
| 26 | return { | 25 | return { |
| 27 | isYZT: true, // 一张图 | 26 | isYZT: false, // 一张图 |
| 28 | isCGSC: false, // 成果审查管理 | 27 | isCGSC: true, // 成果审查管理 |
| 29 | isSSJD: false, // 实施监督预警 | 28 | isSSJD: false, // 实施监督预警 |
| 30 | isPGJG: false, // 批后监管 | 29 | isPGJG: false, // 批后监管 |
| 30 | flagArr: ['isYZT', 'isCGSC', 'isSSJD', 'isPGJG'] | ||
| 31 | } | 31 | } |
| 32 | }, | 32 | }, |
| 33 | mounted() {}, | 33 | mounted() {}, |
| 34 | methods: { | 34 | methods: { |
| 35 | jumpNav(val) { | 35 | jumpNav(val) { |
| 36 | this[val] = !this[val]; | 36 | this.flagArr.forEach(ele => { |
| 37 | if (ele == val) this[val] = true; | ||
| 38 | else this[ele] = false; | ||
| 39 | }); | ||
| 37 | }, | 40 | }, |
| 38 | } | 41 | } |
| 39 | } | 42 | } |
| ... | @@ -51,9 +54,9 @@ | ... | @@ -51,9 +54,9 @@ |
| 51 | justify-content: space-around; | 54 | justify-content: space-around; |
| 52 | font-size: 24px; | 55 | font-size: 24px; |
| 53 | color: #FFFFFF; | 56 | color: #FFFFFF; |
| 57 | cursor: pointer; | ||
| 54 | } | 58 | } |
| 55 | 59 | ||
| 56 | |||
| 57 | .nav-box { | 60 | .nav-box { |
| 58 | width: 306px !important; | 61 | width: 306px !important; |
| 59 | text-align: center; | 62 | text-align: center; | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <div class="container"> | 2 | <div class="container"> |
| 3 | <div class="assert-list" | 3 | <div class="assert-list" :class="[isAssert?'a-selected':'a-no-selected']" @click="changeSelect('isAssert')"> |
| 4 | :class="[isAssert?'a-selected':'a-no-selected']" | ||
| 5 | @click="changeSelect('isAssert')"> | ||
| 6 | <div class="expend"> | 4 | <div class="expend"> |
| 7 | <img src="../assets/一张图/icon_资源目录.png" alt=""> | 5 | <img src="../assets/一张图/icon_资源目录.png" alt=""> |
| 8 | </div> | 6 | </div> |
| ... | @@ -11,30 +9,26 @@ | ... | @@ -11,30 +9,26 @@ |
| 11 | <div style="margin-top: 16px;" v-show='isAssert'> | 9 | <div style="margin-top: 16px;" v-show='isAssert'> |
| 12 | <treeSearch @foldAssert='foldAssert'></treeSearch> | 10 | <treeSearch @foldAssert='foldAssert'></treeSearch> |
| 13 | </div> | 11 | </div> |
| 14 | 12 | ||
| 15 | <div class="assert-list" | 13 | <div class="assert-list" :class="[isZTFX?'a-selected':'a-no-selected']" @click="changeSelect('isZTFX')" |
| 16 | :class="[isZTFX?'a-selected':'a-no-selected']" | 14 | style="margin-top: 30px;"> |
| 17 | @click="changeSelect('isZTFX')" | ||
| 18 | style="margin-top: 30px;"> | ||
| 19 | <div class="expend"> | 15 | <div class="expend"> |
| 20 | <img src="../assets/一张图/icon_专题分析.png" alt=""> | 16 | <img src="../assets/一张图/icon_专题分析.png" alt=""> |
| 21 | </div> | 17 | </div> |
| 22 | <div class="name">专题分析</div> | 18 | <div class="name">专题分析</div> |
| 23 | </div> | 19 | </div> |
| 24 | <div style="margin-top: 16px;" v-show='isZTFX'> | 20 | <div style="margin-top: 16px;" v-show='isZTFX'> |
| 25 | <treeSearch @foldAssert='foldAssert'></treeSearch> | 21 | <treeSearch @foldAssert='foldAssert'></treeSearch> |
| 26 | </div> | 22 | </div> |
| 27 | 23 | ||
| 28 | <div class="assert-list" | 24 | <div class="assert-list" :class="[isFASC?'a-selected':'a-no-selected']" @click="changeSelect('isFASC')" |
| 29 | :class="[isFASC?'a-selected':'a-no-selected']" | 25 | style="margin-top: 30px;"> |
| 30 | @click="changeSelect('isFASC')" | ||
| 31 | style="margin-top: 30px;"> | ||
| 32 | <div class="expend"> | 26 | <div class="expend"> |
| 33 | <img src="../assets/一张图/icon_方案审查.png" alt=""> | 27 | <img src="../assets/一张图/icon_方案审查.png" alt=""> |
| 34 | </div> | 28 | </div> |
| 35 | <div class="name">方案审查</div> | 29 | <div class="name">方案审查</div> |
| 36 | </div> | 30 | </div> |
| 37 | <div style="margin-top: 16px;" v-show='isFASC'> | 31 | <div style="margin-top: 16px;" v-show='isFASC'> |
| 38 | <treeSearch @foldAssert='foldAssert'></treeSearch> | 32 | <treeSearch @foldAssert='foldAssert'></treeSearch> |
| 39 | </div> | 33 | </div> |
| 40 | 34 | ||
| ... | @@ -42,11 +36,10 @@ | ... | @@ -42,11 +36,10 @@ |
| 42 | </template> | 36 | </template> |
| 43 | 37 | ||
| 44 | <script> | 38 | <script> |
| 45 | |||
| 46 | import treeSearch from './treeSearch'; | 39 | import treeSearch from './treeSearch'; |
| 47 | 40 | ||
| 48 | 41 | ||
| 49 | export default { | 42 | export default { |
| 50 | name: 'leftAssert', | 43 | name: 'leftAssert', |
| 51 | components: { | 44 | components: { |
| 52 | treeSearch | 45 | treeSearch |
| ... | @@ -65,11 +58,12 @@ | ... | @@ -65,11 +58,12 @@ |
| 65 | methods: { | 58 | methods: { |
| 66 | changeSelect(val) { | 59 | changeSelect(val) { |
| 67 | this.keepKey.forEach(ele => { | 60 | this.keepKey.forEach(ele => { |
| 68 | if(val == ele) this[ele] = true; else this[ele] = false; | 61 | if (val == ele) this[ele] = true; |
| 62 | else this[ele] = false; | ||
| 69 | }) | 63 | }) |
| 70 | }, | 64 | }, |
| 71 | foldAssert() { | 65 | foldAssert() { |
| 72 | this.isAssert = false; | 66 | this.isAssert = false; |
| 73 | } | 67 | } |
| 74 | } | 68 | } |
| 75 | } | 69 | } |
| ... | @@ -90,14 +84,14 @@ | ... | @@ -90,14 +84,14 @@ |
| 90 | cursor: pointer; | 84 | cursor: pointer; |
| 91 | } | 85 | } |
| 92 | 86 | ||
| 93 | .a-selected{ | 87 | .a-selected { |
| 94 | background-image: url('../assets/一张图/bg_资源目录.png'); | 88 | background-image: url('../assets/一张图/bg_资源目录.png'); |
| 95 | } | 89 | } |
| 96 | 90 | ||
| 97 | .a-no-selected { | 91 | .a-no-selected { |
| 98 | background-image: url('../assets/一张图/bg_专题分析.png'); | 92 | background-image: url('../assets/一张图/bg_专题分析.png'); |
| 99 | } | 93 | } |
| 100 | 94 | ||
| 101 | .assert-list .expend { | 95 | .assert-list .expend { |
| 102 | transform: translate(20.7px, 2px); | 96 | transform: translate(20.7px, 2px); |
| 103 | } | 97 | } | ... | ... |
| ... | @@ -16,7 +16,7 @@ | ... | @@ -16,7 +16,7 @@ |
| 16 | <span>总用地面积</span> | 16 | <span>总用地面积</span> |
| 17 | <span>26.245</span> | 17 | <span>26.245</span> |
| 18 | </div> | 18 | </div> |
| 19 | <div class="list-box"> | 19 | <div class="list-box"> |
| 20 | <span>净用地面积</span> | 20 | <span>净用地面积</span> |
| 21 | <span>26.07</span> | 21 | <span>26.07</span> |
| 22 | </div> | 22 | </div> |
| ... | @@ -32,8 +32,7 @@ | ... | @@ -32,8 +32,7 @@ |
| 32 | name: 'mapPop', | 32 | name: 'mapPop', |
| 33 | components: {}, | 33 | components: {}, |
| 34 | data() { | 34 | data() { |
| 35 | return { | 35 | return {} |
| 36 | } | ||
| 37 | }, | 36 | }, |
| 38 | mounted() {}, | 37 | mounted() {}, |
| 39 | methods: { | 38 | methods: { |
| ... | @@ -51,14 +50,14 @@ | ... | @@ -51,14 +50,14 @@ |
| 51 | font-size: 16px; | 50 | font-size: 16px; |
| 52 | } | 51 | } |
| 53 | 52 | ||
| 54 | .list-box span:nth-of-type(1){ | 53 | .list-box span:nth-of-type(1) { |
| 55 | display: inline-block; | 54 | display: inline-block; |
| 56 | width: 98px; | 55 | width: 98px; |
| 57 | margin-right: 20px; | 56 | margin-right: 20px; |
| 58 | color: rgba(255, 255, 255, .7); | 57 | color: rgba(255, 255, 255, .7); |
| 59 | } | 58 | } |
| 60 | 59 | ||
| 61 | .list-box span:nth-of-type(2){ | 60 | .list-box span:nth-of-type(2) { |
| 62 | margin-top: 14px; | 61 | margin-top: 14px; |
| 63 | display: inline-block; | 62 | display: inline-block; |
| 64 | } | 63 | } | ... | ... |
| ... | @@ -36,6 +36,9 @@ | ... | @@ -36,6 +36,9 @@ |
| 36 | }, | 36 | }, |
| 37 | mounted() {}, | 37 | mounted() {}, |
| 38 | methods: { | 38 | methods: { |
| 39 | handleSearch(val) { | ||
| 40 | this.$emit('searchRoat', val); | ||
| 41 | }, | ||
| 39 | handleIs2D() { | 42 | handleIs2D() { |
| 40 | this.is2D = !this.is2D; | 43 | this.is2D = !this.is2D; |
| 41 | this.$emit('is2D', this.is2D); | 44 | this.$emit('is2D', this.is2D); |
| ... | @@ -52,9 +55,6 @@ | ... | @@ -52,9 +55,6 @@ |
| 52 | this.isClear = !this.isClear; | 55 | this.isClear = !this.isClear; |
| 53 | this.$emit('isClear', this.isClear); | 56 | this.$emit('isClear', this.isClear); |
| 54 | }, | 57 | }, |
| 55 | handleSearch(val) { | ||
| 56 | this.$emit('searchRoat', val); | ||
| 57 | } | ||
| 58 | } | 58 | } |
| 59 | } | 59 | } |
| 60 | </script> | 60 | </script> | ... | ... |
-
Please register or sign in to post a comment