xiaoy
/
wxjt-asset-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

界面

Browse Source
master
xy 2 years ago
parent 701ba78fdf
commit fcdc5e2747
14 changed files with 348 additions and 211 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/logo1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
src/assets/navbar-bkg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

20
src/layout/components/AppMain.vue
Unescape View File

@ -19,16 +19,28 @@ export default {
} }
</script> </script>
<style>
.app-main-scroll {
width: calc(100% - 30px * 2);
height: calc(100vh - var(--navbar-height) - 20px - 20px);
margin-top: calc(var(--navbar-height) + 20px);
margin-left: 30px;
}
</style>
<style scoped> <style scoped>
.app-main { .app-main {
/*50 = navbar */ /*50 = navbar */
min-height: calc(100vh - 50px); border-radius: 6px;
width: 100%; max-height: calc(100vh - var(--navbar-height) - 20px - 20px);
width: calc(100% - 30px * 2);
z-index: 10;
margin: calc(var(--navbar-height) + 20px) auto 0;
position: relative; position: relative;
overflow: hidden; overflow: scroll;
padding: 20px;
} }
.fixed-header+.app-main { .fixed-header+.app-main {
padding: 50px 20px 20px 20px;
} }
</style> </style>

89
src/layout/components/Navbar.vue
Unescape View File

@ -1,13 +1,24 @@
<template> <template>
<div class="navbar"> <div class="navbar">
<hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> <img class="navbar-bkg" :src="require('@/assets/navbar-bkg.png')" alt="">
<div class="logo-mini">
<img :src="require('@/assets/logo-mini.png')" alt="">
</div>
<div class="logo">
<img :src="require('@/assets/logo1.png')" alt="">
</div>
<!-- <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />-->
<breadcrumb class="breadcrumb-container" /> <!-- <breadcrumb class="breadcrumb-container" />-->
<div class="right-menu"> <div class="right-menu">
<el-dropdown class="avatar-container" trigger="click"> <el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<el-badge is-dot class="notice">
<i class="el-icon-bell"></i>
</el-badge>
<img src="../../assets/face.jpg" class="user-avatar"> <img src="../../assets/face.jpg" class="user-avatar">
<span>{{ $store.state.user.name }}</span>
<i class="el-icon-caret-bottom" /> <i class="el-icon-caret-bottom" />
</div> </div>
<el-dropdown-menu slot="dropdown" class="user-dropdown"> <el-dropdown-menu slot="dropdown" class="user-dropdown">
@ -62,12 +73,45 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.navbar { .navbar {
height: 50px; height: var(--navbar-height);
overflow: hidden;
position: relative; position: relative;
background: #fff; //background: #fff;
padding: 0 20px;
box-shadow: 0 1px 4px rgba(0, 21, 41, .08); box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
border-bottom: 1px solid #627bd9;
box-sizing: border-box;
&-bkg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
z-index: -1;
object-fit: cover;
}
.logo-mini {
height: 100%;
display: flex;
float: left;
align-items: center;
& > img {
height: 65%;
}
}
.logo {
height: 100%;
display: flex;
float: left;
align-items: center;
margin-left: 23px;
& > img {
height: 32%;
}
}
.hamburger-container { .hamburger-container {
line-height: 46px; line-height: 46px;
height: 100%; height: 100%;
@ -113,28 +157,45 @@
} }
.avatar-container { .avatar-container {
margin-right: 30px; height: 100%;
color: #fff;
.avatar-wrapper { .avatar-wrapper {
margin-top: 5px; height: 100%;
display: flex;
align-items: center;
position: relative; position: relative;
.notice {
display: flex;
align-items: center;
height: 43%;
font-size: 20px;
margin-right: 14px;
}
.user-avatar { .user-avatar {
cursor: pointer; cursor: pointer;
width: 40px; height: 60%;
height: 40px; border-radius: 100%;
border-radius: 10px; }
span {
font-size: 18px;
letter-spacing: 1px;
font-weight: 600;
padding: 0 12px;
} }
.el-icon-caret-bottom { .el-icon-caret-bottom {
cursor: pointer; cursor: pointer;
position: absolute;
right: -20px;
top: 25px;
font-size: 12px;
} }
} }
} }
} }
} }
@media screen and (min-width: 1680px) {
.navbar {
padding: 0 40px;
}
}
</style> </style>

36
src/layout/components/Sidebar/Item.vue
Unescape View File

