From a9dcd0c6e997f2fe894f9dc3825d37424fba38cf Mon Sep 17 00:00:00 2001
From: Fuynkio <fuynshile@outlook.com>
Date: Sat, 30 Sep 2023 17:45:39 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=BC=BA=E5=88=B6600px=20=E5=88=97?=
 =?UTF-8?q?=E5=AE=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/pages/Settings.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/ui/src/pages/Settings.vue b/ui/src/pages/Settings.vue
index 6e5a4e3d9..8fe0b4d30 100644
--- a/ui/src/pages/Settings.vue
+++ b/ui/src/pages/Settings.vue
@@ -292,7 +292,7 @@ function render_label(option) {
       <div class="watterfall-items"><Recruit /></div>
       <div class="watterfall-items"><maa-weekly /></div>
       <!-- <maa-weekly-new /> -->
-      <div class="watterfall-items"><maa-long-tasks /></div>
+      <div class="watterfall-item-last"><maa-long-tasks /></div>
     </div>
   </div>
 </template>
@@ -376,22 +376,32 @@ ul {
 </style>
 
 <style>
+/*瀑布双栏 */
 .waterfall {
   column-gap: 10px;
   column-rule: 2px dotted rgb(79, 185, 227);
+  column-width: 600px;
 }
+/*瀑布双栏内元素 防止左列最后一个div被挤过去一部分 */
 .watterfall-items {
   margin: 0 0 10px 0;
   break-inside: avoid;
   page-break-inside: avoid;
 }
+/*瀑布双栏内元素 最后一个div 单独调整底部大小 */
+.watterfall-item-last {
+  margin: 0 0 0 0;
+  break-inside: avoid;
+  page-break-inside: avoid;
+}
+
+/*瀑布双栏内显示 当屏幕宽度大于或等于1000像素时应用.waterfall的样式*/
 @media (max-width: 1399px) {
   .waterfall {
     column-count: 1;
   }
 }
-
-/* 当屏幕宽度大于或等于1000像素时应用.waterfall的样式 */
+/*瀑布双栏内显示 当屏幕宽度大于或等于1000像素时应用.waterfall的样式*/
 @media (min-width: 1400px) {
   .waterfall {
     column-count: 2;

From d3a377740010193ebbdab83796a6113619419d5e Mon Sep 17 00:00:00 2001
From: Fuynkio <fuynshile@outlook.com>
Date: Sat, 30 Sep 2023 17:48:00 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=8A=A0=E7=82=B9=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/pages/Settings.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui/src/pages/Settings.vue b/ui/src/pages/Settings.vue
index 8fe0b4d30..fe41023e3 100644
--- a/ui/src/pages/Settings.vue
+++ b/ui/src/pages/Settings.vue
@@ -380,7 +380,7 @@ ul {
 .waterfall {
   column-gap: 10px;
   column-rule: 2px dotted rgb(79, 185, 227);
-  column-width: 600px;
+  column-width: 600px;/*我测试他可以小于600*/
 }
 /*瀑布双栏内元素 防止左列最后一个div被挤过去一部分 */
 .watterfall-items {
@@ -395,18 +395,19 @@ ul {
   page-break-inside: avoid;
 }
 
-/*瀑布双栏内显示 当屏幕宽度大于或等于1000像素时应用.waterfall的样式*/
+/*瀑布双栏内显示 当屏幕宽度大于或等于1400像素时应用.waterfall的样式*/
 @media (max-width: 1399px) {
   .waterfall {
     column-count: 1;
   }
 }
-/*瀑布双栏内显示 当屏幕宽度大于或等于1000像素时应用.waterfall的样式*/
+/*瀑布双栏内显示 当屏幕宽度大于或等于1400像素时应用.waterfall的样式*/
 @media (min-width: 1400px) {
   .waterfall {
     column-count: 2;
   }
 }
+/*瀑布双栏 */
 
 .n-divider:not(.n-divider--vertical) {
   margin: 14px 0 8px;