lishang/pages/index/child/recommend.vue

<template>
	<view class="all">
		<image src="@/static/img/i-t.png"></image>
		<view class="title">
			<text>为你推荐</text>
		</view>
		<view class="list">
				<view class="item" v-for="b in bastList">
					<view class="item-img">
						<!-- <image :src=b.image  mode="" v-if="b.image"></image> -->
						<image :src = "b.image" :onerror="defaultImg"></image>
					</view>
					<view class="item-right">
						<view class="name">
							{{b.store_name}}
						</view>
						<view class="item-price">
							<view class="">
								<text class="ot-price">￥{{b.ot_price}}</text>
								<image src="../../../static/icon/decline.png" v-if="b.ot_price - b.price > 0"></image>
								<text v-if="b.ot_price - b.price > 0">直降{{b.ot_price - b.price}}元</text><br>
								<text class="price">￥{{b.price}}</text>
							</view>
							<view class="button" @click="navToDetailPage(b)">立即购买</view>
						</view>
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultImg: 'this.src="' + require('@/static/error/errorImage.jpg') + '"',
			}
		},
		methods: {
			//详情页
			navToDetailPage(item) {
				this.$parent.$parent.$parent.navToDetailPage(item)
			},
		},
		mounted() {
			// this.getList()
		},
		props: ["bastList"]
	}
</script>

<style lang="scss" scoped>
	.all {
		text-align: center;
		padding-bottom: 30rpx;
	}
		
	image {
		width: 350rpx;
		height: 30rpx;
	}
	.title {
		position: relative;
		top: -45rpx;
		color: #438BED ;
		font-size: 30rpx;
		font-weight: bold;
	}
	.list {
		padding: 0 5%;
		.item {
			display: flex;
			padding: 20rpx;
			box-shadow:0 0 20rpx 6rpx #f1f1f1;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.item-img {
				margin-right: 40rpx;
				image {
					width: 200rpx;
					height: 200rpx;
				}
			}
			.item-right {
				width: 100%;
				text-align: left;
				display: grid;
				align-content: space-between;
				.name {
					color: #333333;
					font-size: 30rpx;
					font-weight: bold;
					font-family: PingFang-SC-Bold;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				text {
					color: #FFB238;
					font-size: 20rpx;
				}
				.item-price {
					display: flex;
					justify-content: space-between;
					image {
						width: 20rpx;
						height: 20rpx;
						margin-right: 5rpx;
					}
					.ot-price {
						color: #999999;
						text-decoration: line-through;
						margin-right: 15rpx;
					}
					.price {
						color: #EF3A55;
						font-size: 35rpx;
					}
					.button {
						background: linear-gradient(90deg, #438BED 0%,  #44BFEC 100%);
						background-color: #438BED;
						height: 50rpx;
						border-radius: 20rpx;
						padding: 10rpx 15rpx;
						color: #fff;
						font-size: 25rpx;
						position: relative;
						top: 30rpx;
					}
				}
				
			}
		}
	}
</style>