src/App.vue

@@ -1,24 +1,22 @@
 <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="showDetectResult"
+      v-show="detectResultShow"
       :diseaseName="detectResult.diseaseName"
       :imageUrl="detectResult.imageUrl"
       :trustworthiness="detectResult.trustworthiness"
     ></detect-result>
-    <news-album :news="news"></news-album>
+    <news-album></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";
 
@@ -27,7 +25,6 @@ export default {
   components: {
     DetectResult,
     ImageForm,
-    LoginModal,
     NavBar,
     NewsAlbum,
   },
@@ -38,39 +35,13 @@ export default {
         imageUrl: "",
         trustworthiness: 0.0,
       },
-      showDetectResult: false,
+      detectResultShow: 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.showDetectResult = true;
+      this.detectResultShow = true;
     },
   },
 };

src/components/ImageForm.vue

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

src/components/LoginModal.vue

@@ -1,59 +0,0 @@
-<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,29 +47,19 @@
           />
           <circle cx="12" cy="13" r="4" />
         </svg>
-        <strong>自求多肤</strong>
+        <strong>EasySkin</strong>
       </a>
-      <div>
+      <button
-        <button
+        class="navbar-toggler"
-          type="button"
+        type="button"
-          class="btn btn-outline-light mx-3"
+        data-bs-toggle="collapse"
-          data-bs-toggle="modal"
+        data-bs-target="#navbarHeader"
-          data-bs-target="#loginModal"
+        aria-controls="navbarHeader"
-        >
+        aria-expanded="false"
-          登录
+        aria-label="Toggle navigation"
-        </button>
+      >
-        <button
+        <span class="navbar-toggler-icon"></span>
-          class="navbar-toggler"
+      </button>
-          type="button"
-          data-bs-toggle="collapse"
-          data-bs-target="#navbarHeader"
-          aria-controls="navbarHeader"
-          aria-expanded="false"
-          aria-label="Toggle navigation"
-        >
-          <span class="navbar-toggler-icon"></span>
-        </button>
-      </div>
     </div>
   </div>
 </template>

src/components/NewsAlbum.vue

@@ -1,21 +1,11 @@
 <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>
-          v-for="n in NewsList"
+        <news-album-item></news-album-item>
-          :key="n.id"
+        <news-album-item></news-album-item>
-          :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>
@@ -27,17 +17,6 @@ export default {
   components: {
     NewsAlbumItem,
   },
-  data() {
-    return {
-      NewsList: this.news,
-    };
-  },
-  props: {
-    news: {
-      type: Array,
-      default: () => null,
-    },
-  },
 };
 </script>
 

src/components/NewsAlbumItem.vue

@@ -1,22 +1,34 @@
 <template>
   <div class="col">
     <div class="card shadow-sm">
-      <img
+      <svg
         class="bd-placeholder-img card-img-top"
-        :src="NewsImage"
+        width="100%"
-        :alt="NewsTitle"
+        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>
 
       <div class="card-body">
-        <h5 class="card-text">{{ NewsTitle }}</h5>
+        <h5 class="card-text">My Title</h5>
-        <p class="card-text">{{ NewsAbstract }}</p>
+        <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>
         <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">{{ NewsMinutesToRead }} mins</small>
+          <small class="text-muted">9 mins</small>
         </div>
       </div>
     </div>
@@ -24,24 +36,7 @@
 </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>