update0522

config/index.js

@@ -13,7 +13,7 @@ module.exports = {
     proxyTable: {},
 
     // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST
+    // host: '192.168.0.11', // can be overwritten by process.env.HOST
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

package.json

@@ -19,6 +19,7 @@
     "jsonp": "^0.2.1",
     "less": "^4.1.1",
     "less-loader": "^5.0.0",
+    "panzoom": "^9.4.2",
     "vue": "^2.5.2",
     "vue-concise-slider": "^3.3.8",
     "vue-luck-draw": "^3.4.6",

src/assets/style/public.css

@@ -7,7 +7,6 @@
 *{
   -webkit-tap-highlight-color:transparent;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  user-select: none;
 }
 
 .clear::after {
@@ -45,6 +44,9 @@
   border-radius: 30px;
   text-align: center;
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   
 }
 
@@ -55,9 +57,7 @@
 }
 
 .qbtn > img{
-    position: absolute;
-    right: 20px;
-    vertical-align: middle;
-    top: 50%;
-    transform: translateY(-50%);
+    margin-left: 10px;
+    width: 20px;
+    margin-top: 4px;
 }

src/components/maps/index.vue

@@ -2,24 +2,45 @@
 
 <template>
   <div class="layout">
-    <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-   viewBox="0 0 1200 964" style="enable-background:new 0 0 1200 964;" xml:space="preserve" @click="clickHandle($event)">
-<path class="st st0" d="M868.4,35.6c2.7-9.5,10.4-16.7,20-18.8c1.2-0.3,2-0.4,2.2-0.5c1.2-0.4,18-3,47.2-7.7c29.8-4.8,60.3-4.3,90,1.7
+    <svg
+      version="1.1"
+      id="图层_1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      x="0px"
+      y="0px"
+      viewBox="0 0 1200 964"
+      style="enable-background:new 0 0 1200 964;"
+      xml:space="preserve"
+      @click="clickHandle($event)"
+    >
+      <path
+        class="st st0"
+        d="M868.4,35.6c2.7-9.5,10.4-16.7,20-18.8c1.2-0.3,2-0.4,2.2-0.5c1.2-0.4,18-3,47.2-7.7c29.8-4.8,60.3-4.3,90,1.7
   c27.4,5.5,54.8,11.1,82.2,16.6c18.9,3.9,36.9,11.4,53,22.2l19.1,12.8c11.2,7.5,17.9,20.2,17.9,33.7v52.8c0,0.2,0,0.5,0,0.7
   l-3.9,48.9c-1.3,16.2-9.6,31.1-22.7,40.7l-39.5,28.8c-0.9,0.7-1.9,1.2-3,1.5l-15.7,4.2c-3.1,0.8-5.5,3.2-6.4,6.2l-6.3,20.5
   c-0.6,2.1-0.5,4.4,0.3,6.4l6.3,14.6c0.9,2.2,1,4.6,0.2,6.9l-13.2,35.5c-1,2.6-3.1,4.7-5.7,5.5l-32.9,10.9c-4.7,1.6-9.9-0.9-11.6-5.6
   h0c-2-5.5-8.6-7.8-13.5-4.7L988,396.8c-2.6,1.6-4.3,4.5-4.3,7.6l-0.4,16.4c-0.1,3.6-2.3,6.9-5.7,8.3L951,440.2
   c-2.5,1.1-5.4,0.9-7.8-0.3l-80.1-41.7c-8.6-4.5-15.3-11.8-18.9-20.7l-9.8-23.9c-5.2-12.7-7.9-26.3-7.9-40v-63.2
-  c0-16.2,1.8-32.3,5.2-48.1C845.4,140,867.8,37.5,868.4,35.6C868.5,35.6,868.4,35.7,868.4,35.6z"/>
-<path class="st st1" d="M187.5,292.6c1.7,2.1,31.6,45,31.6,45l8.5-7.8l3.3,3.1l9.2-4.2l9,12.3c0,0-4.7,11.1-2.6,19.3
+  c0-16.2,1.8-32.3,5.2-48.1C845.4,140,867.8,37.5,868.4,35.6C868.5,35.6,868.4,35.7,868.4,35.6z"
+      />
+      <path
+        class="st st1"
+        d="M187.5,292.6c1.7,2.1,31.6,45,31.6,45l8.5-7.8l3.3,3.1l9.2-4.2l9,12.3c0,0-4.7,11.1-2.6,19.3
   c-0.5,0.2-3.8,8.5-3.8,8.5l3.8,9l18.9,15.3l2.6,1.4h3.1l3.5,1.4L287,393l6.4,4.2l4.7,0.8h5h4.7l64.9-44.7l185.5-22.1l-5.1-46.9
   l-2.6-47.6c-0.3-5.6-4.8-10.1-10.4-10.4l-163.8-7.8c0,0-39.1-9.3-42.8-11.1c-3.8-1.7-8.3,0.4-8.3,0.4l-1.6-0.7l-0.1-4.2
   c0-1.1-0.9-2-2-2.1l-4.9-0.5l-5.4,1.7l-0.9-0.5c-1.3-0.7-2.9-0.7-4.1,0.2l-5.8,4l-16.7-0.4l-9.8-2.9c-1.1-0.3-2.3-0.1-3.2,0.7
   l-3.6,3l-6.5,0.2l-5.4,2.3l-11.9-0.7c-0.9-0.1-1.7,0.2-2.4,0.8l-2.9,2.4l-0.8-0.5l-8.2-3.2c-1.6-0.6-3.5-0.4-5,0.6l-1.6,1.1
   c-1.1,0.8-1.8,2.1-1.7,3.4l0.5,9.1l1.5,2.6c0.7,1.2,0.7,2.6,0,3.8l-7.9,14.3l-1.5,11.5c0,0-1.3,0.5-1.9,0.1
-  c-0.6-0.3-5.7-1.2-5.7-1.2l-5-5.1c0,0,0,0,0-0.1l-15.6,41.1C185.4,288.8,185.8,290.5,187.5,292.6z"/>
-<path class="st st2" d="M251,449.4C250.9,449.4,250.9,449.4,251,449.4C250.9,449.4,251.2,449.2,251,449.4z"/>
-<path class="st st3" d="M64.9,459.8l40.8,8.7v7.1l14.9,16.3l15.8,1.4l13,15.6c0,0-7.5,7.5-11.1,18.6c-0.2,3.1-1.9,8.3-2.8,8.5
+  c-0.6-0.3-5.7-1.2-5.7-1.2l-5-5.1c0,0,0,0,0-0.1l-15.6,41.1C185.4,288.8,185.8,290.5,187.5,292.6z"
+      />
+      <path
+        class="st st2"
+        d="M251,449.4C250.9,449.4,250.9,449.4,251,449.4C250.9,449.4,251.2,449.2,251,449.4z"
+      />
+      <path
+        class="st st3"
+        d="M64.9,459.8l40.8,8.7v7.1l14.9,16.3l15.8,1.4l13,15.6c0,0-7.5,7.5-11.1,18.6c-0.2,3.1-1.9,8.3-2.8,8.5
   c-0.9,0.2-8.7,16-8.7,16s4.2,6.6,9.4,7.3c5.2,1.2,9.2,1.9,9.2,1.9l9.2-1.2l9.2-3.5v-7.3l3.5-5.2l30.7-13.9c0,0-1.9-13-5.2-19.6
   c-2.6-6.4-9.2-22.2-9.2-22.2s-0.5-2.1,2.1-3.1c2.6-0.9,24.3-11.6,55.4-28.5c7.7-5.7,9.6-7.1,10-7.4c0.6-0.6,4.4-5.5-5.2-11.5
   c-0.2-0.2-2.8-2.4-2.8-2.4l14.1-8.3v-1.2l-26.4-38l16.3-10l-0.5-0.4l-3.8-9c0,0,3.3-8.3,3.8-8.5c-2.1-8.3,2.6-19.3,2.6-19.3l-9-12.3
@@ -34,13 +55,22 @@
   c-9.2,4.5-13.9,21.9-13.9,21.9s-3.2,5.1-4.9,8.2c-0.6,1.1-0.7,2.5-0.1,3.6c1.8,3.6,1.5,10.2,0.8,13.8c-2.4,6,1.8,9.4,1.8,9.4
   l0.8,3.7c0,0,3.9,17.5,4.4,17.9c2,1.7,7.7,11.5,10.3,16c0.9,1.5,2.4,2.5,4.1,2.6l2,0.2c1,0.1,2,0.6,2.6,1.5c1.1,1.6,2.8,4.2,2.7,5.2
   c-0.2,1.6,0.5,5.3,0.5,5.3s7.5,10,10.8,15.2c2.5,7.8-0.5,8.4-3.8,9.8c-6.7,4.4-7.3,11.7-7.3,11.7s0,0.1-0.1,0.3l24.3,3.7L64.9,459.8
-  z"/>
-<path class="st st4" d="M251,449.4C250.9,449.4,250.9,449.4,251,449.4C250.9,449.4,251.2,449.2,251,449.4z"/>
-<path class="st st5" d="M288.2,447.7l57.8-0.5l8.1-7.2l11.1-0.2l8.3,8l10.5-13.4c0,0,5.9-3.6,5.9-3.2c1.4,2.2,5.4,1.3,5.4,1.3l3.5,9.9
+  z"
+      />
+      <path
+        class="st st4"
+        d="M251,449.4C250.9,449.4,250.9,449.4,251,449.4C250.9,449.4,251.2,449.2,251,449.4z"
+      />
+      <path
+        class="st st5"
+        d="M288.2,447.7l57.8-0.5l8.1-7.2l11.1-0.2l8.3,8l10.5-13.4c0,0,5.9-3.6,5.9-3.2c1.4,2.2,5.4,1.3,5.4,1.3l3.5,9.9
   c0,0,0,0,2.8,2.1s5.4,9,5.4,9l10.6-2.4c0,0,11.6-13.9,20.8-26.2c9.2-12.3,6.1-37.5,6.1-37.5l-4-26.2l-2.1-8.3v-7.3l-65.7,7.8
   l-64.9,44.7h-4.7h-5l-4.7-0.8L287,393l-12.5,2.8l-3.5-1.4h-3.1l-2.6-1.4l-18.4-15l-16.3,10l26.4,38v1.2l-14.1,8.3
-  c0,0,2.6,2.1,2.8,2.4c9.7,5.9,5.8,10.9,5.2,11.5c0.2-0.1,0,0,0,0l0,0c-0.2,0.1-1,0.7-3.2,2.3l32.9-22.4L288.2,447.7z"/>
-<path class="st st6" d="M758.9,849.8c0,0-4.7,4.6-3.6,6.7c1.1,2.2,2.5,3.6-0.2,4.9c-2.6,1.3-7.2,0-10.5-1.3s-5.2-0.8-6.5,0.1
+  c0,0,2.6,2.1,2.8,2.4c9.7,5.9,5.8,10.9,5.2,11.5c0.2-0.1,0,0,0,0l0,0c-0.2,0.1-1,0.7-3.2,2.3l32.9-22.4L288.2,447.7z"
+      />
+      <path
+        class="st st6"
+        d="M758.9,849.8c0,0-4.7,4.6-3.6,6.7c1.1,2.2,2.5,3.6-0.2,4.9c-2.6,1.3-7.2,0-10.5-1.3s-5.2-0.8-6.5,0.1
   c-1.3,0.9-1.4,3-8.5-0.8c-2-0.8-1.9-3-9.9-1.3c-4.7,1.7-6.7,3.8-9.1,0.7c-2.5-3.1-3.7-5.3-3.8-6.9s-1.3-4.1-5.7-3.9
   c-4.4-0.4-7.6-2.1-10,0.8s-5.8,9.1-6.5,11.6s-1.1,8.3,0.7,13c0.5,1.3,1.2,3,1.9,4.8c0.7,0.3,3.4,2,6.1,6.4c3.2,5-0.5,16.6-0.8,17
   c-3.3,6.5-2.7,11.2-3.6,20.9c-0.7,7.1-4.8,13.3-6.9,16.1c-0.8,1-0.8,2.4,0,3.5l2.6,3.5c0.8,1.1,2.3,1.4,3.5,0.8
