school-file-portal/src/views/TextBook/index.vue

<template>
  <div class="container">
    <div class="bread-container">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>同步教材</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-card class="card-filter">
      <el-form label-width="auto">
        <el-form-item label="学段">
          <el-checkbox-group>
            <el-checkbox-button>小学</el-checkbox-button>
            <el-checkbox-button>初中</el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="年级">
          <el-checkbox-group>
            <el-checkbox-button>一年级</el-checkbox-button>
            <el-checkbox-button>二年级</el-checkbox-button>
            <el-checkbox-button>三年级</el-checkbox-button>
            <el-checkbox-button>四年级</el-checkbox-button>
            <el-checkbox-button>五年级</el-checkbox-button>
            <el-checkbox-button>六年级</el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>


        <el-form-item label="学科">
          <el-checkbox-group>
            <el-checkbox-button>语文</el-checkbox-button>
            <el-checkbox-button>数学</el-checkbox-button>
            <el-checkbox-button>英语</el-checkbox-button>
            <el-checkbox-button>音乐</el-checkbox-button>
            <el-checkbox-button>美术</el-checkbox-button>
            <el-checkbox-button>特殊教育</el-checkbox-button>
            <el-checkbox-button>科学</el-checkbox-button>
            <el-checkbox-button>道德与法治</el-checkbox-button>
            <el-checkbox-button>体育与健康</el-checkbox-button>
            <el-checkbox-button>小学与劳动与技术</el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="版本">
          <el-checkbox-group>
            <el-checkbox-button>人教版</el-checkbox-button>
            <el-checkbox-button>苏教版</el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="教材">
          <el-checkbox-group>
            <el-checkbox-button>语文人教部编版一上年上册</el-checkbox-button>
            <el-checkbox-button>语文人教部编版一上年下册</el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>


        <el-form-item label="类型">
          <el-checkbox-group>
            <el-checkbox-button>全部</el-checkbox-button>
            <el-checkbox-button>课件</el-checkbox-button>
            <el-checkbox-button>精品课堂</el-checkbox-button>
            <el-checkbox-button>作业</el-checkbox-button>
            <el-checkbox-button>试卷</el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="格式">
          <el-checkbox-group>
            <el-checkbox-button>全部</el-checkbox-button>
            <el-checkbox-button>PPT</el-checkbox-button>
            <el-checkbox-button>WORD</el-checkbox-button>
            <el-checkbox-button>PDF</el-checkbox-button>
            <el-checkbox-button>图片</el-checkbox-button>
            <el-checkbox-button>音频</el-checkbox-button>
            <el-checkbox-button>视频</el-checkbox-button>
            <el-checkbox-button>其它</el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </el-card>

    <el-row :gutter="10" style="margin-top: 10px;">
      <el-col :span="6">
        <el-card>
          <template #header>
            <div class="card--left-header">
              <span class="title">目录</span>
            </div>
          </template>

          <el-table :data="tableData" row-key="id" border default-expand-all :show-header="false">
            <el-table-column prop="name" label="Name" />
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="18">
        <el-card>
          <div class="card-right-header">
            <el-table :data="tableSortData" :default-sort="{ prop: 'date', order: 'descending' }">
              <el-table-column prop="date" label="上传时间" sortable width="180" />
              <el-table-column prop="name" label="浏览量" sortable width="180" />
              <el-table-column prop="address" label="下载量" sortable width="180" />
            </el-table>
          </div>

          <div class="book-grid">
            <el-card v-for="item in 6">
              <div class="book-content">
                <img class="file-type" src="@/assets/images/word.png" alt="">
                <img src="@/assets/images/book.png" alt="">
              </div>

              <template #footer>
                <div class="book-title">汉字文化云课堂</div>
                <div class="book-des">
                  <div class="book-teacher">
                    <span>王老师</span>&nbsp;|&nbsp;<span>一年级（2）班</span>
                  </div>
                  <div class="book-view">
                    <span>
                      <el-icon>
                        <View />
                      </el-icon>
                    </span>
                    <span>204</span>
                  </div>
                </div>
              </template>
            </el-card>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { View } from '@element-plus/icons-vue'

const tableData = [
  {
    id: 1,
    name: '全部',
  },
  {
    id: 2,
    name: '我上学了',
  },
  {
    id: 3,
    name: '识字',
    children: [
      {
        id: 31,
        name: '1 天地人',
      },
      {
        id: 32,
        name: '2金木水火土',
      },
    ],
  },
  {
    id: 4,
    name: '汉语拼音',
  },
]

const tableSortData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<style lang="scss" scoped>
.container {
  .bread-container {
    padding: 25px 0;

    :deep(.el-breadcrumb__inner) {
      color: #fff;
      font-size: 16px;
    }

    :deep(.el-breadcrumb__separator) {
      color: #fff;
    }
  }

  .card-filter {
    margin-top: 20px;
  }

  .card--left-header {
    .title {
      font-size: 20px;
    }
  }

  .card-right-header {
    :deep(.el-table__body-wrapper) {
      display: none;
    }
  }

  .book-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 7px;

    .book-content {
      position: relative;

      .file-type {
        position: absolute;
        top: 0;
        left: 0;
        width: 25px;
      }
    }

    .book-title {
      font-size: 16px;
      font-weight: bold;
    }

    .book-des{
      display: flex;
      justify-content: space-between;
      color:#919DA3;
      padding: 5px 0;
    }

  }
}
</style>