Skip to content

E
exhibition_page
提交 3129e151 authored 作者: Anix's avatar Anix
浏览文件
操作

还原detail文件

上级 73a6f921
隐藏空白字符变更
内嵌 并排
正在显示 包含 2 行增加 和 870 行删除
src/views/display/Detail.vue
浏览文件 @ 3129e151
<template> <template>
<div class="display-detail"> <div class="display-detail">
<<<<<<< HEAD
<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'"
@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"
/>
</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 class="right">
<a class="clearfix" @click="unitVisible = true">详情</a>
</div>
</div>
<div class="units-content">
<ul>
<li
v-for="(item, index) in displayDetail.exhibitionUnits"
:key="index"
:class="{ active: activeUnit === item.euId }"
:style="`--i: ${1 / displayDetail.exhibitionUnits.length}`"
@click="showUnit(item.euId)"
>
<!-- <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> -->
<div class="unit-node">
<div class="unit-imgs">
<div
class="img-item"
v-if="item.imagesVo && item.imagesVo.length > 0"
>
<img :src="$getFullUrl(item.imagesVo[0].url)" alt="" />
</div>
</div>
<div class="unit-content">
<div class="unit-title">{{ item.title }}</div>
<div class="unit-intro">{{ item.intro }}</div>
</div>
</div>
<div class="units-title">
<p>
<span v-html="changeTitle(item.title)"></span>
</p>
<span></span>
</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 class="unit-detail-full" v-if="unitVisible">
<i class="el-icon-close" @click="unitVisible = false"></i>
<transition name="el-fade-in-linear">
<detail-dialog
:data="displayDetail.exhibitionUnits"
:title="displayDetail.title"
:img="displayDetail.faceImageUrl"
v-if="unitVisible"
></detail-dialog>
</transition>
</div>
=======
<BlueStyle <BlueStyle
v-if="displayDetail.themeType == '1'" v-if="displayDetail.themeType == '1'"
:displayDetail="displayDetail" :displayDetail="displayDetail"
...@@ -289,7 +18,6 @@ ...@@ -289,7 +18,6 @@
:dicts="dicts" :dicts="dicts"
@reload="loadDetail" @reload="loadDetail"
/> />
>>>>>>> 0a5122f18a449aad5a094cb7200226a4a74ebba7
</div> </div>
</template> </template>
...@@ -302,40 +30,14 @@ import { getDisplayById } from "@/api/display"; ...@@ -302,40 +30,14 @@ import { getDisplayById } from "@/api/display";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
export default { export default {
components: { components: {
<<<<<<< HEAD
AudioPlayer,
ReaderOperations,
MenuList,
Video,
Card,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
detailDialog: () => import("./detail-dialog.vue"),
=======
BlueStyle, BlueStyle,
ChStyle, ChStyle,
RedStyle, RedStyle,
>>>>>>> 0a5122f18a449aad5a094cb7200226a4a74ebba7
}, },
data() { data() {
return { return {
displayDetail: {}, displayDetail: {},
<<<<<<< HEAD
slideImageWidth: 0, //单个图片的宽度
sildeGroupWidth: 0, //整个轮播的宽度
slideGroupleft: 0, //整个轮播距离父亲盒子的距离（中间view区域）
imgViewerVisible: false,
relateRelics: [],
curUnit: [],
imgsDom: null,
moveLeft: true,
moveRight: true,
audioPlaying: true,
activeUnit: "",
unitVisible: false,
=======
>>>>>>> 0a5122f18a449aad5a094cb7200226a4a74ebba7
}; };
}, },
computed: { computed: {
...@@ -356,584 +58,13 @@ export default { ...@@ -356,584 +58,13 @@ export default {
if (exhibitionId) { if (exhibitionId) {
let res = await getDisplayById({ exhibitionId }); let res = await getDisplayById({ exhibitionId });
if (res.code == 0) { if (res.code == 0) {
console.log("res", res);
this.displayDetail = res.data; this.displayDetail = res.data;
} }
} }
}, },
<<<<<<< HEAD
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();
}
},
showUnit(id) {
if (id === this.activeUnit) {
this.activeUnit = " ";
} else {
this.activeUnit = id;
}
},
changeTitle(str) {
return str.split("").join("<br>");
},
=======
>>>>>>> 0a5122f18a449aad5a094cb7200226a4a74ebba7
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
<<<<<<< HEAD </style>
// 中国风主题样式 \ No newline at end of file
/**公共样式开始 */
.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;
}
}
.right {
float: right;
.clearfix {
clear: both;
}
a:hover {
cursor: pointer;
color: #2069c4;
}
}
/**公共样式结束 */
/**样式开始 */
.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 {
display: flex;
flex-wrap: nowrap;
overflow: auto;
li {
// margin-bottom: 20px;
width: calc(var(--i) * 100%);
transition: 0.6s;
overflow: hidden;
// flex-shrink: 0;
position: relative;
&.active {
width: 100%;
flex-shrink: 0;
> .unit-node {
filter: none;
/* > .unit-imgs {
width: 100%;
.img-item {
width: 100%;
height: auto;
img {
width: 100%;
height: auto;
}
}
} */
}
> .units-title {
opacity: 0;
}
}
&:hover {
cursor: pointer;
}
.unit-title {
font-size: 36px;
font-family: KaiTi;
font-weight: 400;
// color: #4e392c;
color: #bb4343;
line-height: 83px;
display: flex;
justify-content: center;
}
.unit-intro {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
// color: #444444;
color: #e2e2e2;
text-indent: 36px;
// margin-bottom: 10px;
// margin-top: 20px;
line-height: 1.8;
}
.unit-imgs {
width: 100%;
// width: 500px;
height: 100%;
flex-shrink: 0;
overflow: hidden;
.img-item {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
// height: 100%;
img {
width: 100%;
// height: 100%;
transition: 0.6s;
}
}
}
.unit-node {
width: 1200px;
height: 550px;
display: flex;
overflow: hidden;
transition: 0.6s;
filter: sepia(0.6);
position: relative;
> .unit-content {
padding: 10px 30px;
flex: 1;
flex-shrink: 0;
// background-color: #fff;
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.7) 40%
);
> .unit-title {
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
}
> .unit-intro {
position: absolute;
top: 200px;
height: 70%;
padding: 0 20px;
}
}
}
.units-title {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: 0.6s;
> p {
color: #fff;
position: absolute;
left: 0;
top: 0;
margin: 0;
font-size: 28px;
font-family: "楷体";
padding: 16px;
height: calc(100% - 32px);
box-shadow: 10px 0px 21px 0 #9b7e3f inset;
}
> span {
}
}
}
}
}
}
/**关联文献 */
.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");
}
}
}
.unit-detail-full {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 99;
> i {
color: #fff;
font-size: 24px;
position: absolute;
top: 20px;
right: 20px;
z-index: 10;
&:hover {
cursor: pointer;
}
}
}
}
</style>
=======
</style>
>>>>>>> 0a5122f18a449aad5a094cb7200226a4a74ebba7
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论