Skip to content

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

修改神秘贵州展厅3D导航图；修改展览和文物的视频位置

上级 827456db
隐藏空白字符变更
内嵌 并排
正在显示 包含 796 行增加 和 137 行删除
src/components/VideoPlayer/index.vue
浏览文件 @ 002c2e2c
...@@ -78,8 +78,17 @@ export default { ...@@ -78,8 +78,17 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.m-video { .m-video {
height: 100%;
::v-deep .video-player { ::v-deep .video-player {
height: 100%;
.video-js { .video-js {
video {
object-fit: fill;
}
&.vjs-fluid {
height: 100% !important;
padding-top: 0;
}
.vjs-big-play-button { .vjs-big-play-button {
left: 50%; left: 50%;
top: 50%; top: 50%;
......
src/views/boutique/components/SMGZ.vue
浏览文件 @ 002c2e2c
...@@ -259,7 +259,7 @@ ...@@ -259,7 +259,7 @@
<div <div
class="guide-content-3d-imgs wow animate__animated animate__fadeInUp" class="guide-content-3d-imgs wow animate__animated animate__fadeInUp"
> >
<img src="@/assets/imgs/boutique/smgz/5_guide/pic3.png" alt="" /> <img src="@/assets/imgs/boutique/smgz/5_guide/guide.png" alt="" />
</div> </div>
</div> </div>
</div> </div>
...@@ -852,7 +852,7 @@ export default { ...@@ -852,7 +852,7 @@ export default {
} }
.guide { .guide {
height: 1700px; height: 1900px;
.guide-content { .guide-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -996,8 +996,11 @@ export default { ...@@ -996,8 +996,11 @@ export default {
.guide-content-3d-imgs { .guide-content-3d-imgs {
margin-bottom: 70px; margin-bottom: 70px;
width: 90%; width: 90%;
height: 1000px;
img { img {
width: 100%; width: 100%;
height: 100%;
object-fit: contain;
} }
} }
} }
...@@ -1102,7 +1105,8 @@ export default { ...@@ -1102,7 +1105,8 @@ export default {
} }
} }
.smgz-video { .smgz-video {
width: 60%; width: 70%;
height: 800px;
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
......
src/views/culturalRelic/Detail.vue
浏览文件 @ 002c2e2c
...@@ -202,12 +202,12 @@ ...@@ -202,12 +202,12 @@
<div class="intro-content wow animate__animated animate__fadeInLeft"> <div class="intro-content wow animate__animated animate__fadeInLeft">
<div class="intro-title"> <div class="intro-title">
<!-- <svg-icon icon-class="jianjie"></svg-icon> --> <!-- <svg-icon icon-class="jianjie"></svg-icon> -->
<i class="el-icon-reading" style="margin-right: 10px"></i> <i class="el-icon-tickets" style="margin-right: 10px"></i>
<span>文物简介</span> <span>文物简介</span>
</div> </div>
<div class="intro-content-container" v-html="CRDetail.intro"></div> <div class="intro-content-container" v-html="CRDetail.intro"></div>
</div> </div>
<div <!-- <div
class="intro-video wow animate__animated animate__fadeInRight" class="intro-video wow animate__animated animate__fadeInRight"
v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0" v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0"
> >
...@@ -219,7 +219,42 @@ ...@@ -219,7 +219,42 @@
<Video :url="$getFullUrl(item.url)" theme="blue" /> <Video :url="$getFullUrl(item.url)" theme="blue" />
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> -->
</div>
<!-- 展览视频 -->
<div
class="content-item videos wow animate__animated animate__fadeInRight"
v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0"
>
<div class="video-title">
<i class="el-icon-video-camera"></i>
展览视频
</div>
<div class="video-names">
<div
class="video-item"
v-for="(item, index) in CRDetail.videosVo"
:key="index"
@click="handleChangeCurrentVideo(item)"
>
<div
:class="[
'name',
currentVideo && item.fileId == currentVideo.fileId
? 'active'
: '',
]"
>
{{ item.name.split(".")[0] }}
</div>
</div>
</div> </div>
<video-player
v-if="currentVideo"
:src="$getFullUrl(currentVideo.url)"
class="video-box"
></video-player>
</div> </div>
<!--相关文物 --> <!--相关文物 -->
...@@ -351,12 +386,14 @@ import ReaderOperations from "@/components/ReaderOperations"; ...@@ -351,12 +386,14 @@ import ReaderOperations from "@/components/ReaderOperations";
// import QRCode from "qrcodejs2"; // import QRCode from "qrcodejs2";
import { getRCDetailByIdV2, crRecommendByPage } from "@/api/culturalRelic"; import { getRCDetailByIdV2, crRecommendByPage } from "@/api/culturalRelic";
import { previewFile } from "@/utils/index"; import { previewFile } from "@/utils/index";
import videoPlayer from "@/components/VideoPlayer";
export default { export default {
components: { components: {
AudioPlayer, AudioPlayer,
ReaderOperations, ReaderOperations,
Video, Video,
videoPlayer,
"el-image-viewer": () => "el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"), import("element-ui/packages/image/src/image-viewer"),
}, },
...@@ -371,6 +408,8 @@ export default { ...@@ -371,6 +408,8 @@ export default {
dotImgS: require("@/assets/imgs/display/normal/mz-dot-s.png"), dotImgS: require("@/assets/imgs/display/normal/mz-dot-s.png"),
page: null, page: null,
currentRcKey: "type", currentRcKey: "type",
currentVideo: null,
}; };
}, },
watch: { watch: {
...@@ -392,6 +431,9 @@ export default { ...@@ -392,6 +431,9 @@ export default {
if (res.code == 0) { if (res.code == 0) {
this.CRDetail = res.data.culturalRelicVo; this.CRDetail = res.data.culturalRelicVo;
// this.relateRelics = res.data.recommendList.records; // this.relateRelics = res.data.recommendList.records;
if (this.CRDetail.videosVo && this.CRDetail.videosVo.length > 0) {
this.currentVideo = this.CRDetail.videosVo[0];
}
// 获取关联文物 // 获取关联文物
this.loadCrRecommend(); this.loadCrRecommend();
this.$nextTick(() => { this.$nextTick(() => {
...@@ -406,7 +448,6 @@ export default { ...@@ -406,7 +448,6 @@ export default {
}, },
async loadCrRecommend() { async loadCrRecommend() {
const { crId } = this.CRDetail; const { crId } = this.CRDetail;
const params = { const params = {
crId, crId,
...@@ -506,11 +547,15 @@ export default { ...@@ -506,11 +547,15 @@ export default {
handleToCr(item) { handleToCr(item) {
const { crId } = item; const { crId } = item;
// const newPage = this.$router.resolve({ const newPage = this.$router.resolve({
// path: "/culturalRelic/" + crId, path: "/culturalRelic/" + crId,
// }); });
// window.open(newPage.href, "_blank"); window.open(newPage.href, "_blank");
this.$router.push(`/culturalRelic/${crId}`); // this.$router.push(`/culturalRelic/${crId}`);
},
handleChangeCurrentVideo(video) {
this.currentVideo = video;
}, },
}, },
}; };
...@@ -531,7 +576,7 @@ export default { ...@@ -531,7 +576,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
// 中国风主题样式 // 中国风主题样式
/**公共样式开始 */ /**公共样式开始 */
$blue: #2069c4; $themeColor: #2069c4;
.custom-title { .custom-title {
width: 50px; width: 50px;
background-color: #d72f3f; background-color: #d72f3f;
...@@ -568,13 +613,13 @@ $blue: #2069c4; ...@@ -568,13 +613,13 @@ $blue: #2069c4;
align-items: center; align-items: center;
.svg-icon { .svg-icon {
font-size: 50px; font-size: 50px;
color: $blue; color: $themeColor;
margin-right: 10px; margin-right: 10px;
} }
.title { .title {
font-size: 26px; font-size: 26px;
font-weight: 400; font-weight: 400;
color: $blue; color: $themeColor;
line-height: 101px; line-height: 101px;
} }
} }
...@@ -627,6 +672,7 @@ $blue: #2069c4; ...@@ -627,6 +672,7 @@ $blue: #2069c4;
font-weight: 400; font-weight: 400;
color: #2069c4; color: #2069c4;
line-height: 90px; line-height: 90px;
font-family: SourceHanSerifCN-Bold;
.svg-icon { .svg-icon {
margin-right: 10px; margin-right: 10px;
font-size: 36px; font-size: 36px;
...@@ -806,7 +852,7 @@ $blue: #2069c4; ...@@ -806,7 +852,7 @@ $blue: #2069c4;
cursor: pointer; cursor: pointer;
animation: audioRotate 8s linear infinite; animation: audioRotate 8s linear infinite;
transform-origin: center center; transform-origin: center center;
border: 2px solid $blue; border: 2px solid $themeColor;
padding: 10px; padding: 10px;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
...@@ -818,7 +864,7 @@ $blue: #2069c4; ...@@ -818,7 +864,7 @@ $blue: #2069c4;
box-shadow: 0 0 14px rgb(0 0 0 / 40%); box-shadow: 0 0 14px rgb(0 0 0 / 40%);
} }
.svg-icon { .svg-icon {
color: $blue; color: $themeColor;
font-size: 80px; font-size: 80px;
} }
img { img {
...@@ -835,9 +881,9 @@ $blue: #2069c4; ...@@ -835,9 +881,9 @@ $blue: #2069c4;
display: flex; display: flex;
min-height: 265px; min-height: 265px;
.intro-content, .intro-content,
.intro-video { // .intro-video {
flex: 1; // flex: 1;
} // }
.intro-content { .intro-content {
padding: 20px; padding: 20px;
margin: 20px; margin: 20px;
...@@ -849,6 +895,86 @@ $blue: #2069c4; ...@@ -849,6 +895,86 @@ $blue: #2069c4;
} }
} }
.videos {
display: flex;
flex-direction: column;
margin-bottom: 40px;
.video-title {
display: flex;
// justify-content: center;
align-items: center;
font-size: 24px;
color: $themeColor;
margin: 80px 0 40px;
font-family: SourceHanSerifCN-Bold;
padding-left: 40px;
i {
font-size: 28px;
margin-right: 10px;
}
}
.video-names {
display: flex;
justify-content: center;
border-bottom: 1px solid #f2f0f0;
margin-bottom: 30px;
.video-item {
font-size: 18px;
margin: 8px 30px;
.name {
color: #999;
position: relative;
cursor: pointer;
&:hover {
color: $themeColor;
&::after {
display: inline-block;
}
&::before {
display: inline-block;
}
}
}
.active::after,
.name::after {
content: "";
width: 50%;
height: 1px;
background-color: $themeColor;
position: absolute;
left: 0;
bottom: -9px;
left: 50%;
transform: translateX(-50%);
display: none;
}
.active::before,
.name::before {
content: "";
width: 0;
height: 0;
border: 8px solid transparent;
border-top-color: $themeColor;
position: absolute;
left: 50%;
bottom: -25px;
transform: translateX(-50%);
display: none;
}
.active::after,
.active::before {
display: inline-block;
}
}
}
.video-box {
height: 600px;
.video-player {
height: 100%;
}
}
}
// 关联文物 // 关联文物
.display-detail_relateRc { .display-detail_relateRc {
min-height: 560px; min-height: 560px;
...@@ -859,6 +985,7 @@ $blue: #2069c4; ...@@ -859,6 +985,7 @@ $blue: #2069c4;
padding-left: 46px; padding-left: 46px;
display: flex; display: flex;
align-items: center; align-items: center;
font-family: SourceHanSerifCN-Bold;
.recommend-type { .recommend-type {
margin-left: 20px; margin-left: 20px;
} }
...@@ -1026,7 +1153,7 @@ $blue: #2069c4; ...@@ -1026,7 +1153,7 @@ $blue: #2069c4;
height: 50px; height: 50px;
:hover { :hover {
background: #fff; background: #fff;
color: $blue; color: $themeColor;
} }
} }
} }
......
src/views/display/components/BlueStyle.vue
浏览文件 @ 002c2e2c
...@@ -161,7 +161,7 @@ ...@@ -161,7 +161,7 @@
<div class="intro-content wow animate__animated animate__fadeInLeft"> <div class="intro-content wow animate__animated animate__fadeInLeft">
<div class="intro-title"> <div class="intro-title">
<!-- <svg-icon icon-class="jianjie"></svg-icon> --> <!-- <svg-icon icon-class="jianjie"></svg-icon> -->
<i class="el-icon-reading"></i> <i class="el-icon-tickets"></i>
<span>展览简介</span> <span>展览简介</span>
</div> </div>
<div <div
...@@ -169,22 +169,45 @@ ...@@ -169,22 +169,45 @@
v-html="displayDetail.intro" v-html="displayDetail.intro"
></div> ></div>
</div> </div>
<div </div>
class="intro-video wow animate__animated animate__fadeInRight" <!-- 展览视频 -->
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0" <div
> class="content-item videos wow animate__animated animate__fadeInRight"
<el-carousel :interval="4000" type="card" indicator-position="none"> v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
<el-carousel-item >
v-for="item in displayDetail.videosVo" <div class="video-title">
:key="item.fileId" <i class="el-icon-video-camera"></i>
展览视频
</div>
<div class="video-names">
<div
class="video-item"
v-for="(item, index) in displayDetail.videosVo"
:key="index"
@click="handleChangeCurrentVideo(item)"
>
<div
:class="[
'name',
currentVideo && item.fileId == currentVideo.fileId
? 'active'
: '',
]"
> >
<Video :url="$getFullUrl(item.url)" theme="blue" /> {{ item.name.split(".")[0] }}
</el-carousel-item> </div>
</el-carousel> </div>
</div> </div>
<video-player
v-if="currentVideo"
:src="$getFullUrl(currentVideo.url)"
class="video-box"
></video-player>
</div> </div>
<div
<div class="display-detail_virtual content-item" v-if="displayDetail.virtualVo.length>0"> class="display-detail_virtual content-item"
v-if="displayDetail.virtualVo.length > 0"
>
<div <div
class="img-container" class="img-container"
@click="handleToVR(item)" @click="handleToVR(item)"
...@@ -215,7 +238,7 @@ ...@@ -215,7 +238,7 @@
</div> </div>
<div class="center"> <div class="center">
<!-- <svg-icon icon-class="unit"></svg-icon> --> <!-- <svg-icon icon-class="unit"></svg-icon> -->
<i class="el-icon-menu"></i> <i class="el-icon-notebook-2"></i>
<span class="title">展览单元</span> <span class="title">展览单元</span>
</div> </div>
<div class="desc"> <div class="desc">
...@@ -273,9 +296,9 @@ ...@@ -273,9 +296,9 @@
v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0" v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0"
> >
<div class="imgs-title"> <div class="imgs-title">
<i class="el-icon-menu"></i> <i class="el-icon-collection-tag"></i>
单元图片 单元图片
<i class="el-icon-menu"></i> <i class="el-icon-collection-tag"></i>
</div> </div>
<el-carousel <el-carousel
indicator-position="outside" indicator-position="outside"
...@@ -305,27 +328,38 @@ ...@@ -305,27 +328,38 @@
</div> </div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div>
<!-- <el-col <div
:span="24 / curUnit.imagesVo.length" class="unit-content_crs"
v-for="item in curUnit.imagesVo" v-if="
:key="item.euId" curUnit.culturalRelics && curUnit.culturalRelics.length > 0
class="margin-bottom-32 unit-content_images_container" "
> >
<img :src="$getFullUrl(item.pressUrl)" width="100%" /> <div class="imgs-title">
<i class="el-icon-collection-tag"></i>
<div 单元文物
class="enlarge" <i class="el-icon-collection-tag"></i>
@click="handelPreviewImages(curUnit.imagesVo)" </div>
<el-row :gutter="20">
<el-col
v-for="(item, index) in curUnit.culturalRelics"
:key="index"
:span="index == 0 ? 24 : 8"
@click.native="handleToCr(item)"
> >
<img src="@/assets/imgs/enlarge-s.png" alt="" /> <el-image
</div> :src="$getFullUrl(item.faceImagePressUrl)"
<div class="unit-content_images_desc"> fit="cover"
{{ item.name }} class="images_img"
</div> ></el-image>
</el-col> --> <div class="desc">
{{ item.name }}
</div>
</el-col>
</el-row>
</div> </div>
<div <!-- <div
class="unit-content_videos" class="unit-content_videos"
v-if="curUnit.videosVo && curUnit.videosVo.length > 0" v-if="curUnit.videosVo && curUnit.videosVo.length > 0"
> >
...@@ -338,7 +372,7 @@ ...@@ -338,7 +372,7 @@
<Video :url="$getFullUrl(item.url)" /> <Video :url="$getFullUrl(item.url)" />
</el-col> </el-col>
</el-row> </el-row>
</div> </div> -->
<!-- <div class="buttons"> <!-- <div class="buttons">
<div class="prev btn"> <div class="prev btn">
<svg-icon icon-class="mz-prev"></svg-icon>上一节 <svg-icon icon-class="mz-prev"></svg-icon>上一节
...@@ -360,6 +394,10 @@ ...@@ -360,6 +394,10 @@
displayDetail.culturalRelicVo.length > 0 displayDetail.culturalRelicVo.length > 0
" "
> >
<div class="cr-title">
<i class="el-icon-orange"></i>
展览相关文物
</div>
<el-row :gutter="26"> <el-row :gutter="26">
<el-col <el-col
:span="index == 0 ? 12 : 4" :span="index == 0 ? 12 : 4"
...@@ -469,7 +507,7 @@ import Video from "@/components/Video"; ...@@ -469,7 +507,7 @@ import Video from "@/components/Video";
import { getFullUrl, previewFile } from "@/utils/index"; import { getFullUrl, previewFile } from "@/utils/index";
import ChStyleUnit from "./ChStyleUnit.vue"; import ChStyleUnit from "./ChStyleUnit.vue";
import MenuList from "@/components/MenuList"; import MenuList from "@/components/MenuList";
import videoPlayer from "@/components/VideoPlayer";
export default { export default {
name: "BlueStyle", name: "BlueStyle",
components: { components: {
...@@ -479,6 +517,7 @@ export default { ...@@ -479,6 +517,7 @@ export default {
Card, Card,
ChStyleUnit, ChStyleUnit,
MenuList, MenuList,
videoPlayer,
"el-image-viewer": () => "el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"), import("element-ui/packages/image/src/image-viewer"),
}, },
...@@ -502,6 +541,7 @@ export default { ...@@ -502,6 +541,7 @@ export default {
dotImg: require("@/assets/imgs/display/normal/mz-dot.png"), dotImg: require("@/assets/imgs/display/normal/mz-dot.png"),
dotImgS: require("@/assets/imgs/display/normal/mz-dot-s.png"), dotImgS: require("@/assets/imgs/display/normal/mz-dot-s.png"),
page: null, page: null,
currentVideo: null,
}; };
}, },
async mounted() { async mounted() {
...@@ -515,7 +555,15 @@ export default { ...@@ -515,7 +555,15 @@ export default {
) { ) {
this.curUnit = this.displayDetail.exhibitionUnits[0]; this.curUnit = this.displayDetail.exhibitionUnits[0];
} }
processUnit(this.displayDetail.exhibitionUnits); processUnit(this.displayDetail.exhibitionUnits);
if (
this.displayDetail.videosVo &&
this.displayDetail.videosVo.length > 0
) {
this.currentVideo = this.displayDetail.videosVo[0];
}
function processUnit(list) { function processUnit(list) {
for (let o of list || []) { for (let o of list || []) {
if (o.children) { if (o.children) {
...@@ -613,14 +661,19 @@ export default { ...@@ -613,14 +661,19 @@ export default {
handleToCr(item) { handleToCr(item) {
const { crId } = item; const { crId } = item;
this.$router.push({ const newPage = this.$router.resolve({
path: "/culturalRelic/" + crId, path: "culturalRelic/" + crId,
}); });
window.open(newPage.href, "_blank");
}, },
handleToVR(item) { handleToVR(item) {
window.open(item.url); window.open(item.url);
}, },
handleChangeCurrentVideo(video) {
this.currentVideo = video;
},
}, },
}; };
</script> </script>
...@@ -640,7 +693,7 @@ export default { ...@@ -640,7 +693,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
// 中国风主题样式 // 中国风主题样式
/**公共样式开始 */ /**公共样式开始 */
$blue: #2069c4; $themeColor: #2069c4;
.custom-title { .custom-title {
width: 50px; width: 50px;
background-color: #d72f3f; background-color: #d72f3f;
...@@ -677,18 +730,18 @@ $blue: #2069c4; ...@@ -677,18 +730,18 @@ $blue: #2069c4;
align-items: center; align-items: center;
i { i {
margin-right: 10px; margin-right: 10px;
font-size: 38px; font-size: 28px;
color: #2069c4; color: #2069c4;
} }
.svg-icon { .svg-icon {
font-size: 50px; font-size: 32px;
color: $blue; color: $themeColor;
margin-right: 10px; margin-right: 10px;
} }
.title { .title {
font-size: 26px; font-size: 26px;
font-weight: 400; font-weight: 400;
color: $blue; color: $themeColor;
line-height: 101px; line-height: 101px;
font-family: "SourceHanSerifCN-Bold"; font-family: "SourceHanSerifCN-Bold";
} }
...@@ -890,7 +943,7 @@ $blue: #2069c4; ...@@ -890,7 +943,7 @@ $blue: #2069c4;
cursor: pointer; cursor: pointer;
animation: audioRotate 8s linear infinite; animation: audioRotate 8s linear infinite;
transform-origin: center center; transform-origin: center center;
border: 2px solid $blue; border: 2px solid $themeColor;
padding: 10px; padding: 10px;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
...@@ -902,7 +955,7 @@ $blue: #2069c4; ...@@ -902,7 +955,7 @@ $blue: #2069c4;
box-shadow: 0 0 14px rgb(0 0 0 / 40%); box-shadow: 0 0 14px rgb(0 0 0 / 40%);
} }
.svg-icon { .svg-icon {
color: $blue; color: $themeColor;
font-size: 80px; font-size: 80px;
} }
img { img {
...@@ -916,11 +969,7 @@ $blue: #2069c4; ...@@ -916,11 +969,7 @@ $blue: #2069c4;
.display-detail_intro { .display-detail_intro {
background-image: url("@/assets/imgs/display/normal/bg.png"); background-image: url("@/assets/imgs/display/normal/bg.png");
background-size: 1%; background-size: 1%;
display: flex; // display: flex;
.intro-content,
.intro-video {
flex: 1;
}
.intro-content { .intro-content {
padding: 20px; padding: 20px;
margin: 20px; margin: 20px;
...@@ -931,6 +980,9 @@ $blue: #2069c4; ...@@ -931,6 +980,9 @@ $blue: #2069c4;
color: #2069c4; color: #2069c4;
line-height: 90px; line-height: 90px;
font-family: "SourceHanSerifCN-Bold"; font-family: "SourceHanSerifCN-Bold";
display: flex;
justify-content: center;
align-items: center;
i { i {
margin-right: 10px; margin-right: 10px;
} }
...@@ -944,6 +996,85 @@ $blue: #2069c4; ...@@ -944,6 +996,85 @@ $blue: #2069c4;
} }
} }
} }
// 视频
.videos {
display: flex;
flex-direction: column;
margin-bottom: 40px;
.video-title {
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: $themeColor;
margin: 80px 0 40px;
font-family: SourceHanSerifCN-Bold;
i {
font-size: 28px;
margin-right: 10px;
}
}
.video-names {
display: flex;
justify-content: center;
border-bottom: 1px solid #f2f0f0;
margin-bottom: 30px;
.video-item {
font-size: 18px;
margin: 8px 30px;
.name {
color: #999;
position: relative;
cursor: pointer;
&:hover {
color: $themeColor;
&::after {
display: inline-block;
}
&::before {
display: inline-block;
}
}
}
.active::after,
.name::after {
content: "";
width: 50%;
height: 1px;
background-color: $themeColor;
position: absolute;
left: 0;
bottom: -9px;
left: 50%;
transform: translateX(-50%);
display: none;
}
.active::before,
.name::before {
content: "";
width: 0;
height: 0;
border: 8px solid transparent;
border-top-color: $themeColor;
position: absolute;
left: 50%;
bottom: -25px;
transform: translateX(-50%);
display: none;
}
.active::after,
.active::before {
display: inline-block;
}
}
}
.video-box {
height: 600px;
.video-player {
height: 100%;
}
}
}
// 虚拟展 // 虚拟展
.display-detail_virtual { .display-detail_virtual {
...@@ -1064,16 +1195,43 @@ $blue: #2069c4; ...@@ -1064,16 +1195,43 @@ $blue: #2069c4;
} }
} }
} }
//单元文物和单元图片公共样式
.imgs-title { .imgs-title {
margin: 20px 0; margin: 30px 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 14px; font-size: 20px;
color: #999; color: $themeColor;
font-family: SourceHanSerifCN-Bold;
i { i {
margin: 0 10px; margin: 0 10px;
font-size: 20px; font-size: 18px;
}
}
.unit-content_crs {
position: relative;
.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;
} }
} }
...@@ -1104,6 +1262,20 @@ $blue: #2069c4; ...@@ -1104,6 +1262,20 @@ $blue: #2069c4;
background-image: url("@/assets/imgs/display/normal/bg.png"); background-image: url("@/assets/imgs/display/normal/bg.png");
background-size: 1%; background-size: 1%;
padding: 50px 0; padding: 50px 0;
.cr-title {
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: $themeColor;
margin: 60px 0 40px;
font-family: SourceHanSerifCN-Bold;
i {
font-size: 28px;
margin-right: 10px;
}
}
.el-col { .el-col {
.img-container { .img-container {
width: 100%; width: 100%;
...@@ -1123,7 +1295,7 @@ $blue: #2069c4; ...@@ -1123,7 +1295,7 @@ $blue: #2069c4;
// rgba(0, 0, 0, 0.1) // rgba(0, 0, 0, 0.1)
// ); // );
.cr-name { .cr-name {
font-size: 48px; font-size: 38px;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
...@@ -1277,14 +1449,14 @@ $blue: #2069c4; ...@@ -1277,14 +1449,14 @@ $blue: #2069c4;
&:hover { &:hover {
background-color: #fff; background-color: #fff;
color: $blue; color: $themeColor;
} }
padding-left: 16px !important; padding-left: 16px !important;
} }
.is-current { .is-current {
.el-tree-node__content { .el-tree-node__content {
background-color: #fff; background-color: #fff;
color: $blue; color: $themeColor;
} }
} }
} }
......
src/views/display/components/ChStyle.vue
浏览文件 @ 002c2e2c
...@@ -55,12 +55,12 @@ ...@@ -55,12 +55,12 @@
<el-row> <el-row>
<el-col class="item"> <el-col class="item">
<div class="label">关键词：</div> <div class="label">关键词：</div>
<div class="value">{{ displayDetail.keyword }}</div> <div class="value">{{ displayDetail.keyword ||'暂无'}}</div>
</el-col> </el-col>
<el-col class="item" v-if="dicts.displayType"> <el-col class="item" v-if="dicts.displayType">
<div class="label">展览类型：</div> <div class="label">展览类型：</div>
<div class="value"> <div class="value">
{{ dicts.displayType[displayDetail.type] }} {{ dicts.displayType[displayDetail.type]||'暂无' }}
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -68,12 +68,12 @@ ...@@ -68,12 +68,12 @@
<el-col class="item" v-if="dicts.displayCharacter"> <el-col class="item" v-if="dicts.displayCharacter">
<div class="label">展览性质：</div> <div class="label">展览性质：</div>
<div class="value"> <div class="value">
{{ dicts.displayCharacter[displayDetail.displayCharacter] }} {{ dicts.displayCharacter[displayDetail.displayCharacter] ||'暂无'}}
</div> </div>
</el-col> </el-col>
<el-col class="item"> <el-col class="item">
<div class="label">展览单位：</div> <div class="label">展览单位：</div>
<div class="value">{{ displayDetail.deptName }}</div> <div class="value">{{ displayDetail.deptName ||'暂无'}}</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -104,21 +104,59 @@ ...@@ -104,21 +104,59 @@
v-html="displayDetail.intro" v-html="displayDetail.intro"
></div> ></div>
</div> </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"
<el-carousel> class="videos wow animate__animated animate__fadeInRight"
<el-carousel-item >
v-for="item in displayDetail.videosVo" <el-carousel>
: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
class="
content-item
videos
wow
animate__animated animate__fadeInRight
"
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
>
<div class="video-title">
<!-- <i class="el-icon-video-camera"></i> -->
展览视频
</div>
<div class="video-names">
<div
class="video-item"
v-for="(item, index) in displayDetail.videosVo"
:key="index"
@click="handleChangeCurrentVideo(item)"
>
<div
:class="[
'name',
currentVideo && item.fileId == currentVideo.fileId
? 'active'
: '',
]"
> >
<Video :url="$getFullUrl(item.url)" /> {{ item.name.split(".")[0] }}
</el-carousel-item> </div>
</el-carousel> </div>
</div> </div>
<video-player
v-if="currentVideo"
:src="$getFullUrl(currentVideo.url)"
class="video-box"
></video-player>
</div> </div>
<div <div
class="audio" class="audio"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }" :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
...@@ -135,7 +173,10 @@ ...@@ -135,7 +173,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="content-item virtual" v-if="displayDetail.virtualVo.length>0"> <div
class="content-item virtual"
v-if="displayDetail.virtualVo.length > 0"
>
<div class="wrapper"> <div class="wrapper">
<div <div
class="img-container" class="img-container"
...@@ -269,6 +310,8 @@ import { previewFile } from "@/utils/index"; ...@@ -269,6 +310,8 @@ import { previewFile } from "@/utils/index";
// import ChStyleUnit from "./ChStyleUnit.vue"; // import ChStyleUnit from "./ChStyleUnit.vue";
import ChStyleUnit from "./ChStyleUnit.vue"; import ChStyleUnit from "./ChStyleUnit.vue";
import DetailDialog from "./detail-dialog.vue"; import DetailDialog from "./detail-dialog.vue";
import videoPlayer from "@/components/VideoPlayer";
export default { export default {
components: { components: {
AudioPlayer, AudioPlayer,
...@@ -278,6 +321,7 @@ export default { ...@@ -278,6 +321,7 @@ export default {
Card, Card,
ChStyleUnit, ChStyleUnit,
DetailDialog, DetailDialog,
videoPlayer,
"el-image-viewer": () => "el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"), import("element-ui/packages/image/src/image-viewer"),
}, },
...@@ -303,6 +347,7 @@ export default { ...@@ -303,6 +347,7 @@ export default {
moveRight: true, moveRight: true,
audioPlaying: true, audioPlaying: true,
unitVisible: false, unitVisible: false,
currentVideo: null,
}; };
}, },
async mounted() { async mounted() {
...@@ -329,6 +374,14 @@ export default { ...@@ -329,6 +374,14 @@ export default {
} }
} }
} }
if (
this.displayDetail.videosVo &&
this.displayDetail.videosVo.length > 0
) {
this.currentVideo = this.displayDetail.videosVo[0];
}
this.$nextTick(() => { this.$nextTick(() => {
this.loadWidth(); this.loadWidth();
...@@ -474,6 +527,10 @@ export default { ...@@ -474,6 +527,10 @@ export default {
handleMouseEnter(e) { handleMouseEnter(e) {
console.log(e); console.log(e);
}, },
handleChangeCurrentVideo(video) {
this.currentVideo = video;
},
}, },
}; };
</script> </script>
...@@ -481,6 +538,7 @@ export default { ...@@ -481,6 +538,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
// 中国风主题样式 // 中国风主题样式
/**公共样式开始 */ /**公共样式开始 */
$themeRed: #892325;
.wrapper { .wrapper {
// width: 1200px; // width: 1200px;
width: calc(100% - 26%); //左右两边各自留13% width: calc(100% - 26%); //左右两边各自留13%
...@@ -666,12 +724,12 @@ export default { ...@@ -666,12 +724,12 @@ export default {
.intro-and-video { .intro-and-video {
display: flex; display: flex;
margin-bottom: 20px;
.intro-container { .intro-container {
flex: 1; flex: 1;
.intro-title { .intro-title {
font-size: 40px; font-size: 32px;
font-family: KaiTi; font-family: KaiTi;
font-weight: 400; font-weight: 400;
color: #0f0f0f; color: #0f0f0f;
...@@ -701,14 +759,108 @@ export default { ...@@ -701,14 +759,108 @@ export default {
} }
} }
.videos { // .videos {
flex: 1; // flex: 1;
position: relative; // position: relative;
height: 256px; // height: 256px;
margin-left: 70px; // margin-left: 70px;
} // }
} }
.videos {
display: flex;
flex-direction: column;
margin-bottom: 40px;
.video-title {
// display: flex;
// justify-content: center;
// align-items: center;
// font-size: 24px;
// color: $themeRed;
// margin: 80px 0 40px;
// font-family: SourceHanSerifCN-Bold;
// i {
// font-size: 28px;
// margin-right: 10px;
// }
font-size: 32px;
font-family: KaiTi;
font-weight: 400;
color: #0f0f0f;
margin-bottom: 43px;
position: relative;
&::after {
content: "";
display: inline-block;
width: 60px;
height: 2px;
background-color: #caad91;
position: absolute;
left: 0;
bottom: -12px;
}
}
.video-names {
display: flex;
justify-content: center;
border-bottom: 1px solid #f2f0f0;
margin-bottom: 30px;
.video-item {
font-size: 18px;
margin: 8px 30px;
.name {
color: #999;
position: relative;
cursor: pointer;
&:hover {
color: $themeRed;
&::after {
display: inline-block;
}
&::before {
display: inline-block;
}
}
}
.active::after,
.name::after {
content: "";
width: 50%;
height: 1px;
background-color: $themeRed;
position: absolute;
left: 0;
bottom: -9px;
left: 50%;
transform: translateX(-50%);
display: none;
}
.active::before,
.name::before {
content: "";
width: 0;
height: 0;
border: 8px solid transparent;
border-top-color: $themeRed;
position: absolute;
left: 50%;
bottom: -25px;
transform: translateX(-50%);
display: none;
}
.active::after,
.active::before {
display: inline-block;
}
}
}
.video-box {
height: 600px;
.video-player {
height: 100%;
}
}
}
.audio { .audio {
position: absolute; position: absolute;
right: -120px; right: -120px;
...@@ -716,7 +868,7 @@ export default { ...@@ -716,7 +868,7 @@ export default {
cursor: pointer; cursor: pointer;
animation: audioRotate 8s linear infinite; animation: audioRotate 8s linear infinite;
transform-origin: center center; transform-origin: center center;
border: 2px solid #892325; border: 2px solid $themeRed;
padding: 10px; padding: 10px;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
......
src/views/display/components/RedStyle.vue
浏览文件 @ 002c2e2c
...@@ -197,37 +197,68 @@ ...@@ -197,37 +197,68 @@
v-html="displayDetail.intro" v-html="displayDetail.intro"
></div> ></div>
</div> </div>
<div </div>
class="intro-video" </div>
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0" <!-- 视频 -->
> <div
<el-carousel :interval="4000" type="card" height="260px"> class="
<el-carousel-item content-item
v-for="item in displayDetail.videosVo" display-detail_videos
:key="item.fileId" wow
animate__animated animate__fadeInRight
"
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
>
<div class="wrapper">
<div class="video-title">
<i class="el-icon-video-camera"></i>
展览视频
</div>
<div class="video-names">
<div
class="video-item"
v-for="(item, index) in displayDetail.videosVo"
:key="index"
@click="handleChangeCurrentVideo(item)"
>
<div
:class="[
'name',
currentVideo && item.fileId == currentVideo.fileId
? 'active'
: '',
]"
> >
<Video :url="$getFullUrl(item.url)" /> {{ item.name.split(".")[0] }}
</el-carousel-item> </div>
</el-carousel> </div>
</div> </div>
<video-player
v-if="currentVideo"
:src="$getFullUrl(currentVideo.url)"
class="video-box"
></video-player>
</div> </div>
</div> </div>
<!-- 虚拟展厅 --> <!-- 虚拟展厅 -->
<div class="display-detail_virtual content-item" v-if="displayDetail.virtualVo.length>0"> <div
class="display-detail_virtual content-item"
v-if="displayDetail.virtualVo.length > 0"
>
<div class="wrapper"> <div class="wrapper">
<div <div
class="img-container" class="img-container"
@click="handleToVR(item)" @click="handleToVR(item)"
v-for="(item, index) in displayDetail.virtualVo" v-for="(item, index) in displayDetail.virtualVo"
:key="index" :key="index"
> >
<img :src="item.faceImagePressUrl" alt="" /> <img :src="item.faceImagePressUrl" alt="" />
<div class="modal"> <div class="modal">
<svg-icon icon-class="360"></svg-icon> <svg-icon icon-class="360"></svg-icon>
<div class="name">点击进入{{ item.name }}</div> <div class="name">点击进入{{ item.name }}</div>
</div>
</div> </div>
</div> </div>
</div>
</div> </div>
<!--展览单元 --> <!--展览单元 -->
<div <div
...@@ -276,7 +307,7 @@ ...@@ -276,7 +307,7 @@
> >
<div class="unit-images-title"> <div class="unit-images-title">
<svg-icon icon-class="collect-s"></svg-icon> <svg-icon icon-class="collect-s"></svg-icon>
相关图片 单元图片
<svg-icon icon-class="collect-s"></svg-icon> <svg-icon icon-class="collect-s"></svg-icon>
</div> </div>
<el-carousel <el-carousel
...@@ -307,6 +338,37 @@ ...@@ -307,6 +338,37 @@
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
<div
class="unit-content_crs"
v-if="
currentUnit.culturalRelics &&
currentUnit.culturalRelics.length > 0
"
>
<div class="unit-images-title">
<svg-icon icon-class="collect-s"></svg-icon>
单元文物
<svg-icon icon-class="collect-s"></svg-icon>
</div>
<el-row :gutter="20">
<el-col
v-for="(item, index) in currentUnit.culturalRelics"
:key="index"
:span="index == 0 ? 24 : 8"
@click.native="handleToCr(item)"
>
<el-image
:src="$getFullUrl(item.faceImagePressUrl)"
fit="cover"
class="images_img"
></el-image>
<div class="desc">
{{ item.name }}
</div>
</el-col>
</el-row>
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -451,6 +513,7 @@ import { debounce, previewFile } from "@/utils/index"; ...@@ -451,6 +513,7 @@ import { debounce, previewFile } from "@/utils/index";
import ChStyleUnit from "./ChStyleUnit.vue"; 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";
export default { export default {
components: { components: {
AudioPlayer, AudioPlayer,
...@@ -460,6 +523,7 @@ export default { ...@@ -460,6 +523,7 @@ export default {
ChStyleUnit, ChStyleUnit,
swiper, swiper,
swiperSlide, swiperSlide,
videoPlayer,
"el-image-viewer": () => "el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"), import("element-ui/packages/image/src/image-viewer"),
}, },
...@@ -502,6 +566,7 @@ export default { ...@@ -502,6 +566,7 @@ export default {
}, },
}, },
currentUnit: null, currentUnit: null,
currentVideo: null,
}; };
}, },
computed: { computed: {
...@@ -531,6 +596,13 @@ export default { ...@@ -531,6 +596,13 @@ export default {
} }
} }
} }
if (
this.displayDetail.videosVo &&
this.displayDetail.videosVo.length > 0
) {
this.currentVideo = this.displayDetail.videosVo[0];
}
this.$nextTick(() => { this.$nextTick(() => {
// if ( // if (
// this.displayDetail.videosVo && // this.displayDetail.videosVo &&
...@@ -614,11 +686,24 @@ export default { ...@@ -614,11 +686,24 @@ export default {
handleClickUnitTitle(item) { handleClickUnitTitle(item) {
this.currentUnit = item; this.currentUnit = item;
}, },
handleChangeCurrentVideo(video) {
this.currentVideo = video;
},
handleToCr(item) {
const { crId } = item;
const newPage = this.$router.resolve({
path: "culturalRelic/" + crId,
});
window.open(newPage.href, "_blank");
},
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$themeColor: #a30e0c;
// 中国风主题样式 // 中国风主题样式
/**公共样式开始 */ /**公共样式开始 */
.wrapper { .wrapper {
...@@ -626,7 +711,7 @@ export default { ...@@ -626,7 +711,7 @@ export default {
} }
.custom-title { .custom-title {
width: 50px; width: 50px;
background-color: #a30e0c; background-color: $themeColor;
min-height: 300px; min-height: 300px;
color: #fff; color: #fff;
font-size: 28px; font-size: 28px;
...@@ -636,6 +721,7 @@ export default { ...@@ -636,6 +721,7 @@ export default {
justify-content: center; justify-content: center;
box-shadow: rgb(215 47 63 / 30%) 4px 3px 8px 1px; box-shadow: rgb(215 47 63 / 30%) 4px 3px 8px 1px;
letter-spacing: 10px; letter-spacing: 10px;
font-family: SourceHanSerifCN-Bold;
} }
.units { .units {
background-image: linear-gradient(to bottom, #660d04, #520002); background-image: linear-gradient(to bottom, #660d04, #520002);
...@@ -810,7 +896,7 @@ export default { ...@@ -810,7 +896,7 @@ export default {
} }
} }
/**简介和视频 */ /**简介 */
.display-detail_intro { .display-detail_intro {
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -837,6 +923,87 @@ export default { ...@@ -837,6 +923,87 @@ export default {
} }
} }
} }
// 视频
.display-detail_videos {
display: flex;
// flex-direction: column;
margin-bottom: 40px;
display: flex;
justify-content: center;
.video-title {
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: $themeColor;
margin: 80px 0 40px;
font-family: SourceHanSerifCN-Bold;
i {
font-size: 28px;
margin-right: 10px;
}
}
.video-names {
display: flex;
justify-content: center;
border-bottom: 1px solid #f2f0f0;
margin-bottom: 30px;
.video-item {
font-size: 18px;
margin: 8px 30px;
.name {
color: #999;
position: relative;
cursor: pointer;
&:hover {
color: $themeColor;
&::after {
display: inline-block;
}
&::before {
display: inline-block;
}
}
}
.active::after,
.name::after {
content: "";
width: 50%;
height: 1px;
background-color: $themeColor;
position: absolute;
left: 0;
bottom: -9px;
left: 50%;
transform: translateX(-50%);
display: none;
}
.active::before,
.name::before {
content: "";
width: 0;
height: 0;
border: 8px solid transparent;
border-top-color: $themeColor;
position: absolute;
left: 50%;
bottom: -25px;
transform: translateX(-50%);
display: none;
}
.active::after,
.active::before {
display: inline-block;
}
}
}
.video-box {
height: 600px;
.video-player {
height: 100%;
}
}
}
.display-detail_virtual { .display-detail_virtual {
margin-top: 60px; margin-top: 60px;
display: flex; display: flex;
...@@ -885,7 +1052,7 @@ export default { ...@@ -885,7 +1052,7 @@ export default {
.name { .name {
color: #fff; color: #fff;
font-size: 28px; font-size: 28px;
font-family: "KaiTi"; font-family: SourceHanSerifCN-Bold;
opacity: 0; opacity: 0;
transition: all ease 0.5s; transition: all ease 0.5s;
} }
...@@ -1045,16 +1212,44 @@ export default { ...@@ -1045,16 +1212,44 @@ export default {
} }
.unit-images { .unit-images {
margin: 20px 40px 40px; margin: 20px 40px 40px;
.unit-images-title { }
// 共用
.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; 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;
.svg-icon { font-size: 14px;
margin: 0 10px;
}
} }
} }
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论