Skip to content

Y
yd-csf-h5
Commit 6c1d2f6d by Sweet Zhang
Options

主题颜色修改

parent 50de254e
Showing with 58 additions and 45 deletions
src/App.vue
......@@ -19,9 +19,10 @@ const hideTabBar = computed(() => route.path === '/auth/callback')
<template>
<div class="min-h-screen bg-slate-50 text-slate-900">
<header class="sticky top-0 z-20 border-b border-slate-200/70 bg-white/80 backdrop-blur-lg">
<div class="h-[3px] bg-brand-600"></div>
<header class="sticky top-0 z-20 border-b border-silver-200/70 bg-white/80 backdrop-blur-lg">
<div class="mx-auto flex max-w-3xl items-center justify-between px-4 py-3">
<div class="text-[15px] font-semibold tracking-tight">{{ t('app.title') }}</div>
<div class="text-[15px] font-semibold tracking-tight text-brand-700">{{ t('app.title') }}</div>
<LoginBadge />
</div>
</header>
......@@ -32,7 +33,7 @@ const hideTabBar = computed(() => route.path === '/auth/callback')
<nav
v-if="!hideTabBar"
class="fixed inset-x-0 bottom-0 z-20 border-t border-slate-200/70 bg-white/90 pb-safe backdrop-blur-lg"
class="fixed inset-x-0 bottom-0 z-20 border-t border-silver-200/70 bg-white/90 pb-safe backdrop-blur-lg"
>
<div class="mx-auto grid max-w-3xl grid-cols-4 px-2 py-1.5">
<RouterLink
......@@ -40,7 +41,7 @@ const hideTabBar = computed(() => route.path === '/auth/callback')
:key="tab.name"
:to="tab.path"
class="flex flex-col items-center rounded-xl py-2 text-xs font-medium transition-colors"
:class="route.path === tab.path ? 'text-brand-700' : 'text-slate-500 hover:text-slate-700'"
:class="route.path === tab.path ? 'text-brand-700' : 'text-silver-500 hover:text-silver-700'"
>
<span
class="rounded-full px-3 py-1 transition-colors"
......
src/components/common/Button.vue
......@@ -10,7 +10,7 @@ defineProps<{
class="rounded-full px-4 py-2 text-sm font-medium transition-all hover:brightness-[0.98] active:scale-[0.98] disabled:opacity-50"
:class="{
'bg-brand-600 text-white shadow-sm': variant === 'primary',
'bg-slate-100 text-slate-700 hover:bg-slate-200': variant === 'secondary' || !variant,
'bg-silver-100 text-silver-700 hover:bg-silver-200': variant === 'secondary' || !variant,
'text-brand-600': variant === 'ghost'
}"
:disabled="disabled"
......
src/components/common/Skeleton.vue
<template>
<div class="space-y-3 animate-pulse">
<div class="h-24 rounded-2xl border border-slate-100 bg-slate-100/80"></div>
<div class="h-[72px] rounded-2xl border border-slate-100 bg-slate-100/80"></div>
<div class="h-[72px] rounded-2xl border border-slate-100 bg-slate-100/80"></div>
<div class="h-24 rounded-2xl border border-silver-100 bg-silver-100/80"></div>
<div class="h-[72px] rounded-2xl border border-silver-100 bg-silver-100/80"></div>
<div class="h-[72px] rounded-2xl border border-silver-100 bg-silver-100/80"></div>
</div>
</template>
src/components/feature/CustomerCard.vue
......@@ -19,7 +19,7 @@ function toneOf(stage: CustomerStage): 'success' | 'warning' | 'neutral' | 'dang
</script>
<template>
<div class="rounded-2xl border border-slate-200/80 bg-white p-4 shadow-card">
<div class="rounded-2xl border border-silver-200 bg-white p-4 shadow-card">
<div class="flex items-center justify-between gap-3">
<div class="truncate text-sm font-medium tracking-tight text-slate-900">{{ customer.name }}</div>
<Badge :tone="toneOf(customer.stage)">{{ t(`customerStage.${customer.stage}`) }}</Badge>
......
src/components/feature/LoginBadge.vue
......@@ -20,7 +20,7 @@ function toggleLocale() {
<template>
<div class="flex items-center gap-2">
<button
class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600 transition-colors hover:bg-slate-200"
class="rounded-full bg-silver-100 px-2.5 py-1 text-xs font-medium text-silver-600 transition-colors hover:bg-silver-200"
@click="toggleLocale"
>
{{ isHant ? t('lang.zhHans') : t('lang.zhHant') }}
......
src/components/feature/MetricCard.vue
......@@ -9,10 +9,11 @@ defineProps<{
<template>
<div
class="rounded-2xl border border-slate-200/80 bg-white shadow-card transition-shadow hover:shadow-soft"
:class="feature ? 'p-5' : 'p-4'"
class="rounded-2xl border border-silver-200 bg-white shadow-card transition-shadow hover:shadow-soft"
:class="feature ? 'overflow-hidden p-5' : 'border-silver-200 p-4'"
>
<div class="text-xs text-slate-500">{{ label }}</div>
<div v-if="feature" class="-mx-5 -mt-5 mb-4 h-1 bg-brand-600"></div>
<div class="text-xs text-silver-500">{{ label }}</div>
<!-- 金额无空格不可断行，字号随屏宽伸缩，防止小屏（小程序 web-view）溢出卡片 -->
<div
class="tnum mt-2 font-semibold tracking-tight text-slate-900"
......
src/components/feature/PipelineCard.vue
......@@ -11,14 +11,14 @@ const { t } = useI18n()
/** 失效/保留不应当作待发金额：配色按语义状态分流 */
function statusClass(status: PipelineItem['status']): string {
if (status === 'LAPSED') return 'text-rose-600'
if (status === 'LAPSED') return 'text-brand-600'
if (status === 'RETAINED') return 'text-slate-500'
return 'text-amber-600'
}
</script>
<template>
<div class="rounded-2xl border border-slate-200/80 bg-white p-4 shadow-card">
<div class="rounded-2xl border border-silver-200 bg-white p-4 shadow-card">
<div class="flex items-center justify-between">
<div>
<div class="text-sm font-medium tracking-tight">{{ item.policyNo }}</div>
......
src/components/feature/PolicyCard.vue
......@@ -16,7 +16,7 @@ const { t } = useI18n()
<template>
<button
class="flex w-full items-center justify-between rounded-2xl border border-slate-200/80 bg-white p-4 text-left shadow-card transition-all hover:border-slate-300 hover:shadow-soft active:scale-[0.99]"
class="flex w-full items-center justify-between rounded-2xl border border-silver-200 bg-white p-4 text-left shadow-card transition-all hover:border-silver-300 hover:shadow-soft active:scale-[0.99]"
@click="emit('select', policy.policyNo)"
>
<div>
......
src/components/feature/StatementDetail.vue
......@@ -12,38 +12,38 @@ const { t } = useI18n()
<template>
<div class="space-y-4">
<section class="rounded-2xl border border-slate-200/80 bg-white p-4 shadow-card">
<section class="rounded-2xl border border-silver-200 bg-white p-4 shadow-card">
<div class="grid grid-cols-2 gap-3 text-sm">
<div>
<div class="text-xs text-slate-500">{{ t('statement.gross') }}</div>
<div class="text-xs text-silver-500">{{ t('statement.gross') }}</div>
<div class="tnum mt-1 font-medium">{{ formatHkd(detail.grossAmount) }}</div>
</div>
<div>
<div class="text-xs text-slate-500">{{ t('statement.mpf') }}</div>
<div class="text-xs text-silver-500">{{ t('statement.mpf') }}</div>
<div class="tnum mt-1 font-medium">{{ formatHkd(detail.mpfAmount) }}</div>
</div>
<div>
<div class="text-xs text-slate-500">{{ t('statement.adjustment') }}</div>
<div class="text-xs text-silver-500">{{ t('statement.adjustment') }}</div>
<div class="tnum mt-1 font-medium">{{ formatHkd(detail.adjustmentAmount) }}</div>
</div>
<div>
<div class="text-xs text-slate-500">{{ t('statement.net') }}</div>
<div class="tnum mt-1 font-semibold">{{ formatHkd(detail.netAmount) }}</div>
<div class="text-xs text-silver-500">{{ t('statement.net') }}</div>
<div class="tnum mt-1 font-semibold text-brand-700">{{ formatHkd(detail.netAmount) }}</div>
</div>
<div>
<div class="text-xs text-slate-500">{{ t('statement.payDate') }}</div>
<div class="text-xs text-silver-500">{{ t('statement.payDate') }}</div>
<div class="mt-1">{{ detail.payDate }}</div>
</div>
<div>
<div class="text-xs text-slate-500">{{ t('statement.bankTail') }}</div>
<div class="text-xs text-silver-500">{{ t('statement.bankTail') }}</div>
<div class="mt-1">{{ detail.bankTail }}</div>
</div>
</div>
</section>
<section class="rounded-2xl border border-slate-200/80 bg-white p-4 shadow-card">
<section class="rounded-2xl border border-silver-200 bg-white p-4 shadow-card">
<div class="mb-3 text-sm font-medium">{{ t('statement.amount') }}</div>
<div v-for="item in detail.items" :key="item.id" class="border-b border-slate-100 py-3 last:border-0">
<div v-for="item in detail.items" :key="item.id" class="border-b border-silver-100 py-3 last:border-0">
<div class="flex items-center justify-between text-sm">
<span>{{ item.customerName }}</span>
<span class="tnum font-medium">{{ formatDetailMoney(item.originalAmount, item.originalCurrency) }}</span>
......
src/components/feature/StatementList.vue
......@@ -19,7 +19,7 @@ const { t } = useI18n()
<button
v-for="statement in statements"
:key="statement.id"
class="flex w-full items-center justify-between rounded-2xl border border-slate-200/80 bg-white p-4 text-left shadow-card transition-all hover:border-slate-300 hover:shadow-soft active:scale-[0.99]"
class="flex w-full items-center justify-between rounded-2xl border border-silver-200 bg-white p-4 text-left shadow-card transition-all hover:border-silver-300 hover:shadow-soft active:scale-[0.99]"
@click="emit('select', statement.id)"
>
<div>
......
src/components/feature/TodoCard.vue
......@@ -33,7 +33,7 @@ function markDone() {
</script>
<template>
<div class="flex items-center justify-between rounded-2xl border border-slate-200/80 bg-white p-4 shadow-card">
<div class="flex items-center justify-between rounded-2xl border border-silver-200 bg-white p-4 shadow-card">
<div>
<div class="text-sm font-medium tracking-tight">{{ typeLabel }}</div>
<div class="mt-1 text-xs text-slate-500">{{ todo.customerName }} · {{ todo.policyNo }}</div>
......
src/style.css
......@@ -18,7 +18,7 @@
}
:focus-visible {
outline: 2px solid rgb(99 102 241 / 0.55);
outline: 2px solid rgb(206 14 45 / 0.45);
outline-offset: 2px;
}
}
......
src/views/HomeView.vue
......@@ -64,7 +64,7 @@ onMounted(load)
<router-link
v-if="metrics"
to="/customers"
class="mt-3 flex items-center justify-between rounded-2xl border border-slate-200/80 bg-white p-4 shadow-card transition-shadow hover:shadow-soft"
class="mt-3 flex items-center justify-between rounded-2xl border border-silver-200 bg-white p-4 shadow-card transition-shadow hover:shadow-soft"
>
<div>
<div class="text-xs text-slate-500">{{ t('metric.myCustomers') }}</div>
......@@ -79,7 +79,7 @@ onMounted(load)
</router-link>
<section class="mt-7">
<h2 class="mb-3 text-[13px] font-semibold tracking-wide text-slate-700">{{ t('dashboard.actions') }}</h2>
<h2 class="mb-3 text-[13px] font-semibold tracking-wide text-silver-600">{{ t('dashboard.actions') }}</h2>
<div class="mb-3 flex flex-wrap gap-2 text-xs text-slate-500">
<span class="rounded-full bg-slate-100 px-2.5 py-1">{{ t('todo.renewal') }} {{ countByType.renewal }}</span>
<span class="rounded-full bg-slate-100 px-2.5 py-1">{{ t('todo.lapse') }} {{ countByType.lapse }}</span>
......@@ -87,7 +87,7 @@ onMounted(load)
</div>
<div class="space-y-3">
<TodoCard v-for="todo in todos" :key="todo.id" :todo="todo" />
<div class="rounded-2xl border border-dashed border-slate-200 bg-white/60 p-4">
<div class="rounded-2xl border border-dashed border-silver-200 bg-white/60 p-4">
<div class="text-sm font-medium">{{ t('todo.claim') }}</div>
<div class="mt-1 text-xs text-slate-400">{{ t('todo.claimPlaceholder') }}</div>
</div>
......
src/views/PipelineView.vue
......@@ -53,14 +53,14 @@ onMounted(load)
v-model="policyQuery"
type="search"
:placeholder="t('pipeline.filterPolicyPlaceholder')"
class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition-colors placeholder:text-slate-400 focus:border-brand-200"
class="w-full rounded-xl border border-silver-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition-colors placeholder:text-silver-400 focus:border-brand-200"
>
</label>
<label class="block">
<span class="mb-1 block text-xs text-slate-500">{{ t('pipeline.filterMonth') }}</span>
<select
v-model="selectedMonth"
class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition-colors focus:border-brand-200"
class="w-full rounded-xl border border-silver-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition-colors focus:border-brand-200"
>
<option value="">{{ t('pipeline.allMonths') }}</option>
<option v-for="month in months" :key="month" :value="month">{{ month }}</option>
......
src/views/PoliciesView.vue
......@@ -44,14 +44,14 @@ onMounted(load)
<ApiLoader :loading="loading" :error="error" :empty="!loading && !error && policies.length === 0" @retry="load">
<div class="space-y-6">
<section>
<h2 class="mb-3 text-[13px] font-semibold tracking-wide text-slate-700">{{ t('policies.inforce') }}</h2>
<h2 class="mb-3 text-[13px] font-semibold tracking-wide text-silver-600">{{ t('policies.inforce') }}</h2>
<div class="space-y-3">
<PolicyCard v-for="policy in inforce" :key="policy.policyNo" :policy="policy" @select="openCommissions" />
</div>
</section>
<section v-if="inactive.length">
<h2 class="mb-3 text-[13px] font-semibold tracking-wide text-slate-700">{{ t('policies.inactive') }}</h2>
<h2 class="mb-3 text-[13px] font-semibold tracking-wide text-silver-600">{{ t('policies.inactive') }}</h2>
<div class="space-y-3">
<PolicyCard v-for="policy in inactive" :key="policy.policyNo" :policy="policy" @select="openCommissions" />
</div>
......
tailwind.config.js
......@@ -19,16 +19,26 @@ export default {
},
colors: {
brand: {
50: '#eef2ff',
100: '#e0e7ff',
200: '#c7d2fe',
500: '#6366f1',
600: '#4f46e5',
700: '#4338ca'
50: '#FEF0F1',
100: '#FDDDE1',
200: '#FBBAC3',
500: '#CE0E2D',
600: '#B60C28',
700: '#8E0A1F'
},
silver: {
50: '#F7F7F7',
100: '#E8E8E8',
200: '#D4D4D4',
300: '#B8B8B8',
400: '#A0A0A0',
500: '#898989',
600: '#6F6F6F',
700: '#575757'
},
success: '#059669',
warning: '#d97706',
danger: '#dc2626'
danger: '#CE0E2D'
},
boxShadow: {
card: '0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.05)',
......
vite.config.ts
......@@ -13,8 +13,9 @@ export default defineConfig({
proxy: {
// 后端 context-path 即 /csf/api，代理时不 rewrite
'/csf/api': {
target: 'http://localhost:9202',
changeOrigin: true
target: 'http://center.zuihuibi.cn',
changeOrigin: true,
secure: false,
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment