From 0e7e0ac11008d839cc179c8ed3bd8ae7df2c057e Mon Sep 17 00:00:00 2001
From: dongwug <guoys@dongwu-inc.com>
Date: Sat, 8 Oct 2022 18:28:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E8=AF=BE=E7=A8=8B?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=88=97=E8=A1=A81=EF=BC=88=E5=B7=AE?=
 =?UTF-8?q?=E5=AF=BC=E5=87=BA=E5=9B=BE=E6=A0=87=EF=BC=8C=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=EF=BC=89=E3=80=81=202=20=EF=BC=8C=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=E5=9C=A8=E7=BA=BF=E8=AF=BE=E7=A8=8B=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/coursewareManage/pc.png     | Bin 0 -> 317 bytes
 .../images/coursewareManage/search0.png       | Bin 0 -> 460 bytes
 .../images/coursewareManage/search1.png       | Bin 0 -> 577 bytes
 src/views/courselibrary/CoursewareManage.vue  | 623 +++++++++---------
 .../courselibrary/conponents/OnlineManage.vue | 279 ++++++++
 5 files changed, 600 insertions(+), 302 deletions(-)
 create mode 100644 src/assets/images/coursewareManage/pc.png
 create mode 100644 src/assets/images/coursewareManage/search0.png
 create mode 100644 src/assets/images/coursewareManage/search1.png
 create mode 100644 src/views/courselibrary/conponents/OnlineManage.vue

diff --git a/src/assets/images/coursewareManage/pc.png b/src/assets/images/coursewareManage/pc.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ec6da56e829c70a385ead252040b33cefa02c1d
GIT binary patch
literal 317
zcmV-D0mA-?P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00001b5ch_0Itp)
z=>Px#_en%SR5(w)(mhTBK^z6}_XZO^04>CXjyn)ZENozaf=vWk@4*ouas(L&B#L0K
zR#dbeKyP8O&#YlLpn?4;n0nrC-pu^joT>z&fGmsnqIG%%(8`hr@Wi^)D~0!Em;E$|
z9jh<m>a;*@rs9jo&!Fki28{=mpL_h+y^?hrfVe!*!JB*hJ_yt%x;Da)KD+>_JLL)7
z1E?6GvFLIW+rT=_0F(nn1|tEyIKxeFa@Z>N5ko}4de!0G-yezv!kUM^HxY1bF8%?=
z;4RG{`97+@gS5SCJ56|J@0=NfQEU&ePD%nUJB)IBKy#vM5@2!5=)Habb-AEZc28>k
P00000NkvXXu0mjfcwUBX

literal 0
HcmV?d00001

diff --git a/src/assets/images/coursewareManage/search0.png b/src/assets/images/coursewareManage/search0.png
new file mode 100644
index 0000000000000000000000000000000000000000..6942332a03e960bacefdf43c7757f4347a67b021
GIT binary patch
literal 460
zcmV;-0W<!IP)<h;3K|Lk000e1NJLTq000jF000pP1^@s60t)t_00001b5ch_0Itp)
z=>Px$hDk(0R5(wK)6I(yP!z`T&r?!1lDsA5B`hd}4Y44Ujbbx3EU@7(ph!wl<R6ey
z@)8L<C1T-i7AQ(284F2BvQbh;m)}fd%<wzATlag;z0dQU7*<ua4x6zUlkf>oa5c%z
zq1Q9?P*sa?5!3M*Z!rTC@eVyno(?dBa8+%^+0K;xcz`dMfE760dCj&Y=URhba8<3r
zEu6xxBtJ&@&KR7)POMFGJ5@CgH*h~m?{H{@Cg-sd>l=Ikd$26Y%P!#gc!XmOzJ%qN
zlcc(U+gD%XVT1eeK1ma$tE#Fd=ClSkJNlEX?uz^^@Ey!<@D(h@+>ulsMfF#B+~B>~
z*Az_h?0?g%Y9a37NP}nMddI5f;XkXYPNOy0G!T*vod$=J92|}A*t!F~N&1Gyvj-Q@
z#5mr9ljK`fjcb9xZfwN!Bnt-PIWVcJmY^kQDn8-^reHE&;3STs58MCPs!q<wcH*}R
zv+xFYJDPm2sx7#TYk$E*UeOj|JiZRMu&U0qZTkr=QJ}bt3K~QJ0000<MNUMnLSTX@
CR?fx%

literal 0
HcmV?d00001

diff --git a/src/assets/images/coursewareManage/search1.png b/src/assets/images/coursewareManage/search1.png
new file mode 100644
index 0000000000000000000000000000000000000000..4e0ee43e0107170ef6d585cb168f503b92abc447
GIT binary patch
literal 577
zcmV-H0>1r;P)<h;3K|Lk000e1NJLTq000jF000pP1^@s60t)t_00001b5ch_0Itp)
z=>Px$`$<GWR5(wSlkIDbaTv!x*L`Lq(UKvpc?d785Z;`H-RI1dH;S^=sBQON@E1@d
zCq<EeK%DzHd5A5%Q)}kjYwYX=iV{htwIq{7!g9`6_h~!kY&!Y9yXyK}Pv7s)D0!~0
zof3NuHexJBd=xx2<4)k&z3J&TJ!nd6LoUZn!E%F7z!*>~SY+@n5}~!f-JVS`Mc7U1
z0LE3qE_seuLN+?a=WH$26A+cdX~Jp5!Jx~og#`+5V^T3Q?hAYy<xr5YUo+N8s6usI
zFz_Ve16`J}9VxAKM4!P>#<R9ks5FlGx-MwQ8_m|3)Cn_=L?UeIZ?{+F;HI?J<#Ifh
zIA^Y}9$;(G$!g404n{IJ#T(#J2#)~o1J9ym!N~;IR~A?n!l4`^foI$Q10Doch45`)
zGo!4T?aH%VojP6vPs~l}sKhbHp&`>@&&zd>T~@vFJTy3C@k?5fcj%pz$}0yq`brzr
z&k=hHCW$AtD{u4)P7Qc=@?QlCvO07EZ9%6E|FNg9R^SFOXyW{j1@vWG?0d9Z^X7h~
zS;k>tH}E3xY<<z5Q=QzDHX%X>Ej1ViJ^)JuHNZ;~7iF9UhI3VP{PnBCBKx~lIsT0X
z#5RnTh_@IIYUVT4(_#~`l=ey765O2u7pF+5qN<jKKgak|DxvG^3Q+wUPYuglk~A1g
P00000NkvXXu0mjf37Z3y

