大地图框架

src/assets/style/reset.css

@@ -1,295 +0,0 @@
-/* reset */
-html,
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-div,
-dl,
-dt,
-dd,
-ul,
-ol,
-li,
-p,
-blockquote,
-pre,
-hr,
-figure,
-table,
-caption,
-th,
-td,
-form,
-fieldset,
-legend,
-input,
-button,
-textarea,
-menu {
-  margin: 0;
-  padding: 0;
-}
-header,
-footer,
-section,
-article,
-aside,
-nav,
-hgroup,
-address,
-figure,
-figcaption,
-menu,
-details {
-  display: block;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-caption,
-th {
-  text-align: left;
-  font-weight: normal;
-}
-html,
-body,
-fieldset,
-img,
-iframe,
-abbr {
-  border: 0;
-}
-i,
-cite,
-em,
-var,
-address,
-dfn {
-  font-style: normal;
-}
-[hidefocus],
-summary {
-  outline: 0;
-}
-li {
-  list-style: none;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-small {
-  font-size: 100%;
-}
-sup,
-sub {
-  font-size: 83%;
-}
-pre,
-code,
-kbd,
-samp {
-  font-family: inherit;
-}
-q:before,
-q:after {
-  content: none;
-}
-textarea {
-  overflow: auto;
-  resize: none;
-}
-label,
-summary {
-  cursor: default;
-}
-a,
-button {
-  cursor: pointer;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-em,
-strong,
-b {
-  font-weight: bold;
-}
-del,
-ins,
-u,
-s,
-a,
-a:hover {
-  text-decoration: none;
-}
-body,
-textarea,
-input,
-button,
-select,
-keygen,
-legend {
-  font: 14px/1.14;
-  outline: 0;
-}
-body {
-  background: #fff;
-}
-* {
-  box-sizing: border-box;
-}
-a {
-  text-decoration: none;
-}
-::-webkit-scrollbar {
-  width: 2px;
-  height: 8px;
-}
-::-webkit-scrollbar-thumb {
-  height: 50px;
-  background-color: #ddd;
-  -webkit-border-radius: 4px;
-  outline: 2px solid #fff;
-  outline-offset: -2px;
-}
-::-webkit-scrollbar-thumb:hover {
-  height: 50px;
-  background-color: #9f9f9f;
-  -webkit-border-radius: 4px;
-}
-.el-pagination button:disabled {
-  background-color: transparent;
-}
-.el-pagination .btn-next,
-.el-pagination .btn-prev {
-  background-color: transparent;
-}
-.el-dialog,
-.el-pager li {
-  background-color: transparent;
-}
-.el-pagination {
-  color: #f0af7c;
-}
-.el-pager li.active {
-  color: black;
-}
-.el-pager li:hover {
-  color: black;
-}
-.el-pagination .btn-next,
-.el-pagination .btn-prev {
-  color: #f0af7c;
-}
-.el-pagination button:hover {
-  color: black;
-}
-.el-textarea__inner {
-  background-color: rgba(237, 211, 176, 0.3);
-  color: #f0af7c;
-  border: none;
-}
-.el-textarea__inner::-webkit-input-placeholder {
-  color: #EDD3B0;
-}
-.el-radio {
-  color: #f0af7c;
-}
-.el-radio__input.is-checked + .el-radio__label {
-  color: #f0af7c;
-}
-.el-radio__inner {
-  width: 24px;
-  height: 24px;
-}
-.el-radio__input.is-checked .el-radio__inner {
-  border-color: red;
-  background: #f0af7c;
-}
-.el-radio__inner:hover {
-  border-color: red;
-}
-.el-radio__input.is-checked .el-radio__inner::after {
-  transform: translate(-50%, -50%) scale(0);
-}
-.search .el-input__inner {
-  width: 340px;
-  height: 36px;
-  background-color: transparent;
-  color: #774926;
-  border: 1px solid #774926;
-  border-radius: 18px;
-}
-.el-input__inner {
-  background-color: transparent;
-  color: #774926;
-  border: 1px solid #774926;
-  border-radius: 13px;
-}
-.el-input.is-active .el-input__inner,
-.el-input__inner:focus {
-  border: 1px solid #cc946d;
-}
-.el-pagination__editor.el-input {
-  width: 28px;
-  height: 28px;
-  margin-right: 4px;
-}
-.el-pagination__editor.el-input .el-input__inner {
-  width: 26px;
-  height: 26px;
-}
-input::-webkit-input-placeholder {
-  color: #cc946d !important;
-}
-.el-select-dropdown__item.hover,
-.el-select-dropdown__item:hover {
-  background-color: rgba(237, 211, 176, 0.3);
-}
-.el-select-dropdown__item.selected {
-  color: #f0af7c;
-}
-/* 分页 */
-.el-pagination {
-  display: flex;
-  align-items: center;
-}
-.el-pager li {
-  font-weight: 400;
-  min-width: 24px;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  margin: 0 8px;
-  border: none;
-  background-color: transparent;
-  border-radius: 50%;
-}
-.el-pager li:hover {
-  color: #CC946D;
-}
-.el-pager li.active {
-  width: 26px;
-  height: 26px;
-  background-color: #CC946D;
-  border-radius: 50%;
-  color: #fff;
-}
-.el-pager li.active + li {
-  border: none;
-  background-color: transparent;
-}
-.el-pagination button:hover {
-  color: #CC946D;
-}

src/assets/style/reset.less

@@ -23,16 +23,13 @@ a{text-decoration: none;}
 
 
 ::-webkit-scrollbar {
-  width: 2px;
-  height: 8px;
+  width: 0.9vw;
+  height: 0.9vw;
 }
 
 ::-webkit-scrollbar-thumb {
-  height: 50px;
-  background-color: #ddd;
-  -webkit-border-radius: 4px;
-  outline: 2px solid #fff;
-  outline-offset: -2px;
+  background: #00A0E6;
+  border-radius: 0.45vw;
 }
 
 ::-webkit-scrollbar-thumb:hover {

src/pages/Home.vue

@@ -18,6 +18,7 @@
 
     <button
       class="enlarge-btn"
+      @click="onClickEnlarge"
     >
       <img
         class=""
@@ -29,7 +30,6 @@
 
     <!-- 底部菜单 -->
     <div
-      v-show="!isShowPano"
       id="gui-parent"
     >
       <!-- 进度条加载 -->
@@ -98,31 +98,7 @@
       <v-other />
     </div>
 
-    <transition name="fade-out">
-      <div
-        v-if="isShowPano"
-        class="pano-layer"
-      >
-        <!-- 全景图 -->
-        <iframe
-          class="pano"
-          src="https://zzbbh.4dage.com/SWKK/show.html?id=WK1628651656780496896&vr=fd720_7cJ6ECymB"
-          frameborder="0"
-        />
-
-        <button
-          class="begin"
-          @click="onClickBegin"
-        >
-          <img
-            class=""
-            src="@/assets/images/begin-explore.png"
-            alt=""
-            draggable="false"
-          >
-        </button>
-      </div>
-    </transition>
+    <router-view />
   </div>
 </template>
 
@@ -162,7 +138,6 @@ export default {
       hotspots: "",
       // 控制背景音乐
       isMusicInitiallyPlayed: false,
-      isShowPano: false,
     }
   },
 
@@ -183,11 +158,6 @@ export default {
         }, 1000)
       }
     }
