Skip to content

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

解决冲突，提交六枝梭戛

上级 6328d94a d6a377ba
显示空白字符变更
内嵌 并排
正在显示 包含 1193 行增加 和 353 行删除
src/components/SlideImage/index.vue
浏览文件 @ f45b5783
......@@ -13,7 +13,7 @@
v-for="(item, index) in imgList"
:key="index"
>
<img :src="$getFullUrl(item.pressUrl)" alt="" />
<img :src="$getFullUrl(item[imgKey])" alt="" />
<div class="enlarge" @click="handelPreviewImages(imgList,index)">
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
......
src/router/index.js
浏览文件 @ f45b5783
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home'
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/home";
Vue.use(VueRouter)
Vue.use(VueRouter);
// keepAlive先全部为true 后期根据每个页面需求调整
const routes = [
{
path: '/loopswiper',
name: 'loop',
component: () => import('@/views/home/components/swiper.vue'),
path: "/loopswiper",
name: "loop",
component: () => import("@/views/home/components/swiper.vue"),
meta: {
keepAlive: true
}
keepAlive: true,
},
},
{
path: '/404',
component: () => import('@/views/404.vue'),
hidden: true
path: "/404",
component: () => import("@/views/404.vue"),
hidden: true,
},
// 首页
{
path: '/',
name: 'home',
path: "/",
name: "home",
component: Home,
meta: {
keepAlive: false
}
keepAlive: false,
},
},
// 精品展
{
path: '/boutique/:title',
name: 'boutique',
component: () => import('@/views/boutique'),
path: "/boutique/:title",
name: "boutique",
component: () => import("@/views/boutique"),
meta: {
keepAlive: true
}
keepAlive: true,
},
},
// 虚拟展厅
{
path: '/virtual',
name: 'virtual',
component: () => import('@/views/virtual'),
path: "/virtual",
name: "virtual",
component: () => import("@/views/virtual"),
meta: {
keepAlive: true
}
keepAlive: true,
},
},
// 布展
{
path: '/display',
name: 'display',
component: () => import('@/views/display'),
path: "/display",
name: "display",
component: () => import("@/views/display"),
meta: {
keepAlive: true
}
keepAlive: true,
},
},
// 布展详情页
{
path: '/display/:themeType/:exhibitionId',
name: 'displayDetail',
component: () => import('@/views/display/Detail.vue'),
path: "/display/:themeType/:exhibitionId",
name: "displayDetail",
component: () => import("@/views/display/Detail.vue"),
meta: {
keepAlive: false
}
keepAlive: false,
},
},
// 文物展
{
path: '/culturalRelic',
name: 'culturalRelic',
component: () => import('@/views/culturalRelic'),
path: "/culturalRelic",
name: "culturalRelic",
component: () => import("@/views/culturalRelic"),
meta: {
keepAlive: true
}
keepAlive: true,
},
},
// 文物详情页
{
path: '/culturalRelic/:crId',
name: 'culturalRelicDetail',
component: () => import('@/views/culturalRelic/Detail.vue'),
path: "/culturalRelic/:crId",
name: "culturalRelicDetail",
component: () => import("@/views/culturalRelic/Detail.vue"),
meta: {
keepAlive: false
}
keepAlive: false,
},
},
// 个人中心
{
path: '/personal',
name: 'personal',
component: () => import('@/views/personal'),
path: "/personal",
name: "personal",
component: () => import("@/views/personal"),
meta: {
keepAlive: true
}
keepAlive: true,
},
},
// // 登录
// {
......@@ -102,95 +102,100 @@ const routes = [
// 注册页
{
path: '/register',
name: 'register',
component: () => import('@/views/register'),
path: "/register",
name: "register",
component: () => import("@/views/register"),
meta: {
keepAlive: true
}
keepAlive: true,
},
},
// 博物馆
{
path: '/museum',
name: 'museum',
component: () => import('@/views/museum'),
path: "/museum",
name: "museum",
component: () => import("@/views/museum"),
meta: {
keepAlive: true
}
keepAlive: true,
},
},
// 博物馆详情
{
path: '/museum/:id',
name: 'museumDetail',
component: () => import('@/views/museum/Detail.vue'),
path: "/museum/:id",
name: "museumDetail",
component: () => import("@/views/museum/Detail.vue"),
meta: {
keepAlive: false
}
keepAlive: false,
},
},
// 文创
{
path: '/ccProduct',
name: 'ccProduct',
component: () => import('@/views/ccProduct'),
path: "/ccProduct",
name: "ccProduct",
component: () => import("@/views/ccProduct"),
meta: {
keepAlive: true
}
keepAlive: true,
},
},
// 文创详情
{
path: '/ccProduct/:bccpId',
name: 'ccProductDetail',
component: () => import('@/views/ccProduct/Detail.vue'),
path: "/ccProduct/:bccpId",
name: "ccProductDetail",
component: () => import("@/views/ccProduct/Detail.vue"),
meta: {
keepAlive: false
}
keepAlive: false,
},
},
{
path: '/jyycc',
name: 'JYYCC',
component: () => import('@/views/boutique/components/jyycc')
path: "/jyycc",
name: "JYYCC",
component: () => import("@/views/boutique/components/jyycc"),
},
{
path: '/sdcs',
name: 'SDCS',
component: () => import('@/views/boutique/components/SDCS')
path: "/sdcs",
name: "SDCS",
component: () => import("@/views/boutique/components/SDCS"),
},
{
path: '/zggzsgwdzjlz',
name: 'zggzsgwdzjlz',
component: () => import('@/views/boutique/components/zggzsgwdzjlz/index.vue')
path: "/jysg",
name: "JYSG",
component: () => import("@/views/boutique/components/JYSG"),
},
{
path: '/lzsg',
name: 'LZSG',
component: () => import('@/views/boutique/components/lzsg/index.vue')
path: "/zggzsgwdzjlz",
name: "zggzsgwdzjlz",
component: () =>
import("@/views/boutique/components/zggzsgwdzjlz/index.vue"),
},
{
path: "/lzsg",
name: "lzsg",
component: () =>
import("@/views/boutique/components/lzsg/index.vue"),
},
// 404
{
path: '*',
redirect: '/404',
}
]
path: "*",
redirect: "/404",
},
];
/**
* 解决重复点击同一个路由报错的问题
*/
// 获取原型对象上的push函数
const originalPush = VueRouter.prototype.push
const originalPush = VueRouter.prototype.push;
// 修改原型对象中的push方法
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
return originalPush.call(this, location).catch((err) => err);
};
const router = new VueRouter({
routes,
scrollBehavior(to, from, savePosition) {
// return 期望滚动到哪个的位置
return {
y: 0
}
}
})
y: 0,
};
},
});
export default router
export default router;
src/views/boutique/components/JYSG.vue 0 → 100644
浏览文件 @ f45b5783
<template>
<div class="gysg">
<div class="part1">
<div class="title-box wow animate__animated animate__fadeInUp">
<div class="left wow animate__animated animate__fadeInLeft">
<img src="@/assets/imgs/boutique/jysg/part1/left.png" alt="" />
</div>
<div class="title wow animate__animated animate__fadeIn">
<img src="@/assets/imgs/boutique/jysg/part1/title.png" alt="" />
</div>
<div class="right wow animate__animated animate__fadeInRight">
<img src="@/assets/imgs/boutique/jysg/part1/right.png" alt="" />
</div>
</div>
<div class="top">
<img src="@/assets/imgs/boutique/jysg/part1/top.png" alt="" />
</div>
</div>
<div class="part2">
<div class="hall1 wow animate__animated animate__fadeInLeft">
<div class="img-1">
<img src="@/assets/imgs/boutique/jysg/part2/1.png" alt="" />
</div>
<div class="img-1-title">
<img src="@/assets/imgs/boutique/jysg/part2/t-1.png" alt="" />
</div>
</div>
<div class="hall2 wow animate__animated animate__fadeInRight">
<div class="img-2-intro">
<div class="content">
左边为贵州教育史发展“大事记”时间轴，右边为“前言”，正前方为“育人兴邦”主题浮雕
</div>
<div class="qt">
<img src="@/assets/imgs/boutique/jysg/part2/qianting.png" alt="" />
</div>
</div>
<div class="img-2-title">
<img src="@/assets/imgs/boutique/jysg/part2/t-2.png" alt="" />
</div>
<div class="img-2">
<img src="@/assets/imgs/boutique/jysg/part2/2.png" alt="" />
</div>
</div>
<div class="hall3 wow animate__animated animate__fadeInLeft">
<div class="img-3-intro">
<div class="wt">
<img src="@/assets/imgs/boutique/jysg/part2/weiting.png" alt="" />
</div>
<div class="content">
尾厅左墙展示了新中国成立以来主要领导人关于教育的重要论述，
右墙展示了走向未来的贵州教育规划和正在迈向现代化的教育视频。
</div>
</div>
<div class="img-3-title">
<img src="@/assets/imgs/boutique/jysg/part2/t-3.png" alt="" />
</div>
<div class="img-3">
<img src="@/assets/imgs/boutique/jysg/part2/3.png" alt="" />
</div>
</div>
<div class="part3">
<div class="tab-line">
<div class="zt wow animate__animated animate__bounceInLeft">
<img src="@/assets/imgs/boutique/jysg/part3/zhengting.png" alt="" />
</div>
<div class="part3-content">
<div class="line wow animate__animated animate__bounceInLeft"></div>
<div class="unit-group">
<div
class="unit-item"
v-for="(item, index) in unitsData"
@mouseenter="handleEnterUnit(item)"
@mouseleave="handleLeaveUnit"
@click="handleClickUnit(item)"
:key="index"
:style="{ left: index * 260 + 'px' }"
>
<div
class="circle wow animate__animated animate__bounceInLeft"
:style="{
backgroundImage: `url(${
curUnitItem == item ? circleS : circle
})`,
}"
></div>
<div
:class="{
name: true,
active: curUnitItem.name == item.name,
}"
class="wow animate__animated animate__bounceInUp"
>
<!-- {{ item.name }} -->
<img
:src="
require(`@/assets/imgs/boutique/jysg/part3/${item.img}`)
"
alt=""
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="unit-content">
<div class="title-container">
<div class="unit-title wow animate__animated animate__fadeInLeft">
<!-- {{ curUnitItem.name }} -->
<img
:src="
require(`@/assets/imgs/boutique/jysg/part3/${curUnitItem.img}`)
"
alt=""
/>
</div>
<div class="unit-intro wow animate__animated animate__fadeInRight">
{{ curUnitItem.intro }}
</div>
</div>
<div class="cr">
<div class="cr-1 wow animate__animated animate__fadeInLeft">
<img src="@/assets/imgs/boutique/jysg/part3/cr-1.png" alt="" />
</div>
<div class="cr-2 wow animate__animated animate__fadeInRight">
<img src="@/assets/imgs/boutique/jysg/part3/cr-2.png" alt="" />
</div>
<div class="cr-3 wow animate__animated animate__fadeInLeft">
<img src="@/assets/imgs/boutique/jysg/part3/cr-3.png" alt="" />
</div>
</div>
</div>
<div class="part4">
<div class="title wow animate__animated animate__fadeInUp">
<img src="@/assets/imgs/boutique/jysg/part4/title.png" alt="" />
</div>
<div class="imgs-group">
<div class="item" v-for="(item, index) in imgs" :key="index">
<div v-if="index == 0">
<div class="img wow animate__animated animate__fadeInLeft">
<img
:src="
require(`@/assets/imgs/boutique/jysg/part4/${item.img}`)
"
alt=""
/>
</div>
<div class="name wow animate__animated animate__fadeInLeft">
{{ item.name }}
</div>
</div>
<div v-if="index == 1">
<div class="img wow animate__animated animate__fadeInUp">
<img
:src="
require(`@/assets/imgs/boutique/jysg/part4/${item.img}`)
"
alt=""
/>
</div>
<div class="name wow animate__animated animate__fadeInUp">
{{ item.name }}
</div>
</div>
<div v-if="index == 2">
<div class="img wow animate__animated animate__fadeInRight">
<img
:src="
require(`@/assets/imgs/boutique/jysg/part4/${item.img}`)
"
alt=""
/>
</div>
<div class="name wow animate__animated animate__fadeInRight">
{{ item.name }}
</div>
</div>
</div>
</div>
</div>
<div class="part5 ">
<div class="title wow animate__animated animate__fadeInDown">
<img src="@/assets/imgs/boutique/jysg/part5/title.png" alt="" />
</div>
<div class="video-box wow animate__animated animate__fadeInUp">
<div class="container">
<video-player :src="videoUrl"></video-player>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import units from "./jysg.json";
import videoPlayer from "@/components/VideoPlayer";
export default {
components: {
videoPlayer,
},
data() {
return {
prefix: "@/assets/imgs/boutique/jysg",
unitsData: units,
circle: require("@/assets/imgs/boutique/jysg/part3/circle.png"),
circleS: require("@/assets/imgs/boutique/jysg/part3/circle-s.png"),
curUnitItem: {},
imgs: [
{
name: "贵州教育史馆古代部分",
img: "1.png",
},
{
name: "贵州教育史馆模拟场景“龙岗书院”",
img: "2.png",
},
{
name: "贵州教育史馆沙滩影山文化部分",
img: "3.png",
},
],
videoUrl: "/files/boutique_imgs/jysg/video/jysg.mp4",
};
},
mounted() {
this.curUnitItem = this.unitsData[0];
},
methods: {
handleEnterUnit(item) {
this.curUnitItem = item;
},
handleClickUnit(item) {
this.curUnitItem = item;
},
handleLeaveUnit() {
// this.curUnitItem = {};
},
},
};
</script>
<style lang="scss" scoped>
// common start
img {
width: 100%;
height: 100%;
}
//common end
.gysg {
background-image: url("@/assets/imgs/boutique/jysg/bg.png");
background-size: 100% 100%;
height: 7720px;
.part1 {
position: relative;
height: 1569px;
width: 100%;
background-image: url("@/assets/imgs/boutique/jysg/part1/bg.png");
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
.title-box {
background-image: url("@/assets/imgs/boutique/jysg/part1/title-box.png");
background-size: 100% 100%;
width: 1547px;
height: 777px;
display: flex;
justify-content: center;
align-items: center;
.left {
flex: 1;
height: 100%;
}
.right {
flex: 1;
height: 100%;
}
.title {
width: 660px;
height: 493px;
}
}
.top {
position: absolute;
width: 100%;
height: 180px;
top: 0;
}
}
.part2 {
height: 3297px;
width: 100%;
background-image: url("@/assets/imgs/boutique/jysg/part2/bg.png");
background-size: 100% 100%;
.hall1 {
width: 100%;
display: flex;
justify-content: center;
padding-top: 230px;
.img-1 {
width: 646px;
height: 429px;
}
.img-1-title {
width: 34px;
height: 345px;
margin-left: 48px;
}
}
.hall2 {
width: 100%;
display: flex;
justify-content: center;
margin-top: 100px;
align-items: flex-start;
.img-2-intro {
background-color: rgb(#666633, 0.6);
padding: 24px;
color: #fff;
display: flex;
margin-right: 48px;
.content {
height: 280px;
writing-mode: vertical-rl;
margin-right: 16px;
font-size: 18px;
letter-spacing: 2px;
}
.qt {
width: 52px;
height: 122px;
}
}
.img-2 {
width: 646px;
height: 429px;
}
.img-2-title {
width: 34px;
height: 345px;
margin-right: 48px;
}
}
.hall3 {
width: 100%;
display: flex;
justify-content: center;
margin-top: 100px;
align-items: center;
.img-3-intro {
background-color: rgb(#666633, 0.6);
padding: 24px;
color: #fff;
// display: flex;
margin-right: 48px;
width: 400px;
.wt {
width: 122px;
height: 52px;
margin-bottom: 24px;
}
.content {
margin-right: 16px;
font-size: 18px;
letter-spacing: 2px;
}
}
.img-3 {
width: 646px;
height: 429px;
}
.img-3-title {
width: 34px;
height: 345px;
margin-right: 48px;
}
}
}
.part3 {
margin-top: 100px;
.tab-line {
width: 100%;
padding: 0 100px;
display: flex;
.zt {
width: 70px;
height: 152px;
margin-right: 100px;
}
.part3-content {
position: relative;
flex: 1;
.line {
width: 100%;
height: 3px;
background-image: url("@/assets/imgs/boutique/jysg/part3/line.png");
background-size: 100% 100%;
display: flex;
}
.unit-group {
display: flex;
position: absolute;
top: -24px;
.unit-item {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 0;
.circle {
width: 55px;
height: 55px;
background-size: 100% 100%;
margin-bottom: 16px;
cursor: pointer;
transition: all ease 0.3s;
}
.name {
color: #fff;
writing-mode: vertical-lr;
font-size: 22px;
letter-spacing: 8px;
cursor: pointer;
}
.active {
color: #1a645b;
}
}
}
}
}
}
.unit-content {
padding: 560px 100px;
color: #fff;
display: flex;
width: 100%;
height: 2200px;
.title-container {
width: 20%;
display: flex;
align-items: flex-start;
.unit-title {
writing-mode: vertical-lr;
font-size: 32px;
font-weight: bold;
margin-right: 16px;
letter-spacing: 2px;
width: 50px;
}
.unit-intro {
writing-mode: vertical-rl;
height: 500px;
font-size: 18px;
letter-spacing: 2px;
}
}
.cr {
flex: 1;
position: relative;
.cr-1 {
position: absolute;
width: 546px;
height: 882px;
left: 14%;
top: 0;
}
.cr-2 {
position: absolute;
width: 595px;
height: 596px;
right: 0;
top: 682px;
}
.cr-3 {
position: absolute;
width: 546px;
height: 566px;
left: 12%;
top: 1000px;
}
}
}
.part4 {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
.title {
width: 300px;
height: 64px;
margin-bottom: 48px;
}
.imgs-group {
display: flex;
align-items: center;
& > .item {
height: 100%;
flex: 1;
margin-right: 32px;
display: flex;
flex-direction: column;
& > div {
& > .img {
height: 518px;
}
& > .name {
color: #fff;
font-size: 24px;
display: flex;
justify-content: center;
margin-top: 10px;
}
}
}
}
}
.part5 {
height: 1200px;
background-image: url("@/assets/imgs/boutique/jysg/part5/bg.png");
background-size: 100% 100%;
margin-top: 140px;
display: flex;
flex-direction: column;
align-items: center;
.title {
height: 55px;
width: 595px;
margin-bottom: 32px;
}
.video-box {
display: flex;
justify-content: center;
width: 100%;
.container {
width: 80%;
height: 800px;
border: 14px solid #aa9d5e;
}
}
}
}
</style>
\ No newline at end of file
src/views/boutique/components/SDCS.vue
浏览文件 @ f45b5783
......@@ -365,7 +365,6 @@ export default {
},
methods: {
handleClickUnit1(item) {
this.part1CurUnit = item;
},
......
src/views/boutique/components/SMGZ.vue
浏览文件 @ f45b5783
......@@ -2,7 +2,11 @@
<div class="smgz">
<div class="face-img smgz-item">
<div class="back-img img wow animate__animated animate__fadeIn">
<img src="@/assets/imgs/boutique/smgz-5/1_faceImage/bg.png" alt="" />
<img
src="@/assets/imgs/boutique/smgz-5/1_faceImage/bg.png"
id="@/assets/imgs/boutique/smgz-5/1_faceImage/bg.png"
alt=""
/>
</div>
<div class="left-title img wow animate__animated animate__fadeInLeft">
<img
......@@ -23,7 +27,11 @@
class="ms img wow animate__animated animate__fadeInRight"
data-wow-duration="2s"
>
<img src="@/assets/imgs/boutique/smgz-5/1_faceImage/ms.png" alt="" />
<img
src="@/assets/imgs/boutique/smgz-5/1_faceImage/ms.png"
id="@/assets/imgs/boutique/smgz-5/1_faceImage/ms.png"
alt=""
/>
</div>
<div
class="more img wow animate__animated animate__fadeInUp"
......@@ -442,12 +450,34 @@ export default {
this.$nextTick(() => {
// this.scroll();
window.addEventListener("scroll", this.scroll);
this.replaceImg();
});
},
destroyed() {
window.removeEventListener("scroll", this.scroll, false);
},
methods: {
//替换从低清到高清
replaceImg() {
let imgs = document.getElementsByTagName("img");
let imgsArr = [...imgs];
imgsArr.forEach((i) => {
// url中包含了data-url压缩图的才进行替换
if (i.id && i.id.indexOf("smgz-5")) {
var imgObj = new Image(); //新建一个图片对象
let lowImgSrc = i.id;
let highImgSrc = lowImgSrc.replace("smgz-5", "smgz"); //最终显示的大图
let lowImg = document.getElementById(i.id);
imgObj.src = highImgSrc;
imgObj.onload = function () {
debugger;
lowImg.src = highImgSrc;
lowImg.classList.add('high')
};
}
});
},
handleChangeUnit(index) {
this.currentUnitPicIndex = index;
this.$refs.unitSwiper.swiper.slideTo(index, 500, true);
......
src/views/boutique/components/jysg.json 0 → 100644
浏览文件 @ f45b5783
[
{
"name": "贵州古代教育史馆",
"img": "t-1.png",
"intro": "第一部分为贵州古代教育史馆，即“参差交错的贵州古代教育”，展示了原始形态教育社会(先秦到宋元)——明清时期的贵州教育(约19世纪中叶前)——地域文化馆（沙滩文化与影山文化）。尹真讲学的“务本堂”复制品及视频介绍。"
},
{
"name": "贵州近代教育史馆",
"img": "t-2.png",
"intro": "第二部分为贵州近代教育史馆，即“除旧布新的贵州近代教育”，展示了鸦片战争后贵州近代先贤促进贵州教育近代化的历程——近代学堂体系的建立——民国初期贵州教育——抗战时期教育文化内迁贵州及贵州近代教育体系建立。"
},
{
"name": "贵州现代教育史馆",
"img": "t-3.png",
"intro": "第三部分为贵州现代教育史馆，即（曲折发展的新中国初期贵州教育与快速发展的改革开放以来的贵州教育），展示了新中国初期贵州现代教育体系的建立——文革时期贵州曲折发展——改革开放后贵州教育的快速发展——十八大以来贵州教育取得的辉煌成就。"
},
{
"name": "贵州民族教育史馆",
"img": "t-4.png",
"intro": "第四部分为贵州现代教育史馆，即“多元教育模式的贵州少数民族教育概况”，展示了传统形态、封建形态、近代形态、现代形态的贵州民族教育发展概况。"
},
{
"name": "贵州名师馆",
"img": "t-5.png",
"intro": "第五部分为贵州历史上的名师，即“薪火相传的贵州近现代著名教师”，展示了明清以来贵州名师、先贤及其献身教育的精神。"
}
]
src/views/boutique/index.vue
浏览文件 @ f45b5783
......@@ -4,9 +4,8 @@
<YLGDYW v-else-if="currentTitle == '夜郎国的疑问'" />
<JYYCC v-else-if="currentTitle == '记忆与传承'" />
<SDCS v-else-if="currentTitle == '四渡赤水出奇兵'" />
<JYSG v-else-if="currentTitle == '贵州教育史馆'" />
<div v-else class="img-container">
<!-- <img :src="require(`@/assets/imgs/boutique/${currentTitle}.jpg`)
" alt="" /> -->
<el-empty description="暂无数据"></el-empty>
</div>
</div>
......@@ -18,8 +17,9 @@ import SMGZ from "./components/SMGZ";
import YLGDYW from "./components/YLGDYW";
import JYYCC from "./components/jyycc";
import SDCS from "./components/SDCS";
import JYSG from "./components/JYSG";
export default {
components: { SMGZ, YLGDYW, JYYCC,SDCS },
components: { SMGZ, YLGDYW, JYYCC, SDCS, JYSG },
watch: {
currentTitle: {
handler: function (value) {
......@@ -50,15 +50,14 @@ export default {
},
data() {
return {
currentTitle: ''
}
currentTitle: "",
};
},
mounted() {
this.currentTitle = this.$route.params.title
}
}
this.currentTitle = this.$route.params.title;
},
};
</script>
<style>
</style>
\ No newline at end of file
src/views/display/Detail.vue
浏览文件 @ f45b5783
......@@ -48,7 +48,6 @@ export default {
"displayType",
"displayCharacter",
]);
debugger
this.loadDetail();
},
......
src/views/display/boutiqueTitles.js 0 → 100644
浏览文件 @ f45b5783
//此处为配置需跳转为精品展的展览
//在此处添加title后需在@/views/boutique/index.vue中引入对应的页面组件
export var titles = [
"神秘贵州",
"四渡赤水出奇兵",
"记忆与传承",
"夜郎国的疑问",
"贵州教育史馆",
];
src/views/display/components/ChStyle.vue
浏览文件 @ f45b5783
......@@ -24,7 +24,7 @@
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
>
<img :src="$getFullUrl(item.pressUrl || item.url)" alt="" />
<img :src="$getFullUrl(item.middleUrl || item.url)" alt="" />
<div class="modal"></div>
</div>
</div>
......
src/views/display/components/NormalStyle.vue
浏览文件 @ f45b5783
......@@ -20,12 +20,22 @@
<!-- 展览基本信息 -->
<div class="content-item display-detail_basic_info">
<div class="info-container">
<div v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" class="info-container-left">
<SlideImage :imgList="displayDetail.imagesVo" v-if="
<div
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
class="info-container-left"
>
<SlideImage
:imgList="displayDetail.imagesVo"
:imgKey="'middleUrl'"
v-if="
displayDetail.imagesVo && displayDetail.imagesVo.length > 0
" />
<SlideImage :imgList="[{ pressUrl: displayDetail.faceImagePressUrl }]"
v-else-if="displayDetail.faceImagePressUrl" />
"
/>
<SlideImage
:imgList="[{ middleUrl: displayDetail.faceImagePressUrl }]"
:imgKey="'middleUrl'"
v-else-if="displayDetail.faceImagePressUrl"
/>
</div>
<div class="info-container-right">
<div class="info-title">
......@@ -96,33 +106,56 @@
/> -->
</div>
<div class="tools">
<ReaderOperations :loveCount="displayDetail.loveCount"
<ReaderOperations
:loveCount="displayDetail.loveCount"
:loveCountStatus="Boolean(displayDetail.loveCountStatus)"
:collectCount="displayDetail.collectCount" :collectCountStatus="
:collectCount="displayDetail.collectCount"
:collectCountStatus="
Boolean(displayDetail.collectCountStatus)
" :sourceId="displayDetail.exhibitionId" :title="displayDetail.title"
:sourceType="'biz_exhibition'" @reload="reload" />
"
:sourceId="displayDetail.exhibitionId"
:title="displayDetail.title"
:sourceType="'biz_exhibition'"
@reload="reload"
/>
</div>
</el-col>
</el-row>
</div>
</div>
<div class="audio" :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
@click="handleClickAudio" v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0">
<div
class="audio"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
@click="handleClickAudio"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
>
<img src="@/assets/imgs/display/normal/music.png" alt="" />
<!-- <svg-icon icon-class="music"></svg-icon> -->
<AudioPlayer style="display: none" :url="$getFullUrl(displayDetail.audiosVo[0].url)" ref="AudioPlayer" />
<AudioPlayer
style="display: none"
:url="$getFullUrl(displayDetail.audiosVo[0].url)"
ref="AudioPlayer"
/>
</div>
</div>
<div class="content-item display-detail_tabbar" id="tabbar" :class="{ isFixed: isFixed }">
<div
class="content-item display-detail_tabbar"
id="tabbar"
:class="{ isFixed: isFixed }"
>
<span v-for="(item, index) in tabbarData" :key="index">
<span @click="handleClickTabItem(item)" :class="[
<span
@click="handleClickTabItem(item)"
:class="[
'tab-item',
currentTab && currentTab.domId == item.domId ? 'active' : '',
]" v-html="item.name" v-if="
]"
v-html="item.name"
v-if="
displayDetail[item.domId] &&
displayDetail[item.domId].length > 0
">
"
>
</span>
</span>
</div>
......@@ -135,11 +168,18 @@
</div>
<div class="intro-content">
<div class="left-box">简介</div>
<div class="intro-content-container" v-html="displayDetail.intro"></div>
<div
class="intro-content-container"
v-html="displayDetail.intro"
></div>
</div>
</div>
<div class="display-detail_virtual content-item" v-if="displayDetail.virtualVo.length > 0" id="virtualVo">
<div
class="display-detail_virtual content-item"
v-if="displayDetail.virtualVo.length > 0"
id="virtualVo"
>
<div class="custom_title">
<div class="center">
<!-- <svg-icon icon-class="wenxian"></svg-icon> -->
......@@ -147,8 +187,12 @@
</div>
</div>
<div class="vr-content">
<div class="img-container" @click="handleToVR(item)" v-for="(item, index) in displayDetail.virtualVo"
:key="index">
<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>
......@@ -158,13 +202,16 @@
</div>
</div>
<!-- 展览视频 -->
<div id="videosVo" class="content-item videos"
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0">
<div
id="videosVo"
class="content-item videos"
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-names">
<swiper class="swiper video-swiper" :options="videoSwiperOption" ref="unitSwiper" v-if="currentVideo">
<swiper-slide :class="[
'slide-item',
......@@ -180,48 +227,81 @@
<div class="swiper-button-next video-swiper-button-next" slot="button-next">
<i class="el-icon-arrow-right"></i>
</div>
<!-- <div class="video-item" v-for="(item, index) in displayDetail.videosVo" :key="index"
@click="handleChangeCurrentVideo(item)">
<div :class="[
</div> -->
<div class="video-content">
<div class="player">
<video-player
v-if="currentVideo && currentVideo.url"
:src="$getFullUrl(currentVideo.url)"
class="video-player"
>
</video-player>
</div>
<div class="video-name-list">
<div class="title">播放列表</div>
<el-row>
<el-col
:span="12"
:class="[
'name',
currentVideo && item.fileId == currentVideo.fileId
? 'active'
: '',
]">
{{ item.name.split(".")[0] }}
item.fileId == currentVideo.fileId ? 'active' : '',
]"
v-for="(item, index) in displayDetail.videosVo"
:key="index"
@click.native="handleChangeCurrentVideo(item)"
>
{{ item.name.split(".")[0] }}</el-col
>
</el-row>
</div>
</div> -->
</div>
<video-player v-if="currentVideo && currentVideo.url" :src="$getFullUrl(currentVideo.url)" class="video-box">
</video-player>
</div>
<!--展览单元 -->
<div class="content-item display-detail_units" ref="units" v-if="displayDetail.exhibitionUnits.length > 0"
id="exhibitionUnits">
<div
class="content-item display-detail_units"
ref="units"
v-if="displayDetail.exhibitionUnits.length > 0"
id="exhibitionUnits"
>
<div class="custom_title">
<div class="center">
<span class="title">展览单元</span>
</div>
</div>
<NormalStyleUnit :curUnit="curUnit" :exhibitionUnits="displayDetail.exhibitionUnits"
@handleClickUnit="handleClickUnit" @handelPreviewImages="handelPreviewImages" @handleToCr="handleToCr" />
<NormalStyleUnit
:curUnit="curUnit"
:exhibitionUnits="displayDetail.exhibitionUnits"
@handleClickUnit="handleClickUnit"
@handelPreviewImages="handelPreviewImages"
@handleToCr="handleToCr"
/>
</div>
<!--展览相关文物 -->
<div class="content-item display-detail_relateRc" ref="units" v-if="
<div
class="content-item display-detail_relateRc"
ref="units"
v-if="
displayDetail.culturalRelicVo &&
displayDetail.culturalRelicVo.length > 0
" id="culturalRelicVo">
"
id="culturalRelicVo"
>
<div class="cr-title">展览文物</div>
<SlideImageGroup :imgList="displayDetail.culturalRelicVo">
<template slot-scope="{ item }" slot="img">
<img :src="$getFullUrl(item.faceImagePressUrl)" alt="" style="
<img
:src="$getFullUrl(item.faceImagePressUrl)"
alt=""
style="
width: 100%;
height: 100%;
object-fit: fill;
cursor: pointer;
" @click="handleToCr(item)" />
"
@click="handleToCr(item)"
/>
</template>
<template slot-scope="{ item }" slot="info">
<div class="name">{{ item.name }}</div>
......@@ -229,9 +309,13 @@
</SlideImageGroup>
</div>
<!-- 相关文献 -->
<div class="content-item display-detail_lts" v-if="
<div
class="content-item display-detail_lts"
v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0
" id="literatureVo">
"
id="literatureVo"
>
<div class="custom_title">
<div class="center">
<!-- <svg-icon icon-class="wenxian"></svg-icon> -->
......@@ -239,19 +323,31 @@
</div>
</div>
<div class="lts-content">
<div class="lt-item" v-for="(item, index) in displayDetail.literatureVo" :key="index"
@click="handleViewLt(item)">
<div
class="lt-item"
v-for="(item, index) in displayDetail.literatureVo"
:key="index"
@click="handleViewLt(item)"
>
<span class="lt-order">[{{ index + 1 }}]</span>
<span class="lt-authors" v-if="item.authors">{{ item.authors }}.</span>
<span class="lt-authors" v-if="item.authors"
>{{ item.authors }}.</span
>
<span class="lt-name" v-if="item.name">{{ item.name }}.</span>
<span class="lt-source" v-if="item.source">{{ item.source }}.</span>
<span class="lt-source" v-if="item.source"
>{{ item.source }}.</span
>
<span class="lt-date" v-if="item.date">{{ item.date }}</span>
</div>
</div>
</div>
</div>
</div>
<el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" />
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
</div>
</template>
......@@ -264,7 +360,7 @@ import SlideImageGroup from "@/components/SlideImageGroup";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import { isElementInViewport2 } from "@/utils/index";
import NormalStyleUnit from './NormalStyleUnit.vue'
import NormalStyleUnit from "./NormalStyleUnit.vue";
import videoPlayer from "@/components/VideoPlayer";
export default {
name: "NormalStyle",
......@@ -369,7 +465,7 @@ export default {
this.displayDetail.exhibitionUnits.length > 0
) {
this.curUnit = this.displayDetail.exhibitionUnits[0];
this.expandUnitInfo()
this.expandUnitInfo();
}
processUnit(this.displayDetail.exhibitionUnits);
......@@ -388,7 +484,6 @@ export default {
};
}
function processUnit(list) {
for (let o of list || []) {
if (o.children) {
......@@ -438,13 +533,12 @@ export default {
};
},
// 预览关联文献
handleViewLt(item) {
if (item.files[0].url) {
previewFile(item.files[0].url, item.files[0].name);
} else {
this.$message.info('当前文献暂不支持在线浏览')
this.$message.info("当前文献暂不支持在线浏览");
}
},
......@@ -474,7 +568,7 @@ export default {
handleClickUnit(item) {
this.curUnit = item;
this.expandUnitInfo()
this.expandUnitInfo();
},
handleToCr(item) {
......@@ -518,19 +612,23 @@ export default {
expandUnitInfo() {
// 将每个单元下的所有数据变成key-value形式，方便遍历
let newUnits = {}
traveseUnits(this.curUnit)
this.$set(this.curUnit, 'expandUnitInfo', JSON.parse(JSON.stringify(newUnits)))
let newUnits = {};
traveseUnits(this.curUnit);
this.$set(
this.curUnit,
"expandUnitInfo",
JSON.parse(JSON.stringify(newUnits))
);
function traveseUnits(obj) {
newUnits[obj.title] = obj
newUnits[obj.title] = obj;
if (obj.children && obj.children.length > 0) {
obj.children.map(item => {
traveseUnits(item)
})
}
obj.children.map((item) => {
traveseUnits(item);
});
}
}
},
},
};
</script>
......@@ -546,9 +644,9 @@ export default {
cursor: pointer;
}
.display-detail_intro{
.intro-content{
p{
.display-detail_intro {
.intro-content {
p {
font-family: $defaultFontFamily !important;
}
}
......@@ -705,7 +803,6 @@ $titleFontFamily: SourceHanSerifCN-Bold;
overflow: hidden;
.imagesVo-image-container {
// position: relative;
.img-container {
height: 100%;
......@@ -870,7 +967,6 @@ $titleFontFamily: SourceHanSerifCN-Bold;
cursor: pointer;
position: relative;
&:hover {
color: $themeColor;
......@@ -978,36 +1074,25 @@ $titleFontFamily: SourceHanSerifCN-Bold;
margin-right: 10px;
}
}
.video-names {
.video-content {
display: flex;
justify-content: center;
margin-bottom: 30px;
position: relative;
.video-swiper-button-next,
.video-swiper-button-prev {
// background-color: rgba(0,0,0,0.2);
// border-radius: 50%;
background-image: none;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
color: $themeColor;
font-weight: bolder;
font-size: 28px;
transform: translateY(-6px);
.player {
flex: 1;
margin-right: 20px;
height: 600px;
}
.swiper-container {
width: 90%;
.slide-item {
.video-name-list {
width: 300px;
& > .title {
font-size: 18px;
font-weight: bold;
color: #333;
margin-bottom: 8px;
}
.name {
padding: 8px;
border-radius: 4px;
// border-radius: 4px;
color: $themeColor;
cursor: pointer;
text-overflow: ellipsis;
......@@ -1015,73 +1100,68 @@ $titleFontFamily: SourceHanSerifCN-Bold;
width: 100%;
white-space: nowrap;
border: 1px solid $themeColor;
font-size: 14px;
&:hover {
background: $themeColor;
color: $themeSecondaryColor;
}
&:not(&:last-child) {
border-bottom: none;
}
// margin-bottom: 12px;
}
.active {
background: $themeColor;
color: #fff;
color: $themeSecondaryColor;
}
}
}
// .video-item {
// font-size: 18px;
// margin: 8px 30px;
// .name {
// color: #999;
// .video-names {
// display: flex;
// justify-content: center;
// margin-bottom: 30px;
// position: relative;
// cursor: pointer;
// &:hover {
// .video-swiper-button-next,
// .video-swiper-button-prev {
// // background-color: rgba(0,0,0,0.2);
// // border-radius: 50%;
// background-image: none;
// width: 60px;
// height: 60px;
// display: flex;
// justify-content: center;
// align-items: center;
// color: $themeColor;
// &::after {
// display: inline-block;
// font-weight: bolder;
// font-size: 28px;
// transform: translateY(-6px);
// }
// &::before {
// display: inline-block;
// }
// }
// }
// .swiper-container {
// width: 90%;
// .active::after,
// .name::after {
// content: "";
// width: 50%;
// height: 1px;
// background-color: $themeColor;
// position: absolute;
// left: 0;
// bottom: -9px;
// left: 50%;
// transform: translateX(-50%);
// display: none;
// .slide-item {
// padding: 8px;
// border-radius: 4px;
// color: $themeColor;
// cursor: pointer;
// text-overflow: ellipsis;
// overflow: hidden;
// width: 100%;
// white-space: nowrap;
// border: 1px solid $themeColor;
// font-size: 14px;
// }
// .active::before,
// .name::before {
// content: "";
// width: 0;
// height: 0;
// border: 8px solid transparent;
// border-top-color: $themeColor;
// position: absolute;
// left: 50%;
// bottom: -25px;
// transform: translateX(-50%);
// display: none;
// .active {
// background: $themeColor;
// color: #fff;
// }
// .active::after,
// .active::before {
// display: inline-block;
// }
// }
}
.video-box {
height: 600px;
......@@ -1091,7 +1171,6 @@ $titleFontFamily: SourceHanSerifCN-Bold;
height: 100%;
}
}
}
// 虚拟展
......@@ -1220,7 +1299,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
border-bottom: 1px dashed #ccc;
padding-bottom: 9px;
&>span {
& > span {
padding: 0 4px;
}
}
......@@ -1252,8 +1331,11 @@ $titleFontFamily: SourceHanSerifCN-Bold;
}
//有子节点 且已展开
::v-deep .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
background: url("~@/assets/imgs/display/normal/tree-node-s.png") no-repeat 0 3px;
::v-deep
.el-tree
.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
background: url("~@/assets/imgs/display/normal/tree-node-s.png") no-repeat 0
3px;
content: "";
display: block;
width: 16px;
......
src/views/display/components/RedStyle.vue
浏览文件 @ f45b5783
......@@ -2,12 +2,16 @@
<div class="display-detail">
<div class="content" id="content">
<!-- 展览图片 -->
<div class="
<div
class="
content-item
display-detail_imgs
wow
animate__animated animate__fadeInDownBig
" ref="imgs" v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0">
"
ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
>
<!-- <el-carousel height="430px">
<el-carousel-item
v-for="(item, index) in displayDetail.imagesVo"
......@@ -18,20 +22,30 @@
</div>
</el-carousel-item>
</el-carousel> -->
<img id="faceImage" v-if="displayDetail.faceImagePressUrl" class="animate__animated animate__fadeInDownBig"
:src="$getFullUrl(displayDetail.faceImagePressUrl)" />
<img class="animate__animated animate__fadeInDownBig"
v-else-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" id="faceImage"
:src="$getFullUrl(displayDetail.imagesVo[0].pressUrl)" />
<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="
<div
class="
content-item
display-detail_basic_info
wow
animate__animated animate__fadeInUp
">
"
>
<div class="wrapper">
<div class="top">
<div class="top-wrapper">
......@@ -55,11 +69,16 @@
</div>
<div class="info-container">
<div class="info-container-left">
<SlideImage :imgList="displayDetail.imagesVo" v-if="
<SlideImage
:imgList="displayDetail.imagesVo"
v-if="
displayDetail.imagesVo && displayDetail.imagesVo.length > 0
" />
<SlideImage :imgList="[{ pressUrl: displayDetail.faceImagePressUrl }]"
v-else-if="displayDetail.faceImagePressUrl" />
"
/>
<SlideImage
:imgList="[{ pressUrl: displayDetail.faceImagePressUrl }]"
v-else-if="displayDetail.faceImagePressUrl"
/>
<!-- <el-carousel>
<el-carousel-item v-for="(item, index) in displayDetail.imagesVo" :key="index"
class="imagesVo-image-container">
......@@ -141,12 +160,19 @@
</div>
</el-col>
<el-col :span="11" class="reader-operations">
<ReaderOperations :loveCount="displayDetail.loveCount"
:loveCountStatus="Boolean(displayDetail.loveCountStatus)" :collectCount="displayDetail.collectCount"
<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'" />
"
:sourceId="displayDetail.exhibitionId"
:title="displayDetail.title"
:sourceType="'biz_exhibition'"
@reload="reload"
:selectColor="'#a30e0c'"
/>
</el-col>
</el-row>
</div>
......@@ -154,52 +180,77 @@
</div>
</div>
<!-- 展览简介 -->
<div class="
<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
class="intro-content-container"
v-html="displayDetail.intro"
></div>
</div>
</div>
</div>
<!-- 视频 -->
<div class="
<div
class="
content-item
display-detail_videos
wow
animate__animated animate__fadeInRight
" v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0">
"
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
>
<div class="wrapper">
<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="[
<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>
<video-player
v-if="currentVideo"
:src="$getFullUrl(currentVideo.url)"
class="video-box"
></video-player>
</div>
</div>
<!-- 虚拟展厅 -->
<div class="display-detail_virtual content-item" v-if="displayDetail.virtualVo.length > 0">
<div
class="display-detail_virtual content-item"
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">
<div
class="img-container"
@click="handleToVR(item)"
v-for="(item, index) in displayDetail.virtualVo"
:key="index"
>
<img :src="item.faceImagePressUrl" alt="" />
<div class="modal">
<svg-icon icon-class="360"></svg-icon>
......@@ -209,21 +260,32 @@
</div>
</div>
<!--展览单元 -->
<div class="
<div
class="
content-item
display-detail_units
wow
animate__animated animate__fadeInUp
" ref="units" v-if="displayDetail.exhibitionUnits.length > 0">
"
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="left-menu-item"
v-for="(item, index) in displayDetail.exhibitionUnits"
:key="index"
@click="handleClickUnitTitle(item)"
>
<!-- {{ item.imagesVo }} -->
<div :class="{ 'base-img': true, active: currentUnit == item }" :id="item.euId"
v-if="item.imagesVo && item.imagesVo.length > 0">
<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">
......@@ -233,46 +295,92 @@
</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-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="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">
<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" />
<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-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 class="unit-content_crs" v-if="
unitValue.culturalRelics && unitValue.culturalRelics.length > 0
">
<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.faceImagePressUrl)" alt="" style="
<img
:src="$getFullUrl(item.faceImagePressUrl)"
alt=""
style="
width: 100%;
height: 100%;
object-fit: fill;
cursor: pointer;
" @click="handleToCr(item)" />
"
@click="handleToCr(item)"
/>
</template>
<template slot-scope="{ item }" slot="info">
<div class="name">{{ item.name }}</div>
......@@ -398,25 +506,48 @@
</div>
</div>
<!-- 相关文献 -->
<div class="
<div
class="
content-item
display-detail_lts
wow
animate__animated animate__fadeInUp
" v-if="
"
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="{
<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>
}"
: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)">
......@@ -429,7 +560,11 @@
</div>
</div>
</div>
<el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" />
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
</div>
</template>
......@@ -518,7 +653,7 @@ export default {
this.displayDetail.exhibitionUnits.length > 0
? this.displayDetail.exhibitionUnits[0]
: null;
this.expandUnitInfo()
this.expandUnitInfo();
function processUnit(list) {
for (let o of list || []) {
if (o.children) {
......@@ -619,20 +754,24 @@ export default {
handleClickUnitTitle(item) {
this.currentUnit = item;
this.expandUnitInfo()
this.expandUnitInfo();
},
expandUnitInfo() {
// 将每个单元下的所有数据变成key-value形式，方便遍历
let newUnits = {}
traveseUnits(this.currentUnit)
this.$set(this.currentUnit, 'expandUnitInfo', JSON.parse(JSON.stringify(newUnits)))
let newUnits = {};
traveseUnits(this.currentUnit);
this.$set(
this.currentUnit,
"expandUnitInfo",
JSON.parse(JSON.stringify(newUnits))
);
function traveseUnits(obj) {
newUnits[obj.title] = obj
newUnits[obj.title] = obj;
if (obj.children && obj.children.length > 0) {
obj.children.map(item => {
traveseUnits(item)
})
obj.children.map((item) => {
traveseUnits(item);
});
}
}
},
......@@ -751,7 +890,6 @@ $themeColor: #a30e0c;
overflow: hidden;
&:hover {
.top-list,
.bottom-list {
animation-play-state: paused;
......@@ -806,7 +944,6 @@ $themeColor: #a30e0c;
overflow: hidden;
.imagesVo-image-container {
// position: relative;
.img-container {
height: 100%;
......@@ -1084,7 +1221,8 @@ $themeColor: #a30e0c;
// height: 750px;
// height: calc(100vh);
background-image: url("@/assets/imgs/display/red/unit-bg.jpg");
background-size: 100% 100%;
padding-bottom: 32px;
.wrapper {
// width;
display: flex;
......@@ -1192,7 +1330,8 @@ $themeColor: #a30e0c;
// flex: 1;
padding: 60px 40px 0;
.unit-content-container {}
.unit-content-container {
}
.unit-content-title {
font-size: 24px;
......
src/views/display/index.vue
浏览文件 @ f45b5783
......@@ -111,7 +111,7 @@ import ListBanner from "@/components/ListBanner";
import { getList, getDisplayExistDict } from "@/api/display";
import { mapGetters } from "vuex";
import { debounce } from "@/utils/index";
import { titles} from './boutiqueTitles'
export default {
name: "Display",
components: { ListBanner },
......@@ -141,12 +141,7 @@ export default {
},
],
currentType: "",
boutiqueTitles: [
"神秘贵州",
"四渡赤水出奇兵",
"记忆与传承",
"夜郎国的疑问",
],
boutiqueTitles:titles
};
},
computed: {
......@@ -217,7 +212,6 @@ export default {
handleClick(item) {
let index = this.boutiqueTitles.indexOf(item.title);
// debugger
let newPage;
if (index == -1) {
const { themeType, exhibitionId } = item;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论