<script setup>
import ICON1 from '../static/icons/path1.png';
import ICON2 from '../static/icons/path2.png';
import ICON3 from '../static/icons/path3.png';
import ICON4 from '../static/icons/path4.png';
import {useUserStore} from "../pinia/UserStore/index.js";

const UserStore = useUserStore();
</script>

<template>
    <view class="!size-[132rpx] !grid grid-cols-2 grid-rows-2 relative">
        <image class="!size-full" :src="ICON1"></image>
        <image class="!size-full" :src="ICON2"></image>
        <image class="!size-full" :src="ICON3"></image>
        <image class="!size-full" :src="ICON4"></image>

        <view class="!absolute left-1/2 top-1/2 -translate-1/2 !flex flex-col justify-center items-center">
            <view class="score">
                {{ UserStore?.userInfo?.score }}
            </view>
            <view class="score-info">
                信用分
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
.score {
    color: rgb(22, 93, 255);
    font-size: 20px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0;
    text-align: left;
}

.score-info {
    color: rgb(29, 33, 41);
    font-size: 11px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0;
    text-align: left;
}
</style>
