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

<template>
    <view class="container floor clearfix">
        <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true"
            :loadingType="5" />
        <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 == 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-else-if="pros.priceFlag === 3 && clubType !== 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-if="userIdentity == 4">
                                        <view class="price-larger" v-if="pros.priceFlag === 1">
                                            <text class="txt">￥未公开价格</text>
                                        </view>
                                        <view class="price-larger" v-else-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>
                                </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-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText" />
                <!--加载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', 'clubType'])
        },
        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.getRecommend()
                this.getNewBrandNames()
                this.getNewFloorList()
            },
            async getNewBrandNames() {
                //新品商品品牌列表
                try {
                    const res = await this.CommonService.GetHomeNewBrandNames()
                    this.brandList = res.data
                } catch (e) {
                    console.log('获取新品橱窗推荐模块信息异常')
                }
            },
            async getRecommend() {
                //新品橱窗顶部推荐
                try {
                    const res = await this.CommonService.GetHomeRecommend()
                    this.topGoodList = res.data
                } catch (e) {
                    console.log('获取新品橱窗推荐模块信息异常')
                }
            },
            async getNewFloorList() {
                //楼层查看更多
                try {
                    const res = await this.CommonService.GetHomeNewFloorList(this.listQuery)
                    const data = res.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) {
                    console.log('error', error.msg)
                }
            },
            async OnReachBottomData() {
                // 上滑加载
                try {
                    this.listQuery.pageNum += 1
                    const res = await this.CommonService.GetHomeNewFloorList(this.listQuery)
                    const data = res.data
                    this.hasNextPage = data.hasNextPage
                    this.productList = this.productList.concat(data.results)
                    if (this.hasNextPage) {
                        this.pullUpOn = false
                        this.nomoreText = '上拉显示更多'
                    } else {
                        this.pullUpOn = false
                        this.loadding = false
                        this.nomoreText = '已至底部'
                    }
                } catch (error) {
                    console.log('error', error.msg)
                }
            },
            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.pullUpOn = true
                this.loadding = false
                this.dropShow = false
                this.productList = []
                this.listQuery.pageNum = 1
                this.getNewFloorList()
            },
            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.getNewFloorList()
                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: #666666;
                font-weight: bold;
                text-align: center;
                position: relative;

                &.fixed {
                    position: fixed;
                    top: 0;
                    height: 80rpx;
                    background: linear-gradient(90deg, #d3fd77 0%, #a4e8e4 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: #FF5B00;
                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: #FF5B00;
                    }
                }
            }

            .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: #FF5B00;
                    }
                }
            }

            .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>