优化首页、场馆、折扣、权益、我的、登录页面UI及交互体验
- 首页：金刚区添加文字标签、活动指南卡片自适应宽度、字体调整 - 场馆列表：去掉导航栏、添加返回按钮、优化加载提示 - 折扣列表：样式与场馆列表统一 - 场馆详情：合并信息与地址容器、添加分割线和返回按钮 - 权益页面：banner渐变圆角、统计卡片优化、空状态引导、Tab列表优化 - 我的页面：主色调统一、渐变背景、菜单样式优化 - 登录页面：协议链接可跳转、添加返回按钮 - 移除VConsole调试按钮 - 底部导航栏线条颜色调整
This commit is contained in:
jacobxu666
+99
-16
@@ -1,5 +1,15 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="page" :class="{ 'page-auth': status === 'auth' }">
|
||||
<!-- 返回按钮（顶部，非auth状态） -->
|
||||
<view class="back-btn" @click="goBack" v-if="status !== 'auth'">
|
||||
<u-icon name="arrow-left" color="#ffffff" size="40"></u-icon>
|
||||
<text class="back-text">返回</text>
|
||||
</view>
|
||||
<!-- 返回按钮（底部，auth状态） -->
|
||||
<view class="back-btn-bottom" @click="goBack" v-if="status === 'auth'">
|
||||
<image class="back-icon" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/hhrs/hhrs_back.png" mode="aspectFit"></image>
|
||||
<text class="back-text-bottom">返回上一页</text>
|
||||
</view>
|
||||
<!-- 状态1: 权益资格认证 -->
|
||||
<view v-if="status === 'auth'" class="auth-container">
|
||||
<view class="section-title">
|
||||
@@ -70,7 +80,7 @@
|
||||
</view>
|
||||
<view class="stats-divider"></view>
|
||||
<view class="stats-item">
|
||||
<text class="stats-label">剩余可用权益数</text>
|
||||
<text class="stats-label">可用权益数</text>
|
||||
<view class="stats-value-row">
|
||||
<text class="stats-number-large">10</text>
|
||||
<text class="stats-unit">个</text>
|
||||
@@ -111,6 +121,10 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="empty-state" v-if="rightsList.length === 0 && !loading">
|
||||
<image class="empty-state-img" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/hhrs/hhrs_wzj.png" mode="widthFix"></image>
|
||||
<text class="empty-state-text">暂无内容</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<scroll-view class="list-area" scroll-y @scrolltolower="loadAppointmentMore" :lower-threshold="100"
|
||||
@@ -123,6 +137,10 @@
|
||||
<text v-if="item.timeName">（{{ item.timeName }}）</text></view>
|
||||
</view>
|
||||
|
||||
<view class="empty-state" v-if="appointmentList.length === 0 && !appointmentLoading">
|
||||
<image class="empty-state-img" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/hhrs/hhrs_wzj.png" mode="widthFix"></image>
|
||||
<text class="empty-state-text">暂无内容</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view class="list-area" scroll-y @scrolltolower="loadCheckMore" :lower-threshold="100"
|
||||
v-if="currentTab==2">
|
||||
@@ -132,6 +150,10 @@
|
||||
<text>{{ item.resourceName }}</text><text style="color: #FF383C;">已使用</text></view>
|
||||
<view style="font-size: 24rpx;color: #727272;margin-top: 24rpx;">核销时间：{{ item.checkTime }}</view>
|
||||
</view>
|
||||
<view class="empty-state" v-if="checkList.length === 0 && !checkLoading">
|
||||
<image class="empty-state-img" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/hhrs/hhrs_wzj.png" mode="widthFix"></image>
|
||||
<text class="empty-state-text">暂无内容</text>
|
||||
</view>
|
||||
<view class="loading" v-if="checkLoading">
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
@@ -443,6 +465,9 @@
|
||||
uni.navigateTo({
|
||||
url: '/pages/rights/detail?id=' + item.ruleId
|
||||
})
|
||||
},
|
||||
goBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -453,8 +478,12 @@
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="less">
|
||||
.page-auth {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
/* 认证表单 */
|
||||
.auth-container {
|
||||
min-height: 100vh;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@@ -487,15 +516,12 @@
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
@@ -581,11 +607,12 @@
|
||||
/* 权益信息 - 蓝色横幅 */
|
||||
.banner-area {
|
||||
background-color: #0088ff;
|
||||
padding: 20px 16px 24px;
|
||||
padding: 80px 16px 96px;
|
||||
border-radius: 0 0 50px 50px;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 16px;
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
@@ -613,25 +640,25 @@
|
||||
}
|
||||
|
||||
.expire-text {
|
||||
font-size: 16px;
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.expire-label {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 统计卡片 */
|
||||
.stats-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
margin: -12px 12px 0;
|
||||
border-radius: 8px;
|
||||
background: #FFFFFF;
|
||||
margin: -60px 12px 0;
|
||||
border-radius: 10px;
|
||||
padding: 16px 24px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0px 4px 4px 0px #00000019;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -839,4 +866,60 @@
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.empty-state-img {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.empty-state-text {
|
||||
font-size: 16px;
|
||||
color: #999999;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* 返回按钮 */
|
||||
.back-btn {
|
||||
position: fixed;
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.back-text {
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 底部返回按钮 */
|
||||
.back-btn-bottom {
|
||||
position: fixed;
|
||||
left: 24px;
|
||||
bottom: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.back-text-bottom {
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user