feat:概览和创建项目,创建子项目两个弹窗

src/views/projectcenter/ProjectManage.vue

@@ -54,13 +54,11 @@
         <div class="btn btn2">
           <div class="search"></div>
           <div class="btnText">重置</div>
-        </div>
+        </div>       
-        <router-link to="/projectadd">
+          <div class="btn btn3" @click="showModal1">
-          <div class="btn btn3">
             <div class="search"></div>
             <div class="btnText">创建项目</div>
           </div>
-        </router-link>
       </div>
     </div>
     <!-- 搜索框及按钮 -->
@@ -109,6 +107,96 @@
       </a-table>
     </div>
     <!-- 表格 -->
+    <!-- 创建子项目弹窗 -->
+    <div>
+        <a-modal
+        v-model:visible="sonproject"
+        :title="null"
+        @ok="closeModal"
+        :footer="null"
+        :closable="false"
+        wrapClassName="sonproject"
+        width="764px"
+        height="356px"
+      >
+        <div class="modalHeader" 
+             style="width: 100%;height: 68px;display: flex;align-items: center;justify-content: space-between;background:linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2000) 100%)"
+          >
+          <div class="headerLeft" style="margin-left: 32px">
+            <span class="headerLeftText" style="font-size: 16px">请选择项目类别</span>
+          </div>
+          <div style="cursor: pointer;margin-right:32px" @click="closeModal">
+            <img
+              style="width: 22px; height: 22px"
+              src="../../assets/images/basicinfo/close22.png"
+            />
+          </div>
+        </div>
+        <div class="modalMain">
+            <div class="taskbox" style="margin-right: 24px;background:linear-gradient(180deg,rgba(221, 234, 255, 1) 100%,rgba(240, 248, 254, 1) 100%);">
+                <div class="leftt"><img src="../../assets/images/taskpage/left2.png"/></div>
+                <div class="photo"><img src="../../assets/images/taskpage/picture4.png"/></div>
+                <div class="rightt"><img src="../../assets/images/taskpage/right2.png"/></div>
+                <div class="centerbox" style="color: rgba(78, 166, 255, 1)">单层子项目</div>
+            </div>
+            <div class="taskbox" style="background:linear-gradient(180deg,rgba(254, 243, 221, 1) 100%,rgba(255, 250, 240, 1) 100%);"> 
+                <div class="leftt"><img src="../../assets/images/taskpage/left1.png"/></div>
+                <div class="photo"><img src="../../assets/images/taskpage/picture5.png"/></div>
+                <div class="rightt"><img src="../../assets/images/taskpage/right1.png"/></div>
+                <div class="centerbox" style="color: rgba(255, 182, 78, 1)">多层子项目</div>
+            </div>
+        </div>
+      </a-modal>
+    </div>
+    <!-- 创建子项目弹窗 -->
+    <!-- 创建项目弹窗 -->
+    <div>
+      <div>
+        <a-modal
+        v-model:visible="estabish"
+        :title="null"
+        @ok="closeModal1"
+        :footer="null"
+        :closable="false"
+        wrapClassName="estabish"
+        width="638px"
+        height="468px"
+        >
+          <div class="modalHeader" 
+              style="width: 100%;height: 68px;display: flex;align-items: center;justify-content: space-between;background:linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2000) 100%)"
+            >
+            <div class="headerLeft" style="margin-left: 32px">
+              <span class="headerLeftText" style="font-size: 16px">添加阶段</span>
+            </div>
+            <div style="cursor: pointer;margin-right:32px" @click="closeModal1">
+              <img
+                style="width: 22px; height: 22px"
+                src="../../assets/images/basicinfo/close22.png"
+              />
+            </div>
+          </div>
+          <div class="modalMain">
+              <router-link to="/projectadd">
+                <div class="taskbox" style="background:linear-gradient(180deg,rgba(221, 234, 255, 1) 100%,rgba(240, 248, 254, 1) 100%);">
+                  <div class="leftt"><img src="../../assets/images/taskpage/left2.png"/></div>
+                  <div class="photo"><img src="../../assets/images/taskpage/picture6.png"/></div>
+                  <div class="rightt"><img src="../../assets/images/taskpage/right2.png"/></div>
+                  <div class="centerbox" style="color: rgba(78, 166, 255, 1)">单层项目</div>
+                  <div class="centermain">不包含子项目，直接填写项目基础信息后创建任务</div>
+                </div>
+              </router-link>             
+              <div class="taskbox" style="margin-bottom: 40px;background:linear-gradient(180deg,rgba(229, 246, 236, 1) 100%,rgba(238, 249, 243, 1) 100%);"> 
+                  <div class="leftt"><img src="../../assets/images/taskpage/left3.png"/></div>
+                  <div class="photo"><img src="../../assets/images/taskpage/picture7.png"/></div>
+                  <div class="rightt"><img src="../../assets/images/taskpage/right3.png"/></div>
+                  <div class="centerbox1" style="color: rgba(93, 201, 136, 1)">多层项目</div>
+                  <div class="centermain1">包含子项目，分为多层子项目和单层子项目，多层子项目可创建班级，通过班级填写基础信息并创建任务</div>
+              </div>
+          </div>
+        </a-modal>
+      </div>
+    </div>
+    <!-- 创建项目弹窗 -->
   </div>
 </template>
 <script>
