Skip to content

E
exhibition_page
提交 5696373d authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

文物详情页tabbar联动修改

上级 5e0dca93
隐藏空白字符变更
内嵌 并排
正在显示 包含 111 行增加 和 70 行删除
src/views/culturalRelic/Detail.vue
浏览文件 @ 5696373d
...@@ -147,30 +147,32 @@ ...@@ -147,30 +147,32 @@
id="tabbar" id="tabbar"
:class="{ isFixed: isFixed }" :class="{ isFixed: isFixed }"
> >
<span <span v-for="(item, index) in tabbarData" :key="index">
v-if="CRDetail.intro" <span
@click="handleClickTabItem('intro')" @click="handleClickTabItem(item)"
:class="['tab-item', currentTab == 'intro' ? 'active' : '']" :class="[
>文物简介</span 'tab-item',
> currentTab && currentTab.domId == item.domId ? 'active' : '',
<span ]"
v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0" v-html="item.name"
@click="handleClickTabItem('videos')" v-if="CRDetail[item.domId] && CRDetail[item.domId].length > 0"
:class="['tab-item', currentTab == 'videos' ? 'active' : '']" >
>相关视频</span </span>
> <span
<span @click="handleClickTabItem(item)"
v-if="relateRelics" v-else-if="
@click="handleClickTabItem('relateRelics')" item.domId == 'relateRelics' &&
:class="['tab-item', currentTab == 'relateRelics' ? 'active' : '']" relateRelics &&
>相关文物</span relateRelics.length > 0
> "
<span v-html="item.name"
v-if="CRDetail.literatureVo && CRDetail.literatureVo.length > 0" :class="[
@click="handleClickTabItem('literature')" 'tab-item',
:class="['tab-item', currentTab == 'literature' ? 'active' : '']" currentTab && currentTab.domId == item.domId ? 'active' : '',
>相关文献</span ]"
> >
</span>
</span>
</div> </div>
<!-- 文物简介 --> <!-- 文物简介 -->
...@@ -179,37 +181,26 @@ ...@@ -179,37 +181,26 @@
v-if="CRDetail.intro" v-if="CRDetail.intro"
id="intro" id="intro"
> >
<div class="intro-title">
<!-- <svg-icon icon-class="jianjie"></svg-icon> -->
<!-- <i class="el-icon-tickets" style="margin-right: 10px"></i> -->
<span>文物简介</span>
</div>
<div class="intro-content"> <div class="intro-content">
<div class="intro-title"> <div class="left-box">简介</div>
<!-- <svg-icon icon-class="jianjie"></svg-icon> -->
<i class="el-icon-tickets" style="margin-right: 10px"></i>
<span>文物简介</span>
</div>
<div class="intro-content-container" v-html="CRDetail.intro"></div> <div class="intro-content-container" v-html="CRDetail.intro"></div>
</div> </div>
<!-- <div
class="intro-video wow animate__animated animate__fadeInRight"
v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0"
>
<el-carousel :interval="4000" type="card" indicator-position="none">
<el-carousel-item
v-for="item in CRDetail.videosVo"
:key="item.fileId"
>
<Video :url="$getFullUrl(item.url)" theme="blue" />
</el-carousel-item>
</el-carousel>
</div> -->
</div> </div>
<!-- 文物视频 --> <!-- 文物视频 -->
<div <div
class="content-item display-detail_videos" class="content-item display-detail_videos"
v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0" v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0"
id="videos" id="videosVo"
> >
<div class="video-title"> <div class="video-title">
<i class="el-icon-video-camera"></i> <!-- <i class="el-icon-video-camera"></i> -->
相关视频 相关视频
</div> </div>
<div class="video-names"> <div class="video-names">
...@@ -245,7 +236,7 @@ ...@@ -245,7 +236,7 @@
id="relateRelics" id="relateRelics"
> >
<div class="intro-title"> <div class="intro-title">
<i class="el-icon-menu" style="margin-right: 10px"></i> <!-- <i class="el-icon-menu" style="margin-right: 10px"></i> -->
<span>相关文物推荐</span> <span>相关文物推荐</span>
</div> </div>
<div class="recommend-type"> <div class="recommend-type">
...@@ -277,7 +268,7 @@ ...@@ -277,7 +268,7 @@
<!-- 相关文献 --> <!-- 相关文献 -->
<div <div
class="content-item display-detail_lts" class="content-item display-detail_lts"
id="literature" id="literatureVo"
v-if="CRDetail.literatureVo && CRDetail.literatureVo.length > 0" v-if="CRDetail.literatureVo && CRDetail.literatureVo.length > 0"
> >
<!-- <div class="wrapper"> --> <!-- <div class="wrapper"> -->
...@@ -363,7 +354,7 @@ import { getRCDetailByIdV2, crRecommendByPage } from "@/api/culturalRelic"; ...@@ -363,7 +354,7 @@ import { getRCDetailByIdV2, crRecommendByPage } from "@/api/culturalRelic";
import { previewFile } from "@/utils/index"; import { previewFile } from "@/utils/index";
import videoPlayer from "@/components/VideoPlayer"; import videoPlayer from "@/components/VideoPlayer";
import SlideImage from "@/components/SlideImage"; import SlideImage from "@/components/SlideImage";
import { isElementInViewport2 } from "@/utils/index";
export default { export default {
components: { components: {
AudioPlayer, AudioPlayer,
...@@ -386,8 +377,27 @@ export default { ...@@ -386,8 +377,27 @@ export default {
page: null, page: null,
currentRcKey: "type", currentRcKey: "type",
currentVideo: null, currentVideo: null,
currentTab: "intro", currentTab: null,
isFixed: false, isFixed: false,
tabbarData: [
{
name: "文物简介",
domId: "intro",
},
{
name: "相关视频",
domId: "videosVo",
},
{
name: "相关文物",
domId: "relateRelics",
},
{
name: "相关文献",
domId: "literatureVo",
},
],
// tabbarItems: ["文物简介", "相关视频", "相关文物", "相关文献"], // tabbarItems: ["文物简介", "相关视频", "相关文物", "相关文献"],
}; };
}, },
...@@ -402,11 +412,21 @@ export default { ...@@ -402,11 +412,21 @@ export default {
async mounted() { async mounted() {
let crId = this.$route.params.crId; let crId = this.$route.params.crId;
this.loadDetail(crId); this.loadDetail(crId);
setTimeout(() => {
window.addEventListener("scroll", this.initHeight); window.addEventListener("scroll", this.initHeight);
this.$nextTick(() => { this.offsetTop = document.querySelector("#tabbar").offsetTop; //距离offsetParent的高度
this.offsetTop = document.querySelector("#tabbar").offsetTop; this.tabbarData.map((item) => {
}); let dom = document.getElementById(item.domId);
if (dom) {
item.position = dom.offsetTop - 320; //100navbar 55tabbar
}
});
}, 500);
},
beforeRouteLeave(to, form, next) {
// 离开路由移除滚动事件
window.removeEventListener("scroll", this.initHeight);
next();
}, },
methods: { methods: {
async loadDetail(crId) { async loadDetail(crId) {
...@@ -543,10 +563,10 @@ export default { ...@@ -543,10 +563,10 @@ export default {
}, },
handleClickTabItem(item) { handleClickTabItem(item) {
console.log(item);
this.currentTab = item; this.currentTab = item;
let el = document.getElementById(item); if (item.position) {
el.scrollIntoView({ block: "center", behavior: "smooth" }); document.documentElement.scrollTop = item.position;
}
}, },
initHeight() { initHeight() {
...@@ -554,7 +574,13 @@ export default { ...@@ -554,7 +574,13 @@ export default {
window.pageYOffset || window.pageYOffset ||
document.documentElement.scrollTop || document.documentElement.scrollTop ||
document.body.scrollTop; document.body.scrollTop;
this.isFixed = scrollTop > this.offsetTop ? true : false; this.isFixed = scrollTop > this.offsetTop - 155 ? true : false; //100为navbar的高度，55为tabbar的高度
this.tabbarData.map((item) => {
let content = document.getElementById(item.domId);
if (content && isElementInViewport2(content)) {
this.currentTab = item;
}
});
}, },
}, },
}; };
...@@ -673,8 +699,10 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -673,8 +699,10 @@ $titleFontFamily: SourceHanSerifCN-Bold;
font-size: 26px; font-size: 26px;
font-weight: 400; font-weight: 400;
color: #2069c4; color: #2069c4;
line-height: 90px; font-family: "SourceHanSerifCN-Bold";
font-family: SourceHanSerifCN-Bold; display: flex;
align-items: center;
margin-bottom: 32px;
.svg-icon { .svg-icon {
margin-right: 10px; margin-right: 10px;
font-size: 36px; font-size: 36px;
...@@ -722,6 +750,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -722,6 +750,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
justify-content: center; justify-content: center;
min-height: 200px; min-height: 200px;
position: relative; position: relative;
background-color: #fff;
// margin: 36px 0 70px; // margin: 36px 0 70px;
/**基本信息 */ /**基本信息 */
.display-detail_basic_info { .display-detail_basic_info {
...@@ -933,18 +962,30 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -933,18 +962,30 @@ $titleFontFamily: SourceHanSerifCN-Bold;
} }
/**简介和视频 */ /**简介和视频 */
.display-detail_intro { .display-detail_intro {
// background-image: url("@/assets/imgs/display/normal/bg.png"); padding: 40px;
background-color: #fff;
background-size: 1%;
display: flex;
min-height: 200px;
.intro-content { .intro-content {
padding: 20px 46px;
line-height: 28px; line-height: 28px;
.intro-content-container { display: flex;
text-indent: 34px; }
font-size: 18px; .left-box {
} width: 60px;
background-color: $themeColor;
min-height: 200px;
color: #fff;
font-size: 28px;
writing-mode: vertical-rl;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 10px;
font-family: SourceHanSerifCN-Bold;
}
.intro-content-container {
flex: 1;
text-indent: 34px;
padding: 16px 32px;
background-color: rgba($themeColor, 10%);
} }
} }
...@@ -956,7 +997,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -956,7 +997,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
display: flex; display: flex;
// justify-content: center; // justify-content: center;
align-items: center; align-items: center;
font-size: 24px; font-size: 26px;
color: $themeColor; color: $themeColor;
margin: 80px 0 40px; margin: 80px 0 40px;
font-family: SourceHanSerifCN-Bold; font-family: SourceHanSerifCN-Bold;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论