样式

src/pages/modules/home/left.vue

@@ -79,7 +79,7 @@
         <p class="txt">A<br>G<br>V<br>过<br>道</p>
       </div>
       <div class="zd-col-12 hwpl_wrap_2">
-        <div class="zd-row flexWrap">
+        <div class="zd-row flexWrap rowReverse">
           <div class="hw_item" v-for="e in point1" :key="e.point_code" :class="{'hw_item_active': e.point_status === '2'}">
             <p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
             <p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
@@ -357,18 +357,20 @@ export default {
 .state_wrap
   margin-bottom .38rem
 .state_icon
-  _wh(.1rem, .1rem)
+  _wh(.14rem, .14rem)
 .state_title
   _font(.2rem, .2rem, #fff,,)
   margin 0 .4rem 0 .1rem
 .bg_col_1
-  background-color #EF5252
   border-radius 4px
   box-shadow 0px 0px 12px 4px rgba(239, 82, 82, .5)
+  border 1px solid #B55F4E
+  background radial-gradient(circle at 50% 100%, rgba(251, 135, 105, 80%), #77200F, #58190E);
 .bg_col_2
-  background-color #8EB5E5
   border-radius 4px
   box-shadow 0px 0px 12px 4px rgba(142, 181, 229, .5)
+  border 1px solid rgba(42, 189, 251, 50%)
+  background radial-gradient(circle at 50% 100%, rgba(95, 217, 252, 50%), rgba(14, 82, 140, 50%), rgba(10, 54, 106, 50%));
 .pie_num_wrap
   margin-bottom .2rem
 .pie_wrap
@@ -400,24 +402,28 @@ export default {
   &:last-child
     margin-bottom 0
 .hw_item
-  _wh(.6rem, auto)
-  padding .096rem .05rem .05rem .05rem
-  margin-bottom .02rem
-  background center / 100% 100% url('../../../images/bg-hw.png') no-repeat
-.hw_item_active
-  background-image url('../../../images/bg-hw_active.png')
-  .hw_p1
-    color #3CC1FF
-.hw_p1
-  _font(.1rem, .11rem,#fff,,)
-  font-family: 'YouSheBiaoTiHei'
-  height .22rem
+  _wh(.58rem, .545rem)
+  padding 0.14rem 0.01rem 0 0.01rem
+  margin-bottom .04rem
+  // background center / 100% 100% url('../../../images/bg-hw.png') no-repeat
+  border-radius 4px
+  background radial-gradient(circle at 50% 100%, rgba(95, 217, 252, 50%), rgba(14, 82, 140, 50%), rgba(10, 54, 106, 50%));
+  border 4px solid rgba(42, 189, 251, 50%)
   overflow hidden
+.hw_item_active
+  // background-image url('../../../images/bg-hw_active.png')
+  background radial-gradient(circle at 50% 100%, rgba(251, 135, 105, 80%), #77200F, #58190E);
+  border 4px solid #B55F4E
+.hw_p1
+  _font(.09rem, .09rem,#EFF2FF,,)
+  font-family: 'YouSheBiaoTiHei'
+  height .09rem
+  margin-bottom: 0.05rem
+  text-shadow: 0px 1px 1px #A0D4FF;
 .hw_p2
-  _font(.1rem, .1rem, #fff,,center)
+  _font(.1rem, .1rem, #EFF2FF,,center)
   font-family: "SourceHanSansCN-Bold";
   height 0.2rem
-  overflow hidden
 .txt
   _font(.2rem, .4rem, #fff,,center)
   font-family: "YouSheBiaoTiHei"

src/style/reset.css

@@ -241,4 +241,7 @@ div, p {
 }
 .allHeight {
     height: 100%;
+}
+.rowReverse{
+    flex-direction: row-reverse
 }