QianNiaoUser/components/PageDesign/components/GoodsGroup.vue

<template>
	<div class="goods-view" :style="{ backgroundColor: modelData.bgColor || '' }">
		<div v-if="modelData.navStyle === 1">
			<!--    标题栏风格1-->
			<div class="title-view clearfix" v-if="modelData.titleStyle === 2" :style="{ color: modelData.titleColor, backgroundColor: modelData.titleBgColor }">
				{{ modelData.title }}
				<text class="second-tit primary-btn" v-if="modelData.title_two">{{ modelData.title_two }}</text>
			</div>
			<!--    标题栏风格2-->
			<div class="tit-view-two clearfix" v-if="modelData.titleStyle === 1" :style="{ color: modelData.titleColor, backgroundColor: modelData.titleBgColor }">
				<text class="tit-view-two-line" :style="{ background: modelData.titleSetColor }"></text>
				<text class="tit-two-text">{{ modelData.title }}</text>
				<text class="tit-two-text-c" v-if="modelData.title_two">{{ modelData.title_two }}</text>
			</div>
			<!--    标题栏风格3-->
			<div class="tit-view-three" v-if="modelData.titleStyle === 3" :style="{ color: modelData.titleColor, backgroundColor: modelData.titleBgColor }">
				<div class="tit-three-text">
					<div class="tit-view-style tit-view-style-left">
						<text class="three-style-big" :style="{ background: modelData.titleSetColor }"></text>
						<text class="three-style-small" :style="{ background: modelData.titleSetColor }"></text>
					</div>
					{{ modelData.title }}
					<div class="tit-view-style tit-view-style-right">
						<text class="three-style-small" :style="{ background: modelData.titleSetColor }"></text>
						<text class="three-style-big" :style="{ background: modelData.titleSetColor }"></text>
					</div>
				</div>
				<div class="tit-three-text-c" v-if="modelData.title_two">{{ modelData.title_two }}</div>
			</div>
			<!--    标题栏风格4 -->
			<div class="tit-view-four" v-if="modelData.titleStyle === 4" :style="{ color: modelData.titleColor, backgroundColor: modelData.titleBgColor }">
				<div class="tit-four-text">{{ modelData.title }}</div>
				<div class="tit-four-text-c" v-if="modelData.title_two">{{ modelData.title_two }}</div>
			</div>
		</div>
		<ul v-if="modelData.navStyle === 2" class="cate-nav-s">
			<li class="cate-li" v-for="(item, index) in modelData.tabList" :key="index" :class="[index === tab_index ? 'cate-on' : '']" @click="changeTab(item, index)">
				{{ item.tabName }}
			</li>
		</ul>
		<div class="goods-div" :class="[modelData.type === 2 ? 'show-scroll' : '']">
			<ul v-if="modelData.colNum === 1">
				<li
					class="clearfix goods-box"
					v-for="(item, index) in modelData.navStyle === 2 ? tab_goods_list : goodsList"
					:key="index"
					@click="goPage(`/pagesT/product/product?id=${item.id}`)"
					:style="{ backgroundColor: modelData.itemBgColor || '#ffffff', color: modelData.textColor || '#333333' }"
				>
					<view v-if="item.brandName" class="brand-name primary-lg">{{ item.brandName }}</view>
					<view class="float_left img-box">
						<block v-if="item.isDistribution === 4">
							<view class="sale-end" v-if="!(item.inventorTotal - 0) || item.inventorTotal - 0 <= 0"><text class="ibonfont ibonbuhuozhong"></text></view>
						</block>
						<image class="goods-img-one" :src="item.images[0]" mode="aspectFill"></image>
					</view>
					<div class="float_left goods-info">
						<div class="goods-one-name ellipsis" v-if="modelData.goodsInfo.includes(1)">{{ item.title }}</div>
						<div class="goods-one-desc ellipsis" v-if="modelData.goodsInfo.includes(4)">{{ item.describe }}</div>
						<div class="goods-one-sale">
							<text v-if="modelData.goodsInfo.includes(5) && isSalesNum === 5">已售{{ item.realSalesNum || 0 }}</text>
						</div>
						<div class="goods-price clearfix">
							<view class="float_left price-view">
								<block v-if="!showGoodsPrice">
									<view class="now-priceG" v-if="modelData.goodsInfo.includes(2)">
										<text class="rmbG-icon" :style="{ color: modelData.priceColor || primaryColor }">¥</text>
										<view style="display: inline-block;font-size: 32rpx;" :style="{ color: modelData.priceColor || primaryColor }">
											<block v-if="item.isEq === 4"><rich-text :nodes="$_utils.splitPrice(item.minSalePrice)"></rich-text></block>
											<block v-else><rich-text :nodes="$_utils.splitPrice(item.maxSalePrice)"></rich-text></block>
										</view>
										<view class="vip-price clearfix" v-if="item.minMemberPrice > 0">
											<view class="price-text" v-if="item.isEq === 4">¥{{ item.minMemberPrice }}</view>
											<view class="price-text" v-else>¥{{ item.maxMemberPrice }}</view>
											<view class="price-bs">vip</view>
										</view>
									</view>
									<view class="decs-price" v-if="modelData.goodsInfo.includes(3) && !showGoodsPrice">¥{{ item.marketPrice || 0 }}</view>
								</block>
								<block v-else>
									<view class="now-priceG showGoodsPrice" v-if="modelData.goodsInfo.includes(2)">
										<text :style="{ color: modelData.priceColor || primaryColor }">{{ showGoodsPrice }}</text>
									</view>
								</block>
							</view>
							<div :style="{ color: modelData.btnColor }" class="float_right add-Car-div" @click.stop="openPopSku(index)">
								<text v-if="modelData.btnStyle === 2" class="ibonfont ibongouwuche1 p-background-img"></text>
								<text v-else class="ibonfont ibonxinzeng1 p-background-img"></text>
							</div>
						</div>
					</div>
				</li>
			</ul>
			<!-- 两列 -->
			<div class="more-col-view goods-two-ul" v-else-if="modelData.colNum === 2">
				<div class="more-col-li goods-two-li" v-for="(item, index) in modelData.navStyle === 2 ? tab_goods_list : goodsList" :key="index">
					<div :style="{ backgroundColor: modelData.itemBgColor }" class="goods-li" @click="goPage(`/pagesT/product/product?id=${item.id}`)">
						<div class="goods-img-box">
							<block v-if="item.isDistribution === 4">
								<view class="sale-end" v-if="!(item.inventorTotal - 0) || item.inventorTotal - 0 <= 0"><text class="ibonfont ibonbuhuozhong"></text></view>
							</block>
							<view v-if="item.brandName" class="goods-brand primary-lg">{{ item.brandName }}</view>
							<image class="goods-two-img" :src="item.images[0]" mode="aspectFill"></image>
						</div>
						<div class="goods-info-box">
							<div class="goods-two-name ellipsis" v-if="modelData.goodsInfo.includes(1)">{{ item.title }}</div>
							<div class="goods-price clearfix">
								<view class="float_left price-view" v-if="!showGoodsPrice">
									<view class="now-priceG" v-if="modelData.goodsInfo.includes(2)" :style="{ color: modelData.priceColor || primaryColor }">
										<text class="rmbG-icon" :style="{ color: modelData.priceColor || primaryColor }">¥</text>
										<view style="display: inline-block;">
											<block v-if="item.isEq === 4"><rich-text :nodes="$_utils.splitPrice(item.minSalePrice)"></rich-text></block>
											<block v-else><rich-text :nodes="$_utils.splitPrice(item.maxSalePrice)"></rich-text></block>
										</view>
									</view>

									<view class="vip-price clearfix" v-if="item.minMemberPrice > 0">
										<view class="price-text" v-if="item.isEq === 4">¥{{ item.minMemberPrice }}</view>
										<view class="price-text" v-else>¥{{ item.maxMemberPrice }}</view>
										<view class="price-bs">vip</view>
									</view>
									<block v-else>
										<text class="y-price" :style="{ color: changeColor(modelData.textColor, 0.35) }" v-if="modelData.goodsInfo.includes(3)">
											¥{{ item.marketPrice || 0 }}
										</text>
									</block>
								</view>
								<view class="float_left price-view" v-else>
									<text class="now-priceG showGoodsPrice" v-if="modelData.goodsInfo.includes(2)" :style="{ color: modelData.priceColor || primaryColor }">
										{{ showGoodsPrice }}
									</text>
								</view>

								<view :style="{ color: modelData.btnColor || primaryColor }" class="float_right add-Car-div" @click.stop="openPopSku(index)">
									<text v-if="modelData.btnStyle === 2" class="ibonfont ibongouwuche1 p-background-img"></text>
									<text v-else class="ibonfont ibonxinzeng1 p-background-img"></text>
								</view>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 三列 -->
			<div class="more-col-view" v-else>
				<div class="more-col-li goods-three-li" v-for="(item, index) in modelData.navStyle === 2 ? tab_goods_list : goodsList" :key="index">
					<div :style="{ backgroundColor: modelData.itemBgColor }" class="goods-li" @click="goPage(`/pagesT/product/product?id=${item.id}`)">
						<div class="goods-img-box">
							<block v-if="item.isDistribution === 4">
								<view class="sale-end" v-if="!(item.inventorTotal - 0) || item.inventorTotal - 0 <= 0"><text class="ibonfont ibonbuhuozhong"></text></view>
							</block>
							<view v-if="item.brandName" class="goods-brand primary-lg">{{ item.brandName }}</view>
							<image class="goods-three-img" :src="item.images[0]" mode="aspectFill"></image>
						</div>
						<div class="goods-info-box">
							<div class="goods-name ellipsis" v-if="modelData.goodsInfo.includes(1)">{{ item.title }}</div>
							<div class="goods-price clearfix">
								<view class="float_left now-priceG" v-if="!showGoodsPrice">
									<view v-if="modelData.goodsInfo.includes(2)" :style="{ color: modelData.priceColor || primaryColor }">
										<text class="rmbG-icon" :style="{ color: modelData.priceColor || primaryColor }">¥</text>
										<view style="display: inline-block;">
											<block v-if="item.isEq === 4"><rich-text :nodes="$_utils.splitPrice(item.minSalePrice)"></rich-text></block>
											<block v-else><rich-text :nodes="$_utils.splitPrice(item.maxSalePrice)"></rich-text></block>
										</view>
									</view>
								</view>
								<view class="float_left price-view" v-else>
									<text class="now-priceG showGoodsPrice" v-if="modelData.goodsInfo.includes(2)" :style="{ color: modelData.priceColor || primaryColor }">
										{{ showGoodsPrice }}
									</text>
								</view>

								<view :style="{ color: modelData.btnColor || primaryColor }" class="float_right add-Car-div" @click.stop="openPopSku(index)">
									<text v-if="modelData.btnStyle === 2" class="ibonfont ibongouwuche1 p-background-img"></text>
									<text v-else class="ibonfont ibonxinzeng1 p-background-img"></text>
								</view>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<AddCardModel :selAddress="selAddressD" @close="is_add_show = false" :isShow="is_add_show" @change="cardModelPopChange" :goodsId="goods_id" />
	</div>
