diff --git a/src/components/drawers/AddOnline.vue b/src/components/drawers/AddOnline.vue
new file mode 100644
index 00000000..0fd2359f
--- /dev/null
+++ b/src/components/drawers/AddOnline.vue
@@ -0,0 +1,441 @@
+<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: 270px; 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: 200px"
+                                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">
+.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: 32px;
+                .mi_ipts{
+                    display: flex;
+                    .mii_ipt{
+                        display: flex;
+                        align-items: center;
+                        margin-right: 24px;
+                    }
+                }
+                .mi_btns{
+                    display: flex;
+                    margin-left: 38px;
+                    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 b56b0324..f91322d2 100644
--- a/src/components/drawers/AddVote.vue
+++ b/src/components/drawers/AddVote.vue
@@ -2,7 +2,7 @@
   <a-drawer
     :visible="addvoteVisible"
     class="drawerStyle"
-    width="80%"
+    width="70%"
     title="添加投票"
     placement="right"
     @after-visible-change="afterVisibleChange"
diff --git a/src/components/drawers/EidtOnline.vue b/src/components/drawers/EidtOnline.vue
new file mode 100644
index 00000000..6babc1ec
--- /dev/null
+++ b/src/components/drawers/EidtOnline.vue
@@ -0,0 +1,441 @@
+<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_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: 270px; 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: 200px"
+                                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: "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',
+                },
+                {
+                    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">
+.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: 32px;
+                .mi_ipts{
+                    display: flex;
+                    .mii_ipt{
+                        display: flex;
+                        align-items: center;
+                        margin-right: 24px;
+                    }
+                }
+                .mi_btns{
+                    display: flex;
+                    margin-left: 38px;
+                    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/FaceManage.vue b/src/components/drawers/FaceManage.vue
new file mode 100644
index 00000000..28053dfa
--- /dev/null
+++ b/src/components/drawers/FaceManage.vue
@@ -0,0 +1,556 @@
+<template>
+  <a-drawer
+    :visible="Fvisible"
+    class="drawerStyle"
+    placement="right"
+    width="60%"
+    @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="main">
+        <div class="endtime">起止时间：2022-07-21 14:00 ～ 2022-7-30 14:00</div>
+        <div class="search">
+          <div class="namecon" style="margin-right: 30px">
+            <div class="name">姓名：</div>
+            <a-input
+              v-model:value="name"
+              style="width: 270px; height: 40px; border-radius: 8px"
+              placeholder="请输入姓名"
+            />
+          </div>
+          <div class="namecon" style="margin-right: 50px">
+            <div class="name">任务状态：</div>
+            <div class="select">
+              <a-select
+                v-model:value="projectName"
+                style="width: 270px"
+                placeholder="请选择"
+                :options="projectNameList"
+                @change="selectProjectName"
+                allowClear
+                showSearch
+              ></a-select>
+            </div>
+          </div>
+          <div class="btns">
+            <div class="btn btn1" style="margin-right: 20px">
+              <div class="img1"></div>
+              <div class="wz">搜索</div>
+            </div>
+            <div class="btn btn2">
+              <div class="img2"></div>
+              <div class="wz">重置</div>
+            </div>
+          </div>
+        </div>
+        <div class="btnss" style="margin-top: 20px">
+          <div class="btn btn1" style="margin-right: 20px">
+            <div class="img1"></div>
+            <div class="wz">催促学习</div>
+          </div>
+          <div class="btn btn2">
+            <div class="wz">批量标注完成</div>
+          </div>
+          <div class="btn btn2">
+            <div class="wz">批量录入成绩</div>
+          </div>
+          <div class="btn btn2">
+            <div class="img2"></div>
+            <div class="wz">导出数据</div>
+          </div>
+        </div>
+        <div class="line">
+          <div class="inline">
+            <div class="left">
+              <div class="img"></div>
+              <div class="text" style="margin-left: 10px">已选择</div>
+              <div class="text2">2</div>
+              <div class="text">项</div>
+              <div class="text3">列表选项总计：</div>
+              <div class="text4">9条</div>
+            </div>
+            <div class="right">清空</div>
+          </div>
+        </div>
+        <div class="tab" style="margin-top: 20px; margin-bottom: 100px">
+          <a-table
+            style="border: 1px solid #f2f6fe"
+            :columns="tablecolumns"
+            :data-source="tabledata"
+            :loading="tableDataTotal === -1 ? true : false"
+            expandRowByClick="true"
+            :scroll="{ x: 900, 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>
+      </div>
+      <div class="btnn">
+        <button class="btn1">取消</button>
+        <button class="btn2">确定</button>
+      </div>
+    </div>
+  </a-drawer>
+</template>
+
+<script>
+import { toRefs, reactive } from "vue";
+export default {
+  name: "FaceManage",
+  props: {
+    Fvisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  setup(props, ctx) {
+    const state = reactive({
+      name: null,
+      pageSize: 10,
+      currentPage: 1,
+      tableDataTotal: 100,
+      selectedRowKeys: [],
+      projectNameList: [
+        {
+          id: 1,
+          value: "项目一",
+          label: "项目一",
+        },
+        {
+          id: 2,
+          value: "项目二",
+          label: "项目二",
+        },
+        {
+          id: 3,
+          value: "项目三",
+          label: "项目三",
+        },
+        {
+          id: 4,
+          value: "项目四",
+          label: "项目四",
+        },
+      ],
+      tabledata: [
+        {
+          key: 1,
+          name: "哈哈",
+          bum: "产品部",
+          gangw: "产品经理",
+          score: "-",
+          state: "未完成",
+        },
+        {
+          key: 2,
+          name: "哈哈",
+          bum: "产品部",
+          gangw: "产品经理",
+          score: "-",
+          state: "未完成",
+        },
+        {
+          key: 3,
+          name: "哈哈",
+          bum: "产品部",
+          gangw: "产品经理",
+          score: "合格",
+          state: "完成",
+        },
+        {
+          key: 4,
+          name: "哈哈",
+          bum: "产品部",
+          gangw: "产品经理",
+          score: "合格",
+          state: "完成",
+        },
+        {
+          key: 5,
+          name: "哈哈",
+          bum: "产品部",
+          gangw: "产品经理",
+          score: "合格",
+          state: "完成",
+        },
+        {
+          key: 6,
+          name: "哈哈",
+          bum: "产品部",
+          gangw: "产品经理",
+          score: "合格",
+          state: "完成",
+        },
+        {
+          key: 7,
+          name: "哈哈",
+          bum: "产品部",
+          gangw: "产品经理",
+          score: "合格",
+          state: "完成",
+        },
+        {
+          key: 8,
+          name: "哈哈",
+          bum: "产品部",
+          gangw: "产品经理",
+          score: "不合格",
+          state: "完成",
+        },
+        {
+          key: 9,
+          name: "哈哈",
+          bum: "产品部",
+          gangw: "产品经理",
+          score: "不合格",
+          state: "完成",
+        },
+        {
+          key: 10,
+          name: "哈哈",
+          bum: "产品部",
+          gangw: "产品经理",
+          score: "不合格",
+          state: "完成",
+        },
+      ],
+      tablecolumns: [
+        {
+          title: "姓名",
+          dataIndex: "name",
+          key: "name",
+          width: 50,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "所在部门",
+          dataIndex: "bum",
+          key: "bum",
+          width: 50,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "所在岗位",
+          dataIndex: "gangw",
+          key: "gangw",
+          width: 50,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "课程成绩",
+          dataIndex: "score",
+          key: "score",
+          width: 50,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "任务状态",
+          dataIndex: "state",
+          key: "state",
+          width: 50,
+          align: "center",
+          className: "h",
+        },
+      ],
+    });
+    const selectProjectName = (value, index) => {
+      console.log("value", value, index);
+    };
+    const closeDrawer = () => {
+      ctx.emit("update:Fvisible", false);
+    };
+    const onSelectChange = (selectedRowKeys) => {
+      console.log("selectedRowKeys changed: ", selectedRowKeys);
+      state.selectedRowKeys = selectedRowKeys;
+    };
+    return {
+      ...toRefs(state),
+      selectProjectName,
+      closeDrawer,
+      onSelectChange,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss" >
+.drawerStyle {
+  .ant-drawer-content-wrapper {
+    // max-width: 1000px;
+    .ant-drawer-header {
+      display: none !important;
+    }
+    .ant-drawer-body {
+      padding: 0;
+    }
+  }
+  .drawerMain {
+    min-width: 600px;
+    margin: 0px 32px 0px 32px;
+    overflow-x: scroll;
+    display: flex;
+    flex-direction: column;
+    .header {
+      height: 73px;
+      border-bottom: 1px solid #e8e8e8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      // background-color: red;
+      margin-bottom: 20px;
+      .headerTitle {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 25px;
+        // margin-left: 24px;
+      }
+    }
+    .main {
+      width: 100%;
+      height: 100%;
+      // background-color: #bfa;
+      // overflow-y: auto;
+      .endtime {
+        font-size: 16px;
+        font-weight: 500;
+        color: #333333;
+      }
+      .search {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 20px;
+
+        .namecon {
+          display: flex;
+          flex-wrap: nowrap;
+          margin-bottom: 10px;
+          // .name {
+          //   margin-top: 8px;
+
+          //   color: rgba(0, 0, 0, 0.85);
+          //   font-size: 14px;
+          //   font-weight: 400;
+          // }
+        }
+        .btns {
+          display: flex;
+          flex-wrap: nowrap;
+
+          .btn {
+            cursor: pointer;
+            width: 100px;
+            height: 40px;
+            border-radius: 8px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .img1 {
+              width: 15px;
+              height: 17px;
+              background-image: url(../../assets/images/courseManage/search0.png);
+              background-size: 100% 100%;
+              margin-right: 7px;
+            }
+            .img2 {
+              width: 16px;
+              height: 18px;
+              background-image: url(../../assets/images/courseManage/reset1.png);
+              background-size: 100% 100%;
+              margin-right: 7px;
+            }
+          }
+
+          .btn1 {
+            background: #388be1;
+
+            color: #ffffff;
+          }
+          .btn2 {
+            background: #ffffff;
+
+            color: #388be1;
+            border: 1px solid #388be1;
+          }
+        }
+      }
+      .btnss {
+        display: flex;
+        flex-wrap: nowrap;
+
+        .btn {
+          cursor: pointer;
+          width: 130px;
+          height: 40px;
+          border-radius: 8px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .img1 {
+            width: 15px;
+            height: 17px;
+            background-image: url(../../assets/images/courseManage/search0.png);
+            background-size: 100% 100%;
+            margin-right: 7px;
+          }
+          .img2 {
+            width: 17px;
+            height: 16px;
+            background-image: url(../../assets/images/coursewareManage/export.png);
+            background-size: 100% 100%;
+            margin-right: 7px;
+          }
+        }
+
+        .btn1 {
+          background: #388be1;
+
+          color: #ffffff;
+        }
+        .btn2 {
+          background: #ffffff;
+          margin-right: 20px;
+          color: #388be1;
+          border: 1px solid #388be1;
+        }
+      }
+      .line {
+        width: 100%;
+        height: 40px;
+        background-color: #e9f6fe;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: 20px;
+        border: 1px solid #c3e6fc;
+        .inline {
+          width: 95%;
+          height: 100%;
+          display: flex;
+          justify-content: space-between;
+          // background-color: #bfa;
+          .left {
+            height: 100%;
+            display: flex;
+            align-items: center;
+            .img {
+              width: 14px;
+              height: 15px;
+              background-image: url(../../assets/images/leveladd/gan.png);
+              background-size: 100% 100%;
+            }
+            .text {
+              color: #999ba3;
+            }
+            .text2 {
+              color: #4ea6ff;
+              margin-left: 5px;
+              margin-right: 5px;
+            }
+            .text3 {
+              color: #999ba3;
+              margin-left: 20px;
+            }
+          }
+          .right {
+            font-size: 14px;
+            font-weight: 400;
+            color: #387df7;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+          }
+        }
+      }
+      .tab {
+        .ant-table-thead > tr > th {
+          background-color: rgba(239, 244, 252, 1);
+        }
+
+        th.h {
+          background-color: #eff4fc !important;
+        }
+
+        .ant-table-tbody
+          > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+          > td {
+          background: #f6f9fd;
+        }
+        .pa {
+          // left: 0;
+          margin-top: 15px;
+          width: 100%;
+          // height: 20px;
+          // background-color: red;
+          display: flex;
+          justify-content: center;
+          // position: absolute;
+          // bottom: 20px;
+        }
+      }
+    }
+
+    .btnn {
+      height: 72px;
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+      .btn1 {
+        width: 100px;
+        height: 40px;
+        border: 1px solid #4ea6ff;
+        border-radius: 8px;
+        color: #4ea6ff;
+        background-color: #fff;
+        cursor: pointer;
+      }
+      .btn2 {
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        background: #4ea6ff;
+        border-radius: 8px;
+        border: 0;
+        margin-left: 15px;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/drawers/TimeManage.vue b/src/components/drawers/TimeManage.vue
new file mode 100644
index 00000000..8c6a31fa
--- /dev/null
+++ b/src/components/drawers/TimeManage.vue
@@ -0,0 +1,473 @@
+<template>
+  <a-drawer
+    :visible="Tvisible"
+    class="drawerStyle"
+    placement="right"
+    width="60%"
+    @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="main">
+        <div class="endtime">起止时间：2022-07-21 14:00 ～ 2022-7-30 14:00</div>
+        <div class="search">
+          <div class="namecon" style="margin-right: 30px">
+            <div class="name">姓名：</div>
+            <a-input
+              v-model:value="name"
+              style="width: 270px; height: 40px; border-radius: 8px"
+              placeholder="请输入姓名"
+            />
+          </div>
+          <div class="namecon" style="margin-right: 50px">
+            <div class="name">任务状态：</div>
+            <div class="select">
+              <a-select
+                v-model:value="projectName"
+                style="width: 270px"
+                placeholder="请选择"
+                :options="projectNameList"
+                @change="selectProjectName"
+                allowClear
+                showSearch
+              ></a-select>
+            </div>
+          </div>
+          <div class="btns">
+            <div class="btn btn1" style="margin-right: 20px">
+              <div class="img1"></div>
+              <div class="wz">搜索</div>
+            </div>
+            <div class="btn btn2">
+              <div class="img2"></div>
+              <div class="wz">重置</div>
+            </div>
+          </div>
+        </div>
+        <div class="btnss" style="margin-top: 20px">
+          <div class="btn btn1" style="margin-right: 20px">
+            <div class="img1"></div>
+            <div class="wz">催促学习</div>
+          </div>
+          <div class="btn btn2">
+            <div class="img2"></div>
+            <div class="wz">导出数据</div>
+          </div>
+        </div>
+        <div class="tab" style="margin-top: 20px; margin-bottom: 100px">
+          <a-table
+            style="border: 1px solid #f2f6fe"
+            :columns="tablecolumns"
+            :data-source="tabledata"
+            :loading="tableDataTotal === -1 ? true : false"
+            expandRowByClick="true"
+            :scroll="{ x: 900, y: 350 }"
+            @expand="expandTable"
+            :pagination="false"
+          />
+          <div class="pa">
+            <a-pagination
+              showSizeChanger="true"
+              showQuickJumper="true"
+              hideOnSinglePage="true"
+              :pageSize="pageSize"
+              :current="currentPage"
+              :total="tableDataTotal"
+              class="pagination"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="btnn">
+        <button class="btn1">取消</button>
+        <button class="btn2">确定</button>
+      </div>
+    </div>
+  </a-drawer>
+</template>
+
+<script>
+import { toRefs, reactive } from "vue";
+export default {
+  name: "TimeManage",
+  props: {
+    Tvisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  setup(props, ctx) {
+    const state = reactive({
+      name: null,
+      pageSize: 10,
+      currentPage: 1,
+      tableDataTotal: 100,
+      projectNameList: [
+        {
+          id: 1,
+          value: "项目一",
+          label: "项目一",
+        },
+        {
+          id: 2,
+          value: "项目二",
+          label: "项目二",
+        },
+        {
+          id: 3,
+          value: "项目三",
+          label: "项目三",
+        },
+        {
+          id: 4,
+          value: "项目四",
+          label: "项目四",
+        },
+      ],
+      tabledata: [
+        {
+          key: 1,
+          name: "哈哈",
+          bum: "产品部",
+          gangw: "产品经理",
+          time: "-",
+          state: "未完成",
+        },
+        {
+          key: 2,
+          name: "哈哈",
+          bum: "产品部",
+          gangw: "产品经理",
+          time: "2022-10-31  23:12:00",
+          state: "未完成",
+        },
+        {
+          key: 3,
+          name: "哈哈",
+          bum: "产品部",
+          gangw: "产品经理",
+          time: "2022-10-31  23:12:00",
+          state: "未完成",
+        },
+        {
+          key: 4,
+          name: "哈哈",
+          bum: "产品部",
+          gangw: "产品经理",
+          time: "2022-10-31  23:12:00",
+          state: "未完成",
+        },
+        {
+          key: 5,
+          name: "哈哈",
+          bum: "产品部",
+          gangw: "产品经理",
+          time: "2022-10-31  23:12:00",
+          state: "未完成",
+        },
+        {
+          key: 6,
+          name: "哈哈",
+          bum: "产品部",
+          gangw: "产品经理",
+          time: "2022-10-31  23:12:00",
+          state: "未完成",
+        },
+        {
+          key: 7,
+          name: "哈哈",
+          bum: "产品部",
+          gangw: "产品经理",
+          time: "2022-10-31  23:12:00",
+          state: "未完成",
+        },
+        {
+          key: 8,
+          name: "哈哈",
+          bum: "产品部",
+          gangw: "产品经理",
+          time: "2022-10-31  23:12:00",
+          state: "未完成",
+        },
+        {
+          key: 9,
+          name: "哈哈",
+          bum: "产品部",
+          gangw: "产品经理",
+          time: "2022-10-31  23:12:00",
+          state: "未完成",
+        },
+        {
+          key: 10,
+          name: "哈哈",
+          bum: "产品部",
+          gangw: "产品经理",
+          time: "2022-10-31  23:12:00",
+          state: "未完成",
+        },
+      ],
+      tablecolumns: [
+        {
+          title: "姓名",
+          dataIndex: "name",
+          key: "name",
+          width: 50,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "所在部门",
+          dataIndex: "bum",
+          key: "bum",
+          width: 50,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "所在岗位",
+          dataIndex: "gangw",
+          key: "gangw",
+          width: 50,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "完成时间",
+          dataIndex: "time",
+          key: "time",
+          width: 50,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "任务状态",
+          dataIndex: "state",
+          key: "state",
+          width: 50,
+          align: "center",
+          className: "h",
+        },
+      ],
+    });
+    const selectProjectName = (value, index) => {
+      console.log("value", value, index);
+    };
+    const closeDrawer = () => {
+      ctx.emit("update:Tvisible", false);
+    };
+    return {
+      ...toRefs(state),
+      selectProjectName,
+      closeDrawer,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss" >
+.drawerStyle {
+  .ant-drawer-content-wrapper {
+    // max-width: 1000px;
+    .ant-drawer-header {
+      display: none !important;
+    }
+    .ant-drawer-body {
+      padding: 0;
+    }
+  }
+  .drawerMain {
+    min-width: 600px;
+    margin: 0px 32px 0px 32px;
+    overflow-x: scroll;
+    display: flex;
+    flex-direction: column;
+    .header {
+      height: 73px;
+      border-bottom: 1px solid #e8e8e8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      // background-color: red;
+      margin-bottom: 20px;
+      .headerTitle {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 25px;
+        // margin-left: 24px;
+      }
+    }
+    .main {
+      width: 100%;
+      height: 100%;
+      // background-color: #bfa;
+      // overflow-y: auto;
+      .endtime {
+        font-size: 16px;
+        font-weight: 500;
+        color: #333333;
+      }
+      .search {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 20px;
+
+        .namecon {
+          display: flex;
+          flex-wrap: nowrap;
+          margin-bottom: 10px;
+          // .name {
+          //   margin-top: 8px;
+
+          //   color: rgba(0, 0, 0, 0.85);
+          //   font-size: 14px;
+          //   font-weight: 400;
+          // }
+        }
+        .btns {
+          display: flex;
+          flex-wrap: nowrap;
+
+          .btn {
+            cursor: pointer;
+            width: 100px;
+            height: 40px;
+            border-radius: 8px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .img1 {
+              width: 15px;
+              height: 17px;
+              background-image: url(../../assets/images/courseManage/search0.png);
+              background-size: 100% 100%;
+              margin-right: 7px;
+            }
+            .img2 {
+              width: 16px;
+              height: 18px;
+              background-image: url(../../assets/images/courseManage/reset1.png);
+              background-size: 100% 100%;
+              margin-right: 7px;
+            }
+          }
+
+          .btn1 {
+            background: #388be1;
+
+            color: #ffffff;
+          }
+          .btn2 {
+            background: #ffffff;
+
+            color: #388be1;
+            border: 1px solid #388be1;
+          }
+        }
+      }
+      .btnss {
+        display: flex;
+        flex-wrap: nowrap;
+
+        .btn {
+          cursor: pointer;
+          width: 130px;
+          height: 40px;
+          border-radius: 8px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .img1 {
+            width: 15px;
+            height: 17px;
+            background-image: url(../../assets/images/courseManage/search0.png);
+            background-size: 100% 100%;
+            margin-right: 7px;
+          }
+          .img2 {
+            width: 17px;
+            height: 16px;
+            background-image: url(../../assets/images/coursewareManage/export.png);
+            background-size: 100% 100%;
+            margin-right: 7px;
+          }
+        }
+
+        .btn1 {
+          background: #388be1;
+
+          color: #ffffff;
+        }
+        .btn2 {
+          background: #ffffff;
+
+          color: #388be1;
+          border: 1px solid #388be1;
+        }
+      }
+      .tab {
+        th.h {
+          background-color: #eff4fc !important;
+        }
+
+        .ant-table-tbody
+          > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+          > td {
+          background: #f6f9fd;
+        }
+        .pa {
+          // left: 0;
+          margin-top: 15px;
+          width: 100%;
+          // height: 20px;
+          // background-color: red;
+          display: flex;
+          justify-content: center;
+          // position: absolute;
+          // bottom: 20px;
+        }
+      }
+    }
+
+    .btnn {
+      height: 72px;
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+      .btn1 {
+        width: 100px;
+        height: 40px;
+        border: 1px solid #4ea6ff;
+        border-radius: 8px;
+        color: #4ea6ff;
+        background-color: #fff;
+        cursor: pointer;
+      }
+      .btn2 {
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        background: #4ea6ff;
+        border-radius: 8px;
+        border: 0;
+        margin-left: 15px;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/courselibrary/CoursewareManage.vue b/src/views/courselibrary/CoursewareManage.vue
index b9e03ee7..673f2bf8 100644
--- a/src/views/courselibrary/CoursewareManage.vue
+++ b/src/views/courselibrary/CoursewareManage.vue
@@ -697,13 +697,70 @@
                   <div class="bs_left">状态：</div>
                   <div class="bs_right">已审核</div>
                 </div>
-                <div class="b_menu">
+                <a-tabs
+                    class="b_menu"
+                    v-model:activeKey="activeKey"
+                    size="large"
+                    :tabBarStyle="{ marginLeft: '10px' }"
+                >
+                  <a-tab-pane key="1" tab="报名管理">
+                      1
+                  </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 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> -->
+                <!-- <div class="b_menunav">
                   <div class="bm_select">
                     <a-select
                       class="select"
@@ -747,7 +804,7 @@
                       </template>
                     </template>
                   </a-table>
-                </div>
+                </div> -->
               </div>
             </div>
           </div>
diff --git a/src/views/learningpath/LearningPath.vue b/src/views/learningpath/LearningPath.vue
index 650997b4..c55c4d9a 100644
--- a/src/views/learningpath/LearningPath.vue
+++ b/src/views/learningpath/LearningPath.vue
@@ -354,12 +354,6 @@ export default {
           width: 100,
           align: "center",
           className: "h",
-          // ellipsis: true,
-          // scopedSlots: { customRender: "action" }, //引入的插槽
-          // customRender: (text, record) => {
-          //   console.log(text, record);
-          //   return <span>{text.text}</span>;
-          // },
         },
         {
           title: "路径图名称",
@@ -411,38 +405,6 @@ export default {
           key: "opacation",
           width: 200,
           align: "center",
-          // scopedSlots: { customRender: "action" }, //引入的插槽
-          // customRender: (text) => {
-          //   console.log(text);
-          //   return (
-          //     <div class="opa">
-          //       <div class="opacation">
-          //         <span class={text.record.haspub ? "activecls" : "errorCls"}>
-          //           发布
-          //         </span>
-          //         <span style={{ "margin-left": "25px" }}>编辑</span>
-          //         <router-link to="/leveladd">
-          //           <span style={{ "margin-left": "25px" }}>关卡</span>
-          //         </router-link>
-
-          //         <div style={{ "margin-left": "25px" }} class="more">
-          //           <span>授权</span>
-          //           <div class="moreArrow"></div>
-          //           <div class="moreItems"></div>
-          //         </div>
-
-          //         <div
-          //           style={{ "margin-left": "21px", "margin-right": "30px" }}
-          //           class="more"
-          //         >
-          //           <span>更多</span>
-          //           <div class="moreArrow"></div>
-          //           <div class="moreItems"></div>
-          //         </div>
-          //       </div>
-          //     </div>
-          //   );
-          // },
         },
       ];
       return columns;
diff --git a/src/views/projectcenter/ProjectManage.vue b/src/views/projectcenter/ProjectManage.vue
index 0c9929d2..30428fa0 100644
--- a/src/views/projectcenter/ProjectManage.vue
+++ b/src/views/projectcenter/ProjectManage.vue
@@ -152,11 +152,7 @@
             class="taskbox"
             style="
               margin-right: 24px;
-              background: linear-gradient(
-                180deg,
-                rgba(221, 234, 255, 1) 100%,
-                rgba(240, 248, 254, 1) 100%
-              );
+              background: linear-gradient(180deg, #ddeaff 0%, #f0f8fe 100%);
             "
           >
             <div class="leftt">
@@ -176,11 +172,7 @@
             class="taskbox"
             @click="showModal3"
             style="
-              background: linear-gradient(
-                180deg,
-                rgba(254, 243, 221, 1) 100%,
-                rgba(255, 250, 240, 1) 100%
-              );
+              background: linear-gradient(180deg, #fef3dd 0%, #fffaf0 100%);
             "
           >
             <div class="leftt">
@@ -248,11 +240,7 @@
               <div
                 class="taskbox"
                 style="
-                  background: linear-gradient(
-                    180deg,
-                    rgba(221, 234, 255, 1) 100%,
-                    rgba(240, 248, 254, 1) 100%
-                  );
+                  background: linear-gradient(180deg, #ddeaff 0%, #f0f8fe 100%);
                 "
               >
                 <div class="leftt">
@@ -277,11 +265,7 @@
               @click="showModal2"
               style="
                 margin-bottom: 40px;
-                background: linear-gradient(
-                  180deg,
-                  rgba(229, 246, 236, 1) 100%,
-                  rgba(238, 249, 243, 1) 100%
-                );
+                background: linear-gradient(180deg, #e5f6ec 0%, #eef9f3 100%);
               "
             >
               <div class="leftt">
diff --git a/src/views/projectcenter/TaskAdd.vue b/src/views/projectcenter/TaskAdd.vue
index 0bbd1138..c2e0cab1 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,12 +70,17 @@
       </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">
@@ -172,12 +185,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 +236,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>
+            <add-online v-model:addonlineVisible="visible" />
           </div>
-        </a-drawer>
+          <!-- 编辑在线侧弹窗 -->
+        </div>
       </div>
     </div>
     <div>
@@ -270,45 +255,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 +355,7 @@
 
 <script>
 import { reactive, toRefs, onMounted, onUnmounted } from "vue";
+import AddOnline from "../../components/drawers/AddOnline.vue";
 const drawercolumns = [
   {
     title: "项目名称",
@@ -358,6 +396,9 @@ const drawercolumns = [
 ];
 export default {
   name: "LevelAddDetail",
+  components: {
+    AddOnline,
+  },
   setup() {
     const state = reactive({
       projectNameList: [
@@ -523,7 +564,6 @@ export default {
               key: "1-1",
               projectName: "管理者进阶-腾飞班",
               manager: "黄华  刘俊",
-
               creater: "毛继禹",
               time: "2022-07-20 14:00:03",
               children: [
@@ -549,7 +589,6 @@ export default {
               key: "2-1",
               projectName: "管理者进阶-腾飞班",
               manager: "黄华  刘俊",
-
               creater: "毛继禹",
               time: "2022-07-20 14:00:03",
               children: [
@@ -564,12 +603,10 @@ export default {
             },
           ],
         },
-
         {
           key: 3,
           projectName: "管理者进阶-腾飞班K1",
           manager: "黄华  刘俊",
-
           creater: "毛继禹",
           time: "2022-07-20 14:00:03",
         },
@@ -577,7 +614,6 @@ export default {
           key: 4,
           projectName: "管理者进阶-腾飞班K1",
           manager: "黄华  刘俊",
-
           creater: "毛继禹",
           time: "2022-07-20 14:00:03",
         },
@@ -585,7 +621,6 @@ export default {
           key: 5,
           projectName: "管理者进阶-腾飞班K1",
           manager: "黄华  刘俊",
-
           creater: "毛继禹",
           time: "2022-07-20 14:00:03",
         },
@@ -593,7 +628,6 @@ export default {
           key: 6,
           projectName: "管理者进阶-腾飞班K1",
           manager: "黄华  刘俊",
-
           creater: "毛继禹",
           time: "2022-07-20 14:00:03",
         },
@@ -601,7 +635,6 @@ export default {
           key: 7,
           projectName: "管理者进阶-腾飞班K1",
           manager: "黄华  刘俊",
-
           creater: "毛继禹",
           time: "2022-07-20 14:00:03",
         },
@@ -610,6 +643,7 @@ export default {
       tableDataTotal: 100,
       pageSize: 10,
       visible: false,
+      visible2: false,
       stage: false,
       selectedRowKeys: [],
     });
@@ -619,9 +653,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 +666,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 +681,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 +706,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 +753,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 +775,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 +803,9 @@ export default {
       document.getElementsByTagName("main")[0].style.boxShadow =
         "0px 1px 35px 0px rgba(118, 136, 166, 0.07)";
     });
+    const showDrawerOnline = () => {
+      state.visible = true;
+    };
     return {
       ...toRefs(state),
       selectProjectName,
@@ -776,138 +813,137 @@ export default {
       tableDataFunc,
       showModal,
       closeModal,
-      showDrawer,
+      // showDrawer,
       afterVisibleChange,
       drawercolumns,
       onSelectChange,
+      showDrawerOnline,
     };
   },
 };
 </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 +1208,7 @@ export default {
             margin-right: 18px;
           }
           .pub {
-            color: #57C887;
+            color: #57c887;
             font-size: 14px;
             margin-top: 5px;
             margin-right: 30px;
@@ -1302,56 +1338,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 +1533,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 dec6a136..02624cf2 100644
--- a/src/views/projectcenter/TaskPage.vue
+++ b/src/views/projectcenter/TaskPage.vue
@@ -1,6 +1,6 @@
 <!-- 任务页面 -->
 <template>
-<div class="taskpage">
+  <div class="taskpage">
     <div class="addhead" style="flex-shrink: 0">
       <div class="leftimg">
         <img class="img" src="../../assets/images/projectadd/picture.png" />
@@ -38,383 +38,701 @@
         >
       </div>
     </div>
-    <div class="split" style="flex-shrink: 0;"></div>
+    <div class="split" style="flex-shrink: 0"></div>
     <div class="content">
-        <a-tabs class="tab"
-            v-model:activeKey="activeKey"
-            size="large"
-            :tabBarStyle="{ marginLeft: '10px',marginTop: '5px' }">
-            <a-tab-pane key="1" tab="概览">
-                <div class="split"></div>
-                <!-- 概览（无数据） -->
-                <div >
-                    <div class="onerow"><div class="taskmain">快速创建项目详情</div></div>
-                    <div class="second">
-                        <div class="taskbox" 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/picture1.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 class="centermain">快速添加任务/阶段</div>
-                        </div>
-                        <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/picture2.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>
-                        </div>
-                        <div class="taskbox" @click="showModal" style="background:linear-gradient(180deg,rgba(229, 246, 236, 1) 100%,rgba(238, 249, 243, 1) 100%);">
-                            <div class="leftt"><img src="../../assets/images/taskpage/left3.png"/></div>
-                            <div class="photo"><img src="../../assets/images/taskpage/picture3.png"/></div>
-                            <div class="rightt"><img src="../../assets/images/taskpage/right3.png"/></div>
-                            <div class="centerbox" style="color: rgba(93, 201, 136, 1)">发布</div>
-                            <div class="centermain">快速发布项目</div>
-                        </div>
-                    </div>
-                </div>               
-                <!-- 概览（无数据） -->
-                <!-- 概览（有数据） -->
-                <div style="display: none">
-                    <div class="onerow"><div class="taskmain">项目概览</div></div>
-                    <div class="second" style="margin-top: 0">
-                        <div class="nubbox">
-                            <span class="nub1">200</span>
-                            <div class="nub2">总人数</div>
-                        </div>
-                        <div class="nubbox">
-                            <span class="nub1" style="color: #FF90AE">15</span>
-                            <div class="nub2">必修课</div>
-                        </div>
-                        <div class="nubbox">
-                            <span class="nub1" style="color: #A497FF">15</span>
-                            <div class="nub2">选修课</div>
-                        </div>
-                        <div class="nubbox">
-                            <div>
-                                <span class="nub1" style="color: #5DC988">50</span><span style="color: #5DC988;font-size: 14px">%</span>
-                            </div>   
-                            <div class="nub2">完成率</div>
-                        </div>
-                        <div class="nubbox">
-                            <div>
-                                <span class="nub1" style="color: #FF90AE">30</span><span style="color: #FF90AE;font-size: 14px">%</span>
-                            </div>   
-                            <div class="nub2">必修完成率</div>
-                        </div>
-                        <div class="nubbox">
-                            <div>
-                                <span class="nub1" style="color: #A497FF">30</span><span style="color: #A497FF;font-size: 14px">%</span>
-                            </div>   
-                            <div class="nub2">选修完成率</div>
-                        </div>
-                    </div>
-                    <div class="onerow"><div class="taskmain">阶段信息</div></div>
-                    <div class="stagemess">
-                        <div class="stage1">阶段1</div>
-                        <div class="stage2">阶段2</div>
-                    </div>
-                    <div class="stagesecond">
-                        <div class="staname">阶段名称：</div>
-                        <div class="stamess">管理者进阶-腾飞班1第一阶段</div>
-                    </div>
-                    <div class="stagelast">
-                        <div class="stagepro">
-                            <a-progress type="dashboard" gapDegree="0"  :percent="50" :width="140" />
-                            <div class="protext">课程完成率</div>
-                        </div>
-                        <div class="stagepro">
-                            <a-progress type="dashboard" gapDegree="0" :percent="50" :width="140" />
-                            <div class="protext">考试通过率</div>
-                        </div>
-                        <div class="stagepro" style="margin-right: 0">
-                            <a-progress type="dashboard" gapDegree="0" :percent="50" :width="140" />
-                            <div class="protext">作业合格率</div>
-                        </div>
-                        <div class="proright">
-                            <div class="pronub" style="margin-left: 280px">10</div>
-                            <div class="proright1">
-                                <span class="textpro">阶段任务总数</span>
-                                <a-progress :percent="50" style="width: 369px" />
-                            </div>
-                            <div class="pronub" style="margin-left: 206px">5</div>
-                            <div class="proright1">
-                                <span class="textpro">必修课</span>
-                                <a-progress :percent="25" style="width: 369px"/>
-                            </div>
-                            <div class="pronub" style="margin-left: 142px">1</div>
-                            <div class="proright1">
-                                <span class="textpro">选修课</span>
-                                <a-progress :percent="5" style="width: 369px"/>
-                            </div>
-                        </div>
-                    </div>
+      <a-tabs
+        class="tab"
+        v-model:activeKey="activeKey"
+        size="large"
+        :tabBarStyle="{ marginLeft: '10px', marginTop: '5px' }"
+      >
+        <a-tab-pane key="1" tab="概览">
+          <div class="split"></div>
+          <!-- 概览（无数据） -->
+          <div>
+            <div class="onerow">
+              <div class="taskmain">快速创建项目详情</div>
+            </div>
+            <div class="second">
+              <div
+                class="taskbox"
+                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>
-                <!-- 概览（有数据） -->
-            </a-tab-pane>
-            <a-tab-pane key="2" tab="任务" force-render>
-                <div class="split"></div>
-                <div class="onerow">
-                    <div class="taskmain">任务大纲</div>
-                    <button class="btn">批量面授报名</button>
-                    <router-link to="/taskadd" class="edit">
-                        <img class="editimg" src="../../assets/images/projectadd/edit.png"/>
-                        <span class="editext">编辑</span>
-                    </router-link>
+                <div class="photo">
+                  <img src="../../assets/images/taskpage/picture1.png" />
                 </div>
-                <div class="stage">
-                    <span class="stageimg"><img src="../../assets/images/projectadd/open.png"/></span>
-                    <span class="stagename">阶段1腾飞班阶级1</span>
+                <div class="rightt">
+                  <img src="../../assets/images/taskpage/right1.png" />
                 </div>
-                <div class="course">
-                    <div class="first">
-                        <div class="icon"><img src="../../assets/images/leveladd/zai.png"/></div>
-                        <div>
-                            <div class="iconame">「在线」</div>
-                            <div class="icontext">时间管理</div>
-                        </div>
-                    </div>
-                    <div class="type">
-                        <div class="typename">选修</div>
-                    </div>
-                    <div class="time">
-                        <div class="timetext">开始时间</div>
-                        <div class="timetext">2022-09-16 14:03</div>
-                    </div>
-                    <div class="progress">
-                        <div class="progresstext">25/50人</div>
-                        <div style="display: flex">
-                            <a-progress :showInfo="false" :percent="50" strokeColor="#FFC067" trailColor="rgba(253, 209, 98, 0.2)"/>
-                            <span class="progresstext" style="margin-left: 10px">50%</span>
-                        </div>
-                    </div>
-                    <div class="operations">
-                       
-                        <div class="operation">管理</div>
-                        
-                    </div>
+                <div class="centerbox" style="color: rgba(255, 182, 78, 1)">
+                  添加任务
                 </div>
-                <div class="course">
-                    <div class="first">
-                        <div class="icon"><img src="../../assets/images/leveladd/zhi.png"/></div>
-                        <div>
-                            <div class="iconame">「直播」</div>
-                            <div class="icontext">管理直播间</div>
-                        </div>
-                    </div>
-                    <div class="type">
-                        <div class="typename1">必修</div>
-                    </div>
-                    <div class="time">
-                        <div class="timetext">开始时间</div>
-                        <div class="timetext">2022-09-16 14:03</div>
-                    </div>
-                    <div class="progress">
-                        <div class="progresstext">0/50人</div>
-                        <div style="display: flex">
-                            <a-progress :showInfo="false" :percent="0" strokeColor="#FFC067" trailColor="rgba(253, 209, 98, 0.2)"/>
-                            <span class="progresstext" style="margin-left: 10px">0%</span>
-                        </div>
-                    </div>
-                    <div class="operations">
-                        <div class="operation">考勤</div>
-                        <div class="operation">管理</div>
-                        <div class="operation">二维码</div>
-                    </div>
+                <div class="centermain">快速添加任务/阶段</div>
+              </div>
+              <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="course">
-                    <div class="first">
-                        <div class="icon"><img src="../../assets/images/leveladd/mian.png"/></div>
-                        <div>
-                            <div class="iconame">「面授」</div>
-                            <div class="icontext">管理面授课</div>
-                        </div>
-                    </div>
-                    <div class="type">
-                        <div class="typename">选修</div>
-                    </div>
-                    <div class="time">
-                        <div class="timetext">开始时间</div>
-                        <div class="timetext">2022-09-16 14:03</div>
-                    </div>
-                    <div class="progress">
-                        <div class="progresstext">0/50人</div>
-                        <div style="display: flex">
-                            <a-progress :showInfo="false" :percent="0" strokeColor="#FFC067" trailColor="rgba(253, 209, 98, 0.2)"/>
-                            <span class="progresstext" style="margin-left: 10px">0%</span>
-                        </div>
-                    </div>
-                    <div class="operations">
-                        <div class="operation">学员</div>
-                        <div class="operation">管理</div>
-                        <div class="operation">二维码</div>
-                    </div>
+                <div class="photo">
+                  <img src="../../assets/images/taskpage/picture2.png" />
                 </div>
-                <div class="course">
-                    <div class="first">
-                        <div class="icon"><img src="../../assets/images/leveladd/huo.png"/></div>
-                        <div>
-                            <div class="iconame">「活动」</div>
-                            <div class="icontext">管理活动</div>
-                        </div>
-                    </div>
-                    <div class="type">
-                        <div class="typename1">必修</div>
-                    </div>
-                    <div class="time">
-                        <div class="timetext">开始时间</div>
-                        <div class="timetext">2022-09-16 14:03</div>
-                    </div>
-                    <div class="progress">
-                        <div class="progresstext">0/50人</div>
-                        <div style="display: flex">
-                            <a-progress :showInfo="false" :percent="0" strokeColor="#FFC067" trailColor="rgba(253, 209, 98, 0.2)"/>
-                            <span class="progresstext" style="margin-left: 10px">0%</span>
-                        </div>
-                    </div>
-                    <div class="operations">
-                        <div class="operation">考勤</div>
-                        <div class="operation">管理</div>
-                        <div class="operation">二维码</div>
-                    </div>
+                <div class="rightt">
+                  <img src="../../assets/images/taskpage/right2.png" />
                 </div>
-                <div class="course">
-                    <div class="first">
-                        <div class="icon"><img src="../../assets/images/leveladd/zuo.png"/></div>
-                        <div>
-                            <div class="iconame">「作业」</div>
-                            <div class="icontext">管理者作业</div>
-                        </div>
-                    </div>
-                    <div class="type">
-                        <div class="typename">选修</div>
-                    </div>
-                    <div class="time">
-                        <div class="timetext">开始时间</div>
-                        <div class="timetext">2022-09-16 14:03</div>
-                    </div>
-                    <div class="progress">
-                        <div class="progresstext">0/50人</div>
-                        <div style="display: flex">
-                            <a-progress :showInfo="false" :percent="0" strokeColor="#FFC067" trailColor="rgba(253, 209, 98, 0.2)"/>
-                            <span class="progresstext" style="margin-left: 10px">0%</span>
-                        </div>
-                    </div>
-                    <div class="operations">
-                        
-                        <div class="operation">管理</div>
-                        
-                    </div>
+                <div class="centerbox" style="color: rgba(78, 166, 255, 1)">
+                  添加学员
                 </div>
-                <div class="course">
-                    <div class="first">
-                        <div class="icon"><img src="../../assets/images/leveladd/kao.png"/></div>
-                        <div>
-                            <div class="iconame">「考试」</div>
-                            <div class="icontext">管理者考试</div>
-                        </div>
-                    </div>
-                    <div class="type">
-                        <div class="typename">选修</div>
-                    </div>
-                    <div class="time">
-                        <div class="timetext">开始时间</div>
-                        <div class="timetext">2022-09-16 14:03</div>
-                    </div>
-                    <div class="progress">
-                        <div class="progresstext">0/50人</div>
-                        <div style="display: flex">
-                            <a-progress :showInfo="false" :percent="0" strokeColor="#FFC067" trailColor="rgba(253, 209, 98, 0.2)"/>
-                            <span class="progresstext" style="margin-left: 10px">0%</span>
-                        </div>
-                    </div>
-                    <div class="operations">
-                        
-                        <div class="operation">管理</div>
-                        
-                    </div>
+                <div class="centermain">快速添加学员</div>
+              </div>
+              <div
+                class="taskbox"
+                @click="showModal"
+                style="
+                  background: linear-gradient(
+                    180deg,
+                    rgba(229, 246, 236, 1) 100%,
+                    rgba(238, 249, 243, 1) 100%
+                  );
+                "
+              >
+                <div class="leftt">
+                  <img src="../../assets/images/taskpage/left3.png" />
                 </div>
-                <div class="stage" style="margin-top: 0">
-                    <span class="stageimg"><img src="../../assets/images/projectadd/close.png"/></span>
-                    <span class="stagename">阶段2 腾飞班阶级2</span>
+                <div class="photo">
+                  <img src="../../assets/images/taskpage/picture3.png" />
                 </div>
-                <div style="display: flex; height: 20px"></div>
-            </a-tab-pane>
-            <a-tab-pane key="3" tab="学员">Content of Tab Pane 3</a-tab-pane>
-            <a-tab-pane key="4" tab="公告">Content of Tab Pane 3</a-tab-pane>
-            <a-tab-pane key="5" tab="项目积分">Content of Tab Pane 3</a-tab-pane>
-            <a-tab-pane key="6" tab="排行榜">Content of Tab Pane 3</a-tab-pane>
-            <a-tab-pane key="7" tab="设置">Content of Tab Pane 3</a-tab-pane>
-        </a-tabs>
-    </div>
-<!-- 项目发布弹窗 -->
-    <div>
-        <a-modal
-            v-model:visible="pubproject"
-            :title="null"
-            @ok="closeModal"
-            :footer="null"
-            :closable="false"
-            wrapClassName="pubproject"
-            width="679px"
-            height="437px"
-            >
-            <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 style="width: 15px;height: 15px"><img src="../../assets/images/taskpage/pub.png"/></span>
-                    <span class="headerLeftText" style="font-size: 16px;margin-left:10px">项目发布</span>
+                <div class="rightt">
+                  <img src="../../assets/images/taskpage/right3.png" />
                 </div>
-                <div style="cursor: pointer;margin-right:32px" @click="closeModal">
-                <img
-                    style="width: 22px; height: 22px"
-                    src="../../assets/images/basicinfo/close22.png"
+                <div class="centerbox" style="color: rgba(93, 201, 136, 1)">
+                  发布
+                </div>
+                <div class="centermain">快速发布项目</div>
+              </div>
+            </div>
+          </div>
+          <!-- 概览（无数据） -->
+          <!-- 概览（有数据） -->
+          <div style="display: none">
+            <div class="onerow"><div class="taskmain">项目概览</div></div>
+            <div class="second" style="margin-top: 0">
+              <div class="nubbox">
+                <span class="nub1">200</span>
+                <div class="nub2">总人数</div>
+              </div>
+              <div class="nubbox">
+                <span class="nub1" style="color: #ff90ae">15</span>
+                <div class="nub2">必修课</div>
+              </div>
+              <div class="nubbox">
+                <span class="nub1" style="color: #a497ff">15</span>
+                <div class="nub2">选修课</div>
+              </div>
+              <div class="nubbox">
+                <div>
+                  <span class="nub1" style="color: #5dc988">50</span
+                  ><span style="color: #5dc988; font-size: 14px">%</span>
+                </div>
+                <div class="nub2">完成率</div>
+              </div>
+              <div class="nubbox">
+                <div>
+                  <span class="nub1" style="color: #ff90ae">30</span
+                  ><span style="color: #ff90ae; font-size: 14px">%</span>
+                </div>
+                <div class="nub2">必修完成率</div>
+              </div>
+              <div class="nubbox">
+                <div>
+                  <span class="nub1" style="color: #a497ff">30</span
+                  ><span style="color: #a497ff; font-size: 14px">%</span>
+                </div>
+                <div class="nub2">选修完成率</div>
+              </div>
+            </div>
+            <div class="onerow"><div class="taskmain">阶段信息</div></div>
+            <div class="stagemess">
+              <div class="stage1">阶段1</div>
+              <div class="stage2">阶段2</div>
+            </div>
+            <div class="stagesecond">
+              <div class="staname">阶段名称：</div>
+              <div class="stamess">管理者进阶-腾飞班1第一阶段</div>
+            </div>
+            <div class="stagelast">
+              <div class="stagepro">
+                <a-progress
+                  type="dashboard"
+                  gapDegree="0"
+                  :percent="50"
+                  :width="140"
                 />
+                <div class="protext">课程完成率</div>
+              </div>
+              <div class="stagepro">
+                <a-progress
+                  type="dashboard"
+                  gapDegree="0"
+                  :percent="50"
+                  :width="140"
+                />
+                <div class="protext">考试通过率</div>
+              </div>
+              <div class="stagepro" style="margin-right: 0">
+                <a-progress
+                  type="dashboard"
+                  gapDegree="0"
+                  :percent="50"
+                  :width="140"
+                />
+                <div class="protext">作业合格率</div>
+              </div>
+              <div class="proright">
+                <div class="pronub" style="margin-left: 280px">10</div>
+                <div class="proright1">
+                  <span class="textpro">阶段任务总数</span>
+                  <a-progress :percent="50" style="width: 369px" />
                 </div>
+                <div class="pronub" style="margin-left: 206px">5</div>
+                <div class="proright1">
+                  <span class="textpro">必修课</span>
+                  <a-progress :percent="25" style="width: 369px" />
+                </div>
+                <div class="pronub" style="margin-left: 142px">1</div>
+                <div class="proright1">
+                  <span class="textpro">选修课</span>
+                  <a-progress :percent="5" style="width: 369px" />
+                </div>
+              </div>
             </div>
-            <div class="modalMain">
-                <div class="projectname">管理者进阶-腾飞班1</div>
-                <div class="projecttime"><span class="timeti">项目时间：</span><span class="timeme">2022/08/01-2022/08/30</span></div>
-                <div class="projectbox">
-                    <div class="promessage">
-                        <div class="messageme">项目信息</div>
-                        <div class="messagege">当前项目共0个阶段，0个任务</div>
-                    </div>
-                    <div class="stumessage">
-                        <div class="messageme1">学员信息</div>
-                        <div class="messagege1">项目共0名学员</div>
-                    </div>                   
-                </div>
-                <div class="send">
-                    <a-switch v-model:checked="checked" size="small" />
-                    <span class="sendtext">发送项目通知</span>
-                </div>
-                <div class="ckb">
-                    <a-checkbox v-model:checked="checked1"><span class="sendpeo">发给老师</span></a-checkbox>
-                    <a-checkbox v-model:checked="checked2"><span class="sendpeo">发给学员</span></a-checkbox>
-                </div>
-                <div class="pubtn">
-                    <a-button class="pubtn1" @click="closeModal">取消</a-button>
-                    <a-button class="pubtn2" @click="closeModal">发布</a-button>
-                </div>
+          </div>
+          <!-- 概览（有数据） -->
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="任务" force-render>
+          <div class="split"></div>
+          <div class="onerow">
+            <div class="taskmain">任务大纲</div>
+            <button class="btn">批量面授报名</button>
+            <router-link to="/taskadd" class="edit">
+              <img
+                class="editimg"
+                src="../../assets/images/projectadd/edit.png"
+              />
+              <span class="editext">编辑</span>
+            </router-link>
+          </div>
+          <div class="stage">
+            <span class="stageimg"
+              ><img src="../../assets/images/projectadd/open.png"
+            /></span>
+            <span class="stagename">阶段1腾飞班阶级1</span>
+          </div>
+          <div class="course">
+            <div class="first">
+              <div class="icon">
+                <img src="../../assets/images/leveladd/zai.png" />
+              </div>
+              <div>
+                <div class="iconame">「在线」</div>
+                <div class="icontext">时间管理</div>
+              </div>
             </div>
-        </a-modal>
+            <div class="type">
+              <div class="typename">选修</div>
+            </div>
+            <div class="time">
+              <div class="timetext">开始时间</div>
+              <div class="timetext">2022-09-16 14:03</div>
+            </div>
+            <div class="progress">
+              <div class="progresstext">25/50人</div>
+              <div style="display: flex">
+                <a-progress
+                  :showInfo="false"
+                  :percent="50"
+                  strokeColor="#FFC067"
+                  trailColor="rgba(253, 209, 98, 0.2)"
+                />
+                <span class="progresstext" style="margin-left: 10px">50%</span>
+              </div>
+            </div>
+            <div class="operations">
+              <div class="operation" style="cursor: pointer" @click="showTime">
+                管理
+              </div>
+            </div>
+          </div>
+          <div class="course">
+            <div class="first">
+              <div class="icon">
+                <img src="../../assets/images/leveladd/zhi.png" />
+              </div>
+              <div>
+                <div class="iconame">「直播」</div>
+                <div class="icontext">管理直播间</div>
+              </div>
+            </div>
+            <div class="type">
+              <div class="typename1">必修</div>
+            </div>
+            <div class="time">
+              <div class="timetext">开始时间</div>
+              <div class="timetext">2022-09-16 14:03</div>
+            </div>
+            <div class="progress">
+              <div class="progresstext">0/50人</div>
+              <div style="display: flex">
+                <a-progress
+                  :showInfo="false"
+                  :percent="0"
+                  strokeColor="#FFC067"
+                  trailColor="rgba(253, 209, 98, 0.2)"
+                />
+                <span class="progresstext" style="margin-left: 10px">0%</span>
+              </div>
+            </div>
+            <div class="operations">
+              <div class="operation">考勤</div>
+              <div class="operation">管理</div>
+              <div class="operation">二维码</div>
+            </div>
+          </div>
+          <div class="course">
+            <div class="first">
+              <div class="icon">
+                <img src="../../assets/images/leveladd/mian.png" />
+              </div>
+              <div>
+                <div class="iconame">「面授」</div>
+                <div class="icontext">管理面授课</div>
+              </div>
+            </div>
+            <div class="type">
+              <div class="typename">选修</div>
+            </div>
+            <div class="time">
+              <div class="timetext">开始时间</div>
+              <div class="timetext">2022-09-16 14:03</div>
+            </div>
+            <div class="progress">
+              <div class="progresstext">0/50人</div>
+              <div style="display: flex">
+                <a-progress
+                  :showInfo="false"
+                  :percent="0"
+                  strokeColor="#FFC067"
+                  trailColor="rgba(253, 209, 98, 0.2)"
+                />
+                <span class="progresstext" style="margin-left: 10px">0%</span>
+              </div>
+            </div>
+            <div class="operations">
+              <div class="operation">学员</div>
+              <div class="operation" style="cursor: pointer" @click="showFace">
+                管理
+              </div>
+              <div class="operation">二维码</div>
+            </div>
+          </div>
+          <div class="course">
+            <div class="first">
+              <div class="icon">
+                <img src="../../assets/images/leveladd/huo.png" />
+              </div>
+              <div>
+                <div class="iconame">「活动」</div>
+                <div class="icontext">管理活动</div>
+              </div>
+            </div>
+            <div class="type">
+              <div class="typename1">必修</div>
+            </div>
+            <div class="time">
+              <div class="timetext">开始时间</div>
+              <div class="timetext">2022-09-16 14:03</div>
+            </div>
+            <div class="progress">
+              <div class="progresstext">0/50人</div>
+              <div style="display: flex">
+                <a-progress
+                  :showInfo="false"
+                  :percent="0"
+                  strokeColor="#FFC067"
+                  trailColor="rgba(253, 209, 98, 0.2)"
+                />
+                <span class="progresstext" style="margin-left: 10px">0%</span>
+              </div>
+            </div>
+            <div class="operations">
+              <div class="operation">考勤</div>
+              <div class="operation">管理</div>
+              <div class="operation">二维码</div>
+            </div>
+          </div>
+          <div class="course">
+            <div class="first">
+              <div class="icon">
+                <img src="../../assets/images/leveladd/zuo.png" />
+              </div>
+              <div>
+                <div class="iconame">「作业」</div>
+                <div class="icontext">管理者作业</div>
+              </div>
+            </div>
+            <div class="type">
+              <div class="typename">选修</div>
+            </div>
+            <div class="time">
+              <div class="timetext">开始时间</div>
+              <div class="timetext">2022-09-16 14:03</div>
+            </div>
+            <div class="progress">
+              <div class="progresstext">0/50人</div>
+              <div style="display: flex">
+                <a-progress
+                  :showInfo="false"
+                  :percent="0"
+                  strokeColor="#FFC067"
+                  trailColor="rgba(253, 209, 98, 0.2)"
+                />
+                <span class="progresstext" style="margin-left: 10px">0%</span>
+              </div>
+            </div>
+            <div class="operations">
+              <div class="operation">管理</div>
+            </div>
+          </div>
+          <div class="course">
+            <div class="first">
+              <div class="icon">
+                <img src="../../assets/images/leveladd/kao.png" />
+              </div>
+              <div>
+                <div class="iconame">「考试」</div>
+                <div class="icontext">管理者考试</div>
+              </div>
+            </div>
+            <div class="type">
+              <div class="typename">选修</div>
+            </div>
+            <div class="time">
+              <div class="timetext">开始时间</div>
+              <div class="timetext">2022-09-16 14:03</div>
+            </div>
+            <div class="progress">
+              <div class="progresstext">0/50人</div>
+              <div style="display: flex">
+                <a-progress
+                  :showInfo="false"
+                  :percent="0"
+                  strokeColor="#FFC067"
+                  trailColor="rgba(253, 209, 98, 0.2)"
+                />
+                <span class="progresstext" style="margin-left: 10px">0%</span>
+              </div>
+            </div>
+            <div class="operations">
+              <div class="operation">管理</div>
+            </div>
+          </div>
+          <div class="stage" style="margin-top: 0">
+            <span class="stageimg"
+              ><img src="../../assets/images/projectadd/close.png"
+            /></span>
+            <span class="stagename">阶段2 腾飞班阶级2</span>
+          </div>
+          <div style="display: flex; height: 20px"></div>
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="学员">
+                <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="9" tab="小组管理" force-render>
+                            <div class="group">
+                                <div class="groupleft">
+                                    <div class="groupname">小组名称：</div>
+                                    <a-input v-model:value="value" placeholder="请输入小组名称" />
+                                </div>
+                                <div class="groupright">
+                                    <div class="btn1">
+                                        <img src="../../assets/images/courseManage/add0.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">
+                                <div class="btn1" @click="showModal2">
+                                        <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 class="groupmain">
+                                <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.4500); cursor: pointer">. . .</span>
+                                                <div class="moreItems">
+                                                    <div class="sammo">编辑</div>
+                                                    <div class="sammo">删除</div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="leader">组长：小李</div>
+                                        <div class="grocenter">
+                                            <div class="leader1">进度</div>
+                                            <a-progress :percent="55" />
+                                        </div>
+                                        <div class="grofooter">
+                                            <div class="ftext">组员名单 ></div>
+                                            <div></div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="groupbox">
+
+                                </div>
+                            </div>
+                        </a-tab-pane>
+                    </a-tabs>
+                </div>
+        </a-tab-pane>
+        <a-tab-pane key="4" tab="公告">Content of Tab Pane 3</a-tab-pane>
+        <a-tab-pane key="5" tab="项目积分">Content of Tab Pane 3</a-tab-pane>
+        <a-tab-pane key="6" tab="排行榜">Content of Tab Pane 3</a-tab-pane>
+        <a-tab-pane key="7" tab="设置">Content of Tab Pane 3</a-tab-pane>
+      </a-tabs>
     </div>
-<!-- 项目发布弹窗 -->
+    <!-- 时间管理抽屉 -->
+    <time-manage v-model:Tvisible="visible" />
+    <!-- 面授管理抽屉 -->
+    <face-manage v-model:Fvisible="FaceVisivle" />
+<!-- 概览（无数据）-项目发布弹窗 -->
+    <div>
+      <a-modal
+        v-model:visible="pubproject"
+        :title="null"
+        @ok="closeModal"
+        :footer="null"
+        :closable="false"
+        wrapClassName="pubproject"
+        width="679px"
+        height="437px"
+      >
+        <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 style="width: 15px; height: 15px"
+              ><img src="../../assets/images/taskpage/pub.png"
+            /></span>
+            <span
+              class="headerLeftText"
+              style="font-size: 16px; margin-left: 10px"
+              >项目发布</span
+            >
+          </div>
+          <div style="cursor: pointer; margin-right: 32px" @click="closeModal">
+            <img
+              style="width: 22px; height: 22px"
+              src="../../assets/images/basicinfo/close22.png"
+            />
+          </div>
+        </div>
+        <div class="modalMain">
+          <div class="projectname">管理者进阶-腾飞班1</div>
+          <div class="projecttime">
+            <span class="timeti">项目时间：</span
+            ><span class="timeme">2022/08/01-2022/08/30</span>
+          </div>
+          <div class="projectbox">
+            <div class="promessage">
+              <div class="messageme">项目信息</div>
+              <div class="messagege">当前项目共0个阶段，0个任务</div>
+            </div>
+            <div class="stumessage">
+              <div class="messageme1">学员信息</div>
+              <div class="messagege1">项目共0名学员</div>
+            </div>
+          </div>
+          <div class="send">
+            <a-switch v-model:checked="checked" size="small" />
+            <span class="sendtext">发送项目通知</span>
+          </div>
+          <div class="ckb">
+            <a-checkbox v-model:checked="checked1"
+              ><span class="sendpeo">发给老师</span></a-checkbox
+            >
+            <a-checkbox v-model:checked="checked2"
+              ><span class="sendpeo">发给学员</span></a-checkbox
+            >
+          </div>
+          <div class="pubtn">
+            <a-button class="pubtn1" @click="closeModal">取消</a-button>
+            <a-button class="pubtn2" @click="closeModal">发布</a-button>
+          </div>
+        </div>
+      </a-modal>
+    </div>
+<!-- 概览（无数据）-项目发布弹窗 -->
+<!-- 学员-创建小组弹窗 -->
+<div>
+      <a-modal
+        v-model:visible="stugroup"
+        :title="null"
+        @ok="closeModal2"
+        :footer="null"
+        :closable="false"
+        wrapClassName="doublepro"
+        width="624px"
+        height="476px"
+        >
+        <div class="modalHeader" 
+              style="width: 100%;height: 68px;display: flex;align-items: center;justify-content: space-between;background:linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2000) 100%)"
+            >
+            <div class="headerLeft" style="margin-left: 32px">
+              <span class="headerLeftText" style="font-size: 16px">创建多层项目</span>
+            </div>
+            <div style="cursor: pointer;margin-right:32px" @click="closeModal2">
+              <img
+                style="width: 22px; height: 22px"
+                src="../../assets/images/basicinfo/close22.png"
+              />
+            </div>
+        </div>
+        <div class="modalMain">
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">项目名称:</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                show-count :maxlength="30"
+                placeholder="请输入项目名称"
+                style="border-radius: 8px"
+              />
+            </div>
+          </div>
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">分类:</div>
+            <div class="in">
+              <a-select
+                v-model:value="value"
+                placeholder="四个养成"
+                style="border-radius: 8px;height: 40px"
+              />
+            </div>
+          </div>
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">项目经理:</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                placeholder="请选择项目经理"
+                style="border-radius: 8px;height: 40px"
+              />
+            </div>
+          </div>
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">资源归属:</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                style="border-radius: 8px;height: 40px"
+              />
+            </div>
+          </div>
+          <div class="pubtn">
+                    <a-button class="pubtn1" @click="closeModal2">取消</a-button>
+                    <a-button class="pubtn2" @click="closeModal2">确定</a-button>
+          </div>
+        </div>
+      </a-modal>
+</div>
+<!-- 学员-创建小组弹窗 -->
 </div>
 </template>
-<script>
+  <script>
 import { reactive, toRefs } from "vue";
+import TimeManage from "../../components/drawers/TimeManage";
+import FaceManage from "../../components/drawers/FaceManage";
 export default {
     name:"taskPage",
+    components: { TimeManage, FaceManage },
     setup(){
         const state = reactive({
+            visible: false, //时间管理
+            FaceVisivle: false, //面授管理
             pubproject: false,
+            stugroup: false,
             checked: false,
             checked1: true,
             checked2: false,
-            activeKey: '1',
+            activeKey: '3',
+            activeKey1: '9',
         });
         const showModal = () => {
             state.pubproject = true;
@@ -422,103 +740,214 @@ export default {
         const closeModal = () => {
             state.pubproject = false;       
         };
+        const showModal2 = () => {
+            state.stugroup = true;
+        };
+        const closeModal2 = () => {
+            state.stugroup = false;       
+        };
+        //新增
+    const showTime = () => {
+      console.log("点击管理");
+      state.visible = true;
+    };
+    //新增
+    const showFace = () => {
+      //面授管理的抽屉
+      // console.log("点击管理");
+      state.FaceVisivle = true;
+    };
         return {
             ...toRefs(state),
             showModal,
             closeModal,
-        };
-    },
-}
+            showModal2,
+            closeModal2,
+            showTime,
+      showFace,
+    };
+  },
+};
 </script>
-<style lang="scss">
+  <style lang="scss">
 .pubproject {
   .ant-modal {
     .ant-modal-body {
-      padding: 0;  
+      padding: 0;
       .modalMain {
         .projectname {
+          color: rgba(79, 81, 86, 1);
+          font-size: 14px;
+          line-height: 36px;
+          margin-left: 62px;
+          font-weight: 500;
+        }
+        .projecttime {
+          margin-left: 221px;
+          .timeti {
+            color: rgba(153, 155, 163, 1);
+            font-size: 14px;
+            line-height: 36px;
+          }
+          .timeme {
             color: rgba(79, 81, 86, 1);
             font-size: 14px;
             line-height: 36px;
-            margin-left: 62px;
-            font-weight: 500;
-        }
-        .projecttime {
-            margin-left: 221px;
-            .timeti {
-                color: rgba(153, 155, 163, 1);
-                font-size: 14px;
-                line-height: 36px;
-            }
-            .timeme {
-                color: rgba(79, 81, 86, 1);
-                font-size: 14px;
-                line-height: 36px;
-            }
+          }
         }
         .projectbox {
-            margin-top: 26px;
-            display: flex;
-            justify-content: center;
-            .promessage {
-                width: 280px;
-                height: 110px;
-                background:linear-gradient(180deg,rgba(254, 243, 221, 1),rgba(255, 250, 240, 1));
-                border-radius: 10px;
-                margin-right: 7px;
-                .messageme {
-                    color: rgba(255, 182, 78, 1);
-                    font-size: 14px;
-                    line-height: 36px;
-                    margin-top: 17px;
-                    margin-left: 30px;
-                }
-                .messagege {
-                    color: rgba(153, 155, 163, 1);
-                    font-size: 14px;
-                    margin-left: 30px;
-                }
+          margin-top: 26px;
+          display: flex;
+          justify-content: center;
+          .promessage {
+            width: 280px;
+            height: 110px;
+            background: linear-gradient(
+              180deg,
+              rgba(254, 243, 221, 1),
+              rgba(255, 250, 240, 1)
+            );
+            border-radius: 10px;
+            margin-right: 7px;
+            .messageme {
+              color: rgba(255, 182, 78, 1);
+              font-size: 14px;
+              line-height: 36px;
+              margin-top: 17px;
+              margin-left: 30px;
             }
-            .stumessage {
-                width: 280px;
-                height: 110px;
-                background:linear-gradient(180deg,rgba(221, 234, 255, 1),rgba(240, 248, 254, 1));
-                border-radius: 10px;
-                .messageme1 {
-                    color: rgba(78, 166, 255, 1);
-                    font-size: 14px;
-                    line-height: 36px;
-                    margin-top: 17px;
-                    margin-left: 30px;
-                }
-                .messagege1 {
-                    color: rgba(153, 155, 163, 1);
-                    font-size: 14px;
-                    margin-left: 30px;
-                }
+            .messagege {
+              color: rgba(153, 155, 163, 1);
+              font-size: 14px;
+              margin-left: 30px;
             }
+          }
+          .stumessage {
+            width: 280px;
+            height: 110px;
+            background: linear-gradient(
+              180deg,
+              rgba(221, 234, 255, 1),
+              rgba(240, 248, 254, 1)
+            );
+            border-radius: 10px;
+            .messageme1 {
+              color: rgba(78, 166, 255, 1);
+              font-size: 14px;
+              line-height: 36px;
+              margin-top: 17px;
+              margin-left: 30px;
+            }
+            .messagege1 {
+              color: rgba(153, 155, 163, 1);
+              font-size: 14px;
+              margin-left: 30px;
+            }
+          }
         }
         .send {
-            margin-top: 30px;
-            margin-left: 61px;
-            .sendtext {
-                margin-left: 11px;
-                color: rgba(109, 117, 132, 1);
-                font-size: 14px;
-            }
+          margin-top: 30px;
+          margin-left: 61px;
+          .sendtext {
+            margin-left: 11px;
+            color: rgba(109, 117, 132, 1);
+            font-size: 14px;
+          }
         }
         .ckb {
-            margin-top: 20px;
-            margin-left: 62px;
-            .sendpeo {
-                color: rgba(109, 117, 132, 1);
-                font-size: 14px;
-            }
-            .ant-checkbox-inner {
-                border-radius: 4px;
-            }
+          margin-top: 20px;
+          margin-left: 62px;
+          .sendpeo {
+            color: rgba(109, 117, 132, 1);
+            font-size: 14px;
+          }
+          .ant-checkbox-inner {
+            border-radius: 4px;
+          }
         }
         .pubtn {
+          display: flex;
+          justify-content: center;
+          margin-top: 25px;
+          //margin-bottom: 29px;
+          .pubtn1 {
+            width: 100px;
+            height: 40px;
+            margin-right: 16px;
+            margin-bottom: 29px;
+            border: 1px solid #409eff;
+            border-radius: 4px;
+            color: rgba(78, 166, 255, 1);
+            font-size: 14px;
+            //line-height: 36px;
+            align-items: center;
+            background: rgba(255, 255, 255, 1);
+          }
+          .pubtn2 {
+            width: 100px;
+            height: 40px;
+            margin-bottom: 29px;
+            border: 1px solid #409eff;
+            border-radius: 4px;
+            color: #ffffff;
+            font-size: 14px;
+            align-items: center;
+            //line-height: 36px;
+            background: #409eff;
+          }
+        }
+      }
+    }
+  }
+}
+.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;
@@ -554,51 +983,51 @@ export default {
   }
 }
 .taskpage {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  //position: relative;
+  .addhead {
     width: 100%;
+    height: 130px;
+    // background-color: lightgreen;
     display: flex;
-    flex-direction: column;
-    //position: relative;
-    .addhead {
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    .leftimg {
+      width: 151px;
+      height: 100px;
+      border: 10px solid #e7f2ff;
+      border-radius: 8px;
+      margin-left: 20px;
+      .img {
         width: 100%;
-        height: 130px;
-        // background-color: lightgreen;
+        height: 100%;
+      }
+    }
+    .imgfor {
+      margin-left: 32px;
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      .forz {
+        color: #363636;
+        font-weight: 600;
+        font-size: 16px;
+      }
+      .fort {
         display: flex;
-        justify-content: space-between;
-        align-items: center;
-        position: relative;
-        .leftimg {
-        width: 151px;
-        height: 100px;
-        border: 10px solid #e7f2ff;
-        border-radius: 8px;
+        flex-wrap: wrap;
+        color: #878b92;
+        font-size: 14px;
+        margin-top: 2px;
+      }
+    }
+    @media screen and (max-width: 1030px) {
+      .imgfor {
         margin-left: 20px;
-        .img {
-            width: 100%;
-            height: 100%;
-        }
-        }
-        .imgfor {
-            margin-left: 32px;
-            display: flex;
-            flex: 1;
-            flex-direction: column;
-            .forz {
-                color: #363636;
-                font-weight: 600;
-                font-size: 16px;
-            }
-            .fort {
-                display: flex;
-                flex-wrap: wrap;
-                color: #878b92;
-                font-size: 14px;
-                margin-top: 2px;
-            }
-        }
-        @media screen and (max-width: 1030px) {
-        .imgfor {
-            margin-left: 20px;
-        }
+      }
     }
     .right {
       // width: 500px;
@@ -706,358 +1135,572 @@ export default {
       }
     }
   }
-    .tableBox {
-        margin: 20px 38px 30px;
-        .ant-table-thead > tr > th {
-        font-size: 14px;
-        font-weight: 400;
+  .tableBox {
+    margin: 20px 38px 30px;
+    .ant-table-thead > tr > th {
+      font-size: 14px;
+      font-weight: 400;
+      color: #999ba3;
+      line-height: 36px;
+      padding: 5px 16px;
+      background-color: #eff4fc;
+    }
+  }
+  .split {
+    width: 100%;
+    height: 20px;
+    background-color: #edf0f5;
+  }
+  .content {
+    //display: flex;
+    //margin: 0 37px;
+    .ant-tabs-nav-wrap {
+      margin-left: 30px;
+    }
+    .onerow {
+      //width: 100%;
+      display: flex;
+      height: 40px;
+      position: relative;
+      margin-top: 15px;
+      margin-left: 38px;
+      //margin-right: 38px;
+      .taskmain {
+        font-size: 18px;
+        padding-top: 7px;
+        color: #000000;
+      }
+      .btn {
+        position: absolute;
+        top: 0;
+        right: 168px;
+        background-color: #409eff;
+        width: 130px;
+        height: 40px;
+        border-radius: 8px;
+        border: 1px solid #409eff;
+        color: #ffffff;
+        cursor: pointer;
+      }
+      .edit {
+        position: absolute;
+        right: 48px;
+        top: 0;
+        color: #409eff;
+        width: 100px;
+        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/edit1.png");
+        }
+      }
+    }
+    .second {
+      display: flex;
+      justify-content: left;
+      flex-wrap: wrap;
+      margin-top: 40px;
+      margin-left: 20px;
+      .nubbox {
+        width: 253px;
+        height: 116px;
+        margin-top: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background: #fafbfc;
+        border-radius: 10px;
+        margin-left: 15px;
+        .nub1 {
+          color: #ffb54a;
+          font-size: 30px;
+          font-weight: 700;
+        }
+        .nub2 {
+          color: #6d7584;
+          font-size: 14px;
+        }
+      }
+      .taskbox {
+        width: 412px;
+        height: 160px;
+        border-radius: 10px;
+        position: relative;
+        margin-left: 68px;
+        margin-bottom: 40px;
+        cursor: pointer;
+        .leftt {
+          position: absolute;
+          top: 18px;
+          left: 0;
+        }
+        .photo {
+          position: absolute;
+          top: 42px;
+          left: 37px;
+        }
+        .rightt {
+          position: absolute;
+          top: 69px;
+          right: 26px;
+        }
+        .centerbox {
+          position: absolute;
+          top: 52px;
+          left: 145px;
+          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;
+        }
+      }
+    }
+    .stagemess {
+      display: flex;
+      margin-left: 38px;
+      .stage1 {
+        width: 100px;
+        height: 33px;
+        text-align: center;
+        line-height: 34px;
+        border-radius: 6px;
+        color: #ffffff;
+        font-size: 16px;
+        background: #4ea6ff;
+        margin-right: 10px;
+        margin-top: 19px;
+        cursor: pointer;
+      }
+      .stage2 {
+        width: 100px;
+        height: 33px;
+        text-align: center;
+        line-height: 34px;
+        border-radius: 6px;
+        border: 1px solid #ebeef3;
+        color: #000000;
+        font-size: 16px;
+        background: #ffffff;
+        margin-right: 10px;
+        margin-top: 19px;
+        cursor: pointer;
+      }
+    }
+    .stagesecond {
+      display: flex;
+      margin-left: 39px;
+      margin-top: 29px;
+      .staname {
         color: #999ba3;
+        font-size: 14px;
+      }
+      .stamess {
+        color: #4f5156;
+        font-size: 14px;
+      }
+    }
+    .stagelast {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      margin-bottom: 55px;
+      .stagepro {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 55px;
+        margin-right: 120px;
+        .ant-progress-circle-path {
+          stroke: #4ea6ff;
+        }
+        .ant-progress-text {
+          color: #4ea6ff;
+          font-weight: 700;
+        }
+        .protext {
+          color: #6d7584;
+          font-size: 14px;
+          margin-top: 25px;
+        }
+      }
+      .proright {
+        width: 500px;
+        margin-top: 55px;
+        margin-left: 50px;
+        .ant-progress-bg {
+          height: 24px !important;
+          background: #4ea6ff;
+        }
+        .ant-progress-inner {
+          height: 24px;
+        }
+        .pronub {
+          color: #4ea6ff;
+          font-size: 14px;
+          margin: 5px 0;
+        }
+        .proright1 {
+          display: flex;
+          justify-content: right;
+          .textpro {
+            color: #6d7584;
+            font-size: 14px;
+            margin-right: 20px;
+          }
+          .ant-progress-text {
+            color: #4ea6ff;
+            font-size: 14px;
+            font-weight: 700;
+          }
+        }
+      }
+    }
+    .stage {
+      display: flex;
+      height: 49px;
+      background-color: #eff4fc;
+      align-items: center;
+      margin-top: 20px;
+      margin-left: 38px;
+      margin-right: 38px;
+      .stageimg {
+        margin-left: 31px;
+      }
+      .stagename {
+        color: #409eff;
+        font-size: 16px;
+        padding-left: 9px;
         line-height: 36px;
-        padding: 5px 16px;
-        background-color: #eff4fc;
-        }
-    
+      }
     }
-    .split {
-        width: 100%;
-        height: 20px;
-        background-color: #edf0f5;
+    .course {
+      //width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      padding: 10px;
+      margin-left: 38px;
+      margin-right: 38px;
+      //margin: 0 12px;
+      border: 1px solid #f2f6fc;
+      .first {
+        //position: relative;
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+        //height: 71px;
+        margin-left: 12px;
+        margin-right: 50px;
+        .icon {
+          //position: absolute;
+        }
+        .iconame {
+          //position: absolute;
+          color: #4f5156;
+          font-size: 16px;
+        }
+        .icontext {
+          //positipn: absolute;
+          color: #999ba3;
+          font-size: 14px;
+          margin-left: 8px;
+          width: 83px;
+        }
+      }
+      .type {
+        //height: 71px;
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+        margin-right: 50px;
+        .typename {
+          width: 63px;
+          height: 23px;
+          color: #5dc988;
+          font-size: 14px;
+          background-color: #f2f6fc;
+          border-radius: 4px;
+          text-align: center;
+        }
+        .typename1 {
+          width: 63px;
+          height: 23px;
+          color: #f0f4fe;
+          font-size: 14px;
+          background-color: #5dc988;
+          border-radius: 4px;
+          text-align: center;
+        }
+      }
+      .time {
+        //height: 71px;
+        flex-grow: 1;
+        margin-right: 50px;
+        .timetext {
+          font-size: 14px;
+          color: #999ba3;
+        }
+      }
+      .progress {
+        width: 168px;
+        margin-left: 10px;
+        margin-right: 50px;
+        flex-grow: 1;
+        .progresstext {
+          color: #ffc067;
+          font-size: 14px;
+        }
+      }
+      .operations {
+        display: flex;
+        width: 200px;
+        //flex-grow: 1;
+        .operation {
+          color: #4ea6ff;
+          font-size: 14px;
+          padding: 10px;
+          margin-left: auto;
+        }
+      }
     }
-    .content {
-        //display: flex;
-        //margin: 0 37px;
-        .ant-tabs-nav-wrap {
-            margin-left: 30px;
-        }
-        .onerow {
-            //width: 100%;
+  }
+  .content3 {
+    margin-top: 20px;
+    .ant-tabs-tab-btn {
+      font-size: 18px;
+      font-weight: 700;
+    }
+    .group {
             display: flex;
-            height: 40px;
-            position: relative;
-            margin-top: 15px;
-            margin-left: 38px;
-            //margin-right: 38px;
-            .taskmain {
-                font-size: 18px;
-                padding-top: 7px;
-                color: #000000;
-            }
-            .btn {
-                position: absolute;
-                top: 0;
-                right: 168px;
-                background-color: #409EFF;
-                width: 130px;
-                height: 40px;
-                border-radius: 8px;
-                border: 1px solid #409EFF;
-                color: #FFFFFF;
-                cursor: pointer;
-            }
-            .edit {
-                position: absolute;
-                right: 48px;
-                top: 0;
-                color: #409EFF;
-                width: 100px;
-                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/edit1.png");
-                }
-            }
-        }
-        .second {
-            display: flex;
-            justify-content: left;
-            flex-wrap: wrap;
-            margin-top: 40px;
-            margin-left: 20px;
-            .nubbox {
-                width: 253px;
-                height: 116px;
-                margin-top: 20px;
+            justify-content: space-between;
+            .groupleft {
                 display: flex;
-                flex-direction: column;
-                justify-content: center;
                 align-items: center;
-                background: #FAFBFC;
-                border-radius: 10px;
-                margin-left: 15px;
-                .nub1 {
-                    color: #FFB54A;
-                    font-size: 30px;
-                    font-weight: 700;
-                }
-                .nub2 {
-                    color: #6D7584;
+                margin-left: 32px;
+                .groupname {
+                    height: 22px;
+                    width: 70px;
+                    color: #000000;
                     font-size: 14px;
                 }
-            }
-            .taskbox {
-                width: 412px;
-                height: 160px;
-                border-radius: 10px;
-                position: relative;
-                margin-left: 68px;
-                margin-bottom: 40px;
-                cursor: pointer;
-                .leftt {
-                    position: absolute;
-                    top: 18px;
-                    left: 0;
-                }
-                .photo {
-                    position: absolute;
-                    top: 42px;
-                    left: 37px;
-                }
-                .rightt {
-                    position: absolute;
-                    top: 69px;
-                    right: 26px;
-                }
-                .centerbox {
-                    position: absolute;
-                    top: 52px;
-                    left: 145px;
-                    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;
+                .ant-input {
+                    border-radius: 8px;
+                    width: 264px;
+                    height: 40px;
                 }
             }
-        }
-        .stagemess {
-            display: flex;
-            margin-left: 38px;
-            .stage1 {
-                width: 100px;
-                height: 33px;
-                text-align: center;
-                line-height: 34px;
-                border-radius: 6px;
-                color: #FFFFFF;
-                font-size: 16px;
-                background: #4EA6FF;
-                margin-right: 10px;
-                margin-top: 19px;
-                cursor: pointer;
-            }
-            .stage2 {
-                width: 100px;
-                height: 33px;
-                text-align: center;
-                line-height: 34px;
-                border-radius: 6px;
-                border: 1px solid #EBEEF3;
-                color: #000000;
-                font-size: 16px;
-                background: #FFFFFF;
-                margin-right: 10px;
-                margin-top: 19px;
-                cursor: pointer;
-            }
-        }
-        .stagesecond {
-            display: flex;
-            margin-left: 39px;
-            margin-top: 29px;
-            .staname {
-                color: #999BA3;
-                font-size: 14px;
-            }
-            .stamess {
-                color: #4F5156;
-                font-size: 14px;
-            }
-        }
-        .stagelast {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            margin-bottom: 55px;
-            .stagepro {
+            .groupright {
                 display: flex;
-                flex-direction: column;
-                align-items: center;
-                margin-top: 55px;
-                margin-right: 120px;
-                .ant-progress-circle-path {
-                    stroke: #4EA6FF;
-                }
-                .ant-progress-text {
-                    color: #4EA6FF;
-                    font-weight: 700;
-                }
-                .protext {
-                    color: #6D7584;
-                    font-size: 14px;
-                    margin-top: 25px;
-                }
-            }
-            .proright {
-                width: 500px;
-                margin-top: 55px;
-                margin-left: 50px;
-                .ant-progress-bg {
-                    height: 24px !important;
-                    background: #4EA6FF;
-                }
-                .ant-progress-inner {
-                    height: 24px;
-                }
-                .pronub {
-                    color: #4EA6FF;
-                    font-size: 14px;
-                    margin: 5px 0;
-                }
-                .proright1 {
+                .btn1 {
+                    width: 100px;
+                    height: 40px;
                     display: flex;
-                    justify-content: right;
-                    .textpro {
-                        color: #6D7584;
+                    align-items: center;
+                    justify-content: center;
+                    margin-right: 16px;
+                    border: 1px solid #409EFF;
+                    border-radius: 8px;
+                    background: #409EFF;
+                    cursor: pointer;
+                    .btn1text {
+                        color: #FFFFFF;
+                        margin-left: 5px;
                         font-size: 14px;
-                        margin-right: 20px;
                     }
-                    .ant-progress-text {
-                        color: #4EA6FF;
+                }
+                .btn2 {
+                    width: 100px;
+                    height: 40px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-right: 32px;
+                    border: 1px solid #409EFF;
+                    border-radius: 8px;
+                    cursor: pointer;
+                    background: #FFFFFF;
+                    .btn2text {
+                        color: #409EFF;
+                        margin-left: 5px;
                         font-size: 14px;
-                        font-weight: 700;
                     }
                 }
             }
         }
-        .stage {
-            display: flex;
-            height: 49px;
-            background-color: #EFF4FC;
-            align-items: center;
-            margin-top: 20px;
-            margin-left: 38px;
-            margin-right: 38px;
-            .stageimg {
-                margin-left: 31px;
-            }
-            .stagename {
-                color: #409EFF;
-                font-size: 16px;
-                padding-left: 9px;
-                line-height: 36px;
-            }
+    .second2 {
+      display: flex;
+      margin: 30px 0 0 32px;
+      .btn1 {
+        width: 130px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 16px;
+        border: 1px solid #409eff;
+        border-radius: 8px;
+        background: #409eff;
+        cursor: pointer;
+        .btn1text {
+          color: #ffffff;
+          margin-left: 5px;
+          font-size: 14px;
         }
-        .course {
-            //width: 100%;
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            padding: 10px;
-            margin-left: 38px;
-            margin-right: 38px;
-            //margin: 0 12px;
-            border: 1px solid #F2F6FC;
-            .first {  
-                //position: relative; 
-                display: flex;
-                flex-grow: 1;
-                align-items: center;
-                //height: 71px;
-                margin-left: 12px;
-                margin-right: 50px;
-                .icon {
-                    //position: absolute;
-                }            
-                .iconame {
-                    //position: absolute;
-                    color: #4F5156;
-                    font-size: 16px;
-                }
-                .icontext {
-                    //positipn: absolute;
-                    color: #999BA3;
-                    font-size: 14px;
-                    margin-left: 8px;
-                    width: 83px;
-                }
-            }
-            .type {
-                //height: 71px;
-                display: flex;
-                flex-grow: 1;
-                align-items: center;
-                margin-right: 50px;
-                .typename {
-                    width: 63px;
-                    height: 23px;
-                    color: #5DC988;
-                    font-size: 14px;
-                    background-color: #F2F6FC;
-                    border-radius: 4px;
-                    text-align: center;
-                }
-                .typename1 {
-                    width: 63px;
-                    height: 23px;
-                    color: #F0F4FE;
-                    font-size: 14px;
-                    background-color: #5DC988;
-                    border-radius: 4px;
-                    text-align: center;
-                }
-            }
-            .time {
-                //height: 71px; 
-                flex-grow: 1;
-                margin-right: 50px;
-                .timetext {
-                    font-size: 14px;
-                    color: #999BA3;
-                }
-            }
-            .progress {
-                width: 168px;
-                margin-left: 10px;
-                margin-right: 50px;
-                flex-grow: 1;
-                .progresstext {
-                    color: #FFC067;
-                    font-size: 14px;
-                }
-            }
-            .operations {
-                display: flex;
-                width: 200px;
-                //flex-grow: 1;
-                .operation {
-                    color: #4EA6FF;
-                    font-size: 14px;
-                    padding: 10px;
-                    margin-left: auto;
-                }
-            }
+      }
+      .btn2 {
+        width: 130px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 32px;
+        border: 1px solid #409eff;
+        border-radius: 8px;
+        cursor: pointer;
+        background: #ffffff;
+        .btn2text {
+          color: #409eff;
+          margin-left: 5px;
+          font-size: 14px;
         }
+      }
     }
+    .groupmain {
+            display: flex;
+            margin-left: 32px;
+            .groupbox {
+                width: 264px;
+                height: 181px;
+                display: flex;
+                justify-content: center;
+                border: 1px solid #E9E9E9;
+                box-shadow: 1px 1px 18px 1px rgba(0, 0, 0, 0.0500);
+                margin-top: 16px;
+                margin-right: 20px;
+                .grouptitle {
+                    display: flex;
+                    justify-content: space-between;
+                    margin-top: 5px;
+                    border-bottom: 1px solid rgba(232, 232, 232, 1);
+                    .goodgruop {
+                        color: rgba(0, 0, 0, 0.8500);
+                        font-size: 16px;
+                        line-height: 36px;
+                        font-weight: 600;
+                    } 
+                    .more {
+                        position: relative;
+                        //margin-right: 30px;
+                        height: 30px;
+                        display: flex;
+                        align-items: center;
+                        .moreItems {
+                        width: 76px;
+                        height: 80px;
+                        display: none;
+                        background: #ffffff;
+                        box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
+                        // border-radius: 3px;
+                        border: 0px solid #dcdcdc;
+                        position: absolute;
+                        left: -48px;
+                        top: 30px;
+                        z-index: 100;
+                        cursor: pointer;
+                        .sammo {
+                            text-align: center;
+                            margin-top: 12px;
+                            cursor: pointer;
+                        }
+                        .sammo:hover {
+                            color: #4ea6ff;
+                        }
+                        }
+                        .moreItems:hover {
+                        display: block;
+                        }
+                    }
+                    @media screen and (max-width: 1240px) {
+                        .line {
+                        margin-right: 10px;
+                        }
+                        .img1 {
+                        margin-right: 15px;
+                        }
+                        .img2 {
+                        margin-right: 10px;
+                        }
+                        .return {
+                        margin-right: 10px;
+                        }
+                        .pub {
+                        margin-right: 10px;
+                        }
+                        .more {
+                        margin-right: 10px;
+                        }
+                    }
+                    .more:hover .moreArrow {
+                        background-image: url("../../assets/images/navtop/up.png");
+                    }
+                    .more:hover .moreItems {
+                        display: block;
+                    }                  
+                }
+                .leader {
+                    color: rgba(0, 0, 0, 1);
+                    font-size: 14px;
+                    margin-top: 16px;
+                    //margin-left: 24px;
+                }
+                .grocenter {
+                    display: flex;
+                    margin-top: 14px;
+                    .leader1 {
+                        color: rgba(0, 0, 0, 1);
+                        font-size: 14px;
+                        width: 51px;
+                    }
+                    .ant-progress-outer {
+                        width: 170px;
+                    }
+                }
+                .grofooter {
+                    display: flex;
+                    justify-content: space-between;
+                    cursor: pointer;
+                    margin-top: 30px;
+                    .ftext {
+                        color: rgba(56, 139, 225, 1);
+                        font-size: 14px;
+                    }
+                }
+            }
+        }
+  }
 }
-</style>
\ No newline at end of file
+</style>
+  
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>