fix 主题更换

src/App.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: WangQiBiao
  * @Date: 2019-09-24 17:50:53
- * @LastEditors: WangQiBiao
- * @LastEditTime: 2019-09-26 18:02:23
+ * @LastEditors: MoZhuangRu
+ * @LastEditTime: 2019-12-31 11:26:49
  * @Description:
  -->
 <template>
@@ -11,8 +11,9 @@
   </div>
 </template>
 <style lang="scss" scoped>
+@import '../src/assets/css/theme.scss';
 #app{
-  background: #0748A2 url('./assets/images/logo.jpg');
+  background: $big-bg;
   background-repeat: no-repeat;
   background-size: 100% 100%;
   width: 100vw;

src/assets/css/theme.scss

@@ -1,6 +1,9 @@
 
-// 主题色
-$primary-color: #0080FF;
+// 主题1：原始主题蓝色系
+// @import 'theme_1.scss';
+// 主题2：暗蓝色系
+@import 'theme_2.scss';
+
 // 菜单颜色
 $menu-color: #072848;
 // 背景色

src/assets/css/theme_1.scss

@@ -0,0 +1,49 @@
+$big-bg: #0748A2 url('./assets/images/logo.jpg');
+$primary-color: #0080FF;
+$title: #39D6FE;
+$title-cent: 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%);
+$title-bg: url('./images/dbl@3x.png');
+$statistical-title: #01DFFC;
+$statistical-txt: #ffffff;
+$repair-bg: url('./images/logo@3x.png');
+$repair-b1: #F9AF09;
+$repair-b2: #0996FE;
+$repair-b3: #00C738;
+$repair-b4: #0BDCE5;
+$record-desc: #52DCFF;
+$record-txt: #388AFD;
+$record-bg: url('./images/fzhx@3x.png');
+$communication-bg: url('./images/logo@3x.png');
+$communication-line: #0748A2;
+$tag-house-btn: #FFFFFF;
+$tag-time: #4F1FD9;
+$tag-house: #09A4CB;
+$tag-advice: #078AE8;
+$tag-praise: #27C553;
+$tag-complaints: #EC5D5D;
+$tag-consulting: #00B6C6;
+$tag-accept: #F9AF09;
+$tag-time-txt: #ffffff;
+$tag-house-txt: #FFFFFF;
+$tag-advice-txt: #FFFFFF;
+$tag-praise-txt: #FFFFFF;
+$tag-complaints-txt: #FFFFFF;
+$tag-consulting-txt: #FFFFFF;
+$tag-accept-txt: #FFFFFF;
+$tag-card-bg: url('./images/hldbl@3x.png');
+$entrance-guard-icon: url('./images/logo@3x.png');
+$parking-icon: url('./images/logo@3x.png');
+$paid-bg: url('./images/logo@3x.png');
+$income-bg: url('./images/logo@3x.png');
+$panel-txt: #ffffff;
+$panel-b1-bg: #121E9A;
+$panel-b1-bd: #1036A9;
+$panel-b1-desc: #ffffff;
+$panel-b2-bg: #02ABFE;
+$panel-b2-bd: #02ABFE;
+$panel-b2-desc: #ffffff;
+$panel-b3-bg: #2E38EE;
+$panel-b3-bd: #02ABFE;
+$panel-b3-desc: #FFD40D;
+$panel-rate-lf: #00CCFF;
+$panel-rate-lr: #ffffff;

src/assets/css/theme_2.scss

