Now the news album works.

src/App.vue

@@ -11,7 +11,7 @@
       :imageUrl="detectResult.imageUrl"
       :trustworthiness="detectResult.trustworthiness"
     ></detect-result>
-    <news-album></news-album>
+    <news-album :news="news"></news-album>
   </main>
 </template>
 
@@ -39,6 +39,32 @@ export default {
         trustworthiness: 0.0,
       },
       showDetectResult: false,
+      news: [
+        {
+          title: "一到春天就皮肤过敏瘙痒怎么办？掌握这几招立马止痒",
+          image:
+            "https://pic4.zhimg.com/v2-df56391f8128d2c8921d0b5112a51fa3_1440w.jpg?source=172ae18b",
+          abstract:
+            "春天是万物复苏，花红柳绿的季节，同时也是过敏性皮肤疾病高发的季节。",
+          readMinutes: 5,
+        },
+        {
+          title: "下雨天，皮肤就不用补水了吗？",
+          image:
+            "https://pic1.zhimg.com/v2-6bf489635811b1552320c23bd58392fd_1440w.jpg?source=172ae18b",
+          abstract:
+            "空气湿度大，皮肤已经可以吸收天然水分，不需要再额外补充了！真的是这样吗？",
+          readMinutes: 8,
+        },
+        {
+          title: "脸上经常长痘痘是什么原因导致的？",
+          image:
+            "https://pic2.zhimg.com/80/v2-598043efaf9de7e18ddc63a6a6e42a08_720w.jpg?source=1940ef5c",
+          abstract:
+            "曾经的我，也是满脸痘痘的男人。现在的我，浑身肌肤嫩滑，吹弹可破。前方高能预警：文章很长，干货很干，全文没有多余的废话，请一定一定，耐心读完。",
+          readMinutes: 12,
+        },
+      ],
     };
   },
   methods: {

src/components/NavBar.vue

@@ -56,7 +56,7 @@
           data-bs-toggle="modal"
           data-bs-target="#loginModal"
         >
-          Login
+          登录
         </button>
         <button
           class="navbar-toggler"

src/components/NewsAlbum.vue

@@ -1,11 +1,21 @@
 <template>
   <div class="album py-5 bg-light">
     <div class="container">
+      <h1 class="mb-3 fw-light text-center">猜你想看</h1>
       <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
-        <news-album-item></news-album-item>
+        <news-album-item
-        <news-album-item></news-album-item>
+          v-for="n in NewsList"
-        <news-album-item></news-album-item>
+          :key="n.id"
+          :id="n.id"
+          :title="n.title"
+          :abstract="n.abstract"
+          :image="n.image"
+          :readmin="n.readMinutes"
+        ></news-album-item>
       </div>
+      <p class="mx-auto my-3 text-center">
+        <button class="btn btn-lg btn-outline-secondary">想看更多?</button>
+      </p>
     </div>
   </div>
 </template>
@@ -17,6 +27,17 @@ export default {
   components: {
     NewsAlbumItem,
   },
+  data() {
+    return {
+      NewsList: this.news,
+    };
+  },
+  props: {
+    news: {
+      type: Array,
+      default: () => null,
+    },
+  },
 };
 </script>
 

src/components/NewsAlbumItem.vue

@@ -1,34 +1,22 @@
 <template>
   <div class="col">
     <div class="card shadow-sm">
-      <svg
+      <img
         class="bd-placeholder-img card-img-top"
-        width="100%"
+        :src="NewsImage"
-        height="225"
+        :alt="NewsTitle"
-        xmlns="http://www.w3.org/2000/svg"
+      />
-        role="img"
-        aria-label="Placeholder: Thumbnail"
-        preserveAspectRatio="xMidYMid slice"
-        focusable="false"
-      >
-        <title>Placeholder</title>
-        <rect width="100%" height="100%" fill="#55595c" />
-        <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
-      </svg>
 
       <div class="card-body">
-        <h5 class="card-text">My Title</h5>
+        <h5 class="card-text">{{ NewsTitle }}</h5>
-        <p class="card-text">
+        <p class="card-text">{{ NewsAbstract }}</p>
-          This is a wider card with supporting text below as a natural lead-in
-          to additional content. This content is a little bit longer.
-        </p>
         <div class="d-flex justify-content-between align-items-center">
           <div class="btn-group">
             <button type="button" class="btn btn-sm btn-outline-secondary">
               Read More...
             </button>
           </div>
-          <small class="text-muted">9 mins</small>
+          <small class="text-muted">{{ NewsMinutesToRead }} mins</small>
         </div>
       </div>
     </div>
@@ -36,7 +24,24 @@
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      NewsId: this.id,
+      NewsTitle: this.title,
+      NewsImage: this.image,
+      NewsAbstract: this.abstract,
+      NewsMinutesToRead: this.readmin,
+    };
+  },
+  props: {
+    id: { type: Number },
+    title: { type: String },
+    image: { type: String },
+    abstract: { type: String },
+    readmin: { type: Number },
+  },
+};
 </script>
 
 <style></style>