diff --git a/src/assets/images/courseManage/reset2.png b/src/assets/images/courseManage/reset2.png
new file mode 100644
index 00000000..00cb101c
Binary files /dev/null and b/src/assets/images/courseManage/reset2.png differ
diff --git a/src/assets/images/taskpage/people1.png b/src/assets/images/taskpage/people1.png
new file mode 100644
index 00000000..c16eec4b
Binary files /dev/null and b/src/assets/images/taskpage/people1.png differ
diff --git a/src/assets/images/taskpage/people2.png b/src/assets/images/taskpage/people2.png
new file mode 100644
index 00000000..c5796dc0
Binary files /dev/null and b/src/assets/images/taskpage/people2.png differ
diff --git a/src/assets/images/taskpage/people3.png b/src/assets/images/taskpage/people3.png
new file mode 100644
index 00000000..5edec63d
Binary files /dev/null and b/src/assets/images/taskpage/people3.png differ
diff --git a/src/assets/images/taskpage/people4.png b/src/assets/images/taskpage/people4.png
new file mode 100644
index 00000000..f7504ad5
Binary files /dev/null and b/src/assets/images/taskpage/people4.png differ
diff --git a/src/components/drawers/AddFaceteach.vue b/src/components/drawers/AddFaceteach.vue
new file mode 100644
index 00000000..26e1769e
--- /dev/null
+++ b/src/components/drawers/AddFaceteach.vue
@@ -0,0 +1,458 @@
+<template>
+    <a-drawer
+    :visible="addfaceteachVisible"
+    class="drawerStyle"
+    width="80%"
+    title="添加在线"
+    placement="right"
+    @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="closeDrawer"
+        />
+      </div>
+      <div class="contentMain">
+        <div class="main_items">
+          <div class="mi_ipts">
+            <div class="mii_ipt">
+              <div class="ipt_name">课程编号：</div>
+              <div class="fi_input">
+                <a-input
+                  v-model:value="value1"
+                  style="width: 240px; height: 40px; border-radius: 8px"
+                  placeholder="请输入项目名称"
+                />
+              </div>
+            </div>
+            <div class="mii_ipt">
+              <div class="ipt_name">内容分类：</div>
+              <div class="select">
+                <a-select
+                  dropdownClassName="dropdown-style"
+                  style="width: 240px"
+                  placeholder="请选择"
+                  :options="options1"
+                  allowClear
+                  showSearch
+                />
+              </div>
+            </div>
+          </div>
+          <div class="mi_btns">
+            <div class="btn btn1">
+              <div class="search"></div>
+              <div class="btnText">搜索</div>
+            </div>
+            <div class="btn btn2">
+              <div class="search"></div>
+              <div class="btnText">重置</div>
+            </div>
+          </div>
+        </div>
+        <div class="main_notice">
+          <div class="mntc_left">
+            <div class="notice_icon"></div>
+            <span style="color: rgba(0, 0, 0, 0.65); margin-right: 17px"
+              >已选择 <span style="color: #388be1">4</span> 项</span
+            >
+            <span style="color: rgba(0, 0, 0, 0.65)"
+              >列表选项总计：<span>14</span> 条</span
+            >
+          </div>
+          <div class="mntc_right">
+            <span style="color: #387df7; margin-right: 24px">清空</span>
+          </div>
+        </div>
+        <div class="main_table">
+          <a-table
+            class="ant-table-striped"
+            :row-class-name="
+              (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
+            "
+            :row-selection="rowSelection"
+            :columns="columns1"
+            :data-source="tableData1"
+            :loading="tableDataTotal === -1 ? true : false"
+            :pagination="{
+              showSizeChanger: true,
+              showQuickJumper: true,
+              hideOnSinglePage: true,
+              pageSizeOptions: [],
+              pageSize: pageSize,
+              current: currentPage,
+              total: tableDataTotal,
+              onChange: (page, pageSize) => {
+                currentPage = page;
+                // console.log('page', page)
+                // 加翻页查找代码
+                // 	this.setState({
+                // 		currentPage: page,
+                // 	}, () => {
+                // 		this.getMilitaryDeployment()
+                // 	})
+              },
+            }"
+          />
+        </div>
+        <div class="main_btns">
+          <button class="btn1">取消</button>
+          <button class="btn2">确定</button>
+        </div>
+      </div>
+    </div>
+  </a-drawer>
+</template>
+<script>
+import { reactive, toRefs, ref } from "vue";
+const options1 = ref([
+  {
+    value: "value1",
+    label: "请选择状态",
+  },
+]);
+const columns1 = [
+  {
+    title: "课程编号",
+    width: "20%",
+    dataIndex: "num",
+    key: "num",
+    align: "center",
+  },
+  {
+    title: "名称",
+    width: "20%",
+    dataIndex: "name",
+    key: "name",
+    align: "center",
+  },
+  {
+    title: "内容分类",
+    width: "13%",
+    dataIndex: "content",
+    key: "content",
+    align: "center",
+  },
+  {
+    title: "授课教师",
+    width: "13%",
+    dataIndex: "teacher",
+    key: "teacher",
+    align: "center",
+  },
+  {
+    title: "创建人",
+    width: "13%",
+    dataIndex: "creator",
+    key: "creator",
+    align: "center",
+  },
+  {
+    title: "完成时间",
+    width: "20%",
+    dataIndex: "time",
+    key: "time",
+    align: "center",
+  },
+];
+const rowSelection = ref({
+  checkStrictly: false,
+  onChange: (selectedRowKeys, selectedRows) => {
+    console.log(
+      `selectedRowKeys: ${selectedRowKeys}`,
+      "selectedRows: ",
+      selectedRows
+    );
+  },
+  onSelect: (record, selected, selectedRows) => {
+    console.log(record, selected, selectedRows);
+  },
+  onSelectAll: (selected, selectedRows, changeRows) => {
+    console.log(selected, selectedRows, changeRows);
+  },
+});
+export default {
+  name: "AddFaceteach",
+  props: {
+    addfaceteachVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, ctx) {
+    const state = reactive({
+      tableData1: [
+        {
+          key: "1",
+          num: "JDF2022071100001",
+          name: "时间管理课程",
+          content: "通用力",
+          teacher: "BOE教师",
+          creator: "管理员",
+          time: "2022-10-31 23:12:00",
+        },
+        {
+          key: "2",
+          num: "JDF2022071100001",
+          name: "管理能力课程",
+          content: "领导力",
+          teacher: "BOE教师",
+          creator: "管理员",
+          time: "2022-10-31 23:12:00",
+        },
+        {
+          key: "3",
+          num: "JDF2022071100001",
+          name: "快速换模SMED",
+          content: "通用力",
+          teacher: "BOE教师",
+          creator: "管理员",
+          time: "2022-10-31 23:12:00",
+        },
+        {
+          key: "4",
+          num: "JDF2022071100001",
+          name: "巧妙对话人见人夸",
+          content: "领导力",
+          teacher: "BOE教师",
+          creator: "管理员",
+          time: "2022-10-31 23:12:00",
+        },
+        {
+          key: "5",
+          num: "JDF2022071100001",
+          name: "管理能力课程",
+          content: "领导力",
+          teacher: "BOE教师",
+          creator: "管理员",
+          time: "2022-10-31 23:12:00",
+        },
+        {
+          key: "6",
+          num: "JDF2022071100001",
+          name: "时间管理课程",
+          content: "领导力",
+          teacher: "BOE教师",
+          creator: "管理员",
+          time: "2022-10-31 23:12:00",
+        },
+        {
+          key: "7",
+          num: "JDF2022071100001",
+          name: "时间管理课程",
+          content: "领导力",
+          teacher: "BOE教师",
+          creator: "管理员",
+          time: "2022-10-31 23:12:00",
+        },
+        {
+          key: "8",
+          num: "JDF2022071100001",
+          name: "时间管理课程",
+          content: "领导力",
+          teacher: "BOE教师",
+          creator: "管理员",
+          time: "2022-10-31 23:12:00",
+        },
+        {
+          key: "9",
+          num: "JDF2022071100001",
+          name: "时间管理课程",
+          content: "领导力",
+          teacher: "BOE教师",
+          creator: "管理员",
+          time: "2022-10-31 23:12:00",
+        },
+      ],
+      currentPage: 1,
+      tableDataTotal: 100,
+      pageSize: 10,
+    });
+    const closeDrawer = () => {
+      ctx.emit("update:addfaceteachVisible", false);
+    };
+    const afterVisibleChange = (bool) => {
+      console.log("state", bool);
+    };
+    const showDrawerFaceteach = () => {
+      state.visible3 = true;
+    };
+    return {
+      ...toRefs(state),
+      afterVisibleChange,
+      showDrawerFaceteach,
+      closeDrawer,
+      options1,
+      columns1,
+      rowSelection,
+      // change,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.ant-table-striped :deep(.table-striped) td {
+  background-color: #fafafa !important;
+}
+.drawerStyle {
+  .drawerMain {
+    .header {
+      height: 73px;
+      border-bottom: 1px solid #e8e8e8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .headerTitle {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 25px;
+        margin-left: 24px;
+      }
+    }
+    .contentMain {
+      .main_items {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 12px;
+        flex-wrap: wrap;
+        .mi_ipts {
+          display: flex;
+          margin-bottom: 20px;
+          .mii_ipt {
+            display: flex;
+            align-items: center;
+            margin-right: 24px;
+            .ipt_name {
+              white-space: nowrap;
+            }
+          }
+        }
+        .mi_btns {
+          display: flex;
+          margin-left: 38px;
+          margin-bottom: 20px;
+          cursor: pointer;
+          .btn {
+            padding: 0px 26px 0px 26px;
+            height: 38px;
+            border-radius: 8px;
+            border: 1px solid rgba(64, 158, 255, 1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-left: 14px;
+            flex-shrink: 0;
+            .search {
+              background-size: 100%;
+            }
+            .btnText {
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 36px;
+              margin-left: 5px;
+            }
+          }
+          .btn1 {
+            background: rgb(64, 158, 255);
+            .search {
+              width: 15px;
+              height: 17px;
+              background-image: url("@/assets/images/coursewareManage/search0.png");
+            }
+            .btnText {
+              color: rgb(255, 255, 255);
+            }
+          }
+          .btn2 {
+            background: rgb(255, 255, 255);
+            .search {
+              width: 15px;
+              height: 17px;
+              background-image: url("@/assets/images/coursewareManage/reset1.png");
+            }
+            .btnText {
+              color: rgb(64, 158, 255);
+            }
+          }
+          .btn1:hover {
+            background: rgb(255, 255, 255);
+            .search {
+              background-image: url("@/assets/images/courseManage/search1.png");
+            }
+            .btnText {
+              color: #388be1;
+            }
+          }
+          .btn2:hover {
+            background: rgba(64, 158, 255, 1);
+            .search {
+              background-image: url("@/assets/images/courseManage/reset0.png");
+            }
+            .btnText {
+              color: #ffffff;
+            }
+          }
+        }
+      }
+      .main_notice {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 32px;
+        height: 40px;
+        background-color: #e9f6fe;
+        .mntc_left {
+          display: flex;
+          align-items: center;
+          .notice_icon {
+            width: 14px;
+            height: 14px;
+            margin-right: 9px;
+            margin-left: 9px;
+            background-image: url(@/assets/images/coursewareManage/gan.png);
+            background-size: 100% 100%;
+          }
+        }
+        .mntc_right {
+          cursor: pointer;
+        }
+      }
+      .main_btns {
+        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;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/drawers/AddOnline.vue b/src/components/drawers/AddOnline.vue
new file mode 100644
index 00000000..dee80d18
--- /dev/null
+++ b/src/components/drawers/AddOnline.vue
@@ -0,0 +1,447 @@
+<template>
+    <a-drawer
+        :visible="addonlineVisible"
+        class="drawerStyle"
+        width="80%"
+        title="添加在线"
+        placement="right"
+        @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="closeDrawer"
+                />
+            </div>
+            <div class="contentMain">
+                <div class="main_items">
+                    <div class="mi_ipts">
+                        <div class="mii_ipt">
+                            <div class="ipt_name">课程编号：</div>
+                            <div class="fi_input">
+                                <a-input
+                                    v-model:value="value1"
+                                    style="width: 240px; height: 40px; border-radius: 8px"
+                                    placeholder="请输入项目名称"
+                                />
+                            </div>
+                        </div>
+                        <div class="mii_ipt">
+                            <div class="ipt_name">内容分类：</div>
+                            <div class="select">
+                                <a-select
+                                dropdownClassName="dropdown-style"
+                                style="width: 240px"
+                                placeholder="请选择"
+                                :options="options1"
+                                allowClear
+                                showSearch
+                            />
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mi_btns">
+                        <div class="btn btn1">
+                            <div class="search"></div>
+                            <div class="btnText">搜索</div>
+                        </div>
+                        <div class="btn btn2">
+                            <div class="search"></div>
+                            <div class="btnText">重置</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="main_notice">
+                    <div class="mntc_left">
+                        <div class="notice_icon"></div>
+                        <span style="color:rgba(0, 0, 0, .65); margin-right:17px;">已选择 <span style="color:#388BE1;">4</span> 项</span>
+                        <span style="color:rgba(0, 0, 0, .65)">列表选项总计：<span>14</span> 条</span>
+                    </div>
+                    <div class="mntc_right">
+                        <span style="color:#387DF7; margin-right:24px;">清空</span>
+                    </div>
+                </div>
+                <div class="main_table">
+                    <a-table class="ant-table-striped" 
+                        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)" 
+                        :row-selection="rowSelection" 
+                        :columns="columns1" 
+                        :data-source="tableData1"
+                        :loading="tableDataTotal === -1 ? true : false"
+                        :pagination="{
+                            showSizeChanger: true,
+                            showQuickJumper: true,
+                            hideOnSinglePage: true,
+                            pageSizeOptions: [],
+                            pageSize: pageSize,
+                            current: currentPage,
+                            total: tableDataTotal,
+                            onChange: (page, pageSize) => {
+                            currentPage = page;
+                            // console.log('page', page)
+                            // 加翻页查找代码
+                            // 	this.setState({
+                            // 		currentPage: page,
+                            // 	}, () => {
+                            // 		this.getMilitaryDeployment()
+                            // 	})
+                            },
+                        }"
+                    />
+                </div>
+                <div class="main_btns">
+                    <button class="btn1">取消</button>
+                    <button class="btn2">确定</button>
+                </div>
+            </div>
+        </div>
+    </a-drawer>
+</template>
+<script>
+import { reactive, toRefs, ref } from "vue";
+    const options1 = ref([
+            {
+                value: "value1",
+                label: "请选择状态",
+            },
+    ]);
+    const columns1 = [
+        {
+            title: "课程编号",
+            width: '20%',
+            dataIndex: "num",
+            key: "num",
+            align: "center",
+        },
+        {
+            title: "名称",
+            width: '20%',
+            dataIndex: "name",
+            key: "name",
+            align: "center",
+        },
+        {
+            title: "内容分类",
+            width: '13%',
+            dataIndex: "content",
+            key: "content",
+            align: "center",
+        },
+        {
+            title: "授课教师",
+            width: '13%',
+            dataIndex: "teacher",
+            key: "teacher",
+            align: "center",
+        },
+        {
+            title: "创建人",
+            width: '13%',
+            dataIndex: "creator",
+            key: "creator",
+            align: "center",
+        },
+        {
+            title: "完成时间",
+            width: '20%',
+            dataIndex: "time",
+            key: "time",
+            align: "center",
+        },
+    ]
+    const rowSelection = ref({
+        checkStrictly: false,
+        onChange: (selectedRowKeys, selectedRows) => {
+            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+        },
+        onSelect: (record, selected, selectedRows) => {
+            console.log(record, selected, selectedRows);
+        },
+        onSelectAll: (selected, selectedRows, changeRows) => {
+            console.log(selected, selectedRows, changeRows);
+        },
+    });
+    export default {
+        name: "AddOnline",
+        props: {
+        addonlineVisible: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    setup(props, ctx) {
+        const state = reactive({
+            tableData1: [
+                {
+                    key: "1",
+                    num: 'JDF2022071100001',
+                    name:'时间管理课程',
+                    content:'通用力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+                {
+                    key: "2",
+                    num: 'JDF2022071100001',
+                    name:'管理能力课程',
+                    content:'领导力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+                {
+                    key: "3",
+                    num: 'JDF2022071100001',
+                    name:'快速换模SMED',
+                    content:'通用力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+                {
+                    key: "4",
+                    num: 'JDF2022071100001',
+                    name:'巧妙对话人见人夸',
+                    content:'领导力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+                {
+                    key: "5",
+                    num: 'JDF2022071100001',
+                    name:'管理能力课程',
+                    content:'领导力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+                {
+                    key: "6",
+                    num: 'JDF2022071100001',
+                    name:'时间管理课程',
+                    content:'领导力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+                {
+                    key: "7",
+                    num: 'JDF2022071100001',
+                    name:'时间管理课程',
+                    content:'领导力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+                {
+                    key: "8",
+                    num: 'JDF2022071100001',
+                    name:'时间管理课程',
+                    content:'领导力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+                {
+                    key: "9",
+                    num: 'JDF2022071100001',
+                    name:'时间管理课程',
+                    content:'领导力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+            ],
+            currentPage: 1,
+            tableDataTotal: 100,
+            pageSize: 10,
+        });
+        const closeDrawer = () => {
+            ctx.emit("update:addonlineVisible", false);
+        };
+        const afterVisibleChange = (bool) => {
+            console.log("state", bool);
+        };
+        const showDrawerOnline = () => {
+            state.visible = true;
+        };
+        return {
+            ...toRefs(state),
+            afterVisibleChange,
+            showDrawerOnline,
+            closeDrawer,
+            options1,
+            columns1,
+            rowSelection,
+            // change,
+        };
+    },
+};
+</script>
+<style lang="scss" scoped>
+.ant-table-striped :deep(.table-striped) td {
+  background-color: #fafafa !important;
+}
+.drawerStyle {
+    .drawerMain {
+        .header {
+            height: 73px;
+            border-bottom: 1px solid #e8e8e8;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .headerTitle {
+            font-size: 18px;
+            font-weight: 600;
+            color: #333333;
+            line-height: 25px;
+            margin-left: 24px;
+            }
+        }
+        .contentMain {
+            .main_items{
+                display: flex;
+                justify-content: space-between;
+                margin-bottom: 12px;
+                flex-wrap: wrap;
+                .mi_ipts{
+                    display: flex;
+                    margin-bottom: 20px;
+                    .mii_ipt{
+                        display: flex;
+                        align-items: center;
+                        margin-right: 24px;
+                        .ipt_name{
+                            white-space: nowrap;
+                        }
+                    }
+                }
+                .mi_btns{
+                    display: flex;
+                    margin-left: 38px;
+                    margin-bottom: 20px;
+                    cursor: pointer;
+                    .btn {
+                        padding: 0px 26px 0px 26px;
+                        height: 38px;
+                        border-radius: 8px;
+                        border: 1px solid rgba(64, 158, 255, 1);
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        margin-left: 14px;
+                        flex-shrink: 0;
+                        .search {
+                        background-size: 100%;
+                        }
+                        .btnText {
+                        font-size: 14px;
+                        font-weight: 400;
+                        line-height: 36px;
+                        margin-left: 5px;
+                        }
+                    }
+                    .btn1 {
+                        background: rgb(64, 158, 255);
+                        .search {
+                        width: 15px;
+                        height: 17px;
+                        background-image: url("@/assets/images/coursewareManage/search0.png");
+                        }
+                        .btnText{
+                            color: rgb(255, 255, 255);
+                        }
+                    }
+                    .btn2 {
+                        background: rgb(255, 255, 255);
+                        .search {
+                        width: 15px;
+                        height: 17px;
+                        background-image: url("@/assets/images/coursewareManage/reset1.png");
+                        }
+                        .btnText{
+                            color: rgb(64, 158, 255);
+                        }
+                    }
+                    .btn1:hover {
+                        background: rgb(255, 255, 255);
+                        .search {
+                        background-image: url("@/assets/images/courseManage/search1.png");
+                        }
+                        .btnText {
+                        color: #388BE1;
+                        }
+                    }
+                    .btn2:hover {
+                        background: rgba(64, 158, 255, 1);
+                        .search {
+                        background-image: url("@/assets/images/courseManage/reset0.png");
+                        }
+                        .btnText {
+                        color: #ffffff;
+                        }
+                    }
+                }
+            }
+            .main_notice{
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 32px;
+                height: 40px;
+                background-color: #E9F6FE;
+                .mntc_left{
+                    display: flex;
+                    align-items: center;    
+                    .notice_icon{
+                        width: 14px;
+                        height: 14px;
+                        margin-right: 9px;
+                        margin-left: 9px;
+                        background-image: url(@/assets/images/coursewareManage/gan.png);
+                        background-size: 100% 100%;
+                    }
+                }
+                .mntc_right{
+                    cursor: pointer;
+                }
+            }
+            .main_btns{
+                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;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/drawers/AddVote.vue b/src/components/drawers/AddVote.vue
index c9061de7..f91322d2 100644
--- a/src/components/drawers/AddVote.vue
+++ b/src/components/drawers/AddVote.vue
@@ -2,8 +2,7 @@
   <a-drawer
     :visible="addvoteVisible"
     class="drawerStyle"
-    style="color: red"
-    width="80%"
+    width="70%"
     title="添加投票"
     placement="right"
     @after-visible-change="afterVisibleChange"
diff --git a/src/components/drawers/EditOnline.vue b/src/components/drawers/EditOnline.vue
new file mode 100644
index 00000000..feaec1d1
--- /dev/null
+++ b/src/components/drawers/EditOnline.vue
@@ -0,0 +1,443 @@
+<template>
+    <a-drawer
+        :visible="editonlineVisible"
+        class="drawerStyle"
+        width="80%"
+        title="添加在线"
+        placement="right"
+        @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="closeDrawer"
+                />
+            </div>
+            <div class="contentMain">
+                <div class="main_item">
+                    <div class="signbox">
+                        <div class="sign"><img src="@/assets/images/coursewareManage/asterisk.png" alt=""></div>
+                        <span style="margin-right: 3px">课程名称：</span>
+                    </div>
+                    <div class="fi_input">
+                        <a-input
+                        v-model:value="value2"
+                        style="width: 384px; height: 40px; border-radius: 8px"
+                        placeholder="请输入小组名称"
+                        />
+                    </div>
+                </div>
+                <div class="main_item">
+                    <div class="signbox">
+                        <div class="sign"><img src="@/assets/images/coursewareManage/asterisk.png" alt=""></div>
+                        <span style="margin-right: 3px">选择课程：</span>
+                    </div>
+                    <div class="btnbox">
+                        <button class="xkbtn">选择课程</button>
+                        <a-tag closable @close="log" color='#F0FFFF' style="background-color: #388BE1;">时间管理</a-tag>
+                    </div>
+                </div>
+                <div class="main_items">
+                    <div class="mi_ipts">
+                        <div class="mii_ipt">
+                            <div class="ipt_name">课程编号：</div>
+                            <div class="fi_input">
+                                <a-input
+                                    v-model:value="value1"
+                                    style="width: 240px; height: 40px; border-radius: 8px"
+                                    placeholder="请输入项目名称"
+                                />
+                            </div>
+                        </div>
+                        <div class="mii_ipt">
+                            <div class="ipt_name">内容分类：</div>
+                            <div class="select">
+                                <a-select
+                                dropdownClassName="dropdown-style"
+                                style="width: 240px"
+                                placeholder="请选择"
+                                :options="options1"
+                                allowClear
+                                showSearch
+                            />
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mi_btns">
+                        <div class="btn btn1">
+                            <div class="search"></div>
+                            <div class="btnText">搜索</div>
+                        </div>
+                        <div class="btn btn2">
+                            <div class="search"></div>
+                            <div class="btnText">重置</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="main_table">
+                    <a-table class="ant-table-striped" 
+                        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)" 
+                        :row-selection="rowSelection" 
+                        :columns="columns1" 
+                        :data-source="tableData1"
+                        :loading="tableDataTotal === -1 ? true : false"
+                        :pagination="{
+                            showSizeChanger: true,
+                            showQuickJumper: true,
+                            hideOnSinglePage: true,
+                            pageSizeOptions: [],
+                            pageSize: pageSize,
+                            current: currentPage,
+                            total: tableDataTotal,
+                            onChange: (page, pageSize) => {
+                            currentPage = page;
+                            // console.log('page', page)
+                            // 加翻页查找代码
+                            // 	this.setState({
+                            // 		currentPage: page,
+                            // 	}, () => {
+                            // 		this.getMilitaryDeployment()
+                            // 	})
+                            },
+                        }"
+                    />
+                </div>
+                <div class="main_btns">
+                    <button class="btn1">取消</button>
+                    <button class="btn2">确定</button>
+                </div>
+            </div>
+        </div>
+    </a-drawer>
+</template>
+<script>
+import { reactive, toRefs, ref } from "vue";
+    const options1 = ref([
+            {
+                value: "value1",
+                label: "请选择状态",
+            },
+    ]);
+    const columns1 = [
+        {
+            title: "课程编号",
+            width: '20%',
+            dataIndex: "num",
+            key: "num",
+            align: "center",
+        },
+        {
+            title: "名称",
+            width: '20%',
+            dataIndex: "name",
+            key: "name",
+            align: "center",
+        },
+        {
+            title: "内容分类",
+            width: '13%',
+            dataIndex: "content",
+            key: "content",
+            align: "center",
+        },
+        {
+            title: "授课教师",
+            width: '13%',
+            dataIndex: "teacher",
+            key: "teacher",
+            align: "center",
+        },
+        {
+            title: "创建人",
+            width: '13%',
+            dataIndex: "creator",
+            key: "creator",
+            align: "center",
+        },
+        {
+            title: "完成时间",
+            width: '20%',
+            dataIndex: "time",
+            key: "time",
+            align: "center",
+        },
+    ]
+    const rowSelection = ref({
+        checkStrictly: false,
+        onChange: (selectedRowKeys, selectedRows) => {
+            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+        },
+        onSelect: (record, selected, selectedRows) => {
+            console.log(record, selected, selectedRows);
+        },
+        onSelectAll: (selected, selectedRows, changeRows) => {
+            console.log(selected, selectedRows, changeRows);
+        },
+    });
+    export default {
+        name: "EditOnline",
+        props: {
+        editonlineVisible: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    setup( props,ctx) {
+        const state = reactive({
+            tableData1: [
+                {
+                    key: "1",
+                    num: 'JDF2022071100001',
+                    name:'时间管理课程',
+                    content:'通用力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+                {
+                    key: "2",
+                    num: 'JDF2022071100001',
+                    name:'管理能力课程',
+                    content:'领导力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+                {
+                    key: "3",
+                    num: 'JDF2022071100001',
+                    name:'快速换模SMED',
+                    content:'通用力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+                {
+                    key: "4",
+                    num: 'JDF2022071100001',
+                    name:'巧妙对话人见人夸',
+                    content:'领导力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+                {
+                    key: "5",
+                    num: 'JDF2022071100001',
+                    name:'管理能力课程',
+                    content:'领导力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+                {
+                    key: "6",
+                    num: 'JDF2022071100001',
+                    name:'时间管理课程',
+                    content:'领导力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+                {
+                    key: "7",
+                    num: 'JDF2022071100001',
+                    name:'时间管理课程',
+                    content:'领导力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+            ],
+            currentPage: 1,
+            tableDataTotal: 100,
+            pageSize: 10,
+        });
+        const closeDrawer = () => {
+            ctx.emit("update:editonlineVisible", false);
+        };
+        const afterVisibleChange = (bool) => {
+            console.log("state", bool);
+        };
+        return {
+            ...toRefs(state),
+            afterVisibleChange,
+            closeDrawer,
+            options1,
+            columns1,
+            rowSelection,
+            // change,
+        };
+    },
+};
+</script>
+<style lang="scss" scoped>
+.ant-table-striped :deep(.table-striped) td {
+  background-color: #fafafa !important;
+}
+.drawerStyle {
+    .drawerMain {
+        .header {
+            height: 73px;
+            border-bottom: 1px solid #e8e8e8;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .headerTitle {
+            font-size: 18px;
+            font-weight: 600;
+            color: #333333;
+            line-height: 25px;
+            margin-left: 24px;
+            }
+        }
+        .contentMain {
+            .main_item{
+                display: flex;
+                align-items: center;
+                margin-bottom: 32px;
+                .signbox{
+                    display: flex;
+                    align-items: center;
+                    .sign{
+                        margin-right: 5px;
+                    }
+                }
+                .btnbox{
+                    display: flex;
+                    align-items: center;
+                    .xkbtn {
+                        cursor: pointer;
+                        width: 130px;
+                        height: 40px;
+                        background: #388BE1;
+                        border-radius: 8px;
+                        border: 0;
+                        margin-right: 8px;
+                        color: #fff;
+                    }
+                }
+            }
+            .main_items{
+                display: flex;
+                justify-content: space-between;
+                flex-wrap:wrap;
+                margin-bottom: 12px;
+                .mi_ipts{
+                    display: flex;
+                    margin-bottom: 20px;
+                    flex-wrap: wrap;
+                    .mii_ipt{
+                        display: flex;
+                        align-items: center;
+                        margin-right: 24px;
+                        margin-bottom: 10px;
+                        .ipt_name{
+                            white-space: nowrap;
+                        }
+                    }
+                }
+                .mi_btns{
+                    display: flex;
+                    margin-left: 38px;
+                    margin-bottom: 20px;
+                    cursor: pointer;
+                    .btn {
+                        padding: 0px 26px 0px 26px;
+                        height: 38px;
+                        border-radius: 8px;
+                        border: 1px solid rgba(64, 158, 255, 1);
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        margin-left: 14px;
+                        flex-shrink: 0;
+                        .search {
+                        background-size: 100%;
+                        }
+                        .btnText {
+                        font-size: 14px;
+                        font-weight: 400;
+                        line-height: 36px;
+                        margin-left: 5px;
+                        }
+                    }
+                    .btn1 {
+                        background: rgb(64, 158, 255);
+                        .search {
+                        width: 15px;
+                        height: 17px;
+                        background-image: url("@/assets/images/coursewareManage/search0.png");
+                        }
+                        .btnText{
+                            color: rgb(255, 255, 255);
+                        }
+                    }
+                    .btn2 {
+                        background: rgb(255, 255, 255);
+                        .search {
+                        width: 15px;
+                        height: 17px;
+                        background-image: url("@/assets/images/coursewareManage/reset1.png");
+                        }
+                        .btnText{
+                            color: rgb(64, 158, 255);
+                        }
+                    }
+                    .btn1:hover {
+                        background: rgb(255, 255, 255);
+                        .search {
+                        background-image: url("@/assets/images/courseManage/search1.png");
+                        }
+                        .btnText {
+                        color: #388BE1;
+                        }
+                    }
+                    .btn2:hover {
+                        background: rgba(64, 158, 255, 1);
+                        .search {
+                        background-image: url("@/assets/images/courseManage/reset0.png");
+                        }
+                        .btnText {
+                        color: #ffffff;
+                        }
+                    }
+                }
+            }
+            .main_btns{
+                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;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/courselibrary/CoursewareManage.vue b/src/views/courselibrary/CoursewareManage.vue
index 6424a0f1..3ffd098e 100644
--- a/src/views/courselibrary/CoursewareManage.vue
+++ b/src/views/courselibrary/CoursewareManage.vue
@@ -104,7 +104,6 @@
                 />
                 <div class="inp_num"><span style="color:#C7CBD2">{{ value5.length }}/20</span></div>
               </div>
-              <!-- <div class="showcount">{{ valueE.length }}/20</div> -->
             </div>
             <div class="b_sub">
               <div class="bs_header">
@@ -258,8 +257,8 @@
                           maxlength="90"
                           style="width: 440px; height: 40px; border-radius: 8px"
                           placeholder="请输入课程名称"
-                        >
-                        </a-input>
+                        />
+                        <div class="inp_num"><span style="color:#C7CBD2">{{ value6.length }}/90</span></div>
                       </div>
                     </div>
                   </div>
@@ -342,6 +341,7 @@
                           style="width: 440px; height: 40px; border-radius: 8px"
                           placeholder="请输入目标人群"
                         />
+                        <div class="inp_num"><span style="color:#C7CBD2">{{ value7.length }}/50</span></div>
                       </div>
                     </div>
                   </div>
@@ -357,6 +357,7 @@
                           style="width: 440px; height: 40px; border-radius: 8px"
                           placeholder="请输入课程价值"
                         />
+                        <div class="inp_num"><span style="color:#C7CBD2">{{ value8.length }}/200</span></div>
                       </div>
                     </div>
                   </div>
@@ -441,6 +442,7 @@
                           style="width: 440px; height: 100px; border-radius: 8px"
                           placeholder="请输入"
                         />
+                        <div class="inp_num"><span style="color:#C7CBD2">{{ value11.length }}/150</span></div>
                       </div>
                     </div>
                     
@@ -567,7 +569,7 @@
       />
     </div>
     <!-- 表格 -->
-    <!-- 操作在线课程管理页面 -->
+    <!-- 操作在线面授课程管理页面 -->
     <a-modal
       v-model:visible="om_1"
       title="Title"
@@ -583,7 +585,8 @@
               style="width: 17px; height: 18px; margin-right: 8px"
               src="../../assets/images/basicinfo/add.png"
             />
-            <span class="headerLeftText">在线课程管理</span>
+            <div :style="{ display: ft_1 ? 'none' : 'block'}"> <span class="headerLeftText">在线课程管理</span> </div>
+            <div :style="{ display: ft_1 ? 'block' : 'none' }"> <span class="headerLeftText">面授课程管理</span> </div>
           </div>
           <div style="margin-right: 57px; cursor: pointer">
             <img
@@ -606,154 +609,107 @@
                       <div class="bs_left">状态：</div>
                       <div class="bs_right">已审核</div>
                     </div>
-                    <div class="b_menu">
-                      <a-menu v-model:selectedKeys="current" mode="horizontal">
-                        <a-menu-item key="mail"> 报名管理 </a-menu-item>
-                        <a-menu-item key="sub2"> 学习记录 </a-menu-item>
-                        <a-menu-item key="sub3"> 资源完成情况 </a-menu-item>
-                      </a-menu>
-                    </div>
-                    <div class="b_menunav">
-                      <div class="bm_select">
-                        <a-select
-                          class="select"
-                          ref="select"
-                          placeholder="请选择状态"
-                          v-model:value="value12"
-                          style="width: 200px"
-                          @focus="focus"
-                          @change="handleChange"
-                        >
-                          <a-select-option value="status">状态</a-select-option>
-                          <a-select-option value="passed">已通过</a-select-option>
-                          <a-select-option value="weishenhe">未审核</a-select-option>
-                          <a-select-option value="reject">管理员拒绝</a-select-option>
-                        </a-select>
-                      </div>
-                      <div class="bm_input">
-                        <a-input
-                          v-model:value="value13"
-                          style="width: 200px; height: 40px; border-radius: 8px"
-                          placeholder="姓名"
-                        />
-                      </div>
-                      <div class="bm_btn">
-                        <div class="btn btn1">
-                          <div class="search"></div>
-                          <div class="btnText">搜索</div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="bm_table" style="margin-bottom: 20px">
-                      <a-table
-                        :columns="columns2"
-                        :data-source="tableData2"
-                        :loading="tableDataTotal === -1 ? true : false"
-                        :pagination="false"
-                      />
-                    </div>
-                  </div>
-                </div>
-          </div>
-        </div>
-    </a-modal>
-    <!-- 操作在线课程管理页面 -->
-    <!-- 操作面授课程管理页面 -->
-    <a-modal
-      v-model:visible="ftm_1"
-      title="Title"
-      @ok="closeModal"
-      :footer="null"
-      :closable="false"
-      wrapClassName="modalStyle"
-      width="80%"
-    >
-        <div class="modalHeader">
-          <div class="headerLeft">
-            <img
-              style="width: 17px; height: 18px; margin-right: 8px"
-              src="../../assets/images/basicinfo/add.png"
-            />
-            <span class="headerLeftText">面授课程管理</span>
-          </div>
-          <div style="margin-right: 57px; cursor: pointer">
-            <img
-              @click="ftm_exit"
-              style="width: 22px; height: 22px"
-              src="../../assets/images/basicinfo/close22.png"
-            />
-          </div>
-        </div>
-        <div class="modalMain">
-          <div class="faceteachmanage" :style="{ display: ftm_1 ? 'block' : 'none' }">
-            <div class="om_main">
-              <div class="om_body">
-                <div class="b_title">课程：BMOT2021年职级晋升-安全管理（高级）</div>
-                <div class="b_sub">
-                  <div class="bs_type">类型：</div>
-                  <div class="bs_right">录播课</div>
-                  <div class="bs_left">内容分类：</div>
-                  <div class="bs_right">领导力</div>
-                  <div class="bs_left">状态：</div>
-                  <div class="bs_right">已审核</div>
-                </div>
-                <div class="b_menu">
-                  <a-menu v-model:selectedKeys="current" mode="horizontal">
-                    <a-menu-item key="mail"> 报名管理 </a-menu-item>
-                    <a-menu-item key="sub2"> 学习记录 </a-menu-item>
-                  </a-menu>
-                </div>
-                <div class="b_menunav">
-                  <div class="bm_select">
-                    <a-select
-                      class="select"
-                      ref="select"
-                      placeholder="请选择状态"
-                      v-model:value="value14"
-                      style="width: 200px"
-                      @focus="focus"
-                      @change="handleChange"
+                    <a-tabs
+                        class="b_menu"
+                        v-model:activeKey="activeKey"
+                        size="large"
+                        :tabBarStyle="{ marginLeft: '10px' }"
                     >
-                      <a-select-option value="status">状态</a-select-option>
-                      <a-select-option value="passed">已通过</a-select-option>
-                      <a-select-option value="weishenhe">未审核</a-select-option>
-                      <a-select-option value="reject">管理员拒绝</a-select-option>
-                    </a-select>
-                  </div>
-                  <div class="bm_input">
-                    <a-input
-                      v-model:value="value15"
-                      style="width: 200px; height: 40px; border-radius: 8px"
-                      placeholder="姓名"
-                    />
-                  </div>
-                  <div class="bm_btn">
-                    <div class="btn btn1">
-                      <div class="search"></div>
-                      <div class="btnText">搜索</div>
-                    </div>
+                      <a-tab-pane key="1" tab="报名管理">
+                        <div class="b_menunav">
+                          <div class="bm_select">
+                            <a-select
+                              class="select"
+                              ref="select"
+                              placeholder="请选择状态"
+                              v-model:value="value12"
+                              style="width: 200px"
+                              @focus="focus"
+                              @change="handleChange"
+                            >
+                              <a-select-option value="status">状态</a-select-option>
+                              <a-select-option value="passed">已通过</a-select-option>
+                              <a-select-option value="weishenhe">未审核</a-select-option>
+                              <a-select-option value="reject">管理员拒绝</a-select-option>
+                            </a-select>
+                          </div>
+                          <div class="bm_input">
+                            <a-input
+                              v-model:value="value13"
+                              style="width: 200px; height: 40px; border-radius: 8px"
+                              placeholder="姓名"
+                            />
+                          </div>
+                          <div class="bm_btn">
+                            <div class="btn btn1">
+                              <div class="search"></div>
+                              <div class="btnText">搜索</div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="bm_table" style="margin-bottom: 20px">
+                          <a-table
+                            :columns="columns2"
+                            :data-source="tableData2"
+                            :loading="tableDataTotal === -1 ? true : false"
+                            :pagination="false"
+                          />
+                        </div>
+                      </a-tab-pane>
+                      <a-tab-pane key="2" tab="学习记录">
+                        <div class="b_menunav">
+                          <div class="bm_select">
+                            <a-select
+                              class="select"
+                              ref="select"
+                              placeholder="请选择状态"
+                              v-model:value="value14"
+                              style="width: 200px"
+                              @focus="focus"
+                              @change="handleChange"
+                            >
+                              <a-select-option value="status">状态</a-select-option>
+                              <a-select-option value="passed">已通过</a-select-option>
+                              <a-select-option value="weishenhe">未审核</a-select-option>
+                              <a-select-option value="reject">管理员拒绝</a-select-option>
+                            </a-select>
+                          </div>
+                          <div class="bm_input">
+                            <a-input
+                              v-model:value="value15"
+                              style="width: 200px; height: 40px; border-radius: 8px"
+                              placeholder="姓名"
+                            />
+                          </div>
+                          <div class="bm_btn">
+                            <div class="btn btn1">
+                              <div class="search"></div>
+                              <div class="btnText">搜索</div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="bm_table" style="margin-bottom: 20px">
+                          <a-table
+                            :columns="columns2"
+                            :data-source="tableData3"
+                            :loading="tableDataTotal === -1 ? true : false"
+                            :pagination="false"
+                          >
+                            <template #bodyCell="{ column }">
+                              <template v-if="column.key === 'opacation'">
+                                <a @click="ckxq_hs">查看详情</a>
+                              </template>
+                            </template>
+                          </a-table>
+                        </div>
+                      </a-tab-pane>
+                    </a-tabs>
                   </div>
                 </div>
-                <div class="bm_table" style="margin-bottom: 20px">
-                  <a-table
-                    :columns="columns2"
-                    :data-source="tableData3"
-                    :loading="tableDataTotal === -1 ? true : false"
-                    :pagination="false"
-                  >
-                    <template #bodyCell="{ column }">
-                      <template v-if="column.key === 'opacation'">
-                        <a @click="ckxq_hs">查看详情</a>
-                      </template>
-                    </template>
-                  </a-table>
-                </div>
-              </div>
-            </div>
           </div>
         </div>
     </a-modal>
-    <!-- 操作面授课程管理页面 -->
+    <!-- 操作在线面授课程管理页面 -->
     <!-- 面授课程管理查看详情页面 -->
     <a-modal
       v-model:visible="om_ckxq"
@@ -1038,9 +994,11 @@
             <div class="b_input">
               <a-input
                 v-model:value="value20"
+                maxlength="50"
                 style="width: 440px; height: 40px; border-radius: 8px"
                 placeholder="请输入详细地点"
               />
+              <div class="inp_num"><span style="color:#C7CBD2">{{ value20.length }}/50</span></div>
             </div>
           </div>
           <div class="cstm_items">
@@ -1085,12 +1043,10 @@
                 <span style="margin-right: 3px">签到设置</span>
               </div>
               <div class="b_input">
-                <a-checkbox v-model:checked="checked">
-                  <span style="color: #6d7584; margin-right: 30px">是否允许未报名的学员签到</span>
-                </a-checkbox>
-                <a-checkbox v-model:checked="checked">
-                  <span style="color: #6d7584">签到是否需要口令</span>
-                </a-checkbox>
+                <a-radio-group v-model:value="valueB">
+                  <a-radio :value="24"><span style="color: #6d7584; margin-right: 30px">是否允许未报名的学员签到</span></a-radio>
+                  <a-radio :value="25"><span style="color: #6d7584">签到是否需要口令</span></a-radio>
+                </a-radio-group>
               </div>
           </div>
           <div class="cstm_items">
@@ -1108,15 +1064,11 @@
                 <span style="margin-right: 3px">完成规则</span>
               </div>
               <div class="b_input">
-                <a-checkbox v-model:checked="checked">
-                  <span style="color: #6d7584; margin-right: 30px">报名即完成</span>
-                </a-checkbox>
-                <a-checkbox v-model:checked="checked">
-                  <span style="color: #6d7584; margin-right: 30px">签到即完成</span>
-                </a-checkbox>
-                <a-checkbox v-model:checked="checked">
-                  <span style="color: #6d7584">请假算完成</span>
-                </a-checkbox>
+                <a-radio-group v-model:value="valueC">
+                  <a-radio :value="26"><span style="color: #6d7584; margin-right: 30px">报名即完成</span></a-radio>
+                  <a-radio :value="27"><span style="color: #6d7584; margin-right: 30px">签到即完成</span></a-radio>
+                  <a-radio :value="28"><span style="color: #6d7584">请假算完成</span></a-radio>
+                </a-radio-group>
               </div>
           </div>
           <div class="cstm_items items_fj">
@@ -2129,7 +2081,7 @@ export default defineComponent({
       bs_hs: true,
       ft_hs:false,
       om_1: false,
-      ftm_1: false,
+      ft_1: false,
       om_ckxq: false,
       gpm_hs: false,
       stm_hs: false,
@@ -2146,7 +2098,13 @@ export default defineComponent({
       // value2:"",
       value5:"",
       value6:"",
+      value7:"",
+      value8:"",
+      value11:"",
+      value20:"",
       valueE:"",
+      valueB:"",
+      valueC:"",
       selectedRowKeys: [],
     });
     const fileList = ref([]);
@@ -2207,10 +2165,12 @@ export default defineComponent({
                         class="jc"
                         style={{ width: "30px" }}
                         onClick={() => {
-                          if (value.courseform === "线上") {
+                          if (value.courseform === "线上" ) {
                             state.om_1 = true;
+                            state.ft_1 = false;
                           } else if (value.courseform === "面授") {
-                            state.ftm_1 = true;
+                            state.om_1 = true;
+                            state.ft_1 = true;
                           }
                         }}
                       >
@@ -2709,9 +2669,6 @@ export default defineComponent({
     const om_exit = () => {
       state.om_1 = false;
     };
-    const ftm_exit = () => {
-      state.ftm_1 = false;
-    };
     const ckxq_hs = () => {
       state.om_ckxq = true;
     };
@@ -2783,7 +2740,6 @@ export default defineComponent({
       createft,
       ft_exit,
       om_exit,
-      ftm_exit,
       ckxq_hs,
       ftsr_exit,
       gpm_exit,
@@ -2811,6 +2767,7 @@ export default defineComponent({
 //     color: #4EA6FF !important;
 // }
 // }
+
 .courseManage {
   width: 100%;
   height: 100%;
@@ -2989,6 +2946,7 @@ export default defineComponent({
       }
       .m_body {
         display: flex;
+        flex-wrap: wrap;
         .mb_left {
           width: 50%;
           .mbl_items {
@@ -3001,6 +2959,7 @@ export default defineComponent({
               display: flex;
               align-items: center;
               justify-content: flex-end;
+              white-space: nowrap;
               .asterisk_icon{
                 width: 10px;
                 height: 10px;
@@ -3010,6 +2969,12 @@ export default defineComponent({
             }
             .item_inp{
               flex:1;
+              position: relative;
+              .inp_num{
+                position: absolute;
+                left:398px;
+                top:10px;
+              }
             }
           }
             .i2_cz{
@@ -3039,6 +3004,7 @@ export default defineComponent({
               display: flex;
               align-items: center;
               justify-content: flex-end;
+              white-space: nowrap;
               .asterisk_icon{
                 width: 10px;
                 height: 10px;
@@ -3048,6 +3014,12 @@ export default defineComponent({
             }
             .item_inp{
               flex:1;
+              position: relative;
+              .inp_num{
+                position: absolute;
+                left:395px;
+                bottom:10px;
+              }
             }
             .accessory{
               display:flex;
@@ -3411,6 +3383,7 @@ export default defineComponent({
         }
         .b_input{
           flex:1;
+          position: relative;
           .upload_box {
             display: flex;
             cursor: pointer;
@@ -3420,6 +3393,11 @@ export default defineComponent({
               margin-right: 5px;
             }
           }
+          .inp_num{
+            position: absolute;
+            top:9px;
+            right:10px;
+          }
         }
       }
       .items_fj{
@@ -3877,8 +3855,7 @@ export default defineComponent({
         }
       }
       .modalMain{
-        .onlinemanage,
-        .faceteachmanage {
+        .onlinemanage {
           display: none;
           z-index: 999;
           min-width: 1000px;
diff --git a/src/views/projectcenter/ProjectManage.vue b/src/views/projectcenter/ProjectManage.vue
index 29acaa1d..30428fa0 100644
--- a/src/views/projectcenter/ProjectManage.vue
+++ b/src/views/projectcenter/ProjectManage.vue
@@ -54,11 +54,11 @@
         <div class="btn btn2">
           <div class="search"></div>
           <div class="btnText">重置</div>
-        </div>       
-          <div class="btn btn3" @click="showModal1">
-            <div class="search"></div>
-            <div class="btnText">创建项目</div>
-          </div>
+        </div>
+        <div class="btn btn3" @click="showModal1">
+          <div class="search"></div>
+          <div class="btnText">创建项目</div>
+        </div>
       </div>
     </div>
     <!-- 搜索框及按钮 -->
@@ -109,7 +109,7 @@
     <!-- 表格 -->
     <!-- 创建子项目弹窗 -->
     <div>
-        <a-modal
+      <a-modal
         v-model:visible="sonproject"
         :title="null"
         @ok="closeModal"
@@ -119,13 +119,27 @@
         width="764px"
         height="356px"
       >
-        <div class="modalHeader" 
-             style="width: 100%;height: 68px;display: flex;align-items: center;justify-content: space-between;background:linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2000) 100%)"
-          >
+        <div
+          class="modalHeader"
+          style="
+            width: 100%;
+            height: 68px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: linear-gradient(
+              0deg,
+              rgba(78, 166, 255, 0) 0%,
+              rgba(78, 166, 255, 0.2) 100%
+            );
+          "
+        >
           <div class="headerLeft" style="margin-left: 32px">
-            <span class="headerLeftText" style="font-size: 16px">请选择项目类别</span>
+            <span class="headerLeftText" style="font-size: 16px"
+              >请选择项目类别</span
+            >
           </div>
-          <div style="cursor: pointer;margin-right:32px" @click="closeModal">
+          <div style="cursor: pointer; margin-right: 32px" @click="closeModal">
             <img
               style="width: 22px; height: 22px"
               src="../../assets/images/basicinfo/close22.png"
@@ -133,18 +147,47 @@
           </div>
         </div>
         <div class="modalMain">
-            <router-link to="/sonproject" class="taskbox" style="margin-right: 24px;background:linear-gradient(180deg,rgba(221, 234, 255, 1) 100%,rgba(240, 248, 254, 1) 100%);">
-                <div class="leftt"><img src="../../assets/images/taskpage/left2.png"/></div>
-                <div class="photo"><img src="../../assets/images/taskpage/picture4.png"/></div>
-                <div class="rightt"><img src="../../assets/images/taskpage/right2.png"/></div>
-                <div class="centerbox" style="color: rgba(78, 166, 255, 1)">单层子项目</div>
-            </router-link>
-            <div class="taskbox" @click="showModal3" style="background:linear-gradient(180deg,rgba(254, 243, 221, 1) 100%,rgba(255, 250, 240, 1) 100%);"> 
-                <div class="leftt"><img src="../../assets/images/taskpage/left1.png"/></div>
-                <div class="photo"><img src="../../assets/images/taskpage/picture5.png"/></div>
-                <div class="rightt"><img src="../../assets/images/taskpage/right1.png"/></div>
-                <div class="centerbox" style="color: rgba(255, 182, 78, 1)">多层子项目</div>
+          <router-link
+            to="/sonproject"
+            class="taskbox"
+            style="
+              margin-right: 24px;
+              background: linear-gradient(180deg, #ddeaff 0%, #f0f8fe 100%);
+            "
+          >
+            <div class="leftt">
+              <img src="../../assets/images/taskpage/left2.png" />
             </div>
+            <div class="photo">
+              <img src="../../assets/images/taskpage/picture4.png" />
+            </div>
+            <div class="rightt">
+              <img src="../../assets/images/taskpage/right2.png" />
+            </div>
+            <div class="centerbox" style="color: rgba(78, 166, 255, 1)">
+              单层子项目
+            </div>
+          </router-link>
+          <div
+            class="taskbox"
+            @click="showModal3"
+            style="
+              background: linear-gradient(180deg, #fef3dd 0%, #fffaf0 100%);
+            "
+          >
+            <div class="leftt">
+              <img src="../../assets/images/taskpage/left1.png" />
+            </div>
+            <div class="photo">
+              <img src="../../assets/images/taskpage/picture5.png" />
+            </div>
+            <div class="rightt">
+              <img src="../../assets/images/taskpage/right1.png" />
+            </div>
+            <div class="centerbox" style="color: rgba(255, 182, 78, 1)">
+              多层子项目
+            </div>
+          </div>
         </div>
       </a-modal>
     </div>
@@ -153,22 +196,39 @@
     <div>
       <div>
         <a-modal
-        v-model:visible="estabish"
-        :title="null"
-        @ok="closeModal1"
-        :footer="null"
-        :closable="false"
-        wrapClassName="estabish"
-        width="638px"
-        height="468px"
+          v-model:visible="estabish"
+          :title="null"
+          @ok="closeModal1"
+          :footer="null"
+          :closable="false"
+          wrapClassName="estabish"
+          width="638px"
+          height="468px"
         >
-          <div class="modalHeader" 
-              style="width: 100%;height: 68px;display: flex;align-items: center;justify-content: space-between;background:linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2000) 100%)"
-            >
+          <div
+            class="modalHeader"
+            style="
+              width: 100%;
+              height: 68px;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              background: linear-gradient(
+                0deg,
+                rgba(78, 166, 255, 0) 0%,
+                rgba(78, 166, 255, 0.2) 100%
+              );
+            "
+          >
             <div class="headerLeft" style="margin-left: 32px">
-              <span class="headerLeftText" style="font-size: 16px">添加阶段</span>
+              <span class="headerLeftText" style="font-size: 16px"
+                >请选择项目类别</span
+              >
             </div>
-            <div style="cursor: pointer;margin-right:32px" @click="closeModal1">
+            <div
+              style="cursor: pointer; margin-right: 32px"
+              @click="closeModal1"
+            >
               <img
                 style="width: 22px; height: 22px"
                 src="../../assets/images/basicinfo/close22.png"
@@ -176,22 +236,54 @@
             </div>
           </div>
           <div class="modalMain">
-              <router-link to="/projectadd">
-                <div class="taskbox" style="background:linear-gradient(180deg,rgba(221, 234, 255, 1) 100%,rgba(240, 248, 254, 1) 100%);">
-                  <div class="leftt"><img src="../../assets/images/taskpage/left2.png"/></div>
-                  <div class="photo"><img src="../../assets/images/taskpage/picture6.png"/></div>
-                  <div class="rightt"><img src="../../assets/images/taskpage/right2.png"/></div>
-                  <div class="centerbox" style="color: rgba(78, 166, 255, 1)">单层项目</div>
-                  <div class="centermain">不包含子项目，直接填写项目基础信息后创建任务</div>
+            <router-link to="/projectadd">
+              <div
+                class="taskbox"
+                style="
+                  background: linear-gradient(180deg, #ddeaff 0%, #f0f8fe 100%);
+                "
+              >
+                <div class="leftt">
+                  <img src="../../assets/images/taskpage/left2.png" />
+                </div>
+                <div class="photo">
+                  <img src="../../assets/images/taskpage/picture6.png" />
+                </div>
+                <div class="rightt">
+                  <img src="../../assets/images/taskpage/right2.png" />
+                </div>
+                <div class="centerbox" style="color: rgba(78, 166, 255, 1)">
+                  单层项目
+                </div>
+                <div class="centermain">
+                  不包含子项目，直接填写项目基础信息后创建任务
                 </div>
-              </router-link>             
-              <div class="taskbox" @click="showModal2" style="margin-bottom: 40px;background:linear-gradient(180deg,rgba(229, 246, 236, 1) 100%,rgba(238, 249, 243, 1) 100%);"> 
-                  <div class="leftt"><img src="../../assets/images/taskpage/left3.png"/></div>
-                  <div class="photo"><img src="../../assets/images/taskpage/picture7.png"/></div>
-                  <div class="rightt"><img src="../../assets/images/taskpage/right3.png"/></div>
-                  <div class="centerbox1" style="color: rgba(93, 201, 136, 1)">多层项目</div>
-                  <div class="centermain1">包含子项目，分为多层子项目和单层子项目，多层子项目可创建班级，通过班级填写基础信息并创建任务</div>
               </div>
+            </router-link>
+            <div
+              class="taskbox"
+              @click="showModal2"
+              style="
+                margin-bottom: 40px;
+                background: linear-gradient(180deg, #e5f6ec 0%, #eef9f3 100%);
+              "
+            >
+              <div class="leftt">
+                <img src="../../assets/images/taskpage/left3.png" />
+              </div>
+              <div class="photo">
+                <img src="../../assets/images/taskpage/picture7.png" />
+              </div>
+              <div class="rightt">
+                <img src="../../assets/images/taskpage/right3.png" />
+              </div>
+              <div class="centerbox1" style="color: rgba(93, 201, 136, 1)">
+                多层项目
+              </div>
+              <div class="centermain1">
+                包含子项目，分为多层子项目和单层子项目，多层子项目可创建班级，通过班级填写基础信息并创建任务
+              </div>
+            </div>
           </div>
         </a-modal>
       </div>
@@ -208,19 +300,33 @@
         wrapClassName="doublepro"
         width="624px"
         height="476px"
+      >
+        <div
+          class="modalHeader"
+          style="
+            width: 100%;
+            height: 68px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: linear-gradient(
+              0deg,
+              rgba(78, 166, 255, 0) 0%,
+              rgba(78, 166, 255, 0.2) 100%
+            );
+          "
         >
-        <div class="modalHeader" 
-              style="width: 100%;height: 68px;display: flex;align-items: center;justify-content: space-between;background:linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2000) 100%)"
+          <div class="headerLeft" style="margin-left: 32px">
+            <span class="headerLeftText" style="font-size: 16px"
+              >创建多层项目</span
             >
-            <div class="headerLeft" style="margin-left: 32px">
-              <span class="headerLeftText" style="font-size: 16px">创建多层项目</span>
-            </div>
-            <div style="cursor: pointer;margin-right:32px" @click="closeModal2">
-              <img
-                style="width: 22px; height: 22px"
-                src="../../assets/images/basicinfo/close22.png"
-              />
-            </div>
+          </div>
+          <div style="cursor: pointer; margin-right: 32px" @click="closeModal2">
+            <img
+              style="width: 22px; height: 22px"
+              src="../../assets/images/basicinfo/close22.png"
+            />
+          </div>
         </div>
         <div class="modalMain">
           <div class="name">
@@ -234,7 +340,8 @@
             <div class="in">
               <a-input
                 v-model:value="value"
-                show-count :maxlength="30"
+                show-count
+                :maxlength="30"
                 placeholder="请输入项目名称"
                 style="border-radius: 8px"
               />
@@ -252,7 +359,7 @@
               <a-select
                 v-model:value="value"
                 placeholder="四个养成"
-                style="border-radius: 8px;height: 40px"
+                style="border-radius: 8px; height: 40px"
               />
             </div>
           </div>
@@ -268,7 +375,7 @@
               <a-input
                 v-model:value="value"
                 placeholder="请选择项目经理"
-                style="border-radius: 8px;height: 40px"
+                style="border-radius: 8px; height: 40px"
               />
             </div>
           </div>
@@ -283,13 +390,13 @@
             <div class="in">
               <a-input
                 v-model:value="value"
-                style="border-radius: 8px;height: 40px"
+                style="border-radius: 8px; height: 40px"
               />
             </div>
           </div>
           <div class="pubtn">
-                    <a-button class="pubtn1" @click="closeModal2">取消</a-button>
-                    <a-button class="pubtn2" @click="closeModal2">确定</a-button>
+            <a-button class="pubtn1" @click="closeModal2">取消</a-button>
+            <a-button class="pubtn2" @click="closeModal2">确定</a-button>
           </div>
         </div>
       </a-modal>
@@ -306,24 +413,40 @@
         wrapClassName="doublesonpro"
         width="624px"
         height="476px"
+      >
+        <div
+          class="modalHeader"
+          style="
+            width: 100%;
+            height: 68px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: linear-gradient(
+              0deg,
+              rgba(78, 166, 255, 0) 0%,
+              rgba(78, 166, 255, 0.2) 100%
+            );
+          "
         >
-        <div class="modalHeader" 
-              style="width: 100%;height: 68px;display: flex;align-items: center;justify-content: space-between;background:linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2000) 100%)"
+          <div class="headerLeft" style="margin-left: 32px">
+            <span class="headerLeftText" style="font-size: 16px"
+              >创建多层子项目</span
             >
-            <div class="headerLeft" style="margin-left: 32px">
-              <span class="headerLeftText" style="font-size: 16px">创建多层项目</span>
-            </div>
-            <div style="cursor: pointer;margin-right:32px" @click="closeModal3">
-              <img
-                style="width: 22px; height: 22px"
-                src="../../assets/images/basicinfo/close22.png"
-              />
-            </div>
+          </div>
+          <div style="cursor: pointer; margin-right: 32px" @click="closeModal3">
+            <img
+              style="width: 22px; height: 22px"
+              src="../../assets/images/basicinfo/close22.png"
+            />
+          </div>
         </div>
         <div class="modalMain">
-          <div style="margin-left: 40px;margin-top: 40px">
-            <span style="color: #000000;font-size: 14px">项目归属：</span>
-            <span style="color:#999999;font-size: 14px; margin-left: 10px">管理者进阶</span>
+          <div style="margin-left: 40px; margin-top: 40px">
+            <span style="color: #000000; font-size: 14px">项目归属：</span>
+            <span style="color: #999999; font-size: 14px; margin-left: 10px"
+              >管理者进阶</span
+            >
           </div>
           <div class="name">
             <div class="star" style="margin-top: -4px">
@@ -337,7 +460,7 @@
               <a-input
                 v-model:value="value"
                 placeholder="请输入项目名称"
-                style="border-radius: 8px;height: 40px"
+                style="border-radius: 8px; height: 40px"
               />
             </div>
           </div>
@@ -353,7 +476,7 @@
               <a-select
                 v-model:value="value"
                 placeholder="四个养成"
-                style="border-radius: 8px;height: 40px"
+                style="border-radius: 8px; height: 40px"
               />
             </div>
           </div>
@@ -369,7 +492,7 @@
               <a-input
                 v-model:value="value"
                 placeholder="自动带出 可编辑"
-                style="border-radius: 8px;height: 40px"
+                style="border-radius: 8px; height: 40px"
               />
             </div>
           </div>
@@ -384,13 +507,13 @@
             <div class="in">
               <a-input
                 v-model:value="value"
-                style="border-radius: 8px;height: 40px"
+                style="border-radius: 8px; height: 40px"
               />
             </div>
           </div>
           <div class="pubtn">
-                    <a-button class="pubtn1" @click="closeModal3">取消</a-button>
-                    <a-button class="pubtn2" @click="closeModal3">确定</a-button>
+            <a-button class="pubtn1" @click="closeModal3">取消</a-button>
+            <a-button class="pubtn2" @click="closeModal3">确定</a-button>
           </div>
         </div>
       </a-modal>
@@ -739,7 +862,6 @@ export default {
       doublesonpro: false,
     });
 
-
     onMounted(() => {
       // console.log("执行");
     });
@@ -788,10 +910,15 @@ export default {
                     </a-select-option>
                   </a-select>
                 </div>
-                <span class="operation3" style="cursor: pointer"
-                      onClick={() => {
-                          state.sonproject = true;
-                        }}>创建子项目</span>
+                <span
+                  class="operation3"
+                  style="cursor: pointer"
+                  onClick={() => {
+                    state.sonproject = true;
+                  }}
+                >
+                  创建子项目
+                </span>
                 <div class="tableSelect">
                   <a-select
                     style="width: 50px"
@@ -912,7 +1039,9 @@ export default {
                         </a-select-option>
                       </a-select>
                     </div>
-                    <router-link to="/classadd" class="operation3">创建班级</router-link>
+                    <router-link to="/classadd" class="operation3">
+                      创建班级
+                    </router-link>
                     <div class="tableSelect">
                       <a-select
                         style="width: 50px"
@@ -960,7 +1089,9 @@ export default {
                       </a-select>
                     </div>
 
-                    <router-link to="/classadd" class="operation3">创建班级</router-link>
+                    <router-link to="/classadd" class="operation3">
+                      创建班级
+                    </router-link>
                     <span class="more">复制</span>
                   </div>
                 ) : item.state === "已结束" ? (
@@ -1005,7 +1136,7 @@ export default {
                 a.operation =
                   a.state === "草稿" ? (
                     <div class="operation">
-                      <span class="operation1"></span>
+                      <span class="operation1">编辑</span>
                       <div class="tableSelect">
                         <a-select
                           style="width: 50px"
@@ -1222,7 +1353,7 @@ export default {
               item.operation =
                 item.state === "草稿" ? (
                   <div class="operation">
-                    <span class="operation1"></span>
+                    <span class="operation1">编辑</span>
                     <div class="tableSelect">
                       <a-select
                         style="width: 50px"
@@ -1441,7 +1572,11 @@ export default {
           //单层项目
           value.operation = (
             <div class="operation">
-              <span class="operation1"></span>
+              {value.state === "草稿" ? (
+                <span class="operation1">编辑</span>
+              ) : (
+                <span class="operation1"></span>
+              )}
               <div class="tableSelect">
                 <a-select
                   style="width: 50px"
@@ -1565,38 +1700,32 @@ export default {
 
     const showModal = () => {
       state.sonproject = true;
-     
     };
     const closeModal = () => {
       state.sonproject = false;
-      
     };
-    
+
     const showModal1 = () => {
-      
       state.estabish = true;
     };
     const closeModal1 = () => {
       state.estabish = false;
-      
     };
 
-    const showModal2 = () => {      
+    const showModal2 = () => {
       state.doublepro = true;
       state.estabish = false;
     };
     const closeModal2 = () => {
       state.doublepro = false;
-      
     };
 
-    const showModal3 = () => {      
+    const showModal3 = () => {
       state.doublesonpro = true;
       state.sonproject = false;
     };
     const closeModal3 = () => {
       state.doublesonpro = false;
-      
     };
     return {
       ...toRefs(state),
@@ -1818,45 +1947,44 @@ export default {
               width: 80%;
               height: 40px;
               .ant-select-selector {
-              border-radius: 8px;
-              // height: 120%;
-              width: 100%;
-              height: 40px;
-            }
+                border-radius: 8px;
+                // height: 120%;
+                width: 100%;
+                height: 40px;
+              }
             }
           }
-        
-      }
-      .pubtn {
-            display: flex;
-            justify-content: center;
-            margin-top: 25px;
-            //margin-bottom: 29px;
-            .pubtn1 {
-                width: 100px;
-                height: 40px;
-                margin-right: 16px;
-                margin-bottom: 29px;
-                border: 1px solid #409EFF;
-                border-radius: 4px;
-                color: rgba(78, 166, 255, 1);
-                font-size: 14px;
-                //line-height: 36px;
-                align-items: center;
-                background: rgba(255, 255, 255, 1)
-            }
-            .pubtn2 {
-                width: 100px;
-                height: 40px;
-                margin-bottom: 29px;
-                border: 1px solid #409EFF;
-                border-radius: 4px;
-                color: #FFFFFF;
-                font-size: 14px;
-                align-items: center;
-                //line-height: 36px;
-                background: #409EFF;
-            }
+        }
+        .pubtn {
+          display: flex;
+          justify-content: center;
+          margin-top: 25px;
+          //margin-bottom: 29px;
+          .pubtn1 {
+            width: 100px;
+            height: 40px;
+            margin-right: 16px;
+            margin-bottom: 29px;
+            border: 1px solid #409eff;
+            border-radius: 4px;
+            color: rgba(78, 166, 255, 1);
+            font-size: 14px;
+            //line-height: 36px;
+            align-items: center;
+            background: rgba(255, 255, 255, 1);
+          }
+          .pubtn2 {
+            width: 100px;
+            height: 40px;
+            margin-bottom: 29px;
+            border: 1px solid #409eff;
+            border-radius: 4px;
+            color: #ffffff;
+            font-size: 14px;
+            align-items: center;
+            //line-height: 36px;
+            background: #409eff;
+          }
         }
       }
     }
@@ -1900,45 +2028,44 @@ export default {
               width: 100%;
               height: 40px;
               .ant-select-selector {
-              border-radius: 8px;
-              // height: 120%;
-              width: 100%;
-              height: 40px;
-            }
+                border-radius: 8px;
+                // height: 120%;
+                width: 100%;
+                height: 40px;
+              }
             }
           }
-        
-      }
-      .pubtn {
-            display: flex;
-            justify-content: center;
-            margin-top: 25px;
-            //margin-bottom: 29px;
-            .pubtn1 {
-                width: 100px;
-                height: 40px;
-                margin-right: 16px;
-                margin-bottom: 29px;
-                border: 1px solid #409EFF;
-                border-radius: 4px;
-                color: rgba(78, 166, 255, 1);
-                font-size: 14px;
-                //line-height: 36px;
-                align-items: center;
-                background: rgba(255, 255, 255, 1)
-            }
-            .pubtn2 {
-                width: 100px;
-                height: 40px;
-                margin-bottom: 29px;
-                border: 1px solid #409EFF;
-                border-radius: 4px;
-                color: #FFFFFF;
-                font-size: 14px;
-                align-items: center;
-                //line-height: 36px;
-                background: #409EFF;
-            }
+        }
+        .pubtn {
+          display: flex;
+          justify-content: center;
+          margin-top: 25px;
+          //margin-bottom: 29px;
+          .pubtn1 {
+            width: 100px;
+            height: 40px;
+            margin-right: 16px;
+            margin-bottom: 29px;
+            border: 1px solid #409eff;
+            border-radius: 4px;
+            color: rgba(78, 166, 255, 1);
+            font-size: 14px;
+            //line-height: 36px;
+            align-items: center;
+            background: rgba(255, 255, 255, 1);
+          }
+          .pubtn2 {
+            width: 100px;
+            height: 40px;
+            margin-bottom: 29px;
+            border: 1px solid #409eff;
+            border-radius: 4px;
+            color: #ffffff;
+            font-size: 14px;
+            align-items: center;
+            //line-height: 36px;
+            background: #409eff;
+          }
         }
       }
     }
@@ -1947,49 +2074,49 @@ export default {
 .sonproject {
   .ant-modal {
     .ant-modal-body {
-      padding: 0 !important;  
+      padding: 0 !important;
       .modalMain {
         display: flex;
         justify-content: center;
         margin-top: 48px;
         //margin-bottom: 40px;
         .taskbox {
-                width: 310px;
-                height: 160px;
-                border-radius: 10px;
-                position: relative;
-                margin-bottom: 80px;
-                cursor: pointer;
-                .leftt {
-                    position: absolute;
-                    top: 18px;
-                    left: 0;
-                }
-                .photo {
-                    position: absolute;
-                    top: 44px;
-                    left: 40px;
-                }
-                .rightt {
-                    position: absolute;
-                    top: 69px;
-                    right: 26px;
-                }
-                .centerbox {
-                    position: absolute;
-                    top: 66px;
-                    left: 136px;
-                    font-size: 20px;
-                    font-weight: 700;
-                    //line-height: 36px;
-                }
-                .centermain {
-                    color: rgba(135, 139, 146, 1);
-                    font-size: 14px;
-                    position: absolute;
-                    left: 144px;
-                    bottom: 49px;
-                }
+          width: 310px;
+          height: 160px;
+          border-radius: 10px;
+          position: relative;
+          margin-bottom: 80px;
+          cursor: pointer;
+          .leftt {
+            position: absolute;
+            top: 18px;
+            left: 0;
+          }
+          .photo {
+            position: absolute;
+            top: 44px;
+            left: 40px;
+          }
+          .rightt {
+            position: absolute;
+            top: 69px;
+            right: 26px;
+          }
+          .centerbox {
+            position: absolute;
+            top: 66px;
+            left: 136px;
+            font-size: 20px;
+            font-weight: 700;
+            //line-height: 36px;
+          }
+          .centermain {
+            color: rgba(135, 139, 146, 1);
+            font-size: 14px;
+            position: absolute;
+            left: 144px;
+            bottom: 49px;
+          }
         }
       }
     }
@@ -1998,7 +2125,7 @@ export default {
 .estabish {
   .ant-modal {
     .ant-modal-body {
-      padding: 0 !important;  
+      padding: 0 !important;
       .modalMain {
         display: flex;
         flex-direction: column;
@@ -2006,61 +2133,61 @@ export default {
         margin-top: 48px;
         //margin-bottom: 40px;
         .taskbox {
-                width: 438px;
-                height: 160px;
-                border-radius: 10px;
-                position: relative;
-                margin-bottom: 24px;
-                cursor: pointer;
-                .leftt {
-                    position: absolute;
-                    top: 18px;
-                    left: 0;
-                }
-                .photo {
-                    position: absolute;
-                    top: 44px;
-                    left: 40px;
-                }
-                .rightt {
-                    position: absolute;
-                    top: 69px;
-                    right: 26px;
-                }
-                .centerbox {
-                    position: absolute;
-                    top: 42px;
-                    left: 120px;
-                    font-size: 20px;
-                    font-weight: 500;
-                    //line-height: 36px;
-                }
-                .centerbox1 {
-                    position: absolute;
-                    top: 32px;
-                    left: 120px;
-                    font-size: 20px;
-                    font-weight: 500;
-                    //line-height: 36px;
-                }
-                .centermain {
-                    color: rgba(135, 139, 146, 1);
-                    font-size: 14px;
-                    line-height: 20px;
-                    position: absolute;
-                    width: 252px;
-                    left: 120px;
-                    top: 78px;
-                }
-                .centermain1 {
-                  color: rgba(135, 139, 146, 1);
-                    font-size: 14px;
-                    line-height: 20px;
-                    position: absolute;
-                    width: 252px;
-                    left: 120px;
-                    top: 68px;
-                }
+          width: 438px;
+          height: 160px;
+          border-radius: 10px;
+          position: relative;
+          margin-bottom: 24px;
+          cursor: pointer;
+          .leftt {
+            position: absolute;
+            top: 18px;
+            left: 0;
+          }
+          .photo {
+            position: absolute;
+            top: 44px;
+            left: 40px;
+          }
+          .rightt {
+            position: absolute;
+            top: 69px;
+            right: 26px;
+          }
+          .centerbox {
+            position: absolute;
+            top: 42px;
+            left: 120px;
+            font-size: 20px;
+            font-weight: 500;
+            //line-height: 36px;
+          }
+          .centerbox1 {
+            position: absolute;
+            top: 32px;
+            left: 120px;
+            font-size: 20px;
+            font-weight: 500;
+            //line-height: 36px;
+          }
+          .centermain {
+            color: rgba(135, 139, 146, 1);
+            font-size: 14px;
+            line-height: 20px;
+            position: absolute;
+            width: 252px;
+            left: 120px;
+            top: 78px;
+          }
+          .centermain1 {
+            color: rgba(135, 139, 146, 1);
+            font-size: 14px;
+            line-height: 20px;
+            position: absolute;
+            width: 252px;
+            left: 120px;
+            top: 68px;
+          }
         }
       }
     }
diff --git a/src/views/projectcenter/TaskAdd.vue b/src/views/projectcenter/TaskAdd.vue
index 0bbd1138..90823948 100644
--- a/src/views/projectcenter/TaskAdd.vue
+++ b/src/views/projectcenter/TaskAdd.vue
@@ -2,7 +2,12 @@
   <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="tit">
+          阶段<img
+            src="../../assets/images/projectadd/right.png"
+            style="margin-left: 10px"
+          />
+        </div>
         <div class="btn btn3" @click="showModal" style="margin-left: 19px">
           <div class="search"></div>
           <div class="btnText">添加阶段</div>
@@ -29,7 +34,10 @@
         <div class="filt">
           <div class="le">
             <div class="leftimg">
-              <img class="img" src="../../assets/images/projectadd/picture.png" />
+              <img
+                class="img"
+                src="../../assets/images/projectadd/picture.png"
+              />
             </div>
             <div class="imgfor">
               <div class="forz" style="font-weight: 700">管理者进阶-腾飞班</div>
@@ -62,21 +70,31 @@
       </div>
       <div class="mid">
         <div class="item">
-          <div class="itcon">
+          <div class="itcon" @click="showDrawerOnline">
             <div class="img">
               <img src="../../assets/images/leveladd/zai.png" />
             </div>
             <div class="text">在线</div>
           </div>
+          <!-- 添加在线侧弹窗 -->
+          <div>
+            <add-online v-model:addonlineVisible="visible" />
+          </div>
+          <!-- 添加在线侧弹窗 -->
           <div class="lin"></div>
         </div>
         <div class="item">
-          <div class="itcon">
+          <div class="itcon" @click="showDrawerFaceteach">
             <div class="img">
               <img src="../../assets/images/leveladd/mian.png" />
             </div>
             <div class="text">面授</div>
           </div>
+          <!-- 添加面授侧弹窗 -->
+          <div>
+            <add-faceteach v-model:addfaceteachVisible="visible3" />
+          </div>
+          <!-- 添加面授侧弹窗 -->
           <div class="lin"></div>
         </div>
         <div class="item">
@@ -172,12 +190,15 @@
       <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 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" />
@@ -220,43 +241,12 @@
               />
             </div>
           </div>
-        </div>
-      </div>
-      <div class="draw" style="position: relative">
-        <a-drawer
-          v-model:visible="visible"
-          class="drawerStyle"
-          title="关联项目"
-          placement="right"
-          width="80%"
-          @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>
+            <edit-online v-model:editonlineVisible="visible2" />
           </div>
-        </a-drawer>
+          <!-- 编辑在线侧弹窗 -->
+        </div>
       </div>
     </div>
     <div>
@@ -270,45 +260,97 @@
         width="624px"
         height="388px"
       >
-        <div class="modalHeader" 
-             style="width: 100%;height: 68px;display: flex;align-items: center;justify-content: space-between;background:linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2000) 100%)"
-          >
+        <div
+          class="modalHeader"
+          style="
+            width: 100%;
+            height: 68px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: linear-gradient(
+              0deg,
+              rgba(78, 166, 255, 0) 0%,
+              rgba(78, 166, 255, 0.2) 100%
+            );
+          "
+        >
           <div class="headerLeft" style="margin-left: 32px">
             <span class="headerLeftText" style="font-size: 16px">添加阶段</span>
           </div>
-          <div style="cursor: pointer;margin-right:32px" @click="closeModal">
+          <div style="cursor: pointer; margin-right: 32px" @click="closeModal">
             <img
               style="width: 22px; height: 22px"
               src="../../assets/images/basicinfo/close22.png"
             />
           </div>
         </div>
-        <div class="modalMain"
-          style="width: 100%;"
-          >
+        <div class="modalMain" style="width: 100%">
           <div class="name">
-              <div class="namebox">
-                <div class="inname">阶段名称：</div>
-              </div>
-              <div class="in">
-                <a-input  v-model:value="valueE" show-count :maxlength="20" placeholder="请输入阶段名称" />
-              </div>
+            <div class="namebox">
+              <div class="inname">阶段名称：</div>
+            </div>
+            <div class="in">
+              <a-input
+                v-model:value="valueE"
+                show-count
+                :maxlength="20"
+                placeholder="请输入阶段名称"
+              />
+            </div>
           </div>
           <div class="name" style="display: flex; align-items: flex-start">
-              <div class="namebox">
-                <div class="inname">阶段说明：</div>
-              </div>
-              <div class="intext" style="margin-left: 14px">
-                <a-textarea  v-model:value="value" style="height: 88px" show-count :maxlength="100"  placeholder="请输入阶段说明" />
-              </div>
+            <div class="namebox">
+              <div class="inname">阶段说明：</div>
+            </div>
+            <div class="intext" style="margin-left: 14px">
+              <a-textarea
+                v-model:value="value"
+                style="height: 88px"
+                show-count
+                :maxlength="100"
+                placeholder="请输入阶段说明"
+              />
+            </div>
           </div>
-          <div style="display: flex;width: 100%;justify-content: center;margin-top: 40px">
-            <button @click="closeModal"
-              style=" cursor: pointer;height: 40px;width: 100px;border: 1px solid #409EFF;border-radius: 4px;color: #409EFF;background-color: #FFFFFF"
-            >取消</button>
-            <button @click="closeModal"
-              style=" cursor: pointer;margin-left: 16px;margin-bottom: 40px;height: 40px;width: 100px;border: 1px solid #409EFF;border-radius: 4px;color: #FFFFFF;background-color: #409EFF"
-            >确定</button>
+          <div
+            style="
+              display: flex;
+              width: 100%;
+              justify-content: center;
+              margin-top: 40px;
+            "
+          >
+            <button
+              @click="closeModal"
+              style="
+                cursor: pointer;
+                height: 40px;
+                width: 100px;
+                border: 1px solid #409eff;
+                border-radius: 4px;
+                color: #409eff;
+                background-color: #ffffff;
+              "
+            >
+              取消
+            </button>
+            <button
+              @click="closeModal"
+              style="
+                cursor: pointer;
+                margin-left: 16px;
+                margin-bottom: 40px;
+                height: 40px;
+                width: 100px;
+                border: 1px solid #409eff;
+                border-radius: 4px;
+                color: #ffffff;
+                background-color: #409eff;
+              "
+            >
+              确定
+            </button>
           </div>
         </div>
       </a-modal>
@@ -318,6 +360,9 @@
 
 <script>
 import { reactive, toRefs, onMounted, onUnmounted } from "vue";
+import AddOnline from "../../components/drawers/AddOnline.vue";
+import EditOnline from "../../components/drawers/EditOnline.vue";
+import AddFaceteach from "../../components/drawers/AddFaceteach.vue";
 const drawercolumns = [
   {
     title: "项目名称",
@@ -358,6 +403,11 @@ const drawercolumns = [
 ];
 export default {
   name: "LevelAddDetail",
+  components: {
+    AddOnline,
+    EditOnline,
+    AddFaceteach,
+  },
   setup() {
     const state = reactive({
       projectNameList: [
@@ -523,7 +573,6 @@ export default {
               key: "1-1",
               projectName: "管理者进阶-腾飞班",
               manager: "黄华  刘俊",
-
               creater: "毛继禹",
               time: "2022-07-20 14:00:03",
               children: [
@@ -549,7 +598,6 @@ export default {
               key: "2-1",
               projectName: "管理者进阶-腾飞班",
               manager: "黄华  刘俊",
-
               creater: "毛继禹",
               time: "2022-07-20 14:00:03",
               children: [
@@ -564,12 +612,10 @@ export default {
             },
           ],
         },
-
         {
           key: 3,
           projectName: "管理者进阶-腾飞班K1",
           manager: "黄华  刘俊",
-
           creater: "毛继禹",
           time: "2022-07-20 14:00:03",
         },
@@ -577,7 +623,6 @@ export default {
           key: 4,
           projectName: "管理者进阶-腾飞班K1",
           manager: "黄华  刘俊",
-
           creater: "毛继禹",
           time: "2022-07-20 14:00:03",
         },
@@ -585,23 +630,13 @@ export default {
           key: 5,
           projectName: "管理者进阶-腾飞班K1",
           manager: "黄华  刘俊",
-
           creater: "毛继禹",
           time: "2022-07-20 14:00:03",
         },
         {
-          key: 6,
+          key: "1-1-1",
           projectName: "管理者进阶-腾飞班K1",
           manager: "黄华  刘俊",
-
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 7,
-          projectName: "管理者进阶-腾飞班K1",
-          manager: "黄华  刘俊",
-
           creater: "毛继禹",
           time: "2022-07-20 14:00:03",
         },
@@ -610,6 +645,8 @@ export default {
       tableDataTotal: 100,
       pageSize: 10,
       visible: false,
+      visible2: false,
+      visible3: false,
       stage: false,
       selectedRowKeys: [],
     });
@@ -619,9 +656,6 @@ export default {
     const selectProjectName2 = (value, index) => {
       console.log("value", value, index);
     };
-    const showDrawer = () => {
-      state.visible = !state.visible;
-    };
     const afterVisibleChange = (bool) => {
       console.log("visible", bool);
     };
@@ -635,7 +669,7 @@ export default {
           width: 60,
           align: "left",
           className: "classify",
-          scopedSlots: { customRender: "action" }, //引入的插槽
+          scopedSlots: { customRender: "action" },
           customRender: (text) => {
             // console.log(text.record.checked1);
             return (
@@ -650,11 +684,11 @@ export default {
                 <span> {text.record.lei}</span>
 
                 {/**
-								<div class="img"></div>
-                <a-checkbox class="ch" checked={text.record.checkedd}>
-                  {text.record.lei}
-                </a-checkbox>
-*/}
+                                            <div class="img"></div>
+                            <a-checkbox class="ch" checked={text.record.checkedd}>
+                              {text.record.lei}
+                            </a-checkbox>
+            */}
               </div>
             );
           },
@@ -675,7 +709,7 @@ export default {
           // width: 100,
           align: "center",
           className: "h",
-          scopedSlots: { customRender: "action" }, //引入的插槽
+          scopedSlots: { customRender: "action" },
           customRender: (text) => {
             // console.log(text.record.checked1);
             return (
@@ -722,12 +756,17 @@ export default {
           key: "opacation",
           // width: 100,
           align: "center",
-          scopedSlots: { customRender: "action" }, //引入的插槽
+          scopedSlots: { customRender: "action" },
           customRender: () => {
             return (
               <div class="opa">
                 <div class="opacation">
-                  <span style="color:#4EA6FF;margin-right:25px;cursor:pointer">
+                  <span
+                    onClick={() => {
+                      state.visible2 = true;
+                    }}
+                    style="color:#4EA6FF;margin-right:25px;cursor:pointer"
+                  >
                     编辑
                   </span>
                   <span style="color:#4EA6FF;cursor:pointer">删除</span>
@@ -739,12 +778,10 @@ export default {
       ];
       return columns;
     };
-
     const onSelectChange = (selectedRowKeys) => {
       console.log("selectedRowKeys changed: ", selectedRowKeys);
       state.selectedRowKeys = selectedRowKeys;
     };
-
     // const getClientHeight = () => {
     //   state.rightheight =
     //     document.getElementsByClassName("addhead")[0].offsetHeight +
@@ -769,6 +806,13 @@ export default {
       document.getElementsByTagName("main")[0].style.boxShadow =
         "0px 1px 35px 0px rgba(118, 136, 166, 0.07)";
     });
+    const showDrawerOnline = () => {
+      state.visible = true;
+    };
+    const showDrawerFaceteach = () => {
+      state.visible3 = true;
+      console.log(state.visible3);
+    };
     return {
       ...toRefs(state),
       selectProjectName,
@@ -776,138 +820,138 @@ export default {
       tableDataFunc,
       showModal,
       closeModal,
-      showDrawer,
+      // showDrawer,
       afterVisibleChange,
       drawercolumns,
       onSelectChange,
+      showDrawerOnline,
+      showDrawerFaceteach,
     };
   },
 };
 </script>
 
 <style lang="scss">
-
 .ant-input {
-            border-radius: 8px;
-            // height: 120%;
-            width: 384px;
-            height: 88px;
+  border-radius: 8px;
+  // height: 120%;
+  width: 384px;
+  height: 88px;
 }
 .addstage {
   .ant-modal {
     .ant-modal-body {
-      padding: 0 !important;  
+      padding: 0 !important;
       .modalMain {
-        
-            .ant-input-textarea-show-count {
-              position: relative;
-              height: 88px;
-            }
-            .ant-input-textarea-show-count::after {
-              position: absolute;
-              right: 10px;
-              bottom: 5px;
-            }        
-       }
-      }
-  }
-}
-.info {
-      width: 78%;
-      // background-color: lightcoral;
-      display: flex;
-      margin-top: 30px;
-      // align-items: center;
-      // height: 40px;
-      // border: 1px solid black;
-
-      .inname {
-        color: #6f6f6f;
-        font-size: 14px;
-        margin-left: 26px;
-        margin-top: 15px;
-      }
-      .in {
-        margin-left: 14px;
-        width: 81%;
-        position: relative;
-        .ant-input {
-          border-radius: 5px;
-          // height: 120%;
-          width: 100%;
-          height: 130px;
-          resize: none;
+        .ant-input-textarea-show-count {
+          position: relative;
+          height: 88px;
+        }
+        .ant-input-textarea-show-count::after {
+          position: absolute;
+          right: 10px;
+          bottom: 5px;
         }
       }
     }
+  }
+}
+.info {
+  width: 78%;
+  // background-color: lightcoral;
+  display: flex;
+  margin-top: 30px;
+  // align-items: center;
+  // height: 40px;
+  // border: 1px solid black;
+
+  .inname {
+    color: #6f6f6f;
+    font-size: 14px;
+    margin-left: 26px;
+    margin-top: 15px;
+  }
+  .in {
+    margin-left: 14px;
+    width: 81%;
+    position: relative;
+    .ant-input {
+      border-radius: 5px;
+      // height: 120%;
+      width: 100%;
+      height: 130px;
+      resize: none;
+    }
+  }
+}
 .name {
-        width: 78%;
-        // background-color: lightcoral;
-        display: flex;
-        margin-top: 20px;
-        align-items: center;
-        //height: 40px;
-        // border: 1px solid black;
-        .namebox {
-          width: 120px;
-          display: flex;
-          align-items: center;
-          justify-content: flex-end;
-          flex-shrink: 0;
-          .nameimg {
-            width: 10px;
-            height: 10px;
-          }
-        }
-        .d {
-          margin-top: 8px;
-          font-size: 25px;
-          color: #ff4e4e;
-        }
-        .box {
-          position: relative;
-          margin-left: 14px;
-          .box1 {
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            width: 50px;
-            margin-left: -25px;
-            margin-top: -5px;
-            border-top: 2px solid rgba(78, 166, 255, 1);
-          }
-          .box2 {
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            height: 50px;
-            //margin-left: -5px;
-            margin-top: -25px;
-            border-left: 2px solid rgba(78, 166, 255, 1);
-          }
-        }
-        .inname {
-          color: #000000;
-          font-size: 14px;
-          margin-left: 7px;
-        }
-        .in {
-          margin-left: 14px;
-          flex: 1;
-          .ant-radio-wrapper {
-          }
-          .ant-input-affix-wrapper {
-            width: 384px;
-            border-radius: 8px;
-          }
-          .ant-input {
-            border-radius: 8px;
-            // height: 120%;
-            //width: 384px;
-            height: 30px;
-          }
-        }
-      }
+  width: 78%;
+  // background-color: lightcoral;
+  display: flex;
+  margin-top: 20px;
+  align-items: center;
+  //height: 40px;
+  // border: 1px solid black;
+  .namebox {
+    width: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-shrink: 0;
+    .nameimg {
+      width: 10px;
+      height: 10px;
+    }
+  }
+  .d {
+    margin-top: 8px;
+    font-size: 25px;
+    color: #ff4e4e;
+  }
+  .box {
+    position: relative;
+    margin-left: 14px;
+    .box1 {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      width: 50px;
+      margin-left: -25px;
+      margin-top: -5px;
+      border-top: 2px solid rgba(78, 166, 255, 1);
+    }
+    .box2 {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      height: 50px;
+      //margin-left: -5px;
+      margin-top: -25px;
+      border-left: 2px solid rgba(78, 166, 255, 1);
+    }
+  }
+  .inname {
+    color: #000000;
+    font-size: 14px;
+    margin-left: 7px;
+  }
+  .in {
+    margin-left: 14px;
+    flex: 1;
+    .ant-radio-wrapper {
+    }
+    .ant-input-affix-wrapper {
+      width: 384px;
+      border-radius: 8px;
+    }
+    .ant-input {
+      border-radius: 8px;
+      // height: 120%;
+      //width: 384px;
+      height: 30px;
+    }
+  }
+}
 .drawerStyle {
   .ant-drawer-content-wrapper {
     // max-width: 1000px;
@@ -1172,7 +1216,7 @@ export default {
             margin-right: 18px;
           }
           .pub {
-            color: #57C887;
+            color: #57c887;
             font-size: 14px;
             margin-top: 5px;
             margin-right: 30px;
@@ -1302,56 +1346,56 @@ export default {
         // height: 100%;
         // background-color: #bfa;
         .onerow {
-            width: 100%;
-            display: flex;
+          width: 100%;
+          display: flex;
+          height: 40px;
+          position: relative;
+          margin-top: 20px;
+          .taskmain {
+            font-size: 18px;
+            color: #000000;
+            margin-top: 10px;
+          }
+          .btn {
+            position: absolute;
+            top: 0;
+            right: 130px;
+            background-color: #409eff;
+            width: 130px;
             height: 40px;
-            position: relative;
-            margin-top: 20px;
-            .taskmain {
-                font-size: 18px;
-                color: #000000;
-                margin-top: 10px;
+            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;
             }
-            .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;
+            .editext {
+              line-height: 40px;
             }
-            .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");
-                }
+          }
+          .edit:hover {
+            color: #ffffff;
+            background-color: #409eff;
+            cursor: pointer;
+            .editimg {
+              background-image: url("../../assets/images/projectadd/delete1.png");
             }
+          }
         }
         .talk {
           margin-top: 24px;
@@ -1497,4 +1541,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/projectcenter/TaskPage.vue b/src/views/projectcenter/TaskPage.vue
index c439ef64..c8bce21e 100644
--- a/src/views/projectcenter/TaskPage.vue
+++ b/src/views/projectcenter/TaskPage.vue
@@ -56,13 +56,7 @@
             <div class="second">
               <div
                 class="taskbox"
-                style="
-                  background: linear-gradient(
-                    180deg,
-                    rgba(254, 243, 221, 1) 100%,
-                    rgba(255, 250, 240, 1) 100%
-                  );
-                "
+                style="background: linear-gradient(180deg, #fef3dd, #fffaf0)"
               >
                 <div class="leftt">
                   <img src="../../assets/images/taskpage/left1.png" />
@@ -83,8 +77,8 @@
                 style="
                   background: linear-gradient(
                     180deg,
-                    rgba(221, 234, 255, 1) 100%,
-                    rgba(240, 248, 254, 1) 100%
+                    rgba(221, 234, 255, 1),
+                    rgba(240, 248, 254, 1)
                   );
                 "
               >
@@ -108,8 +102,8 @@
                 style="
                   background: linear-gradient(
                     180deg,
-                    rgba(229, 246, 236, 1) 100%,
-                    rgba(238, 249, 243, 1) 100%
+                    rgba(229, 246, 236, 1),
+                    rgba(238, 249, 243, 1)
                   );
                 "
               >
@@ -471,7 +465,131 @@
           <div class="split"></div>
           <div class="content3">
             <a-tabs v-model:activeKey="activeKey1">
-              <a-tab-pane key="8" tab="学员管理">学员管理</a-tab-pane>
+              <a-tab-pane key="8" tab="学员管理">
+                <div class="group">
+                  <div class="groupleft">
+                    <div
+                      style="
+                        display: flex;
+                        align-items: center;
+                        margin-right: 10px;
+                        margin-bottom: 10px;
+                      "
+                    >
+                      <div class="groupname" style="width: 42px">姓名：</div>
+                      <a-input v-model:value="value" placeholder="请输入姓名" />
+                    </div>
+                    <div
+                      style="
+                        display: flex;
+                        align-items: center;
+                        margin-right: 10px;
+                        margin-bottom: 10px;
+                      "
+                    >
+                      <div class="groupname">小组名称：</div>
+                      <a-input
+                        v-model:value="value"
+                        placeholder="请输入小组名称"
+                      />
+                    </div>
+                    <div
+                      style="
+                        display: flex;
+                        align-items: center;
+                        margin-right: 10px;
+                        margin-bottom: 10px;
+                      "
+                    >
+                      <div class="groupname" style="width: 42px">部门：</div>
+                      <a-select
+                        v-model:value="value"
+                        placeholder="请选择部门"
+                      />
+                    </div>
+                    <div
+                      style="
+                        display: flex;
+                        align-items: center;
+                        margin-bottom: 10px;
+                      "
+                    >
+                      <div class="groupname" style="width: 42px">学员：</div>
+                      <a-select
+                        v-model:value="value"
+                        placeholder="是否为优秀学员"
+                        :options="goodstuList"
+                      />
+                    </div>
+                  </div>
+                  <div class="groupright">
+                    <div class="btn1">
+                      <img src="../../assets/images/courseManage/search0.png" />
+                      <span class="btn1text">搜索</span>
+                    </div>
+                    <div class="btn2">
+                      <img src="../../assets/images/courseManage/reset1.png" />
+                      <span class="btn2text">重置</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="second2" style="margin-top: 20px">
+                  <div class="btn1" @click="showModal2">
+                    <img src="../../assets/images/courseManage/add0.png" />
+                    <span class="btn1text">添加学员</span>
+                  </div>
+                  <div class="btn2">
+                    <img src="../../assets/images/courseManage/reset2.png" />
+                    <span class="btn2text">导入学员</span>
+                  </div>
+                  <div class="btn2">
+                    <img src="../../assets/images/projectadd/delete.png" />
+                    <span class="btn2text">批量删除</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">2</span>
+                    <div style="width: 5px; display: inline-block"></div>
+                    <span class="yi">项</span>
+                    <span class="zon">列表选项总计：</span>
+                    <span class="yi">4</span>
+                    <span class="yi">条</span>
+                  </div>
+                  <div class="clear">清空</div>
+                </div>
+                <div class="tab" style="margin: 20px 32px 0 32px">
+                  <a-table
+                    style="border: 1px solid #f2f6fe"
+                    :columns="tablecolumns"
+                    :data-source="tabledata"
+                    :loading="tableDataTotal === -1 ? true : false"
+                    expandRowByClick="true"
+                    :scroll="{ x: 1400, y: 350 }"
+                    @expand="expandTable"
+                    :pagination="false"
+                    :row-selection="{
+                      columnWidth: 30,
+                      selectedRowKeys: selectedRowKeys,
+                      onChange: onSelectChange,
+                    }"
+                  />
+                  <div class="pa">
+                    <a-pagination
+                      showSizeChanger="true"
+                      showQuickJumper="true"
+                      hideOnSinglePage="true"
+                      :pageSize="pageSize"
+                      :current="currentPage"
+                      :total="tableDataTotal"
+                      class="pagination"
+                    />
+                  </div>
+                </div>
+              </a-tab-pane>
               <a-tab-pane key="9" tab="小组管理" force-render>
                 <div class="group">
                   <div class="groupleft">
@@ -483,7 +601,7 @@
                   </div>
                   <div class="groupright">
                     <div class="btn1">
-                      <img src="../../assets/images/courseManage/add0.png" />
+                      <img src="../../assets/images/courseManage/search0.png" />
                       <span class="btn1text">搜索</span>
                     </div>
                     <div class="btn2">
@@ -493,12 +611,12 @@
                   </div>
                 </div>
                 <div class="second2">
-                  <div class="btn1">
-                    <img src="../../assets/images/courseManage/search0.png" />
+                  <div class="btn1" @click="showModal2">
+                    <img src="../../assets/images/courseManage/add0.png" />
                     <span class="btn1text">创建小组</span>
                   </div>
                   <div class="btn2">
-                    <img src="../../assets/images/courseManage/reset1.png" />
+                    <img src="../../assets/images/courseManage/reset2.png" />
                     <span class="btn2text">随机分组</span>
                   </div>
                 </div>
@@ -507,11 +625,190 @@
                     <div style="width: 90%">
                       <div class="grouptitle">
                         <div class="goodgruop">好好学习小组</div>
-                        <div>...</div>
+                        <div class="more">
+                          <span
+                            style="color: rgba(0, 0, 0, 0.45); cursor: pointer"
+                            >. . .</span
+                          >
+                          <div class="moreItems">
+                            <div class="sammo">编辑</div>
+                            <div class="sammo">删除</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="leader">组长：小李</div>
+                      <div class="grocenter">
+                        <div class="leader1">进度</div>
+                        <a-progress :percent="55" />
+                      </div>
+                      <div class="grofooter">
+                        <div class="ftext">组员名单 ></div>
+                        <div class="peoples">
+                          <div class="people1">
+                            <img
+                              src="../../assets/images/taskpage/people1.png"
+                            />
+                          </div>
+                          <div class="people2">
+                            <img
+                              src="../../assets/images/taskpage/people2.png"
+                            />
+                          </div>
+                          <div class="people3">
+                            <img
+                              src="../../assets/images/taskpage/people3.png"
+                            />
+                          </div>
+                          <div class="people4">
+                            <img
+                              src="../../assets/images/taskpage/people4.png"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="groupbox">
+                    <div style="width: 90%">
+                      <div class="grouptitle">
+                        <div class="goodgruop">全能小组</div>
+                        <div class="more">
+                          <span
+                            style="color: rgba(0, 0, 0, 0.45); cursor: pointer"
+                            >. . .</span
+                          >
+                          <div class="moreItems">
+                            <div class="sammo">编辑</div>
+                            <div class="sammo">删除</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="leader">组长：小李</div>
+                      <div class="grocenter">
+                        <div class="leader1">进度</div>
+                        <a-progress :percent="55" />
+                      </div>
+                      <div class="grofooter">
+                        <div class="ftext">组员名单 ></div>
+                        <div class="peoples">
+                          <div class="people1">
+                            <img
+                              src="../../assets/images/taskpage/people1.png"
+                            />
+                          </div>
+                          <div class="people2">
+                            <img
+                              src="../../assets/images/taskpage/people2.png"
+                            />
+                          </div>
+                          <div class="people3">
+                            <img
+                              src="../../assets/images/taskpage/people3.png"
+                            />
+                          </div>
+                          <div class="people4">
+                            <img
+                              src="../../assets/images/taskpage/people4.png"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="groupbox">
+                    <div style="width: 90%">
+                      <div class="grouptitle">
+                        <div class="goodgruop">宇宙第一最强小组</div>
+                        <div class="more">
+                          <span
+                            style="color: rgba(0, 0, 0, 0.45); cursor: pointer"
+                            >. . .</span
+                          >
+                          <div class="moreItems">
+                            <div class="sammo">编辑</div>
+                            <div class="sammo">删除</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="leader">组长：小李</div>
+                      <div class="grocenter">
+                        <div class="leader1">进度</div>
+                        <a-progress :percent="55" />
+                      </div>
+                      <div class="grofooter">
+                        <div class="ftext">组员名单 ></div>
+                        <div class="peoples">
+                          <div class="people1">
+                            <img
+                              src="../../assets/images/taskpage/people1.png"
+                            />
+                          </div>
+                          <div class="people2">
+                            <img
+                              src="../../assets/images/taskpage/people2.png"
+                            />
+                          </div>
+                          <div class="people3">
+                            <img
+                              src="../../assets/images/taskpage/people3.png"
+                            />
+                          </div>
+                          <div class="people4">
+                            <img
+                              src="../../assets/images/taskpage/people4.png"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="groupbox">
+                    <div style="width: 90%">
+                      <div class="grouptitle">
+                        <div class="goodgruop">天天向上小组</div>
+                        <div class="more">
+                          <span
+                            style="color: rgba(0, 0, 0, 0.45); cursor: pointer"
+                            >. . .</span
+                          >
+                          <div class="moreItems">
+                            <div class="sammo">编辑</div>
+                            <div class="sammo">删除</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="leader">组长：小李</div>
+                      <div class="grocenter">
+                        <div class="leader1">进度</div>
+                        <a-progress :percent="55" />
+                      </div>
+                      <div class="grofooter">
+                        <div class="ftext">组员名单 ></div>
+                        <div class="peoples">
+                          <div class="people1">
+                            <img
+                              src="../../assets/images/taskpage/people1.png"
+                            />
+                          </div>
+                          <div class="people2">
+                            <img
+                              src="../../assets/images/taskpage/people2.png"
+                            />
+                          </div>
+                          <div class="people3">
+                            <img
+                              src="../../assets/images/taskpage/people3.png"
+                            />
+                          </div>
+                          <div class="people4">
+                            <img
+                              src="../../assets/images/taskpage/people4.png"
+                            />
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
-                  <div class="groupbox"></div>
                 </div>
               </a-tab-pane>
             </a-tabs>
@@ -612,7 +909,85 @@
         </div>
       </a-modal>
     </div>
-    <!-- 项目发布弹窗 -->
+    <!-- 概览（无数据）-项目发布弹窗 -->
+    <!-- 学员-创建小组弹窗 -->
+    <div>
+      <a-modal
+        v-model:visible="stugroup"
+        :title="null"
+        @ok="closeModal2"
+        :footer="null"
+        :closable="false"
+        wrapClassName="doublepro"
+        width="624px"
+        height="332px"
+      >
+        <div
+          class="modalHeader"
+          style="
+            width: 100%;
+            height: 68px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: linear-gradient(
+              0deg,
+              rgba(78, 166, 255, 0) 0%,
+              rgba(78, 166, 255, 0.2) 100%
+            );
+          "
+        >
+          <div class="headerLeft" style="margin-left: 32px">
+            <span class="headerLeftText" style="font-size: 16px">创建小组</span>
+          </div>
+          <div style="cursor: pointer; margin-right: 32px" @click="closeModal2">
+            <img
+              style="width: 22px; height: 22px"
+              src="../../assets/images/basicinfo/close22.png"
+            />
+          </div>
+        </div>
+        <div class="modalMain">
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">小组名称:</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                placeholder="请输入小组名称"
+                style="border-radius: 8px; height: 40px"
+              />
+            </div>
+          </div>
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">小组长:</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                placeholder="请输入小组长"
+                style="border-radius: 8px; height: 40px"
+              />
+            </div>
+          </div>
+          <div class="pubtn">
+            <a-button class="pubtn1" @click="closeModal2">取消</a-button>
+            <a-button class="pubtn2" @click="closeModal2">确定</a-button>
+          </div>
+        </div>
+      </a-modal>
+    </div>
+    <!-- 学员-创建小组弹窗 -->
   </div>
 </template>
   <script>
@@ -627,17 +1002,155 @@ export default {
   components: { TimeManage, FaceManage, FaceStu, ActiveAttendance, WorkManage },
   setup() {
     const state = reactive({
+      goodstuList: [
+        {
+          id: 1,
+          value: "全部",
+          label: "全部",
+        },
+        {
+          id: 2,
+          value: "普通学员",
+          label: "普通学员",
+        },
+        {
+          id: 3,
+          value: "优秀学员",
+          label: "优秀学员",
+        },
+      ],
+      tabledata: [
+        {
+          key: 1,
+          name: "小李",
+          bum: "产研部",
+          gangw: "产品经理",
+          group: "好好学习",
+          progress: "5/20",
+          diploma: "0",
+          stutime: "2022-10-31 23:12:00",
+          putin: "手动加入",
+        },
+        {
+          key: 2,
+          name: "小刘",
+          bum: "产研部",
+          gangw: "产品经理",
+          group: "天天向上",
+          progress: "5/20",
+          diploma: "0",
+          stutime: "2022-10-31 23:12:00",
+          putin: "手动加入",
+        },
+        {
+          key: 3,
+          name: "小王",
+          bum: "产研部",
+          gangw: "后端",
+          group: "好好学习",
+          progress: "5/20",
+          diploma: "0",
+          stutime: "2022-10-31 23:12:00",
+          putin: "手动加入",
+        },
+        {
+          key: 4,
+          name: "小赵",
+          bum: "产研部",
+          gangw: "前端",
+          group: "天天向上",
+          progress: "5/20",
+          diploma: "0",
+          stutime: "2022-10-31 23:12:00",
+          putin: "手动加入",
+        },
+      ],
+      tablecolumns: [
+        {
+          title: "姓名",
+          dataIndex: "name",
+          key: "name",
+          width: 30,
+          align: "left",
+          className: "h",
+        },
+        {
+          title: "部门",
+          dataIndex: "bum",
+          key: "bum",
+          width: 40,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "岗位",
+          dataIndex: "gangw",
+          key: "gangw",
+          width: 40,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "所属小组",
+          dataIndex: "group",
+          key: "group",
+          width: 40,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "进度",
+          dataIndex: "progress",
+          key: "progress",
+          width: 40,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "证书",
+          dataIndex: "diploma",
+          key: "diploma",
+          width: 40,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "最近学习时间",
+          dataIndex: "stutime",
+          key: "stutime",
+          width: 50,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "加入方式",
+          dataIndex: "putin",
+          key: "putin",
+          width: 40,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "操作",
+          dataIndex: "operations",
+          key: "operations",
+          width: 60,
+          align: "center",
+          className: "h",
+        },
+      ],
       visible: false, //时间管理
       FaceVisivle: false, //面授管理
       FSvisible: false, //面授学员
       AAvisible: false, //活动考勤
       Wvisible: false, //作业管理
       pubproject: false,
+      stugroup: false,
       checked: false,
       checked1: true,
       checked2: false,
       activeKey: "3",
-      activeKey1: "9",
+      activeKey1: "8",
     });
     const showModal = () => {
       state.pubproject = true;
@@ -645,6 +1158,12 @@ export default {
     const closeModal = () => {
       state.pubproject = false;
     };
+    const showModal2 = () => {
+      state.stugroup = true;
+    };
+    const closeModal2 = () => {
+      state.stugroup = false;
+    };
     //新增
     const showTime = () => {
       console.log("点击管理");
@@ -672,6 +1191,8 @@ export default {
       ...toRefs(state),
       showModal,
       closeModal,
+      showModal2,
+      closeModal2,
       showTime,
       showFace,
       showFS,
@@ -812,6 +1333,87 @@ export default {
     }
   }
 }
+.doublepro {
+  .ant-modal {
+    .ant-modal-body {
+      padding: 0;
+      .modalMain {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .name {
+          width: 78%;
+          // background-color: lightcoral;
+          display: flex;
+          justify-content: right;
+          margin-top: 32px;
+          align-items: center;
+          height: 40px;
+          // border: 1px solid black;
+
+          .inname {
+            color: #000000;
+            font-size: 14px;
+            margin-left: 7px;
+          }
+          .in {
+            margin-left: 14px;
+            width: 81%;
+            .ant-input {
+              border-radius: 5px;
+              // height: 120%;
+              width: 100%;
+              height: 30px;
+            }
+            .ant-select {
+              border-radius: 5px;
+              // height: 120%;
+              width: 100%;
+              height: 40px;
+              .ant-select-selector {
+                border-radius: 8px;
+                // height: 120%;
+                width: 100%;
+                height: 40px;
+              }
+            }
+          }
+        }
+        .pubtn {
+          display: flex;
+          justify-content: center;
+          margin-top: 25px;
+          //margin-bottom: 29px;
+          .pubtn1 {
+            width: 100px;
+            height: 40px;
+            margin-right: 16px;
+            margin-bottom: 29px;
+            border: 1px solid #409eff;
+            border-radius: 4px;
+            color: rgba(78, 166, 255, 1);
+            font-size: 14px;
+            //line-height: 36px;
+            align-items: center;
+            background: rgba(255, 255, 255, 1);
+          }
+          .pubtn2 {
+            width: 100px;
+            height: 40px;
+            margin-bottom: 29px;
+            border: 1px solid #409eff;
+            border-radius: 4px;
+            color: #ffffff;
+            font-size: 14px;
+            align-items: center;
+            //line-height: 36px;
+            background: #409eff;
+          }
+        }
+      }
+    }
+  }
+}
 .taskpage {
   width: 100%;
   display: flex;
@@ -1244,9 +1846,9 @@ export default {
         //height: 71px;
         margin-left: 12px;
         margin-right: 50px;
-        .icon {
-          //position: absolute;
-        }
+        // .icon {
+        //   //position: absolute;
+        // }
         .iconame {
           //position: absolute;
           color: #4f5156;
@@ -1328,15 +1930,26 @@ export default {
       justify-content: space-between;
       .groupleft {
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
         margin-left: 32px;
         .groupname {
+          height: 22px;
+          width: 70px;
           color: #000000;
           font-size: 14px;
         }
         .ant-input {
+          border-radius: 8px;
+          width: 264px;
           height: 40px;
         }
+        .ant-select-selector {
+          border-radius: 8px;
+          width: 264px;
+          height: 40px;
+          padding-top: 5px;
+        }
       }
       .groupright {
         display: flex;
@@ -1402,7 +2015,7 @@ export default {
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-right: 32px;
+        margin-right: 16px;
         border: 1px solid #409eff;
         border-radius: 8px;
         cursor: pointer;
@@ -1414,8 +2027,83 @@ export default {
         }
       }
     }
+    .talk {
+      margin-top: 24px;
+      margin-left: 32px;
+      margin-right: 32px;
+      margin-bottom: 11px;
+      position: relative;
+      //width: 90%;
+      height: 40px;
+      background: #f5faff;
+      border: 1px solid #4ea6ff;
+      // opacity: 0.22;
+      display: flex;
+      align-items: center;
+      .im {
+        width: 14px;
+        height: 15px;
+        margin-left: 17px;
+      }
+      .xu {
+        height: 100%;
+        line-height: 40px;
+        margin-left: 13px;
+        .yi {
+          color: #4f5156;
+          font-size: 14px;
+        }
+        .zon {
+          color: #999ba3;
+          font-size: 14px;
+          margin-left: 34px;
+        }
+        .th {
+          color: #4ea6ff;
+        }
+      }
+      .clear {
+        cursor: pointer;
+        font-size: 14px;
+        color: #387df7;
+        line-height: 24px;
+        position: absolute;
+        right: 20px;
+      }
+    }
+    .tab {
+      .ant-table-thead > tr > th {
+        background-color: rgba(239, 244, 252, 1);
+        color: rgba(0, 0, 0, 0.85);
+      }
+      .ant-table-tbody > tr > td {
+        border-bottom: 1px solid #f0f6fc;
+        color: rgba(0, 0, 0, 0.65);
+      }
+      th.h {
+        background-color: #eff4fc !important;
+      }
+
+      .ant-table-tbody
+        > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+        > td {
+        background: rgba(250, 250, 250, 1);
+      }
+      .pa {
+        // left: 0;
+        margin-top: 15px;
+        width: 100%;
+        // height: 20px;
+        // background-color: red;
+        display: flex;
+        justify-content: right;
+        // position: absolute;
+        // bottom: 20px;
+      }
+    }
     .groupmain {
       display: flex;
+      flex-wrap: wrap;
       margin-left: 32px;
       .groupbox {
         width: 264px;
@@ -1428,9 +2116,120 @@ export default {
         margin-right: 20px;
         .grouptitle {
           display: flex;
-          justify-content: space-betwwen;
+          justify-content: space-between;
+          margin-top: 5px;
           border-bottom: 1px solid rgba(232, 232, 232, 1);
           .goodgruop {
+            color: rgba(0, 0, 0, 0.85);
+            font-size: 16px;
+            line-height: 36px;
+            font-weight: 600;
+          }
+          .more {
+            position: relative;
+            //margin-right: 30px;
+            height: 30px;
+            display: flex;
+            align-items: center;
+            .moreItems {
+              width: 76px;
+              height: 80px;
+              display: none;
+              background: #ffffff;
+              box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
+              // border-radius: 3px;
+              border: 0px solid #dcdcdc;
+              position: absolute;
+              left: -48px;
+              top: 30px;
+              z-index: 100;
+              cursor: pointer;
+              .sammo {
+                text-align: center;
+                margin-top: 12px;
+                cursor: pointer;
+              }
+              .sammo:hover {
+                color: #4ea6ff;
+              }
+            }
+            .moreItems:hover {
+              display: block;
+            }
+          }
+          @media screen and (max-width: 1240px) {
+            .line {
+              margin-right: 10px;
+            }
+            .img1 {
+              margin-right: 15px;
+            }
+            .img2 {
+              margin-right: 10px;
+            }
+            .return {
+              margin-right: 10px;
+            }
+            .pub {
+              margin-right: 10px;
+            }
+            .more {
+              margin-right: 10px;
+            }
+          }
+          .more:hover .moreArrow {
+            background-image: url("../../assets/images/navtop/up.png");
+          }
+          .more:hover .moreItems {
+            display: block;
+          }
+        }
+        .leader {
+          color: rgba(0, 0, 0, 1);
+          font-size: 14px;
+          margin-top: 16px;
+          //margin-left: 24px;
+        }
+        .grocenter {
+          display: flex;
+          margin-top: 14px;
+          .leader1 {
+            color: rgba(0, 0, 0, 1);
+            font-size: 14px;
+            width: 51px;
+          }
+          .ant-progress-outer {
+            width: 170px;
+          }
+        }
+        .grofooter {
+          display: flex;
+          justify-content: space-between;
+          cursor: pointer;
+          margin-top: 30px;
+          .ftext {
+            color: rgba(56, 139, 225, 1);
+            font-size: 14px;
+          }
+          .peoples {
+            display: flex;
+            position: relative;
+            .people1 {
+              position: absolute;
+              right: 22px;
+            }
+            .people2 {
+              position: absolute;
+              right: 31px;
+            }
+            .people3 {
+              position: absolute;
+              right: 40px;
+            }
+            .people4 {
+              position: absolute;
+              right: 49px;
+            }
           }
         }
       }
diff --git a/src/views/research/ResearchAdd.vue b/src/views/research/ResearchAdd.vue
index 844b5995..1384fded 100644
--- a/src/views/research/ResearchAdd.vue
+++ b/src/views/research/ResearchAdd.vue
@@ -1,97 +1,173 @@
 <!-- 调研管理-基础信息页面 -->
 <template>
-<div class="researchadd">
+  <div class="researchadd">
     <div class="header">
-        <span class="title">创建调研</span>
-        <router-link to="/researchmanage" class="goback"><span class="return"></span><router-link class="returntext" to="/researchmanage">返回</router-link></router-link>
+      <span class="title">创建调研</span>
+      <router-link to="/researchmanage" class="goback"
+        ><span class="return"></span
+        ><router-link class="returntext" to="/researchmanage"
+          >返回</router-link
+        ></router-link
+      >
     </div>
     <div class="content">
+      <div class="name">
+        <div class="namebox">
+          <div class="inname">类型</div>
+        </div>
+        <div class="in">
+          <input type="radio" name="type" id="single" checked="checked" /><label
+            for="single"
+            class="text"
+            style="margin-left: 5px"
+            >单选</label
+          >
+          <input
+            type="radio"
+            name="type"
+            id="double"
+            style="margin-left: 10px"
+          /><label for="double" class="text" style="margin-left: 5px"
+            >多选</label
+          >
+          <input
+            type="radio"
+            name="type"
+            id="score"
+            style="margin-left: 10px"
+          /><label for="score" class="text" style="margin-left: 5px"
+            >评分题</label
+          >
+        </div>
+      </div>
+      <div class="name">
+        <div class="namebox">
+          <img
+            class="nameimg"
+            src="../../assets/images/basicinfo/asterisk.png"
+          />
+          <div class="inname">提干</div>
+        </div>
+        <div class="in">
+          <a-input
+            v-model:value="valueE"
+            placeholder="请输入项目名称"
+            show-count
+            :maxlength="20"
+            style="border-radius: 8px"
+          />
+        </div>
+      </div>
+      <div class="name">
+        <div class="in" style="margin-left: 133px">
+          <a-button
+            type="primary"
+            style="
+              width: 100px;
+              height: 40px;
+              border-radius: 8px;
+              background-color: #409eff;
+            "
+            >添加选项</a-button
+          >
+        </div>
+      </div>
+      <div class="options">
         <div class="name">
           <div class="namebox">
-            <div class="inname">类型</div>
+            <div class="inname">选项1</div>
           </div>
           <div class="in">
-            <input type="radio" name="type" id="single" checked="checked"/><label for="single" class="text" style="margin-left: 5px">单选</label>
-            <input type="radio" name="type" id="double" style="margin-left: 10px"/><label for="double" class="text" style="margin-left: 5px">多选</label>
-            <input type="radio" name="type" id="score" style="margin-left: 10px"/><label for="score" class="text" style="margin-left: 5px">评分题</label>
+            <a-input
+              v-model:value="valueE"
+              show-count
+              :maxlength="20"
+              style="border-radius: 8px"
+            />
           </div>
         </div>
+        <div class="delete">删除</div>
+      </div>
+      <div class="name">
+        <div class="in" style="margin-left: 133px">
+          <div class="addimg">+添加图片</div>
+        </div>
+      </div>
+      <div class="options">
         <div class="name">
           <div class="namebox">
-            <img
-              class="nameimg"
-              src="../../assets/images/basicinfo/asterisk.png"
-            />
-            <div class="inname">提干</div>
+            <div class="inname">选项1</div>
           </div>
           <div class="in">
-            <a-input v-model:value="valueE" placeholder="请输入项目名称" show-count :maxlength="20" style="border-radius: 8px"/>
-          </div>
-        </div>
-        <div class="name">
-          <div class="in" style="margin-left: 133px">
-            <a-button type="primary" style="width: 100px;height: 40px;border-radius: 8px;background-color: #409EFF">添加选项</a-button>
-          </div>
-        </div>
-        <div class="options">
-            <div class="name" >
-            <div class="namebox">
-                <div class="inname">选项1</div>
-            </div>
-            <div class="in">
-                <a-input v-model:value="valueE" show-count :maxlength="20" style="border-radius: 8px" />
-            </div>          
-            </div>
-            <div class="delete">删除</div>
-        </div>       
-        <div class="name" >
-          <div class="in" style="margin-left: 133px">
-            <div class="addimg">+添加图片</div>
-          </div>          
-        </div>
-        <div class="options">
-            <div class="name" >
-            <div class="namebox">
-                <div class="inname">选项1</div>
-            </div>
-            <div class="in">
-                <a-input v-model:value="valueE" show-count :maxlength="20" style="border-radius: 8px"/>
-            </div>          
-            </div>
-            <div class="delete">删除</div>
-        </div>
-        <div class="picture" style="position: relative">
-            <img class="pictureimg" src="../../assets/images/research/picture.png"/>
-            <div class="picturename">图片名称1.jpg</div>
-            <img
-                style="cursor: pointer; width: 20px; height: 20px;position: absolute;right: 0;top:0"
-                src="../../assets/images/basicinfo/close.png"
+            <a-input
+              v-model:value="valueE"
+              show-count
+              :maxlength="20"
+              style="border-radius: 8px"
             />
+          </div>
         </div>
+        <div class="delete">删除</div>
+      </div>
+      <div class="picture" style="position: relative">
+        <img
+          class="pictureimg"
+          src="../../assets/images/research/picture.png"
+        />
+        <div class="picturename">图片名称1.jpg</div>
+        <img
+          style="
+            cursor: pointer;
+            width: 20px;
+            height: 20px;
+            position: absolute;
+            right: 0;
+            top: 0;
+          "
+          src="../../assets/images/basicinfo/close.png"
+        />
+      </div>
     </div>
-     <div class="header">
-        <span class="title" style="font-size: 14px">选项设置</span>
+    <div class="header">
+      <span class="title" style="font-size: 14px">选项设置</span>
     </div>
     <div class="content">
-        <div class="name" >
-          <div class="namebox">
-            <div class="inname">最低分</div>
-          </div>
-          <div class="in">
-            <a-input v-model:value="valueE"  />
-          </div>
-          <div class="namebox" style="margin-left: -50px">
-            <div class="inname">最高分</div>
-          </div>
-          <div class="in">
-            <a-input v-model:value="valueE"  />
-          </div>           
+      <div class="name">
+        <div class="namebox">
+          <div class="inname">最低分</div>
         </div>
-        <div class="scorebox">
-            <div class="scoretext">非常满意</div>
-            <div class="number">
-                <a-button class="btn" style="margin-left:10px">1</a-button>
-                    <a-button class="btn">2</a-button>
+        <div class="in numberInp">
+          <a-input-number
+            :value="minScore"
+            :min="1"
+            :max="10"
+            @change="minChange"
+          />
+        </div>
+        <div class="namebox" style="margin-left: -180px">
+          <div class="inname">最高分</div>
+        </div>
+        <div class="in numberInp">
+          <a-input-number
+            :value="maxScore"
+            :min="1"
+            :max="10"
+            @change="maxChange"
+          />
+        </div>
+      </div>
+      <div class="scorebox">
+        <div class="scoretext">非常满意</div>
+        <div class="number">
+          <div
+            class="btn"
+            style="margin-left: 10px"
+            v-for="(value, index) in scoreList"
+            :key="index"
+          >
+            {{ value.text }}
+          </div>
+          <!-- <a-button class="btn">2</a-button>
                     <a-button class="btn">3</a-button>
                     <a-button class="btn">4</a-button>
                     <a-button class="btn">5</a-button>
@@ -99,195 +175,348 @@
                     <a-button class="btn">7</a-button>
                     <a-button class="btn">8</a-button>
                     <a-button class="btn">9</a-button>
-                    <a-button class="btn" style="display: flex;align-items:center;margin-right: 10px;justify-content: center">10</a-button>
-                
-            </div>
-            <div class="scoretext">非常不满意</div>
+                    <a-button class="btn" style="display: flex;align-items:center;margin-right: 10px;justify-content: center">10</a-button> -->
         </div>
-        <div class="name name2">
-          <div class="namebox">
-            <div class="inname" style="margin-top: 13px">备注</div>
-          </div>
-          <div class="in">
-            <a-textarea
-              v-model:value="valuei"
-              style="height: 80px"
-            />
-          </div>
+        <div class="scoretext">非常不满意</div>
+      </div>
+      <div class="name name2">
+        <div class="namebox">
+          <div class="inname" style="margin-top: 13px">备注</div>
         </div>
+        <div class="in">
+          <a-textarea v-model:value="valuei" style="height: 80px" />
+        </div>
+      </div>
     </div>
     <div class="footer">
-        <div class="btn">
-            <a-button type="primary" style="width: 100px;height: 40px;border-radius: 8px;background-color: #409EFF">保存</a-button>
-            <a-button type="primary" ghost style="width: 100px;height: 40px;margin-left: 14px;border-radius: 8px">取消</a-button>
-        </div>
+      <div class="btn">
+        <a-button
+          type="primary"
+          style="
+            width: 100px;
+            height: 40px;
+            border-radius: 8px;
+            background-color: #409eff;
+          "
+          >保存</a-button
+        >
+        <a-button
+          type="primary"
+          ghost
+          style="
+            width: 100px;
+            height: 40px;
+            margin-left: 14px;
+            border-radius: 8px;
+          "
+          >取消</a-button
+        >
+      </div>
     </div>
-
-</div>    
+  </div>
 </template>
-<script lang="ts">
+<script>
+import { reactive, toRefs } from "vue";
+import { message } from "ant-design-vue";
+export default {
+  name: "ResearchAdd",
+  setup() {
+    const state = reactive({
+      minScore: 1,
+      maxScore: 10,
+      scoreList: [
+        {
+          id: 1,
+          text: 1,
+        },
+        {
+          id: 2,
+          text: 2,
+        },
+        {
+          id: 3,
+          text: 3,
+        },
+        {
+          id: 4,
+          text: 4,
+        },
+        {
+          id: 5,
+          text: 5,
+        },
+        {
+          id: 6,
+          text: 6,
+        },
+        {
+          id: 7,
+          text: 7,
+        },
+        {
+          id: 8,
+          text: 8,
+        },
+        {
+          id: 9,
+          text: 9,
+        },
+        {
+          id: 10,
+          text: 10,
+        },
+      ],
+      scoreListClone: [
+        {
+          id: 1,
+          text: 1,
+        },
+        {
+          id: 2,
+          text: 2,
+        },
+        {
+          id: 3,
+          text: 3,
+        },
+        {
+          id: 4,
+          text: 4,
+        },
+        {
+          id: 5,
+          text: 5,
+        },
+        {
+          id: 6,
+          text: 6,
+        },
+        {
+          id: 7,
+          text: 7,
+        },
+        {
+          id: 8,
+          text: 8,
+        },
+        {
+          id: 9,
+          text: 9,
+        },
+        {
+          id: 10,
+          text: 10,
+        },
+      ],
+    });
+
+    const minChange = (e) => {
+      // console.log("eee", e);
+      if (e > state.maxScore) return message.info("最低分不能超过最高分");
+      state.minScore = e;
+      let arr = state.scoreListClone.concat([]);
+      arr.map((value, index) => {
+        if (value.id === e) {
+          arr = arr.slice(index, state.maxScore);
+        }
+      });
+      state.scoreList = arr;
+    };
+    const maxChange = (e) => {
+      if (e < state.minScore) return message.info("最高分不能低于最低分");
+      state.maxScore = e;
+      let arr = state.scoreListClone.concat([]);
+      arr.map((value, index) => {
+        if (value.id === e) {
+          arr = arr.slice(state.minScore - 1, index + 1);
+        }
+      });
+      state.scoreList = arr;
+    };
+    return {
+      ...toRefs(state),
+      minChange,
+      maxChange,
+    };
+  },
+};
 </script>
 <style lang="scss">
 .researchadd {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .header {
     width: 100%;
+    display: flex;
+    justify-content: space-between;
+    .title {
+      color: #000000;
+      font-size: 18px;
+      //line-height: 36px;
+      padding-top: 30px;
+      padding-left: 37px;
+      //font-weight: 500;
+    }
+    .goback {
+      padding-right: 70px;
+      //padding-top: 37px;
+      position: relative;
+      .return {
+        display: inline-block;
+        width: 42px;
+        height: 42px;
+        margin-top: 17px;
+        margin-right: 10px;
+        background-image: url("../../assets/images/projectadd/return.png");
+      }
+      .returntext {
+        display: inline-block;
+        position: absolute;
+        top: 27px;
+        color: #4ea6ff;
+        font-size: 14px;
+      }
+    }
+  }
+  .content {
     display: flex;
     flex-direction: column;
-    .header {
-        width: 100%;
+    .scorebox {
+      display: flex;
+      align-items: center;
+      margin-top: 20px;
+      margin-left: 70px;
+      .scoretext {
+        font-size: 14px;
+        color: #56a3f9;
+      }
+      .number {
         display: flex;
-        justify-content: space-between;
-        .title {
-            color: #000000;
-            font-size: 18px;
-            //line-height: 36px;
-            padding-top: 30px;
-            padding-left: 37px;
-            //font-weight: 500;
-        }
-        .goback {           
-            padding-right: 70px;
-            //padding-top: 37px;
-            position: relative;
-            .return {
-                display: inline-block;
-                width: 42px;
-                height: 42px;
-                margin-top: 17px;
-                margin-right: 10px;
-                background-image: url("../../assets/images/projectadd/return.png");
-            }
-            .returntext {
-                display: inline-block;
-                position: absolute;
-                top: 27px;
-                color: #4EA6FF;
-                font-size: 14px;
-            }
-        }
-    }
-    .content {
-        display: flex;
-        flex-direction: column; 
-        .scorebox {
-            display:flex;
-            align-items: center;
-            margin-top: 20px;
-            margin-left:70px;
-            .scoretext {
-                font-size: 14px;
-                color: #56A3F9;
-            }
-            .number {
-                display: flex;
-                border: 1px solid #D7E5FD;
-                border-radius: 5px;
-                margin: 0 10px;
-                padding: 5px;
-                .btn {
-                    border: 1px solid #56A3F9;
-                    border-radius: 5px; 
-                    width: 40px;
-                    height: 40px;
-                    color: #56A3F9;
-                    margin: 5px;
-                }
-            }
-        }
-        .picture {
-            width: 100px;
-            display: flex;
-            flex-direction: column;
-            margin-top: 20px;
-            margin-left: 133px;
-            .pictureimg {
-                width: 100px;
-                height: 100px;
-            }
-            .picturename {
-                    color: #6F6F6F;
-                    font-size: 14px;
-                }
-        }
-        .name2 {
-            display: flex;
-            align-items: flex-start;
-        }
-        .options {
-            display:flex;
-        }
-        .delete {
-            cursor: pointer;
-            margin-top: 32px;
-            margin-left: 20px;
-            float: right;
-            color: #4EA6FF;
-            font-size: 14px;
-        }
-        .name {
-            width: 50%;
-            // background-color: lightcoral;
-            display: flex;
-            margin-top: 20px;
-            //align-items: center;
-            //height: 40px;
-            // border: 1px solid black;
-            .namebox {
-            width: 120px;
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-            flex-shrink: 0;
-                .nameimg {
-                    width: 10px;
-                    height: 10px;
-                }
-            }
-            .inname {
-                color: #6f6f6f;
-                font-size: 14px;
-                margin-left: 7px;
-                }
-                .in {
-                    margin-left: 14px;
-                    flex: 1;
-                    .addimg {
-                        cursor:pointer;
-                        color: rgba(78, 166, 255, 1);
-                        font-size: 14px;
-                    }
-                    .text {
-                        color: rgba(109, 117, 132, 1);
-                        font-size: 14px;
-                        //line-height: 24px;
-                    }
-                .ant-radio-wrapper {
-                }
-                .ant-input {
-                    border-radius: 5px;
-                    // height: 120%;
-                    width: 100%;
-                    height: 35px;
-                }
-                .ant-select-selector {
-                    border-radius: 5px;
-                    // height: 120%;
-                    width: 100%;
-                    height: 40px;
-                }
-            }
-        }      
-    }
-    .footer {
-        width: 100%;
-        margin-top: 31px;
-        margin-bottom: 14px;
+        border: 1px solid #d7e5fd;
+        border-radius: 5px;
+        margin: 0 10px;
+        padding: 5px;
         .btn {
-            display: flex;
-            margin-bottom: 20px;
-            justify-content: center;
-            cursor: pointer;
+          width: 40px;
+          height: 40px;
+          border: 1px solid #56a3f9;
+          border-radius: 8px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin: 5px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #56a3f9;
+          line-height: 24px;
+          cursor: pointer;
         }
+      }
     }
+    .picture {
+      width: 100px;
+      display: flex;
+      flex-direction: column;
+      margin-top: 20px;
+      margin-left: 133px;
+      .pictureimg {
+        width: 100px;
+        height: 100px;
+      }
+      .picturename {
+        color: #6f6f6f;
+        font-size: 14px;
+      }
+    }
+    .name2 {
+      display: flex;
+      align-items: flex-start;
+    }
+    .options {
+      display: flex;
+    }
+    .delete {
+      cursor: pointer;
+      margin-top: 32px;
+      margin-left: 20px;
+      float: right;
+      color: #4ea6ff;
+      font-size: 14px;
+    }
+    .name {
+      width: 50%;
+      // background-color: lightcoral;
+      display: flex;
+      margin-top: 20px;
+      //align-items: center;
+      //height: 40px;
+      // border: 1px solid black;
+      .namebox {
+        width: 120px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        flex-shrink: 0;
+        .nameimg {
+          width: 10px;
+          height: 10px;
+        }
+      }
+      .inname {
+        color: #6f6f6f;
+        font-size: 14px;
+        margin-left: 7px;
+      }
+      .in {
+        margin-left: 14px;
+        flex: 1;
+        .addimg {
+          cursor: pointer;
+          color: rgba(78, 166, 255, 1);
+          font-size: 14px;
+        }
+        .text {
+          color: rgba(109, 117, 132, 1);
+          font-size: 14px;
+          //line-height: 24px;
+        }
+        .ant-radio-wrapper {
+        }
+        .ant-input {
+          border-radius: 5px;
+          // height: 120%;
+          width: 100%;
+          height: 35px;
+        }
+        .ant-select-selector {
+          border-radius: 5px;
+          // height: 120%;
+          width: 100%;
+          height: 40px;
+        }
+      }
+      .numberInp {
+        width: 200px;
+        .ant-input-number {
+          width: 200px;
+        }
+        // .ant-input-number-input-wrap {
+        //   width: 200px;
+        // }
+      }
+    }
+  }
+  .footer {
+    width: 100%;
+    margin-top: 31px;
+    margin-bottom: 14px;
+    .btn {
+      display: flex;
+      margin-bottom: 20px;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
 }
-    
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/system/SystemManage.vue b/src/views/system/SystemManage.vue
index af79859e..4d32ae84 100644
--- a/src/views/system/SystemManage.vue
+++ b/src/views/system/SystemManage.vue
@@ -23,6 +23,7 @@
     <div>
       <add-vote v-model:addvoteVisible="visible" />
     </div>
+    <a-radio v-model:checked="checked" @click="changeRadio">Option A</a-radio>
   </div>
 </template>
 <script>
@@ -36,15 +37,19 @@ export default {
   setup() {
     const state = reactive({
       visible: false,
+      checked: true,
     });
 
     const showDrawer = () => {
       state.visible = true;
     };
-
+    const changeRadio = () => {
+      state.checked = false;
+    };
     return {
       ...toRefs(state),
       showDrawer,
+      changeRadio,
     };
   },
 };