修改路径

src/views/study/Growth.vue

@@ -3,9 +3,24 @@
     <div class="growth_heads">
       <div class="growth_left">
         <div class="left_text">我的成长路径</div>
-        <div class="growth_i" @click="explainBody=!explainBody">
+          <el-popover
+            placement="right"
+            width="437"
+            trigger="click"
+            :visible-arrow="false"
+            v-model="explainBody"
+            popper-class="growth_explain"
+           >
+            <div slot="reference" class="growth_i">
               <div class="growth_mark">?</div>
             </div>
+            <div class="growth_explain1">
+              <div class="growth_explain_text">
+                根据您的归属组织、您所在岗位、职级，已为您自动匹配“产品企划岗Band6～7成长路径”，抓紧时间学习吧～
+                <div class="explain_close"  @click="explainBody = false"></div>
+              </div>
+            </div>
+          </el-popover>
       </div>
       <div class="growth_right">
         <div class="right_text">什么是成长路径</div>
@@ -13,12 +28,6 @@
           <img class="img" src="../../assets/images/growth/mark.png" alt="">
         </div>
       </div>
-      <div v-show="explainBody" class="growth_explain">
-        <div class="growth_explain_text">
-          根据您的归属组织、您所在岗位、职级，已为您自动匹配“产品企划岗Band6～7成长路径”，抓紧时间学习吧～
-          <div class="explain_close"  @click="explainBody = false"></div>
-        </div>
-      </div>
     </div>
     <div class="growth_body">
       <div class="body_head">
@@ -31,27 +40,40 @@
           </div>
         </div>
       </div>
-      <div class="growth_body_shared" @click="downBody = true">
+      <el-popover
+        placement="bottom-end"
+        width="300"
+        trigger="click"
+        :visible-arrow="false"
+        v-model="downBody"
+        offset="0"
+        popper-class="growth_body_down"
+        >
+        <div slot="reference" class="growth_body_shared">
           <img class="shared_img" src="../../assets/images/growth/growthRight.png" alt="">
           <span class="shared_text">共享文档</span>
         </div>
-      <div class="growth_body_down" v-show="downBody">
+        <div class="growth_body_down">
           <div class="down_head">
             <span class="down_head_text">共享文档</span>
-          <div class="down_close" @click="handleClose">
+            <div class="down_close" @click="downBody = false">
               <img class="down_close_img" src="../../assets/images/growth/close.png" alt="">
             </div>
           </div>
-        <div class="down_body">
+          <div class="down_over">
+            <div class="down_body" v-for="itme in 10">
               <div class="down_body_left">
                 <img class="left_img" src="../../assets/images/growth/ppt.png" alt="">
-            <span class="left_text">人工智能启蒙讲解讲义.pptx</span>
+                <span title="人工智能启蒙讲解讲义.pptx" class="left_text">人工智能启蒙讲解讲义.pptx</span>
               </div>
               <div class="down_btn">
                 <span class="down_btn_text">下载</span>
               </div>
             </div>
           </div>
+        </div>
+      </el-popover>
+      
       <div class="body_explain">
         <div class="body_explain_icon">
           <img class="body_explain_img" src="../../assets/images/growth/growthLeft.png" alt="">
