0518

.gitignore

@@ -1,6 +1,8 @@
 .DS_Store
 node_modules
 /dist
+public/data
+
 
 
 # local env files

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "swiper": "^5.3.8",
     "vue": "^2.6.11",

public/CAD/static/data/799/style.json

@@ -1,9 +0,0 @@
-{
-  "line": {
-    "color": "#fff",
-    "width": 0.1
-  },
-  "sign": {
-    "color": "#BC1915"
-  }
-}

public/index.html

@@ -11,10 +11,9 @@
     <meta property="og:title" content="四维时代">
     <meta property="og:description" content="四维时代">
     <meta property="og:image:type" content="image/jpg">
-    <link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon.png" class="keep">
+    <link rel="icon" type="image/png" sizes="32x32" href="<%= VUE_APP_STATIC_DIR %>images/icons/favicon.ico" class="keep">
     <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/css/oldVer/main0.css"/>
     <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/css/main.css?v=2.25"/>
-    <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/CAD/cad.css?v=2.25"/>
     <script>
         var number = window.location.href.substring(window.location.href.indexOf("=") + 1);
         if (number.indexOf("&") != -1) {

public/static/css/main.css

@@ -2703,7 +2703,7 @@ body, html {
 
 #gui-thumb {
     height: 100%;
-    background-size: auto 100%;
+    background-size: cover;
     background-position: 50% 50%;
     background-repeat: no-repeat;
     z-index: 0;

public/static/css/oldVer/main0.css

@@ -39,7 +39,7 @@ iframe{
 	/* margin: 80px auto; */
 	display: none;
 	z-index: 101;
-	background:  rgba(0,0,0,0.6);
+	background:  rgba(0,0,0,0);
 }
 .popup-content{
 	position: relative;
@@ -61,6 +61,7 @@ iframe{
 	top: 30px;
 	text-indent: -999em;
 	background-size: 100% 100%;
+	display: none;
 }
 .specialTitle{bottom:65%;
     width: 100%;

public/static/js/myShow.js

@@ -1,6 +1,7 @@
 var g_ProjectName=window.location.pathname.substring(window.location.pathname.indexOf("/")+1,window.location.pathname.lastIndexOf("/"));
-var g_Prefix="https://super.4dage.com/";
-// var g_Prefix=window.location.href.substring(0,window.location.href.indexOf("/index.html")+1);
+// var g_Prefix="https://super.4dage.com/";
+var g_Prefix=window.location.origin+'/';
+
 var s = window.location.href.split('/');
 s.pop();
 //var g_Prefix = s.join('/');

src/assets/images/group.svg

@@ -0,0 +1,81 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="309.97" height="202.727" viewBox="0 0 309.97 202.727">
+  <defs>
+    <filter id="LJ8" x="137.146" y="76.019" width="80.704" height="79.948" filterUnits="userSpaceOnUse">
+      <feOffset dy="3" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feFlood/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <linearGradient id="linear-gradient" x1="0.5" y1="-0.127" x2="0.5" y2="0.934" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#fcd67b"/>
+      <stop offset="1" stop-color="#fcd67b" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+  <g id="group" transform="translate(-5570.5 -1510.5)">
+    <g id="_9" data-name="9" transform="translate(3975 1424)">
+      <g id="GROUP2" transform="translate(-5394.721 -3532.733)" opacity="0.7">
+        <path id="LJ" d="M7015.816,3643.817c3.868-3.868,5.753-5.928,5.753-9.69v-4.764a9.562,9.562,0,0,1,2.4-6.351h-17.645a4.8,4.8,0,0,0-3.414,1.414l-7.5,7.5a4.793,4.793,0,0,0-1.414,3.413v29.884C6997.8,3661.508,7012.456,3647.177,7015.816,3643.817Z" fill="#a01c26"/>
+      </g>
+      <g id="_10" data-name="10" transform="translate(-5394.721 -3532.733)" opacity="0.7">
+        <path id="LJ-2" data-name="LJ" d="M6993.1,3811.586l7.5,7.5a8.106,8.106,0,0,0,5.732,2.374h277.758a8.106,8.106,0,0,0,5.732-2.374l7.5-7.5a8.106,8.106,0,0,0,2.374-5.732V3635.339a8.107,8.107,0,0,0-2.374-5.732l-7.5-7.5a8.106,8.106,0,0,0-5.732-2.374H7043.676c-.232,0-.463.012-.692.032h-11.817a9.6,9.6,0,0,0-9.6,9.6v4.764c0,3.762-1.885,5.822-5.753,9.69s-22.72,22.29-22.72,22.29a8.107,8.107,0,0,0-2.375,5.733v134.014A8.1,8.1,0,0,0,6993.1,3811.586Z" fill="#1a1311" stroke="#a01c26" stroke-width="1"/>
+      </g>
+      <g id="GROUP1" transform="translate(-11.986 5)">
+        <path id="LJ-3" data-name="LJ" d="M7004.394,3684.906v85.157a24.721,24.721,0,0,0,7.24,17.479l22.867,22.867a24.721,24.721,0,0,0,17.479,7.241h221.565" transform="translate(-5387.721 -3539.733)" fill="none" stroke="#a01c26" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" opacity="0.88"/>
+        <g id="TR" transform="translate(1611.266 135.173)" fill="none" stroke="#a01c26" stroke-width="1.5">
+          <circle cx="5" cy="5" r="5" stroke="none"/>
+          <circle cx="5" cy="5" r="4.25" fill="none"/>
+        </g>
+      </g>
+    </g>
+    <g id="_8" data-name="8" transform="translate(3975 1424)">
+      <g transform="matrix(1, 0, 0, 1, 1595.5, 86.5)" filter="url(#LJ8)" style="isolation: isolate">
+        <path id="LJ8-2" data-name="LJ8" d="M5748.347,4964.89h-17.51v.023h-45.192v61.925h62.7v-50.357h0Z" transform="translate(-5539.5 -4882.87)" fill="#a01c26" opacity="0.8"/>
+      </g>
+      <path id="LJ7" d="M5658.612,5027.335h23.727v-46.718l-23.727.041Z" transform="translate(-3943.145 -4796.868)" fill="#f8c565" opacity="0.4" style="isolation: isolate"/>
+      <rect id="JX" width="63.266" height="50.358" transform="translate(1806.287 180.109)" fill="#f8c565" opacity="0.4" style="isolation: isolate"/>
+      <g id="GROUP-2" data-name="GROUP">
+        <path id="LJ6" d="M5593.987,4982.634v.649H5612.2V4964h6.337v8.983h40.322v-37.994h-40.168v7.652h-24.329a20,20,0,0,0-.377,40Z" transform="translate(-3940.488 -4795.427)" fill="#f8c565" opacity="0.5" style="isolation: isolate"/>
+        <path id="LJ5" d="M5678.455,4972.729v-27.724h6.233v12.479h22.5v-30.4h-43.579v45.642h14.844Z" transform="translate(-3943.302 -4795.177)" fill="#f8c565" opacity="0.5" style="isolation: isolate"/>
+        <path id="LJ4" d="M5612.178,4986.638h-18.215v.734a6.9,6.9,0,0,1-.759.04h-.1c-2.4,0-8.76-.687-15.984-7.032h-.01a2,2,0,0,0-1.32-.5,2.025,2.025,0,0,0-2.022,2.014h-.011v23.675a2.528,2.528,0,0,0,2.468,2.538l.006.008h17.736v3.3h-17.34a2.867,2.867,0,0,0-2.864,2.863v.062l-.006,0v12.97h38.425Z" transform="translate(-3940.465 -4796.844)" fill="#f8c565" opacity="0.5" style="isolation: isolate"/>
+        <path id="LJ3" d="M5618.642,5053.968h-4.7v-10h-21.727v-13.107h-18.462v30.357l5.651,5.275h12.964v-7.856h4.046v15.146H5614.9v-7.289h39.09v-35.632h-35.348Z" transform="translate(-3940.465 -4798.453)" fill="#f8c565" opacity="0.5" style="isolation: isolate"/>
+        <path id="LJ2" d="M5747.5,5040.909v-10.05h-88.884v35.631h84.9a.4.4,0,0,1,.048-.025,4.018,4.018,0,0,0,4-4.009v-21.546Z" transform="translate(-3943.145 -4798.453)" fill="#fcd67b" opacity="0.5" style="isolation: isolate"/>
+        <path id="LJ1" d="M5762.25,4904.859v14.468h-51.638v37.457h14.782V4944.24h6.231v16.818h17.51v-24.672h24.032a14.454,14.454,0,0,1,14.412,14.411v.09c0,.107,0,.149-.005.3v.028a1.329,1.329,0,0,0,1.328,1.326,1.292,1.292,0,0,0,.55-.122,45.571,45.571,0,0,0,14.43-9.44,35.88,35.88,0,0,0,7.748-11.113,33.869,33.869,0,0,0,2.592-9.035,22.376,22.376,0,0,0,.244-3.729v-14.243Z" transform="translate(-3944.787 -4794.475)" fill="#f8c565" opacity="0.5" style="isolation: isolate"/>
+      </g>
+    </g>
+    <g id="_7" data-name="7" transform="translate(5726.276 1665.964)">
+      <ellipse id="TR-2" data-name="TR" cx="8.661" cy="8.661" rx="8.661" ry="8.661" transform="translate(0 0)" fill="#a01c26" opacity="0.8"/>
+      <text id="_2" data-name="2" transform="translate(4.555 13.008)" fill="#fcd67b" font-size="13" font-family="SourceHanSansCN-Medium, Source Han Sans CN" font-weight="500" opacity="0.8"><tspan x="0" y="0">2</tspan></text>
+    </g>
+    <g id="_6" data-name="6" transform="translate(3975 1424)">
+      <g id="GROUP-3" data-name="GROUP" transform="translate(1765.825 175.229)">
+        <path id="LJ-4" data-name="LJ" d="M24.265,0,48.53,31.561H0Z" transform="translate(0 48.53) rotate(-90)" fill="url(#linear-gradient)"/>
+      </g>
+      <g id="TR-3" data-name="TR" transform="translate(1764.337 190.833)" fill="#fcd67b" stroke="#fcd67b" stroke-width="3">
+        <ellipse cx="8.661" cy="8.661" rx="8.661" ry="8.661" stroke="none"/>
+        <ellipse cx="8.661" cy="8.661" rx="7.161" ry="7.161" fill="none"/>
+      </g>
+    </g>
+    <text id="_1" data-name="1" transform="translate(5743.893 1627.84)" fill="#a01c26" font-size="13" font-family="SourceHanSansCN-Medium, Source Han Sans CN" font-weight="500"><tspan x="0" y="0">1</tspan></text>
+    <g id="_5" data-name="5" transform="translate(5662.9 1665.964)">
+      <path id="TR-4" data-name="TR" d="M8.661,0A8.661,8.661,0,1,1,0,8.661,8.661,8.661,0,0,1,8.661,0Z" transform="translate(0 0)" fill="#a01c26"/>
+      <text id="_3" data-name="3" transform="translate(4.555 12.639)" fill="#fcd67b" font-size="11" font-family="SourceHanSansCN-Medium, Source Han Sans CN" font-weight="500" opacity="0.8"><tspan x="0" y="0">3</tspan></text>
+    </g>
+    <g id="_4" data-name="4" transform="translate(5626.331 1625.439)">
+      <ellipse id="TR-5" data-name="TR" cx="8.661" cy="8.661" rx="8.661" ry="8.661" transform="translate(0 0)" fill="#a01c26" opacity="0.8"/>
+      <text id="_4-2" data-name="4" transform="translate(4.555 12.639)" fill="#fcd67b" font-size="11" font-family="SourceHanSansCN-Medium, Source Han Sans CN" font-weight="500" opacity="0.8"><tspan x="0" y="0">4</tspan></text>
+    </g>
+    <g id="_3-2" data-name="3" transform="translate(5662.9 1573.261)">
+      <ellipse id="TR-6" data-name="TR" cx="8.661" cy="8.661" rx="8.661" ry="8.661" transform="translate(0 0)" fill="#a01c26" opacity="0.8"/>
+      <text id="_5-2" data-name="5" transform="translate(4.555 12.639)" fill="#fcd67b" font-size="11" font-family="SourceHanSansCN-Medium, Source Han Sans CN" font-weight="500" opacity="0.8"><tspan x="0" y="0">5</tspan></text>
+    </g>
+    <g id="_2-2" data-name="2" transform="translate(5718.327 1562.561)">
+      <ellipse id="TR-7" data-name="TR" cx="8.661" cy="8.661" rx="8.661" ry="8.661" transform="translate(0 0)" fill="#a01c26" opacity="0.8"/>
+      <text id="_6-2" data-name="6" transform="translate(4.555 12.639)" fill="#fcd67b" font-size="11" font-family="SourceHanSansCN-Medium, Source Han Sans CN" font-weight="500" opacity="0.8"><tspan x="0" y="0">6</tspan></text>
+    </g>
+    <g id="_1-2" data-name="1" transform="translate(5810.126 1543.161)">
+      <ellipse id="TR-8" data-name="TR" cx="8.661" cy="8.661" rx="8.661" ry="8.661" transform="translate(0 0)" fill="#a01c26" opacity="0.8"/>
+      <text id="_7-2" data-name="7" transform="translate(4.555 12.639)" fill="#fcd67b" font-size="11" font-family="SourceHanSansCN-Medium, Source Han Sans CN" font-weight="500" opacity="0.8"><tspan x="0" y="0">7</tspan></text>
+    </g>
+  </g>
+</svg>

src/components/collection.vue

@@ -2,17 +2,22 @@
   <ul class="con">
     <li class="item" v-for="(item,i) in list"  @click="handleClick(item)" :key="i">
       <div class="card-img">
-        <img class="full" :src="item.imgstr||require('@/assets/images/myModel.jpg')" alt="" />
-        <img class="real" :src="item.imgstr||require('@/assets/images/myModel.jpg')" alt="" />
+        <img class="full" :src="$serverName+item.thumb" alt="" />
+        <img class="real" :src="$serverName+item.thumb" alt="" />
       </div>
       <div class="card-txt">
         <div class="title">
           <span :title="item.name">{{ item.name||'名字' }}</span>
+          <span class="tag">{{$type[item.type]||'暂无类别'}}</span>
         </div>
       </div>
     </li>
     <div v-if="list.length<=0" class="no-record">
-      暂无数据
+      <img class="bg" :src="require('@/assets/images/icon/norecoedbg.png')" alt="">
+      <div class="rccon">
+        <img :src="require('@/assets/images/icon/ic_error_24px.png')" alt="">
+        <span>暂无数据</span>
+      </div>
     </div>
   </ul>
 </template>
@@ -33,7 +38,7 @@ export default {
   methods:{
     handleClick(item){
       this.$showBroadcast({item})
-      this.$emit('toggle',false)
+      this.$bus.$emit('fadeCollect',false)
     }
   }
 };
@@ -49,7 +54,6 @@ export default {
   width: calc((100% - @margin * 3) / 4);
   margin-right: @margin;
   margin-bottom: @margin;
-  background: #FFFFFF;
   border-radius: 8px;
   overflow: hidden;
   cursor: pointer;
@@ -65,7 +69,10 @@ export default {
       height: 100%;
     }
     .full {
-      opacity: 0;
+      opacity: 1;
+      width: 100%;
+      height: 100%;
+      filter: blur(0px);
     }
     .real {
       position: absolute;
@@ -80,23 +87,52 @@ export default {
     justify-content: space-between;
     align-items: center;
     font-size: 14px;
-    padding: 8px 10px;
     color: #333;
+    background: #C2C2C2;
     width: 100%;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    .tag {
-      color: @theme;
-    }
-    div{
-      overflow: hidden;
-      text-overflow:ellipsis;
-      white-space: nowrap;
+    >div{
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      span{
+        overflow: hidden;
+        padding: 8px 10px;
+        text-overflow:ellipsis;
+        white-space: nowrap;
+        &:first-of-type{
+          flex: 3;
+        }
+      }
+      .tag{
+        flex: 1;
+        background: #A01C26;
+        color: rgba(255, 255, 255, 0.5);
+      }
     }
   }
 }
 
+.no-record{
+  position: relative;
+  margin: 10vh auto 0!important;
+  .bg{
+    width: 300px;
+  }
+  .rccon{
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%,-50%);
+      >span{
+        display: block;
+        margin-top: 10px;
+      }
+    }
+}
 
 @media screen and (min-width: 500px) and (max-width: 1400px) {
   .item {

src/components/mapsvg.vue

@@ -0,0 +1,395 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="309.97"
+    height="202.727"
+    viewBox="0 0 309.97 202.727"
+  >
+    <g id="Ditu" transform="translate(-5570.5 -1510.5)">
+      <g id="_10" data-name="10" transform="translate(3975 1424)">
+        <g id="GROUP2" transform="translate(-5394.721 -3532.733)" opacity="0.7">
+          <path
+            id="LJ"
+            d="M7015.816,3643.817c3.868-3.868,5.753-5.928,5.753-9.69v-4.764a9.562,9.562,0,0,1,2.4-6.351h-17.645a4.8,4.8,0,0,0-3.414,1.414l-7.5,7.5a4.793,4.793,0,0,0-1.414,3.413v29.884C6997.8,3661.508,7012.456,3647.177,7015.816,3643.817Z"
+            fill="#a01c26"
+          />
+        </g>
+        <g
+          id="_10-2"
+          data-name="10"
+          transform="translate(-5394.721 -3532.733)"
+          opacity="0.7"
+        >
+          <path
+            id="LJ-2"
+            data-name="LJ"
+            d="M6993.1,3811.586l7.5,7.5a8.106,8.106,0,0,0,5.732,2.374h277.758a8.106,8.106,0,0,0,5.732-2.374l7.5-7.5a8.106,8.106,0,0,0,2.374-5.732V3635.339a8.107,8.107,0,0,0-2.374-5.732l-7.5-7.5a8.106,8.106,0,0,0-5.732-2.374H7043.676c-.232,0-.463.012-.692.032h-11.817a9.6,9.6,0,0,0-9.6,9.6v4.764c0,3.762-1.885,5.822-5.753,9.69s-22.72,22.29-22.72,22.29a8.107,8.107,0,0,0-2.375,5.733v134.014A8.1,8.1,0,0,0,6993.1,3811.586Z"
+            fill="#1a1311"
+            stroke="#a01c26"
+            stroke-width="1"
+          />
+        </g>
+        <g id="GROUP1" transform="translate(-11.986 5)">
+          <path
+            id="LJ-3"
+            data-name="LJ"
+            d="M7004.394,3684.906v85.157a24.721,24.721,0,0,0,7.24,17.479l22.867,22.867a24.721,24.721,0,0,0,17.479,7.241h221.565"
+            transform="translate(-5387.721 -3539.733)"
+            fill="none"
+            stroke="#a01c26"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-miterlimit="10"
+            stroke-width="1.5"
+            opacity="0.88"
+          />
+          <g
+            id="TR"
+            transform="translate(1611.266 135.173)"
+            fill="none"
+            stroke="#a01c26"
+            stroke-width="1.5"
+          >
+            <circle cx="5" cy="5" r="5" stroke="none" />
+            <circle cx="5" cy="5" r="4.25" fill="none" />
+          </g>
+        </g>
+      </g>
+      <g id="_9" data-name="9">
+        <path
+          id="LJ7"
+          d="M5658.612,5027.335h23.727v-46.718l-23.727.041Z"
+          transform="translate(31.855 -3372.868)"
+          fill="#fcd67b"
+          opacity="0.5"
+          style="isolation: isolate"
+        />
+      </g>
+      <g id="_8" data-name="8">
+        <rect
+          id="JX"
+          width="63.266"
+          height="50.358"
+          transform="translate(5781.287 1604.109)"
+          fill="#fcd67b"
+          opacity="0.5"
+          style="isolation: isolate"
+        />
+      </g>
+      <g id="_2"  @click="handleClick(2)" data-name="2">
+        <path
+          id="LJ2"
+          d="M5747.5,5040.909v-10.05h-88.884v35.631h84.9a.4.4,0,0,1,.048-.025,4.018,4.018,0,0,0,4-4.009v-21.546Z"
+          transform="translate(31.855 -3374.453)"
+          fill="#fcd67b"
+          opacity="0.8"
+          style="isolation: isolate"
+        />
+        <g id="_7" data-name="7" transform="translate(5726.276 1665.964)">
+          <ellipse
+            id="TR-2"
+            data-name="TR"
+            cx="8.661"
+            cy="8.661"
+            rx="8.661"
+            ry="8.661"
+            transform="translate(0 0)"
+            fill="#a01c26"
+            opacity="0.8"
+          />
+          <text
+            id="_2-2"
+            data-name="2"
+            transform="translate(4.555 13.008)"
+            fill="#fcd67b"
+            font-size="13"
+            font-family="SourceHanSansCN-Medium, Source Han Sans CN"
+            font-weight="500"
+            opacity="0.8"
+          >
+            <tspan x="0" y="0">2</tspan>
+          </text>
+        </g>
+      </g>
+      <g id="_3" @click="handleClick(3)" data-name="3">
+        <path
+          id="LJ3"
+          d="M5618.642,5053.968h-4.7v-10h-21.727v-13.107h-18.462v30.357l5.651,5.275h12.964v-7.856h4.046v15.146H5614.9v-7.289h39.09v-35.632h-35.348Z"
+          transform="translate(34.535 -3374.453)"
+          fill="#fcd67b"
+          opacity="0.8"
+          style="isolation: isolate"
+        />
+        <g id="_5" data-name="5" transform="translate(5662.9 1665.964)">
+          <path
+            id="TR-3"
+            data-name="TR"
+            d="M8.661,0A8.661,8.661,0,1,1,0,8.661,8.661,8.661,0,0,1,8.661,0Z"
+            transform="translate(0 0)"
+            fill="#a01c26"
+            opacity="0.8"
+          />
+          <text
+            id="_3-2"
+            data-name="3"
+            transform="translate(4.555 12.639)"
+            fill="#fcd67b"
+            font-size="11"
+            font-family="SourceHanSansCN-Medium, Source Han Sans CN"
+            font-weight="500"
+            opacity="0.8"
+          >
+            <tspan x="0" y="0">3</tspan>
+          </text>
+        </g>
+      </g>
+      <g id="_4"  @click="handleClick(4)" data-name="4">
+        <path
+          id="LJ4"
+          d="M5612.178,4986.638h-18.215v.734a6.9,6.9,0,0,1-.759.04h-.1c-2.4,0-8.76-.687-15.984-7.032h-.01a2,2,0,0,0-1.32-.5,2.025,2.025,0,0,0-2.022,2.014h-.011v23.675a2.528,2.528,0,0,0,2.468,2.538l.006.008h17.736v3.3h-17.34a2.867,2.867,0,0,0-2.864,2.863v.062l-.006,0v12.97h38.425Z"
+          transform="translate(34.535 -3372.844)"
+          fill="#fcd67b"
+          opacity="0.8"
+          style="isolation: isolate"
+        />
+        <g id="_4-2" data-name="4" transform="translate(5626.331 1625.439)">
+          <ellipse
+            id="TR-4"
+            data-name="TR"
+            cx="8.661"
+            cy="8.661"
+            rx="8.661"
+            ry="8.661"
+            transform="translate(0 0)"
+            fill="#a01c26"
+            opacity="0.8"
+          />
+          <text
+            id="_4-3"
+            data-name="4"
+            transform="translate(4.555 12.639)"
+            fill="#fcd67b"
+            font-size="11"
+            font-family="SourceHanSansCN-Medium, Source Han Sans CN"
+            font-weight="500"
+            opacity="0.8"
+          >
+            <tspan x="0" y="0">4</tspan>
+          </text>
+        </g>
+      </g>
+      <g id="_5-2"  @click="handleClick(5)" data-name="5">
+        <path
+          id="LJ6"
+          d="M5593.987,4982.634v.649H5612.2V4964h6.337v8.983h40.322v-37.994h-40.168v7.652h-24.329a20,20,0,0,0-.377,40Z"
+          transform="translate(34.512 -3371.427)"
+          fill="#fcd67b"
+          opacity="0.8"
+          style="isolation: isolate"
+        />
+        <g id="_3-3" data-name="3" transform="translate(5662.9 1573.261)">
+          <ellipse
+            id="TR-5"
+            data-name="TR"
+            cx="8.661"
+            cy="8.661"
+            rx="8.661"
+            ry="8.661"
+            transform="translate(0 0)"
+            fill="#a01c26"
+            opacity="0.8"
+          />
+          <text
+            id="_5-3"
+            data-name="5"
+            transform="translate(4.555 12.639)"
+            fill="#fcd67b"
+            font-size="11"
+            font-family="SourceHanSansCN-Medium, Source Han Sans CN"
+            font-weight="500"
+            opacity="0.8"
+          >
+            <tspan x="0" y="0">5</tspan>
+          </text>
+        </g>
+      </g>
+      <g id="_6"  @click="handleClick(6)" data-name="6">
+        <path
+          id="LJ5"
+          d="M5678.455,4972.729v-27.724h6.233v12.479h22.5v-30.4h-43.579v45.642h14.844Z"
+          transform="translate(31.698 -3371.177)"
+          fill="#fcd67b"
+          opacity="0.8"
+          style="isolation: isolate"
+        />
+        <g id="_2-3" data-name="2" transform="translate(5718.327 1562.561)">
+          <ellipse
+            id="TR-6"
+            data-name="TR"
+            cx="8.661"
+            cy="8.661"
+            rx="8.661"
+            ry="8.661"
+            transform="translate(0 0)"
+            fill="#a01c26"
+            opacity="0.8"
+          />
+          <text
+            id="_6-2"
+            data-name="6"
+            transform="translate(4.555 12.639)"
+            fill="#fcd67b"
+            font-size="11"
+            font-family="SourceHanSansCN-Medium, Source Han Sans CN"
+            font-weight="500"
+            opacity="0.8"
+          >
+            <tspan x="0" y="0">6</tspan>
+          </text>
+        </g>
+      </g>
+      <g id="_7-2"  @click="handleClick(7)" data-name="7">
+        <path
+          id="LJ1"
+          d="M5762.25,4904.859v14.468h-51.638v37.457h14.782V4944.24h6.231v16.818h17.51v-24.672h24.032a14.454,14.454,0,0,1,14.412,14.411v.09c0,.107,0,.149-.005.3v.028a1.329,1.329,0,0,0,1.328,1.326,1.292,1.292,0,0,0,.55-.122,45.571,45.571,0,0,0,14.43-9.44,35.88,35.88,0,0,0,7.748-11.113,33.869,33.869,0,0,0,2.592-9.035,22.376,22.376,0,0,0,.244-3.729v-14.243Z"
+          transform="translate(30.213 -3370.475)"
+          fill="#fcd67b"
+          opacity="0.8"
+          style="isolation: isolate"
+        />
+        <g id="_1" data-name="1" transform="translate(5810.126 1543.161)">
+          <ellipse
+            id="TR-7"
+            data-name="TR"
+            cx="8.661"
+            cy="8.661"
+            rx="8.661"
+            ry="8.661"
+            transform="translate(0 0)"
+            fill="#a01c26"
+            opacity="0.8"
+          />
+          <text
+            id="_7-3"
+            data-name="7"
+            transform="translate(4.555 12.639)"
+            fill="#fcd67b"
+            font-size="11"
+            font-family="SourceHanSansCN-Medium, Source Han Sans CN"
+            font-weight="500"
+            opacity="0.8"
+          >
+            <tspan x="0" y="0">7</tspan>
+          </text>
+        </g>
+      </g>
+      <g id="_1-2"  @click="handleClick(1)" data-name="1" opacity="0.8">
+        <path
+          id="LJ8"
+          d="M5748.347,4964.89h-17.51v.023h-45.192v61.925h62.7v-50.357h0Z"
+          transform="translate(31.001 -3372.371)"
+          fill="#fcd67b"
+          style="isolation: isolate"
+        />
+        <g id="_1-5" data-name="1" transform="translate(3974.663 1422.167)">
+          <ellipse
+            id="TR-8"
+            data-name="TR"
+            cx="8.661"
+            cy="8.661"
+            rx="8.661"
+            ry="8.661"
+            transform="translate(1764.337 190.833)"
+            opacity="0.8"
+            fill="#a01c26"
+          />
+        </g>
+        <text
+          id="_1-6"
+          data-name="1"
+          transform="translate(5744 1626)"
+          fill="#fcd67b"
+          font-size="13"
+          font-family="SourceHanSansCN-Medium, Source Han Sans CN"
+          opacity="0.8"
+          font-weight="500"
+        >
+          <tspan x="0" y="0">1</tspan>
+        </text>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script>
+let data = {
+  1:{
+    id:'20d76961641346d9885a56261bb3d83c',
+    lookat:'8aeff58bce4b4b68b58bb07d84e39df8'
+  },
+  2:{
+    id:'fa0c42b9245e4fadb2ba3d4dd212b45a',
+    lookat:'5c749805e878411cb4899e9d15073452'
+  },
+  3:{
+    id:'772de4cad34342669fc3f6bf28383bfa',
+    lookat:'e9ef309ee81b47cba82f3b4c29c35bc1'
+  },
+  4:{
+    id:'1aae98d557e54334be68a81081480f76',
+    lookat:'387e65de6eb7449790ef737bd733dbe1'
+  },
+  5:{
+    id:'b2a4c12c3be14a75aa63f66bab43649d',
+    lookat:'a6765a0f2b0d4babba659417518c1346'
+  },
+  6:{
+    id:'cac901ab8e654cce913c0941290900e5',
+    lookat:'6bd12dff135349a68d734b076b173a4d'
+  },
+  7:{
+    id:'0a1ef71ae39349bd8ca207b730c3bb01',
+    lookat:'25469284bbaa4c4f89c24235df164b93'
+  }
+}
+export default {
+  methods:{
+    handleClick(item){
+      player.flyToPano({
+        pano:player.model.panos.index[data[item].id],
+        lookAtPoint:player.model.panos.index[data[item].lookat].position
+      })
+      window.stopTour()
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+// #a01c26
+#Ditu{
+  >g{
+    &:not(#_10,#_9,#_8){
+      cursor: pointer;
+      &:hover{
+        >path{
+          fill: #a01c26;
+        
+        }
+        >g{
+          >path{
+            fill: #fcd67b;
+          }
+        }
+        ellipse{
+          fill: #fcd67b;
+        }
+        text{
+          fill: #a01c26;
+        }
+      }
+    }
+  }
+
+}
+</style>

src/components/pagination/index.vue

@@ -27,7 +27,7 @@
       <span @click="current = current + 1"><img class="pagejiantou" :src="require(`@/assets/images/icon/next_r.png`)" alt=""></span>
     </div>
     
-    <div>
+    <div v-if="false">
       <span>前往</span>
       <input
         type="text"
@@ -132,11 +132,13 @@ export default {
     margin: 0 10px;
     padding: 0 6px;
     &.active {
-      background: @theme;
+      background: #fff;
+      color: #000;
     }
   }
   .pagejiantou{
-    width: 5px;
+    width: 10px;
+    transform: translateY(-2px);
     cursor: pointer;
   }
 

src/components/popupLayout/Broadcast.vue

@@ -1,10 +1,13 @@
 <template>
   <div class="wrapper">
     <div class="ui-broadcast" @click="close">
-      <img class="close"  @click="close" :src="require('@/assets/images/icon/close.png')">
       <div class="ui-con" @click.stop>
-        <div class="img-con img-k">
-          <iframe :src="item.link" frameborder="0"></iframe>
+        <img class="bg" :src="require('@/assets/images/collect_bg.png')">
+        <img class="close"  @click="close" :src="require('@/assets/images/icon/close.png')">
+        <div class="img-con img-k" >
+          <iframe v-if="item.type == 'model'" :src="$serverName+`/model-page/Model.html?m=${getLastName(item.filePath)}`" frameborder="0"></iframe>
+          <img v-else-if="item.type == 'img'" :src="$serverName+item.filePath" alt="">
+          <video controlslist="nodownload" disablePictureInPicture controls autoplay v-else :src="$serverName+item.filePath"></video>
         </div>
       </div>
      <div class="full" v-if="isFull" @click.stop>
@@ -24,9 +27,12 @@ export default {
     console.log(this.item);
   },
   methods:{
+    getLastName(data){
+      return data.substring(data.lastIndexOf("/")+1)
+    },
     close(){
       this.$hideBroadcast()
-      this.$bus.$emit('showHover',true)
+      this.$bus.$emit('fadeCollect',true)
     }
   }
 };
@@ -42,25 +48,35 @@ export default {
   top: 0;
   left: 0;
   width: 100%;
-  .close{
-    position: absolute;
-    top: 85px;
-    right: 10%;
-    width: 36px;
-    cursor: pointer;
-    z-index: 9999;
-  }
+ 
   .ui-con{
     top: 48%;
     left: 50%;
     transform: translate(-50%,-50%);
     text-align: center;
-    width: 60%;
+    width: 80%;
+    padding: 80px 140px;
     position: relative;
     font-size: 0;
     border-radius: 10px;
     overflow: hidden;
     box-sizing: border-box;
+     .bg{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+      }
+      .close{
+        position: absolute;
+        bottom: 50px;
+        right: 50px;
+        width: 20px;
+        cursor: pointer;
+        z-index: 9999;
+      }
     iframe,video{
       width: 100%;
       min-height: 550px;
@@ -124,7 +140,6 @@ export default {
       }
     }
   }
- 
 }
 }
 </style>

src/components/popupLayout/Map.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="wrapper">
+    <div class="ui-broadcast" @click="close">
+      <div class="ui-con" @click.stop>
+        <mapsvg class="msvg"/>
+        <img class="close"  @click="close" :src="require('@/assets/images/icon/close.png')">
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import mapsvg from '@/components/mapsvg.vue';
+
+export default {
+  data(){
+    return {
+    };
+  },
+  components:{mapsvg},
+  mounted(){
+    console.log(this.item);
+  },
+  methods:{
+    close(){
+      this.$hideMap()
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import '../../assets/style/globalVars.less';
+
+.ui-broadcast{
+  height: 100%;
+  position: fixed;
+  z-index: 9999;
+  top: 0;
+  left: 0;
+  width: 100%;
+ 
+  .ui-con{
+    top: 48%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    text-align: center;
+    width: 800px;
+    padding: 0;
+    position: relative;
+    font-size: 0;
+    border-radius: 10px;
+    overflow: hidden;
+    box-sizing: border-box;
+     .bg{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+      }
+      .close{
+        position: absolute;
+        top: 50px;
+        left: 40px;
+        width: 20px;
+        cursor: pointer;
+        z-index: 9999;
+      }
+    .msvg{
+      width: 100%;
+      min-height: 550px;
+    }
+  }
+
+}
+
+@media screen and (max-width: 500px) {
+  .ui-broadcast{
+  .close{
+    position: absolute;
+    bottom: 57px;
+    top: unset;
+    left: 50%;
+    right: unset;
+    transform: translateX(-50%);
+    width: 22px;
+    cursor: pointer;
+    z-index: 9999;
+  }
+  .ui-con{
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    border-radius: 0;
+    transform: none;
+    .img-con{
+      height: 100%;
+      iframe,video{
+        width: 100%;
+        height: 100%;
+      }
+      img{
+        width: 100%;
+        height: auto;
+      }
+    }
+  }
+}
+}
+</style>

src/components/popupLayout/index.js

@@ -1,10 +1,13 @@
 import Vue from 'vue'
 import UILoading from './Loading.vue'
 import UIBroadcast from './Broadcast.vue'
+import UIMap from './Map.vue'
 
 
 const Loading = Vue.extend(UILoading)
 const Broadcast = Vue.extend(UIBroadcast)
+const Map = Vue.extend(UIMap)
+
 
 
 let loadingInstance = ''
@@ -54,3 +57,29 @@ export function $hideBroadcast() {
         broadcastInstance = ''
     }
 }
+
+
+let mapInstance = ''
+export function $showMap(data={}) {
+    if (mapInstance) {
+        return
+    }
+    mapInstance = new Map({
+        data
+    }).$mount()
+
+    document.body.appendChild(mapInstance.$el)
+
+    Vue.nextTick(() => {
+        mapInstance.show = true
+    })
+}
+
+export function $hideMap() {
+    if (mapInstance) {
+        document.body.removeChild(mapInstance.$el)
+        mapInstance = ''
+    }
+}
+
+

src/components/svg.vue

@@ -179,6 +179,13 @@ export default {
             window.player.on("mode.changed", (e,t)=> {
                 this.modeActive = t
             })
+
+            // 监听点位变化
+            // window.player.on("flying.ended", (pano1, position, pano)=> {
+            //   console.log(pano.id);
+            //   console.log("======");
+
+            // })
           }
         }, false);
       })
@@ -201,6 +208,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+svg{
+  pointer-events: auto;
+}
 .disable{
   *{
     pointer-events: none!important;

src/data/collection.js

@@ -1,571 +0,0 @@
-const data = [
-  /*
-  第一展区
-  name 藏品名称
-  describe 藏品描述
-  type 1-> 第一展区，以此类推
-  id 序号
-  link 三维建模链接地址
-  img 藏品封面图
-  */
-  {
-      name: '第三次党代会精神传达提纲',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 1,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc49&v=1',
-      img: '1'
-  },
-
-  {
-      name: '政治工作部宣传处呈批件',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 2,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc50&v=1',
-      img: '2'
-  },
-
-  {
-      name: '总政治部呈批件',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 3,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc51&v=1',
-      img: '3'
-  },
-
-  {
-      name: '四川省总队通报',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 4,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc61&v=1',
-      img: '4'
-  },
-
-  {
-      name: '四川省总队通令',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 5,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc63&v=1',
-      img: '5'
-  },
-
-  {
-      name: '帮助武警部队发展农副业生产的通知',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 6,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc64&v=1',
-      img: '6'
-  },
-
-  {
-      name: '中共中央批转公安部党组通知',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 7,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc73&v=1',
-      img: '7'
-  },
-
-  {
-      name: '一份交接书',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 8,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc74&v=1',
-      img: '8'
-  },
-
-  {
-      name: '交接书封面',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 9,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc75&v=1',
-      img: '9'
-  },
-
-  {
-      name: '四川省公安厅文件',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 10,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc76&v=1',
-      img: '10'
-  },
-
-  {
-      name: '领导管理体制的决定',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 11,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc78&v=1',
-      img: '11'
-  },
-
-  {
-      name: '执勤部队交接书',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 12,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc90&v=1',
-      img: '12'
-  },
-
-  {
-      name: '传真电报',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 13,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc109&v=1',
-      img: '13'
-  },
-
-  {
-      name: '政治部批复',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 14,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc111&v=1',
-      img: '14'
-  },
-
-  {
-      name: '关于平息成都严重骚乱事件的战斗报告',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 15,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc112&v=1',
-      img: '15'
-  },
-
-  {
-      name: '关于赴藏执行紧急任务的指示',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 16,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc113&v=1',
-      img: '16'
-  },
-
-  {
-      name: '关于持续兴起学习贯彻党的十九大精神',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 17,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc119&v=1',
-      img: '17'
-  },
-
-  {
-      name: '关于认真学习贯彻党的十九大精神的实施方案',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 18,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc120&v=1',
-      img: '18'
-  },
-
-  {
-      name: '十九大精神阶段性总结',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 19,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc121&v=1',
-      img: '19'
-  },
-
-  {
-      name: '十九大宣传工作措施',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 1,
-      id: 20,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc122&v=1',
-      img: '20'
-  },
-
-  /*
-  第二展区
-  name 藏品名称
-  describe 藏品描述
-  type 1-> 第一展区，以此类推
-  id 序号
-  link 三维建模链接地址
-  img 藏品封面图
-  */
- {
-  name: '第三次党代会精神传达提纲',
-  describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-  type: 2,
-  id: 1,
-  link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc49&v=1',
-  img: '1'
-  },
-
-  {
-      name: '政治工作部宣传处呈批件',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 2,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc50&v=1',
-      img: '2'
-  },
-
-  {
-      name: '总政治部呈批件',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 3,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc51&v=1',
-      img: '3'
-  },
-
-  {
-      name: '四川省总队通报',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 4,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc61&v=1',
-      img: '4'
-  },
-
-  {
-      name: '四川省总队通令',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 5,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc63&v=1',
-      img: '5'
-  },
-
-  {
-      name: '帮助武警部队发展农副业生产的通知',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 6,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc64&v=1',
-      img: '6'
-  },
-
-  {
-      name: '中共中央批转公安部党组通知',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 7,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc73&v=1',
-      img: '7'
-  },
-
-  {
-      name: '一份交接书',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 8,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc74&v=1',
-      img: '8'
-  },
-
-  {
-      name: '交接书封面',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 9,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc75&v=1',
-      img: '9'
-  },
-
-  {
-      name: '四川省公安厅文件',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 10,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc76&v=1',
-      img: '10'
-  },
-
-  {
-      name: '领导管理体制的决定',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 11,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc78&v=1',
-      img: '11'
-  },
-
-  {
-      name: '执勤部队交接书',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 12,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc90&v=1',
-      img: '12'
-  },
-
-  {
-      name: '传真电报',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 13,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc109&v=1',
-      img: '13'
-  },
-
-  {
-      name: '政治部批复',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 14,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc111&v=1',
-      img: '14'
-  },
-
-  {
-      name: '关于平息成都严重骚乱事件的战斗报告',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 15,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc112&v=1',
-      img: '15'
-  },
-
-  {
-      name: '关于赴藏执行紧急任务的指示',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 16,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc113&v=1',
-      img: '16'
-  },
-
-  {
-      name: '关于持续兴起学习贯彻党的十九大精神',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 17,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc119&v=1',
-      img: '17'
-  },
-
-  {
-      name: '关于认真学习贯彻党的十九大精神的实施方案',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 18,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc120&v=1',
-      img: '18'
-  },
-
-  {
-      name: '十九大精神阶段性总结',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 19,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc121&v=1',
-      img: '19'
-  },
-
-  {
-      name: '十九大宣传工作措施',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 2,
-      id: 20,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc122&v=1',
-      img: '20'
-  },
-
-  /*
-      第三展区
-      name 藏品名称
-      describe 藏品描述
-      type 1-> 第一展区，以此类推
-      id 序号
-      link 三维建模链接地址
-      img 藏品封面图
-      */
-  {
-      name: '第三次党代会精神传达提纲',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 1,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc49&v=1',
-      img: '1'
-  },
-
-  {
-      name: '政治工作部宣传处呈批件',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 2,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc50&v=1',
-      img: '2'
-  },
-
-  {
-      name: '总政治部呈批件',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 3,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc51&v=1',
-      img: '3'
-  },
-
-  {
-      name: '四川省总队通报',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 4,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc61&v=1',
-      img: '4'
-  },
-
-  {
-      name: '四川省总队通令',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 5,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc63&v=1',
-      img: '5'
-  },
-
-  {
-      name: '帮助武警部队发展农副业生产的通知',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 6,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc64&v=1',
-      img: '6'
-  },
-
-  {
-      name: '中共中央批转公安部党组通知',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 7,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc73&v=1',
-      img: '7'
-  },
-
-  {
-      name: '一份交接书',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 8,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc74&v=1',
-      img: '8'
-  },
-
-  {
-      name: '交接书封面',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 9,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc75&v=1',
-      img: '9'
-  },
-
-  {
-      name: '四川省公安厅文件',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 10,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc76&v=1',
-      img: '10'
-  },
-
-  {
-      name: '领导管理体制的决定',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 11,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc78&v=1',
-      img: '11'
-  },
-
-  {
-      name: '执勤部队交接书',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 12,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc90&v=1',
-      img: '12'
-  },
-
-  {
-      name: '传真电报',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 13,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc109&v=1',
-      img: '13'
-  },
-
-  {
-      name: '政治部批复',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 14,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc111&v=1',
-      img: '14'
-  },
-
-  {
-      name: '关于平息成都严重骚乱事件的战斗报告',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 15,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc112&v=1',
-      img: '15'
-  },
-
-  {
-      name: '关于赴藏执行紧急任务的指示',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 16,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc113&v=1',
-      img: '16'
-  },
-
-  {
-      name: '关于持续兴起学习贯彻党的十九大精神',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 17,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc119&v=1',
-      img: '17'
-  },
-
-  {
-      name: '关于认真学习贯彻党的十九大精神的实施方案',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 18,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc120&v=1',
-      img: '18'
-  },
-
-  {
-      name: '十九大精神阶段性总结',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 19,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc121&v=1',
-      img: '19'
-  },
-
-  {
-      name: '十九大宣传工作措施',
-      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
-      type: 3,
-      id: 20,
-      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc122&v=1',
-      img: '20'
-  },
-
-]
-
-export default { data }

src/main.js

@@ -2,11 +2,19 @@ import Vue from 'vue'
 import App from './App.vue'
 import '@/mixins'
 import router from './router'
+import {axios, serverLocation} from './utils/http'
 
 
 
 Vue.config.productionTip = false
+Vue.prototype.$http = axios
+Vue.prototype.$serverName = serverLocation
 
+Vue.prototype.$type = {
+  model:'实物模型',
+  img:'专题图库',
+  video:'视频档案'
+}
 
 
 new Vue({

src/mixins/index.js

@@ -4,7 +4,9 @@ import browser from '@/utils/browser'
 import {
   $showLoading,
   $showBroadcast,
+  $showMap,
   $hideBroadcast,
+  $hideMap
 } from '@/components/popupLayout'
 
 Vue.prototype.$bus = new Vue()
@@ -19,7 +21,9 @@ Vue.mixin({
     methods: {
       $showLoading,
       $showBroadcast,
-      $hideBroadcast
+      $hideBroadcast,
+      $hideMap,
+      $showMap
     }
 })
 

src/pages/Home.vue

@@ -57,6 +57,23 @@
         
     </div>
 
+    <div v-show="showMenu" @click.stop @keydown.stop @keyup.stop>
+        <div class="topright">
+            <div class="map" @click="openMap">
+                <mapsvg class="mapsvg" @click.stop/>
+                <!-- <img :src="require('@/assets/images/group.svg')" alt=""> -->
+            </div>
+            <div class="search-con">
+                <input @keyup.enter="isShow=true" v-model="key" placeholder="搜索文物" type="text">
+                <img @click="isShow=true" :src="require('@/assets/images/search_w.png')" alt="">
+            </div>
+        </div>
+
+        <!-- 文物搜索 -->
+        <collection :seachKey="key" class="collect" :style="{opacity:!isFade?0:1}" v-if="isShow"/>
+    </div>
+
+
     <!-- 新菜单 -->
     <div class="n-menu" v-show="showMenu">
         <m-svg/>
@@ -81,8 +98,11 @@ import vError from '@/views/gui/error';
 import vrCon from '@/views/gui/vrcon';
 import vOther from '@/views/gui/other';
 import svg from '@/components/svg.vue';
+import mapsvg from '@/components/mapsvg.vue';
+
 
 import vGuide from '@/views/gui/newguide';
+import collection from '@/views/collection'
 
 
 export default {
@@ -99,22 +119,49 @@ export default {
       vError,
       vrCon,
       vOther,
+      collection,
     "m-svg":svg,
-    vGuide
+    vGuide,
+    mapsvg
   },
 
   mounted(){
     this.$bus.$on('onShowPull',(data)=>{
       this.showPull = data
     })
+
+    this.$bus.$on('fadeCollect',data=>{
+        if (typeof data == Object) {
+          this.isFade = data.toggle
+        }
+        else{
+          this.isFade = data
+        }
+    })
+    this.$bus.$on('toggleCollect',data=>{
+        if (typeof data == Object) {
+          this.isShow = data.toggle
+        }
+        else{
+          this.isShow = data
+        }
+    })
     window.addEventListener('loadfinish',  ()=> {
         this.showMenu = true
     })
   },
+  methods:{
+      openMap(){
+          this.$showMap({})
+      }
+  },
   data(){
       return {
+          key:'',
           showPull:true,
-          showMenu:false
+          showMenu:false,
+          isShow:false,
+          isFade:true
       }
   }
 }
@@ -150,5 +197,56 @@ export default {
     bottom: 0;
     left: 0;
     width: 100%;
+    pointer-events: none;
+}
+
+.topright{
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    .map{
+        width: 300px;
+        cursor: pointer;
+        >.mapsvg{
+            width: 100%;
+            pointer-events: none!important;
+        }
+    }
+    .search-con{
+        padding: 10px;
+        background: rgba(0, 0, 0, 0.6);
+        position: relative;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-radius: 6px;
+        margin-top: 10px;
+        >input{
+            background:none;  
+            outline:none;  
+            border:none;
+            text-align: center;
+            width: calc(100% - 20px);
+            border-right: 1px dotted #fff;
+            &::placeholder{
+                color: rgba(255, 255, 255, 0.55);
+            }
+        }
+        >img{
+            width: 20px;
+            margin-left: 10px;
+            cursor: pointer;
+        }
+    }
+}
+
+.collect{
+    z-index: 999;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
 }
 </style>

src/utils/http.js

@@ -0,0 +1,76 @@
+import axios from 'axios'
+// import qs from 'qs'
+
+var isProduction = process.env.NODE_ENV === 'production'
+// 配置请求域名
+
+const serverName = isProduction ? '' : 'http://192.168.0.135:8009'
+
+const serverLocation = isProduction ? '' : 'http://8.135.106.227:8009/'
+
+axios.defaults.baseURL = serverName
+axios.defaults.headers['X-Requested-with'] = 'XMLHttpRequest'
+axios.defaults.headers['token'] =  window.localStorage.getItem('token')
+
+const expectUrls = ['/manage/file/upload']
+
+axios.interceptors.request.use(function (config) {
+
+  for (let i = 0; i < expectUrls.length; i++) {
+    const element = expectUrls[i];
+    if(element == config.url){
+      return config
+    }
+  }
+  if (config.method === 'post') {
+    config.data = {
+      ...config.data,
+      rnd: Math.random()
+    }
+    // config.data = qs.stringify(config.data)
+  } else if (config.method === 'get') {
+    config.params = {
+      rnd: Math.random(),
+      ...config.params
+    }
+    // config.params = qs.stringify(config.params)
+  }
+ 
+  return config
+}, function (error) {
+  // 对请求错误做些什么
+  return Promise.reject(error)
+})
+
+// 配置response拦截器
+axios.interceptors.response.use(
+  response => {
+    let data = response.data
+    let code = Number(response.data.code)
+    switch (code) {
+      case -1:
+        break
+        case 4500:
+          
+          break
+        case 5001:
+
+          break
+        case 5002:
+        
+          break
+        case 500:
+          
+          break
+      case 0:
+        break
+    }
+    // tryHideFullScreenLoading()
+    return data
+  },
+  error => {
+    
+    return Promise.reject(error)
+  }
+)
+export { serverName, axios, serverLocation }

src/views/collection/index.vue

@@ -1,17 +1,15 @@
 <template>
   <div>
-    <pc v-if="!isMobile"/>
-    <mobile v-else/>
+    <pc :seachKey="seachKey" tabindex=""/>
   </div>
 </template>
 
 <script>
 import pc from './pc'
-import mobile from './mobile'
 
 export default {
-  components:{pc, mobile}
-
+  props:['seachKey'],
+  components:{pc}
 }
 </script>
 

src/views/collection/pc.vue

@@ -1,28 +1,19 @@
 <template>
-  <div class="collection" v-show="isShow">
-    <img class="close" @click="$router.push({path:'/'})" :src="require('@/assets/images/icon/close.png')">
-    <div class="title-label">
-      <img :src="require('@/assets/images/icon/label.png')">
-      <h2>藏品搜索</h2>
-    </div>
+  <div class="collection">
+    <img class="bg" :src="require('@/assets/images/collect_bg.png')">
+    <img class="close" @click="$bus.$emit('toggleCollect',false)" :src="require('@/assets/images/icon/close.png')">
     <div class="bar1">
-      <div :class="{drawactive:isShowDraw}" @click="isShowDraw=!isShowDraw">
-        <div class="ui-input">{{current.name || '请选择单元'}}</div>
-        <img :src="require('@/assets/images/icon/xiala.png')">
-        <ul @click.stop>
-          <li @click="current = item,isShowDraw=false" v-for="(item,i) in typeLi" :key="i">{{item.name}}</li>
-        </ul>
-      </div>
-      <div>
-        <input @keyup.enter="getCollection" v-model="keyword" placeholder="请输入藏品名称" class="ui-input">
-        <img @click="getCollection" :src="require('@/assets/images/icon/search.png')">
+      <div class="search-con">
+          <input v-model="key" @keyup.enter="getCollection" placeholder="搜索文物" type="text">
+          <img @click="getCollection" :src="require('@/assets/images/search_w.png')" alt="">
       </div>
-      <button @click="getCollection" class="ui-button submit">搜索</button>
-      <button @click="keyword=''" class="ui-button default">重置</button>
     </div>
 
+    <ul class="typelist">
+      <li :class="{active:item.id==typeActive.id}" @click="typeActive=item" :key="i" v-for="(item,i) in typeLi">{{item.name}}</li>
+    </ul>
     <collection :data="list" @toggle="handleToggle"/>
-    <div class="paging">
+    <div v-if="list.length" class="paging">
           <Paging
             v-if="paging.total"
             style="text-align: center;"
@@ -36,7 +27,6 @@
 <script>
 import collection from '@/components/collection';
 import Paging from "@/components/pagination";
-import data from '@/data/collection.js';
 
 let W = window.innerWidth
 
@@ -45,10 +35,12 @@ export default {
     collection,
     Paging
   },
+  props:['seachKey'],
   data(){
     return {
       isShowDraw:false,
       isShow:true,
+      key:this.seachKey,
       paging: {
         pageSize: W>1400?8:6,
         pageNum: 1,
@@ -82,191 +74,164 @@ export default {
           name:'第六展区  丰碑永铸厅'
         }
       ],
-      current:{
-          id:1,
-          name:'第一展区  序厅'
-      },
-      keyword:'',
-      currentKeyword:''
+      typeActive:'',
+      list:[]
     }
   },
   computed:{
-    list(){
-      let tmp = ''
-        if (!this.current) {
-          tmp = data.data
-        }
-        else{
-          tmp = data.data.filter(i=>i.type==this.current.id)
-        }
-        let filterKey = tmp.filter(i=>i.name.indexOf(this.currentKeyword) > -1)
-        let tt = filterKey.map(item=>{
-        item.imgstr = require(`@/assets/images/collection/${item.img}.png`)
-        return item
-        })
-        let ttt = tt.slice(this.paging.pageSize*(this.paging.pageNum-1),this.paging.pageSize*this.paging.pageNum)
-        return ttt
-    }
+    
   },
   watch:{
+    typeActive(){
+      this.getCollection()
+    },
     paging:{
       deep:true,
       handler:function (newVal) {
         console.log(newVal);
       }
-    },
-    current:{
-      immediate:true,
-      deep:true,
-      handler:function (newVal) {
-        let tmp = ''
-        if (!this.current) {
-          tmp = data.data
-        }
-        else{
-          tmp = data.data.filter(i=>i.type==newVal.id)
-        }
-        this.paging.total = tmp.length
-        this.paging.pageNum = 1
-        this.paging.current = 1
-      }
     }
   },
   methods:{
-    getCollection() {
-      this.currentKeyword = this.keyword
+    async getTypeLi(){
+      let result = await this.$http({
+        method: 'get',
+        url: '/api/web/zoneList'
+      })
+      if (result.code != 0) {
+        return alert('获取展区列表失败')
+      }
+      this.typeLi = result.data
+      this.typeActive = this.typeLi[0]
+      this.getCollection()
+    },
+    async getCollection() {
+      let params = {
+          pageNum:this.paging.current,
+          pageSize: this.paging.pageSize,
+          searchKey: this.key,
+          zoneId:this.typeActive.id
+      }
+
+      let result = await this.$http({
+        method: 'post',
+        data: params,
+        url: '/api/web/goodsList'
+      })
+      if (result.code != 0) {
+        return alert('获取文物列表失败')
+      }
+      this.list = result.data.list
+      this.paging.total = result.data.total
+      this.paging.pageNum = result.data.pageNum
     },
     handleToggle(data){
       this.isShow = data
     },
     pageChange(val){
       this.paging.pageNum = val
-      this.paging.current = val
     }
   },
   mounted(){
-    this.$bus.$on('showHover',()=>{
-      this.isShow = true
-    })
+    this.getTypeLi()
   }
 }
 </script>
 
 <style lang="less" scoped>
 .collection{
-  margin: 86px auto;
+  margin: 136px auto 0;
   width: 80%;
+  min-height: 74vh;
+  padding: 40px 80px;
   position: relative;
-  .close{
+  .bg{
+    width: 100%;
+    height: 100%;
     position: absolute;
     top: 0;
-    right: 0;
-    width: 36px;
+    left: 0;
+    z-index: -1;
+  }
+  .close{
+    position: absolute;
+    bottom: 50px;
+    right: 50px;
+    width: 20px;
     cursor: pointer;
     z-index: 9999;
   }
-  .title-label{
-    position: relative;
-    >img{
-      width: 285px;
-    }
-    >h2{
-      position: absolute;
-      top: 50%;
-      font-size: 30px;
-      left: 110px;
-      transform: translateY(-50%);
-    }
-  }
   .bar1{
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-top: 38px;
-    >div{
-      flex: 4;
-      position: relative;
-      cursor: pointer;
-      &:first-of-type{
-        flex: 3;
-        margin-right: 80px;
-        >img{
-          width: 20px;
-        }
-        >ul{
-          max-height: 0;
-          background: #fff;
-          color: #333;
-          border-radius: 10px;
-          position: absolute;
-          width: 100%;
-          top: 120%;
-          overflow: hidden;
-          transition: all ease 0.3s;
-          z-index: 999;
-          >li{
-            line-height: 40px;
-            padding: 0 14px;
-            height: 40px;
-            &:hover{
-              background: @theme;
-              color: #FFFFFF;
+    position: absolute;
+    top: -70px;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    .search-con{
+        padding: 10px;
+        background: rgba(0, 0, 0, 0.6);
+        position: relative;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-radius: 6px;
+        margin-top: 10px;
+        margin: 0 auto;
+        width: 40%;
+        >input{
+            background:none;  
+            outline:none;  
+            border:none;
+            text-align: center;
+            width: calc(100% - 20px);
+            border-right: 1px dotted #fff;
+            &::placeholder{
+                color: rgba(255, 255, 255, 0.55);
             }
-          }
-
         }
-      }
-      >img{
-        position: absolute;
-        top: 50%;
-        right: 20px;
-        transform: translateY(-50%);
-        transition: all ease 0.3s;
-        width: 25px;
-      }
+        >img{
+            width: 20px;
+            margin-left: 10px;
+            cursor: pointer;
+        }
     }
-    .drawactive{
-      >ul{
-        max-height: 250px!important;
-      }
-      >img{
-        transform: translateY(-50%) rotate(-180deg);
+  }
+  .typelist{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    overflow-x: auto;
+    overflow: hidden;
+    >li{
+      margin-right: 20px;
+      padding-right: 20px;
+      font-size: 16px;
+      line-height: 1;
+      cursor: pointer;
+      border-right: 1px solid rgba(255, 255, 255, 0.55);
+      &:last-of-type{
+        border-right: none;
+        padding-right: 0;
+        margin-right: 0;
       }
     }
-    .ui-button{
-      flex: 1;
-      &:first-of-type{
-        margin: 0 20px;
-      }
+    .active{
+      color: rgba(252, 214, 123, 1);
     }
   }
   .con{
     width: 100%;
     margin-top: 30px;
+    max-height: 57vh;
+    overflow-y: auto;
   }
-
-}
-
-@media screen and (min-width: 500px) and (max-width: 1400px) {
-  .collection{
-    margin: 26px auto;
-    .close{
-        top: 14px;
-    }
-    .title-label{
-      position: relative;
-      >img{
-        width: 205px;
-      }
-      
-      >h2{
-        position: absolute;
-        top: 50%;
-        font-size: 24px;
-        left: 74px;
-        transform: translateY(-50%);
-      }
-    }
+  .paging{
+    margin-top: 20px;
   }
 }
+
 </style>

src/views/gui/newguide.vue

@@ -120,16 +120,14 @@ export default {
   },
   computed: {
     swiper() {
-        return this.$refs.listSwiper.$swiper
+        return this.$refs.listSwiper.$swiper || ''
     }
   },
   methods:{
     slide(type){
-      console.log(type,'111111');
       this.swiper[type]()
     },
     gotoLight(item){
-      console.log(item,'1111'); 
       player.director.goToHighlight(this.hoverIdx)
     },
     hoverHandle(item,i){
@@ -140,8 +138,6 @@ export default {
         player.model.emit('tourThumbImgHoverLeave',i) 
        this.hoverIdx= '' 
     }
-      
-    
   },
   components: {
     Swiper,
@@ -151,12 +147,10 @@ export default {
     this.$nextTick(() => {
       window.addEventListener("loadfinish", () => {
         this.guide = window.player.model.images;
-
-        console.log(this.guide);
-
          //监听导览状态
           window.player.on('onplayStatus', (data)=>{
             this.guideActive = data.destinationItem
+            this.swiper.slideTo(this.guideActive)
             //if (!data.tourIsPlaying) {
             //  this.guideActive=''
             //}
@@ -174,6 +168,7 @@ export default {
   height: 120px;
   font-size: 0;
   margin-top: 30px;
+  pointer-events: auto;
   .bg {
     position: absolute;
     width: 100%;