feat: 默认展示二维码登录
This commit is contained in:
@@ -304,6 +304,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.tip-old-user{
|
.tip-old-user{
|
||||||
|
line-height: 1.5;
|
||||||
margin: 5px 0;
|
margin: 5px 0;
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
color: #F56C6C;
|
color: #F56C6C;
|
||||||
@@ -325,8 +326,8 @@ onMounted(() => {
|
|||||||
box-shadow: var(--default);
|
box-shadow: var(--default);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
animation: gradient 10s linear infinite;
|
animation: gradient 10s linear infinite;
|
||||||
background: linear-gradient(45deg, #85d5e757, #7a9ed254, #ba6ac93d, #de54c217, #f86b2d4f);
|
//background: linear-gradient(45deg, #85d5e757, #7a9ed254, #ba6ac93d, #de54c217, #f86b2d4f);
|
||||||
background: #00DB73;
|
//background: #00DB73;
|
||||||
|
|
||||||
}
|
}
|
||||||
.tip-old-user-bind{
|
.tip-old-user-bind{
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ const loginFormType = computed(() => loginFromStore.LoginFormType);
|
|||||||
// 使用 defineModel 定义双向绑定的 visible(需 Vue 3.4+)
|
// 使用 defineModel 定义双向绑定的 visible(需 Vue 3.4+)
|
||||||
const visible = defineModel<boolean>('visible');
|
const visible = defineModel<boolean>('visible');
|
||||||
const showMask = ref(false); // 控制遮罩层显示的独立状态
|
const showMask = ref(false); // 控制遮罩层显示的独立状态
|
||||||
const isQrMode = ref(false);
|
const isQrMode = ref(true);
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const sessionStore = useSessionStore();
|
const sessionStore = useSessionStore();
|
||||||
@@ -34,7 +34,7 @@ watch(
|
|||||||
(newVal) => {
|
(newVal) => {
|
||||||
if (newVal) {
|
if (newVal) {
|
||||||
// 恢复默认
|
// 恢复默认
|
||||||
isQrMode.value = false;
|
isQrMode.value = true;
|
||||||
// 显示时立即展示遮罩
|
// 显示时立即展示遮罩
|
||||||
showMask.value = true;
|
showMask.value = true;
|
||||||
}
|
}
|
||||||
@@ -284,13 +284,15 @@ function openContact() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-section">
|
<div class="right-section">
|
||||||
<!-- 隐藏二维码登录 -->
|
|
||||||
<div class="mode-toggle" @click.stop="toggleLoginMode">
|
<div class="mode-toggle" @click.stop="toggleLoginMode">
|
||||||
<SvgIcon v-if="!isQrMode" name="erweimadenglu" />
|
<SvgIcon v-if="!isQrMode" name="erweimadenglu" />
|
||||||
<SvgIcon v-else name="zhanghaodenglu" />
|
<SvgIcon v-else name="zhanghaodenglu" />
|
||||||
</div>
|
</div>
|
||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<div v-if="!isQrMode" class="form-box">
|
<div v-if="isQrMode" class="qr-container">
|
||||||
|
<QrCodeLogin />
|
||||||
|
</div>
|
||||||
|
<div v-else class="form-box">
|
||||||
<!-- 表单容器,父组件可以自定定义表单插槽 -->
|
<!-- 表单容器,父组件可以自定定义表单插槽 -->
|
||||||
<slot name="form">
|
<slot name="form">
|
||||||
<!-- 父组件不用插槽则显示默认表单 默认使用 AccountPassword 组件 -->
|
<!-- 父组件不用插槽则显示默认表单 默认使用 AccountPassword 组件 -->
|
||||||
@@ -357,9 +359,6 @@ function openContact() {
|
|||||||
</div>
|
</div>
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="qr-container">
|
|
||||||
<QrCodeLogin />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user