literal 0
HcmV?d00001

diff --git a/src/views/courselibrary/CoursewareManage.vue b/src/views/courselibrary/CoursewareManage.vue
index 943675c3..1b1a1ea0 100644
--- a/src/views/courselibrary/CoursewareManage.vue
+++ b/src/views/courselibrary/CoursewareManage.vue
@@ -1,316 +1,335 @@
-<!-- 课程管理页面 -->
+<!-- 课件管理页面 -->
 <template>
-  <div class="coursewareManage">
-    <div
-      style="width: calc(100% - 76px); margin: 19px 0px 30px 38px"
-      class="tableBox"
-    >
-      <a-table
-        :columns="columns"
-        :data-source="tableData"
-        :row-selection="rowSelection"
-        :loading="tableDataTotal === -1 ? true : false"
-        :scroll="{ x: 700, y: 800 }"
-        :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 class="courseManage">
+    <div class="headerf">
+      <!-- 搜索框及按钮 -->
+      <div class="filter">
+        <div class="filterItems">
+          <div class="fi_input fitems">
+              <a-input v-model:value="value" style="width: 270px ;height:40px;border-radius: 8px;" placeholder="请输入项目名称" />
+          </div>
+          <div class="fi_input fitems">
+              <a-input v-model:value="value" style="width: 270px ;height:40px;border-radius: 8px;" placeholder="请输入名称" />
+          </div>
+          <div class="fi_input fitems">
+              <a-input v-model:value="value" style="width: 270px ;height:40px;border-radius: 8px;" placeholder="请输入所属项目" />
+          </div>
+          <div class="select fitems">
+            <a-select
+              v-model:value="projectName"
+              style="width: 200px"
+              placeholder="请选择状态"
+              :options="projectNameList"
+              @change="selectProjectName"
+              allowClear
+              showSearch
+            ></a-select>
+          </div>
+          <div class="select fitems">
+            <a-select
+              v-model:value="projectName"
+              style="width: 200px"
+              placeholder="请选择内容分类"
+              :options="projectNameList"
+              @change="selectProjectName"
+              allowClear
+              showSearch
+            ></a-select>
+          </div>
+          <div class="select fitems">
+            <a-time-range-picker />
+            <!-- <a-date-picker
+              v-model="selectTime"
+              type="date"
+              placeholder="创建时间"
+              style="width: 286px"
+            /> -->
+          </div>
+        </div>
+      </div>
+      
+      <div class="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 class="btn btn3">
+            <div class="search"></div>
+            <div class="btnText">导出</div>
+          </div>
+          <div class="btn btn4">
+            <div class="search"></div>
+            <div class="btnText">新建课程</div>
+          </div>
+        </div>
+    <!-- 搜索框及按钮 -->
     </div>
