调整

src/pages/components/myPies.vue

@@ -6,115 +6,114 @@
 
 <script>
 export default {
-  name: "myPies",
+  name: 'myPies',
   data() {
     return {
-      myPies: null,
-    };
+      myPies: null
+    }
   },
 
-
   mounted() {
-    this.initPie();
+    this.initPie()
   },
 
   methods: {
     initPie() {
-      let myPie = document.getElementById("myPies");
-      this.myPies = this.$echarts.init(myPie);
+      let myPie = document.getElementById('myPies')
+      this.myPies = this.$echarts.init(myPie)
       const data = [
-        { name: "冷", value: 150 },
-        { name: "适中", value: 80 },
-        { name: "热", value: 80 },
-      ];
+        { name: '冷', value: 150 },
+        { name: '适中', value: 80 },
+        { name: '热', value: 80 }
+      ]
       const option = {
         tooltip: {
-          trigger: "item",
-          formatter: "{a} <br/>{b}: {c} ({d}%)",
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
         },
 
         legend: {
           show: true,
-           orient: 'vertical',
+           orient: 'horizontal',
         //   left: "center",
-          bottom: "40",
+          bottom: '40',
           itemHeight: 13,
           itemWidth: 13,
           itemGap: 35,
-          icon: "circle",
+          icon: 'circle',
           data: data,
           formatter: function (name) {
-            var total = 0;
-            var target;
-            var value;
+            var total = 0
+            var target
+            var value
             for (let i = 0, l = data.length; i < l; i++) {
-              value = data[i].value;
-              total += data[i].value;
+              value = data[i].value
+              total += data[i].value
               if (data[i].name == name) {
-                target = data[i].value;
+                target = data[i].value
               }
             }
-            return name + '     ' +((target/total)*100).toFixed(0) + '%'
+            return name + '     ' + ((target / total) * 100).toFixed(0) + '%'
           },
           textStyle: {
             rich: {
               a: {
-                color: "#333333",
+                color: '#333333',
                 // verticalAlign: "top",
                 // align: "center",
                 // fontSize: 12,
                 // padding: [10, 0, 28, 0]
-                padding:20
+                padding: 20
               },
               b: {
                 // align: "left",
                 // fontSize: 18,
                 padding: [10, 10, 10, 0],
                 // // lineHeight: 25,
-                color: "#333333"
-              },
-            },
-          },
+                color: '#333333'
+              }
+            }
+          }
         },
-        color:['rgba(72,154,254,1)','rgba(247,243,204,1)','rgba(236,73,104,1)'],
+        color: ['rgba(72,154,254,1)', 'rgba(247,243,204,1)', 'rgba(236,73,104,1)'],
         series: [
           {
-            name: "访问来源",
-            type: "pie",
-            radius: ["50%", "70%"],
-            center: ["50%", "40%"],
+            name: '访问来源',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            center: ['50%', '40%'],
             avoidLabelOverlap: false,
             label: {
               // show: true,
-              position: "center",
+              position: 'center',
               normal: {
                 show: true,
-                position: "center",
+                position: 'center',
                 formatter: function () {
-                  return `调查总数\r\n \r\n20000`;
+                  return `调查总数\r\n \r\n20000`
                 },
                 textStyle: {
                   fontSize: 30,
-                  color: "#333",
-                },
-              },
+                  color: '#333'
+                }
+              }
             },
             emphasis: {
               label: {
                 show: false,
-                fontSize: "30",
-                fontWeight: "bold",
-              },
+                fontSize: '30',
+                fontWeight: 'bold'
+              }
             },
             labelLine: {
-              show: false,
+              show: false
             },
-            data: [...data ],
-          },
-        ],
-      };
-      this.myPies.setOption(option);
-    },
-  },
-};
-</script>
\ No newline at end of file
+            data: [...data ]
+          }
+        ]
+      }
+      this.myPies.setOption(option)
+    }
+  }
+}
+</script>

src/pages/home/page.vue

@@ -16,6 +16,7 @@
               <span v-if="index == 0" v-html="item.cardText"></span>
               <span v-else-if="index == 1" v-html="item.cardText"></span>
               <span v-else>{{ item.cardText }}</span>
+              <p >{{ item.state }}</p>
             </div>
           </div>
         </div>
@@ -153,17 +154,22 @@ export default {
         {
           iconUrl: require('./image/sun_icon.png'),
           cardDesc: '供暖模式',
-          cardText: '办公区域供暖模式已开启'
+          cardText: '办公区域供暖模式',
+          state: '已开启'
         },
         {
           iconUrl: require('./image/fan_icon.png'),
           cardDesc: '机械通风模式',
-          cardText: '办公区域机械通风模式已开启'
+          cardText: '办公区域机械通风模式',
+          state: '已开启'
+
         },
         {
           iconUrl: require('./image/nan_fan_icon.png'),
           cardDesc: '自然通风模式',
-          cardText: '办公区域自然通风模式已开启'
+          cardText: '办公区域自然通风模式',
+          state: '已开启'
+
         }
       ],
       dateList: [
@@ -224,7 +230,7 @@ export default {
         img {
           width: 50px;
           height: 50px;
-          padding-bottom: 19px;
+          padding-bottom: 13px;
         }
         .card-desc {
           font-size: 16px;
@@ -234,7 +240,7 @@ export default {
           // padding-bottom: 16px;
         }
         .card-text {
-          font-size: 30px;
+          font-size: 26px;
           font-family: PingFang SC;
           font-weight: 600;
           color: #333333;