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="https://swdzshopv4.oss-cn-chengdu.aliyuncs.com/uploads/mall10000/20211213/bea32f790435d8a108717fd823113cda.jpg" mode=""></image>
				<view>
					<view class="title">{{name}}</view>
					<view>
						<text class="price">
							<text class="dw">￥</text>
							<text class="rmb">2466</text>
							<text class="decimal">.00</text>
						</text>
						<text class="price-line"><text>￥</text>3000.00</text>
					</view>
					<view class="main-between">
						<view class="main-left">
							<view class="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">
					领券<image src="../../../../static/image/index/arrow-right-facet-white.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			name:String,
			max
		},
		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;
		}
		.tag{
			width: auto;
			height: 25rpx;
			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>