<template>
    <view class="leaderboard-body safe-area">
        <view class="leaderboard-condition">
            <view class="leaderboard-condition-item" :style="{
                color:
                    active == 'day'
                        ? themeStore.text.conditionColor
                        : themeStore.text.conditionActiveColor,
            }" :class="active == 'day' ? 'active' : ''" @click="changeActive('day')">
                {{ $t("promo.leaderboard.dailyList") }}
            </view>
            <view class="leaderboard-condition-item" :style="{
                color:
                    active == 'week'
                        ? themeStore.text.conditionColor
                        : themeStore.text.conditionActiveColor,
            }" style="margin: 0 62rpx" :class="active == 'week' ? 'active' : ''" @click="changeActive('week')">
                {{ $t("promo.leaderboard.weeklyList") }}
            </view>
            <view class="leaderboard-condition-item" :style="{
                color:
                    active == 'month'
                        ? themeStore.text.conditionColor
                        : themeStore.text.conditionActiveColor,
            }" :class="active == 'month' ? 'active' : ''" @click="changeActive('month')">
                {{ $t("promo.leaderboard.monthlyList") }}
            </view>
        </view>
        <view class="total-amount relative"
            :style="{ background: `top / cover no-repeat ${themeStore.rank.totalAmountBg}` }">
            <view class="total-amount-content flex-center" :style="{ color: themeStore.text.historyTextColor }">
                <!-- {{ ranks[active]?.totalBetAmount ?? 0 }} -->
                <NumberScroll :value="totalBetAmount" :duration="2000"></NumberScroll>
            </view>
        </view>
        <view class="total-betrate flex-center" :style="{ color: themeStore2.theme.light }">
            <view class="round-imp flex-center">!</view>
            <text>{{ formatNum((ranks[active]?.bet_rate) * 100) + '%' }} {{ $t('promo.leaderboard.betRate') }}</text>
        </view>
        <view v-if="ranks[active].ranks?.length > 0" class="rank-station relative"
            :style="{ background: `bottom / contain no-repeat ${themeStore.rank.rankStatinBg}` }">
            <view class="second-box flex flex-column items-center pos-absolute">
                <view class="avatar-box relative flex-center">
                    <theme-image src="@/static/rank/image_tx.png" class="avatar-box-image"></theme-image>
                    <theme-image src="@/static/rank/yajun.gif" class="avatar-decoration pos-absolute"></theme-image>
                </view>
                <view class="phone-box flex-center"
                    :style="{ color: themeStore.rank.tabActive, background: themeStore.rank.phoneBgColor }">{{
                        encipherPhone(two.mobile) }}</view>
                <view class="bets-info flex flex-column items-center" :style="{ color: themeStore.rank.rankColor }">
                    <view class="bet-rate">Reward:{{ formatNum(two?.bet_rate * 100) + '%' }}</view>
                    <view class="bet-amount">Bets:{{ encipherAmount(two.betAmount, 3) }}</view>
                </view>
            </view>
            <view class="first-box flex flex-column items-center pos-absolute">
                <view class="avatar-box relative flex-center">
                    <theme-image src="@/static/rank/image_tx2.png" class="avatar-box-image"></theme-image>
                    <theme-image src="@/static/rank/guanjundk.gif" class="avatar-decoration pos-absolute"></theme-image>
                </view>
                <view class="phone-box flex-center"
                    :style="{ color: themeStore.rank.tabActive, background: themeStore.rank.phoneBgColor }">{{
                        encipherPhone(one.mobile) }}</view>
                <view class="bets-info flex flex-column items-center" :style="{ color: themeStore.rank.rankColor }">
                    <view class="bet-rate">Reward:{{ formatNum((one?.bet_rate ?? 0) * 100) + '%' }}</view>
                    <view class="bet-amount">Bets:{{ encipherAmount(one.betAmount, 3) }}</view>
                </view>
            </view>
            <view class="third-box flex flex-column items-center pos-absolute">
                <view class="avatar-box relative flex-center">
                    <theme-image src="@/static/rank/image_tx3.png" class="avatar-box-image"></theme-image>
                    <theme-image src="@/static/rank/jijun.gif" class="avatar-decoration pos-absolute"></theme-image>
                </view>
                <view class="phone-box flex-center"
                    :style="{ color: themeStore.rank.tabActive, background: themeStore.rank.phoneBgColor }">{{
                        encipherPhone(three.mobile) }}</view>
                <view class="bets-info flex flex-column items-center" :style="{ color: themeStore.rank.rankColor }">
                    <view class="bet-rate">Reward:{{ formatNum((three?.bet_rate ?? 0) * 100) + '%' }}</view>
                    <view class="bet-amount">Bets:{{ encipherAmount(three.betAmount, 3) }}</view>
                </view>
            </view>
        </view>
        <view v-if="list.length > 0" class="rank-list-content w-full"
            :style="{ backgroundColor: themeStore.rank.listBgColor, color: themeStore.text.normal }">

            <view v-for="item in list" :key="item.rank" class="list-item-box flex justify-between items-center"
                :style="{ backgroundColor: themeStore.rank.listItemBgColor }">
                <view class="item left-info flex items-center">
                    <view class="rank-num flex items-center" :style="{ color: themeStore.rank.rankNumColor }">
                        <text
                            :style="{ color: themeStore.rank.rankNumPreColor, fontSize: '44rpx', marginRight: '5rpx' }">-</text>
                        {{ item.rank }}
                    </view>
                    <theme-image src="@/static/rank/image_tx4.png" class="def-awatar"></theme-image>
                    <view class="item-phone">
                        <view class="mobile col-item" :style="{ color: themeStore.rank.rankNumColor }">{{
                            encipherPhone(item.mobile) }}</view>
                        <view class="item-bet col-item" :style="{ color: themeStore.rank.rankColor }">
                            Reward {{ formatNum(getMyRank(item.rank) * 100, 3) + "%" }}
                        </view>
                    </view>
                </view>
                <view class="item total-bet">
                    <view class="total-bet-label col-item" :style="{ color: themeStore.rank.rankNumColor }">{{
                        $t("promo.leaderboard.totalBet") }}</view>
                    <view class="bet-amount col-item flex justify-end" :style="{ color: themeStore.rank.rankColor }">{{
                        encipherAmount(item.betAmount, 3) }}</view>
                </view>
            </view>
        </view>
        <view class="my-rank-data safe-area">
            <view class="my-rank-content flex justify-between items-center">
                <view class="rank-col col1">
                    <text
                        :style="{ color: themeStore.rank.rankNumPreColor, fontSize: '34rpx', marginRight: '10rpx' }">-</text>
                    <span style="font-size: 36rpx;" :style="{ color: themeStore.rank.rankColor }">{{ meData.rank == -1 ?
                        $t("promo.leaderboard.noRank") : meData.rank }}</span>
                </view>
                <view class="rank-col col2" :style="{ color: themeStore.rank.myRankLabelColor }">
                    <view class="my-bets">
                        {{ $t("promo.leaderboard.myBets") }}
                        <text :style="{ color: themeStore.rank.rankColor, 'font-size': '36rpx' }">{{
                            encipherAmount(meData.betAmount, 3)
                            }}</text>
                    </view>
                    <view class="my-reward">
                        {{ $t("promo.leaderboard.myReward") }}
                        <text :style="{ color: themeStore.rank.rankColor, 'font-size': '26rpx' }">
                            {{ formatNum(getMyRank(meData.rank) * 100, 3) + '%' }}</text>
                    </view>
                </view>
                <view class="rank-col col3" :style="{ color: themeStore.rank.myRankLabelColor }">
                    <view class="my-left">{{ $t("promo.leaderboard.left") }}</view>
                    <view :style="{ color: themeStore.rank.rankColor, 'font-size': '36rpx' }">{{
                        encipherAmount(meData.myLeftBet, 3) }}</view>
                </view>
            </view>
        </view>
        <view v-if="ranks[active].ranks?.length == 0" class="leaderboard-list-body">
            <NoData :text="$t('promo.leaderboard.noRankDesc')"></NoData>
        </view>
        <view class="history" @click="showHistory"
            :style="{ color: themeStore.text.historyTextColor, 'background-image': themeStore2.imageCssUrl.historyBut }">
            {{
                $t("promo.leaderboard.history") }}
        </view>
        <empty-hold height="149" />
    </view>
    <view class="history-popup" v-if="historyVisible">
        <view class="history-popup-content" :style="{ backgroundColor: themeStore.rank.bgColor }">
            <theme-image class="history-popup-close" src="@/static/promo/close.png"
                @click="closeHistoryPopup"></theme-image>
            <view class="history-popup-title" :style="{ color: themeStore.text.normal }">{{
                $t("promo.leaderboard.history") }}
            </view>
            <view class="history-popup-search">
                <view class="history-popup-search-content" :style="{ backgroundColor: themeStore.search.bgColor }">
                    <view class="history-popup-search-content-item" :style="{
                        color:
                            historyActive == 'day'
                                ? themeStore.text.serarchActiveColor
                                : themeStore.text.serarchColor,
                        backgroundColor:
                            historyActive == 'day'
                                ? themeStore.search.activeBgColor
                                : themeStore.search.bgColor,
                    }" @click="changeHistoryActive('day')">
                        {{ $t("promo.leaderboard.lastDay") }}
                    </view>
                    <view class="history-popup-search-content-item" :style="{
                        color:
                            historyActive == 'week'
                                ? themeStore.text.serarchActiveColor
                                : themeStore.text.serarchColor,
                        backgroundColor:
                            historyActive == 'week'
                                ? themeStore.search.activeBgColor
                                : themeStore.search.bgColor,
                    }" @click="changeHistoryActive('week')">
                        {{ $t("promo.leaderboard.lastWeekly") }}
                    </view>
                    <view class="history-popup-search-content-item" :style="{
                        color:
                            historyActive == 'month'
                                ? themeStore.text.serarchActiveColor
                                : themeStore.text.serarchColor,
                        backgroundColor:
                            historyActive == 'month'
                                ? themeStore.search.activeBgColor
                                : themeStore.search.bgColor,
                    }" @click="changeHistoryActive('month')">
                        {{ $t("promo.leaderboard.lastMonthly") }}
                    </view>
                </view>
            </view>
            <view class="history-table" v-if="list.length > 0">
                <view class="history-table-theader">
                    <view class="history-table-col1" :style="{ color: themeStore.text.normal }">{{
                        $t("promo.public.rank") }}
                    </view>
                    <view class="history-table-col2" :style="{ color: themeStore.text.normal }">{{
                        $t("promo.leaderboard.phoneNo")
                        }}</view>
                    <view class="history-table-col2" :style="{ color: themeStore.text.normal }">{{
                        $t("promo.leaderboard.totalBet") }}</view>
                    <view class="history-table-col2 history-table-col-color"
                        :style="{ color: themeStore.text.awardColor }">
                        {{
                            $t("promo.leaderboard.award") }}</view>
                </view>
                <view class="history-table-tbody">
                    <view class="history-table-tbody-item" :style="{ backgroundColor: themeStore.listItemBgColor }"
                        v-for="(item, index) in list">
                        <view class="history-table-col1" :style="{ color: themeStore.text.normal }">{{ item.rank }}
                        </view>
                        <view class="history-table-col2" :style="{ color: themeStore.text.normal }">{{
                            encipherPhone(item.mobile) }}
                        </view>
                        <view class="history-table-col2" :style="{ color: themeStore.text.normal }">{{
                            encipherAmount(item.betAmount, 1) }}</view>
                        <view class="history-table-col2 history-table-col-color"
                            :style="{ color: themeStore.text.awardColor }">{{
                                getAwards(item.rank) }}</view>
                    </view>
                </view>
            </view>
            <view class="history-table" v-else>
                <NoData :text="$t('promo.noData.leaderboardText')"></NoData>
            </view>
        </view>
    </view>
    <RankHisPop ref="historyPopup" :content="content" />
