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/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/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;
         }