+
+    <!-- 表格 -->
+    <div class="tableBox">
+      <a-table :columns="columns" :data-source="data" :scroll="{ x: 1300, y: 1000 }">
+        <template #bodyCell="{ column }">
+          <template v-if="column.key === 'operation'">
+            <a>action</a>
+          </template>
+        </template>
+      </a-table>
+    </div>
+    <!-- 表格 -->
   </div>
 </template>
 <script>
-import { reactive, toRefs, ref } from "vue";
-const columns = [
-  {
-    title: "项目名称",
-    dataIndex: "projectName",
-    key: "projectName",
-    width: 280,
-  },
-  {
-    title: "项目经理",
-    dataIndex: "manager",
-    key: "manager",
-    width: 100,
-  },
-  {
-    title: "状态",
-    dataIndex: "state",
-    // width: "30%",
-    key: "state",
-    width: 100,
-  },
-  {
-    title: "创建人",
-    dataIndex: "creater",
-    // width: "30%",
-    key: "creater",
-    width: 100,
-  },
-  {
-    title: "创建时间",
-    dataIndex: "time",
-    key: "time",
-    width: 180,
-  },
-  {
-    title: "操作",
-    dataIndex: "opacation",
-    key: "opacation",
-    width: 300,
-  },
-];
-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);
+import { defineComponent } from 'vue';
+const columns = [{
+  title: '序号',
+  width: 200,
+  dataIndex: 'num',
+  key: 'num',
+  align: "center",
+}, {
+  title: '名称',
+  width: 200,
+  dataIndex: 'name',
+  key: 'name',
+}, {
+  title: '内容分类',
+  width: 200,
+  dataIndex: 'content',
+  key: '1',
+  align: "center",
+}, {
+  title: '课程形式',
+  width: 200,
+  dataIndex: 'courseform',
+  key: '2',
+  align: "center",
+}, {
+  title: ' 所属项目',
+  width: 300,
+  dataIndex: 'project',
+  key: '3',
+  align: "center",
+}, {
+  title: '学习人数',
+  width: 200,
+  dataIndex: 'stunum',
+  key: '4',
+  align: "center",
+}, {
+  title: '评分',
+  width: 200,
+  dataIndex: 'grade',
+  key: '5',
+  align: "center",
+}, {
+  title: '状态',
+  width: 200,
+  dataIndex: 'status',
+  key: '6',
+  align: "center",
+}, {
+  title: '是否发布',
+  width: 200,
+  dataIndex: 'ynpub',
+  key: '7',
+  align: "center",
+}, {
+  title: '创建人',
+  width: 200,
+  dataIndex: 'creator',
+  key: '8',
+  align: "center",
+}, {
+  title: '创建时间',
+  width: 280,
+  dataIndex: 'createtime',
+  key: '9',
+  align: "center",
+}, {
+  title: '上线时间',
+  width: 280,
+  dataIndex: 'pubtime',
+  key: '10',
+  align: "center",
+}, {
+  title: '是否停用',
+  width: 200,
+  key: 'either',
+  dataIndex: 'ynuse',
+  align: "center",
+}, {
+  title: '操作',
+  width: 400,
+  key: 'operation',
+  fixed: 'right',
+  align: "center",
+}];
+const data = [{
+  key: '1',
+  num:1,
+  name: '时间管理',
+  content: '领导力',
+  courseform: '线上',
+  project: '管理者进阶-腾飞班1',
+  stunum: '50',
+  grade: '5',
+  status: '未提交',
+  ynpub: '未发布',
+  creator: '管理员',
+  createtime: '2022-07-20 9:30',
+  pubtime: '2022-07-20 9:30',
+  ynuse: '启用',
+  kkty:false,
+}, {
+  key: '2',
+  num:2,
+  name: '智能制造初级课程',
+  content: '专业力',
+  courseform: '线上',
+  project: '-',
+  stunum: '200',
+  grade: '5',
+  status: '待审核',
+  ynpub: '未发布',
+  creator: '管理员',
+  createtime: '2022-07-20 9:30',
+  pubtime: '2022-07-20 9:30',
+  ynuse: '启用',
+  kkty:true,
+}];
+export default defineComponent({
+  data() {
+    return {
+      data,
+      columns,
+    };
   },
 });
 
