Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
仲么了
2024-02-19 13:44:32 +08:00
commit 361cbb713d
238 changed files with 202544 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

332
src/styles/app.scss Normal file
View File

@@ -0,0 +1,332 @@
/* 基本样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none !important;
}
html,
body,
#app {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
background-color: var(--ba-bg-color);
font-size: 14px;
overflow: hidden;
position: relative;
}
/* 修改纵向滚动条轨道 */
::-webkit-scrollbar {
width: 8px;
}
/* 修改纵向滚动条拇指（thumb） */
::-webkit-scrollbar-thumb {
background-color: var(--el-color-primary);
border-radius: 5px;
}
/* 修改横向滚动条轨道 */
::-webkit-scrollbar:horizontal {
height: 8px;
}
/* 修改横向滚动条拇指（thumb） */
::-webkit-scrollbar-thumb:horizontal {
background-color: var(--el-color-primary);
border-radius: 5px;
}
// 阿里 iconfont Symbol引用css
.iconfont-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.w100 {
width: 100% !important;
}
.h100 {
height: 100% !important;
}
.ba-center {
display: flex;
align-items: center;
justify-content: center;
}
.default-main {
position: relative;
background: #fff;
margin: var(--ba-main-space) var(--ba-main-space) 0px var(--ba-main-space);
}
.zoom-handle {
position: absolute;
width: 20px;
height: 20px;
bottom: -10px;
right: -10px;
cursor: se-resize;
}
.block-help {
display: block;
width: 100%;
color: #909399;
font-size: 13px;
line-height: 16px;
padding-top: 5px;
}
/* 表格顶部菜单-s */
.table-header {
.table-header-operate .icon {
font-size: 14px !important;
color: var(--el-color-white) !important;
}
.el-button.is-disabled .icon {
color: var(--el-button-disabled-text-color) !important;
}
}
/* 表格顶部菜单-e */
/* 鼠标置入浮动效果-s */
.suspension {
transition: all 0.3s ease;
}
.suspension:hover {
-webkit-transform: translateY(-4px) scale(1.02);
-moz-transform: translateY(-4px) scale(1.02);
-ms-transform: translateY(-4px) scale(1.02);
-o-transform: translateY(-4px) scale(1.02);
transform: translateY(-4px) scale(1.02);
-webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
z-index: 999;
border-radius: 6px;
}
/* 鼠标置入浮动效果-e */
/* 表格-s */
.ba-table-box {
border-radius: var(--el-border-radius-round);
}
.ba-table-alert {
background-color: var(--el-fill-color-darker) !important;
border: 1px solid var(--ba-boder-color);
border-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* 表格-e */
/* 新增/编辑表单-s */
.cn-operate-dialog {
overflow: hidden;
border-radius: var(--el-border-radius-base);
}
.cn-operate-dialog .el-dialog__header {
padding-bottom: 16px;
border-bottom: 1px solid var(--ba-bg-color);
}
.cn-operate-dialog .el-dialog__body {
height: 60vh;
padding-top: 20px;
padding-bottom: 52px;
}
.cn-operate-dialog .el-dialog__body .el-scrollbar {
// padding-right: 60px;
}
.cn-operate-dialog .el-dialog__footer {
padding: 10px var(--el-dialog-padding-primary);
box-shadow: var(--el-box-shadow);
position: absolute;
width: 100%;
bottom: 0;
}
.cn-operate-dialog .el-form {
width: calc(100% - 60px);
}
.cn-operate-dialog .el-form--inline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap: 20px 10px;
.el-form-item {
margin-right: 0;
margin-bottom: 0;
}
}
.cn-operate-dialog .el-form--inline .el-select {
width: 100%;
}
.ba-operate-form {
padding-top: 20px;
}
/* 新增/编辑表单-e */
/* 全局遮罩-s */
.ba-layout-shade {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999990;
}
/* 全局遮罩-e */
/* 图片上传预览-s */
.img-preview-dialog .el-dialog__body {
display: flex;
align-items: center;
justify-content: center;
img {
max-width: 100%;
}
}
/* 图片上传预览-e */
/* 页面切换动画-s */
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all 0.3s ease;
}
// slide-right
.slide-right-enter-from {
opacity: 0;
transform: translateX(-20px);
}
.slide-right-leave-to {
opacity: 0;
transform: translateX(20px);
}
// slide-left
.slide-left-enter-from {
@extend .slide-right-leave-to;
}
.slide-left-leave-to {
@extend .slide-right-enter-from;
}
/* 页面切换动画-e */
/* 布局相关-s */
.frontend-footer-brother {
min-height: calc(100vh - 120px);
}
.user-views {
padding-left: 15px;
.user-views-card {
margin-bottom: 15px;
}
}
.ba-aside-drawer {
.el-drawer__body {
padding: 0;
}
}
/* 布局相关-e */
/* 暗黑模式公共样式-s */
.ba-icon-dark {
color: var(--el-text-color-primary) !important;
}
/* 暗黑模式公共样式-e */
/* NProgress-s */
#nprogress {
.bar,
.spinner {
z-index: 999999;
}
}
/* NProgress-e */
/* 自适应-s */
@media screen and (max-width: 768px) {
.xs-hidden {
display: none;
}
}
@media screen and (max-width: 1024px) {
.cn-operate-dialog {
width: 96%;
}
}
@media screen and (max-width: 991px) {
.user-views {
padding: 0;
}
}
/* 自适应-e */
.custom-table-header {
box-sizing: border-box;
display: flex;
padding: 13px 15px;
align-items: center;
border: 1px solid var(--el-border-color);
.title {
flex: 1;
font-weight: 700;
}
.el-form-item {
margin-bottom: 0 !important;
}
}
.child-router {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #fff;
z-index: 2;
}

