Merge branch 'shiy' into awen
# Conflicts: # package-lock.json # package.json
This commit is contained in:
@@ -94,7 +94,7 @@
|
||||
}
|
||||
|
||||
.ant-btn-default {
|
||||
@apply bg-white border border-gray-300 text-gray-800 hover:border-[#00684a] focus:ring-[#00684a];
|
||||
@apply bg-white border border-gray-300 text-gray-800 focus:ring-gray-300;
|
||||
}
|
||||
|
||||
.ant-btn-danger {
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
.date-range-picker {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.date-range-fields {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.date-field {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.date-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
transition: all 0.2s ease;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.date-input:focus {
|
||||
border-color: var(--primary-color);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(0,104,74, 0.2);
|
||||
}
|
||||
|
||||
.date-separator {
|
||||
margin: 0 4px;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
align-self: flex-end;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.simple-date-range-picker .date-range-fields {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.simple-date-range-picker .date-input {
|
||||
min-width: 130px;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 640px) {
|
||||
.date-range-fields {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.date-separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.simple-date-range-picker .date-range-fields {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.simple-date-range-picker .date-separator {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.date-label {
|
||||
color: #b0b0b0;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
background-color: #1f1f1f;
|
||||
border-color: #444;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.date-input:focus {
|
||||
border-color: #177ddc;
|
||||
box-shadow: 0 0 0 2px rgba(23, 125, 220, 0.2);
|
||||
}
|
||||
|
||||
.date-separator {
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
/**
|
||||
* 文件上传进度组件样式
|
||||
*/
|
||||
|
||||
:root {
|
||||
--primary-color: var(--color-primary, #00684a);
|
||||
--primary-hover: var(--color-primary-hover, #005a40);
|
||||
--primary-light: rgba(0, 104, 74, 0.1);
|
||||
--success-color: var(--color-success, #52c41a);
|
||||
--warning-color: var(--color-warning, #faad14);
|
||||
--error-color: var(--color-error, #ff4d4f);
|
||||
--text-color: rgba(0, 0, 0, 0.85);
|
||||
--text-secondary: rgba(0, 0, 0, 0.45);
|
||||
--border-color: #f0f0f0;
|
||||
--bg-gray: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 进度条样式 */
|
||||
.progress-container {
|
||||
@apply my-6;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
@apply h-2 bg-gray-100 rounded overflow-hidden mb-2;
|
||||
}
|
||||
|
||||
.progress-bar-inner {
|
||||
@apply h-full bg-[var(--primary-color)] rounded transition-[width] duration-300 ease-in-out w-0;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
@apply flex justify-between text-xs text-gray-500;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@screen sm {
|
||||
.progress-container {
|
||||
@apply my-4;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
@apply h-1.5;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
.file-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
background-color: #f0f0f0;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.file-tag .file-tag-icon {
|
||||
margin-right: 4px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 无背景模式 */
|
||||
.file-tag-no-bg {
|
||||
background-color: transparent !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.file-tag-no-bg .file-tag-icon {
|
||||
margin-right: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* 没有文本时的图标调整 */
|
||||
.file-tag:not(:has(.file-tag-text)) .file-tag-icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* 尺寸变体 */
|
||||
.file-tag-sm {
|
||||
padding: 1px 4px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.file-tag-sm .file-tag-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.file-tag-sm.file-tag-no-bg {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.file-tag-sm.file-tag-no-bg .file-tag-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.file-tag-lg {
|
||||
padding: 3px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.file-tag-lg .file-tag-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.file-tag-lg.file-tag-no-bg {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.file-tag-lg.file-tag-no-bg .file-tag-icon {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
/* 文件类型变体 */
|
||||
.file-tag-pdf {
|
||||
background-color: #fee2e2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.file-tag-doc, .file-tag-docx {
|
||||
background-color: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.file-tag-xls, .file-tag-xlsx {
|
||||
background-color: #d1fae5;
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
.file-tag-ppt, .file-tag-pptx {
|
||||
background-color: #ffedd5;
|
||||
color: #c2410c;
|
||||
}
|
||||
|
||||
.file-tag-zip, .file-tag-rar {
|
||||
background-color: #e9d5ff;
|
||||
color: #7e22ce;
|
||||
}
|
||||
|
||||
.file-tag-txt {
|
||||
background-color: #e4e4e7;
|
||||
color: #3f3f46;
|
||||
}
|
||||
|
||||
.file-tag-jpg, .file-tag-jpeg, .file-tag-png, .file-tag-gif {
|
||||
background-color: #d8b4fe;
|
||||
color: #6b21a8;
|
||||
}
|
||||
|
||||
/* 适配深色模式 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.file-tag {
|
||||
background-color: #2d2d2d;
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
.file-tag-pdf {
|
||||
background-color: rgba(185, 28, 28, 0.2);
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.file-tag-doc, .file-tag-docx {
|
||||
background-color: rgba(29, 78, 216, 0.2);
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
.file-tag-xls, .file-tag-xlsx {
|
||||
background-color: rgba(4, 120, 87, 0.2);
|
||||
color: #6ee7b7;
|
||||
}
|
||||
|
||||
.file-tag-ppt, .file-tag-pptx {
|
||||
background-color: rgba(194, 65, 12, 0.2);
|
||||
color: #fdba74;
|
||||
}
|
||||
|
||||
.file-tag-zip, .file-tag-rar {
|
||||
background-color: rgba(126, 34, 206, 0.2);
|
||||
color: #c4b5fd;
|
||||
}
|
||||
|
||||
.file-tag-txt {
|
||||
background-color: rgba(63, 63, 70, 0.2);
|
||||
color: #a1a1aa;
|
||||
}
|
||||
|
||||
.file-tag-jpg, .file-tag-jpeg, .file-tag-png, .file-tag-gif {
|
||||
background-color: rgba(107, 33, 168, 0.2);
|
||||
color: #e9d5ff;
|
||||
}
|
||||
}
|
||||
@@ -4,7 +4,26 @@
|
||||
|
||||
/* 文件类型标签基础样式 */
|
||||
.file-type-tag {
|
||||
@apply inline-flex items-center px-2 py-1 rounded text-xs font-medium;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.file-type-tag .file-type-icon {
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 无图标模式 */
|
||||
.file-type-tag-no-icon {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
/* 文件类型颜色 */
|
||||
@@ -61,13 +80,23 @@
|
||||
@apply bg-purple-100 text-purple-800;
|
||||
}
|
||||
|
||||
/* 文件类型尺寸 */
|
||||
/* 尺寸变体 */
|
||||
.file-type-tag-sm {
|
||||
@apply px-1.5 py-0 text-xs;
|
||||
padding: 2px 6px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.file-type-tag-sm .file-type-icon {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.file-type-tag-lg {
|
||||
@apply px-2.5 py-1 text-sm;
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.file-type-tag-lg .file-type-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 带图标的文件类型标签 */
|
||||
@@ -77,4 +106,68 @@
|
||||
|
||||
.file-type-tag i {
|
||||
@apply mr-1 text-sm;
|
||||
}
|
||||
|
||||
/* 文件类型变体 */
|
||||
.file-type-sales-contract {
|
||||
background-color: #e8f5fd;
|
||||
color: #0077cc;
|
||||
}
|
||||
|
||||
.file-type-purchase-contract {
|
||||
background-color: #f5f0ff;
|
||||
color: #6b46c1;
|
||||
}
|
||||
|
||||
.file-type-license {
|
||||
background-color: #fef5e7;
|
||||
color: #dd6b20;
|
||||
}
|
||||
|
||||
.file-type-punishment {
|
||||
background-color: #fee7e7;
|
||||
color: #e53e3e;
|
||||
}
|
||||
|
||||
.file-type-agreement {
|
||||
background-color: #e8fdf5;
|
||||
color: #00a67e;
|
||||
}
|
||||
|
||||
/* 动画效果 - 鼠标悬停 */
|
||||
.file-type-tag:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 适配深色模式 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.file-type-tag {
|
||||
background-color: #2d2d2d;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.file-type-sales-contract {
|
||||
background-color: rgba(0, 119, 204, 0.2);
|
||||
color: #4db8ff;
|
||||
}
|
||||
|
||||
.file-type-purchase-contract {
|
||||
background-color: rgba(107, 70, 193, 0.2);
|
||||
color: #b794f4;
|
||||
}
|
||||
|
||||
.file-type-license {
|
||||
background-color: rgba(221, 107, 32, 0.2);
|
||||
color: #f6ad55;
|
||||
}
|
||||
|
||||
.file-type-punishment {
|
||||
background-color: rgba(229, 62, 62, 0.2);
|
||||
color: #fc8181;
|
||||
}
|
||||
|
||||
.file-type-agreement {
|
||||
background-color: rgba(0, 166, 126, 0.2);
|
||||
color: #68d5b1;
|
||||
}
|
||||
}
|
||||
@@ -24,10 +24,10 @@
|
||||
|
||||
/* 筛选控件 */
|
||||
.filter-control {
|
||||
@apply w-full;
|
||||
@apply w-full focus:border-[#00684a] focus:shadow-[0,0,0,2px,rgba(0,104,74,0.2)] focus:outline-none;
|
||||
}
|
||||
|
||||
/* 筛选操作按钮区域 */
|
||||
/* 筛选操作按钮区域 */
|
||||
.filter-actions {
|
||||
@apply flex justify-end items-center pt-4 mt-4 border-t border-gray-100 space-x-3;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,178 @@
|
||||
/**
|
||||
* 处理步骤组件样式
|
||||
*/
|
||||
|
||||
:root {
|
||||
--primary-color: var(--color-primary, #00684a);
|
||||
--primary-hover: var(--color-primary-hover, #005a40);
|
||||
--primary-light: rgba(0, 104, 74, 0.1);
|
||||
--success-color: var(--color-success, #52c41a);
|
||||
--warning-color: var(--color-warning, #faad14);
|
||||
--error-color: var(--color-error, #ff4d4f);
|
||||
--text-color: rgba(0, 0, 0, 0.85);
|
||||
--text-secondary: rgba(0, 0, 0, 0.45);
|
||||
--border-color: #f0f0f0;
|
||||
--bg-gray: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 横向步骤样式 */
|
||||
.steps-container-horizontal {
|
||||
@apply my-8 flex justify-between relative;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.steps-container-horizontal::before {
|
||||
content: "";
|
||||
@apply absolute top-[14px] left-[30px] right-[30px] h-0.5 bg-gray-200 z-0;
|
||||
}
|
||||
|
||||
.step-item-horizontal {
|
||||
@apply relative flex flex-col items-center flex-1 text-center z-[1];
|
||||
}
|
||||
|
||||
.step-icon-horizontal {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
@apply rounded-full bg-gray-300 flex items-center justify-center mb-2 relative z-[2];
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.step-icon-horizontal i {
|
||||
@apply text-white text-base;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.step-icon-horizontal span:not(.loading-spinner) {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.step-item-horizontal.active .step-icon-horizontal {
|
||||
@apply bg-[var(--primary-color)];
|
||||
box-shadow: 0 0 0 4px rgba(0, 104, 74, 0.1);
|
||||
}
|
||||
|
||||
.step-item-horizontal.active .step-icon-horizontal span:not(.loading-spinner) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.step-item-horizontal.done .step-icon-horizontal {
|
||||
@apply bg-[var(--success-color)];
|
||||
}
|
||||
|
||||
.step-item-horizontal.done .step-icon-horizontal i {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.step-item-horizontal.error .step-icon-horizontal {
|
||||
@apply bg-[var(--error-color)];
|
||||
}
|
||||
|
||||
.step-item-horizontal.error .step-icon-horizontal i {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.step-content-horizontal {
|
||||
@apply px-2 max-w-[140px];
|
||||
}
|
||||
|
||||
.step-title-horizontal {
|
||||
@apply font-medium mb-1 text-sm whitespace-nowrap overflow-hidden text-ellipsis;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.step-description-horizontal {
|
||||
@apply text-xs text-gray-500 leading-tight mt-1;
|
||||
}
|
||||
|
||||
.step-item-horizontal.active .step-title-horizontal {
|
||||
@apply text-[var(--primary-color)];
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.step-item-horizontal.done .step-title-horizontal {
|
||||
@apply text-[var(--success-color)];
|
||||
}
|
||||
|
||||
.step-item-horizontal.error .step-title-horizontal {
|
||||
@apply text-[var(--error-color)];
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
.loading-spinner {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -8px; /* 宽度的一半 */
|
||||
margin-top: -8px; /* 高度的一半 */
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-top-color: var(--primary-color);
|
||||
animation-name: spinner-rotate;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes spinner-rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 响应式调整 - 只在小屏幕上应用垂直布局 */
|
||||
@media (max-width: 640px) {
|
||||
.steps-container-horizontal {
|
||||
@apply flex-col items-start;
|
||||
}
|
||||
|
||||
.steps-container-horizontal::before {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.step-item-horizontal {
|
||||
@apply flex-row items-start mb-5 w-full;
|
||||
}
|
||||
|
||||
.step-item-horizontal:last-child {
|
||||
@apply mb-0;
|
||||
}
|
||||
|
||||
.step-content-horizontal {
|
||||
@apply text-left ml-3 max-w-none;
|
||||
}
|
||||
|
||||
.step-icon-horizontal {
|
||||
@apply mb-0 flex-shrink-0;
|
||||
}
|
||||
|
||||
.step-title-horizontal {
|
||||
@apply text-base;
|
||||
}
|
||||
|
||||
.step-description-horizontal {
|
||||
@apply mt-1 text-sm;
|
||||
}
|
||||
|
||||
/* 垂直连接线 */
|
||||
.step-item-horizontal::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 30px;
|
||||
bottom: -20px;
|
||||
width: 2px;
|
||||
background-color: #e8e8e8;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.step-item-horizontal:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -12,12 +12,12 @@
|
||||
@apply flex items-center;
|
||||
}
|
||||
|
||||
.search-box-row .form-input {
|
||||
/* .search-box-row .form-input {
|
||||
@apply rounded-r-none;
|
||||
}
|
||||
} */
|
||||
|
||||
.search-box-row .search-button {
|
||||
@apply rounded-l-none h-full flex items-center;
|
||||
@apply h-full flex items-center;
|
||||
}
|
||||
|
||||
/* 搜索输入框 */
|
||||
|
||||
@@ -2,71 +2,90 @@
|
||||
* 状态徽章组件样式
|
||||
*/
|
||||
|
||||
/* 状态徽章基础样式 */
|
||||
.status-badge {
|
||||
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 状态颜色 - 从 documents_index.css 同步 */
|
||||
.status-pending {
|
||||
background-color: #E6F7FF;
|
||||
color: #1890FF;
|
||||
}
|
||||
|
||||
.status-processing {
|
||||
background-color: #FFF7E6;
|
||||
color: #FA8C16;
|
||||
}
|
||||
|
||||
.status-pass {
|
||||
background-color: #F6FFED;
|
||||
color: #52C41A;
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
background-color: #FFFBE6;
|
||||
color: #FAAD14;
|
||||
}
|
||||
|
||||
.status-fail {
|
||||
background-color: #FFF1F0;
|
||||
color: #F5222D;
|
||||
}
|
||||
|
||||
/* 动画效果 - 用于processing状态 */
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.status-processing i {
|
||||
animation: spin 1.2s linear infinite;
|
||||
}
|
||||
|
||||
/* 状态徽章尺寸 */
|
||||
.status-badge-sm {
|
||||
@apply px-2 py-0.5 text-xs;
|
||||
padding: 0px 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.status-badge-lg {
|
||||
@apply px-3 py-1 text-sm;
|
||||
}
|
||||
|
||||
/* 状态徽章类型 */
|
||||
.status-badge-success {
|
||||
@apply bg-green-100 text-green-800;
|
||||
}
|
||||
|
||||
.status-badge-processing {
|
||||
@apply bg-blue-100 text-blue-800;
|
||||
}
|
||||
|
||||
.status-badge-warning {
|
||||
@apply bg-yellow-100 text-yellow-800;
|
||||
}
|
||||
|
||||
.status-badge-error {
|
||||
@apply bg-red-100 text-red-800;
|
||||
}
|
||||
|
||||
.status-badge-default {
|
||||
@apply bg-gray-100 text-gray-800;
|
||||
padding: 3px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 带图标的状态徽章 */
|
||||
.status-badge-with-icon {
|
||||
@apply pl-1.5;
|
||||
}
|
||||
|
||||
.status-badge i {
|
||||
@apply mr-1;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
/* 可点击的状态徽章 */
|
||||
.status-badge-clickable {
|
||||
@apply cursor-pointer transition-colors duration-200;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.status-badge-clickable.status-badge-success:hover {
|
||||
@apply bg-green-200;
|
||||
.status-badge-clickable.status-pending:hover {
|
||||
background-color: #BAE7FF;
|
||||
}
|
||||
|
||||
.status-badge-clickable.status-badge-processing:hover {
|
||||
@apply bg-blue-200;
|
||||
.status-badge-clickable.status-processing:hover {
|
||||
background-color: #FFE7BA;
|
||||
}
|
||||
|
||||
.status-badge-clickable.status-badge-warning:hover {
|
||||
@apply bg-yellow-200;
|
||||
.status-badge-clickable.status-pass:hover {
|
||||
background-color: #D9F7BE;
|
||||
}
|
||||
|
||||
.status-badge-clickable.status-badge-error:hover {
|
||||
@apply bg-red-200;
|
||||
.status-badge-clickable.status-warning:hover {
|
||||
background-color: #FFF1B8;
|
||||
}
|
||||
|
||||
.status-badge-clickable.status-badge-default:hover {
|
||||
@apply bg-gray-200;
|
||||
.status-badge-clickable.status-fail:hover {
|
||||
background-color: #FFCCC7;
|
||||
}
|
||||
@@ -19,7 +19,7 @@
|
||||
|
||||
/* 表格内容 */
|
||||
.ant-table tbody td {
|
||||
@apply py-3 px-4 border-b border-gray-100;
|
||||
@apply py-3 px-4 border-b border-gray-100 align-middle;
|
||||
}
|
||||
|
||||
/* 表格行 */
|
||||
@@ -63,6 +63,25 @@
|
||||
@apply text-[#00684a];
|
||||
}
|
||||
|
||||
/* 模板名称列垂直居中样式 */
|
||||
.ant-table .flex.items-center {
|
||||
height: 1.5rem; /* h-6 */
|
||||
}
|
||||
|
||||
.ant-table .flex.items-center i {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ant-table .flex.items-center span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* 基础表格 */
|
||||
.table-container {
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* 文件上传区域组件样式
|
||||
*/
|
||||
|
||||
:root {
|
||||
--primary-color: var(--color-primary, #00684a);
|
||||
--primary-hover: var(--color-primary-hover, #005a40);
|
||||
--primary-light: rgba(0, 104, 74, 0.1);
|
||||
--success-color: var(--color-success, #52c41a);
|
||||
--warning-color: var(--color-warning, #faad14);
|
||||
--error-color: var(--color-error, #ff4d4f);
|
||||
--text-color: rgba(0, 0, 0, 0.85);
|
||||
--text-secondary: rgba(0, 0, 0, 0.45);
|
||||
--border-color: #f0f0f0;
|
||||
--bg-gray: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 上传区域样式 */
|
||||
.upload-area {
|
||||
@apply border-2 border-dashed border-gray-300 rounded-lg p-10 text-center bg-gray-50 cursor-pointer transition-all duration-300;
|
||||
}
|
||||
|
||||
.upload-area:hover,
|
||||
.upload-area.dragover {
|
||||
@apply border-[var(--primary-color)] bg-[var(--primary-light)];
|
||||
}
|
||||
|
||||
.upload-area.disabled {
|
||||
@apply opacity-50 cursor-not-allowed;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
@apply text-5xl text-gray-400 mb-4;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
@apply text-gray-500 mb-2 font-medium;
|
||||
}
|
||||
|
||||
.upload-tip {
|
||||
@apply text-xs text-gray-500;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@screen sm {
|
||||
.upload-area {
|
||||
@apply p-6;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
@apply text-4xl mb-2;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
@apply text-sm;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user