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 19df6da266
commit 8835e59301
5 changed files with 89 additions and 35 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. 29
      src/page/index/index.vue
  2. 2
      src/page/index/logo.vue
  3. 43
      src/page/index/setting.vue
  4. 46
      src/page/index/sidebar/leftMenu.vue
  5. 4
      src/page/index/top/index.vue

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

@ -2,9 +2,10 @@
<el-watermark :content="watermark" style="height: 100%"> <el-watermark :content="watermark" style="height: 100%">
<div class="avue-contail" :class="{ 'avue--collapse': isCollapse }"> <div class="avue-contail" :class="{ 'avue--collapse': isCollapse }">
<div class="avue-layout" :class="{ 'avue-layout--horizontal': isHorizontal }"> <div class="avue-layout" :class="{ 'avue-layout--horizontal': isHorizontal }">
<div class="avue-sidebar" v-show="validSidebar" :style="{width:setting.styleRadio == '3' && '195px'}" :class="setting.styleRadio=='2'?'styleRadio':''"> <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'" />
<sidebar /> <sidebar />
</div> </div>
<div class="avue-main"> <div class="avue-main">
@ -54,7 +55,7 @@ export default {
provide() { provide() {
return { return {
index: this, index: this,
leftMenu:[] leftMenu: []
}; };
}, },
computed: { computed: {
@ -67,7 +68,7 @@ export default {
'menu', 'menu',
'setting', 'setting',
'leftMenu', 'leftMenu',
'selectIndex','selectedIndex' 'selectIndex', 'selectedIndex'
]), ]),
validSidebar() { validSidebar() {
return !( return !(
@ -82,7 +83,7 @@ export default {
methods: { methods: {
//打开菜单 风格2 //打开菜单 风格2
openMenu2(item = {}) { openMenu2(item = {}) {
if(!item.id){ if (!item.id) {
this.$store.dispatch('GetMenu', item.id).then(data => { this.$store.dispatch('GetMenu', item.id).then(data => {
if (data.length !== 0) { if (data.length !== 0) {
this.$router.$avueRouter.formatRoutes(data, true); this.$router.$avueRouter.formatRoutes(data, true);
@ -109,7 +110,7 @@ export default {
}); });
}*/ }*/
}); });
}else{ } else {
if (item.children.length !== 0) { if (item.children.length !== 0) {
this.$store.commit('SET_LEFT_MENU', item.children); this.$store.commit('SET_LEFT_MENU', item.children);
let tmpIndex = item.children.findIndex(item1 => item1.id == this.selectedIndex) let tmpIndex = item.children.findIndex(item1 => item1.id == this.selectedIndex)
@ -119,13 +120,13 @@ export default {
// this.$router.$avueRouter.formatRoutes(item.children, true); // this.$router.$avueRouter.formatRoutes(item.children, true);
} }
} }
}, },
//打开菜单 //打开菜单
openMenu(item = {}) { openMenu(item = {}) {
this.$store.dispatch('GetMenu', item.id).then(data => { this.$store.dispatch('GetMenu', item.id).then(data => {
console.log('data=================',data) console.log('data=================', data)
console.log('item.id--------------------',item.id) console.log('item.id--------------------', item.id)
if (data.length !== 0) { if (data.length !== 0) {
this.$router.$avueRouter.formatRoutes(data, true); this.$router.$avueRouter.formatRoutes(data, true);
} }
@ -156,7 +157,11 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.styleRadio{ .avue-sidebar {
margin-right: 8px !important; overflow: auto;
} }
.styleRadio {
margin-right: 8px !important;
}
</style> </style>

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

@ -33,7 +33,7 @@ export default {
font-size: 20px; font-size: 20px;
background-image: linear-gradient(120deg, #54b6d0 16%, #3f8bdb, #2c77f1); background-image: linear-gradient(120deg, #54b6d0 16%, #3f8bdb, #2c77f1);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; /* -webkit-text-fill-color: transparent; */
font-weight: 700; font-weight: 700;
padding-left: 30px; padding-left: 30px;
} }

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

@ -3,7 +3,7 @@
<el-drawer append-to-body :with-header="false" v-model="show" size="30%"> <el-drawer append-to-body :with-header="false" v-model="show" size="30%">
<div class="setting"> <div class="setting">
<h5>菜单风格</h5> <h5>菜单风格</h5>
<el-radio-group v-model="setting.styleRadio"> <el-radio-group v-model="setting.styleRadio" @change="styleRadioChange">
<el-radio value="1">默认</el-radio> <el-radio value="1">默认</el-radio>
<el-radio value="2">风格一</el-radio> <el-radio value="2">风格一</el-radio>
<el-radio value="3">风格二</el-radio> <el-radio value="3">风格二</el-radio>
@ -17,7 +17,7 @@
<div @click="setting.sidebar = 'horizontal'" class="setting-checkbox-item setting-checkbox-item--top"></div> <div @click="setting.sidebar = 'horizontal'" class="setting-checkbox-item setting-checkbox-item--top"></div>
</el-tooltip> </el-tooltip>
</div> --> </div> -->
<h5>页面布局</h5> <!-- <h5>页面布局</h5>
<div class="setting-checkbox"> <div class="setting-checkbox">
<div class="setting-item" v-for="(item, index) in list1" :key="index"> <div class="setting-item" v-for="(item, index) in list1" :key="index">
{{ item.label }}: {{ item.label }}:
@ -30,13 +30,14 @@
{{ item.label }}: {{ item.label }}:
<el-switch v-model="setting[item.value]"></el-switch> <el-switch v-model="setting[item.value]"></el-switch>
</div> </div>
</div> </div> -->
</div> </div>
</el-drawer> </el-drawer>
</template> </template>
<script> <script>
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import { setTheme } from 'utils/util';
export default { export default {
data() { data() {
@ -81,8 +82,42 @@ export default {
}; };
}, },
computed: { computed: {
...mapGetters(['isHorizontal', 'setting']), ...mapGetters(['isHorizontal', 'setting', 'tagWel', 'themeName']),
},
watch: {
setting: function (val) {
if (setting.styleRadio == '3') {
this.$store.commit('SET_THEME_NAME', 'theme-white');
setTheme('theme-white');
if (this.$store.getters.isMacOs) {
this.$router.push(this.tagWel);
setTimeout(() => location.reload());
}
}
},
}, },
methods: {
styleRadioChange(val) {
console.log(9999, val)
if (val == '3') {
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);
setTimeout(() => location.reload());
}
}
}
}
}; };
</script> </script>

46
src/page/index/sidebar/leftMenu.vue
Unescape View File

@ -1,11 +1,14 @@
<template> <template>
<div class="menu_flex"> <div class="menu_flex">
<div class="first_menu"> <div class="first_menu">
<div class="menu_item" v-for="(item, index) in newMneu" :class="item.activeMenu == true ? 'xz_bg' : ''" <div class="first_menu_bg">
<div class="menu_item" v-for="(item, index) in newMneu" :class="item.activeMenu == true ? 'xz_bg' : ''"
@click="slectMenu(item, index)" :title="item.name"> @click="slectMenu(item, index)" :title="item.name">
<span><i :class="item.source"></i></span> <span><i :class="item.source"></i></span>
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</div> </div>
</div>
</div> </div>
<div class="second_menu"> <div class="second_menu">
<transition name="fade"> <transition name="fade">
@ -32,7 +35,7 @@
popper-style="visibility: visible;width:auto;border:none;  transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;"> popper-style="visibility: visible;width:auto;border:none;  transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;">
<template #reference> <template #reference>
<span class="right_menu_item_box second_title" @click='open(item)' <span class="right_menu_item_box second_title" @click='open(item)'
style="display:block;height: 60px;line-height: 60px;padding-left: 12px;"> style="display:block;height: 50px;line-height: 50px;padding-left: 12px;">
<div>{{ v.name }} <div>{{ v.name }}
<el-icon> <el-icon>
<ArrowRight /> <ArrowRight />
@ -43,7 +46,7 @@
<template #default v-if="v.children && v.children.length != 0"> <template #default v-if="v.children && v.children.length != 0">
<div class="third_box" v-if="v.children && v.children.length != 0"> <div class="third_box" v-if="v.children && v.children.length != 0">
<div class="third_box_item second_title" v-for="third in v.children" :key="third.id" <div class="third_box_item second_title" v-for="third in v.children" :key="third.id"
style="display:block;height: 60px;line-height: 60px;padding-left: 12px;" @click='open(third)'> style="display:block;height: 40px;line-height: 40px;padding-left: 12px;" @click='open(third)'>
{{ third.name }} {{ third.name }}
</div> </div>
</div> </div>
@ -131,7 +134,6 @@ const open = (item) => {
} }
onMounted(() => { onMounted(() => {
console.log(22222,store.getters.setting.styleRadio)
initMenu() initMenu()
}) })
</script> </script>
@ -143,14 +145,19 @@ onMounted(() => {
.first_menu { .first_menu {
width: 75px; width: 75px;
background: #2c77f1; background: url(@/assets/menu_bg.jpg) no-repeat center;
background-size: auto 100%;
min-height: 100%; min-height: 100%;
overflow: auto; overflow: auto;
padding-top: 60px;
box-shadow: none; box-shadow: none;
border-radius: 0px 60px 0px 0px; border-radius: 0px 60px 0px 0px;
color: rgb(190, 194, 201); color: rgb(190, 194, 201);
.first_menu_bg{
padding-top: 60px;
background: url(@/assets/menu_bg.svg) no-repeat center;
background-size: 100% 100%;
}
.menu_item { .menu_item {
width: 100%; width: 100%;
height: 68px; height: 68px;
@ -225,7 +232,7 @@ onMounted(() => {
text-align: center; text-align: center;
color: rgb(102, 102, 102); color: rgb(102, 102, 102);
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 550;
line-height: 25px; line-height: 25px;
margin-top: 18px; margin-top: 18px;
position: relative; position: relative;
@ -257,18 +264,18 @@ onMounted(() => {
color: rgb(102, 102, 102); color: rgb(102, 102, 102);
.second_title { .second_title {
height: 60px; height: 50px;
line-height: 60px; line-height: 50px;
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 14px;
color: rgb(102, 102, 102); color: rgb(102, 102, 102);
} }
.second_ch { .second_ch {
height: 60px; height: 40px;
line-height: 60px; line-height: 40px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@ -279,10 +286,10 @@ onMounted(() => {
} }
.three_menu { .three_menu {
height: 60px; height: 40px;
line-height: 60px; line-height: 40px;
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 14px;
color: rgb(102, 102, 102); color: rgb(102, 102, 102);
text-align: center; text-align: center;
} }
@ -317,5 +324,12 @@ onMounted(() => {
} }
} }
.third_box{
background: #000;
}
}
:deep(.iconfont ){
font-size: 20px;
} }
</style> </style>

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

@ -17,9 +17,9 @@
<!-- <div v-if="setting.color" class="top-bar__item"> <!-- <div v-if="setting.color" class="top-bar__item">
<top-color></top-color> <top-color></top-color>
</div> --> </div> -->
<div v-if="setting.theme" class="top-bar__item"> <!-- <div v-if="setting.theme" class="top-bar__item">
<top-theme></top-theme> <top-theme></top-theme>
</div> </div> -->
<!-- <div v-if="setting.lock" class="top-bar__item"> <!-- <div v-if="setting.lock" class="top-bar__item">
<top-lock></top-lock> <top-lock></top-lock>
</div> --> </div> -->

Write Preview
Loading…
Cancel
Save