城市体检-一屏总览透明度修改02

src/views/cstj/aScreen/totality/index.vue

@@ -6,10 +6,10 @@
         <tjgl />
       </div>
       <div class="left-middle box">
-        <bdwdzbfb />
+        <gqpgjg />
       </div>
       <div class="left-bottom box">
-        <gqpgjg />
+        <bdwdzbfb />
       </div>
     </div>
     <div class="middle">
@@ -44,9 +44,9 @@
         <xztj />
       </div>
     </div>
-    <tool-list @updateGJLL="handleGJLL" @updateKYTC="handleKYTC" />
-    <service-layer v-show="serviceLayerShow" :isCollapse="isCollapse" />
-    <base-map-switch :isCollapse="isCollapse" />
+    <tool-list @update-g-j-l-l="handleGJLL" @update-k-y-t-c="handleKYTC" />
+    <service-layer v-show="serviceLayerShow" :is-collapse="isCollapse" />
+    <base-map-switch :is-collapse="isCollapse" />
     <div class="right aside-right" :class="{ collapse: isCollapse }">
       <div class="right-top box">
         <zbqd />
@@ -59,28 +59,25 @@
 </template>
 
 <script setup name="IndexCstj" lang="ts">
-
-import Tjgl from "@/views/cstj/index/tjgl.vue";
-import Map from "@/views/map/Map.vue";
-import Bdwdzbfb from "@/views/cstj/index/bdwdzbfb.vue";
-import Gqpgjg from "@/views/cstj/index/gqpgjg.vue";
-import Xztj from "@/views/cstj/index/xztj.vue";
-import Zbqd from "@/views/cstj/index/zbqd.vue";
-import Gzcg from "@/views/cstj/index/gzcg.vue";
-import ToolList from "@/views/cstj/index/toolList.vue";
-import ServiceLayer from "@/views/cstj/index/serviceLayer.vue";
-import BaseMapSwitch from "@/views/cstj/index/baseMapSwitch.vue";
+import Tjgl from '@/views/cstj/index/tjgl.vue';
+import Map from '@/views/map/Map.vue';
+import Bdwdzbfb from '@/views/cstj/index/bdwdzbfb.vue';
+import Gqpgjg from '@/views/cstj/index/gqpgjg.vue';
+import Xztj from '@/views/cstj/index/xztj.vue';
+import Zbqd from '@/views/cstj/index/zbqd.vue';
+import Gzcg from '@/views/cstj/index/gzcg.vue';
+import ToolList from '@/views/cstj/index/toolList.vue';
+import ServiceLayer from '@/views/cstj/index/serviceLayer.vue';
+import BaseMapSwitch from '@/views/cstj/index/baseMapSwitch.vue';
 let isCollapse = ref(false);
-let serviceLayerShow =  ref(false);
-function handleGJLL(val){
-  isCollapse.value = val
+let serviceLayerShow = ref(false);
+function handleGJLL(val) {
+  isCollapse.value = val;
 }
 
-function handleKYTC(val){
-  serviceLayerShow.value = val
+function handleKYTC(val) {
+  serviceLayerShow.value = val;
 }
-
-
 </script>
 
 <style scoped lang="scss">
@@ -92,7 +89,7 @@ function handleKYTC(val){
   height: calc(100%);
   overflow-y: auto;
   position: relative;
-  .left{
+  .left {
     position: absolute;
     z-index: 1;
     top: 0px;
@@ -103,21 +100,21 @@ function handleKYTC(val){
     justify-content: space-evenly;
     flex-direction: column;
     transition: all 0.5s ease;
-    .left-top{
+    .left-top {
       width: 100%;
       height: 247px;
     }
-    .left-middle{
+    .left-middle {
       width: 100%;
-      height: 277px;
+      height: 358px;
     }
-    .left-bottom{
+    .left-bottom {
       width: 100%;
-      height: 358px;
+      height: 277px;
     }
   }
 
-  .aside-left{
+  .aside-left {
     left: 0;
 
     &.collapse {
@@ -125,8 +122,7 @@ function handleKYTC(val){
     }
   }
 
-
-  .middle{
+  .middle {
     top: 0px;
     left: calc(25% + 15px);
     position: absolute;
@@ -136,11 +132,11 @@ function handleKYTC(val){
     display: flex;
     justify-content: space-evenly;
     flex-direction: column;
-    .middle-top{
+    .middle-top {
       display: flex;
       justify-content: center;
       align-items: center;
-      .single-content{
+      .single-content {
         width: 16%;
         margin-left: 10px;
         margin-right: 10px;
@@ -148,7 +144,7 @@ function handleKYTC(val){
       }
     }
   }
-  .right{
+  .right {
     top: 0px;
     right: 15px;
     position: absolute;
@@ -159,16 +155,16 @@ function handleKYTC(val){
     justify-content: space-evenly;
     flex-direction: column;
     transition: all 0.5s ease;
-    .right-top{
+    .right-top {
       width: 100%;
-      height:410px;
+      height: 410px;
     }
-    .right-bottom{
+    .right-bottom {
       width: 100%;
-      height:492px;
+      height: 492px;
     }
   }
-  .aside-right{
+  .aside-right {
     right: 0;
 
     &.collapse {
@@ -176,9 +172,9 @@ function handleKYTC(val){
     }
   }
 
-  .box{
-    background: rgba(255,255,255,0.9);
-    box-shadow: 0px 0px 10px 0px rgba(191,191,191,0.35);
+  .box {
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow: 0px 0px 10px 0px rgba(191, 191, 191, 0.35);
     border-radius: 10px;
   }
 }

src/views/cstj/index/bdwdzbfb.vue

@@ -1,20 +1,18 @@
 <template>
   <div className="bdwdzbfx">
-    <z-b-t-j-common-title name="八大维度指标分布"/>
+    <z-b-t-j-common-title name="八大维度指标分布" />
     <div className="content">
-      <div ref="redarRef" class="echart">
-
-      </div>
+      <div ref="redarRef" class="echart"></div>
     </div>
   </div>
 </template>
 
 <script setup name="bdwdzbfx" lang="ts">
-import {onMounted, ref} from "vue";
-import ZBTJCommonTitle from "@/views/cstj/indicators/analyse/gather/components/ZBTJCommonTitle.vue";
-import {radarOption} from "@/utils/echart/echartOption";
+import { onMounted, ref } from 'vue';
+import ZBTJCommonTitle from '@/views/cstj/indicators/analyse/gather/components/ZBTJCommonTitle.vue';
+import { radarOption } from '@/utils/echart/echartOption';
 const redarRef = ref(null);
-onMounted(()=>{
+onMounted(() => {
   nextTick(() => {
     // 初始化主题样式
     radarOption(redarRef.value);

src/views/cstj/index/wtqd.vue

@@ -0,0 +1,16 @@
+<template>
+  <z-b-t-j-common-title name="问题清单" />
+  <div className="content">
+    <div>
+
+    </div>
+  </div>
+</template>
+
+<script setup name="wtqd" lang="ts">
+import ZBTJCommonTitle from '@/views/cstj/indicators/analyse/gather/components/ZBTJCommonTitle.vue';
+</script>
+
+<style scoped lang="scss">
+
+</style>