Skip to content

E
exhibition_page
提交 6cfddd40 authored 作者: Anix's avatar Anix
浏览文件
操作

展览单元动画

上级 60dcbf1a
显示空白字符变更
内嵌 并排
正在显示 包含 379 行增加 和 5 行删除
src/views/display/Detail.vue
浏览文件 @ 6cfddd40
......@@ -138,6 +138,9 @@
<div class="custom-title-suffix">
<img src="@/assets/imgs/display/custom-title.png" alt="" />
</div>
<div class="right">
<a class="clearfix" @click="unitVisible = true">详情</a>
</div>
</div>
<div class="units-content">
......@@ -145,8 +148,11 @@
<li
v-for="(item, index) in displayDetail.exhibitionUnits"
:key="index"
:class="{ active: activeUnit === item.euId }"
:style="`--i: ${1 / displayDetail.exhibitionUnits.length}`"
@click="showUnit(item.euId)"
>
<div class="unit-title">{{ item.title }}</div>
<!-- <div class="unit-title">{{ item.title }}</div>
<div class="unit-intro">{{ item.intro }}</div>
<div
......@@ -160,6 +166,27 @@
>
<img :src="$getFullUrl(i.url)" alt="" />
</div>
</div> -->
<div class="unit-node">
<div class="unit-imgs">
<div
class="img-item"
v-if="item.imagesVo && item.imagesVo.length > 0"
>
<img :src="$getFullUrl(item.imagesVo[0].url)" alt="" />
</div>
</div>
<div class="unit-content">
<div class="unit-title">{{ item.title }}</div>
<div class="unit-intro">{{ item.intro }}</div>
</div>
</div>
<div class="units-title">
<p>
<span v-html="changeTitle(item.title)"></span>
</p>
<span></span>
</div>
</li>
</ul>
......@@ -230,6 +257,18 @@
</div>
</div>
</div>
<div class="unit-detail-full" v-if="unitVisible">
<i class="el-icon-close" @click="unitVisible = false"></i>
<transition name="el-fade-in-linear">
<detail-dialog
:data="displayDetail.exhibitionUnits"
:title="displayDetail.title"
:img="displayDetail.faceImageUrl"
v-if="unitVisible"
></detail-dialog>
</transition>
</div>
</div>
</template>
......@@ -252,6 +291,7 @@ export default {
Card,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
detailDialog: () => import("./detail-dialog.vue"),
},
data() {
......@@ -275,6 +315,8 @@ export default {
moveLeft: true,
moveRight: true,
audioPlaying: true,
activeUnit: "",
unitVisible: false,
};
},
computed: {
......@@ -300,6 +342,7 @@ export default {
if (exhibitionId) {
let res = await getDisplayById({ exhibitionId });
if (res.code == 0) {
console.log("res", res);
this.displayDetail = res.data;
if (
this.displayDetail.exhibitionUnits &&
......@@ -458,6 +501,17 @@ export default {
this.$refs["AudioPlayer"].pause();
}
},
showUnit(id) {
if (id === this.activeUnit) {
this.activeUnit = " ";
} else {
this.activeUnit = id;
}
},
changeTitle(str) {
return str.split("").join("<br>");
},
},
};
</script>
......@@ -489,6 +543,16 @@ export default {
line-height: 114px;
}
}
.right {
float: right;
.clearfix {
clear: both;
}
a:hover {
cursor: pointer;
color: #2069c4;
}
}
/**公共样式结束 */
/**样式开始 */
......@@ -704,13 +768,47 @@ export default {
align-items: center;
.units-content {
ul {
display: flex;
flex-wrap: nowrap;
overflow: auto;
li {
margin-bottom: 20px;
// margin-bottom: 20px;
width: calc(var(--i) * 100%);
transition: 0.6s;
overflow: hidden;
// flex-shrink: 0;
position: relative;
&.active {
width: 100%;
flex-shrink: 0;
> .unit-node {
filter: none;
/* > .unit-imgs {
width: 100%;
.img-item {
width: 100%;
height: auto;
img {
width: 100%;
height: auto;
}
}
} */
}
> .units-title {
opacity: 0;
}
}
&:hover {
cursor: pointer;
}
.unit-title {
font-size: 36px;
font-family: KaiTi;
font-weight: 400;
color: #4e392c;
// color: #4e392c;
color: #bb4343;
line-height: 83px;
display: flex;
justify-content: center;
......@@ -719,17 +817,91 @@ export default {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #444444;
// color: #444444;
color: #e2e2e2;
text-indent: 36px;
margin-bottom: 10px;
// margin-bottom: 10px;
// margin-top: 20px;
line-height: 1.8;
}
.unit-imgs {
width: 100%;
// width: 500px;
height: 100%;
flex-shrink: 0;
overflow: hidden;
.img-item {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
// height: 100%;
img {
width: 100%;
// height: 100%;
transition: 0.6s;
}
}
}
.unit-node {
width: 1200px;
height: 550px;
display: flex;
overflow: hidden;
transition: 0.6s;
filter: sepia(0.6);
position: relative;
> .unit-content {
padding: 10px 30px;
flex: 1;
flex-shrink: 0;
// background-color: #fff;
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.7) 40%
);
> .unit-title {
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
}
> .unit-intro {
position: absolute;
top: 200px;
height: 70%;
padding: 0 20px;
}
}
}
.units-title {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: 0.6s;
> p {
color: #fff;
position: absolute;
left: 0;
top: 0;
margin: 0;
font-size: 28px;
font-family: "楷体";
padding: 16px;
height: calc(100% - 32px);
box-shadow: 10px 0px 21px 0 #9b7e3f inset;
}
> span {
}
}
}
......@@ -752,5 +924,25 @@ export default {
}
}
}
.unit-detail-full {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 99;
> i {
color: #fff;
font-size: 24px;
position: absolute;
top: 20px;
right: 20px;
z-index: 10;
&:hover {
cursor: pointer;
}
}
}
}
</style>
src/views/display/detail-dialog.vue 0 → 100644
浏览文件 @ 6cfddd40
<template>
<div class="detail-book">
<div v-if="list.length > 0">
<div
class="book-page"
v-for="(node, i) in list"
:key="i"
:class="{ active: i === activePage, flipped: i < activePage }"
>
<div class="article-title" @click="handlePageChange(i, true)">
<div
class="img"
:style="`background-image: url('${node.imagesVo[0].url}')`"
></div>
<p>
<span class="title">{{ node.title }}</span>
<span class="seq">{{ node.unit }}</span>
</p>
</div>
<div class="book-cover" v-if="i === 0" @click="handlePageChange(i)">
<div class="img" :style="`background-image: url('${img}')`">
<!-- <img :src="img" alt=""> -->
</div>
<p>
<span>{{ title }}</span>
</p>
</div>
<div class="article-content" v-else @click="handlePageChange(i)">
<div class="content-detail">{{ list[i - 1].intro }}</div>
</div>
</div>
<div class="book-page">
<div class="article-content">
<div class="content-detail">{{ list[list.length - 1].intro }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Array,
default: () => [],
},
title: {
type: String,
default: "",
},
img: {
type: String,
default: "",
},
},
data() {
return {
activePage: 0,
};
},
computed: {
list() {
let arr = this.data;
return arr;
},
},
methods: {
handlePageChange(index, flag) {
if (flag) {
this.activePage = index;
} else {
this.activePage = index + 1;
}
},
},
};
</script>
<style lang="scss" scoped>
.detail-book {
position: relative;
width: 100%;
height: 100%;
min-height: 800px;
perspective: 1000px;
> div {
// position: absolute;
position: absolute;
width: 800px;
// width: 100%;
height: 600px;
top: 50%;
left: 50%;
transform: translate(0%, -50%);
transform-style: preserve-3d;
/* &:first-child,
&:last-child {
box-shadow: 0px -5px 0 2px #8f712fdb;
} */
}
.book-page {
position: absolute;
// width: 800px;
width: 100%;
height: 100%;
transition: 1.5s transform;
transform-style: preserve-3d;
transform-origin: 0 0;
border-left: 2px solid #8f712fdb;
box-shadow: 6px 6px 0 2px #8f712fdb;
&.active {
z-index: 1;
}
&.flipped {
// z-index: 1;
transform: rotateY(-180deg);
}
> div {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
backface-visibility: hidden;
background-color: #bfa277;
}
.book-cover {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px;
width: 100%;
height: 100%;
> .img {
width: 600px;
height: 400px;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
margin: 50px auto;
}
> p {
display: flex;
> span {
display: block;
text-align: center;
font-size: 22px;
font-weight: 600;
font-family: "楷体";
writing-mode: tb-rl;
&.title {
color: #850e0e;
font-size: 30px;
}
&.seq {
padding-bottom: 100px;
margin-left: 20px;
}
}
}
}
.article-title {
@extend .book-cover;
transform: rotateY(180deg);
> .img {
border-radius: 10px;
}
}
.article-content {
width: 100%;
height: 100%;
padding: 50px 100px;
line-height: 1.8;
color: #333;
font-weight: 600;
font-family: "仿宋";
text-indent: 32px;
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论