@@ -0,0 +1,49 @@
+$big-bg: #050E21 url('./assets/images/2_logo.png');
+$primary-color: #050E21;
+$title: #7FA4DF;
+$title-cent: linear-gradient(0deg,rgba(23,101,255,1) 0%, rgba(24,84,222,1) 0%, rgba(58,177,208,1) 54.931640625%, rgba(113,194,208,1) 80.322265625%);
+$title-bg: url(./images/2_dbl@3x.png);
+$statistical-title: #00CCE7;
+$statistical-txt: #D0D9EC;
+$repair-bg: url('./images/2_logo@3x.png');
+$repair-b1: linear-gradient(180deg,rgba(208,169,113,1),rgba(214,89,93,1));
+$repair-b2: linear-gradient(180deg,rgba(67,211,199,1),rgba(45,50,240,1));
+$repair-b3: linear-gradient(180deg,rgba(142,187,22,1),rgba(27,167,30,1));
+$repair-b4: linear-gradient(180deg,rgba(142,68,198,1),rgba(46,56,238,1));
+$record-desc: #6DD1FB;
+$record-txt: #388AFD;
+$record-bg: url('./images/2_fzhx@3x.png');
+$communication-bg: url('./images/2_logo@3x.png');
+$communication-line: #132A50;
+$tag-house-btn: #BAD1F6;
+$tag-time:#3914A6;
+$tag-house: #004098;
+$tag-advice: #1B7CC1;
+$tag-praise: #2C9E4D;
+$tag-complaints: #C95C5C;
+$tag-consulting: #00ACB3;
+$tag-accept: #EB9A52;
+$tag-time-txt: #D9C0F6;
+$tag-house-txt: #3288E9;
+$tag-advice-txt: #D7E6FF;
+$tag-praise-txt: #DCFFE6;
+$tag-complaints-txt: #FFE2E2;
+$tag-consulting-txt: #E0FCFF;
+$tag-accept-txt: #FFFFFF;
+$tag-card-bg: url('./images/2_hldbl@3x.png');
+$entrance-guard-icon: url('./images/2_logo@3x.png');
+$parking-icon: url('./images/2_logo@3x.png');
+$paid-bg: url('./images/2_logo@3x.png');
+$income-bg: url('./images/2_logo@3x.png');
+$panel-txt: #6786B8;
+$panel-b1-bg: #132A50;
+$panel-b1-bd: #203F85;
+$panel-b1-desc: #187EF2;
+$panel-b2-bg: linear-gradient(180deg,rgba(18,186,197,1),rgba(45,50,240,1));
+$panel-b2-bd: #02ABFE;
+$panel-b2-desc: #187EF2;
+$panel-b3-bg: linear-gradient(180deg,rgba(46,56,238,1),rgba(238,145,120,1));
+$panel-b3-bd: #2E38EE;
+$panel-b3-desc: #D1864A;
+$panel-rate-lf: #00CCFF;
+$panel-rate-lr: #3288E9;

src/assets/js/theme.js

@@ -0,0 +1,9 @@
+/*
+ * @Author: MoZhuangRu
+ * @Date: 2019-12-31 17:21:20
+ * @LastEditors: MoZhuangRu
+ * @LastEditTime: 2019-12-31 17:29:20
+ * @Description:
+ */
+export const theme = {
+}

src/components/tag/index.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: WangQiBiao
  * @Date: 2019-09-25 17:20:35
- * @LastEditors: mozhuangru
- * @LastEditTime: 2019-10-12 09:22:30
+ * @LastEditors: MoZhuangRu
+ * @LastEditTime: 2020-01-14 10:23:41
  * @Description: tag
  -->
 <template>
@@ -23,40 +23,55 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '@/assets/css/function';
+@import '@/assets/css/theme';
 .tag{
   padding: halfH(2) halfW(4);
   border-radius:halfH(2);
   font-size: halfH(12);
   margin-right: halfW(8);
-  color: #fff;
+  color: $tag-time-txt;
   background:#333;
   // 默认|时间
   &.default,
   &.time{
-    background:#4F1FD9;
+    background: $tag-time;
+    color: $tag-time-txt;
+
   }
   // 房屋
   &.house{
-    background:#09A4CB;
+    background:$tag-house;
+    color: $tag-house-btn;
+
   }
   // 建议
   &.advice{
-    background:#078AE8;
+    background:$tag-advice;
+    color: $tag-advice-txt;
+
   }
   // 表扬
   &.praise{
-    background:#27C553;
+    background:$tag-praise;
+    color: $tag-praise-txt;
+
   }
   // 投诉
   &.complaints{
-    background:#EC5D5D;
+    background:$tag-complaints;
+    color: $tag-complaints-txt;
   }
   // 咨询
   &.consulting{
-    background:#00B6C6;
+    background:$tag-consulting;
+    color: $tag-consulting-txt;
+
   }
+  // 待受理
   &.accept{
-    background:#F9AF09;
+    background:$tag-accept;
+    color: $tag-accept-txt;
+
   }
 }
 </style>

