feat：前端实现

src/App.vue

@@ -2,7 +2,7 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-24 17:50:53
  * @LastEditors: WangQiBiao
- * @LastEditTime: 2019-09-24 18:40:54
+ * @LastEditTime: 2019-09-26 18:02:23
  * @Description:
  -->
 <template>

src/components/tips-card/index.vue

@@ -2,7 +2,7 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-24 18:38:32
  * @LastEditors: WangQiBiao
- * @LastEditTime: 2019-09-25 11:28:30
+ * @LastEditTime: 2019-09-26 08:41:12
  * @Description:
  -->
 <template>
@@ -13,7 +13,7 @@
 <style lang="scss" scoped>
 @import "@/assets/css/function.scss";
 .tips-card {
-  width: halfW(360);
+  width: halfW(368);
   height: halfH(150);
   background: url('./images/hldbl@3x.png');
   background-size: 100% 100%;

src/components/title/index.vue

@@ -2,7 +2,7 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-25 14:16:20
  * @LastEditors: WangQiBiao
- * @LastEditTime: 2019-09-25 18:09:37
+ * @LastEditTime: 2019-09-26 17:52:32
  * @Description:
  -->
 <template>
@@ -31,6 +31,9 @@ export default {
   font-size:halfH(22);
   font-weight:bold;
   padding-top: halfH(22);
+  background:linear-gradient(0deg,rgba(23,101,255,1) 0%, rgba(23,101,255,1) 0%, rgba(73,217,254,1) 54.931640625%, rgba(143,239,255,1) 80.322265625%);
+  background-clip: text;
+  color: transparent;
   .line{
     height: 1px;
     background: #0748A2;

src/filters/format.js

@@ -0,0 +1,37 @@
+/*
+ * @Author: WangQiBiao
+ * @LastEditors: WangQiBiao
+ * @Description: 数字格式化
+ * @Date: 2019-04-19 10:42:31
+ * @LastEditTime: 2019-09-26 15:34:36
+ */
+/**
+ * @param {number} num
+ * @returns {number}
+ */
+export function toFixed (num, floatLen = 2) {
+  if (isNaN(Number(num))) {
+    return num
+  } else {
+    return Number(num).toFixed(floatLen)
+  }
+}
+/**
+ * 数字格式化 12,123,123
+ */
+export function numberFormat (num) {
+  if (isNaN(Number(num))) {
+    return num
+  } else {
+    return String(num).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
+  }
+}
+/**
+ * 金额格式化 12,123,123.00
+ */
+export function moneyFormat (num = 2) {
+  if (num === null || num === undefined) {
+    return ''
+  }
+  return numberFormat(toFixed(num))
+}

src/filters/index.js

@@ -0,0 +1,10 @@
+/*
+ * @Author: WangQiBiao
+ * @LastEditors: WangQiBiao
+ * @Description:
+ * @Date: 2019-04-19 11:25:56
+ * @LastEditTime: 2019-04-19 11:26:06
+ */
+
+// doc https://cn.vuejs.org/v2/guide/filters.html
+export * from './format'

src/main.js

@@ -2,7 +2,7 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-24 17:50:53
  * @LastEditors: WangQiBiao
- * @LastEditTime: 2019-09-24 18:05:43
+ * @LastEditTime: 2019-09-26 18:02:26
  * @Description:
  */
 import Vue from 'vue'
@@ -11,12 +11,18 @@ import router from './route'
 import store from './store'
 import 'reset.css'
 import 'babel-polyfill'
+import * as filters from './filters'
 
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import '@/assets/css/element-variables.scss'
 Vue.use(ElementUI)
 
+// 引入全局过滤器
+Object.keys(filters).forEach(key => {
+  Vue.filter(key, filters[key])
+})
+
 Vue.config.productionTip = false
 
 new Vue({

src/views/index/components/communication/index.scss

@@ -11,11 +11,11 @@
     justify-content: center;
     align-items: center;
     .map-item{
-      width: halfW(120);
-      height: halfH(120);
+      width: halfW(100);
+      height: halfH(100);
       &.proportion{
-        width: halfW(180);
-        height: halfH(180);
+        width: halfW(200);
+        height: halfH(200);
         padding-right: halfH(20);
       }
     }
@@ -27,15 +27,15 @@
   }
   .list{
     padding: halfH(12) halfH(20) 0;
-    overflow-y: scroll;
+    overflow: hidden;
     height: halfH(210);
-
-    // border-top: 1px solid #0748A2;
     .list-item{
       display: flex;
       align-items: center;
       padding-bottom: halfH(12);
-      animation: bubble 20s infinite;
+      animation: bubble 20s linear infinite;
+      backface-visibility: hidden;
+      animation-fill-mode: forwards;
       .list-item-txt{
         font-size: halfH(14);
       }

src/views/index/components/communication/index.vue

@@ -2,7 +2,7 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-25 14:10:08
  * @LastEditors: WangQiBiao
- * @LastEditTime: 2019-09-25 18:10:12
+ * @LastEditTime: 2019-09-26 17:41:29
  * @Description: 在线沟通
  -->
 <template>
@@ -51,7 +51,8 @@ export default {
         series: [
           {
             type: 'pie',
-            radius: '35%',
+            radius: '46%',
+            // radius: ['35%', '60%'],
             roseType: 'radius',
             center: ['50%', '50%'],
             label: {
@@ -84,10 +85,10 @@ export default {
                 name: '投诉',
                 label: {
                   show: true,
-                  color: '#FB4D43'
+                  color: '#ed4f46'
                 },
                 itemStyle: {
-                  color: '#FB4D43'
+                  color: '#ed4f46'
                 }
               },
               {

src/views/index/components/entrance-guard/index.scss

@@ -13,7 +13,6 @@
     align-items: flex-end;
     .tips-logo{
       width: halfW(50);
-      height: halfH(50);
     }
     .tips-desc{
       flex: 1;
@@ -28,13 +27,15 @@
   .list{
     border-top: 1px solid #0748A2;
     padding-top: halfH(12);
-    overflow-y: scroll;
-    height: halfH(210);
+    overflow: hidden;
+    height: halfH(220);
     .list-item{
       display: flex;
       align-items: center;
       padding-bottom: halfH(12);
-      animation: bubble 20s infinite;
+      animation: bubble 20s linear infinite;
+      backface-visibility: hidden;
+      animation-fill-mode: forwards;
       .list-item-txt{
         font-size: halfH(14);
       }
@@ -49,7 +50,7 @@
       transform: translateY(0);
     }
     100% {
-      transform: translateY(-300px);
+      transform: translateY(-220px);
     }
   }
 }

src/views/index/components/entrance-guard/index.vue

@@ -2,7 +2,7 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-25 10:20:36
  * @LastEditors: WangQiBiao
- * @LastEditTime: 2019-09-25 17:50:09
+ * @LastEditTime: 2019-09-26 15:37:52
  * @Description: 智能门禁
  -->
 <template>
@@ -11,7 +11,7 @@
     <div class="tips">
       <img class="tips-logo" src="./images/zhnmj@3x.png" alt="">
       <div class="tips-desc">
-        <span class="tips-desc-txt">1,145,689</span>
+        <span class="tips-desc-txt">{{43213 | numberFormat}}</span>
         <span class="tips-desc-unit"> 人次</span>
       </div>
     </div>

src/views/index/components/income/index.scss

@@ -0,0 +1,64 @@
+@import '@/assets/css/function';
+
+.income{
+  background: url('./images/logo@3x.png') no-repeat;
+  background-size: 100% 100%;
+  height: halfH(380);
+  padding: halfH(36) halfW(20) 0;
+  .panel{
+    display: flex;
+    align-items: center;
+    color: #fff;
+    padding-bottom: halfH(20);
+    &:last-child{
+      padding-bottom: 0;
+    }
+    .panel-icon{
+      width: halfW(18);
+      height: halfH(10);
+      background:#121E9A;
+      border:1px solid #1036A9;
+      border-radius:2px;
+      margin-right: halfW(8);
+    }
+    .panel-txt{
+      font-size: halfH(12);
+      font-weight: bold;
+      padding-right: halfW(18);
+    }
+    .panel-desc{
+      font-size: halfH(18);
+      font-weight: bold;
+    }
+    &.b2{
+      .panel-icon{
+        background:#02ABFE;
+        border:1px solid #02ABFE;
+      }
+      .panel-desc{
+        color: #FFD40D;
+      }
+    }
+  }
+  .map{
+    width: 100%;
+    height: halfH(220);
+    margin: auto;
+  }
+  .progress{
+    .desc{
+      display: flex;
+      justify-content: space-between;
+      padding-bottom: halfH(10);
+      .desc-lf{
+        font-size: halfH(12);
+        color: #00CCFF;
+      }
+      .desc-lr{
+        font-size: halfH(14);
+        color: #fff;
+        font-weight: 900;
+      }
+    }
+  }
+}

src/views/index/components/income/index.vue

@@ -0,0 +1,120 @@
+<!--
+ * @Author: WangQiBiao
+ * @Date: 2019-09-26 10:57:30
+ * @LastEditors: WangQiBiao
+ * @LastEditTime: 2019-09-26 17:56:18
+ * @Description: 收入统计
+ -->
+<template>
+  <div class="income">
+    <div class="panel b1">
+      <div class="panel-icon"></div>
+      <div class="panel-txt">应收</div>
+      <div class="panel-desc">￥{{11156046 | moneyFormat}}</div>
+    </div>
+    <div class="panel b2">
+      <div class="panel-icon"></div>
+      <div class="panel-txt">实收</div>
+      <div class="panel-desc">￥{{1115600046 | moneyFormat}}</div>
+    </div>
+    <div class="map" id="mapId"></div>
+    <div class="progress">
+      <div class="desc">
+        <div class="desc-lf">收费率</div>
+        <div class="desc-lr">{{percentage}}%</div>
+      </div>
+      <el-progress
+        :percentage="percentage"
+        :show-text="false"
+        color="#2FCD76"
+        :stroke-width="8"
+      ></el-progress>
+    </div>
+  </div>
+</template>
+<script>
+import echarts from 'echarts'
+export default {
+  data () {
+    return {
+      percentage: 98.4
+    }
+  },
+  mounted () {
+    this.createIncomeMap()
+  },
+  methods: {
+    /**
+     * 占比
+     */
+    createIncomeMap () {
+      var myChart = echarts.init(document.getElementById('mapId'))
+      var option = {
+        // backgroundColor: '#2c343c',
+        series: [
+          {
+            radius: ['40%', '60%'],
+            hoverAnimation: false,
+            type: 'pie',
+            center: ['50%', '50%'],
+            label: {
+              normal: {
+                formatter: '{b|{b}}\n{c}',
+                fontSize: 10,
+                lineHeight: 14,
+                rich: {
+                  b: {
+                    color: '#fff',
+                    fontSize: 10
+                  }
+                }
+              }
+            },
+            data: [
+              {
+                value: 5132432,
+                name: '线上',
+                label: {
+                  show: true,
+                  color: '#FF9933'
+                },
+                itemStyle: {
+                  color: new echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [
+                      { offset: 0, color: '#FCC204' },
+                      { offset: 1, color: '#EF6E18' }
+                    ]
+                  )
+                }
+              },
+              {
+                value: 431212,
+                name: '线下',
+                label: {
+                  show: true,
+                  color: '#00CCFF'
+                },
+                itemStyle: {
+                  color: new echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [
+                      { offset: 0, color: '#01B4FF' },
+                      { offset: 1, color: '#0336FF' }
+                    ]
+                  )
+                }
+              }
+            ]
+          }
+        ]
+      }
+      myChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

src/views/index/components/paid-in/index.scss

@@ -0,0 +1,25 @@
+@import '@/assets/css/function';
+.paid-in{
+  background: url('./images/logo@3x.png') no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: halfH(463);
+  position: relative;
+  .map{
+    display: flex;
+    align-items: center;
+    .map-item{
+      margin: 0 halfW(18);
+      height: halfH(340);
+      width: halfW(740);
+      padding-top: halfH(50);
+      &:nth-child(2) {
+        width: halfW(320);
+        padding-top: 0;
+        position: absolute;
+        right: 0;
+        top: halfH(20);
+      }
+    }
+  }
+}

src/views/index/components/paid-in/index.vue

@@ -0,0 +1,181 @@
+<!--
+ * @Author: WangQiBiao
+ * @Date: 2019-09-26 08:46:04
+ * @LastEditors: WangQiBiao
+ * @LastEditTime: 2019-09-26 11:02:16
+ * @Description: 近1年应实收统计
+ -->
+<template>
+  <div class="paid-in">
+    <TitleCom>近1年应实收统计</TitleCom>
+    <div class="map">
+      <div class="map-item" id="paid"></div>
+      <div class="map-item">
+        <IncomeCom/>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import TitleCom from '@/components/title'
+import IncomeCom from './../income'
+import echarts from 'echarts'
+export default {
+  components: {
+    TitleCom,
+    IncomeCom
+  },
+  mounted () {
+    this.createMapPaid()
+  },
+  methods: {
+    createMapPaid () {
+      var myChart = echarts.init(document.getElementById('paid'))
+      var dataAxis = [
+        '2018.12',
+        '2019.01',
+        '2019.02',
+        '2019.03',
+        '2019.04',
+        '2019.05',
+        '2019.06',
+        '2019.07',
+        '2019.08',
+        '2019.09',
+        '2019.10',
+        '2019.11'
+      ]
+      var data = [
+        220,
+        182,
+        191,
+        234,
+        290,
+        330,
+        310,
+        123,
+        442,
+        321,
+        2000,
+        900
+      ]
+      var option = {
+        name: '近1年应实收统计',
+        legendHoverLink: true,
+        grid: {
+          top: 26,
+          right: 0,
+          bottom: 36
+        },
+        xAxis: {
+          data: dataAxis,
+          position: 'bottom',
+          inverse: false,
+          minInterval: 7,
+          axisLine: { // 坐标轴
+            show: true,
+            lineStyle: {
+              color: '#1036A9',
+              width: 1
+            }
+          },
+          axisTick: { // 坐标轴刻度
+            show: false
+          },
+          axisLabel: { // 坐标轴label
+            show: true,
+            inside: false,
+            rotate: 30,
+            color: '#39D6FE',
+            fontWeight: 400
+          },
+          splitLine: { // x轴线
+            show: true,
+            interval: 1000,
+            lineStyle: {
+              type: 'solid',
+              color: '#1036A9'
+            }
+          },
+          splitArea: { // 分隔区域
+            show: false,
+            interval: 0,
+            areaStyle: {
+              opacity: 0.36
+            }
+          }
+        },
+        yAxis: {
+          show: true,
+          position: 'left',
+          name: '单位(十万元)',
+          nameTextStyle: {
+            color: '#fff',
+            fontSize: 10,
+            fontWeight: 400
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#1036A9',
+              width: 1
+            }
+          },
+          axisTick: { // 坐标轴刻度
+            show: false
+          },
+          axisLabel: { // 坐标轴label
+            show: true,
+            inside: false,
+            // rotate: 30,
+            color: '#fff',
+            fontWeight: 400
+          },
+          splitLine: { // x轴线
+            show: true,
+            interval: 0,
+            lineStyle: {
+              type: 'solid',
+              color: '#1036A9'
+            }
+          },
+          splitArea: { // 分隔区域
+            show: false,
+            interval: 0,
+            areaStyle: {
+              opacity: 0.36
+            }
+          }
+        },
+        series: [
+          {
+            type: 'bar',
+            barWidth: 20,
+            label: {
+              show: true,
+              position: 'top',
+              color: '#FFF600'
+            },
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1,
+                  [
+                    { offset: 0, color: '#01B4FF' },
+                    { offset: 1, color: '#0E2AF6' }
+                  ]
+                )
+              }
+            },
+            data: data
+          }
+        ]
+      }
+      myChart.setOption(option)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

src/views/index/components/parking/index.scss

@@ -12,8 +12,7 @@
     padding: halfH(20) 0 halfH(12);
     align-items: flex-end;
     .tips-logo{
-      width: halfW(50);
-      height: halfH(50);
+      width: halfW(56);
     }
     .tips-desc{
       flex: 1;
@@ -28,13 +27,15 @@
   .list{
     border-top: 1px solid #0748A2;
     padding-top: halfH(12);
-    overflow-y: scroll;
-    height: halfH(210);
+    height: halfH(240);
+    overflow: hidden;
     .list-item{
       display: flex;
       align-items: center;
       padding-bottom: halfH(12);
-      animation: bubble 20s infinite;
+      animation: bubble 20s linear infinite;
+      backface-visibility: hidden;
+      animation-fill-mode: forwards;
       .list-item-txt{
         font-size: halfH(14);
       }

src/views/index/components/parking/index.vue

@@ -2,7 +2,7 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-25 10:20:36
  * @LastEditors: WangQiBiao
- * @LastEditTime: 2019-09-25 17:51:07
+ * @LastEditTime: 2019-09-26 15:38:29
  * @Description: 智能停车
  -->
 <template>
@@ -11,7 +11,7 @@
     <div class="tips">
       <img class="tips-logo" src="./images/zhntch@3x.png" alt="">
       <div class="tips-desc">
-        <span class="tips-desc-txt">1,145,689</span>
+        <span class="tips-desc-txt">{{1145689 | numberFormat}}</span>
         <span class="tips-desc-unit"> 车次</span>
       </div>
     </div>

src/views/index/components/record/index.scss

@@ -0,0 +1,86 @@
+@import '@/assets/css/function';
+
+.record{
+  color: #fff;
+  padding-top: halfH(20);
+  .list{
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    .list-item{
+      margin-right: halfW(20);
+      text-align: center;
+      flex: 1;
+      position: relative;
+      &:last-child{
+        margin-right: 0;
+      }
+      .logoWrp{
+        position: relative;
+      }
+      .list-item-logo{
+        animation: bubble 20s linear infinite;
+        margin: auto;
+      }
+      .list-item-icon{
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        display: block;
+      }
+      .list-item-desc{
+        background: url('./images/fzhx@3x.png') no-repeat;
+        background-size: 100% 100%;
+        width: halfW(196);
+        height: halfH(45);
+        line-height: halfH(45);
+        margin: halfH(22) auto 0;
+        font-size: halfH(20);
+        color: #52DCFF;
+        font-weight: bold;
+        .desc-tips{
+          font-size: halfH(12);
+          padding-left: halfH(8);
+        }
+      }
+      .list-item-txt{
+        font-size: halfH(16);
+        color: #388AFD;
+        padding-top: halfH(14);
+        font-weight: bold;
+      }
+      &.shebei{
+        .list-item-logo{
+          animation-delay: 0;
+        }
+      }
+      &.anfang{
+        .list-item-logo{
+          animation-delay: 1s;
+        }
+      }
+      &.baojie{
+        .list-item-logo{
+          animation-delay: 3s;
+        }
+      }
+      &.renwu{
+        .list-item-logo{
+          animation-delay: 5s;
+        }
+      }
+    }
+  }
+  @keyframes bubble {
+    0% {
+      transform: rotate(0);
+    }
+    50% {
+      transform: rotate(180deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}

src/views/index/components/record/index.vue

@@ -0,0 +1,60 @@
+<!--
+ * @Author: WangQiBiao
+ * @Date: 2019-09-26 14:11:25
+ * @LastEditors: WangQiBiao
+ * @LastEditTime: 2019-09-26 17:59:54
+ * @Description:
+ -->
+<template>
+  <div class="record">
+    <div class="list">
+      <div class="list-item shebei">
+        <div class="logoWrp">
+          <img class="list-item-logo" src="./images/ditu@3x.png" alt="">
+          <img class="list-item-icon" src="./images/shb@3x.png" alt="">
+        </div>
+        <div class="list-item-desc">
+          <span>{{412343 | numberFormat}}</span>
+          <span class="desc-tips">次</span>
+        </div>
+        <div class="list-item-txt">设备巡检</div>
+      </div>
+      <div class="list-item anfang">
+        <div class="logoWrp">
+          <img class="list-item-logo" src="./images/ditu@3x.png" alt="">
+          <img class="list-item-icon" src="./images/baoan@3x.png" alt="">
+        </div>
+        <div class="list-item-desc">
+          <span>{{134132 | numberFormat}}</span>
+          <span class="desc-tips">次</span>
+        </div>
+        <div class="list-item-txt">安防巡逻</div>
+      </div>
+      <div class="list-item baojie">
+        <div class="logoWrp">
+          <img class="list-item-logo" src="./images/ditu@3x.png" alt="">
+          <img class="list-item-icon" src="./images/baojie@3x.png" alt="">
+        </div>
+        <div class="list-item-desc">
+          <span>{{413213 | numberFormat}}</span>
+          <span class="desc-tips">次</span>
+        </div>
+        <div class="list-item-txt">保洁登记</div>
+      </div>
+      <div class="list-item renwu">
+        <div class="logoWrp">
+          <img class="list-item-logo" src="./images/ditu@3x.png" alt="">
+          <img class="list-item-icon" src="./images/renwu@3x.png" alt="">
+        </div>
+        <div class="list-item-desc">
+          <span>{{542353 | numberFormat}}</span>
+          <span class="desc-tips">次</span>
+        </div>
+        <div class="list-item-txt">任务执行</div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

src/views/index/components/repair/index.scss

@@ -18,7 +18,6 @@
   }
   .map{
     display: flex;
-    // justify-content: center;
     padding-top: halfH(20);
     padding-left: halfW(30);
     .map-cnt{
@@ -45,6 +44,21 @@
         .map-tips-item-p{
           padding-left: halfW(12);
         }
+        &.b2{
+          .map-tips-item-w{
+            background:#0996FE;
+          }
+        }
+        &.b3{
+          .map-tips-item-w{
+            background:#00C738;
+          }
+        }
+        &.b4{
+          .map-tips-item-w{
+            background:#0BDCE5;
+          }
+        }
       }
     }
   }

src/views/index/components/repair/index.vue

@@ -2,7 +2,7 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-25 17:54:01
  * @LastEditors: WangQiBiao
- * @LastEditTime: 2019-09-25 18:44:43
+ * @LastEditTime: 2019-09-26 17:54:43
  * @Description: 住户报修
  -->
 <template>
@@ -26,25 +26,25 @@
     <div class="map">
       <div class="map-cnt" id="map"></div>
       <div class="map-tips">
-        <div class="map-tips-item">
+        <div class="map-tips-item b1">
           <div class="map-tips-item-w"></div>
           <div class="map-tips-item-txt">待受理</div>
-          <div class="map-tips-item-p">125</div>
+          <div class="map-tips-item-p">{{125 | numberFormat}}</div>
         </div>
-        <div class="map-tips-item">
+        <div class="map-tips-item b2">
           <div class="map-tips-item-w"></div>
           <div class="map-tips-item-txt">已受理</div>
-          <div class="map-tips-item-p">1576</div>
+          <div class="map-tips-item-p">{{1576 | numberFormat}}</div>
         </div>
-        <div class="map-tips-item">
+        <div class="map-tips-item b3">
           <div class="map-tips-item-w"></div>
           <div class="map-tips-item-txt">已解决</div>
-          <div class="map-tips-item-p">2376</div>
+          <div class="map-tips-item-p">{{2376 | numberFormat}}</div>
         </div>
-        <div class="map-tips-item">
+        <div class="map-tips-item b4">
           <div class="map-tips-item-w"></div>
           <div class="map-tips-item-txt">已评价</div>
-          <div class="map-tips-item-p">1245</div>
+          <div class="map-tips-item-p">{{1245 | numberFormat}}</div>
         </div>
       </div>
     </div>
@@ -59,7 +59,7 @@ export default {
   },
   data () {
     return {
-      rate: 3
+      rate: 4.6
     }
   },
   mounted () {

src/views/index/components/statistical/index.scss

@@ -0,0 +1,64 @@
+@import "@/assets/css/function.scss";
+@import "@/assets/css/mixin.scss";
+.statistical{
+  padding: halfH(35) halfW(20) 0;
+  @include clearBox;
+  display: flex;
+  &>.item{
+    margin-right: halfW(18);
+    overflow: hidden;
+    .item-label{
+      padding-top: halfH(40);
+      font-size:halfH(14);
+      color: #01DFFC;
+    }
+    .item-txt{
+      padding-top: halfH(14);
+      font-size:halfH(28);
+      color:#fff;
+      animation: bubble 10s infinite;
+    }
+    &:last-child{
+      margin-right: 0;
+    }
+    &.mianzhi{
+      .item-txt{
+        animation-delay: 0;
+      }
+    }
+    &.xiangmu{
+      .item-txt{
+        animation-delay: 8s;
+      }
+    }
+    &.fangwu{
+      .item-txt{
+        animation-delay: 3s;
+      }
+    }
+    &.zhuhu{
+      .item-txt{
+        animation-delay: 6s;
+      }
+    }
+    &.cheliang{
+      .item-txt{
+        animation-delay: 8s;
+      }
+    }
+  }
+  @keyframes bubble {
+    0% {
+      transform: rotateY(0);
+      // transform: scale3d(0.5, 0.5, 0.5);
+    }
+    50% {
+      transform: rotateY(90deg);
+      // transform: scale3d(1, 1, 1.5);
+    }
+    100% {
+      transform: rotateY(0);
+      // transform: scale3d(0.5, 0.5, 0.5);
+    }
+  }
+}

src/views/index/components/statistical/index.vue

@@ -2,14 +2,14 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-24 18:56:59
  * @LastEditors: WangQiBiao
- * @LastEditTime: 2019-09-25 18:27:53
+ * @LastEditTime: 2019-09-26 18:36:13
  * @Description:
  -->
 <template>
   <div class="statistical">
-    <TipsCardCom class="item" v-for="(item, idx) in list" :key="idx">
-      <h3 class="statistical-label">{{item.label}}</h3>
-      <p class="statistical-txt">{{item.value}}</p>
+    <TipsCardCom :class="['item', item.cls]" v-for="(item, idx) in list" :key="idx">
+      <h3 class="item-label">{{item.label}}</h3>
+      <p class="item-txt">{{item.value | numberFormat}}</p>
     </TipsCardCom>
   </div>
 </template>
@@ -21,23 +21,28 @@ export default {
       list: [
         {
           label: '物业面积(m^2)',
-          value: '5,000,000,234'
+          cls: 'mianzhi',
+          value: '434123452'
         },
         {
           label: '物业项目(个)',
-          value: '1,000,234'
+          cls: 'xiangmu',
+          value: '521331'
         },
         {
           label: '房屋(套)',
-          value: '600,046'
+          cls: 'fangwu',
+          value: '6342531'
         },
         {
           label: '住户(人)',
-          value: '1,900,146'
+          cls: 'zhuhu',
+          value: '93834123'
         },
         {
           label: '车辆(辆)',
-          value: '5,000,000,234'
+          cls: 'cheliang',
+          value: '7431243'
         }
       ]
     }
@@ -48,27 +53,5 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-@import "@/assets/css/function.scss";
-@import "@/assets/css/mixin.scss";
-.statistical{
-  padding: halfH(35) halfW(20) 0;
-  @include clearBox;
-  display: flex;
-  &>div{
-    margin-right: halfW(20);
-    &:last-child{
-      margin-right: 0;
-    }
-  }
-  .statistical-label{
-    padding-top: halfH(40);
-    font-size:halfH(14);
-    color: #01DFFC;
-  }
-  .statistical-txt{
-    padding-top: halfH(14);
-    font-size:halfH(28);
-    color:#fff;
-  }
-}
+@import './index.scss';
 </style>

src/views/index/components/title/index.scss

@@ -17,11 +17,14 @@
     font-size:halfH(32);
     font-weight:bold;
     padding-top: halfH(13);
+    background:linear-gradient(0deg,rgba(23,101,255,1) 0%, rgba(23,101,255,1) 0%, rgba(73,217,254,1) 54.931640625%, rgba(143,239,255,1) 80.322265625%);
+    background-clip: text;
+    color: transparent
   }
   .lr{
     position: absolute;
     right: halfW(70);
-    top: halfH(10);
+    top: halfH(6);
     .time{
       font-size:halfH(18);
       font-weight:bold;

src/views/index/components/title/index.vue

@@ -2,7 +2,7 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-25 09:19:42
  * @LastEditors: WangQiBiao
- * @LastEditTime: 2019-09-25 09:31:54
+ * @LastEditTime: 2019-09-26 17:49:53
  * @Description: 头部
  -->
 <template>
@@ -10,12 +10,79 @@
     <div class="lf">让物业管理更简单</div>
     <div class="cent">绘享云</div>
     <div class="lr">
-      <span class="time">09:35:26</span>
-      <span class="date">2018/11/04</span>
-      <span class="day">星期一</span>
+      <span class="time">{{time}}</span>
+      <span class="date">{{date}}</span>
+      <span class="day">{{day}}</span>
     </div>
   </div>
 </template>
+<script>
+export default {
+  data () {
+    return {
+      time: '00:00:00',
+      date: '0000/00/00',
+      day: '星期',
+      timerFn: null
+    }
+  },
+  mounted () {
+    this.setTimeTrainingRotation()
+  },
+  beforeDestroy () {
+    clearTimeout(this.timerFn)
+  },
+  methods: {
+    fillZero (value) {
+      if (value < 10) {
+        return '0' + value
+      }
+      return value
+    },
+    /**
+     * 日期
+     */
+    getDateValue () {
+      const _now = new Date()
+      const year = _now.getFullYear()
+      const month = this.fillZero(_now.getMonth() + 1)
+      const date = _now.getDate()
+      this.date = year + '/' + month + '/' + date
+    },
+    /**
+     * 时间
+     */
+    getTimeValue () {
+      clearTimeout(this.timerFn)
+      const _now = new Date()
+      const hours = this.fillZero(_now.getHours())
+      const minutes = this.fillZero(_now.getMinutes())
+      const seconds = this.fillZero(_now.getSeconds())
+      this.time = hours + ':' + minutes + ':' + seconds
+    },
+    /**
+     * 星期
+     */
+    getDayValue () {
+      const _now = new Date()
+      const DAY_NUM = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      this.day = DAY_NUM[_now.getDay()]
+    },
+    /**
+     * 轮训时间
+     */
+    setTimeTrainingRotation () {
+      this.getDateValue()
+      this.getTimeValue()
+      this.getDayValue()
+      this.timerFn = setTimeout(() => {
+        this.setTimeTrainingRotation()
+      }, 1000)
+    }
+  }
+}
+</script>
+
 <style lang="scss" scoped>
 @import './index.scss';
 </style>

src/views/index/index.scss

@@ -4,9 +4,9 @@
   .index-body{
     width: 100vw;
     display: flex;
+    justify-content: space-between;
     padding-top: halfH(18);
     .index-body-cent{
-      background: red;
       height: 200px;
       flex: 1;
       margin: 0 halfW(18);

src/views/index/index.vue

@@ -2,7 +2,7 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-24 18:06:33
  * @LastEditors: WangQiBiao
- * @LastEditTime: 2019-09-25 17:55:10
+ * @LastEditTime: 2019-09-26 14:12:29
  * @Description: 首页
  -->
 <template>
@@ -18,7 +18,10 @@
           <ParkingCom/>
         </div>
       </div>
-      <div class="index-body-cent">index-body-cent</div>
+      <div class="index-body-cent">
+        <PaidInCom/>
+        <RecordCom/>
+      </div>
       <div class="index-body-lr">
         <div class="ibl-item">
           <CommunicationCom/>
@@ -37,6 +40,8 @@ import EntranceGuardCom from './components/entrance-guard'
 import ParkingCom from './components/parking'
 import CommunicationCom from './components/communication'
 import RepairCom from './components/repair'
+import PaidInCom from './components/paid-in'
+import RecordCom from './components/record'
 export default {
   components: {
     StatisticalCom,
@@ -44,7 +49,9 @@ export default {
     EntranceGuardCom,
     ParkingCom,
     CommunicationCom,
-    RepairCom
+    RepairCom,
+    PaidInCom,
+    RecordCom
   },
   data () {
     return {