WashingCar-frontend-Ver3.0/pages/secondaryCard/secondaryCard.vue

<template>
	<navigationStyle :titles="titles" :bgcolor="bgcolor" :color="color"></navigationStyle>
	<view class="secondaryCard">
		<view class="tops">

		</view>
		<view class="secondBright-header">
			<view class="header-left" :class="{headerActive:headerindex==1}" @click="remo">
				可以次卡
			</view>
			<view class="header-right" :class="{headerActive:headerindex==2}" @click="add">
				失效次卡
			</view>
		</view>
		<scroll-view class="secondaryCard-auto" scroll-y="true">
			<view class="card" v-for="(item,index) in demo" :key="index">
			<img class="card-l" src="" alt="" />
				<view class="card-c">
					<view class="t">
						<text class="w"><text class="blacks">4</text>次卡</text><text class="reds">剩余次数<text class="color-r">3</text>次</text>
					</view>
					<view class="c">
						每次上线尽可使用<text class="color-r">20</text>分钟
					</view>
					<view class="d">
						有效期至 2024-05-06
					</view>
				</view>
				<view class="card-r" v-if="headerindex===1">
					使用
				</view>
				<view class="card-r1" v-if="headerindex===2">
					
				</view>
			</view>
			</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const headerindex = ref(1)
	const titles = ref('洗车次卡')
	const bgcolor = ref('#fff')
	const color = ref('#000')
	const remo = ()=>{
		 headerindex.value=1
	}
	const add =()=>{
		headerindex.value=2
	}
	const demo = ref([0,1,2,3,4,5,6,7,8,9,10])
</script>

<style lang="scss">
	.secondaryCard {
		width: 100%;
		height: 100%;
		background-color: #f2f2f2;
		position: absolute;
		overflow: hidden;

		.tops {
			width: 100%;
			height: 11%;
		}

		.secondBright-header {
			width: 100%;
			height: 80rpx;
			display: flex;
			font-size: 30rpx;
			color: black;
			background-color: #fff;

			.header-left {
				width: 50%;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
			}

			.header-right {
				width: 50%;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
			}

			.headerActive {
				border-bottom: 6rpx solid #009dd9;
				color: #009dd9;
			}
		}
		.secondaryCard-auto{
			width: 100%;
			height: 95%;
			position: relative;
			margin-top: 20rpx;
			.card{
				width: 88%;
				height: 200rpx;
				background-color:#fff;
				margin-left: 50%;
				transform: translateX(-50%);
				margin-top: 45rpx;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.card-l{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					border: 1rpx solid #666;
					margin-left: 30rpx;
				}
				.card-c{
					width: 50%;
					height: 200rpx;
					font-size: 28rpx;
					.t{
						width: 100%;
						height: 66rpx;
						line-height: 66rpx;
						display: flex;
						margin-top: 6rpx;
						justify-content: space-between;
						.w{
							font-weight: 700;
							letter-spacing: 5rpx;
							.blacks{
								font-size: 35rpx;
							}
						
						}
						.reds{
							.color-r{
								color: #da0722;
								font-size: 35rpx;
							}
						}
						
					}
					.c{
						width: 100%;
						height: 66rpx;
						line-height: 66rpx;
						font-size: 26rpx;
						.color-r{
							color: #da0722;
							font-size: 35rpx;
						}
					}
					.d{
						
						width: 100%;
						height: 50rpx;
						line-height: 50rpx;
						box-sizing: border-box;
						padding-top:10rpx ;
						font-size: 26rpx;
					}
				}
				.card-r{
					width: 160rpx;
					height: 50rpx;
					background-color: #027db4;
					text-align: center;
					line-height: 50rpx;
					margin-right: 20rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					color: white;
				}
				.card-r1{
					width: 120rpx;
					height: 120rpx;
					background-color: #027db4;
					text-align: center;
					line-height: 50rpx;
					margin-left: 20rpx;
					margin-right: 40rpx;
					border-radius: 50%;
					color: white;
				}
			}
		}
	}
</style>