suojin
/
jonhon-mes-web
15
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

风格调整

Browse Source
menu_style
zhangdi 3 months ago
parent d591bd0490
commit 6d133b8014
7 changed files with 73 additions and 81 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. 2
      index.html
  2. BIN
      public/favicon.ico
  3. 2
      src/page/index/index.vue
  4. 19
      src/page/index/setting.vue
  5. 4
      src/page/index/sidebar/index.vue
  6. 6
      src/page/index/top/index.vue
  7. 121
      src/page/index/top/top-menu.vue

2
index.html
Unescape View File

@ -11,7 +11,7 @@
<meta name='apple-mobile-web-app-capable' content='yes'>
<meta name='apple-mobile-web-app-status-bar-style' content='black'>
<meta name='format-detection' content='telephone=no'>
<link rel='icon' href='/favicon.png' />
<link rel='icon' href='/favicon.ico' />
<link rel='stylesheet' href='/iconfont/index.css'>
<link rel='stylesheet' href='/iconfont/avue/iconfont.css'>
<link rel='stylesheet' href='/iconfont/saber/iconfont.css'>

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

2
src/page/index/index.vue
Unescape View File

@ -5,7 +5,7 @@
<div class="avue-sidebar" v-show="validSidebar" :style="{ width: setting.styleRadio == '3' && '195px' }"
:class="setting.styleRadio == '2' ? 'styleRadio' : ''">
<!-- 左侧导航栏 -->
<logo v-if="setting.styleRadio == '1' || setting.styleRadio == '3'" />
<logo v-if="setting.styleRadio == '1' || setting.styleRadio == '3'|| setting.styleRadio == '4'" />
<sidebar />
</div>
<div class="avue-main">

19
src/page/index/setting.vue
Unescape View File

