From a23166e4fac771238a90ae5ddc5b1e53a1c7afb8 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Thu, 25 Aug 2022 18:10:21 +0800 Subject: [PATCH] 更新后的细节调整 --- src/components/mini/box14-video.vue | 107 ++++++++++++++++++++++++++++------------------------- 1 files changed, 57 insertions(+), 50 deletions(-) diff --git a/src/components/mini/box14-video.vue b/src/components/mini/box14-video.vue index 9e794c3..89ee895 100644 --- a/src/components/mini/box14-video.vue +++ b/src/components/mini/box14-video.vue @@ -1,51 +1,58 @@ <template> - <div> + <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.id)"> - <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"> - <a href="#" rel="bookmark">{{item.title}}</a> - </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="book" /> - <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> @@ -57,11 +64,11 @@ </template> <script> import { - queryBlogArticleList + platform } from '../../api/blogArticle.js' import myConstant from "../../config/myConstant.js" - + export default { data() { return { @@ -73,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() { @@ -82,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); @@ -93,9 +100,11 @@ return res }) }, - showMyVideo(param) { + showMyVideo(item) { this.$emit('showMyVideo', { - id: param + id: item.id, + isAllowedComment: item.isAllowedComment, + introduce: item.introduce, }) } } @@ -119,6 +128,7 @@ gap: 2rem; padding-bottom: 20px; // background-color: #666; + user-select: none; a { color: #555; @@ -194,7 +204,6 @@ .entry-preview .entry-meta { display: flex; - justify-content: space-between; font-size: .5rem; padding: .5rem 0 0 0; flex-wrap: wrap; @@ -243,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; @@ -265,7 +274,13 @@ 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; @@ -278,14 +293,6 @@ .thumbnail_box { min-width: 100%; } - } - - - } - - @media screen and (min-width:1025px) { - .gridClass { - grid-template-columns: repeat(2, 1fr); } } </style> -- Gitblit v1.9.1