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

perf: 完善新用户引导

Browse Source
This commit is contained in:
richarjiang
2026-04-06 15:50:22 +08:00
parent 66d47ec162
commit f8268cb6f6
15 changed files with 483 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -41,7 +41,9 @@
<!-- Empty -->
<view v-else-if="upcomingBookings.length === 0" class="empty-wrap">
<view class="empty-illustration">
<text class="empty-icon">&#x1F9D8;</text>
<view class="empty-circle outer" />
<view class="empty-circle inner" />
<view class="empty-dot" />
</view>
<text class="empty-title">暂无即将上课的预约</text>
<text class="empty-sub">开始预约你的普拉提课程吧</text>
@@ -117,7 +119,9 @@
<!-- Empty -->
<view v-else-if="historyBookings.length === 0" class="empty-wrap">
<view class="empty-illustration">
<text class="empty-icon">&#x1F4CB;</text>
<view class="empty-circle outer" />
<view class="empty-circle inner" />
<view class="empty-dot" />
</view>
<text class="empty-title">暂无历史记录</text>
<text class="empty-sub">已完成或取消的课程将显示在这里</text>
@@ -481,33 +485,73 @@ onMounted(() => {
align-items: center;
justify-content: center;
padding: 120rpx 40rpx;
gap: 16rpx;
gap: 0;
}
.empty-illustration {
width: 160rpx;
height: 160rpx;
border-radius: 80rpx;
background: #faf6f1;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16rpx;
position: relative;
width: 200rpx;
height: 200rpx;
margin-bottom: 56rpx;
}
.empty-icon {
font-size: 72rpx;
.empty-circle {
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&.outer {
width: 180rpx;
height: 180rpx;
border: 2rpx solid $primary-border;
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%);
opacity: 0.6;
animation: breathe 3s ease-in-out infinite 0.5s;
}
}
.empty-dot {
position: absolute;
width: 16rpx;
height: 16rpx;
border-radius: 50%;
background: $primary-dark;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: pulse 2s ease-in-out infinite;
}
.empty-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
color: $primary-dark;
letter-spacing: 2rpx;
margin-bottom: 16rpx;
}
.empty-sub {
font-size: 26rpx;
color: #999;
color: $primary-color;
letter-spacing: 1rpx;
}
@keyframes breathe {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.4; }
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); }
}
.empty-btn {