From 33d1140fbf52cc02fa820b8fbdcdc740356f1cdc Mon Sep 17 00:00:00 2001 From: future <1360317836@qq.com> Date: Mon, 8 Jun 2026 14:54:36 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=A4=9A=E4=B8=AA=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E6=A0=B7=E5=BC=8F=E5=8F=8A=E7=BB=84=E4=BB=B6=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=EF=BC=8C=E4=BC=98=E5=8C=96=E8=AF=BE=E7=A8=8B=E3=80=81?= =?UTF-8?q?=E5=8F=91=E7=8E=B0=E3=80=81=E8=AE=AD=E7=BB=83=E3=80=81=E9=A6=96?= =?UTF-8?q?=E9=A1=B5=E7=AD=89=E6=A0=B8=E5=BF=83=E9=A1=B5=E9=9D=A2=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- gym-manage-uniapp/common/style/base.css | 101 ++++++++++++++-- .../style/memberInfo/member-info-page.css | 3 +- .../components/index/BannerSwiper.vue | 112 +++++++++++------- gym-manage-uniapp/pages/course/index.vue | 37 +++--- gym-manage-uniapp/pages/discover/index.vue | 26 ++-- gym-manage-uniapp/pages/index/index.vue | 4 +- gym-manage-uniapp/pages/train/index.vue | 26 ++-- 7 files changed, 222 insertions(+), 87 deletions(-) diff --git a/gym-manage-uniapp/common/style/base.css b/gym-manage-uniapp/common/style/base.css index 543d12a..4578b2b 100644 --- a/gym-manage-uniapp/common/style/base.css +++ b/gym-manage-uniapp/common/style/base.css @@ -1,25 +1,37 @@ /** * ============================================ * 健身房管理系统小程序 - 全局配色变量 - * 主题：活力运动风格 - * 主色调：深蓝专业 + 活力橙热情 + * 主题：清新健康运动风格 + * 主色调：浅蓝渐变 + 活力橙点缀 * 兼容暗色/浅色模式基础，保证可访问性 * ============================================ */ :root { - /* ========== 主品牌色 ========== */ - --primary-dark: #0B2B4B; /* 深蓝主色 - 用于头部导航栏、重要按钮、品牌标识，体现专业信赖感 */ - --primary-deep: #1A4A6F; /* 中深蓝色 - 用于hover状态、次级按钮、图标点缀，增加层次感 */ - --primary-light: #2C6288; /* 浅蓝色（预留）- 用于选中态或辅助背景，保持和谐渐变 */ + /* ========== 主品牌色（清新浅蓝色系）========== */ + --primary-dark: #0B2B4B; /* 深蓝主色 - 用于重要文字、品牌标识，体现专业信赖感 */ + --primary-deep: #1A4A6F; /* 中深蓝色 - 用于hover状态、次级按钮、图标点缀，增加层次感 */ - /* ========== 强调/行动色 ========== */ + /* 主页主题浅蓝渐变色系 */ + --primary-sky-100: #D6EEF8; /* 最浅蓝 - 渐变起始色，清新自然 */ + --primary-sky-200: #E4F2FA; /* 浅蓝 - 渐变第二层 */ + --primary-sky-300: #EEF6FB; /* 淡蓝 - 渐变第三层 */ + --primary-sky-400: #F5FAFD; /* 微蓝 - 渐变第四层 */ + --primary-sky-500: #FAFCFE; /* 极浅蓝 - 渐变第五层，接近白色 */ + + /* 光晕效果色 */ + --glow-blue-1: rgba(160, 210, 235, 0.35); /* 蓝绿色光晕 */ + --glow-blue-2: rgba(180, 220, 240, 0.3); /* 浅蓝色光晕 */ + --glow-blue-3: rgba(170, 215, 238, 0.25); /* 浅蓝绿色光晕 */ + + /* ========== 强调/行动色（活力橙）========== */ --accent-orange: #FF6B35; /* 活力橙 - 主要CTA按钮、会员标识、高亮徽章、关键数据，刺激行动力 */ --accent-orange-light: #FF8C5A; /* 浅橙色 - hover轻量背景、渐变辅助，带来温暖运动感 */ --accent-orange-dark: #E55A2B; /* 深橙色 - 按压状态或重要警告，保持色彩体系完整 */ - /* ========== 背景色系 ========== */ - --bg-light: #F9FAFE; /* 全局浅灰蓝背景 - 柔和且提升深蓝/橙色的视觉舒适度 */ + /* ========== 背景色系（主页主题）========== */ + --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; /* 浅灰辅助背景 - 分割区域或禁用态背景 */ @@ -42,6 +54,7 @@ /* ========== 渐变色 (提升活力感) ========== */ --gradient-orange: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%); /* 橙色渐变 - 会员按钮、重要徽章 */ --gradient-blue: linear-gradient(135deg, #0B2B4B 0%, #1A4A6F 100%); /* 深蓝渐变 - 头部banner或特别卡片 */ + --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%); /* 微弱渐变 - 增加细节精致度 */ /* ========== 阴影层级 ========== */ @@ -49,6 +62,7 @@ --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); /* 橙色光晕 - 增强CTA吸引力 */ + --shadow-sky-glow: 0 4px 12px rgba(160, 210, 235, 0.2); /* 蓝色光晕 - 主页效果增强 */ /* ========== 圆角规范 (柔和运动风) ========== */ --radius-sm: 12px; /* 小组件、标签圆角 */ @@ -95,18 +109,62 @@ } /* ========== 辅助类 (方便开发直接复用) ========== */ + +/* 背景色类 */ .bg-primary { background-color: var(--primary-dark); } .bg-accent { background-color: var(--accent-orange); } +.bg-gradient-sky { + background: var(--gradient-sky); +} +.bg-gradient-primary { + background: var(--bg-gradient-primary); +} +.bg-sky-100 { + background-color: var(--primary-sky-100); +} +.bg-sky-200 { + background-color: var(--primary-sky-200); +} +.bg-sky-300 { + background-color: var(--primary-sky-300); +} +.bg-sky-400 { + background-color: var(--primary-sky-400); +} +.bg-sky-500 { + background-color: var(--primary-sky-500); +} + +/* 文字色类 */ .text-primary { color: var(--primary-dark); } .text-accent { color: var(--accent-orange); } +.text-sky-100 { + color: var(--primary-sky-100); +} +.text-sky-200 { + color: var(--primary-sky-200); +} + +/* 光晕效果类 */ +.glow-blue-1 { + background: radial-gradient(circle, var(--glow-blue-1) 0%, transparent 70%); +} +.glow-blue-2 { + background: radial-gradient(circle, var(--glow-blue-2) 0%, transparent 70%); +} +.glow-blue-3 { + background: radial-gradient(circle, var(--glow-blue-3) 0%, transparent 70%); +} + +/* 按钮类 */ .btn-orange { background: var(--gradient-orange); color: white; @@ -121,10 +179,35 @@ transform: scale(0.97); background: var(--accent-orange-dark); } + +/* 卡片类 */ .card-default { background: var(--bg-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); padding: var(--spacing-md); +} +.card-sky { + background: var(--gradient-sky); + border-radius: var(--radius-md); + box-shadow: var(--shadow-sm); +} + +/* 阴影类 */ +.shadow-sky { + box-shadow: var(--shadow-sky-glow); +} + +/* 通用页面容器 */ +.page-container-sky { + min-height: 100vh; + background: var(--gradient-sky); +} + +/* 滚动容器 */ +.scroll-container-sky { + height: 100vh; + width: 100%; + background: var(--gradient-sky); } \ No newline at end of file diff --git a/gym-manage-uniapp/common/style/memberInfo/member-info-page.css b/gym-manage-uniapp/common/style/memberInfo/member-info-page.css index 3a0ba60..7474c62 100644 --- a/gym-manage-uniapp/common/style/memberInfo/member-info-page.css +++ b/gym-manage-uniapp/common/style/memberInfo/member-info-page.css @@ -4,6 +4,7 @@ overflow-x: hidden; overflow-y: auto; box-sizing: border-box; + background: var(--gradient-sky); --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; @@ -36,7 +37,7 @@ display: flex; flex-direction: column; align-items: stretch; - background-color: var(--bg-light); + background: var(--gradient-sky); box-sizing: border-box; padding-bottom: calc(120rpx + env(safe-area-inset-bottom)); } diff --git a/gym-manage-uniapp/components/index/BannerSwiper.vue b/gym-manage-uniapp/components/index/BannerSwiper.vue index 094d64f..9a6e529 100644 --- a/gym-manage-uniapp/components/index/BannerSwiper.vue +++ b/gym-manage-uniapp/components/index/BannerSwiper.vue @@ -10,14 +10,27 @@ @change="onSwiperChange" > - @@ -56,10 +69,35 @@ const banners = [ ] const currentIndex = ref(0) +// 记录每张图片的加载状态 +const imageLoaded = ref(banners.map(() => false)) const onSwiperChange = (e) => { currentIndex.value = e.detail.current } + +const previewImage = (index) => { + const urls = banners.map(banner => banner.image) + uni.previewImage({ + urls: urls, + current: urls[index], + indicator: 'default', + loop: true + }) +} + +// 图片加载成功回调 +const onImageLoad = (index) => { + imageLoaded.value[index] = true + console.log(`图片 ${index} 加载完成`) +} + +// 图片加载失败回调 +const onImageError = (index) => { + console.error(`图片 ${index} 加载失败`) + // 可选：设置默认占位图 + // banners[index].image = '默认图片URL' +}