xingmingyi_applet/pagesA/components/skillList.vue

<template>
	<view class="box">
		<view v-if="flag == 1" class="boxlist">
			<view @click="nextTo(item)" class="bb vidLi dfsb" v-for="(item, ind) in list" :key="ind">
				<view class="imgbox">
					<image :src="item.goods_img" mode=""></image>
					<!-- <text class="left-img" v-if="ind < 3">第{{ ind + 1 }}名</text> -->
				</view>
				<view class="dffd flex1">
					<view class="title elli">{{item.goods_name}}</view>
					<view class="price dfsb">
						<view class="textgrey">单独购买： <text class="del">￥{{item.goods_price}}</text></view>
						<!-- <text class="textgrey">{{item.count}}人已秒杀成功</text> -->
					</view>
					<view class="auth dfsb">
						<view class="prosecond">秒杀价： <text class="priceDan">{{item.seckill_price}}</text></view>
						<text class="btn">去秒杀</text>
					</view>
				</view>
			</view>
			<u-empty v-if="list.length<1" text="还没有商品哦" mode="list"></u-empty>
		</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/skillInfo?flag=3&id='+item.id 
			});
		}
	}
};
</script>

<style scoped lang="scss">
.boxlist {
	.vidLi {
		width: 100%;
		padding: 15rpx;
		background-color: #fff;
		margin-bottom: 20rpx; 
		.imgbox {
			position: relative;
			width: 200rpx;
			height: 200rpx;
			margin-right: 28rpx;
			// .left-img {
			// 	position: absolute;
			// 	top: 0;
			// 	left: 0;
			// 	height: 33rpx;
			// 	line-height: 33rpx;
			// 	font-size: 18rpx;
			// 	color: #fff;
			// 	padding: 0 5rpx;
			// 	background: #e84325;
			// 	border-radius: 7rpx;
			// }
			image {
				width: 100%;
				height: 100%;
			}
		}
		.title {
			font-size: 26rpx;
			line-height: 40rpx;
			margin-bottom: 12rpx;
		}
		.price{ 
			width: 100%;
			.textgrey,text{
				font-size: 20rpx;
			}
		}
		.auth {
			margin-top: 15rpx;
			width: 100%;
			.prosecond{
				font-size: 20rpx;
			}
			.btn{
				width: 120rpx;
				height: 44rpx;
				line-height: 44rpx;
				text-align: center;
				background: #ED742F;
				border-radius: 22rpx;
				color: #fff;
				font-size: 20rpx;
			}
		}
	}
}
</style>