Skip to content

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

增加布展中国风主题

上级 b2d3588e
隐藏空白字符变更
内嵌 并排
正在显示 包含 614 行增加 和 73 行删除
src/assets/styles/index.scss
浏览文件 @ dfb9e560
@import url('@/assets/fonts/font.css');
@import url('./animations.scss');
/**适应移动端 */
@media screen and (max-width: 500px) {
......@@ -34,6 +35,8 @@ li {
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
//一些公共样式
......@@ -61,12 +64,11 @@ li {
}
}
.content-wrapper{
.content-wrapper {
// width: 1200px;
width: 100%;
padding: 0 13%;
display: flex;
flex-direction: column;
align-items: center;
}
}
\ No newline at end of file
src/components/Video/index.vue
浏览文件 @ dfb9e560
<template>
<video :src="url" class="video-wrapper" controls loop></video>
<div class="video-container" @click="hanleClick">
<video :src="url" class="video-dom" ref="video"></video>
<div class="modal" :style="{ opacity: opacity }">
<div class="play-btn">
<i class="el-icon-caret-right"></i>
</div>
<div class="blur"></div>
</div>
</div>
</template>
<script>
......@@ -11,12 +19,87 @@ export default {
type: String,
},
},
data() {
return {
isPlaying: false,
opacity: 1,
};
},
methods: {
// 播放视频
play() {
this.$refs.video.play();
},
// 暂停视频
pause() {
this.$refs.video.pause();
},
hanleClick() {
this.isPlaying = !this.isPlaying;
if (this.isPlaying) {
this.play();
this.opacity = 0;
} else {
this.pause();
this.opacity = 1;
}
},
},
};
</script>
<style scoped lang='scss'>
.video-wrapper {
height: auto;
width: 100%;
.video-container {
position: relative;
height: 100%;
.video-dom {
height: auto;
width: 100%;
}
.modal {
width: 100%;
height: 100%;
background-color: rgba($color: #000000, $alpha: 0.5);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
bottom: 0;
transition: all 0.5s ease;
position: absolute;
z-index: 9;
.play-btn {
width: 100px;
height: 70px;
border: 2px solid #892325;
// background-color: #fff;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
color: #892325;
position: absolute;
z-index: 1;
i {
font-size: 50px;
z-index: 1;
}
}
}
.blur {
width: 100px;
height: 70px;
background-color: #fff;
position: absolute;
left: 50%;
bottom: 50%;
transform: translate(-50%, 50%);
filter: blur(26px);
z-index: 0;
}
}
</style>
\ No newline at end of file
src/main.js
浏览文件 @ dfb9e560
......@@ -15,7 +15,7 @@ import {
WOW
} from 'wowjs'
import {
getTotalUrl
getFullUrl
} from '@/utils/index'
// import '@/rem'
......@@ -38,7 +38,7 @@ Vue.prototype.$wow = new WOW({
}
})
Vue.prototype.$getFullUrl = getTotalUrl
Vue.prototype.$getFullUrl = getFullUrl
new Vue({
router,
store,
......
src/utils/index.js
浏览文件 @ dfb9e560
......@@ -22,16 +22,12 @@ export function debounce(func, wait, immediate = true) {
}
}
// 获取完整的url，根据环境进行配置
export function getTotalUrl(url) {
export function getFullUrl(url) {
if (url) {
let fullUrl = ''
let urlArr = url.split('files')
// if (process.env.NODE_ENV == 'development') {
// fullUrl = url
// } else {
// fullUrl = '/files' + urlArr[1]
// }
fullUrl = '/files' + urlArr[1]
return fullUrl
} else {
......@@ -39,3 +35,19 @@ export function getTotalUrl(url) {
}
}
/**
* 预览文件
* @param href 预览地址
* @param previewName 预览文件用户看到的名称
*/
export function previewFile(href, previewName) {
let a = document.createElement("a");
a.href = href;
a.target = '_blank'
a.download = previewName;
a.style.display = "none";
document.body.appendChild(a);
a.click();
a.remove();
}
\ No newline at end of file
src/views/display/Detail.vue
浏览文件 @ dfb9e560
......@@ -2,9 +2,15 @@
<div class="display-detail">
<div class="empty-space"></div>
<div class="content" id="content">
<div class="content-item sliders">
<div class="center-box">
<div class="slide-group" :style="{ width: contentWidth }">
<div class="content-item sliders" ref="imgs">
<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"
......@@ -14,13 +20,99 @@
<div class="modal"></div>
</div>
</div>
<div class="center-img">
</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">
<div class="wrapper"></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="12">
<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 wow animate__animated animate__fadeRight" @click="handleClickAudio" >
<img src="@/assets/imgs/display/audio.png" alt="" />
<AudioPlayer
style="display: none"
:url="$getFullUrl(displayDetail.audiosVo[0].url)"
ref="AudioPlayer"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
/>
</div>
</div>
</div>
<div class="content-item units">
<div class="wrapper">
......@@ -33,10 +125,34 @@
<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 class="units-content"></div>
</div>
<div class="content-item lts">
<div class="content-item lts wow animate__animated animate__fadeInUp">
<div class="wrapper">
<div class="custom-title">
<div class="custom-title-prefix">
......@@ -48,9 +164,53 @@
</div>
</div>
</div>
<div class="lts-content">
<div class="lts-list">
<div class="lts-item"></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>
......@@ -59,19 +219,17 @@
</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 { mapGetters } from "vuex";
import { previewFile } from "@/utils/index";
export default {
components: {
SearchBar,
CustomTitle,
AudioPlayer,
ReaderOperations,
MenuList,
......@@ -92,19 +250,27 @@ export default {
selectValue: "",
keyword: "",
displayDetail: {},
slideImageWidth: "",
slideImageWidth: 0, //单个图片的宽度
sildeGroupWidth: 0, //整个轮播的宽度
slideGroupleft: 0, //整个轮播距离父亲盒子的距离（中间view区域）
imgViewerVisible: false,
relateRelics: [],
curUnit: [],
contentWidth: 0,
imgsDom: null,
moveLeft: true,
moveRight: true,
audioPlaying: true,
};
},
mounted() {
// this.creatQrCode();
computed: {
...mapGetters(["dicts"]),
},
async mounted() {
await this.$store.dispatch("dict/getDictList", [
"display_type",
"display_character",
]);
this.loadDetail();
this.$nextTick(() => {
this.loadContentWidth();
});
},
methods: {
async loadDetail() {
......@@ -113,8 +279,6 @@ export default {
let res = await getDisplayById({ exhibitionId });
if (res.code == 0) {
this.displayDetail = res.data;
// debugger
// 处理单元数据
if (
this.displayDetail.exhibitionUnits &&
this.displayDetail.exhibitionUnits.length > 0
......@@ -122,7 +286,7 @@ 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) {
......@@ -134,18 +298,131 @@ export default {
}
}
}
// 获取关联文物
// this.loadCrRecommend();
this.$nextTick(() => {
// this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
// this.$refs.AudioPlayer.play();
this.loadWidth();
this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
this.$refs.AudioPlayer.play();
});
}
}
},
loadContentWidth() {
this.contentWidth = document.getElementById("content").clientWidth + "px";
loadWidth() {
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) {
let firefoxListenFun = function (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);
}
};
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", firefoxListenFun, false);
}
},
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();
} else {
this.$refs["AudioPlayer"].pause();
}
},
},
};
......@@ -193,19 +470,19 @@ export default {
.sliders {
height: 434px;
margin: 52px 0 84px 0;
// background-color: pink;
display: flex;
justify-content: center;
.center-box {
width: 1200px;
height: 100%;
position: relative;
.view-box {
position: relative;
display: flex;
justify-content: center;
width: 1200px;
.slide-group {
display: flex;
position: relative;
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%;
......@@ -214,25 +491,33 @@ export default {
width: 300px;
height: 100%;
object-fit: cover;
filter: grayscale(14);
}
.modal {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 10;
background-color: rgba(#f8f8f8, 0.75);
// filter: grayscale(14);
}
}
}
}
.center-img {
.modal-layer {
position: absolute;
left: 0;
top: -25px;
z-index: 99;
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);
}
}
}
......@@ -241,18 +526,174 @@ export default {
margin-bottom: 96px;
display: flex;
justify-content: center;
.wrapper {
height: 706px;
background-image: url("@/assets/imgs/display/intro-bg.png");
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: 90px;
height: 90px;
display: flex;
justify-content: center;
align-items: center;
}
}
}
@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 {
// background-color: blue;
margin-bottom: 100px;
display: flex;
justify-content: center;
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 {
......@@ -261,8 +702,8 @@ export default {
flex-direction: column;
align-items: center;
.lts-content {
// display: flex;
// justify-content: center;
display: flex;
justify-content: center;
width: 100%;
height: 569px;
background-image: url("@/assets/imgs/display/lts-bg.png");
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论