提交 7306e8ec authored 作者: 龙菲's avatar 龙菲

神秘贵州精品展增加页面内部查看vr,优化常设展厅图片加载过慢的问题,解决图片加载失败的问题

上级 127cc308
This image diff could not be displayed because it is too large. You can view the blob instead.
This image diff could not be displayed because it is too large. You can view the blob instead.
This image diff could not be displayed because it is too large. You can view the blob instead.
This image diff could not be displayed because it is too large. You can view the blob instead.
This image diff could not be displayed because it is too large. You can view the blob instead.
This image diff could not be displayed because it is too large. You can view the blob instead.
This image diff could not be displayed because it is too large. You can view the blob instead.
This image diff could not be displayed because it is too large. You can view the blob instead.
<?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="1666920591697" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3755" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M775.779 418.172l-2.051 0c-15.159 0-27.6 4.355-39.583 11.771-10.486-30.584-37.159-52.615-71.513-52.615-15.16 0-29.638 4.354-41.62 11.77-10.487-30.583-37.172-52.615-71.527-52.615-13.399 0-25.85 3.357-36.873 9.255l0-78.691c0-42.861-32.418-77.606-75.59-77.606-43.173 0-78.17 34.745-78.17 77.606l0 301.282-47.49-47.295c-30.528-30.306-84.558-25.992-110.55 0s-43.038 78.308-5.818 115.528l218.306 216.875c4.504 4.471 9.455 8.2 14.663 11.353 39.803 32.47 85.412 51.692 181.857 51.692 220.324 0 240.728-118.865 240.728-265.492L850.548 495.777C850.547 452.917 818.952 418.172 775.779 418.172zM809.403 650.988c0 124.069-0.593 224.647-199.585 224.647-84.298 0-134.907-18.796-173.246-56.858L229.904 613.455c-18.285-18.285-13.687-41.664 1.282-56.633 14.968-14.968 42.441-15.486 56.902-1.131 0 0 36.259 36.045 67.498 67.1 23.641 23.502 44.408 44.145 44.408 44.145l0-391.72c0-20.302 16.578-36.76 37.028-36.76 20.449 0 34.448 16.459 34.448 36.76l0 249.154 0.415 0c-0.27 1.32-0.415 2.685-0.415 4.085 0 11.278 9.21 20.423 20.571 20.423 11.36 0 20.57-9.144 20.57-20.423 0-1.4-0.144-2.765-0.415-4.085l0.415 0L512.611 422.257c0-20.302 14.795-36.761 35.245-36.761 0 0 36.232-0.49 36.232 36.761l0 134.787 0.415 0c-0.27 1.321-0.415 2.686-0.415 4.085 0 11.279 9.21 20.423 20.57 20.423 11.361 0 20.571-9.143 20.571-20.423 0-1.399-0.144-2.764-0.415-4.085l0.415 0 0-93.942c0-20.303 14.559-36.762 35.01-36.762 0 0 36.983 2.303 36.983 36.762l0 118.449 0.415 0c-0.269 1.32-0.415 2.686-0.415 4.085 0 11.279 9.21 20.423 20.571 20.423s20.055-9.143 20.055-20.423c0-1.399-0.136-2.765-0.392-4.085l0.392 0 0-80.872c0-20.302 15.255-36.761 35.704-36.761 0 0 35.851-1.45 35.851 36.761C809.403 500.679 809.403 617.954 809.403 650.988zM328.307 382.755l0-68.631c-6.531-14.641-10.24-30.817-10.24-47.884 0-65.037 52.723-117.76 117.76-117.76s117.76 52.723 117.76 117.76c0 8.884-1.05 17.509-2.935 25.82 14.812 0.578 28.176 6.726 37.904 16.597 3.771-13.518 5.99-27.685 5.99-42.417 0-87.658-71.062-158.72-158.72-158.72s-158.72 71.062-158.72 158.72C277.107 312.36 296.898 353.755 328.307 382.755z" p-id="3756"></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="1666921291727" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3875" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M512 960C273.8 960 80 766.2 80 528c0-143.7 71.2-277.6 190.4-358.2l35.8 53C204.7 291.5 144 405.6 144 528c0 202.9 165.1 368 368 368s368-165.1 368-368c0-125.4-62.9-241-168.4-309.2l34.8-53.7C870.1 245.1 944 380.8 944 528c0 238.2-193.8 432-432 432z" p-id="3876"></path><path d="M480 80h64v416h-64z" p-id="3877"></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="1666921294932" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4030" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M795.5 192H581c-19.6 0-35.6 15.7-36 35.3-0.4 20.3 16.4 36.7 36.7 36.7h128.4L581 393.1c-14 14-14 36.9 0 50.9s36.9 14 50.9 0L760 315.9v129c0 19.6 15.8 35.6 35.3 36 20.2 0.4 36.7-16.4 36.7-36.7V228.5c0-20.1-16.3-36.5-36.5-36.5zM442.2 760H313.8L443 630.9c14-14 14-36.9 0-50.9s-36.9-14-50.9 0L264 708.1V579c0-19.6-15.8-35.6-35.3-36-20.2-0.4-36.7 16.4-36.7 36.7v215.6c0 20.3 16.4 36.7 36.7 36.7H443c19.6 0 35.6-15.7 36-35.3 0.3-20.3-16.5-36.7-36.8-36.7z" p-id="4031"></path><path d="M838 136c27.6 0 50 22.4 50 50v652c0 27.6-22.4 50-50 50H186c-27.6 0-50-22.4-50-50V186c0-27.6 22.4-50 50-50h652m0-72H186c-16.4 0-32.4 3.2-47.5 9.6-14.5 6.1-27.6 14.9-38.8 26.1-11.2 11.2-20 24.2-26.1 38.8-6.4 15.1-9.6 31.1-9.6 47.5v652c0 16.4 3.2 32.4 9.6 47.5 6.1 14.5 14.9 27.6 26.1 38.8 11.2 11.2 24.2 20 38.8 26.1 15.1 6.4 31.1 9.6 47.5 9.6h652c16.4 0 32.4-3.2 47.5-9.6 14.5-6.1 27.6-14.9 38.8-26.1 11.2-11.2 20-24.2 26.1-38.8 6.4-15.1 9.6-31.1 9.6-47.5V186c0-16.4-3.2-32.4-9.6-47.5-6.1-14.5-14.9-27.6-26.1-38.8-11.2-11.2-24.2-20-38.8-26.1-15.1-6.4-31.1-9.6-47.5-9.6z" p-id="4032"></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="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
...@@ -128,13 +128,7 @@ ...@@ -128,13 +128,7 @@
:key="index" :key="index"
> >
<div class="img-container" v-if="unitPics[curentUnitPicIndex]"> <div class="img-container" v-if="unitPics[curentUnitPicIndex]">
<img <img :src="$getFullUrl(item)" />
:src="
require(`@/assets/imgs/boutique/smgz/3_hall/hall_pics/${
curentUnitPicIndex + 1
}-${item}.png`)
"
/>
</div> </div>
</swiper-slide> </swiper-slide>
<div class="swiper-pagination" slot="pagination"></div> <div class="swiper-pagination" slot="pagination"></div>
...@@ -171,7 +165,7 @@ ...@@ -171,7 +165,7 @@
{{ item.name }} {{ item.name }}
</div> </div>
</div> --> </div> -->
<div class="crs-content-swiper"> <div class="crs-content-swiper wow animate__animated animate__fadeInUp">
<swiper :options="swiperOption2" ref="mySwiper"> <swiper :options="swiperOption2" ref="mySwiper">
<swiper-slide v-for="(v, i) in units" :key="i"> <swiper-slide v-for="(v, i) in units" :key="i">
<div class="crs-content-imgs"> <div class="crs-content-imgs">
...@@ -214,22 +208,56 @@ ...@@ -214,22 +208,56 @@
<!-- <div class="img-container wow animate__animated animate__fadeInRight"> <!-- <div class="img-container wow animate__animated animate__fadeInRight">
<img src="@/assets/imgs/boutique/smgz/5_guide/pic2.png" alt="" /> <img src="@/assets/imgs/boutique/smgz/5_guide/pic2.png" alt="" />
</div> --> </div> -->
<div class="guide-content-vr"> <div
<div class="img-container" @click="handleToVR"> class="guide-content-vr wow animate__animated animate__fadeInRight"
>
<div
class="vr-container"
@click="handleChangeToVR"
v-if="!showVrIFrame"
>
<img src="@/assets/imgs/boutique/smgz/5_guide/vr.png" alt="" /> <img src="@/assets/imgs/boutique/smgz/5_guide/vr.png" alt="" />
<div class="modal"> <div class="modal">
<svg-icon icon-class="360"></svg-icon> <svg-icon icon-class="360"></svg-icon>
<div class="vr-text">
<svg-icon icon-class="dianji"></svg-icon> 点击进入神秘贵州展厅
</div>
</div>
</div>
<div class="vr-iframe vr-container" v-else>
<div
:class="['loading-modal', isVrFull ? 'vr-full' : '']"
v-loading="showVrIFrame && !vrIFrameLoaded"
element-loading-text="正在加载神秘贵州展厅..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<iframe
src="http://gz.people.com.cn/GB/222162/382387/402166/index.html"
frameborder="0"
style="width: 100%; height: 100%"
id="vr_iframe"
></iframe>
<div class="icons" v-if="vrIFrameLoaded">
<div class="icon-item" @click="handleClickFullScreen">
<svg-icon icon-class="fullscreen2"></svg-icon>
<span class="icon-text">{{
isVrFull ? "缩小" : "全屏"
}}</span>
</div>
<div class="icon-item" @click="handleExitVR">
<svg-icon icon-class="exit"></svg-icon>
<span class="icon-text">退出</span>
</div>
</div>
</div> </div>
<div class="vr-full-modal" v-if="isVrFull"></div>
</div> </div>
</div> </div>
</div> </div>
<div <div
class=" class="guide-content-3d-imgs wow animate__animated animate__fadeInUp"
guide-content-3d-imgs
wow
animate__animated animate__fadeInDown
"
> >
<img src="@/assets/imgs/boutique/smgz/5_guide/pic3.png" alt="" /> <img src="@/assets/imgs/boutique/smgz/5_guide/pic3.png" alt="" />
</div> </div>
...@@ -280,6 +308,12 @@ ...@@ -280,6 +308,12 @@
<video-player :src="src"></video-player> <video-player :src="src"></video-player>
</div> </div>
</m-dialog> </m-dialog>
<!-- <m-dialog v-if="showVrDialog" @close="showVrDialog = false">
<div class="smgz-video">
</div>
</m-dialog> -->
</div> </div>
</template> </template>
...@@ -320,10 +354,22 @@ export default { ...@@ -320,10 +354,22 @@ export default {
curentUnitPicIndex: 0, curentUnitPicIndex: 0,
curentUnitCrIndex: 0, curentUnitCrIndex: 0,
unitPics: [ unitPics: [
["1", "2"], [
["1", "2"], "http://222.85.214.245:9604/files/2022-10-28-2607ad1d-605c-488c-ac92-50af7220decb/low/1-1.png",
["1", "2"], "http://222.85.214.245:9604/files/2022-10-28-2607ad1d-605c-488c-ac92-50af7220decb/low/1-2.png",
["1", "2"], ],
[
"http://222.85.214.245:9604/files/2022-10-28-2607ad1d-605c-488c-ac92-50af7220decb/low/2-1.png",
"http://222.85.214.245:9604/files/2022-10-28-2607ad1d-605c-488c-ac92-50af7220decb/low/2-2.png",
],
[
"http://222.85.214.245:9604/files/2022-10-28-2607ad1d-605c-488c-ac92-50af7220decb/low/3-1.png",
"http://222.85.214.245:9604/files/2022-10-28-2607ad1d-605c-488c-ac92-50af7220decb/low/3-2.png",
],
[
"http://222.85.214.245:9604/files/2022-10-28-2607ad1d-605c-488c-ac92-50af7220decb/low/4-1.png",
"http://222.85.214.245:9604/files/2022-10-28-2607ad1d-605c-488c-ac92-50af7220decb/low/4-2.png",
],
], ],
swiperOption: { swiperOption: {
...@@ -376,7 +422,11 @@ export default { ...@@ -376,7 +422,11 @@ export default {
}, },
}, },
showVideo: false, showVideo: false,
showVrDialog: false,
isVrFull: false,
src: "", src: "",
showVrIFrame: false,
vrIFrameLoaded: false, //vr iframe加载是否完毕
}; };
}, },
computed: { computed: {
...@@ -394,7 +444,9 @@ export default { ...@@ -394,7 +444,9 @@ export default {
); );
}, },
}, },
// mounted() {
// },
methods: { methods: {
handleChangeUnit(item) { handleChangeUnit(item) {
this.curentUnitPicIndex = item.index; this.curentUnitPicIndex = item.index;
...@@ -404,6 +456,40 @@ export default { ...@@ -404,6 +456,40 @@ export default {
this.curentUnitCrIndex = item.index; this.curentUnitCrIndex = item.index;
// this.curentUnitCrIndex = 1; // this.curentUnitCrIndex = 1;
}, },
handleChangeToVR() {
this.showVrIFrame = true;
this.$nextTick(() => {
var _this = this;
const iframe = document.getElementById("vr_iframe");
// 处理兼容行问题
if (iframe && iframe.attachEvent) {
iframe.attachEvent("onload", function () {
console.log("iframe已加载完毕");
_this.vrIFrameLoaded = true;
});
} else {
iframe.onload = function () {
console.log("iframe已加载完毕");
_this.vrIFrameLoaded = true;
};
}
});
},
handleExitVR() {
this.showVrIFrame = false;
this.vrIFrameLoaded = false;
if (this.isVrFull) {
this.isVrFull = false;
}
},
handleClickFullScreen() {
this.isVrFull = !this.isVrFull;
},
handleToVR() { handleToVR() {
window.open("http://gz.people.com.cn/GB/222162/382387/402166/index.html"); window.open("http://gz.people.com.cn/GB/222162/382387/402166/index.html");
}, },
...@@ -470,6 +556,7 @@ export default { ...@@ -470,6 +556,7 @@ export default {
align-items: center; align-items: center;
color: #fff; color: #fff;
font-weight: bolder; font-weight: bolder;
transform: translateY(-72px);
} }
// 公共样式结束 // 公共样式结束
...@@ -717,7 +804,7 @@ export default { ...@@ -717,7 +804,7 @@ export default {
// } // }
.crs-content-swiper { .crs-content-swiper {
width: 80%; width: 80%;
margin-top: 88px; margin-top: 50px;
.swiper-container { .swiper-container {
height: sHeight(600); height: sHeight(600);
.swiper-slide { .swiper-slide {
...@@ -809,13 +896,14 @@ export default { ...@@ -809,13 +896,14 @@ export default {
.guide-content-vr { .guide-content-vr {
height: 600px; height: 600px;
display: flex; display: flex;
padding-top: 20px; padding: 20px 0 0 40px;
.img-container { .vr-container {
width: 800px; width: 800px;
height: 520px; height: 520px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
box-shadow: 0px 18px 23px 8px rgb(0 0 0 / 30%);
&:hover { &:hover {
img { img {
transform: scale(1.1); transform: scale(1.1);
...@@ -835,12 +923,84 @@ export default { ...@@ -835,12 +923,84 @@ export default {
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4);
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column;
align-items: center; align-items: center;
color: #fff;
&:hover {
.vr-text {
opacity: 1;
}
}
.svg-icon { .svg-icon {
font-size: 150px; font-size: 150px;
}
.vr-text {
font-weight: 400;
opacity: 0;
transition: all ease 0.3s;
.svg-icon {
font-size: 32px;
}
}
}
.icons {
position: absolute;
right: 0;
bottom: 0;
color: #fff;
margin-right: 8px;
.icon-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.svg-icon {
border: 1px solid rgb(88 75 70/ 80%);
border-radius: 50%;
padding: 6px;
background: rgb(37 37 37 / 40%);
font-size: 18px;
}
.icon-text {
font-size: 12px;
font-weight: 400;
}
}
}
.loading-modal {
width: 100%;
height: 100%;
transition: all ease 0.5s;
::v-deep .el-loading-spinner {
i {
color: #fff;
}
}
::v-deep .el-loading-text {
color: #fff; color: #fff;
} }
} }
.vr-full {
position: fixed;
top: 100px;
left: 0;
width: 99vw;
height: calc(100vh - 100px);
z-index: 9999;
}
.vr-full-modal {
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
left: 0;
top: 0;
z-index: 2;
}
} }
} }
.guide-content-3d-imgs { .guide-content-3d-imgs {
...@@ -917,7 +1077,6 @@ export default { ...@@ -917,7 +1077,6 @@ export default {
justify-content: center; justify-content: center;
.center-text { .center-text {
font-size: 40px; font-size: 40px;
font-family: zihun55hao-longyinshoushu;
font-weight: 500; font-weight: 500;
color: #141c3c; color: #141c3c;
line-height: 50px; line-height: 50px;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论