Skip to content

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

红色主题动效

上级 986d8eef
显示空白字符变更
内嵌 并排
正在显示 包含 1312 行增加 和 894 行删除
package-lock.json
浏览文件 @ cb92fbc6
......@@ -23,7 +23,6 @@
"sass-loader": "^13.0.2",
"svgo": "^2.8.0",
"vue": "^2.6.14",
"vue-awesome-swiper": "^3.1.3",
"vue-router": "^3.5.1",
"vuex": "^3.6.2",
"wowjs": "^1.1.3"
......@@ -45,6 +44,7 @@
"sass": "^1.32.7",
"svg-sprite-loader": "^6.0.11",
"terser-webpack-plugin": "^5.3.3",
"vue-awesome-swiper": "^3.1.3",
"vue-template-compiler": "^2.6.14"
}
},
......@@ -5300,6 +5300,7 @@
"version": "2.1.5",
"resolved": "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz",
"integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
"dev": true,
"dependencies": {
"ssr-window": "^2.0.0"
}
......@@ -5307,7 +5308,8 @@
"node_modules/dom7/node_modules/ssr-window": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-2.0.0.tgz",
"integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
"integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A==",
"dev": true
},
"node_modules/domelementtype": {
"version": "2.3.0",
......@@ -12609,7 +12611,8 @@
"node_modules/ssr-window": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-1.0.1.tgz",
"integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
"integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg==",
"dev": true
},
"node_modules/ssri": {
"version": "8.0.1",
......@@ -13238,6 +13241,7 @@
"version": "4.5.1",
"resolved": "https://registry.npmmirror.com/swiper/-/swiper-4.5.1.tgz",
"integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
"dev": true,
"hasInstallScript": true,
"dependencies": {
"dom7": "^2.1.3",
......@@ -13974,6 +13978,7 @@
"version": "3.1.3",
"resolved": "https://registry.npmmirror.com/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
"integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
"dev": true,
"dependencies": {
"object-assign": "^4.1.1",
"swiper": "^4.0.7"
......@@ -18979,6 +18984,7 @@
"version": "2.1.5",
"resolved": "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz",
"integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
"dev": true,
"requires": {
"ssr-window": "^2.0.0"
},
......@@ -18986,7 +18992,8 @@
"ssr-window": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-2.0.0.tgz",
"integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
"integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A==",
"dev": true
}
}
},
......@@ -24755,7 +24762,8 @@
"ssr-window": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-1.0.1.tgz",
"integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
"integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg==",
"dev": true
},
"ssri": {
"version": "8.0.1",
......@@ -25271,6 +25279,7 @@
"version": "4.5.1",
"resolved": "https://registry.npmmirror.com/swiper/-/swiper-4.5.1.tgz",
"integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
"dev": true,
"requires": {
"dom7": "^2.1.3",
"ssr-window": "^1.0.1"
......@@ -25863,6 +25872,7 @@
"version": "3.1.3",
"resolved": "https://registry.npmmirror.com/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
"integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
"dev": true,
"requires": {
"object-assign": "^4.1.1",
"swiper": "^4.0.7"
package.json
浏览文件 @ cb92fbc6
......@@ -24,7 +24,6 @@
"sass-loader": "^13.0.2",
"svgo": "^2.8.0",
"vue": "^2.6.14",
"vue-awesome-swiper": "^3.1.3",
"vue-router": "^3.5.1",
"vuex": "^3.6.2",
"wowjs": "^1.1.3"
......@@ -46,6 +45,7 @@
"sass": "^1.32.7",
"svg-sprite-loader": "^6.0.11",
"terser-webpack-plugin": "^5.3.3",
"vue-awesome-swiper": "^3.1.3",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
......
src/components/AudioPlayer/NormalPlayer.vue 0 → 100644
浏览文件 @ cb92fbc6
<template>
<div>
<audio
@timeupdate="updateProgress"
controls
ref="audioRef"
style="display: none"
>
<source :src="fileurl" type="audio/mpeg" />
您的浏览器不支持音频播放
</audio>
<div class="audio-right">
<i
:class="
audioStatus !== 'pause' ? 'el-icon-video-play' : 'el-icon-video-pause'
"
@click="playAudio"
class="dialogAudioPlay"
></i>
<div class="progress-bar-bg" id="progressBarBg" v-dragto="setAudioIcon">
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="audio-time" style="min-height: 10px">
<span class="audio-length-current" id="audioCurTime">{{
audioStart
}}</span
>/
<span class="audio-length-total">{{ duration }}</span>
</div>
<div class="volume">
<div
@click.stop="
() => {
return false;
}
"
class="volume-progress"
v-show="audioHuds"
>
<div
class="volume-bar-bg"
id="volumeBarBg"
v-adjuster="handleShowMuteIcon"
>
<div class="volume-bar" id="volumeBar"></div>
</div>
</div>
<i
class="iconfont pl-1"
:class="audioIcon"
@click.stop="audioHuds = !audioHuds"
>
</i>
</div>
</div>
</div>
</template>
<script>
export default {
name: "NormalPlayer",
props: {
fileurl: {
trpe: String,
},
},
data() {
return {
audioStatus: "play",
audioStart: "0:00",
duration: "0:00",
audioVolume: 0.5,
audioHuds: false,
};
},
directives: {
dragto: {
inserted: function (el, binding, vnode) {
el.addEventListener(
"click",
(e) => {
let wdiv = document.getElementById("progressBarBg").clientWidth;
let audio = vnode.context.$refs.audioRef;
// 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
let ratemin = e.offsetX / wdiv;
let rate = ratemin * 100;
document.getElementById("progressBar").style.width = rate + "%";
audio.currentTime = audio.duration * ratemin;
audio.play();
binding.value();
},
false
);
},
},
adjuster: {
inserted: function (el, binding, vnode) {
el.addEventListener(
"click",
(e) => {
let hdiv = document.getElementById("volumeBarBg").clientHeight;
let audio = vnode.context.$refs.audioRef;
// 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
let ratemin = e.offsetY / hdiv;
let rate = ratemin * 100;
document.getElementById("volumeBar").style.height = rate + "%";
audio.volume = ratemin;
binding.value(rate / 100);
},
false
);
},
},
},
computed: {
audioIcon() {
if (this.audioHuds) {
return this.audioVolume < 0.01
? "checked icon-jingyin"
: "checked icon-shengyin";
} else {
return "icon-shengyin";
}
},
},
mounted() {
this.fetch();
},
methods: {
fetch() {
let that = this;
var myVid = this.$refs.audioRef;
myVid.loop = false;
// 监听音频播放完毕
myVid.addEventListener(
"ended",
function () {
that.audioStatus = "play"; // 显示播放icon
document.getElementById("progressBar").style.width = "0%"; // 进度条初始化
},
false
);
if (myVid != null) {
myVid.oncanplay = function () {
that.duration = that.transTime(myVid.duration); // 计算音频时长
};
myVid.volume = 0.5; // 设置音量50%
}
},
// 播放暂停控制
playAudio() {
let recordAudio = this.$refs.audioRef; // 获取audio元素
if (recordAudio.paused) {
recordAudio.play();
this.audioStatus = "pause";
} else {
recordAudio.pause();
this.audioStatus = "play";
}
},
// 更新进度条与当前播放时间
updateProgress(e) {
var value = e.target.currentTime / e.target.duration;
if (document.getElementById("progressBar")) {
document.getElementById("progressBar").style.width = value * 100 + "%";
if (e.target.currentTime === e.target.duration) {
this.audioStatus = "pause";
}
} else {
this.audioStatus = "pause";
}
this.audioStart = this.transTime(this.$refs.audioRef.currentTime);
},
/**
* 音频播放时间换算
* @param {number} value - 音频当前播放时间，单位秒
*/
transTime(time) {
var duration = parseInt(time);
var minute = parseInt(duration / 60);
var sec = (duration % 60) + "";
var isM0 = ":";
if (minute === 0) {
minute = "00";
} else if (minute < 10) {
minute = "0" + minute;
}
if (sec.length === 1) {
sec = "0" + sec;
}
return minute + isM0 + sec;
},
setAudioIcon() {
this.audioStatus = "pause";
},
handleShowMuteIcon(val) {
this.audioVolume = val;
},
},
};
</script>
<style lang="scss" scoped>
.volume {
position: relative;
.volume-progress {
position: absolute;
top: -150px;
width: 32px;
height: 140px;
background: #f6f6f6;
border-radius: 4px;
padding-top: 10px;
}
.volume-bar-bg {
margin: 0 auto;
width: 6px;
height: 120px;
background: #dcdcdc;
border-radius: 100px;
flex: 1;
position: relative;
transform: rotate(180deg);
cursor: pointer;
.volume-bar {
width: 6px;
height: 50%;
background: #56bf8b;
border-radius: 100px;
}
}
.checked {
color: #56bf8b;
}
}
.audio-right {
width: 100%;
height: 49px;
line-height: 49px;
background: #f5f5f9;
border-radius: 6px;
display: flex;
padding: 0 15px;
.dialogAudioPlay {
cursor: pointer;
color: #5c5e66;
display: flex;
align-items: center;
color: #2069c4;
font-size: 38px;
}
.progress-bar-bg {
background-color: #fff;
flex: 1;
position: relative;
height: 10px;
top: 50%;
transform: translateY(-50%);
margin-top: -1px;
cursor: pointer;
margin: 0 10px;
}
.progress-bar {
background-color: #2069c4;
width: 0%;
height: 10px;
border-radius: 5px;
}
.audio-time {
overflow: hidden;
font-size: 14px;
.audio-length-total {
float: right;
}
.audio-length-current {
float: left;
}
}
}
</style>
src/components/CustomTitle/index.vue
浏览文件 @ cb92fbc6
......@@ -26,8 +26,9 @@ export default {
.custom-title {
width: 100%;
padding: 8px;
font-size: 18px;
border-bottom: 1px solid rgba($color: #000000, $alpha: 0.3);
font-size: 32px;
border-bottom: 1px solid rgba($color: #b8b8b8, $alpha: 0.3);
margin-bottom: 32px;
font-family: "KaiTi";
}
</style>
src/components/MenuList/index.vue
浏览文件 @ cb92fbc6
<!-- -->
<template>
<el-menu
v-if="items.length>0"
class="sidebar-el-menu"
default-active=""
@open="handleOpen"
......@@ -56,4 +57,16 @@ export default {
</script>
<style lang="scss" scoped>
.el-menu{
border-right: none;
}
.el-menu-item {
background-color: #f5f5f9;
// color: #2069c4;
&:hover {
background-color: #2069c4;
color: #fff;
}
}
</style>
src/views/culturalRelic/Detail.vue
浏览文件 @ cb92fbc6
......@@ -25,6 +25,7 @@
class="el-image-container"
:src="$getFullUrl(item.url)"
fit="contain"
></el-image>
</el-carousel-item>
</el-carousel>
......
src/views/display/Detail.vue
浏览文件 @ cb92fbc6
<template>
<div class="display-detail">
<div class="content" id="content">
<div
class="content-item sliders"
ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
>
<div class="view-box">
<div
class="slide-group"
:style="{
width: sildeGroupWidth,
left: slideGroupleft + 'px',
}"
>
<div
class="slide-item"
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
>
<img :src="$getFullUrl(item.url)" alt="" />
<div class="modal"></div>
</div>
</div>
</div>
<div class="modal-layer">
<div class="left-layer"></div>
<div class="center-img" @mousewheel="handleImgsSlide">
<!-- <div class="border-box"></div> -->
<img src="@/assets/imgs/display/slider-box.png" alt="" />
</div>
<div class="right-layer"></div>
</div>
</div>
<div class="content-item intro wow animate__animated animate__fadeInUp">
<div class="wrapper">
<div class="title">{{ displayDetail.title }}</div>
<div class="desc-and-tools">
<div class="desc">
<el-row>
<el-col class="item">
<div class="label">关键词：</div>
<div class="value">{{ displayDetail.keyword }}</div>
</el-col>
<el-col class="item" v-if="dicts.display_type">
<div class="label">展览类型：</div>
<div class="value">
{{ dicts.display_type[displayDetail.type] }}
</div>
</el-col>
</el-row>
<el-row>
<el-col class="item" v-if="dicts.display_character">
<div class="label">展览性质：</div>
<div class="value">
{{
dicts.display_character[displayDetail.displayCharacter]
}}
</div>
</el-col>
<el-col class="item">
<div class="label">展览单位：</div>
<div class="value">{{ displayDetail.deptName }}</div>
</el-col>
</el-row>
</div>
<div class="tools">
<ReaderOperations
:loveCount="displayDetail.loveCount"
:loveCountStatus="Boolean(displayDetail.loveCountStatus)"
:collectCount="displayDetail.collectCount"
:collectCountStatus="Boolean(displayDetail.collectCountStatus)"
:sourceId="displayDetail.exhibitionId"
:title="displayDetail.title"
:sourceType="'biz_exhibition'"
<NormalStyle
v-if="displayDetail.themeType == '1'"
:displayDetail="displayDetail"
:dicts="dicts"
@reload="loadDetail"
/>
</div>
</div>
<div class="divider"></div>
<div class="intro-and-video">
<el-row :gutter="70">
<el-col
class="intro-container"
:span="
displayDetail.videosVo && displayDetail.videosVo.length > 0
? 12
: 24
"
>
<div class="intro-title">展览简介</div>
<div class="intro-content">
{{ displayDetail.intro }}
</div>
</el-col>
<el-col
:span="12"
v-if="
displayDetail.videosVo && displayDetail.videosVo.length > 0
"
class="videos"
>
<el-carousel :interval="4000" type="card" height="220px">
<el-carousel-item
v-for="item in displayDetail.videosVo"
:key="item.fileId"
>
<Video :url="$getFullUrl(item.url)" />
</el-carousel-item>
</el-carousel>
</el-col>
</el-row>
</div>
<div
class="audio"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
@click="handleClickAudio"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
>
<img src="@/assets/imgs/display/audio.png" alt="" />
<AudioPlayer
style="display: none"
:url="$getFullUrl(displayDetail.audiosVo[0].url)"
ref="AudioPlayer"
<ChStyle
v-if="displayDetail.themeType == '2'"
:displayDetail="displayDetail"
:dicts="dicts"
@reload="loadDetail"
/>
<RedStyle
v-if="displayDetail.themeType == '3'"
:displayDetail="displayDetail"
:dicts="dicts"
@reload="loadDetail"
/>
</div>
</div>
</div>
<div class="content-item units">
<div class="wrapper">
<div class="custom-title">
<div class="custom-title-prefix">
<img src="@/assets/imgs/display/custom-title.png" alt="" />
</div>
<div class="custom-title-text">展览单元</div>
<div class="custom-title-suffix">
<img src="@/assets/imgs/display/custom-title.png" alt="" />
</div>
</div>
<div class="units-content">
<ul>
<li
v-for="(item, index) in displayDetail.exhibitionUnits"
:key="index"
>
<div class="unit-title">{{ item.title }}</div>
<div class="unit-intro">{{ item.intro }}</div>
<div
class="unit-imgs"
v-if="item.imagesVo && item.imagesVo.length > 0"
>
<div
class="img-item"
v-for="(i, idx) in item.imagesVo"
:key="idx"
>
<img :src="$getFullUrl(i.url)" alt="" />
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="content-item lts">
<div class="wrapper">
<div class="custom-title">
<div class="custom-title-prefix">
<img src="@/assets/imgs/display/custom-title.png" alt="" />
</div>
<div class="custom-title-text">关联文献</div>
<div class="custom-title-suffix">
<img src="@/assets/imgs/display/custom-title.png" alt="" />
</div>
</div>
</div>
<div
class="lts-content"
v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0
"
>
<div class="wrapper">
<el-table
:data="displayDetail.literatureVo"
:header-cell-style="{
background: '#eeeeee',
color: '#333',
}"
:row-style="tableRowStyle"
>
<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">
<template slot-scope="scope">
<div class="pdf-img" @click="handleViewLt(scope.row)">
<img src="@/assets/imgs/display/pdf-icon.png" />
</div>
</template>
</el-table-column>
</el-table>
<!-- <div class="title">
</div>
<div class="lts-item"></div> -->
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import AudioPlayer from "@/components/AudioPlayer";
import ReaderOperations from "@/components/ReaderOperations";
import Card from "@/views/personal/components/Card";
import Video from "@/components/Video";
import QRCode from "qrcodejs2";
import NormalStyle from "./components/NormalStyle.vue";
import ChStyle from "./components/ChStyle.vue";
import RedStyle from "./components/RedStyle.vue";
import { getDisplayById } from "@/api/display";
import MenuList from "@/components/MenuList";
import { mapGetters } from "vuex";
import { previewFile } from "@/utils/index";
export default {
components: {
AudioPlayer,
ReaderOperations,
MenuList,
Video,
Card,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
NormalStyle,
ChStyle,
RedStyle,
},
data() {
return {
options: [
{
value: "name",
label: "文物名称",
},
],
selectValue: "",
keyword: "",
displayDetail: {},
slideImageWidth: 0, //单个图片的宽度
sildeGroupWidth: 0, //整个轮播的宽度
slideGroupleft: 0, //整个轮播距离父亲盒子的距离（中间view区域）
imgViewerVisible: false,
relateRelics: [],
curUnit: [],
imgsDom: null,
moveLeft: true,
moveRight: true,
audioPlaying: true,
};
},
computed: {
......@@ -287,13 +49,7 @@ export default {
]);
this.loadDetail();
},
destroyed() {
//同时在destroyed回调中移除监听：
if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) {
//firefox支持onmousewheel
removeEventListener("DOMMouseScroll", firefoxListenFun);
}
},
methods: {
async loadDetail() {
let exhibitionId = this.$route.params.exhibitionId;
......@@ -301,161 +57,7 @@ export default {
let res = await getDisplayById({ exhibitionId });
if (res.code == 0) {
this.displayDetail = res.data;
if (
this.displayDetail.exhibitionUnits &&
this.displayDetail.exhibitionUnits.length > 0
) {
this.curUnit = this.displayDetail.exhibitionUnits[0];
}
processUnit(this.displayDetail.exhibitionUnits);
function processUnit(list) {
for (let o of list || []) {
if (o.children) {
if (o.children.length == 0) {
o.children = null;
} else {
processUnit(o.children);
}
}
}
}
this.$nextTick(() => {
this.loadWidth();
if (
this.displayDetail.videosVo &&
this.displayDetail.videosVo.length > 0
) {
this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
this.$refs.AudioPlayer.play();
}
});
}
}
},
loadWidth() {
if (
this.displayDetail.imagesVo &&
this.displayDetail.imagesVo.length > 0
) {
let slideImage = document.getElementsByClassName("slide-item")[0];
this.slideImageWidth = slideImage.offsetWidth;
this.sildeGroupWidth =
this.slideImageWidth * this.displayDetail.imagesVo.length;
this.slideGroupleft = -3 * this.slideImageWidth;
}
},
handleImgsSlide(e) {
this.addImgsEventListener(e);
this.throttle(this.pageUpOrDown, 500)(e);
},
addImgsEventListener(e) {
e = e || window.event;
if (navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
// IE
e.returnValue = false;
} else {
// Chrome
e.preventDefault();
}
if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) {
//firefox支持onmousewheel
addEventListener("DOMMouseScroll", this.firefoxListenFun, false);
}
},
firefoxListenFun(e) {
var obj = e.target;
var onmousewheel;
while (obj) {
onmousewheel = obj.getAttribute("onmousewheel") || obj.onmousewheel;
if (onmousewheel) break;
if (obj.tagName == "BODY") break;
obj = obj.parentNode;
}
if (onmousewheel) {
if (e.preventDefault) e.preventDefault(); //禁止页面滚动
if (typeof obj.onmousewheel != "function") {
//将onmousewheel转换成function
eval("window._tmpFun = function(event){" + onmousewheel + "}");
obj.onmousewheel = window._tmpFun;
window._tmpFun = null;
}
// 不直接执行是因为若onmousewheel(e)运行时间较长的话，会导致锁定滚动失效，使用setTimeout可避免
setTimeout(function () {
obj.onmousewheel(e);
}, 1);
}
},
pageUpOrDown(e) {
let detail = e.wheelDelta || e.detail || e.wheelDeltaY;
let direction = detail > 0 ? "left" : "right";
if (direction == "left" && this.moveLeft) {
this.slideGroupleft += this.slideImageWidth;
this.moveRight = true;
}
if (direction == "right" && this.moveRight) {
this.slideGroupleft += this.slideImageWidth * -1;
this.moveLeft = true;
}
if (this.slideGroupleft == 0) {
this.moveLeft = false;
this.moveRight = true;
}
if (
this.slideGroupleft ==
4 * this.slideImageWidth - this.sildeGroupWidth
) {
this.moveRight = false;
this.moveLeft = true;
}
},
//节流函数
throttle(fn, gapTime) {
let _this = this;
return function () {
let _nowTime = +new Date();
if (_nowTime - _this._lastTime > gapTime || !_this._lastTime) {
fn(...arguments); // 函数可以带参数
_this._lastTime = _nowTime;
}
};
},
// 关联文献的行样式调整
tableRowStyle({ row, rowIndex }) {
if (rowIndex % 2 == 0) {
return {
background: "#f9f9f9 !important",
};
} else {
return {
background: "#fff !important",
};
}
},
// 预览关联文献
handleViewLt(item) {
previewFile(item.files[0].url, item.files[0].name);
},
// 点击音频
handleClickAudio() {
this.audioPlaying = !this.audioPlaying;
if (this.audioPlaying) {
this.$refs["AudioPlayer"].play();
// console.log(this.$refs['audioContainer']);
} else {
this.$refs["AudioPlayer"].pause();
}
},
},
......@@ -463,294 +65,4 @@ export default {
</script>
<style lang="scss" scoped>
// 中国风主题样式
/**公共样式开始 */
.wrapper {
width: 1200px;
}
.custom-title {
display: flex;
align-items: center;
.custom-title-prefix,
.custom-title-suffix {
width: 27px;
height: 27px;
margin: 15px;
img {
width: 100%;
height: 100%;
}
}
.custom-title-text {
font-size: 40px;
font-family: KaiTi;
font-weight: 400;
color: #0f0f0f;
line-height: 114px;
}
}
/**公共样式结束 */
/**样式开始 */
.display-detail {
overflow-x: hidden;
.content {
width: 100%;
overflow-y: hidden;
.content-item {
width: 100%;
}
/**轮播图 */
.sliders {
height: 434px;
// margin: 52px 0 84px 0;
margin-top: 52px;
display: flex;
justify-content: center;
position: relative;
.view-box {
position: relative;
width: 1200px;
.slide-group {
display: flex;
position: absolute;
height: 100%;
transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
/**保证能够最开始刚好有四格卡在中间*/
// transform: translateX(-900px);
.slide-item {
width: 300px;
height: 100%;
position: relative;
img {
width: 300px;
height: 100%;
object-fit: cover;
// filter: grayscale(14);
}
}
}
}
.modal-layer {
position: absolute;
display: flex;
width: 100%;
height: 100%;
justify-content: center;
.center-img {
width: 1200px;
transform: translateY(-25px);
position: relative;
filter: drop-shadow(2px 4px 6px #f8f8f8);
img {
transform: translateX(-10px);
}
}
.left-layer,
.right-layer {
flex: 1;
height: 100%;
background-color: rgba(#f8f8f8, 0.8);
}
}
}
/**展览信息 */
.intro {
margin-top: 84px;
display: flex;
justify-content: center;
.wrapper {
background: url("@/assets/imgs/display/intro-bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 60px;
position: relative;
.title {
font-size: 62px;
font-family: KaiTi;
font-weight: 400;
color: #0f0f0f;
margin-bottom: 60px;
}
.desc-and-tools {
display: flex;
justify-content: space-between;
.desc {
display: flex;
.item {
display: flex;
.label,
.value {
font-size: 18px;
font-weight: 300;
color: #0f0f0f;
line-height: 36px;
}
}
}
}
.divider {
width: 100%;
height: 2px;
border: 1px dashed #b1b0af;
margin: 60px 0;
}
.intro-and-video {
.intro-container {
.intro-title {
font-size: 40px;
font-family: KaiTi;
font-weight: 400;
color: #0f0f0f;
margin-bottom: 43px;
position: relative;
&::after {
content: "";
display: inline-block;
width: 60px;
height: 2px;
background-color: #caad91;
position: absolute;
left: 0;
bottom: -12px;
}
}
.intro-content {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #444444;
text-indent: 32px;
line-height: 28px;
}
}
.videos {
position: relative;
::v-deep {
.el-carousel {
height: 100%;
width: 100%;
.el-carousel__container {
height: 100%;
display: flex;
justify-content: center;
}
.el-carousel__item {
width: 100%;
transform: translateX(0) !important;
}
}
}
}
}
.audio {
position: absolute;
right: -100px;
top: 34px;
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
border: 1px solid #892325;
border-radius: 50%;
// padding: 10px;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
img {
width: 28px;
height: 28px;
}
}
}
}
@keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
@-webkit-keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
.animation-play-paused {
animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari 和 Chrome */
}
/**展览单元 */
.units {
margin-top: 94px;
display: flex;
flex-direction: column;
align-items: center;
.units-content {
ul {
li {
margin-bottom: 20px;
.unit-title {
font-size: 36px;
font-family: KaiTi;
font-weight: 400;
color: #4e392c;
line-height: 83px;
display: flex;
justify-content: center;
}
.unit-intro {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #444444;
text-indent: 36px;
margin-bottom: 10px;
}
.unit-imgs {
width: 100%;
.img-item {
width: 100%;
img {
width: 100%;
}
}
}
}
}
}
}
/**关联文献 */
.lts {
// background-color: aquamarine;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 100px;
.lts-content {
display: flex;
justify-content: center;
width: 100%;
height: 569px;
background-image: url("@/assets/imgs/display/lts-bg.png");
}
}
}
}
</style>
\ No newline at end of file
src/views/display/detail/ChStyle.vue → src/views/display/components/ChStyle.vue
浏览文件 @ cb92fbc6
......@@ -75,7 +75,7 @@
:sourceId="displayDetail.exhibitionId"
:title="displayDetail.title"
:sourceType="'biz_exhibition'"
@reload="loadDetail"
@reload="reload"
/>
</div>
</div>
......@@ -128,7 +128,10 @@
</div>
</div>
</div>
<div class="content-item units">
<div
class="content-item units"
v-if="displayDetail.exhibitionUnits.length > 0"
>
<div class="wrapper">
<div class="custom-title">
<div class="custom-title-prefix">
......@@ -140,30 +143,7 @@
</div>
</div>
<div class="units-content">
<ul>
<li
v-for="(item, index) in displayDetail.exhibitionUnits"
:key="index"
>
<div class="unit-title">{{ item.title }}</div>
<div class="unit-intro">{{ item.intro }}</div>
<div
class="unit-imgs"
v-if="item.imagesVo && item.imagesVo.length > 0"
>
<div
class="img-item"
v-for="(i, idx) in item.imagesVo"
:key="idx"
>
<img :src="$getFullUrl(i.url)" alt="" />
</div>
</div>
</li>
</ul>
</div>
<ChStyleUnit :units="displayDetail.exhibitionUnits" />
</div>
</div>
<div class="content-item lts">
......@@ -222,14 +202,15 @@
</template>
</el-table-column>
</el-table>
<!-- <div class="title">
</div>
<div class="lts-item"></div> -->
</div>
</div>
</div>
</div>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
</div>
</template>
......@@ -238,11 +219,9 @@ import AudioPlayer from "@/components/AudioPlayer";
import ReaderOperations from "@/components/ReaderOperations";
import Card from "@/views/personal/components/Card";
import Video from "@/components/Video";
import QRCode from "qrcodejs2";
import { getDisplayById } from "@/api/display";
import MenuList from "@/components/MenuList";
import { mapGetters } from "vuex";
import { previewFile } from "@/utils/index";
import ChStyleUnit from "./ChStyleUnit.vue";
export default {
components: {
AudioPlayer,
......@@ -250,41 +229,34 @@ export default {
MenuList,
Video,
Card,
ChStyleUnit,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
props: {
displayDetail: {
type: Object,
default: () => ({}),
},
dicts: {
type: Object,
default: () => ({}),
},
},
data() {
return {
options: [
{
value: "name",
label: "文物名称",
},
],
selectValue: "",
keyword: "",
displayDetail: {},
slideImageWidth: 0, //单个图片的宽度
sildeGroupWidth: 0, //整个轮播的宽度
slideGroupleft: 0, //整个轮播距离父亲盒子的距离（中间view区域）
imgViewerVisible: false,
relateRelics: [],
curUnit: [],
imgsDom: null,
moveLeft: true,
moveRight: true,
audioPlaying: true,
};
},
computed: {
...mapGetters(["dicts"]),
},
async mounted() {
await this.$store.dispatch("dict/getDictList", [
"display_type",
"display_character",
]);
this.loadDetail();
},
destroyed() {
......@@ -296,19 +268,7 @@ export default {
},
methods: {
async loadDetail() {
let exhibitionId = this.$route.params.exhibitionId;
if (exhibitionId) {
let res = await getDisplayById({ exhibitionId });
if (res.code == 0) {
this.displayDetail = res.data;
if (
this.displayDetail.exhibitionUnits &&
this.displayDetail.exhibitionUnits.length > 0
) {
this.curUnit = this.displayDetail.exhibitionUnits[0];
}
processUnit(this.displayDetail.exhibitionUnits);
function processUnit(list) {
for (let o of list || []) {
if (o.children) {
......@@ -331,8 +291,6 @@ export default {
this.$refs.AudioPlayer.play();
}
});
}
}
},
loadWidth() {
......@@ -458,6 +416,10 @@ export default {
this.$refs["AudioPlayer"].pause();
}
},
reload() {
this.$emit("reload");
},
},
};
</script>
......@@ -496,7 +458,7 @@ export default {
overflow-x: hidden;
.content {
width: 100%;
overflow-y: hidden;
overflow-x: hidden;
.content-item {
width: 100%;
}
......@@ -571,7 +533,7 @@ export default {
padding: 60px;
position: relative;
.title {
font-size: 62px;
font-size: 54px;
font-family: KaiTi;
font-weight: 400;
color: #0f0f0f;
......@@ -584,6 +546,7 @@ export default {
display: flex;
.item {
display: flex;
margin-right: 16px;
.label,
.value {
font-size: 18px;
......@@ -749,6 +712,7 @@ export default {
width: 100%;
height: 569px;
background-image: url("@/assets/imgs/display/lts-bg.png");
overflow-x: hidden;
}
}
}
......
src/views/display/components/ChStyleUnit.vue 0 → 100644
浏览文件 @ cb92fbc6
<!-- -->
<template>
<div class="units-content">
<div class="units-content-item" v-for="(unit, index) in units" :key="index">
<div class="unit-title">{{ unit.title }}</div>
<div class="unit-intro">{{ unit.intro }}</div>
<div class="unit-imgs" v-if="unit.imagesVo && unit.imagesVo.length > 0">
<div class="img-item" v-for="(i, idx) in unit.imagesVo" :key="idx">
<img :src="$getFullUrl(i.url)" />
</div>
</div>
<ChStyleUnit
:units="unit.children"
v-if="unit.children && unit.children.length > 0"
/>
</div>
</div>
</template>
<script>
export default {
name: "ChStyleUnit",
props: {
units: {
type: Array,
default: () => [],
},
},
};
</script>
<style lang="scss" scoped>
.units-content-item {
margin-bottom: 20px;
.unit-title {
font-size: 36px;
font-family: KaiTi;
font-weight: 400;
color: #4e392c;
line-height: 83px;
display: flex;
justify-content: center;
}
.unit-intro {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #444444;
text-indent: 36px;
margin-bottom: 10px;
line-height: 32px;
}
.unit-imgs {
width: 100%;
.img-item {
width: 100%;
img {
width: 100%;
}
}
}
}
</style>
src/views/display/detail/NormalStyle.vue → src/views/display/components/NormalStyle.vue
浏览文件 @ cb92fbc6
<!-- -->
<template>
<div class="display-detail">
<!-- <div class="search">
<SearchBar
:options="options"
:selectValue="selectValue"
:keyword="keyword"
/>
</div> -->
<div class="empty-space"></div>
<div class="wrapper">
<div class="back">
<el-button
type="text"
icon="el-icon-arrow-left"
@click.native="handleBack"
>返回上页</el-button
>
<el-button type="text" icon="el-icon-arrow-left" @click.native="handleBack">返回上页</el-button>
</div>
<el-row class="detail-container" :gutter="30">
<el-row class="detail-container" :gutter="60">
<el-col class="cr-images" :span="16">
<el-carousel
indicator-position="outside"
......@@ -36,7 +23,7 @@
></el-image>
</el-carousel-item>
</el-carousel>
<div class="enlarge" @click="handelPreviewImages">
<div class="enlarge" @click="handelPreviewImages(displayDetail.imagesVo)">
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
</el-col>
......@@ -58,35 +45,29 @@
</span>
</div>
<AudioPlayer
:url="$getFullUrl(displayDetail.audiosVo[0].url)"
<NormalPlayer
:fileurl="$getFullUrl(displayDetail.audiosVo[0].url)"
ref="AudioPlayer"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
/>
</div>
<div class="info-body">
<div class="basic-info">
<!-- <div class="body-item">
<span class="label">年份</span>
<span class="value">{{ displayDetail.yearsLabel }}</span>
</div>
<div class="body-item">
<span class="label">类别</span>
<span class="value">
{{ displayDetail.typeLabel }}
</span>
</div>-->
<div class="body-item">
<span class="label">开始日期</span>
<span class="value">{{ displayDetail.startDate }}</span>
<span class="label">关键词</span>
<span class="value">{{ displayDetail.keyword }}</span>
</div>
<div class="body-item">
<span class="label">结束日期</span>
<span class="value">{{ displayDetail.endDate }}</span>
<span class="label">展览类型</span>
<span class="value">{{
dicts.display_type[displayDetail.type]
}}</span>
</div>
<div class="body-item">
<span class="label">关键词</span>
<span class="value">{{ displayDetail.keyword }}</span>
<span class="label">展览性质</span>
<span class="value">{{
dicts.display_character[displayDetail.displayCharacter]
}}</span>
</div>
<div class="body-item">
<span class="label">展览单位</span>
......@@ -94,8 +75,6 @@
</div>
</div>
</div>
<!-- <div class="qrcode" ref="qrCodeUrl"></div> -->
<!-- </div> -->
<ReaderOperations
:loveCount="displayDetail.loveCount"
:loveCountStatus="Boolean(displayDetail.loveCountStatus)"
......@@ -104,26 +83,26 @@
:sourceId="displayDetail.exhibitionId"
:title="displayDetail.title"
:sourceType="'biz_exhibition'"
@reload="loadDetail"
@reload="reload"
/>
</el-col>
</el-row>
<div class="margin-bottom-32">
<div class="margin-bottom-32 intro">
<CustomTitle text="展览介绍" />
<div class="intro text-indent">
<div class="text-indent intro_text">
{{ displayDetail.intro }}
</div>
</div>
<div
class="margin-bottom-32"
class="margin-bottom-32 unit"
v-if="
displayDetail.exhibitionUnits &&
displayDetail.exhibitionUnits.length > 0
"
>
<CustomTitle text="展览单元" />
<el-row :gutter="20">
<el-row :gutter="40">
<el-col :span="8">
<!-- 只能单开 unique-opened -->
<menu-list
......@@ -132,17 +111,12 @@
@open="handleOpenUnit"
></menu-list>
</el-col>
<el-col :span="16">
<el-card>
<div slot="header" class="clearfix">
<span>单元介绍</span>
</div>
<div class="unit-content">
<div class="intro text-indent" v-if="curUnit.intro">
<el-col :span="16" class="unit-content">
<div class="text-indent unit-content_intro" v-if="curUnit.intro">
{{ curUnit.intro }}
</div>
<div
class="images"
class="unit-content_images"
v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0"
>
<el-row :gutter="20">
......@@ -150,17 +124,21 @@
:span="24 / curUnit.imagesVo.length"
v-for="item in curUnit.imagesVo"
:key="item.euId"
class="margin-bottom-32"
class="margin-bottom-32 unit-content_images_container"
>
<img :src="$getFullUrl(item.url)" alt="" srcset="" width="100%" />
<div class="desc flex-center">
<img :src="$getFullUrl(item.url)" width="100%" />
<div class="enlarge" @click="handelPreviewImages(curUnit.imagesVo)">
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
<div class="unit-content_images_desc">
{{ item.name }}
</div>
</el-col>
</el-row>
</div>
<div
class="videos"
class="unit-content_videos"
v-if="curUnit.videosVo && curUnit.videosVo.length > 0"
>
<el-row :gutter="20">
......@@ -173,8 +151,6 @@
</el-col>
</el-row>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
......@@ -257,43 +233,42 @@
</template>
<script>
import SearchBar from "@/components/SearchBar";
import AudioPlayer from "@/components/AudioPlayer";
import CustomTitle from "@/components/CustomTitle";
import ReaderOperations from "@/components/ReaderOperations";
import Card from "@/views/personal/components/Card";
import Video from "@/components/Video";
import QRCode from "qrcodejs2";
import { getDisplayById } from "@/api/display";
import MenuList from "@/components/MenuList";
import NormalPlayer from "@/components/AudioPlayer/NormalPlayer.vue";
export default {
components: {
SearchBar,
CustomTitle,
AudioPlayer,
ReaderOperations,
MenuList,
Video,
Card,
NormalPlayer,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
props: {
displayDetail: {
type: Object,
default: () => ({}),
},
dicts: {
type: Object,
default: () => ({}),
},
},
data() {
return {
options: [
{
value: "name",
label: "文物名称",
},
],
selectValue: "",
keyword: "",
displayDetail: {},
slideImageWidth: "",
imgViewerVisible: false,
relateRelics: [],
curUnit: [],
imgList:[]
};
},
mounted() {
......@@ -314,13 +289,6 @@ export default {
});
},
async loadDetail() {
let exhibitionId = this.$route.params.exhibitionId;
if (exhibitionId) {
let res = await getDisplayById({ exhibitionId });
if (res.code == 0) {
this.displayDetail = res.data;
// debugger
// 处理单元数据
if (
this.displayDetail.exhibitionUnits &&
this.displayDetail.exhibitionUnits.length > 0
......@@ -328,7 +296,6 @@ export default {
this.curUnit = this.displayDetail.exhibitionUnits[0];
}
processUnit(this.displayDetail.exhibitionUnits);
// console.log(unit);
function processUnit(list) {
for (let o of list || []) {
if (o.children) {
......@@ -340,14 +307,10 @@ export default {
}
}
}
// 获取关联文物
// this.loadCrRecommend();
this.$nextTick(() => {
// this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
// this.$refs.AudioPlayer.play();
});
}
}
},
handleBack() {
......@@ -358,9 +321,11 @@ export default {
this.imgViewerVisible = false;
},
handelPreviewImages() {
handelPreviewImages(images) {
this.imgViewerVisible = true;
this.imgList = this.displayDetail.imagesVo.map((item) => this.$getFullUrl(item.url));
this.imgList = images.map((item) =>
this.$getFullUrl(item.url)
);
},
handleToDetail(exhibitionId) {
console.log(crId);
......@@ -369,15 +334,37 @@ export default {
handleOpenUnit(item) {
this.curUnit = item;
},
reload(){
this.$emit('reload')
},
},
};
</script>
<style lang="scss" scoped>
.mr-20 {
margin-right: 20px;
}
$label: #9f9c9a;
/**公共样式 */
.enlarge {
position: absolute;
bottom: 60px;
right: 40px;
display: flex;
z-index: 9;
background-color: #c1925b;
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
cursor: pointer;
img {
width: 24px;
height: 24px;
}
}
.search {
width: 1200px;
margin: auto;
......@@ -388,6 +375,7 @@ $label: #9f9c9a;
margin: 60px auto;
background-color: #fff;
padding: 60px;
// 返回按钮
.back {
font-size: 18px;
font-weight: bold;
......@@ -396,6 +384,8 @@ $label: #9f9c9a;
color: $label;
}
}
// 描述框
.detail-container {
margin-bottom: 32px;
// display: flex;
......@@ -403,6 +393,7 @@ $label: #9f9c9a;
max-width: 100%;
height: auto;
}
.cr-images {
width: 700px;
// margin-right: 32px;
......@@ -410,28 +401,9 @@ $label: #9f9c9a;
.el-image {
background-color: #f5f5f9;
}
.enlarge {
position: absolute;
bottom: 60px;
right: 40px;
display: flex;
z-index: 9;
background-color: #c1925b;
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
cursor: pointer;
img {
width: 24px;
height: 24px;
}
}
}
.relic-info {
.relic-info.el-col {
padding-right: 0 !important;
.info-title {
display: flex;
// align-items: center;
......@@ -496,11 +468,38 @@ $label: #9f9c9a;
text-indent: 32px;
}
}
// 展览介绍
.intro {
.intro_text {
line-height: 30px;
}
}
// 布展单元
.unit {
.unit-content {
line-height: 30px;
.unit-content_intro {
margin-bottom: 20px;
}
.unit-content_images {
.unit-content_images_container{
position: relative;
}
.unit-content_images_desc {
display: flex;
justify-content: center;
}
}
}
}
// 关联文献
.relate-book {
.book-item {
margin-bottom: 10px;
}
}
// 关联文物
.relate-cultual-relic {
.display-group {
margin-top: 24px;
......@@ -539,7 +538,7 @@ $label: #9f9c9a;
}
}
}
// 关联视频
.relate-video {
.video-container {
display: flex;
......
src/views/display/components/RedStyle.vue 0 → 100644
浏览文件 @ cb92fbc6
<template>
<div class="display-detail">
<div class="content" id="content">
<!-- 展览图片 -->
<div
class="content-item display-detail_imgs"
ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
>
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
>
<div class="img-container">
<img :src="item.url" alt="" srcset="" />
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>
<!-- 展览基本信息 -->
<div class="content-item display-detail_basic_info">
<div class="wrapper">
<div class="top">
<div class="top-wrapper">
<div class="top-list">
<div
class="top-item"
v-for="(item, index) in Array.from(new Array(40).keys())"
:key="index"
></div>
</div>
<div class="top-list">
<div
class="top-item"
v-for="(item, index) in Array.from(new Array(40).keys())"
:key="index"
></div>
</div>
</div>
</div>
<div class="bottom">
<div class="bottom-wrapper">
<div class="bottom-list">
<div
class="bottom-item"
v-for="(item, index) in Array.from(new Array(40).keys())"
:key="index"
></div>
</div>
<div class="bottom-list">
<div
class="bottom-item"
v-for="(item, index) in Array.from(new Array(40).keys())"
:key="index"
></div>
</div>
</div>
</div>
<div class="info-container">
<div class="info-container-left">
<el-image
:src="$getFullUrl(displayDetail.faceImageUrl)"
fit="cover"
@click.native="
handelPreviewImages([displayDetail.faceImageUrl])
"
></el-image>
</div>
<div class="info-container-right">
<div class="info-title">{{ displayDetail.title }}</div>
<div class="basic-info">
<div class="body-item">
<span class="label">关键词</span>
<span class="value">{{ displayDetail.keyword }}</span>
</div>
<div class="body-item">
<span class="label">展览类型</span>
<span class="value">{{
dicts.display_type[displayDetail.type]
}}</span>
</div>
<div class="body-item">
<span class="label">展览性质</span>
<span class="value">{{
dicts.display_character[displayDetail.displayCharacter]
}}</span>
</div>
<div class="body-item">
<span class="label">展览单位</span>
<span class="value">{{ displayDetail.deptName }}</span>
</div>
<div class="body-item">
<span class="label">展览地区</span>
<span class="value">{{ displayDetail.regionName }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 展览简介 -->
<div class="content-item display-detail_intro">
<div class="wrapper">
<div class="custom-title">展览简介</div>
<div class="intro-content">
<div class="intro-content-container">{{ displayDetail.intro }}</div>
</div>
<div
class="intro-video"
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
>
<el-carousel :interval="4000" type="card" height="260px">
<el-carousel-item
v-for="item in displayDetail.videosVo"
:key="item.fileId"
>
<Video :url="$getFullUrl(item.url)" />
</el-carousel-item>
</el-carousel>
</div>
</div>
</div>
<!--展览单元 -->
<div
class="content-item display-detail_units"
ref="units"
v-if="displayDetail.exhibitionUnits.length > 0"
>
<div class="wrapper">
<div class="custom-title units">展览单元</div>
<div class="units-content">
<div
class="units-content-item"
v-for="(item, index) in displayDetail.exhibitionUnits"
:key="index"
>
<div class="units-content-container">
<div class="title">{{ item.title }}</div>
<div class="intro">{{ item.intro }}</div>
<div
class="imgs"
v-if="item.imagesVo && item.imagesVo.length > 0"
>
<el-carousel
:interval="4000"
type="card"
height="200px"
v-if="item.imagesVo.length > 3"
>
<el-carousel-item
v-for="(img, i) in item.imagesVo"
:key="i"
>
<el-image
:src="img.pressUrl"
@click.native="handelPreviewImages(item.imagesVo)"
></el-image>
</el-carousel-item>
</el-carousel>
<el-row :gutter="20" v-else>
<el-col
:span="10"
v-for="(img, i) in item.imagesVo"
:key="i"
>
<el-image
:src="img.pressUrl"
@click.native="handelPreviewImages(item.imagesVo)"
></el-image>
</el-col>
</el-row>
<div class="desc-title">相关图片</div>
</div>
<div
class="imgs"
v-if="item.culturalRelicVo && item.culturalRelicVo.length > 0"
>
<el-carousel :interval="4000" type="card" height="200px">
<el-carousel-item
v-for="item in displayDetail.culturalRelicVo"
:key="item.fileId"
>
<el-image :src="img.faceImagePressUrl"></el-image>
</el-carousel-item>
</el-carousel>
<div class="desc-title">相关文物</div>
</div>
</div>
<div
class="units-content-img"
:style="{
backgroundImage: `url('${item.imagesVo[0].pressUrl}')`,
}"
></div>
</div>
</div>
</div>
</div>
<!-- 相关文献 -->
<div
class="content-item display-detail_lts"
v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0
"
>
<div class="wrapper">
<div class="custom-title">相关文献</div>
<div class="lts-content">
<el-table
:data="displayDetail.literatureVo"
:header-cell-style="{
background: '#eeeeee',
color: '#333',
}"
:row-style="tableRowStyle"
>
<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">
<template slot-scope="scope">
<div class="pdf-img" @click="handleViewLt(scope.row)">
<img src="@/assets/imgs/display/pdf-icon.png" />
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
</div>
</template>
<script>
import AudioPlayer from "@/components/AudioPlayer";
import ReaderOperations from "@/components/ReaderOperations";
import Card from "@/views/personal/components/Card";
import Video from "@/components/Video";
import { previewFile } from "@/utils/index";
import ChStyleUnit from "./ChStyleUnit.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
components: {
AudioPlayer,
ReaderOperations,
Video,
Card,
ChStyleUnit,
swiper,
swiperSlide,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
props: {
displayDetail: {
type: Object,
default: () => ({}),
},
dicts: {
type: Object,
default: () => ({}),
},
},
data() {
return {
imgViewerVisible: false,
relateRelics: [],
audioPlaying: true,
swiperOption: {
loop: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
effect: "fade",
fadeEffect: {
crossFade: true,
},
grabCursor: true,
// 显示分页
pagination: {
el: ".swiper-pagination",
clickable: true, //允许分页点击跳转
},
// 设置点击箭头
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
},
};
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
},
},
async mounted() {
this.loadDetail();
// let units = this.$refs.
},
methods: {
async loadDetail() {
processUnit(this.displayDetail.exhibitionUnits);
function processUnit(list) {
for (let o of list || []) {
if (o.children) {
if (o.children.length == 0) {
o.children = null;
} else {
processUnit(o.children);
}
}
}
}
this.$nextTick(() => {
// if (
// this.displayDetail.videosVo &&
// this.displayDetail.videosVo.length > 0
// ) {
// this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
// this.$refs.AudioPlayer.play();
// }
});
},
//节流函数
throttle(fn, gapTime) {
let _this = this;
return function () {
let _nowTime = +new Date();
if (_nowTime - _this._lastTime > gapTime || !_this._lastTime) {
fn(...arguments); // 函数可以带参数
_this._lastTime = _nowTime;
}
};
},
// 关联文献的行样式调整
tableRowStyle({ row, rowIndex }) {
if (rowIndex % 2 == 0) {
return {
background: "#f9f9f9 !important",
};
} else {
return {
background: "#fff !important",
};
}
},
// 预览关联文献
handleViewLt(item) {
previewFile(item.files[0].url, item.files[0].name);
},
// 点击音频
handleClickAudio() {
this.audioPlaying = !this.audioPlaying;
if (this.audioPlaying) {
this.$refs["AudioPlayer"].play();
// console.log(this.$refs['audioContainer']);
} else {
this.$refs["AudioPlayer"].pause();
}
},
reload() {
this.$emit("reload");
},
handelPreviewImages(images) {
this.imgViewerVisible = true;
this.imgList = images.map((item) => this.$getFullUrl(item.url));
},
},
};
</script>
<style lang="scss" scoped>
// 中国风主题样式
/**公共样式开始 */
.wrapper {
width: 1200px;
}
.custom-title {
width: 50px;
background-color: #d72f3f;
min-height: 300px;
color: #fff;
font-size: 28px;
writing-mode: vertical-rl;
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgb(215 47 63 / 30%) 4px 3px 8px 1px;
letter-spacing: 10px;
}
.units {
background-image: linear-gradient(to bottom, #660d04, #520002);
min-height: 400px;
}
.content-item {
width: 100%;
}
/**公共样式结束 */
/**样式开始 */
.display-detail {
overflow-x: hidden;
.content {
width: 100%;
overflow-x: hidden;
/**轮播图 */
.display-detail_imgs {
.img-container {
height: calc(100vh - 100px);
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
/**基本信息 */
.display-detail_basic_info {
margin: 80px 0;
display: flex;
justify-content: center;
.wrapper {
min-height: 200px;
border-left: 4px solid #ccc9cd;
border-right: 4px solid #ccc9cd;
position: relative;
overflow: hidden;
&:hover {
.top-list,
.bottom-list {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
}
.top {
position: absolute;
left: 0;
top: 0;
overflow: hidden;
display: flex;
width: 1200px;
}
.bottom {
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;
}
.top-wrapper,
.bottom-wrapper {
display: flex;
width: 2400px;
// overflow: hidden;
.top-list,
.bottom-list {
// animation: filmMoveLeft 60s ease infinite;
width: 1200px;
background-color: #ccc9cd;
height: 20px;
overflow: hidden;
.top-item,
.bottom-item {
width: 10px;
height: 10px;
background-color: #fff;
display: inline-block;
&:not(&:last-child) {
margin-right: 20px;
}
}
}
}
}
.info-container {
display: flex;
justify-content: space-between;
padding: 20px 0;
height: 100%;
.info-container-left {
min-height: 200px;
margin-right: 40px;
flex: 1;
.el-image {
height: 100%;
width: 100%;
background-color: #f5f5f9;
}
}
.info-container-right {
flex: 1;
min-height: 200px;
padding: 40px 0 10px;
.info-title {
font-size: 32px;
font-weight: 500;
color: #8b0000;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 2px solid #f2f2f2;
}
.basic-info {
.body-item {
display: flex;
.label {
display: block;
width: 80px;
margin-right: 26px;
margin-bottom: 10px;
font-weight: bold;
color: #9f9c9a;
}
}
}
}
}
}
/**简介和视频 */
.display-detail_intro {
display: flex;
justify-content: center;
.wrapper {
display: flex;
background-color: #fafafa;
border: 2px solid #cccccc;
border-left: none;
.intro-content,
.intro-video {
flex: 1;
padding: 40px 0;
}
.intro-content {
padding: 20px;
text-indent: 32px;
background-color: #f3f3f3;
margin: 20px;
line-height: 28px;
}
.intro-video {
padding: 20px;
}
}
}
/**展览单元 */
.display-detail_units {
display: flex;
justify-content: center;
margin-top: 100px;
// height: calc(100vh);
.wrapper {
// width;
display: flex;
background-color: #fafafa;
border: 2px solid #cccccc;
border-left: none;
transition: width 0.5s ease-in-out;
&:hover {
width: 100%;
}
.units-content {
display: flex;
// flex-wrap: wrap;
flex: 1;
&:hover {
.units-content-item {
width: 10%;
justify-content: flex-start;
align-items: flex-start;
padding: 50px;
.title {
writing-mode: vertical-rl;
color: #ccc;
}
}
}
.units-content-item {
width: 25%;
// height: calc(100vh - 4px);
display: flex;
justify-content: center;
align-items: center;
position: relative;
transition: width 0.5s ease 0.1s;
padding: 50px;
overflow-x: hidden;
&:hover {
width: 70%;
.units-content-img {
filter: none;
background-image: url("@/assets/imgs/display/unit-bg.jpg") !important;
}
.title {
writing-mode: horizontal-tb;
color: #666;
font-size: 40px !important;
}
.intro,
.imgs,
.desc-title {
display: block !important;
}
.desc-title {
display: flex !important;
}
}
.units-content-container {
position: relative;
z-index: 1;
color: #fff;
display: flex;
flex-direction: column;
.title {
font-size: 32px;
font-family: "KaiTi";
}
.intro {
margin-top: 10px;
display: none;
font-family: "KaiTi";
color: #333;
text-indent: 32px;
font-size: 22px;
line-height: 36px;
width: calc(100vw * 0.68);
margin-bottom: 10px;
}
.imgs {
display: none;
.el-image {
width: 100%;
height: 300px;
}
}
.desc-title {
display: none;
font-size: 14px;
color: #333;
display: flex;
justify-content: center;
}
}
.units-content-img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
// z-index: -1;
-webkit-filter: brightness(0.3);
filter: brightness(0.3);
// transition: all 1s ease;
cursor: pointer;
background-size: cover;
background-repeat: no-repeat;
}
}
}
}
}
/**关联文献 */
.display-detail_lts {
display: flex;
justify-content: center;
margin: 100px 0;
.wrapper {
display: flex;
background-color: #fafafa;
border: 2px solid #cccccc;
border-left: none;
.lts-content {
flex: 1;
padding: 10px;
}
}
}
}
}
::v-deep .el-carousel__item--card {
width: 100%;
height: 100%;
transform: translateX(0) scale(1) !important;
}
@keyframes filmMoveLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-1200px);
}
}
@keyframes filmMoveRight {
0% {
transform: translateX(0);
}
100% {
transform: translateX(1200px);
}
}
@keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
@-webkit-keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
.animation-play-paused {
animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari 和 Chrome */
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论