|
|
@@ -349,22 +349,48 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
-/* append-to-body 后 scoped 失效,统一以 .qb-drill-dialog / .qb-drill-popper 收窄作用域 */
|
|
|
+/* 弹窗外壳:与看板同款深空蓝 + 青色边框 + 角括号 */
|
|
|
.qb-drill-dialog.el-dialog {
|
|
|
- border: 1px solid #2a4d92;
|
|
|
- border-radius: 10px;
|
|
|
- background: radial-gradient(circle at 12% 0%, #16304f 0%, #0c1c42 46%, #0a1730 100%);
|
|
|
- box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
|
|
|
+ border: 1px solid rgba(0, 200, 255, 0.28);
|
|
|
+ border-radius: 4px;
|
|
|
+ background:
|
|
|
+ radial-gradient(ellipse 70% 42% at 50% -8%, rgba(0, 150, 220, 0.25), transparent 58%),
|
|
|
+ linear-gradient(180deg, #001526 0%, #000912 46%, #00060d 100%);
|
|
|
+ box-shadow:
|
|
|
+ 0 24px 60px rgba(0, 0, 0, 0.55),
|
|
|
+ 0 0 32px rgba(0, 190, 255, 0.12);
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
+/* 左上 / 右下角括号(与看板卡片同款) */
|
|
|
+.qb-drill-dialog.el-dialog::before,
|
|
|
+.qb-drill-dialog.el-dialog::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ z-index: 3;
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ border: 2px solid #00eaff;
|
|
|
+ pointer-events: none;
|
|
|
+ filter: drop-shadow(0 0 6px rgba(0, 230, 255, 0.65));
|
|
|
+}
|
|
|
+.qb-drill-dialog.el-dialog::before {
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ border-width: 2px 0 0 2px;
|
|
|
+}
|
|
|
+.qb-drill-dialog.el-dialog::after {
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ border-width: 0 2px 2px 0;
|
|
|
+}
|
|
|
.qb-drill-dialog .el-dialog__header {
|
|
|
position: relative;
|
|
|
padding: 0;
|
|
|
- border-bottom: 1px solid rgba(59, 167, 255, 0.18);
|
|
|
+ border-bottom: 1px solid rgba(0, 200, 255, 0.22);
|
|
|
}
|
|
|
.qb-drill-dialog .el-dialog__body {
|
|
|
padding: 0;
|
|
|
- color: #dbe7f7;
|
|
|
+ color: #e4f6ff;
|
|
|
}
|
|
|
.qb-drill-head {
|
|
|
display: flex;
|
|
|
@@ -384,31 +410,34 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 18px;
|
|
|
- font-weight: 600;
|
|
|
+ font-weight: 650;
|
|
|
letter-spacing: 1px;
|
|
|
- color: #eaf4ff;
|
|
|
+ color: #eaf9ff;
|
|
|
+ text-shadow: 0 0 12px rgba(0, 200, 255, 0.35);
|
|
|
}
|
|
|
+/* 标题竖条:看板面板标题同款渐变辉光条 */
|
|
|
.qb-drill-title-bar {
|
|
|
width: 4px;
|
|
|
height: 16px;
|
|
|
margin-right: 8px;
|
|
|
- border-radius: 2px;
|
|
|
- background: linear-gradient(180deg, #4fb6ff, #25d0b0);
|
|
|
+ background: linear-gradient(180deg, #7af6ff, rgba(0, 180, 255, 0.1));
|
|
|
+ box-shadow: 0 0 10px rgba(0, 230, 255, 0.8);
|
|
|
}
|
|
|
.qb-drill-source {
|
|
|
margin-top: 4px;
|
|
|
font-size: 12px;
|
|
|
- color: #8aa0bd;
|
|
|
+ color: #7eafc8;
|
|
|
}
|
|
|
-/* 工厂筛选提示:与标题同一行,用边框胶囊与口径说明区分 */
|
|
|
+/* 工厂筛选提示:青色胶囊,与口径说明区分 */
|
|
|
.qb-drill-factory {
|
|
|
margin-top: 4px;
|
|
|
margin-left: 10px;
|
|
|
padding: 1px 10px;
|
|
|
font-size: 12px;
|
|
|
- color: #7fe3c8;
|
|
|
- border: 1px solid rgba(37, 208, 176, 0.45);
|
|
|
+ color: #4fe3ff;
|
|
|
+ border: 1px solid rgba(0, 210, 255, 0.4);
|
|
|
border-radius: 10px;
|
|
|
+ background: rgba(0, 150, 220, 0.12);
|
|
|
}
|
|
|
/* 导出 / 关闭按钮组:绝对定位到标题栏右上角,不受标题宽度影响 */
|
|
|
.qb-drill-head-right {
|
|
|
@@ -425,10 +454,10 @@ export default {
|
|
|
align-items: center;
|
|
|
padding: 6px 14px;
|
|
|
font-size: 12px;
|
|
|
- color: #cfe2ff;
|
|
|
- background: rgba(59, 167, 255, 0.12);
|
|
|
- border: 1px solid rgba(59, 167, 255, 0.5);
|
|
|
- border-radius: 6px;
|
|
|
+ color: #d5f1ff;
|
|
|
+ background: rgba(0, 40, 70, 0.6);
|
|
|
+ border: 1px solid rgba(0, 210, 255, 0.45);
|
|
|
+ border-radius: 4px;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.2s;
|
|
|
}
|
|
|
@@ -437,8 +466,9 @@ export default {
|
|
|
}
|
|
|
.qb-drill-btn:hover:not(:disabled) {
|
|
|
color: #fff;
|
|
|
- background: rgba(59, 167, 255, 0.26);
|
|
|
- border-color: #3ba7ff;
|
|
|
+ background: rgba(0, 150, 220, 0.3);
|
|
|
+ border-color: rgba(0, 230, 255, 0.8);
|
|
|
+ box-shadow: 0 0 14px rgba(0, 200, 255, 0.25);
|
|
|
transform: translateY(-1px);
|
|
|
}
|
|
|
.qb-drill-btn:disabled {
|
|
|
@@ -446,10 +476,16 @@ export default {
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
.qb-drill-btn-primary {
|
|
|
- color: #fff;
|
|
|
- background: linear-gradient(90deg, #2b7cff, #25d0b0);
|
|
|
+ color: #02121f;
|
|
|
+ background: linear-gradient(90deg, #00b4ff, #00eaff);
|
|
|
border-color: transparent;
|
|
|
font-weight: 600;
|
|
|
+ text-shadow: none;
|
|
|
+}
|
|
|
+.qb-drill-btn-primary:hover:not(:disabled) {
|
|
|
+ color: #02121f;
|
|
|
+ background: linear-gradient(90deg, #00c4ff, #4df0ff);
|
|
|
+ box-shadow: 0 0 18px rgba(0, 220, 255, 0.45);
|
|
|
}
|
|
|
/* 右上角关闭按钮 */
|
|
|
.qb-drill-btn-close {
|
|
|
@@ -465,6 +501,7 @@ export default {
|
|
|
color: #fff;
|
|
|
background: rgba(255, 107, 129, 0.28);
|
|
|
border-color: #ff6b81;
|
|
|
+ box-shadow: 0 0 14px rgba(255, 107, 129, 0.3);
|
|
|
}
|
|
|
.qb-drill-body {
|
|
|
padding: 0 18px 12px;
|
|
|
@@ -475,7 +512,7 @@ export default {
|
|
|
align-items: center;
|
|
|
gap: 8px 10px;
|
|
|
padding: 12px 0;
|
|
|
- border-bottom: 1px dashed rgba(59, 167, 255, 0.16);
|
|
|
+ border-bottom: 1px dashed rgba(0, 200, 255, 0.18);
|
|
|
}
|
|
|
.qb-drill-field {
|
|
|
display: flex;
|
|
|
@@ -486,7 +523,7 @@ export default {
|
|
|
flex: 0 0 auto;
|
|
|
margin-right: 6px;
|
|
|
font-size: 12px;
|
|
|
- color: #8aa0bd;
|
|
|
+ color: #7eafc8;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
.qb-drill-control {
|
|
|
@@ -517,150 +554,151 @@ export default {
|
|
|
}
|
|
|
.qb-drill-total {
|
|
|
font-size: 12px;
|
|
|
- color: #8aa0bd;
|
|
|
+ color: #7eafc8;
|
|
|
}
|
|
|
.qb-drill-total i {
|
|
|
font-style: normal;
|
|
|
font-weight: 700;
|
|
|
- color: #4fb6ff;
|
|
|
+ color: #4fe3ff;
|
|
|
}
|
|
|
|
|
|
.qb-drill-tag {
|
|
|
border: none;
|
|
|
}
|
|
|
-/* 输入控件深色化 */
|
|
|
+/* 输入控件深色化(青色系) */
|
|
|
.qb-drill-dialog .el-input__inner,
|
|
|
.qb-drill-dialog .el-range-input,
|
|
|
.qb-drill-dialog .el-range-separator {
|
|
|
- background: #0e1a30;
|
|
|
- color: #dbe7f7;
|
|
|
- border-color: rgba(42, 77, 146, 0.9);
|
|
|
+ background: rgba(0, 24, 46, 0.9);
|
|
|
+ color: #e4f6ff;
|
|
|
+ border-color: rgba(0, 210, 255, 0.38);
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
.qb-drill-dialog .el-range-editor.el-input__inner {
|
|
|
- background: #0e1a30;
|
|
|
- border-color: rgba(42, 77, 146, 0.9);
|
|
|
+ background: rgba(0, 24, 46, 0.9);
|
|
|
+ border-color: rgba(0, 210, 255, 0.38);
|
|
|
}
|
|
|
.qb-drill-dialog .el-input__inner:focus,
|
|
|
.qb-drill-dialog .el-range-editor.is-active {
|
|
|
- border-color: #3ba7ff;
|
|
|
- box-shadow: 0 0 0 2px rgba(59, 167, 255, 0.16);
|
|
|
+ border-color: rgba(0, 230, 255, 0.8);
|
|
|
+ box-shadow: 0 0 0 2px rgba(0, 220, 255, 0.16);
|
|
|
}
|
|
|
.qb-drill-dialog .el-range-editor.is-active .el-range-input {
|
|
|
- background: #0e1a30;
|
|
|
+ background: rgba(0, 24, 46, 0.9);
|
|
|
}
|
|
|
.qb-drill-dialog .el-range-editor .el-range__icon,
|
|
|
.qb-drill-dialog .el-range-editor .el-range__close-icon {
|
|
|
- color: #54708f;
|
|
|
+ color: #6f97b0;
|
|
|
}
|
|
|
-/* 表格深色化 */
|
|
|
+/* 表格深色化(青色系) */
|
|
|
.qb-drill-dialog .el-table {
|
|
|
background: transparent;
|
|
|
- color: #cfe2ff;
|
|
|
+ color: #d5f1ff;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
.qb-drill-dialog .el-table::before {
|
|
|
- background-color: rgba(42, 77, 146, 0.5);
|
|
|
+ background-color: rgba(0, 200, 255, 0.3);
|
|
|
}
|
|
|
.qb-drill-dialog .el-table th.el-table__cell {
|
|
|
- background: #10233f;
|
|
|
- color: #8aa0bd;
|
|
|
+ background: rgba(0, 45, 80, 0.65);
|
|
|
+ color: #8fc4de;
|
|
|
font-weight: 600;
|
|
|
font-size: 12px;
|
|
|
- border-bottom-color: rgba(42, 77, 146, 0.6);
|
|
|
+ border-bottom-color: rgba(0, 200, 255, 0.35);
|
|
|
}
|
|
|
.qb-drill-dialog .el-table tr {
|
|
|
background: transparent;
|
|
|
}
|
|
|
.qb-drill-dialog .el-table td.el-table__cell {
|
|
|
- border-bottom-color: rgba(42, 77, 146, 0.35);
|
|
|
+ border-bottom-color: rgba(0, 200, 255, 0.18);
|
|
|
background: transparent;
|
|
|
}
|
|
|
.qb-drill-dialog .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
|
|
|
- background: rgba(59, 167, 255, 0.04);
|
|
|
+ background: rgba(0, 200, 255, 0.05);
|
|
|
}
|
|
|
.qb-drill-dialog .el-table__body tr:hover > td.el-table__cell {
|
|
|
- background: rgba(59, 167, 255, 0.12) !important;
|
|
|
+ background: rgba(0, 200, 255, 0.14) !important;
|
|
|
}
|
|
|
.qb-drill-dialog .el-table__empty-text {
|
|
|
- color: #54708f;
|
|
|
+ color: #6f97b0;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
.qb-drill-dialog .el-table__fixed-right::before,
|
|
|
.qb-drill-dialog .el-table__fixed::before {
|
|
|
- background-color: rgba(42, 77, 146, 0.5);
|
|
|
+ background-color: rgba(0, 200, 255, 0.3);
|
|
|
}
|
|
|
-/* 分页深色化 */
|
|
|
+/* 分页深色化(青色系) */
|
|
|
.qb-drill-dialog .el-pagination {
|
|
|
padding: 0;
|
|
|
- color: #8aa0bd;
|
|
|
+ color: #7eafc8;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
.qb-drill-dialog .el-pagination.is-background .btn-prev,
|
|
|
.qb-drill-dialog .el-pagination.is-background .btn-next,
|
|
|
.qb-drill-dialog .el-pagination.is-background .el-pager li {
|
|
|
- background: rgba(59, 167, 255, 0.08);
|
|
|
- color: #8aa0bd;
|
|
|
- border: 1px solid rgba(42, 77, 146, 0.6);
|
|
|
+ background: rgba(0, 190, 255, 0.1);
|
|
|
+ color: #8fc4de;
|
|
|
+ border: 1px solid rgba(0, 200, 255, 0.3);
|
|
|
}
|
|
|
.qb-drill-dialog .el-pagination.is-background .el-pager li:not(.disabled).active {
|
|
|
- background: linear-gradient(90deg, #2b7cff, #25d0b0);
|
|
|
- color: #fff;
|
|
|
+ background: linear-gradient(90deg, #00b4ff, #00eaff);
|
|
|
+ color: #02121f;
|
|
|
+ font-weight: 600;
|
|
|
border-color: transparent;
|
|
|
}
|
|
|
.qb-drill-dialog .el-pagination .el-select .el-input .el-input__inner,
|
|
|
.qb-drill-dialog .el-pagination__editor.el-input .el-input__inner {
|
|
|
- background: #0e1a30;
|
|
|
- color: #dbe7f7;
|
|
|
- border-color: rgba(42, 77, 146, 0.9);
|
|
|
+ background: rgba(0, 24, 46, 0.9);
|
|
|
+ color: #e4f6ff;
|
|
|
+ border-color: rgba(0, 210, 255, 0.38);
|
|
|
}
|
|
|
-/* 下拉面板挂载在 body,单独收窄 */
|
|
|
+/* 下拉面板挂载在 body,单独收窄(HR org-popper 同款) */
|
|
|
.qb-drill-popper.el-select-dropdown,
|
|
|
.qb-drill-popper.el-picker-panel {
|
|
|
- background: #0e1a30;
|
|
|
- border-color: #2a4d92;
|
|
|
- color: #dbe7f7;
|
|
|
+ background: linear-gradient(180deg, rgba(3, 28, 48, 0.98), rgba(2, 15, 30, 0.98));
|
|
|
+ border-color: rgba(0, 200, 255, 0.34) !important;
|
|
|
+ color: #e4f6ff;
|
|
|
}
|
|
|
.qb-drill-popper .el-select-dropdown__item {
|
|
|
- color: #cfe2ff;
|
|
|
+ color: #d5f1ff;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
.qb-drill-popper .el-select-dropdown__item.hover,
|
|
|
.qb-drill-popper .el-select-dropdown__item:hover {
|
|
|
- background: rgba(59, 167, 255, 0.14);
|
|
|
+ background: rgba(0, 150, 220, 0.22);
|
|
|
}
|
|
|
.qb-drill-popper .el-select-dropdown__item.selected {
|
|
|
- color: #4fb6ff;
|
|
|
+ color: #4fe3ff;
|
|
|
}
|
|
|
.qb-drill-popper .el-date-table th {
|
|
|
- color: #8aa0bd;
|
|
|
+ color: #8fc4de;
|
|
|
}
|
|
|
.qb-drill-popper .el-date-table td.available:hover,
|
|
|
.qb-drill-popper .el-date-table td.today span {
|
|
|
- color: #4fb6ff;
|
|
|
+ color: #4fe3ff;
|
|
|
}
|
|
|
.qb-drill-popper .el-date-table td.in-range div,
|
|
|
.qb-drill-popper .el-date-table td.in-range div:hover {
|
|
|
- background: rgba(59, 167, 255, 0.16);
|
|
|
+ background: rgba(0, 150, 220, 0.24);
|
|
|
}
|
|
|
.qb-drill-popper .el-picker-panel__icon-btn,
|
|
|
.qb-drill-popper .el-date-picker__header-label,
|
|
|
.qb-drill-popper .el-date-range-picker__header div {
|
|
|
- color: #cfe2ff;
|
|
|
+ color: #d5f1ff;
|
|
|
}
|
|
|
.qb-drill-popper .el-picker-panel__footer {
|
|
|
- background: #0c1c42;
|
|
|
- border-top-color: rgba(42, 77, 146, 0.5);
|
|
|
+ background: rgba(2, 15, 30, 0.98);
|
|
|
+ border-top-color: rgba(0, 200, 255, 0.3);
|
|
|
}
|
|
|
.qb-drill-popper .el-button--text {
|
|
|
- color: #4fb6ff;
|
|
|
+ color: #4fe3ff;
|
|
|
}
|
|
|
.qb-drill-popper .el-time-panel {
|
|
|
- background: #0e1a30;
|
|
|
- border-color: #2a4d92;
|
|
|
+ background: linear-gradient(180deg, rgba(3, 28, 48, 0.98), rgba(2, 15, 30, 0.98));
|
|
|
+ border-color: rgba(0, 200, 255, 0.34);
|
|
|
}
|
|
|
.qb-drill-popper .el-time-spinner__item {
|
|
|
- color: #cfe2ff;
|
|
|
+ color: #d5f1ff;
|
|
|
}
|
|
|
@media (max-width: 1280px) {
|
|
|
.qb-drill-field {
|