diff --git a/src/assets/image/pathmap/nostart.png b/src/assets/image/pathmap/nostart.png
new file mode 100644
index 0000000..e017353
Binary files /dev/null and b/src/assets/image/pathmap/nostart.png differ
diff --git a/src/views/activities/activities.vue b/src/views/activities/ActivitiesPage.vue
similarity index 97%
rename from src/views/activities/activities.vue
rename to src/views/activities/ActivitiesPage.vue
index 4a4fb01..e243ba0 100644
--- a/src/views/activities/activities.vue
+++ b/src/views/activities/ActivitiesPage.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="activities">
     <TitleHead text="【其他活动】管理者进阶腾飞班 - 专属线下活动"></TitleHead>
-     <div class="message">
+     <div class="message" >
           <div class="yes"></div>
           <div class="textmessage">签到成功</div>
           <div class="no"></div>
@@ -29,7 +29,7 @@
               </div>
             </div>
           </div>
-          <div class="titlebtn">签到</div>
+          <el-button class="titlebtn" @click="open">签到</el-button>
         </div>
       </div>
     </div> 
@@ -73,12 +73,15 @@
 // import { reactive, toRefs } from "vue";
 import TitleHead from "@/components/TitleHead.vue";
 export default {
-  name: "BallotPage",
+  name: "ActivitiesPage",
   components: {
     TitleHead,
   },
-  setup() {},
-};
+  setup() {
+
+  },
+
+}; 
 </script>
 
 <style lang="scss">
