From a3ab3afe580daa80e9689f6e513e75a385f75bac Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Sun, 14 Aug 2022 21:00:37 +0800
Subject: [PATCH] 添加视频详情页
---
src/components/mini/box14-video.vue | 43 +++++++++++++++++++++++--------------------
1 files changed, 23 insertions(+), 20 deletions(-)
diff --git a/src/components/mini/box14-video.vue b/src/components/mini/box14-video.vue
index 9e794c3..ad280c1 100644
--- a/src/components/mini/box14-video.vue
+++ b/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>
@@ -15,7 +15,10 @@
<div class="entry-post">
<div class="entry-header">
<h5 class="entry-title">
- <a href="#" rel="bookmark">{{item.title}}</a>
+ <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}}
@@ -24,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">
@@ -36,7 +39,7 @@
<div class="post-on">
<span class="entry-date">
<a-icon type="calendar" />
- <a href="#" rel="bookmark">
+ <a href="#" rel="bookmark">
{{item.publishDate}}
</a>
</span>
@@ -61,7 +64,7 @@
} from '../../api/blogArticle.js'
import myConstant from "../../config/myConstant.js"
-
+
export default {
data() {
return {
@@ -93,9 +96,11 @@
return res
})
},
- showMyVideo(param) {
+ showMyVideo(item) {
this.$emit('showMyVideo', {
- id: param
+ id: item.id,
+ isAllowedComment: item.isAllowedComment,
+ introduce: item.introduce,
})
}
}
@@ -119,6 +124,7 @@
gap: 2rem;
padding-bottom: 20px;
// background-color: #666;
+ user-select: none;
a {
color: #555;
@@ -194,7 +200,6 @@
.entry-preview .entry-meta {
display: flex;
- justify-content: space-between;
font-size: .5rem;
padding: .5rem 0 0 0;
flex-wrap: wrap;
@@ -265,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>
--
Gitblit v1.9.1