优惠卷

pages/my/cardRoll.vue

@@ -1,7 +1,37 @@
 <template>
-	<view>
+	<view class="container">
+		<v-navigation-bar title-color="#333" background-color="#fff" title="卡卷包">
+		</v-navigation-bar>
+		<view class="tabbar">
+			<view v-for="item in tabList" :key="item.value" class="tabItem" :class="{active: activeKey === item.value}">
+				{{item.title}}
+				<view v-if="activeKey === item.value" class="activeLine">
 
 				</view>
+			</view>
+		</view>
+		<view class="body">
+			<view class="cardItem">
+				<view class="cardItemTop">
+					<image class="cardImg" src="" mode="aspectFill"></image>
+					<view class="cardInfo">
+						<view class="cardName">车辆保养卡</view>
+						<view class="cardEndDate">2024-09-20</view>
+					</view>
+					<view class="cardInfoRight">
+						<view class="cardNum">
+							<text class="cardNumValue">4</text>次
+						</view>
+						<view class="cardLabel">可用次数</view>
+					</view>
+				</view>
+				<view class="cardItemBottom">
+					<view class="useSm">使用说明</view>
+					<view class="useBtn">去使用</view>
+				</view>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
@@ -13,12 +43,152 @@
 		},
 		data() {
 			return {
-				
+				tabList: [{
+						value: 0,
+						title: '优惠卷'
+					},
+					{
+						value: 1,
+						title: '卡包'
+					}
+				],
+				activeKey: 0
 			};
 		}
 	}
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
+	.container {
+		height: 100%;
+		background-color: #F0F1F5;
 
+		display: flex;
+		flex-direction: column;
+
+		.body {
+			flex: 1;
+			height: 0;
+			box-sizing: border-box;
+			padding: 30rpx 0;
+			margin: 0 32rpx;
+
+			display: flex;
+			flex-direction: column;
+			row-gap: 20rpx;
+
+			overflow: auto;
+
+
+			.cardItem {
+				background: #FFFFFF;
+				border-radius: 16rpx 16rpx 16rpx 16rpx;
+				padding: 30rpx;
+			}
+
+			.cardItemTop {
+				display: flex;
+				align-items: center;
+				column-gap: 16rpx;
+				padding-bottom: 32rpx;
+				border-bottom: 1px solid #ddd;
+			}
+
+			.cardImg {
+				width: 136rpx;
+				height: 100rpx;
+				background-color: #efefef;
+			}
+
+			.cardInfo {
+				flex: 1;
+				width: 0;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+
+				padding: 6rpx 0;
+
+				.cardName {
+					font-size: 32rpx;
+					color: #333333;
+				}
+
+				.cardEndDate {
+					font-size: 24rpx;
+					color: #999999;
+				}
+			}
+
+			.cardInfoRight {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				font-size: 24rpx;
+				color: #FC4D4A;
+
+				.cardNumValue {
+					font-size: 64rpx;
+				}
+
+				.cardLabel {
+					color: #999999;
+				}
+			}
+		}
+
+		.cardItemBottom {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 30rpx 0 0;
+
+			.useSm {
+				font-size: 24rpx;
+				color: #999999;
+			}
+
+			.useBtn {
+				width: 144rpx;
+				height: 60rpx;
+				border-radius: 30rpx 30rpx 30rpx 30rpx;
+				border: 1rpx solid #FC4D4A;
+				font-size: 28rpx;
+				color: #FC4D4A;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+		}
+	}
+
+	.tabbar {
+		background-color: #fff;
+		display: flex;
+		align-items: center;
+
+		.tabItem {
+			flex: 1;
+			width: 0;
+
+			display: flex;
+			justify-content: center;
+			padding: 30rpx 0;
+
+			position: relative;
+		}
+
+		.activeLine {
+			width: 52rpx;
+			height: 8rpx;
+			background: #009EDA;
+			border-radius: 4rpx 4rpx 4rpx 4rpx;
+			
+			position: absolute;
+			left: 50%;
+			bottom: 2rpx;
+			transform: translate(-50%, 0);
+		}
+	}
 </style>