From 03eb4686aaafad8511f8ab1cbb81736a5e6798ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B2=B3=E4=BD=B3=E9=91=AB?= <yuejx@dongwu-inc.com>
Date: Tue, 18 Oct 2022 10:32:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=88=9B=E5=BB=BA=E5=B0=8F=E7=BB=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/projectcenter/TaskPage.vue | 313 ++++++++++++++++++++++++++-
 1 file changed, 305 insertions(+), 8 deletions(-)

diff --git a/src/views/projectcenter/TaskPage.vue b/src/views/projectcenter/TaskPage.vue
index 46e1a5c1..5a595afd 100644
--- a/src/views/projectcenter/TaskPage.vue
+++ b/src/views/projectcenter/TaskPage.vue
@@ -363,7 +363,7 @@
                                 </div>                                                  
                             </div>
                             <div class="second2">
-                                <div class="btn1">
+                                <div class="btn1" @click="showModal2">
                                         <img src="../../assets/images/courseManage/search0.png"/>
                                         <span class="btn1text">创建小组</span>
                                     </div>
@@ -377,7 +377,22 @@
                                     <div style="width: 90%">
                                         <div class="grouptitle">
                                             <div class="goodgruop">好好学习小组</div>
-                                            <div>...</div>
+                                            <div class="more">
+                                                <span style="color: rgba(0, 0, 0, 0.4500); cursor: pointer">. . .</span>
+                                                <div class="moreItems">
+                                                    <div class="sammo">编辑</div>
+                                                    <div class="sammo">删除</div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="leader">组长：小李</div>
+                                        <div class="grocenter">
+                                            <div class="leader1">进度</div>
+                                            <a-progress :percent="55" />
+                                        </div>
+                                        <div class="grofooter">
+                                            <div class="ftext">组员名单 ></div>
+                                            <div></div>
                                         </div>
                                     </div>
                                 </div>
@@ -399,7 +414,7 @@
     <time-manage v-model:Tvisible="visible" />
     <!-- 面授管理抽屉 -->
     <face-manage v-model:Fvisible="FaceVisivle" />
-<!-- 项目发布弹窗 -->
+<!-- 概览（无数据）-项目发布弹窗 -->
     <div>
         <a-modal
             v-model:visible="pubproject"
@@ -453,7 +468,105 @@
             </div>
         </a-modal>
     </div>
-<!-- 项目发布弹窗 -->
+<!-- 概览（无数据）-项目发布弹窗 -->
+<!-- 学员-创建小组弹窗 -->
+<div>
+      <a-modal
+        v-model:visible="stugroup"
+        :title="null"
+        @ok="closeModal2"
+        :footer="null"
+        :closable="false"
+        wrapClassName="doublepro"
+        width="624px"
+        height="476px"
+        >
+        <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="closeModal2">
+              <img
+                style="width: 22px; height: 22px"
+                src="../../assets/images/basicinfo/close22.png"
+              />
+            </div>
+        </div>
+        <div class="modalMain">
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">项目名称:</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                show-count :maxlength="30"
+                placeholder="请输入项目名称"
+                style="border-radius: 8px"
+              />
+            </div>
+          </div>
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">分类:</div>
+            <div class="in">
+              <a-select
+                v-model:value="value"
+                placeholder="四个养成"
+                style="border-radius: 8px;height: 40px"
+              />
+            </div>
+          </div>
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">项目经理:</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                placeholder="请选择项目经理"
+                style="border-radius: 8px;height: 40px"
+              />
+            </div>
+          </div>
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">资源归属:</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                style="border-radius: 8px;height: 40px"
+              />
+            </div>
+          </div>
+          <div class="pubtn">
+                    <a-button class="pubtn1" @click="closeModal2">取消</a-button>
+                    <a-button class="pubtn2" @click="closeModal2">确定</a-button>
+          </div>
+        </div>
+      </a-modal>
+</div>
+<!-- 学员-创建小组弹窗 -->
 </div>
 </template>
 <script>
