xuchao/pingxiangcard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 我的页面菜单优化 + 布局调整

Browse Source 
- 删除：我的年卡、使用记录入口
- 新增：使用规则、常见问题、客服热线入口
- 客服热线点击直接拨号
- Hero区域高度360→280rpx，减少顶部留白
- 菜单上移至-60rpx，整体更紧凑

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
jacobxu666
2026-06-25 14:26:06 +08:00
co-authored by Claude
parent 101e94fdc7
commit 39c85593ce
1 changed files with 78 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/profile/index.vue
+79 -44
View File
@@ -23,13 +23,6 @@
<!-- 功能菜单 -->
<view class="menu-section">
<view class="menu-card">
<view class="menu-item" @click="goTo('/packages/user/pages/card/bind')">
<view class="menu-icon-wrap menu-icon-wrap--primary">
<view class="icon-card" />
</view>
<text class="menu-text">我的年卡</text>
<view class="menu-chevron" />
</view>
<view class="menu-item" @click="showComingSoon">
<view class="menu-icon-wrap menu-icon-wrap--warning">
<view class="icon-order" />
@@ -37,11 +30,25 @@
<text class="menu-text">订单管理</text>
<view class="menu-chevron" />
</view>
<view class="menu-item menu-item--last" @click="showComingSoon">
<view class="menu-icon-wrap menu-icon-wrap--success">
<view class="icon-history" />
<view class="menu-item" @click="showComingSoon">
<view class="menu-icon-wrap menu-icon-wrap--primary">
<view class="icon-rule" />
</view>
<text class="menu-text">使用记录</text>
<text class="menu-text">使用规则</text>
<view class="menu-chevron" />
</view>
<view class="menu-item" @click="showComingSoon">
<view class="menu-icon-wrap menu-icon-wrap--success">
<view class="icon-faq" />
</view>
<text class="menu-text">常见问题</text>
<view class="menu-chevron" />
</view>
<view class="menu-item menu-item--last" @click="callService">
<view class="menu-icon-wrap menu-icon-wrap--error">
<view class="icon-phone" />
</view>
<text class="menu-text">客服热线</text>
<view class="menu-chevron" />
</view>
</view>
@@ -83,6 +90,8 @@ function handleLogout() {
}
function showComingSoon() { uni.showToast({ title: '即将上线，敬请期待', icon: 'none' }) }
function callService() { uni.makePhoneCall({ phoneNumber: '400-123-0101' }) }
</script>
<style lang="scss" scoped>
@@ -94,7 +103,7 @@ function showComingSoon() { uni.showToast({ title: '即将上线，敬请期待'
/* Hero header */
.profile-hero {
position: relative;
height: 360rpx;
height: 280rpx;
overflow: hidden;
}
@@ -124,7 +133,7 @@ function showComingSoon() { uni.showToast({ title: '即将上线，敬请期待'
z-index: 2;
display: flex;
align-items: center;
padding: $spacing-12 $spacing-4 $spacing-4;
padding: $spacing-10 $spacing-4 $spacing-4;
}
.avatar-wrap {
@@ -166,7 +175,7 @@ function showComingSoon() { uni.showToast({ title: '即将上线，敬请期待'
/* Menu section */
.menu-section {
padding: $spacing-3;
margin-top: -40rpx;
margin-top: -60rpx;
position: relative;
z-index: 3;
}
@@ -215,27 +224,13 @@ function showComingSoon() { uni.showToast({ title: '即将上线，敬请期待'
&--success {
background: $uv-success-light;
}
&--error {
background: $uv-error-light;
}
}
/* CSS icons */
.icon-card {
width: 28rpx;
height: 20rpx;
border: 3rpx solid $uv-primary;
border-radius: 4rpx;
position: relative;
&::after {
content: '';
position: absolute;
top: 6rpx;
left: 0;
width: 100%;
height: 3rpx;
background: $uv-primary;
}
}
.icon-order {
width: 22rpx;
height: 26rpx;
@@ -264,7 +259,35 @@ function showComingSoon() { uni.showToast({ title: '即将上线，敬请期待'
}
}
.icon-history {
.icon-rule {
width: 22rpx;
height: 26rpx;
border: 3rpx solid $uv-primary;
border-radius: 4rpx;
position: relative;
&::before {
content: '';
position: absolute;
top: 5rpx;
left: 4rpx;
width: 10rpx;
height: 3rpx;
background: $uv-primary;
}
&::after {
content: '';
position: absolute;
top: 12rpx;
left: 4rpx;
width: 10rpx;
height: 3rpx;
background: $uv-primary;
}
}
.icon-faq {
width: 24rpx;
height: 24rpx;
border: 3rpx solid $uv-success;
@@ -272,23 +295,35 @@ function showComingSoon() { uni.showToast({ title: '即将上线，敬请期待'
position: relative;
&::before {
content: '';
content: '?';
position: absolute;
top: 4rpx;
left: 8rpx;
width: 3rpx;
height: 8rpx;
background: $uv-success;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16rpx;
font-weight: 700;
color: $uv-success;
line-height: 1;
}
}
&::after {
.icon-phone {
width: 18rpx;
height: 26rpx;
border: 3rpx solid $uv-error;
border-radius: 6rpx;
position: relative;
&::before {
content: '';
position: absolute;
top: 9rpx;
left: 8rpx;
width: 6rpx;
bottom: 3rpx;
left: 50%;
transform: translateX(-50%);
width: 8rpx;
height: 3rpx;
background: $uv-success;
background: $uv-error;
border-radius: 2rpx;
}
}