子项样式修改
This commit is contained in:
+3
-1
@@ -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 ====================
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
) : (
|
||||
// 空状态
|
||||
|
||||
Reference in New Issue
Block a user