no message

pages/index/model/user-content.vue

@@ -24,7 +24,32 @@
         </view>
       </view>
       <view class="gift-list">
-        <view class="gift-item"></view>
+        <view class="gift-item" v-for="giftItem in giftList">
+          <image  class="gift-item-img"  :class="{'gift-item-img-gray':giftItem.num<=0}"  mode="aspectFill" :src="giftItem.url" ></image>
+          <view class="gift-num sys-color-white" v-if="giftItem.num>0">
+            <text>X</text>
+            <text>{{giftItem.num}}</text>
+          </view>
+          <view class="gift-but sys-background-yellow sys-color-black sys-weight-500" v-else>点亮</view>
+        </view>
+      </view>
+      <view class="dynamic-list">
+        <view class="dynamic-item">
+          <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>
+
+        </view>
       </view>
     </view>
 
@@ -37,7 +62,16 @@ export default {
   components: {},
   props: {},
   data() {
-    return {}
+    return {
+      giftList:[
+        {'num':1,'url':'/static/img/temporary/gift1.png'},
+        {'num':0,'url':'/static/img/temporary/gift2.png'},
+        {'num':0,'url':'/static/img/temporary/gift3.png'},
+        {'num':1,'url':'/static/img/temporary/gift1.png'},
+        {'num':0,'url':'/static/img/temporary/gift2.png'},
+        {'num':0,'url':'/static/img/temporary/gift3.png'},
+      ]
+    }
   },
   watch: {},
   mounted() {
@@ -130,10 +164,83 @@ export default {
         }
 
       }
+    }
+    .gift-list{
+      margin-top: 32rpx;
+      display: flex;
+      justify-content: flex-start;
+      overflow-y: scroll;
+      .gift-item{
+        border-radius: 16rpx;
+        background: #3D3D3D;
+        width: 198rpx;
+        height: 232rpx;
+        margin-right: 14rpx;
+        .gift-but{
+          margin-left: 43rpx;
+          width: 112rpx;
+          height: 44rpx;
+          line-height: 44rpx;
+          font-size:28rpx ;
+          border-radius: 200rpx;
+          text-align: center;
+        }
+        .gift-num{
+          text-align: center;
+          font-size: 20rpx;
+          height: 28rpx;
+          line-height: 28rpx;
+          text:first-child{
+            font-size: 16rpx;
+          }
+          text:last-child{
+            font-size: 30rpx;
+          }
+        }
+        .gift-item-img{
+          margin: 32rpx 49rpx 28rpx 49rpx;
+          width: 100rpx;
+          height: 100rpx;
+        }
+        .gift-item-img-gray{
+          filter: grayscale(100%);
+        }
+      }
+      .gift-item:last-child{
+        margin-right: 0;
+      }
 
     }
 
   }
+  .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;
+          }
+        }
+      }
+
+    }
+  }
 }
 
 </style>