Skip to content

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

修改红色主题照片和单元

上级 363afe6d
隐藏空白字符变更
内嵌 并排
正在显示 包含 310 行增加 和 112 行删除
src/views/display/components/RedStyle.vue
浏览文件 @ 9fc7f496
......@@ -18,11 +18,12 @@
</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-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" id="faceImage"
v-else-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" id="faceImage"
:src="$getFullUrl(displayDetail.imagesVo[0].pressUrl)" />
<img id="faceImage" v-else-if="displayDetail.faceImagePressUrl" class="animate__animated animate__fadeInDownBig"
:src="$getFullUrl(displayDetail.faceImagePressUrl)" />
</div>
<!-- 展览基本信息 -->
<div class="
......@@ -54,7 +55,12 @@
</div>
<div class="info-container">
<div class="info-container-left">
<el-carousel>
<SlideImage :imgList="displayDetail.imagesVo" v-if="
displayDetail.imagesVo && displayDetail.imagesVo.length > 0
" />
<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">
<div class="img-container" @click="handelPreviewImages(displayDetail.imagesVo)">
......@@ -64,7 +70,7 @@
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
</el-carousel-item>
</el-carousel>
</el-carousel> -->
<!-- <el-image
:src="
$getFullUrl(
......@@ -226,7 +232,56 @@
</div>
</div>
<div class="right-content">
<el-row v-if="currentUnit">
<div class="unit-content">
<div class="unit-content-container" v-for="(unitValue, unitTitle) in currentUnit.expandUnitInfo"
:key="unitTitle">
<div class="unit-content-title">
{{ unitTitle }}
</div>
<div class="text-indent unit-content_intro" v-if="currentUnit.intro" v-html="unitValue.intro"></div>
<div class="unit-content_images" v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0">
<div class="imgs-title">单元图片</div>
<div class="unit-imgs">
<SlideImageGroup :imgList="unitValue.imagesVo" :needEnlarge="true"
v-if="unitValue.imagesVo.length > 3">
<template slot-scope="{ item }" slot="img">
<img :src="$getFullUrl(item.pressUrl)" alt=""
style="width: 100%; height: 100%; object-fit: contain" />
</template>
</SlideImageGroup>
<el-row v-if="unitValue.imagesVo.length > 0 && unitValue.imagesVo.length < 4" :gutter="10">
<el-col v-for="(item, index) in unitValue.imagesVo" :key="index"
:span="24 / unitValue.imagesVo.length" style="height:300px">
<img :src="$getFullUrl(item.pressUrl)" alt=""
style="width: 100%; height: 100%; object-fit: contain;cursor: pointer;"
@click="handelPreviewImages(unitValue.imagesVo)" />
</el-col>
</el-row>
</div>
</div>
<div 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="
width: 100%;
height: 100%;
object-fit: fill;
cursor: pointer;
" @click="handleToCr(item)" />
</template>
<template slot-scope="{ item }" slot="info">
<div class="name">{{ item.name }}</div>
</template>
</SlideImageGroup>
</div>
</div>
</div>
<!-- <el-row v-if="currentUnit">
<el-col>
<div class="unit-name-intro2">
<div class="unit-name">{{ currentUnit.title }}</div>
......@@ -271,7 +326,7 @@
</el-row>
</div>
</el-col>
</el-row>
</el-row> -->
</div>
</div>
<!-- <div class="units-content">
......@@ -388,6 +443,8 @@ import ChStyleUnit from "./ChStyleUnit.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import videoPlayer from "@/components/VideoPlayer";
import SlideImage from "@/components/SlideImage";
import SlideImageGroup from "@/components/SlideImageGroup";
export default {
components: {
AudioPlayer,
......@@ -398,6 +455,8 @@ export default {
swiper,
swiperSlide,
videoPlayer,
SlideImage,
SlideImageGroup,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
......@@ -459,6 +518,7 @@ export default {
this.displayDetail.exhibitionUnits.length > 0
? this.displayDetail.exhibitionUnits[0]
: null;
this.expandUnitInfo()
function processUnit(list) {
for (let o of list || []) {
if (o.children) {
......@@ -559,6 +619,22 @@ export default {
handleClickUnitTitle(item) {
this.currentUnit = item;
this.expandUnitInfo()
},
expandUnitInfo() {
// 将每个单元下的所有数据变成key-value形式，方便遍历
let newUnits = {}
traveseUnits(this.currentUnit)
this.$set(this.currentUnit, 'expandUnitInfo', JSON.parse(JSON.stringify(newUnits)))
function traveseUnits(obj) {
newUnits[obj.title] = obj
if (obj.children && obj.children.length > 0) {
obj.children.map(item => {
traveseUnits(item)
})
}
}
},
handleChangeCurrentVideo(video) {
......@@ -715,6 +791,7 @@ $themeColor: #a30e0c;
.info-container-left {
min-height: 200px;
max-height: 460px;
margin-right: 50px;
flex: 1;
overflow: hidden;
......@@ -1098,142 +1175,263 @@ $themeColor: #a30e0c;
}
.right-content {
flex: 1;
// flex: 1;
width: 58vw;
.el-col {
&:first-child {
position: relative;
.unit-content {
width: 100%;
// flex: 1;
padding: 60px 40px 0;
.img-container {
height: 420px;
}
.unit-content-container {}
.unit-name-intro {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
padding: 100px 28px 50px;
background-image: linear-gradient(to top,
rgba(0, 0, 0, 0.8),
rgba(0, 0, 0, 0.1));
cursor: pointer;
transition: all 0.5s ease;
.unit-content-title {
font-size: 24px;
line-height: 2;
display: flex;
justify-content: center;
margin-top: 48px;
}
&:hover {
background: rgba(0, 0, 0, 0.8);
.unit-content_intro {
font-size: 16px;
font-weight: 400;
color: #444444;
line-height: 36px;
text-indent: 32px;
margin-bottom: 20px;
}
.unit-intro {
color: #fff;
}
}
.unit-content_images {
position: relative;
.unit-name {
font-size: 24px;
font-weight: bold;
color: #ffffff;
text-align: center;
margin-bottom: 40px;
}
.unit-content_images_container {
height: 100%;
display: flex;
flex-direction: column;
background-color: #f5f5f9;
.unit-intro {
font-size: 16px;
font-weight: 400;
color: #ccc;
text-indent: 32px;
line-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
.images_img {
flex: 1;
}
}
.unit-name-intro2 {
padding: 80px 40px;
.unit-name {
font-size: 24px;
font-weight: bold;
color: #520002;
.desc {
display: flex;
justify-content: center;
margin-bottom: 30px;
height: 40px;
align-items: center;
}
}
}
.unit-intro {
line-height: 2;
text-indent: 32px;
font-size: 16px;
}
//单元文物和单元图片公共样式
.imgs-title {
margin: 16px 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-family: SourceHanSerifCN-Bold;
i {
margin: 0 10px;
font-size: 18px;
}
}
.unit-imgs {
// height: 300px;
}
.unit-content_crs {
position: relative;
.el-row {
.el-col {
margin-bottom: 10px;
.img-container {
background-color: #f5f5f9;
height: 250px;
.unit-images {
margin: 20px 40px 40px;
.images_img {
height: 100%;
width: 100%;
position: relative;
cursor: pointer;
}
}
}
}
// 共用
.unit-images-title {
.desc {
display: flex;
justify-content: center;
font-size: 14px;
margin-bottom: 20px;
padding: 10px;
align-items: center;
color: #520002;
.svg-icon {
margin: 0 10px;
}
color: #333;
font-size: 14px;
}
}
.unit-content_crs {
position: relative;
padding: 10px 40px;
.el-row {
// background-color: #f5f5f9;
.buttons {
display: flex;
justify-content: flex-end;
.el-col {
margin-bottom: 10px;
}
}
.btn {
display: flex;
align-content: center;
padding: 8px 10px;
// border: 1px solid $themeColor;
color: #666;
cursor: pointer;
.images_img {
height: 250px;
width: 100%;
position: relative;
cursor: pointer;
&:hover {
color: $themeColor;
}
.desc {
display: flex;
justify-content: center;
padding: 10px;
align-items: center;
color: #333;
font-size: 14px;
.svg-icon {
font-size: 22px;
margin: 0 4px;
}
}
}
}
.img-container {
width: 100%;
height: 100%;
// height: 162px;
overflow: hidden;
cursor: pointer;
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all ease 0.5s;
object-fit: contain;
}
}
// .el-col {
// &:first-child {
// position: relative;
// .img-container {
// height: 420px;
// }
// .unit-name-intro {
// width: 100%;
// height: 100%;
// position: absolute;
// left: 0;
// top: 0;
// padding: 100px 28px 50px;
// background-image: linear-gradient(to top,
// rgba(0, 0, 0, 0.8),
// rgba(0, 0, 0, 0.1));
// cursor: pointer;
// transition: all 0.5s ease;
// &:hover {
// background: rgba(0, 0, 0, 0.8);
// .unit-intro {
// color: #fff;
// }
// }
// .unit-name {
// font-size: 24px;
// font-weight: bold;
// color: #ffffff;
// text-align: center;
// margin-bottom: 40px;
// }
// .unit-intro {
// font-size: 16px;
// font-weight: 400;
// color: #ccc;
// text-indent: 32px;
// line-height: 40px;
// overflow: hidden;
// text-overflow: ellipsis;
// display: -webkit-box;
// -webkit-line-clamp: 5;
// -webkit-box-orient: vertical;
// }
// }
// .unit-name-intro2 {
// padding: 80px 40px;
// .unit-name {
// font-size: 24px;
// font-weight: bold;
// color: #520002;
// display: flex;
// justify-content: center;
// margin-bottom: 30px;
// }
// .unit-intro {
// line-height: 2;
// text-indent: 32px;
// font-size: 16px;
// }
// }
// .unit-images {
// margin: 20px 40px 40px;
// }
// // 共用
// .unit-images-title {
// display: flex;
// justify-content: center;
// font-size: 14px;
// margin-bottom: 20px;
// align-items: center;
// color: #520002;
// .svg-icon {
// margin: 0 10px;
// }
// }
// .unit-content_crs {
// position: relative;
// padding: 10px 40px;
// .el-row {
// // background-color: #f5f5f9;
// .el-col {
// margin-bottom: 10px;
// }
// }
// .images_img {
// height: 250px;
// width: 100%;
// position: relative;
// cursor: pointer;
// }
// .desc {
// display: flex;
// justify-content: center;
// padding: 10px;
// align-items: center;
// color: #333;
// font-size: 14px;
// }
// }
// }
// }
// .img-container {
// width: 100%;
// height: 100%;
// // height: 162px;
// overflow: hidden;
// cursor: pointer;
// img {
// width: 100%;
// height: 100%;
// object-fit: cover;
// transition: all ease 0.5s;
// object-fit: contain;
// }
// }
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论