update

app/(articles)/branch-life-sketch/[articleId]/layout.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import ArticleLayout from "@/app/components/ArticleLayout";
+
+const Layout = ({
+  children,
+}: {
+  children: ReactNode;
+  params: {
+    articleId: string;
+  };
+}) => {
+  return (
+    <ArticleLayout leftNavTitle={"分院生活剪影"} navigations={[]}>
+      {children}
+    </ArticleLayout>
+  );
+};
+
+export default Layout;

app/(articles)/branch-life-sketch/[articleId]/page.tsx

@@ -0,0 +1,24 @@
+import { articleDetail } from "@/app/api/articles";
+import ArticleRender from "@/app/components/ArticleRender";
+import ArticleWithBreadcrumb from "@/app/components/ArticleWithBreadcrumb";
+
+export default async function Article({
+  params,
+}: {
+  params: {
+    articleId: string;
+  };
+}) {
+  const data = await articleDetail({ id: params.articleId });
+  return (
+    <ArticleWithBreadcrumb
+      breadcrumb={[
+        { title: "首页", href: "/" },
+        { title: "分院生活剪影", href: "/branch-life-sketch/pages/1" },
+        { title: data.title, href: `/branch-life-sketch/${data.id}` },
+      ]}
+    >
+      <ArticleRender article={data} />
+    </ArticleWithBreadcrumb>
+  );
+}

app/(articles)/branch-life-sketch/pages/[pageIndex]/layout.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+import ArticleLayout from "@/app/components/ArticleLayout";
+import { BreadcrumbItem } from "@/app/components/Breadcrumb";
+import ArticleWithBreadcrumb from "@/app/components/ArticleWithBreadcrumb";
+
+const breadcrumb: BreadcrumbItem[] = [
+  { title: "首页", href: "/" },
+  { title: "分院生活剪影", href: "/branch-life-sketch/pages/1" },
+];
+
+const Layout = ({ children }: { children: ReactNode }) => {
+  return (
+    <ArticleLayout navigations={[]} leftNavTitle={"综合新闻"}>
+      <ArticleWithBreadcrumb breadcrumb={breadcrumb}>
+        {children}
+      </ArticleWithBreadcrumb>
+    </ArticleLayout>
+  );
+};
+
+export default Layout;

app/(articles)/branch-life-sketch/pages/[pageIndex]/page.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import ArticleList from "@/app/components/ArticleList";
+
+const Page = ({
+  params,
+}: {
+  params: {
+    pageIndex: string;
+  };
+}) => {
+  const { pageIndex } = params;
+  return (
+    <>
+      <ArticleList
+        title={"分院生活剪影"}
+        cid={"13"}
+        pageNo={parseInt(pageIndex)}
+      ></ArticleList>
+    </>
+  );
+};
+
+export default Page;

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]"
                         }

app/page.tsx

@@ -5,6 +5,7 @@ import { register } from "swiper/element/bundle";
 import AnhuiSwiper from "@/app/components/AnhuiSwiper";
 import LatestNews from "@/app/components/LatestNews";
 import FriendLinks from "@/app/components/FriendLinks";
+import BranchLifeSketch from "@/app/components/BranchLifeSketch";
 
 export default async function Home() {
   return (
@@ -80,6 +81,9 @@ export default async function Home() {
             target="_blank"
           />
         </map>
+        <div className={"mt-1"}>
+          <BranchLifeSketch />
+        </div>
       </div>
       <div className={"main-content w-[540px]"}>
         <LatestNews />