开发音频展示样式

components/videoPreview/index.less

@@ -143,11 +143,14 @@
 
     .audioBox {
       position: relative;
-      width: 100%;
       height: 208rpx;
       overflow: hidden;
+      background-color: rebeccapurple;
+      display: flex;
+      align-items: center;
 
       .audioBg {
+        position: absolute;
         width: 100%;
         height: 100%;
         filter: blur(12px);
@@ -163,16 +166,10 @@
       }
 
       .audioPlay {
-        position: absolute;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        margin: auto;
+        position: relative;
+        margin: 20rpx 10rpx 20rpx 120rpx;
         width: 220rpx;
         height: 174rpx;
-        border-radius: 20rpx;
-        background-color: rgba(0, 0, 0, 0.3);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -196,11 +193,20 @@
           height: 130rpx;
           border-radius: 50%;
         }
-    
+
         .circle {
           animation: identifier 12s infinite linear;
         }
       }
+
+      .titleBox {
+        position: relative;
+        width: 256rpx;
+        font-size: 30rpx;
+        line-height: 54rpx;
+        color: white;
+        text-align: center;
+      }
     }
   }
 
@@ -250,5 +256,4 @@
       margin-left: 12rpx;
     }
   }
-}
-
+}

components/videoPreview/index.wxml

@@ -25,7 +25,8 @@
         </view>
       </view>
     </view>
-    <view class="wH-right" wx:elif="{{videoType=='public'&&selfUid!=videoInfoCopy.user.uid||videoType=='excellent'&&selfUid!=videoInfoCopy.user.uid}}">
+    <view class="wH-right"
+      wx:elif="{{videoType=='public'&&selfUid!=videoInfoCopy.user.uid||videoType=='excellent'&&selfUid!=videoInfoCopy.user.uid}}">
       <view class="follow {{videoInfoCopy.isFans?'isFans':''}}" bindtap="setFans">
         <image src="{{videoInfoCopy.isFans?'/static/follow_2.png':'/static/follow_1.png'}}" class="character" mode="" />
         <text class="text">{{videoInfoCopy.isFans?'已关注':'关注'}}</text>
@@ -67,6 +68,11 @@
         <image src="{{videoInfoCopy.user.avatar}}" class="cover {{videoInfoCopy.userRead.id==currentId?'circle':''}}"
           mode="" />
       </view>
+      <view class="titleBox">
+        <view class="textOver">
+          在组件在视图层
+        </view>
+      </view>
     </view>
   </view>
   <view class="workFooter" wx:if="{{videoInfo.userRead.status!='CHECK'}}">

components/videoPreview/index.wxss

@@ -123,11 +123,14 @@
 }
 .work .workContent .audioBox {
   position: relative;
-  width: 100%;
   height: 208rpx;
   overflow: hidden;
+  background-color: rebeccapurple;
+  display: flex;
+  align-items: center;
 }
 .work .workContent .audioBox .audioBg {
+  position: absolute;
   width: 100%;
   height: 100%;
   filter: blur(12px);
@@ -141,16 +144,10 @@
   background-color: rgba(0, 0, 0, 0.2);
 }
 .work .workContent .audioBox .audioPlay {
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
+  position: relative;
+  margin: 20rpx 10rpx 20rpx 120rpx;
   width: 220rpx;
   height: 174rpx;
-  border-radius: 20rpx;
-  background-color: rgba(0, 0, 0, 0.3);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -175,6 +172,14 @@
 .work .workContent .audioBox .audioPlay .circle {
   animation: identifier 12s infinite linear;
 }
+.work .workContent .audioBox .titleBox {
+  position: relative;
+  width: 256rpx;
+  font-size: 30rpx;
+  line-height: 54rpx;
+  color: white;
+  text-align: center;
+}
 .work .workFooter {
   margin-top: 15rpx;
   display: flex;