feat: 员工画像页面样式按设计稿全面调整

- 各区块背景色、字体、字号、颜色按设计稿原型图精确还原
- 质控情况背景色改为 #D5E7FD
- 培训情况数值单元格背景色改为 #CEF8E4
- 补充信息数值背景色改为 #FEE9E8，文字颜色改为红色
- 工作履历、获奖记录、雷达图、浮窗等区域样式完善

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/assets/styles/index.scss

@@ -5,13 +5,21 @@
 @use './btn.scss';
 @use './ruoyi.scss';
 
+@font-face {
+  font-family: 'AlibabaPuHuiTi';
+  src: url('/fonts/AlibabaPuHuiTi-Regular.ttf') format('truetype');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
 body {
   height: 100%;
   margin: 0;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  font-family: 'AlibabaPuHuiTi', Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 }
 
 label {

src/views/portraitManagement/employeeProfile/index.vue

@@ -68,8 +68,12 @@
                 <span class="val">{{ portrait.deptPath || '-' }}</span>
               </div>
               <div class="basic-row2">
+                <span><span class="lbl">出生日期：</span><span class="val">{{ portrait.birthday || '-' }}</span></span>
                 <span><span class="lbl">技能等级：</span><span class="val">{{ portrait.qualificationLevelText || '-' }}</span></span>
+              </div>
+              <div class="basic-row2">
                 <span><span class="lbl">学历：</span><span class="val">{{ portrait.schooling || '-' }}</span></span>
+                <span><span class="lbl">专业：</span><span class="val">{{ portrait.major || '-' }}</span></span>
               </div>
               <div class="basic-row2" v-if="portrait.startWorkingDate">
                 <span><span class="lbl">入职日期：</span><span class="val">{{ portrait.startWorkingDate }}</span></span>
@@ -77,8 +81,8 @@
               </div>
               <div class="tags-row">
                 <span class="lbl">标签：</span>
-                <el-tag size="small" type="primary" style="margin-right:6px" v-if="portrait.qualificationLevelText">{{ portrait.qualificationLevelText }}</el-tag>
-                <el-tag size="small" type="warning" v-if="portrait.deptName">{{ portrait.deptName }}</el-tag>
+                <el-tag size="small" type="primary" style="margin-right:6px" v-if="portrait.roleNames">{{ portrait.roleNames }}</el-tag>
+                <el-tag size="small" type="warning" v-if="portrait.postNames">{{ portrait.postNames }}</el-tag>
               </div>
             </div>
           </div>
@@ -98,110 +102,152 @@
           <div class="card left-mid-card">
             <div class="sec-title">● 工作履历</div>
             <div class="history-list">
-              <div class="history-item" v-if="portrait.startWorkingDate">
-                {{ portrait.startWorkingDate?.substring(0,7) }}入职
-                <span v-if="portrait.workYears != null">｜司龄{{ portrait.workYears }}年</span>
-                <span v-if="portrait.securityCheckYears != null">｜开机年限{{ portrait.securityCheckYears }}年</span>
-                <span v-if="portrait.securityInspectionPosition">｜现任职{{ portrait.securityInspectionPosition }}</span>
+              <div class="history-item">
+                {{ portrait.startWorkingDate ? formatWorkDate(portrait.startWorkingDate) + '入职' : '0(暂无数据)入职' }}
+                | 司龄{{ portrait.workYears != null ? portrait.workYears + '年' : '0(暂无数据)' }}
+                | 开机年限{{ portrait.securityCheckYears != null ? portrait.securityCheckYears + '年' : '0(暂无数据)' }}
+                | 现任职{{ portrait.roleNames || '0(暂无数据)' }}
               </div>
-              <div v-if="!portrait.startWorkingDate" class="empty-text">暂无履历数据</div>
             </div>
 
-            <div class="sec-title mt16">● 获奖记录</div>
-            <table class="award-table" v-if="portrait.awards && portrait.awards.length">
-              <thead>
-                <tr>
-                  <th>类型</th>
-                  <th>内容</th>
-                  <th>加分</th>
-                  <th>日期</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="(aw, i) in portrait.awards" :key="i" :class="i%2===0?'tr-a':'tr-b'">
-                  <td>{{ aw.type }}</td>
-                  <td>{{ aw.content }}</td>
-                  <td class="td-score">+{{ aw.score }}</td>
-                  <td>{{ aw.date }}</td>
-                </tr>
-              </tbody>
-            </table>
-            <div v-else class="empty-text mt8">暂无获奖记录</div>
+            <div class="award-section">
+              <div class="sec-title">● 获奖记录</div>
+              <table class="award-table" v-if="portrait.awards && portrait.awards.length">
+                <tbody>
+                  <tr v-for="(aw, i) in portrait.awards" :key="i" :class="i%2===0?'tr-a':'tr-b'">
+                    <td>{{ aw.level3Name || '-' }}</td>
+                    <td>{{ aw.level2Name || '-' }}</td>
+                    <td>{{ aw.level4Name || '-' }}</td>
+                    <td class="td-score">{{ aw.score }}</td>
+                  </tr>
+                </tbody>
+              </table>
+              <div v-else class="empty-text mt8">暂无获奖记录</div>
+            </div>
           </div>
 
           <!-- 个人能力雷达 -->
           <div class="card radar-card">
             <div class="sec-title">● 个人能力</div>
-            <div ref="abilityChart" class="chart-box"></div>
+            <div class="radar-body">
+              <!-- 扣分明细浮窗 -->
+              <div class="score-panel deduct-panel">
+                <div class="panel-header deduct-header">
+                  扣分明细&nbsp;<span class="panel-total">合计 {{ deductTotal }}</span>
+                </div>
+                <div class="panel-list">
+                  <div v-for="(item, i) in deductList" :key="i" class="panel-row">
+                    <span class="p-dim">{{ item.dimensionName }}</span>
+                    <span class="p-name">{{ item.level2Name }}{{ item.level3Name ? '·'+item.level3Name : '' }}</span>
+                    <span class="p-score deduct-score">{{ item.totalScore }}</span>
+                  </div>
+                  <div v-if="!deductList.length" class="p-empty">暂无扣分记录</div>
+                </div>
+              </div>
+
+              <!-- 雷达图 -->
+              <div ref="abilityChart" class="chart-box"></div>
+
+              <!-- 加分明细浮窗 -->
+              <div class="score-panel add-panel">
+                <div class="panel-header add-header">
+                  加分明细&nbsp;<span class="panel-total">合计 {{ addTotal }}</span>
+                </div>
+                <div class="panel-list">
+                  <div v-for="(item, i) in addList" :key="i" class="panel-row">
+                    <span class="p-dim">{{ item.dimensionName }}</span>
+                    <span class="p-name">{{ item.level2Name }}{{ item.level3Name ? '·'+item.level3Name : '' }}</span>
+                    <span class="p-score add-score">+{{ item.totalScore }}</span>
+                  </div>
+                  <div v-if="!addList.length" class="p-empty">暂无加分记录</div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
 
       </div>
 
-      <!-- 右侧边栏 -->
+      <!-- 右侧边栏：一个大卡片 -->
       <div class="ep-right">
-
-        <!-- 补充信息 -->
-        <div class="card side-card">
-          <div class="side-title">补充信息</div>
-          <div class="supp-grid">
-            <div class="supp-item">
-              <span class="s-lbl">政治面貌</span>
-              <span class="s-val">{{ portrait.politicalStatusText || '-' }}</span>
-            </div>
-            <div class="supp-item">
-              <span class="s-lbl">性别</span>
-              <span class="s-val">{{ portrait.sexText || '-' }}</span>
-            </div>
-            <div class="supp-item">
-              <span class="s-lbl">司龄</span>
-              <span class="s-val">{{ portrait.workYears != null ? portrait.workYears+'年' : '-' }}</span>
-            </div>
-            <div class="supp-item">
-              <span class="s-lbl">开机年限</span>
-              <span class="s-val">{{ portrait.securityCheckYears != null ? portrait.securityCheckYears+'年' : '-' }}</span>
-            </div>
-            <div class="supp-item">
-              <span class="s-lbl">性格特征</span>
-              <span class="s-val">{{ portrait.characterCharacteristics || '-' }}</span>
-            </div>
-            <div class="supp-item">
-              <span class="s-lbl">工作风格</span>
-              <span class="s-val">{{ portrait.workingStyle || '-' }}</span>
+        <div class="card side-big-card">
+
+          <!-- 补充信息 -->
+          <div class="side-section">
+            <div class="side-title">补充信息</div>
+            <div class="supp-grid supp-info-bg">
+              <div class="supp-item">
+                <span class="s-lbl">政治面貌</span>
+                <span class="s-val">{{ portrait.politicalStatusText || '-' }}</span>
+              </div>
+              <div class="supp-item">
+                <span class="s-lbl">性别</span>
+                <span class="s-val">{{ portrait.sexText || '-' }}</span>
+              </div>
+              <div class="supp-item">
+                <span class="s-lbl">司龄</span>
+                <span class="s-val">{{ portrait.workYears != null ? portrait.workYears+'年' : '-' }}</span>
+              </div>
+              <div class="supp-item">
+                <span class="s-lbl">开机年限</span>
+                <span class="s-val">{{ portrait.securityCheckYears != null ? portrait.securityCheckYears+'年' : '-' }}</span>
+              </div>
+              <div class="supp-item">
+                <span class="s-lbl">性格特征</span>
+                <span class="s-val">{{ portrait.characterCharacteristics || '-' }}</span>
+              </div>
+              <div class="supp-item">
+                <span class="s-lbl">工作风格</span>
+                <span class="s-val">{{ portrait.workingStyle || '-' }}</span>
+              </div>
             </div>
           </div>
-        </div>
 
-        <!-- 业务岗位 -->
-        <div class="card side-card">
-          <div class="side-title">业务岗位</div>
-          <div class="pos-list">
-            <div class="pos-item" v-for="(p, i) in positionList" :key="i">{{ p }}</div>
-            <div v-if="!positionList.length" class="empty-text">暂无岗位信息</div>
+          <!-- 业务岗位 -->
+          <div class="side-section">
+            <div class="side-title">业务岗位</div>
+            <div class="pos-list pos-info-bg">
+              <div class="pos-item" v-for="(p, i) in positionList" :key="i">{{ p }}</div>
+              <div v-if="!positionList.length" class="empty-text">暂无岗位信息</div>
+            </div>
           </div>
-        </div>
 
-        <!-- 培训情况 -->
-        <div class="card side-card">
-          <div class="side-title">培训情况</div>
-          <div v-if="portrait.theoryScore != null || portrait.imageScore != null">
-            <div class="train-header">
-              <span>季度</span><span>理论成绩</span><span>图像成绩</span>
+          <!-- 培训情况 -->
+          <div class="side-section">
+            <div class="side-title">培训情况</div>
+            <div class="train-info-bg">
+              <div v-if="portrait.theoryScore != null || portrait.imageScore != null">
+                <div class="train-header">
+                  <span>季度</span><span>理论成绩</span><span>图像成绩</span>
+                </div>
+                <div class="train-row">
+                  <span>{{ portrait.examPeriod || '-' }}</span>
+                  <span :style="examScoreStyle(portrait.theoryScore)">
+                    {{ portrait.theoryScore != null ? portrait.theoryScore+'分' : '-' }}
+                  </span>
+                  <span :style="examScoreStyle(portrait.imageScore)">
+                    {{ portrait.imageScore != null ? portrait.imageScore+'分' : '-' }}
+                  </span>
+                </div>
+              </div>
+              <div v-else class="empty-text">暂无考试记录</div>
             </div>
-            <div class="train-row">
-              <span>{{ portrait.examPeriod || '-' }}</span>
-              <span :style="examScoreStyle(portrait.theoryScore)">
-                {{ portrait.theoryScore != null ? portrait.theoryScore+'分' : '-' }}
-              </span>
-              <span :style="examScoreStyle(portrait.imageScore)">
-                {{ portrait.imageScore != null ? portrait.imageScore+'分' : '-' }}
-              </span>
+          </div>
+
+          <!-- 质控情况 -->
+          <div class="side-section">
+            <div class="side-title">质控情况</div>
+            <div class="supp-grid qc-info-bg">
+              <div class="supp-item">
+                <span class="s-lbl">查获违规品次数</span>
+                <span class="s-val">{{ portrait.qualityControlCount ?? '-' }}</span>
+              </div>
             </div>
           </div>
-          <div v-else class="empty-text">暂无考试记录</div>
-        </div>
 
+        </div>
       </div>
+
     </div>
   </div>
 </template>
@@ -295,6 +341,31 @@ const positionList = computed(() => {
   return pos.split(/[,，、/]/).map(s => s.trim()).filter(Boolean)
 })
 
+const scoreDetails = computed(() => portrait.value?.scoreDetails || [])
+
+const addList = computed(() =>
+  scoreDetails.value.filter(d => d.totalScore != null && Number(d.totalScore) > 0)
+)
+const deductList = computed(() =>
+  scoreDetails.value.filter(d => d.totalScore != null && Number(d.totalScore) < 0)
+)
+const addTotal = computed(() => {
+  const s = addList.value.reduce((acc, d) => acc + Number(d.totalScore), 0)
+  return (s > 0 ? '+' : '') + s.toFixed(2)
+})
+const deductTotal = computed(() => {
+  const s = deductList.value.reduce((acc, d) => acc + Number(d.totalScore), 0)
+  return s.toFixed(2)
+})
+
+const formatWorkDate = (d) => {
+  if (!d) return '-'
+  const str = String(d)
+  const parts = str.substring(0, 10).split('-')
+  if (parts.length < 3) return str
+  return `${parts[0]}.${Number(parts[1])}.${Number(parts[2])}`
+}
+
 const examScoreStyle = (score) => {
   const s = Number(score)
   if (s >= 90) return 'color:#67c23a;font-weight:600'
@@ -302,38 +373,48 @@ const examScoreStyle = (score) => {
   return 'color:#409eff'
 }
 
+const radarColor = computed(() => {
+  const total = Number(portrait.value?.totalScore ?? 0)
+  if (total < 75)  return { line: '#F56C6C', fill: 'rgba(245,108,108,0.22)', label: '#F56C6C' }
+  if (total >= 90) return { line: '#67C23A', fill: 'rgba(103,194,58,0.22)',  label: '#67C23A' }
+  return             { line: '#333333',  fill: 'rgba(255,196,0,0.28)',    label: '#555555' }
+})
+
 const initChart = () => {
   if (!abilityChart.value || !portrait.value) return
   if (chart) { chart.dispose(); chart = null }
   chart = echarts.init(abilityChart.value)
   const dims = portrait.value.dimensions || []
+  const c = radarColor.value
   chart.setOption({
     radar: {
+      // 指标名显示加权前分值
       indicator: dims.map(d => ({ name: d.name + '\n' + d.score, max: 100 })),
       center: ['50%', '52%'],
       radius: '65%',
       splitNumber: 4,
-      name: { textStyle: { color: '#555', fontSize: 11 }, formatter: (v) => v },
-      axisLine: { lineStyle: { color: '#c8dff5' } },
-      splitLine: { lineStyle: { color: '#c8dff5' } },
-      splitArea: { areaStyle: { color: ['rgba(64,158,255,0.03)', 'rgba(64,158,255,0.06)'] } }
+      name: { textStyle: { color: '#555', fontSize: 11 } },
+      axisLine: { lineStyle: { color: 'rgba(180,180,180,0.5)' } },
+      splitLine: { lineStyle: { color: 'rgba(180,180,180,0.4)' } },
+      splitArea: { areaStyle: { color: ['rgba(250,250,250,0.3)', 'rgba(230,230,230,0.2)'] } }
     },
     series: [{
       type: 'radar',
       data: [{
         value: dims.map(d => Number(d.score)),
         name: '个人能力',
-        areaStyle: { color: 'rgba(64,158,255,0.25)' },
-        lineStyle: { color: '#409eff', width: 2 },
-        itemStyle: { color: '#409eff' }
+        areaStyle: { color: c.fill },
+        lineStyle: { color: c.line, width: 3 },
+        itemStyle: { color: c.line }
       }],
       symbol: 'circle',
-      symbolSize: 5,
+      symbolSize: 6,
       label: {
         show: true,
         formatter: (p) => p.value,
-        color: '#409eff',
-        fontSize: 11
+        color: c.label,
+        fontSize: 12,
+        fontWeight: 'bold'
       }
     }],
     tooltip: { trigger: 'item' }
@@ -359,13 +440,13 @@ onBeforeUnmount(() => {
 <style scoped lang="scss">
 .ep-root {
   min-height: 100vh;
-  background: #eef2fb;
+  background: linear-gradient(180deg, #C5DDFF 0%, #E4FBF0 100%);
   display: flex;
   flex-direction: column;
-  padding: 12px;
+  padding: 20px;
   box-sizing: border-box;
-  gap: 12px;
-  font-family: 'AlibabaPuHui-regular', 'Alibaba PuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  gap: 20px;
+  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
   color: rgba(16, 16, 16, 1);
   line-height: 28px;
 }
@@ -402,7 +483,7 @@ onBeforeUnmount(() => {
 /* ── 主体两栏 ── */
 .ep-body {
   display: flex;
-  gap: 12px;
+  gap: 20px;
   flex: 1;
   min-height: 0;
 }
@@ -412,15 +493,19 @@ onBeforeUnmount(() => {
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 20px;
 }
 
 .ep-right {
-  width: 230px;
+  width: 366px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 20px;
+  font-size: 20px;
+  color: rgba(16, 16, 16, 1);
+  line-height: 28px;
+  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
 }
 
 /* ── 通用卡片 ── */
@@ -434,41 +519,37 @@ onBeforeUnmount(() => {
 .row-flex {
   display: flex;
 }
-.gap { gap: 12px; }
+.gap { gap: 20px; }
 
 /* ── 基本信息卡 ── */
 .basic-card {
-  flex: 1;
+  flex: 3;
+  min-width: 0;
   display: flex;
-  gap: 16px;
-  align-items: flex-start;
-  background: repeating-linear-gradient(
-    45deg,
-    #daeeff 0px, #daeeff 2px,
-    #eef7ff 2px, #eef7ff 14px
-  );
+  gap: 24px;
+  align-items: center;
+  background: #eef7ff;
 
   .avatar-area {
     flex-shrink: 0;
     .avatar {
-      width: 90px;
-      height: 90px;
-      border-radius: 50%;
-      border: 3px solid #409eff;
+      width: 260px;
+      height: 260px;
+      border-radius: 180px;
+      background-color: rgba(229, 229, 229, 1);
       object-fit: cover;
     }
     .avatar-fallback {
-      width: 90px;
-      height: 90px;
-      border-radius: 50%;
-      background: linear-gradient(135deg, #409eff, #79bbff);
-      border: 3px solid #409eff;
+      width: 260px;
+      height: 260px;
+      border-radius: 180px;
+      background-color: rgba(229, 229, 229, 1);
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 32px;
+      font-size: 80px;
       font-weight: bold;
-      color: #fff;
+      color: #aaa;
     }
   }
 
@@ -482,125 +563,191 @@ onBeforeUnmount(() => {
   .basic-name {
     display: flex;
     align-items: center;
+    .lbl {
+      font-size: 64px;
+      font-weight: bold;
+      color: rgba(31, 135, 232, 1);
+      font-family: 'YSBiaoTiHei-bold', 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+      line-height: 80px;
+    }
     .person-name {
-      font-size: 48px;
-      font-weight: normal;
+      font-size: 64px;
+      font-weight: bold;
       color: rgba(31, 135, 232, 1);
-      font-family: 'YSBiaoTiHei-bold', 'YouSheBiaoTiHei', 'PingFang SC', 'Microsoft YaHei', sans-serif;
-      line-height: 68px;
+      font-family: 'YSBiaoTiHei-bold', 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+      line-height: 80px;
     }
   }
 
   .basic-row {
-    font-size: 13px;
+    font-size: 20px;
+    color: rgba(16, 16, 16, 1);
+    line-height: 28px;
   }
 
   .basic-row2 {
     display: flex;
-    gap: 24px;
-    font-size: 13px;
+    gap: 32px;
+    font-size: 20px;
+    color: rgba(16, 16, 16, 1);
+    line-height: 28px;
   }
 
   .tags-row {
     display: flex;
     align-items: center;
     gap: 6px;
-    font-size: 13px;
+    font-size: 20px;
+    line-height: 28px;
   }
 
-  .lbl { color: #888; }
-  .val { color: #333; font-weight: 500; }
+  .lbl { color: rgba(16, 16, 16, 1); }
+  .val { color: rgba(16, 16, 16, 1); font-weight: 500; }
 }
 
 /* ── 综合评价卡 ── */
 .score-card {
-  width: 150px;
-  flex-shrink: 0;
+  flex: 1;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(160deg, #f7b89c, #f4a088);
-  border: none;
+  background: rgb(239, 246, 254);
+  color: rgba(16, 16, 16, 1);
+  font-size: 20px;
+  text-align: center;
+  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
 
   .score-label {
-    font-size: 14px;
-    font-weight: 600;
-    color: #fff;
-    margin-bottom: 8px;
-    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
+    font-size: 48px;
+    font-weight: bold;
+    line-height: 68px;
+    color: rgba(31, 135, 232, 1);
+    text-align: left;
+    font-family: 'YSBiaoTiHei-bold', 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    margin-bottom: 16px;
   }
 
   .score-num {
-    font-size: 52px;
+    width: 320px;
+    height: 126px;
+    border-radius: 30px;
+    background-color: rgba(118, 220, 198, 1);
+    color: rgba(247, 89, 54, 1);
+    font-size: 72px;
     font-weight: bold;
+    font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     line-height: 1;
-    color: #fff;
-    text-shadow: 0 2px 6px rgba(0,0,0,0.15);
   }
 
   .score-level-tag {
-    margin-top: 8px;
-    font-size: 14px;
+    margin-top: 16px;
+    font-size: 20px;
     font-weight: 600;
-    color: #fff;
-    background: rgba(255,255,255,0.25);
-    padding: 2px 12px;
+    color: rgba(16, 16, 16, 1);
+    background: #f5f5f5;
+    padding: 4px 20px;
     border-radius: 10px;
   }
 }
 
 /* ── 工作履历 + 获奖 ── */
 .left-mid-card {
-  width: 260px;
+  width: 604px;
   flex-shrink: 0;
   overflow-y: auto;
-  background: #e8f5ff;
+  background: rgb(243, 250, 252);
+  color: rgba(16, 16, 16, 1);
+  font-size: 20px;
+  line-height: 28px;
+  text-align: center;
+  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
 
   .sec-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: #333;
+    font-size: 48px;
+    font-weight: bold;
+    line-height: 68px;
+    color: rgba(31, 135, 232, 1);
+    text-align: left;
+    font-family: 'YSBiaoTiHei-bold', 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
     margin-bottom: 8px;
   }
   .mt16 { margin-top: 16px; }
   .mt8  { margin-top: 8px; }
 
   .history-list {
+    background-color: rgba(236, 220, 220, 1);
+    border-radius: 30px;
+    padding: 12px 16px;
+
     .history-item {
-      font-size: 12px;
-      color: #555;
-      background: #f0f7ff;
-      border-radius: 4px;
-      padding: 6px 10px;
-      margin-bottom: 6px;
-      line-height: 1.6;
+      font-size: 20px;
+      font-weight: normal;
+      font-family: 'PingFang SC', 'AlibabaPuHuiTi', 'Microsoft YaHei', sans-serif;
+      color: rgba(16, 16, 16, 1);
+      line-height: 28px;
+      text-align: left;
+      background: none;
+      border-radius: 0;
+      padding: 0;
+      margin-bottom: 0;
+
+      .lbl {
+        color: rgba(16, 16, 16, 1);
+        font-size: 20px;
+      }
     }
   }
 }
 
+.award-section {
+  margin-top: 16px;
+  background-color: rgba(169, 209, 250, 1);
+  border-radius: 20px;
+  padding: 12px;
+  font-size: 20px;
+  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  font-weight: bold;
+
+  .sec-title {
+    font-size: 48px;
+    font-weight: bold;
+    line-height: 68px;
+    color: rgba(31, 135, 232, 1);
+    text-align: left;
+    font-family: 'YSBiaoTiHei-bold', 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    margin-bottom: 10px;
+  }
+}
+
 .award-table {
   width: 100%;
   border-collapse: collapse;
-  font-size: 12px;
+  font-size: 20px;
+  line-height: 28px;
 
   th {
     background: #fde8e6;
-    color: #555;
-    padding: 6px 6px;
+    color: rgba(16, 16, 16, 1);
+    padding: 8px 10px;
     text-align: center;
-    font-weight: 500;
+    font-weight: 600;
   }
 
   td {
-    padding: 6px 6px;
+    padding: 8px 10px;
     text-align: center;
-    color: #555;
+    color: rgba(16, 16, 16, 1);
   }
 
-  .tr-a td { background: #fff8f7; }
-  .tr-b td { background: #fff; }
-  .td-score { color: #67c23a; font-weight: 600; }
+  .tr-a td { background: rgba(255,255,255,0.5); }
+  .tr-b td { background: rgba(255,255,255,0.25); }
+  .td-score { color: rgba(248, 3, 3, 1); font-weight: bold; }
 }
 
 /* ── 雷达图卡 ── */
@@ -609,31 +756,70 @@ onBeforeUnmount(() => {
   min-width: 0;
   display: flex;
   flex-direction: column;
+  background: rgb(242, 249, 253);
+  color: rgba(16, 16, 16, 1);
+  font-size: 20px;
+  line-height: 28px;
+  text-align: center;
+  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
 
   .sec-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: #333;
+    font-size: 48px;
+    font-weight: bold;
+    line-height: 68px;
+    color: rgba(31, 135, 232, 1);
+    text-align: left;
+    font-family: 'YSBiaoTiHei-bold', 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
     margin-bottom: 4px;
     flex-shrink: 0;
   }
 
   .chart-box {
     flex: 1;
-    min-height: 260px;
+    min-height: 400px;
   }
 }
 
-/* ── 右侧侧栏卡片 ── */
-.side-card {
+/* ── 右侧大卡片 ── */
+.side-big-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  overflow: hidden;
+}
+
+.side-section {
+  padding: 0 0 16px;
+  border-bottom: 1px solid #e8edf5;
+  &:last-child { border-bottom: none; padding-bottom: 0; }
+
   .side-title {
-    font-size: 13px;
-    font-weight: 600;
-    color: #fff;
-    background: #409eff;
-    margin: -14px -16px 12px;
-    padding: 7px 16px;
-    border-radius: 20px 20px 0 0;
+    font-size: 36px;
+    font-weight: bold;
+    line-height: 50px;
+    color: rgba(31, 135, 232, 1);
+    text-align: left;
+    font-family: 'YSBiaoTiHei-bold', 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    margin-bottom: 12px;
+  }
+}
+
+/* 补充信息内容背景 */
+.supp-info-bg {
+  background-color: rgba(254, 233, 232, 1);
+  border-radius: 30px;
+  padding: 12px 16px;
+  color: rgba(248, 3, 3, 1);
+  font-size: 20px;
+  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  font-weight: bold;
+
+  .s-lbl { color: rgba(248, 3, 3, 1); }
+  .s-val {
+    color: rgba(248, 3, 3, 1);
+    background: #FEE9E8;
+    font-weight: bold;
   }
 }
 
@@ -647,20 +833,20 @@ onBeforeUnmount(() => {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 5px 0;
+    padding: 7px 0;
     border-bottom: 1px dashed #dce9f5;
-    font-size: 12px;
+    font-size: 20px;
 
     &:last-child { border-bottom: none; }
 
-    .s-lbl { color: #666; }
+    .s-lbl { color: rgba(16, 16, 16, 1); }
     .s-val {
-      color: #2c6baf;
-      font-weight: 500;
-      background: #d6eaf8;
-      padding: 2px 10px;
+      color: rgba(248, 3, 3, 1);
+      font-weight: bold;
+      background: #FEE9E8;
+      padding: 3px 12px;
       border-radius: 4px;
-      min-width: 56px;
+      min-width: 80px;
       text-align: center;
     }
   }
@@ -670,46 +856,166 @@ onBeforeUnmount(() => {
 .pos-list {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
 
   .pos-item {
     background: #c8e6f8;
     color: #1a6aaa;
     border-radius: 4px;
-    padding: 7px 10px;
-    font-size: 12px;
+    padding: 8px 10px;
+    font-size: 20px;
     text-align: center;
     font-weight: 500;
   }
 }
 
+/* 业务岗位内容背景 */
+.pos-info-bg {
+  background-color: rgba(254, 233, 232, 1);
+  border-radius: 30px;
+  padding: 12px 16px;
+  color: rgba(248, 3, 3, 1);
+  font-size: 20px;
+  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  font-weight: bold;
+  line-height: 28px;
+  text-align: center;
+
+  .pos-item {
+    background: rgba(255, 255, 255, 0.6);
+    color: rgba(248, 3, 3, 1);
+    border-radius: 4px;
+    padding: 8px 10px;
+    font-size: 20px;
+    text-align: center;
+    font-weight: bold;
+  }
+}
+
+/* 培训情况内容背景 */
+.train-info-bg {
+  background-color: rgba(206, 248, 228, 1);
+  border-radius: 20px;
+  padding: 12px 16px;
+  color: rgba(248, 3, 3, 1);
+  font-size: 20px;
+  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  font-weight: bold;
+  line-height: 28px;
+  text-align: center;
+  min-height: 101px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
 /* 培训情况 */
 .train-header, .train-row {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
-  font-size: 12px;
+  font-size: 20px;
   text-align: center;
   gap: 4px;
 }
 
 .train-header {
-  color: #888;
-  margin-bottom: 6px;
-  padding-bottom: 4px;
+  color: rgba(16, 16, 16, 1);
+  font-size: 20px;
+  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  margin-bottom: 8px;
+  padding-bottom: 6px;
   border-bottom: 1px solid #dce9f5;
 }
 
 .train-row {
-  color: #2c6baf;
+  color: rgba(16, 16, 16, 1);
   font-weight: 600;
 
   span {
-    background: #d6eaf8;
+    background: #CEF8E4;
     border-radius: 4px;
-    padding: 4px 4px;
+    padding: 5px 4px;
+    font-size: 20px;
+    font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  }
+}
+
+/* ── 雷达图主体（含两侧浮窗） ── */
+.radar-body {
+  flex: 1;
+  display: flex;
+  gap: 8px;
+  min-height: 0;
+}
+
+/* ── 加/扣分浮窗 ── */
+.score-panel {
+  width: 180px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid #e0e7f0;
+  font-size: 12px;
+  background: #fff;
+}
+
+.panel-header {
+  padding: 6px 10px;
+  font-size: 13px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.deduct-header { background: rgba(254,233,232,1); color: #e03030; }
+.add-header    { background: rgba(206,248,228,1); color: #1a9944; }
+
+.panel-total {
+  font-size: 12px;
+  font-weight: bold;
+  margin-left: auto;
+}
+
+.panel-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.panel-row {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  gap: 4px;
+  border-bottom: 1px dashed #f0f0f0;
+  &:last-child { border-bottom: none; }
+}
+.p-dim  { color: #999; font-size: 11px; flex-shrink: 0; min-width: 28px; }
+.p-name { flex: 1; color: #444; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.p-score { font-size: 12px; font-weight: bold; flex-shrink: 0; }
+.deduct-score { color: #e03030; }
+.add-score    { color: #1a9944; }
+.p-empty { color: #bbb; font-size: 11px; text-align: center; padding: 12px 0; }
+
+/* 质控情况内容背景 */
+.qc-info-bg {
+  background-color: #D5E7FD;
+  border-radius: 30px;
+  padding: 12px 16px;
+  font-size: 20px;
+  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  font-weight: bold;
+
+  .s-lbl { color: rgba(16, 16, 16, 1); }
+  .s-val {
+    color: rgba(248, 3, 3, 1);
+    background: rgba(255, 255, 255, 0.6);
+    font-weight: bold;
   }
 }
 
 /* 通用 */
-.empty-text { color: #bbb; font-size: 12px; text-align: center; padding: 8px 0; }
+.empty-text { color: #bbb; font-size: 20px; text-align: center; padding: 8px 0; }
 </style>