From 87dd2a3359dc670232c18e1332fd1193ee1f9194 Mon Sep 17 00:00:00 2001
From: Dragon <>
Date: Wed, 13 Mar 2024 13:38:21 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/login/auth.png      | Bin 0 -> 612 bytes
 src/assets/images/login/close.png     | Bin 0 -> 621 bytes
 src/assets/images/login/company.png   | Bin 0 -> 343 bytes
 src/assets/images/login/eye-close.png | Bin 0 -> 556 bytes
 src/assets/images/login/eye-open.png  | Bin 0 -> 440 bytes
 src/assets/images/login/lock.png      | Bin 0 -> 408 bytes
 src/assets/images/login/phone.png     | Bin 0 -> 309 bytes
 src/assets/images/login/user.png      | Bin 0 -> 539 bytes
 src/views/login/components/Login.vue  | 270 ++++++++++++++++++++++++++
 src/views/login/index.vue             |  14 +-
 10 files changed, 281 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/images/login/auth.png
 create mode 100644 src/assets/images/login/close.png
 create mode 100644 src/assets/images/login/company.png
 create mode 100644 src/assets/images/login/eye-close.png
 create mode 100644 src/assets/images/login/eye-open.png
 create mode 100644 src/assets/images/login/lock.png
 create mode 100644 src/assets/images/login/phone.png
 create mode 100644 src/assets/images/login/user.png

