Explorar el Código

feat: 右侧边栏底色按原型图实现

补充信息值: 浅蓝底#d6eaf8 + 蓝色文字, min-width居中对齐;
业务岗位项: 加深至#c8e6f8, 文字#1a6aaa;
培训情况分值: 每格#d6eaf8底色, 蓝色加粗字体。

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
simonlll hace 1 mes
padre
commit
8ae31ad425
Se han modificado 1 ficheros con 25 adiciones y 9 borrados
  1. 25 9
      src/views/portraitManagement/employeeProfile/index.vue

+ 25 - 9
src/views/portraitManagement/employeeProfile/index.vue

@@ -643,13 +643,21 @@ onBeforeUnmount(() => {
643
     justify-content: space-between;
643
     justify-content: space-between;
644
     align-items: center;
644
     align-items: center;
645
     padding: 5px 0;
645
     padding: 5px 0;
646
-    border-bottom: 1px dashed #eee;
646
+    border-bottom: 1px dashed #dce9f5;
647
     font-size: 12px;
647
     font-size: 12px;
648
 
648
 
649
     &:last-child { border-bottom: none; }
649
     &:last-child { border-bottom: none; }
650
 
650
 
651
-    .s-lbl { color: #888; }
652
-    .s-val { color: #333; font-weight: 500; }
651
+    .s-lbl { color: #666; }
652
+    .s-val {
653
+      color: #2c6baf;
654
+      font-weight: 500;
655
+      background: #d6eaf8;
656
+      padding: 2px 10px;
657
+      border-radius: 4px;
658
+      min-width: 56px;
659
+      text-align: center;
660
+    }
653
   }
661
   }
654
 }
662
 }
655
 
663
 
@@ -660,12 +668,13 @@ onBeforeUnmount(() => {
660
   gap: 6px;
668
   gap: 6px;
661
 
669
 
662
   .pos-item {
670
   .pos-item {
663
-    background: #e8f4ff;
664
-    color: #409eff;
671
+    background: #c8e6f8;
672
+    color: #1a6aaa;
665
     border-radius: 4px;
673
     border-radius: 4px;
666
-    padding: 6px 10px;
674
+    padding: 7px 10px;
667
     font-size: 12px;
675
     font-size: 12px;
668
     text-align: center;
676
     text-align: center;
677
+    font-weight: 500;
669
   }
678
   }
670
 }
679
 }
671
 
680
 
@@ -675,18 +684,25 @@ onBeforeUnmount(() => {
675
   grid-template-columns: 1fr 1fr 1fr;
684
   grid-template-columns: 1fr 1fr 1fr;
676
   font-size: 12px;
685
   font-size: 12px;
677
   text-align: center;
686
   text-align: center;
687
+  gap: 4px;
678
 }
688
 }
679
 
689
 
680
 .train-header {
690
 .train-header {
681
   color: #888;
691
   color: #888;
682
   margin-bottom: 6px;
692
   margin-bottom: 6px;
683
   padding-bottom: 4px;
693
   padding-bottom: 4px;
684
-  border-bottom: 1px solid #eee;
694
+  border-bottom: 1px solid #dce9f5;
685
 }
695
 }
686
 
696
 
687
 .train-row {
697
 .train-row {
688
-  color: #333;
689
-  font-weight: 500;
698
+  color: #2c6baf;
699
+  font-weight: 600;
700
+
701
+  span {
702
+    background: #d6eaf8;
703
+    border-radius: 4px;
704
+    padding: 4px 4px;
705
+  }
690
 }
706
 }
691
 
707
 
692
 /* 通用 */
708
 /* 通用 */