uk_front/pages/home/EDMS.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> EDMS</el-breadcrumb-item>
    </el-breadcrumb>
    <p class="title">EDMS</p>
    <div class="line"></div>
    <div
      class="item"
      v-loading="listLoading">
      <ul>
        <book-card
          v-for="item in edmList"
          :key="item.id"
          :cardData="item"></book-card>
      </ul>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getInfoList" />
    </div>
    <div v-if="!edmList.length">
      <el-empty description="No Data"></el-empty>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
      },
      edmList: [],
      listLoading: true,
    }
  },
  async created() {
    await this.getInfoList()
  },
  methods: {
    getInfoList() {
      this.$axios
        .post('/api/resources/edm/list', {
          page: this.listQuery.page,
          limit: this.listQuery.limit,
        })
        .then(res => {
          if (res.code == 1) {
            this.total = res.result.total
            res.result.data.forEach(item => {
              item.filepath = !this.$mediaRegExp.test(item.url)
                ? this.$OSS_PREFIX + item.url
                : item.url
              item.img = !this.$mediaRegExp.test(item.images)
                ? this.$OSS_PREFIX + item.images
                : item.images
            })
            this.edmList = res.result.data
            this.listLoading = false
          }
          this.$nextTick(() => {
            window.scroll(0, 0)
          })
        })
        .catch(() => {
          this.listLoading = false
          this.newsLetterInfo = []
        })
    },
  },
}
</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 {
  ul {
    width: 940px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}
: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>