Răsfoiți Sursa

我的盲豆界面新增“立即兑换”按钮

DELL 3 ani în urmă
părinte
comite
ed831c1343
1 a modificat fișierele cu 53 adăugiri și 8 ștergeri
  1. 53 8
      pages/bean/index.vue

+ 53 - 8
pages/bean/index.vue

@@ -3,8 +3,13 @@
 		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="我的盲豆"></u-navbar>
 		<view class="bean">
 			<view class="flex bean-balance">
-				<image src="../../static/icon/bean.png" mode="aspectFill"></image>
+				<view class="bean-balance-img">
+					<image src="../../static/icon/bean.png" mode="aspectFill"></image>
+				</view>
+				
 				<view class="bean-balance-num">{{ initData.coinNum }}</view>
+
+				<button class="bean-balance-btn" @click="toCore">立即兑换</button>
 			</view>
 			<view class="bean-list">
 				<view class="flex bean-list-item" v-for="(item, index) in list" :key="index">
@@ -78,9 +83,15 @@
 				this.total = 0
 				this.list = []
 				this.getList()
+			},
+			
+			toCore(){
+				uni.switchTab({
+					url:"/pages/core/index"
+				})
 			}
 		},
-		
+
 		onReachBottom() {
 			// 判断是否有数据
 			if (this.total > this.pageNum * 50) {
@@ -101,20 +112,53 @@
 
 		&-balance {
 			justify-content: flex-start;
-			height: 230rpx;
-			line-height: 230rpx;
-			border-radius: 10rpx;
 			background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/md-bkgd.png) center center;
-			font-size: 50rpx;
-			padding-left: 180rpx;
+			padding-left: 34rpx;
 			font-weight: bold;
 			margin-bottom: 20rpx;
+			color: #FFFFFF;
 
 			image {
 				width: 130rpx;
 				height: 130rpx;
 				margin-right: 16rpx;
 			}
+			
+			&-img{
+				background-color: rgba(255,255,255,0.7);
+				border-radius: 100rpx;
+				width: 65px;
+				height: 65px;
+				
+				image {
+					width: 57px;
+					height: 57px;
+					margin:7rpx 7rpx ;
+				}
+			}
+
+			&-num {
+				height: 230rpx;
+				line-height: 230rpx;
+				border-radius: 10rpx;
+				font-size: 72rpx;
+				margin-left: 25rpx;
+			}
+			
+			&-btn{
+				font-size: 28rpx;
+				height: 54rpx;
+				line-height: 50rpx;
+				background-color: rgba(255,255,255,0.4);
+				color: #FFFFFF;
+				border: 1rpx solid #FFFFFF;
+				margin-right: 40rpx;
+				border-radius: 27rpx;
+				
+			}
+			&-btn:hover{
+				opacity: 0.8;
+			}
 		}
 
 		&-list {
@@ -158,7 +202,8 @@
 			}
 		}
 	}
-	.empty{
+
+	.empty {
 		height: 60vh;
 	}
 </style>