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

21
src/components/SliderMenu.vue
View File

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

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

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

13
src/views/SiteSetting.vue
View File

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

Write Preview
Loading…
Cancel
Save