caimei-applets-mcare/pages/goods/good-hot.vue

<template>
	<view class="container floor clearfix">
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		></tui-skeleton>
		<view v-else>
			<view class="container-topcontent">
				<view class="topcontent-image" :style="{ paddingTop: StatusBar + 'px' }">
					<view
						class="topcontent-title"
						:class="fixedClass"
						:style="{ paddingTop: fixedClass == 'fixed' ? StatusBar + 'px' : '0'}"
					>
						采美新品橱窗
						<view class="topcontent-title-icon" @click="haveBack" :style="{ top: fixedClass == 'fixed' ? (StatusBar+7) + 'px' : '14rpx'}">
							<text class="iconfont icon-fanhui"></text>
						</view>
					</view>
				</view>
				<view class="topcontent-swiper" :style="{ top: StatusBar + 44 + 'px' }">
					<view class="swiper-goods">
						<view class="swiper-banner-box">
							<swiper
								class="tui-banner-swiper tui-banner tui-skeleton-fillet"
								:autoplay="true"
								:interval="5000"
								:duration="500"
								@change="swiperChange"
								:circular="true"
							>
								<swiper-item
									v-for="(item, index) in topGoodList"
									:key="index"
									@click.stop="navToDetailPage(item.productId)"
								>
									<view class="swiper-goods-image">
										<image :src="item.mainImage" mode="scaleToFill" />
									</view>
									<view class="swiper-goods-info">
										<view class="swiper-goods-name"> {{ item.name }} </view>
										<view class="swiper-goods-btn"> <view class="btn"> 立即购买 </view> </view>
									</view>
								</swiper-item>
							</swiper>
							<view class="swiper__dots-box" v-if="topGoodList.length > 1">
								<view
									v-for="(item, idx) in topGoodList"
									:key="idx"
									:class="[idx === current ? 'swiper__dots-long' : 'none']"
									:data-index="current"
									class="swiper__dots-item"
								>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="container-screen">
				<view class="container-screen-box" @click="showDropShow">
					<view class="screen-box-em">品牌</view>
					<view class="screen-box-mi" v-if="!dropShow">
						<view class="screen-list" :class="isAllcheckedBrand ? 'active' : ''">全部</view>
						<view class="screen-list" v-for="(brand, index) in brandList" :key="index" v-if="index < 2">
							{{ brand.name }}
						</view>
					</view>
					<view class="screen-box-sp">
						<text
							class="iconfont"
							:class="dropShow ? 'icon-xiangshangjiantou' : 'icon-xiangxiajiantou'"
						></text>
					</view>
				</view>
				<view class="container-screen-popup" v-if="dropShow">
					<!-- <uni-transition mode-class="slide-top" :show=""> -->
					<view class="container-screen-popupbox">
						<!--header 顶部下拉选择框-->
						<scroll-view class="tui-scroll-box" scroll-y scroll-with-animation :scroll-top="scrollTop">
							<view class="screen-list" :class="isAllcheckedBrand ? 'active' : ''" @click="choiceBrandAll"
								>全部</view
							>
							<view
								class="screen-list"
								v-for="(brand, index) in brandList"
								:key="index"
								@click="choiceBrand(brand, index)"
								:class="brand.isChecked ? 'active' : ''"
							>
								{{ brand.name }}
							</view>
						</scroll-view>
						<view class="container-screen-btnbox">
							<view class="btns" @tap="btnCloseDrop">确定</view>
						</view>
					</view>
					<!-- </uni-transition> -->
				</view>
			</view>
			<!-- 楼层 -->
			<view class="container-section tui-skeleton">
				<view class="floor-item-banner ad_01" v-if="appletsBanner">
					<image class="item-img-gg" :src="appletsBanner"></image>
				</view>
				<view class="section_page_main clearfix">
					<view
						class="floor-item clearfix"
						v-for="(pros, idx) in productList"
						:key="idx"
						@click.stop="navToDetailPage(pros.productId)"
					>
						<image class="item-img tui-skeleton-fillet" :src="pros.image" mode="aspectFill"></image>
						<view class="floor-item-type" v-if="pros.productType == 2">医疗器械</view>
						<view class="floor-item-content">
							<view class="title tui-skeleton-rect">
								<text class="mclap-tag" v-if="pros.beautyActFlag == '1'">美博会</text>
								<text class="mclap" :class="pros.beautyActFlag == '1' ? 'indent' : ''"
									>{{ pros.name }}
								</text>
							</view>
							<view class="floor-item-price">
								<view class="floor-item-act">
									<view class="coupon-tags" v-if="pros.couponsLogo">优惠券</view>
									<template v-if="pros.actStatus === 1">
										<view class="floor-tags" v-if="PromotionsFormat(pros.promotions)">
											{{ pros.promotions.name }}
											<text v-if="pros.priceFlag != 1">:￥{{ pros.price | NumFormat }}</text>
										</view>
										<view class="floor-tags" v-else>{{ pros.promotions.name }}</view>
									</template>
									<template v-if="pros.svipProductFlag == 1">
										<view class="svip-tags">
											<view class="tags" :class="{ none: vipFlag != 1 }">SVIP</view>
											<view class="price" v-if="isShowVipFlag(pros)">{{
												pros.svipPriceTag
											}}</view>
										</view>
									</template>
								</view>
								<view v-if="hasLogin" class="list-price">
									<template v-if="userIdentity == 1">
										<text
											class="price-larger"
											:class="
												PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
													? 'none'
													: ''
											"
										>
											￥{{
												(PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
													? pros.originalPrice
													: pros.price) | NumFormat
											}}
										</text>
									</template>
									<template v-if="userIdentity == 4 && vipFlag != 1">
										<view class="price-larger" v-if="pros.priceFlag == 1">
											<text class="txt">￥未公开价格</text>
										</view>
										<view class="price-larger" v-if="pros.priceFlag == 2">
											<text class="txt">￥价格仅会员可见</text>
										</view>
										<view class="price-larger" v-else-if="pros.priceFlag == 3">
											<text class="txt">￥仅医美机构可见</text>
										</view>
										<text
											v-else
											class="price-larger"
											:class="
												PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
													? 'none'
													: ''
											"
										>
											￥{{
												(PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
													? pros.originalPrice
													: pros.price) | NumFormat
											}}
										</text>
									</template>
									<template v-if="userIdentity == 3">
										<template v-if="pros.shopId === shopId">
											<view class="price-larger" v-if="pros.priceFlag == 1">
												<text class="txt">￥未公开价格</text>
											</view>
											<text
												v-else
												class="price-larger"
												:class="
													PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
														? 'none'
														: ''
												"
											>
												￥{{
													(PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
														? pros.originalPrice
														: pros.price) | NumFormat
												}}
											</text>
										</template>
										<template v-else>
											<view class="list-login-now">
												<text class="p-no">￥</text>
												<uni-grader :grade="Number(pros.priceGrade)"></uni-grader>
											</view>
										</template>
									</template>
									<template v-if="userIdentity == 2 || (userIdentity == 4 && vipFlag == 1)">
										<view class="price-larger" v-if="pros.priceFlag == 1">
											<text class="txt">￥未公开价格</text>
										</view>
										<view class="price-larger" v-if="pros.priceFlag == 3 && firstClubType != 1">
											<text class="txt">￥仅医美机构可见</text>
										</view>
										<text
											v-else
											class="price-larger"
											:class="
												PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
													? 'none'
													: ''
											"
										>
											￥{{
												(PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
													? pros.originalPrice
													: pros.price) | NumFormat
											}}
										</text>
									</template>
								</view>
								<view v-else class="list-login-now">
									<text class="p-no">￥</text>
									<uni-grader :grade="Number(pros.priceGrade)"></uni-grader>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!--加载loadding-->
				<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
				<tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText"></tui-nomore>
				<!--加载loadding-->
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import uniGrader from '@/components/uni-grade/uni-grade.vue'
import cmsMixins from '@/mixins/cmsMixins.js'
export default{
	mixins: [cmsMixins],
	components: {
		uniGrader
	},
	data() {
		return {
			fixedClass: 'float',
			StatusBar: this.StatusBar,
			skeletonShow: true,
			dropShow: false,
			vipFlag: 0,
			userIdentity: 0,
			productList: [],
			brandList: [],
			checkedBrandList: [],
			isAllcheckedBrand: true,
			topGoodList: [],
			current: 0,
			appletsBanner: '',
			listQuery: {
				userId: 0,
				brandID: '',
				pageSize: 10,
				pageNum: 1,
				source: 2
			},
			NavigationBarTitle: '',
			nomoreText: '上拉显示更多',
			hasNextPage: false,
			loadding: false,
			pullUpOn: true,
			pullFlag: true
		}
	},
	onLoad(option) {
		this.initGetStotage()
	},
	filters: {
		NumFormat: function(text) {
			//处理金额
			return Number(text).toFixed(2)
		}
	},
	computed: {
		...mapState(['hasLogin', 'userInfo', 'identity'])
	},
	methods: {
		async initGetStotage() {
			// 初始化
			const userInfo = await this.$api.getStorage()
			this.listQuery.userId = userInfo.userId ? userInfo.userId : 0
			this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
			this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
			this.GetHomeRecommend()
			this.GetHomeNewBrandNames()
			this.GetHomeNewFloorList()
		},
		GetHomeNewBrandNames() {
			//新品商品品牌列表
			this.CommonService.GetHomeNewBrandNames()
				.then(response => {
					this.brandList = response.data
				})
				.catch(error => {
					console.log('获取新品橱窗推荐模块信息异常')
				})
		},
		GetHomeRecommend() {
			//新品橱窗顶部推荐
			this.CommonService.GetHomeRecommend()
				.then(response => {
					this.topGoodList = response.data
				})
				.catch(error => {
					console.log('获取新品橱窗推荐模块信息异常')
				})
		},
		GetHomeNewFloorList() {
			//楼层查看更多
			this.CommonService.GetHomeNewFloorList(this.listQuery)
				.then(response => {
					let data = response.data
					this.productList = data.results
					this.hasNextPage = data.hasNextPage
					this.skeletonShow = false
					if (this.hasNextPage) {
						this.pullUpOn = false
						this.nomoreText = '上拉显示更多'
					} else {
						if (this.productList.length < 6) {
							this.pullUpOn = true
						} else {
							this.pullUpOn = false
							this.loadding = false
							this.nomoreText = '已至底部'
						}
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		OnReachBottomData() {
			// 上滑加载
			this.listQuery.pageNum += 1
			this.CommonService.GetHomeNewFloorList(this.listQuery)
				.then(response => {
					let data = response.data
					this.hasNextPage = data.hasNextPage
					this.productList = this.productList.concat(data.results)
					this.skeletonShow = false
					if (this.hasNextPage) {
						this.pullUpOn = false
						this.nomoreText = '上拉显示更多'
					} else {
						this.pullUpOn = false
						this.loadding = false
						this.nomoreText = '已至底部'
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		PromotionsFormat(promo) {
			//促销活动类型数据处理
			if (promo != null) {
				if (promo.type == 1 && promo.mode == 1) {
					return true
				} else {
					return false
				}
			}
			return false
		},
		navToDetailPage(productId) {
			//跳转商品详情页
			this.cmsSysStatistics(5)
			this.$api.navigateTo(`/pages/goods/product?id=${productId}&typeId=5`)
		},
		isShowVipFlag(pros) {
			// 超级会员价格显示控制
			if (this.hasLogin && pros.priceFlag != 1) {
				if (this.userIdentity == 4 && this.vipFlag == 1) {
					return true
				} else if (this.userIdentity == 2) {
					return true
				}
			}
		},
		swiperChange(e) {
			//轮播图切换
			const index = e.detail.current
			this.current = index
		},
		choiceBrand(brand, index) {
			// 选择品牌
			brand.isChecked = !brand.isChecked
			if (brand.isChecked) {
				if (!this.contains(this.checkedBrandList, brand.id)) {
					this.checkedBrandList.push(brand.id)
				}
			} else {
				this.checkedBrandList.splice(this.checkedBrandList.indexOf(brand.id), 1)
			}
			this.isAllcheckedBrand = false
			this.checkedBrandLength = this.checkedBrandList.length
			this.listQuery.brandID = this.checkedBrandList.join(',')
			console.log('this.listQuery.brandID', this.listQuery.brandID)
		},
		choiceBrandAll() {
			// 点击选择全部品牌
			this.isAllcheckedBrand = true
			this.listQuery.brandID = ''
			this.brandList.forEach(el => {
				el.isChecked = false
			})
		},
		contains(arr, val) {
			// 校验
			return arr.some(item => item === val)
		},
		showDropShow() {
			this.dropShow = !this.dropShow
		},
		btnCloseDrop() {
			this.dropShow = false
			this.productList = []
			this.listQuery.pageNum = 1
			this.GetHomeNewFloorList()
		},
		haveBack() {
			uni.navigateBack({
				delta: 1
			})
		}
	},
	onPageScroll(e) {
		//实时获取到滚动的值
		if (e.scrollTop > 50) {
			this.fixedClass = 'fixed'
		} else {
			this.fixedClass = 'float'
		}
	},
	onPullDownRefresh() {
		setTimeout(() => {
			this.productList = []
			this.listQuery.pageNum = 1
			this.GetHomeNewFloorList()
			uni.stopPullDownRefresh()
		}, 200)
	},
	onReachBottom() {
		if (this.hasNextPage) {
			this.loadding = true
			this.pullUpOn = true
			this.OnReachBottomData()
		}
	},
	onShow() {
		
	}
}
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
}
.container-home {
	width: 100%;
	height: auto;
}
.container-topcontent {
	width: 100%;
	height: 620rpx;
	background: #ffffff;
	box-sizing: border-box;
	position: relative;
	.topcontent-image {
		width: 100%;
		height: 480rpx;
		background: url(https://static.caimei365.com/app/img/hot/hot-bg@2x.png);
		background-size: cover;
		box-sizing: border-box;
		.topcontent-title {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 38rpx;
			color: #ffffff;
			font-weight: bold;
			text-align: center;
			position: relative;
			&.fixed {
				position: fixed;
				top: 0;
				height: 80rpx;
				background: linear-gradient(90deg, #F3B574 0%, #f28f31 100%);
				z-index: 9999;
				
			}
		}
		.topcontent-title-icon {
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			position: absolute;
			left: 24rpx;
			top: 14rpx;
			border-radius: 50%;
			text-align: center;
			background: rgba(255, 255, 255, 0.6);
			border: 0.5px solid rgba(0, 0, 0, 0.1);
			box-sizing: border-box;
			z-index: 9999;
			.iconfont {
				height: 100%;
				width: 100%;
				font-size: 32rpx;
				display: inline-block;
				overflow: hidden;
			}
		}
	}
	.topcontent-swiper {
		width: 100%;
		height: auto;
		position: absolute;
		left: 0;
	}
	.swiper-goods {
		width: 100%;
		height: auto;
		position: relative;
		background-size: cover;
	}
	.swiper-banner-box {
		width: 100%;
		height: 360rpx;
		position: relative;
		background-size: cover;
	}
	.tui-banner-swiper {
		width: 680rpx;
		margin: 0 auto;
		height: 340rpx;
		background: url(https://static.caimei365.com/app/img/hot/hot-bg@3x.png);
		background-size: cover;
		border-radius: 24rpx;
		overflow: hidden;
		transform: translateY(0);
		box-shadow: 0px 3px 6px rgba(225, 86, 22, 0.08);
		margin-top: 16rpx;
		padding: 12rpx;
		.swiper-goods-image {
			width: 336rpx;
			height: 336rpx;
			float: left;
			image {
				width: 336rpx;
				height: 336rpx;
				display: block;
				border-radius: 8rpx;
			}
		}
		.swiper-goods-info {
			width: 326rpx;
			height: 336rpx;
			box-sizing: border-box;
			padding: 32rpx 24rpx;
			float: right;
			position: relative;
			.swiper-goods-name {
				width: 100%;
				height: auto;
				line-height: 44rpx;
				text-overflow: ellipsis;
				display: -webkit-box;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 4;
				overflow: hidden;
				font-size: 28rpx;
				color: #333333;
				text-align: center;
			}
			.swiper-goods-btn {
				width: 100%;
				height: 64rpx;
				position: absolute;
				bottom: 60rpx;
				left: 0;
				.btn {
					width: 200rpx;
					height: 64rpx;
					margin: 0 auto;
					text-align: center;
					line-height: 64rpx;
					background-color: #f94b4b;
					font-size: 26rpx;
					color: #ffffff;
					border-radius: 32rpx;
				}
			}
		}
	}
	.swiper__dots-box {
		position: absolute;
		bottom: -45rpx;
		left: 0;
		right: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		.swiper__dots-item {
			width: 14rpx;
			height: 8rpx;
			border-radius: 4rpx;
			margin-left: 6px;
			background-color: rgba(225, 86, 22, 0.39);
		}
		.swiper__dots-long {
			width: 40rpx;
			height: 8rpx;
			border-radius: 4rpx;
			background-color: #F3B574;
			transition: all 0.4s;
		}
	}
	.swiper-banner-msg {
		width: 100%;
		height: 54rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
		margin-top: 24rpx;
		.content {
			width: 100%;
			height: 54rpx;
			box-sizing: border-box;
			padding: 0 34rpx;
			background-color: #fff0e9;
			border-radius: 16rpx;
			.item {
				width: 33.33%;
				height: 54rpx;
				line-height: 54rpx;
				font-size: $font-size-24;
				color: $color-system;
				float: left;
				&.le {
					text-align: left;
				}
				&.ce {
					text-align: center;
				}
				&.ri {
					text-align: right;
				}
				.iconfont {
					color: $color-system;
					font-size: $font-size-32;
					.sm {
						font-size: $font-size-26;
					}
				}
			}
		}
	}
}
.container-screen {
	width: 100%;
	height: 138rpx;
	padding: 24rpx;
	box-sizing: border-box;
	background-color: #f7f7f7;
	position: relative;
	.container-screen-box {
		width: 100%;
		height: 100%;
		background-color: #ffffff;
		border-radius: 16rpx;
		.screen-box-em {
			float: left;
			width: 134rpx;
			line-height: 90rpx;
			text-align: center;
			color: #333333;
			font-size: 30rpx;
			font-weight: bold;
		}
		.screen-box-mi {
			float: left;
			width: 468rpx;
			height: 100%;
			box-sizing: border-box;
			padding: 21rpx 0;
			.screen-list {
				width: 140rpx;
				height: 48rpx;
				padding: 0 12rpx;
				float: left;
				text-align: center;
				box-sizing: border-box;
				line-height: 48rpx;
				font-size: 30rpx;
				color: #666666;
				border-radius: 24rpx;
				margin-right: 20rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
				word-break: break-all;
				&:last-child {
					margin-right: 0;
				}
				&.active {
					background-color: #ffe6dc;
					color: #F3B574;
				}
			}
		}
		.screen-box-sp {
			float: right;
			width: 100rpx;
			line-height: 90rpx;
			text-align: center;
			.iconfont {
				color: #999999;
				font-size: 40rpx;
			}
		}
	}
	.container-screen-popup {
		width: 100%;
		height: 480rpx;
		box-sizing: border-box;
		padding: 24rpx;
		position: absolute;
		left: 0;
		top: 86rpx;
		z-index: 999;
		.container-screen-popupbox {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding: 0 24rpx;
			background-color: #ffffff;
			border-radius: 0 0 16rpx 16rpx;
			box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2);
		}
		.tui-scroll-box {
			width: 100%;
			height: 300rpx;
			overflow: hidden;
			.screen-list {
				width: 140rpx;
				height: 48rpx;
				padding: 0 12rpx;
				float: left;
				text-align: center;
				box-sizing: border-box;
				line-height: 48rpx;
				font-size: 30rpx;
				color: #666666;
				border-radius: 24rpx;
				margin-right: 30rpx;
				margin-bottom: 30rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
				word-break: break-all;
				&:nth-child(4n) {
					margin-right: 0;
				}
				&.active {
					background-color: #ffe6dc;
					color: #F3B574;
				}
			}
		}
		.container-screen-btnbox {
			width: 100%;
			height: 84rpx;
			margin-top: 15rpx;
			.btns {
				width: 314rpx;
				height: 84rpx;
				line-height: 84rpx;
				border-radius: 42rpx;
				text-align: center;
				font-size: 30rpx;
				color: #ffffff;
				background: $btn-confirm;
				margin: 0 auto;
			}
		}
	}
}
.container-section {
	width: 100%;
	height: auto;
	background-color: #f7f7f7;
	box-sizing: border-box;
	padding: 0 24rpx 24rpx 24rpx;
}
.floor-item-banner {
	width: 100%;
	height: 240rpx;
	margin-bottom: 20rpx;
	.item-img-gg {
		width: 100%;
		height: 240rpx;
		display: block;
		border-radius: 16rpx;
	}
}
.section_page_main {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	.floor-item {
		width: 339rpx;
		height: 516rpx;
		margin-right: 20rpx;
		font-size: $font-size-24;
		color: $text-color;
		background: #ffffff;
		line-height: 36rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		float: left;
		box-sizing: border-box;
		position: relative;
		&:nth-child(2n) {
			margin-right: 0;
		}
		.item-img {
			width: 339rpx;
			height: 339rpx;
			border-radius: 16rpx 16rpx 0 0;
			display: block;
			margin-bottom: 8rpx;
		}
		.floor-item-type {
			width: 64rpx;
			height: 64rpx;
			text-align: justify;
			box-sizing: border-box;
			padding: 10rpx;
			border-radius: 0 0 8rpx 8rpx;
			background-color: #33ccbf;
			font-size: $font-size-22;
			color: #ffffff;
			line-height: 25rpx;
			position: absolute;
			top: 0;
			right: 16rpx;
		}
		.floor-item-content {
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
		}
		.floor-item-act {
			display: block;
			width: 100%;
			height: 32rpx;
			text-align: center;
			box-sizing: border-box;
		}
		.title-none {
			font-size: $font-size-26;
			color: #ff2a2a;
			line-height: 54rpx;
		}
		.title {
			width: 100%;
			height: 70rpx;
			display: flex;
			line-height: 35rpx;
			flex-direction: column;
			margin: 8rpx 0;
			padding: 0;
			position: relative;
			.mclap {
				width: 100%;
				line-height: 35rpx;
				text-overflow: ellipsis;
				display: -webkit-box;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				font-size: 26rpx;
				&.indent {
					text-indent: 95rpx;
				}
			}
			.mclap-tag {
				display: block;
				width: 84rpx;
				height: 32rpx;
				background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
				border-radius: 4rpx 48rpx 4px 4px;
				line-height: 32rpx;
				font-size: $font-size-22;
				color: #ffffff;
				text-align: center;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
		.floor-item-price {
			.list-login-now {
				line-height: 44rpx;
				.p-no {
					height: 44rpx;
					line-height: 44rpx;
					display: inline-block;
					float: left;
				}
			}
			.list-price {
				color: #ff2a2a;
				height: 44rpx;
				float: left;
				.price-larger {
					width: 100%;
					height: 44rpx;
					font-size: 32rpx;
					&.none {
						text-decoration: line-through;
						color: #999999;
					}
					&.small {
						font-size: $font-size-24;
					}
					.txt {
						font-size: $font-size-24;
						display: inline-block;
						line-height: 44rpx;
						text-align: left;
						float: left;
					}
				}
			}
		}
	}
}
</style>