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;
transition: background 0.3s ease, box-shadow 0.3s ease;
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 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 1.2rem;
position: relative;
z-index: 2;
@ -197,8 +200,8 @@ const openLink = (url) => {
}
.social-icon-wrapper {
width: 3.5rem;
height: 3.5rem;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
@ -211,7 +214,7 @@ const openLink = (url) => {
}
.social-icon {
font-size: 1.6rem;
font-size: 1.8rem;
transition: all 0.3s ease;
}
@ -256,10 +259,26 @@ const openLink = (url) => {
/* 响应式调整 */
@media (max-width: 768px) {
.social-grid {
grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
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 {
width: 3rem;
height: 3rem;

32
src/components/WechatModal.vue
View File

@ -273,13 +273,16 @@ onUnmounted(() => {
display: inline-block;
margin-bottom: 16px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
min-width: 240px;
min-height: 240px;
width: 280px;
height: 280px;
display: flex;
align-items: center;
justify-content: center;
}
.qr-code-image {
width: 240px;
height: 240px;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
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 {
width: min(420px, 90vw);
}
.qr-code-wrapper {
min-width: 280px;
min-height: 280px;
}
.qr-code-image {
width: 100%;
height: auto;
max-width: 280px;
width: 280px;
height: 280px;
}
}