修改主题色
This commit is contained in:
@@ -57,6 +57,19 @@
|
|||||||
--gradient-sky: linear-gradient(180deg, #D6EEF8 0%, #E4F2FA 15%, #EEF6FB 30%, #F5FAFD 50%, #FAFCFE 70%, #FFFFFF 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%); /* 微弱渐变 - 增加细节精致度 */
|
--gradient-subtle: linear-gradient(120deg, #F9FAFE 0%, #FFFFFF 100%); /* 微弱渐变 - 增加细节精致度 */
|
||||||
|
|
||||||
|
/* ========== TabBar 配色(清新蓝调风格)========== */
|
||||||
|
/* 引用位置:components/TabBar.vue */
|
||||||
|
--tabbar-bg: rgba(200, 225, 238, 0.8); /* TabBar背景色 - 半透明浅蓝色毛玻璃效果 */
|
||||||
|
--tabbar-shadow: rgba(120, 185, 215, 0.2); /* TabBar阴影色 - 蓝色系柔和阴影 */
|
||||||
|
--tabbar-icon-inactive: gray; /* 未选中图标颜色 - 灰色 */
|
||||||
|
--tabbar-icon-active: #5A98B0; /* 选中图标颜色 - 蓝绿色 */
|
||||||
|
--tabbar-text-inactive: #8AABBB; /* 未选中文字颜色 - 浅灰蓝 */
|
||||||
|
--tabbar-text-active: #5A98B0; /* 选中文字颜色 - 蓝绿色(与图标一致) */
|
||||||
|
|
||||||
|
/* ========== 通用蓝色系阴影(用于卡片、按钮等)========== */
|
||||||
|
/* 引用位置:components/index/RecommendCourses.vue, QuickEntry.vue, TodayRecommend.vue */
|
||||||
|
--shadow-blue-light: rgba(120, 185, 215, 0.18); /* 浅蓝色阴影 - 卡片悬浮效果 */
|
||||||
|
|
||||||
/* ========== 阴影层级 ========== */
|
/* ========== 阴影层级 ========== */
|
||||||
--shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.05); /* 卡片小阴影 轻量浮起 */
|
--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-md: 0 12px 28px rgba(0, 0, 0, 0.08); /* 中等阴影 - 弹窗或下拉菜单 */
|
||||||
|
|||||||
@@ -149,7 +149,6 @@ const tabs = [
|
|||||||
{
|
{
|
||||||
path: PAGE.COURSE,
|
path: PAGE.COURSE,
|
||||||
icon: 'icon-course',
|
icon: 'icon-course',
|
||||||
iconActive: '/static/tabBar/active/course.png',
|
|
||||||
label: '课程',
|
label: '课程',
|
||||||
useFontIcon: true,
|
useFontIcon: true,
|
||||||
fontSize:"36rpx"
|
fontSize:"36rpx"
|
||||||
@@ -222,7 +221,7 @@ function onTabTap(index) {
|
|||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 120rpx;
|
height: 120rpx;
|
||||||
background: rgba(200, 225, 238, 0.8);
|
background: white;
|
||||||
backdrop-filter: blur(24px);
|
backdrop-filter: blur(24px);
|
||||||
-webkit-backdrop-filter: blur(24px);
|
-webkit-backdrop-filter: blur(24px);
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -230,7 +229,7 @@ function onTabTap(index) {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
padding-bottom: constant(safe-area-inset-bottom);
|
padding-bottom: constant(safe-area-inset-bottom);
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
box-shadow: 0 -4rpx 24rpx rgba(120, 185, 215, 0.2);
|
box-shadow: 0 -4rpx 24rpx var(--tabbar-shadow);
|
||||||
border-radius: 32rpx 32rpx 0 0;
|
border-radius: 32rpx 32rpx 0 0;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
}
|
}
|
||||||
@@ -262,20 +261,20 @@ function onTabTap(index) {
|
|||||||
|
|
||||||
// 字体图标颜色控制(根据选中状态)
|
// 字体图标颜色控制(根据选中状态)
|
||||||
.tab-item .iconfont {
|
.tab-item .iconfont {
|
||||||
color: gray; // 未选中颜色
|
color: rgba(150, 150, 165, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-item.active .iconfont {
|
.tab-item.active .iconfont {
|
||||||
color: #5A98B0; // 选中颜色
|
color: rgba(130, 220, 130, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-label {
|
.tab-label {
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
color: #8AABBB;
|
color: rgba(150, 150, 165, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-item.active .tab-label {
|
.tab-item.active .tab-label {
|
||||||
color: #5A98B0;
|
color: rgba(130, 220, 130, 0.9);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -68,7 +68,7 @@ const entries = [
|
|||||||
-webkit-backdrop-filter: blur(24px);
|
-webkit-backdrop-filter: blur(24px);
|
||||||
margin: 24rpx;
|
margin: 24rpx;
|
||||||
border-radius: 28rpx;
|
border-radius: 28rpx;
|
||||||
box-shadow: 0 8rpx 32rpx rgba(120, 185, 215, 0.18);
|
box-shadow: 0 8rpx 32rpx var(--shadow-blue-light);
|
||||||
border: 1rpx solid rgba(255, 255, 255, 0.7);
|
border: 1rpx solid rgba(255, 255, 255, 0.7);
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
@@ -85,12 +85,12 @@ const entries = [
|
|||||||
width: 104rpx;
|
width: 104rpx;
|
||||||
height: 104rpx;
|
height: 104rpx;
|
||||||
border-radius: 24rpx;
|
border-radius: 24rpx;
|
||||||
background: linear-gradient(135deg, #7AB5CC 0%, #9CCFDF 100%);
|
background: rgba(130, 220, 130, 0.9);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-bottom: 16rpx;
|
margin-bottom: 16rpx;
|
||||||
box-shadow: 0 6rpx 20rpx rgba(122, 181, 204, 0.35);
|
box-shadow: 0 6rpx 20rpx rgba(130, 220, 130, 0.35);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-img {
|
.icon-img {
|
||||||
@@ -99,7 +99,7 @@ const entries = [
|
|||||||
}
|
}
|
||||||
|
|
||||||
.entry-icon.accent {
|
.entry-icon.accent {
|
||||||
background: linear-gradient(135deg, #6BA8C0 0%, #8CC5D5 100%);
|
background: rgba(130, 220, 130, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-title {
|
.entry-title {
|
||||||
@@ -111,6 +111,6 @@ const entries = [
|
|||||||
|
|
||||||
.entry-desc {
|
.entry-desc {
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
color: #8AABBB;
|
color: var(--tabbar-text-inactive);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -79,6 +79,9 @@
|
|||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
import { getGroupCoursePage } from '@/api/main.js'
|
import { getGroupCoursePage } from '@/api/main.js'
|
||||||
|
|
||||||
|
// 测试开关:设置为 true 时使用假数据,false 时使用真实API数据
|
||||||
|
const USE_MOCK_DATA = true
|
||||||
|
|
||||||
// 推荐课程数据列表
|
// 推荐课程数据列表
|
||||||
const courses = ref([])
|
const courses = ref([])
|
||||||
|
|
||||||
@@ -134,6 +137,12 @@ const getImageUrl = (coverImage) => {
|
|||||||
|
|
||||||
// 获取推荐课程
|
// 获取推荐课程
|
||||||
const fetchRecommendCourses = async () => {
|
const fetchRecommendCourses = async () => {
|
||||||
|
// 如果测试开关打开,直接使用假数据
|
||||||
|
if (USE_MOCK_DATA) {
|
||||||
|
useFallbackData()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await getGroupCoursePage({
|
const res = await getGroupCoursePage({
|
||||||
page: 0, size: 5, sort: 'current_members', order: 'desc'
|
page: 0, size: 5, sort: 'current_members', order: 'desc'
|
||||||
@@ -151,11 +160,11 @@ const fetchRecommendCourses = async () => {
|
|||||||
|
|
||||||
const useFallbackData = () => {
|
const useFallbackData = () => {
|
||||||
const fallbackContent = [
|
const fallbackContent = [
|
||||||
{ id: "3", courseName: "燃脂搏击", courseType: "2", startTime: "2026-06-10T18:30:00", endTime: "2026-06-10T19:30:00", maxMembers: 20, currentMembers: 20, status: "0", coverImage: "/images/kickboxing.jpg", description: "高强度间歇训练" },
|
{ id: "3", courseName: "燃脂搏击", courseType: "2", startTime: "2026-06-10T18:30:00", endTime: "2026-06-10T19:30:00", maxMembers: 20, currentMembers: 20, status: "0", coverImage: "https://picsum.photos/id/100/800/600", description: "高强度间歇训练" },
|
||||||
{ id: "2", courseName: "清晨流瑜伽", courseType: "1", startTime: "2026-06-12T09:00:00", endTime: "2026-06-12T10:30:00", maxMembers: 15, currentMembers: 5, status: "0", coverImage: "/images/yoga_flow.jpg", description: "流畅体式" },
|
{ id: "2", courseName: "清晨流瑜伽", courseType: "1", startTime: "2026-06-12T09:00:00", endTime: "2026-06-12T10:30:00", maxMembers: 15, currentMembers: 5, status: "0", coverImage: "https://picsum.photos/id/101/800/600", description: "流畅体式" },
|
||||||
{ id: "4", courseName: "哈他瑜伽", courseType: "1", startTime: "2026-06-01T15:20:00", endTime: "2026-06-01T16:50:00", maxMembers: 12, currentMembers: 3, status: "0", coverImage: "/images/hatha_yoga.jpg", description: "基础瑜伽" },
|
{ id: "4", courseName: "哈他瑜伽", courseType: "1", startTime: "2026-06-01T15:20:00", endTime: "2026-06-01T16:50:00", maxMembers: 12, currentMembers: 3, status: "0", coverImage: "https://picsum.photos/id/102/800/600", description: "基础瑜伽" },
|
||||||
{ id: "6", courseName: "蜜桃臀塑造", courseType: "3", startTime: "2026-05-30T19:00:00", endTime: "2026-05-30T20:00:00", maxMembers: 10, currentMembers: 8, status: "2", coverImage: "/images/glute.jpg", description: "臀部训练" },
|
{ id: "6", courseName: "蜜桃臀塑造", courseType: "3", startTime: "2026-05-30T19:00:00", endTime: "2026-05-30T20:00:00", maxMembers: 10, currentMembers: 8, status: "2", coverImage: "https://picsum.photos/id/103/800/600", description: "臀部训练" },
|
||||||
{ id: "7", courseName: "午间冥想放松", courseType: "1", startTime: "2026-05-31T12:00:00", endTime: "2026-05-31T13:00:00", maxMembers: 15, currentMembers: 6, status: "2", coverImage: "/images/meditation_noon.jpg", description: "冥想" }
|
{ id: "7", courseName: "午间冥想放松", courseType: "1", startTime: "2026-05-31T12:00:00", endTime: "2026-05-31T13:00:00", maxMembers: 15, currentMembers: 6, status: "2", coverImage: "https://picsum.photos/id/104/800/600", description: "冥想" }
|
||||||
]
|
]
|
||||||
courses.value = fallbackContent.map(course => ({
|
courses.value = fallbackContent.map(course => ({
|
||||||
id: course.id, image: getImageUrl(course.coverImage), tag: getTag(course),
|
id: course.id, image: getImageUrl(course.coverImage), tag: getTag(course),
|
||||||
@@ -200,7 +209,7 @@ onMounted(() => { fetchRecommendCourses() })
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4rpx;
|
gap: 4rpx;
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
color: #8AABBB;
|
color: var(--tabbar-text-inactive);
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow {
|
.arrow {
|
||||||
@@ -223,7 +232,7 @@ onMounted(() => { fetchRecommendCourses() })
|
|||||||
-webkit-backdrop-filter: blur(16px);
|
-webkit-backdrop-filter: blur(16px);
|
||||||
border-radius: 24rpx;
|
border-radius: 24rpx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 8rpx 28rpx rgba(120, 185, 215, 0.18);
|
box-shadow: 0 8rpx 28rpx var(--shadow-blue-light);
|
||||||
border: 1rpx solid rgba(255, 255, 255, 0.6);
|
border: 1rpx solid rgba(255, 255, 255, 0.6);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
@@ -335,7 +344,7 @@ onMounted(() => { fetchRecommendCourses() })
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6rpx;
|
gap: 6rpx;
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
color: #8AABBB;
|
color: var(--tabbar-text-inactive);
|
||||||
}
|
}
|
||||||
|
|
||||||
.fire-icon {
|
.fire-icon {
|
||||||
@@ -350,12 +359,12 @@ onMounted(() => { fetchRecommendCourses() })
|
|||||||
|
|
||||||
.join-btn {
|
.join-btn {
|
||||||
padding: 12rpx 28rpx;
|
padding: 12rpx 28rpx;
|
||||||
background: linear-gradient(135deg, #7AB5CC 0%, #9CCFDF 100%);
|
background: rgba(130, 220, 130, 0.9);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 9999rpx;
|
border-radius: 9999rpx;
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
box-shadow: 0 6rpx 16rpx rgba(122, 181, 204, 0.35);
|
box-shadow: 0 6rpx 16rpx rgba(130, 220, 130, 0.35);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -101,7 +101,7 @@ const recommends = [
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4rpx;
|
gap: 4rpx;
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
color: #8AABBB;
|
color: var(--tabbar-text-inactive);
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow {
|
.arrow {
|
||||||
@@ -122,7 +122,7 @@ const recommends = [
|
|||||||
-webkit-backdrop-filter: blur(16px);
|
-webkit-backdrop-filter: blur(16px);
|
||||||
border-radius: 24rpx;
|
border-radius: 24rpx;
|
||||||
padding: 20rpx;
|
padding: 20rpx;
|
||||||
box-shadow: 0 8rpx 28rpx rgba(120, 185, 215, 0.18);
|
box-shadow: 0 8rpx 28rpx var(--shadow-blue-light);
|
||||||
border: 1rpx solid rgba(255, 255, 255, 0.6);
|
border: 1rpx solid rgba(255, 255, 255, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -164,7 +164,7 @@ const recommends = [
|
|||||||
|
|
||||||
.item-desc {
|
.item-desc {
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: #8AABBB;
|
color: var(--tabbar-text-inactive);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -181,9 +181,9 @@ const recommends = [
|
|||||||
|
|
||||||
.start-btn {
|
.start-btn {
|
||||||
padding: 16rpx 28rpx;
|
padding: 16rpx 28rpx;
|
||||||
background: linear-gradient(135deg, #7AB5CC 0%, #9CCFDF 100%);
|
background: rgba(130, 220, 130, 0.9);
|
||||||
border-radius: 9999rpx;
|
border-radius: 9999rpx;
|
||||||
box-shadow: 0 6rpx 20rpx rgba(122, 181, 204, 0.4);
|
box-shadow: 0 6rpx 20rpx rgba(130, 220, 130, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.start-btn-text {
|
.start-btn-text {
|
||||||
@@ -195,7 +195,7 @@ const recommends = [
|
|||||||
|
|
||||||
.participants {
|
.participants {
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
color: #8AABBB;
|
color: var(--tabbar-text-inactive);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,5 +1,9 @@
|
|||||||
<!-- pages/course/index.vue -->
|
<!-- pages/course/index.vue -->
|
||||||
<template>
|
<template>
|
||||||
|
<!-- <view class="bg-wrapper">
|
||||||
|
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wave_top.png" mode="widthFix" class="wave-bg wave-top" />
|
||||||
|
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wave_bottom.png" mode="widthFix" class="wave-bg wave-bottom" />
|
||||||
|
</view> -->
|
||||||
<view class="tab-page">
|
<view class="tab-page">
|
||||||
<view class="tab-page__header">
|
<view class="tab-page__header">
|
||||||
<text class="tab-page__title">课程</text>
|
<text class="tab-page__title">课程</text>
|
||||||
@@ -29,8 +33,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<view class="bottom-placeholder"></view>
|
<view class="bottom-placeholder"></view>
|
||||||
<TabBar @update:active="handleTabActive" />
|
|
||||||
</view>
|
</view>
|
||||||
|
<TabBar @update:active="handleTabActive" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@@ -124,10 +128,39 @@ function goMyCourses() {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
.bg-wrapper {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave-bg {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave-top {
|
||||||
|
top: 0;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave-bottom {
|
||||||
|
bottom: 100rpx;
|
||||||
|
opacity: 0.35;
|
||||||
|
}
|
||||||
.tab-page {
|
.tab-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: $gradient-sky;
|
|
||||||
padding-bottom: 160rpx;
|
padding-bottom: 160rpx;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-page__header {
|
.tab-page__header {
|
||||||
|
|||||||
@@ -1,4 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<!-- <view class="bg-wrapper">
|
||||||
|
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wave_top.png" mode="widthFix" class="wave-bg wave-top" />
|
||||||
|
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wave_bottom.png" mode="widthFix" class="wave-bg wave-bottom" />
|
||||||
|
</view> -->
|
||||||
<view class="tab-page">
|
<view class="tab-page">
|
||||||
<view class="tab-page__header">
|
<view class="tab-page__header">
|
||||||
<text class="tab-page__title">发现</text>
|
<text class="tab-page__title">发现</text>
|
||||||
@@ -23,8 +27,8 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="bottom-placeholder"></view>
|
<view class="bottom-placeholder"></view>
|
||||||
<TabBar :active="3" />
|
|
||||||
</view>
|
</view>
|
||||||
|
<TabBar :active="3" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@@ -46,10 +50,38 @@ function goPointsMall() {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.bg-wrapper {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave-bg {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave-top {
|
||||||
|
top: 0;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave-bottom {
|
||||||
|
bottom: 100rpx;
|
||||||
|
opacity: 0.35;
|
||||||
|
}
|
||||||
.tab-page {
|
.tab-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: $gradient-sky;
|
|
||||||
padding-bottom: 160rpx;
|
padding-bottom: 160rpx;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-page__header {
|
.tab-page__header {
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- 水波纹背景 - 顶层显示 -->
|
<!-- 水波纹背景 - 顶层显示 -->
|
||||||
<view class="bg-wrapper">
|
<!-- <view class="bg-wrapper">
|
||||||
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wave_top.png" mode="widthFix" class="wave-bg wave-top" />
|
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wave_top.png" mode="widthFix" class="wave-bg wave-top" />
|
||||||
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wave_bottom.png" mode="widthFix" class="wave-bg wave-bottom" />
|
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wave_bottom.png" mode="widthFix" class="wave-bg wave-bottom" />
|
||||||
</view>
|
</view> -->
|
||||||
<!-- 固定白色块(滚动时显示) -->
|
<!-- 固定白色块(滚动时显示) -->
|
||||||
<view class="hand" :style="{height : handHeight + 'rpx'}" v-show="isShow"></view>
|
<view class="hand" :style="{height : handHeight + 'rpx'}" v-show="isShow"></view>
|
||||||
|
|
||||||
@@ -204,7 +204,7 @@ onMounted(() => {
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 20;
|
z-index: 1000;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<!-- <view class="bg-wrapper">
|
||||||
|
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wave_top.png" mode="widthFix" class="wave-bg wave-top" />
|
||||||
|
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wave_bottom.png" mode="widthFix" class="wave-bg wave-bottom" />
|
||||||
|
</view> -->
|
||||||
<view class="tab-page">
|
<view class="tab-page">
|
||||||
<view class="tab-page__header">
|
<view class="tab-page__header">
|
||||||
<text class="tab-page__title">训练</text>
|
<text class="tab-page__title">训练</text>
|
||||||
@@ -25,8 +29,8 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="bottom-placeholder"></view>
|
<view class="bottom-placeholder"></view>
|
||||||
<TabBar :active="2" />
|
|
||||||
</view>
|
</view>
|
||||||
|
<TabBar :active="2" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@@ -51,10 +55,38 @@ function goCheckIn() {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.bg-wrapper {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave-bg {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave-top {
|
||||||
|
top: 0;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave-bottom {
|
||||||
|
bottom: 100rpx;
|
||||||
|
opacity: 0.35;
|
||||||
|
}
|
||||||
.tab-page {
|
.tab-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: $gradient-sky;
|
|
||||||
padding-bottom: 160rpx;
|
padding-bottom: 160rpx;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-page__header {
|
.tab-page__header {
|
||||||
|
|||||||
Reference in New Issue
Block a user