fix(mobile): align employee home visual theme
This commit is contained in:
@@ -143,7 +143,7 @@
|
||||
},
|
||||
"tabBar": {
|
||||
"color": "#7b8494",
|
||||
"selectedColor": "#e60012",
|
||||
"selectedColor": "#2f6bff",
|
||||
"backgroundColor": "#ffffff",
|
||||
"borderStyle": "white",
|
||||
"height": "66px",
|
||||
|
||||
@@ -63,7 +63,7 @@
|
||||
class="chip-icon"
|
||||
:type="chipIcon(index)"
|
||||
size="22"
|
||||
color="#e70014"
|
||||
:color="chipColor(index)"
|
||||
/>
|
||||
<text class="chip-text">{{ item }}</text>
|
||||
<text class="chip-arrow">›</text>
|
||||
@@ -95,7 +95,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="#e70014" />
|
||||
<uni-icons class="schedule-icon" type="compose" size="26" color="#2f6bff" />
|
||||
</view>
|
||||
<view class="schedule-copy">
|
||||
<text class="schedule-title">{{ primaryScheduleTitle }}</text>
|
||||
@@ -187,6 +187,8 @@ 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 mapTiles = computed(() => [
|
||||
{
|
||||
@@ -371,7 +373,10 @@ onShow(() => {
|
||||
.today-page {
|
||||
min-height: 100vh;
|
||||
padding: 0 24px 112px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 62%, #f6f6f6 100%);
|
||||
--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%);
|
||||
}
|
||||
|
||||
.brand-bar {
|
||||
@@ -533,7 +538,7 @@ onShow(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 82px;
|
||||
gap: 2px;
|
||||
gap: 10px;
|
||||
transform: translateY(7px);
|
||||
}
|
||||
|
||||
@@ -557,14 +562,22 @@ onShow(() => {
|
||||
|
||||
.voice-primary {
|
||||
flex: 1.7;
|
||||
gap: 20px;
|
||||
padding: 0 8px 0 14px;
|
||||
min-height: 74px;
|
||||
gap: 14px;
|
||||
padding: 0 12px;
|
||||
border-radius: 16px;
|
||||
background: #2f6bff;
|
||||
box-shadow: 0 10px 20px rgba(47, 107, 255, 0.22);
|
||||
}
|
||||
|
||||
.voice-secondary {
|
||||
flex: 1;
|
||||
gap: 10px;
|
||||
padding: 0 2px 0 16px;
|
||||
min-height: 74px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #e4eaf4;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.voice-divider {
|
||||
@@ -576,18 +589,18 @@ onShow(() => {
|
||||
|
||||
.voice-emblem {
|
||||
display: flex;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: #e70014;
|
||||
box-shadow: 0 0 0 8px #fff1f2, 0 8px 16px rgba(231, 0, 20, 0.22);
|
||||
background: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.voice-mark {
|
||||
color: #ffffff;
|
||||
color: #2f6bff;
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
@@ -608,6 +621,10 @@ onShow(() => {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.voice-primary .voice-title {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.secondary-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
@@ -620,6 +637,10 @@ onShow(() => {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.voice-primary .voice-desc {
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
}
|
||||
|
||||
.secondary-copy {
|
||||
max-width: 108px;
|
||||
}
|
||||
@@ -670,11 +691,19 @@ onShow(() => {
|
||||
border: 1px solid #ececee;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
color: #e70014;
|
||||
color: #2f6bff;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.chip-1 {
|
||||
color: #ff9b3d;
|
||||
}
|
||||
|
||||
.chip-2 {
|
||||
color: #34b368;
|
||||
}
|
||||
|
||||
.chip-icon {
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
@@ -738,11 +767,11 @@ onShow(() => {
|
||||
min-height: 42px;
|
||||
flex: 0 0 88px;
|
||||
border-radius: 12px;
|
||||
background: #e70014;
|
||||
background: var(--employee-primary);
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
box-shadow: 0 8px 16px rgba(231, 0, 20, 0.18);
|
||||
box-shadow: 0 8px 16px rgba(47, 107, 255, 0.2);
|
||||
}
|
||||
|
||||
.section-head {
|
||||
@@ -765,7 +794,7 @@ onShow(() => {
|
||||
width: 4px;
|
||||
height: 22px;
|
||||
border-radius: 2px;
|
||||
background: #e70014;
|
||||
background: #2f6bff;
|
||||
}
|
||||
|
||||
.section-link {
|
||||
@@ -793,7 +822,9 @@ onShow(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 4px 0;
|
||||
padding: 14px 12px;
|
||||
border-radius: 18px;
|
||||
background: #f8fbff;
|
||||
}
|
||||
|
||||
.schedule-icon-wrap {
|
||||
@@ -804,7 +835,7 @@ onShow(() => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: #fff1f1;
|
||||
background: #eaf1ff;
|
||||
}
|
||||
|
||||
.review-icon {
|
||||
@@ -857,8 +888,8 @@ onShow(() => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
background: #e70014;
|
||||
box-shadow: 0 8px 16px rgba(231, 0, 20, 0.18);
|
||||
background: #2f6bff;
|
||||
box-shadow: 0 8px 16px rgba(47, 107, 255, 0.22);
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
@@ -881,13 +912,27 @@ onShow(() => {
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 16px 14px;
|
||||
border: 1px solid #f0f1f3;
|
||||
border: 0;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.map-tile.ask,
|
||||
.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);
|
||||
}
|
||||
|
||||
.map-tile.ask { background: #2f6bff; }
|
||||
.map-tile.practice { background: #2ab673; }
|
||||
.map-tile.learn { background: #ff961f; }
|
||||
.map-tile.report { background: #ff6357; }
|
||||
|
||||
.map-symbol {
|
||||
display: flex;
|
||||
width: 56px;
|
||||
@@ -895,30 +940,30 @@ onShow(() => {
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
border-radius: 16px;
|
||||
color: #ffffff;
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.map-symbol.ask {
|
||||
background: #e70014;
|
||||
box-shadow: 0 6px 12px rgba(231, 0, 20, 0.2);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.map-symbol.practice {
|
||||
background: #1f9a4a;
|
||||
box-shadow: 0 6px 12px rgba(31, 154, 74, 0.2);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.map-symbol.learn {
|
||||
background: #e8900c;
|
||||
box-shadow: 0 6px 12px rgba(232, 144, 12, 0.2);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.map-symbol.report {
|
||||
background: #4b5563;
|
||||
box-shadow: 0 6px 12px rgba(75, 85, 99, 0.18);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.map-copy {
|
||||
@@ -930,21 +975,21 @@ onShow(() => {
|
||||
}
|
||||
|
||||
.map-title {
|
||||
color: #1a1a1a;
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.map-desc {
|
||||
color: #9a9da3;
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
font-size: 13px;
|
||||
line-height: 1.35;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.map-arrow {
|
||||
color: #c5c7cb;
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
@@ -46,7 +46,7 @@ test('manifest 明确声明为 uni-app Vue3 CLI 工程', async () => {
|
||||
test('员工端 tabBar 继续保留四个固定入口', async () => {
|
||||
const source = await pageSource('../src/pages.json');
|
||||
|
||||
assert.match(source, /"selectedColor"\s*:\s*"#e60012"/);
|
||||
assert.match(source, /"selectedColor"\s*:\s*"#2f6bff"/);
|
||||
assert.match(source, /pages\/user\/today\/index/);
|
||||
assert.match(source, /pages\/user\/practice\/index/);
|
||||
assert.match(source, /pages\/user\/sop\/index/);
|
||||
|
||||
Reference in New Issue
Block a user