From 1cf6d9fb8cf2f10e302509f033d8d55b4e60712c Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Sun, 14 Aug 2022 01:45:42 +0800
Subject: [PATCH] 优化友链布局，月台窗口自适应，处理hls取消后仍然缓存问题
---
src/components/mini/box16-videoDetail.vue | 53 +++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 41 insertions(+), 12 deletions(-)
diff --git a/src/components/mini/box16-videoDetail.vue b/src/components/mini/box16-videoDetail.vue
index d093711..9c9f19e 100644
--- a/src/components/mini/box16-videoDetail.vue
+++ b/src/components/mini/box16-videoDetail.vue
@@ -1,13 +1,16 @@
<template>
- <div>
- <div class="boxMain ">
+ <div class="boxMain">
+ <div class=" playBox" v-bind:class="{ fadeInLeft: this.$attrs.showFade,fade: !this.$attrs.showFade }">
<videoPlayBox ref="videoPlayBox" @swichPlay="swichPlay"></videoPlayBox>
</div>
- <div style="padding: 20px 20px 5px;margin-bottom: 20px;" class="myShadow fadeInLeft">
- <pre>{{introduce}}</pre>
- </div>
- <div class="articleComment fadeInRight">
- <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" :foldReply="true" />
+ <div v-bind:class="{ fadeInRight: this.$attrs.showFade,fade: !this.$attrs.showFade }">
+ <div class="introduce myShadow" v-if="introduce!=''">
+ <pre style="white-space: pre-line;">{{introduce}}</pre>
+ </div>
+ <div class="articleComment ">
+ <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment"
+ :foldReply="true" />
+ </div>
</div>
</div>
@@ -40,9 +43,11 @@
if (newValue == undefined || newValue == null || newValue == "") {
this.errorMsg = "日志id参数缺失";
} else {
- this.$nextTick(function() {
- this.$refs.myComment.updateCommentList(this.articleId);
- })
+ if (this.newValue != this.oldValue) {
+ this.$nextTick(function() {
+ this.$refs.myComment.updateCommentList(this.articleId);
+ })
+ }
}
},
},
@@ -54,6 +59,7 @@
introduce: "",
secret: "",
myLock: false,
+ showFade: true,
videoData: {
img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
url: "",
@@ -67,6 +73,7 @@
methods: {
swichPlay(videoData) {
this.introduce = videoData.introduce;
+ this.articleId = videoData.id
this.$refs.myComment.updateCommentList(videoData.id);
},
showVideo(item) {
@@ -85,7 +92,7 @@
loadData() {
if (this.$refs.videoPlayBox.isPlaying) {
- this.$message.info("上个视频正在播放中")
+ this.$message.info("视频源已切换..", 6)
}
if (this.myLock) {
@@ -157,9 +164,17 @@
.boxMain {
user-select: none;
+ grid-template-columns: repeat(2, 1fr);
+ display: grid;
+ clear: both;
+ gap: 2rem;
+ max-height: 100%;
+ }
+
+ .playBox {
display: flex;
justify-content: center;
- padding: 5px 20px;
+ padding: 20px 0px;
}
.myShadow {
@@ -167,4 +182,18 @@
box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
-8px -8px 18px #ffffff;
}
+
+ .introduce {
+ padding: 20px 20px 5px;
+ margin-bottom: 20px;
+ }
+
+ @media screen and (max-width: 1023px) {
+ .boxMain {
+ grid-template-columns: repeat(1, 1fr);
+ gap: 0rem;
+ }
+
+ }
+
</style>
--
Gitblit v1.9.1