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

26
packages/app/src/components/BookingConfirmPopup.vue
View File

@@ -212,7 +212,7 @@ function handleMaskTap() {
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
background: $primary-selected-bg;
border-radius: 50%;
}
@@ -250,7 +250,7 @@ function handleMaskTap() {
.divider {
height: 1rpx;
background: #f0f0f0;
background: $primary-border;
margin: 8rpx 0 28rpx;
}
@@ -285,14 +285,14 @@ function handleMaskTap() {
align-items: center;
padding: 24rpx 20rpx;
border-radius: 16rpx;
border: 2rpx solid #f0f0f0;
background: #fafafa;
border: 2rpx solid $primary-border;
background: $primary-bg;
gap: 20rpx;
transition: border-color 0.15s, background 0.15s;
&.selected {
border-color: #c9a87c;
background: #fffbf5;
border-color: $primary-dark;
background: $primary-selected-bg;
}
}
@@ -300,7 +300,7 @@ function handleMaskTap() {
width: 60rpx;
height: 60rpx;
border-radius: 14rpx;
background: linear-gradient(135deg, #d4b896, #c9a87c);
background: linear-gradient(135deg, $primary-color, $primary-dark);
display: flex;
align-items: center;
justify-content: center;
@@ -333,7 +333,7 @@ function handleMaskTap() {
width: 44rpx;
height: 44rpx;
border-radius: 50%;
background: #c9a87c;
background: $primary-dark;
display: flex;
align-items: center;
justify-content: center;
@@ -358,7 +358,7 @@ function handleMaskTap() {
/* Deduction tip */
.deduction-tip {
background: #fffbf0;
background: $primary-selected-bg;
border-radius: 12rpx;
padding: 16rpx 20rpx;
margin-bottom: 28rpx;
@@ -366,7 +366,7 @@ function handleMaskTap() {
.deduction-text {
font-size: 24rpx;
color: #c9a87c;
color: $primary-dark;
line-height: 1.5;
}
@@ -382,7 +382,7 @@ function handleMaskTap() {
flex: 1;
height: 88rpx;
border-radius: 44rpx;
border: 2rpx solid #e0e0e0;
border: 2rpx solid $primary-border;
display: flex;
align-items: center;
justify-content: center;
@@ -402,7 +402,7 @@ function handleMaskTap() {
flex: 2;
height: 88rpx;
border-radius: 44rpx;
background: #c9a87c;
background: linear-gradient(135deg, $primary-color, $primary-dark);
display: flex;
align-items: center;
justify-content: center;
@@ -412,7 +412,7 @@ function handleMaskTap() {
}
&.disabled {
background: #e0e0e0;
background: $primary-border;
}
}

4
packages/app/src/components/BrandBanner.vue
View File

@@ -54,7 +54,7 @@ onMounted(() => {
width: 100%;
height: 580rpx;
overflow: hidden;
background: #2a2a2a;
background: linear-gradient(160deg, #E1F4FA 0%, $primary-color 50%, $primary-dark 100%);
}
.banner-bg {
@@ -71,7 +71,7 @@ onMounted(() => {
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
background: rgba($primary-dark, 0.25);
}
.status-bar {

7
packages/app/src/components/CardShop.vue
View File

@@ -189,7 +189,7 @@ function truncate(str: string, maxLen: number): string {
}
.thumb--trial .thumb-fallback {
background: linear-gradient(135deg, #7d6608, #c9a87c);
background: linear-gradient(135deg, #5a7a8a, $primary-dark);
}
.thumb-name {
@@ -309,11 +309,6 @@ function truncate(str: string, maxLen: number): string {
}
}
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ── Empty state ── */
.empty-state {
padding: 80rpx;

8
packages/app/src/components/DateSelector.vue
View File

@@ -53,7 +53,7 @@ function handleSelect(date: string) {
.date-selector {
background: #fff;
padding: 16rpx 0 20rpx;
border-bottom: 1rpx solid #f0ece8;
border-bottom: 1rpx solid $primary-border;
.scroll {
width: 100%;
@@ -75,7 +75,7 @@ function handleSelect(date: string) {
min-width: 88rpx;
padding: 16rpx 12rpx;
border-radius: 16rpx;
background: #f7f4f0;
background: $primary-bg;
gap: 4rpx;
transition: background 0.2s;
flex-shrink: 0;
@@ -100,7 +100,7 @@ function handleSelect(date: string) {
}
&.active {
background: #c9a87c;
background: $primary-color;
.weekday {
color: rgba(255, 255, 255, 0.85);
@@ -117,7 +117,7 @@ function handleSelect(date: string) {
&.today:not(.active) {
.weekday {
color: #c9a87c;
color: $primary-dark;
font-weight: 600;
}
}

10
packages/app/src/components/QuickEntry.vue
View File

@@ -244,15 +244,15 @@ const lowestRemainingTimes = computed(() => {
}
.login-btn {
background: #c9a87c;
background: $primary-dark;
}
.trial-btn {
background: #c9a87c;
background: $primary-dark;
}
.book-btn {
background: #c9a87c;
background: $primary-dark;
}
.renew-btn {
@@ -278,7 +278,7 @@ const lowestRemainingTimes = computed(() => {
}
.trial-badge {
background: #c9a87c;
background: $primary-dark;
color: #1a1a2e;
}
@@ -313,7 +313,7 @@ const lowestRemainingTimes = computed(() => {
.renew-tip-action {
font-size: 24rpx;
color: #c9a87c;
color: $primary-dark;
font-weight: 600;
flex-shrink: 0;
}

14
packages/app/src/components/SlotCard.vue
View File

@@ -116,8 +116,8 @@ const capacityClass = computed(() => {
}
&--booked {
background: #fffdf8;
box-shadow: 0 4rpx 24rpx rgba(201, 168, 124, 0.12);
background: #f0f7fb;
box-shadow: 0 4rpx 24rpx rgba($primary-dark, 0.12);
}
}
@@ -127,7 +127,7 @@ const capacityClass = computed(() => {
top: 0;
bottom: 0;
width: 8rpx;
background: linear-gradient(180deg, #d4b896, #c9a87c);
background: linear-gradient(180deg, $primary-color, $primary-dark);
border-radius: 24rpx 0 0 24rpx;
}
@@ -262,8 +262,8 @@ const capacityClass = computed(() => {
}
&.btn-book {
background: linear-gradient(135deg, #d4b896, #c9a87c);
box-shadow: 0 4rpx 16rpx rgba(201, 168, 124, 0.3);
background: linear-gradient(135deg, $primary-color, $primary-dark);
box-shadow: 0 4rpx 16rpx rgba($primary-dark, 0.3);
.btn-text { color: #fff; }
@@ -295,7 +295,7 @@ const capacityClass = computed(() => {
.badge-booked {
height: 52rpx;
padding: 0 24rpx;
background: linear-gradient(135deg, #fff8ee, #fff4e0);
background: linear-gradient(135deg, $primary-selected-bg, $primary-border);
border-radius: 26rpx;
display: flex;
align-items: center;
@@ -303,7 +303,7 @@ const capacityClass = computed(() => {
.badge-text {
font-size: 24rpx;
color: #c9a87c;
color: $primary-dark;
font-weight: 600;
}
}

6
packages/app/src/components/TimePeriodFilter.vue
View File

@@ -53,7 +53,7 @@ function handleChange(key: PeriodKey) {
flex-direction: row;
background: #fff;
padding: 0 24rpx;
border-bottom: 1rpx solid #f0ece8;
border-bottom: 1rpx solid $primary-border;
.tab-item {
flex: 1;
@@ -71,7 +71,7 @@ function handleChange(key: PeriodKey) {
&.active {
.tab-label {
color: #c9a87c;
color: $primary-dark;
font-weight: 600;
}
@@ -83,7 +83,7 @@ function handleChange(key: PeriodKey) {
transform: translateX(-50%);
width: 40rpx;
height: 4rpx;
background: #c9a87c;
background: $primary-dark;
border-radius: 2rpx;
}
}

4
packages/app/src/components/UpcomingBooking.vue
View File

@@ -119,7 +119,7 @@ function goToBookings() {
.section-more {
font-size: 26rpx;
color: #c9a87c;
color: $primary-dark;
}
.booking-card {
@@ -150,7 +150,7 @@ function goToBookings() {
.date-month {
font-size: 22rpx;
color: #c9a87c;
color: $primary-dark;
margin-top: 4rpx;
}

2
packages/app/src/components/UserCard.vue
View File

@@ -148,7 +148,7 @@ function handleLogin() {
<style lang="scss" scoped>
.user-card {
background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #ec4899 100%);
background: linear-gradient(160deg, #E1F4FA 0%, $primary-color 50%, $primary-dark 100%);
border-radius: 0 0 40rpx 40rpx;
overflow: hidden;