feat
This commit is contained in:
@@ -1,25 +1,6 @@
|
||||
<template>
|
||||
<div class="login-bg">
|
||||
<div class="container">
|
||||
<div class="scan-login-btn" @click="showQr = true">
|
||||
<svg class="scan-icon" viewBox="0 0 24 24" width="20" height="20">
|
||||
<rect x="3" y="3" width="7" height="7" rx="2" fill="none" stroke="#00308f" stroke-width="2" />
|
||||
<rect x="14" y="3" width="7" height="7" rx="2" fill="none" stroke="#00308f" stroke-width="2" />
|
||||
<rect x="14" y="14" width="7" height="7" rx="2" fill="none" stroke="#00308f" stroke-width="2" />
|
||||
<rect x="3" y="14" width="7" height="7" rx="2" fill="none" stroke="#00308f" stroke-width="2" />
|
||||
</svg>
|
||||
<span>扫码登录</span>
|
||||
</div>
|
||||
<a-modal v-model:visible="showQr" title="扫码登录" :footer="false" width="320px">
|
||||
<div class="qr-modal-content">
|
||||
<img
|
||||
src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=login-demo"
|
||||
alt="二维码"
|
||||
style="width: 200px; height: 200px; display: block; margin: 0 auto"
|
||||
/>
|
||||
<div style="text-align: center; margin-top: 12px; color: #888">请使用微信/钉钉等扫码登录</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
<div class="logo">
|
||||
<img alt="logo" src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image" />
|
||||
<div class="logo-text">智能运维管理系统</div>
|
||||
@@ -128,32 +109,4 @@ export default defineComponent({
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.scan-login-btn {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 32px;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: #f4f8ff;
|
||||
color: #00308f;
|
||||
border-radius: 18px;
|
||||
padding: 6px 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px 0 rgba(31, 38, 135, 0.08);
|
||||
transition: background 0.2s;
|
||||
&:hover {
|
||||
background: #e0e7ff;
|
||||
}
|
||||
.scan-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.qr-modal-content {
|
||||
padding: 12px 0 0 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user