Skip to content

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

增加展览详情页的虚拟展厅显示

上级 353fa1ea
显示空白字符变更
内嵌 并排
正在显示 包含 240 行增加 和 26 行删除
src/components/NavBar/index.vue
浏览文件 @ 5e5db8de
......@@ -540,10 +540,12 @@ export default {
a {
// color: #182f68;
color: #fff8a3;
// color: #5a4609;
text-shadow: 0 1px 2px #9fafcb, 1px 0px 2px #9fafcb;
}
}
.router-link-exact-active {
// color: #5a4609;
// color: #182f68;
color: #fff8a3;
text-shadow: 0 1px 2px #9fafcb, 1px 0px 2px #9fafcb;
......
src/views/display/components/BlueStyle.vue
浏览文件 @ 5e5db8de
......@@ -183,6 +183,21 @@
</el-carousel>
</div>
</div>
<div class="display-detail_virtual content-item" v-if="displayDetail.virtualVo.length>0">
<div
class="img-container"
@click="handleToVR(item)"
v-for="(item, index) in displayDetail.virtualVo"
:key="index"
>
<img :src="item.faceImagePressUrl" alt="" />
<div class="modal">
<svg-icon icon-class="360"></svg-icon>
<div class="name">点击进入{{ item.name }}</div>
</div>
</div>
</div>
<!--展览单元 -->
<div
class="content-item display-detail_units"
......@@ -602,6 +617,10 @@ export default {
path: "/culturalRelic/" + crId,
});
},
handleToVR(item) {
window.open(item.url);
},
},
};
</script>
......@@ -671,6 +690,7 @@ $blue: #2069c4;
font-weight: 400;
color: $blue;
line-height: 101px;
font-family: "SourceHanSerifCN-Bold";
}
}
.desc {
......@@ -910,6 +930,7 @@ $blue: #2069c4;
font-weight: 400;
color: #2069c4;
line-height: 90px;
font-family: "SourceHanSerifCN-Bold";
i {
margin-right: 10px;
}
......@@ -924,6 +945,59 @@ $blue: #2069c4;
}
}
// 虚拟展
.display-detail_virtual {
height: 400px;
display: flex;
.img-container {
// width: 800px;
flex: 1;
height: 400px;
position: relative;
cursor: pointer;
overflow: hidden;
&:hover {
img {
transform: scale(1.1);
}
}
img {
width: 100%;
height: 400px;
transition: all ease 0.5s;
object-fit: cover;
}
.modal {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 400px;
background: rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&:hover {
.name {
opacity: 1;
}
}
.svg-icon {
font-size: 110px;
color: #fff;
}
.name {
color: #fff;
font-size: 28px;
font-family: "SourceHanSerifCN-Bold";
opacity: 0;
transition: all ease 0.5s;
}
}
}
}
/**展览单元 */
.display-detail_units {
overflow-x: hidden;
......
src/views/display/components/ChStyle.vue
浏览文件 @ 5e5db8de
......@@ -10,7 +10,6 @@
"
ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
>
<div class="view-box">
<div
......@@ -119,6 +118,7 @@
</el-carousel>
</div>
</div>
<div
class="audio"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
......@@ -135,6 +135,22 @@
</div>
</div>
</div>
<div class="content-item virtual" v-if="displayDetail.virtualVo.length>0">
<div class="wrapper">
<div
class="img-container"
@click="handleToVR(item)"
v-for="(item, index) in displayDetail.virtualVo"
:key="index"
>
<img :src="item.faceImagePressUrl" alt="" />
<div class="modal">
<svg-icon icon-class="360"></svg-icon>
<div class="name">点击进入{{ item.name }}</div>
</div>
</div>
</div>
</div>
<div
class="content-item units"
v-if="displayDetail.exhibitionUnits.length > 0"
......@@ -291,7 +307,6 @@ export default {
},
async mounted() {
this.loadDetail();
},
destroyed() {
//同时在destroyed回调中移除监听：
......@@ -748,6 +763,62 @@ export default {
/* Safari 和 Chrome */
}
.virtual {
margin-top: 40px;
display: flex;
justify-content: center;
.wrapper {
height: 400px;
display: flex;
.img-container {
// width: 800px;
flex: 1;
height: 400px;
position: relative;
cursor: pointer;
overflow: hidden;
&:hover {
img {
transform: scale(1.1);
}
}
img {
width: 100%;
height: 400px;
transition: all ease 0.5s;
object-fit: cover;
}
.modal {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 400px;
background: rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&:hover {
.name {
opacity: 1;
}
}
.svg-icon {
font-size: 110px;
color: #fff;
}
.name {
color: #fff;
font-size: 28px;
font-family: "KaiTi";
opacity: 0;
transition: all ease 0.5s;
}
}
}
}
}
/**展览单元 */
.units {
margin-top: 94px;
......
src/views/display/components/RedStyle.vue
浏览文件 @ 5e5db8de
......@@ -120,14 +120,16 @@
<svg-icon icon-class="keyword"></svg-icon>
关键词：</span
>
<span class="value">{{ displayDetail.keyword||'暂无' }}</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] ||'暂无'
dicts.displayType[displayDetail.type] || "暂无"
}}</span>
</div>
<div class="body-item">
......@@ -135,20 +137,26 @@
<svg-icon icon-class="zlxz"></svg-icon>展览性质：</span
>
<span class="value">{{
dicts.displayCharacter[displayDetail.displayCharacter] ||'暂无'
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>
<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>
<span class="value">{{
displayDetail.regionName || "暂无"
}}</span>
</div>
</div>
</el-col>
......@@ -204,6 +212,23 @@
</div>
</div>
</div>
<!-- 虚拟展厅 -->
<div class="display-detail_virtual content-item" v-if="displayDetail.virtualVo.length>0">
<div class="wrapper">
<div
class="img-container"
@click="handleToVR(item)"
v-for="(item, index) in displayDetail.virtualVo"
:key="index"
>
<img :src="item.faceImagePressUrl" alt="" />
<div class="modal">
<svg-icon icon-class="360"></svg-icon>
<div class="name">点击进入{{ item.name }}</div>
</div>
</div>
</div>
</div>
<!--展览单元 -->
<div
class="
......@@ -239,28 +264,16 @@
</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> -->
<el-row v-if="currentUnit">
<el-col>
<div class="unit-name-intro2">
<div class="unit-name">{{ currentUnit.title }}</div>
<div class="unit-intro" v-html="currentUnit.intro"></div>
</div>
<div class="unit-images" v-if=" currentUnit.imagesVo.length > 0">
<div
class="unit-images"
v-if="currentUnit.imagesVo.length > 0"
>
<div class="unit-images-title">
<svg-icon icon-class="collect-s"></svg-icon>
相关图片
......@@ -824,7 +837,62 @@ export default {
}
}
}
.display-detail_virtual {
margin-top: 60px;
display: flex;
justify-content: center;
.wrapper {
height: 400px;
display: flex;
.img-container {
// width: 800px;
flex: 1;
height: 400px;
position: relative;
cursor: pointer;
overflow: hidden;
&:hover {
img {
transform: scale(1.1);
}
}
img {
width: 100%;
height: 400px;
transition: all ease 0.5s;
object-fit: cover;
}
.modal {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 400px;
background: rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&:hover {
.name {
opacity: 1;
}
}
.svg-icon {
font-size: 110px;
color: #fff;
}
.name {
color: #fff;
font-size: 28px;
font-family: "KaiTi";
opacity: 0;
transition: all ease 0.5s;
}
}
}
}
}
/**展览单元 */
.display-detail_units {
display: flex;
......@@ -984,11 +1052,10 @@ export default {
margin-bottom: 20px;
align-items: center;
color: #520002;
.svg-icon{
.svg-icon {
margin: 0 10px;
}
}
}
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论