diff --git a/src/views/portal/article/Index.vue b/src/views/portal/article/Index.vue
index 22c38d8c..4c3995d7 100644
--- a/src/views/portal/article/Index.vue
+++ b/src/views/portal/article/Index.vue
@@ -122,43 +122,43 @@
     <portalFloatTools></portalFloatTools>
     <div class="uClass">
       <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">
+        <div class="ClassBoxContentx">
+          <img src="../../../assets/images/u_class.png" alt="" class="imgx" />
+          <div class="ContentBoxx">
+            <div class="leftBoxx">
+              <div class="titlex">U选小课堂</div>
+              <div class="jyx">项目简介</div>
+              <div class="msgx">
                 于22年首推，是一个面向全集团员工开放的职业通识类数字化培养项目，旨在帮助员工开阔眼界、加厚职业素养。在原有外部精选通用力课程基础上，2023年引入创新专区，以新鲜的话题、新颖的形式，带给全员丰富、有趣的学习体验。
               </div>
-              <div class="bottom"></div>
+              <div class="bottomx"></div>
             </div>
-            <div class="rightBox">
-              <div class="tyl" @click="tylClick">
-                <div class="tyl_title">
+            <div class="rightBoxx">
+              <div class="tylx" @click="tylClick">
+                <div class="tyl_titlex">
                   <img
                     src="../../../assets/images/dc.png"
                     alt=""
-                    class="tyl_title_img"
+                    class="tyl_title_imgx"
                   />
-                  <span class="tyl_title_msg">通用力专区</span>
+                  <span class="tyl_title_msgx">通用力专区</span>
                 </div>
-                <div class="tyl_jy">加厚职业素养，轻学习、快成长！</div>
-                <div class="tyl_msg">
+                <div class="tyl_jyx">加厚职业素养，轻学习、快成长！</div>
+                <div class="tyl_msgx">
                   内容涵盖：领导力、市场营销、职场技能、财务知识、法律常识、人力资源、经典国学、人文社科
                 </div>
               </div>
-              <div class="cyl" @click="cylClick">
-                <div class="tyl_title">
+              <div class="cylx" @click="cylClick">
+                <div class="tyl_titlex">
                   <img
                     src="../../../assets/images/cyl.png"
                     alt=""
-                    class="tyl_title_img"
+                    class="tyl_title_imgx"
                   />
-                  <span class="tyl_title_msg">创新力专区</span>
+                  <span class="tyl_title_msgx">创新力专区</span>
                 </div>
-                <div class="tyl_jy">激发创新潜力，拓视野、促思考！</div>
-                <div class="tyl_msg">
+                <div class="tyl_jyx">激发创新潜力，拓视野、促思考！</div>
+                <div class="tyl_msgx">
                   内容涵盖：组合创新、单点破局、错位竞争、分形创新、第二曲线、数字化、元宇宙
                 </div>
               </div>
@@ -494,25 +494,25 @@ export default {
   ::v-deep .el-dialog__body {
     padding: 0px;
   }
-  .ClassBoxContent {
+  .ClassBoxContentx {
     width: 100%;
     height: 456px;
     // background: red;
     border-radius: 15px;
-    .ContentBox {
+    .ContentBoxx {
       width: 100%;
       height: 100%;
       position: absolute;
       z-index: 9;
       display: flex;
-      .left,
-      .right {
+      .leftx,
+      .rightx {
         height: calc(100% - 30px);
       }
-      .left {
+      .leftx {
         padding-left: 30px;
         width: 48%;
-        .title {
+        .titlex {
           width: 200px;
           height: 59px;
           line-height: 59px;
@@ -524,30 +524,30 @@ export default {
           padding-top: 5px;
           text-shadow: 0 6px 3px rgba(96, 85, 243, 0.4);
         }
-        .jy {
+        .jyx {
           color: white;
           font-size: 20px;
           margin-top: 87.53px;
           font-weight: 400;
         }
-        .msg {
+        .msgx {
           margin-top: 5px;
           color: rgba(255, 255, 255, 0.85);
           width: 326px;
           text-align: justify;
           line-height: 20px;
         }
-        .bottom {
+        .bottomx {
           width: 100px;
           height: 1px;
           background: rgba(255, 255, 255, 0.85);
           margin-top: 40px;
         }
       }
-      .right {
+      .rightx {
         // padding-left: 10px;
         width: 50%;
-        .tyl {
+        .tylx {
           cursor: pointer;
           width: calc(100% - 20px);
           background: rgba(255, 255, 255, 0.95);
@@ -555,29 +555,29 @@ export default {
           border-radius: 4px;
           height: 160px;
           margin-top: 83px;
-          .tyl_title {
+          .tyl_titlex {
             width: 100%;
             padding-left: 20px;
             padding-top: 20px;
-            .tyl_title_img {
+            .tyl_title_imgx {
               width: 18px;
               height: 18px;
             }
-            .tyl_title_msg {
+            .tyl_title_msgx {
               font-size: 20px;
               margin-left: 10px;
               color: #333333;
               font-weight: 600;
             }
           }
-          .tyl_jy {
+          .tyl_jyx {
             margin-top: 6.5px;
             font-size: 14px;
             font-weight: 600;
             padding-left: 20px;
             color: #333333;
           }
-          .tyl_msg {
+          .tyl_msgx {
             width: 350.36px;
             margin-top: 13px;
             margin-left: 20px;
@@ -588,11 +588,11 @@ export default {
             text-align: justify;
           }
         }
-        .tyl:hover {
+        .tylx:hover {
           border: 0.96px solid rgba(140, 105, 242, 1);
           box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.3);
         }
-        .cyl {
+        .cylx {
           cursor: pointer;
           width: calc(100% - 20px);
           background: rgba(255, 255, 255, 0.95);
@@ -600,29 +600,29 @@ export default {
           border-radius: 4px;
           height: 160px;
           margin-top: 10px;
-          .tyl_title {
+          .tyl_titlex {
             width: 100%;
             padding-left: 20px;
             padding-top: 20px;
-            .tyl_title_img {
+            .tyl_title_imgx {
               width: 18px;
               height: 18px;
             }
-            .tyl_title_msg {
+            .tyl_title_msgx {
               font-size: 20px;
               margin-left: 10px;
               color: #333333;
               font-weight: 600;
             }
           }
-          .tyl_jy {
+          .tyl_jyx {
             margin-top: 6.5px;
             font-size: 14px;
             font-weight: 600;
             padding-left: 20px;
             color: #333333;
           }
-          .tyl_msg {
+          .tyl_msgx {
             width: 350.36px;
             margin-top: 13px;
             margin-left: 20px;
@@ -633,13 +633,13 @@ export default {
             text-align: justify;
           }
         }
-        .cyl:hover {
+        .cylx:hover {
           border: 0.96px solid rgba(140, 105, 242, 1);
           box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.24);
         }
       }
     }
-    .img {
+    .imgx {
       width: 835px;
       margin-left: -1px;
       margin-top: -1px;