no message

manifest.json

@@ -2,7 +2,7 @@
     "name" : "LCOCO",
     "appid" : "__UNI__9075D31",
     "description" : "",
-    "versionName" : "1.0.19",
+    "versionName" : "1.0.20",
     "versionCode" : 101,
     "transformPx" : false,
     /* 5+App特有相关 */

pages/common/dynamic/dynamic-items.vue

@@ -0,0 +1,287 @@
+<template>
+  <view class="dynamic-item-box">
+    <view class="dynamic-item" v-show="showAdd">
+      <view class="dynamic-title">
+        <view class="dynamic-title-left">
+          <text class="dynamic-title-text  sys-weight-600" :style="{'color':textColor}">今天</text>
+        </view>
+      </view>
+      <view class="dynamic-data" :style="{'border-left':' 1rpx solid '+divisionColor}">
+          <view class="data-issue">
+            <view class="issue-left">
+              <image  class="left-one"   mode="aspectFill" src="/static/img/temporary/2.png" ></image>
+              <view class="left-two">
+                <view class="two-title sys-color-black sys-weight-600">发布动态</view>
+                <view class="two-text sys-color-gray-9">认识更多朋友</view>
+              </view>
+            </view>
+            <view class="issue-right sys-color-black sys-weight-600">去发布</view>
+          </view>
+      </view>
+    </view>
+    <view class="dynamic-item" v-for="(item,itemIndex) in list">
+      <view class="dynamic-title">
+        <view class="dynamic-title-left">
+          <text class="dynamic-title-text  sys-weight-600" :style="{'color':textColor}">12</text>
+          <text class="dynamic-title-text  sys-weight-400" :style="{'color':textColor}">04月</text>
+          <text class="dynamic-title-text  sys-weight-400" :style="{'color':textColor}">2020年</text>
+        </view>
+        <view class="dynamic-title-right">
+          <image  class="dynamic-right-img"   mode="aspectFill" src="/static/img/index/dynamic-all.png" ></image>
+        </view>
+      </view>
+      <view class="dynamic-data" :style="{'border-left':' 1rpx solid '+divisionColor}">
+        <view class="data-text">
+          <text class="text-item" :style="{'color':textColor}">{{item.text}}</text>
+        </view>
+
+        <view class="data-img" v-if="item.img.length>0">
+          <view class="one-img" v-if="item.img.length===1">
+            <img-one :file-list="item.img"></img-one>
+          </view>
+          <view class="two-img" v-else-if="item.img.length===2 || item.img.length===4">
+            <img-two :file-list="item.img"></img-two>
+          </view>
+          <view class="three-img" v-else>
+            <img-three :file-list="item.img"></img-three>
+          </view>
+
+        </view>
+        <view class="data-tag-list" 	>
+          <view class="data-tag" v-for="tag in item.tag" :style="{'background':tagBg}">
+<!--            <image  class="data-tag-img"   mode="aspectFill" :src="tag.icon" ></image>-->
+            <view class="data-tag-icon">
+              <text class="iconfont icon-dingweixiao" v-if="tag.icon==='1'"  :style="{'color':tagColor}"> &#xe87e;</text>
+              <text class="iconfont icon-canyuhuati" v-else  :style="{'color':tagColor}"> &#xe61e;</text>
+            </view>
+            <view class="data-tag-text  sys-weight-400"  :style="{'color':tagColor}">{{tag.text}}</view>
+          </view>
+        </view>
+        <view class="data-operation">
+          <view class="operation-item" @click="setLike(itemIndex)">
+<!--            <image  class="operation-img"   mode="aspectFill" :src="'/static/img/index/like-'+(item.isLike?'ok':'no')+'.png'" ></image>-->
+            <view class="operation-icon">
+              <text class="iconfont icon-dianzan" v-if="!item.isLike"  :style="{'color':operateColor}"> &#xe8ad;</text>
+              <text class="iconfont icon-dianzan1" v-else  :style="{'color':'#ED301D'}"> &#xe8c3;</text>
+            </view>
+            <view class="operation-text sys-weight-400" :style="{'color':operateColor}">{{item.likeNum>0?item.likeNum:'点赞'}}</view>
+          </view>
+          <view class="operation-item">
+<!--            <image  class="operation-img"   mode="aspectFill" src="/static/img/index/evaluate.png" ></image>-->
+            <view class="operation-icon"><text class="iconfont icon-pinglun"  :style="{'color':operateColor}">&#xe891;</text></view>
+            <view class="operation-text sys-weight-400" :style="{'color':operateColor}">{{item.evaluateNum>0?item.evaluateNum:'评论'}}</view>
+          </view>
+        </view>
+
+      </view>
+    </view>
+
+  </view>
+</template>
+
+<script>
+import ImgOne from "@/pages/common/img/img-one";
+import ImgTwo from "@/pages/common/img/img-two";
+import ImgThree from "@/pages/common/img/img-three";
+export default {
+  name: "dynamic-items",
+  components: {ImgThree, ImgTwo, ImgOne},
+  props: {
+      textColor:{
+        type:String,
+        default:'#fff'
+      },
+    tagColor:{
+      type:String,
+      default:'#282828'
+    },
+    tagBg:{
+      type:String,
+      default:'rgba(255,255,255,0.4)'
+    },
+    operateColor:{
+      type:String,
+      default:'#fff'
+    },
+    divisionColor:{
+      type:String,
+      default:'rgba(255,255,255,0.2)'
+    },
+    showAdd:{
+      type:Boolean,
+      default:false
+    },
+  },
+  data() {
+    return {
+      list:[
+        {'text':'我是阳光大男孩我','img':['/static/img/temporary/1.png'],'tag':[{'text':'南亭新都会商场','icon':'1'},{'text':'你好认识一哈','icon':'2'}],'likeNum':1,'evaluateNum':0,'isLike':true},
+        {'text':'我是阳光大男孩我','img':['/static/img/temporary/1.png','/static/img/temporary/2.png','/static/img/temporary/3.png','/static/img/temporary/2.png'],'tag':[{'text':'南亭新都会商场','icon':'1'},{'text':'你好认识一哈','icon':'2'}],'likeNum':0,'evaluateNum':20,'isLike':false},
+        {'text':'我是阳光大男孩我','img':[
+            '/static/img/temporary/1.png',
+            '/static/img/temporary/3.png',
+            '/static/img/temporary/2.png',
+            '/static/img/temporary/1.png',
+            '/static/img/temporary/3.png',
+            '/static/img/temporary/2.png',
+          ],'tag':[{'text':'南亭新都会商场','icon':'1'},{'text':'你好认识一哈','icon':'2'}],'likeNum':10,'evaluateNum':20,'isLike':true},
+      ]
+    }
+  },
+  watch: {},
+  mounted() {
+
+  },
+  methods: {
+    setLike(index){
+      this.list[index].isLike=!this.list[index].isLike
+      if(this.list[index].isLike){
+        ++this.list[index].likeNum
+      }else {
+        --this.list[index].likeNum
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "/static/css/en-iconfont.css";
+.dynamic-item-box{
+  .dynamic-item{
+    margin-top: 16rpx;
+    .dynamic-title{
+      display: flex;
+      justify-content: space-between;
+      .dynamic-title-left{
+        display:table-cell;
+        vertical-align:bottom;
+        .dynamic-title-text{
+          font-size: 28rpx;
+        }
+        .dynamic-title-text:first-child{
+          font-size: 48rpx;
+          margin-right: 12rpx;
+        }
+      }
+      .dynamic-title-right{
+        .dynamic-right-img{
+          width: 6rpx;
+          height: 26rpx;
+        }
+      }
+    }
+    .dynamic-data{
+      margin-left: 26rpx;
+      border-left: 1rpx solid rgba(255,255,255,0.2);
+      padding: 4rpx 0 44rpx 40rpx;
+      .data-issue{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 92rpx;
+        .issue-left{
+          display: flex;
+          justify-content: flex-start;
+          .left-one{
+            border-radius: 8rpx;
+            height: 92rpx;
+            width: 92rpx;
+            margin-right: 22rpx;
+          }
+          .left-two{
+            .two-title{
+              font-size: 32rpx;
+            }
+            .two-text{
+              font-size: 28rpx;
+            }
+          }
+        }
+        .issue-right{
+          border: 2rpx solid #E0E0E0;
+          border-radius: 200rpx;
+          padding: 8rpx 24rpx;
+          font-size: 28rpx;
+        }
+      }
+      .data-text{
+        .text-item{
+          font-size: 28rpx;
+        }
+
+      }
+      .data-img{
+        margin-top: 30rpx;
+      }
+      .data-tag-list{
+        margin-top: 28rpx;
+        display: flex;
+        flex-wrap: wrap;
+        .data-tag{
+          margin-top: 26rpx;
+          margin-right: 20rpx;
+          border-radius: 200rpx;
+          background: rgba(255,255,255,0.4);
+          display: flex;
+          justify-content: center;
+          padding: 4rpx 12rpx;
+          .data-tag-img{
+            width: 32rpx;
+            height: 32rpx;
+            margin-right: 8rpx;
+          }
+          .data-tag-icon{
+            width: 32rpx;
+            height: 32rpx;
+            margin-right: 8rpx;
+            text-align: center;
+            line-height: 32rpx;
+            text{
+              font-size: 28rpx;
+              line-height: 32rpx;
+            }
+          }
+          .data-tag-text{
+            font-size: 24rpx;
+            height: 32rpx;
+            line-height: 32rpx;
+          }
+        }
+      }
+      .data-operation{
+        margin-top: 40rpx;
+        display: flex;
+        justify-content: flex-start;
+        .operation-item{
+          width: 200rpx;
+          display: flex;
+          justify-content: flex-start;
+          .operation-img{
+            width: 40rpx;
+            height: 40rpx;
+            margin-right: 8rpx;
+          }
+          .operation-icon{
+            width: 40rpx;
+            height: 40rpx;
+            margin-right: 8rpx;
+            text{
+              font-size: 40rpx;
+              line-height: 40rpx;
+            }
+          }
+          .operation-text{
+            height: 40rpx;
+            line-height: 41rpx;
+            font-size: 26rpx;
+
+          }
+
+        }
+      }
+
+    }
+  }
+}
+</style>

pages/index/model/user-content.vue

@@ -37,65 +37,21 @@
     </view>
 
     <view class="dynamic-list">
-      <view class="dynamic-item" v-for="(item,itemIndex) in list">
-        <view class="dynamic-title">
-          <view class="dynamic-title-left">
-            <text class="dynamic-title-text sys-color-white sys-weight-400">12</text>
-            <text class="dynamic-title-text sys-color-white sys-weight-400">04月</text>
-            <text class="dynamic-title-text sys-color-white sys-weight-400">2020年</text>
-          </view>
-          <view class="dynamic-title-right">
-            <image  class="dynamic-right-img"   mode="aspectFill" src="/static/img/index/dynamic-all.png" ></image>
-          </view>
-        </view>
-        <view class="dynamic-data">
-          <view class="data-text">
-            <text class="text-item sys-color-white ">{{item.text}}</text>
-          </view>
-          <view class="data-img" v-if="item.img.length>0">
-            <view class="one-img" v-if="item.img.length===1">
-              <img-one :file-list="item.img"></img-one>
-            </view>
-            <view class="two-img" v-else-if="item.img.length===2 || item.img.length===4">
-              <img-two :file-list="item.img"></img-two>
-            </view>
-            <view class="three-img" v-else>
-              <img-three :file-list="item.img"></img-three>
-            </view>
-
-          </view>
-          <view class="data-tag-list" 	>
-            <view class="data-tag" v-for="tag in item.tag">
-              <image  class="data-tag-img"   mode="aspectFill" :src="tag.icon" ></image>
-              <view class="data-tag-text sys-color-black-2 sys-weight-400">{{tag.text}}</view>
-            </view>
-          </view>
-          <view class="data-operation">
-            <view class="operation-item" @click="setLike(itemIndex)">
-              <image  class="operation-img"   mode="aspectFill" :src="'/static/img/index/like-'+(item.isLike?'ok':'no')+'.png'" ></image>
-              <view class="operation-text sys-color-white sys-weight-400">{{item.likeNum>0?item.likeNum:'点赞'}}</view>
-            </view>
-            <view class="operation-item">
-              <image  class="operation-img"   mode="aspectFill" src="/static/img/index/evaluate.png" ></image>
-              <view class="operation-text sys-color-white sys-weight-400">{{item.evaluateNum>0?item.evaluateNum:'评论'}}</view>
-            </view>
-          </view>
-
-        </view>
+      <dynamic-item ></dynamic-item>
 
-      </view>
     </view>
 
   </view>
 </template>
 
 <script>
-import ImgOne from "@/pages/index/model/img-one";
-import ImgTwo from "@/pages/index/model/img-two";
-import ImgThree from "@/pages/index/model/img-three";
+import ImgOne from "@/pages/common/img/img-one";
+import ImgTwo from "@/pages/common/img/img-two";
+import ImgThree from "@/pages/common/img/img-three";
+import DynamicItem from "@/pages/common/dynamic/dynamic-items";
 export default {
   name: "user-content",
-  components: {ImgThree, ImgTwo, ImgOne},
+  components: {DynamicItem, ImgThree, ImgTwo, ImgOne},
   props: {},
   data() {
     return {
@@ -107,18 +63,7 @@ export default {
         {'num':0,'url':'/static/img/temporary/gift2.png'},
         {'num':0,'url':'/static/img/temporary/gift3.png'},
       ],
-      list:[
-        {'text':'我是阳光大男孩我','img':['/static/img/temporary/1.png'],'tag':[{'text':'南亭新都会商场','icon':'/static/img/index/address.png'},{'text':'你好认识一哈','icon':'/static/img/index/know.png'}],'likeNum':1,'evaluateNum':0,'isLike':true},
-        {'text':'我是阳光大男孩我','img':['/static/img/temporary/1.png','/static/img/temporary/2.png','/static/img/temporary/3.png','/static/img/temporary/2.png'],'tag':[{'text':'南亭新都会商场','icon':'/static/img/index/address.png'},{'text':'你好认识一哈','icon':'/static/img/index/know.png'}],'likeNum':0,'evaluateNum':20,'isLike':false},
-        {'text':'我是阳光大男孩我','img':[
-            '/static/img/temporary/1.png',
-            '/static/img/temporary/3.png',
-            '/static/img/temporary/2.png',
-            '/static/img/temporary/1.png',
-            '/static/img/temporary/3.png',
-            '/static/img/temporary/2.png',
-          ],'tag':[{'text':'南亭新都会商场','icon':'/static/img/index/address.png'},{'text':'你好认识一哈','icon':'/static/img/index/know.png'}],'likeNum':10,'evaluateNum':20,'isLike':true},
-      ]
+
     }
   },
   watch: {},
@@ -130,14 +75,7 @@ export default {
       // console.log('滑动事件阻止触发')
       return false
     },
-    setLike(index){
-      this.list[index].isLike=!this.list[index].isLike
-      if(this.list[index].isLike){
-        ++this.list[index].likeNum
-      }else {
-        --this.list[index].likeNum
-      }
-    }
+
   }
 }
 </script>
@@ -277,92 +215,7 @@ export default {
   }
   .dynamic-list{
     margin-top: 44rpx;
-    .dynamic-item{
-      margin-top: 16rpx;
-      .dynamic-title{
-        display: flex;
-        justify-content: space-between;
-        .dynamic-title-left{
-          display:table-cell;
-          vertical-align:bottom;
-          .dynamic-title-text{
-            font-size: 28rpx;
-          }
-          .dynamic-title-text:first-child{
-            font-size: 48rpx;
-            margin-right: 12rpx;
-          }
-        }
-        .dynamic-title-right{
-          .dynamic-right-img{
-            width: 6rpx;
-            height: 26rpx;
-          }
-        }
-      }
-      .dynamic-data{
-        margin-left: 26rpx;
-        border-left: 1rpx solid rgba(255,255,255,0.2);
-        padding: 4rpx 0 44rpx 40rpx;
-        .data-text{
-          .text-item{
-            font-size: 28rpx;
-          }
 
-        }
-        .data-img{
-          margin-top: 30rpx;
-        }
-        .data-tag-list{
-          margin-top: 28rpx;
-          display: flex;
-          flex-wrap: wrap;
-          .data-tag{
-            margin-top: 26rpx;
-            margin-right: 20rpx;
-            border-radius: 200rpx;
-            background: rgba(255,255,255,0.4);
-            display: flex;
-            justify-content: center;
-            padding: 4rpx 12rpx;
-            .data-tag-img{
-              width: 32rpx;
-              height: 32rpx;
-              margin-right: 8rpx;
-            }
-            .data-tag-text{
-              font-size: 24rpx;
-              height: 32rpx;
-              line-height: 32rpx;
-            }
-          }
-        }
-        .data-operation{
-          margin-top: 40rpx;
-          display: flex;
-          justify-content: flex-start;
-          .operation-item{
-            width: 200rpx;
-            display: flex;
-            justify-content: flex-start;
-            .operation-img{
-              width: 40rpx;
-              height: 40rpx;
-              margin-right: 8rpx;
-            }
-            .operation-text{
-              height: 40rpx;
-              line-height: 41rpx;
-              font-size: 26rpx;
-
-            }
-
-          }
-        }
-
-      }
-
-    }
   }
 }
 

pages/my/index.vue

@@ -2,68 +2,108 @@
   <view class="my-box">
     <my-nav @navHeight="setNavHeight"></my-nav>
     <view class="my-data" :style="{'height':'calc(100% - '+navHeight+'rpx)'}">
-      <scroll-view :scroll-y="true" :style="{'height':'calc(100% - '+(navHeight+50)+'rpx)'}">
-        <view class="my-content">
-          <view class="content-basic">
-            <view class="basic-left">
-              <image class="basic-img" src="/static/img/temporary/4.png" mode="aspectFill"></image>
-            </view>
-            <view class="basic-right">
-              <view class="basic-name">
-                <view class="name-text sys-color-black-0 sys-weight-600">出江湖救急</view>
-                <view class="name-vip">
-                  <image class="name-img" src="/static/img/my/svip.png" mode="heightFix"></image>
-                </view>
-                <view class="name-ok name-no">
-                  <image class="name-img" src="/static/img/my/open.png" mode="heightFix"></image>
-                </view>
-              </view>
-              <view class="basic-signature sys-color-gray-9">
-                都能拿到你
+      <scroll-view :scroll-y="true" :style="{'height':'calc(100% - '+navHeight+'rpx)'}">
+        <view class="my-item">
+          <view class="my-content">
+            <view class="content-basic">
+              <view class="basic-left">
+                <image class="basic-img" src="/static/img/temporary/4.png" mode="aspectFill"></image>
               </view>
-              <view class="basic-wallet">
-                <view class="wallet-item">
-                  <image class="wallet-img" src="/static/img/my/wallet.png" mode="aspectFill"></image>
-                  <view class="wallet-text sys-color-gray-6">钱包</view>
+              <view class="basic-right">
+                <view class="basic-name">
+                  <view class="name-text sys-color-black-0 sys-weight-600">出江湖救急</view>
+                  <view class="name-vip">
+                    <image class="name-img" src="/static/img/my/svip.png" mode="heightFix"></image>
+                  </view>
+                  <view class="name-ok name-no">
+                    <image class="name-img" src="/static/img/my/open.png" mode="heightFix"></image>
+                  </view>
                 </view>
-                <view class="wallet-item">
-                  <view class="wallet-text sys-color-gray-6">波点兑换</view>
-                  <image class="exchange-img" src="/static/img/my/right.png" mode="aspectFill"></image>
+                <view class="basic-signature sys-color-gray-9">
+                  都能拿到你
+                </view>
+                <view class="basic-wallet">
+                  <view class="wallet-item">
+                    <image class="wallet-img" src="/static/img/my/wallet.png" mode="aspectFill"></image>
+                    <view class="wallet-text sys-color-gray-6">钱包</view>
+                  </view>
+                  <view class="wallet-item">
+                    <view class="wallet-text sys-color-gray-6">波点兑换</view>
+                    <image class="exchange-img" src="/static/img/my/right.png" mode="aspectFill"></image>
+                  </view>
                 </view>
               </view>
             </view>
-          </view>
-          <view class="content-statistics">
-            <view class="statistics-item">
-              <view class="statistics-num sys-color-black sys-weight-600">431
-                <view class="statistics-dot sys-color-white">1</view>
+            <view class="content-statistics">
+              <view class="statistics-item">
+                <view class="statistics-num sys-color-black sys-weight-600">431
+                  <view class="statistics-dot sys-color-white">1</view>
+                </view>
+                <view class="statistics-text sys-color-gray-9 sys-weight-400">礼物墙</view>
               </view>
-              <view class="statistics-text sys-color-gray-9 sys-weight-400">礼物墙</view>
-            </view>
-            <view class="statistics-item">
-              <view class="statistics-num sys-color-black sys-weight-600">431
-                <view class="statistics-dot sys-color-white">1</view>
+              <view class="statistics-item">
+                <view class="statistics-num sys-color-black sys-weight-600">431
+                  <view class="statistics-dot sys-color-white">1</view>
+                </view>
+                <view class="statistics-text sys-color-gray-9 sys-weight-400">心动足迹</view>
               </view>
-              <view class="statistics-text sys-color-gray-9 sys-weight-400">心动足迹</view>
-            </view>
-            <view class="statistics-item">
-              <view class="statistics-num sys-color-black sys-weight-600">431
-                <view class="statistics-dot sys-color-white">1</view>
+              <view class="statistics-item">
+                <view class="statistics-num sys-color-black sys-weight-600">431
+                  <view class="statistics-dot sys-color-white">1</view>
+                </view>
+                <view class="statistics-text sys-color-gray-9 sys-weight-400">访客</view>
+
               </view>
-              <view class="statistics-text sys-color-gray-9 sys-weight-400">访客</view>
+              <view class="statistics-item">
+                <view class="statistics-num sys-color-black sys-weight-600">
+                  165
+                  <view class="statistics-dot sys-color-white">..</view>
+                </view>
+                <view class="statistics-text sys-color-gray-9 sys-weight-400">谁喜欢我</view>
 
-            </view>
-            <view class="statistics-item">
-              <view class="statistics-num sys-color-black sys-weight-600">
-                165
-                <view class="statistics-dot sys-color-white">..</view>
               </view>
-              <view class="statistics-text sys-color-gray-9 sys-weight-400">谁喜欢我</view>
 
             </view>
+          </view>
+          <view class="vip-content">
+            <view class="vip-data">
+              <view class="vip-left">
+                <view class="vip-left-one">
+                  <image class="vip-left-img" src="/static/img/my/crown.png" mode="aspectFill"></image>
+                  <view class="vip-left-vip sys-weight-600">VIP</view>
+                  <view class="vip-left-text sys-weight-500">首季195元</view>
+                </view>
+                <view class="vip-left-two">
+                  22.7元/月解锁9项高级特权
+                </view>
 
+              </view>
+              <view class="vip-right">
+                立即开通
+              </view>
+            </view>
+            <view class="vip-discounts sys-color-white sys-weight-600">
+              立减99元
+            </view>
+          </view>
+          <view class="subscription sys-color-gray-9">
+            自动订阅，随时取消;付款费用将记入itunes账户;到期前24小时会自动扣费并续订
+            服务，购买后可随时前往iTunse商店设置页面取消订 阅。点击购买即表示同意《用
+            户服务协议》《连续包月协议》 《用户隐私政策》
+          </view>
+          <view class="my-tag">
+            <view class="tag-item" @click="setTagNum(0)" :class="{'tag-pitch':tagNum===0}">动态</view>
+            <view class="tag-item" @click="setTagNum(1)" :class="{'tag-pitch':tagNum===1}">赞过</view>
+            <view class="tag-item" @click="setTagNum(2)" :class="{'tag-pitch':tagNum===2}">活动</view>
           </view>
         </view>
+        <view class="halving-line"></view>
+        <view class="my-item">
+          <view class="my-dynamic" v-if="tagNum===0">
+            <dynamic-items text-color="#141414" operate-color="#999999" tag-color="#999999" tag-bg="#F2F2F2" division-color="#F2F2F2" :show-add="true"></dynamic-items>
+          </view>
+        </view>
+
       </scroll-view>
     </view>
 
@@ -72,16 +112,23 @@
 
 <script>
 import MyNav from "@/pages/my/model/my-nav";
+import DynamicItems from "@/pages/common/dynamic/dynamic-items";
 export default {
-  components: {MyNav},
+  components: {DynamicItems, MyNav},
   data() {
     return {
-      navHeight:0
+      navHeight:0,
+      tagNum:0
     }
   },
   methods: {
     setNavHeight(navHeight){
       this.navHeight=navHeight
+    },
+    setTagNum(tagNum){
+      if(this.tagNum!==tagNum){
+        this.tagNum=tagNum
+      }
     }
   }
 }
@@ -97,7 +144,14 @@ export default {
   .my-data{
     background-color: #fff;
     border-radius: 30rpx 30rpx 0 0;
-    padding: 40rpx 32rpx 10rpx 32rpx;
+    padding: 40rpx 0 10rpx 0;
+    .my-item{
+      padding: 0 32rpx ;
+    }
+    .halving-line{
+      background-color: #F2F2F2;
+      height: 1rpx;
+    }
     .my-content{
       .content-basic{
         display: flex;
@@ -213,6 +267,101 @@ export default {
         }
       }
     }
+    .vip-content{
+      margin-top: 66rpx;
+      border-radius: 20rpx;
+      background: linear-gradient(137deg, #FED18E 0%, #FFDFA4 100%);
+      //height: 118rpx;
+      padding: 34rpx 30rpx 40rpx 28rpx;
+      position: relative;
+      .vip-data{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .vip-left{
+          .vip-left-one{
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            height: 64rpx;
+            .vip-left-img{
+              width: 64rpx;
+              height: 64rpx;
+              margin-right: 10rpx;
+            }
+            .vip-left-vip{
+              font-size: 44rpx;
+              background: linear-gradient(355deg, #6A4420 0%, #94673D 100%);
+              -webkit-text-fill-color: transparent;
+              -webkit-background-clip: text;
+              margin-right: 12rpx;
+              height: 64rpx;
+              line-height: 64rpx;
+            }
+            .vip-left-text{
+              font-size: 36rpx;
+              height: 64rpx;
+              line-height: 64rpx;
+              color: #6A4420;
+            }
+          }
+          .vip-left-two{
+            margin-top: 10rpx;
+            height: 44rpx;
+            line-height: 44rpx;
+            font-size: 28rpx;
+            color: #925C29;
+            font-weight: 400;
+          }
+        }
+        .vip-right{
+          border-radius: 200rpx;
+          padding: 10rpx 24rpx;
+          background: #6A4420;
+          height: 40rpx;
+          line-height: 40rpx;
+          font-size: 28rpx;
+          font-weight: 600;
+          color: #FFDDA1;
+        }
+      }
+      .vip-discounts{
+        background: linear-gradient(270deg, #FE2315 0%, #FE6915 100%);
+        border-radius: 0 20rpx 0 20rpx;
+        height: 40rpx;
+        line-height: 40rpx;
+        padding: 0 16rpx;
+        font-size: 24rpx;
+        position:absolute;
+        top: 0;
+        right: 0;
+      }
+
+
+    }
+    .subscription{
+      margin-top: 36rpx;
+      font-size: 18rpx;
+    }
+    .my-tag{
+      margin-top: 36rpx;
+      padding-bottom: 30rpx;
+      display: flex;
+      justify-content: space-around;
+      .tag-item{
+        height: 44rpx;
+        line-height: 44rpx;
+        font-size: 32rpx;
+        color: #999;
+        font-weight: 500;
+        transition: .5s ease;
+      }
+      .tag-pitch{
+        color: #141414;
+        font-weight: 600;
+        transition: .5s ease;
+      }
+    }
 
   }