tj

src/pages/home/page.vue

-<template >
+<template>
   <div class="home-page">
     <div class="home-page-top">
       <div class="col-sm-12">
@@ -21,9 +21,9 @@
         </div>
       </div>
     </div>
-     <div class="home-page-content" >
-<el-row :gutter="12" >
-  <el-col :span="16" >
+    <div class="home-page-content">
+      <el-row :gutter="12">
+        <el-col :span="16">
           <card-list :cardListTitle="cardListLeftTitle">
             <div slot="right">
               <span
@@ -45,10 +45,15 @@
 
             <div slot="content" class="content-wrap">
               <!-- 卡片 -->
-        <el-row :gutter="12" class="margin_top_25" type="flex"  justify="center">
+              <el-row
+                :gutter="12"
+                class="margin_top_25"
+                type="flex"
+                justify="center"
+              >
                 <el-col :span="6">
                   <div class="energy-save-mode-wrap" style="">
-              <div class="font-style font_14" >
+                    <div class="font-style font_14">
                       <span>节能模式</span>
                     </div>
                     <div class="flex-save-warp">
@@ -89,7 +94,7 @@
                     <div class="font-style font_14">
                       <span>系统节约总能耗</span>
                     </div>
-              <div >
+                    <div>
                       <div>
                         <p class="font_30">30</p>
                         <p class="font-style font_14">（kwh）</p>
@@ -99,69 +104,67 @@
                 </el-col>
               </el-row>
               <!-- echarts  -->
-         <div style="height:100%"> 
+              <div style="height: 100%">
                 <energy-total-charts></energy-total-charts>
               </div>
-      
-
             </div>
           </card-list>
         </el-col>
-  <el-col :span="8" style="padding-left:0">
-    <card-list :cardListTitle="cardListRightTitle" >
+        <el-col :span="8" style="padding-left: 0">
+          <card-list :cardListTitle="cardListRightTitle">
             <div slot="content">
               <my-pies></my-pies>
             </div>
           </card-list>
         </el-col>
-</el-row>
-</div> 
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
-import cardList from "../components/cardList";
-import energyTotalCharts from "../components/energyTotalCharts";
-import myPies from "../components/myPies";
+import cardList from '../components/cardList'
+import energyTotalCharts from '../components/energyTotalCharts'
+import myPies from '../components/myPies'
 // import CardList from './compontents/cardList.vue';
 export default {
-  name: "home",
+  name: 'home',
   components: {
     cardList,
     energyTotalCharts,
-    myPies,
+    myPies
   },
   data() {
     return {
-      cardListLeftTitle: "能耗统计",
-      cardListRightTitle: "旅客满意度调查",
+      cardListLeftTitle: '能耗统计',
+      cardListRightTitle: '旅客满意度调查',
       activeIndex: 2,
       cardList: [
         {
-          iconUrl: require("./image/clock_icon.png"),
-          cardDesc: "系统运行时间",
-          cardText: `<span>38</span><span class="date-color" style="font-size:16px">天</span><span>38</span><span class="date-color">时</span><span>38</span><span class="date-color">分</span>`,
+          iconUrl: require('./image/clock_icon.png'),
+          cardDesc: '系统运行时间',
+          cardText: `<span>38</span><span class="date-color" style="font-size:16px">天</span><span>38</span><span class="date-color">时`
         },
         {
-          iconUrl: require("./image/alarm_icon.png"),
-          cardDesc: "报警总数",
-          cardText: `<span>38</span><span class="date-color">次</span`,
+          iconUrl: require('./image/alarm_icon.png'),
+          cardDesc: '报警总数',
+          cardText: `<span>12</span><span class="date-color">次</span`
         },
         {
-          iconUrl: require("./image/sun_icon.png"),
-          cardDesc: "采暖模式",
-          cardText: "已开启",
+          iconUrl: require('./image/sun_icon.png'),
+          cardDesc: '供暖模式',
+          cardText: '办公区域供暖模式已开启'
         },
         {
-          iconUrl: require("./image/fan_icon.png"),
-          cardDesc: "机械通风模式",
-          cardText: "已开启",
+          iconUrl: require('./image/fan_icon.png'),
+          cardDesc: '机械通风模式',
+          cardText: '办公区域机械通风模式已开启'
         },
         {
-          iconUrl: require("./image/nan_fan_icon.png"),
-          cardDesc: "自然通风模式",
-          cardText: "已开启",
-        },
+          iconUrl: require('./image/nan_fan_icon.png'),
+          cardDesc: '自然通风模式',
+          cardText: '办公区域自然通风模式已开启'
+        }
       ],
       dateList: [
         // {
@@ -169,37 +172,37 @@ export default {
         //   label: "时段",
         // },
         {
-          value: "02",
-          label: "今日",
+          value: '02',
+          label: '今日'
         },
         // {
         //   value: "03",
         //   label: "本周",
         // },
         {
-          value: "04",
-          label: "本月",
-        },
+          value: '04',
+          label: '本月'
+        }
         // {
         //   value: "05",
         //   label: "全年",
         // },
-      ],
-    };
+      ]
+    }
   },
   methods: {
     activehandle(item, index) {
-      this.activeIndex = index;
-    },
-  },
-};
+      this.activeIndex = index
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
-@import "~@/assets/style/public.scss";
+@import '~@/assets/style/public.scss';
 .home-page {
   height: 100%;
   width: 100%;
-  padding:0px 0px 40px 0px;
+  padding: 0px 0px 40px 0px;
   // overflow: auto;
   &-top {
     margin: 20px;
@@ -241,16 +244,13 @@ export default {
       .f-item:last-child {
         margin-right: 0;
       }
-
     }
-
-
   }
   .home-page-content {
     margin: 20px;
     .date-text {
       padding-right: 20px;
-      font-size: 14px;
+      font-size: 12px;
       font-family: Microsoft YaHei;
       font-weight: 400;
       color: #1d1d1d;
@@ -266,7 +266,7 @@ export default {
         // width: ;
         box-sizing: border-box;
         // padding: 24px 30px 25px 30px;
-        padding-top: 24px;;
+        padding-top: 24px;
         height: 138px;
         text-align: center;
         background: #21acfc;