Skip to content

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

修复tab切换查看视频

上级 e867603d
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 347 行增加 和 17 行删除
src/components/SlideImageGroup/index.vue
浏览文件 @ bbf8fd54
...@@ -13,18 +13,18 @@ ...@@ -13,18 +13,18 @@
@click="handleClickItem(item)" @click="handleClickItem(item)"
> >
<!-- <img :src="item.pressUrl || item.faceImagePressUrl" alt="" /> --> <!-- <img :src="item.pressUrl || item.faceImagePressUrl" alt="" /> -->
<div class="img-container"> <div class="img-container" @click="handelPreviewImages(imgList)">
<slot name="img" :item="item"></slot> <slot name="img" :item="item"></slot>
</div> </div>
<slot name="info" :item="item" /> <slot name="info" :item="item" />
<div <!-- <div
class="enlarge" class="enlarge"
@click="handelPreviewImages(imgList)" @click="handelPreviewImages(imgList)"
v-if="needEnlarge" v-if="needEnlarge"
> >
<img src="@/assets/imgs/enlarge-s.png" alt="" /> <img src="@/assets/imgs/enlarge-s.png" alt="" />
<span>查看大图</span> <span>查看大图</span>
</div> </div> -->
</swiper-slide> </swiper-slide>
<div class="swiper-pagination" slot="pagination"></div> <div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-next swiper-button-white" slot="button-next"> <div class="swiper-button-next swiper-button-white" slot="button-next">
...@@ -142,6 +142,7 @@ export default { ...@@ -142,6 +142,7 @@ export default {
// height: 100%; // height: 100%;
background: #f5f5f9; background: #f5f5f9;
height: 200px; height: 200px;
cursor: pointer;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -183,6 +184,10 @@ export default { ...@@ -183,6 +184,10 @@ export default {
margin-right: 4px; margin-right: 4px;
} }
} }
::v-deep .swiper-pagination-bullets{
bottom: 0;
}
</style> </style>
......
src/components/VideoPlayer/index.vue
浏览文件 @ bbf8fd54
<template> <template>
<div class="m-video"> <div class="m-video">
<video-player <video-player ref="videoPlayer" @play="autoIncrement" @timeupdate="onPlayerTimeupdate($event)"
ref="videoPlayer" @ready="playerReadied" :playsinline="true" :options="playerOptions">
@play="autoIncrement"
@timeupdate="onPlayerTimeupdate($event)"
@ready="playerReadied"
:playsinline="true"
:options="playerOptions"
>
</video-player> </video-player>
</div> </div>
</template> </template>
...@@ -20,6 +14,17 @@ export default { ...@@ -20,6 +14,17 @@ export default {
default: "", default: "",
}, },
}, },
computed: {
player() {
return this.$refs.videoPlayer.player
},
},
watch:{
src(newSrc){
console.log('newSrc',newSrc);
this.toggle(newSrc)
}
},
data() { data() {
return { return {
playerOptions: { playerOptions: {
...@@ -71,7 +76,11 @@ export default { ...@@ -71,7 +76,11 @@ export default {
let player = this.$refs.videoPlayer.player; let player = this.$refs.videoPlayer.player;
player.play(); player.play();
}, },
playerReadied(player) {}, playerReadied(player) { },
toggle(newSrc){
this.player.src(newSrc)
}
}, },
}; };
</script> </script>
...@@ -79,16 +88,20 @@ export default { ...@@ -79,16 +88,20 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.m-video { .m-video {
height: 100%; height: 100%;
::v-deep .video-player { ::v-deep .video-player {
height: 100%; height: 100%;
.video-js { .video-js {
video { video {
object-fit: fill; // object-fit: fill;
} }
&.vjs-fluid { &.vjs-fluid {
height: 100% !important; height: 100% !important;
padding-top: 0; padding-top: 0;
} }
.vjs-big-play-button { .vjs-big-play-button {
left: 50%; left: 50%;
top: 50%; top: 50%;
...@@ -101,6 +114,7 @@ export default { ...@@ -101,6 +114,7 @@ export default {
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
.vjs-icon-custombutton:before { .vjs-icon-custombutton:before {
content: "\f108"; content: "\f108";
font-size: 1.8em; 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 { ...@@ -149,6 +149,7 @@ export default {
.boutique-tabs { .boutique-tabs {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
cursor: pointer;
} }
.fixed-tabs { .fixed-tabs {
...@@ -296,6 +297,7 @@ export default { ...@@ -296,6 +297,7 @@ export default {
// } // }
// } // }
.boutique-content { .boutique-content {
.focus-content { .focus-content {
// padding: 20px 0; // padding: 20px 0;
// margin: 20px; // margin: 20px;
......
src/views/display/Detail.vue
浏览文件 @ bbf8fd54
<template> <template>
<div class="display-detail"> <div class="display-detail">
<BlueStyle <NormalStyle
v-if="displayDetail.themeType == '1'" v-if="displayDetail.themeType == '1'"
:displayDetail="displayDetail" :displayDetail="displayDetail"
:dicts="dicts" :dicts="dicts"
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</template> </template>
<script> <script>
import BlueStyle from "./components/BlueStyle.vue"; import NormalStyle from "./components/NormalStyle.vue";
// import NormalStyle from "./components/NormalStyle.vue"; // import NormalStyle from "./components/NormalStyle.vue";
import ChStyle from "./components/ChStyle.vue"; import ChStyle from "./components/ChStyle.vue";
import RedStyle from "./components/RedStyle.vue"; import RedStyle from "./components/RedStyle.vue";
...@@ -30,7 +30,7 @@ import { getDisplayById } from "@/api/display"; ...@@ -30,7 +30,7 @@ import { getDisplayById } from "@/api/display";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
export default { export default {
components: { components: {
BlueStyle, NormalStyle,
ChStyle, ChStyle,
RedStyle, RedStyle,
}, },
......
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({ ...@@ -50,7 +50,7 @@ module.exports = defineConfig({
proxy: { proxy: {
'/api': { '/api': {
// target: 'http://192.168.1.230:9562/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',//生产 target: 'http://114.115.157.218:9602/api',//生产
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论