开发新的购买会员部分

pages/my/index.less

@@ -179,7 +179,7 @@
   }
 
   .activation {
-    margin-top: 20rpx;
+    margin-top: 30rpx;
     padding: 13rpx 40rpx;
     display: flex;
     align-items: center;
@@ -202,81 +202,39 @@
   }
 
   .payBox {
-    margin-top: 20rpx;
-    padding: 13rpx 30rpx;
-    background-color: white;
+    position: relative;
+    margin-top: 36rpx;
+    width: 710rpx;
+    height: 184rpx;
     border-radius: 20rpx;
-
-    .title {
-      font-size: 30rpx;
-      font-weight: bold;
-      color: #000;
-    }
-
-    .pay {
-      margin: 20rpx 0rpx;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 0rpx 30rpx;
-      border-radius: 22rpx;
-      overflow: hidden;
-
-      .payLeft {
-        .pLTitle {
-          font-size: 36rpx;
-          font-weight: bold;
-        }
-
-        .pLcontent {
-          font-size: 22rpx;
-        }
-      }
-
-      .payRight {
-        margin: 24rpx 0rpx;
-        padding: 12rpx 28rpx;
-        border-radius: 40rpx;
-        font-size: 24rpx;
-        font-weight: bold;
-      }
-    }
-
-    .vipPay {
-      background: url('http://reader-wx.ai160.com/images/reader/v3/year.png') no-repeat;
-      background-size: cover;
-
-      .vipTitle {
-        color: #FFE6B9;
-      }
-
-      .vipContent {
-        margin-top: 4rpx;
-        color: #FFE6B9;
-      }
-
-      .vipBtn {
-        background-image: linear-gradient(to bottom, #F4E7A8, #F9EDCF);
-        color: #211501;
+    background: url(http://reader-wx.ai160.com/images/reader/v3/learn/vip_center.png);
+    background-size: cover;
+
+    .copywriting {
+      position: absolute;
+      bottom: 70rpx;
+      left: 30rpx;
+      color: #FBF3CD;
+      font-size: 26rpx;
+      letter-spacing: 2rpx;
+
+      text {
+        margin: 0 6rpx;
       }
     }
 
-    .buyPay {
-      background: url('http://reader-wx.ai160.com/images/reader/v3/10yuan.png') no-repeat;
-      background-size: cover;
-
-      .payLeft {
-        color: #7D320A;
-        font-size: 36rpx;
-        font-weight: bold;
-      }
-
-      .buyBtn {
-        border: 1rpx solid white;
-        color: white;
-        background-color: #7D320A;
-      }
+    .goPay {
+      position: absolute;
+      top: 30rpx;
+      right: 28rpx;
+      border-radius: 50rpx;
+      display: inline-block;
+      padding: 14rpx 36rpx;
+      color: #292020;
+      font-weight: bold;
+      letter-spacing: 2rpx;
+      background-image: linear-gradient(116deg, #FFF3DF 0%, #FEC98D 95%);
+      font-size: 30rpx;
     }
   }
-
 }

pages/my/index.wxml

@@ -67,7 +67,7 @@
     <view class="subBtn">激活</view>
   </view>
   <!-- 支付 -->
-  <view class="payBox" wx:if="{{!isIos}}">
+  <!--   <view class="payBox">
     <view class="title">
       付费购
     </view>
@@ -92,5 +92,11 @@
         立即购买
       </view>
     </view>
+  </view> -->
+  <view class="payBox">
+    <view class="copywriting">开通<text>SVIP</text>/<text>VIP</text> 会员权益</view>
+    <view class="goPay">
+      立即开通
+    </view>
   </view>
 </view>

pages/my/index.wxss

@@ -149,7 +149,7 @@
   height: 94rpx;
 }
 .container .activation {
-  margin-top: 20rpx;
+  margin-top: 30rpx;
   padding: 13rpx 40rpx;
   display: flex;
   align-items: center;
@@ -169,65 +169,35 @@
   background-color: #FC614E;
 }
 .container .payBox {
-  margin-top: 20rpx;
-  padding: 13rpx 30rpx;
-  background-color: white;
+  position: relative;
+  margin-top: 36rpx;
+  width: 710rpx;
+  height: 184rpx;
   border-radius: 20rpx;
-}
-.container .payBox .title {
-  font-size: 30rpx;
-  font-weight: bold;
-  color: #000;
-}
-.container .payBox .pay {
-  margin: 20rpx 0rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0rpx 30rpx;
-  border-radius: 22rpx;
-  overflow: hidden;
-}
-.container .payBox .pay .payLeft .pLTitle {
-  font-size: 36rpx;
-  font-weight: bold;
-}
-.container .payBox .pay .payLeft .pLcontent {
-  font-size: 22rpx;
-}
-.container .payBox .pay .payRight {
-  margin: 24rpx 0rpx;
-  padding: 12rpx 28rpx;
-  border-radius: 40rpx;
-  font-size: 24rpx;
-  font-weight: bold;
-}
-.container .payBox .vipPay {
-  background: url('http://reader-wx.ai160.com/images/reader/v3/year.png') no-repeat;
+  background: url(http://reader-wx.ai160.com/images/reader/v3/learn/vip_center.png);
   background-size: cover;
 }
-.container .payBox .vipPay .vipTitle {
-  color: #FFE6B9;
-}
-.container .payBox .vipPay .vipContent {
-  margin-top: 4rpx;
-  color: #FFE6B9;
-}
-.container .payBox .vipPay .vipBtn {
-  background-image: linear-gradient(to bottom, #F4E7A8, #F9EDCF);
-  color: #211501;
+.container .payBox .copywriting {
+  position: absolute;
+  bottom: 70rpx;
+  left: 30rpx;
+  color: #FBF3CD;
+  font-size: 26rpx;
+  letter-spacing: 2rpx;
 }
-.container .payBox .buyPay {
-  background: url('http://reader-wx.ai160.com/images/reader/v3/10yuan.png') no-repeat;
-  background-size: cover;
+.container .payBox .copywriting text {
+  margin: 0 6rpx;
 }
-.container .payBox .buyPay .payLeft {
-  color: #7D320A;
-  font-size: 36rpx;
+.container .payBox .goPay {
+  position: absolute;
+  top: 30rpx;
+  right: 28rpx;
+  border-radius: 50rpx;
+  display: inline-block;
+  padding: 14rpx 36rpx;
+  color: #292020;
   font-weight: bold;
-}
-.container .payBox .buyPay .buyBtn {
-  border: 1rpx solid white;
-  color: white;
-  background-color: #7D320A;
+  letter-spacing: 2rpx;
+  background-image: linear-gradient(116deg, #FFF3DF 0%, #FEC98D 95%);
+  font-size: 30rpx;
 }