最小屏幕大小

src/components/education/custom/course-list.vue

@@ -156,6 +156,9 @@ export default {
   min-width: 1180px;
   max-width: 1600px;
   .course-header {
+    position: relative;
+    top: 0;
+    left: 0;
     display: flex;
     flex-direction: row;
     height: 78px;
@@ -177,6 +180,10 @@ export default {
       }
     }
     .order {
+      position: absolute;
+      // top: 0;
+      left: 880px;
+      width: 200px;
       display: flex;
       flex-direction: row;
       align-items: center;

src/components/education/custom/course-select.vue

 <template>
-  <div class="custom-select-wrapper" style="width: 1300px;overflow:auto;">
- 
-    <div class="department-label">
-      <span
-        v-for="(item, index) in allLabelList"
-        :key="index"
-        class="item"
-        :class="{checked: item.checked}"
-        @click="selectLabel(index)"
-      >
-        <span class="split" :class="{acitve: item.checked}"></span>
-        {{item.name}}
-      </span>
-    </div>
-
-    <!-- 课程分类 -->
-    <div class="course-class">
-      <div class="title">课程分类</div>
-      <div v-if="subLabelList.length" class="item" @click="selectSubLabel(subLabelList[0], 1)">
-        <span class="name" :class="{'active': subLabelList[0].checked}">全部</span>
-      </div>
-      <ul class="check-list">
-        <li 
-          class="sub-item"
-          :class="{'active': item.checked}"
-          v-for="(item, index) in subLabelList.slice(1)" 
+  <div>
+    <div class="custom-select-wrapper" style="overflow:auto;">
+      <div class="department-label" style="width: 1200px;">
+        <span
+          v-for="(item, index) in allLabelList"
           :key="index"
-          @click="selectSubLabel(item, 2)"
+          class="item"
+          :class="{checked: item.checked}"
+          @click="selectLabel(index)"
         >
-          <img v-show="item.checked" src="../../../assets/custom/icon/label-sel.png" alt />
-          <img v-show="!item.checked" src="../../../assets/custom/icon/label-sel-no.png" alt />
+          <span class="split" :class="{acitve: item.checked}"></span>
           {{item.name}}
-        </li>
-      </ul>
-      <div class="right"></div>
+        </span>
+      </div>
     </div>
+    <div class="custom-select-wrapper">
+      <!-- 课程分类 -->
+      <div class="course-class">
+        <div class="title">课程分类</div>
+        <div v-if="subLabelList.length" class="item" @click="selectSubLabel(subLabelList[0], 1)">
+          <span class="name" :class="{'active': subLabelList[0].checked}">全部</span>
+        </div>
+        <ul class="check-list">
+          <li 
+            class="sub-item"
+            :class="{'active': item.checked}"
+            v-for="(item, index) in subLabelList.slice(1)" 
+            :key="index"
+            @click="selectSubLabel(item, 2)"
+          >
+            <img v-show="item.checked" src="../../../assets/custom/icon/label-sel.png" alt />
+            <img v-show="!item.checked" src="../../../assets/custom/icon/label-sel-no.png" alt />
+            {{item.name}}
+          </li>
+        </ul>
+        <div class="right"></div>
+      </div>
 
-    <!-- 课程等级 -->
-    <div class="course-level">
-      <span class="title">课程等级</span>
-      <span
-        class="item"
-        v-for="(item, index) in courseLevel"
-        :key="index"
-        @click="selectLevel(index)"
-      >
-        <span class="name" :class="{active: item.checked}">{{item.name}}</span>
-      </span>
-    </div>
+      <!-- 课程等级 -->
+      <div class="course-level">
+        <span class="title">课程等级</span>
+        <span
+          class="item"
+          v-for="(item, index) in courseLevel"
+          :key="index"
+          @click="selectLevel(index)"
+        >
+          <span class="name" :class="{active: item.checked}">{{item.name}}</span>
+        </span>
+      </div>
 
-    <div class="button-wrapper">
-      <el-button class="add-button" plain size="small" @click="resetCond">重 置</el-button>
-      <el-button class="add-button" size="small" type="primary" @click="search">查 询</el-button>
+      <div class="button-wrapper">
+        <el-button class="add-button" plain size="small" @click="resetCond">重 置</el-button>
+        <el-button class="add-button" size="small" type="primary" @click="search">查 询</el-button>
+      </div>
     </div>
   </div>
 </template>
@@ -257,6 +259,7 @@ export default {
 </script>
 <style lang="less" scoped>
 .custom-select-wrapper {
+  width: 1090px;
   user-select: none;
   .department-label {
     display: flex;
@@ -372,7 +375,7 @@ export default {
     flex-direction: row;
     flex-wrap: wrap;
     margin-top: 14px;
-    margin-right: 80px;
+    margin-right: 40px;
     flex: 1;
     .sub-item {
       cursor: pointer;
@@ -402,8 +405,8 @@ export default {
 .button-wrapper {
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
+  // justify-content: flex-end;
   margin-top: 20px;
-  margin-right: 140px;
+  margin-left: 956px;
 }
 </style>
\ No newline at end of file

src/components/education/custom/select-course-comp.vue

@@ -23,7 +23,7 @@ export default {
 </script>
 <style lang="less" scoped>
   .select-course-wrapper {
-    width: 1300px;
+    // width: 1300px;
     .top-line {
       // width: 120%;
       height: 10px;

src/views/education/edit-custom.vue

@@ -539,7 +539,7 @@ export default {
     top: 125px;
   }
   .step-content {
-    min-width: 1300px;
+    // min-width: 1300px;
     background: #fff;
     z-index: 1001;
     background: #fff;