diff --git a/src/components/drawers/AddFaceteach.vue b/src/components/drawers/AddFaceteach.vue
index a7aeb56c..82581356 100644
--- a/src/components/drawers/AddFaceteach.vue
+++ b/src/components/drawers/AddFaceteach.vue
@@ -1,7 +1,7 @@
 <template>
   <a-drawer
     :visible="addfaceteachVisible"
-    class="drawerStyle"
+    class="drawerStyle addfaceteachDrawer"
     width="80%"
     title="添加面授"
     placement="right"
@@ -30,7 +30,7 @@
             </div>
             <div class="btnbox">
               <a-input
-                v-model:value="value2"
+                v-model:value="inputV1"
                 style="width: 384px; height: 32px"
                 placeholder="请输入小组名称"
               />
@@ -46,9 +46,14 @@
               </div>
               <span style="margin-right: 3px">选择课程：</span>
             </div>
-            <div class="btnbox">
+            <div class="btnbox" @click="showDrawerSelFacet">
               <button class="xkbtn">选择课程</button>
             </div>
+            <!-- 选择面授侧弹窗 -->
+            <div>
+              <sel-facet v-model:selfacetVisible="selfacetvisible" />
+            </div>
+            <!-- 选择面授侧弹窗 -->
           </div>
           <div class="main_item2">
             <div class="signbox">
@@ -56,7 +61,7 @@
             </div>
             <div class="textarea">
               <a-textarea
-                v-model:value="textareavalue"
+                v-model:value="textV1"
                 placeholder="请输入说明"
                 allow-clear
               />
@@ -74,7 +79,7 @@
             </div>
             <div class="btnbox">
               <a-input
-                v-model:value="value2"
+                v-model:value="inputV2"
                 style="width: 384px; height: 32px"
                 placeholder="请输入授课教师"
               />
@@ -108,7 +113,7 @@
             </div>
             <div class="btnbox">
               <a-input
-                v-model:value="value2"
+                v-model:value="inputV3"
                 style="width: 384px; height: 32px"
               />
               <span style="margin-left: 5px">分钟</span>
@@ -126,7 +131,7 @@
             </div>
             <div class="btnbox">
               <a-input
-                v-model:value="value2"
+                v-model:value="inputV4"
                 style="width: 384px; height: 32px"
                 placeholder="请输入上课地址"
               />
@@ -141,12 +146,12 @@
               <div class="setbox">
                 <div class="timerbox">
                   <span>开始前：</span>
-                  <a-input style="width: 88px; height: 32px"></a-input>
+                  <a-input style="width: 88px; height: 32px" :v-model:value="inputV5"></a-input>
                   <span style="color: #999999; margin-left: 8px">分钟</span>
                 </div>
                 <div class="timerbox">
                   <span>开始后：</span>
-                  <a-input style="width: 88px; height: 32px"></a-input>
+                  <a-input style="width: 88px; height: 32px" :v-model:value="inputV6"></a-input>
                   <span style="color: #999999; margin-left: 8px">分钟</span>
                 </div>
               </div>
@@ -154,7 +159,7 @@
               <div class="setbox">
                 <div class="timerbox">
                   <span>结束前：</span>
-                  <a-input style="width: 88px; height: 32px"></a-input>
+                  <a-input style="width: 88px; height: 32px" :v-model:value="inputV7"></a-input>
                   <span style="color: #999999; margin-left: 8px"
                     >分钟（提前签退则记为早退）</span
                   >
@@ -167,8 +172,12 @@
               <span style="margin-right: 3px">完成标准设置：</span>
             </div>
             <div class="btnbox">
-              <a-checkbox v-model:checked="checked">Checkbox</a-checkbox>
-              <a-checkbox v-model:checked="checked">Checkbox</a-checkbox>
+              <a-radio-group v-model:value="radioV1">
+                <a-radio v-model:checked="checked" :value="1">仅签到</a-radio>
+                <a-radio v-model:checked="checked" :value="2"
+                  >签到、签退全部完成</a-radio
+                >
+              </a-radio-group>
             </div>
           </div>
           <div class="main_item">
@@ -176,7 +185,9 @@
               <span style="margin-right: 3px">其他设置：</span>
             </div>
             <div class="btnbox">
-              <a-checkbox v-model:checked="checked">Checkbox</a-checkbox>
+              <a-checkbox v-model:checked="checked"
+                >学员请假后记为任务完成</a-checkbox
+              >
             </div>
           </div>
           <div class="main_item2">
@@ -184,8 +195,12 @@
               <span style="margin-right: 3px">现场参与：</span>
             </div>
             <div class="btnbox2">
-              <a-checkbox v-model:checked="checked">Checkbox</a-checkbox>
-              <a-checkbox v-model:checked="checked">Checkbox</a-checkbox>
+              <a-radio-group v-model:value="radioV2">
+                <a-radio v-model:checked="checked" :value="1">允许项目内人员临时到场参加</a-radio>
+                <a-radio v-model:checked="checked" :value="2"
+                  >允许项目外人员临时到场参加</a-radio
+                >
+              </a-radio-group>
             </div>
           </div>
           <div class="main_item2">
