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/index.js b/src/assets/image/index.js
new file mode 100644
index 0000000..7ca6200
--- /dev/null
+++ b/src/assets/image/index.js
@@ -0,0 +1,6 @@
+const Images = {
+    //选择按钮
+    checkboxImg: require('./checkbox.png'),
+    checkbox2Img: require('./checkbox2.png')
+}
+export default Images
\ No newline at end of file
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/examination/ReadyExamination.vue b/src/views/examination/ReadyExamination.vue
index 394eace..8e40630 100644
--- a/src/views/examination/ReadyExamination.vue
+++ b/src/views/examination/ReadyExamination.vue
@@ -14,54 +14,124 @@
           <div class="questiontype clearfix">
             <div class="type">判断题</div>
           </div>
+
           <!-- 循环遍历生成判断题的问题和选项 -->
-          <div class="questions" v-for="(q, index) in j_questions" :key="index">
+          <div class="questions" v-for="(q, index) in questions" :key="index">
             <div class="questiontitle">
               {{ q.text }}
             </div>
-            <div class="btnswitch" v-for="(j, index) in j_options" :key="index">
-              <div class="checkoutbtn"></div>
+            <div
+              class="btnswitch"
+              v-for="(j, index) in q.options"
+              :key="index"
+              @click="selectBtn(j)"
+            >
+              <div
+                class="checkoutbtn"
+                :style="{
+                  backgroundImage:
+                    'url(' +
+                    (j.selected === true
+                      ? Images.checkboxImg
+                      : Images.checkbox2Img) +
+                    ')',
+                }"
+              ></div>
               <div class="select">{{ j.text }}</div>
             </div>
           </div>
 
           <!-- <div class="questions">
-            <div class="questiontitle">1、控制计划是由工艺部门完成 （4分）</div>
-            <div class="btnswitch">
-              <div class="checkoutbtn"></div>
-              <div class="select">正确</div>
+                        <div class="questiontitle">
+                            1、控制计划是由工艺部门完成 （4分）
+                        </div>
+                        <div class="btnswitch">
+                            <div class="checkoutbtn"></div>
+                            <div class="select">正确</div>
+                        </div>
+                        <div class="btnswitch">
+                            <div class="checkoutbtn"></div>
+                            <div class="select">错误</div>
+                        </div>
+                    </div>
+                    <div class="questions">
+                        <div class="questiontitle">
+                            2、.PFMEA假定所设计的产品能满足设计要求
+                        </div>
+                        <div class="btnswitch">
+                            <div class="checkoutbtn"></div>
+                            <div class="select">正确</div>
+                        </div>
+                        <div class="btnswitch">
+                            <div class="checkoutbtn"></div>
+                            <div class="select">错误</div>
+                        </div>
+                    </div>
+                    <div class="questions">
+                        <div class="questiontitle">
+                            3、PFMEA假定所设计的产品能满足设计要求 （4分）
+                        </div>
+                        <div class="btnswitch">
+                            <div class="checkoutbtn"></div>
+                            <div class="select">正确</div>
+                        </div>
+                        <div class="btnswitch">
+                            <div class="checkoutbtn"></div>
+                            <div class="select">错误</div>
+                        </div>
+                    </div> -->
+
+          <div class="questiontype clearfix">
+            <div class="type">选择题</div>
+          </div>
+
+          <!-- 循环遍历生成选择题的问题和选项 -->
+          <div class="questions" v-for="(q, index) in s_questions" :key="index">
+            <div class="questiontitle">
+              {{ q.text }}
             </div>
-            <div class="btnswitch">
-              <div class="checkoutbtn"></div>
-              <div class="select">错误</div>
+            <div
+              class="btnswitch"
+              v-for="(s, index) in s_options"
+              :key="index"
+              @click="selectBtn2(s)"
+            >
+              <div
+                class="checkoutbtn"
+                :style="{
+                  backgroundImage:
+                    'url(' +
+                    (s.selected === true
+                      ? Images.checkboxImg
+                      : Images.checkbox2Img) +
+                    ')',
+                }"
+              ></div>
+              <div class="select">{{ s.text }}</div>
             </div>
           </div>
