zhywpt-sp/subpackage/after-sale/reportLossCard.vue

<template>
	<view class="reportLossCard">
		<view class="card_item">
			<image :src="`${$imgUrl}equipmentService/card3.png`" mode="aspectFill"></image>
			<text>ETC卡挂失/解除挂失</text>
			<view class="circle" @click="active=1">
				<view :class="active==1?'circle2':''">
				</view>
			</view>
		</view>
		<view class="card_item" :class="active==2">
			<image :src="`${$imgUrl}equipmentService/card1.png`" mode="aspectFill"></image>
			<text>OBU设备挂失/解除挂失</text>
			<view class="circle" @click="active=2">
				<view :class="active==2?'circle2':''">
				</view>
			</view>
		</view>
		<view class="card_item" :class="active==3">
			<image :src="`${$imgUrl}equipmentService/card2.png`" mode="aspectFill"></image>
			<text>卡签组合挂失/解除挂失</text>
			<view class="circle" @click="active=3">
				<view :class="active==3?'circle2':''">
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref
	} from "vue";

	let active = ref(1)
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.reportLossCard {
		height: 100%;
		background-color: #EEF7F7;
		padding: 30rpx;

		.card_item {
			margin-bottom: 30rpx;
			background-color: #fff;
			height: 150rpx;
			border-radius: 20rpx;
			display: flex;
			justify-items: center;
			align-items: center;
			padding: 20rpx;

			text {
				font-size: 32rpx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				color: #333333;
				line-height: 58rpx;
				flex: 1;
				margin-left: 20rpx;
			}

			image {
				width: 100rpx;
				height: 90rpx;
			}

			.circle {
				width: 50rpx;
				height: 50rpx;
				border: 2rpx solid #00B38A;
				border-radius: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.circle2 {
				width: 40rpx;
				height: 40rpx;
				border-radius: 40rpx;
				background-color: #00B38A;
			}
		}
	}
</style>