Browse Source

系统用户姓名头像显示在右上角

master
taylor 8 years ago
parent
commit
9e14499db8
  1. 3
      src/App.vue
  2. BIN
      src/assets/user.png
  3. 2
      src/main.js
  4. 3
      src/mockdata/user.js
  5. 39
      src/pages/Home.vue

3
src/App.vue

@ -71,7 +71,8 @@
background-size: cover;*/ background-size: cover;*/
background: #1F2D3D; background: #1F2D3D;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-weight: 400;
/*font-weight: 400;*/
font-size:14px;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }

BIN
src/assets/user.png

Binary file not shown.

After

Width: 128  |  Height: 128  |  Size: 3.1 KiB

2
src/main.js

@ -28,6 +28,8 @@ Vue.use(ElementUI)
Vue.use(VueRouter) Vue.use(VueRouter)
Vue.use(Vuex) Vue.use(Vuex)
NProgress.configure({ showSpinner: false });
const routes = [ const routes = [
{ {
path: '/login', path: '/login',

3
src/mockdata/user.js

@ -4,7 +4,8 @@ const LoginUsers = [
id: 1, id: 1,
username: 'admin', username: 'admin',
password: '123456', password: '123456',
avatar: ''
avatar: '',
name: '张某某'
} }
]; ];

39
src/pages/Home.vue

@ -2,19 +2,29 @@
<el-row class="panel"> <el-row class="panel">
<el-col :span="24" class="panel-top"> <el-col :span="24" class="panel-top">
<el-col :span="20" style="font-size:26px;"> <el-col :span="20" style="font-size:26px;">
<img src="../assets/logo4.png" class="logo"> <span>AD<i style="color:#20a0ff">MIN</i></span>
<img src="../assets/logo4.png" class="logo"> <span>AD<i style="color:#20a0ff">MIN</i>
</span>
</el-col> </el-col>
<el-col :span="4">
<el-tooltip class="item tip-logout" effect="dark" content="退出" placement="bottom" style="padding:0px;">
<!--<i class="logout" v-on:click="logout"></i>-->
<el-col :span="4" class="rightbar">
<el-dropdown trigger="click">
<span class="el-dropdown-link" style="color:#c0ccda;cursor: pointer;"><img src="../assets/user.png" class="head"> 张某某
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>我的消息</el-dropdown-item>
<el-dropdown-item>设置</el-dropdown-item>
<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!--<el-tooltip class="item tip-logout" effect="dark" content="退出" placement="bottom" style="padding:0px;">
<i class="fa fa-sign-out" aria-hidden="true" v-on:click="logout"></i> <i class="fa fa-sign-out" aria-hidden="true" v-on:click="logout"></i>
</el-tooltip>
</el-tooltip>-->
</el-col> </el-col>
</el-col> </el-col>
<el-col :span="24" class="panel-center"> <el-col :span="24" class="panel-center">
<!--<el-col :span="4">--> <!--<el-col :span="4">-->
<aside style="width:230px;"> <aside style="width:230px;">
<h5 class="admin"><i class="fa fa-user" aria-hidden="true" style="margin-right:5px;"></i>欢迎系统管理员测试</h5>
<!--<h5 class="admin">
<i class="fa fa-user" aria-hidden="true" style="margin-right:5px;"></i>欢迎系统管理员测试</h5>-->
<!--<el-menu style="border-top: 1px solid #475669;" default-active="/table" class="el-menu-vertical-demo" @open="handleopen" <!--<el-menu style="border-top: 1px solid #475669;" default-active="/table" class="el-menu-vertical-demo" @open="handleopen"
@close="handleclose" @select="handleselect" theme="dark" unique-opened router> @close="handleclose" @select="handleselect" theme="dark" unique-opened router>
<el-submenu index="1"> <el-submenu index="1">
@ -30,8 +40,8 @@
</el-submenu> </el-submenu>
<el-menu-item index="/page6"><i class="fa fa-line-chart"></i>导航三</el-menu-item> <el-menu-item index="/page6"><i class="fa fa-line-chart"></i>导航三</el-menu-item>
</el-menu>--> </el-menu>-->
<el-menu style="border-top: 1px solid #475669;" :default-active="currentPath" class="el-menu-vertical-demo" @open="handleopen"
@close="handleclose" @select="handleselect" theme="dark" unique-opened router>
<el-menu :default-active="currentPath" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
theme="dark" unique-opened router>
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden"> <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
<el-submenu :index="index+''" v-if="!item.leaf"> <el-submenu :index="index+''" v-if="!item.leaf">
<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template> <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
@ -145,6 +155,19 @@
color: #c0ccda; color: #c0ccda;
} }
.panel-top .rightbar{
text-align: right;
padding-right: 20px;
}
.panel-top .rightbar .head{
width: 40px;
height: 40px;
border-radius: 20px;
margin: 10px 15px;
float: right;
}
.panel-center { .panel-center {
background: #324057; background: #324057;
position: absolute; position: absolute;

Loading…
Cancel
Save