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

feat: UI 页面优化

Browse Source
This commit is contained in:
richarjiang
2026-04-14 10:07:31 +08:00
parent 52cc3a2985
commit 7ce7cef77c
8 changed files with 958 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,8 +10,8 @@
<!-- ──────────── Date & period filters ──────────── -->
<view class="filter-header">
<DateSelector v-model="selectedDate" @select="onDateSelect" />
<TimePeriodFilter v-model="selectedPeriod" @change="onPeriodChange" />
<DateSelector v-model="selectedDate" variant="booking" @select="onDateSelect" />
<TimePeriodFilter v-model="selectedPeriod" variant="booking" @change="onPeriodChange" />
</view>
<!-- ──────────── Slot list ──────────── -->
@@ -312,7 +312,9 @@ onMounted(async () => {
<style lang="scss" scoped>
.booking-page {
height: 100vh;
background: $primary-bg;
background:
radial-gradient(circle at top, rgba(255, 232, 218, 0.36), transparent 34%),
linear-gradient(180deg, #fbf7f3 0%, #f6efea 100%);
display: flex;
flex-direction: column;
overflow: hidden;
@@ -321,7 +323,7 @@ onMounted(async () => {
/* ── Status bar ───────────────────────────────────── */
.status-bar {
flex-shrink: 0;
background: #fff;
background: #fcfaf8;
}
/* ── Page header ──────────────────────────────────── */
@@ -331,20 +333,21 @@ onMounted(async () => {
display: flex;
align-items: center;
justify-content: center;
background: #fff;
background: #fcfaf8;
}
.page-title {
font-size: 34rpx;
font-weight: 600;
color: #1a1a2e;
font-weight: 700;
color: #3a2e2a;
letter-spacing: 1rpx;
}
/* ── Filter header ────────────────────────────────── */
.filter-header {
flex-shrink: 0;
background: #fff;
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
background: rgba(252, 250, 248, 0.96);
box-shadow: 0 12rpx 30rpx rgba(120, 91, 79, 0.06);
}
/* ── Scroll container ──────────────────────────────── */
@@ -358,7 +361,7 @@ onMounted(async () => {
.slot-list {
display: flex;
flex-direction: column;
padding: 24rpx 0 0;
padding: 28rpx 0 0;
}
/* ── Date summary ──────────────────────────────────── */
@@ -368,8 +371,8 @@ onMounted(async () => {
.date-summary-text {
font-size: 24rpx;
color: #999;
font-weight: 400;
color: #9d8b83;
font-weight: 500;
}
/* ── Loading skeleton ──────────────────────────────── */
@@ -382,22 +385,22 @@ onMounted(async () => {
.skeleton-card {
height: 220rpx;
border-radius: 20rpx;
background: #fff;
border-radius: 26rpx;
background: rgba(255, 255, 255, 0.88);
display: flex;
flex-direction: row;
align-items: center;
padding: 28rpx 48rpx;
gap: 20rpx;
margin: 0 24rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
box-shadow: 0 16rpx 36rpx rgba(120, 91, 79, 0.08);
}
.skeleton-time {
width: 90rpx;
height: 80rpx;
border-radius: 12rpx;
background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
background: linear-gradient(90deg, rgba(236, 225, 217, 0.9) 25%, rgba(248, 240, 233, 0.98) 50%, rgba(236, 225, 217, 0.9) 75%);
background-size: 400% 100%;
animation: shimmer 1.4s infinite;
flex-shrink: 0;
@@ -414,7 +417,7 @@ onMounted(async () => {
width: 60%;
height: 28rpx;
border-radius: 8rpx;
background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
background: linear-gradient(90deg, rgba(236, 225, 217, 0.9) 25%, rgba(248, 240, 233, 0.98) 50%, rgba(236, 225, 217, 0.9) 75%);
background-size: 400% 100%;
animation: shimmer 1.4s infinite;
}
@@ -423,7 +426,7 @@ onMounted(async () => {
width: 40%;
height: 20rpx;
border-radius: 6rpx;
background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
background: linear-gradient(90deg, rgba(236, 225, 217, 0.9) 25%, rgba(248, 240, 233, 0.98) 50%, rgba(236, 225, 217, 0.9) 75%);
background-size: 400% 100%;
animation: shimmer 1.4s infinite;
}
@@ -432,7 +435,7 @@ onMounted(async () => {
width: 100rpx;
height: 60rpx;
border-radius: 20rpx;
background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
background: linear-gradient(90deg, rgba(236, 225, 217, 0.9) 25%, rgba(248, 240, 233, 0.98) 50%, rgba(236, 225, 217, 0.9) 75%);
background-size: 400% 100%;
animation: shimmer 1.4s infinite;
flex-shrink: 0;
@@ -466,14 +469,14 @@ onMounted(async () => {
&.outer {
width: 180rpx;
height: 180rpx;
border: 2rpx solid $primary-border;
border: 2rpx solid rgba(192, 154, 137, 0.18);
animation: breathe 3s ease-in-out infinite;
}
&.inner {
width: 120rpx;
height: 120rpx;
background: linear-gradient(135deg, $primary-light 0%, $primary-color 50%, $primary-dark 100%);
background: linear-gradient(135deg, #f6e9e1 0%, #ddc1b4 50%, #b98f7d 100%);
opacity: 0.6;
animation: breathe 3s ease-in-out infinite 0.5s;
}
@@ -484,7 +487,7 @@ onMounted(async () => {
width: 16rpx;
height: 16rpx;
border-radius: 50%;
background: $primary-dark;
background: #a87d6c;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@@ -493,7 +496,7 @@ onMounted(async () => {
.empty-text {
font-size: 32rpx;
color: $primary-dark;
color: #6f605b;
font-weight: 600;
letter-spacing: 2rpx;
margin-bottom: 16rpx;
@@ -501,7 +504,7 @@ onMounted(async () => {
.empty-sub {
font-size: 26rpx;
color: $primary-color;
color: #a18a82;
letter-spacing: 1rpx;
}