Now the news album works.

src/App.vue

@@ -1,22 +1,24 @@
 <template>
+  <login-modal id="loginModal"></login-modal>
   <header>
     <nav-bar></nav-bar>
   </header>
   <main class="container">
     <image-form @detect-responsed="onDetectResponsed"></image-form>
     <detect-result
-      v-show="detectResultShow"
+      v-show="showDetectResult"
       :diseaseName="detectResult.diseaseName"
       :imageUrl="detectResult.imageUrl"
       :trustworthiness="detectResult.trustworthiness"
     ></detect-result>
-    <news-album></news-album>
+    <news-album :news="news"></news-album>
   </main>
 </template>
 
 <script>
 import DetectResult from "./components/DetectResult.vue";
 import ImageForm from "./components/ImageForm.vue";
+import LoginModal from "./components/LoginModal.vue";
 import NavBar from "./components/NavBar.vue";
 import NewsAlbum from "./components/NewsAlbum.vue";
 
@@ -25,6 +27,7 @@ export default {
   components: {
     DetectResult,
     ImageForm,
+    LoginModal,
     NavBar,
     NewsAlbum,
   },
@@ -35,13 +38,39 @@ export default {
         imageUrl: "",
         trustworthiness: 0.0,
       },
-      detectResultShow: false,
+      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: {
     onDetectResponsed(res) {
       this.detectResult = res.data;
-      this.detectResultShow = true;
+      this.showDetectResult = true;
     },
   },
 };

src/components/ImageForm.vue

@@ -2,10 +2,8 @@
   <section class="py-5 text-center container">
     <div class="row py-lg-5">
       <div class="col-lg-6 col-md-8 mx-auto">
-        <h1 class="fw-light">Skin Disease Detection</h1>
+        <h1 class="fw-light">皮肤病在线诊断</h1>
-        <p class="lead text-muted">
+        <p class="lead text-muted">未雨绸缪，自求多福</p>
-          Know more about your skin, before it's too late!
-        </p>
         <form enctype="multipart/form-data" style="display: none">
           <input
             ref="skinImgInput"
@@ -19,7 +17,7 @@
           class="btn btn-primary my-2"
           @click="onPickClicked"
         >
-          Pick a Image
+          上传图片
         </button>
       </div>
     </div>

src/components/LoginModal.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="modal fade" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog modal-dialog-centered">
+      <div class="modal-content rounded-5 shadow">
+        <div class="modal-header p-5 pb-4 border-bottom-0">
+          <!-- <h5 class="modal-title">Modal title</h5> -->
+          <h2 class="fw-bold mb-0">登 录</h2>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+
+        <div class="modal-body p-5 pt-0">
+          <form class="">
+            <div class="form-floating mb-3">
+              <input
+                type="email"
+                class="form-control rounded-4"
+                id="floatingInput"
+                placeholder="name@example.com"
+              />
+              <label for="floatingInput">手机号</label>
+            </div>
+            <div class="form-floating mb-3">
+              <input
+                type="password"
+                class="form-control rounded-4"
+                id="floatingPassword"
+                placeholder="Password"
+              />
+              <label for="floatingPassword">密码</label>
+            </div>
+            <button
+              class="w-100 mb-2 btn btn-lg rounded-4 btn-primary"
+              type="submit"
+            >
+              登录
+            </button>
+            <button
+              class="w-100 mb-2 btn btn-lg rounded-4 btn-success"
+              type="submit"
+            >
+              注册
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>

src/components/NavBar.vue

@@ -47,8 +47,17 @@
           />
           <circle cx="12" cy="13" r="4" />
         </svg>
-        <strong>EasySkin</strong>
+        <strong>自求多肤</strong>
       </a>
+      <div>
+        <button
+          type="button"
+          class="btn btn-outline-light mx-3"
+          data-bs-toggle="modal"
+          data-bs-target="#loginModal"
+        >
+          登录
+        </button>
         <button
           class="navbar-toggler"
           type="button"
@@ -62,6 +71,7 @@
         </button>
       </div>
     </div>
+  </div>
 </template>
 
 <script>

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>