vue 图片分页

  <div class="activities phone">
          <!-- 动态 -->
          <div
            class="activity"
            v-for="(item, index) in imgList.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )"
            :key="index"
          >
            <!-- 动态图片 -->
            <div class="act-image-wrapper">
              <div class="img-shadow"></div>
              <img
                :src="item.url"
                class="imgCss"
                alt=""
                @click="gotoPage(item)"
              />
            </div>
            <!-- 动态元数据，包括发表日期和评论数量 -->
            <div class="activity-content">
              <!-- 动态标题 -->
              <h2 class="act-title" @click="gotoPage(item)">
                {{ item.title }}
              </h2>
              <!-- 动态内容摘要 -->
              <article @click="gotoPage(item)">
                {{ item.article }}
              </article>

              <div class="meta" @click="gotoPage(item)">
                <p class="date-published">
                  <i class="far fa-calendar"></i> {{ item.time }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- 分页 -->
        <br />
        <br />
        <div class="block phone">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout=" prev, pager, next"
            :total="totalNum"
          >
          </el-pagination>
        </div>

data() {
    return {
      currentPage: 1, //默认显示第一页
      pageSize: 5, //默认每页显示10条
      totalNum: 15, //总页数
      imgList: [
        {
          title: this.$t("home.t36"),
          url: require("@/assets/images/greekBudget.jpg"),
          article: this.$t("home.t37"),
          name: "greekBudget",
          time: this.$t("home.t44"),
        },
        {
          title: this.$t("EU.t1"),
          url: require("@/assets/images/EUCouncil.webp"),
          article: this.$t("EU.t2"),
          name: "EUCouncil",
          time: "",
        },
        {
          title: this.$t("SETE.t1"),
          url: require("@/assets/images/SETE.png"),
          article: this.$t("SETE.t2"),
          name: "SETE",
          time: this.$t("SETE.t3"),
        },
        {
          title: this.$t("logistics.t1"),
          url: require("@/assets/images/logistics.webp"),
          article: this.$t("logistics.t2"),
          name: "logistics",
          time: this.$t("logistics.t3"),
        },
        {
          title: this.$t("hellenistical.t1"),
          url: require("@/assets/images/hellenistical.jpg"),
          article: this.$t("hellenistical.t2"),
          name: "hellenistical",
          time: this.$t("hellenistical.t3"),
        },
        {
          title: this.$t("economic.t1"),
          url: require("@/assets/images/economic2.jpg"),
          article: this.$t("economic.t3"),
          name: "economic",
          time: this.$t("economic.t2"),
        },
        {
          title: this.$t("femalePresident.t1"),
          url: require("@/assets/images/femalePresident1.jpg"),
          article: this.$t("femalePresident.t3"),
          name: "femalePresident",
          time: this.$t("femalePresident.t2"),
        },
        {
          title: this.$t("port.t1"),
          url: require("@/assets/images/port1.png"),
          article: this.$t("port.t4"),
          name: "port",
          time: this.$t("port.t3"),
        },
        {
          title: this.$t("VisaIncrease.t1"),
          url: require("@/assets/images/VisaIncrease.png"),
          article: this.$t("VisaIncrease.t2"),
          name: "VisaIncrease",
          time: "",
        },
        {
          title: this.$t("DebtRelief.t1"),
          url: require("@/assets/images/DebtRelief.webp"),
          article: this.$t("DebtRelief.t4"),
          name: "DebtRelief",
          time: this.$t("DebtRelief.t2"),
        },
        {
          title: this.$t("agreement.t1"),
          url: require("@/assets/images/agreement1.jpg"),
          article: this.$t("agreement.t4"),
          name: "agreement",
          time: this.$t("agreement.t2"),
        },
        {
          title: this.$t("Shanghai.t1"),
          url: require("@/assets/images/Shanghai1.jpg"),
          article: this.$t("Shanghai.t4"),
          name: "Shanghai",
          time: this.$t("Shanghai.t2"),
        },
        {
          title: this.$t("cooperation.t1"),
          url: require("@/assets/images/cooperation1.jpg"),
          article: this.$t("cooperation.t4"),
          name: "cooperation",
          time: this.$t("cooperation.t2"),
        },
        {
          title: this.$t("VisitGreece.t1"),
          url: require("@/assets/images/VisitGreece1.jpg"),
          article: this.$t("VisitGreece.t4"),
          name: "VisitGreece",
          time: this.$t("VisitGreece.t2"),
        },
        {
          title: this.$t("SouthEurope.t1"),
          url: require("@/assets/images/SouthEurope1.jpg"),
          article: this.$t("SouthEurope.t4"),
          name: "SouthEurope",
          time: this.$t("SouthEurope.t2"),
        },
      ],
    };
  },
 created() {
    this.totalNum = this.imgList.length;

  },
methods: {  // 跳转页面
    gotoPage(item) {
      this.$router.push(item.name);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val; //动态改变
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val; //动态改变
    },}

.activity {
        // overflow: hidden;
        transition: 0.4s;
        width: 97% !important;
        background: #f4f6fa;
        overflow-x: hidden;
        /* 动态图片容器 */
        .act-image-wrapper {
          height: auto;
          width: 100%;
          overflow: hidden;
          /* 抵消activity的padding */
          margin-bottom: 0;
          position: relative;
          .img-shadow {
            z-index: 2;
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
            min-height: 300px;
            background: #030d37;
            opacity: 0.7;
          }
          .imgCss {
            width: 100%;
            height: 300px;
            min-height: 300px;
            object-fit: cover;
          }
        }
        .activity-content {
          width: 89%;
          height: 280px;
          margin: 0 auto;
          /* 动态标题 */
          .act-title {
            text-align: left;
            width: 100%;
            height: 68px;
            font-size: 24px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #273056;
            line-height: 34px;
            letter-spacing: 1px;
            margin-top: 22px;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          /* 动态摘要 */
          article {
            width: 100%;
            height: 112px;
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #8086a0;
            line-height: 28px;
            text-align: initial;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
          }
          .meta {
            width: 100%;
            height: 28px;
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #8086a0;
            line-height: 28px;
            margin-top: 20px;
            text-align: initial;
          }
        }
      }
      /* 动态鼠标移上时 */
      .activity:hover {
        //     transform: translateY(-20px) scale(1.05);
        //     box-shadow: 0px 0px 36px rgba(0, 0, 0, 0.1);
        background: #030d37;

        .img-shadow {
          display: none;
        }
        .act-title {
          color: #ffffff;
        }
        article {
          color: #b3bada;
        }
        .meta {
          color: #b3bada;
        }
      }