style;首页样式修改

@@ -43,18 +43,6 @@ class data extends filter {
       {
         prop: "jrdf",
         label: "接入得分",
-      },
-      {
-        prop: "jrdf",
-        label: "未上传登薄日志区县",
-      },
-      {
-        prop: "jrdf",
-        label: "登薄日志得分",
-      },
-      {
-        prop: "jrdf",
-        label: "总评分",
       }
     ]
   }

@@ -8,11 +8,23 @@
   &-left {
     width: 40%;
     padding-top: 25px;
+    background-color: #000637;
+    color: #02D9FD;
   }
 
   &-right {
     width: 59.5%;
 
+    .jrgk {
+      background-color: #000637;
+      color: #02D9FD;
+
+      .header {
+        text-align: center;
+        line-height: 36px;
+      }
+    }
+
     .gkList {
       @include flex-center;
       flex-direction: column;
@@ -23,13 +35,46 @@
       }
     }
 
+    .jrl {
+      margin-top: 20px;
+      text-align: center;
+
+      li {
+        color: #E3F1FF;
+      }
+    }
+
+    // 日均接入量
+    .jrlList {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      p {
+        width: 24px;
+        height: 36px;
+        font-size: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 700;
+      }
+    }
+
     .jrdgk {
       display: flex;
       margin-top: 5px;
       justify-content: space-between;
 
-      .box-card {
-        width: 49.5%;
+      .sxsjr {
+        background-color: #000637;
+        width: 49%;
+
+        .header {
+          text-align: center;
+          color: #02D9FD;
+          line-height: 30px;
+        }
       }
     }
 
@@ -39,46 +84,90 @@
         flex-direction: column;
 
         li:nth-child(1) {
-          color: #409EFF;
-          font-size: 24px;
+          font-size: 30px;
+          width: 50px;
+          height: 50px;
+          background: linear-gradient(143deg, #29C6F2 0%, #4370EF 100%);
+          border-radius: 2px;
+          color: #E3F1FF;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin: 10px 0;
+        }
+
+        li:nth-child(2) {
+          color: #FFFFFF;
+          font-size: 14px;
         }
       }
     }
 
     .jrdList:nth-of-type(2) {
       li:nth-child(1) {
-        color: #67C23A;
+        background: linear-gradient(143deg, #9CB636 0%, #32BCB1 100%);
       }
     }
 
     .jrdList:nth-of-type(3) {
       li:nth-child(1) {
-        color: #F56C6C;
+        background: linear-gradient(143deg, #C97E6D 0%, #CA304D 100%);
+      }
     }
   }
+
+  // 上报情况概括
+  .sbqkgk {
+    text-align: center;
+    color: #02D9FD;
+    line-height: 30px;
+    width: 50%;
+    background-color: #000637;
   }
 
   .sbqkgs {
-    display: flex;
-    justify-content: space-between;
     width: 100%;
 
-    li {
-      font-size: 24px;
+    .header {
+      text-align: center;
+      line-height: 36px;
     }
 
-    li:nth-child(2) {
-      color: #409EFF;
-      margin-left: 25px;
+    .sbqkgsList {
+      display: flex;
+      justify-content: center;
+      font-size: 50px;
+      margin: 20px 0 10px 0;
+      color: #E3F1FF;
+      font-weight: 700;
+    }
+
+    .active {
+      width: 31px;
+      height: 46px;
+      background: #054AE9;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 3px 1px 3px 1px;
+      margin: 0 3px;
+    }
+
+    li {
+      font-size: 16px;
+      text-align: center;
+      color: #E3F1FF;
     }
   }
 
   .jrxxlb {
     margin-top: 5px;
+    background-color: #000637;
 
     .title {
       text-align: center;
       line-height: 36px;
+      color: #02D9FD;
     }
   }
 }
\ No newline at end of file

 <template>
   <div class="home">
-    <el-card class="home-left">
+    <div class="home-left">
       <!-- 地图 -->
       <wgsl></wgsl>
-    </el-card>
+    </div>
     <div class="home-right">
       <!-- 陕西省接入概括 -->
-      <el-card>
-        <div slot="header">
+      <div class="jrgk">
+        <div class="header">
           陕西省接入概括
         </div>
         <!-- 陕西省接入概括列表 -->
-        <el-row :gutter="20">
-          <el-col :span="6" v-for="(item, index) in gkList" :key="index">
+        <el-row>
+          <el-col :span="6">
             <ul class="gkList">
-              <li>{{ item.value }}</li>
-              <li>{{ item.title }}</li>
+              <li>总数量</li>
+              <dv-digital-flop :config="config" style="height:70px;" />
+            </ul>
+          </el-col>
+          <el-col :span="6">
+            <ul class="jrl">
+              <div class="jrlList jrllsit1">
+                <p v-for="(item, index) in jrlList" :key="index">{{ item }}</p>
+              </div>
+              <li>日均接入量</li>
+            </ul>
+          </el-col>
+          <el-col :span="6">
+            <ul class="jrl">
+              <div class="jrlList jrllsit2">
+                <p v-for="(item, index) in dtjrlList" :key="index">{{ item }}</p>
+              </div>
+              <li>日均接入量</li>
+            </ul>
+          </el-col>
+          <el-col :span="6">
+            <ul class="jrl">
+              <div class="jrlList jrllsit3">
+                <p v-for="(item, index) in ztzlList" :key="index">{{ item }}</p>
+              </div>
+              <li>总体质量</li>
             </ul>
           </el-col>
         </el-row>
-      </el-card>
+      </div>
       <div class="jrdgk">
         <!-- 接入点概括 -->
-        <el-card class="box-card">
-          <div slot="header">
+        <div class="sxsjr">
+          <div class="header">
             接入点概括
           </div>
-          <el-row :gutter="20">
+          <el-row>
             <el-col :span="8" class="jrdList" v-for="(item, index) in jrdList" :key="index">
               <ul>
                 <li>{{ item.value }}</li>
@@ -34,25 +58,30 @@
               </ul>
             </el-col>
           </el-row>
-        </el-card>
+        </div>
         <!-- 上报情况概括 -->
-        <el-card class="box-card">
-          <div slot="header">
+        <div class="sbqkgk">
+          <div class="header">
             上报情况概括
           </div>
           <ul class="sbqkgs">
+            <div class="sbqkgsList">
+              <p v-for="(item, index) in sbqkgsList" :key="index"
+                :class="{ 'active': (typeof (item - 0) === 'number' && !isNaN(item - 0)) }">
+                {{ item }}
+              </p>
+            </div>
             <li>总数量</li>
-            <li>99999</li>
           </ul>
-        </el-card>
+        </div>
       </div>
       <!-- 底部表格 -->
-      <el-card class="jrxxlb">
+      <div class="jrxxlb">
         <div class="title">陕西省平台接入情况</div>
         <!-- 陕西省平台接入情况table -->
-        <lb-table ref="table" :pagination="false" :heightNum="527" :column="tableData.columns" :data="tableData.data">
+        <lb-table ref="table" :pagination="false" :heightNum="408" :column="tableData.columns" :data="tableData.data">
         </lb-table>
-      </el-card>
+      </div>
     </div>
   </div>
 </template>
@@ -66,26 +95,32 @@ export default {
   name: "home",
   components: { wgsl },
   data () {
+    function formatter (number) {
+      const numbers = number.toString().split('').reverse()
+      const segs = []
+      while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
+      return segs.join(',').split('').reverse().join('')
+    }
     return {
-      // 陕西省接入概括
-      gkList: [
-        {
-          value: 6269,
-          title: '总数量'
-        },
-        {
-          value: 300,
-          title: '日均接入量'
-        },
-        {
-          value: 0,
-          title: '当天接入量'
-        },
-        {
-          value: 3620,
-          title: '总体质量'
+      // 总数量
+      config: {
+        number: [6523],
+        content: '{nt}',
+        formatter,
+        style: {
+          fontSize: 50,
+          fontWeight: 700,
+          fill: '#FFDD00'
         }
-      ],
+      },
+      // 日均接入量
+      jjrl: 300,
+      // 当天接入量
+      dtjrl: 100,
+      // 总体质量
+      ztzl: 3620,
+      // 上报情况概括
+      sbqkgs: 6296,
       // 接入点概括
       jrdList: [
         {
@@ -106,11 +141,37 @@ export default {
         // 表格头部信息
         columns: data.columns(),
         // 表格列表数据
-        data: [{}]
+        data: [{
+          xzqmc: '咸阳市',
+          xzqzs: 100,
+          jrl: 300,
+          jscgl: 20,
+          dk: 60,
+          wjrqx: '长安县',
+          jrdf: 50
+        }]
       }
     }
   },
-  methods: {}
+  computed: {
+    jrlList: function () {
+      return this.jjrl.toString().split('')
+    },
+    dtjrlList: function () {
+      return this.dtjrl.toString().split('')
+    },
+    ztzlList: function () {
+      return this.ztzl.toString().split('')
+    },
+    sbqkgsList: function () {
+      const numbers = this.sbqkgs.toString().split('').reverse()
+      const segs = []
+      while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
+      return segs.join(',').split('').reverse().join('')
+    }
+  },
+  methods: {
+  }
 }
 </script>
 <style scoped lang="scss">