uk_front/pages/home/catalogue.vue

<template>
  <div class="com-main com-width-1400 com-margin-auto">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
      <el-breadcrumb-item>Catalogue</el-breadcrumb-item>
    </el-breadcrumb>
    <p class="title">Catalogue Library</p>
    <div class="line"></div>
    <div class="item" v-loading="listLoading">
      <div class="backgroung-img-1" v-show="catalogueList.length > 0">
        <img src="@/assets/img/home/Wood.png" alt="" />
      </div>
      <div class="backgroung-img-2" v-show="catalogueList.length > 4">
        <img src="@/assets/img/home/Wood.png" alt="" />
      </div>
      <div class="backgroung-img-3" v-show="catalogueList.length > 8">
        <img src="@/assets/img/home/Wood.png" alt="" />
      </div>
      <ul>
        <li v-for="item in catalogueList" :key="item.id">
          <a :href="item.filepath" target="_blank">
            <div class="item-img">
              <!-- <img src="@/assets/img/home/Book.png" alt="" /> -->
              <el-image :src="$utils.generateResizedImageUrl(item.img,500)" fit="cover" style="width: 100%; height: 100%"></el-image>
            </div>
            <div class="item-title">
              <p>Promo Collection</p>
              <p>{{ item.title }}</p>
            </div>
            <p class="item-date">{{ item.update_time }}</p>
          </a>
        </li>
      </ul>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
    </div>
    <div v-if="!catalogueList.length">
      <el-empty description="No Data"></el-empty>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      listQuery: {
        page: 1,
        limit: 12,
      },
      catalogueList: [],
      listLoading: true,
    };
  },
  async created() {
    await this.getList();
  },
  methods: {
    getList() {
      this.$axios
        .post("/api/resources/catalogue/list", {
          state: "au",
          page: this.listQuery.page,
          limit: this.listQuery.limit,
        })
        .then((res) => {
          if (res.code === 1) {
            res.result.data.forEach((item) => {
              item.filepath =
                !this.$mediaRegExp.test(item.filepath)
                  ? this.$OSS_PREFIX +
                    item.filepath
                  : item.filepath;
                  item.img =
                !this.$mediaRegExp.test(item.img)
                  ? this.$OSS_PREFIX +
                    item.img
                  : item.img;
            });
            this.catalogueList = res.result.data;
            this.total = res.result.total;
            this.listLoading = false;
          }
          // if(process.client){
          //   this.$nextTick(() => {
          //     window.scroll(0, 0);
          //   });
          // }
        })
        .catch(() => {
          this.listLoading = false;
          this.catalogueList = [];
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  height: 50px;
  font-size: 35px;
  font-family: Proxima Nova;
  font-weight: bold;
  color: #00213b;
  text-align: center;
  line-height: 50px;
}
.line {
  width: 99px;
  height: 4px;
  background: #e90000;
  margin: 15px auto;
}
.item {
  width: 1320px;
  margin: 0 auto;
  position: relative;
  .backgroung-img-1 {
    position: absolute;
    left: -15px;
    top: 330px;
  }
  .backgroung-img-2 {
    position: absolute;
    left: -15px;
    top: 846px;
  }
  .backgroung-img-3 {
    position: absolute;
    left: -15px;
    top: 1363px;
  }
  ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    li {
      margin: 10px 44px 40px 55px;
      a {
        .item-img {
          width: 231px;
          height: 337px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 5px;
          }
        }
        .item-title {
          width: 200px;
          height: 52px;
          line-height: 26px;
          font-size: 18px;
          color: #00213b;
          text-align: center;
          margin: 0 auto;
          margin-top: 45px;
          margin-bottom: 10px;
        }
        .item-date {
          width: 208px;
          line-height: 18px;
          font-size: 14px;
          color: #606e80;
          text-align: center;
          margin: 0 auto;
        }
      }
    }
  }
}
:deep(.el-pagination.is-background) {
  .el-pager {
    li.number {
      background-color: #f8f8f8;
      border-radius: 50%;
      color: #a7a7a7;
    }
    li:not(.disabled).active {
      background-color: #00213b;
      color: #d4d7da;
    }
  }
  .btn-prev,
  .btn-next {
    border-radius: 50%;
    background-color: #fff;
    .el-icon-arrow-left:before {
      content: "";
    }
    .el-icon-arrow-right:before {
      content: "";
    }
  }
}
</style>