<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>