pointsMall/src/views/HomeView/PointsMall.vue

<template>
    <div class="right-wrap">
        <!-- <img src="@/assets/image/banner4.png" alt="banner" class="banner"> -->
        <div class="hot-list-wrap">
                    <el-empty :image-size="200" v-if="bannerList.length < 1"></el-empty>
                    <!-- arrow="never" indicator-position="none" -->
                    <el-carousel indicator-position="none" height="250px" :interval="5000" v-if="bannerList.length > 0">
                        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
                            <!-- <router-link to="/productTrials"> -->
                                <img style="width: 100%; height: 100%" :src="item.dictValue" class="banner" />
                            <!-- </router-link> -->
                        </el-carousel-item>
                    </el-carousel>
                </div>
        <div class="notice-board">
            <div class="notice-header">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                    class="icon-speaker">
                    <path
                        d="M15.0166 3.83658C14.7843 3.69157 14.5186 3.60859 14.2451 3.59556C13.9715 3.58254 13.6992 3.63991 13.4542 3.76218L6.69579 7.11018H3.95979C3.07299 7.11018 2.35059 7.83138 2.35059 8.71938V15.0758C2.35059 15.9626 3.07179 16.685 3.95979 16.685H6.69819L13.4638 19.9742C13.6882 20.0834 13.9282 20.1374 14.1682 20.1374C14.4646 20.1374 14.7598 20.0546 15.0202 19.8914C15.493 19.595 15.775 19.0862 15.775 18.5282V5.20338C15.7774 4.64298 15.493 4.13178 15.0166 3.83658ZM7.96179 13.961C7.96179 14.5454 7.48779 15.0182 6.90459 15.0182C6.32139 15.0182 5.84739 14.5442 5.84739 13.961V9.91698C5.84739 9.33258 6.32139 8.85978 6.90459 8.85978C7.48779 8.85978 7.96179 9.33378 7.96179 9.91698V13.961ZM17.5966 7.54938C17.239 7.54938 16.891 7.36818 16.6918 7.04058C16.3882 6.54138 16.5478 5.89098 17.047 5.58738L19.2202 4.26738C19.7194 3.96378 20.3698 4.12338 20.6734 4.62138C20.977 5.12058 20.8174 5.77098 20.3182 6.07458L18.145 7.39458C17.9801 7.49614 17.7902 7.54974 17.5966 7.54938ZM20.9062 12.9182H18.4306C17.8462 12.9182 17.3734 12.4442 17.3734 11.861C17.3734 11.2766 17.8474 10.8038 18.4306 10.8038H20.9062C21.4906 10.8038 21.9634 11.2778 21.9634 11.861C21.9646 12.4442 21.4906 12.9182 20.9062 12.9182ZM19.7686 19.6814C19.585 19.6814 19.399 19.6334 19.2286 19.5326L17.0554 18.2402C16.5538 17.9414 16.3882 17.2922 16.687 16.7906C16.9858 16.289 17.635 16.1246 18.1366 16.4222L20.3098 17.7146C20.8114 18.0134 20.977 18.6626 20.6782 19.1642C20.5844 19.3219 20.4513 19.4524 20.2918 19.5431C20.1323 19.6338 19.952 19.6814 19.7686 19.6814Z"
                        fill="#FF8E12"></path>
                    <path
                        d="M15.7774 14.735V5.20338C15.7774 4.64298 15.493 4.13178 15.0166 3.83658C14.7843 3.69157 14.5186 3.60859 14.2451 3.59556C13.9715 3.58254 13.6992 3.6399 13.4542 3.76218L6.69579 7.11018H3.95979C3.07299 7.11018 2.35059 7.83138 2.35059 8.71938V15.0758C2.35059 15.9626 3.07179 16.685 3.95979 16.685H6.69819L10.8574 18.707C12.859 17.885 14.5654 16.4942 15.7774 14.735ZM7.96179 13.961C7.96179 14.5454 7.48779 15.0182 6.90459 15.0182C6.32139 15.0182 5.84739 14.5442 5.84739 13.961V9.91698C5.84739 9.33258 6.32139 8.85978 6.90459 8.85978C7.48779 8.85978 7.96179 9.33378 7.96179 9.91698V13.961ZM17.305 5.43258L17.047 5.58858C16.5478 5.89218 16.3894 6.54258 16.6918 7.04178C16.7861 7.19727 16.9189 7.32579 17.0774 7.41492C17.2359 7.50406 17.4147 7.55078 17.5966 7.55058C17.6266 7.55058 17.6554 7.54698 17.6854 7.54458C17.6276 6.82989 17.5002 6.12253 17.305 5.43258Z"
                        fill="#FCA315"></path>
                    <path
                        d="M14.6962 4.5229C14.6962 4.2361 14.6818 3.9517 14.6602 3.6697C14.2666 3.5425 13.8358 3.5701 13.4542 3.7597L6.69579 7.10889H3.95979C3.07299 7.10889 2.35059 7.8301 2.35059 8.7181V15.0745C2.35059 15.2353 2.37459 15.3901 2.41899 15.5365C2.81259 15.5785 3.21219 15.6025 3.61659 15.6025C9.73658 15.6025 14.6962 10.6417 14.6962 4.5229ZM5.84739 9.91569C5.84739 9.33129 6.32138 8.8585 6.90458 8.8585C7.48778 8.8585 7.96178 9.33249 7.96178 9.91569V13.9597C7.96178 14.5441 7.48778 15.0169 6.90458 15.0169C6.32138 15.0169 5.84739 14.5429 5.84739 13.9597V9.91569Z"
                        fill="#FCB138"></path>
                    <path
                        d="M5.84739 10.4804V9.91635C5.84739 9.33195 6.32139 8.85915 6.90459 8.85915C7.06462 8.85906 7.22258 8.89544 7.36646 8.96551C7.51034 9.03558 7.63637 9.1375 7.73498 9.26355C9.15338 8.13075 10.2886 6.65955 11.0146 4.96875L6.69579 7.10955H3.95979C3.07299 7.10955 2.35059 7.83075 2.35059 8.71875V11.576C3.56913 11.4083 4.75104 11.038 5.84739 10.4804Z"
                        fill="#FFC65E"></path>
                </svg>
                <span class="title">兑换须知</span>
            </div>
            <div class="notice-content" v-html="noticeContent">

            </div>
        </div>
        <div class="myTabs" style="background: #fff;">
            <el-tabs style="padding: 0 20px 40px 20px;" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="积分兑换" name="goodsNotice">
                    <el-input clearable style="width: 200px;" size="small" v-model="goodsName"
                        placeholder="物品名称" @blur="goodsName=$event.target.value.trim()"></el-input>
                    <el-button size="small" style="margin-left: 30px;" type="primary" @click="handleFilter">查询</el-button>
                    <div class="tab-list" style="margin-top: 10px;">
                        <div :class="{ 'tab': true, 'checked': item.checked }" v-for="(item) in options"
                            :key="item.dictValue" @click="choseProductAttributeType(item)">
                            {{ item.dictLabel }}
                        </div>
                    </div>
                    <!-- <div class="tab-list" style="margin-top: 10px;">
                        <div :class="{ 'tab': true, 'checked': item.checked }" v-for="(item) in deliveryTypeList"
                            :key="item.type" @click="choseDeliveryType(item)">
                            {{ item.name }}
                        </div>
                    </div> -->
                    <div class="tab-list" style="margin-top: 10px;">
                        <div :class="{ 'tab': true, 'checked': item.checked }" v-for="(item) in orderByClauseList"
                            :key="item.orderByClause" @click="changeOrderByClause(item)">
                            <i :class="item.icon"></i>积分
                        </div>
                    </div>
                    <div class="list-container">
                        <el-empty v-if="goodsList.length == 0" :image-size="200"></el-empty>
                        <div v-else class="prize-list">
                            <div v-for="(item, index) in goodsList" :key="index" class="prize-card prize-item">
                                <div class="img-container">
                                    <el-image :src="item.imgUrl" v-if="item.imgUrl" :preview-src-list="item.imgUrls.length==0?[item.imgUrl]:item.imgUrls"
                                        class="prize-img"></el-image>
                                </div>
                                <div class="content">
                                    <h3 :title="item.name" class="title">{{ item.name }}</h3>
                                    <!-- <h3 style="color: #1e80ff;" :title="item.name" class="title" @click="handleClickGood(item.skuId)">{{ item.name }}</h3> -->
                                    <p class="desc"><span v-if="item.deliveryTypeName">{{ item.deliveryTypeName }}</span></p>
                                    <p class="redeem-info">
                                        <span title="积分" class="price">
                                            <svg t="1681785345732" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg" p-id="1220" width="200" height="200">
                                                <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="1221">
                                                </path>
                                                <path
                                                    d="M989.866667 512c0 263.918933-213.947733 477.866667-477.866667 477.866667S34.133333 775.918933 34.133333 512 248.081067 34.133333 512 34.133333s477.866667 213.947733 477.866667 477.866667z"
                                                    fill="#FF7744" p-id="1222"></path>
                                                <path
                                                    d="M512 34.133333c176.878933 0 331.298133 96.085333 413.934933 238.933334-82.6368 142.848-237.056 238.933333-413.934933 238.933333S180.701867 415.914667 98.065067 273.066667C180.667733 130.2528 335.121067 34.133333 512 34.133333z"
                                                    fill="#FFAA44" p-id="1223"></path>
                                                <path
                                                    d="M496.605867 305.3568a17.066667 17.066667 0 0 1 30.788266 0L576.853333 408.917333a17.066667 17.066667 0 0 0 13.175467 9.557334l113.800533 15.018666a17.066667 17.066667 0 0 1 9.5232 29.2864l-83.2512 79.018667a17.066667 17.066667 0 0 0-5.051733 15.496533l20.923733 112.8448a17.066667 17.066667 0 0 1-24.917333 18.090667l-100.864-54.715733a17.066667 17.066667 0 0 0-16.315733 0l-100.864 54.715733a17.066667 17.066667 0 0 1-24.917334-18.090667l20.8896-112.8448a17.066667 17.066667 0 0 0-5.0176-15.496533l-83.217066-79.018667a17.066667 17.066667 0 0 1 9.489066-29.2864l113.800534-15.018666a17.066667 17.066667 0 0 0 13.175466-9.557334l49.425067-103.560533z"
                                                    fill="#FFFFFF" p-id="1224"></path>
                                            </svg>
                                            {{ item.price }}
                                        </span>
                                        <span class="count">{{ item.stock }} 库存</span>
                                    </p>
                                </div>
                                <div class="btn-container">
                                    <button v-if="item.stock == 0" @click="handleClickExchange(item.skuId)"
                                        class="ui-btn gray medium btn">
                                        敬请期待
                                    </button>
                                    <button v-else @click="handleClickExchange(item.skuId)"
                                        class="ui-btn primary medium btn">
                                       立即兑换
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="礼品兑换" name="giftNotice">
                    <div class="tab-list">
                        <div :class="{ 'tab': true, 'checked': item.checked }" v-for="(item) in choseList" :key="item.index"
                            @click="choseType(item)">
                            {{ item.title }}
                        </div>
                    </div>
                    <el-empty v-if="giftList.length == 0" :image-size="200"></el-empty>
                    <div v-else class="list-container">
                        <div class="prize-list">
                            <div v-for="(item, index) in giftList" :key="index" class="prize-card prize-item">
                                <div class="img-container">
                                    <el-image :src="item.imgUrl" v-if="item.imgUrl" :preview-src-list="item.imgUrls.length==0?[item.imgUrl]:item.imgUrls"
                                        class="prize-img"></el-image>
                                </div>
                                <div class="content">
                                    <h3 :title="item.name" class="title">{{ item.name }}</h3>
                                    <!-- <h3 style="color: #1e80ff;" :title="item.name" class="title" @click="handleClickGood(item.skuId)">{{ item.name }}</h3> -->
                                    <p class="desc"><span v-if="item.deliveryTypeName">{{ item.deliveryTypeName }}</span></p>
                                    <p class="redeem-info">
                                        <span title="福利券" class="price">
                                            <svg t="1681880735031" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg" p-id="1483" width="200" height="200">
                                                <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="1484">
                                                </path>
                                                <path
                                                    d="M35.328 429.841067a136.533333 136.533333 0 0 1 96.5632-167.2192L725.333333 103.594667a136.533333 136.533333 0 0 1 167.253334 96.5632L957.815467 443.733333H39.0144l-3.720533-13.892266z"
                                                    fill="#FFAA44" p-id="1485"></path>
                                                <path
                                                    d="M34.133333 443.733333a136.533333 136.533333 0 0 1 136.533334-136.533333h682.666666a136.533333 136.533333 0 0 1 136.533334 136.533333v11.946667c0 15.598933-10.786133 28.808533-24.814934 35.5328a136.533333 136.533333 0 0 0 0 246.3744c14.0288 6.724267 24.814933 19.933867 24.814934 35.498667V785.066667a136.533333 136.533333 0 0 1-136.533334 136.533333H170.666667a136.533333 136.533333 0 0 1-136.533334-136.533333v-11.946667c0-15.598933 10.786133-28.808533 24.814934-35.5328a136.533333 136.533333 0 0 0 0-246.3744c-14.0288-6.724267-24.814933-19.933867-24.814934-35.498667V443.733333z"
                                                    fill="#FF7744" p-id="1486"></path>
                                                <path
                                                    d="M375.466667 426.666667a51.2 51.2 0 0 1 51.2 51.2v273.066666a51.2 51.2 0 0 1-102.4 0v-273.066666a51.2 51.2 0 0 1 51.2-51.2z"
                                                    fill="#FFFFFF" p-id="1487"></path>
                                            </svg>
                                            兑换券
                                        </span>
                                        <span class="count">{{ item.stock }}库存</span>
                                    </p>
                                </div>
                                <div class="btn-container">
                                    <button v-if="item.stock == 0" @click="handleClickExchange(item.skuId)"
                                        class="ui-btn medium default btn">
                                        敬请期待
                                    </button>
                                    <button v-else @click="handleClickExchange(item.skuId)"
                                        class="ui-btn primary medium default btn">
                                       立即兑换
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>


                </el-tab-pane>
            </el-tabs>
        </div>
        <el-dialog title="物品详情" :visible.sync="dialogVisible" width="40%">
            <div v-html="skuDesc"></div>
        </el-dialog>

    </div>
