xuhuajiao
/
yxk-electronic-archives
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

主题样式修改03-27

master
xuhuajiao 2 years ago
parent
dc4cb56751
commit
e57d2ea96a
11 changed files with 491 additions and 121 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/assets/styles/index.scss
  2. 291
      src/assets/styles/mixin.scss
  3. 2
      src/assets/styles/variables.scss
  4. 123
      src/assets/styles/yxk-admin.scss
  5. 2
      src/components/Breadcrumb/index.vue
  6. 12
      src/components/Crud/CRUD.operation.vue
  7. 64
      src/components/Crud/RR.operation.vue
  8. 21
      src/layout/components/AppMain.vue
  9. 4
      src/layout/components/Navbar.vue
  10. 2
      src/layout/index.vue
  11. 89
      src/views/system/user/index.vue

2
src/assets/styles/index.scss
View File

@ -137,7 +137,7 @@ ul{
} }
.app-container { .app-container {
margin: 20px;
margin: 0 20px 20px 20px;
} }
.components-container { .components-container {

291
src/assets/styles/mixin.scss
View File

@ -94,7 +94,6 @@
} }
} }
@mixin breadcrumb-bg{ @mixin breadcrumb-bg{
[data-theme="dark"] & { [data-theme="dark"] & {
background-color: $background-color-dark; background-color: $background-color-dark;
@ -122,17 +121,39 @@
} }
} }
@mixin bg_color() {
@mixin main_bg_color() {
[data-theme="dark"] & { [data-theme="dark"] & {
background-color: $background-color-dark; background-color: $background-color-dark;
@include font-color($font-color-dark); @include font-color($font-color-dark);
} }
[data-theme="light"] & { [data-theme="light"] & {
background-color: $background-color-light;
background-color: transparent;
@include font-color($font-color-light); @include font-color($font-color-light);
} }
} }
@mixin dropdown_bg() {
[data-theme="dark"] & {
box-shadow: rgb(51 156 255) 0px 0px 10px 1px inset;
background: #02255F;
}
[data-theme="light"] & {
box-shadow: 0px 5px 11px 0px rgba(0,0,0,0.17);
background: #fff;
}
}
@mixin dropdown_bg_hover() {
[data-theme="dark"] & {
background: #13439E;
color: #fff;
}
[data-theme="light"] & {
background: #F5F9FC;
color: #0348F3;
}
}
@mixin icon_color() { @mixin icon_color() {
[data-theme="dark"] & { [data-theme="dark"] & {
color: $icon-color-dark; color: $icon-color-dark;
@ -142,28 +163,276 @@
} }
} }
@mixin dropdown_bg() {
@mixin bg_color() {
[data-theme="dark"] & { [data-theme="dark"] & {
box-shadow: rgb(51 156 255) 0px 0px 10px 1px inset;
background: #02255F;
background-color: $background-color-dark;
@include font-color($font-color-dark);
} }
[data-theme="light"] & { [data-theme="light"] & {
box-shadow: 0px 5px 11px 0px rgba(0,0,0,0.17);
background: #fff;
background-color: $background-color-light;
@include font-color($font-color-light);
} }
} }
@mixin dropdown_bg_hover() {
// 内容模块 背景-线条-font设置
@mixin user_cont() {
[data-theme="dark"] & { [data-theme="dark"] & {
background: #13439E;
background-color: $background-color-dark;
border: $mainContainerBorder;
@include font-color($font-color-dark);
}
[data-theme="light"] & {
background-color: $background-color-light;
border: none;
@include font-color($font-color-light);
}
}
@mixin before_line_color() {
[data-theme="dark"] & {
border-top: 1px solid $mainColor;
border-left: 1px solid $mainColor;
}
[data-theme="light"] & {
border-top: none;
border-left: none;
}
}
@mixin after_line_color() {
[data-theme="dark"] & {
border-right: 1px solid $mainColor;
border-bottom: 1px solid $mainColor;
}
[data-theme="light"] & {
border-right: none;
border-bottom: none;
}
}
@mixin left_bottom_line_color() {
[data-theme="dark"] & {
border-bottom: 1px solid $mainColor;
border-left: 1px solid $mainColor;
}
[data-theme="light"] & {
border-left: none;
border-bottom: none;
}
}
@mixin right_top_line_color() {
[data-theme="dark"] & {
border-right: 1px solid $mainColor;
border-top: 1px solid $mainColor;
}
[data-theme="light"] & {
border-right: none;
border-top: none;
}
}
@mixin box_padding{
[data-theme="dark"] & {
padding: 0 !important;
margin-top: 20px;
}
[data-theme="light"] & {
padding: 20px !important;
}
}
@mixin tree_height_min{
[data-theme="dark"] & {
min-height: calc(100vh - 210px);
}
[data-theme="light"] & {
min-height: calc(100vh - 230px);
}
}
@mixin table_height_min{
[data-theme="dark"] & {
min-height: calc(100vh - 260px);
}
[data-theme="light"] & {
min-height: calc(100vh - 280px);
}
}
@mixin input_style{
[data-theme="dark"] & {
border: 1px solid $mainColor;
color: #fff; color: #fff;
} }
[data-theme="light"] & { [data-theme="light"] & {
background: #F5F9FC;
border: 1px solid #E3E7EE;
color: #0C0E1E;
}
}
@mixin tree_font_color{
[data-theme="dark"] & {
color: $mainColor;
}
[data-theme="light"] & {
color: #0C0E1E;
}
}
@mixin tree_style{
@include tree_font_color;
[data-theme="dark"] & {
padding: 0 30px !important;
}
}
@mixin tree_children_font{
[data-theme="light"] & {
color: #545B65;
}
}
@mixin tree_children_padding{
[data-theme="light"] & {
padding: 0 !important;
}
}
@mixin tree_hover{
[data-theme="dark"] & {
background-color: transparent !important;
background-image: $subMenuActiveBg;
}
[data-theme="light"] & {
background-color: #E8F2FF !important;
color: #0348F3; color: #0348F3;
} }
} }
@mixin tree_active{
[data-theme="dark"] & {
background-image: $subMenuActiveBg !important;
color: #fff;
}
[data-theme="light"] & {
background-color: #E8F2FF !important;
color: #0348F3 !important;
}
}
@mixin elButton-style{
[data-theme="dark"] & {
border-color: $mainColor;
color: #fff;
}
[data-theme="light"] & {
font-weight: bold;
border-color: #0348F3;
color: #0348F3;
}
}
@mixin elButton-disabled-style{
[data-theme="dark"] & {
color: #13439E;
background-color: transparent;
border-color: #13439E;
}
[data-theme="light"] & {
color: #B4C8FB;
border-color: #B4C8FB;
background-color: #F2F5FE;
}
}
@mixin elButton-hover-style{
[data-theme="dark"] & {
color: #fff;
background-color: #02255F;
border-color: $mainColor;
}
[data-theme="light"] & {
background-color: #E8F2FF;
}
}
@mixin elTable-style{
[data-theme="dark"] & {
background-color: #02255f;
}
[data-theme="light"] & {
background-color: #F5F9FC;
}
}
@mixin elTable-font-style{
[data-theme="dark"] & {
color: $mainColor;
}
[data-theme="light"] & {
color: #0C0E1E;
}
}
@mixin elTable-td-font-style{
[data-theme="dark"] & {
color: $mainColor;
border-bottom: 1px dashed #113D72;
}
[data-theme="light"] & {
color: #545B65;
border-bottom: 1px solid #F5F9FC;
}
}
@mixin elTable-hover-style{
[data-theme="dark"] & {
color: #fff;
background-color: #13439E;
}
[data-theme="light"] & {
background-color: #EAF3FB;
color: #545B65;
}
}
@mixin checkbox-style{
[data-theme="dark"] & {
border-color: $mainColor;
}
[data-theme="light"] & {
border-color: #D6D8DD;
}
}
@mixin checkbox-disabled-style{
[data-theme="dark"] & {
border-color: $mainColor;
background: transparent;
}
[data-theme="light"] & {
background-color: #E6E7E9;
}
}
@mixin checkbox-active-style{
[data-theme="dark"] & {
border-color: $mainColor;
background: transparent;
&::after{
border-color: $mainColor;
}
}
[data-theme="light"] & {
border-color:#0348F3;
background-color: #0348F3;
&::after{
border-color: #fff;
}
}
}

