样式修改

src/assets/styles/portal.scss

@@ -396,6 +396,9 @@ body {margin: 0px;padding: 0px;}
   .xcontent{width: 1100px;}
   .xcontent2{
     width: 1100px;
+    .list {
+      grid-template-columns: repeat(4, 255px);
+    }
   }
   .home-page-right{
     width: 330px;
@@ -470,6 +473,9 @@ body {margin: 0px;padding: 0px;}
   .xcontent{width: 1366px;}
   .xcontent2{
     width: 1366px;
+    .list {
+      grid-template-columns: repeat(4, 332px);
+    }
   }
   .rankimg{
     width:76px;
@@ -513,6 +519,9 @@ body {margin: 0px;padding: 0px;}
   .xcontent{width: 1690px;}
   .xcontent2{
     width: 1690px;
+    .list {
+      grid-template-columns: repeat(4, 400px);
+    }
   }
   .rankimg{
     width:86px;
@@ -555,6 +564,9 @@ body {margin: 0px;padding: 0px;}
   .xcontent{width: 1880px;}
   .xcontent2{
     width: 1846px;
+    .list {
+      grid-template-columns: repeat(4, 445px);
+    }
   }
   .home-page-right{
     width: 395px;

src/views/grateful/GratefulHomePage.vue

@@ -84,10 +84,10 @@
               <router-link to="/grateful/teacherEmpowerment">查看更多</router-link>
             </span>
           </div>
-          <div class="modules-list">
+          <div class="modules-list list">
             <!--内容列表内容-->
             <div v-for="(course, ccidx) in courseList.list" :key="'cc' + ccidx" class="xindex-course"
-              style="position: relative">
+              style="position: relative;margin-right: 0;">
               <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">
@@ -290,8 +290,8 @@ export default {
 
 .gratefulNav {
   display: grid;
-  grid-template-columns: 1.5fr 1fr 1fr;
+  grid-template-columns: 1.6fr 1fr 1fr;
-  grid-gap: 60px;
+  column-gap: 60px;
 
   .navImg {
     img {
@@ -338,7 +338,7 @@ export default {
 }
 
 .xindex-course-image:hover {
-  transform: scale(1.3) translateY(-15px);
+  transform: scale(1.2) translateY(-15px);
   transition: all 0.6s;
 }
 
@@ -358,6 +358,8 @@ export default {
   display: flex;
 
   .modules-title {
+    padding: 0;
+
     .modules-text {
       height: 28px;
       font-size: 20px;
@@ -397,7 +399,6 @@ export default {
     .more {
       float: right;
       margin-top: 7px;
-      margin-right: 30px;
       color: #333333;
       font-size: 14px;
     }
@@ -618,5 +619,10 @@ export default {
       }
     }
   }
+
+  .list {
+    display: grid;
+    justify-content: space-between;
+  }
 }
 </style>

src/views/grateful/TeacherEmpowerment.vue

@@ -4,7 +4,7 @@
     <div class="xindex-content" style="padding: 0">
       <div class="modules xcontent2">
         <div class="xcontent2-main">
-          <div class="modules-list" style="margin-top: 0">
+          <div class="modules-list list" style="margin-top: 0">
             <!--内容列表内容-->
             <div v-for="(course, ccidx) in courseList.list" :key="'cc' + ccidx" class="xindex-course"
               style="position: relative">
@@ -187,7 +187,7 @@ export default {
 
 <style scoped lang="scss">
 .xindex-course-image:hover {
-  transform: scale(1.3) translateY(-15px);
+  transform: scale(1.2) translateY(-15px);
   transition: all 0.6s;
 }
 
@@ -467,5 +467,9 @@ export default {
       }
     }
   }
+  .list {
+    display: grid;
+    justify-content: space-between;
+  }
 }
 </style>