Skip to content

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

修复tab切换查看视频

上级 e867603d
隐藏空白字符变更
内嵌 并排
正在显示 包含 488 行增加 和 336 行删除
src/components/SlideImageGroup/index.vue
浏览文件 @ bbf8fd54
......@@ -13,18 +13,18 @@
@click="handleClickItem(item)"
>
<!-- <img :src="item.pressUrl || item.faceImagePressUrl" alt="" /> -->
<div class="img-container">
<div class="img-container" @click="handelPreviewImages(imgList)">
<slot name="img" :item="item"></slot>
</div>
<slot name="info" :item="item" />
<div
<!-- <div
class="enlarge"
@click="handelPreviewImages(imgList)"
v-if="needEnlarge"
>
<img src="@/assets/imgs/enlarge-s.png" alt="" />
<span>查看大图</span>
</div>
</div> -->
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-next swiper-button-white" slot="button-next">
......@@ -142,6 +142,7 @@ export default {
// height: 100%;
background: #f5f5f9;
height: 200px;
cursor: pointer;
img {
width: 100%;
height: 100%;
......@@ -183,6 +184,10 @@ export default {
margin-right: 4px;
}
}
::v-deep .swiper-pagination-bullets{
bottom: 0;
}
</style>
......
src/components/VideoPlayer/index.vue
浏览文件 @ bbf8fd54
<template>
<div class="m-video">
<video-player
ref="videoPlayer"
@play="autoIncrement"
@timeupdate="onPlayerTimeupdate($event)"
@ready="playerReadied"
:playsinline="true"
:options="playerOptions"
>
<video-player ref="videoPlayer" @play="autoIncrement" @timeupdate="onPlayerTimeupdate($event)"
@ready="playerReadied" :playsinline="true" :options="playerOptions">
</video-player>
</div>
</template>
......@@ -20,6 +14,17 @@ export default {
default: "",
},
},
computed: {
player() {
return this.$refs.videoPlayer.player
},
},
watch:{
src(newSrc){
console.log('newSrc',newSrc);
this.toggle(newSrc)
}
},
data() {
return {
playerOptions: {
......@@ -71,7 +76,11 @@ export default {
let player = this.$refs.videoPlayer.player;
player.play();
},
playerReadied(player) {},
playerReadied(player) { },
toggle(newSrc){
this.player.src(newSrc)
}
},
};
</script>
......@@ -79,16 +88,20 @@ export default {
<style lang="scss" scoped>
.m-video {
height: 100%;
::v-deep .video-player {
height: 100%;
.video-js {
video {
object-fit: fill;
// object-fit: fill;
}
&.vjs-fluid {
height: 100% !important;
padding-top: 0;
}
.vjs-big-play-button {
left: 50%;
top: 50%;
......@@ -101,6 +114,7 @@ export default {
font-weight: normal;
font-style: normal;
}
.vjs-icon-custombutton:before {
content: "\f108";
font-size: 1.8em;
......
src/views/boutique/components/YLGDYW.vue 0 → 100644
浏览文件 @ bbf8fd54
<template>
<div class="ylg">
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
\ No newline at end of file
src/views/boutique/index.vue
浏览文件 @ bbf8fd54
......@@ -149,6 +149,7 @@ export default {
.boutique-tabs {
width: 100%;
height: 100vh;
cursor: pointer;
}
.fixed-tabs {
......@@ -296,6 +297,7 @@ export default {
// }
// }
.boutique-content {
.focus-content {
// padding: 20px 0;
// margin: 20px;
......
src/views/display/Detail.vue
浏览文件 @ bbf8fd54
<template>
<div class="display-detail">
<BlueStyle
<NormalStyle
v-if="displayDetail.themeType == '1'"
:displayDetail="displayDetail"
:dicts="dicts"
......@@ -22,7 +22,7 @@
</template>
<script>
import BlueStyle from "./components/BlueStyle.vue";
import NormalStyle from "./components/NormalStyle.vue";
// import NormalStyle from "./components/NormalStyle.vue";
import ChStyle from "./components/ChStyle.vue";
import RedStyle from "./components/RedStyle.vue";
......@@ -30,7 +30,7 @@ import { getDisplayById } from "@/api/display";
import { mapGetters } from "vuex";
export default {
components: {
BlueStyle,
NormalStyle,
ChStyle,
RedStyle,
},
......
src/views/display/components/BlueStyle.vue → src/views/display/components/NormalStyle.vue
浏览文件 @ bbf8fd54
......@@ -165,7 +165,22 @@
展览视频
</div>
<div class="video-names">
<div class="video-item" v-for="(item, index) in displayDetail.videosVo" :key="index"
<swiper class="swiper video-swiper" :options="videoSwiperOption" ref="unitSwiper" v-if="currentVideo">
<swiper-slide :class="[
'slide-item',
item.fileId == currentVideo.fileId ? 'active' : '',
]" v-for="(item, index) in displayDetail.videosVo" :key="index"
@click.native="handleChangeCurrentVideo(item)">
{{ item.name.split(".")[0] }}
</swiper-slide>
</swiper>
<div class="swiper-button-prev video-swiper-button-prev" slot="button-prev">
<i class="el-icon-arrow-left"></i>
</div>
<div class="swiper-button-next video-swiper-button-next" slot="button-next">
<i class="el-icon-arrow-right"></i>
</div>
<!-- <div class="video-item" v-for="(item, index) in displayDetail.videosVo" :key="index"
@click="handleChangeCurrentVideo(item)">
<div :class="[
'name',
......@@ -175,9 +190,10 @@
]">
{{ item.name.split(".")[0] }}
</div>
</div>
</div> -->
</div>
<video-player v-if="currentVideo" :src="$getFullUrl(currentVideo.url)" class="video-box"></video-player>
<video-player v-if="currentVideo && currentVideo.url" :src="$getFullUrl(currentVideo.url)" class="video-box">
</video-player>
</div>
<!--展览单元 -->
......@@ -185,79 +201,11 @@
id="exhibitionUnits">
<div class="custom_title">
<div class="center">
<!-- <i class="el-icon-notebook-2"></i> -->
<span class="title">展览单元</span>
</div>
</div>
<div class="unit-container">
<div class="unit-content-menu">
<swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
<swiper-slide :class="[
'slide-item',
item.euId == curUnit.euId ? 'active' : '',
]" v-for="(item, index) in displayDetail.exhibitionUnits" :key="index"
@click.native="handleClickUnit(item)">
{{ item.title }}
</swiper-slide>
<!-- <div class="swiper-button-prev" slot="button-prev">
<i class="el-icon-arrow-left"></i>
</div>
<div class="swiper-button-next" slot="button-next">
<i class="el-icon-arrow-right"></i>
</div> -->
</swiper>
<div class="swiper-button-prev" slot="button-prev">
<i class="el-icon-arrow-left"></i>
</div>
<div class="swiper-button-next" slot="button-next">
<i class="el-icon-arrow-right"></i>
</div>
</div>
<div class="unit-content">
<div class="unit-content-title">
{{ curUnit.title }}
</div>
<div class="text-indent unit-content_intro" v-if="curUnit.intro" v-html="curUnit.intro"></div>
<div class="unit-content_images" v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0">
<div class="imgs-title">单元图片</div>
<div class="unit-imgs">
<SlideImageGroup :imgList="curUnit.imagesVo" :needEnlarge="true">
<template slot-scope="{ item }" slot="img">
<img :src="item.pressUrl" alt="" style="width: 100%; height: 100%; object-fit: contain" />
</template>
</SlideImageGroup>
</div>
</div>
<div class="unit-content_crs" v-if="
curUnit.culturalRelics && curUnit.culturalRelics.length > 0
">
<div class="imgs-title">单元文物</div>
<SlideImageGroup :imgList="curUnit.culturalRelics">
<template slot-scope="{ item }" slot="img">
<img :src="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 class="buttons">
<div class="prev btn">
<svg-icon icon-class="mz-prev"></svg-icon>上一节
</div>
<div class="next btn">
下一节<svg-icon icon-class="mz-next"></svg-icon>
</div>
</div> -->
</div>
</div>
<NormalStyleUnit :curUnit="curUnit" :exhibitionUnits="displayDetail.exhibitionUnits"
@handleClickUnit="handleClickUnit" @handelPreviewImages="handelPreviewImages" @handleToCr="handleToCr" />
</div>
<!--展览相关文物 -->
......@@ -309,27 +257,21 @@
<script>
import AudioPlayer from "@/components/AudioPlayer";
import ReaderOperations from "@/components/ReaderOperations";
import Card from "@/views/personal/components/Card";
import Video from "@/components/Video";
import { previewFile } from "@/utils/index";
import ChStyleUnit from "./ChStyleUnit.vue";
import MenuList from "@/components/MenuList";
import videoPlayer from "@/components/VideoPlayer";
import SlideImage from "@/components/SlideImage";
import SlideImageGroup from "@/components/SlideImageGroup";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import { isElementInViewport2 } from "@/utils/index";
import NormalStyleUnit from './NormalStyleUnit.vue'
import videoPlayer from "@/components/VideoPlayer";
export default {
name: "BlueStyle",
name: "NormalStyle",
components: {
AudioPlayer,
ReaderOperations,
Video,
Card,
ChStyleUnit,
MenuList,
videoPlayer,
NormalStyleUnit,
SlideImage,
SlideImageGroup,
swiper,
......@@ -353,19 +295,19 @@ export default {
imgViewerVisible: false,
relateRelics: [],
audioPlaying: true,
curUnit: [],
curUnit: {},
dotImg: require("@/assets/imgs/display/normal/mz-dot.png"),
dotImgS: require("@/assets/imgs/display/normal/mz-dot-s.png"),
page: null,
currentVideo: null,
swiperOptionThumbs: {
videoSwiperOption: {
loop: false,
loopedSlides: 8, // looped slides should be the same
spaceBetween: 10,
slidesPerView: 5,
slidesPerView: 4,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
nextEl: ".video-swiper-button-next",
prevEl: ".video-swiper-button-prev",
},
},
isFixed: false,
......@@ -426,6 +368,7 @@ export default {
this.displayDetail.exhibitionUnits.length > 0
) {
this.curUnit = this.displayDetail.exhibitionUnits[0];
this.expandUnitInfo()
}
processUnit(this.displayDetail.exhibitionUnits);
......@@ -443,6 +386,8 @@ export default {
domId: "intro",
};
}
function processUnit(list) {
for (let o of list || []) {
if (o.children) {
......@@ -492,18 +437,6 @@ export default {
};
},
// // 关联文献的行样式调整
// tableRowStyle({ row, rowIndex }) {
// if (rowIndex % 2 == 0) {
// return {
// background: "#f9f9f9 !important",
// };
// } else {
// return {
// background: "#fff !important",
// };
// }
// },
// 预览关联文献
handleViewLt(item) {
......@@ -536,6 +469,7 @@ export default {
handleClickUnit(item) {
this.curUnit = item;
this.expandUnitInfo()
},
handleToCr(item) {
......@@ -576,6 +510,21 @@ export default {
}
});
},
expandUnitInfo() {
// 将每个单元下的所有数据变成key-value形式，方便遍历
let newUnits = {}
traveseUnits(this.curUnit)
this.$set(this.curUnit, '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)
})
}
}
}
},
};
</script>
......@@ -1019,73 +968,116 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.video-names {
display: flex;
justify-content: center;
border-bottom: 1px solid #f2f0f0;
margin-bottom: 30px;
position: relative;
.video-item {
font-size: 18px;
margin: 8px 30px;
.name {
color: #999;
position: relative;
cursor: pointer;
&:hover {
color: $themeColor;
&::after {
display: inline-block;
}
.video-swiper-button-next,
.video-swiper-button-prev {
// background-color: rgba(0,0,0,0.2);
// border-radius: 50%;
background-image: none;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
color: $themeColor;
font-weight: bolder;
font-size: 28px;
transform: translateY(-6px);
}
&::before {
display: inline-block;
}
}
}
.swiper-container {
width: 90%;
.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;
.slide-item {
padding: 8px;
border-radius: 4px;
color: $themeColor;
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
white-space: nowrap;
border: 1px solid $themeColor;
}
.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 {
background: $themeColor;
color: #fff;
}
.active::after,
.active::before {
display: inline-block;
}
}
// .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: 500px;
height: 600px;
padding: 0 40px;
.video-player {
height: 100%;
}
}
}
// 虚拟展
......@@ -1154,176 +1146,6 @@ $titleFontFamily: SourceHanSerifCN-Bold;
/**展览单元 */
.display-detail_units {
overflow-x: hidden;
.unit-container {
margin-bottom: 40px;
position: relative;
}
.unit-content-menu {
margin-right: 40px;
padding: 0 20px;
position: relative;
.swiper-container {
width: 90%;
.slide-item {
// border: 2px solid $themeColor;
padding: 8px;
border-radius: 4px;
// background: #999;
color: $themeColor;
display: flex;
justify-content: center;
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
white-space: nowrap;
border: 1px solid $themeColor;
}
.active {
background: $themeColor;
color: #fff;
}
}
}
.swiper-button-next,
.swiper-button-prev {
// background-color: rgba(0,0,0,0.2);
// border-radius: 50%;
background-image: none;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
color: $themeColor;
font-weight: bolder;
font-size: 28px;
transform: translateY(-6px);
}
.unit-content {
flex: 1;
padding: 60px 40px 0;
.unit-content-title {
font-size: 24px;
line-height: 2;
display: flex;
justify-content: center;
}
.unit-content_intro {
font-size: 16px;
font-weight: 400;
color: #444444;
line-height: 36px;
text-indent: 32px;
margin-bottom: 20px;
}
.unit-content_images {
position: relative;
.unit-content_images_container {
height: 100%;
display: flex;
flex-direction: column;
background-color: #f5f5f9;
.images_img {
flex: 1;
}
.desc {
display: flex;
justify-content: center;
height: 40px;
align-items: center;
}
}
}
//单元文物和单元图片公共样式
.imgs-title {
margin: 30px 0;
display: flex;
align-items: 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;
.images_img {
height: 100%;
width: 100%;
position: relative;
cursor: pointer;
}
}
}
}
.desc {
display: flex;
justify-content: center;
padding: 10px;
align-items: center;
color: #333;
font-size: 14px;
}
}
.buttons {
display: flex;
justify-content: flex-end;
.btn {
display: flex;
align-content: center;
padding: 8px 10px;
// border: 1px solid $themeColor;
color: #666;
cursor: pointer;
&:hover {
color: $themeColor;
}
.svg-icon {
font-size: 22px;
margin: 0 4px;
}
}
}
}
}
// 关联文物
......
src/views/display/components/NormalStyleUnit.vue 0 → 100644
浏览文件 @ bbf8fd54
<template>
<div class="unit-container">
<div class="unit-content-menu">
<swiper class="swiper unit-swiper" :options="unitSwiperOption" ref="videoSwiper">
<swiper-slide :class="[
'slide-item',
item.euId == curUnit.euId ? 'active' : '',
]" v-for="(item, index) in exhibitionUnits" :key="index" @click.native="handleClickUnit(item)">
{{ item.title }}
</swiper-slide>
</swiper>
<div class="swiper-button-prev unit-swiper-button-prev" slot="button-prev">
<i class="el-icon-arrow-left"></i>
</div>
<div class="swiper-button-next unit-swiper-button-next" slot="button-next">
<i class="el-icon-arrow-right"></i>
</div>
</div>
<div class="unit-content">
<div class="unit-content-container" v-for="(unitValue, unitTitle) in curUnit.expandUnitInfo"
:key="unitTitle">
<div class="unit-content-title">
{{ unitTitle }}
</div>
<div class="text-indent unit-content_intro" v-if="curUnit.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="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">
<img :src="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="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>
</div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import SlideImageGroup from "@/components/SlideImageGroup";
import "swiper/dist/css/swiper.css";
export default {
name: "NormalStyleUnit",
components: {
swiper,
swiperSlide,
SlideImageGroup,
},
props: {
curUnit: {
type: Object,
default: null
},
exhibitionUnits: {
type: Array,
default: null
}
},
data() {
return {
unitSwiperOption: {
loop: false,
loopedSlides: 8, // looped slides should be the same
spaceBetween: 10,
slidesPerView: 4,
navigation: {
nextEl: ".unit-swiper-button-next",
prevEl: ".unit-swiper-button-prev",
},
},
}
},
methods: {
handleClickUnit(item) {
this.$emit('handleClickUnit', item)
},
handelPreviewImages(images) {
this.$emit('handelPreviewImages', images)
},
handleToCr(item) {
this.$emit('handleToCr', item)
}
}
}
</script>
<style lang="scss" scoped>
.unit-container {
margin-bottom: 40px;
position: relative;
}
.unit-content-menu {
margin-right: 40px;
padding: 0 20px;
position: relative;
.swiper-container {
width: 90%;
.slide-item {
padding: 8px;
border-radius: 4px;
color: $themeColor;
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
white-space: nowrap;
border: 1px solid $themeColor;
}
.active {
background: $themeColor;
color: #fff;
}
}
}
.swiper-button-next,
.swiper-button-prev {
// background-color: rgba(0,0,0,0.2);
// border-radius: 50%;
background-image: none;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
color: $themeColor;
font-weight: bolder;
font-size: 28px;
transform: translateY(-6px);
}
.unit-content {
flex: 1;
padding: 60px 40px 0;
.unit-content-container {}
.unit-content-title {
font-size: 24px;
line-height: 2;
display: flex;
justify-content: center;
margin-top: 48px;
}
.unit-content_intro {
font-size: 16px;
font-weight: 400;
color: #444444;
line-height: 36px;
text-indent: 32px;
margin-bottom: 20px;
}
.unit-content_images {
position: relative;
.unit-content_images_container {
height: 100%;
display: flex;
flex-direction: column;
background-color: #f5f5f9;
.images_img {
flex: 1;
}
.desc {
display: flex;
justify-content: center;
height: 40px;
align-items: center;
}
}
}
//单元文物和单元图片公共样式
.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;
.images_img {
height: 100%;
width: 100%;
position: relative;
cursor: pointer;
}
}
}
}
.desc {
display: flex;
justify-content: center;
padding: 10px;
align-items: center;
color: #333;
font-size: 14px;
}
}
.buttons {
display: flex;
justify-content: flex-end;
.btn {
display: flex;
align-content: center;
padding: 8px 10px;
// border: 1px solid $themeColor;
color: #666;
cursor: pointer;
&:hover {
color: $themeColor;
}
.svg-icon {
font-size: 22px;
margin: 0 4px;
}
}
}
}
</style>
\ No newline at end of file
vue.config.js
浏览文件 @ bbf8fd54
......@@ -50,7 +50,7 @@ module.exports = defineConfig({
proxy: {
'/api': {
// target: 'http://192.168.1.230:9562/api',//测试内网
target: 'http://222.85.214.245:9602/api',//测试外网
// target: 'http://222.85.214.245:9602/api',//测试外网
target: 'http://114.115.157.218:9602/api',//生产
changeOrigin: true,
pathRewrite: {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论