初始化提交
This commit is contained in:
猿小天
281
web/src/theme/app.scss
Normal file
281
web/src/theme/app.scss
Normal file
@@ -0,0 +1,281 @@
|
||||
/* 初始化样式
|
||||
------------------------------- */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
:root {
|
||||
--next-color-white: #ffffff;
|
||||
--next-bg-main-color: #f8f8f8;
|
||||
--next-bg-color: #f5f5ff;
|
||||
--next-border-color-light: #f1f2f3;
|
||||
--next-color-primary-lighter: #ecf5ff;
|
||||
--next-color-success-lighter: #f0f9eb;
|
||||
--next-color-warning-lighter: #fdf6ec;
|
||||
--next-color-danger-lighter: #fef0f0;
|
||||
--next-color-dark-hover: #0000001a;
|
||||
--next-color-menu-hover: rgba(0, 0, 0, 0.2);
|
||||
--next-color-user-hover: rgba(0, 0, 0, 0.04);
|
||||
--next-color-seting-main: #e9eef3;
|
||||
--next-color-seting-aside: #d3dce6;
|
||||
--next-color-seting-header: #b3c0d1;
|
||||
}
|
||||
|
||||
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(--next-bg-main-color);
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 主布局样式
|
||||
------------------------------- */
|
||||
.layout-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.layout-aside {
|
||||
background: var(--next-bg-menuBar);
|
||||
box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
|
||||
height: inherit;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden !important;
|
||||
.el-scrollbar__view {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.layout-header {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.layout-main {
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
background-color: var(--next-bg-main-color);
|
||||
}
|
||||
.el-scrollbar {
|
||||
width: 100%;
|
||||
}
|
||||
// 此字段多次用到，建议不删除，如需修改，请重写覆盖样式
|
||||
.layout-view-bg-white {
|
||||
background: var(--el-color-white);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
}
|
||||
.layout-el-aside-br-color {
|
||||
border-right: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
}
|
||||
// pc端左侧导航样式
|
||||
.layout-aside-pc-220 {
|
||||
width: 220px !important;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.layout-aside-pc-64 {
|
||||
width: 64px !important;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.layout-aside-pc-1 {
|
||||
width: 1px !important;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
// 手机端左侧导航样式
|
||||
.layout-aside-mobile {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: -220px;
|
||||
width: 220px;
|
||||
z-index: 9999999;
|
||||
}
|
||||
.layout-aside-mobile-close {
|
||||
left: -220px;
|
||||
transition: all 0.3s cubic-bezier(0.39, 0.58, 0.57, 1);
|
||||
}
|
||||
.layout-aside-mobile-open {
|
||||
left: 0;
|
||||
transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
|
||||
}
|
||||
.layout-aside-mobile-mode {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999998;
|
||||
animation: error-img 0.3s;
|
||||
}
|
||||
.layout-scrollbar {
|
||||
@extend .el-scrollbar;
|
||||
padding: 15px;
|
||||
}
|
||||
.layout-mian-height-50 {
|
||||
height: calc(100vh - 50px);
|
||||
}
|
||||
.layout-columns-warp {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
.layout-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* element plus 全局样式
|
||||
------------------------------- */
|
||||
.layout-breadcrumb-seting {
|
||||
.el-divider {
|
||||
background-color: rgb(230, 230, 230);
|
||||
}
|
||||
}
|
||||
|
||||
/* nprogress 进度条跟随主题颜色
|
||||
------------------------------- */
|
||||
#nprogress {
|
||||
.bar {
|
||||
background: var(--el-color-primary) !important;
|
||||
z-index: 9999999 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* flex 弹性布局
|
||||
------------------------------- */
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.flex-auto {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.flex-center {
|
||||
@extend .flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.flex-margin {
|
||||
margin: auto;
|
||||
}
|
||||
.flex-warp {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
margin: 0 -5px;
|
||||
.flex-warp-item {
|
||||
padding: 5px;
|
||||
.flex-warp-item-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* cursor 鼠标形状
|
||||
------------------------------- */
|
||||
// 默认
|
||||
.cursor-default {
|
||||
cursor: default !important;
|
||||
}
|
||||
// 帮助
|
||||
.cursor-help {
|
||||
cursor: help !important;
|
||||
}
|
||||
// 手指
|
||||
.cursor-pointer {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
// 移动
|
||||
.cursor-move {
|
||||
cursor: move !important;
|
||||
}
|
||||
|
||||
/* 宽高 100%
|
||||
------------------------------- */
|
||||
.w100 {
|
||||
width: 100% !important;
|
||||
}
|
||||
.h100 {
|
||||
height: 100% !important;
|
||||
}
|
||||
.vh100 {
|
||||
height: 100vh !important;
|
||||
}
|
||||
.max100vh {
|
||||
max-height: 100vh !important;
|
||||
}
|
||||
.min100vh {
|
||||
min-height: 100vh !important;
|
||||
}
|
||||
|
||||
/* 颜色值
|
||||
------------------------------- */
|
||||
.color-primary {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
.color-success {
|
||||
color: var(--el-color-success);
|
||||
}
|
||||
.color-warning {
|
||||
color: var(--el-color-warning);
|
||||
}
|
||||
.color-danger {
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
.color-info {
|
||||
color: var(--el-color-info);
|
||||
}
|
||||
|
||||
/* 字体大小全局样式
|
||||
------------------------------- */
|
||||
@for $i from 10 through 32 {
|
||||
.font#{$i} {
|
||||
font-size: #{$i}px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 外边距、内边距全局样式
|
||||
------------------------------- */
|
||||
@for $i from 1 through 35 {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
94
web/src/theme/common/transition.scss
Normal file
94
web/src/theme/common/transition.scss
Normal file
@@ -0,0 +1,94 @@
|
||||
/* 页面切换动画
|
||||
------------------------------- */
|
||||
.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;
|
||||
}
|
||||
// opacitys
|
||||
.opacitys-enter-active,
|
||||
.opacitys-leave-active {
|
||||
will-change: transform;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.opacitys-enter-from,
|
||||
.opacitys-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Breadcrumb 面包屑过渡动画
|
||||
------------------------------- */
|
||||
.breadcrumb-enter-active,
|
||||
.breadcrumb-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.breadcrumb-enter-from,
|
||||
.breadcrumb-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
.breadcrumb-leave-active {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* logo 过渡动画
|
||||
------------------------------- */
|
||||
@keyframes logoAnimation {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
80% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 404、401 过渡动画
|
||||
------------------------------- */
|
||||
@keyframes error-num {
|
||||
0% {
|
||||
transform: translateY(60px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes error-img {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes error-img-two {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
236
web/src/theme/dark.scss
Normal file
236
web/src/theme/dark.scss
Normal file
@@ -0,0 +1,236 @@
|
||||
/* 深色模式样式
|
||||
------------------------------- */
|
||||
[data-theme='dark'] {
|
||||
// 变量(自定义时，只需修改这里的值)
|
||||
--next-bg-main: #1f1f1f;
|
||||
--next-color-white: #ffffff;
|
||||
--next-color-disabled: #191919;
|
||||
--next-color-bar: #dadada;
|
||||
--next-color-primary: #303030;
|
||||
--next-border-color: #424242;
|
||||
--next-border-black: #333333;
|
||||
--next-border-columns: #2a2a2a;
|
||||
--next-color-seting: #505050;
|
||||
--next-text-color-regular: #9b9da1;
|
||||
--next-text-color-placeholder: #7a7a7a;
|
||||
--next-color-hover: #3c3c3c;
|
||||
--next-color-hover-rgba: rgba(0, 0, 0, 0.3);
|
||||
|
||||
// root
|
||||
--next-bg-main-color: var(--next-bg-main) !important;
|
||||
--next-bg-topBar: var(--next-color-disabled) !important;
|
||||
--next-bg-topBarColor: var(--next-color-bar) !important;
|
||||
--next-bg-menuBar: var(--next-color-disabled) !important;
|
||||
--next-bg-menuBarColor: var(--next-color-bar) !important;
|
||||
--next-bg-columnsMenuBar: var(--next-color-disabled) !important;
|
||||
--next-bg-columnsMenuBarColor: var(--next-color-bar) !important;
|
||||
--next-border-color-light: var(--next-border-black) !important;
|
||||
--next-color-primary-lighter: var(--next-color-primary) !important;
|
||||
--next-color-success-lighter: var(--next-color-primary) !important;
|
||||
--next-color-warning-lighter: var(--next-color-primary) !important;
|
||||
--next-color-danger-lighter: var(--next-color-primary) !important;
|
||||
--next-bg-color: var(--next-color-primary) !important;
|
||||
--next-color-dark-hover: var(--next-color-hover) !important;
|
||||
--next-color-menu-hover: var(--next-color-hover-rgba) !important;
|
||||
--next-color-user-hover: var(--next-color-hover-rgba) !important;
|
||||
--next-color-seting-main: var(--next-color-seting) !important;
|
||||
--next-color-seting-aside: var(--next-color-hover) !important;
|
||||
--next-color-seting-header: var(--next-color-primary) !important;
|
||||
|
||||
// element plus
|
||||
--el-color-white: var(--next-color-disabled) !important;
|
||||
--el-text-color-primary: var(--next-color-bar) !important;
|
||||
--el-border-color: var(--next-border-black) !important;
|
||||
--el-border-color-light: var(--next-border-black) !important;
|
||||
--el-border-color-lighter: var(--next-border-black) !important;
|
||||
--el-border-color-extra-light: var(--el-color-primary-light-8) !important;
|
||||
--el-text-color-regular: var(--next-text-color-regular) !important;
|
||||
--el-bg-color: var(--next-color-disabled) !important;
|
||||
--el-color-primary-light-9: var(--next-color-hover) !important;
|
||||
--el-text-color-disabled: var(--next-text-color-placeholder) !important;
|
||||
--el-text-color-disabled-base: var(--el-color-primary) !important;
|
||||
--el-text-color-placeholder: var(--next-text-color-placeholder) !important;
|
||||
--el-disabled-bg-color: var(--next-color-disabled) !important;
|
||||
--el-fill-base: var(--next-color-white) !important;
|
||||
--el-fill-colo: var(--next-color-hover-rgba) !important;
|
||||
--el-fill-color: var(--next-color-hover-rgba) !important;
|
||||
--el-fill-color-blank: var(--next-color-disabled) !important;
|
||||
--el-fill-color-light: var(--next-color-hover-rgba) !important;
|
||||
--el-bg-color-overlay: var(--el-color-primary-light-9) !important;
|
||||
--el-mask-color: rgb(42 42 42 / 80%);
|
||||
|
||||
// button
|
||||
.el-button {
|
||||
&:hover {
|
||||
border-color: var(--next-border-color) !important;
|
||||
}
|
||||
}
|
||||
.el-button--primary,
|
||||
.el-button--info,
|
||||
.el-button--danger,
|
||||
.el-button--success,
|
||||
.el-button--warning {
|
||||
--el-button-text-color: var(--next-color-white) !important;
|
||||
--el-button-hover-text-color: var(--next-color-white) !important;
|
||||
--el-button-disabled-text-color: var(--next-color-white) !important;
|
||||
&:hover {
|
||||
border-color: var(--el-button-hover-border-color, var(--el-button-hover-bg-color)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// drawer
|
||||
.el-divider__text {
|
||||
background-color: var(--el-color-white) !important;
|
||||
}
|
||||
.el-drawer {
|
||||
border-left: 1px solid var(--next-border-color-light) !important;
|
||||
}
|
||||
|
||||
// tabs
|
||||
.el-tabs--border-card {
|
||||
background-color: var(--el-color-white) !important;
|
||||
}
|
||||
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
|
||||
background: var(--next-color-primary-lighter);
|
||||
}
|
||||
|
||||
// alert / notice-bar
|
||||
.home-card-item {
|
||||
border: 1px solid var(--next-border-color-light) !important;
|
||||
}
|
||||
.el-alert,
|
||||
.notice-bar {
|
||||
border: 1px solid var(--next-border-color) !important;
|
||||
background-color: var(--next-color-disabled) !important;
|
||||
}
|
||||
|
||||
// menu
|
||||
.layout-aside {
|
||||
border-right: 1px solid var(--next-border-color-light) !important;
|
||||
}
|
||||
|
||||
// colorPicker
|
||||
.el-color-picker__mask {
|
||||
background: unset !important;
|
||||
}
|
||||
.el-color-picker__trigger {
|
||||
border: 1px solid var(--next-border-color-light) !important;
|
||||
}
|
||||
|
||||
// popper / dropdown
|
||||
.el-popper {
|
||||
border: 1px solid var(--next-border-color) !important;
|
||||
color: var(--el-text-color-primary) !important;
|
||||
.el-popper__arrow:before {
|
||||
background: var(--el-color-white) !important;
|
||||
border: 1px solid var(--next-border-color);
|
||||
}
|
||||
a {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
}
|
||||
.el-popper,
|
||||
.el-dropdown-menu {
|
||||
background: var(--el-color-white) !important;
|
||||
}
|
||||
.el-dropdown-menu__item:hover:not(.is-disabled) {
|
||||
background: var(--el-bg-color) !important;
|
||||
}
|
||||
.el-dropdown-menu__item.is-disabled {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
// input
|
||||
.el-input-group__append,
|
||||
.el-input-group__prepend {
|
||||
border: var(--el-input-border) !important;
|
||||
border-right: none !important;
|
||||
background: var(--next-color-disabled) !important;
|
||||
border-left: 0 !important;
|
||||
}
|
||||
.el-input-number__decrease,
|
||||
.el-input-number__increase {
|
||||
background: var(--next-color-disabled) !important;
|
||||
}
|
||||
|
||||
// tag
|
||||
.el-select .el-select__tags .el-tag {
|
||||
background-color: var(--next-bg-color) !important;
|
||||
}
|
||||
|
||||
// pagination
|
||||
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
color: var(--next-color-white) !important;
|
||||
}
|
||||
.el-pagination.is-background .btn-next,
|
||||
.el-pagination.is-background .btn-prev,
|
||||
.el-pagination.is-background .el-pager li {
|
||||
background-color: var(--next-bg-color);
|
||||
}
|
||||
|
||||
// radio
|
||||
.el-radio-button:not(.is-active) .el-radio-button__inner {
|
||||
border: 1px solid var(--next-border-color-light) !important;
|
||||
border-left: 0 !important;
|
||||
}
|
||||
.el-radio-button.is-active .el-radio-button__inner {
|
||||
color: var(--next-color-white) !important;
|
||||
}
|
||||
|
||||
// countup
|
||||
.countup-card-item-flex {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
|
||||
// editor
|
||||
.editor-container {
|
||||
.w-e-toolbar {
|
||||
background: var(--el-color-white) !important;
|
||||
border: 1px solid var(--next-border-color-light) !important;
|
||||
.w-e-menu:hover {
|
||||
background: var(--next-color-user-hover) !important;
|
||||
i {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.w-e-text-container {
|
||||
border: 1px solid var(--next-border-color-light) !important;
|
||||
border-top: none !important;
|
||||
.w-e-text {
|
||||
background: var(--el-color-white) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// date-picker
|
||||
.el-picker-panel {
|
||||
background: var(--el-color-white) !important;
|
||||
}
|
||||
|
||||
// dialog
|
||||
.el-dialog {
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
.el-dialog__header {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// columns
|
||||
.layout-columns-aside ul .layout-columns-active {
|
||||
color: var(--next-color-white) !important;
|
||||
}
|
||||
.layout-columns-aside {
|
||||
border-right: 1px solid var(--next-border-columns);
|
||||
}
|
||||
|
||||
// tagsView
|
||||
.tags-style-one {
|
||||
.is-active {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
.layout-navbars-tagsview-ul-li:hover {
|
||||
border-color: var(--el-border-color-lighter) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
293
web/src/theme/element.scss
Normal file
293
web/src/theme/element.scss
Normal file
@@ -0,0 +1,293 @@
|
||||
@import 'mixins/index.scss';
|
||||
|
||||
/* Button 按钮
|
||||
------------------------------- */
|
||||
// 第三方字体图标大小
|
||||
.el-button i.el-icon,
|
||||
.el-button i.iconfont,
|
||||
.el-button i.fa,
|
||||
.el-button--default i.iconfont,
|
||||
.el-button--default i.fa {
|
||||
font-size: 14px !important;
|
||||
//margin-right: 5px;
|
||||
}
|
||||
.el-button--small i.iconfont,
|
||||
.el-button--small i.fa {
|
||||
font-size: 12px !important;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/* Input 输入框、InputNumber 计数器
|
||||
------------------------------- */
|
||||
.el-input {
|
||||
height: 100%;
|
||||
}
|
||||
// 菜单搜索
|
||||
.el-autocomplete-suggestion__wrap {
|
||||
max-height: 280px !important;
|
||||
}
|
||||
|
||||
/* Form 表单
|
||||
------------------------------- */
|
||||
.el-form {
|
||||
// 用于修改弹窗时表单内容间隔太大问题，如系统设置的新增菜单弹窗里的表单内容
|
||||
.el-form-item:last-of-type {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
// 修复行内表单最后一个 el-form-item 位置下移问题
|
||||
&.el-form--inline {
|
||||
.el-form-item--large.el-form-item:last-of-type {
|
||||
margin-bottom: 22px !important;
|
||||
}
|
||||
.el-form-item--default.el-form-item:last-of-type,
|
||||
.el-form-item--small.el-form-item:last-of-type {
|
||||
margin-bottom: 18px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Alert 警告
|
||||
------------------------------- */
|
||||
.el-alert {
|
||||
border: 1px solid;
|
||||
}
|
||||
.el-alert__title {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Message 消息提示
|
||||
------------------------------- */
|
||||
.el-message {
|
||||
min-width: unset !important;
|
||||
padding: 15px !important;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
/* NavMenu 导航菜单
|
||||
------------------------------- */
|
||||
// 鼠标 hover 时颜色
|
||||
.el-menu-hover-bg-color {
|
||||
background-color: var(--next-color-menu-hover) !important;
|
||||
}
|
||||
// 默认样式修改
|
||||
.el-menu {
|
||||
border-right: none !important;
|
||||
width: 220px;
|
||||
}
|
||||
.el-menu-item {
|
||||
height: 56px !important;
|
||||
line-height: 56px !important;
|
||||
}
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
color: var(--next-bg-menuBarColor);
|
||||
}
|
||||
// 修复点击左侧菜单折叠再展开时，宽度不跟随问题
|
||||
.el-menu--collapse {
|
||||
width: 64px !important;
|
||||
}
|
||||
// 外部链接时
|
||||
.el-menu-item a,
|
||||
.el-menu-item a:hover,
|
||||
.el-menu-item i,
|
||||
.el-sub-menu__title i {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
// 第三方图标字体间距/大小设置
|
||||
.el-menu-item .iconfont,
|
||||
.el-sub-menu .iconfont,
|
||||
.el-menu-item .fa,
|
||||
.el-sub-menu .fa {
|
||||
@include generalIcon;
|
||||
}
|
||||
// 水平菜单、横向菜单高亮 背景色，鼠标 hover 时，有子级菜单的背景色
|
||||
.el-menu-item.is-active,
|
||||
.el-sub-menu.is-active .el-sub-menu__title,
|
||||
.el-sub-menu:not(.is-opened):hover .el-sub-menu__title {
|
||||
@extend .el-menu-hover-bg-color;
|
||||
}
|
||||
.el-sub-menu.is-active.is-opened .el-sub-menu__title {
|
||||
background-color: unset !important;
|
||||
}
|
||||
// 子级菜单背景颜色
|
||||
// .el-menu--inline {
|
||||
// background: var(--next-bg-menuBar-light-1);
|
||||
// }
|
||||
// 水平菜单、横向菜单折叠 a 标签
|
||||
.el-popper.is-dark a {
|
||||
color: var(--el-color-white) !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
// 水平菜单、横向菜单折叠背景色
|
||||
.el-popper.is-pure.is-light {
|
||||
// 水平菜单
|
||||
.el-menu--vertical {
|
||||
background: var(--next-bg-menuBar);
|
||||
.el-sub-menu.is-active .el-sub-menu__title {
|
||||
color: var(--el-menu-active-color);
|
||||
}
|
||||
.el-popper.is-pure.is-light {
|
||||
.el-menu--vertical {
|
||||
.el-sub-menu .el-sub-menu__title {
|
||||
background-color: unset !important;
|
||||
color: var(--next-bg-menuBarColor);
|
||||
}
|
||||
.el-sub-menu.is-active .el-sub-menu__title {
|
||||
color: var(--el-menu-active-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 横向菜单
|
||||
.el-menu--horizontal {
|
||||
background: var(--next-bg-topBar);
|
||||
.el-menu-item,
|
||||
.el-sub-menu {
|
||||
height: 50px !important;
|
||||
line-height: 50px !important;
|
||||
color: var(--next-bg-topBarColor);
|
||||
.el-sub-menu__title {
|
||||
height: 50px !important;
|
||||
line-height: 50px !important;
|
||||
color: var(--next-bg-topBarColor);
|
||||
}
|
||||
.el-popper.is-pure.is-light {
|
||||
.el-menu--horizontal {
|
||||
.el-sub-menu .el-sub-menu__title {
|
||||
background-color: unset !important;
|
||||
color: var(--next-bg-topBarColor);
|
||||
}
|
||||
.el-sub-menu.is-active .el-sub-menu__title {
|
||||
color: var(--el-menu-active-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-menu-item.is-active,
|
||||
.el-sub-menu.is-active .el-sub-menu__title {
|
||||
color: var(--el-menu-active-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
// 横向菜单（经典、横向）布局
|
||||
.el-menu.el-menu--horizontal {
|
||||
border-bottom: none !important;
|
||||
width: 100% !important;
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
height: 50px !important;
|
||||
color: var(--next-bg-topBarColor);
|
||||
}
|
||||
.el-menu-item:not(.is-active):hover,
|
||||
.el-sub-menu:not(.is-active):hover .el-sub-menu__title {
|
||||
color: var(--next-bg-topBarColor);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tabs 标签页
|
||||
------------------------------- */
|
||||
.el-tabs__nav-wrap::after {
|
||||
height: 1px !important;
|
||||
}
|
||||
|
||||
/* Dropdown 下拉菜单
|
||||
------------------------------- */
|
||||
.el-dropdown-menu {
|
||||
list-style: none !important; /*修复 Dropdown 下拉菜单样式问题 2022.03.04*/
|
||||
}
|
||||
.el-dropdown-menu .el-dropdown-menu__item {
|
||||
white-space: nowrap;
|
||||
&:not(.is-disabled):hover {
|
||||
background-color: var(--el-dropdown-menuItem-hover-fill);
|
||||
color: var(--el-dropdown-menuItem-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* Steps 步骤条
|
||||
------------------------------- */
|
||||
.el-step__icon-inner {
|
||||
font-size: 30px !important;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
.el-step__title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Dialog 对话框
|
||||
------------------------------- */
|
||||
.el-overlay {
|
||||
overflow: hidden;
|
||||
.el-overlay-dialog {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: unset !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.el-dialog {
|
||||
margin: 0 auto !important;
|
||||
position: absolute;
|
||||
.el-dialog__body {
|
||||
padding: 20px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-dialog__body {
|
||||
max-height: calc(90vh - 111px) !important;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Card 卡片
|
||||
------------------------------- */
|
||||
.el-card__header {
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
/* Table 表格 element plus 2.2.0 版本
|
||||
------------------------------- */
|
||||
.el-table {
|
||||
.el-button.is-text {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* scrollbar
|
||||
------------------------------- */
|
||||
.el-scrollbar__bar {
|
||||
z-index: 4;
|
||||
}
|
||||
.el-scrollbar__wrap {
|
||||
max-height: 100%; /*防止页面切换时，滚动条高度不变的问题（滚动条高度非滚动条滚动高度）*/
|
||||
}
|
||||
.el-select-dropdown .el-scrollbar__wrap {
|
||||
overflow-x: scroll !important;
|
||||
}
|
||||
.el-select-dropdown__wrap {
|
||||
max-height: 274px !important; /*修复Select 选择器高度问题*/
|
||||
}
|
||||
.el-cascader-menu__wrap.el-scrollbar__wrap {
|
||||
height: 204px !important; /*修复Cascader 级联选择器高度问题*/
|
||||
}
|
||||
|
||||
/* Drawer 抽屉
|
||||
------------------------------- */
|
||||
.el-drawer {
|
||||
--el-drawer-padding-primary: unset !important;
|
||||
.el-drawer__header {
|
||||
padding: 0 15px !important;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0 !important;
|
||||
border-bottom: 1px solid var(--el-border-color);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
.el-drawer__body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
5
web/src/theme/fastCrud.scss
Normal file
5
web/src/theme/fastCrud.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
.fs-page {
|
||||
background-color: rgb(255, 255, 255);
|
||||
border-radius: 10px;
|
||||
height: 88vh !important;
|
||||
}
|
||||
70
web/src/theme/iconSelector.scss
Normal file
70
web/src/theme/iconSelector.scss
Normal file
@@ -0,0 +1,70 @@
|
||||
/* Popover 弹出框(图标选择器)
|
||||
------------------------------- */
|
||||
.icon-selector-popper {
|
||||
padding: 0 !important;
|
||||
.icon-selector-warp {
|
||||
height: 260px;
|
||||
overflow: hidden;
|
||||
.icon-selector-warp-title {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 15px;
|
||||
.icon-selector-warp-title-tab {
|
||||
span {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.span-active {
|
||||
color: var(--el-color-primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-selector-warp-row {
|
||||
height: 230px;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid var(--el-border-color);
|
||||
.el-row {
|
||||
padding: 15px;
|
||||
}
|
||||
.el-scrollbar__bar.is-horizontal {
|
||||
display: none;
|
||||
}
|
||||
.icon-selector-warp-item {
|
||||
display: flex;
|
||||
border: 1px solid var(--el-border-color);
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
.icon-selector-warp-item-value {
|
||||
i {
|
||||
font-size: 20px;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
border: 1px solid var(--el-color-primary-light-5);
|
||||
.icon-selector-warp-item-value {
|
||||
i {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-selector-active {
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
border: 1px solid var(--el-color-primary-light-5);
|
||||
.icon-selector-warp-item-value {
|
||||
i {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
9
web/src/theme/index.scss
Normal file
9
web/src/theme/index.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
@import './app.scss';
|
||||
@import 'common/transition.scss';
|
||||
@import './other.scss';
|
||||
@import './element.scss';
|
||||
@import './iconSelector.scss';
|
||||
@import './media/media.scss';
|
||||
@import './waves.scss';
|
||||
@import './dark.scss';
|
||||
@import './fastCrud.scss';
|
||||
51
web/src/theme/loading.scss
Normal file
51
web/src/theme/loading.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
.loading-next {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.loading-next .loading-next-box {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.loading-next .loading-next-box-warp {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.loading-next .loading-next-box-warp .loading-next-box-item {
|
||||
width: 33.333333%;
|
||||
height: 33.333333%;
|
||||
background: var(--el-color-primary);
|
||||
float: left;
|
||||
animation: loading-next-animation 1.2s infinite ease;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(7) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(4),
|
||||
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(8) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(1),
|
||||
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(5),
|
||||
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(9) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(2),
|
||||
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(6) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
@keyframes loading-next-animation {
|
||||
0%,
|
||||
70%,
|
||||
100% {
|
||||
transform: scale3D(1, 1, 1);
|
||||
}
|
||||
35% {
|
||||
transform: scale3D(0, 0, 1);
|
||||
}
|
||||
}
|
||||
94
web/src/theme/media/chart.scss
Normal file
94
web/src/theme/media/chart.scss
Normal file
@@ -0,0 +1,94 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于768px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $sm) {
|
||||
.big-data-down-left {
|
||||
width: 100% !important;
|
||||
flex-direction: unset !important;
|
||||
flex-wrap: wrap;
|
||||
.flex-warp-item {
|
||||
min-height: 196.24px;
|
||||
padding: 0 7.5px 15px 15px !important;
|
||||
.flex-warp-item-box {
|
||||
border: none !important;
|
||||
border-bottom: 1px solid #ebeef5 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.big-data-down-center {
|
||||
width: 100% !important;
|
||||
.big-data-down-center-one,
|
||||
.big-data-down-center-two {
|
||||
min-height: 196.24px;
|
||||
padding-left: 15px !important;
|
||||
.big-data-down-center-one-content {
|
||||
border: none !important;
|
||||
border-bottom: 1px solid #ebeef5 !important;
|
||||
}
|
||||
.flex-warp-item-box {
|
||||
@extend .big-data-down-center-one-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
.big-data-down-right {
|
||||
.flex-warp-item {
|
||||
.flex-warp-item-box {
|
||||
border: none !important;
|
||||
border-bottom: 1px solid #ebeef5 !important;
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
padding-left: 15px !important;
|
||||
}
|
||||
&:last-of-type {
|
||||
.flex-warp-item-box {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度大于768px小于1200px
|
||||
------------------------------- */
|
||||
@media screen and (min-width: $sm) and (max-width: $lg) {
|
||||
.chart-warp-bottom {
|
||||
.big-data-down-left {
|
||||
width: 50% !important;
|
||||
}
|
||||
.big-data-down-center {
|
||||
width: 50% !important;
|
||||
}
|
||||
.big-data-down-right {
|
||||
.flex-warp-item {
|
||||
width: 50% !important;
|
||||
&:nth-of-type(2) {
|
||||
padding-left: 7.5px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度小于1200px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $lg) {
|
||||
.chart-warp-top {
|
||||
.up-left {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.chart-warp-bottom {
|
||||
overflow-y: auto !important;
|
||||
flex-wrap: wrap;
|
||||
.big-data-down-right {
|
||||
width: 100% !important;
|
||||
flex-direction: unset !important;
|
||||
flex-wrap: wrap;
|
||||
.flex-warp-item {
|
||||
min-height: 196.24px;
|
||||
padding: 0 7.5px 15px 15px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
10
web/src/theme/media/cityLinkage.scss
Normal file
10
web/src/theme/media/cityLinkage.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于576px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $xs) {
|
||||
.el-cascader__dropdown.el-popper {
|
||||
overflow: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
25
web/src/theme/media/date.scss
Normal file
25
web/src/theme/media/date.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于768px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $sm) {
|
||||
// 时间选择器适配
|
||||
.el-date-range-picker {
|
||||
width: 100vw;
|
||||
.el-picker-panel__body {
|
||||
min-width: 100%;
|
||||
.el-date-range-picker__content {
|
||||
.el-date-range-picker__header div {
|
||||
margin-left: 22px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
& + .el-date-range-picker__content {
|
||||
.el-date-range-picker__header div {
|
||||
margin-left: 0px;
|
||||
margin-right: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
12
web/src/theme/media/dialog.scss
Normal file
12
web/src/theme/media/dialog.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于800px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: 800px) {
|
||||
.el-dialog {
|
||||
width: 90% !important;
|
||||
}
|
||||
.el-dialog.is-fullscreen {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
45
web/src/theme/media/error.scss
Normal file
45
web/src/theme/media/error.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于768px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $sm) {
|
||||
.error {
|
||||
.error-flex {
|
||||
flex-direction: column-reverse !important;
|
||||
height: auto !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.right,
|
||||
.left {
|
||||
flex: unset !important;
|
||||
display: flex !important;
|
||||
}
|
||||
.left-item {
|
||||
margin: auto !important;
|
||||
}
|
||||
.right img {
|
||||
max-width: 450px !important;
|
||||
@extend .left-item;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度大于768px小于992px
|
||||
------------------------------- */
|
||||
@media screen and (min-width: $sm) and (max-width: $md) {
|
||||
.error {
|
||||
.error-flex {
|
||||
padding-left: 30px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度小于1200px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $lg) {
|
||||
.error {
|
||||
.error-flex {
|
||||
padding: 0 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
18
web/src/theme/media/form.scss
Normal file
18
web/src/theme/media/form.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于576px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $xs) {
|
||||
.el-form-item__label {
|
||||
width: 100% !important;
|
||||
text-align: left !important;
|
||||
// 移动端 label 右对齐问题
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
.el-form-item__content {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.el-form-item {
|
||||
display: unset !important;
|
||||
}
|
||||
}
|
||||
23
web/src/theme/media/home.scss
Normal file
23
web/src/theme/media/home.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于768px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $sm) {
|
||||
.home-media,
|
||||
.home-media-sm {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度小于1200px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $lg) {
|
||||
.home-media-lg {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.home-monitor {
|
||||
.flex-warp-item {
|
||||
width: 33.33% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
15
web/src/theme/media/index.scss
Normal file
15
web/src/theme/media/index.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
/* 栅格布局（媒体查询变量）
|
||||
* https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries
|
||||
* $us ≥376px 响应式栅格
|
||||
* $xs ≥576px 响应式栅格
|
||||
* $sm ≥768px 响应式栅格
|
||||
* $md ≥992px 响应式栅格
|
||||
* $lg ≥1200px 响应式栅格
|
||||
* $xl ≥1920px 响应式栅格
|
||||
------------------------------- */
|
||||
$us: 376px;
|
||||
$xs: 576px;
|
||||
$sm: 768px;
|
||||
$md: 992px;
|
||||
$lg: 1200px;
|
||||
$xl: 1920px;
|
||||
55
web/src/theme/media/layout.scss
Normal file
55
web/src/theme/media/layout.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于576px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $xs) {
|
||||
// MessageBox 弹框
|
||||
.el-message-box {
|
||||
width: 80% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度小于768px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $sm) {
|
||||
// Breadcrumb 面包屑
|
||||
.layout-navbars-breadcrumb-hide {
|
||||
display: none;
|
||||
}
|
||||
// 外链视图
|
||||
.layout-view-link {
|
||||
a {
|
||||
max-width: 80%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
// 菜单搜索
|
||||
.layout-search-dialog {
|
||||
.el-autocomplete {
|
||||
width: 80% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度小于1000px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: 1000px) {
|
||||
// 布局配置
|
||||
.layout-drawer-content-flex {
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '手机版不支持切换布局';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
height: 140px;
|
||||
line-height: 140px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
63
web/src/theme/media/login.scss
Normal file
63
web/src/theme/media/login.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于992px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $lg) {
|
||||
.login-container {
|
||||
.login-icon-group {
|
||||
&::before {
|
||||
content: '';
|
||||
height: 70% !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
width: 100px !important;
|
||||
height: 200px !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度小于992px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $md) {
|
||||
.login-content {
|
||||
right: unset !important;
|
||||
left: 50% !important;
|
||||
transform: translate(-50%, -50%) translate3d(0, 0, 0) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度小于576px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $xs) {
|
||||
.login-container {
|
||||
.login-icon-group {
|
||||
display: none !important;
|
||||
}
|
||||
.login-content {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
padding: 20px 0 !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: unset !important;
|
||||
border: none !important;
|
||||
}
|
||||
.el-form-item {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度小于375px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $us) {
|
||||
.login-container {
|
||||
.login-content-title {
|
||||
font-size: 18px !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
13
web/src/theme/media/media.scss
Normal file
13
web/src/theme/media/media.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
@import './login.scss';
|
||||
@import './error.scss';
|
||||
@import './layout.scss';
|
||||
@import './personal.scss';
|
||||
@import './tagsView.scss';
|
||||
@import './home.scss';
|
||||
@import './chart.scss';
|
||||
@import './form.scss';
|
||||
@import './scrollbar.scss';
|
||||
@import './pagination.scss';
|
||||
@import './dialog.scss';
|
||||
@import './cityLinkage.scss';
|
||||
@import './date.scss';
|
||||
15
web/src/theme/media/pagination.scss
Normal file
15
web/src/theme/media/pagination.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于576px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $xs) {
|
||||
.el-pager,
|
||||
.el-pagination__jump {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 默认居中对齐
|
||||
.el-pagination {
|
||||
text-align: center !important;
|
||||
}
|
||||
16
web/src/theme/media/personal.scss
Normal file
16
web/src/theme/media/personal.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于768px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $sm) {
|
||||
.personal-info {
|
||||
padding-left: 0 !important;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.personal-recommend-col {
|
||||
margin-bottom: 15px;
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
56
web/src/theme/media/scrollbar.scss
Normal file
56
web/src/theme/media/scrollbar.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于768px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $sm) {
|
||||
// 滚动条的宽度
|
||||
::-webkit-scrollbar {
|
||||
width: 3px !important;
|
||||
height: 3px !important;
|
||||
}
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background-color: var(--next-bg-main-color);
|
||||
}
|
||||
// 滚动条的设置
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(144, 147, 153, 0.3);
|
||||
background-clip: padding-box;
|
||||
min-height: 28px;
|
||||
border-radius: 5px;
|
||||
transition: 0.3s background-color;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(144, 147, 153, 0.5);
|
||||
}
|
||||
// element plus scrollbar
|
||||
.el-scrollbar__bar.is-vertical {
|
||||
width: 2px !important;
|
||||
}
|
||||
.el-scrollbar__bar.is-horizontal {
|
||||
height: 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度大于768px
|
||||
------------------------------- */
|
||||
@media screen and (min-width: 769px) {
|
||||
// 滚动条的宽度
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background-color: var(--next-bg-main-color);
|
||||
}
|
||||
// 滚动条的设置
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(144, 147, 153, 0.3);
|
||||
background-clip: padding-box;
|
||||
min-height: 28px;
|
||||
border-radius: 5px;
|
||||
transition: 0.3s background-color;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(144, 147, 153, 0.5);
|
||||
}
|
||||
}
|
||||
11
web/src/theme/media/tagsView.scss
Normal file
11
web/src/theme/media/tagsView.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于768px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $sm) {
|
||||
.tags-view-form {
|
||||
.tags-view-form-col {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
56
web/src/theme/mixins/index.scss
Normal file
56
web/src/theme/mixins/index.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
/* 第三方图标字体间距/大小设置
|
||||
------------------------------- */
|
||||
@mixin generalIcon {
|
||||
font-size: 14px !important;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 文本不换行
|
||||
------------------------------- */
|
||||
@mixin text-no-wrap() {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 多行文本溢出
|
||||
------------------------------- */
|
||||
@mixin text-ellipsis($line: 2) {
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $line;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
/* 滚动条(页面未使用) div 中使用：
|
||||
------------------------------- */
|
||||
// .test {
|
||||
// @include scrollBar;
|
||||
// }
|
||||
@mixin scrollBar {
|
||||
// 滚动条凹槽的颜色，还可以设置边框属性
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
// 滚动条的宽度
|
||||
&::-webkit-scrollbar {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
}
|
||||
// 滚动条的设置
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #dddddd;
|
||||
background-clip: padding-box;
|
||||
min-height: 28px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #bbb;
|
||||
}
|
||||
}
|
||||
36
web/src/theme/other.scss
Normal file
36
web/src/theme/other.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
/* wangeditor富文本编辑器
|
||||
------------------------------- */
|
||||
.editor-container {
|
||||
z-index: 9999;
|
||||
.w-e-toolbar {
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5) !important;
|
||||
border-bottom: 1px solid var(--el-border-color-light, #ebeef5) !important;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
z-index: 2 !important;
|
||||
}
|
||||
.w-e-text-container {
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5) !important;
|
||||
border-top: none !important;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
// textarea - css vars
|
||||
--w-e-textarea-bg-color: var(--el-color-white) !important;
|
||||
--w-e-textarea-color: var(--el-text-color-primary) !important;
|
||||
|
||||
// toolbar - css vars
|
||||
--w-e-toolbar-color: var(--el-text-color-primary) !important;
|
||||
--w-e-toolbar-bg-color: var(--el-color-white) !important;
|
||||
--w-e-toolbar-active-color: var(--el-text-color-primary) !important;
|
||||
--w-e-toolbar-active-bg-color: var(--next-color-menu-hover) !important;
|
||||
--w-e-toolbar-border-color: var(--el-border-color-light, #ebeef5) !important;
|
||||
|
||||
// modal - css vars
|
||||
--w-e-modal-button-bg-color: var(--el-color-primary) !important;
|
||||
--w-e-modal-button-border-color: var(--el-color-primary) !important;
|
||||
}
|
||||
101
web/src/theme/waves.scss
Normal file
101
web/src/theme/waves.scss
Normal file
@@ -0,0 +1,101 @@
|
||||
/* Waves v0.6.0
|
||||
* http://fian.my.id/Waves
|
||||
*
|
||||
* Copyright 2014 Alfiana E. Sibuea and other contributors
|
||||
* Released under the MIT license
|
||||
* https://github.com/fians/Waves/blob/master/LICENSE
|
||||
*/
|
||||
.waves-effect {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
vertical-align: middle;
|
||||
z-index: 1;
|
||||
will-change: opacity, transform;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
.waves-effect .waves-ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: -10px;
|
||||
margin-left: -10px;
|
||||
opacity: 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.7s ease-out;
|
||||
transition-property: opacity, -webkit-transform;
|
||||
transition-property: transform, opacity;
|
||||
transition-property: transform, opacity, -webkit-transform;
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
pointer-events: none;
|
||||
}
|
||||
.waves-effect.waves-light .waves-ripple {
|
||||
background-color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
.waves-effect.waves-red .waves-ripple {
|
||||
background-color: rgba(244, 67, 54, 0.7);
|
||||
}
|
||||
.waves-effect.waves-yellow .waves-ripple {
|
||||
background-color: rgba(255, 235, 59, 0.7);
|
||||
}
|
||||
.waves-effect.waves-orange .waves-ripple {
|
||||
background-color: rgba(255, 152, 0, 0.7);
|
||||
}
|
||||
.waves-effect.waves-purple .waves-ripple {
|
||||
background-color: rgba(156, 39, 176, 0.7);
|
||||
}
|
||||
.waves-effect.waves-green .waves-ripple {
|
||||
background-color: rgba(76, 175, 80, 0.7);
|
||||
}
|
||||
.waves-effect.waves-teal .waves-ripple {
|
||||
background-color: rgba(0, 150, 136, 0.7);
|
||||
}
|
||||
.waves-effect input[type='button'],
|
||||
.waves-effect input[type='reset'],
|
||||
.waves-effect input[type='submit'] {
|
||||
border: 0;
|
||||
font-style: normal;
|
||||
font-size: inherit;
|
||||
text-transform: inherit;
|
||||
background: none;
|
||||
}
|
||||
.waves-notransition {
|
||||
transition: none !important;
|
||||
}
|
||||
.waves-circle {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000 100%);
|
||||
}
|
||||
.waves-input-wrapper {
|
||||
border-radius: 0.2em;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.waves-input-wrapper .waves-button-input {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.waves-circle {
|
||||
text-align: center;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
line-height: 2.5em;
|
||||
border-radius: 50%;
|
||||
-webkit-mask-image: none;
|
||||
}
|
||||
.waves-block {
|
||||
display: block;
|
||||
}
|
||||
a.waves-effect .waves-ripple {
|
||||
z-index: -1;
|
||||
}
|
||||
Reference in New Issue
Block a user