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

src/icons/svg/dianji.svg

+<?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

src/icons/svg/exit.svg

+<?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

src/icons/svg/fullscreen2.svg

+<?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

src/icons/svg/交流.svg

-<?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/boutique/components/SMGZ.vue

@@ -128,13 +128,7 @@
               :key="index"
             >
               <div class="img-container" v-if="unitPics[curentUnitPicIndex]">
-                <img
-                  :src="
-                    require(`@/assets/imgs/boutique/smgz/3_hall/hall_pics/${
-                      curentUnitPicIndex + 1
-                    }-${item}.png`)
-                  "
-                />
+                <img :src="$getFullUrl(item)" />
               </div>
             </swiper-slide>
             <div class="swiper-pagination" slot="pagination"></div>
@@ -171,7 +165,7 @@
             {{ item.name }}
           </div>
         </div> -->
-        <div class="crs-content-swiper">
+        <div class="crs-content-swiper wow animate__animated animate__fadeInUp">
           <swiper :options="swiperOption2" ref="mySwiper">
             <swiper-slide v-for="(v, i) in units" :key="i">
               <div class="crs-content-imgs">
@@ -214,22 +208,56 @@
           <!-- <div class="img-container wow animate__animated animate__fadeInRight">
             <img src="@/assets/imgs/boutique/smgz/5_guide/pic2.png" alt="" />
           </div> -->
-          <div class="guide-content-vr">
-            <div class="img-container" @click="handleToVR">
+          <div
+            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="" />
               <div class="modal">
                 <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 class="vr-full-modal" v-if="isVrFull"></div>
             </div>
           </div>
         </div>
 
         <div
-          class="
-            guide-content-3d-imgs
-            wow
-            animate__animated animate__fadeInDown
-          "
+          class="guide-content-3d-imgs wow animate__animated animate__fadeInUp"
         >
           <img src="@/assets/imgs/boutique/smgz/5_guide/pic3.png" alt="" />
         </div>
@@ -280,6 +308,12 @@
         <video-player :src="src"></video-player>
       </div>
     </m-dialog>
+
+    <!-- <m-dialog v-if="showVrDialog" @close="showVrDialog = false">
+      <div class="smgz-video">
+        
+      </div>
+    </m-dialog> -->
   </div>
 </template>
 
@@ -320,10 +354,22 @@ export default {
       curentUnitPicIndex: 0,
       curentUnitCrIndex: 0,
       unitPics: [
-        ["1", "2"],
-        ["1", "2"],
-        ["1", "2"],
-        ["1", "2"],
+        [
+          "http://222.85.214.245:9604/files/2022-10-28-2607ad1d-605c-488c-ac92-50af7220decb/low/1-1.png",
+          "http://222.85.214.245:9604/files/2022-10-28-2607ad1d-605c-488c-ac92-50af7220decb/low/1-2.png",
+        ],
+        [
+          "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: {
@@ -376,7 +422,11 @@ export default {
         },
       },
       showVideo: false,
+      showVrDialog: false,
+      isVrFull: false,
       src: "",
+      showVrIFrame: false,
+      vrIFrameLoaded: false, //vr iframe加载是否完毕
     };
   },
   computed: {
@@ -394,7 +444,9 @@ export default {
       );
     },
   },
+  // mounted() {
 
+  // },
   methods: {
     handleChangeUnit(item) {
       this.curentUnitPicIndex = item.index;
@@ -404,6 +456,40 @@ export default {
       this.curentUnitCrIndex = item.index;
       //   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() {
       window.open("http://gz.people.com.cn/GB/222162/382387/402166/index.html");
     },
@@ -470,6 +556,7 @@ export default {
   align-items: center;
   color: #fff;
   font-weight: bolder;
+  transform: translateY(-72px);
 }
 
 // 公共样式结束
@@ -717,7 +804,7 @@ export default {
       // }
       .crs-content-swiper {
         width: 80%;
-        margin-top: 88px;
+        margin-top: 50px;
         .swiper-container {
           height: sHeight(600);
           .swiper-slide {
@@ -809,13 +896,14 @@ export default {
       .guide-content-vr {
         height: 600px;
         display: flex;
-        padding-top: 20px;
-        .img-container {
+        padding: 20px 0 0 40px;
+        .vr-container {
           width: 800px;
           height: 520px;
           position: relative;
           cursor: pointer;
           overflow: hidden;
+          box-shadow: 0px 18px 23px 8px rgb(0 0 0 / 30%);
           &:hover {
             img {
               transform: scale(1.1);
@@ -835,12 +923,84 @@ export default {
             background: rgba(0, 0, 0, 0.4);
             display: flex;
             justify-content: center;
+            flex-direction: column;
             align-items: center;
+            color: #fff;
+            &:hover {
+              .vr-text {
+                opacity: 1;
+              }
+            }
             .svg-icon {
               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;
             }
           }
+
+          .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 {
@@ -917,7 +1077,6 @@ export default {
           justify-content: center;
           .center-text {
             font-size: 40px;
-            font-family: zihun55hao-longyinshoushu;
             font-weight: 500;
             color: #141c3c;
             line-height: 50px;