xingmingyi_applet/components/shopList.vue

<template>
	<view class="box">
		<view v-if="flag == 1" class="dffs boxlist">
			<view @click="nextTo(item)" class="vidLi" v-for="(item, ind) in list" :key="ind">
				<image :src="item.goods_img" mode=""></image>
				<view class="title elli">{{ item.goods_name }}</view>
				<view class="tips dfsb">
					<view class="priceDan">{{ item.goods_price }}</view>
					<view class="fontssm textgrey ">{{ item.sale_num }}人付款</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		list: {
			type: Array,
			default: []
		},
		flag: {
			type: [String, Number],
			default: 1
		}
	},
	methods: {
		nextTo(item) {
			uni.navigateTo({
				url: '/pagesA/mall/info?flag=1&id='+item.goods_id
			});
		}
	}
};
</script>

<style scoped lang="scss">
.boxlist {
	align-items: flex-start;
	flex-wrap: wrap;
	.vidLi {
		margin-right: 24rpx;
		margin-bottom: 30rpx;
		width: 333rpx;
		
		&:nth-of-type(2n) {
			margin-right: 0;
		}
		image {
			width: 333rpx;
			height: 320rpx;
			border-radius: 10rpx;
		}
		.title {
			margin: 7rpx 0 20rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			line-height: 40rpx;
			height: 80rpx;
		}
		.priceDan{
			display:table-cell; 
			vertical-align:bottom;
			// line-height: none;
			&::after{
				content:"起";
				font-size: 24rpx;
				position: relative;
				top:-2rpx;
			}
			&::before{
				content:"￥";
				font-size: 24rpx;
				position: relative;
				top:-2rpx;
			}
		}
	}
}
</style>