fix

.prettierrc.js

@@ -1,11 +1,11 @@
 module.exports = {
-  printWidth: 100, // 一行的字符数，如果超过会进行换行
+  printWidth: 200, // 一行的字符数，如果超过会进行换行
   tabWidth: 2, // 一个tab代表几个空格数，默认就是2
   useTabs: false, // 是否启用tab取代空格符缩进，.editorconfig设置空格缩进，所以设置为false
   semi: false, // 行尾是否使用分号，默认为true
   singleQuote: true, // 字符串是否使用单引号
-  trailingComma: "none", // 对象或数组末尾是否添加逗号 none| es5| all
+  trailingComma: 'none', // 对象或数组末尾是否添加逗号 none| es5| all
   jsxSingleQuote: true, // 在jsx里是否使用单引号，你看着办
   bracketSpacing: true, // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
-  arrowParens: "avoid", // 箭头函数如果只有一个参数则省略括号
-};
+  arrowParens: 'avoid' // 箭头函数如果只有一个参数则省略括号
+}

public/js/Hot.js

@@ -53,15 +53,10 @@ window.initHot = function (model) {
     var src = ''
     var r = link.substring(link.indexOf('html') + 4),
       o = 'en' == manage.number('lang') ? '&lang=' + manage.number('lang') : ''
-    ;-1 == r.indexOf('?')
-      ? (src = link + '?time=' + randomTime().getTime() + '&id=' + window.number + o)
-      : (src = link + '&time=' + randomTime().getTime() + '&id=' + window.number + o)
-
-    // return src.replace(
-    //   'https://www.4dmodel.com/SuperTwo/hot_online1',
-    //   'https://houseoss.4dkankan.com/project/HainanMuseum/hot'
-    // )
-    return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'http://localhost:8080')
+    ;-1 == r.indexOf('?') ? (src = link + '?time=' + randomTime().getTime() + '&id=' + window.number + o) : (src = link + '&time=' + randomTime().getTime() + '&id=' + window.number + o)
+
+    return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'https://houseoss.4dkankan.com/project/WuhanMuseum/hot')
+    // return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'http://localhost:8080')
     // return src
   }
   var removeSrcPostMark = function (url) {
@@ -75,12 +70,7 @@ window.initHot = function (model) {
   {
     //get plane Bound
     var planeBound = new THREE.Box3()
-    var cornerPoint = [
-      new THREE.Vector3(-0.5, 0.5, 0),
-      new THREE.Vector3(0.5, 0.5, 0),
-      new THREE.Vector3(0.5, -0.5, 0),
-      new THREE.Vector3(-0.5, -0.5, 0)
-    ]
+    var cornerPoint = [new THREE.Vector3(-0.5, 0.5, 0), new THREE.Vector3(0.5, 0.5, 0), new THREE.Vector3(0.5, -0.5, 0), new THREE.Vector3(-0.5, -0.5, 0)]
     cornerPoint.forEach(e => {
       planeBound.expandByPoint(e)
     })
@@ -88,9 +78,7 @@ window.initHot = function (model) {
 
   var shineMats = []
   var getShineMat = function (texture1, texture2) {
-    var mat = shineMats.find(
-      e => e.uniforms.texture1.value == texture1 && e.uniforms.texture2.value == texture2
-    )
+    var mat = shineMats.find(e => e.uniforms.texture1.value == texture1 && e.uniforms.texture2.value == texture2)
     if (mat) return mat
     else {
       var mat = new THREE.ShaderMaterial({
@@ -108,8 +96,7 @@ window.initHot = function (model) {
             value: texture2
           }
         },
-        vertexShader:
-          'varying vec2 vUv;\n\nvoid main() {\n\n vUv =  uv ;\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n\n}\n',
+        vertexShader: 'varying vec2 vUv;\n\nvoid main() {\n\n vUv =  uv ;\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n\n}\n',
         fragmentShader:
           'varying vec3 vNormal;\n\nvarying vec2 vUv;\n\nuniform float opac;\n\n  uniform sampler2D texture1;\n\nuniform sampler2D texture2;\n\nvoid main() {\n\nvec4 tcolor1 = texture2D( texture1, vUv );\n\nvec4 tcolor2 = texture2D( texture2, vUv );\n\ngl_FragColor = mix(tcolor1,tcolor2 ,opac) + tcolor2*0.2; }\n',
         transparent: !0
@@ -199,12 +186,7 @@ window.initHot = function (model) {
         }
 
         if (this.info.animateInfo && this.material_.map) {
-          this.animation = GifTexDeal.addAnimation(
-            this.material_.map,
-            this,
-            this.info.animateInfo,
-            this.sid
-          )
+          this.animation = GifTexDeal.addAnimation(this.material_.map, this, this.info.animateInfo, this.sid)
           this.visible && this.inSight() && GifTexDeal.start(this.animation)
         }
       }
@@ -252,10 +234,7 @@ window.initHot = function (model) {
           }
         }
 
-        if (
-          this.material_ &&
-          !hotGroup.children.find(e => e != this && e.material_ == this.material_)
-        ) {
+        if (this.material_ && !hotGroup.children.find(e => e != this && e.material_ == this.material_)) {
           this.material_.dispose()
         }
 
@@ -297,9 +276,7 @@ window.initHot = function (model) {
         } else {
           if (!this.info.texSrc) return
 
-          var video = $(
-            `<video  controls="controls" loop   x5-playsinline="" webkit-playsinline="true" playsinline="true" controlslist="nodownload"  preload="meta" ></video>`
-          )[0]
+          var video = $(`<video  controls="controls" loop   x5-playsinline="" webkit-playsinline="true" playsinline="true" controlslist="nodownload"  preload="meta" ></video>`)[0]
           if (window.isEdit) video.src = manage.dealURL(this.info.texSrc) //注意,src赋值就会自动加载， preload="meta" 只加载元数据，提高加载速度，否则一开始卡
 
           /* let src = this.info.texSrc
@@ -463,9 +440,7 @@ window.initHot = function (model) {
           info.quaternion = convertValue(info.quaternion, THREE.Quaternion)
         } else {
           info.rotation = convertValue(info.rotation, THREE.Vector3)
-          info.quaternion = new THREE.Quaternion().setFromEuler(
-            new THREE.Euler().setFromVector3(info.rotation)
-          ) //热点的旧数据很多是字符串
+          info.quaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler().setFromVector3(info.rotation)) //热点的旧数据很多是字符串
         }
 
         var s = Hot.getDefaulScale(info.hotIconScale) //旧版的大小，统一转换成新版
@@ -502,9 +477,7 @@ window.initHot = function (model) {
           delete info.depth
           delete info.file
         } else {
-          info.quaternion = new THREE.Quaternion().setFromEuler(
-            new THREE.Euler().fromArray(info.rotation)
-          ) //.setFromVector3(info.rotation)
+          info.quaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler().fromArray(info.rotation)) //.setFromVector3(info.rotation)
         }
 
         info.model = info.model || [] //模型链接
@@ -533,14 +506,8 @@ window.initHot = function (model) {
 
       for (let i in info.transformAtPanos) {
         info.transformAtPanos[i].pos = new THREE.Vector3().fromArray(info.transformAtPanos[i].pos)
-        info.transformAtPanos[i].qua &&
-          (info.transformAtPanos[i].qua = new THREE.Quaternion().fromArray(
-            info.transformAtPanos[i].qua
-          ))
-        info.transformAtPanos[i].scale &&
-          (info.transformAtPanos[i].scale = new THREE.Vector3().fromArray(
-            info.transformAtPanos[i].scale
-          ))
+        info.transformAtPanos[i].qua && (info.transformAtPanos[i].qua = new THREE.Quaternion().fromArray(info.transformAtPanos[i].qua))
+        info.transformAtPanos[i].scale && (info.transformAtPanos[i].scale = new THREE.Vector3().fromArray(info.transformAtPanos[i].scale))
       }
     }
 
@@ -690,10 +657,7 @@ window.initHot = function (model) {
       let visible =
         visibility != void 0
           ? visibility
-          : !this.info.visiblePanos ||
-            (type == 'every'
-              ? panos.every(pano => this.info.visiblePanos.includes(pano.id))
-              : panos.some(pano => this.info.visiblePanos.includes(pano.id))) //type为every时，需要panos中每个都可见才显示
+          : !this.info.visiblePanos || (type == 'every' ? panos.every(pano => this.info.visiblePanos.includes(pano.id)) : panos.some(pano => this.info.visiblePanos.includes(pano.id))) //type为every时，需要panos中每个都可见才显示
 
       convertTool.updateVisible(this, 'visi', visible)
 
@@ -724,12 +688,7 @@ window.initHot = function (model) {
         var center //中心点
         if (this.plane) {
           center = this.plane.getWorldPosition()
-          boundPoint = [
-            new THREE.Vector3(-0.5, 0.5, 0),
-            new THREE.Vector3(0.5, 0.5, 0),
-            new THREE.Vector3(0.5, -0.5, 0),
-            new THREE.Vector3(-0.5, -0.5, 0)
-          ]
+          boundPoint = [new THREE.Vector3(-0.5, 0.5, 0), new THREE.Vector3(0.5, 0.5, 0), new THREE.Vector3(0.5, -0.5, 0), new THREE.Vector3(-0.5, -0.5, 0)]
         } else {
           var bound = new THREE.Box3().copy(this.info.modelBound.bound)
           boundPoint = [
@@ -789,12 +748,7 @@ window.initHot = function (model) {
           minLon = minLon + centerDirInfo.lon
           minLat = minLat + centerDirInfo.lat
 
-          var dirs = [
-            math.getDirByLonLat(maxLon, maxLat),
-            math.getDirByLonLat(minLon, minLat),
-            math.getDirByLonLat(maxLon, minLat),
-            math.getDirByLonLat(minLon, maxLat)
-          ]
+          var dirs = [math.getDirByLonLat(maxLon, maxLat), math.getDirByLonLat(minLon, minLat), math.getDirByLonLat(maxLon, minLat), math.getDirByLonLat(minLon, maxLat)]
           cornerPoint = dirs.map(e => {
             return e.clone().add(pos1)
           })
@@ -875,10 +829,7 @@ window.initHot = function (model) {
         //飞出 只判断在不在画面内
         //return playVideoWhenFlyOut//true
         let frustumMatrix = new THREE.Matrix4()
-        frustumMatrix.multiplyMatrices(
-          player.camera.projectionMatrix,
-          player.camera.matrixWorldInverse
-        )
+        frustumMatrix.multiplyMatrices(player.camera.projectionMatrix, player.camera.matrixWorldInverse)
 
         let frustum = new THREE.Frustum()
         frustum.setFromMatrix(frustumMatrix)
@@ -1028,9 +979,7 @@ window.initHot = function (model) {
       if (!this.titleElem) return
       this.hovered = !!state
 
-      var v =
-        this.info.titleShowType != 'unvisible' &&
-        (this.info.titleShowType == 'always' || this.hovered)
+      var v = this.info.titleShowType != 'unvisible' && (this.info.titleShowType == 'always' || this.hovered)
       this.titleElem.setVisible(v, 'hoveredVisi', 1)
       //this.updateTitle()
     }
@@ -1050,20 +999,14 @@ window.initHot = function (model) {
       var a = new THREE.Vector3()
       i.push(
         function (e) {
-          return (
-            Math.abs(e.position.x - r.x) > window._settings.tags.visibility.cameraClearance ||
-            Math.abs(e.position.z - r.z) > window._settings.tags.visibility.cameraClearance
-          )
+          return Math.abs(e.position.x - r.x) > window._settings.tags.visibility.cameraClearance || Math.abs(e.position.z - r.z) > window._settings.tags.visibility.cameraClearance
         },
 
         function (e) {
           a.copy(r).sub(e.position)
           var t = -THREE.Math.radToDeg(Math.atan(a.y / Math.sqrt(a.x * a.x + a.z * a.z))),
             i = window._settings.tags.navigate.tiltTolerance
-          return (
-            window._settings.insideLookLimitDown - i < t &&
-            t < window._settings.insideLookLimitUp + i
-          )
+          return window._settings.insideLookLimitDown - i < t && t < window._settings.insideLookLimitUp + i
         },
 
         pano => {
@@ -1123,9 +1066,7 @@ window.initHot = function (model) {
 
     examine(options = {}) {
       var openHot = this.info.link && this.info.actionType.openHot && !options.dontOpen
-      var fastTran =
-        !options.dontFastTran &&
-        (this.info.actionType.fastTran || settings.hotFastTran || options.fastTran)
+      var fastTran = !options.dontFastTran && (this.info.actionType.fastTran || settings.hotFastTran || options.fastTran)
       if (fastTran) {
         //瞬间过渡 1到固定方位 2到和普通过渡一样的位置，也就是最适合的位置
         let info = this.info.cameraData
@@ -1137,8 +1078,7 @@ window.initHot = function (model) {
         }
       }
 
-      var needExamine =
-        !fastTran && (options.examine || (!settings.dontExamHot && this.info.actionType.examine))
+      var needExamine = !fastTran && (options.examine || (!settings.dontExamHot && this.info.actionType.examine))
       if (!openHot && !needExamine) return
 
       if (openHot && this.info.linkType != 'common' && this.info.iframe && this.info.iframe[0]) {
@@ -1214,10 +1154,7 @@ window.initHot = function (model) {
               if (s) {
                 var t = document.querySelector('#id1').contentWindow.document
                 t.querySelector('video') &&
-                  (t.querySelector('video').play(),
-                  !t.querySelector('video').paused &&
-                    t.querySelector('.playPause') &&
-                    t.querySelector('.playPause').classList.add('fa-pause')),
+                  (t.querySelector('video').play(), !t.querySelector('video').paused && t.querySelector('.playPause') && t.querySelector('.playPause').classList.add('fa-pause')),
                   t.querySelector('audio') && t.querySelector('audio').play()
               } else setTimeout(e, 300)
             }, 800)
@@ -1266,10 +1203,7 @@ window.initHot = function (model) {
           var f = new THREE.Matrix4().lookAt(c.position, h, new THREE.Vector3(0, 1, 0))
           p.quaternion = new THREE.Quaternion().setFromRotationMatrix(f)
         }
-        ;(p.callback = done),
-          (p.duration = options.duration || 1500),
-          (p.mode = 'panorama'),
-          (p.aimDuration = options.aimDuration)
+        ;(p.callback = done), (p.duration = options.duration || 1500), (p.mode = 'panorama'), (p.aimDuration = options.aimDuration)
         player.flyToNewMode(p)
       }
     }
@@ -1549,18 +1483,8 @@ window.initHot = function (model) {
 
     //Hot.loadWhenOutside = true
 
-    hots1 = model.hotGroup.children.filter(
-      e =>
-        e.texType == 'photo' &&
-        !e.photoHasRequestLoad &&
-        (!e.info.visiblePanos || e.info.visiblePanos.includes(player.currentPano.id))
-    )
-    hots2 = model.hotGroup.children.filter(
-      e =>
-        e.info.objSrc &&
-        !e.modelHasRequestLoad &&
-        (!e.info.visiblePanos || e.info.visiblePanos.includes(player.currentPano.id))
-    )
+    hots1 = model.hotGroup.children.filter(e => e.texType == 'photo' && !e.photoHasRequestLoad && (!e.info.visiblePanos || e.info.visiblePanos.includes(player.currentPano.id)))
+    hots2 = model.hotGroup.children.filter(e => e.info.objSrc && !e.modelHasRequestLoad && (!e.info.visiblePanos || e.info.visiblePanos.includes(player.currentPano.id)))
     if (hots1.length + hots2.length == 0) {
       hots1 = model.hotGroup.children.filter(e => e.texType == 'photo' && !e.photoHasRequestLoad)
       hots2 = model.hotGroup.children.filter(e => e.info.objSrc && !e.modelHasRequestLoad)
@@ -1618,8 +1542,7 @@ window.initHot = function (model) {
     originModelCount = hotGroup.children.filter(e => !!e.info.objSrc).length
     if (originPhotoCount == 0) Hot.allPhotoLoaded = true
     if (originModelCount == 0) Hot.allModelLoaded = true
-    if (Hot.allModelLoaded && Hot.allPhotoLoaded)
-      Hot.whenAllFileLoaded && Hot.whenAllFileLoaded() //所有加载完毕
+    if (Hot.allModelLoaded && Hot.allPhotoLoaded) Hot.whenAllFileLoaded && Hot.whenAllFileLoaded() //所有加载完毕
     else {
       Hot.load()
     }
@@ -1676,6 +1599,11 @@ window.initHot = function (model) {
 
     SoundManager.pause('hot', true) //自动播放被中断的音频 （bgm
 
+    const cad = document.querySelector('.cad')
+    if (cad) {
+      cad.style.visibility = cad.style.visibility === 'hidden' ? 'visible' : 'hidden'
+    }
+
     return false
   }
 
@@ -1718,12 +1646,7 @@ window.initHot = function (model) {
         /* if(hot.texType == 'video' && hot.shouldPlay){
                     console.log(1)
                 } */
-        if (
-          !hot.clickToPlayInited &&
-          hot.texType == 'video' &&
-          !isVideoPlayed(hot.texMedia) &&
-          hot.shouldPlay
-        ) {
+        if (!hot.clickToPlayInited && hot.texType == 'video' && !isVideoPlayed(hot.texMedia) && hot.shouldPlay) {
           //hot.update(player)
           console.log({ str: 'try mobileAutoPlay ' + hot.sid, level: 1 })
           hot.videoControl(true)
@@ -1780,9 +1703,7 @@ window.initHot = function (model) {
         }
         let filter = (type, max, list, playFun) => {
           if (list.length < max) {
-            list.forEach(hot =>
-              type == 'video' ? hot.videoControl(true) : GifTexDeal.start(hot.animation)
-            )
+            list.forEach(hot => (type == 'video' ? hot.videoControl(true) : GifTexDeal.start(hot.animation)))
           } else {
             let playerDir = player.getDirection()
             let request = []
@@ -1811,17 +1732,11 @@ window.initHot = function (model) {
                 //面积因素
                 if (player.mode == 'panorama') {
                   var cornerPointInfo = hot.getCornerPoint() //仅支持漫游模式
-                  let area =
-                    (cornerPointInfo.diffLon * Math.pow(cornerPointInfo.diffLat, 0.5)) / 1000 //占据面积
+                  let area = (cornerPointInfo.diffLon * Math.pow(cornerPointInfo.diffLat, 0.5)) / 1000 //占据面积
                   return area
                 } else {
                   let dis = player.position.distanceTo(hot.position)
-                  let size =
-                    hot
-                      .getBoundOri()
-                      .applyMatrix4(hot.matrixWorld)
-                      .size(new THREE.Vector3())
-                      .length() / 2
+                  let size = hot.getBoundOri().applyMatrix4(hot.matrixWorld).size(new THREE.Vector3()).length() / 2
                   let score = Math.atan(size / Math.pow(dis, 1.2)) * 50 // 在镜头中所占fov angle 的一半 。 pow是因为实际感受还是尽量显示近处的
                   if (hot.plane) {
                     //考虑plane的方向,越倾斜分越低

public/showa/js/loadCAD.js

@@ -28,21 +28,31 @@ window.grendCAD = (function grendCAD() {
     if (initDOM) return initDOM
     let $layer = document.createElement('div')
     let $cad = document.createElement('div')
+    let $img = document.createElement('img')
 
     $layer.className = 'cad'
+    $img.className = 'img'
     $cad.id = 'cad'
     $layer.appendChild($cad)
 
     let style = document.createElement('style')
     style.innerHTML = `
       .cad {
+        cursor: pointer;
         position: absolute;
         right: 20px;
         top: 16px;
         width: 200px;
         height: 200px;
         background: rgba(0, 0, 0, .3);
-        border-radius: 5px;
+        border-radius: 5px; 
+        background-image: url('./images/map_1.png');
+        path {
+          opacity: 0;
+        }
+        g.sign>path {
+          opacity: 1;
+        }
       }
 
       .cad > div {
@@ -50,6 +60,17 @@ window.grendCAD = (function grendCAD() {
         height: 100%;
       }
 
+      .img {
+        display: none;
+        width: 60%;
+        object-fit: cover;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        transition: opacity 0.3s ease;
+      }
+
       @media only screen and (max-width: 600px) {
         .cad {
             position: absolute;
@@ -59,15 +80,30 @@ window.grendCAD = (function grendCAD() {
             height: 100px;
             background: rgba(0, 0, 0, .3);
             border-radius: 5px;
-        }
+            background-image: url('./images/map_1.png');
+            background-size: cover;
+            path {
+              opacity: 0;
+            }
+            g.sign>path {
+              opacity: 1;
+            }
+          }
+          .img {
+            width: 90%;
+            z-index: 30000;
+          }
+        
       }
     `
 
     document.documentElement.appendChild(style)
     document.documentElement.appendChild($layer)
+    document.documentElement.appendChild($img)
     $parent.appendChild(style)
     $parent.appendChild($layer)
-    return $layer
+    $parent.appendChild($img)
+    return [$layer, $img]
   }
 
   function setStyle(signColor, borderColor, borderWidth) {
@@ -96,7 +132,13 @@ window.grendCAD = (function grendCAD() {
     initFloor = floor
 
     loadScript(function () {
-      let $layer = loadDOM($parent)
+      let [$layer, $img] = loadDOM($parent)
+
+      $layer.addEventListener('click', () => {
+        console.log(12)
+        $img.src = './images/map_2.png'
+        $img.style.display = $img.style.display === 'block' ? 'none' : 'block'
+      })
 
       $layer.style.visibility = 'hidden'
       window.cad = structureCAD({
@@ -137,13 +179,7 @@ $.ajax({
       url: '//super.4dage.com/data/' + window.number + '/floor.json',
       method: 'GET',
       success(res) {
-        grendCAD(
-          res,
-          document.documentElement,
-          data.cadSignColor,
-          data.cadBorderColor,
-          data.cadBorderWidth
-        )
+        grendCAD(res, document.documentElement, data.cadSignColor, data.cadBorderColor, data.cadBorderWidth)
       }
     })
   }

src/pages/A1home/index.tsx

@@ -1,13 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import styles from './index.module.scss'
 import A2main from '../A2main'
-const scriptArr = [
-  './js/manage.js',
-  './js/Hot.js?m=1',
-  './js/main_2020_show.js',
-  './CAD/bundle.js',
-  './showa/js/loadCAD.js'
-]
+const scriptArr = ['./js/manage.js', './js/Hot.js?m=1', './js/main_2020_show.js', './CAD/bundle.js', './showa/js/loadCAD.js']
 
 function A1home() {
   // 动态加载 js
@@ -354,12 +348,8 @@ function A1home() {
                       <b className='gearvr hidden'>{'{[{ VR_SAMSUNG_GEAR_VR }]}'}</b>
                     </span>
 
-                    <span className='show-supported show-unsupported show-desktop p2'>
-                      {'{[{ VR_NEED_CARDBOARD}]}'}
-                    </span>
-                    <span className='show-supported show-unsupported show-desktop p3'>
-                      {'{[{ VR_NEED_SAMSUNG}]}'}
-                    </span>
+                    <span className='show-supported show-unsupported show-desktop p2'>{'{[{ VR_NEED_CARDBOARD}]}'}</span>
+                    <span className='show-supported show-unsupported show-desktop p3'>{'{[{ VR_NEED_SAMSUNG}]}'}</span>
                     <span className='show-ios p2'>
                       <b>{'{[{ VR_GOOGLE_CARDBOARD }]}'}</b>
                       <br />

src/pages/A2main/index.tsx

@@ -87,33 +87,17 @@ function A2main() {
       <A23pinTop />
 
       {/* 主要修改的图标部分 */}
-      <div
-        className={classNames(
-          'pinBottom-container',
-          state3d === 'panorama' ? '' : 'pinBottom-containerNo'
-        )}
-      >
+      <div className={classNames('pinBottom-container', state3d === 'panorama' ? '' : 'pinBottom-containerNo')}>
         <div className='pinBottom center'>
           <div id='view-controllers'></div>
         </div>
 
         <div className='pinBottom left'>
           <div className='viewContainer'>
-            <div
-              id='previous'
-              className='previous desktop-only ui-icon'
-              style={{ display: 'none' }}
-            >
+            <div id='previous' className='previous desktop-only ui-icon' style={{ display: 'none' }}>
               {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
               <a>
-                <img
-                  rel='tooltip'
-                  src='images/play.png'
-                  width='24'
-                  height='24'
-                  data-original-title='播放'
-                  alt=''
-                />
+                <img rel='tooltip' src='images/play.png' width='24' height='24' data-original-title='播放' alt='' />
               </a>
             </div>
 
@@ -137,12 +121,7 @@ function A2main() {
               <div id='next' className='next desktop-only ui-icon wide' style={{ display: 'none' }}>
                 {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                 <a>
-                  <i
-                    rel='tooltip'
-                    title=''
-                    className='icon icon-dpad-right'
-                    data-original-title='下一个'
-                  ></i>
+                  <i rel='tooltip' title='' className='icon icon-dpad-right' data-original-title='下一个'></i>
                 </a>
               </div>
               <div data-original-title='导览' id='pullTab' rel='tooltip' title=''>
@@ -152,18 +131,8 @@ function A2main() {
               </div>
 
               {/* 原始热点列表---隐藏 */}
-              <div
-                data-original-title='热点列表'
-                id='hotList'
-                rel='tooltip'
-                style={{ display: 'none' }}
-              >
-                <img
-                  className='icon icon-inside'
-                  src='images/hotlist.png'
-                  title='热点列表'
-                  alt=''
-                />
+              <div data-original-title='热点列表' id='hotList' rel='tooltip' style={{ display: 'none' }}>
+                <img className='icon icon-inside' src='images/hotlist.png' title='热点列表' alt='' />
               </div>
 
               {/* 新的热点列表 */}
@@ -183,29 +152,17 @@ function A2main() {
               </div>
 
               <div data-original-title='全景漫游' id='gui-modes-inside' rel='tooltip'>
-                <img
-                  className='icon icon-inside'
-                  src={`images/inside${state3d === 'panorama' ? '_active' : ''}.png`}
-                  alt=''
-                />
+                <img className='icon icon-inside' src={`images/inside${state3d === 'panorama' ? '_active' : ''}.png`} alt='' />
                 {/* 鼠标移入 */}
                 <div className='hoveImg'>全景漫游</div>
               </div>
               <div data-original-title='迷你模型' id='gui-modes-dollhouse' rel='tooltip'>
-                <img
-                  className='icon icon-inside'
-                  src={`images/dollhouse${state3d === 'dollhouse' ? '_active' : ''}.png`}
-                  alt=''
-                />
+                <img className='icon icon-inside' src={`images/dollhouse${state3d === 'dollhouse' ? '_active' : ''}.png`} alt='' />
                 {/* 鼠标移入 */}
                 <div className='hoveImg'>迷你模型</div>
               </div>
               <div data-original-title='俯视图' id='gui-modes-floorplan' rel='tooltip'>
-                <img
-                  className='icon icon-inside'
-                  src={`images/floor${state3d === 'floorplan' ? '_active' : ''}.png`}
-                  alt=''
-                />
+                <img className='icon icon-inside' src={`images/floor${state3d === 'floorplan' ? '_active' : ''}.png`} alt='' />
                 {/* 鼠标移入 */}
                 <div className='hoveImg'>顶部视图</div>
               </div>
@@ -286,13 +243,7 @@ function A2main() {
               {/* 鼠标移入 */}
               <div className='hoveImg'>全屏</div>
             </div>
-            <div
-              id='gui-fullscreen-exit'
-              className='ui-icon wide'
-              data-placement='top'
-              rel='tooltip'
-              style={{ display: 'none' }}
-            >
+            <div id='gui-fullscreen-exit' className='ui-icon wide' data-placement='top' rel='tooltip' style={{ display: 'none' }}>
               {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
               <a>
                 <img src='images/fullx.png' alt='' />