资料下载

src/langs/cn/DownloadList.js

@@ -3,33 +3,47 @@ export default {
     {
         title: "Eukaryotic Protein Preparation All-inclusive Package",
         url: '/static/img/profile/e_4.jpg',
+        img: '/static/img/download/en1.png',
+        contentImg: '/static/img/download/en_1.jpg',
         link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_2.pdf'
     },{
         title: "High-quality Bulk Antibody  Production Service",
         url: '/static/img/profile/e_13.jpg',
+        img: '/static/img/download/en2.png',
+        contentImg: '/static/img/download/en_2.jpg',
         link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_14.pdf'
       },
       {
         title: "Rapid Protein Expression and Purification Service",
         url: '/static/img/profile/e_9.jpg',
+       img: '/static/img/download/en3.png',
+        contentImg: '/static/img/download/en_3.jpg',
         link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_15.pdf'
       }, {
         title: "Screening With the Sub-library of Super-trillion Common Light Chain Ab Library",
         url: '/static/img/profile/e_2.jpg',
+       img: '/static/img/download/en4.png',
+        contentImg: '/static/img/download/en_4.jpg',
         link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_11.pdf'
      },
      {
         title: "Sanyou Bio In Vitro Efficacy Evaluation",
         url: '/static/img/profile/e_19.jpg',
+       img: '/static/img/download/en5.png',
+        contentImg: '/static/img/download/en_5.jpg',
         link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_20.pdf'
      },
       {
         title: "In Vivo  Efficacy Evaluation  in Animal Models for Innovative  Antibody Drug",
         url: '/static/img/profile/e_20.jpg',
+       img: '/static/img/download/en6.png',
+        contentImg: '/static/img/download/en_6.jpg',
         link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_21.pdf'
       },  {
         title: "Multidimensional Antibody  Characterization Service",
         url: '/static/img/profile/e_17.jpg',
+       img: '/static/img/download/en7.png',
+        contentImg: '/static/img/download/en_7.jpg',
         link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_22.pdf'
     }
 ]

src/langs/en/DownloadList.js

