修改课程中心布局

src/components/index.vue

@@ -72,9 +72,9 @@
           <div v-if="oidArray.indexOf(oid) !== -1"><el-switch v-model="typeCheck2"></el-switch><span>按年级显示</span></div>
         </div>
         <div>
-          <div class="main_box">
-            <div style="display:flex;flex-wrap:wrap" v-if="!typeCheck && !typeCheck2">
-              <div class="box_course" v-for="(item, index) in zoneClass" :key="index"  @click="goTo(
+           <div class="main_box">
+            <div :class="zoneClass.length > 5 ? 'claList' : 'claListFlex'" v-if="!typeCheck && !typeCheck2">
+              <div :class="zoneClass.length > 5 ? 'box_course' : 'box_courseFlex'" v-for="(item, index) in zoneClass" :key="index"  @click="goTo(
           '/courseDetail?courseId=' +
           item.courseId +
           '&userid=' +
@@ -147,8 +147,8 @@
             <div v-else>
               <div class="FirstTypeBox" v-for="(type, tindex) in CourseType2" :key="tindex">
                 <div class="title">{{ type.name }}</div>
-                <div style="display: flex;flex-flow: wrap;margin-top: 20px;">
-                  <div class="box_course" v-for="(item, index) in type.course" :key="tindex + '-' + index" @click="goTo(
+                <div class="typeCheckFlex" style="margin-top: 20px;">
+                  <div class="box_courseFlex" v-for="(item, index) in type.course" :key="tindex + '-' + index" @click="goTo(
           '/courseDetail?courseId=' +
           item.courseId +
           '&userid=' +
@@ -1054,9 +1054,10 @@ export default {
   flex-direction: column;
   flex-wrap: nowrap;
   /* margin: 0px 1% 20px; */
-  margin: 0 15px 20px 0;
-  width: 300px;
+  /* margin: 0 15px 20px 0; */
+  /* width: 300px; */
   /* height: 260px; */
+  max-width: 400px;
   /*border: 1px solid #cecece; */
   border-radius: 10px;
   overflow: hidden;
@@ -1414,4 +1415,32 @@ export default {
   margin-right: 7px;
   background-image: url(../assets/icon/course/icon_return2.png);
 } */
+ .claList{
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 30px;
+ }
+ .claListFlex{
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 30px;
+ }
+ .box_courseFlex{
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    /* max-width: 400px; */
+    flex: 1;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
+      0px 2px 1px -1px rgb(0 0 0 / 12%);
+    justify-content: space-between;
+    cursor: pointer;
+ }
+ .typeCheckFlex{
+    display: grid; 
+    grid-template-columns: repeat(5, 1fr); 
+    gap: 30px;
+ }
 </style>