script setup 页头import Header from componentsHeadervue; 无限滚动import computed ref from vueconst count = ref25const loading = reffalseconst noMore = computed = countvalue = 1000const disabled = computed

<script setup>
import Header from '../../components/Header.vue';
import { computed, ref } from 'vue';
import { ElContainer, ElHeader, ElMain, ElDivider } from 'element-plus';

const count = ref(25);
const loading = ref(false);
const noMore = computed(() => count.value >= 1000);
const disabled = computed(() => loading.value || noMore.value);
const load = () => {
  loading.value = true;
  setTimeout(() => {
    count.value += 5;
    loading.value = false;
  }, 2000);
};
</script>
<template>
  <div class="common-layout">
    <ElContainer>
      <ElHeader>
        <Header />
      </ElHeader>
      <ElMain>
        <div class="Catalogue">
          <div class="C-region">
            <span>地区：</span>
            <ul>
              <li>全部</li>
              <li>中国</li>
              <li>日本</li>
              <li>欧美</li>
            </ul>
          </div>
          <ElDivider style="float: left;margin: 0;" />
          <div class="C-versions">
            <span>版本：</span>
            <ul>
              <li>全部</li>
              <li>TV</li>
              <li>剧场版</li>
              <li>OVA</li>
              <li>特摄</li>
            </ul>
          </div>
          <ElDivider style="float: left;margin: 0;" />
          <div class="C-initial">
            <span>首字母：</span>
            <ul>
              <li>全部</li>
              <li>A</li>
              <li>B</li>
              <li>C</li>
              <li>D</li>
              <li>E</li>
              <li>F</li>
              <li>G</li>
              <li>H</li>
              <li>I</li>
              <li>J</li>
              <li>K</li>
              <li>L</li>
              <li>M</li>
              <li>N</li>
              <li>O</li>
              <li>P</li>
              <li>Q</li>
              <li>R</li>
              <li>S</li>
              <li>T</li>
              <li>U</li>
              <li>V</li>
              <li>W</li>
              <li>X</li>
              <li>Y</li>
              <li>Z</li>
            </ul>
          </div>
          <ElDivider style="float: left;margin: 0;" />
          <div class="C-years">
            <span>年份：</span>
            <ul>
              <li>全部</li>
              <li>2023</li>
              <li>2022</li>
              <li>2021</li>
              <li>2020</li>
              <li>2019</li>
              <li>2018</li>
              <li>2017</li>
              <li>2016</li>
              <li>2015</li>
              <li>2014</li>
              <li>2013</li>
              <li>2012</li>
              <li>2011</li>
              <li>2010</li>
              <li>2009</li>
              <li>2008</li>
              <li>2007</li>
              <li>2006</li>
              <li>2005</li>
              <li>2004</li>
              <li>2003</li>
              <li>2002</li>
              <li>2001</li>
              <li>2000</li>
              <li>1999</li>
              <li>1998</li>
              <li>1997</li>
              <li>1996</li>
              <li>1995</li>
              <li>1994</li>
              <li>1993</li>
              <li>1992</li>
              <li>1991</li>
              <li>1990</li>
            </ul>
          </div>
          <ElDivider style="float: left;margin: 0;" />
          <div class="C-quarter">
            <span>季度：</span>
            <ul>
              <li>全部</li>
              <li>1月</li>
              <li>4月</li>
              <li>7月</li>
              <li>10月</li>
            </ul>
          </div>
          <ElDivider style="float: left;margin: 0;" />
          <div class="C-state">
            <span>状态：</span>
            <ul>
              <li>全部</li>
              <li>连载</li>
              <li>完结</li>
              <li>未播放</li>
            </ul>
          </div>
          <ElDivider style="float: left;margin: 0;" />
          <div class="C-type">
            <span>类型：</span>
            <ul>
              <li>全部</li>
              <li>校园</li>
              <li>热血</li>
              <li>BL</li>
              <li>爱情</li>
              <li>百合</li>
              <li>战斗</li>
              <li>竞技</li>
              <li>青春</li>
              <li>励志</li>
              <li>治愈</li>
              <li>抑郁</li>
              <li>运动</li>
              <li>冒险</li>
              <li>后宫</li>
              <li>异世界</li>
              <li>推理</li>
              <li>奇幻</li>
              <li>恐怖</li>
              <li>职场</li>
              <li>伪娘</li>
              <li>偶像</li>
              <li>泡面番</li>
              <li>乙女</li>
              <li>其他</li>
            </ul>
          </div>
          <ElDivider style="float: left;margin: 0;" />
          <div class="C-sort">
            <span>排序：</span>
            <ul>
              <li>全部</li>
              <li>播放量</li>
              <li>爱心量</li>
              <li>评分</li>
            </ul>
          </div>
        </div>
        <ElDivider style="float: left;margin: 0;" />
        <div class="infinite-list-wrapper" style="overflow: auto">
          <ul v-infinite-scroll="load" class="list" :infinite-scroll-disabled="disabled">
            <li v-for="i in count" :key="i" class="list-item">动漫{{ i }}</li>
          </ul>
          <p v-if="loading">Loading...</p>
          <p v-if="noMore">No more</p>
        </div>
      </ElMain>
    </ElContainer>
  </div>
</template>
<style scoped>
.el-header {
  --el-header-padding: 0;
}

.el-main {
  --el-main-padding: 0;
  height: 1750px;
}

.Catalogue {
  width: 100%;
  height: 400px;
  text-align: center;
}

.C-region,
.C-versions,
.C-initial,
.C-years,
.C-quarter,
.C-state,
.C-type,
.C-sort {
  float: left;
  width: 100%;
  height: 50px;
}

.C-years ul {
  display: -webkit-box;
  overflow-x: scroll;
  overflow-y: hidden;
  padding-bottom: 1px;
}

.Catalogue span {
  float: left;
  width: 80px;
  height: 50px;
  line-height: 50px;
  background-color: #409eaa;
}

.Catalogue li {
  float: left;
  line-height: 25px;
  margin-top: 12.5px;
  width: 60px;
  height: 25px;
  margin-left: 5px;
  background-color: #409eaa;
  border-radius: 3px;
}

.Catalogue li:hover {
  background: rgba(64, 158, 170, 0.7);
}

::-webkit-scrollbar {
  height: 10px;
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
}

.infinite-list-wrapper {
  float: left;
  width: 100%;
  height: 1330px;
  text-align: center;
}

.infinite-list-wrapper .list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list-wrapper .list-item {
  float: left;
  margin: 10px 18px;
  width: 18%;
  height