✨登录新增二维码
This commit is contained in:
不做码农
parent
a5a4a42a96
commit
e62a10a6f2
@ -130,7 +130,7 @@
|
||||
<div class="loading-wrp">
|
||||
<span class="dot dot-spin"> <i></i> <i></i> <i></i> <i></i> </span>
|
||||
</div>
|
||||
<h5>Loading...</h5>
|
||||
<h5>正在加载系统资源...</h5>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
|
||||
@ -33,6 +33,7 @@
|
||||
"md-editor-v3": "^1.11.11",
|
||||
"nprogress": "0.2.0",
|
||||
"pinia": "^2.0.33",
|
||||
"qrcodejs2-fixes": "^0.0.2",
|
||||
"qs": "^6.11.0",
|
||||
"sortablejs": "^1.15.0",
|
||||
"vue": "^3.3.4",
|
||||
|
||||
1
src/assets/icons/svg/pc.svg
Normal file
1
src/assets/icons/svg/pc.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1691394989170" class="icon" viewBox="0 0 1170 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8595" xmlns:xlink="http://www.w3.org/1999/xlink" width="228.515625" height="200"><path d="M585.142857 365.714286m-36.571428 0a36.571429 36.571429 0 1 0 73.142857 0 36.571429 36.571429 0 1 0-73.142857 0Z" fill="#54C3F1" p-id="8596"></path><path d="M731.428571 365.714286m-36.571428 0a36.571429 36.571429 0 1 0 73.142857 0 36.571429 36.571429 0 1 0-73.142857 0Z" fill="#54C3F1" p-id="8597"></path><path d="M438.857143 365.714286m-36.571429 0a36.571429 36.571429 0 1 0 73.142857 0 36.571429 36.571429 0 1 0-73.142857 0Z" fill="#54C3F1" p-id="8598"></path><path d="M1060.571429 877.714286H109.714286a109.714286 109.714286 0 0 1-109.714286-109.714286V109.714286a109.714286 109.714286 0 0 1 109.714286-109.714286h950.857143a109.714286 109.714286 0 0 1 109.714285 109.714286v658.285714a109.714286 109.714286 0 0 1-109.714285 109.714286zM109.714286 73.142857a36.571429 36.571429 0 0 0-36.571429 36.571429v658.285714a36.571429 36.571429 0 0 0 36.571429 36.571429h950.857143a36.571429 36.571429 0 0 0 36.571428-36.571429V109.714286a36.571429 36.571429 0 0 0-36.571428-36.571429z" fill="#54C3F1" p-id="8599"></path><path d="M36.571429 658.285714h1097.142857v73.142857H36.571429zM402.285714 841.142857h73.142857v146.285714h-73.142857zM694.857143 841.142857h73.142857v146.285714h-73.142857z" fill="#54C3F1" p-id="8600"></path><path d="M292.571429 950.857143h585.142857v73.142857H292.571429z" fill="#54C3F1" p-id="8601"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
1
src/assets/icons/svg/qr.svg
Normal file
1
src/assets/icons/svg/qr.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1691394871411" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2379" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M480 544H368v-64h112V368h64v288h-64V544z m368 304V592h64v320H592v-64h256zM656 656v144h-64V592h208v64H656zM176 176v192h192V176H176z m-64-64h320v320H112V112z m544 64v192h192V176H656z m-64-64h320v320H592V112zM112 480h160v64H112v-64z m640 0h160v64H752v-64zM544 112v160h-64V112h64z m0 640v160h-64V752h64z m-368-96v192h192V656H176z m-64-64h320v320H112V592z m112-368h96v96h-96v-96z m0 480h96v96h-96v-96z m480-480h96v96h-96v-96z" fill="#5090F1" p-id="2380"></path></svg>
|
||||
|
After Width: | Height: | Size: 795 B |
@ -21,7 +21,7 @@
|
||||
background: #ffffff;
|
||||
// background-color: hsla(0, 0%, 100%, 0.3);
|
||||
width: var(--base-login-width);
|
||||
padding: 25px 15px 5px 15px;
|
||||
padding: 35px 15px 5px 15px;
|
||||
position: relative;
|
||||
|
||||
.input-icon {
|
||||
@ -68,6 +68,45 @@
|
||||
}
|
||||
.langSet {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
left: 20px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.scan-wrap {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
transition: all ease 0.3s;
|
||||
overflow: hidden;
|
||||
|
||||
.icon {
|
||||
width: 48px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
font-size: 48px;
|
||||
position: absolute;
|
||||
right: 1px;
|
||||
top: 0px;
|
||||
}
|
||||
.scan-delta {
|
||||
position: absolute;
|
||||
width: 35px;
|
||||
height: 70px;
|
||||
z-index: 2;
|
||||
top: 2px;
|
||||
right: 21px;
|
||||
background: var(--el-color-white);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.login-scan-container {
|
||||
padding: 0 20px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -1,9 +1,13 @@
|
||||
<template>
|
||||
<starBackground></starBackground>
|
||||
<div class="login">
|
||||
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form" v-if="!showQrLogin">
|
||||
<h3 class="title">{{ defaultSettings.title }}</h3>
|
||||
|
||||
<div class="scan-wrap" @click="handleShowQrLogin()">
|
||||
<svg-icon name="qr" class="icon" />
|
||||
<div class="scan-delta"></div>
|
||||
</div>
|
||||
<LangSelect title="多语言设置" class="langSet" />
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="loginForm.username" type="text" auto-complete="off" :placeholder="$t('login.account')">
|
||||
@ -52,6 +56,18 @@
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<div class="qr-wrap login-form" v-else>
|
||||
<h3 class="title">移动端扫码登录</h3>
|
||||
<div class="scan-wrap" @click="handleShowQrLogin()">
|
||||
<svg-icon name="pc" class="icon" />
|
||||
<div class="scan-delta"></div>
|
||||
</div>
|
||||
|
||||
<div class="login-scan-container">
|
||||
<div ref="imgContainerRef" id="imgContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<div class="el-login-footer">
|
||||
<div v-html="defaultSettings.copyright"></div>
|
||||
@ -67,6 +83,7 @@ import defaultSettings from '@/settings'
|
||||
import starBackground from '@/views/components/starBackground.vue'
|
||||
import LangSelect from '@/components/LangSelect/index.vue'
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import QRCode from 'qrcodejs2-fixes'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const router = useRouter()
|
||||
@ -161,6 +178,27 @@ function onAuth(type) {
|
||||
function handleForgetPwd() {
|
||||
proxy.$modal.msg('请联系管理员')
|
||||
}
|
||||
|
||||
const showQrLogin = ref(false)
|
||||
function handleShowQrLogin() {
|
||||
showQrLogin.value = !showQrLogin.value
|
||||
|
||||
if (showQrLogin.value) {
|
||||
nextTick(() => {
|
||||
generateCode()
|
||||
})
|
||||
}
|
||||
}
|
||||
// 生成二维码
|
||||
function generateCode() {
|
||||
document.getElementById('imgContainer').innerHTML = ''
|
||||
new QRCode(document.getElementById('imgContainer'), {
|
||||
text: 'https://qm.qq.com/cgi-bin/qm/qr?k=kgt4HsckdljU0VM-0kxND6d_igmfuPlL&authKey=r55YUbruiKQ5iwC/folG7KLCmZ++Y4rQVgNlvLbUniUMkbk24Y9+zNuOmOnjAjRc&noverify=0',
|
||||
width: 200,
|
||||
height: 200
|
||||
})
|
||||
}
|
||||
|
||||
getCode()
|
||||
getCookie()
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user