mnsx/pages/index/recommend.vue

<template>
		<view class="scroll_box"> 	
		    <scroll-view class="scroll-view_x" scroll-x show-scrollbar="false">
		      <view class="item_list" v-for="l in bastList" @click="listTo(l.id)">
				  <image :src="l.image"></image>
			    <view class="price">
					<text class="store_name clamp">{{l.store_name}}</text>
					<view class="price-d">
						<text class="now-price">￥{{l.price}}</text>
						<text class="ot-price" v-if="l.ot_price*1 > l.price*1">￥{{l.ot_price}}</text>
					</view>
				</view>
		      </view>
		    </scroll-view>
		  </view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: ["bastList"],
		methods: {
			listTo(id) {
				console.log(id)
				uni.navigateTo({
					url: '/pages/product/product?id=' + id + '&type=0'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll_box{
		width: 100%;
	}
	.item_list{
		margin: 27rpx 10rpx;
		&:first-of-type {
			margin-left: 31rpx;
		}
		&:last-of-type {
			margin-right: 31rpx;
		}
		image {
			width: 256rpx;
			height: 256rpx;
			border-radius: 10rpx 10rpx 0 0;
		}
	}
	
	.price {
		border-radius: 0  0 10rpx 10rpx ;
		padding: 5rpx;
		background-color: #FFFFFF;
		margin-top: -10rpx;
		height: 102rpx;
		.store_name {
			width: 220rpx;
			padding-left: 10rpx;
			padding-bottom: 17rpx;
			color: #333333;
			font-family: PingFang-SC-Bold;
			font-size: 28rpx;
		}
		
		.price-d {
			padding-left: 10rpx;
			.now-price {
				color: #970100;
				font-size: 28rpx;
			}
			
			.ot-price {
				color: #989B9F;
				font-size: 20rpx;
				text-decoration: line-through;
			}
		}
	}
</style>