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

View File

@@ -784,6 +784,7 @@ export default {
this.partDeliveryForm.deliveryNumMap = map; this.partDeliveryForm.deliveryNumMap = map;
}, },
refreshPartDeliveryAfterSubmit() { refreshPartDeliveryAfterSubmit() {
this.partDeliveryModal = false;
this.loading = true; this.loading = true;
return Promise.all([ return Promise.all([
API_Order.getOrderDetail(this.sn).then((res) => { API_Order.getOrderDetail(this.sn).then((res) => {