Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
stdj_h5
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Graphs
Network
Create a new issue
Commits
Issue Boards
Authored by
hookehuyr
2025-10-30 18:59:10 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
199ec3eb02f2944b3395c999d839d5b0b6bfd74b
199ec3eb
1 parent
f2544cbf
style(Home): 调整响应式布局的间距和字体大小
优化不同屏幕尺寸下的边距和内边距,使布局更紧凑 调整小屏幕下的字体大小,提升可读性
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
71 additions
and
7 deletions
src/views/Home.vue
src/views/Home.vue
View file @
199ec3e
...
...
@@ -479,7 +479,7 @@ const handleNewsClick = (item) => {
}
.ceremony-intro {
padding:
1.5rem;
padding:
0.5rem; /* 进一步从0.75rem减少到0.5rem */
}
.ceremony-title {
...
...
@@ -992,7 +992,7 @@ const handleNewsClick = (item) => {
.intro-container {
position: relative;
width: 100%;
margin:
1rem;
margin:
0.5rem; /* 从1rem减少到0.5rem */
border-radius: 1.17rem;
border: 0.08rem solid #C1A16A;
overflow: hidden;
...
...
@@ -1099,7 +1099,8 @@ const handleNewsClick = (item) => {
/* 响应式设计 */
@media (max-width: 48rem) {
.intro-container {
padding: 0.875rem;
margin: 0.375rem; /* 从默认0.5rem进一步减少 */
padding: 0.625rem; /* 从0.875rem减少 */
}
.step-title-text {
...
...
@@ -1115,9 +1116,11 @@ const handleNewsClick = (item) => {
}
}
@media (max-width: 30rem) {
/* 中等小屏幕 (24rem - 30rem, 384px - 480px) */
@media (max-width: 30rem) and (min-width: 24rem) {
.intro-container {
padding: 0.75rem;
margin: 0.25rem; /* 进一步减少margin */
padding: 0.5rem; /* 从0.75rem减少 */
}
.step-title {
...
...
@@ -1126,12 +1129,11 @@ const handleNewsClick = (item) => {
}
.step-title-text {
font-size: 1.
5rem;
font-size: 1.
25rem; /* 调整为更合适的大小 */
}
.decorative-line {
left: 1.8rem;
/* 小屏幕下的装饰线样式,位置由JavaScript动态计算 */
}
.more-button {
...
...
@@ -1145,6 +1147,68 @@ const handleNewsClick = (item) => {
}
}
/* 小屏幕 (20rem - 24rem, 320px - 384px) */
@media (max-width: 24rem) and (min-width: 20rem) {
.intro-container {
margin: 0.125rem; /* 最小化margin */
padding: 0.375rem; /* 从0.625rem减少 */
}
.step-title {
top: 0.875rem;
left: 0.875rem;
}
.step-title-text {
font-size: 1.125rem; /* 进一步减小 */
}
.decorative-line {
left: 1.6rem;
}
.more-button {
bottom: 0.875rem;
left: 0.875rem;
height: 1.375rem;
}
.more-text {
font-size: 0.65rem;
}
}
/* 超小屏幕 (小于20rem, 小于320px) */
@media (max-width: 20rem) {
.intro-container {
margin: 0.125rem; /* 保持最小margin */
padding: 0.25rem; /* 从0.5rem减少 */
}
.step-title {
top: 0.75rem;
left: 0.75rem;
}
.step-title-text {
font-size: 1rem; /* 最小尺寸 */
}
.decorative-line {
left: 1.4rem;
}
.more-button {
bottom: 0.75rem;
left: 0.75rem;
height: 1.25rem;
}
.more-text {
font-size: 0.6rem;
}
}
/* 相关新闻样式 */
.news-section {
padding: 3rem 1.5rem;
...
...
Please
register
or
login
to post a comment