feat(mobile): finish employee app page polish
This commit is contained in:
@@ -1,15 +1,23 @@
|
||||
<template>
|
||||
<view class="page position-page">
|
||||
<view class="brand-bar">
|
||||
<image class="brand-logo" src="/static/brand-logo.png" mode="aspectFit" />
|
||||
<text class="brand-name">银城员工端</text>
|
||||
</view>
|
||||
|
||||
<view class="position-head">
|
||||
<text class="page-title">确认岗位</text>
|
||||
<text class="page-subtitle">{{ phone }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="message" class="status-message">{{ message }}</view>
|
||||
<view v-if="message" class="status-message">
|
||||
<uni-icons type="info" size="22" color="#d98200" />
|
||||
<text>{{ message }}</text>
|
||||
</view>
|
||||
|
||||
<view class="panel">
|
||||
<text class="panel-title">选择当前岗位</text>
|
||||
<view class="position-list">
|
||||
<view class="position-grid">
|
||||
<button
|
||||
v-for="item in positionCards"
|
||||
:key="item.value"
|
||||
@@ -22,10 +30,14 @@
|
||||
<text class="position-name">{{ item.value }}</text>
|
||||
<text class="position-title">{{ item.heroTitle }}</text>
|
||||
</view>
|
||||
<text class="position-mark">{{ item.value === selectedPosition ? '已选' : '选择' }}</text>
|
||||
<view class="position-radio" :class="{ checked: item.value === selectedPosition }" />
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button class="confirm-button" :disabled="!selectedPosition || saving" @click="confirmPosition">
|
||||
{{ saving ? '保存中…' : '确认岗位' }}
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -57,8 +69,13 @@ const finish = () => {
|
||||
|
||||
const selectPosition = (position: UserPosition) => {
|
||||
if (saving.value) return;
|
||||
selectedPosition.value = position;
|
||||
};
|
||||
|
||||
const confirmPosition = () => {
|
||||
if (!selectedPosition.value || saving.value) return;
|
||||
saving.value = true;
|
||||
const saved = saveSelectedPosition(position);
|
||||
const saved = saveSelectedPosition(selectedPosition.value);
|
||||
selectedPosition.value = saved;
|
||||
finish();
|
||||
};
|
||||
@@ -95,39 +112,105 @@ onShow(() => {
|
||||
|
||||
<style scoped>
|
||||
.position-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 24px 24px 32px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 68%, #f6f6f6 100%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
color: #1a1a1a;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.position-head {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.position-list {
|
||||
.page-title {
|
||||
display: block;
|
||||
color: #18202b;
|
||||
font-size: 34px;
|
||||
font-weight: 900;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
color: #7d8794;
|
||||
font-size: 18px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.status-message {
|
||||
display: flex;
|
||||
margin-top: 16px;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin-bottom: 22px;
|
||||
padding: 16px 14px;
|
||||
border: 1px solid #f1c889;
|
||||
border-left: 4px solid #d98200;
|
||||
border-radius: 12px;
|
||||
background: #fff8ec;
|
||||
color: #8a5a12;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 22px 18px 24px;
|
||||
border: 1px solid #eceff2;
|
||||
border-radius: 18px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 10px 26px rgba(24, 28, 36, 0.06);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
display: block;
|
||||
color: #18202b;
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.position-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.position-card {
|
||||
display: flex;
|
||||
min-height: 72px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
min-height: 112px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid #e2e8f0;
|
||||
padding: 16px 14px;
|
||||
border: 1px solid #e0e4e9;
|
||||
border-radius: 16px;
|
||||
background: #f8fafc;
|
||||
background: #ffffff;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.position-card.active {
|
||||
border-color: #2563eb;
|
||||
background: #eff6ff;
|
||||
border-color: #e70014;
|
||||
background: #fffafa;
|
||||
}
|
||||
|
||||
.position-copy {
|
||||
@@ -137,21 +220,45 @@ onShow(() => {
|
||||
}
|
||||
|
||||
.position-name {
|
||||
color: #0f172a;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
color: #18202b;
|
||||
font-size: 19px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.position-title {
|
||||
margin-top: 6px;
|
||||
color: #64748b;
|
||||
color: #7d8794;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.position-mark {
|
||||
color: #2563eb;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
white-space: nowrap;
|
||||
.position-radio {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
flex: none;
|
||||
border: 2px solid #b8bec7;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.position-radio.checked {
|
||||
border-color: #e70014;
|
||||
box-shadow: inset 0 0 0 5px #ffffff;
|
||||
background: #e70014;
|
||||
}
|
||||
|
||||
.confirm-button {
|
||||
width: 100%;
|
||||
min-height: 56px;
|
||||
margin-top: 24px;
|
||||
border-radius: 14px;
|
||||
background: #e70014;
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
box-shadow: 0 10px 20px rgba(231, 0, 20, 0.18);
|
||||
}
|
||||
|
||||
.confirm-button[disabled] {
|
||||
opacity: 0.45;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user