@@ -446,8 +534,11 @@ export default {
       currentPage: 1,
       tableDataTotal: 20,
       pageSize: 10,
+      sonproject: false,
+      estabish: false,
     });
 
+
     onMounted(() => {
       // console.log("执行");
     });
@@ -496,7 +587,10 @@ export default {
                     </a-select-option>
                   </a-select>
                 </div>
-                <span class="operation3">创建子项目</span>
+                <span class="operation3" style="cursor: pointer"
+                      onClick={() => {
+                          state.sonproject = true;
+                        }}>创建子项目</span>
                 <div class="tableSelect">
                   <a-select
                     style="width: 50px"
@@ -1268,11 +1362,32 @@ export default {
     };
     getTableDate();
 
+    const showModal = () => {
+      state.sonproject = true;
+     
+    };
+    const closeModal = () => {
+      state.sonproject = false;
+      
+    };
+    
+    const showModal1 = () => {
+      
+      state.estabish = true;
+    };
+    const closeModal1 = () => {
+      state.estabish = false;
+      
+    };
     return {
       ...toRefs(state),
       columns,
       selectProjectName,
       expandTable,
+      showModal,
+      closeModal,
+      showModal1,
+      closeModal1,
       getTableDate,
     };
   },
@@ -1441,4 +1556,126 @@ export default {
     }
   }
 }
