Skip to content

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

修改红色主题照片和单元

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