sct/pagesT/goodsGroup/index.vue

<template>
	<view :class="['qn-page-' + theme]">
		<view class="group-ul">
			<view class="group-li clearfix" @click="goPage('/pageT/goodsGroup/goodsGroupDetail?id=1')">
				<view class="float_left">
					<scroll-view scroll-x="true" class="left-scroll">
						<view class="goods-ul">
							<view class="goods-li">
								<image src="https://onlineimg.qianniao.vip/audit_img.jpg" mode="aspectFill"></image>
								<view class="goods-name ellipsis">测试商品测试商品</view>
							</view>
							<view class="plus-icon">
								<u-icon name="plus" color="#cecece" size="28"></u-icon>
							</view>
							<view class="goods-li">
								<image src="https://onlineimg.qianniao.vip/audit_img.jpg" mode="aspectFill"></image>
								<view class="goods-name ellipsis">测试商品测试商品</view>
							</view>
							<view class="plus-icon">
								<u-icon name="plus" color="#cecece" size="28"></u-icon>
							</view>
							<view class="goods-li">
								<image src="https://onlineimg.qianniao.vip/audit_img.jpg" mode="aspectFill"></image>
								<view class="goods-name ellipsis">测试商品测试商品</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="float_left dy-icon">
					<text class="ibonfont ibonicon"></text>
				</view>
				<view class="float_left price-right">
					<view class="group-price">
						<text>套餐价</text>
						<text class="primary-color">¥100.00</text>
					</view>
					<view class="save-price primary-color">
						可省¥288.00
					</view>
					<view class="buy-btn primary-btn">
						立即购买
					</view>
				</view>
			</view>
			<view class="group-li clearfix">
				<view class="float_left">
					<scroll-view scroll-x="true" class="left-scroll">
						<view class="goods-ul">
							<view class="goods-li">
								<image src="https://onlineimg.qianniao.vip/audit_img.jpg" mode="aspectFill"></image>
								<view class="goods-name ellipsis">测试商品测试商品</view>
							</view>
							<view class="plus-icon">
								<u-icon name="plus" color="#cecece" size="28"></u-icon>
							</view>
							<view class="goods-li">
								<image src="https://onlineimg.qianniao.vip/audit_img.jpg" mode="aspectFill"></image>
								<view class="goods-name ellipsis">测试商品测试商品</view>
							</view>
							<view class="plus-icon">
								<u-icon name="plus" color="#cecece" size="28"></u-icon>
							</view>
							<view class="goods-li">
								<image src="https://onlineimg.qianniao.vip/audit_img.jpg" mode="aspectFill"></image>
								<view class="goods-name ellipsis">测试商品测试商品</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="float_left dy-icon">
					<text class="ibonfont ibonicon"></text>
				</view>
				<view class="float_left price-right">
					<view class="group-price">
						<text>套餐价</text>
						<text class="primary-color">¥100.00</text>
					</view>
					<view class="save-price primary-color">
						可省¥288.00
					</view>
					<view class="buy-btn primary-btn">
						立即购买
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
</script>

<style lang="scss" scoped>
	.group-ul{
		padding: 20rpx;
		.group-li{
			background-color: #FFFFFF;
			border-radius: 12rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			.float_left{
				.left-scroll{
					width: 430rpx;
					white-space: nowrap;
					.goods-li{
						display: inline-block;
						vertical-align: middle;
						image{
							display: block;
							width: 150rpx;
							height: 150rpx;
							border-radius: 10rpx;
							margin: 0 auto;
						}
						text-align: center;
						.goods-name{
							width: 150rpx;
							height: 36rpx;
							line-height: 36rpx;
							margin-top: 10rpx;
							font-size: 24rpx;
							-webkit-line-clamp: 1;
						}
					}
					.plus-icon{
						vertical-align: middle;
						display: inline-block;
						line-height: 150rpx;
						padding: 0 10rpx;
						height: 200rpx;
					}
				}
			}
			.dy-icon{
				padding: 0 10rpx;
				line-height: 150rpx;
				padding: 0 10rpx;
				height: 200rpx;
				color: #cecece;
				.ibonicon{
					font-size: 26rpx;
				}
			}
			.price-right{
				color: #666666;
				font-size: 24rpx;
				text-align: center;
				width: 190rpx;
				.group-price{
					.primary-color{
						font-weight: 700;
						font-size: 28rpx;
					}
				}
				.save-price{
					padding: 10rpx 0;
				}
				.buy-btn{
					line-height: 56rpx;
					height: 56rpx;
					border-radius: 8rpx;
					text-align: center;
					color: #FFFFFF;
					width: 150rpx;
					margin: 10rpx auto 0;
				}
			}
		}
	}
</style>