Skip to content

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

中国风专题加入展览单元动画

上级 3129e151
隐藏空白字符变更
内嵌 并排
正在显示 包含 331 行增加 和 7 行删除
src/views/display/components/ChStyle-unit.vue 0 → 100644
浏览文件 @ 2f320523
<template>
<div class="units-content">
<p>{{ units.title }}</p>
<ul>
<li
v-for="(item, index) in units.children"
:key="index"
:class="{ active: activeUnit === item.euId }"
:style="`--i: ${1 / units.children.length}`"
@click="showUnit(item.euId)"
>
<!-- <div class="unit-title">{{ item.title }}</div>
<div class="unit-intro">{{ item.intro }}</div>
<div
class="unit-imgs"
v-if="item.imagesVo && item.imagesVo.length > 0"
>
<div
class="img-item"
v-for="(i, idx) in item.imagesVo"
:key="idx"
>
<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>
</div>
</template>
<script>
export default {
props: {
units: {
type: Object,
},
},
data() {
return {
activeUnit: "",
};
},
methods: {
changeTitle(str) {
return str.split("").join("<br>");
},
showUnit(id) {
if (id === this.activeUnit) {
this.activeUnit = " ";
} else {
this.activeUnit = id;
}
},
},
};
</script>
<style lang="scss" scoped>
.units-content {
> p {
font-size: 32px;
font-weight: 600;
text-align: center;
font-family: "华文行楷";
}
ul {
display: flex;
flex-wrap: nowrap;
overflow: auto;
li {
// 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: #bb4343;
line-height: 83px;
display: flex;
justify-content: center;
}
.unit-intro {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
// color: #444444;
color: #e2e2e2;
text-indent: 36px;
// 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;
}
}
}
}
}
</style>
src/views/display/components/ChStyle.vue
浏览文件 @ 2f320523
...@@ -150,9 +150,13 @@ ...@@ -150,9 +150,13 @@
<div class="custom-title-suffix"> <div class="custom-title-suffix">
<img src="@/assets/imgs/display/ch/custom-title.png" alt="" /> <img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
</div> </div>
<div class="right">
<a class="clearfix" @click="unitVisible = true">详情</a>
</div>
</div> </div>
<ChStyleUnit :units="displayDetail.exhibitionUnits" /> <ChStyleUnit :units="node" v-for="node in displayDetail.exhibitionUnits" :key="node.euId" />
</div> </div>
</div> </div>
<div class="content-item lts"> <div class="content-item lts">
...@@ -220,6 +224,17 @@ ...@@ -220,6 +224,17 @@
:on-close="closeImgViewer" :on-close="closeImgViewer"
:url-list="imgList" :url-list="imgList"
/> />
<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> </div>
</template> </template>
...@@ -230,7 +245,9 @@ import Card from "@/views/personal/components/Card"; ...@@ -230,7 +245,9 @@ import Card from "@/views/personal/components/Card";
import Video from "@/components/Video"; import Video from "@/components/Video";
import MenuList from "@/components/MenuList"; import MenuList from "@/components/MenuList";
import { previewFile } from "@/utils/index"; import { previewFile } from "@/utils/index";
import ChStyleUnit from "./ChStyleUnit.vue"; // import ChStyleUnit from "./ChStyleUnit.vue";
import ChStyleUnit from './ChStyle-unit.vue';
import DetailDialog from './detail-dialog.vue';
export default { export default {
components: { components: {
AudioPlayer, AudioPlayer,
...@@ -239,6 +256,7 @@ export default { ...@@ -239,6 +256,7 @@ export default {
Video, Video,
Card, Card,
ChStyleUnit, ChStyleUnit,
DetailDialog,
"el-image-viewer": () => "el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"), import("element-ui/packages/image/src/image-viewer"),
}, },
...@@ -263,6 +281,7 @@ export default { ...@@ -263,6 +281,7 @@ export default {
moveLeft: true, moveLeft: true,
moveRight: true, moveRight: true,
audioPlaying: true, audioPlaying: true,
unitVisible: false
}; };
}, },
async mounted() { async mounted() {
...@@ -442,6 +461,7 @@ export default { ...@@ -442,6 +461,7 @@ export default {
.custom-title { .custom-title {
display: flex; display: flex;
align-items: center; align-items: center;
position: relative;
.custom-title-prefix, .custom-title-prefix,
.custom-title-suffix { .custom-title-suffix {
width: 27px; width: 27px;
...@@ -739,6 +759,40 @@ export default { ...@@ -739,6 +759,40 @@ export default {
} }
} }
} }
.right {
float: right;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
.clearfix {
clear: both;
}
a:hover {
cursor: pointer;
color: #2069c4;
}
}
.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;
}
}
}
::v-deep .el-carousel { ::v-deep .el-carousel {
height: 100%; height: 100%;
} }
......
src/views/display/detail-dialog.vue → src/views/display/components/detail-dialog.vue
浏览文件 @ 2f320523
...@@ -7,16 +7,26 @@ ...@@ -7,16 +7,26 @@
:key="i" :key="i"
:class="{ active: i === activePage, flipped: i < activePage }" :class="{ active: i === activePage, flipped: i < activePage }"
> >
<div class="article-title" @click="handlePageChange(i, true)"> <div
class="article-title"
@click="handlePageChange(i, true)"
v-if="node.imagesVo[0]"
>
<div <div
class="img" class="img"
:style="`background-image: url('${node.imagesVo[0].url}')`" :style="`background-image: url('${node.imagesVo[0]?.url}')`"
></div> ></div>
<p> <p>
<span class="title">{{ node.title }}</span> <span class="title">{{ node.title }}</span>
<span class="seq">{{ node.unit }}</span> <span class="seq">{{ node.unit }}</span>
</p> </p>
</div> </div>
<div class="article-big-title" v-else @click="handlePageChange(i, true)">
<p>
<span class="seq">{{ node.unit }}</span>
<span class="title">{{ node.title }}</span>
</p>
</div>
<div class="book-cover" v-if="i === 0" @click="handlePageChange(i)"> <div class="book-cover" v-if="i === 0" @click="handlePageChange(i)">
<div class="img" :style="`background-image: url('${img}')`"> <div class="img" :style="`background-image: url('${img}')`">
<!-- <img :src="img" alt=""> --> <!-- <img :src="img" alt=""> -->
...@@ -62,7 +72,8 @@ export default { ...@@ -62,7 +72,8 @@ export default {
computed: { computed: {
list() { list() {
let arr = this.data; let arr = this.data;
return arr;
return this.transformTree2List(arr);
}, },
}, },
methods: { methods: {
...@@ -73,6 +84,21 @@ export default { ...@@ -73,6 +84,21 @@ export default {
this.activePage = index + 1; this.activePage = index + 1;
} }
}, },
transformTree2List(arr) {
let list = [];
let loopTree = (data) => {
data.forEach((n) => {
list.push(n);
if (n.children && n.children.length > 0) {
loopTree(n.children);
}
});
};
loopTree(arr);
console.log("list", list);
return list;
},
}, },
}; };
</script> </script>
...@@ -104,7 +130,7 @@ export default { ...@@ -104,7 +130,7 @@ export default {
// width: 800px; // width: 800px;
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: 1.5s transform; transition: all 1.5s;
transform-style: preserve-3d; transform-style: preserve-3d;
transform-origin: 0 0; transform-origin: 0 0;
border-left: 2px solid #8f712fdb; border-left: 2px solid #8f712fdb;
...@@ -113,7 +139,7 @@ export default { ...@@ -113,7 +139,7 @@ export default {
z-index: 1; z-index: 1;
} }
&.flipped { &.flipped {
// z-index: 1; // z-index: 1;
transform: rotateY(-180deg); transform: rotateY(-180deg);
} }
> div { > div {
...@@ -167,6 +193,24 @@ export default { ...@@ -167,6 +193,24 @@ export default {
border-radius: 10px; border-radius: 10px;
} }
} }
.article-big-title {
display: flex;
justify-content: center;
align-items: center;
transform: rotateY(180deg);
> p {
font-size: 36px;
text-align: center;
font-family: "华文行楷";
> span {
display: block;
margin: 20px;
&.title {
color: #fff2b3;
}
}
}
}
.article-content { .article-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论