From 31f2a5dc16d0528276ed950f47e8a6ad3d015e4e Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Mon, 31 May 2021 16:28:23 +0800
Subject: [PATCH] no message

---
 .../pages/manage/components/project-list.vue  | 151 ++++++++++++------
 .../statics/images/project-menu-blue.svg      |   1 +
 .../statics/images/project-menu-gray.svg      |   1 +
 .../statics/images/project-panel-blue.svg     |   1 +
 .../statics/images/project-panel-gray.svg     |   1 +
 5 files changed, 102 insertions(+), 53 deletions(-)
 create mode 100644 resources/assets/statics/images/project-menu-blue.svg
 create mode 100644 resources/assets/statics/images/project-menu-gray.svg
 create mode 100644 resources/assets/statics/images/project-panel-blue.svg
 create mode 100644 resources/assets/statics/images/project-panel-gray.svg

diff --git a/resources/assets/js/pages/manage/components/project-list.vue b/resources/assets/js/pages/manage/components/project-list.vue
index 6fbb72c2..526eec44 100644
--- a/resources/assets/js/pages/manage/components/project-list.vue
+++ b/resources/assets/js/pages/manage/components/project-list.vue
@@ -5,18 +5,30 @@
                 <div class="project-title">✔️ Daily Task</div>
                 <div class="project-subtitle">Click + New To create new list and wait for project manager card Don't Create a card by yourself to manage a good colaboration.</div>
             </div>
-            <ul class="project-icons">
-                <li class="project-icon">
-                    <Icon type="ios-search-outline" />
-                </li>
-                <li class="project-icon">
-                    <Icon type="ios-chatbubbles-outline" />
-                    <Badge :count="999"></Badge>
-                </li>
-                <li class="project-avatar online">
-                    <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
-                </li>
-            </ul>
+            <div class="project-icobox">
+                <ul class="project-icons">
+                    <li class="project-icon">
+                        <Icon type="ios-search-outline" />
+                    </li>
+                    <li class="project-icon">
+                        <Icon type="ios-chatbubbles-outline" />
+                        <Badge :count="999"></Badge>
+                    </li>
+                    <li class="project-avatar online">
+                        <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
+                    </li>
+                </ul>
+                <div class="project-switch">
+                    <div class="project-switch-button">
+                        <div class="project-switch-img active">
+                            <img src="../../../../statics/images/project-panel-blue.svg">
+                        </div>
+                        <div class="project-switch-img">
+                            <img src="../../../../statics/images/project-menu-gray.svg">
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
         <div class="project-column">
             <ul>
