feat: 默认展示二维码登录

This commit is contained in:
Gsh
2025-08-30 23:13:46 +08:00
parent e69cd5a73c
commit 08084aa0bc
2 changed files with 9 additions and 9 deletions

View File

@@ -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{

View File

@@ -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>