首页样式修改，性能优化

src/pages/CustomerView.vue

@@ -24,26 +24,40 @@
                     <Icon type="ios-alert-outline" style="margin-left: 5px" />
                 </Tooltip>
               </span>
-
+              <img src="../../static/img/bsd-logo.png" style="position: absolute;right: 0px;top: -10px" />
             </span>
           </row>
           <!--5块客户数-->
           <row class="top-20">
-            <Row type="flex" justify="space-between" class="code-row-bg">
+            <Row style="text-align: center">
-              <i-col span="4" class="big-blank" style="border: 1px solid #FFCC00;border-left: 6px solid #FFCC00;">
+              <i-col span="12">
-                <row class="top-20"><span class="left-10">新增好友</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.newCustomer}}</span></row>
+                <row  type="flex" justify="center" class="code-row-bg">
-              </i-col>
+                  <i-col span="4" class="big-blank">
-              <i-col span="4" class="big-blank" style="border: 1px solid #EC6A2F;border-left: 6px solid #EC6A2F;">
+                    <row class="top-5"><span class="huge-blank-font">{{customerViewVO.allCustomer}}</span></row><row><span class="weight-700">好友总数</span></row>
-                <row class="top-20"><span class="left-10">新增好友（去重）</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.newValidCustomer}}</span></row>
+                  </i-col>
-              </i-col>
+                  <i-col span="4" class="big-blank">
-              <i-col span="4" class="big-blank" style="border: 1px solid #2EA4E4;border-left: 6px solid #2EA4E4;">
+                  </i-col>
-                <row class="top-20"><span class="left-10">好友总数</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.allCustomer}}</span></row>
+                  <i-col span="4" class="big-blank">
-              </i-col>
+                    <row class="top-5"><span class="huge-blank-font">{{customerViewVO.allValidCustomer}}</span></row><row><span class="left-10 weight-700">好友总数（去重）</span></row>
-              <i-col span="4" class="big-blank" style="border: 1px solid #63C16D;border-left: 6px solid #63C16D;">
+                  </i-col>
-                <row class="top-20"><span class="left-10">好友总数（去重）</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.allValidCustomer}}</span></row>
+                </row>
               </i-col>
-              <i-col span="4" class="big-blank" style="border: 1px solid #2DC6EA;border-left: 6px solid #2DC6EA;">
+              <i-col span="12">
-                <row class="top-20"><span class="left-10">删除拉黑数（累计去重）</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.validDeleteCustomer}}</span></row>
+                <row  type="flex" justify="center" class="code-row-bg">
+                  <i-col span="4" class="big-blank">
+                    <row class="top-15"><span class="big-blank-font">{{customerViewVO.newCustomer}}</span></row><row class="top-10"><span>新增好友</span></row>
+                  </i-col>
+                  <i-col span="3" class="big-blank">
+                  </i-col>
+                  <i-col span="4" class="big-blank">
+                    <row class="top-15"><span class="big-blank-font">{{customerViewVO.newValidCustomer}}</span></row><row class="top-10"><span>新增好友（去重）</span></row>
+                  </i-col>
+                  <i-col span="3" class="big-blank">
+                  </i-col>
+                  <i-col span="5" class="big-blank">
+                    <row class="top-15"><span class="big-blank-font">{{customerViewVO.validDeleteCustomer}}</span></row><row class="top-10"><span>删除拉黑数（累计去重）</span></row>
+                  </i-col>
+                </row>
               </i-col>
             </Row>
           </row>
@@ -225,6 +239,7 @@
         },
         mounted: function () {
           this.dateBtnClick('今日');
+          this.timingRefresh();
         },
         methods: {
           //页面重绘
@@ -346,10 +361,14 @@
                 let tmpStartTime = that.startTime;
                 while(that.$moment(tmpStartTime).format("YYYY-MM-DD") <= that.$moment(that.endTime).format("YYYY-MM-DD")){
                   let date = that.$moment(tmpStartTime).format("M-DD");
+                  let customerDO = that.customerViewVO.customerList.filter(customer => date === that.$moment(customer.registerTime).format("M-DD"));
+                  let validCustomerDO = that.customerViewVO.validCustomerList.filter(customer => date === that.$moment(customer.registerTime).format("M-DD"));
+                  let customerSize = customerDO.length === 0 ? 0 : customerDO[0].customerSize;
+                  let validCustomerSize = validCustomerDO.length === 0 ? 0 : validCustomerDO[0].customerSize;
                   let obj = {
                     date:date,
-                    "新增好友": that.customerViewVO.customerList.filter(customer => date === that.$moment(customer.registerTime).format("M-DD")).length,
+                    "新增好友": customerSize,
-                    "新增好友(去重)": that.customerViewVO.validCustomerList.filter(vip => date === that.$moment(vip.registerTime).format("M-DD")).length,
+                    "新增好友(去重)": validCustomerSize,
                   };
                   that.chartData.rows.push(obj);
                   tmpStartTime = that.$moment(tmpStartTime).add(1,"days").format("YYYY-MM-DD HH:mm:ss");
@@ -373,6 +392,13 @@
                 endDate : that.selectEndTime,
               }
             });
+          },
+          //定时刷新
+          timingRefresh: function () {
+            let that = this;
+              setInterval(function () {
+                that.getMainList();
+              }, 1000 * 60);
           }
 
         }
@@ -402,15 +428,25 @@
     margin-left: 10px;
   }
   /*5大块客户数*/
+  .huge-blank-font{
+    color: #EC6A2F;
+    font-size: 40px;
+    font-weight: 700;
+    font-family: 'Microsoft YaHei';
+  }
   .big-blank{
     height: 100px;
     border-radius: 4px;
   }
   .big-blank-font{
+    color: #2D8CF0;
     font-size: 28px;
     font-weight: 700;
     font-family: 'Microsoft YaHei';
   }
+  .weight-700{
+    font-weight: 700;
+  }
   /*蓝色logo*/
   .blue-logo{
     background: #1A80D2;
@@ -435,6 +471,9 @@
   .left-25{
     margin-left: 25px;
   }
+  .top-5{
+    margin-top: 5px;
+  }
   .top-10{
     margin-top: 10px;
   }