simple321vip/violin-home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改 sidebar 样式

Browse Source
This commit is contained in:
simple321vip
2023-01-28 19:43:46 +08:00
parent 67eaa3ad40
commit 99a6cbe52d
8 changed files with 1731 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+1555 -43
View File
File diff suppressed because it is too large Load Diff
package.json
+7 -2
View File
@@ -12,8 +12,8 @@
"dependencies": {
"@element-plus/icons-vue": "^1.1.4",
"@types/node": "^17.0.23",
"axios": "^0.26.1",
"aplayer": "^1.10.1",
"axios": "^0.26.1",
"clipboard": "^2.0.10",
"copy-to-clipboard": "^3.3.1",
"echarts": "^5.3.2",
@@ -24,9 +24,14 @@
"lodash-unified": "^1.0.2",
"md-editor-v3": "^1.11.6",
"moment": "^2.29.4",
"node-sass": "^8.0.0",
"pinia": "^2.0.13",
"qs": "^6.10.3",
"sass": "^1.57.1",
"sass-loader": "^13.2.0",
"save": "^2.4.0",
"scss": "^0.2.4",
"style-loader": "^3.3.1",
"type-fest": "^2.12.2",
"vue": "^3.2.25",
"vue-router": "^4.0.14",
@@ -40,10 +45,10 @@
"@vitejs/plugin-vue": "^2.3.0",
"mockjs": "^1.1.0",
"typescript": "^4.5.4",
"v-contextmenu": "^3.0.0",
"vite": "^2.9.13",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-mock": "^2.9.6",
"v-contextmenu": "^3.0.0",
"vue-tsc": "^0.29.8"
}
}
src/components/layout/Layout.vue
+40 -35
View File
@@ -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;
src/components/layout/MainApp.vue
+5 -1
View File
@@ -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>
src/components/layout/SideBar.vue
+104 -9
View File
@@ -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;
} */
src/entity/index.ts
+10 -1
View File
@@ -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 }
src/style/mixin.scss
+1
View File
@@ -0,0 +1 @@
$color: red;
vite.config.ts
+9 -1
View File
@@ -17,6 +17,12 @@ export default defineConfig(({ mode }) => {
localEnabled: true,
}),
],
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: []
}
},
base: env.VITE_RES_URL,
resolve: {
alias: {
@@ -25,7 +31,9 @@ export default defineConfig(({ mode }) => {
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/style/mixin.scss";`
}
}
}
}