Skip to content

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

优化展览预览图为middleUrl；优化默认主题的视频播放列表样式

上级 fe93a2d6
显示空白字符变更
内嵌 并排
正在显示 包含 451 行增加 和 231 行删除
src/components/SlideImage/index.vue
浏览文件 @ bfec4d17
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
v-for="(item, index) in imgList" v-for="(item, index) in imgList"
:key="index" :key="index"
> >
<img :src="$getFullUrl(item.pressUrl)" alt="" /> <img :src="$getFullUrl(item[imgKey])" alt="" />
<div class="enlarge" @click="handelPreviewImages(imgList,index)"> <div class="enlarge" @click="handelPreviewImages(imgList,index)">
<img src="@/assets/imgs/enlarge-s.png" alt="" /> <img src="@/assets/imgs/enlarge-s.png" alt="" />
</div> </div>
......
src/views/display/Detail.vue
浏览文件 @ bfec4d17
...@@ -48,7 +48,6 @@ export default { ...@@ -48,7 +48,6 @@ export default {
"displayType", "displayType",
"displayCharacter", "displayCharacter",
]); ]);
debugger
this.loadDetail(); this.loadDetail();
}, },
......
src/views/display/components/ChStyle.vue
浏览文件 @ bfec4d17
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
v-for="(item, index) in displayDetail.imagesVo" v-for="(item, index) in displayDetail.imagesVo"
:key="index" :key="index"
> >
<img :src="$getFullUrl(item.pressUrl || item.url)" alt="" /> <img :src="$getFullUrl(item.middleUrl || item.url)" alt="" />
<div class="modal"></div> <div class="modal"></div>
</div> </div>
</div> </div>
......
src/views/display/components/NormalStyle.vue
浏览文件 @ bfec4d17
...@@ -20,12 +20,22 @@ ...@@ -20,12 +20,22 @@
<!-- 展览基本信息 --> <!-- 展览基本信息 -->
<div class="content-item display-detail_basic_info"> <div class="content-item display-detail_basic_info">
<div class="info-container"> <div class="info-container">
<div v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" class="info-container-left"> <div
<SlideImage :imgList="displayDetail.imagesVo" v-if=" v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
class="info-container-left"
>
<SlideImage
:imgList="displayDetail.imagesVo"
:imgKey="'middleUrl'"
v-if="
displayDetail.imagesVo && displayDetail.imagesVo.length > 0 displayDetail.imagesVo && displayDetail.imagesVo.length > 0
" /> "
<SlideImage :imgList="[{ pressUrl: displayDetail.faceImagePressUrl }]" />
v-else-if="displayDetail.faceImagePressUrl" /> <SlideImage
:imgList="[{ middleUrl: displayDetail.faceImagePressUrl }]"
:imgKey="'middleUrl'"
v-else-if="displayDetail.faceImagePressUrl"
/>
</div> </div>
<div class="info-container-right"> <div class="info-container-right">
<div class="info-title"> <div class="info-title">
...@@ -96,33 +106,56 @@ ...@@ -96,33 +106,56 @@
/> --> /> -->
</div> </div>
<div class="tools"> <div class="tools">
<ReaderOperations :loveCount="displayDetail.loveCount" <ReaderOperations
:loveCount="displayDetail.loveCount"
:loveCountStatus="Boolean(displayDetail.loveCountStatus)" :loveCountStatus="Boolean(displayDetail.loveCountStatus)"
:collectCount="displayDetail.collectCount" :collectCountStatus=" :collectCount="displayDetail.collectCount"
:collectCountStatus="
Boolean(displayDetail.collectCountStatus) Boolean(displayDetail.collectCountStatus)
" :sourceId="displayDetail.exhibitionId" :title="displayDetail.title" "
:sourceType="'biz_exhibition'" @reload="reload" /> :sourceId="displayDetail.exhibitionId"
:title="displayDetail.title"
:sourceType="'biz_exhibition'"
@reload="reload"
/>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</div> </div>
<div class="audio" :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }" <div
@click="handleClickAudio" v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"> class="audio"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
@click="handleClickAudio"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
>
<img src="@/assets/imgs/display/normal/music.png" alt="" /> <img src="@/assets/imgs/display/normal/music.png" alt="" />
<!-- <svg-icon icon-class="music"></svg-icon> --> <!-- <svg-icon icon-class="music"></svg-icon> -->
<AudioPlayer style="display: none" :url="$getFullUrl(displayDetail.audiosVo[0].url)" ref="AudioPlayer" /> <AudioPlayer
style="display: none"
:url="$getFullUrl(displayDetail.audiosVo[0].url)"
ref="AudioPlayer"
/>
</div> </div>
</div> </div>
<div class="content-item display-detail_tabbar" id="tabbar" :class="{ isFixed: isFixed }"> <div
class="content-item display-detail_tabbar"
id="tabbar"
:class="{ isFixed: isFixed }"
>
<span v-for="(item, index) in tabbarData" :key="index"> <span v-for="(item, index) in tabbarData" :key="index">
<span @click="handleClickTabItem(item)" :class="[ <span
@click="handleClickTabItem(item)"
:class="[
'tab-item', 'tab-item',
currentTab && currentTab.domId == item.domId ? 'active' : '', currentTab && currentTab.domId == item.domId ? 'active' : '',
]" v-html="item.name" v-if=" ]"
v-html="item.name"
v-if="
displayDetail[item.domId] && displayDetail[item.domId] &&
displayDetail[item.domId].length > 0 displayDetail[item.domId].length > 0
"> "
>
</span> </span>
</span> </span>
</div> </div>
...@@ -135,11 +168,18 @@ ...@@ -135,11 +168,18 @@
</div> </div>
<div class="intro-content"> <div class="intro-content">
<div class="left-box">简介</div> <div class="left-box">简介</div>
<div class="intro-content-container" v-html="displayDetail.intro"></div> <div
class="intro-content-container"
v-html="displayDetail.intro"
></div>
</div> </div>
</div> </div>
<div class="display-detail_virtual content-item" v-if="displayDetail.virtualVo.length > 0" id="virtualVo"> <div
class="display-detail_virtual content-item"
v-if="displayDetail.virtualVo.length > 0"
id="virtualVo"
>
<div class="custom_title"> <div class="custom_title">
<div class="center"> <div class="center">
<!-- <svg-icon icon-class="wenxian"></svg-icon> --> <!-- <svg-icon icon-class="wenxian"></svg-icon> -->
...@@ -147,8 +187,12 @@ ...@@ -147,8 +187,12 @@
</div> </div>
</div> </div>
<div class="vr-content"> <div class="vr-content">
<div class="img-container" @click="handleToVR(item)" v-for="(item, index) in displayDetail.virtualVo" <div
:key="index"> class="img-container"
@click="handleToVR(item)"
v-for="(item, index) in displayDetail.virtualVo"
:key="index"
>
<img :src="$getFullUrl(item.faceImagePressUrl)" alt="" /> <img :src="$getFullUrl(item.faceImagePressUrl)" alt="" />
<div class="modal"> <div class="modal">
<svg-icon icon-class="360"></svg-icon> <svg-icon icon-class="360"></svg-icon>
...@@ -158,13 +202,16 @@ ...@@ -158,13 +202,16 @@
</div> </div>
</div> </div>
<!-- 展览视频 --> <!-- 展览视频 -->
<div id="videosVo" class="content-item videos" <div
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"> id="videosVo"
class="content-item videos"
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
>
<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">
<swiper class="swiper video-swiper" :options="videoSwiperOption" ref="unitSwiper" v-if="currentVideo"> <swiper class="swiper video-swiper" :options="videoSwiperOption" ref="unitSwiper" v-if="currentVideo">
<swiper-slide :class="[ <swiper-slide :class="[
'slide-item', 'slide-item',
...@@ -180,48 +227,81 @@ ...@@ -180,48 +227,81 @@
<div class="swiper-button-next video-swiper-button-next" slot="button-next"> <div class="swiper-button-next video-swiper-button-next" slot="button-next">
<i class="el-icon-arrow-right"></i> <i class="el-icon-arrow-right"></i>
</div> </div>
<!-- <div class="video-item" v-for="(item, index) in displayDetail.videosVo" :key="index" </div> -->
@click="handleChangeCurrentVideo(item)"> <div class="video-content">
<div :class="[ <div class="player">
<video-player
v-if="currentVideo && currentVideo.url"
:src="$getFullUrl(currentVideo.url)"
class="video-player"
>
</video-player>
</div>
<div class="video-name-list">
<div class="title">播放列表</div>
<el-row>
<el-col
:span="12"
:class="[
'name', 'name',
currentVideo && item.fileId == currentVideo.fileId item.fileId == currentVideo.fileId ? 'active' : '',
? 'active' ]"
: '', v-for="(item, index) in displayDetail.videosVo"
]"> :key="index"
{{ item.name.split(".")[0] }} @click.native="handleChangeCurrentVideo(item)"
>
{{ item.name.split(".")[0] }}</el-col
>
</el-row>
</div> </div>
</div> -->
</div> </div>
<video-player v-if="currentVideo && currentVideo.url" :src="$getFullUrl(currentVideo.url)" class="video-box">
</video-player>
</div> </div>
<!--展览单元 --> <!--展览单元 -->
<div class="content-item display-detail_units" ref="units" v-if="displayDetail.exhibitionUnits.length > 0" <div
id="exhibitionUnits"> class="content-item display-detail_units"
ref="units"
v-if="displayDetail.exhibitionUnits.length > 0"
id="exhibitionUnits"
>
<div class="custom_title"> <div class="custom_title">
<div class="center"> <div class="center">
<span class="title">展览单元</span> <span class="title">展览单元</span>
</div> </div>
</div> </div>
<NormalStyleUnit :curUnit="curUnit" :exhibitionUnits="displayDetail.exhibitionUnits" <NormalStyleUnit
@handleClickUnit="handleClickUnit" @handelPreviewImages="handelPreviewImages" @handleToCr="handleToCr" /> :curUnit="curUnit"
:exhibitionUnits="displayDetail.exhibitionUnits"
@handleClickUnit="handleClickUnit"
@handelPreviewImages="handelPreviewImages"
@handleToCr="handleToCr"
/>
</div> </div>
<!--展览相关文物 --> <!--展览相关文物 -->
<div class="content-item display-detail_relateRc" ref="units" v-if=" <div
class="content-item display-detail_relateRc"
ref="units"
v-if="
displayDetail.culturalRelicVo && displayDetail.culturalRelicVo &&
displayDetail.culturalRelicVo.length > 0 displayDetail.culturalRelicVo.length > 0
" id="culturalRelicVo"> "
id="culturalRelicVo"
>
<div class="cr-title">展览文物</div> <div class="cr-title">展览文物</div>
<SlideImageGroup :imgList="displayDetail.culturalRelicVo"> <SlideImageGroup :imgList="displayDetail.culturalRelicVo">
<template slot-scope="{ item }" slot="img"> <template slot-scope="{ item }" slot="img">
<img :src="$getFullUrl(item.faceImagePressUrl)" alt="" style=" <img
:src="$getFullUrl(item.faceImagePressUrl)"
alt=""
style="
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: fill; object-fit: fill;
cursor: pointer; cursor: pointer;
" @click="handleToCr(item)" /> "
@click="handleToCr(item)"
/>
</template> </template>
<template slot-scope="{ item }" slot="info"> <template slot-scope="{ item }" slot="info">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
...@@ -229,9 +309,13 @@ ...@@ -229,9 +309,13 @@
</SlideImageGroup> </SlideImageGroup>
</div> </div>
<!-- 相关文献 --> <!-- 相关文献 -->
<div class="content-item display-detail_lts" v-if=" <div
class="content-item display-detail_lts"
v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0 displayDetail.literatureVo && displayDetail.literatureVo.length > 0
" id="literatureVo"> "
id="literatureVo"
>
<div class="custom_title"> <div class="custom_title">
<div class="center"> <div class="center">
<!-- <svg-icon icon-class="wenxian"></svg-icon> --> <!-- <svg-icon icon-class="wenxian"></svg-icon> -->
...@@ -239,19 +323,31 @@ ...@@ -239,19 +323,31 @@
</div> </div>
</div> </div>
<div class="lts-content"> <div class="lts-content">
<div class="lt-item" v-for="(item, index) in displayDetail.literatureVo" :key="index" <div
@click="handleViewLt(item)"> class="lt-item"
v-for="(item, index) in displayDetail.literatureVo"
:key="index"
@click="handleViewLt(item)"
>
<span class="lt-order">[{{ index + 1 }}]</span> <span class="lt-order">[{{ index + 1 }}]</span>
<span class="lt-authors" v-if="item.authors">{{ item.authors }}.</span> <span class="lt-authors" v-if="item.authors"
>{{ item.authors }}.</span
>
<span class="lt-name" v-if="item.name">{{ item.name }}.</span> <span class="lt-name" v-if="item.name">{{ item.name }}.</span>
<span class="lt-source" v-if="item.source">{{ item.source }}.</span> <span class="lt-source" v-if="item.source"
>{{ item.source }}.</span
>
<span class="lt-date" v-if="item.date">{{ item.date }}</span> <span class="lt-date" v-if="item.date">{{ item.date }}</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" /> <el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
</div> </div>
</template> </template>
...@@ -264,7 +360,7 @@ import SlideImageGroup from "@/components/SlideImageGroup"; ...@@ -264,7 +360,7 @@ import SlideImageGroup from "@/components/SlideImageGroup";
import { swiper, swiperSlide } from "vue-awesome-swiper"; import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css"; import "swiper/dist/css/swiper.css";
import { isElementInViewport2 } from "@/utils/index"; import { isElementInViewport2 } from "@/utils/index";
import NormalStyleUnit from './NormalStyleUnit.vue' import NormalStyleUnit from "./NormalStyleUnit.vue";
import videoPlayer from "@/components/VideoPlayer"; import videoPlayer from "@/components/VideoPlayer";
export default { export default {
name: "NormalStyle", name: "NormalStyle",
...@@ -369,7 +465,7 @@ export default { ...@@ -369,7 +465,7 @@ export default {
this.displayDetail.exhibitionUnits.length > 0 this.displayDetail.exhibitionUnits.length > 0
) { ) {
this.curUnit = this.displayDetail.exhibitionUnits[0]; this.curUnit = this.displayDetail.exhibitionUnits[0];
this.expandUnitInfo() this.expandUnitInfo();
} }
processUnit(this.displayDetail.exhibitionUnits); processUnit(this.displayDetail.exhibitionUnits);
...@@ -388,7 +484,6 @@ export default { ...@@ -388,7 +484,6 @@ export default {
}; };
} }
function processUnit(list) { function processUnit(list) {
for (let o of list || []) { for (let o of list || []) {
if (o.children) { if (o.children) {
...@@ -438,13 +533,12 @@ export default { ...@@ -438,13 +533,12 @@ export default {
}; };
}, },
// 预览关联文献 // 预览关联文献
handleViewLt(item) { handleViewLt(item) {
if (item.files[0].url) { if (item.files[0].url) {
previewFile(item.files[0].url, item.files[0].name); previewFile(item.files[0].url, item.files[0].name);
} else { } else {
this.$message.info('当前文献暂不支持在线浏览') this.$message.info("当前文献暂不支持在线浏览");
} }
}, },
...@@ -474,7 +568,7 @@ export default { ...@@ -474,7 +568,7 @@ export default {
handleClickUnit(item) { handleClickUnit(item) {
this.curUnit = item; this.curUnit = item;
this.expandUnitInfo() this.expandUnitInfo();
}, },
handleToCr(item) { handleToCr(item) {
...@@ -518,19 +612,23 @@ export default { ...@@ -518,19 +612,23 @@ export default {
expandUnitInfo() { expandUnitInfo() {
// 将每个单元下的所有数据变成key-value形式，方便遍历 // 将每个单元下的所有数据变成key-value形式，方便遍历
let newUnits = {} let newUnits = {};
traveseUnits(this.curUnit) traveseUnits(this.curUnit);
this.$set(this.curUnit, 'expandUnitInfo', JSON.parse(JSON.stringify(newUnits))) this.$set(
this.curUnit,
"expandUnitInfo",
JSON.parse(JSON.stringify(newUnits))
);
function traveseUnits(obj) { function traveseUnits(obj) {
newUnits[obj.title] = obj newUnits[obj.title] = obj;
if (obj.children && obj.children.length > 0) { if (obj.children && obj.children.length > 0) {
obj.children.map(item => { obj.children.map((item) => {
traveseUnits(item) traveseUnits(item);
}) });
}
} }
} }
}, },
},
}; };
</script> </script>
...@@ -546,9 +644,9 @@ export default { ...@@ -546,9 +644,9 @@ export default {
cursor: pointer; cursor: pointer;
} }
.display-detail_intro{ .display-detail_intro {
.intro-content{ .intro-content {
p{ p {
font-family: $defaultFontFamily !important; font-family: $defaultFontFamily !important;
} }
} }
...@@ -705,7 +803,6 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -705,7 +803,6 @@ $titleFontFamily: SourceHanSerifCN-Bold;
overflow: hidden; overflow: hidden;
.imagesVo-image-container { .imagesVo-image-container {
// position: relative; // position: relative;
.img-container { .img-container {
height: 100%; height: 100%;
...@@ -870,7 +967,6 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -870,7 +967,6 @@ $titleFontFamily: SourceHanSerifCN-Bold;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
&:hover { &:hover {
color: $themeColor; color: $themeColor;
...@@ -978,36 +1074,25 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -978,36 +1074,25 @@ $titleFontFamily: SourceHanSerifCN-Bold;
margin-right: 10px; margin-right: 10px;
} }
} }
.video-content {
.video-names {
display: flex; display: flex;
justify-content: center; .player {
margin-bottom: 30px; flex: 1;
position: relative; margin-right: 20px;
height: 600px;
.video-swiper-button-next,
.video-swiper-button-prev {
// background-color: rgba(0,0,0,0.2);
// border-radius: 50%;
background-image: none;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
color: $themeColor;
font-weight: bolder;
font-size: 28px;
transform: translateY(-6px);
} }
.swiper-container { .video-name-list {
width: 90%; width: 300px;
& > .title {
.slide-item { font-size: 18px;
font-weight: bold;
color: #333;
margin-bottom: 8px;
}
.name {
padding: 8px; padding: 8px;
border-radius: 4px; // border-radius: 4px;
color: $themeColor; color: $themeColor;
cursor: pointer; cursor: pointer;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -1015,73 +1100,68 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1015,73 +1100,68 @@ $titleFontFamily: SourceHanSerifCN-Bold;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
border: 1px solid $themeColor; border: 1px solid $themeColor;
font-size: 14px;
&:hover {
background: $themeColor;
color: $themeSecondaryColor;
}
&:not(&:last-child) {
border-bottom: none;
}
// margin-bottom: 12px;
} }
.active { .active {
background: $themeColor; background: $themeColor;
color: #fff; color: $themeSecondaryColor;
}
} }
} }
// .video-item { // .video-names {
// font-size: 18px; // display: flex;
// margin: 8px 30px; // justify-content: center;
// margin-bottom: 30px;
// .name {
// color: #999;
// position: relative; // position: relative;
// cursor: pointer;
// &:hover { // .video-swiper-button-next,
// .video-swiper-button-prev {
// // background-color: rgba(0,0,0,0.2);
// // border-radius: 50%;
// background-image: none;
// width: 60px;
// height: 60px;
// display: flex;
// justify-content: center;
// align-items: center;
// color: $themeColor; // color: $themeColor;
// font-weight: bolder;
// &::after { // font-size: 28px;
// display: inline-block; // transform: translateY(-6px);
// } // }
// &::before { // .swiper-container {
// display: inline-block; // width: 90%;
// }
// }
// }
// .active::after, // .slide-item {
// .name::after { // padding: 8px;
// content: ""; // border-radius: 4px;
// width: 50%; // color: $themeColor;
// height: 1px; // cursor: pointer;
// background-color: $themeColor; // text-overflow: ellipsis;
// position: absolute; // overflow: hidden;
// left: 0; // width: 100%;
// bottom: -9px; // white-space: nowrap;
// left: 50%; // border: 1px solid $themeColor;
// transform: translateX(-50%); // font-size: 14px;
// display: none;
// } // }
// .active::before, // .active {
// .name::before { // background: $themeColor;
// content: ""; // color: #fff;
// width: 0;
// height: 0;
// border: 8px solid transparent;
// border-top-color: $themeColor;
// position: absolute;
// left: 50%;
// bottom: -25px;
// transform: translateX(-50%);
// display: none;
// } // }
// .active::after,
// .active::before {
// display: inline-block;
// } // }
// } // }
}
.video-box { .video-box {
height: 600px; height: 600px;
...@@ -1091,7 +1171,6 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1091,7 +1171,6 @@ $titleFontFamily: SourceHanSerifCN-Bold;
height: 100%; height: 100%;
} }
} }
} }
// 虚拟展 // 虚拟展
...@@ -1220,7 +1299,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1220,7 +1299,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
border-bottom: 1px dashed #ccc; border-bottom: 1px dashed #ccc;
padding-bottom: 9px; padding-bottom: 9px;
&>span { & > span {
padding: 0 4px; padding: 0 4px;
} }
} }
...@@ -1252,8 +1331,11 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1252,8 +1331,11 @@ $titleFontFamily: SourceHanSerifCN-Bold;
} }
//有子节点 且已展开 //有子节点 且已展开
::v-deep .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before { ::v-deep
background: url("~@/assets/imgs/display/normal/tree-node-s.png") no-repeat 0 3px; .el-tree
.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
background: url("~@/assets/imgs/display/normal/tree-node-s.png") no-repeat 0
3px;
content: ""; content: "";
display: block; display: block;
width: 16px; width: 16px;
......
src/views/display/components/RedStyle.vue
浏览文件 @ bfec4d17
...@@ -2,12 +2,16 @@ ...@@ -2,12 +2,16 @@
<div class="display-detail"> <div class="display-detail">
<div class="content" id="content"> <div class="content" id="content">
<!-- 展览图片 --> <!-- 展览图片 -->
<div class=" <div
class="
content-item content-item
display-detail_imgs display-detail_imgs
wow wow
animate__animated animate__fadeInDownBig animate__animated animate__fadeInDownBig
" ref="imgs" v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"> "
ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
>
<!-- <el-carousel height="430px"> <!-- <el-carousel height="430px">
<el-carousel-item <el-carousel-item
v-for="(item, index) in displayDetail.imagesVo" v-for="(item, index) in displayDetail.imagesVo"
...@@ -18,20 +22,30 @@ ...@@ -18,20 +22,30 @@
</div> </div>
</el-carousel-item> </el-carousel-item>
</el-carousel> --> </el-carousel> -->
<img id="faceImage" v-if="displayDetail.faceImagePressUrl" class="animate__animated animate__fadeInDownBig" <img
:src="$getFullUrl(displayDetail.faceImagePressUrl)" /> id="faceImage"
<img class="animate__animated animate__fadeInDownBig" v-if="displayDetail.faceImageMiddleUrl"
v-else-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" id="faceImage" class="animate__animated animate__fadeInDownBig"
:src="$getFullUrl(displayDetail.imagesVo[0].pressUrl)" /> :src="$getFullUrl(displayDetail.faceImageMiddleUrl)"
/>
<img
class="animate__animated animate__fadeInDownBig"
v-else-if="
displayDetail.imagesVo && displayDetail.imagesVo.length > 0
"
id="faceImage"
:src="$getFullUrl(displayDetail.imagesVo[0].middleUrl)"
/>
</div> </div>
<!-- 展览基本信息 --> <!-- 展览基本信息 -->
<div class=" <div
class="
content-item content-item
display-detail_basic_info display-detail_basic_info
wow wow
animate__animated animate__fadeInUp animate__animated animate__fadeInUp
"> "
>
<div class="wrapper"> <div class="wrapper">
<div class="top"> <div class="top">
<div class="top-wrapper"> <div class="top-wrapper">
...@@ -55,11 +69,16 @@ ...@@ -55,11 +69,16 @@
</div> </div>
<div class="info-container"> <div class="info-container">
<div class="info-container-left"> <div class="info-container-left">
<SlideImage :imgList="displayDetail.imagesVo" v-if=" <SlideImage
:imgList="displayDetail.imagesVo"
v-if="
displayDetail.imagesVo && displayDetail.imagesVo.length > 0 displayDetail.imagesVo && displayDetail.imagesVo.length > 0
" /> "
<SlideImage :imgList="[{ pressUrl: displayDetail.faceImagePressUrl }]" />
v-else-if="displayDetail.faceImagePressUrl" /> <SlideImage
:imgList="[{ pressUrl: displayDetail.faceImagePressUrl }]"
v-else-if="displayDetail.faceImagePressUrl"
/>
<!-- <el-carousel> <!-- <el-carousel>
<el-carousel-item v-for="(item, index) in displayDetail.imagesVo" :key="index" <el-carousel-item v-for="(item, index) in displayDetail.imagesVo" :key="index"
class="imagesVo-image-container"> class="imagesVo-image-container">
...@@ -141,12 +160,19 @@ ...@@ -141,12 +160,19 @@
</div> </div>
</el-col> </el-col>
<el-col :span="11" class="reader-operations"> <el-col :span="11" class="reader-operations">
<ReaderOperations :loveCount="displayDetail.loveCount" <ReaderOperations
:loveCountStatus="Boolean(displayDetail.loveCountStatus)" :collectCount="displayDetail.collectCount" :loveCount="displayDetail.loveCount"
:loveCountStatus="Boolean(displayDetail.loveCountStatus)"
:collectCount="displayDetail.collectCount"
:collectCountStatus=" :collectCountStatus="
Boolean(displayDetail.collectCountStatus) Boolean(displayDetail.collectCountStatus)
" :sourceId="displayDetail.exhibitionId" :title="displayDetail.title" "
:sourceType="'biz_exhibition'" @reload="reload" :selectColor="'#a30e0c'" /> :sourceId="displayDetail.exhibitionId"
:title="displayDetail.title"
:sourceType="'biz_exhibition'"
@reload="reload"
:selectColor="'#a30e0c'"
/>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -154,52 +180,77 @@ ...@@ -154,52 +180,77 @@
</div> </div>
</div> </div>
<!-- 展览简介 --> <!-- 展览简介 -->
<div class=" <div
class="
content-item content-item
display-detail_intro display-detail_intro
wow wow
animate__animated animate__fadeInUp animate__animated animate__fadeInUp
"> "
>
<div class="wrapper"> <div class="wrapper">
<div class="custom-title">展览简介</div> <div class="custom-title">展览简介</div>
<div class="intro-content"> <div class="intro-content">
<div class="intro-content-container" v-html="displayDetail.intro"></div> <div
class="intro-content-container"
v-html="displayDetail.intro"
></div>
</div> </div>
</div> </div>
</div> </div>
<!-- 视频 --> <!-- 视频 -->
<div class=" <div
class="
content-item content-item
display-detail_videos display-detail_videos
wow wow
animate__animated animate__fadeInRight animate__animated animate__fadeInRight
" v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"> "
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
>
<div class="wrapper"> <div class="wrapper">
<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">
<div class="video-item" v-for="(item, index) in displayDetail.videosVo" :key="index" <div
@click="handleChangeCurrentVideo(item)"> class="video-item"
<div :class="[ v-for="(item, index) in displayDetail.videosVo"
:key="index"
@click="handleChangeCurrentVideo(item)"
>
<div
:class="[
'name', 'name',
currentVideo && item.fileId == currentVideo.fileId currentVideo && item.fileId == currentVideo.fileId
? 'active' ? 'active'
: '', : '',
]"> ]"
>
{{ item.name.split(".")[0] }} {{ item.name.split(".")[0] }}
</div> </div>
</div> </div>
</div> </div>
<video-player v-if="currentVideo" :src="$getFullUrl(currentVideo.url)" class="video-box"></video-player> <video-player
v-if="currentVideo"
:src="$getFullUrl(currentVideo.url)"
class="video-box"
></video-player>
</div> </div>
</div> </div>
<!-- 虚拟展厅 --> <!-- 虚拟展厅 -->
<div class="display-detail_virtual content-item" v-if="displayDetail.virtualVo.length > 0"> <div
class="display-detail_virtual content-item"
v-if="displayDetail.virtualVo.length > 0"
>
<div class="wrapper"> <div class="wrapper">
<div class="img-container" @click="handleToVR(item)" v-for="(item, index) in displayDetail.virtualVo" <div
:key="index"> class="img-container"
@click="handleToVR(item)"
v-for="(item, index) in displayDetail.virtualVo"
:key="index"
>
<img :src="item.faceImagePressUrl" alt="" /> <img :src="item.faceImagePressUrl" alt="" />
<div class="modal"> <div class="modal">
<svg-icon icon-class="360"></svg-icon> <svg-icon icon-class="360"></svg-icon>
...@@ -209,21 +260,32 @@ ...@@ -209,21 +260,32 @@
</div> </div>
</div> </div>
<!--展览单元 --> <!--展览单元 -->
<div class=" <div
class="
content-item content-item
display-detail_units display-detail_units
wow wow
animate__animated animate__fadeInUp animate__animated animate__fadeInUp
" ref="units" v-if="displayDetail.exhibitionUnits.length > 0"> "
ref="units"
v-if="displayDetail.exhibitionUnits.length > 0"
>
<div class="wrapper unit-wraraper"> <div class="wrapper unit-wraraper">
<div class="custom-title units">展览单元</div> <div class="custom-title units">展览单元</div>
<div class="units-content"> <div class="units-content">
<div class="left-menu"> <div class="left-menu">
<div class="left-menu-item" v-for="(item, index) in displayDetail.exhibitionUnits" :key="index" <div
@click="handleClickUnitTitle(item)"> class="left-menu-item"
v-for="(item, index) in displayDetail.exhibitionUnits"
:key="index"
@click="handleClickUnitTitle(item)"
>
<!-- {{ item.imagesVo }} --> <!-- {{ item.imagesVo }} -->
<div :class="{ 'base-img': true, active: currentUnit == item }" :id="item.euId" <div
v-if="item.imagesVo && item.imagesVo.length > 0"> :class="{ 'base-img': true, active: currentUnit == item }"
:id="item.euId"
v-if="item.imagesVo && item.imagesVo.length > 0"
>
<img :src="$getFullUrl(item.imagesVo[0].pressUrl)" alt="" /> <img :src="$getFullUrl(item.imagesVo[0].pressUrl)" alt="" />
</div> </div>
<div class="text"> <div class="text">
...@@ -233,46 +295,92 @@ ...@@ -233,46 +295,92 @@
</div> </div>
<div class="right-content"> <div class="right-content">
<div class="unit-content"> <div class="unit-content">
<div class="unit-content-container" v-for="(unitValue, unitTitle) in currentUnit.expandUnitInfo" <div
:key="unitTitle"> class="unit-content-container"
v-for="(unitValue, unitTitle) in currentUnit.expandUnitInfo"
:key="unitTitle"
>
<div class="unit-content-title"> <div class="unit-content-title">
{{ unitTitle }} {{ unitTitle }}
</div> </div>
<div class="text-indent unit-content_intro" v-if="currentUnit.intro" v-html="unitValue.intro"></div> <div
<div class="unit-content_images" v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0"> class="text-indent unit-content_intro"
v-if="currentUnit.intro"
v-html="unitValue.intro"
></div>
<div
class="unit-content_images"
v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0"
>
<div class="imgs-title">单元图片</div> <div class="imgs-title">单元图片</div>
<div class="unit-imgs"> <div class="unit-imgs">
<SlideImageGroup
<SlideImageGroup :imgList="unitValue.imagesVo" :needEnlarge="true" :imgList="unitValue.imagesVo"
v-if="unitValue.imagesVo.length > 3"> :needEnlarge="true"
v-if="unitValue.imagesVo.length > 3"
>
<template slot-scope="{ item }" slot="img"> <template slot-scope="{ item }" slot="img">
<img :src="$getFullUrl(item.pressUrl)" alt="" <img
style="width: 100%; height: 100%; object-fit: contain" /> :src="$getFullUrl(item.pressUrl)"
alt=""
style="
width: 100%;
height: 100%;
object-fit: contain;
"
/>
</template> </template>
</SlideImageGroup> </SlideImageGroup>
<el-row v-if="unitValue.imagesVo.length > 0 && unitValue.imagesVo.length < 4" :gutter="10"> <el-row
<el-col v-for="(item, index) in unitValue.imagesVo" :key="index" v-if="
:span="24 / unitValue.imagesVo.length" style="height:300px"> unitValue.imagesVo.length > 0 &&
<img :src="$getFullUrl(item.pressUrl)" alt="" unitValue.imagesVo.length < 4
style="width: 100%; height: 100%; object-fit: contain;cursor: pointer;" "
@click="handelPreviewImages(unitValue.imagesVo)" /> :gutter="10"
>
<el-col
v-for="(item, index) in unitValue.imagesVo"
:key="index"
:span="24 / unitValue.imagesVo.length"
style="height: 300px"
>
<img
:src="$getFullUrl(item.pressUrl)"
alt=""
style="
width: 100%;
height: 100%;
object-fit: contain;
cursor: pointer;
"
@click="handelPreviewImages(unitValue.imagesVo)"
/>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</div> </div>
<div class="unit-content_crs" v-if=" <div
unitValue.culturalRelics && unitValue.culturalRelics.length > 0 class="unit-content_crs"
"> v-if="
unitValue.culturalRelics &&
unitValue.culturalRelics.length > 0
"
>
<div class="imgs-title">单元文物</div> <div class="imgs-title">单元文物</div>
<SlideImageGroup :imgList="unitValue.culturalRelics"> <SlideImageGroup :imgList="unitValue.culturalRelics">
<template slot-scope="{ item }" slot="img"> <template slot-scope="{ item }" slot="img">
<img :src="$getFullUrl(item.faceImagePressUrl)" alt="" style=" <img
:src="$getFullUrl(item.faceImagePressUrl)"
alt=""
style="
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: fill; object-fit: fill;
cursor: pointer; cursor: pointer;
" @click="handleToCr(item)" /> "
@click="handleToCr(item)"
/>
</template> </template>
<template slot-scope="{ item }" slot="info"> <template slot-scope="{ item }" slot="info">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
...@@ -398,25 +506,48 @@ ...@@ -398,25 +506,48 @@
</div> </div>
</div> </div>
<!-- 相关文献 --> <!-- 相关文献 -->
<div class=" <div
class="
content-item content-item
display-detail_lts display-detail_lts
wow wow
animate__animated animate__fadeInUp animate__animated animate__fadeInUp
" v-if=" "
v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0 displayDetail.literatureVo && displayDetail.literatureVo.length > 0
"> "
>
<div class="wrapper"> <div class="wrapper">
<div class="custom-title">相关文献</div> <div class="custom-title">相关文献</div>
<div class="lts-content"> <div class="lts-content">
<el-table :data="displayDetail.literatureVo" :header-cell-style="{ <el-table
:data="displayDetail.literatureVo"
:header-cell-style="{
background: '#eeeeee', background: '#eeeeee',
color: '#333', color: '#333',
}" :row-style="tableRowStyle"> }"
<el-table-column prop="name" label="名称" align="center"></el-table-column> :row-style="tableRowStyle"
<el-table-column prop="authors" label="作者" align="center"></el-table-column> >
<el-table-column prop="date" label="出版时间" align="center"></el-table-column> <el-table-column
<el-table-column align="center" prop="source" label="出版所在刊物"></el-table-column> prop="name"
label="名称"
align="center"
></el-table-column>
<el-table-column
prop="authors"
label="作者"
align="center"
></el-table-column>
<el-table-column
prop="date"
label="出版时间"
align="center"
></el-table-column>
<el-table-column
align="center"
prop="source"
label="出版所在刊物"
></el-table-column>
<el-table-column label="阅读" align="center"> <el-table-column label="阅读" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="pdf-img" @click="handleViewLt(scope.row)"> <div class="pdf-img" @click="handleViewLt(scope.row)">
...@@ -429,7 +560,11 @@ ...@@ -429,7 +560,11 @@
</div> </div>
</div> </div>
</div> </div>
<el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" /> <el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
</div> </div>
</template> </template>
...@@ -518,7 +653,7 @@ export default { ...@@ -518,7 +653,7 @@ export default {
this.displayDetail.exhibitionUnits.length > 0 this.displayDetail.exhibitionUnits.length > 0
? this.displayDetail.exhibitionUnits[0] ? this.displayDetail.exhibitionUnits[0]
: null; : null;
this.expandUnitInfo() this.expandUnitInfo();
function processUnit(list) { function processUnit(list) {
for (let o of list || []) { for (let o of list || []) {
if (o.children) { if (o.children) {
...@@ -545,7 +680,7 @@ export default { ...@@ -545,7 +680,7 @@ export default {
// this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭"); // this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
// this.$refs.AudioPlayer.play(); // this.$refs.AudioPlayer.play();
// } // }
// this.replaceFaceImage(); this.replaceFaceImage();
}); });
}, },
...@@ -619,20 +754,24 @@ export default { ...@@ -619,20 +754,24 @@ export default {
handleClickUnitTitle(item) { handleClickUnitTitle(item) {
this.currentUnit = item; this.currentUnit = item;
this.expandUnitInfo() this.expandUnitInfo();
}, },
expandUnitInfo() { expandUnitInfo() {
// 将每个单元下的所有数据变成key-value形式，方便遍历 // 将每个单元下的所有数据变成key-value形式，方便遍历
let newUnits = {} let newUnits = {};
traveseUnits(this.currentUnit) traveseUnits(this.currentUnit);
this.$set(this.currentUnit, 'expandUnitInfo', JSON.parse(JSON.stringify(newUnits))) this.$set(
this.currentUnit,
"expandUnitInfo",
JSON.parse(JSON.stringify(newUnits))
);
function traveseUnits(obj) { function traveseUnits(obj) {
newUnits[obj.title] = obj newUnits[obj.title] = obj;
if (obj.children && obj.children.length > 0) { if (obj.children && obj.children.length > 0) {
obj.children.map(item => { obj.children.map((item) => {
traveseUnits(item) traveseUnits(item);
}) });
} }
} }
}, },
...@@ -751,7 +890,6 @@ $themeColor: #a30e0c; ...@@ -751,7 +890,6 @@ $themeColor: #a30e0c;
overflow: hidden; overflow: hidden;
&:hover { &:hover {
.top-list, .top-list,
.bottom-list { .bottom-list {
animation-play-state: paused; animation-play-state: paused;
...@@ -806,7 +944,6 @@ $themeColor: #a30e0c; ...@@ -806,7 +944,6 @@ $themeColor: #a30e0c;
overflow: hidden; overflow: hidden;
.imagesVo-image-container { .imagesVo-image-container {
// position: relative; // position: relative;
.img-container { .img-container {
height: 100%; height: 100%;
...@@ -1084,7 +1221,8 @@ $themeColor: #a30e0c; ...@@ -1084,7 +1221,8 @@ $themeColor: #a30e0c;
// height: 750px; // height: 750px;
// height: calc(100vh); // height: calc(100vh);
background-image: url("@/assets/imgs/display/red/unit-bg.jpg"); background-image: url("@/assets/imgs/display/red/unit-bg.jpg");
background-size: 100% 100%;
padding-bottom: 32px;
.wrapper { .wrapper {
// width; // width;
display: flex; display: flex;
...@@ -1192,7 +1330,8 @@ $themeColor: #a30e0c; ...@@ -1192,7 +1330,8 @@ $themeColor: #a30e0c;
// flex: 1; // flex: 1;
padding: 60px 40px 0; padding: 60px 40px 0;
.unit-content-container {} .unit-content-container {
}
.unit-content-title { .unit-content-title {
font-size: 24px; font-size: 24px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论