</template>

<script setup>
import NoData from "@/pages/promo/components/NoData.vue";
import { getBetRankDataApi, getTypeDetailApi } from "@/api/promo.js";
import { encipherPhone } from "@/module/utils/encipherPhone.js";
import { ref, onMounted, reactive, onBeforeUnmount } from "vue";
import { useThemeStore } from "@/store/useThemeStore";
import RankHisPop from "@/components/popup/RankHisPop.vue";
import { formatNum } from "@/module/utils/util";
import NumberScroll from "./NumberScroll.vue";
const themeStore2 = useThemeStore()
const themeStore = useThemeStore().theme.promo;
const historyPopup = ref(null);
let active = ref("day");
let historyActive = ref("day");
let historyVisible = ref(false);
const content = ref("");
const totalBetAmount = ref(0);
let list = ref([]);
let meData = reactive({
    mobile: uni.getStorageSync("mobile"),
    betAmount: "",
    rank: "",
    myLeftBet: 0
});
let ranks = reactive({
    day: {},
    week: {},
    month: {},
});
let one = reactive({
    mobile: "",
    betAmount: "",
});
let two = reactive({
    mobile: "",
    betAmount: "",
});
let three = reactive({
    mobile: "",
    betAmount: "",
});

const changeActive = (value) => {
    active.value = value;
    totalBetAmount.value = 0
    assignPageData(value);
};
const changeHistoryActive = (value) => {
    historyActive.value = value;
    assignPageData(value);
};
const showHistory = () => {
    // historyVisible.value = true;
    historyPopup.value.open();
    assignPageData(historyActive.value);
};
const closeHistoryPopup = () => {
    historyVisible.value = false;
};

