shop-app/components/BsGoodsGroup.vue

<!--
 * @Author: ch
 * @Date: 2022-03-20 16:45:27
 * @LastEditors: ch
 * @LastEditTime: 2022-03-28 16:17:12
 * @Description: file content
-->
<template>
	<view class="goods">
		<view class="goods--column">
			<view class="goods-item" @click="$Router.push('/pages/goods/detail')">
				<image class="goods-item--img" src="@/static/testImg/2.png" mode="widthFix"></image>
				<view class="goods-item--title"><text>JAVA语言程序员必备的技术书籍</text></view>
				<view class="goods-item--pirce-box">
					<view>
						<text class="goods-item--pirce">￥29</text>
						<text class="goods-item--original-pirce">￥50</text>
					</view>
					<view>
						<image class="goods-item--icon" src='@/static/index/bz.png'></image>
					</view>
				</view>
				<view class="goods-item--activity">
					<text class="goods-item--activity-title">秒杀</text>
					<text class="goods-item--activity-desc">正在抢购中</text>
				</view>
			</view>
			<view class="goods-item">
				<image class="goods-item--img" src="@/static/testImg/3.png" mode="widthFix"></image>
				<view class="goods-item--title"><text>JAVA语言程序员必备的技术书籍</text></view>
				<view class="goods-item--pirce-box">
					<view>
						<text class="goods-item--pirce">￥29</text>
						<text class="goods-item--original-pirce">￥50</text>
					</view>
					<view>
						<image class="goods-item--icon" src='@/static/index/bz.png'></image>
					</view>
				</view>
				<view class="goods-item--activity">
					<text class="goods-item--activity-title">秒杀</text>
					<text class="goods-item--activity-desc">正在抢购中</text>
				</view>
			</view>
			<view class="goods-item">
				<image class="goods-item--img" src="@/static/testImg/2.png" mode="widthFix"></image>
				<view class="goods-item--title"><text>JAVA语言程序员必备的技术书籍</text></view>
				<view class="goods-item--pirce-box">
					<view>
						<text class="goods-item--pirce">￥29</text>
						<text class="goods-item--original-pirce">￥50</text>
					</view>
					<view>
						<image class="goods-item--icon" src='@/static/index/bz.png'></image>
					</view>
				</view>
				<view class="goods-item--activity">
					<text class="goods-item--activity-title">秒杀</text>
					<text class="goods-item--activity-desc">正在抢购中</text>
				</view>
			</view>
		</view>
		<view class="goods--column">
			<view class="goods-item">
				<image class="goods-item--img" src="@/static/testImg/3.png" mode="widthFix"></image>
				<view class="goods-item--title"><text>JAVA语言程序员必备的技术书籍</text></view>
				<view class="goods-item--pirce-box">
					<view>
						<text class="goods-item--pirce">￥29</text>
						<text class="goods-item--original-pirce">￥50</text>
					</view>
					<view>
						<image class="goods-item--icon" src='@/static/index/bz.png'></image>
					</view>
				</view>
				<view class="goods-item--activity">
					<text class="goods-item--activity-title">秒杀</text>
					<text class="goods-item--activity-desc">正在抢购中</text>
				</view>
			</view>
			<view class="goods-item">
				<image class="goods-item--img" src="@/static/testImg/2.png" mode="widthFix"></image>
				<view class="goods-item--title"><text>JAVA语言程序员必备的技术书籍</text></view>
				<view class="goods-item--pirce-box">
					<view>
						<text class="goods-item--pirce">￥29</text>
						<text class="goods-item--original-pirce">￥50</text>
					</view>
					<view>
						<image class="goods-item--icon" src='@/static/index/bz.png'></image>
					</view>
				</view>
				<view class="goods-item--activity">
					<text class="goods-item--activity-title">秒杀</text>
					<text class="goods-item--activity-desc">正在抢购中</text>
				</view>
			</view>
		</view>
	</view>
</template>
<style lang="scss" scoped>

.goods{
	padding: 0 30rpx;
	display: flex;
	justify-content: space-between;
	flex-flow:wrap;
	&--column{
		width: 335rpx;
	}
	&-item{

		width: 335rpx;
		border-radius: 8rpx;
		background: #fff;
		margin-bottom: 30rpx;
		overflow: hidden;
		padding-bottom: 20rpx;
		&--img{
			width: 100%;
		}
		&--title{
			font-size: 28rpx;
			padding: 20rpx 20rpx;
			line-height: 36rpx;
		}
		&--pirce-box{
			padding:0 20rpx;
			display: flex;
			justify-content: space-between;
		}
		&--pirce{
			font-size: 32rpx;
			color: #FF512B;
		}
		&--original-pirce{
			color: #ccc;
			font-size: 20rpx;
			text-decoration: line-through;
			margin-left: 15rpx;
		}
		&--icon{
			width: 22rpx;
			height: 24rpx;
		}
		&--activity{
			height: 40rpx;
			line-height: 40rpx;
			margin:20rpx 20rpx 0;
			background: #FFEDE9;
			border-radius: 20rpx;
			font-size: 22rpx;
			color: #FF512B;
			display: flex;
			&-title{
				height: 40rpx;
				display: block;
				border-radius: 20rpx;
				padding: 0 14rpx;
				background: #FF512B;
				color: #fff;
			}
			&-desc{
				flex: 1 1 auto;
				text-align: center;
			}
		}
	}
}
</style>