fix: 修改带箭头button样式

src/views/Home/comps/list.vue

@@ -73,13 +73,25 @@ export default {
     display: flex;
     align-items: center;
     cursor: pointer;
-    background: #F26335;
+    background: #CD3C0D;
     border-radius: 4px;
     position: relative;
     &:hover{
-      background: #A82C04;
+      background: #A82C05;
       img{
-        right: 14px;
+        right: 17px;
+      }
+    }
+    &:focus{
+      background: #CD3C0D;
+      img{
+        right: 20px;
+      }
+    }
+    &:active{
+      background: #912305;
+      img{
+        right: 17px;
       }
     }
     span{

src/views/Home/index.vue

@@ -13,10 +13,8 @@
                     {{ el.brief }}
                   </p>
                   <button class="carousel-btn" @click="learnMore(i)">
-                    <span>了解更多</span><img
-                      src="../../assets/image/home/more-arrow.png"
-                      alt=""
-                    />
+                    <span>了解更多</span
+                    ><img src="../../assets/image/home/more-arrow.png" alt="" />
                   </button>
                 </div>
                 <div class="col-5 carousel-caption-right d-lg-block">
@@ -360,7 +358,9 @@
         </div>
         <div class="spqqsfz-cont row">
           <div class="spqqsfz-cont-left col-lg-2">
-            <div class="spqqsfz-cont-left-tp"><img :src="spqqsfz.surl" alt="" /></div>
+            <div class="spqqsfz-cont-left-tp">
+              <img :src="spqqsfz.surl" alt="" />
+            </div>
           </div>
           <div class="spqqsfz-cont-right col-lg-10">
             <!-- <img src="../../assets/image/home/spqqsfz-bj2.png" alt="" /> -->
@@ -382,10 +382,8 @@
               <div class="row">
                 <div class="col offset-2 offset-lg-3">
                   <button class="spqqsfz-btn" @click="spqqsfzHandelClick">
-                    <span>更多商品信息</span><img
-                      src="../../assets/image/home/more-arrow.png"
-                      alt=""
-                    />
+                    <span>更多商品信息</span
+                    ><img src="../../assets/image/home/more-arrow.png" alt="" />
                   </button>
                 </div>
               </div>
@@ -1316,7 +1314,7 @@ export default {
       }
     }
   }
-  .ywzxdfgj{
+  .ywzxdfgj {
     padding: 30px 0;
   }
   .dzfwDialog-width {
@@ -1336,8 +1334,8 @@ export default {
       width: 24.4%;
     }
   }
-  .spqqsfz-cont-left{
-    .spqqsfz-cont-left-tp{
+  .spqqsfz-cont-left {
+    .spqqsfz-cont-left-tp {
       position: absolute;
     }
   }
@@ -1399,23 +1397,35 @@ export default {
           height: 37px;
           display: flex;
           align-items: center;
-          background: #0e2c6b;
+          background: #0E2C6B;
           border-radius: 4px;
           font-size: 16px;
           color: #ffffff;
           position: relative;
-          span{
+          span {
             margin-left: 18px;
           }
-          &:hover{
+          &:hover {
+            background: #061A4D;
+            img {
+              right: 17px;
+            }
+          }
+          &:focus {
+            background: #0E2C6B;
+            img {
+              right: 20px;
+            }
+          }
+          &:active {
             background: #061A4D;
-            img{
-              right: 10px;
+            img {
+              right: 17px;
             }
           }
           img {
             position: absolute;
-            right: 15px;
+            right: 20px;
             top: 50%;
             transform: translateY(-50%);
           }
@@ -1652,7 +1662,7 @@ export default {
           justify-content: center;
           border-top: 1px solid #f0f5fa;
         }
-        .dzfw-tp{
+        .dzfw-tp {
           height: 40px;
           display: flex;
           align-items: center;
@@ -1782,18 +1792,30 @@ export default {
               color: #fff;
               font-size: 18px;
               position: relative;
-              span{
+              span {
                 margin-left: 18px;
               }
-              &:hover{
-                background: #061a4d;
-                img{
-                  right: 10px;
+              &:hover {
+                background: #061A4D;
+                img {
+                  right: 17px;
+                }
+              }
+              &:active {
+                background: #061A4D;
+                img {
+                  right: 17px;
+                }
+              }
+              &:focus {
+                background: #0E2C6B;
+                img {
+                  right: 20px;
                 }
               }
               img {
                 position: absolute;
-                right: 14px;
+                right: 20px;
                 top: 50%;
                 transform: translateY(-50%);
               }