阅读卡

src/assets/less/my.less

@@ -4,6 +4,7 @@
   .user-info__wrap {
     background-color: #fff;
     padding: 40px 30px;
+    align-items: center;
 
     image {
       width: 124px;
@@ -19,7 +20,18 @@
       font-size: 30px;
     }
   }
-
+  .uesr-info__message{
+    flex-direction: column;
+    .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;
+    }
+  }
   
 
   .operator-item__wrap {

src/views/My/index.ux

@@ -2,7 +2,7 @@
   <div class="user-wrap">
     <div class="user-info__wrap">
       <image src="{{user.head_img}}"></image>
-      <text>ID：{{user.id}}</text>
+      <div class="uesr-info__message"><text>ID：{{user.id}}</text><text class="vip-card" if={{user.is_vip}}>免费阅读卡还剩{{user.vip_days}}天</text></div>
     </div>
     <div class="operator-item__wrap">
       <div class="operator-item">