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

<template>
  <div class="container">
    <HomeBanner />

    <div class="column">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-card style="height: 290px;">
            <template #header>
              <div class="title">学校动态</div>

              <div class="card-left-header">
                <span>校园资讯常看常新</span>
                <span class="more">
                  <RouterLink to="news">查看更多></RouterLink>
                </span>
              </div>
            </template>

            <ul class="card-left-list">
              <li v-for="item in trendList">
                <span>{{ item.title }}</span>
                <span>{{ parseTime(item.createTime, '{y}-{m}-{d}') }}</span>
              </li>
            </ul>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card style="height: 290px;">
            <template #header>
              <div class="title">同步教材</div>

              <div class="card-right-header">
                <span>数字化教材云平台</span>
                <span class="more">查看更多></span>
              </div>
            </template>

            <div class="card-right-content">
              <el-radio-group v-model="grade" class="grade-radio" @change="firstChange">
                <el-radio-button v-for="item in firstType" :label="item.label" :value="item.id" :key="item.id" />
              </el-radio-group>
              <el-tabs v-model="activeName" type="border-card" @tab-click="secondChange">
                <el-tab-pane v-for="item in secondType" :label="item.label" :name="item.id" :key="item.id"
                  class="class-book">
                  <el-tag v-for="item in threeType" :key="item.id" type="info" @click="gotoInfo(item.id)">{{ item.label
                    }}</el-tag>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="subject">
      <el-card>
        <template #header>
          <div class="title">专题资源</div>
          <div class="card-subject-header">
            <span>助力加强理论学习</span>
            <span class="more">查看更多>></span>
          </div>
        </template>
        <div class="subject-content">
          <el-card v-for="item in resourceList">
            <img :src="item.coverUrl" alt="">
            <template #footer>
              <div class="subject-title">{{ item.catalogName }}</div>
              <div class="subject-date">2024-04-12</div>
            </template>
          </el-card>
        </div>
      </el-card>
    </div>

    <div class="teacher">
      <el-card>
        <template #header>
          <div class="title">校园名师</div>
          <div class="card-teacher-header">
            <span>教育大计老师为本</span>
            <span class="more">查看更多>></span>
          </div>
        </template>

        <ul class="card-teacher-list">
          <li class="item" v-for="item in showList">
            <el-card>
              <img :src="item.avatarUrl" alt="">
              <p class="teacher-name">{{ item.teacherName }}</p>
              <p class="teacher-class">{{ item.gradeName }}</p>
              <p class="teacher-desc" v-html="item.content"></p>
            </el-card>
          </li>
        </ul>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import HomeBanner from './components/HomeBanner.vue'
import { getTrendAPI, getTextbookAPI, getShowAPI, getResourceAPI } from '@/apis/home'
import { parseTime } from '@/utils/utils'

const trendList = ref([])
const getTrendData = async () => {
  const res = await getTrendAPI({
    pageNum: 1,
    pageSize: 5
  })
  trendList.value = res.rows
}

const grade = ref()
const activeName = ref()
const textbookList = ref([])
const firstType = ref([])
const secondType = ref([])
const threeType = ref([])
const getTextbookData = async () => {
  const res = await getTextbookAPI()
  textbookList.value = res.data

  const firstList = res.data[0].children
  firstType.value = firstList
  grade.value = firstType.value[0].id

  const secondList = firstList[0].children
  secondType.value = secondList
  activeName.value = secondType.value[0].id

  const threeList = secondList[0].children
  threeType.value = threeList
}

const firstChange = (val) => {
  const firstList = textbookList.value[0].children
  secondType.value = firstList.filter(item => item.id == val)[0].children
  activeName.value = secondType.value[0].id
}

const secondChange = (tab) => {
  const id = tab.props.name
  threeType.value = secondType.value.filter(item => item.id == id)[0].children
}

const resourceList = ref([])
const getResourceData = async () => {
  const res = await getResourceAPI({
    type: 2,
    pageNum: 1,
    pageSize: 8
  })
  resourceList.value = res.rows
}

const showList = ref([])
const getShowData = async () => {
  const res = await getShowAPI({
    pageNum: 1,
    pageSize: 4
  })
  showList.value = res.rows
}

onMounted(() => {
  getTrendData()
  getTextbookData()
  getResourceData()
  getShowData()
})

const gotoInfo = (id) => {
  console.log('getInfo', id);
}
</script>

<style lang="scss" scoped>
.container {
  .title {
    font-size: 20px;
    font-weight: bold;
  }

  .more {
    font-size: 15px;
    color: #8A8178;
  }

  .column {
    height: 290px;
    margin-top: 20px;

    .card-left-header {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
      color: #8A8178;
    }

    .card-left-list {
      li {
        display: flex;
        justify-content: space-between;
        padding: 7px;
        font-size: 15px;
      }
    }

    .card-right-header {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
      color: #8A8178;
    }

    .grade-radio {
      margin-top: -25px;
      vertical-align: middle;
    }

    .card-right-content {
      padding: 0;

      .class-book {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
      }
    }
  }

  .subject {
    margin-top: 20px;

    .card-subject-header {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
    }

    .subject-content {
      padding: 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 10px;

      img {
        border-radius: 5px;
      }

      .subject-title {
        font-size: 15px;
      }

      .subject-date {
        margin-top: 5px;
        color: #DADADA;
      }
    }
  }

  .teacher {
    margin-top: 20px;

    .card-teacher-header {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
    }

    .card-teacher-list {
      display: flex;
      justify-content: space-between;

      .item {
        flex: 0 1 24%;
        text-align: center;

        .teacher-name {
          line-height: 45px;
          font-size: 18px;
          font-weight: bold;
        }

        .teacher-class {
          line-height: 40px;
          font-size: 17px;
        }

        .teacher-desc {
          font-size: 16px;
          color: #7F7F7F;
          text-align: left;
        }
      }
    }
  }
}
</style>