-export default {
-  name: "coursewareManage",
-  setup() {
-    const state = reactive({
-      tableData: [
-        {
-          id: 1,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-          children: [
-            {
-              id: 5,
-              projectName: "管理者进阶",
-              manager: "黄华  刘俊",
-              state: "草稿",
-              creater: "毛继禹",
-              time: "2022-07-20 14:00:03",
-              children: [
-                {
-                  id: 7,
-                  projectName: "管理者进阶",
-                  manager: "黄华  刘俊",
-                  state: "草稿",
-                  creater: "毛继禹",
-                  time: "2022-07-20 14:00:03",
-                },
-                {
-                  id: 8,
-                  projectName: "管理者进阶",
-                  manager: "黄华  刘俊",
-                  state: "草稿",
-                  creater: "毛继禹",
-                  time: "2022-07-20 14:00:03",
-                },
-              ],
-            },
-            {
-              id: 6,
-              projectName: "管理者进阶",
-              manager: "黄华  刘俊",
-              state: "草稿",
-              creater: "毛继禹",
-              time: "2022-07-20 14:00:03",
-            },
-          ],
-        },
-        {
-          id: 2,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          id: 3,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-          hasChildren: true,
-        },
-        {
-          id: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          id: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          id: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          id: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          id: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          id: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          id: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          id: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          id: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          id: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          id: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          id: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          id: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          id: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          id: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          id: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          id: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-      ],
-      currentPage: 1,
-      tableDataTotal: 20,
-      pageSize: 10,
-    });
-    return {
-      ...toRefs(state),
-      columns,
-      rowSelection,
-    };
-  },
-};
 </script>
 <style lang="scss">
-.coursewareManage {
+.courseManage {
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+  .headerf{
+    display: flex;
+    margin-left: 38px;
+    margin-top: 30px;
+    .filter {
+      width: calc(69% - 34px);
+      margin-right: 34px;
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      .filterItems {
+        display: flex;
+        flex-wrap: wrap;
+        .fitems{
+          margin-right: 20px;
+          margin-bottom: 20px;
+        }
+      }
+    }
+      .btns {
+        display: flex;
+        // flex-wrap: wrap;
+        .btn {
+          padding: 0px 26px 0px 26px;
+          height: 38px;
+          background: rgba(64, 158, 255, 0);
+          border-radius: 8px;
+          border: 1px solid rgba(64, 158, 255, 1);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 14px;
+          flex-shrink: 0;
+          .search {
+            background-size: 100%;
+          }
+          .btnText {
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(64, 158, 255, 1);
+            line-height: 36px;
+            margin-left: 5px;
+          }
+        }
+        .btn1 {
+          .search {
+            width: 15px;
+            height: 17px;
+            background-image: url("../../assets/images/courseManage/search1.png");
+          }
+        }
+        .btn2 {
+          .search {
+            width: 16px;
+            height: 18px;
+            background-image: url("../../assets/images/courseManage/reset1.png");
+          }
+        }
+        .btn3 {
+          .search {
+            width: 17px;
+            height: 18px;
+            background-image: url("../../assets/images/courseManage/add1.png");
+          }
+        }
+        .btn4 {
+          margin-right: 0px;
+          .search {
+            width: 17px;
+            height: 18px;
+            background-image: url("../../assets/images/courseManage/add1.png");
+          }
+        }
+        .btn1:hover {
+          background: rgba(64, 158, 255, 1);
+          .search {
+            background-image: url("../../assets/images/courseManage/search0.png");
+          }
+          .btnText {
+            color: #ffffff;
+          }
+        }
+        .btn2:hover {
+          background: rgba(64, 158, 255, 1);
+          .search {
+            background-image: url("../../assets/images/courseManage/reset0.png");
+          }
+          .btnText {
+            color: #ffffff;
+          }
+        }
+        .btn3:hover {
+          background: rgba(64, 158, 255, 1);
+          .search {
+            background-image: url("../../assets/images/courseManage/add0.png");
+          }
+          .btnText {
+            color: #ffffff;
+          }
+        }
+        .btn4:hover {
+          background: rgba(64, 158, 255, 1);
+          .search {
+            background-image: url("../../assets/images/courseManage/add0.png");
+          }
+          .btnText {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  .tableBox {
+    margin: 20px 38px 30px;
+  }
 }
 </style>
diff --git a/src/views/courselibrary/conponents/OnlineManage.vue b/src/views/courselibrary/conponents/OnlineManage.vue
new file mode 100644
index 00000000..0ed3576a
--- /dev/null
+++ b/src/views/courselibrary/conponents/OnlineManage.vue
@@ -0,0 +1,279 @@
+<template>
+    <div class="onlinemanage">
+        <div class="om_header">
+        </div>
+        <div class="main">
+            <div class="m_header">
+                <div class="pc_icon"></div>
+                <span>在线课程管理</span>
+                <div class="pc_exit">x</div>
+            </div>
+            <div class="m_body">
+                <div class="b_title">课程：BMOT2021年职级晋升-安全管理（高级）</div>
+                <div class="b_sub">
+                    <div class="bs_type">类型：</div>
+                    <div class="bs_right">录播课</div>
+                    <div class="bs_left">内容分类：</div>
+                    <div class="bs_right">领导力</div>
+                    <div class="bs_left">状态：</div>
+                    <div class="bs_right">已审核</div>
+                </div>
+                <div class="b_menu">
+                    <a-menu v-model:selectedKeys="current" mode="horizontal">
+                        <a-menu-item key="mail">
+                            报名管理
+                        </a-menu-item>
+                        <a-menu-item key="sub2">
+                            学习记录
+                        </a-menu-item>
+                        <a-menu-item key="sub3">
+                            资源完成情况
+                        </a-menu-item>
+                    </a-menu>
+                </div>
+                <div class="b_menunav">
+                    <div class="bm_select">
+                        <a-select
+                            class="select"
+                            ref="select"
+                            placeholder="请选择状态"
+                            v-model:value="value1"
+                            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="value" 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">
+                    <a-table
+                        :columns="columns"
+                        :data-source="tableData"
+                        :loading="tableDataTotal === -1 ? true : false"
+                        :pagination="false"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { reactive, toRefs, ref } from "vue";
+const columns = [
+    {
+        title: "姓名",
+        dataIndex: "projectName",
+        key: "projectName",
+        width: '16%',
+        align: "center",
+    },
+    {
+        title: "工号",
+        dataIndex: "numb",
+        key: "numb",
+        width: '16%',
+        align: "center",
+    },
+    {
+        title: "报名时间",
+        dataIndex: "applytime",
+        key: "applytime",
+        width: '16%',
+        align: "center",
+    },
+    {
+        title: "签到时间",
+        dataIndex: "signtime",
+        key: "signtime",
+        width: '16%',
+        align: "center",
+    },
+    {
+        title: "状态",
+        dataIndex: "status",
+        key: "status",
+        width: '16%',
+        align: "center",
+    },
+    {
+        title: "操作",
+        dataIndex: "opacation",
+        key: "opacation",
+        width: '16%',
+        align: "center",
+    },
+];
+export default {
+name: "onlineManage",
+setup() {
+    const current = ref(['mail']);
+    const state = reactive({
+        tableData: [
+            {
+                key: 1,
+                projectName:"刘莉",
+                numb: "10064511",
+                applytime:"2022-07-20 14:00:00",
+                signtime: "-",
+                status: "已通过",
+            },
+            {
+                key: 2,
+                projectName:"",
+                numb: "",
+                applytime:"2022-07-20 14:00:00",
+                signtime: "2022-09-26 13:30:30",
+                status:"已通过",
+            },
+        ],
+    });
+
+    
+    return {
+        columns,
+        current,
+        ...toRefs(state),
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.onlinemanage{
+    width: 1358px;
+    min-width: 1000px;
+    height: 537px;
+    background: #FFFFFF;
+    box-shadow: 0px 1px 35px 0px rgba(118,136,166,0.21);
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    font-size: 14px;
+    font-family: PingFangSC-Regular;
+    color: #000000;
+    overflow: auto;
+    .om_header{
+        position: absolute;
+        width:calc(100%);
+        height: 40px;
+        background: linear-gradient( rgba(78,166,255,0.2) 0%, rgba(78,166,255,0) 100%);
+    }
+    .main{
+        width:calc(100%);
+        position: relative;
+        .m_header{
+            display: flex;
+            align-items: center;
+            padding-top: 20px;
+            padding-left: 26px;
+            font-size: 16px;
+            .pc_icon{
+                width: 16px;
+                height: 16px;
+                margin-right: 10px;
+                background-image: url(@/assets/images/coursewareManage/pc.png);
+            }
+            .pc_exit{
+                position: absolute;
+                right:42px;
+                cursor: pointer;
+            }
+        }
+        .m_body{
+            width:calc(100% - 50px);
+            padding-left: 50px;
+            padding-top: 17px;
+            .b_title{
+                color: #4F5156;
+                font-weight: 500;
+                margin-bottom: 19px;
+            }
+            .b_sub{
+                display: flex;
+                margin-bottom: 10px;
+                .bs_type{
+                    color: #999BA3;
+                }
+                .bs_left{
+                    color: #999BA3;
+                    margin-left: 35px;
+                }
+                .bs_right{
+                    color: #4F5156;
+                }
+            }
+            .b_menu{
+                width:calc(100%);
+            }
+            .b_menunav{
+                display: flex;
+                margin-top: 20px;
+                margin-bottom: 20px;
+                .bm_select{
+                    margin-right: 20px;
+                }
+                .bm_input{
+                    margin-right: 20px;
+                }
+                .bm_btn {
+                display: flex;
+                // flex-wrap: wrap;
+                .btn {
+                    padding: 0px 26px 0px 26px;
+                    height: 40px;
+                    background: rgba(64, 158, 255, 0);
+                    border-radius: 8px;
+                    border: 1px solid rgba(64, 158, 255, 1);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-right: 14px;
+                    flex-shrink: 0;
+                    .search {
+                    background-size: 100%;
+                    }
+                    .btnText {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: rgba(64, 158, 255, 1);
+                    line-height: 36px;
+                    margin-left: 5px;
+                    }
+                }
+                .btn1 {
+                    .search {
+                    width: 15px;
+                    height: 17px;
+                    background-image: url("@/assets/images/coursewareManage/search1.png");
+                    }
+                }
+                .btn1:hover {
+                    background: rgba(64, 158, 255, 1);
+                    .search {
+                    background-image: url("@/assets/images/coursewareManage/search0.png");
+                    }
+                    .btnText {
+                    color: #ffffff;
+                    }
+                }
+            }
+            }
+        }
+    }
+}
+
+</style>
\ No newline at end of file