feat: 更新UI主题和样式，优化页面布局和交互
- 将侧边栏主题从深色改为浅色 - 移除多个组件的背景色和金属风格样式 - 调整按钮、表格和分页组件的样式和间距 - 新增easycode扫码功能页面 - 更新基础URL配置和应用版本号 - 优化登录后跳转逻辑和登出功能 - 调整滚动条和菜单项的样式
This commit is contained in:
砂糖
@@ -41,11 +41,11 @@
|
||||
@include colorBtn($yellow)
|
||||
}
|
||||
|
||||
.pan-btn {
|
||||
.el-button.pan-btn {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
padding: 14px 36px;
|
||||
border-radius: 8px;
|
||||
padding: 4px !important;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
outline: none;
|
||||
transition: 600ms ease all;
|
||||
@@ -81,7 +81,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
.el-button.custom-button {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
@@ -93,7 +93,21 @@
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
padding: 10px 15px;
|
||||
padding: 2px !important;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
||||
.el-table__cell {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.el-table__cell .el-button {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.el-table__cell + .el-button {
|
||||
margin-left: 4px !important;
|
||||
padding: 0;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -4,7 +4,8 @@
|
||||
**/
|
||||
|
||||
/* theme color */
|
||||
$--color-primary: #647b98;
|
||||
$--color-primary: #5F7BA0;
|
||||
// $--color-primary: #2bf;
|
||||
$--color-success: #13ce66;
|
||||
$--color-warning: #ffba00;
|
||||
$--color-danger: #ff4949;
|
||||
@@ -26,6 +27,6 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
:export {
|
||||
theme: $--color-primary;
|
||||
}
|
||||
// :export {
|
||||
// theme: $--color-primary;
|
||||
// }
|
||||
|
||||
@@ -10,7 +10,6 @@ body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
background-color: #a1a6ac;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
291
apps/l2/src/assets/styles/klp.scss
Normal file
291
apps/l2/src/assets/styles/klp.scss
Normal file
@@ -0,0 +1,291 @@
|
||||
/**
|
||||
* 通用css样式布局处理
|
||||
* Copyright (c) 2019 klp
|
||||
*/
|
||||
|
||||
/** 基础通用 **/
|
||||
.pt5 {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.pr5 {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.pb5 {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.mt5 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.mr5 {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.mb5 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.mb8 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ml5 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.mt10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mr10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mb10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ml10 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.mt20 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.mr20 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.mb20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.ml20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.el-message-box__status + .el-message-box__message{
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.el-dialog:not(.is-fullscreen) {
|
||||
margin-top: 6vh !important;
|
||||
}
|
||||
|
||||
.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 70vh;
|
||||
padding: 10px 20px 0;
|
||||
}
|
||||
|
||||
// .el-table {
|
||||
// .el-table__header-wrapper, .el-table__fixed-header-wrapper {
|
||||
// th {
|
||||
// word-break: break-word;
|
||||
// background-color: #f8f8f9;
|
||||
// color: #515a6e;
|
||||
// height: 40px;
|
||||
// font-size: 13px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .el-table__body-wrapper {
|
||||
// .el-button [class*="el-icon-"] + span {
|
||||
// margin-left: 1px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
/** 表单布局 **/
|
||||
// .form-header {
|
||||
// font-size: 15px;
|
||||
// color: #6379bb;
|
||||
// border-bottom: 1px solid #ddd;
|
||||
// margin: 8px 10px 25px 10px;
|
||||
// padding-bottom: 5px
|
||||
// }
|
||||
|
||||
// /** 表格布局 **/
|
||||
// .pagination-container {
|
||||
// position: relative;
|
||||
// height: 25px;
|
||||
// margin-bottom: 10px;
|
||||
// margin-top: 15px;
|
||||
// padding: 10px 20px !important;
|
||||
// }
|
||||
|
||||
/* tree border */
|
||||
// .tree-border {
|
||||
// margin-top: 5px;
|
||||
// border: 1px solid #e5e6e7;
|
||||
// background: #FFFFFF none;
|
||||
// border-radius: 4px;
|
||||
// }
|
||||
|
||||
// .pagination-container .el-pagination {
|
||||
// right: 0;
|
||||
// position: absolute;
|
||||
// }
|
||||
|
||||
// @media (max-width: 768px) {
|
||||
// .pagination-container .el-pagination > .el-pagination__jump {
|
||||
// display: none !important;
|
||||
// }
|
||||
// .pagination-container .el-pagination > .el-pagination__sizes {
|
||||
// display: none !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .el-table .fixed-width .el-button--mini {
|
||||
// padding-left: 0;
|
||||
// padding-right: 0;
|
||||
// width: inherit;
|
||||
// }
|
||||
|
||||
// /** 表格更多操作下拉样式 */
|
||||
// .el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine {
|
||||
// cursor: pointer;
|
||||
// margin-left: 5px;
|
||||
// }
|
||||
|
||||
// .el-table .el-dropdown, .el-icon-arrow-down {
|
||||
// font-size: 12px;
|
||||
// }
|
||||
|
||||
// .el-tree-node__content > .el-checkbox {
|
||||
// margin-right: 8px;
|
||||
// }
|
||||
|
||||
.list-group-striped > .list-group-item {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.list-group {
|
||||
padding-left: 0px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
border-bottom: 1px solid #e7eaec;
|
||||
border-top: 1px solid #e7eaec;
|
||||
margin-bottom: -1px;
|
||||
padding: 11px 0px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
padding: 14px 15px 7px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 15px 20px 20px 20px;
|
||||
}
|
||||
|
||||
.card-box {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* button color */
|
||||
.el-button--cyan.is-active,
|
||||
.el-button--cyan:active {
|
||||
background: #20B2AA;
|
||||
border-color: #20B2AA;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.el-button--cyan:focus,
|
||||
.el-button--cyan:hover {
|
||||
background: #48D1CC;
|
||||
border-color: #48D1CC;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.el-button--cyan {
|
||||
background-color: #20B2AA;
|
||||
border-color: #20B2AA;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* text color */
|
||||
.text-navy {
|
||||
color: #1ab394;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: #1c84c6;
|
||||
}
|
||||
|
||||
.text-info {
|
||||
color: #23c6c8;
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: #f8ac59;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: #ed5565;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
/* image */
|
||||
.img-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.img-lg {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.avatar-upload-preview {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 4px #ccc;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 拖拽列样式 */
|
||||
.sortable-ghost {
|
||||
opacity: .8;
|
||||
color: #fff !important;
|
||||
background: #42b983 !important;
|
||||
}
|
||||
|
||||
.top-right-btn {
|
||||
position: relative;
|
||||
float: right;
|
||||
}
|
||||
@@ -1,415 +0,0 @@
|
||||
/**
|
||||
* 通用css样式布局处理
|
||||
* Copyright (c) 2019 ruoyi
|
||||
*/
|
||||
|
||||
/** 基础通用 **/
|
||||
.pt5 {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.pr5 {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.pb5 {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.mt5 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.mr5 {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.mb5 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.mb8 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ml5 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.mt10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mr10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mb10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ml10 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.mt20 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.mr20 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.mb20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.ml20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.el-message-box__status + .el-message-box__message{
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.el-dialog:not(.is-fullscreen) {
|
||||
margin-top: 6vh !important;
|
||||
}
|
||||
|
||||
.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 70vh;
|
||||
padding: 10px 20px 0;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
/* 固定列表格容器背景与分割线 */
|
||||
.el-table__fixed,
|
||||
.el-table__fixed-left,
|
||||
.el-table__fixed-right {
|
||||
background: transparent; /* 让内部单元格背景生效 */
|
||||
}
|
||||
|
||||
.el-table__fixed::before,
|
||||
.el-table__fixed-left::before,
|
||||
.el-table__fixed-right::before {
|
||||
/* 顶部那条细线颜色 */
|
||||
background-color: #444A52;
|
||||
}
|
||||
|
||||
/* 固定列表头 */
|
||||
.el-table__fixed-header-wrapper th,
|
||||
.el-table__fixed-left .el-table__fixed-header-wrapper th,
|
||||
.el-table__fixed-right .el-table__fixed-header-wrapper th {
|
||||
background: #1F2227 !important; /* 与主表头一致的深灰 */
|
||||
color: #FFFFFF !important; /* 白字 */
|
||||
border-bottom: 1px solid #444A52 !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 固定列表体单元格（奇偶行） */
|
||||
.el-table__fixed-body-wrapper .el-table__row:nth-child(odd) .el-table__cell,
|
||||
.el-table__fixed-left .el-table__fixed-body-wrapper .el-table__row:nth-child(odd) .el-table__cell,
|
||||
.el-table__fixed-right .el-table__fixed-body-wrapper .el-table__row:nth-child(odd) .el-table__cell {
|
||||
background: #2F3339 !important; /* 中深灰 */
|
||||
color: #EAEAEA !important; /* 浅灰白字 */
|
||||
border-bottom: 1px solid #444A52 !important;
|
||||
}
|
||||
|
||||
.el-table__fixed-body-wrapper .el-table__row:nth-child(even) .el-table__cell,
|
||||
.el-table__fixed-left .el-table__fixed-body-wrapper .el-table__row:nth-child(even) .el-table__cell,
|
||||
.el-table__fixed-right .el-table__fixed-body-wrapper .el-table__row:nth-child(even) .el-table__cell {
|
||||
background: #353A40 !important; /* 稍亮一档 */
|
||||
color: #EAEAEA !important;
|
||||
border-bottom: 1px solid #444A52 !important;
|
||||
}
|
||||
|
||||
/* 固定列 hover / current-row 同步 */
|
||||
.el-table__fixed-body-wrapper .el-table__row:hover .el-table__cell,
|
||||
.el-table__fixed-left .el-table__fixed-body-wrapper .el-table__row:hover .el-table__cell,
|
||||
.el-table__fixed-right .el-table__fixed-body-wrapper .el-table__row:hover .el-table__cell {
|
||||
background: rgba(95, 123, 160, 0.25) !important; /* 工业蓝 hover */
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.el-table__fixed-body-wrapper .el-table__row.current-row .el-table__cell,
|
||||
.el-table__fixed-left .el-table__fixed-body-wrapper .el-table__row.current-row .el-table__cell,
|
||||
.el-table__fixed-right .el-table__fixed-body-wrapper .el-table__row.current-row .el-table__cell {
|
||||
background: rgba(95, 123, 160, 0.35) !important; /* current-row 更明显 */
|
||||
color: #FFFFFF !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 固定列滚动条（可选） */
|
||||
.el-table__fixed-body-wrapper::-webkit-scrollbar,
|
||||
.el-table__fixed-left .el-table__fixed-body-wrapper::-webkit-scrollbar,
|
||||
.el-table__fixed-right .el-table__fixed-body-wrapper::-webkit-scrollbar {
|
||||
width: 8px; height: 8px;
|
||||
}
|
||||
.el-table__fixed-body-wrapper::-webkit-scrollbar-thumb,
|
||||
.el-table__fixed-left .el-table__fixed-body-wrapper::-webkit-scrollbar-thumb,
|
||||
.el-table__fixed-right .el-table__fixed-body-wrapper::-webkit-scrollbar-thumb {
|
||||
background: #4A525B; border-radius: 6px;
|
||||
}
|
||||
}
|
||||
/* =========================
|
||||
Splitpanes 工业风深色主题
|
||||
仍保留 default-theme 类名
|
||||
========================= */
|
||||
|
||||
/* 根容器：与页面主背景统一，去掉默认白底 */
|
||||
.splitpanes.default-theme {
|
||||
background: #2B2F36; /* 页面主底色 */
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* pane：统一深灰金属风，提供一致的内边距 */
|
||||
.splitpanes.default-theme .splitpanes__pane {
|
||||
background: linear-gradient(145deg, #1F242A, #21262D) !important; /* 深灰渐变 */
|
||||
color: #EAEAEA !important;
|
||||
padding: 12px 12px; /* 两侧内容留白一致 */
|
||||
box-sizing: border-box;
|
||||
overflow: hidden; /* 保持干净 */
|
||||
}
|
||||
|
||||
/* 左/右外侧圆角，仅在最外侧边缘展示，避免中缝突兀 */
|
||||
.splitpanes.default-theme .splitpanes__pane:first-child {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
.splitpanes.default-theme .splitpanes__pane:last-child {
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
/* 分隔条（splitter）：工业灰，hover 工业蓝，带内嵌“握把” */
|
||||
.splitpanes.default-theme .splitpanes__splitter {
|
||||
position: relative;
|
||||
background: #39414A !important; /* 静态 */
|
||||
transition: background .2s ease;
|
||||
}
|
||||
.splitpanes.default-theme .splitpanes__splitter:hover {
|
||||
background: #46505A !important; /* 悬停稍亮 */
|
||||
}
|
||||
/* 把握把做成中线，水平/垂直两种方向都美观 */
|
||||
.splitpanes.default-theme .splitpanes__splitter::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
border-radius: 2px;
|
||||
background: #4A525B;
|
||||
}
|
||||
.splitpanes.default-theme.splitpanes--vertical .splitpanes__splitter::before {
|
||||
width: 2px; height: 60%;
|
||||
}
|
||||
.splitpanes.default-theme.splitpanes--horizontal .splitpanes__splitter::before {
|
||||
height: 2px; width: 60%;
|
||||
}
|
||||
|
||||
/* pane 内滚动条（如果有）与全站一致 */
|
||||
.splitpanes.default-theme .splitpanes__pane::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
.splitpanes.default-theme .splitpanes__pane::-webkit-scrollbar-thumb {
|
||||
background: #4A525B; border-radius: 6px;
|
||||
}
|
||||
.splitpanes.default-theme .splitpanes__pane::-webkit-scrollbar-track { background: transparent; }
|
||||
|
||||
/* 可选：让右侧主区域看起来像一张卡片（若你的右 pane 是内容主区） */
|
||||
.splitpanes.default-theme .splitpanes__pane:last-child {
|
||||
box-shadow: 0 12px 24px rgba(0,0,0,.25) inset,
|
||||
0 1px 0 rgba(255,255,255,.04) inset;
|
||||
}
|
||||
|
||||
/* 可选：在窄屏时减小 pane 内边距，避免拥挤 */
|
||||
@media (max-width: 992px) {
|
||||
.splitpanes.default-theme .splitpanes__pane { padding: 8px; }
|
||||
}
|
||||
|
||||
/** 表单布局 **/
|
||||
.form-header {
|
||||
font-size: 15px;
|
||||
color: #6379bb;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin: 8px 10px 25px 10px;
|
||||
padding-bottom: 5px
|
||||
}
|
||||
|
||||
/** 表格布局 **/
|
||||
.pagination-container {
|
||||
position: relative;
|
||||
height: 25px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 15px;
|
||||
padding: 10px 20px !important;
|
||||
}
|
||||
|
||||
/* tree border */
|
||||
.tree-border {
|
||||
margin-top: 5px;
|
||||
border: 1px solid #e5e6e7;
|
||||
background: #FFFFFF none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.pagination-container .el-pagination {
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pagination-container .el-pagination > .el-pagination__jump {
|
||||
display: none !important;
|
||||
}
|
||||
.pagination-container .el-pagination > .el-pagination__sizes {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table .fixed-width .el-button--mini {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
/** 表格更多操作下拉样式 */
|
||||
.el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine {
|
||||
cursor: pointer;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.el-table .el-dropdown, .el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-tree-node__content > .el-checkbox {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.list-group-striped > .list-group-item {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.list-group {
|
||||
padding-left: 0px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
border-bottom: 1px solid #e7eaec;
|
||||
border-top: 1px solid #e7eaec;
|
||||
margin-bottom: -1px;
|
||||
padding: 11px 0px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
padding: 14px 15px 7px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 15px 20px 20px 20px;
|
||||
}
|
||||
|
||||
.card-box {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* button color */
|
||||
.el-button--cyan.is-active,
|
||||
.el-button--cyan:active {
|
||||
background: #20B2AA;
|
||||
border-color: #20B2AA;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.el-button--cyan:focus,
|
||||
.el-button--cyan:hover {
|
||||
background: #48D1CC;
|
||||
border-color: #48D1CC;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.el-button--cyan {
|
||||
background-color: #20B2AA;
|
||||
border-color: #20B2AA;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* text color */
|
||||
.text-navy {
|
||||
color: #1ab394;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: #1c84c6;
|
||||
}
|
||||
|
||||
.text-info {
|
||||
color: #23c6c8;
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: #f8ac59;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: #ed5565;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
/* image */
|
||||
.img-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.img-lg {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.avatar-upload-preview {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 4px #ccc;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 拖拽列样式 */
|
||||
.sortable-ghost {
|
||||
opacity: .8;
|
||||
color: #fff !important;
|
||||
background: #42b983 !important;
|
||||
}
|
||||
|
||||
.top-right-btn {
|
||||
position: relative;
|
||||
float: right;
|
||||
}
|
||||
@@ -4,24 +4,25 @@
|
||||
--text-regular: #333333;
|
||||
--text-secondary: #555555;
|
||||
--text-placeholder: #777777;
|
||||
--background-color: #fff;
|
||||
|
||||
.main-container {
|
||||
height: 100%;
|
||||
transition: margin-left .28s, box-shadow .3s ease;
|
||||
margin-left: $base-sidebar-width;
|
||||
position: relative;
|
||||
background: #3f4449; // 金属浅色渐变
|
||||
// background: #1E2227; // 金属浅色渐变
|
||||
}
|
||||
|
||||
.sidebarHide {
|
||||
margin-left: 0!important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
-webkit-transition: width .28s, background .3s ease;
|
||||
transition: width 0.28s, background .3s ease;
|
||||
width: $base-sidebar-width !important;
|
||||
background: #3f4449; // 金属深色渐变
|
||||
background: var(--background-color); // 金属深色渐变
|
||||
border-right: 1px solid #8d939b;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
@@ -44,11 +45,12 @@
|
||||
|
||||
.el-scrollbar__bar.is-vertical {
|
||||
right: 0px;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
background: #2Bf;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.el-scrollbar__thumb {
|
||||
background: #1E2227;
|
||||
background: var(--background-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@@ -86,7 +88,8 @@
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-menu-item, .el-submenu__title {
|
||||
.el-menu-item,
|
||||
.el-submenu__title {
|
||||
// 明确默认状态样式（关键修复）
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
@@ -96,7 +99,7 @@
|
||||
white-space: nowrap !important;
|
||||
color: var(--text-regular); // 菜单项文本偏黑
|
||||
border-radius: 4px;
|
||||
margin: 0 6px;
|
||||
margin: 0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
@@ -107,17 +110,10 @@
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
color: var(--text-primary) !important; // hover时文本更深
|
||||
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1),
|
||||
inset -1px -1px 2px rgba(255, 255, 255, 0.05);
|
||||
inset -1px -1px 2px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
// 深色主题下子菜单选中高亮
|
||||
& .theme-dark .is-active > .el-submenu__title {
|
||||
color: #fff !important; // 选中时文字纯白
|
||||
// background-color: rgba(95, 123, 160, 0.25) !important; // 工业蓝浅高亮
|
||||
// border-left: 3px solid #5F7BA0; // 左边高亮条
|
||||
}
|
||||
|
||||
// & .nest-menu .el-submenu>.el-submenu__title,
|
||||
& .el-submenu .el-menu-item {
|
||||
// 子菜单默认样式
|
||||
@@ -145,13 +141,20 @@
|
||||
|
||||
&.is-active {
|
||||
background: rgba(95, 123, 160, 0.28) !important; // 激活背景
|
||||
color: #fff !important; // 激活文字白色
|
||||
color: #000 !important; // 激活文字白色
|
||||
font-weight: 600;
|
||||
border-left: 3px solid #5F7BA0; // 左边高亮条
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item.is-active.submenu-title-noDropdown {
|
||||
background: #657b96; // 激活背景
|
||||
color: #000; // 激活文字白色
|
||||
font-weight: 600;
|
||||
border-left: 3px solid #657b96; // 左边高亮条
|
||||
}
|
||||
|
||||
.hideSidebar {
|
||||
.sidebar-container {
|
||||
width: 54px !important;
|
||||
@@ -205,6 +208,10 @@
|
||||
min-width: $base-sidebar-width !important;
|
||||
}
|
||||
|
||||
.el-submenu .el-menu {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
// mobile responsive
|
||||
.mobile {
|
||||
.main-container {
|
||||
@@ -227,6 +234,7 @@
|
||||
}
|
||||
|
||||
.withoutAnimation {
|
||||
|
||||
.main-container,
|
||||
.sidebar-container {
|
||||
transition: none;
|
||||
@@ -234,7 +242,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// when menu collapsed
|
||||
// 收起状态下的菜单
|
||||
.el-menu--vertical {
|
||||
&>.el-menu {
|
||||
.svg-icon {
|
||||
@@ -252,7 +260,7 @@
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
color: var(--text-primary) !important;
|
||||
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1),
|
||||
inset -1px -1px 2px rgba(255, 255, 255, 0.05);
|
||||
inset -1px -1px 2px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
::v-deep &.is-active {
|
||||
@@ -261,7 +269,7 @@
|
||||
font-weight: 600;
|
||||
border-left: 3px solid #5F7BA0;
|
||||
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.15),
|
||||
inset -1px -1px 2px rgba(255, 255, 255, 0.08);
|
||||
inset -1px -1px 2px rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
::v-deep .el-menu-item.is-active span,
|
||||
@@ -288,12 +296,11 @@
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #8d939b;
|
||||
border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#app .sidebar-container .el-menu-item,
|
||||
#app .sidebar-container .el-submenu__title {
|
||||
margin: 0;
|
||||
#app .sidebar-container .nest-menu .el-submenu .el-submenu__title {
|
||||
margin: 0 4px;
|
||||
}
|
||||
@@ -1,38 +1,45 @@
|
||||
// 基础金属色调
|
||||
$metal-dark: #637994; // 主色调1 - 深金属色
|
||||
$metal-light: #bec3c9; // 主色调2 - 浅金属色
|
||||
$metal-bg: #a1a6ac; // 背景主色调
|
||||
$metal-highlight: #d0d5db; // 金属高光色
|
||||
$metal-shadow: #8c949d; // 金属阴影色
|
||||
// base color
|
||||
$blue:#324157;
|
||||
$light-blue:#3A71A8;
|
||||
$red:#C03639;
|
||||
$pink: #E65D6E;
|
||||
$green: #30B08F;
|
||||
$tiffany: #4AB7BD;
|
||||
$yellow:#FEC171;
|
||||
$panGreen: #30B08F;
|
||||
|
||||
// 功能色（保持原有，但调整为金属质感）
|
||||
$blue: mix($metal-dark, #324157, 30%);
|
||||
$light-blue: mix($metal-light, #3A71A8, 30%);
|
||||
$red: mix($metal-light, #C03639, 20%);
|
||||
$pink: mix($metal-light, #E65D6E, 20%);
|
||||
$green: mix($metal-light, #30B08F, 20%);
|
||||
$tiffany: mix($metal-light, #4AB7BD, 20%);
|
||||
$yellow: mix($metal-light, #FEC171, 20%);
|
||||
$panGreen: mix($metal-light, #30B08F, 20%);
|
||||
// 默认菜单主题风格
|
||||
$base-menu-color:#bfcbd9;
|
||||
$base-menu-color-active:#f4f4f5;
|
||||
$base-menu-background:#304156;
|
||||
$base-logo-title-color: #ffffff;
|
||||
|
||||
// 金属风格菜单主题
|
||||
$base-menu-color: mix($metal-light, rgba(255, 255, 255, 0.7), 60%); // 菜单文字色
|
||||
$base-menu-color-active: #ffffff; // 激活菜单文字色
|
||||
$base-menu-background: linear-gradient(145deg, darken($metal-bg, 3%), $metal-bg); // 菜单背景
|
||||
$base-logo-title-color: $metal-highlight; // Logo文字色
|
||||
$base-menu-light-color:rgba(0,0,0,.70);
|
||||
$base-menu-light-background:#ffffff;
|
||||
$base-logo-light-title-color: #001529;
|
||||
|
||||
// 浅色金属菜单风格
|
||||
$base-menu-light-color: mix($metal-dark, rgba(0, 0, 0, 0.7), 70%); // 浅色菜单文字色
|
||||
$base-menu-light-background: linear-gradient(145deg, $metal-bg, lighten($metal-bg, 3%)); // 浅色菜单背景
|
||||
$base-logo-light-title-color: $metal-dark; // 浅色Logo文字色
|
||||
$base-sub-menu-background:#1f2d3d;
|
||||
$base-sub-menu-hover:#001528;
|
||||
|
||||
// 子菜单样式
|
||||
$base-sub-menu-background: darken($metal-bg, 5%); // 子菜单背景
|
||||
$base-sub-menu-hover: linear-gradient(145deg, $metal-bg, $metal-dark); // 子菜单悬停背景
|
||||
// 自定义暗色菜单风格
|
||||
/**
|
||||
$base-menu-color:hsla(0,0%,100%,.65);
|
||||
$base-menu-color-active:#fff;
|
||||
$base-menu-background:#001529;
|
||||
$base-logo-title-color: #ffffff;
|
||||
|
||||
$base-sidebar-width: 200px; // 侧边栏宽度
|
||||
$base-menu-light-color:rgba(0,0,0,.70);
|
||||
$base-menu-light-background:#ffffff;
|
||||
$base-logo-light-title-color: #001529;
|
||||
|
||||
// 导出变量供JS使用
|
||||
$base-sub-menu-background:#000c17;
|
||||
$base-sub-menu-hover:#001528;
|
||||
*/
|
||||
|
||||
$base-sidebar-width: 200px;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
:export {
|
||||
menuColor: $base-menu-color;
|
||||
menuLightColor: $base-menu-light-color;
|
||||
@@ -43,9 +50,5 @@ $base-sidebar-width: 200px; // 侧边栏宽度
|
||||
subMenuHover: $base-sub-menu-hover;
|
||||
sideBarWidth: $base-sidebar-width;
|
||||
logoTitleColor: $base-logo-title-color;
|
||||
logoLightTitleColor: $base-logo-light-title-color;
|
||||
// 导出金属主题基础色供全局使用
|
||||
metalDark: $metal-dark;
|
||||
metalLight: $metal-light;
|
||||
metalBg: $metal-bg;
|
||||
}
|
||||
logoLightTitleColor: $base-logo-light-title-color
|
||||
}
|
||||
|
||||
@@ -93,9 +93,9 @@ export default {
|
||||
.app-breadcrumb.el-breadcrumb {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 50px;
|
||||
line-height: 40px;
|
||||
margin-left: 8px;
|
||||
color: #fff;
|
||||
color: #111;
|
||||
.no-redirect {
|
||||
color: #ddd;
|
||||
cursor: text;
|
||||
@@ -103,6 +103,6 @@ export default {
|
||||
}
|
||||
|
||||
.el-breadcrumb__inner.is-link, .el-breadcrumb__inner a {
|
||||
color: #fff;
|
||||
color: #111;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -43,6 +43,6 @@ export default {
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
fill: #111;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -65,7 +65,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<!-- <style lang="scss" scoped>
|
||||
/* 工业风：石墨灰体系，深色背景适配。无蓝色。 */
|
||||
.pagination-container {
|
||||
background: transparent; /* 不要白底 */
|
||||
@@ -93,9 +93,9 @@ export default {
|
||||
|
||||
/* sizes 选择器（下拉的输入框外观） */
|
||||
.el-pagination__sizes .el-select .el-input .el-input__inner {
|
||||
background: var(--pg-bg);
|
||||
border-color: var(--pg-border);
|
||||
color: var(--pg-text);
|
||||
// background: var(--pg-bg);
|
||||
// border-color: var(--pg-border);
|
||||
// color: var(--pg-text);
|
||||
}
|
||||
.el-pagination__sizes .el-select .el-input .el-input__inner:hover {
|
||||
background: var(--pg-bg-hover);
|
||||
@@ -183,4 +183,4 @@ export default {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style> -->
|
||||
|
||||
@@ -30,7 +30,7 @@ export default {
|
||||
.app-main {
|
||||
/* 50= navbar 50 */
|
||||
min-height: calc(100vh - 50px);
|
||||
background-color: #3f4449;
|
||||
// background-color: #3f4449;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -104,7 +104,7 @@ export default {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
// 金属质感渐变背景
|
||||
background: #454c51;
|
||||
// background: #454c51;
|
||||
border-bottom: 1px solid #8d939b;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1),
|
||||
0 1px 1px rgba(255, 255, 255, 0.08) inset;
|
||||
@@ -156,7 +156,7 @@ export default {
|
||||
height: 100%;
|
||||
font-size: 18px;
|
||||
// 金属风格文字色
|
||||
color: #ddd;
|
||||
color: #111;
|
||||
vertical-align: text-bottom;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
|
||||
@@ -3,12 +3,12 @@
|
||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
|
||||
<el-menu
|
||||
active-text-color="#fff"
|
||||
active-text-color="#000"
|
||||
:default-active="activeMenu"
|
||||
:collapse="isCollapse"
|
||||
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
|
||||
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
|
||||
:unique-opened="true"
|
||||
text-color="#111"
|
||||
:unique-opened="true"
|
||||
:collapse-transition="false"
|
||||
mode="vertical"
|
||||
>
|
||||
|
||||
@@ -242,7 +242,7 @@ export default {
|
||||
height: 34px;
|
||||
width: 100%;
|
||||
// 金属浅色渐变背景（直接写死渐变值）
|
||||
background: #454c51;
|
||||
// background: #454c51;
|
||||
border-bottom: 1px solid #a0a6ad;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.05) inset;
|
||||
|
||||
@@ -254,9 +254,9 @@ export default {
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border: 1px solid #a0a6ad;
|
||||
color: #fff;
|
||||
// color: #fff;
|
||||
// 标签金属渐变背景
|
||||
background: #454c51;
|
||||
// background: #454c51;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
|
||||
@@ -76,7 +76,6 @@ export default {
|
||||
}
|
||||
|
||||
.drawer-bg {
|
||||
background: #000;
|
||||
opacity: 0.3;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
|
||||
@@ -7,7 +7,7 @@ import Element from 'element-ui'
|
||||
import './assets/styles/element-variables.scss'
|
||||
|
||||
import '@/assets/styles/index.scss' // global css
|
||||
import '@/assets/styles/ruoyi.scss' // ruoyi css
|
||||
// import '@/assets/styles/ruoyi.scss' // ruoyi css
|
||||
import App from './App'
|
||||
import store from './store'
|
||||
import router from './router'
|
||||
|
||||
@@ -7,7 +7,7 @@ module.exports = {
|
||||
/**
|
||||
* 侧边栏主题 深色主题theme-dark，浅色主题theme-light
|
||||
*/
|
||||
sideTheme: 'theme-dark',
|
||||
sideTheme: 'theme-light',
|
||||
|
||||
/**
|
||||
* 系统布局配置
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CurrentTime from "./components/CurrentTime.vue";
|
||||
|
||||
@@ -44,8 +44,8 @@
|
||||
<Pagination
|
||||
v-show="pagination.total>0"
|
||||
:total="pagination.total"
|
||||
v-model:page="pagination.currentPage"
|
||||
v-model:limit="pagination.pageSize"
|
||||
:page.sync="pagination.currentPage"
|
||||
:limit.sync="pagination.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
@@ -175,7 +175,7 @@ export default {
|
||||
// 从父组件调用的查询方法
|
||||
getList(params) {
|
||||
console.log('接收到父组件的搜索参数:', params)
|
||||
this.pagination.currentPage = 1
|
||||
// this.pagination.currentPage = 1
|
||||
this.fetchData()
|
||||
},
|
||||
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
<el-table-column prop="rolledLength" label="长度" width="70" />
|
||||
<el-table-column prop="rolledWeight" label="重量" width="70" />
|
||||
<el-table-column prop="rolledCount" label="轧制数量" width="75" />
|
||||
<el-table-column prop="instalTime" label="装机时间" width="133" />
|
||||
<el-table-column prop="instalTime" label="装机时间" width="160" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user