修改个人信息页面
This commit is contained in:
龙运模
parent
26e24ecd1c
commit
f71caee898
@ -4,3 +4,4 @@
|
||||
@import 'media.scss';
|
||||
@import 'dark.scss';
|
||||
@import 'home.scss';
|
||||
@import 'user.scss';
|
||||
|
||||
110
src/style/user.scss
Normal file
110
src/style/user.scss
Normal file
@ -0,0 +1,110 @@
|
||||
.userBox{
|
||||
.userAside{
|
||||
border-right: 0;
|
||||
.el-header{
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 0;
|
||||
background: var(--el-bg-color-overlay);
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
.user-info-top{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.userView{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding: 0 10px;
|
||||
.name{
|
||||
width: 100%;
|
||||
margin-bottom: 14px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-main{
|
||||
background: var(--el-bg-color-overlay);
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
.userMain{
|
||||
margin: 0 0 0 10px;
|
||||
box-sizing: border-box;
|
||||
.el-card{
|
||||
border:0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.el-card__header{
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
padding-bottom: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.el-card__body{
|
||||
flex: 1;
|
||||
padding: 20px 10px 0 10px;
|
||||
overflow: hidden;
|
||||
.nopadding{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.userMainPading_0{
|
||||
.el-card{
|
||||
.el-card__body{
|
||||
padding: 0 10px 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.passwordView{
|
||||
.title{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
.name{
|
||||
flex-basis: 120px;
|
||||
}
|
||||
.strength{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.text{
|
||||
margin: 6px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 2px solid var(--el-color-warning);
|
||||
background: var(--el-bg-color-overlay);
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mainMenu{
|
||||
.el-menu-item{
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
span{
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,41 +1,41 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-container class="page-user">
|
||||
<el-aside style="width: 240px;">
|
||||
<el-container>
|
||||
<el-header style="height: auto;display: block;">
|
||||
<div class="user-info-top">
|
||||
<el-avatar :size="70" src="img/avatar.jpg"></el-avatar>
|
||||
<h2>{{ user.userName }}</h2>
|
||||
<el-container class="mainBox mainNoBack userBox">
|
||||
<el-aside class="userAside" style="width: 226px;">
|
||||
<el-container>
|
||||
<el-header style="height: auto;display: block;">
|
||||
<div class="user-info-top">
|
||||
<el-avatar :size="70" src="img/avatar.jpg"></el-avatar>
|
||||
<div class="userView">
|
||||
<h2 class="name">{{ user.userName }}</h2>
|
||||
<p><el-tag effect="dark" round size="large" disable-transitions>{{ user.role }}</el-tag></p>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<el-menu class="menu" :default-active="page">
|
||||
<el-menu-item-group v-for="group in menu" :key="group.groupName" :title="group.groupName">
|
||||
<el-menu-item v-for="item in group.list" :key="item.component" :index="item.component" @click="openPage">
|
||||
<el-icon v-if="item.icon"><component :is="item.icon"/></el-icon>
|
||||
<template #title>
|
||||
<span>{{item.title}}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-menu>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
<el-main>
|
||||
<Suspense>
|
||||
<template #default>
|
||||
<component :is="page"/>
|
||||
</template>
|
||||
<template #fallback>
|
||||
<el-skeleton :rows="3" />
|
||||
</template>
|
||||
</Suspense>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-main>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<el-menu class="menu mainMenu" :default-active="page">
|
||||
<el-menu-item-group v-for="group in menu" :key="group.groupName" :title="group.groupName">
|
||||
<el-menu-item v-for="item in group.list" :key="item.component" :index="item.component" @click="openPage">
|
||||
<el-icon v-if="item.icon"><component :is="item.icon"/></el-icon>
|
||||
<template #title>
|
||||
<span>{{item.title}}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-menu>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
<el-main class="userMain userMainPadding_0">
|
||||
<Suspense>
|
||||
<template #default>
|
||||
<component :is="page"/>
|
||||
</template>
|
||||
<template #fallback>
|
||||
<el-skeleton :rows="3" />
|
||||
</template>
|
||||
</Suspense>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -134,3 +134,6 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user