fix: 优化页面布局与欢迎文本对齐效果

This commit is contained in:
Zuoling Rong
2025-07-07 01:49:45 +08:00
parent 4c7a5e6a60
commit edbf1aaf97
2 changed files with 122 additions and 11 deletions

View File

@@ -761,9 +761,9 @@ body .content.expanded {
/* 欢迎区域 */
.welcome-section {
width: 100%;
max-width: 1200px;
max-width: 1300px;
margin: 0 auto 3.5rem auto;
padding: 0 6rem 0 8rem;
padding: 0 6rem 0 2rem;
text-align: left;
position: relative;
z-index: 5;
@@ -831,9 +831,9 @@ body .content.expanded {
background: linear-gradient(145deg, var(--card-bg-gradient-1), var(--card-bg-gradient-2));
border-radius: 16px;
padding: 2rem;
margin: 0 1rem 2.5rem 1rem;
width: calc(100% - 2rem);
max-width: 1100px;
margin: 0 1rem 2.5rem 2rem;
width: calc(100% - 3rem);
max-width: 1300px;
position: relative;
z-index: 1;
opacity: 0;
@@ -862,7 +862,7 @@ body .content.expanded {
/* 网站卡片网格 */
.sites-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
gap: 1.2rem;
position: relative;
z-index: 1;
@@ -1155,12 +1155,12 @@ body .content.expanded {
/* 响应式设计 */
@media (max-width: 1200px) {
.welcome-section {
padding: 0 4rem;
padding: 0 4rem 0 1.5rem;
margin-bottom: 3rem;
}
.category {
max-width: 900px;
max-width: 1100px;
margin-bottom: 2rem;
margin-left: 1.5rem; /* 增加左边距 */
margin-right: 1.5rem; /* 增加右边距 */
@@ -1334,7 +1334,7 @@ body .content.expanded {
@media (max-width: 480px) {
.welcome-section {
padding: 0 1.5rem;
padding: 0 1rem;
margin-bottom: 2rem;
}
@@ -1464,7 +1464,7 @@ body .content.expanded {
/* 确保搜索结果中的网格有正确的间距 */
.search-section .sites-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
gap: 1.2rem;
margin-top: 1rem;
}