开发

pages/reading/index.less

@@ -206,26 +206,39 @@
     background-color: white;
     z-index: 10;
 
-    .readingNow {
+    .workBox {
       position: absolute;
       top: -62rpx;
-      border-radius: 50%;
-      width: 114rpx;
-      height: 114rpx;
-      padding: 26rpx;
-      box-sizing: border-box;
-      box-shadow: #4EC4FF 0px 0rpx 14rpx;
-      background-color: #4EC4FF;
-    }
+      .vipLogo {
+        position: absolute;
+        right: 0px;
+        top: -10rpx;
+        z-index: 1;
+        padding: 4rpx 12rpx;
+        border-radius: 20rpx;
+        font-weight: bold;
+        font-size: 24rpx;
+        background-image: linear-gradient(116deg, #FFF3DF 0%, #FEC98D 95%);
+      }
+
+      .readingNow {
+        border-radius: 50%;
+        width: 114rpx;
+        height: 114rpx;
+        padding: 26rpx;
+        box-sizing: border-box;
+        box-shadow: #4EC4FF 0px 0rpx 14rpx;
+        background-color: #4EC4FF;
+      }
+
+      .playImg {
+        border-radius: 50%;
+        width: 114rpx;
+        height: 114rpx;
+        box-shadow: #4EC4FF 0px 0rpx 14rpx;
+        background-color: #4EC4FF;
+      }
 
-    .playImg {
-      position: absolute;
-      top: -62rpx;
-      border-radius: 50%;
-      width: 114rpx;
-      height: 114rpx;
-      box-shadow: #4EC4FF 0px 0rpx 14rpx;
-      background-color: #4EC4FF;
     }
 
     .text {
@@ -260,13 +273,14 @@
     width: 134rpx;
     height: 124rpx;
     z-index: 1;
-    left: -1rpx;
+    left: 0px;
     right: 0px;
     margin: auto;
     bottom: calc(56rpx + env(safe-area-inset-bottom));
     background-color: white;
     box-shadow: rgba(14, 30, 37, 0.12) 0px 2rpx 4rpx 0px, rgba(14, 30, 37, 0.32) 0px 2rpx 16rpx 0px;
     border-radius: 50%;
+
   }
 
   .countDownBox {

pages/reading/index.wxml

@@ -104,11 +104,15 @@
     </view>
   </view>
   <view class="controller">
-    <image wx:if="{{state}}" src="/static/readingNow.gif" class="readingNow" bindtap="setCountDown" />
     <!--     <image wx:else src="/static/work.png" class="playImg" bindtap="eeeeee" /> -->
-    <image wx:else src="/static/work.png" class="playImg" bindtap="setCountDown" />
+    <view class="workBox">
+      <view class="vipLogo">VIP</view>
+      <image wx:if="{{state}}" src="/static/readingNow.gif" class="readingNow" bindtap="setCountDown" />
+      <image wx:else src="/static/work.png" class="playImg" bindtap="setCountDown" />
+    </view>
     <view class="text">
-      {{state?'完成录制':readingReset?'点击重录':readingType=='public'||readingType=='readMatch'?'开始朗读':'开始挑战'}}</view>
+      {{state?'完成录制':readingReset?'点击重录':readingType=='public'||readingType=='readMatch'?'开始朗读':'开始挑战'}}
+    </view>
     <block wx:if="{{readingReset}}">
       <uploadFile activityId='{{activityId}}' readingType='{{readingType}}' class="btnPosition"
         wx:if="{{!uploadHide}}" />

pages/reading/index.wxss

@@ -179,9 +179,22 @@
   background-color: white;
   z-index: 10;
 }
-.readingBox .controller .readingNow {
+.readingBox .controller .workBox {
   position: absolute;
   top: -62rpx;
+}
+.readingBox .controller .workBox .vipLogo {
+  position: absolute;
+  right: 0px;
+  top: -10rpx;
+  z-index: 1;
+  padding: 4rpx 12rpx;
+  border-radius: 20rpx;
+  font-weight: bold;
+  font-size: 24rpx;
+  background-image: linear-gradient(116deg, #FFF3DF 0%, #FEC98D 95%);
+}
+.readingBox .controller .workBox .readingNow {
   border-radius: 50%;
   width: 114rpx;
   height: 114rpx;
@@ -190,9 +203,7 @@
   box-shadow: #4EC4FF 0px 0rpx 14rpx;
   background-color: #4EC4FF;
 }
-.readingBox .controller .playImg {
-  position: absolute;
-  top: -62rpx;
+.readingBox .controller .workBox .playImg {
   border-radius: 50%;
   width: 114rpx;
   height: 114rpx;
@@ -227,7 +238,7 @@
   width: 134rpx;
   height: 124rpx;
   z-index: 1;
-  left: -1rpx;
+  left: 0px;
   right: 0px;
   margin: auto;
   bottom: calc(56rpx + env(safe-area-inset-bottom));