Bläddra i källkod

feat: update employee detail panel styles and structure

- Replaced the day-badge with a day-projects-label for improved project count display.
- Introduced high-load class for days with two or more projects, enhancing visual feedback.
- Updated CSS styles for better clarity and responsiveness in project representation.
0235711 2 dagar sedan
förälder
incheckning
d3412a75e8

+ 2 - 1
src/app/pages/team-leader/employee-detail-panel/employee-detail-panel.html

@@ -117,11 +117,12 @@
                        [class.today]="day.isToday"
                        [class.other-month]="!day.isCurrentMonth"
                        [class.has-projects]="day.projectCount > 0"
+                       [class.high-load]="day.projectCount >= 2"
                        [class.clickable]="day.projectCount > 0 && day.isCurrentMonth"
                        (click)="onCalendarDayClick(day)">
                     <div class="day-number">{{ day.date.getDate() }}</div>
                     @if (day.projectCount > 0) {
-                      <div class="day-badge" [class.high-load]="day.projectCount >= 2">
+                      <div class="day-projects-label">
                         {{ day.projectCount }}个项目
                       </div>
                     }

+ 41 - 19
src/app/pages/team-leader/employee-detail-panel/employee-detail-panel.scss

@@ -343,18 +343,13 @@
               color: #1e293b;
             }
 
-            .day-badge {
-              font-size: 10px;
-              padding: 2px 6px;
-              border-radius: 8px;
-              background: #dbeafe;
-              color: #1e40af;
+            .day-projects-label {
+              font-size: 11px;
+              padding: 3px 4px;
+              border-radius: 4px;
               font-weight: 500;
-
-              &.high-load {
-                background: #fee2e2;
-                color: #dc2626;
-              }
+              color: #666;
+              background: transparent;
             }
 
             &.today {
@@ -376,17 +371,44 @@
               }
             }
 
-            &.has-projects {
-              background: #f0f9ff;
+            // 普通项目背景(1个项目)
+            &.has-projects:not(.high-load) {
+              background: #bfdbfe;
+              border-color: #3b82f6;
+              
+              .day-number {
+                color: #1e40af;
+                font-weight: 600;
+              }
+
+              .day-projects-label {
+                color: #1e40af;
+                font-weight: 600;
+              }
+            }
+
+            // 高负载背景(2个及以上项目)
+            &.high-load {
+              background: #fca5a5;
+              border-color: #dc2626;
+              
+              .day-number {
+                color: #7f1d1d;
+                font-weight: 700;
+              }
+
+              .day-projects-label {
+                color: #7f1d1d;
+                font-weight: 600;
+              }
             }
 
             &.clickable {
               cursor: pointer;
 
               &:hover {
-                border-color: #667eea;
                 transform: scale(1.05);
-                box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
+                box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
               }
             }
           }
@@ -417,12 +439,12 @@
               }
 
               &.project-dot {
-                background: #dbeafe;
-                border: 1px solid #1e40af;
+                background: #bfdbfe;
+                border: 1px solid #3b82f6;
               }
 
               &.high-dot {
-                background: #fee2e2;
+                background: #fca5a5;
                 border: 1px solid #dc2626;
               }
             }
@@ -1046,7 +1068,7 @@
               font-size: 12px;
             }
 
-            .day-badge {
+            .day-projects-label {
               font-size: 9px;
               padding: 2px 4px;
             }