admin/prop-ai-hr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(mobile): 优化候选人和成长页视觉细节

Browse Source 
统一候选人、主管、案例、学习和我的成长页面中的状态色、徽标与摘要卡样式，不改变原有数据流和交互逻辑。
This commit is contained in:
admin
2026-07-11 01:13:57 +08:00
parent 78859899f3
commit 19788bedb0
6 changed files with 158 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mobile-uni/src/pages/candidate/interview/index.vue
+7 -4
View File
@@ -354,11 +354,14 @@ onShow(() => {
}
.question-point {
display: block;
display: inline-block;
margin-top: 8px;
color: #64748b;
font-size: 13px;
line-height: 1.45;
padding: 4px 8px;
background: #f1f5f9;
color: #475569;
border-radius: 4px;
font-size: 12px;
font-weight: 800;
}
.answer-textarea {
mobile-uni/src/pages/candidate/progress/index.vue
+4
View File
@@ -306,6 +306,10 @@ onShow(() => {
background: #e2e8f0;
}
.step-row.complete .step-line {
background: #22c55e;
}
.step-title {
display: block;
color: #172033;
mobile-uni/src/pages/supervisor/index/index.vue
+9 -1
View File
@@ -307,7 +307,15 @@ onShow(() => {
}
.metric-item.primary {
background: #eff6ff;
background: #fff5f5;
}
.metric-item.primary .metric-value {
color: #e70014;
}
.metric-item.primary .metric-label {
color: #bd0010;
}
.metric-value,
mobile-uni/src/pages/user/cases/index.vue
+6 -1
View File
@@ -27,7 +27,7 @@
<view v-else class="panel">
<text class="panel-title">提交素材</text>
<view class="file-box">
<view class="file-box" :class="{ 'has-file': Boolean(selectedFile) }">
<text class="file-title">{{ selectedFile?.name || '未选择音频' }}</text>
<text class="file-desc">{{ selectedFile ? formatSize(selectedFile.size) : '支持 mp3 / wav / m4a / webm 等音频' }}</text>
</view>
@@ -273,6 +273,11 @@ onShow(() => {
background: #f8fafc;
}
.file-box.has-file {
border-color: #168243;
background: #f2f8f4;
}
.file-title,
.file-desc,
.case-content,
mobile-uni/src/pages/user/learning/index.vue
+27 -3
View File
@@ -26,15 +26,15 @@
</view>
<view v-if="loggedIn" class="learning-summary">
<view class="summary-item">
<view class="summary-item pending">
<text class="summary-value">{{ pendingCount }}</text>
<text class="summary-label">待完成</text>
</view>
<view class="summary-item">
<view class="summary-item completed">
<text class="summary-value">{{ completedCount }}</text>
<text class="summary-label">今日完成</text>
</view>
<view class="summary-item">
<view class="summary-item reference">
<text class="summary-value">{{ referenceCount }}</text>
<text class="summary-label">知识引用</text>
</view>
@@ -352,6 +352,30 @@ onShow(() => {
background: #eff6ff;
}
.summary-item.pending {
background: #fff0f1;
border-color: #fee2e2;
}
.summary-item.pending .summary-value {
color: #bd0010;
}
.summary-item.completed {
background: #edf7f0;
border-color: #dcfce7;
}
.summary-item.completed .summary-value {
color: #168243;
}
.summary-item.reference {
background: #eff6ff;
border-color: #dbeafe;
}
.summary-item.reference .summary-value {
color: #1d4ed8;
}
.summary-value {
display: block;
color: #1d4ed8;
mobile-uni/src/pages/user/profile/index.vue
+105 -43
View File
@@ -1,7 +1,10 @@
<template>
<view class="page profile-page">
<text class="page-title">我</text>
<text class="page-subtitle">{{ phone || '未登录' }}</text>
<view class="profile-head">
<text class="profile-eyebrow">银城物业 · 员工成长</text>
<text class="page-title">我的成长</text>
<text class="page-subtitle">{{ phone || '登录后查看训练记录和能力画像' }}</text>
</view>
<view v-if="message" class="status-message">{{ message }}</view>
@@ -34,7 +37,7 @@
</view>
</view>
<view v-if="profile" class="panel">
<view v-if="profile" class="panel profile-summary">
<text class="panel-title">成长摘要</text>
<view class="score-row">
<view class="score-main">
@@ -111,7 +114,7 @@
</view>
</view>
<view v-if="loggedIn" class="panel">
<view v-if="loggedIn" class="panel history-panel">
<view class="history-head">
<text class="panel-title">最近练过</text>
<button class="ghost-button refresh-button" :disabled="loading" @click="loadData">刷新</button>
@@ -236,8 +239,46 @@ onShow(() => {
<style scoped>
.profile-page {
padding-bottom: 92px;
background: #f4f7fb;
padding: 0 18px 96px;
background: #f7f7f8;
}
.profile-head {
position: relative;
margin: 0 -18px;
padding: 34px 28px 26px;
background: #f0f1ee;
}
.profile-head::after {
position: absolute;
right: 28px;
bottom: 24px;
width: 56px;
height: 3px;
background: #e70014;
content: '';
}
.profile-eyebrow {
display: block;
margin-bottom: 12px;
color: #168243;
font-size: 13px;
font-weight: 800;
line-height: 1;
}
.profile-head .page-title {
color: #25282d;
font-size: 32px;
line-height: 1.16;
}
.profile-head .page-subtitle {
margin-top: 10px;
color: #696c72;
font-size: 14px;
}
.account-card,
@@ -248,15 +289,22 @@ onShow(() => {
gap: 12px;
}
.account-card {
margin-top: 22px;
border-left: 4px solid #e70014;
box-shadow: 0 8px 22px rgba(37, 40, 45, 0.08);
}
.account-phone {
display: block;
margin-top: 8px;
color: #64748b;
color: #676a70;
font-size: 14px;
}
.account-action {
min-width: 84px;
padding: 0 12px;
}
.position-current {
@@ -269,7 +317,7 @@ onShow(() => {
.position-title {
display: block;
margin-top: 8px;
color: #2563eb;
color: #168243;
font-size: 16px;
font-weight: 900;
}
@@ -286,19 +334,24 @@ onShow(() => {
min-height: 38px;
align-items: center;
justify-content: center;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #f8fafc;
color: #475569;
border: 1px solid #dedfe2;
border-radius: 6px;
background: #fbfbfb;
color: #5e6167;
font-size: 13px;
font-weight: 900;
white-space: nowrap;
}
.position-chip.active {
border-color: #2563eb;
background: #eff6ff;
color: #1d4ed8;
border-color: #168243;
background: #edf7f0;
color: #168243;
}
.profile-summary {
border-color: #d9e7de;
border-top: 3px solid #168243;
}
.score-row {
@@ -314,12 +367,12 @@ onShow(() => {
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 18px;
background: #eff6ff;
border-radius: 8px;
background: #edf7f0;
}
.score-value {
color: #1d4ed8;
color: #168243;
font-size: 42px;
font-weight: 900;
line-height: 1;
@@ -327,7 +380,7 @@ onShow(() => {
.score-label {
margin-top: 8px;
color: #475569;
color: #5f6268;
font-size: 13px;
}
@@ -343,24 +396,26 @@ onShow(() => {
flex-direction: column;
justify-content: center;
padding: 8px 10px;
border-radius: 14px;
background: #f8fafc;
border-radius: 6px;
background: #f4f4f5;
}
.metric text:first-child {
color: #0f172a;
color: #303338;
font-size: 18px;
font-weight: 900;
}
.metric text:last-child {
margin-top: 4px;
color: #64748b;
color: #73767c;
font-size: 12px;
}
.evidence-panel {
background: #fff7ed;
border-color: #eadfbd;
border-left: 4px solid #d98200;
background: #fffdf7;
}
.evidence-grid {
@@ -376,19 +431,19 @@ onShow(() => {
flex-direction: column;
justify-content: center;
padding: 8px 10px;
border-radius: 14px;
border-radius: 6px;
background: #ffffff;
}
.evidence-metric text:first-child {
color: #9a3412;
color: #a86100;
font-size: 18px;
font-weight: 900;
}
.evidence-metric text:last-child {
margin-top: 4px;
color: #64748b;
color: #73767c;
font-size: 12px;
}
@@ -399,8 +454,8 @@ onShow(() => {
.evidence-item {
display: block;
padding: 9px 0;
border-top: 1px solid #fed7aa;
color: #7c2d12;
border-top: 1px solid #efe1bb;
color: #775000;
font-size: 13px;
line-height: 1.45;
}
@@ -416,7 +471,7 @@ onShow(() => {
.section-label {
display: block;
color: #334155;
color: #34373c;
font-size: 14px;
font-weight: 900;
}
@@ -426,7 +481,7 @@ onShow(() => {
grid-template-columns: 1fr 96px;
gap: 12px;
padding: 12px 0;
border-top: 1px solid #e2e8f0;
border-top: 1px solid #e7e7e9;
}
.growth-row:first-of-type {
@@ -439,14 +494,14 @@ onShow(() => {
}
.growth-title {
color: #0f172a;
color: #34373c;
font-size: 14px;
font-weight: 900;
}
.growth-desc {
margin-top: 5px;
color: #64748b;
color: #73767c;
font-size: 12px;
line-height: 1.4;
}
@@ -458,7 +513,7 @@ onShow(() => {
align-items: flex-end;
justify-content: center;
gap: 6px;
color: #1d4ed8;
color: #168243;
font-size: 12px;
font-weight: 900;
}
@@ -467,14 +522,14 @@ onShow(() => {
width: 88px;
height: 6px;
overflow: hidden;
border-radius: 999px;
background: #dbeafe;
border-radius: 4px;
background: #dce8e0;
}
.growth-fill {
height: 100%;
border-radius: inherit;
background: #2563eb;
background: #168243;
}
.dimension-row,
@@ -484,13 +539,13 @@ onShow(() => {
justify-content: space-between;
gap: 12px;
padding: 12px 0;
border-top: 1px solid #e2e8f0;
border-top: 1px solid #e7e7e9;
}
.dimension-title,
.history-title {
display: block;
color: #0f172a;
color: #34373c;
font-weight: 900;
}
@@ -498,13 +553,13 @@ onShow(() => {
.history-desc {
display: block;
margin-top: 5px;
color: #64748b;
color: #73767c;
font-size: 13px;
line-height: 1.4;
}
.dimension-score {
color: #1d4ed8;
color: #168243;
font-size: 20px;
font-weight: 900;
}
@@ -512,9 +567,16 @@ onShow(() => {
.refresh-button {
min-height: 36px;
padding: 0 12px;
border: 1px solid #dedee1;
background: #ffffff;
color: #66696f;
font-size: 13px;
}
.history-panel {
border-color: #e1e2e5;
}
.history-score {
display: flex;
min-width: 52px;
@@ -523,14 +585,14 @@ onShow(() => {
}
.history-score text:first-child {
color: #1d4ed8;
color: #168243;
font-size: 20px;
font-weight: 900;
}
.history-score text:last-child {
margin-top: 4px;
color: #64748b;
color: #73767c;
font-size: 12px;
}
</style>