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

feat: 调整 WechatModal 组件样式，统一宽高并优化响应式设计

Browse Source
This commit is contained in:
Cat Tom 2025-03-26 11:22:25 +08:00
parent 1b80a6cfb9
commit 4cbf1ec7ab
1 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/WechatModal.vue
View File

@ -220,7 +220,9 @@ onUnmounted(() => {
} }
.wechat-modal-container { .wechat-modal-container {
width: min(420px, 90vw); width: 400px;
height: 400px;
aspect-ratio: 1;
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);
@ -273,8 +275,9 @@ 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);
width: 280px; width: 320px;
height: 280px; height: 320px;
padding: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -389,10 +392,12 @@ onUnmounted(() => {
@media (max-width: 360px) { @media (max-width: 360px) {
.wechat-modal-container { .wechat-modal-container {
width: 95vw; width: 95vw;
height: 95vw;
} }
.qr-code-wrapper { .qr-code-wrapper {
width: 240px; width: 80%;
height: 240px; height: 80%;
padding: 8px;
} }
} }