petstore/petstore-frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

deploy: rebuild 202604191454

Browse Source
This commit is contained in:
MaDaLei 2026-04-19 14:54:38 +08:00
parent 2a4545bc00
commit ce10f1df60
29 changed files with 172 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/assets/global.css
View File

@ -15,6 +15,15 @@
--c-brand: #2db96d; --c-brand: #2db96d;
--c-brand-light: #eaf8f0; --c-brand-light: #eaf8f0;
--c-brand-dark: #1e9a55; --c-brand-dark: #1e9a55;
/** 渐变 / 描边用辅色（与主色同系，业务页请用 var 引用） */
--c-brand-soft: #86efac;
--c-brand-mid: #22c55e;
--c-brand-accent: #16a34a;
--c-brand-glow: #3dd68c;
--c-brand-bright: #32c877;
/** 浅底上的深绿标题字（Tailwind green-800 / green-700 系） */
--c-brand-heading: #166534;
--c-brand-heading-2: #15803d;
--c-orange: #f5913e; --c-orange: #f5913e;
--c-orange-light: #fef5ec; --c-orange-light: #fef5ec;
--c-red: #e5534b; --c-red: #e5534b;
@ -63,50 +72,50 @@ page {
display: block; display: block;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #666660; color: var(--c-text-2);
margin-bottom: 6px; margin-bottom: 6px;
} }
.app-form-input { .app-form-input {
background: #f5f5f2; background: var(--c-surface-alt);
border: 1.5px solid transparent; border: 1.5px solid transparent;
border-radius: 12px; border-radius: 12px;
padding: 11px 14px; padding: 11px 14px;
font-size: 15px; font-size: 15px;
color: #1a1a1a; color: var(--c-text);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
min-height: 44px; min-height: 44px;
} }
.app-form-input:focus { .app-form-input:focus {
border-color: #2db96d; border-color: var(--c-brand);
background: #ffffff; background: var(--c-surface);
} }
.app-form-picker { .app-form-picker {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.app-form-placeholder { color: #bbbbb5; } .app-form-placeholder { color: var(--c-text-4); }
.app-form-arrow { .app-form-arrow {
color: #bbbbb5; color: var(--c-text-4);
font-size: 18px; font-size: 18px;
font-weight: 300; font-weight: 300;
} }
.app-form-textarea { .app-form-textarea {
background: #f5f5f2; background: var(--c-surface-alt);
border: 1.5px solid transparent; border: 1.5px solid transparent;
border-radius: 12px; border-radius: 12px;
padding: 12px 14px; padding: 12px 14px;
font-size: 14px; font-size: 14px;
color: #1a1a1a; color: var(--c-text);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
min-height: 100px; min-height: 100px;
line-height: 1.6; line-height: 1.6;
} }
.app-form-textarea:focus { .app-form-textarea:focus {
border-color: #2db96d; border-color: var(--c-brand);
background: #fff; background: var(--c-surface);
} }
/* ---- 按钮 ---- /* ---- 按钮 ----
@ -127,8 +136,8 @@ page {
.van-button:active { opacity: 0.85; transform: scale(0.98); } .van-button:active { opacity: 0.85; transform: scale(0.98); }
.van-button--primary, .van-button--primary,
button.van-button--primary { button.van-button--primary {
background-color: #2db96d !important; background-color: var(--c-brand) !important;
background: #2db96d !important; background: var(--c-brand) !important;
border: none !important; border: none !important;
color: #ffffff !important; color: #ffffff !important;
box-shadow: none !important; box-shadow: none !important;
@ -147,8 +156,8 @@ button.van-button--primary {
} }
.van-button--small.van-button--primary, .van-button--small.van-button--primary,
button.van-button--small.van-button--primary { button.van-button--small.van-button--primary {
background-color: #2db96d !important; background-color: var(--c-brand) !important;
background: #2db96d !important; background: var(--c-brand) !important;
color: #ffffff !important; color: #ffffff !important;
border: none !important; border: none !important;
} }
@ -195,15 +204,15 @@ button.app-btn-sm {
} }
.app-btn-primary, .app-btn-primary,
button.app-btn-primary { button.app-btn-primary {
background: linear-gradient(135deg, #32c877 0%, #2db96d 100%) !important; background: linear-gradient(135deg, var(--c-brand-bright) 0%, var(--c-brand) 100%) !important;
color: #ffffff !important; color: #ffffff !important;
box-shadow: 0 4px 12px rgba(45, 185, 109, 0.28); box-shadow: 0 4px 12px rgba(45, 185, 109, 0.28);
} }
.app-btn-outline, .app-btn-outline,
button.app-btn-outline { button.app-btn-outline {
background: transparent !important; background: transparent !important;
color: #999993 !important; color: var(--c-text-3) !important;
border: 1.5px solid #ebebea !important; border: 1.5px solid var(--c-border) !important;
} }
.app-btn-danger-outline, .app-btn-danger-outline,
button.app-btn-danger-outline { button.app-btn-danger-outline {
@ -279,14 +288,14 @@ button.app-btn-code {
} }
.app-btn-code--neutral, .app-btn-code--neutral,
button.app-btn-code--neutral { button.app-btn-code--neutral {
background: #f5f5f2 !important; background: var(--c-surface-alt) !important;
color: #2db96d !important; color: var(--c-brand) !important;
border: none !important; border: none !important;
} }
.app-btn-code--brand, .app-btn-code--brand,
button.app-btn-code--brand { button.app-btn-code--brand {
background: #f0fcf5 !important; background: #f0fcf5 !important;
color: #2db96d !important; color: var(--c-brand) !important;
border: 1.5px solid #c0f0d8 !important; border: 1.5px solid #c0f0d8 !important;
} }
.app-btn-code--neutral[disabled], .app-btn-code--neutral[disabled],
@ -450,8 +459,8 @@ button.app-btn-code--neutral[disabled] {
} }
.nav-back:active { opacity: 0.7; } .nav-back:active { opacity: 0.7; }
.nav-gradient { .nav-gradient {
background-color: #2db96d !important; background-color: var(--c-brand) !important;
background: #2db96d !important; background: var(--c-brand) !important;
} }
/* ---- 空状态 ---- */ /* ---- 空状态 ---- */

4
src/components/AppPageState.vue
View File

@ -69,7 +69,7 @@ defineEmits(['retry'])
width: 36px; width: 36px;
height: 36px; height: 36px;
border: 3px solid #e8edf4; border: 3px solid #e8edf4;
border-top-color: #2db96d; border-top-color: var(--c-brand);
border-radius: 50%; border-radius: 50%;
animation: aps-spin 0.75s linear infinite; animation: aps-spin 0.75s linear infinite;
} }
@ -116,7 +116,7 @@ defineEmits(['retry'])
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
color: #fff; color: #fff;
background: linear-gradient(135deg, #3dd68c, #2db96d); background: linear-gradient(135deg, var(--c-brand-glow), var(--c-brand));
border-radius: 999px; border-radius: 999px;
border: none; border: none;
} }

