向文可
4 years ago
parent
444562e794
commit
170d05b005
@ -1,9 +1,32 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<el-config-provider
|
||||||
<router-view />
|
:locale="config.locale"
|
||||||
</div>
|
:size="config.size"
|
||||||
|
:z-index="config.zIndex"
|
||||||
|
:button="config.button"
|
||||||
|
:message="config.message"
|
||||||
|
>
|
||||||
|
<LayoutDefault />
|
||||||
|
</el-config-provider>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup></script>
|
<script setup>
|
||||||
|
import LayoutDefault from '@/layouts/default.vue';
|
||||||
|
|
||||||
<style lang="less"></style>
|
import zh from 'element-plus/lib/locale/lang/zh-cn';
|
||||||
|
const config = reactive({
|
||||||
|
locale: zh,
|
||||||
|
size: 'small',
|
||||||
|
zIndex: 300,
|
||||||
|
button: {
|
||||||
|
autoInsertSpace: true,
|
||||||
|
},
|
||||||
|
message: {
|
||||||
|
max: 5,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
@import url('@/styles/base.less');
|
||||||
|
</style>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 9.0 KiB |
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,60 @@
|
|||||||
|
<template>
|
||||||
|
<el-scrollbar class="layout-aside">
|
||||||
|
<el-menu collapse>
|
||||||
|
<el-menu-item v-for="(item, index) in handleRoutes" :key="index" :index="item.name">
|
||||||
|
<XIcon :name="item.meta.icon" size="30" />
|
||||||
|
<p>{{ item.meta.title }}</p>
|
||||||
|
</el-menu-item>
|
||||||
|
</el-menu>
|
||||||
|
</el-scrollbar>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import routes from '@/router/route.json';
|
||||||
|
const handleRoutes = computed(() => routes);
|
||||||
|
const handleClick = () => {};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.layout-aside {
|
||||||
|
flex: 1;
|
||||||
|
width: @layout-aside-width;
|
||||||
|
height: 100%;
|
||||||
|
background-color: @color-black;
|
||||||
|
:deep(.el-scrollbar__view) {
|
||||||
|
height: 100%;
|
||||||
|
.el-menu {
|
||||||
|
--el-menu-bg-color: transparent;
|
||||||
|
--el-menu-text-color: @layout-aside-fc;
|
||||||
|
--el-menu-item-height: @layout-aside-item-size;
|
||||||
|
--el-menu-hover-bg-color: @layout-aside-fc2;
|
||||||
|
border-right: none;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
.el-menu-item {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 !important;
|
||||||
|
border-radius: @layout-border-radius;
|
||||||
|
width: @layout-aside-item-size;
|
||||||
|
.x-icon {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
P {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
&.is-active {
|
||||||
|
background-color: var(--el-menu-active-color);
|
||||||
|
color: @layout-aside-fc;
|
||||||
|
}
|
||||||
|
+ .el-menu-item {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
<template>
|
||||||
|
<div class="layout-logo">
|
||||||
|
<XIcon name="msb" svg :size="size" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import variables from '@/styles/globalVariables.module.less';
|
||||||
|
const size = variables.layoutLogoSize;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.layout-logo {
|
||||||
|
width: @layout-aside-width;
|
||||||
|
height: @layout-aside-width;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: @color-black;
|
||||||
|
.x-icon {
|
||||||
|
border-radius: @layout-border-radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
<template>
|
||||||
|
<el-scrollbar class="layout-main">
|
||||||
|
<router-view v-slot="{ Component }">
|
||||||
|
<transition mode="out-in" name="fade-transform">
|
||||||
|
<keep-alive>
|
||||||
|
<component :is="Component" />
|
||||||
|
</keep-alive>
|
||||||
|
</transition>
|
||||||
|
</router-view>
|
||||||
|
</el-scrollbar>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup></script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.layout-main {
|
||||||
|
:deep(.el-scrollbar__view) {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
> * {
|
||||||
|
display: inline-block; // 创建BFC
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
<template>
|
||||||
|
<el-menu-item v-if="!menuItem.children?.length" :index="props.menuItem.name">
|
||||||
|
<XIcon :name="props.menuItem.meta.icon" size="20" />
|
||||||
|
<p>{{ props.menuItem.meta.title }}</p>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-sub-menu v-else>
|
||||||
|
<template #title>
|
||||||
|
<XIcon :name="props.menuItem.meta.icon" size="20" />
|
||||||
|
<p>{{ props.menuItem.meta.title }}</p>
|
||||||
|
</template>
|
||||||
|
<MenuItem v-for="(item, index) in menuItem.children" :key="index" :menu-item="item" />
|
||||||
|
</el-sub-menu>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const props = defineProps({
|
||||||
|
menuItem: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.x-icon {
|
||||||
|
width: @layout-icon;
|
||||||
|
color: @layout-menu-ic;
|
||||||
|
}
|
||||||
|
.el-menu-item {
|
||||||
|
width: 100%;
|
||||||
|
min-width: unset;
|
||||||
|
border-radius: @layout-border-radius;
|
||||||
|
&:hover {
|
||||||
|
color: @layout-menu-hover-fc;
|
||||||
|
}
|
||||||
|
&.is-active {
|
||||||
|
background-color: @layout-menu-active-bgc;
|
||||||
|
color: @layout-menu-active-fc;
|
||||||
|
}
|
||||||
|
+ .el-menu-item {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-sub-menu {
|
||||||
|
border-radius: @layout-border-radius;
|
||||||
|
&.is-opened {
|
||||||
|
background-color: @color-ghost-black;
|
||||||
|
:deep(.el-sub-menu__title) {
|
||||||
|
background-color: @layout-menu-active-bgc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.el-sub-menu__title) {
|
||||||
|
border-radius: @layout-border-radius;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
+ .el-menu-item {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
:deep(.el-menu) {
|
||||||
|
padding: 0 !important;
|
||||||
|
border-radius: @layout-border-radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
<template>
|
||||||
|
<el-scrollbar class="layout-menu">
|
||||||
|
<div class="title">马士兵严选后台管理平台</div>
|
||||||
|
<el-divider>test</el-divider>
|
||||||
|
<el-menu>
|
||||||
|
<MenuItem v-for="(item, index) in handleRoutes" :key="index" :menu-item="item" />
|
||||||
|
</el-menu>
|
||||||
|
</el-scrollbar>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import routes from '@/router/route.json';
|
||||||
|
import MenuItem from './menu-item.vue';
|
||||||
|
const handleRoutes = computed(() => routes[2].children);
|
||||||
|
const handleClick = () => {};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.layout-menu {
|
||||||
|
flex: 1;
|
||||||
|
width: @layout-menu-width;
|
||||||
|
height: 100%;
|
||||||
|
background-color: @layout-menu-bgc;
|
||||||
|
box-shadow: @layout-shadow;
|
||||||
|
padding: 0 @layout-space;
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
height: @layout-header-height;
|
||||||
|
line-height: @layout-header-height;
|
||||||
|
font-size: @layout-h2;
|
||||||
|
color: @layout-menu-active-fc;
|
||||||
|
text-align: center;
|
||||||
|
.text-overflow();
|
||||||
|
}
|
||||||
|
.el-divider {
|
||||||
|
margin: @layout-space-small 0 @layout-space-large 0;
|
||||||
|
border-color: @layout-menu-hover-fc;
|
||||||
|
:deep(.el-divider__text) {
|
||||||
|
color: @layout-menu-active-fc;
|
||||||
|
background-color: @layout-menu-bgc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.el-scrollbar__view) {
|
||||||
|
height: 100%;
|
||||||
|
.el-menu {
|
||||||
|
--el-menu-bg-color: transparent;
|
||||||
|
--el-menu-text-color: @layout-menu-fc;
|
||||||
|
--el-menu-hover-bg-color: @layout-menu-hover-bgc;
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
<template>
|
||||||
|
<div class="layout-container layout-default">
|
||||||
|
<div class="layout-left">
|
||||||
|
<LayoutLogo />
|
||||||
|
<LayoutAside />
|
||||||
|
</div>
|
||||||
|
<div class="layout-center">
|
||||||
|
<LayoutMenu />
|
||||||
|
</div>
|
||||||
|
<div class="layout-right">
|
||||||
|
<div class="layout-header"></div>
|
||||||
|
<LayoutMain />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import LayoutMain from './components/main.vue';
|
||||||
|
import LayoutLogo from './components/logo.vue';
|
||||||
|
import LayoutAside from './components/aside.vue';
|
||||||
|
import LayoutMenu from './components/menu.vue';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.layout-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.layout-default {
|
||||||
|
display: flex;
|
||||||
|
.layout-left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-shadow: @layout-shadow;
|
||||||
|
}
|
||||||
|
.layout-right {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,13 @@
|
|||||||
|
html,
|
||||||
|
body,
|
||||||
|
#app {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
// *:not([class^='el-']):not([class^='el-'] *) {
|
||||||
|
*:not([class^='el-']) {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
transition: all 0.1s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
/* color */
|
||||||
|
@color-black: #282c34;
|
||||||
|
@color-white: #fff;
|
||||||
|
@color-primary: #409eff;
|
||||||
|
@color-primary-white: #e8f4ff;
|
||||||
|
|
||||||
|
@color-ghost-white: fade(@color-white, 10%);
|
||||||
|
@color-ghost-black: fade(@color-black, 10%);
|
||||||
|
|
||||||
|
/* mixin */
|
||||||
|
.text-overflow {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* layout */
|
||||||
|
@layout-icon: 30px;
|
||||||
|
@layout-h1: 30px;
|
||||||
|
@layout-h2: 20px;
|
||||||
|
@layout-h3: 16px;
|
||||||
|
@layout-h4: 14px;
|
||||||
|
@layout-border-radius: 5px;
|
||||||
|
@layout-space: 10px;
|
||||||
|
@layout-space-small: 5px;
|
||||||
|
@layout-space-large: 15px;
|
||||||
|
@layout-space-super: 20px;
|
||||||
|
@layout-shadow: fade(@color-black, 20%) 0px 0px 5px;
|
||||||
|
|
||||||
|
@layout-aside-bgc: @color-black;
|
||||||
|
@layout-aside-fc: @color-white;
|
||||||
|
@layout-aside-fc2: lighten(@color-black, 20%);
|
||||||
|
@layout-aside-width: 80px;
|
||||||
|
@layout-aside-item-size: 68px;
|
||||||
|
|
||||||
|
@layout-menu-width: 200px;
|
||||||
|
@layout-menu-bgc: lighten(@color-black, 20%);
|
||||||
|
@layout-menu-fc: darken(@color-white, 20%);
|
||||||
|
@layout-menu-ic: darken(@color-white, 20%);
|
||||||
|
@layout-menu-hover-bgc: lighten(@color-black, 25%);
|
||||||
|
@layout-menu-hover-fc: darken(@color-white, 10%);
|
||||||
|
@layout-menu-active-fc: @color-white;
|
||||||
|
@layout-menu-active-bgc: lighten(@color-black, 35%);
|
||||||
|
|
||||||
|
@layout-header-height: 68px;
|
||||||
|
|
||||||
|
:export {
|
||||||
|
layoutAsideWidth: @layout-aside-width;
|
||||||
|
layoutLogoSize: calc(@layout-aside-item-size * 0.8);
|
||||||
|
}
|
||||||
Loading…
Reference in new issue