diff --git a/README.md b/README.md
index 3dee4fd0..8e7d558b 100644
--- a/README.md
+++ b/README.md
@@ -45,6 +45,7 @@ LevelAddDetail.vue:创建关卡页面
 ProjectManage.vue:项目页面
 ProjectAdd.vue:创建项目页面
 TaskPage.vue:任务页面
+TaskAdd.vue:创建任务页面
 TemplateLibrary.vue:模板页面
 
 ```
diff --git a/src/assets/images/coursewareManage/gan.png b/src/assets/images/coursewareManage/gan.png
new file mode 100644
index 00000000..f8442bb0
Binary files /dev/null and b/src/assets/images/coursewareManage/gan.png differ
diff --git a/src/assets/images/coursewareManage/reset0.png b/src/assets/images/coursewareManage/reset0.png
new file mode 100644
index 00000000..e9f628fa
Binary files /dev/null and b/src/assets/images/coursewareManage/reset0.png differ
diff --git a/src/assets/images/coursewareManage/reset1.png b/src/assets/images/coursewareManage/reset1.png
new file mode 100644
index 00000000..2ad08ea4
Binary files /dev/null and b/src/assets/images/coursewareManage/reset1.png differ
diff --git a/src/assets/images/projectadd/delete.png b/src/assets/images/projectadd/delete.png
new file mode 100644
index 00000000..f1578bba
Binary files /dev/null and b/src/assets/images/projectadd/delete.png differ
diff --git a/src/assets/images/projectadd/delete1.png b/src/assets/images/projectadd/delete1.png
new file mode 100644
index 00000000..b51497f3
Binary files /dev/null and b/src/assets/images/projectadd/delete1.png differ
diff --git a/src/assets/images/projectadd/keep.png b/src/assets/images/projectadd/keep.png
new file mode 100644
index 00000000..98bec4c7
Binary files /dev/null and b/src/assets/images/projectadd/keep.png differ
diff --git a/src/assets/images/projectadd/right.png b/src/assets/images/projectadd/right.png
new file mode 100644
index 00000000..995670c6
Binary files /dev/null and b/src/assets/images/projectadd/right.png differ
diff --git a/src/views/courselibrary/CoursewareManage.vue b/src/views/courselibrary/CoursewareManage.vue
index 06af3842..8cdd00d3 100644
--- a/src/views/courselibrary/CoursewareManage.vue
+++ b/src/views/courselibrary/CoursewareManage.vue
@@ -580,19 +580,20 @@
             <div class="gpm_inputbtn">
               <a-input
                 v-model:value="value"
-                style="width: 270px; height: 40px; border-radius: 8px;margin-right: 14px;"
+                style="width: 270px; height: 40px; border-radius: 8px; margin-right: 14px;"
+                placeholder="请输入姓名"
               />
               <div class="gpm_btn btn1">
                 <div class="search"></div>
                 <div class="btnText">搜索</div>
               </div>
               <div class="gpm_btn btn2">
-                <div class="search"></div>
+                <div class="reset"></div>
                 <div class="btnText">重置</div>
               </div>
             </div>
             <div class="gpm_notice">
-              <div class="th_icon"><div class="th_text">i</div></div>
+              <div class="th_icon"></div>
               <div class="textarea">已选择 <span style="color: #4EA6FF;">1</span> 项</div>
               <div class="textarea"><span style="color:#999BA3;">列表选项总计：</span><span>5条</span></div>
             </div>
@@ -628,7 +629,7 @@
                   </template>
                 </a-table>
             </div>
-        
+        </div>
     </div>
     <!--操作授权页面 -->
 
@@ -665,12 +666,12 @@
                 <div class="btnText">搜索</div>
               </div>
               <div class="stm_btn btn2">
-                <div class="search"></div>
+                <div class="reset"></div>
                 <div class="btnText">重置</div>
               </div>
-              <div class="stm_btn btn3" style="width: 130px;">
-                <div class="search"></div>
-                <div class="btnText" @click="createkk">新建开课</div>
+              <div class="stm_btn3 btn3" >
+                <div class="add"></div>
+                <div class="btnText" @click="createkk"><span style="color:#ffffff;">新建开课</span> </div>
               </div>
             </div>
             <div class="stm_table">
@@ -707,10 +708,7 @@
     <!--开课页面 -->
 
     <!--新建开课页面 -->
-    <div
-      class="createschooltime"
-      :style="{ display: cstm_hs ? 'block' : 'none' }"
-    >
+    <div class="createschooltime" :style="{ display: cstm_hs ? 'block' : 'none' }">
       <div class="cst_header"></div>
       <div class="cst_main">
         <div class="cstm_header">
@@ -864,7 +862,7 @@
                     <div class="btnText">搜索</div>
                   </div>
                   <div class="stmm_btn btn2">
-                    <div class="search"></div>
+                    <div class="reset"></div>
                     <div class="btnText">重置</div>
                   </div>
                 </div>
@@ -915,7 +913,6 @@
             </div>
         </div>
     </div>
-  </div>
     <!--新建开课学员管理页面页面 -->
   </div>
 </template>
@@ -1580,38 +1577,180 @@ export default defineComponent({
 
     const getTableDate = () => {
       let data = state.tableData;
-      // data.map((value) => {
-      //   value.operation = (
-      //     // value.courseform === '面授' ? 
-      //         <div class="op_box">
-      //           <div class="operation">
-      //             <span class={value.courseform === '面授' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >开课</span>
-      //             <span class={value.ynuse === '停用' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >停用</span>
-      //             <span class={value.status === '未提交' || value.status === '审核未通过' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >编辑</span>
-      //             <span onClick={() => {}} class={value.status === '已审核' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >管理</span>
-      //             <span class={value.status === '待审核' ?  "errorCls" : "activecls"} style={{ "margin-left": "25px" }} >复制</span>
-      //             <span style={{ "margin-left": "25px" }} class="more">
-      //               <span>授权</span>
-      //               <div class="moreArrow"></div>
-      //               <div class="moreItems">
-      //                 <span style="color:#4EA6FF;">权限名单</span>
-      //                 <div class="mitems1">归属权</div>
-      //                 <div class="mitems2">管理权</div>
-      //                 <div class="mitems3">查看权</div>
-      //               </div>
-      //             </span>
-      //             <span
-      //               style={{ "margin-left": "21px", "margin-right": "30px" }}
-      //               class="more"
-      //             >
-      //               <span>更多</span>
-      //               <div class="moreArrow"></div>
-      //               <div class="moreItems"></div>
-      //             </span>
-      //           </div>
-      //         </div>
-      //     );
-      // });
+      data.map((value) => {
+        {
+          //单层项目
+          value.operation = (
+            <div class="operation">
+              <div class="nSelect">
+                {value.status === "已审核" ? (
+                  <div class="nselect">
+                    <router-link to="/leveladd">
+                      <div class="jc">开课</div>
+                    </router-link>
+
+                    <router-link to="/leveladd">
+                      <div class="jc">管理</div>
+                    </router-link>
+
+                    <div class="jc">复制</div>
+
+                    <a-select
+                      style="width: 50px;margin-top:2px;margin-left:25px"
+                      value="授权"
+                      // options={state.projectNameList}
+                      dropdownClassName="tabledropdown"
+                    >
+                      <a-select-option value="权限名单" label="权限名单">
+                        <div>权限名单</div>
+                      </a-select-option>
+                      <a-select-option value="归属权" label="归属权">
+                        <div
+                          onClick={() => {
+                            console.log("点击了");
+                          }}
+                        >
+                          归属权
+                        </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>
+
+                    <a-select
+                      style="width: 50px;margin-top:2px;margin-left:25px"
+                      value="更多"
+                      // options={state.projectNameList}
+                      dropdownClassName="tabledropdown"
+                    >
+                      <a-select-option
+                        value="复制"
+                        label="复制"
+                        style="padding-left:35px"
+                      >
+                        <div>复制</div>
+                      </a-select-option>
+                      <a-select-option
+                        value="取消"
+                        label="取消"
+                        style="padding-left:35px"
+                      >
+                        <div
+                          onClick={() => {
+                            console.log("点击了");
+                          }}
+                        >
+                          取消
+                        </div>
+                      </a-select-option>
+                    </a-select>
+
+                  </div>
+                ) : (
+                  <div></div>
+                )}
+                {value.status === "待审核" ? (
+                  <div class="nselect">
+                    <router-link to="/leveladd">
+                      <div class="jc">开课</div>
+                    </router-link>
+
+                    <div class="jc">撤回</div>
+
+                    <a-select
+                      style="width: 50px;margin-top:2px;margin-left:25px"
+                      value="授权"
+                      // options={state.projectNameList}
+                      dropdownClassName="tabledropdown"
+                    >
+                      <a-select-option value="权限名单" label="权限名单">
+                        <div>权限名单</div>
+                      </a-select-option>
+                      <a-select-option value="归属权" label="归属权">
+                        <div
+                          onClick={() => {
+                            console.log("点击了");
+                          }}
+                        >
+                          归属权
+                        </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>
+                )}
+                {value.status === "未提交" ? (
+                  <div class="nselect">
+                    <router-link to="/leveladd">
+                      <div class="jc">开课</div>
+                    </router-link>
+
+                    <div class="jc">编辑</div>
+
+                    <div class="jc">复制</div>
+                  </div>
+                ) : (
+                  <div></div>
+                )}
+                {value.status === "审核未通过" ? (
+                  <div class="nselect">
+                    <router-link to="/leveladd">
+                      <div class="jc">开课</div>
+                    </router-link>
+
+                    <div class="jc">编辑</div>
+
+                    <div class="jc">复制</div>
+
+                    <a-select
+                      style="width: 50px;margin-top:2px;margin-left:25px"
+                      value="授权"
+                      // options={state.projectNameList}
+                      dropdownClassName="tabledropdown"
+                    >
+                      <a-select-option value="权限名单" label="权限名单">
+                        <div>权限名单</div>
+                      </a-select-option>
+                      <a-select-option value="归属权" label="归属权">
+                        <div
+                          onClick={() => {
+                            console.log("点击了");
+                          }}
+                        >
+                          归属权
+                        </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 class="jc">删除</div>
+
+                  </div>
+                ) : (
+                  <div></div>
+                )}
+              </div>
+            </div>
+          );
+        }
+      });
       state.tableData = data;
     };
     getTableDate();
@@ -2207,48 +2346,72 @@ export default defineComponent({
     .op_box {
       display: flex;
       justify-content: right;
-      .opacation {
-        font-size: 14px;
-        font-weight: 400;
-        color: #4ea6ff;
-        // line-height: 36px;
-        .activecls {
-          display: inline-block;
-        }
-        .errorCls {
-          display: none;
-        }
-        .more {
-          position: relative;
-          .moreArrow {
-            width: 13px;
-            height: 7px;
-            display: inline-block;
-            background-image: url("@/assets/images/navtop/down.png");
-            background-size: 100%;
-            margin: 2px;
-            margin-left: 7px;
-          }
-          .moreItems {
-            width: 80px;
-            // height: 70px;
-            display: none;
-            background: #ffffff;
-            box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
-            border-radius: 3px;
-            border: 0px solid #dcdcdc;
-            align-items: center;
-            position: absolute;
-            left: 0px;
-            top: 18px;
-            z-index: 9999 !important;
+      // .opacation {
+      //   font-size: 14px;
+      //   font-weight: 400;
+      //   color: #4ea6ff;
+      //   // line-height: 36px;
+      //   .activecls {
+      //     display: inline-block;
+      //   }
+      //   .errorCls {
+      //     display: none;
+      //   }
+      //   .more {
+      //     position: relative;
+      //     .moreArrow {
+      //       width: 13px;
+      //       height: 7px;
+      //       display: inline-block;
+      //       background-image: url("@/assets/images/navtop/down.png");
+      //       background-size: 100%;
+      //       margin: 2px;
+      //       margin-left: 7px;
+      //     }
+      //     .moreItems {
+      //       width: 80px;
+      //       // height: 70px;
+      //       display: none;
+      //       background: #ffffff;
+      //       box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
+      //       border-radius: 3px;
+      //       border: 0px solid #dcdcdc;
+      //       align-items: center;
+      //       position: absolute;
+      //       left: 0px;
+      //       top: 18px;
+      //       z-index: 9999 !important;
+      //     }
+      //   }
+      //   .more:hover .moreArrow {
+      //     background-image: url("@/assets/images/navtop/up.png");
+      //   }
+      //   .more:hover .moreItems {
+      //     display: block;
+      //   }
+      // }
+    }
+    .operation {
+      display: flex;
+      justify-content: right;
+      .nSelect {
+        .nselect {
+          display: flex;
+          .jc {
+            color: #4ea6ff;
+            font-size: 14px;
+            margin-left: 20px;
           }
         }
-        .more:hover .moreArrow {
-          background-image: url("@/assets/images/navtop/up.png");
-        }
-        .more:hover .moreItems {
-          display: block;
+      }
+      .tableSelect {
+        margin-right: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: right;
+        .g1 {
+          color: #4ea6ff;
+          font-size: 14px;
         }
       }
     }
@@ -2499,32 +2662,82 @@ export default defineComponent({
                 background-size: 100% 100%;
             }
         }
-        .b_sub {
+        .gpm_inputbtn{
+          width: 90%;
+          margin: 20px auto;
           display: flex;
-          margin-bottom: 10px;
-          .bs_type {
-            color: #999ba3;
+          .gpm_btn {
+            width: 100px;
+            height: 40px;
+            margin-right: 14px;
+            background: #ffffff;
+            border: 1px solid #4EA6FF;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            cursor: pointer;
+            .btnText {
+              color: #4EA6FF;
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 40px;
+            }
           }
-          .bs_left {
-            color: #999ba3;
-            margin-left: 35px;
+          .btn1 {
+            .search {
+              width: 15px;
+              height: 17px;
+              margin-right: 6px;
+              background-image: url("../../assets/images/courseManage/search1.png");
+            }
           }
-          .bs_right {
-            color: #4f5156;
+          .btn2 {
+            .reset {
+              width: 16px;
+              height: 18px;
+              margin-right: 6px;
+              background-image: url("../../assets/images/courseManage/reset1.png");
+            }
+          }
+          .btn1:hover {
+            background: #4EA6FF;
+            .search {
+              background-image: url("@/assets/images/coursewareManage/search0.png");
+            }
+            .btnText {
+              color: #ffffff;
+            }
+          }
+          .btn2:hover {
+            background: #4EA6FF;
+            .reset {
+              background-image: url("@/assets/images/coursewareManage/reset0.png");
+            }
+            .btnText {
+              color: #ffffff;
+            }
           }
         }
-        .b_menu {
-          width: calc(100%);
-        }
-        .b_menunav {
+        .gpm_notice{
           display: flex;
-          margin-top: 20px;
-          margin-bottom: 20px;
-          .bm_select {
-            margin-right: 20px;
+          background: rgba(78,166,255,0.25);
+          border: 1px solid #4EA6FF;
+          width: 90%;
+          height: 62px;
+          margin:20px auto;
+          align-items: center;
+          line-height: 64px;
+          .th_icon{
+            width: 16px;
+            height: 16px;
+            background-image: url(@/assets/images/coursewareManage/gan.png);
+            background-size: 100% 100%;
+            margin: auto 13px auto 37px;
           }
-          .bm_input {
-            margin-right: 20px;
+          .textarea{
+            margin-right: 33px;
           }
         }
         .gpm_table{
@@ -2605,52 +2818,64 @@ export default defineComponent({
             .search {
               width: 15px;
               height: 17px;
-              background-image: url("../../assets/images/courseManage/search1.png");
+              margin-right: 6px;
+              background-image: url("@/assets/images/coursewareManage/search1.png");
             }
           }
           .btn2 {
-            .search {
+            .reset {
               width: 16px;
               height: 18px;
-              background-image: url("../../assets/images/courseManage/reset1.png");
-            }
-          }
-          .btn3 {
-            .search {
-              width: 17px;
-              height: 18px;
-              background-image: url("../../assets/images/courseManage/add1.png");
-              margin-right: 5px;
+              margin-right: 6px;
+              background-image: url("@/assets/images/coursewareManage/reset1.png");
             }
           }
           .btn1:hover {
-            background: rgba(64, 158, 255, 1);
+            background: #4EA6FF;
             .search {
-              background-image: url("../../assets/images/courseManage/search0.png");
+              background-image: url("@/assets/images/coursewareManage/search0.png");
             }
             .btnText {
               color: #ffffff;
             }
           }
           .btn2:hover {
-            background: rgba(64, 158, 255, 1);
-            .search {
-              background-image: url("../../assets/images/courseManage/reset0.png");
-            }
-            .btnText {
-              color: #ffffff;
-            }
-          }
-          .btn3:hover {
-            background: rgba(64, 158, 255, 1);
-            .search {
-              background-image: url("../../assets/images/courseManage/add0.png");
+            background: #4EA6FF;
+            .reset {
+              background-image: url("@/assets/images/coursewareManage/reset0.png");
             }
             .btnText {
               color: #ffffff;
             }
           }
         }
+        .stm_btn3{
+            width: 130px;
+            height: 40px;
+            border: 1px solid #4EA6FF;
+            background-color: #4EA6FF;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            cursor: pointer;
+            .btnText {
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 40px;
+            }
+          .btn3 {
+            .add {
+              width: 17px;
+              height: 18px;
+              background-image: url("@/assets/images/coursewareManage/add0.png");
+              background-size: 100% 100%;
+              margin-right: 6px;
+            }
+          }
+        }
+
         .stm_table{
           width: 90%;
           margin:30px auto;
@@ -2891,13 +3116,15 @@ export default defineComponent({
                 .search {
                   width: 15px;
                   height: 17px;
+                  margin-right: 6px;
                   background-image: url("../../assets/images/courseManage/search1.png");
                 }
               }
               .btn2 {
-                .search {
+                .reset {
                   width: 16px;
                   height: 18px;
+                  margin-right: 6px;
                   background-image: url("../../assets/images/courseManage/reset1.png");
                 }
               }
@@ -2912,7 +3139,7 @@ export default defineComponent({
               }
               .btn2:hover {
                 background: rgba(64, 158, 255, 1);
-                .search {
+                .reset {
                   background-image: url("../../assets/images/courseManage/reset0.png");
                 }
                 .btnText {
diff --git a/src/views/projectcenter/TaskAdd.vue b/src/views/projectcenter/TaskAdd.vue
new file mode 100644
index 00000000..1a642635
--- /dev/null
+++ b/src/views/projectcenter/TaskAdd.vue
@@ -0,0 +1,1208 @@
+<template>
+  <div class="allCon">
+    <div class="left clearfix">
+      <div class="leftmain">
+        <div class="tit">阶段<img src="../../assets/images/projectadd/right.png" style="margin-left: 10px"/></div>
+        <div class="btn btn3">
+          <div class="search"></div>
+          <div class="btnText">添加阶段</div>
+        </div>
+        <div class="maincon">
+          <div class="item" v-for="item in level" :key="item.id">
+            <div class="itemle">
+              <div class="tit">{{ item.tit }}</div>
+              <div class="name">{{ item.name }}</div>
+            </div>
+            <div class="itemri">
+              <img src="../../assets/images/leveladd/z1.png" />
+              <img
+                style="margin-top: 40px"
+                src="../../assets/images/leveladd/z2.png"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="addhead">
+        <div class="filt">
+          <div class="le">
+            <div class="leftimg">
+              <img class="img" src="../../assets/images/projectadd/picture.png" />
+            </div>
+            <div class="imgfor">
+              <div class="forz" style="font-weight: 500">管理者进阶-腾飞班</div>
+            </div>
+          </div>
+          <div class="rightt">
+            <div class="select">
+              <a-select
+                v-model:value="projectName"
+                style="width: 270px"
+                placeholder="自由学习模式"
+                :options="projectNameList"
+                @change="selectProjectName"
+                allowClear
+                showSearch
+              ></a-select>
+            </div>
+            <div class="line"></div>
+            <img class="img2" src="../../assets/images/projectadd/keep.png" />
+            <div class="pub">保存</div>
+            <div class="line"></div>
+            <img class="img2" src="../../assets/images/leveladd/back.png" />
+            <router-link to="/taskpage">
+              <div class="return">返回</div></router-link
+            >
+          </div>
+        </div>
+      </div>
+      <div class="mid">
+        <!-- <div class="item" v-for="(item, index) in mid" :key="item.id">
+          <div class="itcon">
+            <div class="img">
+              <img :src="item.img" />
+            </div>
+            <div class="text">{{ item.title }}</div>
+          </div>
+          <div :class="[index === mid.length - 1 ? 'no' : 'lin']"></div>
+        </div> -->
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/zai.png" />
+            </div>
+            <div class="text">在线</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/mian.png" />
+            </div>
+            <div class="text">面授</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/an.png" />
+            </div>
+            <div class="text">案例</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/zuo.png" />
+            </div>
+            <div class="text">作业</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/kao.png" />
+            </div>
+            <div class="text">考试</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/zhi.png" />
+            </div>
+            <div class="text">直播</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/wai.png" />
+            </div>
+            <div class="text">外链</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/tao.png" />
+            </div>
+            <div class="text">讨论</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/huo.png" />
+            </div>
+            <div class="text">活动</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/ce.png" />
+            </div>
+            <div class="text">测评</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/diao.png" />
+            </div>
+            <div class="text">调研</div>
+          </div>
+          <div class="lin"></div>
+        </div>
+        <div class="item">
+          <div class="itcon">
+            <div class="img">
+              <img src="../../assets/images/leveladd/tou.png" />
+            </div>
+            <div class="text">投票</div>
+          </div>
+        </div>
+      </div>
+      <div class="boom">
+        <div class="boomcen">
+          <div class="onerow">
+                    <div class="taskmain">任务列表</div>
+                    <button class="btn">移动到任务阶段</button>
+                    <div class="edit">
+                        <img class="editimg" src="../../assets/images/projectadd/delete.png"/>
+                        <span class="editext">批量删除</span>
+                    </div>
+                </div>
+          <div class="talk">
+            <img class="im" src="../../assets/images/leveladd/gan.png" />
+            <div class="xu">
+              <span class="yi">已选择</span>
+              <div style="width: 5px; display: inline-block"></div>
+              <span class="th">3</span>
+              <div style="width: 5px; display: inline-block"></div>
+              <span class="yi">项</span>
+              <span class="zon">人物总数：</span>
+              <span class="yi">5</span>
+              <span class="yi">条</span>
+            </div>
+          </div>
+          <div class="tableBox">
+            <a-table
+              style="border: 1px solid #f2f6fe"
+              :columns="tableDataFunc()"
+              :data-source="tableData"
+              :loading="tableDataTotal === -1 ? true : false"
+              expandRowByClick="true"
+              :scroll="{ x: 1500, y: 300 }"
+              @expand="expandTable"
+              :pagination="false"
+            />
+            <!-- :pagination= showSizeChanger: true, showQuickJumper: true,
+      hideOnSinglePage: true, pageSizeOptions: [], pageSize: pageSize, current:
+      currentPage, total: tableDataTotal, -->
+            <div class="pa">
+              <a-pagination
+                showSizeChanger="true"
+                showQuickJumper="true"
+                hideOnSinglePage="true"
+                :pageSize="pageSize"
+                :current="currentPage"
+                :total="tableDataTotal"
+                class="pagination"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="draw" style="position: relative">
+        <a-drawer
+          v-model:visible="visible"
+          class="drawerStyle"
+          title="关联项目"
+          placement="right"
+          width="50%"
+          @after-visible-change="afterVisibleChange"
+        >
+          <div class="drawerMain">
+            <div class="header">
+              <div class="headerTitle">关联项目</div>
+              <img
+                style="width: 29px; height: 29px; cursor: pointer"
+                src="../../assets/images/basicinfo/close.png"
+                @click="showDrawer"
+              />
+            </div>
+            <div class="drawerbox">
+              <a-table
+                :columns="drawercolumns"
+                :data-source="drawertableData"
+                :loading="tableDataTotal === -1 ? true : false"
+                :scroll="{ x: 700 }"
+                @expand="expandTable"
+                :pagination="false"
+              >
+              </a-table>
+            </div>
+            <div class="btnn">
+              <button @click="showDrawer" class="btn1">取消</button>
+              <button @click="showDrawer" class="btn2">确定</button>
+            </div>
+          </div>
+        </a-drawer>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reactive, toRefs } from "vue";
+const drawercolumns = [
+  {
+    title: "项目名称",
+    dataIndex: "projectName",
+    key: "projectName",
+    width: 200,
+    // align: "center",
+    ellipsis: true,
+    // scopedSlots: { customRender: "action" }, //引入的插槽
+    // customRender: (text, record) => {
+    //   console.log(text, record);
+    //   return <span>{text.text}</span>;
+    // },
+  },
+  {
+    title: "项目经理",
+    dataIndex: "manager",
+    key: "manager",
+    width: 100,
+    align: "center",
+  },
+
+  {
+    title: "创建人",
+    dataIndex: "creater",
+    // width: "30%",
+    key: "creater",
+    width: 100,
+    align: "center",
+  },
+  {
+    title: "创建时间",
+    dataIndex: "time",
+    key: "time",
+    width: 180,
+    align: "center",
+  },
+];
+export default {
+  name: "LevelAddDetail",
+  setup() {
+    const state = reactive({
+      projectNameList: [
+        {
+          id: 1,
+          value: "项目一",
+          label: "项目一",
+        },
+        {
+          id: 2,
+          value: "项目二",
+          label: "项目二",
+        },
+        {
+          id: 3,
+          value: "项目三",
+          label: "项目三",
+        },
+        {
+          id: 4,
+          value: "项目四",
+          label: "项目四",
+        },
+      ],
+      projectNameList2: [
+        {
+          id: 1,
+          value: "批量操作",
+          label: "批量操作",
+        },
+        {
+          id: 2,
+          value: "删除任务",
+          label: "删除任务",
+        },
+        {
+          id: 3,
+          value: "移动任务到关卡",
+          label: "移动任务到关卡",
+        },
+      ],
+      level: [
+        {
+          id: "1",
+          tit: "阶段1",
+          name: "腾飞班1基础",
+        },
+        {
+          id: "2",
+          tit: "阶段2",
+          name: "腾飞班1基础",
+        },
+      ],
+      tableData: [
+        {
+          key: 1,
+          lei: "在线",
+          // state: "已发布",
+          creater: "管理者课程",
+          // pubtime: "2022-07-20 14:00:03",
+          cretime: "60分钟",
+          haspub: false,
+          checked1: false,
+          checkedd: false,
+        },
+        {
+          key: 2,
+          lei: "面授",
+          // state: "草稿",
+          creater: "管理者面授",
+          // pubtime: "2022-07-20 14:00:03",
+          cretime: "20分钟",
+          haspub: true,
+          checked1: false,
+          checkedd: false,
+        },
+        {
+          key: 3,
+          lei: "作业",
+          // state: "已停用",
+          creater: "管理者作业",
+          // pubtime: "2022-07-20 14:00:03",
+          cretime: "60分钟",
+          haspub: false,
+          checked1: false,
+          checkedd: false,
+        },
+        {
+          key: 4,
+          lei: "考试",
+          // state: "草稿",
+          creater: "管理者考试",
+          // pubtime: "2022-07-20 14:00:03",
+          cretime: "20分钟",
+          haspub: true,
+          checked1: false,
+          checkedd: false,
+        },
+        {
+          key: 5,
+          lei: "案例",
+          // state: "草稿",
+          creater: "腾飞班1案例",
+          // pubtime: "2022-07-20 14:00:03",
+          cretime: "-",
+          haspub: true,
+          checked1: true,
+          checkedd: false,
+        },
+      ],
+      drawertableData: [
+        {
+          key: 1,
+          projectName: "管理者进阶",
+          manager: "黄华  刘俊",
+          creater: "毛继禹",
+          time: "2022-07-20 14:00:03",
+          children: [
+            {
+              key: "1-1",
+              projectName: "管理者进阶-腾飞班",
+              manager: "黄华  刘俊",
+
+              creater: "毛继禹",
+              time: "2022-07-20 14:00:03",
+              children: [
+                {
+                  key: "1-1-1",
+                  projectName: "管理者进阶-腾飞班K1",
+                  manager: "黄华  刘俊",
+                  creater: "毛继禹",
+                  time: "2022-07-20 14:00:03",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          key: 2,
+          projectName: "管理者进阶",
+          manager: "黄华  刘俊",
+          creater: "毛继禹",
+          time: "2022-07-20 14:00:03",
+          children: [
+            {
+              key: "2-1",
+              projectName: "管理者进阶-腾飞班",
+              manager: "黄华  刘俊",
+
+              creater: "毛继禹",
+              time: "2022-07-20 14:00:03",
+              children: [
+                {
+                  key: "2-1-1",
+                  projectName: "管理者进阶-腾飞班K1",
+                  manager: "黄华  刘俊",
+                  creater: "毛继禹",
+                  time: "2022-07-20 14:00:03",
+                },
+              ],
+            },
+          ],
+        },
+
+        {
+          key: 3,
+          projectName: "管理者进阶-腾飞班K1",
+          manager: "黄华  刘俊",
+
+          creater: "毛继禹",
+          time: "2022-07-20 14:00:03",
+        },
+        {
+          key: 4,
+          projectName: "管理者进阶-腾飞班K1",
+          manager: "黄华  刘俊",
+
+          creater: "毛继禹",
+          time: "2022-07-20 14:00:03",
+        },
+        {
+          key: 5,
+          projectName: "管理者进阶-腾飞班K1",
+          manager: "黄华  刘俊",
+
+          creater: "毛继禹",
+          time: "2022-07-20 14:00:03",
+        },
+        {
+          key: 6,
+          projectName: "管理者进阶-腾飞班K1",
+          manager: "黄华  刘俊",
+
+          creater: "毛继禹",
+          time: "2022-07-20 14:00:03",
+        },
+        {
+          key: 7,
+          projectName: "管理者进阶-腾飞班K1",
+          manager: "黄华  刘俊",
+
+          creater: "毛继禹",
+          time: "2022-07-20 14:00:03",
+        },
+      ],
+      currentPage: 1,
+      tableDataTotal: 100,
+      pageSize: 10,
+      visible: false,
+    });
+    const selectProjectName = (value, index) => {
+      console.log("value", value, index);
+    };
+    const selectProjectName2 = (value, index) => {
+      console.log("value", value, index);
+    };
+    const showDrawer = () => {
+      state.visible = !state.visible;
+    };
+    const afterVisibleChange = (bool) => {
+      console.log("visible", bool);
+    };
+    const tableDataFunc = () => {
+      const columns = [
+        {
+          title: "类型",
+          dataIndex: "state",
+          // width: "30%",
+          key: "state",
+          width: 90,
+          align: "center",
+          className: "h",
+          scopedSlots: { customRender: "action" }, //引入的插槽
+          customRender: (text) => {
+            console.log(text.record.checked1);
+            return (
+              <div class="racona">
+                <div class="img"></div>
+                <a-checkbox class="ch" v-model:checked={text.record.checkedd}>
+                  {text.record.lei}
+                </a-checkbox>
+              </div>
+            );
+          },
+        },
+        {
+          title: "任务名称",
+          dataIndex: "creater",
+          // width: "30%",
+          key: "creater",
+          width: 200,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "必修/选修",
+          dataIndex: "pubtime",
+          key: "pubtime",
+          width: 200,
+          align: "center",
+          className: "h",
+          scopedSlots: { customRender: "action" }, //引入的插槽
+          customRender: (text) => {
+            console.log(text.record.checked1);
+            return (
+              <div class="opat">
+                <div class="opacationt clearfix">
+                  <a-switch
+                    style="margin-left:-50px;margin-top:3px"
+                    v-model:checked={text.record.checked1}
+                    size="small"
+                    active-color="red"
+                  />
+                  <div class="showt clearfix">
+                    <div
+                      class="bi"
+                      style={
+                        text.record.checked1 ? "z-index:999" : "z-index:998"
+                      }
+                    >
+                      必修
+                    </div>
+                    <div class="xuan">选修</div>
+                  </div>
+                </div>
+              </div>
+            );
+          },
+        },
+        {
+          title: "时长",
+          dataIndex: "cretime",
+          key: "cretime",
+          width: 100,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "操作",
+          className: "h",
+          dataIndex: "opacation",
+          key: "opacation",
+          width: 100,
+          align: "center",
+          scopedSlots: { customRender: "action" }, //引入的插槽
+          customRender: () => {
+            return (
+              <div class="opa">
+                <div class="opacation">
+                  <span style="color:#4EA6FF;margin-right:25px;cursor:pointer">
+                    编辑
+                  </span>
+                  <span style="color:#4EA6FF;cursor:pointer">删除</span>
+                </div>
+              </div>
+            );
+          },
+        },
+      ];
+      return columns;
+    };
+
+    return {
+      ...toRefs(state),
+      selectProjectName,
+      selectProjectName2,
+      tableDataFunc,
+      showDrawer,
+      afterVisibleChange,
+      drawercolumns,
+    };
+  },
+};
+</script>
+
+<style  lang="scss" >
+.clearfix:after,
+.clearfix:before {
+  content: " ";
+  display: block;
+  clear: both;
+}
+
+.drawerStyle {
+  .ant-drawer-content-wrapper {
+    max-width: 1000px;
+    .ant-drawer-header {
+      display: none !important;
+    }
+    .ant-drawer-body {
+      padding: 0;
+    }
+  }
+  .drawerMain {
+    min-width: 600px;
+    margin: 0px 32px 0px 32px;
+    overflow-x: scroll;
+    display: flex;
+    flex-direction: column;
+    .header {
+      height: 73px;
+      border-bottom: 1px solid #e8e8e8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      // background-color: red;
+      margin-bottom: 20px;
+      .headerTitle {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 25px;
+        // margin-left: 24px;
+      }
+    }
+    .drawerbox {
+      margin: 20px 38px 30px;
+      th {
+        background-color: #eff4fc !important;
+      }
+
+      .ant-table-tbody
+        > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+        > td {
+        background: #f6f9fd;
+      }
+    }
+    .btnn {
+      height: 72px;
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+      .btn1 {
+        width: 100px;
+        height: 40px;
+        border: 1px solid #4ea6ff;
+        border-radius: 8px;
+        color: #4ea6ff;
+        background-color: #fff;
+        cursor: pointer;
+      }
+      .btn2 {
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        background: #4ea6ff;
+        border-radius: 8px;
+        border: 0;
+        margin-left: 15px;
+        color: #fff;
+      }
+    }
+  }
+}
+.allCon {
+  width: 100%;
+  height: 100%;
+  background-color: #f1f4f8;
+  display: flex;
+  .left {
+    margin-right: 20px;
+    width: 208px;
+    flex-shrink: 0;
+    height: 100%;
+    background: #ffffff;
+    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
+    display: flex;
+    justify-content: center;
+    .leftmain {
+      width: 86%;
+      margin-top: 20px;
+      .tit {
+        font-size: 18px;
+        color: #363636;
+      }
+
+      // flex-wrap: wrap;
+      .btn {
+        margin-top: 20px;
+        // padding: 0px 26px 0px 26px;
+        height: 38px;
+        background: #fff6e8;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        // margin-right: 14px;
+        flex-shrink: 0;
+        cursor: pointer;
+        .search {
+          background-size: 100%;
+        }
+        .btnText {
+          font-size: 14px;
+          font-weight: 400;
+          color: #ffb64e;
+          // line-height: 38px;
+          margin-top: 4px;
+          margin-left: 5px;
+        }
+      }
+
+      .btn3 {
+        margin-right: 0px;
+        .search {
+          width: 17px;
+          height: 18px;
+          background-image: url("../../assets/images/leveladd/add.png");
+          background-size: 100% 100%;
+        }
+      }
+      .maincon {
+        margin-top: 17px;
+        width: 100%;
+        // background-color: #bfa;
+        .item {
+          width: 100%;
+          height: 83px;
+          display: flex;
+          background: rgba(255, 182, 78, 0.1);
+          border: 1px solid #ffb64e;
+          opacity: 0.45;
+          border-radius: 8px;
+          margin-bottom: 17px;
+          align-items: center;
+          position: relative;
+          .itemle {
+            margin-left: 17px;
+            .tit {
+              color: black;
+              // color: red;
+              font-size: 14px;
+              margin-bottom: 8px;
+              font-weight: bold;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              width: 100px;
+            }
+            .name {
+              font-size: 14px;
+              color: #878b92;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              width: 100px;
+            }
+          }
+          .itemri {
+            display: flex;
+            flex-direction: column;
+            position: absolute;
+            right: 16px;
+          }
+        }
+      }
+    }
+  }
+  .right {
+    flex: 1;
+    height: 100%;
+    width: 100%;
+    // background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    .addhead {
+      width: 100%;
+      // min-width: 500px;
+      // height: 130px;
+
+      background-color: #fff;
+      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
+      display: flex;
+      align-items: center;
+      position: relative;
+      .filt {
+        margin: 16px 30px 16px 22px;
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        align-items: center;
+        flex-wrap: wrap;
+        .le {
+          display: flex;
+          align-items: center;
+          // margin-bottom: 10px;
+          .leftimg {
+            width: 151px;
+            height: 100px;
+            border: 10px solid #e7f2ff;
+            border-radius: 8px;
+            margin-left: 20px;
+            .img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .imgfor {
+            margin-left: 32px;
+            .forz {
+              color: #363636;
+              font-size: 16px;
+            }
+            .fort {
+              color: #878b92;
+              font-size: 14px;
+              margin-top: 20px;
+            }
+          }
+        }
+
+        .rightt {
+          // width: 500px;
+          height: 100%;
+          // background-color: red;
+          // position: absolute;
+          // right: 0;
+          display: flex;
+          align-items: center;
+          .select {
+            margin-right: 50px;
+            // margin-bottom: 20px;
+          }
+          .line {
+            height: 60px;
+            width: 1px;
+            background-color: #e8effa;
+            margin-right: 28px;
+          }
+          .img2 {
+            width: 42px;
+            height: 42px;
+            margin-right: 22px;
+          }
+          .pub {
+            color: #57C887;
+            font-size: 14px;
+            margin-top: 5px;
+            margin-right: 30px;
+          }
+          .return {
+            color: #4ea6ff;
+            font-size: 14px;
+            margin-top: 5px;
+            margin-right: 20px;
+          }
+
+          .role {
+            display: flex;
+            align-items: center;
+            font-size: 16px;
+            font-weight: 400;
+            color: #333330;
+            line-height: 36px;
+            cursor: pointer;
+            position: relative;
+            margin-right: 20px;
+            .roleArrow {
+              width: 13px;
+              height: 7px;
+              margin-left: 8px;
+              background-image: url(../../assets/images/navtop/down.png);
+              background-size: 100%;
+            }
+            .roleItems {
+              width: 109px;
+              height: 90px;
+              padding-top: 10px;
+              background: #ffffff;
+              box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
+              position: absolute;
+              top: 35px;
+              right: 0px;
+              text-align: center;
+              display: none;
+              z-index: 100;
+            }
+            .roleItem {
+              font-size: 14px;
+              font-weight: 400;
+              color: rgba(79, 81, 86, 1);
+              line-height: 36px;
+            }
+            .roleItem:hover {
+              color: #4ea6ff;
+            }
+          }
+          .role:hover .roleItems {
+            display: block;
+          }
+          .role:hover .roleArrow {
+            background-image: url(../../assets/images/navtop/up.png);
+          }
+        }
+      }
+    }
+
+    .mid {
+      width: 100%;
+      height: 130px;
+      margin-top: 20px;
+      margin-bottom: 20px;
+      background-color: #fff;
+      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
+      display: flex;
+      align-items: center;
+      .item {
+        height: 100%;
+        width: 7.7%;
+        display: flex;
+        align-items: center;
+        .itcon {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          height: 100%;
+          width: 100%;
+          .img {
+            cursor: pointer;
+          }
+          .text {
+            font-size: 16px;
+            color: #363636;
+            margin-top: 5px;
+          }
+        }
+        .lin {
+          width: 1px;
+          height: 60%;
+          background-color: #e8effa;
+        }
+        .no {
+          display: none;
+        }
+      }
+    }
+    .boom {
+      position: relative;
+      width: 100%;
+      flex: 1;
+      background-color: #fff;
+      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
+      display: flex;
+      justify-content: center;
+      .boomcen {
+        width: 95%;
+        height: 100%;
+        // background-color: #bfa;
+        .onerow {
+            width: 100%;
+            display: flex;
+            height: 40px;
+            position: relative;
+            margin-top: 20px;
+            .taskmain {
+                font-size: 18px;
+                color: #000000;
+            }
+            .btn {
+                position: absolute;
+                top: 0;
+                right: 130px;
+                background-color: #409EFF;
+                width: 130px;
+                height: 40px;
+                border-radius: 8px;
+                border: 1px solid #409EFF;
+                color: #FFFFFF;
+                cursor: pointer;
+            }
+            .edit {
+                position: absolute;
+                right: 0;
+                top: 0;
+                color: #409EFF;
+                width: 120px;
+                height: 40px;
+                border: 1px solid #409EFF;
+                border-radius: 8px;
+                .editimg {
+                    width: 15px;
+                    height: 15px;
+                    margin-top: -2px;
+                    margin-left: 25px;
+                    margin-right: 5px;
+                } 
+                .editext {
+                    line-height: 40px;
+                }               
+            }
+            .edit:hover {
+                color: #FFFFFF;
+                background-color: #409EFF;
+                cursor: pointer;
+                .editimg {
+                    background-image: url("../../assets/images/projectadd/delete1.png");
+                }
+            }
+        }
+        .talk {
+          margin-top: 24px;
+          margin-bottom: 11px;
+          width: 100%;
+          height: 50px;
+          background: #f5faff;
+          border: 1px solid #4ea6ff;
+          // opacity: 0.22;
+          display: flex;
+          align-items: center;
+          .im {
+            width: 14px;
+            height: 15px;
+            margin-left: 27px;
+          }
+          .xu {
+            height: 100%;
+            line-height: 50px;
+            margin-left: 13px;
+            .yi {
+              color: #4f5156;
+              font-size: 14px;
+            }
+            .zon {
+              color: #999ba3;
+              font-size: 14px;
+              margin-left: 34px;
+            }
+            .th {
+              color: #4ea6ff;
+            }
+          }
+        }
+        .tableBox {
+          // margin: 20px 38px 30px;
+          th.h {
+            background-color: #eff4fc !important;
+          }
+
+          .ant-table-tbody
+            > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+            > td {
+            background: #f6f9fd;
+          }
+          .pa {
+            left: 0;
+            width: 100%;
+            // height: 20px;
+            // background-color: red;
+            display: flex;
+            justify-content: center;
+            position: absolute;
+            bottom: 20px;
+          }
+        }
+      }
+    }
+    // .drawerbox {
+    //   // margin: 20px 38px 30px;
+    //   th.h {
+    //     background-color: #eff4fc !important;
+    //   }
+
+    //   .ant-table-tbody
+    //     > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+    //     > td {
+    //     background: #f6f9fd;
+    //   }
+    // }
+    .draw {
+      .drawerbox {
+      }
+    }
+  }
+
+  .opat {
+    .opacationt {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .ant-switch-checked {
+        background-color: #5dc988;
+      }
+      .showt {
+        // margin-top: 10px;
+        display: flex;
+        margin-left: 10px;
+        height: 23px;
+        .bi {
+          // margin-top: 10px;
+          width: 63px;
+          height: 23;
+          background-color: #5dc988;
+          line-height: 23px;
+          position: absolute;
+          z-index: 998;
+          color: #ffffff;
+          border-radius: 4px;
+        }
+        .xuan {
+          width: 63px;
+          height: 23px;
+          background-color: #f2f6fc;
+          line-height: 23px;
+          // display: none;
+          position: absolute;
+          z-index: 998;
+          color: #5dc988;
+          border-radius: 4px;
+        }
+      }
+    }
+  }
+  .racona {
+    // background-color: #bfa;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    .img {
+      margin-left: -40px;
+      margin-top: -2px;
+      width: 17px;
+      height: 14px;
+      background-image: url("../../assets/images/leveladd/z1.png");
+    }
+    .ch {
+      margin-left: 10px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/projectcenter/TaskPage.vue b/src/views/projectcenter/TaskPage.vue
index cdcb8dc4..79f87126 100644
--- a/src/views/projectcenter/TaskPage.vue
+++ b/src/views/projectcenter/TaskPage.vue
@@ -20,7 +20,7 @@
             <div class="end">
                 <div style="margin-top: 20px;margin-left: 10px">
                     <img class="endimg" src="../../assets/images/leveladd/more.png"/>
-                    <div class="tableSelect" style="margin-left: 10px">
+                    <div class="tableSelect" style="margin-left: 10px;margin-right: 20px">
                   <a-select
                     style="width: 50px; color: #7096E3"
                     value="更多"
@@ -40,12 +40,11 @@
                 </div>
             </div>
             <div class="end">
-                 <div style="margin-top: 20px;margin-left: 10px">
+                 <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>
             </div>
-
         </div>
     </div>
     <div class="split"></div>
@@ -258,10 +257,11 @@
     width: 100%;
     display: flex;
     flex-direction: column;
-    position: relative;
+    //position: relative;
     .header {
         width: 100%;
         display: flex;
+        flex-wrap: wrap;
         .box {
             border: 12px solid #E7F2FF;
             margin: 16px 0 16px 19px;
@@ -270,12 +270,13 @@
         }
         .imgfor {
             display: flex;
+            flex: 1;
             flex-direction: column;
             margin-top: 38px;
-            //margin-left: 15px;
+            margin-left: 15px;
             //float: left;
-            position: absolute;
-            left: 210px;
+            //position: absolute;
+            //left: 210px;
             .forz {
                 font-size: 16px;
                 color: #363636;
@@ -289,9 +290,9 @@
         }
         .right {
             display: flex;
-            position: absolute;
-            right: 10px;
-            top: 5px;
+            //position: absolute;
+            //right: 10px;
+            //top: 5px;
             //float: right;
             .end {
                 border-left: 1px solid #E8EFFA;
diff --git a/src/views/research/ResearchAdd.vue b/src/views/research/ResearchAdd.vue
index 29dc7116..1726270e 100644
--- a/src/views/research/ResearchAdd.vue
+++ b/src/views/research/ResearchAdd.vue
@@ -278,6 +278,7 @@
         margin-bottom: 14px;
         .btn {
             display: flex;
+            margin-bottom: 20px;
             justify-content: center;
             cursor: pointer;
         }