493 lines
12 KiB
CSS
493 lines
12 KiB
CSS
@import "tailwindcss";
|
|
@import "@arco-design/web-vue/dist/arco.css";
|
|
|
|
/* ===== Design System CSS Variables ===== */
|
|
:root {
|
|
/* Primary — Teal */
|
|
--ta-primary: #0d9488;
|
|
--ta-primary-hover: #0f766e;
|
|
--ta-primary-light: #f0fdfa;
|
|
--ta-primary-gradient: linear-gradient(135deg, #14b8a6, #0d9488);
|
|
--ta-primary-glow: 0 0 20px rgba(13, 148, 136, 0.2);
|
|
|
|
/* Semantic */
|
|
--ta-success: #10b981;
|
|
--ta-warning: #f59e0b;
|
|
--ta-danger: #ef4444;
|
|
--ta-info: #06b6d4;
|
|
|
|
/* Text — Light mode */
|
|
--ta-text-primary: #1e293b;
|
|
--ta-text-secondary: #475569;
|
|
--ta-text-tertiary: #94a3b8;
|
|
--ta-text-weakest: #cbd5e1;
|
|
|
|
/* Background — Light mode */
|
|
--ta-bg-page: #f8fafc;
|
|
--ta-bg-card: #ffffff;
|
|
--ta-bg-secondary: #f1f5f9;
|
|
--ta-bg-glass: rgba(255, 255, 255, 0.8);
|
|
|
|
/* Border */
|
|
--ta-border: #e2e8f0;
|
|
--ta-border-light: #f1f5f9;
|
|
|
|
/* Sidebar */
|
|
--ta-sidebar-bg: #0f172a;
|
|
--ta-sidebar-active: rgba(13, 148, 136, 0.15);
|
|
--ta-sidebar-text: rgba(255, 255, 255, 0.7);
|
|
--ta-sidebar-text-active: #ffffff;
|
|
--ta-sidebar-divider: rgba(255, 255, 255, 0.06);
|
|
|
|
/* Radius */
|
|
--ta-radius: 10px;
|
|
--ta-radius-lg: 14px;
|
|
--ta-radius-xl: 20px;
|
|
|
|
/* Shadow */
|
|
--ta-shadow-default: 0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.04);
|
|
--ta-shadow-hover: 0 8px 24px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.03);
|
|
--ta-shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
|
|
--ta-shadow-button: 0 4px 12px rgba(13,148,136,0.3);
|
|
--ta-shadow-button-hover: 0 6px 16px rgba(13,148,136,0.4);
|
|
|
|
/* Transition */
|
|
--ta-ease: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--ta-duration-fast: 0.15s;
|
|
--ta-duration-normal: 0.2s;
|
|
--ta-duration-slow: 0.25s;
|
|
|
|
/* Glass */
|
|
--ta-glass-blur: 16px;
|
|
|
|
/* Selection */
|
|
--ta-selection-bg: rgba(13, 148, 136, 0.15);
|
|
--ta-selection-text: #042f2e;
|
|
}
|
|
|
|
/* ===== Arco Design Theme Override — Light Mode ===== */
|
|
body.arco-theme-light,
|
|
:root {
|
|
--color-primary-1: #f0fdfa;
|
|
--color-primary-2: #99f6e4;
|
|
--color-primary-3: #5eead4;
|
|
--color-primary-4: #2dd4bf;
|
|
--color-primary-5: #14b8a6;
|
|
--color-primary-6: #0d9488;
|
|
--color-primary-7: #0f766e;
|
|
--color-bg-1: #ffffff;
|
|
--color-bg-2: #f8fafc;
|
|
--color-bg-3: #f1f5f9;
|
|
--color-bg-4: #f1f5f9;
|
|
--color-bg-5: #e2e8f0;
|
|
--color-text-1: #1e293b;
|
|
--color-text-2: #475569;
|
|
--color-text-3: #94a3b8;
|
|
--color-text-4: #cbd5e1;
|
|
--color-border: #e2e8f0;
|
|
--color-border-2: #f1f5f9;
|
|
--color-fill-2: #f1f5f9;
|
|
--color-fill-3: #e2e8f0;
|
|
--color-success-light-1: #ecfdf5;
|
|
--color-success-light-2: #d1fae5;
|
|
--color-warning-light-1: #fffbeb;
|
|
--color-warning-light-2: #fef3c7;
|
|
--color-danger-light-1: #fef2f2;
|
|
--color-danger-light-2: #fee2e2;
|
|
--border-radius-medium: var(--ta-radius);
|
|
--border-radius-small: 6px;
|
|
}
|
|
|
|
/* ===== Arco Design Theme Override — Dark Mode ===== */
|
|
body.arco-theme-dark {
|
|
--ta-bg-page: #020617;
|
|
--ta-bg-card: #0f172a;
|
|
--ta-bg-secondary: #1e293b;
|
|
--ta-text-primary: #f1f5f9;
|
|
--ta-text-secondary: #cbd5e1;
|
|
--ta-border: #1e293b;
|
|
--ta-shadow-default: 0 1px 2px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.15);
|
|
--ta-shadow-hover: 0 8px 24px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.15);
|
|
--ta-shadow-card: 0 1px 3px rgba(0,0,0,0.15);
|
|
--ta-bg-glass: rgba(15, 23, 42, 0.85);
|
|
|
|
--color-bg-1: #0f172a;
|
|
--color-bg-2: #020617;
|
|
--color-bg-3: #1e293b;
|
|
--color-bg-4: #1e293b;
|
|
--color-bg-5: #334155;
|
|
--color-text-1: #f1f5f9;
|
|
--color-text-2: #cbd5e1;
|
|
--color-text-3: #64748b;
|
|
--color-text-4: #475569;
|
|
--color-border: #1e293b;
|
|
--color-border-2: #334155;
|
|
--color-fill-2: #1e293b;
|
|
--color-fill-3: #334155;
|
|
}
|
|
|
|
/* ===== Global Styles ===== */
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
"Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
background: var(--ta-bg-page);
|
|
color: var(--ta-text-primary);
|
|
margin: 0;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--ta-selection-bg);
|
|
color: var(--ta-selection-text);
|
|
}
|
|
|
|
/* ===== Custom Scrollbar ===== */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(148, 163, 184, 0.4);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(100, 116, 139, 0.5);
|
|
}
|
|
|
|
/* ===== Page Background Decoration ===== */
|
|
.page-bg {
|
|
background:
|
|
radial-gradient(at 40% 20%, rgba(13, 148, 136, 0.04) 0px, transparent 50%),
|
|
radial-gradient(at 80% 0%, rgba(6, 182, 212, 0.03) 0px, transparent 50%),
|
|
radial-gradient(at 0% 60%, rgba(13, 148, 136, 0.02) 0px, transparent 50%);
|
|
}
|
|
|
|
/* ===== Glassmorphism ===== */
|
|
.glass {
|
|
background: var(--ta-bg-glass);
|
|
backdrop-filter: blur(var(--ta-glass-blur));
|
|
-webkit-backdrop-filter: blur(var(--ta-glass-blur));
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
/* ===== Animations ===== */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from { opacity: 0; transform: translateY(16px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from { opacity: 0; transform: translateY(-16px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from { opacity: 0; transform: scale(0.95); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
@keyframes glow {
|
|
0%, 100% { box-shadow: 0 0 8px rgba(13, 148, 136, 0.2); }
|
|
50% { box-shadow: 0 0 20px rgba(13, 148, 136, 0.4); }
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0) translateX(0); }
|
|
25% { transform: translateY(-20px) translateX(10px); }
|
|
50% { transform: translateY(-10px) translateX(-10px); }
|
|
75% { transform: translateY(-30px) translateX(5px); }
|
|
}
|
|
|
|
@keyframes cardAppear {
|
|
from { opacity: 0; transform: translateY(12px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.animate-fadeIn { animation: fadeIn var(--ta-duration-normal) var(--ta-ease); }
|
|
.animate-slideUp { animation: slideUp 0.5s var(--ta-ease); }
|
|
.animate-scaleIn { animation: scaleIn var(--ta-duration-slow) var(--ta-ease); }
|
|
.animate-glow { animation: glow 2s ease-in-out infinite; }
|
|
.animate-float { animation: float 8s ease-in-out infinite; }
|
|
.animate-cardAppear { animation: cardAppear 0.5s var(--ta-ease) both; }
|
|
|
|
/* ===== Page Transition ===== */
|
|
.page-fade-enter-active,
|
|
.page-fade-leave-active {
|
|
transition: opacity var(--ta-duration-fast) ease;
|
|
}
|
|
|
|
.page-fade-enter-from,
|
|
.page-fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ===== Arco Component Enhancements ===== */
|
|
|
|
/* Table */
|
|
.arco-table-th {
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.arco-table-td {
|
|
border-bottom: 1px solid var(--ta-border-light);
|
|
}
|
|
|
|
.arco-table-tr:hover .arco-table-td {
|
|
background: var(--ta-primary-light) !important;
|
|
}
|
|
|
|
/* Card */
|
|
.arco-card {
|
|
border-radius: var(--ta-radius);
|
|
box-shadow: var(--ta-shadow-card);
|
|
transition: box-shadow var(--ta-duration-slow) var(--ta-ease), transform var(--ta-duration-slow) var(--ta-ease);
|
|
border: none;
|
|
}
|
|
|
|
.arco-card:hover {
|
|
box-shadow: var(--ta-shadow-hover);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.arco-card-no-border:hover {
|
|
border: none;
|
|
}
|
|
|
|
/* Primary Button */
|
|
.arco-btn-primary {
|
|
background: var(--ta-primary-gradient);
|
|
border: none;
|
|
box-shadow: var(--ta-shadow-button);
|
|
transition: all var(--ta-duration-slow) var(--ta-ease);
|
|
}
|
|
|
|
.arco-btn-primary:hover {
|
|
opacity: 0.9;
|
|
box-shadow: var(--ta-shadow-button-hover);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.arco-btn-primary:active {
|
|
transform: scale(0.97);
|
|
}
|
|
|
|
/* Input Focus */
|
|
.arco-input-wrapper.arco-input-focus,
|
|
.arco-select-view.arco-select-view-focus,
|
|
.arco-textarea-wrapper.arco-textarea-focus {
|
|
border-color: var(--ta-primary);
|
|
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
|
|
}
|
|
|
|
/* Tag */
|
|
.arco-tag {
|
|
border-radius: 6px;
|
|
padding: 2px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Modal — flexbox centering, no wrapper scroll */
|
|
.arco-modal-wrapper {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
overflow: hidden !important;
|
|
padding: 32px !important;
|
|
}
|
|
/* Disable Arco's inline-block vertical-centering hack */
|
|
.arco-modal-wrapper.arco-modal-wrapper-align-center::after {
|
|
display: none !important;
|
|
}
|
|
.arco-modal-wrapper .arco-modal {
|
|
border-radius: var(--ta-radius-xl);
|
|
max-height: calc(100vh - 64px);
|
|
margin: 0;
|
|
top: 0;
|
|
vertical-align: baseline;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.arco-modal-wrapper .arco-modal .arco-modal-header,
|
|
.arco-modal-wrapper .arco-modal .arco-modal-footer {
|
|
flex-shrink: 0;
|
|
}
|
|
.arco-modal-wrapper .arco-modal .arco-modal-body {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
min-height: 80px;
|
|
}
|
|
|
|
/* Pagination */
|
|
.arco-pagination-item {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* ===== Table Page Layout (内部滚动 + 左上统计 + 右下分页) ===== */
|
|
|
|
/* 页面根：纵向 flex 撑满可用高度，自身不滚动 */
|
|
.page-table {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 含表格的卡片：撑满剩余高度，内部承载滚动 —— 用 :has(.arco-table) 精确命中
|
|
（兼容同页有独立筛选卡片、Tab 内嵌等结构，仅表格卡片 flex:1） */
|
|
.page-table .arco-card:has(.arco-table) {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.page-table .arco-card:has(.arco-table) > .arco-card-header {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.page-table .arco-card:has(.arco-table) > .arco-card-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 表格卡片不随 hover 上浮 */
|
|
.page-table .arco-card:has(.arco-table):hover {
|
|
transform: none;
|
|
box-shadow: var(--ta-shadow-card);
|
|
}
|
|
|
|
/* 左上角统计栏（紧凑、不滚动）。不限定 .page-table 前缀，便于详情页等非 page-table 场景复用 */
|
|
.table-stats {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 12px;
|
|
font-size: 13px;
|
|
color: var(--ta-text-tertiary);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.table-stats__value {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--ta-text-primary);
|
|
line-height: 1;
|
|
}
|
|
|
|
.table-stats__divider {
|
|
width: 1px;
|
|
height: 14px;
|
|
background: var(--ta-border);
|
|
}
|
|
|
|
/* Arco 表格：撑满剩余高度，表体内部滚动 */
|
|
.page-table .arco-table {
|
|
flex: 1 1 0;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.page-table .arco-table-container {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 表体成为纵向滚动容器（同时保留横向滚动） */
|
|
.page-table .arco-table-content,
|
|
.page-table .arco-table-content-scroll-x {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* sticky 表头：固定在滚动容器顶部 */
|
|
.page-table .arco-table-content .arco-table-th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 11;
|
|
}
|
|
|
|
/* 表头中的固定列单元格（左上/右上角）：层级最高 */
|
|
.page-table .arco-table-content thead .arco-table-col-fixed-left,
|
|
.page-table .arco-table-content thead .arco-table-col-fixed-right {
|
|
z-index: 12;
|
|
}
|
|
|
|
/* 右下角分页栏 */
|
|
.page-table .table-footer {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
margin-top: 12px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid var(--ta-border-light);
|
|
}
|
|
|
|
/* 统计总数从表格左上角移到底部后：footer 内存在统计栏时两端对齐（统计居左、分页居右），
|
|
无统计栏的 footer 保持右对齐不受影响（:has 特异性高于 scoped .table-footer，可统一覆盖各页脚注） */
|
|
.page-table .table-footer:has(.table-stats) {
|
|
justify-content: space-between;
|
|
}
|
|
/* 统计栏移入底部后，去掉全局样式的下边距，与分页栏垂直居中 */
|
|
.page-table .table-footer .table-stats {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Tab 内嵌表格：让 Tab 容器与面板也参与纵向 flex，保证内部表格能撑满滚动 */
|
|
.page-table .arco-tabs {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.page-table .arco-tabs > .arco-tabs-content {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.page-table .arco-tabs .arco-tabs-content-list {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.page-table .arco-tabs .arco-tabs-pane {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Drawer */
|
|
.arco-drawer-wrapper .arco-drawer {
|
|
border-radius: 0 var(--ta-radius-xl) var(--ta-radius-xl) 0;
|
|
}
|