2
src/assets/styles/variables.scss
View File

@ -17,7 +17,7 @@ $font-color-dark : #fff;
$background-color-light: #fff; //亮色bg主题 $background-color-light: #fff; //亮色bg主题
$main-bg-light: #F6F8FC; //亮色bg主题 $main-bg-light: #F6F8FC; //亮色bg主题
$icon-color-light: #1C1C1C; $icon-color-light: #1C1C1C;
$font-color-light : #545B65;
$font-color-light: #545B65;
$headerHeight: 64px; $headerHeight: 64px;
$sideBarWidth: 256px; $sideBarWidth: 256px;

123
src/assets/styles/yxk-admin.scss
View File

@ -1,17 +1,15 @@
.head-container { .head-container {
padding: 20px;
// padding: 20px;
.filter-item { .filter-item {
display: inline-block;
// display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-right: 20px;
margin-right: 10px;
input { input {
border: 1px solid $mainColor;
@include input_style;
background-color: transparent; background-color: transparent;
// @include bg_color;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
color: #fff;
} }
.iconfont{ .iconfont{
line-height: 30px; line-height: 30px;
@ -23,9 +21,9 @@
.date-item { .date-item {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
border: 1px solid $mainColor;
@include bg_color; @include bg_color;
margin-right: 20px;
@include input_style;
margin-right: 10px;
height: 30px !important; height: 30px !important;
width: 230px !important; width: 230px !important;
} }
@ -45,7 +43,8 @@
margin-right: 0 !important; margin-right: 0 !important;
} }
.container-left{ .container-left{
margin-right: 20px;
// margin-right: 20px;
// @include box_padding;
} }
.container-left, .container-left,
.container-right, .container-right,
@ -54,8 +53,7 @@
.header-container-wrap{ .header-container-wrap{
position: relative; position: relative;
min-height: 100%; min-height: 100%;
padding: 0 !important;
border: $mainContainerBorder;
@include user_cont;
min-height: calc(100vh - 190px); min-height: calc(100vh - 190px);
&::before, &::before,
&::after{ &::after{
@ -68,14 +66,12 @@
&::before{ &::before{
top: -1px; top: -1px;
left: -1px; left: -1px;
border-top: 1px solid $mainColor;
border-left: 1px solid $mainColor;
@include before_line_color;
} }
&::after{ &::after{
right: -1px; right: -1px;
bottom: -1px; bottom: -1px;
border-right: 1px solid $mainColor;
border-bottom: 1px solid $mainColor;
@include after_line_color;
} }
} }
@ -110,6 +106,8 @@
// xu el-button // xu el-button
.head-search{ .head-search{
display: flex;
justify-content: flex-start;
margin-bottom: 20px; margin-bottom: 20px;
.el-button{ .el-button{
margin-left: 0; margin-left: 0;
@ -120,24 +118,19 @@
.el-button, .el-button,
.el-button--info.is-plain{ .el-button--info.is-plain{
font-size: 14px; font-size: 14px;
color: #fff;
border-color: $mainColor;
background-color: transparent; background-color: transparent;
@include elButton-style;
} }
.el-button.is-disabled, .el-button.is-disabled,
.el-button.is-disabled:hover, .el-button.is-disabled:hover,
.el-button.is-disabled:focus{ .el-button.is-disabled:focus{
color: #13439E;
background-color: transparent;
border-color: #13439E;
@include elButton-disabled-style;
} }
.el-button:hover, .el-button:hover,
.el-button:focus, .el-button:focus,
.el-button--info.is-plain:hover, .el-button--info.is-plain:hover,
.el-button--info.is-plain:focus{ .el-button--info.is-plain:focus{
color: #fff;
background-color: #02255F;
border-color: $mainColor;
@include elButton-hover-style;
} }
.el-button--mini{ .el-button--mini{
@ -182,21 +175,18 @@
.left-bottom-line{ .left-bottom-line{
bottom: -1px; bottom: -1px;
left: -1px; left: -1px;
border-bottom: 1px solid $mainColor;
border-left: 1px solid $mainColor;
@include left_bottom_line_color;
} }
.right-top-line{ .right-top-line{
right: -1px; right: -1px;
top: -1px; top: -1px;
border-right: 1px solid $mainColor;
border-top: 1px solid $mainColor;
@include right_top_line_color;
} }
.right-bottom-line{ .right-bottom-line{
right: -1px; right: -1px;
bottom: -1px; bottom: -1px;
border-right: 1px solid $mainColor;
border-bottom: 1px solid $mainColor;
@include after_line_color;
} }
.el-tree{ .el-tree{
background: transparent !important; background: transparent !important;
@ -204,47 +194,49 @@
background-color: transparent !important; background-color: transparent !important;
} }
.is-current>.el-tree-node__content { .is-current>.el-tree-node__content {
background-image: $subMenuActiveBg !important;
color: #fff;
@include tree_active;
} }
.el-tree-node__content{ .el-tree-node__content{
padding: 0 30px !important;
height: 40px; height: 40px;
color: $mainColor;
@include tree_style;
background-color: transparent; background-color: transparent;
.el-tree-node__label{ .el-tree-node__label{
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
} }
&:hover{ &:hover{
background-color: transparent !important;
background-image: $subMenuActiveBg;
@include tree_hover;
} }
} }
.el-tree-node__expand-icon{ .el-tree-node__expand-icon{
font-size: 16px; font-size: 16px;
color: $mainColor;
@include tree_font_color;
} }
.el-tree-node__children{ .el-tree-node__children{
padding: 0 18px; padding: 0 18px;
.el-tree-node__content{ .el-tree-node__content{
@include tree_children_padding;
height: 30px; height: 30px;
} }
.el-tree-node__label{ .el-tree-node__label{
@include tree_children_font;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
} }
} }
} }
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
background-color: transparent;
background-image: $subMenuActiveBg;
@include tree_hover;
}
.el-tree .el-tree-node__children .is-current .el-tree-node__label{
@include tree_active;
} }
.el-date-editor .el-range-input{ .el-date-editor .el-range-input{
background: transparent; background: transparent;
color: #fff;
@include tree_font_color;
} }
// table // table
@ -261,12 +253,11 @@
.el-table__header-wrapper, .el-table__header-wrapper,
.el-table__header{ .el-table__header{
th.el-table__cell{ th.el-table__cell{
background-color: #02255F;
// border-top: 1px solid #113D72;
@include elTable-style;
border-bottom: none; border-bottom: none;
&>.cell{ &>.cell{
font-size: 16px;
color: $mainColor;
font-size: 14px;
@include elTable-font-style;
} }
} }
} }
@ -274,9 +265,8 @@
.el-table__body-wrapper, .el-table__body-wrapper,
.el-table__fixed-right{ .el-table__fixed-right{
td.el-table__cell{ td.el-table__cell{
color: $mainColor;
@include elTable-td-font-style;
font-size: 14px; font-size: 14px;
border-bottom: 1px dashed #113D72;
padding: 5px 0; padding: 5px 0;
} }
} }
@ -288,24 +278,21 @@
background-color: transparent; background-color: transparent;
} }
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-checked .el-checkbox__inner{
@include checkbox-active-style;
}
.el-checkbox__input.is-disabled .el-checkbox__inner{ .el-checkbox__input.is-disabled .el-checkbox__inner{
border-color: $mainColor;
background: transparent;
&::after{
border-color: $mainColor;
}
@include checkbox-disabled-style;
} }
.el-table__body tr.hover-row > td, .el-table__body tr.hover-row > td,
.el-table__body tr.hover-row.current-row > td, .el-table__body tr.hover-row.current-row > td,
.el-table__body tr.hover-row.el-table__row--striped > td, .el-table__body tr.hover-row.el-table__row--striped > td,
.el-table__body tr.hover-row.el-table__row--striped.current-row > td { .el-table__body tr.hover-row.el-table__row--striped.current-row > td {
color: #fff;
background-color: #13439E;
@include elTable-hover-style;
.el-checkbox__input.is-checked .el-checkbox__inner{ .el-checkbox__input.is-checked .el-checkbox__inner{
background: #fff;
border-color: #fff;
@include checkbox-active-style;
} }
} }
.el-button{ .el-button{
@ -332,11 +319,9 @@
.el-table__body tr.el-table__row:focus>td.el-table__cell, .el-table__body tr.el-table__row:focus>td.el-table__cell,
.el-table__body tr.current-row:hover>td.el-table__cell, .el-table__body tr.current-row:hover>td.el-table__cell,
.el-table__body tr.current-row:focus>td.el-table__cell{ .el-table__body tr.current-row:focus>td.el-table__cell{
color: #fff;
background-color: #13439E;
@include elTable-hover-style;
.el-checkbox__input.is-checked .el-checkbox__inner{ .el-checkbox__input.is-checked .el-checkbox__inner{
background: #fff;
border-color: #fff;
@include checkbox-active-style;
} }
} }
@ -346,7 +331,7 @@
.el-checkbox__inner{ .el-checkbox__inner{
background: transparent; background: transparent;
border-color: $mainColor;
@include checkbox-style;
} }
.el-icon-arrow-right:before{ .el-icon-arrow-right:before{
@ -357,8 +342,10 @@
} }
// 分页 // 分页
.el-pagination{ .el-pagination{
padding: 2px 10px;
margin: 10px 0 !important;
display: flex;
justify-content: flex-end;
// padding: 2px 10px;
margin: 64px 0 10px 0 !important;
.el-pagination__total{ .el-pagination__total{
color: $mainColor; color: $mainColor;
} }
@ -906,7 +893,7 @@ input[type ='number'] {
color: #fff; color: #fff;
} }
.el-table__header-wrapper{ .el-table__header-wrapper{
background-color: #02255f;
@include elTable-style;
} }
.svg-style{ .svg-style{
@ -927,18 +914,22 @@ input[type ='number'] {
.el-select-dropdown, .el-select-dropdown,
.el-dropdown-menu{ .el-dropdown-menu{
top: 46px !important;
margin: 0; margin: 0;
padding: 17px 0; padding: 17px 0;
@include dropdown_bg; @include dropdown_bg;
border: none; border: none;
} }
.el-dropdown-menu{
top: 46px !important;
}
.el-select-dropdown__item{ .el-select-dropdown__item{
color: $mainColor;
// color: $mainColor;
@include icon_color;
} }
.el-select-dropdown__item.hover, .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover{ .el-select-dropdown__item:hover{
background-color: #13439E;
// background-color: #13439E;
@include dropdown_bg_hover;
} }
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{ .el-select-dropdown.is-multiple .el-select-dropdown__item.selected{

2
src/components/Breadcrumb/index.vue
View File

@ -74,7 +74,7 @@ export default {
position: relative; position: relative;
flex: 1; flex: 1;
font-size: 14px; font-size: 14px;
line-height: 50px;
line-height: 55px;
padding-left: 30px; padding-left: 30px;
&::before { &::before {
position: absolute; position: absolute;

12
src/components/Crud/CRUD.operation.vue
View File

@ -4,7 +4,8 @@
<!--左侧插槽--> <!--左侧插槽-->
<slot name="left" /> <slot name="left" />
<!-- type="primary" --> <!-- type="primary" -->
<el-button v-if="crud.optShow.add" v-permission="permission.add" size="mini" icon="el-icon-plus" @click="crud.toAdd">
<el-button v-if="crud.optShow.add" v-permission="permission.add" size="mini" @click="crud.toAdd">
<i class="iconfont icon-xinzeng" />
新增 新增
</el-button> </el-button>
<!-- type="success" --> <!-- type="success" -->
@ -31,7 +32,7 @@
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
<el-button-group v-if="crud.optShow.group" class="crud-opts-right">
<!-- <el-button-group v-if="crud.optShow.group" class="crud-opts-right">
<el-button size="mini" plain type="info" icon="el-icon-search" @click="toggleSearch()" /> <el-button size="mini" plain type="info" icon="el-icon-search" @click="toggleSearch()" />
<el-button size="mini" icon="el-icon-refresh" @click="crud.refresh()" /> <el-button size="mini" icon="el-icon-refresh" @click="crud.refresh()" />
<el-popover placement="bottom-end" width="150" trigger="click"> <el-popover placement="bottom-end" width="150" trigger="click">
@ -45,7 +46,7 @@
{{ item.label }} {{ item.label }}
</el-checkbox> </el-checkbox>
</el-popover> </el-popover>
</el-button-group>
</el-button-group> -->
<slot name="rightButtonGroup" /> <slot name="rightButtonGroup" />
</div> </div>
</template> </template>
@ -203,7 +204,7 @@ export default {
} }
</script> </script>
<style>
<style lang="scss" scoped>
.crud-opts { .crud-opts {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
@ -225,4 +226,7 @@ export default {
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
} }
.iconfont{
font-size: 12px !important;
}
</style> </style>

64
src/components/Crud/RR.operation.vue
View File

@ -1,9 +1,9 @@
<!--搜索与重置--> <!--搜索与重置-->
<template> <template>
<span>
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
<el-button v-if="crud.optShow.reset" class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="crud.resetQuery()">重置</el-button>
</span>
<div class="search-btn-box">
<el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
<el-button v-if="crud.optShow.reset" class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="crud.resetQuery()">重置</el-button>
</div>
</template> </template>
<script> <script>
import { crud } from '@crud/crud' import { crud } from '@crud/crud'
@ -19,10 +19,64 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@mixin btn_blue_style{
[data-theme="light"] & {
background-color: #0348F3;
border-color: #0348F3;
color: #fff !important;
}
}
@mixin btn_blue_hover{
[data-theme="light"] & {
background-color: #4579FA;
border-color: #4579FA;
}
}
@mixin btn_white_style{
[data-theme="light"] & {
background-color: #fff;
border-color: #E3E7EE;
color: #545B65 !important;
}
}
@mixin btn_white_hover{
[data-theme="light"] & {
background-color: #F7F9FA;
}
}
@mixin btn_hover{
[data-theme="dark"] & {
background-color: #02255F;
}
[data-theme="light"] & {
background-color: #0348F3;
}
}
.search-btn-box{
display: flex;
justify-content: flex-start;
.filter-search{
@include btn_blue_style;
&:hover{
@include btn_blue_hover;
}
}
.filter-refresh{
@include btn_white_style;
&:hover{
@include btn_white_hover;
}
}
}
.el-button{ .el-button{
background-color: #3A99FD; background-color: #3A99FD;
&:hover{ &:hover{
background-color: #02255F;
@include btn_hover;
} }
} }
</style> </style>

21
src/layout/components/AppMain.vue
View File

@ -28,10 +28,9 @@ export default {
.app-main { .app-main {
/* 100= navbar 100 */ /* 100= navbar 100 */
min-height: calc(100vh - 64px); min-height: calc(100vh - 64px);
width: 100%;
margin-top: 50px;
margin-top: 55px;
position: relative; position: relative;
@include bg_color;
@include main_bg_color;
overflow: hidden; overflow: hidden;
} }
@ -41,14 +40,26 @@ export default {
.hasTagsView { .hasTagsView {
.app-main { .app-main {
/* 84 = navbar + tags-view = 64 + 50 */
min-height: calc(100vh - 114px);
/* 119px = navbar + tags-view = 64 + 55 */
min-height: calc(100vh - 119px);
} }
.fixed-header+.app-main { .fixed-header+.app-main {
padding-top: $headerHeight; padding-top: $headerHeight;
} }
} }
.hideSidebar{
.app-main{
max-width: calc(100vw - 54px);
}
}
.openSidebar{
.app-main{
max-width: calc(100vw - 256px);
}
}
</style> </style>
<style lang="scss"> <style lang="scss">

4
src/layout/components/Navbar.vue
View File

@ -4,7 +4,7 @@
<div class="right-menu"> <div class="right-menu">
<!-- 主题切换 --> <!-- 主题切换 -->
<div class="themeBox">
<div class="themeBox" style="font-size:12px; margin-right:20px; cursor: pointer;">
<span @click="changetheme('dark')">深色主题</span> <span @click="changetheme('dark')">深色主题</span>
<span @click="changetheme('light')">浅色主题</span> <span @click="changetheme('light')">浅色主题</span>
</div> </div>
@ -41,7 +41,7 @@
<div class="user-img-cover"> <div class="user-img-cover">
<img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar" :onerror="defaultImg"> <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar" :onerror="defaultImg">
</div> </div>
<div class="user-name">Lucky</div>
<div class="user-name">{{ user.username }}</div>
<i class="el-icon-caret-bottom" /> <i class="el-icon-caret-bottom" />
</div> </div>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">

2
src/layout/index.vue
View File

@ -131,7 +131,7 @@ export default {
@include shadow-set; @include shadow-set;
z-index: 100; z-index: 100;
.hamburger-container { .hamburger-container {
line-height: 48px;
line-height: 53px;
height: 100%; height: 100%;
padding: 0 6px 0 20px; padding: 0 6px 0 20px;
cursor: pointer; cursor: pointer;

89
src/views/system/user/index.vue
View File

@ -1,28 +1,27 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-row class="container-main" :gutter="20">
<div class="container-main" style="justify-content: flex-start;">
<!--侧边部门数据--> <!--侧边部门数据-->
<el-col :xs="9" :sm="6" :md="5" :lg="4" :xl="4">
<div class="head-container" style="padding-left:0">
<div class="elect-cont-left">
<div class="head-container">
<el-input v-model="deptName" clearable size="small" placeholder="输入部门名称搜索" prefix-icon="el-icon-search" class="filter-item" @input="getDeptDatas" /> <el-input v-model="deptName" clearable size="small" placeholder="输入部门名称搜索" prefix-icon="el-icon-search" class="filter-item" @input="getDeptDatas" />
</div> </div>
<div class="container-left" style="min-height: calc(100vh - 262px)">
<div class="container-left">
<span class="right-top-line" /> <span class="right-top-line" />
<span class="left-bottom-line" /> <span class="left-bottom-line" />
<el-tree :data="deptDatas" :load="getDeptDatas" :props="defaultProps" :expand-on-click-node="false" lazy @node-click="handleNodeClick" /> <el-tree :data="deptDatas" :load="getDeptDatas" :props="defaultProps" :expand-on-click-node="false" lazy @node-click="handleNodeClick" />
</div> </div>
</el-col>
</div>
<!--用户数据--> <!--用户数据-->
<el-col :xs="15" :sm="18" :md="19" :lg="20" :xl="20">
<div class="elect-cont-right">
<!--工具栏--> <!--工具栏-->
<div class="head-container" style="padding:20px 0">
<div class="head-container">
<div v-if="crud.props.searchToggle" class="head-search"> <div v-if="crud.props.searchToggle" class="head-search">
<!-- 搜索 --> <!-- 搜索 -->
<el-input v-model="query.blurry" clearable size="small" placeholder="输入名称或者邮箱搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" /> <el-input v-model="query.blurry" clearable size="small" placeholder="输入名称或者邮箱搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<date-range-picker v-model="query.createTime" class="date-item" /> <date-range-picker v-model="query.createTime" class="date-item" />
<el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px" @change="crud.toQuery"> <el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px" @change="crud.toQuery">
<i slot="prefix" class="iconfont icon-zhuangtai-fanbai" />
<i slot="prefix" class="iconfont icon-zhuangtai" />
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" /> <el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
</el-select> </el-select>
<rrOperation /> <rrOperation />
@ -31,7 +30,7 @@
<el-button slot="right" icon="el-icon-refresh-left" size="mini" :disabled="!crud.selections.length" @click="handlePwdReset(crud.selections)">密码重置</el-button> <el-button slot="right" icon="el-icon-refresh-left" size="mini" :disabled="!crud.selections.length" @click="handlePwdReset(crud.selections)">密码重置</el-button>
</crudOperation> </crudOperation>
</div> </div>
<div class="container-right" style="min-height: calc(100vh - 312px);">
<div class="container-right">
<span class="right-top-line" /> <span class="right-top-line" />
<span class="left-bottom-line" /> <span class="left-bottom-line" />
<!--表单渲染--> <!--表单渲染-->
@ -97,37 +96,37 @@
<!--表格渲染--> <!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @row-click="clickRowHandler" @selection-change="crud.selectionChangeHandler"> <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @row-click="clickRowHandler" @selection-change="crud.selectionChangeHandler">
<el-table-column :selectable="checkboxT" type="selection" align="center" width="55" /> <el-table-column :selectable="checkboxT" type="selection" align="center" width="55" />
<el-table-column :show-overflow-tooltip="true" prop="username" label="用户名" />
<el-table-column :show-overflow-tooltip="true" prop="nickName" label="昵称" />
<el-table-column prop="gender" label="性别" />
<el-table-column :show-overflow-tooltip="true" prop="phone" width="100" label="电话" />
<el-table-column :show-overflow-tooltip="true" width="135" prop="email" label="邮箱" />
<el-table-column :show-overflow-tooltip="true" prop="username" label="账号" />
<el-table-column :show-overflow-tooltip="true" prop="nickName" label="用户名" />
<el-table-column prop="gender" label="性别" width="60" />
<el-table-column :show-overflow-tooltip="true" prop="phone" label="电话" />
<el-table-column :show-overflow-tooltip="true" prop="email" label="邮箱" />
<el-table-column :show-overflow-tooltip="true" prop="dept" label="部门"> <el-table-column :show-overflow-tooltip="true" prop="dept" label="部门">
<template slot-scope="scope"> <template slot-scope="scope">
<div>{{ scope.row.dept.name }}</div> <div>{{ scope.row.dept.name }}</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="状态" align="center" prop="enabled">
<el-table-column label="状态" align="center" prop="enabled" width="60">
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch v-model="scope.row.enabled" :disabled="user.id === scope.row.id" active-color="#409EFF" inactive-color="#F56C6C" @change="changeEnabled(scope.row, scope.row.enabled)" /> <el-switch v-model="scope.row.enabled" :disabled="user.id === scope.row.id" active-color="#409EFF" inactive-color="#F56C6C" @change="changeEnabled(scope.row, scope.row.enabled)" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :show-overflow-tooltip="true" prop="createTime" width="145" label="创建日期">
<el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期">
<template slot-scope="scope"> <template slot-scope="scope">
<div>{{ scope.row.createTime | parseTime }}</div> <div>{{ scope.row.createTime | parseTime }}</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-if="checkPer(['admin','user:edit','user:del'])" label="操作" width="120" align="center" fixed="right">
<!-- <el-table-column v-if="checkPer(['admin','user:edit','user:del'])" label="操作" width="120" align="center" fixed="right">
<template slot-scope="scope"> <template slot-scope="scope">
<udOperation :data="scope.row" :permission="permission" :disabled-dle="scope.row.id === user.id" /> <udOperation :data="scope.row" :permission="permission" :disabled-dle="scope.row.id === user.id" />
</template> </template>
</el-table-column>
</el-table-column> -->
</el-table> </el-table>
<!--分页组件--> <!--分页组件-->
<pagination /> <pagination />
</div> </div>
</el-col>
</el-row>
</div>
</div>
</div> </div>
</template> </template>
@ -141,7 +140,7 @@ import { getAllJob } from '@/api/system/job'
import CRUD, { presenter, header, form, crud } from '@crud/crud' import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation' import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation' import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
// import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination' import pagination from '@crud/Pagination'
import DateRangePicker from '@/components/DateRangePicker' import DateRangePicker from '@/components/DateRangePicker'
import Treeselect from '@riophae/vue-treeselect' import Treeselect from '@riophae/vue-treeselect'
@ -153,7 +152,7 @@ let userJobs = []
const defaultForm = { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 'true', roles: [], jobs: [], dept: { id: null }, phone: null } const defaultForm = { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 'true', roles: [], jobs: [], dept: { id: null }, phone: null }
export default { export default {
name: 'User', name: 'User',
components: { Treeselect, crudOperation, rrOperation, udOperation, pagination, DateRangePicker },
components: { Treeselect, crudOperation, rrOperation, pagination, DateRangePicker },
cruds() { cruds() {
return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }}) return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }})
}, },
@ -465,11 +464,53 @@ export default {
} }
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.elect-cont-left{
width: 265px;
margin-right: 20px;
@include bg_color;
@include box_padding;
.head-container{
margin-bottom: 20px;
}
.container-left{
@include tree_height_min;
}
}
.elect-cont-right{
// padding: 20px;
@include bg_color;
@include box_padding;
.head-container{
margin-bottom: 20px;
}
.container-right{
@include table_height_min;
}
}
.hideSidebar{
// siderbar-收起 54 + 间距 60 + treeLeft 265
.elect-cont-right{
width: calc(100vw - 379px);
}
}
.openSidebar{
// siderbar-展开 256 + 间距 60 + treeLeft 265
.elect-cont-right{
width: calc(100vw - 581px);
}
}
::v-deep .vue-treeselect__control, ::v-deep .vue-treeselect__control,
::v-deep .vue-treeselect__placeholder, ::v-deep .vue-treeselect__placeholder,
::v-deep .vue-treeselect__single-value { ::v-deep .vue-treeselect__single-value {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
} }
.icon-zhuangtai{
font-size: 14px;
}
</style> </style>
Write Preview
Loading…
Cancel
Save