Skip to content

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

完善剩余两个主题；修改菜单名称

上级 fc27c46e
隐藏空白字符变更
内嵌 并排
正在显示 包含 2421 行增加 和 1982 行删除
src/components/Breadcrumb/index.vue
浏览文件 @ 124db62a
...@@ -24,11 +24,12 @@ export default { ...@@ -24,11 +24,12 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-breadcrumb__inner{ ::v-deep .el-breadcrumb__inner{
color:#aaa; color:#666;
font-size: 18px;
} }
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner{ ::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner{
color: #666; color: $themeColor;
} }
::v-deep .el-breadcrumb__inner.is-link:hover{ ::v-deep .el-breadcrumb__inner.is-link:hover{
......
src/components/Footer/index.vue
浏览文件 @ 124db62a
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
:class="{ :class="{
footer: true, footer: true,
//isHome:isHome, //isHome:isHome,
//isChStyle: navbarStyle == '2', isChStyle: navbarStyle == '2',
isRedStyle: navbarStyle == '3', isRedStyle: navbarStyle == '3',
isSDCS: navbarStyle == '4', isSDCS: navbarStyle == '4',
isSMGZ: navbarStyle == '5', isSMGZ: navbarStyle == '5',
...@@ -227,7 +227,9 @@ export default { ...@@ -227,7 +227,9 @@ export default {
} }
} }
.isChStyle { .isChStyle {
background-color: #892325 !important; background-color: #194448 !important;
position: relative;
top: -$nav-height;
} }
.isRedStyle { .isRedStyle {
background-color: #813525 !important; background-color: #813525 !important;
......
src/components/NavBar/index.vue
浏览文件 @ 124db62a
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
'header-fixed ': isFixed, 'header-fixed ': isFixed,
// 'header-absolute': isHome || isBoutique, // 'header-absolute': isHome || isBoutique,
//'show-themeColor': isFixed && isHome, //'show-themeColor': isFixed && isHome,
//isChStyle: navbarStyle == '2', isChStyle: navbarStyle == '2',
isRedStyle: navbarStyle == '3', isRedStyle: navbarStyle == '3',
isSDCS: navbarStyle == '4' && isFixed, isSDCS: navbarStyle == '4' && isFixed,
isSMGZ: navbarStyle == '5' && isFixed, isSMGZ: navbarStyle == '5' && isFixed,
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
> >
<span @click="handleToPage(item.path)">{{ item.name }} </span> <span @click="handleToPage(item.path)">{{ item.name }} </span>
<i <i
v-if="item.name == '陈列展览'" v-if="item.name == '展览展示'"
class="el-icon-arrow-down" class="el-icon-arrow-down"
style="transform: translate(30%, 30%); cursor: pointer" style="transform: translate(30%, 30%); cursor: pointer"
></i> ></i>
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<el-button round> <el-button round>
<i class="el-icon-user"></i> <i class="el-icon-user"></i>
<span>登录</span> <span>{{hasToken?userInfo.nickName||userInfo.username:'登录'}}</span>
<!-- <i class="el-icon-arrow-down el-icon--right"></i> --> <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
</el-button> </el-button>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
...@@ -252,8 +252,7 @@ export default { ...@@ -252,8 +252,7 @@ export default {
path: "/ccProduct", path: "/ccProduct",
}; };
} }
if (value.params.themeType) {
if (value.params.themeType) {
this.$store.commit("app/CHANGE_NAV_COLOR", value.params.themeType); this.$store.commit("app/CHANGE_NAV_COLOR", value.params.themeType);
} else { } else {
this.$store.commit("app/CHANGE_NAV_COLOR", "1"); this.$store.commit("app/CHANGE_NAV_COLOR", "1");
...@@ -309,7 +308,7 @@ export default { ...@@ -309,7 +308,7 @@ export default {
// path: "/boutique", // path: "/boutique",
// }, // },
{ {
name: "陈列展览", name: "展览展示",
path: "/display", path: "/display",
children: [ children: [
{ {
...@@ -537,13 +536,13 @@ export default { ...@@ -537,13 +536,13 @@ export default {
}, },
handleEnterTabItem(item) { handleEnterTabItem(item) {
if (item.name == "陈列展览") { if (item.name == "展览展示") {
this.showSubMenu = true; this.showSubMenu = true;
} }
}, },
handleLeaveTabItem(item) { handleLeaveTabItem(item) {
if (item.name == "陈列展览" && this.showSubMenu) { if (item.name == "展览展示" && this.showSubMenu) {
this.showSubMenu = false; this.showSubMenu = false;
} }
}, },
...@@ -597,7 +596,9 @@ export default { ...@@ -597,7 +596,9 @@ export default {
} }
.isChStyle { .isChStyle {
background-color: #892325 !important; // background-color: #892325 !important;
background-color: rgba(0,0,0,0.25) !important;
} }
.isRedStyle { .isRedStyle {
......
src/components/ReaderOperations/index.vue
浏览文件 @ 124db62a
<template> <template>
<div class="reader-operations"> <div class="reader-operations">
<span <span class="operations" :style="{
class="operations" color,
:style="{ }">
color: color,
}"
>
<span class="operation-item"> <span class="operation-item">
<svg-icon <svg-icon icon-class="view" :style="{
icon-class="view" fontSize: iconSize + 'px',
:style="{ color,
fontSize: iconSize + 'px', }"></svg-icon>
color: color,
}"
></svg-icon>
<span>{{ formatNum(info.browseCount) }}</span> <span>{{ formatNum(info.browseCount) }}</span>
</span> </span>
<span class="operation-item"> <span class="operation-item">
<svg-icon <svg-icon @click="handleLike" :icon-class="info.loveCountStatus ? 'dianzan-s' : 'dianzan'" :style="{
@click="handleLike" fontSize: iconSize + 'px',
:icon-class="info.loaveCountStatus ? 'dianzan-s' : 'dianzan'" color: info.loveCountStatus ? selectColor : color,
:style="{ }"></svg-icon>
fontSize: iconSize + 'px',
color: info.loaveCountStatus ? selectColor : color,
}"
></svg-icon>
<span>{{ <span>{{
formatNum(info.loveCount) == 0 ? "点赞" : formatNum(info.loveCount) formatNum(info.loveCount) == 0 ? "点赞" : formatNum(info.loveCount)
}}</span> }}</span>
</span> </span>
<span class="operation-item" @click="handleCollect"> <span class="operation-item" @click="handleCollect">
<svg-icon <svg-icon :icon-class="info.collectCountStatus ? 'collect-s' : 'collect'" :style="{
:icon-class="info.collectCountStatus ? 'collect-s' : 'collect'" fontSize: iconSize + 'px',
:style="{ color: info.collectCountStatus ? selectColor : color,
fontSize: iconSize + 'px', }"></svg-icon>
color: info.collectCountStatus ? selectColor : color,
}"
></svg-icon>
<span>{{ <span>{{
formatNum(info.collectCount) == 0 formatNum(info.collectCount) == 0
? "收藏" ? "收藏"
: formatNum(info.collectCount) : formatNum(info.collectCount)
}}</span> }}</span>
</span> </span>
<span class="operation-item" @click="handleShare"> <span class="operation-item" @click="handleShare">
<svg-icon <svg-icon icon-class="share2" :style="{
icon-class="share2" fontSize: iconSize + 'px',
:style="{ color,
fontSize: iconSize + 'px', }"></svg-icon>
}"
></svg-icon>
<span>分享</span> <span>分享</span>
</span> </span>
</span> </span>
<el-dialog <el-dialog title="登录提示" :visible.sync="loginDialogVisible" width="30%" :before-close="handleLoginClose"
title="登录提示" append-to-body>
:visible.sync="loginDialogVisible"
width="30%"
:before-close="handleLoginClose"
append-to-body
>
<span>读者功能需登录进行使用，是否去登录？</span> <span>读者功能需登录进行使用，是否去登录？</span>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="loginDialogVisible = false">取 消</el-button> <el-button @click="loginDialogVisible = false">取 消</el-button>
<el-button type="primary" @click.native="handleToLogin" <el-button type="primary" @click.native="handleToLogin">确 定</el-button>
>确 定</el-button
>
</span> </span>
</el-dialog> </el-dialog>
<el-dialog <el-dialog title="分享给朋友" :visible.sync="shareDialogVisible" width="40%" :before-close="handleShareClose"
title="分享给朋友" append-to-body>
:visible.sync="shareDialogVisible"
width="40%"
:before-close="handleShareClose"
append-to-body
>
<!-- <div class="qrcode"> <!-- <div class="qrcode">
</div> --> </div> -->
<div class="copy"> <div class="copy">
...@@ -84,9 +57,7 @@ ...@@ -84,9 +57,7 @@
<template slot="append"> <template slot="append">
<el-button type="text" @click.native="copyUrl"> <el-button type="text" @click.native="copyUrl">
<svg-icon icon-class="copy"></svg-icon> <svg-icon icon-class="copy"></svg-icon>
复制链接</el-button 复制链接</el-button></template>
></template
>
</el-input> </el-input>
</div> </div>
</el-dialog> </el-dialog>
...@@ -99,45 +70,6 @@ import { debounce, formatNum } from "@/utils/index"; ...@@ -99,45 +70,6 @@ import { debounce, formatNum } from "@/utils/index";
export default { export default {
name: "ReaderOperations", name: "ReaderOperations",
props: { props: {
// // 是否需要点赞,默认需要
// like: {
// type: Boolean,
// default: true,
// },
// // 是否需要收藏，默认需要
// collect: {
// type: Boolean,
// default: true,
// },
// // 是否需要分享，默认需要
// share: {
// type: Boolean,
// default: true,
// },
// // 点赞数量
// loveCount: {
// type: String,
// default: "0",
// },
// // 收藏数量
// collectCount: {
// type: String,
// default: "0",
// },
// // 点赞状态
// loveCountStatus: {
// type: Boolean,
// default: false,
// },
// // 收藏状态
// collectCountStatus: {
// type: Boolean,
// default: false,
// },
// sourceId: {
// type: String,
// default: "",
// },
info: { info: {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
...@@ -147,10 +79,6 @@ export default { ...@@ -147,10 +79,6 @@ export default {
type: String, type: String,
default: "", default: "",
}, },
// title: {
// type: String,
// default: "",
// },
iconSize: { iconSize: {
type: [Number, String], type: [Number, String],
default: 28, default: 28,
...@@ -163,26 +91,6 @@ export default { ...@@ -163,26 +91,6 @@ export default {
type: String, type: String,
default: "#fff", default: "#fff",
}, },
// //图标未选中时的颜色
// iconColor: {
// type: String,
// default: "#fff",
// },
// //图标选中时的颜色
// selectIconColor: {
// type: String,
// default: "#fff",
// },
// // 文字未选中时的颜色
// fontColor: {
// type: String,
// default: "#fff",
// },
// // 文本选中时的颜色
// selectFontColor: {
// type: String,
// default: "#fff",
// },
}, },
data() { data() {
return { return {
...@@ -212,13 +120,16 @@ export default { ...@@ -212,13 +120,16 @@ export default {
title, title,
}; };
this.$store.dispatch("user/toggleCollect", params).then(() => { this.$store.dispatch("user/toggleCollect", params).then(() => {
if (!this.collectCountStatus) { if (!this.info.collectCountStatus) {
// 点赞 // 点赞
this.$message.success("已收藏！"); this.$message.success("已收藏！");
} else { } else {
this.$message.success("已取消收藏！"); this.$message.success("已取消收藏！");
} }
this.$emit("reload"); setTimeout(() => {
this.$emit("reload", this.info.crId || this.info.exhibitionId);
}, 300)
}); });
} else { } else {
this.loginDialogVisible = true; this.loginDialogVisible = true;
...@@ -242,13 +153,15 @@ export default { ...@@ -242,13 +153,15 @@ export default {
title, title,
}; };
this.$store.dispatch("user/toggleLike", params).then(() => { this.$store.dispatch("user/toggleLike", params).then(() => {
if (!this.info.loaveCountStatus) { if (!this.info.loveCountStatus) {
// 点赞 // 点赞
this.$message.success("已点赞！"); this.$message.success("已点赞！");
} else { } else {
this.$message.success("已取消点赞！"); this.$message.success("已取消点赞！");
} }
this.$emit("reload"); setTimeout(() => {
this.$emit("reload", this.info.crId || this.info.exhibitionId);
}, 300)
}); });
} else { } else {
this.loginDialogVisible = true; this.loginDialogVisible = true;
...@@ -297,24 +210,29 @@ export default { ...@@ -297,24 +210,29 @@ export default {
width: 100%; width: 100%;
max-width: 500px; max-width: 500px;
} }
.operations { .operations {
// margin-top: 22px; // margin-top: 22px;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.operation-item { .operation-item {
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
} }
.svg-icon { .svg-icon {
margin-right: 10px; margin-right: 10px;
font-size: 24px; font-size: 24px;
} }
.like { .like {
color: #831122; color: #831122;
} }
.collect { .collect {
color: #831122; color: #831122;
} }
...@@ -334,6 +252,7 @@ export default { ...@@ -334,6 +252,7 @@ export default {
.img-container { .img-container {
width: 200px; width: 200px;
height: 200px; height: 200px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -349,6 +268,7 @@ export default { ...@@ -349,6 +268,7 @@ export default {
.el-button { .el-button {
border-radius: 0; border-radius: 0;
} }
.el-button--primary { .el-button--primary {
border: none; border: none;
background-color: $themeColor; background-color: $themeColor;
......
src/components/VideoPlayer/index.vue
浏览文件 @ 124db62a
...@@ -93,6 +93,12 @@ export default { ...@@ -93,6 +93,12 @@ export default {
height: 100%; height: 100%;
.video-js { .video-js {
&:hover{
.vjs-big-play-button{
// background-color: #fff;
// color: $themeColor;
}
}
video { video {
// object-fit: fill; // object-fit: fill;
} }
...@@ -105,7 +111,13 @@ export default { ...@@ -105,7 +111,13 @@ export default {
.vjs-big-play-button { .vjs-big-play-button {
left: 50%; left: 50%;
top: 50%; top: 50%;
width: 80px;
height: 80px;
border-radius: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 50px;
color: #fff;
background-color: $themeColor;
} }
.vjs-control-bar { .vjs-control-bar {
......
src/views/culturalRelic/Detail.vue
浏览文件 @ 124db62a
...@@ -17,34 +17,6 @@ ...@@ -17,34 +17,6 @@
<Breadcrumb :list="guideList" /> <Breadcrumb :list="guideList" />
</div> </div>
<!-- tabs --> <!-- tabs -->
<ul class="menu-tabs">
<li
:class="{ active: nodeActive === 'intro' }"
@click="handleTabClick('intro')"
>
<span>文物简介</span>
</li>
<template v-for="node in tabbarData">
<li
:key="node.domId"
:class="{ active: nodeActive === node.domId }"
@click="handleTabClick(node.domId)"
v-if="
node.domId !== 'intro' &&
CRDetail[`${node.domId}`] &&
CRDetail[`${node.domId}`].length > 0
"
>
<span>{{ node.name }}</span>
</li>
</template>
<li
:class="{ active: nodeActive === 'relateRelics' }"
@click="handleTabClick('relateRelics')"
>
<span>相关文物</span>
</li>
</ul>
<div class="inner"> <div class="inner">
<div class="inner-left"> <div class="inner-left">
...@@ -56,85 +28,43 @@ ...@@ -56,85 +28,43 @@
</div> </div>
<div class="basic-info"> <div class="basic-info">
<div class="body-item" v-if="CRDetail.yearsLabel"> <div class="body-item" v-if="CRDetail.yearsLabel">
<!-- <span class="label">
年代</span
> -->
<span class="value">{{ CRDetail.yearsLabel || "暂无" }}</span> <span class="value">{{ CRDetail.yearsLabel || "暂无" }}</span>
</div> </div>
<div class="body-item" v-if="CRDetail.sourceWay"> <div class="body-item" v-if="CRDetail.sourceWay">
<!-- <span class="label">
来源</span
> -->
<span class="value">{{ CRDetail.sourceWay || "暂无" }}</span> <span class="value">{{ CRDetail.sourceWay || "暂无" }}</span>
</div> </div>
<div class="body-item" v-if="CRDetail.typeLabel"> <div class="body-item" v-if="CRDetail.typeLabel">
<!-- <span class="label">
类别</span
> -->
<span class="value">{{ CRDetail.typeLabel || "暂无" }}</span> <span class="value">{{ CRDetail.typeLabel || "暂无" }}</span>
</div> </div>
<div class="body-item" v-if="CRDetail.levelLabel"> <div class="body-item" v-if="CRDetail.levelLabel">
<!-- <span class="label">
级别</span
> -->
<span class="value">{{ CRDetail.levelLabel || "暂无" }}</span> <span class="value">{{ CRDetail.levelLabel || "暂无" }}</span>
</div> </div>
<div class="body-item" v-if="CRDetail.textureTypeLabel"> <div class="body-item" v-if="CRDetail.textureTypeLabel">
<!-- <span class="label">
质地</span
> -->
<span class="value">{{ <span class="value">{{
CRDetail.textureTypeLabel || "暂无" CRDetail.textureTypeLabel || "暂无"
}}</span> }}</span>
</div> </div>
<div class="body-item" v-if="CRDetail.detailSize"> <div class="body-item" v-if="CRDetail.detailSize">
<!-- <span class="label">
尺寸
</span> -->
<span class="value">{{ CRDetail.detailSize || "暂无" }}</span> <span class="value">{{ CRDetail.detailSize || "暂无" }}</span>
</div> </div>
<div class="body-item" v-if="CRDetail.deptName"> <div class="body-item" v-if="CRDetail.deptName">
<!-- <span class="label">
馆藏单位</span
> -->
<span class="value">{{ CRDetail.deptName || "暂无" }}</span> <span class="value">{{ CRDetail.deptName || "暂无" }}</span>
</div> </div>
</div> </div>
<!-- 文物简介 --> <!-- 文物简介 -->
<div <div class="content-item display-detail_intro" v-if="CRDetail.intro" id="intro">
class="content-item display-detail_intro"
v-if="CRDetail.intro"
id="intro"
>
<div class="intro-content"> <div class="intro-content">
<div <div class="intro-content-container" v-html="CRDetail.intro"></div>
class="intro-content-container"
v-html="CRDetail.intro"
></div>
</div> </div>
</div> </div>
<div class="bottom"> <div class="bottom">
<div class="view-count">
<svg-icon icon-class="view"></svg-icon>
<span>{{ CRDetail.browseCount }}</span>
</div>
<div class="tools"> <div class="tools">
<ReaderOperations <ReaderOperations :info="CRDetail" :sourceType="'biz_cultural_relic'" color='#333' selectColor='#333'
:loveCount="CRDetail.loveCount" @reload="loadDetail" />
:loveCountStatus="Boolean(CRDetail.loveCountStatus)"
:collectCount="CRDetail.collectCount"
:collectCountStatus="Boolean(CRDetail.collectCountStatus)"
:sourceId="CRDetail.crId"
:title="CRDetail.name"
:sourceType="'biz_cultural_relic'"
@reload="loadDetail"
/>
</div> </div>
<div class="showIcon" v-if="CRDetail.url3d" @click="handleTo3D"> <div class="showIcon" v-if="CRDetail.url3d" @click="handleTo3D">
<svg-icon icon-class="3d" class="icon"></svg-icon <svg-icon icon-class="3d" class="icon"></svg-icon>查看文物3D模型
>查看文物3D模型
</div> </div>
</div> </div>
</div> </div>
...@@ -156,106 +86,69 @@ ...@@ -156,106 +86,69 @@
/> />
</div> --> </div> -->
<!-- 文物视频 --> <!-- 文物视频 -->
<div <div class="content-item display-detail_videos" v-if="
class="content-item display-detail_videos" CRDetail.videosVo &&
v-if=" CRDetail.videosVo.length > 0 &&
CRDetail.videosVo && nodeActive === 'videosVo'
CRDetail.videosVo.length > 0 && " id="videosVo">
nodeActive === 'videosVo'
"
id="videosVo"
>
<div class="video-title"> <div class="video-title">
<!-- <i class="el-icon-video-camera"></i> --> <!-- <i class="el-icon-video-camera"></i> -->
相关视频 相关视频
</div> </div>
<div class="video-names"> <div class="video-names">
<div <div class="video-item" v-for="(item, index) in CRDetail.videosVo" :key="index"
class="video-item" @click="handleChangeCurrentVideo(item)">
v-for="(item, index) in CRDetail.videosVo" <div :class="[
:key="index" 'name',
@click="handleChangeCurrentVideo(item)" currentVideo && item.fileId == currentVideo.fileId
> ? 'active'
<div : '',
:class="[ ]">
'name',
currentVideo && item.fileId == currentVideo.fileId
? 'active'
: '',
]"
>
{{ item.name.split(".")[0] }} {{ item.name.split(".")[0] }}
</div> </div>
</div> </div>
</div> </div>
<video-player <video-player v-if="currentVideo" :src="$getFullUrl(currentVideo.url)" class="video-box"></video-player>
v-if="currentVideo"
:src="$getFullUrl(currentVideo.url)"
class="video-box"
></video-player>
</div> </div>
<!--相关文物 --> <!--相关文物 -->
<div <div class="content-item display-detail_relate_rc" ref="units" id="relateRelics"
class="content-item display-detail_relate_rc" v-if="nodeActive === 'relateRelics'">
ref="units"
id="relateRelics"
v-if="nodeActive === 'relateRelics'"
>
<div class="recommend-type"> <div class="recommend-type">
<el-radio-group v-model="currentRcKey" size="small"> <el-radio-group v-model="currentRcKey" size="small">
<el-radio :label="'type'" v-if="CRDetail.type">同类别</el-radio> <el-radio :label="'type'" v-if="CRDetail.type">同类别</el-radio>
<el-radio :label="'years'" v-if="CRDetail.years" <el-radio :label="'years'" v-if="CRDetail.years">同年代</el-radio>
>同年代</el-radio <el-radio :label="'deptId'" v-if="CRDetail.deptId">同馆藏</el-radio>
>
<el-radio :label="'deptId'" v-if="CRDetail.deptId"
>同馆藏</el-radio
>
</el-radio-group> </el-radio-group>
</div> </div>
<div class="recommend-obj"> <div class="recommend-obj">
<div class="recommend-obj-node" v-if="relateRelics.length > 0"> <div class="recommend-obj-node" v-if="relateRelics.length > 0">
<div v-for="(item, index) in relateRelics" :key="index"> <div v-for="(item, index) in relateRelics" :key="index">
<div class="img-container" @click="handleToCr(item)"> <div class="img-container" @click="handleToCr(item)">
<img :src="$getFullUrl(item.faceImagePressUrl)" alt="" /> <img :src="$getFullUrl(item.faceImageMiddleUrl || item.faceImagePressUrl)" alt="" />
</div> </div>
<div class="cr-name">{{ item.name }}</div> <div class="cr-name">{{ item.name }}</div>
</div> </div>
</div> </div>
<el-empty <el-empty v-else description="暂无相关推荐，去看看其他的吧~"></el-empty>
v-else
description="暂无相关推荐，去看看其他的吧~"
></el-empty>
</div> </div>
</div> </div>
<!-- 相关文献 --> <!-- 相关文献 -->
<div <div class="content-item display-detail_lts" id="literatureVo" v-if="
class="content-item display-detail_lts" CRDetail.literatureVo &&
id="literatureVo" CRDetail.literatureVo.length > 0 &&
v-if=" nodeActive === 'literatureVo'
CRDetail.literatureVo && ">
CRDetail.literatureVo.length > 0 &&
nodeActive === 'literatureVo'
"
>
<div class="title">相关文献</div> <div class="title">相关文献</div>
<div class="lts-content"> <div class="lts-content">
<el-scrollbar style="height: 100%"> <el-scrollbar style="height: 100%">
<div <div class="lt-item" v-for="(item, index) in CRDetail.literatureVo" :key="index"
class="lt-item" @click="handleViewLt(item)">
v-for="(item, index) in CRDetail.literatureVo"
:key="index"
@click="handleViewLt(item)"
>
<span class="lt-order">[{{ index + 1 }}]</span> <span class="lt-order">[{{ index + 1 }}]</span>
<span class="lt-authors" v-if="item.authors" <span class="lt-authors" v-if="item.authors">{{ item.authors }}.</span>
>{{ item.authors }}.</span
>
<span class="lt-name" v-if="item.name">{{ item.name }}.</span> <span class="lt-name" v-if="item.name">{{ item.name }}.</span>
<span class="lt-source" v-if="item.source" <span class="lt-source" v-if="item.source">{{ item.source }}.</span>
>{{ item.source }}.</span
>
<span class="lt-date" v-if="item.date">{{ item.date }}</span> <span class="lt-date" v-if="item.date">{{ item.date }}</span>
</div> </div>
</el-scrollbar> </el-scrollbar>
...@@ -266,11 +159,8 @@ ...@@ -266,11 +159,8 @@
<div class="inner-right wow animate__animated animate__fadeInLeft"> <div class="inner-right wow animate__animated animate__fadeInLeft">
<swiper :options="swiperOption2" ref="crSwiper"> <swiper :options="swiperOption2" ref="crSwiper">
<swiper-slide v-for="(item, i) in imagesVo" :key="i"> <swiper-slide v-for="(item, i) in imagesVo" :key="i">
<div <div class="img-container" @click.stop="handelPreviewImages(imagesVo, i)">
class="img-container" <img :src="$getFullUrl(item.middleUrl || item.pressUrl)" alt="" />
@click="handelPreviewImages(imagesVo, i)"
>
<img :src="$getFullUrl(item.middleUrl)" alt="" />
</div> </div>
</swiper-slide> </swiper-slide>
<div class="swiper-pagination" slot="pagination"></div> <div class="swiper-pagination" slot="pagination"></div>
...@@ -282,14 +172,29 @@ ...@@ -282,14 +172,29 @@
</div> </div>
</swiper> </swiper>
</div> </div>
<ul class="menu-tabs">
<li :class="{ active: nodeActive === 'intro' }" @click="handleTabClick('intro')">
<span>文物简介</span>
</li>
<template v-for="node in tabbarData">
<li :key="node.domId" :class="{ active: nodeActive === node.domId }" @click="handleTabClick(node.domId)"
v-if="
node.domId !== 'intro' &&
CRDetail[`${node.domId}`] &&
CRDetail[`${node.domId}`].length > 0
">
<span>{{ node.name }}</span>
</li>
</template>
<li :class="{ active: nodeActive === 'relateRelics' }" @click="handleTabClick('relateRelics')">
<span>相关文物</span>
</li>
</ul>
</div> </div>
</div> </div>
<el-image-viewer <el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" :initial-index="imgIndex" />
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
:initial-index="imgIndex"
/>
</div> </div>
</template> </template>
...@@ -609,10 +514,11 @@ $node-w: 700px; ...@@ -609,10 +514,11 @@ $node-w: 700px;
width: 100%; width: 100%;
height: 100%; height: 100%;
> img { >img {
width: 100%; width: 100%;
} }
> .main {
>.main {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
height: calc(100% + $nav-height); height: calc(100% + $nav-height);
...@@ -620,31 +526,37 @@ $node-w: 700px; ...@@ -620,31 +526,37 @@ $node-w: 700px;
top: -$nav-height; top: -$nav-height;
left: 0; left: 0;
overflow: hidden; overflow: hidden;
> img {
>img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
> .color {
>.color {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
> img {
>img {
position: absolute; position: absolute;
&.river { &.river {
width: 100%; width: 100%;
height: 727px; height: 727px;
bottom: -275px; bottom: -275px;
left: 0; left: 0;
} }
&.cb { &.cb {
width: 830px; width: 830px;
height: 830px; height: 830px;
right: 100px; right: 100px;
top: 100px; top: 100px;
} }
&.circle { &.circle {
width: 454px; width: 454px;
height: 454px; height: 454px;
...@@ -669,128 +581,17 @@ $node-w: 700px; ...@@ -669,128 +581,17 @@ $node-w: 700px;
position: relative; position: relative;
z-index: 999; z-index: 999;
} }
.menu-tabs {
line-height: 50px;
position: absolute;
right: 60px;
top: 90px;
// width: 30px;
z-index: 10;
> li {
// border: 1px solid #333;
writing-mode: vertical-lr;
width: 45px;
height: 157px;
background-image: url(@/assets/imgs/show/outer.png);
background-size: cover;
position: relative;
+ li {
margin-top: 20px;
}
> span {
color: #fff;
width: 40px;
height: 138px;
background-image: url(@/assets/imgs/show/inner.png);
background-size: cover;
position: absolute;
left: 10px;
top: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
letter-spacing: 5px;
}
&:hover,
&.active {
cursor: pointer;
// background-color: $themeColor;
background-image: url(@/assets/imgs/show/outer-active.png);
> span {
// background: #b5800a;
background-image: url(@/assets/imgs/show/inner-active.png);
}
}
}
}
.inner { .inner {
width: 100%; width: 100%;
display: flex; display: flex;
position: relative;
.inner-right { padding: 0 120px 0 100px;
width: 50%;
height: calc(100vh - 100px);
// position: relative;
display: flex;
align-items: center;
flex-direction: column;
.swiper-container {
height: 68vh;
width: 100%;
.img-container {
height: 100%;
width: 100%;
img {
height: 100%;
width: 100%;
object-fit: contain;
}
}
}
.swiper-button-next,
.swiper-button-prev {
background-image: none;
border: 2px solid #fff;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-weight: bolder;
transform: translateY(-72px);
font-size: 22px !important;
}
// >div {
// width: 90%;
// height: 60vh;
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -70%);
// display: flex;
// justify-content: center;
// align-items: center;
// >img {
// max-width: 100%;
// max-height: 100%;
// }
// }
}
.inner-right {
padding: 0 60px;
::v-deep .firstDiv {
position: unset;
transform: none;
}
}
.inner-left { .inner-left {
padding-left: 120px; // padding-left: 120px;
width: 50%; width: 50%;
height: calc(100vh - 100px); height: calc(100vh - 100px);
position: relative; position: relative;
...@@ -807,19 +608,19 @@ $node-w: 700px; ...@@ -807,19 +608,19 @@ $node-w: 700px;
padding-bottom: 10px; padding-bottom: 10px;
align-items: center; align-items: center;
> span { >span {
font-size: 50px; font-size: 50px;
font-family: "华文行楷"; font-family: "华文行楷";
font-weight: 600; font-weight: 600;
} }
.view-count { .view-count {
> span { >span {
margin-left: 10px; margin-left: 10px;
color: #ddd; color: #ddd;
} }
> svg { >svg {
color: #ddd; color: #ddd;
} }
} }
...@@ -831,6 +632,7 @@ $node-w: 700px; ...@@ -831,6 +632,7 @@ $node-w: 700px;
// flex-wrap: wrap; // flex-wrap: wrap;
color: #333; color: #333;
position: relative; position: relative;
&::before { &::before {
content: ""; content: "";
display: block; display: block;
...@@ -841,7 +643,7 @@ $node-w: 700px; ...@@ -841,7 +643,7 @@ $node-w: 700px;
left: 0; left: 0;
} }
> div { >div {
// line-height: 24px; // line-height: 24px;
padding: 10px 0; padding: 10px 0;
padding-left: 50px; padding-left: 50px;
...@@ -882,17 +684,20 @@ $node-w: 700px; ...@@ -882,17 +684,20 @@ $node-w: 700px;
padding-top: 20px; padding-top: 20px;
display: flex; display: flex;
font-size: 16px; font-size: 16px;
> .view-count {
>.view-count {
width: 100px; width: 100px;
display: flex; display: flex;
align-items: center; align-items: center;
> svg {
>svg {
margin-right: 10px; margin-right: 10px;
font-size: 28px; font-size: 28px;
} }
} }
> .tools {
width: 300px; >.tools {
width: 400px;
} }
} }
...@@ -903,7 +708,6 @@ $node-w: 700px; ...@@ -903,7 +708,6 @@ $node-w: 700px;
.recommend-type { .recommend-type {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: 40px;
} }
.recommend-obj { .recommend-obj {
...@@ -915,7 +719,7 @@ $node-w: 700px; ...@@ -915,7 +719,7 @@ $node-w: 700px;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
> div { >div {
width: 40%; width: 40%;
padding: 20px; padding: 20px;
} }
...@@ -923,19 +727,19 @@ $node-w: 700px; ...@@ -923,19 +727,19 @@ $node-w: 700px;
.img-container { .img-container {
width: 100%; width: 100%;
height: 260px; height: 220px;
display: flex; display: flex;
justify-content: center; justify-content: center;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
> img { >img {
transform: scale(1.2); transform: scale(1.2);
} }
} }
> img { >img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
object-fit: contain; object-fit: contain;
...@@ -950,6 +754,7 @@ $node-w: 700px; ...@@ -950,6 +754,7 @@ $node-w: 700px;
font-weight: 600; font-weight: 600;
font-family: "楷体"; font-family: "楷体";
color: #333; color: #333;
font-size: 24px;
} }
} }
} }
...@@ -978,12 +783,114 @@ $node-w: 700px; ...@@ -978,12 +783,114 @@ $node-w: 700px;
padding: 10px 0; padding: 10px 0;
cursor: pointer; cursor: pointer;
& > span { &>span {
padding: 0 4px; padding: 0 4px;
} }
} }
} }
} }
.inner-right {
width: 50%;
height: calc(100vh - 100px);
display: flex;
align-items: center;
flex-direction: column;
padding: 0 160px 80px 20px;
::v-deep .firstDiv {
position: unset;
transform: none;
}
.swiper-container {
width: 100%;
.img-container {
height: 100%;
width: 100%;
img {
height: 100%;
width: 100%;
object-fit: contain;
}
}
}
.swiper-button-next,
.swiper-button-prev {
background-image: none;
border: 2px solid #666;
background-color: rgba($themeColor,0.5);
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-weight: bolder;
font-size: 28px !important;
}
.swiper-button-next{
transform: translate(10px,-72px);
}
.swiper-button-prev{
transform: translate(-10px,-72px);
}
}
.menu-tabs {
line-height: 50px;
position: absolute;
right:120px;
top: 0;
// width: 30px;
z-index: 10;
>li {
// border: 1px solid #333;
writing-mode: vertical-lr;
width: 45px;
height: 157px;
background-image: url(@/assets/imgs/show/outer.png);
background-size: cover;
position: relative;
+li {
margin-top: 20px;
}
>span {
color: #fff;
width: 40px;
height: 138px;
background-image: url(@/assets/imgs/show/inner.png);
background-size: cover;
position: absolute;
left: 10px;
top: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
letter-spacing: 5px;
}
&:hover,
&.active {
cursor: pointer;
// background-color: $themeColor;
background-image: url(@/assets/imgs/show/outer-active.png);
>span {
// background: #b5800a;
background-image: url(@/assets/imgs/show/inner-active.png);
}
}
}
}
} }
::v-deep .el-scrollbar__wrap { ::v-deep .el-scrollbar__wrap {
...@@ -1033,9 +940,9 @@ $node-w: 700px; ...@@ -1033,9 +940,9 @@ $node-w: 700px;
} }
::v-deep .el-radio__label { ::v-deep .el-radio__label {
font-size: 18px; font-size: 24px;
padding-left: 0; padding-left: 0;
font-family: SourceHanSerifCN-Bold; font-weight: bold;
} }
/* ::v-deep .el-radio__input.is-checked + .el-radio__label { /* ::v-deep .el-radio__input.is-checked + .el-radio__label {
...@@ -1050,9 +957,11 @@ $node-w: 700px; ...@@ -1050,9 +957,11 @@ $node-w: 700px;
:v-deep .swiper { :v-deep .swiper {
height: 66vh; height: 66vh;
} }
:v-deep .swiper-container { :v-deep .swiper-container {
height: 100%; height: 100%;
width: 100%; width: 100%;
.swiper-wrapper { .swiper-wrapper {
height: 100%; height: 100%;
} }
......
src/views/display/Detail.vue
浏览文件 @ 124db62a
...@@ -67,4 +67,8 @@ export default { ...@@ -67,4 +67,8 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// .display-detail{
// position: relative;
// top: -$nav-height;
// }
</style> </style>
\ No newline at end of file
src/views/display/components/ChStyle-old.vue 0 → 100644
浏览文件 @ 124db62a
<template>
<div class="ch-style">
<div class="content" id="content">
<div
class="
content-item
sliders
wow
animate__animated animate__fadeInRightBig
"
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.middleUrl || 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/ch/slider-box.png" alt="" />
</div>
<div class="right-layer"></div>
</div>
</div>
<div class="content-item intro">
<div class="wrapper">
<div class="title">
<div class="wow animate__animated animate__fadeIn">
{{ displayDetail.title }}
</div>
<div class="view-count wow animate__animated animate__fadeIn">
<svg-icon icon-class="view"></svg-icon>
<span>{{ displayDetail.browseCount }}</span>
</div>
</div>
<div class="desc-and-tools">
<div class="desc wow animate__animated animate__fadeIn">
<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.displayType">
<div class="label">展览类型：</div>
<div class="value">
{{ dicts.displayType[displayDetail.type]||'暂无' }}
</div>
</el-col>
</el-row>
<el-row>
<el-col class="item" v-if="dicts.displayCharacter">
<div class="label">展览性质：</div>
<div class="value">
{{ dicts.displayCharacter[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 wow animate__animated animate__fadeIn">
<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="reload"
:selectColor="'#892325'"
/>
</div>
</div>
<div class="divider"></div>
<div class="intro-and-video">
<div class="intro-container">
<div
class="intro-title wow animate__animated animate__fadeInLeft"
>
展览简介
</div>
<div
class="intro-content wow animate__animated animate__fadeInLeft"
v-html="displayDetail.intro"
></div>
</div>
</div>
<!-- <div
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
class="videos wow animate__animated animate__fadeInRight"
>
<el-carousel>
<el-carousel-item
v-for="item in displayDetail.videosVo"
:key="item.fileId"
>
<Video :url="$getFullUrl(item.url)" />
</el-carousel-item>
</el-carousel>
</div> -->
<div
class="
content-item
videos
wow
animate__animated animate__fadeInRight
"
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
>
<div class="video-title">
<!-- <i class="el-icon-video-camera"></i> -->
展览视频
</div>
<div class="video-names">
<div
class="video-item"
v-for="(item, index) in displayDetail.videosVo"
:key="index"
@click="handleChangeCurrentVideo(item)"
>
<div
:class="[
'name',
currentVideo && item.fileId == currentVideo.fileId
? 'active'
: '',
]"
>
{{ item.name.split(".")[0] }}
</div>
</div>
</div>
<video-player
v-if="currentVideo"
:src="$getFullUrl(currentVideo.url)"
class="video-box"
></video-player>
</div>
<div
class="audio"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
@click="handleClickAudio"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
>
<!-- <svg-icon icon-class="music"></svg-icon> -->
<img src="@/assets/imgs/display/normal/music-red.png" alt="" />
<AudioPlayer
style="display: none"
:url="$getFullUrl(displayDetail.audiosVo[0].url)"
ref="AudioPlayer"
/>
</div>
</div>
</div>
<div
class="content-item virtual"
v-if="displayDetail.virtualVo.length > 0"
>
<div class="wrapper">
<div
class="img-container"
@click="handleToVR(item)"
v-for="(item, index) in displayDetail.virtualVo"
:key="index"
>
<img :src="$getFullUrl(item.faceImagePressUrl)" alt="" />
<div class="modal">
<svg-icon icon-class="360"></svg-icon>
<div class="name">点击进入{{ item.name }}</div>
</div>
</div>
</div>
</div>
<div
class="content-item units"
v-if="displayDetail.exhibitionUnits.length > 0"
>
<div class="wrapper">
<div class="custom-title wow animate__animated animate__fadeInLeft">
<div class="custom-title-prefix">
<img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
</div>
<div class="custom-title-text">展览单元</div>
<div class="custom-title-suffix">
<img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
</div>
<div class="right">
<a class="clearfix" @click="unitVisible = true">
<svg-icon icon-class="book"></svg-icon>
翻页模式
</a>
</div>
</div>
<ChStyleUnit
:units="node"
v-for="node in displayDetail.exhibitionUnits"
:key="node.euId"
/>
</div>
</div>
<div
class="content-item lts"
v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0
"
>
<div class="wrapper">
<div class="custom-title wow animate__animated animate__fadeInUp">
<div class="custom-title-prefix">
<img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
</div>
<div class="custom-title-text">关联文献</div>
<div class="custom-title-suffix">
<img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
</div>
</div>
</div>
<div class="lts-content">
<div class="wrapper wow animate__animated animate__fadeInUp">
<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/ch/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 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>
</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 MenuList from "@/components/MenuList";
import { previewFile } from "@/utils/index";
// import ChStyleUnit from "./ChStyleUnit.vue";
import ChStyleUnit from "./ChStyleUnit.vue";
import DetailDialog from "./detail-dialog.vue";
import videoPlayer from "@/components/VideoPlayer";
export default {
components: {
AudioPlayer,
ReaderOperations,
MenuList,
Video,
Card,
ChStyleUnit,
DetailDialog,
videoPlayer,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
props: {
displayDetail: {
type: Object,
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,
currentVideo: null,
};
},
async mounted() {
this.loadDetail();
},
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);
}
}
}
}
if (
this.displayDetail.videosVo &&
this.displayDetail.videosVo.length > 0
) {
this.currentVideo = this.displayDetail.videosVo[0];
}
this.$nextTick(() => {
this.loadWidth();
if (
this.displayDetail.audiosVo &&
this.displayDetail.audiosVo.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();
}
},
reload() {
this.$emit("reload");
},
handleMouseEnter(e) {
console.log(e);
},
handleChangeCurrentVideo(video) {
this.currentVideo = video;
},
},
};
</script>
<style lang="scss">
.intro-content{
p{
font-family: $defaultFontFamily !important;
}
}
</style>
<style lang="scss" scoped>
// 中国风主题样式
/**公共样式开始 */
$themeRed: #892325;
.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 {
font-size: 40px;
font-family: KaiTi;
font-weight: 400;
color: #0f0f0f;
line-height: 114px;
}
}
/**公共样式结束 */
/**样式开始 */
.ch-style {
overflow: hidden;
padding-bottom: 60px;
.content {
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 {
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;
margin-right: 1px;
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);
width: 1230px;
}
}
.left-layer,
.right-layer {
flex: 1;
height: 100%;
background-color: rgba(#f8f8f8, 0.8);
}
}
}
/**展览信息 */
.intro {
margin-top: 55px;
display: flex;
justify-content: center;
.wrapper {
background: url("@/assets/imgs/display/ch/intro-bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 50px;
position: relative;
border: 1px solid #d3d3d37a;
.title {
font-size: 40px;
font-family: KaiTi;
font-weight: bold;
color: #0f0f0f;
margin-bottom: 60px;
display: flex;
justify-content: space-between;
align-items: center;
.view-count {
font-size: 18px;
margin-top: 10px;
color: #999;
font-weight: normal;
.svg-icon {
margin-right: 10px;
}
}
}
.desc-and-tools {
display: flex;
justify-content: space-between;
.desc {
display: flex;
.item {
display: flex;
margin-right: 16px;
.label,
.value {
font-size: 18px;
color: #0f0f0f;
line-height: 36px;
}
.label {
margin-left: 8px;
}
}
}
.tools {
width: 300px;
}
}
.divider {
width: 100%;
height: 2px;
border: 1px dashed #b1b0af;
margin: 42px 0;
}
.intro-and-video {
display: flex;
margin-bottom: 20px;
.intro-container {
flex: 1;
.intro-title {
font-size: 32px;
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-weight: 400;
color: #444444;
text-indent: 32px;
line-height: 28px;
margin-left: 8px;
}
}
// .videos {
// flex: 1;
// position: relative;
// height: 256px;
// margin-left: 70px;
// }
}
.videos {
display: flex;
flex-direction: column;
margin-bottom: 40px;
.video-title {
// display: flex;
// justify-content: center;
// align-items: center;
// font-size: 24px;
// color: $themeRed;
// margin: 80px 0 40px;
// font-family: SourceHanSerifCN-Bold;
// i {
// font-size: 28px;
// margin-right: 10px;
// }
font-size: 32px;
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;
}
}
.video-names {
display: flex;
justify-content: center;
border-bottom: 1px solid #f2f0f0;
margin-bottom: 30px;
.video-item {
font-size: 18px;
margin: 8px 30px;
.name {
color: #999;
position: relative;
cursor: pointer;
&:hover {
color: $themeRed;
&::after {
display: inline-block;
}
&::before {
display: inline-block;
}
}
}
.active::after,
.name::after {
content: "";
width: 50%;
height: 1px;
background-color: $themeRed;
position: absolute;
left: 0;
bottom: -9px;
left: 50%;
transform: translateX(-50%);
display: none;
}
.active::before,
.name::before {
content: "";
width: 0;
height: 0;
border: 8px solid transparent;
border-top-color: $themeRed;
position: absolute;
left: 50%;
bottom: -25px;
transform: translateX(-50%);
display: none;
}
.active::after,
.active::before {
display: inline-block;
}
}
}
.video-box {
height: 600px;
.video-player {
height: 100%;
}
}
}
.audio {
position: absolute;
right: -120px;
top: 34px;
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
border: 2px solid $themeRed;
padding: 10px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
transition: all 0.5s ease;
&:hover {
box-shadow: 0 0 14px rgb(0 0 0 / 40%);
}
img {
width: 60px;
height: 60px;
}
}
}
}
@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 */
}
.virtual {
margin-top: 40px;
display: flex;
justify-content: center;
.wrapper {
height: 400px;
display: flex;
.img-container {
// width: 800px;
flex: 1;
height: 400px;
position: relative;
cursor: pointer;
overflow: hidden;
&:hover {
img {
transform: scale(1.1);
}
}
img {
width: 100%;
height: 400px;
transition: all ease 0.5s;
object-fit: cover;
}
.modal {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 400px;
background: rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&:hover {
.name {
opacity: 1;
}
}
.svg-icon {
font-size: 110px;
color: #fff;
}
.name {
color: #fff;
font-size: 28px;
font-family: "KaiTi";
opacity: 0;
transition: all ease 0.5s;
}
}
}
}
}
/**展览单元 */
.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/ch/lts-bg.png");
overflow-x: hidden;
}
}
}
}
.right {
float: right;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
a {
font-size: 22px;
}
.clearfix {
clear: both;
}
a:hover {
cursor: pointer;
color: $themeColor;
}
}
.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;
}
}
}
::v-deep .el-carousel {
height: 100%;
}
::v-deep .el-carousel__container {
height: 100%;
}
::v-deep .el-carousel__item--card {
width: 100%;
height: 100%;
transform: translateX(0) scale(1) !important;
}
</style>
\ No newline at end of file
src/views/display/components/ChStyle.vue
浏览文件 @ 124db62a
<template> <template>
<div class="display-detail"> <div class="ch-style">
<div class="content" id="content"> <div class="content" id="content">
<div <div class="e-imgs">
class=" <swiper class="swiper gallery-top" :options="swiperOption" ref="swiperTop">
content-item <swiper-slide class="slide-item" v-for="(item, index) in displayDetail.imagesVo" :key="index">
sliders <img :src="$getFullUrl(item.middleUrl || item.pressUrl)" style="cursor:pointer"
wow @click="handelPreviewImages(displayDetail.imagesVo, index)" />
animate__animated animate__fadeInRightBig </swiper-slide>
" <div class="swiper-button-next swiper-button-white" slot="button-next">
ref="imgs" <i class="el-icon-arrow-right"></i>
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.middleUrl || item.url)" alt="" />
<div class="modal"></div>
</div>
</div> </div>
</div> <div class="swiper-button-prev swiper-button-white" slot="button-prev">
<i class="el-icon-arrow-left"></i>
<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/ch/slider-box.png" alt="" />
</div> </div>
<div class="right-layer"></div> </swiper>
</div>
</div> </div>
<div class="content-item intro"> <div class="bg">
<div class="wrapper"> <div class="bg1">
<div class="title"> <div class="e-name">
<div class="wow animate__animated animate__fadeIn"> {{ displayDetail.title }}
{{ displayDetail.title }} </div>
<div class="e-tools">
<ReaderOperations :info="displayDetail" :sourceType="'biz_exhibition'" @reload="reload" />
</div>
<div class="e-info">
<div class="info-item">
<span class="label"> 关键词： </span>
<span class="value">{{ displayDetail.keyword || "暂无" }}</span>
</div> </div>
<div class="view-count wow animate__animated animate__fadeIn"> <div class="info-item">
<svg-icon icon-class="view"></svg-icon> <span class="label"> 展览类型： </span>
<span>{{ displayDetail.browseCount }}</span> <span class="value">{{
dicts.displayType[displayDetail.type] || "暂无"
}}</span>
</div> </div>
</div> <div class="info-item">
<div class="desc-and-tools"> <span class="label"> 展览性质： </span>
<div class="desc wow animate__animated animate__fadeIn"> <span class="value">{{
<el-row> dicts.displayCharacter[displayDetail.displayCharacter] || "暂无"
<el-col class="item"> }}</span>
<div class="label">关键词：</div>
<div class="value">{{ displayDetail.keyword ||'暂无'}}</div>
</el-col>
<el-col class="item" v-if="dicts.displayType">
<div class="label">展览类型：</div>
<div class="value">
{{ dicts.displayType[displayDetail.type]||'暂无' }}
</div>
</el-col>
</el-row>
<el-row>
<el-col class="item" v-if="dicts.displayCharacter">
<div class="label">展览性质：</div>
<div class="value">
{{ dicts.displayCharacter[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>
<div class="tools wow animate__animated animate__fadeIn"> <div class="info-item">
<ReaderOperations <span class="label"> 展览单位： </span>
:loveCount="displayDetail.loveCount" <span class="value">{{ displayDetail.deptName || "暂无" }}</span>
:loveCountStatus="Boolean(displayDetail.loveCountStatus)"
:collectCount="displayDetail.collectCount"
:collectCountStatus="Boolean(displayDetail.collectCountStatus)"
:sourceId="displayDetail.exhibitionId"
:title="displayDetail.title"
:sourceType="'biz_exhibition'"
@reload="reload"
:selectColor="'#892325'"
/>
</div> </div>
</div> <div class="info-item">
<div class="divider"></div> <span class="label"> 展览地区： </span>
<div class="intro-and-video"> <span class="value">{{ displayDetail.regionName || "暂无" }}</span>
<div class="intro-container">
<div
class="intro-title wow animate__animated animate__fadeInLeft"
>
展览简介
</div>
<div
class="intro-content wow animate__animated animate__fadeInLeft"
v-html="displayDetail.intro"
></div>
</div> </div>
</div> </div>
</div>
<!-- <div <div class="e-intro">
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0" <div class="intro-text">
class="videos wow animate__animated animate__fadeInRight" <div class="title">展览简介</div>
> <div class="text" v-html="displayDetail.intro"></div>
<el-carousel> </div>
<el-carousel-item </div>
v-for="item in displayDetail.videosVo" <div class="e-units wow animate__animated animate__fadeInUp" ref="units"
:key="item.fileId" v-if="displayDetail.exhibitionUnits.length > 0">
> <div class="units-title">展览单元</div>
<Video :url="$getFullUrl(item.url)" /> <div class="units-content" v-if="currentUnit">
</el-carousel-item> <div class="left">
</el-carousel> <div class="line" :style="{
</div> --> height: (displayDetail.exhibitionUnits.length - 1) * 130 + 'px',
<div }"></div>
class=" <div class="dots">
content-item <div class="dot-item" v-for="(item, index) in displayDetail.exhibitionUnits" :key="index"
videos :style="{ top: index * 130 - 17 + 'px' }" @click="handleClickUnitTitle(item)"
wow @mouseenter="handleMouseEnterUnit(item)" @mouseleave="handleMouseLeaveUnit">
animate__animated animate__fadeInRight <div class="circle" :style="{
" 'background-image': `url(${require(`@/assets/imgs/display/red/${currentUnit.title == item.title ? 'circle-s' : 'circle'
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0" }.png`)})`,
> }"></div>
<div class="video-title"> <div :class="{
<!-- <i class="el-icon-video-camera"></i> --> title: true,
展览视频 active: currentUnit.title == item.title,
}">
{{ item.title }}
</div>
</div>
</div>
</div> </div>
<div class="video-names"> <div class="right-content">
<div <div class="unit-content">
class="video-item" <div class="unit-content-container" v-for="(unitValue, unitTitle) in currentUnit.expandUnitInfo"
v-for="(item, index) in displayDetail.videosVo" :key="unitTitle">
:key="index" <div class="unit-content-title">
@click="handleChangeCurrentVideo(item)" {{ unitTitle }}
> </div>
<div <div class="text-indent unit-content_intro" v-if="currentUnit.intro" v-html="unitValue.intro"></div>
:class="[ <div class="unit-content_images" v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0">
'name', <!-- <div class="imgs-title">单元图片</div> -->
currentVideo && item.fileId == currentVideo.fileId <div class="unit-imgs">
? 'active' <SlideImageGroup :imgList="unitValue.imagesVo" :needEnlarge="true"
: '', v-if="unitValue.imagesVo.length > 3">
]" <template slot-scope="{ item }" slot="img">
> <img :src="$getFullUrl(item.middleUrl || item.url)" alt=""
{{ item.name.split(".")[0] }} style="width: 100%; height: 100%; object-fit: contain" />
</template>
</SlideImageGroup>
<el-row v-if="
unitValue.imagesVo.length > 0 &&
unitValue.imagesVo.length < 4
" :gutter="10">
<el-col v-for="(item, index) in unitValue.imagesVo" :key="index"
:span="24 / unitValue.imagesVo.length" style="height: 300px;">
<img :src="$getFullUrl(item.middleUrl || item.url)" alt="" style="
width: 100%;
height: 100%;
object-fit: contain;
cursor: pointer;
" @click="handelPreviewImages(unitValue.imagesVo, index)" />
</el-col>
</el-row>
</div>
</div>
<div class="unit-content_crs" v-if="
unitValue.culturalRelics &&
unitValue.culturalRelics.length > 0
">
<div class="imgs-title">相关文物</div>
<SlideImageGroup :imgList="unitValue.culturalRelics">
<template slot-scope="{ item }" slot="img">
<img :src="$getFullUrl(item.faceImageMiddleUrl || item.faceImagePressUrl)" alt="" style="
width: 100%;
height: 100%;
object-fit: fill;
cursor: pointer;
" @click="handleToCr(item)" />
</template>
<template slot-scope="{ item }" slot="info">
<div class="name">{{ item.name }}</div>
</template>
</SlideImageGroup>
</div>
</div> </div>
</div> </div>
</div> </div>
<video-player
v-if="currentVideo"
:src="$getFullUrl(currentVideo.url)"
class="video-box"
></video-player>
</div>
<div
class="audio"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
@click="handleClickAudio"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
>
<!-- <svg-icon icon-class="music"></svg-icon> -->
<img src="@/assets/imgs/display/normal/music-red.png" alt="" />
<AudioPlayer
style="display: none"
:url="$getFullUrl(displayDetail.audiosVo[0].url)"
ref="AudioPlayer"
/>
</div> </div>
</div> </div>
</div>
<div <div class="
class="content-item virtual" e-video
v-if="displayDetail.virtualVo.length > 0" wow
> animate__animated animate__fadeInRight
<div class="wrapper"> " v-if="currentVideo.url">
<div <div class="video-title">
class="img-container" 展览视频
@click="handleToVR(item)"
v-for="(item, index) in displayDetail.virtualVo"
:key="index"
>
<img :src="$getFullUrl(item.faceImagePressUrl)" alt="" />
<div class="modal">
<svg-icon icon-class="360"></svg-icon>
<div class="name">点击进入{{ item.name }}</div>
</div>
</div> </div>
</div> <div class="video-content">
</div>
<div <video-player v-if="currentVideo.url" :src="$getFullUrl(currentVideo.url)" class="video-box"></video-player>
class="content-item units" <div class="video-names">
v-if="displayDetail.exhibitionUnits.length > 0" <div :class="{
> 'video-item': true, active: currentVideo && item.fileId == currentVideo.fileId
<div class="wrapper"> }" v-for="(item, index) in displayDetail.videosVo" :key="index" @click="handleChangeCurrentVideo(item)">
<div class="custom-title wow animate__animated animate__fadeInLeft"> {{
<div class="custom-title-prefix"> item.name.split(".")[0]
<img src="@/assets/imgs/display/ch/custom-title.png" alt="" /> }}
</div>
<div class="custom-title-text">展览单元</div>
<div class="custom-title-suffix">
<img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
</div>
<div class="right"> </div>
<a class="clearfix" @click="unitVisible = true">
<svg-icon icon-class="book"></svg-icon>
翻页模式
</a>
</div> </div>
</div> </div>
<ChStyleUnit
:units="node"
v-for="node in displayDetail.exhibitionUnits"
:key="node.euId"
/>
</div> </div>
</div> <div class="e-virtual" v-if="displayDetail.virtualVo.length > 0">
<div <div class="virtual-title">虚拟展厅</div>
class="content-item lts" <div class="wrapper">
v-if=" <div class="img-container" @click="handleToVR(item)" v-for="(item, index) in displayDetail.virtualVo"
displayDetail.literatureVo && displayDetail.literatureVo.length > 0 :key="index">
" <img :src="item.faceImagePressUrl" alt="" />
> <div class="modal">
<div class="wrapper"> <svg-icon icon-class="360"></svg-icon>
<div class="custom-title wow animate__animated animate__fadeInUp"> <div class="name">点击进入{{ item.name }}</div>
<div class="custom-title-prefix"> </div>
<img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
</div>
<div class="custom-title-text">关联文献</div>
<div class="custom-title-suffix">
<img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
</div> </div>
</div> </div>
</div> </div>
<div class="lts-content"> <div class="e-lts" v-if="
<div class="wrapper wow animate__animated animate__fadeInUp"> displayDetail.literatureVo &&
<el-table displayDetail.literatureVo.length > 0
:data="displayDetail.literatureVo" ">
:header-cell-style="{ <div class="lts-title">相关文献</div>
background: '#eeeeee', <div class="lts-content">
color: '#333', <div class="lt-item" v-for="(item, index) in displayDetail.literatureVo" :key="index"
}" @click="handleViewLt(item)">
:row-style="tableRowStyle" <span class="lt-order">[{{ index + 1 }}]</span>
> <span class="lt-authors" v-if="item.authors">{{ item.authors }}.</span>
<el-table-column <span class="lt-name" v-if="item.name">{{ item.name }}.</span>
prop="name" <span class="lt-source" v-if="item.source">{{ item.source }}.</span>
label="名称" <span class="lt-date" v-if="item.date">{{ item.date }}</span>
align="center" </div>
></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/ch/pdf-icon.png" />
</div>
</template>
</el-table-column>
</el-table>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer" <el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList"
:url-list="imgList" :initial-index="initialIndex" />
/>
<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>
</div> </div>
</template> </template>
...@@ -305,23 +211,25 @@ import AudioPlayer from "@/components/AudioPlayer"; ...@@ -305,23 +211,25 @@ 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 { debounce, 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 DetailDialog from "./detail-dialog.vue"; import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import videoPlayer from "@/components/VideoPlayer"; import videoPlayer from "@/components/VideoPlayer";
import SlideImage from "@/components/SlideImage";
import SlideImageGroup from "@/components/SlideImageGroup";
export default { export default {
components: { components: {
AudioPlayer, AudioPlayer,
ReaderOperations, ReaderOperations,
MenuList,
Video, Video,
Card, Card,
ChStyleUnit, ChStyleUnit,
DetailDialog, swiper,
swiperSlide,
videoPlayer, videoPlayer,
SlideImage,
SlideImageGroup,
"el-image-viewer": () => "el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"), import("element-ui/packages/image/src/image-viewer"),
}, },
...@@ -337,32 +245,62 @@ export default { ...@@ -337,32 +245,62 @@ export default {
}, },
data() { data() {
return { return {
slideImageWidth: 0, //单个图片的宽度
sildeGroupWidth: 0, //整个轮播的宽度
slideGroupleft: 0, //整个轮播距离父亲盒子的距离（中间view区域）
imgViewerVisible: false, imgViewerVisible: false,
relateRelics: [], relateRelics: [],
imgsDom: null,
moveLeft: true,
moveRight: true,
audioPlaying: true, audioPlaying: true,
unitVisible: false, swiperOption: {
currentVideo: null, loop: true,
slidesPerView: 3,
grabCursor: false,
// autoplay: {
// delay: 3000,
// stopOnLastSlide: false,
// disableOnInteraction: false,
// },
effect: "coverflow",
fadeEffect: {
crossFade: true,
},
// 显示分页
pagination: {
el: ".swiper-pagination",
clickable: true, //允许分页点击跳转
},
// 设置点击箭头
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
},
currentUnit: null,
currentVideo: {},
initialIndex: 0
}; };
}, },
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
},
},
async mounted() { async mounted() {
this.loadDetail(); this.loadDetail();
// let units = this.$refs.
}, },
destroyed() { updated() {
//同时在destroyed回调中移除监听： let p = document.getElementsByTagName('p')
if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) { let arr = [...p]
//firefox支持onmousewheel arr.map(item => {
removeEventListener("DOMMouseScroll", firefoxListenFun); item.style.color = "#fff"
} })
}, },
methods: { methods: {
async loadDetail() { async loadDetail() {
processUnit(this.displayDetail.exhibitionUnits); processUnit(this.displayDetail.exhibitionUnits);
this.currentUnit =
this.displayDetail.exhibitionUnits.length > 0
? this.displayDetail.exhibitionUnits[0]
: null;
this.expandUnitInfo();
function processUnit(list) { function processUnit(list) {
for (let o of list || []) { for (let o of list || []) {
if (o.children) { if (o.children) {
...@@ -381,104 +319,32 @@ export default { ...@@ -381,104 +319,32 @@ export default {
) { ) {
this.currentVideo = this.displayDetail.videosVo[0]; this.currentVideo = this.displayDetail.videosVo[0];
} }
this.$nextTick(() => { this.$nextTick(() => {
this.loadWidth(); // if (
// this.displayDetail.videosVo &&
if ( // this.displayDetail.videosVo.length > 0
this.displayDetail.audiosVo && // ) {
this.displayDetail.audiosVo.length > 0 // this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
) { // this.$refs.AudioPlayer.play();
this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭"); // }
this.$refs.AudioPlayer.play(); // this.replaceFaceImage();
}
}); });
}, },
loadWidth() { replaceFaceImage() {
if ( var img = new Image(); //新建一个图片对象
this.displayDetail.imagesVo && let url; //最终显示的大图
this.displayDetail.imagesVo.length > 0 if (this.displayDetail.faceImagePressUrl) {
) { url = this.$getFullUrl(this.displayDetail.faceImageUrl);
let slideImage = document.getElementsByClassName("slide-item")[0]; } else if (this.displayDetail.imagesVo.length > 0) {
this.slideImageWidth = slideImage.offsetWidth; url = this.$getFullUrl(this.displayDetail.imagesVo[0].url);
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;
} }
let faceImage = document.getElementById("faceImage");
img.src = url;
img.onload = function () {
faceImage.src = url;
};
}, },
//节流函数 //节流函数
throttle(fn, gapTime) { throttle(fn, gapTime) {
let _this = this; let _this = this;
...@@ -524,452 +390,609 @@ export default { ...@@ -524,452 +390,609 @@ export default {
this.$emit("reload"); this.$emit("reload");
}, },
handleMouseEnter(e) { handelPreviewImages(images, index) {
console.log(e); this.imgViewerVisible = true;
this.imgList = images.map((item) => this.$getFullUrl(item.url));
this.initialIndex = index
},
closeImgViewer() {
this.imgViewerVisible = false;
},
handleClickUnitTitle(item) {
this.currentUnit = item;
this.expandUnitInfo();
},
handleMouseEnterUnit(item) {
this.currentUnit = item;
this.expandUnitInfo();
},
handleMouseLeaveUnit() {
// this.currentUnit = {};
},
expandUnitInfo() {
// 将每个单元下的所有数据变成key-value形式，方便遍历
let newUnits = {};
traveseUnits(this.currentUnit);
this.$set(
this.currentUnit,
"expandUnitInfo",
JSON.parse(JSON.stringify(newUnits))
);
function traveseUnits(obj) {
newUnits[obj.title] = obj;
if (obj.children && obj.children.length > 0) {
obj.children.map((item) => {
traveseUnits(item);
});
}
}
}, },
handleChangeCurrentVideo(video) { handleChangeCurrentVideo(video) {
this.currentVideo = video; this.currentVideo = video;
}, },
handleToCr(item) {
const { crId } = item;
const newPage = this.$router.resolve({
path: "culturalRelic/" + crId,
});
window.open(newPage.href, "_blank");
},
}, },
}; };
</script> </script>
<style lang="scss">
.intro-content{ <style lang="scss" >
p{ .unit-content_intro {
p {
// color: red !important;
font-family: $defaultFontFamily !important; font-family: $defaultFontFamily !important;
font-size: 22px;
text-indent: 44px;
// color: #fff !important;
} }
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
$themeColor: #a30e0c;
// 中国风主题样式 // 中国风主题样式
/**公共样式开始 */ /**公共样式开始 */
$themeRed: #892325;
.wrapper {
// width: 1200px;
width: calc(100% - 26%); //左右两边各自留13%
}
.custom-title { .custom-title {
width: 50px;
background-color: $themeColor;
min-height: 300px;
color: #fff;
font-size: 28px;
writing-mode: vertical-rl;
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; justify-content: center;
box-shadow: rgb(215 47 63 / 30%) 4px 3px 8px 1px;
letter-spacing: 10px;
font-family: SourceHanSerifCN-Bold;
}
.custom-title-prefix, .units {
.custom-title-suffix { background-image: linear-gradient(to bottom, #660d04, #520002);
width: 27px; min-height: 400px;
height: 27px; }
margin: 15px;
img { .content-item {
width: 100%; width: 100%;
height: 100%; }
}
} .enlarge {
position: absolute;
bottom: 40px;
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;
.custom-title-text { img {
font-size: 40px; width: 24px;
font-family: KaiTi; height: 24px;
font-weight: 400;
color: #0f0f0f;
line-height: 114px;
} }
} }
/**公共样式结束 */ /**公共样式结束 */
/**样式开始 */ /**样式开始 */
.display-detail { .ch-style {
overflow: hidden; overflow: hidden;
padding-bottom: 60px; background-size: 100%;
background-repeat: no-repeat;
position: relative;
top: -$nav-height;
height: 100%;
.content { .content {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
background-color: #060d21;
.content-item {
width: 100%;
}
/**轮播图 */ /**轮播图 */
.sliders { .e-imgs {
height: 434px; padding: 200px 0 0;
// margin: 52px 0 84px 0;
margin-top: 52px;
display: flex; display: flex;
justify-content: center; 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);
/**保证能够最开始刚好有四格卡在中间*/ .slide-item {
// transform: translateX(-900px); display: flex;
.slide-item { justify-content: center;
width: 300px; height: 414px;
height: 100%;
position: relative;
margin-right: 1px;
img { img {
width: 300px; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: contain;
// filter: grayscale(14);
}
}
} }
} }
.modal-layer { .swiper-button-next,
position: absolute; .swiper-button-prev {
background-image: none;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex; display: flex;
width: 100%;
height: 100%;
justify-content: center; justify-content: center;
align-items: center;
color: #fff;
font-weight: 800;
transform: translateY(-72px);
font-size: 26px !important;
background-color: #1C4E52;
}
.center-img { .swiper-button-next {
width: 1200px; transform: translateX(-100px);
transform: translateY(-25px);
position: relative;
filter: drop-shadow(2px 4px 6px #f8f8f8);
img { }
transform: translateX(-10px);
width: 1230px;
}
}
.left-layer, .swiper-button-prev {
.right-layer { transform: translateX(100px);
flex: 1;
height: 100%;
background-color: rgba(#f8f8f8, 0.8);
}
} }
} }
/**展览信息 */ .bg {
.intro { background-image: url(@/assets/imgs/display/ch/pattern2.png);
margin-top: 55px; background-size: 100%;
width: 100%;
background-color: #1C4E52;
padding-bottom: 73px;
// height:4818px ;
}
.bg1 {
background-image: url(@/assets/imgs/display/ch/title-bg.png);
background-size: 100%;
background-color: #060d21;
padding-bottom: 100px;
}
.e-name {
font-size: 60px;
font-weight: bold;
color: #ffffff;
text-shadow: 0px 4px 5px #3b130b;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-top: 200px;
}
.wrapper { .e-tools {
background: url("@/assets/imgs/display/ch/intro-bg.png"); display: flex;
background-repeat: no-repeat; justify-content: center;
background-size: 100% 100%; margin-top: 45px;
padding: 50px; }
position: relative;
border: 1px solid #d3d3d37a;
.title {
font-size: 40px;
font-family: KaiTi;
font-weight: bold;
color: #0f0f0f;
margin-bottom: 60px;
display: flex;
justify-content: space-between;
align-items: center;
.view-count { .e-info {
font-size: 18px; display: flex;
margin-top: 10px; color: #fff;
color: #999; padding: 0 13%;
font-weight: normal; display: flex;
justify-content: space-between;
font-size: 18px;
margin-top: 86px;
}
.svg-icon { .e-intro {
margin-right: 10px; padding: 0 13%;
} position: relative;
} margin-top: 160px;
.intro-text {
min-height: 572px;
color: #fff;
&>.title {
font-size: 46px;
font-family: PingFang;
font-weight: 800;
color: #ffffff;
line-height: 53px;
text-shadow: 0px 4px 0px #7d1813;
margin-bottom: 40px;
display: flex;
justify-content: center;
} }
.desc-and-tools { &>.text {
display: flex; font-size: 24px;
justify-content: space-between; font-family: PingFang;
font-weight: 500;
color: #ffffff;
line-height: 48px;
text-indent: 48px;
}
}
}
.desc { .e-units {
display: flex; color: #fff;
padding: 0 10% 35px;
width: 100%;
margin-top: 120px;
.units-title {
display: flex;
justify-content: center;
font-size: 48px;
font-family: PingFang;
font-weight: 800;
color: #ffffff;
line-height: 53px;
text-shadow: 0px 4px 0px #7d1813;
margin-bottom: 185px;
}
.units-content {
display: flex;
width: 100%;
justify-content: space-between;
.left {
position: relative;
width: 35%;
.line {
background-image: url("@/assets/imgs/display/red/line.png");
width: 1px;
background-size: 100%;
}
.item { .dots {
position: absolute;
left: 0;
top: 0;
width: 100%;
.dot-item {
position: absolute;
display: flex; display: flex;
margin-right: 16px; align-items: center;
left: -17px;
cursor: pointer;
width: 100%;
.label, .circle {
.value { width: 35px;
font-size: 18px; height: 35px;
color: #0f0f0f; background-size: 100% 100%;
line-height: 36px; background-repeat: no-repeat;
margin-right: 30px;
} }
.label { .title {
margin-left: 8px; font-size: 32px;
font-family: PingFang;
font-weight: bold;
color: #ffffff;
line-height: 48px;
opacity: 0.5;
width: calc(100% - 67px);
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
} }
}
}
.tools { .active {
width: 300px; color: #e5b87d;
opacity: 1;
}
}
} }
} }
.divider { .right-content {
width: 100%; // flex: 1;
height: 2px; // width: 58vw;
border: 1px dashed #b1b0af; width: 60%;
margin: 42px 0;
}
.intro-and-video { .unit-content {
display: flex; width: 100%;
margin-bottom: 20px; position: relative;
.intro-container { top: -35px;
flex: 1; color: #fff;
.intro-title { .unit-content-container {
font-size: 32px;
font-family: KaiTi;
font-weight: 400;
color: #0f0f0f;
margin-bottom: 43px;
position: relative;
&::after { .unit-content-title {
content: ""; font-family: PingFang;
display: inline-block; line-height: 48px;
width: 60px; font-size: 24px;
height: 2px; display: flex;
background-color: #caad91; justify-content: center;
position: absolute; }
left: 0;
bottom: -12px; &:nth-child(1) {
.unit-content-title {
font-size: 32px;
font-weight: bold;
margin-bottom: 16px;
}
} }
} }
.intro-content { .unit-content_intro {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
color: #444444; line-height: 36px;
text-indent: 32px; // text-indent: 32px;
line-height: 28px; margin-bottom: 20px;
margin-left: 8px;
p {
color: #fff !important;
}
} }
}
// .videos { .unit-content_images {
// flex: 1;
// position: relative;
// height: 256px;
// margin-left: 70px;
// }
}
.videos {
display: flex;
flex-direction: column;
margin-bottom: 40px;
.video-title {
// display: flex;
// justify-content: center;
// align-items: center;
// font-size: 24px;
// color: $themeRed;
// margin: 80px 0 40px;
// font-family: SourceHanSerifCN-Bold;
// i {
// font-size: 28px;
// margin-right: 10px;
// }
font-size: 32px;
font-family: KaiTi;
font-weight: 400;
color: #0f0f0f;
margin-bottom: 43px;
position: relative; position: relative;
&::after { .unit-content_images_container {
content: ""; height: 100%;
display: inline-block; display: flex;
width: 60px; flex-direction: column;
height: 2px; background-color: #f5f5f9;
background-color: #caad91;
position: absolute; .images_img {
left: 0; flex: 1;
bottom: -12px; }
.desc {
display: flex;
justify-content: center;
height: 40px;
align-items: center;
}
} }
} }
.video-names {
display: flex; //相关文物和单元图片公共样式
justify-content: center; .imgs-title {
border-bottom: 1px solid #f2f0f0; margin: 16px 0;
margin-bottom: 30px; display: flex;
.video-item { align-items: center;
font-size: 18px; justify-content: center;
margin: 8px 30px; font-size: 20px;
.name {
color: #999; i {
position: relative; margin: 0 10px;
cursor: pointer; font-size: 18px;
&:hover { }
color: $themeRed; }
&::after {
display: inline-block; .unit-imgs {
} // height: 300px;
&::before { }
display: inline-block;
.unit-content_crs {
position: relative;
.el-row {
.el-col {
margin-bottom: 10px;
.img-container {
background-color: #f5f5f9;
height: 250px;
.images_img {
height: 100%;
width: 100%;
position: relative;
cursor: pointer;
}
} }
} }
} }
.active::after,
.name::after { .desc {
content: ""; display: flex;
width: 50%; justify-content: center;
height: 1px; padding: 10px;
background-color: $themeRed; align-items: center;
position: absolute; color: #333;
left: 0; font-size: 14px;
bottom: -9px;
left: 50%;
transform: translateX(-50%);
display: none;
}
.active::before,
.name::before {
content: "";
width: 0;
height: 0;
border: 8px solid transparent;
border-top-color: $themeRed;
position: absolute;
left: 50%;
bottom: -25px;
transform: translateX(-50%);
display: none;
} }
.active::after, }
.active::before {
display: inline-block; .buttons {
display: flex;
justify-content: flex-end;
.btn {
display: flex;
align-content: center;
padding: 8px 10px;
// border: 1px solid $themeColor;
color: #666;
cursor: pointer;
&:hover {
color: $themeColor;
}
.svg-icon {
font-size: 22px;
margin: 0 4px;
}
} }
} }
} }
.video-box { }
height: 600px; }
.video-player { }
height: 100%;
// 视频
.e-video {
margin-top: 140px;
width: 100%;
padding: 0 13%;
.video-title {
width: 100%;
display: flex;
justify-content: center;
font-size: 48px;
font-family: PingFang;
font-weight: 800;
color: #ffffff;
line-height: 53px;
text-shadow: 0px 4px 0px #7d1813;
margin-bottom: 50px;
}
.video-content {
display: flex;
.video-names {
width: 20%;
background-color: rgba(19, 57, 60, 0.8);
color: #fff;
padding: 24px 0;
.video-item {
font-size: 18px;
margin: 8px 30px;
cursor: pointer;
transition: all ease 0.5s;
&:hover {
transform: translateX(-10%);
} }
} }
}
.audio {
position: absolute;
right: -120px;
top: 34px;
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
border: 2px solid $themeRed;
padding: 10px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
transition: all 0.5s ease;
&:hover { .active {
box-shadow: 0 0 14px rgb(0 0 0 / 40%); color: $themeSecondaryColor;
} }
}
img { .video-box {
width: 60px; height: 600px;
height: 60px; flex: 1;
margin-right: 16px;
.video-player {
height: 100%;
} }
} }
} }
}
@keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
} }
@-webkit-keyframes audioRotate { .e-virtual {
0% { margin-top: 140px;
transform: rotateZ(0deg); justify-content: center;
} padding: 0 13%;
100% { .virtual-title {
transform: rotateZ(360deg); width: 100%;
display: flex;
justify-content: center;
font-size: 48px;
font-family: PingFang;
font-weight: 800;
color: #ffffff;
line-height: 53px;
text-shadow: 0px 4px 0px #7d1813;
margin-bottom: 50px;
} }
}
.animation-play-paused {
animation-play-state: paused;
-webkit-animation-play-state: paused;
/* Safari 和 Chrome */
}
.virtual {
margin-top: 40px;
display: flex;
justify-content: center;
.wrapper { .wrapper {
height: 400px; width: 100%;
display: flex; // display: flex;
.img-container { .img-container {
// width: 800px; // width: 800px;
flex: 1; // flex: 1;
height: 400px; width: 100%;
height: 600px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
&:hover { &:hover {
img { img {
transform: scale(1.1); transform: scale(1.1);
} }
} }
img { img {
width: 100%; width: 100%;
height: 400px; height: 100%;
// height: 400px;
transition: all ease 0.5s; transition: all ease 0.5s;
object-fit: cover; object-fit: cover;
} }
.modal { .modal {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 400px; height: 100%;
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
&:hover { &:hover {
.name { .name {
opacity: 1; opacity: 1;
} }
} }
.svg-icon { .svg-icon {
font-size: 110px; font-size: 110px;
color: #fff; color: #fff;
} }
.name { .name {
color: #fff; color: #fff;
font-size: 28px; font-size: 28px;
font-family: "KaiTi"; font-family: SourceHanSerifCN-Bold;
opacity: 0; opacity: 0;
transition: all ease 0.5s; transition: all ease 0.5s;
} }
...@@ -977,128 +1000,82 @@ $themeRed: #892325; ...@@ -977,128 +1000,82 @@ $themeRed: #892325;
} }
} }
} }
/**展览单元 */
.units {
margin-top: 94px;
display: flex;
flex-direction: column;
align-items: center;
.units-content {
ul {
li {
margin-bottom: 20px;
.unit-title { /**关联文献 */
font-size: 36px; .e-lts {
font-family: KaiTi; color: #333;
font-weight: 400; margin-top: 140px;
color: #4e392c; padding: 0 13%;
line-height: 83px;
display: flex;
justify-content: center;
}
.unit-intro { .lts-title {
font-size: 16px; width: 100%;
font-family: Microsoft YaHei; display: flex;
font-weight: 400; justify-content: center;
color: #444444; font-size: 48px;
text-indent: 36px; font-family: PingFang;
margin-bottom: 10px; font-weight: 800;
} color: #ffffff;
line-height: 53px;
text-shadow: 0px 4px 0px #7d1813;
margin-bottom: 50px;
}
.unit-imgs { .lts-content {
width: 100%; color: #fff;
padding: 40px 0;
}
.img-item { .lt-item {
width: 100%; border-bottom: 1px dashed #fff;
padding: 10px 0;
cursor: pointer;
img { &:hover {
width: 100%; color: #dbb645;
}
}
}
}
} }
}
}
/**关联文献 */
.lts {
// background-color: aquamarine;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 100px;
.lts-content { &>span {
display: flex; padding: 0 4px;
justify-content: center; }
width: 100%;
height: 569px;
background-image: url("@/assets/imgs/display/ch/lts-bg.png");
overflow-x: hidden;
} }
} }
} }
} }
.right {
float: right;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
a { ::v-deep .el-carousel {
font-size: 22px; height: 100%;
} }
::v-deep .el-carousel__container {
height: 100%;
}
.clearfix {
clear: both;
}
a:hover { @keyframes audioRotate {
cursor: pointer; 0% {
color: $themeColor; transform: rotateZ(0deg);
} }
}
.unit-detail-full { 100% {
position: fixed; transform: rotateZ(360deg);
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 { @-webkit-keyframes audioRotate {
height: 100%; 0% {
} transform: rotateZ(0deg);
}
::v-deep .el-carousel__container { 100% {
height: 100%; transform: rotateZ(360deg);
}
} }
::v-deep .el-carousel__item--card { .animation-play-paused {
width: 100%; animation-play-state: paused;
height: 100%; -webkit-animation-play-state: paused;
transform: translateX(0) scale(1) !important; /* Safari 和 Chrome */
} }
</style> </style>
\ No newline at end of file
src/views/display/components/NormalStyle.vue
浏览文件 @ 124db62a
...@@ -396,7 +396,7 @@ export default { ...@@ -396,7 +396,7 @@ export default {
dotImg: require("@/assets/imgs/display/normal/mz-dot.png"), dotImg: require("@/assets/imgs/display/normal/mz-dot.png"),
dotImgS: require("@/assets/imgs/display/normal/mz-dot-s.png"), dotImgS: require("@/assets/imgs/display/normal/mz-dot-s.png"),
page: null, page: null,
currentVideo: null, currentVideo: {},
videoSwiperOption: { videoSwiperOption: {
loop: false, loop: false,
loopedSlides: 8, // looped slides should be the same loopedSlides: 8, // looped slides should be the same
......
src/views/display/components/NormalStyleUnit.vue
浏览文件 @ 124db62a
...@@ -26,20 +26,20 @@ ...@@ -26,20 +26,20 @@
</div> </div>
<div class="text-indent unit-content_intro" v-if="curUnit.intro" v-html="unitValue.intro"></div> <div class="text-indent unit-content_intro" v-if="curUnit.intro" v-html="unitValue.intro"></div>
<div class="unit-content_images" v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0"> <div class="unit-content_images" v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0">
<div class="imgs-title">单元图片</div> <!-- <div class="imgs-title">单元图片</div> -->
<div class="unit-imgs"> <div class="unit-imgs">
<SlideImageGroup :imgList="unitValue.imagesVo" :needEnlarge="true" <SlideImageGroup :imgList="unitValue.imagesVo" :needEnlarge="true"
v-if="unitValue.imagesVo.length > 3"> v-if="unitValue.imagesVo.length > 3">
<template slot-scope="{ item }" slot="img"> <template slot-scope="{ item }" slot="img">
<img :src="$getFullUrl(item.pressUrl)" alt="" <img :src="$getFullUrl(item.middleUrl)" alt=""
style="width: 100%; height: 100%; object-fit: contain" /> style="width: 100%; height: 100%; object-fit: contain" />
</template> </template>
</SlideImageGroup> </SlideImageGroup>
<el-row v-if="unitValue.imagesVo.length > 0 && unitValue.imagesVo.length < 4" :gutter="10"> <el-row v-if="unitValue.imagesVo.length > 0 && unitValue.imagesVo.length < 4" :gutter="10">
<el-col v-for="(item, index) in unitValue.imagesVo" :key="index" <el-col v-for="(item, index) in unitValue.imagesVo" :key="index"
:span="24 / unitValue.imagesVo.length" style="height:300px"> :span="24 / unitValue.imagesVo.length" style="height:300px">
<img :src="$getFullUrl(item.pressUrl)" alt="" <img :src="$getFullUrl(item.middleUrl)" alt=""
style="width: 100%; height: 100%; object-fit: contain;cursor: pointer;" style="width: 100%; height: 100%; object-fit: contain;cursor: pointer;"
@click="handelPreviewImages(unitValue.imagesVo)" /> @click="handelPreviewImages(unitValue.imagesVo)" />
</el-col> </el-col>
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
<div class="imgs-title">单元文物</div> <div class="imgs-title">单元文物</div>
<SlideImageGroup :imgList="unitValue.culturalRelics"> <SlideImageGroup :imgList="unitValue.culturalRelics">
<template slot-scope="{ item }" slot="img"> <template slot-scope="{ item }" slot="img">
<img :src="$getFullUrl(item.faceImagePressUrl)" alt="" style=" <img :src="$getFullUrl(item.faceImageMiddleUrl)" alt="" style="
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: fill; object-fit: fill;
...@@ -106,6 +106,13 @@ export default { ...@@ -106,6 +106,13 @@ export default {
}, },
} }
}, },
updated() {
let p = document.getElementsByTagName('p')
let arr = [...p]
arr.map(item => {
item.style.color = "#333"
})
},
methods: { methods: {
handleClickUnit(item) { handleClickUnit(item) {
this.$emit('handleClickUnit', item) this.$emit('handleClickUnit', item)
...@@ -120,12 +127,14 @@ export default { ...@@ -120,12 +127,14 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" >
.unit-content_intro { .unit-content_intro {
p { p {
// color: red !important; // color: red !important;
font-family: $defaultFontFamily !important; font-family: $defaultFontFamily !important;
}
// color: #333 !important;
}
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -183,25 +192,37 @@ export default { ...@@ -183,25 +192,37 @@ export default {
flex: 1; flex: 1;
padding: 60px 40px 0; padding: 60px 40px 0;
.unit-content-container {} .unit-content-container {
.unit-content-title { .unit-content-title {
font-size: 24px; font-size: 20px;
line-height: 2; line-height: 2;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 48px; margin-top: 48px;
}
}
.unit-content_intro {
font-size: 16px;
font-weight: 400;
color: #444444;
line-height: 36px;
text-indent: 32px;
margin-bottom: 20px;
}
&:nth-child(1) {
.unit-content-title {
font-size: 24px;
font-weight: bold;
}
}
.unit-content_intro {
font-size: 16px;
font-weight: 400;
color: #444444;
line-height: 36px;
text-indent: 32px;
margin-bottom: 20px;
} }
.unit-content_images { .unit-content_images {
position: relative; position: relative;
......
src/views/display/components/RedStyle.vue
浏览文件 @ 124db62a
...@@ -2,28 +2,14 @@ ...@@ -2,28 +2,14 @@
<div class="red-style"> <div class="red-style">
<div class="content" id="content"> <div class="content" id="content">
<div class="e-imgs"> <div class="e-imgs">
<swiper <swiper class="swiper gallery-top" :options="swiperOption" ref="swiperTop">
class="swiper gallery-top" <swiper-slide class="slide-item" v-for="(item, index) in displayDetail.imagesVo" :key="index">
:options="swiperOption"
ref="swiperTop"
>
<swiper-slide
class="slide-item"
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
>
<img :src="$getFullUrl(item.middleUrl)" alt="" /> <img :src="$getFullUrl(item.middleUrl)" alt="" />
</swiper-slide> </swiper-slide>
<div <div class="swiper-button-next swiper-button-white" slot="button-next">
class="swiper-button-next swiper-button-white"
slot="button-next"
>
<i class="el-icon-arrow-right"></i> <i class="el-icon-arrow-right"></i>
</div> </div>
<div <div class="swiper-button-prev swiper-button-white" slot="button-prev">
class="swiper-button-prev swiper-button-white"
slot="button-prev"
>
<i class="el-icon-arrow-left"></i> <i class="el-icon-arrow-left"></i>
</div> </div>
</swiper> </swiper>
...@@ -32,11 +18,7 @@ ...@@ -32,11 +18,7 @@
{{ displayDetail.title }} {{ displayDetail.title }}
</div> </div>
<div class="e-tools"> <div class="e-tools">
<ReaderOperations <ReaderOperations :info="displayDetail" :sourceType="'biz_exhibition'" @reload="reload" />
:info="displayDetail"
:sourceType="'biz_exhibition'"
@reload="reload"
/>
</div> </div>
<div class="e-info"> <div class="e-info">
<div class="info-item"> <div class="info-item">
...@@ -46,13 +28,13 @@ ...@@ -46,13 +28,13 @@
<div class="info-item"> <div class="info-item">
<span class="label"> 展览类型： </span> <span class="label"> 展览类型： </span>
<span class="value">{{ <span class="value">{{
dicts.displayType[displayDetail.type] || "暂无" dicts.displayType[displayDetail.type] || "暂无"
}}</span> }}</span>
</div> </div>
<div class="info-item"> <div class="info-item">
<span class="label"> 展览性质： </span> <span class="label"> 展览性质： </span>
<span class="value">{{ <span class="value">{{
dicts.displayCharacter[displayDetail.displayCharacter] || "暂无" dicts.displayCharacter[displayDetail.displayCharacter] || "暂无"
}}</span> }}</span>
</div> </div>
<div class="info-item"> <div class="info-item">
...@@ -74,152 +56,79 @@ ...@@ -74,152 +56,79 @@
<div class="text" v-html="displayDetail.intro"></div> <div class="text" v-html="displayDetail.intro"></div>
</div> </div>
</div> </div>
<div <div class="e-units wow animate__animated animate__fadeInUp" ref="units"
class="e-units wow animate__animated animate__fadeInUp" v-if="displayDetail.exhibitionUnits.length > 0">
ref="units"
v-if="displayDetail.exhibitionUnits.length > 0"
>
<div class="units-title">展览单元</div> <div class="units-title">展览单元</div>
<div class="units-content" v-if="currentUnit"> <div class="units-content" v-if="currentUnit">
<div class="left"> <div class="left">
<div <div class="line" :style="{
class="line" height: (displayDetail.exhibitionUnits.length - 1) * 130 + 'px',
:style="{ }"></div>
height: (displayDetail.exhibitionUnits.length - 1) * 130 + 'px',
}"
></div>
<div class="dots"> <div class="dots">
<div <div class="dot-item" v-for="(item, index) in displayDetail.exhibitionUnits" :key="index"
class="dot-item" :style="{ top: index * 130 - 17 + 'px' }" @click="handleClickUnitTitle(item)"
v-for="(item, index) in displayDetail.exhibitionUnits" @mouseenter="handleMouseEnterUnit(item)" @mouseleave="handleMouseLeaveUnit">
:key="index" <div class="circle" :style="{
:style="{ top: index * 130 - 17 + 'px' }" 'background-image': `url(${require(`@/assets/imgs/display/red/${currentUnit.title == item.title ? 'circle-s' : 'circle'
@click="handleClickUnitTitle(item)"
@mouseenter="handleMouseEnterUnit(item)"
@mouseleave="handleMouseLeaveUnit"
>
<div
class="circle"
:style="{
'background-image': `url(${require(`@/assets/imgs/display/red/${
currentUnit.title == item.title ? 'circle-s' : 'circle'
}.png`)})`, }.png`)})`,
}" }"></div>
></div> <div :class="{
<div title: true,
:class="{ active: currentUnit.title == item.title,
title: true, }">
active: currentUnit.title == item.title,
}"
>
{{ item.title }} {{ item.title }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="left-menu">
<div
class="left-menu-item"
v-for="(item, index) in displayDetail.exhibitionUnits"
:key="index"
@click="handleClickUnitTitle(item)"
>
<div
:class="{ 'base-img': true, active: currentUnit == item }"
:id="item.euId"
v-if="item.imagesVo && item.imagesVo.length > 0"
>
<img :src="$getFullUrl(item.imagesVo[0].pressUrl)" alt="" />
</div>
<div class="text">
<svg-icon icon-class="collect-s"></svg-icon>{{ item.title }}
</div>
</div>
</div> -->
<div class="right-content"> <div class="right-content">
<div class="unit-content"> <div class="unit-content">
<div <div class="unit-content-container" v-for="(unitValue, unitTitle) in currentUnit.expandUnitInfo"
class="unit-content-container" :key="unitTitle">
v-for="(unitValue, unitTitle) in currentUnit.expandUnitInfo"
:key="unitTitle"
>
<div class="unit-content-title"> <div class="unit-content-title">
{{ unitTitle }} {{ unitTitle }}
</div> </div>
<div <div class="text-indent unit-content_intro" v-if="currentUnit.intro" v-html="unitValue.intro"></div>
class="text-indent unit-content_intro" <div class="unit-content_images" v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0">
v-if="currentUnit.intro" <!-- <div class="imgs-title">单元图片</div> -->
v-html="unitValue.intro"
></div>
<div
class="unit-content_images"
v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0"
>
<div class="imgs-title">单元图片</div>
<div class="unit-imgs"> <div class="unit-imgs">
<SlideImageGroup <SlideImageGroup :imgList="unitValue.imagesVo" :needEnlarge="true"
:imgList="unitValue.imagesVo" v-if="unitValue.imagesVo.length > 3">
:needEnlarge="true"
v-if="unitValue.imagesVo.length > 3"
>
<template slot-scope="{ item }" slot="img"> <template slot-scope="{ item }" slot="img">
<img <img :src="$getFullUrl(item.middleUrl)" alt=""
:src="$getFullUrl(item.pressUrl)" style="width: 100%; height: 100%; object-fit: contain" />
alt=""
style="width: 100%; height: 100%; object-fit: contain"
/>
</template> </template>
</SlideImageGroup> </SlideImageGroup>
<el-row <el-row v-if="
v-if=" unitValue.imagesVo.length > 0 &&
unitValue.imagesVo.length > 0 && unitValue.imagesVo.length < 4
unitValue.imagesVo.length < 4 " :gutter="10">
" <el-col v-for="(item, index) in unitValue.imagesVo" :key="index"
:gutter="10" :span="24 / unitValue.imagesVo.length" style="height: 300px">
> <img :src="$getFullUrl(item.middleUrl)" alt="" style="
<el-col
v-for="(item, index) in unitValue.imagesVo"
:key="index"
:span="24 / unitValue.imagesVo.length"
style="height: 300px"
>
<img
:src="$getFullUrl(item.pressUrl)"
alt=""
style="
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
cursor: pointer; cursor: pointer;
" " @click="handelPreviewImages(unitValue.imagesVo)" />
@click="handelPreviewImages(unitValue.imagesVo)"
/>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</div> </div>
<div <div class="unit-content_crs" v-if="
class="unit-content_crs" unitValue.culturalRelics &&
v-if=" unitValue.culturalRelics.length > 0
unitValue.culturalRelics && ">
unitValue.culturalRelics.length > 0
"
>
<div class="imgs-title">单元文物</div> <div class="imgs-title">单元文物</div>
<SlideImageGroup :imgList="unitValue.culturalRelics"> <SlideImageGroup :imgList="unitValue.culturalRelics">
<template slot-scope="{ item }" slot="img"> <template slot-scope="{ item }" slot="img">
<img <img :src="$getFullUrl(item.faceImageMiddleUrl)" alt="" style="
:src="$getFullUrl(item.faceImagePressUrl)"
alt=""
style="
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: fill; object-fit: fill;
cursor: pointer; cursor: pointer;
" " @click="handleToCr(item)" />
@click="handleToCr(item)"
/>
</template> </template>
<template slot-scope="{ item }" slot="info"> <template slot-scope="{ item }" slot="info">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
...@@ -231,223 +140,34 @@ ...@@ -231,223 +140,34 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 展览图片 --> <div class="
<!-- <div e-video
class="
content-item
display-detail_imgs
wow
animate__animated animate__fadeInDownBig
"
ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
>
<img
id="faceImage"
v-if="displayDetail.faceImageMiddleUrl"
class="animate__animated animate__fadeInDownBig"
:src="$getFullUrl(displayDetail.faceImageMiddleUrl)"
/>
<img
class="animate__animated animate__fadeInDownBig"
v-else-if="
displayDetail.imagesVo && displayDetail.imagesVo.length > 0
"
id="faceImage"
:src="$getFullUrl(displayDetail.imagesVo[0].middleUrl)"
/>
</div> -->
<!-- 展览基本信息 -->
<!-- <div
class="
content-item
display-detail_basic_info
wow
animate__animated animate__fadeInUp
"
>
<div class="wrapper">
<div class="top">
<div class="top-wrapper">
<div class="film-img-container">
<img src="@/assets/imgs/display/red/jiaopian.png" alt="" />
</div>
<div class="film-img-container">
<img src="@/assets/imgs/display/red/jiaopian.png" alt="" />
</div>
</div>
</div>
<div class="bottom">
<div class="bottom-wrapper">
<div class="film-img-container">
<img src="@/assets/imgs/display/red/jiaopian.png" alt="" />
</div>
<div class="film-img-container">
<img src="@/assets/imgs/display/red/jiaopian.png" alt="" />
</div>
</div>
</div>
<div class="info-container">
<div class="info-container-left">
<SlideImage
:imgList="displayDetail.imagesVo"
v-if="
displayDetail.imagesVo && displayDetail.imagesVo.length > 0
"
/>
<SlideImage
:imgList="[{ pressUrl: displayDetail.faceImagePressUrl }]"
v-else-if="displayDetail.faceImagePressUrl"
/>
</div>
<div class="info-container-right">
<div class="info-title">
<div class="title">{{ displayDetail.title }}</div>
<div class="view-count">
<svg-icon icon-class="view"></svg-icon>
<span>{{ displayDetail.browseCount }}</span>
</div>
</div>
<el-row>
<el-col :span="24">
<div class="basic-info">
<div class="body-item">
<span class="label">
<svg-icon icon-class="keyword"></svg-icon>
关键词：
</span>
<span class="value">{{
displayDetail.keyword || "暂无"
}}</span>
</div>
<div class="body-item">
<span class="label">
<svg-icon icon-class="zllx"></svg-icon>展览类型：
</span>
<span class="value">{{
dicts.displayType[displayDetail.type] || "暂无"
}}</span>
</div>
<div class="body-item">
<span class="label">
<svg-icon icon-class="zlxz"></svg-icon>展览性质：
</span>
<span class="value">{{
dicts.displayCharacter[
displayDetail.displayCharacter
] || "暂无"
}}</span>
</div>
<div class="body-item">
<span class="label">
<svg-icon icon-class="zldw"></svg-icon>展览单位：
</span>
<span class="value">{{
displayDetail.deptName || "暂无"
}}</span>
</div>
<div class="body-item">
<span class="label">
<svg-icon icon-class="zldq"></svg-icon>展览地区：
</span>
<span class="value">{{
displayDetail.regionName || "暂无"
}}</span>
</div>
</div>
</el-col>
<el-col :span="11" class="reader-operations">
<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="reload"
:selectColor="'#a30e0c'"
/>
</el-col>
</el-row>
</div>
</div>
</div>
</div> -->
<!-- 展览简介 -->
<!-- <div
class="
content-item
display-detail_intro
wow
animate__animated animate__fadeInUp
"
>
<div class="wrapper">
<div class="custom-title">展览简介</div>
<div class="intro-content">
<div
class="intro-content-container"
v-html="displayDetail.intro"
></div>
</div>
</div>
</div> -->
<!-- 视频 -->
<!-- <div
class="
content-item
display-detail_videos
wow wow
animate__animated animate__fadeInRight animate__animated animate__fadeInRight
" " v-if="currentVideo.url">
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0" <div class="video-title">
> 展览视频
<div class="wrapper"> </div>
<div class="video-title"> <div class="video-content">
<i class="el-icon-video-camera"></i>
展览视频 <video-player v-if="currentVideo" :src="$getFullUrl(currentVideo.url)" class="video-box"></video-player>
</div>
<div class="video-names"> <div class="video-names">
<div <div :class="{
class="video-item" 'video-item': true, active: currentVideo && item.fileId == currentVideo.fileId
v-for="(item, index) in displayDetail.videosVo" }" v-for="(item, index) in displayDetail.videosVo" :key="index" @click="handleChangeCurrentVideo(item)"> {{
:key="index" item.name.split(".")[0]
@click="handleChangeCurrentVideo(item)" }}
>
<div
:class="[
'name',
currentVideo && item.fileId == currentVideo.fileId
? 'active'
: '',
]"
>
{{ item.name.split(".")[0] }}
</div>
</div> </div>
</div> </div>
<video-player
v-if="currentVideo"
:src="$getFullUrl(currentVideo.url)"
class="video-box"
></video-player>
</div> </div>
</div> -->
<!-- 虚拟展厅 --> </div>
<!-- <div <div class="e-virtual" v-if="displayDetail.virtualVo.length > 0">
class="display-detail_virtual content-item" <div class="virtual-title">虚拟展厅</div>
v-if="displayDetail.virtualVo.length > 0"
>
<div class="wrapper"> <div class="wrapper">
<div <div class="img-container" @click="handleToVR(item)" v-for="(item, index) in displayDetail.virtualVo"
class="img-container" :key="index">
@click="handleToVR(item)"
v-for="(item, index) in displayDetail.virtualVo"
:key="index"
>
<img :src="item.faceImagePressUrl" alt="" /> <img :src="item.faceImagePressUrl" alt="" />
<div class="modal"> <div class="modal">
<svg-icon icon-class="360"></svg-icon> <svg-icon icon-class="360"></svg-icon>
...@@ -455,200 +175,27 @@ ...@@ -455,200 +175,27 @@
</div> </div>
</div> </div>
</div> </div>
</div> --> </div>
<!--展览单元 -->
<!-- <div
class="
content-item
display-detail_units
wow
animate__animated animate__fadeInUp
"
ref="units"
v-if="displayDetail.exhibitionUnits.length > 0"
>
<div class="wrapper unit-wraraper">
<div class="custom-title units">展览单元</div>
<div class="units-content">
<div class="left-menu">
<div
class="left-menu-item"
v-for="(item, index) in displayDetail.exhibitionUnits"
:key="index"
@click="handleClickUnitTitle(item)"
>
<div
:class="{ 'base-img': true, active: currentUnit == item }"
:id="item.euId"
v-if="item.imagesVo && item.imagesVo.length > 0"
>
<img :src="$getFullUrl(item.imagesVo[0].pressUrl)" alt="" />
</div>
<div class="text">
<svg-icon icon-class="collect-s"></svg-icon>{{ item.title }}
</div>
</div>
</div>
<div class="right-content">
<div class="unit-content">
<div
class="unit-content-container"
v-for="(unitValue, unitTitle) in currentUnit.expandUnitInfo"
:key="unitTitle"
>
<div class="unit-content-title">
{{ unitTitle }}
</div>
<div
class="text-indent unit-content_intro"
v-if="currentUnit.intro"
v-html="unitValue.intro"
></div>
<div
class="unit-content_images"
v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0"
>
<div class="imgs-title">单元图片</div>
<div class="unit-imgs">
<SlideImageGroup
:imgList="unitValue.imagesVo"
:needEnlarge="true"
v-if="unitValue.imagesVo.length > 3"
>
<template slot-scope="{ item }" slot="img">
<img
:src="$getFullUrl(item.pressUrl)"
alt=""
style="
width: 100%;
height: 100%;
object-fit: contain;
"
/>
</template>
</SlideImageGroup>
<el-row
v-if="
unitValue.imagesVo.length > 0 &&
unitValue.imagesVo.length < 4
"
:gutter="10"
>
<el-col
v-for="(item, index) in unitValue.imagesVo"
:key="index"
:span="24 / unitValue.imagesVo.length"
style="height: 300px"
>
<img
:src="$getFullUrl(item.pressUrl)"
alt=""
style="
width: 100%;
height: 100%;
object-fit: contain;
cursor: pointer;
"
@click="handelPreviewImages(unitValue.imagesVo)"
/>
</el-col>
</el-row>
</div>
</div>
<div <div class="e-lts" v-if="
class="unit-content_crs" displayDetail.literatureVo &&
v-if=" displayDetail.literatureVo.length > 0
unitValue.culturalRelics && ">
unitValue.culturalRelics.length > 0 <div class="lts-title">相关文献</div>
" <div class="lts-content">
> <div class="lt-item" v-for="(item, index) in displayDetail.literatureVo" :key="index"
<div class="imgs-title">单元文物</div> @click="handleViewLt(item)">
<SlideImageGroup :imgList="unitValue.culturalRelics"> <span class="lt-order">[{{ index + 1 }}]</span>
<template slot-scope="{ item }" slot="img"> <span class="lt-authors" v-if="item.authors">{{ item.authors }}.</span>
<img <span class="lt-name" v-if="item.name">{{ item.name }}.</span>
:src="$getFullUrl(item.faceImagePressUrl)" <span class="lt-source" v-if="item.source">{{ item.source }}.</span>
alt="" <span class="lt-date" v-if="item.date">{{ item.date }}</span>
style="
width: 100%;
height: 100%;
object-fit: fill;
cursor: pointer;
"
@click="handleToCr(item)"
/>
</template>
<template slot-scope="{ item }" slot="info">
<div class="name">{{ item.name }}</div>
</template>
</SlideImageGroup>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> --> </div>
<!-- 相关文献 -->
<!-- <div
class="
content-item
display-detail_lts
wow
animate__animated animate__fadeInUp
"
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/ch/pdf-icon.png" />
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div> -->
</div> </div>
<el-image-viewer
v-if="imgViewerVisible" <el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" />
:on-close="closeImgViewer"
:url-list="imgList"
/>
</div> </div>
</template> </template>
...@@ -718,7 +265,7 @@ export default { ...@@ -718,7 +265,7 @@ export default {
}, },
}, },
currentUnit: null, currentUnit: null,
currentVideo: null, currentVideo: {},
}; };
}, },
computed: { computed: {
...@@ -730,6 +277,13 @@ export default { ...@@ -730,6 +277,13 @@ export default {
this.loadDetail(); this.loadDetail();
// let units = this.$refs. // let units = this.$refs.
}, },
updated() {
let p = document.getElementsByTagName('p')
let arr = [...p]
arr.map(item => {
item.style.color = "#fff"
})
},
methods: { methods: {
async loadDetail() { async loadDetail() {
processUnit(this.displayDetail.exhibitionUnits); processUnit(this.displayDetail.exhibitionUnits);
...@@ -883,12 +437,14 @@ export default { ...@@ -883,12 +437,14 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss" >
.unit-content_intro { .unit-content_intro {
p { p {
// color: red !important; // color: red !important;
font-family: $defaultFontFamily !important; font-family: $defaultFontFamily !important;
color: #fff; font-size: 22px;
text-indent: 44px;
// color: #fff !important;
} }
} }
</style> </style>
...@@ -949,32 +505,39 @@ $themeColor: #a30e0c; ...@@ -949,32 +505,39 @@ $themeColor: #a30e0c;
/**样式开始 */ /**样式开始 */
.red-style { .red-style {
overflow: hidden; overflow: hidden;
background-image: url("@/assets/imgs/display/red/bg.png"); background-image: url("@/assets/imgs/display/red/bg2.png");
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-color: #651c14;
position: relative; position: relative;
top: -$nav-height; top: -$nav-height;
height: 100%; // height: 100%;
padding-bottom: 73px; padding-bottom: 73px;
.content { .content {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
background-image: url("@/assets/imgs/display/red/bg.png");
background-repeat: no-repeat;
background-size: 100%;
/**轮播图 */ /**轮播图 */
.e-imgs { .e-imgs {
padding: 200px 0 0; padding: 200px 0 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
.slide-item { .slide-item {
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 414px; height: 414px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
} }
} }
.swiper-button-next, .swiper-button-next,
.swiper-button-prev { .swiper-button-prev {
background-image: none; background-image: none;
...@@ -1007,6 +570,7 @@ $themeColor: #a30e0c; ...@@ -1007,6 +570,7 @@ $themeColor: #a30e0c;
justify-content: center; justify-content: center;
margin-top: 45px; margin-top: 45px;
} }
.e-info { .e-info {
display: flex; display: flex;
color: #fff; color: #fff;
...@@ -1022,6 +586,7 @@ $themeColor: #a30e0c; ...@@ -1022,6 +586,7 @@ $themeColor: #a30e0c;
position: relative; position: relative;
height: 524px; height: 524px;
margin-top: 160px; margin-top: 160px;
.face-image { .face-image {
height: 414px; height: 414px;
width: 648px; width: 648px;
...@@ -1030,12 +595,14 @@ $themeColor: #a30e0c; ...@@ -1030,12 +595,14 @@ $themeColor: #a30e0c;
z-index: 2; z-index: 2;
top: 50px; top: 50px;
border: 4px solid #f3cf40; border: 4px solid #f3cf40;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
} }
} }
.intro-text { .intro-text {
position: absolute; position: absolute;
left: 648px; left: 648px;
...@@ -1044,7 +611,8 @@ $themeColor: #a30e0c; ...@@ -1044,7 +611,8 @@ $themeColor: #a30e0c;
min-height: 572px; min-height: 572px;
color: #fff; color: #fff;
background-color: rgba(#591d11, 0.8); background-color: rgba(#591d11, 0.8);
& > .title {
&>.title {
font-size: 46px; font-size: 46px;
font-family: PingFang; font-family: PingFang;
font-weight: 800; font-weight: 800;
...@@ -1053,7 +621,8 @@ $themeColor: #a30e0c; ...@@ -1053,7 +621,8 @@ $themeColor: #a30e0c;
text-shadow: 0px 4px 0px #7d1813; text-shadow: 0px 4px 0px #7d1813;
margin-bottom: 40px; margin-bottom: 40px;
} }
& > .text {
&>.text {
font-size: 24px; font-size: 24px;
font-family: PingFang; font-family: PingFang;
font-weight: 500; font-weight: 500;
...@@ -1069,6 +638,7 @@ $themeColor: #a30e0c; ...@@ -1069,6 +638,7 @@ $themeColor: #a30e0c;
padding: 0 10% 35px; padding: 0 10% 35px;
width: 100%; width: 100%;
margin-top: 204px; margin-top: 204px;
.units-title { .units-title {
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -1080,23 +650,28 @@ $themeColor: #a30e0c; ...@@ -1080,23 +650,28 @@ $themeColor: #a30e0c;
text-shadow: 0px 4px 0px #7d1813; text-shadow: 0px 4px 0px #7d1813;
margin-bottom: 185px; margin-bottom: 185px;
} }
.units-content { .units-content {
display: flex; display: flex;
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
.left { .left {
position: relative; position: relative;
width: 35%; width: 35%;
.line { .line {
background-image: url("@/assets/imgs/display/red/line.png"); background-image: url("@/assets/imgs/display/red/line.png");
width: 1px; width: 1px;
background-size: 100%; background-size: 100%;
} }
.dots { .dots {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
.dot-item { .dot-item {
position: absolute; position: absolute;
display: flex; display: flex;
...@@ -1104,6 +679,7 @@ $themeColor: #a30e0c; ...@@ -1104,6 +679,7 @@ $themeColor: #a30e0c;
left: -17px; left: -17px;
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
.circle { .circle {
width: 35px; width: 35px;
height: 35px; height: 35px;
...@@ -1111,6 +687,7 @@ $themeColor: #a30e0c; ...@@ -1111,6 +687,7 @@ $themeColor: #a30e0c;
background-repeat: no-repeat; background-repeat: no-repeat;
margin-right: 30px; margin-right: 30px;
} }
.title { .title {
font-size: 32px; font-size: 32px;
font-family: PingFang; font-family: PingFang;
...@@ -1119,10 +696,11 @@ $themeColor: #a30e0c; ...@@ -1119,10 +696,11 @@ $themeColor: #a30e0c;
line-height: 48px; line-height: 48px;
opacity: 0.5; opacity: 0.5;
width: calc(100% - 67px); width: calc(100% - 67px);
overflow: hidden; // overflow: hidden;
text-overflow: ellipsis; // text-overflow: ellipsis;
white-space: nowrap; // white-space: nowrap;
} }
.active { .active {
color: #e5b87d; color: #e5b87d;
opacity: 1; opacity: 1;
...@@ -1130,20 +708,35 @@ $themeColor: #a30e0c; ...@@ -1130,20 +708,35 @@ $themeColor: #a30e0c;
} }
} }
} }
.right-content { .right-content {
// flex: 1; // flex: 1;
// width: 58vw; // width: 58vw;
width: 50%; width: 50%;
.unit-content { .unit-content {
width: 100%; width: 100%;
position: relative; position: relative;
top: -35px; top: -35px;
color: #fff; color: #fff;
.unit-content-title {
font-size: 28px; .unit-content-container {
font-family: PingFang;
font-weight: bold; .unit-content-title {
line-height: 48px; font-family: PingFang;
line-height: 48px;
font-size: 24px;
display: flex;
justify-content: center;
}
&:nth-child(1) {
.unit-content-title {
font-size: 32px;
font-weight: bold;
margin-bottom: 16px;
}
}
} }
.unit-content_intro { .unit-content_intro {
...@@ -1257,114 +850,91 @@ $themeColor: #a30e0c; ...@@ -1257,114 +850,91 @@ $themeColor: #a30e0c;
} }
} }
// 视频 .e-video {
.display-detail_videos { margin-top: 140px;
display: flex; width: 100%;
// flex-direction: column; padding: 0 13%;
margin-bottom: 40px;
display: flex;
justify-content: center;
.video-title { .video-title {
width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; font-size: 48px;
font-size: 24px; font-family: PingFang;
color: $themeColor; font-weight: 800;
margin: 80px 0 40px; color: #ffffff;
font-family: SourceHanSerifCN-Bold; line-height: 53px;
text-shadow: 0px 4px 0px #7d1813;
i { margin-bottom: 50px;
font-size: 28px;
margin-right: 10px;
}
} }
.video-names { .video-content {
display: flex; display: flex;
justify-content: center;
border-bottom: 1px solid #f2f0f0;
margin-bottom: 30px;
.video-item { .video-names {
font-size: 18px; width: 20%;
margin: 8px 30px; background-color: rgba(89, 29, 17, 0.8);
color: #fff;
padding: 24px 0;
.name { .video-item {
color: #999; font-size: 18px;
position: relative; margin: 8px 30px;
cursor: pointer; cursor: pointer;
transition: all ease 0.5s;
&:hover { &:hover {
color: $themeColor; transform: translateX(-10%);
&::after {
display: inline-block;
}
&::before {
display: inline-block;
}
} }
} }
.active::after, .active {
.name::after { color: $themeSecondaryColor;
content: "";
width: 50%;
height: 1px;
background-color: $themeColor;
position: absolute;
left: 0;
bottom: -9px;
left: 50%;
transform: translateX(-50%);
display: none;
} }
}
.active::before, .video-box {
.name::before { height: 600px;
content: ""; flex: 1;
width: 0; margin-right: 16px;
height: 0;
border: 8px solid transparent;
border-top-color: $themeColor;
position: absolute;
left: 50%;
bottom: -25px;
transform: translateX(-50%);
display: none;
}
.active::after, .video-player {
.active::before { height: 100%;
display: inline-block;
} }
} }
} }
.video-box {
height: 600px;
.video-player {
height: 100%;
}
}
} }
.display-detail_virtual { .e-virtual {
margin-top: 60px; margin-top: 140px;
display: flex;
justify-content: center; justify-content: center;
padding: 0 13%;
.wrapper { .virtual-title {
height: 400px; width: 100%;
display: flex; display: flex;
justify-content: center;
font-size: 48px;
font-family: PingFang;
font-weight: 800;
color: #ffffff;
line-height: 53px;
text-shadow: 0px 4px 0px #7d1813;
margin-bottom: 50px;
}
.wrapper {
width: 100%;
// display: flex;
.img-container { .img-container {
// width: 800px; // width: 800px;
flex: 1; // flex: 1;
height: 400px; width: 100%;
height: 600px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
...@@ -1377,7 +947,8 @@ $themeColor: #a30e0c; ...@@ -1377,7 +947,8 @@ $themeColor: #a30e0c;
img { img {
width: 100%; width: 100%;
height: 400px; height: 100%;
// height: 400px;
transition: all ease 0.5s; transition: all ease 0.5s;
object-fit: cover; object-fit: cover;
} }
...@@ -1387,7 +958,7 @@ $themeColor: #a30e0c; ...@@ -1387,7 +958,7 @@ $themeColor: #a30e0c;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 400px; height: 100%;
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -1417,129 +988,42 @@ $themeColor: #a30e0c; ...@@ -1417,129 +988,42 @@ $themeColor: #a30e0c;
} }
} }
/**展览单元 */
.display-detail_units {
display: flex;
justify-content: center;
margin-top: 100px;
background-image: url("@/assets/imgs/display/red/unit-bg.jpg");
background-size: 100% 100%;
padding-bottom: 32px;
.wrapper {
display: flex;
// border: 2px solid #cccccc;
border-left: none;
transition: width 0.5s ease-in-out;
.units-content {
flex: 1;
display: flex;
.left-menu {
width: 300px;
display: flex;
align-items: center;
flex-direction: column;
background: #520002;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.left-menu-item { /**关联文献 */
height: 54px; .e-lts {
width: 100%; color: #333;
position: relative; margin-top: 140px;
padding: 0 22px; padding: 0 13%;
display: flex;
align-items: center;
background: #520002;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
// overflow: hidden;
// text-overflow: ellipsis;
// display: -webkit-box;
// -webkit-line-clamp: 1;
// -webkit-box-orient: vertical;
cursor: pointer;
&:hover {
.text {
color: #fff;
}
}
.base-img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
// background-position: center;
// background-size: cover;
transition: all 0.3s ease;
img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.4);
transition: all 0.3s ease;
}
&:hover {
background: #520002;
img {
display: none;
}
}
}
.active {
background: #520002;
img {
display: none;
}
}
.text { .lts-title {
width: 90%; width: 100%;
font-size: 18px; display: flex;
font-weight: 400; justify-content: center;
color: #ccc; font-size: 48px;
position: relative; font-family: PingFang;
z-index: 1; font-weight: 800;
overflow: hidden; color: #ffffff;
white-space: nowrap; line-height: 53px;
text-overflow: ellipsis; text-shadow: 0px 4px 0px #7d1813;
margin-bottom: 50px;
}
.svg-icon { .lts-content {
margin-right: 8px; color: #fff;
} padding: 40px 0;
}
}
}
}
} }
}
/**关联文献 */ .lt-item {
.display-detail_lts { border-bottom: 1px dashed #fff;
display: flex; padding: 10px 0;
justify-content: center; cursor: pointer;
margin: 100px 0;
.wrapper { &:hover {
display: flex; color: #dbb645;
background-color: #fafafa; }
border-left: none;
.lts-content { &>span {
width: 100%; padding: 0 4px;
flex: 1;
padding: 10px;
} }
} }
} }
......
src/views/display/index.vue
浏览文件 @ 124db62a
...@@ -228,6 +228,7 @@ export default { ...@@ -228,6 +228,7 @@ export default {
}, },
handleClick(item) { handleClick(item) {
// debugger
let index = this.boutiqueTitles.indexOf(item.title); let index = this.boutiqueTitles.indexOf(item.title);
let newPage; let newPage;
if (index == -1) { if (index == -1) {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论