diff --git a/src/assets/images/growth/close.png b/src/assets/images/growth/close.png
new file mode 100644
index 00000000..81900ace
Binary files /dev/null and b/src/assets/images/growth/close.png differ
diff --git a/src/assets/images/growth/fileBack.png b/src/assets/images/growth/fileBack.png
new file mode 100644
index 00000000..c3dcf386
Binary files /dev/null and b/src/assets/images/growth/fileBack.png differ
diff --git a/src/assets/images/growth/growthLeft.png b/src/assets/images/growth/growthLeft.png
new file mode 100644
index 00000000..8f145d45
Binary files /dev/null and b/src/assets/images/growth/growthLeft.png differ
diff --git a/src/assets/images/growth/growthRight.png b/src/assets/images/growth/growthRight.png
new file mode 100644
index 00000000..f83a18a5
Binary files /dev/null and b/src/assets/images/growth/growthRight.png differ
diff --git a/src/assets/images/growth/growthTime.png b/src/assets/images/growth/growthTime.png
new file mode 100644
index 00000000..368168ff
Binary files /dev/null and b/src/assets/images/growth/growthTime.png differ
diff --git a/src/assets/images/growth/mark.png b/src/assets/images/growth/mark.png
new file mode 100644
index 00000000..96ae4349
Binary files /dev/null and b/src/assets/images/growth/mark.png differ
diff --git a/src/assets/images/growth/ppt.png b/src/assets/images/growth/ppt.png
new file mode 100644
index 00000000..b8d918e9
Binary files /dev/null and b/src/assets/images/growth/ppt.png differ
diff --git a/src/components/UserCenter/menu.vue b/src/components/UserCenter/menu.vue
index 7c678ff2..a2d6fa5c 100644
--- a/src/components/UserCenter/menu.vue
+++ b/src/components/UserCenter/menu.vue
@@ -258,7 +258,7 @@
             <!-- <i class="el-icon-menu"></i> -->
             <span slot="title" class="textl">我的考试</span>
           </el-menu-item>
-          <el-menu-item index="/growth">
+          <el-menu-item index="/uc/study/growth">
             <span slot="title" class="textl">成长路径</span>
           </el-menu-item>
           <!-- 去掉
diff --git a/src/router/index.js b/src/router/index.js
index 576565a6..6f7163be 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -110,11 +110,18 @@ 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: '/growth',
+  path: '/growthpath',
   hidden: true,
-  component: (resolve) => require(['@/views/study/Growth'], resolve),
-  name: 'growth',
+  component: (resolve) => require(['@/views/study/GrowthPath'], resolve),
+  name: 'growthpath',
   meta: { title: '成长路径图', keepAlive: true, icon: 'dashboard', noCache: true, affix: false },
 },
 {
diff --git a/src/views/study/Growth.vue b/src/views/study/Growth.vue
index f0d988aa..94b72e36 100644
--- a/src/views/study/Growth.vue
+++ b/src/views/study/Growth.vue
@@ -1,938 +1,438 @@
 <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">
-          销售岗Band6路径图
+    <div class="growth_heads">
+      <div class="growth_left">
+        <div class="left_text">我的成长路径</div>
+        <div class="growth_i">
+          <div class="growth_mark">?</div>
         </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="growth_right">
+        <div class="right_text">什么是成长路径</div>
+        <div class="growth_img">
+          <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">产品企划岗Band6～7成长路径</div>
+        <div class="head_right">
+          <div class="head_right_one">京东方集团股份有限公司</div>
+          <div class="head_right_two">
+            <span class="head_right_sta">学习状态:</span>
+            <span class="head_right_status"> 进行中</span>
           </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>
+      <div class="growth_body_shared" @click="downBody = true">
+        <img class="shared_img" src="../../assets/images/growth/growthRight.png" alt="">
+        <span class="shared_text">共享文档</span>
+      </div>
+      <div class="growth_body_down" v-show="downBody">
+        <div class="down_head">
+          <span class="down_head_text">共享文档</span>
+          <div class="down_close" @click="handleClose">
+            <img class="down_close_img" src="../../assets/images/growth/close.png" alt="">
           </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>必修</el-tag>
-                      <el-tag type="success">在线</el-tag>
-                    </div>
-                    <div>
-                      <span style="color: #387DF7;">学习进度</span>
-                      <el-progress :percentage="50"></el-progress>
-                    </div>
-                    <div style="margin: 20px 0;">课程讲师：启用家</div>
-                    <div>课程简介：无</div>
-                    <el-button style="width: 100%;margin-top: 20px;" type="primary">
-                      <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.status, 0),
-                    left: getPosition(item.name, index).left + 'px',
-                    top: getPosition(item.name, index).top + 'px'
-                  }">
-                    <div class="icon">
-                      <div v-if="item.status" class="icon-content" :style="{ background: getColor(item.status, 1) }">
-                        {{ item.progress }}%
-                      </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 class="down_body">
+          <div class="down_body_left">
+            <img class="left_img" src="../../assets/images/growth/ppt.png" alt="">
+            <span class="left_text">人工智能启蒙讲解讲义.pptx</span>
+          </div>
+          <div class="down_btn">
+            <span class="down_btn_text">下载</span>
+          </div>
+        </div>
+      </div>
+      <div 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">
+            请各位选课的同学提前阅读本课程的 “教学大纲与计划”、“课程考核要求”与“学习要求”，并按给定的中学化学教学主题分好小组每位同学在网上学习的活动轨迹都会自动被系统记录將作为大家个人线上参与的评价依据;请大家务必
+          </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>10 门</div>
+              <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 class="body_schedule_two">
+            <div class="body_schedule_pro">
+              <span class="pro_text">总进度</span>
+              <el-progress :stroke-width="12" :percentage="50"></el-progress>
+            </div>
+            <div class="body_schedule_btn">
+              <span class="body_schedule_text">开始学习</span>
+            </div>
           </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';
 export default {
   name: 'Growth',
-  components: { portalHeader },
   data() {
     return {
-      showUClass: false,
-      colorAttrValue: {
-        0: ['#f1c9c3', "#e27166"],
-        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: [{
-        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
-      }],
-      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'
-
-    };
+      downBody: false,
+    }
   },
   mounted() {
   },
   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]
