From 6424a4857b71fe94904fc67cc4104acc0b91c597 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=99=93=E9=B8=BD?= <lixg@dongwu-inc.com>
Date: Sat, 8 Oct 2022 16:25:10 +0800
Subject: [PATCH] =?UTF-8?q?style:=E4=BF=AE=E6=94=B9=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E4=BD=9C=E4=B8=9A=E5=92=8C=E8=AE=A8=E8=AE=BA=E6=B3=95=E8=A1=A8?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                 |   4 +-
 src/views/activities/ActivitiesPage.vue     |   2 +
 src/views/discuss/DiscussUpload.vue         | 231 +++--
 src/views/homeworkpage/UploadWork.vue       |  58 +-
 src/views/pathmap/PathmapPage.vue           | 736 ++++++++-------
 src/views/projectdetails/projectDetails.vue | 995 ++++++++++----------
 6 files changed, 1047 insertions(+), 979 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b0b5420..c430b25 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="container">
-    <div id="nav">
+    <!-- <div id="nav">
       <router-link
         v-for="item in routes"
         :key="item.path"
@@ -12,7 +12,7 @@
       >
         {{ item.name }}
       </router-link>
-    </div>
+    </div> -->
     <main>
       <router-view />
     </main>
diff --git a/src/views/activities/ActivitiesPage.vue b/src/views/activities/ActivitiesPage.vue
index bdb7669..48ffbc0 100644
--- a/src/views/activities/ActivitiesPage.vue
+++ b/src/views/activities/ActivitiesPage.vue
@@ -70,6 +70,7 @@ export default {
 <style lang="scss">
 .activities {
   width: 100%;
+
   .main {
     width: 100%;
     display: flex;
@@ -153,6 +154,7 @@ export default {
       flex-direction: column;
       align-items: center;
       background-color: rgba(255, 255, 255, 1);
+      padding-bottom: 20px;
       .details_title {
         width: 90%;
         display: flex;
diff --git a/src/views/discuss/DiscussUpload.vue b/src/views/discuss/DiscussUpload.vue
index eb3231f..7a6bb7d 100644
--- a/src/views/discuss/DiscussUpload.vue
+++ b/src/views/discuss/DiscussUpload.vue
@@ -1,102 +1,148 @@
 <template>
-    <div class="uploadworkpage">
-      <div class="inputcontainer">
-        <div class="inputt">
-            <div class="i_title">
-                <input type="text" id="input_title" placeholder="请输入标题"></div>
+  <div
+    class="discussupload"
+    :style="{
+      height: screenHeight - 73.5 + 'px',
+    }"
+  >
+    <div class="inputcontainer">
+      <div class="inputt">
+        <div class="i_title">
+          <input type="text" id="input_title" placeholder="请输入标题" />
+        </div>
+        <div class="discusscontent">
           <el-input
             type="textarea"
             placeholder="请输入正文"
             v-model="textarea"
-            rows="35"
+            autosize
           ></el-input>
         </div>
+      </div>
+
+      <div class="imgcon">
         <div class="linecon">
           <div class="line"></div>
         </div>
-        <div class="imgcon">
-          <div class="allimg">
-            <img src="../../assets/image/discuss/images.png" />
-            <img src="../../assets/image/discuss/pre.png" />
-            <img src="../../assets/image/discuss/next.png" />
-            <img src="../../assets/image/discuss/delete.png" />
-          </div>
+        <div class="allimg">
+          <img src="../../assets/image/discuss/images.png" />
+          <img src="../../assets/image/discuss/pre.png" />
+          <img src="../../assets/image/discuss/next.png" />
+          <img src="../../assets/image/discuss/delete.png" />
         </div>
       </div>
     </div>
-  </template>
-  
-  <script>
-  import { reactive, toRefs } from "vue";
-  export default {
-    name: "UploadWork",
-    components: {},
-    setup() {
-      const state = reactive({
-        text: "",
-        textarea: "",
-      });
-      return {
-        ...toRefs(state),
-      };
-    },
-  };
-  </script>
-  
-  <style scoped lang="scss" >
-  .clearfix:before,
-  clearfix:after {
-    content: " ";
-    display: table;
-    clear: both;
-  }
-  .uploadworkpage {
+  </div>
+</template>
+
+<script>
+import { reactive, toRefs } from "vue";
+export default {
+  name: "UploadWork",
+  components: {},
+  setup() {
+    const state = reactive({
+      text: "",
+      textarea: "",
+      screenHeight: document.body.clientHeight, // 屏幕高度
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.clearfix:before,
+clearfix:after {
+  content: " ";
+  display: table;
+  clear: both;
+}
+.discussupload {
+  width: 100%;
+  // height: 100%;
+  background-color: #fff;
+  // margin-top: 73.5px;
+  .inputcontainer {
+    margin-top: 20px;
+    background-color: #fff;
     width: 100%;
+    // height: 100px;
+    // display: flex;
+    // justify-content: center;
+    // height: 80%;
     height: 100%;
-    .inputcontainer {
-      margin-top: 20px;
-      background-color: #fff;
+    .inputt {
       width: 100%;
+      height: calc(100% - 79px);
       // height: 100px;
-      // display: flex;
-      // justify-content: center;
-      height: 80%;
-      .inputt {
+      // padding-bottom: 79px;
+
+      .discusscontent {
+        height: calc(100% - 79px);
+        overflow-y: scroll;
+      }
+    }
+
+    .i_title {
+      margin-left: 16.5px;
+      width: 90%;
+      border-bottom: 1px solid #f1f2f3;
+      margin-bottom: 5px;
+      ::-webkit-input-placeholder {
+        font-size: 16px;
+        font-weight: 500;
+        color: #04243c;
+      }
+      :-ms-input-placeholder {
+        font-size: 16px;
+        color: #04243c;
+      }
+      #input_title {
         width: 100%;
-      }
-      .i_title{
-        margin-left: 16.5px;
-        width: 90%;
-        border-bottom: 1px solid #f1f2f3;
-        margin-bottom: 5px;
-        ::-webkit-input-placeholder{
-                font-size: 16px;
-                font-weight: 500;
-                color: #04243C;
-            }
-        :-ms-input-placeholder{
-            font-size: 16px;
-            color: #04243C;
-        }
-        #input_title{
-            width: 100%;
-            height: 100%;
-            margin: 18.5px auto 21px 0px;
-            border: none;
-            outline: none;
-        }
-      }
-      ::v-deep .el-textarea__inner {
-        resize: none;
-        border-color: transparent;
-        height: 100%;
-      }
-      ::v-deep .el-textarea:focus {
-        border-color: transparent;
-      }
-      ::v-deep .el-textarea {
         height: 100%;
+        margin: 18.5px auto 21px 0px;
+        border: none;
+        outline: none;
       }
+    }
+    ::v-deep .el-textarea__inner {
+      resize: none;
+      border-color: transparent;
+      height: 100%;
+    }
+    ::v-deep .el-textarea:focus {
+      border-color: transparent;
+    }
+    ::v-deep .el-textarea {
+      height: 100%;
+    }
+    .el-textarea__inner {
+      border: 0 !important;
+      resize: none !important; /* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
+      box-shadow: none !important;
+      padding: 16px 18px;
+    }
+    .el-textarea__inner:hover {
+      box-shadow: none !important;
+      border: 0 !important;
+    }
+    .el-textarea__inner:focus {
+      border: none;
+      border: 0 !important;
+    }
+    .imgcon {
+      // margin-top: 24.5px;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      position: fixed;
+      bottom: 0;
+      background-color: #fff;
       .linecon {
         margin-top: 10px;
         width: 100%;
@@ -108,24 +154,19 @@
           border-top: 1px solid #f1f2f3;
         }
       }
-      .imgcon {
-        margin-top: 24.5px;
-  
-        width: 100%;
+      .allimg {
+        width: 70%;
         display: flex;
-        justify-content: center;
-        .allimg {
-          width: 70%;
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 24.5px;
-          img{
-            width: 20px;
-            height: 19px;
-            background-size: 100% 100%;
-          }
+        justify-content: space-between;
+        margin-bottom: 24.5px;
+        margin-top: 24.5px;
+        img {
+          width: 20px;
+          height: 19px;
+          background-size: 100% 100%;
         }
       }
     }
   }
-  </style>
\ No newline at end of file
+}
+</style>
diff --git a/src/views/homeworkpage/UploadWork.vue b/src/views/homeworkpage/UploadWork.vue
index 88cd249..7fdcb37 100644
--- a/src/views/homeworkpage/UploadWork.vue
+++ b/src/views/homeworkpage/UploadWork.vue
@@ -1,18 +1,24 @@
 <template>
-  <div class="uploadworkpage">
+  <div
+    class="uploadworkpage"
+    :style="{
+      height: screenHeight - 73.5 + 'px',
+    }"
+  >
     <div class="inputcontainer">
       <div class="inputt">
         <el-input
           type="textarea"
           placeholder="请输入正文"
           v-model="textarea"
-          rows="35"
+          autosize
         ></el-input>
       </div>
-      <div class="linecon">
-        <div class="line"></div>
-      </div>
+
       <div class="imgcon">
+        <div class="linecon">
+          <div class="line"></div>
+        </div>
         <div class="allimg">
           <img src="../../assets/image/homeworkpage/link.png" />
           <img src="../../assets/image/homeworkpage/pre.png" />
@@ -33,6 +39,7 @@ export default {
     const state = reactive({
       text: "",
       textarea: "",
+      screenHeight: document.body.clientHeight, // 屏幕高度
     });
     return {
       ...toRefs(state),
@@ -50,7 +57,8 @@ clearfix:after {
 }
 .uploadworkpage {
   width: 100%;
-  height: 100%;
+  background-color: #fff;
+  // margin-top: 73.5px;
   .inputcontainer {
     margin-top: 20px;
     background-color: #fff;
@@ -58,9 +66,14 @@ clearfix:after {
     // height: 100px;
     // display: flex;
     // justify-content: center;
-    height: 80%;
+    // height: 80%;
+    height: 100%;
     .inputt {
       width: 100%;
+      height: calc(100% - 79px);
+      // height: 100px;
+      // padding-bottom: 79px;
+      overflow-y: scroll;
     }
     ::v-deep .el-textarea__inner {
       resize: none;
@@ -87,24 +100,29 @@ clearfix:after {
       border: none;
       border: 0 !important;
     }
-    .linecon {
-      margin-top: 10px;
-      width: 100%;
-      display: flex;
-      justify-content: center;
-      .line {
-        width: 90%;
-        height: 0;
-        border-top: 1px solid #f1f2f3;
-      }
-    }
-    .imgcon {
-      margin-top: 24.5px;
 
+    .imgcon {
       width: 100%;
       display: flex;
+      flex-direction: column;
+      align-items: center;
       justify-content: center;
+      position: fixed;
+      bottom: 0;
+      background-color: #fff;
+      .linecon {
+        margin-top: 10px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        .line {
+          width: 90%;
+          height: 0;
+          border-top: 1px solid #f1f2f3;
+        }
+      }
       .allimg {
+        margin-top: 24.5px;
         width: 70%;
         display: flex;
         justify-content: space-between;
diff --git a/src/views/pathmap/PathmapPage.vue b/src/views/pathmap/PathmapPage.vue
index 85942d3..17eb6a2 100644
--- a/src/views/pathmap/PathmapPage.vue
+++ b/src/views/pathmap/PathmapPage.vue
@@ -1,85 +1,89 @@
 <template>
   <div class="pathmap">
-  <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="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 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>
-          <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 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="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 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>
   </div>
-
-  </div>
 </template>
 
-<script>
-
-</script>
+<script></script>
 
 <style lang="scss">
 .pathmap {
@@ -88,281 +92,99 @@
   flex-direction: column;
   align-items: center;
   .main {
-    width:100%;
+    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%;
+      height: 162px;
       display: flex;
       flex-direction: column;
       align-items: center;
-      margin-top: 18px;
-      .course1_first {
-          width: 100%;
-          height: 35px;
+      //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;
+        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;
-          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);
-            }
-          }
+          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;
+        }
       }
-      .course_content {
+      .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)
-              ); 
-              }
-            }
-          }
+        .title {
+          margin-top: 15.5px;
+          font-size: 14px;
+          font-weight: 700;
+          line-height: 21.6px;
+          color: rgba(4, 36, 60, 1);
         }
-        .study2 {
+        .text2 {
           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)
-              ); 
-              }
-            }
-          }
+          margin-top: 10px;
+          margin-bottom: 22.5px;
+          font-size: 13px;
+          color: rgba(51, 51, 48, 1);
+          line-height: 24px;
+          text-overflow: ellipsis;
+          overflow: hidden;
         }
       }
-     }
-     .project_second {
-      width: 90%;
+    }
+    .down {
+      width: 100%;
+      margin-top: 11.5px;
+      //height: 529px;
       display: flex;
       flex-direction: column;
-      align-items:center;
-      margin-top: 10.5px;
-      .course1_first {
+      align-items: center;
+      //justify-content: center;
+      background-color: rgba(255, 255, 255, 1);
+      .project_title {
+        width: calc(100% - 36.5px);
+        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;
@@ -419,68 +241,250 @@
               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%;
+        }
+        .course_content {
+          width: 90%;
           display: flex;
-          position: relative;
-          height: 72px;
-          border-bottom: 0.5px solid rgba(241, 242, 243, 1);
-          .issue {
+          flex-direction: column;
+          justify-content: center;
+          margin-top: 26.5px;
+          .study1 {
+            display: flex;
+            //justify-content: center;
             width: 100%;
-            display: flex;
-            font-size: 13px;
-            line-height: 30.29px;
-            color: rgba(110, 123, 132, 1);
+            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)
+                  );
+                }
+              }
+            }
           }
-          .tag1 {
-            position: absolute;
-            left: 0;
-            bottom: 14.5px;
+          .study2 {
             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;
+            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;
+            }
           }
         }
       }
-     }
     }
   }
 }
diff --git a/src/views/projectdetails/projectDetails.vue b/src/views/projectdetails/projectDetails.vue
index 4b69d5a..1e7a55e 100644
--- a/src/views/projectdetails/projectDetails.vue
+++ b/src/views/projectdetails/projectDetails.vue
@@ -1,97 +1,101 @@
 <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="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 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>
-          <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 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="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 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>
-    <div class="last">
+      </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 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>
-
-  </div>
 </template>
 
-<script>
-
-</script>
+<script></script>
 
 <style lang="scss">
 .projectdetails {
@@ -100,467 +104,466 @@
   flex-direction: column;
   align-items: center;
   .main {
-    width:100%;
+    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%;
+      height: 162px;
       display: flex;
       flex-direction: column;
       align-items: center;
-      margin-top: 18px;
-      .course1_first {
-          width: 100%;
-          height: 35px;
+      //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;
+        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;
-          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);
-            }
-          }
+          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;
+        }
       }
-      .course_content {
+      .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)
-              ); 
-              }
-            }
-          }
+        .title {
+          margin-top: 15.5px;
+          font-size: 14px;
+          font-weight: 700;
+          line-height: 21.6px;
+          color: rgba(4, 36, 60, 1);
         }
-        .study2 {
+        .text2 {
           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)
-              ); 
-              }
-            }
-          }
+          margin-top: 10px;
+          margin-bottom: 22.5px;
+          font-size: 13px;
+          color: rgba(51, 51, 48, 1);
+          line-height: 24px;
+          text-overflow: ellipsis;
+          overflow: hidden;
         }
       }
-     }
-     .project_second {
-      width: 90%;
+    }
+    .down {
+      width: 100%;
+      margin-top: 11.5px;
+      //height: 529px;
       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%;
+      align-items: center;
+      //justify-content: center;
+      background-color: rgba(255, 255, 255, 1);
+      .project_title {
+        width: calc(100% - 36.5px);
         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;
-          }
-        }
+        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);
       }
-     }
-    }
-    .last {
-        width: 100%;
-        margin-top: 11.5px;
+      .project_first {
+        width: 90%;
         display: flex;
         flex-direction: column;
         align-items: center;
-        background-color: rgba(255, 255, 255, 1);
-        .project_title {
-            width:100%;
+        margin-top: 18px;
+        .course1_first {
+          width: 100%;
+          height: 35px;
+          display: flex;
+          justify-content: content;
+          border-radius: 10px;
+          background-color: #f9f9f9;
+          .text8 {
             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%;
+            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;
-            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);
-                    }
-                }
+            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: calc(100% - 36.5px);
+        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);
+            }
+          }
+        }
+      }
     }
   }
 }