@@ -224,6 +227,7 @@ export default {
     .teachbox {
       width: 90%;
       // height: 200px;
+      margin-bottom: 29.5px;
       background: #fff;
       border-radius: 4px;
       position: relative;
@@ -232,6 +236,7 @@ export default {
       .teachmani {
         width: 90%;
         margin-top: 20px;
+        margin-bottom: 27.5px;
         .lefttitle {
           display: flex;
           position: relative;
diff --git a/src/views/pathmap/PathmapPage.vue b/src/views/pathmap/PathmapPage.vue
new file mode 100644
index 0000000..41bd916
--- /dev/null
+++ b/src/views/pathmap/PathmapPage.vue
@@ -0,0 +1,1174 @@
+<template>
+  <div class="pathmap">
+    <TitleHead text="中级产品经理"></TitleHead>
+    <div class="main">
+      <div class="title">
+        <div class="course">
+          <div style="width: 100%">
+            <el-tabs v-model="activeName" @tab-click="handleClick" tab-position="top" >
+              <el-tab-pane label="课程公告" name="first">
+                <div class="work">
+                  <div class="question">
+                    请各位选课的同学提前阅读本课程的“教学大纲与计划”
+                    “课程考核要求”与“学习要求”，并按给定的中学化学教学主题分好小组<br />
+                    每位同学在网上学习的活动轨迹都会自动被系统记录,将作为大家个人线上参与的评价依据；<br />
+                    请大家务必在规定的时间内提交作业，否则会被系统自动记录为“迟交”或“未交”，则会影响线上参与的平时成绩；
+                  </div>
+                </div>
+              </el-tab-pane>
+              <el-tab-pane label="共享文档" name="second" >
+                <div
+                  v-for="(el, index) in enclosure"
+                  :key="el.id"
+                  class="enclosure"
+                  :style="{
+                    'border-bottom':
+                      index === enclosure.length - 1
+                        ? null
+                        : '0px solid rgba(56, 125, 247, 0.2)',
+                  }"
+                >
+                  <div class="enclosureL">
+                    <img style="width: 19.5px; height: 22px" :src="el.img" />
+                    <div style="margin-left: 15px">{{ el.name }}</div>
+                  </div>
+                  <div class="download">
+                    <img
+                      style="width: 13px; height: 12px"
+                      src="../../assets/image/faceteach/download.png"
+                    />
+                    <div style="margin-left: 2.5px">下载</div>
+                  </div>
+                </div>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </div>
+      </div>
+      <div class="messaeg">
+        <div class="mani">
+          <div class="uptitle">
+            <div class="img"></div>
+            <div class="rightmain">
+              <div class="talk">个人信息</div>
+              <div class="box"></div>
+            </div>
+          </div>
+          <div class="information">
+            <div class="photo"></div>
+            <div class="description">
+              <span class="text1">乐晓琪（显示事业）</span>
+              <span class="text2">真正的陪伴经得起坎坷，经得起平淡。</span>
+            </div>
+          </div>
+          <div class="downtitle">
+            <div class="img"></div>
+            <div class="rightmain">
+              <div class="talk">学习进度</div>
+              <div class="box"></div>
+            </div>
+          </div>
+          <div class="speed">
+            <span class="text3">上次学到：启航班 - 领导寄语</span>
+            <button class="btn">去上课</button>
+          </div>
+          <div class="progress">
+            <div class="total">
+              <div class="total_part">
+                <span class="text4">总进度</span> <span class="text5">32%</span>
+              </div>
+              <div class="progress">
+                <div class="progress_part"></div>
+              </div>
+            </div>
+            <div class="compulsory">
+              <div class="compulsory_part">
+                <span class="text6">必修进度</span>
+                <span class="text7">10%</span>
+              </div>
+              <div class="progress1">
+                <div class="progress1_part"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="course1">
+        <div class="course1_box">
+          <div class="course1_first">
+            <div class="text8">序：产品经理从初级到中级</div>
+            <div class="course1_right">
+              <div class="circular"></div>
+              <div class="text9">进行中</div>
+            </div>
+          </div>
+          <div class="course1_second">
+            <div class="course1_part">
+              <span class="text6">当前进度</span>
+              <span class="text7">70%</span>
+            </div>
+            <div class="progress2">
+              <div class="progress2_part"></div>
+            </div>
+          </div>
+          <div class="course1_threed">
+            <div class="explain_up">人工智能启蒙讲解（上）</div>
+            <div class="explain_up_part">
+              <div class="tag4">#通用力</div>
+              <div class="tag2">#前沿趋势</div>
+              <div class="tag1">必修</div>
+              <div class="tag3">在线</div>
+              <button class="btn1">去上课</button>
+            </div>
+          </div>
+          <div class="course1_fourth">
+            <div class="course1_part">
+              <span class="text6">当前进度</span>
+              <span class="text7">0%</span>
+            </div>
+            <div class="progress3">
+              <div class="progress3_part"></div>
+            </div>
+          </div>
+          <div class="course1_fifth">
+            <div class="explain_down">人工智能启蒙讲解（下）</div>
+            <div class="explain_down_part">
+              <div class="tag4">#通用力</div>
+              <div class="tag2">#前沿趋势</div>
+              <div class="tag1">必修</div>
+              <div class="tag3">考试</div>
+              <div class="status"></div>
+            </div>
+          </div>
+          <div class="course2_first">
+            <div class="text8">第一讲：中级产品经理的思考逻辑</div>
+            <div class="course2_right">
+              <div class="circular"></div>
+              <div class="text9">未开始</div>
+            </div>
+          </div>
+          <div class="course2_second">
+            <div class="explain_down">
+              趣味课前小测 - MBTI测试：你适合做哪个方向？
+            </div>
+            <div class="explain_down_part">
+              <div class="tag1">选修</div>
+              <div class="tag3">测评</div>
+              <div class="status"></div>
+            </div>
+          </div>
+          <div class="course2_threed">
+            <div class="explain_down">
+              建立中级产品经理思考逻辑：脱离初级产品的必要条件
+            </div>
+            <div class="explain_down_part">
+              <div class="tag1">必修</div>
+              <div class="tag3">外部链接</div>
+              <div class="status"></div>
+            </div>
+          </div>
+          <div class="course3_first">
+            <div class="text8">第二讲：模块化产品展示</div>
+            <div class="course2_right">
+              <div class="circular"></div>
+              <div class="text9">未开始</div>
+            </div>
+          </div>
+          <div class="course2_threed">
+            <div class="explain_down">
+              模块化产品展示相关案例与展示：如何自由组合你的思考？
+            </div>
+            <div class="explain_down_part">
+              <div class="tag1">必修</div>
+              <div class="tag3">测评</div>
+              <div class="status"></div>
+            </div>
+          </div>
+          <div class="course2_threed">
+            <div class="explain_down">社交产品如何做好模块化处理？</div>
+            <div class="explain_down_part">
+              <div class="tag1">必修</div>
+              <div class="tag3">测评</div>
+              <div class="status"></div>
+            </div>
+          </div>
+          <div class="course2_second">
+            <div class="explain_down">
+              微信与Telegram哪个平台的功能模块化做的最好？
+            </div>
+            <div class="explain_down_part">
+              <div class="tag1">选修</div>
+              <div class="tag3">测评</div>
+              <div class="status"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reactive, toRefs } from "vue";
+import TitleHead from "@/components/TitleHead.vue";
+export default {
+  name: "PathmaoPage",
+  components: {
+    TitleHead,
+  },
+  setup() {
+    const state = reactive({
+      activeName: "second",
+      enclosure: [
+        {
+          id: 1,
+          name: "项目参考文档.doc",
+          img: require("../../assets/image/file/word.png"),
+        },
+        {
+          id: 2,
+          name: "人工智能启蒙讲解讲义.pptx",
+          img: require("../../assets/image/file/ppt.png"),
+        },
+        {
+          id: 3,
+          name: "中级产品经理必备工具.pdf",
+          img: require("../../assets/image/file/pdf.png"),
+        },
+        {
+          id: 4,
+          name: "Python学习入门讲义.zip",
+          img: require("../../assets/image/file/zip.png"),
+        },
+        {
+          id: 5,
+          name: "Axure RP10更新内容.md",
+          img: require("../../assets/image/file/md.png"),
+        },
+      ],
+    });
+    const handleClick = (tab, event) => {
+      console.log(tab, event);
+    };
+    return {
+      ...toRefs(state),
+      handleClick,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.pathmap {
+  width: 100%;
+  .main {
+    width: 100%;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: -14.5px;
+    .course1 {
+      width: 90%;
+      height: 830px;
+      margin-top: 10px;
+      margin-bottom: 27.5px;
+      border-radius: 4px;
+      background-color: rgba(255, 255, 255, 1);
+      display: flex;
+      justify-content: center;
+      .course1_box {
+        display: flex;
+        flex-direction: column;
+        justify-content: content;
+        width: 90%;
+        margin-top: 18.5px;
+        //background-color: pink;
+        .course3_first {
+          width: 105%;
+          margin-left: -7px;
+          height: 35px;
+          display: flex;
+          justify-content: content;
+          margin-top: 18.5px;
+          background-color: #f9f9f9;
+          .text8 {
+            display: flex;
+            flex: 1;
+            margin-top: 11px;
+            margin-left: 10.5px;
+            margin-bottom: 10.5px;
+            height: 13.5px;
+            font-size: 14px;
+            font-weight: 600;
+            color: #333330;
+          }
+          .course2_right {
+            display: flex;
+            position: relative;
+            width: 60px;
+            height: 13.5px;
+            margin-top: 15px;
+            // margin-right: 10.5px;
+            .circular {
+              position: absolute;
+              top: 1px;
+              left: 1px;
+              width: 8.5px;
+              height: 8.5px;
+              border-radius: 7px;
+              border: 1px solid #666666;
+            }
+            .text9 {
+              display: flex;
+              justify-content: content;
+              position: absolute;
+              width: 40px;
+              height: 13.5px;
+              top: 0;
+              left: 20px;
+              line-height: 13.5px;
+              color: #666666;
+              font-size: 13px;
+              font-weight: 600;
+            }
+          }
+        }
+        .course2_threed {
+          display: flex;
+          position: relative;
+          margin-top: 12px;
+          width: 100%;
+          height: 68.8px;
+          .explain_down {
+            position: absolute;
+            display: flex;
+            width: 100%;
+            height: 12.5px;
+            color: #333330;
+            font-size: 13px;
+            font-weight: 400;
+            line-height: 24px;
+          }
+          .explain_down_part {
+            position: absolute;
+            width: 100%;
+            height: 52.3px;
+            margin-top: 16.5px;
+            .tag1 {
+              position: absolute;
+              left: 0;
+              bottom: 0;
+              width: 64px;
+              height: 20.8px;
+              border: 1px solid #51c6e6;
+              border-radius: 2px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 14px;
+              font-weight: 500;
+              color: #51c6e6;
+            }
+            .tag3 {
+              position: absolute;
+              left: 73.5px;
+              bottom: 0;
+              height: 20.8px;
+              border: 1px solid #7f96ed;
+              border-radius: 2px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 14px;
+              font-weight: 500;
+              color: #7f96ed;
+              padding-left: 19px;
+              padding-right: 19px;
+            }
+            .status {
+              position: absolute;
+              top: 5px;
+              right: 11.5px;
+              width: 49.5px;
+              height: 49px;
+              background-image: url(../../assets/image/pathmap/nostart.png);
+            }
+          }
+        }
+        .course2_second {
+          display: flex;
+          position: relative;
+          margin-top: 12px;
+          width: 100%;
+          height: 68.8px;
+          .explain_down {
+            position: absolute;
+            display: flex;
+            width: 100%;
+            height: 12.5px;
+            color: #333330;
+            font-size: 13px;
+            font-weight: 400;
+            line-height: 24px;
+          }
+          .explain_down_part {
+            position: absolute;
+            width: 100%;
+            height: 52.3px;
+            margin-top: 16.5px;
+            .tag1 {
+              position: absolute;
+              left: 0;
+              bottom: 0;
+              width: 64px;
+              height: 20.8px;
+              border: 1px solid #cd7fed;
+              border-radius: 2px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 14px;
+              font-weight: 500;
+              color: #cd7fed;
+            }
+            .tag3 {
+              position: absolute;
+              left: 73.5px;
+              bottom: 0;
+              height: 20.8px;
+              border: 1px solid #7f96ed;
+              border-radius: 2px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 14px;
+              font-weight: 500;
+              color: #7f96ed;
+              padding-left: 19px;
+              padding-right: 19px;
+            }
+            .status {
+              position: absolute;
+              top: 5px;
+              right: 11.5px;
+              width: 49.5px;
+              height: 49px;
+              background-image: url(../../assets/image/pathmap/nostart.png);
+            }
+          }
+        }
+        .course2_first {
+          width: 105%;
+          margin-left: -7px;
+          height: 35px;
+          display: flex;
+          justify-content: content;
+          margin-top: 18.5px;
+          background-color: #f9f9f9;
+          .text8 {
+            display: flex;
+            flex: 1;
+            margin-top: 11px;
+            margin-left: 10.5px;
+            margin-bottom: 10.5px;
+            height: 13.5px;
+            font-size: 14px;
+            font-weight: 600;
+            color: #333330;
+          }
+          .course2_right {
+            display: flex;
+            position: relative;
+            width: 60px;
+            height: 13.5px;
+            margin-top: 15px;
+            // margin-right: 10.5px;
+            .circular {
+              position: absolute;
+              top: 1px;
+              left: 1px;
+              width: 8.5px;
+              height: 8.5px;
+              border-radius: 7px;
+              border: 1px solid #666666;
+            }
+            .text9 {
+              display: flex;
+              justify-content: content;
+              position: absolute;
+              width: 40px;
+              height: 13.5px;
+              top: 0;
+              left: 20px;
+              line-height: 13.5px;
+              color: #666666;
+              font-size: 13px;
+              font-weight: 600;
+            }
+          }
+        }
+        .course1_fifth {
+          display: flex;
+          position: relative;
+          margin-top: 12px;
+          width: 100%;
+          height: 68.8px;
+          .explain_down {
+            position: absolute;
+            width: 100%;
+            height: 12.5px;
+            color: #333330;
+            font-size: 13px;
+            font-weight: 400;
+            line-height: 12.5px;
+          }
+          .explain_down_part {
+            position: absolute;
+            width: 100%;
+            height: 52.3px;
+            margin-top: 16.5px;
+            .tag4 {
+              position: absolute;
+              top: 0;
+              left: 0;
+              padding-left: 7.5px;
+              //padding-right: 12px;
+              height: 15.8px;
+              border: 1px solid rgba(255, 185, 109, 1);
+              border-radius: 2px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 12px;
+              font-weight: 500;
+              color: rgba(255, 185, 109, 1);
+            }
+            .tag2 {
+              position: absolute;
+              top: 0;
+              left: 69px;
+              padding-left: 7.5px;
+              padding-right: 6.5px;
+              width: 62px;
+              height: 15.8px;
+              border: 1px solid rgba(255, 185, 109, 1);
+              border-radius: 2px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 12px;
+              font-weight: 500;
+              color: rgba(255, 185, 109, 1);
+            }
+            .tag1 {
+              position: absolute;
+              left: 0;
+              bottom: 0;
+              width: 64px;
+              height: 20.8px;
+              border: 1px solid #51c6e6;
+              border-radius: 2px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 14px;
+              font-weight: 500;
+              color: #51c6e6;
+            }
+            .tag3 {
+              position: absolute;
+              left: 73.5px;
+              bottom: 0;
+              height: 20.8px;
+              border: 1px solid #7f96ed;
+              border-radius: 2px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 14px;
+              font-weight: 500;
+              color: #7f96ed;
+              padding-left: 19px;
+              padding-right: 19px;
+            }
+            .status {
+              position: absolute;
+              top: 5px;
+              right: 11.5px;
+              width: 49.5px;
+              height: 49px;
+              background-image: url(../../assets/image/pathmap/nostart.png);
+            }
+          }
+        }
+        .course1_fourth {
+          display: flex;
+          position: relative;
+          margin-top: 11.5px;
+          width: 100%;
+          height: 29px;
+          .course1_part {
+            position: absolute;
+            top: 0;
+            left: 0;
+            margin-bottom: 10px;
+            width: 100%;
+            height: 12.5px;
+            .text6 {
+              width: 38.5px;
+              height: 12.5px;
+              font-size: 12px;
+              // line-height: 30.29px;
+              color: #677d86;
+            }
+            .text7 {
+              position: absolute;
+              right: 0;
+              width: 25px;
+              height: 9.5px;
+              font-size: 12px;
+              // line-height: 30.29px;
+              color: #277aff;
+            }
+          }
+          .progress3 {
+            position: absolute;
+            width: 100%;
+            height: 6.4px;
+            margin-top: 20px;
+            background-color: #e8f1fe;
+            border-radius: 2px;
+            .progress3_part {
+              width: 0%;
+              height: 6.4px;
+              border-radius: 2px;
+              background: linear-gradient(
+                -180deg,
+                rgba(36, 120, 255, 1),
+                rgba(80, 147, 255, 1)
+              );
+            }
+          }
+        }
+        .course1_threed {
+          display: flex;
+          position: relative;
+          margin-top: 12px;
+          width: 100%;
+          height: 68.8px;
+          .explain_up {
+            position: absolute;
+            width: 100%;
+            height: 12.5px;
+            color: #333330;
+            font-size: 13px;
+            font-weight: 400;
+            line-height: 12.5px;
+          }
+          .explain_up_part {
+            position: absolute;
+            width: 100%;
+            height: 52.3px;
+            margin-top: 16.5px;
+            .tag4 {
+              position: absolute;
+              top: 0;
+              left: 0;
+              padding-left: 7.5px;
+              //padding-right: 12px;
+              height: 15.8px;
+              border: 1px solid rgba(255, 185, 109, 1);
+              border-radius: 2px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 12px;
+              font-weight: 500;
+              color: rgba(255, 185, 109, 1);
+            }
+            .tag2 {
+              position: absolute;
+              top: 0;
+              left: 69px;
+              padding-left: 7.5px;
+              padding-right: 6.5px;
+              width: 62px;
+              height: 15.8px;
+              border: 1px solid rgba(255, 185, 109, 1);
+              border-radius: 2px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 12px;
+              font-weight: 500;
+              color: rgba(255, 185, 109, 1);
+            }
+            .tag1 {
+              position: absolute;
+              left: 0;
+              bottom: 0;
+              width: 64px;
+              height: 20.8px;
+              border: 1px solid #51c6e6;
+              border-radius: 2px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 14px;
+              font-weight: 500;
+              color: #51c6e6;
+            }
+            .tag3 {
+              position: absolute;
+              left: 73.5px;
+              bottom: 0;
+              height: 20.8px;
+              border: 1px solid #7f96ed;
+              border-radius: 2px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 14px;
+              font-weight: 500;
+              color: #7f96ed;
+              padding-left: 19px;
+              //padding-right: 25px;
+            }
+            .btn1 {
+              position: absolute;
+              top: 2px;
+              right: 2px;
+              width: 73px;
+              height: 28px;
+              font-size: 13px;
+              line-height: 28px;
+              color: #ffffff;
+              font-weight: 400;
+              border: 0.5px solid #2478ff;
+              border-radius: 2px;
+              background-color: #2478ff;
+            }
+          }
+        }
+        .course1_second {
+          display: flex;
+          position: relative;
+          margin-top: 11.5px;
+          width: 100%;
+          height: 29px;
+          .course1_part {
+            position: absolute;
+            top: 0;
+            left: 0;
+            margin-bottom: 10px;
+            width: 100%;
+            height: 12.5px;
+            .text6 {
+              width: 38.5px;
+              height: 12.5px;
+              font-size: 12px;
+              // line-height: 30.29px;
+              color: #677d86;
+            }
+            .text7 {
+              position: absolute;
+              right: 0;
+              width: 25px;
+              height: 9.5px;
+              font-size: 12px;
+              // line-height: 30.29px;
+              color: #277aff;
+            }
+          }
+          .progress2 {
+            position: absolute;
+            width: 100%;
+            height: 6.4px;
+            margin-top: 20px;
+            background-color: #e8f1fe;
+            border-radius: 2px;
+            .progress2_part {
+              width: 70%;
+              height: 6.4px;
+              border-radius: 2px;
+              background: linear-gradient(
+                -180deg,
+                rgba(36, 120, 255, 1),
+                rgba(80, 147, 255, 1)
+              );
+            }
+          }
+        }
+        .course1_first {
+          width: 105%;
+          margin-left: -7px;
+          height: 35px;
+          display: flex;
+          justify-content: content;
+          background-color: #f9f9f9;
+          .text8 {
+            display: flex;
+            flex: 1;
+            margin-top: 11px;
+            margin-left: 10.5px;
+            margin-bottom: 10.5px;
+            height: 13.5px;
+            font-size: 14px;
+            font-weight: 600;
+            color: #333330;
+          }
+          .course1_right {
+            display: flex;
+            position: relative;
+            width: 60px;
+            height: 13.5px;
+            margin-top: 15px;
+            // margin-right: 10.5px;
+            .circular {
+              position: absolute;
+              top: 1px;
+              left: 1px;
+              width: 8.5px;
+              height: 8.5px;
+              border-radius: 7px;
+              border: 1px solid #0060ff;
+            }
+            .text9 {
+              display: flex;
+              justify-content: content;
+              position: absolute;
+              width: 40px;
+              height: 13.5px;
+              top: 0;
+              left: 20px;
+              line-height: 13.5px;
+              color: #0060ff;
+              font-size: 13px;
+              font-weight: 600;
+            }
+          }
+        }
+      }
+    }
+    .title {
+      width: 90%;
+      height: 272px;
+      border-radius: 4px;
+      background-color: rgba(255, 255, 255, 1);
+      display: flex;
+      justify-content: center;
+      .course {
+        width: 90%;
+        // padding-bottom: 15px;
+        border-radius: 4px;
+        background: #ffffff;
+        margin-top: 10px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .el-tabs__nav {
+          width: 90%;
+          margin-left: 5%;
+          display: flex;
+          justify-content: left;
+        }
+        .el-tabs__item {
+          height: 50px;
+          padding: 0px;
+          font-size: 14px;
+          font-weight: 500;
+          line-height: 21px;
+          padding-top: 15px;
+          margin-right: 70px;
+        }
+        .el-tabs__nav-wrap::after {
+          background-color: rgba(56, 125, 247, 0.2);
+        }
+        .el-tabs__header {
+          margin: 0;
+        }
+        .enclosure {
+          width: 90%;
+          margin-left: 5%;
+          height: 40px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .enclosureL {
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+            font-weight: 400;
+            color: #677d86;
+            line-height: 19px;
+          }
+          .download {
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+            font-weight: 400;
+            color: #2478ff;
+            line-height: 19px;
+          }
+        }
+        .work {
+          // margin-left: 51px;
+          // margin-right: 40px;
+          padding-bottom: 20px;
+          width: 90%;
+          margin-left: 5%;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          margin-top: 17.5px;
+        }
+        .work .question {
+          font-size: 13px;
+          font-weight: 400;
+          color: #333330;
+          line-height: 21.5px;
+        }
+      }
+    }
+  }
+  .messaeg {
+    width: 90%;
+    height: 314px;
+    background-color: rgba(255, 255, 255, 1);
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    .mani {
+      width: 90%;
+      display: flex;
+      flex-direction: column;
+      justify-content: content;
+      //margin-left: 20.5px;
+      margin-top: 23px;
+      .downtitle {
+        display: flex;
+        position: relative;
+        width: 90px;
+        margin-top: 21.5px;
+        .img {
+          width: 15.5px;
+          height: 14.5px;
+          margin-top: 3px;
+          background-image: url(../../assets/image/pathmap/study.png);
+        }
+        .rightmain {
+          margin-left: 7.5px;
+          .talk {
+            font-size: 14px;
+            font-weight: bold;
+            color: #333;
+            position: absolute;
+            z-index: 999;
+          }
+          .box {
+            position: absolute;
+            width: 62.5px;
+            height: 10px;
+            right: 6px;
+            bottom: -4px;
+            background: #ccdfff;
+          }
+        }
+      }
+      .uptitle {
+        display: flex;
+        position: relative;
+        width: 90px;
+        .img {
+          width: 17px;
+          height: 15px;
+          margin-top: 3px;
+          background-image: url(../../assets/image/pathmap/personal.png);
+        }
+        .rightmain {
+          margin-left: 7.5px;
+          .talk {
+            font-size: 14px;
+            font-weight: bold;
+            color: #333;
+            position: absolute;
+            z-index: 999;
+          }
+          .box {
+            position: absolute;
+            width: 62.5px;
+            height: 10px;
+            right: 6px;
+            bottom: -4px;
+            background: #ccdfff;
+          }
+        }
+      }
+      .information {
+        width: 100%;
+        height: 50px;
+        margin-top: 24px;
+        display: flex;
+        justify-content: content;
+        .photo {
+          width: 50px;
+          height: 50px;
+          background-image: url(../../assets/image/pathmap/photo.png);
+        }
+        .description {
+          display: flex;
+          flex-direction: column;
+          margin-left: 11.5px;
+          .text1 {
+            height: 13.5px;
+            font-size: 14px;
+            font-weight: 700;
+            color: #394145;
+            line-height: 21.6px;
+          }
+          .text2 {
+            height: 13px;
+            margin-top: 12px;
+            font-size: 13px;
+            color: #394145;
+            line-height: 21.6px;
+          }
+        }
+      }
+    }
+    .speed {
+      width: 100%;
+      margin-top: 11px;
+      display: flex;
+      justify-content: content;
+      .text3 {
+        display: flex;
+        flex: 1;
+        margin-top: 4.5px;
+        font-size: 13px;
+        font-weight: 500;
+        line-height: 24px;
+        color: #677d86;
+        text-overflow: elipsis;
+      }
+      .btn {
+        width: 73px;
+        height: 28px;
+        font-size: 13px;
+        line-height: 28px;
+        color: #2478ff;
+        font-weight: 400;
+        border: 0.5px solid #2478ff;
+        border-radius: 2px;
+        background-color: #ffffff;
+      }
+    }
+    .progress {
+      display: flex;
+      flex-direction: column;
+      margin-top: 15px;
+      width: 100%;
+      height: 74px;
+      .total {
+        display: flex;
+        position: relative;
+        width: 100%;
+        height: 29px;
+        .total_part {
+          position: absolute;
+          top: 0;
+          left: 0;
+          margin-bottom: 10px;
+          width: 100%;
+          height: 12.5px;
+          .text4 {
+            width: 38.5px;
+            height: 12.5px;
+            font-size: 12px;
+            // line-height: 30.29px;
+            color: #677d86;
+          }
+          .text5 {
+            position: absolute;
+            right: 0;
+            width: 25px;
+            height: 9.5px;
+            font-size: 12px;
+            // line-height: 30.29px;
+            color: #277aff;
+          }
+        }
+
+        .progress {
+          position: absolute;
+          width: 100%;
+          height: 6.4px;
+          margin-top: 20px;
+          background-color: #e8f1fe;
+          border-radius: 2px;
+          .progress_part {
+            width: 32%;
+            height: 6.4px;
+            border-radius: 2px;
+            background: linear-gradient(
+              -180deg,
+              rgba(36, 120, 255, 1),
+              rgba(80, 147, 255, 1)
+            );
+          }
+        }
+      }
+      .compulsory {
+        display: flex;
+        position: relative;
+        width: 100%;
+        height: 29px;
+        margin-top: 16px;
+        .compulsory_part {
+          position: absolute;
+          top: 0;
+          left: 0;
+          margin-bottom: 10px;
+          width: 100%;
+          height: 12.5px;
+          .text6 {
+            width: 38.5px;
+            height: 12.5px;
+            font-size: 12px;
+            // line-height: 30.29px;
+            color: #677d86;
+          }
+          .text7 {
+            position: absolute;
+            right: 0;
+            width: 25px;
+            height: 9.5px;
+            font-size: 12px;
+            // line-height: 30.29px;
+            color: #ee6661;
+          }
+        }
+        .progress1 {
+          position: absolute;
+          width: 100%;
+          height: 6.4px;
+          margin-top: 20px;
+          background-color: #e8f1fe;
+          border-radius: 2px;
+          .progress1_part {
+            width: 10%;
+            height: 6.4px;
+            border-radius: 2px;
+            background: linear-gradient(
+              -180deg,
+              rgba(238, 98, 94, 1),
+              rgba(238, 164, 161, 1)
+            );
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/pathmap/pathmap.vue b/src/views/pathmap/pathmap.vue
deleted file mode 100644
index 2d0bbbc..0000000
--- a/src/views/pathmap/pathmap.vue
+++ /dev/null
@@ -1,436 +0,0 @@
-<template>
-  <div class="pathmap">
-    <TitleHead text="中级产品经理"></TitleHead>
-    <div class="main">
-      <div class="title">
-        <div class="box">
-          <div class="nav">
-            <span class="announcement">课程公告</span>
-            <span class="share">共享文档</span>
-          </div>
-          <div class="content">
-            请各位选课的同学提前阅读本课程的“教学大纲与计划”“课程考核要求”与“学习要求”，并按给定的中学化学教学主题分好小组 <br>每位同学在网上学习的活动轨迹都会自动被系统记录，将作为大家个人线上参与的评价依据；<br>请大家务必在规定的时间内提交作业，否则会被系统自动记录为“迟交”或“未交”，则会影响线上参与的平时成绩；
-          </div>
-        </div>       
-      </div> 
-        <div class="messaeg">
-           <div class="mani">
-        <div class="uptitle">
-            <div class="img"></div>
-            <div class="rightmain">
-              <div class="talk">个人信息</div>
-              <div class="box"></div>
-            </div>
-          </div>
-          <div class="information">
-            <div class="photo"></div>
-            <div class="description">
-              <span class="text1">乐晓琪（显示事业）</span>
-              <span class="text2">真正的陪伴经得起坎坷，经得起平淡。</span>
-            </div>
-          </div>
-          <div class="downtitle">
-            <div class="img"></div>
-            <div class="rightmain">
-              <div class="talk">学习进度</div>
-              <div class="box"></div>
-            </div>
-          </div>
-          <div class="speed">
-            <span class="text3">上次学到：启航班 - 领导寄语</span>
-            <button class="btn">去上课</button>
-          </div>
-          <div class="progress">
-            <div class="total">
-              <div class="total_part">
-                <span class="text4">总进度</span> <span class="text5">32%</span>
-              </div>             
-              <div class="progress">
-                <div class="progress_part"></div>
-              </div>
-            </div>
-            <div class="compulsory">
-              <div class="compulsory_part">
-                <span class="text6">必修进度</span> <span class="text7">10%</span>
-              </div>             
-              <div class="progress1">
-                <div class="progress1_part"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-        </div> 
-      <div class="course">
-        <div class="course_box">
-          <div class="course_first">
-            <span class="text8">序：产品经理从初级到中级</span>
-            <span class="text9"><span class="circular"></span>进行中</span>
-          </div>
-        </div>
-      </div>
-    </div>
-    
-  </div>
-</template>
-
-<script>
-// import { reactive, toRefs } from "vue";
-import TitleHead from "@/components/TitleHead.vue";
-export default {
-  name: "BallotPage",
-  components: {
-    TitleHead,
-  },
-  setup() {},
-};
-</script>
-
-<style lang="scss">
-  .pathmap {
-    width: 100%;
-    .main {
-      width: 100%;
-      display: flex;
-      flex-flow: column;
-      justify-content: center;
-      align-items: center;
-      margin-top: -14.5px;
-      .course {
-        width: 90%;
-        height: 903px;
-        margin-top: 10px;
-        border-radius: 4px;
-        background-color: rgba(255, 255, 255, 1);
-        display: flex;
-        justify-content: center;
-        .course_box {
-          display: flex;
-          justify-content: center;
-          width: 90%;
-          margin-top: 18.5px;
-          background-color: pink;
-          .course_first {
-            width: 100%;
-            height: 35px;
-            display: flex;
-            justify-content: content;
-            background-color: #F9F9F9;
-            .text8 {
-              display: flex;
-              flex: 1;
-              margin-top: 11px;
-              margin-left: 10.5px;
-              margin-bottom: 10.5px;
-              height: 13.5px;
-              font-size: 14px;
-              font-weight: 500;
-              color: #333330;
-            }
-            .text9 {
-              margin-top: 11px;
-              margin-left: 77.5px;
-              color: #0060FF;
-              font-size:13px;
-              font-weight: 400;
-              .circular {
-                
-                border: 1px solid #0060FF;
-                border-radius: 25%;
-              }
-            }
-          }
-        }
-      }
-      .title {
-        width: 90%;
-        height: 272px;
-        border-radius: 4px;
-        background-color: rgba(255, 255, 255, 1);
-        display: flex;
-        justify-content: center;
-        .box {
-          width: 90%;
-          display: flex;
-          justify-content: center;
-          flex-wrap:wrap;
-          overflow-y: auto;
-          .nav {
-              width: 100%;
-              height: 49.5px;
-              display: flex;
-              .announcement {              
-                color: #2478FF;
-                font-size: 14px;
-                line-height: 21.6px;
-                font-weight: 700;
-                margin-top: 18.5px;
-                border-bottom: 1px solid #2478FF;
-              }
-              .share {
-                color: #394145;
-                font-size: 13px;
-                line-height: 21.6px;
-                margin-top: 19px;
-                margin-left: 70px;
-
-              }
-          }
-          .content {
-                  width: 100%;
-                  height: 180.5px;
-                  display: flex;
-                  justify-content: center;
-                  color: #333330;
-                  font-size:13px;
-                  line-height: 24px;
-            }
-          }     
-        }
-      
-      } 
-      .messaeg {
-        width: 90%;
-        height: 314px;
-        background-color: rgba(255, 255, 255, 1);
-        display: flex;
-        justify-content: center;
-        margin-top: 10px; 
-        .mani {
-        width: 90%;
-        display: flex;
-        flex-direction: column;
-        justify-content: content;
-        margin-left: 20.5px;
-        margin-top: 23px; 
-                .downtitle {
-          display: flex;
-          position: relative;
-          width: 90px;
-          margin-top: 21.5px;
-          .img {
-            width: 15.5px;
-            height: 14.5px;
-            margin-top: 3px;
-            background-image: url(../../assets/image/pathmap/study.png);
-          }
-          .rightmain {
-            margin-left: 7.5px;
-            .talk {
-              font-size: 14px;
-              font-weight: bold;
-              color: #333;
-              position: absolute;
-              z-index: 999;
-            }
-            .box {
-              position: absolute;
-              width: 62.5px;
-              height: 10px;
-              right: 6px;
-              bottom: -4px;
-              background: #ccdfff;
-            }
-          }
-        }
-                .uptitle {
-          display: flex;
-          position: relative;
-          width: 90px;
-          .img {
-            width: 17px;
-            height: 15px;
-            margin-top: 3px;
-            background-image: url(../../assets/image/pathmap/personal.png);
-          }
-          .rightmain {
-            margin-left: 7.5px;
-            .talk {
-              font-size: 14px;
-              font-weight: bold;
-              color: #333;
-              position: absolute;
-              z-index: 999;
-            }
-            .box {
-              position: absolute;
-              width: 62.5px;
-              height: 10px;
-              right: 6px;
-              bottom: -4px;
-              background: #ccdfff;
-            }
-          }
-        }      
-         .information {
-        width: 100%;
-        height: 50px;
-        margin-top: 24px;
-        display: flex;
-        justify-content: content;
-        .photo {
-          width: 50px;
-          height: 50px;
-          background-image: url(../../assets/image/pathmap/photo.png)
-        }
-        .description {
-          display:flex;
-          flex-direction: column;
-          margin-left: 11.5px;
-          .text1 {
-            height: 13.5px;
-            font-size: 14px;
-            font-weight: 700;
-            color: #394145;
-            line-height: 21.6px;
-
-          }
-          .text2 {
-            height: 13px;
-            margin-top: 12px;
-            font-size: 13px;
-            color: #394145;
-            line-height: 21.6px;
-          }
-        
-      }
-      }
-     
-      
-      }
-      .speed {
-        width: 100%;
-        margin-top:11px;
-        display: flex;
-        justify-content: content;
-        .text3 {
-          display: flex;
-          flex:1;
-          margin-top: 4.5px;
-          font-size: 13px;
-          font-weight: 500;
-          line-height: 24px;
-          color: #677D86;
-          text-overflow: elipsis;
-        }
-        .btn {                  
-          width: 73px;
-          height: 28px;
-          font-size: 13px;
-          line-height: 28px;
-          margin-rihgt: 21px;
-          color: #2478FF;
-          font-weight: 400;
-          border: 0.5px solid #2478FF;
-          background-color: #FFFFFF;
-        }
-      }
-      .progress {
-        display:flex;
-        flex-direction: column;
-        margin-top: 15px;
-        width: 100%;
-        height: 74px;
-        .total {
-          display: flex;
-          position: relative;
-          width: 100%;
-          height: 29px;
-        .total_part {
-            position: absolute;
-            top: 0;
-            left: 0;
-            margin-bottom: 10px;
-            width: 100%;
-            height: 12.5px;
-          .text4 {          
-           width: 38.5px;
-            height: 12.5px;
-            font-size: 12px;
-            // line-height: 30.29px;
-            color: #677D86;
-          }
-          .text5 {
-            position: absolute;
-            right: 0;           
-            width: 25px;
-             height: 9.5px;
-            font-size: 12px;
-            // line-height: 30.29px;
-            color: #277AFF;
-          }
-        }
-        
-          .progress {
-            position: absolute;
-            width: 100%;
-            height: 6.4px;
-            margin-top: 20px;
-            background-color: #E8F1FE;
-            border-radius: 2px;
-            .progress_part {
-              width: 32%;
-              height: 6.4px;
-              border-radius: 2px;
-              background: linear-gradient(
-                -180deg,
-              rgba(36, 120, 255, 1),
-               rgba(80, 147, 255, 1)               
-              );
-            }
-          }
-        }
-        .compulsory{
-          display: flex;
-          position: relative;
-          width: 100%;
-          height: 29px;
-          margin-top: 16px;
-          .compulsory_part {
-            position: absolute;
-            top: 0;
-            left: 0;
-            margin-bottom: 10px;
-            width: 100%;
-            height: 12.5px;
-          .text6 {          
-           width: 38.5px;
-            height: 12.5px;
-            font-size: 12px;
-            // line-height: 30.29px;
-            color: #677D86;
-          }
-          .text7 {
-            position: absolute;
-            right: 0;           
-            width: 25px;
-             height: 9.5px;
-            font-size: 12px;
-            // line-height: 30.29px;
-            color: #EE6661;
-          }
-        }
-          .progress1 {
-            position: absolute;
-            width: 100%;
-            height: 6.4px;
-            margin-top: 20px;
-            background-color: #E8F1FE;
-            border-radius: 2px;
-            .progress1_part {
-              width: 10%;
-              height: 6.4px;
-              border-radius: 2px;
-              background: linear-gradient(
-                -180deg,
-              rgba(238, 98, 94, 1),
-               rgba(238, 164, 161, 1)               
-              );
-            }
-          }
-        }
-      }
-      } 
-     
-  }
- 
-</style>