提交

src/assets/less/my.less

@@ -1,25 +1,60 @@
 .user-wrap {
   flex-direction: column;
   background-color: #f7f7f7;;
+  .my-collect{
+    width: 690px;
+    height: 150px;
+    background-color: #fff;
+    border-radius: 20px;
+    margin:200px auto 0;
+    padding: 30px;
+    justify-content: space-between;
+    align-items: center;
+    .collect-content{
+      flex-direction: column;
+      justify-content: space-between;
+      height: 100%;
+      flex-grow:1;
+      .book_coin{
+        color: #333;
+      }
+      .collect-info{
+        
+        .vip-card{
+          background-color:#FFF7ED;
+          color:#CD8119;
+          border:1px solid rgba(205,129,25,1);
+          border-radius:22px;
+          padding: 4px 15px;
+          font-size:26px;
+          margin-left: 15px;
+        }
+        color: #000;
+        flex-direction: row;
+        .title{
+          font-size: 30px;
+          font-weight: bold;
+        }
+
+      }
+    }
+    .pay-btn{
+      width: 150px;
+      height: 60px;
+      background-color: #3AACFF;
+      border-radius: 30px;
+      align-items: center;
+      text-align: center;
+      color: #fff;
+      font-size: 30px;
+    }
+  }
   .user-info__wrap {
-    position: relative;
     background-color: #3AACFF;
     padding: 40px 30px 80px 30px;
     align-items: center;
-    margin-bottom: 200px;
-    
-    .my-collect{
-      width: 690px;
-      height: 150px;
-      background: #FFFFFF;
-      border-radius: 20px;
-      position: absolute;
-      left:50%;
-      margin-left: -345px;
-      bottom: -50px;
-      
-    }
-
+    margin-bottom: 140px;
+    width: 100%;
     image {
       width: 124px;
       height: 124px;
@@ -50,15 +85,7 @@
       text-align: center;
       font-size: 24px;
     }
-    .vip-card{
-      background-color:#FFF7ED;
-      color:#CD8119;
-      border:2px solid rgba(205,129,25,1);
-      border-radius:22px;
-      padding: 4px 15px;
-      margin-top:8px;
-      font-size:26px;
-    }
+    
   }
   
 

src/views/My/index.ux

@@ -1,21 +1,25 @@
 <template>
   <div class="user-wrap">
-    <div class="user-info__wrap">
-      <image src="../../assets/imgs/user_login.png" if="{{haslogin && loginPhone}}"></image>
-      <image src="../../assets/imgs/user_logo.png" else ></image>
-      <div class="uesr-info__message">
-        <text class="user-name" if="{{haslogin && loginPhone}}">书友{{user.id}}</text>
-        <text class="un-Login" else>未登录</text>
-        <text>ID：{{ user.id }}</text>
-        <!-- <text class="vip-card" if="{{user.is_vip}}">免费阅读卡还剩{{ user.vip_days }}</text> -->
+    <stack>
+      <div class="user-info__wrap">
+        <image src="../../assets/imgs/user_login.png" if="{{haslogin && loginPhone}}"></image>
+        <image src="../../assets/imgs/user_logo.png" else ></image>
+        <div class="uesr-info__message">
+          <text class="user-name" if="{{haslogin && loginPhone}}">书友{{user.id}}</text>
+          <text class="un-Login" else>未登录</text>
+          <text>ID：{{ user.id }}</text>
+          <!-- <text class="vip-card" if="{{user.is_vip}}">免费阅读卡还剩{{ user.vip_days }}</text> -->
+        </div>
+        
       </div>
-       <div class="my-collect">
-          <div class="">
-
-          </div>
-    </div>
-    </div>
-
+        <div class="my-collect">
+            <div class="collect-content">
+              <text class="collect-info"><span class="title">我的账户</span><span class="vip-card" if="{{user.is_vip}}">免费阅读卡还剩{{ user.vip_days }}天</span></text>
+              <text class="book_coin">书币:{{ user.balance }}</text>
+            </div>
+            <text  class="pay-btn" @click="pageChange('Pay')">充值</text>
+        </div>
+    </stack>
    
 
     <div class="operator-item__wrap">
@@ -26,13 +30,13 @@
       >
         <div class="item-name">
           <image src="../../assets/imgs/task.png"></image>
-          <text class="orange">做任务，得奖励</text>
+          <text class="orange">每日做任务，小说免费读</text>
         </div>
         <div class="info-text">
           <image class="arrow" src="../../assets/imgs/arrow-right.png"></image>
         </div>
       </div>
-      <div class="operator-item">
+      <!-- <div class="operator-item">
         <div class="item-name">
           <image src="../../assets/imgs/declining.png"></image>
           <text
@@ -43,7 +47,7 @@
         <text class="operator-button" @click="pageChange('Pay')">
           充值
         </text>
-      </div>
+      </div> -->
       <div class="operator-item" @click="pageChange('Sign')">
         <div class="item-name">
           <image src="../../assets/imgs/sign.png"></image>