650 lines
13 KiB
CSS
650 lines
13 KiB
CSS
.WebUI3_FormContainer,
|
|
.layui-btn-container button,
|
|
.layui-table-page,
|
|
.layui-table-col-special,
|
|
.layui-table-header {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.WebUI3_FormContainer textarea,
|
|
.WebUI3_FormContainer input[type="text"],
|
|
.WebUI3_FormContainer input[type="number"] {
|
|
width: 90%;
|
|
}
|
|
|
|
.form-customRowClass { margin-bottom: 16px; }
|
|
|
|
.form-customLabelClass {
|
|
width: 100px;
|
|
padding: 9px 15px;
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
text-align: right;
|
|
float: left;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.form-customControlWrapperClass {
|
|
min-height: 34px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 全局变量 */
|
|
:root {
|
|
--win-primary: #0078d4;
|
|
--win-primary-hover: #106ebe;
|
|
--win-bg-hover: #f3f3f3;
|
|
--win-border: #d2d2d2;
|
|
--win-radius: 4px;
|
|
--win-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
|
--win-danger: #ff5722;
|
|
}
|
|
|
|
/* 基础样式 */
|
|
body { font-family: "Segoe UI", "Microsoft YaHei", sans-serif; }
|
|
|
|
/* 加载层样式 */
|
|
.table-loading-overlay {
|
|
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(2px); z-index: 9999;
|
|
display: none; justify-content: center; align-items: center;
|
|
pointer-events: auto; user-select: none;
|
|
}
|
|
.table-loading-content {
|
|
text-align: center; background: #fff;
|
|
padding: 20px; border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
border: 1px solid #e0e0e0;
|
|
pointer-events: none;
|
|
}
|
|
.table-loading-content i {
|
|
font-size: 28px; color: var(--win-primary); display: block; margin-bottom: 10px;
|
|
animation: loading-rotate 1.2s linear infinite;
|
|
}
|
|
.table-loading-content p { color: #666; font-size: 14px; margin: 0; font-weight: 500; }
|
|
|
|
/* 卡片样式 */
|
|
.form-card { position: relative; overflow: visible; border-radius: 8px; box-shadow: var(--win-shadow); border: none; }
|
|
.layui-card-body { padding: 16px; }
|
|
|
|
/* Windows 11 按钮样式 */
|
|
.win-btn, .win-btn:active {
|
|
height: 32px; line-height: 30px; padding: 0 16px; font-size: 13px;
|
|
background-color: #fff; color: #333; border: 1px solid var(--win-border);
|
|
border-radius: var(--win-radius); cursor: pointer; transition: all 0.2s;
|
|
display: inline-block; text-decoration: none; vertical-align: middle;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
|
}
|
|
.win-btn:hover { background-color: var(--win-bg-hover); border-color: #c0c0c0; color: #000; }
|
|
.win-btn:active { background-color: #e5e5e5; transform: translateY(1px); box-shadow: none; }
|
|
.win-btn-primary {
|
|
background-color: var(--win-primary); color: #fff; border: 1px solid var(--win-primary);
|
|
}
|
|
.win-btn-primary:hover { background-color: var(--win-primary-hover); border-color: var(--win-primary-hover); color: #fff; }
|
|
.win-btn-view {
|
|
background-color: #e6f2ff; color: var(--win-primary); border: 1px solid #cce4ff;
|
|
}
|
|
.win-btn-view:hover { background-color: var(--win-primary); color: #fff; border-color: var(--win-primary); }
|
|
.win-btn-ghost {
|
|
background-color: #fff; border: 1px solid var(--win-border); color: #333;
|
|
}
|
|
.win-btn-ghost:hover { background-color: var(--win-bg-hover); border-color: #999; }
|
|
|
|
/* 表格样式覆盖 */
|
|
.layui-table-view { position: relative; border-radius: var(--win-radius); overflow: hidden; }
|
|
.layui-table, .layui-table th, .layui-table td, .layui-table[lay-skin="line"] { border-color: #f0f0f0; }
|
|
.layui-table-header { border-bottom: 1px solid #f0f0f0; background-color: #fafafa; }
|
|
.layui-table thead tr { background-color: #fafafa; }
|
|
.layui-table th { font-weight: 600; color: #444; }
|
|
.layui-table-body tr:hover { background-color: #f8f9fa; }
|
|
.layui-table-page { border-top: 1px solid #f0f0f0; padding-top: 10px; }
|
|
.layui-laypage a, .layui-laypage span {
|
|
border-radius: var(--win-radius); border: 1px solid var(--win-border);
|
|
margin: 0 4px; background-color: #fff; color: #333;
|
|
}
|
|
.layui-laypage a:hover { background-color: var(--win-bg-hover); }
|
|
.layui-laypage .layui-laypage-curr .layui-laypage-em {
|
|
background-color: var(--win-primary); border-color: var(--win-primary);
|
|
border-radius: var(--win-radius);
|
|
}
|
|
|
|
/* 布局调整 */
|
|
.layui-btn-container .win-btn { margin-right: 6px; margin-bottom: 8px; }
|
|
.win-btn-group { display: inline-flex; gap: 4px; }
|
|
.win-btn-group .win-btn { margin: 0; }
|
|
|
|
/* 编辑回退动画 */
|
|
.layui-table-edit-revert {
|
|
animation: revert-flash 0.5s ease-in-out;
|
|
color: var(--win-danger) !important;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.layui-table-edit {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 189;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
padding: 5px 14px;
|
|
border-radius: 0;
|
|
box-shadow: 1px 1px 20px rgba(0, 0, 0, .15);
|
|
background-color: #fff
|
|
}
|
|
|
|
.layui-table-view .layui-table td[data-edit]:hover:after {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
border: 1px solid var(--win-primary) !important;
|
|
pointer-events: none;
|
|
content: ""
|
|
}
|
|
|
|
.layui-table-edit:focus {
|
|
border-color: var(--win-primary-hover) !important
|
|
}
|
|
|
|
input.layui-input.layui-table-edit {
|
|
height: 100%
|
|
}
|
|
|
|
select.layui-table-edit {
|
|
padding: 0 0 0 10px;
|
|
border-color: #d2d2d2
|
|
}
|
|
|
|
/* 动画定义 */
|
|
@keyframes loading-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
|
@keyframes revert-flash {
|
|
0% { background-color: rgba(255, 87, 34, 0.1); }
|
|
50% { background-color: rgba(255, 87, 34, 0.4); }
|
|
100% { background-color: transparent; }
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.Table_Container {
|
|
margin: 0 auto;
|
|
background-color: #fff;
|
|
padding: 24px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
h1 {
|
|
color: #1a1a1a;
|
|
margin-bottom: 24px;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
h3 {
|
|
color: #333;
|
|
margin-bottom: 16px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.filter-container {
|
|
margin-top: 24px;
|
|
margin-bottom: 24px;
|
|
padding: 16px;
|
|
background-color: #f8f9fa;
|
|
border-radius: 6px;
|
|
border: 1px solid #e1e4e8;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.filter-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 24px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.filter-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.filter-item label {
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
color: #333;
|
|
}
|
|
|
|
.filter-item input,
|
|
.filter-item select {
|
|
padding: 8px 12px;
|
|
border: 1px solid #d1d5da;
|
|
border-radius: 4px;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
font-size: 14px;
|
|
transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
|
}
|
|
|
|
.filter-item input:focus,
|
|
.filter-item select:focus {
|
|
outline: none;
|
|
border-color: #0078d4;
|
|
box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 16px;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
font-weight: 500;
|
|
margin-right: 8px;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #0078d4;
|
|
color: white;
|
|
border-color: #0078d4;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #005a9e;
|
|
border-color: #005a9e;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: #f3f2f1;
|
|
color: #333;
|
|
border-color: #d1d5da;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: #e6e6e6;
|
|
border-color: #b3b3b3;
|
|
}
|
|
|
|
.btn-normal {
|
|
background-color: #00b7c3;
|
|
color: white;
|
|
border-color: #00b7c3;
|
|
}
|
|
|
|
.btn-normal:hover {
|
|
background-color: #00959f;
|
|
border-color: #00959f;
|
|
}
|
|
|
|
.btn-warm {
|
|
background-color: #ffb900;
|
|
color: #333;
|
|
border-color: #ffb900;
|
|
}
|
|
|
|
.btn-warm:hover {
|
|
background-color: #ff8c00;
|
|
border-color: #ff8c00;
|
|
}
|
|
|
|
/* 表格样式调整 */
|
|
.TableCard {
|
|
margin-top: 24px;
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 表格容器样式 */
|
|
.Table_Container {
|
|
overflow-x: auto;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
border: 1px solid #e1e4e8;
|
|
border-radius: 6px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.TableCard tr {
|
|
height: 48px;
|
|
}
|
|
|
|
.TableCard td,
|
|
.TableCard th {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.TableCard thead {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 30;
|
|
}
|
|
|
|
.TableCard table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background-color: white;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.TableCard th,
|
|
.TableCard td {
|
|
padding: 10px 12px;
|
|
text-align: center;
|
|
border: 1px solid #e1e4e8;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
transition: background-color 0.15s ease-in-out, text-align 0.15s ease-in-out;
|
|
}
|
|
|
|
.TableCard th {
|
|
text-align: center;
|
|
}
|
|
|
|
.TableCard td:hover {
|
|
background-color: #f5f9ff;
|
|
position: relative;
|
|
z-index: 1;
|
|
overflow: visible;
|
|
white-space: normal;
|
|
min-height: 48px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.TableCard td[style*="sticky"]:hover {
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
.TableCard tr:hover {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.TableCard tr.level-0:hover {}
|
|
|
|
.TableCard tr.level-0 {
|
|
box-shadow: 3px 0 6px rgba(0, 0, 0, 0.1);
|
|
font-weight: 500;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.TableCard tr.level-1 {
|
|
padding-left: 20px;
|
|
position: relative;
|
|
z-index: 0;
|
|
}
|
|
|
|
.TableCard tr {
|
|
transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
.TableCard tr:hover {
|
|
background-color: #f0f7ff;
|
|
}
|
|
|
|
.TableCard tr.level-0:hover {
|
|
box-shadow: 4px 0 8px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.TableCard .action-buttons {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.TableCard .action-buttons button {
|
|
padding: 4px 10px;
|
|
border: 1px solid #d1d5da;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background-color: #fff;
|
|
color: #333;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.TableCard .action-buttons button:hover {
|
|
background-color: #f3f2f1;
|
|
border-color: #b3b3b3;
|
|
}
|
|
|
|
.TableCard .badge {
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.TableCard .badge-green {
|
|
background-color: #50e698;
|
|
color: #006635;
|
|
}
|
|
|
|
.TableCard .badge-orange {
|
|
background-color: #ffdd99;
|
|
color: #cc6600;
|
|
}
|
|
|
|
.TableCard .badge-gray {
|
|
background-color: #e1e4e8;
|
|
color: #333;
|
|
}
|
|
|
|
.TableCard .pagination {
|
|
margin-top: 16px;
|
|
padding: 12px 16px;
|
|
background-color: #f8f9fa;
|
|
border: 1px solid #e1e4e8;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 6px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.TableCard .pagination button {
|
|
padding: 6px 12px;
|
|
border: 1px solid #d1d5da;
|
|
background-color: white;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
font-size: 14px;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.TableCard .pagination button:hover:not(:disabled) {
|
|
background-color: #f3f2f1;
|
|
border-color: #b3b3b3;
|
|
}
|
|
|
|
.TableCard .pagination button.active {
|
|
background-color: #0078d4;
|
|
color: white;
|
|
border-color: #0078d4;
|
|
}
|
|
|
|
.TableCard .pagination button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.TableCard th {
|
|
background-color: #f8f9fa;
|
|
font-weight: 600;
|
|
color: #333;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.TableCard input[type="checkbox"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
accent-color: #0078d4;
|
|
}
|
|
|
|
.TableCard .editable {
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.TableCard .editable:hover {
|
|
background-color: #f5f9ff;
|
|
}
|
|
|
|
.TableCard .editable input {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 1px solid #0078d4;
|
|
border-radius: 0;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
font-size: 14px;
|
|
background-color: #fff;
|
|
box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
|
|
transition: all 0.2s ease-in-out;
|
|
text-align: inherit;
|
|
}
|
|
|
|
.TableCard .editable input:focus {
|
|
outline: none;
|
|
border-color: #005a9e;
|
|
box-shadow: 0 0 0 2px rgba(0, 90, 158, 0.3);
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #c1c1c1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #a8a8a8;
|
|
}
|
|
|
|
.loading-spinner {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid #f3f3f3;
|
|
border-top: 2px solid #0078d4;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin-right: 10px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.icon-edit:before {
|
|
content: '✏️';
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.icon-more:before {
|
|
content: '⋯';
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.TableCard tr {
|
|
transition: background-color 0.2s ease-in-out;
|
|
}
|
|
|
|
.TableCard input {
|
|
transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
|
}
|
|
|
|
.TableCard button {
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.modal {
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
|
|
.modal-content {
|
|
animation: modalFadeIn 0.3s ease-in-out;
|
|
}
|
|
|
|
@keyframes modalFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
} |