列表页样式更改

src/views/trainingVideo/List.vue

@@ -2,7 +2,7 @@
 import { computed, nextTick, onMounted , ref , watch} from 'vue';
 import { useRoute , useRouter} from "vue-router";
 import {apiClassifyList,apiTagList,apiVideoList} from '@/api/trainingVideoApi';
-import { Search } from '@element-plus/icons-vue';
+import { ArrowLeftBold, ArrowRightBold, Search } from '@element-plus/icons-vue';
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
 const route = useRoute()
 const router = useRouter()
@@ -97,6 +97,17 @@ function getVideoList(){
         }
     })
 }
+function changePage(type){
+    const page = currentIndex.value
+    if(type==='minus'){
+        if(page===1) return 
+        handleCurrentChange(page-1)
+    }
+    if(type==='add'){
+        if(page===Math.ceil(total.value/15)) return 
+        handleCurrentChange(page+1)
+    }
+}
 function handleCurrentChange(page){
     currentIndex.value = page
     getVideoList()
@@ -127,55 +138,67 @@ onMounted(()=>{
 
 <template>
     <div class="video-list-wrap">
-        <div class="classify-box select">
-            <span style="align-self:center;white-space: nowrap;">分类:</span>
-            <div class="list" :class="{'expand':isClassifyListExpand}">
-                <span class="list-item" :class="{'active':choosedClassify.ClassifyId===0}"
-                    @click="changeClassify({ClassifyId:0})">全部</span>
-                <el-popover v-for="item in classifyList" :key="item.ClassifyId" :width="220">
-                    <div class="sub-list" v-if="item.Children.length">
-                        <span class="list-item" :class="{'active':choosedSubClassify.ClassifyId===subItem.ClassifyId}"
-                            v-for="subItem in item.Children" :key="subItem.ClassifyId"
-                            @click="changeClassify(subItem,'sub')">
-                            {{subItem.ClassifyName}}</span>
-                    </div>
-                    <template #reference>
-                        <span class="list-item" :class="{'active':choosedClassify.ClassifyId===item.ClassifyId}"
-                            @click="changeClassify(item)">{{item.ClassifyName}}
-                        </span>
-                    </template>
-                </el-popover>
-                
-            </div>
-            <div class="expand-btn" v-show="boxWidth<=classifyWidth" @click="isClassifyListExpand = !isClassifyListExpand">
-                {{isClassifyListExpand?'收起':'展开'}}
-                <el-icon :class="{'expand':isClassifyListExpand}"><ArrowRight /></el-icon>
-            </div>
-        </div>
-        <div class="tag-box select">
-            <span style="align-self:center;white-space: nowrap;">标签:</span>
-            <div class="list" :class="{'expand':isTagListExpand}">
-                <span class="list-item" :class="{'active':choosedTags.length===0}"
-                    @click="choosedTags = []">全部</span>
-                <span class="list-item" :class="{'active':choosedTags.findIndex(i=>i.TagId===item.TagId)!==-1}"
-                    v-for="item in tagList" :key="item.TagId" @click="changeTags(item)">{{item.TagName}}</span>
+        <div class="select-wrap">
+            <div class="classify-box select">
+                <span style="align-self:center;white-space: nowrap;">分类:</span>
+                <div class="list" :class="{'expand':isClassifyListExpand}">
+                    <span class="list-item" :class="{'active':choosedClassify.ClassifyId===0}"
+                        @click="changeClassify({ClassifyId:0})">全部</span>
+                    <el-popover v-for="item in classifyList" :key="item.ClassifyId" :width="220">
+                        <div class="sub-list" v-if="item.Children.length">
+                            <span class="list-item" :class="{'active':choosedSubClassify.ClassifyId===subItem.ClassifyId}"
+                                v-for="subItem in item.Children" :key="subItem.ClassifyId"
+                                @click="changeClassify(subItem,'sub')">
+                                {{subItem.ClassifyName}}</span>
+                        </div>
+                        <template #reference>
+                            <span class="list-item" :class="{'active':choosedClassify.ClassifyId===item.ClassifyId}"
+                                @click="changeClassify(item)">{{item.ClassifyName}}
+                            </span>
+                        </template>
+                    </el-popover>
+                    
+                </div>
+                <div class="expand-btn" v-show="boxWidth<=classifyWidth" @click="isClassifyListExpand = !isClassifyListExpand">
+                    {{isClassifyListExpand?'收起':'展开'}}
+                    <el-icon :class="{'expand':isClassifyListExpand}"><ArrowRightBold /></el-icon>
+                </div>
             </div>
-            <div class="expand-btn" v-show="boxWidth<=tagWidth" @click="isTagListExpand = !isTagListExpand">
-                {{isTagListExpand?'收起':'展开'}}
-                <el-icon :class="{'icon-expand':isTagListExpand}"><ArrowRight /></el-icon>
+            <div class="tag-box select">
+                <span style="align-self:center;white-space: nowrap;">标签:</span>
+                <div class="list" :class="{'expand':isTagListExpand}">
+                    <span class="list-item" :class="{'active':choosedTags.length===0}"
+                        @click="choosedTags = []">全部</span>
+                    <span class="list-item" :class="{'active':choosedTags.findIndex(i=>i.TagId===item.TagId)!==-1}"
+                        v-for="item in tagList" :key="item.TagId" @click="changeTags(item)">{{item.TagName}}</span>
+                </div>
+                <div class="expand-btn" v-show="boxWidth<=tagWidth" @click="isTagListExpand = !isTagListExpand">
+                    {{isTagListExpand?'收起':'展开'}}
+                    <el-icon :class="{'icon-expand':isTagListExpand}"><ArrowRightBold /></el-icon>
+                </div>
             </div>
         </div>
         <div class="select-box">
-            <el-select v-model="selectValue" placeholder="Select" size="large" @change="handleCurrentChange(1)">
+            <!-- <el-select v-model="selectValue" placeholder="Select" size="large" @change="handleCurrentChange(1)">
                 <el-option label="最新" value="New"/>
                 <el-option label="最热" value="Hot"/>
-            </el-select>
+            </el-select> -->
+            <el-radio-group v-model="selectValue" size="large" @change="handleCurrentChange(1)" fill="#0052D9">
+                <el-radio-button label="New">最新</el-radio-button>
+                <el-radio-button label="Hot">最热</el-radio-button>
+            </el-radio-group>
             <span class="path" style="margin-left: 20px;">
                 <span>{{choosedClassify.ClassifyName||''}}
                     <span v-if="choosedSubClassify.ClassifyId">/</span>
                     {{choosedSubClassify.ClassifyName||''}}
                 </span>
             </span>
+            <div class="quick-pagination">
+                <span>{{currentIndex}}/{{Math.ceil(total/15)}}</span>
+                <el-icon @click="changePage('minus')"><ArrowLeftBold /></el-icon>
+                <el-icon @click="changePage('add')"><ArrowRightBold /></el-icon>
+
+            </div>
         </div>
         <div class="list-box">
             <div class="list-item" v-for="item in videoList" :key="item.VideoId" @click="gotoVideoDetail(item)">
@@ -220,24 +243,40 @@ onMounted(()=>{
 
 <style scoped lang="scss">
 .video-list-wrap{
-    padding:30px 120px 30px 120px;
+   /*  padding:30px 120px 30px 120px; */
     box-sizing: border-box;
     background-color:#F2F6FA;
     height: calc(100vh - 60px);
     display: flex;
     flex-direction: column;
+    .select-wrap{
+        background-color: #fff;
+        padding:30px 120px;
+    }
     .select{
         display: flex;
         margin-bottom:20px;
         position:relative;
+        &:last-child{
+            margin-bottom: 0;
+        }
         .expand-btn{
             position: absolute;
-            right:-48px;
+            left:100%;
             top:0;
             bottom: 0;
             padding:8px;
-            background-color: #F2F6FA;
+            /* background-color: #F2F6FA; */
+            /* border: 1px solid gray; */
+            white-space: nowrap;
+            font-size: 14px;
+            cursor: pointer;
+            .el-icon{
+                font-size: 14px;
+                color:#0052D9;
+                vertical-align: bottom;
             }
+        }
         .icon-expand{
             transform: rotate(90deg);
         }
@@ -266,16 +305,36 @@ onMounted(()=>{
             }
         }
     }
+    .select-box{
+        padding:0 120px;
+        margin-top: 20px;
+        display: flex;
+        align-items: center;
+        :deep(.el-radio-button__inner:hover){
+            color: #0052D9 !important;
+        }
+        .quick-pagination{
+            margin-left: auto;
+            font-size: 14px;
+            .el-icon{
+                margin-left: 10px;
+                cursor: pointer;
+            }
+        }
+    }
     .list-box{
         margin-top: 20px;
+        padding:0 120px;
         flex: 1;
         overflow-y: auto;
         width:100%;
         display: flex;
         gap: 20px;
+        box-sizing: border-box;
         .list-item{
             width:19%;
-            height: 345px;
+            max-height: 345px;
+            min-width: 225px;
             box-sizing: border-box;
             padding:10px;
             background-color: #fff;
@@ -312,7 +371,8 @@ onMounted(()=>{
     .page-box{
         background-color: #fff;
         box-sizing: border-box;
-        padding:12px;
+        padding:12px 120px;
+
     }
 }
 .el-popper{