book-hi/pages-sell/components/banner-card.vue

<template>
	<view class="banner-card" :style="{ background: bgColor }" @click="handleClick">
		<view class="card-content">
			<view class="text-content">
				<text class="title">{{ title }}</text>
				<text class="subtitle">{{ subtitle }}</text>
			</view>
			<image v-if="image" :src="image" mode="aspectFit" class="card-image"></image>
		</view>
	</view>
</template>

<script>
export default {
	name: 'BannerCard',
	props: {
		title: {
			type: String,
			required: true
		},
		subtitle: {
			type: String,
			default: ''
		},
		image: {
			type: String,
			default: ''
		},
		bgColor: {
			type: String,
			default: '#FFE8CC'
		}
	},
	methods: {
		handleClick() {
			this.$emit('click');
		}
	}
};
</script>

<style lang="scss" scoped>
.banner-card {
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	
	.card-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.text-content {
			flex: 1;
			display: flex;
			flex-direction: column;
			
			.title {
				font-size: 28rpx;
				color: #333333;
				font-weight: 500;
				margin-bottom: 8rpx;
			}
			
			.subtitle {
				font-size: 24rpx;
				color: #666666;
			}
		}
		
		.card-image {
			width: 120rpx;
			height: 120rpx;
			margin-left: 20rpx;
		}
	}
}
</style>