-          <div class="questions">
-            <div class="questiontitle">
-              2、.PFMEA假定所设计的产品能满足设计要求
-            </div>
-            <div class="btnswitch">
-              <div class="checkoutbtn"></div>
-              <div class="select">正确</div>
-            </div>
-            <div class="btnswitch">
-              <div class="checkoutbtn"></div>
-              <div class="select">错误</div>
-            </div>
-          </div>
-          <div class="questions">
-            <div class="questiontitle">
-              3、PFMEA假定所设计的产品能满足设计要求 （4分）
-            </div>
-            <div class="btnswitch">
-              <div class="checkoutbtn"></div>
-              <div class="select">正确</div>
-            </div>
-            <div class="btnswitch">
-              <div class="checkoutbtn"></div>
-              <div class="select">错误</div>
-            </div>
-          </div> -->
+
+          <!-- <div class="questions">
+                        <div class="questiontitle">
+                            4、.FMEA 是一种（ ）工具（4分）
+                        </div>
+                        <div class="btnswitch">
+                            <div class="checkoutbtn"></div>
+                            <div class="select">问题解决</div>
+                        </div>
+                        <div class="btnswitch">
+                            <div class="checkoutbtn"></div>
+                            <div class="select">项目策划</div>
+                        </div>
+                        <div class="btnswitch">
+                            <div class="checkoutbtn"></div>
+                            <div class="select">过程分析</div>
+                        </div>
+                        <div class="btnswitch">
+                            <div class="checkoutbtn"></div>
+                            <div class="select">风险分析</div>
+                        </div>
+                    </div> -->
 
           <div class="questiontype clearfix">
             <div class="type">选择题</div>
@@ -128,6 +198,7 @@
 </template>
 <script>
 import { reactive, toRefs } from "vue";
+import Images from "../../assets/image/index";
 import TitleHead from "@/components/TitleHead.vue";
 export default {
   name: "ReadyExamination",
@@ -136,25 +207,81 @@ export default {
   },
   setup() {
     const state = reactive({
-      select: require("../../assets/image/checkbox.png"),
-      noselect: require("../../assets/image/checkbox2.png"),
-      j_questions: [
+      questions: [
         {
-          type: "judge",
           id: 1,
           text: "1、控制计划是由工艺部门完成 （4分）",
+          options: [
+            {
+              text: "正确",
+              select: "flase",
+            },
+            {
+              text: "错误",
+              select: "flase",
+            },
+          ],
         },
         {
-          type: "judge",
           id: 2,
           text: "2、.PFMEA假定所设计的产品能满足设计要求",
+          options: [
+            {
+              text: "正确",
+              select: "flase",
+            },
+            {
+              text: "错误",
+              select: "flase",
+            },
+          ],
         },
         {
-          type: "judge",
           id: 3,
-          text: "3、PFMEA假定所设计的产品能满足设计要求 （4分）",
+          text: "3、控制计划是由工艺部门完成 （4分）",
+          options: [
+            {
+              text: "正确",
+              select: "flase",
+            },
+            {
+              text: "错误",
+              select: "flase",
+            },
+          ],
+        },
+        {
+          id: 4,
+          text: "4、.PFMEA假定所设计的产品能满足设计要求",
+          options: [
+            {
+              text: "正确",
+              select: "flase",
+            },
+            {
+              text: "错误",
+              select: "flase",
+            },
+          ],
         },
       ],
+      // j_questions: [
+      //     {
+      //         type: "judge",
+      //         id: 1,
+      //         text: "1、控制计划是由工艺部门完成 （4分）",
+      //     },
+      //     {
+      //         type: "judge",
+      //         id: 2,
+      //         text: "2、.PFMEA假定所设计的产品能满足设计要求",
+      //     },
+      //     {
+      //         type: "judge",
+      //         id: 3,
+      //         text: "3、PFMEA假定所设计的产品能满足设计要求 （4分）",
+      //     },
+      // ],
       s_questions: [
         {
           type: "choice",
@@ -162,18 +289,18 @@ export default {
           text: "4、.FMEA 是一种（ ）工具（4分）",
         },
       ],
-      j_options: [
-        {
-          id: 1,
-          text: "正确",
-          selected: false,
-        },
-        {
-          id: 2,
-          text: "错误",
-          selected: false,
-        },
-      ],
+      // j_options: [
+      //     {
+      //         id: 1,
+      //         text: "正确",
+      //         selected: false,
+      //     },
+      //     {
+      //         id: 2,
+      //         text: "错误",
+      //         selected: false,
+      //     },
+      // ],
       s_options: [
         {
           id: 1,
@@ -198,20 +325,34 @@ export default {
       ],
     });
     const selectBtn = (value) => {
+      // let arr = state.questions;
+      const arry = [];
+      state.questions.map((item) => {
+        arry.push(item.options);
+      });
+      console.log(arry);
+      console.log(value);
+      // arry.map((i) => {
+      //     if (i.id === value.id) {
+      //         i.selected = !i.selected;
+      //     }
+      // });
+      // state.questions = arry;
+    };
+    const selectBtn2 = (value) => {
       let arr = state.s_options;
       arr.map((i) => {
-        i.selected = false;
         if (i.id === value.id) {
           i.selected = !i.selected;
         }
-        // console.log("iii", i);
       });
       state.s_options = arr;
-      console.log("iii", state.s_options);
     };
     return {
       ...toRefs(state),
       selectBtn,
+      selectBtn2,
+      Images,
     };
   },
 };
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>