修改个人信息页面
This commit is contained in:
龙运模
parent
26e24ecd1c
commit
f71caee898
@ -4,3 +4,4 @@
|
|||||||
@import 'media.scss';
|
@import 'media.scss';
|
||||||
@import 'dark.scss';
|
@import 'dark.scss';
|
||||||
@import 'home.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>
|
<template>
|
||||||
<el-main>
|
<el-container class="mainBox mainNoBack userBox">
|
||||||
<el-container class="page-user">
|
<el-aside class="userAside" style="width: 226px;">
|
||||||
<el-aside style="width: 240px;">
|
<el-container>
|
||||||
<el-container>
|
<el-header style="height: auto;display: block;">
|
||||||
<el-header style="height: auto;display: block;">
|
<div class="user-info-top">
|
||||||
<div class="user-info-top">
|
<el-avatar :size="70" src="img/avatar.jpg"></el-avatar>
|
||||||
<el-avatar :size="70" src="img/avatar.jpg"></el-avatar>
|
<div class="userView">
|
||||||
<h2>{{ user.userName }}</h2>
|
<h2 class="name">{{ user.userName }}</h2>
|
||||||
<p><el-tag effect="dark" round size="large" disable-transitions>{{ user.role }}</el-tag></p>
|
<p><el-tag effect="dark" round size="large" disable-transitions>{{ user.role }}</el-tag></p>
|
||||||
</div>
|
</div>
|
||||||
</el-header>
|
</div>
|
||||||
<el-main class="nopadding">
|
</el-header>
|
||||||
<el-menu class="menu" :default-active="page">
|
<el-main class="nopadding">
|
||||||
<el-menu-item-group v-for="group in menu" :key="group.groupName" :title="group.groupName">
|
<el-menu class="menu mainMenu" :default-active="page">
|
||||||
<el-menu-item v-for="item in group.list" :key="item.component" :index="item.component" @click="openPage">
|
<el-menu-item-group v-for="group in menu" :key="group.groupName" :title="group.groupName">
|
||||||
<el-icon v-if="item.icon"><component :is="item.icon"/></el-icon>
|
<el-menu-item v-for="item in group.list" :key="item.component" :index="item.component" @click="openPage">
|
||||||
<template #title>
|
<el-icon v-if="item.icon"><component :is="item.icon"/></el-icon>
|
||||||
<span>{{item.title}}</span>
|
<template #title>
|
||||||
</template>
|
<span>{{item.title}}</span>
|
||||||
</el-menu-item>
|
</template>
|
||||||
</el-menu-item-group>
|
</el-menu-item>
|
||||||
</el-menu>
|
</el-menu-item-group>
|
||||||
</el-main>
|
</el-menu>
|
||||||
</el-container>
|
</el-main>
|
||||||
</el-aside>
|
</el-container>
|
||||||
<el-main>
|
</el-aside>
|
||||||
<Suspense>
|
<el-main class="userMain userMainPadding_0">
|
||||||
<template #default>
|
<Suspense>
|
||||||
<component :is="page"/>
|
<template #default>
|
||||||
</template>
|
<component :is="page"/>
|
||||||
<template #fallback>
|
</template>
|
||||||
<el-skeleton :rows="3" />
|
<template #fallback>
|
||||||
</template>
|
<el-skeleton :rows="3" />
|
||||||
</Suspense>
|
</template>
|
||||||
</el-main>
|
</Suspense>
|
||||||
</el-container>
|
</el-main>
|
||||||
</el-main>
|
</el-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -134,3 +134,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user