ops
/
jump-web
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

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

master
taylor 8 years ago
parent
690c9a9db1
commit
9e14499db8
5 changed files with 116 additions and 89 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/App.vue
  2. BIN
      src/assets/user.png
  3. 2
      src/main.js
  4. 3
      src/mockdata/user.js
  5. 195
      src/pages/Home.vue

5
src/App.vue
View File

@ -1,7 +1,7 @@
<template>
<div id="app">
<!--<transition name="bounce">-->
<router-view></router-view>
<router-view></router-view>
<!--</transition>-->
</div>
</template>
@ -71,7 +71,8 @@
background-size: cover;*/
background: #1F2D3D;
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;
}

BIN
src/assets/user.png
View File

Binary file not shown.
Side by Side

After

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

2
src/main.js
View File

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

3
src/mockdata/user.js
View File

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

195
src/pages/Home.vue
View File

@ -2,20 +2,30 @@
<el-row class="panel">
<el-col :span="24" class="panel-top">
<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>
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
@ -30,94 +40,94 @@
</el-submenu>
<el-menu-item index="/page6"><i class="fa fa-line-chart"></i>导航三</el-menu-item>
</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>
<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');
},
handleclose(){
handleclose() {
//console.log('handleclose');
},
handleselect:function(a,b){
},
handleselect: function (a, b) {
},
//退出登录
logout:function(){
var _this=this;
logout: function () {
var _this = this;
this.$confirm('确认退出吗?', '提示', {
//type: 'warning'
}).then(() => {
_this.$router.replace('/login');
}).catch(() => {
});
}
}
}
}
}
</script>
<style scoped>
@ -144,6 +154,19 @@
background: #1F2D3D;
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 {
background: #324057;

Write Preview
Loading…
Cancel
Save