Skip to content

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

布展详情增加动画

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