Skip to content

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

布展详情模板完善

上级 e4bf2144
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 182 行增加 和 276 行删除
src/views/display/components/BlueStyle.vue
浏览文件 @ 011391ed
...@@ -156,8 +156,8 @@ ...@@ -156,8 +156,8 @@
<svg-icon icon-class="jianjie"></svg-icon> <svg-icon icon-class="jianjie"></svg-icon>
<span>展览简介</span> <span>展览简介</span>
</div> </div>
<div class="intro-content-container"> <div class="intro-content-container" v-html="displayDetail.intro">
{{ displayDetail.intro }}
</div> </div>
</div> </div>
<div <div
...@@ -415,8 +415,6 @@ import Card from "@/views/personal/components/Card"; ...@@ -415,8 +415,6 @@ import Card from "@/views/personal/components/Card";
import Video from "@/components/Video"; import Video from "@/components/Video";
import { previewFile } from "@/utils/index"; import { previewFile } from "@/utils/index";
import ChStyleUnit from "./ChStyleUnit.vue"; import ChStyleUnit from "./ChStyleUnit.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import MenuList from "@/components/MenuList"; import MenuList from "@/components/MenuList";
export default { export default {
...@@ -427,8 +425,6 @@ export default { ...@@ -427,8 +425,6 @@ export default {
Video, Video,
Card, Card,
ChStyleUnit, ChStyleUnit,
swiper,
swiperSlide,
MenuList, MenuList,
"el-image-viewer": () => "el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"), import("element-ui/packages/image/src/image-viewer"),
...@@ -453,43 +449,8 @@ export default { ...@@ -453,43 +449,8 @@ export default {
dotImg: require("@/assets/imgs/display/normal/mz-dot.png"), dotImg: require("@/assets/imgs/display/normal/mz-dot.png"),
dotImgS: require("@/assets/imgs/display/normal/mz-dot-s.png"), dotImgS: require("@/assets/imgs/display/normal/mz-dot-s.png"),
page: null, page: null,
swiperOption: {
// autoplay: false,
effect: "fade",
pagination: {
el: ".swiper-pagination",
type: "custom",
clickable: true,
renderCustom: function (swiper, current, total) {
var customPaginationHtml = "";
for (var i = 0; i < total; i++) {
//判断哪个分页器此刻应该被激活
if (i == current - 1) {
customPaginationHtml += `<img class="page-item" src="${vm.dotImgS}" />`;
} else {
customPaginationHtml += `<img class="page-item" src="${vm.dotImg}" />`;
}
}
return `<span id="page">` + customPaginationHtml + `</span>`;
},
},
on: {
click: function (e) {
let page = document.getElementById("page");
var item = e.target;
var lists = Array.from(page.querySelectorAll("img"));
let index = lists.indexOf(item);
vm.swiper.slideTo(index);
},
},
},
}; };
}, },
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
},
},
async mounted() { async mounted() {
this.loadDetail(); this.loadDetail();
}, },
...@@ -781,12 +742,13 @@ export default { ...@@ -781,12 +742,13 @@ export default {
.basic-info { .basic-info {
.body-item { .body-item {
display: flex; display: flex;
align-items: center;
.label { .label {
display: flex; display: flex;
align-items: center; align-items: center;
width: 140px; width: 140px;
margin-right: 26px; // margin-right: 26px;
margin-bottom: 10px; // margin-bottom: 10px;
font-weight: bold; font-weight: bold;
color: #858585; color: #858585;
.svg-icon { .svg-icon {
......
src/views/display/components/ChStyle-unit.vue
浏览文件 @ 011391ed
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
<div class="unit-content"> <div class="unit-content">
<div class="unit-title">{{ item.title }}</div> <div class="unit-title">{{ item.title }}</div>
<div class="unit-intro">{{ item.intro }}</div> <div class="unit-intro" v-html="item.intro"></div>
</div> </div>
</div> </div>
<div class="units-title"> <div class="units-title">
......
src/views/display/components/ChStyleUnit.vue deleted 100644 → 0
浏览文件 @ e4bf2144
<!-- -->
<template>
<div class="units-content">
<div class="units-content-item" v-for="(unit, index) in units" :key="index">
<div class="unit-title">{{ unit.title }}</div>
<div class="unit-intro">{{ unit.intro }}</div>
<div class="unit-imgs" v-if="unit.imagesVo && unit.imagesVo.length > 0">
<div class="img-item" v-for="(i, idx) in unit.imagesVo" :key="idx">
<img :src="$getFullUrl(i.pressUrl||i.url)" />
</div>
</div>
<ChStyleUnit
:units="unit.children"
v-if="unit.children && unit.children.length > 0"
/>
</div>
</div>
</template>
<script>
export default {
name: "ChStyleUnit",
props: {
units: {
type: Array,
default: () => [],
},
},
};
</script>
<style lang="scss" scoped>
.units-content-item {
margin-bottom: 20px;
.unit-title {
font-size: 36px;
font-family: KaiTi;
font-weight: 400;
color: #4e392c;
line-height: 83px;
display: flex;
justify-content: center;
}
.unit-intro {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #444444;
text-indent: 36px;
margin-bottom: 10px;
line-height: 32px;
}
.unit-imgs {
width: 100%;
.img-item {
width: 100%;
img {
width: 100%;
}
}
}
}
</style>
src/views/display/components/RedStyle.vue
浏览文件 @ 011391ed
...@@ -140,7 +140,7 @@ ...@@ -140,7 +140,7 @@
<div class="wrapper"> <div class="wrapper">
<div class="custom-title">展览简介</div> <div class="custom-title">展览简介</div>
<div class="intro-content"> <div class="intro-content">
<div class="intro-content-container">{{ displayDetail.intro }}</div> <div class="intro-content-container" v-html="displayDetail.intro"></div>
</div> </div>
<div <div
class="intro-video" class="intro-video"
...@@ -201,7 +201,7 @@ ...@@ -201,7 +201,7 @@
</div> </div>
<div class="unit-name-intro" v-if="i == 0"> <div class="unit-name-intro" v-if="i == 0">
<div class="unit-name">{{ currentUnit.title }}</div> <div class="unit-name">{{ currentUnit.title }}</div>
<div class="unit-intro">{{ currentUnit.intro }}</div> <div class="unit-intro" v-html="currentUnit.intro "></div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
......
src/views/display/components/detail-dialog.vue
浏览文件 @ 011391ed
<template> <template>
<div class="detail-book"> <div class="detail-book">
<div v-if="list.length > 0"> <div v-if="list.length > 0">
<div <div class="book-page" v-for="(node, i) in list" :key="i"
class="book-page" :class="{ active: i === activePage, flipped: i < activePage }">
v-for="(node, i) in list" <div class="article-title" @click="handlePageChange(i, true)" v-if="node.imagesVo[0]">
:key="i" <div class="img" :style="`background-image: url('${node.imagesVo[0] &&node.imagesVo[0].url}')`"></div>
:class="{ active: i === activePage, flipped: i < activePage }"
>
<div
class="article-title"
@click="handlePageChange(i, true)"
v-if="node.imagesVo[0]"
>
<div
class="img"
:style="`background-image: url('${node.imagesVo[0] &&node.imagesVo[0].url}')`"
></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)"> <div class="article-big-title" v-else @click="handlePageChange(i, true)">
<p> <p>
...@@ -35,191 +24,208 @@ ...@@ -35,191 +24,208 @@
</p> </p>
</div> </div>
<div class="article-content" v-else @click="handlePageChange(i)"> <div class="article-content" v-else @click="handlePageChange(i)">
<div class="content-detail">{{ list[i - 1].intro }}</div> <div class="content-detail" v-html="list[i - 1].intro "></div>
</div> </div>
</div> </div>
<div class="book-page"> <div class="book-page">
<div class="article-content"> <div class="article-content">
<div class="content-detail">{{ list[list.length - 1].intro }}</div> <div class="content-detail" v-html="list[list.length - 1].intro"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
data: { data: {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
title: { title: {
type: String, type: String,
default: "", default: "",
}, },
img: { img: {
type: String, type: String,
default: "", default: "",
},
}, },
}, data() {
data() { return {
return { activePage: 0,
activePage: 0, };
};
},
computed: {
list() {
let arr = this.data;
return this.transformTree2List(arr);
}, },
}, computed: {
methods: { list() {
handlePageChange(index, flag) { let arr = this.data;
if (flag) {
this.activePage = index; return this.transformTree2List(arr);
} else { },
this.activePage = index + 1;
}
}, },
transformTree2List(arr) { methods: {
let list = []; handlePageChange(index, flag) {
let loopTree = (data) => { if (flag) {
data.forEach((n) => { this.activePage = index;
list.push(n); } else {
if (n.children && n.children.length > 0) { this.activePage = index + 1;
loopTree(n.children); }
} },
}); 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); loopTree(arr);
console.log("list", list); console.log("list", list);
return list; return list;
},
}, },
}, };
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.detail-book { .detail-book {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 800px; min-height: 800px;
perspective: 1000px; perspective: 1000px;
> div {
// position: absolute; >div {
position: absolute; // position: absolute;
// width: 800px; position: absolute;
width: 48%; // width: 800px;
height: 600px; width: 48%;
top: 50%; height: 600px;
left: 50%; top: 50%;
transform: translate(0%, -50%); left: 50%;
transform-style: preserve-3d; transform: translate(0%, -50%);
/* &:first-child, transform-style: preserve-3d;
/* &:first-child,
&:last-child { &:last-child {
box-shadow: 0px -5px 0 2px #8f712fdb; box-shadow: 0px -5px 0 2px #8f712fdb;
} */ } */
}
.book-page {
position: absolute;
// width: 800px;
width: 100%;
height: 100%;
transition: all 1.5s;
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; .book-page {
transform: rotateY(-180deg);
}
> div {
position: absolute; position: absolute;
// width: 800px;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box; transition: all 1.5s;
backface-visibility: hidden; transform-style: preserve-3d;
background-color: #bfa277; transform-origin: 0 0;
} border-left: 2px solid #8f712fdb;
.book-cover { box-shadow: 6px 6px 0 2px #8f712fdb;
display: flex;
justify-content: space-between; &.active {
align-items: center; z-index: 1;
padding: 30px; }
width: 100%;
height: 100%; &.flipped {
// z-index: 1;
transform: rotateY(-180deg);
}
> .img { >div {
width: 600px; position: absolute;
height: 400px; width: 100%;
background-size: cover; height: 100%;
background-repeat: no-repeat; box-sizing: border-box;
background-position: 50% 50%; backface-visibility: hidden;
margin: 50px auto; background-color: #bfa277;
} }
> p {
.book-cover {
display: flex; display: flex;
> span { justify-content: space-between;
display: block; align-items: center;
text-align: center; padding: 30px;
font-size: 22px; width: 100%;
font-weight: 600; height: 100%;
font-family: "楷体";
writing-mode: tb-rl; >.img {
&.title { width: 600px;
color: #850e0e; height: 400px;
font-size: 30px; background-size: cover;
} background-repeat: no-repeat;
&.seq { background-position: 50% 50%;
padding-bottom: 100px; margin: 50px auto;
margin-left: 20px; }
>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 { .article-title {
@extend .book-cover; @extend .book-cover;
transform: rotateY(180deg); transform: rotateY(180deg);
> .img {
border-radius: 10px; >.img {
border-radius: 10px;
}
} }
}
.article-big-title { .article-big-title {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
transform: rotateY(180deg); transform: rotateY(180deg);
> p {
font-size: 36px; >p {
text-align: center; font-size: 36px;
font-family: "华文行楷"; text-align: center;
> span { font-family: "华文行楷";
display: block;
margin: 20px; >span {
&.title { display: block;
color: #fff2b3; margin: 20px;
&.title {
color: #fff2b3;
}
} }
} }
} }
}
.article-content { .article-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 50px 100px; padding: 50px 100px;
line-height: 1.8; line-height: 1.8;
color: #333; color: #333;
font-weight: 600; font-weight: 600;
font-family: "仿宋"; font-family: "仿宋";
text-indent: 32px; text-indent: 32px;
}
} }
} }
} </style>
</style> \ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论