feat: 我的页面菜单优化 + 布局调整
- 删除:我的年卡、使用记录入口 - 新增:使用规则、常见问题、客服热线入口 - 客服热线点击直接拨号 - Hero区域高度360→280rpx,减少顶部留白 - 菜单上移至-60rpx,整体更紧凑 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
+79
-44
@@ -23,13 +23,6 @@
|
|||||||
<!-- 功能菜单 -->
|
<!-- 功能菜单 -->
|
||||||
<view class="menu-section">
|
<view class="menu-section">
|
||||||
<view class="menu-card">
|
<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-item" @click="showComingSoon">
|
||||||
<view class="menu-icon-wrap menu-icon-wrap--warning">
|
<view class="menu-icon-wrap menu-icon-wrap--warning">
|
||||||
<view class="icon-order" />
|
<view class="icon-order" />
|
||||||
@@ -37,11 +30,25 @@
|
|||||||
<text class="menu-text">订单管理</text>
|
<text class="menu-text">订单管理</text>
|
||||||
<view class="menu-chevron" />
|
<view class="menu-chevron" />
|
||||||
</view>
|
</view>
|
||||||
<view class="menu-item menu-item--last" @click="showComingSoon">
|
<view class="menu-item" @click="showComingSoon">
|
||||||
<view class="menu-icon-wrap menu-icon-wrap--success">
|
<view class="menu-icon-wrap menu-icon-wrap--primary">
|
||||||
<view class="icon-history" />
|
<view class="icon-rule" />
|
||||||
</view>
|
</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 class="menu-chevron" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -83,6 +90,8 @@ function handleLogout() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function showComingSoon() { uni.showToast({ title: '即将上线,敬请期待', icon: 'none' }) }
|
function showComingSoon() { uni.showToast({ title: '即将上线,敬请期待', icon: 'none' }) }
|
||||||
|
|
||||||
|
function callService() { uni.makePhoneCall({ phoneNumber: '400-123-0101' }) }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@@ -94,7 +103,7 @@ function showComingSoon() { uni.showToast({ title: '即将上线,敬请期待'
|
|||||||
/* Hero header */
|
/* Hero header */
|
||||||
.profile-hero {
|
.profile-hero {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 360rpx;
|
height: 280rpx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -124,7 +133,7 @@ function showComingSoon() { uni.showToast({ title: '即将上线,敬请期待'
|
|||||||
z-index: 2;
|
z-index: 2;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: $spacing-12 $spacing-4 $spacing-4;
|
padding: $spacing-10 $spacing-4 $spacing-4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-wrap {
|
.avatar-wrap {
|
||||||
@@ -166,7 +175,7 @@ function showComingSoon() { uni.showToast({ title: '即将上线,敬请期待'
|
|||||||
/* Menu section */
|
/* Menu section */
|
||||||
.menu-section {
|
.menu-section {
|
||||||
padding: $spacing-3;
|
padding: $spacing-3;
|
||||||
margin-top: -40rpx;
|
margin-top: -60rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
}
|
}
|
||||||
@@ -215,27 +224,13 @@ function showComingSoon() { uni.showToast({ title: '即将上线,敬请期待'
|
|||||||
&--success {
|
&--success {
|
||||||
background: $uv-success-light;
|
background: $uv-success-light;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&--error {
|
||||||
|
background: $uv-error-light;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* CSS icons */
|
/* 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 {
|
.icon-order {
|
||||||
width: 22rpx;
|
width: 22rpx;
|
||||||
height: 26rpx;
|
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;
|
width: 24rpx;
|
||||||
height: 24rpx;
|
height: 24rpx;
|
||||||
border: 3rpx solid $uv-success;
|
border: 3rpx solid $uv-success;
|
||||||
@@ -272,23 +295,35 @@ function showComingSoon() { uni.showToast({ title: '即将上线,敬请期待'
|
|||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '?';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 4rpx;
|
top: 50%;
|
||||||
left: 8rpx;
|
left: 50%;
|
||||||
width: 3rpx;
|
transform: translate(-50%, -50%);
|
||||||
height: 8rpx;
|
font-size: 16rpx;
|
||||||
background: $uv-success;
|
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: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 9rpx;
|
bottom: 3rpx;
|
||||||
left: 8rpx;
|
left: 50%;
|
||||||
width: 6rpx;
|
transform: translateX(-50%);
|
||||||
|
width: 8rpx;
|
||||||
height: 3rpx;
|
height: 3rpx;
|
||||||
background: $uv-success;
|
background: $uv-error;
|
||||||
|
border-radius: 2rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user