feat: 在 SocialLinks 组件中使用 Teleport 包裹 WechatModal,优化模态框的渲染位置,同时调整 WechatModal 组件样式,增加相对定位和边距
This commit is contained in:
parent
ecd02793d4
commit
0022b86dda
@ -3,6 +3,7 @@ import { ref, computed } from "vue";
|
||||
import { useMouseInElement } from "@vueuse/core";
|
||||
import { useTheme } from "vuetify";
|
||||
import WechatModal from "./WechatModal.vue";
|
||||
import { Teleport } from "vue";
|
||||
|
||||
const theme = useTheme();
|
||||
const cardRef = ref(null);
|
||||
@ -107,6 +108,7 @@ const openLink = (url) => {
|
||||
<template>
|
||||
<div ref="cardRef" class="social-links-card" :style="cardTransform">
|
||||
<!-- 使用WechatModal组件 -->
|
||||
<Teleport to="body">
|
||||
<WechatModal
|
||||
v-model="showWechatModal"
|
||||
:qr-code="currentQrCode"
|
||||
@ -114,6 +116,7 @@ const openLink = (url) => {
|
||||
hint="打开微信扫一扫,添加我为好友"
|
||||
@closed="currentQrCode = ''"
|
||||
/>
|
||||
</Teleport>
|
||||
|
||||
<!-- 社交链接主体 -->
|
||||
<div class="social-grid">
|
||||
@ -156,7 +159,7 @@ const openLink = (url) => {
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1),
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
will-change: transform;
|
||||
overflow: hidden;
|
||||
overflow: visible;
|
||||
transition: background 0.3s ease, box-shadow 0.3s ease;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
width: 100%;
|
||||
|
@ -210,6 +210,7 @@ onUnmounted(() => {
|
||||
animation: fadeIn 0.3s ease;
|
||||
backdrop-filter: blur(8px);
|
||||
transition: opacity 0.3s ease;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.dark-mode.wechat-modal-mask {
|
||||
@ -217,6 +218,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.wechat-modal-container {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
aspect-ratio: 1;
|
||||
@ -226,6 +228,7 @@ onUnmounted(() => {
|
||||
overflow: hidden;
|
||||
transform: scale(0.9);
|
||||
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
|
||||
z-index: v-bind('zIndex + 1');
|
||||
}
|
||||
|
||||
.wechat-modal-header {
|
||||
@ -404,6 +407,7 @@ onUnmounted(() => {
|
||||
.wechat-modal-container {
|
||||
width: 95vw;
|
||||
height: 95vw;
|
||||
margin: 10px;
|
||||
}
|
||||
.qr-code-wrapper {
|
||||
width: 80%;
|
||||
@ -415,6 +419,7 @@ onUnmounted(() => {
|
||||
@media (min-width: 361px) {
|
||||
.wechat-modal-container {
|
||||
width: min(420px, 90vw);
|
||||
margin: 20px;
|
||||
}
|
||||
.qr-code-wrapper {
|
||||
width: 280px;
|
||||
|
Loading…
x
Reference in New Issue
Block a user