zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

总和两个导航栏

pull/46/head
zq 3 weeks ago
parent
b60d15a3f3
commit
d0bb20547c
4 changed files with 126 additions and 108 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. 198
      src/components/SetLeftMenu.vue
  2. 21
      src/components/SliderMenu.vue
  3. 2
      src/style/theme/common.scss
  4. 13
      src/views/SiteSetting.vue

198
src/components/SetLeftMenu.vue
View File

@ -4,9 +4,9 @@
<li v-for="(item, index) in menuList" :key="item.path">
<div :class="[$route.path == item.path ? 'active' : '', 'flex', $route.path == item.path ? curIndex = index : '']"
@click="gotoPath(item.path,index)">
<img v-if="$route.path == item.path" :src="item.imgActive" alt="">
<img v-else :src="item.img" alt="">
{{ item.name }}
<SvgIcon1 :iconPath="require(`@/assets/${item.img}`)" defaultColor="#8A9099" :size="16"
activeColor="#006AFF" :isActive="$route.path == item.path" />
<span class="title_text" >{{ item.name }}</span>
</div>
<p :class="['flex', activeFloor == item1.desc ? 'curActive' : '']"
v-for="(item1) in item.list" @click="setActiveCur(item1.desc,item)" :key="item1.name">{{ item1.name }}</p>
@ -16,16 +16,17 @@
</template>
<script>
import SvgIcon1 from '@/components/SvgIcon1.vue';
// :class="[$route.path != item.path ? 'not-point' : '', 'flex', activeFloor == item1.desc ? 'curActive' : '']"
import { mapState } from 'vuex';
import store from '../store';
export default {
name: 'Sidebar',
props: {
// menuList: {
// type: Array,
// required: true
// },
menuList: {
type: Array,
required: true
},
// activeFloor:{
// type:String
// },
@ -33,97 +34,100 @@ export default {
// type:Number
// }
},
components: {
SvgIcon1,
},
data() {
return {
activeFloor: null,
curIndex: 0,
scrollLock: false,
menuList: [
{
name: '基本设置',
path: '/siteSetting/siteBaseSetting',
img: require('@/assets/site/sitebase.svg'),
imgActive: require('@/assets/site/sitebase_active.svg'),
list: [
{
name: '站点信息',
desc: 'siteMessage1'
},
{
name: '域名设置',
desc: 'siteMessage2'
},
{
name: '收款方式',
desc: 'siteMessage3'
},
]
},
{
name: '个性化设置',
path: '/siteSetting/sitePersonalization',
img: require('@/assets/site/gexinghua.svg'),
imgActive: require('@/assets/site/sitebase_active.svg'),
list: [
{
name: '网页模板',
desc: 'siteMessage4'
},
{
name: '客服设置',
desc: 'siteMessage5'
},
{
name: '功能显隐',
desc: 'siteMessage6'
},
{
name: '安全提交',
desc: 'siteMessage7'
},
{
name: '初始订单数',
desc: 'siteMessage8'
},
]
},
{
name: '移动端设置',
path: '/siteSetting/siteH5',
img: require('@/assets/site/siteh5.svg'),
imgActive: require('@/assets/site/sitebase_active.svg'),
list: [
{
name: '微信H5',
desc: 'siteMessage9'
},
{
name: '小程序',
desc: 'siteMessage10'
},
]
},
{
name: '营销推广',
path: '/siteSetting/siteSem',
img: require('@/assets/site/sitesem.svg'),
imgActive: require('@/assets/site/sitebase_active.svg'),
list: [
{
name: 'SEO设置',
desc: 'siteMessage11'
},
{
name: 'SEM设置',
desc: 'siteMessage12'
},
{
name: '访问统计',
desc: 'siteMessage13'
},
]
}
]
// menuList: [
// {
// name: '基本设置',
// path: '/siteSetting/siteBaseSetting',
// img: require('@/assets/site/sitebase.svg'),
// imgActive: require('@/assets/site/sitebase_active.svg'),
// list: [
// {
// name: '站点信息',
// desc: 'siteMessage1'
// },
// {
// name: '域名设置',
// desc: 'siteMessage2'
// },
// {
// name: '收款方式',
// desc: 'siteMessage3'
// },
// ]
// },
// {
// name: '个性化设置',
// path: '/siteSetting/sitePersonalization',
// img: require('@/assets/site/gexinghua.svg'),
// imgActive: require('@/assets/site/sitebase_active.svg'),
// list: [
// {
// name: '网页模板',
// desc: 'siteMessage4'
// },
// {
// name: '客服设置',
// desc: 'siteMessage5'
// },
// {
// name: '功能显隐',
// desc: 'siteMessage6'
// },
// {
// name: '安全提交',
// desc: 'siteMessage7'
// },
// {
// name: '初始订单数',
// desc: 'siteMessage8'
// },
// ]
// },
// {
// name: '移动端设置',
// path: '/siteSetting/siteH5',
// img: require('@/assets/site/siteh5.svg'),
// imgActive: require('@/assets/site/sitebase_active.svg'),
// list: [
// {
// name: '微信H5',
// desc: 'siteMessage9'
// },
// {
// name: '小程序',
// desc: 'siteMessage10'
// },
// ]
// },
// {
// name: '营销推广',
// path: '/siteSetting/siteSem',
// img: require('@/assets/site/sitesem.svg'),
// imgActive: require('@/assets/site/sitebase_active.svg'),
// list: [
// {
// name: 'SEO设置',
// desc: 'siteMessage11'
// },
// {
// name: 'SEM设置',
// desc: 'siteMessage12'
// },
// {
// name: '访问统计',
// desc: 'siteMessage13'
// },
// ]
// }
// ]
}
},
mounted() {
@ -219,6 +223,9 @@ export default {
.ceshi {
// animation: fadeInOut 2s infinite;
}
.title_text{
margin-left: 6px;
}
ul {
list-style: none;
@ -240,7 +247,8 @@ li {
div {
letter-spacing: 0.08em;
color: #1E2226;
margin: 11px 0;
// margin: 12px 0;
height: 40px;
cursor: pointer;
img {
@ -249,9 +257,9 @@ li {
}
p {
margin: 9px 0;
letter-spacing: 0.08em;
line-height: 18px;
height: 36px;
color: #8A9099;
cursor: pointer;

21
src/components/SliderMenu.vue
View File

@ -1,7 +1,6 @@
<template>
<transition name="menu-collapse">
<!-- :default-active="activeMenu" -->
<el-menu class="el-menu-vertical-demo custom-menu" @open="handleOpen"
<el-menu v-if="!customize" class="el-menu-vertical-demo custom-menu" @open="handleOpen"
:default-active="currentMenuItem?.index"
@close="handleClose" @select="handleSelect" :collapse="isCollapse" :collapse-transition="true"
>
@ -19,7 +18,7 @@
<el-submenu v-if="item.children" :key="item.index" :index="item.index">
<template slot="title">
<SvgIcon1 :iconPath="require(`@/assets/menu/${item.icon}.svg`)" defaultColor="#8A9099"
activeColor="#006AFF" :isActive="item.index == currentMenuItem?.index.substr(0,1) && isCollapse" />
activeColor="#006AFF" :isActive="item.index == currentMenuItem?.index?.substring(0,1) && isCollapse" />
<span class="title_text" >{{ item.title }}</span>
</template>
<el-menu-item style="padding: 0 22px 0 32px;" v-for="subItem in item.children" :key="subItem.index"
@ -37,28 +36,36 @@
</template>
</div>
</el-menu>
<SetLeftMenu v-else :menuList="menuData"/>
<!-- <div v-else>---akjshdjka</div> -->
</transition>
</template>
<script>
import SetLeftMenu from '@/components/SetLeftMenu.vue'
import SvgIcon1 from '@/components/SvgIcon1.vue';
import GuipToolTip from '@/components/GuipToolTip.vue';
export default {
name: 'SliderMenu',
components: {
SvgIcon1,
GuipToolTip
GuipToolTip,
SetLeftMenu
},
props: {
menuData: {
type: Array,
default: () => []
},
customize:{
type:Boolean,
default:false
}
},
data() {
return {
isCollapse: false,
activeMenu: '',
routerList: [],
currentMenuItem:'',
currentMenuParent:''
@ -110,10 +117,6 @@ export default {
}
return null;
},
handleMenuItemClick(item) {
this.$router.push(item.path);
this.activeMenu = item.index;
},
},
mounted() {
// console.log(this.$route.path,'this.$route.path----');

2
src/style/theme/common.scss
View File

@ -756,7 +756,7 @@ body {
overflow: hidden;
text-overflow: ellipsis;
}
.svg-icon-wrapper{
.el-table .svg-icon-wrapper{
width: 12px !important;
height: 12px !important;
}

13
src/views/SiteSetting.vue
View File

@ -1,6 +1,8 @@
<template>
<div class="siteSetting-wrap">
<SetLeftMenu />
<!-- <SetLeftMenu /> -->
<SliderMenu :menuData="siteSettingData" :customize="true"></SliderMenu>
<!--:menuList="menuList" :activeFloor="activeFloor" :curIndex="curIndex" -->
<!-- 主内容区域 -->
<main class="main-content" ref="scrollContainer" id="main-content">
@ -17,7 +19,9 @@
// import SiteBaseSetting from './SiteBaseSetting.vue';
import PageTitle from '@/components/PageTitle.vue';
import Footer from '@/components/Footer.vue';
import SetLeftMenu from '@/components/SetLeftMenu.vue'
import { mapState } from 'vuex';
import SliderMenu from '@/components/SliderMenu.vue'
export default {
// 站点设置
name: '',
@ -25,7 +29,7 @@ export default {
components: {
PageTitle,
Footer,
SetLeftMenu,
SliderMenu,
// SiteBaseSetting
},
data() {
@ -38,6 +42,9 @@ export default {
console.log(this.$route.path,'090-9090');
// this.$refs.scrollContainer.scrollTo(0)
},
computed: {
...mapState(['siteSettingData']) // 从Vuex映射showSidebar状态到组件的计算属性中
},
methods: {
}
}

Write Preview
Loading…
Cancel
Save