diff --git a/src/assets/images/basicinfo/add.png b/src/assets/images/basicinfo/add.png
new file mode 100644
index 00000000..4a173bdd
Binary files /dev/null and b/src/assets/images/basicinfo/add.png differ
diff --git a/src/assets/images/basicinfo/close22.png b/src/assets/images/basicinfo/close22.png
new file mode 100644
index 00000000..897eb67b
Binary files /dev/null and b/src/assets/images/basicinfo/close22.png differ
diff --git a/src/components/BreadCrumb.vue b/src/components/BreadCrumb.vue
index 78e6e7d2..493bd4a5 100644
--- a/src/components/BreadCrumb.vue
+++ b/src/components/BreadCrumb.vue
@@ -144,7 +144,15 @@ export default {
             {
               name: "管理",
               href: "",
-            }
+            },
+          ];
+        }
+
+        if (n === "/certificatecenter" || n === "/CertificateCenter") {
+          state.list = [
+            {
+              name: "证书中心",
+            },
           ];
         }
         if (n === "/systemmanage" || n === "/SystemManage") {
diff --git a/src/components/NavLeft.vue b/src/components/NavLeft.vue
index a724b761..37cc13bd 100644
--- a/src/components/NavLeft.vue
+++ b/src/components/NavLeft.vue
@@ -144,7 +144,8 @@
               src="../assets/images/navleft/certificate.png"
             />
           </div>
-          <span>证书中心</span>
+
+          <router-link to="/certificatecenter">证书中心</router-link>
         </a-menu-item>
         <a-menu-item key="sub9" @titleClick="titleClick">
           <div class="imgBox">
@@ -293,6 +294,13 @@ export default {
           selectedKeys: "sub3-2",
           pagename: "课程管理",
         },
+        {
+          href: "/certificatecenter",
+          openKeys: "sub8",
+          selectedKeys: "sub8",
+          pagename: "证书中心",
+        },
+
         {
           href: "/systemmanage",
           openKeys: "sub9",
diff --git a/src/views/certificate/CertificateCenter.vue b/src/views/certificate/CertificateCenter.vue
index e69de29b..d9c6155d 100644
--- a/src/views/certificate/CertificateCenter.vue
+++ b/src/views/certificate/CertificateCenter.vue
@@ -0,0 +1,366 @@
+<template>
+  <div class="certificateCenter">
+    <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="showModal"
+    >
+      新建面授课
+    </div>
+    <div>
+      <a-modal
+        v-model:visible="visible"
+        title="Title"
+        @ok="closeModal"
+        :footer="null"
+        :closable="false"
+        wrapClassName="modalStyle"
+      >
+        <div class="modalHeader">
+          <div class="headerLeft">
+            <img
+              style="width: 17px; height: 18px; margin-right: 8px"
+              src="../../assets/images/basicinfo/add.png"
+            />
+            <span class="headerLeftText">新建面授课</span>
+          </div>
+          <div style="margin-right: 57px; cursor: pointer">
+            <img
+              style="width: 22px; height: 22px"
+              src="../../assets/images/basicinfo/close22.png"
+            />
+          </div>
+        </div>
+        <div class="modalMain">
+          <div class="title">课程信息</div>
+          <div style="display: flex; margin-top: 10px">
+            <div class="modalMainLeft">
+              <!-- 投票名称 -->
+              <div class="vote">
+                <div class="votebox">
+                  <img
+                    class="voteimg"
+                    src="../../assets/images/basicinfo/asterisk.png"
+                  />
+                  <div class="votename">投票名称：</div>
+                </div>
+                <div class="modalMainInp">
+                  <a-input v-model:value="value" placeholder="请输入投票名称" />
+                </div>
+              </div>
+              <!-- 投票名称 -->
+              <!-- 投票名称 -->
+              <div class="vote">
+                <div class="votebox">
+                  <img
+                    class="voteimg"
+                    src="../../assets/images/basicinfo/asterisk.png"
+                  />
+                  <div class="votename">投票名称：</div>
+                </div>
+                <div class="modalMainInp">
+                  <a-input v-model:value="value" placeholder="请输入投票名称" />
+                </div>
+              </div>
+              <!-- 投票名称 -->
+              <!-- 投票名称 -->
+              <div class="vote">
+                <div class="votebox">
+                  <img
+                    class="voteimg"
+                    src="../../assets/images/basicinfo/asterisk.png"
+                  />
+                  <div class="votename">投票名称：</div>
+                </div>
+                <div class="modalMainInp">
+                  <a-input v-model:value="value" placeholder="请输入投票名称" />
+                </div>
+              </div>
+              <!-- 投票名称 -->
+              <!-- 投票名称 -->
+              <div class="vote">
+                <div class="votebox">
+                  <img
+                    class="voteimg"
+                    src="../../assets/images/basicinfo/asterisk.png"
+                  />
+                  <div class="votename">投票名称：</div>
+                </div>
+                <div class="modalMainInp">
+                  <a-input v-model:value="value" placeholder="请输入投票名称" />
+                </div>
+              </div>
+              <!-- 投票名称 -->
+              <!-- 投票名称 -->
+              <div class="vote">
+                <div class="votebox">
+                  <img
+                    class="voteimg"
+                    src="../../assets/images/basicinfo/asterisk.png"
+                  />
+                  <div class="votename">投票名称：</div>
+                </div>
+                <div class="modalMainInp">
+                  <a-input v-model:value="value" placeholder="请输入投票名称" />
+                </div>
+              </div>
+              <!-- 投票名称 -->
+              <!-- 投票名称 -->
+              <div class="vote">
+                <div class="votebox">
+                  <img
+                    class="voteimg"
+                    src="../../assets/images/basicinfo/asterisk.png"
+                  />
+                  <div class="votename">投票名称：</div>
+                </div>
+                <div class="modalMainInp">
+                  <a-input v-model:value="value" placeholder="请输入投票名称" />
+                </div>
+              </div>
+              <!-- 投票名称 -->
+              <!-- 投票名称 -->
+              <div class="vote">
+                <div class="votebox">
+                  <img
+                    class="voteimg"
+                    src="../../assets/images/basicinfo/asterisk.png"
+                  />
+                  <div class="votename">投票名称：</div>
+                </div>
+                <div class="modalMainInp">
+                  <a-input v-model:value="value" placeholder="请输入投票名称" />
+                </div>
+              </div>
+              <!-- 投票名称 -->
+              <!-- 投票名称 -->
+              <div class="vote">
+                <div class="votebox">
+                  <img
+                    class="voteimg"
+                    src="../../assets/images/basicinfo/asterisk.png"
+                  />
+                  <div class="votename">投票名称：</div>
+                </div>
+                <div class="modalMainInp">
+                  <a-input v-model:value="value" placeholder="请输入投票名称" />
+                </div>
+              </div>
+              <!-- 投票名称 -->
+              <!-- 投票名称 -->
+              <div class="vote">
+                <div class="votebox">
+                  <img
+                    class="voteimg"
+                    src="../../assets/images/basicinfo/asterisk.png"
+                  />
+                  <div class="votename">投票名称：</div>
+                </div>
+                <div class="modalMainInp">
+                  <a-input v-model:value="value" placeholder="请输入投票名称" />
+                </div>
+              </div>
+              <!-- 投票名称 -->
+              <!-- 投票名称 -->
+              <div class="vote">
+                <div class="votebox">
+                  <img
+                    class="voteimg"
+                    src="../../assets/images/basicinfo/asterisk.png"
+                  />
+                  <div class="votename">投票名称：</div>
+                </div>
+                <div class="modalMainInp">
+                  <a-input v-model:value="value" placeholder="请输入投票名称" />
+                </div>
+              </div>
+              <!-- 投票名称 -->
+            </div>
+            <div class="modalMainLeft">
+              <!-- 投票名称 -->
+              <div class="vote">
+                <div class="votebox">
+                  <img
+                    class="voteimg"
+                    src="../../assets/images/basicinfo/asterisk.png"
+                  />
+                  <div class="votename">投票名称：</div>
+                </div>
+                <div class="modalMainInp">
+                  <a-input v-model:value="value" placeholder="请输入投票名称" />
+                </div>
+              </div>
+              <!-- 投票名称 -->
+            </div>
+          </div>
+        </div>
+      </a-modal>
+    </div>
+  </div>
+</template>
+<script>
+import { reactive, toRefs, onMounted, onUnmounted } from "vue";
+
+export default {
+  name: "CertificateCenter",
+  setup() {
+    const state = reactive({
+      visible: true,
+      loading: false,
+      screenHeight: document.body.clientHeight, // 屏幕高度
+    });
+
+    const afterVisibleChange = (bool) => {
+      console.log("visible", bool);
+    };
+
+    const showModal = () => {
+      state.visible = true;
+    };
+    const closeModal = () => {
+      state.visible = false;
+    };
+    const getMousePosition = () => {
+      state.screenHeight = document.body.clientHeight;
+    };
+
+    onMounted(() => {
+      // console.log("11111", 1);
+      window.addEventListener("resize", getMousePosition, false);
+      // judgeUrl();
+    });
+    onUnmounted(() => {
+      window.removeEventListener("resize", getMousePosition, false);
+    });
+
+    return {
+      ...toRefs(state),
+      afterVisibleChange,
+      showModal,
+      closeModal,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.certificateCenter {
+  width: 100%;
+}
+.modalStyle {
+  height: 100%;
+  .ant-modal {
+    height: calc(100% - 200px);
+    width: 80% !important;
+    background-color: rgba(255, 255, 255, 1);
+    // overflow-y: scroll;
+    min-width: 900px;
+    max-width: 1300px;
+    padding: 0;
+    .ant-modal-content {
+      width: 100%;
+      height: 100%;
+    }
+    .ant-modal-body {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+    .ant-modal-header {
+      display: none;
+    }
+    .ant-modal-body {
+      padding: 0px;
+    }
+    .modalHeader {
+      width: 100%;
+      height: 68px;
+      background: linear-gradient(
+        0deg,
+        rgba(78, 166, 255, 0) 0%,
+        rgba(78, 166, 255, 0.2) 100%
+      );
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .headerLeft {
+        margin-left: 27px;
+        display: flex;
+        align-items: center;
+        .headerLeftText {
+          font-size: 16px;
+          font-weight: 400;
+          color: #000000;
+          line-height: 36px;
+        }
+      }
+    }
+    .modalMain {
+      height: 0px;
+      flex: 1 1 auto;
+      overflow-y: scroll;
+      margin-top: 7px;
+      margin: 0px 52px;
+
+      .title {
+        font-size: 14px;
+        font-weight: 500;
+        color: #4f5156;
+        line-height: 36px;
+      }
+      .modalMainLeft {
+        width: 50%;
+        height: 300px;
+        padding-left: 35px;
+        padding-right: 44px;
+        // background-color: red;
+
+        .vote {
+          display: flex;
+          align-items: center;
+          padding-bottom: 30px;
+          .votebox {
+            width: 100px;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            // background-color: pink;
+            .voteimg {
+              width: 10px;
+              height: 10px;
+              margin-right: 5px;
+            }
+            .votename {
+              font-size: 14px;
+              font-weight: 400;
+              color: #333333;
+              line-height: 20px;
+            }
+          }
+          .modalMainInp {
+            flex: 1;
+          }
+        }
+      }
+      .modalMainRight {
+        width: 50%;
+        height: 300px;
+        background-color: pink;
+      }
+    }
+  }
+}
+</style>