diff --git a/src/views/study/Growth.vue b/src/views/study/Growth.vue
index 70f5c51e..af53f9bd 100644
--- a/src/views/study/Growth.vue
+++ b/src/views/study/Growth.vue
@@ -1,11 +1,404 @@
 <template>
-  <div>
-    成长路径
+  <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="address">
+          <div class="icon"></div>
+        </div>
+        <div class="pdname">
+          销售岗Band6路径图
+        </div>
+        <div class="detailinfo">
+          <div class="select">
+            <div>必修</div>
+            <div class="select-radio">选修</div>
+            <div class="select-radio">已完成</div>
+          </div>
+          <div class="detailContent">
+            <div class="detailbgc"></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>
   </div>
 </template>
+
 <script>
+import portalHeader from '@/components/PortalHeader.vue';
 export default {
-  name: 'Growth'
+  name: 'Growth',
+  components: { portalHeader },
+  computed: {
+  },
+  data() {
+    return {
+      showUClass: false,
+      remark: '111',
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    showClass(flag) {
+      if (flag) {
+        this.showUClass = flag;
+      }
+    },
+    emitInput(val) {
+      this.queryKeyWord = val;
+      this.isSeach = true;
+      this.search();
+    }
+  }
 };
 </script>
-<style scoped></style>
+
+<style scoped lang="scss">
+.address {
+  position: relative;
+  width: 50px;
+  height: 50px;
+  background-color: #b8e3b8;
+  border-radius: 50%;
+
+  &:before {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    width: 50px;
+    height: 50px;
+    clip: rect(26px 100px 50px 26px);
+    background-color: #b8e3b8;
+    transform: rotate(45deg);
+  }
+
+  .icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 40px;
+    height: 40px;
+    background-color: #fff;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+
+    &:before {
+      content: "99%";
+      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%;
+    }
+  }
+}
+
+
+.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-left: 45px;
+      padding-right: 45px;
+      padding-top: 23px;
+
+      .select {
+        position: absolute;
+        top: 30px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .select-radio {
+          margin-left: 20px;
+        }
+      }
+
+      .detailContent {
+        width: 100%;
+        margin-top: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .detailbgc {
+          width: 1232px;
+          height: 1011px;
+          min-width: 1232px;
+          position: relative;
+        }
+      }
+    }
+  }
+}
+
+
+
+
+.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>