135
src/styles/element.scss Normal file
View File

@@ -0,0 +1,135 @@
/* 修复 Chrome 浏览器输入框内选中字符行高异常的bug-s */
.el-input .el-input__inner {
height: 30px;
line-height: calc(var(--el-input-height, 40px) - 4px);
}
/* 修复 Chrome 浏览器输入框内选中字符行高异常的bug-e */
.datetime-picker {
height: 32px;
padding-top: 0;
padding-bottom: 0;
}
.el-divider__text.is-center {
transform: translateX(-50%) translateY(-62%);
}
.el-menu {
user-select: none;
.el-menu-item:hover,
.el-sub-menu__title:hover {
background-color: var(--el-menu-hover-color) !important;
color: var(--el-menu-active-color) !important;
.icon {
color: var(--el-menu-active-color) !important;
}
}
}
.el-dialog__header {
background: var(--el-color-primary);
margin-right: 0;
.el-dialog__headerbtn {
.el-icon {
color: var(--el-color-white);
}
}
.el-dialog__title {
color: var(--el-color-white);
}
}
.el-table {
--el-table-border-color: var(--ba-border-color);
}
.el-card {
border: none;
}
.el-card__header {
border-bottom: 1px solid var(--el-border-color-extra-light);
}
.el-textarea__inner {
padding: 5px 11px;
}
.el-dialog__body {
padding: 10px;
}
/* dialog滚动条-s */
.el-overlay-dialog,
.el-tabs__content,
.ba-scroll-style {
scrollbar-width: none;
&::-webkit-scrollbar {
width: 5px;
height: 5px;
}
&::-webkit-scrollbar-thumb {
background: #eaeaea;
border-radius: var(--el-border-radius-base);
box-shadow: none;
-webkit-box-shadow: none;
}
&:hover {
&::-webkit-scrollbar-thumb:hover {
background: #c8c9cc;
}
}
}
/* dialog滚动条-e */
/* 小屏设备 el-radio-group 样式优化-s */
.ba-input-item-radio {
margin-bottom: 10px;
.el-radio-group {
.el-radio {
margin-bottom: 8px;
}
}
}
/* 小屏设备 el-radio-group 样式调整-e */
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
background: var(--el-color-primary);
color: var(--el-color-white);
}
.el-tabs__header {
margin-bottom: 0;
}
.el-form--inline .el-form-item {
margin-bottom: 10px;
}
.el-tabs--border-card > .el-tabs__content {
padding: 10px;
}
.el-page-header__header {
line-height: 32px;
.el-page-header__content {
font-size: 14px;
font-weight: 700;
}
}
.el-select{
min-width: 220px;
}

4
src/styles/index.scss Normal file
View File

@@ -0,0 +1,4 @@
@use '@/styles/app';
@use '@/styles/vxeTable';
@use '@/styles/element';
@use '@/styles/var';

54
src/styles/loading.scss Normal file
View File

@@ -0,0 +1,54 @@
.block-loading {
width: 100%;
height: 100%;
position: fixed;
z-index: 9990;
background-color: var(--ba-bg-color);
}
.block-loading .block-loading-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.block-loading .block-loading-box-warp {
width: 80px;
height: 80px;
}
.block-loading .block-loading-box-warp .block-loading-box-item {
width: 33.333333%;
height: 33.333333%;
background: #409eff;
float: left;
animation: block-loading-animation 1.2s infinite ease;
border-radius: 1px;
}
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(7) {
animation-delay: 0s;
}
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(4),
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(8) {
animation-delay: 0.1s;
}
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(1),
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(5),
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(9) {
animation-delay: 0.2s;
}
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(2),
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(6) {
animation-delay: 0.3s;
}
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes block-loading-animation {
0%,
70%,
100% {
transform: scale3D(1, 1, 1);
}
35% {
transform: scale3D(0, 0, 1);
}
}

