home page add image

components/PostPreview.js

@@ -1,16 +1,27 @@
 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 }) {
+function PostPreview({ title, description, date, href, bg }) {
   return (
     <Link href={href} passHref>
-      <section className={styles.postPreview}>
-        <h2>{title}</h2>
-        <p>{description}</p>
-        <small>发布于 {date}</small>
-        {" | "}
-        <ClickForMore />
+      <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>
   );

pages/index.js

@@ -7,6 +7,9 @@ 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>
@@ -31,6 +34,7 @@ export default function Home() {
           title="社会管理法律"
           description="小组研讨真实法律案件的案情和判决"
           date="2022-07-06"
+          bg={bg486}
         />
         <hr />
         <PostPreview
@@ -38,6 +42,7 @@ export default function Home() {
           title="全国灾害统计地图"
           description=""
           date="2022-05-12"
+          bg={bgmap}
         />
       </main>
     </div>

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;
 }