style(mobile-uni): 优化员工端首页与登录页UI交互，更名为银城帮道
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
<view class="brand-lockup">
|
||||
<image class="login-logo" src="/static/brand-logo.png" mode="aspectFit" />
|
||||
<view class="brand-copy">
|
||||
<text class="brand-name">银城物业</text>
|
||||
<text class="brand-name">银城帮道</text>
|
||||
<text class="brand-divider">·</text>
|
||||
<text class="login-eyebrow">数字师傅</text>
|
||||
</view>
|
||||
@@ -12,8 +12,8 @@
|
||||
|
||||
<view class="mentor-block">
|
||||
<image class="mentor-image" src="/static/mentor-female-bust.png" mode="aspectFit" />
|
||||
<view class="mentor-bubble">
|
||||
<text class="mentor-bubble-text">手机号登录，一分钟上手</text>
|
||||
<view class="mentor-bubble spring-pop">
|
||||
<text class="mentor-bubble-text">手机号登录，立刻上手</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -63,15 +63,27 @@
|
||||
:styles="inputStyles"
|
||||
/>
|
||||
</view>
|
||||
<button class="secondary-button code-button" :disabled="sending" @click="sendCode">
|
||||
{{ sending ? '发送中' : '获取验证码' }}
|
||||
<button
|
||||
class="secondary-button code-button"
|
||||
:disabled="sending || countdown > 0"
|
||||
@click="sendCode"
|
||||
>
|
||||
{{ sending ? '发送中' : countdown > 0 ? `${countdown}s 后重发` : '获取验证码' }}
|
||||
</button>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
|
||||
<view class="dev-hint-pill" @click="fillDevCredentials">
|
||||
<uni-icons type="info-filled" size="14" color="#d97706" />
|
||||
<text class="dev-hint-text">测试验证码: 123456</text>
|
||||
<text class="dev-fill-btn">快捷填入</text>
|
||||
</view>
|
||||
|
||||
<button class="primary-button login-submit" :disabled="loggingIn" @click="login">
|
||||
{{ loggingIn ? '登录中' : '登录' }}
|
||||
{{ loggingIn ? '登录中…' : '登录' }}
|
||||
</button>
|
||||
|
||||
<uni-notice-bar
|
||||
v-if="message"
|
||||
:text="message"
|
||||
@@ -81,14 +93,19 @@
|
||||
/>
|
||||
</view>
|
||||
|
||||
<text class="agreement">登录即同意《服务协议》与《隐私政策》</text>
|
||||
<view class="agreement-row" @click="agreed = !agreed">
|
||||
<view class="checkbox-box" :class="{ checked: agreed }">
|
||||
<uni-icons v-if="agreed" type="checkmarkempty" size="12" color="#ffffff" />
|
||||
</view>
|
||||
<text class="agreement-text">已阅读并同意《服务协议》与《隐私政策》</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue';
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
import { reactive, ref, onUnmounted } from 'vue';
|
||||
import { onHide, onShow, onUnload } from '@dcloudio/uni-app';
|
||||
import type { LoginResult } from '@/types/api';
|
||||
import { apiRequest } from '@/services/api';
|
||||
import { consumeLoginRedirect, getAuth, isLoggedIn, phoneKey, saveAuth } from '@/services/auth';
|
||||
@@ -117,13 +134,42 @@ const formRules = {
|
||||
};
|
||||
const sending = ref(false);
|
||||
const loggingIn = ref(false);
|
||||
const countdown = ref(0);
|
||||
const agreed = ref(true);
|
||||
const message = ref('');
|
||||
let timer: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
const inputStyles = {
|
||||
color: '#25282d',
|
||||
borderColor: 'transparent',
|
||||
backgroundColor: 'transparent'
|
||||
};
|
||||
|
||||
const stopTimer = () => {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
}
|
||||
};
|
||||
|
||||
const startCountdown = () => {
|
||||
stopTimer();
|
||||
countdown.value = 60;
|
||||
timer = setInterval(() => {
|
||||
if (countdown.value > 1) {
|
||||
countdown.value -= 1;
|
||||
} else {
|
||||
countdown.value = 0;
|
||||
stopTimer();
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const fillDevCredentials = () => {
|
||||
formData.smsCode = '123456';
|
||||
message.value = '已自动填入测试验证码 123456';
|
||||
};
|
||||
|
||||
const normalizeDigits = (value: string | number, maxLength: number) =>
|
||||
String(value || '')
|
||||
.replace(/\D/g, '')
|
||||
@@ -143,7 +189,7 @@ const goAfterLogin = async () => {
|
||||
};
|
||||
|
||||
const sendCode = async () => {
|
||||
if (sending.value) return;
|
||||
if (sending.value || countdown.value > 0) return;
|
||||
try {
|
||||
await loginForm.value?.validateField(['phone']);
|
||||
} catch {
|
||||
@@ -159,6 +205,7 @@ const sendCode = async () => {
|
||||
auth: false
|
||||
});
|
||||
message.value = '验证码已发送';
|
||||
startCountdown();
|
||||
} catch (error) {
|
||||
message.value = error instanceof Error ? error.message : '验证码发送失败';
|
||||
} finally {
|
||||
@@ -168,6 +215,10 @@ const sendCode = async () => {
|
||||
|
||||
const login = async () => {
|
||||
if (loggingIn.value) return;
|
||||
if (!agreed.value) {
|
||||
message.value = '请先勾选同意《服务协议》与《隐私政策》';
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await loginForm.value?.validate();
|
||||
} catch {
|
||||
@@ -205,6 +256,18 @@ onShow(() => {
|
||||
void goAfterLogin();
|
||||
}
|
||||
});
|
||||
|
||||
onHide(() => {
|
||||
stopTimer();
|
||||
});
|
||||
|
||||
onUnload(() => {
|
||||
stopTimer();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
stopTimer();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -299,6 +362,7 @@ onShow(() => {
|
||||
width: 128px;
|
||||
height: 130px;
|
||||
flex: none;
|
||||
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.08));
|
||||
}
|
||||
|
||||
.mentor-bubble {
|
||||
@@ -306,14 +370,23 @@ onShow(() => {
|
||||
margin-top: 20px;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid rgba(225, 227, 232, 0.9);
|
||||
border-radius: 14px;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 6px 16px rgba(29, 31, 35, 0.08);
|
||||
box-shadow: 0 6px 18px rgba(29, 31, 35, 0.08);
|
||||
}
|
||||
|
||||
.mentor-bubble.spring-pop {
|
||||
animation: springPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
@keyframes springPop {
|
||||
0% { transform: scale(0.85); opacity: 0; }
|
||||
100% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
.mentor-bubble::before {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
top: 20px;
|
||||
left: -6px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
@@ -326,9 +399,9 @@ onShow(() => {
|
||||
|
||||
.mentor-bubble-text {
|
||||
color: #25282d;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
@@ -338,18 +411,18 @@ onShow(() => {
|
||||
gap: 18px;
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: 28px 20px 28px;
|
||||
padding: 24px 20px 24px;
|
||||
border: 1px solid rgba(225, 227, 232, 0.95);
|
||||
border-top: 4px solid #e60012;
|
||||
border-radius: 18px;
|
||||
border-radius: 20px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
box-shadow: 0 12px 28px rgba(29, 31, 35, 0.12), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
|
||||
box-shadow: 0 12px 32px rgba(29, 31, 35, 0.08), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
|
||||
}
|
||||
|
||||
.login-card::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 18px;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 26%);
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
@@ -365,40 +438,40 @@ onShow(() => {
|
||||
}
|
||||
|
||||
.login-form :deep(.uni-forms-item) {
|
||||
margin-bottom: 22px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.login-form :deep(.uni-forms-item:last-child) {
|
||||
margin-bottom: 7px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.login-form :deep(.uni-forms-item__label) {
|
||||
padding-bottom: 4px;
|
||||
padding-bottom: 6px;
|
||||
color: #20242b;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.login-form :deep(.uni-forms-item__error) {
|
||||
margin-top: 9px;
|
||||
font-size: 13px;
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.field-shell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 56px;
|
||||
min-height: 52px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #d8dce3;
|
||||
border-radius: 8px;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.field-shell:focus-within {
|
||||
border-color: #e60012;
|
||||
box-shadow: 0 0 0 3px rgba(230, 0, 18, 0.08);
|
||||
box-shadow: 0 0 0 3px rgba(230, 0, 18, 0.12);
|
||||
}
|
||||
|
||||
.field-shell :deep(.uni-easyinput) {
|
||||
@@ -425,75 +498,114 @@ onShow(() => {
|
||||
|
||||
.field-shell :deep(.uni-easyinput__placeholder-class) {
|
||||
color: #b5b8c1;
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.field-icon {
|
||||
margin-right: 12px;
|
||||
margin-right: 10px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.code-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 84px;
|
||||
align-items: stretch;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.code-shell,
|
||||
.code-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.code-shell {
|
||||
padding-right: 10px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding-right: 8px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.code-shell .field-icon {
|
||||
margin-right: 9px;
|
||||
}
|
||||
|
||||
.code-shell :deep(.uni-easyinput__content-input),
|
||||
.code-shell :deep(.uni-easyinput__placeholder-class) {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.code-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 56px;
|
||||
padding: 0 4px;
|
||||
width: 116px;
|
||||
min-width: 116px;
|
||||
height: 52px;
|
||||
flex: 0 0 116px;
|
||||
padding: 0 6px;
|
||||
border: 1px solid #e60012;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #fffdfd 100%);
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
color: #e60012;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 6px 14px rgba(242, 11, 26, 0.06);
|
||||
box-shadow: 0 4px 12px rgba(230, 0, 18, 0.08);
|
||||
transition: transform 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
|
||||
.code-button:active {
|
||||
transform: scale(0.96);
|
||||
background: #fff8f8;
|
||||
}
|
||||
|
||||
.code-button:disabled {
|
||||
border-color: #e5e7eb;
|
||||
background: #f9fafb;
|
||||
color: #9ca3af;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dev-hint-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
gap: 6px;
|
||||
padding: 6px 14px;
|
||||
border-radius: 20px;
|
||||
background: #fffdf5;
|
||||
border: 1px dashed #f59e0b;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
|
||||
.dev-hint-pill:active {
|
||||
transform: scale(0.96);
|
||||
background: #fff8e6;
|
||||
}
|
||||
|
||||
.dev-hint-text {
|
||||
color: #b45309;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dev-fill-btn {
|
||||
color: var(--employee-primary, #e60012);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.login-submit {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 60px;
|
||||
min-height: 54px;
|
||||
margin-top: 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
padding: 0 20px;
|
||||
border-radius: 14px;
|
||||
background: #e60012;
|
||||
background: linear-gradient(135deg, #ff4d4f 0%, #e60012 100%);
|
||||
color: #ffffff;
|
||||
font-size: 22px;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 2px;
|
||||
box-shadow: 0 8px 18px rgba(230, 0, 18, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.24);
|
||||
box-shadow: 0 8px 20px rgba(230, 0, 18, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.24);
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.login-submit:active {
|
||||
transform: scale(0.97);
|
||||
box-shadow: 0 4px 10px rgba(230, 0, 18, 0.2);
|
||||
}
|
||||
|
||||
.login-card :deep(.uni-noticebar) {
|
||||
@@ -501,50 +613,51 @@ onShow(() => {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.agreement {
|
||||
display: block;
|
||||
.agreement-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
max-width: 720px;
|
||||
margin: 16px auto 0;
|
||||
color: #a4a8b0;
|
||||
margin: 18px auto 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 1.5px solid #bdc1c9;
|
||||
border-radius: 5px;
|
||||
background: #ffffff;
|
||||
transition: all 0.15s ease;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.checkbox-box.checked {
|
||||
border-color: var(--employee-primary, #e60012);
|
||||
background: var(--employee-primary, #e60012);
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
color: #8c9098;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.login-shell {
|
||||
padding-right: 32px;
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
.brand-name,
|
||||
.brand-divider,
|
||||
.login-eyebrow {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.mentor-image {
|
||||
width: 112px;
|
||||
height: 114px;
|
||||
}
|
||||
|
||||
.code-row {
|
||||
grid-template-columns: minmax(0, 1fr) 80px;
|
||||
gap: 10px;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.code-button {
|
||||
width: 100%;
|
||||
min-height: 56px;
|
||||
width: 104px;
|
||||
min-width: 104px;
|
||||
flex-basis: 104px;
|
||||
}
|
||||
}
|
||||
|
||||
html[data-aihr-font-size='extra-large'] .code-row {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
html[data-aihr-font-size='extra-large'] .code-button {
|
||||
min-height: 52px;
|
||||
font-size: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<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>
|
||||
<text class="brand-name">银城帮道</text>
|
||||
</view>
|
||||
|
||||
<view class="position-head">
|
||||
|
||||
@@ -3,12 +3,16 @@
|
||||
<view class="brand-bar">
|
||||
<view class="brand-left">
|
||||
<image class="brand-logo" src="/static/brand-logo.png" mode="aspectFit" />
|
||||
<text class="brand-name">银城员工端</text>
|
||||
</view>
|
||||
<view class="brand-bell" @click="openBuilding('消息通知')">
|
||||
<uni-icons class="bell-icon" type="notification" size="28" color="#16191f" />
|
||||
<view class="bell-dot" />
|
||||
<text class="brand-name">银城帮道</text>
|
||||
<view class="brand-status-badge">
|
||||
<view class="status-dot-live"></view>
|
||||
<text class="status-text">AI 在线</text>
|
||||
</view>
|
||||
</view>
|
||||
<button class="brand-bell" :aria-label="broadcastBellLabel" @click="openBroadcast">
|
||||
<uni-icons class="bell-icon" type="notification" size="26" color="#16191f" />
|
||||
<view v-if="hasUnreadBroadcast" class="bell-dot pulse" />
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view v-if="message" class="status-message">{{ message }}</view>
|
||||
@@ -17,12 +21,14 @@
|
||||
<image class="hero-bg" src="/static/community-hero-bg.webp" mode="aspectFill" />
|
||||
<view class="hero-scrim" />
|
||||
<view class="hero-copy">
|
||||
<text class="hero-role">{{ positionProfile.value }}</text>
|
||||
<view class="hero-role-pill">
|
||||
<text class="hero-role-text">{{ positionProfile.value }}</text>
|
||||
</view>
|
||||
<text class="hero-title">{{ positionProfile.heroTitle }}</text>
|
||||
<text class="hero-sub">有问题，随时问老师傅</text>
|
||||
</view>
|
||||
<view class="hero-stage">
|
||||
<view class="mentor-bubble">
|
||||
<view class="mentor-bubble spring-enter">
|
||||
<text>{{ mentorBubbleText }}</text>
|
||||
</view>
|
||||
<image class="mentor-image" src="/static/mentor-female.png" mode="aspectFit" />
|
||||
@@ -30,20 +36,24 @@
|
||||
</view>
|
||||
|
||||
<view class="voice-card employee-card">
|
||||
<button
|
||||
class="voice-mic"
|
||||
:class="{ recording, cancelling }"
|
||||
aria-label="按住说话"
|
||||
@touchstart.prevent="startHold"
|
||||
@touchmove.prevent="moveHold"
|
||||
@touchend.prevent="endHold"
|
||||
@touchcancel.prevent="cancelHold"
|
||||
@mousedown.prevent="startHold"
|
||||
@mouseup.prevent="endHold"
|
||||
@mouseleave="cancelHold"
|
||||
>
|
||||
<uni-icons type="mic" size="40" color="#ffffff" />
|
||||
</button>
|
||||
<view class="mic-ripple-container">
|
||||
<view class="mic-ripple ripple-1" :class="{ active: recording }"></view>
|
||||
<view class="mic-ripple ripple-2" :class="{ active: recording }"></view>
|
||||
<button
|
||||
class="voice-mic"
|
||||
:class="{ recording, cancelling }"
|
||||
aria-label="按住说话"
|
||||
@touchstart.prevent="startHold"
|
||||
@touchmove.prevent="moveHold"
|
||||
@touchend.prevent="endHold"
|
||||
@touchcancel.prevent="cancelHold"
|
||||
@mousedown.prevent="startHold"
|
||||
@mouseup.prevent="endHold"
|
||||
@mouseleave="cancelHold"
|
||||
>
|
||||
<uni-icons type="mic" size="40" color="#ffffff" />
|
||||
</button>
|
||||
</view>
|
||||
<text class="voice-title">{{ voiceTitle }}</text>
|
||||
<text class="voice-sub">{{ voiceSub }}</text>
|
||||
</view>
|
||||
@@ -57,12 +67,14 @@
|
||||
:class="`chip-${index}`"
|
||||
@click="ask(item)"
|
||||
>
|
||||
<uni-icons
|
||||
class="chip-icon"
|
||||
:type="chipIcon(index)"
|
||||
size="22"
|
||||
:color="chipColor(index)"
|
||||
/>
|
||||
<view class="chip-icon-box" :style="{ background: chipBg(index) }">
|
||||
<uni-icons
|
||||
class="chip-icon"
|
||||
:type="chipIcon(index)"
|
||||
size="16"
|
||||
:color="chipIconColor(index)"
|
||||
/>
|
||||
</view>
|
||||
<text class="chip-text">{{ item }}</text>
|
||||
<text class="chip-arrow">›</text>
|
||||
</button>
|
||||
@@ -91,18 +103,22 @@
|
||||
|
||||
<view class="schedule-list">
|
||||
<view class="schedule-row" v-if="primaryScheduleTitle">
|
||||
<text class="schedule-num">1</text>
|
||||
<view class="schedule-tag" :class="primaryAssignmentTagClass">
|
||||
<text class="schedule-tag-text">{{ primaryAssignmentTagText }}</text>
|
||||
</view>
|
||||
<view class="schedule-copy">
|
||||
<text class="schedule-title">{{ primaryDisplayTitle }}</text>
|
||||
<text class="schedule-title">{{ primaryScheduleTitle }}</text>
|
||||
<text class="schedule-desc">{{ primaryScheduleDesc }}</text>
|
||||
</view>
|
||||
<button class="schedule-action" @click="openPrimarySchedule">
|
||||
<button class="schedule-action primary-gradient-btn" @click="openPrimarySchedule">
|
||||
{{ primaryAssignment?.source === 'daily' ? '去作答' : '开始练习' }}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view class="schedule-row" v-if="home?.review">
|
||||
<text class="schedule-num">2</text>
|
||||
<view class="schedule-tag tag-review">
|
||||
<text class="schedule-tag-text">SOP复习</text>
|
||||
</view>
|
||||
<view class="schedule-copy">
|
||||
<text class="schedule-title">{{ home?.review?.title }}</text>
|
||||
<text class="schedule-desc">{{ home?.review?.desc }}</text>
|
||||
@@ -120,29 +136,37 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="tools-grid">
|
||||
<button class="tool-cell" @click="openLearning">
|
||||
<view class="tool-icon">学</view>
|
||||
<button class="tool-cell tool-learn" @click="openLearning">
|
||||
<view class="tool-icon-badge badge-learn">
|
||||
<uni-icons type="staff-filled" size="22" color="#6366f1" />
|
||||
</view>
|
||||
<view class="tool-copy">
|
||||
<text class="tool-name">学习中心</text>
|
||||
<text class="tool-sub">课程·三题</text>
|
||||
</view>
|
||||
</button>
|
||||
<button class="tool-cell" @click="openWorkResults">
|
||||
<view class="tool-icon">果</view>
|
||||
<button class="tool-cell tool-results" @click="openWorkResults">
|
||||
<view class="tool-icon-badge badge-results">
|
||||
<uni-icons type="medal-filled" size="22" color="#10b981" />
|
||||
</view>
|
||||
<view class="tool-copy">
|
||||
<text class="tool-name">今日成果</text>
|
||||
<text class="tool-sub">记录·待跟进</text>
|
||||
</view>
|
||||
</button>
|
||||
<button class="tool-cell" @click="openReport">
|
||||
<view class="tool-icon">报</view>
|
||||
<button class="tool-cell tool-report" @click="openReport">
|
||||
<view class="tool-icon-badge badge-report">
|
||||
<uni-icons type="paperplane-filled" size="22" color="#f59e0b" />
|
||||
</view>
|
||||
<view class="tool-copy">
|
||||
<text class="tool-name">成果投稿</text>
|
||||
<text class="tool-sub">案例·SOP·知识</text>
|
||||
</view>
|
||||
</button>
|
||||
<button class="tool-cell" @click="openQuestions">
|
||||
<view class="tool-icon">榜</view>
|
||||
<button class="tool-cell tool-questions" @click="openQuestions">
|
||||
<view class="tool-icon-badge badge-questions">
|
||||
<uni-icons type="chatboxes-filled" size="22" color="#e60012" />
|
||||
</view>
|
||||
<view class="tool-copy">
|
||||
<text class="tool-name">问题榜</text>
|
||||
<text class="tool-sub">大家帮你答</text>
|
||||
@@ -152,7 +176,7 @@
|
||||
</view>
|
||||
|
||||
<button class="tip-card" @click="ask(primaryTipQuestion)">
|
||||
<uni-icons class="tip-mark" type="help" size="22" color="#d98200" />
|
||||
<uni-icons class="tip-mark" type="help-filled" size="20" color="#d98200" />
|
||||
<text class="tip-label">小贴士</text>
|
||||
<text class="tip-divider">|</text>
|
||||
<text class="tip-text">{{ tipBody }}</text>
|
||||
@@ -173,12 +197,20 @@ import { chooseSpeechAudio, transcribeSpeechBlob, transcribeSpeechFile } from '@
|
||||
import { stripInternalCodes } from '@/services/text';
|
||||
import { ensureEmployeePosition } from '@/services/position';
|
||||
import { createPageRequestScope, currentAccountKey } from '@/services/request-scope';
|
||||
import { getBroadcastUnreadCount } from '@/services/broadcast';
|
||||
|
||||
const home = ref<RoleHome | null>(null);
|
||||
const assignments = ref<PracticeAssignment[]>([]);
|
||||
const message = ref('');
|
||||
const loggedIn = ref(false);
|
||||
const positionProfile = ref(getSelectedPositionProfile());
|
||||
const unreadBroadcastCount = ref<number | null>(null);
|
||||
const hasUnreadBroadcast = computed(() => typeof unreadBroadcastCount.value === 'number' && unreadBroadcastCount.value > 0);
|
||||
const broadcastBellLabel = computed(() => unreadBroadcastCount.value === null
|
||||
? '银城大喇叭，未读状态暂不可用'
|
||||
: unreadBroadcastCount.value > 0
|
||||
? `银城大喇叭，${unreadBroadcastCount.value} 条未读消息`
|
||||
: '银城大喇叭，无未读消息');
|
||||
const quickQuestions = computed(() => positionProfile.value.quickQuestions);
|
||||
const primaryTipQuestion = computed(() => quickQuestions.value[0] || '岗位SOP');
|
||||
const pendingSopQueryKey = 'aihr_sop_pending_query';
|
||||
@@ -186,9 +218,27 @@ const pendingAssignmentKey = 'aihr_pending_assignment_id';
|
||||
const requests = createPageRequestScope();
|
||||
let visibleAccountKey = '';
|
||||
|
||||
const chipIcons = ['chatbubble', 'help', 'wallet'];
|
||||
const chipIcon = (index: number) => chipIcons[index] || 'chatbubble';
|
||||
const chipColor = (_index: number) => '#e60012';
|
||||
const chipIcons = ['chatbubble-filled', 'help-filled', 'wallet-filled'];
|
||||
const chipIcon = (index: number) => chipIcons[index] || 'chatbubble-filled';
|
||||
const chipBgs = ['rgba(230, 0, 18, 0.08)', 'rgba(45, 128, 255, 0.08)', 'rgba(245, 158, 11, 0.08)'];
|
||||
const chipBg = (index: number) => chipBgs[index % chipBgs.length];
|
||||
const chipColors = ['#e60012', '#2d80ff', '#f59e0b'];
|
||||
const chipIconColor = (index: number) => chipColors[index % chipColors.length];
|
||||
|
||||
const primaryAssignmentTagText = computed(() => {
|
||||
const source = primaryAssignment.value?.source;
|
||||
if (source === 'daily') return '每日三题';
|
||||
if (source === 'retry') return '错题再练';
|
||||
if (source === 'camp') return '训练营';
|
||||
return '专项训练';
|
||||
});
|
||||
|
||||
const primaryAssignmentTagClass = computed(() => {
|
||||
const source = primaryAssignment.value?.source;
|
||||
if (source === 'daily') return 'tag-daily';
|
||||
if (source === 'retry') return 'tag-retry';
|
||||
return 'tag-practice';
|
||||
});
|
||||
|
||||
|
||||
const primaryAssignment = computed(() =>
|
||||
@@ -272,6 +322,7 @@ const loadHome = async () => {
|
||||
assignments.value = [];
|
||||
if (!loggedIn.value) {
|
||||
home.value = null;
|
||||
unreadBroadcastCount.value = null;
|
||||
return;
|
||||
}
|
||||
if (!(await ensureEmployeePosition('/pages/user/today/index')) || !requests.isCurrent(request)) {
|
||||
@@ -302,6 +353,21 @@ const loadHome = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const loadBroadcastUnreadCount = async () => {
|
||||
const request = requests.begin('broadcast-unread');
|
||||
unreadBroadcastCount.value = null;
|
||||
if (!isLoggedIn()) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const count = await getBroadcastUnreadCount();
|
||||
if (requests.isCurrent(request)) unreadBroadcastCount.value = count;
|
||||
} catch {
|
||||
// The red dot is shown only for a confirmed unread count.
|
||||
if (requests.isCurrent(request)) unreadBroadcastCount.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
const recording = ref(false);
|
||||
const cancelling = ref(false);
|
||||
const transcribing = ref(false);
|
||||
@@ -467,8 +533,14 @@ const openQuestions = () => {
|
||||
uni.navigateTo({ url: '/pages/user/questions/index' });
|
||||
};
|
||||
|
||||
const openBuilding = (title: string) => {
|
||||
uni.navigateTo({ url: `/pages/common/building/index?title=${encodeURIComponent(title)}` });
|
||||
const openBroadcast = () => {
|
||||
const path = '/pages/user/broadcast/index';
|
||||
if (!isLoggedIn()) {
|
||||
rememberLoginRedirect(path);
|
||||
uni.navigateTo({ url: '/pages/auth/login/index' });
|
||||
return;
|
||||
}
|
||||
uni.navigateTo({ url: path });
|
||||
};
|
||||
|
||||
const goPractice = () => {
|
||||
@@ -482,11 +554,13 @@ onShow(() => {
|
||||
home.value = null;
|
||||
assignments.value = [];
|
||||
message.value = '';
|
||||
unreadBroadcastCount.value = null;
|
||||
}
|
||||
visibleAccountKey = nextAccountKey;
|
||||
requests.activate();
|
||||
resetPageScroll();
|
||||
void loadHome();
|
||||
void loadBroadcastUnreadCount();
|
||||
});
|
||||
|
||||
onHide(() => {
|
||||
@@ -534,15 +608,53 @@ onUnload(() => {
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.brand-status-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 12px;
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.status-dot-live {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #10b981;
|
||||
box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
|
||||
animation: pulseDot 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
@keyframes pulseDot {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(1.2); }
|
||||
}
|
||||
|
||||
.brand-bell {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.brand-bell::after {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.bell-icon {
|
||||
line-height: 1;
|
||||
}
|
||||
@@ -558,6 +670,15 @@ onUnload(() => {
|
||||
background: #e70014;
|
||||
}
|
||||
|
||||
.bell-dot.pulse {
|
||||
animation: bellPulse 1.8s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes bellPulse {
|
||||
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(230, 0, 18, 0.4); }
|
||||
50% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(230, 0, 18, 0); }
|
||||
}
|
||||
|
||||
.status-message {
|
||||
margin: 4px 0 8px;
|
||||
padding: 10px 12px;
|
||||
@@ -586,9 +707,9 @@ onUnload(() => {
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0.92) 0%,
|
||||
rgba(255, 255, 255, 0.62) 34%,
|
||||
rgba(255, 255, 255, 0) 64%
|
||||
rgba(255, 255, 255, 0.94) 0%,
|
||||
rgba(255, 255, 255, 0.68) 36%,
|
||||
rgba(255, 255, 255, 0) 66%
|
||||
);
|
||||
}
|
||||
|
||||
@@ -599,22 +720,37 @@ onUnload(() => {
|
||||
width: 54%;
|
||||
max-width: 54%;
|
||||
flex-direction: column;
|
||||
padding: 26px 0 0 24px;
|
||||
padding: 24px 0 0 24px;
|
||||
}
|
||||
|
||||
.hero-role-pill {
|
||||
display: inline-flex;
|
||||
align-self: flex-start;
|
||||
padding: 2px 8px;
|
||||
border-radius: 8px;
|
||||
background: rgba(230, 0, 18, 0.08);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.hero-role-text {
|
||||
color: var(--employee-primary);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hero-role,
|
||||
.hero-title {
|
||||
color: #111111;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 0;
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
line-height: 1.35;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
margin-top: 2px;
|
||||
margin-top: 4px;
|
||||
color: #4b5058;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@@ -646,7 +782,16 @@ onUnload(() => {
|
||||
padding: 10px 12px;
|
||||
border-radius: 18px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 8px 20px rgba(20, 24, 32, 0.1);
|
||||
box-shadow: 0 8px 24px rgba(20, 24, 32, 0.12);
|
||||
}
|
||||
|
||||
.mentor-bubble.spring-enter {
|
||||
animation: springPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
@keyframes springPop {
|
||||
0% { transform: scale(0.85); opacity: 0; }
|
||||
100% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
.mentor-bubble::after {
|
||||
@@ -663,8 +808,8 @@ onUnload(() => {
|
||||
|
||||
.mentor-bubble text {
|
||||
color: #33363c;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
@@ -677,9 +822,44 @@ onUnload(() => {
|
||||
gap: 8px;
|
||||
margin: -48px 4px 0;
|
||||
padding: 22px 16px 16px;
|
||||
border-radius: 22px;
|
||||
border-radius: 24px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 14px 34px rgba(24, 28, 36, 0.1);
|
||||
box-shadow: 0 14px 34px rgba(24, 28, 36, 0.08);
|
||||
}
|
||||
|
||||
.mic-ripple-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
.mic-ripple {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--employee-primary);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mic-ripple.ripple-1.active {
|
||||
animation: rippleWave 1.4s infinite cubic-bezier(0, 0.2, 0.8, 1);
|
||||
}
|
||||
|
||||
.mic-ripple.ripple-2.active {
|
||||
animation: rippleWave 1.4s infinite cubic-bezier(0, 0.2, 0.8, 1);
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
@keyframes rippleWave {
|
||||
0% { transform: scale(1); opacity: 0.8; }
|
||||
100% { transform: scale(1.6); opacity: 0; }
|
||||
}
|
||||
|
||||
.voice-mic {
|
||||
@@ -692,9 +872,10 @@ onUnload(() => {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--employee-primary);
|
||||
background: linear-gradient(135deg, #ff4d4f 0%, #e60012 100%);
|
||||
box-shadow: 0 10px 24px rgba(230, 0, 18, 0.28);
|
||||
line-height: 1;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.voice-mic::after {
|
||||
@@ -703,8 +884,8 @@ onUnload(() => {
|
||||
|
||||
.voice-mic.recording {
|
||||
background: var(--brand-pressed);
|
||||
box-shadow: 0 6px 16px rgba(184, 0, 15, 0.3);
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 6px 16px rgba(184, 0, 15, 0.35);
|
||||
transform: scale(0.94);
|
||||
}
|
||||
|
||||
.voice-mic.cancelling {
|
||||
@@ -740,30 +921,34 @@ onUnload(() => {
|
||||
.chip {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
min-height: 44px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
padding: 0 6px;
|
||||
border: 1px solid #ececee;
|
||||
border-radius: 12px;
|
||||
gap: 6px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #f0f0f2;
|
||||
border-radius: 14px;
|
||||
background: #ffffff;
|
||||
color: var(--employee-primary);
|
||||
color: #1a1a1a;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
|
||||
transition: transform 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
|
||||
.chip-1 {
|
||||
color: var(--employee-primary);
|
||||
.chip:active {
|
||||
transform: scale(0.96);
|
||||
background: #fdfdfd;
|
||||
}
|
||||
|
||||
.chip-2 {
|
||||
color: var(--employee-primary);
|
||||
}
|
||||
|
||||
.chip-icon {
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
.chip-icon-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 8px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.chip-text {
|
||||
@@ -774,18 +959,18 @@ onUnload(() => {
|
||||
}
|
||||
|
||||
.chip-arrow {
|
||||
color: #f0717c;
|
||||
color: #c0c3c8;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.section-card {
|
||||
margin-top: 10px;
|
||||
padding: 16px;
|
||||
margin-top: 12px;
|
||||
padding: 18px;
|
||||
border: 0;
|
||||
border-radius: 22px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 8px 24px rgba(24, 28, 36, 0.05);
|
||||
box-shadow: 0 8px 24px rgba(24, 28, 36, 0.04);
|
||||
}
|
||||
|
||||
.login-section {
|
||||
@@ -835,7 +1020,7 @@ onUnload(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@@ -843,13 +1028,13 @@ onUnload(() => {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #1a1a1a;
|
||||
font-size: 20px;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.section-bar {
|
||||
width: 4px;
|
||||
height: 22px;
|
||||
height: 20px;
|
||||
border-radius: 2px;
|
||||
background: var(--employee-primary);
|
||||
}
|
||||
@@ -879,26 +1064,46 @@ onUnload(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 10px;
|
||||
padding: 14px 12px;
|
||||
border-radius: 16px;
|
||||
background: #fafafa;
|
||||
background: #f9f9fb;
|
||||
}
|
||||
|
||||
.schedule-num {
|
||||
.schedule-tag {
|
||||
display: flex;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: var(--employee-primary);
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 10px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.schedule-tag-text {
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.tag-daily {
|
||||
background: rgba(45, 128, 255, 0.1);
|
||||
color: #2d80ff;
|
||||
}
|
||||
|
||||
.tag-retry {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.tag-practice {
|
||||
background: rgba(230, 0, 18, 0.1);
|
||||
color: var(--employee-primary);
|
||||
}
|
||||
|
||||
.tag-review {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.schedule-copy {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
@@ -909,36 +1114,46 @@ onUnload(() => {
|
||||
|
||||
.schedule-title {
|
||||
color: #1a1a1a;
|
||||
font-size: 17px;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
line-height: 1.25;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.schedule-desc {
|
||||
color: #8a8d93;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.schedule-action {
|
||||
display: flex;
|
||||
width: auto;
|
||||
min-width: 88px;
|
||||
min-height: 52px;
|
||||
min-width: 84px;
|
||||
min-height: 44px;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
padding: 0 12px;
|
||||
border-radius: 12px;
|
||||
background: var(--employee-primary);
|
||||
box-shadow: 0 8px 16px rgba(230, 0, 18, 0.18);
|
||||
color: #ffffff;
|
||||
font-size: 17px;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.primary-gradient-btn {
|
||||
background: linear-gradient(135deg, #ff4d4f 0%, #e60012 100%) !important;
|
||||
box-shadow: 0 6px 16px rgba(230, 0, 18, 0.25) !important;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.primary-gradient-btn:active {
|
||||
transform: scale(0.96);
|
||||
box-shadow: 0 3px 8px rgba(230, 0, 18, 0.2) !important;
|
||||
}
|
||||
|
||||
.review-action {
|
||||
border: 1.5px solid var(--employee-primary);
|
||||
background: #ffffff;
|
||||
@@ -949,39 +1164,57 @@ onUnload(() => {
|
||||
.tools-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.tool-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
padding: 14px;
|
||||
border: 0;
|
||||
border-radius: 16px;
|
||||
background: #fafafa;
|
||||
border-radius: 18px;
|
||||
background: #f9f9fb;
|
||||
box-shadow: none;
|
||||
text-align: left;
|
||||
line-height: 1.3;
|
||||
transition: transform 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
|
||||
.tool-cell:active {
|
||||
transform: scale(0.97);
|
||||
background: #f2f2f5;
|
||||
}
|
||||
|
||||
.tool-cell::after {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.tool-icon {
|
||||
.tool-icon-badge {
|
||||
display: flex;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
background: var(--employee-primary-soft);
|
||||
color: var(--employee-primary);
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
border-radius: 14px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.badge-learn {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
.badge-results {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.badge-report {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
}
|
||||
|
||||
.badge-questions {
|
||||
background: rgba(230, 0, 18, 0.1);
|
||||
}
|
||||
|
||||
.tool-copy {
|
||||
@@ -1005,17 +1238,41 @@ onUnload(() => {
|
||||
}
|
||||
|
||||
.tip-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
margin-top: 18px;
|
||||
min-height: 58px;
|
||||
min-height: 54px;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 14px 16px;
|
||||
border: 0;
|
||||
border-radius: 14px;
|
||||
background: #fff6e8;
|
||||
box-shadow: none;
|
||||
border-radius: 16px;
|
||||
background: #fff8ef;
|
||||
box-shadow: 0 4px 14px rgba(217, 130, 0, 0.06);
|
||||
text-align: left;
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.tip-card:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.tip-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
|
||||
transform: skewX(-20deg);
|
||||
animation: shimmerLight 4s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes shimmerLight {
|
||||
0%, 75% { left: -100%; }
|
||||
100% { left: 200%; }
|
||||
}
|
||||
|
||||
.tip-mark {
|
||||
|
||||
Reference in New Issue
Block a user