@@ -1,35 +1,49 @@
 export default {
-    list: [
+  list: [
     {
         title: "Eukaryotic Protein Preparation All-inclusive Package",
         url: '/static/img/profile/e_4.jpg',
+        img: '/static/img/download/en1.png',
+        contentImg: '/static/img/download/en_1.jpg',
         link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_2.pdf'
     },{
         title: "High-quality Bulk Antibody  Production Service",
         url: '/static/img/profile/e_13.jpg',
+        img: '/static/img/download/en2.png',
+        contentImg: '/static/img/download/en_2.jpg',
         link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_14.pdf'
       },
       {
         title: "Rapid Protein Expression and Purification Service",
         url: '/static/img/profile/e_9.jpg',
+       img: '/static/img/download/en3.png',
+        contentImg: '/static/img/download/en_3.jpg',
         link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_15.pdf'
       }, {
         title: "Screening With the Sub-library of Super-trillion Common Light Chain Ab Library",
         url: '/static/img/profile/e_2.jpg',
+       img: '/static/img/download/en4.png',
+        contentImg: '/static/img/download/en_4.jpg',
         link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_11.pdf'
      },
      {
         title: "Sanyou Bio In Vitro Efficacy Evaluation",
         url: '/static/img/profile/e_19.jpg',
+       img: '/static/img/download/en5.png',
+        contentImg: '/static/img/download/en_5.jpg',
         link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_20.pdf'
      },
       {
         title: "In Vivo  Efficacy Evaluation  in Animal Models for Innovative  Antibody Drug",
         url: '/static/img/profile/e_20.jpg',
+       img: '/static/img/download/en6.png',
+        contentImg: '/static/img/download/en_6.jpg',
         link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_21.pdf'
       },  {
         title: "Multidimensional Antibody  Characterization Service",
         url: '/static/img/profile/e_17.jpg',
+       img: '/static/img/download/en7.png',
+        contentImg: '/static/img/download/en_7.jpg',
         link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_22.pdf'
     }
 ]

src/view/profile/index.vue

@@ -2,25 +2,35 @@
   <div class="box">
     <banner></banner>
     <div class="content-box">
-    <div class="v-content">
+      <div class="v-content">
-      <el-row :gutter="20">
+        <el-row :gutter="20">
-        <el-col :span="6" :xl="6" :lg="6" :md="8" :sm="8" :xs="12" v-for="(nav, i) in list" :key="i" class="list">
+          <el-col :span="5" :xl="6" :lg="6" :md="8" :sm="8" :xs="12" v-for="(nav, i) in list" :key="i" class="list">
-          <div>
+            <div class="content" @click="tapProfile(nav)">
-            <div class="profile-box">
+              <img class="profile-img" :src="nav.img" />
-              <img class="profile-img" :src="nav.url" />
+              <p class="text">{{nav.title}}</p>
-              <div class="between" style="opacity:0.9;">
-                <a @click="downloadPdf(nav.link, nav.title)" class="center" style="cursor: pointer;">
-                  <img class="x_z" src="@/assets/img/download.png" />
-                  <span class="xz_text" style="margin-left:10px;">{{$t('Download.Download')}}</span>
-                </a>
-              </div>
             </div>
-            <p class="v-text-size">{{nav.title}}</p>
+          </el-col>
-          </div>
+        </el-row>
-        </el-col>
+      </div>
-      </el-row>
     </div>
-  </div>
+    <!-- 弹框 -->
+     <div class="pop-up" v-if="popShow">
+      <div class="pop_content">
+        <div class="dele_icon" @click="popShow = false">
+          <i class="el-icon-close icon"></i>
+        </div>
+        <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">
+          <img class="image" :src="profile.contentImg" alt="">
+        </div>
+      </div>
+     </div>
   </div>
 </template>
 <script>
@@ -32,11 +42,18 @@ export default {
   },
   data() {
     return {
-      list: this.$t("downloadList.list")
+      list: this.$t("downloadList.list"),
+      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') + '...',
@@ -74,62 +91,92 @@ export default {
 .content-box{
   width: 1200px;
   margin: 40px auto 0;
-  background: #F4FAFF;
   .v-content{
     margin: auto;
-    .list{
+    .el-col-5{
-      margin-bottom: 40px;
+      width: 20%;
-      height: 478px;
     }
-    .profile-box{
+    .content{
-      position: relative;
+      height: 340px;
-      border-bottom-right-radius: 40px;
+      background: #F4F8FF;
-      overflow: hidden;
+      // border-radius: 20px;
+      border-radius: 5px 21px 21px 5px;
+      padding: 20px;
+      margin-bottom: 20px;
+      cursor: pointer;
+      &:hover{
+        box-shadow: 0px 0px 18px 0px rgba(0,72,255,0.58);
+      }
       .profile-img{
-        max-width: 100%;
+        width: 190px;
-        transform: scale(1);
-        transition: transform .6s linear;
-        cursor: pointer;
-        &:hover{
-          transform: scale(1.1);
-          transition: transform .6s linear;
-          border: 1px solid #006ad7;
-        }
       }
-      .between{
+      .text{
-        width: 100%;
+        font-size: 14px;
-        height: 56px;
+        line-height: 20px;
-        // opacity: 0.9;
+        word-wrap: break-word;
-        padding: 0 20px;
+        margin-top: 4px;
-        background-color: rgba(65,145,226,1);
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        z-index: 10;
-        .center{
-          display: flex;
-          align-items: center;
-          .x_z{
-            width: 24px;
-            height: 24px;
-          }
-          .xz_text{
-            color: #fff;
-            font-size: 16px;
-            margin-left: 10px;
-          }
-        }
       }
     }
-    .v-text-size{
+  }
-      height: 80px;
+}
-      font-size: 18px;
+// 弹框
+.pop-up{
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  .pop_content{
+    max-width: 1200px;
+    width: 500px;
+    background: #fff;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 20px;
+    .dele_icon{
+      display: block;
+      position: absolute;
+      top: -20px;
+      right: -120px;
+      color: #035AA8;
+      font-size: 28px;
+      cursor: pointer;
+    }
+    .title{
+      font-size: 24px;
       text-align: center;
-      padding-top: 20px;
+      font-weight: 600;
+      margin-bottom: 20px;
+    }
+    .pop_hea{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .biaoti{
+        font-size: 16px;
+        font-weight: 500;
+        color: #000;
+      }
+      .hea_icon{
+        color: #035AA8;
+        font-size: 28px;
+        font-weight: 600;
+        cursor: pointer;
+      }
+    }
+    .pop_img{
+      box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.3);
+      margin-top: 20px;
+      border-radius: 20px;
+      .image{
+        display: block;
+        width: 100%
+      }
     }
   }
 }
-</style>
+</style>