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 9628b7ba..32139a04 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 = [
             {
diff --git a/src/components/NavLeft.vue b/src/components/NavLeft.vue
index 2ef66aed..a2bff243 100644
--- a/src/components/NavLeft.vue
+++ b/src/components/NavLeft.vue
@@ -251,6 +251,12 @@ export default {
           selectedKeys: "sub1",
           pagename: "学习路径",
         },
+        {
+          href: "/leveladd",
+          openKeys: "sub1",
+          selectedKeys: "sub1",
+          pagename: "创建关卡",
+        },
         {
           href: "/projectmanage",
           openKeys: "sub2",
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