h5-tiyu/pages/mine/card.vue

<template>
	<view class="page">
		<u-tabs :font-size='28' :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="list" v-if="current==0">
			<view class="box u-flex">
				<image src="/static/logo.png" style="width:120rpx;height: 160rpx;" mode=""></image>
				<view class="" style="margin-left: 62rpx;width: 300rpx;">
					<view class="title">
						高手控局:中国历史中的 殿堂级处世智慧电
					</view>
					<view class="time">
						有效期至:2023/12/23 23:59
					</view>
				</view>
				<view class="button" style="margin-left: 36rpx;">
					立即使用
				</view>
			</view>
			<view class="box u-flex">
				<image src="/static/logo.png" style="width:120rpx;height: 160rpx;" mode=""></image>
				<view class="" style="margin-left: 62rpx;width: 300rpx;">
					<view class="title">
						高手控局:中国历史中的 殿堂级处世智慧电
					</view>
					<view class="time">
						有效期至:2023/12/23 23:59
					</view>
				</view>
				<view class="">
					<image src="../../static/images/past.png" style="width: 200rpx;height: 200rpx;" mode=""></image>
				</view>
			</view>
		</view>
		<view class="list" v-if="current==1">
			<view class="box u-flex">
				<image src="/static/logo.png" style="width:120rpx;height: 160rpx;" mode=""></image>
				<view class="" style="margin-left: 62rpx;width: 300rpx;">
					<view class="title">
						高手控局:中国历史中的 殿堂级处世智慧电
					</view>
					<view class="time">
						有效期至:2023/12/23 23:59
					</view>
				</view>
				<view class="button" style="margin-left: 36rpx;">
					立即使用
				</view>
			</view>
			<view class="box u-flex">
				<image src="/static/logo.png" style="width:120rpx;height: 160rpx;" mode=""></image>
				<view class="" style="margin-left: 62rpx;width: 300rpx;">
					<view class="title">
						高手控局:中国历史中的 殿堂级处世智慧电
					</view>
					<view class="time">
						有效期至:2023/12/23 23:59
					</view>
				</view>
				<view class="">
					<image src="../../static/images/past.png" style="width: 200rpx;height: 200rpx;" mode=""></image>
				</view>
			</view>
		</view>
		<view class="list" v-if="current==2">
			<view class="box u-flex">
				<image src="/static/logo.png" style="width:120rpx;height: 160rpx;" mode=""></image>
				<view class="" style="margin-left: 62rpx;width: 300rpx;">
					<view class="title">
						高手控局:中国历史中的 殿堂级处世智慧电
					</view>
					<view class="time">
						有效期至:2023/12/23 23:59
					</view>
				</view>
				<view class="button" style="margin-left: 36rpx;">
					立即使用
				</view>
			</view>
			<view class="box u-flex">
				<image src="/static/logo.png" style="width:120rpx;height: 160rpx;" mode=""></image>
				<view class="" style="margin-left: 62rpx;width: 300rpx;">
					<view class="title">
						高手控局:中国历史中的 殿堂级处世智慧电
					</view>
					<view class="time">
						有效期至:2023/12/23 23:59
					</view>
				</view>
				<view class="">
					<image src="../../static/images/past.png" style="width: 200rpx;height: 200rpx;" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '生效中'
				}, {
					name: '已过期',
				}],
				current: 0
			};
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss">
	.title {
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.time {
		font-size: 20rpx;
		font-family: SFPro, SFPro;
		font-weight: 400;
		color: #222222;
		margin-top: 40rpx;
		opacity: 0.6;
	}

	.button {
		width: 144rpx;
		height: 64rpx;
		background: #06A971;
		border-radius: 8rpx;
		line-height: 64rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	::v-deep .u-tab-bar {
		background-color: #06A971 !important;
	}

	::v-deep .u-tab-item {
		color: #222 !important
	}

	.box {
		margin-top: 20rpx;
		padding: 40rpx 20rpx 40rpx 28rpx;
		width: 694rpx;
		height: 240rpx;
		background: #FFFFFF;
		background: url('../../static/images/module.png') no-repeat;
		background-size: cover;
	}

	.list {
		padding: 0 28rpx;
	}

	.page {
		background: #F6F6F6;
		min-height: 100vh;

	}
</style>