|
|
@@ -2,25 +2,35 @@
|
|
|
<div class="box">
|
|
|
<banner></banner>
|
|
|
<div class="content-box">
|
|
|
- <div class="v-content">
|
|
|
- <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">
|
|
|
- <div>
|
|
|
- <div class="profile-box">
|
|
|
- <img class="profile-img" :src="nav.url" />
|
|
|
- <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 class="v-content">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <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 class="content" @click="tapProfile(nav)">
|
|
|
+ <img class="profile-img" :src="nav.img" />
|
|
|
+ <p class="text">{{nav.title}}</p>
|
|
|
</div>
|
|
|
- <p class="v-text-size">{{nav.title}}</p>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</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{
|
|
|
- margin-bottom: 40px;
|
|
|
- height: 478px;
|
|
|
+ .el-col-5{
|
|
|
+ width: 20%;
|
|
|
}
|
|
|
- .profile-box{
|
|
|
- position: relative;
|
|
|
- border-bottom-right-radius: 40px;
|
|
|
- overflow: hidden;
|
|
|
+ .content{
|
|
|
+ height: 340px;
|
|
|
+ background: #F4F8FF;
|
|
|
+ // 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%;
|
|
|
- transform: scale(1);
|
|
|
- transition: transform .6s linear;
|
|
|
- cursor: pointer;
|
|
|
- &:hover{
|
|
|
- transform: scale(1.1);
|
|
|
- transition: transform .6s linear;
|
|
|
- border: 1px solid #006ad7;
|
|
|
- }
|
|
|
+ width: 190px;
|
|
|
}
|
|
|
- .between{
|
|
|
- width: 100%;
|
|
|
- height: 56px;
|
|
|
- // opacity: 0.9;
|
|
|
- padding: 0 20px;
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
+ .text{
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ word-wrap: break-word;
|
|
|
+ margin-top: 4px;
|
|
|
}
|
|
|
}
|
|
|
- .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>
|
