init
This commit is contained in:
吴红兵
339
src/theme/app.scss
Normal file
339
src/theme/app.scss
Normal file
@@ -0,0 +1,339 @@
|
||||
/* 初始化样式
|
||||
------------------------------- */
|
||||
* {
|
||||
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;
|
||||
--next-text-color: #333333;
|
||||
}
|
||||
|
||||
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;
|
||||
color: var(--next-text-color);
|
||||
}
|
||||
|
||||
/* 主布局样式
|
||||
------------------------------- */
|
||||
.layout-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.layout-pd {
|
||||
padding: 5px !important;
|
||||
}
|
||||
.layout-flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
.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;
|
||||
height: auto !important;
|
||||
}
|
||||
.layout-main {
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
background-color: var(--next-bg-main-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// 内层 el-scrollbar样式，用于界面高度自适应（main.vue）
|
||||
.layout-main-scroll {
|
||||
@extend .layout-flex;
|
||||
.layout-parent {
|
||||
@extend .layout-flex;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 用于界面高度自适应
|
||||
.layout-padding {
|
||||
@extend .layout-pd;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
@extend .layout-flex;
|
||||
&-auto {
|
||||
height: inherit;
|
||||
@extend .layout-flex;
|
||||
padding: 10px;
|
||||
}
|
||||
&-view {
|
||||
background: var(--el-color-white);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
// 用于界面高度自适应，主视图区 main 的内边距，用于 iframe
|
||||
.layout-padding-unset {
|
||||
padding: 0 !important;
|
||||
&-view {
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
// 用于设置 iframe loading 时的高度（loading 垂直居中显示）
|
||||
.layout-iframe {
|
||||
height: 100%;
|
||||
.el-loading-parent--relative {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.el-scrollbar {
|
||||
width: 100%;
|
||||
}
|
||||
.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-250 {
|
||||
width: 250px !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-mian-height-50 {
|
||||
height: calc(100vh - 50px);
|
||||
}
|
||||
.layout-columns-warp {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
.layout-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 面包屑修改默认颜色和字体粗细
|
||||
.layout-navbars-tagsview-ul {
|
||||
.is-active {
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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 !important;
|
||||
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;
|
||||
}
|
||||
}
|
||||
147
src/theme/common/transition.scss
Normal file
147
src/theme/common/transition.scss
Normal file
@@ -0,0 +1,147 @@
|
||||
/* 页面切换动画
|
||||
------------------------------- */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 登录页动画
|
||||
------------------------------- */
|
||||
@keyframes loginLeft {
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
50%,
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
@keyframes loginTop {
|
||||
0% {
|
||||
top: -100%;
|
||||
}
|
||||
50%,
|
||||
100% {
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
@keyframes loginRight {
|
||||
0% {
|
||||
right: -100%;
|
||||
}
|
||||
50%,
|
||||
100% {
|
||||
right: 100%;
|
||||
}
|
||||
}
|
||||
@keyframes loginBottom {
|
||||
0% {
|
||||
bottom: -100%;
|
||||
}
|
||||
50%,
|
||||
100% {
|
||||
bottom: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 左右左 link.vue
|
||||
------------------------------- */
|
||||
@keyframes toRight {
|
||||
0% {
|
||||
left: -5px;
|
||||
}
|
||||
50% {
|
||||
left: 100%;
|
||||
}
|
||||
100% {
|
||||
left: -5px;
|
||||
}
|
||||
}
|
||||
458
src/theme/dark.scss
Normal file
458
src/theme/dark.scss
Normal file
@@ -0,0 +1,458 @@
|
||||
/* 深色模式基础变量
|
||||
------------------------------- */
|
||||
[data-theme='dark'] {
|
||||
// 基础变量 - Twitter深色主题配色
|
||||
--next-bg-main: #17202a; // Twitter标准深色背景
|
||||
--next-color-white: #f7f9f9; // 主要文字颜色
|
||||
--next-text-color: #f7f9f9; // 主要文字颜色
|
||||
--next-color-disabled: #202e3a; // 禁用状态背景
|
||||
--next-color-bar: #e7e9ea; // 顶部栏文字
|
||||
--next-color-primary: #2c3640; // 主要前景色
|
||||
--next-border-color: #38444d; // 边框颜色
|
||||
--next-border-black: #2f3336; // 深色边框
|
||||
--next-border-columns: #38444d; // 列分隔符
|
||||
--next-color-seting: #273340; // 设置面板背景
|
||||
--next-text-color-regular: #8b98a5; // 常规文字
|
||||
--next-text-color-placeholder: #536471; // 占位符文字
|
||||
--next-color-hover: #1e2732; // 悬停背景
|
||||
--next-color-hover-rgba: rgba(239, 243, 244, 0.1); // 半透明悬停效果
|
||||
|
||||
// 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-menuBarActiveColor: var(--next-color-hover-rgba) !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-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%);
|
||||
--el-fill-color-lighter: var(--next-color-hover-rgba) !important;
|
||||
|
||||
/* Element Plus 组件深色模式样式
|
||||
------------------------------- */
|
||||
// Table 表格
|
||||
.el-table {
|
||||
--el-table-border-color: var(--next-border-color);
|
||||
--el-table-header-bg-color: var(--next-color-primary);
|
||||
--el-table-row-hover-bg-color: var(--next-color-hover);
|
||||
color: var(--next-color-white);
|
||||
th.el-table__cell {
|
||||
background-color: #1c2732; // 表头背景色调整
|
||||
}
|
||||
.el-button.is-text {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Button 按钮
|
||||
.el-button {
|
||||
transition: opacity 0.3s, border-color 0.3s;
|
||||
|
||||
&:not(.is-disabled):hover {
|
||||
border-color: var(--next-border-color) !important;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
.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__header .el-tabs__item.is-active {
|
||||
background: var(--next-color-primary-lighter);
|
||||
}
|
||||
}
|
||||
|
||||
// Alert 警告
|
||||
.el-alert,
|
||||
.notice-bar {
|
||||
border: 1px solid var(--next-border-color) !important;
|
||||
background-color: var(--next-color-disabled) !important;
|
||||
}
|
||||
|
||||
// Card 卡片
|
||||
.el-card {
|
||||
--el-card-bg-color: var(--next-color-disabled);
|
||||
border-color: var(--next-border-color);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
// Tag 标签
|
||||
.el-tag {
|
||||
background-color: var(--next-bg-color) !important;
|
||||
|
||||
// 各种类型的标签样式
|
||||
&.el-tag--info {
|
||||
--el-tag-bg-color: rgba(239, 243, 244, 0.1);
|
||||
--el-tag-text-color: #8b98a5;
|
||||
}
|
||||
|
||||
&.el-tag--primary {
|
||||
--el-tag-bg-color: rgba(29, 155, 240, 0.1);
|
||||
--el-tag-text-color: #1d9bf0;
|
||||
}
|
||||
|
||||
&.el-tag--success {
|
||||
--el-tag-bg-color: rgba(0, 186, 124, 0.1);
|
||||
--el-tag-text-color: #00ba7c;
|
||||
}
|
||||
|
||||
&.el-tag--warning {
|
||||
--el-tag-bg-color: rgba(255, 212, 0, 0.1);
|
||||
--el-tag-text-color: #ffd400;
|
||||
}
|
||||
|
||||
&.el-tag--danger {
|
||||
--el-tag-bg-color: rgba(244, 33, 46, 0.1);
|
||||
--el-tag-text-color: #f4212e;
|
||||
}
|
||||
}
|
||||
|
||||
// Dialog 对话框
|
||||
.el-dialog {
|
||||
--el-dialog-bg-color: #17202a;
|
||||
border: 1px solid var(--next-border-color);
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
|
||||
border-radius: 8px;
|
||||
|
||||
.el-dialog__header {
|
||||
border-bottom: 1px solid var(--next-border-color);
|
||||
padding: 16px 20px;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
border-top: 1px solid var(--next-border-color);
|
||||
padding: 12px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Form 表单
|
||||
.el-form {
|
||||
.el-form-item__label {
|
||||
color: var(--next-color-bar);
|
||||
}
|
||||
|
||||
.el-input,
|
||||
.el-textarea {
|
||||
--el-input-bg-color: #273340;
|
||||
--el-input-border-color: #38444d;
|
||||
--el-input-hover-border-color: #8b98a5;
|
||||
--el-input-focus-border-color: #293540;
|
||||
|
||||
&.is-focus {
|
||||
box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动条样式
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #38444d;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: #536471;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #17202a;
|
||||
}
|
||||
|
||||
// Tree 树形控件
|
||||
.el-tree {
|
||||
--el-tree-node-hover-bg-color: var(--next-color-hover);
|
||||
--el-tree-node-content-height: 32px;
|
||||
background-color: transparent;
|
||||
color: var(--next-color-white);
|
||||
|
||||
.el-tree-node {
|
||||
&:focus > .el-tree-node__content {
|
||||
background-color: var(--next-color-hover);
|
||||
}
|
||||
|
||||
&.is-current > .el-tree-node__content {
|
||||
background-color: rgba(29, 155, 240, 0.1);
|
||||
color: #1d9bf0;
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
&:hover {
|
||||
background-color: var(--next-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 展开/折叠图标
|
||||
.el-tree-node__expand-icon {
|
||||
color: var(--next-text-color-regular);
|
||||
|
||||
&.is-leaf {
|
||||
color: var(--next-text-color-placeholder);
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义图标
|
||||
.custom-tree-node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
.icon {
|
||||
margin-right: 8px;
|
||||
color: var(--next-text-color-regular);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Switch 开关
|
||||
.el-switch {
|
||||
--el-switch-off-color: rgba(239, 243, 244, 0.1); // Twitter深色模式下的关闭背景色
|
||||
--el-switch-on-color: #1d9bf0; // Twitter蓝色
|
||||
|
||||
.el-switch__core {
|
||||
.el-switch__action {
|
||||
background-color: var(--next-color-white);
|
||||
|
||||
.is-icon,
|
||||
.is-text {
|
||||
color: var(--next-color-white);
|
||||
}
|
||||
}
|
||||
|
||||
// 开关关闭时的圆点样式
|
||||
&:not(.is-checked) .el-switch__action {
|
||||
background-color: var(--next-text-color-regular);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-checked {
|
||||
.el-switch__core {
|
||||
.el-switch__action {
|
||||
background-color: var(--next-color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 禁用状态
|
||||
&.is-disabled {
|
||||
opacity: 0.5;
|
||||
|
||||
.el-switch__core {
|
||||
cursor: not-allowed;
|
||||
|
||||
.el-switch__action {
|
||||
background-color: var(--next-text-color-placeholder);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination 分页
|
||||
.el-pagination {
|
||||
--el-pagination-bg-color: transparent;
|
||||
--el-pagination-hover-color: #1d9bf0;
|
||||
color: var(--next-color-white);
|
||||
|
||||
// 总条数和跳转文字
|
||||
.el-pagination__total,
|
||||
.el-pagination__jump {
|
||||
color: var(--next-text-color-regular);
|
||||
}
|
||||
|
||||
// 每页条数选择器
|
||||
.el-pagination__sizes {
|
||||
.el-select {
|
||||
.el-input {
|
||||
--el-select-input-focus-border-color: #1d9bf0;
|
||||
|
||||
.el-input__wrapper {
|
||||
background-color: #202e3a;
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--next-border-color);
|
||||
|
||||
&:hover {
|
||||
border-color: #1d9bf0;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
color: var(--next-color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 页码
|
||||
.el-pager {
|
||||
background-color: transparent;
|
||||
|
||||
li {
|
||||
background-color: transparent;
|
||||
color: var(--next-color-white);
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-radius: 16px;
|
||||
font-weight: normal;
|
||||
border: none;
|
||||
|
||||
&:hover:not(.is-active) {
|
||||
color: #1d9bf0;
|
||||
background-color: rgba(29, 155, 240, 0.1);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: #1d9bf0;
|
||||
color: var(--next-color-white);
|
||||
}
|
||||
|
||||
// 省略号
|
||||
&.more::before {
|
||||
color: var(--next-text-color-regular);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 前进后退按钮
|
||||
.btn-prev,
|
||||
.btn-next {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 0 8px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 16px;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: rgba(29, 155, 240, 0.1);
|
||||
|
||||
.el-icon {
|
||||
color: #1d9bf0;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: transparent;
|
||||
|
||||
.el-icon {
|
||||
color: var(--next-text-color-placeholder);
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
color: var(--next-color-white);
|
||||
}
|
||||
}
|
||||
|
||||
// 跳转输入框
|
||||
.el-pagination__editor.el-input {
|
||||
.el-input__wrapper {
|
||||
background-color: #202e3a;
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--next-border-color);
|
||||
|
||||
&:hover {
|
||||
border-color: #1d9bf0;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
color: var(--next-color-white);
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-focus .el-input__wrapper {
|
||||
border-color: #1d9bf0;
|
||||
box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add TagsView dark mode styles
|
||||
.layout-navbars-tagsview {
|
||||
.layout-navbars-tagsview-ul {
|
||||
.tags-style-five-svg {
|
||||
// Update mask color for dark mode
|
||||
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAiIGhlaWdodD0iNzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSI+CgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKC0wLjEzMzUwNiA1MC4xMTkyIDUwKSIgaWQ9InN2Z18xIiBkPSJtMTAwLjExOTE5LDEwMGMtNTUuMjI4LDAgLTEwMCwtNDQuNzcyIC0xMDAsLTEwMGwwLDEwMGwxMDAsMHoiIG9wYWNpdHk9InVuZGVmaW5lZCIgc3Ryb2tlPSJudWxsIiBmaWxsPSIjMjAyZTNhIi8+CiAgPC9nPgo8L3N2Zz4=');
|
||||
background-color: var(--next-color-hover);
|
||||
}
|
||||
|
||||
.layout-navbars-tagsview-ul-li {
|
||||
&:hover {
|
||||
background-color: var(--next-color-hover) !important;
|
||||
color: var(--next-color-white) !important;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: var(--next-color-hover) !important;
|
||||
color: #1d9bf0 !important; // Twitter blue
|
||||
border-color: transparent !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--next-color-hover) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
476
src/theme/element.scss
Normal file
476
src/theme/element.scss
Normal file
@@ -0,0 +1,476 @@
|
||||
@import 'mixins/index.scss';
|
||||
|
||||
/* Button 按钮
|
||||
------------------------------- */
|
||||
// 第三方字体图标大小
|
||||
.el-button:not(.is-circle) 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;
|
||||
}
|
||||
|
||||
.el-button--small i.iconfont,
|
||||
.el-button--small i.fa {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.el-button [class*='el-icon'] + span {
|
||||
margin-left: 6px;
|
||||
}
|
||||
/* Input 输入框、InputNumber 计数器
|
||||
------------------------------- */
|
||||
// 菜单搜索
|
||||
.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;
|
||||
}
|
||||
// 修改表单项默认右边距
|
||||
.el-form-item {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item .el-form-item__label .el-icon {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
// 修改数字输入框默认宽度为100%
|
||||
.el-input-number {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// https://github.com/element-plus/element-plus/pull/15352
|
||||
.el-form--inline {
|
||||
.el-form-item {
|
||||
& > .el-input,
|
||||
.el-cascader,
|
||||
.el-select,
|
||||
.el-date-editor,
|
||||
.el-autocomplete {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Alert 警告
|
||||
------------------------------- */
|
||||
.el-alert {
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.el-alert__title {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Message 消息提示
|
||||
------------------------------- */
|
||||
.el-message {
|
||||
min-width: unset !important;
|
||||
padding: 12px 20px !important;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 4px;
|
||||
|
||||
.el-message__content {
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
|
||||
.el-message__icon {
|
||||
margin-right: 8px;
|
||||
font-size: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// 成功类型
|
||||
&.el-message--success {
|
||||
background-color: #f0f9eb;
|
||||
border-color: #67c23a;
|
||||
.el-message__content {
|
||||
color: #67c23a;
|
||||
}
|
||||
}
|
||||
|
||||
// 警告类型
|
||||
&.el-message--warning {
|
||||
background-color: #fdf6ec;
|
||||
border-color: #e6a23c;
|
||||
.el-message__content {
|
||||
color: #e6a23c;
|
||||
}
|
||||
}
|
||||
|
||||
// 错误类型
|
||||
&.el-message--error {
|
||||
background-color: #fef0f0;
|
||||
border-color: #f56c6c;
|
||||
.el-message__content {
|
||||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
|
||||
// 信息类型
|
||||
&.el-message--info {
|
||||
background-color: #f4f4f5;
|
||||
border-color: #909399;
|
||||
.el-message__content {
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* NavMenu 导航菜单
|
||||
------------------------------- */
|
||||
// 鼠标 hover 时颜色
|
||||
.el-menu-hover-bg-color {
|
||||
background-color: var(--next-bg-menuBarActiveColor) !important;
|
||||
}
|
||||
|
||||
// 默认样式修改
|
||||
.el-menu {
|
||||
border-right: none !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
height: 56px !important;
|
||||
line-height: 56px !important;
|
||||
}
|
||||
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
color: var(--next-bg-menuBarColor) !important;
|
||||
}
|
||||
|
||||
// 修复点击左侧菜单折叠再展开时，宽度不跟随问题
|
||||
.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-menu-item .svg-icon,
|
||||
.el-sub-menu .svg-icon,
|
||||
.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-menu-item:hover {
|
||||
@extend .el-menu-hover-bg-color;
|
||||
}
|
||||
|
||||
.el-sub-menu.is-active.is-opened .el-sub-menu__title {
|
||||
background-color: unset !important;
|
||||
}
|
||||
|
||||
// 水平菜单、横向菜单折叠 a 标签
|
||||
.el-popper.is-dark a {
|
||||
color: var(--el-color-white) !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// 横向菜单（经典、横向）布局
|
||||
.el-menu.el-menu--horizontal {
|
||||
border-bottom: none !important;
|
||||
width: 100% !important;
|
||||
|
||||
// 横向布局默认选中的字体颜色同步为左侧菜单颜色（默认黑色）
|
||||
.el-sub-menu.is-active .el-sub-menu__title {
|
||||
color: var(--next-bg-menuBarColor) !important;
|
||||
}
|
||||
|
||||
// 经典布局，当选中状态的时候字体颜色同步为左侧菜单颜色（默认黑色）
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
height: 50px !important;
|
||||
color: var(--next-bg-topBarColor) !important;
|
||||
&:hover,
|
||||
&.is-active {
|
||||
color: var(--next-bg-menuBarColor) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item:not(.is-active):hover,
|
||||
.el-sub-menu:not(.is-active):hover .el-sub-menu__title {
|
||||
color: var(--next-bg-topBarColor);
|
||||
}
|
||||
}
|
||||
|
||||
// 添加弹出子菜单容器的样式
|
||||
.el-menu--horizontal.el-menu--popup-container {
|
||||
.el-menu.el-menu--popup {
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
height: 56px !important;
|
||||
line-height: 56px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
overflow: hidden;
|
||||
|
||||
.el-dialog__header {
|
||||
margin: 0;
|
||||
padding: 16px 20px;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
|
||||
.el-dialog__close {
|
||||
font-size: 18px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(90deg);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px !important;
|
||||
max-height: calc(90vh - 120px) !important;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 12px 20px;
|
||||
|
||||
.el-button {
|
||||
padding: 8px 20px;
|
||||
min-width: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
--el-transition-duration: 0.3s;
|
||||
|
||||
&.dialog-fade-enter-active {
|
||||
animation: dialog-fade-in var(--el-transition-duration);
|
||||
}
|
||||
|
||||
&.dialog-fade-leave-active {
|
||||
animation: dialog-fade-out var(--el-transition-duration);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dialog-fade-in {
|
||||
0% {
|
||||
transform: translate3d(0, -30px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dialog-fade-out {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, -30px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Card 卡片
|
||||
------------------------------- */
|
||||
.el-card__header {
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
// 日历
|
||||
.el-calendar-table .el-calendar-day {
|
||||
height: 50px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Table 表格 element plus 2.2.0 版本
|
||||
------------------------------- */
|
||||
// 表格修改默认颜色
|
||||
.el-table {
|
||||
color: #000000;
|
||||
.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;
|
||||
}
|
||||
|
||||
/*修复Select 选择器高度问题*/
|
||||
.el-select-dropdown__wrap {
|
||||
max-height: 274px !important;
|
||||
}
|
||||
|
||||
/*修复Cascader 级联选择器高度问题*/
|
||||
.el-cascader-menu__wrap.el-scrollbar__wrap {
|
||||
height: 204px !important;
|
||||
}
|
||||
|
||||
/*用于界面高度自适应（main.vue），区分 scrollbar__view，防止其它使用 scrollbar 的地方出现滚动条消失*/
|
||||
.layout-container-view .el-scrollbar__view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/*防止分栏布局二级菜单很多时，滚动条消失问题*/
|
||||
.layout-columns-warp .layout-aside .el-scrollbar__view {
|
||||
height: unset !important;
|
||||
}
|
||||
|
||||
/* Pagination 分页
|
||||
------------------------------- */
|
||||
.el-pagination__editor {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
margin-top: 15px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/*深色模式时分页高亮问题*/
|
||||
.el-pagination.is-background .btn-next.is-active,
|
||||
.el-pagination.is-background .btn-prev.is-active,
|
||||
.el-pagination.is-background .el-pager li.is-active {
|
||||
background-color: var(--el-color-primary) !important;
|
||||
color: var(--el-color-white) !important;
|
||||
}
|
||||
|
||||
.el-empty {
|
||||
--el-empty-padding: 0 0 !important;
|
||||
}
|
||||
|
||||
// 防止被tailwindcss默认样式覆盖
|
||||
svg {
|
||||
display: inline;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
// 覆盖默认样式宽度
|
||||
.el-date-editor.el-input, .el-date-editor.el-input__wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 表单设计器元素布局增加间距
|
||||
.fc-form-row .fc-form-col {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
31
src/theme/iconSelector.scss
Normal file
31
src/theme/iconSelector.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
/* Popover 弹出框(图标选择器)
|
||||
------------------------------- */
|
||||
.icon-selector-popper {
|
||||
padding: 0 !important;
|
||||
.icon-selector-warp {
|
||||
height: 260px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.icon-selector-warp-title {
|
||||
position: absolute;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
left: 15px;
|
||||
}
|
||||
.el-tabs__header {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 0 15px;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
margin: 0 !important;
|
||||
.el-tabs__nav-wrap {
|
||||
&::after {
|
||||
height: 0 !important;
|
||||
}
|
||||
.el-tabs__item {
|
||||
padding: 0 5px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
8
src/theme/index.scss
Normal file
8
src/theme/index.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
@import './app.scss';
|
||||
@import 'common/transition.scss';
|
||||
@import './other.scss';
|
||||
@import './element.scss';
|
||||
@import './media/media.scss';
|
||||
@import './waves.scss';
|
||||
@import './dark.scss';
|
||||
@import './login.scss';
|
||||
51
src/theme/loading.scss
Normal file
51
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);
|
||||
}
|
||||
}
|
||||
196
src/theme/login.scss
Normal file
196
src/theme/login.scss
Normal file
@@ -0,0 +1,196 @@
|
||||
// 用户名密码登录
|
||||
.login-content-form {
|
||||
margin-top: 20px;
|
||||
|
||||
@for $i from 1 through 4 {
|
||||
.login-animation#{$i} {
|
||||
opacity: 0;
|
||||
animation-name: error-num;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: calc($i/10) + s;
|
||||
}
|
||||
}
|
||||
|
||||
.login-content-password {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.login-content-code {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
|
||||
.login-content-submit {
|
||||
width: 100%;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 300;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.login-msg {
|
||||
color: var(--el-text-color-placeholder);
|
||||
}
|
||||
}
|
||||
|
||||
// 社交登录
|
||||
.social-container {
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.box {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.container {
|
||||
$height: 50px;
|
||||
display: inline-block;
|
||||
width: $height;
|
||||
height: $height;
|
||||
line-height: $height;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.select-none {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.wave {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
.login-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 18rem;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.img {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.img img {
|
||||
z-index: 0;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
font-family: PingFang SC, Arial, Hiragino Sans GB, Microsoft YaHei, sans-serif;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.login-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
//.avatar {
|
||||
// width: 350px;
|
||||
// height: 80px;
|
||||
//}
|
||||
|
||||
.login-form h2 {
|
||||
text-transform: uppercase;
|
||||
margin: 15px 0;
|
||||
color: #999;
|
||||
font: bold 200% Consolas, Monaco, monospace;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1180px) {
|
||||
.login-container {
|
||||
grid-gap: 4rem;
|
||||
}
|
||||
.login-form {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.login-form h2 {
|
||||
font-size: 2.4rem;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.img img {
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 280px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 968px) {
|
||||
.wave {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.login-box {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* 增强过渡动画效果 */
|
||||
.transition-all {
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* 优化阴影效果 */
|
||||
.shadow-lg {
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 深色模式下的阴影效果 */
|
||||
:deep(.dark) .shadow-lg {
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 添加hover效果 */
|
||||
.bg-white {
|
||||
transition: transform 0.3s ease;
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
94
src/theme/media/chart.scss
Normal file
94
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
src/theme/media/cityLinkage.scss
Normal file
10
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
src/theme/media/date.scss
Normal file
25
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
src/theme/media/dialog.scss
Normal file
12
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
src/theme/media/error.scss
Normal file
45
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
31
src/theme/media/form.scss
Normal file
31
src/theme/media/form.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
@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;
|
||||
}
|
||||
// 表格演示中的表单筛选
|
||||
.table-form-btn {
|
||||
display: flex !important;
|
||||
.el-form-item__label {
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
// 表格演示中的表单筛选最大高度，适配移动端
|
||||
.table-search-container {
|
||||
max-height: 160px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
23
src/theme/media/home.scss
Normal file
23
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
src/theme/media/index.scss
Normal file
15
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;
|
||||
59
src/theme/media/layout.scss
Normal file
59
src/theme/media/layout.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
// pagination 分页中的工具栏
|
||||
.table-footer-tool {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
74
src/theme/media/login.scss
Normal file
74
src/theme/media/login.scss
Normal file
@@ -0,0 +1,74 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于1200px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $lg) and (min-width: $xs) {
|
||||
.login-container {
|
||||
.login-left {
|
||||
.login-left-img {
|
||||
top: 90% !important;
|
||||
left: 12% !important;
|
||||
width: 30% !important;
|
||||
height: 18% !important;
|
||||
}
|
||||
}
|
||||
.login-right {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度小于576px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $xs) {
|
||||
.login-container {
|
||||
.login-left {
|
||||
display: none;
|
||||
}
|
||||
.login-right {
|
||||
width: 100% !important;
|
||||
.login-right-warp {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border: none !important;
|
||||
.login-right-warp-mian {
|
||||
.el-form-item {
|
||||
display: flex !important;
|
||||
}
|
||||
.login-right-warp-main-title {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
.login-right-warp-one {
|
||||
&::after {
|
||||
right: 0 !important;
|
||||
}
|
||||
}
|
||||
.login-right-warp-two {
|
||||
&::before {
|
||||
bottom: 1px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度小于375px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $us) {
|
||||
.login-container {
|
||||
.login-right {
|
||||
.login-right-warp {
|
||||
.login-right-warp-mian {
|
||||
.login-right-warp-main-title {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
13
src/theme/media/media.scss
Normal file
13
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
src/theme/media/pagination.scss
Normal file
15
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,
|
||||
.table-footer {
|
||||
justify-content: center !important;
|
||||
}
|
||||
}
|
||||
16
src/theme/media/personal.scss
Normal file
16
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
src/theme/media/scrollbar.scss
Normal file
56
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
src/theme/media/tagsView.scss
Normal file
11
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
src/theme/mixins/index.scss
Normal file
56
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 !important;
|
||||
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
src/theme/other.scss
Normal file
36
src/theme/other.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
/* wangeditor 富文本编辑器
|
||||
------------------------------- */
|
||||
.editor-container {
|
||||
z-index: 10; // 用于 wangeditor 点击全屏时
|
||||
.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;
|
||||
}
|
||||
27
src/theme/tableTool.scss
Normal file
27
src/theme/tableTool.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
.table-tool-popper {
|
||||
padding: 0 !important;
|
||||
.tool-box {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
box-sizing: border-box;
|
||||
color: var(--el-text-color-primary);
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
.tool-sortable {
|
||||
max-height: 303px;
|
||||
.tool-sortable-item {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
color: var(--el-text-color-primary);
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
&:hover {
|
||||
background: var(--el-fill-color-lighter);
|
||||
}
|
||||
i {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
3
src/theme/tailwind.css
Normal file
3
src/theme/tailwind.css
Normal file
@@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
101
src/theme/waves.scss
Normal file
101
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