add partner

src/app/(home)/components/Consultant/index.tsx

@@ -42,7 +42,7 @@ const Consultant: React.FC = () => {
               {consulantList?.map((item, index) => {
                 return (
                   <SwiperSlide key={index}>
-                    <a href={`/partner?id=${item.id}`} className={styles["col-md-4"]}>
+                    <a href={`/partner/${item.id}`} className={styles["col-md-4"]}>
                       <div className={styles.media}>
                         <img src={item.photo}></img>
                       </div>

src/app/partner/[id]/page.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import Image from "next/image";
+import type { Metadata } from "next";
+import Nav from "@/components/Nav";
+import Footer from "@/components/Footer";
+import styles from "./partner.module.css";
+import { fetchConsultants, fetchConsultantDetail } from "@/lib/cms";
+
+export const metadata: Metadata = {
+  title: "吕守升-创始人、战略解码专家-助力中国高潜企业加速发展-高潜咨询",
+  description:
+    "擅长领域：战略管理、组织变革及人力资源管理。著有畅销书《战略解码：跨越战略与执行的鸿沟》，是“战略解码®”方法体系的创始人及商标持有者。",
+  keywords: ["吕守升", "Samson Lv", "创始人", "战略解码专家"],
+};
+
+export default async function Partner({ params }: { params: { id: string } }) {
+  const partnerId = params.id;
+  if (!partnerId) {
+    return <>访问异常</>;
+  }
+
+  const { data: info } = await fetchConsultantDetail(parseInt(partnerId as string));
+  const { data: list } = await fetchConsultants();
+
+  if (!info) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className={styles.container}>
+        <Nav title={"顾问介绍"} />
+        <div className={styles.content}>
+          <div>
+            <span className={styles["breadcrumb-item"]}>
+              <a href="/home">首页</a>
+            </span>
+            <span className={styles["breadcrumb-seperator"]}>/</span>
+            <span className={styles["breadcrumb-item"]}>
+              <a href="/caseList">高潜顾问</a>
+            </span>
+            <span className={styles["breadcrumb-seperator"]}>/</span>
+            <span className={styles["breadcrumb-item"]}>
+              <span className={styles["breadcrumb-last"]}>{info?.cnName}</span>
+            </span>
+          </div>
+          <div className={styles.info}>
+            <div className={styles.left}>
+              <div className={styles.imgWrapper}>
+                <img src={info?.photo} className={styles.partnerPhoto} />
+                <div className={styles.box}></div>
+              </div>
+            </div>
+            <div className={styles.right}>
+              <div className={styles.name}>
+                <div className={styles.cnName}>{info?.cnName}</div>|{" "}
+                <div className={styles.enName}> {info?.enName}</div>
+              </div>
+              <div className={styles.title}>{info?.title}</div>
+              <div className={styles.desc} dangerouslySetInnerHTML={{ __html: info?.desc }}></div>
+            </div>
+          </div>
+          <div className={styles.partnerList}>
+            {list?.records?.map((item, index) => {
+              if (item.id == partnerId) {
+                return null;
+              } else {
+                return (
+                  <a href={`/partner/${item.id}`}>
+                    <div className={styles.item}>
+                      <div className={styles.cnName}>{item.cnName}</div>|{" "}
+                      <div className={styles.enName}>{item.enName}</div>
+                    </div>
+                  </a>
+                );
+              }
+            })}
+          </div>
+        </div>
+        <Footer />
+      </div>
+    </>
+  );
+}

src/app/partner/[id]/partner.module.css

@@ -0,0 +1,263 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: white;
+
+  .content {
+    width: 1160px;
+    margin-top: 30px;
+    font-weight: 600;
+    text-align: left;
+
+    .breadcrumb-item {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      color: rgba(0, 0, 0, 0.45);
+      font-variant: tabular-nums;
+      line-height: 1.5715;
+      list-style: none;
+      font-size: 14px;
+
+      .breadcrumb-last {
+        color: #1773c8;
+      }
+    }
+
+    .breadcrumb-seperator {
+      box-sizing: border-box;
+      margin-left: 10px;
+      margin-right: 10px;
+      padding: 0;
+      color: rgba(0, 0, 0, 0.45);
+      font-variant: tabular-nums;
+      line-height: 1.5715;
+      list-style: none;
+      font-size: 14px;
+    }
+
+    .breadcrumbItem {
+      color: #1773c8;
+    }
+
+    .info {
+      display: flex;
+      flex-direction: row;
+      margin-top: 30px;
+
+      .left {
+        width: 400px;
+
+        .imgWrapper {
+          position: relative;
+
+          .partnerPhoto {
+            position: absolute;
+            top: 36px;
+            z-index: 100;
+            width: 275px;
+            height: 350px;
+            object-fit: cover;
+            overflow: hidden;
+          }
+
+          .box {
+            width: 275px;
+            height: 350px;
+            margin-bottom: 36px;
+            margin-left: 36px;
+            background: #edf4fb;
+          }
+        }
+      }
+
+      .right {
+        width: 716px;
+
+        .name {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          color: #999;
+
+          .cnName {
+            margin-right: 6px;
+            color: #333;
+            font-weight: 900;
+            font-size: 16px;
+          }
+
+          .enName {
+            margin-left: 6px;
+            color: #999;
+            font-size: 16px;
+          }
+        }
+
+        .title {
+          margin-top: 4px;
+          margin-bottom: 20px;
+          color: #999;
+        }
+
+        .desc {
+          font-weight: 400;
+          line-height: 28px;
+          text-align: justify;
+        }
+      }
+    }
+
+    .partnerList {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: start;
+      margin-top: 60px;
+
+      .item {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        width: 200px;
+        height: 40px;
+        margin-right: 30px;
+        margin-bottom: 12px;
+        color: #999;
+        text-align: center;
+        background: #fafafa;
+
+        .cnName {
+          margin-right: 6px;
+          font-size: 16px;
+        }
+
+        .enName {
+          margin-left: 6px;
+          font-size: 16px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: white;
+
+    .content {
+      width: 90%;
+      margin-top: 100px;
+
+      .breadcrumbItem {
+        color: #1773c8;
+      }
+
+      .info {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin-top: 30px;
+
+        .left {
+          width: 90%;
+
+          .imgWrapper {
+            position: relative;
+
+            .partnerPhoto {
+              position: absolute;
+              top: 36px;
+              z-index: 100;
+              width: 275px;
+              height: 350px;
+              object-fit: cover;
+              overflow: hidden;
+            }
+
+            .box {
+              width: 275px;
+              height: 350px;
+              margin-bottom: 36px;
+              margin-left: 36px;
+              background: #edf4fb;
+            }
+          }
+        }
+
+        .right {
+          width: 90%;
+
+          .name {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            margin-top: 16px;
+            color: #999;
+
+            .cnName {
+              margin-right: 6px;
+              color: #333;
+              font-weight: 900;
+              font-size: 16px;
+            }
+
+            .enName {
+              margin-left: 6px;
+              color: #999;
+              font-size: 16px;
+            }
+          }
+
+          .title {
+            margin-top: 4px;
+            margin-bottom: 20px;
+            color: #999;
+          }
+
+          .desc {
+            color: #666;
+            line-height: 28px;
+            text-align: justify;
+          }
+        }
+      }
+
+      .partnerList {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-top: 20px;
+
+        .item {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 40px;
+          margin-top: 12px;
+          color: #999;
+          text-align: center;
+          background: #fafafa;
+
+          .cnName {
+            margin-right: 6px;
+            font-size: 16px;
+          }
+
+          .enName {
+            margin-left: 6px;
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+}