+.sonproject {
+  .ant-modal {
+    .ant-modal-body {
+      padding: 0 !important;  
+      .modalMain {
+        display: flex;
+        justify-content: center;
+        margin-top: 48px;
+        //margin-bottom: 40px;
+        .taskbox {
+                width: 310px;
+                height: 160px;
+                border-radius: 10px;
+                position: relative;
+                margin-bottom: 80px;
+                cursor: pointer;
+                .leftt {
+                    position: absolute;
+                    top: 18px;
+                    left: 0;
+                }
+                .photo {
+                    position: absolute;
+                    top: 44px;
+                    left: 40px;
+                }
+                .rightt {
+                    position: absolute;
+                    top: 69px;
+                    right: 26px;
+                }
+                .centerbox {
+                    position: absolute;
+                    top: 66px;
+                    left: 136px;
+                    font-size: 20px;
+                    font-weight: 700;
+                    //line-height: 36px;
+                }
+                .centermain {
+                    color: rgba(135, 139, 146, 1);
+                    font-size: 14px;
+                    position: absolute;
+                    left: 144px;
+                    bottom: 49px;
+                }
+        }
+      }
+    }
+  }
+}
+.estabish {
+  .ant-modal {
+    .ant-modal-body {
+      padding: 0 !important;  
+      .modalMain {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 48px;
+        //margin-bottom: 40px;
+        .taskbox {
+                width: 438px;
+                height: 160px;
+                border-radius: 10px;
+                position: relative;
+                margin-bottom: 24px;
+                cursor: pointer;
+                .leftt {
+                    position: absolute;
+                    top: 18px;
+                    left: 0;
+                }
+                .photo {
+                    position: absolute;
+                    top: 44px;
+                    left: 40px;
+                }
+                .rightt {
+                    position: absolute;
+                    top: 69px;
+                    right: 26px;
+                }
+                .centerbox {
+                    position: absolute;
+                    top: 42px;
+                    left: 120px;
+                    font-size: 20px;
+                    font-weight: 500;
+                    //line-height: 36px;
+                }
+                .centerbox1 {
+                    position: absolute;
+                    top: 32px;
+                    left: 120px;
+                    font-size: 20px;
+                    font-weight: 500;
+                    //line-height: 36px;
+                }
+                .centermain {
+                    color: rgba(135, 139, 146, 1);
+                    font-size: 14px;
+                    line-height: 20px;
+                    position: absolute;
+                    width: 252px;
+                    left: 120px;
+                    top: 78px;
+                }
+                .centermain1 {
+                  color: rgba(135, 139, 146, 1);
+                    font-size: 14px;
+                    line-height: 20px;
+                    position: absolute;
+                    width: 252px;
+                    left: 120px;
+                    top: 68px;
+                }
+        }
+      }
+    }
+  }
+}
 </style>

src/views/projectcenter/TaskPage.vue

@@ -1,51 +1,42 @@
 <!-- 任务页面 -->
 <template>
 <div class="taskpage">
-    <div class="header">
+    <div class="addhead" style="flex-shrink: 0">
-        <div class="box">
+      <div class="leftimg">
-            <img src="../../assets/images/projectadd/picture.png"/>
+        <img class="img" src="../../assets/images/projectadd/picture.png" />
-        </div>
+      </div>
-        <div class="imgfor">
+      <div class="imgfor">
-            <div class="forz">管理者进阶-腾飞班</div>
+        <div class="forz">管理者进阶-腾飞班</div>
-            <div class="fort">项目经理：黄华/刘俊</div>
+        <div class="fort">项目经理：黄华、刘俊</div>
-            <div class="fort">起止时间：2022-07-21 00:00至2020-10-21 00:00</div>
+        <div class="fort">起止时间：2022-07-21 00:00至2022-10-21 00:00</div>
-        </div>
+      </div>
-        <div class="right">
+      <div class="right">
-            <div class="end" style="margin-right: 5px">
+        <img class="img1" src="../../assets/images/leveladd/ma.png" />
-                <div style="margin-top: 20px;margin-left: 10px">
+        <div class="line"></div>
-                    <img class="endimg" src="../../assets/images/projectadd/ending.png"/>
+        <img class="img2" src="../../assets/images/leveladd/pub.png" />
-                    <span class="endtext">结束项目</span>
+        <div class="pub">发布</div>
-                </div>             
+        <div class="line"></div>
-            </div>
+        <img
-            <div class="end">
+          style="margin-right: 15px"
-                <div style="margin-top: 20px;margin-left: 10px">
+          class="img2"
-                    <img class="endimg" src="../../assets/images/leveladd/more.png"/>
+          src="../../assets/images/leveladd/more.png"
-                    <div class="tableSelect" style="margin-left: 10px;margin-right: 20px">
+        />
-                  <a-select
+        <div class="more">
-                    style="width: 50px; color: #7096E3"
+          <span style="color: #7096e3; cursor: pointer">更多</span>
-                    value="更多"
+          <div class="moreArrow"></div>
-                    dropdownClassName="tabledropdown"
+          <div class="moreItems">
-                  >
+            <div class="sammo">撤回</div>
-                    <a-select-option value="撤回" label="撤回">
+            <div class="sammo">复制</div>
-                      <div>撤回</div>
+          </div>
-                    </a-select-option>
-                    <a-select-option value="复制" label="复制">
-                      <div>复制</div>
-                    </a-select-option>
-                    <a-select-option value="存为模板" label="存为模板">
-                      <div>存为模板</div>
-                    </a-select-option>
-                  </a-select>
-                </div>
-                </div>
-            </div>
-            <router-link to="/projectmanage" class="end">
-                 <div style="margin-top: 20px;margin-left: 10px;margin-right:30px">
-                    <img class="ending" src="../../assets/images/leveladd/back.png" />
-                    <span class="endtext" style="color:#4EA6FF">返回</span>
-                </div>
-            </router-link>
         </div>
