feat(aihr): align figma pages for release
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="page profile-page">
|
||||
<view class="page profile-page employee-page-shell">
|
||||
<view class="profile-head">
|
||||
<text class="profile-eyebrow">银城物业 · 员工成长</text>
|
||||
<text class="page-title">我的成长</text>
|
||||
@@ -120,7 +120,12 @@
|
||||
<button class="ghost-button refresh-button" :disabled="loading" @click="loadData">刷新</button>
|
||||
</view>
|
||||
<view v-if="history.length" class="history-list">
|
||||
<view v-for="item in history" :key="item.id || item.sessionId || item.time" class="history-row">
|
||||
<view
|
||||
v-for="item in history"
|
||||
:key="item.id || item.sessionId || item.time"
|
||||
class="history-row history-row-clickable"
|
||||
@click="openHistory(item.id)"
|
||||
>
|
||||
<view>
|
||||
<text class="history-title">{{ item.scene }}</text>
|
||||
<text class="history-desc">{{ item.time }} · {{ item.summary }}</text>
|
||||
@@ -231,6 +236,14 @@ const changePosition = (position: UserPosition) => {
|
||||
uni.showToast({ title: '岗位已更新', icon: 'none' });
|
||||
};
|
||||
|
||||
const openHistory = (id?: number) => {
|
||||
if (!id) {
|
||||
message.value = '这条训练记录暂不支持查看详情';
|
||||
return;
|
||||
}
|
||||
uni.navigateTo({ url: `/pages/user/history/index?id=${id}` });
|
||||
};
|
||||
|
||||
onShow(() => {
|
||||
resetPageScroll();
|
||||
void loadData();
|
||||
@@ -239,45 +252,52 @@ onShow(() => {
|
||||
|
||||
<style scoped>
|
||||
.profile-page {
|
||||
padding: 0 18px 96px;
|
||||
background: #f7f7f8;
|
||||
padding: 0 16px 108px;
|
||||
}
|
||||
|
||||
.profile-page .panel {
|
||||
border-radius: var(--employee-card-radius);
|
||||
box-shadow: var(--employee-card-shadow);
|
||||
}
|
||||
|
||||
.profile-head {
|
||||
position: relative;
|
||||
margin: 0 -18px;
|
||||
padding: 34px 28px 26px;
|
||||
background: #f0f1ee;
|
||||
margin: 0 -16px;
|
||||
padding: 30px 20px 26px;
|
||||
border-bottom: 1px solid rgba(47, 74, 117, 0.08);
|
||||
background: linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%);
|
||||
}
|
||||
|
||||
.profile-head::after {
|
||||
position: absolute;
|
||||
right: 28px;
|
||||
bottom: 24px;
|
||||
width: 56px;
|
||||
height: 3px;
|
||||
background: #e70014;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
width: 42px;
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
background: var(--employee-primary);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.profile-eyebrow {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
color: #168243;
|
||||
margin-bottom: 10px;
|
||||
color: var(--employee-primary);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.profile-head .page-title {
|
||||
color: #25282d;
|
||||
font-size: 32px;
|
||||
line-height: 1.16;
|
||||
color: var(--employee-text);
|
||||
font-size: 28px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.profile-head .page-subtitle {
|
||||
margin-top: 10px;
|
||||
color: #696c72;
|
||||
color: var(--employee-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@@ -290,15 +310,14 @@ onShow(() => {
|
||||
}
|
||||
|
||||
.account-card {
|
||||
margin-top: 22px;
|
||||
border-left: 4px solid #e70014;
|
||||
box-shadow: 0 8px 22px rgba(37, 40, 45, 0.08);
|
||||
margin-top: 16px;
|
||||
border-left: 4px solid var(--employee-primary);
|
||||
}
|
||||
|
||||
.account-phone {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: #676a70;
|
||||
color: var(--employee-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@@ -317,7 +336,7 @@ onShow(() => {
|
||||
.position-title {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: #168243;
|
||||
color: var(--employee-primary);
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
}
|
||||
@@ -334,24 +353,24 @@ onShow(() => {
|
||||
min-height: 38px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #dedfe2;
|
||||
border-radius: 6px;
|
||||
background: #fbfbfb;
|
||||
color: #5e6167;
|
||||
border: 1px solid #dce5f2;
|
||||
border-radius: var(--employee-chip-radius);
|
||||
background: #f8fbff;
|
||||
color: #526176;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.position-chip.active {
|
||||
border-color: #168243;
|
||||
background: #edf7f0;
|
||||
color: #168243;
|
||||
border-color: var(--employee-primary);
|
||||
background: var(--employee-primary-soft);
|
||||
color: var(--employee-primary);
|
||||
}
|
||||
|
||||
.profile-summary {
|
||||
border-color: #d9e7de;
|
||||
border-top: 3px solid #168243;
|
||||
border-color: var(--employee-line);
|
||||
border-top: 3px solid var(--employee-primary);
|
||||
}
|
||||
|
||||
.score-row {
|
||||
@@ -367,12 +386,12 @@ onShow(() => {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
background: #edf7f0;
|
||||
border-radius: 18px;
|
||||
background: var(--employee-primary-soft);
|
||||
}
|
||||
|
||||
.score-value {
|
||||
color: #168243;
|
||||
color: var(--employee-primary);
|
||||
font-size: 42px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
@@ -380,7 +399,7 @@ onShow(() => {
|
||||
|
||||
.score-label {
|
||||
margin-top: 8px;
|
||||
color: #5f6268;
|
||||
color: var(--employee-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -396,26 +415,27 @@ onShow(() => {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 8px 10px;
|
||||
border-radius: 6px;
|
||||
background: #f4f4f5;
|
||||
border: 1px solid var(--employee-line);
|
||||
border-radius: 14px;
|
||||
background: #fbfdff;
|
||||
}
|
||||
|
||||
.metric text:first-child {
|
||||
color: #303338;
|
||||
color: var(--employee-text);
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.metric text:last-child {
|
||||
margin-top: 4px;
|
||||
color: #73767c;
|
||||
color: var(--employee-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.evidence-panel {
|
||||
border-color: #eadfbd;
|
||||
border-left: 4px solid #d98200;
|
||||
background: #fffdf7;
|
||||
border-color: #f4e4c4;
|
||||
border-left: 4px solid var(--employee-warning);
|
||||
background: #fffaf2;
|
||||
}
|
||||
|
||||
.evidence-grid {
|
||||
@@ -431,19 +451,20 @@ onShow(() => {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 8px 10px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #f4e7ce;
|
||||
border-radius: 14px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.evidence-metric text:first-child {
|
||||
color: #a86100;
|
||||
color: #b56b14;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.evidence-metric text:last-child {
|
||||
margin-top: 4px;
|
||||
color: #73767c;
|
||||
color: var(--employee-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -494,14 +515,14 @@ onShow(() => {
|
||||
}
|
||||
|
||||
.growth-title {
|
||||
color: #34373c;
|
||||
color: var(--employee-text);
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.growth-desc {
|
||||
margin-top: 5px;
|
||||
color: #73767c;
|
||||
color: var(--employee-muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@@ -513,7 +534,7 @@ onShow(() => {
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
color: #168243;
|
||||
color: var(--employee-primary);
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
@@ -523,13 +544,13 @@ onShow(() => {
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
background: #dce8e0;
|
||||
background: #dce8fb;
|
||||
}
|
||||
|
||||
.growth-fill {
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: #168243;
|
||||
background: var(--employee-primary);
|
||||
}
|
||||
|
||||
.dimension-row,
|
||||
@@ -545,7 +566,7 @@ onShow(() => {
|
||||
.dimension-title,
|
||||
.history-title {
|
||||
display: block;
|
||||
color: #34373c;
|
||||
color: var(--employee-text);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@@ -553,13 +574,13 @@ onShow(() => {
|
||||
.history-desc {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
color: #73767c;
|
||||
color: var(--employee-muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.dimension-score {
|
||||
color: #168243;
|
||||
color: var(--employee-primary);
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
}
|
||||
@@ -567,14 +588,25 @@ onShow(() => {
|
||||
.refresh-button {
|
||||
min-height: 36px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #dedee1;
|
||||
border: 1px solid #dce5f2;
|
||||
border-radius: var(--employee-chip-radius);
|
||||
background: #ffffff;
|
||||
color: #66696f;
|
||||
color: #526176;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.history-panel {
|
||||
border-color: #e1e2e5;
|
||||
border-color: var(--employee-line);
|
||||
}
|
||||
|
||||
.history-row-clickable {
|
||||
min-height: 68px;
|
||||
padding: 14px 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.history-row-clickable:active {
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.history-score {
|
||||
@@ -585,14 +617,14 @@ onShow(() => {
|
||||
}
|
||||
|
||||
.history-score text:first-child {
|
||||
color: #168243;
|
||||
color: var(--employee-primary);
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.history-score text:last-child {
|
||||
margin-top: 4px;
|
||||
color: #73767c;
|
||||
color: var(--employee-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user