提交 9c919715 authored 作者: 龙菲's avatar 龙菲

布展详情增加动画

上级 daaaf691
...@@ -25,7 +25,6 @@ ...@@ -25,7 +25,6 @@
class="el-image-container" class="el-image-container"
:src="$getFullUrl(item.url)" :src="$getFullUrl(item.url)"
fit="contain" fit="contain"
></el-image> ></el-image>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
...@@ -35,26 +34,21 @@ ...@@ -35,26 +34,21 @@
</el-col> </el-col>
<el-col class="relic-info" :span="8"> <el-col class="relic-info" :span="8">
<div class="info-title"> <div class="info-title">
<div <div class="title-container">
class="title-container" <h2>
>
<h3>
{{ CRDetail.name }} {{ CRDetail.name }}
</h3> </h2>
<span class="view-container"> <span class="view-container">
<svg-icon <svg-icon icon-class="view" class="view-svg-icon"></svg-icon>
icon-class="view"
class="view-svg-icon"
></svg-icon>
<span class="view-text">{{ CRDetail.browseCount }}</span> <span class="view-text">{{ CRDetail.browseCount }}</span>
</span> </span>
</div> </div>
<AudioPlayer <!-- <AudioPlayer
:url="$getFullUrl(CRDetail.audiosVo[0].url)" :url="$getFullUrl(CRDetail.audiosVo[0].url)"
ref="AudioPlayer" ref="AudioPlayer"
v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0" v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
/> /> -->
</div> </div>
<div class="info-body"> <div class="info-body">
<div class="basic-info"> <div class="basic-info">
...@@ -107,6 +101,22 @@ ...@@ -107,6 +101,22 @@
:sourceType="'biz_cultural_relic'" :sourceType="'biz_cultural_relic'"
@reload="loadDetail" @reload="loadDetail"
/> />
<div
class="audio"
:style="{
animationPlayState: audioPlaying ? 'running' : 'paused',
}"
@click="handleClickAudio"
v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
>
<svg-icon icon-class="music"></svg-icon>
<AudioPlayer
style="display: none"
:url="$getFullUrl(CRDetail.audiosVo[0].url)"
ref="AudioPlayer"
/>
</div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -138,7 +148,11 @@ ...@@ -138,7 +148,11 @@
:key="index" :key="index"
@click="handleToDetail(item.crId)" @click="handleToDetail(item.crId)"
> >
<img :src="$getFullUrl(item.faceImageUrl)" width="100%" :alt="item.title" /> <img
:src="$getFullUrl(item.faceImageUrl)"
width="100%"
:alt="item.title"
/>
<div class="display-desc"> <div class="display-desc">
<div class="desc-title"> <div class="desc-title">
<h4>{{ item.name }}</h4> <h4>{{ item.name }}</h4>
...@@ -214,7 +228,8 @@ export default { ...@@ -214,7 +228,8 @@ export default {
slideImageWidth: "", slideImageWidth: "",
imgViewerVisible: false, imgViewerVisible: false,
relateRelics: [], relateRelics: [],
imgList:[] imgList: [],
audioPlaying: true,
}; };
}, },
mounted() { mounted() {
...@@ -244,8 +259,13 @@ export default { ...@@ -244,8 +259,13 @@ export default {
// 获取关联文物 // 获取关联文物
this.loadCrRecommend(); this.loadCrRecommend();
this.$nextTick(() => { this.$nextTick(() => {
// this.$message.info("正在播放当前文物讲解音频,点击按钮可关闭"); if (
// this.$refs.AudioPlayer.play(); this.CRDetail.audiosVo &&
this.CRDetail.audiosVo.length > 0
) {
this.$message.info("正在播放当前文物讲解音频,点击按钮可关闭");
this.$refs.AudioPlayer.play();
}
}); });
} }
} }
...@@ -303,12 +323,24 @@ export default { ...@@ -303,12 +323,24 @@ export default {
handelPreviewImages() { handelPreviewImages() {
this.imgViewerVisible = true; this.imgViewerVisible = true;
this.imgList = this.CRDetail.imagesVo.map((item) => this.$getFullUrl(item.url)); this.imgList = this.CRDetail.imagesVo.map((item) =>
this.$getFullUrl(item.url)
);
}, },
handleToDetail(crId) { handleToDetail(crId) {
console.log(crId); console.log(crId);
this.$router.replace({ name: "culturalRelicDetail", params: { crId } }); this.$router.replace({ name: "culturalRelicDetail", params: { crId } });
}, },
// 点击音频
handleClickAudio() {
this.audioPlaying = !this.audioPlaying;
if (this.audioPlaying) {
this.$refs["AudioPlayer"].play();
// console.log(this.$refs['audioContainer']);
} else {
this.$refs["AudioPlayer"].pause();
}
},
}, },
}; };
</script> </script>
...@@ -372,12 +404,13 @@ $label: #9f9c9a; ...@@ -372,12 +404,13 @@ $label: #9f9c9a;
} }
} }
.relic-info { .relic-info {
position: relative;
.info-title { .info-title {
display: flex; display: flex;
// align-items: center; // align-items: center;
flex-direction: column; flex-direction: column;
margin-bottom: 40px; margin-bottom: 40px;
.title-container{ .title-container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
...@@ -409,7 +442,7 @@ $label: #9f9c9a; ...@@ -409,7 +442,7 @@ $label: #9f9c9a;
} }
.view-3d { .view-3d {
margin-top: 32px; margin: 32px 0;
padding: 6px 10px; padding: 6px 10px;
width: 100%; width: 100%;
background-color: #c1925b; background-color: #c1925b;
...@@ -423,6 +456,29 @@ $label: #9f9c9a; ...@@ -423,6 +456,29 @@ $label: #9f9c9a;
margin-right: 10px; margin-right: 10px;
} }
} }
.audio {
position: absolute;
right: -200px;
top: 34px;
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
// border: 1px solid #2069c4;
// padding: 10px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
.svg-icon {
color: #2069c4;
font-size: 80px;
}
img {
width: 28px;
height: 28px;
}
}
} }
.title-container { .title-container {
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="content"> <div class="content">
<!-- 展览图片 --> <!-- 展览图片 -->
<div <div
class="content-item display-detail_imgs" class="content-item display-detail_imgs wow animate__animated animate__fadeInDownBig"
ref="imgs" ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
> >
...@@ -11,11 +11,11 @@ ...@@ -11,11 +11,11 @@
fit="cover" fit="cover"
></el-image> ></el-image>
</div> </div>
<div class="wrapper"> <div class="wrapper wow animate__animated animate__fadeInUpBig">
<!-- 展览基本信息 --> <!-- 展览基本信息 -->
<div class="content-item display-detail_basic_info"> <div class="content-item display-detail_basic_info ">
<div class="info-container"> <div class="info-container">
<div class="info-container-left"> <div class="info-container-left wow animate__animated animate__fadeInLeft" >
<swiper :options="swiperOption" ref="mySwiper"> <swiper :options="swiperOption" ref="mySwiper">
<swiper-slide <swiper-slide
v-for="(item, index) in displayDetail.imagesVo" v-for="(item, index) in displayDetail.imagesVo"
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
<!-- <div class="swiper-button-next" slot="button-next"></div> --> <!-- <div class="swiper-button-next" slot="button-next"></div> -->
</swiper> </swiper>
</div> </div>
<div class="info-container-right"> <div class="info-container-right wow animate__animated animate__fadeInRight">
<div class="info-title"> <div class="info-title">
<span>{{ displayDetail.title }} </span> <span>{{ displayDetail.title }} </span>
<div class="view-count"> <div class="view-count">
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
</div> </div>
</div> </div>
<div <div
class="audio" class="audio wow animate__animated animate__fadeInRight"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }" :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
@click="handleClickAudio" @click="handleClickAudio"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0" v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
...@@ -124,8 +124,8 @@ ...@@ -124,8 +124,8 @@
</div> </div>
</div> </div>
<!-- 展览简介 --> <!-- 展览简介 -->
<div class="content-item display-detail_intro"> <div class="content-item display-detail_intro ">
<div class="intro-content"> <div class="intro-content wow animate__animated animate__fadeInUpBig">
<div class="intro-title"> <div class="intro-title">
<svg-icon icon-class="jianjie"></svg-icon> <svg-icon icon-class="jianjie"></svg-icon>
<span>展览简介</span> <span>展览简介</span>
...@@ -135,7 +135,7 @@ ...@@ -135,7 +135,7 @@
</div> </div>
</div> </div>
<div <div
class="intro-video" class="intro-video wow animate__animated animate__fadeInUpBig"
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0" v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
> >
<el-carousel :interval="4000" type="card" indicator-position="none"> <el-carousel :interval="4000" type="card" indicator-position="none">
...@@ -154,7 +154,7 @@ ...@@ -154,7 +154,7 @@
ref="units" ref="units"
v-if="displayDetail.exhibitionUnits.length > 0" v-if="displayDetail.exhibitionUnits.length > 0"
> >
<div class="custom_title"> <div class="custom_title wow animate__animated animate__fadeInUpBig">
<div class="desc"> <div class="desc">
<div class="divider"></div> <div class="divider"></div>
<img <img
...@@ -177,7 +177,7 @@ ...@@ -177,7 +177,7 @@
</div> </div>
</div> </div>
<div class="unit-container"> <div class="unit-container">
<div class="unit-content-menu"> <div class="unit-content-menu wow animate__animated animate__fadeInLeft">
<!-- 只能单开 unique-opened --> <!-- 只能单开 unique-opened -->
<menu-list <menu-list
:items="displayDetail.exhibitionUnits" :items="displayDetail.exhibitionUnits"
...@@ -186,7 +186,7 @@ ...@@ -186,7 +186,7 @@
style="height: 100%" style="height: 100%"
></menu-list> ></menu-list>
</div> </div>
<div class="unit-content"> <div class="unit-content wow animate__animated animate__fadeInRight">
<div class="text-indent unit-content_intro" v-if="curUnit.intro"> <div class="text-indent unit-content_intro" v-if="curUnit.intro">
{{ curUnit.intro }} {{ curUnit.intro }}
</div> </div>
...@@ -248,7 +248,7 @@ ...@@ -248,7 +248,7 @@
v-for="(item, index) in displayDetail.culturalRelicVo" v-for="(item, index) in displayDetail.culturalRelicVo"
:key="index" :key="index"
> >
<div class="img-container" @click="handleToCr(item)"> <div class="img-container wow animate__animated animate__fadeInUp" @click="handleToCr(item)">
<img :src="item.faceImagePressUrl || item.faceImageUrl" alt="" /> <img :src="item.faceImagePressUrl || item.faceImageUrl" alt="" />
<div class="cr-name-intro" v-if="index == 0"> <div class="cr-name-intro" v-if="index == 0">
<div class="cr-name">{{ item.name }}</div> <div class="cr-name">{{ item.name }}</div>
...@@ -260,7 +260,7 @@ ...@@ -260,7 +260,7 @@
</div> </div>
<!-- 相关文献 --> <!-- 相关文献 -->
<div <div
class="content-item display-detail_lts" class="content-item display-detail_lts wow animate__animated animate__fadeInUp"
v-if=" v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0 displayDetail.literatureVo && displayDetail.literatureVo.length > 0
" "
...@@ -433,10 +433,10 @@ export default { ...@@ -433,10 +433,10 @@ export default {
} }
this.$nextTick(() => { this.$nextTick(() => {
if ( if (
this.displayDetail.videosVo && this.displayDetail.audiosVo &&
this.displayDetail.videosVo.length > 0 this.displayDetail.audiosVo.length > 0
) { ) {
this.$message.info("正在播放当前文物讲解音频,点击按钮可关闭"); // this.$message.info("正在播放当前文物讲解音频,点击按钮可关闭");
this.$refs.AudioPlayer.play(); this.$refs.AudioPlayer.play();
} }
}); });
...@@ -608,7 +608,7 @@ export default { ...@@ -608,7 +608,7 @@ export default {
/**样式开始 */ /**样式开始 */
.content { .content {
width: 100%; width: 100%;
overflow-x: hidden; overflow: hidden;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="display-detail"> <div class="display-detail">
<div class="content" id="content"> <div class="content" id="content">
<div <div
class="content-item sliders" class="content-item sliders wow animate__animated animate__fadeInRightBig"
ref="imgs" ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
> >
...@@ -36,14 +36,14 @@ ...@@ -36,14 +36,14 @@
</div> </div>
<div class="content-item intro wow animate__animated animate__fadeInUp"> <div class="content-item intro wow animate__animated animate__fadeInUp">
<div class="wrapper"> <div class="wrapper">
<div class="title"> <div class="title wow animate__animated animate__fadeInUp">
<div>{{ displayDetail.title }}</div> <div>{{ displayDetail.title }}</div>
<div class="view-count"> <div class="view-count">
<svg-icon icon-class="view"></svg-icon> <svg-icon icon-class="view"></svg-icon>
<span>{{ displayDetail.browseCount }}</span> <span>{{ displayDetail.browseCount }}</span>
</div> </div>
</div> </div>
<div class="desc-and-tools"> <div class="desc-and-tools wow animate__animated animate__fadeInUp">
<div class="desc"> <div class="desc">
<el-row> <el-row>
<el-col class="item"> <el-col class="item">
...@@ -88,14 +88,14 @@ ...@@ -88,14 +88,14 @@
<div class="divider"></div> <div class="divider"></div>
<div class="intro-and-video"> <div class="intro-and-video">
<div class="intro-container"> <div class="intro-container">
<div class="intro-title">展览简介</div> <div class="intro-title wow animate__animated animate__fadeInUpBig">展览简介</div>
<div class="intro-content"> <div class="intro-content wow animate__animated animate__fadeInLeft">
{{ displayDetail.intro }} {{ displayDetail.intro }}
</div> </div>
</div> </div>
<div <div
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0" v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
class="videos" class="videos wow animate__animated animate__fadeInRight"
> >
<el-carousel <el-carousel
:interval="4000" :interval="4000"
...@@ -131,7 +131,7 @@ ...@@ -131,7 +131,7 @@
v-if="displayDetail.exhibitionUnits.length > 0" v-if="displayDetail.exhibitionUnits.length > 0"
> >
<div class="wrapper"> <div class="wrapper">
<div class="custom-title"> <div class="custom-title wow animate__animated animate__fadeInLeft">
<div class="custom-title-prefix"> <div class="custom-title-prefix">
<img src="@/assets/imgs/display/ch/custom-title.png" alt="" /> <img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
</div> </div>
...@@ -144,7 +144,7 @@ ...@@ -144,7 +144,7 @@
<ChStyleUnit :units="displayDetail.exhibitionUnits" /> <ChStyleUnit :units="displayDetail.exhibitionUnits" />
</div> </div>
</div> </div>
<div class="content-item lts"> <div class="content-item lts wow animate__animated animate__fadeInUp">
<div class="wrapper"> <div class="wrapper">
<div class="custom-title"> <div class="custom-title">
<div class="custom-title-prefix"> <div class="custom-title-prefix">
...@@ -453,10 +453,10 @@ export default { ...@@ -453,10 +453,10 @@ export default {
/**样式开始 */ /**样式开始 */
.display-detail { .display-detail {
overflow-x: hidden; overflow: hidden;
.content { .content {
width: 100%; width: 100%;
overflow-x: hidden; overflow: hidden;
.content-item { .content-item {
width: 100%; width: 100%;
} }
......
...@@ -3,7 +3,12 @@ ...@@ -3,7 +3,12 @@
<div class="display-detail"> <div class="display-detail">
<div class="wrapper"> <div class="wrapper">
<div class="back"> <div class="back">
<el-button type="text" icon="el-icon-arrow-left" @click.native="handleBack">返回上页</el-button> <el-button
type="text"
icon="el-icon-arrow-left"
@click.native="handleBack"
>返回上页</el-button
>
</div> </div>
<el-row class="detail-container" :gutter="60"> <el-row class="detail-container" :gutter="60">
<el-col class="cr-images" :span="16"> <el-col class="cr-images" :span="16">
...@@ -23,19 +28,16 @@ ...@@ -23,19 +28,16 @@
></el-image> ></el-image>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
<div class="enlarge" @click="handelPreviewImages(displayDetail.imagesVo)"> <div
class="enlarge"
@click="handelPreviewImages(displayDetail.imagesVo)"
>
<img src="@/assets/imgs/enlarge-s.png" alt="" /> <img src="@/assets/imgs/enlarge-s.png" alt="" />
</div> </div>
</el-col> </el-col>
<el-col class="relic-info" :span="8"> <el-col class="relic-info" :span="8">
<div class="info-title"> <div class="info-title">
<div <div class="title">
style="
display: flex;
align-items: center;
justify-content: space-between;
"
>
<h4> <h4>
{{ displayDetail.title }} {{ displayDetail.title }}
</h4> </h4>
...@@ -128,7 +130,10 @@ ...@@ -128,7 +130,10 @@
> >
<img :src="$getFullUrl(item.url)" width="100%" /> <img :src="$getFullUrl(item.url)" width="100%" />
<div class="enlarge" @click="handelPreviewImages(curUnit.imagesVo)"> <div
class="enlarge"
@click="handelPreviewImages(curUnit.imagesVo)"
>
<img src="@/assets/imgs/enlarge-s.png" alt="" /> <img src="@/assets/imgs/enlarge-s.png" alt="" />
</div> </div>
<div class="unit-content_images_desc"> <div class="unit-content_images_desc">
...@@ -268,7 +273,7 @@ export default { ...@@ -268,7 +273,7 @@ export default {
imgViewerVisible: false, imgViewerVisible: false,
relateRelics: [], relateRelics: [],
curUnit: [], curUnit: [],
imgList:[] imgList: [],
}; };
}, },
mounted() { mounted() {
...@@ -323,9 +328,7 @@ export default { ...@@ -323,9 +328,7 @@ export default {
handelPreviewImages(images) { handelPreviewImages(images) {
this.imgViewerVisible = true; this.imgViewerVisible = true;
this.imgList = images.map((item) => this.imgList = images.map((item) => this.$getFullUrl(item.url));
this.$getFullUrl(item.url)
);
}, },
handleToDetail(exhibitionId) { handleToDetail(exhibitionId) {
console.log(crId); console.log(crId);
...@@ -334,8 +337,8 @@ export default { ...@@ -334,8 +337,8 @@ export default {
handleOpenUnit(item) { handleOpenUnit(item) {
this.curUnit = item; this.curUnit = item;
}, },
reload(){ reload() {
this.$emit('reload') this.$emit("reload");
}, },
}, },
}; };
...@@ -409,6 +412,11 @@ $label: #9f9c9a; ...@@ -409,6 +412,11 @@ $label: #9f9c9a;
// align-items: center; // align-items: center;
flex-direction: column; flex-direction: column;
margin-bottom: 40px; margin-bottom: 40px;
.title {
display: flex;
align-items: center;
justify-content: space-between;
}
.play { .play {
margin-left: 10px; margin-left: 10px;
font-size: 32px; font-size: 32px;
...@@ -467,7 +475,7 @@ $label: #9f9c9a; ...@@ -467,7 +475,7 @@ $label: #9f9c9a;
margin-bottom: 20px; margin-bottom: 20px;
} }
.unit-content_images { .unit-content_images {
.unit-content_images_container{ .unit-content_images_container {
position: relative; position: relative;
} }
.unit-content_images_desc { .unit-content_images_desc {
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="content" id="content"> <div class="content" id="content">
<!-- 展览图片 --> <!-- 展览图片 -->
<div <div
class="content-item display-detail_imgs" class="content-item display-detail_imgs wow animate__animated animate__fadeInDownBig"
ref="imgs" ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
> >
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</swiper> </swiper>
</div> </div>
<!-- 展览基本信息 --> <!-- 展览基本信息 -->
<div class="content-item display-detail_basic_info"> <div class="content-item wow display-detail_basic_info animate__animated animate__fadeInUpBig">
<div class="wrapper"> <div class="wrapper">
<div class="top"> <div class="top">
<div class="top-wrapper"> <div class="top-wrapper">
...@@ -111,7 +111,7 @@ ...@@ -111,7 +111,7 @@
</div> </div>
</div> </div>
<!-- 展览简介 --> <!-- 展览简介 -->
<div class="content-item display-detail_intro"> <div class="content-item display-detail_intro wow animate__animated animate__fadeInRight">
<div class="wrapper"> <div class="wrapper">
<div class="custom-title">展览简介</div> <div class="custom-title">展览简介</div>
<div class="intro-content"> <div class="intro-content">
...@@ -134,7 +134,7 @@ ...@@ -134,7 +134,7 @@
</div> </div>
<!--展览单元 --> <!--展览单元 -->
<div <div
class="content-item display-detail_units" class="content-item display-detail_units wow animate__animated animate__fadeInLeft"
ref="units" ref="units"
v-if="displayDetail.exhibitionUnits.length > 0" v-if="displayDetail.exhibitionUnits.length > 0"
> >
...@@ -247,7 +247,7 @@ ...@@ -247,7 +247,7 @@
</div> </div>
<!-- 相关文献 --> <!-- 相关文献 -->
<div <div
class="content-item display-detail_lts" class="content-item display-detail_lts wow animate__animated animate__fadeInRight"
v-if=" v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0 displayDetail.literatureVo && displayDetail.literatureVo.length > 0
" "
...@@ -494,10 +494,10 @@ export default { ...@@ -494,10 +494,10 @@ export default {
/**样式开始 */ /**样式开始 */
.display-detail { .display-detail {
overflow-x: hidden; overflow: hidden;
.content { .content {
width: 100%; width: 100%;
overflow-x: hidden; overflow: hidden;
/**轮播图 */ /**轮播图 */
.display-detail_imgs { .display-detail_imgs {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论