diff --git a/src/assets/image/pathmap/btn.png b/src/assets/image/pathmap/btn.png
new file mode 100644
index 0000000..428cdab
Binary files /dev/null and b/src/assets/image/pathmap/btn.png differ
diff --git a/src/assets/image/pathmap/close.png b/src/assets/image/pathmap/close.png
new file mode 100644
index 0000000..1c69414
Binary files /dev/null and b/src/assets/image/pathmap/close.png differ
diff --git a/src/assets/image/pathmap/firstclass.png b/src/assets/image/pathmap/firstclass.png
new file mode 100644
index 0000000..adffed8
Binary files /dev/null and b/src/assets/image/pathmap/firstclass.png differ
diff --git a/src/assets/image/pathmap/secondclass.png b/src/assets/image/pathmap/secondclass.png
new file mode 100644
index 0000000..1047a21
Binary files /dev/null and b/src/assets/image/pathmap/secondclass.png differ
diff --git a/src/views/activities/ActivitiesPage.vue b/src/views/activities/ActivitiesPage.vue
index 19bf2c3..9ce7bdd 100644
--- a/src/views/activities/ActivitiesPage.vue
+++ b/src/views/activities/ActivitiesPage.vue
@@ -77,14 +77,10 @@ export default {
   components: {
     TitleHead,
   },
-  setup() {
+  setup() {   
+    
+  },
 
-  },
-  data(){
-    return {
-      showBox: false,
-    };
-  },
 }; 
 </script>
 
diff --git a/src/views/pathmap/PathmapPage.vue b/src/views/pathmap/PathmapPage.vue
index 69b4027..85942d3 100644
--- a/src/views/pathmap/PathmapPage.vue
+++ b/src/views/pathmap/PathmapPage.vue
@@ -1,817 +1,197 @@
 <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="main">
+    <div class="up">
+     <div class="notice">
+      <span class="text">请各位选课的同学提前阅读本课程的“教学大纲与计划请各位选课的同学提前阅读本课程的“教学大纲与计划</span> <span class="close"></span>
+     </div>
+     <div class="content">
+      <div class="title">中级产品经理</div>
+      <div class="text2">课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介简介课程简介</div>
+     </div>
+    </div>
+    <div class="down">
+     <div class="project_title">项目内容</div>
+     <div class="project_first">
+        <div class="course1_first">
+            <div class="text8">序：管理者如何持续找到发力点</div>
             <div class="course1_right">
               <div class="circular"></div>
               <div class="text9">进行中</div>
+              <div class="btn1"></div>
+            </div>
+        </div>
+        <div class="course_content">
+          <div class="study1">
+            <div class="firstclass"></div>
+            <div class="firstprogress">
+              <span class="firsttext">BOE端到端体系 - 第七章</span>
+              <span class="secondtext">70%</span>
+              <div class="progressbox">
+                <div class="progressboxpart"></div>
+              </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 class="study2">
+            <div class="secondclass"></div>
+            <div class="secondprogress">
+              <span class="firsttext">中级产品经理项目 - 产品经理…</span>
+              <span class="secondtext">52%</span>
+              <div class="progressbox">
+                <div class="progressboxpart"></div>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+     </div>
+     <div class="project_second">
+        <div class="course1_first">
+            <div class="text8">第一讲：业务起航的支点 - 你的风格</div>
+            <div class="course1_right">
+              <div class="circular"></div>
+              <div class="text9">进行中</div>
+              <div class="btn1"></div>
+            </div>
+        </div>
+        <div class="secondcontent">
+          <div class="question">
+            <div class="issue">趣味课前小测 - MBTI测试：你适合做哪个方向？</div>
+            <div class="tag1">选修</div>
+            <div class="tag2">测评</div>
+          </div>
+          <div class="question">
+            <div class="issue">社交产品如何做好模块化处理？</div>
+            <div class="tag3">必修</div>
+            <div class="tag2">作业</div>
+          </div>
+          <div class="question">
+            <div class="issue">社交产品如何做好模块化处理？</div>
+            <div class="tag3">必修</div>
+            <div class="tag2">讨论</div>
+          </div>
+        </div>
+     </div>
     </div>
   </div>
