开发

pages/my/index.less

@@ -1,4 +1,5 @@
 .container {
+    position: relative;
     padding: 0rpx 20rpx 240rpx;
 
     .userBox {
@@ -193,101 +194,59 @@
         }
     }
 
+    .goodsList {
+        position: absolute;
+        margin-top: 40rpx;
+        width: 100%;
+        white-space: nowrap;
 
-
-    .payBox {
-        position: relative;
-        margin-top: 36rpx;
-        width: 710rpx;
-        height: 224rpx;
-        border-radius: 20rpx;
-        background: url(https://reader-wx.ai160.com/images/reader/v3/learn/longvip1.png);
-
-        background-size: cover;
-        -webkit-box-reflect: below 2rpx linear-gradient(to bottom, transparent 92%, rgba(0, 0, 0, 0.3));
-
-        .buyBtn {
-            width: 254rpx;
-            padding: 6rpx 0rpx;
+        .payBox {
+            position: relative;
+            margin-right: 22rpx;
+            width: 268rpx;
+            height: 268rpx;
+            background-size: cover;
             text-align: center;
-            position: absolute;
-            left: 90rpx;
-            top: 160rpx;
-            color: #000000;
-            font-size: 26rpx;
-            font-weight: bold;
-            letter-spacing: 2rpx;
-            background-image: linear-gradient(-75deg, #DFF2EE 5%, #D8E9FD 42%, #BDE6F8 73%, #BAE7F7 100%);
-            ;
-            border-radius: 10rpx;
-        }
+            display: inline-block;
+            border-radius: 20rpx;
+            overflow: hidden;
 
-        .validity {
-            position: absolute;
-            left: 56rpx;
-            top: 144rpx;
-            color: #FADEBA;
-            font-size: 32rpx;
+            .pay {
+                position: absolute;
+                bottom: 24rpx;
+                left: 50%;
+                transform: translateX(-50%);
+                padding: 6rpx 40rpx;
+                font-size: 26rpx;
+                font-weight: bold;
+                border-radius: 50rpx;
+            }
         }
-    }
 
-    .payBox2 {
-        background: url(https://reader-wx.ai160.com/images/reader/v3/learn/longvip2.png);
-        background-size: cover;
+        .pbbg1 {
+            background-image: url(http://reader-wx.ai160.com/images/reader/v3/12992x.png);
 
-        .buyBtn {
-            background-image: linear-gradient(-75deg, #F5CBAC 5%, #F8D6B7 42%, #FADEBA 73%, #F8F2C4 100%);
+            .pay {
+                background: linear-gradient(325deg, #FFBD96 0%, #FFF1E7 100%);
+            }
         }
-    }
-
-    .payBox3 {
-        background: url(https://reader-wx.ai160.com/images/reader/v3/learn/svip1.png);
-        background-size: cover;
-    }
-
-    .payBox4 {
-        background: url(https://reader-wx.ai160.com/images/reader/v3/learn/vip1.png);
-        background-size: cover;
-    }
 
-    .renewBox {
-        margin-top: 40rpx;
-        padding: 0rpx 10rpx;
+        .pbbg2 {
+            background-image: url(http://reader-wx.ai160.com/images/reader/v3/2992x.png);
 
-        .title {
-            font-size: 36rpx;
-            font-weight: bold;
+            .pay {
+                background: linear-gradient(285deg, #DFF2EE 0%, #D8E9FD 39%, #BDE6F8 72%, #BAE7F7 100%);
+            }
         }
 
-        .renew {
-            margin-top: 18rpx;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 19rpx 26rpx;
-            background-color: white;
-            border-radius: 50rpx;
-            font-size: 30rpx;
-
-            .left {
-                flex: 1;
-                margin-right: 40rpx;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                color: #666666;
-
-                .money {
-                    color: #FC614E;
-                }
-            }
+        .pbbg3 {
+            background-image: url(http://reader-wx.ai160.com/images/reader/v3/55152x.png);
 
             .pay {
-                padding: 6rpx 40rpx;
-                border-radius: 50rpx;
-                background-image: linear-gradient(129deg, #F9D9BF 0%, #F6D0B2 45%, #F3C0A3 70%, #F1B998 100%);
+                background: linear-gradient(325deg, #FFBD96 0%, #FFF1E7 100%);
             }
         }
+
     }
 
     .activationModal {

pages/my/index.wxml

@@ -62,7 +62,18 @@
         <view class="tips">请输入会员卡激活码</view>
         <view class="subBtn">激活</view>
     </view>
-    <view class="payBox {{vipTime=='1'?'payBox3':''}}" wx:if="{{!isPreferential||vipTime=='1'}}" bindtap="toBuy"
+    <scroll-view class="goodsList" scroll-x="true" enhanced show-scrollbar="{{false}}">
+        <view class="payBox pbbg2">
+            <view class="pay" bindtap="toBuy" data-id="{{products[0].id}}">立即开通</view>
+        </view>
+        <view class="payBox pbbg1">
+            <view class="pay" bindtap="toBuy" data-id="{{products[1].id}}">立即开通</view>
+        </view>
+        <view class="payBox pbbg3">
+            <view class="pay" bindtap="toBuy" data-id="{{products[1].id}}">立即开通</view>
+        </view>
+    </scroll-view>
+    <!--   <view class="payBox {{vipTime=='1'?'payBox3':''}}" wx:if="{{!isPreferential||vipTime=='1'}}" bindtap="toBuy"
         data-id="{{products[0].id}}" data-isclick="{{vipTime=='1'}}">
         <view class="buyBtn" wx:if="{{!isPreferential}}">
             立即开通
@@ -76,8 +87,8 @@
         <view class="buyBtn" wx:else>
             {{!vipTime&&!isPreferential?'立即开通':'已到期 请续费使用'}}
         </view>
-    </view>
-    <view class="renewBox" wx:if="{{isPreferential&&vipTime!='1'}}">
+    </view> -->
+    <!--  <view class="renewBox" wx:if="{{isPreferential&&vipTime!='1'}}">
         <view class="title">续费</view>
         <view class="renew">
             <view class="left">{{products[0].title}} <view class="money">+{{products[0].price/100}}元</view>
@@ -89,7 +100,7 @@
             </view>
             <view class="pay" bindtap="toBuy" data-id="{{products[1].id}}">续费</view>
         </view>
-    </view>
+    </view> -->
     <!-- 弹窗 -->
     <view class="activationModal" wx:if="{{activationModal}}">
         <view class="box zoomIn">

pages/my/index.wxss

@@ -1,4 +1,5 @@
 .container {
+  position: relative;
   padding: 0rpx 20rpx 240rpx;
 }
 .container .userBox {
@@ -163,85 +164,50 @@
   font-size: 25rpx;
   background-color: #FC614E;
 }
-.container .payBox {
+.container .goodsList {
+  position: absolute;
+  margin-top: 40rpx;
+  width: 100%;
+  white-space: nowrap;
+}
+.container .goodsList .payBox {
   position: relative;
-  margin-top: 36rpx;
-  width: 710rpx;
-  height: 224rpx;
-  border-radius: 20rpx;
-  background: url(https://reader-wx.ai160.com/images/reader/v3/learn/longvip1.png);
+  margin-right: 22rpx;
+  width: 268rpx;
+  height: 268rpx;
   background-size: cover;
-  -webkit-box-reflect: below 2rpx linear-gradient(to bottom, transparent 92%, rgba(0, 0, 0, 0.3));
-}
-.container .payBox .buyBtn {
-  width: 254rpx;
-  padding: 6rpx 0rpx;
   text-align: center;
+  display: inline-block;
+  border-radius: 20rpx;
+  overflow: hidden;
+}
+.container .goodsList .payBox .pay {
   position: absolute;
-  left: 90rpx;
-  top: 160rpx;
-  color: #000000;
+  bottom: 24rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 6rpx 40rpx;
   font-size: 26rpx;
   font-weight: bold;
-  letter-spacing: 2rpx;
-  background-image: linear-gradient(-75deg, #DFF2EE 5%, #D8E9FD 42%, #BDE6F8 73%, #BAE7F7 100%);
-  border-radius: 10rpx;
-}
-.container .payBox .validity {
-  position: absolute;
-  left: 56rpx;
-  top: 144rpx;
-  color: #FADEBA;
-  font-size: 32rpx;
-}
-.container .payBox2 {
-  background: url(https://reader-wx.ai160.com/images/reader/v3/learn/longvip2.png);
-  background-size: cover;
-}
-.container .payBox2 .buyBtn {
-  background-image: linear-gradient(-75deg, #F5CBAC 5%, #F8D6B7 42%, #FADEBA 73%, #F8F2C4 100%);
-}
-.container .payBox3 {
-  background: url(https://reader-wx.ai160.com/images/reader/v3/learn/svip1.png);
-  background-size: cover;
-}
-.container .payBox4 {
-  background: url(https://reader-wx.ai160.com/images/reader/v3/learn/vip1.png);
-  background-size: cover;
+  border-radius: 50rpx;
 }
-.container .renewBox {
-  margin-top: 40rpx;
-  padding: 0rpx 10rpx;
+.container .goodsList .pbbg1 {
+  background-image: url(http://reader-wx.ai160.com/images/reader/v3/12992x.png);
 }
-.container .renewBox .title {
-  font-size: 36rpx;
-  font-weight: bold;
+.container .goodsList .pbbg1 .pay {
+  background: linear-gradient(325deg, #FFBD96 0%, #FFF1E7 100%);
 }
-.container .renewBox .renew {
-  margin-top: 18rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 19rpx 26rpx;
-  background-color: white;
-  border-radius: 50rpx;
-  font-size: 30rpx;
+.container .goodsList .pbbg2 {
+  background-image: url(http://reader-wx.ai160.com/images/reader/v3/2992x.png);
 }
-.container .renewBox .renew .left {
-  flex: 1;
-  margin-right: 40rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: #666666;
+.container .goodsList .pbbg2 .pay {
+  background: linear-gradient(285deg, #DFF2EE 0%, #D8E9FD 39%, #BDE6F8 72%, #BAE7F7 100%);
 }
-.container .renewBox .renew .left .money {
-  color: #FC614E;
+.container .goodsList .pbbg3 {
+  background-image: url(http://reader-wx.ai160.com/images/reader/v3/55152x.png);
 }
-.container .renewBox .renew .pay {
-  padding: 6rpx 40rpx;
-  border-radius: 50rpx;
-  background-image: linear-gradient(129deg, #F9D9BF 0%, #F6D0B2 45%, #F3C0A3 70%, #F1B998 100%);
+.container .goodsList .pbbg3 .pay {
+  background: linear-gradient(325deg, #FFBD96 0%, #FFF1E7 100%);
 }
 .container .activationModal {
   position: fixed;