yueche_app/pages/identity/identity.vue

<template>
	<view class="container">
		<image class="banner" src="@/static/images/mine/back.png" mode="aspectFill" />
		<view class="title" :style="{ top: `${paddingTop * 2}rpx` }">
			<view class="title_back" @click="handleBack">
				<wd-icon name="thin-arrow-left" color="#001713" size="18"></wd-icon>
			</view>

			身份认证
		</view>

		<view class="body">
			<!-- 每一个认证类型区域 -->
			<view
				class="body_card"
				v-for="(item, index) in typeList"
				:key="index"
				:class="[{ excellent: item.cardType == '优行认证' }, { teacher: item.cardType == '教师认证' }, { warm: item.cardType == '暖心认证' }]"
				@click="clickItem(item)"
			>
				<view class="card_type">
					<view class="type_name">
						<image v-if="item.cardType == '优行认证'" class="img" src="/static/images/transportation/logo.png" mode="aspectFill"></image>
						<image v-if="item.cardType == '教师认证'" class="img" src="/static/images/transportation/logo2.png" mode="aspectFill"></image>
						<image v-if="item.cardType == '暖心认证'" class="img" src="/static/images/transportation/logo3.png" mode="aspectFill"></image>
						{{ item.cardType }}
					</view>
				</view>

				<view
					class="card_line"
					:class="[{ line_excellent: item.cardType == '优行认证' }, { line_teacher: item.cardType == '教师认证' }, { line_warm: item.cardType == '暖心认证' }]"
				></view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue'

// 胶囊按钮距离页面顶部的距离
const paddingTop = ref(0)

// 身份认证类型数组
const typeList = ref([
	{
		cardType: '教师认证'
	},
	{
		cardType: '暖心认证'
	}
])

onMounted(() => {
	paddingTop.value = uni.getMenuButtonBoundingClientRect().top
})

// 点击每一项的回调
const clickItem = (item) => {
	uni.navigateTo({
		url: `/pages/authenticate/authenticate?cardType=${item.cardType}`
	})
}

// 顶部返回图标回调
const handleBack = () => {
	uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	height: 100vh;
	color: #001713;
	background-color: #fff;

	.banner {
		width: 100%;
		height: 482rpx;
	}

	.title {
		position: absolute;
		display: flex;
		align-items: center;
		width: 100vh;
		font-size: 40rpx;

		.title_back {
			margin-left: 26rpx;
			margin-right: 252rpx;
		}
	}

	.body {
		position: absolute;
		top: 220rpx;
		box-sizing: border-box;
		padding: 0 36rpx;
		width: 100%;

		.body_card {
			box-sizing: border-box;
			padding: 36rpx 48rpx;
			margin: 0 auto 80rpx;
			width: 100%;
			height: 248rpx;
			font-size: 24rpx;
			border-radius: 60rpx;
			border-radius: 30px;
			box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);

			.card_type {
				display: flex;
				align-items: center;
				font-weight: bold;
				margin-top: 100rpx;

				.type_name {
					display: flex;
					align-items: center;
					font-size: 40rpx;

					.img {
						margin-right: 10rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}

				.type_au {
					display: flex;
					align-items: center;
					margin-left: 40rpx;
					font-size: 24rpx;

					.text {
						margin-right: 5rpx;
					}
				}
			}

			.card_line {
				margin-top: 16rpx;
				width: 100%;
				height: 8rpx;
				border-radius: 10rpx;
			}

			.line_excellent {
				background: linear-gradient(90deg, #72a8d2 0%, #2b507a 100%);
			}

			.line_teacher {
				background: linear-gradient(90deg, #f1a045 0%, #bf6c0f 100%);
			}

			.line_warm {
				background: linear-gradient(90deg, #218dfb 0%, #0c70fb 100%);
			}
		}

		.excellent {
			color: #2b507a;
			background: linear-gradient(146.58deg, rgba(243, 245, 245, 0.5) 0%, rgba(229, 240, 244, 0.5) 100%);
		}

		.teacher {
			color: #9f5300;
			background: linear-gradient(148.48deg, rgba(254, 228, 182, 0.5) 0%, rgba(253, 205, 121, 0.5) 59.21%, rgba(248, 212, 140, 0.5) 100%);
		}

		.warm {
			color: #1580ed;
			background: linear-gradient(146.58deg, rgba(243, 245, 245, 0.5) 0%, rgba(201, 229, 255, 0.5) 100%);
		}
	}
}
</style>