diff --git a/src/assets/images/cyl.png b/src/assets/images/cyl.png
new file mode 100644
index 00000000..9ca7f9ca
Binary files /dev/null and b/src/assets/images/cyl.png differ
diff --git a/src/assets/images/dc.png b/src/assets/images/dc.png
new file mode 100644
index 00000000..044f08a6
Binary files /dev/null and b/src/assets/images/dc.png differ
diff --git a/src/assets/images/u_class.png b/src/assets/images/u_class.png
new file mode 100644
index 00000000..f02969ff
Binary files /dev/null and b/src/assets/images/u_class.png differ
diff --git a/src/components/PortalHeader.vue b/src/components/PortalHeader.vue
index ca21b206..c515d23f 100644
--- a/src/components/PortalHeader.vue
+++ b/src/components/PortalHeader.vue
@@ -214,17 +214,21 @@ export default {
       // });
     },
     handleCommand(val) {
-      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',
-        six: urlPre+'/web/contributor/index'
-      };
-      window.open(obj[val]);
+      if (val === "four") {
+      this.$emit('showClass',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",
+          six: urlPre + "/web/contributor/index",
+        };
+        window.open(obj[val]);
+      }
     },
     handleUcCommand(val) {
       if (val == 'uc') {
diff --git a/src/layout/components/TopNav/Index.vue b/src/layout/components/TopNav/Index.vue
index 74342038..d9eeb20b 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,
@@ -187,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);
       },
@@ -201,16 +255,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 +316,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: 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;
+    }
+  }
+}
 ::v-deep .el-dropdown-menu__item:not(.is-disabled):hover{
     background-color: #fff !important;
     color: #0059FF !important;
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 0831b8de..1bbac5b8 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -1,62 +1,126 @@
 <template>
   <div>
     <div class="course-banner">
-      <portal-header current="index" textColor="#000000" style="z-index:999; position: relative;"></portal-header>
-       <div id="container" style="z-index:99;" v-if="resonimg.length ==  1">
-         <!-- 当轮播图等于一张时 -->
-        <swiper :options="swiperOptiontwo" >
-          <swiper-slide style="margin: 0 auto;" v-for="(item , idx ) in resonimg" :key="'a'+idx" class="swiper-slide games pointer" @click.native="banJump(item)">
-            <div class="bannbox" :style="{ 'background': `url(${fileBaseUrl + item.image}) no-repeat 100% / 100%`}">
-            </div>
-            <img class="banner-img" style=" margin: 0 auto;" :src=" fileBaseUrl + item.image" alt="">
+      <portal-header
+        current="index"
+        textColor="#000000"
+        style="z-index: 999; position: relative"
+        @showClass="showClass"
+      ></portal-header>
+      <div id="container" style="z-index: 99" v-if="resonimg.length == 1">
+        <!-- 当轮播图等于一张时 -->
+        <swiper :options="swiperOptiontwo">
+          <swiper-slide
+            style="margin: 0 auto"
+            v-for="(item, idx) in resonimg"
+            :key="'a' + idx"
+            class="swiper-slide games pointer"
+            @click.native="banJump(item)"
+          >
+            <div
+              class="bannbox"
+              :style="{
+                background: `url(${
+                  fileBaseUrl + item.image
+                }) no-repeat 100% / 100%`,
+              }"
+            ></div>
+            <img
+              class="banner-img"
+              style="margin: 0 auto"
+              :src="fileBaseUrl + item.image"
+              alt=""
+            />
           </swiper-slide>
         </swiper>
-        </div>
-      <div id="container" style="z-index:99;" v-else>
-        <swiper :options="swiperOption" ref="mySwiper" v-if="resonimg.length > 1">
-          <swiper-slide style="margin: 0 auto;" v-for="(item , idx ) in resonimg" :key="'b'+idx" class="swiper-slide games pointer" @click.native="banJump(item)">
-            <div class="bannbox" :style="{ 'background': `url(${fileBaseUrl + item.image}) no-repeat 100% / 100%`}">
-            </div>
-            <img class="banner-img" style=" margin: 0 auto;" :src=" fileBaseUrl + item.image" alt="">
+      </div>
+      <div id="container" style="z-index: 99" v-else>
+        <swiper
+          :options="swiperOption"
+          ref="mySwiper"
+          v-if="resonimg.length > 1"
+        >
+          <swiper-slide
+            style="margin: 0 auto"
+            v-for="(item, idx) in resonimg"
+            :key="'b' + idx"
+            class="swiper-slide games pointer"
+            @click.native="banJump(item)"
+          >
+            <div
+              class="bannbox"
+              :style="{
+                background: `url(${
+                  fileBaseUrl + item.image
+                }) no-repeat 100% / 100%`,
+              }"
+            ></div>
+            <img
+              class="banner-img"
+              style="margin: 0 auto"
+              :src="fileBaseUrl + item.image"
+              alt=""
+            />
           </swiper-slide>
-          <div class="swiper-pagination"  slot="pagination"></div>
+          <div class="swiper-pagination" slot="pagination"></div>
           <!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
         </swiper>
       </div>
 
       <div class="personal-panel">
         <div class="personal-img">
-          <author-img width="68px" height="68px" :avatar="userInfo.avatar" :aid="userInfo.aid" :noJump="false" :sex="userInfo.sex"></author-img>
+          <author-img
+            width="68px"
+            height="68px"
+            :avatar="userInfo.avatar"
+            :aid="userInfo.aid"
+            :noJump="false"
+            :sex="userInfo.sex"
+          ></author-img>
 
           <!-- {{ userInfo.avatar }} -->
         </div>
         <!-- <img style="width:68px;height:68px" src="/images/Avatarman.png" alt=""> -->
-        <p class="personal-name">{{userInfo.name}} {{userInfo.userNo}}
-          <span class="grade">{{userData.level}}</span>
+        <p class="personal-name">
+          {{ userInfo.name }} {{ userInfo.userNo }}
+          <span class="grade">{{ userData.level }}</span>
         </p>
 
-        <p class="personal-info">{{cutOrgNamePath(userInfo.departFullName)}}</p>
+        <p class="personal-info">
+          {{ cutOrgNamePath(userInfo.departFullName) }}
+        </p>
         <a href="uc/study/task">
-          <div  class="personal-box" style="margin-bottom:10px">
+          <div class="personal-box" style="margin-bottom: 10px">
             <span>学习任务</span>
-            <span v-if="studyTaskCount == 0" style="display:flex;">
+            <span v-if="studyTaskCount == 0" style="display: flex">
               暂无任务
-                <div class="tobe-icon">
-                 <img :src="`${webBaseUrl}/images/homeWu/Pending.png`" alt=""> </div>
+              <div class="tobe-icon">
+                <img :src="`${webBaseUrl}/images/homeWu/Pending.png`" alt="" />
+              </div>
             </span>
-            <span v-else style="display:flex;">{{studyTaskCount? studyTaskCount:0 }}个待学习
-               <div class="tobe-icon">
-                 <img :src="`${webBaseUrl}/images/homeWu/Pending.png`" alt=""> </div>
+            <span v-else style="display: flex"
+              >{{ studyTaskCount ? studyTaskCount : 0 }}个待学习
+              <div class="tobe-icon">
+                <img :src="`${webBaseUrl}/images/homeWu/Pending.png`" alt="" />
+              </div>
             </span>
             <!-- <img class="personal-box-img" :src="`${webBaseUrl}/images/homeWu/agency.png`" alt="" srcset=""> -->
           </div>
         </a>
         <div class="last-study-info">
-          <div class="one-line-ellipsis" style="color: #333;font-size: 16px;" v-if="overlayShow">
-            <router-link :to="'/course/studyindex?id='+lastStudy.courseId" >
-            <img class="Recent" :src="`${webBaseUrl}/images/Recent.png`" alt="">
-            最近学习： {{lastStudy.courseName}}
-             </router-link>
+          <div
+            class="one-line-ellipsis"
+            style="color: #333; font-size: 16px"
+            v-if="overlayShow"
+          >
+            <router-link :to="'/course/studyindex?id=' + lastStudy.courseId">
+              <img
+                class="Recent"
+                :src="`${webBaseUrl}/images/Recent.png`"
+                alt=""
+              />
+              最近学习： {{ lastStudy.courseName }}
+            </router-link>
           </div>
           <!-- <div class="tobe-icon">
             <img :src="`${webBaseUrl}/images/homeWu/Pending.png`" alt="">
@@ -66,8 +130,11 @@
           <li>
             <!-- <router-link to="/user/ranking"> -->
             <span class="label">累计学习</span>
-            <p><span>{{userData.totalStudyHour}}</span>小时</p>
-           <!-- </router-link> -->
+            <p>
+              <span>{{ userData.totalStudyHour }}</span
+              >小时
+            </p>
+            <!-- </router-link> -->
           </li>
           <!-- <li>
             <span class="label">经验值等级</span>
@@ -75,8 +142,11 @@
           </li> -->
           <li>
             <router-link @click.native="setCurIdentity(1)" to="/user/ucurrency">
-            <span class="label">我的U币</span>
-            <p><span>{{userData.uvalue>0? userData.uvalue:0 }}</span>个</p>
+              <span class="label">我的U币</span>
+              <p>
+                <span>{{ userData.uvalue > 0 ? userData.uvalue : 0 }}</span
+                >个
+              </p>
             </router-link>
           </li>
         </ul>
@@ -87,14 +157,23 @@
       <div class="modules xcontent2">
         <div class="xcontent2-main">
           <!--内容块-->
-          <div class="modules-title xindex-main" >
+          <div class="modules-title xindex-main">
             <span class="modules-text">推荐课程</span>
             <span class="quyer-tag">
-              <a :class="courseList.orderType == 2 ? 'current' : ''" @click="orderTypeFilter(2)">最热</a>
-              <a :class="courseList.orderType == 1 ? 'current' : ''" @click="orderTypeFilter(1)">最新</a>
-              <span @click="jumUX()" class="Uxtext" style=""> U选小课堂
+              <a
+                :class="courseList.orderType == 2 ? 'current' : ''"
+                @click="orderTypeFilter(2)"
+                >最热</a
+              >
+              <a
+                :class="courseList.orderType == 1 ? 'current' : ''"
+                @click="orderTypeFilter(1)"
+                >最新</a
+              >
+              <span @click="jumUX()" class="Uxtext" style="">
+                U选小课堂
                 <span class="uxicon">
-                  <svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
+                  <svg-icon icon-class="hot" style="font-size: 22px"></svg-icon>
                 </span>
               </span>
             </span>
@@ -131,70 +210,110 @@
               </a>
             </div> -->
             <!--内容列表内容-->
-            <div v-for="(course,ccidx) in courseList.list" :key="'cc'+ccidx" class="xindex-course" style="position: relative;">
-              <div style="position: absolute;right:25px;bottom: 72px">
-                <interactBar nodeWidth="20px" :courseExclusive="true"  :type="1" :data="course" :comments="false" :praises="false" :shares="false" :views="false">
+            <div
+              v-for="(course, ccidx) in courseList.list"
+              :key="'cc' + ccidx"
+              class="xindex-course"
+              style="position: relative"
+            >
+              <div style="position: absolute; right: 25px; bottom: 72px">
+                <interactBar
+                  nodeWidth="20px"
+                  :courseExclusive="true"
+                  :type="1"
+                  :data="course"
+                  :comments="false"
+                  :praises="false"
+                  :shares="false"
+                  :views="false"
+                >
                 </interactBar>
                 <!-- <svg-icon style="font-size: 32px;margin-top: -5px;" icon-class="collectedCourse"></svg-icon> -->
               </div>
               <a @click="toCourseDetail(course)">
                 <div class="xindex-course-image">
                   <course-image :course="course"></course-image>
-                  <span v-if="course.type == 20 || 10" class="course-type">录播课</span>
+                  <span v-if="course.type == 20 || 10" class="course-type"
+                    >录播课</span
+                  >
                 </div>
-                <div style="width:80%" :title="course.name" class="course-title portal-title-tow two-line-ellipsis">{{ course.name }}
+                <div
+                  style="width: 80%"
+                  :title="course.name"
+                  class="course-title portal-title-tow two-line-ellipsis"
+                >
+                  {{ course.name }}
                 </div>
                 <div class="course-author">
                   <div class="course-author-left">
                     {{ course.authorInfo.name }}
 
-                    <span class="study-num" >{{formatNum(course.studys)}}人学习</span>
+                    <span class="study-num"
+                      >{{ formatNum(course.studys) }}人学习</span
+                    >
                   </div>
-                  <div style="display: flex;">
-
+                  <div style="display: flex">
                     <div v-if="course.score">
-                      <span class="course-score-value" style="margin-left:10px">{{ toScore(course.score) }}分</span>
+                      <span class="course-score-value" style="margin-left: 10px"
+                        >{{ toScore(course.score) }}分</span
+                      >
                     </div>
                     <div v-else class="course-score-no">未评分</div>
                   </div>
                 </div>
               </a>
-
             </div>
           </div>
         </div>
 
-        <div class="xcontent2-minor" style="margin-top:60px">
+        <div class="xcontent2-minor" style="margin-top: 60px">
           <div class="portal-ranking ranking-bg">
             <p class="ranking-title">课程排行榜</p>
             <ul class="xindex-ranking-course">
-              <li  class="xindex-ranking-li" v-for="(item, cindex) in scorelist" :key="'cc'+cindex">
+              <li
+                class="xindex-ranking-li"
+                v-for="(item, cindex) in scorelist"
+                :key="'cc' + cindex"
+              >
                 <a style="display: inherit" @click="toCourseDetail(item)">
-                <span class="portal-right-text blue-one">
-                  <img :src="getPic(cindex)" alt="">
-                </span>
-                <span class="portal-title-desc index-one-line-ellipsis title-line-ellipsis" style="font-size: 14px;color: #04243C;">{{ item.name }}</span>
+                  <span class="portal-right-text blue-one">
+                    <img :src="getPic(cindex)" alt="" />
+                  </span>
+                  <span
+                    class="portal-title-desc index-one-line-ellipsis title-line-ellipsis"
+                    style="font-size: 14px; color: #04243c"
+                    >{{ item.name }}</span
+                  >
 
-                <div class="list-active">
-                  <div class="list-content">
-                    <div class="list-img">
-                      <course-image :text="false" :course="item"></course-image>
-                      <span v-if="item.type < 21" class="course-type">录播</span>
-                      <span v-if="item.type==30" class="course-type">线下课</span>
-                      <span v-if="item.type==40" class="course-type">学习项目</span>
+                  <div class="list-active">
+                    <div class="list-content">
+                      <div class="list-img">
+                        <course-image
+                          :text="false"
+                          :course="item"
+                        ></course-image>
+                        <span v-if="item.type < 21" class="course-type"
+                          >录播</span
+                        >
+                        <span v-if="item.type == 30" class="course-type"
+                          >线下课</span
+                        >
+                        <span v-if="item.type == 40" class="course-type"
+                          >学习项目</span
+                        >
+                      </div>
+                      <div class="list-text">
+                        <h6 class="two-line-ellipsis">{{ item.name }}</h6>
+                        <span>{{ item.publishTime }}</span>
+                      </div>
                     </div>
-                    <div class="list-text">
-                      <h6 class="two-line-ellipsis">{{item.name}}</h6>
-                      <span>{{item.publishTime}}</span>
+                    <div class="list-bottom">
+                      <couresinteract :type="1" :data="item"></couresinteract>
+
+                      <!-- <interactBar :type="1" :data="item" :couseViews="false" :shares="false" :views="false"></interactBar> -->
                     </div>
                   </div>
