<script setup lang="ts">


import {storeToRefs} from "pinia";
import {computed} from "vue";
import {useUserStore} from "@/store";

const {theme} = storeToRefs(useUserStore());
const lightTheme = computed(() => theme.value === 'light');

/*
名字
借阅证号
已借图书数量
欠费金额
*/
</script>

<template>
    <div class="search content" :class="{'light-mode':lightTheme,'dark-mode':!lightTheme}">
        <t-typography-title level="h2">个人信息</t-typography-title>
        <div class="info">
            <div class="true-info">
                <t-typography-title level="h5">姓名:</t-typography-title>
                <t-typography-title level="h5">AlexJR</t-typography-title>
                <t-typography-title level="h5">借阅证号:</t-typography-title>
                <t-typography-title level="h5">123456789</t-typography-title>
                <t-typography-title level="h5">已借图书数量:</t-typography-title>
                <t-typography-title level="h5">5</t-typography-title>
                <t-typography-title level="h5">欠费金额:</t-typography-title>
                <t-typography-title level="h5">20</t-typography-title>
            </div>
                    <t-button class="button">修改信息</t-button>
        </div>

    </div>
</template>

<style lang="less" scoped>
@import '@/index.less';

@basic-color: var(--basic-color);
.search {
    background-color: @basic-color;
}

.info {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

.true-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 50%;
}

.true-info > * {
    margin: 16px 13px;
}

.true-info :nth-child(odd) {
    text-align: right;
}

.button{
    margin-left: calc(25% - 43px);
}
</style>