Skip to content

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

布展介绍和单元修改为支持富文本字符串、浏览器自适应适配

上级 b8a9d4c9
隐藏空白字符变更
内嵌 并排
正在显示 包含 121 行增加 和 615 行删除
src/main.js
浏览文件 @ d0d69782
...@@ -18,7 +18,7 @@ import { ...@@ -18,7 +18,7 @@ import {
getFullUrl getFullUrl
} from '@/utils/index' } from '@/utils/index'
import './permission' import './permission'
// import '@/rem' import '@/rem'
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(ElementUI); Vue.use(ElementUI);
......
src/views/display/components/BlueStyle.vue
浏览文件 @ d0d69782
...@@ -12,7 +12,11 @@ ...@@ -12,7 +12,11 @@
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
> >
<el-image <el-image
:src="$getFullUrl(displayDetail.faceImagePressUrl || displayDetail.faceImageUrl)" :src="
$getFullUrl(
displayDetail.faceImagePressUrl || displayDetail.faceImageUrl
)
"
fit="cover" fit="cover"
></el-image> ></el-image>
</div> </div>
...@@ -27,7 +31,7 @@ ...@@ -27,7 +31,7 @@
animate__animated animate__fadeInLeft animate__animated animate__fadeInLeft
" "
> >
<swiper :options="swiperOption" ref="mySwiper"> <!-- <swiper :options="swiperOption" ref="mySwiper">
<swiper-slide <swiper-slide
v-for="(item, index) in displayDetail.imagesVo" v-for="(item, index) in displayDetail.imagesVo"
:key="index" :key="index"
...@@ -40,9 +44,29 @@ ...@@ -40,9 +44,29 @@
</div> </div>
</swiper-slide> </swiper-slide>
<div class="swiper-pagination" slot="pagination"></div> <div class="swiper-pagination" slot="pagination"></div>
<!-- <div class="swiper-button-prev" slot="button-prev"></div> --> <div class="swiper-button-prev" slot="button-prev"></div>
<!-- <div class="swiper-button-next" slot="button-next"></div> --> <div class="swiper-button-next" slot="button-next"></div>
</swiper> </swiper> -->
<el-carousel>
<el-carousel-item
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
class="imagesVo-image-container"
>
<div
class="img-container"
@click="handelPreviewImages(displayDetail.imagesVo)"
>
<img :src="item.url" alt="点击查看大图" srcset="" />
</div>
<div
class="enlarge"
@click="handelPreviewImages(displayDetail.imagesVo)"
>
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
</el-carousel-item>
</el-carousel>
</div> </div>
<div <div
class=" class="
...@@ -206,15 +230,47 @@ ...@@ -206,15 +230,47 @@
></menu-list> ></menu-list>
</div> </div>
<div class="unit-content wow animate__animated animate__fadeInRight"> <div class="unit-content wow animate__animated animate__fadeInRight">
<div class="text-indent unit-content_intro" v-if="curUnit.intro"> <div
{{ curUnit.intro }} class="text-indent unit-content_intro"
v-if="curUnit.intro"
v-html="curUnit.intro"
>
<!-- {{ curUnit.intro }} -->
</div> </div>
<div <div
class="unit-content_images" class="unit-content_images"
v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0" v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0"
> >
<el-row :gutter="20"> <el-carousel
<el-col indicator-position="outside"
:autoplay="false"
height="600px"
:loop="false"
>
<el-carousel-item
v-for="item in curUnit.imagesVo"
:key="item.euId"
>
<div class="unit-content_images_container">
<el-image
:src="$getFullUrl(item.pressUrl)"
fit="contain"
class="images_img"
></el-image>
<div
class="enlarge"
@click="handelPreviewImages(curUnit.imagesVo)"
>
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
<div class="desc">
{{ item.name.split(".")[0] }}
</div>
</div>
</el-carousel-item>
</el-carousel>
<!-- <el-col
:span="24 / curUnit.imagesVo.length" :span="24 / curUnit.imagesVo.length"
v-for="item in curUnit.imagesVo" v-for="item in curUnit.imagesVo"
:key="item.euId" :key="item.euId"
...@@ -231,8 +287,7 @@ ...@@ -231,8 +287,7 @@
<div class="unit-content_images_desc"> <div class="unit-content_images_desc">
{{ item.name }} {{ item.name }}
</div> </div>
</el-col> </el-col> -->
</el-row>
</div> </div>
<div <div
class="unit-content_videos" class="unit-content_videos"
...@@ -618,13 +673,35 @@ export default { ...@@ -618,13 +673,35 @@ export default {
.divider { .divider {
flex: 1; flex: 1;
height: 6px; height: 6px;
background: url("@/assets/imgs/display/normal/divider.png") 100% 100% repeat-x; background: url("@/assets/imgs/display/normal/divider.png") 100% 100%
repeat-x;
img { img {
width: 100%; width: 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;
img {
width: 24px;
height: 24px;
}
}
/**公共样式结束 */ /**公共样式结束 */
/**样式开始 */ /**样式开始 */
...@@ -667,14 +744,17 @@ export default { ...@@ -667,14 +744,17 @@ export default {
margin-right: 50px; margin-right: 50px;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
.img-container { .imagesVo-image-container {
height: 280px; // position: relative;
width: 100%; .img-container {
} height: 280px;
img { width: 100%;
width: 100%; img {
height: 100%; width: 100%;
object-fit: cover; height: 100%;
object-fit: cover;
}
}
} }
} }
.info-container-right { .info-container-right {
...@@ -841,30 +921,20 @@ export default { ...@@ -841,30 +921,20 @@ export default {
text-indent: 32px; text-indent: 32px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.unit-content_images_container { .unit-content_images {
position: relative; position: relative;
.unit-content_images_desc { .unit-content_images_container {
display: flex; height: 100%;
justify-content: center;
}
.enlarge {
position: absolute;
bottom: 60px;
right: 40px;
display: flex;
z-index: 9;
background-color: #c1925b;
width: 40px;
height: 40px;
border-radius: 12px;
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: center; .images_img {
margin-right: 10px; flex: 1;
cursor: pointer; }
img { .desc {
width: 24px; display: flex;
height: 24px; justify-content: center;
height: 40px;
align-items: center;
} }
} }
} }
......
src/views/display/components/NormalStyle.vue deleted 100644 → 0
浏览文件 @ b8a9d4c9
<!-- -->
<template>
<div class="display-detail">
<div class="wrapper">
<div class="back" @click="handleBack">
<svg-icon icon-class="mz-fh"></svg-icon>
<span>返回上页 </span>
</div>
<el-row class="detail-container" :gutter="60">
<el-col class="cr-images" :span="16">
<el-carousel
indicator-position="outside"
:autoplay="false"
height="600px"
>
<el-carousel-item
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
>
<el-image
style="width: 100%; height: 100%"
:src="$getFullUrl(item.pressUrl || item.url)"
fit="contain"
></el-image>
</el-carousel-item>
</el-carousel>
<div
class="enlarge"
@click="handelPreviewImages(displayDetail.imagesVo)"
>
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
</el-col>
<el-col class="relic-info" :span="8">
<div class="info-title">
<div class="title">
<h4>
{{ displayDetail.title }}
</h4>
<span class="view-container">
<svg-icon icon-class="view" class="view-svg-icon"></svg-icon>
<span class="view-text">{{ displayDetail.browseCount }}</span>
</span>
</div>
<NormalPlayer
:fileurl="$getFullUrl(displayDetail.audiosVo[0].url)"
ref="AudioPlayer"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
/>
</div>
<div class="info-body">
<div class="basic-info">
<div class="body-item">
<span class="label">关键词</span>
<span class="value">{{ displayDetail.keyword }}</span>
</div>
<div class="body-item">
<span class="label">展览类型</span>
<span class="value">{{
dicts.display_type[displayDetail.type]
}}</span>
</div>
<div class="body-item">
<span class="label">展览性质</span>
<span class="value">{{
dicts.display_character[displayDetail.displayCharacter]
}}</span>
</div>
<div class="body-item">
<span class="label">展览单位</span>
<span class="value">{{ displayDetail.deptName }}</span>
</div>
</div>
</div>
<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"
/>
</el-col>
</el-row>
<div class="margin-bottom-32 intro">
<CustomTitle text="展览介绍" />
<div class="text-indent intro_text">
{{ displayDetail.intro }}
</div>
</div>
<div
class="margin-bottom-32 unit"
v-if="
displayDetail.exhibitionUnits &&
displayDetail.exhibitionUnits.length > 0
"
>
<CustomTitle text="展览单元" />
<el-row :gutter="40">
<el-col :span="8">
<!-- 只能单开 unique-opened -->
<menu-list
:items="displayDetail.exhibitionUnits"
:isCollapse="false"
@open="handleOpenUnit"
></menu-list>
</el-col>
<el-col :span="16" class="unit-content">
<div class="text-indent unit-content_intro" v-if="curUnit.intro">
{{ curUnit.intro }}
</div>
<div
class="unit-content_images"
v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0"
>
<el-row :gutter="20">
<el-col
:span="24 / curUnit.imagesVo.length"
v-for="item in curUnit.imagesVo"
:key="item.euId"
class="margin-bottom-32 unit-content_images_container"
>
<img
:src="$getFullUrl(item.pressUrl || item.url)"
width="100%"
/>
<div
class="enlarge"
@click="handelPreviewImages(curUnit.imagesVo)"
>
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
<div class="unit-content_images_desc">
{{ item.name }}
</div>
</el-col>
</el-row>
</div>
<div
class="unit-content_videos"
v-if="curUnit.videosVo && curUnit.videosVo.length > 0"
>
<el-row :gutter="20">
<el-col
:span="24 / curUnit.videosVo.length"
v-for="item in curUnit.videosVo"
:key="item.euId"
>
<Video :url="$getFullUrl(item.url)" />
</el-col>
</el-row>
</div>
</el-col>
</el-row>
</div>
<div
class="margin-bottom-32"
v-if="
displayDetail.culturalRelicVo &&
displayDetail.culturalRelicVo.length > 0
"
>
<CustomTitle text="关联文物" />
<el-row :gutter="20">
<el-col
:span="6"
v-for="(item, index) in displayDetail.culturalRelicVo"
:key="index"
>
<Card
:title="item.name"
:url="$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)"
/></el-col>
</el-row>
</div>
<div
class="relate-video margin-bottom-32"
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
>
<CustomTitle text="关联视频" />
<el-carousel :interval="4000" type="card" height="400px">
<el-carousel-item
v-for="item in displayDetail.videosVo"
:key="item.fileId"
>
<div class="video-container">
<div class="video-box">
<Video :url="$getFullUrl(item.url)" />
</div>
<div class="info-box">
<h4 class="name">{{ item.name.split(".")[0] }}</h4>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
<div class="relate-book margin-bottom-32">
<CustomTitle text="相关文献" />
<div
class="book-item"
v-for="(item, index) in displayDetail.literatureVo"
:key="index"
>
<span class="mr-20">{{ item.name }}</span>
<span class="mr-20">{{ item.author }}</span>
<span>{{ item.source }}</span>
</div>
</div>
<!-- <div class="relate-cultual-relic margin-bottom-32">
<CustomTitle text="关联文物" />
<div class="display-group">
<div
class="display-item"
v-for="(item, index) in relateRelics"
:key="index"
@click="handleToDetail(item.exhibitionId)"
>
<img :src="item.faceImageUrl" width="100%" :alt="item.title" />
<div class="display-desc">
<div class="desc-title">
<h4>{{ item.name }}</h4>
</div>
</div>
</div>
</div>
</div> -->
</div>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
</div>
</template>
<script>
import AudioPlayer from "@/components/AudioPlayer";
import CustomTitle from "@/components/CustomTitle";
import ReaderOperations from "@/components/ReaderOperations";
import Card from "@/views/personal/components/Card";
import Video from "@/components/Video";
import QRCode from "qrcodejs2";
import MenuList from "@/components/MenuList";
import NormalPlayer from "@/components/AudioPlayer/NormalPlayer.vue";
export default {
components: {
CustomTitle,
AudioPlayer,
ReaderOperations,
MenuList,
Video,
Card,
NormalPlayer,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
props: {
displayDetail: {
type: Object,
default: () => ({}),
},
dicts: {
type: Object,
default: () => ({}),
},
},
data() {
return {
imgViewerVisible: false,
relateRelics: [],
curUnit: [],
imgList: [],
};
},
mounted() {
// this.creatQrCode();
this.loadDetail();
},
methods: {
creatQrCode() {
this.$nextTick(() => {
var qrcode = new QRCode(this.$refs.qrCodeUrl, {
text: "http://www.gzmuseum.com/", // 需要转换为二维码的内容
width: 100,
height: 100,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H,
});
});
},
async loadDetail() {
if (
this.displayDetail.exhibitionUnits &&
this.displayDetail.exhibitionUnits.length > 0
) {
this.curUnit = this.displayDetail.exhibitionUnits[0];
}
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);
}
}
}
}
this.$nextTick(() => {
// this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
// this.$refs.AudioPlayer.play();
});
},
handleBack() {
this.$router.go(-1);
},
closeImgViewer() {
this.imgViewerVisible = false;
},
handelPreviewImages(images) {
this.imgViewerVisible = true;
this.imgList = images.map((item) => this.$getFullUrl(item.url));
},
handleToDetail(exhibitionId) {
console.log(crId);
this.$router.replace({ name: "displayDetail", params: { exhibitionId } });
},
handleOpenUnit(item) {
this.curUnit = item;
},
reload() {
this.$emit("reload");
},
},
};
</script>
<style lang="scss" scoped>
$label: #9f9c9a;
/**公共样式 */
.enlarge {
position: absolute;
bottom: 60px;
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;
img {
width: 24px;
height: 24px;
}
}
.search {
width: 1200px;
margin: auto;
margin-bottom: 32px;
}
.wrapper {
width: 1200px;
margin: 60px auto;
background-color: #fff;
padding: 60px;
// 返回按钮
.back {
font-size: 18px;
display: flex;
align-items: center;
color: $label;
cursor: pointer;
.svg-icon {
font-size: 28px;
margin-right: 10px;
}
span {
font-size: 16px;
}
}
// 描述框
.detail-container {
margin-bottom: 32px;
// display: flex;
img {
max-width: 100%;
height: auto;
}
.cr-images {
width: 700px;
// margin-right: 32px;
position: relative;
.el-image {
background-color: #f5f5f9;
}
}
.relic-info.el-col {
padding-right: 0 !important;
.info-title {
display: flex;
// align-items: center;
flex-direction: column;
margin-bottom: 40px;
.title {
display: flex;
align-items: center;
justify-content: space-between;
}
.play {
margin-left: 10px;
font-size: 32px;
cursor: pointer;
}
}
.info-body {
display: flex;
justify-content: space-between;
align-items: flex-end;
.basic-info {
.body-item {
display: flex;
.label {
display: block;
width: 80px;
margin-right: 26px;
margin-bottom: 10px;
font-weight: bold;
color: #9f9c9a;
}
}
}
}
}
.title-container {
display: flex;
justify-content: center;
position: relative;
.operation {
position: absolute;
right: 0;
display: flex;
align-items: center;
height: 100%;
}
}
.content {
text-indent: 32px;
}
}
// 展览介绍
.intro {
.intro_text {
line-height: 30px;
}
}
// 布展单元
.unit {
.unit-content {
line-height: 30px;
.unit-content_intro {
margin-bottom: 20px;
}
.unit-content_images {
.unit-content_images_container {
position: relative;
}
.unit-content_images_desc {
display: flex;
justify-content: center;
}
}
}
}
// 关联文献
.relate-book {
.book-item {
margin-bottom: 10px;
}
}
// 关联文物
.relate-cultual-relic {
.display-group {
margin-top: 24px;
display: flex;
flex-flow: row wrap;
.display-item {
width: 282px;
margin-bottom: 32px;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.1);
// padding: 0 0 32px 0;
background-color: #fff;
margin-right: 10px;
cursor: pointer;
img {
border-radius: 16px 16px 0 0;
}
.display-desc {
padding: 0 16px;
.desc-content {
text-indent: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
}
.display-source {
margin-top: 8px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
}
}
}
}
// 关联视频
.relate-video {
.video-container {
display: flex;
flex-direction: column;
align-items: center;
.video-box {
display: flex;
justify-content: center;
border: 1px solid #000;
video {
width: 800px;
}
}
.info-box {
width: 800px;
display: flex;
justify-content: space-between;
}
}
}
}
.text-indent {
text-indent: 28px;
}
.margin-bottom-32 {
margin-bottom: 32px;
}
</style>
src/views/display/index.vue
浏览文件 @ d0d69782
...@@ -440,14 +440,21 @@ $text-indent: 16px; ...@@ -440,14 +440,21 @@ $text-indent: 16px;
align-items: flex-end; align-items: flex-end;
justify-content: space-between; justify-content: space-between;
.left { .left {
flex: 1;
.deptName { .deptName {
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
color: #444444; color: #444444;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
} }
} }
.right { .right {
color: #858484; color: #858484;
width: 120px;
.collect { .collect {
margin-right: 10px; margin-right: 10px;
} }
...@@ -479,7 +486,6 @@ $text-indent: 16px; ...@@ -479,7 +486,6 @@ $text-indent: 16px;
font-weight: bold; font-weight: bold;
} }
::v-deep .el-input, ::v-deep .el-input,
.el-cascader { .el-cascader {
.el-input__inner { .el-input__inner {
...@@ -503,7 +509,7 @@ $text-indent: 16px; ...@@ -503,7 +509,7 @@ $text-indent: 16px;
} }
::v-deep .el-input { ::v-deep .el-input {
width: auto !important;; width: auto !important;
} }
::v-deep .el-pager { ::v-deep .el-pager {
li { li {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论