65
src/styles/mixins.scss Normal file
View File

@@ -0,0 +1,65 @@
@mixin set-css-var-value($name, $value) {
#{joinVarName($name)}: #{$value};
}
@function joinVarName($list) {
$name: '--ba';
@each $item in $list {
@if $item != '' {
$name: $name + '-' + $item;
}
}
@return $name;
}
@function getCssVarName($args...) {
@return joinVarName($args);
}
/*
* 通过映射设置所有的CSS变量
*/
@mixin set-component-css-var($name, $variables) {
@each $attribute, $value in $variables {
@if $attribute == 'default' {
#{getCssVarName($name)}: #{$value};
} @else {
#{getCssVarName($name, $attribute)}: #{$value};
}
}
}
// mt0,mr0,mb0,ml0 --> mt100,mr100,mb100,ml100
@for $i from 0 through 100 {
.mt#{$i} {
margin-top: #{$i}px !important;
}
.mr#{$i} {
margin-right: #{$i}px !important;
}
.mb#{$i} {
margin-bottom: #{$i}px !important;
}
.ml#{$i} {
margin-left: #{$i}px !important;
}
.pt#{$i} {
padding-top: #{$i}px !important;
}
.pr#{$i} {
padding-right: #{$i}px !important;
}
.pb#{$i} {
padding-bottom: #{$i}px !important;
}
.pl#{$i} {
padding-left: #{$i}px !important;
}
}

36
src/styles/var.scss Normal file
View File

@@ -0,0 +1,36 @@
@use 'sass:map';
@use 'mixins' as *;
// 后台主体窗口左右间距
$main-space: 10px;
$primary-light: #3f6ad8;
// --ba-background
$bg-color: () !default;
$bg-color: map.merge(
(
'': #edf0f3,
'overlay': #ffffff,
),
$bg-color
);
// --ba-border-color
$border-color: () !default;
$border-color: map.merge(
(
'': #f6f6f6,
),
$border-color
);
:root {
@include set-css-var-value('main-space', $main-space);
@include set-css-var-value('color-primary-light', $primary-light);
@include set-component-css-var('bg-color', $bg-color);
@include set-component-css-var('border-color', $border-color);
// --vxe-table-row-current-background-color: var(--el-color-primary-light-7);
// --vxe-table-row-hover-background-color: var(--el-color-primary-light-9);
// --vxe-table-row-hover-current-background-color: var(--el-color-primary-light-7);
// --vxe-table-row-hover-striped-background-color: var(--el-color-primary-light-9);
}

56
src/styles/vxeTable.scss Normal file
View File

@@ -0,0 +1,56 @@
// .vxe-table--body-wrapper,
// .boxbx {
// &::-webkit-scrollbar {
// width: 10px;
// height: 10px;
// }
// &::-webkit-scrollbar-thumb {
// border-radius: 5px;
// height: 3px;
// background-color: var(--el-color-primary) !important;
// border-radius: 30px !important;
// }
// }
// .vxe-table--body-wrapper::-webkit-scrollbar-thumb {
// border-radius: 5px;
// height: 3px;
// background-color: var(--el-color-primary) !important;
// border-radius: 30px !important;
// }
.vxe-header--row {
background: var(--vxe-table-header-background-color);
color: var(--vxe-table-header-font-color);
}
.is--checked.vxe-checkbox,
.is--checked.vxe-checkbox .vxe-checkbox--icon,
.is--checked.vxe-custom--checkbox-option,
.is--checked.vxe-custom--checkbox-option .vxe-checkbox--icon,
.is--checked.vxe-export--panel-column-option,
.is--checked.vxe-export--panel-column-option .vxe-checkbox--icon,
.is--checked.vxe-table--filter-option,
.is--checked.vxe-table--filter-option .vxe-checkbox--icon,
.is--indeterminate.vxe-checkbox,
.is--indeterminate.vxe-checkbox .vxe-checkbox--icon,
.is--indeterminate.vxe-custom--checkbox-option,
.is--indeterminate.vxe-custom--checkbox-option .vxe-checkbox--icon,
.is--indeterminate.vxe-export--panel-column-option,
.is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon,
.is--indeterminate.vxe-table--filter-option,
.is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon,
.vxe-table--render-default .is--checked.vxe-cell--checkbox,
.vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,
.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox,
.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon {
color: var(--el-color-primary-light-8);
}
.vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon,
.vxe-custom--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon,
.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-checkbox--icon,
.vxe-table--filter-option:not(.is--disabled):hover .vxe-checkbox--icon,
.vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon {
color: var(--el-color-primary-light-8);
}