</template>
<script>
import { integralInfo,integralList, festivalList, notice, welfareType, dictList } from "@/api/allApi";
import { getTab } from '@/utils/auth'
import { debounce } from '@/utils/index'
export default {
    data() {
        return {
            dialogVisible: false,
            skuDesc:'',
            bannerList: [],
            page: 1,
            pages: 1,
            // tab 列表
            options: [],
            goodsName: '',
            productAttribute: '',
            orderByClause: 'desc',
            deliveryType: '',
            deliveryTypeList: [
                {
                    type: '',
                    checked: true,
                    name: '全部'
                },
                {
                    type: 0,
                    checked: false,
                    name: '办公室领取'
                },
                {
                    type: 1,
                    checked: false,
                    name: '快递'
                },
                {
                    type: 2,
                    checked: false,
                    name: '卷码兑换'
                },
                {
                    type: 3,
                    checked: false,
                    name: '线下组织'
                },
            ],
            orderByClauseList: [
                {
                    icon: 'el-icon-bottom',
                    checked: true,
                    orderByClause: 'desc',
                },
                {
                    icon: 'el-icon-top',
                    checked: false,
                    orderByClause: 'asc',
                },
            ],
            choseList: [],
            curChosed: '',
            activeName: 'goodsNotice',
            noticeContent: '',
            goodsList: [],
            giftList: [],
        };
    },
    created() {
        this.getBannerList();
        const Tab = getTab();
        if (Tab == 'gift') {
            this.activeName = 'giftNotice';
        };
        this.getIntegralTypes();
        this.getWelfareList();
        this.getFirstList();
        this.getNotice(this.activeName);
    },
    methods: {
        getDataInfo(id){
            integralInfo({skuId:id}).then(response => {
                    this.data = response.data.data;
                }).catch(() => {})
        },
        getBannerList(){
            dictList({dictType:'index_lbt'}).then(response=>{
                this.bannerList = response.data.data; 
            })
        },
        handleClickGood(id) {
            integralInfo({skuId:id}).then(response => {
                    this.skuDesc = response.data.data.skuDesc;
                    if(this.skuDesc){
                        this.dialogVisible = true;
                    }
                }).catch(() => {})
            
        },
        handleFilter() {
            this.page = 1;
            this.getFirstList();
        },
        changeOrderByClause(item) {
            this.orderByClauseList.forEach((element) => {
                element.checked = false;
            });
            item.checked = true;
            this.orderByClause = item.orderByClause;
            this.page = 1;
            this.getFirstList();
        },
        getIntegralTypes() {
            dictList({ dictType: 'mall_sku_attribute' }).then(response => {
                console.log(response.data.data);
                const dataList = response.data.data;
                const data = {
                    dictValue: '',
                    dictLabel: '全部'
                }
                dataList.unshift(data);
                if (dataList.length > 0) {
                    dataList.forEach((item, index) => {
                        if (index == 0) {
                            item.checked = true;
                        } else {
                            item.checked = false;
                        }

                    });
                    this.options = dataList;
                }
            })
        },
        getWelfareList() {
            welfareType().then(response => {
                console.log(response.data.data);
                const dataList = response.data.data;
                if (dataList.length > 0) {
                    dataList.forEach((item, index) => {
                        if (index == 0) {
                            item.checked = true;
                        } else {
                            item.checked = false;
                        }

                    });
                    this.choseList = dataList;
                    this.curChosed = dataList[0].actId;
                    festivalList({ actId: this.curChosed }).then(response => {
                        console.log(response.data.data);
                        let list = response.data.data;
                        list.forEach((element,index) => {
                            let imgUrls = []
                            if(element.imgs){
                                for (let i in element.imgs) {
                                    imgUrls.push(element.imgs[i].url)
                                }
                            } 
                            list[index].imgUrls = imgUrls;
                        });
                        console.log(list);
                        this.giftList = list;
                    })
                }
            })
        },
        choseDeliveryType(item) {
            this.deliveryTypeList.forEach((element) => {
                element.checked = false;
            });
            item.checked = true;
            this.deliveryType = item.type;
            this.page = 1;
            this.getFirstList();
        },
        choseProductAttributeType(item) {
            this.options.forEach((element) => {
                element.checked = false;
            });
            item.checked = true;
            this.productAttribute = item.dictValue;
            this.page = 1;
            this.getFirstList();
        },
        choseType(item) {
            this.choseList.forEach((element) => {
                element.checked = false;
            });
            item.checked = true;
            this.curChosed = item.actId;
            this.getSecondList();
        },
        getNotice(val) {
            notice({ noticeType: val }).then(response => {
                console.log(response.data.data);
                this.noticeContent = response.data.data.content
            })
        },
        getFirstList() {
            let params = {
                limit: 8,
                page: this.page,
                name: this.goodsName,
                productAttribute: this.productAttribute,
                orderByClause: this.orderByClause,
                // deliveryType: this.deliveryType
            }

            integralList(params).then(response => {
                let list = response.data.data.list;
                list.forEach((element,index) => {
                    let imgUrls = []
                    if(element.imgs){
                        for (let i in element.imgs) {
                            imgUrls.push(element.imgs[i].url)
                        }
                    } 
                    list[index].imgUrls = imgUrls;
                });
                console.log(list);
                if (this.page == 1) {
                    this.goodsList = list;
                    this.page = response.data.data.pageNum;
                    this.pages = response.data.data.pages;
                } else {
                    this.goodsList = [
                        ...this.goodsList,
                        ...list
                    ]
                }
                ++this.page
            })
        },
        getSecondList() {
            festivalList({ actId: this.curChosed }).then(response => {
                console.log(response.data.data);
                let list = response.data.data;
                list.forEach((element,index) => {
                    let imgUrls = []
                    if(element.imgs){
                        for (let i in element.imgs) {
                            imgUrls.push(element.imgs[i].url)
                        }
                    } 
                    list[index].imgUrls = imgUrls;
                });
                console.log(list);
                this.giftList = list;
            })
        },
        handleClick(tab, event) {
            this.page = 1;
            console.log(tab.name, event);
            if (tab.name == 'goodsNotice') {
                this.getFirstList();
            } else {
                this.getSecondList();
            }
            this.getNotice(tab.name);
        },
        handleClickExchange(id) {
            this.$router.push({
                path: '/home/pointsMall/redeem',
                query: {
                    id: id,
                    name: this.activeName,
                    type:this.curChosed,
                }
            });
        },
        // 保存滚动值，这是兼容的写法
        handleScroll() {
            //变量scrollTop是滚动条滚动时，距离顶部的距离
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //变量windowHeight是可视区的高度
            var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            //变量scrollHeight是滚动条的总高度
            var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            //滚动条到底部的条件
            console.log("距顶部---" + scrollTop + "可视区高度---" + windowHeight + "滚动条总高度---" + scrollHeight);
            if (scrollHeight - (scrollTop + windowHeight) < 1) {
                if (this.page > this.pages) {
                    return
                } else {
                    this.getFirstList();
                }
            }
        },
    },
    mounted() {
        window.addEventListener('scroll', debounce(this.handleScroll,500));
    },
    destroyed() {
        console.log('lalalal')
        // 离开该页面需要移除这个监听的事件，不然会报错
        window.removeEventListener('scroll', this.handleScroll)
    }
};
</script>
<style scoped>
.hot-list-wrap{
    margin-bottom: 10px;
}
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* background-color: #007fff; */
    color: #fff;
    border-radius: 2px;
    border: none;
    padding: 0.5rem 1.3rem;
    outline: none;
    transition: background-color .3s, color .3s;
    cursor: pointer;
}

