home page add image

components/Header.js

@@ -4,7 +4,11 @@ import Link from "next/link";
 // images
 import headerBackground from "../public/typhoon.png";
 
-export default function Header({ titleText }) {
+export default function Header({ titleText, propBG }) {
+  let bgsrc = headerBackground.src;
+  if (propBG) {
+    bgsrc = propBG.src;
+  }
   return (
     <>
       <nav className={styles.toolbar}>
@@ -24,7 +28,7 @@ export default function Header({ titleText }) {
       <header
         className={styles.header}
         style={{
-          backgroundImage: `url('${headerBackground.src}')`,
+          backgroundImage: `url('${bgsrc}')`,
         }}
       >
       </header>

components/PostPreview.js

@@ -0,0 +1,30 @@
+import styles from "../styles/Home.module.css";
+import Link from "next/link";
+import Image from "next/image";
+import ClickForMore from "./ClickForMore";
+
+function PostPreview({ title, description, date, href, bg }) {
+  return (
+    <Link href={href} passHref>
+      <section className={styles.postPreviewWrap}>
+        <div className={styles.postPreview}>
+          <h2>{title}</h2>
+          <p>{description}</p>
+          <small>发布于 {date}</small>
+          {" | "}
+          <ClickForMore />
+        </div>
+        <div
+          style={{
+            width: "39%",
+            maxWidth: "20rem",
+          }}
+        >
+          {bg && <Image src={bg} />}
+        </div>
+      </section>
+    </Link>
+  );
+}
+
+export default PostPreview;

components/Video.js

@@ -0,0 +1,20 @@
+function Video({ src }) {
+  const poster = src.substr(0, src.indexOf('.mp4')) + '_poster.jpg';
+  return (
+    <p
+      style={{
+        textAlign: "center",
+      }}
+    >
+      <video
+        src={src}
+        poster={poster || ""}
+        controls
+        preload="none"
+        width="70%"
+      />
+    </p>
+  );
+}
+
+export default Video;

package.json

@@ -9,12 +9,11 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "12.1.6",
-    "react": "18.1.0",
-    "react-dom": "18.1.0"
-  },
-  "devDependencies": {
-    "eslint": "8.15.0",
-    "eslint-config-next": "12.1.6"
+    "eslint": "^8.19.0",
+    "eslint-config-next": "^12.2.1",
+    "next": "^12.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sharp": "^0.30.7"
   }
 }

pages/index.js

@@ -1,11 +1,15 @@
 import Head from "next/head";
-import Link from "next/link";
 import Header from "../components/Header";
-import ClickForMore from "../components/ClickForMore";
+import PostPreview from "../components/PostPreview";
+
+import mainbg from "../public/mainbg.webp";
 
 // styles
 import styles from "../styles/Home.module.css";
 
+import bg486 from "../public/486.webp";
+import bgmap from "../public/typhoon.png";
+
 export default function Home() {
   return (
     <div>
@@ -15,25 +19,32 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <Header></Header>
+      <Header propBG={mainbg}></Header>
 
       <main className={styles.container}>
-        <Link href="/posts/init" passHref>
-          <section className={styles.postPreview}>
-            <h2>Social OjO 正式成立</h2>
-            <p>平台介绍、期望及使命</p>
-            <small>发布于 2022-05-12</small>{" | "}<ClickForMore />
-          </section>
-        </Link>
+        <PostPreview
+          href="/posts/init"
+          title="Social OjO 正式成立"
+          description="平台介绍、期望及使命"
+          date="2022-05-12"
+        />
         <hr />
-        <Link href="/posts/map" passHref>
-          <section className={styles.postPreview}>
-            <h2>全国灾害统计地图</h2>
-            <small>发布于 2022-05-12</small>{" | "}<ClickForMore />
-          </section>
-        </Link>
+        <PostPreview
+          href="/posts/law"
+          title="社会管理法律"
+          description="小组研讨真实法律案件的案情和判决"
+          date="2022-07-06"
+          bg={bg486}
+        />
+        <hr />
+        <PostPreview
+          href="/posts/map"
+          title="全国灾害统计地图"
+          description=""
+          date="2022-05-12"
+          bg={bgmap}
+        />
       </main>
     </div>
   );
 }
-

pages/posts/law/1.js

@@ -0,0 +1,39 @@
+import Head from "next/head";
+import Header from "../../../components/Header";
+import Video from "../../../components/Video";
+
+import styles from "../../../styles/Post.module.css";
+import homeStyles from "../../../styles/Home.module.css";
+
+import group1bg from "../../../public/group1bg.webp";
+
+export default function LawPage() {
+  return (
+    <div>
+      <Head>
+        <title>法律案件分析 - Social OjO</title>
+        <meta name="description" content="Social OjO 官方网站" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Header propBG={group1bg}></Header>
+      <main className={homeStyles.container}>
+        <section className={styles.post}>
+          <h2>残疾人劳工案例分析</h2>
+          <small>发布于 2022-07-06</small>
+          <hr />
+          <Video
+            src={
+              "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/1/c0003_c.mp4"
+            }
+          />
+          <Video
+            src={
+              "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/2/1.mp4"
+            }
+          />
+          <div className={styles.grid}></div>
+        </section>
+      </main>
+    </div>
+  );
+}

pages/posts/law/2.js

@@ -0,0 +1,39 @@
+import Head from "next/head";
+import Header from "../../../components/Header";
+import Video from "../../../components/Video";
+
+import styles from "../../../styles/Post.module.css";
+import homeStyles from "../../../styles/Home.module.css";
+
+import group2bg from "../../../public/group2bg.webp";
+
+export default function LawPage() {
+  return (
+    <div>
+      <Head>
+        <title>杀人犯潜逃的重婚案例- Social OjO</title>
+        <meta name="description" content="Social OjO 官方网站" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Header propBG={group2bg}></Header>
+      <main className={homeStyles.container}>
+        <section className={styles.post}>
+          <h2>杀人犯潜逃的重婚案例</h2>
+          <small>发布于 2022-07-06</small>
+          <hr />
+          <Video
+            src={
+              "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/1/c0004_c.mp4"
+            }
+          />
+          <Video
+            src={
+              "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/2/2.mp4"
+            }
+          />
+          <div className={styles.grid}></div>
+        </section>
+      </main>
+    </div>
+  );
+}

pages/posts/law/3.js

@@ -0,0 +1,39 @@
+import Head from "next/head";
+import Header from "../../../components/Header";
+import Video from "../../../components/Video";
+
+import styles from "../../../styles/Post.module.css";
+import homeStyles from "../../../styles/Home.module.css";
+
+import group3bg from "../../../public/group3bg.webp";
+
+export default function LawPage() {
+  return (
+    <div>
+      <Head>
+        <title>离婚案例分析- Social OjO</title>
+        <meta name="description" content="Social OjO 官方网站" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Header propBG={group3bg}></Header>
+      <main className={homeStyles.container}>
+        <section className={styles.post}>
+          <h2>离婚案例分析</h2>
+          <small>发布于 2022-07-06</small>
+          <hr />
+          <Video
+            src={
+              "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/1/c0005_c.mp4"
+            }
+          />
+          <Video
+            src={
+              "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/2/3.mp4"
+            }
+          />
+          <div className={styles.grid}></div>
+        </section>
+      </main>
+    </div>
+  );
+}

pages/posts/law/4.js

@@ -0,0 +1,39 @@
+import Head from "next/head";
+import Header from "../../../components/Header";
+import Video from "../../../components/Video";
+
+import styles from "../../../styles/Post.module.css";
+import homeStyles from "../../../styles/Home.module.css";
+
+import group4bg from "../../../public/group4bg.webp";
+
+export default function LawPage() {
+  return (
+    <div>
+      <Head>
+        <title>针对未成年人的性侵犯案件分析- Social OjO</title>
+        <meta name="description" content="Social OjO 官方网站" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Header propBG={group4bg}></Header>
+      <main className={homeStyles.container}>
+        <section className={styles.post}>
+          <h2>针对未成年人的性侵犯案件分析</h2>
+          <small>发布于 2022-07-06</small>
+          <hr />
+          <Video
+            src={
+              "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/1/c0006_c.mp4"
+            }
+          />
+          <Video
+            src={
+              "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/2/4.mp4"
+            }
+          />
+          <div className={styles.grid}></div>
+        </section>
+      </main>
+    </div>
+  );
+}

pages/posts/law/5.js

@@ -0,0 +1,34 @@
+import Head from "next/head";
+import Header from "../../../components/Header";
+import Video from "../../../components/Video";
+
+import styles from "../../../styles/Post.module.css";
+import homeStyles from "../../../styles/Home.module.css";
+
+import group5bg from "../../../public/group5bg.webp";
+
+export default function LawPage() {
+  return (
+    <div>
+      <Head>
+        <title>精神病患者的离婚案例分析- Social OjO</title>
+        <meta name="description" content="Social OjO 官方网站" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Header propBG={group5bg}></Header>
+      <main className={homeStyles.container}>
+        <section className={styles.post}>
+          <h2>精神病患者的离婚案例分析</h2>
+          <small>发布于 2022-07-06</small>
+          <hr />
+          <Video
+            src={
+              "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/1/c0007_c.mp4"
+            }
+          />
+          <div className={styles.grid}></div>
+        </section>
+      </main>
+    </div>
+  );
+}

pages/posts/law/6.js

@@ -0,0 +1,39 @@
+import Head from "next/head";
+import Header from "../../../components/Header";
+import Video from "../../../components/Video";
+
+import styles from "../../../styles/Post.module.css";
+import homeStyles from "../../../styles/Home.module.css";
+
+import group6bg from "../../../public/group6bg.webp";
+
+export default function LawPage() {
+  return (
+    <div>
+      <Head>
+        <title>离婚法- Social OjO</title>
+        <meta name="description" content="Social OjO 官方网站" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Header propBG={group6bg}></Header>
+      <main className={homeStyles.container}>
+        <section className={styles.post}>
+          <h2>离婚法</h2>
+          <small>发布于 2022-07-06</small>
+          <hr />
+          <Video
+            src={
+              "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/1/c0008_c.mp4"
+            }
+          />
+          <Video
+            src={
+              "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/2/6.mp4"
+            }
+          />
+          <div className={styles.grid}></div>
+        </section>
+      </main>
+    </div>
+  );
+}

pages/posts/law/7.js

@@ -0,0 +1,39 @@
+import Head from "next/head";
+import Header from "../../../components/Header";
+import Video from "../../../components/Video";
+
+import styles from "../../../styles/Post.module.css";
+import homeStyles from "../../../styles/Home.module.css";
+
+import group7bg from "../../../public/group7bg.webp";
+
+export default function LawPage() {
+  return (
+    <div>
+      <Head>
+        <title>婚内配偶同性恋行为导致的离婚纠纷案例分析- Social OjO</title>
+        <meta name="description" content="Social OjO 官方网站" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Header propBG={group7bg}></Header>
+      <main className={homeStyles.container}>
+        <section className={styles.post}>
+          <h2>残疾人劳工案例分析</h2>
+          <small>发布于 2022-07-06</small>
+          <hr />
+          <Video
+            src={
+              "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/1/c0009_c.mp4"
+            }
+          />
+          <Video
+            src={
+              "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/2/7.mp4"
+            }
+          />
+          <div className={styles.grid}></div>
+        </section>
+      </main>
+    </div>
+  );
+}

pages/posts/law/index.js

@@ -0,0 +1,115 @@
+import Head from "next/head";
+import Link from "next/link";
+import Header from "../../../components/Header";
+import Copyright from "../../../components/Copyright";
+import Image from "next/image";
+
+import styles from "../../../styles/Post.module.css";
+import homeStyles from "../../../styles/Home.module.css";
+
+import BG486 from "../../../public/486.webp";
+import group1bg from "../../../public/group1bg.webp";
+import group2bg from "../../../public/group2bg.webp";
+import group3bg from "../../../public/group3bg.webp";
+import group4bg from "../../../public/group4bg.webp";
+import group5bg from "../../../public/group5bg.webp";
+import group6bg from "../../../public/group6bg.webp";
+import group7bg from "../../../public/group7bg.webp";
+
+export default function LawPage() {
+  return (
+    <div>
+      <Head>
+        <title>法律案件分析 - Social OjO</title>
+        <meta name="description" content="Social OjO 官方网站" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Header propBG={BG486}></Header>
+      <main className={homeStyles.container}>
+        <section className={styles.post}>
+          <h2>社会管理法律</h2>
+          <small>发布于 2022-07-06</small>
+          <hr />
+          <div className={styles.grid}>
+            <Link href="/posts/law/1" passHref>
+              <div>
+                <h3>残疾人劳工案例分析</h3>
+                <small>
+                  <Copyright />
+                  周鲲鹏、郑梦佳、郑可儿
+                </small>
+                <Image src={group1bg} />
+              </div>
+            </Link>
+
+            <Link href="/posts/law/2" passHref>
+              <div>
+                <h3>杀人犯潜逃的重婚案例</h3>
+                <small>
+                  <Copyright />
+                  李昕玥、朱诗琪、张芷晴
+                </small>
+                <Image src={group2bg} />
+              </div>
+            </Link>
+
+            <Link href="/posts/law/3" passHref>
+              <div>
+                <h3>离婚案例分析</h3>
+                <small>
+                  <Copyright />
+                  黄珏晞、施适雨、易欣宇
+                </small>
+                <Image src={group3bg} />
+              </div>
+            </Link>
+
+            <Link href="/posts/law/4" passHref>
+              <div>
+                <h3>针对未成年人的性侵犯案件分析</h3>
+                <small>
+                  <Copyright />
+                  马玉、杨思怡、梁欣
+                </small>
+                <Image src={group4bg} />
+              </div>
+            </Link>
+
+            <Link href="/posts/law/5" passHref>
+              <div>
+                <h3>精神病患者的离婚案例分析</h3>
+                <small>
+                  <Copyright />
+                  林思源 吴懿鹏
+                </small>
+                <Image src={group5bg} />
+              </div>
+            </Link>
+
+            <Link href="/posts/law/6" passHref>
+              <div>
+                <h3>离婚法</h3>
+                <small>
+                  <Copyright />
+                  陈愿妃、张诺清、杨小满
+                </small>
+                <Image src={group6bg} />
+              </div>
+            </Link>
+
+            <Link href="/posts/law/7" passHref>
+              <div>
+                <h3>婚内配偶同性恋行为导致的离婚纠纷案例分析</h3>
+                <small>
+                  <Copyright />
+                  陈久如、郑志泓
+                </small>
+                <Image src={group7bg} />
+              </div>
+            </Link>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}

styles/Header.module.css

@@ -34,5 +34,7 @@
   text-align: center;
   font-size: 2rem;
   line-height: 3rem;
-  text-shadow: 1px 1px 1px black;
+  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.9);
+  color: white;
+  opacity: 0.8;
 }

styles/Home.module.css

@@ -7,5 +7,12 @@
 .postPreview {
   padding: 0.5rem;
   border-radius: 1rem;
+}
+
+.postPreviewWrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
   cursor: pointer;
 }