caimei-applets-hehe/components/cm-module/listTemplate/immediatelyList.vue

<template>
	<view
		class="container commodity-list-wrapper"
		:style="{ overflow: showSkeleton ? 'hidden' : 'auto', height: showSkeleton ? windowHeight + 'px' : 'auto' }"
	>
		<view class="good-search clearfix" v-if="searchStatus">
			<view class="search-from name">
				<text class="iconfont icon-sousuo"></text>
				<input
					class="input"
					type="text"
					:focus="isFocus"
					confirm-type="search"
					v-model="searchInputVal"
					placeholder="请输入商品关键词"
					@input="onShowClose"
					@confirm="searchOpertor(tabIndex)"
					maxlength="20"
				/>
				<!-- <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText(tabIndex)"></text> -->
			</view>
		</view>
		<!-- 骨架 -->
		<list-skeleton v-if="showSkeleton"></list-skeleton>
		<!-- 商品为空时 -->
		<view class="empty-container" v-if="isShowEmpty">
			<image
				class="empty-container-image"
				src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"
			></image>
			<text class="error-text">{{ isShowEmptyText }}</text>
		</view>
		<!-- 单一商品 -->
		<view class="product-container" v-else>
			<scroll-view
				:style="{ height: scrollHeight + 'px' }"
				@scrolltolower="scrolltolower(tabIndex)"
				scroll-y
				v-if="listData.length > 0"
			>
				<view
					v-for="(item, index) in 10"
					:key="index"
					:id="item.id"
					class="all-type-list-content commodity-list"
					@click.stop="navToDetailPage(item.p_id)"
				>
					<image
						mode="widthFix"
						src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"
						class="list-img"
						alt="list-img"
					></image>
					<view class="list-details-info">
						<!-- 商品名称 -->
						<text class="list-details-title">韩国恩盛进口氢洁气小气泡清韩国恩盛进口氢洁气小气泡清</text>
						<!-- 商品标签 -->
						<view class="list-details-tags">
							<tui-tag type="danger" class="tag" padding="6rpx" size="20rpx" plain>商品标签</tui-tag>
						</view>
						<text class="list-details-specs">规格：30g×5片/盒</text>
						
						<!-- 商品价格 -->
						<view class="goods-price">
							<view class="price"> ￥23333.00 </view> <view class="shop-btn" @click.stop="showAddCartModal"> 购买 </view>
						</view>
					</view>
				</view>
				<view v-if="showLoading && listData.length > 4 && !showRegularBtn">
					<view class="loading-wrapper loading-wrapper-now" v-if="loadingNow"
						>{{ loadingText }}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view
					>
					<view class="loading-wrapper loading-wrapper-btm" v-else>———<text class="btm-text">已至底部</text>———</view>
				</view>
			</scroll-view>
			<!-- 组合商品 -->
		</view>
		<!-- 可拖动悬浮按钮 -->
		<cm-drag
			:cartNum="cartQuantity"
			:isDock="true"
			:existTabBar="true"
			@btnClick="btnClick"
			@btnTouchstart="btnTouchstart"
			@btnTouchend="btnTouchend"
		>
		</cm-drag>
		<!-- 透明模态层 -->
		<modal-layer v-if="false"></modal-layer>
	</view>
</template>

