Add Login Modal and pop up

src/App.vue

@@ -1,11 +1,12 @@
 <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"
@@ -17,6 +18,7 @@
 <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,13 @@ export default {
         imageUrl: "",
         trustworthiness: 0.0,
       },
-      detectResultShow: false,
+      showDetectResult: false,
     };
   },
   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,19 +47,29 @@
           />
           <circle cx="12" cy="13" r="4" />
         </svg>
-        <strong>EasySkin</strong>
+        <strong>自求多肤</strong>
       </a>
-      <button
+      <div>
-        class="navbar-toggler"
+        <button
-        type="button"
+          type="button"
-        data-bs-toggle="collapse"
+          class="btn btn-outline-light mx-3"
-        data-bs-target="#navbarHeader"
+          data-bs-toggle="modal"
-        aria-controls="navbarHeader"
+          data-bs-target="#loginModal"
-        aria-expanded="false"
+        >
-        aria-label="Toggle navigation"
+          Login
-      >
+        </button>
-        <span class="navbar-toggler-icon"></span>
+        <button
-      </button>
+          class="navbar-toggler"
+          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>