book-hi/pages-sell/components/product-tips/index.vue

<template>
	<view class="product-tips">
		<view class="section-title">温馨提示</view>
		<view class="tips-container">
			<view v-for="(tip, index) in content" :key="index" class="tip-item">
				<text>{{ index + 1 }}.{{ tip }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'ProductTips',
	props: {
		content: {
			type: Array,
			default: () => []
		}
	}
}
</script>

<style lang="scss" scoped>
.product-tips {
	margin-top: 30rpx;
	padding: 0 0 30rpx 0;
	background: #fff;
	
	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		font-family: 'Source Han Sans SC';
	}
	
	.tips-container {
		background-color: #F8F8F8;
		padding: 24rpx;
		border-radius: 12rpx;
		
		.tip-item {
			font-size: 26rpx;
			color: #666;
			line-height: 1.6;
			margin-bottom: 12rpx;
			text-align: justify;
			
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}
</style>