@@ -50,8 +80,11 @@
   c-0.3-0.3-0.7-0.6-1.1-0.8c-1.6-1.1-0.8-7.5-0.3-11.8c0.5-4.2,6.9-4.9,12.7-5.3c4.4-0.4,8.2-1.6,9.7-2.2c0.5-0.2,1-0.2,1.5-0.2
   l5.7,0.9c0.9,0.1,1.8-0.1,2.5-0.7c1.8-1.5,5.3-4.4,5.8-6c-0.6-7.9-4.1-8.2-7.9-8.8c-3.8-0.7-6.6-0.6-12.3-4.1
   c-13.4-6.4-19.2-2.1-23.5,1.4c-0.7,0.5-1.5,0.7-2.3,0.4c-9.6-3.7-8.5-11.8-8.5-11.8s-5-46.2-5.3-48.4c-3.2-8.3-17.7-19.3-22.1-22.4
-  l-10.7,20.2v6.1h0.5V849.8z"/>
-<path class="st st7" d="M965.2,507.7l-13.9-2.8c-0.8-0.2-1.5-0.6-2-1.3l-12.1-17c-0.8-1.1-2-1.7-3.4-1.7l-39.9,0.3
+  l-10.7,20.2v6.1h0.5V849.8z"
+      />
+      <path
+        class="st st7"
+        d="M965.2,507.7l-13.9-2.8c-0.8-0.2-1.5-0.6-2-1.3l-12.1-17c-0.8-1.1-2-1.7-3.4-1.7l-39.9,0.3
   c-0.9,0-1.7,0.4-2.4,1l-8,7.9c-0.7,0.7-1.1,1.6-1.1,2.6v16.8c0,0.6-0.3,1.1-0.7,1.4l-10.5,8.1c-0.6,0.5-1.5,0.5-2.1,0l-2.2-1.6
   c-2.5-1.8-4.2-4.6-4.8-7.6l-5.7-32l-7.1-14.8c-2.1-4.4-5.7-7.8-10.2-9.7l-2.2-0.9c-1.3-0.5-2.6-1-4-1.2l-56.2-11.2
   c0,0-46.8-12.7-54.9-14.9l-19.1,39.7l-35.2,59.1l-8.2-4.1l4.4,40.9l26.1,0.8c0,0,13.2-2,21.1,6.7c5,5,10.5,10.5,10.5,10.5l13.3-24.1
@@ -62,45 +95,66 @@
   c0.5-0.4,0.9-0.9,1.2-1.4l14.4-21.9c0.5-0.8,0.9-1.7,1.1-2.6l13.1-50.5c0.3-1.1,0.3-2.2,0.1-3.2l-3.2-15.8c-0.2-1-0.5-1.9-1.1-2.7
   l-8-13.1c-0.2-0.3-0.5-0.5-0.8-0.7l-15.2-6.9c-0.4-0.2-0.5-0.6-0.2-0.9l9.3-9.6c0.6-0.6,1.6-0.7,2.2-0.1l6,5.5
   c0.6,0.6,1.6,0.7,2.3,0.2l7.6-4.9l9.5-11.3c0.3-0.4,0.5-0.8,0.5-1.3v-13.4c0-0.6,0.3-1.1,0.8-1.3l11.6-5.1c0.8-0.3,1.2-1.2,1.1-2
-  l-2.4-13.6C968.8,509.7,967.3,508.1,965.2,507.7z"/>
-<path class="st st8" d="M768.3,822.8c0,0-6.6-17-7.2-17.6c-33.3-26.4-29.2-63.8-29.2-63.8l0.1-0.4l-30.1-1c0,0-22.9,3.1-31.8-22
+  l-2.4-13.6C968.8,509.7,967.3,508.1,965.2,507.7z"
+      />
+      <path
+        class="st st8"
+        d="M768.3,822.8c0,0-6.6-17-7.2-17.6c-33.3-26.4-29.2-63.8-29.2-63.8l0.1-0.4l-30.1-1c0,0-22.9,3.1-31.8-22
   c-1.4-7.2-1.8-7.8-1.8-7.8s-1.8-0.6-1.7-2.7c0-2.1-0.2-13.5-15-23.6h-29.2l-13.1-9.1l-15.6,4c0,0-12.4,15.1-55.3,35.6
   c-2.6,0.1-45-1.1-45-1.1l-10.8,5.8l-5.8-3.5l-44.9,21l-13.2,54.8l48.3,82.8l24.6-12.9c0,0,13.9-9.9,16.5-11.6
   c10.8-1.8,25.6,6.5,25.6,6.5l17.1,16.2l25.2,14.1l14.8,10.8c1.4,1,3.2,1.1,4.6,0.2c1.2-0.7,2.4-1.3,3-1.3c4.9,1.2,4.7-0.6,4.7-0.6
   s2-2.2,3.3-5.2s2.7-2.8,4.6-4.1c1.9-1.3,15.6-1.7,15.6-1.7l24.8-7.3l10.8-0.9c0,0,8.8-0.6,9.9-0.6s7.2,2.2,7.2,2.2l7.9,0.5
   c0,0,0,0,0.1,0.1c-0.8-1.7-1.5-3.4-1.9-4.8c-1.8-4.7-1.4-10.5-0.7-13s4.2-8.7,6.5-11.6c2.4-2.9,5.6-1.2,10-0.8
   c4.3-0.1,5.6,2.3,5.7,3.9c0.1,1.7,1.3,3.9,3.8,6.9s4.4,1,9.1-0.7c8-1.7,7.9,0.5,9.9,1.3c7.1,3.8,7.2,1.7,8.5,0.8s3.2-1.4,6.5-0.1
-  c3.3,1.3,7.9,2.5,10.5,1.3c2.6-1.3,1.3-2.7,0.2-4.9s3.6-6.7,3.6-6.7v-6l10.7-20.2C768.7,823.1,768.3,822.8,768.3,822.8z"/>
-<path class="st st9" d="M760.8,565.8c0,0-15-5.7-20.4-7.9c-5.5-2.2-5.3,0.5-5.3,0.5l-13.3,24.1c0,0-5.5-5.5-10.5-10.5
+  c3.3,1.3,7.9,2.5,10.5,1.3c2.6-1.3,1.3-2.7,0.2-4.9s3.6-6.7,3.6-6.7v-6l10.7-20.2C768.7,823.1,768.3,822.8,768.3,822.8z"
+      />
+      <path
+        class="st st9"
+        d="M760.8,565.8c0,0-15-5.7-20.4-7.9c-5.5-2.2-5.3,0.5-5.3,0.5l-13.3,24.1c0,0-5.5-5.5-10.5-10.5
   c-7.9-8.8-21.1-6.7-21.1-6.7l-26.1-0.8l-0.3,17.9h6.7c0,0,10.8,12.7,14.6,17.1c3.8,4.4,0.6,2.5,7.4,6.1c6.8,3.6,11.8,2.7,14.6,2.8
-  s6.1,2.7,9.3,3s10.7,6.9,12.6,8.8c1.2,1.2,8.8,5.6,14.5,8.8c3.7-8,21.9-47.5,24.2-53.5C770.1,568.9,760.8,565.8,760.8,565.8z"/>
-<path class="st st10" d="M740.8,636.8c-1.9-4.1,1.9-6.5,1.9-6.5s0.2-0.5,0.7-1.4c-5.7-3.3-13.3-7.6-14.5-8.8c-1.9-1.9-9.4-8.5-12.6-8.8
+  s6.1,2.7,9.3,3s10.7,6.9,12.6,8.8c1.2,1.2,8.8,5.6,14.5,8.8c3.7-8,21.9-47.5,24.2-53.5C770.1,568.9,760.8,565.8,760.8,565.8z"
+      />
+      <path
+        class="st st10"
+        d="M740.8,636.8c-1.9-4.1,1.9-6.5,1.9-6.5s0.2-0.5,0.7-1.4c-5.7-3.3-13.3-7.6-14.5-8.8c-1.9-1.9-9.4-8.5-12.6-8.8
   c-3.2-0.3-6.5-2.8-9.3-3c-2.8-0.1-7.9,0.8-14.6-2.8c-6.7-3.6-3.6-1.7-7.4-6.1c-3.8-4.4-14.6-17.1-14.6-17.1h-6.7l0.2-10l-7.3,0.3
   L648,593c0,0-0.9,2.9-3.5,3.6c-2.6,0.7-3.7,2.3-4.4,4.2s-5.2,11.5-5.2,11.5s-3.1,4.9-4.2,7.1c-1.1,2.2-6.6,10.1-6.8,11.9
   c-0.2,1.8-2.4,8-4.4,11c-1.3,1.9-15.8,22.2-25.9,36.5l15.4-4l13.1,9.1c0,0,25.9,0,29.2,0c14.8,10,15.1,21.5,15,23.6s1.7,2.7,1.7,2.7
   s0.4,0.6,1.8,7.8c9,25.1,31.8,22,31.8,22l30.1,1l4.3-23.1c-2.9-1.7-5.3-3.1-6.3-3.6c-3.3-1.6-1.9-3.2-1.9-3.2s9-20,11-25.6
   c2-5.7-1.9-6.5-1.9-6.5s-15.9-6.3-17.8-7.1c-1.9-0.8-1.1-2.8-1.1-2.8s4.2-6.9,7.9-12.4c3.6-5.5,8,0,8,0s3.3-4.2,5.5-7.5
-  s5.2,0.9,5.2,0.9l1.4-1.9C746.3,648.3,742.7,640.9,740.8,636.8z"/>
-<path class="st st11" d="M721.1,428.5c-4.7-1.3-31.7-9.4-31.7-9.4l-75.3-28.7c-8.2-3.1-17.5-0.2-22.5,7l-18.2,26.4l-0.2-0.8l-0.4,2.3
+  s5.2,0.9,5.2,0.9l1.4-1.9C746.3,648.3,742.7,640.9,740.8,636.8z"
+      />
+      <path
+        class="st st11"
+        d="M721.1,428.5c-4.7-1.3-31.7-9.4-31.7-9.4l-75.3-28.7c-8.2-3.1-17.5-0.2-22.5,7l-18.2,26.4l-0.2-0.8l-0.4,2.3
   l-23.4,3.9l-11.2,19.2c0,0-0.1,1.9-3.4,0.5c-3.3-1.4-12.3-6-12.3-6s-1.5-1.1-3.9,0.7c-2.5,1.8-3.5,1-5.3,4.6
   c-1.5,3.6-1.9,6.5-1.9,6.5s0,1,2.6,2.3c2.6,1.2,25.5,14.5,25.5,14.5s2,0.7,0.3,3.2s-21.6,37.9-21.6,37.9l19.3,67.1l1.3,33.8
   l-2.9,18.2c0,0-0.6,0.9,2.1,3c2,1.5,35.8,29.2,55,45c0.5-0.5,0.7-0.8,0.7-0.8h0.1c10.2-14.2,24.7-34.6,25.9-36.5c2-3,4.2-9.2,4.4-11
   s5.8-9.7,6.8-11.9c1-2.3,4.2-7.1,4.2-7.1s4.5-9.4,5.2-11.5c0.7-2,1.8-3.5,4.4-4.2c2.6-0.7,3.5-3.6,3.5-3.6l8.5-20.4l7.3-0.3l0.1-8
