我的盲票修改

packagePrize/ticket/index.vue

@@ -1,39 +1,43 @@
 <template>
 	<view>
 		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="我的盲票"></u-navbar>
-		<!-- 优惠券筛选 -->
-		<view class="prize-state">
-			<u-tabs @change="changeTab" :scrollable="false" :list="stateArr" lineWidth="60" lineHeight="1"
-				lineColor="#D70909" :activeStyle="{
-									color: '#D70909',
-									transform: 'scale(1)'
+		<!-- 状态 -->
+		<view class="state">
+			<u-tabs @change="changeTab" :scrollable="false" :list="stateArr" lineWidth="60" lineHeight="3"
+				lineColor="#F9822C" :activeStyle="{
+									color: '#F9822C',
+									transform: 'scale(1.1)',
+									width: '100px'
 								}" :inactiveStyle="{
-									color: '#333',
-									transform: 'scale(1)'
-								}" itemStyle="padding-left: 25px; padding-right: 25px; height: 44px;">
+									color: '#999',
+									transform: 'scale(1)',
+									width: '100px'
+								}" itemStyle="padding-left: 25px; padding-right: 25px; height: 44px; text-align: center;">
 			</u-tabs>
 		</view>
-		<!-- 兑奖列表 -->
-		<view class="prize-coupon">
-			<view class="prize-coupon-list">
-				<view class="flex prize-coupon-list-item" v-for="(item, index) in list" :key="index">
-					<image :src="item.picUrl" mode="aspectFill"></image>
-					<view class="flex info">
-						<view class="flex desc">
-							<view class="title">{{ item.title }}</view>
-							<view class="txt">面值：{{ item.facePrice / 100 }}元</view>
-							<view class="txt">序列号：{{ item.serialNo }}</view>
-							<view class="txt ells-one" v-if="item.prizeInfo">奖品：{{ item.prizeInfo }}</view>
-						</view>
-						<view class="flex btn">
-							<view class="action" @click="toChoice(item)" v-if="item.status == '2'">立即兑奖</view>
-						</view>
+		<!-- 列表 -->
+		<view class="list">
+			<view class="list-item" v-for="(item, index) in list" :key="index">
+				<image :src="item.picUrl" mode="aspectFit"></image>
+				<view class="list-item-content flex">
+					<view class="top">
+						<view class="top-title">{{ item.title }}</view>
+						<view class="top-num">序列号：{{ item.serialNo }}</view>
+						<view class="top-price" v-if="item.status != '2'">面值：￥{{ $numberFormat(item.facePrice) }}</view>
+					</view>
+					<view class="bottom flex" v-if="item.status == '2'">
+						<view class="bottom-price">面值：<text>￥{{ $numberFormat(item.facePrice) }}</text></view>
+						<view class="bottom-btn" @click="toChoice(item)">立即兑奖</view>
+					</view>
+					<view class="bottom" v-else>
+						<view class="bottom-price ells-one">奖品：<text>{{ item.prizeInfo || '-' }}</text></view>
 					</view>
 				</view>
 			</view>
-			<view class="flex empty" v-if="!list.length">
-				<u-empty text="数据为空" mode="order" />
-			</view>
+		</view>
+		<view class="flex empty" v-if="!list.length">
+			<u-empty text="数据为空" mode="order" />
+		</view>
 		</view>
 	</view>
 </template>
@@ -148,80 +152,90 @@
 </script>
 
 <style lang="scss" scoped>
-	.prize-state {
+	// 状态
+	.state {
+		display: flex;
 		position: fixed;
 		background-color: #FFFFFF;
 		width: 100%;
-		padding-bottom: 16rpx;
 		z-index: 10;
 		box-shadow: 0 5rpx 5rpx #ececec;
 	}
-
-	.prize-coupon {
-		margin-top: 104rpx;
-		padding: 40rpx 30rpx 140rpx;
-
-		&-list {
-
-			&-item {
+	
+	// 列表
+	.list {
+		padding: 120rpx 0 100rpx;
+		margin: 0 34rpx 0;
+		
+		&-item {
+			display: flex;
+			background: #FFFFFF;
+			border-radius: 11px;
+			padding: 34rpx;
+			margin-bottom: 34rpx;
+			
+			image {
+				width: 200rpx;
+				height: 270rpx;
+				border-radius: 22rpx;
+				margin-right: 15rpx;
+			}
+			
+			&-content {
+				flex: 1;
+				flex-direction: column;
 				justify-content: space-between;
-				background-color: #FFFFFF;
-				padding: 40rpx 20rpx;
-				border-radius: 10rpx;
-				margin-bottom: 24rpx;
-
-				image {
-					width: 124rpx;
-					height: 174rpx;
-				}
-
-				.info {
-					position: relative;
-					justify-content: space-between;
-					flex: 1;
-				}
-
-				.desc {
-					height: 174rpx;
+				padding: 16rpx 0;
+				
+				.top {
+					width: 100%;
+					display: flex;
 					flex-direction: column;
-					justify-content: space-between;
-					align-items: flex-start;
-					padding-left: 20rpx;
-				}
-
-				.txt {
-					font-size: 24rpx;
-				}
-
-				.btn {
-					flex-direction: column;
-				}
-
-				.amt {
-					font-size: 48rpx;
-					font-weight: bold;
-					line-height: 72rpx;
-				}
-
-				text {
-					font-size: 24rpx;
+					
+					&-title {
+						font-size: 36rpx;
+						line-height: 36rpx;
+						font-weight: bold;
+						margin-bottom: 46rpx;
+					}
+					
+					&-num {
+						font-size: 26rpx;
+						line-height: 26rpx;
+					}
+					
+					&-price {
+						margin-top: 30rpx;
+						font-size: 26rpx;
+						line-height: 26rpx;
+					}
 				}
-
-				.action {
-					width: 124rpx;
-					height: 40rpx;
-					line-height: 40rpx;
-					border-radius: 20rpx;
-					background-color: rgba(215, 9, 9, 100);
-					color: rgba(255, 255, 255, 100);
-					font-size: 24rpx;
-					text-align: center
+				
+				.bottom {
+					width: 100%;
+					justify-content: space-between;
+					
+					&-price {
+						font-size: 26rpx;
+						line-height: 26rpx;
+						
+						text {
+							color: #F9822C ;
+						}
+					}
+					
+					&-btn {
+						width: 220rpx;
+						height: 72rpx;
+						line-height: 72rpx;
+						text-align: center;
+						background: #F9822C;
+						border-radius: 36rpx;
+						color: #FFFFFF;
+						font-size: 30rpx;
+					}
 				}
 			}
-
-			&-item:last-child {
-				margin-bottom: 0;
-			}
 		}
 	}