优化多个页面样式及组件功能，优化课程、发现、训练、首页等核心页面样式

gym-manage-uniapp/components/index/BannerSwiper.vue

@@ -10,14 +10,27 @@
       @change="onSwiperChange"
     >
       <swiper-item v-for="(banner, index) in banners" :key="index">
-        <view class="banner-content">
-          <image :src="banner.image" mode="aspectFill" class="banner-image" />
+        <view class="banner-content" @click="previewImage(index)">
+          <!-- 添加 lazy-load 属性实现懒加载 -->
+          <image 
+            :src="banner.image" 
+            mode="aspectFill" 
+            class="banner-image"
+            lazy-load
+            :show-menu-by-longpress="false"
+            @load="onImageLoad(index)"
+            @error="onImageError(index)"
+          />
           <view class="banner-overlay"></view>
           <view class="banner-text">
             <text class="banner-title">{{ banner.title }}</text>
             <text class="banner-subtitle">{{ banner.subtitle }}</text>
             <text class="banner-desc">{{ banner.desc }}</text>
           </view>
+          <!-- 可选：添加加载占位符 -->
+          <view v-if="!imageLoaded[index]" class="image-placeholder">
+            <view class="loading-spinner"></view>
+          </view>
         </view>
       </swiper-item>
     </swiper>
@@ -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'
+}
 </script>
 
 <style lang="scss" scoped>
@@ -86,58 +124,50 @@ const onSwiperChange = (e) => {
   height: 100%;
 }
 
+/* 添加图片占位符样式 */
+.image-placeholder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+
+.loading-spinner {
+  width: 60rpx;
+  height: 60rpx;
+  border: 4rpx solid rgba(255, 255, 255, 0.3);
+  border-top: 4rpx solid #7AB5CC;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
 .banner-overlay {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
+  z-index: 2; /* 确保遮罩层在占位符上面 */
 }
 
-.wave-transition {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -2rpx;
-  height: 100rpx;
-  z-index: 3;
-  overflow: hidden;
-}
-
-.wt-layer {
-  position: absolute;
-  left: -10%;
-  width: 120%;
-  height: 100%;
-}
-
-.wt-layer-1 {
-  bottom: 0;
-  background: #C0DDE9;
-  border-radius: 45% 55% 0 0;
-  opacity: 0.9;
-}
-
-.wt-layer-2 {
-  bottom: -10rpx;
-  background: #D4EAF2;
-  border-radius: 55% 45% 0 0;
-  opacity: 0.85;
-}
-
-.wt-layer-3 {
-  bottom: -20rpx;
-  background: #E8F4F9;
-  border-radius: 40% 60% 0 0;
-  opacity: 0.9;
-}
-
+/* 其余样式保持不变 */
 .banner-text {
   position: absolute;
   left: 36rpx;
   top: 50%;
   transform: translateY(-50%);
-  z-index: 2;
+  z-index: 3;
 }
 
 .banner-title {