update

public/static/js/main_2020_show.js

@@ -23463,8 +23463,8 @@ window.Modernizr = function(n, e, t) {
                     pano != this.currentPano && this.currentPano.exit() 
                     pano.enter() 
                     this.currentPano = pano
-                    this.emit("flying.ended", pano.position, oldPos, pano, oldPano),
-                } )
+                    this.emit("flying.ended", pano.position, oldPos, pano, oldPano)
+                })
                 
             }
             

src/assets/style/reset.less

@@ -16,7 +16,7 @@ label,summary{cursor:default;}
 a,button{cursor:pointer;}
 h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
 del,ins,u,s,a,a:hover{text-decoration:none;}
-body,textarea,input,button,select,keygen,legend{font-size: 14px;;outline:0;}
+body,textarea,input,button,select,keygen,legend{font-size: 14px;;outline:0;color:#fff;}
 *{box-sizing: border-box}
 a{text-decoration: none;}
 input{  

src/components/hotspot/title.vue

@@ -1,21 +1,65 @@
 <template>
-  <div class="images">
-    <div class="img-con">
-      <div class="title">{{ hotspot.title }}</div>
-      <div class="desc" v-html="hotspot.content"></div>
+  <div class="hotspot" v-if="!isMobile">
+    <img
+      class="vhotspot"
+      :src="require(`@/assets/images/project/kuangti/hotspot_${theme}.png`)"
+      alt=""
+    />
+    <div class="brightness"></div>
+    <img
+      @click="$emit('close')"
+      class="close"
+      :src="require('@/assets/images/project/icon/close.png')"
+      alt=""
+    />
+
+    <div class="vhotspotcon">
+      <div class="vtitle" v-html="hotspot.title"></div>
+      <div class="hotspotcon" :class="{ fullcon: !hotspot.content }">
+        <div class="img-con">
+          <div class="imgmain" :class="{ bigImg: !hotspot.content }">
+            <p v-html="handleContent(hotspot.contents[active])"></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div v-else class="mbhotspot">
+    <img
+      class="vhotspot"
+      :src="require(`@/assets/images/mobile/kuangti/hotspot_${theme}.png`)"
+      alt=""
+    />
+    <div class="brightness"></div>
+    <img
+      @click="$emit('close')"
+      class="close"
+      :src="require('@/assets/images/project/icon/close.png')"
+      alt=""
+    />
+    <div class="title" v-html="hotspot.title"></div>
+
+    <div class="mbhcon" :class="{ fullcon: !hotspot.content }">
+      <div class="img-con">
+        <div class="imgmain" :class="{ bigImg: !hotspot.content }">
+          <p v-html="handleContent(hotspot.contents[active], 14)"></p>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+
 export default {
-  props: ["hotspot"],
+  props: ["hotspot", "type"],
   data() {
     return {
-      active: 0,
+      active: 0
     };
   },
-  methods: {},
+ 
 };
 </script>
 
@@ -24,49 +68,271 @@ export default {
   opacity: 0 !important;
   pointer-events: none !important;
 }
+@w: 82%;
+@fixw: 8px;
+.hotspot {
+  width: @w;
+  position: relative;
+  margin: 10px auto 0;
+  .vhotspot {
+    width: 100%;
+    position: relative;
+    pointer-events: none;
+  }
 
-.images {
-  width: 100%;
-  height: 100%;
-  background-repeat: no-repeat;
-  text-align: center;
+  .brightness {
+    position: absolute;
+    width: 100%;
+    height: 101%;
+    left: 0;
+    top: 0;
+    z-index: -1;
+    clip-path: polygon(1% 11%, 10% 2%, 99% 2%, 99% 89%, 91% 98%, 1% 98%);
+  }
+  .close {
+    position: absolute;
+    top: 40px;
+    right: 30px;
+    width: 20px;
+    cursor: pointer;
+    z-index: 1000;
+  }
 
-  .img-con {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    flex-direction: column;
-    position: relative;
-    padding-bottom: 40px;
-    position: fixed;
-    top: 12%;
-    left: 50%;
+  .vhotspotcon {
+    position: absolute;
+    top: 0;
     transform: translateX(-50%);
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    .vtitle {
+      position: absolute;
+      top: 24px;
+      left: 130px;
+      z-index: 99;
+      font-size: 20px;
+    }
+
+    .hotspotcon {
+      width: 92%;
+      top: 14%;
+      left: 4%;
+      position: absolute;
+      .img-con {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        position: relative;
+        .imgmain {
+          width: 100%;
+          overflow-x: hidden;
+          overflow-y: auto;
+          position: relative;
+          margin: 0 auto;
+          p {
+            text-align: justify;
+            cursor: pointer;
+            max-width: 100%;
+            font-size: 20px;
+          }
+        }
+        @h: 100%;
+        .bigImg {
+          max-height: @h;
+          margin: 0;
+          > img {
+            max-height: @h;
+          }
+        }
+        .aa {
+          width: 30px;
+          height: auto;
+          cursor: pointer;
+        }
+      }
+      .pagna {
+        text-align: center;
+        z-index: 999;
+        font-size: 18px;
+        margin-top: 10px;
+        color: rgba(255, 255, 255, 0.8);
+      }
+      .desc {
+        width: 90%;
+        font-size: 20px;
+        text-align: justify;
+        line-height: 1.8;
+        max-height: 120px;
+        margin: 10px auto 0;
+        padding-right: 14px;
+        overflow-y: auto;
+      }
+    }
+    .fullcon {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      clip-path: polygon(
+        1% 12%,
+        3.8% 8%,
+        42% 8%,
+        45.2% 2.7%,
+        99% 2.7%,
+        99% 89%,
+        92% 98%,
+        1% 98%
+      );
+      .img-con {
+        height: 100%;
+        .imgmain {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
+.mbhotspot {
+  width: 96%;
+  margin: 60px auto 0;
+  position: relative;
+  .vhotspot {
+    width: 100%;
+    position: relative;
+    pointer-events: none;
+  }
+
+  .brightness {
+    position: absolute;
     width: 100%;
-    .title {
-      padding: 0 80px;
-      display: inline-block;
-      color: #dba761;
-      font-weight: bold;
-      font-size: 36px;
-      height: 70px;
-      line-height: 70px;
-      background: #bc1515;
-      border-radius: 60px;
-      margin: 45px auto;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: -1;
+    clip-path: polygon(1% 11%, 10% 2%, 99% 2%, 99% 89%, 92% 98%, 1% 98%);
+  }
+  .close {
+    position: absolute;
+    top: 26px;
+    right: 16px;
+    width: 14px;
+    z-index: 1000;
+  }
+  .title {
+    position: absolute;
+    top: 14px;
+    left: 40px;
+    display: inline-block;
+    font-size: 16px;
+    margin: 0px auto;
+    width: 90vw;
+  }
+  .mbhcon {
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: 100%;
+    overflow: hidden;
+    clip-path: polygon(
+      1% 12%,
+      3.8% 7.5%,
+      86% 7.5%,
+      90% 2.7%,
+      99% 2.7%,
+      99% 89%,
+      92% 97%,
+      1% 97%
+    );
+    .img-con {
+      display: flex;
+      height: 70%;
+      align-items: center;
+      justify-content: space-between;
+      position: relative;
+      overflow: hidden;
+      .imgmain {
+        width: 100%;
+        overflow-x: hidden;
+        overflow-y: auto;
+        position: relative;
+        margin: 0 auto;
+        img {
+          cursor: pointer;
+          max-width: 100%;
+        }
+      }
+      @h: 100%;
+      .bigImg {
+        max-height: @h;
+        margin: 0;
+        > img {
+          max-height: @h;
+        }
+      }
+      @pos: 14px;
+      .aa {
+        position: absolute;
+        width: 10px;
+        height: auto;
+        cursor: pointer;
+        top: 50%;
+        transform: translateY(-50%);
+        left: @pos;
+        &:last-of-type {
+          right: @pos;
+          left: unset;
+        }
+      }
     }
     .desc {
-      max-width: 1000px;
-      letter-spacing: 2px;
-      margin: 20px auto 0;
       text-align: justify;
-      line-height: 2;
-      max-height: 400px;
-      padding: 0 10px;
-      overflow-y: auto;
-      font-size: 24px;
-      line-height: 48px;
-      color: #bc1515;
+      width: 100%;
+      height: 22%;
+      padding: 0 14px;
+      margin: 10px auto 0;
+      p {
+        font-size: 16px;
+        font-weight: bold;
+      }
+      div {
+        font-size: 14px;
+        margin-top: 10px;
+        line-height: 1.5;
+        max-height: 100%;
+        padding-right: 4px;
+        overflow-y: auto;
+      }
+    }
+  }
+
+  .fullcon {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    clip-path: polygon(
+      1% 12%,
+      3.8% 7.5%,
+      86% 7.5%,
+      90% 2.7%,
+      99% 2.7%,
+      99% 89%,
+      92% 98%,
+      1% 98%
+    );
+    .img-con {
+      height: 100%;
+      .imgmain {
+        width: 100%;
+        height: 100%;
+        p{
+          width: 90%;
+          margin: 0 auto;
+        }
+      }
     }
   }
 }

src/config/http.js

@@ -9,7 +9,7 @@ let vue = new Vue()
 
 var isProduction = process.env.NODE_ENV === 'production'
 
-const serverName = isProduction ? 'http://tb.kczg.org.cn/' : 'http://tb.kczg.org.cn/'
+const serverName = isProduction ? 'https://tb.kczg.org.cn/' : 'https://tb.kczg.org.cn/'
 
 const orginLink = window.location.origin