no message

pages/home/home-index.vue

@@ -24,12 +24,14 @@
 		},
 		data() {
 			return {
+        listTab:1,
 				coinNum: '',
 				pledgeTotal: '',
 				revenueTotal: '',
 				price: '',
 				page: 1,
 				total: '',
+        pledgeNUm: '',
 				list: []
 			};
 		},
@@ -39,6 +41,11 @@
 			this.getDividendList()
 		},
 		methods: {
+      setListTab(listTab) {
+        if (this.listTab !== listTab) {
+          this.listTab = listTab
+        }
+      },
 			getDividendList() {
 				getDividendList({
 					'page': this.page
@@ -76,6 +83,13 @@
 				}, 100)
 
 			},
+      setMax(){
+        if(this.type===1){
+          this.formNUm=this.usdtNum
+        }else {
+          this.formNUm=this.iconNum
+        }
+      },
 		},
 	}
 </script>
@@ -113,7 +127,45 @@
 				</view>
 			</view>
 		</view>
-		<view class="bgc-f p-20 box-sizing-border b-rad-20">
+    <view class="list-tab">
+      <view class="tab-items">
+        <view class="tab-item" @click="setListTab(1)" :class="{'option-tab':listTab===1}">
+          质押
+        </view>
+        <view class="tab-item" @click="setListTab(2)" :class="{'option-tab':listTab===2}">
+          解压
+        </view>
+        <!--          <view class="tab-item" @click="setListTab(3)" :class="{'option-tab':listTab===3}">-->
+        <!--            {{ $t('index.index.code') }}-->
+        <!--          </view>-->
+      </view>
+      <view class="tab-item-bg"
+            :class="{'bg-location-1':listTab===1,'bg-location-2':listTab===2,'bg-location-3':listTab===3}"></view>
+      <view class="bgc-f p-40">
+        <view class="bgc-F6F7FA b-rad-20 mb-20 p-20 box-sizing-border mb-20" >
+          <view class="align-items-start flex-justify-space mb-20">
+            <view class="align-items-center">
+              <image
+                  class="t-img mr-8"
+                  :src="require('@/static/img/logo/logo.png')"
+              ></image>
+              <view class="fs-28">DAO</view>
+            </view>
+            <view class="max-box b-rad-20 fs-28" @click="setMax">
+              Max {{listTab===1 ?coinNum:pledgeTotal}}
+            </view>
+          </view>
+          <view>
+            <input v-model="pledgeNUm" :placeholder="'输入要'+(listTab===1 ?'质押':'解压')+'的DAO数量'" placeholder-class="fs-28"></input>
+          </view>
+        </view>
+        <view class="convent-but b-rad-20 text-align-center fs-28 fc-f" @click="">
+          确定
+        </view>
+      </view>
+
+    </view>
+		<view class="bgc-f p-20 box-sizing-border b-rad-20" v-if="listTab===2">
 			<view class="fs-28 pt-5 mb-8">
 				贡献收益记录
 			</view>
@@ -136,6 +188,29 @@
 				</view>
 			</view>
 		</view>
+    <view class="bgc-f p-20 box-sizing-border b-rad-20" v-else>
+      <view class="fs-28 pt-5 mb-8">
+        质押记录
+      </view>
+      <view v-if="list.length<=0" class="blank-box align-items-center flex-justify-center">
+        <blank :showBlank="list.length<=0?true:false" message="暂无数据"></blank>
+      </view>
+      <view class="bgc-F6F7FA" v-else>
+        <view class="item-box align-items-center flex-justify-space" v-for="item in list" :key="item.id">
+          <view>
+            <view class="mb-8 fs-28 fw-b">贡献数量</view>
+            <view class="fs-24">{{item.created_date}}</view>
+          </view>
+          <view class="align-items-center">
+            <view class="fs-24">奖励:</view>
+            <view class="fs-28 fc-ED301D">{{item.sorting_money}}</view>
+          </view>
+        </view>
+        <view class="h-50 text-align-center fs-28">
+          ~暂无记录
+        </view>
+      </view>
+    </view>
 	</view>
 </template>
 
@@ -165,4 +240,73 @@
 	.item-box:first-child {
 		border-top: none;
 	}
-</style>
+  .list-tab {
+    width: 100%;
+    height: 100%;
+    background: #eaf2ff;
+    border-radius: 10rpx;
+    cursor: pointer;
+    position: relative;
+    margin: 20rpx 0 ;
+
+    .tab-items {
+      z-index: 10;
+      display: flex;
+      justify-content: space-between;
+      border-radius: 10rpx;
+
+      .tab-item {
+        z-index: 10;
+        width: calc(100% / 2);
+        font-size: 13px;
+        color: #adbad0;
+        display: block;
+        height: 32px;
+        line-height: 32px;
+        text-align: center;
+      }
+
+      .option-tab {
+        color: #292929;
+      }
+    }
+
+    .tab-item-bg {
+      position: absolute;
+      border-radius: 10rpx 10rpx 0 0;
+      background: #fff;
+      transition: .5s ease;
+      height: 32px;
+      width: calc(100% / 2);
+      top: 0;
+    }
+
+    .bg-location-1 {
+      left: 0;
+      transition: .5s ease;
+    }
+
+    .bg-location-2 {
+      left: 50%;
+      transition: .5s ease;
+    }
+
+
+
+  }
+  .t-img{
+    width: 70rpx;
+    height: 60rpx;
+  }
+  .max-box{
+    color: #0d81cf;
+    border: 2rpx solid #0d81cf;
+    padding: 6rpx 20rpx;
+  }
+  .convent-but{
+    height: 80rpx;
+    background: #0d81cf;
+    color: #fff;
+    line-height: 80rpx;
+  }
+</style>