diff --git a/src/assets/images/basicinfo/asterisk.png b/src/assets/images/basicinfo/asterisk.png
new file mode 100644
index 00000000..49c7ac99
Binary files /dev/null and b/src/assets/images/basicinfo/asterisk.png differ
diff --git a/src/assets/images/basicinfo/close.png b/src/assets/images/basicinfo/close.png
new file mode 100644
index 00000000..26992042
Binary files /dev/null and b/src/assets/images/basicinfo/close.png differ
diff --git a/src/assets/images/coursewareManage/pc.png b/src/assets/images/coursewareManage/pc.png
new file mode 100644
index 00000000..3ec6da56
Binary files /dev/null and b/src/assets/images/coursewareManage/pc.png differ
diff --git a/src/assets/images/coursewareManage/search0.png b/src/assets/images/coursewareManage/search0.png
new file mode 100644
index 00000000..6942332a
Binary files /dev/null and b/src/assets/images/coursewareManage/search0.png differ
diff --git a/src/assets/images/coursewareManage/search1.png b/src/assets/images/coursewareManage/search1.png
new file mode 100644
index 00000000..4e0ee43e
Binary files /dev/null and b/src/assets/images/coursewareManage/search1.png differ
diff --git a/src/assets/images/projectadd/enclosure.png b/src/assets/images/projectadd/enclosure.png
new file mode 100644
index 00000000..4bdc5097
Binary files /dev/null and b/src/assets/images/projectadd/enclosure.png differ
diff --git a/src/assets/px.jpg b/src/assets/px.jpg
new file mode 100644
index 00000000..abfad90d
Binary files /dev/null and b/src/assets/px.jpg differ
diff --git a/src/components/BreadCrumb.vue b/src/components/BreadCrumb.vue
index 9628b7ba..8a869c28 100644
--- a/src/components/BreadCrumb.vue
+++ b/src/components/BreadCrumb.vue
@@ -99,6 +99,13 @@ export default {
             },
           ];
         }
+        if (n === "/systemmanage" || n === "/SystemManage") {
+          state.list = [
+            {
+              name: "系统管理",
+            },
+          ];
+        }
       }
     );
 
diff --git a/src/components/NavLeft.vue b/src/components/NavLeft.vue
index 2ef66aed..af5a1223 100644
--- a/src/components/NavLeft.vue
+++ b/src/components/NavLeft.vue
@@ -153,7 +153,7 @@
               src="../assets/images/navleft/system.png"
             />
           </div>
-          <span>系统管理</span>
+          <router-link to="/systemmanage">系统管理</router-link>
         </a-menu-item>
       </a-menu>
     </div>
@@ -281,6 +281,12 @@ export default {
           selectedKeys: "sub3-2",
           pagename: "课程管理",
         },
+        {
+          href: "/systemmanage",
+          openKeys: "sub9",
+          selectedKeys: "sub9",
+          pagename: "系统管理",
+        },
       ],
     });
 
diff --git a/src/views/TestPage.vue b/src/views/TestPage.vue
index 4d2b300d..7cdfd951 100644
--- a/src/views/TestPage.vue
+++ b/src/views/TestPage.vue
@@ -5,13 +5,9 @@
     <div class="box">
       <ul>
         <li class="drag"><a href="#">导航一</a></li>
-
         <li class="drag"><a href="#">导航二导航</a></li>
-
         <li class="drag"><a href="#">导航导航导航三</a></li>
-
         <li class="drag"><a href="#">导航导航四</a></li>
-
         <li class="drag"><a href="#">导五</a></li>
       </ul>
     </div>
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
diff --git a/src/views/learningpath/LearningPath.vue b/src/views/learningpath/LearningPath.vue
index 589a986c..e8f0f522 100644
--- a/src/views/learningpath/LearningPath.vue
+++ b/src/views/learningpath/LearningPath.vue
@@ -8,24 +8,14 @@
           <a-select
             v-model:value="projectName"
             style="width: 270px"
