zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

顶部导航栏现在是固定的 

顶部导航栏增加毛玻璃效果
修复修改顶部导航栏导致的某些地方错位的问题
This commit is contained in:
lei.jiang 2017-09-17 02:30:27 +08:00
parent 47a8c66099
commit d0ad66b2f2
5 changed files with 97 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Github/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github"> <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#4AB7BD; color:#fff; position: absolute; top: 50px; border: 0; right: 0;" <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#4AB7BD; color:#fff; position: absolute; top: 0px; border: 0; right: 0;"
aria-hidden="true"> aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path> <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"

1
src/views/dashboard/admin/index.vue
View File

@ -98,7 +98,6 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container { .dashboard-editor-container {
margin: 30px;
.btn-group { .btn-group {
margin-bottom: 60px; margin-bottom: 60px;
} }

2
src/views/dashboard/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="dashboard-container"> <div class="dashboard-container" style="padding:20px;">
<component :is="currentRole"></component> <component :is="currentRole"></component>
</div> </div>
</template> </template>

2
src/views/layout/AppMain.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<section class="app-main" style="min-height: 100%"> <section class="app-main" style="min-height: 100%;margin-top:50px;">
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<router-view :key="key"></router-view> <router-view :key="key"></router-view>
</transition> </transition>

164
src/views/layout/Navbar.vue
View File

@ -1,30 +1,32 @@
<template> <template>
<el-menu class="navbar" mode="horizontal"> <div class="tab-container">
<hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger> <el-menu class="navbar" mode="horizontal">
<levelbar></levelbar> <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
<tabs-view></tabs-view> <levelbar></levelbar>
<error-log v-if="log.length>0" class="errLog-container" :logsList="log"></error-log> <tabs-view></tabs-view>
<screenfull class='screenfull'></screenfull> <error-log v-if="log.length>0" class="errLog-container" :logsList="log"></error-log>
<el-dropdown class="avatar-container" trigger="click"> <screenfull class='screenfull'></screenfull>
<div class="avatar-wrapper"> <el-dropdown class="avatar-container" trigger="click">
<img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'"> <div class="avatar-wrapper">
<i class="el-icon-caret-bottom"></i> <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
</div> <i class="el-icon-caret-bottom"></i>
<el-dropdown-menu class="user-dropdown" slot="dropdown"> </div>
<router-link class='inlineBlock' to="/"> <el-dropdown-menu class="user-dropdown" slot="dropdown">
<el-dropdown-item> <router-link class='inlineBlock' to="/">
首页 <el-dropdown-item>
</el-dropdown-item> 首页
</router-link> </el-dropdown-item>
<a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/"> </router-link>
<el-dropdown-item> <a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">
项目地址 <el-dropdown-item>
</el-dropdown-item> 项目地址
</a> </el-dropdown-item>
<el-dropdown-item divided><span @click="logout" style="display:block;">退出登录</span></el-dropdown-item> </a>
</el-dropdown-menu> <el-dropdown-item divided><span @click="logout" style="display:block;">退出登录</span></el-dropdown-item>
</el-dropdown> </el-dropdown-menu>
</el-menu> </el-dropdown>
</el-menu>
</div>
</template> </template>
<script> <script>
@ -70,50 +72,72 @@ export default {
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.navbar { .tab-container {
height: 50px; position:fixed;
line-height: 50px; top:0;
border-radius: 0px !important; z-index:102;
.hamburger-container { width:100%;
line-height: 58px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
height: 50px; &::before{
float: left; content:'';
padding: 0 10px; display: block;
} width:100%;
.errLog-container { z-index:-1;
display: inline-block; filter:blur(10px);
position: absolute; background: rgba(238,241,246,0.8);
right: 150px; height:50px;
} position:fixed;
.screenfull { left:0;
position: absolute; right:0;
right: 90px; top:0;
top: 16px; bottom:0;
color: red; }
} .navbar {
.avatar-container { height: 50px;
height: 50px; line-height: 50px;
display: inline-block; border-radius: 0px !important;
position: absolute; background-color: rgba(238,241,246,0.8);
right: 35px; .hamburger-container {
.avatar-wrapper { line-height: 58px;
cursor: pointer; height: 50px;
margin-top: 5px; float: left;
position: relative; padding: 0 10px;
.user-avatar { }
width: 40px; .errLog-container {
height: 40px; display: inline-block;
border-radius: 10px; position: absolute;
} right: 150px;
.el-icon-caret-bottom { }
position: absolute; .screenfull {
right: -20px; position: fixed;
top: 25px; right: 90px;
font-size: 12px; top: 16px;
} color: red;
} }
} .avatar-container {
} height: 50px;
display: inline-block;
position: fixed;
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;
}
}
}
}
}
</style> </style>