108 lines
2.5 KiB
Vue
108 lines
2.5 KiB
Vue
|
<script setup>
|
|||
|
|
import {ref} from 'vue';
|
|||
|
|
import 'element-plus/dist/index.css';
|
|||
|
|
|
|||
|
|
const nickname = ref('admin');
|
|||
|
|
const phoneNumber = ref('15888888888');
|
|||
|
|
const email = ref('ry@163.com');
|
|||
|
|
const department = ref('研发部门 / 董事长');
|
|||
|
|
const role = ref('超级管理员');
|
|||
|
|
const createdAt = ref('2021-09-21 17:00:35');
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="profile-container">
|
|||
|
|
<div class="profile-box">
|
|||
|
|
<h2>个人信息</h2>
|
|||
|
|
<div class="profile-image">
|
|||
|
|
<img src="@assets/avatar.jpg" alt="Profile Image"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="profile-info">
|
|||
|
|
<div class="divider"></div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">用户昵称：</span>
|
|||
|
|
<span class="info-value">{{ nickname }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="divider"></div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">手机号码：</span>
|
|||
|
|
<span class="info-value">{{ phoneNumber }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="divider"></div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">用户邮箱：</span>
|
|||
|
|
<span class="info-value">{{ email }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="divider"></div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">所属部门：</span>
|
|||
|
|
<span class="info-value">{{ department }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="divider"></div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">所属角色：</span>
|
|||
|
|
<span class="info-value">{{ role }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="divider"></div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">创建日期：</span>
|
|||
|
|
<span class="info-value">{{ createdAt }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="divider"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.profile-container {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 100vh;
|
|||
|
|
background: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.profile-box {
|
|||
|
|
background: white;
|
|||
|
|
padding: 2rem;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|||
|
|
width: 30%;
|
|||
|
|
max-width: 300px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.profile-image img {
|
|||
|
|
width: 100px;
|
|||
|
|
height: 100px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.profile-info {
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-label {
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-value {
|
|||
|
|
color: #555;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.divider {
|
|||
|
|
height: 1px;
|
|||
|
|
background: #e0e0e0;
|
|||
|
|
margin: 0.5rem 0;
|
|||
|
|
}
|
|||
|
|
</style>
|