-  l0,0l-4.4-40.9l8.2,4.1l35.2-59.1l19.1-39.7C721.6,428.6,721.3,428.6,721.1,428.5z"/>
-<path class="st st12" d="M240.9,520.4l6-0.6l18.1-8.7l12.5,1.7c0,0,6.8,0.6,9.8-2.7s11-10.4,12.7-11.5s4.2-0.9,7.5-6.3
+  l0,0l-4.4-40.9l8.2,4.1l35.2-59.1l19.1-39.7C721.6,428.6,721.3,428.6,721.1,428.5z"
+      />
+      <path
+        class="st st12"
+        d="M240.9,520.4l6-0.6l18.1-8.7l12.5,1.7c0,0,6.8,0.6,9.8-2.7s11-10.4,12.7-11.5s4.2-0.9,7.5-6.3
   c3.9-4.5,9-10.4,9-10.4l10.8-5.3l7.8-8.4l4-1.3c0,0,1.6-0.7,1.4,2.8c-0.1,3.5-0.9,9.6-0.9,9.6l-1.1,3c0,0,0.2,5.1,2.8,0.6
   c2.6-4.5,2.6-4.5,2.6-4.5h8.7c0,0,1.4-0.2,2,1.8s0.6,2,0.6,2l17.4,8.9c0,0,2.5,3.4,4.2-2.5s1.7-5.9,1.7-5.9l1.2-11.3l3.4-2.8
   l0.7-11.1c0,0-0.9-1.8,4.7-1.9c5.7-0.1,18.1-2.1,18.1-2.1h0.6c0,0-2.6-6.8-5.4-9s-2.8-2.1-2.8-2.1l-3.5-9.9c0,0-4,0.9-5.4-1.3
   c0-0.5-5.9,3.2-5.9,3.2l-10.5,13.4l-8.3-8l-11.1,0.2l-8.1,7.2l-57.8,0.5l-7.5-18.4L248,451.6c-1.5,1.1-3.7,2.7-6.8,5
   c-31.4,17-53.1,27.6-55.7,28.6c-2.6,0.9-2.1,3.1-2.1,3.1s6.6,15.8,9.2,22.2c2.9,5.9,4.8,16.8,5.1,19.1c5-0.7,10.2-1.4,12.7-2.1
-  C216.2,525.8,240.9,520.4,240.9,520.4z"/>
-<path class="st st13" d="M398.5,482.9c1.9,1.3,17.6,3.8,20.1,3.8s10.4,1.9,10.4,1.9s-0.3,2.5,2.5,3.8s11.9,6.6,11.9,6.6l11.6,5.3
+  C216.2,525.8,240.9,520.4,240.9,520.4z"
+      />
+      <path
+        class="st st13"
+        d="M398.5,482.9c1.9,1.3,17.6,3.8,20.1,3.8s10.4,1.9,10.4,1.9s-0.3,2.5,2.5,3.8s11.9,6.6,11.9,6.6l11.6,5.3
   c0,0,3.8,21.1-13.2,55.3c1,0.8,71.2,37.8,96.6,51.2l-1.2-31.2L518,512.5c0,0,19.9-35.4,21.6-37.9c1.7-2.5-0.3-3.2-0.3-3.2
   s-22.9-13.2-25.5-14.5c-2.6-1.3-2.6-2.3-2.6-2.3s0.4-2.8,1.9-6.5c1.8-3.5,2.9-2.7,5.3-4.6c2.5-1.8,3.9-0.7,3.9-0.7s9,4.6,12.3,6
   s3.4-0.5,3.4-0.5l11.2-19.2l23.4-3.9l0.4-2.3l-8.3-31l-6.6-60.6l-119.9,14.2v7.3l2.2,8.3l4,26.2c0,0,3.1,25.2-6.1,37.5
   S417.5,451,417.5,451l-10.6,2.4h-0.6c0,0-12.4,2-18.1,2.1s-4.7,1.9-4.7,1.9l-0.7,11.1l-3.4,2.8l-1.2,11.2
-  C384.9,482.3,394.6,482.1,398.5,482.9z"/>
-<path class="st st14" d="M202.1,570.4c3.5-5,5.7-7.1,6.6-10.7c0.9-3.6,4-8.4,6.1-12.6c1.3-2.7,5.1-14.3,7.7-22.5
+  C384.9,482.3,394.6,482.1,398.5,482.9z"
+      />
+      <path
+        class="st st14"
+        d="M202.1,570.4c3.5-5,5.7-7.1,6.6-10.7c0.9-3.6,4-8.4,6.1-12.6c1.3-2.7,5.1-14.3,7.7-22.5
   c-5.2,1.2-10,2.4-12.1,3c-2.5,0.7-7.6,1.5-12.6,2.1c0,0.3,0,0.5,0,0.5L167.2,544l-3.5,5.2v7.3l-9.2,3.5l-9.2,1.2c0,0-4-0.7-9.2-1.9
   c-5.2-0.7-9.4-7.3-9.4-7.3s7.8-15.8,8.7-16c0.9-0.2,2.6-5.4,2.8-8.5c3.5-11.1,11.1-18.6,11.1-18.6l-13-15.6l-15.8-1.4l-14.9-16.3
   v-7.1l-40.8-8.7L55,498l-24.3-3.7c-0.6,1-2.6,4.3-4.9,7c-2.7,3.2-3.1,8.2-2.7,8.7c0.3,0.6,5.3,7.1,7.2,11.6c1.4,4.6-1.6,5.9-1.6,5.9
@@ -122,8 +176,11 @@
   l-2.5-3.9l-1.7-13.1l-5.7-13.5L133,714.8l-2.5,1.9l-3-1.9l0.8-5.8l15.6-17.3l-0.5-9.3l-10-11.2c0,0,0.9-1.1,2.8-2.7
   c1.9-1.6,8.8-7.4,8.8-7.4l0.3-4.9l-5.4-6.9c0,0-1.1-2.7,1.3-5.8c2.4-3.2,5.8-8.8,5.8-8.8l6.3,1.3c0,0,3.6,2.4,6.3-0.5
   c2.7-2.8,12.6-11.3,12.6-11.3s1.9-1.7,3.1,1c1.1,1.7,2.7,1.7,3.7,0.7s3.5-2.2,3.5-2.2s1.1-1.6,0.8-2.8c-0.4-1.3-0.8-3.2,0.7-5
-  s4.8-7.4,4.8-7.4s1.8-0.9,3.9-0.9c1.2-0.5,2.5-1.2,5-1.5c0-11.1,0-24.5,0-27C197.9,575.1,198.6,575.3,202.1,570.4z"/>
-<path class="st st15" d="M455.1,504.3l-11.6-5.3c0,0-9.1-5.3-11.9-6.6c-2.8-1.3-2.5-3.8-2.5-3.8s-7.9-1.9-10.4-1.9s-18.3-2.5-20.1-3.8
+  s4.8-7.4,4.8-7.4s1.8-0.9,3.9-0.9c1.2-0.5,2.5-1.2,5-1.5c0-11.1,0-24.5,0-27C197.9,575.1,198.6,575.3,202.1,570.4z"
+      />
+      <path
+        class="st st15"
+        d="M455.1,504.3l-11.6-5.3c0,0-9.1-5.3-11.9-6.6c-2.8-1.3-2.5-3.8-2.5-3.8s-7.9-1.9-10.4-1.9s-18.3-2.5-20.1-3.8
   c-4-0.8-13.6-0.6-20.1-0.3v0.1c0,0,0,0-1.7,5.9s-4.2,2.5-4.2,2.5l-17.4-8.9c0,0,0,0-0.6-2s-2-1.8-2-1.8h-8.7c0,0,0,0-2.6,4.5
   s-2.8-0.6-2.8-0.6l1.1-3c0,0,0.8-6,0.9-9.6c0.1-3.5-1.4-2.8-1.4-2.8l-4,1.3l-7.7,8.5l-10.8,5.3c0,0-5.1,5.9-9,10.4
   c-3.3,5.3-5.8,5.2-7.5,6.3c-1.7,1.1-9.8,8.2-12.7,11.5c-2.9,3.3-9.8,2.7-9.8,2.7l-12.5-1.7l-18.1,8.7l-6,0.6c0,0-9.7,2.1-18.3,4.1
@@ -131,8 +188,11 @@
   c1.8-0.2,4.2-0.2,7.6,0.3c8,1.3,10.2,2.8,13.2-3s5.5-9.3,5.5-9.3h5.7l3.9,3.3l-2.2,19.5c0,0-1.2,4.1,3.7,1.9
   c4.4-1.4,19.5-7.5,19.5-7.5s2.5-0.6,4.2,2s11.5,14.5,11.5,14.5l16.9,7.2c0,0,58.6-9.2,62.6-12.1c2.2-0.9,3.3-1.3,4.2-2.9
   c0.9-1.7,5.1-7.7,5.1-7.7s0.3-0.7,2.5-0.3c2.1,0.4,29.3,4.2,29.3,4.2l15.3,7.9l1.1,0.2l34.6-65.1h-0.1
-  C458.9,525.3,455.1,504.3,455.1,504.3z"/>
-<path class="st st16" d="M273.9,784.3l-1.9-23c0,0-0.1-2.5,3.5-1.7s5.2,1.2,8.3-0.1c3.1-1.4,43.3-14.2,43.3-14.2s8.3-1.8,9.6-2.9
+  C458.9,525.3,455.1,504.3,455.1,504.3z"
+      />
+      <path
+        class="st st16"
+        d="M273.9,784.3l-1.9-23c0,0-0.1-2.5,3.5-1.7s5.2,1.2,8.3-0.1c3.1-1.4,43.3-14.2,43.3-14.2s8.3-1.8,9.6-2.9
   c1.3-1.1,5.6-5.9,5.6-5.9s0.9-1.4,4-0.5s12.6,3.5,12.6,3.5s3.2,1.2,4.5-2s8-17.5,9.4-18.3s5.8-1.3,7.2-5c1.5-3.7,5.8-10.8,7.3-12.5
   c0.8-1.2,2-4,3-14.6c1.5-10.6,7-42.1,7-42.1l11.1-22.2l-1,1.8l-1.1-0.2l-15.2-7.9c0,0-27.2-3.9-29.3-4.2s-2.5,0.3-2.5,0.3
   s-4.2,6-5.1,7.7s-2,2-4.2,2.9c-3.9,2.9-62.6,12.1-62.6,12.1l-16.9-7.2c0,0-9.7-11.9-11.5-14.5s-4.2-2-4.2-2s-15.1,6.1-19.5,7.5
@@ -141,22 +201,26 @@
   c-1.2-2.7-3.1-1-3.1-1s-9.9,8.5-12.6,11.3c-2.7,2.8-6.3,0.5-6.3,0.5l-6.3-1.3c0,0-3.4,5.7-5.8,8.8s-1.3,5.8-1.3,5.8l5.3,6.9
   l-0.3,4.9c0,0-6.9,5.8-8.8,7.4c-1.9,1.6-2.8,2.7-2.8,2.7l10,11.2l0.5,9.3l-15.6,17.3l-0.8,5.8l3,1.9l2.5-1.9l21.4,11.5l5.7,13.5
   l1.7,13.1l2.5,3.9c0,0-13.8,30-16.2,34.6s0.8,4.9,0.8,4.9l38.2-8.5l25.9,13.5l18.4,66.3l0.5-0.8l14.9-10.6l7.3,0.7l0.5,0.1L256,819