@ -3,6 +3,10 @@ export default {
name: 'MenuItem', name: 'MenuItem',
functional: true, functional: true,
props: { props: {
pid: {
type: Number,
default: 0
},
icon: { icon: {
type: String, type: String,
default: '' default: ''
@ -13,32 +17,36 @@ export default {
} }
}, },
render(h, context) { render(h, context) {
const { icon, title } = context.props const { icon, title, pid } = context.props
const vnodes = [] const vnodes = []
//解决el-menu-item 中行内样式padding-left为动态计算问题
if (icon) { vnodes.push(<span style="padding-left: 16px;"> </span>)
if (icon.includes('el-icon')) { if (pid === 0) {
vnodes.push(<i class={[icon, 'sub-el-icon']} />) if (icon) {
} if (icon.includes('el-icon')) {
else if(icon.includes("viewicon")){ vnodes.push(<i class={[icon, 'sub-el-icon']} />)
}
else if(icon.includes("viewicon")){
let _icon=icon.split("/")[1]; let _icon=icon.split("/")[1];
vnodes.push(<Icon type={_icon} class='sub-el-icon' size="18" />) vnodes.push(<Icon type={_icon} class='sub-el-icon' size="18" />)
} }
else if(icon.includes("iconfont")){ else if(icon.includes("iconfont")){
let _icon=icon.split("/")[1]; let _icon=icon.split("/")[1];
vnodes.push(<i class={[_icon, 'iconfont','sub-el-icon']} />) vnodes.push(<i class={[_icon, 'iconfont','sub-el-icon']} />)
} }
else { else {
vnodes.push(<svg-icon icon-class={icon}/>) vnodes.push(<svg-icon icon-class={icon}/>)
} }
}else { }else {
var _icon="el-icon-menu"; var _icon="el-icon-menu";
vnodes.push(<i class={[_icon, 'sub-el-icon']} />) vnodes.push(<i class={[_icon, 'sub-el-icon']} />)
} }
}
if (title) { if (title) {
vnodes.push(<span slot='title'>{(title)}</span>) vnodes.push(<span slot='title'>{(title)}</span>)
} }
return vnodes return vnodes
} }
} }

12
src/layout/components/Sidebar/SidebarItem.vue
Unescape View File

@ -4,14 +4,14 @@
v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"> v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)"> <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}"> <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" /> <item :pid="(item.meta && item.meta.pid) ? item.meta.pid : 0" :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
</el-menu-item> </el-menu-item>
</app-link> </app-link>
</template> </template>
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body> <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
<template slot="title"> <template slot="title">
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" /> <item v-if="item.meta" :pid="(item.meta && item.meta.pid) ? item.meta.pid : 0" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
</template> </template>
<sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" <sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child"
:base-path="resolvePath(child.path)" class="nest-menu" /> :base-path="resolvePath(child.path)" class="nest-menu" />
@ -94,11 +94,9 @@
} }
return path.resolve(this.basePath, routePath) return path.resolve(this.basePath, routePath)
} }
} },
} }
</script> </script>
<style> <style scoped>
.el-submenu__title i {
color: #fff !important;
}
</style> </style>

26
src/layout/components/Sidebar/index.vue
Unescape View File

@ -1,7 +1,9 @@
<template> <template>
<div :class="{'has-logo':showLogo}"> <div>
<logo v-if="showLogo" :collapse="isCollapse" /> <Icon class="collapse" type="md-menu" @click.native="toggleSideBar"/>
<!-- <logo v-if="showLogo" :collapse="isCollapse" />-->
<el-scrollbar wrap-class="scrollbar-wrapper"> <el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu <el-menu
:default-active="activeMenu" :default-active="activeMenu"
:collapse="isCollapse" :collapse="isCollapse"
@ -49,6 +51,26 @@ export default {
isCollapse() { isCollapse() {
return !this.sidebar.opened return !this.sidebar.opened
} }
},
methods: {
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
},
} }
} }
</script> </script>
<style scoped lang="scss">
.collapse {
width: 22px;
font-size: 22px;
color: #2052e3;
position: absolute;
right: 14px;
top: 20px;
}
.hideSidebar .collapse {
left: 50%;
transform: translateX(-50%);
}
</style>

4
src/layout/index.vue
Unescape View File

