src/components/mini/box14-video.vue

@@ -1,123 +1,294 @@
<template>
   <div class="fade">
      <div class="mySecretSamll" v-if="data==null|| data.length==0">
         <p>
            <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>
               </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">
                        <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>
            </div>

   <div class="test_wow">
         </div>

          <section class="wow animate__slideOutUp test_wow" data-wow-duration="5s" data-wow-de>

             </section>

              <section class="wow animate__slideOutUp test_wow1" data-wow-duration="5s">

             </section> 

              <section class="wow animate__slideOutUp test_wow2" data-wow-duration="5s">

             </section> 

              <section class="wow animate__slideOutUp test_wow3" data-wow-duration="5s">

             </section> 

              <section class="wow animate__slideOutUp test_wow4" data-wow-duration="5s">

             </section>       

      </div>
      <a-row type="flex" justify="center">
         <div>
            <a-pagination @change="onChange" :showQuickJumper="true" :size="page.size" v-model="page.current"
               :defaultPageSize="page.defaultPageSize" :pageSize="page.pageSize" :total="page.total" />
         </div>
      </a-row>
   </div>



</template>

<script>
   import {
      queryBlogArticleList
   } from '../../api/blogArticle.js'

   import myConstant from "../../config/myConstant.js"

   export default {

      name: 'Home',

      data() {

         return {

            page: {
               size: "small",
               total: 1,
               pageSize: 6,
               current: 1,
               defaultPageSize: 6
            },
            data: [],
            img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/idea_beijing.jpg\"",
         }

      },

      mounted() {
         this.onChange(this.page.current);
      },
      methods: {
         onChange(current) {
            this.page.current = current;
            queryBlogArticleList({
               pageNo: current,
               pageSize: this.page.pageSize,
               fileType: myConstant.fileTypeVideo
            }).then((res) => {
               this.page.total = Number(res.data.total)
               this.page.pageSize = Number(res.data.size);
               this.data = res.data.records;
               return res
            })
         },
         showMyVideo(item) {
            this.$emit('showMyVideo', {
               id: item.id,
               isAllowedComment: item.isAllowedComment,
               introduce: item.introduce,
            })
         }
      }
   }
</script>
<style lang="less">
   @--border-radius: 16px;
   @--s-background: 16px;
   @--animation-mo: margin 1s cubic-bezier(0.62, 0.21, 0.25, 1) 1 backwards, opacity .75s cubic-bezier(0.62, 0.21, 0.25, 1) 1 backwards;

         new this.$wow.WOW().init()
   @font-face {
      font-family: "iconfont";
      /* Project id 2762112 */
      src: url('http://t.inleft.com/share/z%E5%AD%97%E4%BD%93%E5%BA%93/iconfont.woff2') format('woff2');
   }

   .gridClass {
      grid-template-columns: repeat(4, 1fr);
      display: grid;
      clear: both;
      gap: 2rem;
      padding-bottom: 20px;
      // background-color: #666;
      user-select: none;

      a {
         color: #555;
      }

      .item1 {
         grid-column-start: 1;
         grid-column-end: 3;
      }

      .entry-preview {
         border-radius: @--border-radius;
         background: @--s-background, white;
         animation: @--animation-mo;
         transition: all .5s;
         box-shadow: 0 5px 30px 0 rgba(0, 0, 0, .05);
         // background-color: red;

         display: flex;
      }

      .thumbnail_box {
         width: 50%;
         min-width: 50%;
         left: 0;

         .thumbnail {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: @--border-radius;
            overflow: hidden;
            background: rgba(0, 0, 0, .05);

            img {
               width: 100%;
               height: 100%;
               object-fit: cover;
               transform: scale(1.1);
               transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
               border-radius: @--border-radius;
            }
         }
      }

      header {
         display: block;
      }

      .entry-title,
      .post_content {
         margin: 0 0 .5rem 0;
      }

      h5 {
         font-size: 1.05rem;
      }

      .entry-meta,
      .post_content {
         opacity: .6;
      }

      .post_content {

         display: -webkit-box;
         overflow: hidden;
         -webkit-box-orient: vertical;
         /* autoprefixer: off */
         -webkit-line-clamp: 4;
         /* autoprefixer: on */
      }

      .entry-preview .entry-meta {
         display: flex;
         font-size: .5rem;
         padding: .5rem 0 0 0;
         flex-wrap: wrap;
      }

      .vcard {
         margin: 0 1em 0 0;
      }

      .entry-post {
         padding: 1rem;
         transition: all .5s;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         // height: 100%;
         // padding: calc(70% + 1rem) 1rem 1rem 1rem;

      }

   }
</script>

<style scoped>
   .test_wow {

      position: relative;

      width: 1000px;

      height: 400px;

      background: #212121;

      margin: 0 auto;

      .tag-list a {
         margin: 0 .5em 0 0;
         font-size: 14px;
      }
   }

   .test_wow1 {

      position: relative;

      width: 1000px;

      height: 400px;

      background: #741919;

      margin: 0 auto;

   .thumbnail_box:hover .thumbnail img {
      transform: scale(1) translate3d(0, 0, 0);
      filter: blur(10px) brightness(.8);
   }

   .test_wow2 {

      position: relative;

      width: 1000px;

      height: 400px;

      background: #2b0f44;

      margin: 0 auto;

   .thumbnail_box:hover .thumbnail:after {
      width: 100%;
      height: 100%;
      opacity: 1;
   }

   .test_wow3 {

      position: relative;

      width: 1000px;

      height: 400px;

      background: #558614;

      margin: 0 auto;

   .thumbnail:before {
      content: "\ec2a";
      opacity: .1;
      font-size: 3rem;
   }

   .test_wow4 {
   .thumbnail:after {
      width: 70%;
      border: 1px solid rgba(255, 255, 255, .75);
      opacity: 0;
      height: 70%;
      transition: all .5s;
      z-index: 2;
      color: white;
      border-radius: @--border-radius;
      content: "\e627";
      font-size: 1rem;
      text-shadow: 0 1px 5px rgb(0 0 0 / 30%);
   }

      position: relative;
   .thumbnail:before,
   .thumbnail:after {
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'iconfont';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
   }

      width: 1000px;

      height: 400px;

      background: #440707;

      margin: 0 auto;

   @media screen and (min-width:768px) {
      .gridClass {
         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%;
         }
      }
   }
</style>