diff --git a/src/api/home.ts b/src/api/home.ts index 2dd57bb..88899f8 100644 --- a/src/api/home.ts +++ b/src/api/home.ts @@ -34,6 +34,7 @@ export interface GridNavItem { export interface HomeData { carousel: CarouselItem[] gridNav: GridNavItem[] + site_title: string } // ==================== API ==================== diff --git a/src/pages/index/index.less b/src/pages/index/index.less index 3eb1aa4..995e6bf 100644 --- a/src/pages/index/index.less +++ b/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; diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 64bd339..d8e7301 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -1,5 +1,5 @@ -import { View, Image } from '@tarojs/components' -import { Search, Swiper, SwiperItem, Grid, GridItem } from '@antmjs/vantui' +import { View, Image, Text } from '@tarojs/components' +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([]) const [gridNav, setGridNav] = useState([]) + const [siteTitle, setSiteTitle] = useState('河南省工业大学') 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() { {/* 内容层 */} + + + + {siteTitle} + + + {/* 1. 顶部搜索栏 */} - {/* 4. 底部推荐卡片 */} + {/* 4. 活动专区 */} + + + + + 活动专区 + + + 更多 + + + + + + {/* 满减优惠 */} + { + // TODO: 活动页面上线后配置跳转链接 + }} + > + + + + 🎫 + 满减优惠 + 满30减5 · 可与券叠加 + + + + {/* 新品首发 */} + { + // TODO: 活动页面上线后配置跳转链接 + }} + > + + + + + 新品首发 + 每周三上新 · 限时尝鲜价 + + + + + + {/* 5. 底部推荐卡片 */} 🔥