From 2a646becfde1e267720e11dce274fe85a019971f Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Mon, 24 Jan 2022 00:33:31 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A1=B9=E7=9B=AE=E7=AE=80?=
 =?UTF-8?q?=E4=BB=8B=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/manage/components/ProjectList.vue   |  18 ++-
 .../sass/pages/components/project-list.scss   | 139 ++++++++++--------
 2 files changed, 85 insertions(+), 72 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/ProjectList.vue b/resources/assets/js/pages/manage/components/ProjectList.vue
index d118cbf9..71596ea0 100644
--- a/resources/assets/js/pages/manage/components/ProjectList.vue
+++ b/resources/assets/js/pages/manage/components/ProjectList.vue
@@ -69,14 +69,16 @@
                     </li>
                 </ul>
             </div>
-            <div v-if="projectData.desc" class="project-subtitle">{{projectData.desc}}</div>
-            <div class="project-switch">
-                <div v-if="completedCount > 0" class="project-checkbox">
-                    <Checkbox :value="projectParameter('completedTask')" @on-change="toggleCompleted">{{$L('显示已完成')}}</Checkbox>
-                </div>
-                <div :class="['project-switch-button', !projectParameter('card') ? 'menu' : '']" @click="$store.dispatch('toggleProjectParameter', 'card')">
-                    <div><i class="taskfont">&#xe60c;</i></div>
-                    <div><i class="taskfont">&#xe66a;</i></div>
+            <div class="project-subbox">
+                <div class="project-subtitle">{{projectData.desc}}</div>
+                <div class="project-switch">
+                    <div v-if="completedCount > 0" class="project-checkbox">
+                        <Checkbox :value="projectParameter('completedTask')" @on-change="toggleCompleted">{{$L('显示已完成')}}</Checkbox>
+                    </div>
+                    <div :class="['project-switch-button', !projectParameter('card') ? 'menu' : '']" @click="$store.dispatch('toggleProjectParameter', 'card')">
+                        <div><i class="taskfont">&#xe60c;</i></div>
+                        <div><i class="taskfont">&#xe66a;</i></div>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/resources/assets/sass/pages/components/project-list.scss b/resources/assets/sass/pages/components/project-list.scss
index 07773e93..e080aa3f 100644
--- a/resources/assets/sass/pages/components/project-list.scss
+++ b/resources/assets/sass/pages/components/project-list.scss
@@ -112,77 +112,82 @@
                 }
             }
         }
-        .project-subtitle {
-            width: 100%;
-            color: #999999;
-            line-height: 24px;
-            margin-top: -6px;
-            margin-bottom: -18px;
-            padding-right: 260px;
-        }
-        .project-switch {
+        .project-subbox {
             width: 100%;
             display: flex;
-            justify-content: flex-end;
-            .project-checkbox {
-                display: flex;
-                align-items: center;
-                margin-right: 14px;
-                opacity: 0.9;
-                .ivu-checkbox-focus {
-                    box-shadow: none;
-                }
+            justify-content: space-between;
+            .project-subtitle {
+                flex: 1;
+                color: #999999;
+                line-height: 24px;
             }
-            .project-switch-button {
+            .project-switch {
+                margin-left: 80px;
+                flex-shrink: 0;
                 display: flex;
-                align-items: center;
-                background-color: #ffffff;
-                border-radius: 6px;
-                position: relative;
-                transition: box-shadow 0.2s;
-                &:hover {
-                    box-shadow: 0 0 10px #e6ecfa;
-                }
-                &:before {
-                    content: "";
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 50%;
-                    height: 100%;
-                    z-index: 0;
-                    color: $primary-color;
-                    border-radius: 6px;
-                    border: 1px solid $primary-color;
-                    background-color: rgba($primary-color, 0.1);
-                    transition: left 0.2s;
-                }
-                > div {
-                    z-index: 1;
-                    width: 32px;
-                    height: 30px;
+                align-items: flex-end;
+                .project-checkbox {
                     display: flex;
                     align-items: center;
-                    justify-content: center;
-                    border-radius: 6px;
-                    cursor: pointer;
-                    color: $primary-text-color;
-                    > i {
-                        font-size: 17px;
-                    }
-                    &:first-child {
-                        color: $primary-color;
+                    margin-right: 14px;
+                    opacity: 0.9;
+                    height: 30px;
+                    .ivu-checkbox-focus {
+                        box-shadow: none;
                     }
                 }
-                &.menu {
+                .project-switch-button {
+                    display: flex;
+                    align-items: center;
+                    background-color: #ffffff;
+                    border-radius: 6px;
+                    height: 30px;
+                    position: relative;
+                    transition: box-shadow 0.2s;
+                    &:hover {
+                        box-shadow: 0 0 10px #e6ecfa;
+                    }
                     &:before {
-                        left: 50%;
-                    }
-                    > div:first-child {
-                        color: $primary-text-color;
-                    }
-                    > div:last-child {
+                        content: "";
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 50%;
+                        height: 100%;
+                        z-index: 0;
                         color: $primary-color;
+                        border-radius: 6px;
+                        border: 1px solid $primary-color;
+                        background-color: rgba($primary-color, 0.1);
+                        transition: left 0.2s;
+                    }
+                    > div {
+                        z-index: 1;
+                        width: 32px;
+                        height: 30px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        border-radius: 6px;
+                        cursor: pointer;
+                        color: $primary-text-color;
+                        > i {
+                            font-size: 17px;
+                        }
+                        &:first-child {
+                            color: $primary-color;
+                        }
+                    }
+                    &.menu {
+                        &:before {
+                            left: 50%;
+                        }
+                        > div:first-child {
+                            color: $primary-text-color;
+                        }
+                        > div:last-child {
+                            color: $primary-color;
+                        }
                     }
                 }
             }
@@ -934,9 +939,15 @@
                     justify-content: flex-end;
                 }
             }
-            .project-subtitle {
-                padding-right: 12px;
-                margin-bottom: 6px;
+            .project-subbox {
+                display: block;
+                .project-subtitle {
+                    margin-bottom: 6px;
+                }
+                .project-switch {
+                    margin-left: 0;
+                    justify-content: flex-end;
+                }
             }
         }
         .project-column {