<template>
    <view class="vip-level relative flex col-center flex-end">
        <text class="vip-level-text">{{ userStore.vipInfo?.vipLevel }}</text>
        <!-- userStore.vipInfo.currentVipConfig.level -->
        <theme-image :src="userStore.vipInfo?.currentVipConfig?.picUrl" class="vip-icon-level pos-absolute" mode="aspectFit"></theme-image>
    </view>
</template>
<script setup>
import { useUserStore } from '@/store/useUserStore'
const userStore = useUserStore()

</script>
<style lang="scss" scoped>
.vip-level {
    min-width: 77rpx;
    height: 24rpx;
    background: linear-gradient(90deg, #A01E06 0%, #CA580F 58%, #BF5008 100%), linear-gradient(90deg, #73050A 0%, #EC290F 100%);
    border-radius: 38rpx;
    border: 2rpx solid #C28A37;
    padding: 0 13rpx;

    .vip-level-text {
        text-align: right;
        color: #FFEC8A;
        font-size: 10px;
        line-height: 10px;
        font-weight: bold;
        background-image: -webkit-linear-gradient(180deg, #FFEC8A, #E89537);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .vip-icon-level {
        width: 32rpx;
        height: 32rpx;
        left: -16rpx;
        top: 50%;
        transform: translateY(-50%);
    }
}
</style>