@@ -466,8 +579,9 @@ export default {
     setup(){
         const state = reactive({
             visible: false, //时间管理
-      FaceVisivle: true, //面授管理
+            FaceVisivle: false, //面授管理
             pubproject: false,
+            stugroup: false,
             checked: false,
             checked1: true,
             checked2: false,
@@ -480,6 +594,12 @@ export default {
         const closeModal = () => {
             state.pubproject = false;       
         };
+        const showModal2 = () => {
+            state.stugroup = true;
+        };
+        const closeModal2 = () => {
+            state.stugroup = false;       
+        };
         //新增
     const showTime = () => {
       console.log("点击管理");
@@ -494,7 +614,8 @@ export default {
         return {
             ...toRefs(state),
             showModal,
-            closeModal,
+            closeModal,showModal2,
+            closeModal2,
             showTime,
       showFace,
         };
@@ -624,6 +745,88 @@ export default {
     }
   }
 }
+.doublepro {
+  .ant-modal {
+    .ant-modal-body {
+      padding: 0;
+      .modalMain {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .name {
+          width: 78%;
+          // background-color: lightcoral;
+          display: flex;
+          justify-content: right;
+          margin-top: 32px;
+          align-items: center;
+          height: 40px;
+          // border: 1px solid black;
+
+          .inname {
+            color: #000000;
+            font-size: 14px;
+            margin-left: 7px;
+          }
+          .in {
+            margin-left: 14px;
+            width: 81%;
+            .ant-input {
+              border-radius: 5px;
+              // height: 120%;
+              width: 100%;
+              height: 30px;
+            }
+            .ant-select {
+              border-radius: 5px;
+              // height: 120%;
+              width: 100%;
+              height: 40px;
+              .ant-select-selector {
+              border-radius: 8px;
+              // height: 120%;
+              width: 100%;
+              height: 40px;
+            }
+            }
+          }
+        
+      }
+      .pubtn {
+            display: flex;
+            justify-content: center;
+            margin-top: 25px;
+            //margin-bottom: 29px;
+            .pubtn1 {
+                width: 100px;
+                height: 40px;
+                margin-right: 16px;
+                margin-bottom: 29px;
+                border: 1px solid #409EFF;
+                border-radius: 4px;
+                color: rgba(78, 166, 255, 1);
+                font-size: 14px;
+                //line-height: 36px;
+                align-items: center;
+                background: rgba(255, 255, 255, 1)
+            }
+            .pubtn2 {
+                width: 100px;
+                height: 40px;
+                margin-bottom: 29px;
+                border: 1px solid #409EFF;
+                border-radius: 4px;
+                color: #FFFFFF;
+                font-size: 14px;
+                align-items: center;
+                //line-height: 36px;
+                background: #409EFF;
+            }
+        }
+      }
+    }
+  }
+}
 .taskpage {
     width: 100%;
     display: flex;
@@ -1144,10 +1347,14 @@ export default {
                 align-items: center;
                 margin-left: 32px;
                 .groupname {
+                    height: 22px;
+                    width: 70px;
                     color: #000000;
                     font-size: 14px;
                 }
                 .ant-input {
+                    border-radius: 8px;
+                    width: 264px;
                     height: 40px;
                 }
             }
@@ -1241,10 +1448,100 @@ export default {
                 margin-right: 20px;
                 .grouptitle {
                     display: flex;
-                    justify-content: space-betwwen;
+                    justify-content: space-between;
+                    margin-top: 5px;
                     border-bottom: 1px solid rgba(232, 232, 232, 1);
                     .goodgruop {
-                        
+                        color: rgba(0, 0, 0, 0.8500);
+                        font-size: 16px;
+                        line-height: 36px;
+                        font-weight: 600;
+                    } 
+                    .more {
+                        position: relative;
+                        //margin-right: 30px;
+                        height: 30px;
+                        display: flex;
+                        align-items: center;
+                        .moreItems {
+                        width: 76px;
+                        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;
+                    }                  
+                }
+                .leader {
+                    color: rgba(0, 0, 0, 1);
+                    font-size: 14px;
+                    margin-top: 16px;
+                    //margin-left: 24px;
+                }
+                .grocenter {
+                    display: flex;
+                    margin-top: 14px;
+                    .leader1 {
+                        color: rgba(0, 0, 0, 1);
+                        font-size: 14px;
+                        width: 51px;
+                    }
+                    .ant-progress-outer {
+                        width: 170px;
+                    }
+                }
+                .grofooter {
+                    display: flex;
+                    justify-content: space-between;
+                    cursor: pointer;
+                    margin-top: 30px;
+                    .ftext {
+                        color: rgba(56, 139, 225, 1);
+                        font-size: 14px;
                     }
                 }
             }