<script>
import listSkeleton from '@/components/cm-module/listTemplate/listSkeleton'
import modalLayer from '@/components/modal-layer'
import uniStars from '@/components/uni-stars/uni-stars.vue'
import cmDrag from '@/components/cm-custom/cm-drag.vue'
import tuiTag from '@/components/thorui/tui-tag/tui-tag'
import { mapState, mapMutations } from 'vuex'
export default {
	name: 'productList',
	components: {
		listSkeleton,
		modalLayer,
		uniStars,
		cmDrag,
		tuiTag
	},
	props: {
		searchStatus: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			isShowClose: false,
			searchInputVal: '',
			isModallayer: false,
			windowHeight: '',
			showSkeleton: false,
			priceLoading: true,
			isShowEmpty: false,
			isShowEmptyText: '搜索相关商品',
			clubUserId: '',
			identity: '',
			isFocus: false,
			scrollHeight: '',
			listData: [],
			combinationProduct: [],
			zuheProductList: [], //组合商品列表
			showLoading: false,
			loadingNow: true,
			loadingText: '上拉加载更多',
			pageSize: 20,
			zuhepageSize: 5,
			pageNum: 1,
			totalPage: 1,
			hasNextPage: false,
			pullFlag: true,
			fromRegularPurchasePage: false,
			cartQuantity: 0,
			showRegularBtn: false,
			isPrecedence: false,
			ladderPriceList: [], //是否 阶梯,
			tabIndex: 0,
			goodsList: [],
			tabBars: [{ name: '单一', id: 'danyi' }, { name: '组合', id: 'zuhe' }],
			isShow: false,
		}
	},
	created() {
		this.setScrollHeight()
		this.$api
			.getComStorage('userInfo')
			.then(resolve => {
				if (resolve.userIdentity == 1) {
					this.identity = 1
				}
			})
			.catch(error => {
				console.log(error)
			})
		this.$api.getComStorage('orderUserInfo').then(resolve => {
			this.clubUserId = resolve.userID
		})
		this.getProductAgainInfo()
		this.isFocus = true
	},
	filters: {
		NumFormat: function(text) {
			//处理金额
			return Number(text).toFixed(2)
		}
	},
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	methods: {
		closeDrawer(){
			this.visible = false
		},
		// 数量选择框
		showAddCartModal() {
			this.visible = true
		},
		scrolltolower(tabIndex) {
			if (tabIndex == 0) {
				if (this.totalPage > this.listData.length && this.pullFlag) {
					this.getProductAgainInfo(true)
				}
			} else if (tabIndex == 1) {
				if (this.hasNextPage && this.pullFlag) {
					this.getcombinationProduct(true)
				}
			}
		},
		setScrollHeight() {
			const { windowHeight, pixelRatio } = wx.getSystemInfoSync()
			this.windowHeight = windowHeight - 1
			this.scrollHeight = windowHeight - 66
		},
		getProductAgainInfo(loadMore) {
			this.showLoading = true
			this.priceLoading = true
			this.loadingNow = true
			this.loadingText = '加载中'
			this.isShowEmpty = false
			if (loadMore) {
				this.pageNum += 1
			}
			let params = {
				identity: this.identity,
				keyword: this.searchInputVal,
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				sortField: '',
				sortType: ''
			}
			this.ProductService.GetProductSearchList(params)
				.then(response => {
					this.isShowWrapper = true
					const resData = JSON.parse(response.data)
					const resList = resData.items
					if (resList && resList.length > 0) {
						this.totalPage = resData.total
						this.showEmpty = false
						if (loadMore) {
							this.listData = [...this.listData, ...resList]
							this.getProductPrice()
						} else {
							this.listData = [...resList]
							this.getProductPrice()
							this.showSkeleton = false
						}
						// 防上拉暴滑
						this.pullFlag = false
						setTimeout(() => {
							this.pullFlag = true
						}, 500)
						// 底部提示文案
						if (this.totalPage > this.listData.length) {
							this.loadingText = '上拉加载更多'
						} else {
							this.showLoading = true
							this.loadingNow = false
						}
					} else {
						if (!loadMore) {
							this.isShowEmpty = true
							this.isShowEmptyText = '暂无相关商品'
						}
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		getProductPrice() {
			//获取商品或者活动价格
			let productIdArr = []
			let productIds = ''
			this.listData.map(item => {
				// 0公开价格 1不公开价格 2仅对会员机构公开
				productIdArr.push(item.p_id)
			})
			productIds = productIdArr.join(',')
			this.ProductService.querySearchProductPrice({ userId: this.clubUserId, productIds: productIds })
				.then(response => {
					this.listData = this.ReturnNewProducts(this.listData, response.data)
					this.priceLoading = false
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		ReturnNewProducts(Array, list) {
			//合并字段
			let NewArray = []
			Array.map(item => {
				for (let i = 0; i < list.length; i++) {
					if (item.p_id == list[i].productId) {
						NewArray.push(Object.assign(item, list[i]))
					}
				}
			})
			return NewArray
		},
		searchOpertor(tabIndex) {
			//搜索商品
			if (tabIndex == 0) {
				if (this.searchInputVal == '') {
					this.$util.msg('请输入商品关键词', 2000)
				} else {
					this.pageNum = 1
					this.showSkeleton = true
					this.getProductAgainInfo()
					this.isFocus = false
				}
			} else {
				this.pageNum = 1
				this.showSkeleton = true
				this.getcombinationProduct()
				this.isFocus = false
			}
		},
		getcombinationProduct(loadMore) {
			//组合搜索商品
			this.showLoading = true
			this.loadingNow = true
			this.loadingText = '加载中'
			this.isShowEmpty = false
			if (loadMore) {
				this.pageNum += 1
			}
			let params = {
				clubUserId: this.clubUserId,
				pageNum: this.pageNum,
				pageSize: this.zuhepageSize,
				searchWord: this.searchInputVal
			}
			this.SellerService.GetCombinationProduct(params)
				.then(response => {
					this.isShowWrapper = true
					const responseData = response.data
					if (responseData.results && responseData.results.length > 0) {
						this.hasNextPage = responseData.hasNextPage
						this.isShowEmpty = false
						if (loadMore) {
							this.combinationProduct = [...this.combinationProduct, ...responseData.results]
						} else {
							this.combinationProduct = [...responseData.results]

							this.showSkeleton = false
						}
						// 防上拉暴滑
						this.pullFlag = false
						setTimeout(() => {
							this.pullFlag = true
						}, 500)
						// 底部提示文案
						if (this.hasNextPage) {
							this.loadingText = '上拉加载更多'
						} else {
							this.showLoading = true
							this.loadingNow = false
						}
					} else {
						this.isShowEmpty = true
						this.isShowEmptyText = '暂无相关商品'
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		changeCountAdd(item, pros) {
			//商品数量加加
			if (pros.initProductNum == 0) {
				pros.initProductNum = pros.minBuyNumber
				this.processActivityPrice(pros)
			} else if (pros.initProductNum >= pros.minBuyNumber) {
				pros.initProductNum++
				this.processActivityPrice(pros)
			}
			this.totalPeice(item)
			this.totalCount(item)
			this.totalKind(item)
		},
		changeCountSub(item, pros) {
			//商品数量减减
			if (pros.initProductNum == 0) {
				this.$util.msg(`采购数量不能小于0`, 2000)
				return
			} else if (pros.initProductNum == pros.minBuyNumber) {
				pros.initProductNum = 0
				this.processActivityPrice(pros)
			} else {
				pros.initProductNum--
				this.processActivityPrice(pros)
			}
			this.totalPeice(item)
			this.totalCount(item)
			this.totalKind(item)
		},
		changeNnmber(e, item, pros) {
			//输入商品数量更新
			let _value = e.detail.value
			if (!this.$api.isNumber(_value)) {
				pros.initProductNum = pros.minBuyNumber
			} else if (_value < pros.minBuyNumber) {
				this.$util.msg(`该商品最小起订量为${pros.minBuyNumber}`, 2000)
				pros.initProductNum = pros.minBuyNumber
			} else {
				pros.initProductNum = parseInt(e.detail.value)
				this.processActivityPrice(pros)
			}
			this.totalPeice(item)
			this.totalCount(item)
			this.totalKind(item)
		},
		totalPeice(item) {
			//计算总价格,每次调用此方法，将初始值为0，遍历价格并累加
			let prosPrice = 0
			let productsList = []
			productsList = item.combinationProductList
			productsList.forEach(pros => {
				prosPrice += pros.retailPrice * pros.initProductNum
				item.productTotalAmount = prosPrice
			})
			// console.log(prosPrice)
		},
		totalCount(item) {
			//计算总数量
			let prosAllCount = 0
			let productsList = []
			productsList = item.combinationProductList
			productsList.forEach(pros => {
				prosAllCount += parseInt(pros.initProductNum)
				item.productTotalNum = prosAllCount
			})
			// console.log(prosAllCount)
		},
		totalKind(item) {
			//计算商品种类
			let productsList = []
			let checkList = []
			productsList = item.combinationProductList
			productsList.forEach(pros => {
				if (pros.initProductNum > 0) {
					checkList.push(pros)
					item.productKind = checkList.length
				} else {
					item.productKind = checkList.length
				}
			})
		},
		processActivityPrice(pros) {
			//单独处理活动价格和阶梯价格
			let ladderPriceList = pros.ladderPriceList
			if (pros.ladderPriceFlag == '0' || pros.actStatus == 1) {
				pros.totalPrice = pros.initProductNum * pros.retailPrice
			} else {
				ladderPriceList.forEach((item, index) => {
					if (pros.initProductNum >= item.buyNum) {
						pros.retailPrice = item.buyPrice
						pros.totalPrice = pros.initProductNum * item.buyPrice
					}
				})
			}
		},
		operationHanld(prop) {
			this.$emit('operationConfim', prop)
		},
		alertjieti(pros) {
			this.$emit('alertjietiConfim', pros)
		},
		changeTab(index) {
			this.tabIndex = index
			if (index == 0) {
				this.pageNum = 1
				this.getProductAgainInfo()
			} else {
				this.getcombinationProduct()
			}
			// this.$emit('changetab',index);
		},
		navToDetailPage(id) {
			this.isModallayer = true
			this.$api.navigateTo(`/pages/goods/product?id=${id}`)
			this.isModallayer = false
		},
		repurchModel() {
			this.$util.modal('', '此商品的价格有变化,原来的购买价已不适用', '知道了', '', false, () => {})
		},
		onShowClose() {
			//输入框失去焦点时触发
			if (this.searchInputVal != '') {
				this.isShowClose = true
			} else {
				this.isShowClose = false
			}
		},
		delInputText(tabIndex) {
			//清除输入框内容
			if (tabIndex == 0) {
				this.searchInputVal = ''
				this.listData = []
				this.isFocus = true
				this.isShowClose = false
				this.loadingNow = false
				this.isShowEmpty = true
				this.isShowEmptyText = '暂无相关商品'
			} else {
				this.searchInputVal = ''
				this.isShowClose = false
				this.isFocus = true
				this.getcombinationProduct()
			}
		},
		isInterceptHtmlFn(text) {
			let name = this.$reg.interceptHtmlFn(text)
			return name
		},
		PromotionsFormat(promo) {
			//促销活动类型数据处理
			if (promo != null) {
				if (promo.type == 1 && promo.mode == 1) {
					return true
				} else {
					return false
				}
			}
			return false
		},
		btnClick() {
			this.$emit('goCartPage')
		},
		btnTouchstart() {
			// console.log('btnTouchstart');
		},
		btnTouchend() {
			// console.log('btnTouchend');
		}
	}
}
</script>

<style lang="scss">
.all-zuhe-list {
	background: #ffffff;
}

.foot_conten {
	width: 655rpx;
	background: #fff;
	font-size: 28rpx;
	height: 80rpx;
	// line-height: 80rpx;
	display: inherit;
	padding: 10px;
	overflow: hidden;
	margin: 20rpx auto;
}
.zuhe_foot-box {
	float: left;
	overflow: hidden;
	white-space: nowrap;
	// text-overflow: ellipsis;
	width: 490rpx;
}
.zuhe_foot-box text {
	margin-right: 36rpx;
}
.foot_text {
	color: #ff2a2a;
}
.foot_conten .buycart {
	width: 162rpx;
	height: 64rpx;
	background: #efaf00 !important;
	color: #fff;
	font-size: 26rpx;
	border-radius: 36rpx;
	text-align: center;
	line-height: 64rpx;
	float: right;
}
.price-none {
	font-size: 24rpx;
	color: #666666;
}
.zuhe_title {
	background: #ffffff;
	height: 76rpx;
	font-size: 28rpx;
	color: #1675e1;
	border-bottom: 4rpx solid #1675e1;
	line-height: 76rpx;
	padding-left: 30rpx;
	&.active {
		color: #e15616;
		border-bottom: 4rpx solid #e15616;
	}
}
.tabstyle {
	width: 128rpx;
	height: 76rpx;
	font-size: 26rpx;
	display: inline-block;
	border-radius: 10rpx;
	text-align: center;
	line-height: 76rpx;
	border: 2rpx solid #eeeeee;
	position: relative;
	margin-right: 12rpx;
	&.addstyle {
		background: $btn-confirm;
		color: #ffffff;
		&::before {
			content: '';
			width: 0;
			height: 0;
			border-top: 20rpx solid transparent;
			border-right: 20rpx solid #ffffff;
			border-left: 20rpx solid transparent;
			border-bottom: 20rpx solid #ffffff;
			position: absolute;
			right: 0;
			bottom: 0;
		}
	}
	.icon-gou {
		width: 36rpx;
		height: 36rpx;
		line-height: 36rpx;
		text-align: center;
		color: #e15616;
		position: absolute;
		bottom: -5rpx;
		right: -5rpx;
		font-weight: bold;
		font-size: $font-size-28;
	}
}
.commodity-list-wrapper {
	.product-container {
		padding-top: 130rpx;
	}
	scroll-view {
		height: 100%;
	}
	.show-more-btn {
		width: 276rpx;
		height: 52rpx;
		line-height: 52rpx;
		border: 2rpx solid #d8d8d8;
		background: #f7f7f7;
		font-size: 26rpx;
		margin: 26rpx 0;
		position: absolute;
		left: 50%;
		margin-left: -138rpx;
	}
}
.good-search {
	position: fixed;
	top: 0;
	z-index: 999;
	background-color: #fff;
	width: 702rpx;
	height: 66rpx;
	padding: 32rpx 24rpx;
	.search-from {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-left: 30rpx;
		width: 702rpx;
		height: 66rpx;
		background-color: #f7f7f7;
		border-radius: 33rpx;
		line-height: 64rpx;
		.icon-sousuo {
			width: 64rpx;
			height: 64rpx;
			text-align: center;
			font-size: $font-size-32;
		}
		.input {
			font-size: $font-size-26;
		}
	}
}
.all-type-list-content {
	// height: 240rpx;
	padding: 24rpx;
	background: #fff;
	margin-bottom: 2rpx;
	display: flex;
	flex-direction: row;
	box-sizing: content-box;
	.list-img {
		width: 312rpx;
		height: 207rpx !important;
		margin-right: 26rpx;
		border-radius: 10rpx;
		border: 2rpx solid #f3f3f3;
	}
}
.zuhe-list-content {
	width: 655rpx;
	// height: 214rpx;
	background: #fff;
	border: 2rpx solid #def4ff;
	display: flex;
	flex-direction: row;
	box-sizing: content-box;
	margin-top: 10rpx;
	border-radius: 14rpx;
	margin: 10rpx auto;
	padding: 20rpx;
	&.stylecontent {
		border: 2rpx solid #fff0de;
	}
}

.list-details-info {
	width: 100%;
	flex-direction: column;
	font-size: 26rpx;
	position: relative;
	.list-details-title {
		line-height: 38rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.list-details-tags {
		display: flex;
		justify-content: flex-start;
		margin: 10rpx 0;
		height: 34rpx;
	}
	.goods-price {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.price {
			font-size: 26rpx;
			font-weight: bold;
			color: $uni-text-color-price;
		}
		.shop-btn {
			width: 160rpx;
			height: 56rpx;
			border: 1px solid #333333;
			border-radius: 28rpx;
			text-align: center;
			line-height: 56rpx;
			box-sizing: border-box;
		}
	}
	.list-details-specs {
		width: 100%;
		display: inline-block;
		margin: 5rpx 0;
		color: #999;
		font-size: 20rpx;
		line-height: 28rpx;
	}
	.list-details-miniQuantity {
		width: 100%;
		display: inline-block;
		margin-top: 7rpx;
	}
}
.list-details-price {
	width: 100%;
	.floor-item-act {
		height: 54rpx;
		text-align: center;
		box-sizing: border-box;
		float: left;
		.floor-tags {
			height: 28rpx;
			border-radius: 6rpx;
			background-color: #ffffff;
			line-height: 28rpx;
			color: $color-system;
			text-align: center;
			display: inline-block;
			padding:0 5rpx;
			font-size: $font-size-20;
			margin-left: 15rpx;
			border: 1px solid #e15616;
		}
	}
	.price-icon {
		width: 22rpx;
		height: 28rpx;
		vertical-align: middle;
		margin-right: 10rpx;
	}
	.price-icon + text {
		font-size: 25rpx;
		vertical-align: middle;
	}
	.list-login-now {
		width: 375rpx;
		color: #f8c499;
		.p-no {
			float: left;
			font-size: $font-size-24;
			color: $color-system;
			margin-right: 10rpx;
		}
	}
	.login-now {
		padding: 10rpx 10rpx 10rpx 0;
	}
	.list-none {
		margin-top: 15rpx;
		.price-small {
			font-size: $font-size-24;
			line-height: 40rpx;
			color: #ff2a2a;
		}
	}
	.list-price-loding {
		font-size: $font-size-24;
		line-height: 54rpx;
		color: #ff2a2a;
	}
	.list-shop {
		float: left;
		overflow: hidden;
		&.com {
			width: 100%;
		}
		.list-price {
			color: #ff2a2a;
			float: left;
			line-height: 54rpx;
			align-items: center;
			justify-content: center;
			.price-larger {
				font-size: $font-size-26;
				display: inline-block;
				&.none {
					text-decoration: line-through;
					color: #999999;
				}
			}
			.list-price-all {
				width: 100%;
				float: left;
			}
			.zuhe_price-larger {
				width: 100%;
				float: left;
				height: 54rpx;
				color: #666666;
				.price-larger {
					float: left;
					margin-right: 20rpx;
				}
			}
			.price-two {
				color: #666666;
				float: left;
			}
			.zuhe_list_zj {
				color: #ff2a2a;
			}
			.price-view {
				display: inline-block;
				width: 40rpx;
				border-radius: 10rpx;
				font-size: $font-size-22;
				text-align: center;
				color: #ffffff;
				height: 36rpx;
				line-height: 36rpx;
				margin-right: 8rpx;
				&.ladder {
					background: linear-gradient(135deg, rgba(255, 0, 0, 1) 0%, rgba(242, 143, 49, 1) 100%);
				}
				&.activity {
					background: linear-gradient(135deg, rgba(128, 0, 255, 1) 0%, rgba(242, 49, 153, 1) 100%);
				}
			}
		}
		.zuhe_list_price .price-view {
			margin-left: 20rpx;
			float: left;
			margin-top: 5rpx;
		}
		.zuhe_list_price {
			width: 100%;
			overflow: hidden;
			margin-top: 10rpx;
		}
		.count {
			float: right;
			border: 1px solid #eeeeee;
			border-radius: 10rpx;
			.number-box {
				display: flex;
				justify-content: center;
				align-items: center;
				.iconfont {
					font-size: $font-size-24;
					padding: 0 16rpx;
					color: $text-color;
					text-align: center;
					line-height: 48rpx;
					font-weight: bold;
				}
				.btn-input {
					width: 100rpx;
					height: 48rpx;
					line-height: 48rpx;
					background: #f8f8f8;
					border-radius: 4rpx;
					text-align: center;
					font-size: $font-size-24;
					border-right: 1px solid #eeeeee;
					border-left: 1px solid #eeeeee;
				}
			}
		}
		.list-price-none {
			width: 100%;
			.price-none {
				text-decoration: line-through;
				color: #999999;
				display: inline-block;
			}
			.icon-wenhao {
				font-size: $font-size-32;
				color: #0091ff;
				margin-left: 6rpx;
			}
		}
	}
	.add-cart-btn {
		flex: 4;
		width: 140rpx;
		height: 54rpx;
		line-height: 54rpx;
		border-radius: 27rpx;
		color: #fff;
		font-size: 24rpx;
		margin-right: 0;
		background: #ffffff;
		border: 1px solid #c9c9c9;
		color: $text-color;
	}
	.zuhe_btn {
		float: right;
	}
}
.zuhe_list_price {
	display: block !important;
}
.zuhe_list_text {
	margin-top: 0;
}
</style>