|
|
@@ -1,275 +1,134 @@
|
|
|
<template>
|
|
|
<div class="scope-slider">
|
|
|
- <div class="logo">
|
|
|
- <a href="javascript:;">
|
|
|
- <!-- <icon-svg class="lr" name="logo-lr" v-if="!menuCollapse"></icon-svg> -->
|
|
|
- <!-- <icon-svg class="z" name="logo" v-else></icon-svg> -->
|
|
|
- <h3>国兰花尚</h3>
|
|
|
- </a>
|
|
|
+ <!-- 主菜单 -->
|
|
|
+ <div class="main-list">
|
|
|
+ <div
|
|
|
+ class="list"
|
|
|
+ :class="[mainIndex == index ? 'active' : '']"
|
|
|
+ v-for="(item, index) in menuGroup"
|
|
|
+ :key="index"
|
|
|
+ @click="pageMianTo(item, index)"
|
|
|
+ >
|
|
|
+ <i class="iconfont" :class="[item.icon]"></i>
|
|
|
+ <div class="list-name">{{ item.name }}</div>
|
|
|
+ <i v-if="!$util.isEmpty(item)" class="iconfont icontriangle-right"></i>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- <div class="user" v-if="userInfo && !menuCollapse">
|
|
|
- <img :src="userInfo.headImg | default_avatar" alt="" class="avatar" />
|
|
|
-
|
|
|
- <div class="det">
|
|
|
- <p class="name">{{ userInfo.name }}</p>
|
|
|
- <p class="post">{{ userInfo.nickName | default_name }}</p>
|
|
|
+ <!-- 子菜单 -->
|
|
|
+ <div class="sub-list" v-show="!$util.isEmpty(subData)">
|
|
|
+ <div
|
|
|
+ class="list"
|
|
|
+ v-for="(item, index) in subData"
|
|
|
+ :key="index"
|
|
|
+ :class="[subIndex == index ? 'active' : '']"
|
|
|
+ @click="pageSubTo(item, index)"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
</div>
|
|
|
- </div> -->
|
|
|
-
|
|
|
- <div class="menu" v-if="visible">
|
|
|
- <deep-menu></deep-menu>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { mapGetters, mapMutations } from 'vuex';
|
|
|
-import { setTimeout } from 'timers';
|
|
|
-
|
|
|
export default {
|
|
|
+ name: 'scope-slide',
|
|
|
data() {
|
|
|
return {
|
|
|
- visible: true
|
|
|
+ mainIndex: 0,
|
|
|
+ subIndex: 0
|
|
|
};
|
|
|
},
|
|
|
-
|
|
|
computed: {
|
|
|
- ...mapGetters(['menuGroup', 'menuCollapse', 'userInfo'])
|
|
|
- },
|
|
|
-
|
|
|
- watch: {
|
|
|
- menuGroup() {
|
|
|
- this.visible = false;
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- this.visible = true;
|
|
|
- }, 0);
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- components: {
|
|
|
- DeepMenu: {
|
|
|
- computed: {
|
|
|
- // ...mapGetters(['menuGroup', 'menuCollapse', 'menuBg'])
|
|
|
- ...mapGetters(['menuGroup', 'menuBg'])
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- toView(url) {
|
|
|
- if (url != this.$route.path) {
|
|
|
- this.$router.push(url);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- render() {
|
|
|
- const fn = list => {
|
|
|
- return list.map(e => {
|
|
|
- let html = null;
|
|
|
-
|
|
|
- if (e.type == 0) {
|
|
|
- html = (
|
|
|
- <el-submenu index={String(e.id)} key={e.id}>
|
|
|
- <template slot="title">
|
|
|
- <icon-svg name={e.icon}></icon-svg>
|
|
|
- <span slot="title">{e.name}</span>
|
|
|
- </template>
|
|
|
- {fn(e.children)}
|
|
|
- </el-submenu>
|
|
|
- );
|
|
|
- } else {
|
|
|
- html = (
|
|
|
- <el-menu-item index={e.path} key={e.path}>
|
|
|
- <icon-svg name={e.icon}></icon-svg>
|
|
|
- <span slot="title">{e.name}</span>
|
|
|
- </el-menu-item>
|
|
|
- );
|
|
|
- }
|
|
|
-
|
|
|
- return html;
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
- let el = fn(this.menuGroup);
|
|
|
-
|
|
|
- return (
|
|
|
- <el-menu
|
|
|
- default-active={this.$route.path}
|
|
|
- collapse-transition={false}
|
|
|
- collapse={this.menuCollapse}
|
|
|
- on-select={this.toView}>
|
|
|
- {el}
|
|
|
- </el-menu>
|
|
|
- );
|
|
|
+ ...mapGetters(['menuGroup']),
|
|
|
+ subData() {
|
|
|
+ console.log('children', this.menuGroup[this.mainIndex]);
|
|
|
+ let arr = this.menuGroup[this.mainIndex].children;
|
|
|
+ if (this.$util.isEmpty(arr)) {
|
|
|
+ return [];
|
|
|
}
|
|
|
+ return arr;
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+ mounted() {
|
|
|
+ console.log('menuGroup', this.menuGroup);
|
|
|
+ },
|
|
|
methods: {
|
|
|
- ...mapMutations(['COLLAPSE_MENU'])
|
|
|
+ pageMianTo(item, index) {
|
|
|
+ this.mainIndex = index;
|
|
|
+ if (this.$util.isEmpty(item.children)) {
|
|
|
+ this.$router.push(item.path);
|
|
|
+ } else {
|
|
|
+ this.subIndex = 0;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ pageSubTo(item, index) {
|
|
|
+ this.subIndex = index;
|
|
|
+ this.$router.push(item.path);
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="stylus" scoped>
|
|
|
-@import '../../../assets/css/theme.styl';
|
|
|
-
|
|
|
+<style lang="scss" scoped>
|
|
|
.scope-slider {
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
|
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
|
|
-
|
|
|
- .logo {
|
|
|
- height: 50px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- letter-spacing: 1px;
|
|
|
-
|
|
|
- p {
|
|
|
- background: linear-gradient(120deg, $color, $color2);
|
|
|
- -webkit-background-clip: text;
|
|
|
- -webkit-text-fill-color: transparent;
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .lr {
|
|
|
- height: 45px;
|
|
|
- width: 180px;
|
|
|
- }
|
|
|
-
|
|
|
- .z {
|
|
|
- height: 30px;
|
|
|
- width: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .user {
|
|
|
- display: flex;
|
|
|
- height: 40px;
|
|
|
- position: relative;
|
|
|
- margin: 20px 20px 30px 25px;
|
|
|
-
|
|
|
- .avatar {
|
|
|
- height: 40px;
|
|
|
- width: 40px;
|
|
|
- border-radius: 40px;
|
|
|
- background-color: #eee;
|
|
|
- }
|
|
|
-
|
|
|
- .det {
|
|
|
- margin-left: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- p {
|
|
|
- font-size: 13px;
|
|
|
- line-height: 20px;
|
|
|
- margin-bottom: 3px;
|
|
|
-
|
|
|
- &.post {
|
|
|
- font-size: 12px;
|
|
|
- color: #c2c2c2;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .collapse {
|
|
|
- position: absolute;
|
|
|
- right: 10px;
|
|
|
- top: 10px;
|
|
|
+ @include disFlex(flex-start, flex-start);
|
|
|
+ .main-list {
|
|
|
+ height: 100%;
|
|
|
+ width: 130px;
|
|
|
+ background-color: #3d3f42;
|
|
|
+ box-shadow: 6px 6px 20px #ccc;
|
|
|
+ .list {
|
|
|
+ @include disFlex(center, flex-start);
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-top: 16px;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
cursor: pointer;
|
|
|
- font-size: 18px;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- color: $color;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu {
|
|
|
- overflow-y: auto;
|
|
|
- // height: calc(100% - 150px);
|
|
|
- height: calc(100% - 50px);
|
|
|
-
|
|
|
- &::-webkit-scrollbar {
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- }
|
|
|
-
|
|
|
- &::-webkit-scrollbar-thumb {
|
|
|
- background: linear-gradient(to bottom, $color2, $color);
|
|
|
- }
|
|
|
-
|
|
|
- &::-webkit-scrollbar-track {
|
|
|
- background: #ccc;
|
|
|
- }
|
|
|
-
|
|
|
- .el-menu {
|
|
|
- border-right: 0;
|
|
|
- animation-duration: 0.3s;
|
|
|
- animation-fill-mode: both;
|
|
|
- animation-name: fadeInLeft;
|
|
|
-
|
|
|
- @keyframes fadeInLeft {
|
|
|
- from {
|
|
|
- opacity: 0;
|
|
|
- transform: translate3d(-100%, 0, 0);
|
|
|
- }
|
|
|
-
|
|
|
- to {
|
|
|
- opacity: 1;
|
|
|
- transform: translate3d(0, 0, 0);
|
|
|
- }
|
|
|
+ .list-name {
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 16px;
|
|
|
}
|
|
|
-
|
|
|
- >>>.el-menu-item, >>>.el-submenu__title {
|
|
|
- color: #000;
|
|
|
- letter-spacing: 0.5px;
|
|
|
-
|
|
|
- .icon-svg {
|
|
|
- height: 17px;
|
|
|
- width: 17px;
|
|
|
- margin: 0 15px 0 5px;
|
|
|
- position: relative;
|
|
|
- top: 1px;
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- font-size: 13px;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
+ .iconfont {
|
|
|
+ color: #a1aab5;
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
-
|
|
|
- &.el-menu--collapse {
|
|
|
- >>>.el-submenu__title {
|
|
|
- .icon-svg {
|
|
|
- margin-left: 2px;
|
|
|
- height: 19px;
|
|
|
- width: 19px;
|
|
|
- }
|
|
|
+ &.active {
|
|
|
+ color: $mainColor;
|
|
|
+ background-color: #fff;
|
|
|
+ .iconfont {
|
|
|
+ color: $mainColor;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- >>>.el-menu-item {
|
|
|
- &.is-active {
|
|
|
- color: $color2;
|
|
|
- background-color: #E5F1FB;
|
|
|
+ &:hover {
|
|
|
+ color: $mainColor;
|
|
|
+ background-color: #fff;
|
|
|
+ .iconfont {
|
|
|
+ color: $mainColor;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-</style>
|
|
|
-
|
|
|
-<style lang="stylus">
|
|
|
-.el-menu--popup-right-start {
|
|
|
- .el-menu-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .icon-svg {
|
|
|
- height: 18px;
|
|
|
- width: 18px;
|
|
|
- margin: 0 15px 0 5px;
|
|
|
+ .sub-list {
|
|
|
+ width: calc(100% - 126px);
|
|
|
+ background-color: #fff;
|
|
|
+ .list {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ padding-left: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: $fontColor2;
|
|
|
+ &.active {
|
|
|
+ color: $mainColor;
|
|
|
+ background-color: #f0f2f6;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ color: $mainColor;
|
|
|
+ background-color: #f0f2f6;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|