From ab0ff9802c44ba365d8bb7756d3440b184fbb61e Mon Sep 17 00:00:00 2001
From: blankk <2649084208@qq.com>
Date: Thu, 8 Sep 2022 14:21:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html             |   4 +-
 src/assets/images/border.png  | Bin 0 -> 15553 bytes
 src/assets/images/close.png   | Bin 0 -> 413 bytes
 src/assets/images/head_bg.png | Bin 0 -> 7881 bytes
 src/assets/images/line.png    | Bin 0 -> 3943 bytes
 src/assets/images/marker.png  | Bin 0 -> 1988 bytes
 src/assets/images/tray.png    | Bin 0 -> 1244 bytes
 src/utils/flexible.js         |  43 ++
 src/utils/infoBox_min.js      | 485 +++++++++++++++++
 src/views/index.vue           | 960 +++++++++++++++++++++++++++++++++-
 10 files changed, 1481 insertions(+), 11 deletions(-)
 create mode 100644 src/assets/images/border.png
 create mode 100644 src/assets/images/close.png
 create mode 100644 src/assets/images/head_bg.png
 create mode 100644 src/assets/images/line.png
 create mode 100644 src/assets/images/marker.png
 create mode 100644 src/assets/images/tray.png
 create mode 100644 src/utils/flexible.js
 create mode 100644 src/utils/infoBox_min.js

diff --git a/public/index.html b/public/index.html
index 925455c..28ba8e1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,7 +8,8 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
-	  <style>
+    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=HZaiURFEy1OlQMosNP8SicYPtP7zZqMz"></script>
+    <style>
     html,
     body,
     #app {
@@ -204,5 +205,6 @@
 		    <div class="load_title">正在加载系统资源，请耐心等待</div>
         </div>
 	</div>
+
   </body>
 </html>
