xinadmin/school2-taro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页优化

Browse Source
This commit is contained in:
liu
2026-07-31 18:48:21 +08:00
parent dcd32e9d4d
commit a5763a2fb3
3 changed files with 204 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/home.ts
+1
View File
@@ -34,6 +34,7 @@ export interface GridNavItem {
export interface HomeData {
carousel: CarouselItem[]
gridNav: GridNavItem[]
site_title: string
}
// ==================== API ====================
src/pages/index/index.less
+141 -1
View File
@@ -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
+62 -3
View File
@@ -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<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>