325 lines
6.5 KiB
SCSS
325 lines
6.5 KiB
SCSS
// 組件樣式
|
|
|
|
// 狀態標籤樣式
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
border-radius: $border-radius-base;
|
|
font-size: $font-size-small;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
|
|
&.pending {
|
|
background-color: map-get($status-colors, 'PENDING');
|
|
color: white;
|
|
}
|
|
|
|
&.processing {
|
|
background-color: map-get($status-colors, 'PROCESSING');
|
|
color: white;
|
|
}
|
|
|
|
&.completed {
|
|
background-color: map-get($status-colors, 'COMPLETED');
|
|
color: white;
|
|
}
|
|
|
|
&.failed {
|
|
background-color: map-get($status-colors, 'FAILED');
|
|
color: white;
|
|
}
|
|
|
|
&.retry {
|
|
background-color: map-get($status-colors, 'RETRY');
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
// 檔案圖示樣式
|
|
.file-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: $border-radius-base;
|
|
color: white;
|
|
font-size: $font-size-small;
|
|
font-weight: bold;
|
|
|
|
&.docx, &.doc {
|
|
background-color: map-get($file-type-colors, 'docx');
|
|
}
|
|
|
|
&.pptx, &.ppt {
|
|
background-color: map-get($file-type-colors, 'pptx');
|
|
}
|
|
|
|
&.xlsx, &.xls {
|
|
background-color: map-get($file-type-colors, 'xlsx');
|
|
}
|
|
|
|
&.pdf {
|
|
background-color: map-get($file-type-colors, 'pdf');
|
|
}
|
|
}
|
|
|
|
// 進度條樣式
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 6px;
|
|
background-color: $border-color-lighter;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, $primary-color, lighten($primary-color, 10%));
|
|
border-radius: 3px;
|
|
transition: width 0.3s ease;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: linear-gradient(
|
|
-45deg,
|
|
rgba(255, 255, 255, 0.2) 25%,
|
|
transparent 25%,
|
|
transparent 50%,
|
|
rgba(255, 255, 255, 0.2) 50%,
|
|
rgba(255, 255, 255, 0.2) 75%,
|
|
transparent 75%,
|
|
transparent
|
|
);
|
|
background-size: 20px 20px;
|
|
animation: progress-stripes 1s linear infinite;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes progress-stripes {
|
|
0% { background-position: 0 0; }
|
|
100% { background-position: 20px 0; }
|
|
}
|
|
|
|
// 上傳區域樣式
|
|
.upload-area {
|
|
border: 2px dashed $border-color;
|
|
border-radius: $border-radius-base;
|
|
background-color: $bg-color-light;
|
|
transition: all $transition-duration-base;
|
|
|
|
&:hover, &.dragover {
|
|
border-color: $primary-color;
|
|
background-color: rgba($primary-color, 0.05);
|
|
}
|
|
|
|
&.disabled {
|
|
border-color: $border-color-lighter;
|
|
background-color: $border-color-extra-light;
|
|
cursor: not-allowed;
|
|
|
|
* {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 任務卡片樣式
|
|
.job-card {
|
|
@include card-style;
|
|
margin-bottom: $spacing-md;
|
|
cursor: pointer;
|
|
position: relative;
|
|
|
|
&:hover {
|
|
border-color: $primary-color;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.job-header {
|
|
@include flex-between;
|
|
margin-bottom: $spacing-sm;
|
|
|
|
.job-title {
|
|
font-weight: 600;
|
|
color: $text-color-primary;
|
|
@include text-ellipsis;
|
|
max-width: 60%;
|
|
}
|
|
|
|
.job-actions {
|
|
display: flex;
|
|
gap: $spacing-xs;
|
|
}
|
|
}
|
|
|
|
.job-info {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: $spacing-sm;
|
|
font-size: $font-size-small;
|
|
color: $text-color-secondary;
|
|
|
|
@include respond-to(sm) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.job-progress {
|
|
margin-top: $spacing-sm;
|
|
|
|
.progress-text {
|
|
@include flex-between;
|
|
font-size: $font-size-small;
|
|
color: $text-color-secondary;
|
|
margin-bottom: $spacing-xs;
|
|
}
|
|
}
|
|
|
|
.job-footer {
|
|
@include flex-between;
|
|
margin-top: $spacing-sm;
|
|
padding-top: $spacing-sm;
|
|
border-top: 1px solid $border-color-lighter;
|
|
|
|
.job-time {
|
|
font-size: $font-size-small;
|
|
color: $text-color-secondary;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 統計卡片樣式
|
|
.stat-card {
|
|
@include card-style($spacing-lg);
|
|
text-align: center;
|
|
|
|
.stat-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin: 0 auto $spacing-sm;
|
|
border-radius: 50%;
|
|
@include flex-center;
|
|
|
|
&.primary { background-color: rgba($primary-color, 0.1); color: $primary-color; }
|
|
&.success { background-color: rgba($success-color, 0.1); color: $success-color; }
|
|
&.warning { background-color: rgba($warning-color, 0.1); color: $warning-color; }
|
|
&.danger { background-color: rgba($danger-color, 0.1); color: $danger-color; }
|
|
&.info { background-color: rgba($info-color, 0.1); color: $info-color; }
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: $font-size-extra-large;
|
|
font-weight: bold;
|
|
color: $text-color-primary;
|
|
margin-bottom: $spacing-xs;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: $font-size-small;
|
|
color: $text-color-secondary;
|
|
margin-bottom: $spacing-sm;
|
|
}
|
|
|
|
.stat-change {
|
|
font-size: $font-size-small;
|
|
|
|
&.positive { color: $success-color; }
|
|
&.negative { color: $danger-color; }
|
|
}
|
|
}
|
|
|
|
// 空狀態樣式
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: $spacing-xxl * 2;
|
|
color: $text-color-secondary;
|
|
|
|
.empty-icon {
|
|
font-size: 64px;
|
|
color: $border-color;
|
|
margin-bottom: $spacing-lg;
|
|
}
|
|
|
|
.empty-title {
|
|
font-size: $font-size-large;
|
|
color: $text-color-primary;
|
|
margin-bottom: $spacing-sm;
|
|
}
|
|
|
|
.empty-description {
|
|
font-size: $font-size-base;
|
|
line-height: 1.6;
|
|
margin-bottom: $spacing-lg;
|
|
}
|
|
}
|
|
|
|
// 語言標籤樣式
|
|
.language-tag {
|
|
display: inline-block;
|
|
padding: 2px 6px;
|
|
margin: 2px;
|
|
background-color: $primary-color;
|
|
color: white;
|
|
border-radius: $border-radius-small;
|
|
font-size: $font-size-small;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
// 載入覆蓋層
|
|
.loading-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(2px);
|
|
@include flex-center;
|
|
z-index: $z-index-modal;
|
|
|
|
.loading-content {
|
|
text-align: center;
|
|
|
|
.loading-spinner {
|
|
@include loading-spinner(32px);
|
|
margin: 0 auto $spacing-md;
|
|
}
|
|
|
|
.loading-text {
|
|
color: $text-color-secondary;
|
|
font-size: $font-size-base;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 工具提示樣式覆蓋
|
|
.custom-tooltip {
|
|
&.el-popper {
|
|
max-width: 300px;
|
|
|
|
.el-popper__arrow::before {
|
|
border-color: rgba(0, 0, 0, 0.8);
|
|
}
|
|
}
|
|
|
|
.el-tooltip__content {
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
color: white;
|
|
border-radius: $border-radius-base;
|
|
padding: $spacing-sm $spacing-md;
|
|
font-size: $font-size-small;
|
|
line-height: 1.4;
|
|
}
|
|
} |