feat: 【我的作品】作品项hover效果修改；列表发生滚动后顶部减淡过渡。

src/views/material/works/index.vue

@@ -19,6 +19,7 @@
         </div>
       </div>
     </div>
+    <div class="mask" v-show="isShowMask"></div>
     <ul
       class="w-list"
       v-if="!(list.length === 0 && !hasMoreData)"
@@ -120,6 +121,8 @@ export default {
 
       isBackingTop: false,
       isShowBackTopBtn: false,
+
+      isShowMask: false,
     }
   },
   mounted(){
@@ -268,6 +271,12 @@ export default {
       requestAnimationFrame(fn)
     },
     onWorkListScroll(e) {
+      if (e.target.scrollTop >= 30) {
+        !this.isShowMask && (this.isShowMask = true)
+      } else {
+        this.isShowMask && (this.isShowMask = false)
+      }
+      
       if (e.target.scrollTop >= 600) {
         this.isShowBackTopBtn = true
       } else {
@@ -324,6 +333,15 @@ export default {
       }
     }
   }
+  .mask {
+    position: absolute;
+    width: 100%;
+    top: 210px;
+    height: 30px;
+    background: linear-gradient(rgb(239, 242, 244), rgba(255, 255, 255, 0));
+    z-index: 1;
+    pointer-events: none;
+  }
   .w-list{
     flex: 1 1 auto;
     overflow: auto;
@@ -336,7 +354,6 @@ export default {
     >li{
       width: calc((100% - @gap * 4) / 5);
       margin-bottom: @gap;
-      box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.16);
       background: #fff;
       position: relative;
       margin-right: @gap;
@@ -394,6 +411,8 @@ export default {
         }
       }
       &:hover{
+        box-shadow: 0px 2px 12px 0px rgba(50, 50, 51, 0.12);
+        transform: translateY(-6px);
         .li-hover{
           display: block;
         }
@@ -403,7 +422,7 @@ export default {
           }  
         }
       }
-     
+    
       .img{
         width: 100%;
         height: 240px;
@@ -420,7 +439,7 @@ export default {
           transition: all ease 0.3s;
         }   
       }
-         
+        
       .li-info{
         font-size: 14px;
         padding: 10px;