From 98f494cf633e3acf5c20f3e9de0d708f2a6c2045 Mon Sep 17 00:00:00 2001 From: ZhangXianQiang <1135831638@qq.com> Date: 星期五, 05 七月 2024 09:39:59 +0800 Subject: [PATCH] feat:视频浏览 --- src/views/exam-list/index.vue | 85 ++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 81 insertions(+), 4 deletions(-) diff --git a/src/views/exam-list/index.vue b/src/views/exam-list/index.vue index b065285..f83cbaa 100644 --- a/src/views/exam-list/index.vue +++ b/src/views/exam-list/index.vue @@ -1,18 +1,95 @@ <template> - <div class="exam-list-container w-screen h-screen bg-slate-50 flex flex-col"> + <div class="exam-list-container w-screen h-screen bg-slate-50 flex flex-col items-center"> <NormalHeader class="shrink-0"></NormalHeader> - <div class="list-container grow-1"> + <div class="list-container container grow relative"> + <div class="list-content absolute top-0 bottom-0 left-0 right-0 py-4"> + <div class="list-wrapper w-full h-full"> + <el-card class="h-full" :body-style="{ height: '100%' }"> + <div class="card-wrapper w-full h-full flex flex-col px-8 box-border"> + <div class="card-header flex justify-between items-center shrink-0"> + <!-- <div class="header-tab"> + <el-tabs v-model="activeName" @tab-click="handleClick"> + <el-tab-pane label="鍏ㄩ儴" name="1"></el-tab-pane> + <el-tab-pane label="鏈紑濮�" name="2"></el-tab-pane> + <el-tab-pane label="杩涜涓�" name="3"></el-tab-pane> + <el-tab-pane label="宸茬粨鏉�" name="4"></el-tab-pane> + </el-tabs> + </div> --> + + <div class="header-search flex items-center"> + <el-input v-model="searchText" placeholder="璇疯緭鍏ヨ�冭瘯鍚嶇О" :prefix-icon="Search" maxlength="20" /> + <el-button type="primary" class="ml-4" @click="searchData">鎼滅储</el-button> + </div> + + </div> + + <div class="card-main flex-1 my-5 relative"> + <div class="main-content absolute top-0 bottom-0 left-0 right-0" v-loading="loading"> + <DataList :dataList="dataList"></DataList> + </div> + </div> + + <div class="card-footer flex justify-center mb-7 shrink-0"> + <el-pagination background layout="prev, pager, next" :total="dataList.length" + :default-page-size="20" + :currentPage="currentIndex" + :hide-on-single-page="true" + @current-change="handleCurrentChange"/> + </div> + </div> + </el-card> + </div> + </div> </div> </div> </template> <script setup> -import NormalHeader from '@/components/NormalHeader/index.vue'; +import { ref } from 'vue'; +import NormalHeader from '@/components/NormalHeader/index.vue'; +import DataList from './data-list/index.vue'; + +import { Search } from '@element-plus/icons-vue'; + +import { getExamList } from '@/api/modules/exam.js'; + + +const activeName = ref('1'); +const searchText = ref(''); + +const dataList = ref([]); + +const loading = ref(false); + +const getData = () => { + loading.value = true; + getExamList({ examName: searchText.value }).then(res => { + dataList.value = res.data; + loading.value = false; + }).catch(err => { + loading.value = false; + }); +}; + +getData(); + +const searchData = () => { + getData(); +}; + +const handleClick = (tab, event) => { +}; + +const handleCurrentChange = (val) => { + getData(); +} </script> <style lang="scss" scoped> - +:deep(.el-tabs__nav-wrap:after) { + display: none; +} </style> \ No newline at end of file -- Gitblit v1.8.0