@@ -132,9 +154,6 @@ export default {
     
   },
   methods: {
-    handleClose() {
-      this.downBody = false
-    },
     startLearn(){
       this.$router.push({
         path: '/growthpath'
@@ -154,6 +173,125 @@ export default {
 ::v-deep .el-dialog__body{
   padding: 0;
 }
+
+.growth_body_down{
+      background-image: url(../../assets/images/growth/fileBack.png);
+      background-repeat: no-repeat;
+      background-size:100%;
+      width: 487px;
+      max-height: 452px;
+      position: absolute;
+      right: -120px;
+      top: -22px;
+      padding-right: 32px;
+      .down_head{
+        margin-top: 57px;
+        margin-bottom: 34px;
+        text-align: center;
+        position: relative;
+        .down_head_text{
+          width: 96px;
+          height: 28px;
+          font-weight: 600;
+          font-size: 24px;
+          color: #387DF7;
+          line-height: 28px;
+          text-align: left;
+        }
+        .down_close{
+          position: absolute;
+          cursor: pointer;
+          right: 37px;
+          top: -18px;
+          .down_close_img{
+            width: 26px;
+            height: 26px;
+          }
+        }
+      }
+      .down_over{
+        padding: 0px 40px 0px 63px;
+        overflow-y: auto;
+        max-height: 309px;
+        .down_body{
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 22px;
+          .down_body_left{
+            display: flex;
+            .left_img{
+              width: 20px;
+              height: 20px;
+            }
+            .left_text{
+              display: inline-block;
+              overflow: hidden;
+              text-align: left;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              margin-left: 18px;
+              width: 210px;
+              height: 20px;
+              font-weight: 500;
+              font-size: 14px;
+              color: #677D86;
+              line-height: 20px;
+            }
+          }
+          .down_btn{
+            cursor: pointer;
+            width: 70px;
+            height: 28px;
+            line-height: 28px;
+            border-radius: 4px;
+            border: 1px solid #387DF7;
+            text-align: center;
+            .down_btn_text{
+              width: 28px;
+              height: 20px;
+              font-weight: 400;
+              font-size: 14px;
+              color: #387DF7;
+              line-height: 20px;
+            }
+          }
+        }
+      }
+    }
+.growth_explain{
+  top: 347xp !important;
+  .growth_explain1{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 487px;
+    height: 170px;
+    margin: -37px;
+    background: url("../../assets/images/growth/explain.png") no-repeat;
+    background-size: 100%;
+    .growth_explain_text{
+      width: 376px;
+      height: 56px;
+      font-weight: 400;
+      font-size: 14px;
+      color: #333333;
+      line-height: 28px;
+      text-align: left;
+      position: relative;
+      .explain_close{
+        cursor: pointer;
+        background-image: url(../../assets/images/growth/close.png);
+        z-index: 99999;
+        width: 26px;
+        height: 26px;
+        position: absolute;
+        right: -21px;
+        top: -26px;
+      }
+    }
+
+  }
+    }
 .growth{
   .dialog_body{
     height: 238px;
@@ -246,36 +384,6 @@ export default {
         }
       }
     }
-    .growth_explain{
-      position: absolute;
-      z-index: 99;
-      top: -13px;
-      left: 118px;
-      width: 487px;
-      height: 170px;
-      background-image: url(../../assets/images/growth/explain.png);
-      .growth_explain_text{
-        width: 376px;
-        height: 56px;
-        font-weight: 400;
-        font-size: 14px;
-        color: #333333;
-        line-height: 28px;
-        text-align: left;
-        margin: 56px 54px 58px 57px;
-        position: relative;
-        .explain_close{
-          cursor: pointer;
-          background-image: url(../../assets/images/growth/close.png);
-          z-index: 99999;
-          width: 26px;
-          height: 26px;
-          position: absolute;
-          right: -21px;
-          top: -26px;
-        }
-      }
-    }
   }
   .growth_body{
     max-width: 1340px;
@@ -305,77 +413,6 @@ export default {
         margin-left: 9px;
       }
     }
-    .growth_body_down{
-      background-image: url(../../assets/images/growth/fileBack.png);
-      background-repeat: no-repeat;
-      background-size:100%;
-      width: 487px;
-      max-height: 452px;
-      position: absolute;
-      right: 23px;
-      top: 116px;
-      .down_head{
-        margin-top: 57px;
-        margin-bottom: 34px;
-        text-align: center;
-        position: relative;
-        .down_head_text{
-          width: 96px;
-          height: 28px;
-          font-weight: 600;
-          font-size: 24px;
-          color: #387DF7;
-          line-height: 28px;
-          text-align: left;
-        }
-        .down_close{
-          position: absolute;
-          cursor: pointer;
-          right: 37px;
-          top: -18px;
-          .down_close_img{
-            width: 26px;
-            height: 26px;
-          }
-        }
-      }
-      .down_body{
-        display: flex;
-        justify-content: space-between;
-        margin: 64px 72px 72px 63px;
-        .down_body_left{
-          .left_img{
-            width: 20px;
-            height: 20px;
-          }
-          .left_text{
-            margin-left: 18px;
-            width: 210px;
-            height: 20px;
-            font-weight: 500;
-            font-size: 14px;
-            color: #677D86;
-            line-height: 20px;
-          }
-        }
-        .down_btn{
-          cursor: pointer;
-          width: 70px;
-          height: 28px;
-          border-radius: 4px;
-          border: 1px solid #387DF7;
-          text-align: center;
-          .down_btn_text{
-            width: 28px;
-            height: 20px;
-            font-weight: 400;
-            font-size: 14px;
-            color: #387DF7;
-            line-height: 20px;
-          }
-        }
-      }
-    }
     .body_head{
       max-width: 1340px;
       height: 88px;