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-09-08 14:20:43 +08:00
parent 301f9ae385
commit d1f193e13e
16 changed files with 481 additions and 2829 deletions
Download Patch File Download Diff File Expand all files Collapse all files

331
packages/app/src/components/ProfileMenu.vue
View File

@@ -1,32 +1,29 @@
<template>
<view class="profile-menu">
<template v-for="item in menuItems" :key="item.key">
<!-- Separator -->
<view v-if="item.type === 'separator'" class="profile-menu__separator" />
<!-- Menu item -->
<view
v-else
class="profile-menu__item"
:class="{ 'profile-menu__item--admin': item.isAdmin }"
hover-class="profile-menu__item--hover"
hover-stay-time="150"
@tap="handleTap(item)"
>
<view
class="profile-menu__icon-wrap"
:class="[
`profile-menu__icon-wrap--${item.key}`,
{ 'profile-menu__icon-wrap--admin': item.isAdmin },
]"
/>
<text class="profile-menu__title" :class="{ 'profile-menu__title--admin': item.isAdmin }">
{{ item.title }}
</text>
<text v-if="item.badge" class="profile-menu__badge">{{ item.badge }}</text>
<text class="profile-menu__arrow">›</text>
<view class="profile-menu__shortcuts">
<view v-for="item in primaryItems" :key="item.key" class="profile-menu__shortcut"
hover-class="profile-menu__item--hover" @tap="handleTap(item)">
<view class="profile-menu__shortcut-head">
<view class="profile-menu__icon" :class="'profile-menu__icon--' + item.key" />
<text class="profile-menu__arrow">›</text>
</view>
<text class="profile-menu__shortcut-title">{{ item.title }}</text>
<text class="profile-menu__shortcut-note">{{ !requireAuth ? '登录后查看' : item.key === 'membership' ? `${activeMembershipCount || 0} 张可用` : `${upcomingBookingCount || 0} 节待上` }}</text>
</view>
</template>
</view>
<slot />
<view class="profile-menu__links">
<template v-for="item in secondaryItems" :key="item.key">
<view v-if="item.type === 'separator'" class="profile-menu__separator" />
<view v-else class="profile-menu__item" :class="{ 'profile-menu__item--admin': item.isAdmin }"
hover-class="profile-menu__item--hover" hover-stay-time="150" @tap="handleTap(item)">
<text class="profile-menu__title">{{ item.title }}</text>
<text class="profile-menu__arrow">›</text>
</view>
</template>
</view>
</view>
</template>
@@ -135,6 +132,9 @@ const menuItems = computed<MenuItem[]>(() => {
return items
})
const primaryItems = computed(() => menuItems.value.filter(item => item.key === 'membership' || item.key === 'bookings'))
const secondaryItems = computed(() => menuItems.value.filter(item => item.key !== 'membership' && item.key !== 'bookings'))
function handleTap(item: MenuItem) {
if (item.requireAuth && !props.requireAuth) {
emit('require-login')
@@ -150,269 +150,20 @@ function handleTap(item: MenuItem) {
<style lang="scss" scoped>
.profile-menu {
background: $bg-card;
border-radius: $radius-lg;
margin: $spacing-lg $spacing-lg 0;
overflow: hidden;
&__separator {
height: $spacing-sm;
background: $bg-page;
}
&__item {
display: flex;
align-items: center;
padding: $spacing-md $spacing-lg;
border-bottom: 1rpx solid $border-color;
background: $bg-card;
transition: background 0.15s;
&:last-child {
border-bottom: none;
}
&--hover {
background: #f5f5f5;
}
&--admin {
background: rgba($accent-color, 0.04);
}
}
&__icon-wrap {
width: 56rpx;
height: 56rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: $spacing-md;
position: relative;
background: rgba($brand-color, 0.06);
// ─── Pure CSS Icons ────────────────────────────────
// 会员卡 — 圆角矩形卡片 + 横线
&--membership {
background: rgba($accent-color, 0.10);
&::before {
content: '';
width: 26rpx;
height: 18rpx;
border: 2.5rpx solid $accent-color;
border-radius: 4rpx;
box-sizing: border-box;
}
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 1rpx);
width: 16rpx;
height: 0;
border-top: 2.5rpx solid $accent-color;
}
}
// 预约 — 日历（矩形 + 顶部两个小竖线）
&--bookings {
background: rgba($brand-color, 0.06);
&::before {
content: '';
width: 24rpx;
height: 22rpx;
border: 2.5rpx solid $brand-color;
border-radius: 4rpx;
border-top-width: 5rpx;
box-sizing: border-box;
}
&::after {
content: '';
position: absolute;
top: 14rpx;
left: 50%;
transform: translateX(-50%);
width: 10rpx;
height: 0;
border-top: 2.5rpx solid $brand-color;
// 用 box-shadow 模拟两个竖线
box-shadow:
-4rpx -7rpx 0 0 $brand-color,
4rpx -7rpx 0 0 $brand-color;
}
}
&--teaching-schedule {
background: rgba(93, 140, 138, 0.12);
&::before {
content: '';
width: 24rpx;
height: 22rpx;
border: 2.5rpx solid #476d72;
border-radius: 6rpx;
box-sizing: border-box;
}
&::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 12rpx;
height: 12rpx;
transform: translate(-30%, -18%) rotate(45deg);
border-top: 2.5rpx solid #476d72;
border-left: 2.5rpx solid #476d72;
}
}
&--invite {
background: rgba(255, 122, 69, 0.12);
&::before {
content: '';
width: 20rpx;
height: 20rpx;
border: 2.5rpx solid #ff7a45;
border-radius: 50%;
position: absolute;
top: 12rpx;
left: 14rpx;
box-sizing: border-box;
box-shadow: 16rpx 8rpx 0 -2rpx rgba(255, 122, 69, 0.95);
}
&::after {
content: '';
position: absolute;
width: 22rpx;
height: 12rpx;
border: 2.5rpx solid #ff7a45;
border-top: none;
border-radius: 0 0 14rpx 14rpx;
left: 17rpx;
bottom: 13rpx;
box-sizing: border-box;
}
}
// 个人信息 — 人形（圆 + 肩弧）
&--info {
background: rgba($brand-color, 0.06);
&::before {
content: '';
width: 12rpx;
height: 12rpx;
border: 2.5rpx solid $brand-color;
border-radius: 50%;
position: absolute;
top: 16rpx;
left: 50%;
transform: translateX(-50%);
box-sizing: border-box;
}
&::after {
content: '';
width: 22rpx;
height: 10rpx;
border: 2.5rpx solid $brand-color;
border-bottom: none;
border-radius: 12rpx 12rpx 0 0;
position: absolute;
bottom: 13rpx;
left: 50%;
transform: translateX(-50%);
box-sizing: border-box;
}
}
// 清除缓存 — 旋转的刷新箭头（圆弧）
&--clear {
background: rgba($text-hint, 0.08);
&::before {
content: '';
width: 20rpx;
height: 20rpx;
border: 2.5rpx solid $text-secondary;
border-radius: 50%;
border-right-color: transparent;
box-sizing: border-box;
}
&::after {
content: '';
position: absolute;
top: 14rpx;
right: 15rpx;
width: 0;
height: 0;
border-left: 5rpx solid $text-secondary;
border-top: 4rpx solid transparent;
border-bottom: 4rpx solid transparent;
}
}
// 管理中心 — 齿轮（圆 + 四个刻度）
&--admin {
background: rgba($accent-color, 0.12);
&::before {
content: '';
width: 14rpx;
height: 14rpx;
border: 2.5rpx solid $accent-color;
border-radius: 50%;
box-sizing: border-box;
}
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24rpx;
height: 24rpx;
transform: translate(-50%, -50%);
// 四条刻度线用 box-shadow 实现
background:
linear-gradient($accent-color, $accent-color) center top / 2.5rpx 5rpx no-repeat,
linear-gradient($accent-color, $accent-color) center bottom / 2.5rpx 5rpx no-repeat,
linear-gradient($accent-color, $accent-color) left center / 5rpx 2.5rpx no-repeat,
linear-gradient($accent-color, $accent-color) right center / 5rpx 2.5rpx no-repeat;
}
}
}
&__title {
flex: 1;
font-size: 30rpx;
color: $text-primary;
&--admin {
color: $accent-color;
font-weight: 500;
}
}
&__badge {
font-size: 22rpx;
line-height: 1;
font-weight: 600;
color: #8f6759;
background: linear-gradient(135deg, rgba(255, 248, 244, 0.98), rgba(241, 228, 220, 0.96));
border-radius: 999rpx;
padding: 9rpx 18rpx;
margin-right: $spacing-sm;
border: 1rpx solid rgba(192, 154, 137, 0.16);
box-shadow:
inset 0 1rpx 0 rgba(255, 255, 255, 0.92),
0 6rpx 16rpx rgba(143, 103, 89, 0.12);
}
&__arrow {
font-size: 36rpx;
color: $text-hint;
line-height: 1;
transform: scaleX(0.6);
transform-origin: center;
}
&__shortcuts { display: flex; gap: 20rpx; margin: 24rpx 32rpx 0; }
&__shortcut { flex: 1; min-width: 0; padding: 24rpx; box-sizing: border-box; border-radius: 26rpx; background: #fff; border: 1rpx solid #eee8e3; }
&__shortcut-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16rpx; }
&__shortcut-title { display: block; font-size: 27rpx; font-weight: 500; color: #514943; }
&__shortcut-note { display: block; font-size: 22rpx; color: #8b817b; margin-top: 8rpx; }
&__icon { width: 36rpx; height: 30rpx; position: relative; box-sizing: border-box; border: 2rpx solid #9b8878; border-radius: 6rpx; }
&__icon--membership::after { content: ''; position: absolute; top: 8rpx; left: 0; right: 0; border-top: 2rpx solid #9b8878; }
&__icon--bookings { border-color: #829a8b; border-top-width: 7rpx; &::after { content: ''; position: absolute; left: 8rpx; top: 8rpx; width: 12rpx; border-top: 2rpx solid #829a8b; } }
&__links { margin: 24rpx 32rpx 0; border-radius: 26rpx; background: #fff; overflow: hidden; }
&__item { display: flex; align-items: center; gap: 20rpx; min-height: 96rpx; padding: 0 28rpx; box-sizing: border-box; border-bottom: 1rpx solid #f2ede8; &:last-child { border-bottom: none; } }
&__item--hover { background: #f4f1ec; }
&__item--admin { background: #eff3ed; .profile-menu__title { color: #617d73; } }
&__title { flex: 1; font-size: 27rpx; font-weight: 400; color: #6f655e; }
&__arrow { font-size: 30rpx; color: #b2a79e; line-height: 1; }
&__separator { height: 12rpx; background: #fbf9f6; }
}
</style>