浏览代码

✨ feat(category): 优化分类页广告展示样式
- 调整广告容器位置至底部10%、右侧1%
- 增加广告容器尺寸为500rpx×700rpx并居中显示
- 修改广告图片显示模式为heightFix以保持比例

✨ feat(index): 重构首页轮播组件
- 替换Carousel组件为原生Swiper实现
- 优化轮播图布局,设置高度为800rpx并居中显示
- 添加轮播指示器,优化视觉体验
- 启用图片懒加载提升性能

yourname 1 月之前
父节点
当前提交
3b5ed25840
共有 3 个文件被更改,包括 46 次插入18 次删除
  1. 8 4
      mini/src/pages/category/index.css
  2. 1 1
      mini/src/pages/category/index.tsx
  3. 37 13
      mini/src/pages/index/index.tsx

+ 8 - 4
mini/src/pages/category/index.css

@@ -103,18 +103,22 @@
 /* 广告图容器 */
 .advertisement-container {
   position: fixed;
-  bottom: 13%;
-  right: 3%;
+  bottom: 10%;
+  right: 1%;
   z-index: 100;
+  width: 500rpx;
+  height: 700rpx;
+  display: flex;
+  justify-content: center;
 }
 
 .advertisement-image {
-  width: 200rpx;
-  height: 200rpx;
   border-radius: 16rpx;
   overflow: hidden;
   background-color: #fa4126;
   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
+  margin: 0 auto;
+  display: block;
 }
 
 .ad-image-placeholder {

+ 1 - 1
mini/src/pages/category/index.tsx

@@ -228,7 +228,7 @@ const CategoryPage: React.FC = () => {
                   <Image
                     src={advertisementImage}
                     alt="分类页广告"
-                    mode="aspectFill"
+                    mode="heightFix"
                     rounded="lg"
                     className="w-full h-full"
                     showLoading={true}

+ 37 - 13
mini/src/pages/index/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View, Text, ScrollView } from '@tarojs/components'
+import { View, Text, ScrollView, Swiper, SwiperItem, Image  } from '@tarojs/components'
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
 import { TabBarLayout } from '@/layouts/tab-bar-layout'
 import TDesignSearch from '@/components/tdesign/search'
@@ -238,18 +238,42 @@ const HomePage: React.FC = () => {
                 <Text className="error-text">广告加载失败</Text>
               </View>
             ) : finalImgSrcs && finalImgSrcs.length > 0 ? (
-              <Carousel
-                items={finalImgSrcs.filter(item => item.imageFile?.fullUrl).map(item => ({
-                  src: item.imageFile!.fullUrl,
-                  title: item.title || '',
-                  description: item.description || ''
-                }))}
-                height={800}
-                autoplay={true}
-                interval={4000}
-                circular={true}
-                imageMode="aspectFill"
-              />
+
+              <Swiper
+              className="w-full"
+              style={{ height: '800rpx', width: '100%' }}
+              autoplay={true}
+              circular={true}
+              indicatorDots={true}
+              indicatorColor="rgba(0, 0, 0, .3)"
+              indicatorActiveColor="#000"
+            >
+              {finalImgSrcs.filter(item => item.imageFile?.fullUrl).map((item, index) => (
+                <SwiperItem key={index} className="w-full h-full">
+                  <View className="w-full h-full flex items-center justify-center bg-gray-100">
+                    <Image
+                      src={item.imageFile!.fullUrl}
+                      mode="heightFix"
+                      style={{ height: '800rpx', width: 'auto' }}
+                      lazyLoad
+                    />
+                  </View>
+                </SwiperItem>
+              ))}
+            </Swiper>
+
+              // <Carousel
+              //   items={finalImgSrcs.filter(item => item.imageFile?.fullUrl).map(item => ({
+              //     src: item.imageFile!.fullUrl,
+              //     title: item.title || '',
+              //     description: item.description || ''
+              //   }))}
+              //   height={800}
+              //   autoplay={true}
+              //   interval={4000}
+              //   circular={true}
+              //   imageMode="heightFix"
+              // />
             ) : (
               <View className="empty-container">
                 <Text className="empty-text">暂无广告</Text>