leromro-mini/pages/goodsDetails/goodsDetails.vue

<template>
	<view>
		<up-card title="志愿者介绍" :thumb="thumb" :head-style="{ height: '100rpx', padding: '0rpx 20rpx' }">
			<template #body>
				<view class="card-content">
					<!-- 左侧图片 -->
					<image class="card-image"
						src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg"
						mode="aspectFill"></image>

					<!-- 中间信息（姓名/类别等） -->
					<view class="card-info">
						<view class="info-item">姓名：王麻子</view>
						<view class="info-item">类别：教师</view>
						<view class="info-item">科目：语文</view>
						<view class="info-item">电话：15082*****1234</view>
						<view class="info-item">住址：重庆市永川区洞拐洞拐洞洞拐</view>
					</view>

					<!-- 右上角评分 -->
					<view class="card-rating">4.5 评分</view>
				</view>
			</template>
		</up-card>
		<up-card title="技能介绍" :thumb="thumb" :head-style="{ height: '100rpx', padding: '0rpx 20rpx' }">
			
		</up-card>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		onMounted,
		ref
	} from "vue";
	import {
		getDetailsvolunteerId
	} from "@/api/volunteerDetailsApi/details.js"

	const thumb = ref('http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg');

	const listData = ref([])


	
	// const itemInfo = ref({})
	//獲取信息
	// onLoad((option) => {
	// 	itemInfo.value = JSON.parse(decodeURIComponent(option.itemInfo))

	// 	console.log(itemInfo.value, '>>>>>>itemInfo.value');
	// })

</script>

<style scoped>
	/* 可选：深层覆盖 */
	.Box-card ::v-deep .u-card__body {
		border: none;
	}

	/* 卡片整体布局 */
	.card-content {
		display: flex;
		position: relative;
		padding: 20rpx;
		align-items: flex-start;
	}

	/* 左侧图片*/
	.card-image {
		width: 240rpx;
		height: 340rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
	}

	/* 中间信息（行间距更大） */
	.card-info {
		flex: 1;
	}

	.info-item {
		margin-bottom: 24rpx;
		/* 增加行间距 */
		font-size: 28rpx;
		line-height: 1.6;
		/* 行高增加 */
		color: #333;
	}

	/* 右上角评分 */
	.card-rating {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		background-color: #f8f8f8;
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #ff9900;
		/* 橙色评分 */
		font-weight: bold;
	}
</style>