diff --git a/src/assets/images/login/auth.png b/src/assets/images/login/auth.png
new file mode 100644
index 0000000000000000000000000000000000000000..2edd593b0c2894497ca075ba0dd2829b7e8ad007
GIT binary patch
literal 612
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU3?z3ec*Fy#x&WULS0KG&#fn+8X3d;A6G*}t
zv%vt!oik_7s#U9i44?pz4H1VchN}lM=FXivfBt-+6q+oW2wV$LJp53n6VL^kB|(0{
z3~V{S?w|VD8fllV%Ja^}R7dpH(F2R7b(YHtJioYk?ed#D8!KPTPlyk&<5OPAz`&T}
z>Eak-ar)|{+hwZ^L|n~1cid+=Qnh~V-n0MzA7tK`CA@Op^>gfO$;O=8-6!s=1Ze$`
z&lhvDs9y1OFWZIMy7N)##SL%866UR4KKW|aaz-yvmQ^eltW7^(R*UX^s+*Uxp!5EQ
z7rBo*irp5~7DXz0d=pgG@7vLwH<K-HR>{qS=VpFgkix{e*SMmo!mFlL{r}nW{THtm
zRDRzda`4XAR~eIU`-YvXU|suL*?aYt4MOc4v*yQf-waT9dGv`X-dXW^&FtW9`s<H1
zKHjl+5x2DTkprK0_bgUlCg8=CR`x0Gtx3xjdtucl2bmVFvYd1J^g^B^$%)~SO=cSe
zylw9NypnJ%dC5*Y(}2^w?ZNZ5EZP6e?u4%Ui#LY*kGwy&_kK{$gU8PwFq^gdeBgW=
zrMD*f#}rSe8}a@>>T=3vMIA2w@Yc3@-BWQRx6f}To?L&V!L!YbSKzel6t+VG7rfpD
sN$M<{#4b|E5*TwLxl2d;iT@}5`|KL4zifQ@0T@{fp00i_>zopr0Eb*DIRF3v

literal 0
HcmV?d00001

diff --git a/src/assets/images/login/close.png b/src/assets/images/login/close.png
new file mode 100644
index 0000000000000000000000000000000000000000..510b19b11b7e55bd041e1252c0922d43b5771a25
GIT binary patch
literal 621
zcmeAS@N?(olHy`uVBq!ia0vp^79h;Q3?%1AoYnzS$pJngu0Z-fjlnEe-UUEw6iR~p
zf*B+pawzh*JT?CI=El{W7|VOna$jzrKfQZde`RKbj)>ap{?|7d7#L@Ix;Tb-9KRZN
zeNnRlPiWw(wO(sW%Rl^&ujJ*J{xIY7H5<bs1xrtbgYUf$ol27Fo}_wzLC~yXT}xkk
z=hnlW)<sf>l7%zRhA&yhuI8Wa{5!{YnXJT1@wIETBYd8<&Jc~=rt>Z3^6s!KlhCBd
zc+;Z2yyiQmEOA-7Kh$l~l9I1>or_bha%xR{cq&YLPIb=Dk0)BT{@eI>zi#!sFL5$Q
zYG3Brby};dzf(%tHh14vrFms)0S8aBCAe#^QRF-I@%ia%^|qpo0#k3Llr=04`J*Lw
zR86n1V(BB!s^*RCEvBb`oZZ>l^H9n(zoDvmedQ{D)tzoxF@9T2H!qoXIdYNgHIH6y
z)88{)`7_GcLd6~KB~&oqIl5qRbMY6$f_g!V6R&fR#mdG6G^{h~JJ`Z%cj?&AU8>@H
zetO7@AJHoKRrN^Z=3MTb)~zl++ub}IB`Q1)STcFqE^5pOzW8Lp;YNRkno|!a-_c+F
zWXGC)8c()Io_MjG`ENwxeD^QSJ%5=t%;)<x`*7Ww8|!6m+a%l;O=)h)JvqTwVclC7
dvt9Q3^|!A^OT6CRX$g!_22WQ%mvv4FO#rq0O8Ec)

literal 0
HcmV?d00001

diff --git a/src/assets/images/login/company.png b/src/assets/images/login/company.png
new file mode 100644
index 0000000000000000000000000000000000000000..7e1b687947c294bb9101825ffbeb5446c1ca0cea
GIT binary patch
literal 343
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU3?z3ec*Fy#zyO~RS0FuW)~uOe0A#?~KmiCB
zP9lrUo;@3`WzL*A^XAQ)J9jQbWVJ^4H=v<XB|(0{3_BJyq)q9`T)VF*Y4fgj&$%`F
zd6$-G$cveqt>#Gqs+#TT;uvCa`tFs3LQM(+4T+kb6LcedbnpLnoPBGd#>%A^x&NuB
z?n}JE9P-q};_JLUOA_sC+cGuMK70^e^=;}u*4Zz@|1k#!pECX+<F~qK;S9&>MYGuV
z%&M;Ca=M``wJeTh?UD)2=Ph1jpDGGyH(tkP?YPsIr+CSyc1;<nh98?E8NB1=4zyeq
t{O;qyA85Yu;<8*lnLB+adqV~9GFZi^D^9<ev<>J?22WQ%mvv4FO#qCkl}i8s

literal 0
HcmV?d00001

diff --git a/src/assets/images/login/eye-close.png b/src/assets/images/login/eye-close.png
new file mode 100644
index 0000000000000000000000000000000000000000..13ef2f7351feb245838bda6b539fb54fad83413b
GIT binary patch
literal 556
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU3?z3ec*Fy#oB*E?S0FuS&YYPuXU?8Id)BO3
z>({S`uz@6y3zPzqm;j;}A`VfBre^8VrEqbeVjvp`mJ2F_>{BiY@(X5Ad7Au_?W<f#
zjNqn)9rcyjjyBhi?U*&S?{1)%F~{rE`z6lF-wAADU|{s|ba4!^IQ@3Y>rG7tJS{67
zxTowE4+!}3=J)=`p2^%6M<wMB{AK2ezv0WlV*mC^t-83|Ld%YYdcU+n<9D(-%(yDN
zW?kqu-c`&E9NMl=%Oo6CGPN!*+dI|2?$wXEI_d3pOd8vkFR7TED8MaP{E*Y((N~^`
zPdbb<XZt<kbNG95>yzM(yRR<f^<dp;p8f7CgI@8u;<cSmUdA*W&t`pgptE@A9K{K<
zPtPcN)hf-P`6K6@hjY==Ne2v?-LKDeN<S%8F<tGzMRwK+x90Gzk$JI3)P2$gv*lam
zloPIQFFX6>$*Zd8r|chWGM(2WkbBoz?}?>u)`^7=PD(E+PI=C@Z-v?S-s)+mpXLgc
zf1buPCAdIu;k32h+wE9ay}$bW+S7w=$Fx1pf4Vm7=+wopPh8*IvmxVA`ljvc*X*)-
xH)F%@*^Bh2hSknra_ZTYkN4&u^56Z1Kh;rvdF-MlMqo5Bc)I$ztaD0e0ssRW4BY?#

literal 0
HcmV?d00001

diff --git a/src/assets/images/login/eye-open.png b/src/assets/images/login/eye-open.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f828e849b245f21dbf95be2869f037f87bc6067
GIT binary patch
literal 440
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU3?z3ec*Fy#v;dzFS0Fue=FD~L*3FtVYxeBf
zKyuEUIY1F00|<~AKsHbTP!>%b$c1PGX#i`1s05NguxiyRAlV|uxdv#HVo8u+FvEAY
z9y>Mp=XZ~7ncq;JlOgot`u+_wr&bjuMF)7BNs4glOK$?X^?|30V~EA+H<ND)H5u@@
zu3hR{cIW%kKmYx$I{ET4*wbnr?<<h@bIzE2al!u+@2_23SN_kuR8Q@Wsph%(jox_`
zlTPZty%V_k?B`mMx1V>W*={S0W<K_7S(x_gx9Zy&h1B!j+=-Z{$7uFGhIP%8+PR*~
z)=ZPtUQqQ^>A<Saz@rn_=qN0^n91dBSjv+bxlG{trnp02zOd*iT-;@};@#AgsC=ew
z_Hu^Drg<Lu3q=-N?`?EuKDQv?@q#_AUIkfPGfG(x&wuyB_~GN1#Sb28^O(ENH{&+X
ls}R}66J8O+9_ud5z~IQMSb03$A_VAH22WQ%mvv4FO#rD|#@he@

literal 0
HcmV?d00001

diff --git a/src/assets/images/login/lock.png b/src/assets/images/login/lock.png
new file mode 100644
index 0000000000000000000000000000000000000000..7881504d54d7933d56b542ca1849fd8425c4b89d
GIT binary patch
literal 408
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU3?z3ec*Fy#%mAMdS0FtL24>HmJ$LS0AUSj9
zOdz>r$r1<~CO-=(0%QYafdI$=%FdfN4@g1;A<C96T?%2q#er&o>Rn=P8v-p;Dhcun
zW^nA;7$aNoEsb06?z&bp_7{(K&-77~e|zT00>Nc<rD1N;6|zj_K-GIZT^vI!PG7xp
zov&Geq4nXeQvye9t<V3qPw^HGR#u36Rj>L{S-@$>9K+D|?H}h=%AWnW`uhdJVwHPE
z3&ke#u=~d6O=pyl`WyP(Vc{GDrl4>0on!k17tCW94cMi?e&E?bVT~Arh<}e6ZZ^Cu
zlHV);>c`@*4*s4p-U|KUd#~pyZE#adj&yJ2JiR(FvvuLqNiw3VwuM$Jyl?1x-ym}T
z1>cD!0+VF_RP5Q{)uSc7CGF5LR_Vu*!V^^;_0?Z78>T2NT^)195$F#FPgg&ebxsLQ
E0ECXT1ONa4

literal 0
HcmV?d00001

diff --git a/src/assets/images/login/phone.png b/src/assets/images/login/phone.png
new file mode 100644
index 0000000000000000000000000000000000000000..0516198bf2463cbb14509f4b9271b5c1b7f030a1
GIT binary patch
literal 309
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU3?z3ec*FxKzW|>QS0FtT3}(%mHGB4KAPEOR
zVF-KPym>$dL>XK$P-M=WIY2E-mo8nna3Mr|b8f3K&_v0SAirRS1q}}!>^FV7cx+#{
z(u?~u3v(j<%=82~UzS^WHvtvZdb&7<Se$-)#gebtK*aUp43&8Xk~81^Gw;&)$bOSa
zie>vBt6uK?w>SQpo^|W@?Q@pBYqFO7Hkdy3f^(?YWElaLnuGdQrEK$<?j2ve$5yW*
zZ$+2JW`@-0g<*kd%fs2%I*WaIuz3OVbk^+bY{u}KaQ@mNhD(zt$*p{I(>jFNNI<Gl
T!C);T&>;+-u6{1-oD!M<(y@YW

literal 0
HcmV?d00001

diff --git a/src/assets/images/login/user.png b/src/assets/images/login/user.png
new file mode 100644
index 0000000000000000000000000000000000000000..81c9830dd081ae05c032a401dacb1c960b703a2a
GIT binary patch
literal 539
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU3?z3ec*Fy#(g2?jS0Fue=FC~MX3d*7Z{^CB
zKn8>hWB|eJ*|S%ySOH-GNr)7LoI7{!oH=tqiooJPL7-v?8!QIWi)<875U!xpEOtK7
zVzrVWzhH*nEBH8`pI;cz5XO>f_VxX(D^oQ^PH&jl>8OAIsJF!4ZKe6Kax;E>=Cfd6
zVAS_?aSX9IeRcBfX-x(^47m#x6gV`xzP~>Azy48>W!Axx?>8&CWfeRppEMU*a?-y#
z_RsRW$w!-Cd{{nRY)^;te)GkLkL2FHP<W~)Zry?%c730@R@5f3Jd1Q)(YW@FY{Sdl
zzhpBadlH|v1ZzC0((;&VFxy$L>vLex#Ir7o8V<Ia*lm=O`%%AEvFs4<iUYUjoz>>j
zzRfZ*hkf@`<EZcJJ98K=FR!#u6#h8z!bblz@mPjHgO5cIdn14C-Ew51kL|6ZR@a%!
z4FAqqf23c|JNu={3v>7A?Luc1n9iM()jOBu_)spyD66UI?~OH$Gq*Uuez<sT(>LS!
zVpqy+1eO|{OSHVzzWCFbdm>i~XY`yr;%IpI%2)SG=LB9pth$r(k!_;zso?yRiSM?V
jt#gj#d2KPXhI@a=JZ0yLD<yS-fz9CQ>gTe~DWM4fBEtnc

literal 0
HcmV?d00001

diff --git a/src/views/login/components/Login.vue b/src/views/login/components/Login.vue
index e69de29..184813d 100644
--- a/src/views/login/components/Login.vue
+++ b/src/views/login/components/Login.vue
@@ -0,0 +1,270 @@
+<script lang="ts" setup>
+import { computed, reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useMessage } from 'naive-ui'
+
+// import captcha from './captcha.vue'
+import { PageEnum } from '@/enums/pageEnum'
+import { useUserStore } from '@/store/modules/user'
+import { ResultEnum } from '@/enums/httpEnum'
+import { getFilter, setFilter } from '@/api/home/filter'
+import { getConfig } from '@/api/system/user'
+import { asideMap } from '@/config/aside'
+
+const emit = defineEmits(['close'])
+interface FormState {
+  enterprisecode?: string
+  username: string
+  password: string
+  captcha: string
+}
+
+const formRef = ref()
+const message = useMessage()
+const loading = ref(false)
+const autoLogin = ref(true)
+const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME
+const userStore = useUserStore()
+const router = useRouter()
+const route = useRoute()
+const show = ref(false)
+const formInline: FormState = reactive({
+  enterprisecode: '三方系统标识8',
+  username: '13311111111',
+  password: '123456',
+  captcha: '',
+})
+const tab = ref(0)
+
+const rules = {
+  enterprisecode: { required: true, message: '请输入企业编码', trigger: 'blur' },
+  username: { required: true, message: '请输入用户名', trigger: 'blur' },
+  password: { required: true, message: '请输入密码', trigger: 'blur' },
+  captcha: { required: true, message: '请输入验证码', trigger: 'blur' },
+}
+
+function handleSubmit(e) {
+  e.preventDefault()
+  formRef.value.validate(async (errors) => {
+    if (!errors) {
+      const { username, password, enterprisecode, captcha } = formInline
+      message.loading('登录中...')
+      loading.value = true
+
+      const params = {
+        logincode: captcha,
+        username,
+        password,
+        codetoken: userStore.getCapToken,
+        agentcode: enterprisecode,
+      }
+
+      try {
+        const { code, message: msg } = await userStore.login(params)
+        await userStore.getInformation()
+        const response = await getFilter()
+
+        // 添加个默认显示配置
+        if (response.data === null) {
+          const systemConfig = await getConfig()
+          const onList: string[] = []
+          Object.keys(systemConfig.data).forEach((key) => {
+            // 系统配置开启且个人配置开启
+            if (key.startsWith('iz') && systemConfig.data[key] === 'Y' && asideMap[key]?.isDefaultFilter)
+              onList.push(key)
+          })
+          await setFilter({ searchcount: onList.join(',') })
+        }
+
+        message.destroyAll()
+        if (code === ResultEnum.SUCCESS) {
+          const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
+          message.success('登录成功，即将进入系统')
+          if (route.name === LOGIN_NAME)
+            router.replace('/')
+          else router.replace(toPath)
+        }
+        else {
+          message.info(msg || '登录失败')
+        }
+      }
+      finally {
+        loading.value = false
+      }
+    }
+    else {
+      message.error('请填写完整信息，并且进行验证码校验')
+    }
+  })
+}
+
+function close() {
+  console.log(888)
+  emit('close')
+}
+
+function switchTab(type: number) {
+  tab.value = type
+}
+
+function computedForm() {
+  return !formInline.enterprisecode || !formInline.username || !formInline.password
+}
+</script>
+
+<template>
+  <div class="form-login">
+    <img class="img-close" src="@/assets/images/login/close.png" alt="" @click="close">
+    <div class="tab">
+      <div :class="{ 'tab-item-active': tab === 0 }" class="tab-item" @click="switchTab(0)">
+        密码登录
+        <div class="line" />
+      </div>
+      <div :class="{ 'tab-item-active': tab === 1 }" class="tab-item" @click="switchTab(1)">
+        短信登录
+        <div class="line" />
+      </div>
+    </div>
+    <div class="form-1">
+      <n-form ref="formRef" label-placement="left" size="large" :model="formInline" :rules="rules">
+        <n-form-item class="form-item" path="enterprisecode">
+          <n-input v-model:value="formInline.enterprisecode" class="item-input" placeholder="请输入企业编码">
+            <template #prefix>
+              <svg-icon size="20" name="enterprise" />
+            </template>
+          </n-input>
+        </n-form-item>
+        <n-form-item class="form-item" path="username">
+          <n-input v-model:value="formInline.username" class="item-input" placeholder="请输入用户名">
+            <template #prefix>
+              <svg-icon size="20" name="account" />
+            </template>
+          </n-input>
+        </n-form-item>
+        <n-form-item class="form-item" path="password">
+          <n-input v-model:value="formInline.password" class="item-input" type="password" show-password-on="click" placeholder="请输入密码">
+            <template #prefix>
+              <svg-icon size="20" name="password" />
+            </template>
+          </n-input>
+        </n-form-item>
+        <n-form-item>
+          <n-button :class="{ 'btn-disabled': computedForm() }" class="btn" type="primary" size="large" :loading="loading" block @click="handleSubmit">
+            登录
+          </n-button>
+        </n-form-item>
+        <n-form-item class="default-color">
+          <div class="w-full flex justify-between">
+            <div class="flex-initial">
+              <n-checkbox v-model:checked="autoLogin">
+                记住账号
+              </n-checkbox>
+            </div>
+            <div class="flex-initial order-last">
+              <a href="javascript:">忘记密码</a>
+            </div>
+          </div>
+        </n-form-item>
+      </n-form>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.form-login {
+  width: 420px;
+  height: 417px;
+  box-sizing: border-box;
+  background: linear-gradient(136deg,rgba(226,236,255,0.80) 3%, rgba(251,251,251,0.80) 97%);
+  border: 1px solid #ffffff;
+  border-radius: 6px;
+  box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.04);
+  backdrop-filter: blur(12px);
+  position: relative;
+  padding: 48px 27px 0;
+
+  .img-close{
+    position: absolute;
+    right: 0;
+    top: -44px;
+    width: 28px;
+    height: 28px;
+    cursor: pointer;
+  }
+
+  .tab{
+    display: flex;
+    .tab-item{
+      width: 72px;
+      height: 25px;
+      font-size: 18px;
+      font-family: PingFang SC, PingFang SC-Medium;
+      font-weight: 600;
+      text-align: left;
+      color: #666666;
+      line-height: 33px;
+      margin-right: 24px;
+
+      &-active{
+        width: 96px;
+        height: 33px;
+        font-size: 24px;
+        font-family: PingFang SC, PingFang SC-Medium;
+        font-weight: 600;
+        text-align: left;
+        color: #507afd;
+        line-height: 33px;
+
+        .line{
+          background: linear-gradient(234deg,#96aaff 0%, #1c43ff 100%);
+        }
+      }
+
+      .line{
+        width: 32px;
+        height: 4px;
+        border-radius: 2px;
+        margin: 0 auto;
+        margin-top: 9px;
+      }
+    }
+  }
+
+  .form-1{
+    margin-top: 29px;
+
+    .form-item{
+      height: 60px;
+    }
+
+    .item-input{
+      width: 366px;
+      // height: 44px;
+      background: rgba(255,255,255,0.50);
+      border-radius: 4px;
+    }
+
+    .btn{
+      width: 366px;
+      height: 44px;
+      background: linear-gradient(234deg,#96aaff 0%, #1c43ff 100%);
+      border-radius: 3px;
+
+      &-disabled{
+        opacity: 0.5;
+        background: linear-gradient(234deg,#96aaff 0%, #1c43ff 100%);
+      }
+    }
+  }
+
+  .order-last{
+    font-size: 14px;
+    font-family: PingFang SC, PingFang SC-Regular;
+    font-weight: Regular;
+    color: #507afd;
+  }
+}
+::v-deep(.n-form-item-feedback--error) {
+  // color: #FF4E4F !important;
+}
+</style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index df36c84..f0760b6 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -3,6 +3,7 @@ import { reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useMessage } from 'naive-ui'
 import captcha from './captcha.vue'
+import Login from './components/Login.vue'
 import { PageEnum } from '@/enums/pageEnum'
 import { useUserStore } from '@/store/modules/user'
 import { ResultEnum } from '@/enums/httpEnum'
@@ -25,7 +26,7 @@ const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME
 const userStore = useUserStore()
 const router = useRouter()
 const route = useRoute()
-
+const show = ref(true)
 const formInline: FormState = reactive({
   enterprisecode: '三方系统标识8',
   username: '13311111111',
@@ -94,13 +95,17 @@ function handleSubmit(e) {
     }
   })
 }
+
+function showLogin() {
+  show.value = true
+}
 </script>
 
 <template>
   <div class="wrap-login">
     <div class="content">
       <div class="header f-c-b">
-        <img class="img-logo" src="../../assets/images/login/logo.png" alt="">
+        <img class="img-logo" src="@/assets/images/login/logo.png" alt="">
         <div class="btn-login f-c-c">
           登录
         </div>
@@ -130,7 +135,7 @@ function handleSubmit(e) {
         企业级 SaaS 智能审批解决方案
       </div>
       <img class="img-icon-2" src="../../assets/images/login/img-icon-2.png" alt="">
-      <div class="btn-login-2 f-c-c">
+      <div class="btn-login-2 f-c-c" @click="showLogin">
         立即登录 ->
       </div>
       <div class="item-wrap f-c">
@@ -182,6 +187,9 @@ function handleSubmit(e) {
       </div>
       <img class="item-footer" src="../../assets/images/login/footer.png" alt="">
     </div>
+    <n-modal v-model:show="show" :mask-closable="false">
+      <Login @close="show = false" />
+    </n-modal>
   </div>
 </template>