-                  <div class="list-bottom">
-                    <couresinteract :type="1" :data="item" ></couresinteract>
-                    
-                    <!-- <interactBar :type="1" :data="item" :couseViews="false" :shares="false" :views="false"></interactBar> -->
-                  </div>
-                </div>
-				</a>
+                </a>
               </li>
             </ul>
           </div>
@@ -202,45 +321,97 @@
       </div>
       <!-- 推荐案例2版 -->
       <div class="modules xcontent2">
-        <div class="xcontent2-main xindex-main" >
-          <div class="modules-title"><span class="modules-text">推荐案例</span>
+        <div class="xcontent2-main xindex-main">
+          <div class="modules-title">
+            <span class="modules-text">推荐案例</span>
             <span class="quyer-tag">
-              <a :class="caseList.orderType==2?'current':''" @click="changeCaseOrder(2)">最热</a>
-              <a :class="caseList.orderType==1?'current':''" @click="changeCaseOrder(1)">最新</a>
+              <a
+                :class="caseList.orderType == 2 ? 'current' : ''"
+                @click="changeCaseOrder(2)"
+                >最热</a
+              >
+              <a
+                :class="caseList.orderType == 1 ? 'current' : ''"
+                @click="changeCaseOrder(1)"
+                >最新</a
+              >
             </span>
             <span class="more">
               <router-link to="/case">查看更多>></router-link>
             </span>
           </div>
           <div class="modules-list">
-            <div class="xindex-case"   v-for="(ca,ind) in caseList.list" :key="'aa'+ind">
+            <div
+              class="xindex-case"
+              v-for="(ca, ind) in caseList.list"
+              :key="'aa' + ind"
+            >
               <div class="case-index boe-case-index">
                 <div class="case-top"></div>
                 <div class="case-conent" @click="jumcasedet(ca)">
                   <p class="cast-time">
-                    <span class="time-one" v-if="caseList.orderType==2">
-                      <svg-icon style="margin-right: 0;font-size:16px;" icon-class="crown"></svg-icon>人气榜NO.{{ind+1}}
+                    <span class="time-one" v-if="caseList.orderType == 2">
+                      <svg-icon
+                        style="margin-right: 0; font-size: 16px"
+                        icon-class="crown"
+                      ></svg-icon
+                      >人气榜NO.{{ ind + 1 }}
                     </span>
-                    <span style="float: right;">{{ca.sysCreateTime.substring(0, 10)}}</span>
+                    <span style="float: right">{{
+                      ca.sysCreateTime.substring(0, 10)
+                    }}</span>
                   </p>
                   <p :title="ca.title" class="two-line-ellipsis case-title">
-                    {{ca.title}}
+                    {{ ca.title }}
                   </p>
-                  <p class="case-text three-line-ellipsis">{{ca.summary}}</p>
+                  <p class="case-text three-line-ellipsis">{{ ca.summary }}</p>
                   <p class="case-info">
-                    <interactBar :type="3" :readonly="true" :data="ca" :shares="false" :views="false"></interactBar>
+                    <interactBar
+                      :type="3"
+                      :readonly="true"
+                      :data="ca"
+                      :shares="false"
+                      :views="false"
+                    ></interactBar>
                   </p>
                 </div>
-                <div class="case-inter ">
-                    <div class="case-inter-box">
-                      <div class="case-inter-left ">
-                        <div style="float:left"> <authorInfo  :avatar="ca.authorInfo.avatar"  :name="ca.authorInfo.name" :sex="ca.authorInfo.sex"  :aid="userInfo.aid"></authorInfo></div>
-                        <div class="case-inter-orgin index-one-line-ellipsis">  {{ ca.authorInfo.orgInfo }}</div>
+                <div class="case-inter">
+                  <div class="case-inter-box">
+                    <div class="case-inter-left">
+                      <div style="float: left">
+                        <authorInfo
+                          :avatar="ca.authorInfo.avatar"
+                          :name="ca.authorInfo.name"
+                          :sex="ca.authorInfo.sex"
+                          :aid="userInfo.aid"
+                        ></authorInfo>
                       </div>
-                      <div v-if="caseList.orderType==2" class="interact-bar-index"
-                    style="font-size: 12px;color: #6E7B84;display: flex;line-height: 30px;">
-                    <interactBar  :type="3" :readonly="true" :comments="false" :praises="false" :favorites="false"  :data="ca" :shares="false" :views="true"></interactBar>人观看
-                  </div>
+                      <div class="case-inter-orgin index-one-line-ellipsis">
+                        {{ ca.authorInfo.orgInfo }}
+                      </div>
+                    </div>
+                    <div
+                      v-if="caseList.orderType == 2"
+                      class="interact-bar-index"
+                      style="
+                        font-size: 12px;
+                        color: #6e7b84;
+                        display: flex;
+                        line-height: 30px;
+                      "
+                    >
+                      <interactBar
+                        :type="3"
+                        :readonly="true"
+                        :comments="false"
+                        :praises="false"
+                        :favorites="false"
+                        :data="ca"
+                        :shares="false"
+                        :views="true"
+                      ></interactBar
+                      >人观看
+                    </div>
                   </div>
 
                   <!-- -->
@@ -250,14 +421,27 @@
           </div>
         </div>
         <div class="xcontent2-minor">
-          <div class="portal-ranking ranking-bg" style="margin-top:60px;padding-right:17px">
+          <div
+            class="portal-ranking ranking-bg"
+            style="margin-top: 60px; padding-right: 17px"
+          >
             <p class="ranking-title">案例排行榜</p>
             <ul class="xindex-ranking-case">
-              <li @click="jumcasedet(item)"  class="xindex-ranking-li title-line-ellipsis" v-for="(item, index) in Popularity" :key="'bb'+index" style="line-height: 22px;">
+              <li
+                @click="jumcasedet(item)"
+                class="xindex-ranking-li title-line-ellipsis"
+                v-for="(item, index) in Popularity"
+                :key="'bb' + index"
+                style="line-height: 22px"
+              >
                 <span class="portal-right-text orange-one">
-                  <img :src="getPic(index)" alt="">
+                  <img :src="getPic(index)" alt="" />
                 </span>
-                <span class="portal-title-desc two-line-ellipsis" style="font-size: 14px;color: #04243C;line-height: 26px;">{{ item.title }}</span>
+                <span
+                  class="portal-title-desc two-line-ellipsis"
+                  style="font-size: 14px; color: #04243c; line-height: 26px"
+                  >{{ item.title }}</span
+                >
               </li>
             </ul>
           </div>
@@ -266,87 +450,183 @@
       <!-- 推荐文章 -->
       <div class="modules xcontent2">
         <div class="xcontent2-main xindex-main">
-          <div class="modules-title" style="margin-top:22px">
+          <div class="modules-title" style="margin-top: 22px">
             <span class="modules-text">推荐文章</span>
             <span class="quyer-tag">
-              <a :class="articleList.orderType == 2 ? 'current' : ''" @click="changeArticleOrder(2)">最热</a>
-              <a :class="articleList.orderType == 1 ? 'current' : ''" @click="changeArticleOrder(1)">最新</a>
+              <a
+                :class="articleList.orderType == 2 ? 'current' : ''"
+                @click="changeArticleOrder(2)"
+                >最热</a
+              >
+              <a
+                :class="articleList.orderType == 1 ? 'current' : ''"
+                @click="changeArticleOrder(1)"
+                >最新</a
+              >
             </span>
             <span class="more">
               <router-link to="/article">查看更多>></router-link>
             </span>
           </div>
           <div class="modules-list">
-            <div class="article-card boe-article-index" style="display: flex;">
+            <div class="article-card boe-article-index" style="display: flex">
               <!-- 首张 -->
-              <div class="article-card-left" v-if="articleList && articleList.first && articleList.first.id">
+              <div
+                class="article-card-left"
+                v-if="articleList && articleList.first && articleList.first.id"
+              >
                 <div class="article-card-box">
-                  <a :href="`${webBaseUrl}/article/detail?id=${articleList.first.id}`"
-                    style="font-weight: 700;font-size: 20px;">
+                  <a
+                    :href="`${webBaseUrl}/article/detail?id=${articleList.first.id}`"
+                    style="font-weight: 700; font-size: 20px"
+                  >
                     <div class="article-info-image-box">
-                      <article-image height="100%" width="100%" :article="articleList.first"></article-image>
+                      <article-image
+                        height="100%"
+                        width="100%"
+                        :article="articleList.first"
+                      ></article-image>
                     </div>
                     <div class="article-info">
-                     <div class="article-info-title " style="margin-top:10px">
+                      <div class="article-info-title" style="margin-top: 10px">
                         <div class="one-line-ellipsis">
                           <span
-                            style="font-weight: 600;font-size: 16px;word-break:break-all;color: #00253E;">{{ articleList.first.title }}</span>
+                            style="
+                              font-weight: 600;
+                              font-size: 16px;
+                              word-break: break-all;
+                              color: #00253e;
+                            "
+                            >{{ articleList.first.title }}</span
+                          >
                         </div>
                       </div>
-                      <div class="article-info-index-summary index-tive-line-ellipsis"
-                        style="min-height: 160px;font-weight: 400;margin-top:14px;word-break:break-all;">{{ articleList.first.summary }}
+                      <div
+                        class="article-info-index-summary index-tive-line-ellipsis"
+                        style="
+                          min-height: 160px;
+                          font-weight: 400;
+                          margin-top: 14px;
+                          word-break: break-all;
+                        "
+                      >
+                        {{ articleList.first.summary }}
                       </div>
                     </div>
                   </a>
-                  <div>
-
+                  <div></div>
+                  <div
+                    class="article-info-time"
+                    style="
+                      font-size: 14px;
+                      color: #6e7b84;
+                      display: flex;
+                      justify-content: space-between;
+                      margin-top: 16px;
+                    "
+                  >
+                    <span>{{
+                      articleList.first &&
+                      articleList.first.sysCreateTime &&
+                      articleList.first.sysCreateTime.substring(0, 10)
+                    }}</span>
+                    <span
+                      ><a
+                        :href="`${webBaseUrl}/article/detail?id=${articleList.first.id}`"
+                        >查看详情</a
+                      ></span
+                    >
                   </div>
-                  <div class="article-info-time"
-                    style="font-size: 14px;color: #6E7B84;display:flex;justify-content: space-between;margin-top:16px">
-                    <span>{{ articleList.first && articleList.first.sysCreateTime && articleList.first.sysCreateTime.substring(0, 10) }}</span>
-                    <span><a :href="`${webBaseUrl}/article/detail?id=${articleList.first.id}`">查看详情</a></span>
-                  </div>
-                  <div class="article-other-info" style="margin-top:17px">
+                  <div class="article-other-info" style="margin-top: 17px">
                     <div>
-                      <author-img height="32px" width="32px" :avatar="articleList.first.authorInfo.avatar" :aid="articleList.first.authorInfo.aid"
-                        :sex="articleList.first.authorInfo.sex"></author-img>
+                      <author-img
+                        height="32px"
+                        width="32px"
+                        :avatar="articleList.first.authorInfo.avatar"
+                        :aid="articleList.first.authorInfo.aid"
+                        :sex="articleList.first.authorInfo.sex"
+                      ></author-img>
                     </div>
-                    <div style="margin-top:5px">
-                      <interactBar :type="2" :readonly="true" :data="articleList.first" :views="false" :shares="false">
+                    <div style="margin-top: 5px">
+                      <interactBar
+                        :type="2"
+                        :readonly="true"
+                        :data="articleList.first"
+                        :views="false"
+                        :shares="false"
+                      >
                       </interactBar>
                     </div>
                   </div>
                 </div>
               </div>
               <!--内容列表内容-->
-              <div class="article-card-right" style="flex: 1;">
-                <div class="article-card-box" v-for="article in articleList.list" :key="'a1'+article.id">
+              <div class="article-card-right" style="flex: 1">
+                <div
+                  class="article-card-box"
+                  v-for="article in articleList.list"
+                  :key="'a1' + article.id"
+                >
                   <div class="article-li">
                     <div class="article-img" v-if="article.coverurl != ''">
-                      <a :href="`${webBaseUrl}/article/detail?id=${article.id}`"
-                        style="font-weight: 700;font-size: 20px;">
-                        <el-image style="width:100%;height:100%" :src="fileBaseUrl + article.coverurl"></el-image>
+                      <a
+                        :href="`${webBaseUrl}/article/detail?id=${article.id}`"
+                        style="font-weight: 700; font-size: 20px"
+                      >
+                        <el-image
+                          style="width: 100%; height: 100%"
+                          :src="fileBaseUrl + article.coverurl"
+                        ></el-image>
                       </a>
                     </div>
                     <div class="article-right">
-                      <a :href="`${webBaseUrl}/article/detail?id=${article.id}`"
-                        style="font-weight: 700;font-size: 20px;">
-                        <p class="article-info-title index-one-line-ellipsis">{{ article.title }}</p>
-                        <p class="article-info-summary two-line-ellipsis">{{ article.summary }}</p>
+                      <a
+                        :href="`${webBaseUrl}/article/detail?id=${article.id}`"
+                        style="font-weight: 700; font-size: 20px"
+                      >
+                        <p class="article-info-title index-one-line-ellipsis">
+                          {{ article.title }}
+                        </p>
+                        <p class="article-info-summary two-line-ellipsis">
+                          {{ article.summary }}
+                        </p>
                       </a>
                       <div class="article-bottom">
-                        <div style="display:flex">
+                        <div style="display: flex">
                           <div>
-                            <author-img height="32px" width="32px" :avatar="article.authorInfo.avatar" :aid="article.authorInfo.aid" :sex="article.authorInfo.sex"></author-img>
+                            <author-img
+                              height="32px"
+                              width="32px"
+                              :avatar="article.authorInfo.avatar"
+                              :aid="article.authorInfo.aid"
+                              :sex="article.authorInfo.sex"
+                            ></author-img>
                           </div>
                           <div>
-                            <span style="color: #6E7B84;font-size: 14px;margin:6px 13px 0 10px;">{{article.authorInfo.name}}</span>
+                            <span
+                              style="
+                                color: #6e7b84;
+                                font-size: 14px;
+                                margin: 6px 13px 0 10px;
+                              "
+                              >{{ article.authorInfo.name }}</span
+                            >
                           </div>
-                          <div style="padding-top: 0px;">
-                              <interactBar   :type="2" :readonly="true" :data="article" :views="false" :shares="false"></interactBar>
+                          <div style="padding-top: 0px">
+                            <interactBar
+                              :type="2"
+                              :readonly="true"
+                              :data="article"
+                              :views="false"
+                              :shares="false"
+                            ></interactBar>
                           </div>
                         </div>
-                        <div><span class="article-info-time">{{ article.sysCreateTime.substring(0, 10) }}</span></div>
+                        <div>
+                          <span class="article-info-time">{{
+                            article.sysCreateTime.substring(0, 10)
+                          }}</span>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -357,16 +637,29 @@
         </div>
         <!--内容块-->
         <div class="xcontent2-minor">
-          <div style="margin-top:82px;padding-right:17px" class="portal-ranking ranking-bg">
-          <!-- 排行榜位置 -->
+          <div
+            style="margin-top: 82px; padding-right: 17px"
+            class="portal-ranking ranking-bg"
+          >
+            <!-- 排行榜位置 -->
             <p class="ranking-title">文章排行榜</p>
             <ul class="xindex-ranking-article">
