Add Login Modal and pop up

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>
-        <p class="lead text-muted">
-          Know more about your skin, before it's too late!
-        </p>
+        <h1 class="fw-light">皮肤病在线诊断</h1>
+        <p class="lead text-muted">未雨绸缪，自求多福</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
-        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>
+        <button
+          type="button"
+          class="btn btn-outline-light mx-3"
+          data-bs-toggle="modal"
+          data-bs-target="#loginModal"
+        >
+          Login
+        </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>