diff --git a/package-lock.json b/package-lock.json
index 15eeab2c..9a92ba29 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "ant-design-vue": "^3.2.12",
         "core-js": "^3.8.3",
         "element-plus": "^2.2.17",
+        "jquery": "^3.6.1",
         "vue": "^3.2.13",
         "vue-router": "^4.0.3",
         "vuex": "^4.0.0"
@@ -6824,6 +6825,11 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.6.1.tgz",
+      "integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw=="
+    },
     "node_modules/js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
@@ -16576,6 +16582,11 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
+    "jquery": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.6.1.tgz",
+      "integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw=="
+    },
     "js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
diff --git a/package.json b/package.json
index 23f7691a..f7f60daa 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "ant-design-vue": "^3.2.12",
     "core-js": "^3.8.3",
     "element-plus": "^2.2.17",
+    "jquery": "^3.6.1",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",
     "vuex": "^4.0.0"
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/leveladd/back.png b/src/assets/images/leveladd/back.png
new file mode 100644
index 00000000..4e9e5f8b
Binary files /dev/null and b/src/assets/images/leveladd/back.png differ
diff --git a/src/assets/images/leveladd/ma.png b/src/assets/images/leveladd/ma.png
new file mode 100644
index 00000000..9a4996b1
Binary files /dev/null and b/src/assets/images/leveladd/ma.png differ
diff --git a/src/assets/images/leveladd/more.png b/src/assets/images/leveladd/more.png
new file mode 100644
index 00000000..d1c08d0e
Binary files /dev/null and b/src/assets/images/leveladd/more.png differ
diff --git a/src/assets/images/leveladd/pub.png b/src/assets/images/leveladd/pub.png
new file mode 100644
index 00000000..7813185d
Binary files /dev/null and b/src/assets/images/leveladd/pub.png differ
diff --git a/src/components/BreadCrumb.vue b/src/components/BreadCrumb.vue
index f1d2e889..c72e0058 100644
--- a/src/components/BreadCrumb.vue
+++ b/src/components/BreadCrumb.vue
@@ -42,6 +42,17 @@ export default {
             },
           ];
         }
