diff --git a/src/App.vue b/src/App.vue
index 0013bb0..a97c632 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -56,6 +56,36 @@ export default defineComponent({
   width: 100%;
   min-height: 100%;
   background-color: rgba(242, 245, 247, 1);
+  // background-color: #ccc;
+  #nav {
+    width: 220px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    padding: 30px 0;
+    box-sizing: border-box;
+    background: #f1f1f1;
+    box-shadow: 0 5px 15px 8px rgba(1, 22, 54, 0.795);
+
+    .link {
+      text-decoration: none;
+      color: rgb(0, 0, 0);
+      padding: 10px;
+      transition: all 0.4s;
+      text-align: center;
+
+      &:hover {
+        background: rgba(4, 37, 223, 0.274);
+        color: #f1f1f1;
+      }
+
+      &.active {
+        color: #f1f1f1;
+        background: rgba(17, 120, 255, 0.74);
+      }
+    }
+  }
   main {
     flex: 1;
     width: 100%;
diff --git a/src/views/examination/ExamPage.vue b/src/views/examination/ExamPage.vue
new file mode 100644
index 0000000..2bd90e4
--- /dev/null
+++ b/src/views/examination/ExamPage.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="surveydetail">
+    <!-- 面包屑导航 -->
+    <div
+      style="display: flex; align-items: center; justify-content: space-between"
+    >
+      <div class="crumb">
+        <div>混合制项目</div>
+        <div style="margin-left: 6px; margin-right: 6px">/</div>
+        <div>管理者进阶-腾飞班</div>
+        <div style="margin-left: 6px; margin-right: 6px">/</div>
+        <div style="font-weight: 700; font-size: 16px">考试详情</div>
+      </div>
+      <div class="prevnext">
+        <div class="prev">
+          <img
+            style="width: 23px; height: 23px"
+            src="../../assets/image/prev.png"
+          />
+          <div style="margin-left: 7px">上一个</div>
+        </div>
+        <div class="prev" style="margin-left: 31px">
+          <div style="margin-right: 7px">下一个</div>
+          <img
+            style="width: 23px; height: 23px"
+            src="../../assets/image/next.png"
+          />
+        </div>
+      </div>
+    </div>
+    <!-- 面包屑导航 -->
+    <!-- 标题 -->
+    <div class="title">【调研】管理者进阶腾飞班 - 培训阶段性考试</div>
+    <!-- 标题 -->
+    <!-- 详细内容 -->
+    <div class="bascinfo">
+      <div></div>
+    </div>
+    <!-- 详细内容 -->
+  </div>
+</template>
+<script>
+export default {
+  name: "ExamPage",
+};
+</script>
+<style scoped lang="scss">
+.surveydetail {
+  .crumb {
+    color: #fff;
+    display: flex;
+    font-size: 14px;
+    line-height: 24px;
+  }
+  .prevnext {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 500;
+    color: #ffffff;
+    .prev {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+  }
+  .title {
+    font-size: 20px;
+    font-weight: 800;
+    color: #ffffff;
+    line-height: 24px;
+    margin-top: 17px;
+    margin-left: -11px;
+  }
+  .bascinfo {
+    width: 100%;
+    background: #ffffff;
+    border-radius: 8px;
+    margin-top: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+</style>