|
|
@@ -1,17 +1,17 @@
|
|
|
// 导入全局样式变量
|
|
|
-@import '@/styles/variables.scss';';
|
|
|
+@import '@/styles/variables.scss';
|
|
|
|
|
|
.header {
|
|
|
width: 100%;
|
|
|
height: $header-height;
|
|
|
padding: 0 $spacing-6;
|
|
|
- background: rgba(255, 255, 255, 0.8);
|
|
|
+ background: rgba($bg-secondary, 0.8);
|
|
|
backdrop-filter: blur(12px);
|
|
|
-webkit-backdrop-filter: blur(12px);
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- border-bottom: 1px solid rgba(229, 231, 235, 0.5);
|
|
|
+ border-bottom: 1px solid rgba($border-base, 0.5);
|
|
|
box-shadow: $shadow-sm;
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
@@ -20,7 +20,7 @@
|
|
|
transition: $transition-base;
|
|
|
|
|
|
&.scrolled {
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
+ background: $bg-secondary;
|
|
|
box-shadow: $shadow-md;
|
|
|
}
|
|
|
|
|
|
@@ -58,7 +58,7 @@
|
|
|
&-logo-wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- gap: $spacing-4;
|
|
|
+ gap: $spacing-5;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
@@ -77,7 +77,7 @@
|
|
|
}
|
|
|
|
|
|
.logo-image {
|
|
|
- height: 36px; // 固定高度 36px
|
|
|
+ height: $spacing-9; // 固定高度
|
|
|
width: auto; // 宽度自适应
|
|
|
object-fit: contain;
|
|
|
flex-shrink: 0;
|
|
|
@@ -86,7 +86,7 @@
|
|
|
// Logo 图形与文字之间的竖线间隔
|
|
|
.logo-divider {
|
|
|
width: 1px;
|
|
|
- height: 28px;
|
|
|
+ height: $font-xl;
|
|
|
background: $border-base; // 浅灰色
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
@@ -105,7 +105,7 @@
|
|
|
}
|
|
|
|
|
|
.logo-subtitle {
|
|
|
- font-size: $font-xs;
|
|
|
+ font-size: 10px; // 副标题字体减小
|
|
|
font-weight: $font-weight-semibold;
|
|
|
color: $primary-light;
|
|
|
text-transform: uppercase;
|
|
|
@@ -121,7 +121,7 @@
|
|
|
min-width: 180px; // 平板端最小宽度减小
|
|
|
|
|
|
.logo-image {
|
|
|
- height: 36px; // 保持 36px 高度
|
|
|
+ height: $font-xl; // 平板端保持
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -137,7 +137,7 @@
|
|
|
min-width: 140px; // 移动端最小宽度更小
|
|
|
|
|
|
.logo-image {
|
|
|
- height: 32px; // 移动端稍微减小
|
|
|
+ height: $spacing-8; // 移动端稍微减小
|
|
|
}
|
|
|
|
|
|
.logo-title {
|
|
|
@@ -154,7 +154,7 @@
|
|
|
&-right {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- gap: 16px;
|
|
|
+ gap: $spacing-5;
|
|
|
margin-left: auto;
|
|
|
}
|
|
|
|
|
|
@@ -170,7 +170,7 @@
|
|
|
// top: 50%;
|
|
|
// transform: translateY(-50%);
|
|
|
// font-size: 20px;
|
|
|
- // color: #9CA3AF;
|
|
|
+ // color: $text-hint;
|
|
|
// pointer-events: none;
|
|
|
// }
|
|
|
|
|
|
@@ -178,11 +178,11 @@
|
|
|
// width: 100%;
|
|
|
// height: 40px;
|
|
|
// padding: 0 16px 0 48px;
|
|
|
- // background: rgba(243, 244, 246, 0.8);
|
|
|
+ // background: rgba($bg-tertiary, 0.8);
|
|
|
// border: 1px solid transparent;
|
|
|
// border-radius: 8px;
|
|
|
// font-size: 14px;
|
|
|
- // color: #1F2937;
|
|
|
+ // color: $text-primary;
|
|
|
// outline: none;
|
|
|
// transition: all 0.2s ease;
|
|
|
|
|
|
@@ -197,7 +197,7 @@
|
|
|
// }
|
|
|
|
|
|
// &:hover {
|
|
|
- // background: rgba(243, 244, 246, 1);
|
|
|
+ // background: $bg-secondary;
|
|
|
// }
|
|
|
// }
|
|
|
// }
|
|
|
@@ -206,25 +206,25 @@
|
|
|
.security-status {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- gap: 6px;
|
|
|
- padding: 6px 12px;
|
|
|
- background: rgba(243, 244, 246, 0.8);
|
|
|
- border-radius: 9999px;
|
|
|
+ gap: $spacing-1;
|
|
|
+ padding: $spacing-2 $spacing-3;
|
|
|
+ background: rgba($bg-tertiary, 0.8);
|
|
|
+ border-radius: $radius-full;
|
|
|
font-size: 12px;
|
|
|
- color: #6B7280;
|
|
|
+ color: $text-hint;
|
|
|
font-weight: 500;
|
|
|
cursor: default;
|
|
|
transition: all 0.2s ease;
|
|
|
|
|
|
&:hover {
|
|
|
- background: rgba(243, 244, 246, 1);
|
|
|
+ background: rgba($bg-tertiary, 1);
|
|
|
}
|
|
|
|
|
|
.status-dot {
|
|
|
width: 8px;
|
|
|
height: 8px;
|
|
|
border-radius: 50%;
|
|
|
- background: #10B981;
|
|
|
+ background: $success-color;
|
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
|
}
|
|
|
}
|
|
|
@@ -233,14 +233,14 @@
|
|
|
.quick-access-btn {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- gap: 6px;
|
|
|
- padding: 8px 16px;
|
|
|
- background: linear-gradient(135deg, #00A0CA 0%, #005D80 100%); // 企业 Logo 蓝色渐变
|
|
|
+ gap: $spacing-1;
|
|
|
+ padding: $spacing-2 $spacing-3;
|
|
|
+ background: linear-gradient(135deg, $primary-light 0%, $primary-color 100%); // 企业 Logo 蓝色渐变
|
|
|
border: none;
|
|
|
border-radius: 9999px;
|
|
|
font-size: 13px;
|
|
|
font-weight: 600;
|
|
|
- color: #FFFFFF;
|
|
|
+ color: $bg-secondary;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.2s ease;
|
|
|
box-shadow: 0 2px 8px rgba(0, 160, 202, 0.3);
|
|
|
@@ -261,13 +261,13 @@
|
|
|
|
|
|
// 通知按钮
|
|
|
.notification-btn {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- border-radius: 8px;
|
|
|
+ width: $card-btn-size;
|
|
|
+ height: $card-btn-size;
|
|
|
+ border-radius: $radius-lg;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- color: #6B7280;
|
|
|
+ color: $text-hint;
|
|
|
background: transparent;
|
|
|
border: none;
|
|
|
cursor: pointer;
|
|
|
@@ -275,7 +275,7 @@
|
|
|
position: relative;
|
|
|
|
|
|
&:hover {
|
|
|
- background: rgba(243, 244, 246, 0.8);
|
|
|
+ background: $bg-tertiary;
|
|
|
color: $primary-color;
|
|
|
}
|
|
|
|
|
|
@@ -289,9 +289,9 @@
|
|
|
right: 8px;
|
|
|
width: 10px;
|
|
|
height: 10px;
|
|
|
- background: #EF4444;
|
|
|
+ background: $error-color;
|
|
|
border-radius: 50%;
|
|
|
- border: 2px solid #FFFFFF;
|
|
|
+ border: 2px solid $bg-secondary;
|
|
|
animation: bounce 1s infinite;
|
|
|
}
|
|
|
}
|
|
|
@@ -304,8 +304,8 @@
|
|
|
.user-section {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- gap: 10px;
|
|
|
- padding: 6px 12px;
|
|
|
+ gap: $spacing-2;
|
|
|
+ padding: $spacing-2 $spacing-3;
|
|
|
border-radius: 8px;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.2s ease;
|
|
|
@@ -313,14 +313,14 @@
|
|
|
border: none;
|
|
|
|
|
|
&:hover {
|
|
|
- background: rgba(243, 244, 246, 0.8);
|
|
|
+ background: $bg-tertiary;
|
|
|
}
|
|
|
|
|
|
.user-avatar {
|
|
|
width: 36px;
|
|
|
height: 36px;
|
|
|
border-radius: 50%;
|
|
|
- background: #E5E7EB;
|
|
|
+ background: $bg-secondary;
|
|
|
border: 2px solid transparent;
|
|
|
overflow: hidden;
|
|
|
transition: all 0.2s ease;
|
|
|
@@ -339,14 +339,14 @@
|
|
|
.user-info {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- gap: 2px;
|
|
|
+ gap: $spacing-1;
|
|
|
text-align: left;
|
|
|
min-width: 80px;
|
|
|
|
|
|
.user-name {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #374151;
|
|
|
+ font-size: $font-md;
|
|
|
+ font-weight: $font-semibold;
|
|
|
+ color: $text-primary;
|
|
|
transition: color 0.2s ease;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
@@ -356,15 +356,15 @@
|
|
|
}
|
|
|
|
|
|
.user-dept {
|
|
|
- font-size: 12px;
|
|
|
- color: #9CA3AF;
|
|
|
+ font-size: $font-xs;
|
|
|
+ color: $text-hint;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.user-dropdown-icon {
|
|
|
- font-size: 18px;
|
|
|
- color: #9CA3AF;
|
|
|
+ font-size: $icon-md;
|
|
|
+ color: $text-hint;
|
|
|
transition: color 0.2s ease;
|
|
|
}
|
|
|
}
|
|
|
@@ -376,7 +376,7 @@
|
|
|
min-width: 200px;
|
|
|
background: $bg-secondary;
|
|
|
border-radius: $radius-xl; // 12px
|
|
|
- box-shadow: @shadow-xl;
|
|
|
+ box-shadow: $shadow-xl;
|
|
|
border: 1px solid $border-base;
|
|
|
padding: $spacing-2;
|
|
|
z-index: $z-index-dropdown;
|
|
|
@@ -388,35 +388,35 @@
|
|
|
margin-bottom: $spacing-2;
|
|
|
|
|
|
.user-dropdown-name {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #1F2937;
|
|
|
+ font-size: $font-md;
|
|
|
+ font-weight: $font-weight-semibold;
|
|
|
+ color: $text-primary;
|
|
|
margin-bottom: 4px;
|
|
|
}
|
|
|
|
|
|
.user-dropdown-dept {
|
|
|
- font-size: 12px;
|
|
|
- color: #6B7280;
|
|
|
+ font-size: $font-xs;
|
|
|
+ color: $text-hint;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.user-dropdown-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- gap: 10px;
|
|
|
- padding: 10px 12px;
|
|
|
- border-radius: 8px;
|
|
|
+ gap: $spacing-2;
|
|
|
+ padding: $spacing-2 $spacing-3;
|
|
|
+ border-radius: $radius-md;
|
|
|
width: 100%;
|
|
|
background: transparent;
|
|
|
border: none;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.2s ease;
|
|
|
text-align: left;
|
|
|
- font-size: 14px;
|
|
|
- color: #374151;
|
|
|
+ font-size: $font-md;
|
|
|
+ color: $text-primary;
|
|
|
|
|
|
&:hover {
|
|
|
- background: #F3F4F6;
|
|
|
+ background: $bg-tertiary;
|
|
|
color: $primary-color;
|
|
|
|
|
|
.iconify {
|
|
|
@@ -425,32 +425,32 @@
|
|
|
}
|
|
|
|
|
|
&.danger {
|
|
|
- color: #EF4444;
|
|
|
+ color: $error-color;
|
|
|
|
|
|
&:hover {
|
|
|
- background: #FEF2F2;
|
|
|
+ background: rgba($error-color, 0.1);
|
|
|
}
|
|
|
|
|
|
.iconify {
|
|
|
- color: #EF4444;
|
|
|
+ color: $error-color;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.divider {
|
|
|
height: 1px;
|
|
|
- background: #E5E7EB;
|
|
|
+ background: $border-base;
|
|
|
margin: 8px 0;
|
|
|
padding: 0;
|
|
|
cursor: default;
|
|
|
|
|
|
&:hover {
|
|
|
- background: #E5E7EB;
|
|
|
+ background: $border-base;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.iconify {
|
|
|
- font-size: 18px;
|
|
|
- color: #6B7280;
|
|
|
+ font-size: $icon-md;
|
|
|
+ color: $text-hint;
|
|
|
transition: color 0.2s ease;
|
|
|
}
|
|
|
}
|