cattom/PersonalPage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance WechatModal component functionality

Browse Source
This commit is contained in:
Cat Tom 2025-03-26 03:18:08 +08:00
parent df4bedc186
commit 68b5b730bd
1 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/WechatModal.vue
View File

@ -216,7 +216,7 @@ onUnmounted(() => {
} }
.wechat-modal-container { .wechat-modal-container {
width: min(320px, 90vw); width: min(420px, 90vw);
background-color: var(--v-theme-surface); background-color: var(--v-theme-surface);
border-radius: 12px; border-radius: 12px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
@ -269,13 +269,13 @@ onUnmounted(() => {
display: inline-block; display: inline-block;
margin-bottom: 16px; margin-bottom: 16px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
min-width: 200px; min-width: 240px;
min-height: 200px; min-height: 240px;
} }
.qr-code-image { .qr-code-image {
width: 200px; width: 240px;
height: 200px; height: 240px;
object-fit: contain; object-fit: contain;
display: block; display: block;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
@ -378,6 +378,22 @@ onUnmounted(() => {
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
} }
/* 响应式布局 */
@media (min-width: 360px) {
.wechat-modal-container {
width: min(420px, 90vw);
}
.qr-code-wrapper {
min-width: 280px;
min-height: 280px;
}
.qr-code-image {
width: 100%;
height: auto;
max-width: 280px;
}
}
/* 减少运动偏好设置 */ /* 减少运动偏好设置 */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.wechat-modal-container, .wechat-modal-container,