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">
            <!-- 排序组件 -->
            <JzSort v-model="sortResult" :sortData="sortData" />
          </div>

          <div class="book-grid">
            <el-card v-for="item in 6" :key="item">
              <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-pagination class="book-page" background layout="prev, pager, next, sizes,jumper" :total="1000" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

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

import JzSort from '@/components/JzSort/index.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 sortData = [
  { label: '上传时间', key: 'date' },
  { label: '浏览量', key: 'num1' },
  { label: '下载量', key: 'num2' }
];
const sortResult = ref({}); // 排序结果

// 监听排序结果
watchEffect(() => {
  console.log('===排序 改变了===', sortResult.value);
  // TODO: 排序逻辑
});
</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 {
    padding-bottom: 12px;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 16px;
  }

  .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;
    }
  }

  .book-page {
    margin-top: 20px;
    display: flex;
    justify-content: end
  }
}
</style>