hxj/src/plugins/composition/components/app-bd-info/app-bd-info.vue

<template>
	<view>
		<view class="main-between info-box">
			<view class="main-left">
				<image class="gd-cover" :src="info.cover_img" mode=""></image>
				<view>
					<view class="title">{{info.name}}</view>
					<view>
						<text class="price">
							<text class="dw">￥</text>
							<text class="rmb">{{total?total:info.discount_amount}}</text>
							<text class="decimal">.00</text>
						</text>
						<text class="price-line"><text v-if="info.min_composition_price">￥</text>{{info.min_composition_price}}</text>
					</view>
					<view class="main-between">
						<view class="main-left">
							<view class="tag">{{info.tag}}</view>
							<!-- <view class="tag">全款</view> -->
							<!-- <view class="tag">满200减10</view> -->
						</view>
					</view>
				</view>
			</view>
			<view class="cross-bottom">
				<view class="main-center cross-center receive" @click="receive" v-if="coupons.length>0">
					领券<image src="https://t17.9026.com/web/statics/image/index/arrow-right-facet-white.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			info:Object,
			coupons:Array,
			total:Number,
		},
		data() {
			return {
				
			};
		},
		methods:{
			receive(){
				this.$emit('receive')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.receive{
		width: 92rpx;
		height: 38rpx;
		background: #FF0000;
		border-radius: 19rpx;
		font-size: 20rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 38rpx;
		text-align: center;
		image{
			width: 22rpx;
			height: 22rpx;
			margin-left: 7rpx;
		}
	}
	.info-box{
		width: 100%;
		height: 230rpx;
		background-color: #fff;
		padding: 35rpx;
		.gd-cover{
			width: 170rpx;
			height: 170rpx;
			border-radius: 8rpx;
			overflow: hidden;
			margin-right: 28rpx;
		}
		.title{
			font-size: 32rpx;
			font-weight: bold;
			color: #222222;
			line-height: 46rpx;
		}
		.price{
			color: #F93F3F;
			line-height: 70rpx;
			.dw{
				font-size: 24rpx;
				font-weight: 500;
			}
			.rmb{
				font-size: 40rpx;
				font-weight: 600;
			}
			.decimal{
				font-size: 24rpx;
				font-weight: 500;
			}
		}
		.price-line{
			font-size: 20rpx;
			font-weight: 500;
			text-decoration: line-through;
			color: #999999;
			line-height: 36rpx;
			margin-left: 21rpx;
		}
		.tag{
			width: auto;
			height: 28rpx;
			border: 1rpx solid #F59922;
			border-radius: 2rpx;
			font-size: 20rpx;
			font-weight: 500;
			color: #F59922;
			line-height: 24rpx;
			margin-right: 13rpx;
			padding: 0 9rpx;
		}
	}
</style>