</template>
<script>
import AddCardModel from '@/components/AddCardModel';
export default {
	name: 'GoodsGroup',
	components: {
		AddCardModel
	},

	props: {
		showGoodsPrice: {
			type: [Number, String],
			default: ''
		},
		modelData: {
			type: Object,
			default: () => {
				return {};
			}
		},
		goodsList: {
			type: Array,
			default: () => {
				return [];
			}
		},
		selAddress: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {
			source: '',
			tab_index: 0,
			tab_goods_list: [],
			add_goods: {
				images: []
			},
			buyNum: 1,
			goodsindex: 0,
			goods_id: 0,
			add_sku: {},
			is_add_show: false,
			isSalesNum: 4,
			selAddressD: {}
		};
	},
	watch: {
		selAddress(val) {
			this.selAddressD = val;
		}
	},
	created() {
		this.tab_goods_list = this.modelData.tabList[0].data || [];
		this.isSalesNum = this.$store.state.baseSet.isSalesNum;
	},
	methods: {
		changeColor(color, n) {
			return this.$u.colorToRgba(this.$_utils.hexify(color), n);
		},
		changeTab(row, index) {
			this.tab_index = index;
			this.tab_goods_list = row.data;
		},
		cardModelPopChange(obj) {
			if (!obj.show) {
				this.is_add_show = false;
			}
		},
		//打开加入购物车弹窗
		openPopSku(index) {
			// this.$refs.addCartPop.open();
			this.is_add_show = true;
			let row = {};
			// 因为不知道为什么直接把数据带过来会保错，所以我只能把index带过来
			if (this.modelData.navStyle === 2) {
				row = this.tab_goods_list[index];
			} else {
				row = this.goodsList[index];
			}
			this.goods_id = row.id;
			// this.add_goods = row;
		}
	}
};
</script>

