调整优化

src/views/community-summary.vue

@@ -2,14 +2,14 @@
   <div class="community-summary">
     <template v-if="list.length > 0">
     <div>
-      <div v-for="item in list.slice(0, 8)" :key="item.name">
+      <div v-for="item in list.slice(0, Math.round(list.length / 2))" :key="item.name">
         <img src="@/assets/images/location.png"/>
         <p>{{item.name}}</p>
         <b><m-count :value="item.value" :decimal="0" style="font-size:1.2rem"/></b>
       </div>
     </div>
     <div>
-      <div v-for="item in list.slice(8)" :key="item.name">
+      <div v-for="item in list.slice(Math.round(list.length / 2))" :key="item.name">
         <img src="@/assets/images/location.png"/>
         <p>{{item.name}}</p>
         <b><m-count :value="item.value" :decimal="0" style="font-size:1.2rem"/></b>
@@ -45,7 +45,7 @@ export default {
       display flex
       align-items center
       padding 0 .5rem
-      line-height 1.7
+      line-height 1.75
       &:nth-child(2n+1)
         background $black
       p

src/views/community-type.vue

 <template>
-  <div class="community-type">
+  <div class="community-type" v-if="data.length > 0">
     <m-chart :config="config" :data="data"/>
     <div class="legend">
       <div v-for="(item, i) in data" :key="item.name">
@@ -19,10 +19,6 @@ export default {
       config: {
         colors: ['#0091ff', '#583eff', '#f7b500', '#6dd401'],
         legend: {hide: true},
-        // legend: {
-        //   align: 'right',
-        //   orient: 'vertical',
-        // },
         shape: [
           {type: 'pie', startAngle: -30, radius: [0, 50 * Number((screen.height / 800).toFixed(1))], center: ['30%', '50%']}
         ],

src/views/disaster.vue

@@ -105,6 +105,5 @@ export default {
     span
       margin-right .5rem
   .chart-wrapper
-    // height 75%
     flex 1
 </style>

src/views/hotline.vue

@@ -20,9 +20,9 @@
         <p>{{item.title}}</p>
         <div>
           <template v-if="Array.isArray(item.count)">
-            <m-count :value="item.count[0]" :decimal="0"/> / <m-count :value="item.count[1]" :decimal="0"/>
+            <b><m-count :value="item.count[0]" :decimal="0"/> / <m-count :value="item.count[1]" :decimal="0"/></b>
           </template>
-          <m-count v-else :value="item.count" :decimal="0"/>
+          <b v-else><m-count :value="item.count" :decimal="0"/></b>
         </div>
       </div>
     </div>
@@ -83,9 +83,7 @@ export default {
           text-align center
         *
           font-size 1.2rem !important
-          font-weight bold !important
         p
           font-size 1rem !important
-          font-weight normal !important
           line-height 2.5rem
 </style>

src/views/intelligence.vue

 <template>
   <div class="intelligence">
-    <div>
-      <div v-for="item in list.slice(0, 5)" :key="item.title">
-        <p>{{item.title}}</p>
-        <p>
-          <b>
-            <m-count :value="item.count[0]" :decimal="0" style="color:#f7b500;"/> / <m-count :value="item.count[1]" :decimal="0"/>
-          </b>
-        </p>
+    <template v-if="list.length > 0">
+      <div>
+        <div v-for="item in list.slice(0, Math.round(list.length / 2))" :key="item.title">
+          <p>{{item.title}}</p>
+          <p>
+            <b>
+              <m-count :value="item.count[0]" :decimal="0" style="color:#f7b500;"/> / <m-count :value="item.count[1]" :decimal="0"/>
+            </b>
+          </p>
+        </div>
       </div>
-    </div>
-    <div>
-      <div v-for="item in list.slice(5)" :key="item.title">
-        <p>{{item.title}}</p>
-        <p>
-          <b>
-            <m-count :value="item.count[0]" :decimal="0" style="color:#f7b500;"/> / <m-count :value="item.count[1]" :decimal="0"/>
-          </b>
-        </p>
+      <div>
+        <div v-for="item in list.slice(Math.round(list.length / 2))" :key="item.title">
+          <p>{{item.title}}</p>
+          <p>
+            <b>
+              <m-count :value="item.count[0]" :decimal="0" style="color:#f7b500;"/> / <m-count :value="item.count[1]" :decimal="0"/>
+            </b>
+          </p>
+        </div>
       </div>
-    </div>
+    </template>
   </div>
 </template>
 
@@ -29,6 +31,7 @@ export default {
   computed: {
     list() {
       const {smartInfo} = this.$store.state
+      if (smartInfo.length === 0) return []
       return smartInfo.map(item => {
         return {
           title: item.TYPE_NAME,

src/views/thematic-map.vue

@@ -50,6 +50,7 @@ export default {
   font-weight bold
   overflow hidden
   >div
+    margin-bottom .5rem
     >p
       color $light-blue
       margin-bottom .3rem
@@ -61,6 +62,7 @@ export default {
       .button
         position relative
         width 30%
+        overflow hidden
         p
           width 100%
           height 100%
@@ -91,13 +93,13 @@ export default {
           transition transform .1s ease
           &.bottom,
           &.top
-            height 1px
+            height .1rem
             left 0
             right 0
             transform scaleX(0)
           &.left,
           &.right
-            width 1px
+            width .1rem
             top 0
             bottom 0
             transform scaleY(0)