update

app/components/BranchLifeSketch.tsx

@@ -0,0 +1,83 @@
+"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;