crs-double-resistance/src/view/profile/index.vue

<template>
  <div class="box">
    <banner></banner>
    <div class="content-box">
      <div class="title">SY-CRS-BsAb</div>
      <div class="v-content">
        <el-row :gutter="20">
          <el-col :span="5" :xs="8" v-for="(nav, i) in syList" :key="i" class="list">
            <div class="content" @click="tapProfile(nav)">
              <img class="profile-img" :src="nav.img" />
              <p class="text">{{nav.title}}</p>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- Other materials -->
      <div class="title">Other materials</div>
      <div class="v-content">
        <el-row :gutter="20">
          <el-col :span="5" :xl="6" :lg="6" :md="8" :sm="8" :xs="8" v-for="(nav, i) in list" :key="i" class="list">
            <div class="content" @click="tapProfile(nav)">
              <img class="profile-img" :src="nav.img" />
              <p class="text">{{nav.title}}</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 弹框 -->
     <div class="pop-up" v-if="popShow">
      <div class="pop_content">
        <!-- <div class="title">{{ $t("nav.MaterialsDownload") }}</div> -->
        <!-- <div class="pop_hea">
          <div class="biaoti">{{ profile.title }}</div>
          <div class="hea_icon" @click="downloadPdf(profile.link, profile.title)">
            <i class="el-icon-download"></i>
          </div>
        </div> -->
        <div class="pop_img">
          <div class="hea_icon">
            <i  @click="downloadPdf(profile.link, profile.title)" class="el-icon-download"></i>
            <i  @click="popShow = false" class="el-icon-close icon"></i>
          </div>
          <img class="image" :src="profile.contentImg" alt="">
        </div>
      </div>
     </div>
  </div>
</template>
<script>
import banner from "@/components/banner";
export default {
  name: "profile",
  components: {
    banner
  },
  data() {
    return {
      list: this.$t("downloadList.list"),
      syList: this.$t("downloadList.syList"),
      popShow: false,
      profile: null
    };
  },
  methods: {
    tapProfile(item) {
      this.popShow = true;
      this.profile = item;
    },
    downloadPdf(pdfUrl, title) {
      console.log(pdfUrl, title);
      const loading = this.$loading({
        lock: true,
        text: this.$t('Download.loading') + '...',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      const xhr = new XMLHttpRequest();
      xhr.open('GET', pdfUrl, true);
      xhr.responseType = 'blob';
      xhr.onload = () => {
        if (xhr.status === 200) {
          const blob = new Blob([xhr.response], { type: 'application/pdf' });
          const url = URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = url;
          link.download = title +'.pdf';
          link.click();

          URL.revokeObjectURL(url);
          setTimeout(() => {
            // 关闭Loading
            loading.close();
          }, 1000);
        }
      };
      xhr.send()
    }
  },
  mounted() {},
  created() {
  }
};
</script>

<style lang="scss" scoped>
@media screen and (min-width: 751px) and (max-width: 9999px) {
.content-box{
  width: 1200px;
  margin: 40px auto 0;
  .title{
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 20px;
  }
  .v-content{
    margin: auto;
    .el-col-5{
      width: 20%;
    }
    .content{
      // height: 310px;
      background: #F4F8FF;
      // border-radius: 20px;
      border-radius: 5px 21px 21px 5px;
      padding:0 10px 10px;
      margin-bottom: 20px;
      cursor: pointer;
      &:hover{
        box-shadow: 0px 0px 18px 0px rgba(0,72,255,0.58);
      }
      .profile-img{
        width: 100%;
      }
      .text{
        font-size: 14px;
        line-height: 20px;
        word-wrap: break-word;
        margin-top: 4px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
  }
  .v-one{
    margin-bottom: 20px;
    .content{
      padding: 20px 10px;
    }
  }
}
// 弹框
.pop-up{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  .pop_content{
    max-width: 1200px;
    width: 640px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    .pop_img{
      box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.3);
      // margin-top: 20px;
      border-radius: 20px;
      position: relative;
      .hea_icon{
        position: absolute;
        top: 10px;
        right: 10px;
        color: #035AA8;
        font-size: 28px;
        font-weight: 600;
        cursor: pointer;
      }
      .image{
        display: block;
        width: 100%
      }
    }
  }
}
}

@media screen and (min-width: 0px) and (max-width: 750px) {
.content-box{
  width: 100%;
  margin: 40px auto 0;
  padding: 0 10px;
  .title{
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 20px;
  }
  .v-content{
    margin: auto;
    // .el-col-5{
    //   width: 33.%;
    // }
    .content{
      // height: 310px;
      background: #F4F8FF;
      // border-radius: 20px;
      border-radius: 5px 21px 21px 5px;
      padding:0 10px 10px;
      margin-bottom: 20px;
      cursor: pointer;
      &:hover{
        box-shadow: 0px 0px 18px 0px rgba(0,72,255,0.58);
      }
      .profile-img{
        width: 100%;
      }
      .text{
        font-size: 14px;
        line-height: 20px;
        word-wrap: break-word;
        margin-top: 4px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
  }
  .v-one{
    margin-bottom: 20px;
    .content{
      padding: 20px 10px;
    }
  }
}
// 弹框
.pop-up{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  .pop_content{
    width:90%;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    .pop_img{
      box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.3);
      // margin-top: 20px;
      border-radius: 20px;
      position: relative;
      .hea_icon{
        position: absolute;
        top: 10px;
        right: 10px;
        color: #035AA8;
        font-size: 20px;
        font-weight: 600;
        cursor: pointer;
      }
      .image{
        display: block;
        width: 100%
      }
    }
  }
}
}
</style>