开发查看他人配音页面

pages/reading/index.js

@@ -65,7 +65,7 @@ Page({
       silderValue: 0
     },
     // 朗读赛的id
-    activityId: ''
+    activityId: '',
   },
   onLoad(options) {
     console.log(options);
@@ -116,7 +116,7 @@ Page({
                 success(res) {
                   wx.openSetting({
                     success(res) {
-                     
+
                     }
                   })
                 }

pages/reading/index.less

@@ -6,6 +6,39 @@
   flex-direction: column;
   background-color: white;
 
+  .moreWork {
+    width: 100%;
+    height: 100rpx;
+    padding: 0rpx 26rpx;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 32rpx;
+
+    .right {
+      position: relative;
+      height: 100rpx;
+      flex: 1;
+      display: flex;
+      align-items: center;
+      .moreImg {
+        width: 60rpx;
+        height: 60rpx;
+        right: 0px;
+        position: absolute;
+        z-index: 1;
+        border: 6rpx solid white;
+        border-radius: 50%;
+      }
+
+    }
+  }
+
+  .videoBox {
+    position: relative;
+  }
+
   .poster {
     top: 0px;
     left: 0px;

pages/reading/index.wxml

@@ -1,12 +1,22 @@
 <view class="readingBox">
-  <block wx:if="{{!videoInfo.userReadExtend||videoInfo.userReadExtend.resourcesType==0}}">
+  <!-- 查看他人配音 -->
+  <view class="moreWork">
+    <view class="left">查看他人配音</view>
+    <view class="right">
+      <block wx:for="{{4}}" wx:key="index">
+        <image class="moreImg" style="left: {{(index+1)*40}}rpx;" src="/static/more.png"></image>
+      </block>
+      <image src="/static/more.png" class="moreImg" />
+    </view>
+  </view>
+  <view class="videoBox" wx:if="{{!videoInfo.userReadExtend||videoInfo.userReadExtend.resourcesType==0}}">
     <image src="{{videoInfo.userRead.coverImg}}" class='poster' wx:if="{{!state&&!exampleState}}" bindtap="videoPlay" />
     <image src="/static/play-btn.png" bindtap="videoPlay" wx:if="{{!state&&!exampleState}}" class="playBtn" />
     <!-- 水印 -->
     <image src="{{videoInfo.readMaskTemplate.imgPath}}" class="watermark" />
     <video id="myVideo" src="{{videoPath}}" bindended='videoEnd' show-center-play-btn="{{readingReset}}"
       controls="{{!state&&!readingReset}}" muted="{{muted}}"></video>
-  </block>
+  </view>
   <view class="audio" bindtap='videoPlay' wx:else>
     <image src="{{videoInfo.userRead.coverImg}}" class="audioBg" mode="" />
     <view class="mask"></view>

pages/reading/index.wxss

@@ -6,6 +6,35 @@
   flex-direction: column;
   background-color: white;
 }
+.readingBox .moreWork {
+  width: 100%;
+  height: 100rpx;
+  padding: 0rpx 26rpx;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 32rpx;
+}
+.readingBox .moreWork .right {
+  position: relative;
+  height: 100rpx;
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+.readingBox .moreWork .right .moreImg {
+  width: 60rpx;
+  height: 60rpx;
+  right: 0px;
+  position: absolute;
+  z-index: 1;
+  border: 6rpx solid white;
+  border-radius: 50%;
+}
+.readingBox .videoBox {
+  position: relative;
+}
 .readingBox .poster {
   top: 0px;
   left: 0px;