.list-container .prize-item:nth-child(4n) {
    margin-right: 0;
}

.list-container {
    border-radius: 2px;
    background-color: transparent;
}

.list-container .prize-list {
    padding: 20px 0;
    background: #fff;
    display: flex;
    flex-flow: row wrap;
    box-sizing: border-box;
}

.list-container .prize-item {
    width: calc(25% - 15px);
    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 2px;
}

.prize-card {
    background: #fff;
    border: 1px solid #e4e6eb;
    box-sizing: border-box;
    border-radius: 2px;
}

.prize-card .img-container {
    height: 159px;
    background: #f7f8fa;
    border-radius: 2px 2px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prize-card .img-container .prize-img {
    /* width: 100%;
    height: 100%; */
    max-height: 120px;
    max-width: 120px;
}

.prize-card .content {
    padding: 0 16px;
}

.prize-card .content .desc,
.prize-card .content .title {
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prize-card .content .title {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin-top: 12px;
    color: #1d2129;
    margin-bottom: 0;
}

.prize-card .content .desc {
    margin: 10px 0;
    display: inline-block;
    font-size: 12px;
    line-height: 18px;
    height: 18px;
    width: 100%;
}

.prize-card .content .desc span {
    color: #ff7d00;
    background: #fff7e8;
    padding: 2px 4px;
}

.prize-card .content .redeem-info {
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    align-items: center;
}

.prize-card .content .price {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #ff8462;
    flex: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: flex-start;
}

.prize-card .content .price .icon {
    height: 16px;
    width: 16px;
    position: relative;
    margin-right: 4px;
}

.prize-card .content .count {
    font-size: 12px;
    line-height: 20px;
    margin-left: 12px;
    color: #8a919f;
}

.prize-card .btn {
    border-radius: 16px;
}

.medium {
    padding: 5px 16px;
}

.primary {
    background-image: linear-gradient(to right, #f5b543,#faa029);
}
.gray{
    background-color: gray;
    opacity: 0.5;
}

.ui-btn {
    box-sizing: border-box;
    font-size: 14px;
    line-height: 22px;
    padding: 5px 16px;
    color: #fff;
    border: none;
    white-space: nowrap;
}

.prize-card .btn-container {
    border-top: 1px solid #e4e6eb;
    text-align: right;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.right-wrap {
    width: 100%;
}

.banner {
    width: 100%;
    /* height: 120px; */
    background-color: #2c82fe;
    border-radius: 4px;
    margin-bottom: 16px;
    display: block;
}

.notice-board {
    padding: 1rem 1.667rem;
    margin-bottom: 16px;
    background: #fff;
    border-radius: 4px;
}

.notice-board .notice-header {
    display: flex;
    align-items: center;
}

.notice-board .notice-header .title {
    margin-left: 1rem;
    font-size: 1rem;
    line-height: 2rem;
    font-weight: 500;
    color: #252933;
}

.notice-board .notice-content {
    /* margin-top: 0.2rem;
    margin-left: 2.5rem; */
    font-size: 0.4rem;
    /* line-height: 1.3rem; */
    /* white-space: pre-line; */
    color: #515767;
}

.tab-list {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    position: relative;
    align-items: baseline;
}

.tab {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.8rem;
    background-color: #fff;
    border-radius: 1rem;
    font-size: 12px;
    line-height: 1.8rem;
    color: #8a9aa9;
    padding: 0 0.83rem;
    margin-right: 1rem;
    position: relative;
    cursor: pointer;
}

.checked {
    background-color: #1e80ff;
    color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05), 0 1px 2px 0 rgba(0, 0, 0, .05);
}
</style>