首页优化

src/api/home.ts

@@ -34,6 +34,7 @@ export interface GridNavItem {
 export interface HomeData {
   carousel: CarouselItem[]
   gridNav: GridNavItem[]
+  site_title: string
 }
 
 // ==================== API ====================

src/pages/index/index.less

@@ -18,6 +18,11 @@
     z-index: 1;
   }
 
+  .site-name {
+    padding: 24px 32px 0;
+    color: #fff;
+  }
+
   // ========== 1. 搜索栏 ==========
   .search-wrapper {
     padding: 24px 32px 16px;
@@ -78,7 +83,142 @@
     }
   }
 
-  // ========== 4. 底部推荐卡片 ==========
+  // ========== 4. 活动专区 ==========
+  .activity-section {
+    padding: 0 32px;
+    margin-bottom: 24px;
+
+    .activity-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 20px;
+
+      .activity-title {
+        display: flex;
+        align-items: center;
+        font-size: 34px;
+        font-weight: 700;
+        color: #333;
+
+        .title-accent {
+          width: 8px;
+          height: 32px;
+          border-radius: 4px;
+          background: linear-gradient(180deg, #ffb347, #ff6b35);
+          margin-right: 14px;
+        }
+      }
+
+      .activity-more {
+        display: flex;
+        align-items: center;
+        font-size: 24px;
+        color: #999;
+
+        .more-arrow {
+          margin-left: 2px;
+          font-size: 28px;
+          line-height: 1;
+        }
+      }
+    }
+
+    .activity-cards {
+      display: flex;
+      gap: 20px;
+    }
+
+    .activity-card {
+      position: relative;
+      flex: 1;
+      min-height: 216px;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding: 26px 24px;
+      border-radius: 24px;
+      overflow: hidden;
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+      transition: transform 0.2s ease;
+
+      &:active {
+        transform: scale(0.97);
+      }
+
+      // 装饰圆，增加层次感
+      .deco-circle {
+        position: absolute;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.14);
+      }
+
+      .circle-1 {
+        width: 170px;
+        height: 170px;
+        top: -60px;
+        right: -44px;
+      }
+
+      .circle-2 {
+        width: 96px;
+        height: 96px;
+        bottom: -40px;
+        left: -24px;
+        background: rgba(255, 255, 255, 0.1);
+      }
+
+      .activity-card-main {
+        position: relative;
+        z-index: 1;
+      }
+
+      .activity-icon {
+        width: 60px;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 34px;
+        border-radius: 16px;
+        background: rgba(255, 255, 255, 0.25);
+        margin-bottom: 14px;
+      }
+
+      .activity-name {
+        font-size: 32px;
+        font-weight: 700;
+        color: #fff;
+        margin-bottom: 4px;
+      }
+
+      .activity-desc {
+        font-size: 22px;
+        color: rgba(255, 255, 255, 0.85);
+      }
+    }
+
+    // 满减优惠：橙红渐变
+    .card-fullcut {
+      background: linear-gradient(135deg, #ff9560 0%, #ff5a3c 100%);
+
+      .activity-btn {
+        color: #ff5a3c;
+      }
+    }
+
+    // 新品首发：青绿渐变
+    .card-newbie {
+      background: linear-gradient(135deg, #43d6a5 0%, #14b07c 100%);
+
+      .activity-btn {
+        color: #14b07c;
+      }
+    }
+  }
+
+  // ========== 5. 底部推荐卡片 ==========
   .bottom-section {
     padding: 0 32px;
 

src/pages/index/index.tsx

@@ -1,5 +1,5 @@
-import { View, Image } from '@tarojs/components'
+import { View, Image, Text } from '@tarojs/components'
-import { Search, Swiper, SwiperItem, Grid, GridItem } from '@antmjs/vantui'
+import {Search, Swiper, SwiperItem, Grid, GridItem, Icon} from '@antmjs/vantui'
 import { useState, useEffect } from 'react'
 import Taro from '@tarojs/taro'
 import { getHomeData } from '@/api/home'
@@ -40,6 +40,7 @@ export default function Index() {
   const [searchValue, setSearchValue] = useState('')
   const [carousel, setCarousel] = useState<CarouselItem[]>([])
   const [gridNav, setGridNav] = useState<GridNavItem[]>([])
+  const [siteTitle, setSiteTitle] = useState<string>('河南省工业大学')
   const [loading, setLoading] = useState(true)
 
   // 获取首页数据
@@ -56,6 +57,9 @@ export default function Index() {
           if (res.data.gridNav?.length > 0) {
             setGridNav(prepareItems(res.data.gridNav))
           }
+          if (res.data.site_title) {
+            setSiteTitle(res.data.site_title)
+          }
         }
       } catch (err) {
         console.warn('获取首页数据失败，使用本地兜底数据', err)
@@ -74,6 +78,13 @@ export default function Index() {
 
       {/* 内容层 */}
       <View className='index-content'>
+
+        <View className='site-name'>
+          <Icon name='location-o' style={{ marginRight: '10px' }} />
+          {siteTitle}
+        </View>
+
+
         {/* 1. 顶部搜索栏 */}
         <View className='search-wrapper'>
           <Search
@@ -133,7 +144,55 @@ export default function Index() {
           )}
         </View>
 
-        {/* 4. 底部推荐卡片 */}
+        {/* 4. 活动专区 */}
+        <View className='activity-section'>
+          <View className='activity-header'>
+            <View className='activity-title'>
+              <Text className='title-accent' />
+              活动专区
+            </View>
+            <View className='activity-more'>
+              更多
+              <View className='more-arrow'>›</View>
+            </View>
+          </View>
+
+          <View className='activity-cards'>
+            {/* 满减优惠 */}
+            <View
+              className='activity-card card-fullcut'
+              onClick={() => {
+                // TODO: 活动页面上线后配置跳转链接
+              }}
+            >
+              <View className='deco-circle circle-1' />
+              <View className='deco-circle circle-2' />
+              <View className='activity-card-main'>
+                <View className='activity-icon'>🎫</View>
+                <View className='activity-name'>满减优惠</View>
+                <View className='activity-desc'>满30减5 · 可与券叠加</View>
+              </View>
+            </View>
+
+            {/* 新品首发 */}
+            <View
+              className='activity-card card-newbie'
+              onClick={() => {
+                // TODO: 活动页面上线后配置跳转链接
+              }}
+            >
+              <View className='deco-circle circle-1' />
+              <View className='deco-circle circle-2' />
+              <View className='activity-card-main'>
+                <View className='activity-icon'>✨</View>
+                <View className='activity-name'>新品首发</View>
+                <View className='activity-desc'>每周三上新 · 限时尝鲜价</View>
+              </View>
+            </View>
+          </View>
+        </View>
+
+        {/* 5. 底部推荐卡片 */}
         <View className='bottom-section'>
           <View className='section-card card-hot'>
             <View className='card-icon'>🔥</View>