Skip to content

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

增加默认展览主题

上级 320b2d47
隐藏空白字符变更
内嵌 并排
正在显示 包含 1137 行增加 和 89 行删除
src/components/MenuList/index.vue
浏览文件 @ 48cb03fc
<!-- -->
<template>
<el-menu
v-if="items.length>0"
class="sidebar-el-menu"
v-if="items.length > 0"
class="sidebar-el-menu blueStyle"
default-active=""
@open="handleOpen"
@close="handleClose"
:default-openeds="[items[0].euId]"
>
<!-- 遍历菜单 -->
<template v-for="(item) in items">
<template v-for="item in items">
<!-- 含有子菜单 -->
<template v-if="item.children">
<!-- 第一层 含有子菜单菜单 -->
......@@ -17,7 +17,11 @@
<template slot="title">
<div slot="title" @click="handleClick(item)">{{ item.title }}</div>
</template>
<menu-list :items="item.children" v-bind="$attrs" v-on="$listeners"></menu-list
<menu-list
:items="item.children"
v-bind="$attrs"
v-on="$listeners"
></menu-list
><!--递归调用-->
</el-submenu>
</template>
......@@ -25,7 +29,7 @@
<!-- 第一层 不含子菜单 -->
<template v-else>
<el-menu-item :index="item.euId" :key="item.title">
<div slot="title" @click="handleClick(item)">{{ item.title }}</div>
<div slot="title" @click="handleClick(item)">{{ item.title }}</div>
</el-menu-item>
</template>
</template>
......@@ -39,34 +43,53 @@ export default {
items: Array,
isCollapse: Boolean,
},
inheritAttrs:false,
inheritAttrs: false,
methods: {
handleOpen(key, keyPath) {
},
handleOpen(key, keyPath) {},
handleClose(key, keyPath) {
// console.log(key, keyPath);
},
handleClick(item){
handleClick(item) {
// console.log(item.title);
this.$emit('open',item)
}
this.$emit("open", item);
},
},
};
</script>
<style lang="scss" scoped>
.el-menu{
border-right: none;
.el-menu {
border-right: none;
}
.el-menu-item {
background-color: #f5f5f9;
font-size: 16px;
// color: #2069c4;
&:hover {
background-color: #2069c4;
color: #fff;
}
}
.el-menu-item.is-active {
color: #2069c4;
font-weight: bold;
}
.blueStyle {
background-image: url("@/assets/imgs/display/normal/bg.png");
background-size: 1%;
::v-deep .el-menu-item {
transition: all 0.5s ease;
background: transparent;
padding: 0 60px !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&:hover {
background: rgba($color: #fff, $alpha: 0.6);
color: #2069c4;
font-weight: bold;
}
}
}
</style>
src/components/NavBar/index.vue
浏览文件 @ 48cb03fc
......@@ -165,7 +165,6 @@ export default {
name: value.name,
path: value.path,
};
if (value.name.indexOf("display") != -1) {
this.currentTab = {
name: "展览",
......
src/components/ReaderOperations/index.vue
浏览文件 @ 48cb03fc
......@@ -4,6 +4,7 @@
<span class="operation-item" @click="handleLike" v-if="like">
<svg-icon
icon-class="like"
:style="{ fontSize: iconSize + 'px' }"
:class="loveCountStatus ? 'like' : ''"
></svg-icon>
<span>{{ loveCount }}</span>
......@@ -11,12 +12,17 @@
<span class="operation-item" @click="handleCollect" v-if="collect">
<svg-icon
icon-class="collect"
:style="{ fontSize: iconSize + 'px' }"
:class="collectCountStatus ? 'collect' : ''"
></svg-icon>
<span>{{ collectCount }}</span>
</span>
<span v-if="share" class="operation-item" @click="handleShare">
<svg-icon icon-class="share"></svg-icon>
<svg-icon
icon-class="share2"
:style="{ fontSize: iconSize + 'px' }"
></svg-icon>
<span>分享</span>
</span>
</div>
<el-dialog
......@@ -116,6 +122,10 @@ export default {
type: String,
default: "",
},
iconSize: {
type: [Number, String],
default: 32,
},
},
data() {
return {
......@@ -203,20 +213,20 @@ export default {
.operations {
// 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;
}
.like {
color: #831122;;
color: #831122;
}
.collect {
color: #2069c4;
......
src/components/Video/index.vue
浏览文件 @ 48cb03fc
<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,34 +62,39 @@ 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: 58px;
z-index: 1;
transform: scaleX(1.5);
}
}
}
......@@ -102,4 +111,17 @@ export default {
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/enlarge.svg 0 → 100644
浏览文件 @ 48cb03fc
<?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="1661304913948" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8136" 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="M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z" p-id="8137"></path><path d="M625.792 448H512v-112a32 32 0 0 0-64 0V448h-112a32 32 0 0 0 0 64H448v112a32 32 0 1 0 64 0V512h113.792a32 32 0 1 0 0-64z" p-id="8138"></path></svg>
\ No newline at end of file
src/icons/svg/fullScreen.svg 0 → 100644
浏览文件 @ 48cb03fc
<?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="1661328618904" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1851" xmlns:xlink="http://www.w3.org/1999/xlink" width="239.84375" 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="M843.1616 68.266667H989.866667a170.666667 170.666667 0 0 1 170.666666 170.666666v152.8832a34.133333 34.133333 0 1 0 68.266667 0V238.933333a238.933333 238.933333 0 0 0-238.933333-238.933333h-146.705067a34.133333 34.133333 0 0 0 0 68.266667zM1160.533333 629.3504V785.066667a170.666667 170.666667 0 0 1-170.666666 170.666666h-123.5968a34.133333 34.133333 0 0 0 0 68.266667H989.866667a238.933333 238.933333 0 0 0 238.933333-238.933333v-155.716267a34.133333 34.133333 0 1 0-68.266667 0zM393.4208 955.733333H238.933333a170.666667 170.666667 0 0 1-170.666666-170.666666v-155.136a34.133333 34.133333 0 0 0-68.266667 0V785.066667a238.933333 238.933333 0 0 0 238.933333 238.933333h154.487467a34.133333 34.133333 0 0 0 0-68.266667zM68.266667 393.045333V238.933333a170.666667 170.666667 0 0 1 170.666666-170.666666h147.933867a34.133333 34.133333 0 0 0 0-68.266667H238.933333a238.933333 238.933333 0 0 0-238.933333 238.933333v154.112a34.133333 34.133333 0 1 0 68.266667 0z" p-id="1852"></path></svg>
\ No newline at end of file
src/icons/svg/jianjie.svg 0 → 100644
浏览文件 @ 48cb03fc
<?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="1661222716400" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8472" 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="M185.98250762 944.5510206C124.4518956 907.81632617 126.28863037 918.83673477 126.28863037 509.24489786 126.28863037 146.4897957 126.28863037 137.30612276 145.57434453 113.42857168 185.06414023 62.91836738 192.4110793 62 512.00291622 62c326.02040859 0 333.36734677 0.91836739 367.34693818 57.85714248 17.4489794 27.5510206 18.36734678 48.67346953 18.36734677 390.30612275 0 398.57142832 0 398.57142832-57.85714248 433.46938799-27.5510206 17.4489794-47.75510214 18.36734678-327.85714248 18.36734678-274.59183691 0-300.30612276-1.83673477-326.0204086-17.4489794z m573.97959228-143.26530644v-22.95918369H512.92128359c-190.10204122 0-247.95918369 2.75510214-251.63265322 11.93877597-11.02040859 32.14285752 0 33.97959141 251.63265322 33.97959141h247.04081631v-22.95918369z m0-192.85714249v-22.95918368H512.92128359c-190.10204122 0-247.95918369 2.75510214-251.63265322 11.93877509-11.02040859 32.14285752 0 33.97959141 251.63265322 33.97959229h247.04081631v-22.9591837z m0-192.85714335v-22.95918369H512.92128359c-190.10204122 0-247.95918369 2.75510214-251.63265322 11.93877597-11.02040859 32.14285752 0 33.97959141 251.63265322 33.97959141h247.04081631v-22.95918369zM502.81924238 222.71428584v-22.9591837H384.3498544c-87.24489785 0-120.30612276 2.75510214-123.06122403 11.9387751-10.10204122 30.30612276 3.67346953 33.97959141 123.06122403 33.97959229h118.46938798v-22.95918369z" p-id="8473"></path></svg>
\ No newline at end of file
src/icons/svg/keyword.svg 0 → 100644
浏览文件 @ 48cb03fc
<?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/music.svg 0 → 100644
浏览文件 @ 48cb03fc
<?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="1661334765143" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1911" 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="M628.905386 769.860427 628.905386 482.261019l169.381759-27.464779C771.308637 311.811584 645.822916 203.633728 494.993179 203.633728c-170.51599 0-308.738475 138.222485-308.738475 308.738875 0 170.516989 138.222485 308.738875 308.738475 308.738875 16.540186 0 32.756191-1.34209 48.589456-3.839397 12.391598-20.573051 34.625524-37.084856 62.858182-44.145869C613.897561 771.276467 621.429455 770.182208 628.905386 769.860427zM551.718919 228.830645l-33.079572 144.922942-33.078373 0-23.62798-144.922942C496.589896 211.497397 551.718919 228.830645 551.718919 228.830645zM494.993179 626.995689c-63.300482 0-114.622086-51.317007-114.622086-114.622886 0-63.30348 51.321604-114.622486 114.622086-114.622486 63.306478 0 114.622486 51.319006 114.622486 114.622486C609.615665 575.678482 558.299457 626.995689 494.993179 626.995689zM494.993179 424.978057c-48.20112 0-87.394147 39.192827-87.394147 87.394546 0 48.20112 39.192827 87.395546 87.394147 87.395546 48.201719 0 87.395946-39.194226 87.395946-87.395546C582.389124 464.170884 543.194698 424.978057 494.993179 424.978057zM494.993179 574.79708c-34.421063 0-62.423477-28.002015-62.423477-62.424476 0-34.421662 28.011408-62.424076 62.423477-62.424076 34.432055 0 62.416082 28.002414 62.416082 62.424076C557.409061 546.795265 529.425034 574.79708 494.993179 574.79708zM534.528574 870.531771c1.499983 8.297374 4.789753 16.008146 9.524542 22.939447-16.073102 2.058604-32.429013 3.239803-49.050144 3.239803-211.934708 0-384.347812-172.417701-384.347812-384.338419 0-211.922716 172.413104-384.338419 384.338019-384.338419 188.118456 0 345.001689 135.905456 377.892189 314.664258l-37.310503 6.059292c-29.969681-160.790984-171.236502-282.919381-340.581686-282.919381-191.084445 0-346.53365 155.451604-346.53365 346.53425 0 191.080048 155.449205 346.53425 346.53365 346.53425 12.796724 0 25.414169-0.748493 37.859731-2.104573C532.968631 861.361189 533.461497 865.948079 534.528574 870.531771zM912.096583 463.425989l0 333.227272c0 27.59629-20.573051 49.609165-52.658098 57.716668-35.234911 8.736077-69.250848-6.021917-75.997274-33.022611-6.760416-27.057655 16.31294-56.065787 51.53386-64.879811 15.920206-3.931335 31.587384-3.128879 44.698494 1.494986L879.673565 557.20001l-180.148459 32.927675-0.834434 249.757065-0.036975 0c-0.156894 23.646767-21.482435 46.868223-52.156438 54.45388-34.814196 8.759061-71.280472-7.807706-75.193819-32.597899-6.691463-26.747865 16.124068-55.470191 51.00222-64.201272 15.699356-3.904353 31.039755-3.119885 43.933013 1.402049L666.238674 503.300354 912.096583 463.425989z" p-id="1912"></path></svg>
\ No newline at end of file
src/icons/svg/share2.svg 0 → 100644
浏览文件 @ 48cb03fc
<?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="1661222710493" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8192" 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="M397.184 642.112a192 192 0 1 1-10.144-270.464L554.592 262.4a144 144 0 1 1 36.8 52.416l-165.44 107.84c14.08 26.72 22.016 57.12 22.016 89.376a191.36 191.36 0 0 1-15.808 76.384l241.056 135.584a144 144 0 1 1-28.992 57.12l-247.072-138.976z" p-id="8193"></path></svg>
\ No newline at end of file
src/icons/svg/unit.svg 0 → 100644
浏览文件 @ 48cb03fc
<?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="1661225582636" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9736" 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="M475.7212211 634.97693577h-152.29668467a58.21867749 58.21867749 0 0 0-44.92963146 21.09372362A67.92179013 67.92179013 0 0 0 258.87774219 703.32060089v161.99979731A68.13272763 68.13272763 0 0 0 278.49490497 912.78127636a58.85148916 58.85148916 0 0 0 44.92963147 21.09372364h152.29668466a60.74992419 60.74992419 0 0 0 45.35150565-21.09372364 67.49991595 67.49991595 0 0 0 19.4062261-48.30462734v-161.15604813a67.49991595 67.49991595 0 0 0-19.4062261-48.09368986 60.11711252 60.11711252 0 0 0-45.35150565-21.09372362z m4.85155673-70.03116184A97.24206555 97.24206555 0 0 0 512.00242578 542.79736362 105.46861816 105.46861816 0 0 0 539.63520367 469.81308008V194.32904951A109.68736322 109.68736322 0 0 0 533.09614942 153.40722558a101.67174811 101.67174811 0 0 0-21.09372364-33.32808297 97.24206555 97.24206555 0 0 0-30.5858996-21.09372364A86.27332957 86.27332957 0 0 0 443.23688648 90.12605469H186.52627032A86.90614123 86.90614123 0 0 0 149.19037897 98.3526073a99.77331308 99.77331308 0 0 0-30.58589877 21.09372363A105.46861816 105.46861816 0 0 0 97.72169323 153.40722558 109.68736322 109.68736322 0 0 0 90.12795312 194.32904951V469.81308008a105.46861816 105.46861816 0 0 0 28.47652708 72.77334687 99.77331308 99.77331308 0 0 0 30.58589876 22.35934698 86.90614123 86.90614123 0 0 0 37.33589137 8.22655178h256.71061615a87.53895291 87.53895291 0 0 0 37.33589135-8.22655178z m434.53070618-271.26528635a59.06242584 59.06242584 0 0 0-45.14056814-21.09372364h-152.08574717a60.11711252 60.11711252 0 0 0-45.56244314 21.09372364 67.49991595 67.49991595 0 0 0-19.40622611 48.09368984v161.15604895a68.5546018 68.5546018 0 0 0 19.40622611 49.1483757 60.96086169 60.96086169 0 0 0 45.56244314 21.09372364H870.59572754a59.69523752 59.69523752 0 0 0 45.14056897-21.09372364 70.03116266 70.03116266 0 0 0 18.14060193-49.1483757v-161.15604895a68.3436643 68.3436643 0 0 0-18.77341443-48.09368984zM870.59572754 634.97693577h-152.71855884a60.11711252 60.11711252 0 0 0-45.56244314 21.09372362 67.49991595 67.49991595 0 0 0-19.40622611 48.09368985v161.99979813A67.49991595 67.49991595 0 0 0 672.31472556 912.78127636a60.96086169 60.96086169 0 0 0 45.56244314 21.09372364H870.59572754a59.69523752 59.69523752 0 0 0 45.14056897-21.09372364 68.7655393 68.7655393 0 0 0 18.14060193-47.46087816v-161.99979731a68.5546018 68.5546018 0 0 0-18.77341443-48.09368986 59.06242584 59.06242584 0 0 0-45.14056814-21.09372362z m0 0" p-id="9737"></path></svg>
\ No newline at end of file
src/icons/svg/wenxian.svg 0 → 100644
浏览文件 @ 48cb03fc
<?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="1661225580299" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9596" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.390625" 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="M954.8 756.8q4.5 27-11.25 48.6t-42.75 26.1l-108 17.1q-26.1 4.5-48.15-11.25t-26.55-42.75l-91.8-581.4q-1.8-13.5 1.35-25.65t10.35-22.5 18.45-17.1 24.75-9.45l107.1-17.1q27-4.5 48.6 11.7t26.1 43.2zM502.1 117.8q27 0 45.9 18.9t18.9 45.9l0 601.2q0 27-18.9 45.9t-45.9 18.9l-93.6 0q-27 0-45.9-18.9t-18.9-45.9l0-601.2q0-27 14.4-45.9t42.3-18.9l101.7 0zM502.1 571.4q9 0 15.3-8.55t6.3-20.25q0-12.6-6.3-20.7t-15.3-8.1l-93.6 0q-9 0-15.3 8.1t-6.3 20.7q0 11.7 6.3 20.25t15.3 8.55l93.6 0zM502.1 457.1q9 0 15.3-8.55t6.3-21.15-6.3-20.7-15.3-8.1l-93.6 0q-9 0-15.3 8.1t-6.3 20.7 6.3 21.15 15.3 8.55l93.6 0zM219.5 117.8q27 0 46.35 18.9t19.35 45.9l0 601.2q0 27-19.35 45.9t-46.35 18.9l-93.6 0q-27 0-46.35-18.9t-19.35-45.9l0-601.2q0-27 19.35-45.9t46.35-18.9l93.6 0zM129.5 342.8q-9.9 0-16.2 8.1t-6.3 20.7q0 11.7 6.3 20.25t16.2 8.55l86.4 0q9.9 0 15.75-8.55t5.85-20.25q0-12.6-5.85-20.7t-15.75-8.1l-86.4 0zM219.5 625.4q9.9 0 15.75-8.1t5.85-19.8q0-12.6-5.85-20.25t-15.75-7.65l-90 0q-9.9 0-16.2 7.65t-6.3 20.25q0 11.7 6.3 19.8t16.2 8.1l90 0zM219.5 514.7q9.9 0 15.75-8.1t5.85-20.7-5.85-20.7-15.75-8.1l-90 0q-9.9 0-16.2 8.1t-6.3 20.7 6.3 20.7 16.2 8.1l90 0z" p-id="9597"></path></svg>
\ No newline at end of file
src/icons/svg/zldq.svg 0 → 100644
浏览文件 @ 48cb03fc
<?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
浏览文件 @ 48cb03fc
<?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
浏览文件 @ 48cb03fc
<?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
浏览文件 @ 48cb03fc
<?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/icons/svg/交流.svg 0 → 100644
浏览文件 @ 48cb03fc
<?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="1661225577930" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9456" 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="M700.53080036 417.73459981h-377.06160072a47.1327001 47.1327001 0 1 1 0-94.26540017h377.06160072a47.1327001 47.1327001 0 0 1 0 94.26540017z m0 188.53080038h-377.06160072a47.1327001 47.1327001 0 1 1 0-94.26540019h377.06160072a47.1327001 47.1327001 0 0 1 0 94.26540019z m-188.53080036 282.79620056a47.1327001 47.1327001 0 0 1-33.46421707-13.66848303L397.93886578 794.79620057H182.07109936a94.26540019 94.26540019 0 0 1-94.26540019-94.26540021V229.20379943a94.26540019 94.26540019 0 0 1 94.26540019-94.26540018h659.85780128a94.26540019 94.26540019 0 0 1 94.26540019 94.26540018v471.32700093a94.26540019 94.26540019 0 0 1-94.26540019 94.26540021h-216.33909342l-81.06824416 80.59691715A47.1327001 47.1327001 0 0 1 512 889.06160075zM182.07109936 229.20379943v471.32700093h235.66350045a47.1327001 47.1327001 0 0 1 33.46421708 13.66848303l60.3298561 60.80118314 61.27251012-60.80118314A47.1327001 47.1327001 0 0 1 606.26540019 700.53080036h235.66350045V229.20379943H182.07109936z" p-id="9457"></path></svg>
\ No newline at end of file
src/views/display/Detail.vue
浏览文件 @ 48cb03fc
<template>
<div class="display-detail">
<NormalStyle
<BlueStyle
v-if="displayDetail.themeType == '1'"
:displayDetail="displayDetail"
:dicts="dicts"
......@@ -22,6 +22,7 @@
</template>
<script>
import BlueStyle from "./components/BlueStyle.vue";
import NormalStyle from "./components/NormalStyle.vue";
import ChStyle from "./components/ChStyle.vue";
import RedStyle from "./components/RedStyle.vue";
......@@ -29,7 +30,7 @@ import { getDisplayById } from "@/api/display";
import { mapGetters } from "vuex";
export default {
components: {
NormalStyle,
BlueStyle,
ChStyle,
RedStyle,
},
......
src/views/display/components/BlueStyle.vue 0 → 100644
浏览文件 @ 48cb03fc
<template>
<div class="content">
<!-- 展览图片 -->
<div
class="content-item display-detail_imgs"
ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
>
<el-image
:src="$getFullUrl(displayDetail.faceImageUrl)"
fit="cover"
></el-image>
</div>
<div class="wrapper">
<!-- 展览基本信息 -->
<div class="content-item display-detail_basic_info">
<div class="info-container">
<div class="info-container-left">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
>
<div
class="img-container"
@click="handelPreviewImages(displayDetail.imagesVo)"
>
<img :src="item.url" alt="" srcset="" />
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination">1234</div>
<!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
<!-- <div class="swiper-button-next" slot="button-next"></div> -->
</swiper>
</div>
<div class="info-container-right">
<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="14" 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.display_type[displayDetail.type]
}}</span>
</div>
<div class="body-item">
<span class="label">
<svg-icon icon-class="zlxz"></svg-icon>展览性质：</span
>
<span class="value">{{
dicts.display_character[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="10" 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"
@reload="reload"
/>
</div>
</el-col>
</el-row>
</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/ch/audio.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">
<div class="intro-title">
<svg-icon icon-class="jianjie"></svg-icon>
<span>展览简介</span>
</div>
<div class="intro-content-container">
{{ displayDetail.intro }}
</div>
</div>
<div
class="intro-video"
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">
<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">
<!-- 只能单开 unique-opened -->
<menu-list
:items="displayDetail.exhibitionUnits"
:isCollapse="false"
@open="handleOpenUnit"
style="height: 100%"
></menu-list>
</div>
<div 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 unit-content_images_container"
>
<img :src="$getFullUrl(item.url)" 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>
</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>
</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" @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">
<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">
<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" @click="handleViewLt(scope.row)">
<img src="@/assets/imgs/display/ch/pdf-icon.png" />
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
<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 "@/views/personal/components/Card";
import Video from "@/components/Video";
import { previewFile } from "@/utils/index";
import ChStyleUnit from "./ChStyleUnit.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import MenuList from "@/components/MenuList";
export default {
name: "BlueStyle",
components: {
AudioPlayer,
ReaderOperations,
Video,
Card,
ChStyleUnit,
swiper,
swiperSlide,
MenuList,
"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,
curUnit: [],
swiperOption: {
autoplay: false,
effect: "fade",
pagination: {
el: ".swiper-pagination",
type: "bullets",
clickable: true,
// renderCustom: function (swiper, current, total) {
// var customPaginationHtml = "";
// for (var i = 0; i < total; i++) {
// //判断哪个分页器此刻应该被激活
// if (i == current - 1) {
// customPaginationHtml += `<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>`;
// } else {
// customPaginationHtml += `<span class="swiper-pagination-customs"></span>`;
// }
// }
// return (
// `<span class="swiperPag">` + customPaginationHtml + `</span>`
// );
// },
},
},
};
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
},
},
async mounted() {
this.loadDetail();
// let units = this.$refs.
},
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.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",
};
}
},
// 预览关联文献
handleViewLt(item) {
previewFile(item.files[0].url, item.files[0].name);
},
// 点击音频
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) {
console.log(item);
const { crId } = item;
this.$router.push({
path: "/culturalRelic/" + crId,
});
},
},
};
</script>
<style lang="scss" >
// 自定义分页器样式
.swiperPag {
height: 30px;
display: flex;
justify-content: center;
}
.swiper-pagination-customs {
width: 10px;
height: 10px;
display: inline-block;
margin-right: 10px;
background-color: rgba($color: #2069c4, $alpha: 0.5);
}
/*自定义分页器激活时的样式表现*/
.swiper-pagination-customs-active {
width: 10px;
height: 10px;
display: inline-block;
background-color: #2069c4;
}
</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-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");
img {
width: 100%;
}
}
}
}
/**公共样式结束 */
/**样式开始 */
.content {
width: 100%;
overflow-x: 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;
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;
.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;
.label {
display: flex;
align-items: center;
width: 120px;
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: -100px;
top: 34px;
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
// border: 1px solid #2069c4;
border-radius: 50%;
// padding: 10px;
display: flex;
justify-content: center;
align-items: center;
.svg-icon {
color: #2069c4;
font-size: 80px;
}
img {
width: 28px;
height: 28px;
}
}
}
/**简介和视频 */
.display-detail_intro {
background-image: url("@/assets/imgs/display/normal/bg.png");
background-size: 1%;
display: flex;
.intro-content,
.intro-video {
flex: 1;
// padding: 40px 0;
}
.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_container {
position: relative;
.unit-content_images_desc {
display: flex;
justify-content: center;
}
.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;
}
}
}
}
}
// 关联文物
.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 {
width: 100%;
max-height: 100%;
cursor: pointer;
transition: all 0.5s ease;
&:hover {
box-shadow: rgba(32, 105, 196, 0.4) 5px 5px,
rgba(32, 105, 196, 0.3) 10px 10px, rgba(32, 105, 196, 0.2) 15px 15px,
rgba(32, 105, 196, 0.1) 20px 20px,
rgba(32, 105, 196, 0.05) 25px 25px;
}
img {
width: 100%;
height: 214px;
max-height: 560px;
object-fit: cover;
}
}
}
/**关联文献 */
.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/ChStyle.vue
浏览文件 @ 48cb03fc
......@@ -29,7 +29,7 @@
<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>
......@@ -119,7 +119,7 @@
@click="handleClickAudio"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
>
<img src="@/assets/imgs/display/audio.png" alt="" />
<img src="@/assets/imgs/display/ch/audio.png" alt="" />
<AudioPlayer
style="display: none"
:url="$getFullUrl(displayDetail.audiosVo[0].url)"
......@@ -135,11 +135,11 @@
<div class="wrapper">
<div class="custom-title">
<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>
......@@ -150,11 +150,11 @@
<div class="wrapper">
<div class="custom-title">
<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>
......@@ -197,7 +197,7 @@
<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" />
<img src="@/assets/imgs/display/ch/pdf-icon.png" />
</div>
</template>
</el-table-column>
......@@ -527,7 +527,7 @@ export default {
justify-content: center;
.wrapper {
background: url("@/assets/imgs/display/intro-bg.png");
background: url("@/assets/imgs/display/ch/intro-bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 60px;
......@@ -711,7 +711,7 @@ export default {
justify-content: center;
width: 100%;
height: 569px;
background-image: url("@/assets/imgs/display/lts-bg.png");
background-image: url("@/assets/imgs/display/ch/lts-bg.png");
overflow-x: hidden;
}
}
......
src/views/display/components/NormalStyle.vue
浏览文件 @ 48cb03fc
......@@ -434,22 +434,6 @@ $label: #9f9c9a;
}
}
}
.view-3d {
margin-top: 32px;
padding: 6px 10px;
width: 100%;
background-color: #c1925b;
border-radius: 48px;
display: flex;
justify-content: center;
align-items: center;
color: white;
cursor: pointer;
img {
margin-right: 10px;
}
}
}
.title-container {
......
src/views/display/components/RedStyle.vue
浏览文件 @ 48cb03fc
......@@ -27,20 +27,20 @@
<div class="top">
<div class="top-wrapper">
<div class="film-img-container">
<img src="@/assets/imgs/display/jiaopian.png" alt="" />
<img src="@/assets/imgs/display/red/jiaopian.png" alt="" />
</div>
<div class="film-img-container">
<img src="@/assets/imgs/display/jiaopian.png" alt="" />
<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/jiaopian.png" alt="" />
<img src="@/assets/imgs/display/red/jiaopian.png" alt="" />
</div>
<div class="film-img-container">
<img src="@/assets/imgs/display/jiaopian.png" alt="" />
<img src="@/assets/imgs/display/red/jiaopian.png" alt="" />
</div>
</div>
</div>
......@@ -244,7 +244,7 @@
<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" />
<img src="@/assets/imgs/display/ch/pdf-icon.png" />
</div>
</template>
</el-table-column>
......@@ -652,7 +652,7 @@ export default {
width: 70vw;
.units-content-img {
filter: none;
background-image: url("@/assets/imgs/display/unit-bg.jpg") !important;
background-image: url("@/assets/imgs/display/red/unit-bg.jpg") !important;
}
.title {
writing-mode: horizontal-tb;
......
src/views/museum/Detail.vue
浏览文件 @ 48cb03fc
......@@ -238,22 +238,6 @@ $label: #9f9c9a;
}
}
}
.view-3d {
margin-top: 32px;
padding: 6px 10px;
width: 100%;
background-color: #c1925b;
border-radius: 48px;
display: flex;
justify-content: center;
align-items: center;
color: white;
cursor: pointer;
img {
margin-right: 10px;
}
}
}
.title-container {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论