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

feat: 更新 SocialLinks 和 WechatModal 组件样式，增强响应式布局

Browse Source
This commit is contained in:
Cat Tom 2025-03-26 11:05:22 +08:00
parent 1840901294
commit 1b80a6cfb9
2 changed files with 44 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/SocialLinks.vue
View File

@ -159,6 +159,9 @@ const openLink = (url) => {
overflow: hidden; overflow: hidden;
transition: background 0.3s ease, box-shadow 0.3s ease; transition: background 0.3s ease, box-shadow 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.05);
width: 100%;
max-width: 600px;
margin: 0 auto;
} }
/* 暗黑模式适配 */ /* 暗黑模式适配 */
@ -170,7 +173,7 @@ const openLink = (url) => {
.social-grid { .social-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 1.2rem; gap: 1.2rem;
position: relative; position: relative;
z-index: 2; z-index: 2;
@ -197,8 +200,8 @@ const openLink = (url) => {
} }
.social-icon-wrapper { .social-icon-wrapper {
width: 3.5rem; width: 4rem;
height: 3.5rem; height: 4rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -211,7 +214,7 @@ const openLink = (url) => {
} }
.social-icon { .social-icon {
font-size: 1.6rem; font-size: 1.8rem;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
@ -256,10 +259,26 @@ const openLink = (url) => {
/* 响应式调整 */ /* 响应式调整 */
@media (max-width: 768px) { @media (max-width: 768px) {
.social-grid { .social-grid {
grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 1rem; gap: 1rem;
} }
.social-icon-wrapper {
width: 3.5rem;
height: 3.5rem;
}
.social-icon {
font-size: 1.6rem;
}
}
@media (max-width: 480px) {
.social-grid {
grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
gap: 0.8rem;
}
.social-icon-wrapper { .social-icon-wrapper {
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;

32
src/components/WechatModal.vue
View File

@ -273,13 +273,16 @@ 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: 240px; width: 280px;
min-height: 240px; height: 280px;
display: flex;
align-items: center;
justify-content: center;
} }
.qr-code-image { .qr-code-image {
width: 240px; width: 100%;
height: 240px; height: 100%;
object-fit: contain; object-fit: contain;
display: block; display: block;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
@ -383,18 +386,23 @@ onUnmounted(() => {
} }
/* 响应式布局 */ /* 响应式布局 */
@media (min-width: 360px) { @media (max-width: 360px) {
.wechat-modal-container {
width: 95vw;
}
.qr-code-wrapper {
width: 240px;
height: 240px;
}
}
@media (min-width: 361px) {
.wechat-modal-container { .wechat-modal-container {
width: min(420px, 90vw); width: min(420px, 90vw);
} }
.qr-code-wrapper { .qr-code-wrapper {
min-width: 280px; width: 280px;
min-height: 280px; height: 280px;
}
.qr-code-image {
width: 100%;
height: auto;
max-width: 280px;
} }
} }