src/components/tips-card/index.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: WangQiBiao
  * @Date: 2019-09-24 18:38:32
- * @LastEditors: WangQiBiao
- * @LastEditTime: 2019-09-26 08:41:12
+ * @LastEditors: MoZhuangRu
+ * @LastEditTime: 2020-01-15 15:36:43
  * @Description:
  -->
 <template>
@@ -12,10 +12,11 @@
 </template>
 <style lang="scss" scoped>
 @import "@/assets/css/function.scss";
+@import "@/assets/css/theme";
 .tips-card {
   width: halfW(368);
   height: halfH(150);
-  background: url('./images/hldbl@3x.png');
+  background: $tag-card-bg;
   background-size: 100% 100%;
   background-repeat: no-repeat;
   color: #fff;

src/components/title/index.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: WangQiBiao
  * @Date: 2019-09-25 14:16:20
- * @LastEditors: WangQiBiao
- * @LastEditTime: 2019-09-26 17:52:32
+ * @LastEditors: MoZhuangRu
+ * @LastEditTime: 2020-01-15 16:47:25
  * @Description:
  -->
 <template>
@@ -25,18 +25,19 @@ export default {
 
 <style lang="scss" scoped>
 @import '@/assets/css/function';
+@import '@/assets/css/theme';
 .title{
   text-align: center;
   color: #39D6FE;
   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: $title-cent;
   background-clip: text;
   color: transparent;
   .line{
     height: 1px;
-    background: #0748A2;
+    background: $communication-line;
     margin: halfH(15);
   }
 }

src/main.js

@@ -1,8 +1,8 @@
 /*
  * @Author: WangQiBiao
  * @Date: 2019-09-24 17:50:53
- * @LastEditors: mozhuangru
- * @LastEditTime: 2019-10-13 16:51:21
+ * @LastEditors: MoZhuangRu
+ * @LastEditTime: 2019-12-31 17:18:08
  * @Description:
  */
 import Vue from 'vue'

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

@@ -1,7 +1,8 @@
 @import '@/assets/css/function';
+@import '@/assets/css/theme';
 
 .communication{
-  background: url('./images/logo@3x.png') no-repeat;
+  background: $communication-bg no-repeat;
   background-size: 100% 100%;
   width: halfW(356);
   height: halfH(500);
@@ -22,13 +23,13 @@
   }
   .linst-line{
     height: 1px;
-    background: #0748A2;
+    background: $communication-line;
     margin: 0 halfH(20);
   }
   .list{
     padding: halfH(12) halfH(20) 0;
     overflow: hidden;
-    height: halfH(210);
+    height: halfH(200);
     .list-item{
       display: flex;
       align-items: center;
@@ -38,6 +39,7 @@
       // animation-fill-mode: forwards;
       .list-item-txt{
         font-size: halfH(14);
+        color: $tag-house-txt;
       }
       .list-item-lr{
         flex: 1;

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

@@ -2,7 +2,7 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-25 14:10:08
  * @LastEditors: MoZhuangRu
- * @LastEditTime: 2019-11-21 16:07:57
+ * @LastEditTime: 2020-01-16 11:43:01
  * @Description: 在线沟通
  -->
 <template>
@@ -106,7 +106,7 @@ export default {
                 lineHeight: 14,
                 rich: {
                   b: {
-                    color: '#fff',
+                    color: '#6786B8',
                     fontSize: 10
                   }
                 }
@@ -118,10 +118,10 @@ export default {
                 name: '咨询',
                 label: {
                   show: true,
-                  color: '#00F5FF'
+                  color: '#2CDAE1'
                 },
                 itemStyle: {
-                  color: '#00F5FF'
+                  color: '#2CDAE1'
                 }
               },
               {
@@ -129,10 +129,10 @@ export default {
                 name: '投诉',
                 label: {
                   show: true,
-                  color: '#ed4f46'
+                  color: '#DE5B5B'
                 },
                 itemStyle: {
-                  color: '#ed4f46'
+                  color: '#DE5B5B'
                 }
               },
               {
@@ -140,10 +140,10 @@ export default {
                 name: '建议',
                 label: {
                   show: true,
-                  color: '#0998FF'
+                  color: '#2592E1'
                 },
                 itemStyle: {
-                  color: '#0998FF'
+                  color: '#2592E1'
                 }
               },
               {
@@ -151,10 +151,10 @@ export default {
                 name: '表扬',
                 label: {
                   show: true,
-                  color: '#07E144'
+                  color: '#1EC74D'
                 },
                 itemStyle: {
-                  color: '#07E144'
+                  color: '#1EC74D'
                 }
               }
             ]
@@ -184,11 +184,11 @@ export default {
                 position: 'center',
                 rich: {
                   a: {
-                    color: '#00CAFF',
+                    color: '#02D3EF',
                     fontSize: 10
                   },
                   b: {
-                    color: '#00FAA8',
+                    color: '#02D3EF',
                     fontSize: 14
                   }
                 }
@@ -199,13 +199,19 @@ export default {
                 value: this.reportServiceScore,
                 name: `${this.reportServiceScore}%`,
                 itemStyle: {
-                  color: '#07E144'
+                  color: new echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [
+                      { offset: 0, color: '#43D3C7' },
+                      { offset: 1, color: '#2D32F0' }
+                    ]
+                  )
                 }
               },
               {
                 value: 100 - this.reportServiceScore,
                 itemStyle: {
-                  color: '#262795'
+                  color: '#182743'
                 }
               }
             ]

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

@@ -1,10 +1,11 @@
 @import '@/assets/css/function';
+@import '@/assets/css/theme';
 
 .entrance-guard{
-  background: url('./images/logo@3x.png') no-repeat;
+  background: $entrance-guard-icon no-repeat;
   background-size: 100% 100%;
   height: halfH(378);
-  color: #fff;
+  color: $statistical-txt;
   padding: 0 halfH(22);
   overflow: hidden;
   .tips{
@@ -24,8 +25,12 @@
       }
     }
   }
+  .linst-line{
+    height: 1px;
+    background: $communication-line;
+  }
   .list{
-    border-top: 1px solid #0748A2;
+    // border-top: 1px solid $communication-line;
     padding-top: halfH(12);
     overflow: hidden;
     height: halfH(220);
@@ -41,6 +46,7 @@
       // -webkit-animation-fill-mode: forwards;
       .list-item-txt{
         font-size: halfH(14);
+        color: $tag-house-txt;
       }
       .list-item-lr{
         flex: 1;

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

@@ -2,19 +2,20 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-25 10:20:36
  * @LastEditors: MoZhuangRu
- * @LastEditTime: 2019-11-21 15:42:36
+ * @LastEditTime: 2020-01-15 15:49:52
  * @Description: 智能门禁
  -->
 <template>
   <div class="entrance-guard">
     <TitleCom>智能门禁</TitleCom>
     <div class="tips">
-      <img class="tips-logo" src="./images/zhnmj@3x.png" alt="">
+      <img class="tips-logo" src="./images/2_zhnmj@3x.png" alt="">
       <div class="tips-desc">
         <span class="tips-desc-txt">{{faceData.total | numberFormat}}</span>
         <span class="tips-desc-unit"> 人次</span>
       </div>
     </div>
+    <div class="linst-line"></div>
     <div class="list">
       <vueSeamless :data="faceData.list" :class-option="optionScroll" class="list">
         <div class="list-item" v-for="(item, idx) in faceData.list" :key="idx">

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

@@ -1,9 +1,10 @@
 @import '@/assets/css/function';
+@import '@/assets/css/theme';
 
 .income{
-  background: url('./images/logo@3x.png') no-repeat;
+  background: $income-bg no-repeat;
   background-size: 100% 100%;
-  height: halfH(380);
+  height: halfH(366);
   padding: halfH(36) halfW(20) 0;
   .panel{
     display: flex;
@@ -16,8 +17,8 @@
     .panel-icon{
       width: halfW(18);
       height: halfH(10);
-      background:#121E9A;
-      border:1px solid #1036A9;
+      background:$panel-b1-bg;
+      border:1px solid $panel-b1-bd;
       border-radius:2px;
       margin-right: halfW(8);
     }
@@ -25,24 +26,35 @@
       font-size: halfH(12);
       font-weight: bold;
       padding-right: halfW(18);
+      color: $panel-txt;
     }
     .panel-desc{
       font-size: halfH(18);
       font-weight: bold;
+      color: $panel-b2-desc;
     }
     &.b2{
       .panel-icon{
-        background:#02ABFE;
-        border:1px solid #02ABFE;
+        background:$panel-b2-bg;
+        border:1px solid $panel-b2-bd;
       }
       .panel-desc{
-        color: #FFD40D;
+        color: $panel-b2-desc;
+      }
+    }
+    &.b3{
+      .panel-icon{
+        background:$panel-b3-bg;
+        border:1px solid $panel-b3-bd;
+      }
+      .panel-desc{
+        color: $panel-b3-desc;
       }
     }
   }
   .map{
     width: 100%;
-    height: halfH(220);
+    height: halfH(200);
     margin: auto;
   }
   .progress{
@@ -52,11 +64,11 @@
       padding-bottom: halfH(10);
       .desc-lf{
         font-size: halfH(12);
-        color: #00CCFF;
+        color: $panel-rate-lf;
       }
       .desc-lr{
         font-size: halfH(14);
-        color: #fff;
+        color: $panel-rate-lr;
         font-weight: 900;
       }
     }

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

@@ -2,7 +2,7 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-26 10:57:30
  * @LastEditors: MoZhuangRu
- * @LastEditTime: 2019-11-21 15:42:45
+ * @LastEditTime: 2020-01-16 14:36:06
  * @Description: 收入统计
  -->
 <template>
@@ -17,6 +17,11 @@
       <div class="panel-txt">实收</div>
       <div class="panel-desc">￥{{billSum.billReceived | moneyFormat}}</div>
     </div>
+    <div class="panel b3">
+      <div class="panel-icon"></div>
+      <div class="panel-txt">线上</div>
+      <div class="panel-desc">￥{{billSum.billOnline | moneyFormat}}</div>
+    </div>
     <div class="map" id="mapId"></div>
     <div class="progress">
       <div class="desc">
@@ -67,22 +72,33 @@ export default {
     createIncomeMap () {
       var myChart = echarts.init(document.getElementById('mapId'))
       var option = {
-        // backgroundColor: '#2c343c',
+        title: [
+          {
+            text: '缴费方式',
+            textStyle: {
+              fontSize: 10,
+              color: '#F0F0F0',
+              fontWeight: 'normal'
+            },
+            left: '41%',
+            top: '45%'
+          }
+        ],
         series: [
           {
+            // name: '缴费方式',
             radius: ['40%', '60%'],
             hoverAnimation: false,
             type: 'pie',
             center: ['50%', '50%'],
             label: {
               normal: {
-                // formatter: '{b|{b}}\n{c}',
                 formatter: '{b|{b}}\n{per|{d}%}',
                 fontSize: 10,
                 lineHeight: 14,
                 rich: {
                   b: {
-                    color: '#fff',
+                    color: '#5774A2',
                     fontSize: 10
                   }
                 }
@@ -94,14 +110,14 @@ export default {
                 name: '线上',
                 label: {
                   show: true,
-                  color: '#FF9933'
+                  color: '#00CCFF'
                 },
                 itemStyle: {
                   color: new echarts.graphic.LinearGradient(
                     0, 0, 0, 1,
                     [
-                      { offset: 0, color: '#FCC204' },
-                      { offset: 1, color: '#EF6E18' }
+                      { offset: 0, color: '#2E38EE' },
+                      { offset: 1, color: '#8E44C6' }
                     ]
                   )
                 }
@@ -117,8 +133,8 @@ export default {
                   color: new echarts.graphic.LinearGradient(
                     0, 0, 0, 1,
                     [
-                      { offset: 0, color: '#01B4FF' },
-                      { offset: 1, color: '#0336FF' }
+                      { offset: 0, color: '#1BA71E' },
+                      { offset: 1, color: '#8EBB16' }
                     ]
                   )
                 }

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

@@ -1,6 +1,8 @@
 @import '@/assets/css/function';
+@import '@/assets/css/theme';
+
 .paid-in{
-  background: url('./images/logo@3x.png') no-repeat;
+  background: $paid-bg no-repeat;
   background-size: 100% 100%;
   width: 100%;
   height: halfH(443);

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

@@ -2,7 +2,7 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-26 08:46:04
  * @LastEditors: MoZhuangRu
- * @LastEditTime: 2019-11-21 11:18:21
+ * @LastEditTime: 2020-01-15 17:05:07
  * @Description: 近1年应实收统计
  -->
 <template>
@@ -65,7 +65,7 @@ export default {
           axisLine: { // 坐标轴
             show: true,
             lineStyle: {
-              color: '#1036A9',
+              color: '#1C293F',
               width: 1
             }
           },
@@ -76,7 +76,7 @@ export default {
             show: true,
             inside: false,
             rotate: 30,
-            color: '#39D6FE',
+            color: '#5774A2',
             fontWeight: 400
           },
           splitLine: { // x轴线
@@ -84,7 +84,7 @@ export default {
             interval: 1000,
             lineStyle: {
               type: 'solid',
-              color: '#1036A9'
+              color: '#1C293F'
             }
           },
           splitArea: { // 分隔区域
@@ -100,14 +100,14 @@ export default {
           position: 'left',
           name: '单位(万元)',
           nameTextStyle: {
-            color: '#fff',
+            color: '#5774A2',
             fontSize: 10,
             fontWeight: 400
           },
           axisLine: {
             show: true,
             lineStyle: {
-              color: '#1036A9',
+              color: '#1C293F',
               width: 1
             }
           },
@@ -118,7 +118,7 @@ export default {
             show: true,
             inside: false,
             // rotate: 30,
-            color: '#fff',
+            color: '#5774A2',
             fontWeight: 400
           },
           splitLine: { // x轴线
@@ -126,7 +126,7 @@ export default {
             interval: 0,
             lineStyle: {
               type: 'solid',
-              color: '#1036A9'
+              color: '#1C293F'
             }
           },
           splitArea: { // 分隔区域
@@ -144,15 +144,15 @@ export default {
             label: {
               show: true,
               position: 'top',
-              color: '#FFF600'
+              color: '#99C1EF'
             },
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(
                   0, 0, 0, 1,
                   [
-                    { offset: 0, color: '#01B4FF' },
-                    { offset: 1, color: '#0E2AF6' }
+                    { offset: 0, color: '#12BAC5' },
+                    { offset: 1, color: '#2D32F0' }
                   ]
                 )
               }

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

@@ -1,10 +1,11 @@
 @import '@/assets/css/function';
+@import '@/assets/css/theme';
 
 .parking{
-  background: url('./images/logo@3x.png') no-repeat;
+  background: $parking-icon no-repeat;
   background-size: 100% 100%;
   height: halfH(378);
-  color: #fff;
+  color: $statistical-txt;
   padding: 0 halfH(22);
   overflow: hidden;
   .tips{
@@ -24,8 +25,12 @@
       }
     }
   }
+  .linst-line{
+    height: 1px;
+    background: $communication-line;
+  }
   .list{
-    border-top: 1px solid #0748A2;
+    // border-top: 1px solid $communication-line;
     padding-top: halfH(12);
     height: halfH(240);
     overflow: hidden;
@@ -38,6 +43,7 @@
       // animation-fill-mode: forwards;
       .list-item-txt{
         font-size: halfH(14);
+        color: $tag-house-txt;
       }
       .list-item-lr{
         flex: 1;

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

@@ -2,19 +2,20 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-25 10:20:36
  * @LastEditors: MoZhuangRu
- * @LastEditTime: 2019-11-21 15:43:00
+ * @LastEditTime: 2020-01-15 16:41:16
  * @Description: 智能停车
  -->
 <template>
   <div class="parking">
     <TitleCom>智能停车</TitleCom>
     <div class="tips">
-      <img class="tips-logo" src="./images/zhntch@3x.png" alt="">
+      <img class="tips-logo" src="./images/2_zhntch@3x.png" alt="">
       <div class="tips-desc">
         <span class="tips-desc-txt">{{parkData.total | numberFormat}}</span>
         <span class="tips-desc-unit"> 车次</span>
       </div>
     </div>
+    <div class="linst-line"></div>
     <div class="list">
       <vueSeamless :data="parkData.list" :class-option="optionScroll" class="list">
         <div class="list-item" v-for="(item, idx) in parkData.list" :key="idx">

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

@@ -1,4 +1,5 @@
 @import '@/assets/css/function';
+@import '@/assets/css/theme';
 
 .record{
   color: #fff;
@@ -30,14 +31,14 @@
         display: block;
       }
       .list-item-desc{
-        background: url('./images/fzhx@3x.png') no-repeat;
+        background: $record-bg 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;
+        color: $record-desc;
         font-weight: bold;
         .desc-tips{
           font-size: halfH(12);
@@ -46,7 +47,7 @@
       }
       .list-item-txt{
         font-size: halfH(16);
-        color: #388AFD;
+        color: $record-txt;
         padding-top: halfH(14);
         font-weight: bold;
       }

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

@@ -2,7 +2,7 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-26 14:11:25
  * @LastEditors: MoZhuangRu
- * @LastEditTime: 2019-11-21 11:18:01
+ * @LastEditTime: 2020-01-14 09:31:12
  * @Description:
  -->
 <template>
@@ -10,8 +10,8 @@
     <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="">
+          <img class="list-item-logo" src="./images/2_ditu@3x.png" alt="">
+          <img class="list-item-icon" src="./images/2_shb@3x.png" alt="">
         </div>
         <div class="list-item-desc">
           <span>{{equipment | numberFormat}}</span>
@@ -21,8 +21,8 @@
       </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="">
+          <img class="list-item-logo" src="./images/2_ditu@3x.png" alt="">
+          <img class="list-item-icon" src="./images/2_baoan@3x.png" alt="">
         </div>
         <div class="list-item-desc">
           <span>{{security | numberFormat}}</span>
@@ -32,8 +32,8 @@
       </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="">
+          <img class="list-item-logo" src="./images/2_ditu@3x.png" alt="">
+          <img class="list-item-icon" src="./images/2_baojie@3x.png" alt="">
         </div>
         <div class="list-item-desc">
           <span>{{cleaning | numberFormat}}</span>
@@ -43,8 +43,8 @@
       </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="">
+          <img class="list-item-logo" src="./images/2_ditu@3x.png" alt="">
+          <img class="list-item-icon" src="./images/2_renwu@3x.png" alt="">
         </div>
         <div class="list-item-desc">
           <span>{{taskExecution | numberFormat}}</span>

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

@@ -1,7 +1,8 @@
 @import '@/assets/css/function';
+@import '@/assets/css/theme';
 
 .repair{
-  background: url('./images/logo@3x.png') no-repeat;
+  background: $repair-bg no-repeat;
   background-size: 100% 100%;
   width: halfW(356);
   height: halfH(256);
@@ -35,7 +36,7 @@
         .map-tips-item-w{
           width:halfW(12);
           height:halfH(12);
-          background:#F9AF09;
+          background: $repair-b1;
           border-radius:halfH(2);
         }
         .map-tips-item-txt{
@@ -46,17 +47,17 @@
         }
         &.b2{
           .map-tips-item-w{
-            background:#0996FE;
+            background: $repair-b2;
           }
         }
         &.b3{
           .map-tips-item-w{
-            background:#00C738;
+            background: $repair-b3;
           }
         }
         &.b4{
           .map-tips-item-w{
-            background:#0BDCE5;
+            background: $repair-b4;
           }
         }
       }

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

@@ -2,7 +2,7 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-25 17:54:01
  * @LastEditors: MoZhuangRu
- * @LastEditTime: 2019-11-21 16:09:40
+ * @LastEditTime: 2020-01-16 11:23:03
  * @Description: 住户报修
  -->
 <template>
@@ -54,7 +54,6 @@
 import TitleCom from '@/components/title'
 import echarts from 'echarts'
 import { api } from '@/api'
-
 export default {
   components: {
     TitleCom
@@ -103,28 +102,52 @@ export default {
                 value: this.repairWaitAccept,
                 name: '待受理',
                 itemStyle: {
-                  color: '#F9AF09'
+                  color: new echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [
+                      { offset: 0, color: '#D6595D' },
+                      { offset: 1, color: '#D0A971' }
+                    ]
+                  )
                 }
               },
               {
                 value: this.repairAccept,
                 name: '已受理',
                 itemStyle: {
-                  color: '#0996FE'
+                  color: new echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [
+                      { offset: 0, color: '#43D3C7' },
+                      { offset: 1, color: '#2D32F0' }
+                    ]
+                  )
                 }
               },
               {
                 value: this.repairSolve,
                 name: '已解决',
                 itemStyle: {
-                  color: '#00C738'
+                  color: new echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [
+                      { offset: 0, color: '#1BA71E' },
+                      { offset: 1, color: '#8EBB16' }
+                    ]
+                  )
                 }
               },
               {
                 value: this.repairEvaluate,
                 name: '已评价',
                 itemStyle: {
-                  color: '#0BDCE5'
+                  color: new echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [
+                      { offset: 0, color: '#2E38EE' },
+                      { offset: 1, color: '#8E44C6' }
+                    ]
+                  )
                 }
               }
             ]

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

@@ -1,5 +1,7 @@
 @import "@/assets/css/function.scss";
 @import "@/assets/css/mixin.scss";
+@import "@/assets/css/theme.scss";
+
 .statistical{
   padding: halfH(26) halfW(20) 0;
   @include clearBox;
@@ -10,12 +12,12 @@
     .item-label{
       padding-top: halfH(40);
       font-size:halfH(14);
-      color: #01DFFC;
+      color: $statistical-title;
     }
     .item-txt{
       padding-top: halfH(14);
       font-size:halfH(28);
-      color:#fff;
+      color: $statistical-txt;
       // animation: bubble 10s infinite;
     }
     &:last-child{

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

@@ -1,12 +1,13 @@
 @import '@/assets/css/function';
+@import '@/assets/css/theme';
 
 .title{
-  background: url(./images/dbl@3x.png) no-repeat;
+  background: $title-bg no-repeat;
   background-size: 100% 100%;
   height: halfH(60);
   position: relative;
   text-align: center;
-  color: #39D6FE;
+  color: $title;
   font-size:halfH(14);
   .lf{
     position: absolute;
@@ -17,7 +18,7 @@
     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:$title-cent;
     background-clip: text;
     color: transparent
   }