uniapp v2 组件

html

		<view class="activeGoods">

			<view class="A-GoodsList">
				<view class="A-GoodsList-Title flex jsb ac">
					<view class="A-GoodsList-Title-left flex ac">
						<text class="showSetTexta">爆款专区</text>
						<view class="showSetText flex jc ac">
							<image class="showSetTextimg" src="../../static/money.png" mode="aspectFit">
							</image>
							<view>
								{{recommendgoodsB.infoobj.min_price}}元起
							</view>
						</view>
					</view>
					<view class="A-GoodsList-Title-right flex ac"
						@click="sheep.$router.go('/pages/businessAndother/newUserList/newUserList')">
						查看更多 <up-icon name="arrow-right" color="#fff" size="12"></up-icon>
					</view>
				</view>

				<scroll-view scroll-x class="A-GoodsList-list ">
					<view class="flex">
						<view class="A-GoodsList-li" v-for="(item,index) in 10" :key="item.id"
							@click="sheep.$router.go('/pages/goods/index', { id: item.id })">
							<image class="A-GoodsList-li-img" :src="item.image" mode="aspectFill">
							</image>
							<view class="A-GoodsList-li-Detail">
								<view class="A-GoodsList-li-Detail-title me-text-beyond-multi">
									<text class="ttTag">新人专享</text>
									<text class="tt ">商品标题特价出售新人专享商品标题特价出售新人专享</text>
								</view>
								<view class="flex jsb ac ">
									<view class="flex ac">
										<view class="A-GoodsList-li-Detail-price ">
											<text class="A-GoodsList-li-Detail-price-priceicon">￥</text>
											<text class="A-GoodsList-li-Detail-price-pricessss">{{'0.00'}}
											</text>
										</view>
									</view>
									<view class="" @tap.stop="openCart(item)">
										<up-icon name="plus-circle-fill" color="#50bb81" size="25"></up-icon>
									</view>
								</view>
								<view class="A-GoodsList-li-Detail-original-price  flex jsb ac ">
									￥{{item.sku_prices[0].original_price||'00'}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>


			</view>
			
		</view>

css

		.activeGoods {
			width: 690rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 18rpx 18rpx;
			margin-bottom: 30rpx;
			margin-top: 30rpx;

			.A-GoodsList {

				.A-GoodsList-Title {
					width: 100%;
					padding: 20rpx;
					box-sizing: border-box;
					border-radius: 18rpx 18rpx 0 0;
					background: orangered;
					margin: 0 !important;

					.A-GoodsList-Title-left {
						.showSetTexta {
							font-weight: bold;
							font-size: 40rpx;
							color: #fff;
						}

						.showSetText {
							font-weight: 0 !important;
							font-size: 24rpx;
							line-height: 0.5;
							color: #fff;
							margin-left: 15rpx;
							padding: 5rpx 10rpx;
							box-sizing: border-box;
							border: 1rpx solid #fff;
							border-radius: 8rpx;

							.showSetTextimg {
								width: 35rpx;
								height: 35rpx;
								margin-right: 5rpx;
							}
						}

					}

					.A-GoodsList-Title-right {
						font-weight: 0 !important;
						font-size: 24rpx !important;
						color: #fff !important;
					}
				}
			}

			.A-GoodsList-list {
				width: 100%;
				background: #fff;
				padding: 10rpx;
				box-sizing: border-box;
				border-radius: 8rpx;

				.A-GoodsList-li {
					width: 200rpx;
					background: #FFFFFF;
					border-right: 1rpx solid #f1f1f1;

					.A-GoodsList-li-img {
						width: 200rpx;
						height: 200rpx;
						border-radius: 18rpx;
					}

					.A-GoodsList-li-Detail {
						padding: 10rpx;
						box-sizing: border-box;

						.A-GoodsList-li-Detail-title {
							width: 200rpx;

							.ttTag {
								padding: 5rpx 10rpx;
								box-sizing: border-box;
								background: red;
								color: #fff;
								font-size: 24rpx;
								height: 28rpx;
								margin-right: 20rpx;
								border-radius: 12rpx;
							}

							.tt {
								font-size: 28rpx;
								font-weight: bold;
							}
						}

						.A-GoodsList-li-Detail-price {
							height: 40rpx;
							line-height: 1;
							font-weight: bold;
							font-size: 38rpx;
							color: #F8303A;

							.A-GoodsList-li-Detail-price-priceicon {
								font-size: 24rpx !important;
							}
						}

						.A-GoodsList-li-Detail-original-price {
							color: #999;
							text-decoration: line-through;
							font-size: 22rpx;
							margin-top: 5rpx;
						}
					}
				}
			}
		}