Skip to content

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

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

上级 353fa1ea
隐藏空白字符变更
内嵌 并排
正在显示 包含 242 行增加 和 28 行删除
src/components/NavBar/index.vue
浏览文件 @ 5e5db8de
...@@ -540,10 +540,12 @@ export default { ...@@ -540,10 +540,12 @@ export default {
a { a {
// color: #182f68; // color: #182f68;
color: #fff8a3; color: #fff8a3;
// color: #5a4609;
text-shadow: 0 1px 2px #9fafcb, 1px 0px 2px #9fafcb; text-shadow: 0 1px 2px #9fafcb, 1px 0px 2px #9fafcb;
} }
} }
.router-link-exact-active { .router-link-exact-active {
// color: #5a4609;
// color: #182f68; // color: #182f68;
color: #fff8a3; color: #fff8a3;
text-shadow: 0 1px 2px #9fafcb, 1px 0px 2px #9fafcb; text-shadow: 0 1px 2px #9fafcb, 1px 0px 2px #9fafcb;
......
src/views/display/components/BlueStyle.vue
浏览文件 @ 5e5db8de
...@@ -183,6 +183,21 @@ ...@@ -183,6 +183,21 @@
</el-carousel> </el-carousel>
</div> </div>
</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 <div
class="content-item display-detail_units" class="content-item display-detail_units"
...@@ -602,6 +617,10 @@ export default { ...@@ -602,6 +617,10 @@ export default {
path: "/culturalRelic/" + crId, path: "/culturalRelic/" + crId,
}); });
}, },
handleToVR(item) {
window.open(item.url);
},
}, },
}; };
</script> </script>
...@@ -671,6 +690,7 @@ $blue: #2069c4; ...@@ -671,6 +690,7 @@ $blue: #2069c4;
font-weight: 400; font-weight: 400;
color: $blue; color: $blue;
line-height: 101px; line-height: 101px;
font-family: "SourceHanSerifCN-Bold";
} }
} }
.desc { .desc {
...@@ -910,6 +930,7 @@ $blue: #2069c4; ...@@ -910,6 +930,7 @@ $blue: #2069c4;
font-weight: 400; font-weight: 400;
color: #2069c4; color: #2069c4;
line-height: 90px; line-height: 90px;
font-family: "SourceHanSerifCN-Bold";
i { i {
margin-right: 10px; margin-right: 10px;
} }
...@@ -924,6 +945,59 @@ $blue: #2069c4; ...@@ -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 { .display-detail_units {
overflow-x: hidden; overflow-x: hidden;
......
src/views/display/components/ChStyle.vue
浏览文件 @ 5e5db8de
...@@ -10,7 +10,6 @@ ...@@ -10,7 +10,6 @@
" "
ref="imgs" ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
> >
<div class="view-box"> <div class="view-box">
<div <div
...@@ -119,6 +118,7 @@ ...@@ -119,6 +118,7 @@
</el-carousel> </el-carousel>
</div> </div>
</div> </div>
<div <div
class="audio" class="audio"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }" :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
...@@ -135,6 +135,22 @@ ...@@ -135,6 +135,22 @@
</div> </div>
</div> </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 <div
class="content-item units" class="content-item units"
v-if="displayDetail.exhibitionUnits.length > 0" v-if="displayDetail.exhibitionUnits.length > 0"
...@@ -291,7 +307,6 @@ export default { ...@@ -291,7 +307,6 @@ export default {
}, },
async mounted() { async mounted() {
this.loadDetail(); this.loadDetail();
}, },
destroyed() { destroyed() {
//同时在destroyed回调中移除监听： //同时在destroyed回调中移除监听：
...@@ -748,6 +763,62 @@ export default { ...@@ -748,6 +763,62 @@ export default {
/* Safari 和 Chrome */ /* 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 { .units {
margin-top: 94px; margin-top: 94px;
......
src/views/display/components/RedStyle.vue
浏览文件 @ 5e5db8de
...@@ -120,14 +120,16 @@ ...@@ -120,14 +120,16 @@
<svg-icon icon-class="keyword"></svg-icon> <svg-icon icon-class="keyword"></svg-icon>
关键词：</span 关键词：</span
> >
<span class="value">{{ displayDetail.keyword||'暂无' }}</span> <span class="value">{{
displayDetail.keyword || "暂无"
}}</span>
</div> </div>
<div class="body-item"> <div class="body-item">
<span class="label"> <span class="label">
<svg-icon icon-class="zllx"></svg-icon>展览类型：</span <svg-icon icon-class="zllx"></svg-icon>展览类型：</span
> >
<span class="value">{{ <span class="value">{{
dicts.displayType[displayDetail.type] ||'暂无' dicts.displayType[displayDetail.type] || "暂无"
}}</span> }}</span>
</div> </div>
<div class="body-item"> <div class="body-item">
...@@ -135,20 +137,26 @@ ...@@ -135,20 +137,26 @@
<svg-icon icon-class="zlxz"></svg-icon>展览性质：</span <svg-icon icon-class="zlxz"></svg-icon>展览性质：</span
> >
<span class="value">{{ <span class="value">{{
dicts.displayCharacter[displayDetail.displayCharacter] ||'暂无' dicts.displayCharacter[
displayDetail.displayCharacter
] || "暂无"
}}</span> }}</span>
</div> </div>
<div class="body-item"> <div class="body-item">
<span class="label" <span class="label"
><svg-icon icon-class="zldw"></svg-icon>展览单位：</span ><svg-icon icon-class="zldw"></svg-icon>展览单位：</span
> >
<span class="value">{{ displayDetail.deptName||'暂无' }}</span> <span class="value">{{
displayDetail.deptName || "暂无"
}}</span>
</div> </div>
<div class="body-item"> <div class="body-item">
<span class="label" <span class="label"
><svg-icon icon-class="zldq"></svg-icon>展览地区：</span ><svg-icon icon-class="zldq"></svg-icon>展览地区：</span
> >
<span class="value">{{ displayDetail.regionName ||'暂无' }}</span> <span class="value">{{
displayDetail.regionName || "暂无"
}}</span>
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -204,6 +212,23 @@ ...@@ -204,6 +212,23 @@
</div> </div>
</div> </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 <div
class=" class="
...@@ -239,28 +264,16 @@ ...@@ -239,28 +264,16 @@
</div> </div>
</div> </div>
<div class="right-content"> <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-row v-if="currentUnit">
<el-col> <el-col>
<div class="unit-name-intro2"> <div class="unit-name-intro2">
<div class="unit-name">{{ currentUnit.title }}</div> <div class="unit-name">{{ currentUnit.title }}</div>
<div class="unit-intro" v-html="currentUnit.intro"></div> <div class="unit-intro" v-html="currentUnit.intro"></div>
</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"> <div class="unit-images-title">
<svg-icon icon-class="collect-s"></svg-icon> <svg-icon icon-class="collect-s"></svg-icon>
相关图片 相关图片
...@@ -781,7 +794,7 @@ export default { ...@@ -781,7 +794,7 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
font-weight: bold; font-weight: bold;
color: #9f9c9a; color: #9f9c9a;
.svg-icon { .svg-icon {
margin-right: 8px; margin-right: 8px;
font-size: 16px; font-size: 16px;
...@@ -824,7 +837,62 @@ export default { ...@@ -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-detail_units {
display: flex; display: flex;
...@@ -862,7 +930,7 @@ export default { ...@@ -862,7 +930,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
background: #520002; background: #520002;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
.text { .text {
...@@ -984,11 +1052,10 @@ export default { ...@@ -984,11 +1052,10 @@ export default {
margin-bottom: 20px; margin-bottom: 20px;
align-items: center; align-items: center;
color: #520002; color: #520002;
.svg-icon{ .svg-icon {
margin: 0 10px; margin: 0 10px;
} }
} }
} }
} }
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论