布局微调

src/components/ColorCell/index.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="grid-item-main">
-    <div
-      class="corlor-grid"
-      :style="`width:${realWidth};height:${realHeight};`"
-    >
+    <div class="corlor-grid" :class="size">
       <div class="left-color" :style="{ background: item.leftColor }"></div>
       <div class="rigth-color">
         <div :style="{ background: item.rightTopColor }"></div>
@@ -23,19 +20,15 @@ export default {
       type: Object,
       default: () => {},
     },
+    size: {
+      type: String,
+      default: "medium",
+    },
   },
   data() {
     return {};
   },
   methods: {},
-  computed: {
-    realWidth() {
-      return typeof this.width == "string" ? this.width : `${this.width}px`;
-    },
-    realHeight() {
-      return typeof this.height == "string" ? this.height : `${this.height}px`;
-    },
-  },
 };
 </script>
 
@@ -44,11 +37,17 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-
-  .corlor-grid {
-    position: relative;
+  .medium {
     height: 20px;
     width: 48px;
+  }
+  .small {
+    width: 35px;
+    height: 15px;
+  }
+  .corlor-grid {
+    position: relative;
+
     border: 1px solid white;
     display: flex;
     align-items: center;

src/components/mars-map/index.vue

@@ -46,5 +46,6 @@ export default {
   width: 100%;
   height: 100%;
   overflow: hidden;
+  background: #00448d;
 }
 </style>

src/views/components/IndexModel/components/colorList.vue

@@ -2,7 +2,12 @@
   <div class="color-list">
     <div class="list-item" v-for="(item, index) in colorListL" :key="index">
       <div class="item-name">
-        <ColorCell :item="item" v-if="item.color" style="margin-right: 12px" />
+        <ColorCell
+          :item="item"
+          v-if="item.color"
+          size="small"
+          class="color-item"
+        />
         <span>
           {{ item.name }}
           <span v-show="item.name == '户籍'"
@@ -64,7 +69,7 @@ export default {
     }
     .item-value {
       span:nth-child(odd) {
-        font-size: 16px;
+        font-size: 15px;
         color: #52ccff;
         font-family: "DIN-Medium-2.otf";
       }
@@ -74,10 +79,13 @@ export default {
       }
     }
   }
+  & > .list-item:last-child {
+    border: 0;
+  }
   .list-item:nth-child(9) .item-value,
   .list-item:nth-child(10) .item-value {
     span:nth-child(odd) {
-      font-size: 16px;
+      font-size: 15px;
       color: #ffb400;
       font-family: "DIN-Medium-2.otf";
     }
@@ -92,4 +100,7 @@ export default {
     border: 0;
   }
 }
+.color-item {
+  margin-right: 10px;
+}
 </style>

src/views/components/IndexModel/components/pieChart.vue

@@ -190,7 +190,7 @@ export default {
 .pie-chart {
   margin-top: 10px;
   // flex: 1;
-  height: 20%;
+  height: 23%;
   display: flex;
   align-items: center;
 

src/views/components/IndexModel/components/threeCell.vue

@@ -47,6 +47,7 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   .cell-item {
     display: flex;
     flex-direction: column;

src/views/index.vue

@@ -82,9 +82,9 @@ export default {
       options: {
         scene: {
           center: {
-            lat: 31.361807,
-            lng: 121.115595,
-            alt: 18625.9,
+            lat: 31.344002,
+            lng: 121.120196,
+            alt: 21247.4,
             heading: 355.1,
             pitch: -53.8,
           },