style: 更新首页样式以增强布局和响应式表现

- 调整了 .flow-list、.flow-item 和 .today-item 的样式,优化了布局和间距。
- 增加了 .flow-box 和 .today-box 的 padding 和 flex 属性,提升了视觉一致性。
- 更新了 .today-list 的布局,确保更好的响应式设计。
- 修复了 .today-item 的样式,确保内容在不同屏幕尺寸下的可读性。
This commit is contained in:
田香琪
2026-07-01 17:00:30 +08:00
parent 7ce1ea8fa4
commit 726d563e1a
2 changed files with 58 additions and 17 deletions

View File

@@ -15,7 +15,8 @@ h4 {
margin-right: 40px;
}
.count-item,
.todo-item {
.todo-item,
.today-item {
height: 84px;
display: flex;
@@ -60,6 +61,12 @@ h4 {
cursor: pointer;
color: #fff;
justify-content: flex-start;
> div:first-child {
margin-left: 40px;
margin-right: 20px;
flex-shrink: 0;
}
}
.count-item:nth-of-type(1) {
background-image: linear-gradient(109.6deg, rgba($color: #ff7171, $alpha: 0.6) 11.2%, #ff7171 100.2%);
@@ -93,7 +100,10 @@ h4 {
.flow-list {
height: 330px;
min-height: 330px;
align-items: stretch;
flex-wrap: wrap;
gap: 20px;
}
.svg {
width: 20px;
@@ -101,7 +111,8 @@ h4 {
}
.flow-item {
display: flex;
flex: 1;
flex: 1 1 620px;
min-width: 0;
}
.flow {
background: #ebebeb88 !important;
@@ -131,28 +142,36 @@ h4 {
}
}
.flow-box {
padding-top: 20px;
width: 400px;
padding: 37px;
width: 100%;
box-sizing: border-box;
justify-content: space-between;
margin: 10px 0 20px;
gap: 20px;
> .flow-box-item {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 15px;
margin: 0 20px;
> div {
margin: 4px 0;
}
}
}
.flow-splice {
width: 100%;
gap: 20px;
}
.flow-box-splice {
background: #fff;
width: 190px;
flex: 1;
min-width: 0;
margin-right: 20px;
padding: 20px;
padding: 36px;
font-weight: bold;
display: flex;
align-items: center;
@@ -182,24 +201,44 @@ h4 {
.flow-wrapper {
background: #fff;
padding: 0 30px;
flex: 1;
min-width: 0;
}
.today-box {
flex: 3;
flex: 1 1 380px;
min-width: 380px;
align-self: flex-start;
background: #fff;
margin-left: 20px;
padding: 0 30px;
padding: 0 30px 20px;
display: flex;
flex-direction: column;
box-sizing: border-box;
> h4 {
margin: 20px 0;
}
}
.today-item {
width: 30%;
margin-bottom: 20px;
border-radius: 0.4em;
font-weight: bold;
box-sizing: border-box;
flex: 1 1 calc(50% - 8px);
min-width: calc(50% - 8px);
margin-right: 0;
flex-direction: column;
justify-content: space-between;
background: #ebebeb88;
padding: 20px;
padding: 16px 20px;
> div {
word-break: break-word;
font-size: 14px;
line-height: 1.3;
}
> span {
color: $theme_color;
font-size: 21px;
margin-top: 8px;
word-break: break-all;
line-height: 1.2;
}
}
@@ -214,6 +253,7 @@ h4 {
}
.today-list {
justify-content: space-between;
display: flex;
flex-wrap: wrap;
gap: 16px;
}