特殊人群选择网格

src/project/saas/AppHome/components/Home.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="Home">
-    <div class="tips">
+    <u-notice-bar mode="horizontal" :list="list"></u-notice-bar>
+    <!-- <div class="tips">
       <img src="../img/home/tips-icon.png" alt="">慧政务改版上线了，点此查看帮助文档！
-    </div>
+    </div> -->
     <div class="content">
       <div class="user-info">
         <div class="left">
@@ -80,7 +81,8 @@ export default {
           num: 15
         }
       ],
-      echartData: null
+      echartData: null,
+      list: ['慧政务改版上线了，点此查看帮助文档！']
     }
   },
   computed: { ...mapState(['user']) },
@@ -96,15 +98,56 @@ export default {
         },
         xAxis: {
           type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#E1E5EF', //x轴的颜色
+              width: 1, //轴线的宽度
+            },
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#666',
+            },
+          },
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
         },
         yAxis: {
+          axisLine:{       //y轴
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#666',
+            },
+          },
           type: 'value'
         },
         series: [
           {
             data: [150, 230, 224, 218, 135, 147, 260],
             type: 'line',
+            areaStyle: {//覆盖区域的渐变色
+            	normal: {
+            		color: {
+                  type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
+                    }
+                  ],
+                  global: false // 缺省为 false
+		       		  },
+            	}
+            },
             lineStyle: {
               normal: {
                 color: '#2891FF'
@@ -219,7 +262,7 @@ export default {
     .tab-content {
       .item {
         display: inline-block;
-        width: 336px;
+        width: calc(50% - 14px);
         height: 160px;
         background: #FFF;
         box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
@@ -266,7 +309,7 @@ export default {
       }
     }
     .chart-content{
-      width: 686px;
+      width: 100%;
       height: 514px;
       background: #FFF;
       box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
@@ -274,5 +317,23 @@ export default {
       margin-bottom: 82px;
     }
   }
+  ::v-deep .u-type-warning-light-bg {
+    padding: 20px 32px!important;
+    background-color: #3975C6!important;
+  }
+  ::v-deep .u-icon__icon--warning {
+    color: #D7E3F3;
+    width: 32px;
+    height: 32px;
+    font-size: 0px!important;
+    background-image: url('../img/home/tips-icon.png');
+    background-size: 100%;
+  }
+  ::v-deep .u-type-warning {
+    color: #fff;
+    font-size: 28px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    line-height: 40px;
+  }
 }
 </style>