src/components/mini/box14-video.vue

@@ -1,5 +1,5 @@
<template>
   <div>
   <div class="fade">
      <div class="mySecretSamll" v-if="data==null|| data.length==0">
         <p>
            <a-icon type="delete" /> 空空如也..
@@ -7,7 +7,7 @@
      </div>
      <div class="gridClass">
         <div class="entry-preview" v-for="item in data">
            <div class="thumbnail_box" @click="showMyVideo(item.id)">
            <div class="thumbnail_box" @click="showMyVideo(item)">
               <div class="thumbnail">
                  <img :src="item.coverFileURL" alt="" loading="lazy" :onerror="img404">
               </div>
@@ -18,6 +18,7 @@
                     <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}}
@@ -26,7 +27,7 @@
               <div class="entry-meta">
                  <div class="post-categories">
                     <span class="tag vcard">
                        <a-icon type="book" />
                        <a-icon type="customer-service" />
                        <a href="#" rel="category tag"> {{item.articleTypeName}}</a>
                     </span>
                     <!-- <span class="tag-list">
@@ -95,9 +96,11 @@
               return res
            })
         },
         showMyVideo(param) {
         showMyVideo(item) {
            this.$emit('showMyVideo', {
               id: param
               id: item.id,
               isAllowedComment: item.isAllowedComment,
               introduce: item.introduce,
            })
         }
      }
@@ -121,6 +124,7 @@
      gap: 2rem;
      padding-bottom: 20px;
      // background-color: #666;
      user-select: none;

      a {
         color: #555;
@@ -196,7 +200,6 @@

      .entry-preview .entry-meta {
         display: flex;
         justify-content: space-between;
         font-size: .5rem;
         padding: .5rem 0 0 0;
         flex-wrap: wrap;
@@ -267,27 +270,25 @@
      overflow: hidden;
   }

   @media screen and (max-width:1024px) {
   @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%;
         }
      }


   }

   @media screen and (min-width:1025px) {
      .gridClass {
         grid-template-columns: repeat(2, 1fr);
      }
   }
</style>