浏览代码

样式fix:增加了列表item的宽度,列表设置最小宽度

cxmo 1 年之前
父节点
当前提交
26f7704981
共有 1 个文件被更改,包括 12 次插入7 次删除
  1. 12 7
      src/views/trainingVideo/List.vue

+ 12 - 7
src/views/trainingVideo/List.vue

@@ -82,7 +82,7 @@ let currentClassifyId = computed(()=>{
 
 function getVideoList(){
     apiVideoList({
-        page_size:15,
+        page_size:20,
         current_index:currentIndex.value,
         keyword:keyword.value,
         is_new:selectValue.value==='New',
@@ -104,7 +104,7 @@ function changePage(type){
         handleCurrentChange(page-1)
     }
     if(type==='add'){
-        if(page===Math.ceil(total.value/15)) return 
+        if(page>=Math.ceil(total.value/20)) return 
         handleCurrentChange(page+1)
     }
 }
@@ -194,7 +194,7 @@ onMounted(()=>{
                 </span>
             </span>
             <div class="quick-pagination">
-                <span>{{currentIndex}}/{{Math.ceil(total/15)}}</span>
+                <span>{{currentIndex}}/{{Math.ceil(total/20)}}</span>
                 <el-icon @click="changePage('minus')"><ArrowLeftBold /></el-icon>
                 <el-icon @click="changePage('add')"><ArrowRightBold /></el-icon>
 
@@ -226,7 +226,7 @@ onMounted(()=>{
                 <el-pagination
                     v-model:current-page="currentIndex"
                     layout="total,->,prev,pager,next,jumper" 
-                    :page-size="15" 
+                    :page-size="20" 
                     :total="total"
                     @current-change="handleCurrentChange"
                 >
@@ -311,6 +311,8 @@ onMounted(()=>{
     .select-box{
         padding:0 120px;
         margin-top: 20px;
+        /* margin-left: auto;
+        margin-right: auto; */
         display: flex;
         align-items: center;
         :deep(.el-radio-button__inner:hover){
@@ -326,10 +328,12 @@ onMounted(()=>{
         }
     }
     .list-wrap{
-        padding:20px 120px;
+        padding:20px 20px 20px 120px;
         flex: 1;
         background-color: #f2f6fa;
         overflow-y: auto;
+        box-sizing: border-box;
+        overflow-x: auto;
     }
     .list-box{
         overflow-y: auto;
@@ -338,9 +342,10 @@ onMounted(()=>{
         flex-wrap: wrap;
         gap: 20px;
         box-sizing: border-box;
+        min-width: 1000px;
         .list-item{
-            width:19%;
-            min-width: 225px;
+            width:18%;
+            min-width: 235px;
             box-sizing: border-box;
             padding:10px;
             background-color: #fff;