questionbankvue3/pages/vip/vipEntry/comp/commentItem.vue

<template>
	<view class="commentItem">
		<view class="flex">
			<view class="avatar">
				<image :src="item.avatar" mode="widthFix"></image>
			</view>
			<view class="name">{{ item.name }}</view>
			<view class="tag">{{ item.label }}</view>
		</view>
		<view class="text">
			{{ item.description }}
		</view>
	</view>
</template>

<script setup>
	defineProps(['item'])
</script>

<style lang="scss" scoped>
	image {
		display: block;width: 100%;height: 100%;
	}
	.commentItem {
		width: 100%;
		height: 236rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 18rpx 0px rgba(0, 0, 0, 0.04);
		border-radius: 10rpx;
		padding: 40rpx;
		.flex {
			.avatar {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.name {
				font-size: 28rpx;
				font-weight: 500;
				padding: 0 10rpx;
			}

			.tag {
				min-width: 100rpx;
				height: 36rpx;
				background: linear-gradient(135deg, #F9E4B1 0%, #F1C477 100%);
				border-radius: 6rpx;
				line-height: 36rpx;
				text-align: center;
				padding: 0 10rpx;
				font-size: 20rpx;
			}
		}

		.text {
			margin-top: 26rpx;
			font-size: 24rpx;
			color: #2D1306;
		}
	}
</style>