修改样式与联调

pages/like/index.less

@@ -15,6 +15,7 @@
     .body {
       flex: 1;
       margin-left: 24rpx;
+
       .nickName {
         font-size: 30rpx;
       }
@@ -30,5 +31,38 @@
       height: 74rpx;
       border-radius: 10rpx;
     }
+
+    .audioCover {
+      position: relative;
+      width: 230rpx;
+      height: 128rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 8rpx;
+      overflow: hidden;
+      background-size: cover;
+      background-position: center;
+
+      .audioPlayBg {
+        width: 100rpx;
+        height: 100rpx;
+      }
+
+      .audioPlayZhen {
+        position: absolute;
+        right: 52rpx;
+        top: 20rpx;
+        width: 24rpx;
+        height: 30rpx;
+      }
+
+      .cover {
+        position: absolute;
+        width: 84rpx;
+        height: 84rpx;
+        border-radius: 50%;
+      }
+    }
   }
 }

pages/like/index.wxml

@@ -8,5 +8,10 @@
       </view>
     </view>
     <image src="{{item.userRead.coverImg}}" class="cover" wx:if="{{item.userRead.resourcesType==0}}" />
+    <view class="audioCover" style="background-image: url({{item.backgroundVirtualImg}});" wx:else>
+      <image src="/static/audioBg.png" class="audioPlayBg" />
+      <image src="/static/zhen.png" class="audioPlayZhen" />
+      <image src="{{item.userRead.coverImg}}" class="cover" />
+    </view>
   </view>
 </view>

pages/like/index.wxss

@@ -26,3 +26,32 @@
   height: 74rpx;
   border-radius: 10rpx;
 }
+.like .notes .audioCover {
+  position: relative;
+  width: 230rpx;
+  height: 128rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8rpx;
+  overflow: hidden;
+  background-size: cover;
+  background-position: center;
+}
+.like .notes .audioCover .audioPlayBg {
+  width: 100rpx;
+  height: 100rpx;
+}
+.like .notes .audioCover .audioPlayZhen {
+  position: absolute;
+  right: 52rpx;
+  top: 20rpx;
+  width: 24rpx;
+  height: 30rpx;
+}
+.like .notes .audioCover .cover {
+  position: absolute;
+  width: 84rpx;
+  height: 84rpx;
+  border-radius: 50%;
+}

pages/reading/index.less

@@ -82,7 +82,7 @@
     width: 100%;
     height: 422rpx;
 
-    .mask {
+  /*   .mask {
       position: absolute;
       width: 100%;
       height: 100%;
@@ -90,12 +90,12 @@
       top: 0px;
       background-color: rgba(0, 0, 0, 0.5);
     }
-
-    .audioBg {
+ */
+   /*  .audioBg {
       width: 100%;
       height: 100%;
       filter: blur(12px);
-    }
+    } */
 
     .audioPlay {
       position: absolute;
@@ -104,7 +104,6 @@
       right: 0;
       bottom: 0;
       margin: auto;
-      border-radius: 20rpx;
       background-size: cover;
       background-color: rgba(0, 0, 0, 0.3);
       display: flex;

pages/reading/index.wxml

@@ -18,8 +18,8 @@
       custom-cache="{{false}}" controls="{{!state&&!readingReset}}" muted="{{muted}}"></video>
   </view>
   <view class="audio" bindtap='videoPlay' wx:else>
-    <image src="{{videoInfo.userRead.coverImg}}" class="audioBg" mode="" />
-    <view class="mask"></view>
+    <!-- <image src="{{videoInfo.userRead.coverImg}}" class="audioBg" /> -->
+    <!-- <view class="mask"></view> -->
     <view class="audioPlay" style="background-image: url({{videoInfo.userReadExtend.backgroundVirtualImg}});">
       <image src="/static/audioBg.png" class="audioPlayBg {{state?'circle':''}}" />
       <image src="/static/zhen.png" class="audioPlayZhen" />

pages/reading/index.wxss

@@ -71,19 +71,20 @@
   position: relative;
   width: 100%;
   height: 422rpx;
-}
-.readingBox .audio .mask {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0px;
-  top: 0px;
-  background-color: rgba(0, 0, 0, 0.5);
-}
-.readingBox .audio .audioBg {
-  width: 100%;
-  height: 100%;
-  filter: blur(12px);
+  /*   .mask {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0px;
+      top: 0px;
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+ */
+  /*  .audioBg {
+      width: 100%;
+      height: 100%;
+      filter: blur(12px);
+    } */
 }
 .readingBox .audio .audioPlay {
   position: absolute;
@@ -92,7 +93,6 @@
   right: 0;
   bottom: 0;
   margin: auto;
-  border-radius: 20rpx;
   background-size: cover;
   background-color: rgba(0, 0, 0, 0.3);
   display: flex;