+        if (n === "/leveladd" || n === "/LevelAdd") {
+          state.list = [
+            {
+              name: "学习路径",
+              href: "/learningpath",
+            },
+            {
+              name: "创建关卡",
+            },
+          ];
+        }
         if (n === "/projectmanage" || n === "/ProjectManage") {
           state.list = [
             {
@@ -66,6 +77,7 @@ export default {
             },
           ];
         }
+
         if (n === "/templatelibrary" || n === "/TemplateLibrary") {
           state.list = [
             {
@@ -99,12 +111,19 @@ export default {
             },
           ];
         }
+<<<<<<< HEAD
         if (n === "/researchmanage" || n === "/ResearchManage") {
           state.list = [
             {
               name: "调研管理",
               href: "",
               // href: "#/researchmanage",
+=======
+        if (n === "/systemmanage" || n === "/SystemManage") {
+          state.list = [
+            {
+              name: "系统管理",
+>>>>>>> e4c5bddd27044684b5bca09f3451b40713469f3a
             },
           ];
         }
diff --git a/src/components/NavLeft.vue b/src/components/NavLeft.vue
index 5ded85e1..e28ef8ff 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>
@@ -251,6 +251,12 @@ export default {
           selectedKeys: "sub1",
           pagename: "学习路径",
         },
+        {
+          href: "/leveladd",
+          openKeys: "sub1",
+          selectedKeys: "sub1",
+          pagename: "创建关卡",
+        },
         {
           href: "/projectmanage",
           openKeys: "sub2",
@@ -281,6 +287,12 @@ export default {
           selectedKeys: "sub3-2",
           pagename: "课程管理",
         },
+        {
+          href: "/systemmanage",
+          openKeys: "sub9",
+          selectedKeys: "sub9",
+          pagename: "系统管理",
+        },
         {
           href: "/researchmanage",
           openKeys: "sub5",
diff --git a/src/components/OpenPages.vue b/src/components/OpenPages.vue
index c8a1bad1..becbeca6 100644
--- a/src/components/OpenPages.vue
+++ b/src/components/OpenPages.vue
@@ -79,6 +79,7 @@ export default {
   overflow-x: auto;
   .openItems {
     width: 272px;
+    // min-width: 250px;
     height: 50px;
     border: 1px solid #edf2fa;
     border-left: 0px;
diff --git a/src/views/TestPage.vue b/src/views/TestPage.vue
new file mode 100644
index 00000000..7cdfd951
--- /dev/null
+++ b/src/views/TestPage.vue
@@ -0,0 +1,245 @@
+<template>
+  <div class="testPage">
+    <h2>div横向拖拽排序</h2>
+
+    <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>
+  </div>
+</template>
+<script>
+import { reactive, toRefs } from "vue";
+import $ from "jquery";
+export default {
+  name: "TestPage",
+  setup() {
+    const state = reactive({});
+
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+
+$(document).ready(function () {
+  var range = { x: 0, y: 0 }; //鼠标元素偏移量
+  var lastPos = { x: 0, y: 0, x1: 0, y1: 0 }; //拖拽对象的四个坐标
+
+  var tarPos = { x: 0, y: 0, x1: 0, y1: 0 }; //目标元素对象的坐标初始化
+
+  var theDiv = null,
+    move = false;
+
+  var choose = false; //拖拽对象 拖拽状态 选中状态
+
+  // var theDivId = 0;
+  // var theDivHeight = 0;
+  var theDivHalf = 0;
+
+  // var tarFirstY = 0; //拖拽对象的索引、高度、的初始化。
+
+  var tarDiv = null,
+    tarFirst,
+    tempDiv; //要插入的目标元素的对象, 临时的虚线对象
+
+  var initPos = { x: 0, y: 0 };
+
+  var theDivWidth; //拖拽对象的宽度
+
+  $(".drag").each(function () {
+    $(this).mousedown(function (event) {
+      choose = true;
+
+      //拖拽对象
+
+      theDiv = $(this);
+
+      //记录拖拽元素初始位置
+
+      initPos.x = theDiv.position().left;
+
+      initPos.y = theDiv.position().top;
+
+      //鼠标元素相对偏移量
+
+      range.x = event.pageX - theDiv.position().left;
+
+      range.y = event.pageY - theDiv.position().top;
+
+      //  theDivId = theDiv.index();
+
+      theDivWidth = theDiv.width();
+
+      theDivHalf = theDivWidth / 2;
+
+      theDiv.removeClass("drag");
+
+      theDiv.addClass("drag-dash");
+
+      theDiv.css({ left: initPos.x + "px", top: initPos.y + "px" });
+
+      // 创建新元素 插入拖拽元素之前的位置(虚线框)
+
+      $("<div class='dash'></div>").insertBefore(theDiv);
+
+      tempDiv = $(".dash");
+
+      $(".dash").css("width", theDivWidth);
+
+      return false;
+    });
+  });
+
+  $(document)
+    .mouseup(function () {
+      if (!choose) {
+        return false;
+      }
+
+      if (!move) {
+        //恢复对象的初始样式
+
+        theDiv.removeClass("drag-dash");
+
+        theDiv.addClass("drag");
+
+        tempDiv.remove(); // 删除新建的虚线div
+
+        choose = false;
+
+        return false;
+      }
+
+      theDiv.insertBefore(tempDiv); // 拖拽元素插入到 虚线div的位置上
+
+      //恢复对象的初始样式
+
+      theDiv.removeClass("drag-dash");
+
+      theDiv.addClass("drag");
+
+      tempDiv.remove(); // 删除新建的虚线div
+
+      move = false;
+
+      choose = false;
+
+      return false;
+    })
+    .mousemove(function (event) {
+      if (!choose) {
+        return false;
+      }
+
+      move = true;
+
+      lastPos.x = event.pageX - range.x;
+
+      lastPos.y = event.pageY - range.y;
+
+      lastPos.x1 = lastPos.x + theDivWidth;
+
+      // 拖拽元素随鼠标移动
+
+      theDiv.css({ left: lastPos.x + "px", top: lastPos.y + "px" });
+
+      // 拖拽元素随鼠标移动 查找插入目标元素
+
+      var $main = $(".drag"); // 局部变量：按照重新排列过的顺序 再次获取 各个元素的坐标，
+
+      $main.each(function () {
+        tarDiv = $(this);
+
+        tarPos.x = tarDiv.position().left;
+
+        tarPos.y = tarDiv.position().top;
+
+        tarPos.x1 = tarPos.x + tarDiv.width() / 2;
+
+        tarFirst = $main.eq(0); // 获得第一个元素\
+
+        let tarFirstX = tarFirst.position().left + theDivHalf; // 第一个元素对象的中心纵坐标
+
+        //拖拽对象 移动到第一个位置
+
+        if (lastPos.x <= tarFirstX) {
+          tempDiv.insertBefore(tarFirst);
+        }
+
+        //判断要插入目标元素的 坐标后， 直接插入
+
+        if (lastPos.x >= tarPos.x - theDivHalf && lastPos.x1 >= tarPos.x1) {
+          tempDiv.insertAfter(tarDiv);
+        }
+      });
+
+      return false;
+    });
+});
+</script>
+<style scoped lang="scss">
+.testPage {
+  width: 100%;
+  display: flex;
+  background-color: rgba(255, 255, 255, 1);
+  box-shadow: 0px 8px 8px 0px rgba(118, 136, 166, 0.1);
+  overflow-x: auto;
+  .box {
+    position: relative;
+
+    margin-left: 15px;
+
+    padding: 10px;
+
+    padding-right: 0px;
+
+    width: 810px;
+
+    border: blue solid 1px;
+  }
+
+  .box ul {
+    list-style: none;
+
+    overflow: hidden;
+
+    padding: 0;
+
+    margin: 0;
+  }
+
+  .drag {
+    float: left;
+
+    border: #000 solid 1px;
+
+    text-align: center;
+  }
+
+  .box ul li a {
+    display: block;
+
+    padding: 10px 25px;
+  }
+
+  .drag-dash {
+    position: absolute;
+
+    border: #000 solid 1px;
+
+    background: #ececec;
+  }
+
+  .dash {
+    float: left;
+
+    border: 1px solid transparent;
+  }
+}
+</style>
diff --git a/src/views/learningpath/LearningPath.vue b/src/views/learningpath/LearningPath.vue
index e8f0f522..6571d681 100644
--- a/src/views/learningpath/LearningPath.vue
+++ b/src/views/learningpath/LearningPath.vue
@@ -71,6 +71,7 @@
         :data-source="tableData"
         :loading="tableDataTotal === -1 ? true : false"
         expandRowByClick="true"
+        :scroll="{ x: 1600, y: 800 }"
         @expand="expandTable"
         :pagination="
           tableDataTotal > 10
@@ -319,7 +320,10 @@ export default {
                     发布
                   </span>
                   <span style={{ "margin-left": "25px" }}>编辑</span>
-                  <span style={{ "margin-left": "25px" }}>关卡</span>
+                  <router-link to="/leveladd">
+                    <span style={{ "margin-left": "25px" }}>关卡</span>
+                  </router-link>
+
                   <span style={{ "margin-left": "25px" }} class="more">
                     <span>授权</span>
                     <div class="moreArrow"></div>
diff --git a/src/views/learningpath/LevelAdd.vue b/src/views/learningpath/LevelAdd.vue
new file mode 100644
index 00000000..357e244a
--- /dev/null
+++ b/src/views/learningpath/LevelAdd.vue
@@ -0,0 +1,555 @@
+<template>
+  <div class="addwrapper">
+    <div class="addhead">
+      <div class="leftimg">
+        <img class="img" src="../../assets/px.jpg" />
+      </div>
+      <div class="imgfor">
+        <div class="forz">产品经理进阶路径</div>
+        <div class="fort">创建时间：2022-07-21 00:00</div>
+      </div>
+      <div class="right">
+        <img class="img1" src="../../assets/images/leveladd/ma.png" />
+        <div class="line"></div>
+        <img class="img2" src="../../assets/images/leveladd/pub.png" />
+        <div class="pub">发布</div>
+        <div class="line"></div>
+        <img
+          style="margin-right: 15px"
+          class="img2"
+          src="../../assets/images/leveladd/more.png"
+        />
+        <div class="more">
+          <span style="color: #7096e3">更多</span>
+          <div class="moreArrow"></div>
+          <div class="moreItems">
+            <div class="sammo">撤回</div>
+            <div class="sammo">复制</div>
+          </div>
+        </div>
+        <div class="line"></div>
+        <img class="img2" src="../../assets/images/leveladd/back.png" />
+        <router-link to="/learningpath">
+          <div class="return">返回</div></router-link
+        >
+      </div>
+    </div>
+    <div class="split"></div>
+    <div class="bom clearfix">
+      <a-tabs
+        class="tab"
+        v-model:activeKey="activeKey"
+        size="large"
+        :tabBarStyle="{ marginLeft: '10px' }"
+      >
+        <a-tab-pane key="1" tab="路径管理">
+          <div class="cont">
+            <div class="pad"></div>
+            <div class="sametab">
+              <div class="Lhead">
+                <a-input
+                  v-model:value="value"
+                  style="width: 270px; height: 40px; border-radius: 8px"
+                  placeholder="关卡名称"
+                />
+                <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" @click="handleOut">
+                    <div class="search"></div>
+                    <div class="btnText">创建关卡</div>
+                  </div>
+                </div>
+              </div>
+              <div class="Lbom">
+                <div class="item" v-for="item in level" :key="item.id">
+                  <div class="itemhead">
+                    <div class="lev">{{ item.lev }}</div>
+                    <div class="lin"></div>
+                    <div class="nam">{{ item.name }}</div>
+                    <div class="count">
+                      <span>当前关卡</span>
+                      <span>{{ item.count }}</span>
+                      <span>个人</span>
+                    </div>
+                  </div>
+                  <div class="itembomm">
+                    <div class="it">
+                      <div class="on" style="color: #ffb145">
+                        {{ item.online }}
+                      </div>
+                      <div class="ittext">在线</div>
+                    </div>
+                    <div class="linee"></div>
+                    <div class="it">
+                      <div class="on" style="color: #ff89a4">
+                        {{ item.homework }}
+                      </div>
+                      <div class="ittext">作业</div>
+                    </div>
+                    <div class="linee"></div>
+                    <div class="it">
+                      <div class="on" style="color: #3fc5e3">
+                        {{ item.juan }}
+                      </div>
+                      <div class="ittext">问卷</div>
+                    </div>
+                    <div class="linee"></div>
+                    <div class="it">
+                      <div class="on" style="color: #5be1c0">
+                        {{ item.ballot }}
+                      </div>
+                      <div class="ittext">投票</div>
+                    </div>
+                    <div class="linee"></div>
+                    <div class="it">
+                      <div class="on" style="color: #a498ff">
+                        {{ item.test }}
+                      </div>
+                      <div class="ittext">考试</div>
+                    </div>
+                    <div class="linee"></div>
+                    <div class="itright">
+                      <span class="te">编辑</span>
+                      <span class="more">
+                        <span class="te" style="margin-left: 20px">更多</span>
+                        <div class="moreArrow"></div>
+                        <div class="moreItems"></div>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="pad"></div>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="学员管理" force-render
+          ><div class="sametab">ccc</div></a-tab-pane
+        >
+        <a-tab-pane key="3" tab="设置">
+          <div class="sametab">eee</div></a-tab-pane
+        >
+      </a-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, reactive, toRefs } from "vue";
+export default {
+  name: "LevelAdd",
+  components: {},
+  methods: {},
+  setup() {
+    const state = reactive({
+      activeKey: ref("1"),
+      value: ref(" "),
+      level: [
+        {
+          id: 1,
+          lev: "关卡2",
+          name: "中级产品经理",
+          count: 3,
+          online: 5,
+          homework: 1,
+          juan: 1,
+          ballot: 1,
+          test: 1,
+        },
+        {
+          id: 2,
+          lev: "关卡2",
+          name: "初级产品经理",
+          count: 3,
+          online: 5,
+          homework: 1,
+          juan: 1,
+          ballot: 1,
+          test: 1,
+        },
+      ],
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss" >
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  display: block;
+  clear: both;
+}
+.addwrapper {
+  width: 100%;
+  height: 100%;
+  // background-color: green;
+  .addhead {
+    width: 100%;
+    height: 130px;
+    // background-color: lightgreen;
+    display: flex;
+    align-items: center;
+    position: relative;
+    .leftimg {
+      width: 151px;
+      height: 100px;
+      border: 10px solid #e7f2ff;
+      border-radius: 8px;
+      margin-left: 20px;
+      .img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .imgfor {
+      margin-left: 32px;
+      .forz {
+        color: #363636;
+        font-size: 16px;
+      }
+      .fort {
+        color: #878b92;
+        font-size: 14px;
+        margin-top: 20px;
+      }
+    }
+    @media screen and (max-width: 1030px) {
+      .imgfor {
+        margin-left: 20px;
+      }
+    }
+    .right {
+      // width: 500px;
+      height: 100%;
+      // background-color: red;
+      position: absolute;
+      right: 0;
+      display: flex;
+      align-items: center;
+      .img1 {
+        width: 24px;
+        height: 24px;
+        margin-right: 50px;
+      }
+      .line {
+        height: 65%;
+        width: 1px;
+        background-color: #e8effa;
+        margin-right: 28px;
+      }
+      .img2 {
+        width: 42px;
+        height: 42px;
+        margin-right: 22px;
+      }
+      .pub {
+        color: #ffb64e;
+        font-size: 14px;
+        margin-top: 5px;
+        margin-right: 30px;
+      }
+      .return {
+        color: #4ea6ff;
+        font-size: 14px;
+        margin-top: 5px;
+        margin-right: 60px;
+      }
+
+      .more {
+        position: relative;
+        margin-right: 30px;
+
+        .moreArrow {
+          width: 13px;
+          height: 7px;
+          display: inline-block;
+          background-image: url("../../assets/images/navtop/down.png");
+          background-size: 100%;
+          margin: 2px;
+          margin-left: 15px;
+        }
+        .moreItems {
+          width: 110px;
+          height: 80px;
+          display: none;
+          background: #ffffff;
+          box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
+          // border-radius: 3px;
+          border: 0px solid #dcdcdc;
+          position: absolute;
+          left: -48px;
+          top: 28px;
+          z-index: 100;
+          .sammo {
+            text-align: center;
+            margin-top: 12px;
+          }
+          .sammo:hover {
+            color: #4ea6ff;
+          }
+        }
+        .moreItems:hover {
+          display: block;
+        }
+      }
+      @media screen and (max-width: 1240px) {
+        .line {
+          margin-right: 10px;
+        }
+        .img1 {
+          margin-right: 15px;
+        }
+        .img2 {
+          margin-right: 10px;
+        }
+        .return {
+          margin-right: 10px;
+        }
+        .pub {
+          margin-right: 10px;
+        }
+
+        .more {
+          margin-right: 10px;
+        }
+      }
+
+      .more:hover .moreArrow {
+        background-image: url("../../assets/images/navtop/up.png");
+      }
+      .more:hover .moreItems {
+        display: block;
+      }
+    }
+  }
+
+  .split {
+    width: 100%;
+    height: 20px;
+    background-color: #edf0f5;
+  }
+  .bom {
+    .tab {
+      margin-top: 10px;
+      // margin-left: 10px;
+    }
+    .cont {
+      display: flex;
+      .pad {
+        height: 100%;
+        width: 40px;
+        background-color: red;
+      }
+      .sametab {
+        // margin-left: 30px;
+        // margin-right: 30px;
+        margin-top: 30px;
+        width: 100%;
+        // background-color: green;
+        .Lhead {
+          display: flex;
+          .btns {
+            display: flex;
+            margin-left: 20px;
+            // 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;
+              cursor: pointer;
+              .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 {
+              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;
+              }
+            }
+          }
+        }
+        .Lbom {
+          position: relative;
+          .item {
+            width: 100%;
+            height: 200px;
+            // background-color: green;
+            margin-top: 40px;
+            border-radius: 8px;
+            border: 1px solid #f0f4fe;
+            .itemhead {
+              height: 50px;
+              width: 100%;
+              background-color: #f0f4fe;
+              display: flex;
+              align-items: center;
+              position: relative;
+              .lev {
+                margin-left: 27px;
+                margin-right: 16px;
+                line-height: 100%;
+                color: #409eff;
+                font-size: 16px;
+              }
+              .lin {
+                width: 1px;
+                height: 35%;
+                background-color: #c7cbd2;
+              }
+              .nam {
+                margin-left: 16px;
+                color: #4f5156;
+                line-height: 100%;
+                font-size: 16px;
+              }
+              .count {
+                position: absolute;
+                line-height: 100%;
+                color: #4f5156;
+                font-size: 14px;
+                right: 40px;
+                span:nth-child(2) {
+                  color: #63ca8c;
+                }
+              }
+            }
+            .itembomm {
+              display: flex;
+              align-items: center;
+              height: 150px;
+              .it {
+                // margin-left: 110px;
+                // margin-right: 110px;
+                width: 13%;
+                text-align: center;
+                .on {
+                  font-size: 30px;
+                }
+                .ittext {
+                  color: #4f5156;
+                  margin-top: 16px;
+                  margin-left: -5px;
+                }
+              }
+              .linee {
+                background-color: #ecf2fb;
+                width: 1px;
+                height: 55%;
+              }
+              .itright {
+                position: absolute;
+                right: 45px;
+                .te {
+                  color: #4ea6ff;
+                  font-size: 14px;
+                }
+              }
+              .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;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</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>