Skip to content

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

优化中国风主题

上级 b17a76fe
隐藏空白字符变更
内嵌 并排
正在显示 包含 884 行增加 和 721 行删除
src/views/display/components/ChStyle.vue
浏览文件 @ 5f6fa9cb
<template> <template>
<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
sliders sliders
wow wow
animate__animated animate__fadeInRightBig animate__animated animate__fadeInRightBig
" ref="imgs" v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"> "
ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
>
<div class="view-box"> <div class="view-box">
<div class="slide-group" :style="{ <div
class="slide-group"
:style="{
width: sildeGroupWidth, width: sildeGroupWidth,
left: slideGroupleft + 'px', left: slideGroupleft + 'px',
}"> }"
<div class="slide-item" v-for="(item, index) in displayDetail.imagesVo" :key="index"> >
<div
class="slide-item"
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
>
<img :src="$getFullUrl(item.pressUrl || item.url)" alt="" /> <img :src="$getFullUrl(item.pressUrl || item.url)" alt="" />
<div class="modal"></div> <div class="modal"></div>
</div> </div>
...@@ -57,9 +69,7 @@ ...@@ -57,9 +69,7 @@
<el-col class="item" v-if="dicts.displayCharacter"> <el-col class="item" v-if="dicts.displayCharacter">
<div class="label">展览性质：</div> <div class="label">展览性质：</div>
<div class="value"> <div class="value">
{{ {{ dicts.displayCharacter[displayDetail.displayCharacter] }}
dicts.displayCharacter[displayDetail.displayCharacter]
}}
</div> </div>
</el-col> </el-col>
<el-col class="item"> <el-col class="item">
...@@ -69,40 +79,66 @@ ...@@ -69,40 +79,66 @@
</el-row> </el-row>
</div> </div>
<div class="tools wow animate__animated animate__fadeIn"> <div class="tools wow animate__animated animate__fadeIn">
<ReaderOperations :loveCount="displayDetail.loveCount" <ReaderOperations
:loveCountStatus="Boolean(displayDetail.loveCountStatus)" :collectCount="displayDetail.collectCount" :loveCount="displayDetail.loveCount"
:collectCountStatus="Boolean(displayDetail.collectCountStatus)" :sourceId="displayDetail.exhibitionId" :loveCountStatus="Boolean(displayDetail.loveCountStatus)"
:title="displayDetail.title" :sourceType="'biz_exhibition'" @reload="reload" :selectColor="'#892325'" /> :collectCount="displayDetail.collectCount"
:collectCountStatus="Boolean(displayDetail.collectCountStatus)"
:sourceId="displayDetail.exhibitionId"
:title="displayDetail.title"
:sourceType="'biz_exhibition'"
@reload="reload"
:selectColor="'#892325'"
/>
</div> </div>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<div class="intro-and-video"> <div class="intro-and-video">
<div class="intro-container"> <div class="intro-container">
<div class="intro-title wow animate__animated animate__fadeInLeft"> <div
class="intro-title wow animate__animated animate__fadeInLeft"
>
展览简介 展览简介
</div> </div>
<div class="intro-content wow animate__animated animate__fadeInLeft" v-html="displayDetail.intro"> <div
class="intro-content wow animate__animated animate__fadeInLeft"
</div> v-html="displayDetail.intro"
></div>
</div> </div>
<div v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0" <div
class="videos wow animate__animated animate__fadeInRight"> v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
class="videos wow animate__animated animate__fadeInRight"
>
<el-carousel> <el-carousel>
<el-carousel-item v-for="item in displayDetail.videosVo" :key="item.fileId"> <el-carousel-item
v-for="item in displayDetail.videosVo"
:key="item.fileId"
>
<Video :url="$getFullUrl(item.url)" /> <Video :url="$getFullUrl(item.url)" />
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</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"
>
<!-- <svg-icon icon-class="music"></svg-icon> --> <!-- <svg-icon icon-class="music"></svg-icon> -->
<img src="@/assets/imgs/display/normal/music-red.png" alt="" /> <img src="@/assets/imgs/display/normal/music-red.png" alt="" />
<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> </div>
<div class="content-item units" v-if="displayDetail.exhibitionUnits.length > 0"> <div
class="content-item units"
v-if="displayDetail.exhibitionUnits.length > 0"
>
<div class="wrapper"> <div class="wrapper">
<div class="custom-title wow animate__animated animate__fadeInLeft"> <div class="custom-title wow animate__animated animate__fadeInLeft">
<div class="custom-title-prefix"> <div class="custom-title-prefix">
...@@ -116,15 +152,24 @@ ...@@ -116,15 +152,24 @@
<div class="right"> <div class="right">
<a class="clearfix" @click="unitVisible = true"> <a class="clearfix" @click="unitVisible = true">
<svg-icon icon-class="book"></svg-icon> <svg-icon icon-class="book"></svg-icon>
详情 翻页模式
</a> </a>
</div> </div>
</div> </div>
<ChStyleUnit :units="node" v-for="node in displayDetail.exhibitionUnits" :key="node.euId" /> <ChStyleUnit
:units="node"
v-for="node in displayDetail.exhibitionUnits"
:key="node.euId"
/>
</div> </div>
</div> </div>
<div class="content-item lts"> <div
class="content-item lts"
v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0
"
>
<div class="wrapper"> <div class="wrapper">
<div class="custom-title wow animate__animated animate__fadeInUp"> <div class="custom-title wow animate__animated animate__fadeInUp">
<div class="custom-title-prefix"> <div class="custom-title-prefix">
...@@ -137,18 +182,36 @@ ...@@ -137,18 +182,36 @@
</div> </div>
</div> </div>
<div class="lts-content" v-if=" <div class="lts-content">
displayDetail.literatureVo && displayDetail.literatureVo.length > 0
">
<div class="wrapper wow animate__animated animate__fadeInUp"> <div class="wrapper wow animate__animated animate__fadeInUp">
<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)">
...@@ -161,638 +224,652 @@ ...@@ -161,638 +224,652 @@
</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 class="unit-detail-full" v-if="unitVisible"> <div class="unit-detail-full" v-if="unitVisible">
<i class="el-icon-close" @click="unitVisible = false"></i> <i class="el-icon-close" @click="unitVisible = false"></i>
<transition name="el-fade-in-linear"> <transition name="el-fade-in-linear">
<detail-dialog :data="displayDetail.exhibitionUnits" :title="displayDetail.title" <detail-dialog
:img="displayDetail.faceImageUrl" v-if="unitVisible"></detail-dialog> :data="displayDetail.exhibitionUnits"
:title="displayDetail.title"
:img="displayDetail.faceImageUrl"
v-if="unitVisible"
></detail-dialog>
</transition> </transition>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import AudioPlayer from "@/components/AudioPlayer"; import AudioPlayer from "@/components/AudioPlayer";
import ReaderOperations from "@/components/ReaderOperations"; import ReaderOperations from "@/components/ReaderOperations";
import Card from "@/views/personal/components/Card"; import Card from "@/views/personal/components/Card";
import Video from "@/components/Video"; import Video from "@/components/Video";
import MenuList from "@/components/MenuList"; import MenuList from "@/components/MenuList";
import { previewFile } from "@/utils/index"; import { previewFile } from "@/utils/index";
// import ChStyleUnit from "./ChStyleUnit.vue"; // import ChStyleUnit from "./ChStyleUnit.vue";
import ChStyleUnit from "./ChStyleUnit.vue"; import ChStyleUnit from "./ChStyleUnit.vue";
import DetailDialog from "./detail-dialog.vue"; import DetailDialog from "./detail-dialog.vue";
export default { export default {
components: { components: {
AudioPlayer, AudioPlayer,
ReaderOperations, ReaderOperations,
MenuList, MenuList,
Video, Video,
Card, Card,
ChStyleUnit, ChStyleUnit,
DetailDialog, DetailDialog,
"el-image-viewer": () => "el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"), import("element-ui/packages/image/src/image-viewer"),
},
props: {
displayDetail: {
type: Object,
default: () => ({}),
}, },
props: { dicts: {
displayDetail: { type: Object,
type: Object, default: () => ({}),
default: () => ({}),
},
dicts: {
type: Object,
default: () => ({}),
},
},
data() {
return {
slideImageWidth: 0, //单个图片的宽度
sildeGroupWidth: 0, //整个轮播的宽度
slideGroupleft: 0, //整个轮播距离父亲盒子的距离（中间view区域）
imgViewerVisible: false,
relateRelics: [],
imgsDom: null,
moveLeft: true,
moveRight: true,
audioPlaying: true,
unitVisible: false,
};
}, },
async mounted() { },
this.loadDetail(); data() {
}, return {
destroyed() { slideImageWidth: 0, //单个图片的宽度
//同时在destroyed回调中移除监听： sildeGroupWidth: 0, //整个轮播的宽度
if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) { slideGroupleft: 0, //整个轮播距离父亲盒子的距离（中间view区域）
//firefox支持onmousewheel imgViewerVisible: false,
removeEventListener("DOMMouseScroll", firefoxListenFun); relateRelics: [],
} imgsDom: null,
}, moveLeft: true,
methods: { moveRight: true,
async loadDetail() { audioPlaying: true,
processUnit(this.displayDetail.exhibitionUnits); unitVisible: false,
function processUnit(list) { };
for (let o of list || []) { },
if (o.children) { async mounted() {
if (o.children.length == 0) { this.loadDetail();
o.children = null;
} else { },
processUnit(o.children); destroyed() {
} //同时在destroyed回调中移除监听：
if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) {
//firefox支持onmousewheel
removeEventListener("DOMMouseScroll", firefoxListenFun);
}
},
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(() => { }
this.loadWidth(); this.$nextTick(() => {
this.loadWidth();
if (
this.displayDetail.videosVo &&
this.displayDetail.videosVo.length > 0
) {
this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
this.$refs.AudioPlayer.play();
}
});
},
loadWidth() {
if ( if (
this.displayDetail.imagesVo && this.displayDetail.audiosVo &&
this.displayDetail.imagesVo.length > 0 this.displayDetail.audiosVo.length > 0
) { ) {
let slideImage = document.getElementsByClassName("slide-item")[0]; this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
this.slideImageWidth = slideImage.offsetWidth; this.$refs.AudioPlayer.play();
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) { loadWidth() {
//firefox支持onmousewheel if (
addEventListener("DOMMouseScroll", this.firefoxListenFun, false); this.displayDetail.imagesVo &&
} this.displayDetail.imagesVo.length > 0
}, ) {
firefoxListenFun(e) { let slideImage = document.getElementsByClassName("slide-item")[0];
var obj = e.target; this.slideImageWidth = slideImage.offsetWidth;
var onmousewheel; this.sildeGroupWidth =
while (obj) { this.slideImageWidth * this.displayDetail.imagesVo.length;
onmousewheel = obj.getAttribute("onmousewheel") || obj.onmousewheel; this.slideGroupleft = -3 * this.slideImageWidth;
if (onmousewheel) break; }
if (obj.tagName == "BODY") break; },
obj = obj.parentNode;
} handleImgsSlide(e) {
if (onmousewheel) { this.addImgsEventListener(e);
if (e.preventDefault) e.preventDefault(); //禁止页面滚动 this.throttle(this.pageUpOrDown, 500)(e);
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) { addImgsEventListener(e) {
this.moveLeft = false; e = e || window.event;
this.moveRight = true; 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);
}
},
if ( pageUpOrDown(e) {
this.slideGroupleft == let detail = e.wheelDelta || e.detail || e.wheelDeltaY;
4 * this.slideImageWidth - this.sildeGroupWidth let direction = detail > 0 ? "left" : "right";
) { if (direction == "left" && this.moveLeft) {
this.moveRight = false; this.slideGroupleft += this.slideImageWidth;
this.moveLeft = true; 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;
} }
}, };
},
//节流函数
throttle(fn, gapTime) { // 关联文献的行样式调整
let _this = this; tableRowStyle({ row, rowIndex }) {
return function () { if (rowIndex % 2 == 0) {
let _nowTime = +new Date(); return {
if (_nowTime - _this._lastTime > gapTime || !_this._lastTime) { background: "#f9f9f9 !important",
fn(...arguments); // 函数可以带参数
_this._lastTime = _nowTime;
}
}; };
}, } else {
return {
// 关联文献的行样式调整 background: "#fff !important",
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"); handleViewLt(item) {
}, previewFile(item.files[0].url, item.files[0].name);
}, },
};
</script>
<style lang="scss" scoped> // 点击音频
// 中国风主题样式 handleClickAudio() {
/**公共样式开始 */ this.audioPlaying = !this.audioPlaying;
.wrapper { if (this.audioPlaying) {
// width: 1200px; this.$refs["AudioPlayer"].play();
width: calc(100% - 26%); //左右两边各自留13% // console.log(this.$refs['audioContainer']);
} } else {
this.$refs["AudioPlayer"].pause();
}
},
.custom-title { reload() {
display: flex; this.$emit("reload");
align-items: center; },
position: relative;
.custom-title-prefix, handleMouseEnter(e) {
.custom-title-suffix { console.log(e);
width: 27px; },
height: 27px; },
margin: 15px; };
</script>
img { <style lang="scss" scoped>
width: 100%; // 中国风主题样式
height: 100%; /**公共样式开始 */
} .wrapper {
// width: 1200px;
width: calc(100% - 26%); //左右两边各自留13%
}
.custom-title {
display: flex;
align-items: center;
position: relative;
.custom-title-prefix,
.custom-title-suffix {
width: 27px;
height: 27px;
margin: 15px;
img {
width: 100%;
height: 100%;
} }
}
.custom-title-text { .custom-title-text {
font-size: 40px; font-size: 40px;
font-family: KaiTi; font-family: KaiTi;
font-weight: 400; font-weight: 400;
color: #0f0f0f; color: #0f0f0f;
line-height: 114px; line-height: 114px;
}
} }
}
/**公共样式结束 */ /**公共样式结束 */
/**样式开始 */ /**样式开始 */
.display-detail { .display-detail {
overflow: hidden;
padding-bottom: 60px;
.content {
width: 100%;
overflow: hidden; overflow: hidden;
.content { .content-item {
width: 100%; width: 100%;
overflow: 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 {
.sliders {
height: 434px;
// margin: 52px 0 84px 0;
margin-top: 52px;
display: flex;
justify-content: center;
position: relative; position: relative;
width: 1200px;
.view-box { .slide-group {
position: relative; display: flex;
width: 1200px; position: absolute;
height: 100%;
transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
.slide-group { /**保证能够最开始刚好有四格卡在中间*/
display: flex; // transform: translateX(-900px);
position: absolute; .slide-item {
width: 300px;
height: 100%; height: 100%;
transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); position: relative;
margin-right: 1px;
/**保证能够最开始刚好有四格卡在中间*/ img {
// transform: translateX(-900px);
.slide-item {
width: 300px; width: 300px;
height: 100%; height: 100%;
position: relative; object-fit: cover;
margin-right: 1px; // filter: grayscale(14);
img {
width: 300px;
height: 100%;
object-fit: cover;
// filter: grayscale(14);
}
} }
} }
} }
}
.modal-layer { .modal-layer {
position: absolute; position: absolute;
display: flex; display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
justify-content: center; justify-content: center;
.center-img { .center-img {
width: 1200px; width: 1200px;
transform: translateY(-25px); transform: translateY(-25px);
position: relative; position: relative;
filter: drop-shadow(2px 4px 6px #f8f8f8); filter: drop-shadow(2px 4px 6px #f8f8f8);
img { img {
transform: translateX(-10px); transform: translateX(-10px);
width: 1230px; width: 1230px;
}
} }
}
.left-layer, .left-layer,
.right-layer { .right-layer {
flex: 1; flex: 1;
height: 100%; height: 100%;
background-color: rgba(#f8f8f8, 0.8); background-color: rgba(#f8f8f8, 0.8);
}
} }
} }
}
/**展览信息 */ /**展览信息 */
.intro { .intro {
margin-top: 55px; margin-top: 55px;
display: flex; display: flex;
justify-content: center; justify-content: center;
.wrapper { .wrapper {
background: url("@/assets/imgs/display/ch/intro-bg.png"); background: url("@/assets/imgs/display/ch/intro-bg.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding: 50px; padding: 50px;
position: relative; position: relative;
border: 1px solid #d3d3d37a; border: 1px solid #d3d3d37a;
.title { .title {
font-size: 50px; font-size: 40px;
font-family: KaiTi; font-family: KaiTi;
font-weight: bold; font-weight: bold;
color: #0f0f0f; color: #0f0f0f;
margin-bottom: 60px; margin-bottom: 60px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.view-count { .view-count {
font-size: 18px; font-size: 18px;
margin-top: 10px; margin-top: 10px;
color: #999; color: #999;
font-weight: normal; font-weight: normal;
.svg-icon { .svg-icon {
margin-right: 10px; margin-right: 10px;
}
} }
} }
}
.desc-and-tools {
display: flex;
justify-content: space-between;
.desc-and-tools { .desc {
display: flex; display: flex;
justify-content: space-between;
.desc { .item {
display: flex; display: flex;
margin-right: 16px;
.item { .label,
display: flex; .value {
margin-right: 16px; font-size: 18px;
color: #0f0f0f;
.label, line-height: 36px;
.value {
font-size: 18px;
color: #0f0f0f;
line-height: 36px;
}
.label {
margin-left: 8px;
}
} }
}
.tools { .label {
width: 280px; margin-left: 8px;
}
} }
} }
.divider { .tools {
width: 100%; width: 300px;
height: 2px;
border: 1px dashed #b1b0af;
margin: 42px 0;
} }
}
.intro-and-video { .divider {
display: flex; width: 100%;
height: 2px;
border: 1px dashed #b1b0af;
margin: 42px 0;
}
.intro-container { .intro-and-video {
flex: 1; display: flex;
.intro-title { .intro-container {
font-size: 40px; flex: 1;
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 { .intro-title {
font-size: 16px; font-size: 40px;
font-family: Microsoft YaHei; font-family: KaiTi;
font-weight: 400; font-weight: 400;
color: #444444; color: #0f0f0f;
text-indent: 32px; margin-bottom: 43px;
line-height: 28px; position: relative;
margin-left: 8px;
&::after {
content: "";
display: inline-block;
width: 60px;
height: 2px;
background-color: #caad91;
position: absolute;
left: 0;
bottom: -12px;
} }
} }
.videos { .intro-content {
flex: 1; font-size: 16px;
position: relative; font-family: Microsoft YaHei;
height: 256px; font-weight: 400;
margin-left: 70px; color: #444444;
text-indent: 32px;
line-height: 28px;
margin-left: 8px;
} }
} }
.audio { .videos {
position: absolute; flex: 1;
right: -120px; position: relative;
top: 34px; height: 256px;
cursor: pointer; margin-left: 70px;
animation: audioRotate 8s linear infinite; }
transform-origin: center center; }
border: 2px solid #892325;
padding: 10px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
transition: all 0.5s ease;
&:hover { .audio {
box-shadow: 0 0 14px rgb(0 0 0 / 40%); position: absolute;
} right: -120px;
top: 34px;
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
border: 2px solid #892325;
padding: 10px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
transition: all 0.5s ease;
img { &:hover {
width: 60px; box-shadow: 0 0 14px rgb(0 0 0 / 40%);
height: 60px;
}
} }
}
}
@keyframes audioRotate { img {
0% { width: 60px;
transform: rotateZ(0deg); height: 60px;
}
} }
}
}
100% { @keyframes audioRotate {
transform: rotateZ(360deg); 0% {
} transform: rotateZ(0deg);
} }
@-webkit-keyframes audioRotate { 100% {
0% { transform: rotateZ(360deg);
transform: rotateZ(0deg); }
} }
100% { @-webkit-keyframes audioRotate {
transform: rotateZ(360deg); 0% {
} transform: rotateZ(0deg);
} }
.animation-play-paused { 100% {
animation-play-state: paused; transform: rotateZ(360deg);
-webkit-animation-play-state: paused;
/* Safari 和 Chrome */
} }
}
/**展览单元 */ .animation-play-paused {
.units { animation-play-state: paused;
margin-top: 94px; -webkit-animation-play-state: paused;
display: flex; /* Safari 和 Chrome */
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; .units {
font-family: Microsoft YaHei; margin-top: 94px;
font-weight: 400; display: flex;
color: #444444; flex-direction: column;
text-indent: 36px; align-items: center;
margin-bottom: 10px;
} .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%;
.unit-imgs { .img-item {
width: 100%; width: 100%;
.img-item { img {
width: 100%; width: 100%;
img {
width: 100%;
}
} }
} }
} }
} }
} }
} }
}
/**关联文献 */ /**关联文献 */
.lts { .lts {
// background-color: aquamarine; // background-color: aquamarine;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-top: 100px; margin-top: 100px;
.lts-content { .lts-content {
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 569px; height: 569px;
background-image: url("@/assets/imgs/display/ch/lts-bg.png"); background-image: url("@/assets/imgs/display/ch/lts-bg.png");
overflow-x: hidden; overflow-x: hidden;
}
} }
} }
} }
}
.right { .right {
float: right; float: right;
position: absolute; position: absolute;
right: 0; right: 0;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
a { a {
font-size: 22px; font-size: 22px;
} }
.clearfix { .clearfix {
clear: both; clear: both;
} }
a:hover { a:hover {
cursor: pointer; cursor: pointer;
color: #2069c4; color: #2069c4;
}
} }
}
.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;
.unit-detail-full { &:hover {
position: fixed; cursor: pointer;
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;
}
} }
} }
}
::v-deep .el-carousel { ::v-deep .el-carousel {
height: 100%; height: 100%;
} }
::v-deep .el-carousel__container { ::v-deep .el-carousel__container {
height: 100%; height: 100%;
} }
::v-deep .el-carousel__item--card { ::v-deep .el-carousel__item--card {
width: 100%; width: 100%;
height: 100%; height: 100%;
transform: translateX(0) scale(1) !important; transform: translateX(0) scale(1) !important;
} }
</style> </style>
\ No newline at end of file
src/views/display/components/ChStyleUnit.vue
浏览文件 @ 5f6fa9cb
<template> <template>
<div class="units-content"> <div class="units-content">
<p>{{ units.title }}</p> <p>{{ units.title }}</p>
<ul> <div class="units-content-intro" v-html="units.intro">
</div>
<ul v-if="units.children && units.children.length > 0">
<li <li
v-for="(item, index) in units.children" v-for="(item, index) in units.children"
:key="index" :key="index"
...@@ -30,7 +32,12 @@ ...@@ -30,7 +32,12 @@
class="img-item" class="img-item"
v-if="item.imagesVo && item.imagesVo.length > 0" v-if="item.imagesVo && item.imagesVo.length > 0"
> >
<img :src="$getFullUrl(item.imagesVo[0].pressUrl || item.imagesVo[0].url)" alt="" /> <img
:src="
$getFullUrl(item.imagesVo[0].pressUrl || item.imagesVo[0].url)
"
alt=""
/>
</div> </div>
</div> </div>
<div class="unit-content"> <div class="unit-content">
...@@ -41,7 +48,8 @@ ...@@ -41,7 +48,8 @@
</div> </div>
<div class="units-title"> <div class="units-title">
<p> <p>
<span v-html="changeTitle(item.title)"></span> <!-- <span v-html="changeTitle(item.title)"></span> -->
<span v-html="item.title" style="writing-mode: vertical-rl;"></span>
</p> </p>
<span></span> <span></span>
</div> </div>
...@@ -79,16 +87,28 @@ export default { ...@@ -79,16 +87,28 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.units-content { .units-content {
margin: 100px 0;
> p { > p {
font-size: 32px; font-size: 32px;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
font-family: "华文行楷"; font-family: "KaiTi";
margin-bottom: 60px;
}
.units-content-intro{
font-size: 16px;
color: #333;
text-indent: 32px;
line-height: 2.5;
} }
ul { ul {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
overflow: auto; overflow: auto;
border: 3px solid rgb(139 123 90);
box-shadow: 9px 20px 10px rgb(0 0 0 / 30%);
height: 660px;
li { li {
// margin-bottom: 20px; // margin-bottom: 20px;
width: calc(var(--i) * 100%); width: calc(var(--i) * 100%);
...@@ -96,11 +116,13 @@ export default { ...@@ -96,11 +116,13 @@ export default {
overflow: hidden; overflow: hidden;
// flex-shrink: 0; // flex-shrink: 0;
position: relative; position: relative;
height: 100%;
&.active { &.active {
width: 100%; width: 100%;
flex-shrink: 0; flex-shrink: 0;
> .unit-node { > .unit-node {
width: 100%;
filter: none; filter: none;
/* > .unit-imgs { /* > .unit-imgs {
width: 100%; width: 100%;
...@@ -130,20 +152,23 @@ export default { ...@@ -130,20 +152,23 @@ export default {
line-height: 83px; line-height: 83px;
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 76%;
line-height: 1.2;
} }
.unit-intro { .unit-intro {
font-size: 16px; font-size: 16px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
// color: #444444; color: #333;
color: #e2e2e2; // color: #e2e2e2;
text-indent: 36px; text-indent: 36px;
// margin-bottom: 10px; // margin-bottom: 10px;
// margin-top: 20px; // margin-top: 20px;
line-height: 1.8; line-height: 1.8;
} }
.unit-imgs { .unit-imgs {
width: 100%; // width: 100%;
width: 50%;
// width: 500px; // width: 500px;
height: 100%; height: 100%;
flex-shrink: 0; flex-shrink: 0;
...@@ -153,10 +178,11 @@ export default { ...@@ -153,10 +178,11 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
// height: 100%; height: 100%;
img { img {
width: 100%; width: 100%;
// height: 100%; height: 100%;
object-fit: cover;
transition: 0.6s; transition: 0.6s;
} }
} }
...@@ -164,7 +190,8 @@ export default { ...@@ -164,7 +190,8 @@ export default {
.unit-node { .unit-node {
width: 1200px; width: 1200px;
// width: calc(100vw - 26%); // width: calc(100vw - 26%);
height: 550px; // width: 100%;
height: 100%;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
transition: 0.6s; transition: 0.6s;
...@@ -181,12 +208,17 @@ export default { ...@@ -181,12 +208,17 @@ export default {
right: 0; right: 0;
width: 50%; width: 50%;
height: 100%; height: 100%;
// background-image: linear-gradient(
// to right,
// rgba(0, 0, 0, 0) 0%,
// rgba(0, 0, 0, 0.7) 40%
// );
background-image: linear-gradient( background-image: linear-gradient(
to right, to right,
rgba(0, 0, 0, 0) 0%, rgba(171, 147, 94, 0.3) 0%,
rgba(0, 0, 0, 0.7) 40% rgba(171, 147, 94, 0.7) 40%
); );
> .unit-title { > .unit-title {
position: absolute; position: absolute;
top: 100px; top: 100px;
...@@ -209,16 +241,23 @@ export default { ...@@ -209,16 +241,23 @@ export default {
height: 100%; height: 100%;
transition: 0.6s; transition: 0.6s;
> p { > p {
color: #fff; // color: #6e4e06;
color: #000;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
margin: 0; margin: 0;
font-size: 28px; font-size: 28px;
font-family: "楷体"; font-family: "楷体";
padding: 16px; padding: 46px 16px;
height: calc(100% - 32px); height: calc(100% - 32px);
box-shadow: 10px 0px 21px 0 #9b7e3f inset; // box-shadow: 40px 0px 40px 0 #9b7e3f inset;
box-shadow: #9b7e3f 44px 24px 57px 10px inset;;
// background-color: rgba(155, 126, 63, 0.8);
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
} }
} }
} }
......
src/views/display/components/detail-dialog.vue
浏览文件 @ 5f6fa9cb
<template> <template>
<div class="detail-book"> <div class="detail-book">
<div v-if="list.length > 0"> <div v-if="list.length > 0">
<div class="book-page" v-for="(node, i) in list" :key="i" <div
:class="{ active: i === activePage, flipped: i < activePage }"> class="book-page"
<div class="article-title" @click="handlePageChange(i, true)" v-if="node.imagesVo[0]"> v-for="(node, i) in list"
<div class="img" :style="`background-image: url('${node.imagesVo[0] &&node.imagesVo[0].url}')`"></div> :key="i"
:class="{ active: i === activePage, flipped: i < activePage }"
>
<div
class="article-title"
@click="handlePageChange(i, true)"
v-if="node.imagesVo[0]"
>
<div
class="img"
:style="`background-image: url('${
node.imagesVo[0] && node.imagesVo[0].pressUrl
}')`"
></div>
<p> <p>
<span class="title">{{ node.title }}</span> <span class="title">{{ node.title }}</span>
<span class="seq">{{ node.unit }}</span> <span class="seq">{{ node.unit }}</span>
</p> </p>
</div> </div>
<div class="article-big-title" v-else @click="handlePageChange(i, true)"> <div
class="article-big-title"
v-else
@click="handlePageChange(i, true)"
>
<!-- <div class="page-button prev">上一页</div> -->
<p> <p>
<span class="seq">{{ node.unit }}</span> <span class="seq">{{ node.unit }}</span>
<span class="title">{{ node.title }}</span> <span class="title">{{ node.title }}</span>
</p> </p>
</div> </div>
<div class="book-cover" v-if="i === 0" @click="handlePageChange(i)"> <div class="book-cover" v-if="i === 0" @click="handlePageChange(i)">
<div class="img" :style="`background-image: url('${img}')`"> <div class="img" :style="`background-image: url('${img}')`"></div>
</div>
<p> <p>
<span>{{ title }}</span> <span>{{ title }}</span>
</p> </p>
</div> </div>
<div class="article-content" v-else @click="handlePageChange(i)"> <div class="article-content" v-else @click="handlePageChange(i)">
<div class="content-detail" v-html="list[i - 1].intro "></div> <!-- <div class="page-button next">下一页</div> -->
<div class="content-detail" v-html="list[i - 1].intro"></div>
</div> </div>
</div> </div>
<div class="book-page"> <div class="book-page">
<div class="article-content"> <div class="article-content">
<div class="content-detail" v-html="list[list.length - 1].intro"></div> <div
class="content-detail"
v-html="list[list.length - 1].intro"
></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -37,194 +58,218 @@ ...@@ -37,194 +58,218 @@
</template> </template>
<script> <script>
export default { export default {
props: { props: {
data: { data: {
type: Array, type: Array,
default: () => [], default: () => [],
},
title: {
type: String,
default: "",
},
img: {
type: String,
default: "",
},
}, },
data() { title: {
return { type: String,
activePage: 0, default: "",
}; },
img: {
type: String,
default: "",
}, },
computed: { },
list() { data() {
let arr = this.data; return {
activePage: 0,
};
},
computed: {
list() {
let arr = this.data;
return this.transformTree2List(arr); return this.transformTree2List(arr);
},
}, },
methods: { },
handlePageChange(index, flag) { methods: {
if (flag) { handlePageChange(index, flag) {
this.activePage = index; if (flag) {
} else { this.activePage = index;
this.activePage = index + 1; } else {
} this.activePage = index + 1;
}, }
transformTree2List(arr) { },
let list = []; transformTree2List(arr) {
let loopTree = (data) => { let list = [];
data.forEach((n) => { let loopTree = (data) => {
list.push(n); data.forEach((n) => {
if (n.children && n.children.length > 0) { list.push(n);
loopTree(n.children); if (n.children && n.children.length > 0) {
} loopTree(n.children);
}); }
}; });
};
loopTree(arr);
return list; loopTree(arr);
}, return list;
}, },
}; },
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.detail-book { .detail-book {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 800px; min-height: 800px;
perspective: 1000px; perspective: 1000px;
>div { > div {
// position: absolute; // position: absolute;
position: absolute; position: absolute;
// width: 800px; // width: 800px;
width: 48%; width: 48%;
height: 600px; height: 70vh;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(0%, -50%); transform: translate(0%, -50%);
transform-style: preserve-3d; transform-style: preserve-3d;
/* &:first-child, /* &:first-child,
&:last-child { &:last-child {
box-shadow: 0px -5px 0 2px #8f712fdb; box-shadow: 0px -5px 0 2px #8f712fdb;
} */ } */
}
.book-page {
position: absolute;
// width: 800px;
width: 100%;
height: 100%;
transition: all 1.5s;
transform-style: preserve-3d;
transform-origin: 0 0;
border-left: 2px solid #8f712fdb;
box-shadow: 6px 6px 0 2px #8f712fdb;
&.active {
z-index: 1;
}
&.flipped {
// z-index: 1;
transform: rotateY(-180deg);
} }
.book-page { > div {
position: absolute; position: absolute;
// width: 800px;
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: all 1.5s; box-sizing: border-box;
transform-style: preserve-3d; backface-visibility: hidden;
transform-origin: 0 0; background-color: #bfa277;
border-left: 2px solid #8f712fdb; }
box-shadow: 6px 6px 0 2px #8f712fdb;
&.active {
z-index: 1;
}
&.flipped { .book-cover {
// z-index: 1; display: flex;
transform: rotateY(-180deg); justify-content: space-between;
} align-items: center;
padding: 40px 30px;
width: 100%;
height: 100%;
>div { > .img {
position: absolute; // width: 600px;
width: 100%; // height: 400px;
height: 100%; width: 80%;
box-sizing: border-box; height: 80%;
backface-visibility: hidden; background-size: cover;
background-color: #bfa277; background-repeat: no-repeat;
background-position: 50% 50%;
margin: 50px auto;
} }
.book-cover { > p {
display: flex; display: flex;
justify-content: space-between;
align-items: center;
padding: 30px;
width: 100%;
height: 100%;
>.img {
width: 600px;
height: 400px;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
margin: 50px auto;
}
>p { > span {
display: flex; display: block;
text-align: center;
>span { font-size: 22px;
display: block; font-weight: 600;
text-align: center; font-family: "楷体";
font-size: 22px; writing-mode: tb-rl;
font-weight: 600;
font-family: "楷体"; &.title {
writing-mode: tb-rl; color: #850e0e;
font-size: 30px;
&.title { }
color: #850e0e;
font-size: 30px; &.seq {
} padding-bottom: 100px;
margin-left: 20px;
&.seq {
padding-bottom: 100px;
margin-left: 20px;
}
} }
} }
} }
}
.article-title { .article-title {
@extend .book-cover; @extend .book-cover;
transform: rotateY(180deg); transform: rotateY(180deg);
>.img { > .img {
border-radius: 10px; // border-radius: 10px;
}
} }
}
.article-big-title { .article-big-title {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
transform: rotateY(180deg); transform: rotateY(180deg);
// position: relative;
>p { > p {
font-size: 36px; font-size: 36px;
text-align: center; text-align: center;
font-family: "华文行楷"; font-family: "华文行楷";
>span { > span {
display: block; display: block;
margin: 20px; margin: 20px;
&.title { &.title {
color: #fff2b3; color: #fff2b3;
}
} }
} }
} }
}
.article-content { .article-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 50px 100px; padding: 50px 100px;
line-height: 1.8; line-height: 1.8;
color: #333; color: #333;
font-weight: 600; font-weight: 600;
font-family: "仿宋"; font-family: "仿宋";
text-indent: 32px; text-indent: 32px;
overflow-y: auto;
.content-detail {
font-size: 20px;
} }
} }
} }
}
.page-button {
font-size: 24px;
padding: 10px 20px;
border-radius: 30px;
border: 1px solid #fff2b3;
color: #fff2b3;
cursor: pointer;
position: relative;
}
.prev {
left: -7vw;
bottom: -29vh;
}
.next {
right: -7vw;
bottom: -29vh;
}
</style> </style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论