<template>
    <view class="yeargift">
        <!-- 根据展示等级动态显示对应等级页面 -->
        <view v-if="currentLevelName === 'diamond'" class="diamond">
            <image class="diamondbg3" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.BG3}`" mode="aspectFit"></image>
            <image class="diamondbg2" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.BG2}`" mode="aspectFit"></image>
            <image class="diamondbg1" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.BG1}`" mode="aspectFit"></image>
            <view class="diamondone">
                <image class="diamondonebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.ONE.BG}`" mode="aspectFit">
                </image>
                <image class="diamondoneaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.ONE.AWARD}`"
                    mode="aspectFit">
                </image>
                <image class="diamondoneadd" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.ONE.ADD}`" mode="aspectFit">
                </image>
                <image class="diamondonedesc" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.ONE.DESC}`" mode="aspectFit">
                </image>
            </view>
            <view class="diamondthree">
                <image class="diamondthreebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.THREE.BG}`" mode="aspectFit">
                </image>
                <image class="diamondthreeaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.THREE.AWARD}`"
                    mode="aspectFit">
                </image>
                <view class="diamondthreebtn active" @click="handleButtonClick('diamond')">
                    <text>{{ buttonInfo.text }}</text>
                </view>
            </view>
        </view>

        <view v-if="currentLevelName === 'starshine'" class="starshine">
            <image class="starshinebg3" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.BG3}`" mode="aspectFit"></image>
            <image class="starshinebg2" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.BG2}`" mode="aspectFit"></image>
            <image class="starshinebg1" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.BG1}`" mode="aspectFit"></image>
            <view class="starshineone">
                <image class="starshineonebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.ONE.BG}`" mode="aspectFit">
                </image>
                <image class="starshineoneaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.ONE.AWARD}`"
                    mode="aspectFit">
                </image>
                <image class="starshineoneadd" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.ONE.ADD}`"
                    mode="aspectFit">
                </image>
                <image class="starshineonedesc" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.ONE.DESC}`"
                    mode="aspectFit">
                </image>
            </view>
            <view class="starshinethree">
                <image class="starshinethreebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.THREE.BG}`"
                    mode="aspectFit">
                </image>
                <image class="starshinethreeaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.THREE.AWARD}`"
                    mode="aspectFit"></image>
                <view class="starshinethreebtn starshine" @click="handleButtonClick('starshine')">
                    <text>{{ buttonInfo.text }}</text>
                </view>
            </view>
        </view>

        <view v-if="currentLevelName === 'starlight'" class="starlight">
            <image class="starlightbg3" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.BG3}`" mode="aspectFit"></image>
            <image class="starlightbg2" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.BG2}`" mode="aspectFit"></image>
            <image class="starlightbg1" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.BG1}`" mode="aspectFit"></image>
            <view class="starlightone">
                <image class="starlightonebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.ONE.BG}`" mode="aspectFit">
                </image>
                <image class="starlightoneaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.ONE.AWARD}`"
                    mode="aspectFit">
                </image>
                <image class="starlightoneadd" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.ONE.ADD}`"
                    mode="aspectFit">
                </image>
                <image class="starlightonedesc" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.ONE.DESC}`"
                    mode="aspectFit">
                </image>
            </view>
            <view class="starlightthree">
                <image class="starlightthreebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.THREE.BG}`"
                    mode="aspectFit">
                </image>
                <image class="starlightthreeaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.THREE.AWARD}`"
                    mode="aspectFit"></image>
                <view class="starlightthreebtn starlight" @click="handleButtonClick('starlight')">
                    <text>{{ buttonInfo.text }}</text>
                </view>
            </view>
        </view>

        <view v-if="currentLevelName === 'gold'" class="gold">
            <image class="goldbg3" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.BG3}`" mode="aspectFit"></image>
            <image class="goldbg2" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.BG2}`" mode="aspectFit"></image>
            <image class="goldbg1" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.BG1}`" mode="aspectFit"></image>
            <view class="goldone">
                <image class="goldonebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.ONE.BG}`" mode="aspectFit"></image>
                <image class="goldoneaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.ONE.AWARD}`" mode="aspectFit">
                </image>
                <image class="goldoneadd" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.ONE.ADD}`" mode="aspectFit"></image>
                <image class="goldonedesc" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.ONE.DESC}`" mode="aspectFit">
                </image>
            </view>
            <view class="goldthree">
                <image class="goldthreebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.THREE.BG}`" mode="aspectFit">
                </image>
                <image class="goldthreeaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.THREE.AWARD}`" mode="aspectFit">
                </image>
                <view class="goldthreebtn gold" @click="handleButtonClick('gold')">
                    <text>{{ buttonInfo.text }}</text>
                </view>
            </view>
            <image class="goldlocktip" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.LOCKTIP}`" mode="aspectFit"></image>
        </view>

        <view v-if="currentLevelName === 'platinum'" class="platinum">
            <image class="platinumbg3" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.BG3}`" mode="aspectFit"></image>
            <image class="platinumbg2" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.BG2}`" mode="aspectFit"></image>
            <image class="platinumbg1" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.BG1}`" mode="aspectFit"></image>
            <image class="platinumlocktip" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.LOCKTIP}`" mode="aspectFit">
            </image>
            <view class="platinumone">
                <image class="platinumonebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.ONE.BG}`" mode="aspectFit">
                </image>
                <image class="platinumoneaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.ONE.AWARD}`"
                    mode="aspectFit">
                </image>
                <image class="platinumoneadd" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.ONE.ADD}`" mode="aspectFit">
                </image>
                <image class="platinumonedesc" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.ONE.DESC}`"
                    mode="aspectFit">
                </image>
            </view>
            <view class="platinumthree">
                <image class="platinumthreeaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.THREE.AWARD}`"
                    mode="aspectFit">
                </image>
                <image class="platinumthreebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.THREE.BG}`"
                    mode="aspectFit">
                </image>
                <view class="platinumthreebtn platinum" @click="handleButtonClick('platinum')">
                    <text>{{ buttonInfo.text }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { getCurrentInstance, computed,onMounted } from 'vue'
import { YEAR_GIFT_IMAGES } from './yearGiftImages.js'
import md from '../../md.js'

// 获取全局属性
const { proxy } = getCurrentInstance()
const $baseUrl = proxy.$baseUrl

// 接收用户等级参数
const props = defineProps({
    currentLevel: {
        type: Number,
        required: true,
        validator: (value) => [0, 1, 2, 3, 4].includes(value),
    },
    userLevel: {
        type: Number,
        required: true,
        validator: (value) => [0, 1, 2, 3, 4].includes(value),
    },
})

// 等级映射常量
const LEVEL_MAP = {
    0: 'gold',
    1: 'platinum',
    2: 'diamond',
    3: 'starlight',
    4: 'starshine'
}

// 计算属性：当前展示等级
const currentLevelName = computed(() => LEVEL_MAP[props.currentLevel])

// 计算属性：用户等级名称
const userLevelName = computed(() => LEVEL_MAP[props.userLevel])

// 计算属性：按钮信息
const buttonInfo = computed(() => {
    const levelOrder = [0, 1, 2, 3, 4]; // gold, platinum, diamond, starlight, starshine
    const userLevelIndex = levelOrder.indexOf(props.userLevel * 1);
    const diamondIndex = levelOrder.indexOf(2); // Diamond level
    const platinumIndex = levelOrder.indexOf(1); // Platinum level

    if (userLevelIndex <= platinumIndex) {
        return {
            text: '去升级',
            action: 'upgrade'
        };
    } else if (userLevelIndex >= diamondIndex) {
        return {
            text: '去查看',
            action: 'view'
        };
    }
})
onMounted(() => {
    md.sensorComponentLogTake({
        xcxComponentExposure: "true",
        pageName: "积分服务页",
        componentName: "会员权益",
        componentContent: "周岁礼-"+buttonInfo.value.text
    });
})
// 按钮点击事件处理
const handleButtonClick = () => {
    md.sensorComponentLogTake({
        xcxComponentClick: "true",
        pageName: "积分服务页",
        componentName: "会员权益",
        componentContent: "周岁礼-"+buttonInfo.value.text
    });
    if (buttonInfo.value.action === 'upgrade') {
        // 跳转到升级页面
        uni.navigateTo({
            url: '/pages/webview/webview?url=https://mom.feihe.com/member/mine/pointStrategy'
        });
    } else if (buttonInfo.value.action === 'view') {
        // 跳转到查看页面
        uni.navigateTo({
            url: '/pages/webview/webview?url=https://member.feihe.com/memberH5/#/memberGrowthGift?activityCode=hyczl&sceneCode=WXG07'
        });
    }
}
</script>

<style lang="less" scoped>
.yeargift {
    width: 686rpx;
    height: 1158rpx;
    left: 0rpx;
    top: 0rpx;
    right: 0rpx;
    margin: auto;
    position: relative;

    // 默认文本样式
    .default-text {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 36rpx;
        color: rgba(102, 102, 102, 1);
    }

    .diamond {
        width: 686rpx;
        height: 1139rpx;
        // left: 32rpx;
        // top: 79rpx;
        position: absolute;

        .diamondbg3 {
            width: 686rpx;
            height: 1139rpx;
            left: 0rpx;
            top: 0rpx;
            position: absolute;
            opacity: 0.2;
        }

        .diamondbg2 {
            width: 640rpx;
            height: 479rpx;
            left: 23rpx;
            top: 50rpx;
            position: absolute;
            opacity: 0.2;
        }

        .diamondbg1 {
            width: 640rpx;
            height: 437rpx;
            left: 23rpx;
            top: 543rpx;
            position: absolute;
            opacity: 0.2;
        }

        .diamondone {
            width: 567rpx;
            height: 423rpx;
            left: 59rpx;
            top: 71rpx;
            position: absolute;

            .diamondonebg {
                width: 566rpx;
                height: 423rpx;
                left: 0rpx;
                top: 0rpx;
                position: absolute;
            }

            .diamondoneaward {
                width: 304rpx;
                height: 212rpx;
                left: 3rpx;
                top: 91rpx;
                position: absolute;
            }

            .diamondoneadd {
                width: 29rpx;
                height: 30rpx;
                left: 319rpx;
                top: 180rpx;
                position: absolute;
            }

            .diamondonedesc {
                width: 207rpx;
                height: 159rpx;
                left: 360rpx;
                top: 116rpx;
                position: absolute;
            }
        }

        .diamondthree {
            width: 543rpx;
            height: 521rpx;
            left: 59rpx;
            top: 572rpx;
            position: absolute;

            .diamondthreebg {
                width: 543rpx;
                height: 368rpx;
                left: 0rpx;
                top: 0rpx;
                position: absolute;
            }

            .diamondthreeaward {
                width: 225rpx;
                height: 238rpx;
                left: 169rpx;
                top: 72rpx;
                position: absolute;
            }

            .diamondthreebtn {
                width: 443rpx;
                height: 85rpx;
                left: 61rpx;
                top: 436rpx;
                position: absolute;

                transition: transform 0.2s ease;

                &:active {
                    transform: scale(0.95);
                }
            }


        }
    }

    .starshine {
        width: 686rpx;
        height: 1139rpx;
        // left: 32rpx;
        // top: 79rpx;
        position: absolute;

        .starshinebg3 {
            width: 686rpx;
            height: 1139rpx;
            left: 0rpx;
            top: 0rpx;
            position: absolute;
            opacity: 0.1;
        }

        .starshinebg2 {
            width: 640rpx;
            height: 479rpx;
            left: 23rpx;
            top: 50rpx;
            position: absolute;
            opacity: 0.1;
        }

        .starshinebg1 {
            width: 640rpx;
            height: 437rpx;
            left: 23rpx;
            top: 543rpx;
            position: absolute;
            opacity: 0.1;
        }

        .starshineone {
            width: 567rpx;
            height: 423rpx;
            left: 59rpx;
            top: 71rpx;
            position: absolute;

            .starshineonebg {
                width: 566rpx;
                height: 423rpx;
                left: 0rpx;
                top: 0rpx;
                position: absolute;
            }

            .starshineoneaward {
                width: 304rpx;
                height: 212rpx;
                left: 3rpx;
                top: 90rpx;
                position: absolute;
            }

            .starshineoneadd {
                width: 29rpx;
                height: 30rpx;
                left: 319rpx;
                top: 180rpx;
                position: absolute;
            }

            .starshineonedesc {
                width: 207rpx;
                height: 159rpx;
                left: 360rpx;
                top: 116rpx;
                position: absolute;
            }
        }

        .starshinethree {
            width: 543rpx;
            height: 521rpx;
            left: 59rpx;
            top: 572rpx;
            position: absolute;

            .starshinethreebg {
                width: 543rpx;
                height: 368rpx;
                left: 0rpx;
                top: 0rpx;
                position: absolute;
            }

            .starshinethreeaward {
                width: 225rpx;
                height: 238rpx;
                left: 169rpx;
                top: 72rpx;
                position: absolute;
            }

            .starshinethreebtn {
                width: 443rpx;
                height: 85rpx;
                left: 61rpx;
                top: 436rpx;
                position: absolute;

                transition: transform 0.2s ease;

                &:active {
                    transform: scale(0.95);
                }
            }


        }
    }

    .starlight {
        width: 686rpx;
        height: 1139rpx;
        // left: 32rpx;
        // top: 79rpx;
        position: absolute;

        .starlightbg3 {
            width: 686rpx;
            height: 1139rpx;
            left: 0rpx;
            top: 0rpx;
            position: absolute;
            opacity: 0.2;
        }

        .starlightbg2 {
            width: 640rpx;
            height: 479rpx;
            left: 23rpx;
            top: 50rpx;
            position: absolute;
            opacity: 0.2;
        }

        .starlightbg1 {
            width: 640rpx;
            height: 437rpx;
            left: 23rpx;
            top: 543rpx;
            position: absolute;
            opacity: 0.2;
        }

        .starlightone {
            width: 567rpx;
            height: 423rpx;
            left: 59rpx;
            top: 71rpx;
            position: absolute;

            .starlightonebg {
                width: 566rpx;
                height: 423rpx;
                left: 0rpx;
                top: 0rpx;
                position: absolute;
            }

            .starlightoneaward {
                width: 304rpx;
                height: 212rpx;
                left: 3rpx;
                top: 90rpx;
                position: absolute;
            }

            .starlightoneadd {
                width: 29rpx;
                height: 30rpx;
                left: 319rpx;
                top: 180rpx;
                position: absolute;
            }

            .starlightonedesc {
                width: 207rpx;
                height: 159rpx;
                left: 360rpx;
                top: 116rpx;
                position: absolute;
            }
        }

        .starlightthree {
            width: 543rpx;
            height: 521rpx;
            left: 59rpx;
            top: 572rpx;
            position: absolute;

            .starlightthreebg {
                width: 543rpx;
                height: 368rpx;
                left: 0rpx;
                top: 0rpx;
                position: absolute;
            }

            .starlightthreeaward {
                width: 225rpx;
                height: 238rpx;
                left: 169rpx;
                top: 72rpx;
                position: absolute;
            }

            .starlightthreebtn {
                width: 443rpx;
                height: 85rpx;
                left: 61rpx;
                top: 436rpx;
                position: absolute;

                transition: transform 0.2s ease;

                &:active {
                    transform: scale(0.95);
                }
            }


        }
    }

    .gold {
        width: 686rpx;
        height: 1139rpx;
        // left: 32rpx;
        // top: 79rpx;
        position: absolute;

        .goldbg3 {
            width: 686rpx;
            height: 1139rpx;
            left: 0rpx;
            top: 0rpx;
            position: absolute;
            opacity: 0.2;
        }

        .goldbg2 {
            width: 640rpx;
            height: 479rpx;
            left: 23rpx;
            top: 50rpx;
            position: absolute;
            opacity: 0.2;
        }

        .goldbg1 {
            width: 640rpx;
            height: 437rpx;
            left: 23rpx;
            top: 543rpx;
            position: absolute;
            opacity: 0.2;
        }

        .goldone {
            width: 567rpx;
            height: 423rpx;
            left: 59rpx;
            top: 71rpx;
            position: absolute;

            .goldonebg {
                width: 566rpx;
                height: 423rpx;
                left: 0rpx;
                top: 0rpx;
                position: absolute;
            }

            .goldoneaward {
                width: 304rpx;
                height: 212rpx;
                left: 3rpx;
                top: 90rpx;
                position: absolute;
            }

            .goldoneadd {
                width: 29rpx;
                height: 30rpx;
                left: 319rpx;
                top: 180rpx;
                position: absolute;
            }

            .goldonedesc {
                width: 207rpx;
                height: 159rpx;
                left: 360rpx;
                top: 116rpx;
                position: absolute;
            }
        }

        .goldthree {
            width: 543rpx;
            height: 521rpx;
            left: 59rpx;
            top: 572rpx;
            position: absolute;

            .goldthreebg {
                width: 543rpx;
                height: 368rpx;
                left: 0rpx;
                top: 0rpx;
                position: absolute;
            }

            .goldthreeaward {
                width: 225rpx;
                height: 238rpx;
                left: 169rpx;
                top: 72rpx;
                position: absolute;
            }

            .goldthreebtn {
                width: 443rpx;
                height: 85rpx;
                left: 61rpx;
                top: 436rpx;
                position: absolute;

                transition: transform 0.2s ease;

                &:active {
                    transform: scale(0.95);
                }
            }

        }

        .goldlocktip {
            width: 257rpx;
            height: 41rpx;
            left: 429rpx;
            top: 0rpx;
            position: absolute;
        }
    }

    .platinum {
        width: 686rpx;
        height: 1139rpx;
        // left: 32rpx;
        // top: 79rpx;
        position: absolute;

        .platinumbg3 {
            width: 686rpx;
            height: 1139rpx;
            left: 0rpx;
            top: 0rpx;
            position: absolute;
            opacity: 0.2;
        }

        .platinumbg2 {
            width: 640rpx;
            height: 479rpx;
            left: 23rpx;
            top: 49rpx;
            position: absolute;
            opacity: 0.2;
        }

        .platinumbg1 {
            width: 640rpx;
            height: 437rpx;
            left: 23rpx;
            top: 543rpx;
            position: absolute;
            opacity: 0.2;
        }

        .platinumlocktip {
            width: 257rpx;
            height: 41rpx;
            left: 429rpx;
            top: 0rpx;
            position: absolute;
        }

        .platinumone {
            width: 567rpx;
            height: 423rpx;
            left: 59rpx;
            top: 71rpx;
            position: absolute;

            .platinumonebg {
                width: 566rpx;
                height: 423rpx;
                left: 0rpx;
                top: 0rpx;
                position: absolute;
            }

            .platinumoneaward {
                width: 304rpx;
                height: 212rpx;
                left: 3rpx;
                top: 90rpx;
                position: absolute;
            }

            .platinumoneadd {
                width: 29rpx;
                height: 30rpx;
                left: 319rpx;
                top: 180rpx;
                position: absolute;
            }

            .platinumonedesc {
                width: 207rpx;
                height: 159rpx;
                left: 360rpx;
                top: 116rpx;
                position: absolute;
            }
        }

        .platinumthree {
            width: 543rpx;
            height: 521rpx;
            left: 59rpx;
            top: 572rpx;
            position: absolute;

            .platinumthreeaward {
                width: 225rpx;
                height: 238rpx;
                left: 169rpx;
                top: 72rpx;
                position: absolute;
            }

            .platinumthreebg {
                width: 543rpx;
                height: 368rpx;
                left: 0rpx;
                top: 0rpx;
                position: absolute;
            }

            .platinumthreebtn {
                width: 443rpx;
                height: 85rpx;
                left: 61rpx;
                top: 436rpx;
                position: absolute;

                transition: transform 0.2s ease;

                &:active {
                    transform: scale(0.95);
                }
            }


        }
    }
}

/* 按钮样式 */
.diamondthreebtn,
.starshinethreebtn,
.starlightthreebtn,
.goldthreebtn,
.platinumthreebtn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 42.5rpx;
    font-size: 26rpx;
    font-weight: bold;
    transition: transform 0.2s ease;

    &.active {
        background: linear-gradient(to right, #7253a5, #9879cc);
        /* 钻石 */
        color: #fff;
        box-shadow: 0 4rpx 12rpx rgba(114, 83, 165, 0.3);

        &:active {
            transform: scale(0.95);
            box-shadow: 0 2rpx 8rpx rgba(114, 83, 165, 0.4);
        }
    }

    &.starshine {
        background: linear-gradient(to right, #000000, #2c1600);
        /* 星耀 */
        color: #fff;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);

        &:active {
            transform: scale(0.95);
            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.4);
        }
    }

    &.starlight {
        background: linear-gradient(to right, #cda36b, #e0b97d);
        /* 星光 */
        color: #fff;
        box-shadow: 0 4rpx 12rpx rgba(205, 163, 107, 0.3);

        &:active {
            transform: scale(0.95);
            box-shadow: 0 2rpx 8rpx rgba(205, 163, 107, 0.4);
        }
    }

    &.gold {
        background: linear-gradient(to right, #906632, #ab7a44);
        /* 黄金 */
        color: #fff;
        box-shadow: 0 4rpx 12rpx rgba(144, 102, 50, 0.3);

        &:active {
            transform: scale(0.95);
            box-shadow: 0 2rpx 8rpx rgba(144, 102, 50, 0.4);
        }
    }

    &.platinum {
        background: linear-gradient(to right, #5189c0, #6fa2d5);
        /* 白金 */
        color: #fff;
        box-shadow: 0 4rpx 12rpx rgba(81, 137, 192, 0.3);

        &:active {
            transform: scale(0.95);
            box-shadow: 0 2rpx 8rpx rgba(81, 137, 192, 0.4);
        }
    }
}
</style>
