Merge branch 'dev0124' into zcwy-master

# Conflicts:
#	src/components/UserCenter/menu.vue
#	src/router/index.js

src/api/growth/index.js

@@ -0,0 +1,11 @@
+import ajax from "@/api/ajax"
+//获取详情
+export const getList = (params) => ajax.get('/manageApi',`/stu/grow/getStuLearnInfo?userId=${params}`);
+//获取路径图详情
+export const taskList = (params) => ajax.get('/manageApi',`/stu/grow/taskList?growId=${params}`);
+//全岗位路径
+export const getFullJobPath = (params) => ajax.get('/manageApi',`/stu/grow/getFullJobPath`);
+//外部考试
+export const queryExternalExam = (params) => ajax.get('/manageApi',`/external/exam/queryExternalExam?externalId=${params.externalId}&type=14`);
+//外部考试点击调用
+export const submitExternalExam = (params) => ajax.postJson('/manageApi',`/stu/externalExam/submitExternalExam`,params);

src/components/UserCenter/menu.vue

@@ -260,9 +260,12 @@
            <!-- <el-menu-item index="/exam/mytask">
             <i class="el-icon-menu"></i>
             <span slot="title" class="textl">我的考试</span>
-          </el-menu-item> -->
-          <!---去掉->
-         <!-- <el-menu-item index="/uc/study/path"  v-show="isTest">
+          </el-menu-item>
+          <el-menu-item index="/uc/study/growth">
+            <span slot="title" class="textl">成长路径</span>
+          </el-menu-item>
+          <!-- 去掉
+          <el-menu-item index="/uc/study/path"  v-show="isTest">
             <span slot="title" class="textl">学习路径图</span>
           </el-menu-item>
           <el-menu-item index="/uc/study/project"  v-show="isTest">

src/data/pages.js