-            placeholder="请输入项目名称"
-            :options="projectNameList"
-            @change="selectProjectName"
-            allowClear
-            showSearch
-          ></a-select>
-        </div>
-        <div class="select">
-          <a-select
-            v-model:value="projectName"
-            style="width: 270px"
-            placeholder="请输入项目经理"
+            placeholder="请输入路径名称"
             :options="projectNameList"
             @change="selectProjectName"
             allowClear
             showSearch
           ></a-select>
         </div>
+
         <div class="select">
           <a-select
             v-model:value="projectName"
@@ -38,11 +28,16 @@
           ></a-select>
         </div>
         <div class="select">
-          <a-date-picker
+          <!-- <a-date-picker
             v-model="selectTime"
             type="date"
-            placeholder="创建时间"
+            placeholder="时间"
             style="width: 270px"
+          /> -->
+          <a-range-picker
+            v-model:value="value2"
+            separator="至"
+            :placeholder="['开始时间', '结束时间']"
           />
         </div>
       </div>
@@ -55,121 +50,107 @@
           <div class="search"></div>
           <div class="btnText">重置</div>
         </div>
-        <router-link to="/projectadd">
+        <!-- <router-link to="/projectadd">
           <div class="btn btn3">
             <div class="search"></div>
-            <div class="btnText">创建项目</div>
+            <div class="btnText">创建路径</div>
           </div>
-        </router-link>
+        </router-link> -->
+        <div class="btn btn3" @click="handleOut">
+          <div class="search"></div>
+          <div class="btnText">创建路径</div>
+        </div>
       </div>
     </div>
     <!-- 搜索框及按钮 -->
     <!-- 表格 -->
     <div class="tableBox">
       <a-table
-        :columns="columns"
+        style="border: 1px solid #f2f6fe"
+        :columns="tableDataFunc()"
         :data-source="tableData"
         :loading="tableDataTotal === -1 ? true : false"
-        :scroll="{ x: 700, y: 800 }"
         expandRowByClick="true"
         @expand="expandTable"
-        :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()
-            // 	})
-          },
-        }"
+        :pagination="
+          tableDataTotal > 10
+            ? false
+            : {
+                // disabled: true,
+                display: false,
+                showSizeChanger: true,
+                showQuickJumper: true,
+                hideOnSinglePage: true,
+                pageSizeOptions: [],
+                pageSize: pageSize,
+                current: currentPage,
+                total: tableDataTotal,
+                onChange: (page, pageSize) => {
+                  currentPage = page;
+                  // console.log('page', page)
+                  // 加翻页查找代码
+                  // 	this.setState({
+                  // 		currentPage: page,
+                  // 	}, () => {
+                  // 		this.getMilitaryDeployment()
+                  // 	})
+                },
+              }
+        "
       />
     </div>
     <!-- 表格 -->
