修改 sidebar 样式
This commit is contained in:
simple321vip
@@ -1,12 +1,11 @@
|
||||
<template>
|
||||
<div class="4444">
|
||||
<div>
|
||||
<el-container>
|
||||
<el-aside width="150px">
|
||||
<el-aside width="180px">
|
||||
<SideBar></SideBar>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-header
|
||||
style="border-bottom-style:solid; border-bottom-width: 0.5px; border-bottom-color:rgba(151, 151, 151, 0.3);">
|
||||
<el-header>
|
||||
<NavBar></NavBar>
|
||||
</el-header>
|
||||
<el-main>
|
||||
@@ -20,7 +19,6 @@
|
||||
<div>
|
||||
<el-avatar @click="openGithub" src="https://github.githubassets.com/favicons/favicon.svg" />
|
||||
</div>
|
||||
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</el-container>
|
||||
@@ -31,6 +29,32 @@
|
||||
import MainApp from '../layout/MainApp.vue'
|
||||
import NavBar from "../layout/NavBar.vue"
|
||||
import SideBar from "../layout/SideBar.vue"
|
||||
import { settingsStore } from "@/store/modules/settings"
|
||||
|
||||
// -- IMPORT --
|
||||
const useSettingsStore = settingsStore()
|
||||
|
||||
// -- REACTIVE OBJECT --
|
||||
|
||||
// -- REF OBJECT --
|
||||
|
||||
// -- EVENT DEFINITION
|
||||
const iniPage = () => {
|
||||
const screenWidth = document.body.clientWidth
|
||||
if (screenWidth < 1000) {
|
||||
useSettingsStore.settings.isMobile = true
|
||||
// isSider.value = false
|
||||
// isCollaps.value = true
|
||||
} else if (screenWidth >= 1000 && screenWidth < 1200) {
|
||||
useSettingsStore.settings.isMobile = false
|
||||
// isSider.value = false
|
||||
// isCollaps.value = true
|
||||
} else {
|
||||
useSettingsStore.settings.isMobile = false
|
||||
// isSider.value = true
|
||||
// isCollaps.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const openGithub = () => {
|
||||
let href = 'https://github.com/simple321vip'
|
||||
@@ -42,47 +66,28 @@ const openSiteQuery = () => {
|
||||
window.open(href, '_blank')
|
||||
}
|
||||
|
||||
/**
|
||||
* AUTO INVOKE FUNCTION
|
||||
*/
|
||||
iniPage()
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* .el-header,
|
||||
.el-footer {
|
||||
|
||||
color: rgb(51, 51, 51);
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
} */
|
||||
/*
|
||||
|
||||
|
||||
.el-aside {
|
||||
background-color: #e9eef3;
|
||||
color: #333;
|
||||
text-align: left;
|
||||
line-height: 200px;
|
||||
.el-header {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 0.5px;
|
||||
border-bottom-color: rgba(151, 151, 151, 0.3);
|
||||
}
|
||||
|
||||
.el-main {
|
||||
background-color: #e9eef3;
|
||||
color: #333;
|
||||
/* line-height: 450px; */
|
||||
/* vertical-align: top;
|
||||
padding: 5px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
body > .el-container {
|
||||
margin-bottom: 40px;
|
||||
.el-aside {
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.el-container:nth-child(5) .el-aside,
|
||||
.el-container:nth-child(6) .el-aside {
|
||||
line-height: 260px;
|
||||
}
|
||||
|
||||
.el-container:nth-child(7) .el-aside {
|
||||
line-height: 320px;
|
||||
} */
|
||||
.el-footer {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<section class="section-main" style="height:100%;">
|
||||
<section class="section-main">
|
||||
<router-view />
|
||||
</section>
|
||||
</template>
|
||||
@@ -8,4 +8,8 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.section-main {
|
||||
height: 100%;
|
||||
padding: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,27 +1,113 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-menu router class="side_Style" :style="{ height: sideHeight }">
|
||||
<el-menu-item v-for="(route, index) in current_routes" v-bind:key="index" v-bind:index="route.path"
|
||||
v-bind:title="route.meta?.name">{{ route.meta?.name }}</el-menu-item>
|
||||
<el-menu router class="el-menu-vertical" :style="{ height: sideHeight }" :background-color="theme.background"
|
||||
:active-text-color="theme?.background">
|
||||
|
||||
<el-menu-item v-for="(route, index) in current_routes" :key="index" :index="route.path" :title="route.meta?.name"
|
||||
@click="onclick()">
|
||||
<template #title>
|
||||
<div class="gva-menu-item">
|
||||
<el-icon v-if="index == 0" :size="20">
|
||||
<Sunny />
|
||||
</el-icon>
|
||||
<el-icon v-if="index == 1" :size="20">
|
||||
<EditPen />
|
||||
</el-icon>
|
||||
<el-icon v-if="index == 2" :size="20">
|
||||
<Star />
|
||||
</el-icon>
|
||||
<el-icon v-if="index == 3" :size="20">
|
||||
<Notebook />
|
||||
</el-icon>
|
||||
<el-icon v-if="index == 4" :size="20">
|
||||
<Calendar />
|
||||
</el-icon>
|
||||
<el-icon v-if="index == 5" :size="20">
|
||||
<MostlyCloudy />
|
||||
</el-icon>
|
||||
<el-icon v-if="index == 10" :size="20">
|
||||
<Setting />
|
||||
</el-icon>
|
||||
<span>{{ route.meta?.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { RouteRecordRaw } from "vue-router";
|
||||
// import { store } from "../../store/index";
|
||||
import router from "../../router/index";
|
||||
import { onBeforeMount, ref } from 'vue';
|
||||
let current_routes = router.options.routes[0].children;
|
||||
import { onBeforeMount, ref } from 'vue'
|
||||
import router from "@/router/index"
|
||||
import { settingsStore } from "@/store/modules/settings"
|
||||
import { Theme } from "@/entity/index";
|
||||
|
||||
// -- IMPORT --
|
||||
const useSettingsStore = settingsStore()
|
||||
|
||||
// -- REACTIVE OBJECT --
|
||||
|
||||
// -- REF OBJECT --
|
||||
let sideHeight = ref("")
|
||||
|
||||
let current_routes = router.options.routes[0].children
|
||||
const theme = ref<Theme>({
|
||||
background: '#fff',
|
||||
activeBackground: '#4D70FF',
|
||||
activeText: '#fff',
|
||||
normalText: '#333',
|
||||
hoverBackground: 'rgba(64, 158, 255, 0.08)',
|
||||
hoverText: '#333'
|
||||
})
|
||||
|
||||
// -- EVENT DEFINITION
|
||||
const onclick = () => {
|
||||
activeBackground.value = '#4D70FF'
|
||||
}
|
||||
|
||||
const getTheme = () => {
|
||||
switch (useSettingsStore.sideMode) {
|
||||
// white color
|
||||
case '#fff':
|
||||
theme.value = {
|
||||
background: '#fff',
|
||||
activeBackground: '#4D70FF',
|
||||
activeText: '#fff',
|
||||
normalText: '#333',
|
||||
hoverBackground: 'rgba(64, 158, 255, 0.08)',
|
||||
hoverText: '#333',
|
||||
}
|
||||
break;
|
||||
|
||||
// black color
|
||||
case '#191a23':
|
||||
theme.value = {
|
||||
background: '#191a23',
|
||||
activeBackground: '#4D70FF',
|
||||
activeText: '#fff',
|
||||
normalText: '#fff',
|
||||
hoverBackground: 'rgba(64, 158, 255, 0.08)',
|
||||
hoverText: '#fff',
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* AUTO INVOKE FUNCTION
|
||||
*/
|
||||
getTheme()
|
||||
|
||||
onBeforeMount(() => {
|
||||
sideHeight.value = window.innerHeight + 'px'
|
||||
})
|
||||
const activeBackground = ref(theme.value.activeBackground)
|
||||
onclick()
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss" scoped>
|
||||
.side_Style {
|
||||
width: 100px;
|
||||
}
|
||||
@@ -30,6 +116,15 @@ onBeforeMount(() => {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.gva-menu-item {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
color: v-bind(activeBackground);
|
||||
background: v-bind(activeBackground);
|
||||
}
|
||||
|
||||
/* .el-menu-item {
|
||||
background-color: #01dfd7;
|
||||
} */
|
||||
|
||||
+10
-1
@@ -3,4 +3,13 @@ type Tenant = {
|
||||
account: string
|
||||
}
|
||||
|
||||
export { Tenant }
|
||||
type Theme = {
|
||||
background: string,
|
||||
activeBackground: string,
|
||||
activeText: string,
|
||||
normalText: string,
|
||||
hoverBackground: string,
|
||||
hoverText: string,
|
||||
}
|
||||
|
||||
export { Tenant, Theme }
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
$color: red;
|
||||
Reference in New Issue
Block a user