6
src/components/TabBar.vue
View File

@ -8,7 +8,7 @@
@click="switchTab(tab.key)" @click="switchTab(tab.key)"
> >
<view class="tabbar-icon-wrap"> <view class="tabbar-icon-wrap">
<AppIcon :name="tab.icon" :size="20" :color="props.currentPage === tab.key ? '#2db96d' : '#999993'" /> <AppIcon :name="tab.icon" :size="20" :color="props.currentPage === tab.key ? 'var(--c-brand)' : 'var(--c-text-3)'" />
</view> </view>
<text class="tabbar-label">{{ tab.label }}</text> <text class="tabbar-label">{{ tab.label }}</text>
</view> </view>
@ -58,11 +58,11 @@ function switchTab(pageName) {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 2px; gap: 2px;
color: #999993; color: var(--c-text-3);
transition: color 0.2s; transition: color 0.2s;
} }
.tabbar-item.active { .tabbar-item.active {
color: #2db96d; color: var(--c-brand);
} }
.tabbar-icon-wrap { .tabbar-icon-wrap {
width: 24px; width: 24px;

4
src/components/report/BeforeAfterSlider.vue
View File

@ -194,7 +194,7 @@ function onMouseDown(e) {
border-radius: 50%; border-radius: 50%;
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.2); box-shadow: 0 2px 12px rgba(15, 23, 42, 0.2);
border: 2px solid #16a34a; border: 2px solid var(--c-brand-accent);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -204,7 +204,7 @@ function onMouseDown(e) {
.ba-arrows { .ba-arrows {
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
color: #15803d; color: var(--c-brand-heading-2);
letter-spacing: -2px; letter-spacing: -2px;
} }
.ba-tags { .ba-tags {

2
src/components/report/DuringMediaGrid.vue
View File

@ -154,7 +154,7 @@ function closeVideo() {
text-align: center; text-align: center;
border-radius: 50%; border-radius: 50%;
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
color: #16a34a; color: var(--c-brand-accent);
font-size: 14px; font-size: 14px;
padding-left: 3px; padding-left: 3px;
} }

44
src/components/report/ReminderCard.vue
View File

@ -245,9 +245,15 @@ async function onSubmit() {
if (res && res.code === 200 && res.data && res.data.ok) { if (res && res.code === 200 && res.data && res.data.ok) {
savedDate.value = res.data.remindDate || suggestion.value.remindDate savedDate.value = res.data.remindDate || suggestion.value.remindDate
wechatBound.value = !!res.data.wechatBound wechatBound.value = !!res.data.wechatBound
repeatSubmit.value = !!res.data.repeatSubmit const dup =
!!res.data.repeatSubmit ||
!!res.data.alreadySubmitted
repeatSubmit.value = dup
submitted.value = true submitted.value = true
persistToStorage() persistToStorage()
if (dup && res.message) {
uni.showToast({ title: res.message, icon: 'none', duration: 2200 })
}
} else { } else {
errorMsg.value = (res && res.message) || '提交失败，请稍后再试' errorMsg.value = (res && res.message) || '提交失败，请稍后再试'
} }
@ -267,7 +273,7 @@ onMounted(async () => {
<style scoped> <style scoped>
.reminder-card { .reminder-card {
margin: 4px 16px 16px; margin: 4px 16px 16px;
background: linear-gradient(140deg, #ecfdf5 0%, #ffffff 60%); background: linear-gradient(140deg, var(--c-brand-light) 0%, #ffffff 60%);
border: 1px solid #bbf7d0; border: 1px solid #bbf7d0;
border-radius: 16px; border-radius: 16px;
padding: 18px 16px 16px; padding: 18px 16px 16px;
@ -279,7 +285,7 @@ onMounted(async () => {
align-items: center; align-items: center;
gap: 6px; gap: 6px;
font-size: 14px; font-size: 14px;
color: #15803d; color: var(--c-brand-heading-2);
} }
.rc-title-emoji { font-size: 16px; } .rc-title-emoji { font-size: 16px; }
.rc-title-text { font-weight: 600; } .rc-title-text { font-weight: 600; }
@ -288,20 +294,20 @@ onMounted(async () => {
margin-top: 10px; margin-top: 10px;
padding: 14px 16px; padding: 14px 16px;
background: #ffffff; background: #ffffff;
border: 1px dashed #86efac; border: 1px dashed var(--c-brand-soft);
border-radius: 12px; border-radius: 12px;
text-align: center; text-align: center;
} }
.rc-date-main { .rc-date-main {
font-size: 22px; font-size: 22px;
font-weight: 700; font-weight: 700;
color: #166534; color: var(--c-brand-heading);
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
.rc-date-sub { .rc-date-sub {
margin-top: 4px; margin-top: 4px;
font-size: 12px; font-size: 12px;
color: #16a34a; color: var(--c-brand-accent);
} }
.rc-form { margin-top: 14px; } .rc-form { margin-top: 14px; }
@ -345,8 +351,8 @@ onMounted(async () => {
transition: all .15s; transition: all .15s;
} }
.rc-checkbox.checked { .rc-checkbox.checked {
background: #16a34a; background: var(--c-brand-accent);
border-color: #16a34a; border-color: var(--c-brand-accent);
} }
.rc-check { .rc-check {
color: #fff; color: #fff;
@ -368,7 +374,7 @@ onMounted(async () => {
line-height: 44px; line-height: 44px;
border: none; border: none;
border-radius: 10px; border-radius: 10px;
background: linear-gradient(135deg, #22c55e, #16a34a); background: linear-gradient(135deg, var(--c-brand-mid), var(--c-brand-accent));
color: #fff; color: #fff;
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
@ -397,7 +403,7 @@ onMounted(async () => {
line-height: 44px; line-height: 44px;
margin: 0 auto 10px; margin: 0 auto 10px;
border-radius: 50%; border-radius: 50%;
background: #16a34a; background: var(--c-brand-accent);
color: #fff; color: #fff;
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
@ -405,13 +411,13 @@ onMounted(async () => {
.rc-success-title { .rc-success-title {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #166534; color: var(--c-brand-heading);
} }
.rc-success-date { .rc-success-date {
margin-top: 6px; margin-top: 6px;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: #15803d; color: var(--c-brand-heading-2);
} }
.rc-success-desc { .rc-success-desc {
margin-top: 8px; margin-top: 8px;
@ -426,8 +432,8 @@ onMounted(async () => {
text-align: left; text-align: left;
} }
.rc-bind--ok { .rc-bind--ok {
background: #ecfdf5; background: var(--c-brand-light);
border: 1px solid #86efac; border: 1px solid var(--c-brand-soft);
} }
.rc-bind--hint { .rc-bind--hint {
background: #f8fafc; background: #f8fafc;
@ -437,7 +443,7 @@ onMounted(async () => {
display: block; display: block;
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
color: #166534; color: var(--c-brand-heading);
margin-bottom: 6px; margin-bottom: 6px;
} }
.rc-bind--hint .rc-bind-title { .rc-bind--hint .rc-bind-title {
@ -456,9 +462,9 @@ onMounted(async () => {
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
border-radius: 10px; border-radius: 10px;
border: 1px solid #16a34a; border: 1px solid var(--c-brand-accent);
background: #ffffff; background: #ffffff;
color: #15803d; color: var(--c-brand-heading-2);
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
} }
@ -487,9 +493,9 @@ onMounted(async () => {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
font-size: 14px; font-size: 14px;
color: #15803d; color: var(--c-brand-heading-2);
background: #fff; background: #fff;
border: 1px solid #86efac; border: 1px solid var(--c-brand-soft);
border-radius: 10px; border-radius: 10px;
} }
.rc-change-phone-hint { .rc-change-phone-hint {

24
src/components/report/ReportHighlightBlock.vue
View File

@ -352,7 +352,7 @@ onUnmounted(() => {
<style scoped> <style scoped>
.highlight-card { .highlight-card {
margin: 4px 16px 16px; margin: 4px 16px 16px;
background: linear-gradient(140deg, #ecfdf5 0%, #ffffff 55%); background: linear-gradient(140deg, var(--c-brand-light) 0%, #ffffff 55%);
border: 1px solid #bbf7d0; border: 1px solid #bbf7d0;
border-radius: 16px; border-radius: 16px;
padding: 18px 16px 16px; padding: 18px 16px 16px;
@ -368,11 +368,11 @@ onUnmounted(() => {
.highlight-title { .highlight-title {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #166534; color: var(--c-brand-heading);
} }
.highlight-badge { .highlight-badge {
font-size: 11px; font-size: 11px;
color: #15803d; color: var(--c-brand-heading-2);
background: rgba(45, 185, 109, 0.15); background: rgba(45, 185, 109, 0.15);
padding: 2px 8px; padding: 2px 8px;
border-radius: 999px; border-radius: 999px;
@ -384,7 +384,7 @@ onUnmounted(() => {
display: block; display: block;
} }
.highlight-em { .highlight-em {
color: #166534; color: var(--c-brand-heading);
font-weight: 600; font-weight: 600;
} }
.highlight-desc-ops { .highlight-desc-ops {
@ -410,14 +410,14 @@ onUnmounted(() => {
} }
.highlight-status--busy { .highlight-status--busy {
background: #f0fdf4; background: #f0fdf4;
border: 1px solid #86efac; border: 1px solid var(--c-brand-soft);
color: #166534; color: var(--c-brand-heading);
} }
.highlight-processing-hint { .highlight-processing-hint {
display: block; display: block;
margin-top: 6px; margin-top: 6px;
font-size: 11px; font-size: 11px;
color: #15803d; color: var(--c-brand-heading-2);
opacity: 0.9; opacity: 0.9;
} }
.highlight-status--err { .highlight-status--err {
@ -446,7 +446,7 @@ onUnmounted(() => {
margin-top: 12px; margin-top: 12px;
} }
.highlight-btn--album { .highlight-btn--album {
background: linear-gradient(135deg, #22c55e, #16a34a); background: linear-gradient(135deg, var(--c-brand-mid), var(--c-brand-accent));
color: #fff; color: #fff;
} }
.highlight-mp-hint { .highlight-mp-hint {
@ -471,7 +471,7 @@ onUnmounted(() => {
.highlight-mode-title { .highlight-mode-title {
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
color: #166534; color: var(--c-brand-heading);
} }
.highlight-mode-sub { .highlight-mode-sub {
font-size: 11px; font-size: 11px;
@ -495,9 +495,9 @@ onUnmounted(() => {
color: #475569; color: #475569;
} }
.highlight-mode-item.is-on { .highlight-mode-item.is-on {
border-color: #16a34a; border-color: var(--c-brand-accent);
background: #ecfdf5; background: var(--c-brand-light);
color: #166534; color: var(--c-brand-heading);
} }
.highlight-player { .highlight-player {
width: 100%; width: 100%;

6
src/components/report/ReportShareModal.vue
View File

@ -285,13 +285,13 @@ function previewReport() {
.rsm-template-text { .rsm-template-text {
flex: 1; flex: 1;
font-size: 13px; font-size: 13px;
color: #166534; color: var(--c-brand-heading);
line-height: 1.45; line-height: 1.45;
} }
.rsm-template-action { .rsm-template-action {
flex-shrink: 0; flex-shrink: 0;
font-size: 12px; font-size: 12px;
color: #15803d; color: var(--c-brand-heading-2);
font-weight: 600; font-weight: 600;
} }
.rsm-qr-wrap { .rsm-qr-wrap {
@ -331,7 +331,7 @@ function previewReport() {
border: none; border: none;
} }
.rsm-btn--primary { .rsm-btn--primary {
background: linear-gradient(135deg, #22c55e, #16a34a); background: linear-gradient(135deg, var(--c-brand-mid), var(--c-brand-accent));
color: #fff; color: #fff;
} }
.rsm-btn--ghost { .rsm-btn--ghost {

2
src/components/report/TestimonialModal.vue
View File

@ -141,7 +141,7 @@ defineExpose({ close })
color: #475569; color: #475569;
} }
.tm-btn-primary { .tm-btn-primary {
background: linear-gradient(135deg, #22c55e, #16a34a); background: linear-gradient(135deg, var(--c-brand-mid), var(--c-brand-accent));
color: #fff; color: #fff;
} }
.tm-btn[disabled] { .tm-btn[disabled] {

6
src/constants/designTokens.js Normal file
View File

@ -0,0 +1,6 @@
/**
* Canvas / AppIcon(data URI SVG) 等无法用 var() 的场景。
* 色值须与 `assets/global.css` 中 `--c-brand-heading*` 保持一致。
*/
export const BRAND_HEADING = '#166534'
export const BRAND_HEADING_2 = '#15803d'

2
src/pages/appointment/AppointmentDetail.vue
View File

@ -203,7 +203,7 @@ onLoad((options) => {
padding: 2px 8px; padding: 2px 8px;
border-radius: 10px; border-radius: 10px;
background: #e8f7ef; background: #e8f7ef;
color: #2db96d; color: var(--c-brand);
font-weight: 500; font-weight: 500;
} }
.tag-success { .tag-success {

8
src/pages/appointment/CustAppointmentCreate.vue
View File

@ -719,7 +719,7 @@ onMounted(async () => {
.c-hero-sub { .c-hero-sub {
display: block; display: block;
font-size: 14px; font-size: 14px;
color: #999993; color: var(--c-text-3);
margin-top: 4px; margin-top: 4px;
} }
.c-form-card { .c-form-card {
@ -748,7 +748,7 @@ onMounted(async () => {
.pet-switch-btn { .pet-switch-btn {
width: 68px !important; width: 68px !important;
padding: 0 !important; padding: 0 !important;
color: #2db96d !important; color: var(--c-brand) !important;
flex-shrink: 0; flex-shrink: 0;
} }
.c-store-hint { .c-store-hint {
@ -778,7 +778,7 @@ onMounted(async () => {
flex-shrink: 0; flex-shrink: 0;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #2db96d; color: var(--c-brand);
padding: 6px 0 6px 8px; padding: 6px 0 6px 8px;
} }
.c-store-collapse { .c-store-collapse {
@ -786,7 +786,7 @@ onMounted(async () => {
margin-top: 8px; margin-top: 8px;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #2db96d; color: var(--c-brand);
} }
.c-try-tomorrow { .c-try-tomorrow {
margin-top: 12px; margin-top: 12px;

26
src/pages/home/Home.vue
View File

@ -56,7 +56,7 @@
<view v-if="listMode === 'tab' && currentStatus === 'done'" class="done-filter-row"> <view v-if="listMode === 'tab' && currentStatus === 'done'" class="done-filter-row">
<text class="done-filter-label">包含已取消</text> <text class="done-filter-label">包含已取消</text>
<switch :checked="includeCancelledInDone" color="#2db96d" @change="onIncludeCancelledChange" /> <switch :checked="includeCancelledInDone" color="var(--c-brand)" @change="onIncludeCancelledChange" />
</view> </view>
<AppPageState <AppPageState
@ -151,7 +151,7 @@
<view v-if="listMode === 'tab' && currentStatus === 'done'" class="done-filter-row"> <view v-if="listMode === 'tab' && currentStatus === 'done'" class="done-filter-row">
<text class="done-filter-label">包含已取消</text> <text class="done-filter-label">包含已取消</text>
<switch :checked="includeCancelledInDone" color="#2db96d" @change="onIncludeCancelledChange" /> <switch :checked="includeCancelledInDone" color="var(--c-brand)" @change="onIncludeCancelledChange" />
</view> </view>
<!-- 列表 --> <!-- 列表 -->
@ -735,7 +735,7 @@ onShow(() => {
width: 56px; width: 56px;
height: 56px; height: 56px;
border-radius: 28px; border-radius: 28px;
background: #2db96d; background: var(--c-brand);
box-shadow: 0 6px 20px rgba(45, 185, 109, 0.42); box-shadow: 0 6px 20px rgba(45, 185, 109, 0.42);
display: flex; display: flex;
align-items: center; align-items: center;
@ -867,7 +867,7 @@ onShow(() => {
display: block; display: block;
margin-top: 6px; margin-top: 6px;
font-size: 11px; font-size: 11px;
color: #999993; color: var(--c-text-3);
line-height: 1.4; line-height: 1.4;
} }
.c-time-row { display: flex; gap: 10px; } .c-time-row { display: flex; gap: 10px; }
@ -893,7 +893,7 @@ onShow(() => {
border: 1.5px solid transparent; border: 1.5px solid transparent;
} }
.dash-card--active { .dash-card--active {
border-color: #2db96d; border-color: var(--c-brand);
background: linear-gradient(145deg, #f0fdf4 0%, #ffffff 55%); background: linear-gradient(145deg, #f0fdf4 0%, #ffffff 55%);
} }
.dash-card-value { .dash-card-value {
@ -924,20 +924,20 @@ onShow(() => {
justify-content: space-between; justify-content: space-between;
margin: 0 16px 8px; margin: 0 16px 8px;
padding: 10px 12px; padding: 10px 12px;
background: #ecfdf5; background: var(--c-brand-light);
border-radius: 12px; border-radius: 12px;
border: 1px solid #bbf7d0; border: 1px solid #bbf7d0;
} }
.list-mode-back { .list-mode-back {
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
color: #15803d; color: var(--c-brand-heading-2);
padding: 4px 0; padding: 4px 0;
} }
.list-mode-title { .list-mode-title {
font-size: 15px; font-size: 15px;
font-weight: 700; font-weight: 700;
color: #166534; color: var(--c-brand-heading);
} }
.list-mode-placeholder { .list-mode-placeholder {
width: 56px; width: 56px;
@ -976,7 +976,7 @@ onShow(() => {
.tab-text { .tab-text {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #999993; color: var(--c-text-3);
} }
.tab-active .tab-text { color: #fff; } .tab-active .tab-text { color: #fff; }
.tab-badge { .tab-badge {
@ -996,7 +996,7 @@ onShow(() => {
box-sizing: border-box; box-sizing: border-box;
} }
.tab-badge--doing { .tab-badge--doing {
background: #2db96d; background: var(--c-brand);
} }
/* B端列表（底部留白，避免最后一条被悬浮钮挡住） */ /* B端列表（底部留白，避免最后一条被悬浮钮挡住） */
@ -1025,7 +1025,7 @@ onShow(() => {
.order-svc { .order-svc {
display: block; display: block;
font-size: 12px; font-size: 12px;
color: #999993; color: var(--c-text-3);
margin-top: 2px; margin-top: 2px;
} }
.order-status { .order-status {
@ -1036,8 +1036,8 @@ onShow(() => {
flex-shrink: 0; flex-shrink: 0;
} }
.status-new { background: #fef5ec; color: #f5913e; } .status-new { background: #fef5ec; color: #f5913e; }
.status-doing { background: #eaf8f0; color: #2db96d; } .status-doing { background: var(--c-brand-light); color: var(--c-brand); }
.status-done { background: #f5f5f2; color: #999993; } .status-done { background: #f5f5f2; color: var(--c-text-3); }
.status-cancel { background: #f5f5f2; color: #bbbbb5; } .status-cancel { background: #f5f5f2; color: #bbbbb5; }
.order-time { .order-time {

16
src/pages/login/Login.vue
View File

@ -479,7 +479,7 @@ onUnmounted(() => {
.brand-sub { .brand-sub {
display: block; display: block;
font-size: 13px; font-size: 13px;
color: #999993; color: var(--c-text-3);
margin-top: 6px; margin-top: 6px;
} }
@ -515,7 +515,7 @@ onUnmounted(() => {
min-height: 48px; min-height: 48px;
line-height: 48px; line-height: 48px;
} }
.field:focus { border-color: #2db96d; background: #fff; } .field:focus { border-color: var(--c-brand); background: #fff; }
/* 验证码行 */ /* 验证码行 */
.sms-row { .sms-row {
@ -547,11 +547,11 @@ onUnmounted(() => {
} }
.wx-verified-hint { .wx-verified-hint {
font-size: 13px; font-size: 13px;
color: #2db96d; color: var(--c-brand);
font-weight: 600; font-weight: 600;
margin-bottom: 12px; margin-bottom: 12px;
padding: 8px 12px; padding: 8px 12px;
background: #eaf8f0; background: var(--c-brand-light);
border-radius: 10px; border-radius: 10px;
} }
@ -579,7 +579,7 @@ onUnmounted(() => {
} }
.link-btn { .link-btn {
font-size: 14px; font-size: 14px;
color: #2db96d; color: var(--c-brand);
font-weight: 600; font-weight: 600;
padding: 8px 4px; padding: 8px 4px;
} }
@ -596,17 +596,17 @@ onUnmounted(() => {
text-align: center; text-align: center;
margin-top: 20px; margin-top: 20px;
font-size: 14px; font-size: 14px;
color: #999993; color: var(--c-text-3);
padding: 8px; padding: 8px;
} }
/* 提示框 */ /* 提示框 */
.hint-box { .hint-box {
background: #eaf8f0; background: var(--c-brand-light);
border-radius: 10px; border-radius: 10px;
padding: 10px 14px; padding: 10px 14px;
font-size: 13px; font-size: 13px;
color: #2db96d; color: var(--c-brand);
margin-bottom: 14px; margin-bottom: 14px;
} }
</style> </style>

10
src/pages/mine/Leads.vue
View File

@ -302,7 +302,7 @@ onShow(() => {
line-height: 1.6; line-height: 1.6;
} }
.hero-count { .hero-count {
color: #16a34a; color: var(--c-brand-accent);
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
margin: 0 2px; margin: 0 2px;
@ -327,8 +327,8 @@ onShow(() => {
font-weight: 600; font-weight: 600;
} }
.tab-item.active { .tab-item.active {
background: #ecfdf5; background: var(--c-brand-light);
color: #16a34a; color: var(--c-brand-accent);
} }
.list { padding: 0 16px; } .list { padding: 0 16px; }
@ -361,7 +361,7 @@ onShow(() => {
color: #2563eb; color: #2563eb;
font-weight: 600; font-weight: 600;
} }
.lead-status.sent { background: #ecfdf5; color: #16a34a; } .lead-status.sent { background: var(--c-brand-light); color: var(--c-brand-accent); }
.lead-status.unsub { background: #f3f4f6; color: #94a3b8; } .lead-status.unsub { background: #f3f4f6; color: #94a3b8; }
.lead-body { padding: 8px 0; border-top: 1px solid #f1f5f9; } .lead-body { padding: 8px 0; border-top: 1px solid #f1f5f9; }
@ -400,7 +400,7 @@ onShow(() => {
font-weight: 600; font-weight: 600;
} }
.lead-btn.primary { .lead-btn.primary {
background: linear-gradient(135deg, #22c55e, #16a34a); background: linear-gradient(135deg, var(--c-brand-mid), var(--c-brand-accent));
color: #fff; color: #fff;
} }
.lead-btn.ghost { .lead-btn.ghost {

8
src/pages/mine/Mine.vue
View File

@ -140,7 +140,7 @@ const initials = computed(() => {
const avatarBg = computed(() => { const avatarBg = computed(() => {
if (userInfo.avatar) return {} if (userInfo.avatar) return {}
const colors = ['#f5913e', '#2db96d', '#5090d0', '#e06050', '#8b6914'] const colors = ['#f5913e', 'var(--c-brand)', '#5090d0', '#e06050', '#8b6914']
const idx = (userInfo.name?.charCodeAt(0) || 0) % colors.length const idx = (userInfo.name?.charCodeAt(0) || 0) % colors.length
return { background: colors[idx] } return { background: colors[idx] }
}) })
@ -207,7 +207,7 @@ const logout = () => {
} }
.user-phone { .user-phone {
font-size: 13px; font-size: 13px;
color: #999993; color: var(--c-text-3);
margin-top: 2px; margin-top: 2px;
} }
.role-tag { .role-tag {
@ -215,8 +215,8 @@ const logout = () => {
border-radius: 8px; border-radius: 8px;
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
background: #eaf8f0; background: var(--c-brand-light);
color: #2db96d; color: var(--c-brand);
flex-shrink: 0; flex-shrink: 0;
} }

2
src/pages/mine/MyOrders.vue
View File

@ -206,7 +206,7 @@ onMounted(() => fetchOrders())
border-radius: 14px; border-radius: 14px;
background: linear-gradient(135deg, #f3fff7 0%, #ecfbf3 100%); background: linear-gradient(135deg, #f3fff7 0%, #ecfbf3 100%);
} }
.hero-title { font-size: 16px; font-weight: 700; color: #166534; } .hero-title { font-size: 16px; font-weight: 700; color: var(--c-brand-heading); }
.hero-sub { margin-top: 4px; font-size: 12px; color: #4b5563; line-height: 1.45; } .hero-sub { margin-top: 4px; font-size: 12px; color: #4b5563; line-height: 1.45; }
.orders-nav { .orders-nav {
padding: 14px 16px; padding: 14px 16px;

12
src/pages/mine/MyPets.vue
View File

@ -411,7 +411,7 @@ onShow(() => loadPets())
border: 1px solid #dcefe3; border: 1px solid #dcefe3;
background: linear-gradient(135deg, #f3fff7 0%, #ecfbf3 100%); background: linear-gradient(135deg, #f3fff7 0%, #ecfbf3 100%);
} }
.hero-title { font-size: 16px; font-weight: 700; color: #166534; display: block; } .hero-title { font-size: 16px; font-weight: 700; color: var(--c-brand-heading); display: block; }
.hero-sub { .hero-sub {
display: block; display: block;
margin-top: 6px; margin-top: 6px;
@ -482,7 +482,7 @@ onShow(() => loadPets())
} }
.pet-avatar-ph { .pet-avatar-ph {
background: #e8f5ef; background: #e8f5ef;
color: #2db96d; color: var(--c-brand);
font-size: 22px; font-size: 22px;
font-weight: 700; font-weight: 700;
display: flex; display: flex;
@ -491,14 +491,14 @@ onShow(() => loadPets())
} }
.pet-info { flex: 1; min-width: 0; } .pet-info { flex: 1; min-width: 0; }
.pet-name { font-size: 16px; font-weight: 700; color: #1a1a1a; display: block; } .pet-name { font-size: 16px; font-weight: 700; color: #1a1a1a; display: block; }
.pet-meta { font-size: 12px; color: #999993; display: block; margin-top: 4px; } .pet-meta { font-size: 12px; color: var(--c-text-3); display: block; margin-top: 4px; }
.pet-remark { font-size: 12px; color: #666660; display: block; margin-top: 6px; } .pet-remark { font-size: 12px; color: #666660; display: block; margin-top: 6px; }
.pet-history-link { .pet-history-link {
display: block; display: block;
margin-top: 8px; margin-top: 8px;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #2db96d; color: var(--c-brand);
} }
.fab-pet { .fab-pet {
@ -508,7 +508,7 @@ onShow(() => loadPets())
width: 56px; width: 56px;
height: 56px; height: 56px;
border-radius: 28px; border-radius: 28px;
background: #2db96d; background: var(--c-brand);
box-shadow: 0 6px 20px rgba(45, 185, 109, 0.42); box-shadow: 0 6px 20px rgba(45, 185, 109, 0.42);
display: flex; display: flex;
align-items: center; align-items: center;
@ -562,5 +562,5 @@ onShow(() => loadPets())
overflow: hidden; overflow: hidden;
} }
.avatar-prev { width: 100%; height: 100%; } .avatar-prev { width: 100%; height: 100%; }
.avatar-tap-text { font-size: 12px; color: #999993; } .avatar-tap-text { font-size: 12px; color: var(--c-text-3); }
</style> </style>

6
src/pages/mine/MyReports.vue
View File

@ -152,9 +152,9 @@ onShow(() => loadReports())
border-radius: 14px; border-radius: 14px;
background: linear-gradient(135deg, #f3fff7 0%, #ecfbf3 100%); background: linear-gradient(135deg, #f3fff7 0%, #ecfbf3 100%);
} }
.hero-title { font-size: 16px; font-weight: 700; color: #166534; } .hero-title { font-size: 16px; font-weight: 700; color: var(--c-brand-heading); }
.hero-sub { margin-top: 4px; font-size: 12px; color: #4b5563; line-height: 1.45; } .hero-sub { margin-top: 4px; font-size: 12px; color: #4b5563; line-height: 1.45; }
.hero-count { font-weight: 700; color: #2db96d; } .hero-count { font-weight: 700; color: var(--c-brand); }
.placeholder-icon { .placeholder-icon {
width: 36px; width: 36px;
height: 36px; height: 36px;
@ -245,7 +245,7 @@ onShow(() => loadReports())
width: 56px; width: 56px;
height: 56px; height: 56px;
border-radius: 28px; border-radius: 28px;
background: #2db96d; background: var(--c-brand);
box-shadow: 0 6px 20px rgba(45, 185, 109, 0.42); box-shadow: 0 6px 20px rgba(45, 185, 109, 0.42);
display: flex; display: flex;
align-items: center; align-items: center;

8
src/pages/mine/PetHistory.vue
View File

@ -196,7 +196,7 @@ onLoad((options) => {
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 50%; border-radius: 50%;
background: #2db96d; background: var(--c-brand);
margin-top: 8px; margin-top: 8px;
} }
.ph-line { .ph-line {
@ -237,8 +237,8 @@ onLoad((options) => {
color: #f5913e; color: #f5913e;
} }
.ph-tag--doing { .ph-tag--doing {
background: #ecfdf5; background: var(--c-brand-light);
color: #16a34a; color: var(--c-brand-accent);
} }
.ph-tag--done { .ph-tag--done {
background: #f1f5f9; background: #f1f5f9;
@ -267,6 +267,6 @@ onLoad((options) => {
.ph-link { .ph-link {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #2db96d; color: var(--c-brand);
} }
</style> </style>

4
src/pages/mine/Profile.vue
View File

@ -178,7 +178,7 @@ const initials = computed(() => {
return userInfo.value.name.slice(0, 1).toUpperCase() return userInfo.value.name.slice(0, 1).toUpperCase()
}) })
const COLORS = ['#f5913e', '#2db96d', '#8b6914', '#e06050', '#5090d0'] const COLORS = ['#f5913e', 'var(--c-brand)', '#8b6914', '#e06050', '#5090d0']
const avatarBg = computed(() => { const avatarBg = computed(() => {
const idx = (userInfo.value.name?.charCodeAt(0) || 0) % COLORS.length const idx = (userInfo.value.name?.charCodeAt(0) || 0) % COLORS.length
return { background: COLORS[idx] } return { background: COLORS[idx] }
@ -402,7 +402,7 @@ onUnmounted(() => {
.role-pill.hero-role.role-staff, .role-pill.hero-role.role-staff,
.role-pill.role-staff { .role-pill.role-staff {
background: #ecfdf3; background: #ecfdf3;
color: #166534; color: var(--c-brand-heading);
} }
.role-pill.hero-role.role-customer, .role-pill.hero-role.role-customer,
.role-pill.role-pill-compact.role-customer { .role-pill.role-pill-compact.role-customer {

7
src/pages/mine/Schedule.vue
View File

@ -13,7 +13,7 @@
<view v-else class="sched-body"> <view v-else class="sched-body">
<view class="sched-hero"> <view class="sched-hero">
<view class="sched-hero-icon" aria-hidden="true"> <view class="sched-hero-icon" aria-hidden="true">
<AppIcon name="calendar" :size="22" color="#15803d" /> <AppIcon name="calendar" :size="22" :color="BRAND_HEADING_2" />
</view> </view>
<view class="sched-hero-text"> <view class="sched-hero-text">
<text class="sched-hero-title">时段一览</text> <text class="sched-hero-title">时段一览</text>
@ -68,6 +68,7 @@
<script setup> <script setup>
import { ref, computed, onMounted } from 'vue' import { ref, computed, onMounted } from 'vue'
import { BRAND_HEADING_2 } from '../../constants/designTokens.js'
import AppIcon from '../../components/AppIcon.vue' import AppIcon from '../../components/AppIcon.vue'
import { getScheduleDay, createScheduleBlock, deleteScheduleBlock } from '../../api/index.js' import { getScheduleDay, createScheduleBlock, deleteScheduleBlock } from '../../api/index.js'
import { getStoreSession, getUserSession } from '../../utils/session.js' import { getStoreSession, getUserSession } from '../../utils/session.js'
@ -337,7 +338,7 @@ onMounted(() => {
text-align: center; text-align: center;
font-size: 22px; font-size: 22px;
font-weight: 700; font-weight: 700;
color: #2db96d; color: var(--c-brand);
line-height: 40px; line-height: 40px;
} }
.sched-date-mid { .sched-date-mid {
@ -431,7 +432,7 @@ onMounted(() => {
} }
.sched-empty { .sched-empty {
font-size: 14px; font-size: 14px;
color: #2db96d; color: var(--c-brand);
font-weight: 600; font-weight: 600;
} }
.sched-empty--past { .sched-empty--past {

8
src/pages/mine/Staff.vue
View File

@ -140,7 +140,7 @@ const swipedId = ref(null)
const touchStartX = ref(0) const touchStartX = ref(0)
const touchCurrentX = ref(0) const touchCurrentX = ref(0)
const COLORS = ['#f5913e', '#2db96d', '#8b6914', '#e06050', '#5090d0', '#9b59b6'] const COLORS = ['#f5913e', 'var(--c-brand)', '#8b6914', '#e06050', '#5090d0', '#9b59b6']
const avatarStyle = (s) => { const avatarStyle = (s) => {
if (s.avatar) return { background: 'transparent' } if (s.avatar) return { background: 'transparent' }
const idx = (s.name?.charCodeAt(0) || 0) % COLORS.length const idx = (s.name?.charCodeAt(0) || 0) % COLORS.length
@ -251,7 +251,7 @@ onMounted(() => loadStaff())
display: block; display: block;
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
color: #999993; color: var(--c-text-3);
letter-spacing: 0.5px; letter-spacing: 0.5px;
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -281,8 +281,8 @@ onMounted(() => loadStaff())
line-height: 36px; line-height: 36px;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #2db96d; color: var(--c-brand);
background: #eaf8f0; background: var(--c-brand-light);
border: none; border: none;
border-radius: 10px; border-radius: 10px;
box-sizing: border-box; box-sizing: border-box;

11
src/pages/mine/Store.vue
View File

@ -9,7 +9,7 @@
<view class="store-body"> <view class="store-body">
<view class="store-hero"> <view class="store-hero">
<view class="store-hero-icon" aria-hidden="true"> <view class="store-hero-icon" aria-hidden="true">
<AppIcon name="store" :size="22" color="#15803d" /> <AppIcon name="store" :size="22" :color="BRAND_HEADING_2" />
</view> </view>
<view class="store-hero-text"> <view class="store-hero-text">
<text class="store-hero-title">门店资料</text> <text class="store-hero-title">门店资料</text>
@ -117,6 +117,7 @@
<script setup> <script setup>
import { ref, computed, onMounted } from 'vue' import { ref, computed, onMounted } from 'vue'
import { BRAND_HEADING_2 } from '../../constants/designTokens.js'
import AppIcon from '../../components/AppIcon.vue' import AppIcon from '../../components/AppIcon.vue'
import { navigateTo } from '../../utils/globalState.js' import { navigateTo } from '../../utils/globalState.js'
import { updateStore, getStoreDetail } from '../../api/index.js' import { updateStore, getStoreDetail } from '../../api/index.js'
@ -339,7 +340,7 @@ onMounted(async () => {
overflow: hidden; overflow: hidden;
} }
.store-card--hours { .store-card--hours {
border-color: #86efac; border-color: var(--c-brand-soft);
box-shadow: 0 8px 22px rgba(34, 197, 94, 0.12); box-shadow: 0 8px 22px rgba(34, 197, 94, 0.12);
} }
.store-card--after-basic { .store-card--after-basic {
@ -421,9 +422,9 @@ onMounted(async () => {
padding: 0 14px; padding: 0 14px;
min-height: 44px; min-height: 44px;
border-radius: 12px; border-radius: 12px;
border: 1px solid #2db96d; border: 1px solid var(--c-brand);
background: #f0fdf4; background: #f0fdf4;
color: #15803d; color: var(--c-brand-heading-2);
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
line-height: 44px; line-height: 44px;
@ -439,7 +440,7 @@ onMounted(async () => {
.geo-hint { .geo-hint {
margin-top: 8px; margin-top: 8px;
font-size: 12px; font-size: 12px;
color: #2db96d; color: var(--c-brand);
line-height: 1.4; line-height: 1.4;
} }

12
src/pages/report-view/reportView.vue
View File

@ -733,7 +733,7 @@ onMounted(() => loadReport())
/* 品牌栏（含 Logo，与 H5 对齐） */ /* 品牌栏（含 Logo，与 H5 对齐） */
.brand-bar { .brand-bar {
background: #2db96d; background: var(--c-brand);
padding: 12px 16px 14px; padding: 12px 16px 14px;
border-bottom-left-radius: 14px; border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px; border-bottom-right-radius: 14px;
@ -815,7 +815,7 @@ onMounted(() => loadReport())
border: 3px solid rgba(45, 185, 109, 0.35); border: 3px solid rgba(45, 185, 109, 0.35);
} }
.staff-avatar-mp--ph { .staff-avatar-mp--ph {
background: linear-gradient(145deg, #86efac, #22c55e); background: linear-gradient(145deg, var(--c-brand-soft), var(--c-brand-mid));
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -902,7 +902,7 @@ onMounted(() => loadReport())
} }
.photo-group-count { .photo-group-count {
font-size: 12px; font-size: 12px;
color: #999993; color: var(--c-text-3);
} }
.photo-grid-extra { .photo-grid-extra {
display: grid; display: grid;
@ -966,7 +966,7 @@ onMounted(() => loadReport())
.info-title { .info-title {
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
color: #999993; color: var(--c-text-3);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 14px; margin-bottom: 14px;
@ -982,7 +982,7 @@ onMounted(() => loadReport())
} }
.info-key { .info-key {
font-size: 14px; font-size: 14px;
color: #999993; color: var(--c-text-3);
} }
.info-val { .info-val {
font-size: 14px; font-size: 14px;
@ -1001,7 +1001,7 @@ onMounted(() => loadReport())
display: block; display: block;
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
color: #999993; color: var(--c-text-3);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 8px; margin-bottom: 8px;

10
src/pages/report/Report.vue
View File

@ -845,7 +845,7 @@ const onRemarkBlur = () => {
.section-toggle { .section-toggle {
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #2db96d; color: var(--c-brand);
} }
.section-label { .section-label {
font-size: 16px; font-size: 16px;
@ -855,7 +855,7 @@ const onRemarkBlur = () => {
.section-hint { .section-hint {
display: block; display: block;
font-size: 12px; font-size: 12px;
color: #999993; color: var(--c-text-3);
margin-top: 2px; margin-top: 2px;
} }
@ -900,7 +900,7 @@ const onRemarkBlur = () => {
border-radius: 50%; border-radius: 50%;
} }
.dot-before { background: #f5913e; } .dot-before { background: #f5913e; }
.dot-after { background: #2db96d; } .dot-after { background: var(--c-brand); }
.photo-grid { .photo-grid {
display: flex; display: flex;
@ -980,7 +980,7 @@ const onRemarkBlur = () => {
justify-content: center; justify-content: center;
gap: 6px; gap: 6px;
font-size: 14px; font-size: 14px;
color: #999993; color: var(--c-text-3);
} }
.during-add-btn:active { .during-add-btn:active {
background: #f0f0ee; background: #f0f0ee;
@ -1064,7 +1064,7 @@ const onRemarkBlur = () => {
width: 28px; width: 28px;
height: 28px; height: 28px;
border: 2.5px solid #ebebea; border: 2.5px solid #ebebea;
border-top-color: #2db96d; border-top-color: var(--c-brand);
border-radius: 50%; border-radius: 50%;
animation: spin 0.7s linear infinite; animation: spin 0.7s linear infinite;
} }

6
src/pages/unsubscribe/Unsubscribe.vue
View File

@ -115,7 +115,7 @@ onMounted(doUnsubscribe)
.unsub-spinner { .unsub-spinner {
width: 32px; height: 32px; width: 32px; height: 32px;
border: 3px solid #e2e8f0; border: 3px solid #e2e8f0;
border-top-color: #16a34a; border-top-color: var(--c-brand-accent);
border-radius: 50%; border-radius: 50%;
animation: spin 0.8s linear infinite; animation: spin 0.8s linear infinite;
margin-bottom: 12px; margin-bottom: 12px;
@ -129,7 +129,7 @@ onMounted(doUnsubscribe)
justify-content: center; justify-content: center;
margin-bottom: 14px; margin-bottom: 14px;
} }
.unsub-icon.success { background: #16a34a; } .unsub-icon.success { background: var(--c-brand-accent); }
.unsub-icon.error { background: #f59e0b; } .unsub-icon.error { background: #f59e0b; }
.unsub-icon-char { color: #fff; font-size: 28px; font-weight: 700; line-height: 1; } .unsub-icon-char { color: #fff; font-size: 28px; font-weight: 700; line-height: 1; }
.unsub-title { .unsub-title {
@ -152,7 +152,7 @@ onMounted(doUnsubscribe)
padding: 0 24px; padding: 0 24px;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
background: #16a34a; background: var(--c-brand-accent);
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
} }

6
src/utils/reportPosterDraw.js
View File

@ -3,6 +3,8 @@
* H5 / 小程序 canvas 2d 共用 * H5 / 小程序 canvas 2d 共用
*/ */
import { BRAND_HEADING, BRAND_HEADING_2 } from '../constants/designTokens.js'
export const POSTER_W = 750 export const POSTER_W = 750
/** 兼容旧引用：实际高度请用 computePosterLogicalHeight */ /** 兼容旧引用：实际高度请用 computePosterLogicalHeight */
export const POSTER_H = 1180 export const POSTER_H = 1180
@ -228,12 +230,12 @@ export function drawReportPoster(ctx, data) {
roundRect(ctx, cx - badgeR, cy - badgeR, badgeR * 2, badgeR * 2, badgeR) roundRect(ctx, cx - badgeR, cy - badgeR, badgeR * 2, badgeR * 2, badgeR)
ctx.stroke() ctx.stroke()
ctx.fillStyle = '#15803d' ctx.fillStyle = BRAND_HEADING_2
ctx.font = `bold 20px ${FONT}` ctx.font = `bold 20px ${FONT}`
ctx.textAlign = 'center' ctx.textAlign = 'center'
ctx.fillText('✨', cx, cy - 2) ctx.fillText('✨', cx, cy - 2)
ctx.font = `bold 12px ${FONT}` ctx.font = `bold 12px ${FONT}`
ctx.fillStyle = '#166534' ctx.fillStyle = BRAND_HEADING
ctx.fillText('蜕变', cx, cy + 14) ctx.fillText('蜕变', cx, cy + 14)
const tagW = 100 const tagW = 100

4
src/views/ReportView.vue
View File

@ -358,7 +358,7 @@ onMounted(() => loadReport())
.report-h5-state { min-height: 50vh; } .report-h5-state { min-height: 50vh; }
.report-content { max-width: 430px; margin: 0 auto; background: #f8fafc; min-height: 100vh; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); } .report-content { max-width: 430px; margin: 0 auto; background: #f8fafc; min-height: 100vh; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); }
.brand-header { .brand-header {
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); background: linear-gradient(135deg, var(--c-brand-mid) 0%, var(--c-brand-accent) 100%);
padding: 20px 20px 18px; padding: 20px 20px 18px;
text-align: center; color: #fff; text-align: center; color: #fff;
border-radius: 0 0 16px 16px; border-radius: 0 0 16px 16px;
@ -428,7 +428,7 @@ onMounted(() => loadReport())
box-shadow: 0 4px 14px rgba(22, 163, 74, 0.15); box-shadow: 0 4px 14px rgba(22, 163, 74, 0.15);
} }
.staff-avatar--ph { .staff-avatar--ph {
background: linear-gradient(145deg, #86efac, #22c55e); background: linear-gradient(145deg, var(--c-brand-soft), var(--c-brand-mid));
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;