可点击样式添加

src/components/detail/breadcrumb.vue

@@ -48,7 +48,8 @@
                 <div class="tool-btn-box dis-f al-item">
                     <div class="btn-s dis-f al-item jus-x" @click="operation">
                         <img src="../../assets/img/detail/collect.png" v-show="!data.data.isfav" class="img" alt="">
-                        <img src="../../assets/img/detail/collectT.png" v-show="data.data.isfav" class="img" alt="">
+                        <img src="../../assets/img/detail/collectT.png" v-show="!data.data.isfav" class="img-mouse" alt="">
+                        <img src="../../assets/img/detail/collectT.png" v-show="data.data.isfav" class="img-t" alt="">
                         <span class="mg-l-5">
                             {{ data.data.isfav ? data['data']['info'].count_fav : '收藏' }}
                         </span>
@@ -57,7 +58,7 @@
 
                     </div>
                     <div class="btn-s dis-f al-item jus-x">
-                        <img src="../../assets/img/detail/forward.png" class="img" alt="">
+                        <img src="../../assets/img/detail/forward.png" class="img-t" alt="">
                         <span class="mg-l-5">
                             转发
                         </span>
@@ -298,6 +299,16 @@ img {
                 margin-left: 5px;
             }
 
+            .btn-s:hover .img-mouse{
+                display: block;
+            }
+            .btn-s:hover .img{
+                display: none;
+            }
+            .btn-s:hover{
+                color:#000;
+            }
+
             .btn-s {
                 color: #333333;
                 font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
@@ -309,9 +320,21 @@ img {
                 line-height: 40px;
                 cursor: pointer;
 
+                .img-mouse{
+                    width: 20px;
+                    height: 20px;
+                    opacity:0.4;
+                    display: none;
+                }
                 .img {
                     width: 20px;
                     height: 20px;
+                    display: block;
+                }
+                .img-t {
+                    width: 20px;
+                    height: 20px;
+                    display: block;
                 }
             }
 

src/components/indexWaterfallBox/indexWaterfallBox.vue

@@ -211,6 +211,7 @@ watchEffect(()=>{
     box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
     margin-bottom: 20px;
     cursor: pointer;
+    transition: all linear 0.2s;
 
     .authentication-box {
         width: 275px;

src/components/seachPage/input.vue

@@ -565,6 +565,9 @@ img {
             border-bottom: 1px solid #ebebeb !important;
         }
 
+        .box:hover{
+            background-color: rgba(242, 242, 242, 1);
+        }
         .box {
             width: 1160px;
             min-height: 60px;
@@ -653,7 +656,7 @@ img {
             font-weight: 650;
             font-style: normal;
             font-size: 17px;
-            color: #000000;
+            color: #000000 !important;
             text-align: center;
             bottom: 0;
             z-index: 66;
@@ -780,6 +783,10 @@ img {
             }
         }
 
+        .top-btn:hover{
+            color:#bcd7f3;
+        }
+
         .top-btn {
             width: 200px;
             height: 45px;
@@ -887,6 +894,10 @@ img {
         }
     }
 
+    .input-s:hover{
+        border-color:rgb(200, 200, 200);
+    }
+
     .input-s {
         width: 560px;
         height: 48px;

src/views/HomeView.vue

@@ -565,6 +565,9 @@ img {
   }
 }
 
+.list-tab-btn:hover{
+  color: #333;
+}
 .list-tab-btn {
   font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
   font-weight: 400;