73 lines
1.8 KiB
Vue
73 lines
1.8 KiB
Vue
<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> |