Merge branch 'dev0124' into dev0515

# Conflicts:
#	src/router/index.js

src/api/growth/index.js

@@ -0,0 +1,5 @@
+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}`);

src/components/UserCenter/menu.vue

@@ -261,8 +261,11 @@
             <!-- <i class="el-icon-menu"></i> -->
             <span slot="title" class="textl">我的考试</span>
           </el-menu-item>
-          <!---去掉->
+          <el-menu-item index="/uc/study/growth">
-         <!-- <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/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

@@ -47,7 +47,7 @@ export const constantRoutes = [{
 //   name: 'gratefulIndex',
 //   meta: { title: '感恩教师首页', icon: 'dashboard', noCache: true, affix: false },
 // },
-  {
+{
   path: '/grateful',
   component: Grateful,
   redirect: '/grateful/index',
@@ -57,60 +57,74 @@ export const constantRoutes = [{
       hidden: true,
       component: (resolve) => require(['@/views/grateful/GratefulHomePage'], resolve),
       name: 'GratefulHomePage',
-        meta: {title: '感恩教师首页', icon: 'dashboard', noCache: true, affix: true, hidden: false}
+      meta: { title: '感恩教师首页', icon: 'dashboard', noCache: true, affix: true, hidden:false }
     },
     {
       path: 'teacherEmpowerment',
       hidden: true,
       component: (resolve) => require(['@/views/grateful/TeacherEmpowerment'], resolve),
       name: 'TeacherEmpowerment',
-        meta: {title: '教师赋能', icon: 'dashboard', noCache: true, affix: true, hidden: true}
+      meta: { title: '教师赋能', icon: 'dashboard', noCache: true, affix: true, hidden:true }
     },
     {
       path: 'toolDown',
       hidden: true,
       component: (resolve) => require(['@/views/grateful/ToolDown'], resolve),
       name: 'ToolDown',
-        meta: {title: '工具下载', icon: 'dashboard', noCache: true, affix: true, hidden: true}
+      meta: { title: '工具下载', icon: 'dashboard', noCache: true, affix: true, hidden:true }
     },
     {
       path: 'gratefulNotice',
       hidden: true,
       component: (resolve) => require(['@/views/grateful/GratefulNotice'], resolve),
       name: 'GratefulNotice',
-        meta: {title: '通知列表', icon: 'dashboard', noCache: true, affix: true, hidden: true}
+      meta: { title: '通知列表', icon: 'dashboard', noCache: true, affix: true, hidden:true }
     },
     {
       path: 'noticeDetail',
       hidden: true,
       component: (resolve) => require(['@/views/grateful/NoticeDetail'], resolve),
       name: 'NoticeDetail',
-        meta: {title: '通知详情', icon: 'dashboard', noCache: true, affix: true, hidden: true}
+      meta: { title: '通知详情', icon: 'dashboard', noCache: true, affix: true, hidden:true }
     },
     {
       path: 'teacherOpinion',
       hidden: true,
       component: (resolve) => require(['@/views/grateful/TeacherOpinion'], resolve),
       name: 'TeacherOpinion',
-        meta: {title: '师资大全', icon: 'dashboard', noCache: true, affix: true, hidden: true}
+      meta: { title: '师资大全', icon: 'dashboard', noCache: true, affix: true, hidden:true }
     },
   ]
-  },
+},
-  {
+{
   path: '/forward',
   hidden: true,
   component: (resolve) => require(['@/views/Forward'], resolve),
   name: 'forward',
-    meta: {title: '详细信息', icon: 'dashboard', noCache: true, affix: false},
+  meta: { title: '详细信息', icon: 'dashboard', noCache: true, affix: false },
-  },
+},
-  {
+{
   path: '/course',
   hidden: true,
   component: (resolve) => require(['@/views/portal/course/Index'], resolve),
   name: 'course',
-    meta: {title: '课程', keepAlive: true, icon: 'dashboard', noCache: true, affix: false},
+  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: '/courseRecommended',
     hidden: true,
     component: (resolve) => require(['@/views/portal/course/CourseRecommended'], resolve),

src/views/study/Growth.vue

@@ -0,0 +1,624 @@
+<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="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">
+                  <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="centerDialogVisible= true">
+            <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">
+          <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>{{detailData.currentTaskName}}</div>
+              </div>
+            </div>
+            <div class="body_schedule_two">
+              <div class="body_schedule_pro">
+                <span class="pro_text">总进度</span>
+                <el-progress :stroke-width="12" :percentage="detailData.overallCompletionRate"></el-progress>
+              </div>
+              <div class="body_schedule_btn" @click="startLearn">
+                <span class="body_schedule_text">{{detailData.overallCompletionRate==0?'开始学习':detailData.overallCompletionRate==100?'回顾':'继续学习'}}</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>
+    <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: true,
+      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
+        })
+      }
+    })
+  },
+  watch:{
+    
+  },
+  methods: {
+    startLearn(){
+      this.$router.push({
+        path: '/growthpath',
+        query: {growId:this.detailData.growId,name: this.detailData.growName}
+      })
+    },
+  },
+  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;
+        height: 100px;
+        background: #F5F6F7;
+        border-radius: 10px;
+        padding: 22px 25px 22px 16px;
+        .body_explain_text{
+          max-width: 1219px;
+          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;
+            }
+          }
+          .body_schedule_btn{
+            width: 140px;
+            cursor: pointer;
+            height: 40px;
+            margin-left: 44px;
+            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>

src/views/study/GrowthPath.vue

@@ -0,0 +1,949 @@
+<template>
+  <div class="growth">
+    <div style="background-color: #0078fc;">
+      <portalHeader textColor="#fff" class="qa-nav" @emitInput="emitInput" @showClass="showClass"></portalHeader>
+    </div>
+    <div class="growth-content">
+      <div style=" background: #0078fc;height: 150px;width: 100%;position: absolute;top: 0;z-index:-9999;"></div>
+      <div class="pathdetails">
+        <div class="pdname">
+          {{$route.query.name}}路径图
+        </div>
+        <div class="detailinfo">
+          <div class="select">
+            <div class="select-radio" style="margin-left: 0;"><span style="background: #34CA2B;"></span> 必修</div>
+            <div class="select-radio"><span style="background: #FE9C4A;"></span>选修</div>
+            <!-- <div class="select-radio"><span style="background: #F2675D;"></span>已完成</div> -->
+          </div>
+          <div class="btn">
+            <el-button type="primary" @click="dialogTableVisible = true">全岗位路径图</el-button>
+            <!-- <el-button type="primary"  style="margin-left: 0;margin-top: 30px;">信息概览</el-button> -->
+          </div>
+          <div class="linehig">
+            <el-switch
+              v-model="switchFalse"
+              active-text="高亮显示未完成">
+            </el-switch>
+          </div>
+          <div class="detailContent">
+            <div :class="dataList.length <= 7 ? 'detailbgc' : 'detailAllbgc'">
+              <div v-for="item, index in dataList" :key="index">
+                <el-popover popper-class="pathdetails" placement="right-start" width="360" trigger="click"
+                  :visible-arrow="false">
+                  <div style="font-size: 14px;padding: 20px 20px 10px; ">
+                    <div style="font-size: 16px;font-weight: 600">{{ item.title }}</div>
+                    <div style="margin: 20px 0;">
+                      <el-tag hit :type="item.flag == 0 ? 'danger' : 'success'">{{ item.flag == 0 ? '选修' : '必修' }}</el-tag>
+                      <el-tag>{{item.type == 1 ? '在线' : item.type == 5 ?'考试' : '课程'}}</el-tag>
+                    </div>
+                    <div>
+                      <span style="color: #387DF7;">学习进度</span>
+                      <el-progress :percentage="item.currentRatio || 0"></el-progress>
+                    </div>
+                    <div style="margin: 20px 0;">课程讲师：{{item.teacherName}}</div>
+                    <div>课程简介：{{item.introduce}}</div>
+                    <el-button style="width: 100%;margin-top: 20px;" type="primary" @click="goStudy(item)">
+                      <div style="display: flex;justify-content: space-between;align-items: center;">
+                        <div></div>
+                        <span>去学习</span>
+                        <svg t="1706166377362" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="10521" width="24"
+                          height="24">
+                          <path
+                            d="M512 102.4a422.912 422.912 0 1 0 422.570667 423.936A422.570667 422.570667 0 0 0 512 102.4z m117.418667 446.805333L462.506667 716.8a34.133333 34.133333 0 0 1-48.469334-48.128l143.018667-143.018667-143.018667-143.018666a34.133333 34.133333 0 0 1 0-48.128 34.133333 34.133333 0 0 1 48.469334 0l166.912 166.912a34.133333 34.133333 0 0 1 0 49.152z"
+                            fill="#b4caf7" p-id="10522"></path>
+                        </svg>
+                      </div>
+                    </el-button>
+                  </div>
+                  <div slot="reference" class="address" :style="{
+                    backgroundColor: getColor(item.flag, 0),
+                    left: getPosition(item.name, index).left + 'px',
+                    top: getPosition(item.name, index).top + 'px'
+                  }">
+                    <div class="icon">
+                      <div class="icon-content" :style="{ background: getColor(item.flag, 1) }">
+                        {{ item.currentRatio || 0 }}%
+                      </div>
+                      <!-- <div v-else class="icon-content" style="background-color: #fff;">
+                        <svg style="width: 36px;height: 36px;" t="1706149497692" class="icon" viewBox="0 0 1024 1024"
+                          version="1.1" p-id="4648">
+                          <path
+                            d="M0 512C0 229.234759 229.234759 0 512 0s512 229.234759 512 512-229.234759 512-512 512S0 794.765241 0 512z m419.310345 194.630621a35.310345 35.310345 0 0 0 49.399172 1.271172l335.518897-311.931586a35.310345 35.310345 0 0 0-48.075035-51.729655l-309.124413 289.544827-145.125518-149.645241a35.310345 35.310345 0 1 0-50.688 49.169655l168.112552 173.320828z"
+                            fill="#F2675D" p-id="4649"></path>
+                        </svg>
+                      </div> -->
+                    </div>
+                  </div>
+                </el-popover>
+                <div :style="{
+                  left: (getPosition(item.name, index).left + 55) + 'px',
+                  top: getPosition(item.name, index).top + 'px'
+                }" class="iconTitle">{{ item.title }}</div>
+              </div>
+            </div>
+          </div>
+          <!-- <div class="footerBtn">
+            <el-button type="primary">1-7课</el-button>
+            <el-button>8-14课程</el-button>
+            <el-button type="primary" @click="switchInfo(5)">5</el-button>
+            <el-button type="primary" @click="switchInfo(7)">7</el-button>
+            <el-button type="primary" @click="switchInfo(14)">14</el-button>
+          </div> -->
+        </div>
+      </div>
+    </div>
+
+
+
+
+    <div class="u-class">
+      <el-dialog :visible.sync="showUClass" width="833px">
+        <div class="ClassBoxContent">
+          <img src="@/assets/images/u_class.png" alt="" class="img" />
+          <div class="ContentBox">
+            <div class="left">
+              <div class="title">U选小课堂</div>
+              <div class="jy">项目简介</div>
+              <div class="msg">
+                于22年首推，是一个面向全集团员工开放的职业通识类数字化培养项目，旨在帮助员工开阔眼界、加厚职业素养。在原有外部精选通用力课程基础上，2023年引入创新专区，以新鲜的话题、新颖的形式，带给全员丰富、有趣的学习体验。
+              </div>
+              <div class="bottom"></div>
+            </div>
+            <div class="right">
+              <div class="tyl" @click="tylClick">
+                <div class="tyl_title">
+                  <img src="@/assets/images/dc.png" alt="" class="tyl_title_img" />
+                  <span class="tyl_title_msg">通用力专区</span>
+                </div>
+                <div class="tyl_jy">加厚职业素养，轻学习、快成长！</div>
+                <div class="tyl_msg">
+                  内容涵盖：领导力、市场营销、职场技能、财务知识、法律常识、人力资源、经典国学、人文社科
+                </div>
+              </div>
+              <div class="cyl" @click="cylClick">
+                <div class="tyl_title">
+                  <img src="@/assets/images/cyl.png" alt="" class="tyl_title_img" />
+                  <span class="tyl_title_msg">创新力专区</span>
+                </div>
+                <div class="tyl_jy">激发创新潜力，拓视野、促思考！</div>
+                <div class="tyl_msg">
+                  内容涵盖：组合创新、单点破局、错位竞争、分形创新、第二曲线、数字化、元宇宙
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-dialog>
+    </div>
+    <el-dialog width="60%" :visible.sync="dialogTableVisible">
+      <span slot="title" class="dialog-header">
+        <div style="margin-right: 10px;">全岗位路径</div>
+        <div class="otherImg">
+          <img src="../../assets/images/growth/CurrentPath.png" alt="">
+          <span>当前路径</span>
+        </div>
+        <div class="otherImg">
+          <img src="../../assets/images/growth/OtherPath.png" alt="">
+          <span>其他路径</span>
+        </div>
+        <div class="otherImg">
+          <img src="../../assets/images/growth/NoPermissionPath.png" alt="">
+          <span>其他路径（无权限）</span>
+        </div>
+      </span>
+      <el-table :data="gridData" border :span-method="arraySpanMethod" style="width: 100%">
+        <el-table-column fixed align="center" property="name" width="120" label=""></el-table-column>
+        <el-table-column align="center" label="band1">
+          <template slot-scope="scope">
+            <span v-if="scope.row.marketStatus === 0"><img src="../../assets/images/growth/CurrentPath.png" alt=""></span>
+            <span v-else-if="scope.row.marketStatus === 1">
+              <img src="../../assets/images/growth/OtherPath.png" alt="">
+            </span>
+            <span v-else><img src="../../assets/images/growth/NoPermissionPath.png" alt=""></span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="band2">
+          <template slot-scope="scope">
+            <span v-if="scope.row.saleStatus === 0"><img src="../../assets/images/growth/CurrentPath.png" alt=""></span>
+            <span v-else-if="scope.row.saleStatus === 1">
+              <img src="../../assets/images/growth/OtherPath.png" alt="">
+            </span>
+            <span v-else><img src="../../assets/images/growth/NoPermissionPath.png" alt=""></span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="band3">
+          <template slot-scope="scope">
+            <span v-if="scope.row.productStatus === 0"><img src="../../assets/images/growth/CurrentPath.png"
+                alt=""></span>
+            <span v-else-if="scope.row.productStatus === 1">
+              <img src="../../assets/images/growth/OtherPath.png" alt="">
+            </span>
+            <span v-else><img src="../../assets/images/growth/NoPermissionPath.png" alt=""></span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="band4">
+          <template slot-scope="scope">
+            <span v-if="scope.row.FAEStatusL === 0"><img src="../../assets/images/growth/CurrentPath.png" alt=""></span>
+            <span v-else-if="scope.row.FAEStatusL === 1">
+              <img src="../../assets/images/growth/OtherPath.png" alt="">
+            </span>
+            <span v-else><img src="../../assets/images/growth/NoPermissionPath.png" alt=""></span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="band5">
+          <template slot-scope="scope">
+            <span v-if="scope.row.salesManagement === 0"><img src="../../assets/images/growth/CurrentPath.png"
+                alt=""></span>
+            <span v-else-if="scope.row.salesManagement === 1">
+              <img src="../../assets/images/growth/OtherPath.png" alt="">
+            </span>
+            <span v-else><img src="../../assets/images/growth/NoPermissionPath.png" alt=""></span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+    </el-dialog>
+    <el-drawer title="信息概况" :visible="drawer" size="40%">
+      <div style="padding:0 40px;">
+        <el-card class="box-card">
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="公告" name="first">用户管理</el-tab-pane>
+            <el-tab-pane label="共享文档" name="second">配置管理</el-tab-pane>
+          </el-tabs>
+        </el-card>
+
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import portalHeader from '@/components/PortalHeader.vue';
+import {taskList} from '@/api/growth';
+export default {
+  name: 'GrowthPath',
+  components: { portalHeader },
+  data() {
+    return {
+      switchFalse: false,
+      showUClass: false,
+      colorAttrValue: {
+        0: ['#FFD04B', "#FBA944"],
+        1: ["#b8e3b8", "#8ac84a"],
+        2: ['#FFD04B', '#FBA944']
+      },
+      iconAttrs: {
+        '路径图背景': {
+          positions: [
+            { left: 656, top: 594 },
+            { left: 3, top: 530 },
+            { left: 436, top: 360 },
+            { left: 904, top: 334 },
+            { left: 990, top: 56 },
+          ]
+        },
+        '路径图背景7': {
+          positions: [
+            { left: 656, top: 594 },
+            { left: 323, top: 560 },
+            { left: 118, top: 426 },
+            { left: 504, top: 360 },
+            { left: 904, top: 336 },
+            { left: 1200, top: 190 },
+            { left: 988, top: 56 },
+          ]
+        },
+        '路径图背景全': {
+          positions: [
+            { left: 500, top: 1440 },
+            { left: 270, top: 1380 },
+            { left: 0, top: 1225 },
+            { left: 215, top: 1088 },
+            { left: 606, top: 1000 },
+            { left: 920, top: 936 },
+            { left: 1106, top: 658 },
+            { left: 880, top: 580 },
+            { left: 520, top: 528 },
+            { left: 168, top: 476 },
+            { left: 140, top: 286 },
+            { left: 334, top: 140 },
+            { left: 592, top: 38 },
+            { left: 970, top: -30 },
+          ]
+        }
+      },
+      dataList: [],
+      dialogTableVisible: false,
+      gridData: [{
+        name: '市场企划岗',
+        marketStatus: 0,
+        saleStatus: 1,
+        productStatus: 2,
+        FAEStatusL: 0,
+        salesManagement: 1
+      }, {
+        name: '销售岗',
+        marketStatus: 1,
+        saleStatus: 2,
+        productStatus: 1,
+        FAEStatusL: 0,
+        salesManagement: 1
+      }, {
+        name: '产品企划岗',
+        marketStatus: 2,
+        saleStatus: 0,
+        productStatus: 0,
+        FAEStatusL: 0,
+        salesManagement: 1
+      }, {
+        name: 'FAE岗',
+        marketStatus: 0,
+        saleStatus: 1,
+        productStatus: 2,
+        FAEStatusL: 0,
+        salesManagement: 1
+      }, {
+        name: '销售管理岗位',
+        marketStatus: 1,
+        saleStatus: 2,
+        productStatus: 0,
+        FAEStatusL: 0,
+        salesManagement: 1
+      }],
+      drawer: false,
+      activeName: 'first',
+    };
+  },
+  mounted() {
+    taskList(this.$route.query.growId).then(res=>{
+      if(res.code == 200 ){
+        if(res.data.length <= 7){
+          this.dataList = res.data.map(item=>({
+            title:item.name,
+            ...item,
+            name: '路径图背景7',
+          }))
+        }else{
+          this.dataList = res.data.map(item=>({
+            title:item.name,
+            ...item,
+            name: '路径图背景全',
+          }))
+        }
+      }
+    })
+  },
+  methods: {
+    cylClick() {
+      window.open("https://u.boe.com/pc/course?keyword=创新力专区");
+    },
+    tylClick() {
+      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
+    },
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 1) {
+        return [1, 2];
+      } else if (columnIndex === 2) {
+        return [0, 0];
+      }
+    },
+    switchInfo(num) {
+      if (num === 5) {
+        this.dataList = [{
+          name: '路径图背景',
+          progress: '99',
+          title: '岗前培训+OJT辅导OJT辅导OJT辅导OJT辅导OJT辅导',
+          status: 0
+        }, {
+          name: '路径图背景',
+          progress: '10',
+          title: '岗前培JT辅导OJT辅导',
+          status: 1
+        },
+        {
+          name: '路径图背景',
+          progress: '10',
+          title: '岗前',
+          status: 2
+        },
+        {
+          name: '路径图背景',
+          progress: '10',
+          title: '岗位',
+          status: 0
+        },
+        {
+          name: '路径图背景',
+          progress: '10',
+          title: '岗前岗前',
+          status: 1
+        }]
+        return false
+      }
+      if (num === 7) {
+        this.dataList = [{
+          name: '路径图背景7',
+          progress: '99',
+          title: '特训营/校招GROW180/社招入职',
+          status: 0
+        }, {
+          name: '路径图背景7',
+          progress: '10',
+          title: '入模培训',
+          status: 2
+        },
+        {
+          name: '路径图背景7',
+          progress: '10',
+          title: '岗前培训+OJT辅导',
+          status: 1
+        },
+        {
+          name: '路径图背景7',
+          progress: '10',
+          title: 'BOE薪酬福利体系',
+          status: 0
+        },
+        {
+          name: '路径图背景7',
+          progress: '10',
+          title: 'PDCA循环工作法',
+          status: 1
+        },
+        {
+          name: '路径图背景7',
+          progress: '10',
+          title: '如何让沟通更有效率',
+          status: 2
+        },
+        {
+          name: '路径图背景7',
+          progress: '10',
+          title: '商务邮件撰写技巧',
+          status: 1
+        }]
+        return false
+      }
+      if (num === 14) {
+        this.dataList = [{
+          name: '路径图背景全',
+          progress: '99',
+          title: '特训营/校招GROW180/社招入职',
+          status: 0
+        }, {
+          name: '路径图背景全',
+          progress: '10',
+          title: '入模培训',
+          status: 2
+        },
+        {
+          name: '路径图背景全',
+          progress: '10',
+          title: '岗前培训+OJT辅导',
+          status: 1
+        },
+        {
+          name: '路径图背景全',
+          progress: '10',
+          title: 'BOE薪酬福利体系',
+          status: 0
+        },
+        {
+          name: '路径图背景全',
+          progress: '10',
+          title: 'PDCA循环工作法',
+          status: 1
+        },
+        {
+          name: '路径图背景全',
+          progress: '10',
+          title: '如何让沟通更有效率',
+          status: 2
+        },
+        {
+          name: '路径图背景全',
+          progress: '10',
+          title: '商务邮件撰写技巧',
+          status: 1
+        },
+        {
+          name: '路径图背景全',
+          progress: '10',
+          title: '商务邮件撰写技巧',
+          status: 1
+        }, {
+          name: '路径图背景全',
+          progress: '99',
+          title: '特训营/校招GROW180/社招入职',
+          status: 0
+        }, {
+          name: '路径图背景全',
+          progress: '99',
+          title: '特训营/校招GROW180/社招入职',
+          status: 2
+        }, {
+          name: '路径图背景全',
+          progress: '99',
+          title: '特训营/校招GROW180/社招入职',
+          status: 0
+        }, {
+          name: '路径图背景全',
+          progress: '99',
+          title: '特训营/校招GROW180/社招入职',
+          status: 1
+        }, {
+          name: '路径图背景全',
+          progress: '99',
+          title: '特训营/校招',
+          status: 2
+        }, {
+          name: '路径图背景全',
+          progress: '99',
+          title: '特训营/校招',
+          status: 0
+        }]
+      }
+    },
+    showClass(flag) {
+      if (flag) {
+        this.showUClass = flag;
+      }
+    },
+    emitInput(val) {
+      this.queryKeyWord = val;
+      this.isSeach = true;
+      this.search();
+    },
+    getColor(status, index) {
+      return this.colorAttrValue[status][index]
+    },
+    getPosition(name, index) {
+      return this.iconAttrs[name].positions[index]
+    },
+    goStudy(item) {
+      if(item.type == 1){
+        console.log(item,'在线')
+        this.$router.push("/course/studyindex?id=" + item.targetId);
+      }else if (item.type == 5) {
+        console.log(item,'考试')
+        this.$router.push("exam/test?id=" + item.targetId);
+      }else{
+        console.log(item,'其他')
+      }
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #E8E8E8;
+  padding-bottom: 20px;
+
+  .dialog-header {
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    color: #333333;
+
+    .otherImg {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: 40px;
+
+      img {
+        width: 27px;
+        height: 24px;
+        margin-right: 6px;
+      }
+    }
+  }
+}
+
+
+
+.address {
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+
+  &:before {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    width: 50px;
+    height: 50px;
+    clip: rect(26px 100px 50px 26px);
+    background: inherit;
+    transform: rotate(45deg);
+  }
+
+  .icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 40px;
+    height: 40px;
+    background-color: #fff;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+
+    .icon-content {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      font-size: 12px;
+      color: #fff;
+      text-align: center;
+      transform: translate(-50%, -50%);
+      width: 36px;
+      height: 36px;
+      line-height: 36px;
+      // background-color: #8bc94b;
+      border-radius: 50%;
+    }
+  }
+
+}
+
+.iconTitle {
+  position: absolute;
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px;
+  color: #ffffff;
+  background: linear-gradient(301deg, #0071FF 0%, #8FC1FF 99%, #3D73ED 100%);
+  border-radius: 80px 80px 80px 8px;
+  padding: 0 20px;
+  white-space: nowrap;
+}
+
+
+.growth-content {
+  position: relative;
+  height: 100vh;
+
+  .pathdetails {
+    padding: 30px;
+    display: flex;
+    flex-direction: column;
+
+    .pdname {
+      font-size: 20px;
+      font-weight: 800;
+      color: #ffffff;
+      margin-top: 17px;
+    }
+
+    .detailinfo {
+      position: relative;
+      width: 100%;
+      margin-top: 30px;
+      background: #ffffff;
+      border-radius: 8px;
+      padding: 23px 25px;
+      min-width: 1380px;
+
+      .btn {
+        position: absolute;
+        left: 30px;
+        display: flex;
+        flex-direction: column;
+      }
+      .linehig{
+        position: absolute;
+        top: 30px;
+        right: 30px;
+      }
+      .select {
+        position: absolute;
+        top: 30px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .select-radio {
+          margin-left: 20px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 14px;
+          color: #333333;
+
+          span {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border-radius: 4px;
+            margin-right: 9px;
+          }
+        }
+      }
+
+      .detailContent {
+        width: 100%;
+        margin: 80px 0 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .detailbgc {
+          width: 1380px;
+          height: 699px;
+          min-width: 1380px;
+          position: relative;
+          background-image: url('../../assets/images/growth/firstRoadmap.png');
+          background-repeat: no-repeat;
+
+          &::before {
+            content: '';
+            position: absolute;
+            bottom: -4px;
+            left: 737px;
+            background-image: url('../../assets/images/growth/begin.png');
+            background-repeat: no-repeat;
+            width: 190px;
+            height: 55px;
+            z-index: 1000;
+          }
+        }
+
+        .detailAllbgc {
+          width: 1380px;
+          height: 1590px;
+          min-width: 1380px;
+          position: relative;
+          background-image: url('../../assets/images/growth/roadmap.png');
+          background-repeat: no-repeat;
+
+          &::before {
+            content: '';
+            position: absolute;
+            bottom: 10px;
+            left: 750px;
+            background-image: url('../../assets/images/growth/begin.png');
+            background-repeat: no-repeat;
+            width: 190px;
+            height: 55px;
+            z-index: 1000;
+          }
+        }
+      }
+
+      .footerBtn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .el-button {
+          width: 100px;
+        }
+      }
+    }
+  }
+}
+
+
+
+
+.u-class {
+  ::v-deep .el-dialog {
+    border-radius: 15px;
+
+    .el-dialog__headerbtn .el-dialog__close {
+      color: white;
+      position: absolute;
+      z-index: 99;
+      right: 15px;
+    }
+  }
+
+  ::v-deep .el-dialog__body {
+    padding: 0px;
+  }
+
+  .ClassBoxContent {
+    width: 100%;
+    height: 456px;
+    // background: red;
+    border-radius: 15px;
+
+    .ContentBox {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      z-index: 9;
+      display: flex;
+
+      .left,
+      .right {
+        height: calc(100% - 30px);
+      }
+
+      .left {
+        padding-left: 30px;
+        width: 48%;
+
+        .title {
+          width: 200px;
+          height: 59px;
+          line-height: 59px;
+          text-align: center;
+          margin-left: -8px;
+          font-size: 38px;
+          color: white;
+          margin-top: 42.97px;
+          padding-top: 5px;
+          text-shadow: 0 6px 3px rgba(96, 85, 243, 0.4);
+        }
+
+        .jy {
+          color: white;
+          font-size: 20px;
+          margin-top: 87.53px;
+          font-weight: 400;
+        }
+
+        .msg {
+          margin-top: 5px;
+          color: rgba(255, 255, 255, 0.85);
+          width: 326px;
+          text-align: justify;
+          line-height: 20px;
+        }
+
+        .bottom {
+          width: 100px;
+          height: 1px;
+          background: rgba(255, 255, 255, 0.85);
+          margin-top: 40px;
+        }
+      }
+
+      .right {
+        // padding-left: 10px;
+        width: 50%;
+
+        .tyl {
+          cursor: pointer;
+          width: calc(100% - 20px);
+          background: rgba(255, 255, 255, 0.95);
+          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+          border-radius: 4px;
+          height: 160px;
+          margin-top: 83px;
+
+          .tyl_title {
+            width: 100%;
+            padding-left: 20px;
+            padding-top: 20px;
+
+            .tyl_title_img {
+              width: 18px;
+              height: 18px;
+            }
+
+            .tyl_title_msg {
+              font-size: 20px;
+              margin-left: 10px;
+              color: #333333;
+              font-weight: 600;
+            }
+          }
+
+          .tyl_jy {
+            margin-top: 6.5px;
+            font-size: 14px;
+            font-weight: 600;
+            padding-left: 20px;
+            color: #333333;
+          }
+
+          .tyl_msg {
+            width: 350.36px;
+            margin-top: 13px;
+            margin-left: 20px;
+            font-size: 14px;
+            color: #666666;
+            font-weight: 400;
+            letter-spacing: 0;
+            text-align: justify;
+          }
+        }
+
+        .tyl:hover {
+          border: 0.96px solid rgba(140, 105, 242, 1);
+          box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.3);
+        }
+
+        .cyl {
+          cursor: pointer;
+          width: calc(100% - 20px);
+          background: rgba(255, 255, 255, 0.95);
+          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+          border-radius: 4px;
+          height: 160px;
+          margin-top: 10px;
+
+          .tyl_title {
+            width: 100%;
+            padding-left: 20px;
+            padding-top: 20px;
+
+            .tyl_title_img {
+              width: 18px;
+              height: 18px;
+            }
+
+            .tyl_title_msg {
+              font-size: 20px;
+              margin-left: 10px;
+              color: #333333;
+              font-weight: 600;
+            }
+          }
+
+          .tyl_jy {
+            margin-top: 6.5px;
+            font-size: 14px;
+            font-weight: 600;
+            padding-left: 20px;
+            color: #333333;
+          }
+
+          .tyl_msg {
+            width: 350.36px;
+            margin-top: 13px;
+            margin-left: 20px;
+            font-size: 14px;
+            color: #666666;
+            font-weight: 400;
+            letter-spacing: 0;
+            text-align: justify;
+          }
+        }
+
+        .cyl:hover {
+          border: 0.96px solid rgba(140, 105, 242, 1);
+          box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.24);
+        }
+      }
+    }
+
+    .img {
+      width: 835px;
+      margin-left: -1px;
+      margin-top: -1px;
+      position: absolute;
+      top: 0px;
+    }
+  }
+}
+</style>