init

app/components/ArticleBlock.tsx

@@ -0,0 +1,60 @@
+import Image from "next/image";
+import trumpetIcon from "@/app/assets/trumpet-icon.png";
+import styles from "@/app/assets/page.module.css";
+import Link from "next/link";
+import request from "@/app/lib/request";
+import { listArticles } from "@/app/api/articles";
+
+interface ArticleLink {
+  title: string;
+  date?: string;
+  href: string;
+}
+
+const ArticleBlock = async ({
+  title,
+  width,
+  height,
+  category,
+  linkPrefix,
+}: {
+  title: string;
+  height?: number | string;
+  width?: number | string;
+  category: string;
+  linkPrefix: string;
+}) => {
+  const data = await listArticles({ cid: category });
+  return (
+    <div
+      style={{
+        width,
+        height,
+      }}
+      className={"flex flex-col"}
+    >
+      <div
+        className={`title-bar flex items-center px-2 ${styles.articleBlockTitleBar}`}
+      >
+        <Image width={30} height={30} src={trumpetIcon} alt={"trumpet icon"} />
+        <span className={"ml-2 text-[14px]"}>{title}</span>
+      </div>
+      <div className={`${styles.articlesList} bg-[#e1f1fd] flex-1`}>
+        <ul>
+          {data.lists.map((article) => (
+            <li className={"h-7 px-1 flex items-center"} key={article.id}>
+              <Link
+                className={"w-full truncate text-xs"}
+                href={`${linkPrefix}/${article.id}`}
+              >
+                {article.title}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default ArticleBlock;

app/components/ArticleContent.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { ArticleDetail } from "@/app/types/article";
+
+const ArticleContent = ({ article }: { article: ArticleDetail }) => {
+  return (
+    <div className={"bg-white px-5 py-4 h-full"}>
+      <h1 className={"text-[18px] text-[#054786] text-center font-bold"}>
+        {article.title}
+      </h1>
+      <div dangerouslySetInnerHTML={{ __html: article.content }}></div>
+    </div>
+  );
+};
+
+export default ArticleContent;

app/components/ArticleLayout.tsx

@@ -0,0 +1,21 @@
+import LeftNav from "@/app/components/LeftNav";
+import { ReactNode } from "react";
+
+const ArticleLayout = ({
+  children,
+  navs,
+}: {
+  children: ReactNode;
+  navs: any;
+}) => {
+  return (
+    <div className={"flex bg-[#6bb7f6] p-2.5"}>
+      <div className={"left-side w-[325px]"}>
+        <LeftNav />
+      </div>
+      <div className={"flex-1"}>{children}</div>
+    </div>
+  );
+};
+
+export default ArticleLayout;

app/components/LeftNav.module.scss

@@ -0,0 +1,13 @@
+.navContent {
+  background: linear-gradient(
+    90deg,
+    rgba(15, 111, 202, 0.7710280373831776) 34.21052631578947%,
+    rgba(32, 151, 243, 0.6214953271028038) 100%
+  );
+
+  .navItems {
+    li:not(:last-child) {
+      border-bottom: 1px solid #ffffff;
+    }
+  }
+}

app/components/LeftNav.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import Image from "next/image";
+import circle from "@/app/assets/circle.png";
+import styles from "./LeftNav.module.scss";
+import Link from "next/link";
+
+const LeftNav = () => {
+  return (
+    <div className={"left-nav min-h-[600px] bg-[#d7ecfd] rounded shadow"}>
+      <div className={"flex items-center pl-2"}>
+        <Image src={circle} alt={"circle icon"} height={16} width={16} />
+        <span className={"pl-2"}>新闻详情</span>
+      </div>
+      <div
+        className={`${styles.navContent} mt-3 mx-3 rounded-lg px-2.5 py-[5px]`}
+      >
+        <ul className={styles.navItems}>
+          <li>
+            <Link
+              className={"text-sm px-[9px] py-[7px] block text-white"}
+              href={"/"}
+            >
+              人才概况
+            </Link>
+          </li>
+          <li>
+            <Link
+              className={"text-sm px-[9px] py-[7px] block text-white"}
+              href={"/"}
+            >
+              人才概况
+            </Link>
+          </li>
+          <li>
+            <Link
+              className={"text-sm px-[9px] py-[7px] block text-white"}
+              href={"/"}
+            >
+              人才概况
+            </Link>
+          </li>
+          <li>
+            <Link
+              className={"text-sm px-[9px] py-[7px] block text-white"}
+              href={"/"}
+            >
+              人才概况
+            </Link>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default LeftNav;