knowledge/teaching_integration_platform_template/src/views/home/index.vue

<template>
  <div class="loop" v-for="(item, index) in couresData.content" :key="item.id">
    <div class="main" v-if="index % 2 === 0">
      <!-- <div class="course-list">111</div> -->
      <div class="container">
        <div class="left-group">
          <div class="group">
            <Graph :width="848" :height="470" :index="item.id" :id="item.id" />
          </div>
          <div class="footer">
            <div class="left-title">{{ item.name }}</div>
            <div class="go-info" @click="goToCourseInfo(item.id, item.name)"></div>
          </div>
        </div>
        <div class="right-info">
          <div class="title">课程简介</div>
          <div class="info">
            {{ item.description }}
          </div>
          <div class="crous-content">
            <ul>
              <li>总学时：10学时</li>
              <li>章节数：10章</li>
              <li>总学分：2.0分</li>
              <li>知识点总数：33个</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="main" v-else style="background: linear-gradient(to right, #aecaff 60%, #5792ff)">
      <!-- <div class="course-list">111</div> -->
      <div class="container">
        <div class="right-info">
          <div class="title">课程简介</div>
          <div class="info">
            {{ item.description }}
          </div>
          <div class="crous-content">
            <ul>
              <li>总学时：{{ item.classhours }}学时</li>
              <li>章节数：{{ item.totalchapter }}章</li>
              <li>总学分：{{ item.credit }}分</li>
              <li>知识点总分：{{ item.totalKnow }}个</li>
            </ul>
          </div>
        </div>
        <div class="left-group">
          <div class="group">
            <Graph :width="848" :height="470" :index="item.id" :id="item.id" />
          </div>
          <div class="footer">
            <div class="left-title">{{ item.name }}</div>

            <div class="go-info" @click="goToCourseInfo(item.id)"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="get-more">
    <div class="btn" @click="getMore">{{ btnTexst }}</div>
  </div>
</template>

<script lang="ts" setup>
// import KnowledgeGraph from '@/views/professionalProfile/components/KnowledgeGraph.vue'
import Graph from './components/Graph.vue'
import { getCourseList } from '@/api/course'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
interface Page {
  pageNo: number
  pageSize: number
  username: string
  userId: string | number

}
interface item {
  name: string,
  id: string,
  description: string,
  classhours: number,
  totalchapter: number,
  credit: number,
  totalKnow: number
}
interface CouresData {
  content: item[]
  totalcount: number
  [propName: string]: any
}
const Router = useRouter()
const currentPage: Page = reactive({
  pageNo: 1,
  pageSize: 5,
  username: 'xiao1111',
  userId: 3
})
const couresData: CouresData = reactive({
  content: [],
  totalcount: 0,
})
const btnTexst = ref<string>('加载更多')
const getCourseListEvent = async () => {
  if (couresData.content.length && couresData.content.length === couresData.totalcount) {
    btnTexst.value = '没有更多了'
    return
  }
  btnTexst.value = '正在加载'
  const res: any = await getCourseList(currentPage)
  couresData.content = [...couresData.content, ...res.data.list]
  couresData.totalcount = res.data.total
  btnTexst.value = '加载更多'

  console.log(couresData)
}
getCourseListEvent()
const getMore = () => {
  if (btnTexst.value === '正在加载' || btnTexst.value === '没有更多了') return
  currentPage.pageNo += 1
  getCourseListEvent()
}
// 监听滚动事件
window.addEventListener('scroll', function () {
  // 获取当前滚动条的位置
  var scrollTop: number =
    window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop ||
    0
  // 获取视窗的高度
  var windowHeight: number =
    window.innerHeight ||
    document.documentElement.clientHeight ||
    document.body.clientHeight
  // 获取文档的总高度
  var documentHeight: number =
    document.documentElement.scrollHeight || document.body.scrollHeight

  // 判断是否滚动到了页面底部
  if (scrollTop + windowHeight >= documentHeight) {
    getMore()
    console.log('已经滚动到页面底部了！')
    // 在这里可以执行一些操作，比如加载更多内容
  }
})

// 查看课程信息
const goToCourseInfo = (id: string | number, name: string): void => {
  console.log(id);
  Router.push({
    path: '/course',
    query: { id, name }
  })

}
</script>

<style lang="scss" scoped>
.view-container {

  // height: 5000px;
  // background-color: #2080f7;
  .main {
    margin-top: 50px;
  }

  .container {
    width: $base-container-width;
    margin: 0 auto;
    display: flex;

    .left-group {
      position: relative;
      width: 918px;
      height: 623px;
      background-color: pink;
      background: url('../../assets/images/crous-card.png') no-repeat;
      background-size: cover;

      .group {
        position: absolute;
        top: 58px;
        right: 13px;
        width: 848px;
        height: 470px;
        background-color: pink;
        border-radius: 10px;
        overflow: hidden;
      }

      .footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 90px;
        display: flex;

        .go-info {
          height: 100%;
          width: 185px;
          cursor: pointer;
        }

        .left-title {
          flex: 1;
          height: 100%;
          font-size: 32px;
          // text-align: center;
          padding-left: 90px;
          line-height: 90px;
          color: #fff;
        }
      }
    }

    .right-info {
      flex: 1;
      // background-color: skyblue;
      margin-left: 20px;
      padding: 20px;

      .title {
        position: relative;
        height: 72px;
        line-height: 45px;
        font-size: 32px;
        color: #3374ff;
        font-weight: 700;
        margin-left: 30px;
      }

      .title::after {
        position: absolute;
        top: 5px;
        left: -30px;
        content: ' ';
        display: block;
        width: 5px;
        height: 40px;
        background-color: #3374ff;
      }

      .info {
        color: #888888;
        font-size: 24px;
        line-height: 35px;
        height: 390px;
        display: -webkit-box;
        -webkit-line-clamp: 11;
        /* 限制显示3行 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .crous-content {
        width: 100%;
        height: 100px;
        margin-top: 60px;

        ul {
          width: 100%;
          height: 100%;
          display: flex;
          flex-wrap: wrap;

          li {
            height: 40px;
            width: 50%;
            color: #555555;
            font-size: 24px;
          }
        }
      }
    }
  }

  .get-more {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;

    .btn {
      width: 120px;
      height: 40px;
      border: 1px solid #3374ff;
      text-align: center;
      line-height: 40px;
      border-radius: 5px;
      color: #3374ff;
      cursor: pointer;
      transition: all 0.3s;
    }

    .btn:hover {
      transform: scale(1.1);
    }
  }

  .banner {
    width: 100%;
    height: 410px;
    background: url('../../assets/images/banner2.png') no-repeat;
    background-size: cover;

    .title {
      position: absolute;
      top: 200px;
      right: 200px;
      font-size: 48px;
      font-weight: 700;
      color: #fff;
    }
  }
}
</style>