src/components/mini/box18-photoShow.vue

@@ -1,37 +1,39 @@
<template>
   <div>
      <div class="gridClass">
         <div class="entry-preview" v-for="item in data">
            <div class="thumbnail_box">
               <div class="thumbnail" @click="show(item.pictureUrlList)">
                  <img :src="item.coverFileURL" :key="item.id" alt="" loading="lazy" :onerror="img404">
               </div>
            </div>
            <div class="entry-post">
               <div class="entry-header">
                  <h5 class="entry-title">
                     <router-link :to="{path:'videoDetail',query:{id:item.id}}" :title="item.title">
                        {{item.title}}
                     </router-link>
                  </h5>
                  <div class="post_content">
                     {{item.introduce}}
      <div style="min-height: 500px;">
         <div class="gridClass">
            <div class="entry-preview" v-for="item in data">
               <div class="thumbnail_box">
                  <div class="thumbnail" @click="show(item.pictureUrlList)">
                     <img :src="item.coverFileURL" :key="item.id" alt="" loading="lazy" :onerror="img404">
                  </div>
               </div>
               <div class="entry-meta">
                  <div class="post-categories">
                     <span class="tag vcard">
                        <a-icon type="customer-service" />
                        <a href="#" rel="category tag"> {{item.articleTypeName}}</a>
                     </span>
               <div class="entry-post">
                  <div class="entry-header">
                     <h5 class="entry-title">
                        <router-link :to="{name:'mdDetail',query:{id:item.id,typeId:item.articleTypeId}}" :title="item.title">
                           {{item.title}}
                        </router-link>
                     </h5>
                     <div class="post_content">
                        {{item.introduce}}
                     </div>
                  </div>
                  <div class="post-on">
                     <span class="entry-date">
                        <a-icon type="calendar" />
                        <a href="#" rel="bookmark">
                           {{item.publishDate}}
                        </a>
                     </span>
                  <div class="entry-meta">
                     <div class="post-categories">
                        <span class="tag vcard">
                           <a-icon type="customer-service" />
                           <a href="#" rel="category tag"> {{item.articleTypeName}}</a>
                        </span>
                     </div>
                     <div class="post-on">
                        <span class="entry-date">
                           <a-icon type="calendar" />
                           <a href="#" rel="bookmark">
                              {{item.publishDate}}
                           </a>
                        </span>
                     </div>
                  </div>
               </div>
            </div>
@@ -56,32 +58,12 @@
   } from '../../api/blogArticle.js'

   import myConstant from "../../config/myConstant.js"
   import optionsConfig from "../../config/v-viewer-Config.js"

   export default {
      data() {
         return {
            options: {
               'inline': false, // 是否启用inline模式
               'button': true, // 是否显示右上角关闭按钮
               'navbar': true, // 是否显示缩略图底部导航栏
               'title': false, // 是否显示当前图片标题，默认显示alt属性内容和尺寸
               'toolbar': false, // 是否显示工具栏
               'tooltip': true, // 放大或缩小图片时，是否显示缩放百分比，默认true
               'fullscreen': true, // 播放时是否全屏，默认true
               'loading': true, // 加载图片时是否显示loading图标，默认true
               'loop': true, // 是否可以循环查看图片，默认true
               'movable': true, // 是否可以拖得图片，默认true
               'zoomable': true, // 是否可以缩放图片，默认true
               'rotatable': true, // 是否可以旋转图片，默认true
               'scalable': true, // 是否可以翻转图片，默认true
               'toggleOnDblclick': true, // 放大或缩小图片时，是否可以双击还原，默认true
               'transition': true, // 使用 CSS3 过度，默认true
               'keyboard': true, // 是否支持键盘，默认true
               'zoomRatio': 0.1, // 鼠标滚动时的缩放比例，默认0.1
               'minZoomRatio': 0.3, // 最小缩放比例，默认0.01
               'maxZoomRatio': 2.0, // 最大缩放比例，默认100
               // 'url': 'data-source' // 设置大图片的 url
            },
            options: optionsConfig,
            page: {
               size: "small",
               total: 1,
@@ -90,7 +72,7 @@
               defaultPageSize: 6
            },
            data: [],
            img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/idea_beijing.jpg\"",
            img404: myConstant.img404,
         }
      },
      mounted() {
@@ -102,9 +84,7 @@
            platform({
               pageNo: current,
               pageSize: this.page.pageSize,
               fileType: 9,
               typeId: 99,
               activeKey:this.$attrs.activeKey
               activeKey: this.$attrs.activeKey
            }).then((res) => {
               this.page.total = Number(res.data.total)
               this.page.pageSize = Number(res.data.size);