diff --git a/src/assets/images/border.png b/src/assets/images/border.png
new file mode 100644
index 0000000000000000000000000000000000000000..9c4d00ad954904744433a9a5424e69e7838d8dfb
GIT binary patch
literal 15553
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/close.png b/src/assets/images/close.png
new file mode 100644
index 0000000000000000000000000000000000000000..a4d1ec382358ffba37ea23b4543f5e87b60f9d16
GIT binary patch
literal 413
zcmX|-Jx{_w7{^OY3~6L^F(zKl)%N<rOM0OYq$)&92$IN1X-{adFKN%TGP>~*T>J>G
z4h}Akeh@cSH@ri_C3p8ccTax*{Qt{-@2VsoiGm=Mx*co4?gHP%eRiH4el1yj?GHzE
zWZz&n3S`HNCPdDInEeYvy_v_3J0}!O$kY!_xcc~n!1qjeSFsg4Zj+hcStR6k(Hpvp
zxodc^*%0eFW`KZD2jsy+nBv@o8!l!we?|~&M(EsxEiMQ~b|18(gn)`%m0Y!~ftn$!
zRmITCXFyZb8d7RV)g?v6N)_t{*e=)*K|S&A@xZ#=im}dwGfHEOP?lwKrpr+>MXF&K
zNYRj{No+z&pF-;7Qkb4{#6QC#shjvQ^`j7QrZb5isR<$CB513^?4g}M*6b1@A&Vtp
o{$G#BE0$fUYqf^O7x#C)Zt6mDy;peu`99#Ob}xF?+xhtU4?25!5&!@I

literal 0
HcmV?d00001

diff --git a/src/assets/images/head_bg.png b/src/assets/images/head_bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..a2e45f6911fa3d1616d0b75a122161a3896aa3c4
GIT binary patch
literal 7881
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
S4ims_pga1edX+aFpZ^cs0d1uK

literal 0
HcmV?d00001

diff --git a/src/assets/images/line.png b/src/assets/images/line.png
new file mode 100644
index 0000000000000000000000000000000000000000..05db7f8f41070103fdbd85e844a89dafad455055
GIT binary patch
literal 3943
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/marker.png b/src/assets/images/marker.png
new file mode 100644
index 0000000000000000000000000000000000000000..6968a10c2e327d6c21aa7c7a16e11d5105716736
GIT binary patch
literal 1988
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
WK0-_Ni9FW;0000<MNUMnLSTa6TAWe<

literal 0
HcmV?d00001

diff --git a/src/assets/images/tray.png b/src/assets/images/tray.png
new file mode 100644
index 0000000000000000000000000000000000000000..b59264e4f19a48c033580468cd94f2f1e5557a04
GIT binary patch
literal 1244
zcmV<21S9*2P)<h;3K|Lk000e1NJLTq002Ay001fo1^@s6?{hfx00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGmbN~PnbOGLGA9w%&1aV13K~!i%?U&nb
zTSXLxSJI|A*f}^&no=SaP!S-tlyj?ck~j!d!37t*LSMtrk*i9*%f2D1kkt^HiR~mR
zVqf&aD8%)F6oM56@dzE(H+zrmxE$IvbsV&RX|zu><N4SBuQg*ykRU;V1PKx(NRXhH
zVQpW0_vB!%gPiZFAZz<2u*c%3{R5&0G0#&63oVsSJkesA!`R~z1V?}{$dv~p()(C2
z4l(Aq8{hMG_6WlPS-hK)IlV&QQQ$2MSppU);UfbUzq&Chrat5d$loYMAgpVB&Ag{C
zL~m}7L@CkR3h%9`p)MNIp&f9G@3bdmdGDLmhBMah56ir^s86JN=h#DsQ>HCn-9lBV
zrRsRI_++&Y{UGInpx?c9u|9qHZg$d)$!4?t*{o>GlG8&jKs^D?)pNPrpu6{~c`KSy
zTECxCYoC^--%d(M03gKsM#^39l*i;&X;RiIr&QfZSzm9dtAPkK5Od+RfeXcNGhgqg
z2p%LdOX2t!iv=iIvU>~7%H}I#s$WE8|Dk|EjBoj0o|k;>vsq6VxNqAdR<9S$HxpOQ
z_0u+x!y#?0^bg(s>8##FIcDk;dTkQIj#Bu2T2|^`De3oQrShUvy112ztgii06{4o{
zmaJ62)V{AX&N9{m)v>+?YbyWaGY{rvIGmG#_-l7Sl(CtZ@@(`%i9*KNIYLtjSE=hS
z%W~yi$yYv7!k;L)PhBfiK2}vfkYeqk{Gcvq9|s`%-NqR=KljD07YN42!pTwn+MPm%
zvi0ktMMQrPWmpKvX)YGZ)9oq;o%XX@fH+VP1Rd9zlR9^c1UU{_KYwxSO&#|fw>xG!
zZH(x4*9E8oC$?|Oh<m`Mh1!Qrk{mY7_LMBJ2W!QBT;LGqKy9q-fdh(~7HVs&%I>Pd
zUCU*w`NI#!k80V?*VLZxi}`sfenZ|3s~Quou^01<Qfx;QHyVYCBIo*Q<#rWZ`?G(0
zxEjFR^~*kh1bol$cL9Cn+~im}Cy~_vRwEa&`0Cb~J=GfZAzD_#^ICziGxr35e(lFk
zil5uAbiU=yORm_h)y}$a3ad8$b15^<HGb6{U?+aq<+29{2rVkIT)U)|_lmYR<aX^P
zRq$D7QF8pQl0iX8MMuvG`Mx?6SL*YUuf8MsdsnE|ZX7#63?(__$cA06&>j>dtmX2l
za}le%qjKlhS+@_b*0KECTG1~%LPhKuH%CwdQ>eZw=H5A3Yj8+u29bOvsDG%VsLT%)
z!Nb4<wKfaF=J$1v)NSKoyJ1=K78`R;hLk^JcL0*)X=71R)gUtt(L+=9-;m3FKG;~C
zN$oDkC;>qE#tlhfMF^00qypQTyJ}z{VpTz^K3fezW9&{KX_UP-r+a-*g94>$Vm(Jj
z$u@4xq;`VoG)nmtpz#bzg5;b*P#EVA6u5#S*7M*n5&flW9S<KBjG<6P<BtH@cJQ~Z
z`Ij$l(Yd?T+P}4ebi|1M7f>!z?|()tL4pJc5+ryGi2McB-o8&0j~KH60000<MNUMn
GLSTYTflguo

literal 0
HcmV?d00001

diff --git a/src/utils/flexible.js b/src/utils/flexible.js
new file mode 100644
index 0000000..e43d78e
--- /dev/null
+++ b/src/utils/flexible.js
@@ -0,0 +1,43 @@
+(function flexible(window, document) {
+  var docEl = document.documentElement;
+  var dpr = window.devicePixelRatio || 1;
+
+  // adjust body font size
+  function setBodyFontSize() {
+    if (document.body) {
+      document.body.style.fontSize = 12 * dpr + "px";
+    } else {
+      document.addEventListener("DOMContentLoaded", setBodyFontSize);
+    }
+  }
+  setBodyFontSize();
+
+  // set 1rem = viewWidth / 10
+  function setRemUnit() {
+    var rem = docEl.clientWidth / 24;
+    docEl.style.fontSize = rem + "px";
+  }
+
+  setRemUnit();
+
+  // reset rem unit on page resize
+  window.addEventListener("resize", setRemUnit);
+  window.addEventListener("pageshow", function(e) {
+    if (e.persisted) {
+      setRemUnit();
+    }
+  });
+
+  // detect 0.5px supports
+  if (dpr >= 2) {
+    var fakeBody = document.createElement("body");
+    var testElement = document.createElement("div");
+    testElement.style.border = ".5px solid transparent";
+    fakeBody.appendChild(testElement);
+    docEl.appendChild(fakeBody);
+    if (testElement.offsetHeight === 1) {
+      docEl.classList.add("hairlines");
+    }
+    docEl.removeChild(fakeBody);
+  }
+})(window, document);
diff --git a/src/utils/infoBox_min.js b/src/utils/infoBox_min.js
new file mode 100644
index 0000000..af76fb0
--- /dev/null
+++ b/src/utils/infoBox_min.js
@@ -0,0 +1,485 @@
+var BMapLib = (window.BMapLib = BMapLib || {})
+var INFOBOX_AT_TOP = 1,
+  INFOBOX_AT_RIGHT = 2,
+  INFOBOX_AT_BOTTOM = 3,
+  INFOBOX_AT_LEFT = 4
+;(function () {
+  var b,
+    a = (b = a || { version: '1.5.0' })
+  a.guid = '$BAIDU$'
+  ;(function () {
+    window[a.guid] = window[a.guid] || {}
+    a.lang = a.lang || {}
+    a.lang.isString = function (d) {
+      return '[object String]' == Object.prototype.toString.call(d)
+    }
+    a.lang.isFunction = function (d) {
+      return '[object Function]' == Object.prototype.toString.call(d)
+    }
+    a.lang.Event = function (d, e) {
+      this.type = d
+      this.returnValue = true
+      this.target = e || null
+      this.currentTarget = null
+    }
+    a.object = a.object || {}
+    a.extend = a.object.extend = function (f, d) {
+      for (var e in d) {
+        if (d.hasOwnProperty(e)) {
+          f[e] = d[e]
+        }
+      }
+      return f
+    }
+    a.event = a.event || {}
+    a.event._listeners = a.event._listeners || []
+    a.dom = a.dom || {}
+    a.dom._g = function (d) {
+      if (a.lang.isString(d)) {
+        return document.getElementById(d)
+      }
+      return d
+    }
+    a._g = a.dom._g
+    a.event.on = function (e, h, j) {
+      h = h.replace(/^on/i, '')
+      e = a.dom._g(e)
+      var i = function (l) {
+          j.call(e, l)
+        },
+        d = a.event._listeners,
+        g = a.event._eventFilter,
+        k,
+        f = h
+      h = h.toLowerCase()
+      if (g && g[h]) {
+        k = g[h](e, h, i)
+        f = k.type
+        i = k.listener
+      }
+      if (e.addEventListener) {
+        e.addEventListener(f, i, false)
+      } else {
+        if (e.attachEvent) {
+          e.attachEvent('on' + f, i)
+        }
+      }
+      d[d.length] = [e, h, j, i, f]
+      return e
+    }
+    a.on = a.event.on
+    a.event.un = function (f, i, e) {
+      f = a.dom._g(f)
+      i = i.replace(/^on/i, '').toLowerCase()
+      var l = a.event._listeners,
+        g = l.length,
+        h = !e,
+        k,
+        j,
+        d
+      while (g--) {
+        k = l[g]
+        if (k[1] === i && k[0] === f && (h || k[2] === e)) {
+          j = k[4]
+          d = k[3]
+          if (f.removeEventListener) {
+            f.removeEventListener(j, d, false)
+          } else {
+            if (f.detachEvent) {
+              f.detachEvent('on' + j, d)
+            }
+          }
+          l.splice(g, 1)
+        }
+      }
+      return f
+    }
+    a.un = a.event.un
+    a.dom.g = function (d) {
+      if ('string' == typeof d || d instanceof String) {
+        return document.getElementById(d)
+      } else {
+        if (d && d.nodeName && (d.nodeType == 1 || d.nodeType == 9)) {
+          return d
+        }
+      }
+      return null
+    }
+    a.g = a.G = a.dom.g
+    a.dom._styleFixer = a.dom._styleFixer || {}
+    a.dom._styleFilter = a.dom._styleFilter || []
+    a.dom._styleFilter.filter = function (e, h, j) {
+      for (var d = 0, g = a.dom._styleFilter, f; (f = g[d]); d++) {
+        if ((f = f[j])) {
+          h = f(e, h)
+        }
+      }
+      return h
+    }
+    a.string = a.string || {}
+    a.string.toCamelCase = function (d) {
+      if (d.indexOf('-') < 0 && d.indexOf('_') < 0) {
+        return d
+      }
+      return d.replace(/[-_][^-_]/g, function (e) {
+        return e.charAt(1).toUpperCase()
+      })
+    }
+    a.dom.setStyle = function (f, e, g) {
+      var h = a.dom,
+        d
+      f = h.g(f)
+      e = a.string.toCamelCase(e)
+      if ((d = h._styleFilter)) {
+        g = d.filter(e, g, 'set')
+      }
+      d = h._styleFixer[e]
+      d && d.set ? d.set(f, g) : (f.style[d || e] = g)
+      return f
+    }
+    a.setStyle = a.dom.setStyle
+    a.dom.setStyles = function (e, f) {
+      e = a.dom.g(e)
+      for (var d in f) {
+        a.dom.setStyle(e, d, f[d])
+      }
+      return e
+    }
+    a.setStyles = a.dom.setStyles
+    a.browser = a.browser || {}
+    a.browser.ie = a.ie = /msie (\d+\.\d+)/i.test(navigator.userAgent)
+      ? document.documentMode || +RegExp['\x241']
+      : undefined
+    a.dom._NAME_ATTRS = (function () {
+      var d = {
+        cellpadding: 'cellPadding',
+        cellspacing: 'cellSpacing',
+        colspan: 'colSpan',
+        rowspan: 'rowSpan',
+        valign: 'vAlign',
+        usemap: 'useMap',
+        frameborder: 'frameBorder',
+      }
+      if (a.browser.ie < 8) {
+        d['for'] = 'htmlFor'
+        d['class'] = 'className'
+      } else {
+        d.htmlFor = 'for'
+        d.className = 'class'
+      }
+      return d
+    })()
+    a.dom.setAttr = function (e, d, f) {
+      e = a.dom.g(e)
+      if ('style' == d) {
+        e.style.cssText = f
+      } else {
+        d = a.dom._NAME_ATTRS[d] || d
+        e.setAttribute(d, f)
+      }
+      return e
+    }
+    a.setAttr = a.dom.setAttr
+    a.dom.setAttrs = function (f, d) {
+      f = a.dom.g(f)
+      for (var e in d) {
+        a.dom.setAttr(f, e, d[e])
+      }
+      return f
+    }
+    a.setAttrs = a.dom.setAttrs
+    a.dom.create = function (f, d) {
+      var g = document.createElement(f),
+        e = d || {}
+      return a.dom.setAttrs(g, e)
+    }
+    b.undope = true
+  })()
+  var c = (BMapLib.InfoBox = function (f, e, d) {
+    this._content = e || ''
+    this._isOpen = false
+    this._map = f
+    this._opts = d = d || {}
+    this._opts.offset = d.offset || new BMap.Size(0, 0)
+    this._opts.boxClass = d.boxClass || 'infoBox'
+    this._opts.boxStyle = d.boxStyle || {}
+    this._opts.closeIconMargin = d.closeIconMargin || '2px'
+    this._opts.closeIconUrl = d.closeIconUrl || 'close.png'
+    this._opts.enableAutoPan = d.enableAutoPan ? true : false
+    this._opts.align = d.align || INFOBOX_AT_TOP
+  })
+  c.prototype = new BMap.Overlay()
+  c.prototype.initialize = function (e) {
+    var d = this
+    var g = (this._div = a.dom.create('div', { class: this._opts.boxClass }))
+    a.dom.setStyles(g, this._opts.boxStyle)
+    g.style.position = 'absolute'
+    this._setContent(this._content)
+    var f = e.getPanes().floatPane
+    f.style.width = 'auto'
+    f.appendChild(g)
+    this._getInfoBoxSize()
+    a.event.on(g, 'onmousedown', function (h) {
+      d._stopBubble(h)
+    })
+    a.event.on(g, 'onmouseover', function (h) {
+      d._stopBubble(h)
+    })
+    a.event.on(g, 'click', function (h) {
+      d._stopBubble(h)
+    })
+    a.event.on(g, 'dblclick', function (h) {
+      d._stopBubble(h)
+    })
+    return g
+  }
+  c.prototype.draw = function () {
+    this._isOpen && this._adjustPosition(this._point)
+  }
+  c.prototype.open = function (d) {
+    var e = this,
+      f
+    if (!this._isOpen) {
+      this._map.addOverlay(this)
+      this._isOpen = true
+      setTimeout(function () {
+        e._dispatchEvent(e, 'open', { point: e._point })
+      }, 10)
+    }
+    if (d instanceof BMap.Point) {
+      f = d
+      this._removeMarkerEvt()
+    } else {
+      if (d instanceof BMap.Marker) {
+        if (this._marker) {
+          this._removeMarkerEvt()
+        }
+        f = d.getPosition()
+        this._marker = d
+        !this._markerDragend &&
+          this._marker.addEventListener(
+            'dragend',
+            (this._markerDragend = function (g) {
+              e._point = g.point
+              e._adjustPosition(e._point)
+              e._panBox()
+              e.show()
+            })
+          )
+        !this._markerDragging &&
+          this._marker.addEventListener(
+            'dragging',
+            (this._markerDragging = function () {
+              e.hide()
+              e._point = e._marker.getPosition()
+              e._adjustPosition(e._point)
+            })
+          )
+      }
+    }
+    this.show()
+    this._point = f
+    this._panBox()
+    this._adjustPosition(this._point)
+  }
+  c.prototype.close = function () {
+    if (this._isOpen) {
+      this._map.removeOverlay(this)
+      this._remove()
+      this._isOpen = false
+      this._dispatchEvent(this, 'close', { point: this._point })
+    }
+  }
+  c.prototype.enableAutoPan = function () {
+    this._opts.enableAutoPan = true
+  }
+  c.prototype.disableAutoPan = function () {
+    this._opts.enableAutoPan = false
+  }
+  c.prototype.setContent = function (d) {
+    this._setContent(d)
+    this._getInfoBoxSize()
+    this._adjustPosition(this._point)
+  }
+  c.prototype.setPosition = function (d) {
+    this._point = d
+    this._adjustPosition(d)
+    this._removeMarkerEvt()
+  }
+  c.prototype.getPosition = function () {
+    return this._point
+  }
+  ;(c.prototype.getOffset = function () {
+    return this._opts.offset
+  }),
+    (c.prototype._remove = function () {
+      var d = this
+      if (this.domElement && this.domElement.parentNode) {
+        a.event.un(this._div.firstChild, 'click', d._closeHandler())
+        this.domElement.parentNode.removeChild(this.domElement)
+      }
+      this.domElement = null
+      this._isOpen = false
+      this.dispatchEvent('onremove')
+    }),
+    a.object.extend(c.prototype, {
+      _getCloseIcon: function () {
+        var d =
+          "<img src='" +
+          this._opts.closeIconUrl +
+          "' align='right' style='position:absolute;right:0px;cursor:pointer;margin:" +
+          this._opts.closeIconMargin +
+          "'/>"
+        return d
+      },
+      _setContent: function (e) {
+        if (!this._div) {
+          return
+        }
+        var d = this._getCloseIcon()
+        if (typeof e.nodeType === 'undefined') {
+          this._div.innerHTML = d + e
+        } else {
+          this._div.innerHTML = d
+          this._div.appendChild(e)
+        }
+        this._content = e
+        this._addEventToClose()
+      },
+      _adjustPosition: function (f) {
+        var d = this._getPointPosition(f)
+        var e = this._marker && this._marker.getIcon()
+        switch (this._opts.align) {
+          case INFOBOX_AT_TOP:
+            if (this._marker) {
+              this._div.style.bottom =
+                -(
+                  d.y -
+                  this._opts.offset.height -
+                  e.anchor.height +
+                  e.infoWindowAnchor.height
+                ) -
+                this._marker.getOffset().height +
+                2 +
+                'px'
+            } else {
+              this._div.style.bottom = -(d.y - this._opts.offset.height) + 'px'
+            }
+            break
+          case INFOBOX_AT_BOTTOM:
+            if (this._marker) {
+              this._div.style.top =
+                d.y +
+                this._opts.offset.height -
+                e.anchor.height +
+                e.infoWindowAnchor.height +
+                this._marker.getOffset().height +
+                'px'
+            } else {
+              this._div.style.top = d.y + this._opts.offset.height + 'px'
+            }
+            break
+        }
+        if (this._marker) {
+          this._div.style.left =
+            d.x -
+            e.anchor.width +
+            this._marker.getOffset().width +
+            e.infoWindowAnchor.width -
+            this._boxWidth / 2 +
+            'px'
+        } else {
+          this._div.style.left = d.x - this._boxWidth / 2 + 'px'
+        }
+      },
+      _getPointPosition: function (d) {
+        this._pointPosition = this._map.pointToOverlayPixel(d)
+        return this._pointPosition
+      },
+      _getInfoBoxSize: function () {
+        this._boxWidth = parseInt(this._div.offsetWidth, 10)
+        this._boxHeight = parseInt(this._div.offsetHeight, 10)
+      },
+      _addEventToClose: function () {
+        var d = this
+        a.event.on(this._div.firstChild, 'click', d._closeHandler())
+        this._hasBindEventClose = true
+      },
+      _closeHandler: function () {
+        var d = this
+        return function (f) {
+          d.close()
+        }
+      },
+      _stopBubble: function (d) {
+        if (d && d.stopPropagation) {
+          d.stopPropagation()
+        } else {
+          window.event.cancelBubble = true
+        }
+      },
+      _panBox: function () {
+        if (!this._opts.enableAutoPan) {
+          return
+        }
+        var i = parseInt(this._map.getContainer().offsetHeight, 10),
+          o = parseInt(this._map.getContainer().offsetWidth, 10),
+          j = this._boxHeight,
+          d = this._boxWidth
+        if (j >= i || d >= o) {
+          return
+        }
+        if (!this._map.getBounds().containsPoint(this._point)) {
+          this._map.setCenter(this._point)
+        }
+        var e = this._map.pointToPixel(this._point),
+          p,
+          m,
+          l,
+          g = d / 2 - e.x,
+          n = d / 2 + e.x - o
+        if (this._marker) {
+          var k = this._marker.getIcon()
+        }
+        switch (this._opts.align) {
+          case INFOBOX_AT_TOP:
+            var f = this._marker
+              ? k.anchor.height +
+                this._marker.getOffset().height -
+                k.infoWindowAnchor.height
+              : 0
+            p = j - e.y + this._opts.offset.height + f + 2
+            break
+          case INFOBOX_AT_BOTTOM:
+            var f = this._marker
+              ? -k.anchor.height +
+                k.infoWindowAnchor.height +
+                this._marker.getOffset().height +
+                this._opts.offset.height
+              : 0
+            m = j + e.y - i + f + 4
+            break
+        }
+        panX = g > 0 ? g : n > 0 ? -n : 0
+        l = p > 0 ? p : m > 0 ? -m : 0
+        this._map.panBy(panX, l)
+      },
+      _removeMarkerEvt: function () {
+        this._markerDragend &&
+          this._marker.removeEventListener('dragend', this._markerDragend)
+        this._markerDragging &&
+          this._marker.removeEventListener('dragging', this._markerDragging)
+        this._markerDragend = this._markerDragging = null
+      },
+      _dispatchEvent: function (d, e, g) {
+        e.indexOf('on') != 0 && (e = 'on' + e)
+        var f = new a.lang.Event(e)
+        if (!!g) {
+          for (var h in g) {
+            f[h] = g[h]
+          }
+        }
+        d.dispatchEvent(f)
+      },
+    })
+})()
diff --git a/src/views/index.vue b/src/views/index.vue
index 4fe39cc..4082ebe 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,35 +1,975 @@
 <template>
+<!--      <iframe class="network_show" name="content_frame" src="https://www.huastech.com.cn/BMap/index.html" frameborder=0  scrolling="no"></iframe>-->
   <div class="app-container">
-      <iframe class="network_show" name="content_frame" src="https://www.huastech.com.cn/BMap/index.html" frameborder=0  scrolling="no"></iframe>
+    <div id="app">
+      <div class="main">
+        <!-- 标题栏 -->
+        <header>
+          <h1>视频水位计数据监控大屏</h1>
+        </header>
+        <div class="left">
+          <!-- 实时水位 -->
+          <div class="panel feet">
+            <div class="title">
+              <div class="i arrow"></div>
+              <h2>实时水位</h2>
+            </div>
+            <div class="article">
+              <div>测站名称</div>
+              <div>更新时间</div>
+              <div>水尺数据</div>
+            </div>
+            <div class="table">
+              <div id="contain">
+                <div class="item" v-for="item in station" :key="item.id">
+                  <div>{{item.stnm}}</div>
+                  <div>{{item.startTime | guard}}</div>
+                  <div>{{item.value}}m</div>
+                </div>
+              </div>
+              <div id="vice"></div>
+            </div>
+            <div class="panel-footer"></div>
+            <div class="blur"></div>
+          </div>
+          <!-- 水位计分布 -->
+          <div class="panel dist">
+            <div class="title">
+              <div class="i arrow"></div>
+              <h2>水位计分布</h2>
+            </div>
+            <div class="chart"></div>
+            <div class="panel-footer"></div>
+            <div class="blur"></div>
+          </div>
+        </div>
+        <div class="right">
+          <div class="showTime"></div>
+          <!-- 水位趋势 -->
+          <div class="panel line">
+            <div class="drop">
+              <div class="dropbtn">选择测站</div>
+              <div class="dropcontent">
+                <div class="item" v-for="item in showLevel" :key="item.id" @click="toggle(item)">
+                  <div class="spot" :style="{visibility: item.flag? 'visible': 'hidden'}"></div>
+                  {{item.stnm}}
+                </div>
+              </div>
+            </div>
+            <div class="title">
+              <div class="i arrow"></div>
+              <h2>水位趋势</h2>
+            </div>
+            <div class="chart"></div>
+            <div class="panel-footer"></div>
+            <div class="blur"></div>
+          </div>
+          <!-- 设备在线状况 -->
+          <div class="panel pie">
+            <div class="title">
+              <div class="i arrow"></div>
+              <h2>设备在线状况</h2>
+            </div>
+            <div class="chart"></div>
+            <div class="panel-footer"></div>
+            <div class="blur"></div>
+          </div>
+        </div>
 
-        <!-- <el-button type="primary" >确 定</el-button> -->
+        <!-- 地图 -->
+        <div id="container" style="height: 800px;width: 100%"></div>
+        <!-- 放大图片 -->
+        <transition name="fade">
+          <div id="mask" v-show="showMask" @click="showMask = false">
+            <div id="image"></div>
+          </div>
+        </transition>
+      </div>
+    </div>
   </div>
 </template>
-
 <script>
+import echarts from 'echarts'
+import "../utils/flexible"
+import "../utils/infoBox_min"
 export default {
   name: "Index",
   data() {
     return {
       // 版本号
       version: "3.8.2",
-    };
+      // 数据接口
+      api: ' http://localhost/control-api/api/daping/station/',
+      // 图片接口
+      imgapi: 'https://www.huastech.com.cn',
+      // 接口数据
+      station: [],
+      level: {},
+      status: [],
+      dist: {
+        stnms: ['鄞州公园', '横溪镇-上街'],
+        values: [
+          { isLive: '在线', value: [1, 2]},
+          { isLive: '离线', value: [1, 1]}
+        ]
+      },
+
+      // 图表
+      echarts: [],
+      // 显示水位数据
+      showLevel: [],
+      // 地图
+      center: [121.549720, 29.814340],
+      map: null,
+      // 遮罩
+      showMask: false,
+      markers:[],
+      // 轮播定时器
+      box: null,
+      play: null,
+      flag: false,
+      // 无缝滚动
+      roll: null,
+      timer: null,
+      age: 21
+    }
+  },
+  filters: {
+    // 格式化时间
+    guard(e) {
+      return e.slice(11, 19)
+    }
+  },
+  mounted() {
+    // 间隔5分钟获取数据
+    this.getList()
+    // setInterval(this.getList(), 300000)
+    this.setMap()
+    this.setTime()
+    // 打开页面过小时,弹出警告
+    if(window.innerWidth < 1200) {
+      alert('页面过小可能影响数据显示！')
+    }
   },
   methods: {
-    goTarget(href) {
-      window.open(href, "_blank");
+    // 获取数据
+    async getList() {
+      // 测站数据
+      fetch(this.api+'info')
+        .then(e => e.json())
+        .then(e => {
+          this.station = e
+          e.forEach(station => {
+            if(this.showLevel.some(item => item.id == station.id)) return
+            this.showLevel.push({
+              id: station.id,
+              stnm: station.stnm,
+              flag: this.showLevel.filter(e => e.flag).length<5? true: false
+            })
+          })
+
+          // 水位数据
+          let show = this.showLevel.filter(item => item.flag)
+          let id = show.length? show.map(item => item.id).join(): this.showLevel[0].id
+          fetch(this.api + 'waterLevelTrend?ids=' + id)
+            .then(e => e.json())
+            .then(e => {
+              this.level = e.data
+              this.setLine()
+            })
+            .catch(e => { console.error(e) })
+
+          this.setMarks()
+          this.playInfobox()
+          this.setTable()
+        })
+        .catch(e => { console.error(e) })
+      // 在线数据
+      fetch(this.api + 'status')
+        .then(e => e.json())
+        .then(e => {
+          this.status = e.data
+          this.setPie()
+          this.setDist()
+        })
+        .catch(e => { console.error(e) })
+
+      return this.getList
     },
-  },
+
+    // 实时时间
+    setTime() {
+      var t = null;
+      t = setTimeout(time, 1000); //開始运行
+      function time() {
+        clearTimeout(t); //清除定时器
+        var dt = new Date();
+        var y = dt.getFullYear();
+        var mt = dt.getMonth() + 1;
+        var day = dt.getDate();
+        var h = dt.getHours();
+        var m = dt.getMinutes();
+        var s = dt.getSeconds();
+        document.querySelector(".showTime").innerHTML =
+          y +
+          "年" +
+          mt +
+          "月" +
+          day +
+          "日 " +
+          h +
+          "时" +
+          m +
+          "分" +
+          s +
+          "秒";
+        t = setTimeout(time, 1000);
+      }
+    },
+
+    // 实时水位滚动
+    setTable() {
+      var table = document.querySelector('.table')
+      if(table.scrollHeight < table.clientHeight+1) return
+      var box = document.querySelector('#contain')
+      var vice = document.querySelector('#vice')
+      vice.innerHTML = box.innerHTML
+      vice.style.paddingBottom = table.clientHeight + 'px'
+      this.roll = () => {
+        if(table.scrollTop > box.scrollHeight-1) {
+          table.scrollTop = 0
+        }
+        table.scrollTop++
+      }
+      this.timer = setInterval(() => {
+        this.roll()
+      }, 50)
+      table.addEventListener('mouseenter', () => {
+        clearInterval(this.timer)
+      })
+      table.addEventListener('mouseleave', () => {
+        this.timer = setInterval(() => {
+          this.roll()
+        }, 50)
+      })
+    },
+
+    setLine() {
+      if(this.echarts[0] && this.echarts[0]._dom) {
+        this.echarts[0].dispose()
+      }
+      var myChart = echarts.init(document.querySelector(".line .chart"));
+      this.echarts[0] = myChart
+      var option = {
+        tooltip: {
+          trigger: "axis"
+        },
+        legend: {
+          top: "0%",
+          data: this.level.stnms,
+          textStyle: {
+            color: "hsla(200, 88%, 94%, .88)",
+            fontSize: "12"
+          }
+        },
+
+        grid: {
+          left: "10",
+          top: "30",
+          right: "10",
+          bottom: "10",
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            // x轴更换数据
+            data: this.level.tms,
+            axisLabel: {
+              formatter: value => value.slice(11, 13),
+              textStyle: {
+                color: "hsla(200, 88%, 94%, .88)",
+                fontSize: 12
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,.2)"
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: "value",
+            scale: true,
+            axisTick: { show: false },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,.1)"
+              }
+            },
+            axisLabel: {
+              formatter: '{value} m',
+              textStyle: {
+                color: "hsla(200, 88%, 94%, .88)",
+                fontSize: 12
+              }
+            },
+            // 修改分割线的颜色
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,.1)"
+              }
+            }
+          }
+        ],
+        series: []
+      }
+      this.level.values.forEach((item, index) => {
+        option.series.push({
+          name: item.stnm,
+          type: 'line',
+          smooth: true,
+          lineStyle: {
+            color: 'hsl('+ (45 + index*55) + ', 96%, 55%)',
+            width: '2'
+          },
+          // 填充颜色设置
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: 'hsla('+ (45 + index*55) + ', 96%, 55%, .4)' // 渐变色的起始颜色
+                },
+                {
+                  offset: 0.8,
+                  color: 'hsla('+ (45 + index*55) + ', 96%, 55%, .1)' // 渐变线的结束颜色
+                }
+              ],
+              false
+            ),
+            shadowColor: "rgba(0, 0, 0, 0.1)"
+          },
+          // 设置拐点
+          symbol: "circle",
+          // 拐点大小
+          symbolSize: 5,
+          // 开始不显示拐点， 鼠标经过显示
+          showSymbol: false,
+          // 设置拐点颜色以及边框
+          itemStyle: {
+            color: 'hsl('+ (45 + index*55) + ', 96%, 55%)',
+            borderColor: "rgba(221, 220, 107, .1)",
+            borderWidth: 12
+          },
+          data: item.value
+        })
+      })
+      myChart.setOption(option);
+      // 4. 让图表跟随屏幕自动的去适应
+      window.addEventListener("resize", function() {
+        myChart.resize();
+      });
+    },
+
+    setPie() {
+      if(this.echarts[1] && this.echarts[1]._dom) {
+        this.echarts[1].dispose()
+      }
+      var myChart = echarts.init(document.querySelector(".pie .chart"));
+      this.echarts[1] = myChart
+      var option = {
+        color: [
+          'hsl(100, 96%, 55%)',
+          'hsl(0, 0%, 66%)'
+        ],
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          bottom: "0%",
+          itemWidth: 10,
+          itemHeight: 10,
+          textStyle: {
+            color: 'hsla(200, 88%, 94%, .88)',
+            fontSize: "16"
+          }
+        },
+        series: [
+          {
+            name: '设备在线状况',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 8
+            },
+            label: {
+              show: false,
+              position: 'center',
+              fontSize: 20,
+              color: '#fafafa',
+              formatter: '{c}'
+            },
+            labelLine: {
+              show: false
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '40',
+              }
+            },
+            data: this.status
+          }
+        ]
+      };
+      myChart.setOption(option);
+      // 监听浏览器缩放，图表对象调用缩放resize函数
+      window.addEventListener("resize", function() {
+        myChart.resize();
+      });
+    },
+
+    setDist() {
+      if(this.echarts[2] && this.echarts[2]._dom) {
+        this.echarts[2].dispose()
+      }
+      var myChart = echarts.init(document.querySelector(".dist .chart"));
+      this.echarts[2] = myChart
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          top: "0%",
+          textStyle: {
+            color: "hsla(200, 88%, 94%, .88)",
+            fontSize: "12"
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          minInterval: 1,
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(255,255,255,.2)'
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: "hsla(200, 88%, 94%, .88)",
+              fontSize: 12
+            }
+          }
+        },
+        yAxis: {
+          type: 'category',
+          axisLabel: {
+            textStyle: {
+              color: "hsla(200, 88%, 94%, .88)",
+              fontSize: 12
+            }
+          },
+          data: this.dist.stnms
+        },
+        series: []
+      }
+      this.dist.values.forEach((item, index) => {
+        option.series.push({
+          name: item.isLive,
+          type: 'bar',
+          stack: 'total',
+          label: {
+            show: true,
+            color: '#fff',
+            fontStyle: 'italic',
+            fontWeight: 'bold'
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          itemStyle: {
+            normal: {
+              color: index? 'hsl(0, 0%, 66%)': 'hsl(100, 96%, 55%)'
+            }
+          },
+          data: item.value
+        })
+      })
+      myChart.setOption(option);
+      // 监听浏览器缩放，图表对象调用缩放resize函数
+      window.addEventListener("resize", function() {
+        myChart.resize();
+      });
+    },
+
+    setMap() {
+      if(this.map) return
+      // 地图对象
+      var map = this.map = new BMap.Map("container");
+      map.enableScrollWheelZoom(true);
+      // 定位
+      var center = new BMap.Point(this.center[0], this.center[1]);
+      // 生成地图
+      map.centerAndZoom(center, 12);
+
+      // 地图样式
+      map.setMapStyleV2({
+        styleId: '27148e6493e835dbb1bee250cffea552'
+      });
+    },
+
+    // 创建地标
+    setMarks() {
+      if(this.markers) {
+        this.markers.forEach(item => {
+          this.map.removeOverlay(item)
+        })
+        this.markers = []
+      }
+      // 标注图标
+      var ico = new BMap.Icon('../assets/images/marker.png', new BMap.Size(50, 24), { anchor: new BMap.Size(25, 12) })
+      // 创建标注
+      this.station.forEach(item => {
+        var p = new BMap.Point(item.longitude,item.latitude);
+        var marker = new BMap.Marker(p, { icon: ico })
+        this.markers.push(marker)
+        // , { icon: new BMap.Icon("../assets/images/tray.png", new BMap.Size(44, 30))}
+        this.map.addOverlay(marker);
+        // 点击地标打开窗口
+        marker.addEventListener('click', () => {
+          clearInterval(this.play)
+          this.box.close()
+          this.flag = false
+          let box = this.box = this.setInfoBox(this.map, marker, item)
+          setTimeout(() => {
+            box.close()
+            this.playInfobox()
+          }, 9999)
+        })
+      })
+    },
+
+    // 创建信息框
+    setInfoBox(map, marker, item) {
+      let htmlStr = `
+        <div style="height: 100%; position: relative;">
+          <div style="position: absolute; left: 14px; top: 33px; z-index: -1; background: hsla(200, 88%, 33%, .6); box-shadow: 0 0 16px hsl(200, 88%, 33%); width: 336px; height: 135px;"></div>
+          <div style="background: url('../assets/images/border.png') center center; width: 100%; height: 100%; color: #effaff; font-size: 18px; text-shadow: 2px 2px 4px #17263C; display: flex;">
+            <div style="flex: 1; padding: 66px 0 0 20px;">
+              <div style="height: 30px; white-space: nowrap; word-wrap: ellipsis; overflow: hidden;">站点: ${item.stnm}</div>
+              <div style="height: 30px;">水位: ${item.value}m</div>
+              <div style="white-space: pre-wrap;">时间: ${item.startTime.slice(11, 19)}</div>
+            </div>
+            <div style="flex: 1; padding: 52px 20px 40px 0;">
+              <div class="thumbnail" style="background: url('${this.imgapi + item.imgName}') center center/contain no-repeat; width: 100%; height: 100%; cursor: zoom-in"></div>
+            </div>
+          </div>
+        </div>`
+      var infobox = new BMapLib.InfoBox(map, htmlStr, {
+        boxStyle: {
+          width: "363px",
+          height: "210px"
+        },
+        closeIconUrl: '../assets/images/close.png',  //关闭按钮的url地址
+      })
+      infobox.open(marker)
+
+      // 点击缩略图展示图片
+      let img = document.querySelector('.thumbnail')
+      let i = img.style.backgroundImage
+      img.addEventListener('click', () => {
+        document.querySelector('#image').style.background = i + ' center center/contain no-repeat'
+        this.showMask = true
+      })
+
+      return infobox;
+    },
+
+    // 信息框轮播
+    playInfobox() {
+      if(this.flag) return
+      this.flag = true
+      let i = 0
+      let fn = () => {
+        if(++i >= this.station.length) {
+          i = 0
+        }
+        if(this.box) {
+          this.box.close()
+        }
+        this.box = this.setInfoBox(this.map, this.markers[i], this.station[i])
+        return fn
+      }
+      this.play = setInterval(fn(), 5555)
+    },
+
+    // 更改显示水位数据
+    toggle(e) {
+      let showMem = this.showLevel.filter(item => item.flag)
+      if(!e.flag && showMem > 4) return
+      e.flag = !e.flag
+      showMem = this.showLevel.filter(item => item.flag)
+      let id = showMem.length? showMem.map(item => item.id).join(): this.showLevel[0].id
+      fetch(this.api + 'waterLevelTrend?ids=' + id)
+        .then(e => e.json())
+        .then(e => {
+          this.level = e.data
+          this.setLine()
+        })
+        .catch(e => { console.error(e) })
+    }
+  }
 };
 </script>
 
-
-<style scoped lang="scss">
+<style scoped>
   .app-container{
-    height: 100%;
+    height: 800px;
+    width: 100%;
   }
   .network_show{
     width: 100%;
     height: 800px;
   }
+
+  :root {
+    --fz: 16;
+  }
+  @keyframes panelbg {
+    to {
+      background: url(../assets/images/line.png) rgba(255, 255, 255, 0.06);
+    }
+  }
+  @keyframes roll {
+    to {
+      transform: translateY(-30px);
+    }
+  }
+  .turn {
+    animation: roll 2s linear;
+  }
+  #mask {
+    position: fixed;
+    z-index: 9;
+    width: 100%;
+    height: 100%;
+    background: hsla(0, 0%, 33%, 0.3);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  #mask #image {
+    width: 70%;
+    height: 70%;
+  }
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.4s;
+  }
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+  }
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  html {
+    height: 100%;
+    min-width: 1200px;
+    min-height: 600px;
+    overflow: auto;
+  }
+  body {
+    height: 100%;
+    overflow: hidden;
+    font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
+  }
+  #app {
+    height: 100%;
+    position: relative;
+  }
+  #container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+  /* 去logo */
+  .BMap_cpyCtrl {
+    display: none;
+  }
+  .anchorBL {
+    display: none;
+  }
+  .main {
+    height: 100%;
+  }
+  header {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 1.25rem;
+    background: url(../assets/images/head_bg.png) no-repeat top center;
+    background-size: 100% 100%;
+    overflow: hidden;
+    pointer-events: none;
+  }
+  header h1 {
+    font-size: 0.475rem;
+    color: hsl(0, 0%, 100%);
+    text-shadow: 0 0 4px hsl(200, 88%, 55%), 0 0 8px hsl(180, 88%, 66%);
+    text-align: center;
+    line-height: 1rem;
+  }
+  .left {
+    position: absolute;
+    z-index: 1;
+    width: 20vw;
+    height: 100%;
+    padding: 1vw;
+    background: linear-gradient(90deg, #12263E, transparent);
+    transition: opacity 1s ease-out;
+  }
+  .left .panel {
+    margin-top: 5vw;
+  }
+  .left .article {
+    color: hsla(180, 88%, 66%, 0.94);
+    font-size: 14px;
+    display: flex;
+    padding: 0.5vw 0;
+    background: hsla(200, 88%, 55%, 0.2);
+  }
+  .left .article div {
+    flex: 1;
+    padding-left: 0.5vw;
+  }
+  .left .table {
+    height: 80%;
+    overflow: hidden;
+    color: hsla(200, 88%, 94%, 0.88);
+  }
+  .left .table .item {
+    display: flex;
+    height: 22px;
+    line-height: 18px;
+    font-size: 14px;
+    padding-bottom: 4px;
+    color: hsla(200, 88%, 94%, 0.88);
+  }
+  .left .table .item div {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-left: 0.5vw;
+  }
+  .left:hover {
+    opacity: 0.9;
+  }
+  .right {
+    position: absolute;
+    z-index: 1;
+    right: 0;
+    width: 20vw;
+    height: 100%;
+    padding: 1vw;
+    background: linear-gradient(270deg, #12263E, transparent);
+    transition: opacity 1s ease-out;
+  }
+  .right .panel {
+    margin-top: 5vw;
+  }
+  .right:hover {
+    opacity: 0.9;
+  }
+  .right .showTime {
+    position: absolute;
+    top: 0.3rem;
+    right: 0.375rem;
+    font-size: 0.3rem;
+    color: hsla(180, 88%, 55%, 0.88);
+  }
+  .right .drop {
+    position: absolute;
+    z-index: 1;
+    right: 1.2vw;
+    top: 0.5vw;
+  }
+  .right .drop .dropbtn {
+    width: 5.4vw;
+    height: 1.6vw;
+    margin-left: auto;
+    padding-left: 0.4vw;
+    color: hsla(180, 88%, 66%, 0.94);
+    font-size: 0.9vw;
+    background: hsla(200, 88%, 55%, 0.2);
+    display: flex;
+    align-items: center;
+  }
+  .right .drop .dropcontent {
+    display: none;
+    cursor: pointer;
+    color: #fafafa;
+  }
+  .right .drop .dropcontent .item {
+    padding: 0 0.4vw 0.4vw 0;
+    background: hsla(0, 0%, 0%, 0.3);
+  }
+  .right .drop .dropcontent .item:hover {
+    background: hsla(0, 0%, 0%, 0.5);
+  }
+  .right .drop .dropcontent .item .spot {
+    display: inline-block;
+    width: 1.6vw;
+    height: 1.6vw;
+    position: relative;
+  }
+  .right .drop .dropcontent .item .spot::before {
+    content: '';
+    position: absolute;
+    left: 40%;
+    top: 60%;
+    width: 0.6vw;
+    height: 0.6vw;
+    background: hsla(180, 88%, 66%, 0.94);
+    border-radius: 50%;
+  }
+  .right .drop::before {
+    content: '';
+    position: absolute;
+    right: 0.5vw;
+    top: 0.5vw;
+    width: 0.4vw;
+    height: 0.4vw;
+    border-right: 1px solid hsla(180, 88%, 66%, 0.94);
+    border-bottom: 1px solid hsla(180, 88%, 66%, 0.94);
+    transform: rotate(45deg);
+    transition: all 0.5s;
+  }
+  .right .drop:hover::before {
+    transform: translateY(0.3vw) rotate(225deg);
+  }
+  .right .drop:hover .dropcontent {
+    display: block;
+  }
+  .panel {
+    position: relative;
+    height: 3.875rem;
+    padding: 0 0.1875rem 0.5rem;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+    margin-bottom: 0.1875rem;
+    background: url(../assets/images/line.png) rgba(255, 255, 255, 0.03);
+    box-shadow: inset 0 0 8px 1px rgba(23, 38, 60, 0.2);
+  }
+  .panel:hover {
+    animation: panelbg 0.5s ease-out forwards;
+    box-shadow: none;
+  }
+  .panel::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 10px;
+    height: 10px;
+    border-left: 2px solid #02a6b5;
+    border-top: 2px solid #02a6b5;
+    content: "";
+  }
+  .panel::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 10px;
+    height: 10px;
+    border-right: 2px solid #02a6b5;
+    border-top: 2px solid #02a6b5;
+    content: "";
+  }
+  .panel .title {
+    display: flex;
+    align-items: center;
+  }
+  .panel .title .arrow {
+    margin-right: 0.6vw;
+    transform: rotate(270deg) scaleY(1.2);
+    background: linear-gradient(135deg, hsl(200, 88%, 66%) 33%, hsl(200, 88%, 88%) 60%);
+    -webkit-background-clip: text;
+    color: transparent;
+  }
+  .panel .panel-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+  }
+  .panel .panel-footer::before {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 10px;
+    height: 10px;
+    border-left: 2px solid #02a6b5;
+    border-bottom: 2px solid #02a6b5;
+    content: "";
+  }
+  .panel .panel-footer::after {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 10px;
+    height: 10px;
+    border-right: 2px solid #02a6b5;
+    border-bottom: 2px solid #02a6b5;
+    content: "";
+  }
+  .panel h2 {
+    height: 0.6rem;
+    color: hsl(200, 88%, 74%);
+    line-height: 0.6rem;
+    text-align: center;
+    font-size: 0.33rem;
+    font-weight: 400;
+  }
+  .panel h2 a {
+    color: #fff;
+    text-decoration: none;
+    margin: 0 0.125rem;
+  }
+  .panel .chart {
+    height: 3rem;
+  }
+  .panel .blur {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: hsla(200, 55%, 55%, 0.2);
+  }
+
 </style>