richard/mp-pilates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化主题配色

Browse Source
This commit is contained in:
richarjiang
2026-04-05 21:35:30 +08:00
parent 4633ceea8c
commit c0e0d31ae7
25 changed files with 423 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/app/src/pages/admin/card-types.vue
View File

@@ -476,7 +476,7 @@ onMounted(fetchCardTypes)
padding: 12rpx 28rpx;
}
.add-btn-text { font-size: 26rpx; font-weight: 600; color: #c9a87c; }
.add-btn-text { font-size: 26rpx; font-weight: 600; color: $primary-dark; }
/* ── Skeleton ────────────────────────────── */
.skeleton-list { padding: 0 24rpx; }
@@ -490,11 +490,6 @@ onMounted(fetchCardTypes)
animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ── Empty ───────────────────────────────── */
.empty-state {
display: flex;
@@ -529,7 +524,7 @@ onMounted(fetchCardTypes)
.header--times { background: linear-gradient(90deg, #1a1a2e, #2d2d5e); }
.header--duration { background: linear-gradient(90deg, #6c3483, #9b59b6); }
.header--trial { background: linear-gradient(90deg, #7d6608, #c9a87c); }
.header--trial { background: linear-gradient(90deg, #5a7a8a, $primary-dark); }
.ct-type-label { font-size: 22rpx; font-weight: 600; color: #ffffff; letter-spacing: 2rpx; }
@@ -555,7 +550,7 @@ onMounted(fetchCardTypes)
margin-bottom: 12rpx;
}
.ct-price { font-size: 40rpx; font-weight: 800; color: #c9a87c; }
.ct-price { font-size: 40rpx; font-weight: 800; color: $primary-dark; }
.ct-original {
font-size: 24rpx;
@@ -725,5 +720,5 @@ onMounted(fetchCardTypes)
&--loading { opacity: 0.6; pointer-events: none; }
}
.modal-confirm-text { font-size: 28rpx; font-weight: 700; color: #c9a87c; }
.modal-confirm-text { font-size: 28rpx; font-weight: 700; color: $primary-dark; }
</style>

350
packages/app/src/pages/admin/index.vue
View File

@@ -1,41 +1,147 @@
<template>
<view class="page" :style="{ paddingTop: navBarHeight }">
<CustomNavBar title="管理中心" show-back />
<!-- Stats row -->
<view class="stats-row">
<view v-if="statsLoading" class="stats-shimmer-wrap">
<view v-for="i in 3" :key="i" class="stats-shimmer" />
<!-- Stats summary card -->
<view class="stats-card-wrap">
<view class="stats-card">
<view v-if="statsLoading" class="stats-loading">
<view v-for="i in 3" :key="i" class="stat-skeleton" />
</view>
<template v-else>
<view class="stat-block">
<text class="stat-num">{{ stats.todayBookings }}</text>
<text class="stat-sub">今日预约</text>
</view>
<view class="stat-sep" />
<view class="stat-block">
<text class="stat-num">{{ stats.totalOrders }}</text>
<text class="stat-sub">总订单</text>
</view>
<view class="stat-sep" />
<view class="stat-block">
<text class="stat-num">{{ stats.totalBookings }}</text>
<text class="stat-sub">总预约</text>
</view>
</template>
</view>
<template v-else>
<view class="stat-item">
<text class="stat-value">{{ stats.todayBookings }}</text>
<text class="stat-label">今日预约</text>
</view>
<view class="stat-divider" />
<view class="stat-item">
<text class="stat-value">{{ stats.totalOrders }}</text>
<text class="stat-label">总订单</text>
</view>
<view class="stat-divider" />
<view class="stat-item">
<text class="stat-value">{{ stats.totalBookings }}</text>
<text class="stat-label">总预约</text>
</view>
</template>
</view>
<!-- Nav grid -->
<view class="nav-grid">
<view
v-for="item in navItems"
:key="item.path"
class="nav-item"
@tap="navigate(item.path)"
>
<text class="nav-icon">{{ item.icon }}</text>
<text class="nav-label">{{ item.label }}</text>
<!-- Section header: 课程管理 -->
<view class="section-header">
<text class="section-title">课程管理</text>
</view>
<!-- List: schedule -->
<view class="list">
<view class="list-item" @tap="navigate('/pages/admin/schedule')">
<view class="item-left">
<view class="item-icon-wrap icon--schedule">
<text class="item-icon-text">◇</text>
</view>
<view class="item-text-group">
<text class="item-title">排课管理</text>
<text class="item-desc">管理每周课程时段</text>
</view>
</view>
<view class="item-arrow">
<text class="arrow-text">›</text>
</view>
</view>
<view class="list-item" @tap="navigate('/pages/admin/week-template')">
<view class="item-left">
<view class="item-icon-wrap icon--template">
<text class="item-icon-text">◈</text>
</view>
<view class="item-text-group">
<text class="item-title">排课模板</text>
<text class="item-desc">设置每周课程模板</text>
</view>
</view>
<view class="item-arrow">
<text class="arrow-text">›</text>
</view>
</view>
</view>
<!-- Section header: 会员与订单 -->
<view class="section-header">
<text class="section-title">会员与订单</text>
</view>
<!-- List: members & orders -->
<view class="list">
<view class="list-item" @tap="navigate('/pages/admin/members')">
<view class="item-left">
<view class="item-icon-wrap icon--members">
<text class="item-icon-text">◎</text>
</view>
<view class="item-text-group">
<text class="item-title">会员管理</text>
<text class="item-desc">查看所有会员信息</text>
</view>
</view>
<view class="item-arrow">
<text class="arrow-text">›</text>
</view>
</view>
<view class="list-item" @tap="navigate('/pages/admin/orders')">
<view class="item-left">
<view class="item-icon-wrap icon--orders">
<text class="item-icon-text">▣</text>
</view>
<view class="item-text-group">
<text class="item-title">订单管理</text>
<text class="item-desc">查看所有订单记录</text>
</view>
</view>
<view class="item-arrow">
<text class="arrow-text">›</text>
</view>
</view>
<view class="list-item" @tap="navigate('/pages/admin/card-types')">
<view class="item-left">
<view class="item-icon-wrap icon--card">
<text class="item-icon-text">▤</text>
</view>
<view class="item-text-group">
<text class="item-title">卡种管理</text>
<text class="item-desc">设置会员卡类型</text>
</view>
</view>
<view class="item-arrow">
<text class="arrow-text">›</text>
</view>
</view>
</view>
<!-- Section header: 系统 -->
<view class="section-header">
<text class="section-title">系统</text>
</view>
<!-- List: settings -->
<view class="list">
<view class="list-item" @tap="navigate('/pages/admin/studio')">
<view class="item-left">
<view class="item-icon-wrap icon--studio">
<text class="item-icon-text">◉</text>
</view>
<view class="item-text-group">
<text class="item-title">工作室设置</text>
<text class="item-desc">工作室信息与配置</text>
</view>
</view>
<view class="item-arrow">
<text class="arrow-text">›</text>
</view>
</view>
</view>
<view style="height: 40rpx" />
</view>
</template>
@@ -53,15 +159,6 @@ const adminStore = useAdminStore()
const statsLoading = ref(false)
const stats = ref<AdminStats>({ todayBookings: 0, totalOrders: 0, totalBookings: 0 })
const navItems = [
{ icon: '📅', label: '排课管理', path: '/pages/admin/schedule' },
{ icon: '📋', label: '排课模板', path: '/pages/admin/week-template' },
{ icon: '👥', label: '会员管理', path: '/pages/admin/members' },
{ icon: '📋', label: '订单管理', path: '/pages/admin/orders' },
{ icon: '💳', label: '卡种管理', path: '/pages/admin/card-types' },
{ icon: '🏢', label: '工作室设置', path: '/pages/admin/studio' },
]
function navigate(path: string) {
uni.navigateTo({ url: path })
}
@@ -84,101 +181,168 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
/* ── Page ───────────────────────────────────── */
.page {
min-height: 100vh;
background: #1a1a2e;
padding-bottom: 60rpx;
padding-bottom: 40rpx;
}
/* ── Stats row ───────────────────────────── */
.stats-row {
display: flex;
align-items: center;
justify-content: space-around;
background: rgba(255, 255, 255, 0.06);
margin: 24rpx 24rpx 32rpx;
/* ── Stats card ─────────────────────────────── */
.stats-card-wrap {
padding: 24rpx 24rpx 8rpx;
}
.stats-card {
background: #FFFFFF;
border-radius: 20rpx;
padding: 32rpx 16rpx;
}
.stats-shimmer-wrap {
padding: 32rpx 24rpx;
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
box-shadow: 0 4rpx 20rpx rgba(180, 160, 130, 0.10);
border: 1rpx solid rgba(180, 160, 130, 0.12);
}
.stats-shimmer {
width: 120rpx;
height: 60rpx;
.stats-loading {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
.stat-skeleton {
width: 100rpx;
height: 64rpx;
border-radius: 12rpx;
background: linear-gradient(90deg, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.08) 75%);
background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
background-size: 400% 100%;
animation: shimmer 1.4s infinite;
animation: shimmer 1.6s ease infinite;
}
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
.stat-item {
.stat-block {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 8rpx;
flex: 1;
}
.stat-value {
.stat-num {
font-size: 44rpx;
font-weight: 800;
color: #c9a87c;
font-weight: 700;
color: #4A4035;
line-height: 1;
font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
}
.stat-label {
.stat-sub {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.5);
color: #A09080;
letter-spacing: 0.5rpx;
}
.stat-divider {
.stat-sep {
width: 1rpx;
height: 60rpx;
background: rgba(255, 255, 255, 0.12);
height: 56rpx;
background: rgba(180, 160, 130, 0.2);
}
/* ── Nav grid ────────────────────────────── */
.nav-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20rpx;
padding: 0 24rpx;
/* ── Section header ─────────────────────────── */
.section-header {
padding: 32rpx 24rpx 12rpx;
}
.nav-item {
background: rgba(255, 255, 255, 0.06);
.section-title {
font-size: 22rpx;
font-weight: 600;
color: #A09080;
letter-spacing: 2rpx;
text-transform: uppercase;
}
/* ── List ───────────────────────────────────── */
.list {
background: #FFFFFF;
margin: 0 24rpx;
border-radius: 20rpx;
padding: 40rpx 0;
overflow: hidden;
box-shadow: 0 4rpx 20rpx rgba(180, 160, 130, 0.08);
border: 1rpx solid rgba(180, 160, 130, 0.1);
}
.list-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 16rpx;
border: 1rpx solid rgba(201, 168, 124, 0.15);
justify-content: space-between;
padding: 28rpx 24rpx;
border-bottom: 1rpx solid rgba(180, 160, 130, 0.1);
transition: background 0.15s ease;
&:last-child {
border-bottom: none;
}
&:active {
opacity: 0.7;
background: rgba(180, 160, 130, 0.05);
}
}
.nav-icon {
font-size: 56rpx;
.item-left {
display: flex;
align-items: center;
gap: 20rpx;
}
.nav-label {
font-size: 28rpx;
.item-icon-wrap {
width: 72rpx;
height: 72rpx;
border-radius: 18rpx;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.item-icon-text {
font-size: 32rpx;
color: #FFFFFF;
line-height: 1;
}
/* Icon variants — warm muted tones */
.icon--schedule { background: linear-gradient(135deg, #8B9E7E, #7A8E6E); }
.icon--template { background: linear-gradient(135deg, #A090C0, #9080B0); }
.icon--members { background: linear-gradient(135deg, $primary-color, $primary-dark); }
.icon--orders { background: linear-gradient(135deg, #7E9EC4, #6E8EB4); }
.icon--card { background: linear-gradient(135deg, #C48E7E, #B47E6E); }
.icon--studio { background: linear-gradient(135deg, #9E9E7E, #8E8E6E); }
.item-text-group {
display: flex;
flex-direction: column;
gap: 4rpx;
}
.item-title {
font-size: 30rpx;
font-weight: 600;
color: #ffffff;
letter-spacing: 1rpx;
color: #4A4035;
letter-spacing: 0.5rpx;
}
.item-desc {
font-size: 24rpx;
color: #A09080;
}
.item-arrow {
flex-shrink: 0;
padding-left: 16rpx;
}
.arrow-text {
font-size: 40rpx;
color: rgba(180, 160, 130, 0.5);
font-weight: 300;
line-height: 1;
}
</style>

5
packages/app/src/pages/admin/members.vue
View File

@@ -273,11 +273,6 @@ onMounted(() => loadMembers(true))
animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ── Empty ───────────────────────────────── */
.empty-state {
display: flex;

13
packages/app/src/pages/admin/orders.vue
View File

@@ -293,7 +293,7 @@ onMounted(() => {
}
.stat-num.paid { color: #7A9E7E; }
.stat-num.pending { color: #C4956A; }
.stat-num.pending { color: $warning-color; }
.stat-label {
font-size: 22rpx;
@@ -359,7 +359,7 @@ onMounted(() => {
width: 6rpx;
height: 6rpx;
border-radius: 50%;
background: #B08050;
background: $accent-color;
}
/* ── List ───────────────────────────────────── */
@@ -384,11 +384,6 @@ onMounted(() => {
animation: shimmer 1.6s ease infinite;
}
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ── Empty ──────────────────────────────────── */
.empty-state {
display: flex;
@@ -527,7 +522,7 @@ onMounted(() => {
.info-value.price {
font-size: 30rpx;
font-weight: 700;
color: #B08050;
color: $accent-color;
font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
}
@@ -556,7 +551,7 @@ onMounted(() => {
.load-more-text {
font-size: 26rpx;
color: #B08050;
color: $accent-color;
font-weight: 500;
}

15
packages/app/src/pages/admin/schedule.vue
View File

@@ -445,11 +445,6 @@ onMounted(() => {
animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ── Empty state ─────────────────────────── */
.empty-state {
display: flex;
@@ -485,7 +480,7 @@ onMounted(() => {
&--template {
border-style: dashed;
border-color: #c9a87c;
border-color: $primary-dark;
background: rgba(201, 168, 124, 0.04);
}
@@ -624,7 +619,7 @@ onMounted(() => {
.add-wrap {
margin: 24rpx;
padding: 24rpx;
border: 2rpx dashed #c9a87c;
border: 2rpx dashed $primary-dark;
border-radius: 16rpx;
display: flex;
align-items: center;
@@ -636,7 +631,7 @@ onMounted(() => {
.add-text {
font-size: 28rpx;
font-weight: 600;
color: #c9a87c;
color: $primary-dark;
}
/* ── Action bar ──────────────────────────── */
@@ -667,7 +662,7 @@ onMounted(() => {
.publish-btn-text {
font-size: 30rpx;
font-weight: 700;
color: #c9a87c;
color: $primary-dark;
}
/* ── Modal ───────────────────────────────── */
@@ -758,5 +753,5 @@ onMounted(() => {
justify-content: center;
}
.modal-confirm-text { font-size: 28rpx; font-weight: 700; color: #c9a87c; }
.modal-confirm-text { font-size: 28rpx; font-weight: 700; color: $primary-dark; }
</style>

9
packages/app/src/pages/admin/slot-adjust.vue
View File

@@ -286,7 +286,7 @@ onMounted(() => {
}
.tab--active {
border-bottom: 4rpx solid #c9a87c;
border-bottom: 4rpx solid $primary-dark;
}
/* ── Panel ───────────────────────────────── */
@@ -343,11 +343,6 @@ onMounted(() => {
animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ── Empty ───────────────────────────────── */
.empty-state {
display: flex;
@@ -431,5 +426,5 @@ onMounted(() => {
&--loading { opacity: 0.6; }
}
.action-btn-text { font-size: 30rpx; font-weight: 700; color: #c9a87c; }
.action-btn-text { font-size: 30rpx; font-weight: 700; color: $primary-dark; }
</style>

9
packages/app/src/pages/admin/studio.vue
View File

@@ -268,11 +268,6 @@ onMounted(fetchStudioInfo)
animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ── Banner preview ──────────────────────── */
.banner-preview {
height: 260rpx;
@@ -303,7 +298,7 @@ onMounted(fetchStudioInfo)
.banner-logo-placeholder {
width: 100%;
height: 100%;
background: #c9a87c;
background: $primary-dark;
display: flex;
align-items: center;
justify-content: center;
@@ -398,7 +393,7 @@ onMounted(fetchStudioInfo)
.save-btn-text {
font-size: 32rpx;
font-weight: 700;
color: #c9a87c;
color: $primary-dark;
letter-spacing: 2rpx;
}
</style>

11
packages/app/src/pages/admin/week-template.vue
View File

@@ -351,7 +351,7 @@ onMounted(() => {
padding: 12rpx 28rpx;
}
.add-btn-text { font-size: 26rpx; font-weight: 600; color: #c9a87c; }
.add-btn-text { font-size: 26rpx; font-weight: 600; color: $primary-dark; }
/* ── Skeleton ────────────────────────────── */
.skeleton-list { padding: 0 24rpx; }
@@ -365,11 +365,6 @@ onMounted(() => {
animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ── Empty ───────────────────────────────── */
.empty-state {
display: flex;
@@ -456,7 +451,7 @@ onMounted(() => {
&--loading { opacity: 0.6; }
}
.save-btn-text { font-size: 30rpx; font-weight: 700; color: #c9a87c; }
.save-btn-text { font-size: 30rpx; font-weight: 700; color: $primary-dark; }
/* ── Modal ───────────────────────────────── */
.modal-mask {
@@ -529,5 +524,5 @@ onMounted(() => {
justify-content: center;
}
.modal-confirm-text { font-size: 28rpx; font-weight: 700; color: #c9a87c; }
.modal-confirm-text { font-size: 28rpx; font-weight: 700; color: $primary-dark; }
</style>

17
packages/app/src/pages/booking/index.vue
View File

@@ -281,7 +281,7 @@ onMounted(async () => {
<style lang="scss" scoped>
.booking-page {
height: 100vh;
background: #f7f4f0;
background: $primary-bg;
display: flex;
flex-direction: column;
overflow: hidden;
@@ -366,7 +366,7 @@ onMounted(async () => {
width: 80rpx;
height: 72rpx;
border-radius: 12rpx;
background: linear-gradient(90deg, #f0ece8 25%, #e8e4df 50%, #f0ece8 75%);
background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
background-size: 400% 100%;
animation: shimmer 1.4s infinite;
flex-shrink: 0;
@@ -383,7 +383,7 @@ onMounted(async () => {
width: 60%;
height: 28rpx;
border-radius: 8rpx;
background: linear-gradient(90deg, #f0ece8 25%, #e8e4df 50%, #f0ece8 75%);
background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
background-size: 400% 100%;
animation: shimmer 1.4s infinite;
}
@@ -392,7 +392,7 @@ onMounted(async () => {
width: 40%;
height: 20rpx;
border-radius: 6rpx;
background: linear-gradient(90deg, #f0ece8 25%, #e8e4df 50%, #f0ece8 75%);
background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
background-size: 400% 100%;
animation: shimmer 1.4s infinite;
}
@@ -401,17 +401,12 @@ onMounted(async () => {
width: 140rpx;
height: 72rpx;
border-radius: 36rpx;
background: linear-gradient(90deg, #f0ece8 25%, #e8e4df 50%, #f0ece8 75%);
background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
background-size: 400% 100%;
animation: shimmer 1.4s infinite;
flex-shrink: 0;
}
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ── Empty state ───────────────────────────────────── */
.empty-wrap {
display: flex;
@@ -426,7 +421,7 @@ onMounted(async () => {
width: 140rpx;
height: 140rpx;
border-radius: 50%;
background: #f0ece8;
background: $primary-border;
display: flex;
align-items: center;
justify-content: center;

17
packages/app/src/pages/card/detail.vue
View File

@@ -328,11 +328,6 @@ onMounted(() => {
&.w40 { width: 40%; }
}
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ── Error ───────────────────────────────────────────── */
.error-wrap {
display: flex;
@@ -355,7 +350,7 @@ onMounted(() => {
.retry-btn {
padding: 20rpx 48rpx;
border-radius: 40rpx;
background: #c9a87c;
background: $primary-dark;
}
.retry-text {
@@ -382,7 +377,7 @@ onMounted(() => {
}
&.hero--trial {
background: linear-gradient(135deg, #7d6608 0%, #c9a87c 100%);
background: linear-gradient(135deg, #5a7a8a 0%, $primary-dark 100%);
}
}
@@ -481,7 +476,7 @@ onMounted(() => {
width: 6rpx;
height: 28rpx;
border-radius: 3rpx;
background: #c9a87c;
background: $primary-dark;
flex-shrink: 0;
}
@@ -565,7 +560,7 @@ onMounted(() => {
.feature-dot {
font-size: 26rpx;
color: #c9a87c;
color: $primary-dark;
line-height: 1.65;
flex-shrink: 0;
}
@@ -606,7 +601,7 @@ onMounted(() => {
.summary-price {
font-size: 40rpx;
font-weight: 800;
color: #c9a87c;
color: $primary-dark;
}
.buy-btn {
@@ -631,7 +626,7 @@ onMounted(() => {
.buy-btn-text {
font-size: 32rpx;
font-weight: 700;
color: #c9a87c;
color: $primary-dark;
letter-spacing: 2rpx;
}
</style>

4
packages/app/src/pages/home/index.vue
View File

@@ -135,7 +135,7 @@ function scrollToCardShop() {
<style lang="scss" scoped>
.home-page {
min-height: 100vh;
background: #f5f5f5;
background: #FAF8F5;
padding-top: var(--nav-bar-height);
}
@@ -145,7 +145,7 @@ function scrollToCardShop() {
.section-divider {
height: 16rpx;
background: #f5f5f5;
background: #FAF8F5;
}
.bottom-padding {

15
packages/app/src/pages/profile/bookings.vue
View File

@@ -367,7 +367,7 @@ onMounted(() => {
&.active {
.tab-label {
color: #c9a87c;
color: $primary-dark;
font-weight: 600;
}
@@ -379,7 +379,7 @@ onMounted(() => {
transform: translateX(-50%);
width: 48rpx;
height: 4rpx;
background: #c9a87c;
background: $primary-dark;
border-radius: 2rpx;
}
}
@@ -456,11 +456,6 @@ onMounted(() => {
&--medium { width: 55%; }
}
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ── Empty ───────────────────────────────────────────── */
.empty-wrap {
display: flex;
@@ -501,7 +496,7 @@ onMounted(() => {
margin-top: 24rpx;
padding: 22rpx 64rpx;
border-radius: 44rpx;
background: linear-gradient(135deg, #d4b896, #c9a87c);
background: linear-gradient(135deg, $primary-color, $primary-dark);
box-shadow: 0 4rpx 16rpx rgba(201, 168, 124, 0.3);
&:active {
@@ -540,7 +535,7 @@ onMounted(() => {
width: 8rpx;
flex-shrink: 0;
&.stripe--confirmed { background: #c9a87c; }
&.stripe--confirmed { background: $primary-dark; }
&.stripe--completed { background: #66bb6a; }
&.stripe--cancelled { background: #e0e0e0; }
&.stripe--noshow { background: #ef5350; }
@@ -595,7 +590,7 @@ onMounted(() => {
font-size: 22rpx;
font-weight: 600;
.badge--confirmed & { color: #c9a87c; }
.badge--confirmed & { color: $primary-dark; }
.badge--completed & { color: #66bb6a; }
.badge--cancelled & { color: #bbb; }
.badge--noshow & { color: #ef5350; }

6
packages/app/src/pages/profile/info.vue
View File

@@ -272,7 +272,7 @@ onMounted(async () => {
width: 160rpx;
height: 160rpx;
border-radius: 50%;
background: linear-gradient(135deg, #c9a87c, #e8c88a);
background: linear-gradient(135deg, $primary-dark, $primary-color);
display: flex;
align-items: center;
justify-content: center;
@@ -369,7 +369,7 @@ onMounted(async () => {
.bind-phone-text {
font-size: 26rpx;
color: #c9a87c;
color: $primary-dark;
font-weight: 600;
text-decoration: underline;
}
@@ -437,7 +437,7 @@ onMounted(async () => {
.save-btn-text {
font-size: 32rpx;
font-weight: 700;
color: #c9a87c;
color: $primary-dark;
letter-spacing: 2rpx;
}
</style>

21
packages/app/src/pages/profile/membership.vue
View File

@@ -272,11 +272,6 @@ onMounted(() => {
animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ── Empty ───────────────────────────────────────────── */
.empty-wrap {
display: flex;
@@ -306,7 +301,7 @@ onMounted(() => {
margin-top: 12rpx;
padding: 22rpx 60rpx;
border-radius: 44rpx;
background: #c9a87c;
background: $primary-dark;
box-shadow: 0 4rpx 16rpx rgba(201, 168, 124, 0.35);
}
@@ -377,7 +372,7 @@ onMounted(() => {
&--times { background: linear-gradient(90deg, #1a1a2e, #2d2d5e); }
&--duration { background: linear-gradient(90deg, #6c3483, #9b59b6); }
&--trial { background: linear-gradient(90deg, #7d6608, #c9a87c); }
&--trial { background: linear-gradient(90deg, #5a7a8a, $primary-dark); }
&--inactive { background: #ccc; }
}
@@ -391,7 +386,7 @@ onMounted(() => {
&--times { background: linear-gradient(90deg, #1a1a2e, #2d2d5e); }
&--duration { background: linear-gradient(90deg, #6c3483, #9b59b6); }
&--trial { background: linear-gradient(90deg, #7d6608, #c9a87c); }
&--trial { background: linear-gradient(90deg, #5a7a8a, $primary-dark); }
&--inactive { background: #888; }
}
@@ -469,13 +464,13 @@ onMounted(() => {
.highlight-number {
font-size: 44rpx;
font-weight: 800;
color: #c9a87c;
color: $primary-dark;
line-height: 1;
}
.highlight-unit {
font-size: 22rpx;
color: #c9a87c;
color: $primary-dark;
font-weight: 500;
}
@@ -514,7 +509,7 @@ onMounted(() => {
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #c9a87c, #e8c88a);
background: linear-gradient(90deg, $primary-dark, $primary-color);
border-radius: 4rpx;
transition: width 0.4s ease;
}
@@ -547,7 +542,7 @@ onMounted(() => {
.fab-icon {
font-size: 36rpx;
color: #c9a87c;
color: $primary-dark;
font-weight: 300;
line-height: 1;
}
@@ -555,7 +550,7 @@ onMounted(() => {
.fab-text {
font-size: 28rpx;
font-weight: 700;
color: #c9a87c;
color: $primary-dark;
letter-spacing: 1rpx;
}