| | |
| | | <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 :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 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> |
| | |
| | | </template> |
| | | <script> |
| | | import { |
| | | queryBlogArticleList |
| | | platform |
| | | } from '../../api/blogArticle.js' |
| | | |
| | | import myConstant from "../../config/myConstant.js" |
| | |
| | | defaultPageSize: 6 |
| | | }, |
| | | data: [], |
| | | img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/idea_beijing.jpg\"", |
| | | img404: myConstant.img404, |
| | | } |
| | | }, |
| | | mounted() { |
| | |
| | | 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); |
| | |
| | | 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%; |
| | | } |