Skip to content

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

优化中国风主题

上级 b17a76fe
显示空白字符变更
内嵌 并排
正在显示 包含 280 行增加 和 117 行删除
src/views/display/components/ChStyle.vue
浏览文件 @ 5f6fa9cb
<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>
......@@ -57,9 +69,7 @@
<el-col class="item" v-if="dicts.displayCharacter">
<div class="label">展览性质：</div>
<div class="value">
{{
dicts.displayCharacter[displayDetail.displayCharacter]
}}
{{ dicts.displayCharacter[displayDetail.displayCharacter] }}
</div>
</el-col>
<el-col class="item">
......@@ -69,40 +79,66 @@
</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" v-html="displayDetail.intro">
</div>
<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">
......@@ -116,15 +152,24 @@
<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" />
<ChStyleUnit
:units="node"
v-for="node in displayDetail.exhibitionUnits"
:key="node.euId"
/>
</div>
</div>
<div class="content-item lts">
<div
class="content-item lts"
v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0
"
>
<div class="wrapper">
<div class="custom-title wow animate__animated animate__fadeInUp">
<div class="custom-title-prefix">
......@@ -137,18 +182,36 @@
</div>
</div>
<div class="lts-content" v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0
">
<div class="lts-content">
<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)">
......@@ -161,28 +224,36 @@
</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 "./ChStyleUnit.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 "./ChStyleUnit.vue";
import DetailDialog from "./detail-dialog.vue";
export default {
components: {
AudioPlayer,
ReaderOperations,
......@@ -220,6 +291,7 @@
},
async mounted() {
this.loadDetail();
},
destroyed() {
//同时在destroyed回调中移除监听：
......@@ -246,8 +318,8 @@
this.loadWidth();
if (
this.displayDetail.videosVo &&
this.displayDetail.videosVo.length > 0
this.displayDetail.audiosVo &&
this.displayDetail.audiosVo.length > 0
) {
this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
this.$refs.AudioPlayer.play();
......@@ -288,6 +360,7 @@
addEventListener("DOMMouseScroll", this.firefoxListenFun, false);
}
},
firefoxListenFun(e) {
var obj = e.target;
var onmousewheel;
......@@ -382,19 +455,23 @@
reload() {
this.$emit("reload");
},
handleMouseEnter(e) {
console.log(e);
},
};
},
};
</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;
......@@ -418,14 +495,14 @@
color: #0f0f0f;
line-height: 114px;
}
}
}
/**公共样式结束 */
/**公共样式结束 */
/**样式开始 */
.display-detail {
/**样式开始 */
.display-detail {
overflow: hidden;
padding-bottom: 60px;
.content {
width: 100%;
overflow: hidden;
......@@ -515,7 +592,7 @@
border: 1px solid #d3d3d37a;
.title {
font-size: 50px;
font-size: 40px;
font-family: KaiTi;
font-weight: bold;
color: #0f0f0f;
......@@ -561,7 +638,7 @@
}
.tools {
width: 280px;
width: 300px;
}
}
......@@ -736,9 +813,9 @@
}
}
}
}
}
.right {
.right {
float: right;
position: absolute;
right: 0;
......@@ -757,9 +834,9 @@
cursor: pointer;
color: #2069c4;
}
}
}
.unit-detail-full {
.unit-detail-full {
position: fixed;
top: 0;
left: 0;
......@@ -768,7 +845,7 @@
background-color: rgba(0, 0, 0, 0.6);
z-index: 99;
>i {
> i {
color: #fff;
font-size: 24px;
position: absolute;
......@@ -780,19 +857,19 @@
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
浏览文件 @ 5f6fa9cb
<template>
<div class="units-content">
<p>{{ units.title }}</p>
<ul>
<div class="units-content-intro" v-html="units.intro">
</div>
<ul v-if="units.children && units.children.length > 0">
<li
v-for="(item, index) in units.children"
:key="index"
......@@ -30,7 +32,12 @@
class="img-item"
v-if="item.imagesVo && item.imagesVo.length > 0"
>
<img :src="$getFullUrl(item.imagesVo[0].pressUrl || item.imagesVo[0].url)" alt="" />
<img
:src="
$getFullUrl(item.imagesVo[0].pressUrl || item.imagesVo[0].url)
"
alt=""
/>
</div>
</div>
<div class="unit-content">
......@@ -41,7 +48,8 @@
</div>
<div class="units-title">
<p>
<span v-html="changeTitle(item.title)"></span>
<!-- <span v-html="changeTitle(item.title)"></span> -->
<span v-html="item.title" style="writing-mode: vertical-rl;"></span>
</p>
<span></span>
</div>
......@@ -79,16 +87,28 @@ export default {
<style lang="scss" scoped>
.units-content {
margin: 100px 0;
> p {
font-size: 32px;
font-weight: 600;
text-align: center;
font-family: "华文行楷";
font-family: "KaiTi";
margin-bottom: 60px;
}
.units-content-intro{
font-size: 16px;
color: #333;
text-indent: 32px;
line-height: 2.5;
}
ul {
display: flex;
flex-wrap: nowrap;
overflow: auto;
border: 3px solid rgb(139 123 90);
box-shadow: 9px 20px 10px rgb(0 0 0 / 30%);
height: 660px;
li {
// margin-bottom: 20px;
width: calc(var(--i) * 100%);
......@@ -96,11 +116,13 @@ export default {
overflow: hidden;
// flex-shrink: 0;
position: relative;
height: 100%;
&.active {
width: 100%;
flex-shrink: 0;
> .unit-node {
width: 100%;
filter: none;
/* > .unit-imgs {
width: 100%;
......@@ -130,20 +152,23 @@ export default {
line-height: 83px;
display: flex;
justify-content: center;
width: 76%;
line-height: 1.2;
}
.unit-intro {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
// color: #444444;
color: #e2e2e2;
color: #333;
// color: #e2e2e2;
text-indent: 36px;
// margin-bottom: 10px;
// margin-top: 20px;
line-height: 1.8;
}
.unit-imgs {
width: 100%;
// width: 100%;
width: 50%;
// width: 500px;
height: 100%;
flex-shrink: 0;
......@@ -153,10 +178,11 @@ export default {
display: flex;
justify-content: center;
align-items: center;
// height: 100%;
height: 100%;
img {
width: 100%;
// height: 100%;
height: 100%;
object-fit: cover;
transition: 0.6s;
}
}
......@@ -164,7 +190,8 @@ export default {
.unit-node {
width: 1200px;
// width: calc(100vw - 26%);
height: 550px;
// width: 100%;
height: 100%;
display: flex;
overflow: hidden;
transition: 0.6s;
......@@ -181,12 +208,17 @@ export default {
right: 0;
width: 50%;
height: 100%;
// background-image: linear-gradient(
// to right,
// rgba(0, 0, 0, 0) 0%,
// rgba(0, 0, 0, 0.7) 40%
// );
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.7) 40%
rgba(171, 147, 94, 0.3) 0%,
rgba(171, 147, 94, 0.7) 40%
);
> .unit-title {
position: absolute;
top: 100px;
......@@ -209,16 +241,23 @@ export default {
height: 100%;
transition: 0.6s;
> p {
color: #fff;
// color: #6e4e06;
color: #000;
position: absolute;
left: 0;
top: 0;
margin: 0;
font-size: 28px;
font-family: "楷体";
padding: 16px;
padding: 46px 16px;
height: calc(100% - 32px);
box-shadow: 10px 0px 21px 0 #9b7e3f inset;
// box-shadow: 40px 0px 40px 0 #9b7e3f inset;
box-shadow: #9b7e3f 44px 24px 57px 10px inset;;
// background-color: rgba(155, 126, 63, 0.8);
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
}
}
......
src/views/display/components/detail-dialog.vue
浏览文件 @ 5f6fa9cb
<template>
<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].pressUrl
}')`"
></div>
<p>
<span class="title">{{ node.title }}</span>
<span class="seq">{{ node.unit }}</span>
</p>
</div>
<div class="article-big-title" v-else @click="handlePageChange(i, true)">
<div
class="article-big-title"
v-else
@click="handlePageChange(i, true)"
>
<!-- <div class="page-button prev">上一页</div> -->
<p>
<span class="seq">{{ node.unit }}</span>
<span class="title">{{ node.title }}</span>
</p>
</div>
<div class="book-cover" v-if="i === 0" @click="handlePageChange(i)">
<div class="img" :style="`background-image: url('${img}')`">
</div>
<div class="img" :style="`background-image: url('${img}')`"></div>
<p>
<span>{{ title }}</span>
</p>
</div>
<div class="article-content" v-else @click="handlePageChange(i)">
<div class="content-detail" v-html="list[i - 1].intro "></div>
<!-- <div class="page-button next">下一页</div> -->
<div class="content-detail" v-html="list[i - 1].intro"></div>
</div>
</div>
<div class="book-page">
<div class="article-content">
<div class="content-detail" v-html="list[list.length - 1].intro"></div>
<div
class="content-detail"
v-html="list[list.length - 1].intro"
></div>
</div>
</div>
</div>
......@@ -37,7 +58,7 @@
</template>
<script>
export default {
export default {
props: {
data: {
type: Array,
......@@ -87,23 +108,23 @@
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;
width: 48%;
height: 600px;
height: 70vh;
top: 50%;
left: 50%;
transform: translate(0%, -50%);
......@@ -134,7 +155,7 @@
transform: rotateY(-180deg);
}
>div {
> div {
position: absolute;
width: 100%;
height: 100%;
......@@ -147,23 +168,25 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px;
padding: 40px 30px;
width: 100%;
height: 100%;
>.img {
width: 600px;
height: 400px;
> .img {
// width: 600px;
// height: 400px;
width: 80%;
height: 80%;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
margin: 50px auto;
}
>p {
> p {
display: flex;
>span {
> span {
display: block;
text-align: center;
font-size: 22px;
......@@ -188,8 +211,8 @@
@extend .book-cover;
transform: rotateY(180deg);
>.img {
border-radius: 10px;
> .img {
// border-radius: 10px;
}
}
......@@ -198,13 +221,13 @@
justify-content: center;
align-items: center;
transform: rotateY(180deg);
>p {
// position: relative;
> p {
font-size: 36px;
text-align: center;
font-family: "华文行楷";
>span {
> span {
display: block;
margin: 20px;
......@@ -224,7 +247,29 @@
font-weight: 600;
font-family: "仿宋";
text-indent: 32px;
overflow-y: auto;
.content-detail {
font-size: 20px;
}
}
}
}
.page-button {
font-size: 24px;
padding: 10px 20px;
border-radius: 30px;
border: 1px solid #fff2b3;
color: #fff2b3;
cursor: pointer;
position: relative;
}
.prev {
left: -7vw;
bottom: -29vh;
}
.next {
right: -7vw;
bottom: -29vh;
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论