@@ -80,6 +80,7 @@ export const pages=[
     {title:'正在学习',path:'courses',component:'study/Courses',hidden:false},
     {title:'历史记录',path:'history',component:'study/FinishCourses',hidden:false},
     {title:'学习路径图',path:'path',component:'study/StudyPath',hidden:false},
+    {title:'成长路径',path:'growth',component:'study/Growth',hidden:false},
     {title:'学习项目',path:'project',component:'study/StudyProject',hidden:false}
   ]},
   {title:'个人中心',path:'/uc',hidden:false,children:[

src/router/index.js

@@ -110,6 +110,27 @@ export const constantRoutes = [{
   name: 'course',
   meta: { title: '课程', keepAlive: true, icon: 'dashboard', noCache: true, affix: false },
 },
+// {
+//   path: '/growth',
+//   hidden: true,
+//   component: (resolve) => require(['@/views/study/Growth'], resolve),
+//   name: 'growth',
+//   meta: { title: '成长路径', keepAlive: true, icon: 'dashboard', noCache: true, affix: false },
+// },
+{
+  path: '/growthpath',
+  hidden: true,
+  component: (resolve) => require(['@/views/study/GrowthPath'], resolve),
+  name: 'growthpath',
+  meta: { title: '成长路径图', keepAlive: true, icon: 'dashboard', noCache: true, affix: false },
+},
+{
+  path: '/ExamScore',
+  hidden: true,
+  component: (resolve) => require(['@/views/study/ExamScore'], resolve),
+  name: 'ExamScore',
+  meta: { title: '成长路径图', keepAlive: true, icon: 'dashboard', noCache: true, affix: false },
+},
 {
     path: '/courseRecommended',
     hidden: true,

src/views/exam/Test.vue

@@ -16,7 +16,7 @@
                 <li v-if="testPaper.deadlineTime">结束时间:  {{ testPaper.deadlineTime }}</li>
               </ul>
             </div>
-            <div v-if="testPaper.testFront" style="padding: 20px;text-align: center;" v-html="testPaper.testFront">
+            <div v-if="testPaper.testFront && testPaper.testFront != 'null'" style="padding: 20px;text-align: center;" v-html="testPaper.testFront">
               <!--考前说明-->
             </div>
             <div v-if="canExam" class="test-time" style="margin-top:20px" >
@@ -43,7 +43,7 @@
 
               </div>
               <el-table :data="tableData" style="width: 100%" v-if="loading == 2">
-              <el-table-column prop="startTime" label="完成时间" width="180"></el-table-column>
+              <el-table-column prop="endTime" label="完成时间" width="200"></el-table-column>
               <el-table-column prop="score" align="center" label="成绩">
                 <template slot-scope="scope">
                   <span>{{toScoreTow(scope.row.score)}}分</span>

src/views/study/ExamScore.vue

@@ -0,0 +1,567 @@
+<template>
+  <div>
+    <div style="background-color: #0078fc;">
+      <portalHeader textColor="#fff" class="qa-nav" @emitInput="emitInput" @showClass="showClass"></portalHeader>
+    </div>
+    <div style=" background: #0078fc;height: 150px;width: 100%;position: absolute;top: 0;z-index:-9999;"></div>
+    <div class="moreactive" style="padding: 30px">
+      <!-- 面包屑导航 -->
+      <div class="crumb">
+        <div>学习任务</div>
+        <div style="margin-left: 6px; margin-right: 6px">/</div>
+        <div>外部考试</div>
+        <div style="margin-left: 6px; margin-right: 6px">/</div>
+        <div style="font-weight: 700; font-size: 16px">考试详情</div>
+        <div class="return">
+          <div style="background: #fff;display: flex;color:#0073FB;align-items: center;justify-content: center;border-radius: 6px;width: 92px;height: 32px;" @click="returnclick">
+            <!-- <div style="color:#0073FB;display: flex;align-items: center;">	 -->
+              <img class="img2" style="margin-right:11px;cursor: pointer;" src="../../assets/images/growth/return.png" />
+              <span>返回</span>
+            <!-- </div> -->
+          </div>
+        </div>
+      </div>
+      <!-- 面包屑导航 -->
+      <!-- 详细信息 -->
+      <div class="detailinfo">
+        <div class="detail">
+          <div class="detailT">
+            <div class="left">
+              <div class="debateTitle" style="color:rgba(51, 51, 51, 1);font-size:20px;margin-top:46px;">【考试】{{ this.$route.query.pName }}</div>
+              <div class="title">
+                <img
+                    style="width: 20px; height: 20px"
+                    src="../../assets/images/growth/yuan.png"
+                />
+                <div class="text">数据来源</div>
+                <div class="box"></div>
+              </div>
+              <div class="all" style="font-size:14px;color:rgba(51, 51, 48, 1);">
+                {{  datainfo.source ? datainfo.source : "-"  }}
+              </div>            
+            </div>
+          </div>
+
+          <div class="detailT" style="margin-top:20px;height:671px;">
+            <div class="left">
+              <div class="title">
+                <img
+                    style="width: 20px; height: 20px"
+                    src="../../assets/images/growth/yuan.png"
+                />
+                <div class="text">考试说明</div>
+                <div class="box"></div>
+              </div>
+              <!-- <div style="display: flex; align-items: center"></div> -->
+              <div class="all" style="font-size:14px;color:rgba(51, 51, 48, 1);">
+                <div>
+                    {{ datainfo.examinationExplain ? datainfo.examinationExplain : "暂无考试说明" }}
+                </div>
+              </div>            
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 详细信息 -->
+    </div>
+  </div>
+</template>
+
+<script>
+import portalHeader from '@/components/PortalHeader.vue';
+import {queryExternalExam,submitExternalExam} from '@/api/growth/index'
+  export default {
+    name: "ExamScore",
+    components: { portalHeader },
+    data() {
+      return {
+        hasPrev: false,
+        hasNext: false,
+        exname: "",
+        datainfo: {},
+      };
+    },
+    mounted() {
+      queryExternalExam({
+        externalId: this.$route.query.courseId
+      }).then(res=>{
+        console.log(res,'res')
+        this.datainfo = res.data
+      })
+    },
+    methods: {
+      returnclick () {
+        this.$router.back();
+      },
+      emitInput(val) {
+        this.queryKeyWord = val;
+        this.isSeach = true;
+        this.search();
+      },
+      showClass(flag) {
+        if (flag) {
+          this.showUClass = flag;
+        }
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .clearfix:before,
+  .clearfix:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+  
+  .moreactive {
+    .crumb {
+      color: #fff;
+      display: flex;
+      font-size: 14px;
+      line-height: 24px;
+      position: relative;
+    }
+    .return{
+      position: absolute;
+      right: 1%;
+      .text{
+        text-align: center;
+       display: flex;
+       flex-direction: row;
+       align-items: center;
+      }
+    }
+    .preNext {
+      position: absolute;
+      right: 0px;
+  
+      .content {
+        font-size: 14px;
+        color: #fff;
+        width: 43px;
+        height: 14px;
+        display: inline-block;
+        position: relative;
+        top: -6px;
+        cursor: pointer;
+      }
+  
+      .btn {
+        width: 23px;
+        height: 23px;
+        border-radius: 50%;
+        border: 0;
+        cursor: pointer;
+      }
+    }
+  
+    .debateTitle {
+      margin-top: 15px;
+      font-size: 20px;
+      line-height: 24px;
+      height: 24px;
+      font-weight: 600;
+      color: #fff;
+      margin-left: -10px;
+    }
+  
+    .detailinfo {
+      width: 100%;
+      margin-top: 20px;
+      display: flex;
+  
+      .detail {
+        flex: 1;
+        // margin-right: 20px;
+        .detailT {
+          min-height: 95px;
+          background: #ffffff;
+          border-radius: 8px;
+          color: rgba(51, 51, 51, 1);
+          display: flex;
+          padding-bottom: 20px;
+  
+          .left {
+            margin-left: 48px;
+            flex: 1;
+          }
+  
+          .right {
+            width: 417px;
+            margin-right: 48px;
+  
+            .righttitle {
+              display: flex;
+              padding-top: 39px;
+              position: relative;
+  
+              .text {
+                margin-left: 8px;
+                font-size: 16px;
+                color: rgba(51, 51, 51, 1);
+                font-weight: 800;
+              }
+  
+              .box {
+                width: 75px;
+                height: 10px;
+                background-color: rgba(36, 120, 255, 0.15);
+                position: absolute;
+                left: 23px;
+                top: 53px;
+              }
+            }
+  
+            .timebox {
+              width: 417px;
+              height: 149px;
+              background: linear-gradient(90deg, #b6c6e1 0%, #89aed6 100%);
+              border-radius: 4px;
+              margin-top: 42px;
+            }
+  
+            .innertime {
+              margin-top: 17px;
+              margin-left: 55px;
+              font-size: 14px;
+              font-weight: 500;
+              color: #ffffff;
+              line-height: 24px;
+            }
+  
+            .endtime {
+              margin-left: 10px;
+              margin-top: 16px;
+              width: 397px;
+              height: 81px;
+              background: #f2f5f7;
+              border-radius: 0px 8px 0px 8px;
+  
+              .endtimetext {
+                margin-top: 25px;
+                margin-left: 46px;
+  
+                .te {
+                  font-size: 28px;
+                  font-weight: 800;
+                  color: #4a9cf8;
+                  line-height: 24px;
+                }
+              }
+            }
+  
+            .explain {
+              margin-top: 30px;
+              width: 416px;
+              padding-bottom: 50px;
+              background: #f2f5f7;
+              border-radius: 8px;
+            }
+  
+            .explaincontent {
+              width: 368px;
+              font-size: 16px;
+              font-weight: 500;
+              color: #333330;
+              line-height: 24px;
+              margin-left: 24px;
+              margin-top: 47px;
+            }
+          }
+  
+          .title {
+            display: flex;
+            align-items: center;
+            padding-top: 39px;
+            position: relative;
+          }
+  
+          .title .text {
+            margin-left: 8px;
+            font-size: 16px;
+            color: rgba(51, 51, 51, 1);
+            font-weight: 800;
+          }
+  
+          .title .box {
+            width: 75px;
+            height: 10px;
+            background-color: rgba(36, 120, 255, 0.15);
+            position: absolute;
+            left: 23px;
+            top: 53px;
+          }
+  
+          .all {
+            display: flex;
+            justify-content: space-between;
+            // width: 1280px;
+            margin-right: 48px;
+            margin-top: 43px;
+  
+            .allbox1 {
+              margin-right: 22px;
+              background: linear-gradient(
+                      0deg,
+                      rgba(160, 193, 230, 0) 0%,
+                      rgba(161, 195, 231, 0.2) 100%
+              );
+            }
+  
+            .allbox2 {
+              margin-right: 22px;
+              background: linear-gradient(
+                      0deg,
+                      rgba(177, 219, 229, 0) 0%,
+                      rgba(172, 216, 227, 0.2) 100%
+              );
+            }
+  
+            .allbox3 {
+              background: linear-gradient(
+                      0deg,
+                      rgba(195, 209, 234, 0) 0%,
+                      rgba(191, 206, 231, 0.2) 100%
+              );
+            }
+  
+            .item {
+              // width: 410px;
+              width: calc(100% - 44px);
+              height: 149px;
+              text-align: center;
+              border-radius: 4px;
+  
+              .item1 {
+                color: #089dff;
+                font-size: 24px;
+                font-weight: bold;
+                margin-top: 36px;
+              }
+  
+              .item2 {
+                color: #333330;
+                font-size: 14px;
+                margin-top: 29px;
+              }
+            }
+          }
+  
+          .join {
+            // width: 1280px;
+            margin-right: 48px;
+            // min-height: 408px;
+            // background: #f5f6f7;
+            // border-radius: 8px;
+            margin-top: 32px;
+            margin-left: 21px;
+            flex: 1;
+  
+            .stem {
+              display: flex;
+              font-size: 16px;
+              font-weight: 500;
+              color: #333330;
+              line-height: 38px;
+            }
+  
+            .options {
+              display: flex;
+              align-items: center;
+              flex-wrap: wrap;
+            }
+  
+            .radio {
+              margin-top: 14px;
+              margin-left: -16px;
+              position: relative;
+            }
+  
+            .radio label {
+              line-height: 20px;
+              position: relative;
+              display: flex;
+              align-items: center;
+              font-weight: normal;
+  
+              .opt-text {
+                font-size: 14px;
+                font-weight: bold;
+                color: #333330;
+                line-height: 18px;
+                margin-left: 10px;
+              }
+            }
+  
+            .radio .option {
+              width: 19px;
+              height: 18px;
+              // position: absolute;
+              // top: 1px;
+              // // top: 32px;
+              // left: 0px;
+              background-size: cover;
+              // background: url(../../assets/image/noselect.png) no-repeat;
+              background-size: cover;
+            }
+  
+            .radio input[type="radio"] {
+              display: inline-block;
+              margin-right: -3px;
+              opacity: 0;
+            }
+  
+            .radio input[type="radio"]:checked + div {
+              // background: url(../../assets/image/select.png) no-repeat;
+              background-size: cover;
+            }
+  
+            .imgcontent {
+              display: flex;
+  
+              .imgone {
+                width: 140px;
+                height: 140px;
+                border-radius: 8px;
+                // background-image: url(../../assets/image/px.png);
+                background-size: 100% 100%;
+                background-position: center;
+              }
+            }
+  
+            .ontitle {
+              margin-top: 27px;
+              font-size: 14px;
+              color: #333330;
+            }
+          }
+        }
+  
+        .detailB {
+          min-height: 363px;
+          background: #ffffff;
+          border-radius: 8px;
+          margin-top: 20px;
+  
+          .el-tabs__item {
+            height: 69px;
+            padding: 25px 7px 0px 52px;
+            font-size: 14px;
+            font-weight: 500;
+          }
+  
+          .el-tabs__nav-wrap::after {
+            background-color: rgba(56, 125, 247, 0.2);
+          }
+  
+          .enclosure {
+            height: 89px;
+            margin-left: 51px;
+            margin-right: 40px;
+            // border-bottom: 1px solid rgba(56, 125, 247, 0.2);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+  
+            .enclosureL {
+              display: flex;
+              align-items: center;
+              font-size: 14px;
+              font-weight: 400;
+              color: #677d86;
+              line-height: 24px;
+            }
+  
+            .download {
+              display: flex;
+              align-items: center;
+              font-size: 16px;
+              font-weight: 400;
+              color: #2478ff;
+              line-height: 24px;
+              cursor: pointer;
+            }
+          }
+  
+          .work {
+            margin-left: 51px;
+            margin-right: 40px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 37px;
+          }
+  
+          .work .question {
+            font-size: 14px;
+            font-weight: 500;
+            color: #333330;
+            line-height: 18px;
+          }
+  
+          .work .active {
+            width: 82px;
+            height: 28px;
+            background: linear-gradient(90deg, #a5d4e0 0%, #b4dce6 100%);
+            border-radius: 4px;
+            font-size: 14px;
+            font-weight: 500;
+            color: #ffffff;
+            line-height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            margin-right: 11px;
+          }
+  
+          .work .unactive {
+            width: 80px;
+            height: 26px;
+            border: 1px solid #a5d4e0;
+            border-radius: 4px;
+            font-size: 14px;
+            font-weight: 500;
+            color: #a5d4e0;
+            line-height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 11px;
+            cursor: pointer;
+          }
+  
+          .work .btncolor {
+            background: linear-gradient(90deg, #84aad2 0%, #a4c5e9 100%);
+          }
+  
+          .work .bordercolor {
+            border: 1px solid #85aad2;
+          }
+  
+          .work .fontcolor {
+            color: rgba(133, 170, 210, 1);
+          }
+  
+          .work .submit {
+            width: 126px;
+            height: 46px;
+            background: #2478ff;
+            box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+            border-radius: 4px;
+            font-size: 16px;
+            font-weight: 800;
+            color: #ffffff;
+            line-height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+  </style>

src/views/study/Growth.vue

@@ -0,0 +1,652 @@
+<template>
+  <div>
+    <div v-if="Object.keys(detailData).length" class="growth">
+      <div class="growth_heads">
+        <div class="growth_left">
+          <div class="left_text">我的成长路径</div>
+            <el-popover
+              placement="right"
+              width="437"
+              trigger="hover"
+              :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">
+                  <div class="text">根据您的归属组织、您所在岗位、职级，已为您自动匹配“{{detailData.growName || ''}}”，抓紧时间学习吧～</div>
+                  <div class="explain_close"  @click="explainBody = false"></div>
+                </div>
+              </div>
+            </el-popover>
+        </div>
+        <div class="growth_right">
+          <div class="right_text">什么是成长路径</div>
+          <div class="growth_img" @click="checkedTrue">
+            <img class="img" src="../../assets/images/growth/mark.png" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="growth_body">
+        <div class="body_head">
+          <div class="head_left">{{detailData.growName || ''}}</div>
+          <div class="head_right">
+            <div class="head_right_one">{{detailData.organizationName || ''}}</div>
+            <div class="head_right_two">
+              <span class="head_right_sta">学习状态:</span>
+              <span class="head_right_status" :style="{color: ['#FF8336','#31AF0D','#409EFF '][detailData.studyStatus]}"> {{detailData.studyStatus==0?'未开始':detailData.studyStatus==1?'已完成':'进行中'}}</span>
+            </div>
+          </div>
+        </div>
+        <!-- <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">
+            <div class="down_head">
+              <span class="down_head_text">共享文档</span>
+              <div class="down_close" @click="downBody = false">
+                <img class="down_close_img" src="../../assets/images/growth/close.png" alt="">
+              </div>
+            </div>
+            <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 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 v-if="detailData.remark" class="body_explain">
+          <div class="body_explain_icon">
+            <img class="body_explain_img" src="../../assets/images/growth/growthLeft.png" alt="">
+            <div class="body_explain_text">说明</div>
+          </div>
+          <div class="body_explain_item">
+            <div class="body_explain_text">
+              {{detailData.remark || ''}}
+            </div>
+          </div>
+        </div>
+        <div class="body_schedule" v-if="detailData.taskNum > 0">
+          <div class="body_schedule_icon">
+            <img class="body_schedule_img" src="../../assets/images/growth/growthTime.png" alt="">
+            <div class="body_schedule_text">学习进度</div>
+          </div>
+          <div class="body_schedule_item">
+            <div class="body_schedule_one">
+              <div class="body_schedule_left">
+                <div>总任务</div>
+                <div>当前任务</div>
+              </div>
+              <div class="body_schedule_right">
+                <div>{{detailData.taskNum}}门</div>
+                <div :title="detailData.currentTaskName">{{detailData.currentTaskName.length>30?detailData.currentTaskName.slice(0,30)+'...':detailData.currentTaskName}}</div>
+              </div>
+            </div>
+            <div class="body_schedule_two">
+              <div class="body_schedule_pro">
+                <span class="pro_text">总进度</span>
+                <div style="display: flex;align-items: center;">
+                  <el-progress style="width: 268px;" :show-text="false" :stroke-width="12" :percentage="Number(((detailData.overallCompletionRate || 0)*100).toFixed(2))"></el-progress>
+                  <div class="text">{{ Number(((detailData.overallCompletionRate || 0)*100).toFixed(2)) || 0 }}%</div>
+                </div>
+              </div>
+              <div class="body_schedule_btn" @click="startLearn">
+                <span class="body_schedule_text">{{detailData.overallCompletionRate==0?'开始学习':detailData.overallCompletionRate==1?'回顾':'继续学习'}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-else>
+          <el-empty :image-size="200"></el-empty>
+        </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 @click="centerDialogVisible = false" class="dialog_body_btn">
+              <span>我已阅读</span>
+            </div>
+            <div class="dialog_body_foot">
+              <el-checkbox v-model="checked">下次进入不再弹窗</el-checkbox>
+            </div>
+          </div>
+        </el-dialog>
+      </div>
+    </div>
+    <el-empty v-else :image-size="200"></el-empty>
+  </div>
+</template>
+
+<script>
+import {getList} from '@/api/growth'
+import {mapGetters} from 'vuex'
+export default {
+  name: 'Growth',
+  data() {
+    return {
+      downBody: false,
+      explainBody: false,
+      centerDialogVisible: false,
+      checked: false,
+      detailData: {},
+    }
+  },
+  mounted() {
+    getList(this.userInfo.aid).then(res=>{
+      if(res.code == 200 ){
+        this.detailData = res.data
+      }
+      if(res.code == 4){
+        // this.$message({
+        //   type: 'error',
+        //   message: res.msg
+        // })
+      }
+    })
+    if(localStorage.getItem("checkedGrowth") != null){
+      this.centerDialogVisible = localStorage.getItem("checkedGrowth") === "true"
+    }else{
+      this.centerDialogVisible = true
+    }
+  },
+  watch:{
+    checked(){
+      this.checkedVisible()
+    }
+  },
+  methods: {
+    startLearn(){
+      this.$router.push({
+        path: '/growthpath',
+        query: {growId:this.detailData.growId,name: this.detailData.growName,isTrue: true,status:this.detailData.overallCompletionRate}
+      })
+    },
+    checkedTrue(){
+      this.centerDialogVisible = true
+      this.checked = localStorage.getItem("checkedGrowth") === "false"
+    },
+    checkedVisible(){
+      // this.centerDialogVisible = false
+      localStorage.setItem("checkedGrowth",!this.checked)
+    },
+  },
+  computed: {
+    ...mapGetters(['userInfo'])
+  },
+};
+</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_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;
+      .text{
+        display: -webkit-box;
+        word-wrap: break-word;
+        word-break:break-all;
+        overflow: hidden;
+        text-overflow:ellipsis;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp:2;
+      }
+      .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;
+    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: 22px 43px 19px 40px;
+    position: relative;
+    .growth_left{
+      display: flex;
+      justify-content: center;
+      line-height: 40px;
+      .left_text{
+        width: 108px;
+        height: 25px;
+        font-weight: 600;
+        font-size: 18px;
+        color: #333333;
+        text-align: left;
+      }
+      .growth_i{
+        cursor: pointer;
+        width: 20px;
+        height: 20px;
+        margin-left: 7px;
+        border: 1px solid #999999;
+        border-radius: 100%;
+        margin-top: 10px;
+        .growth_mark{
+          color: #999999;
+          line-height: 20px;
+          margin-left: 5px;
+        }
+      }
+    }
+    .growth_right{
+      width: 198px;
+      height: 40px;
+      line-height: 40px;
+      background: #387DF7;
+      box-shadow: 1px 2px 15px 1px rgba(56,125,247,0.34);
+      border-radius: 20px;
+      display: flex;
+      justify-content: center;
+      .right_text{
+        width: 112px;
+        height: 22px;
+        font-weight: 400;
+        font-size: 16px;
+        color: #FFFFFF;
+        text-align: left;
+      }
+      .growth_img{
+        cursor: pointer;
+        width: 20px;
+        height: 20px;
+        margin-left: 13px;
+        .img{
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+  .growth_body{
+    max-width: 1340px;
+    height: 574px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    border: 1px solid #E4EDFE;
+    margin: 0 41px 0px 38px;
+    position: relative;
+    .growth_body_shared{
+      cursor: pointer;
+      position: absolute;
+      right: 46px;
+      top: 107px;
+      .shared_img{
+        width: 21px;
+        height: 18px;
+      }
+      .shared_text{
+        width: 64px;
+        height: 22px;
+        font-weight: 600;
+        font-size: 16px;
+        color: #409EFF;
+        line-height: 22px;
+        text-align: left;
+        margin-left: 9px;
+      }
+    }
+    .body_head{
+      max-width: 1340px;
+      height: 88px;
+      background: linear-gradient( 180deg, #DEEBFF 0%, #FFFFFF 100%);
+      border-radius: 10px 10px 0px 0px;
+      border: 1px solid #E4EDFE;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 25px;
+      .head_left{
+        // width: 272px;
+        height: 28px;
+        font-weight: 600;
+        font-size: 20px;
+        color: #387DF7;
+        line-height: 28px;
+        text-align: left;
+        margin: 29px 0 0 33px;
+      }
+      .head_right{
+        // width: 326px;
+        height: 22px;
+        font-weight: 400;
+        font-size: 16px;
+        color: #666660;
+        line-height: 22px;
+        margin: 32px 45px 0 0;
+        display: flex;
+        justify-content: space-between;
+        line-height: 22px;
+        .head_right_one{
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+        .head_right_two{
+          margin-left: 14px;
+          .head_right_sta{
+
+          }
+          .head_right_status{
+            color: #409EFF;
+          }
+        }
+      }
+    }
+    .body_explain{
+      margin-bottom: 25px;
+      .body_explain_icon{
+        display: flex;
+        margin-left: 35px;
+        margin-bottom: 23px;
+        .body_explain_img{
+          width: 16px;
+          height: 16px;
+          margin-top: 4px;
+        }
+        .body_explain_text{
+          width: 32px;
+          height: 22px;
+          font-weight: 600;
+          font-size: 16px;
+          color: #333333;
+          line-height: 22px;
+          text-align: left;
+          margin-left: 10px;
+        }
+      }
+      .body_explain_item{
+        margin-left: 35px;
+        margin-right: 45px;
+        max-width: 1260px;
+        max-height: 100px;
+        background: #F5F6F7;
+        border-radius: 10px;
+        padding: 22px 25px 22px 16px;
+        .body_explain_text{
+          max-width: 1219px;
+          max-height: 56px;
+          font-weight: 400;
+          font-size: 14px;
+          color: #333333;
+          line-height: 28px;
+          text-align: left;
+          display: -webkit-box;
+          word-wrap: break-word;
+          word-break:break-all;
+          overflow: hidden;
+          text-overflow:ellipsis;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp:2;
+        }
+      }
+    }
+    .body_schedule{
+      .body_schedule_icon{
+        display: flex;
+        margin-bottom: 33px;
+        .body_schedule_img{
+          width: 16px;
+          height: 16px;
+          margin-left: 35px;
+          margin-top: 4px;
+        }
+        .body_schedule_text{
+          width: 64px;
+          height: 22px;
+          font-weight: 600;
+          font-size: 16px;
+          color: #333333;
+          line-height: 22px;
+          text-align: left;
+          margin-left: 10px;
+        }
+      }
+      .body_schedule_item{
+        margin-left: 58px;
+        .body_schedule_one{
+          display: flex;
+          margin-bottom: 52px;
+          .body_schedule_left{
+            min-width: 65px;
+            font-weight: 500;
+            font-size: 16px;
+            color: #3B3C4A;
+            line-height: 22px;
+            text-align: left;
+          }
+          .body_schedule_right{
+            margin-left: 16px;
+            min-width: 65px;
+            font-weight: 500;
+            font-size: 16px;
+            color: #2E72F2;
+            line-height: 22px;
+            text-align: left;
+          }
+        }
+        .body_schedule_two{
+          display: flex;
+          .body_schedule_pro{
+            width: 314px;
+            height: 37px;
+            .pro_text{
+              width: 42px;
+              height: 22px;
+              font-weight: 400;
+              font-size: 14px;
+              color: #666660;
+              line-height: 22px;
+              text-align: left;
+              margin-bottom: 2px;
+            }
+            .text{
+              font-weight: 400;
+              font-size: 12px;
+              color: #333333;
+              margin-left: 19px;
+            }
+          }
+          .body_schedule_btn{
+            width: 140px;
+            cursor: pointer;
+            height: 40px;
+            margin-left: 44px;
+            margin-top: 7px;
+            background: #409EFF;
+            box-shadow: 1px 2px 15px 1px rgba(56,125,247,0.34);
+            border-radius: 4px;
+            text-align: center;
+            line-height: 40px;
+            .body_schedule_text{
+              width: 64px;
+              height: 22px;
+              font-weight: 400;
+              font-size: 16px;
+              color: #FFFFFF;
+              line-height: 22px;
+              text-align: left;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>