diff --git a/gym-manage-uniapp/pages/index/index.vue b/gym-manage-uniapp/pages/index/index.vue
index 35b86d2..6fc6d52 100644
--- a/gym-manage-uniapp/pages/index/index.vue
+++ b/gym-manage-uniapp/pages/index/index.vue
@@ -4,8 +4,8 @@
-
-
+
+
-
-
-
-
-
-
+
@@ -56,13 +51,34 @@ const handHeight = ref(0)
const scrollDistance = ref(0)
const isRefreshing = ref(false)
+// 获取可视窗口高度
+const windowHeight = ref(0)
+// 获取整个滚动内容的高度
+const scrollContentHeight = ref(0)
+
// 滚动监听
const handleScroll = (e) => {
const distance = e.detail.scrollTop
scrollDistance.value = distance
- // 控制白色块显示/隐藏
- isShow.value = distance > 238
+ // 获取滚动容器的高度（可视区域高度）
+ const scrollViewHeight = e.detail.scrollHeight
+ scrollContentHeight.value = scrollViewHeight
+
+ // 计算滚动百分比
+ // 滚动百分比 = 当前滚动距离 / (内容总高度 - 可视区域高度) * 100
+ const maxScrollDistance = scrollContentHeight.value - windowHeight.value
+ let scrollPercent = 0
+
+ if (maxScrollDistance > 0) {
+ scrollPercent = (distance / maxScrollDistance) * 100
+ }
+
+ console.log(`滚动距离: ${distance}, 滚动百分比: ${scrollPercent.toFixed(2)}%`)
+
+ // 当滚动超过 10% 时显示白色块（你可以调整这个百分比）
+ const SHOW_THRESHOLD = 40 // 10% 的阈值，可以根据需要调整
+ isShow.value = scrollPercent > SHOW_THRESHOLD
}
// 下拉刷新处理
@@ -101,10 +117,30 @@ onMounted(() => {
setTimeout(() => {
loading.value = false
}, 1500)
+
// 获取胶囊按钮高度
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
const navTotalHeight = menuButtonInfo.top + menuButtonInfo.height
- handHeight.value = navTotalHeight * 2
+ handHeight.value = navTotalHeight * 2.5
+
+ // 获取可视窗口高度
+ uni.getSystemInfo({
+ success: (res) => {
+ windowHeight.value = res.windowHeight
+ console.log('可视窗口高度:', windowHeight.value)
+ }
+ })
+
+ // 延迟获取滚动内容高度（确保DOM已渲染）
+ setTimeout(() => {
+ const query = uni.createSelectorQuery().in(this)
+ query.select('.home-page').boundingClientRect(data => {
+ if (data) {
+ scrollContentHeight.value = data.height
+ console.log('内容总高度:', scrollContentHeight.value)
+ }
+ }).exec()
+ }, 500)
})
@@ -144,13 +180,12 @@ onMounted(() => {
z-index: 1;
height: 100vh;
width: 100%;
- // background: linear-gradient(180deg, #D6EEF8 0%, #E4F2FA 15%, #EEF6FB 30%, #F5FAFD 50%, #FAFCFE 70%, #FFFFFF 100%);
}
/* 主内容区域 */
.home-page {
min-height: 100vh;
- padding-bottom: 160rpx; /* 为 TabBar 留出空间 */
+ padding-bottom: 160rpx;
}
/* 固定白色块 */
@@ -174,38 +209,6 @@ onMounted(() => {
}
.bottom-placeholder {
- height: 120rpx; /* 调整高度，避免内容被 TabBar 遮挡 */
-}
-
-/* 其他样式保持不变 */
-.glow {
- position: absolute;
- border-radius: 50%;
- pointer-events: none;
- z-index: 0;
-}
-
-.glow-1 {
- width: 400rpx;
- height: 400rpx;
- top: 60rpx;
- right: -100rpx;
- background: radial-gradient(circle, rgba(160, 210, 235, 0.35) 0%, transparent 70%);
-}
-
-.glow-2 {
- width: 300rpx;
- height: 300rpx;
- top: 500rpx;
- left: -80rpx;
- background: radial-gradient(circle, rgba(180, 220, 240, 0.3) 0%, transparent 70%);
-}
-
-.glow-3 {
- width: 250rpx;
- height: 250rpx;
- top: 900rpx;
- right: -60rpx;
- background: radial-gradient(circle, rgba(170, 215, 238, 0.25) 0%, transparent 70%);
+ height: 120rpx;
}
\ No newline at end of file
diff --git a/gym-manage-uniapp/uni.scss b/gym-manage-uniapp/uni.scss
index b9249e9..8b3a8df 100644
--- a/gym-manage-uniapp/uni.scss
+++ b/gym-manage-uniapp/uni.scss
@@ -74,3 +74,62 @@ $uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;
+
+/* ========== 健身房项目自定义颜色变量 ========== */
+
+/* 主品牌色（清新浅蓝色系）*/
+$primary-dark: #0B2B4B;
+$primary-deep: #1A4A6F;
+
+/* 主页主题浅蓝渐变色系 */
+$primary-sky-100: #D6EEF8;
+$primary-sky-200: #E4F2FA;
+$primary-sky-300: #EEF6FB;
+$primary-sky-400: #F5FAFD;
+$primary-sky-500: #FAFCFE;
+
+/* 强调/行动色（活力橙）*/
+$accent-orange: #FF6B35;
+$accent-orange-light: #FF8C5A;
+$accent-orange-dark: #E55A2B;
+
+/* 背景色系 */
+$bg-gradient-primary: linear-gradient(180deg, #D6EEF8 0%, #E4F2FA 15%, #EEF6FB 30%, #F5FAFD 50%, #FAFCFE 70%, #FFFFFF 100%);
+$bg-light: #F5FAFD;
+$bg-white: #FFFFFF;
+$bg-gray: #F2F5F9;
+
+/* 文本色系 */
+$text-dark: #1E2A3A;
+$text-muted: #5E6F8D;
+$text-light: #8A99B4;
+$text-inverse: #FFFFFF;
+
+/* 边框/分割线 */
+$border-light: #E9EDF2;
+$border-focus: #FF6B35;
+
+/* 渐变色 */
+$gradient-orange: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);
+$gradient-blue: linear-gradient(135deg, #0B2B4B 0%, #1A4A6F 100%);
+$gradient-sky: linear-gradient(180deg, #D6EEF8 0%, #E4F2FA 15%, #EEF6FB 30%, #F5FAFD 50%, #FAFCFE 70%, #FFFFFF 100%);
+$gradient-subtle: linear-gradient(120deg, #F9FAFE 0%, #FFFFFF 100%);
+
+/* 阴影层级 */
+$shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.05);
+$shadow-md: 0 12px 28px rgba(0, 0, 0, 0.08);
+$shadow-lg: 0 20px 35px rgba(0, 0, 0, 0.12);
+$shadow-orange-glow: 0 4px 12px rgba(255, 107, 53, 0.25);
+$shadow-sky-glow: 0 4px 12px rgba(160, 210, 235, 0.2);
+
+/* 圆角规范 */
+$radius-sm: 12px;
+$radius-md: 20px;
+$radius-lg: 28px;
+$radius-full: 999px;
+
+/* 字体权重 */
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-bold: 700;
+$font-weight-extrabold: 800;