const getMyRank = (rank) => {

    const idx = ranks[active.value].rankAwards?.findIndex((item) => {
        return rank >= item[0] && rank <= item[1];
    })

    if (idx > -1) {
        return ranks[active.value].rankAwards[idx][2]
    }
    return 0
}
const getAwards = (rank) => {
    if (ranks[historyActive.value].rankAwards != undefined) {
        for (let i = 0; i < ranks[historyActive.value].rankAwards.length; i++) {
            if (
                rank >= ranks[historyActive.value].rankAwards[i][0] &&
                rank <= ranks[historyActive.value].rankAwards[i][1]
            ) {
                return ranks[historyActive.value].rankAwards[i][2];
            }
        }
    } else {
        return 0;
    }
};
const getBetRankData = async () => {
    let start = Date.now()
    const { code, data } = await getBetRankDataApi({
        rankOption: 0,
    });

    console.log("getBetRankData request time", Date.now() - start);
    start = Date.now()
    data.ranks.forEach((item) => {
        ranks[item.rankType] = item;
    });
    if (
        content.value != "" &&
        content.value != undefined &&
        content.value != null
    ) {
        let _content = JSON.parse(content.value);
        console.log("getBetRankData content:", _content);

        _content.ranks.forEach((item) => {
            ranks[item.type].rankAwards = item.rank_awards;
            ranks[item.type].rankShow = item.rank_show;
            ranks[item.type].rankShowMax = item.rank_show_max;
            ranks[item.type].bet_rate = item.bet_rate;
        });
    }

    console.log("getBetRankData:", Date.now() - start);
    start = Date.now()
    assignPageData(active.value);
    console.log("getBetRankData assign:", Date.now() - start);
    console.log("-----------------------------------------")

};
async function getTypeData() {
    try {
        console.log("getTypeData");
        const { data } = await getTypeDetailApi({ type: 5 })
        console.log("config content:", data);
        content.value = data.content
    } catch (error) {
        console.log("config error:", error);
    }
}
const encipherAmount = (value, type = 0) => {
    if (value) {
        if (type == 0) {
            return Math.floor(value)?.toString()?.replace(/\d(?=(\d{3})+\.)/g, "$&,");
        }
        if (type == 1) {
            return (Math.floor(value * 100) / 100)?.toFixed(2);
        }
        if (type == 3) {
            return (isNaN(value) ? 0 : value)?.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,");
        }
    }
    return "0";
};
const assignPageData = (value) => {
    setTimeout(() => {
        totalBetAmount.value = ranks[value].totalBetAmount
    }, 10)
    console.log("assignPageData ranks:", ranks[value]);

    const rankAwards = ranks[value].rankAwards?.slice(0, 3) ?? [];

    if (ranks[value].ranks.length > 2) {
        const [a1, a2, a3] = rankAwards;
        one.mobile = ranks[value].ranks[0]?.mobile;
        one.betAmount = ranks[value].ranks[0]?.betAmount;
        one.bet_rate = a1[2];
        two.mobile = ranks[value].ranks[1]?.mobile;
        two.betAmount = ranks[value].ranks[1]?.betAmount;
        two.bet_rate = a2[2];
        three.mobile = ranks[value].ranks[2]?.mobile;
        three.betAmount = ranks[value].ranks[2]?.betAmount;
        three.bet_rate = a3[2];
    } else if (ranks[value].ranks.length >= 1) {
        const [a1, a2] = rankAwards;
        one.mobile = ranks[value].ranks[0]?.mobile;
        one.betAmount = ranks[value].ranks[0]?.betAmount;
        one.bet_rate = a1[2];
        two.mobile = ranks[value].ranks[1]?.mobile;
        two.betAmount = ranks[value].ranks[1]?.betAmount;
        two.bet_rate = a2[2];
    } else if (ranks[value].ranks.length >= 0) {
        const [a1] = rankAwards;
        one.mobile = ranks[value].ranks[0]?.mobile;
        one.betAmount = ranks[value].ranks[0]?.betAmount;
        one.bet_rate = a1[2];
    } else {
        one.mobile = "";
        two.mobile = "";
        three.mobile = "";
        one.betAmount = "";
        two.betAmount = "";
        three.betAmount = "";
        one.bet_rate = 0;
        two.bet_rate = 0;
        three.bet_rate = 0;
    }
    list.value = ranks[value].ranks.slice(3, ranks[value].rankShow || 50);

    meData.betAmount =
        ranks[value].myBetAmount == "" ? 0 : ranks[value].myBetAmount;
    meData.rank =
        ranks[value].myRank > ranks[value].rankShowMax ? -1 : ranks[value].myRank;
    meData.myLeftBet = ranks[value].myLeftBet
};
const timer = ref(null);
onMounted(async () => {
    await getTypeData()
    getBetRankData();

    timer.value = setInterval(() => {
        getBetRankData();
    }, 10000);
});
onBeforeUnmount(() => {
    clearInterval(timer.value);
    timer.value = null;
})
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
    display: none;
}