+        <div class="line"></div>
+        <router-link to="/projectmanage"
+          ><div style="display: flex">
+            <img class="img2" src="../../assets/images/leveladd/back.png" />
+            <div class="return">返回</div>
+          </div></router-link
+        >
+      </div>
     </div>
     <div class="split" style="flex-shrink: 0;"></div>
     <div class="content">
@@ -53,7 +44,33 @@
             v-model:activeKey="activeKey"
             size="large"
             :tabBarStyle="{ marginLeft: '10px',marginTop: '5px' }">
-            <a-tab-pane key="1" tab="概览"><div class="split"></div></a-tab-pane>
+            <a-tab-pane key="1" tab="概览">
+                <div class="split"></div>
+                <div class="onerow"><div class="taskmain">快速创建项目详情</div></div>
+                <div class="second">
+                    <div class="taskbox" style="background:linear-gradient(180deg,rgba(254, 243, 221, 1) 100%,rgba(255, 250, 240, 1) 100%);"> 
+                        <div class="leftt"><img src="../../assets/images/taskpage/left1.png"/></div>
+                        <div class="photo"><img src="../../assets/images/taskpage/picture1.png"/></div>
+                        <div class="rightt"><img src="../../assets/images/taskpage/right1.png"/></div>
+                        <div class="centerbox" style="color: rgba(255, 182, 78, 1)">添加任务</div>
+                        <div class="centermain">快速添加任务/阶段</div>
+                    </div>
+                    <div class="taskbox" style="background:linear-gradient(180deg,rgba(221, 234, 255, 1) 100%,rgba(240, 248, 254, 1) 100%);">
+                        <div class="leftt"><img src="../../assets/images/taskpage/left2.png"/></div>
+                        <div class="photo"><img src="../../assets/images/taskpage/picture2.png"/></div>
+                        <div class="rightt"><img src="../../assets/images/taskpage/right2.png"/></div>
+                        <div class="centerbox" style="color: rgba(78, 166, 255, 1)">添加学员</div>
+                        <div class="centermain">快速添加学员</div>
+                    </div>
+                    <div class="taskbox" style="background:linear-gradient(180deg,rgba(229, 246, 236, 1) 100%,rgba(238, 249, 243, 1) 100%);">
+                        <div class="leftt"><img src="../../assets/images/taskpage/left3.png"/></div>
+                        <div class="photo"><img src="../../assets/images/taskpage/picture3.png"/></div>
+                        <div class="rightt"><img src="../../assets/images/taskpage/right3.png"/></div>
+                        <div class="centerbox" style="color: rgba(93, 201, 136, 1)">发布</div>
+                        <div class="centermain">快速发布项目</div>
+                    </div>
+                </div>
+            </a-tab-pane>
             <a-tab-pane key="2" tab="任务" force-render>
                 <div class="split"></div>
                 <div class="onerow">
@@ -249,9 +266,55 @@
             <a-tab-pane key="7" tab="设置">Content of Tab Pane 3</a-tab-pane>
         </a-tabs>
     </div>
