路径静态修改

src/views/study/Growth.vue

@@ -3,16 +3,22 @@
     <div class="growth_heads">
       <div class="growth_left">
         <div class="left_text">我的成长路径</div>
-        <div class="growth_i">
+        <div class="growth_i" @click="explainBody=!explainBody">
           <div class="growth_mark">?</div>
         </div>
       </div>
       <div class="growth_right">
         <div class="right_text">什么是成长路径</div>
-        <div class="growth_img">
+        <div class="growth_img" @click="centerDialogVisible= true">
           <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">
@@ -78,13 +84,33 @@
               <span class="pro_text">总进度</span>
               <el-progress :stroke-width="12" :percentage="50"></el-progress>
             </div>
-            <div class="body_schedule_btn">
+            <div class="body_schedule_btn" @click="startLearn">
               <span class="body_schedule_text">开始学习</span>
             </div>
           </div>
         </div>
       </div>
     </div>
+    <div>
+      <el-dialog
+        title="成长路径说明"
+        :visible.sync="centerDialogVisible"
+        width="476px"
+        style="margin-top: 30vh;"
+        center>
+        <div class="dialog_body">
+          <div class="dialog_body_text">
+            本功能针对学员所在组织、岗位、职级自动匹配成长路径，完成本路径方可晋升
+          </div>
+          <div class="dialog_body_btn" @click="centerDialogVisible = false">
+            <span>我已阅读</span>
+          </div>
+          <div class="dialog_body_foot">
+            <el-checkbox v-model="checked">下次进入不再弹窗</el-checkbox>
+          </div>
+        </div>
+      </el-dialog>
+    </div>
   </div>
 </template>
 
@@ -94,24 +120,78 @@ export default {
   data() {
     return {
       downBody: false,
+      explainBody: false,
+      centerDialogVisible: true,
+      checked: false,
     }
   },
   mounted() {
+    
+  },
+  watch:{
+    
   },
   methods: {
     handleClose() {
       this.downBody = false
-    }
+    },
+    startLearn(){
+      this.$router.push({
+        path: '/growthpath'
+      })
+    },
   }
 };
 </script>
 
 <style scoped lang="scss">
+::v-deep .el-dialog__header{
+  height: 68px;
+  background: linear-gradient( 180deg, #E1DAFF 0%, #FFFFFF 100%);
+  padding-top: 23px;
+  margin-bottom: 36px;
+}
+::v-deep .el-dialog__body{
+  padding: 0;
+}
 .growth{
+  .dialog_body{
+    height: 238px;
+    margin-bottom: 32px;
+    .dialog_body_text{
+      width: 372px;
+      height: 52px;
+      font-weight: 400;
+      font-size: 14px;
+      color: #333333;
+      line-height: 26px;
+      text-align: left;
+      margin: 0 auto;
+      margin-bottom: 56px;
+    }
+    .dialog_body_btn{
+      cursor: pointer;
+      width: 152px;
+      margin: 0 auto;
+      margin-bottom: 31px;
+      height: 40px;
+      background: #387DF7;
+      box-shadow: 1px 2px 8px 1px rgba(56,125,247,0.38);
+      border-radius: 4px;
+      text-align: center;
+      line-height: 40px;
+      color: #ffffff;
+      font-size: 14px;
+    }
+    .dialog_body_foot{
+      margin: 0 0 40px 61px;
+    }
+  }
   .growth_heads{
     display: flex;
     justify-content: space-between;
     margin: 43px 86px 37px 81px;
+    position: relative;
     .growth_left{
       display: flex;
       justify-content: center;
@@ -157,6 +237,7 @@ export default {
         text-align: left;
       }
       .growth_img{
+        cursor: pointer;
         width: 20px;
         height: 20px;
         margin-left: 13px;
@@ -165,6 +246,36 @@ 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;