mirrors/pig-ui
1
0
Fork 0
mirror of https://gitee.com/log4j/pig-ui.git synced 2025-01-03 23:42:23 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

'admin-21.03.21:修复弹窗蒙版在手机屏幕大小时不铺满的问题'

Browse Source
This commit is contained in:
lyt-Top 2021-03-21 17:04:53 +08:00
parent 400e8add88
commit 90d49bce5c
3 changed files with 161 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

308
src/theme/app.scss
View File

@ -1,227 +1,227 @@
/* 初始化样式 /* 初始化样式
------------------------------- */ ------------------------------- */
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
outline: none !important; outline: none !important;
} }
html, html,
body, body,
#app { #app {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-weight: 400; font-weight: 400;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
background-color: #f8f8f8; background-color: #f8f8f8;
font-size: 14px; font-size: 14px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
/* 主布局样式 /* 主布局样式
------------------------------- */ ------------------------------- */
.layout-container { .layout-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
.layout-aside { .layout-aside {
background: var(--bg-menuBar); background: var(--bg-menuBar);
box-shadow: 2px 0 6px rgb(0 21 41 / 1%); box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
height: inherit; height: inherit;
position: relative; position: relative;
z-index: 1; z-index: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-x: hidden !important; overflow-x: hidden !important;
.el-scrollbar__view { .el-scrollbar__view {
overflow: hidden; overflow: hidden;
} }
} }
.layout-header { .layout-header {
padding: 0 !important; padding: 0 !important;
} }
.layout-main { .layout-main {
padding: 0 !important; padding: 0 !important;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
background-color: #f8f8f8; background-color: #f8f8f8;
} }
.el-scrollbar { .el-scrollbar {
width: 100%; width: 100%;
} }
.layout-view-bg-white { .layout-view-bg-white {
background: white; background: white;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 4px; border-radius: 4px;
border: 1px solid #ebeef5; border: 1px solid #ebeef5;
} }
.layout-el-aside-br-color { .layout-el-aside-br-color {
border-right: 1px solid rgb(238, 238, 238); border-right: 1px solid rgb(238, 238, 238);
} }
.layout-aside-width-default { .layout-aside-width-default {
width: 220px !important; width: 220px !important;
transition: width 0.3s ease; transition: width 0.3s ease;
} }
.layout-aside-width64 { .layout-aside-width64 {
width: 64px !important; width: 64px !important;
transition: width 0.3s ease; transition: width 0.3s ease;
} }
.layout-aside-width1 { .layout-aside-width1 {
width: 1px !important; width: 1px !important;
transition: width 0.3s ease; transition: width 0.3s ease;
} }
.layout-scrollbar { .layout-scrollbar {
@extend .el-scrollbar; @extend .el-scrollbar;
padding: 15px; padding: 15px;
} }
.layout-mian-height-50 { .layout-mian-height-50 {
height: calc(100vh - 50px); height: calc(100vh - 50px);
} }
.layout-columns-warp { .layout-columns-warp {
flex: 1; flex: 1;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
} }
.layout-hide { .layout-hide {
display: none; display: none;
} }
// 去掉手机版菜单导航背景 // 去掉手机版菜单导航背景
.el-drawer { .el-drawer {
background-color: transparent !important; background-color: transparent !important;
} }
} }
/* element plus 全局样式 /* element plus 全局样式
------------------------------- */ ------------------------------- */
.layout-breadcrumb-seting { .layout-breadcrumb-seting {
.el-drawer__header { .el-drawer__header {
padding: 0 15px !important; padding: 0 15px !important;
height: 50px; height: 50px;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 0 !important; margin-bottom: 0 !important;
border-bottom: 1px solid rgb(230, 230, 230); border-bottom: 1px solid rgb(230, 230, 230);
} }
.el-divider { .el-divider {
background-color: rgb(230, 230, 230); background-color: rgb(230, 230, 230);
} }
} }
/* nprogress 进度条跟随主题颜色 /* nprogress 进度条跟随主题颜色
------------------------------- */ ------------------------------- */
#nprogress { #nprogress {
.bar { .bar {
background: var(--color-primary) !important; background: var(--color-primary) !important;
z-index: 9999999 !important; z-index: 9999999 !important;
} }
} }
/* flex 弹性布局 /* flex 弹性布局
------------------------------- */ ------------------------------- */
.flex { .flex {
display: flex; display: flex;
} }
.flex-auto { .flex-auto {
flex: 1; flex: 1;
} }
.flex-center { .flex-center {
@extend .flex; @extend .flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }
.flex-margin { .flex-margin {
margin: auto; margin: auto;
} }
.flex-warp { .flex-warp {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-content: flex-start; align-content: flex-start;
margin: 0 -5px; margin: 0 -5px;
.flex-warp-item { .flex-warp-item {
padding: 5px; padding: 5px;
.flex-warp-item-box { .flex-warp-item-box {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
} }
/* 宽高 100% /* 宽高 100%
------------------------------- */ ------------------------------- */
.w100 { .w100 {
width: 100% !important; width: 100% !important;
} }
.h100 { .h100 {
height: 100% !important; height: 100% !important;
} }
.vh100 { .vh100 {
height: 100vh !important; height: 100vh !important;
} }
.max100vh { .max100vh {
max-height: 100vh !important; max-height: 100vh !important;
} }
.min100vh { .min100vh {
min-height: 100vh !important; min-height: 100vh !important;
} }
/* 颜色值 /* 颜色值
------------------------------- */ ------------------------------- */
.color-primary { .color-primary {
color: var(--color-primary); color: var(--color-primary);
} }
.color-success { .color-success {
color: var(--color-success); color: var(--color-success);
} }
.color-warning { .color-warning {
color: var(--color-warning); color: var(--color-warning);
} }
.color-danger { .color-danger {
color: var(--color-danger); color: var(--color-danger);
} }
.color-info { .color-info {
color: var(--color-info); color: var(--color-info);
} }
/* 字体大小全局样式 /* 字体大小全局样式
------------------------------- */ ------------------------------- */
@for $i from 10 through 32 { @for $i from 10 through 32 {
.font#{$i} { .font#{$i} {
font-size: #{$i}px !important; font-size: #{$i}px !important;
} }
} }
/* 外边距、内边距全局样式 /* 外边距、内边距全局样式
------------------------------- */ ------------------------------- */
@for $i from 1 through 35 { @for $i from 1 through 35 {
.mt#{$i} { .mt#{$i} {
margin-top: #{$i}px !important; margin-top: #{$i}px !important;
} }
.mr#{$i} { .mr#{$i} {
margin-right: #{$i}px !important; margin-right: #{$i}px !important;
} }
.mb#{$i} { .mb#{$i} {
margin-bottom: #{$i}px !important; margin-bottom: #{$i}px !important;
} }
.ml#{$i} { .ml#{$i} {
margin-left: #{$i}px !important; margin-left: #{$i}px !important;
} }
.pt#{$i} { .pt#{$i} {
padding-top: #{$i}px !important; padding-top: #{$i}px !important;
} }
.pr#{$i} { .pr#{$i} {
padding-right: #{$i}px !important; padding-right: #{$i}px !important;
} }
.pb#{$i} { .pb#{$i} {
padding-bottom: #{$i}px !important; padding-bottom: #{$i}px !important;
} }
.pl#{$i} { .pl#{$i} {
padding-left: #{$i}px !important; padding-left: #{$i}px !important;
} }
} }

4
src/theme/media/chart.scss
View File

@ -33,6 +33,10 @@
} }
.big-data-down-right { .big-data-down-right {
.flex-warp-item { .flex-warp-item {
.flex-warp-item-box {
border: none !important;
border-bottom: 1px solid #ebeef5 !important;
}
&:nth-of-type(2) { &:nth-of-type(2) {
padding-left: 15px !important; padding-left: 15px !important;
} }

3
src/theme/media/dialog.scss
View File

@ -6,4 +6,7 @@
.el-dialog { .el-dialog {
width: 90% !important; width: 90% !important;
} }
.el-dialog.is-fullscreen {
width: 100% !important;
}
} }