案例

src/components/Case/collectList.vue

@@ -8,7 +8,10 @@
 
           </div>
           <div class="article-info-date">
-            <el-button @click="delItem(item)" type="text" style="color: #8590A6;font-size:14px" icon="el-icon-star-on">取消收藏</el-button>
+            <div class="box">
+              <div class="image"></div>
+              <el-button @click="delItem(item)" type="text" style="color: #8590A6;font-size:14px">取消收藏</el-button>
+            </div>
           </div>
         </div>
         <div class="article-info-tools">
@@ -161,6 +164,26 @@
         line-height: 40px;
         font-weight: 200;
         color: #999999;
+        display: flex;
+        justify-content: end;
+        .box{
+          display: flex;
+          justify-content: end;
+          align-items: center;
+          .image{
+            width: 14px;
+            height: 14px;
+            background: url('../../assets/images/case/Frame(5).png') no-repeat;
+            background-size: 100%;
+            margin-right: 10px;
+          }
+          &:hover{
+            .image{
+              background: url('../../assets/images/case/Frame(12).png') no-repeat;
+              background-size: 100%;
+            }
+          }
+        }
         i {
           margin-right: 5px;
         }

src/components/Portal/interactBar.vue

@@ -536,6 +536,7 @@ export default {
             this.$store.dispatch("unicomFavorites",false)
           }
           this.$message({message:'已取消收藏',type:'success'});
+          this.$emit('deleteFavorite',true)
           //this.$emit('addFavorite',res.result);//添加收藏,如果是true代表添加成功，false代表已存在
         }else{
           console.log('取消收藏失败：'+res.message);

src/views/portal/case/Index.vue

@@ -264,7 +264,7 @@
                   </div>
                   <div v-if="item.id" style="display: flex;justify-content: flex-end;">
                     <div style="margin:8px 0;">
-                      <interactBar :type="3" :data="item" :comments="false" :shares="true"></interactBar>
+                      <interactBar @deleteFavorite="deleteFavorite" :type="3" :data="item" :comments="false" :shares="true"></interactBar>
                     </div>
                   </div>
                 </div>
@@ -838,6 +838,9 @@ export default {
 
   },
   methods: {
+    deleteFavorite(e){
+      this.search()
+    },
     positiveReview(e){
       this.favorableName = this.switch[e]
       this.getPositive()
@@ -2498,7 +2501,7 @@ export default {
           // color: #fff;
         }
         // .png{
-        //   background: url('../../../assets/images/case/Frame(17).png') no-repeat;
+        //   background: url('../../../assets/images/case/wighttime.png') no-repeat;
         // }
       }
       .png{
@@ -2537,7 +2540,7 @@ export default {
       .png{
         width: 20px;
         height: 20px;
-        background: url('../../../../public/images/browse.png') no-repeat;
+        background: url('../../../assets/images/case/wighttime.png') no-repeat;
         background-size: 100%;
         margin-right: 9px;
       }
@@ -2563,7 +2566,7 @@ export default {
           // color: #fff;
         }
         // .png{
-        //   background: url('../../../assets/images/case/Frame(4).png') no-repeat;
+        //   background: url('../../../assets/images/case/wight.png') no-repeat;
         // }
       }
       .png{
@@ -2602,7 +2605,7 @@ export default {
       .png{
         width: 18px;
         height: 18px;
-        background: url('../../../../public/images/collect.png') no-repeat;
+        background: url('../../../assets/images/case/wight.png') no-repeat;
         background-size: 100%;
         margin-right: 9px;
       }