@@ -198,7 +213,42 @@
             </div>
           </div>
         </div>
-        <div class="main_right"></div>
+        <div class="main_right">
+          <div class="main_item">
+            <div class="signbox">
+              <span style="margin-right: 3px">配置作业：</span>
+            </div>
+            <div class="btnbox" @click="showDrawerAddHomework">
+              <button class="xkbtn">配置</button>
+            </div>
+            <!-- 添加作业侧弹窗 -->
+            <div>
+              <add-homework v-model:addhomeworkVisible="addhomeworkvisible" />
+            </div>
+            <!-- 添加作业侧弹窗 -->
+          </div>
+          <div class="main_item">
+            <div class="signbox">
+              <span style="margin-right: 3px">配置考试：</span>
+            </div>
+            <div class="btnbox" @click="showDrawerAddTest">
+              <button class="xkbtn">配置</button>
+            </div>
+            <!-- 添加考试侧弹窗 -->
+            <div>
+              <add-test v-model:addtestVisible="addtestvisible" />
+            </div>
+            <!-- 添加考试侧弹窗 -->
+          </div>
+          <div class="main_item">
+            <div class="signbox">
+              <span style="margin-right: 3px">附件：</span>
+            </div>
+            <div class="btnbox">
+              <button class="xkbtn">上传附件</button>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="main_btns">
         <button class="btn1">取消</button>
@@ -209,6 +259,9 @@
 </template>
 <script>
 import { reactive, toRefs, ref } from "vue";