@ -79,12 +79,12 @@ export default {
top: 0; top: 0;
right: 0; right: 0;
z-index: 9; z-index: 9;
width: calc(100% - #{$sideBarWidth}); width: 100%;
transition: width 0.28s; transition: width 0.28s;
} }
.hideSidebar .fixed-header { .hideSidebar .fixed-header {
width: calc(100% - 54px) width: 100%;
} }
.mobile .fixed-header { .mobile .fixed-header {

3
src/store/modules/permission.js
Unescape View File

@ -132,7 +132,7 @@ export function generaMenu(routes, data) {
roles: ['admin'], roles: ['admin'],
params, params,
auths:item.has_auth_node_tags, auths:item.has_auth_node_tags,
pid: item.pid,
icon: item.icon icon: item.icon
} }
}, ] }, ]
@ -153,6 +153,7 @@ export function generaMenu(routes, data) {
meta: { meta: {
title: item.name, title: item.name,
id: item.id, id: item.id,
pid: item.pid,
roles: ['admin'], roles: ['admin'],
auths:item.has_auth_node_tags, auths:item.has_auth_node_tags,
params, params,

2
src/styles/element-ui.scss
Unescape View File

@ -91,5 +91,5 @@
} }
.el-menu-item,.el-submenu__title,.el-table,.el-descriptions,.v-table .el-table__header th,.el-form-item__label,.el-input { .el-menu-item,.el-submenu__title,.el-table,.el-descriptions,.v-table .el-table__header th,.el-form-item__label,.el-input {
font-size: 15px!important; font-size: 16px!important;
} }

6
src/styles/index.scss
Unescape View File

@ -181,8 +181,8 @@ top: 41px !important;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 6px;
height: 8px; height: 6px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
@ -191,7 +191,7 @@ top: 41px !important;
} }
.app-main{ .app-main{
background: #EFF2F9; background: #fff;
} }
#nprogress .bar{ #nprogress .bar{

90
src/styles/sidebar.scss
Unescape View File

