Skip to content

E
exhibition_backstage
提交 b35bddfc authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

预览模板完善

上级 f96261bf
隐藏空白字符变更
内嵌 并排
正在显示 包含 3289 行增加 和 1168 行删除
src/components/Footer/index.vue
浏览文件 @ b35bddfc
<!-- -->
<template>
<div class="footer">
<div class="footer" :style="{ background }">
<span>贵州省文化和旅游厅博物馆处版权所有</span>
<span>中国知网提供技术支持</span>
</div>
......@@ -9,11 +9,18 @@
<script>
export default {
name: "Footer",
props: {
background: {
type: String,
default: "#2069c4", //默认为主题蓝
},
},
};
</script>
<style lang="scss" scoped>
.footer{
width: 100%;
display: flex;
height: 200px;
padding: 0 24px;
......
src/components/NavBar/index.vue
浏览文件 @ b35bddfc
<template>
<div class="nav" id="navbar">
<div class="nav" id="navbar" :style="{ background }">
<div class="container">
<div class="logo-container">
<img src="@/assets/imgs/display/logo.png" />
......@@ -26,6 +26,12 @@
<script>
export default {
name: "Navbar",
props: {
background: {
type: String,
default: "#2069c4", //默认为主题蓝
},
},
data() {
return {
pages: [
......@@ -56,7 +62,6 @@ export default {
],
};
},
};
</script>
......@@ -99,6 +104,10 @@ export default {
.logo-container {
width: 380px;
height: 74px;
img{
width: 100%;
height: 100%;
}
}
.right {
display: flex;
......@@ -111,7 +120,7 @@ export default {
min-width: 512px;
height: 100%;
.tab-item {
margin-right: 50px;
margin-right: 34px;
color: #fff;
display: flex;
align-items: center;
......
src/components/ReaderOperations/index.vue
浏览文件 @ b35bddfc
......@@ -3,31 +3,42 @@
<div class="operations">
<span class="operation-item" v-if="like">
<svg-icon
:style="{ fontSize: iconSize + 'px' }"
icon-class="like"
:class="loveCountStatus ? 'like' : ''"
:icon-class="loveCountStatus ? 'mz-like-s' : 'mz-like'"
:style="{
fontSize: iconSize + 'px',
color: loveCountStatus ? selectColor : '#61666d',
}"
></svg-icon>
<span>{{ loveCount }}</span>
<span>{{ formatNum(loveCount) }}</span>
</span>
<span class="operation-item" v-if="collect">
<span class="operation-item" v-if="collect">
<svg-icon
:style="{ fontSize: iconSize + 'px' }"
icon-class="collect"
:class="collectCountStatus ? 'collect' : ''"
:icon-class="collectCountStatus ? 'collect-s' : 'collect'"
:style="{
fontSize: iconSize + 'px',
color: collectCountStatus ? selectColor : '#61666d',
}"
></svg-icon>
<span>{{ collectCount }}</span>
<span>{{ formatNum(collectCount) }}</span>
</span>
<span v-if="share" class="operation-item">
<svg-icon
icon-class="share"
:style="{ fontSize: iconSize + 'px' }"
icon-class="mz-fx"
class="collect"
:style="{
fontSize: iconSize + 'px',
color: selectColor,
}"
></svg-icon>
<span>分享</span>
</span>
</div>
</div>
</template>
<script>
import { formatNum } from "@/utils/index";
export default {
name: "ReaderOperations",
props: {
......@@ -81,7 +92,11 @@ export default {
},
iconSize: {
type: [Number, String],
default: 36,
default: 32,
},
selectColor: {
type: String,
default: "#2069c4",
},
},
data() {
......@@ -91,22 +106,27 @@ export default {
curLink: "", //当前地址栏的链接
};
},
methods: {
formatNum(num) {
return formatNum(num);
},
},
};
</script>
<style lang="scss" scoped>
.operations {
margin-top: 22px;
// margin-top: 22px;
display: flex;
// justify-content: space-between;
justify-content: space-between;
.operation-item {
display: flex;
align-items: center;
margin-right: 32px;
// margin-right: 32px;
cursor: pointer;
}
.svg-icon {
margin-right: 16px;
margin-right: 10px;
font-size: 36px;
color: #61666d;
}
......@@ -114,7 +134,28 @@ export default {
color: #831122;
}
.collect {
color: #2069c4;
color: #831122;
}
}
.el-button--text {
color: #2069c4;
}
.qrcode,
.copy {
display: flex;
// justify-content: space-between;
align-items: center;
}
.qrcode {
.img-container {
width: 200px;
height: 200px;
img {
width: 100%;
height: 100%;
}
}
}
</style>
\ No newline at end of file
src/components/Video/index.vue
浏览文件 @ b35bddfc
<template>
<div class="video-container" @click="hanleClick">
<video :src="url" class="video-dom" ref="video"></video>
<div :class="['video-container', theme]" @click="hanleClick">
<video :src="url" class="video-dom" ref="video" :controls="isPlaying"></video>
<div class="modal" :style="{ opacity: opacity }">
<div class="play-btn">
<i class="el-icon-caret-right"></i>
......@@ -18,6 +18,10 @@ export default {
default: "",
type: String,
},
theme: {
default: "red",
type: String,
},
},
data() {
return {
......@@ -58,48 +62,66 @@ export default {
width: 100%;
}
.modal {
width: 100%;
height: 100%;
background-color: rgba($color: #000000, $alpha: 0.5);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
bottom: 0;
transition: all 0.5s ease;
position: absolute;
z-index: 9;
// width: 100%;
// height: 100%;
// display: flex;
// align-items: center;
// justify-content: center;
// background-color: rgba($color: #000000, $alpha: 0.5);
// display: flex;
// justify-content: center;
// align-items: center;
// position: absolute;
// left: 0;
// bottom: 0;
// transition: all 0.5s ease;
// position: absolute;
// z-index: 9;
.play-btn {
width: 100px;
height: 70px;
border: 2px solid #892325;
// background-color: #fff;
border-radius: 20px;
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;
color: #892325;
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
i {
font-size: 50px;
font-size: 70px;
z-index: 1;
transform: scaleX(1.5);
}
}
}
.blur {
width: 100px;
height: 70px;
width: 120px;
height: 84px;
background-color: #fff;
position: absolute;
left: 50%;
bottom: 50%;
transform: translate(-50%, 50%);
filter: blur(26px);
filter: blur(20px);
z-index: 0;
}
}
.red {
.play-btn {
border: 2px solid #892325;
color: #892325;
}
}
.blue {
.play-btn {
border: 2px solid #2069c4;
color: #2069c4;
}
}
</style>
\ No newline at end of file
src/icons/svg/collect-s.svg 0 → 100644
浏览文件 @ b35bddfc
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1661508484412" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2637" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28"><path d="M519.2 807.2l255.2 133.6c12 6.4 25.6-4 23.2-16.8L748.8 640c-0.8-4.8 0.8-10.4 4.8-14.4L960 424.8c9.6-9.6 4-25.6-8.8-27.2l-284.8-41.6c-5.6-0.8-9.6-4-12-8.8l-128-257.6c-5.6-12-23.2-12-28.8 0L370.4 348c-2.4 4.8-7.2 8-12 8.8L73.6 398.4c-13.6 1.6-18.4 17.6-8.8 27.2l206.4 200.8c4 4 5.6 8.8 4.8 14.4l-48.8 284c-2.4 12.8 11.2 23.2 23.2 16.8L505.6 808c4-3.2 8.8-3.2 13.6-0.8z" p-id="2638"></path></svg>
\ No newline at end of file
src/icons/svg/collect.svg
浏览文件 @ b35bddfc
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1657871872507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13498" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z" p-id="13499"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1661508487793" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2779" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28"><path d="M946.44567 407.179676c-3.706415-11.056823-13.268188-19.154245-24.823362-20.929682l-263.117606-40.614L540.930913 93.91802c-5.108345-10.93198-16.071024-17.939581-28.155247-17.971303-0.030699 0-0.062422 0-0.062422 0-12.021801 0-22.985504 6.945179-28.155247 17.84646L365.79001 345.247138l-263.917832 39.507806c-11.399631 1.961678-20.774139 10.060123-24.355711 21.054525-3.613294 10.963703-0.778736 23.047926 7.257288 31.332612l191.202717 196.684568-45.6282 277.132808c-1.930979 11.741415 3.0208 23.608697 12.769838 30.491455 9.717316 6.882757 22.549575 7.630794 32.983205 1.868557l235.366565-129.47177 234.868215 130.282229c4.703115 2.616594 9.904581 3.924379 15.106046 3.924379 6.291287 0 12.551874-1.868557 17.877159-5.699816 9.748015-6.852058 14.763239-18.687618 12.862959-30.460756L747.488339 634.635061l191.669344-195.84341C947.286828 430.476265 950.121386 418.2365 946.44567 407.179676zM691.986257 602.337471c-6.882757 7.039323-10.060123 16.974603-8.471952 26.722618l37.000706 229.480508L526.666024 751.025908c-9.343809-5.232165-20.74344-5.232165-30.117948-0.062422L302.262138 857.856006l37.779442-229.387387c1.588171-9.717316-1.52575-19.652596-8.40953-26.754341L170.703847 436.176081l220.156142-31.686676c2.191922-0.378623 4.288676-0.980327 6.274914-1.771343 7.674796-2.63092 14.32117-8.233522 18.061354-16.156982l97.392144-206.183919 96.550986 206.712969c4.422729 9.406231 13.205766 16.008602 23.483854 17.596773l219.638349 33.886785L691.986257 602.337471z" p-id="2780"></path></svg>
\ No newline at end of file
src/icons/svg/keyword.svg 0 → 100644
浏览文件 @ b35bddfc
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1661225574756" class="icon" viewBox="0 0 1048 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9316" xmlns:xlink="http://www.w3.org/1999/xlink" width="204.6875" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M813.70567198 461.89602354c9.07430273 31.29132128 13.94384062 64.36927793 13.94384062 98.58645878 0 195.14037656-158.19503115 353.33540771-353.3319 353.33540771-195.15000058 0-353.34503174-158.19503115-353.34503174-353.33540771 0-195.13776797 158.19503115-353.33540771 353.34503174-353.33540771 31.18329844 0 61.41976348 4.04565557 90.22100009 11.63031592l15.87276739-45.63487003c-33.79642558-9.23593183-69.36887373-14.17139737-106.09376748-14.17139735-221.75976533 0-401.5209832 179.76391612-401.5209832 401.51135917 0 221.75364903 179.7613084 401.51747549 401.5209832 401.51747549 221.74654394 0 401.51396777-179.76391612 401.51396777-401.51747549 0-40.41041573-5.9762918-79.42428018-17.08313643-116.21240419L813.70567198 461.89602354zM474.31761348 415.9361876c7.17172998 0 14.21969766 0.53048672 21.11125342 1.5397418l16.0431205-46.12587188c-12.02381807-2.34869326-24.44284776-3.59243086-37.15437392-3.59243086-106.44067969 0-192.73196075 86.28768369-192.73196075 192.72485566 0 106.4441874 86.29128105 192.72836338 192.73196074 192.72836338 106.4441874 0 192.73196075-86.28417598 192.73196075-192.72836338 0-13.57498301-1.41148213-26.81879326-4.08082325-39.60056513l-45.72976025 17.8946956c1.0662794 7.08043711 1.62230977 14.32861875 1.62230977 21.70586953 0 79.83442178-64.71538066 144.54278701-144.54278702 144.54278702-79.83091406 0-144.5560084-64.70836523-144.55600839-144.54278702C329.76169472 480.65156826 394.48579941 415.9361876 474.31761348 415.9361876zM972.51375781 239.27199102L795.52460234 239.27199102 795.52460234 62l-48.18206865 48.78289073 0 0.20904784L619.18806464 239.27199102l-0.32762636 0 0 142.81418847L442.18658076 558.74774287l33.86226445 33.85264043 176.67651797-176.6641957L795.52460234 415.9361876l0-0.18796729 0.17655909 0.18798135 128.30556885-128.31519288-0.18447364-0.17305136 0.1844543 0L972.51375781 239.27199102zM777.16786133 367.75762666l-110.11922227 0L667.04863818 257.61818691l80.29385333-80.29996962 0 110.12888407 110.13678984 0L777.16786133 367.75762666z" p-id="9317"></path></svg>
\ No newline at end of file
src/icons/svg/mz-fx.svg 0 → 100644
浏览文件 @ b35bddfc
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1661484383322" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2843" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M469.333333 913.066667c-213.333333 0-384-170.666667-384-384s170.666667-384 384-384c12.8 0 25.6 12.8 25.6 25.6s-12.8 29.866667-25.6 29.866666c-183.466667 0-328.533333 149.333333-328.533333 328.533334s149.333333 328.533333 328.533333 328.533333 328.533333-149.333333 328.533334-328.533333c0-12.8 12.8-25.6 25.6-25.6s25.6 12.8 25.6 25.6c4.266667 213.333333-170.666667 384-379.733334 384z" p-id="2844"></path><path d="M640 123.733333c-4.266667 4.266667-34.133333 21.333333-38.4 51.2-8.533333 34.133333 12.8 72.533333 42.666667 85.333334 12.8 8.533333 38.4 8.533333 51.2-4.266667 4.266667-8.533333 8.533333-17.066667 8.533333-29.866667 0-4.266667-4.266667-12.8-4.266667-12.8 0-4.266667-4.266667-8.533333-8.533333-12.8-4.266667-4.266667-8.533333-4.266667-12.8-4.266666h-8.533333c-4.266667 4.266667-8.533333 4.266667-12.8 8.533333-4.266667 4.266667-8.533333 8.533333-12.8 8.533333-4.266667 0-8.533333-8.533333-8.533334-12.8-8.533333-17.066667 0-34.133333 0-34.133333 4.266667-17.066667 17.066667-21.333333 25.6-25.6 4.266667 0 17.066667-8.533333 29.866667-4.266667 8.533333 0 12.8 4.266667 12.8 4.266667 8.533333 4.266667 12.8 8.533333 17.066667 8.533333 4.266667 12.8 8.533333 17.066667 12.8 21.333334 4.266667 8.533333 17.066667 21.333333 17.066666 38.4 0 4.266667 0 8.533333-4.266666 17.066666l-25.6 38.4c-4.266667 4.266667-4.266667 8.533333 0 8.533334 0 0 4.266667 4.266667 8.533333 4.266666 17.066667 0 34.133333-4.266667 46.933333-4.266666 8.533333 0 12.8 4.266667 17.066667 4.266666 17.066667 8.533333 21.333333 21.333333 25.6 34.133334 0 4.266667 4.266667 8.533333 4.266667 17.066666v17.066667s0 8.533333-4.266667 12.8c-4.266667 12.8-17.066667 21.333333-21.333333 21.333333-4.266667 4.266667-17.066667 8.533333-34.133334 8.533334 0 0-21.333333-4.266667-29.866666-17.066667 0-4.266667-4.266667-8.533333-4.266667-12.8 0-4.266667 4.266667-4.266667 12.8-8.533333 8.533333 0 8.533333 0 12.8-4.266667l4.266667-4.266667c8.533333 4.266667 8.533333 0 8.533333-4.266666 0-8.533333-4.266667-12.8-4.266667-17.066667l-8.533333-8.533333c-8.533333-4.266667-21.333333-8.533333-29.866667-4.266667-17.066667 4.266667-29.866667 25.6-34.133333 42.666667-4.266667 34.133333 21.333333 68.266667 55.466667 81.066666 29.866667 8.533333 59.733333-4.266667 64-8.533333 8.533333-4.266667 29.866667-17.066667 38.4-38.4 4.266667-12.8 4.266667-29.866667 4.266666-34.133333 0-12.8-4.266667-25.6-4.266666-34.133334 0-4.266667 0-4.266667-4.266667-8.533333 0-4.266667-4.266667-4.266667 0-8.533333 0-4.266667 4.266667-4.266667 4.266667-4.266667 12.8-8.533333 68.266667-68.266667 85.333333-123.733333 0-4.266667 4.266667-8.533333 4.266667-17.066667-8.533333-4.266667-12.8-4.266667-17.066667-8.533333-51.2-12.8-136.533333 4.266667-149.333333 12.8 0 0-4.266667 4.266667-4.266667 0 0 0-4.266667 0-4.266667-4.266667s-4.266667-4.266667-4.266666-8.533333c-4.266667-4.266667-12.8-12.8-25.6-21.333334-4.266667-4.266667-17.066667-8.533333-34.133334-12.8-29.866667-4.266667-51.2 8.533333-59.733333 12.8" p-id="2845"></path><path d="M541.866667 294.4c-8.533333 4.266667-8.533333 8.533333-8.533334 17.066667 4.266667 8.533333 12.8 12.8 21.333334 4.266666 12.8-4.266667 29.866667 0 38.4 8.533334-34.133333 0-68.266667 12.8-98.133334 34.133333-38.4 25.6-64 68.266667-72.533333 115.2 0 25.6 0 38.4 4.266667 51.2 0 8.533333 8.533333 17.066667 17.066666 17.066667s17.066667-8.533333 17.066667-21.333334v-38.4c4.266667-38.4 25.6-68.266667 55.466667-93.866666 25.6-21.333333 59.733333-29.866667 93.866666-25.6 0 12.8-4.266667 21.333333-12.8 29.866666-8.533333 8.533333-4.266667 17.066667 0 21.333334 4.266667 4.266667 8.533333 4.266667 12.8 0 25.6-42.666667 46.933333-81.066667 72.533334-123.733334l-140.8 4.266667z" p-id="2846"></path></svg>
\ No newline at end of file
src/icons/svg/mz-like-s.svg 0 → 100644
浏览文件 @ b35bddfc
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1661484392351" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3266" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M874.666667 209.066667c-89.6-89.6-230.4-89.6-320 0L507.733333 256 469.333333 213.333333C384 128 238.933333 128 149.333333 213.333333c-89.6 89.6-89.6 230.4 0 320 119.466667 115.2 238.933333 230.4 358.4 349.866667 59.733333-55.466667 115.2-110.933333 174.933334-166.4l187.733333-187.733333c89.6-89.6 89.6-234.666667 4.266667-320zM512 537.6c-76.8 0-136.533333-59.733333-136.533333-136.533333s59.733333-136.533333 136.533333-136.533334c46.933333 0 89.6 21.333333 115.2 59.733334 17.066667 21.333333 25.6 51.2 25.6 76.8 0 76.8-64 136.533333-140.8 136.533333z" p-id="3267"></path><path d="M576 358.4c-12.8-21.333333-38.4-34.133333-64-34.133333-42.666667 0-76.8 34.133333-76.8 76.8s34.133333 76.8 76.8 76.8 76.8-34.133333 76.8-76.8c4.266667-17.066667 0-29.866667-12.8-42.666667z" p-id="3268"></path></svg>
\ No newline at end of file
src/icons/svg/mz-like.svg 0 → 100644
浏览文件 @ b35bddfc
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1661484377255" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2558" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M507.733333 883.2c-8.533333 0-17.066667-4.266667-21.333333-8.533333l-332.8-324.266667c-93.866667-93.866667-93.866667-247.466667 0-337.066667 93.866667-93.866667 243.2-93.866667 337.066667 0l17.066666 17.066667 21.333334-21.333333c93.866667-93.866667 243.2-93.866667 337.066666 0C913.066667 256 938.666667 315.733333 938.666667 379.733333s-25.6 123.733333-68.266667 170.666667L691.2 725.333333l-162.133333 153.6c-4.266667 4.266667-12.8 4.266667-21.333334 4.266667zM324.266667 204.8c-46.933333 0-93.866667 17.066667-128 51.2-68.266667 68.266667-68.266667 183.466667 0 256l311.466666 302.933333 140.8-132.266666 174.933334-174.933334c68.266667-68.266667 68.266667-183.466667 0-256-68.266667-68.266667-183.466667-68.266667-256 0l-42.666667 42.666667c-12.8 12.8-29.866667 12.8-42.666667 0l-29.866666-38.4c-34.133333-34.133333-81.066667-51.2-128-51.2z m524.8 320z" p-id="2559"></path><path d="M512 524.8c-76.8 0-136.533333-59.733333-136.533333-136.533333s59.733333-136.533333 136.533333-136.533334c46.933333 0 89.6 21.333333 115.2 59.733334 17.066667 21.333333 25.6 51.2 25.6 76.8 0 72.533333-64 136.533333-140.8 136.533333z m0-217.6c-42.666667 0-76.8 34.133333-76.8 76.8s34.133333 76.8 76.8 76.8 76.8-34.133333 76.8-76.8c0-17.066667-4.266667-29.866667-12.8-42.666667-12.8-21.333333-38.4-34.133333-64-34.133333z" p-id="2560"></path><path d="M512 388.266667m-38.4 0a38.4 38.4 0 1 0 76.8 0 38.4 38.4 0 1 0-76.8 0Z" p-id="2561"></path></svg>
\ No newline at end of file
src/icons/svg/zldq.svg 0 → 100644
浏览文件 @ b35bddfc
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1661222722693" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8612" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M884.1875 931.0625H139.8125a46.875 46.875 0 0 1-46.875-46.875l110.364375-348.75h0.4565625a28.59375 28.59375 0 1 1 53.131875 20.5659375c0.0346875 0 0.069375 0.009375 0.1040625 0.01125L149.1875 860.75a14.0625 14.0625 0 0 0 14.0625 14.0625h697.5a14.0625 14.0625 0 0 0 14.0625-14.0625L767.005625 556.0146875c0.0346875 0 0.069375-0.009375 0.1040625-0.01125A28.59375 28.59375 0 1 1 820.2415625 535.4375h0.4565625L931.0625 884.1875a46.875 46.875 0 0 1-46.875 46.875zM305.75 299.1875c0-113.90625 92.34375-206.25 206.25-206.25s206.25 92.34375 206.25 206.25c0 148.321875-206.25 519.375-206.25 519.375S305.75 447.509375 305.75 299.1875z m206.25-150a150 150 0 0 0-150 150c0 126.5625 150 406.875 150 406.875s150-280.3125 150-406.875a150 150 0 0 0-150-150zM418.25 317.9375a93.75 93.75 0 1 1 93.75 93.75 93.75 93.75 0 0 1-93.75-93.75z m131.25 0a37.5 37.5 0 1 0-37.5 37.5 37.5 37.5 0 0 0 37.5-37.5z" p-id="8613"></path></svg>
\ No newline at end of file
src/icons/svg/zldw.svg 0 → 100644
浏览文件 @ b35bddfc
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1661225565711" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8894" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M839.04000031 854.40000031H803.19999969V536c0-43.51999969-27.84-81.6-69.43999969-94.87999969l-139.84000031-44.32000031v-107.68000031c0-51.19999969-41.59999969-92.80000031-92.79999938-92.79999938H279.36000031c-51.19999969 0-92.80000031 41.59999969-92.80000031 92.79999938V854.40000031H137.91999969c-17.59999969 0-31.99999969 14.4-31.99999969 31.99999969s14.4 31.99999969 31.99999969 31.99999969h701.12000062c17.59999969 0 31.99999969-14.4 31.99999969-31.99999969s-14.4-31.99999969-31.99999969-31.99999969z m-588.48 0V289.11999969c0-15.84 12.96-28.8 28.8-28.8h221.91999938c15.84 0 28.8 12.96 28.8 28.8V854.40000031H250.56000031z m343.35999938 0V464l120.48 38.23999969c14.88 4.63999969 24.79999969 18.24 24.80000062 33.92000062v318.39999938h-145.28000062z" p-id="8895"></path></svg>
\ No newline at end of file
src/icons/svg/zllx.svg 0 → 100644
浏览文件 @ b35bddfc
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1661222725755" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8752" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M517.46133333 431.55911111h369.32266667c12.85688889 0 23.32444445 10.46755555 23.32444445 23.32444444s-10.46755555 23.32444445-23.32444445 23.32444445H517.46133333c-12.85688889 0-23.32444445-10.46755555-23.32444444-23.32444445s10.46755555-23.32444445 23.32444444-23.32444444zM517.46133333 617.92711111h369.32266667c12.85688889 0 23.32444445 10.46755555 23.32444445 23.32444444s-10.46755555 23.32444445-23.32444445 23.32444445H517.46133333c-12.85688889 0-23.32444445-10.46755555-23.32444444-23.32444445 0-12.97066667 10.46755555-23.32444445 23.32444444-23.32444444zM517.46133333 804.18133333h369.32266667c12.85688889 0 23.32444445 10.46755555 23.32444445 23.32444445s-10.46755555 23.32444445-23.32444445 23.32444444H517.46133333c-12.85688889 0-23.32444445-10.46755555-23.32444444-23.32444444s10.46755555-23.32444445 23.32444444-23.32444445z" p-id="8753"></path><path d="M397.42577778 503.23911111H164.52266667c-13.88088889 0-25.03111111-11.264-25.03111112-25.03111111V245.30488889c0-13.76711111 11.15022222-25.03111111 25.03111112-25.03111111h232.90311111c13.88088889 0 25.03111111 11.264 25.03111111 25.03111111v232.78933333c0 13.88088889-11.15022222 25.14488889-25.03111111 25.14488889z m-207.872-50.06222222h182.84088889V270.336H189.55377778v182.84088889zM397.42577778 875.74755555H164.52266667c-13.88088889 0-25.03111111-11.264-25.03111112-25.0311111V617.92711111c0-13.76711111 11.15022222-25.03111111 25.03111112-25.03111111h232.90311111c13.88088889 0 25.03111111 11.264 25.03111111 25.03111111v232.90311111c0 13.76711111-11.15022222 24.91733333-25.03111111 24.91733333z m-207.872-50.06222222h182.84088889V642.95822222H189.55377778v182.72711111z" p-id="8754"></path><path d="M517.46133333 245.30488889h369.32266667c12.85688889 0 23.32444445 10.46755555 23.32444445 23.32444444s-10.46755555 23.32444445-23.32444445 23.32444445H517.46133333c-12.85688889 0-23.32444445-10.46755555-23.32444444-23.32444445s10.46755555-23.32444445 23.32444444-23.32444444z" p-id="8755"></path></svg>
\ No newline at end of file
src/icons/svg/zlxz.svg 0 → 100644
浏览文件 @ b35bddfc
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1661225572215" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9174" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M512 64C264.58 64 64 264.58 64 512s200.58 448 448 448 448-200.58 448-448S759.42 64 512 64z m295.57 743.57c-38.4 38.4-83.1 68.54-132.88 89.59C623.18 918.95 568.44 930 512 930s-111.18-11.05-162.7-32.84c-49.77-21.05-94.48-51.2-132.88-89.59-38.4-38.4-68.54-83.1-89.59-132.88C105.05 623.18 94 568.44 94 512s11.05-111.18 32.84-162.7c21.05-49.77 51.2-94.48 89.59-132.88 38.4-38.4 83.1-68.54 132.88-89.59C400.82 105.05 455.56 94 512 94s111.18 11.05 162.7 32.84c49.77 21.05 94.48 51.2 132.88 89.59 38.4 38.4 68.54 83.1 89.59 132.88C918.95 400.82 930 455.56 930 512s-11.05 111.18-32.84 162.7c-21.05 49.77-51.19 94.47-89.59 132.87z" p-id="9175"></path><path d="M508 349H380.4c-5.52 0-10 4.48-10 10v292.4H518V359c0-5.52-4.48-10-10-10z m-13.8 139.87c0 8.28-6.72 15-15 15h-70c-8.28 0-15-6.72-15-15 0-8.28 6.72-15 15-15h70c8.28 0 15 6.71 15 15z m-15-46.87h-70c-8.28 0-15-6.72-15-15 0-8.28 6.72-15 15-15h70c8.28 0 15 6.72 15 15 0 8.28-6.72 15-15 15zM643.6 489.4H548v162h105.6v-152c0-5.51-4.49-10-10-10z" p-id="9176"></path><path d="M512 192c-176.73 0-320 143.27-320 320s143.27 320 320 320 320-143.27 320-320-143.27-320-320-320z m171.6 489.4H340.4V359c0-22.09 17.91-40 40-40H508c22.09 0 40 17.91 40 40v100.4h95.6c22.09 0 40 17.91 40 40v182z" p-id="9177"></path></svg>
\ No newline at end of file
src/layout/components/Sidebar/index.vue
浏览文件 @ b35bddfc
......@@ -10,6 +10,7 @@
:unique-opened="false"
:active-text-color="variables.menuActiveText"
:collapse-transition="false"
:default-openeds="openeds"
mode="vertical"
>
<sidebar-item
......@@ -58,6 +59,7 @@ export default {
data() {
return {
routes: [],
openeds:['/business','/system']
};
},
created() {
......
src/router/index.js
浏览文件 @ b35bddfc
......@@ -86,15 +86,15 @@ export const constantRoutes = [{
icon: 'display'
}
},
{
path: 'boutique',
name: 'Boutique',
component: () => import('@/views/boutique/index'),
meta: {
title: '精品展管理',
icon: 'boutique'
}
},
// {
// path: 'boutique',
// name: 'Boutique',
// component: () => import('@/views/boutique/index'),
// meta: {
// title: '精品展管理',
// icon: 'boutique'
// }
// },
{
path: 'museum',
name: 'Museum',
......
src/utils/index.js
浏览文件 @ b35bddfc
......@@ -179,3 +179,21 @@ export function getFullUrl(url) {
}
return fullUrl
}
/**
* 增加万单位
* @param num
*/
export function formatNum(num) {
num = Number(num);
console.log(num);
if (num == 0) {
return num + '';
} else
if (num > 0 && num < 10000) {
return num + '';
} else {
return (num / 10000).toFixed(1) + 'w';
}
}
\ No newline at end of file
src/views/display/components/PreviewDialog.vue
浏览文件 @ b35bddfc
......@@ -12,12 +12,21 @@
<div class="label">{{ title }}</div>
</div>
<div class="dialog-content">
<NormalStyle
:displayDetail="displayDetail"
<BlueStyle
v-if="displayDetail.themeType == '1'"
:displayDetail="displayDetail"
:dicts="dicts"
/>
<div v-else-if="displayDetail.themeType == '2'">中国风主题</div>
<div v-else-if="displayDetail.themeType == '3'">红色主题</div>
<ChStyle
v-if="displayDetail.themeType == '2'"
:displayDetail="displayDetail"
:dicts="dicts"
/>
<RedStyle
v-if="displayDetail.themeType == '3'"
:displayDetail="displayDetail"
:dicts="dicts"
/>
<div class="dialog-footer">
<el-button type="primary" @click="handleClose">关闭</el-button>
</div>
......@@ -26,13 +35,21 @@
</template>
<script>
import NormalStyle from "./templates/NormalStyle.vue";
import BlueStyle from "./templates/BlueStyle.vue";
// import NormalStyle from "./components/NormalStyle.vue";
import ChStyle from "./templates/ChStyle.vue";
import RedStyle from "./templates/RedStyle.vue";
import NavBar from '@/components/NavBar';
import Footer from '@/components/Footer';
import { mapGetters } from "vuex";
export default {
name: "PreviewDialog",
components: {
NormalStyle,
BlueStyle,
ChStyle,
RedStyle,
NavBar,
Footer
},
props: {
visible: {
......@@ -44,11 +61,14 @@ export default {
default: () => ({}),
},
},
computed: {
...mapGetters(["dicts"]),
title() {
return "预览——" + this.displayDetail.title;
},
},
watch: {
visible: {
handler: function (value) {
......@@ -63,7 +83,12 @@ export default {
dialogVisible: false,
};
},
async mounted() {
await this.$store.dispatch("dict/getDictList", [
"displayType",
"displayCharacter",
]);
},
methods: {
handleClose(done) {
this.$emit("handleClose");
......
src/views/display/components/templates/BlueStyle.vue 0 → 100644
浏览文件 @ b35bddfc
<template>
<div class="content">
<NavBar />
<!-- 展览图片 -->
<div
class="
content-item
display-detail_imgs
wow
animate__animated animate__fadeInDownBig
"
ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
>
<el-image
:src="
$getFullUrl(
displayDetail.faceImagePressUrl || displayDetail.faceImageUrl
)
"
fit="cover"
></el-image>
</div>
<div class="wrapper wow animate__animated animate__fadeInUpBig">
<div class="inner">
<!-- 展览基本信息 -->
<div class="content-item display-detail_basic_info">
<div class="info-container">
<div
class="
info-container-left
wow
animate__animated animate__fadeInLeft
"
>
<el-carousel>
<el-carousel-item
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
class="imagesVo-image-container"
>
<div
class="img-container"
@click="handelPreviewImages(displayDetail.imagesVo)"
>
<img :src="item.url" alt="点击查看大图" srcset="" />
</div>
<div
class="enlarge"
@click="handelPreviewImages(displayDetail.imagesVo)"
>
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
</el-carousel-item>
</el-carousel>
</div>
<div
class="
info-container-right
wow
animate__animated animate__fadeInRight
"
>
<div class="info-title">
<span>{{ displayDetail.title }} </span>
<div class="view-count">
<svg-icon icon-class="view"></svg-icon>
<span>{{ displayDetail.browseCount }}</span>
</div>
</div>
<el-row :span="20">
<el-col :span="15" class="left">
<div class="basic-info">
<div class="body-item">
<span class="label">
<svg-icon icon-class="keyword"></svg-icon>
关键词：</span
>
<span class="value">{{ displayDetail.keyword }}</span>
</div>
<div class="body-item">
<span class="label">
<svg-icon icon-class="zllx"></svg-icon>展览类型：</span
>
<span class="value">{{
dicts.displayType[displayDetail.type]
}}</span>
</div>
<div class="body-item">
<span class="label">
<svg-icon icon-class="zlxz"></svg-icon>展览性质：</span
>
<span class="value">{{
dicts.displayCharacter[displayDetail.displayCharacter]
}}</span>
</div>
<div class="body-item">
<span class="label"
><svg-icon icon-class="zldw"></svg-icon>展览单位：</span
>
<span class="value">{{ displayDetail.deptName }}</span>
</div>
<div class="body-item">
<span class="label"
><svg-icon icon-class="zldq"></svg-icon>展览地区：</span
>
<span class="value">{{ displayDetail.regionName }}</span>
</div>
</div>
</el-col>
<el-col :span="9" class="right">
<!-- <div class="qrcode">
<img
src="@/assets/imgs/display/normal/test-qrcode.png"
alt=""
/>
</div> -->
<div class="tools">
<ReaderOperations
:loveCount="displayDetail.loveCount"
:loveCountStatus="Boolean(displayDetail.loveCountStatus)"
:collectCount="displayDetail.collectCount"
:collectCountStatus="
Boolean(displayDetail.collectCountStatus)
"
:sourceId="displayDetail.exhibitionId"
:title="displayDetail.title"
:sourceType="'biz_exhibition'"
:iconSize="24"
/>
</div>
</el-col>
</el-row>
</div>
</div>
<div
class="audio wow animate__animated animate__fadeInRight"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
@click="handleClickAudio"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
>
<img src="@/assets/imgs/display/normal/music.png" alt="" />
<!-- <svg-icon icon-class="music"></svg-icon> -->
<AudioPlayer
style="display: none"
:url="$getFullUrl(displayDetail.audiosVo[0].url)"
ref="AudioPlayer"
/>
</div>
</div>
<!-- 展览简介 -->
<div class="content-item display-detail_intro">
<div class="intro-content wow animate__animated animate__fadeInLeft">
<div class="intro-title">
<svg-icon icon-class="jianjie"></svg-icon>
<span>展览简介</span>
</div>
<div
class="intro-content-container"
v-html="displayDetail.intro"
></div>
</div>
<div
class="intro-video wow animate__animated animate__fadeInRight"
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
>
<el-carousel :interval="4000" type="card" indicator-position="none">
<el-carousel-item
v-for="item in displayDetail.videosVo"
:key="item.fileId"
>
<Video :url="$getFullUrl(item.url)" theme="blue" />
</el-carousel-item>
</el-carousel>
</div>
</div>
<!--展览单元 -->
<div
class="content-item display-detail_units"
ref="units"
v-if="displayDetail.exhibitionUnits.length > 0"
>
<div class="custom_title wow animate__animated animate__fadeInUp">
<div class="desc">
<div class="divider"></div>
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
</div>
<div class="center">
<svg-icon icon-class="unit"></svg-icon>
<span class="title">展览单元</span>
</div>
<div class="desc">
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
<div class="divider"></div>
</div>
</div>
<div class="unit-container">
<div
class="
unit-content-menu
wow
animate__animated animate__fadeInLeft
"
>
<!-- 只能单开 unique-opened -->
<menu-list
:items="displayDetail.exhibitionUnits"
:isCollapse="false"
@open="handleOpenUnit"
style="height: 100%"
></menu-list>
</div>
<div
class="unit-content wow animate__animated animate__fadeInRight"
>
<div
class="text-indent unit-content_intro"
v-if="curUnit.intro"
v-html="curUnit.intro"
>
<!-- {{ curUnit.intro }} -->
</div>
<div
class="unit-content_images"
v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0"
>
<el-carousel
indicator-position="outside"
:autoplay="false"
height="600px"
:loop="false"
>
<el-carousel-item
v-for="item in curUnit.imagesVo"
:key="item.euId"
>
<div class="unit-content_images_container">
<el-image
:src="$getFullUrl(item.pressUrl)"
fit="contain"
class="images_img"
></el-image>
<div
class="enlarge"
@click="handelPreviewImages(curUnit.imagesVo)"
>
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
<div class="desc">
{{ item.name.split(".")[0] }}
</div>
</div>
</el-carousel-item>
</el-carousel>
<!-- <el-col
:span="24 / curUnit.imagesVo.length"
v-for="item in curUnit.imagesVo"
:key="item.euId"
class="margin-bottom-32 unit-content_images_container"
>
<img :src="$getFullUrl(item.pressUrl)" width="100%" />
<div
class="enlarge"
@click="handelPreviewImages(curUnit.imagesVo)"
>
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
<div class="unit-content_images_desc">
{{ item.name }}
</div>
</el-col> -->
</div>
<div
class="unit-content_videos"
v-if="curUnit.videosVo && curUnit.videosVo.length > 0"
>
<el-row :gutter="20">
<el-col
:span="24 / curUnit.videosVo.length"
v-for="item in curUnit.videosVo"
:key="item.euId"
>
<Video :url="$getFullUrl(item.url)" />
</el-col>
</el-row>
</div>
</div>
</div>
</div>
<!--展览相关文物 -->
<div
class="content-item display-detail_relateRc"
ref="units"
v-if="
displayDetail.culturalRelicVo &&
displayDetail.culturalRelicVo.length > 0
"
>
<el-row :gutter="26">
<el-col
:span="index == 0 ? 12 : 4"
v-for="(item, index) in displayDetail.culturalRelicVo"
:key="index"
>
<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>
<div class="cr-intro">{{ item.intro }}</div>
</div>
</div>
</el-col>
</el-row>
</div>
<!-- 相关文献 -->
<div
class="content-item display-detail_lts"
v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0
"
>
<!-- <div class="wrapper"> -->
<div class="custom_title wow animate__animated animate__fadeInUp">
<div class="desc">
<div class="divider"></div>
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
</div>
<div class="center">
<svg-icon icon-class="wenxian"></svg-icon>
<span class="title">相关文献</span>
</div>
<div class="desc">
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
<div class="divider"></div>
</div>
</div>
<div class="lts-content wow animate__animated animate__fadeInUp">
<el-table
:data="displayDetail.literatureVo"
:header-cell-style="{
background: '#eeeeee',
color: '#333',
}"
:row-style="tableRowStyle"
>
<el-table-column
prop="name"
label="名称"
align="center"
></el-table-column>
<el-table-column
prop="authors"
label="作者"
align="center"
></el-table-column>
<el-table-column
prop="date"
label="出版时间"
align="center"
></el-table-column>
<el-table-column
align="center"
prop="source"
label="出版所在刊物"
></el-table-column>
<el-table-column label="阅读" align="center">
<template slot-scope="scope">
<div class="pdf-img">
<img src="@/assets/imgs/display/ch/pdf-icon.png" />
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
<Footer />
</div>
</template>
<script>
import AudioPlayer from "@/components/AudioPlayer";
import ReaderOperations from "@/components/ReaderOperations";
import MenuList from "@/components/MenuList";
import Video from "@/components/Video";
import Card from "@/components/Card";
import ChStyleUnit from "./ChStyleUnit.vue";
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
export default {
name: "BlueStyle",
components: {
AudioPlayer,
ReaderOperations,
Video,
Card,
ChStyleUnit,
MenuList,
NavBar,
Footer,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
props: {
displayDetail: {
type: Object,
default: () => ({}),
},
dicts: {
type: Object,
default: () => ({}),
},
},
data() {
let vm = this;
return {
imgViewerVisible: false,
relateRelics: [],
audioPlaying: true,
curUnit: [],
dotImg: require("@/assets/imgs/display/normal/mz-dot.png"),
dotImgS: require("@/assets/imgs/display/normal/mz-dot-s.png"),
page: null,
};
},
async mounted() {
this.loadDetail();
},
methods: {
async loadDetail() {
if (
this.displayDetail.exhibitionUnits &&
this.displayDetail.exhibitionUnits.length > 0
) {
this.curUnit = this.displayDetail.exhibitionUnits[0];
}
processUnit(this.displayDetail.exhibitionUnits);
function processUnit(list) {
for (let o of list || []) {
if (o.children) {
if (o.children.length == 0) {
o.children = null;
} else {
processUnit(o.children);
}
}
}
}
this.$nextTick(() => {
if (
this.displayDetail.audiosVo &&
this.displayDetail.audiosVo.length > 0
) {
// this.$message.info("正在播放当前文物讲解音频，点击旋转按钮可关闭");
// this.$refs.AudioPlayer.play();
}
});
},
//节流函数
throttle(fn, gapTime) {
let _this = this;
return function () {
let _nowTime = +new Date();
if (_nowTime - _this._lastTime > gapTime || !_this._lastTime) {
fn(...arguments); // 函数可以带参数
_this._lastTime = _nowTime;
}
};
},
// 关联文献的行样式调整
tableRowStyle({ row, rowIndex }) {
if (rowIndex % 2 == 0) {
return {
background: "#f9f9f9 !important",
};
} else {
return {
background: "#fff !important",
};
}
},
// 点击音频
handleClickAudio() {
this.audioPlaying = !this.audioPlaying;
if (this.audioPlaying) {
this.$refs["AudioPlayer"].play();
// console.log(this.$refs['audioContainer']);
} else {
this.$refs["AudioPlayer"].pause();
}
},
reload() {
this.$emit("reload");
},
handelPreviewImages(images) {
this.imgViewerVisible = true;
this.imgList = images.map((item) => this.$getFullUrl(item.url));
},
closeImgViewer() {
this.imgViewerVisible = false;
},
handleOpenUnit(item) {
this.curUnit = item;
},
handleToCr(item) {
const { crId } = item;
this.$router.push({
path: "/culturalRelic/" + crId,
});
},
},
};
</script>
<style lang="scss" >
// 自定义分页器样式
#page {
height: 30px;
display: flex;
justify-content: center;
}
.page-item {
cursor: pointer;
}
</style>
<style lang="scss" scoped>
// 中国风主题样式
/**公共样式开始 */
.custom-title {
width: 50px;
background-color: #d72f3f;
min-height: 300px;
color: #fff;
font-size: 28px;
writing-mode: vertical-rl;
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgb(215 47 63 / 30%) 4px 3px 8px 1px;
letter-spacing: 10px;
}
.units {
background-image: linear-gradient(to bottom, #660d04, #520002);
min-height: 400px;
}
.content {
background: url("~@/assets/imgs/display/normal/bg1.png");
}
.content-item {
width: 100%;
}
.custom_title {
display: flex;
width: 100%;
padding: 50px 0 40px 0;
align-items: center;
.center {
width: 180px;
margin: 0 10px;
display: flex;
align-items: center;
.svg-icon {
font-size: 50px;
color: #2068c3;
margin-right: 10px;
}
.title {
font-size: 26px;
font-weight: 400;
color: #2069c4;
line-height: 101px;
}
}
.desc {
flex: 1;
display: flex;
align-items: center;
.modify {
width: 16px;
margin: 0 6px;
img {
width: 100%;
}
}
.divider {
flex: 1;
height: 6px;
background: url("~@/assets/imgs/display/normal/divider.png") 100% 100%
repeat-x;
img {
width: 100%;
}
}
}
}
.enlarge {
position: absolute;
bottom: 40px;
right: 40px;
display: flex;
z-index: 9;
background-color: #c1925b;
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
cursor: pointer;
img {
width: 24px;
height: 24px;
}
}
/**公共样式结束 */
/**样式开始 */
.content {
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/**轮播图 */
.display-detail_imgs {
height: 436px;
.el-image {
width: 100%;
height: 100%;
}
}
.wrapper {
// width: 1200px;
padding: 0 13%;
width: 100%;
display: flex;
justify-content: center;
.inner {
box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
position: relative;
margin: 36px 0 70px;
/**基本信息 */
.display-detail_basic_info {
position: relative;
.info-container {
display: flex;
justify-content: space-between;
padding: 60px 36px;
height: 100%;
background-color: #fff;
.info-container-left {
min-height: 200px;
margin-right: 50px;
flex: 1;
overflow: hidden;
.imagesVo-image-container {
// position: relative;
.img-container {
height: 280px;
width: 100%;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
}
.info-container-right {
flex: 1;
min-height: 200px;
.info-title {
font-size: 28px;
font-weight: bold;
color: #444;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 2px solid #f2f2f2;
.view-count {
font-size: 18px;
margin-top: 10px;
color: #999;
font-weight: normal;
.svg-icon {
margin-right: 10px;
}
}
}
.basic-info {
.body-item {
display: flex;
align-items: center;
margin-bottom: 10px;
.label {
display: flex;
align-items: center;
width: 140px;
// margin-right: 26px;
// margin-bottom: 10px;
font-weight: bold;
color: #858585;
.svg-icon {
width: 24px;
height: 24px;
margin-right: 16px;
}
}
}
}
.right {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.qrcode {
margin-bottom: 28px;
display: flex;
justify-content: center;
img {
width: 50%;
height: 100%;
}
}
.tools {
width: 100%;
.tools-item {
color: #858585;
flex: 1;
display: flex;
align-items: center;
cursor: pointer;
.svg-icon {
width: 22px;
height: 22px;
margin-right: 8px;
}
.like {
color: #831122;
}
.collect {
color: #2069c4;
}
}
}
}
}
}
.audio {
position: absolute;
right: -120px;
top: 34px;
cursor: pointer;
// animation: audioRotate 8s linear infinite;
transform-origin: center center;
border: 2px solid #2069c4;
padding: 10px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
transition: all 0.5s ease;
&:hover {
box-shadow: 0 0 14px rgb(0 0 0 / 40%);
}
.svg-icon {
color: #2069c4;
font-size: 80px;
}
img {
width: 60px;
height: 60px;
}
}
}
/**简介和视频 */
.display-detail_intro {
background-image: url("~@/assets/imgs/display/normal/bg.png");
background-size: 1%;
display: flex;
.intro-content,
.intro-video {
flex: 1;
}
.intro-content {
padding: 20px;
margin: 20px;
line-height: 28px;
.intro-title {
font-size: 26px;
font-weight: 400;
color: #2069c4;
line-height: 90px;
.svg-icon {
margin-right: 10px;
font-size: 36px;
}
}
.intro-content-container {
text-indent: 34px;
}
}
}
/**展览单元 */
.display-detail_units {
overflow-x: hidden;
.unit-container {
// height: 100%;
margin-bottom: 40px;
display: flex;
}
.unit-content-menu {
width: 360px;
margin-right: 40px;
}
.unit-content {
flex: 1;
padding: 40px;
background-image: url("~@/assets/imgs/display/normal/bg.png");
background-size: 1%;
.unit-content_intro {
font-size: 16px;
font-weight: 400;
color: #444444;
line-height: 36px;
text-indent: 32px;
margin-bottom: 20px;
}
.unit-content_images {
position: relative;
.unit-content_images_container {
height: 100%;
display: flex;
flex-direction: column;
.images_img {
flex: 1;
}
.desc {
display: flex;
justify-content: center;
height: 40px;
align-items: center;
}
}
}
}
}
// 关联文物
.display-detail_relateRc {
height: 560px;
background-image: url("~@/assets/imgs/display/normal/bg.png");
background-size: 1%;
padding: 50px 0;
.el-col {
&:first-child {
.img-container {
width: 100%;
height: 460px;
position: relative;
.cr-name-intro {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
padding: 100px 28px 50px;
background-image: linear-gradient(
to top,
rgba(0, 0, 0, 0.8),
rgba(0, 0, 0, 0.1)
);
.cr-name {
font-size: 48px;
font-weight: bold;
color: #ffffff;
text-align: center;
margin-bottom: 40px;
}
.cr-intro {
font-size: 16px;
font-weight: 400;
color: #ccc;
text-indent: 32px;
line-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
}
img {
width: 100%;
height: 100%;
}
}
}
&:not(&:first-child) {
margin-bottom: 30px;
.img-container {
height: 214px;
}
}
}
.img-container {
width: 100%;
height: 100%;
cursor: pointer;
overflow: hidden;
&:hover {
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
img {
transform: scale(1.1);
}
}
img {
width: 100%;
height: 214px;
object-fit: cover;
transition: all 0.5s ease;
}
}
}
/**关联文献 */
.display-detail_lts {
background-color: #fafafa;
.lts-content {
flex: 1;
}
}
}
}
}
::v-deep .el-carousel__item--card {
width: 100%;
height: 100%;
transform: translateX(0) scale(1) !important;
}
::v-deep .el-carousel {
height: 100%;
}
::v-deep .el-carousel__container {
height: 100%;
}
@keyframes filmMoveLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-1200px);
}
}
@keyframes filmMoveRight {
0% {
transform: translateX(0);
}
100% {
transform: translateX(1200px);
}
}
@keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
@-webkit-keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
.animation-play-paused {
animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari 和 Chrome */
}
</style>
\ No newline at end of file
src/views/display/components/templates/ChStyle.vue
浏览文件 @ b35bddfc
<template>
<div class="display-detail">
<NavBar :background="'#8b2729'" />
<div class="content" id="content">
<div
class="content-item sliders"
ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
>
<div class="
content-item
sliders
wow
animate__animated animate__fadeInRightBig
" ref="imgs" v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0">
<div class="view-box">
<div
class="slide-group"
:style="{
<div class="slide-group" :style="{
width: sildeGroupWidth,
left: slideGroupleft + 'px',
}"
>
<div
class="slide-item"
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
>
<img :src="$getFullUrl(item.url)" alt="" />
}">
<div class="slide-item" v-for="(item, index) in displayDetail.imagesVo" :key="index">
<img :src="$getFullUrl(item.pressUrl || item.url)" alt="" />
<div class="modal"></div>
</div>
</div>
......@@ -29,16 +24,24 @@
<div class="left-layer"></div>
<div class="center-img" @mousewheel="handleImgsSlide">
<!-- <div class="border-box"></div> -->
<img src="@/assets/imgs/display/slider-box.png" alt="" />
<img src="@/assets/imgs/display/ch/slider-box.png" alt="" />
</div>
<div class="right-layer"></div>
</div>
</div>
<div class="content-item intro wow animate__animated animate__fadeInUp">
<div class="content-item intro">
<div class="wrapper">
<div class="title">{{ displayDetail.title }}</div>
<div class="title">
<div class="wow animate__animated animate__fadeIn">
{{ displayDetail.title }}
</div>
<div class="view-count wow animate__animated animate__fadeIn">
<svg-icon icon-class="view"></svg-icon>
<span>{{ displayDetail.browseCount }}</span>
</div>
</div>
<div class="desc-and-tools">
<div class="desc">
<div class="desc wow animate__animated animate__fadeIn">
<el-row>
<el-col class="item">
<div class="label">关键词：</div>
......@@ -56,7 +59,7 @@
<div class="label">展览性质：</div>
<div class="value">
{{
dicts.displayCharacter[displayDetail.displayCharacter]
dicts.displayCharacter[displayDetail.displayCharacter]
}}
</div>
</el-col>
......@@ -66,235 +69,174 @@
</el-col>
</el-row>
</div>
<div class="tools">
<ReaderOperations
:loveCount="displayDetail.loveCount"
:loveCountStatus="Boolean(displayDetail.loveCountStatus)"
:collectCount="displayDetail.collectCount"
:collectCountStatus="Boolean(displayDetail.collectCountStatus)"
:sourceId="displayDetail.exhibitionId"
:title="displayDetail.title"
:sourceType="'biz_exhibition'"
@reload="loadDetail"
/>
<div class="tools wow animate__animated animate__fadeIn">
<ReaderOperations :loveCount="displayDetail.loveCount"
:loveCountStatus="Boolean(displayDetail.loveCountStatus)" :collectCount="displayDetail.collectCount"
:collectCountStatus="Boolean(displayDetail.collectCountStatus)" :sourceId="displayDetail.exhibitionId"
:title="displayDetail.title" :sourceType="'biz_exhibition'" @reload="reload" :selectColor="'#892325'" />
</div>
</div>
<div class="divider"></div>
<div class="intro-and-video">
<el-row :gutter="70">
<el-col
class="intro-container"
:span="
displayDetail.videosVo && displayDetail.videosVo.length > 0
? 12
: 24
"
>
<div class="intro-title">展览简介</div>
<div class="intro-content">
{{ displayDetail.intro }}
</div>
</el-col>
<el-col
:span="12"
v-if="
displayDetail.videosVo && displayDetail.videosVo.length > 0
"
class="videos"
>
<el-carousel :interval="4000" type="card" height="220px">
<el-carousel-item
v-for="item in displayDetail.videosVo"
:key="item.fileId"
>
<Video :url="$getFullUrl(item.url)" />
</el-carousel-item>
</el-carousel>
</el-col>
</el-row>
<div class="intro-container">
<div class="intro-title wow animate__animated animate__fadeInLeft">
展览简介
</div>
<div class="intro-content wow animate__animated animate__fadeInLeft" v-html="displayDetail.intro">
</div>
</div>
<div v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
class="videos wow animate__animated animate__fadeInRight">
<el-carousel>
<el-carousel-item v-for="item in displayDetail.videosVo" :key="item.fileId">
<Video :url="$getFullUrl(item.url)" />
</el-carousel-item>
</el-carousel>
</div>
</div>
<div
class="audio"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
@click="handleClickAudio"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
>
<img src="@/assets/imgs/display/audio.png" alt="" />
<AudioPlayer
style="display: none"
:url="$getFullUrl(displayDetail.audiosVo[0].url)"
ref="AudioPlayer"
/>
<div class="audio" :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
@click="handleClickAudio" v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0">
<!-- <svg-icon icon-class="music"></svg-icon> -->
<img src="@/assets/imgs/display/normal/music-red.png" alt="" />
<AudioPlayer style="display: none" :url="$getFullUrl(displayDetail.audiosVo[0].url)" ref="AudioPlayer" />
</div>
</div>
</div>
<div class="content-item units">
<div class="content-item units" 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/custom-title.png" alt="" />
<img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
</div>
<div class="custom-title-text">展览单元</div>
<div class="custom-title-suffix">
<img src="@/assets/imgs/display/custom-title.png" alt="" />
<img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
</div>
</div>
<div class="units-content">
<ul>
<li
v-for="(item, index) in displayDetail.exhibitionUnits"
:key="index"
>
<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>
</li>
</ul>
<div class="right">
<a class="clearfix" @click="unitVisible = true">
<svg-icon icon-class="book"></svg-icon>
详情
</a>
</div>
</div>
<ChStyleUnit :units="node" v-for="node in displayDetail.exhibitionUnits" :key="node.euId" />
</div>
</div>
<div class="content-item lts">
<div class="wrapper">
<div class="custom-title">
<div class="custom-title wow animate__animated animate__fadeInUp">
<div class="custom-title-prefix">
<img src="@/assets/imgs/display/custom-title.png" alt="" />
<img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
</div>
<div class="custom-title-text">关联文献</div>
<div class="custom-title-suffix">
<img src="@/assets/imgs/display/custom-title.png" alt="" />
<img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
</div>
</div>
</div>
<div
class="lts-content"
v-if="
<div class="lts-content" v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0
"
>
<div class="wrapper">
<el-table
:data="displayDetail.literatureVo"
:header-cell-style="{
">
<div class="wrapper wow animate__animated animate__fadeInUp">
<el-table :data="displayDetail.literatureVo" :header-cell-style="{
background: '#eeeeee',
color: '#333',
}"
:row-style="tableRowStyle"
>
<el-table-column
prop="name"
label="名称"
align="center"
></el-table-column>
<el-table-column
prop="authors"
label="作者"
align="center"
></el-table-column>
<el-table-column
prop="date"
label="出版时间"
align="center"
></el-table-column>
<el-table-column
align="center"
prop="source"
label="出版所在刊物"
></el-table-column>
}" :row-style="tableRowStyle">
<el-table-column prop="name" label="名称" align="center"></el-table-column>
<el-table-column prop="authors" label="作者" align="center"></el-table-column>
<el-table-column prop="date" label="出版时间" align="center"></el-table-column>
<el-table-column align="center" prop="source" label="出版所在刊物"></el-table-column>
<el-table-column label="阅读" align="center">
<template slot-scope="scope">
<div class="pdf-img" @click="handleViewLt(scope.row)">
<img src="@/assets/imgs/display/pdf-icon.png" />
<div class="pdf-img" >
<img src="@/assets/imgs/display/ch/pdf-icon.png" />
</div>
</template>
</el-table-column>
</el-table>
<!-- <div class="title">
</div>
<div class="lts-item"></div> -->
</div>
</div>
</div>
</div>
<el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :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>
<Footer :background="'#8b2729'" />
</div>
</template>
<script>
import AudioPlayer from "@/components/AudioPlayer";
import ReaderOperations from "@/components/ReaderOperations";
import Video from "@/components/Video";
import { mapGetters } from "vuex";
import { previewFile } from "@/utils/file";
export default {
components: {
AudioPlayer,
ReaderOperations,
Video,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
props: {
displayDetail: {
type: Object,
default: () => ({}),
import AudioPlayer from "@/components/AudioPlayer";
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
import ReaderOperations from "@/components/ReaderOperations";
import Card from "@/components/Card";
import Video from "@/components/Video";
import MenuList from "@/components/MenuList";
// import ChStyleUnit from "./ChStyleUnit.vue";
import ChStyleUnit from "./ChStyleUnit.vue";
import DetailDialog from "./detail-dialog.vue";
export default {
components: {
AudioPlayer,
ReaderOperations,
MenuList,
Video,
Card,
ChStyleUnit,
DetailDialog,
NavBar,
Footer,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
},
data() {
return {
options: [
{
value: "name",
label: "文物名称",
},
],
selectValue: "",
keyword: "",
// displayDetail: {},
slideImageWidth: 0, //单个图片的宽度
sildeGroupWidth: 0, //整个轮播的宽度
slideGroupleft: 0, //整个轮播距离父亲盒子的距离（中间view区域）
imgViewerVisible: false,
relateRelics: [],
imgsDom: null,
moveLeft: true,
moveRight: true,
audioPlaying: true,
};
},
computed: {
...mapGetters(["dicts"]),
},
async mounted() {
await this.$store.dispatch("dict/getDictList", [
"displayType",
"displayCharacter",
]);
this.loadDetail();
},
destroyed() {
//同时在destroyed回调中移除监听：
if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) {
//firefox支持onmousewheel
removeEventListener("DOMMouseScroll", firefoxListenFun);
}
},
methods: {
async loadDetail() {
if (Object.keys(this.displayDetail).length > 0) {
props: {
displayDetail: {
type: Object,
default: () => ({}),
},
dicts: {
type: Object,
default: () => ({}),
},
},
data() {
return {
slideImageWidth: 0, //单个图片的宽度
sildeGroupWidth: 0, //整个轮播的宽度
slideGroupleft: 0, //整个轮播距离父亲盒子的距离（中间view区域）
imgViewerVisible: false,
relateRelics: [],
imgsDom: null,
moveLeft: true,
moveRight: true,
audioPlaying: true,
unitVisible: false,
};
},
async mounted() {
this.loadDetail();
},
destroyed() {
//同时在destroyed回调中移除监听：
if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) {
//firefox支持onmousewheel
removeEventListener("DOMMouseScroll", firefoxListenFun);
}
},
methods: {
async loadDetail() {
processUnit(this.displayDetail.exhibitionUnits);
function processUnit(list) {
for (let o of list || []) {
......@@ -318,426 +260,542 @@ export default {
// this.$refs.AudioPlayer.play();
// }
});
}
},
},
loadWidth() {
if (
this.displayDetail.imagesVo &&
this.displayDetail.imagesVo.length > 0
) {
let slideImage = document.getElementsByClassName("slide-item")[0];
this.slideImageWidth = slideImage.offsetWidth;
this.sildeGroupWidth =
this.slideImageWidth * this.displayDetail.imagesVo.length;
this.slideGroupleft = -3 * this.slideImageWidth;
}
},
handleImgsSlide(e) {
this.addImgsEventListener(e);
this.throttle(this.pageUpOrDown, 500)(e);
},
loadWidth() {
if (
this.displayDetail.imagesVo &&
this.displayDetail.imagesVo.length > 0
) {
let slideImage = document.getElementsByClassName("slide-item")[0];
this.slideImageWidth = slideImage.offsetWidth;
this.sildeGroupWidth =
this.slideImageWidth * this.displayDetail.imagesVo.length;
this.slideGroupleft = -3 * this.slideImageWidth;
}
},
addImgsEventListener(e) {
e = e || window.event;
if (navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
// IE
e.returnValue = false;
} else {
// Chrome
e.preventDefault();
}
handleImgsSlide(e) {
this.addImgsEventListener(e);
this.throttle(this.pageUpOrDown, 500)(e);
},
if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) {
//firefox支持onmousewheel
addEventListener("DOMMouseScroll", this.firefoxListenFun, false);
}
},
firefoxListenFun(e) {
var obj = e.target;
var onmousewheel;
while (obj) {
onmousewheel = obj.getAttribute("onmousewheel") || obj.onmousewheel;
if (onmousewheel) break;
if (obj.tagName == "BODY") break;
obj = obj.parentNode;
}
if (onmousewheel) {
if (e.preventDefault) e.preventDefault(); //禁止页面滚动
if (typeof obj.onmousewheel != "function") {
//将onmousewheel转换成function
eval("window._tmpFun = function(event){" + onmousewheel + "}");
obj.onmousewheel = window._tmpFun;
window._tmpFun = null;
addImgsEventListener(e) {
e = e || window.event;
if (navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
// IE
e.returnValue = false;
} else {
// Chrome
e.preventDefault();
}
// 不直接执行是因为若onmousewheel(e)运行时间较长的话，会导致锁定滚动失效，使用setTimeout可避免
setTimeout(function () {
obj.onmousewheel(e);
}, 1);
}
},
pageUpOrDown(e) {
let detail = e.wheelDelta || e.detail || e.wheelDeltaY;
let direction = detail > 0 ? "left" : "right";
if (direction == "left" && this.moveLeft) {
this.slideGroupleft += this.slideImageWidth;
this.moveRight = true;
}
if (direction == "right" && this.moveRight) {
this.slideGroupleft += this.slideImageWidth * -1;
this.moveLeft = true;
}
if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) {
//firefox支持onmousewheel
addEventListener("DOMMouseScroll", this.firefoxListenFun, false);
}
},
firefoxListenFun(e) {
var obj = e.target;
var onmousewheel;
while (obj) {
onmousewheel = obj.getAttribute("onmousewheel") || obj.onmousewheel;
if (onmousewheel) break;
if (obj.tagName == "BODY") break;
obj = obj.parentNode;
}
if (onmousewheel) {
if (e.preventDefault) e.preventDefault(); //禁止页面滚动
if (typeof obj.onmousewheel != "function") {
//将onmousewheel转换成function
eval("window._tmpFun = function(event){" + onmousewheel + "}");
obj.onmousewheel = window._tmpFun;
window._tmpFun = null;
}
// 不直接执行是因为若onmousewheel(e)运行时间较长的话，会导致锁定滚动失效，使用setTimeout可避免
setTimeout(function () {
obj.onmousewheel(e);
}, 1);
}
},
if (this.slideGroupleft == 0) {
this.moveLeft = false;
this.moveRight = true;
}
pageUpOrDown(e) {
let detail = e.wheelDelta || e.detail || e.wheelDeltaY;
let direction = detail > 0 ? "left" : "right";
if (direction == "left" && this.moveLeft) {
this.slideGroupleft += this.slideImageWidth;
this.moveRight = true;
}
if (direction == "right" && this.moveRight) {
this.slideGroupleft += this.slideImageWidth * -1;
this.moveLeft = true;
}
if (
this.slideGroupleft ==
4 * this.slideImageWidth - this.sildeGroupWidth
) {
this.moveRight = false;
this.moveLeft = true;
}
},
if (this.slideGroupleft == 0) {
this.moveLeft = false;
this.moveRight = true;
}
//节流函数
throttle(fn, gapTime) {
let _this = this;
return function () {
let _nowTime = +new Date();
if (_nowTime - _this._lastTime > gapTime || !_this._lastTime) {
fn(...arguments); // 函数可以带参数
_this._lastTime = _nowTime;
if (
this.slideGroupleft ==
4 * this.slideImageWidth - this.sildeGroupWidth
) {
this.moveRight = false;
this.moveLeft = true;
}
};
},
},
// 关联文献的行样式调整
tableRowStyle({ row, rowIndex }) {
if (rowIndex % 2 == 0) {
return {
background: "#f9f9f9 !important",
};
} else {
return {
background: "#fff !important",
//节流函数
throttle(fn, gapTime) {
let _this = this;
return function () {
let _nowTime = +new Date();
if (_nowTime - _this._lastTime > gapTime || !_this._lastTime) {
fn(...arguments); // 函数可以带参数
_this._lastTime = _nowTime;
}
};
}
},
},
// 预览关联文献
handleViewLt(item) {
previewFile(item.files[0].url, item.files[0].name);
},
// 关联文献的行样式调整
tableRowStyle({ row, rowIndex }) {
if (rowIndex % 2 == 0) {
return {
background: "#f9f9f9 !important",
};
} else {
return {
background: "#fff !important",
};
}
},
// 点击音频
handleClickAudio() {
this.audioPlaying = !this.audioPlaying;
if (this.audioPlaying) {
this.$refs["AudioPlayer"].play();
// console.log(this.$refs['audioContainer']);
} else {
this.$refs["AudioPlayer"].pause();
}
// 点击音频
handleClickAudio() {
this.audioPlaying = !this.audioPlaying;
if (this.audioPlaying) {
this.$refs["AudioPlayer"].play();
// console.log(this.$refs['audioContainer']);
} else {
this.$refs["AudioPlayer"].pause();
}
},
reload() {
this.$emit("reload");
},
},
},
};
};
</script>
<style lang="scss" scoped>
// 中国风主题样式
/**公共样式开始 */
.wrapper {
width: 1200px;
}
.custom-title {
display: flex;
align-items: center;
.custom-title-prefix,
.custom-title-suffix {
width: 27px;
height: 27px;
margin: 15px;
img {
width: 100%;
height: 100%;
}
// 中国风主题样式
/**公共样式开始 */
.wrapper {
// width: 1200px;
width: calc(100% - 26%); //左右两边各自留13%
}
.custom-title-text {
font-size: 40px;
font-family: KaiTi;
font-weight: 400;
color: #0f0f0f;
line-height: 114px;
.custom-title {
display: flex;
align-items: center;
position: relative;
.custom-title-prefix,
.custom-title-suffix {
width: 27px;
height: 27px;
margin: 15px;
img {
width: 100%;
height: 100%;
}
}
.custom-title-text {
font-size: 40px;
font-family: KaiTi;
font-weight: 400;
color: #0f0f0f;
line-height: 114px;
}
}
}
/**公共样式结束 */
/**样式开始 */
.display-detail {
overflow-x: hidden;
.content {
width: 100%;
overflow-y: hidden;
.content-item {
/**公共样式结束 */
/**样式开始 */
.display-detail {
overflow: hidden;
.content {
width: 100%;
}
overflow: hidden;
.content-item {
width: 100%;
}
/**轮播图 */
.sliders {
height: 434px;
// margin: 52px 0 84px 0;
margin-top: 52px;
display: flex;
justify-content: center;
position: relative;
.view-box {
/**轮播图 */
.sliders {
height: 434px;
// margin: 52px 0 84px 0;
margin-top: 52px;
display: flex;
justify-content: center;
position: relative;
width: 1200px;
.slide-group {
display: flex;
.view-box {
position: relative;
width: 1200px;
.slide-group {
display: flex;
position: absolute;
height: 100%;
transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
/**保证能够最开始刚好有四格卡在中间*/
// transform: translateX(-900px);
.slide-item {
width: 300px;
height: 100%;
position: relative;
margin-right: 1px;
img {
width: 300px;
height: 100%;
object-fit: cover;
// filter: grayscale(14);
}
}
}
}
.modal-layer {
position: absolute;
display: flex;
width: 100%;
height: 100%;
transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
/**保证能够最开始刚好有四格卡在中间*/
// transform: translateX(-900px);
.slide-item {
width: 300px;
height: 100%;
justify-content: center;
.center-img {
width: 1200px;
transform: translateY(-25px);
position: relative;
filter: drop-shadow(2px 4px 6px #f8f8f8);
img {
width: 300px;
height: 100%;
object-fit: cover;
// filter: grayscale(14);
transform: translateX(-10px);
width: 1230px;
}
}
.left-layer,
.right-layer {
flex: 1;
height: 100%;
background-color: rgba(#f8f8f8, 0.8);
}
}
}
.modal-layer {
position: absolute;
/**展览信息 */
.intro {
margin-top: 55px;
display: flex;
width: 100%;
height: 100%;
justify-content: center;
.center-img {
width: 1200px;
transform: translateY(-25px);
.wrapper {
// background: url("@/assets/imgs/display/ch/intro-bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 50px;
position: relative;
filter: drop-shadow(2px 4px 6px #f8f8f8);
img {
transform: translateX(-10px);
}
}
.left-layer,
.right-layer {
flex: 1;
height: 100%;
background-color: rgba(#f8f8f8, 0.8);
}
}
}
border: 1px solid #d3d3d37a;
/**展览信息 */
.intro {
margin-top: 84px;
display: flex;
justify-content: center;
.wrapper {
background: url("~@/assets/imgs/display/intro-bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 60px;
position: relative;
.title {
font-size: 62px;
font-family: KaiTi;
font-weight: 400;
color: #0f0f0f;
margin-bottom: 60px;
}
.desc-and-tools {
display: flex;
justify-content: space-between;
.desc {
.title {
font-size: 50px;
font-family: KaiTi;
font-weight: bold;
color: #0f0f0f;
margin-bottom: 60px;
display: flex;
.item {
display: flex;
.label,
.value {
font-size: 18px;
font-weight: 300;
color: #0f0f0f;
line-height: 36px;
justify-content: space-between;
align-items: center;
.view-count {
font-size: 18px;
margin-top: 10px;
color: #999;
font-weight: normal;
.svg-icon {
margin-right: 10px;
}
}
}
}
.divider {
width: 100%;
height: 2px;
border: 1px dashed #b1b0af;
margin: 60px 0;
}
.intro-and-video {
.intro-container {
.intro-title {
font-size: 40px;
font-family: KaiTi;
font-weight: 400;
color: #0f0f0f;
margin-bottom: 43px;
position: relative;
&::after {
content: "";
display: inline-block;
width: 60px;
height: 2px;
background-color: #caad91;
position: absolute;
left: 0;
bottom: -12px;
.desc-and-tools {
display: flex;
justify-content: space-between;
.desc {
display: flex;
.item {
display: flex;
margin-right: 16px;
.label,
.value {
font-size: 18px;
color: #0f0f0f;
line-height: 36px;
}
.label {
margin-left: 8px;
}
}
}
.intro-content {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #444444;
text-indent: 32px;
line-height: 28px;
.tools {
width: 280px;
}
}
.videos {
position: relative;
::v-deep {
.el-carousel {
height: 100%;
width: 100%;
.el-carousel__container {
height: 100%;
display: flex;
justify-content: center;
}
.el-carousel__item {
width: 100%;
transform: translateX(0) !important;
.divider {
width: 100%;
height: 2px;
border: 1px dashed #b1b0af;
margin: 42px 0;
}
.intro-and-video {
display: flex;
.intro-container {
flex: 1;
.intro-title {
font-size: 40px;
font-family: KaiTi;
font-weight: 400;
color: #0f0f0f;
margin-bottom: 43px;
position: relative;
&::after {
content: "";
display: inline-block;
width: 60px;
height: 2px;
background-color: #caad91;
position: absolute;
left: 0;
bottom: -12px;
}
}
.intro-content {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #444444;
text-indent: 32px;
line-height: 28px;
margin-left: 8px;
}
}
.videos {
flex: 1;
position: relative;
height: 256px;
margin-left: 70px;
}
}
}
.audio {
position: absolute;
right: -100px;
top: 34px;
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
border: 1px solid #892325;
border-radius: 50%;
// padding: 10px;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
img {
width: 28px;
height: 28px;
.audio {
position: absolute;
right: -120px;
top: 34px;
cursor: pointer;
/* animation: audioRotate 8s linear infinite; */
transform-origin: center center;
border: 2px solid #892325;
padding: 10px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
transition: all 0.5s ease;
&:hover {
box-shadow: 0 0 14px rgb(0 0 0 / 40%);
}
img {
width: 60px;
height: 60px;
}
}
}
}
}
@keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
@keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
}
@-webkit-keyframes audioRotate {
0% {
transform: rotateZ(0deg);
@-webkit-keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
100% {
transform: rotateZ(360deg);
.animation-play-paused {
animation-play-state: paused;
-webkit-animation-play-state: paused;
/* Safari 和 Chrome */
}
}
.animation-play-paused {
animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari 和 Chrome */
}
/**展览单元 */
.units {
margin-top: 94px;
display: flex;
flex-direction: column;
align-items: center;
/**展览单元 */
.units {
margin-top: 94px;
display: flex;
flex-direction: column;
align-items: center;
.units-content {
ul {
li {
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;
}
.unit-imgs {
width: 100%;
.img-item {
.units-content {
ul {
li {
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;
}
.unit-imgs {
width: 100%;
img {
.img-item {
width: 100%;
img {
width: 100%;
}
}
}
}
}
}
}
}
/**关联文献 */
.lts {
// background-color: aquamarine;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 100px;
.lts-content {
/**关联文献 */
.lts {
// background-color: aquamarine;
display: flex;
justify-content: center;
width: 100%;
height: 569px;
background-image: url('~@/assets/imgs/display/lts-bg.png');
overflow-x: hidden;
flex-direction: column;
align-items: center;
margin-top: 100px;
.lts-content {
display: flex;
justify-content: center;
width: 100%;
height: 569px;
background-image: url("~@/assets/imgs/display/ch/lts-bg.png");
overflow-x: hidden;
}
}
}
}
.right {
float: right;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
a {
font-size: 22px;
}
.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 {
height: 100%;
}
::v-deep .el-carousel__container {
height: 100%;
}
::v-deep .el-carousel__item--card {
width: 100%;
height: 100%;
transform: translateX(0) scale(1) !important;
}
</style>
\ No newline at end of file
src/views/display/components/templates/ChStyleUnit.vue 0 → 100644
浏览文件 @ b35bddfc
<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].pressUrl || item.imagesVo[0].url)" alt="" />
</div>
</div>
<div class="unit-content">
<div class="unit-title">{{ item.title }}</div>
<div class="unit-intro" v-html="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;
// width: calc(100vw - 26%);
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 80px;
}
}
}
.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/templates/NormalStyle.vue deleted 100644 → 0
浏览文件 @ f96261bf
<!-- -->
<template>
<div class="normal-style">
<NavBar />
<div class="display-detail">
<div class="wrapper">
<div class="back">
<el-button type="text" icon="el-icon-arrow-left">返回上页</el-button>
</div>
<el-row class="detail-container" :gutter="60">
<el-col class="cr-images" :span="16">
<el-carousel
indicator-position="outside"
:autoplay="false"
height="600px"
>
<el-carousel-item
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
>
<el-image
style="width: 100%; height: 100%"
:src="$getFullUrl(item.url)"
fit="contain"
></el-image>
</el-carousel-item>
</el-carousel>
<div class="enlarge" @click="handelPreviewImages">
<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;
"
>
<h4>
{{ displayDetail.title }}
</h4>
<span class="view-container">
<svg-icon icon-class="view" class="view-svg-icon"></svg-icon>
<span class="view-text">{{ displayDetail.browseCount }}</span>
</span>
</div>
<NormalPlayer
:fileurl="$getFullUrl(displayDetail.audiosVo[0].url)"
ref="AudioPlayer"
v-if="
displayDetail.audiosVo && displayDetail.audiosVo.length > 0
"
/>
</div>
<div class="info-body">
<div class="basic-info">
<div class="body-item">
<span class="label">关键词</span>
<span class="value">{{ displayDetail.keyword }}</span>
</div>
<div class="body-item">
<span class="label">展览类型</span>
<span class="value">{{
dicts.displayType[displayDetail.type]
}}</span>
</div>
<div class="body-item">
<span class="label">展览性质</span>
<span class="value">{{
dicts.displayCharacter[displayDetail.displayCharacter]
}}</span>
</div>
<div class="body-item">
<span class="label">展览单位</span>
<span class="value">{{ displayDetail.deptName }}</span>
</div>
</div>
</div>
<ReaderOperations
:loveCount="displayDetail.loveCount"
:loveCountStatus="Boolean(displayDetail.loveCountStatus)"
:collectCount="displayDetail.collectCount"
:collectCountStatus="Boolean(displayDetail.collectCountStatus)"
:sourceId="displayDetail.exhibitionId"
:title="displayDetail.title"
:sourceType="'biz_exhibition'"
@reload="loadDetail"
/>
</el-col>
</el-row>
<div class="margin-bottom-32 intro">
<CustomTitle text="展览介绍" />
<div class="text-indent intro_text">
{{ displayDetail.intro }}
</div>
</div>
<div
class="margin-bottom-32 unit"
v-if="
displayDetail.exhibitionUnits &&
displayDetail.exhibitionUnits.length > 0
"
>
<CustomTitle text="展览单元" />
<el-row :gutter="40">
<el-col :span="8">
<!-- 只能单开 unique-opened -->
<menu-list
:items="displayDetail.exhibitionUnits"
:isCollapse="false"
@open="handleOpenUnit"
></menu-list>
</el-col>
<el-col :span="16" class="unit-content">
<div class="text-indent unit-content_intro" v-if="curUnit.intro">
{{ curUnit.intro }}
</div>
<div
class="unit-content_images"
v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0"
>
<el-row :gutter="20">
<el-col
:span="24 / curUnit.imagesVo.length"
v-for="item in curUnit.imagesVo"
:key="item.euId"
class="margin-bottom-32"
>
<img :src="$getFullUrl(item.url)" width="100%" />
<div class="unit-content_images_desc">
{{ item.name }}
</div>
</el-col>
</el-row>
</div>
<div
class="unit-content_videos"
v-if="curUnit.videosVo && curUnit.videosVo.length > 0"
>
<el-row :gutter="20">
<el-col
:span="24 / curUnit.videosVo.length"
v-for="item in curUnit.videosVo"
:key="item.euId"
>
<Video :url="$getFullUrl(item.url)" />
</el-col>
</el-row>
</div>
</el-col>
</el-row>
</div>
<div
class="margin-bottom-32"
v-if="
displayDetail.culturalRelicVo &&
displayDetail.culturalRelicVo.length > 0
"
>
<CustomTitle text="关联文物" />
<el-row :gutter="20">
<el-col
:span="6"
v-for="(item, index) in displayDetail.culturalRelicVo"
:key="index"
>
<Card :title="item.name" :url="$getFullUrl(item.faceImageUrl)"
/></el-col>
</el-row>
</div>
<div
class="relate-video margin-bottom-32"
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
>
<CustomTitle text="关联视频" />
<el-carousel :interval="4000" type="card" height="400px">
<el-carousel-item
v-for="item in displayDetail.videosVo"
:key="item.fileId"
>
<div class="video-container">
<div class="video-box">
<Video :url="$getFullUrl(item.url)" />
</div>
<div class="info-box">
<h4 class="name">{{ item.name.split(".")[0] }}</h4>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
<div class="relate-book margin-bottom-32">
<CustomTitle text="相关文献" />
<div
class="book-item"
v-for="(item, index) in displayDetail.literatureVo"
:key="index"
>
<span class="mr-20">{{ item.name }}</span>
<span class="mr-20">{{ item.author }}</span>
<span>{{ item.source }}</span>
</div>
</div>
<!-- <div class="relate-cultual-relic margin-bottom-32">
<CustomTitle text="关联文物" />
<div class="display-group">
<div
class="display-item"
v-for="(item, index) in relateRelics"
:key="index"
@click="handleToDetail(item.exhibitionId)"
>
<img :src="item.faceImageUrl" width="100%" :alt="item.title" />
<div class="display-desc">
<div class="desc-title">
<h4>{{ item.name }}</h4>
</div>
</div>
</div>
</div>
</div> -->
</div>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
</div>
<Footer />
</div>
</template>
<script>
// import AudioPlayer from "@/components/AudioPlayer";
import NormalPlayer from "@/components/AudioPlayer/NormalPlayer.vue";
import CustomTitle from "@/components/CustomTitle";
import ReaderOperations from "@/components/ReaderOperations";
import Card from "@/components/Card";
import Video from "@/components/Video";
// import QRCode from "qrcodejs2";
import MenuList from "@/components/MenuList";
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
import { mapGetters } from "vuex";
export default {
components: {
CustomTitle,
// AudioPlayer,
NormalPlayer,
ReaderOperations,
MenuList,
Video,
Card,
NavBar,
Footer,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
props: {
displayDetail: {
type: Object,
default: () => ({}),
},
},
data() {
return {
options: [
{
value: "name",
label: "文物名称",
},
],
selectValue: "",
keyword: "",
slideImageWidth: "",
imgViewerVisible: false,
relateRelics: [],
curUnit: [],
};
},
computed: {
...mapGetters(["dicts"]),
},
mounted() {
// this.creatQrCode();
this.loadDetail();
},
methods: {
creatQrCode() {
this.$nextTick(() => {
var qrcode = new QRCode(this.$refs.qrCodeUrl, {
text: "http://www.gzmuseum.com/", // 需要转换为二维码的内容
width: 100,
height: 100,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H,
});
});
},
loadDetail() {
if (Object.keys(this.displayDetail).length > 0) {
console.log(this.displayDetail);
if (
this.displayDetail.exhibitionUnits &&
this.displayDetail.exhibitionUnits.length > 0
) {
this.curUnit = this.displayDetail.exhibitionUnits[0];
}
processUnit(this.displayDetail.exhibitionUnits);
function processUnit(list) {
for (let o of list || []) {
if (o.children) {
if (o.children.length == 0) {
o.children = null;
} else {
processUnit(o.children);
}
}
}
}
}
},
closeImgViewer() {
this.imgViewerVisible = false;
},
handelPreviewImages() {
this.imgViewerVisible = true;
this.imgList = this.displayDetail.imagesVo.map((item) =>
this.$getFullUrl(item.url)
);
},
handleOpenUnit(item) {
this.curUnit = item;
},
},
};
</script>
<style lang="scss" scoped>
.mr-20 {
margin-right: 20px;
}
$label: #9f9c9a;
.search {
width: 1200px;
margin: auto;
margin-bottom: 32px;
}
.wrapper {
width: 1200px;
margin: 60px auto;
background-color: #fff;
padding: 60px;
// 返回按钮
.back {
font-size: 18px;
font-weight: bold;
margin-bottom: 40px;
.el-button {
color: $label;
}
}
// 描述框
.detail-container {
margin-bottom: 32px;
// display: flex;
img {
max-width: 100%;
height: auto;
}
.cr-images {
width: 700px;
// margin-right: 32px;
position: relative;
.el-image {
background-color: #f5f5f9;
}
.enlarge {
position: absolute;
bottom: 60px;
right: 40px;
display: flex;
z-index: 9;
background-color: #c1925b;
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
cursor: pointer;
img {
width: 24px;
height: 24px;
}
}
}
.relic-info {
.info-title {
display: flex;
// align-items: center;
flex-direction: column;
margin-bottom: 40px;
.play {
margin-left: 10px;
font-size: 32px;
cursor: pointer;
}
}
.info-body {
display: flex;
justify-content: space-between;
align-items: flex-end;
.basic-info {
.body-item {
display: flex;
.label {
display: block;
width: 80px;
margin-right: 26px;
margin-bottom: 10px;
font-weight: bold;
color: #9f9c9a;
}
}
}
}
}
.title-container {
display: flex;
justify-content: center;
position: relative;
.operation {
position: absolute;
right: 0;
display: flex;
align-items: center;
height: 100%;
}
}
.content {
text-indent: 32px;
}
}
// 展览介绍
.intro {
.intro_text {
line-height: 30px;
}
}
// 布展单元
.unit {
.unit-content {
line-height: 30px;
.unit-content_intro {
margin-bottom: 20px;
}
.unit-content_images {
.unit-content_images_desc {
display: flex;
justify-content: center;
}
}
}
}
// 关联文献
.relate-book {
.book-item {
margin-bottom: 10px;
}
}
// 关联文物
.relate-cultual-relic {
.display-group {
margin-top: 24px;
display: flex;
flex-flow: row wrap;
.display-item {
width: 282px;
margin-bottom: 32px;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.1);
// padding: 0 0 32px 0;
background-color: #fff;
margin-right: 10px;
cursor: pointer;
img {
border-radius: 16px 16px 0 0;
}
.display-desc {
padding: 0 16px;
.desc-content {
text-indent: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
}
.display-source {
margin-top: 8px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
}
}
}
}
// 关联视频
.relate-video {
.video-container {
display: flex;
flex-direction: column;
align-items: center;
.video-box {
display: flex;
justify-content: center;
border: 1px solid #000;
video {
width: 800px;
}
}
.info-box {
width: 800px;
display: flex;
justify-content: space-between;
}
}
}
}
.text-indent {
text-indent: 28px;
}
.margin-bottom-32 {
margin-bottom: 32px;
}
</style>
src/views/display/components/templates/RedStyle.vue 0 → 100644
浏览文件 @ b35bddfc
<template>
<div class="display-detail">
<NavBar :background="'#a30e0c'" />
<div class="content" id="content">
<!-- 展览图片 -->
<div class="
content-item
display-detail_imgs
wow
animate__animated animate__fadeInDownBig
" ref="imgs" v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0">
<!-- <swiper :options="swiperOption" ref="mySwiper">
<swiper-slide
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
>
<div class="img-container">
<img :src="item.url" alt="" srcset="" />
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper> -->
</div>
<!-- 展览基本信息 -->
<div class="
content-item
display-detail_basic_info
wow
animate__animated animate__fadeInUp
">
<div class="wrapper">
<div class="top">
<div class="top-wrapper">
<div class="film-img-container">
<img src="@/assets/imgs/display/red/jiaopian.png" alt="" />
</div>
<div class="film-img-container">
<img src="@/assets/imgs/display/red/jiaopian.png" alt="" />
</div>
</div>
</div>
<div class="bottom">
<div class="bottom-wrapper">
<div class="film-img-container">
<img src="@/assets/imgs/display/red/jiaopian.png" alt="" />
</div>
<div class="film-img-container">
<img src="@/assets/imgs/display/red/jiaopian.png" alt="" />
</div>
</div>
</div>
<div class="info-container">
<div class="info-container-left">
<el-image :src="
$getFullUrl(
displayDetail.faceImagePressUrl ||
displayDetail.faceImageUrl
)
" fit="cover" @click.native="
handelPreviewImages([displayDetail.faceImageUrl])
"></el-image>
</div>
<div class="info-container-right">
<div class="info-title">
<div class="title">{{ displayDetail.title }}</div>
<div class="view-count">
<svg-icon icon-class="view"></svg-icon>
<span>{{ displayDetail.browseCount }}</span>
</div>
</div>
<el-row>
<el-col :span="13">
<div class="basic-info">
<div class="body-item">
<span class="label">关键词</span>
<span class="value">{{ displayDetail.keyword }}</span>
</div>
<div class="body-item">
<span class="label">展览类型</span>
<span class="value">{{
dicts.displayType[displayDetail.type]
}}</span>
</div>
<div class="body-item">
<span class="label">展览性质</span>
<span class="value">{{
dicts.displayCharacter[displayDetail.displayCharacter]
}}</span>
</div>
<div class="body-item">
<span class="label">展览单位</span>
<span class="value">{{ displayDetail.deptName }}</span>
</div>
<div class="body-item">
<span class="label">展览地区</span>
<span class="value">{{ displayDetail.regionName }}</span>
</div>
</div>
</el-col>
<el-col :span="11">
<ReaderOperations :loveCount="displayDetail.loveCount"
:loveCountStatus="Boolean(displayDetail.loveCountStatus)" :collectCount="displayDetail.collectCount"
:collectCountStatus="
Boolean(displayDetail.collectCountStatus)
" :sourceId="displayDetail.exhibitionId" :title="displayDetail.title"
:sourceType="'biz_exhibition'" @reload="reload" :selectColor="'#a30e0c'" />
</el-col>
</el-row>
</div>
</div>
</div>
</div>
<!-- 展览简介 -->
<div class="
content-item
display-detail_intro
wow
animate__animated animate__fadeInUp
">
<div class="wrapper">
<div class="custom-title">展览简介</div>
<div class="intro-content">
<div class="intro-content-container" v-html="displayDetail.intro"></div>
</div>
<div class="intro-video" v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0">
<el-carousel :interval="4000" type="card" height="260px">
<el-carousel-item v-for="item in displayDetail.videosVo" :key="item.fileId">
<Video :url="$getFullUrl(item.url)" />
</el-carousel-item>
</el-carousel>
</div>
</div>
</div>
<!--展览单元 -->
<div class="
content-item
display-detail_units
wow
animate__animated animate__fadeInUp
" ref="units" v-if="displayDetail.exhibitionUnits.length > 0">
<div class="wrapper">
<div class="custom-title units">展览单元</div>
<div class="units-content">
<div class="left-menu">
<div class="left-menu-item" v-for="(item, index) in displayDetail.exhibitionUnits" :key="index"
@click="handleClickUnitTitle(item)">
<!-- {{ item.imagesVo }} -->
<div :class="{ 'base-img': true, active: currentUnit == item }" :id="item.euId"
v-if="item.imagesVo && item.imagesVo.length > 0">
<img :src="item.imagesVo[0].pressUrl" alt="" />
</div>
<div class="text">{{ item.title }}</div>
</div>
</div>
<div class="right-content">
<el-row v-if="currentUnit && currentUnit.imagesVo.length > 0">
<el-col :span="i == 0 ? 24 : 8" v-for="(v, i) in currentUnit.imagesVo" :key="i">
<div class="img-container">
<img :src="v.pressUrl" alt="" />
</div>
<div class="unit-name-intro" v-if="i == 0">
<div class="unit-name">{{ currentUnit.title }}</div>
<div class="unit-intro" v-html="currentUnit.intro"></div>
</div>
</el-col>
</el-row>
</div>
</div>
<!-- <div class="units-content">
<div
class="units-content-item"
v-for="(item, index) in displayDetail.exhibitionUnits"
:key="index"
>
<div class="units-content-container">
<div class="title">{{ item.title }}</div>
<div class="intro">{{ item.intro }}</div>
<div
class="imgs"
v-if="item.imagesVo && item.imagesVo.length > 0"
>
<el-carousel
:interval="4000"
type="card"
height="200px"
v-if="item.imagesVo.length > 3"
>
<el-carousel-item
v-for="(img, i) in item.imagesVo"
:key="i"
>
<el-image
:src="img.pressUrl"
@click.native="handelPreviewImages(item.imagesVo)"
></el-image>
</el-carousel-item>
</el-carousel>
<el-row :gutter="20" v-else>
<el-col
:span="10"
v-for="(img, i) in item.imagesVo"
:key="i"
>
<el-image
:src="img.pressUrl"
@click.native="handelPreviewImages(item.imagesVo)"
></el-image>
</el-col>
</el-row>
</div>
<div
class="imgs"
v-if="item.culturalRelicVo && item.culturalRelicVo.length > 0"
>
<el-carousel :interval="4000" type="card" height="200px">
<el-carousel-item
v-for="item in displayDetail.culturalRelicVo"
:key="item.fileId"
>
<el-image :src="img.faceImagePressUrl"></el-image>
</el-carousel-item>
</el-carousel>
<div class="desc-title">相关文物</div>
</div>
</div>
<div
class="units-content-img"
:style="{
backgroundImage: `url('${item.imagesVo[0].pressUrl}')`,
}"
></div>
</div>
</div> -->
</div>
</div>
<!-- 相关文献 -->
<div class="
content-item
display-detail_lts
wow
animate__animated animate__fadeInUp
" v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0
">
<div class="wrapper">
<div class="custom-title">相关文献</div>
<div class="lts-content">
<el-table :data="displayDetail.literatureVo" :header-cell-style="{
background: '#eeeeee',
color: '#333',
}" :row-style="tableRowStyle">
<el-table-column prop="name" label="名称" align="center"></el-table-column>
<el-table-column prop="authors" label="作者" align="center"></el-table-column>
<el-table-column prop="date" label="出版时间" align="center"></el-table-column>
<el-table-column align="center" prop="source" label="出版所在刊物"></el-table-column>
<el-table-column label="阅读" align="center">
<template slot-scope="scope">
<div class="pdf-img" >
<img src="@/assets/imgs/display/ch/pdf-icon.png" />
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
<Footer :background="'#a30e0c'" />
<el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" />
</div>
</template>
<script>
import AudioPlayer from "@/components/AudioPlayer";
import ReaderOperations from "@/components/ReaderOperations";
import Card from "@/components/Card";
import Video from "@/components/Video";
import ChStyleUnit from "./ChStyleUnit.vue";
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
export default {
components: {
AudioPlayer,
ReaderOperations,
Video,
Card,
ChStyleUnit,
NavBar,
Footer,
"el-image-viewer": () => import("element-ui/packages/image/src/image-viewer"),
},
props: {
displayDetail: {
type: Object,
default: () => ({}),
},
dicts: {
type: Object,
default: () => ({}),
},
},
data() {
return {
imgViewerVisible: false,
relateRelics: [],
audioPlaying: true,
currentUnit: null,
};
},
async mounted() {
this.loadDetail();
// let units = this.$refs.
},
methods: {
async loadDetail() {
processUnit(this.displayDetail.exhibitionUnits);
this.currentUnit =
this.displayDetail.exhibitionUnits.length > 0
? this.displayDetail.exhibitionUnits[0]
: null;
function processUnit(list) {
for (let o of list || []) {
if (o.children) {
if (o.children.length == 0) {
o.children = null;
} else {
processUnit(o.children);
}
}
}
}
this.$nextTick(() => {
// if (
// this.displayDetail.videosVo &&
// this.displayDetail.videosVo.length > 0
// ) {
// this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
// this.$refs.AudioPlayer.play();
// }
});
},
//节流函数
throttle(fn, gapTime) {
let _this = this;
return function () {
let _nowTime = +new Date();
if (_nowTime - _this._lastTime > gapTime || !_this._lastTime) {
fn(...arguments); // 函数可以带参数
_this._lastTime = _nowTime;
}
};
},
// 关联文献的行样式调整
tableRowStyle({ row, rowIndex }) {
if (rowIndex % 2 == 0) {
return {
background: "#f9f9f9 !important",
};
} else {
return {
background: "#fff !important",
};
}
},
// 点击音频
handleClickAudio() {
this.audioPlaying = !this.audioPlaying;
if (this.audioPlaying) {
this.$refs["AudioPlayer"].play();
// console.log(this.$refs['audioContainer']);
} else {
this.$refs["AudioPlayer"].pause();
}
},
reload() {
this.$emit("reload");
},
handelPreviewImages(images) {
this.imgViewerVisible = true;
this.imgList = images.map((item) => this.$getFullUrl(item.url));
},
closeImgViewer() {
this.imgViewerVisible = false;
},
handleClickUnitTitle(item) {
this.currentUnit = item;
},
},
};
</script>
<style lang="scss" scoped>
// 中国风主题样式
/**公共样式开始 */
.wrapper {
width: 1400px;
}
.custom-title {
width: 50px;
background-color: #d72f3f;
min-height: 300px;
color: #fff;
font-size: 28px;
writing-mode: vertical-rl;
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgb(215 47 63 / 30%) 4px 3px 8px 1px;
letter-spacing: 10px;
}
.units {
background-image: linear-gradient(to bottom, #660d04, #520002);
min-height: 400px;
}
.content-item {
width: 100%;
}
/**公共样式结束 */
/**样式开始 */
.display-detail {
overflow: hidden;
.content {
width: 100%;
overflow: hidden;
/**轮播图 */
.display-detail_imgs {
.img-container {
height: 430px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
/**基本信息 */
.display-detail_basic_info {
margin: 80px 0;
display: flex;
justify-content: center;
.wrapper {
min-height: 200px;
border-left: 4px solid #ccc9cd;
border-right: 4px solid #ccc9cd;
position: relative;
overflow: hidden;
&:hover {
.top-list,
.bottom-list {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
}
.top {
position: absolute;
left: 0;
top: 0;
overflow: hidden;
display: flex;
width: 1400px;
}
.bottom {
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;
}
.top-wrapper,
.bottom-wrapper {
display: flex;
width: 2400px;
}
.film-img-container {
animation: filmMoveLeft 60s linear infinite;
height: 40px;
img {
width: 1400px;
height: 100%;
}
}
}
.info-container {
display: flex;
justify-content: space-between;
padding: 40px 20px 40px 0;
height: 100%;
.info-container-left {
min-height: 200px;
margin-right: 40px;
flex: 1;
.el-image {
height: 100%;
width: 100%;
background-color: #f5f5f9;
}
}
.info-container-right {
flex: 1;
min-height: 200px;
padding: 40px 0 10px;
.info-title {
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 2px solid #f2f2f2;
display: flex;
justify-content: space-between;
.title {
font-size: 32px;
font-weight: 500;
color: #8b0000;
}
.view-count {
font-size: 18px;
margin-top: 10px;
color: #999;
font-weight: normal;
display: flex;
align-items: center;
.svg-icon {
margin-right: 10px;
}
}
}
.basic-info {
.body-item {
display: flex;
.label {
display: block;
width: 80px;
margin-right: 26px;
margin-bottom: 10px;
font-weight: bold;
color: #9f9c9a;
}
}
}
}
}
}
/**简介和视频 */
.display-detail_intro {
display: flex;
justify-content: center;
.wrapper {
display: flex;
background-color: #fafafa;
border: 2px solid #cccccc;
border-left: none;
.intro-content,
.intro-video {
flex: 1;
padding: 40px 0;
}
.intro-content {
padding: 20px;
text-indent: 32px;
background-color: #f3f3f3;
margin: 20px;
line-height: 28px;
}
.intro-video {
padding: 20px;
}
}
}
/**展览单元 */
.display-detail_units {
display: flex;
justify-content: center;
margin-top: 100px;
// height: 750px;
// height: calc(100vh);
background-image: url("~@/assets/imgs/display/red/unit-bg.jpg");
.wrapper {
// width;
display: flex;
border: 2px solid #cccccc;
border-left: none;
transition: width 0.5s ease-in-out;
.units-content {
flex: 1;
display: flex;
.left-menu {
width: 524px;
display: flex;
align-items: center;
flex-direction: column;
.left-menu-item {
height: 54px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
padding: 0 22px;
display: flex;
align-items: center;
background: #520002;
&:hover {
.text {
color: #fff;
}
}
.base-img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
// background-position: center;
// background-size: cover;
transition: all 0.3s ease;
img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.4);
transition: all 0.3s ease;
}
&:hover {
background: #520002;
img {
display: none;
}
}
}
.active {
background: #520002;
img {
display: none;
}
}
.text {
font-size: 24px;
font-weight: 400;
color: #ccc;
position: relative;
z-index: 1;
}
}
}
.right-content {
flex: 1;
.el-col {
&:first-child {
position: relative;
.img-container {
height: 420px;
}
.unit-name-intro {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
padding: 100px 28px 50px;
background-image: linear-gradient(to top,
rgba(0, 0, 0, 0.8),
rgba(0, 0, 0, 0.1));
cursor: pointer;
transition: all 0.5s ease;
&:hover {
background: rgba(0, 0, 0, 0.8);
.unit-intro {
color: #fff;
}
}
.unit-name {
font-size: 48px;
font-weight: bold;
color: #ffffff;
text-align: center;
margin-bottom: 40px;
}
.unit-intro {
font-size: 16px;
font-weight: 400;
color: #ccc;
text-indent: 32px;
line-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
}
}
}
.img-container {
width: 100%;
// height: 100%;
height: 162px;
overflow: hidden;
cursor: pointer;
&:hover {
img {
transform: scale(1.1);
}
}
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all ease 0.5s;
}
}
}
}
/**以下为手风琴样式（暂时弃用） */
// &:hover {
// width: 100%;
// .custom-title,
// .units {
// display: none;
// }
// }
// .units-content {
// display: flex;
// // flex-wrap: wrap;
// flex: 1;
// &:hover {
// .units-content-item {
// width: 10vw;
// justify-content: flex-start;
// align-items: flex-start;
// padding: 50px;
// .title {
// writing-mode: vertical-rl;
// color: #ccc;
// }
// }
// }
// .units-content-item {
// width: 25%;
// // height: calc(100vh - 4px);
// display: flex;
// justify-content: center;
// align-items: center;
// position: relative;
// transition: width 0.5s ease 0.1s;
// padding: 50px;
// overflow-x: hidden;
// &:hover {
// // width: 70%;
// width: 70vw;
// .units-content-img {
// filter: none;
// background-image: url("~@/assets/imgs/display/red/unit-bg.jpg") !important;
// }
// .title {
// writing-mode: horizontal-tb;
// color: #666;
// font-size: 40px !important;
// }
// .intro {
// padding: 60px 0;
// }
// .intro,
// .imgs,
// .desc-title {
// display: block !important;
// }
// .desc-title {
// display: flex !important;
// }
// }
// .units-content-container {
// position: relative;
// z-index: 1;
// color: #fff;
// display: flex;
// flex-direction: column;
// .title {
// font-size: 32px;
// font-family: "KaiTi";
// }
// .intro {
// margin-top: 10px;
// display: none;
// font-family: "KaiTi";
// color: #333;
// text-indent: 32px;
// font-size: 22px;
// line-height: 36px;
// width: calc(68vw - 40px);
// margin-bottom: 10px;
// }
// .imgs {
// display: none;
// .el-image {
// width: 100%;
// height: 300px;
// }
// }
// .desc-title {
// display: none;
// font-size: 14px;
// color: #333;
// display: flex;
// justify-content: center;
// }
// }
// .units-content-img {
// position: absolute;
// left: 0;
// top: 0;
// width: 100%;
// height: 100%;
// // z-index: -1;
// -webkit-filter: brightness(0.3);
// filter: brightness(0.3);
// // transition: all 1s ease;
// cursor: pointer;
// background-size: cover;
// background-repeat: no-repeat;
// }
// }
// }
}
}
/**关联文献 */
.display-detail_lts {
display: flex;
justify-content: center;
margin: 100px 0;
.wrapper {
display: flex;
background-color: #fafafa;
border: 2px solid #cccccc;
border-left: none;
.lts-content {
width: 100%;
flex: 1;
padding: 10px;
}
}
}
}
}
::v-deep .el-carousel__item--card {
width: 100%;
height: 100%;
transform: translateX(0) scale(1) !important;
}
@keyframes filmMoveLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-1400px);
}
}
@keyframes filmMoveRight {
0% {
transform: translateX(0);
}
100% {
transform: translateX(1400px);
}
}
@keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
@-webkit-keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
.animation-play-paused {
animation-play-state: paused;
-webkit-animation-play-state: paused;
/* Safari 和 Chrome */
}
</style>
\ No newline at end of file
src/views/display/components/templates/detail-dialog.vue 0 → 100644
浏览文件 @ b35bddfc
<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)"
v-if="node.imagesVo[0]"
>
<div
class="img"
:style="`background-image: url('${node.imagesVo[0] &&node.imagesVo[0].url}')`"
></div>
<p>
<span class="title">{{ node.title }}</span>
<span class="seq">{{ node.unit }}</span>
</p>
</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="img" :style="`background-image: url('${img}')`">
</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 this.transformTree2List(arr);
},
},
methods: {
handlePageChange(index, flag) {
if (flag) {
this.activePage = index;
} else {
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>
<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: 48%;
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: 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;
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-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 {
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论