[重大更新] 整体主题样式重写 改为卡片式布局 样式更企业化
This commit is contained in:
疯狂的狮子Li
@@ -1,54 +1,76 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<el-row :gutter="20">
|
||||
<div class="p-2 page-shell profile-page">
|
||||
<el-row :gutter="20" class="profile-grid">
|
||||
<el-col :span="6" :xs="24">
|
||||
<el-card class="box-card">
|
||||
<el-card shadow="hover" class="side-panel profile-summary-card">
|
||||
<template #header>
|
||||
<div class="clearfix">
|
||||
<span>个人信息</span>
|
||||
<div class="panel-heading">
|
||||
<div><h3>个人信息</h3></div>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<div class="text-center">
|
||||
<div class="profile-summary">
|
||||
<div class="text-center profile-avatar">
|
||||
<userAvatar />
|
||||
</div>
|
||||
<ul class="list-group list-group-striped">
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="user" />用户名称
|
||||
<div class="pull-right">{{ state.user.userName }}</div>
|
||||
<div class="profile-item-label">
|
||||
<svg-icon icon-class="user" />
|
||||
<span>用户名称</span>
|
||||
</div>
|
||||
<span class="profile-item-value">{{ state.user.userName || '-' }}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="phone" />手机号码
|
||||
<div class="pull-right">{{ state.user.phonenumber }}</div>
|
||||
<div class="profile-item-label">
|
||||
<svg-icon icon-class="phone" />
|
||||
<span>手机号码</span>
|
||||
</div>
|
||||
<span class="profile-item-value">{{ state.user.phonenumber || '-' }}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="email" />用户邮箱
|
||||
<div class="pull-right">{{ state.user.email }}</div>
|
||||
<div class="profile-item-label">
|
||||
<svg-icon icon-class="email" />
|
||||
<span>用户邮箱</span>
|
||||
</div>
|
||||
<span class="profile-item-value">{{ state.user.email || '-' }}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="tree" />所属部门
|
||||
<div v-if="state.user.deptName" class="pull-right">{{ state.user.deptName }} / {{ state.postGroup }}</div>
|
||||
<div class="profile-item-label">
|
||||
<svg-icon icon-class="tree" />
|
||||
<span>所属部门</span>
|
||||
</div>
|
||||
<span v-if="state.user.deptName" class="profile-item-value">{{ state.user.deptName }} / {{ state.postGroup }}</span>
|
||||
<span v-else class="profile-item-value">-</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="peoples" />所属角色
|
||||
<div class="pull-right">{{ state.roleGroup }}</div>
|
||||
<div class="profile-item-label">
|
||||
<svg-icon icon-class="peoples" />
|
||||
<span>所属角色</span>
|
||||
</div>
|
||||
<span class="profile-item-value">{{ state.roleGroup || '-' }}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="date" />创建日期
|
||||
<div class="pull-right">{{ state.user.createTime }}</div>
|
||||
<div class="profile-item-label">
|
||||
<svg-icon icon-class="date" />
|
||||
<span>创建日期</span>
|
||||
</div>
|
||||
<span class="profile-item-value">{{ state.user.createTime || '-' }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="18" :xs="24">
|
||||
<el-card>
|
||||
<el-card shadow="hover" class="table-panel profile-main-card">
|
||||
<template #header>
|
||||
<div class="clearfix">
|
||||
<span>基本资料</span>
|
||||
<div class="toolbar-shell">
|
||||
<div class="table-heading">
|
||||
<h3>个人设置</h3>
|
||||
<p>维护个人资料、密码、第三方应用和在线设备。</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tabs v-model="activeTab" class="profile-tabs">
|
||||
<el-tab-pane label="基本资料" name="userinfo">
|
||||
<userInfo :user="userForm" />
|
||||
</el-tab-pane>
|
||||
@@ -120,3 +142,88 @@ onMounted(() => {
|
||||
getOnlines();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.profile-grid {
|
||||
row-gap: 12px;
|
||||
}
|
||||
|
||||
.profile-summary-card,
|
||||
.profile-main-card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.profile-summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.profile-item-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.profile-item-value {
|
||||
max-width: 58%;
|
||||
text-align: right;
|
||||
color: var(--el-text-color-secondary);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.profile-summary :deep(.list-group-item) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.profile-tabs :deep(.el-tabs__header) {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.profile-tabs :deep(.el-tabs__nav-wrap::after),
|
||||
.profile-tabs :deep(.el-tabs__active-bar) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.profile-tabs :deep(.el-tabs__nav) {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.profile-tabs :deep(.el-tabs__item) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 36px;
|
||||
min-width: 88px;
|
||||
padding: 0 16px;
|
||||
border-radius: 10px;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
|
||||
.profile-tabs :deep(.el-tabs__item:nth-child(2)),
|
||||
.profile-tabs :deep(.el-tabs__item.is-top:first-child),
|
||||
.profile-tabs :deep(.el-tabs__item.is-top:last-child) {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.profile-tabs :deep(.el-tabs__item.is-active) {
|
||||
background: rgba(53, 109, 255, 0.1);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.profile-item-value {
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user