<style lang="scss">
.cate-nav-s {
	white-space: nowrap;
	line-height: 70upx;
	width: 100%;
	overflow: hidden;
}

.cate-li {
	display: inline-block;
	font-size: 28upx;
	color: #666;
	font-weight: 400;
	padding: 0 20upx;
	text-align: center;
}

.cate-on:after {
	content: ' ';
	display: block;
	width: 50upx;
	margin: 0 auto;
	border-radius: 6upx;
	height: 6upx;
	background: $base-btn-bg;
	transform: translateY(-6upx);
}

.cate-on {
	color: $uni-color-primary;
	font-size: 32upx;
}

.goods-div {
	padding: 20upx 12rpx;
}

.show-scroll {
	height: 408upx;
	overflow: hidden;
}
.rmbG-icon {
	font-size: 22upx;
	font-weight: 400;
	margin-right: 2upx;
}
.vip-price {
	display: inline-block;
	vertical-align: middle;
	margin-left: 20rpx;
	line-height: 32rpx;
	height: 32rpx;
	border-radius: 3rpx;
	overflow: hidden;
	font-family: DINPro-Regular;
	.price-text {
		float: left;
		min-width: 80rpx;
		text-align: center;
		vertical-align: middle;
		font-size: 20rpx;
		color: #ffdfa2;
		background: linear-gradient(270deg, #1e5657 0%, #0d2b2c 100%);
		padding: 0 8rpx;
	}
	.price-bs {
		text-align: center;
		float: left;
		vertical-align: middle;
		width: 32rpx;
		background-color: #ffdfa2;
		font-size: 20rpx;
		color: #2c7564;
	}
}
.goods-price {
	.price-view {
		width: 246rpx;
		.now-priceG {
			font-family: DIN-Medium;
			color: $uni-color-error;
			display: inline-block;
			font-size: 32upx;
			font-weight: bold;
			line-height: 40upx;
		}

		.y-price {
			font-family: DIN-Medium;
			color: #d8d8d8;
			padding-left: 12upx;
			text-decoration: line-through;
			line-height: 42upx;
			font-weight: 400;
			font-size: 22upx;
		}
	}
}

.goods-box {
	padding: 20upx;
	margin-bottom: 20upx;
	background-color: #ffffff;
	color: #333333;
	margin-right: 20upx;
	border-radius: 16upx;
	position: relative;
	margin-left: 20rpx;
	box-shadow: 0px 2rpx 32rpx 0px rgba(110, 176, 138, 0.08);
	.img-box {
		position: relative;
		.goods-img-one {
			width: 260upx;
			height: 260upx;
			background-color: #f5f5f5;
			border-radius: 8upx;
		}
		.sale-end {
			position: absolute;
			width: 260upx;
			height: 260upx;
			border-radius: 8upx;
			display: block;
			left: 0;
			top: 0;
			text-align: center;
			z-index: 8;
			line-height: 260upx;
			background-color: rgba($color: #000000, $alpha: 0.3);
			.ibonfont {
				font-size: 120rpx;
				color: #ffffff;
			}
		}
	}
	.brand-name {
		position: absolute;
		top: 12rpx;
		left: 12rpx;
		padding: 0 10rpx;
		line-height: 32rpx;
		height: 32rpx;
		color: #ffffff;
		border-radius: 8rpx;
		font-size: 20rpx;
		z-index: 9;
	}
	.goods-info {
		padding-left: 20upx;
		width: calc(100% - 284rpx);
		.goods-one-name {
			margin-bottom: 20upx;
			font-size: 28rpx;
			font-weight: bold;
			color: #000000;
			height: 80rpx;
			line-height: 40rpx;
		}
		.goods-one-desc {
			height: 32rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #fa6400;
			line-height: 32rpx;
			margin-bottom: 20upx;
			-webkit-line-clamp: 1;
		}
		.decs-price {
			line-height: 28rpx;
			font-size: 24upx;
			color: #d8d8d8;
			text-decoration: line-through;
			font-weight: 400;
		}
		.goods-one-sale {
			height: 32rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #9d9d9d;
			line-height: 32rpx;
			margin-bottom: 10rpx;
		}
		.goods-price {
			height: 48rpx;
			line-height: 48rpx;
			font-size: 20rpx;
		}
	}
}

.title-view {
	font-size: 36rpx;
	font-weight: 500;
	color: #2a2a2a;
	padding-top: 24rpx;
	padding-bottom: 24rpx;
	padding-left: 20rpx;
	.second-tit {
		margin-left: 26rpx;
		min-width: 98rpx;
		padding: 0 20rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		background: linear-gradient(90deg, #ff9148 0%, #fa6400 100%);
		border-radius: 0px 24rpx 0px 24rpx;
		font-size: 20rpx;
		font-weight: 400;
		color: #ffffff;
		display: inline-block;
	}
}
.goods-li {
	background-color: #fff;
	margin-bottom: 24upx;
	// box-shadow: 0px 0px 10upx 4upx #f5f5f5;
}

.goods-info-box {
	padding: 20upx 16upx 16upx;
}

.more-col-view {
	display: -webkit-flex;
	display: flex;
	width: 100%;
	// justify-content: space-between;
	flex-wrap: wrap;

	.more-col-li {
		.goods-li {
			border-radius: 8upx;
			margin-right: 20upx;
		}
	}
}
.add-cart-view {
	background-color: #fff;
	padding: 40upx 30upx 30upx;
	position: relative;
	.close-icon-view {
		position: absolute;
		right: 30upx;
		top: 10upx;
		color: #999;
	}
	.goods-top {
		.goods-pop-img-view {
			width: 200upx;
			height: 200upx;
			background-color: #d0dee5;
			border-radius: 8upx;
			.goods-pop-img {
				width: 100%;
				height: 100%;
			}
		}
		.goods-top-cont {
			width: 440upx;
			.goods-top-name {
				font-size: 32upx;
				height: 86upx;
				-webkit-line-clamp: 2;
			}
			.goods-stock {
				color: #666;
				font-size: 24upx;
			}
			.goods-top-other {
				padding-top: 20upx;
				font-size: 28upx;
				.goods-price {
					color: $uni-color-error;
					font-size: 32upx;
					margin-right: 30upx;
				}
				.goods-markt-price {
					color: #999;
					line-height: 70upx;
					font-size: 24upx;
					text-decoration: line-through;
				}
			}
		}
	}
	.sku-view {
		padding-top: 30upx;
		.sku-label {
			font-size: 28upx;
			font-weight: 300;
		}
		.sku-ul {
			padding-top: 20upx;
			font-size: 28upx;
			.sku-li {
				float: left;
				min-width: 100upx;
				height: 60upx;
				line-height: 60upx;
				border: 1px solid #fd463e;
				color: #fd463e;
				text-align: center;
				border-radius: 6upx;
				margin-right: 20upx;
				margin-bottom: 20upx;
			}
			.sku-on {
				// background: linear-gradient(315deg, #fd463e 0%, #ff7f61 100%);
				border-color: #fff;
				color: #fff;
			}
		}
	}
	.add-pop-btn {
		width: 600upx;
		height: 70upx;
		line-height: 70upx;
		font-size: 28upx;
		// background: linear-gradient(315deg, #fd463e 0%, #ff7f61 100%);
		text-align: center;
		color: #fff;
		margin: 30upx auto 0;
		border-radius: 8upx;
	}
}

/*  标题栏风格2*/
.tit-view-two {
	padding: 20upx;
}
.tit-two-text {
	font-size: 32upx;
	font-weight: bold;
}
.tit-view-two-line {
	display: inline-block;
	width: 6upx;
	height: 32upx;
	background: #fd463e;
	vertical-align: middle;
	transform: translateY(-4upx);
	margin-right: 10upx;
}
.tit-two-text-c {
	padding-left: 10upx;
	font-size: 24upx;
}
/*  标题栏风格3*/
.tit-view-three {
	text-align: center;
	padding: 20upx;
}
.tit-three-text {
	font-size: 32upx;
	font-weight: bold;
	position: relative;
	display: inline-block;
	min-width: 128upx;
	height: 44upx;
}
.tit-view-style {
	position: absolute;
	line-height: 36upx;
}
.tit-view-style-left {
	left: -40upx;
	top: 4upx;
	transform: rotate(50deg);
}
.tit-view-style-left .three-style-small {
	// transform: translateX(-4upx);
	margin-left: 6upx;
}
.tit-view-style-right {
	right: -40upx;
	bottom: 4upx;
	transform: rotate(50deg);
}
.tit-view-style-right .three-style-small {
	// transform: translateX(4upx);
	margin-right: 6upx;
}
.tit-four-text-c,
.tit-three-text-c {
	font-size: 20upx;
	font-weight: 300;
	padding-top: 4upx;
}
.three-style-big {
	display: inline-block;
	width: 8upx;
	height: 36upx;
	background: #fd463e;
	border-radius: 8upx;
	vertical-align: middle;
}
.three-style-small {
	display: inline-block;
	width: 6upx;
	height: 16upx;
	background: #fd463e;
	opacity: 0.6;
	border-radius: 8upx;
	vertical-align: middle;
}
/*  标题栏风格4*/
.tit-view-four {
	text-align: center;
	padding: 20upx;
}
.tit-four-text {
	font-size: 32upx;
	font-weight: bold;
}
.tit-four-text:before {
	display: inline-block;
	content: '';
	width: 60upx;
	height: 1px;
	background: #333;
	vertical-align: middle;
	margin-right: 10upx;
}
.tit-four-text:after {
	display: inline-block;
	content: '';
	width: 60upx;
	height: 2upx;
	background: #333;
	vertical-align: middle;
	margin-left: 10upx;
}
// 加入购物车按钮
.add-Car-div {
	// color: #fd463e;
	.ibonfont {
		font-size: 40rpx;
		background-image: -webkit-linear-gradient(45deg, #fe923e 0%, #ff3724 100%);
		-webkit-background-clip: text;
		color: transparent;
		display: inline-block;
	}
}

.more-col-view {
	padding-left: 10rpx;
	.goods-three-li {
		.goods-li {
			margin-right: 12rpx;
			width: 226rpx;
			border-radius: 10rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 32rpx 0 rgba(110, 176, 138, 0.08);
			.goods-img-box {
				padding-top: 24rpx;
				position: relative;
				.sale-end {
					position: absolute;
					width: 190rpx;
					height: 190rpx;
					border-radius: 10upx;
					display: block;
					left: 50%;
					top: 50%;
					transform: translate(-50%, calc(-50% + 12rpx));
					text-align: center;
					z-index: 8;
					line-height: 190rpx;
					background-color: rgba($color: #000000, $alpha: 0.3);
					.ibonfont {
						font-size: 120rpx;
						color: #ffffff;
					}
				}
				.goods-brand {
					z-index: 9;
					position: absolute;
					padding: 0 10rpx;
					height: 32rpx;
					font-size: 20rpx;
					font-weight: 500;
					line-height: 32rpx;
					left: 8rpx;
					top: 8rpx;
					color: #ffffff;
					border-radius: 8rpx;
					background: linear-gradient(139deg, #fd0000 0%, #fa6400 100%);
				}
				.goods-three-img {
					width: 190rpx;
					background-color: #f5f5f5;
					height: 190rpx;
					display: block;
					margin: 0 auto;
					border-radius: 10rpx;
				}
			}
			.goods-info-box {
				.goods-name {
					height: 72rpx;
					line-height: 36rpx;
					font-weight: 600;
				}
				.goods-price {
					font-weight: 500;
					font-family: DIN-Medium;
				}
			}
		}
	}
	.goods-two-li {
		.goods-li {
			width: 334rpx;
			margin-right: 15rpx;
			box-shadow: 0px 2rpx 32rpx 0px rgba(110, 176, 138, 0.08);
			border-radius: 16rpx;
		}
		.goods-img-box {
			padding-top: 30rpx;
			position: relative;
			.sale-end {
				position: absolute;
				width: 260rpx;
				height: 260rpx;
				border-radius: 10upx;
				display: block;
				left: 50%;
				top: 50%;
				transform: translate(-50%, calc(-50% + 14rpx));
				text-align: center;
				z-index: 8;
				line-height: 260rpx;
				background-color: rgba($color: #000000, $alpha: 0.3);
				.ibonfont {
					font-size: 120rpx;
					color: #ffffff;
				}
			}
			.goods-brand {
				position: absolute;
				padding: 0 10rpx;
				height: 32rpx;
				font-size: 20rpx;
				font-weight: 500;
				line-height: 32rpx;
				left: 10px;
				top: 16rpx;
				color: #ffffff;
				border-radius: 8rpx;
				background: linear-gradient(139deg, #fd0000 0%, #fa6400 100%);
			}
			.goods-two-img {
				background-color: #f5f5f5;
				display: block;
				width: 260rpx;
				height: 260rpx;
				border-radius: 8rpx;
				margin: 0 auto;
			}
		}
		.goods-info-box {
			.goods-two-name {
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
				height: 80rpx;
				line-height: 40rpx;
			}
			.goods-price {
				padding-top: 4rpx;
			}
		}
	}
}
.goods-two-ul {
	padding-left: 20rpx;
}
</style>