Skip to content

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

布展详情模板完善

上级 e4bf2144
显示空白字符变更
内嵌 并排
正在显示 包含 163 行增加 和 277 行删除
src/views/display/components/BlueStyle.vue
浏览文件 @ 011391ed
......@@ -156,8 +156,8 @@
<svg-icon icon-class="jianjie"></svg-icon>
<span>展览简介</span>
</div>
<div class="intro-content-container">
{{ displayDetail.intro }}
<div class="intro-content-container" v-html="displayDetail.intro">
</div>
</div>
<div
......@@ -415,8 +415,6 @@ import Card from "@/views/personal/components/Card";
import Video from "@/components/Video";
import { previewFile } from "@/utils/index";
import ChStyleUnit from "./ChStyleUnit.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import MenuList from "@/components/MenuList";
export default {
......@@ -427,8 +425,6 @@ export default {
Video,
Card,
ChStyleUnit,
swiper,
swiperSlide,
MenuList,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
......@@ -453,43 +449,8 @@ export default {
dotImg: require("@/assets/imgs/display/normal/mz-dot.png"),
dotImgS: require("@/assets/imgs/display/normal/mz-dot-s.png"),
page: null,
swiperOption: {
// autoplay: false,
effect: "fade",
pagination: {
el: ".swiper-pagination",
type: "custom",
clickable: true,
renderCustom: function (swiper, current, total) {
var customPaginationHtml = "";
for (var i = 0; i < total; i++) {
//判断哪个分页器此刻应该被激活
if (i == current - 1) {
customPaginationHtml += `<img class="page-item" src="${vm.dotImgS}" />`;
} else {
customPaginationHtml += `<img class="page-item" src="${vm.dotImg}" />`;
}
}
return `<span id="page">` + customPaginationHtml + `</span>`;
},
},
on: {
click: function (e) {
let page = document.getElementById("page");
var item = e.target;
var lists = Array.from(page.querySelectorAll("img"));
let index = lists.indexOf(item);
vm.swiper.slideTo(index);
},
},
},
};
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
},
},
async mounted() {
this.loadDetail();
},
......@@ -781,12 +742,13 @@ export default {
.basic-info {
.body-item {
display: flex;
align-items: center;
.label {
display: flex;
align-items: center;
width: 140px;
margin-right: 26px;
margin-bottom: 10px;
// margin-right: 26px;
// margin-bottom: 10px;
font-weight: bold;
color: #858585;
.svg-icon {
......
src/views/display/components/ChStyle-unit.vue
浏览文件 @ 011391ed
......@@ -36,7 +36,7 @@
<div class="unit-content">
<div class="unit-title">{{ item.title }}</div>
<div class="unit-intro">{{ item.intro }}</div>
<div class="unit-intro" v-html="item.intro"></div>
</div>
</div>
<div class="units-title">
......
src/views/display/components/ChStyle.vue
浏览文件 @ 011391ed
<template>
<div class="display-detail">
<div class="content" id="content">
<div
class="
<div class="
content-item
sliders
wow
animate__animated animate__fadeInRightBig
"
ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
>
" ref="imgs" v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0">
<div class="view-box">
<div
class="slide-group"
:style="{
<div class="slide-group" :style="{
width: sildeGroupWidth,
left: slideGroupleft + 'px',
}"
>
<div
class="slide-item"
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
>
}">
<div class="slide-item" v-for="(item, index) in displayDetail.imagesVo" :key="index">
<img :src="$getFullUrl(item.pressUrl || item.url)" alt="" />
<div class="modal"></div>
</div>
......@@ -80,67 +69,40 @@
</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'"
/>
<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 class="intro-title wow animate__animated animate__fadeInLeft">
展览简介
</div>
<div
class="intro-content wow animate__animated animate__fadeInLeft"
>
{{ displayDetail.intro }}
<div class="intro-content wow animate__animated animate__fadeInLeft" v-html="displayDetail.intro">
</div>
</div>
<div
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
class="videos wow animate__animated animate__fadeInRight"
>
<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"
>
<el-carousel-item v-for="item in displayDetail.videosVo" :key="item.fileId">
<Video :url="$getFullUrl(item.url)" />
</el-carousel-item>
</el-carousel>
</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">
<!-- <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"
/>
<AudioPlayer style="display: none" :url="$getFullUrl(displayDetail.audiosVo[0].url)" ref="AudioPlayer" />
</div>
</div>
</div>
<div
class="content-item units"
v-if="displayDetail.exhibitionUnits.length > 0"
>
<div class="content-item units" v-if="displayDetail.exhibitionUnits.length > 0">
<div class="wrapper">
<div class="custom-title wow animate__animated animate__fadeInLeft">
<div class="custom-title-prefix">
......@@ -154,16 +116,12 @@
<div class="right">
<a class="clearfix" @click="unitVisible = true">
<svg-icon icon-class="book"></svg-icon>
详情</a
>
详情
</a>
</div>
</div>
<ChStyleUnit
:units="node"
v-for="node in displayDetail.exhibitionUnits"
:key="node.euId"
/>
<ChStyleUnit :units="node" v-for="node in displayDetail.exhibitionUnits" :key="node.euId" />
</div>
</div>
<div class="content-item lts">
......@@ -179,41 +137,18 @@
</div>
</div>
<div
class="lts-content"
v-if="
<div class="lts-content" v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0
"
>
">
<div class="wrapper wow animate__animated animate__fadeInUp">
<el-table
:data="displayDetail.literatureVo"
:header-cell-style="{
<el-table :data="displayDetail.literatureVo" :header-cell-style="{
background: '#eeeeee',
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)">
......@@ -226,36 +161,28 @@
</div>
</div>
</div>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
<el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" />
<div class="unit-detail-full" v-if="unitVisible">
<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>
<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 "./ChStyle-unit.vue";
import DetailDialog from "./detail-dialog.vue";
export default {
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 "./ChStyle-unit.vue";
import DetailDialog from "./detail-dialog.vue";
export default {
components: {
AudioPlayer,
ReaderOperations,
......@@ -456,30 +383,34 @@ export default {
this.$emit("reload");
},
},
};
};
</script>
<style lang="scss" scoped>
// 中国风主题样式
/**公共样式开始 */
.wrapper {
// 中国风主题样式
/**公共样式开始 */
.wrapper {
// width: 1200px;
width: calc(100% - 26%); //左右两边各自留13%
}
.custom-title {
}
.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;
......@@ -487,15 +418,18 @@ export default {
color: #0f0f0f;
line-height: 114px;
}
}
/**公共样式结束 */
}
/**公共样式结束 */
/**样式开始 */
.display-detail {
/**样式开始 */
.display-detail {
overflow: hidden;
.content {
width: 100%;
overflow: hidden;
.content-item {
width: 100%;
}
......@@ -508,14 +442,17 @@ export default {
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 {
......@@ -523,6 +460,7 @@ export default {
height: 100%;
position: relative;
margin-right: 1px;
img {
width: 300px;
height: 100%;
......@@ -540,16 +478,19 @@ export default {
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;
......@@ -572,6 +513,7 @@ export default {
padding: 50px;
position: relative;
border: 1px solid #d3d3d37a;
.title {
font-size: 50px;
font-family: KaiTi;
......@@ -581,35 +523,43 @@ export default {
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: 280px;
}
......@@ -621,10 +571,13 @@ export default {
border: 1px dashed #b1b0af;
margin: 42px 0;
}
.intro-and-video {
display: flex;
.intro-container {
flex: 1;
.intro-title {
font-size: 40px;
font-family: KaiTi;
......@@ -632,6 +585,7 @@ export default {
color: #0f0f0f;
margin-bottom: 43px;
position: relative;
&::after {
content: "";
display: inline-block;
......@@ -643,6 +597,7 @@ export default {
bottom: -12px;
}
}
.intro-content {
font-size: 16px;
font-family: Microsoft YaHei;
......@@ -653,6 +608,7 @@ export default {
margin-left: 8px;
}
}
.videos {
flex: 1;
position: relative;
......@@ -676,9 +632,11 @@ export default {
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;
......@@ -691,6 +649,7 @@ export default {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
......@@ -700,6 +659,7 @@ export default {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
......@@ -707,7 +667,8 @@ export default {
.animation-play-paused {
animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari 和 Chrome */
-webkit-animation-play-state: paused;
/* Safari 和 Chrome */
}
/**展览单元 */
......@@ -716,10 +677,12 @@ export default {
display: flex;
flex-direction: column;
align-items: center;
.units-content {
ul {
li {
margin-bottom: 20px;
.unit-title {
font-size: 36px;
font-family: KaiTi;
......@@ -729,6 +692,7 @@ export default {
display: flex;
justify-content: center;
}
.unit-intro {
font-size: 16px;
font-family: Microsoft YaHei;
......@@ -737,10 +701,13 @@ export default {
text-indent: 36px;
margin-bottom: 10px;
}
.unit-imgs {
width: 100%;
.img-item {
width: 100%;
img {
width: 100%;
}
......@@ -750,6 +717,7 @@ export default {
}
}
}
/**关联文献 */
.lts {
// background-color: aquamarine;
......@@ -757,6 +725,7 @@ export default {
flex-direction: column;
align-items: center;
margin-top: 100px;
.lts-content {
display: flex;
justify-content: center;
......@@ -767,25 +736,30 @@ export default {
}
}
}
}
.right {
}
.right {
float: right;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
a {
font-size: 22px;
}
.clearfix {
clear: both;
}
a:hover {
cursor: pointer;
color: #2069c4;
}
}
.unit-detail-full {
}
.unit-detail-full {
position: fixed;
top: 0;
left: 0;
......@@ -793,27 +767,32 @@ export default {
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 99;
> i {
>i {
color: #fff;
font-size: 24px;
position: absolute;
top: 20px;
right: 20px;
z-index: 10;
&:hover {
cursor: pointer;
}
}
}
::v-deep .el-carousel {
}
::v-deep .el-carousel {
height: 100%;
}
::v-deep .el-carousel__container {
}
::v-deep .el-carousel__container {
height: 100%;
}
::v-deep .el-carousel__item--card {
}
::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/ChStyleUnit.vue deleted 100644 → 0
浏览文件 @ e4bf2144
<!-- -->
<template>
<div class="units-content">
<div class="units-content-item" v-for="(unit, index) in units" :key="index">
<div class="unit-title">{{ unit.title }}</div>
<div class="unit-intro">{{ unit.intro }}</div>
<div class="unit-imgs" v-if="unit.imagesVo && unit.imagesVo.length > 0">
<div class="img-item" v-for="(i, idx) in unit.imagesVo" :key="idx">
<img :src="$getFullUrl(i.pressUrl||i.url)" />
</div>
</div>
<ChStyleUnit
:units="unit.children"
v-if="unit.children && unit.children.length > 0"
/>
</div>
</div>
</template>
<script>
export default {
name: "ChStyleUnit",
props: {
units: {
type: Array,
default: () => [],
},
},
};
</script>
<style lang="scss" scoped>
.units-content-item {
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;
line-height: 32px;
}
.unit-imgs {
width: 100%;
.img-item {
width: 100%;
img {
width: 100%;
}
}
}
}
</style>
src/views/display/components/RedStyle.vue
浏览文件 @ 011391ed
......@@ -140,7 +140,7 @@
<div class="wrapper">
<div class="custom-title">展览简介</div>
<div class="intro-content">
<div class="intro-content-container">{{ displayDetail.intro }}</div>
<div class="intro-content-container" v-html="displayDetail.intro"></div>
</div>
<div
class="intro-video"
......@@ -201,7 +201,7 @@
</div>
<div class="unit-name-intro" v-if="i == 0">
<div class="unit-name">{{ currentUnit.title }}</div>
<div class="unit-intro">{{ currentUnit.intro }}</div>
<div class="unit-intro" v-html="currentUnit.intro "></div>
</div>
</el-col>
</el-row>
......
src/views/display/components/detail-dialog.vue
浏览文件 @ 011391ed
<template>
<div class="detail-book">
<div v-if="list.length > 0">
<div
class="book-page"
v-for="(node, i) in list"
:key="i"
:class="{ active: i === activePage, flipped: i < activePage }"
>
<div
class="article-title"
@click="handlePageChange(i, true)"
v-if="node.imagesVo[0]"
>
<div
class="img"
:style="`background-image: url('${node.imagesVo[0] &&node.imagesVo[0].url}')`"
></div>
<div class="book-page" v-for="(node, i) in list" :key="i"
:class="{ active: i === activePage, flipped: i < activePage }">
<div class="article-title" @click="handlePageChange(i, true)" v-if="node.imagesVo[0]">
<div class="img" :style="`background-image: url('${node.imagesVo[0] &&node.imagesVo[0].url}')`"></div>
<p>
<span class="title">{{ node.title }}</span>
<span class="seq">{{ node.unit }}</span>
......@@ -35,12 +24,12 @@
</p>
</div>
<div class="article-content" v-else @click="handlePageChange(i)">
<div class="content-detail">{{ list[i - 1].intro }}</div>
<div class="content-detail" v-html="list[i - 1].intro "></div>
</div>
</div>
<div class="book-page">
<div class="article-content">
<div class="content-detail">{{ list[list.length - 1].intro }}</div>
<div class="content-detail" v-html="list[list.length - 1].intro"></div>
</div>
</div>
</div>
......@@ -48,7 +37,7 @@
</template>
<script>
export default {
export default {
props: {
data: {
type: Array,
......@@ -99,17 +88,18 @@ export default {
return list;
},
},
};
};
</script>
<style lang="scss" scoped>
.detail-book {
.detail-book {
position: relative;
width: 100%;
height: 100%;
min-height: 800px;
perspective: 1000px;
> div {
>div {
// position: absolute;
position: absolute;
// width: 800px;
......@@ -124,6 +114,7 @@ export default {
box-shadow: 0px -5px 0 2px #8f712fdb;
} */
}
.book-page {
position: absolute;
// width: 800px;
......@@ -134,14 +125,17 @@ export default {
transform-origin: 0 0;
border-left: 2px solid #8f712fdb;
box-shadow: 6px 6px 0 2px #8f712fdb;
&.active {
z-index: 1;
}
&.flipped {
// z-index: 1;
transform: rotateY(-180deg);
}
> div {
>div {
position: absolute;
width: 100%;
height: 100%;
......@@ -149,6 +143,7 @@ export default {
backface-visibility: hidden;
background-color: #bfa277;
}
.book-cover {
display: flex;
justify-content: space-between;
......@@ -157,7 +152,7 @@ export default {
width: 100%;
height: 100%;
> .img {
>.img {
width: 600px;
height: 400px;
background-size: cover;
......@@ -165,19 +160,23 @@ export default {
background-position: 50% 50%;
margin: 50px auto;
}
> p {
>p {
display: flex;
> span {
>span {
display: block;
text-align: center;
font-size: 22px;
font-weight: 600;
font-family: "楷体";
writing-mode: tb-rl;
&.title {
color: #850e0e;
font-size: 30px;
}
&.seq {
padding-bottom: 100px;
margin-left: 20px;
......@@ -185,31 +184,38 @@ export default {
}
}
}
.article-title {
@extend .book-cover;
transform: rotateY(180deg);
> .img {
>.img {
border-radius: 10px;
}
}
.article-big-title {
display: flex;
justify-content: center;
align-items: center;
transform: rotateY(180deg);
> p {
>p {
font-size: 36px;
text-align: center;
font-family: "华文行楷";
> span {
>span {
display: block;
margin: 20px;
&.title {
color: #fff2b3;
}
}
}
}
.article-content {
width: 100%;
height: 100%;
......@@ -221,5 +227,5 @@ export default {
text-indent: 32px;
}
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论