menber-center/pages/certificateDetail/certificateDetail.vue

<template>
	<view class="container">
		<view class="photo-box">
			<cover-image class="photo" :src="info.photo"></cover-image>
		</view>
		<view class="info-box">
			<view class="info-item-box">
				<view class="label">
					<span>证书编号:</span>
				</view>
				<view class="text">
					{{ info.number }}
				</view>
			</view>
			<view class="info-item-box">
				<view class="label">
					<span>发证部门:</span>
				</view>
				<view class="text">
					{{ info.dept }}
				</view>
			</view>
			<view class="info-item-box">
				<view class="label">
					<span>发证日期:</span>
				</view>
				<view class="text">
					{{ info.time }}
				</view>
			</view>
			<view class="info-item-box">
				<view class="label">
					<span style="letter-spacing: 2em;">姓</span>
					<span>名:</span>
				</view>
				<view class="text">
					{{ info.name }}
				</view>
			</view>
			<view class="info-item-box">
				<view class="label">
					<span style="letter-spacing: 2em;">性</span>
					<span>别:</span>
				</view>
				<view class="text">
					{{ info.gender }}
				</view>
			</view>
			<view class="info-item-box">
				<view class="label">
					<span>身份证号:</span>
				</view>
				<view class="text">
					{{ info.idCard }}
				</view>
			</view>
			<view class="info-item-box">
				<view class="label">
					<span>文化程度:</span>
				</view>
				<view class="text">
					{{ info.culture }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	
	const certificateType = ref()
	const certificateTitle = ref()
	
	const info = ref({
		id: '1',
		number: 'ZS20250101001',
		dept: '广州市房地产中介协会',
		time: '2025年01月13日',
		name: '彭于晏',
		gender: '男',
		idCard: '123456789012345679',
		culture: '大学',
		photo: 'https://ok.166.net/reunionpub/1_20210628_17a5105e667995566.jpeg'
	})
	
	onLoad((load) => {
		certificateType.value = load.type
		certificateTitle.value = load.title
		uni.setNavigationBarTitle({
			title: certificateTitle.value
		})
	})
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100vw;
		background-color: $uni-bg-color-grey;
		padding: 20rpx;
		
		.photo-box {
			width: 100%;
			display: flex;
			justify-content: center;
			margin: 20rpx 0;
			.photo {
				width: 200rpx;
				height: 280rpx;
				object-fit: cover;
				border-radius: $uni-card-border-radius;
			}
		}
		
		.info-box {
			padding: 20rpx 0;
			
			.info-item-box {
				display: flex;
				background-color: $uni-bg-color;
				border: 1rpx solid #81B4F8;
				border-radius: $uni-card-border-radius;
				padding: 20rpx 30rpx;
				font-size: $uni-title-font-size-2;
				// font-weight: bold;
				letter-spacing: 2rpx;
				margin-bottom: 40rpx;
				.label {
					width: 21%;
				}
				.text {
					width: 79%;
				}
			}
		}
	}
</style>