-              <li class="xindex-ranking-li" v-for="(item, index) in ankingList" :key="'a2'+item.id" style="line-height: 22px;">
-               <a style="display: inherit" :href="`${webBaseUrl}/article/detail?id=${item.id}`">
-                <span class="portal-right-text orange-one">
-                  <img :src="getPic(index)" alt="">
-                </span>
-                <span class="portal-index-summary two-line-ellipsis">{{ item.title }}</span>
+              <li
+                class="xindex-ranking-li"
+                v-for="(item, index) in ankingList"
+                :key="'a2' + item.id"
+                style="line-height: 22px"
+              >
+                <a
+                  style="display: inherit"
+                  :href="`${webBaseUrl}/article/detail?id=${item.id}`"
+                >
+                  <span class="portal-right-text orange-one">
+                    <img :src="getPic(index)" alt="" />
+                  </span>
+                  <span class="portal-index-summary two-line-ellipsis">{{
+                    item.title
+                  }}</span>
                 </a>
               </li>
             </ul>
@@ -377,11 +670,19 @@
       <div class="modules xcontent2">
         <div class="xcontent2-main xindex-main">
           <!--内容块-->
-          <div class="modules-title" style="margin-top:22px">
+          <div class="modules-title" style="margin-top: 22px">
             <span class="modules-text">推荐问答</span>
             <span class="quyer-tag">
-              <a :class="qaList.orderType == 'views' ? 'current' : ''" @click="changeQaOrder('views')">最热</a>
-              <a :class="qaList.orderType == '' ? 'current' : ''" @click="changeQaOrder('')">最新</a>
+              <a
+                :class="qaList.orderType == 'views' ? 'current' : ''"
+                @click="changeQaOrder('views')"
+                >最热</a
+              >
+              <a
+                :class="qaList.orderType == '' ? 'current' : ''"
+                @click="changeQaOrder('')"
+                >最新</a
+              >
             </span>
             <span class="more">
               <router-link to="/qa">查看更多>></router-link>
@@ -389,22 +690,53 @@
           </div>
           <div class="modules-list">
             <!--内容列表内容-->
-            <div class="xindex-qa" v-for="qa in qaList.list" :key="'qa'+qa.id">
-              <div class="qa-card boe-qa-index" >
-                <p class="qa-top"><span>{{formatNum(qa.views)}}正在关注</span><span>{{ qa.sysCreateTime.substring(0, 10) }}</span></p>
+            <div
+              class="xindex-qa"
+              v-for="qa in qaList.list"
+              :key="'qa' + qa.id"
+            >
+              <div class="qa-card boe-qa-index">
+                <p class="qa-top">
+                  <span>{{ formatNum(qa.views) }}正在关注</span
+                  ><span>{{ qa.sysCreateTime.substring(0, 10) }}</span>
+                </p>
                 <div class="qa-center">
-                  <p class="one-line-ellipsis portal-index-title" style="color:#181818;">{{ qa.title }}</p>
-                  <p class="boe-qa-sum two-line-ellipsis" style="color:#6E7B84;">{{ qa.content }}</p>
-                  <p class="qa-views pointer" @click="jumpRouter(qa)">查看详情</p>
+                  <p
+                    class="one-line-ellipsis portal-index-title"
+                    style="color: #181818"
+                  >
+                    {{ qa.title }}
+                  </p>
+                  <p
+                    class="boe-qa-sum two-line-ellipsis"
+                    style="color: #6e7b84"
+                  >
+                    {{ qa.content }}
+                  </p>
+                  <p class="qa-views pointer" @click="jumpRouter(qa)">
+                    查看详情
+                  </p>
                 </div>
                 <div class="qa-char">
-                  <author-img :avatar="qa.authorInfo.avatar" :aid="qa.authorInfo.aid" :sex="qa.authorInfo.sex">
+                  <author-img
+                    :avatar="qa.authorInfo.avatar"
+                    :aid="qa.authorInfo.aid"
+                    :sex="qa.authorInfo.sex"
+                  >
                   </author-img>
                   <div>
-                    <p class="info-name">{{qa.authorInfo.name}}</p>
+                    <p class="info-name">{{ qa.authorInfo.name }}</p>
                     <p class="info-bar">
-                      <interactBar :type="4" :readonly="true" :data="qa" :comments="false" :answers="true"
-                        :shares="false" :praises="false" :views="false"></interactBar>
+                      <interactBar
+                        :type="4"
+                        :readonly="true"
+                        :data="qa"
+                        :comments="false"
+                        :answers="true"
+                        :shares="false"
+                        :praises="false"
+                        :views="false"
+                      ></interactBar>
                     </p>
                   </div>
                 </div>
@@ -412,722 +744,993 @@
             </div>
           </div>
         </div>
-        <div  class="xcontent2-minor">
+        <div class="xcontent2-minor">
           <!-- 排行榜 -->
-          <div class="portal-ranking ranking-bg" style="margin-top:80px;padding-right:17px">
+          <div
+            class="portal-ranking ranking-bg"
+            style="margin-top: 80px; padding-right: 17px"
+          >
             <p class="ranking-title">问答排行榜</p>
             <ul class="xindex-ranking-qa">
-              <li @click="jumpRouter(item)" class="xindex-ranking-li" v-for="(item, index) in answersList" :key="'q'+item.id" style="line-height: 22px;">
+              <li
+                @click="jumpRouter(item)"
+                class="xindex-ranking-li"
+                v-for="(item, index) in answersList"
+                :key="'q' + item.id"
+                style="line-height: 22px"
+              >
                 <span class="portal-right-text orange-one">
-                  <img :src="getPic(index)" alt="">
+                  <img :src="getPic(index)" alt="" />
                 </span>
-                <span class="portal-index-summary two-line-ellipsis">{{ item.title }}</span>
+                <span class="portal-index-summary two-line-ellipsis">{{
+                  item.title
+                }}</span>
               </li>
             </ul>
           </div>
         </div>
       </div>
     </div>
-    <div><a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course">&nbsp;&nbsp;&nbsp;</a>
+    <div>
+      <a
+        href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course"
+        >&nbsp;&nbsp;&nbsp;</a
+      >
     </div>
     <portal-footer></portal-footer>
     <portalFloatTools></portalFloatTools>
-    <interest-Collection ref="userCollection" @close="closeCollection"></interest-Collection> <!-- 兴趣偏好 -->
-    <guide-box ref="guide" @close="closeGuide"></guide-box> <!-- 引导页 -->
+    <interest-Collection
+      ref="userCollection"
+      @close="closeCollection"
+    ></interest-Collection>
+    <!-- 兴趣偏好 -->
+    <guide-box ref="guide" @close="closeGuide"></guide-box>
+    <!-- 引导页 -->
     <!-- <medalDlg></medalDlg> -->
     <!--登录勋章-->
-    <el-dialog width="540px"  class="medalbox"  :visible.sync="showLoginMedal"  :append-to-body="true" >
-        <div class="jinian-medal-img" :style="`background: url(${webBaseUrl}/images/jinian_medal.png) no-repeat;`">
-           <!--登录勋章显示，根据UI显示修改-->
-           <span style="position: absolute; right:60px;top:60px;cursor: pointer;">
-             <img @click="closeJinian" :src="`${webBaseUrl}/images/close.png`" width="26px" height="26px" alt="">
-           </span>
-           <div style="text-align: center;padding-right: 10px;"><img :src="`${webBaseUrl}/images/login_medal.png`" width="206px" height="269px" alt=""></div>
-           <div style="text-align: left;padding:20px 60px 100px 60px">
-             <div class="jntext1">感谢有您 一路相伴</div>
-             <div class="jntext2">勋章领取条件:</div>
-             <div class="jntext3">2022年11月4日-11月19日登录过平台学习的校友</div>
-           </div>
+    <el-dialog
+      width="540px"
+      class="medalbox"
+      :visible.sync="showLoginMedal"
+      :append-to-body="true"
+    >
+      <div
+        class="jinian-medal-img"
+        :style="`background: url(${webBaseUrl}/images/jinian_medal.png) no-repeat;`"
+      >
+        <!--登录勋章显示，根据UI显示修改-->
+        <span
+          style="position: absolute; right: 60px; top: 60px; cursor: pointer"
+        >
+          <img
+            @click="closeJinian"
+            :src="`${webBaseUrl}/images/close.png`"
+            width="26px"
+            height="26px"
+            alt=""
+          />
+        </span>
+        <div style="text-align: center; padding-right: 10px">
+          <img
+            :src="`${webBaseUrl}/images/login_medal.png`"
+            width="206px"
+            height="269px"
+            alt=""
+          />
         </div>
+        <div style="text-align: left; padding: 20px 60px 100px 60px">
+          <div class="jntext1">感谢有您 一路相伴</div>
+          <div class="jntext2">勋章领取条件:</div>
+          <div class="jntext3">2022年11月4日-11月19日登录过平台学习的校友</div>
+        </div>
+      </div>
     </el-dialog>
