yihuo/pages/award/index.vue

<template>
    <page :nav="false" ref="pageRef" custom-class="paddingB10 relative" @click="clickPage">
        <view
            class="pagae-nav"
            :style="{ paddingTop: statusBarHeight + 'px', background: headerBg }"
        >
            <view class="flex-column-align-center nav-title">宝箱</view>
        </view>
		
        <view class="boxPage" :style="{ backgroundImage: 'url(' + ossurl.box.headbj + ')' }">
            <view class="seizeSeet" :style="{ paddingTop: statusBarHeight + 40 + 'px' }"></view>
			<view class="p30">
				<view class="headerBox" :style="{ backgroundImage: 'url(' + ossurl.box.headInfo + ')' }">
				    <view class="userBox">
				        <view class="avatar">
				            <image
				                class="avatarImg"
				                :src="user ? user.avatar : ossurl.common.noavatar"
				            />
				        </view>
				        <view class="userName" v-if="user">
				            {{ user.nickname }}
				        </view>
				        <view class="numList" v-if="user">
				            <view
				                class="item"
				                @click="showView({ url: '/pages/magic/index', login: true })"
				            >
				                <view class="numBox">
				                    {{ showNumber('magicBalance') }}
				                </view>
				                <view class="numTitle">源石</view>
				            </view>
				            <view
				                class="item"
				                @click="showView({ url: '/pages/coupon/index', login: true })"
				            >
				                <view class="numBox">
				                    {{ showNumber('couponCount') }}
				                </view>
				                <view class="numTitle">优惠券</view>
				            </view>
				            <view
				                class="item"
				                @click="showView({ url: '/pages/store/index', login: true })"
				            >
				                <view class="numBox">
				                    {{ showNumber('inventoryCount') }}
				                </view>
				                <view class="numTitle">仓库</view>
				            </view>
				        </view>
				    </view>
				    <view class="searchBox">
				        <view class="searchInput">
				            <input
				                type="text"
				                confirm-type="search"
				                placeholder="搜索你感兴趣的～"
				                v-model.trim="keyword"
				                placeholder-style="color:#A27400;font-size:12px;"
				                @confirm="getData()"
				            />
				            <text class="cuIcon-search" @click="getData()"></text>
				        </view>
						<view class="rule fx-c-c" @click="showView({ url: '/pages/message/index', login: false })">
							<text>i</text><text>规则</text>
						</view>
				    </view>
				</view>
				<!-- 广告 -->
				<view>
				    <view class="flex-align-center flex-center marginB10"></view>
				    <view>
				        <view class="marginT10">
				            <barrage ref="barrage1" />
				        </view>
				        <view class="marginT5">
				            <barrage :left="50" ref="barrage2" />
				        </view>
				    </view>
				</view>
			</view>

            <view class="listSection">
            	<view class="tabList" :style="{ backgroundImage: 'url(' + ossurl.box.tabBg + ')' }">
					<view class="tab">
						<view class="item fx-c" @click="changeTab('')" :style="tabValue == '' ? 'background: url(' + ossurl.box.tabIndexbj + ')no-repeat' : 'background: #F3F3F3' ">
							<view class="img">
								<image :src="ossurl.box.tabIndex1" mode="widthFix" />
							</view>
							<text>全部</text>
						</view>
						<view class="item fx-c" @click="changeTab('UNLIMITED')" :style="tabValue == 'UNLIMITED' ? 'background: url(' + ossurl.box.tabIndexbj + ')no-repeat' : 'background: #F3F3F3' ">
							<view class="img">
								<image :src="ossurl.box.tabIndex2" mode="widthFix" />
							</view>
							<text>超级赏</text>
						</view>
						<view class="item fx-c" @click="changeTab('YFS_PRO')" :style="tabValue == 'YFS_PRO' ? 'background: url(' + ossurl.box.tabIndexbj + ')no-repeat' : 'background: #F3F3F3' ">
							<view class="img">
								<image :src="ossurl.box.tabIndex3" mode="widthFix" />
							</view>
							<text>一番赏</text>
						</view>
					</view>
            	</view>
                <view
                    v-for="item in list"
                    :key="item.id"
                    class="item2 flex-column-center"
                    @click="showDetail(item)"
                >
                    <view class="relative itemBox">
                        <div class="itemTag">
                            <image v-if="item.mode === 'UNLIMITED'" :src="ossurl.box.cj" mode="widthFix"></image>
                            <image v-else-if="item.mode === 'YFS_PRO'" :src="ossurl.box.yf" mode="widthFix"></image>
                        </div>
                        <image class="itemImage" mode="aspectFill" :src="item.cover"></image>
                        <view class="itemText">
                            {{ item.name }}
                            <view class="itemPrice">
                                <span class="unit">¥</span>
                                &nbsp;{{ item.price }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            

            </view>
            
			<coupon-com ref="couponRef" @success="refresh" />
            <poster ref="posterRef" />
            <activity ref="activityRef" @success="getIndex" />
            <view
                v-if="filterMoneyVisible"
                class="filter-list-wrapper"
                :style="{ left: filterMoneyStyle.left, top: filterMoneyStyle.top }"
            >
                <view
                    v-for="item in filterMoneys"
                    :key="item.label"
                    @click.stop="chooseMoneyFilter(item)"
                    class="cell flex-align-center"
                >
                    {{ item.label }}
                </view>
            </view>
            <view
                v-if="filterTypeVisible"
                class="filter-list-wrapper"
                :style="{ left: filterTypeStyle.left, top: filterTypeStyle.top }"
            >
                <view
                    v-for="item in filterTypes"
                    :key="item.label"
                    @click.stop="chooseTypeFilter(item)"
                    class="cell flex-align-center"
                >
                    {{ item.label }}
                </view>
            </view>
            <popularize-com ref="popularizeRef" />
            <view v-if="floorstatus" class="goTop" @click="goTop">
                <image :src="ossurl.common.topBtn" class="goTopImg" />
            </view>

            <activity-list ref="activityListRef" />
            <image
                class="receiveBenefits"
                :src="ossurl.box.receiveBenefits"
                @click="gotoWeb()"
                mode="widthFix"
            />
        </view>
        <view v-if="adList && adList.length > 0">
            <adDialog v-for="(item, index) of adList" :adInfo="item" :key="index"></adDialog>
        </view>
    </page>
</template>

<script>
    import barrage from './barrage'
    import loginMixin from '@/mixin/login'
    import store from '@/store'
    import { SET_PID } from '@/store/mutation-types'
    import couponCom from './coupon'
    import top from './top'
    import poster from './poster'
    import activity from './activity'
    import banner from './banner'
    import activityList from './activity_tab'
    import popularizeCom from './../center/poster.vue'
    import { SET_SHARE_USERID } from '@/store/mutation-types'
    import ossurl from '@/utils/ossurl'
    import adDialog from './adDialog.vue'
    const FILTER_MONEY = [
        { label: '全部价格' },
        { label: '￥0 ~ ￥9.9', priceMin: '0', priceMax: '9.9' },
        { label: '￥10 ~ ￥19.9', priceMin: '9.9', priceMax: '19.9' },
        { label: '大于 ￥19.9', priceMin: '19.9' }
    ]
    const FILTER_TYPE = [
        { label: '全部模式' },
        { label: '无限', value: 'UNLIMITED' },
        { label: '一番赏Pro', value: 'YFS_PRO' }
    ]
    export default {
        components: {
            barrage,
            couponCom,
            top,
            poster,
            activity,
            banner,
            popularizeCom,
            activityList,
            adDialog
        },
        data() {
            return {
                keyword: '',
                ossurl,
                list: [],
                horse1: [],
                horse2: [],
                requestTime: null,
                requestActivityTime: false,
                indexData: null,
                notice: null,
                tabValue: '',
                filterMoneys: FILTER_MONEY,
                filterMoney: FILTER_MONEY[0],
                filterMoneyStyle: {},
                filterMoneyVisible: false,
                filterTypes: FILTER_TYPE,
                filterType: FILTER_TYPE[0],
                filterTypeStyle: {},
                filterTypeVisible: false,
                floorstatus: false,
                scrollTop: 0
            }
        },
        computed: {
            user() {
                return this.$store.state.userInfo
            },
            headerBg() {
                return this.scrollTop > 0 ? '#fff' : 'transparent'
            },
            statusBarHeight() {
                if (this.$store.state.systemInfo) {
                    return this.$store.state.systemInfo.statusBarHeight
                }
                return 20
            },
            hide() {
                return !this.$store.state.hide
            },
            tabList() {
                return this.$store.state.pageConfig['index_icon'].components[0].elements
            },
            adList() {
                return this.$store.state.pageConfig['super_ad']?this.$store.state.pageConfig['super_ad'].components[0].elements:[]
            },
            boxBanner() {
                return this.$store.state.pageConfig['box_banner']?this.$store.state.pageConfig['box_banner'].components[0].elements:[]
            },
            banners() {
                if (!this.$store.state.pageConfig || !this.$store.state.pageConfig['magic_luck']) {
                    return null
                }
                let components = this.$store.state.pageConfig['magic_luck'].components
                if (!components || components.length === 0) return null
                let data = null
                for (let i = 0; i < components.length; i++) {
                    if (components[i].type === 'capsule') {
                        data = components[i].elements
                    }
                }
                return data
            }
        },
        onLoad(options) {
            if (options.scene) {
                var param = options.scene.split('%3A')
                store.commit(SET_SHARE_USERID, param[1])
                // this.$store.state.shareUserId
            }
            this.appShow()
            this.$event.on(this.$event.key.APP_SHOW, this.appShow)
            this.$event.on(this.$event.key.LOGIN, this.afterLogin)
            this.$event.on(this.$event.key.AWARD_REFRESH, this.refresh)
        },
        onUnload() {
            this.$event.off(this.$event.key.APP_SHOW)
            this.$event.off(this.$event.key.LOGIN)
            this.$event.off(this.$event.key.AWARD_REFRESH)
        },
        mounted() {},
        onReady() {
            // setTimeout(() => {
            //     this.initFilterPosition()
            // }, 500)
            // console.log(this.$refs)
        },
        onShow() {
            this.init(true)
            // if (this.userInfo && this.userInfo.userId) {
            //     this.getInfo()
            //     // this.getTurntable()
            // }
        },
        onPullDownRefresh() {
            this.init(true)
        },
        onShareAppMessage(res) {
            return {
                title: '燚火漫域 次元聚集地，潮玩新势力',
                path: '/pages/award/index'
            }
        },
        onShareTimeline() {
            return {
                title: '燚火漫域 次元聚集地，潮玩新势力',
                imageUrl: this.list[0].cover
            }
        },
        // 获取滚动条当前位置
        onPageScroll(e) {
            let isTop = e.scrollTop > 100
            this.floorstatus = isTop ? true : false
            this.scrollTop = e.scrollTop
        },
        methods: {
            gotoRoute(item) {
              this.visible = false
                this.$common.showNext(item)
            },
            initFilterPosition() {
                this.initFilterPositionItem('filterMoney', 'filterMoneyStyle')
                this.initFilterPositionItem('filterType', 'filterTypeStyle')
            },
            initFilterPositionItem(className, key) {
                const el1 = uni.createSelectorQuery().in(this)
                el1.select(`.${className}`)
                    .boundingClientRect((el) => {
                        this[key] = {
                            left: el.left - (132 - el.width) / 2 + 'px',
                            top: el.top + el.height + 1 + 'px'
                        }
                    })
                    .exec()
            },
            async appShow() {
                await this.initNewPeople()
                this.showPopularize()
                this.initCoupon()

                // const res = this.$cache.get(this.$cache.key.POSTER)
                // if (!res || res < 3) {
                //     setTimeout(() => {
                //         this.$refs.posterRef && this.$refs.posterRef.show()
                //     }, 600)
                //     this.$cache.set(this.$cache.key.POSTER, res ? res + 1 : 1)
                // }
            },
            async initNewPeople() {
                let now = new Date().getTime()
                if (this.requestActivityTime && now - this.requestActivityTime < 2 * 60 * 1000) {
                    return false
                }
                let NEW_PEOPLE = this.$cache.get(this.$cache.key.NEW_PEOPLE)
                if (!NEW_PEOPLE) {
                    const res = await this.$service.weal.activity()
                    if (res) {
                        this.$cache.set(this.$cache.key.NEW_PEOPLE, true)
                        this.$refs.activityRef.show(res)
                    }
                }
                return true
            },
            showPopularize() {
                let num = this.$cache.get(this.$cache.key.POPULARIZE)
                let flag =
                    this.banners &&
                    this.banners.some((item) => {
                        return (
                            item.path && item.path.params && item.path.params.url === 'popularize'
                        )
                    })
                if (!num && flag) {
                    this.$refs.popularizeRef.show()
                    this.$cache.set(this.$cache.key.POPULARIZE, (num || 0) + 1)
                }
            },
            gotoWeb() {
                const url =
                    'https://mp.weixin.qq.com/s?__biz=MzkzMTU2ODM4MQ==&mid=2247483786&idx=1&sn=b8fb65d562c3778881101d0e194bd5aa&chksm=c2684e18f51fc70ea3140fa1145adabed0d7203928d0b36431e425f9360fd66d4ed173f60870#rd'
                this.$router.web(url, '领福利')
            },
            async initCoupon() {
                const res = await this.$service.wallet.targetCoupon('LUCK', null, false)
                if (res && res.length > 0) {
                    this.$refs.couponRef.show(res)
                }
            },
            changeTab(value) {
                this.tabValue = value
                this.refresh()
            },
            afterLogin() {
                this.refresh()
                if (this.$refs.couponRef && this.$refs.couponRef.refresh) {
                    this.$refs.couponRef.refresh()
                }
            },
            refresh() {
                this.init(true)
            },
            init(flag = false) {
                this.getIndex()
                let now = new Date().getTime()
                if (!flag && this.requestTime && now - this.requestTime < 10 * 60 * 1000) {
                    uni.stopPullDownRefresh()
                    return
                }
                this.requestTime = now
                this.getData()
                this.getHorse()
                this.getNotice()
            },
            async getData(loading = false) {
                const res = await this.$service.award.list(
                    { mode: this.tabValue, keyword: this.keyword },
                    null,
                    null,
                    loading
                )
                uni.stopPullDownRefresh()
                this.list = res
            },
            async getHorse() {
                const res = await this.$service.award.horse()
                if (res && res.length > 0) {
                    let middle = parseInt(res.length / 2 + 0.5)
                    this.horse1 = res.slice(0, res.length)
                    this.horse2 = res.slice(middle)
                    this.$refs.barrage1 && this.$refs.barrage1.start(this.horse1)
                    this.$refs.barrage2 && this.$refs.barrage2.start(this.horse2)
                }
            },
            async getIndex() {
                if (!this.$common.isLogin()) {
                    this.indexData = null
                    return
                }
                const res = await this.$service.award.magicIndex()
                this.indexData = res
            },
            async getNotice() {
                const res = await this.$service.base.message(1, 3, 'NOTICE')
                this.notice = res
            },
            showDetail(item) {
                if (item.status !== 1) return
                if (item.mode === 'UNLIMITED') {
                    this.$router.push('award_detail', {
                        poolId: item.id
                    })
                } else if (item.mode === 'YFS_PRO') {
                    this.$router.push('award_detail_yfs', {
                        poolId: item.id
                    })
                }
            },
            showKefu() {
                console.log(1)
                this.$common.showKefu()
            },
            back() {
                this.$router.back()
            },
            showNumber(key) {
                if (!this.indexData) return '-'
                if (typeof this.indexData[key] === 'undefined') return '-'
                const val = this.bigNumberTransform(this.indexData[key])
                return val
            },
            bigNumberTransform(value) {
                const newValue = ['', '', '']
                let fr = 1000
                let num = 3
                let text1 = ''
                let fm = 1
                while (value / fr >= 1) {
                    fr *= 10
                    num += 1
                    // console.log('数字', value / fr, 'num:', num)
                }
                if (num <= 4) {
                    // 千
                    newValue[0] = parseInt(value / 1000) + ''
                    newValue[1] = '千'
                } else if (num <= 8) {
                    // 万
                    text1 = parseInt(num - 4) / 3 > 1 ? '千万' : '万'
                    // tslint:disable-next-line:no-shadowed-variable
                    fm = text1 === '万' ? 10000 : 10000000
                    if (value % fm === 0) {
                        newValue[0] = parseInt(value / fm) + ''
                    } else {
                        newValue[0] = Math.floor(parseFloat(value / fm) * 10) / 10 + ''
                    }
                    newValue[1] = text1
                } else if (num <= 16) {
                    // 亿
                    text1 = (num - 8) / 3 > 1 ? '千亿' : '亿'
                    text1 = (num - 8) / 4 > 1 ? '万亿' : text1
                    text1 = (num - 8) / 7 > 1 ? '千万亿' : text1
                    // tslint:disable-next-line:no-shadowed-variable
                    fm = 1
                    if (text1 === '亿') {
                        fm = 100000000
                    } else if (text1 === '千亿') {
                        fm = 100000000000
                    } else if (text1 === '万亿') {
                        fm = 1000000000000
                    } else if (text1 === '千万亿') {
                        fm = 1000000000000000
                    }
                    if (value % fm === 0) {
                        newValue[0] = parseInt(value / fm) + ''
                    } else {
                        newValue[0] = Math.floor(parseFloat(value / fm) * 10) / 10 + ''
                    }
                    newValue[1] = text1
                }
                if (value < 1000) {
                    newValue[0] = value + ''
                    newValue[1] = ''
                }
                return newValue.join('')
            },
            showMoneyVisible() {
                if (this.filterMoneyVisible) {
                    this.filterMoneyVisible = false
                    return
                }
                if (this.filterMoneyStyle && this.filterMoneyStyle.top) {
                    this.filterMoneyVisible = true
                    this.filterTypeVisible = false
                }
            },
            showTypeVisible() {
                if (this.filterTypeVisible) {
                    this.filterTypeVisible = false
                    return
                }
                if (this.filterTypeStyle && this.filterTypeStyle.top) {
                    this.filterTypeVisible = true
                    this.filterMoneyVisible = false
                }
            },
            chooseMoneyFilter(item) {
                this.filterMoney = item
                this.filterMoneyVisible = false
                this.getData(true)
            },
            chooseTypeFilter(item) {
                this.filterType = item
                this.filterTypeVisible = false
                this.getData(true)
            },
            clickPage() {
                this.filterMoneyVisible = false
                this.filterTypeVisible = false
            },

            //回到顶部
            goTop: function (e) {
                // 一键回到顶部
                if (wx.pageScrollTo) {
                    wx.pageScrollTo({
                        scrollTop: 0
                    })
                } else {
                    wx.showModal({
                        title: '提示',
                        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
                    })
                }
            },
            onActivity() {
                this.$refs.activityListRef.show()
            }
        }
    }
</script>
<style></style>
<style lang="scss" scoped>
	.listSection{
		background: #fff;
		padding-top: 30rpx;
		border-radius: 30rpx 30rpx 0 0;
		margin-top: 30rpx;
	}
    .boxPage {
        background-size: 100% auto;
        background-repeat: no-repeat;
    }
    .headerBox {
        background-size: 100% auto;
        background-repeat: no-repeat;
        padding: 70rpx 56rpx 24rpx 6rpx;
		box-sizing: border-box;
        .searchBox {
            display: flex;
            align-items: center;
        }
        .searchInput {
            height: 64rpx;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 64rpx;
            color: #000;
            display: flex;
            flex: 1;
            align-items: center;
            padding: 0 24rpx;
            margin-right: 30rpx;
			margin-left: 40rpx;
            .cuIcon-search {
                color: #333;
            }
            input {
                flex: 1;
            }
        }
		.rule {
			width: 112rpx;
			height: 64rpx;
			background: #464646;
			border-radius: 12rpx;
		
			text {
				color: #FFE957;
				margin-left: 5rpx;
				font-weight: bold;
				font-size: 28rpx;
			}
		}
        .userBox {
            width: 680rpx;
            height: 162rpx;
            background-size: 680rpx 162rpx;
            margin-top: 20rpx;
            display: flex;
            align-items: center;
            padding-left: 40rpx;
            .avatar {
                .avatarImg {
                    width: 82rpx;
                    height: 82rpx;
                    opacity: 1;
                    border: 6rpx solid #fec433;
                    border-radius: 50%;
                }
            }
            .userName {
                font-size: 28rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: bold;
                color: #000000;
                line-height: 44rpx;
                padding: 0 28rpx;
                border-right: 2rpx solid #f1c845;
            }
            .numList {
                display: flex;
                flex: 1;
                padding-left: 28rpx;
                text-align: center;
                .item {
                    flex: 1;
                }
                .numBox {
                    font-size: 32rpx;
                    font-family: Rousseau Deco, Rousseau Deco;
                    font-weight: bold;
                    color: #000000;
                    line-height: 44rpx;
                }
                .numTitle {
                    font-size: 24rpx;
                    font-family: Source Han Sans, Source Han Sans;
                    font-weight: 350;
                    color: #999;
                }
            }
        }
    }
    .bg {
        position: fixed;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .pagae-nav {
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 100;
        transition: 0.2s;
    }
    .nav-title {
        height: 80rpx;
        font-size: 32rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: bold;
        color: #000000;
    }
    .tabList {
        padding: 20rpx 22rpx;
		.tab {
			display: flex;
			justify-content: space-between;
		
			.item {
				width: 220rpx;
				height: 68rpx;
				background: #F3F3F3;
				border-radius: 40rpx;
				padding: 0 14rpx;
				background-size: 100% 100%;
				image {
					margin-right: 16rpx;
				}
		
				text {
					font-size: 32rpx;
					font-weight: bold;
				}
				.img{
					width: 48rpx;
					height: 48rpx;
					overflow: hidden;
					image{
						width: 48rpx;
					}
				}
			}
		
			.item1 {
				display: flex;
				width: 200rpx;
				height: 78rpx;
				background: url('https://file.supermarts.cn/file/yi_huo_man_yu/images/award/a3.png') no-repeat;
				background-size: 100% 100%;
				align-items: initial;
		
				image {
					margin-top: 16rpx;
				}
		
				text {
					margin-top: 16rpx;
				}
			}
		}
        .tabItem {
            margin-right: 24rpx;
            height: 150rpx;
            &:last-child {
                margin: 0;
            }
        }
    }
    .item1 {
        height: 240rpx;
        width: 100%;
        border-radius: 20rpx;
        overflow: hidden;
        position: relative;

        padding: 1rpx;
        // .frame {
        //     position: absolute;
        //     left: 1rpx;
        //     right: 1rpx;
        //     top: 1rpx;
        //     height: 238rpx;
        // }
        image {
            width: 100%;
            height: 100%;
            border-radius: 20rpx;
        }
    }
    .itemList {
        padding: 0rpx 4rpx 80rpx 4rpx;
    }
    .item2 {
        width: 50%;
        position: relative;
        margin: auto;
        display: inline-block;
        padding: 16rpx;
        .itemBox {
            font-size: 0;
            width: 100%;
            margin-bottom: 5rpx;
            .itemImage {
                border-radius: 14rpx;
                width: 338rpx;
                height: 402rpx;
            }
            .itemTag {
                position: absolute;
                z-index: 1;
                top: 0rpx;
                left: 0rpx;
                image {
                    width: 152rpx;
                }
            }
            .itemText {
                font-size: 28rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 350;
                color: rgba(0, 0, 0, 0.85);
                padding: 20rpx;
            }
            .itemPrice {
                color: #ff0000;
                font-size: 24rpx;
                font-family: Rousseau Deco, Rousseau Deco;
                font-weight: 400;
                margin-top: 10rpx;
                .unit {
                    font-size: 24rpx;
                    margin-right: 4rpx;
                }
            }
        }
        .frame {
            position: absolute;
            left: 0;
            top: 0;
            height: 600rpx;
            width: 100%;
        }
        .image {
            width: 100%;
            height: 360rpx;
            border-radius: 20rpx;
        }
        .image-flag {
            position: absolute;
            left: 0;
            bottom: 20rpx;
            width: 218rpx;
            height: 20rpx;
        }
        .content {
            position: absolute;
            left: 2rpx;
            right: 2rpx;
            bottom: 20rpx;

            padding: 0 20rpx;
            .btn {
                margin-left: 20rpx;
                padding: 0 28rpx;
                height: 60rpx;
                line-height: 60rpx;
                // background: #fff;
                color: #fff;
                font-size: 32rpx;
                text-align: center;
                font-weight: bold;
                &.disable {
                    background: #ccc;
                }
            }
        }
        .status {
            width: 110rpx;
            height: 110rpx;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 100;
        }
        .mode {
            position: absolute;
            left: 0;
            top: 0;
            padding: 0 20rpx;
            height: 52rpx;
            line-height: 52rpx;
            text-align: center;
            background: #49ffff;
            border-radius: 8px 0px 8px 0px;
        }
        .mask {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
        }
    }
    .filter-wrapper {
        width: 226rpx;
        height: 72rpx;
        position: relative;
        overflow: hidden;
        .image {
            position: absolute;
            left: 0;
            top: 0;
            width: 226rpx;
            height: 72rpx;
        }
        .text {
            color: #e0f2ff;
            font-size: 24rpx;
            position: relative;
        }
        .group-btn {
            // position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            opacity: 0;
        }
        .arrow {
            width: 12rpx;
            height: 6rpx;
            margin-left: 6px;
            // position: absolute;
            // right: 30rpx;
        }
    }
    .filter-list-wrapper {
        position: absolute;
        width: 132px;
        background: rgba(0, 0, 0, 0.8);
        box-shadow: 0px 0px 8rpx 0px rgba(73, 255, 255, 0.5);
        border-radius: 12rpx;
        border: 1px solid rgba(174, 231, 255, 0.5);
        z-index: 1500;
        padding: 8px 0;
        .cell {
            height: 27px;
            text-align: center;
            color: #e0f2ff;
            font-size: 24rpx;
        }
    }

    .goTop {
        position: fixed;
        bottom: 120rpx;
        right: 9rpx;
        height: 98rpx;
        width: 68rpx;
        z-index: 1000;
        .goTopImg {
            height: 98rpx;
            width: 68rpx;
        }
    }
    .receiveBenefits {
        position: fixed;
        bottom: 240rpx;
        right: 0;
        width: 152rpx;
        height: 156rpx;
        z-index: 1000;
    }
    .active_list {
        position: fixed;
        right: 10rpx;
        bottom: 480rpx;
        width: 100rpx;
        height: 100rpx;
    }
    .group_gift {
        position: fixed;
        right: 14rpx;
        bottom: 210rpx;
        width: 100rpx;
        height: 130rpx;
        overflow: hidden;
        .group-btn {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            opacity: 0;
        }
    }
    .rule {
        width: 520rpx;

        // animation: scroll 3s linear infinite; /* 关键帧动画 */
        .rule-text {
            // overflow: hidden;
            overflow: hidden;
            white-space: nowrap; /* 防止文字换行 */
            text-overflow: ellipsis; /* 超出显示省略号 */
            white-space: nowrap; /* 防止文字换行 */
            // animation: scroll 15s linear infinite; /* 关键帧动画 */
        }
        @keyframes scroll {
            from {
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
            to {
                -webkit-transform: translateX(-300%);
                transform: translateX(-300%);
            }
        }
    }
    .bannerSwiper {
        width: 650rpx;
        height: 220rpx;
        padding: 20rpx 0;
        .bannerBox {
            border-radius: 14rpx;
            overflow: hidden;
            line-height: 0;
            font-size: 0;
            .image {
                width: 650rpx;
                height: 180rpx;
            }
        }
    }
</style>