@ -4,9 +4,10 @@
<div class="setting">
<h5>菜单风格</h5>
<el-radio-group v-model="setting.styleRadio" @change="styleRadioChange">
<el-radio value="1">默认</el-radio>
<el-radio value="2">风格一</el-radio>
<el-radio value="3">风格二</el-radio>
<el-radio value="1">风格一</el-radio>
<el-radio value="2">风格二</el-radio>
<el-radio value="3">风格三</el-radio>
<el-radio value="4">风格四</el-radio>
</el-radio-group>
<!-- <h5>导航模式</h5>
<div class="setting-checkbox">
@ -99,7 +100,6 @@ export default {
},
methods: {
styleRadioChange(val) {
console.log(9999, val)
if (val == '3') {
this.$store.commit('SET_THEME_NAME', 'theme-white');
setTheme('theme-white');
@ -107,8 +107,15 @@ export default {
this.$router.push(this.tagWel);
setTimeout(() => location.reload());
}
}else{
this.$store.commit('SET_THEME_NAME', 'theme-go');
} else if (val == '4') {
this.$store.commit('SET_THEME_NAME', 'theme-white');
setTheme('theme-white');
if (this.$store.getters.isMacOs) {
this.$router.push(this.tagWel);
setTimeout(() => location.reload());
}
} else {
this.$store.commit('SET_THEME_NAME', 'theme-go');
setTheme('theme-go');
if (this.$store.getters.isMacOs) {
this.$router.push(this.tagWel);

4
src/page/index/sidebar/index.vue
Unescape View File

@ -1,6 +1,6 @@
<template>
<el-menu unique-opened :default-active="activeMenu" :mode="setting.sidebar" :collapse="isCollapse"
v-if="setting.styleRadio == '1'">
v-if="setting.styleRadio == '1'||setting.styleRadio == '4'">
<sidebar-item :menu="menu"></sidebar-item>
</el-menu>
<left-menu :menulist="menu" v-if="setting.styleRadio == '2'"></left-menu>
@ -85,8 +85,6 @@ export default {
}else{
this.index.openMenu();
}
console.log(8888,leftMenu)
},
methods: {
clickItem(item, index) {

6
src/page/index/top/index.vue
Unescape View File

@ -10,16 +10,16 @@
</div>
</div>
<div class="top-bar__title">
<top-menu ref="topMenu" v-if="setting.menu&&setting.styleRadio=='3'"></top-menu>
<top-menu ref="topMenu" v-if="setting.menu&&(setting.styleRadio=='3'||setting.styleRadio=='4')"></top-menu>
<top-search class="top-bar__item" v-if="setting.search"></top-search>
</div>
<div class="top-bar__right">
<!-- <div v-if="setting.color" class="top-bar__item">
<top-color></top-color>
</div> -->
<!-- <div v-if="setting.theme" class="top-bar__item">
<div v-if="setting.theme" class="top-bar__item">
<top-theme></top-theme>
</div> -->
</div>
<!-- <div v-if="setting.lock" class="top-bar__item">
<top-lock></top-lock>
</div> -->

121
src/page/index/top/top-menu.vue
Unescape View File

@ -1,64 +1,51 @@
<template>
<!-- <el-menu class="top-menu" :default-active="activeIndex" mode="horizontal" text-color="#333">
<el-menu-item index="0" @click="openHome(itemHome)">
<div>
<el-menu class="top-menu" :default-active="activeIndex" mode="horizontal" text-color="#333" ellipsis style="width: 900px">
<!-- <el-menu-item index="0" @click="openHome(itemHome)">
<template #title>
<i :class="itemHome.source" style="padding-right: 5px"></i>
<span>{{ itemHome.name }}</span>
</template>
</el-menu-item>
<template v-for="(item, index) in items" :key="index">
<el-menu-item :index="item.id + ''" @click="openMenu(item)">
<template #title>
</el-menu-item> -->
<template v-for="(item, index) in items" :key="index">
<el-menu-item :index="item.id + ''" @click="openMenu(item)">
<template #title>
<i :class="item.source" style="padding-right: 5px"></i>
<span>{{ item.name }}</span>
</template>
</el-menu-item>
</template>
</el-menu>
<div class="top_menu_box" v-if="setting.styleRadio == '3'">
<div v-for="(item, index) in items" :key="index" @click="openMenu(item)">
<div class="top_menu_box_item" v-if="index <= 7" :class="activeIndex == item.id ? 'active' : ''">
<i :class="item.source" style="padding-right: 5px"></i>
<span>{{ item.name }}</span>
</template>
</el-menu-item>
</template>
</el-menu> -->
<div class="top_menu_box" v-if="setting.styleRadio=='3'">
<div v-for="(item, index) in items" :key="index" @click="openMenu(item)">
<div class="top_menu_box_item" v-if="index <= 7" :class="activeIndex == item.id ? 'active' : ''">
<i :class="item.source" style="padding-right: 5px"></i>
<span>{{ item.name }}</span>
</div>
</div>
</div>
<div v-show="items.length > 9" >
<el-popover
placement="bottom-start"
:show-arrow="false"
:offset="0"
:hide-after='0'
popper-class="log-popover"
popper-style="visibility: visible;width:auto;border:none; transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;"
>
<template #reference>
<div style="height:100%;display: flex;align-items: center;">
<el-icon class="el-icon--right" style="width: 16px;height: 16px;" color="#fff">
<arrow-down />
</el-icon>
</div>
<!-- <div class="right_menu_item_box" @click='clickPage(item)'>
<div>{{ item.name }}</div>
<el-icon><ArrowRight /></el-icon>
</div> -->
</template>
<template #default >
<div v-if="items.length > 7">
<div v-for="item in items.filter((item,index) => index > 7)" style="padding: 10px;cursor: pointer; " @click="openMenu(item)">
<div>{{ item.name }}</div>
<div v-show="items.length > 9">
<el-popover placement="bottom-start" :show-arrow="false" :offset="0" :hide-after='0' popper-class="log-popover"
popper-style="visibility: visible;width:auto;border:none; transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;">
<template #reference>
<div style="height:100%;display: flex;align-items: center;">
<el-icon class="el-icon--right" style="width: 16px;height: 16px;" color="#fff">
<arrow-down />
</el-icon>
</div>
</div>
<!-- <div class="third_box" v-if="item.children && item.children.length != 0">
<div class="third_box_item" v-for="third in item.children" :key="third.id">
{{ third.name }}
</div>
</div> -->
</template>
</el-popover>
</template>
<template #default>
<div v-if="items.length > 7">
<div v-for="item in items.filter((item, index) => index > 7)" style="padding: 10px;cursor: pointer; "
@click="openMenu(item)">
<div>{{ item.name }}</div>
</div>
</div>
</template>
</el-popover>
</div>
</div>
</div>
</template>
@ -76,7 +63,7 @@ export default {
},
// activeIndex: '0',
items: [],
timer:null
timer: null
};
},
inject: ['index'],
@ -85,11 +72,11 @@ export default {
this.interval()
},
computed: {
...mapGetters(['tagCurrent', 'menu', 'tagWel','activeIndex','selectIndex','selectedIndex','leftMenu','setting']),
...mapGetters(['tagCurrent', 'menu', 'tagWel', 'activeIndex', 'selectIndex', 'selectedIndex', 'leftMenu', 'setting']),
},
methods: {
openMenu(item) {
console.log('item------------------------',item)
console.log('item------------------------', item)
this.index.openMenu2(item);
this.$store.commit('SET_ACTIVE_INDEX', item.id + '');
},
@ -97,24 +84,24 @@ export default {
this.index.openMenu(itemHome);
this.$router.push(this.tagWel);
},
interval(){
interval() {
console.log('1111111111111111111111111111111111111')
this.timer = setInterval(() =>{
this.timer = setInterval(() => {
this.getMenu()
},1000)
}, 1000)
},
getMenu() {
this.items = this.menu
console.log('menu-------------------------------------',this.menu)
console.log('items-------------------------------------',this.items)
if(this.menu.length != 0){
console.log('menu222-------------------------------------', this.menu)
console.log('items-------------------------------------', this.items)
if (this.menu.length != 0) {
clearInterval(this.timer)
}
if(this.activeIndex){
if (this.activeIndex) {
let tmp = this.menu.find(item => item.id == this.activeIndex)
this.openMenu(tmp)
}else{
if(this.menu.length != 0){
} else {
if (this.menu.length != 0) {
this.openMenu(this.menu[0])
}
}
@ -131,10 +118,10 @@ export default {
};
</script>
<style lang="scss" scoped>
.top_menu_box{
.top_menu_box {
display: flex;
.top_menu_box_item{
.top_menu_box_item {
font-weight: 400;
font-size: 14px;
color: #fff;
@ -144,7 +131,7 @@ export default {
padding: 0 24px 0 12px;
cursor: pointer;
&.active{
&.active {
background: #dceeff;
color: #06f;
}

Write Preview
Loading…
Cancel
Save