.leaderboard-body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 20rpx;
    overflow-y: auto;

    .leaderboard-condition {
        width: 100%;
        height: 54rpx;
        display: flex;
        justify-content: center;

        .leaderboard-condition-item {
            width: 152rpx;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 25rpx;
            // color: #ffffff;
            // -webkit-text-stroke: 1rpx #d23530 !important;
            -webkit-text-stroke: 1rpx;
        }

        .active {
            font-size: 26rpx;
            // color: #ffdf3f;
            line-height: 25rpx;
            // font-style: italic;
            // text-stroke: 1rpx #d23530 !important;
            -webkit-text-stroke: 1rpx;
            position: relative;
        }

        .active::after {
            content: "";
            width: 100rpx;
            height: 1px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
            background-color: #ffdf3f;
            // background: url("https://storage.googleapis.com/baowang-static/h5-images/v2/red/promo/sjx.png");
            // background-size: 100% 100%;
        }
    }

    .total-amount {
        width: 623rpx;
        height: 276rpx;
        margin: 0 auto;
        margin-top: -20rpx;

        .total-amount-content {
            width: 471rpx;
            height: 99rpx;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 50rpx;
            width: 471rpx;
            font-family: Inter;
            font-weight: 900;
            font-size: 52rpx;
            // color: rgba(167, 99, 106, 0);
            text-shadow: 0rpx 3rpx 0rpx #C05A00, 0rpx 4rpx 0rpx #FF6A00, 0rpx 10rpx 6rpx rgba(0, 0, 0, 0.33);
            background: linear-gradient(180deg, #FFFFFF 0%, #FFFBD6 13.8671875%, #FFF389 45.3369140625%, #FEE545 62.2314453125%, #ECA23D 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: #FEE545;
        }
    }

    .total-betrate {
        font-family: Roboto;
        font-weight: 400;
        font-size: 19rpx;
        margin-top: -16px;

        .round-imp {
            width: 21rpx;
            height: 21rpx;
            margin-right: 5rpx;
            border-radius: 50%;
            border: 1px solid #FEE545;
            flex-shrink: 0;
            font-size: 8px;
            color: #FEE545;
        }
    }

    .rank-station {
        width: 634rpx;
        height: 400rpx;
        margin: 0 auto;
        margin-top: 5rpx;

        .second-box {
            left: 13rpx;
            bottom: 0;
            width: 186rpx;
            height: 332rpx;

            .avatar-box {
                width: 186rpx;
                height: 192rpx;

                .avatar-box-image {
                    width: 129rpx;
                    height: 129rpx;
                }

                .avatar-decoration {
                    width: 186rpx;
                    height: 192rpx;
                    top: 0;
                    left: 0;
                }
            }

            .phone-box {
                width: 167rpx;
                height: 33rpx;
                background: rgba(0, 0, 0, 0.5);
                border-radius: 17rpx;
                font-family: Roboto;
                font-weight: 400;
                font-size: 21rpx;
                position: relative;
                top: -5rpx;
            }

            .bets-info {
                width: 168rpx;
                height: 81rpx;
                margin-top: 15rpx;
                font-family: Roboto;
                font-weight: 400;
                font-size: 20rpx;
                padding: 10rpx 4px;
            }
        }

        .first-box {
            left: 200rpx;
            bottom: 0;
            width: 239rpx;
            height: 394rpx;

            .avatar-box {
                width: 239rpx;
                height: 232rpx;

                .avatar-box-image {
                    width: 145rpx;
                    height: 139rpx;
                }

                .avatar-decoration {
                    width: 239rpx;
                    height: 232rpx;
                    top: 0;
                    left: 0;
                }
            }

            .phone-box {
                width: 167rpx;
                height: 33rpx;
                background: rgba(0, 0, 0, 0.5);
                border-radius: 17rpx;
                font-family: Roboto;
                font-weight: 400;
                font-size: 21rpx;
                position: relative;
                top: -5rpx;
            }

            .bets-info {
                width: 168rpx;
                height: 81rpx;
                margin-top: 15rpx;
                font-family: Roboto;
                font-weight: 400;
                font-size: 20rpx;
                padding: 10rpx 4px;
            }
        }

        .third-box {
            right: 10rpx;
            bottom: 0;
            width: 172rpx;
            height: 306rpx;

            .avatar-box {
                width: 172rpx;
                height: 176rpx;

                .avatar-box-image {
                    width: 140rpx;
                    height: 131rpx;
                }

                .avatar-decoration {
                    width: 172rpx;
                    height: 176rpx;
                    top: -10rpx;
                    left: 0;
                }
            }

            .phone-box {
                width: 167rpx;
                height: 33rpx;
                background: rgba(0, 0, 0, 0.5);
                border-radius: 17rpx;
                font-family: Roboto;
                font-weight: 400;
                font-size: 21rpx;
                position: relative;
                top: -5rpx;
            }

            .bets-info {
                width: 168rpx;
                height: 81rpx;
                margin-top: 15rpx;
                font-family: Roboto;
                font-weight: 400;
                font-size: 20rpx;
                padding: 10rpx 4px;
            }
        }
    }

    .rank-list-content {
        padding: 40rpx 24rpx;

        .list-item-box {
            height: 100rpx;
            border-radius: 10rpx;
            margin-bottom: 6rpx;
            padding: 0 25rpx;

            &:last-child {
                margin-bottom: 0;
            }

            .rank-num {
                width: 64rpx;
            }

            .def-awatar {
                width: 71rpx;
                height: 71rpx;
                border-radius: 50%;
                border: 1px solid #E7CB96;
                margin-left: 30rpx;
            }

            .item-phone {
                margin-left: 25rpx;
                font-family: Roboto;
                font-weight: 500;
                font-size: 25rpx;
            }

            .total-bet {
                font-family: Roboto;
                font-weight: 500;
                font-size: 25rpx;
            }

            .col-item {
                margin-bottom: 10rpx;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }

    }

    .my-rank-data {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 10;
        width: 100%;
        background: linear-gradient(0deg, #4D0A0C, #792121);
        box-shadow: 0rpx -3rpx 5rpx 0rpx rgba(68, 8, 12, 0.32), 0rpx 2rpx 3rpx 0rpx rgba(196, 93, 79, 0.34);

        .my-rank-content {
            width: 100%;
            height: 149rpx;
            padding: 0 18rpx;

            .rank-col {
                font-size: 27rpx;
                font-family: Bahnschrift;
                font-weight: 400;
            }
        }
    }

    .leaderboard-top-three {
        width: 621rpx;
        height: 374rpx;
        margin: 0 auto;
        margin-top: 41rpx;
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: 100% 281rpx;

        .leaderboard-top-three-content {
            width: 100%;
            display: flex;
            justify-content: space-between;
            height: 268rpx;

            .leaderboard-top-three-content-item {
                width: 33.33%;
                height: 100%;
                display: flex;
                justify-content: flex-start;
                flex-direction: column;
                align-items: center;

                .item-content-icon {
                    width: 120rpx;
                    height: 120rpx;
                }

                .leaderboard-top-three-content-item-info {
                    width: 100%;
                    height: calc(100% - 120rpx);
                    display: flex;
                    justify-content: space-around;
                    flex-direction: column;
                    text-align: center;
                    // color: #ffffff;
                    font-size: 24rpx;
                }
            }
        }
    }

    .leaderboard-list {
        width: 690rpx;
        height: 697rpx;
        margin: 0 auto;
        margin-top: -106rpx;
        background-size: 100% 100%;
        box-sizing: border-box;
        padding: 32rpx 13rpx 0 35rpx;

        .leaderboard-list-body {
            width: 100%;
            height: calc(100% - 72rpx);
            margin-top: 10rpx;
            overflow-y: auto;
        }
    }

    .me-data {
        width: 690rpx;
        margin: 0 auto;
        margin-top: 13rpx;
    }

    .leaderboard-list-header {
        width: 100%;
        height: 62rpx;
        // background: #8d120e;
        border-radius: 20rpx;
        display: flex;
        text-align: center;
        line-height: 62rpx;
        justify-content: flex-start;
        font-size: 24rpx;

        .leaderboard-list-header-item1 {
            width: 20%;
            // color: #f8eb59;

            position: relative;
            box-sizing: border-box;
            padding-left: 69rpx;
        }

        .leaderboard-list-header-item2 {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 50%;
            color: #fff;
        }

        .after-content::before {
            content: "Me";
            width: 47rpx;
            height: 47rpx;
            display: block;
            background: url("https://storage.googleapis.com/baowang-static/h5-images/v2/red/promo/me.png");
            background-size: 100% 100%;
            // color: #610606;

            line-height: 47rpx;
            position: absolute;
            left: 16rpx;
            text-align: center;
        }

        .leaderboard-list-header-item3 {
            width: 30%;
            // color: #fff;
        }
    }

    .history {
        width: 95rpx;
        height: 55rpx;
        background-size: 100% 100%;
        line-height: 55rpx;
        font-size: 20rpx;
        // color: #fff;
        position: fixed;
        top: 264rpx;
        left: -2rpx;
        text-align: center;
    }
}

/**
 * 历史记录弹窗框样式
 */
.history-popup {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    box-sizing: border-box;
    padding: 90rpx 55rpx;
    background: rgba(0, 0, 0, 0.5);

    .history-popup-content {
        width: 100%;
        height: 100%;
        position: relative;
        // background: #922222;
        box-sizing: border-box;
        padding-top: 56rpx;
        padding-bottom: 30rpx;
        border-radius: 20rpx;

        .history-popup-close {
            width: 60rpx;
            height: 60rpx;
            position: absolute;
            right: -30rpx;
            top: -30rpx;
        }

        .history-popup-title {
            width: 100%;
            text-align: center;
            // color: #fff;
            font-size: 36rpx;
        }

        .history-popup-search {
            width: 100%;
            height: 56rpx;
            box-sizing: border-box;
            padding: 0 20rpx;
            margin-top: 33rpx;

            .history-popup-search-content {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: flex-start;
                // background: #650808;
                border-radius: 28rpx;

                .history-popup-search-content-item {
                    width: 33.33%;
                    line-height: 56rpx;
                    text-align: center;
                    font-size: 26rpx;
                    // color: #fff;
                    border-radius: 28rpx;
                }

                .history-popup-search-active {
                    // background: #f5851f;
                    border-radius: 28rpx;
                }
            }
        }

        .history-table {
            width: 100%;
            margin-top: 51rpx;
            height: calc(100% - 193rpx);
            box-sizing: border-box;
            padding: 0 30rpx;

            .history-table-theader {
                width: 100%;
                font-size: 24rpx;
                // color: #fff;
                display: flex;
                justify-content: flex-start;
                line-height: 19rpx;
                text-align: center;

                .history-table-col1 {
                    width: 16%;
                }

                .history-table-col2 {
                    width: 28%;
                }
            }

            .history-table-tbody {
                width: 100%;
                margin-top: 32rpx;
                height: calc(100% - 51rpx);
                overflow-y: auto;

                .history-table-tbody-item {
                    width: 100%;
                    height: 62rpx;
                    // background: #751111;
                    border-radius: 20rpx;
                    display: flex;
                    justify-content: flex-start;
                    text-align: center;
                    margin-bottom: 10rpx;
                    font-size: 20rpx;
                    // color: #fff;
                    line-height: 62rpx;

                    .history-table-col1 {
                        width: 16%;
                    }

                    .history-table-col2 {
                        width: 28%;
                    }
                }
            }

            .history-table-col-color {
                color: #f8eb59;
            }
        }
    }
}

/* 自定义滚动条轨道样式 */
::-webkit-scrollbar-track {
    border-radius: 6rpx;
    background-color: #6a1009;
}

/* 自定义滚动条的样式 */
::-webkit-scrollbar {
    width: 12rpx;
    height: 88rpx;
    background-color: #6a1009;
}

::-webkit-scrollbar-thumb {
    width: 12rpx;
    background-color: #fd7e7a;
    border-radius: 6rpx;
}
</style>
