feat(mobile): align employee practice screens for release
This commit is contained in:
@@ -18,6 +18,7 @@
|
||||
<text class="hero-role">{{ positionProfile.value }}</text>
|
||||
<text class="hero-title">{{ positionProfile.heroTitle }}</text>
|
||||
<text class="hero-sub">有问题，随时问老师傅</text>
|
||||
<text class="hero-tip">{{ mentorBubbleText }}</text>
|
||||
</view>
|
||||
<view class="mentor-stage">
|
||||
<view class="mentor-bubble">
|
||||
@@ -95,7 +96,7 @@
|
||||
<view class="schedule-list">
|
||||
<view class="schedule-row" v-if="primaryScheduleTitle">
|
||||
<view class="schedule-icon-wrap">
|
||||
<uni-icons class="schedule-icon" type="compose" size="26" color="#2f6bff" />
|
||||
<uni-icons class="schedule-icon" type="compose" size="26" color="#e60012" />
|
||||
</view>
|
||||
<view class="schedule-copy">
|
||||
<text v-if="primaryAssignmentSourceLabel" class="schedule-source" :class="primaryAssignmentSourceClass">
|
||||
@@ -190,8 +191,7 @@ const pendingAssignmentKey = 'aihr_pending_assignment_id';
|
||||
|
||||
const chipIcons = ['chatbubble', 'help', 'wallet'];
|
||||
const chipIcon = (index: number) => chipIcons[index] || 'chatbubble';
|
||||
const chipColors = ['#2f6bff', '#ff9b3d', '#34b368'];
|
||||
const chipColor = (index: number) => chipColors[index] || '#2f6bff';
|
||||
const chipColor = (_index: number) => '#e60012';
|
||||
|
||||
const mapTiles = computed(() => [
|
||||
{
|
||||
@@ -390,18 +390,15 @@ onShow(() => {
|
||||
<style scoped>
|
||||
.today-page {
|
||||
min-height: 100vh;
|
||||
padding: 0 24px 112px;
|
||||
--employee-primary: #2f6bff;
|
||||
--employee-primary-soft: #eaf1ff;
|
||||
--employee-card-shadow: 0 16px 40px rgba(47, 107, 255, 0.1);
|
||||
background: linear-gradient(180deg, #f4f8ff 0%, #f7faff 58%, #f3f5f7 100%);
|
||||
padding: 0 16px 104px;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.brand-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: calc(env(safe-area-inset-top) + 20px) 2px 10px;
|
||||
padding: calc(env(safe-area-inset-top) + 12px) 2px 8px;
|
||||
}
|
||||
|
||||
.brand-left {
|
||||
@@ -411,8 +408,8 @@ onShow(() => {
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
@@ -458,11 +455,13 @@ onShow(() => {
|
||||
.mentor-hero {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 232px;
|
||||
min-height: 196px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-top: 2px;
|
||||
padding: 6px 0 0;
|
||||
padding: 0;
|
||||
border-radius: 20px;
|
||||
background: #ffffff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -470,50 +469,58 @@ onShow(() => {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
max-width: 45%;
|
||||
width: 52%;
|
||||
max-width: 52%;
|
||||
flex-direction: column;
|
||||
padding-top: 11px;
|
||||
padding: 22px 0 0 20px;
|
||||
}
|
||||
|
||||
.hero-role,
|
||||
.hero-title {
|
||||
color: #111111;
|
||||
font-size: 42px;
|
||||
font-weight: 900;
|
||||
line-height: 1.12;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
margin-top: 18px;
|
||||
margin-top: 2px;
|
||||
color: #8a8d93;
|
||||
font-size: 17px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.hero-tip {
|
||||
margin-top: 7px;
|
||||
color: var(--employee-primary);
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mentor-stage {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 240px;
|
||||
height: 227px;
|
||||
width: 178px;
|
||||
height: 196px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.mentor-image {
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
bottom: 0;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
transform: translateY(50px);
|
||||
right: 4px;
|
||||
bottom: 4px;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
filter: drop-shadow(0 10px 16px rgba(20, 24, 32, 0.12));
|
||||
}
|
||||
|
||||
.mentor-bubble {
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
right: 130px;
|
||||
top: 10px;
|
||||
right: 84px;
|
||||
z-index: 3;
|
||||
width: 112px;
|
||||
padding: 10px 12px;
|
||||
@@ -544,8 +551,8 @@ onShow(() => {
|
||||
.ask-card {
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
margin-top: 0;
|
||||
padding: 16px 14px 25px;
|
||||
margin-top: 10px;
|
||||
padding: 12px 14px 10px;
|
||||
border: 0;
|
||||
border-radius: 20px;
|
||||
background: #ffffff;
|
||||
@@ -557,7 +564,6 @@ onShow(() => {
|
||||
align-items: center;
|
||||
min-height: 82px;
|
||||
gap: 10px;
|
||||
transform: translateY(7px);
|
||||
}
|
||||
|
||||
.voice-primary,
|
||||
@@ -579,46 +585,37 @@ onShow(() => {
|
||||
}
|
||||
|
||||
.voice-primary {
|
||||
flex: 1.7;
|
||||
min-height: 74px;
|
||||
gap: 14px;
|
||||
padding: 0 12px;
|
||||
border-radius: 16px;
|
||||
background: #2f6bff;
|
||||
box-shadow: 0 10px 20px rgba(47, 107, 255, 0.22);
|
||||
flex: 1.45;
|
||||
min-height: 70px;
|
||||
gap: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.voice-secondary {
|
||||
flex: 1;
|
||||
gap: 10px;
|
||||
min-height: 74px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #e4eaf4;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
min-height: 70px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.voice-divider {
|
||||
width: 1px;
|
||||
height: 42px;
|
||||
flex: none;
|
||||
background: #ececee;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.voice-emblem {
|
||||
display: flex;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
background: var(--employee-primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.voice-mark {
|
||||
color: #2f6bff;
|
||||
color: #ffffff;
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
@@ -640,7 +637,7 @@ onShow(() => {
|
||||
}
|
||||
|
||||
.voice-primary .voice-title {
|
||||
color: #ffffff;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.secondary-title {
|
||||
@@ -656,7 +653,7 @@ onShow(() => {
|
||||
}
|
||||
|
||||
.voice-primary .voice-desc {
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
color: #9a9da3;
|
||||
}
|
||||
|
||||
.secondary-copy {
|
||||
@@ -671,12 +668,12 @@ onShow(() => {
|
||||
|
||||
.keyboard-mark {
|
||||
display: flex;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
border-radius: 16px;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
@@ -686,8 +683,8 @@ onShow(() => {
|
||||
}
|
||||
|
||||
.mentor-chips {
|
||||
margin-top: 14px;
|
||||
padding-top: 12px;
|
||||
margin-top: 4px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #f0f1f3;
|
||||
}
|
||||
|
||||
@@ -709,17 +706,17 @@ onShow(() => {
|
||||
border: 1px solid #ececee;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
color: #2f6bff;
|
||||
color: var(--employee-primary);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.chip-1 {
|
||||
color: #ff9b3d;
|
||||
color: var(--employee-primary);
|
||||
}
|
||||
|
||||
.chip-2 {
|
||||
color: #34b368;
|
||||
color: var(--employee-primary);
|
||||
}
|
||||
|
||||
.chip-icon {
|
||||
@@ -741,8 +738,8 @@ onShow(() => {
|
||||
}
|
||||
|
||||
.section-card {
|
||||
margin-top: 12px;
|
||||
padding: 22px 18px;
|
||||
margin-top: 10px;
|
||||
padding: 16px;
|
||||
border: 0;
|
||||
border-radius: 22px;
|
||||
background: #ffffff;
|
||||
@@ -789,7 +786,7 @@ onShow(() => {
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
box-shadow: 0 8px 16px rgba(47, 107, 255, 0.2);
|
||||
box-shadow: 0 8px 16px rgba(230, 0, 18, 0.18);
|
||||
}
|
||||
|
||||
.section-head {
|
||||
@@ -804,7 +801,7 @@ onShow(() => {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #1a1a1a;
|
||||
font-size: 22px;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@@ -812,7 +809,7 @@ onShow(() => {
|
||||
width: 4px;
|
||||
height: 22px;
|
||||
border-radius: 2px;
|
||||
background: #2f6bff;
|
||||
background: var(--employee-primary);
|
||||
}
|
||||
|
||||
.section-link {
|
||||
@@ -839,21 +836,21 @@ onShow(() => {
|
||||
.schedule-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 14px 12px;
|
||||
border-radius: 18px;
|
||||
background: #f8fbff;
|
||||
gap: 12px;
|
||||
padding: 12px 10px;
|
||||
border-radius: 16px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.schedule-icon-wrap {
|
||||
display: flex;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: #eaf1ff;
|
||||
background: var(--employee-primary-soft);
|
||||
}
|
||||
|
||||
.review-icon {
|
||||
@@ -874,7 +871,7 @@ onShow(() => {
|
||||
|
||||
.schedule-title {
|
||||
color: #1a1a1a;
|
||||
font-size: 19px;
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
line-height: 1.25;
|
||||
}
|
||||
@@ -933,8 +930,8 @@ onShow(() => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
background: #2f6bff;
|
||||
box-shadow: 0 8px 16px rgba(47, 107, 255, 0.22);
|
||||
background: var(--employee-primary);
|
||||
box-shadow: 0 8px 16px rgba(230, 0, 18, 0.18);
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
@@ -953,12 +950,12 @@ onShow(() => {
|
||||
|
||||
.map-tile {
|
||||
display: flex;
|
||||
min-height: 108px;
|
||||
min-height: 70px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 16px 14px;
|
||||
border: 0;
|
||||
border-radius: 16px;
|
||||
padding: 10px 8px;
|
||||
border: 1px solid #e2e4e8;
|
||||
border-radius: 14px;
|
||||
background: #ffffff;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
@@ -968,46 +965,51 @@ onShow(() => {
|
||||
.map-tile.practice,
|
||||
.map-tile.learn,
|
||||
.map-tile.report {
|
||||
color: #ffffff;
|
||||
border-color: transparent;
|
||||
box-shadow: 0 10px 18px rgba(24, 28, 36, 0.08);
|
||||
color: #25282d;
|
||||
background: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.map-tile.ask { background: #2f6bff; }
|
||||
.map-tile.practice { background: #2ab673; }
|
||||
.map-tile.learn { background: #ff961f; }
|
||||
.map-tile.report { background: #ff6357; }
|
||||
.map-tile.ask,
|
||||
.map-symbol.ask { --map-accent: #e60012; }
|
||||
.map-tile.practice,
|
||||
.map-symbol.practice { --map-accent: #16a052; }
|
||||
.map-tile.learn,
|
||||
.map-symbol.learn { --map-accent: #f28b00; }
|
||||
.map-tile.report,
|
||||
.map-symbol.report { --map-accent: #526075; }
|
||||
|
||||
.map-symbol {
|
||||
display: flex;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 16px;
|
||||
border-radius: 50%;
|
||||
background: var(--map-accent);
|
||||
color: #ffffff;
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.map-symbol.ask {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--map-accent);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.map-symbol.practice {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--map-accent);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.map-symbol.learn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--map-accent);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.map-symbol.report {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--map-accent);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -1020,21 +1022,21 @@ onShow(() => {
|
||||
}
|
||||
|
||||
.map-title {
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
color: #25282d;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.map-desc {
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
font-size: 13px;
|
||||
color: #8a8d93;
|
||||
font-size: 11px;
|
||||
line-height: 1.35;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.map-arrow {
|
||||
color: #ffffff;
|
||||
color: #9da1a8;
|
||||
font-size: 18px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user