diff --git a/src/assets/image/activities/bg.png b/src/assets/image/activities/bg.png
new file mode 100644
index 0000000..4d5f893
Binary files /dev/null and b/src/assets/image/activities/bg.png differ
diff --git a/src/assets/image/activities/no.png b/src/assets/image/activities/no.png
new file mode 100644
index 0000000..86b9f64
Binary files /dev/null and b/src/assets/image/activities/no.png differ
diff --git a/src/assets/image/activities/trumpet.png b/src/assets/image/activities/trumpet.png
new file mode 100644
index 0000000..1f8434c
Binary files /dev/null and b/src/assets/image/activities/trumpet.png differ
diff --git a/src/assets/image/activities/yes.png b/src/assets/image/activities/yes.png
new file mode 100644
index 0000000..570406b
Binary files /dev/null and b/src/assets/image/activities/yes.png differ
diff --git a/src/assets/image/pathmap/personal.png b/src/assets/image/pathmap/personal.png
new file mode 100644
index 0000000..0a0af84
Binary files /dev/null and b/src/assets/image/pathmap/personal.png differ
diff --git a/src/assets/image/pathmap/photo.png b/src/assets/image/pathmap/photo.png
new file mode 100644
index 0000000..8a486d0
Binary files /dev/null and b/src/assets/image/pathmap/photo.png differ
diff --git a/src/assets/image/pathmap/study.png b/src/assets/image/pathmap/study.png
new file mode 100644
index 0000000..3708713
Binary files /dev/null and b/src/assets/image/pathmap/study.png differ
diff --git a/src/views/activities/activities.vue b/src/views/activities/activities.vue
new file mode 100644
index 0000000..4a4fb01
--- /dev/null
+++ b/src/views/activities/activities.vue
@@ -0,0 +1,274 @@
+<template>
+  <div class="activities">
+    <TitleHead text="【其他活动】管理者进阶腾飞班 - 专属线下活动"></TitleHead>
+     <div class="message">
+          <div class="yes"></div>
+          <div class="textmessage">签到成功</div>
+          <div class="no"></div>
+    </div>
+    <div class="main">
+      <div class="title">
+        <div class="titlemain">
+          <div class="timeposition">
+            <div class="time">
+              <img
+                style="width: 13px; height: 14.5px; margin-right: 5.5px"
+                src="../../assets/image/faceteach/time.png"
+              />
+              <div style="font-size: 12px; color: rgba(110, 123, 132, 1)">
+                2022-07-20 20:00-21:00
+              </div>
+            </div>
+            <div class="time" style="margin-top: 9px">
+              <img
+                style="width: 13px; height: 15px; margin-right: 5.5px"
+                src="../../assets/image/faceteach/position.png"
+              />
+              <div style="font-size: 12px; color: rgba(110, 123, 132, 1)">
+                大族广场
+              </div>
+            </div>
+          </div>
+          <div class="titlebtn">签到</div>
+        </div>
+      </div>
+    </div> 
+    <div class="notice">
+        <div class="noticebox">
+        <div class="mani">
+          <div class="lefttitle">
+            <div class="img"></div>
+            <div class="rightmain">
+              <div class="talk">活动公告</div>
+              <div class="box"></div>
+            </div>
+          </div>
+          <div class="content">
+            为拓宽人民群众的表达途径、畅听民意，及时了解和解决人民群众反映强烈的公共法律服务问题，我局将在浈江区公共法律服务中心开展领导干部接待活动，<br>现将2022年8月的活动安排公告如下：<br> 一、接待时间 <br>工作日上午9:00-12:00。 <br>二、接待地点 <br>浈江区公共法律服务中心（浈江区新韶镇乐土路3号曲仁田螺冲党群服务中心一楼）。<br>三、接待受理范围 <br>（一）听取人民群众对公共法律服务工作的批评和意见建议。 <br>（二）解答或接收公共法律服务相关业务咨询。
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="details">
+      <div class="teachbox">
+        <div class="teachmani">
+          <div class="lefttitle">
+            <div class="img"></div>
+            <div class="rightmain">
+              <div class="talk">活动详情</div>
+              <div class="box"></div>
+            </div>
+          </div>
+         <div class="content">
+            写字楼介绍<br>大族广场写字楼采用国际顶级硬件设施，美国OTIS电梯、麦克维尔中央空调、高端安防系统等商务空间新标准匹配项目在亦庄地标综合体的形象。写字楼空间设计由亚洲著名的室内空间设计大师之一梁景华设计，写字楼群由六栋(T1—T6)呈舰队排列的5A写字楼构成形成独特的舰队造型。<br>购物中心介绍<br>大族广场Mall&More位于北京经济技术开发区核心商圈荣华路，由荷兰鹿特丹缤纷市场设计师HANS VAN DA LEN 主持设计,秉持自然与未来和谐共生理念,倡导乐活有机、绿色环保的生活方式,传递生活美学。<br>大族广场Mall&More汇集众多知名优质品牌,7FRESH生 鲜超市、CGV星聚汇影城、中信书店、源力悦体等,集 购物、餐饮、娱乐、文化于一体,丰富的业态品类为消费 者提供城市生活的第三空间感受。<br>大族广场Mall&More以人为本,不断提升服务水平,升级 消费购物体验,致力于营造更加舒适的购物环境与空间打造有温度的品牌。同时根据春夏秋冬四季策划丰富多样的大型主题活动；为会员设置专属的沙龙活动，打造专属会员日等,与顾客近距离产生情感上的互动与链接为城市人们提供自由、放松、愉悦的社交空间与精神的栖息地。
+         </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">
+.activities {
+  width: 100%;
+  .main {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: -14.5px;
+    .title {
+      width: 90%;
+      height: 74px;
+      border-radius: 4px;
+      background-color: rgba(255, 255, 255, 1);
+      display: flex;
+      justify-content: center;
+      .titlemain {
+        width: 90%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .timeposition {
+          .time {
+            display: flex;
+            align-items: center;
+          }
+        }
+        .titlebtn {
+          width: 83px;
+          height: 33px;
+          background: #2478ff;
+          box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+          border-radius: 2px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 14px;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 12px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+.message {
+        display: flex;
+        position: absolute;
+        top: 194px;
+        left: 80.5px;
+        width: 234px;
+        height: 64px;
+        z-index: 1;
+        background-image: url(../../assets/image/activities/bg.png);
+        .textmessage {
+          margin-top: 18px;
+          margin-left: 46px;
+          color: #333330;
+          font-size: 13px;
+          font-weight: 700;
+        }
+        .yes {
+          width: 13px;
+          height: 13px;
+          margin-top: 19px;
+          margin-left: 32px;
+          background-image: url(../../assets/image/activities/yes.png);
+        }
+        .no {
+          width: 13px;
+          height: 13px;
+          margin-top: 19px;
+          margin-left: 50px;
+          background-image: url(../../assets/image/activities/no.png);
+        }
+}
+.notice {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    .noticebox {
+      width: 90%;
+      background: linear-gradient(
+        180deg,
+       rgba(36, 120, 255, 0.15) 0%,
+        white 20%
+      );
+      border-radius: 4px;
+      position: relative;
+      
+      .mani {
+        margin-left: 20.5px;
+        margin-top: 20px;
+        line-height: 24px;
+
+        .lefttitle {
+          display: flex;
+          position: relative;
+          width: 90px;
+          .img {
+            width: 18px;
+            height: 15px;
+            margin-top: 4px;
+            background-image: url(../../assets/image/activities/trumpet.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: #cccfff;
+            }
+          }
+        }
+        .content {
+          color: #333330;
+          font-size: 13px;
+          line-height: 24px;
+          font-weight: 400;
+          margin: 18.5px 12px 24.5px 0;
+        }
+      }
+    }
+  }
+  .details {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    .teachbox {
+      width: 90%;
+      // height: 200px;
+      background: #fff;
+      border-radius: 4px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      .teachmani {
+        width: 90%;
+        margin-top: 20px;
+        .lefttitle {
+          display: flex;
+          position: relative;
+          width: 90px;
+          .img {
+            width: 18px;
+            height: 15px;
+            margin-top: 4px;
+            background-image: url(../../assets/image/activities/trumpet.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: #cccfff;
+            }
+          }
+        }
+        .content {
+          color: #333330;
+          font-size: 13px;
+          line-height: 24px;
+          font-weight: 400;
+          margin: 18.5px 0 29.5px 0;
+        }
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/pathmap/pathmap.vue b/src/views/pathmap/pathmap.vue
new file mode 100644
index 0000000..2d0bbbc
--- /dev/null
+++ b/src/views/pathmap/pathmap.vue
@@ -0,0 +1,436 @@
+<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>