-  L273.9,784.3z"/>
-<path class="st st17" d="M537.8,634.5c-2.7-2-2.1-3-2.1-3l2.9-18.2l-0.1-2.6c-25-13.2-93.7-49.4-96.5-51.1l-33.7,63.2L397.2,645
+  L273.9,784.3z"
+      />
+      <path
+        class="st st17"
+        d="M537.8,634.5c-2.7-2-2.1-3-2.1-3l2.9-18.2l-0.1-2.6c-25-13.2-93.7-49.4-96.5-51.1l-33.7,63.2L397.2,645
   c0,0-5.5,31.5-7,42.1c-0.9,10.6-2.2,13.4-3,14.6c-1.5,1.7-5.8,8.8-7.3,12.5s-5.8,4.2-7.2,5c-1.4,0.8-8.1,15.2-9.4,18.3
   c-1.3,3.2-4.5,2-4.5,2s-9.5-2.6-12.6-3.5s-4,0.5-4,0.5s-4.2,4.8-5.6,5.9c-1.3,1.1-9.6,2.9-9.6,2.9s-40.2,12.8-43.3,14.2
   c-3.1,1.4-4.6,0.8-8.3,0.1s-3.5,1.7-3.5,1.7l1.9,23L256,819.1l-1.4,38.4l29.5,7.9c0,0,1.1,1.1,6.8,4.7c6.6,5.9,14.1-0.1,14.1-0.1
   l3.8-0.1l19.6-8.6c0.6-0.2,1.2-0.4,1.8-0.4l7.4-0.1c0.7,0,1.3,0.1,1.9,0.4l14.3,6.5c0.8,0.4,1.6,0.5,2.5,0.6l15.4,0.4
   c0.8,0,1.6,0.3,2.2,0.7l7.4,5c0.6,0.4,1.2,0.7,1.9,0.9l16.4,5.1l0.7,1.8l5.9,5.4c0,0,3.4,0.7,8.4,1.7c18.9,3.9,21.8,2.3,21.8,2.3
   l23.7-13.8l6.7-3.5l-48.6-82.9l13.1-54.9l44.9-21l5.8,3.5l10.8-5.8c0,0,42.4,1.2,45,1.1c37.1-17.7,51.4-31.4,54.6-34.8
-  C573.7,663.8,539.8,636,537.8,634.5z"/>
-
-</svg>
+  C573.7,663.8,539.8,636,537.8,634.5z"
+      />
+    </svg>
 
   </div>
 </template>
 
 <script>
