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;

app/components/FriendLinks.tsx

@@ -62,6 +62,7 @@ const FriendLinks = () => {
         {links.map((link) => (
           <li key={link.href} className={"flex"}>
             <Link
+              target={"_blank"}
               href={link.href}
               className={"flex items-center text-xs hover:underline h-7"}
             >

app/components/MainNav.tsx

@@ -65,6 +65,9 @@ const MainNav = () => {
             key={navigation.title + index}
           >
             <Link
+              onClick={() => {
+                setActivePopup(() => -1);
+              }}
               href={navigation.href}
               target={navigation.target}
               className={`${
@@ -88,6 +91,9 @@ const MainNav = () => {
                   {navigation.children.map((child) => (
                     <li key={child.href}>
                       <Link
+                        onClick={() => {
+                          setActivePopup(() => -1);
+                        }}
                         className={
                           "h-10 flex justify-center items-center text-[13px] px-2 hover:text-[#fe5722]"
                         }