From fa17f93cc94db72470d73c2d29d0a70baeb6b199 Mon Sep 17 00:00:00 2001
From: 康凯 <kangk26@foxmail.com>
Date: Thu, 27 Jan 2022 11:32:58 +0800
Subject: [PATCH] 修复：相关视频列表页面封面图片加载失败时显示默认图片
---
src/views/memory/detail.vue | 124 ++++++++++++++++++++++++++++++++---------
1 files changed, 96 insertions(+), 28 deletions(-)
diff --git a/src/views/memory/detail.vue b/src/views/memory/detail.vue
index 800f60b..f87ce00 100644
--- a/src/views/memory/detail.vue
+++ b/src/views/memory/detail.vue
@@ -27,7 +27,9 @@
</div>
</mt-tab-container-item>
<mt-tab-container-item id="2">
- <CustomSearch3 v-on:search="SearchImages"></CustomSearch3>
+ <div class="search-div">
+ <CustomSearch3 v-on:search="SearchImages"></CustomSearch3>
+ </div>
<div class="content-images"
v-infinite-scroll="NextImages"
:infinite-scroll-disabled="images.scrollDisabled"
@@ -44,23 +46,26 @@
</div>
</mt-tab-container-item>
<mt-tab-container-item id="3">
- <CustomSearch3 v-on:search="SearchVideos"></CustomSearch3>
+ <div class="search-div">
+ <CustomSearch3 v-on:search="SearchVideos"></CustomSearch3>
+ </div>
<div class="content-videos"
v-infinite-scroll="NextVideos"
:infinite-scroll-disabled="videos.scrollDisabled"
:infinite-scroll-distance="10">
- <div class="content-item"
- v-for="item in videos.data"
- :key="item.id"
- @click="ToVideoDetail(item.id)">
- <div class="item-left">
- <img :src="item.cover"/>
+ <template v-for="item in videos.data">
+ <div class="content-item" :key="item.key" @click="ToVideoDetail(item.id)">
+ <div class="item-left">
+ <img :src="item.cover" v-if="item.cover"/>
+ <img src="@/assets/defaultCover.png" v-else/>
+ </div>
+ <div class="item-right">
+ <div class="item-name">{{ item.name }}</div>
+ <div class="item-introduce">{{ item.description }}</div>
+ </div>
</div>
- <div class="item-right">
- <div class="item-name">{{ item.name }}</div>
- <div class="item-introduce">{{ item.description }}</div>
- </div>
- </div>
+ <div class="line" :key="item.key"></div>
+ </template>
</div>
</mt-tab-container-item>
</mt-tab-container>
@@ -117,7 +122,8 @@
window.open(fileUrl);
} else {
//https://view.officeapps.live.com/op/view.aspx?src=
- window.open("http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=" + fileUrl.replace(/\\/g, ''));
+ //http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=
+ window.open("https://view.officeapps.live.com/op/view.aspx?src=" + fileUrl.replace(/\\/g, ''));
}
}
},
@@ -200,14 +206,14 @@
},
ToImageDetail: function (id) {
let objId = this.$route.query.id;
- this.$router.push({name: "memory-detail-image", query: {id: id, objId: objId}});
+ this.$router.push({name: "scenery-detail-image", query: {id: id, objId: objId}});
},
ToVideoDetail: function (id) {
let objId = this.$route.query.id;
- this.$router.push({name: "memory-detail-video", query: {id: id, objId: objId}});
+ this.$router.push({name: "scenery-detail-video", query: {id: id, objId: objId}});
},
ToListPage: function () {
- this.$router.push({name: "memory-list"})
+ this.$router.push({name: "scenery-list"})
},
},
watch: {
@@ -239,6 +245,12 @@
</script>
<style scoped>
+.line {
+ width: 100%;
+ border: 1px solid #EEEEEE;
+ margin: 3vh 0;
+}
+
.data-detail {
width: 100%;
}
@@ -323,35 +335,62 @@
}
.data-detail .content {
- width: 90%;
- height: 84.1vh;
- margin-left: 5%;
- border-radius: 30px;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+
+ width: 100%;
+ height: 84vh;
+ background: #F8F8F8;
+}
+
+.mint-navbar {
+ width: 100%;
+}
+
+.mint-navbar /deep/ .mint-tab-item{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ padding: 7px 0;
}
.mint-navbar /deep/ .mint-tab-item-label {
+ width: 8rem;
font-size: 2rem;
font-family: Source Han Sans CN;
font-weight: 500;
line-height: 2rem;
color: #767676;
opacity: 1;
+
+ padding: 10px 0;
}
.mint-navbar /deep/ .is-selected {
color: #BC0000;
- border-bottom: 0.3vh solid #BC0000;
+ border-bottom: 0px;
}
.mint-navbar /deep/ .is-selected .mint-tab-item-label {
color: #BC0000;
+ border-bottom: 0.3vh solid #BC0000;
+}
+
+.mint-tab-container {
+ width: 100%;
}
.mint-tab-container /deep/ .mint-tab-container-item:nth-child(1) {
- padding-top: 5vh;
}
.content-keyword {
+ margin-top: 1vh;
+ padding: 5%;
+ background: #FFFFFF;
text-align: left;
font-size: 1.87rem;
font-family: Source Han Serif CN;
@@ -372,6 +411,10 @@
}
.content-introduction {
+ margin-top: 1vh;
+ padding: 5% 5% 15% 5%;
+ border-radius: 0 0 30px 30px;
+ background: #FFFFFF;
text-align: left;
font-size: 1.87rem;
font-family: Source Han Serif CN;
@@ -392,11 +435,12 @@
}
.mint-tab-container /deep/ .mint-tab-container-item:nth-child(2) {
- padding-top: 2vh;
}
-.custom-search3 {
- margin-bottom: 2vh;
+.search-div {
+ background: #FFFFFF;
+ padding: 5%;
+ margin-bottom: 1vh;
}
.content-images {
@@ -405,9 +449,22 @@
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
+ align-content:flex-start;
+
+ height: 65vh;
+ overflow: scroll;
+ padding-top: 2vh;
+ background: #FFFFFF;
+ border-radius: 0 0 30px 30px;
}
.content-images .content-item {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
width: 50%;
height: 25vh;
}
@@ -442,14 +499,25 @@
}
.mint-tab-container /deep/ .mint-tab-container-item:nth-child(3) {
- padding-top: 2vh;
+
}
.content-videos {
display: flex;
+ flex-wrap: wrap;
flex-direction: column;
justify-content: flex-start;
align-items: center;
+
+ height: 65vh;
+ overflow: scroll;
+ padding-top: 4vh;
+ background: #FFFFFF;
+ border-radius: 0 0 30px 30px;
+}
+
+.content-videos .line{
+ width: 90%;
}
.content-videos .content-item {
@@ -460,7 +528,7 @@
align-items: center;
height: 10vh;
- margin: 2vh auto;
+ width: 90%;
}
.content-videos .item-left {
--
Gitblit v1.9.3