+
+  </div>
 </template>
 
 <script>
-import { reactive, toRefs } from "vue";
-import TitleHead from "@/components/TitleHead.vue";
-export default {
-  name: "PathmapPage",
-  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%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   .main {
-    width: 100%;
+    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);
+    flex-direction: column;
+    //justify-content: center;
+    .up {
+     width: 100%;
+     height: 162px;
+     display: flex;
+     flex-direction: column;
+     align-items: center;
+     //justify-content: center;
+     background-color: rgba(255, 255, 255, 1);
+     .notice {
+      background-color: rgba(255, 251, 238, 1);
+      width: 100%;
+      height: 25px;
       display: flex;
-      justify-content: center;
-      .course1_box {
+      jusyift-content: center;
+      //position: relative;
+      .text {
+        //display: flex;
+        height: 25px;
+        //position: absolute;
+        color: rgba(255, 158, 0, 1);
+        padding: 6px 41px 6.5px 15.5px;
+        font-size: 12px;
+        //line-height: 24px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .close {
         display: flex;
-        flex-direction: column;
-        justify-content: content;
-        width: 90%;
-        margin-top: 18.5px;
-        //background-color: pink;
-        .course3_first {
-          width: 105%;
-          margin-left: -7px;
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 9.5px;
+        height: 9.5px;
+        background-image: url(../../assets/image/pathmap/close.png);
+        margin-top: 10px;
+        margin-right: 16px;
+        margin-bottom: 8px;
+      }
+     }
+     .content {
+      width: 90%;
+      display: flex;
+      flex-direction: column;
+      .title {
+        margin-top: 15.5px;
+        font-size: 14px;
+        font-weight: 700;
+        line-height: 21.6px;
+        color: rgba(4, 36, 60, 1);
+      }
+      .text2 {
+        display: flex;
+        margin-top: 10px;
+        margin-bottom: 22.5px;
+        font-size: 13px;
+        color: rgba(51, 51, 48, 1);
+        line-height: 24px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+     }
+    }
+    .down {
+     width: 100%;
+     margin-top: 11.5px;
+     //height: 529px;
+     display: flex;
+     flex-direction: column;
+     align-items: center;
+     //justify-content: center;
+     background-color: rgba(255, 255, 255, 1);
+     .project_title {
+      width:100%;
+      display: flex;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 12px;
+      color: rgba(13, 35, 58, 1);
+      padding: 17px 0 17px 36.5px;
+      border-bottom: 0.5px solid rgba(241, 242, 243, 1);
+     }
+     .project_first {
+      width: 90%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 18px;
+      .course1_first {
+          width: 100%;
           height: 35px;
           display: flex;
           justify-content: content;
-          margin-top: 18.5px;
+          border-radius: 10px;
           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-left: 20px;
             margin-bottom: 10.5px;
             height: 13.5px;
             font-size: 14px;
@@ -828,7 +208,7 @@ export default {
             .circular {
               position: absolute;
               top: 1px;
-              left: 1px;
+              right: 63px;
               width: 8.5px;
               height: 8.5px;
               border-radius: 7px;
@@ -841,333 +221,266 @@ export default {
               width: 40px;
               height: 13.5px;
               top: 0;
-              left: 20px;
+              //left: 20px;
+              right: 18.5px;
               line-height: 13.5px;
               color: #0060ff;
               font-size: 13px;
               font-weight: 600;
             }
+            .btn1 {
+              width: 7px;
+              height: 6px;
+              position: absolute;
+              top: 3px;
+              right: 6px;
+              background-image: url(../../assets/image/pathmap/btn.png);
+            }
           }
-        }
       }
-    }
-    .title {
-      width: 90%;
-      height: 272px;
-      border-radius: 4px;
-      background-color: rgba(255, 255, 255, 1);
-      display: flex;
-      justify-content: center;
-      .course {
+      .course_content {
         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%;
+        justify-content: center;
+        margin-top: 26.5px;
+        .study1 {
           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 {
+          //justify-content: center;
+          width: 100%;
+          margin-bottom: 15px;
+          .firstclass {
             display: flex;
-            align-items: center;
-            font-size: 13px;
-            font-weight: 400;
-            color: #677d86;
-            line-height: 19px;
+            width: 74px;
+            height: 43px;
+            background-image: url(../../assets/image/pathmap/firstclass.png)
           }
-          .download {
+          .firstprogress {
             display: flex;
-            align-items: center;
-            font-size: 13px;
-            font-weight: 400;
-            color: #2478ff;
-            line-height: 19px;
+            flex: 1;
+            position: relative;
+            margin-left: 9.5px;
+            .firsttext {
+              position: absolute;
+              //top: 6px;
+              display: flex;
+              font-size: 13px;
+              line-height: 30.29px;
+              color: rgba(110, 123, 132, 1);
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+            }
+            .secondtext {
+              position: absolute;
+              //top: 6px;
+              right: 0;
+              font-size: 12px;
+              line-height: 30.29px;
+              color: rgba(39, 122, 255, 1);
+            }
+            .progressbox {
+              width: 100%;
+              position: absolute;
+              display: flex;
+              height: 6.4px;
+              bottom: 4px;
+              background-color: rgba(232, 241, 254, 1);
+              border-radius:2px;
+              .progressboxpart {
+                width: 70%;
+                height: 6.4px;
+                border-radius: 2px;
+                background: linear-gradient(
+                -180deg,
+                rgba(36, 120, 255, 1),
+                rgba(80, 147, 255, 1)
+              ); 
+              }
+            }
           }
         }
-        .work {
-          // margin-left: 51px;
-          // margin-right: 40px;
-          padding-bottom: 20px;
-          width: 90%;
-          margin-left: 5%;
+        .study2 {
           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;
+          width: 100%;
+          margin-bottom: 15px;
+          .secondclass {
+            width: 74px;
+            height: 43px;
+            background-image: url(../../assets/image/pathmap/secondclass.png)
+          }
+          .secondprogress {
+            display: flex;
+            flex: 1;
+            position: relative;
+            margin-left: 9.5px;
+            .firsttext {
+              position: absolute;
+              //top: 6px;
+              display: flex;
+              font-size: 13px;
+              line-height: 30.29px;
+              color: rgba(110, 123, 132, 1);
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+            }
+            .secondtext {
+              position: absolute;
+              //top: 6px;
+              right: 0;
+              font-size: 12px;
+              line-height: 30.29px;
+              color: rgba(39, 122, 255, 1);
+            }
+            .progressbox {
+              width: 100%;
+              position: absolute;
+              display: flex;
+              height: 6.4px;
+              bottom: 4px;
+              background-color: rgba(232, 241, 254, 1);
+              border-radius:2px;
+              .progressboxpart {
+                width: 52%;
+                height: 6.4px;
+                border-radius: 2px;
+                background: linear-gradient(
+                -180deg,
+                rgba(36, 120, 255, 1),
+                rgba(80, 147, 255, 1)
+              ); 
+              }
+            }
+          }
         }
       }
-    }
-  }
-  .messaeg {
-    width: 90%;
-    height: 314px;
-    background-color: rgba(255, 255, 255, 1);
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
-    .mani {
+     }
+     .project_second {
       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 {
+      align-items:center;
+      margin-top: 10.5px;
+      .course1_first {
+          width: 100%;
+          height: 35px;
           display: flex;
-          flex-direction: column;
-          margin-left: 11.5px;
-          .text1 {
+          justify-content: content;
+          border-radius: 10px;
+          background-color: #f9f9f9;
+          .text8 {
+            display: flex;
+            flex: 1;
+            margin-top: 11px;
+            margin-left: 20px;
+            margin-bottom: 10.5px;
             height: 13.5px;
             font-size: 14px;
-            font-weight: 700;
-            color: #394145;
-            line-height: 21.6px;
+            font-weight: 600;
+            color: #333330;
           }
-          .text2 {
-            height: 13px;
-            margin-top: 12px;
+          .course1_right {
+            display: flex;
+            position: relative;
+            width: 60px;
+            height: 13.5px;
+            margin-top: 15px;
+            // margin-right: 10.5px;
+            .circular {
+              position: absolute;
+              top: 1px;
+              right: 63px;
+              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;
+              right: 18.5px;
+              line-height: 13.5px;
+              color: #0060ff;
+              font-size: 13px;
+              font-weight: 600;
+            }
+            .btn1 {
+              width: 7px;
+              height: 6px;
+              position: absolute;
+              top: 3px;
+              right: 6px;
+              background-image: url(../../assets/image/pathmap/btn.png);
+            }
+          }
+      }
+      .secondcontent {
+        width: 90%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-top: 10px;
+        .question {
+          width: 100%;
+          display: flex;
+          position: relative;
+          height: 72px;
+          border-bottom: 0.5px solid rgba(241, 242, 243, 1);
+          .issue {
+            width: 100%;
+            display: flex;
             font-size: 13px;
-            color: #394145;
-            line-height: 21.6px;
+            line-height: 30.29px;
+            color: rgba(110, 123, 132, 1);
           }
-        }
-      }
-    }
-    .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 {
+          .tag1 {
             position: absolute;
-            right: 0;
-            width: 25px;
-            height: 9.5px;
-            font-size: 12px;
-            // line-height: 30.29px;
-            color: #277aff;
+            left: 0;
+            bottom: 14.5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 13px;
+            color: rgba(203, 128, 231, 1);
+            border: 0.5px solid rgba(203, 128, 231, 1);
+            line-height: 19.2px;
+            //padding: 0 10px;
           }
-        }
-
-        .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 {
+          .tag2 {
             position: absolute;
-            right: 0;
-            width: 25px;
-            height: 9.5px;
-            font-size: 12px;
-            // line-height: 30.29px;
-            color: #ee6661;
+            left: 92px;
+            bottom: 14.5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 13px;
+            color: rgba(136, 157, 238, 1);
+            border: 0.5px solid rgba(136, 157, 238, 1);
+            line-height: 19.2px;
+            //padding: 0 10px;
           }
-        }
-        .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)
-            );
+          .tag3 {
+            position: absolute;
+            left: 0;
+            bottom: 14.5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 13px;
+            color: rgba(104, 206, 234, 1);
+            border: 0.5px solid rgba(104, 206, 234, 1);
+            line-height: 19.2px;
+            //padding: 0 10px;
           }
         }
       }
+     }
     }
   }
 }
diff --git a/src/views/projectdetails/projectDetails.vue b/src/views/projectdetails/projectDetails.vue
new file mode 100644
index 0000000..4b69d5a
--- /dev/null
+++ b/src/views/projectdetails/projectDetails.vue
@@ -0,0 +1,567 @@
+<template>
+  <div class="projectdetails">
+  <div class="main">
+    <div class="up">
+     <div class="notice">
+      <span class="text">请各位选课的同学提前阅读本课程的“教学大纲与计划请各位选课的同学提前阅读本课程的“教学大纲与计划</span> <span class="close"></span>
+     </div>
+     <div class="content">
+      <div class="title">中级产品经理</div>
+      <div class="text2">课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介简介课程简介</div>
+     </div>
+    </div>
+    <div class="down">
+     <div class="project_title">项目内容</div>
+     <div class="project_first">
+        <div class="course1_first">
+            <div class="text8">序：管理者如何持续找到发力点</div>
+            <div class="course1_right">
+              <div class="circular"></div>
+              <div class="text9">进行中</div>
+              <div class="btn1"></div>
+            </div>
+        </div>
+        <div class="course_content">
+          <div class="study1">
+            <div class="firstclass"></div>
+            <div class="firstprogress">
+              <span class="firsttext">BOE端到端体系 - 第七章</span>
+              <span class="secondtext">70%</span>
+              <div class="progressbox">
+                <div class="progressboxpart"></div>
+              </div>
+            </div>
+          </div>
+          <div class="study2">
+            <div class="secondclass"></div>
+            <div class="secondprogress">
+              <span class="firsttext">中级产品经理项目 - 产品经理…</span>
+              <span class="secondtext">52%</span>
+              <div class="progressbox">
+                <div class="progressboxpart"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+     </div>
+     <div class="project_second">
+        <div class="course1_first">
+            <div class="text8">第一讲：业务起航的支点 - 你的风格</div>
+            <div class="course1_right">
+              <div class="circular"></div>
+              <div class="text9">进行中</div>
+              <div class="btn1"></div>
+            </div>
+        </div>
+        <div class="secondcontent">
+          <div class="question">
+            <div class="issue">趣味课前小测 - MBTI测试：你适合做哪个方向？</div>
+            <div class="tag1">选修</div>
+            <div class="tag2">测评</div>
+          </div>
+          <div class="question">
+            <div class="issue">社交产品如何做好模块化处理？</div>
+            <div class="tag3">必修</div>
+            <div class="tag2">作业</div>
+          </div>
+        </div>
+     </div>
+    </div>
+    <div class="last">
+        <div class="project_title">数据排行</div>
+        <div class="ranking">
+            <div class="rankingbox">
+                <div class="ranknumber">
+                 <div class="describe">积分</div>
+                 <div class="number">12</div>
+                 <div class="describe_part">名</div>
+                </div>
+                <div class="ranknumber">
+                 <div class="describe">完成度</div>
+                 <div class="number">21</div>
+                 <div class="describe_part">名</div>
+                </div>
+            </div>
+        </div>
+    </div>
+  </div>
+
+  </div>
+</template>
+
+<script>
+
+</script>
+
+<style lang="scss">
+.projectdetails {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .main {
+    width:100%;
+    display: flex;
+    flex-direction: column;
+    //justify-content: center;
+    .up {
+     width: 100%;
+     height: 162px;
+     display: flex;
+     flex-direction: column;
+     align-items: center;
+     //justify-content: center;
+     background-color: rgba(255, 255, 255, 1);
+     .notice {
+      background-color: rgba(255, 251, 238, 1);
+      width: 100%;
+      height: 25px;
+      display: flex;
+      jusyift-content: center;
+      //position: relative;
+      .text {
+        //display: flex;
+        height: 25px;
+        //position: absolute;
+        color: rgba(255, 158, 0, 1);
+        padding: 6px 41px 6.5px 15.5px;
+        font-size: 12px;
+        //line-height: 24px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .close {
+        display: flex;
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 9.5px;
+        height: 9.5px;
+        background-image: url(../../assets/image/pathmap/close.png);
+        margin-top: 10px;
+        margin-right: 16px;
+        margin-bottom: 8px;
+      }
+     }
+     .content {
+      width: 90%;
+      display: flex;
+      flex-direction: column;
+      .title {
+        margin-top: 15.5px;
+        font-size: 14px;
+        font-weight: 700;
+        line-height: 21.6px;
+        color: rgba(4, 36, 60, 1);
+      }
+      .text2 {
+        display: flex;
+        margin-top: 10px;
+        margin-bottom: 22.5px;
+        font-size: 13px;
+        color: rgba(51, 51, 48, 1);
+        line-height: 24px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+     }
+    }
+    .down {
+     width: 100%;
+     margin-top: 11.5px;
+     //height: 529px;
+     display: flex;
+     flex-direction: column;
+     align-items: center;
+     //justify-content: center;
+     background-color: rgba(255, 255, 255, 1);
+     .project_title {
+      width:100%;
+      display: flex;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 12px;
+      color: rgba(13, 35, 58, 1);
+      padding: 17px 0 17px 36.5px;
+      border-bottom: 0.5px solid rgba(241, 242, 243, 1);
+     }
+     .project_first {
+      width: 90%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 18px;
+      .course1_first {
+          width: 100%;
+          height: 35px;
+          display: flex;
+          justify-content: content;
+          border-radius: 10px;
+          background-color: #f9f9f9;
+          .text8 {
+            display: flex;
+            flex: 1;
+            margin-top: 11px;
+            margin-left: 20px;
+            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;
+              right: 63px;
+              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;
+              right: 18.5px;
+              line-height: 13.5px;
+              color: #0060ff;
+              font-size: 13px;
+              font-weight: 600;
+            }
+            .btn1 {
+              width: 7px;
+              height: 6px;
+              position: absolute;
+              top: 3px;
+              right: 6px;
+              background-image: url(../../assets/image/pathmap/btn.png);
+            }
+          }
+      }
+      .course_content {
+        width: 90%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-top: 26.5px;
+        .study1 {
+          display: flex;
+          //justify-content: center;
+          width: 100%;
+          margin-bottom: 15px;
+          .firstclass {
+            display: flex;
+            width: 74px;
+            height: 43px;
+            background-image: url(../../assets/image/pathmap/firstclass.png)
+          }
+          .firstprogress {
+            display: flex;
+            flex: 1;
+            position: relative;
+            margin-left: 9.5px;
+            .firsttext {
+              position: absolute;
+              //top: 6px;
+              display: flex;
+              font-size: 13px;
+              line-height: 30.29px;
+              color: rgba(110, 123, 132, 1);
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+            }
+            .secondtext {
+              position: absolute;
+              //top: 6px;
+              right: 0;
+              font-size: 12px;
+              line-height: 30.29px;
+              color: rgba(39, 122, 255, 1);
+            }
+            .progressbox {
+              width: 100%;
+              position: absolute;
+              display: flex;
+              height: 6.4px;
+              bottom: 4px;
+              background-color: rgba(232, 241, 254, 1);
+              border-radius:2px;
+              .progressboxpart {
+                width: 70%;
+                height: 6.4px;
+                border-radius: 2px;
+                background: linear-gradient(
+                -180deg,
+                rgba(36, 120, 255, 1),
+                rgba(80, 147, 255, 1)
+              ); 
+              }
+            }
+          }
+        }
+        .study2 {
+          display: flex;
+          width: 100%;
+          margin-bottom: 15px;
+          .secondclass {
+            width: 74px;
+            height: 43px;
+            background-image: url(../../assets/image/pathmap/secondclass.png)
+          }
+          .secondprogress {
+            display: flex;
+            flex: 1;
+            position: relative;
+            margin-left: 9.5px;
+            .firsttext {
+              position: absolute;
+              //top: 6px;
+              display: flex;
+              font-size: 13px;
+              line-height: 30.29px;
+              color: rgba(110, 123, 132, 1);
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+            }
+            .secondtext {
+              position: absolute;
+              //top: 6px;
+              right: 0;
+              font-size: 12px;
+              line-height: 30.29px;
+              color: rgba(39, 122, 255, 1);
+            }
+            .progressbox {
+              width: 100%;
+              position: absolute;
+              display: flex;
+              height: 6.4px;
+              bottom: 4px;
+              background-color: rgba(232, 241, 254, 1);
+              border-radius:2px;
+              .progressboxpart {
+                width: 52%;
+                height: 6.4px;
+                border-radius: 2px;
+                background: linear-gradient(
+                -180deg,
+                rgba(36, 120, 255, 1),
+                rgba(80, 147, 255, 1)
+              ); 
+              }
+            }
+          }
+        }
+      }
+     }
+     .project_second {
+      width: 90%;
+      display: flex;
+      flex-direction: column;
+      align-items:center;
+      margin-top: 10.5px;
+      .course1_first {
+          width: 100%;
+          height: 35px;
+          display: flex;
+          justify-content: content;
+          border-radius: 10px;
+          background-color: #f9f9f9;
+          .text8 {
+            display: flex;
+            flex: 1;
+            margin-top: 11px;
+            margin-left: 20px;
+            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;
+              right: 63px;
+              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;
+              right: 18.5px;
+              line-height: 13.5px;
+              color: #0060ff;
+              font-size: 13px;
+              font-weight: 600;
+            }
+            .btn1 {
+              width: 7px;
+              height: 6px;
+              position: absolute;
+              top: 3px;
+              right: 6px;
+              background-image: url(../../assets/image/pathmap/btn.png);
+            }
+          }
+      }
+      .secondcontent {
+        width: 90%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-top: 10px;
+        .question {
+          width: 100%;
+          display: flex;
+          position: relative;
+          height: 72px;
+          border-bottom: 0.5px solid rgba(241, 242, 243, 1);
+          .issue {
+            width: 100%;
+            display: flex;
+            font-size: 13px;
+            line-height: 30.29px;
+            color: rgba(110, 123, 132, 1);
+          }
+          .tag1 {
+            position: absolute;
+            left: 0;
+            bottom: 14.5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 13px;
+            color: rgba(203, 128, 231, 1);
+            border: 0.5px solid rgba(203, 128, 231, 1);
+            line-height: 19.2px;
+            //padding: 0 10px;
+          }
+          .tag2 {
+            position: absolute;
+            left: 92px;
+            bottom: 14.5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 13px;
+            color: rgba(136, 157, 238, 1);
+            border: 0.5px solid rgba(136, 157, 238, 1);
+            line-height: 19.2px;
+            //padding: 0 10px;
+          }
+          .tag3 {
+            position: absolute;
+            left: 0;
+            bottom: 14.5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 13px;
+            color: rgba(104, 206, 234, 1);
+            border: 0.5px solid rgba(104, 206, 234, 1);
+            line-height: 19.2px;
+            //padding: 0 10px;
+          }
+        }
+      }
+     }
+    }
+    .last {
+        width: 100%;
+        margin-top: 11.5px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-color: rgba(255, 255, 255, 1);
+        .project_title {
+            width:100%;
+            display: flex;
+            font-size: 16px;
+            font-weight: 500;
+            line-height: 12px;
+            color: rgba(13, 35, 58, 1);
+            padding: 17px 0 17px 36.5px;
+            border-bottom: 0.5px solid rgba(241, 242, 243, 1);
+        }
+        .ranking {
+            width: 90%;
+            display: flex;
+            justify-content: center;
+            margin-top: 14px;
+            border-radius: 10px;
+            background-color: rgba(242, 245, 247, 1);
+            margin-bottom: 13.5px;
+            .rankingbox {
+                width: 90%;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                .ranknumber {
+                    width: 100%;
+                    height: 50px;
+                    display: flex;
+                    position: relative;
+                    align-items: center;
+                    border-bottom: 0.5px solid rgba(223, 223, 223, 1);
+                    .describe {
+                        display: flex;
+                        position: absolute;
+                        font-size: 14px;
+                        font-weight: 500;
+                        line-height: 24px;
+                        color: rgba(51, 51, 48, 1);
+                    }
+                    .number {
+                        display: flex;
+                        position:absolute;
+                        right: 23.5px;
+                        font-size: 21px;
+                        font-weight:bold;
+                        line-height: 24px;
+                        color: rgba(0, 96, 255, 1)
+                        
+                    }
+                    .describe_part {
+                        display: flex;
+                        position: absolute;
+                        right: 0;
+                        font-size: 14px;
+                        font-weight: 500;
+                        line-height: 24px;
+                        color: rgba(51, 51, 48, 1);
+                    }
+                }
+            }
+        }
+    }
+  }
+}
+</style>