Now the news album works.

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></news-album-item>
+        <news-album-item
+          v-for="n in NewsList"
+          :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%"
-        height="225"
-        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>
+        :src="NewsImage"
+        :alt="NewsTitle"
+      />
 
       <div class="card-body">
-        <h5 class="card-text">My Title</h5>
-        <p class="card-text">
-          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>
+        <h5 class="card-text">{{ NewsTitle }}</h5>
+        <p class="card-text">{{ NewsAbstract }}</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>