@@ -245,8 +257,9 @@
         .project-head {
             display: flex;
             align-items: flex-start;
-            margin: 32px;
+            margin: 32px 32px 16px;
             .project-titbox {
+                margin-bottom: 16px;
                 .project-title {
                     flex: 1;
                     color: #333333;
@@ -259,54 +272,86 @@
                     line-height: 24px;
                 }
             }
-            .project-icons {
+            .project-icobox {
                 display: flex;
-                align-items: center;
+                flex-direction: column;
+                justify-content: space-between;
+                height: 100%;
                 margin-top: 2px;
                 margin-left: 80px;
-                flex-shrink: 0;
-                > li {
-                    list-style: none;
+                .project-icons {
                     display: flex;
                     align-items: center;
-                    justify-content: center;
-                    width: 36px;
-                    height: 36px;
-                    position: relative;
-                    margin-left: 16px;
-                    &.project-icon {
-                        border-radius: 50%;
-                        background-color: #F2F3F5;
-                        .ivu-icon {
-                            font-size: 20px;
+                    flex-shrink: 0;
+                    > li {
+                        list-style: none;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        width: 36px;
+                        height: 36px;
+                        position: relative;
+                        margin-left: 16px;
+                        &.project-icon {
+                            border-radius: 50%;
+                            background-color: #F2F3F5;
+                            .ivu-icon {
+                                font-size: 20px;
+                            }
+                            .ivu-badge {
+                                position: absolute;
+                                top: -6px;
+                                left: 20px;
+                                transform: scale(0.8);
+                            }
                         }
-                        .ivu-badge {
-                            position: absolute;
-                            top: -6px;
-                            left: 20px;
-                            transform: scale(0.8);
+                        &.project-avatar {
+                            .ivu-avatar {
+                                width: 36px;
+                                height: 36px;
+                            }
+                            &:before {
+                                content: "";
+                                position: absolute;
+                                right: 0;
+                                bottom: 0;
+                                width: 9px;
+                                height: 9px;
+                                border-radius: 50%;
+                                background-color: #ff0000;
+                                border: 1px solid #ffffff;
+                                z-index: 1;
+                            }
+                            &.online {
+                                &:before {
+                                    background-color: #509E76;
+                                }
+                            }
                         }
                     }
-                    &.project-avatar {
-                        .ivu-avatar {
-                            width: 36px;
-                            height: 36px;
-                        }
-                        &:before {
-                            content: "";
-                            position: absolute;
-                            right: 0;
-                            bottom: 0;
-                            width: 9px;
-                            height: 9px;
-                            border-radius: 50%;
-                            background-color: #ff0000;
-                            border: 1px solid #ffffff;
-                            z-index: 1;
-                        }
-                        &.online {
-                            &:before {
-                                background-color: #509E76;
+                }
+                .project-switch {
+                    display: flex;
+                    justify-content: flex-end;
+                    .project-switch-button {
+                        display: flex;
+                        align-items: center;
+                        background-color: #ffffff;
+                        border-radius: 6px;
+                        .project-switch-img {
+                            width: 32px;
+                            height: 30px;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            border-radius: 6px;
+                            > img {
+                                width: 16px;
+                                height: 16px;
+                            }
+                            &.active {
+                                border: 1px solid #2d8cf0;
+                                background-color: #e6f7ff;
                             }
                         }
                     }
diff --git a/resources/assets/statics/images/project-menu-blue.svg b/resources/assets/statics/images/project-menu-blue.svg
new file mode 100644
index 00000000..841f18a5
--- /dev/null
+++ b/resources/assets/statics/images/project-menu-blue.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1622448571867" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7934" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M936.19430083 441.30094987c20.7383885 0 37.70616053 7.06990501 50.90331611 21.20971504S1006.89335097 493.14692043 1006.89335097 512s-7.06990501 35.34952507-21.20971503 49.48933509-30.63625552 21.20971504-49.48933511 21.20971504H87.80569917c-18.85307957 0-35.34952507-7.06990501-49.48933511-21.20971504S17.10664903 530.85307957 17.10664903 512s6.59857847-35.34952507 19.79573403-49.48933509S67.06731066 441.30094987 87.80569917 441.30094987h848.38860166zM87.80569917 299.90284958c-18.85307957 0-35.34952507-7.06990501-49.48933511-21.20971504S17.10664903 248.05687901 17.10664903 229.20379943s6.59857847-35.34952507 19.79573403-49.4893351S67.06731066 158.5047493 87.80569917 158.5047493h848.38860166c20.7383885 0 37.70616053 7.06990501 50.90331611 21.20971503S1006.89335097 210.35071986 1006.89335097 229.20379943s-7.06990501 35.34952507-21.20971503 49.48933511-30.63625552 21.20971504-49.48933511 21.20971504H87.80569917z m848.38860166 424.19430084c20.7383885 0 37.70616053 7.06990501 50.90331611 21.20971504S1006.89335097 775.94312099 1006.89335097 794.79620057s-7.06990501 35.34952507-21.20971503 49.4893351-30.63625552 21.20971504-49.48933511 21.20971503H87.80569917c-18.85307957 0-35.34952507-7.06990501-49.48933511-21.20971503S17.10664903 813.64928014 17.10664903 794.79620057s6.59857847-35.34952507 19.79573403-49.48933511S67.06731066 724.09715042 87.80569917 724.09715042h848.38860166z" fill="#2d8cf0" p-id="7935"></path></svg>
\ No newline at end of file
diff --git a/resources/assets/statics/images/project-menu-gray.svg b/resources/assets/statics/images/project-menu-gray.svg
new file mode 100644
index 00000000..738b3600
--- /dev/null
+++ b/resources/assets/statics/images/project-menu-gray.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1622448571867" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7934" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M936.19430083 441.30094987c20.7383885 0 37.70616053 7.06990501 50.90331611 21.20971504S1006.89335097 493.14692043 1006.89335097 512s-7.06990501 35.34952507-21.20971503 49.48933509-30.63625552 21.20971504-49.48933511 21.20971504H87.80569917c-18.85307957 0-35.34952507-7.06990501-49.48933511-21.20971504S17.10664903 530.85307957 17.10664903 512s6.59857847-35.34952507 19.79573403-49.48933509S67.06731066 441.30094987 87.80569917 441.30094987h848.38860166zM87.80569917 299.90284958c-18.85307957 0-35.34952507-7.06990501-49.48933511-21.20971504S17.10664903 248.05687901 17.10664903 229.20379943s6.59857847-35.34952507 19.79573403-49.4893351S67.06731066 158.5047493 87.80569917 158.5047493h848.38860166c20.7383885 0 37.70616053 7.06990501 50.90331611 21.20971503S1006.89335097 210.35071986 1006.89335097 229.20379943s-7.06990501 35.34952507-21.20971503 49.48933511-30.63625552 21.20971504-49.48933511 21.20971504H87.80569917z m848.38860166 424.19430084c20.7383885 0 37.70616053 7.06990501 50.90331611 21.20971504S1006.89335097 775.94312099 1006.89335097 794.79620057s-7.06990501 35.34952507-21.20971503 49.4893351-30.63625552 21.20971504-49.48933511 21.20971503H87.80569917c-18.85307957 0-35.34952507-7.06990501-49.48933511-21.20971503S17.10664903 813.64928014 17.10664903 794.79620057s6.59857847-35.34952507 19.79573403-49.48933511S67.06731066 724.09715042 87.80569917 724.09715042h848.38860166z" fill="#515a6e" p-id="7935"></path></svg>
\ No newline at end of file
diff --git a/resources/assets/statics/images/project-panel-blue.svg b/resources/assets/statics/images/project-panel-blue.svg
new file mode 100644
index 00000000..d6ee61da
--- /dev/null
+++ b/resources/assets/statics/images/project-panel-blue.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1622448314339" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2852" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M387.264 473.68h-192c-52.928 0-96-43.072-96-96v-192c0-52.928 43.072-96 96-96h192c52.928 0 96 43.072 96 96v192c0 52.96-43.072 96-96 96z m-192-320c-17.632 0-32 14.368-32 32v192c0 17.632 14.368 32 32 32h192c17.632 0 32-14.368 32-32v-192c0-17.632-14.368-32-32-32h-192z m192 768h-192c-52.928 0-96-43.072-96-96v-192c0-52.928 43.072-96 96-96h192c52.928 0 96 43.072 96 96v192c0 52.96-43.072 96-96 96z m-192-320c-17.632 0-32 14.336-32 32v192c0 17.664 14.368 32 32 32h192c17.632 0 32-14.336 32-32v-192c0-17.664-14.368-32-32-32h-192z m636.864-128h-192c-52.928 0-96-43.072-96-96v-192c0-52.928 43.072-96 96-96h192c52.928 0 96 43.072 96 96v192c0 52.96-43.072 96-96 96z m-192-320c-17.664 0-32 14.368-32 32v192c0 17.632 14.336 32 32 32h192c17.664 0 32-14.368 32-32v-192c0-17.632-14.336-32-32-32h-192z m192 768h-192c-52.928 0-96-43.072-96-96v-192c0-52.928 43.072-96 96-96h192c52.928 0 96 43.072 96 96v192c0 52.96-43.072 96-96 96z m-192-320c-17.664 0-32 14.336-32 32v192c0 17.664 14.336 32 32 32h192c17.664 0 32-14.336 32-32v-192c0-17.664-14.336-32-32-32h-192z" p-id="2853" fill="#2d8cf0"></path></svg>
\ No newline at end of file
diff --git a/resources/assets/statics/images/project-panel-gray.svg b/resources/assets/statics/images/project-panel-gray.svg
new file mode 100644
index 00000000..88968cfe
--- /dev/null
+++ b/resources/assets/statics/images/project-panel-gray.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1622448314339" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2852" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M387.264 473.68h-192c-52.928 0-96-43.072-96-96v-192c0-52.928 43.072-96 96-96h192c52.928 0 96 43.072 96 96v192c0 52.96-43.072 96-96 96z m-192-320c-17.632 0-32 14.368-32 32v192c0 17.632 14.368 32 32 32h192c17.632 0 32-14.368 32-32v-192c0-17.632-14.368-32-32-32h-192z m192 768h-192c-52.928 0-96-43.072-96-96v-192c0-52.928 43.072-96 96-96h192c52.928 0 96 43.072 96 96v192c0 52.96-43.072 96-96 96z m-192-320c-17.632 0-32 14.336-32 32v192c0 17.664 14.368 32 32 32h192c17.632 0 32-14.336 32-32v-192c0-17.664-14.368-32-32-32h-192z m636.864-128h-192c-52.928 0-96-43.072-96-96v-192c0-52.928 43.072-96 96-96h192c52.928 0 96 43.072 96 96v192c0 52.96-43.072 96-96 96z m-192-320c-17.664 0-32 14.368-32 32v192c0 17.632 14.336 32 32 32h192c17.664 0 32-14.368 32-32v-192c0-17.632-14.336-32-32-32h-192z m192 768h-192c-52.928 0-96-43.072-96-96v-192c0-52.928 43.072-96 96-96h192c52.928 0 96 43.072 96 96v192c0 52.96-43.072 96-96 96z m-192-320c-17.664 0-32 14.336-32 32v192c0 17.664 14.336 32 32 32h192c17.664 0 32-14.336 32-32v-192c0-17.664-14.336-32-32-32h-192z" p-id="2853" fill="#515a6e"></path></svg>
\ No newline at end of file