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-light: #eaf8f0;
--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-light: #fef5ec;
--c-red: #e5534b;
@ -63,50 +72,50 @@ page {
display: block;
font-size: 13px;
font-weight: 600;
color: #666660;
color: var(--c-text-2);
margin-bottom: 6px;
}
.app-form-input {
background: #f5f5f2;
background: var(--c-surface-alt);
border: 1.5px solid transparent;
border-radius: 12px;
padding: 11px 14px;
font-size: 15px;
color: #1a1a1a;
color: var(--c-text);
width: 100%;
box-sizing: border-box;
min-height: 44px;
}
.app-form-input:focus {
border-color: #2db96d;
background: #ffffff;
border-color: var(--c-brand);
background: var(--c-surface);
}
.app-form-picker {
display: flex;
align-items: center;
justify-content: space-between;
}
.app-form-placeholder { color: #bbbbb5; }
.app-form-placeholder { color: var(--c-text-4); }
.app-form-arrow {
color: #bbbbb5;
color: var(--c-text-4);
font-size: 18px;
font-weight: 300;
}
.app-form-textarea {
background: #f5f5f2;
background: var(--c-surface-alt);
border: 1.5px solid transparent;
border-radius: 12px;
padding: 12px 14px;
font-size: 14px;
color: #1a1a1a;
color: var(--c-text);
width: 100%;
box-sizing: border-box;
min-height: 100px;
line-height: 1.6;
}
.app-form-textarea:focus {
border-color: #2db96d;
background: #fff;
border-color: var(--c-brand);
background: var(--c-surface);
}
/* ---- 按钮 ----
@ -127,8 +136,8 @@ page {
.van-button:active { opacity: 0.85; transform: scale(0.98); }
.van-button--primary,
button.van-button--primary {
background-color: #2db96d !important;
background: #2db96d !important;
background-color: var(--c-brand) !important;
background: var(--c-brand) !important;
border: none !important;
color: #ffffff !important;
box-shadow: none !important;
@ -147,8 +156,8 @@ button.van-button--primary {
}
.van-button--small.van-button--primary,
button.van-button--small.van-button--primary {
background-color: #2db96d !important;
background: #2db96d !important;
background-color: var(--c-brand) !important;
background: var(--c-brand) !important;
color: #ffffff !important;
border: none !important;
}
@ -195,15 +204,15 @@ button.app-btn-sm {
}
.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;
box-shadow: 0 4px 12px rgba(45, 185, 109, 0.28);
}
.app-btn-outline,
button.app-btn-outline {
background: transparent !important;
color: #999993 !important;
border: 1.5px solid #ebebea !important;
color: var(--c-text-3) !important;
border: 1.5px solid var(--c-border) !important;
}
.app-btn-danger-outline,
button.app-btn-danger-outline {
@ -279,14 +288,14 @@ button.app-btn-code {
}
.app-btn-code--neutral,
button.app-btn-code--neutral {
background: #f5f5f2 !important;
color: #2db96d !important;
background: var(--c-surface-alt) !important;
color: var(--c-brand) !important;
border: none !important;
}
.app-btn-code--brand,
button.app-btn-code--brand {
background: #f0fcf5 !important;
color: #2db96d !important;
color: var(--c-brand) !important;
border: 1.5px solid #c0f0d8 !important;
}
.app-btn-code--neutral[disabled],
@ -450,8 +459,8 @@ button.app-btn-code--neutral[disabled] {
}
.nav-back:active { opacity: 0.7; }
.nav-gradient {
background-color: #2db96d !important;
background: #2db96d !important;
background-color: var(--c-brand) !important;
background: var(--c-brand) !important;
}
/* ---- 空状态 ---- */

4
src/components/AppPageState.vue
View File

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

6
src/components/TabBar.vue
View File

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

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

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

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

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

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

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

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

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

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

@ -141,7 +141,7 @@ defineExpose({ close })
color: #475569;
}
.tm-btn-primary {
background: linear-gradient(135deg, #22c55e, #16a34a);
background: linear-gradient(135deg, var(--c-brand-mid), var(--c-brand-accent));
color: #fff;
}
.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;
border-radius: 10px;
background: #e8f7ef;
color: #2db96d;
color: var(--c-brand);
font-weight: 500;
}
.tag-success {

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

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

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

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

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

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

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

@ -140,7 +140,7 @@ const initials = computed(() => {
const avatarBg = computed(() => {
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
return { background: colors[idx] }
})
@ -207,7 +207,7 @@ const logout = () => {
}
.user-phone {
font-size: 13px;
color: #999993;
color: var(--c-text-3);
margin-top: 2px;
}
.role-tag {
@ -215,8 +215,8 @@ const logout = () => {
border-radius: 8px;
font-size: 12px;
font-weight: 700;
background: #eaf8f0;
color: #2db96d;
background: var(--c-brand-light);
color: var(--c-brand);
flex-shrink: 0;
}

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

@ -206,7 +206,7 @@ onMounted(() => fetchOrders())
border-radius: 14px;
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; }
.orders-nav {
padding: 14px 16px;

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

@ -411,7 +411,7 @@ onShow(() => loadPets())
border: 1px solid #dcefe3;
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 {
display: block;
margin-top: 6px;
@ -482,7 +482,7 @@ onShow(() => loadPets())
}
.pet-avatar-ph {
background: #e8f5ef;
color: #2db96d;
color: var(--c-brand);
font-size: 22px;
font-weight: 700;
display: flex;
@ -491,14 +491,14 @@ onShow(() => loadPets())
}
.pet-info { flex: 1; min-width: 0; }
.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-history-link {
display: block;
margin-top: 8px;
font-size: 13px;
font-weight: 600;
color: #2db96d;
color: var(--c-brand);
}
.fab-pet {
@ -508,7 +508,7 @@ onShow(() => loadPets())
width: 56px;
height: 56px;
border-radius: 28px;
background: #2db96d;
background: var(--c-brand);
box-shadow: 0 6px 20px rgba(45, 185, 109, 0.42);
display: flex;
align-items: center;
@ -562,5 +562,5 @@ onShow(() => loadPets())
overflow: hidden;
}
.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>

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

@ -152,9 +152,9 @@ onShow(() => loadReports())
border-radius: 14px;
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-count { font-weight: 700; color: #2db96d; }
.hero-count { font-weight: 700; color: var(--c-brand); }
.placeholder-icon {
width: 36px;
height: 36px;
@ -245,7 +245,7 @@ onShow(() => loadReports())
width: 56px;
height: 56px;
border-radius: 28px;
background: #2db96d;
background: var(--c-brand);
box-shadow: 0 6px 20px rgba(45, 185, 109, 0.42);
display: flex;
align-items: center;

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

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

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

@ -178,7 +178,7 @@ const initials = computed(() => {
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 idx = (userInfo.value.name?.charCodeAt(0) || 0) % COLORS.length
return { background: COLORS[idx] }
@ -402,7 +402,7 @@ onUnmounted(() => {
.role-pill.hero-role.role-staff,
.role-pill.role-staff {
background: #ecfdf3;
color: #166534;
color: var(--c-brand-heading);
}
.role-pill.hero-role.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 class="sched-hero">
<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 class="sched-hero-text">
<text class="sched-hero-title">时段一览</text>
@ -68,6 +68,7 @@
<script setup>
import { ref, computed, onMounted } from 'vue'
import { BRAND_HEADING_2 } from '../../constants/designTokens.js'
import AppIcon from '../../components/AppIcon.vue'
import { getScheduleDay, createScheduleBlock, deleteScheduleBlock } from '../../api/index.js'
import { getStoreSession, getUserSession } from '../../utils/session.js'
@ -337,7 +338,7 @@ onMounted(() => {
text-align: center;
font-size: 22px;
font-weight: 700;
color: #2db96d;
color: var(--c-brand);
line-height: 40px;
}
.sched-date-mid {
@ -431,7 +432,7 @@ onMounted(() => {
}
.sched-empty {
font-size: 14px;
color: #2db96d;
color: var(--c-brand);
font-weight: 600;
}
.sched-empty--past {

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

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

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

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

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

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

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

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

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

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

6
src/utils/reportPosterDraw.js
View File

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

4
src/views/ReportView.vue
View File

@ -358,7 +358,7 @@ onMounted(() => loadReport())
.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); }
.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;
text-align: center; color: #fff;
border-radius: 0 0 16px 16px;
@ -428,7 +428,7 @@ onMounted(() => loadReport())
box-shadow: 0 4px 14px rgba(22, 163, 74, 0.15);
}
.staff-avatar--ph {
background: linear-gradient(145deg, #86efac, #22c55e);
background: linear-gradient(145deg, var(--c-brand-soft), var(--c-brand-mid));
display: flex;
align-items: center;
justify-content: center;