Skip to content

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

更换查看大图插件

上级 d01a7338
隐藏空白字符变更
内嵌 并排
正在显示 包含 216 行增加 和 134 行删除
package.json
浏览文件 @ cb2d2746
......@@ -24,6 +24,7 @@
"sass-loader": "^13.0.2",
"svgo": "^2.8.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"v-viewer": "^1.6.4",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vue-slidepage": "^1.0.0",
......
src/components/SlideImage/index.vue
浏览文件 @ cb2d2746
......@@ -14,7 +14,7 @@
:key="index"
>
<img :src="$getFullUrl(item[imgKey])" alt="" />
<div class="enlarge" @click="handelPreviewImages(imgList,index)">
<div class="enlarge" @click="handelPreviewImages(imgList, index)">
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
</swiper-slide>
......@@ -52,8 +52,8 @@
/>
</div>
</template>
<script>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
......@@ -95,7 +95,7 @@ export default {
slideToClickedSlide: true,
},
imgViewerVisible: false,
initialIndex:0
initialIndex: 0,
};
},
......@@ -108,10 +108,15 @@ export default {
});
},
methods: {
handelPreviewImages(items,i) {
this.imgViewerVisible = true;
handelPreviewImages(items, index) {
this.previewList = items.map((item) => this.$getFullUrl(item.url));
this.initialIndex = i
const $viewer = this.$viewerApi({
images: this.previewList,
options: {
initialViewIndex: index,
zoomRatio: 1.4,
},
});
},
closeImgViewer() {
this.imgViewerVisible = false;
......@@ -119,8 +124,8 @@ export default {
},
};
</script>
<style scoped lang="scss">
<style scoped lang="scss">
.firstDiv {
/* width: 1920px; */
/* height: 1080px; */
......@@ -181,7 +186,6 @@ export default {
}
}
.gallery-top {
height: 80%;
width: 100%;
......@@ -200,7 +204,3 @@ export default {
opacity: 1;
}
</style>
\ No newline at end of file
src/main.js
浏览文件 @ cb2d2746
......@@ -16,6 +16,14 @@ import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
//大图浏览，不使用elmentUI自带的imageViwer因为其不自带调整zoomRate
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
})
Vue.use(VideoPlayer)
import LImg from '@/components/LazyImg'
......
src/views/boutique/components/jyycc/index.vue
浏览文件 @ cb2d2746
......@@ -188,11 +188,11 @@
</template>
<script>
import part1 from "./jyycc-nation.json";
import MDialog from "@/components/MDialog";
import part2 from "./jyycc-dmby.json";
import part1 from "./jyycc-nation.json";
import videoPlayer from "@/components/VideoPlayer";
import ImageViewer from '@/components/ImageViewer'
import MDialog from "@/components/MDialog";
export default {
components: {
videoPlayer,
......
src/views/culturalRelic/Detail.vue
浏览文件 @ cb2d2746
......@@ -41,7 +41,7 @@
</div>
<div class="body-item" v-if="CRDetail.textureTypeLabel">
<span class="value">{{
CRDetail.textureTypeLabel || "暂无"
CRDetail.textureTypeLabel || "暂无"
}}</span>
</div>
<div class="body-item" v-if="CRDetail.detailSize">
......@@ -52,19 +52,32 @@
</div>
</div>
<!-- 文物简介 -->
<div class="content-item display-detail_intro" v-if="CRDetail.intro" id="intro">
<div
class="content-item display-detail_intro"
v-if="CRDetail.intro"
id="intro"
>
<div class="intro-content">
<div class="intro-content-container" v-html="CRDetail.intro"></div>
<div
class="intro-content-container"
v-html="CRDetail.intro"
></div>
</div>
</div>
<div class="bottom">
<div class="tools">
<ReaderOperations :info="CRDetail" :sourceType="'biz_cultural_relic'" color='#333' selectColor='#333'
@reload="loadDetail" />
<ReaderOperations
:info="CRDetail"
:sourceType="'biz_cultural_relic'"
color="#333"
selectColor="#333"
@reload="loadDetail"
/>
</div>
<div class="showIcon" v-if="CRDetail.url3d" @click="handleTo3D">
<svg-icon icon-class="3d" class="icon"></svg-icon>查看文物3D模型
<svg-icon icon-class="3d" class="icon"></svg-icon
>查看文物3D模型
</div>
</div>
</div>
......@@ -86,69 +99,113 @@
/>
</div> -->
<!-- 文物视频 -->
<div class="content-item display-detail_videos" v-if="
CRDetail.videosVo &&
CRDetail.videosVo.length > 0 &&
nodeActive === 'videosVo'
" id="videosVo">
<div
class="content-item display-detail_videos"
v-if="
CRDetail.videosVo &&
CRDetail.videosVo.length > 0 &&
nodeActive === 'videosVo'
"
id="videosVo"
>
<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'
: '',
]">
<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>
<video-player
v-if="currentVideo"
:src="$getFullUrl(currentVideo.url)"
class="video-box"
></video-player>
</div>
<!--相关文物 -->
<div class="content-item display-detail_relate_rc" ref="units" id="relateRelics"
v-if="nodeActive === 'relateRelics'">
<div
class="content-item display-detail_relate_rc"
ref="units"
id="relateRelics"
v-if="nodeActive === 'relateRelics'"
>
<div class="recommend-type">
<el-radio-group v-model="currentRcKey" size="small">
<el-radio :label="'type'" v-if="CRDetail.type">同类别</el-radio>
<el-radio :label="'years'" v-if="CRDetail.years">同年代</el-radio>
<el-radio :label="'deptId'" v-if="CRDetail.deptId">同馆藏</el-radio>
<el-radio :label="'years'" v-if="CRDetail.years"
>同年代</el-radio
>
<el-radio :label="'deptId'" v-if="CRDetail.deptId"
>同馆藏</el-radio
>
</el-radio-group>
</div>
<div class="recommend-obj">
<div class="recommend-obj-node" v-if="relateRelics.length > 0">
<div v-for="(item, index) in relateRelics" :key="index">
<div class="img-container" @click="handleToCr(item)">
<img :src="$getFullUrl(item.faceImageMiddleUrl || item.faceImagePressUrl)" alt="" />
<img
:src="
$getFullUrl(
item.faceImageMiddleUrl || item.faceImagePressUrl
)
"
alt=""
/>
</div>
<div class="cr-name">{{ item.name }}</div>
</div>
</div>
<el-empty v-else description="暂无相关推荐，去看看其他的吧~"></el-empty>
<el-empty
v-else
description="暂无相关推荐，去看看其他的吧~"
></el-empty>
</div>
</div>
<!-- 相关文献 -->
<div class="content-item display-detail_lts" id="literatureVo" v-if="
CRDetail.literatureVo &&
CRDetail.literatureVo.length > 0 &&
nodeActive === 'literatureVo'
">
<div
class="content-item display-detail_lts"
id="literatureVo"
v-if="
CRDetail.literatureVo &&
CRDetail.literatureVo.length > 0 &&
nodeActive === 'literatureVo'
"
>
<div class="title">相关文献</div>
<div class="lts-content">
<el-scrollbar style="height: 100%">
<div class="lt-item" v-for="(item, index) in CRDetail.literatureVo" :key="index"
@click="handleViewLt(item)">
<div
class="lt-item"
v-for="(item, index) in CRDetail.literatureVo"
:key="index"
@click="handleViewLt(item)"
>
<span class="lt-order">[{{ index + 1 }}]</span>
<span class="lt-authors" v-if="item.authors">{{ item.authors }}.</span>
<span class="lt-authors" v-if="item.authors"
>{{ item.authors }}.</span
>
<span class="lt-name" v-if="item.name">{{ item.name }}.</span>
<span class="lt-source" v-if="item.source">{{ item.source }}.</span>
<span class="lt-source" v-if="item.source"
>{{ item.source }}.</span
>
<span class="lt-date" v-if="item.date">{{ item.date }}</span>
</div>
</el-scrollbar>
......@@ -159,43 +216,56 @@
<div class="inner-right wow animate__animated animate__fadeInLeft">
<swiper :options="swiperOption2" ref="crSwiper">
<swiper-slide v-for="(item, i) in imagesVo" :key="i">
<div class="img-container" @click.stop="handelPreviewImages(imagesVo, i)">
<img :src="$getFullUrl(item.middleUrl || item.pressUrl)" alt="" />
<div
class="img-container"
@click.stop="handelPreviewImages(imagesVo, i)"
>
<img
:src="$getFullUrl(item.middleUrl || item.pressUrl)"
alt=""
/>
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></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>
<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>
<ul class="menu-tabs">
<li :class="{ active: nodeActive === 'intro' }" @click="handleTabClick('intro')">
<li
:class="{ active: nodeActive === 'intro' }"
@click="handleTabClick('intro')"
>
<span>文物简介</span>
</li>
<template v-for="node in tabbarData">
<li :key="node.domId" :class="{ active: nodeActive === node.domId }" @click="handleTabClick(node.domId)"
<li
:key="node.domId"
:class="{ active: nodeActive === node.domId }"
@click="handleTabClick(node.domId)"
v-if="
node.domId !== 'intro' &&
CRDetail[`${node.domId}`] &&
CRDetail[`${node.domId}`].length > 0
">
"
>
<span>{{ node.name }}</span>
</li>
</template>
<li :class="{ active: nodeActive === 'relateRelics' }" @click="handleTabClick('relateRelics')">
<li
:class="{ active: nodeActive === 'relateRelics' }"
@click="handleTabClick('relateRelics')"
>
<span>相关文物</span>
</li>
</ul>
</div>
</div>
<el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" :initial-index="imgIndex" />
</div>
</template>
......@@ -226,7 +296,6 @@ export default {
data() {
let vm = this;
return {
imgViewerVisible: false,
CRDetail: {},
relateRelics: [],
audioPlaying: true,
......@@ -283,7 +352,6 @@ export default {
path: "/culturalRelic",
},
],
imgIndex: 0,
};
},
watch: {
......@@ -341,14 +409,12 @@ export default {
name: this.CRDetail.name,
path: `/culturalRelic/${this.CRDetail.crId}`,
});
// 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(() => {
// this.replaceFaceImage();
if (this.CRDetail.audiosVo && this.CRDetail.audiosVo.length > 0) {
this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
this.$refs.AudioPlayer.play();
......@@ -405,44 +471,49 @@ export default {
}, 1000);
},
closeImgViewer() {
this.imgViewerVisible = false;
handelPreviewImages(items, index) {
this.imgList = items.map((item) => this.$getFullUrl(item.url));
const $viewer = this.$viewerApi({
images: this.imgList,
options: {
initialViewIndex: index,
zoomRatio:1.4,
},
});
},
handelPreviewImages(items, i) {
this.imgViewerVisible = true;
this.imgList = items.map((item) => this.$getFullUrl(item.url));
this.imgIndex = i;
//禁止页面滚动
handleOverflowHidden() {
document.documentElement.style.overflowY = "hidden";
},
//恢复页面滚动
handleOverflowAuto() {
document.documentElement.style.overflowY = "auto";
},
handleToDetail(crId) {
const newPage = this.$router.resolve({
path: `culturalReli/${crId}`,
});
window.open(newPage.href, "_blank");
// this.$router.push(`culturalRelic/${crId}`);
},
// 点击音频
handleClickAudio() {
this.audioPlaying = !this.audioPlaying;
if (this.audioPlaying) {
this.$refs["AudioPlayer"].play();
// console.log(this.$refs['audioContainer']);
} else {
this.$refs["AudioPlayer"].pause();
}
},
closeImgViewer() {
this.imgViewerVisible = false;
},
handleToCr(item) {
const { crId } = item;
const newPage = this.$router.resolve({
path: "/culturalRelic/" + crId,
});
window.open(newPage.href, "_blank");
// this.$router.push(`/culturalRelic/${crId}`);
},
handleChangeCurrentVideo(video) {
......@@ -513,11 +584,11 @@ $node-w: 700px;
width: 100%;
height: 100%;
>img {
> img {
width: 100%;
}
>.main {
> .main {
width: 100%;
min-height: 100vh;
height: calc(100% + $nav-height);
......@@ -526,20 +597,20 @@ $node-w: 700px;
left: 0;
overflow: hidden;
>img {
> img {
width: 100%;
height: 100%;
}
}
>.color {
> .color {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
>img {
> img {
position: absolute;
&.river {
......@@ -581,13 +652,11 @@ $node-w: 700px;
z-index: 999;
}
.inner {
width: 100%;
display: flex;
position: relative;
padding: 0 120px 0 100px;
.inner-left {
// padding-left: 120px;
......@@ -607,19 +676,19 @@ $node-w: 700px;
padding-bottom: 10px;
align-items: center;
>span {
> span {
font-size: 50px;
font-family: "华文行楷";
font-weight: 600;
}
.view-count {
>span {
> span {
margin-left: 10px;
color: #ddd;
}
>svg {
> svg {
color: #ddd;
}
}
......@@ -642,7 +711,7 @@ $node-w: 700px;
left: 0;
}
>div {
> div {
// line-height: 24px;
padding: 10px 0;
padding-left: 50px;
......@@ -684,18 +753,18 @@ $node-w: 700px;
display: flex;
font-size: 16px;
>.view-count {
> .view-count {
width: 100px;
display: flex;
align-items: center;
>svg {
> svg {
margin-right: 10px;
font-size: 28px;
}
}
>.tools {
> .tools {
width: 400px;
}
}
......@@ -718,7 +787,7 @@ $node-w: 700px;
flex-wrap: wrap;
justify-content: center;
>div {
> div {
width: 40%;
padding: 20px;
}
......@@ -733,12 +802,12 @@ $node-w: 700px;
&:hover {
cursor: pointer;
>img {
> img {
transform: scale(1.2);
}
}
>img {
> img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
......@@ -782,7 +851,7 @@ $node-w: 700px;
padding: 10px 0;
cursor: pointer;
&>span {
& > span {
padding: 0 4px;
}
}
......@@ -804,7 +873,7 @@ $node-w: 700px;
.swiper-container {
width: 100%;
.swiper-slide{
.swiper-slide {
display: flex;
justify-content: center;
height: 100%;
......@@ -812,7 +881,7 @@ $node-w: 700px;
.img-container {
height: 100%;
width: 80%;
img {
height: 100%;
width: 100%;
......@@ -825,7 +894,7 @@ $node-w: 700px;
.swiper-button-prev {
background-image: none;
border: 2px solid #666;
background-color: rgba($themeColor,0.5);
background-color: rgba($themeColor, 0.5);
width: 60px;
height: 60px;
border-radius: 50%;
......@@ -836,23 +905,22 @@ $node-w: 700px;
font-weight: bolder;
font-size: 28px !important;
}
.swiper-button-next{
.swiper-button-next {
transform: translate(10px, -200px);
}
.swiper-button-prev{
.swiper-button-prev {
transform: translate(-10px, -200px);
}
}
}
.menu-tabs {
line-height: 50px;
position: absolute;
right:120px;
right: 120px;
top: 0;
// width: 30px;
z-index: 10;
>li {
> li {
// border: 1px solid #333;
writing-mode: vertical-lr;
width: 45px;
......@@ -861,11 +929,11 @@ $node-w: 700px;
background-size: cover;
position: relative;
+li {
+ li {
margin-top: 20px;
}
>span {
> span {
color: #fff;
width: 40px;
height: 138px;
......@@ -887,14 +955,13 @@ $node-w: 700px;
// background-color: $themeColor;
background-image: url(@/assets/imgs/show/outer-active.png);
>span {
> span {
// background: #b5800a;
background-image: url(@/assets/imgs/show/inner-active.png);
}
}
}
}
}
::v-deep .el-scrollbar__wrap {
......
src/views/museum/Detail.vue
浏览文件 @ cb2d2746
......@@ -44,21 +44,25 @@
><svg-icon icon-class="address"></svg-icon
>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：
</span>
<span class="value">{{ museumDetail.address ||'暂无'}}</span>
<span class="value">{{ museumDetail.address || "暂无" }}</span>
</div>
<div>
<span class="label"
><svg-icon icon-class="time"></svg-icon>开放时间：</span
>
<span class="value">{{ museumDetail.openPeriod ||'暂无'}}</span>
<span class="value">{{
museumDetail.openPeriod || "暂无"
}}</span>
</div>
<div>
<span class="label">
<svg-icon icon-class="ticket"></svg-icon>入园方式：</span
>
<span class="value">{{ museumDetail.entryMode ||'暂无'}}</span>
<span class="value">{{
museumDetail.entryMode || "暂无"
}}</span>
</div>
<div >
<div>
<span class="label">
<svg-icon icon-class="tel"></svg-icon>联系方式：</span
>
......@@ -91,12 +95,6 @@
</ul>
</div>
</div>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
:initial-index="imgIndex"
/>
</div>
</template>
......@@ -112,7 +110,6 @@ export default {
data() {
let vm = this;
return {
imgViewerVisible: false,
museumDetail: {},
tabbars: ["简介", "相关信息"],
curTab: "简介",
......@@ -126,7 +123,6 @@ export default {
path: "/museum",
},
],
imgIndex: 0,
};
},
watch: {
......@@ -153,19 +149,30 @@ export default {
}
},
closeImgViewer() {
this.imgViewerVisible = false;
},
handelPreviewImages(items, i) {
this.imgViewerVisible = true;
this.imgList = items.map((item) => this.$getFullUrl(item.url));
this.imgIndex = i;
handelPreviewImages(items, index) {
this.imgList = items
const $viewer = this.$viewerApi({
images: this.imgList,
options: {
initialViewIndex: index,
zoomRatio: 1.4,
},
});
},
handleClickTab(item) {
this.curTab = item;
},
//禁止页面滚动
handleOverflowHidden() {
document.documentElement.style.overflowY = "hidden";
},
//恢复页面滚动
handleOverflowAuto() {
document.documentElement.style.overflowY = "auto";
},
},
};
</script>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论