From 6b53e3a3a851048a9c9ee14a268062e3d02e02a7 Mon Sep 17 00:00:00 2001
From: "mx00085@163.com" <mx00085@163.com>
Date: Mon, 13 Mar 2023 16:08:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=96=E5=B1=82header=E6=89=80?=
 =?UTF-8?q?=E6=9C=89=E9=A1=B5=E9=9D=A2=E6=96=B0=E5=A2=9EU=E9=80=89?=
 =?UTF-8?q?=E5=B0=8F=E8=AF=BE=E5=A0=82=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/TopNav/Index.vue |   6 +
 src/views/portal/article/Index.vue     | 228 +++++++++++++++++++++++-
 src/views/portal/case/Index.vue        | 229 ++++++++++++++++++++++++-
 src/views/portal/course/Index.vue      | 229 ++++++++++++++++++++++++-
 src/views/portal/follow/index.vue      | 228 +++++++++++++++++++++++-
 src/views/portal/qa/Index.vue          | 228 +++++++++++++++++++++++-
 6 files changed, 1143 insertions(+), 5 deletions(-)

diff --git a/src/layout/components/TopNav/Index.vue b/src/layout/components/TopNav/Index.vue
index bfd28367..2a2519f5 100644
--- a/src/layout/components/TopNav/Index.vue
+++ b/src/layout/components/TopNav/Index.vue
@@ -235,6 +235,12 @@ export default {
     this.$store.dispatch('refrashMsg');
   },
   methods: {
+    tylClick() {
+      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
+    },
+    cylClick() {
+      window.open("https://u.boe.com/pc/course?keyword=创新力专区");
+    },
     setCurIdentity(iden){
         this.$store.dispatch('SetCurIdentity',iden);
       },
diff --git a/src/views/portal/article/Index.vue b/src/views/portal/article/Index.vue
index 6c2ee664..fef5e6ae 100644
--- a/src/views/portal/article/Index.vue
+++ b/src/views/portal/article/Index.vue
@@ -1,7 +1,7 @@
 2<template>
   <div id="article-list-content" class="article-list-content">
     <div class="article-banner">
-      <portal-header current="article" textColor="#ffffff" @emitInput="emitInput"></portal-header>
+      <portal-header current="article" textColor="#ffffff" @emitInput="emitInput"  @showClass="showClass"></portal-header>
     </div>
     <!--内容区域-->
     <div style="padding-top:30px" class="">
@@ -120,6 +120,53 @@
     </el-dialog>
     <portal-footer></portal-footer>
     <portalFloatTools></portalFloatTools>
+    <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>
 
@@ -153,6 +200,7 @@ export default {
   },
   data() {
     return {
+      showUClass: false,
       ankIds:[],
       resonimg:{},
        moreState:1,// 1 加载更多 2 加载中 3无数据
@@ -207,6 +255,17 @@ export default {
     window.removeEventListener("scroll",this.handleScroll);
   },
   methods: {
+    tylClick() {
+      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
+    },
+    cylClick() {
+      window.open("https://u.boe.com/pc/course?keyword=创新力专区");
+    },
+    showClass(flag) {
+      if (flag) {
+        this.showUClass = flag;
+      }
+    },
     banJump() {
       if(this.resonimg.JumpUrl) {
         window.open(this.resonimg.JumpUrl);
@@ -422,6 +481,173 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.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: 150px;
+          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(137, 104, 242, 0.19);
+        }
+        .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(137, 104, 242, 0.19);
+        }
+      }
+    }
+    .img {
+      width: 835px;
+      margin-left: -1px;
+      margin-top: -1px;
+      position: absolute;
+      top: 0px;
+    }
+  }
+}
 .orinfo-text{
   font-size: 13px;
   color: #666666;
diff --git a/src/views/portal/case/Index.vue b/src/views/portal/case/Index.vue
index b1ec78f7..77f7c40c 100644
--- a/src/views/portal/case/Index.vue
+++ b/src/views/portal/case/Index.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="case-list-content">
     <div style="margin-bottom:30px" class="case-banner">
-      <portal-header current="case" textColor="#fff" @emitInput="emitInput"></portal-header>
+      <portal-header current="case" textColor="#fff" @emitInput="emitInput" @showClass="showClass"></portal-header>
     </div>
     <div class="xcontent2">
       <div class="xcontent2-main" style="margin-right: 30px;">
@@ -215,6 +215,54 @@
     </div>
     <portal-footer></portal-footer>
     <portalFloatTools></portalFloatTools>
+     <!-- U课堂弹窗 -->
+     <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>
 
@@ -245,6 +293,7 @@ export default {
   },
   data() {
     return {
+      showUClass: false,
       fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
       resonimg:{},
       domain: [],//组织领域
@@ -380,6 +429,17 @@ export default {
     window.removeEventListener("scroll", this.handleScroll);
   },
   methods: {
+    tylClick() {
+      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
+    },
+    cylClick() {
+      window.open("https://u.boe.com/pc/course?keyword=创新力专区");
+    },
+    showClass(flag) {
+      if (flag) {
+        this.showUClass = flag;
+      }
+    },
     saveLocalFilters(){
         let typeCodeList=[];
         this.tagList.forEach(item=>{
@@ -881,6 +941,173 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.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: 150px;
+          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(137, 104, 242, 0.19);
+        }
+        .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(137, 104, 242, 0.19);
+        }
+      }
+    }
+    .img {
+      width: 835px;
+      margin-left: -1px;
+      margin-top: -1px;
+      position: absolute;
+      top: 0px;
+    }
+  }
+}
 .fieldbox{
 
   display: flex;
diff --git a/src/views/portal/course/Index.vue b/src/views/portal/course/Index.vue
index 9a16264c..7e54612f 100644
--- a/src/views/portal/course/Index.vue
+++ b/src/views/portal/course/Index.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="couser-list-content" class="couser-list-content">
     <div class="course-banner">
-      <portal-header current="course" textColor="#fff" @emitInput="emitInput"></portal-header>
+      <portal-header current="course" textColor="#fff" @emitInput="emitInput"  @showClass="showClass"></portal-header>
     </div>
     <div style="padding-top:30px" class="">
       <div class="xcontent2">
@@ -298,6 +298,54 @@
     </div>
     <portal-footer></portal-footer>
     <portalFloatTools ref="floatTools"></portalFloatTools>
+       <!-- U课堂弹窗 -->
+       <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>
@@ -420,6 +468,7 @@ export default {
   },
   data() {
     return {
+      showUClass: false,
       ctypeList:[
         {type:1,id:20,name:'录播课',checked:false},
         {type:1,id:30,name:'线下课',checked:false},
@@ -548,6 +597,17 @@ export default {
     window.removeEventListener("scroll", this.handleScroll);
   },
   methods: {
+    tylClick() {
+      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
+    },
+    cylClick() {
+      window.open("https://u.boe.com/pc/course?keyword=创新力专区");
+    },
+    showClass(flag) {
+      if (flag) {
+        this.showUClass = flag;
+      }
+    },
     saveLocalFilters(){
         let typeCodeList=[];
         this.stagList.forEach(item=>{
@@ -1154,6 +1214,173 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.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: 150px;
+          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(137, 104, 242, 0.19);
+        }
+        .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(137, 104, 242, 0.19);
+        }
+      }
+    }
+    .img {
+      width: 835px;
+      margin-left: -1px;
+      margin-top: -1px;
+      position: absolute;
+      top: 0px;
+    }
+  }
+}
 .couresstartTime{
   line-height: 26px;
   height: 26px;
diff --git a/src/views/portal/follow/index.vue b/src/views/portal/follow/index.vue
index b418fe14..ace84148 100644
--- a/src/views/portal/follow/index.vue
+++ b/src/views/portal/follow/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="follow-page">
         <div class="follow-banner">
-          <portal-header current="follow" textColor="#fff"  :hideSearch="true" @emitInput="emitInput"></portal-header>
+          <portal-header current="follow" textColor="#fff"  :hideSearch="true" @emitInput="emitInput" @showClass="showClass"></portal-header>
         </div>
         <div>
             <div class="home-page-left">
@@ -168,6 +168,53 @@
                 <div style="height:200px"></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>
 
@@ -198,6 +245,7 @@
         components:{portalHeader,UcHeader,CaseList,CourseList,NoteList,PutList,AnswerList,ArticleList,FollowList,BookList},
         data(){
             return{
+                showUClass: false,
                 pageId:'',
                 loading:false,
                 loading1:false,
@@ -252,6 +300,17 @@
             this.loadOrgDomain();
         },
       methods:{
+        tylClick() {
+      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
+    },
+    cylClick() {
+      window.open("https://u.boe.com/pc/course?keyword=创新力专区");
+    },
+    showClass(flag) {
+      if (flag) {
+        this.showUClass = flag;
+      }
+    },
         emitInput(){
 
         },
@@ -695,6 +754,173 @@
   </script>
 
   <style lang="scss" scoped>
+  .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: 150px;
+          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(137, 104, 242, 0.19);
+        }
+        .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(137, 104, 242, 0.19);
+        }
+      }
+    }
+    .img {
+      width: 835px;
+      margin-left: -1px;
+      margin-top: -1px;
+      position: absolute;
+      top: 0px;
+    }
+  }
+}
     .div-pagination{
       text-align: center;
       margin-top:50px;
diff --git a/src/views/portal/qa/Index.vue b/src/views/portal/qa/Index.vue
index 8b5fa691..2fbaf880 100644
--- a/src/views/portal/qa/Index.vue
+++ b/src/views/portal/qa/Index.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="qa-list-content" class="qa-list-content">
     <div class="qa-banner">
-      <portal-header current="qa" textColor="#000000" class="qa-nav" @emitInput="emitInput"></portal-header>
+      <portal-header current="qa" textColor="#000000" class="qa-nav" @emitInput="emitInput" @showClass="showClass"></portal-header>
     </div>
 
     <div style="padding-top:30px" class="portal-content">
@@ -130,6 +130,53 @@
     </el-dialog>
     <portal-footer></portal-footer>
     <portalFloatTools @sure="getQaData(true)"></portalFloatTools>
+    <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>
 
@@ -168,6 +215,7 @@ export default {
   // },
   data() {
     return {
+      showUClass: false,
       ankIds:[],
       resonimg:{},
       fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
@@ -215,6 +263,17 @@ export default {
     window.removeEventListener("scroll",this.handleScroll);
   },
   methods: {
+      tylClick() {
+      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
+    },
+    cylClick() {
+      window.open("https://u.boe.com/pc/course?keyword=创新力专区");
+    },
+    showClass(flag) {
+      if (flag) {
+        this.showUClass = flag;
+      }
+    },
     banJump() {
       if(this.resonimg.JumpUrl) {
         window.open(this.resonimg.JumpUrl);
@@ -453,6 +512,173 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.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: 150px;
+          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(137, 104, 242, 0.19);
+        }
+        .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(137, 104, 242, 0.19);
+        }
+      }
+    }
+    .img {
+      width: 835px;
+      margin-left: -1px;
+      margin-top: -1px;
+      position: absolute;
+      top: 0px;
+    }
+  }
+}
 .four-line-ellipsis{
   display: -webkit-box;
   // white-space:pre-wrap;