+    <div>
+        <a-modal
+            v-model:visible="pubproject"
+            :title="null"
+            @ok="closeModal"
+            :footer="null"
+            :closable="false"
+            wrapClassName="pubproject"
+            width="679px"
+            height="437px"
+            >
+            <div class="modalHeader" 
+                style="width: 100%;height: 68px;display: flex;align-items: center;justify-content: space-between;background:linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2000) 100%)"
+                >
+                <div class="headerLeft" style="margin-left: 32px">
+                <span class="headerLeftText" style="font-size: 16px">项目发布</span>
+                </div>
+                <div style="cursor: pointer;margin-right:32px" @click="closeModal">
+                <img
+                    style="width: 22px; height: 22px"
+                    src="../../assets/images/basicinfo/close22.png"
+                />
+                </div>
+            </div>
+        </a-modal>
+    </div>
 </div>
 </template>
-<script lang="ts">
+<script>
+import { reactive, toRefs } from "vue";
+export default {
+    name:"taskPage",
+    setup(){
+        const state = reactive({
+            pubproject: true,
+        });
+        const showModal = () => {
+            state.pubproject = true;
+        };
+        const closeModal = () => {
+            state.pubproject = false;       
+        };
+        return {
+            ...toRefs(state),
+            showModal,
+            closeModal,
+        };
+    },
+}
 </script>
 <style lang="scss">
 .taskpage {
@@ -259,78 +322,171 @@
     display: flex;
     flex-direction: column;
     //position: relative;
-    .header {
+    .addhead {
         width: 100%;
+        height: 130px;
+        // background-color: lightgreen;
         display: flex;
-        flex-wrap: wrap;
+        justify-content: space-between;
-        .box {
+        align-items: center;
-            border: 12px solid #E7F2FF;
+        position: relative;
-            margin: 16px 0 16px 19px;
+        .leftimg {
-            border-radius: 8px;
+        width: 151px;
-            //float: left;
+        height: 100px;
+        border: 10px solid #e7f2ff;
+        border-radius: 8px;
+        margin-left: 20px;
+        .img {
+            width: 100%;
+            height: 100%;
+        }
         }
         .imgfor {
+            margin-left: 32px;
             display: flex;
             flex: 1;
             flex-direction: column;
-            margin-top: 38px;
-            margin-left: 15px;
-            //float: left;
-            //position: absolute;
-            //left: 210px;
             .forz {
-                font-size: 16px;
                 color: #363636;
-                font-weight: 500;
+                font-weight: 600;
+                font-size: 16px;
             }
             .fort {
+                display: flex;
+                flex-wrap: wrap;
+                color: #878b92;
                 font-size: 14px;
-                color: #878B92;
+                margin-top: 2px;
-
             }
         }
-        .right {
+        @media screen and (max-width: 1030px) {
-            display: flex;
+        .imgfor {
-            //position: absolute;
+            margin-left: 20px;
-            //right: 10px;
-            //top: 5px;
-            //float: right;
-            .end {
-                border-left: 1px solid #E8EFFA;
-                height: 82px;
-                margin-top:30px;
-                //width: 113px;
-                .endimg {
-                    width: 42px;
-                    height: 42px;
-                    
-                }
-                .endtext {
-                    font-size: 14px;
-                    color: #57C887;
-                    padding: 7px;
-                }
-                
-            }
         }
     }
+    .right {
+      // width: 500px;
+      height: 100%;
+      // background-color: red;
+      //position: absolute;
+      //right: 0;
+      display: flex;
+      align-items: center;
+      .img1 {
+        width: 24px;
+        height: 24px;
+        margin-right: 50px;
+      }
+      .line {
+        height: 65%;
+        width: 1px;
+        background-color: #e8effa;
+        margin-right: 28px;
+      }
+      .img2 {
+        width: 42px;
+        height: 42px;
+        margin-right: 22px;
+      }
+      .pub {
+        color: #ffb64e;
+        font-size: 14px;
+        margin-top: 5px;
+        margin-right: 30px;
+        cursor: pointer;
+      }
+      .return {
+        color: #4ea6ff;
+        font-size: 14px;
+        margin-top: 10px;
+        margin-right: 60px;
+      }
+      .more {
+        position: relative;
+        margin-right: 30px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        .moreArrow {
+          width: 13px;
+          height: 7px;
+          display: inline-block;
+          background-image: url("../../assets/images/navtop/down.png");
+          background-size: 100%;
+          margin: 2px;
+          margin-left: 15px;
+        }
+        .moreItems {
+          width: 110px;
+          height: 80px;
+          display: none;
+          background: #ffffff;
+          box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
+          // border-radius: 3px;
+          border: 0px solid #dcdcdc;
+          position: absolute;
+          left: -48px;
+          top: 30px;
+          z-index: 100;
+          cursor: pointer;
+          .sammo {
+            text-align: center;
+            margin-top: 12px;
+            cursor: pointer;
+          }
+          .sammo:hover {
+            color: #4ea6ff;
+          }
+        }
+        .moreItems:hover {
+          display: block;
+        }
+      }
+      @media screen and (max-width: 1240px) {
+        .line {
+          margin-right: 10px;
+        }
+        .img1 {
+          margin-right: 15px;
+        }
+        .img2 {
+          margin-right: 10px;
+        }
+        .return {
+          margin-right: 10px;
+        }
+        .pub {
+          margin-right: 10px;
+        }
+        .more {
+          margin-right: 10px;
+        }
+      }
+      .more:hover .moreArrow {
+        background-image: url("../../assets/images/navtop/up.png");
+      }
+      .more:hover .moreItems {
+        display: block;
+      }
+    }
+  }
     .tableBox {
-    margin: 20px 38px 30px;
+        margin: 20px 38px 30px;
-    .ant-table-thead > tr > th {
+        .ant-table-thead > tr > th {
-      font-size: 14px;
+        font-size: 14px;
-      font-weight: 400;
+        font-weight: 400;
-      color: #999ba3;
+        color: #999ba3;
-      line-height: 36px;
+        line-height: 36px;
-      padding: 5px 16px;
+        padding: 5px 16px;
-      background-color: #eff4fc;
+        background-color: #eff4fc;
-    }
+        }
     
     }
         .split {
-        width: 100%;
+            width: 100%;
-        height: 20px;
+            height: 20px;
-        background-color: #edf0f5;
+            background-color: #edf0f5;
-    }
+         }
     .content {
         //display: flex;
         //margin: 0 37px;
@@ -391,6 +547,51 @@
                 }
             }
         }
+        .second {
+            display: flex;
+            justify-content: center;
+            flex-wrap: wrap;
+            margin-top: 40px;
+            .taskbox {
+                width: 412px;
+                height: 160px;
+                border-radius: 10px;
+                position: relative;
+                margin-right: 68px;
+                margin-bottom: 40px;
+                cursor: pointer;
+                .leftt {
+                    position: absolute;
+                    top: 18px;
+                    left: 0;
+                }
+                .photo {
+                    position: absolute;
+                    top: 42px;
+                    left: 37px;
+                }
+                .rightt {
+                    position: absolute;
+                    top: 69px;
+                    right: 26px;
+                }
+                .centerbox {
+                    position: absolute;
+                    top: 52px;
+                    left: 145px;
+                    font-size: 20px;
+                    font-weight: 700;
+                    //line-height: 36px;
+                }
+                .centermain {
+                    color: rgba(135, 139, 146, 1);
+                    font-size: 14px;
+                    position: absolute;
+                    left: 144px;
+                    bottom: 49px;
+                }
+            }
+        }
         .stage {
             display: flex;
             height: 49px;