book-hi/pages-sell/components/detail/info-card.vue

<template>
	<view class="info-card">
		<view class="title-row">
			<text class="book-title">{{ product.title }}</text>
		</view>
		
		<view class="price-row">
			<text class="currency">¥</text>
			<text class="price">{{ product.price }}</text>
			<view class="balance-tag">
				<text>余额价 {{ product.balancePrice }}</text>
			</view>
		</view>
		
		<view class="meta-row">
			<text class="label">原价：</text>
			<text class="original-price">¥{{ product.originalPrice }}</text>
		</view>
		
		<view class="author-row">
			<text class="author">作者：{{ product.author }}</text>
			<view class="works-link">
				<text>作品</text>
				<u-icon name="arrow-right" size="24" color="#F2950A"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'InfoCard',
	props: {
		product: {
			type: Object,
			default: () => ({})
		}
	}
}
</script>

<style lang="scss" scoped>
.info-card {
	background: #fff;
	border-radius: 24rpx 24rpx 0 0;
	padding: 30rpx;
	
	.title-row {
		margin-bottom: 20rpx;
		.book-title {
			font-size: 40rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	.price-row {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
		
		.currency {
			font-size: 32rpx;
			color: #D81A00;
			font-weight: bold;
		}
		
		.price {
			font-size: 48rpx;
			color: #D81A00;
			font-weight: bold;
			margin-right: 20rpx;
		}
		
		.balance-tag {
			background: #EFA941;
			border-radius: 20rpx;
			padding: 2rpx 16rpx;
			
			text {
				font-size: 22rpx;
				color: #fff;
			}
		}
	}
	
	.meta-row {
		margin-bottom: 20rpx;
		font-size: 26rpx;
		color: #999;
		
		.original-price {
			text-decoration: line-through;
			margin-left: 10rpx;
		}
	}
	
	.author-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #F2950A;
		
		.author {
			flex: 1;
		}
		
		.works-link {
			display: flex;
			align-items: center;
		}
	}
}
</style>