+    <div :class="out ? 'out' : 'unout'">
+      <div class="top">
+        <img class="topimg" src="../../assets/images/courseManage/add1.png" />
+        <div class="topc">创建路径</div>
+        <div @click="handleOut" style="margin-left: 500px; cursor: pointer">
+          x
+        </div>
+      </div>
+      <div class="mid clearfix">
+        <div class="name">
+          <div class="d">*</div>
+          <div class="inname">路径图名称</div>
+          <div class="in">
+            <a-input v-model:value="valueE" />
+          </div>
+        </div>
+        <div class="bac">
+          <div class="d">*</div>
+          <div class="inname">路径图背景</div>
+          <div class="in">
+            <!-- <img class="im" src="../../assets/px.jpg" />
+            <img class="im" src="../../assets/px.jpg" />
+            <img class="im" src="../../assets/px.jpg" /> -->
+            <div
+              @click="chooseImg(item.id)"
+              v-for="item in imgData"
+              :key="item.key"
+            >
+              <img class="im" :src="item.source" />
+            </div>
+          </div>
+        </div>
+        <div class="info">
+          <div class="inname">路径说明</div>
+          <div class="in">
+            <a-textarea v-model:value="valuei" />
+          </div>
+        </div>
+        <div class="btn">
+          <button class="samtn btn1" @click="handleOut">取消</button>
+          <button class="samtn btn2" @click="handleOut">确定</button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
-import { reactive, toRefs, onMounted } from "vue";
-const columns = [
-  {
-    title: "项目名称",
-    dataIndex: "projectName",
-    key: "projectName",
-    width: 280,
-    // align: "center",
-    ellipsis: true,
-    // scopedSlots: { customRender: "action" }, //引入的插槽
-    // customRender: (text, record) => {
-    //   console.log(text, record);
-    //   return <span>{text.text}</span>;
-    // },
-  },
-  {
-    title: "项目经理",
-    dataIndex: "manager",
-    key: "manager",
-    width: 100,
-    align: "center",
-  },
-  {
-    title: "状态",
-    dataIndex: "state",
-    // width: "30%",
-    key: "state",
-    width: 100,
-    align: "center",
-  },
-  {
-    title: "创建人",
-    dataIndex: "creater",
-    // width: "30%",
-    key: "creater",
-    width: 100,
-    align: "center",
-  },
-  {
-    title: "创建时间",
-    dataIndex: "time",
-    key: "time",
-    width: 180,
-    align: "center",
-  },
-  {
-    title: "操作",
-    dataIndex: "opacation",
-    key: "opacation",
-    width: 300,
-    align: "center",
-    scopedSlots: { customRender: "action" }, //引入的插槽
-    customRender: () => {
-      // console.log(text);
-      return (
-        <div class="opacation">
-          <span>编辑</span>
-          <span style={{ "margin-left": "21px" }}>创建子项目</span>
-          <span style={{ "margin-left": "21px" }} class="more">
-            <span>更多</span>
-            <div class="moreArrow"></div>
-            <div class="moreItems"></div>
-          </span>
-        </div>
-      );
-    },
-  },
-];
+import { reactive, toRefs, onMounted, ref } from "vue";
 
 export default {
   name: "learningPath",
-
   setup() {
     const state = reactive({
       projectNameList: [
@@ -194,251 +175,173 @@ export default {
           label: "项目四",
         },
       ],
-      projectName: null,
+      out: false,
+      number: null,
       selectTime: null,
-
       tableData: [
         {
           key: 1,
-          projectName:
-            "管理者进阶1管理者进阶1管理者进阶1管理者进阶1管理者进阶1管理者进阶1管理者进阶1",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-          children: [
-            {
-              key: 5,
-              projectName: "管理者进阶5",
-              manager: "黄华  刘俊",
-              state: "草稿",
-              creater: "毛继禹",
-              time: "2022-07-20 14:00:03",
-              children: [
-                {
-                  key: 7,
-                  projectName:
-                    "管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7",
-                  manager: "黄华  刘俊",
-                  state: "草稿",
-                  creater: "毛继禹",
-                  time: "2022-07-20 14:00:03",
-                },
-                {
-                  key: 8,
-                  projectName: "管理者进阶8",
-                  manager: "黄华  刘俊",
-                  state: "草稿",
-                  creater: "毛继禹",
-                  time: "2022-07-20 14:00:03",
-                },
-              ],
-            },
-            {
-              key: 6,
-              projectName: "管理者进阶6",
-              manager: "黄华  刘俊",
-              state: "草稿",
-              creater: "毛继禹",
-              time: "2022-07-20 14:00:03",
-            },
-          ],
+          number: 1,
+          manager: "产品经理上升路径",
+          state: "已发布",
+          creater: "管理员",
+          pubtime: "2022-07-20 14:00:03",
+          cretime: "2022-07-20 14:00:03",
+          haspub: false,
         },
         {
           key: 2,
-          projectName: "管理者进阶2",
-          manager: "黄华  刘俊",
+          number: 2,
+          manager: "程序员升级路径",
           state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
+          creater: "管理员",
+          pubtime: "2022-07-20 14:00:03",
+          cretime: "2022-07-20 14:00:03",
+          haspub: true,
         },
         {
           key: 3,
-          projectName: "管理者进阶3",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-          hasChildren: true,
-          children: [
-            {
-              key: 35,
-              projectName: "管理者进阶35",
-              manager: "黄华  刘俊",
-              state: "草稿",
-              creater: "毛继禹",
-              time: "2022-07-20 14:00:03",
-              children: [
-                {
-                  key: 37,
-                  projectName: "管理者进阶37",
-                  manager: "黄华  刘俊",
-                  state: "草稿",
-                  creater: "毛继禹",
-                  time: "2022-07-20 14:00:03",
-                },
-                {
-                  key: 38,
-                  projectName: "管理者进阶38",
-                  manager: "黄华  刘俊",
-                  state: "草稿",
-                  creater: "毛继禹",
-                  time: "2022-07-20 14:00:03",
-                },
-              ],
-            },
-            {
-              key: 36,
-              projectName: "管理者进阶36",
-              manager: "黄华  刘俊",
-              state: "草稿",
-              creater: "毛继禹",
-              time: "2022-07-20 14:00:03",
-            },
-          ],
+          number: 3,
+          manager: "ui成长之路",
+          state: "已停用",
+          creater: "管理员",
+          pubtime: "2022-07-20 14:00:03",
+          cretime: "2022-07-20 14:00:03",
+          haspub: false,
         },
         {
           key: 4,
-          projectName: "管理者进阶4",
-          manager: "黄华  刘俊",
+          number: 4,
+          manager: "ui成长之路",
           state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
+          creater: "管理员",
+          pubtime: "2022-07-20 14:00:03",
+          cretime: "2022-07-20 14:00:03",
+          haspub: true,
+        },
+      ],
+      imgData: [
+        {
+          id: 1,
+          source: require("../../assets/px.jpg"),
         },
         {
-          key: 4,
-          projectName: "管理者进阶5",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
+          id: 2,
+          source: require("../../assets/px.jpg"),
         },
         {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
+          id: 3,
+          source: require("../../assets/px.jpg"),
         },
       ],
       currentPage: 1,
       tableDataTotal: 20,
       pageSize: 10,
+      value1: " ",
+      value2: ref(),
+      valueE: ref(" "),
+      valueEE: ref(" "),
+      valuei: ref(" "),
     });
+    const tableDataFunc = () => {
+      const columns = [
+        {
+          title: "序号",
+          dataIndex: "number",
+          key: "number",
+          width: 100,
+          align: "center",
+          className: "h",
+          // ellipsis: true,
+          // scopedSlots: { customRender: "action" }, //引入的插槽
+          // customRender: (text, record) => {
+          //   console.log(text, record);
+          //   return <span>{text.text}</span>;
+          // },
+        },
+        {
+          title: "路径图名称",
+          dataIndex: "manager",
+          key: "manager",
+          width: 100,
+          align: "center",
+          ellipsis: true,
+          className: "h",
+        },
+        {
+          title: "状态",
+          dataIndex: "state",
+          // width: "30%",
+          key: "state",
+          width: 100,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "创建人",
+          dataIndex: "creater",
+          // width: "30%",
+          key: "creater",
+          width: 100,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "发布时间",
+          dataIndex: "pubtime",
+          key: "pubtime",
+          width: 180,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "创建时间",
+          dataIndex: "cretime",
+          key: "cretime",
+          width: 180,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "操作",
+          className: "h",
+          dataIndex: "opacation",
+          key: "opacation",
+          width: 200,
+          align: "center",
+          scopedSlots: { customRender: "action" }, //引入的插槽
+          customRender: (text) => {
+            console.log(text);
+            return (
+              <div class="opa">
+                <div class="opacation">
+                  <span class={text.record.haspub ? "activecls" : "errorCls"}>
+                    发布
+                  </span>
+                  <span style={{ "margin-left": "25px" }}>编辑</span>
+                  <span style={{ "margin-left": "25px" }}>关卡</span>
+                  <span style={{ "margin-left": "25px" }} class="more">
+                    <span>授权</span>
+                    <div class="moreArrow"></div>
+                    <div class="moreItems"></div>
+                  </span>
 
+                  <span
+                    style={{ "margin-left": "21px", "margin-right": "30px" }}
+                    class="more"
+                  >
+                    <span>更多</span>
+                    <div class="moreArrow"></div>
+                    <div class="moreItems"></div>
+                  </span>
+                </div>
+              </div>
+            );
+          },
+        },
+      ];
+      return columns;
+    };
     onMounted(() => {
       // console.log("执行");
     });
@@ -449,21 +352,36 @@ export default {
       // console.log("惦记了");
       console.log("e", e, a);
     };
+    const handleOut = () => {
+      state.out = !state.out;
+    };
+    const chooseImg = (id) => {
+      console.log(id);
+    };
     return {
       ...toRefs(state),
-      columns,
       selectProjectName,
       expandTable,
+      handleOut,
+      tableDataFunc,
+      chooseImg,
     };
   },
 };
 </script>
 <style lang="scss">
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  display: block;
+  clear: both;
+}
 .learningPath {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
+  // position: relative;
   .filter {
     margin-left: 38px;
     margin-right: 38px;
@@ -493,6 +411,7 @@ export default {
         justify-content: center;
         margin-right: 14px;
         flex-shrink: 0;
+        cursor: pointer;
         .search {
           background-size: 100%;
         }
@@ -557,42 +476,216 @@ export default {
   }
   .tableBox {
     margin: 20px 38px 30px;
+    th.h {
+      background-color: #eff4fc !important;
+    }
+
+    .ant-table-tbody
+      > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+      > td {
+      background: #f6f9fd;
+    }
   }
-  .opacation {
-    font-size: 14px;
-    font-weight: 400;
-    color: #4ea6ff;
-    // line-height: 36px;
-    .more {
-      position: relative;
-      .moreArrow {
-        width: 13px;
-        height: 7px;
+  .out {
+    display: block;
+    position: absolute;
+    top: 90px;
+    width: 680px;
+    // height: 525px;
+    background-color: #fff;
+
+    box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    .top {
+      width: 100%;
+      height: 68px;
+
+      background: linear-gradient(
+        rgba(78, 166, 255, 0.2) 0%,
+        rgba(78, 166, 255, 0) 100%
+      );
+      display: flex;
+      align-items: center;
+      .topimg {
+        width: 18px;
+        height: 18px;
+        margin-left: 27px;
+      }
+      .topc {
+        color: #000000;
+        font-size: 16px;
+        margin-left: 8px;
+      }
+    }
+    .mid {
+      width: 100%;
+      height: 100%;
+      background-color: #fff;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .name {
+        width: 78%;
+        // background-color: lightcoral;
+        display: flex;
+        margin-top: 20px;
+        align-items: center;
+        height: 40px;
+        // border: 1px solid black;
+        .d {
+          margin-top: 8px;
+          color: #ff4e4e;
+        }
+        .inname {
+          color: #6f6f6f;
+          font-size: 14px;
+          margin-left: 7px;
+        }
+        .in {
+          margin-left: 14px;
+          width: 81%;
+          .ant-input {
+            border-radius: 5px;
+            // height: 120%;
+            width: 100%;
+            height: 40px;
+          }
+        }
+      }
+      .bac {
+        width: 78%;
+        // background-color: lightcoral;
+        display: flex;
+        margin-top: 30px;
+        // border: 1px solid black;
+        .d {
+          margin-top: 18px;
+          color: #ff4e4e;
+        }
+        .inname {
+          color: #6f6f6f;
+          font-size: 14px;
+          margin-left: 7px;
+          margin-top: 15px;
+        }
+        .in {
+          margin-left: 14px;
+          width: 81%;
+          height: 110px;
+          // background-color: red;
+          display: flex;
+          justify-content: space-between;
+          .im {
+            border-radius: 8px;
+            width: 140px;
+            height: 110px;
+            cursor: pointer;
+          }
+        }
+      }
+      .info {
+        width: 78%;
+        // background-color: lightcoral;
+        display: flex;
+        margin-top: 30px;
+        // align-items: center;
+        // height: 40px;
+        // border: 1px solid black;
+
+        .inname {
+          color: #6f6f6f;
+          font-size: 14px;
+          margin-left: 26px;
+          margin-top: 15px;
+        }
+        .in {
+          margin-left: 14px;
+          width: 81%;
+          .ant-input {
+            border-radius: 5px;
+            // height: 120%;
+            width: 100%;
+            height: 130px;
+            resize: none;
+          }
+        }
+      }
+      .btn {
+        width: 33%;
+        margin-top: 30px;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 30px;
+        .samtn {
+          width: 100px;
+          height: 40px;
+          font-size: 14px;
+          border: 1px solid #4ea6ff;
+          border-radius: 8px;
+          cursor: pointer;
+        }
+        .btn1 {
+          background-color: #fff;
+          color: #4ea6ff;
+        }
+        .btn2 {
+          background-color: #4ea6ff;
+          color: #fff;
+        }
+      }
+    }
+  }
+  .unout {
+    display: none;
+  }
+
+  .opa {
+    display: flex;
+    justify-content: right;
+    .opacation {
+      font-size: 14px;
+      font-weight: 400;
+      color: #4ea6ff;
+      // line-height: 36px;
+      .activecls {
         display: inline-block;
-        background-image: url("../../assets/images/navtop/down.png");
-        background-size: 100%;
-        margin: 2px;
-        margin-left: 7px;
       }
-      .moreItems {
-        width: 80px;
-        height: 70px;
+      .errorCls {
         display: none;
-        background: #ffffff;
-        box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
-        border-radius: 3px;
-        border: 0px solid #dcdcdc;
-        position: absolute;
-        left: 0px;
-        top: 18px;
-        z-index: 100;
       }
-    }
-    .more:hover .moreArrow {
-      background-image: url("../../assets/images/navtop/up.png");
-    }
-    .more:hover .moreItems {
-      display: block;
+      .more {
+        position: relative;
+        .moreArrow {
+          width: 13px;
+          height: 7px;
+          display: inline-block;
+          background-image: url("../../assets/images/navtop/down.png");
+          background-size: 100%;
+          margin: 2px;
+          margin-left: 7px;
+        }
+        .moreItems {
+          width: 80px;
+          height: 70px;
+          display: none;
+          background: #ffffff;
+          box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
+          border-radius: 3px;
+          border: 0px solid #dcdcdc;
+          position: absolute;
+          left: 0px;
+          top: 18px;
+          z-index: 100;
+        }
+      }
+      .more:hover .moreArrow {
+        background-image: url("../../assets/images/navtop/up.png");
+      }
+      .more:hover .moreItems {
+        display: block;
+      }
     }
   }
 }
diff --git a/src/views/projectcenter/ProjectAdd.vue b/src/views/projectcenter/ProjectAdd.vue
index 60925f73..2b329cbe 100644
--- a/src/views/projectcenter/ProjectAdd.vue
+++ b/src/views/projectcenter/ProjectAdd.vue
@@ -1 +1,192 @@
 <!---- 创建项目页面 --->
+<template>
+    <div class="header">
+        <span class="title">创建/编辑单层项目</span>
+        <span class="goback">返回</span>
+    </div>
+    <div class="content">
+        <div class="main">
+            <div class="select" style="margin-top: 20px;algin-items: center">
+                <span class="star" style="margin-left: 140px">*</span>项目名称
+                <a-input
+                    style="width: 500px; height: 40px; border-radius: 8px;margin-left: 13px"
+                    placeholder="请输入项目名称"                   
+                    allowClear
+                    showSearch
+                ></a-input>
+            </div>
+            <div class="select" style="margin-top: 20px;algin-items: center">
+                <span class="star" style="margin-left:166px">*</span>分类
+                <a-select
+                    style="width: 505px; height: 40px; margin-left: 13px"
+                    placeholder="四个养成"                   
+                    allowClear
+                    showSearch
+                ></a-select>
+            </div>
+            <div class="select" style="margin-top: 20px;algin-items: center">
+                <span class="star" style="margin-left:152px">*</span>封面图
+                <span class="photo"></span>
+            </div>
+            <div class="select" style="margin-top: 20px;algin-items: center">
+                <span class="star" style="margin-left:140px">*</span>项目时间
+                <a-range-picker v-model:value="value2" show-time style="margin-left:10px;width: 505px"/>
+            </div>
+            <div class="select" style="margin-top: 20px;algin-items: center">
+                <span class="star" style="margin-left: 140px">*</span>项目经理
+                <a-input
+                    style="width: 500px; height: 40px; border-radius: 8px;margin-left: 13px"
+                    placeholder="请选择项目经理"                   
+                    allowClear
+                    showSearch
+                ></a-input>
+            </div>
+            <div class="select" style="margin-top: 20px;algin-items: center">
+                <span class="star" style="margin-left: 140px">*</span>资源归属
+                <a-input
+                    style="width: 500px; height: 40px; border-radius: 8px;margin-left: 13px"
+                    placeholder="自动带出 可修改"                                      
+                    allowClear
+                    showSearch
+                ></a-input>
+            </div>
+            <div class="select" style="margin-top: 20px;algin-items: center;margin-left: 150px">
+                项目说明
+                <a-input
+                    style="width: 500px; height: 80px; border-radius: 8px;margin-left: 13px"
+                    placeholder="请输入说明" 
+                    type="textarea"                                    
+                    allowClear
+                    showSearch
+                ></a-input>
+            </div>
+            <div class="select" style="margin-top: 20px;algin-items: center;margin-left: 130px">
+                同步学习记录
+               <a-radio v-model:checked="checked" style="margin-left: 3px">同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</a-radio>
+            </div>
+            <div class="select" style="margin-top: 20px;algin-items: center">
+                <span class="star" style="margin-left: 140px">*</span>项目级别
+                <a-input
+                    style="width: 500px; height: 40px; border-radius: 8px;margin-left: 13px"
+                    placeholder="集团级/组织级/现地级/部门级"                                      
+                    allowClear
+                    showSearch
+                ></a-input>
+            </div>
+            <div class="select" style="margin-top: 20px;algin-items: center">
+                <span class="star" style="margin-left: 140px">*</span>培训体系
+                <a-input
+                    style="width: 500px; height: 40px; border-radius: 8px;margin-left: 13px"
+                    placeholder="集团级/组织级/现地级/部门级"                                      
+                    allowClear
+                    showSearch
+                ></a-input>
+            </div>
+            <div class="select" style="margin-top: 20px;algin-items: center">
+                <span class="star" style="margin-left: 110px">*</span>是否BOEU实施
+                <a-radio v-model:checked="checked">BOEU实施</a-radio>
+            </div>           
+        </div>
+        <div class="template">
+            <div class="select" style="margin-top: 20px;margin-left: 43px;algin-items: center">
+                模板<a-select
+                    style="width: 505px; height: 40px; margin-left: 13px"
+                    placeholder="请选择模板"                   
+                    allowClear
+                    showSearch
+                ></a-select>
+            </div>
+        </div>
+    </div>
+    <div class="footer">
+        <div class="enclosure">
+            <span >附件</span>
+            <span class="image"></span>
+            <span class="text1">上传附件</span>
+        </div>
+        <div class="text">支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip</div>
+        <div class="btn">
+            <a-button type="primary" style="width: 100px;height: 40px;border-radius: 8px">确认</a-button>
+            <a-button type="primary" ghost style="width: 100px;height: 40px;margin-left: 14px;border-radius: 8px">取消</a-button>
+        </div>
+    </div>
+</template>
+<script lane="ts">
+</script>
+<style lang="scss">
+    .header {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        .title {
+            color: #000000;
+            font-size: 18px;
+            //line-height: 36px;
+            padding-top: 30px;
+            padding-left: 37px;
+            //font-weight: 500;
+        }
+        .goback {
+            color: #4EA6FF;
+            font-size: 14px;
+            padding-right: 39px;
+            padding-top: 37px; 
+        }
+    }
+    .content {
+        display: flex;
+        .template {
+            float: right;
+        }
+        .main {
+            width: 50%;
+            float: left;
+            border-right: 1px solid rgba(153, 155, 163, 0.3);
+            .star {
+                color: #FF4E4E;
+                margin-right: 4px;
+                font-size: 20px;
+            }
+            .photo {
+                display: inline-block;
+                width: 100px;
+                height: 100px;
+                margin-left: 13px;
+                border: 1px solid #4EA6FF;
+                border-radius: 8px;
+                //text-align: center;
+                //line-height: 100px;               
+                //color: #4EA6FF;
+            }
+        }
+    }
+    .footer {
+        width: 100%;
+        margin-top: 31px;
+        margin-bottom: 14px;
+        .enclosure {
+            margin-left: 180px;
+            .text1 {
+                margin-left: 10px;
+                color: rgba(78, 166, 255, 1);
+                font-size: 14px;
+            }
+            .image {
+                display: inline-block;
+                width: 15px;
+                height: 15px;
+                margin-left: 15px;
+                background-image: url("../../assets/images/projectadd/enclosure.png");
+            }
+        }
+        .btn {
+            display: flex;
+            justify-content: center;
+        }
+        .text {
+            color: rgba(153, 155, 163, 1);
+            font-size: 14px;
+            margin-left: 223px;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/system/SystemManage.vue b/src/views/system/SystemManage.vue
index e69de29b..973a625a 100644
--- a/src/views/system/SystemManage.vue
+++ b/src/views/system/SystemManage.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="systemManage">
+    <div
+      style="
+        width: 130px;
+        height: 40px;
+        background: #388be1;
+        border-radius: 8px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      "
+      @click="showDrawer"
+    >
+      添加投票
+    </div>
+    <div>
+      <a-drawer
+        v-model:visible="visible"
+        class="drawerStyle"
+        style="color: red"
+        width="70%"
+        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="vote">
+            <div style="font-size: 20px">*</div>
+            <div>投票名称：</div>
+            <div>
+              <a-input v-model:value="value" placeholder="请输入投票名称" />
+            </div>
+          </div>
+          <!-- 投票名称 -->
+        </div>
+      </a-drawer>
+    </div>
+  </div>
+</template>
+<script>
+import { reactive, toRefs } from "vue";
+
+export default {
+  name: "SystemManage",
+  setup() {
+    const state = reactive({
+      visible: true,
+    });
+
+    const afterVisibleChange = (bool) => {
+      console.log("visible", bool);
+    };
+
+    const showDrawer = () => {
+      state.visible = true;
+    };
+    const closeDrawer = () => {
+      state.visible = false;
+    };
+    return {
+      ...toRefs(state),
+      afterVisibleChange,
+      showDrawer,
+      closeDrawer,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.systemManage {
+  width: 100%;
+}
+.drawerStyle {
+  .ant-drawer-content-wrapper {
+    max-width: 1000px;
+    .ant-drawer-header {
+      display: none !important;
+    }
+    .ant-drawer-body {
+      padding: 0;
+    }
+  }
+  .drawerMain {
+    min-width: 600px;
+    margin: 0px 32px 0px 32px;
+    overflow-x: scroll;
+    display: flex;
+    flex-direction: column;
+    .header {
+      height: 73px;
+      border-bottom: 1px solid #e8e8e8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .headerTitle {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 25px;
+        margin-left: 24px;
+      }
+    }
+    .vote {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+</style>