feature:change theme online

This commit is contained in:
Pan
2017-11-01 15:48:30 +08:00
parent e8b34bbc0d
commit 374fd3ffeb
6 changed files with 285 additions and 99 deletions

View File

@@ -1,47 +1,64 @@
<template>
<el-menu class="navbar" mode="horizontal">
<hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
<levelbar></levelbar>
<error-log v-if="log.length>0" class="errLog-container" :logsList="log"></error-log>
<el-tooltip class="item" effect="dark" content="全屏" placement="bottom">
<screenfull class='screenfull'></screenfull>
</el-tooltip>
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
<img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
<i class="el-icon-caret-bottom"></i>
</div>
<el-dropdown-menu class="user-dropdown" slot="dropdown">
<router-link class='inlineBlock' to="/">
<el-dropdown-item>
首页
<div class="right-menu">
<error-log v-if="log.length>0" class="errLog-container right-menu-item" :logsList="log"></error-log>
<el-tooltip effect="dark" content="全屏" placement="bottom">
<screenfull class="screenfull right-menu-item"></screenfull>
</el-tooltip>
<el-tooltip effect="dark" content="换肤" placement="bottom">
<theme-picker class="theme-switch right-menu-item"></theme-picker>
</el-tooltip>
<el-dropdown class="avatar-container right-menu-item" trigger="click">
<div class="avatar-wrapper">
<img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
<i class="el-icon-caret-bottom"></i>
</div>
<el-dropdown-menu class="user-dropdown" slot="dropdown">
<router-link class="inlineBlock" to="/">
<el-dropdown-item>
首页
</el-dropdown-item>
</router-link>
<a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">
<el-dropdown-item>
项目地址
</el-dropdown-item>
</a>
<el-dropdown-item divided>
<span @click="logout" style="display:block;">退出登录</span>
</el-dropdown-item>
</router-link>
<a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">
<el-dropdown-item>
项目地址
</el-dropdown-item>
</a>
<el-dropdown-item divided>
<span @click="logout" style="display:block;">退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-menu>
</template>
<script>
import { mapGetters } from 'vuex'
import Levelbar from './Levelbar'
import Hamburger from 'components/Hamburger'
import Screenfull from 'components/Screenfull'
import ErrorLog from 'components/ErrLog'
import Hamburger from '@/components/Hamburger'
import ThemePicker from '@/components/ThemePicker'
import Screenfull from '@/components/Screenfull'
import ErrorLog from '@/components/ErrLog'
import errLogStore from 'store/errLog'
export default {
components: {
Levelbar,
Hamburger,
ThemePicker,
ErrorLog,
Screenfull
},
@@ -72,48 +89,56 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped>
.navbar {
height: 50px;
line-height: 50px;
border-radius: 0px !important;
.hamburger-container {
line-height: 58px;
height: 50px;
float: left;
padding: 0 10px;
}
.errLog-container {
display: inline-block;
position: absolute;
right: 150px;
}
.screenfull {
position: absolute;
right: 90px;
top: 16px;
height: 20px;
}
.avatar-container {
height: 50px;
display: inline-block;
position: absolute;
right: 35px;
.avatar-wrapper {
cursor: pointer;
margin-top: 5px;
position: relative;
.user-avatar {
width: 40px;
height: 40px;
border-radius: 10px;
}
.el-icon-caret-bottom {
position: absolute;
right: -20px;
top: 25px;
font-size: 12px;
}
}
}
height: 50px;
line-height: 50px;
border-radius: 0px !important;
.hamburger-container {
line-height: 58px;
height: 50px;
float: left;
padding: 0 10px;
}
.errLog-container {
display: inline-block;
vertical-align: top;
}
.right-menu {
float: right;
height: 100%;
&:focus{
outline: none;
}
.right-menu-item {
display: inline-block;
margin: 0 8px;
}
.screenfull {
height: 20px;
}
.theme-switch {
vertical-align: 15px;
}
.avatar-container {
height: 50px;
margin-right: 30px;
.avatar-wrapper {
cursor: pointer;
margin-top: 5px;
position: relative;
.user-avatar {
width: 40px;
height: 40px;
border-radius: 10px;
}
.el-icon-caret-bottom {
position: absolute;
right: -20px;
top: 25px;
font-size: 12px;
}
}
}
}
}
</style>

View File

@@ -12,13 +12,21 @@
</el-card>
<div class="block">
<span class="demonstration">Button: </span>
<span class="wrapper">
<el-button type="primary">成功按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-button type="info">信息按钮</el-button>
</span>
</div>
<div class="block">
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">Search</el-button>
<el-button type="primary">Upload
<i class="el-icon-upload el-icon-right"></i>
</el-button>
</div>
<div class="block">
@@ -28,14 +36,15 @@
</div>
<div class="block">
<el-alert class='alert-item' title="成功提示的文案" type="success">
</el-alert>
<el-alert class='alert-item' title="消息提示的文案" type="info">
</el-alert>
<el-alert class='alert-item' title="警告提示的文案" type="warning">
</el-alert>
<el-alert class='alert-item' title="错误提示的文案" type="error">
</el-alert>
<el-radio-group v-model="radio">
<el-radio :label="3">Option A</el-radio>
<el-radio :label="6">Option B</el-radio>
<el-radio :label="9">Option C</el-radio>
</el-radio-group>
</div>
<div class="block">
<el-slider v-model="slideValue"></el-slider>
</div>
</div>
@@ -56,7 +65,9 @@ export default {
{ name: 'Tag Three', type: 'success' },
{ name: 'Tag Four', type: 'warning' },
{ name: 'Tag Five', type: 'danger' }
]
],
slideValue: 50,
radio: 3
}
},
watch: {
@@ -68,20 +79,16 @@ export default {
</script>
<style scoped>
.box-card{
width: 400px;
margin: 20px auto;
}
.block{
padding: 30px 24px;
}
.alert-item{
margin-bottom: 10px;
}
.tag-item{
margin-right: 15px;
}
.link-title{
margin-left:35px;
}
.box-card {
width: 400px;
margin: 20px auto;
}
.block {
padding: 30px 24px;
}
.tag-item {
margin-right: 15px;
}
</style>