|
|
|
@ -1,10 +1,9 @@
|
|
|
|
|
'use client';
|
|
|
|
|
|
|
|
|
|
import {PropsWithChildren, memo, useEffect, useState} from 'react';
|
|
|
|
|
import { memo, useEffect, useState } from 'react';
|
|
|
|
|
import { createStyles } from "antd-style";
|
|
|
|
|
import { Anchor, Button, Card, Image } from "antd";
|
|
|
|
|
import { RightCircleOutlined, LikeFilled, WechatFilled, HomeFilled, DribbbleSquareFilled, CopyFilled, MedicineBoxFilled, IeCircleFilled, IdcardFilled, HourglassFilled, InsuranceFilled } from "@ant-design/icons";
|
|
|
|
|
// import Link from "next/link";
|
|
|
|
|
import request from '@/app/request';
|
|
|
|
|
import Title from "../discover/components/Title";
|
|
|
|
|
|
|
|
|
@ -15,7 +14,61 @@ const stList = [
|
|
|
|
|
id: '1',
|
|
|
|
|
title: 'XXX助手',
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
// Anchor 导航配置
|
|
|
|
|
const anchorItems = [
|
|
|
|
|
{
|
|
|
|
|
href: '#rmtj',
|
|
|
|
|
key: '1',
|
|
|
|
|
title: { icon: LikeFilled, text: '热门推荐', style: 'first' }
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
href: '#ailt',
|
|
|
|
|
key: '2',
|
|
|
|
|
title: { icon: WechatFilled, text: 'AI聊天', style: 'sec' }
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
href: '#aixz',
|
|
|
|
|
key: '3',
|
|
|
|
|
title: { icon: CopyFilled, text: 'AI写作', style: 'thd' }
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
href: '#aihh',
|
|
|
|
|
key: '4',
|
|
|
|
|
title: { icon: DribbbleSquareFilled, text: 'AI绘画', style: 'four' }
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
href: '#aisp',
|
|
|
|
|
key: '5',
|
|
|
|
|
title: { icon: HomeFilled, text: 'AI视频', style: 'fif' }
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
href: '#aibg',
|
|
|
|
|
key: '6',
|
|
|
|
|
title: { icon: HourglassFilled, text: 'AI办公', style: 'six' }
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
href: '#aiszr',
|
|
|
|
|
key: '7',
|
|
|
|
|
title: { icon: IdcardFilled, text: 'AI数字人', style: 'seven' }
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
href: '#aijy',
|
|
|
|
|
key: '8',
|
|
|
|
|
title: { icon: IeCircleFilled, text: 'AI教育', style: 'egiht' }
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
href: '#aibc',
|
|
|
|
|
key: '9',
|
|
|
|
|
title: { icon: InsuranceFilled, text: 'AI编程', style: 'nine' }
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
href: '#aiyp',
|
|
|
|
|
key: '10',
|
|
|
|
|
title: { icon: MedicineBoxFilled, text: 'AI音频', style: 'ten' }
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const useStyles = createStyles(({css}) => ({
|
|
|
|
|
actionItem: css`
|
|
|
|
@ -187,7 +240,7 @@ const useStyles = createStyles(({css}) => ({
|
|
|
|
|
`,
|
|
|
|
|
}))
|
|
|
|
|
|
|
|
|
|
const getContainer = () => document.querySelector("#fileRight")
|
|
|
|
|
const getContainer = () => document.querySelector("#fileRight") as HTMLElement;
|
|
|
|
|
const handleClickCard = (e) => {
|
|
|
|
|
window.open(e.website, '_blank');
|
|
|
|
|
}
|
|
|
|
@ -200,11 +253,11 @@ const onClickAncho = (e) => {
|
|
|
|
|
// block: 'start'
|
|
|
|
|
// })
|
|
|
|
|
}
|
|
|
|
|
const ApplicationSet = memo<PropsWithChildren>(( ) => {
|
|
|
|
|
const ApplicationSet = memo(() => {
|
|
|
|
|
const { styles, cx } = useStyles()
|
|
|
|
|
const [val, setVal] = useState("AI")
|
|
|
|
|
const [achVal, setAchVal] = useState("#rmtj")
|
|
|
|
|
const [stData, setStData] = useState("")
|
|
|
|
|
const [val, setVal] = useState("AI");
|
|
|
|
|
const [achVal, setAchVal] = useState("#rmtj");
|
|
|
|
|
const [stData, setStData] = useState<Record<string, any[]>>({});
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const fetchData = () => {
|
|
|
|
|
request({
|
|
|
|
@ -230,6 +283,48 @@ const ApplicationSet = memo<PropsWithChildren>(( ) => {
|
|
|
|
|
setAchVal(e)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 通用卡片渲染函数
|
|
|
|
|
const renderCards = (data, onClick = handleClickCard) => {
|
|
|
|
|
return data?.map((e) => (
|
|
|
|
|
<Card
|
|
|
|
|
actions={[
|
|
|
|
|
<span className={styles.actionSpan} key={e.id} onClick={() => onClick(e)}>
|
|
|
|
|
立即前往<RightCircleOutlined className={styles.rightCo}/>
|
|
|
|
|
</span>
|
|
|
|
|
]}
|
|
|
|
|
className={cx(styles.card)}
|
|
|
|
|
key={e.id}
|
|
|
|
|
>
|
|
|
|
|
<Card.Meta
|
|
|
|
|
avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
|
|
|
|
|
className={styles.cardMeta}
|
|
|
|
|
description={<span className={styles.desText}>{e.remark}</span>}
|
|
|
|
|
title={<span className={styles.title}>{e.name}</span>}
|
|
|
|
|
/>
|
|
|
|
|
</Card>
|
|
|
|
|
));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 渲染 Anchor 项目
|
|
|
|
|
const renderAnchorItems = () => {
|
|
|
|
|
return anchorItems.map(item => {
|
|
|
|
|
const IconComponent = item.title.icon;
|
|
|
|
|
const isActive = achVal === item.href;
|
|
|
|
|
const activeStyleClass = `sele${item.title.style.charAt(0).toUpperCase() + item.title.style.slice(1)}`;
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
href: item.href,
|
|
|
|
|
key: item.key,
|
|
|
|
|
title: (
|
|
|
|
|
<div className={cx(styles.actionItem, isActive && styles[activeStyleClass])}>
|
|
|
|
|
<IconComponent className={cx(styles.actionItemIcon, styles[item.title.style])}/>
|
|
|
|
|
{item.title.text}
|
|
|
|
|
</div>
|
|
|
|
|
),
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<div className={cx(styles.topBtn)}>
|
|
|
|
@ -242,68 +337,7 @@ const ApplicationSet = memo<PropsWithChildren>(( ) => {
|
|
|
|
|
<Anchor
|
|
|
|
|
affix={false}
|
|
|
|
|
getContainer={getContainer}
|
|
|
|
|
items={[
|
|
|
|
|
{
|
|
|
|
|
href: '#rmtj',
|
|
|
|
|
key: '1',
|
|
|
|
|
title: <div className={cx(styles.actionItem, achVal === '#rmtj' && styles.seleFir)}><LikeFilled
|
|
|
|
|
className={cx(styles.actionItemIcon, styles.first)}/>热门推荐</div>,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
href: '#ailt',
|
|
|
|
|
key: '2',
|
|
|
|
|
title: <div className={cx(styles.actionItem, achVal === '#ailt' && styles.seleSec)}><WechatFilled
|
|
|
|
|
className={cx(styles.actionItemIcon, styles.sec)}/>AI聊天</div>,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
href: '#aixz',
|
|
|
|
|
key: '3',
|
|
|
|
|
title: <div className={cx(styles.actionItem, achVal === '#aixz' && styles.seleThd)}><CopyFilled
|
|
|
|
|
className={cx(styles.actionItemIcon, styles.thd)}/>AI写作</div>,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
href: '#aihh',
|
|
|
|
|
key: '4',
|
|
|
|
|
title: <div className={cx(styles.actionItem, achVal === '#aihh' && styles.seleFou)}>
|
|
|
|
|
<DribbbleSquareFilled className={cx(styles.actionItemIcon, styles.four)}/>AI绘画</div>,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
href: '#aisp',
|
|
|
|
|
key: '5',
|
|
|
|
|
title: <div className={cx(styles.actionItem, achVal === '#aisp' && styles.seleFif)}><HomeFilled
|
|
|
|
|
className={cx(styles.actionItemIcon, styles.fif)}/>AI视频</div>,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
href: '#aibg',
|
|
|
|
|
key: '6',
|
|
|
|
|
title: <div className={cx(styles.actionItem, achVal === '#aibg' && styles.seleSix)}><HourglassFilled
|
|
|
|
|
className={cx(styles.actionItemIcon, styles.six)}/>AI办公</div>,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
href: '#aiszr',
|
|
|
|
|
key: '7',
|
|
|
|
|
title: <div className={cx(styles.actionItem, achVal === '#aiszr' && styles.seleSeve)}><IdcardFilled
|
|
|
|
|
className={cx(styles.actionItemIcon, styles.seven)}/>AI数字人</div>,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
href: '#aijy',
|
|
|
|
|
key: '8',
|
|
|
|
|
title: <div className={cx(styles.actionItem, achVal === '#aijy' && styles.seleEight)}><IeCircleFilled
|
|
|
|
|
className={cx(styles.actionItemIcon, styles.egiht)}/>AI教育</div>,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
href: '#aibc',
|
|
|
|
|
key: '9',
|
|
|
|
|
title: <div className={cx(styles.actionItem, achVal === '#aibc' && styles.seleNine)}><InsuranceFilled
|
|
|
|
|
className={cx(styles.actionItemIcon, styles.nine)}/>AI编程</div>,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
href: '#aiyp',
|
|
|
|
|
key: '10',
|
|
|
|
|
title: <div className={cx(styles.actionItem, achVal === '#aiyp' && styles.seleTen)}><MedicineBoxFilled
|
|
|
|
|
className={cx(styles.actionItemIcon, styles.ten)}/>AI音频</div>,
|
|
|
|
|
},
|
|
|
|
|
]}
|
|
|
|
|
items={renderAnchorItems()}
|
|
|
|
|
onChange={(e) => onChangeAnchor(e)}
|
|
|
|
|
onClick={onClickAncho}
|
|
|
|
|
style={{ background: "#fff", width: '200px' }}
|
|
|
|
@ -313,240 +347,61 @@ const ApplicationSet = memo<PropsWithChildren>(( ) => {
|
|
|
|
|
<div id="rmtj">
|
|
|
|
|
<div className={cx(styles.leftTitle)}>热门推荐</div>
|
|
|
|
|
<div>
|
|
|
|
|
{
|
|
|
|
|
stData['rmtj'] && stData['rmtj'].map((e) => {
|
|
|
|
|
return (
|
|
|
|
|
<Card
|
|
|
|
|
actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
|
|
|
|
|
className={styles.rightCo}/></span>]}
|
|
|
|
|
className={cx(styles.card)}
|
|
|
|
|
key={e.id}
|
|
|
|
|
>
|
|
|
|
|
<Card.Meta
|
|
|
|
|
avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
|
|
|
|
|
className={styles.cardMeta}
|
|
|
|
|
description={<span className={styles.desText}>{e.remark}</span>}
|
|
|
|
|
title={<span className={styles.title}>{e.name}</span>}
|
|
|
|
|
/>
|
|
|
|
|
</Card>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
{renderCards(stData['rmtj'])}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="ailt">
|
|
|
|
|
<div className={cx(styles.leftTitle)}>AI聊天</div>
|
|
|
|
|
<div>
|
|
|
|
|
{
|
|
|
|
|
stData['chat'] && stData['chat'].map((e) => {
|
|
|
|
|
return (
|
|
|
|
|
<Card
|
|
|
|
|
actions={[<span className={styles.actions} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined className={styles.rightCo}/></span>]}
|
|
|
|
|
className={cx(styles.card)}
|
|
|
|
|
key={e.id}
|
|
|
|
|
>
|
|
|
|
|
<Card.Meta
|
|
|
|
|
avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
|
|
|
|
|
className={styles.cardMeta}
|
|
|
|
|
description={<span className={styles.desText}>{e.remark}</span>}
|
|
|
|
|
title={<span className={styles.title}>{e.name}</span>}
|
|
|
|
|
/>
|
|
|
|
|
</Card>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
{renderCards(stData['chat'])}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="aixz">
|
|
|
|
|
<div className={cx(styles.leftTitle)}>AI写作</div>
|
|
|
|
|
<div>
|
|
|
|
|
{
|
|
|
|
|
stData['writing'] && stData['writing'].map((e) => {
|
|
|
|
|
return (
|
|
|
|
|
<Card
|
|
|
|
|
actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
|
|
|
|
|
className={styles.rightCo}/></span>]}
|
|
|
|
|
className={cx(styles.card)}
|
|
|
|
|
key={e.id}
|
|
|
|
|
>
|
|
|
|
|
<Card.Meta
|
|
|
|
|
avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
|
|
|
|
|
className={styles.cardMeta}
|
|
|
|
|
description={<span className={styles.desText}>{e.remark}</span>}
|
|
|
|
|
title={<span className={styles.title}>{e.name}</span>}
|
|
|
|
|
/>
|
|
|
|
|
</Card>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
{renderCards(stData['writing'])}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="aihh">
|
|
|
|
|
<div className={cx(styles.leftTitle)}>AI绘画</div>
|
|
|
|
|
<div>
|
|
|
|
|
{
|
|
|
|
|
stData['conversation'] && stData['conversation'].map((e) => {
|
|
|
|
|
return (
|
|
|
|
|
<Card
|
|
|
|
|
actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
|
|
|
|
|
className={styles.rightCo}/></span>]}
|
|
|
|
|
className={cx(styles.card)}
|
|
|
|
|
key={e.id}
|
|
|
|
|
>
|
|
|
|
|
<Card.Meta
|
|
|
|
|
avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
|
|
|
|
|
className={styles.cardMeta}
|
|
|
|
|
description={<span className={styles.desText}>{e.remark}</span>}
|
|
|
|
|
title={<span className={styles.title}>{e.name}</span>}
|
|
|
|
|
/>
|
|
|
|
|
</Card>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
{renderCards(stData['conversation'])}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="aisp">
|
|
|
|
|
<div className={cx(styles.leftTitle)}>AI视频</div>
|
|
|
|
|
<div>
|
|
|
|
|
{
|
|
|
|
|
stData['video'] && stData['video'].map((e) => {
|
|
|
|
|
return (
|
|
|
|
|
<Card
|
|
|
|
|
actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
|
|
|
|
|
className={styles.rightCo}/></span>]}
|
|
|
|
|
className={cx(styles.card)}
|
|
|
|
|
key={e.id}
|
|
|
|
|
>
|
|
|
|
|
<Card.Meta
|
|
|
|
|
avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
|
|
|
|
|
className={styles.cardMeta}
|
|
|
|
|
description={<span className={styles.desText}>{e.remark}</span>}
|
|
|
|
|
title={<span className={styles.title}>{e.name}</span>}
|
|
|
|
|
/>
|
|
|
|
|
</Card>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
{renderCards(stData['video'])}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="aibg">
|
|
|
|
|
<div className={cx(styles.leftTitle)}>AI办公</div>
|
|
|
|
|
<div>
|
|
|
|
|
{
|
|
|
|
|
stData['office'] && stData['office'].map((e) => {
|
|
|
|
|
return (
|
|
|
|
|
<Card
|
|
|
|
|
actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
|
|
|
|
|
className={styles.rightCo}/></span>]}
|
|
|
|
|
className={cx(styles.card)}
|
|
|
|
|
key={e.id}
|
|
|
|
|
>
|
|
|
|
|
<Card.Meta
|
|
|
|
|
avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
|
|
|
|
|
className={styles.cardMeta}
|
|
|
|
|
description={<span className={styles.desText}>{e.remark}</span>}
|
|
|
|
|
title={<span className={styles.title}>{e.name}</span>}
|
|
|
|
|
/>
|
|
|
|
|
</Card>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
{renderCards(stData['office'])}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="aiszr">
|
|
|
|
|
<div className={cx(styles.leftTitle)}>AI数字人</div>
|
|
|
|
|
<div>
|
|
|
|
|
{
|
|
|
|
|
stData['digitalPeople'] && stData['digitalPeople'].map((e) => {
|
|
|
|
|
return (
|
|
|
|
|
<Card
|
|
|
|
|
actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
|
|
|
|
|
className={styles.rightCo}/></span>]}
|
|
|
|
|
className={cx(styles.card)}
|
|
|
|
|
key={e.id}
|
|
|
|
|
>
|
|
|
|
|
<Card.Meta
|
|
|
|
|
avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
|
|
|
|
|
className={styles.cardMeta}
|
|
|
|
|
description={<span className={styles.desText}>{e.remark}</span>}
|
|
|
|
|
title={<span className={styles.title}>{e.name}</span>}
|
|
|
|
|
/>
|
|
|
|
|
</Card>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
{renderCards(stData['digitalPeople'])}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="aijy">
|
|
|
|
|
<div className={cx(styles.leftTitle)}>AI教育</div>
|
|
|
|
|
<div>
|
|
|
|
|
{
|
|
|
|
|
stData['education'] && stData['education'].map((e) => {
|
|
|
|
|
return (
|
|
|
|
|
<Card
|
|
|
|
|
actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
|
|
|
|
|
className={styles.rightCo}/></span>]}
|
|
|
|
|
className={cx(styles.card)}
|
|
|
|
|
key={e.id}
|
|
|
|
|
>
|
|
|
|
|
<Card.Meta
|
|
|
|
|
avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
|
|
|
|
|
className={styles.cardMeta}
|
|
|
|
|
description={<span className={styles.desText}>{e.remark}</span>}
|
|
|
|
|
title={<span className={styles.title}>{e.name}</span>}
|
|
|
|
|
/>
|
|
|
|
|
</Card>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
{renderCards(stData['education'])}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="aibc">
|
|
|
|
|
<div className={cx(styles.leftTitle)}>AI编程</div>
|
|
|
|
|
<div>
|
|
|
|
|
{
|
|
|
|
|
stData['programming'] && stData['programming'].map((e) => {
|
|
|
|
|
return (
|
|
|
|
|
<Card
|
|
|
|
|
actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
|
|
|
|
|
className={styles.rightCo}/></span>]}
|
|
|
|
|
className={cx(styles.card)}
|
|
|
|
|
key={e.id}
|
|
|
|
|
>
|
|
|
|
|
<Card.Meta
|
|
|
|
|
avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
|
|
|
|
|
className={styles.cardMeta}
|
|
|
|
|
description={<span className={styles.desText}>{e.remark}</span>}
|
|
|
|
|
title={<span className={styles.title}>{e.name}</span>}
|
|
|
|
|
/>
|
|
|
|
|
</Card>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
{renderCards(stData['programming'])}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="aiyp">
|
|
|
|
|
<div className={cx(styles.leftTitle)}>AI音频</div>
|
|
|
|
|
<div>
|
|
|
|
|
{
|
|
|
|
|
stData['audio'] && stData['audio'].map((e) => {
|
|
|
|
|
return (
|
|
|
|
|
<Card
|
|
|
|
|
actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
|
|
|
|
|
className={styles.rightCo}/></span>]}
|
|
|
|
|
className={cx(styles.card)}
|
|
|
|
|
key={e.id}
|
|
|
|
|
>
|
|
|
|
|
<Card.Meta
|
|
|
|
|
avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
|
|
|
|
|
className={styles.cardMeta}
|
|
|
|
|
description={<span className={styles.desText}>{e.remark}</span>}
|
|
|
|
|
title={<span className={styles.title}>{e.name}</span>}
|
|
|
|
|
/>
|
|
|
|
|
</Card>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
{renderCards(stData['audio'])}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|