-
+    <!-- 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>
-  import { mapGetters } from 'vuex';
-  import apiCourseStudy from "@/api/modules/courseStudy.js"
-  import portalHeader from '@/components/PortalHeader.vue';
-  import portalFooter from '@/components/PortalFooter.vue';
-  import portalFloatTools from '@/components/PortalFloatTools.vue';
-  import authorInfo from '@/components/Portal/authorInfo.vue';
-  import apiCourse from '@/api/modules/coursePortal.js';
-  import apiCase from '@/api/modules/cases.js';
-  import apiArticle from '@/api/modules/article.js';
-  import apiQa from '@/api/modules/qa.js';
-  import apiGuide from "@/api/phase2/guide.js";
-  import apiUser from '@/api/system/user.js';
-  import apiCoursePortal from '@/api/modules/coursePortal.js';
-  import interactBar from '@/components/Portal/interactBar.vue';
-  import couresinteract from '@/components/Portal/course/couresinteract.vue';
-  import ad from '@/components/Portal/adFloat.vue';
-  import courseImage from '@/components/Course/courseImage.vue';
-  import articleImage from '@/components/Article/articleImage.vue';
-  import InterestCollection from '@/components/Portal/interestCollection.vue'
-  import GuideBox from '@/components/Portal/guideBox.vue'
-  import medalDlg from '@/components/Portal/medalDlg.vue'
-  import { toScore,formatUserNumber,cutOrgNamePath} from '@/utils/tools.js';
-  import {swiper,swiperSlide} from 'vue-awesome-swiper';
-  import apiPlace from "@/api/phase2/place.js"
-  import authorImg from '@/components/Portal/authorImg.vue';
-  import apiStat from '@/api/phase2/stat.js'
-  import apiIndex from '@/api/phase2/index.js'
-  import apiUserhobby from "@/api/phase2/userhobby.js"
-  export default {
-    name: 'index',
-    components: {
-      authorImg,
-      portalHeader,
-      ad,
-      portalFooter,
-      articleImage,
-      portalFloatTools,
-      authorInfo,
-      interactBar,
-      couresinteract,
-      courseImage,
-      InterestCollection,
-      GuideBox,
-      medalDlg
-    },
-    created() {
-      this.$store.dispatch('refrashStudyTaskCount');
-      let $this=this;
-      //判断是否弹出登录勋章，设置截止日期
-      var nowDate = new Date();
-      var endDate = new Date('2022-11-18');//先设置时间是11月18日
-      if(nowDate<endDate){
-        apiStat.getUserLoginMedal().then(rs=>{
-           if(rs.status==200){
-              if(rs.result.show){
-                //设置是否需要显示纪念勋章
-                $this.needLoginMedal=true;
-              }
-           }
-        })
-      }
-      //提取需要提示勋章
-      // apiStat.getUserMedalTips().then(res=>{
-      //    if(res.status==200){
-      //       $this.medalTips=res.result;
-      //    }
-      // })
-
-    },
-    data() {
-      return {
-        showLoginMedal:false,//是否显示登录勋章
-        needLoginMedal:false,//是否需要显示纪念勋章
-        medalTips:[
-            {medalId:1,medalLevel:5,isShow:false},
-            {medalId:3,medalLevel:4,isShow:false}
-        ],
-        lastStudy:{},
-        overlayShow:false,
-        userData: {level:1,  uvalue:0, totalStudyHour:0},
-        userHobby:{
-          needShow:false,
-          localKeyPre:'user-hobby-' //本地存储的key
-        },
-        needHobbyShow:false,//是否显示兴趣爱好
-        formatNum:formatUserNumber,
-        cutOrgNamePath:cutOrgNamePath,
-        // userInfo: {},
-        ankingList: [],
-        answersList: [],
-        Popularity: [],
-        scorelist: [],
-        resonimg: [],
-          swiperOptiontwo: {
-          autoplay: false,
-          // noSwiping: true,
-        },
-        swiperOption: {
-          autoplay:{
-              delay:2000,
-              disableOnInteraction:false, //解决滑动后不能轮播的问题
-        },
-          speed: 3000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
-          loop: true, //循环切换
-          peed: 300, //循环速度
-          scrollbar: '.swiper-scrollbar',
-          pagination: {
-      	     el: '.swiper-pagination',
-            // type : 'progressbar', //分页器形状
-            clickable: true, //点击分页器的指示点分页器会控制Swiper切换
-          },
-          navigation: {
-   	        nextEl: '.swiper-button-next',
-            prevEl: '.swiper-button-prev',
-          },
-        },
-
-        couname: '',
-        isNext: true,
-        pageIndex: 1,
-        fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
-        toScore,
-        courseList: {
-          num: 12,
-          orderType: 2,
-          list: []
-        },
-        caseList: {
-          num: 3,
-          orderType: 2,
-          list: []
-        },
-        articleList: {
-          num: 4,
-          orderType: 2,
-          first: {
-            id: '',
-            authorInfo: {}
-          },
-          list: []
-        },
-        qaList: {
-          num: 4,
-          orderType: 'views',
-          list: []
+import { mapGetters } from "vuex";
+import apiCourseStudy from "@/api/modules/courseStudy.js";
+import portalHeader from "@/components/PortalHeader.vue";
+import portalFooter from "@/components/PortalFooter.vue";
+import portalFloatTools from "@/components/PortalFloatTools.vue";
+import authorInfo from "@/components/Portal/authorInfo.vue";
+import apiCourse from "@/api/modules/coursePortal.js";
+import apiCase from "@/api/modules/cases.js";
+import apiArticle from "@/api/modules/article.js";
+import apiQa from "@/api/modules/qa.js";
+import apiGuide from "@/api/phase2/guide.js";
+import apiUser from "@/api/system/user.js";
+import apiCoursePortal from "@/api/modules/coursePortal.js";
+import interactBar from "@/components/Portal/interactBar.vue";
+import couresinteract from "@/components/Portal/course/couresinteract.vue";
+import ad from "@/components/Portal/adFloat.vue";
+import courseImage from "@/components/Course/courseImage.vue";
+import articleImage from "@/components/Article/articleImage.vue";
+import InterestCollection from "@/components/Portal/interestCollection.vue";
+import GuideBox from "@/components/Portal/guideBox.vue";
+import medalDlg from "@/components/Portal/medalDlg.vue";
+import { toScore, formatUserNumber, cutOrgNamePath } from "@/utils/tools.js";
+import { swiper, swiperSlide } from "vue-awesome-swiper";
+import apiPlace from "@/api/phase2/place.js";
+import authorImg from "@/components/Portal/authorImg.vue";
+import apiStat from "@/api/phase2/stat.js";
+import apiIndex from "@/api/phase2/index.js";
+import apiUserhobby from "@/api/phase2/userhobby.js";
+export default {
+  name: "index",
+  components: {
+    authorImg,
+    portalHeader,
+    ad,
+    portalFooter,
+    articleImage,
+    portalFloatTools,
+    authorInfo,
+    interactBar,
+    couresinteract,
+    courseImage,
+    InterestCollection,
+    GuideBox,
+    medalDlg,
+  },
+  created() {
+    this.$store.dispatch("refrashStudyTaskCount");
+    let $this = this;
+    //判断是否弹出登录勋章，设置截止日期
+    var nowDate = new Date();
+    var endDate = new Date("2022-11-18"); //先设置时间是11月18日
+    if (nowDate < endDate) {
+      apiStat.getUserLoginMedal().then((rs) => {
+        if (rs.status == 200) {
+          if (rs.result.show) {
+            //设置是否需要显示纪念勋章
+            $this.needLoginMedal = true;
+          }
         }
-      };
-    },
-    mounted() {
-      this.getCourseData(1);
-      this.getCaseData();
-      this.getArticleData();
-      this.getQaData();
-      this.couresreso();
-      this.getScoreList();
-      this.getPopularity();
-      this.getAnkingData();
-      this.getLevel();
-      this.getQaAnswers();
-      this.getLastStudy();
+      });
+    }
+    //提取需要提示勋章
+    // apiStat.getUserMedalTips().then(res=>{
+    //    if(res.status==200){
+    //       $this.medalTips=res.result;
+    //    }
+    // })
+  },
+  data() {
+    return {
+      showUClass: false,
+      showLoginMedal: false, //是否显示登录勋章
+      needLoginMedal: false, //是否需要显示纪念勋章
+      medalTips: [
+        { medalId: 1, medalLevel: 5, isShow: false },
+        { medalId: 3, medalLevel: 4, isShow: false },
+      ],
+      lastStudy: {},
+      overlayShow: false,
+      userData: { level: 1, uvalue: 0, totalStudyHour: 0 },
+      userHobby: {
+        needShow: false,
+        localKeyPre: "user-hobby-", //本地存储的key
+      },
+      needHobbyShow: false, //是否显示兴趣爱好
+      formatNum: formatUserNumber,
+      cutOrgNamePath: cutOrgNamePath,
+      // userInfo: {},
+      ankingList: [],
+      answersList: [],
+      Popularity: [],
+      scorelist: [],
+      resonimg: [],
+      swiperOptiontwo: {
+        autoplay: false,
+        // noSwiping: true,
+      },
+      swiperOption: {
+        autoplay: {
+          delay: 2000,
+          disableOnInteraction: false, //解决滑动后不能轮播的问题
+        },
+        speed: 3000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
+        loop: true, //循环切换
+        peed: 300, //循环速度
+        scrollbar: ".swiper-scrollbar",
+        pagination: {
+          el: ".swiper-pagination",
+          // type : 'progressbar', //分页器形状
+          clickable: true, //点击分页器的指示点分页器会控制Swiper切换
+        },
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+      },
 
-      //检查兴趣爱好是否已填报,
-      //先检查本地session和 local 15天, 这两个值是在组件中设置的
-      let sessionHobby=sessionStorage.getItem('user-hobby-'+this.userInfo.aid);
-      let localHobbyTime=localStorage.getItem('notYet'+this.userInfo.aid);
-      if(!sessionHobby){ //只有session中不存在，才会验证
-          //本地15天验证,localHobby,后续完善
-            let flag=true;//请求检查
-            if(localHobbyTime) {
-                let day = (new Date() - new Date(localHobbyTime))/(1000*60*60*24);
-                if(day< 15){
-                  flag = false;
-                }
-            }
-            if(flag){
-              apiUserhobby.has().then(res=>{
-                if(res.status == 200) {
-                   if(!res.result){
-                     //设置需要显示兴趣爱好收集窗口
-                     this.userHobby.needShow=true;
-                   }
-                }else{
-                  console.log('兴趣爱好检查失败'+res.message);
-                }
-                //检查引导页
-                this.checkAndShowGuide();
-              });
-            }else{
-              this.checkAndShowGuide();
-            }
-      }else{
-         //检查引导页
-         this.checkAndShowGuide();
-      }
-      //this.$refs.userCollection.show();
-    },
-    computed: {
-       ...mapGetters(['userInfo','studyTaskCount']),
-      swiper() {
-        return this.$refs.mySwiper.swiper
-      }
-    },
-    methods: {
-      setCurIdentity(iden){
-        this.$store.dispatch('SetCurIdentity',iden);
+      couname: "",
+      isNext: true,
+      pageIndex: 1,
+      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
+      toScore,
+      courseList: {
+        num: 12,
+        orderType: 2,
+        list: [],
       },
-      closeJinian(){
-        this.showLoginMedal=false;
+      caseList: {
+        num: 3,
+        orderType: 2,
+        list: [],
       },
-      banJump(item) {
-        if(item.JumpUrl){
-          window.open(item.JumpUrl);
+      articleList: {
+        num: 4,
+        orderType: 2,
+        first: {
+          id: "",
+          authorInfo: {},
+        },
+        list: [],
+      },
+      qaList: {
+        num: 4,
+        orderType: "views",
+        list: [],
+      },
+    };
+  },
+  mounted() {
+    this.getCourseData(1);
+    this.getCaseData();
+    this.getArticleData();
+    this.getQaData();
+    this.couresreso();
+    this.getScoreList();
+    this.getPopularity();
+    this.getAnkingData();
+    this.getLevel();
+    this.getQaAnswers();
+    this.getLastStudy();
+
+    //检查兴趣爱好是否已填报,
+    //先检查本地session和 local 15天, 这两个值是在组件中设置的
+    let sessionHobby = sessionStorage.getItem(
+      "user-hobby-" + this.userInfo.aid
+    );
+    let localHobbyTime = localStorage.getItem("notYet" + this.userInfo.aid);
+    if (!sessionHobby) {
+      //只有session中不存在，才会验证
+      //本地15天验证,localHobby,后续完善
+      let flag = true; //请求检查
+      if (localHobbyTime) {
+        let day =
+          (new Date() - new Date(localHobbyTime)) / (1000 * 60 * 60 * 24);
+        if (day < 15) {
+          flag = false;
         }
-      },
-      //上次学习记录
-      getLastStudy() {
-				apiCourseStudy.lastStudy().then(res => {
-					if (res.status === 200) {
-						this.lastStudy = res.result;
-						if (res.result != '' && res.result.courseId) {
-							this.overlayShow = true;
-						}
-					} else {
-						this.$message.error(res.message);
-					}
-				})
-			},
-      //检查并弹出引导页
-      checkAndShowGuide(){
-        //引导页弹框是否显示
-        //检查本地,减少服务器请求的次数
-        let localGuide=localStorage.getItem('user-guide-'+this.userInfo.aid);
-        if(!localGuide){
-          apiGuide.hasUser().then(res=>{
-            if(res.status==200){
-              if(!res.result){
-                this.$refs.guide.show();
-              }else{
-                if(this.userHobby.needShow){
-                  this.$refs.userCollection.show();
-                }else{
-                  if(this.needLoginMedal){
-                     this.showLoginMedal=true;
-                  }
+      }
+      if (flag) {
+        apiUserhobby.has().then((res) => {
+          if (res.status == 200) {
+            if (!res.result) {
+              //设置需要显示兴趣爱好收集窗口
+              this.userHobby.needShow = true;
+            }
+          } else {
+            console.log("兴趣爱好检查失败" + res.message);
+          }
+          //检查引导页
+          this.checkAndShowGuide();
+        });
+      } else {
+        this.checkAndShowGuide();
+      }
+    } else {
+      //检查引导页
+      this.checkAndShowGuide();
+    }
+    //this.$refs.userCollection.show();
+  },
+  computed: {
+    ...mapGetters(["userInfo", "studyTaskCount"]),
+    swiper() {
+      return this.$refs.mySwiper.swiper;
+    },
+  },
+  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;
+      }
+    },
+    setCurIdentity(iden) {
+      this.$store.dispatch("SetCurIdentity", iden);
+    },
+    closeJinian() {
+      this.showLoginMedal = false;
+    },
+    banJump(item) {
+      if (item.JumpUrl) {
+        window.open(item.JumpUrl);
+      }
+    },
+    //上次学习记录
+    getLastStudy() {
+      apiCourseStudy.lastStudy().then((res) => {
+        if (res.status === 200) {
+          this.lastStudy = res.result;
+          if (res.result != "" && res.result.courseId) {
+            this.overlayShow = true;
+          }
+        } else {
+          this.$message.error(res.message);
+        }
+      });
+    },
+    //检查并弹出引导页
+    checkAndShowGuide() {
+      //引导页弹框是否显示
+      //检查本地,减少服务器请求的次数
+      let localGuide = localStorage.getItem("user-guide-" + this.userInfo.aid);
+      if (!localGuide) {
+        apiGuide.hasUser().then((res) => {
+          if (res.status == 200) {
+            if (!res.result) {
+              this.$refs.guide.show();
+            } else {
+              if (this.userHobby.needShow) {
+                this.$refs.userCollection.show();
+              } else {
+                if (this.needLoginMedal) {
+                  this.showLoginMedal = true;
                 }
               }
-              localStorage.setItem('user-guide-'+this.userInfo.aid,1);
-            }else{
-              console.log('获取引导页检查失败'+res.message);
-              //this.$message.error('')
-              if(this.userHobby.needShow){this.$refs.userCollection.show();}
+            }
+            localStorage.setItem("user-guide-" + this.userInfo.aid, 1);
+          } else {
+            console.log("获取引导页检查失败" + res.message);
+            //this.$message.error('')
+            if (this.userHobby.needShow) {
+              this.$refs.userCollection.show();
+            }
+          }
+        });
+      } else {
+        if (this.userHobby.needShow) {
+          this.$refs.userCollection.show();
+        } else {
+          if (this.needLoginMedal) {
+            this.showLoginMedal = true;
+          }
+        }
+      }
+
+      //测试情况下
+      // this.$refs.guide.show();
+    },
+    closeGuide() {
+      //关闭引导页
+      if (this.userHobby.needShow) {
+        //需要弹出兴趣收集页，弹出兴趣收集页
+        this.$refs.userCollection.show();
+      }
+    },
+    closeCollection() {
+      if (this.needLoginMedal) {
+        this.showLoginMedal = true;
+      }
+    },
+    jumstudy() {
+      this.$router.push({ path: "../views/study/TaskList.vue" });
+    },
+    jumcasedet(item) {
+      this.$router.push({ path: "/case/detail", query: { id: item.id } });
+    },
+    getPic(index) {
+      return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png";
+    },
+    getLevel() {
+      //获取经验值和等级
+      apiStat.getUserStatTotalInfo(this.userInfo.aid).then((res) => {
+        if (res.status == 200) {
+          this.userData = res.result;
+          //console.log(this.userData,'this.userData')
+        }
+      });
+    },
+    getQaAnswers() {
+      apiIndex.qaAnswers(10).then((res) => {
+        if (res.status == 200) {
+          this.answersList = res.result;
+        }
+      });
+    },
+    getAnkingData() {
+      //  文章排行榜
+      apiIndex.articleViews(10).then((res) => {
+        if (res.status == 200) {
+          this.ankingList = res.result;
+        }
+      });
+    },
+    getPopularity() {
+      //案例排行榜
+      apiCase.queryPraises(10).then((res) => {
+        if (res.status == 200) {
+          this.Popularity = res.result;
+          // console.log(this.Popularity)
+        }
+      });
+    },
+    getScoreList() {
+      //课程排行榜
+      apiCourse.scorelist(10, 1).then((res) => {
+        if (res.status == 200) {
+          res.result.forEach((item) => {
+            if (item.publishTime != "") {
+              item.coverImg = item.images;
+              let time = item.publishTime.split("-");
+              item.publishTime = `${time[0]}年${time[1]}月${time[2]}日`;
             }
           });
-        }else {
-          if(this.userHobby.needShow){
-            this.$refs.userCollection.show();
-          }else{
-            if(this.needLoginMedal){
-               this.showLoginMedal=true;
-            }
-          }
+          this.scorelist = res.result;
+          //console.log(this.scorelist,'this.scorelist');
         }
-
-        //测试情况下
-        // this.$refs.guide.show();
-      },
-      closeGuide(){ //关闭引导页
-         if(this.userHobby.needShow){
-            //需要弹出兴趣收集页，弹出兴趣收集页
-            this.$refs.userCollection.show();
-         }
-      },
-      closeCollection(){
-        if(this.needLoginMedal){
-           this.showLoginMedal=true;
-        }
-      },
-      jumstudy(){
-      this.$router.push({path:'../views/study/TaskList.vue'});
-      },
-      jumcasedet(item) {
-      this.$router.push({path:'/case/detail',query:{id:item.id}});
+      });
     },
-      getPic(index) {
-        return this.webBaseUrl+'/images/listblue0'+(index+1)+'.png';
-      },
-      getLevel() { //获取经验值和等级
-        apiStat.getUserStatTotalInfo(this.userInfo.aid).then(res => {
-          if (res.status == 200) {
-            this.userData = res.result;
-            //console.log(this.userData,'this.userData')
+    // bgfun(){
+    //  console.log(this.$refs.bannimg[0]);
+    //  this.$nextTick(() => {
+    // 		console.log(this.$refs.bannimg[0])
+    // 	})
+    // },
+    couresreso() {
+      let key = "index";
+      apiPlace.detail(key).then((res) => {
+        let lmj = JSON.parse(res.result.content);
+        this.resonimg = lmj;
+      });
+    },
+    jumUX() {
+      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130", "_blank");
+    },
+    toCourseDetail(item) {
+      //二期调整，直接改成一个地址
+      //return this.webBaseUrl + '/course/detail?id=' + item.id;
+      let $this = this;
+      if (item.type == 10) {
+        //return this.webBaseUrl + "/course/studyindex?id=" + item.id;
+        //console.log("直接进入学习页面");
+        this.$router.push("/course/studyindex?id=" + item.id);
+      } else if (item.type == 20) {
+        apiCourseStudy.hasSignup(item.id).then((rs) => {
+          if (rs.status == 200) {
+            //return $this.webBaseUrl + "/course/studyindex?id=" + item.id;
+            this.$router.push("/course/studyindex?id=" + item.id);
+          } else {
+            //return $this.webBaseUrl + "/course/detail?id=" + item.id;
+            this.$router.push("/course/detail?id=" + item.id);
           }
         });
-      },
-      getQaAnswers() {
-        apiIndex.qaAnswers(10).then(res => {
-          if (res.status == 200) {
-            this.answersList = res.result;
-          }
-        })
-
-      },
-      getAnkingData() { //  文章排行榜
-        apiIndex.articleViews(10).then(res => {
-          if (res.status == 200) {
-            this.ankingList = res.result;
-          }
-        });
-      },
-      getPopularity() { //案例排行榜
-        apiCase.queryPraises(10).then(res => {
-          if (res.status == 200) {
-            this.Popularity = res.result;
-            // console.log(this.Popularity)
-          }
-        });
-      },
-      getScoreList() { //课程排行榜
-        apiCourse.scorelist(10,1).then(res => {
-          if (res.status == 200) {
-            res.result.forEach(item => {
-              if (item.publishTime != '') {
-                item.coverImg=item.images;
-                let time = item.publishTime.split('-');
-                item.publishTime = `${time[0]}年${time[1]}月${time[2]}日`
-              }
-            })
-            this.scorelist = res.result;
-            //console.log(this.scorelist,'this.scorelist');
-          }
-        });
-      },
-      // bgfun(){
-      //  console.log(this.$refs.bannimg[0]);
-      //  this.$nextTick(() => {
-      // 		console.log(this.$refs.bannimg[0])
-      // 	})
-      // },
-      couresreso() {
-        let key = 'index';
-        apiPlace.detail(key).then(res => {
-          let lmj = JSON.parse(res.result.content)
-          this.resonimg = lmj;
-        })
-      },
-      jumUX() {
-        window.open('https://m.qingxuetang.com/x/?appId=qxtcorp306130', '_blank');
-      },
-      toCourseDetail(item) {
-        //二期调整，直接改成一个地址
-        //return this.webBaseUrl + '/course/detail?id=' + item.id;
-        let $this=this;
-       if (item.type == 10) {
-          //return this.webBaseUrl + "/course/studyindex?id=" + item.id;
-          //console.log("直接进入学习页面");
-          this.$router.push("/course/studyindex?id=" + item.id);
-       } else if (item.type == 20) {
-         apiCourseStudy.hasSignup(item.id).then(rs=>{
-            if(rs.status==200){
-              //return $this.webBaseUrl + "/course/studyindex?id=" + item.id;
-              this.$router.push("/course/studyindex?id=" + item.id);
-            }else{
-              //return $this.webBaseUrl + "/course/detail?id=" + item.id;
-              this.$router.push("/course/detail?id=" + item.id);
-            }
-         })
         //return $this.webBaseUrl + "/course/detail?id=" + item.id;
-       }
-
-      },
-      orderTypeFilter(val) {
-        this.courseList.orderType = val;
-        this.pageIndex = 1;
-        this.getCourseData();
-      },
-      nextPage() {
-        this.pageIndex += 1;
-        if (this.isNext) {
-          this.getCourseData(this.pageIndex);
-        }
-      },
-      getCourseData(pageIndex) {
-        this.isNext = false;
-        let {
-          orderType,
-          num
-        } = this.courseList;
-        let course = {
-          pageSize: 6,
-          device: 1,
-          orderField: orderType == 1 ? '' : 'studys',
-          orderAsc: false,
-          topOrder: true,
-          pageIndex: pageIndex
-        };
-
-        apiIndex.courselist(course).then(res => {
-          if (res.status == 200 && res.result.length > 0) {
-            let courseIds = [];
-            res.result.forEach(item => {
-              item.authorInfo = {
-                aid: '',
-                name: '',
-                orgInfo: '',
-                avatar: '',
-                code: '',
-                sex: null
-              };
-              courseIds.push(item.id);
-            });
-            this.loadCouserTeacher(res.result, courseIds);
-            this.courseList.list = res.result;
-            //this.couname = res.result.list.name;
-            // if (res.result.count - pageIndex * num < 8) {
-            //   this.pageIndex = 0;
-            // }
-            // this.isNext = true;
-
-
-            // }
-          } else {
-            console.log('加载课程信息失败:' + res.error);
-          }
-
-        });
-
-
-        // apiCourse.list({orderType,num,device:1}).then(res => {
-        //     if(res.status==200){
-        //       if(res.result.length>0){
-        //         let courseIds=[];
-        //         res.result.forEach(item=>{
-        //           item.authorInfo={aid:'',name:'',orgInfo:'',avatar:'',code:''};
-        //           courseIds.push(item.id);
-        //         })
-        //         this.loadCouserTeacher(res.result,courseIds);
-        //         this.courseList.list=res.result;
-        //       }
-        //     }else{
-        //       console.log('加载课程信息失败:'+res.error);
-        //     }
-        //   })
-      },
-      changeCaseOrder(val) {
-        this.caseList.orderType = val;
-        this.getCaseData();
-      },
-      getCaseData() {
-        apiIndex.cases(this.caseList.orderType).then(res => {
-          if (res.status == 200) {
-            if (res.result.length > 0) {
-              let userIds = [];
-              res.result.forEach(item => {
-                item.authorInfo = {
-                  aid: '',
-                  name: '',
-                  orgInfo: '',
-                  avatar: '',
-                  code: '',
-                  sex: null
-                };
-
-                if (item.authorId && item.authorId != '') {
-                  userIds.push(item.authorId);
-                }
-              });
-              this.caseList.list = res.result;
-              this.loadCaseAuthorInfo(res.result, userIds);
-            }
-            // this.caseList.list = res.result;
-          } else {
-            console.log('加载案例错误：' + res.error);
-          }
-        });
-      },
-      loadCaseAuthorInfo(list, ids) {
-        //加载作者信息，头像，机构信息
-        if (ids.length == 0) {
-          return;
-        }
-        const noReapetIds = [...new Set(ids)];
-        apiUser.getByIds(ids).then(res => {
-          if (res.status == 200) {
-            list.forEach((item, index) => {
-              res.result.some(author => {
-                if (author.aid == item.authorId) {
-                  author.orgInfo = cutOrgNamePath(author.orgInfo, 1);
-                  item.authorInfo = author;
-
-                  return true;
-                } else {
-                  return false;
-                }
-              });
-            });
-          } else {
-            console.log('加载用户信息失败:' + res.error);
-            //this.$message.error(res.message);
-          }
-        });
-      },
-      getArticleData() {
-        let $this = this;
-        this.articleList.list = [];
-        apiIndex.articlelist(this.articleList.orderType).then(res => {
-          if (res.status == 200) {
-            if (res.result.length > 0) {
-              let userIds = [];
-              res.result.forEach((item, idx) => {
-                item.authorInfo = {
-                  aid: '',
-                  name: '',
-                  orgInfo: '',
-                  avatar: '',
-                  code: '',
-                  sex: null,
-                };
-                userIds.push(item.sysCreateAid);
-                if (idx == 0) {
-                  $this.articleList.first = item;
-                } else {
-                  $this.articleList.list.push(item);
-                }
-              });
-              // console.log(res.result, 'res.result');
-              this.loadAuthorInfo(res.result, userIds);
-            }
-          } else {
-            console.log('加载文章错误：' + res.error);
-          }
-        });
-      },
-      changeArticleOrder(val) {
-        this.articleList.orderType = val;
-        this.getArticleData();
-      },
-      getQaData() {
-        let params = {
-          pageSize: this.qaList.num,
-          orderAsc: false,
-          orderField: this.qaList.orderType
-        };
-        // if (this.qaList.orderType == 2) {
-        //   params.orderField = 'praises';
-        // }
-        apiQa.indexList(params).then(res => {
-          if (res.status == 200) {
-            if (res.result.length > 0) {
-              let userIds = [];
-              res.result.forEach(item => {
-                item.authorInfo = {
-                  aid: '',
-                  name: '',
-                  orgInfo: '',
-                  avatar: '',
-                  code: '',
-                  sex: null,
-                };
-                userIds.push(item.sysCreateAid);
-              });
-              this.qaList.list = res.result;
-              this.loadAuthorInfo(res.result, userIds);
-            }
-          } else {
-            console.log('加载问答错误：' + res.error);
-          }
-          //console.log(res)
-        });
-      },
-      changeQaOrder(val) {
-        this.qaList.orderType = val;
-        this.getQaData();
-      },
-      loadCouserTeacher(list, ids) {
-        let that = this;
-        // 先查课程关联教师iD
-        apiCourse.getTeacherByCourseIDs(ids).then(cres => {
-          if (cres.status == 200) {
-            let userIds = [];
-            list.forEach((item, index) => {
-              cres.result.some(courseTeahcer => {
-                if (courseTeahcer.courseId == item.id) {
-                  if (courseTeahcer.teacherIds) {
-                    userIds.push(courseTeahcer.teacherIds[0]);
-                    item.authorInfo.aid = courseTeahcer.teacherIds[0];
-                    item.authorInfo.name = courseTeahcer.names[0];
-                    if (item.authorInfo.name == 'BOE教师') {
-                      item.authorInfo.name = '';
-                    }
-                  }
-                  return true;
-                } else {
-                  return false;
-                }
-              });
-            });
-            //that.loadCourseAuthorInfo(list, userIds);
-          }
-        });
-      },
-      loadCourseAuthorInfo(list, ids) {
-        //加载作者信息，头像，机构信息
-        if (ids.length == 0) {
-          return;
-        }
-        const noReapetIds = [...new Set(ids)];
-        apiUser.getByIds(ids).then(res => {
-          if (res.status == 200) {
-            list.forEach((item, index) => {
-              res.result.some(author => {
-                if (author.aid == item.authorInfo.aid) {
-                  item.authorInfo = author;
-
-                  return true;
-                } else {
-                  return false;
-                }
-              });
-            });
-          } else {
-            console.log('加载用户信息失败:' + res.error);
-          }
-        });
-      },
-      loadAuthorInfo(list, ids) {
-        //加载作者信息，头像，机构信息
-        if (ids.length == 0) {
-          return;
-        }
-        const noReapetIds = [...new Set(ids)];
-        apiUser.getByIds(ids).then(res => {
-          if (res.status == 200) {
-            list.forEach((item, index) => {
-              res.result.some(author => {
-                if (author.aid == item.sysCreateAid) {
-                  item.authorInfo = author;
-                  return true;
-                } else {
-                  return false;
-                }
-              });
-            });
-          } else {
-            console.log('加载用户信息失败:' + res.error);
-          }
-        });
-      },
-      jumpRouter(item) {
-        this.$router.push({
-          path: '/qa/answer',
-          query: {
-            id: item.id
-          }
-        });
       }
-    }
-  }
+    },
+    orderTypeFilter(val) {
+      this.courseList.orderType = val;
+      this.pageIndex = 1;
+      this.getCourseData();
+    },
+    nextPage() {
+      this.pageIndex += 1;
+      if (this.isNext) {
+        this.getCourseData(this.pageIndex);
+      }
+    },
+    getCourseData(pageIndex) {
+      this.isNext = false;
+      let { orderType, num } = this.courseList;
+      let course = {
+        pageSize: 6,
+        device: 1,
+        orderField: orderType == 1 ? "" : "studys",
+        orderAsc: false,
+        topOrder: true,
+        pageIndex: pageIndex,
+      };
+
+      apiIndex.courselist(course).then((res) => {
+        if (res.status == 200 && res.result.length > 0) {
+          let courseIds = [];
+          res.result.forEach((item) => {
+            item.authorInfo = {
+              aid: "",
+              name: "",
+              orgInfo: "",
+              avatar: "",
+              code: "",
+              sex: null,
+            };
+            courseIds.push(item.id);
+          });
+          this.loadCouserTeacher(res.result, courseIds);
+          this.courseList.list = res.result;
+          //this.couname = res.result.list.name;
+          // if (res.result.count - pageIndex * num < 8) {
+          //   this.pageIndex = 0;
+          // }
+          // this.isNext = true;
+
+          // }
+        } else {
+          console.log("加载课程信息失败:" + res.error);
+        }
+      });
+
+      // apiCourse.list({orderType,num,device:1}).then(res => {
+      //     if(res.status==200){
+      //       if(res.result.length>0){
+      //         let courseIds=[];
+      //         res.result.forEach(item=>{
+      //           item.authorInfo={aid:'',name:'',orgInfo:'',avatar:'',code:''};
+      //           courseIds.push(item.id);
+      //         })
+      //         this.loadCouserTeacher(res.result,courseIds);
+      //         this.courseList.list=res.result;
+      //       }
+      //     }else{
+      //       console.log('加载课程信息失败:'+res.error);
+      //     }
+      //   })
+    },
+    changeCaseOrder(val) {
+      this.caseList.orderType = val;
+      this.getCaseData();
+    },
+    getCaseData() {
+      apiIndex.cases(this.caseList.orderType).then((res) => {
+        if (res.status == 200) {
+          if (res.result.length > 0) {
+            let userIds = [];
+            res.result.forEach((item) => {
+              item.authorInfo = {
+                aid: "",
+                name: "",
+                orgInfo: "",
+                avatar: "",
+                code: "",
+                sex: null,
+              };
+
+              if (item.authorId && item.authorId != "") {
+                userIds.push(item.authorId);
+              }
+            });
+            this.caseList.list = res.result;
+            this.loadCaseAuthorInfo(res.result, userIds);
+          }
+          // this.caseList.list = res.result;
+        } else {
+          console.log("加载案例错误：" + res.error);
+        }
+      });
+    },
+    loadCaseAuthorInfo(list, ids) {
+      //加载作者信息，头像，机构信息
+      if (ids.length == 0) {
+        return;
+      }
+      const noReapetIds = [...new Set(ids)];
+      apiUser.getByIds(ids).then((res) => {
+        if (res.status == 200) {
+          list.forEach((item, index) => {
+            res.result.some((author) => {
+              if (author.aid == item.authorId) {
+                author.orgInfo = cutOrgNamePath(author.orgInfo, 1);
+                item.authorInfo = author;
+
+                return true;
+              } else {
+                return false;
+              }
+            });
+          });
+        } else {
+          console.log("加载用户信息失败:" + res.error);
+          //this.$message.error(res.message);
+        }
+      });
+    },
+    getArticleData() {
+      let $this = this;
+      this.articleList.list = [];
+      apiIndex.articlelist(this.articleList.orderType).then((res) => {
+        if (res.status == 200) {
+          if (res.result.length > 0) {
+            let userIds = [];
+            res.result.forEach((item, idx) => {
+              item.authorInfo = {
+                aid: "",
+                name: "",
+                orgInfo: "",
+                avatar: "",
+                code: "",
+                sex: null,
+              };
+              userIds.push(item.sysCreateAid);
+              if (idx == 0) {
+                $this.articleList.first = item;
+              } else {
+                $this.articleList.list.push(item);
+              }
+            });
+            // console.log(res.result, 'res.result');
+            this.loadAuthorInfo(res.result, userIds);
+          }
+        } else {
+          console.log("加载文章错误：" + res.error);
+        }
+      });
+    },
+    changeArticleOrder(val) {
+      this.articleList.orderType = val;
+      this.getArticleData();
+    },
+    getQaData() {
+      let params = {
+        pageSize: this.qaList.num,
+        orderAsc: false,
+        orderField: this.qaList.orderType,
+      };
+      // if (this.qaList.orderType == 2) {
+      //   params.orderField = 'praises';
+      // }
+      apiQa.indexList(params).then((res) => {
+        if (res.status == 200) {
+          if (res.result.length > 0) {
+            let userIds = [];
+            res.result.forEach((item) => {
+              item.authorInfo = {
+                aid: "",
+                name: "",
+                orgInfo: "",
+                avatar: "",
+                code: "",
+                sex: null,
+              };
+              userIds.push(item.sysCreateAid);
+            });
+            this.qaList.list = res.result;
+            this.loadAuthorInfo(res.result, userIds);
+          }
+        } else {
+          console.log("加载问答错误：" + res.error);
+        }
+        //console.log(res)
+      });
+    },
+    changeQaOrder(val) {
+      this.qaList.orderType = val;
+      this.getQaData();
+    },
+    loadCouserTeacher(list, ids) {
+      let that = this;
+      // 先查课程关联教师iD
+      apiCourse.getTeacherByCourseIDs(ids).then((cres) => {
+        if (cres.status == 200) {
+          let userIds = [];
+          list.forEach((item, index) => {
+            cres.result.some((courseTeahcer) => {
+              if (courseTeahcer.courseId == item.id) {
+                if (courseTeahcer.teacherIds) {
+                  userIds.push(courseTeahcer.teacherIds[0]);
+                  item.authorInfo.aid = courseTeahcer.teacherIds[0];
+                  item.authorInfo.name = courseTeahcer.names[0];
+                  if (item.authorInfo.name == "BOE教师") {
+                    item.authorInfo.name = "";
+                  }
+                }
+                return true;
+              } else {
+                return false;
+              }
+            });
+          });
+          //that.loadCourseAuthorInfo(list, userIds);
+        }
+      });
+    },
+    loadCourseAuthorInfo(list, ids) {
+      //加载作者信息，头像，机构信息
+      if (ids.length == 0) {
+        return;
+      }
+      const noReapetIds = [...new Set(ids)];
+      apiUser.getByIds(ids).then((res) => {
+        if (res.status == 200) {
+          list.forEach((item, index) => {
+            res.result.some((author) => {
+              if (author.aid == item.authorInfo.aid) {
+                item.authorInfo = author;
+
+                return true;
+              } else {
+                return false;
+              }
+            });
+          });
+        } else {
+          console.log("加载用户信息失败:" + res.error);
+        }
+      });
+    },
+    loadAuthorInfo(list, ids) {
+      //加载作者信息，头像，机构信息
+      if (ids.length == 0) {
+        return;
+      }
+      const noReapetIds = [...new Set(ids)];
+      apiUser.getByIds(ids).then((res) => {
+        if (res.status == 200) {
+          list.forEach((item, index) => {
+            res.result.some((author) => {
+              if (author.aid == item.sysCreateAid) {
+                item.authorInfo = author;
+                return true;
+              } else {
+                return false;
+              }
+            });
+          });
+        } else {
+          console.log("加载用户信息失败:" + res.error);
+        }
+      });
+    },
+    jumpRouter(item) {
+      this.$router.push({
+        path: "/qa/answer",
+        query: {
+          id: item.id,
+        },
+      });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-.xindex-course-image:hover{
-   transform: scale(1.3) translateY(-15px);
-   transition: all 0.6s;
+.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;
+    }
+  }
 }
-.Recent{
+.xindex-course-image:hover {
+  transform: scale(1.3) translateY(-15px);
+  transition: all 0.6s;
+}
+.Recent {
   vertical-align: top;
   width: 22px;
   height: 22px;
 }
-.jinian-medal-img{
+.jinian-medal-img {
   text-align: center;
   padding-top: 10px;
-  .jntext1{
+  .jntext1 {
     height: 56px;
     font-size: 40px;
     font-family: PingFangSC-Semibold, PingFang SC;
@@ -1135,7 +1738,7 @@
     color: #924504;
     line-height: 56px;
   }
-  .jntext2{
+  .jntext2 {
     margin-top: 30px;
     height: 30px;
     font-size: 22px;
@@ -1144,7 +1747,7 @@
     color: #924504;
     line-height: 30px;
   }
-  .jntext3{
+  .jntext3 {
     margin-top: 10px;
     height: 50px;
     font-size: 18px;
@@ -1156,13 +1759,13 @@
 }
 .medalbox {
   background: transparent !important;
-  ::v-deep .el-dialog{
+  ::v-deep .el-dialog {
     background: transparent !important;
-    box-shadow:none !important;
-    .el-dialog__header{
-       display: none !important;
+    box-shadow: none !important;
+    .el-dialog__header {
+      display: none !important;
     }
-    .el-dialog__body{
+    .el-dialog__body {
       //  width: 320px !important;
       //  height: 420px !important;
       background: transparent !important;
@@ -1170,1046 +1773,1033 @@
   }
 }
 
-
-
-.case-inter-orgin{
+.case-inter-orgin {
   // width: 45%;
   // float: left;
   margin-left: 5px;
   line-height: 30px;
   font-size: 14px;
-  color: #6E7B84;
+  color: #6e7b84;
 }
-.tobe-icon{
+.tobe-icon {
   width: 8px;
   height: 14px;
   margin-top: 1.5px;
   margin-left: 8px;
 }
-.grade{
+.grade {
   width: 70px;
   height: 30px;
   display: inline-block;
   font-size: 16px;
-  color: #9D6110;
+  color: #9d6110;
   line-height: 30px;
-  background:url('../../public/images/homeWu/gradebgimg.png')
+  background: url("../../public/images/homeWu/gradebgimg.png");
 }
-  .article-li {
-    display: flex;
-    width: 100%;
+.article-li {
+  display: flex;
+  width: 100%;
 
-    .article-img {
+  .article-img {
+    // width: 252px;
+    // height: 142px;
+    border-radius: 4px;
+
+    // margin-right: 20px;
+    img {
       // width: 252px;
       // height: 142px;
       border-radius: 4px;
+    }
+  }
 
-      // margin-right: 20px;
-      img {
-        // width: 252px;
-        // height: 142px;
-        border-radius: 4px;
+  .article-right {
+    width: 100%;
+
+    .article-info-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #00253e;
+      margin-bottom: 9px;
+      // width: 50%;
+    }
+
+    .article-info-summary {
+      // font-size: 14px;
+      font-weight: 400;
+      color: #6e7b84;
+      margin-bottom: 15px;
+    }
+
+    .article-bottom {
+      display: flex;
+      justify-content: space-between;
+
+      ::v-deep .uavatar {
+        // width: 32px;
+        // height: 32px;
       }
     }
 
-    .article-right {
-      width: 100%;
-
-      .article-info-title {
-        font-size: 16px;
-        font-weight: 600;
-        color: #00253E;
-        margin-bottom: 9px;
-        // width: 50%;
-      }
-
-      .article-info-summary {
-        // font-size: 14px;
-        font-weight: 400;
-        color: #6E7B84;
-        margin-bottom: 15px;
-      }
-
-      .article-bottom {
-        display: flex;
-        justify-content: space-between;
-
-        ::v-deep .uavatar {
-          // width: 32px;
-          // height: 32px;
-        }
-      }
-
-      .article-info-time {
-        font-size: 12px;
-        font-weight: 400;
-        color: #6E7B84;
-      }
+    .article-info-time {
+      font-size: 12px;
+      font-weight: 400;
+      color: #6e7b84;
     }
-
-  }
-  .course-ran-bg {
-    background: linear-gradient(180deg, #d7eaff 1%, #FAFAFA 24%);
   }
+}
+.course-ran-bg {
+  background: linear-gradient(180deg, #d7eaff 1%, #fafafa 24%);
+}
 
-  .personal-panel {
-    position: absolute;
-    right: 8%;
-    top: 105px;
-    // background: url('/images/homeWu/personal-bgimg.png');
-    background: rgba($color: #fff, $alpha: 0.46);
-    border-radius: 8px;
-    z-index: 999;
-    backdrop-filter: blur(10px);
-    text-align: center;
-    color: #fff;
+.personal-panel {
+  position: absolute;
+  right: 8%;
+  top: 105px;
+  // background: url('/images/homeWu/personal-bgimg.png');
+  background: rgba($color: #fff, $alpha: 0.46);
+  border-radius: 8px;
+  z-index: 999;
+  backdrop-filter: blur(10px);
+  text-align: center;
+  color: #fff;
 
-    .personal-img {
+  .personal-img {
+    width: 68px;
+    height: 68px;
+    margin: 0 auto;
+    ::v-deep .el-avatar {
       width: 68px;
       height: 68px;
-      margin: 0 auto;
-      ::v-deep .el-avatar {
-        width: 68px;
-        height: 68px;
-        img{
-          width: 100% !important;
-        }
+      img {
+        width: 100% !important;
       }
     }
+  }
 
-    .personal-name {
-      font-weight: 600;
-      font-size: 18px;
-      margin-top: 12px;
-      color: #333333;
-    }
+  .personal-name {
+    font-weight: 600;
+    font-size: 18px;
+    margin-top: 12px;
+    color: #333333;
+  }
 
-    .personal-info {
-      font-size: 14px;
-      color: #000000;
-      margin-top: 10px;
-    }
-  .last-study-info{
+  .personal-info {
+    font-size: 14px;
+    color: #000000;
+    margin-top: 10px;
+  }
+  .last-study-info {
     display: flex;
     justify-content: space-between;
     padding: 0 10px;
     font-size: 16px;
   }
-    .personal-box {
-      width: 100%;
-      height: 47px;
-      background: #387DF7;
-      border-radius: 4px;
-      line-height: 47px;
-      padding-left: 15px ;
-      padding-right: 32px;
-      box-sizing: border-box;
-      display: flex;
-      // margin-top: 20px;
-      justify-content: space-between;
-      position: relative;
-      .personal-box-img {
-        position: absolute;
-        width: 24px;
-        height: 24px;
-        left: 10px;
-        top: -8px;
-
-      }
-    }
-
-    .personal-ul {
-      display: flex;
-      li{
-        flex: 1;
-        text-align: center;
-      }
-      .label {
-        color: #999999;
-        font-size: 12px;
-        text-align: center;
-      }
-
-      p {
-        margin-top: 5px;
-        text-align: center;
-        color: #000;
-        span {
-          font-size: 22px;
-          text-align: center;
-          color: #333;
-          font-weight: 500;
-        }
-      }
-    }
-  }
-
-  .list-active {
-    display: none;
-    // width: 458px;
-    width: 135%;
-    height: 165px;
-    padding: 20px;
-    background: #FFFFFF;
+  .personal-box {
+    width: 100%;
+    height: 47px;
+    background: #387df7;
+    border-radius: 4px;
+    line-height: 47px;
+    padding-left: 15px;
+    padding-right: 32px;
     box-sizing: border-box;
-    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
-    border-radius: 2px;
-    border: 1px solid #EDEFF0;
-    position: absolute;
-    top: 30px;
-    right:-22px;
-    z-index: 999;
-
-    .list-content {
-      display: flex;
-      padding-bottom: 20px;
-      border-bottom: 1px solid #EDEFF0;
-
-      .list-img {
-        width: 125px;
-        height: 70px;
-        position: relative;
-
-        ::v-deep .el-image {
-          border-radius: 4px !important;
-        }
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
-
-        .course-type {
-          position: absolute;
-          // left: 0;
-          top: 0;
-          right: 0;
-          height: 20;
-          line-height: 20px;
-          font-size: 12px;
-          color: #FFFFFF;
-          padding: 0px 8px;
-          background: #f99000;
-          border-radius: 0px 0px 0px 10px;
-        }
-      }
-
-      .list-text {
-        flex: 1;
-        margin-left: 12px;
-
-        h6 {
-          font-size: 14px;
-          margin: 0px;
-          font-weight: 500;
-          line-height: normal;
-          color: #04243C;
-        }
-
-        span {
-          font-size: 14px;
-          color: #6E7B84;
-        }
-      }
-    }
-
-    .list-bottom {
-      padding-top: 10px;
-
-      ::v-deep .interact-bar-btns {
-        justify-content: space-between !important;
-
-        .interact-bar-btn {
-          margin: 0 !important;
-        }
-      }
-    }
-  }
-
-  .list-info {
+    display: flex;
+    // margin-top: 20px;
+    justify-content: space-between;
     position: relative;
-
-    .span {
-      display: flex;
+    .personal-box-img {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      left: 10px;
+      top: -8px;
     }
   }
 
-  .list-info:hover .list-active {
-    // transition: all 0.5s;
-    display: block;
-  }
-
-  // .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
-  //   width: 108px;
-  //   height: 38px;
-  // }
-
-  .bannbox {
-    width: 100%;
-    height: 520px;
-    text-align: center;
-    filter: blur(5px);
-    z-index: -1;
-    background-size: 100% 100%;
-
-  }
-
-  ::v-deep.swiper-slide .games .swiper-slide-active {
-    text-align: center !important;
-  }
-
-  #container {
-    position: absolute;
-    height: 520px;
-    top: 0;
-    width: 100%;
-  }
-
-  .banner-img {
-    height: 520px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    transform: (-50%, -50%);
-  }
-
-  .course-banner {
-    height: 520px;
-    // background: url('/images/course-banner.png');
-    .swiper-button-prev{
-      height: 38px;
-      // top:auto;
-      padding: 0 16px;
-      background: rgba($color: #000000, $alpha: 0.8) url('../assets/images/icon/ban-left.png') no-repeat;
-      background-size: 12px 18px;
-      background-position: 16px 10px;
-      bottom: 66px;
-      border-radius: 19px 0 0 19px;
+  .personal-ul {
+    display: flex;
+    li {
+      flex: 1;
+      text-align: center;
     }
-    .swiper-button-next{
-      height: 38px;
-      // right: 52.65%;
-      bottom: 66px;
-      top:auto;
-      padding: 0 16px;
-      background: rgba($color: #000000, $alpha: 0.1) url('../assets/images/icon/ban-right.png') no-repeat;
-      background-size: 12px 18px;
-      background-position: 6px 10px;
-      border-radius: 0 19px 19px 0;
+    .label {
+      color: #999999;
+      font-size: 12px;
+      text-align: center;
     }
-    .swiper-pagination-bullets{
-      // background: #000;
-        left: 60px;
-        bottom: 66px;
+
+    p {
+      margin-top: 5px;
+      text-align: center;
+      color: #000;
+      span {
+        font-size: 22px;
+        text-align: center;
+        color: #333;
+        font-weight: 500;
       }
-  ::v-deep .swiper-pagination{
-     line-height: 25px;
-     height: 32px;
-      border-radius: 19px;
+    }
+  }
+}
+
+.list-active {
+  display: none;
+  // width: 458px;
+  width: 135%;
+  height: 165px;
+  padding: 20px;
+  background: #ffffff;
+  box-sizing: border-box;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
+  border-radius: 2px;
+  border: 1px solid #edeff0;
+  position: absolute;
+  top: 30px;
+  right: -22px;
+  z-index: 999;
+
+  .list-content {
+    display: flex;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #edeff0;
+
+    .list-img {
+      width: 125px;
+      height: 70px;
+      position: relative;
+
+      ::v-deep .el-image {
+        border-radius: 4px !important;
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+
+      .course-type {
+        position: absolute;
+        // left: 0;
+        top: 0;
+        right: 0;
+        height: 20;
+        line-height: 20px;
+        font-size: 12px;
+        color: #ffffff;
+        padding: 0px 8px;
+        background: #f99000;
+        border-radius: 0px 0px 0px 10px;
+      }
+    }
+
+    .list-text {
+      flex: 1;
+      margin-left: 12px;
+
+      h6 {
+        font-size: 14px;
+        margin: 0px;
+        font-weight: 500;
+        line-height: normal;
+        color: #04243c;
+      }
+
+      span {
+        font-size: 14px;
+        color: #6e7b84;
+      }
+    }
+  }
+
+  .list-bottom {
+    padding-top: 10px;
+
+    ::v-deep .interact-bar-btns {
+      justify-content: space-between !important;
+
+      .interact-bar-btn {
+        margin: 0 !important;
+      }
+    }
+  }
+}
+
+.list-info {
+  position: relative;
+
+  .span {
+    display: flex;
+  }
+}
+
+.list-info:hover .list-active {
+  // transition: all 0.5s;
+  display: block;
+}
+
+// .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
+//   width: 108px;
+//   height: 38px;
+// }
+
+.bannbox {
+  width: 100%;
+  height: 520px;
+  text-align: center;
+  filter: blur(5px);
+  z-index: -1;
+  background-size: 100% 100%;
+}
+
+::v-deep.swiper-slide .games .swiper-slide-active {
+  text-align: center !important;
+}
+
+#container {
+  position: absolute;
+  height: 520px;
+  top: 0;
+  width: 100%;
+}
+
+.banner-img {
+  height: 520px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  transform: (-50%, -50%);
+}
+
+.course-banner {
+  height: 520px;
+  // background: url('/images/course-banner.png');
+  .swiper-button-prev {
+    height: 38px;
+    // top:auto;
+    padding: 0 16px;
+    background: rgba($color: #000000, $alpha: 0.8)
+      url("../assets/images/icon/ban-left.png") no-repeat;
+    background-size: 12px 18px;
+    background-position: 16px 10px;
+    bottom: 66px;
+    border-radius: 19px 0 0 19px;
+  }
+  .swiper-button-next {
+    height: 38px;
+    // right: 52.65%;
+    bottom: 66px;
+    top: auto;
+    padding: 0 16px;
+    background: rgba($color: #000000, $alpha: 0.1)
+      url("../assets/images/icon/ban-right.png") no-repeat;
+    background-size: 12px 18px;
+    background-position: 6px 10px;
+    border-radius: 0 19px 19px 0;
+  }
+  .swiper-pagination-bullets {
+    // background: #000;
+    left: 60px;
+    bottom: 66px;
+  }
+  ::v-deep .swiper-pagination {
+    line-height: 25px;
+    height: 32px;
+    border-radius: 19px;
     //  background: rgba($color: #000000, $alpha: 0.1);
-     width: auto;
-     left:45%;
-     padding: 0 20px;
-     border-radius: 19px;
-     .swiper-pagination-bullet{
+    width: auto;
+    left: 45%;
+    padding: 0 20px;
+    border-radius: 19px;
+    .swiper-pagination-bullet {
       position: relative;
       width: 25px;
       height: 5px;
-       margin-top: 10px;
-       background: #fff;
-       opacity: 1 !important;
+      margin-top: 10px;
+      background: #fff;
+      opacity: 1 !important;
       // background: rgba($color: #fff, $alpha: 0.5);
       border-radius: 2px;
     }
     .swiper-pagination-bullet::before {
-       content: '';
-       position: absolute;
-       top:-20px;
-       bottom:-20px;
-       left:-2px;
-       right:-2px;
+      content: "";
+      position: absolute;
+      top: -20px;
+      bottom: -20px;
+      left: -2px;
+      right: -2px;
     }
-      .swiper-pagination-bullet-active{
-        height: 5px;
-       opacity: 1 !important;
-       margin-top: 10px;
-        width: 25px;
-        background: #387DF7;
-        // background: rgba($color: #fff, $alpha: 0.8);
-        border-radius: 2px;
-      }
-      .swiper-container{
-        // background-color: rgba($color: #000000, $alpha: 0.2);
-      }
-
+    .swiper-pagination-bullet-active {
+      height: 5px;
+      opacity: 1 !important;
+      margin-top: 10px;
+      width: 25px;
+      background: #387df7;
+      // background: rgba($color: #fff, $alpha: 0.8);
+      border-radius: 2px;
+    }
+    .swiper-container {
+      // background-color: rgba($color: #000000, $alpha: 0.2);
     }
   }
+}
 
-  .case-orginfo {
-    // line-height: 25px;
-    height: 45px;
-  }
+.case-orginfo {
+  // line-height: 25px;
+  height: 45px;
+}
 
-  .three-line-ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    box-sizing: border-box;
-    -webkit-line-clamp: 3;
-    word-break: break-all;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-  }
+.three-line-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+  -webkit-line-clamp: 3;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
 
-  // .case-box {
-  //   display: flex;
-.xindex-case{
+// .case-box {
+//   display: flex;
+.xindex-case {
   &:nth-child(2) {
     .case-top {
-      background: linear-gradient(333deg, #D2DEF3 0%, #B4C4E0 100%);
+      background: linear-gradient(333deg, #d2def3 0%, #b4c4e0 100%);
     }
   }
   &:last-child {
     .case-top {
-      background: linear-gradient(153deg, #A4D3DF 0%, #B4DCE6 100%);
+      background: linear-gradient(153deg, #a4d3df 0%, #b4dce6 100%);
     }
-}
+  }
   .case-index {
-      position: relative;
-      // width: 408px;
-      // height: 396px;
-      background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
-      border-radius: 8px;
-      box-sizing: border-box;
-        margin-right: 0;
-
-      }
-
-      .case-inter {
-        position: absolute;
-         width: 100%;
-        .case-inter-box{
-          display: flex;
-          margin-right: 46px;
-
-      .case-inter-left{
-          flex: 1;
-          // display: flex;
-        }
-        .interact-bar-index{
-          margin-left: auto;
-          ::v-deep .svg-icon{
-             padding-top: 6px;
-          }
-        }
-        }
-
-      }
-
-      .case-top {
-        // height: 120px;
-        background: linear-gradient(153deg, #82A8D1 0%, #A4C5E8 100%);
-        border-radius: 8px 8px 0px 0px;
-      }
-
-      .case-conent {
-        position: absolute;
-        // transform:translate(-50%,-50%);
-        top:-50px;
-        left:0;
-        right:0;
-        bottom: 0;
-        margin: auto;
-        // width: 350px;
-        // height: 274px;
-        background: #FFFFFF;
-        box-shadow: 0px 1px 10px 0px rgba(4, 36, 60, 0.05);
-        border-radius: 4px;
-
-        // padding: 30px;
-        .cast-time {
-          font-size: 14px;
-          color: #6E7B84;
-          height: 24px;
-          .time-one {
-            height: 24px;
-            background: rgba($color: #387DF7, $alpha: 0.1);
-            border-radius: 4px;
-            // padding: 3px 10px;
-            color: #387DF7;
-            font-size: 12px;
-          }
-        }
-
-        .case-title {
-          // height: 48px;
-          // font-size: 16px;
-          font-weight: 600;
-          color: #00253E;
-          // line-height: 24px;
-        }
-
-        .case-text {
-          // height: 60px;
-          // font-size: 14px;
-          color: #6E7B84;
-          // line-height: 20px;
-          // margin-bottom: 30px;
-        }
-
-        ::v-deep .case-info {
-          .interact-bar-btns {
-            justify-content: space-between !important;
-
-            .interact-bar-btn {
-              margin: 0;
-            }
-          }
-        }
-      }
-    }
-  //}
-
-  .casetwo {
-    border: 1px solid #F0F0F0;
-    width: 100%;
-    height: 245px;
-    margin-bottom: 15px;
     position: relative;
-    background-color: #fff;
-
-    .case-top {
-      height: 70px;
-      background-image: linear-gradient(to right, #b8c7e2, #d0dcf3);
-    }
+    // width: 408px;
+    // height: 396px;
+    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
+    border-radius: 8px;
+    box-sizing: border-box;
+    margin-right: 0;
   }
 
-  // .qa-dai{
-  //   color: #5da1ff;
-  // }
-  .Uxtext {
-    font-weight: 450;
-    margin-top: 5px;
-    margin-left: 15px;
-    font-size: 14px;
-    color: #3d3d3d;
-    cursor: pointer;
-    position: relative;
-  }
-
-  .uxicon {
-    font-size: 10px;
+  .case-inter {
     position: absolute;
-    top: -14px;
-    left: 98%;
-  }
-
-  .text-status1 {
-    // padding:3px;
-    color: #1ea0fa;
-  }
-
-  .text-status2 {
-    // padding: 3px;
-    color: #00aa00;
-  }
-
-  .text-status3 {
-    // padding: 3px;
-    color: #588afc;
-    margin-left: -10px;
-  }
-
-  .qa-yi {
-    color: blue;
-  }
-
-  .el-card {
-    border: 1px solid #f0f0f0;
-  }
-
-  .portal-content {
-    font-family: 'Noto Sans SC';
-  }
-
-  // .one-line-ellipsis {
-  //     width: 100%;
-  //     white-space: nowrap;
-  //     word-break: break-all;
-  //     text-overflow: ellipsis;
-  //     display: -webkit-box;
-  //     -webkit-box-orient: vertical;
-  //     -webkit-line-clamp: 1; /* 这里是超出几行省略 */
-
-  // }
-  .two-line-ellipsis {
-    display: -webkit-box;
-    // white-space:pre-wrap;
-    overflow: hidden;
-    // text-overflow:ellipsis;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    box-sizing: border-box;
-  }
-
-  .course-card {
-    // padding: 30px;
-    padding-bottom: 22px;
-    // width: 410px;
-    // margin-bottom: 30px;
-    // margin-right: 36px;
-    box-sizing: border-box;
-    position: relative;
-    background-color: #ffffff;
-
-    .course-image-box {
-      position: relative;
-      .course-type {
-        position: absolute;
-        top: 0px;
-        right: 0px;
-        width: 60px;
-        height: 24px;
-        line-height: 24px;
-        text-align: center;
-        background-color: #f99000;
-        border-radius: 2px 4px 2px 14px;
-        font-size: 12px;
-        color: #ffffff;
-        -moz-user-select: none;
-        /*火狐*/
-        -webkit-user-select: none;
-        /*webkit浏览器*/
-        -ms-user-select: none;
-        /*IE10*/
-        -khtml-user-select: none;
-        /*早期浏览器*/
-        user-select: none;
-      }
-
-      .course-type-title {
-        position: absolute;
-        top: 5px;
-        right: 0px;
-        width: 90px;
-        height: 30px;
-        line-height: 30px;
-        text-align: center;
-        color: #ffffff;
-        -moz-user-select: none;
-        /*火狐*/
-        -webkit-user-select: none;
-        /*webkit浏览器*/
-        -ms-user-select: none;
-        /*IE10*/
-        -khtml-user-select: none;
-        /*早期浏览器*/
-        user-select: none;
-      }
-
-      .course-flag {
-        height: 26px;
-        position: absolute;
-        top: 15px;
-        right: 0;
-      }
-
-      .course-tip {
-        width: 100%;
-        height: 26px;
-        position: absolute;
-        bottom: 0;
-        padding: 0 10px;
-        color: #fff;
-        font-size: 14px;
-
-        .course-study-count {
-          float: left;
-        }
-
-        .course-time {
-          float: right;
-        }
-      }
-    }
-
-    .course-title {
-      margin: 16px 0 16px 0;
-      height: 44px;
-      -moz-user-select: none;
-      /*火狐*/
-      -webkit-user-select: none;
-      /*webkit浏览器*/
-      -ms-user-select: none;
-      /*IE10*/
-      -khtml-user-select: none;
-      /*早期浏览器*/
-      user-select: none;
-    }
-  .course-title-box{
-    display: flex;
-
-    .interact-bar-index{
-
-    }
-  }
-    .course-author {
-      // margin: 5px 15px;
-      // padding-bottom: 10px;
+    width: 100%;
+    .case-inter-box {
       display: flex;
-      justify-content: space-between;
+      margin-right: 46px;
 
-      .course-author-left {
-        font-size: 14px;
-        color: #6E7B84;
-        -moz-user-select: none;
-        /*火狐*/
-        -webkit-user-select: none;
-        /*webkit浏览器*/
-        -ms-user-select: none;
-        /*IE10*/
-        -khtml-user-select: none;
-        /*早期浏览器*/
-        user-select: none;
-      }
-    }
-
-    .study-num {
-      font-size: 14px;
-      color: #6E7B84;
-      // margin-left: 12px;
-      -moz-user-select: none;
-      /*火狐*/
-      -webkit-user-select: none;
-      /*webkit浏览器*/
-      -ms-user-select: none;
-      /*IE10*/
-      -khtml-user-select: none;
-      /*早期浏览器*/
-      user-select: none;
-    }
-
-    .course-score {
-      padding: 10px 15px;
-      height: 40px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      // border-top: 1px solid #ccc;
-      .course-score-star {
+      .case-inter-left {
         flex: 1;
+        // display: flex;
+      }
+      .interact-bar-index {
+        margin-left: auto;
+        ::v-deep .svg-icon {
+          padding-top: 6px;
+        }
       }
     }
   }
 
-  .modules {
-    margin-top: 20px;
-    // width: 100%;
-    display: flex;
+  .case-top {
+    // height: 120px;
+    background: linear-gradient(153deg, #82a8d1 0%, #a4c5e8 100%);
+    border-radius: 8px 8px 0px 0px;
+  }
 
-    .modules-title {
-      .modules-text {
-        height: 28px;
-        font-size: 20px;
-        font-family: PingFangSC-Semibold-, PingFangSC-Semibold;
-        font-weight: 700;
-        color: #333333;
-      }
+  .case-conent {
+    position: absolute;
+    // transform:translate(-50%,-50%);
+    top: -50px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    // width: 350px;
+    // height: 274px;
+    background: #ffffff;
+    box-shadow: 0px 1px 10px 0px rgba(4, 36, 60, 0.05);
+    border-radius: 4px;
 
-      .recommend {
-        vertical-align: text-bottom;
-        height: 26px;
-      }
-
-      .quyer-tag {
-        margin-left: 15px;
-
-        a {
-          color: #333333;
-          font-size: 14px;
-          margin: 0 15px;
-          display: inline-block;
-          text-decoration: none;
-          outline: none;
-        }
-
-        .current {
-          width: 44px;
-          height: 26px;
-          background: #387DF7;
-          border-radius: 4px;
-          color: #fff;
-          line-height: 26px;
-          text-align: center;
-        }
-
-        // .current::after {
-        //   content: '';
-        //   width: 18px;
-        //   height: 2px;
-        //   background-color: #5da1ff;
-        //   margin: 0 auto;
-        //   display: block;
-        // }
-      }
-
-      .more {
-        float: right;
-        margin-top: 7px;
-        margin-right: 30px;
-        color: #333333;
-        font-size: 14px;
+    // padding: 30px;
+    .cast-time {
+      font-size: 14px;
+      color: #6e7b84;
+      height: 24px;
+      .time-one {
+        height: 24px;
+        background: rgba($color: #387df7, $alpha: 0.1);
+        border-radius: 4px;
+        // padding: 3px 10px;
+        color: #387df7;
+        font-size: 12px;
       }
     }
 
-    .modules-list {
-      margin-top: 30px;
+    .case-title {
+      // height: 48px;
+      // font-size: 16px;
+      font-weight: 600;
+      color: #00253e;
+      // line-height: 24px;
+    }
 
-      // margin-bottom: 15px;
-      // margin-right: 36px;
-      .case-card {
-        // width: 593px;
-        margin-bottom: 15px;
+    .case-text {
+      // height: 60px;
+      // font-size: 14px;
+      color: #6e7b84;
+      // line-height: 20px;
+      // margin-bottom: 30px;
+    }
 
-        .case-info-image-box {
-          position: relative;
+    ::v-deep .case-info {
+      .interact-bar-btns {
+        justify-content: space-between !important;
 
-          .case-info {
-            width: 385px;
+        .interact-bar-btn {
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+//}
 
-            .case-info-title {
-              font-size: 18px;
-              color: #343434;
-              margin-bottom: 5px;
+.casetwo {
+  border: 1px solid #f0f0f0;
+  width: 100%;
+  height: 245px;
+  margin-bottom: 15px;
+  position: relative;
+  background-color: #fff;
 
-              .case-info-time {
-                font-size: 12px;
-                color: #999999;
-                float: right;
-                margin-top: 8px;
-              }
-            }
+  .case-top {
+    height: 70px;
+    background-image: linear-gradient(to right, #b8c7e2, #d0dcf3);
+  }
+}
 
-            .case-info-summary {
+// .qa-dai{
+//   color: #5da1ff;
+// }
+.Uxtext {
+  font-weight: 450;
+  margin-top: 5px;
+  margin-left: 15px;
+  font-size: 14px;
+  color: #3d3d3d;
+  cursor: pointer;
+  position: relative;
+}
+
+.uxicon {
+  font-size: 10px;
+  position: absolute;
+  top: -14px;
+  left: 98%;
+}
+
+.text-status1 {
+  // padding:3px;
+  color: #1ea0fa;
+}
+
+.text-status2 {
+  // padding: 3px;
+  color: #00aa00;
+}
+
+.text-status3 {
+  // padding: 3px;
+  color: #588afc;
+  margin-left: -10px;
+}
+
+.qa-yi {
+  color: blue;
+}
+
+.el-card {
+  border: 1px solid #f0f0f0;
+}
+
+.portal-content {
+  font-family: "Noto Sans SC";
+}
+
+// .one-line-ellipsis {
+//     width: 100%;
+//     white-space: nowrap;
+//     word-break: break-all;
+//     text-overflow: ellipsis;
+//     display: -webkit-box;
+//     -webkit-box-orient: vertical;
+//     -webkit-line-clamp: 1; /* 这里是超出几行省略 */
+
+// }
+.two-line-ellipsis {
+  display: -webkit-box;
+  // white-space:pre-wrap;
+  overflow: hidden;
+  // text-overflow:ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  box-sizing: border-box;
+}
+
+.course-card {
+  // padding: 30px;
+  padding-bottom: 22px;
+  // width: 410px;
+  // margin-bottom: 30px;
+  // margin-right: 36px;
+  box-sizing: border-box;
+  position: relative;
+  background-color: #ffffff;
+
+  .course-image-box {
+    position: relative;
+    .course-type {
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      width: 60px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      background-color: #f99000;
+      border-radius: 2px 4px 2px 14px;
+      font-size: 12px;
+      color: #ffffff;
+      -moz-user-select: none;
+      /*火狐*/
+      -webkit-user-select: none;
+      /*webkit浏览器*/
+      -ms-user-select: none;
+      /*IE10*/
+      -khtml-user-select: none;
+      /*早期浏览器*/
+      user-select: none;
+    }
+
+    .course-type-title {
+      position: absolute;
+      top: 5px;
+      right: 0px;
+      width: 90px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      color: #ffffff;
+      -moz-user-select: none;
+      /*火狐*/
+      -webkit-user-select: none;
+      /*webkit浏览器*/
+      -ms-user-select: none;
+      /*IE10*/
+      -khtml-user-select: none;
+      /*早期浏览器*/
+      user-select: none;
+    }
+
+    .course-flag {
+      height: 26px;
+      position: absolute;
+      top: 15px;
+      right: 0;
+    }
+
+    .course-tip {
+      width: 100%;
+      height: 26px;
+      position: absolute;
+      bottom: 0;
+      padding: 0 10px;
+      color: #fff;
+      font-size: 14px;
+
+      .course-study-count {
+        float: left;
+      }
+
+      .course-time {
+        float: right;
+      }
+    }
+  }
+
+  .course-title {
+    margin: 16px 0 16px 0;
+    height: 44px;
+    -moz-user-select: none;
+    /*火狐*/
+    -webkit-user-select: none;
+    /*webkit浏览器*/
+    -ms-user-select: none;
+    /*IE10*/
+    -khtml-user-select: none;
+    /*早期浏览器*/
+    user-select: none;
+  }
+  .course-title-box {
+    display: flex;
+
+    .interact-bar-index {
+    }
+  }
+  .course-author {
+    // margin: 5px 15px;
+    // padding-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+
+    .course-author-left {
+      font-size: 14px;
+      color: #6e7b84;
+      -moz-user-select: none;
+      /*火狐*/
+      -webkit-user-select: none;
+      /*webkit浏览器*/
+      -ms-user-select: none;
+      /*IE10*/
+      -khtml-user-select: none;
+      /*早期浏览器*/
+      user-select: none;
+    }
+  }
+
+  .study-num {
+    font-size: 14px;
+    color: #6e7b84;
+    // margin-left: 12px;
+    -moz-user-select: none;
+    /*火狐*/
+    -webkit-user-select: none;
+    /*webkit浏览器*/
+    -ms-user-select: none;
+    /*IE10*/
+    -khtml-user-select: none;
+    /*早期浏览器*/
+    user-select: none;
+  }
+
+  .course-score {
+    padding: 10px 15px;
+    height: 40px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    // border-top: 1px solid #ccc;
+    .course-score-star {
+      flex: 1;
+    }
+  }
+}
+
+.modules {
+  margin-top: 20px;
+  // width: 100%;
+  display: flex;
+
+  .modules-title {
+    .modules-text {
+      height: 28px;
+      font-size: 20px;
+      font-family: PingFangSC-Semibold-, PingFangSC-Semibold;
+      font-weight: 700;
+      color: #333333;
+    }
+
+    .recommend {
+      vertical-align: text-bottom;
+      height: 26px;
+    }
+
+    .quyer-tag {
+      margin-left: 15px;
+
+      a {
+        color: #333333;
+        font-size: 14px;
+        margin: 0 15px;
+        display: inline-block;
+        text-decoration: none;
+        outline: none;
+      }
+
+      .current {
+        width: 44px;
+        height: 26px;
+        background: #387df7;
+        border-radius: 4px;
+        color: #fff;
+        line-height: 26px;
+        text-align: center;
+      }
+
+      // .current::after {
+      //   content: '';
+      //   width: 18px;
+      //   height: 2px;
+      //   background-color: #5da1ff;
+      //   margin: 0 auto;
+      //   display: block;
+      // }
+    }
+
+    .more {
+      float: right;
+      margin-top: 7px;
+      margin-right: 30px;
+      color: #333333;
+      font-size: 14px;
+    }
+  }
+
+  .modules-list {
+    margin-top: 30px;
+
+    // margin-bottom: 15px;
+    // margin-right: 36px;
+    .case-card {
+      // width: 593px;
+      margin-bottom: 15px;
+
+      .case-info-image-box {
+        position: relative;
+
+        .case-info {
+          width: 385px;
+
+          .case-info-title {
+            font-size: 18px;
+            color: #343434;
+            margin-bottom: 5px;
+
+            .case-info-time {
               font-size: 12px;
-              color: #666666;
-              height: 82px;
-              line-height: 18px;
+              color: #999999;
+              float: right;
+              margin-top: 8px;
             }
           }
 
-          img {
-            width: 160px;
-            height: 105px;
-            position: absolute;
-            top: 5px;
-            right: 0;
+          .case-info-summary {
+            font-size: 12px;
+            color: #666666;
+            height: 82px;
+            line-height: 18px;
           }
         }
 
-        .case-info-box {
-          .case-info {
-            .case-info-title {
-              font-size: 18px;
-              color: #343434;
-              margin-bottom: 5px;
-
-              .case-info-time {
-                font-size: 12px;
-                color: #999999;
-                float: right;
-                margin-top: 8px;
-              }
-            }
-
-            .case-info-summary {
-              font-size: 12px;
-              color: #666666;
-              height: 82px;
-              line-height: 18px;
-            }
-          }
-        }
-
-        .case-other-info {
-          height: 40px;
-          margin-top: 10px;
-          display: flex;
-          justify-content: space-between;
+        img {
+          width: 160px;
+          height: 105px;
+          position: absolute;
+          top: 5px;
+          right: 0;
         }
       }
 
-      .article-card {
-        //width: 100%;
-        background: #fff;
-        // padding: 30px;
-        border-radius: 8px;
+      .case-info-box {
+        .case-info {
+          .case-info-title {
+            font-size: 18px;
+            color: #343434;
+            margin-bottom: 5px;
 
-        .article-card-left {
+            .case-info-time {
+              font-size: 12px;
+              color: #999999;
+              float: right;
+              margin-top: 8px;
+            }
+          }
 
-          // float: left;
-          .article-card-box {
+          .case-info-summary {
+            font-size: 12px;
+            color: #666666;
+            height: 82px;
+            line-height: 18px;
+          }
+        }
+      }
 
-            .article-info-image-box {
-              border-radius: 4px;
-              .article-info {
-                height: 400px;
+      .case-other-info {
+        height: 40px;
+        margin-top: 10px;
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+
+    .article-card {
+      //width: 100%;
+      background: #fff;
+      // padding: 30px;
+      border-radius: 8px;
+
+      .article-card-left {
+        // float: left;
+        .article-card-box {
+          .article-info-image-box {
+            border-radius: 4px;
+            .article-info {
+              height: 400px;
+
+              .article-info-title {
+                font-size: 16px;
+                color: #00253e;
+                font-weight: 500;
+                margin-bottom: 5px;
+                margin-top: 5px;
+              }
+
+              .article-info-summary {
+                font-size: 14px;
+                color: #6e7b84;
+                height: 160px;
+                line-height: 22px;
+              }
+            }
+
+            img {
+              width: 470px;
+              height: 330px;
+              //  width: 100%;
+              // height: 100%;
+            }
+          }
+        }
+      }
+
+      .article-card-right {
+        // float: right;
+        // width: 68%;
+        flex: 1;
+        margin-left: 28px;
+
+        .article-card-box {
+          // height: 160px;
+          margin-bottom: 16px;
+          padding-bottom: 16px;
+
+          &:last-child {
+            margin-bottom: 0px;
+            padding-bottom: 0px;
+          }
+
+          .article-info-box {
+            .article-info {
+              display: flex;
+
+              .article-image {
+                // width: 150px;
+                // height: 150px;
+                // margin-right: 10px;
+                width: 140px;
+                height: 105px;
+                margin-top: 10px;
+                margin-left: 20px;
+              }
+
+              .article-body {
+                flex: 1;
 
                 .article-info-title {
-                  font-size: 16px;
-                  color: #00253E;
-                  font-weight: 500;
+                  font-size: 18px;
+                  color: #343434;
                   margin-bottom: 5px;
-                  margin-top: 5px;
+
+                  .article-info-time {
+                    font-size: 12px;
+                    color: #999999;
+                    float: right;
+                    margin-top: 8px;
+                    font-weight: 500;
+                  }
                 }
 
                 .article-info-summary {
+                  padding-top: 9px;
                   font-size: 14px;
-                  color: #6E7B84;
-                  height: 160px;
-                  line-height: 22px;
+                  color: #666666;
+                  height: 43px;
+                  line-height: 18px;
+                  font-weight: 500;
+                  margin-bottom: 20px;
                 }
               }
-
-              img {
-                width: 470px;
-                height: 330px;
-                //  width: 100%;
-                // height: 100%;
-              }
             }
           }
         }
 
-        .article-card-right {
-          // float: right;
-          // width: 68%;
-          flex: 1;
-          margin-left: 28px;
-
-          .article-card-box {
-            // height: 160px;
-            margin-bottom: 16px;
-            padding-bottom: 16px;
-
-            &:last-child {
-              margin-bottom: 0px;
-              padding-bottom: 0px;
-            }
-
-            .article-info-box {
-              .article-info {
-                display: flex;
-
-                .article-image {
-                  // width: 150px;
-                  // height: 150px;
-                  // margin-right: 10px;
-                  width: 140px;
-                  height: 105px;
-                  margin-top: 10px;
-                  margin-left: 20px;
-                }
-
-                .article-body {
-                  flex: 1;
-
-                  .article-info-title {
-                    font-size: 18px;
-                    color: #343434;
-                    margin-bottom: 5px;
-
-                    .article-info-time {
-                      font-size: 12px;
-                      color: #999999;
-                      float: right;
-                      margin-top: 8px;
-                      font-weight: 500;
-                    }
-                  }
-
-                  .article-info-summary {
-                    padding-top: 9px;
-                    font-size: 14px;
-                    color: #666666;
-                    height: 43px;
-                    line-height: 18px;
-                    font-weight: 500;
-                    margin-bottom: 20px;
-                  }
-                }
-              }
-            }
-          }
-
-          .article-card-box:not(:last-child) {
-            border-bottom: 1px solid #ededed;
-          }
-        }
-
-        .article-other-info {
-          display: flex;
+        .article-card-box:not(:last-child) {
+          border-bottom: 1px solid #ededed;
         }
       }
 
+      .article-other-info {
+        display: flex;
+      }
+    }
 
+    .qa-card {
+      // width: 298px;
+      // height: 320px;
+      // padding: 30px;
+      box-sizing: border-box;
+      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
+      border-radius: 8px;
+      // margin-right: 36px;
+      background: #fff;
 
-        .qa-card {
-          // width: 298px;
-          // height: 320px;
-          // padding: 30px;
-          box-sizing: border-box;
-          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
-          border-radius: 8px;
-          // margin-right: 36px;
-          background: #fff;
+      &:last-child {
+        margin-right: 0;
+      }
 
-          &:last-child {
-            margin-right: 0;
-          }
-
-          .qa-top {
-            & span:first-child {
-              height: 24px;
-              background: rgba($color: #387DF7, $alpha: 0.05);
-              // padding: 3px 10px;
-              border-radius: 4px;
-              font-size: 12px;
-              color: #387DF7;
-              // margin-right: 46px;
-            }
-
-            span {
-              // font-size: 14px;
-              color: #6E7B84;
-            }
-          }
-
-          .qa-center {
-            position: relative;
-            // margin-top: 20px;
-            // width: 238px;
-            // height: 152px;
-            background: rgba($color: #04243C, $alpha: 0.04);
-            border-radius: 4px;
-
-            // padding: 20px;
-            .qa-views {
-              position: absolute;
-              color: #6E7B84;
-              // font-size: 14px;
-              // left: 20px;
-              // bottom: 20px;
-
-            }
-          }
-
-          .qa-char {
-            display: flex;
-          }
+      .qa-top {
+        & span:first-child {
+          height: 24px;
+          background: rgba($color: #387df7, $alpha: 0.05);
+          // padding: 3px 10px;
+          border-radius: 4px;
+          font-size: 12px;
+          color: #387df7;
+          // margin-right: 46px;
         }
 
+        span {
+          // font-size: 14px;
+          color: #6e7b84;
+        }
+      }
+
+      .qa-center {
+        position: relative;
+        // margin-top: 20px;
+        // width: 238px;
+        // height: 152px;
+        background: rgba($color: #04243c, $alpha: 0.04);
+        border-radius: 4px;
+
+        // padding: 20px;
+        .qa-views {
+          position: absolute;
+          color: #6e7b84;
+          // font-size: 14px;
+          // left: 20px;
+          // bottom: 20px;
+        }
+      }
+
+      .qa-char {
+        display: flex;
+      }
     }
   }
+}
 </style>
diff --git a/src/views/portal/article/Index.vue b/src/views/portal/article/Index.vue
index 6c2ee664..801d6e0a 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="leftBox">
+              <div class="title">U选小课堂</div>
+              <div class="jy">项目简介</div>
+              <div class="msg">
+                于22年首推，是一个面向全集团员工开放的职业通识类数字化培养项目，旨在帮助员工开阔眼界、加厚职业素养。在原有外部精选通用力课程基础上，2023年引入创新专区，以新鲜的话题、新颖的形式，带给全员丰富、有趣的学习体验。
+              </div>
+              <div class="bottom"></div>
+            </div>
+            <div class="rightBox">
+              <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: 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;
+    }
+  }
+}
 .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..af54ade8 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: 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;
+    }
+  }
+}
 .fieldbox{
 
   display: flex;
diff --git a/src/views/portal/course/Index.vue b/src/views/portal/course/Index.vue
index 9a16264c..792acd10 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">
@@ -39,7 +39,7 @@
                     <a v-for="one in oneList" @click="handleOptionClick(one,oneList,1)"  class="option-item" :class="{'option-active':one.checked}">{{one.name}}</a>
                     <a class="option-border"> </a>
                     <a class="option-item">
-                      <span @click="jumUX()" class="Uxtext" style=""> U选小课堂
+                      <span @click="uClassClick" class="Uxtext" style=""> U选小课堂
                           <span class="uxicon">
                             <svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
                           </span>
@@ -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,20 @@ 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;
+      }
+    },
+    uClassClick(){
+      this.showUClass = true;
+    },
     saveLocalFilters(){
         let typeCodeList=[];
         this.stagList.forEach(item=>{
@@ -1154,6 +1217,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: 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;
+    }
+  }
+}
 .couresstartTime{
   line-height: 26px;
   height: 26px;
diff --git a/src/views/portal/follow/index.vue b/src/views/portal/follow/index.vue
index b418fe14..f95e1d83 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: 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;
+    }
+  }
+}
     .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..8f1e81fe 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: 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;
+    }
+  }
+}
 .four-line-ellipsis{
   display: -webkit-box;
   // white-space:pre-wrap;