+import SelFacet from "../../components/drawers/SelFacet.vue";
+import AddHomework from "../../components/drawers/AddHomework.vue";
+import AddTest from "../../components/drawers/AddTest.vue";
 const options1 = ref([
   {
     value: "value1",
@@ -277,6 +330,11 @@ const rowSelection = ref({
 });
 export default {
   name: "AddFaceteach",
+  components: {
+    SelFacet,
+    AddHomework,
+    AddTest,
+  },
   props: {
     addfaceteachVisible: {
       type: Boolean,
@@ -371,6 +429,19 @@ export default {
       currentPage: 1,
       tableDataTotal: 100,
       pageSize: 10,
+      selfacetvisible: false,
+      addhomeworkvisible: false,
+      addtestvisible: false,
+      inputV1: "",
+      inputV2: "",
+      inputV3: "",
+      inputV4: "",
+      inputV5: "",
+      inputV6: "",
+      inputV7: "",
+      testV1: "",
+      radioV1: "",
+      radioV2: "",
     });
     const closeDrawer = () => {
       ctx.emit("update:addfaceteachVisible", false);
@@ -378,13 +449,21 @@ export default {
     const afterVisibleChange = (bool) => {
       console.log("state", bool);
     };
-    // const showDrawerFaceteach = () => {
-    //   state.addfaceteachvisible = true;
-    // };
+    const showDrawerSelFacet = () => {
+      state.selfacetvisible = true;
+    };
+    const showDrawerAddHomework = () => {
+      state.addhomeworkvisible = true;
+    };
+    const showDrawerAddTest = () => {
+      state.addtestvisible = true;
+    };
     return {
       ...toRefs(state),
+      showDrawerSelFacet,
+      showDrawerAddHomework,
+      showDrawerAddTest,
       afterVisibleChange,
-      // showDrawerFaceteach,
       closeDrawer,
       options1,
       columns1,
@@ -394,11 +473,11 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .ant-table-striped :deep(.table-striped) td {
   background-color: #fafafa !important;
 }
-.drawerStyle {
+.addfaceteachDrawer {
   .drawerMain {
     .header {
       height: 73px;
@@ -418,7 +497,9 @@ export default {
       display: flex;
       justify-content: space-between;
       .main_left {
-        margin-right: 30px;
+        padding-right: 30px;
+        flex: 1;
+        border-right: 1px solid #e8e8e8;
         .main_item {
           display: flex;
           align-items: center;
@@ -476,7 +557,7 @@ export default {
               }
             }
           }
-          .btnbox2{
+          .btnbox2 {
             display: flex;
             flex-direction: column;
             justify-content: flex-start;
@@ -487,15 +568,42 @@ export default {
               background: #388be1;
               border-radius: 8px;
               border: 0;
-              margin-right:  16px 8px 32px 0;
+              margin-right: 16px 8px 32px 0;
               color: #fff;
+              margin-top: 16px;
+              margin-bottom: 60px;
             }
           }
         }
       }
       .main_right {
         width: 337px;
-        border-left: 1px solid #e8e8e8;
+        .main_item {
+          display: flex;
+          align-items: center;
+          margin-bottom: 32px;
+          .signbox {
+            width: 120px;
+            display: flex;
+            justify-content: end;
+            align-items: center;
+          }
+          .btnbox {
+            display: flex;
+            flex: 1;
+            align-items: center;
+            .xkbtn {
+              cursor: pointer;
+              width: 130px;
+              height: 40px;
+              background: #388be1;
+              border-radius: 8px;
+              border: 0;
+              margin-right: 8px;
+              color: #fff;
+            }
+          }
+        }
       }
     }
     .main_btns {
diff --git a/src/components/drawers/AddHomework.vue b/src/components/drawers/AddHomework.vue
new file mode 100644
index 00000000..300b05a2
--- /dev/null
+++ b/src/components/drawers/AddHomework.vue
@@ -0,0 +1,420 @@
+<template>
+  <a-drawer
+    :visible="addhomeworkVisible"
+    class="drawerStyle addhomeworkDrawer"
+    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_left">
+          <div class="main_item">
+            <div class="signbox">
+              <div class="sign">
+                <img
+                  src="@/assets/images/coursewareManage/asterisk.png"
+                  alt=""
+                />
+              </div>
+              <span style="margin-right: 3px">作业名称：</span>
+            </div>
+            <div class="btnbox">
+              <a-input
+                v-model:value="value2"
+                style="width: 384px; height: 32px"
+                placeholder="请输入作业名称"
+              />
+            </div>
+          </div>
+          <div class="main_item2">
+            <div class="signbox">
+              <div class="sign">
+                <img
+                  src="@/assets/images/coursewareManage/asterisk.png"
+                  alt=""
+                />
+              </div>
+              <span style="margin-right: 3px">作业要求：</span>
+            </div>
+            <div class="textarea">
+              <a-textarea
+                v-model:value="textareavalue"
+                placeholder="请输入作业名称"
+                allow-clear
+              />
+            </div>
+          </div>
+          <div class="main_item">
+            <div class="signbox">
+              <span style="margin-right: 3px">提交时间：</span>
+            </div>
+            <div class="btnbox">
+              <a-range-picker
+                :placeholder="['      开始时间', '        结束时间']"
+              />
+            </div>
+          </div>
+          <div class="main_item">
+            <div class="signbox">
+              <div class="sign">
+                <img
+                  src="@/assets/images/coursewareManage/enclosure.png"
+                  alt=""
+                />
+              </div>
+              <span style="margin-right: 3px">附件：</span>
+            </div>
+            <div class="btnbox">
+              <button class="xkbtn">上传附件</button>
+            </div>
+          </div>
+          <div class="main_item" style="margin-top:-25px;">
+            <div class="signbox">
+            </div>
+            <div class="btnbox">
+              <span style="color:#999999;">支持：pdf.ppt.pptx.doc.docx.xls.xlsx.jpeg.png.gif.zip</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="main_btns">
+        <button class="btn1">取消</button>
+        <button class="btn2">确定</button>
+      </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: "AddHomework",
+  // components: {
+  // },
+  props: {
+    addhomeworkVisible: {
+      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:addhomeworkVisible", false);
+    };
+    const afterVisibleChange = (bool) => {
+      console.log("state", bool);
+    };
+    return {
+      ...toRefs(state),
+      afterVisibleChange,
+      closeDrawer,
+      options1,
+      columns1,
+      rowSelection,
+      // change,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.ant-table-striped :deep(.table-striped) td {
+  background-color: #fafafa !important;
+}
+.addhomeworkDrawer {
+  .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 {
+      display: flex;
+      justify-content: space-between;
+      .main_left {
+        padding-right: 30px;
+        flex: 1;
+        border-right: 1px solid #e8e8e8;
+        .main_item {
+          display: flex;
+          align-items: center;
+          margin-bottom: 32px;
+          .signbox {
+            width: 120px;
+            display: flex;
+            justify-content: end;
+            align-items: center;
+            .sign {
+              margin-right: 5px;
+            }
+          }
+          .btnbox {
+            display: flex;
+            flex: 1;
+            align-items: center;
+            .xkbtn {
+              cursor: pointer;
+              width: 130px;
+              height: 40px;
+              background: #388be1;
+              border-radius: 8px;
+              border: 0;
+              margin-right: 8px;
+              color: #fff;
+            }
+          }
+        }
+        .main_item2 {
+          display: flex;
+          align-items: flex-start;
+          margin-bottom: 32px;
+          .signbox {
+            width: 120px;
+            display: flex;
+            justify-content: end;
+            align-items: center;
+            .sign {
+              margin-right: 5px;
+            }
+          }
+          .kqszbox {
+            .qdqtbox {
+              margin-left: 56px;
+            }
+            .setbox {
+              display: flex;
+              flex-wrap: wrap;
+              margin-top: 10px;
+              margin-bottom: 24px;
+              .timerbox {
+                margin-top: 6px;
+                margin-right: 32px;
+                display: flex;
+                align-items: center;
+                flex-wrap: nowrap;
+              }
+            }
+          }
+          .btnbox2 {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            .xkbtn {
+              cursor: pointer;
+              width: 130px;
+              height: 40px;
+              background: #388be1;
+              border-radius: 8px;
+              border: 0;
+              margin-right: 16px 8px 32px 0;
+              color: #fff;
+              margin-top: 16px;
+              margin-bottom: 60px;
+            }
+          }
+        }
+      }
+    }
+    .main_btns {
+      height: 72px;
+      width: 100%;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+      .btn1 {
+        width: 100px;
+        height: 40px;
+        border: 1px solid #4ea6ff;
+        border-radius: 8px;
+        color: #4ea6ff;
+        background-color: #fff;
+        cursor: pointer;
+      }
+      .btn2 {
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        background: #4ea6ff;
+        border-radius: 8px;
+        border: 0;
+        margin-left: 15px;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/drawers/AddOnline.vue b/src/components/drawers/AddOnline.vue
index 04fd69e1..040b47c6 100644
--- a/src/components/drawers/AddOnline.vue
+++ b/src/components/drawers/AddOnline.vue
@@ -1,7 +1,7 @@
 <template>
   <a-drawer
     :visible="addonlineVisible"
-    class="drawerStyle"
+    class="drawerStyle addonlineDrawer"
     width="80%"
     title="添加在线"
     placement="right"
@@ -294,165 +294,165 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
+<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: 12px;
-        flex-wrap: wrap;
-        .mi_ipts {
-          display: flex;
-          margin-bottom: 20px;
-          .mii_ipt {
-            display: flex;
-            align-items: center;
-            margin-right: 24px;
-            .ipt_name {
-              white-space: nowrap;
-            }
-          }
-        }
-        .mi_btns {
-          display: flex;
-          margin-left: 38px;
-          margin-bottom: 20px;
-          cursor: pointer;
-          .btn {
-            padding: 0px 26px 0px 26px;
-            height: 38px;
-            border-radius: 8px;
-            border: 1px solid rgba(64, 158, 255, 1);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-left: 14px;
-            flex-shrink: 0;
-            .search {
-              background-size: 100%;
-            }
-            .btnText {
-              font-size: 14px;
-              font-weight: 400;
-              line-height: 36px;
-              margin-left: 5px;
-            }
-          }
-          .btn1 {
-            background: rgb(64, 158, 255);
-            .search {
-              width: 15px;
-              height: 17px;
-              background-image: url("@/assets/images/coursewareManage/search0.png");
-            }
-            .btnText {
-              color: rgb(255, 255, 255);
-            }
-          }
-          .btn2 {
-            background: rgb(255, 255, 255);
-            .search {
-              width: 15px;
-              height: 17px;
-              background-image: url("@/assets/images/coursewareManage/reset1.png");
-            }
-            .btnText {
-              color: rgb(64, 158, 255);
-            }
-          }
-          .btn1:hover {
-            background: rgb(255, 255, 255);
-            .search {
-              background-image: url("@/assets/images/courseManage/search1.png");
-            }
-            .btnText {
-              color: #388be1;
-            }
-          }
-          .btn2:hover {
-            background: rgba(64, 158, 255, 1);
-            .search {
-              background-image: url("@/assets/images/courseManage/reset0.png");
-            }
-            .btnText {
-              color: #ffffff;
-            }
-          }
-        }
-      }
-      .main_notice {
+.addonlineDrawer {
+    .drawerMain {
+      .header {
+        height: 73px;
+        border-bottom: 1px solid #e8e8e8;
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin-bottom: 32px;
-        height: 40px;
-        background-color: #e9f6fe;
-        .mntc_left {
+        .headerTitle {
+          font-size: 18px;
+          font-weight: 600;
+          color: #333333;
+          line-height: 25px;
+          margin-left: 24px;
+        }
+      }
+      .contentMain {
+        .main_items {
           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%;
+          justify-content: space-between;
+          margin-bottom: 12px;
+          flex-wrap: wrap;
+          .mi_ipts {
+            display: flex;
+            margin-bottom: 20px;
+            .mii_ipt {
+              display: flex;
+              align-items: center;
+              margin-right: 24px;
+              .ipt_name {
+                white-space: nowrap;
+              }
+            }
+          }
+          .mi_btns {
+            display: flex;
+            margin-left: 38px;
+            margin-bottom: 20px;
+            cursor: pointer;
+            .btn {
+              padding: 0px 26px 0px 26px;
+              height: 38px;
+              border-radius: 8px;
+              border: 1px solid rgba(64, 158, 255, 1);
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin-left: 14px;
+              flex-shrink: 0;
+              .search {
+                background-size: 100%;
+              }
+              .btnText {
+                font-size: 14px;
+                font-weight: 400;
+                line-height: 36px;
+                margin-left: 5px;
+              }
+            }
+            .btn1 {
+              background: rgb(64, 158, 255);
+              .search {
+                width: 15px;
+                height: 17px;
+                background-image: url("@/assets/images/coursewareManage/search0.png");
+              }
+              .btnText {
+                color: rgb(255, 255, 255);
+              }
+            }
+            .btn2 {
+              background: rgb(255, 255, 255);
+              .search {
+                width: 15px;
+                height: 17px;
+                background-image: url("@/assets/images/coursewareManage/reset1.png");
+              }
+              .btnText {
+                color: rgb(64, 158, 255);
+              }
+            }
+            .btn1:hover {
+              background: rgb(255, 255, 255);
+              .search {
+                background-image: url("@/assets/images/courseManage/search1.png");
+              }
+              .btnText {
+                color: #388be1;
+              }
+            }
+            .btn2:hover {
+              background: rgba(64, 158, 255, 1);
+              .search {
+                background-image: url("@/assets/images/courseManage/reset0.png");
+              }
+              .btnText {
+                color: #ffffff;
+              }
+            }
           }
         }
-        .mntc_right {
+        .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%;
+        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;
+        }
       }
     }
-
-    .main_btns {
-      height: 72px;
-      width: 100%;
-      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/AddTest.vue b/src/components/drawers/AddTest.vue
new file mode 100644
index 00000000..eeaef62e
--- /dev/null
+++ b/src/components/drawers/AddTest.vue
@@ -0,0 +1,537 @@
+<template>
+  <a-drawer
+    :visible="addtestVisible"
+    class="drawerStyle addtestDrawer"
+    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_left">
+          <div class="main_item">
+            <div class="signbox">
+              <div class="sign">
+                <img
+                  src="@/assets/images/coursewareManage/asterisk.png"
+                  alt=""
+                />
+              </div>
+              <span style="margin-right: 3px">考试名称：</span>
+            </div>
+            <div class="btnbox">
+              <a-input
+                v-model:value="inputV1"
+                style="width: 424px; height: 32px"
+                placeholder="请输入考试名称"
+              />
+            </div>
+          </div>
+          <div class="main_item2">
+            <div class="signbox">
+              <span style="margin-right: 3px">考试说明：</span>
+            </div>
+            <div class="textarea">
+              <a-textarea
+                v-model:value="textV1"
+                placeholder="请输入考试说明"
+                allow-clear
+              />
+            </div>
+          </div>
+          <div class="main_item">
+            <div class="signbox">
+              <div class="sign">
+                <img
+                  src="@/assets/images/coursewareManage/asterisk.png"
+                  alt=""
+                />
+              </div>
+              <span style="margin-right: 3px">选择考试：</span>
+            </div>
+            <div class="btnbox">
+              <a-select
+                dropdownClassName="dropdown-style"
+                style="width: 424px"
+                placeholder="请输入考试名称"
+                :options="options1"
+                allowClear
+                showSearch
+              />
+            </div>
+          </div>
+          <div class="main_item">
+            <div class="signbox">
+              <div class="sign">
+                <img
+                  src="@/assets/images/coursewareManage/asterisk.png"
+                  alt=""
+                />
+              </div>
+              <span style="margin-right: 3px">考试时间：</span>
+            </div>
+            <div class="btnbox">
+              <a-range-picker
+                style="width: 424px"
+                :placeholder="['      开始时间', '        结束时间']"
+              />
+            </div>
+          </div>
+          <div class="main_item">
+            <div class="signbox">
+              <div class="sign">
+                <img
+                  src="@/assets/images/coursewareManage/asterisk.png"
+                  alt=""
+                />
+              </div>
+              <span style="margin-right: 3px">考试时长：</span>
+            </div>
+            <div class="btnbox">
+              <a-input
+                v-model:value="inputV2"
+                style="width: 388px; height: 32px"
+              />
+              <span style="margin-left: 5px">分钟</span>
+            </div>
+          </div>
+          <div class="main_item">
+            <div class="signbox">
+              <div class="sign">
+                <img
+                  src="@/assets/images/coursewareManage/asterisk.png"
+                  alt=""
+                />
+              </div>
+              <span style="margin-right: 3px">考试限制：</span>
+            </div>
+            <div class="btnbox">
+              <span style="margin-right: 8px">允许重复考试</span>
+              <a-input
+                v-model:value="inputV3"
+                style="width: 88px; height: 32px"
+              />
+              <span style="margin-left: 8px">次</span>
+              <span style="margin-left: 24px; color: #999999"
+                >-1表示无限制</span
+              >
+            </div>
+          </div>
+          <div class="main_item">
+            <div class="signbox">
+              <span style="margin-right: 3px">显示答案：</span>
+            </div>
+            <div class="btnbox">
+              <a-radio-group v-model:value="radioV1">
+                <a-radio v-model:checked="checked" :value="1">允许查看</a-radio>
+                <a-radio v-model:checked="checked" :value="2"
+                  >不允许查看</a-radio
+                >
+              </a-radio-group>
+            </div>
+          </div>
+          <div class="main_item">
+            <div class="signbox">
+              <span style="margin-right: 3px">显示解析：</span>
+            </div>
+            <div class="btnbox">
+              <a-radio-group v-model:value="radioV2">
+                <a-radio v-model:checked="checked" :value="1">允许查看</a-radio>
+                <a-radio v-model:checked="checked" :value="2"
+                  >不允许查看</a-radio
+                >
+              </a-radio-group>
+            </div>
+          </div>
+          <div class="main_item">
+            <div class="signbox">
+              <span style="margin-right: 3px">评分模式：</span>
+            </div>
+            <div class="btnbox">
+              <div class="btnbox">
+                <a-radio-group v-model:value="radioV3">
+                  <a-radio v-model:checked="checked" :value="1"
+                    >最高一次</a-radio
+                  >
+                  <a-radio v-model:checked="checked" :value="2"
+                    >最后一次</a-radio
+                  >
+                </a-radio-group>
+              </div>
+            </div>
+          </div>
+          <div class="main_item">
+            <div class="signbox">
+              <span style="margin-right: 3px">及格线：</span>
+            </div>
+            <div class="btnbox">
+              <a-input
+                v-model:value="value2"
+                style="width: 88px; height: 32px"
+              />
+              <span style="margin-left: 8px">分</span>
+            </div>
+          </div>
+          <div class="main_item">
+            <div class="signbox">
+              <span style="margin-right: 3px">试题排列：</span>
+            </div>
+            <div class="btnbox">
+              <a-radio-group v-model:value="radioV4">
+                <a-radio v-model:checked="checked" :value="1">试题乱序</a-radio>
+                <a-radio v-model:checked="checked" :value="2">试题排序</a-radio>
+                <a-radio v-model:checked="checked" :value="3">全部乱序</a-radio>
+              </a-radio-group>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="main_btns">
+        <button class="btn1">取消</button>
+        <button class="btn2">确定</button>
+      </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: "AddTest",
+  // components: {
+  // },
+  props: {
+    addtestVisible: {
+      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,
+      inputV1: "",
+      inputV2: "",
+      inputV3: "",
+      testV1: "",
+      radioV1: "",
+      radioV2: "",
+      radioV3: "",
+      radioV4: "",
+    });
+    const closeDrawer = () => {
+      ctx.emit("update:addtestVisible", false);
+    };
+    const afterVisibleChange = (bool) => {
+      console.log("state", bool);
+    };
+    return {
+      ...toRefs(state),
+      afterVisibleChange,
+      closeDrawer,
+      options1,
+      columns1,
+      rowSelection,
+      // change,
+    };
+  },
+};
+</script>
+  <style lang="scss">
+.ant-table-striped :deep(.table-striped) td {
+  background-color: #fafafa !important;
+}
+.addtestDrawer {
+  .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 {
+      display: flex;
+      justify-content: space-between;
+      .main_left {
+        padding-right: 30px;
+        flex: 1;
+        border-right: 1px solid #e8e8e8;
+        .main_item {
+          display: flex;
+          align-items: center;
+          margin-bottom: 32px;
+          .signbox {
+            width: 120px;
+            display: flex;
+            justify-content: end;
+            align-items: center;
+            .sign {
+              margin-right: 5px;
+            }
+          }
+          .btnbox {
+            display: flex;
+            flex: 1;
+            align-items: center;
+            .xkbtn {
+              cursor: pointer;
+              width: 130px;
+              height: 40px;
+              background: #388be1;
+              border-radius: 8px;
+              border: 0;
+              margin-right: 8px;
+              color: #fff;
+            }
+          }
+        }
+        .main_item2 {
+          display: flex;
+          align-items: flex-start;
+          margin-bottom: 32px;
+          .signbox {
+            width: 120px;
+            display: flex;
+            justify-content: end;
+            align-items: center;
+            .sign {
+              margin-right: 5px;
+            }
+          }
+          .kqszbox {
+            .qdqtbox {
+              margin-left: 56px;
+            }
+            .setbox {
+              display: flex;
+              flex-wrap: wrap;
+              margin-top: 10px;
+              margin-bottom: 24px;
+              .timerbox {
+                margin-top: 6px;
+                margin-right: 32px;
+                display: flex;
+                align-items: center;
+                flex-wrap: nowrap;
+              }
+            }
+          }
+          .btnbox2 {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            .xkbtn {
+              cursor: pointer;
+              width: 130px;
+              height: 40px;
+              background: #388be1;
+              border-radius: 8px;
+              border: 0;
+              margin-right: 16px 8px 32px 0;
+              color: #fff;
+              margin-top: 16px;
+              margin-bottom: 60px;
+            }
+          }
+        }
+      }
+    }
+    .main_btns {
+      height: 72px;
+      width: 100%;
+      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/EditOnline.vue b/src/components/drawers/EditOnline.vue
index 320cf968..38e68e6c 100644
--- a/src/components/drawers/EditOnline.vue
+++ b/src/components/drawers/EditOnline.vue
@@ -1,7 +1,7 @@
 <template>
   <a-drawer
     :visible="editonlineVisible"
-    class="drawerStyle"
+    class="drawerStyle editonlineDrawer"
     width="80%"
     title="添加在线"
     placement="right"
@@ -291,169 +291,169 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
+<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_item {
-        display: flex;
-        align-items: center;
-        margin-bottom: 32px;
-        .signbox {
-          display: flex;
-          align-items: center;
-          .sign {
-            margin-right: 5px;
-          }
-        }
-        .btnbox {
-          display: flex;
-          align-items: center;
-          .xkbtn {
-            cursor: pointer;
-            width: 130px;
-            height: 40px;
-            background: #388be1;
-            border-radius: 8px;
-            border: 0;
-            margin-right: 8px;
-            color: #fff;
-          }
-        }
-      }
-      .main_items {
+.editonlineDrawer {
+    .drawerMain {
+      .header {
+        height: 73px;
+        border-bottom: 1px solid #e8e8e8;
         display: flex;
         justify-content: space-between;
-        flex-wrap: wrap;
-        margin-bottom: 12px;
-        .mi_ipts {
+        align-items: center;
+        .headerTitle {
+          font-size: 18px;
+          font-weight: 600;
+          color: #333333;
+          line-height: 25px;
+          margin-left: 24px;
+        }
+      }
+      .contentMain {
+        .main_item {
           display: flex;
-          margin-bottom: 20px;
+          align-items: center;
+          margin-bottom: 32px;
+          .signbox {
+            display: flex;
+            align-items: center;
+            .sign {
+              margin-right: 5px;
+            }
+          }
+          .btnbox {
+            display: flex;
+            align-items: center;
+            .xkbtn {
+              cursor: pointer;
+              width: 130px;
+              height: 40px;
+              background: #388be1;
+              border-radius: 8px;
+              border: 0;
+              margin-right: 8px;
+              color: #fff;
+            }
+          }
+        }
+        .main_items {
+          display: flex;
+          justify-content: space-between;
           flex-wrap: wrap;
-          .mii_ipt {
+          margin-bottom: 12px;
+          .mi_ipts {
             display: flex;
-            align-items: center;
-            margin-right: 24px;
-            margin-bottom: 10px;
-            .ipt_name {
-              white-space: nowrap;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+            .mii_ipt {
+              display: flex;
+              align-items: center;
+              margin-right: 24px;
+              margin-bottom: 10px;
+              .ipt_name {
+                white-space: nowrap;
+              }
+            }
+          }
+          .mi_btns {
+            display: flex;
+            margin-left: 38px;
+            margin-bottom: 20px;
+            cursor: pointer;
+            .btn {
+              padding: 0px 26px 0px 26px;
+              height: 38px;
+              border-radius: 8px;
+              border: 1px solid rgba(64, 158, 255, 1);
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin-left: 14px;
+              flex-shrink: 0;
+              .search {
+                background-size: 100%;
+              }
+              .btnText {
+                font-size: 14px;
+                font-weight: 400;
+                line-height: 36px;
+                margin-left: 5px;
+              }
+            }
+            .btn1 {
+              background: rgb(64, 158, 255);
+              .search {
+                width: 15px;
+                height: 17px;
+                background-image: url("@/assets/images/coursewareManage/search0.png");
+              }
+              .btnText {
+                color: rgb(255, 255, 255);
+              }
+            }
+            .btn2 {
+              background: rgb(255, 255, 255);
+              .search {
+                width: 15px;
+                height: 17px;
+                background-image: url("@/assets/images/coursewareManage/reset1.png");
+              }
+              .btnText {
+                color: rgb(64, 158, 255);
+              }
+            }
+            .btn1:hover {
+              background: rgb(255, 255, 255);
+              .search {
+                background-image: url("@/assets/images/courseManage/search1.png");
+              }
+              .btnText {
+                color: #388be1;
+              }
+            }
+            .btn2:hover {
+              background: rgba(64, 158, 255, 1);
+              .search {
+                background-image: url("@/assets/images/courseManage/reset0.png");
+              }
+              .btnText {
+                color: #ffffff;
+              }
             }
           }
         }
-        .mi_btns {
-          display: flex;
-          margin-left: 38px;
-          margin-bottom: 20px;
+      }
+      .main_btns {
+        height: 72px;
+        width: 100%;
+        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;
-          .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;
-            }
-          }
+        }
+        .btn2 {
+          cursor: pointer;
+          width: 100px;
+          height: 40px;
+          background: #4ea6ff;
+          border-radius: 8px;
+          border: 0;
+          margin-left: 15px;
+          color: #fff;
         }
       }
     }
-    .main_btns {
-      height: 72px;
-      width: 100%;
-      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/SelFacet.vue b/src/components/drawers/SelFacet.vue
new file mode 100644
index 00000000..e3953cac
--- /dev/null
+++ b/src/components/drawers/SelFacet.vue
@@ -0,0 +1,423 @@
+<template>
+  <a-drawer
+    :visible="selfacetVisible"
+    class="drawerStyle selfacetDrawer"
+    width="80%"
+    title="添加在线"
+    placement="right"
+    @after-visible-change="afterVisibleChange"
+  >
+    <div class="drawerMain">
+      <div class="header">
+        <div class="headerTitle">选择面授</div>
+        <img
+          style="width: 29px; height: 29px; cursor: pointer"
+          src="../../assets/images/basicinfo/close.png"
+          @click="closeDrawer"
+        />
+      </div>
+      <div class="contentMain">
+        <div class="main_items">
+          <div class="mi_ipts">
+            <div class="mii_ipt">
+              <div class="ipt_name">课程编号：</div>
+              <div class="fi_input">
+                <a-input
+                  v-model:value="value1"
+                  style="width: 240px; height: 40px; border-radius: 8px"
+                  placeholder="请输入项目名称"
+                />
+              </div>
+            </div>
+            <div class="mii_ipt">
+              <div class="ipt_name">内容分类：</div>
+              <div class="select">
+                <a-select
+                  dropdownClassName="dropdown-style"
+                  style="width: 240px"
+                  placeholder="请选择"
+                  :options="options1"
+                  allowClear
+                  showSearch
+                />
+              </div>
+            </div>
+          </div>
+          <div class="mi_btns">
+            <div class="btn btn1">
+              <div class="search"></div>
+              <div class="btnText">搜索</div>
+            </div>
+            <div class="btn btn2">
+              <div class="search"></div>
+              <div class="btnText">重置</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="main_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>
+      <div class="main_btns">
+        <button class="btn1">取消</button>
+        <button class="btn2">确定</button>
+      </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: "SelFacet",
+  props: {
+    selfacetVisible: {
+      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:selfacetVisible", false);
+    };
+    const afterVisibleChange = (bool) => {
+      console.log("state", bool);
+    };
+    const showDrawerSelFacet = () => {
+      state.selfacetvisible = true;
+    };
+    return {
+      ...toRefs(state),
+      showDrawerSelFacet,
+      afterVisibleChange,
+      closeDrawer,
+      options1,
+      columns1,
+      rowSelection,
+      // change,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.ant-table-striped :deep(.table-striped) td {
+  background-color: #fafafa !important;
+}
+
+.selfacetDrawer {
+  .drawerMain {
+    .header {
+      height: 73px;
+      border-bottom: 1px solid #e8e8e8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .headerTitle {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 25px;
+        margin-left: 24px;
+      }
+    }
+    .contentMain {
+      .main_items {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 12px;
+        flex-wrap: wrap;
+        .mi_ipts {
+          display: flex;
+          margin-bottom: 20px;
+          .mii_ipt {
+            display: flex;
+            align-items: center;
+            margin-right: 24px;
+            .ipt_name {
+              white-space: nowrap;
+            }
+          }
+        }
+        .mi_btns {
+          display: flex;
+          margin-left: 38px;
+          margin-bottom: 20px;
+          cursor: pointer;
+          .btn {
+            padding: 0px 26px 0px 26px;
+            height: 38px;
+            border-radius: 8px;
+            border: 1px solid rgba(64, 158, 255, 1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-left: 14px;
+            flex-shrink: 0;
+            .search {
+              background-size: 100%;
+            }
+            .btnText {
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 36px;
+              margin-left: 5px;
+            }
+          }
+          .btn1 {
+            background: rgb(64, 158, 255);
+            .search {
+              width: 15px;
+              height: 17px;
+              background-image: url("@/assets/images/coursewareManage/search0.png");
+            }
+            .btnText {
+              color: rgb(255, 255, 255);
+            }
+          }
+          .btn2 {
+            background: rgb(255, 255, 255);
+            .search {
+              width: 15px;
+              height: 17px;
+              background-image: url("@/assets/images/coursewareManage/reset1.png");
+            }
+            .btnText {
+              color: rgb(64, 158, 255);
+            }
+          }
+          .btn1:hover {
+            background: rgb(255, 255, 255);
+            .search {
+              background-image: url("@/assets/images/courseManage/search1.png");
+            }
+            .btnText {
+              color: #388be1;
+            }
+          }
+          .btn2:hover {
+            background: rgba(64, 158, 255, 1);
+            .search {
+              background-image: url("@/assets/images/courseManage/reset0.png");
+            }
+            .btnText {
+              color: #ffffff;
+            }
+          }
+        }
+      }
+    }
+
+    .main_btns {
+      height: 72px;
+      width: 100%;
+      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