You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
2.1 KiB
95 lines
2.1 KiB
<template>
|
|
<el-row class="page">
|
|
<el-row class="block-view">
|
|
<el-row class="top">
|
|
<el-col>
|
|
<el-text class="mx-1">个人信息</el-text>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-image class="user-img" src="/user.png" title="点击设置头像"></el-image>
|
|
</el-row>
|
|
|
|
<el-row class="express-view">
|
|
<el-row class="express-no-view">
|
|
<el-text class="label">姓名:</el-text>
|
|
<el-input class="info" placeholder="adminInfo.name"></el-input>
|
|
</el-row>
|
|
<el-row class="express-no-view">
|
|
<el-text class="label">账号:</el-text>
|
|
<el-input class="info" placeholder="adminInfo.username"></el-input>
|
|
</el-row>
|
|
<el-row class="express-no-view">
|
|
<el-text class="label">邮箱:</el-text>
|
|
<el-input class="info" placeholder="adminInfo.email"></el-input>
|
|
</el-row>
|
|
<el-row class="express-no-view">
|
|
<el-text class="label">签名:</el-text>
|
|
<el-input class="info" placeholder="adminInfo.signature"></el-input>
|
|
</el-row>
|
|
</el-row>
|
|
</el-row>
|
|
</el-row>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const adminInfo = ref({
|
|
name: 'yyy',
|
|
username: '123',
|
|
email: 'admin@example.com',
|
|
signature: '致力于教育事业'
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
background-color: white;
|
|
line-height: 20px;
|
|
}
|
|
.block-view {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.top {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
padding: 20px;
|
|
color: gray;
|
|
}
|
|
.express-view {
|
|
display: flex;
|
|
flex-direction: column; /* 垂直展示 */
|
|
width: 100%;
|
|
}
|
|
.express-no-view {
|
|
display: flex;
|
|
flex-direction: row; /* 横向展示 */
|
|
margin-left: 150px;
|
|
margin-top: 20px;
|
|
margin-bottom: 10px;
|
|
font-weight: 200;
|
|
}
|
|
.label {
|
|
font-weight: bold; /* 更改标签字体为粗体 */
|
|
margin-right: 10px; /* 右边距，间隔标签与内容 */
|
|
}
|
|
.info {
|
|
font-size: large;
|
|
width: 800px; /* 改变信息字体大小 */
|
|
}
|
|
|
|
.user-img{
|
|
height: 50px;
|
|
width: 50px;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|