向文可
4 years ago
parent
444562e794
commit
170d05b005
@ -1,9 +1,32 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
</div>
|
||||
<el-config-provider
|
||||
:locale="config.locale"
|
||||
:size="config.size"
|
||||
:z-index="config.zIndex"
|
||||
:button="config.button"
|
||||
:message="config.message"
|
||||
>
|
||||
<LayoutDefault />
|
||||
</el-config-provider>
|
||||
</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