Skip to content

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

修复tab切换查看视频

上级 e867603d
隐藏空白字符变更
内嵌 并排
正在显示 包含 488 行增加 和 336 行删除
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/BlueStyle.vue → src/views/display/components/NormalStyle.vue
浏览文件 @ bbf8fd54
...@@ -165,7 +165,22 @@ ...@@ -165,7 +165,22 @@
展览视频 展览视频
</div> </div>
<div class="video-names"> <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)"> @click="handleChangeCurrentVideo(item)">
<div :class="[ <div :class="[
'name', 'name',
...@@ -175,9 +190,10 @@ ...@@ -175,9 +190,10 @@
]"> ]">
{{ item.name.split(".")[0] }} {{ item.name.split(".")[0] }}
</div> </div>
</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> </div>
<!--展览单元 --> <!--展览单元 -->
...@@ -185,79 +201,11 @@ ...@@ -185,79 +201,11 @@
id="exhibitionUnits"> id="exhibitionUnits">
<div class="custom_title"> <div class="custom_title">
<div class="center"> <div class="center">
<!-- <i class="el-icon-notebook-2"></i> -->
<span class="title">展览单元</span> <span class="title">展览单元</span>
</div> </div>
</div> </div>
<div class="unit-container"> <NormalStyleUnit :curUnit="curUnit" :exhibitionUnits="displayDetail.exhibitionUnits"
<div class="unit-content-menu"> @handleClickUnit="handleClickUnit" @handelPreviewImages="handelPreviewImages" @handleToCr="handleToCr" />
<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>
</div> </div>
<!--展览相关文物 --> <!--展览相关文物 -->
...@@ -309,27 +257,21 @@ ...@@ -309,27 +257,21 @@
<script> <script>
import AudioPlayer from "@/components/AudioPlayer"; import AudioPlayer from "@/components/AudioPlayer";
import ReaderOperations from "@/components/ReaderOperations"; import ReaderOperations from "@/components/ReaderOperations";
import Card from "@/views/personal/components/Card";
import Video from "@/components/Video";
import { previewFile } from "@/utils/index"; 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 SlideImage from "@/components/SlideImage";
import SlideImageGroup from "@/components/SlideImageGroup"; import SlideImageGroup from "@/components/SlideImageGroup";
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 { isElementInViewport2 } from "@/utils/index"; import { isElementInViewport2 } from "@/utils/index";
import NormalStyleUnit from './NormalStyleUnit.vue'
import videoPlayer from "@/components/VideoPlayer";
export default { export default {
name: "BlueStyle", name: "NormalStyle",
components: { components: {
AudioPlayer, AudioPlayer,
ReaderOperations, ReaderOperations,
Video,
Card,
ChStyleUnit,
MenuList,
videoPlayer, videoPlayer,
NormalStyleUnit,
SlideImage, SlideImage,
SlideImageGroup, SlideImageGroup,
swiper, swiper,
...@@ -353,19 +295,19 @@ export default { ...@@ -353,19 +295,19 @@ export default {
imgViewerVisible: false, imgViewerVisible: false,
relateRelics: [], relateRelics: [],
audioPlaying: true, audioPlaying: true,
curUnit: [], curUnit: {},
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, currentVideo: null,
swiperOptionThumbs: { videoSwiperOption: {
loop: false, loop: false,
loopedSlides: 8, // looped slides should be the same loopedSlides: 8, // looped slides should be the same
spaceBetween: 10, spaceBetween: 10,
slidesPerView: 5, slidesPerView: 4,
navigation: { navigation: {
nextEl: ".swiper-button-next", nextEl: ".video-swiper-button-next",
prevEl: ".swiper-button-prev", prevEl: ".video-swiper-button-prev",
}, },
}, },
isFixed: false, isFixed: false,
...@@ -426,6 +368,7 @@ export default { ...@@ -426,6 +368,7 @@ export default {
this.displayDetail.exhibitionUnits.length > 0 this.displayDetail.exhibitionUnits.length > 0
) { ) {
this.curUnit = this.displayDetail.exhibitionUnits[0]; this.curUnit = this.displayDetail.exhibitionUnits[0];
this.expandUnitInfo()
} }
processUnit(this.displayDetail.exhibitionUnits); processUnit(this.displayDetail.exhibitionUnits);
...@@ -443,6 +386,8 @@ export default { ...@@ -443,6 +386,8 @@ export default {
domId: "intro", domId: "intro",
}; };
} }
function processUnit(list) { function processUnit(list) {
for (let o of list || []) { for (let o of list || []) {
if (o.children) { if (o.children) {
...@@ -492,18 +437,6 @@ export default { ...@@ -492,18 +437,6 @@ export default {
}; };
}, },
// // 关联文献的行样式调整
// tableRowStyle({ row, rowIndex }) {
// if (rowIndex % 2 == 0) {
// return {
// background: "#f9f9f9 !important",
// };
// } else {
// return {
// background: "#fff !important",
// };
// }
// },
// 预览关联文献 // 预览关联文献
handleViewLt(item) { handleViewLt(item) {
...@@ -536,6 +469,7 @@ export default { ...@@ -536,6 +469,7 @@ export default {
handleClickUnit(item) { handleClickUnit(item) {
this.curUnit = item; this.curUnit = item;
this.expandUnitInfo()
}, },
handleToCr(item) { handleToCr(item) {
...@@ -576,6 +510,21 @@ export default { ...@@ -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> </script>
...@@ -1019,73 +968,116 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1019,73 +968,116 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.video-names { .video-names {
display: flex; display: flex;
justify-content: center; justify-content: center;
border-bottom: 1px solid #f2f0f0;
margin-bottom: 30px; margin-bottom: 30px;
position: relative;
.video-item {
font-size: 18px;
margin: 8px 30px;
.name {
color: #999;
position: relative;
cursor: pointer;
&:hover {
color: $themeColor;
&::after { .video-swiper-button-next,
display: inline-block; .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 { .swiper-container {
display: inline-block; width: 90%;
}
}
}
.active::after, .slide-item {
.name::after { padding: 8px;
content: ""; border-radius: 4px;
width: 50%; color: $themeColor;
height: 1px; cursor: pointer;
background-color: $themeColor; text-overflow: ellipsis;
position: absolute; overflow: hidden;
left: 0; width: 100%;
bottom: -9px; white-space: nowrap;
left: 50%; border: 1px solid $themeColor;
transform: translateX(-50%);
display: none;
} }
.active::before, .active {
.name::before { background: $themeColor;
content: ""; color: #fff;
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-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 { .video-box {
height: 500px; height: 600px;
padding: 0 40px;
.video-player { .video-player {
height: 100%; height: 100%;
} }
} }
} }
// 虚拟展 // 虚拟展
...@@ -1154,176 +1146,6 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1154,176 +1146,6 @@ $titleFontFamily: SourceHanSerifCN-Bold;
/**展览单元 */ /**展览单元 */
.display-detail_units { .display-detail_units {
overflow-x: hidden; 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({ ...@@ -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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论