feat:发布的弹窗

src/views/projectcenter/TaskPage.vue

@@ -62,7 +62,7 @@
                         <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="taskbox" @click="showModal" 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>
@@ -281,7 +281,8 @@
                 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>
+                    <span style="width: 15px;height: 15px"><img src="../../assets/images/taskpage/pub.png"/></span>
+                    <span class="headerLeftText" style="font-size: 16px;margin-left:10px">项目发布</span>
                 </div>
                 <div style="cursor: pointer;margin-right:32px" @click="closeModal">
                 <img
@@ -290,6 +291,32 @@
                 />
                 </div>
             </div>
+            <div class="modalMain">
+                <div class="projectname">管理者进阶-腾飞班1</div>
+                <div class="projecttime"><span class="timeti">项目时间：</span><span class="timeme">2022/08/01-2022/08/30</span></div>
+                <div class="projectbox">
+                    <div class="promessage">
+                        <div class="messageme">项目信息</div>
+                        <div class="messagege">当前项目共0个阶段，0个任务</div>
+                    </div>
+                    <div class="stumessage">
+                        <div class="messageme1">学员信息</div>
+                        <div class="messagege1">项目共0名学员</div>
+                    </div>                   
+                </div>
+                <div class="send">
+                    <a-switch v-model:checked="checked" size="small" />
+                    <span class="sendtext">发送项目通知</span>
+                </div>
+                <div class="ckb">
+                    <a-checkbox v-model:checked="checked1"><span class="sendpeo">发给老师</span></a-checkbox>
+                    <a-checkbox v-model:checked="checked2"><span class="sendpeo">发给学员</span></a-checkbox>
+                </div>
+                <div class="pubtn">
+                    <a-button class="pubtn1">取消</a-button>
+                    <a-button class="pubtn2">发布</a-button>
+                </div>
+            </div>
         </a-modal>
     </div>
 </div>
@@ -300,7 +327,11 @@ export default {
     name:"taskPage",
     setup(){
         const state = reactive({
-            pubproject: true,
+            pubproject: false,
+            checked: false,
+            checked1: true,
+            checked2: false,
+            activeKey: '1',
         });
         const showModal = () => {
             state.pubproject = true;
@@ -317,6 +348,128 @@ export default {
 }
 </script>
 <style lang="scss">
+.pubproject {
+  .ant-modal {
+    .ant-modal-body {
+      padding: 0;  
+      .modalMain {
+        .projectname {
+            color: rgba(79, 81, 86, 1);
+            font-size: 14px;
+            line-height: 36px;
+            margin-left: 62px;
+            font-weight: 500;
+        }
+        .projecttime {
+            margin-left: 221px;
+            .timeti {
+                color: rgba(153, 155, 163, 1);
+                font-size: 14px;
+                line-height: 36px;
+            }
+            .timeme {
+                color: rgba(79, 81, 86, 1);
+                font-size: 14px;
+                line-height: 36px;
+            }
+        }
+        .projectbox {
+            margin-top: 26px;
+            display: flex;
+            justify-content: center;
+            .promessage {
+                width: 280px;
+                height: 110px;
+                background:linear-gradient(180deg,rgba(254, 243, 221, 1),rgba(255, 250, 240, 1));
+                border-radius: 10px;
+                margin-right: 7px;
+                .messageme {
+                    color: rgba(255, 182, 78, 1);
+                    font-size: 14px;
+                    line-height: 36px;
+                    margin-top: 17px;
+                    margin-left: 30px;
+                }
+                .messagege {
+                    color: rgba(153, 155, 163, 1);
+                    font-size: 14px;
+                    margin-left: 30px;
+                }
+            }
+            .stumessage {
+                width: 280px;
+                height: 110px;
+                background:linear-gradient(180deg,rgba(221, 234, 255, 1),rgba(240, 248, 254, 1));
+                border-radius: 10px;
+                .messageme1 {
+                    color: rgba(78, 166, 255, 1);
+                    font-size: 14px;
+                    line-height: 36px;
+                    margin-top: 17px;
+                    margin-left: 30px;
+                }
+                .messagege1 {
+                    color: rgba(153, 155, 163, 1);
+                    font-size: 14px;
+                    margin-left: 30px;
+                }
+            }
+        }
+        .send {
+            margin-top: 30px;
+            margin-left: 61px;
+            .sendtext {
+                margin-left: 11px;
+                color: rgba(109, 117, 132, 1);
+                font-size: 14px;
+            }
+        }
+        .ckb {
+            margin-top: 20px;
+            margin-left: 62px;
+            .sendpeo {
+                color: rgba(109, 117, 132, 1);
+                font-size: 14px;
+            }
+            .ant-checkbox-inner {
+                border-radius: 4px;
+            }
+        }
+        .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;