|
|
|
|
@ -17,25 +17,36 @@
|
|
|
|
|
<span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
|
|
|
|
|
</router-link>
|
|
|
|
|
</scroll-pane> -->
|
|
|
|
|
<div class="tagsView-box">
|
|
|
|
|
<img src="@/assets/images/position.png" alt="" />
|
|
|
|
|
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<img src="@/assets/images/position.png" alt="" />
|
|
|
|
|
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
|
|
|
|
|
|
|
|
|
|
<!-- <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
|
|
|
|
|
<li @click="refreshSelectedTag(selectedTag)"><i class="el-icon-refresh-right"></i> 刷新页面</li>
|
|
|
|
|
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><i class="el-icon-close"></i> 关闭当前</li>
|
|
|
|
|
<li @click="closeOthersTags"><i class="el-icon-circle-close"></i> 关闭其他</li>
|
|
|
|
|
<li v-if="!isFirstView()" @click="closeLeftTags"><i class="el-icon-back"></i> 关闭左侧</li>
|
|
|
|
|
<li v-if="!isLastView()" @click="closeRightTags"><i class="el-icon-right"></i> 关闭右侧</li>
|
|
|
|
|
<li @click="closeAllTags(selectedTag)"><i class="el-icon-circle-close"></i> 全部关闭</li>
|
|
|
|
|
</ul> -->
|
|
|
|
|
<header class="app-header">
|
|
|
|
|
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
|
|
|
|
<div class="avatar-wrapper">
|
|
|
|
|
<img :src="avatar" class="user-avatar">
|
|
|
|
|
<span class="user-name">{{ name }}</span>
|
|
|
|
|
<i class="el-icon-caret-bottom" />
|
|
|
|
|
</div>
|
|
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
|
|
<router-link to="/user/profile">
|
|
|
|
|
<el-dropdown-item>个人中心</el-dropdown-item>
|
|
|
|
|
</router-link>
|
|
|
|
|
<el-dropdown-item divided @click.native="logout">
|
|
|
|
|
<span>退出登录</span>
|
|
|
|
|
</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
</header>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import ScrollPane from './ScrollPane'
|
|
|
|
|
import Breadcrumb from '@/components/Breadcrumb'
|
|
|
|
|
|
|
|
|
|
import { mapGetters } from 'vuex'
|
|
|
|
|
import path from 'path'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
@ -60,6 +71,10 @@ export default {
|
|
|
|
|
// theme() {
|
|
|
|
|
// return this.$store.state.settings.theme;
|
|
|
|
|
// }
|
|
|
|
|
...mapGetters([
|
|
|
|
|
'avatar',
|
|
|
|
|
'name'
|
|
|
|
|
]),
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
// $route() {
|
|
|
|
|
@ -79,6 +94,17 @@ export default {
|
|
|
|
|
// this.addTags()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
async logout() {
|
|
|
|
|
this.$confirm('确定注销并退出系统吗？', '提示', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
}).then(() => {
|
|
|
|
|
this.$store.dispatch('LogOut').then(() => {
|
|
|
|
|
location.href = '/index';
|
|
|
|
|
})
|
|
|
|
|
}).catch(() => {});
|
|
|
|
|
},
|
|
|
|
|
isActive(route) {
|
|
|
|
|
return route.path === this.$route.path
|
|
|
|
|
},
|
|
|
|
|
@ -249,107 +275,87 @@ export default {
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.tags-view-container {
|
|
|
|
|
height: 34px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
// background: #fff;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
// border-bottom: 1px solid #d8dce5;
|
|
|
|
|
// box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
.tagsView-box {
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
width: 14px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// .tags-view-wrapper {
|
|
|
|
|
.tags-view-item {
|
|
|
|
|
.app-header {
|
|
|
|
|
height: 100%;
|
|
|
|
|
padding: 0px 20px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.right-box {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.right-menu-item {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: relative;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
height: 26px;
|
|
|
|
|
line-height: 26px;
|
|
|
|
|
// border: 1px solid #d8dce5;
|
|
|
|
|
// color: #495060;
|
|
|
|
|
// background: #fff;
|
|
|
|
|
// padding: 0 8px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #292F38;
|
|
|
|
|
// margin-left: 5px;
|
|
|
|
|
margin-top: 4px;
|
|
|
|
|
// &:first-of-type {
|
|
|
|
|
// margin-left: 15px;
|
|
|
|
|
// }
|
|
|
|
|
// &:last-of-type {
|
|
|
|
|
// margin-right: 15px;
|
|
|
|
|
// }
|
|
|
|
|
span {
|
|
|
|
|
margin: 0 2px;
|
|
|
|
|
}
|
|
|
|
|
&.active {
|
|
|
|
|
background-color: #42b983;
|
|
|
|
|
color: #fff;
|
|
|
|
|
border-color: #42b983;
|
|
|
|
|
&::before {
|
|
|
|
|
content: '';
|
|
|
|
|
background: #fff;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 8px;
|
|
|
|
|
height: 8px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
position: relative;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
padding: 0 8px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #5a5e66;
|
|
|
|
|
vertical-align: text-bottom;
|
|
|
|
|
|
|
|
|
|
&.hover-effect {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: background .3s;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
background: rgba(0, 0, 0, .025)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// }
|
|
|
|
|
.contextmenu {
|
|
|
|
|
margin: 0;
|
|
|
|
|
background: #fff;
|
|
|
|
|
z-index: 3000;
|
|
|
|
|
position: absolute;
|
|
|
|
|
list-style-type: none;
|
|
|
|
|
padding: 5px 0;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #333;
|
|
|
|
|
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
|
|
|
|
|
li {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 7px 16px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
&:hover {
|
|
|
|
|
background: #eee;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
//reset element css of el-icon-close
|
|
|
|
|
.tags-view-wrapper {
|
|
|
|
|
.tags-view-item {
|
|
|
|
|
.el-icon-close {
|
|
|
|
|
width: 16px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
vertical-align: 2px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
transition: all .3s cubic-bezier(.645, .045, .355, 1);
|
|
|
|
|
transform-origin: 100% 50%;
|
|
|
|
|
&:before {
|
|
|
|
|
transform: scale(.6);
|
|
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: -3px;
|
|
|
|
|
}
|
|
|
|
|
&:hover {
|
|
|
|
|
background-color: #b4bccc;
|
|
|
|
|
color: #fff;
|
|
|
|
|
.avatar-container {
|
|
|
|
|
margin-right: 30px;
|
|
|
|
|
|
|
|
|
|
.avatar-wrapper {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.user-name {
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #192733;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.user-avatar {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-icon-caret-bottom {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: -20px;
|
|
|
|
|
top: 20px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
