login form

src/components/Tabs.vue

@@ -88,6 +88,7 @@
       v-if="ejectModalVisible"
       :handleModalVisible="handleModalVisible"
     />
+    <LoginModal />
   </div>
 </template>
 
@@ -95,6 +96,7 @@
 import EjectLiquid from 'cpns/modals/EjectLiquid'
 import { useRouter } from 'vue-router'
 import { useTabStore } from '@/store'
+import LoginModal from 'cpns/modals/LoginModal'
 import { ref } from 'vue'
 
 const router = useRouter()

src/components/modals/LoginModal.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="login_modal">
+    <div class="modal_content">
+      <div class="modal_header">
+        <p class="title">登陆</p>
+        <img :src="Close" alt="关闭" class="close_img" />
+      </div>
+      <div class="main_form">
+        <div class="form_wrap">
+          <img :src="CloseEye" class="eye" alt="" />
+          <div class="login_btn"></div>
+          <div class="cancel_btn"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Close from '@/assets/img/close.png'
+import Eye from '@/assets/img/eye.png'
+import CloseEye from '@/assets/img/close_eye.png'
+</script>
+
+<style lang="scss" scoped>
+.login_modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(5, 14, 42, 0.7);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .modal_content {
+    width: 700px;
+    height: 590px;
+    border-radius: 20px;
+    background: #ffffff;
+    box-sizing: border-box;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    .modal_header {
+      width: 700px;
+      height: 91px;
+      box-sizing: border-box;
+      border-radius: 20px 20px 0px 0px;
+      background: #f0f6fb;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 41px;
+      .title {
+        font-family: Source Han Sans CN;
+        font-size: 26px;
+        font-weight: 500;
+        line-height: normal;
+        letter-spacing: 0.04em;
+        color: #9395a0;
+      }
+      .close_img {
+        width: 36px;
+        height: 36px;
+      }
+    }
+    .main_form {
+      flex: 1;
+      box-sizing: border-box;
+      padding: 69px 130px 71px 126px;
+      .form_wrap {
+        width: 444px;
+        height: 359px;
+        background: url(../../assets/img/login.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        .eye {
+          position: absolute;
+          right: 4px;
+          bottom: 219px;
+          width: 30px;
+          height: 23px;
+        }
+        .login_btn {
+          position: absolute;
+          left: 0;
+          bottom: 90px;
+          width: 443px;
+          height: 70px;
+          border-radius: 35px;
+        }
+        .cancel_btn {
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          width: 443px;
+          height: 70px;
+          border-radius: 35px;
+        }
+      }
+    }
+  }
+}
+</style>