kubbo/buy-lite
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

调整整体布局

Browse Source
This commit is contained in:
kubbo
2023-01-17 21:58:53 +08:00
parent 3adc06a275
commit b7b95527e4
3 changed files with 45 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/App.vue
View File

@@ -103,4 +103,8 @@ body {
color: #999; color: #999;
} }
.h100 {
height: 100%;
}
</style> </style>

44
web/src/components/sliderNav.vue
View File

@@ -1,16 +1,19 @@
<template> <template>
<section class="sliderNav"> <section class="sliderNav flex column">
<div class="item" v-for="menu in menus" :key="menu.id"> <b class="mar-v16" v-text="$sys.title"/>
<el-row class="pad-w10" align="middle" @click="menu.expand=!menu.expand"> <div class="fill">
<i class="iconfont icon-shujuqingxi"/> <div class="item" v-for="menu in menus" :key="menu.id">
<div class="fill" v-text="menu.label"/> <el-row class="pad-h8" align="middle" @click="menu.expand=!menu.expand">
<el-icon :size="20"> <i class="iconfont icon-shujuqingxi"/>
<component :is="arrow(menu.expand)"/> <div class="fill" v-text="menu.label"/>
</el-icon> <el-icon :size="20">
</el-row> <component :is="arrow(menu.expand)"/>
<template v-if="menu.expand"> </el-icon>
<div class="app" v-for="app in menu.children" :key="app.id" v-text="app.label" :class="{active:app.id==12}"/> </el-row>
</template> <template v-if="menu.expand">
<div class="app" v-for="app in menu.children" :key="app.id" v-text="app.label" :class="{active:app.id==12}"/>
</template>
</div>
</div> </div>
</section> </section>
</template> </template>
@@ -53,11 +56,17 @@ export default {
.sliderNav { .sliderNav {
width: 200px; width: 200px;
flex-shrink: 0; flex-shrink: 0;
background: var(--background-color); background: #222;
font-family: PingFang SC-Regular, PingFang SC; color: #fff;
& > b {
font-size: 18px;
line-height: 32px;
text-align: center;
}
.item { .item {
color: var(--el-color-primary); color: rgba(#fff, .8);
margin-bottom: 20px; margin-bottom: 20px;
line-height: 50px; line-height: 50px;
cursor: pointer; cursor: pointer;
@@ -65,12 +74,15 @@ export default {
.fill { .fill {
margin-left: 12px; margin-left: 12px;
} }
&:hover {
color: #ffffff;
}
} }
.app { .app {
padding-left: 28px; padding-left: 28px;
cursor: pointer; cursor: pointer;
margin: 0 10px 0;
&:hover { &:hover {
color: rgba(#fff, .8); color: rgba(#fff, .8);

32
web/src/views/home.vue
View File

@@ -1,15 +1,14 @@
<template> <template>
<section class="home"> <el-row class="home">
<div class="headerNav flex center pad-h32"> <slider-nav v-if="system"/>
<b class="mar-r32" v-text="$sys.title"/> <div class="fill h100 flex column">
<el-row class="fill"/> <div class="headerNav flex center pad-h32">
<el-row align="middle" class="right"> <el-row class="fill"/>
<el-avatar class="mar-r8" :src="user.avatar">游客</el-avatar> <el-row align="middle" class="right">
{{ user.name || "游客" }}，欢迎您！ <el-avatar class="mar-r8" :src="user.avatar">游客</el-avatar>
</el-row> {{ user.name || "游客" }}，欢迎您！
</div> </el-row>
<el-row> </div>
<slider-nav v-if="system"/>
<div class="mainContent fill"> <div class="mainContent fill">
<div v-if="$route.name=='工作台'" class="default fill"> <div v-if="$route.name=='工作台'" class="default fill">
<div>欢迎来到{{ $sys.title }}</div> <div>欢迎来到{{ $sys.title }}</div>
@@ -28,8 +27,8 @@
</template> </template>
<div class="copyright sub" v-text="`copyright @2022 ${$sys.title}`"/> <div class="copyright sub" v-text="`copyright @2022 ${$sys.title}`"/>
</div> </div>
</el-row> </div>
</section> </el-row>
</template> </template>
<script> <script>
@@ -61,16 +60,11 @@ export default {
background: var(--background-color); background: var(--background-color);
.headerNav { .headerNav {
width: 100vw;
height: 60px; height: 60px;
color: #fff; color: #fff;
background: var(--el-color-primary); background: linear-gradient(90deg, #299FFF 0%, #0C61FF 100%);
box-sizing: border-box; box-sizing: border-box;
& > b {
font-size: 18px;
}
.right { .right {
line-height: 24px; line-height: 24px;
} }