uk_front/pages/home/downloadCenter.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>Download Center</el-breadcrumb-item>
    </el-breadcrumb>
    <p class="title">Download Center</p>
    <div class="line"></div>
    <ul class="item">
      <li
        v-for="item in downLoadInfo"
        :key="item.id" @click="download(item)">
        <!-- <a :href="item.file?item.file:item.link" :target="item.file.endsWith('.csv')?'_self':'_blank'"> -->
          <div class="item-content" >
            <img
              :src="item.image"
              alt="" />
          </div>
          <p>{{ item.title }}</p>
        <!-- </a> -->
      </li>
    </ul>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getInfoList" />
    <div v-if="!downLoadInfo.length">
      <el-empty description="No Data"></el-empty>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
      },
      downLoadInfo: [],
    }
  },
  async created() {
    await this.getInfoList()
  },
  methods: {
    getInfoList() {
      this.$axios
        .get('/uk-api/others/download/list', {
          page: this.listQuery.page,
          limit: this.listQuery.limit,
        })
        .then(res => {
          if (res.code == 1) {
            this.total = res.result.total
            this.downLoadInfo = res.result.data
            this.downLoadInfo.forEach(item => {
              item.image = !this.$mediaRegExp.test(item.image)
                ? this.$OSS_PREFIX + item.image
                : item.image
            })
          }
          this.$nextTick(() => {
            if (process.client) {
              window.scroll(0, 0)
            }
          })
        })
    },
    download(item) {
        if (process.client) {
          const file = item.file
          if (file) {
            if(file.endsWith('.csv')){
              const urlStr = file.match('[^/]+(?!.*/)')[0]
              this.$utils.downloadBlob(file, decodeURIComponent(urlStr))
            }else if(file.endsWith('.xlsx')){
              window.open(file, '_self')
            }else{
              window.open(file, '_blank')
            }
          } else if (item.link) {
            window.open(item.link, '_blank')
          }
        }
    },
  },
}
</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 {
  margin: 20px auto;
  padding-left: 100px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  li {
    width: 207px;
    height: 226px;
    margin-right: 53px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .item-content {
      width: 172px;
      height: 172px;
      border-radius: 30px;
      margin-bottom: 30px;
      text-align: center;
      background: radial-gradient(circle, #f8f6f9, #f8f6f9);
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
        border-radius: 30px;
      }
    }
    p {
      width: 130px;
      height: 28px;
      font-size: 15px;
      font-family: Lincoln - Proxima Nova;
      font-weight: 600;
      color: #00213b;
      text-align: center;
    }
    &:hover {
      img {
        background: radial-gradient(circle, #f0f0f0, #f0f0f0);
        transform: translate3d(0px, 5px, 1px);
        box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.25);
      }
      p {
        color: #0b6dc9;
      }
    }
  }
  li:nth-of-type(5),
  li:last-of-type {
    margin-right: 0;
  }
}
: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>