用户头像旁加上用户名

This commit is contained in:
jmal 2020-05-23 18:32:04 +08:00
parent cc37dc9e4d
commit 5679699985
3 changed files with 51 additions and 25 deletions

View File

@ -21,7 +21,7 @@
<div v-if="item.music.name !== null">
<el-image v-if="grid" :style="{'width':details?'110px':'80px','height':details?'110px':'80px'}" fit="contain" :src="item.fileId ? (audioCoverUrl+item.fileId) : (audioCoverUrl+item.id)">
<div slot="error" class="image-slot">
<svg-icon icon-class="audio"/>
<svg-icon class="avatar-default-image" icon-class="audio"/>
</div>
</el-image>
<el-avatar v-if="!grid" shape="square" :src="item.fileId ? (audioCoverUrl+item.fileId) : (audioCoverUrl+item.id)">
@ -31,7 +31,7 @@
</el-avatar>
</div>
</div>
<svg-icon v-else class="avatar-default-image" icon-class="audio"/>
<svg-icon v-else icon-class="audio"/>
</div>
<!--<svg-icon v-else-if="item.contentType.indexOf('text') > -1" icon-class="file-txt"/>-->
<div v-else-if="item.contentType.indexOf('image') > -1" v-on:mousedown="noDrag($event)">
@ -92,6 +92,9 @@
computed: {
findIconClass(){
let suffix = this.item.suffix;
if(!suffix && this.item.fileName){
suffix = this.item.fileName.substring(this.item.fileName.lastIndexOf('.') + 1);
}
if(iconClass.has(suffix)){
return iconClass.get(suffix)
}

View File

@ -4,33 +4,38 @@
<breadcrumb class="breadcrumb-container" />
<div class="right-menu">
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
<!--<img :src="avatar" class="user-avatar">-->
<el-avatar :src="imageUrl+avatar" icon="el-icon-user-solid"></el-avatar>
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown" class="user-dropdown">
<router-link to="/setting">
<el-dropdown-item>
<i class="el-icon-setting" />设置
</el-dropdown-item>
</router-link>
<!--<router-link to="/">-->
<div class="right-content">
<div class="right-username">{{username}}</div>
<div class="right-menu">
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
<!--<img :src="avatar" class="user-avatar">-->
<el-avatar :src="imageUrl+avatar" icon="el-icon-user-solid"></el-avatar>
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown" class="user-dropdown">
<router-link to="/setting">
<el-dropdown-item>
<i class="el-icon-setting" />设置
</el-dropdown-item>
</router-link>
<!--<router-link to="/">-->
<!--<el-dropdown-item>-->
<!--首页-->
<!--首页-->
<!--</el-dropdown-item>-->
<!--</router-link>-->
<!--<a target="_blank" href="https://github.com/jamebal/jmal-cloud-view/">-->
<!--</router-link>-->
<!--<a target="_blank" href="https://github.com/jamebal/jmal-cloud-view/">-->
<!--<el-dropdown-item>Github</el-dropdown-item>-->
<!--</a>-->
<el-dropdown-item divided @click.native="logout">
<span style="display:block;">退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!--</a>-->
<el-dropdown-item divided @click.native="logout">
<span style="display:block;">退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</div>
</template>
@ -43,6 +48,7 @@ export default {
data() {
return {
imageUrl: process.env.VUE_APP_BASE_API + '/view/thumbnail?jmal-token=' + this.$store.state.user.token + '&id=',
username: this.$store.state.user.name,
}
},
components: {
@ -92,6 +98,21 @@ export default {
float: left;
}
.right-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
.right-username {
line-height: 50px;
margin-right: 10px;
}
}
.right-menu {
float: right;
height: 100%;

View File

@ -147,6 +147,8 @@ export const constantRoutes = [
path: '',
name: 'setting',
component: () => import('@/views/setting/index'),
meta: { title: '设置' },
hidden: true
}
]
},