From aff23fd427a447c39bd602123beb6987bc7cb966 Mon Sep 17 00:00:00 2001
From: "mx00085@163.com" <mx00085@163.com>
Date: Mon, 13 Mar 2023 14:47:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20U=E9=80=89=E5=B0=8F=E8=AF=BE=E5=A0=82?=
 =?UTF-8?q?=E5=86=85=E5=B1=82=E5=A4=B4=E9=83=A8=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/TopNav/Index.vue | 241 +++++++++++++++++++++++--
 1 file changed, 230 insertions(+), 11 deletions(-)

diff --git a/src/layout/components/TopNav/Index.vue b/src/layout/components/TopNav/Index.vue
index 74342038..bfd28367 100644
--- a/src/layout/components/TopNav/Index.vue
+++ b/src/layout/components/TopNav/Index.vue
@@ -19,7 +19,7 @@
                 <el-dropdown-item command='one'>BOE系列公开课</el-dropdown-item>
                 <el-dropdown-item command='two' divided>Grow180</el-dropdown-item>
                 <el-dropdown-item command='three' divided>管理者进阶</el-dropdown-item>
-                <el-dropdown-item command='four' divided>U选小课堂</el-dropdown-item>
+                <el-dropdown-item command='for' divided>U选小课堂</el-dropdown-item>
                 <el-dropdown-item command='five' divided>社招新员工</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
@@ -119,6 +119,53 @@
         </div>
     </el-dialog>
     <gonggao></gonggao>
+    <div class="u-class">
+      <el-dialog :visible.sync="uClassShow" 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>
 
@@ -133,6 +180,7 @@ export default {
   components:{InterestCollection,GuideBox,gonggao},
   data() {
     return {
+      uClassShow: false,
       isTiao:false,
       interestShow:false,
       checked:true,
@@ -201,16 +249,20 @@ export default {
       //   four: 'https://m.qingxuetang.com/x/?appId=qxtcorp306130',
       //   five: process.env.VUE_APP_BOE_WEB_URL+'/boe/new-employee/index.html'
       // };
-      let urlPre=window.location.protocol+'//'+window.location.host;
-      // process.env.VUE_APP_BOE_WEB_URL
-      let obj = {
-        one: urlPre+'/web/teacherLesson',
-        two: urlPre+'/grow180/login',
-        three: this.webBaseUrl + '/study/index?study=1',
-        four: 'https://m.qingxuetang.com/x/?appId=qxtcorp306130',
-        five: urlPre+'/boe/new-employee/index.html'
-      };
-      window.open(obj[val]);
+      if (val === "for") {
+        this.uClassShow = true;
+      } else {
+        let urlPre = window.location.protocol + "//" + window.location.host;
+        // process.env.VUE_APP_BOE_WEB_URL
+        let obj = {
+          one: urlPre + "/web/teacherLesson",
+          two: urlPre + "/grow180/login",
+          three: this.webBaseUrl + "/study/index?study=1",
+          // four: 'https://m.qingxuetang.com/x/?appId=qxtcorp306130',
+          five: urlPre + "/boe/new-employee/index.html",
+        };
+        window.open(obj[val]);
+      }
     },
     handleUcCommand(val){
       if(val == 'logout'){
@@ -258,6 +310,173 @@ export default {
 </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;
+    }
+  }
+}
 ::v-deep .el-dropdown-menu__item:not(.is-disabled):hover{
     background-color: #fff !important;
     color: #0059FF !important;