Skip to content

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

更换查看大图插件

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