-
-    const locationQuerySection = new URLSearchParams(location.href.split('?')[1])
-    if (locationQuerySection.get('show-cover')) {
-      this.isShowPano = true
-    }
   },
 
   methods: {
@@ -196,13 +166,9 @@ export default {
       if (!this.isMusicInitiallyPlayed) window.manage.switchBgmState(true)
       this.isMusicInitiallyPlayed = true
     },
-    onClickBegin() {
-      this.isShowPano = false
-      const locationQuerySection = new URLSearchParams(location.href.split('?')[1])
-      locationQuerySection.delete('show-cover')
-      const newLocation = location.href.split('?')[0] + '?' + locationQuerySection.toString()
-      location.assign(newLocation)
-    }
+    onClickEnlarge() {
+      this.$router.push({ name: 'BigMap' })
+    },
   },
 }
 </script>
@@ -244,28 +210,6 @@ export default {
 //   }
 // }
 
-.pano-layer {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 9999;
-  iframe.pano {
-    width: 100%;
-    height: 100%;
-  }
-  button.begin {
-    position: absolute;
-    bottom: 85px;
-    left:50%;
-    transform: translateX(-50%);
-    > img {
-      width: 141px;
-    }
-  }
-}
-
 .hotspot-detail-open {
   .v-menu {
     display: none;

src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../pages/Home.vue'
+import BigMap from '@/views/gui/BigMap.vue'
 
 const originalPush = VueRouter.prototype.push
 VueRouter.prototype.push = function push (location) {
@@ -13,7 +14,14 @@ const routes = [
   {
     path: '/',
     name: 'Home',
-    component: Home
+    component: Home,
+    children: [
+      {
+        path: 'big-map',
+        name: 'BigMap',
+        component: BigMap,
+      }
+    ],
   }
 ]
 

src/views/gui/BigMap.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="big-map">
+    <button
+      class="close"
+      @click="$router.go(-1)"
+    >
+      <img
+        class=""
+        src="@/assets/images/close.png"
+        alt=""
+        draggable="false"
+      >
+    </button>
+    <div class="map-wrapper">
+      <img
+        src="@/assets/images/map.png"
+        alt=""
+        class="map"
+        draggable="false"
+      >
+      <div
+        id="lasjfjsdfkl"
+        class="area"
+      >
+        lasjfjsdfkl
+      </div>
+    </div>
+    <div class="button-wrapper">
+      <button>lasjfjsdfkl</button>
+      <button>lasjfjsdfkl</button>
+      <button>lasjfjsdfkl</button>
+      <button>lasjfjsdfkl</button>
+      <button>lasjfjsdfkl</button>
+      <button>lasjfjsdfkl</button>
+      <button>lasjfjsdfkl</button>
+      <button>lasjfjsdfkl</button>
+      <button>lasjfjsdfkl</button>
+      <button>lasjfjsdfkl</button>
+      <button>lasjfjsdfkl</button>
+      <button>lasjfjsdfkl</button>
+      <button>lasjfjsdfkl</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="less" scoped>
+.big-map {
+  position: fixed;
+  background-color: rgba(21, 52, 115, 0.80);
+  backdrop-filter: blur(1.8vw);
+  z-index: 10005;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  > button.close {
+    position: absolute;
+    top: 4.4vw;
+    right: 4.4vw;
+    width: 9vw;
+    height: 9vw;
+    z-index: 10001;
+    > img {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  > .map-wrapper {
+    position: absolute;
+    top: 16vw;
+    left: 5.5vw;
+    right: 5.5vw;
+    height: 89.2vw;
+    > img {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+    > .area {
+      background: rgba(255,255,255,0.6);
+      box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.2);
+      font-size: 1.8vw;
+      color: #1F3E7C;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+    }
+    > #lasjfjsdfkl {
+      top: 6.3vw;
+      left: 5.6vw;
+      width: 12.5vw;
+      height: 12.9vw;
+    }
+  }
+  > .button-wrapper {
+    position: absolute;
+    top: calc(16vw + 89.2vw + 4vw);
+    bottom: 0;
+    left: 4.2vw;
+    right: calc(4.2vw - 2.7vw - 0.9vw);
+    overflow: auto;
+    > button {
+      margin-right: 2.7vw;
+      margin-bottom: 4.4vw;
+      width: 44.4vw;
+      height: 8vw;
+      border-radius: 4vw;
+      border: 1px solid #FFFFFF;
+      background: transparent;
+      font-size: 3.2vw;
+      font-weight: bold;
+      color: #FFFFFF;
+    }
+  }
+}
+</style>

src/views/gui/ModeSelectorMobile.vue

@@ -1,113 +0,0 @@
-<template>
-  <div class="mode-selector-mobile">
-    <button
-      @click="onClickQuanjingmanyou"
-    >
-      <img
-        class="manyou"
-        src="@/assets/images/quanjingmanyou-sub.png"
-        alt=""
-        draggable="false"
-      >
-      <span>漫游</span>
-    </button>
-    <button
-      @click="onClickDingbufushi"
-    >
-      <img
-        class="pingmian"
-        src="@/assets/images/dingbufushi-mobile.png"
-        alt=""
-        draggable="false"
-      >
-      <span>平面</span>
-    </button>
-    <button
-      @click="onClickMinimoxing"
-    >
-      <img
-        class="sanwei"
-        src="@/assets/images/minimoxing-mobile.png"
-        alt=""
-        draggable="false"
-      >
-      <span>三维</span>
-    </button>
-  </div>
-</template>
-
-<script>
-export default {
-  methods: {
-    onClickQuanjingmanyou(e) {
-      document.onMousedownInside(e)
-    },
-    onClickMinimoxing(e) {
-      document.onClickDollHouse(e)
-    },
-    onClickDingbufushi(e) {
-      document.onClickFloorPlain(e)
-    },
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.mode-selector-mobile {
-  padding: 3px;
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: 5px 5px 5px 5px;
-  display: flex;
-  align-items: center;
-  > button {
-    width: 75px;
-    height: 37px;
-    // background: rgba(161,14,12,0.7);
-    border-radius: 2px 2px 2px 2px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    > img.manyou {
-      width: 8px;
-      height: 20px;
-      margin-right: 6px;
-    }
-    > img.pingmian {
-      width: 19px;
-      height: 19px;
-      margin-right: 4px;
-    }
-    > img.sanwei {
-      width: 23px;
-      height: 22px;
-      margin-right: 4px;
-    }
-    > span {
-      font-size: 14px;
-      color: #FFF1BD;
-    }
-  }
-}
-
-.mobile[view-mode='panorama'] {
-  .mode-selector-mobile {
-    > button:nth-of-type(1) {
-      background: rgba(161,14,12,0.7);
-    }
-  }
-}
-.mobile[view-mode='floor-plain'] {
-  .mode-selector-mobile {
-    > button:nth-of-type(2) {
-      background: rgba(161,14,12,0.7);
-    }
-  }
-}
-.mobile[view-mode='doll-house'] {
-  .mode-selector-mobile {
-    > button:nth-of-type(3) {
-      background: rgba(161,14,12,0.7);
-    }
-  }
-}
-</style>

src/views/gui/menu.vue

@@ -308,17 +308,6 @@ export default {
 </script>
 
 <style lang="less" scoped>
-::-webkit-scrollbar {
-  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
-}
-::-webkit-scrollbar-thumb {
-  // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
-  background: #edd3b0;
-  border-color: #edd3b0;
-  color: #edd3b0;
-  outline: none;
-}
-
 @button-size: 47px;
 @margin-right: 15px;
 // ----------左下方菜单--------------