子项样式修改

This commit is contained in:
liu
2026-08-11 10:47:12 +08:00
parent 029d2c400c
commit 1ffdab9358
3 changed files with 33 additions and 21 deletions
+3 -1
View File
@@ -36,7 +36,9 @@ export interface HomeData {
}
/** 分类链接项(结构与 HomeLinkItem 相同,但不含 link_type / category_id,均为纯链接) */
export type CategoryLinkItem = Omit<HomeLinkItem, 'link_type' | 'category_id'>
export type CategoryLinkItem = Omit<HomeLinkItem, 'link_type' | 'category_id'> & {
tag: string[]
}
// ==================== API ====================
+12 -9
View File
@@ -24,20 +24,23 @@
background: rgb(255 255 255);
border-radius: 20px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
padding-bottom: 24px;
padding: 20px 20px 30px;
.van-grid-item__content {
padding-top: 24px;
padding-bottom: 0;
.grid-item {
display: flex;
margin-bottom: 10px;
padding: 20px;
border-bottom: 1px solid #ddd;
}
.van-icon--image {
width: 60px !important;
height: 60px !important;
.grid-item-title {
}
.van-grid-item__text {
font-size: 22px;
.grid-item-image {
margin-right: 30px;
width: 100px;
height: 100px;
}
}
}
+14 -7
View File
@@ -1,5 +1,5 @@
import { View, Text } from '@tarojs/components'
import { Grid, GridItem, Loading } from '@antmjs/vantui'
import {Image, Loading, Tag} from '@antmjs/vantui'
import { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import { getCategoryLinks } from '@/api/home'
@@ -49,16 +49,23 @@ export default function Category() {
) : links.length > 0 ? (
// 宫格链接(与首页宫格导航样式一致)
<View className='grid-wrapper'>
<Grid columnNum={5} border={false} gutter={12} iconSize={48}>
{links.map((item) => (
<GridItem
<View
className='grid-item'
key={item.id}
icon={item.image.preview_url}
text={item.title}
onClick={() => navigateToLink(item.link)}
/>
>
<Image className='grid-item-image' src={item.image.preview_url}></Image>
<Text className='grid-item-title'>
<View>{item.title}</View>
<View>
{ item.tag.length > 0 && item.tag.map((tag, index) => (
<Tag type='danger' key={index}>{tag}</Tag>
))}
</View>
</Text>
</View>
))}
</Grid>
</View>
) : (
// 空状态