+
 const navs = {
   0: '淇澳社区',
   1: '北沙社区',
@@ -181,7 +245,10 @@ export default {
     clickHandle (ev) {
       let title = navs[ev.target.className.baseVal.substring(5)]
       if (title) {
-        let link = this.$isLocal ? {name: 'list', params: {title: title, type: '全部'}} : {name: 'map', params: {title: title}}
+        console.log(title)
+        let link = this.$isLocal
+          ? { name: 'list', params: {title: title, type: '全部'}, query: {isWl: !!this.g_showVDRegion[title]} }
+          : { name: 'map', params: { title: title }, query: {isWl: !!this.g_showVDRegion[title]} }
         this.$router.push(link)
       }
     }
@@ -191,14 +258,14 @@ export default {
 
 <style type="text/css">
 .st {
-  transition: all .3s linear;
+  transition: all 0.3s linear;
   cursor: pointer;
   stroke-width: 2px;
   stroke: #fff;
 }
 .st:hover {
   fill: #f13800;
-  -webkit-tap-highlight-color:transparent;
+  -webkit-tap-highlight-color: transparent;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
@@ -274,11 +341,11 @@ export default {
   fill: #bbc5bc;
 }
 
-@media screen and (max-width: 1400px){
-  .layout{
+@media screen and (max-width: 1400px) {
+  .layout {
     position: relative;
   }
-  .layout > svg{
+  .layout > svg {
     width: 900px;
     height: 650px;
   }
@@ -286,5 +353,4 @@ export default {
     font-size: 14px;
   }
 }
-
 </style>

src/components/message/Alert.vue

@@ -0,0 +1,66 @@
+<template>
+    <popup ref="Message" :show="show">
+        <div class="ui-message ui-message-alert" :class="{'message-material':isMaterial,'message-mobile':isMobile}">
+            <div class="ui-message-header" :class="{'header-material':isMaterial}">
+                <span>{{title}}</span>
+                <span @click="onClose">
+                    <i class="iconfont icon_close"></i>
+                </span>
+            </div>
+            <div class="ui-message-main" :class="{'main-material':isMaterial}">
+                <div class="ui-message-icon" :class="[icon?icon:null]"></div>
+                <div class="ui-message-title">{{tips}}</div>
+                <div class="ui-message-content" v-html="content"></div>
+            </div>
+            <div class="ui-message-footer" :class="{'footer-material':isMaterial}">
+                <button class="ui-button submit" @click="onOk">{{okText}}</button>
+            </div>
+        </div>
+    </popup>
+</template>
+<script>
+import {i18n} from "@/lang"
+import Popup from "../popup";
+import config from '@/config'
+export default {
+    name: "ui-alert",
+    components: {
+        Popup
+    },
+    data() {
+        return {
+            isMaterial: window.location.pathname.indexOf('material.html')>-1,
+            isMobile:config.isMobile(),
+            show: false,
+            forceOK:false,
+            duration: 0,
+            title: i18n.t("tips.title"),
+            icon: null,
+            tips: "",
+            content: "",
+            okText: i18n.t("common.set"),
+            ok: null
+        };
+    },
+    methods: {
+        onOk() {
+            if (this.ok && this.ok(this) === false) {
+                return;
+            }
+            setTimeout(() => {
+                this.show = false;
+                document.body.removeChild(this.$el);
+                this.$destroy();
+            }, this.duration);
+        },
+        onClose() {
+            this.forceOK && (this.ok && this.ok(this) === false)
+            setTimeout(() => {
+                this.show = false;
+                document.body.removeChild(this.$el);
+                this.$destroy();
+            }, this.duration);
+        }
+    }
+};
+</script>

src/components/message/Confirm.vue

@@ -0,0 +1,82 @@
+<template>
+    <popup ref="Message" :show="show">
+        <div class="ui-message ui-message-confirm" :class="{'message-material':isMaterial}">
+            <div class="ui-message-header" :class="{'header-material':isMaterial}">
+                <span>{{title}}</span>
+                <span @click="onNo" v-if="showCloseIcon">
+                    <i class="iconfont icon_close"></i>
+                </span>
+            </div>
+            <div class="ui-message-main" :class="{'main-material':isMaterial}">
+                <div class="ui-message-icon" :class="[icon?icon:null]"></div>
+                <div class="ui-message-title">{{tips}}</div>
+                <div class="ui-message-content" v-html="content"></div>
+            </div>
+            <div class="ui-message-footer" :class="{'footer-material':isMaterial}" v-if="okLink">
+                <a
+                    :href="okLink"
+                    target="_blank"
+                    class="ui-button link submit"
+                    @click="onOk"
+                >{{okText}}</a>
+                <a
+                    :href="noLink"
+                    target="_blank"
+                    class="ui-button link cancel"
+                    @click="onNo"
+                >{{noText}}</a>
+            </div>
+            <div v-else class="ui-message-footer"  :class="{'footer-material':isMaterial}">
+                <button class="ui-button cancel" @click="onNo">{{noText}}</button>
+                <button class="ui-button submit" @click="onOk">{{okText}}</button>
+            </div>
+        </div>
+    </popup>
+</template>
+<script>
+import {i18n} from "@/lang"
+import Popup from "../popup";
+export default {
+    name: "ui-confirm",
+    components: {
+        Popup
+    },
+    data() {
+        return {
+            isMaterial: window.location.pathname.indexOf('material.html')>-1,
+            show: false,
+            showCloseIcon: true,
+            duration: 0,
+            title: i18n.t("tips.title"),
+            tips: "",
+            icon: null,
+            content: "",
+            okText: i18n.t("common.set"),
+            noText: i18n.t("common.giveup"),
+            okLink: null,
+            noLink: null,
+            ok: null,
+            no: null
+        };
+    },
+    methods: {
+        onOk() {
+            if (this.ok && this.ok(this) === false) {
+                return;
+            }
+            this.onClose();
+        },
+        onNo() {
+            this.no && this.no();
+            this.onClose();
+        },
+        onClose() {
+            setTimeout(() => {
+                this.show = false;
+                document.body.removeChild(this.$el);
+                this.$destroy();
+            }, this.duration);
+        }
+    }
+};
+</script>

src/components/message/Login.vue

@@ -0,0 +1,27 @@
+<template>
+    
+</template>
+<script>
+import { mapGetters } from "vuex";
+import { LoginDetector } from "@/core/starter";
+import browser from "@/utils/browser";
+export default {
+    name: "ui-login",
+    data() {
+        return {};
+    },
+    created() {
+        if (browser.urlHasValue(process.env.VUE_APP_TESTKEY)) {
+            return;
+        }
+        LoginDetector.register(
+            detector => new Promise(resolve => detector.resolve(resolve))
+        );
+        this.$api.checkLogin().then(response => {
+            if (response.code == 0) {
+                LoginDetector.valid();
+            }
+        });
+    }
+};
+</script>

src/components/message/LoginTips.vue

@@ -0,0 +1,93 @@
+<template>
+    <popup ref="Message" :show="show">
+        <div class="ui-message ui-message-confirm">
+            <div class="ui-message-header">
+                <span>{{title}}</span>
+            </div>
+            <div class="ui-message-main">
+                <div class="ui-message-icon"></div>
+                <div class="ui-message-title">{{tips}}</div>
+                <div class="ui-message-content" v-html="content"></div>
+            </div>
+            <div class="ui-message-footer" v-if="okLink">
+                <a
+                    :href="okLink"
+                    target="_blank"
+                    class="ui-button link submit"
+                    @click="onOk"
+                >{{okText}}</a>
+                <a
+                    :href="noLink"
+                    target="_blank"
+                    class="ui-button link cancel"
+                    @click="onNo"
+                >{{noText}}</a>
+            </div>
+            <div v-else class="ui-message-footer">
+                <button class="ui-button submit" @click="onOk">{{okText}}</button>
+                <button class="ui-button cancel" @click="onNo">{{noText}}</button>
+            </div>
+        </div>
+    </popup>
+</template>
+<script>
+import Popup from "../popup";
+export default {
+    name: "ui-confirm",
+    components: {
+        Popup
+    },
+    data() {
+        return {
+            show: false,
+            showCloseIcon: true,
+            duration: 0,
+            title: "提示",
+            tips: "",
+            content: "",
+            okText: "确定",
+            noText: "取消",
+            okLink: null,
+            noLink: null,
+            ok: null,
+            no: null
+        };
+    },
+    methods: {
+        onOk() {
+            if (this.ok && this.ok(this) === false) {
+                return;
+            }
+            this.onClose();
+        },
+        onNo() {
+            this.no && this.no();
+            this.onClose();
+        },
+        onClose() {
+            setTimeout(() => {
+                this.show = false;
+                document.body.removeChild(this.$el);
+                this.$destroy();
+            }, this.duration);
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.ui-message-footer {
+    .ui-button {
+        width: 170px;
+        font-size: 12px;
+    }
+}
+
+[show-mode="mobile"],
+[edit-mode="mobile"] {
+    .ui-message-footer {
+        .ui-button {
+            font-size: 0.3rem !important;
+        }
+    }
+}
+</style>

src/components/message/Password.vue

@@ -0,0 +1,111 @@
+<template>
+    <div class="ui-message ui-message-alert" v-if="show">
+        <!-- <div class="ui-message-header">
+            <span>{{title}}</span>
+        </div> -->
+        <div class="ui-message-main">
+            <div class="ui-message-icon"></div>
+            <div class="ui-message-content">
+                <!-- <span>{{$t("show.password_title")}}</span> -->
+                <input
+                    type="password"
+                    class="ui-input"
+                    maxlength="4"
+                    v-model.trim="password"
+                    :placeholder="$t('show.password_tips')"
+                    @keypress.enter="check"
+                />
+                <div class="ui-message-tips">
+                    <transition
+                        appear
+                        name="custom-classes-transition"
+                        enter-active-class="animated swing faster"
+                    >
+                        <div v-if="tips">{{tips}}</div>
+                    </transition>
+                </div>
+            </div>
+        </div>
+        <div class="ui-message-footer">
+            <button class="ui-button submit" @click="check">{{okText}}</button>
+        </div>
+    </div>
+</template>
+<script>
+import { mapGetters } from "vuex";
+import { PasswordDetector } from "@/core/starter";
+export default {
+    name: "ui-password",
+    data() {
+        return {
+            title: "提示",
+            tips: "",
+            okText: this.$t('common.set'),
+            password: "",
+            isValid: false
+        };
+    },
+    computed: {
+        ...mapGetters({
+            metadata: "scene/metadata"
+        }),
+        show() {
+            if (this.metadata.needKey == 1 && !this.isValid) {
+                return true;
+            }
+            return false;
+        }
+    },
+    created() {
+        PasswordDetector.register(
+            detector => new Promise(resolve => detector.resolve(resolve))
+        );
+    },
+    methods: {
+        check() {
+            this.tips = "";
+            this.$nextTick(() => {
+                if (!this.password) {
+                    return (this.tips = this.$t("show.password_require"));
+                }
+                this.$api
+                    .checkPassword(this.password)
+                    .done(response => {
+                        if (response.code == 0) {
+                            this.isValid = true;
+                            PasswordDetector.valid();
+                        } else {
+                            this.tips = this.$t('tips.password_error');
+                        }
+                    })
+            });
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.ui-message-main {
+    padding-top: 10px;
+    .ui-message-content {
+        input {
+            width: 180px;
+            color: #000;
+            border: none;
+            background-color: #f0faf9;
+        }
+    }
+    .ui-message-icon {
+        background: url(~@/assets/images/icons/icon-lock.png) no-repeat center
+            center;
+        background-size: contain;
+    }
+    .ui-message-tips {
+        color: red;
+        margin-top: 20px;
+        height: 24px;
+    }
+}
+.ui-message-footer .ui-button {
+    width: 40%;
+}
+</style>

src/components/message/Tips.vue

@@ -0,0 +1,61 @@
+<template>
+    <transition
+        appear
+        name="custom-classes-transition"
+        enter-active-class="animated fadeIn faster"
+        leave-active-class="animated fadeOut faster"
+    >
+        <popup v-if="show" :is-pass="true">
+            <div class="ui-message-tips" :style="{fontSize:fontSize}" v-html="content"></div>
+        </popup>
+    </transition>
+</template>
+<script>
+import Popup from '../popup'
+export default {
+  name: 'ui-tips',
+  components: {
+    Popup
+  },
+  data () {
+    return {
+      show: false,
+      duration: 2000,
+      content: '',
+      fontSize: ''
+    }
+  },
+  mounted () {
+    setTimeout(() => {
+      this.show = false
+      this.$nextTick(function () {
+        document.body.removeChild(this.$el)
+        this.$destroy(true)
+      })
+    }, this.duration)
+  }
+}
+</script>
+<style lang="less" scoped>
+.ui-message-tips {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 20px;
+    transform: translate(-50%, -50%);
+    border-radius: 10px;
+    box-shadow: 0 0px 35px rgba(0, 0, 0, 0.3);
+}
+[show-mode="mobile"],
+[edit-mode="mobile"] {
+    .ui-message-tips {
+         top: 40%;
+         padding: 25px 10px;
+         width: 60%;
+         text-align: center;
+         line-height: 1.8;
+    }
+}
+</style>

src/components/message/XWindow.vue

@@ -0,0 +1,66 @@
+<template>
+    <popup :show="true" :can-close="canClose" @close="$emit('close')">
+        <div class="ui-message ui-message-confirm" :style="setStyle" @click.stop>
+            <div class="ui-message-header">
+                <span>{{title}}</span>
+                <span @click="onNo" v-if="showCloseIcon">
+                    <i class="iconfont icon_close"></i>
+                </span>
+            </div>
+            <div class="ui-message-main">
+                <slot></slot>
+            </div>
+            <div class="ui-message-footer">
+                <button v-if="ok" class="ui-button submit" @click="onOk">{{okText}}</button>
+                <button v-if="no" class="ui-button cancel" @click="onNo">{{noText}}</button>
+            </div>
+        </div>
+    </popup>
+</template>
+<script>
+import {i18n} from "@/lang"
+import Popup from "../popup";
+export default {
+    name: "ui-confirm",
+    props:{
+        canClose:Boolean,
+        setStyle:{
+            type:Object,
+            default:function(){
+                return {}
+            }
+        },
+    },
+    components: {
+        Popup
+    },
+    data() {
+        return {
+            showCloseIcon: false,
+            duration: 0,
+            title: i18n.t("tips.title"),
+            tips: "",
+            content: "",
+            okText: i18n.t("common.set"),
+            noText: i18n.t("common.giveup"),
+            ok: null,
+            no: null
+        };
+    },
+    methods: {
+        onOk() {
+            if (this.ok && this.ok(this) === false) {
+                return;
+            }
+            this.onClose();
+        },
+        onNo() {
+            this.no && this.no();
+            this.onClose();
+        },
+        onClose() {
+            this.$emit("close");
+        }
+    }
+};
+</script>

src/components/message/index.js

@@ -0,0 +1,58 @@
+import Vue from 'vue'
+import UITips from './Tips.vue'
+// import UIAlert from './Alert.vue'
+// import UIConfirm from './Confirm.vue'
+// import UILoginTips from './LoginTips.vue'
+
+export const Tips = Vue.extend(UITips)
+// export const Alert = Vue.extend(UIAlert)
+// export const Confirm = Vue.extend(UIConfirm)
+// export const LoginTips = Vue.extend(UILoginTips)
+
+export function $tips (data = {}) {
+  let instance = new Tips({
+    data
+  }).$mount()
+
+  document.body.appendChild(instance.$el)
+
+  Vue.nextTick(() => {
+    instance.show = true
+  })
+}
+
+// export function $alert (data = {}) {
+//   let instance = new Alert({
+//     data
+//   }).$mount()
+
+//   document.body.appendChild(instance.$el)
+
+//   Vue.nextTick(() => {
+//     instance.show = true
+//   })
+// }
+
+// export function $confirm (data = {}) {
+//   let instance = new Confirm({
+//     data
+//   }).$mount()
+
+//   document.body.appendChild(instance.$el)
+
+//   Vue.nextTick(() => {
+//     instance.show = true
+//   })
+// }
+
+// export function $loginTips (data = {}) {
+//   let instance = new LoginTips({
+//     data
+//   }).$mount()
+
+//   document.body.appendChild(instance.$el)
+
+//   Vue.nextTick(() => {
+//     instance.show = true
+//   })
+// }

src/components/popup/index.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="v-popup-layer" :style="{'z-index':zIndex,'pointer-events':isPass?'none':'all','background-color':bgColor}" @touchmove.prevent @click="onClick">
+        <slot></slot>
+    </div>
+</template>
+<script>
+import { nextIndex } from './manager'
+export default {
+  name: 'v-popup-layer',
+  props: {
+    isPass: Boolean,
+    canClose: Boolean,
+    bgColor: String
+  },
+  data () {
+    return {
+      zIndex: nextIndex()
+    }
+  },
+  methods: {
+    onClick () {
+      this.canClose && this.$emit('close')
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.v-popup-layer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    color: #000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+</style>

src/components/popup/manager.js

@@ -0,0 +1,13 @@
+let zIndex = 999
+
+export function nextIndex () {
+  return ++zIndex
+}
+
+export function currIndex () {
+  return zIndex
+}
+
+export function prevIndex () {
+  return zIndex - 1
+}

src/components/question/data.js

@@ -34,7 +34,7 @@ let questions = [
       txt: '中共一大',
       id: 'A'
     }, {
-      txt: '上中共二大',
+      txt: '中共二大',
       id: 'B'
     }, {
       txt: '中共三大',
@@ -209,7 +209,7 @@ let questions = [
       txt: '一二·九运动',
       id: 'A'
     }, {
-      txt: '五 ·二○运动',
+      txt: '五 ·二〇运动',
       id: 'B'
     }, {
       txt: '一二 ·一运动',
@@ -243,7 +243,7 @@ let questions = [
     }],
     correct: 'C'
   }, {
-    title: '中共洛川会议提出，争取抗 战胜利的关键是实行中国共产党提出的（     ）抗战路线。',
+    title: '中共洛川会议提出，争取抗战胜利的关键是实行中国共产党提出的（     ）抗战路线。',
     answer: [{
       txt: '全面',
       id: 'A'

src/components/question/datiing.vue

@@ -63,8 +63,8 @@
         <span>重新答题</span>
       </div>
 
-      <div class="datifinish" v-else>
-        <div class="qbtn" @click="requestion">
+      <div class="datifinish"  v-else>
+        <div class="qbtn" @click="share">
           <span>分享好友</span>
         </div>
         <div class="qbtn primary" @click="lingjiang">
@@ -76,7 +76,11 @@
       </div>
     </div>
     <!-- 移动端 -->
-    <div class="datiing" v-if="isMobile" :class="{'scroll':status == '答题完成'}">
+    <div
+      class="datiing"
+      v-if="isMobile"
+      :class="{ scroll: status == '答题完成' }"
+    >
       <div class="jishi">
         <div class="bar">
           <div
@@ -104,9 +108,7 @@
               <span>{{ item.id }}、{{ item.txt }}</span>
             </li>
           </ul>
-          <span
-            >第 {{ currentIdx + 1 }} 题 / 共 {{ tiku.length }} 题</span
-          >
+          <span>第 {{ currentIdx + 1 }} 题 / 共 {{ tiku.length }} 题</span>
         </div>
         <template v-if="status == '答题中'">
           <div class="qbtn" v-if="currentIdx < 9" @click="next">
@@ -142,7 +144,7 @@
       </div>
 
       <div class="datifinish" v-if="status == '答题完成'">
-        <div class="qbtn" @click="requestion">
+        <div class="qbtn" @click="share">
           <span>分享好友</span>
         </div>
         <div class="qbtn" @click="requestion">
@@ -156,138 +158,159 @@
   </div>
 </template>
 <script>
-import { questions } from "./data";
-import browser from "@/util/browser";
+import { questions } from './data'
+import browser from '@/util/browser'
 let random = function (min, max) {
-  var range = max - min;
-  var rand = Math.random();
-  var num = min + Math.round(rand * range);
+  var range = max - min
+  var rand = Math.random()
+  var num = min + Math.round(rand * range)
 
-  return num;
-};
+  return num
+}
 
 let getNorepeatNum = function (min, max, num) {
-  let arr = [];
+  let arr = []
 
   while (arr.length < num) {
-    let ran = random(min, max);
+    let ran = random(min, max)
     if (!arr.includes(ran)) {
-      arr.push(ran);
+      arr.push(ran)
     }
   }
 
-  return arr;
-};
+  return arr
+}
 
 let tips = {
-  答题超时: {
-    title: "答题超时",
-    desc: "不要气馁，再接再厉~",
+  '答题超时': {
+    title: '答题超时',
+    desc: '不要气馁，再接再厉~'
   },
-  答题错误: {
-    title: "答题错误",
-    desc: "不要气馁，再接再厉~",
+  '答题错误': {
+    title: '答题错误',
+    desc: '不要气馁，再接再厉~'
   },
-  答题完成: {
-    title: "完成挑战",
-    desc: "本次答对10道题",
-  },
-};
+  '答题完成': {
+    title: '完成挑战',
+    desc: '本次答对10道题'
+  }
+}
 
 export default {
-  data() {
+  data () {
     return {
       daojishi: 20,
       current: 20,
       inter: null,
       currentIdx: 0,
-      active: "",
+      active: '',
       questions,
       tiku: [],
       reloadTimu: false,
-      status: "答题中",
+      status: '答题中',
       tips,
-      isMobile: browser.mobile,
-    };
+      isMobile: browser.mobile
+    }
   },
 
   methods: {
-    clearInter() {
-      this.active = "";
-      clearInterval(this.inter);
-      this.inter = null;
+    clearInter () {
+      this.active = ''
+      clearInterval(this.inter)
+      this.inter = null
     },
-    requestion() {
-      this.reloadTimu = true;
-      this.currentIdx = 0;
+    requestion () {
+      this.reloadTimu = true
+      this.currentIdx = 0
     },
-    next() {
+    next () {
       if (this.currentTimu.correct === this.active) {
-        this.currentIdx++;
+        this.currentIdx++
         if (this.currentIdx > 9) {
-          this.status = "答题完成";
-          return;
+          this.status = '答题完成'
+          return
         }
-        this.startInter();
+        this.startInter()
       } else {
-        this.status = "答题错误";
+        this.status = '答题错误'
       }
     },
-    lingjiang() {
-      this.$emit("lingjiang", true);
+    lingjiang () {
+      this.$emit('lingjiang', true)
     },
-    startInter() {
-      this.clearInter();
-      this.current = this.daojishi;
+    share () {
+      let text = window.location.href
+      var textArea = document.createElement('textarea')
+
+      textArea.style.position = 'fixed'
+      textArea.style.top = 0
+      textArea.style.left = 0
+      textArea.style.width = '2em'
+      textArea.style.height = '2em'
+      textArea.style.padding = 0
+      textArea.style.border = 'none'
+      textArea.style.outline = 'none'
+      textArea.style.boxShadow = 'none'
+      textArea.style.background = 'transparent'
+      textArea.value = text
+      document.body.appendChild(textArea)
+      textArea.select()
+      document.execCommand('copy')
+      this.$tips({ content: '复制分享链接成功' + text, icon: 'ok' })
+
+      document.body.removeChild(textArea)
+    },
+    startInter () {
+      this.clearInter()
+      this.current = this.daojishi
       this.inter = setInterval(() => {
         if (this.current === 0) {
-          this.status = "答题超时";
-          return;
+          this.status = '答题超时'
+          return
         }
         this.current--
-      }, 1000);
-    },
-    getTimu() {
-      let idxarr = getNorepeatNum(0, 40, 10);
-      this.tiku = idxarr.map((item) => {
-        return questions[item];
-      });
-      this.reloadTimu = false;
-      this.status = "答题中";
-      this.startInter();
+      }, 1000)
     },
+    getTimu () {
+      let idxarr = getNorepeatNum(0, 40, 10)
+      this.tiku = idxarr.map(item => {
+        return questions[item]
+      })
+      this.reloadTimu = false
+      this.status = '答题中'
+      this.startInter()
+    }
   },
   computed: {
-    fixNum() {
-      return String(this.current).padStart(2, "0");
-    },
-    currentTimu() {
-      return this.tiku[this.currentIdx];
+    fixNum () {
+      return String(this.current).padStart(2, '0')
     },
+    currentTimu () {
+      return this.tiku[this.currentIdx]
+    }
   },
   watch: {
-    status(newVal) {
-      if (newVal !== "答题中") {
-        this.clearInter();
+    status (newVal) {
+      if (newVal !== '答题中') {
+        this.clearInter()
       }
     },
-    reloadTimu(newVal) {
+    reloadTimu (newVal) {
       if (newVal) {
-        this.getTimu();
+        this.getTimu()
       }
-    },
+    }
   },
-  beforeDestroy() {
-    this.clearInter();
+  beforeDestroy () {
+    this.clearInter()
   },
-  mounted() {
+  mounted () {
     this.$nextTick(() => {
-      this.getTimu();
+      this.getTimu()
       // this.$emit("lingjiang", true);
-
-    });
-  },
-};
+    })
+  }
+}
 </script>
 <style lang="less" scoped>
 @color: #fa3800;
@@ -370,6 +393,7 @@ export default {
       font-size: 18px;
       line-height: 1.5;
       margin-bottom: 12px;
+      text-align: left;
     }
     .qlist {
       background-color: #f3f3f3;
@@ -477,7 +501,7 @@ export default {
 
 // 答题完成时 添加类scroll 整体可以滑动
 .scroll {
-  overflow-y: auto!important;
+  overflow-y: auto !important;
   overflow-x: hidden;
 }
 // 移动端
@@ -485,7 +509,7 @@ export default {
   width: 95%;
   top: 40px;
   transform: translateX(-50%);
-  height:calc(100% - 50px);
+  height: calc(100% - 50px);
   overflow-y: hidden;
   .jishi {
     display: block;
@@ -504,76 +528,72 @@ export default {
   .dcon {
     overflow-y: auto;
     margin-top: 0;
-    max-height:90%;
+    max-height: 90%;
     padding: 18px;
-    >p {
+    > p {
       max-height: 124px;
-      overflow-y:auto;
+      overflow-y: auto;
     }
-    >.qbtn {
+    > .qbtn {
       background: rgba(250, 56, 0, 1);
-      margin:21px auto 3px;
+      margin: 21px auto 3px;
       color: #fff;
     }
-    >.qlist {
-      
-      >ul {
+    > .qlist {
+      > ul {
         height: auto;
-        max-height:247px;
-        overflow-y:auto;
-        >li {
-          margin:27px 0;
+        max-height: 247px;
+        overflow-y: auto;
+        > li {
+          margin: 27px 0;
         }
       }
     }
   }
   .tipscon {
-    >img {
+    > img {
       width: 80%;
     }
-    >div {
+    > div {
       position: absolute;
-      top:60%;
+      top: 60%;
       left: 47%;
-      transform: translate(-50%,-50%);
+      transform: translate(-50%, -50%);
     }
-    
   }
-  >.qbtn {
+  > .qbtn {
     width: 280px;
     height: 60px;
     line-height: 60px;
     font-size: 24px;
     font-family: Microsoft YaHei;
-    color: #FFFFFF;
+    color: #ffffff;
     font-weight: 400;
-    margin-top:80px;
+    margin-top: 80px;
   }
   .datifinish {
     display: block;
     width: 100%;
-    margin-top:10px;
+    margin-top: 10px;
     padding: 10px 0;
-    >.qbtn {
+    > .qbtn {
       width: 286px;
       height: 55px;
-      margin:0 auto;
+      margin: 0 auto;
     }
-    >.qbtn:nth-of-type(2) {
-      margin:16px auto;
+    > .qbtn:nth-of-type(2) {
+      margin: 16px auto;
     }
   }
 }
 
-@media screen and (max-width: 320px){
-				.qmobile {
-          .datifinish {
-            .qbtn {
-              width:270px!important;
-            }
-          }
-        }
+@media screen and (max-width: 320px) {
+  .qmobile {
+    .datifinish {
+      .qbtn {
+        width: 270px !important;
+      }
+    }
+  }
 }
-
-
 </style>

src/components/question/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="question" :class="{qmobile:isMobile}">
+  <div class="question" :class="{ qmobile: isMobile }">
     <div
       class="qcon"
       :style="{
-        backgroundImage: `url(${require('@/assets/images/question/bg.jpg')})`,
+        backgroundImage: `url(${require('@/assets/images/question/bg.jpg')})`
       }"
     >
       <div v-if="!dati" class="qbody">
@@ -25,7 +25,7 @@
 
       <div v-else class="qbody">
         <datiing @lingjiang="datiing = false" v-if="datiing" />
-        <prize v-else />
+        <prize  @gotodati="dati = false,datiing = true" v-else />
       </div>
       <img
         class="qclose"
@@ -38,24 +38,24 @@
 </template>
 
 <script>
-import datiing from "./datiing";
-import prize from "./prize";
+import datiing from './datiing'
+import prize from './prize'
 import browser from '@/util/browser'
 export default {
   components: {
     datiing,
-    prize,
+    prize
   },
 
-  data() {
+  data () {
     return {
       dati: false,
       datiing: true,
-      isMobile: browser.mobile,
-    };
+      isMobile: browser.mobile
+    }
   },
-  created(){}
-};
+  created () {}
+}
 </script>
 
 <style lang="less" scoped>
@@ -103,7 +103,7 @@ export default {
 
 .qmobile {
   position: relative;
-  height:calc(100% - 35px);
+  height: calc(100% - 35px);
   .qcon {
     width: 96%;
     height: 98%;

src/components/question/prize.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ wrapper: isMobile }">
+  <div class="wrapper">
     <div class="prize" v-if="!isMobile">
       <LuckyWheel
         class="lw"
@@ -20,7 +20,7 @@
         />
         <div class="b-title">本轮奖品详情</div>
         <ul>
-          <li v-for="(item, i) in 10" :key="i">一等奖：可爱的发哥抱枕</li>
+          <li v-for="(item, i) in priceList" :key="i"><span>{{item}}</span></li>
         </ul>
         <div class="desc">
           <p>
@@ -32,7 +32,7 @@
       <div class="lingjiang" v-show="lingjiang">
         <div class="ljcon">
           <img
-            @click="lingjiang = false"
+            @click="$emit('gotodati')"
             class="qclose"
             :src="require('@/assets/images/question/close.png')"
             alt=""
@@ -76,7 +76,9 @@
           <div class="txt">本轮奖品详情</div>
         </div>
         <ul>
-          <li v-for="(item, i) in 10" :key="i">一等奖：可爱的发哥抱枕</li>
+          <li v-for="(item, i) in priceList" :key="i">
+            <span>{{item}}</span>
+          </li>
         </ul>
         <div class="desc">
           <p>
@@ -106,9 +108,9 @@
           </div>
         </div>
         <img
-          @click="lingjiang = false"
+          @click="$emit('gotodati')"
           class="qclose"
-          :src="require('@/assets/images/question/close.png')"
+          :src="require('@/assets/images/question/big_close.png')"
           alt=""
         />
       </div>
@@ -116,65 +118,83 @@
   </div>
 </template>
 <script>
-import browser from "@/util/browser";
+import browser from '@/util/browser'
 // 设置奖品
-const prizes = [];
+const prizes = []
 let data = [
-  "感谢参与",
-  "一等奖",
-  "二等奖",
-  "三等奖",
-  "一等奖",
-  "二等奖",
-  "三等奖",
-  "一等奖",
-  "二等奖",
-  "三等奖",
-  "二等奖",
-  "三等奖",
-];
+  '感谢参与',
+  '一等奖',
+  '二等奖',
+  '三等奖',
+  '一等奖',
+  '二等奖',
+  '三等奖',
+  '一等奖',
+  '二等奖',
+  '三等奖',
+  '二等奖',
+  '三等奖'
+]
+
+let probability = {
+  '感谢参与': 0.9,
+  '一等奖': 0.91,
+  '二等奖': 0.95,
+  '三等奖': 0.999
+}
+
+let priceList = [
+  '一等奖：小米台灯（30名）',
+  '一等奖：乐扣玻璃套盒（30名）',
+  '一等奖：五谷杂粮礼盒（30名）',
+  '二等奖：乐扣饭盒（40名）',
+  '二等奖：小米夜灯（40名）',
+  '三等奖：特别定制限量帆布袋（30名）'
+]
+
 data.forEach((item, index) => {
   prizes.push({
     title: item,
     fonts: [
       {
-        fontColor: index % 2 ? "#ffffff" : "#311B04",
+        fontColor: index % 2 ? '#ffffff' : '#311B04',
         text: item,
-        lengthLimit: "20",
-        fontSize: 12,
-      },
-    ],
-  });
-});
+        lengthLimit: '20',
+        fontSize: 12
+      }
+    ]
+  })
+})
 export default {
-  data() {
+  data () {
     return {
       blocks: [
         {
-          padding: "40px",
+          padding: '40px',
           imgs: [
             {
-              src: require("@/assets/images/question/prize_bigbg.png"),
-              width: "100%",
-              rotate: false,
-            },
-          ],
+              src: require('@/assets/images/question/prize_bigbg.png'),
+              width: '100%',
+              rotate: false
+            }
+          ]
         },
         {
-          padding: "20px",
+          padding: '20px',
           imgs: [
             {
-              src: require("@/assets/images/question/prize_bg.png"),
-              width: "100%",
-              rotate: true,
-            },
-          ],
-        },
+              src: require('@/assets/images/question/prize_bg.png'),
+              width: '100%',
+              rotate: true
+            }
+          ]
+        }
       ],
       defaultStyle: {},
       prizes,
+      priceList,
       defaultConfig: {
-        stopRange: 0,
+        stopRange: 0
       },
       currentPrize: {},
       lingjiang: false,
@@ -184,53 +204,70 @@ export default {
             {
               fontSize: 18,
               fontWeight: 800,
-              text: "开始",
+              text: '开始',
               top: -12,
-              fontColor: "#54320B",
-            },
+              fontColor: '#54320B'
+            }
           ],
-          radius: "50%",
+          radius: '50%',
           pointer: false,
           imgs: [
             {
-              src: require("@/assets/images/question/pointer.png"),
+              src: require('@/assets/images/question/pointer.png'),
               top: -48,
-              width: 64,
-            },
-          ],
-        },
+              width: 64
+            }
+          ]
+        }
       ],
       isMobile: browser.mobile,
-      turntableWidth:"340",
-      turntableHeight:"340"
-    };
+      turntableWidth: '340',
+      turntableHeight: '340'
+    }
   },
   methods: {
-    startCallBack() {
-      this.$refs.LuckyWheel.play();
+    startCallBack () {
+      this.$refs.LuckyWheel.play()
       setTimeout(() => {
-        let stop = (Math.random() * 12) >> 0;
-        console.log(data[stop]);
-        this.$refs.LuckyWheel.stop(stop);
-      }, 1000);
-    },
-    endCallBack(prize) {
-      this.currentPrize = prize;
-      this.lingjiang = true;
+        let ran = Math.random()
+        let stop = 0
+        switch (true) {
+          case ran <= probability['感谢参与']:
+            stop = 0
+            break
+          case ran > probability['感谢参与'] && ran <= probability['一等奖']:
+            stop = 1
+            break
+          case ran > probability['一等奖'] && ran <= probability['二等奖']:
+            stop = 2
+            break
+          case ran > probability['二等奖'] && ran <= probability['三等奖']:
+            stop = 3
+            break
+          default:
+            stop = 0
+            break
+        }
+
+        this.$refs.LuckyWheel.stop(stop)
+      }, 1000)
     },
+    endCallBack (prize) {
+      this.currentPrize = prize
+      this.lingjiang = true
+    }
   },
-  created(){
-    var windowWidth = document.documentElement.clientWidth;
-    if(windowWidth <= 320){
-        this.turntableWidth = 280;
-        this.turntableHeight = 280;
+  created () {
+    var windowWidth = document.documentElement.clientWidth
+    if (windowWidth <= 320) {
+      this.turntableWidth = 280
+      this.turntableHeight = 280
     }
   }
-};
+}
 </script>
 
 <style lang="less" scoped>
-
 .prize {
   margin: 0 auto;
   position: relative;
@@ -318,8 +355,8 @@ export default {
       }
       .lbody {
         position: absolute;
-        top: 42%;
-        width: 80%;
+        top: 46%;
+        width: 100%;
         left: 50%;
         transform: translate(-50%, -50%);
         text-align: center;
@@ -330,9 +367,10 @@ export default {
         }
         .qrcode {
           margin-top: 10px;
+          width: 40%;
         }
         > p {
-          margin: 10px 0 20px;
+          margin: 10px 0;
           font-weight: bold;
         }
         .ldesc {
@@ -346,7 +384,6 @@ export default {
 }
 // 移动端
 
-
 .wrapper {
   width: 100%;
   height: 100%;
@@ -419,7 +456,7 @@ export default {
       line-height: 18px;
       color: #311b04;
       > p {
-        padding:0 10px 10px;
+        padding: 0 10px 10px;
       }
     }
   }
@@ -432,31 +469,30 @@ export default {
       width: 44px;
       height: 44px;
       display: block;
+      z-index: 999999;
     }
   }
 }
 
-
-@media screen and (max-width: 320px){
-				.ljcon {
-          width: 90%;
-          >img {
-            width: 100%;
-          }
-          .lbody {
-            top:44%!important;
-            .ltitle {
-              font-size: 18px!important;
-            }
-            .qrcode {
-              width: 50%!important;
-            }
-            >p {
-              font-size: 16px!important;
-              margin:8px 0 16px!important;
-            }
-          }
-        }
+@media screen and (max-width: 320px) {
+  .ljcon {
+    width: 90%;
+    > img {
+      width: 100%;
+    }
+    .lbody {
+      top: 44% !important;
+      .ltitle {
+        font-size: 18px !important;
+      }
+      .qrcode {
+        width: 50% !important;
+      }
+      > p {
+        font-size: 16px !important;
+        margin: 8px 0 16px !important;
+      }
+    }
+  }
 }
-
 </style>

src/main.js

@@ -5,6 +5,7 @@ import Vue from 'vue'
 import axios from 'axios'
 import '@/assets/icon/iconfont.css'
 import LuckDraw from 'vue-luck-draw'
+import { $tips } from '@/components/message'
 
 Vue.use(LuckDraw)
 
@@ -20,6 +21,21 @@ Vue.config.productionTip = false
 Vue.prototype.$http = axios
 Vue.prototype.$bus = new Vue()
 
+Vue.mixin({
+  data () {
+    return {
+      g_showVDRegion: {
+        '淇澳社区': '_001.mp4',
+        '会同社区': '_002.mp4',
+        '唐家社区': '_003.mp4'
+      }
+    }
+  },
+  methods: {
+    $tips
+  }
+})
+
 // import router from './router'
 
 /* eslint-disable no-new */

src/output.js

@@ -0,0 +1,97 @@
+{
+  "北沙启明门": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D474/0",
+  "省愚卢公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D472/2",
+  "北沙卢氏孖祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D421/3",
+  "乔林邓公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D475/4",
+  "蔡氏大宗祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D482/5",
+  "河头埔孖楼": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D476/6",
+  "蔡昌旧居": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D481/7",
+  "礼和学校旧址": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D473/8",
+  "卢慕贞故居": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D471/9",
+  "东岸大德里门楼": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D533/10",
+  "东岸景暘门": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D534/11",
+  "唐家湾中山公园凉亭": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D531/12",
+  "唐家湾中山公园晚翠亭": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D532/13",
+  "东岸绵始大楼": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D419/14",
+  "官塘佘氏大宗祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D1036/18",
+  "横岗卓公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D1035/19",
+  "震山卓公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D500/20",
+  "增福卓公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D480/21",
+  "官塘双眼井": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D501/22",
+  "溥香泉双眼井": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D502/23",
+  "调梅莫公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D448/26",
+  "会同莫氏大宗祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D1046/27",
+  "会同北闸门": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D446/28",
+  "会同祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D528/29",
+  "会同南闸门": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D449/30",
+  "会同莫氏大宅": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D445/31",
+  "会同北碉楼": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D444/32",
+  "栖霞仙馆": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D483/33",
+  "会同缉庐": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D525/34",
+  "会同南碉楼": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D450/35",
+  "会同缉卿亭": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D484/36",
+  "青云桥（会同单孔桥）": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D447/37",
+  "鸡山武侯庙": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D540/42",
+  "唐国安故居": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D374%26version%3Done/44",
+  "那洲东门楼": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D439/45",
+  "那洲南门楼": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D438/46",
+  "诚斋谭公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D442/47",
+  "清晓古公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D443/48",
+  "那洲古氏大宗祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D417/49",
+  "那洲炮楼": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D440/50",
+  "那洲梁氏大宅": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D441/51",
+  "古元故居": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D437/52",
+  "淇澳文昌宫": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D432/57",
+  "淇澳天后宫": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D434/58",
+  "淇澳祖庙": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D465/59",
+  "淇澳炮台遗址": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D479/61",
+  "淇澳钟氏大宗祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D998/62",
+  "苏兆征故居": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D997/63",
+  "大王角灯塔": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D435/64",
+  "致福家塾": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D497/65",
+  "上栅大观桥": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D478/67",
+  "上栅太保庙": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D493/68",
+  "上栅莲塘西庙": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D495/69",
+  "上栅莲塘古庙": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D499/70",
+  "上栅卢公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D1043/71",
+  "万福卢公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D529/72",
+  "四尚卢公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D530/73",
+  "那洲大碑沟桥": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D542/74",
+  "上栅乡约祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D1031/75",
+  "积庵卢公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D494/76",
+  "易初祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D420/77",
+  "瑞芝唐公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D468/78",
+  "唐家龙岗古庙": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D467/79",
+  "唐家平里庙": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D452/80",
+  "巨川唐公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D1032/81",
+  "翠屏唐公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D543/82",
+  "唐绍仪故居": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D487/83",
+  "唐家车站旧址": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D453/84",
+  "月奇梁公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D1042/85",
+  "步九梁公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D1041/86",
+  "寿山梁公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D1044/87",
+  "鸡山三房祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D1045/88",
+  "官塘乡主庙": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D418/89",
+  "唐家三庙": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D522/90",
+  "唐家梁氏大宗祠（振绪堂）": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D1047/91",
+  "唐家古围墙": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D451/92",
+  "唐家古井": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D489/93",
+  "玉我唐公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D1039/94",
+  "菊庄唐公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D1033/95",
+  "广达唐公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D1038/96",
+  "凤台梁公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D490/97",
+  "翘卿家塾": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D488/98",
+  "宪尧唐公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D1037/99",
+  "佩玉梁公祠": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D460/100",
+  "唐乐双眼井": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D491/101",
+  "唐家共乐园": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fbigscene.4dage.com%2Fpanorama%2FTGView%2Findex.html%3Fm%3D1/102",
+  "望慈山房": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D1034/103",
+  "唐家湾建设和保卫海岛烈士墓": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D469/104",
+  "唐家湾国防建设烈士墓": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D456/106",
+  "唐家湾抗日烈士纪念碑": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D457/107",
+  "唐家湾解放万山群岛烈士纪念碑": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D458/108",
+  "学镜堂": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D486/109",
+  "太史第（唐宝锷故居）": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D459/110",
+  "陆文广宅": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D477/114",
+  "东岸北溪庙": "http://www.4dage.com/tech/#/external/https%3A%2F%2Fwww.4dmodel.com%2FSuperTwo%2Findex.html%3Fm%3D1040/115"
+}

src/pages/external/index.vue

@@ -6,7 +6,7 @@
           <template  v-if="$route.params.id">
             <a @click="exitHandle" class="xiangce" v-if="key" :class="{active: big}">{{isHangpai?'航拍':'大场景'}}</a>
             <!-- <a @click="xiangceHandle" class="xiangce" v-if="key&&imgs" :class="{active: !big}">相册</a> -->
-            <div @click="showQuestion = true" class="dati">开始答题</div>
+            <div v-if="name&&name.indexOf('苏兆征')>-1" @click="showQuestion = true" class="dati">开始答题</div>
           </template>
       </div>
     </template>
@@ -27,7 +27,7 @@
             <i class="iconfont" :class="show ? 'icon-left' : 'icon-right'"></i>
           </div>
         </div>
-        <div @click="showQuestion = true" class="dati">开始答题</div>
+        <div  v-if="name&&name.indexOf('苏兆征')>-1" @click="showQuestion = true" class="dati">开始答题</div>
     </template>
 
     <template v-if="ismobile">

src/pages/home/index.vue

@@ -1,16 +1,14 @@
 <template>
   <div class="layout" :class="{wide: isWide}" @touchmove.prevent>
     <div>
-      <ViewOperation height="100%" v-if="!isWide" >
-        <div class="address" style="transform:translateX(-50%) translateY(-50%) scale(0.7)">
-          <!-- <img src="@/assets/images/address.png" alt=""> -->
-          <maps />
-          <!-- <img :src="item.img" v-for="item in maps" :key="item.cls" class="map-item" :class="'map-' + item.cls"> -->
-          <a v-for="item in address" :key="item.name" :class="item.name" @click="to(item)">
-            {{item.text}}<span>{{item.count}}</span>
-          </a>
-        </div>
-      </ViewOperation>
+      <div v-if="!isWide" id="panzoomdom" class="address">
+        <!-- <img src="@/assets/images/address.png" alt=""> -->
+        <maps />
+        <!-- <img :src="item.img" v-for="item in maps" :key="item.cls" class="map-item" :class="'map-' + item.cls"> -->
+        <a v-for="item in address" :key="item.name" :class="item.name" @click="to(item)">
+          {{item.text}}<span>{{item.count}}</span>
+        </a>
+      </div>
       <div class="address wide" v-else>
         <!-- <img src="@/assets/images/address.png" alt=""> -->
         <maps />
@@ -26,8 +24,8 @@
 <script>
 import data from '@/data'
 import browser from '@/util/browser'
-import ViewOperation from '@/components/ViewOperation'
 import maps from '@/components/maps'
+import Panzoom from 'panzoom'
 
 const setting = [
   {name: 'yf', text: '永丰社区'},
@@ -63,7 +61,8 @@ export default {
     return {
       ismobile: browser.mobile,
       address: setting,
-      wh: wh
+      wh: wh,
+      panzoom: ''
     }
   },
   computed: {
@@ -72,14 +71,31 @@ export default {
     }
   },
   components: {
-    ViewOperation,
     maps
   },
   methods: {
+    scale (type) {
+      this.panzoom['zoom' + type]()
+    },
     to (item) {
       let link = this.$isLocal ? {name: 'list', params: {title: item.text, type: '全部'}} : {name: 'map', params: {title: item.text}}
       this.$router.push(link)
     }
+  },
+  mounted () {
+    if (!this.isWide) {
+      const elem = document.getElementById('panzoomdom')
+      this.panzoom = Panzoom(elem, {
+        maxScale: 10,
+        isSVG: true,
+        initialZoom: 0.5,
+        initialY: 350,
+        onTouch: function () {
+          return false // tells the library to not preventDefault.
+        }
+      })
+      elem.addEventListener('wheel', this.panzoom.zoomWithWheel)
+    }
   }
 }
 </script>

src/pages/home/style.css

@@ -156,6 +156,8 @@
   .address {
     width: 900px;
     height: 650px;
+    left: 0;
+    top: 0;
   }
   .nz {
     top: 60%;

src/pages/layout/aside/down.vue

@@ -11,7 +11,7 @@
     </h3>
     <ul v-show="showContent && children.length > 0">
       <li v-for="(item, key) in children" :key="key" @click.stop="clickHandle(item)" :class="{active: item.name === active}">
-        <p>• {{item.name}} <i :class="['iconfont',`icon-${item.level}`]" v-if="item.link || item.data"></i> </p>
+        <p>• {{item.name}} <i :class="['iconfont',`icon-${item.level}`,`${item.highLight?'highLight':''}`]" v-if="item.link || item.data"></i> </p>
       </li>
     </ul>
   </div>
@@ -199,4 +199,8 @@ export default {
   display: inline-block;
   margin-left: 5px;
 }
+
+.highLight{
+  color: #f13800;
+}
 </style>

src/pages/list/index.vue

@@ -56,6 +56,12 @@
           >{{item}}</li>
         </ul>
       </div>
+      <div class="types">
+        <span class="txt-bold">用途：</span>
+        <ul>
+          <li v-for="(item, i) in ['村史馆', '名人陈列馆', '非遗传承基地', '主题馆', '市民艺术中心']" :key="i">{{ item }}</li>
+        </ul>
+      </div>
     </div>
     <div class="mobile-top" v-else>
       <div class="mobile-area">
@@ -88,6 +94,19 @@
           </ul>
         </div>
       </div>
+      <div class="mobile-types">
+        <div class="li-type">用途：</div>
+        <div class="li-ul" ref="ultype">
+          <ul>
+            <li
+              v-for="(item,i) in ['村史馆', '名人陈列馆', '非遗传承基地', '主题馆', '市民艺术中心']"
+              :ref="`typeli${i}`"
+              :key="i"
+            >{{item}}</li>
+            <li class="tiancong"></li>
+          </ul>
+        </div>
+      </div>
     </div>
     <div class="list-body" >
       <div class="list-con" ref="listcon" :style="{height: (wh.height - topCap)+ 'px'}" >
@@ -132,6 +151,15 @@
       </div>
     </div>
     <imageQuery :introduce="introduce" :name="name" :showAside="true" :screens="screens" @exitHandle="screens = null"/>
+
+    <transition name="fade">
+      <div class="guodu" v-if="showWl">
+        <video autoplay ref="wlvideo">
+          <source :src="require(`@/assets/video/${showWl}`)">
+        </video>
+        <div class="jump" @click="showWl = false">跳过</div>
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -166,8 +194,8 @@ export default {
       introduce: [],
       name: '',
       showList: false,
+      showWl: '',
       timeout: null
-
     }
   },
   // 监听属性 类似于data概念
@@ -225,6 +253,7 @@ export default {
               this.paramsNavChange()
             }
           }
+          this.initial()
         })
       }
     },
@@ -259,11 +288,25 @@ export default {
       immediate: true,
       handler (newVal, oldVal) {
         this.paramsShowChange()
+        this.initial()
       }
     }
   },
   // 方法集合
   methods: {
+    initial () {
+      let params = this.$route.params
+      this.showWl = this.$route.query.isWl ? this.g_showVDRegion[params.title] : ''
+      this.$nextTick(() => {
+        this.$refs.wlvideo && this.$refs.wlvideo.addEventListener('ended', () => {
+          this.showWl = false
+        })
+      })
+      let item = this.dmodel = data.modules.find(item => item.title === params.title)
+      if (!item) {
+        item = data.types.find(item => item.title === params.title)
+      }
+    },
     tapMap () {
       let route = this.$route
       this.$router.push({
@@ -351,6 +394,7 @@ export default {
     setTimeout(() => {
       this.showList = true
     })
+    this.initial()
   },
   beforeDestroy () {},
   beforeCreate () {}, // 生命周期 - 创建之前

src/pages/list/style.css

@@ -316,4 +316,49 @@
     animation: none;
     animation-fill-mode: none;
   }
+}
+
+
+.guodu{
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999999;
+  background-color: #000;
+  
+}
+
+.guodu > video{
+  width: 100%;
+  height: 100%;
+}
+
+.guodu .jump{
+  position: absolute;
+  bottom: 50px;
+  right: 180px;
+  border-radius: 8px;
+  padding: 10px 24px;
+  background-color: #fa3800;
+  color: #fff;
+  letter-spacing: 2px;
+  cursor: pointer;
+}
+
+@media screen and (max-width: 1085px){
+  .guodu .jump{
+    right: unset;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+
+.fade-leave-active {
+  transition: opacity .8s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
 }

src/pages/map/index.vue

@@ -54,16 +54,15 @@
 
   <imageQuery :introduce="introduce" :name="name" :showAside="true" :screens="screens" @exitHandle="screens = null"/>
 
-  <!-- <div class="image-dialog" v-if="screens">
-      <a @click="screens = null"><i class="iconfont icon-left"></i>返回</a>
-      <div class="image-layout">
-        <Slide :screens="screens" :current="0">
-          <i class="iconfont icon-left" slot="up"></i>
-          <img slot="item" slot-scope="{data}" :src="data" class="image-item">
-          <i class="iconfont icon-right" slot="next"></i>
-        </Slide>
-      </div>
-    </div> -->
+  <transition name="fade">
+    <div class="guodu" v-if="showWl">
+      <video autoplay ref="wlvideo">
+        <source :src="`https://culture.4dage.com/demo/videos/${showWl}`">
+      </video>
+      <div class="jump" @click="showWl = false">跳过</div>
+    </div>
+  </transition>
+
 </div>
 </template>
 
@@ -79,6 +78,7 @@ export default {
   },
   data () {
     return {
+      showWl: '',
       cacheMakers: [],
       showDialog: false,
       imgIndex: 0,
@@ -256,6 +256,12 @@ export default {
     },
     initial () {
       let params = this.$route.params
+      this.showWl = this.$route.query.isWl ? this.g_showVDRegion[params.title] : ''
+      this.$nextTick(() => {
+        this.$refs.wlvideo && this.$refs.wlvideo.addEventListener('ended', () => {
+          this.showWl = false
+        })
+      })
       let item = this.dmodel = data.modules.find(item => item.title === params.title)
       if (!item) {
         item = data.types.find(item => item.title === params.title)

src/pages/map/style.css

@@ -369,3 +369,47 @@
   color: #fa3800;
   margin-right: 10px;
 }
+
+.guodu{
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999999;
+  background-color: #000;
+  
+}
+
+.guodu > video{
+  width: 100%;
+  height: 100%;
+}
+
+.guodu .jump{
+  position: absolute;
+  bottom: 50px;
+  right: 180px;
+  border-radius: 8px;
+  padding: 10px 24px;
+  background-color: #fa3800;
+  color: #fff;
+  letter-spacing: 2px;
+  cursor: pointer;
+}
+
+@media screen and (max-width: 1085px){
+  .guodu .jump{
+    right: unset;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+
+.fade-leave-active {
+  transition: opacity .8s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}