+    handleClose() {
+      this.downBody = false
     }
   }
 };
 </script>
 
 <style scoped lang="scss">
-::v-deep .el-dialog__header {
-  border-bottom: 1px solid #E8E8E8;
-  padding-bottom: 20px;
-
-  .dialog-header {
+.growth{
+  .growth_heads{
     display: flex;
-    align-items: center;
-    font-size: 18px;
-    color: #333333;
-
-    .otherImg {
+    justify-content: space-between;
+    margin: 43px 86px 37px 81px;
+    .growth_left{
       display: flex;
-      align-items: center;
       justify-content: center;
-      margin-left: 40px;
-
-      img {
-        width: 27px;
-        height: 24px;
-        margin-right: 6px;
+      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{
+        width: 20px;
+        height: 20px;
+        margin-left: 13px;
+        .img{
+          vertical-align: middle;
+        }
       }
     }
   }
-}
-
-
-
-.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 {
+  .growth_body{
+    max-width: 1340px;
+    height: 574px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    border: 1px solid #E4EDFE;
+    margin: 0 81px 52px 76px;
+    position: relative;
+    .growth_body_shared{
+      cursor: pointer;
       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;
+      right: 46px;
+      top: 107px;
+      .shared_img{
+        width: 21px;
+        height: 18px;
       }
-
-      .select {
-        position: absolute;
-        top: 30px;
-        width: 100%;
+      .shared_text{
+        width: 64px;
+        height: 22px;
+        font-weight: 600;
+        font-size: 16px;
+        color: #409EFF;
+        line-height: 22px;
+        text-align: left;
+        margin-left: 9px;
+      }
+    }
+    .growth_body_down{
+      background-image: url(../../assets/images/growth/fileBack.png);
+      background-repeat: no-repeat;
+      background-size:100%;
+      width: 487px;
+      max-height: 452px;
+      position: absolute;
+      right: 23px;
+      top: 116px;
+      .down_head{
+        margin-top: 57px;
+        margin-bottom: 34px;
+        text-align: center;
+        position: relative;
+        .down_head_text{
+          width: 96px;
+          height: 28px;
+          font-weight: 600;
+          font-size: 24px;
+          color: #387DF7;
+          line-height: 28px;
+          text-align: left;
+        }
+        .down_close{
+          position: absolute;
+          cursor: pointer;
+          right: 37px;
+          top: -18px;
+          .down_close_img{
+            width: 26px;
+            height: 26px;
+          }
+        }
+      }
+      .down_body{
         display: flex;
-        align-items: center;
-        justify-content: center;
+        justify-content: space-between;
+        margin: 64px 72px 72px 63px;
+        .down_body_left{
+          .left_img{
+            width: 20px;
+            height: 20px;
+          }
+          .left_text{
+            margin-left: 18px;
+            width: 210px;
+            height: 20px;
+            font-weight: 500;
+            font-size: 14px;
+            color: #677D86;
+            line-height: 20px;
+          }
+        }
+        .down_btn{
+          cursor: pointer;
+          width: 70px;
+          height: 28px;
+          border-radius: 4px;
+          border: 1px solid #387DF7;
+          text-align: center;
+          .down_btn_text{
+            width: 28px;
+            height: 20px;
+            font-weight: 400;
+            font-size: 14px;
+            color: #387DF7;
+            line-height: 20px;
+          }
+        }
+      }
+    }
+    .body_head{
+      max-width: 1340px;
+      height: 88px;
+      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{
 
-        .select-radio {
-          margin-left: 20px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
+        }
+        .head_right_two{
+          
+          .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;
-
-          span {
-            display: inline-block;
-            width: 16px;
-            height: 16px;
+          line-height: 28px;
+          text-align: left;
+        }
+      }
+    }
+    .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;
-            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;
+            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;
             }
           }
-
-          .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>
diff --git a/src/views/study/GrowthPath.vue b/src/views/study/GrowthPath.vue
new file mode 100644
index 00000000..1182d6de
--- /dev/null
+++ b/src/views/study/GrowthPath.vue
@@ -0,0 +1,938 @@
+<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">
+          销售岗Band6路径图
+        </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="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>必修</el-tag>
+                      <el-tag type="success">在线</el-tag>
+                    </div>
+                    <div>
+                      <span style="color: #387DF7;">学习进度</span>
+                      <el-progress :percentage="50"></el-progress>
+                    </div>
+                    <div style="margin: 20px 0;">课程讲师：启用家</div>
+                    <div>课程简介：无</div>
+                    <el-button style="width: 100%;margin-top: 20px;" type="primary">
+                      <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.status, 0),
+                    left: getPosition(item.name, index).left + 'px',
+                    top: getPosition(item.name, index).top + 'px'
+                  }">
+                    <div class="icon">
+                      <div v-if="item.status" class="icon-content" :style="{ background: getColor(item.status, 1) }">
+                        {{ item.progress }}%
+                      </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';
+export default {
+  name: 'GrowthPath',
+  components: { portalHeader },
+  data() {
+    return {
+      showUClass: false,
+      colorAttrValue: {
+        0: ['#f1c9c3', "#e27166"],
+        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: [{
+        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
+      }],
+      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() {
+  },
+  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]
+    }
+  }
+};
+</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;
+      }
+
+      .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>