src/components/mini/box14-video.vue

@@ -5,50 +5,54 @@
            <a-icon type="delete" /> 空空如也..
         </p>
      </div>
      <div class="gridClass">
         <div class="entry-preview" v-for="item in data">
            <div class="thumbnail_box" @click="showMyVideo(item)">
               <div class="thumbnail">
                  <img :src="item.coverFileURL" 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>
                     <!-- {{item.title}} -->
                  </h5>
                  <div class="post_content">
                     {{item.introduce}}
      <div style="min-height: 600px;">
         <div class="gridClass">
            <div class="entry-preview" v-for="item in data">
               <div class="thumbnail_box" @click="showMyVideo(item)">
                  <div class="thumbnail">
                     <img :src="item.coverFileURL" 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>
                     <!-- <span class="tag-list">
               <div class="entry-post">
                  <div class="entry-header">
                     <h5 class="entry-title">
                        <router-link :title="item.title"
                           :to="{path:'videoDetail',query:{id:item.id}}">
                           {{item.title}}
                        </router-link>
                        <!-- {{item.title}} -->
                     </h5>
                     <div class="post_content">
                        {{item.introduce}}
                     </div>
                  </div>
                  <div class="entry-meta">
                     <div class="post-categories">
                        <span class="tag vcard">
                           <a-icon type="customer-service" />
                           <router-link :title="item.articleTypeName"
                              :to="{path:'articleList',query:{typeId:item.articleTypeId}}">
                              {{item.articleTypeName}}
                           </router-link>
                        </span>
                        <!-- <span class="tag-list">
                        <a href="#" rel="tag">影评</a>
                        <a href="#" rel="tag">电影</a>
                        <a href="#" rel="tag">蜘蛛侠</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 class="post-on">
                        <span class="entry-date">
                           <a-icon type="calendar" />
                           <a href="#" rel="bookmark">
                              {{item.publishDate}}
                           </a>
                        </span>
                     </div>
                  </div>
               </div>
            </div>

         </div>

      </div>
      <a-row type="flex" justify="center">
         <div>
@@ -60,7 +64,7 @@
</template>
<script>
   import {
      queryBlogArticleList
      platform
   } from '../../api/blogArticle.js'

   import myConstant from "../../config/myConstant.js"
@@ -76,7 +80,7 @@
               defaultPageSize: 6
            },
            data: [],
            img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/idea_beijing.jpg\"",
            img404: myConstant.img404,
         }
      },
      mounted() {
@@ -85,10 +89,10 @@
      methods: {
         onChange(current) {
            this.page.current = current;
            queryBlogArticleList({
            platform({
               pageNo: current,
               pageSize: this.page.pageSize,
               fileType: myConstant.fileTypeVideo
               activeKey: this.$attrs.activeKey
            }).then((res) => {
               this.page.total = Number(res.data.total)
               this.page.pageSize = Number(res.data.size);
@@ -248,7 +252,7 @@
      border: 1px solid rgba(255, 255, 255, .75);
      opacity: 0;
      height: 70%;
      transition: all .5s;
      transition: all .3s;
      z-index: 2;
      color: white;
      border-radius: @--border-radius;
@@ -275,17 +279,17 @@
         grid-template-columns: repeat(2, 1fr);
      }
   }
	

   @media screen and (max-width:767px) {
      .gridClass {
         grid-row-gap: 2rem;
         grid-column-gap: 0rem;
         grid-template-columns: repeat(1, 1fr);
	

         .entry-preview {
            display: block;
         }
	

         .thumbnail_box {
            min-width: 100%;
         }