@ -1,8 +1,8 @@
#app { #app {
.main-container { .main-container {
min-height: 100%; min-height: 100%;
transition: margin-left .28s; transition: margin-left 0.28s;
overflow: hidden;
margin-left: $sideBarWidth; margin-left: $sideBarWidth;
position: relative; position: relative;
} }
@ -11,20 +11,23 @@
transition: width 0.28s; transition: width 0.28s;
width: $sideBarWidth !important; width: $sideBarWidth !important;
//background-color: $menuBg; //background-color: $menuBg;
background: linear-gradient(180deg, #0284cd, #0077CC); background: #fff;
box-shadow: 1px 1px 15px 0px rgba(17, 76, 157, 0.2); box-shadow: 1px 1px 15px 0px rgba(17, 76, 157, 0.2);
height: 100%; height: 100%;
border-radius: 0 6px 0 0;
position: fixed; position: fixed;
font-size: 0px; font-size: 0px;
top: 0; top: calc(var(--navbar-height) + 20px);
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1001; z-index: 1001;
padding-top: 50px;
overflow: hidden; overflow: hidden;
// reset element-ui css // reset element-ui css
.horizontal-collapse-transition { .horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; transition: 0s width ease-in-out, 0s padding-left ease-in-out,
0s padding-right ease-in-out;
} }
.scrollbar-wrapper { .scrollbar-wrapper {
@ -36,7 +39,7 @@
} }
.el-scrollbar { .el-scrollbar {
height: calc(100% - 100px); height: calc(100% - 100px);
} }
&.has-logo { &.has-logo {
@ -78,22 +81,19 @@
color: $subMenuActiveText !important; color: $subMenuActiveText !important;
} }
} }
.el-submenu .is-active{ .el-submenu .is-active {
// background-color: $menuHover !important; // background-color: $menuHover !important;
} }
.is-active {
//background-color: $menuActiveBg !important;
.is-active{ //border-right: 5px solid $subMenuActiveText !important;
//background-color: $menuActiveBg !important; }
//border-right: 5px solid $subMenuActiveText !important; .is-active > .el-submenu__title {
color: $subMenuActiveText !important;
} }
.is-active>.el-submenu__title {
color: $subMenuActiveText !important;
}
& .nest-menu .el-submenu>.el-submenu__title, & .nest-menu .el-submenu > .el-submenu__title,
& .el-submenu .el-menu-item { & .el-submenu .el-menu-item {
min-width: $sideBarWidth !important; min-width: $sideBarWidth !important;
background-color: $subMenuBg !important; background-color: $subMenuBg !important;
@ -102,15 +102,14 @@
background-color: $subMenuHover !important; background-color: $subMenuHover !important;
color: $subMenuActiveText !important; color: $subMenuActiveText !important;
} }
&.is-active{ &.is-active {
background-color: $submenuActiveBg !important; background-color: $submenuActiveBg !important;
border-right: 5px solid $subMenuActiveText !important; border-right: 5px solid $subMenuActiveText !important;
color: $subMenuActiveText !important; color: $subMenuActiveText !important;
} }
} }
} }
.hideSidebar { .hideSidebar {
.sidebar-container { .sidebar-container {
width: 54px !important; width: 54px !important;
@ -140,7 +139,7 @@
.el-submenu { .el-submenu {
overflow: hidden; overflow: hidden;
&>.el-submenu__title { & > .el-submenu__title {
padding: 0 !important; padding: 0 !important;
.svg-icon { .svg-icon {
@ -159,23 +158,50 @@
.el-menu--collapse { .el-menu--collapse {
.el-submenu { .el-submenu {
&>.el-submenu__title { & > .el-submenu__title {
&>span { & > span {
height: 0; height: 0;
width: 0; width: 0;
overflow: hidden; overflow: hidden;
visibility: hidden; visibility: hidden;
display: inline-block; display: inline-block;
} }
.sub-el-icon {
margin-left: 0!important;
}
} }
} }
} }
.el-menu-item span,el-submenu__title span {
display: none;
}
.el-menu {
.router-link-active::before {
width: calc(100% - 4px);
}
}
} }
.el-menu--collapse .el-menu .el-submenu { .el-menu--collapse .el-menu .el-submenu {
min-width: $sideBarWidth !important; min-width: $sideBarWidth !important;
} }
.el-menu .router-link-active {
position: relative;
&::before {
content: "";
background: #e9edfb;
height: 84%;
width: calc(100% - 12px);
border-radius: 22px 0 0 22px;
position: absolute;
right: 0;
top: calc((100% - 84%) / 2);
}
}
// mobile responsive // mobile responsive
.mobile { .mobile {
.main-container { .main-container {
@ -183,7 +209,7 @@
} }
.sidebar-container { .sidebar-container {
transition: transform .28s; transition: transform 0.28s;
width: $sideBarWidth !important; width: $sideBarWidth !important;
} }
@ -197,7 +223,6 @@
} }
.withoutAnimation { .withoutAnimation {
.main-container, .main-container,
.sidebar-container { .sidebar-container {
transition: none; transition: none;
@ -207,7 +232,7 @@
// when menu collapsed // when menu collapsed
.el-menu--vertical { .el-menu--vertical {
&>.el-menu { & > .el-menu {
.svg-icon { .svg-icon {
margin-right: 16px; margin-right: 16px;
} }
@ -217,7 +242,7 @@
} }
} }
.nest-menu .el-submenu>.el-submenu__title, .nest-menu .el-submenu > .el-submenu__title,
.el-menu-item { .el-menu-item {
&:hover { &:hover {
// you can use $subMenuHover // you can use $subMenuHover
@ -226,10 +251,11 @@
} }
// the scroll bar appears when the subMenu is too long // the scroll bar appears when the subMenu is too long
>.el-menu--popup { > .el-menu--popup {
max-height: 100vh; max-height: 100vh;
overflow-y: auto; overflow-y: auto;
background: #0077CC !important; color: #000;
background: #fff !important;
&::-webkit-scrollbar-track-piece { &::-webkit-scrollbar-track-piece {
background: #d3dce6; background: #d3dce6;
@ -244,6 +270,4 @@
border-radius: 20px; border-radius: 20px;
} }
} }
} }

19
src/styles/variables.scss
Unescape View File

@ -1,17 +1,28 @@
// sidebar // sidebar
$menuText:#ffffff; $menuText:#000;
$menuActiveText:#ffffff; $menuActiveText:#2052e3;
$subMenuActiveText:#ffffff; //https://github.com/ElemeFE/element/issues/12951 $subMenuActiveText:#2052e3; //https://github.com/ElemeFE/element/issues/12951
$menuBg:rgb(255, 255, 255,0);//#304156 $menuBg:rgb(255, 255, 255,0);//#304156
$menuHover:rgba(242, 242, 242, .4); $menuHover:rgba(242, 242, 242, .4);
$menuActiveBg:rgba(242, 242, 242, .4); $menuActiveBg: #e9edfb;
$subMenuBg:rgb(255, 255, 255,0);//#304156 $subMenuBg:rgb(255, 255, 255,0);//#304156
$subMenuHover:rgba(242, 242, 242, .4); $subMenuHover:rgba(242, 242, 242, .4);
$submenuActiveBg:rgba(242, 242, 242, .4); $submenuActiveBg:rgba(242, 242, 242, .4);
:root {
--navbar-height: 50px;
--sidebar-width: 210px;
}
@media screen and (min-width: 1680px) {
:root {
--navbar-height: 83px;
--sidebar-width: 210px;
}
}
$navbarHeight: 50px;
$sideBarWidth: 210px; $sideBarWidth: 210px;
$primaryColor: #5585bf; $primaryColor: #5585bf;
// the :export directive is the magic sauce for webpack // the :export directive is the magic sauce for webpack

2
src/views/dashboard/index.vue
Unescape View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<Card style="margin: 20px 0;"> <Card>
<div> <div>
<div class="contract"> <div class="contract">

Write Preview
Loading…
Cancel
Save