84 lines
2.7 KiB
TypeScript
84 lines
2.7 KiB
TypeScript
"use client";
|
|
import styles from "@/app/assets/page.module.css";
|
|
import Image from "next/image";
|
|
import trumpetIcon from "@/app/assets/trumpet-icon.png";
|
|
import { articleDetail, listArticles } from "@/app/api/articles";
|
|
import { htmlToText } from "html-to-text";
|
|
import Link from "next/link";
|
|
|
|
const BranchLifeSketch = async () => {
|
|
const { lists } = await listArticles({ cid: "13" });
|
|
return (
|
|
<div>
|
|
<div
|
|
className={`title-bar text-white flex items-center px-2 font-bold ${styles.articleBlockTitleBar} relative`}
|
|
>
|
|
<Image width={30} height={30} src={trumpetIcon} alt={"trumpet icon"} />
|
|
<span className={"ml-2 text-[14px]"}>分院生活剪影</span>
|
|
</div>
|
|
<div className={"h-[216px] bg-[#e1f1fd]"}>
|
|
{/*@ts-ignore*/}
|
|
<swiper-container
|
|
style={{
|
|
height: "100%",
|
|
}}
|
|
autoplay
|
|
autoplay-pause-on-mouse-enter={true}
|
|
loop
|
|
slides-per-view="2"
|
|
direction={"vertical"}
|
|
>
|
|
{lists?.map(async (article) => {
|
|
const articleInfo = await articleDetail({
|
|
id: `${article.id}`,
|
|
});
|
|
const articleText = htmlToText(articleInfo.content, {
|
|
selectors: [
|
|
{
|
|
selector: "img",
|
|
format: "skip",
|
|
},
|
|
],
|
|
});
|
|
return (
|
|
// @ts-ignore
|
|
<swiper-slide key={article.id}>
|
|
<div className={"w-full h-[108px] px-2 py-4 flex"}>
|
|
<Link
|
|
className={"aspect-square"}
|
|
href={`/branch-life-sketch/${article.id}`}
|
|
>
|
|
<img
|
|
alt={article.title}
|
|
className={"w-full h-full"}
|
|
src={article.image.replace(
|
|
"http://101.34.131.16:8084/api/uploads/",
|
|
"",
|
|
)}
|
|
/>
|
|
</Link>
|
|
<div className={"flex-1 w-0 ml-1"}>
|
|
<Link
|
|
href={`/branch-life-sketch/${article.id}`}
|
|
className={"text-xs truncate text-[#144673]"}
|
|
>
|
|
{article.title}
|
|
</Link>
|
|
<div className={"text-xs text-[#797979] line-clamp-4 mt-3"}>
|
|
{articleText}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/*@ts-ignore*/}
|
|
</swiper-slide>
|
|
);
|
|
})}
|
|
{/*@ts-ignore*/}
|
|
</swiper-container>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BranchLifeSketch;
|