Browse Source

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

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

5
src/App.vue

@ -1,7 +1,7 @@
<template> <template>
<div id="app"> <div id="app">
<!--<transition name="bounce">--> <!--<transition name="bounce">-->
<router-view></router-view>
<router-view></router-view>
<!--</transition>--> <!--</transition>-->
</div> </div>
</template> </template>
@ -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: '张某某'
} }
]; ];

191
src/pages/Home.vue

@ -2,20 +2,30 @@
<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>
</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>-->
<i class="fa fa-sign-out" aria-hidden="true" v-on:click="logout"></i>
</el-tooltip>
</el-col>
</el-col>
<el-col :span="24" class="panel-center">
<!--<el-col :span="4">-->
<aside style="width:230px;">
<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"
<img src="../assets/logo4.png" class="logo"> <span>AD<i style="color:#20a0ff">MIN</i>
</span>
</el-col>
<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>
</el-tooltip>-->
</el-col>
</el-col>
<el-col :span="24" class="panel-center">
<!--<el-col :span="4">-->
<aside style="width:230px;">
<!--<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"
@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">
<template slot="title"><i class="el-icon-message"></i>导航一</template> <template slot="title"><i class="el-icon-message"></i>导航一</template>
@ -30,82 +40,82 @@
</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>
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
<el-submenu :index="index+''" v-if="!item.leaf">
<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
<el-menu-item v-for="child in item.children" :index="child.path">{{child.name}}</el-menu-item>
</el-submenu>
<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
</template>
</el-menu>
</aside>
<!--</el-col>-->
<!--<el-col :span="20" class="panel-c-c">-->
<section class="panel-c-c">
<div class="grid-content bg-purple-light">
<el-col :span="24" style="margin-bottom:15px;">
<strong style="width:200px;float:left;color: #475669;">{{currentPathName}}</strong>
<el-breadcrumb separator="/" style="float:right;">
<el-breadcrumb-item :to="{ path: '/table' }">首页</el-breadcrumb-item>
<el-breadcrumb-item v-if="currentPathNameParent!=''">{{currentPathNameParent}}</el-breadcrumb-item>
<el-breadcrumb-item v-if="currentPathName!=''">{{currentPathName}}</el-breadcrumb-item>
</el-breadcrumb>
</el-col>
<el-col :span="24" style="background-color:#fff;box-sizing: border-box;">
<!--<transition name="fade">-->
<router-view></router-view>
<!--</transition>-->
</el-col>
</div>
</section>
<!--</el-col>-->
</el-col>
</el-row>
<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">
<el-submenu :index="index+''" v-if="!item.leaf">
<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
<el-menu-item v-for="child in item.children" :index="child.path">{{child.name}}</el-menu-item>
</el-submenu>
<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
</template>
</el-menu>
</aside>
<!--</el-col>-->
<!--<el-col :span="20" class="panel-c-c">-->
<section class="panel-c-c">
<div class="grid-content bg-purple-light">
<el-col :span="24" style="margin-bottom:15px;">
<strong style="width:200px;float:left;color: #475669;">{{currentPathName}}</strong>
<el-breadcrumb separator="/" style="float:right;">
<el-breadcrumb-item :to="{ path: '/table' }">首页</el-breadcrumb-item>
<el-breadcrumb-item v-if="currentPathNameParent!=''">{{currentPathNameParent}}</el-breadcrumb-item>
<el-breadcrumb-item v-if="currentPathName!=''">{{currentPathName}}</el-breadcrumb-item>
</el-breadcrumb>
</el-col>
<el-col :span="24" style="background-color:#fff;box-sizing: border-box;">
<!--<transition name="fade">-->
<router-view></router-view>
<!--</transition>-->
</el-col>
</div>
</section>
<!--</el-col>-->
</el-col>
</el-row>
</template> </template>
<script> <script>
export default {
data() {
return {
currentPath: '/table',
currentPathName:'Table',
currentPathNameParent:'导航一',
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
watch: {
'$route' (to, from) {//
this.currentPath=to.path;
this.currentPathName=to.name;
this.currentPathNameParent=to.matched[0].name;
}
},
methods: {
onSubmit() {
console.log('submit!');
},
handleopen(){
export default {
data() {
return {
currentPath: '/table',
currentPathName: 'Table',
currentPathNameParent: '导航一',
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
watch: {
'$route'(to, from) {//
this.currentPath = to.path;
this.currentPathName = to.name;
this.currentPathNameParent = to.matched[0].name;
}
},
methods: {
onSubmit() {
console.log('submit!');
},
handleopen() {
//console.log('handleopen'); //console.log('handleopen');
}, },
handleclose(){
handleclose() {
//console.log('handleclose'); //console.log('handleclose');
}, },
handleselect:function(a,b){
},
handleselect: function (a, b) {
},
//退 //退
logout:function(){
var _this=this;
logout: function () {
var _this = this;
this.$confirm('确认退出吗?', '提示', { this.$confirm('确认退出吗?', '提示', {
//type: 'warning' //type: 'warning'
}).then(() => { }).then(() => {
@ -116,8 +126,8 @@
} }
}
}
}
}
</script> </script>
<style scoped> <style scoped>
@ -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