Skip to content

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

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

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