feat:考试列表布局

ZhangXianQiang

2024-06-04 ba6fc3d1957fac8d11f5d9107919dd7cf1bace6f

feat:考试列表布局

 components.d.ts

@@ -11,10 +11,14 @@
    ElButton: typeof import('element-plus/es')['ElButton']
    ElCard: typeof import('element-plus/es')['ElCard']
    ElCol: typeof import('element-plus/es')['ElCol']
    ElInput: typeof import('element-plus/es')['ElInput']
    ElPagination: typeof import('element-plus/es')['ElPagination']
    ElRow: typeof import('element-plus/es')['ElRow']
    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
    ElTable: typeof import('element-plus/es')['ElTable']
    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
    ElTabPane: typeof import('element-plus/es')['ElTabPane']
    ElTabs: typeof import('element-plus/es')['ElTabs']
    ExamInfoDialog: typeof import('./src/components/ExamInfoDialog/index.vue')['default']
    Header: typeof import('./src/components/Header/index.vue')['default']
    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']

 src/views/exam-list/data-list/index.vue

New file
@@ -0,0 +1,15 @@
<template>
  <div class="list-container w-full h-full">
    <el-scrollbar>

    </el-scrollbar>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

 src/views/exam-list/index.vue

@@ -1,18 +1,57 @@
<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">
                <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" />
                  <el-button type="primary" class="ml-4">搜索</el-button>
                </div>

              </div>
              <div class="card-main grow my-5">
                <DataList></DataList>
              </div>

              <div class="card-footer flex justify-center mb-7">
                <el-pagination background layout="prev, pager, next" :total="1000" />
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
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';
const activeName = ref('1');
const searchText = ref('');

const handleClick = (tab, event) => {
};
</script>

<style lang="scss" scoped>
:deep(.el-tabs__nav-wrap:after) {
  display: none;
}

</style>