From 50f75ff39433b92c6487f43436ebc4f59483ec59 Mon Sep 17 00:00:00 2001 From: ailanyin Date: Fri, 5 May 2023 15:55:40 +0800 Subject: [PATCH] temp --- package.json | 3 + public/index.html | 28 +- src/App.vue | 42 +- src/assets/fonts/demo.css | 77 ++-- src/assets/fonts/demo_index.html | 696 ++++++++++++++++--------------- src/assets/fonts/iconfont.css | 11 +- src/assets/fonts/iconfont.js | 70 +--- src/assets/fonts/iconfont.json | 7 + src/assets/fonts/iconfont.ttf | Bin 2732 -> 2948 bytes src/assets/fonts/iconfont.woff | Bin 1660 -> 1812 bytes src/assets/fonts/iconfont.woff2 | Bin 1228 -> 1368 bytes src/assets/test.js | 50 +++ src/components/CameraItem.vue | 640 +++++++++++++++++++++------- src/components/CameraList.vue | 414 +++++++++--------- src/main.js | 6 +- src/store/token.js | 22 + vue.config.js | 35 +- yarn.lock | 23 + 18 files changed, 1268 insertions(+), 856 deletions(-) create mode 100644 src/assets/test.js create mode 100644 src/store/token.js diff --git a/package.json b/package.json index 3ae2aa1..15d0c35 100644 --- a/package.json +++ b/package.json @@ -8,11 +8,14 @@ "lint": "vue-cli-service lint" }, "dependencies": { + "@vicons/ionicons5": "^0.12.0", "autoprefixer": "^10.4.12", "axios": "^1.1.3", "core-js": "^3.8.3", "flv.js": "^1.6.2", + "lodash-es": "^4.17.21", "modern-normalize": "^1.1.0", + "pinia": "^2.0.33", "postcss-pxtorem": "^6.0.0", "vue": "^3.2.13" }, diff --git a/public/index.html b/public/index.html index 27785d3..ebe4abd 100644 --- a/public/index.html +++ b/public/index.html @@ -1,26 +1,26 @@ - + - - - - - - - 视频监控 + + + + + + + 视频监控 - +
+ \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 5338bc0..c7307d5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,27 +1,43 @@ diff --git a/src/assets/fonts/demo.css b/src/assets/fonts/demo.css index 840ce0a..a67054a 100644 --- a/src/assets/fonts/demo.css +++ b/src/assets/fonts/demo.css @@ -1,15 +1,11 @@ /* Logo 字体 */ @font-face { font-family: "iconfont logo"; - src: url("https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834"); - src: url("https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix") - format("embedded-opentype"), - url("https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834") - format("woff"), - url("https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834") - format("truetype"), - url("https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont") - format("svg"); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); } .logo { @@ -52,6 +48,7 @@ color: #666; } + #tabs .active { border-bottom-color: #f00; color: #222; @@ -218,35 +215,35 @@ margin: 1em 0; } -.markdown > p, -.markdown > blockquote, -.markdown > .highlight, -.markdown > ol, -.markdown > ul { +.markdown>p, +.markdown>blockquote, +.markdown>.highlight, +.markdown>ol, +.markdown>ul { width: 80%; } -.markdown ul > li { +.markdown ul>li { list-style: circle; } -.markdown > ul li, -.markdown blockquote ul > li { +.markdown>ul li, +.markdown blockquote ul>li { margin-left: 20px; padding-left: 4px; } -.markdown > ul li p, -.markdown > ol li p { +.markdown>ul li p, +.markdown>ol li p { margin: 0.6em 0; } -.markdown ol > li { +.markdown ol>li { list-style: decimal; } -.markdown > ol li, -.markdown blockquote ol > li { +.markdown>ol li, +.markdown blockquote ol>li { margin-left: 20px; padding-left: 4px; } @@ -263,7 +260,7 @@ font-weight: 600; } -.markdown > table { +.markdown>table { border-collapse: collapse; border-spacing: 0px; empty-cells: show; @@ -272,21 +269,21 @@ margin-bottom: 24px; } -.markdown > table th { +.markdown>table th { white-space: nowrap; color: #333; font-weight: 600; } -.markdown > table th, -.markdown > table td { +.markdown>table th, +.markdown>table td { border: 1px solid #e9e9e9; padding: 8px 16px; text-align: left; } -.markdown > table th { - background: #f7f7f7; +.markdown>table th { + background: #F7F7F7; } .markdown blockquote { @@ -321,11 +318,12 @@ display: inline-block; } -.markdown > br, -.markdown > p > br { +.markdown>br, +.markdown>p>br { clear: both; } + .hljs { display: block; background: white; @@ -406,7 +404,7 @@ pre[class*="language-"] { color: black; background: none; text-shadow: 0 1px white; - font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; text-align: left; white-space: pre; word-spacing: normal; @@ -441,6 +439,7 @@ code[class*="language-"] ::selection { } @media print { + code[class*="language-"], pre[class*="language-"] { text-shadow: none; @@ -450,19 +449,19 @@ code[class*="language-"] ::selection { /* Code blocks */ pre[class*="language-"] { padding: 1em; - margin: 0.5em 0; + margin: .5em 0; overflow: auto; } -:not(pre) > code[class*="language-"], +:not(pre)>code[class*="language-"], pre[class*="language-"] { background: #f5f2f0; } /* Inline code */ -:not(pre) > code[class*="language-"] { - padding: 0.1em; - border-radius: 0.3em; +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; white-space: normal; } @@ -478,7 +477,7 @@ pre[class*="language-"] { } .namespace { - opacity: 0.7; + opacity: .7; } .token.property, @@ -506,7 +505,7 @@ pre[class*="language-"] { .language-css .token.string, .style .token.string { color: #9a6e3a; - background: hsla(0, 0%, 100%, 0.5); + background: hsla(0, 0%, 100%, .5); } .token.atrule, @@ -517,7 +516,7 @@ pre[class*="language-"] { .token.function, .token.class-name { - color: #dd4a68; + color: #DD4A68; } .token.regex, diff --git a/src/assets/fonts/demo_index.html b/src/assets/fonts/demo_index.html index ba6e71c..19d34d5 100644 --- a/src/assets/fonts/demo_index.html +++ b/src/assets/fonts/demo_index.html @@ -1,170 +1,150 @@ - - - iconfont Demo - - - - - - - - - - - - - -
-

- - - -

-
-
    -
  • Unicode
    • -
  • Font class
    • -
  • Symbol
    • -
- - 查看项目 -
-
-
+ .main .logo .sub-title { + margin-left: 0.5em; + font-size: 22px; + color: #fff; + background: linear-gradient(-45deg, #3967FF, #B500FE); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + + +
+

+ + +

+
+
    +
  • Unicode
    • +
  • Font class
    • +
  • Symbol
    • +
+ + 查看项目 + +
+
+
    + +
  • + +
    close
    +
    
    +
    • +
  • -
    left
    -
    
    -
    • - +
    left
    +
    
    + +
  • -
    down
    -
    
    -
    • - +
    down
    +
    
    + +
  • -
    right
    -
    
    -
    • - +
    right
    +
    
    + +
  • -
    up
    -
    
    -
    • - +
    up
    +
    
    + +
  • -
    prev
    -
    
    -
    • - +
    prev
    +
    
    + +
  • -
    next
    -
    
    -
    • - +
    next
    +
    
    + +
  • -
    取消全屏_o
    -
    
    -
    • - +
    取消全屏_o
    +
    
    + +
  • -
    播放_o
    -
    
    -
    • - +
    播放_o
    +
    
    + +
  • -
    暂停_o
    -
    
    -
    • - +
    暂停_o
    +
    
    + +
  • -
    全屏_o
    -
    
    -
    • +
    全屏_o
    +
    
    + +
-

Unicode 引用

-
+

Unicode 引用

+
-

Unicode 是字体在网页端最原始的应用方式，特点是：

-
    -
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • -
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • -
-
-

- 注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol - 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。） -

-
-

Unicode 使用步骤如下：

-

- 第一步：拷贝项目下面生成的 @font-face -

- 
Unicode 是字体在网页端最原始的应用方式，特点是：

+          
    
+            
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • 
+            
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • 
+          

+          

+            
注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+          

+          
Unicode 使用步骤如下：

+          
第一步：拷贝项目下面生成的 @font-face

+
@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1679885453951') format('woff2'),
-       url('iconfont.woff?t=1679885453951') format('woff'),
-       url('iconfont.ttf?t=1679885453951') format('truetype');
+  src: url('iconfont.woff2?t=1680768207227') format('woff2'),
+       url('iconfont.woff?t=1680768207227') format('woff'),
+       url('iconfont.ttf?t=1680768207227') format('truetype');
 }
 

-            
第二步：定义使用 iconfont 的样式

-            
第二步：定义使用 iconfont 的样式
+
.iconfont {
   font-family: "iconfont" !important;
   font-size: 16px;
@@ -173,225 +153,252 @@
   -moz-osx-font-smoothing: grayscale;
 }
 

-            
第三步：挑选相应图标并获取字体编码，应用于页面

-            
+          
第三步：挑选相应图标并获取字体编码，应用于页面

+
 <span class="iconfont">&#x33;</span>
 

-            

-              

-                "iconfont" 是你项目下的
-                font-family。可以通过编辑项目查看，默认是 "iconfont"。
-              

-            

+          

+            
"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
-
-
+
+
+
    + +
  • + +
    + close +
    +
    .icon-close +
    +
    • + +
  • + +
    + left +
    +
    .icon-left +
    +
    • + +
  • + +
    + down +
    +
    .icon-down +
    +
    • + +
  • + +
    + right +
    +
    .icon-right +
    +
    • + +
  • + +
    + up +
    +
    .icon-up +
    +
    • + +
  • + +
    + prev +
    +
    .icon-prev +
    +
    • + +
  • + +
    + next +
    +
    .icon-next +
    +
    • + +
  • + +
    + 取消全屏_o +
    +
    .icon-quxiaoquanping_o +
    +
    • + +
  • + +
    + 播放_o +
    +
    .icon-bofang_o +
    +
    • + +
  • + +
    + 暂停_o +
    +
    .icon-zanting_o +
    +
    • + +
  • + +
    + 全屏_o +
    +
    .icon-quanping_o +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
    +
  • - -
    left
    -
    .icon-left
    + +
    close
    +
    #icon-close
    • - +
  • - -
    down
    -
    .icon-down
    + +
    left
    +
    #icon-left
    • - +
  • - -
    right
    -
    .icon-right
    + +
    down
    +
    #icon-down
    • - +
  • - -
    up
    -
    .icon-up
    + +
    right
    +
    #icon-right
    • - +
  • - -
    prev
    -
    .icon-prev
    + +
    up
    +
    #icon-up
    • - +
  • - -
    next
    -
    .icon-next
    + +
    prev
    +
    #icon-prev
    • - +
  • - -
    取消全屏_o
    -
    .icon-quxiaoquanping_o
    + +
    next
    +
    #icon-next
    • - +
  • - -
    播放_o
    -
    .icon-bofang_o
    + +
    取消全屏_o
    +
    #icon-quxiaoquanping_o
    • - +
  • - -
    暂停_o
    -
    .icon-zanting_o
    + +
    播放_o
    +
    #icon-bofang_o
    • - +
  • - -
    全屏_o
    -
    .icon-quanping_o
    + +
    暂停_o
    +
    #icon-zanting_o
    • + +
  • + +
    全屏_o
    +
    #icon-quanping_o
    +
    • +
-

font-class 引用

-
+

Symbol 引用

+
-

- font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode - 书写不直观，语意不明确的问题。 -

-

与 Unicode 使用方式相比，具有如下特点：

-
    -
  • - 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon - 是什么。 -
    • -
  • - 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class - 里面的 Unicode 引用。 -
    • -
-

使用步骤如下：

-

- 第一步：引入项目下面生成的 fontclass 代码： -

- 
<link rel="stylesheet" href="./iconfont.css">
-
-

第二步：挑选相应图标并获取类名，应用于页面：

- 
<span class="iconfont icon-xxx"></span>
-
-
-

- " iconfont" 是你项目下的 - font-family。可以通过编辑项目查看，默认是 "iconfont"。 -

-
-
-
-
-
    -
  • - -
    left
    -
    #icon-left
    -
    • - -
  • - -
    down
    -
    #icon-down
    -
    • - -
  • - -
    right
    -
    #icon-right
    -
    • - -
  • - -
    up
    -
    #icon-up
    -
    • - -
  • - -
    prev
    -
    #icon-prev
    -
    • - -
  • - -
    next
    -
    #icon-next
    -
    • - -
  • - -
    取消全屏_o
    -
    #icon-quxiaoquanping_o
    -
    • - -
  • - -
    播放_o
    -
    #icon-bofang_o
    -
    • - -
  • - -
    暂停_o
    -
    #icon-zanting_o
    -
    • - -
  • - -
    全屏_o
    -
    #icon-quanping_o
    -
    • +

    这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

    +
      +
    • 支持多色图标了，不再受单色限制。
      • +
    • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
      • +
    • 兼容性较差，支持 IE9+，及现代浏览器。
      • +
    • 浏览器渲染 SVG 的性能一般，还不如 png。
    -
    -

    Symbol 引用

    -
    - -

    - 这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 - 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点： -

    -
      -
    • 支持多色图标了，不再受单色限制。
      • -
    • - 通过一些技巧，支持像字体那样，通过 font-size, - color 来调整样式。 -
      • -
    • 兼容性较差，支持 IE9+，及现代浏览器。
      • -
    • 浏览器渲染 SVG 的性能一般，还不如 png。
      • -
    -

    使用步骤如下：

    -

    第一步：引入项目下面生成的 symbol 代码：

    - 
    <script src="./iconfont.js"></script>
+          
    使用步骤如下：
    
+          
    第一步：引入项目下面生成的 symbol 代码：
    
+
    <script src="./iconfont.js"></script>
 
    
-            
    第二步：加入通用 CSS 代码（引入一次就行）：
    
-            
    <style>
+          
    第二步：加入通用 CSS 代码（引入一次就行）：
    
+
    <style>
 .icon {
   width: 1em;
   height: 1em;
@@ -401,33 +408,34 @@
 }
 </style>
 
    
-            
    第三步：挑选相应图标并获取类名，应用于页面：
    
-            
    <svg class="icon" aria-hidden="true">
+          
    第三步：挑选相应图标并获取类名，应用于页面：
    
+
    <svg class="icon" aria-hidden="true">
   <use xlink:href="#icon-xxx"></use>
 </svg>
    -
+
- - + tabContent.hide().eq(index).fadeIn() + } + }) + }) + + diff --git a/src/assets/fonts/iconfont.css b/src/assets/fonts/iconfont.css index e27f31b..5033b79 100644 --- a/src/assets/fonts/iconfont.css +++ b/src/assets/fonts/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "iconfont"; /* Project id 3725111 */ - src: url("iconfont.woff2?t=1679885453951") format("woff2"), - url("iconfont.woff?t=1679885453951") format("woff"), - url("iconfont.ttf?t=1679885453951") format("truetype"); + src: url('iconfont.woff2?t=1680768207227') format('woff2'), + url('iconfont.woff?t=1680768207227') format('woff'), + url('iconfont.ttf?t=1680768207227') format('truetype'); } .iconfont { @@ -13,6 +13,10 @@ -moz-osx-font-smoothing: grayscale; } +.icon-close:before { + content: "\e613"; +} + .icon-left:before { content: "\e83d"; } @@ -52,3 +56,4 @@ .icon-quanping_o:before { content: "\eb99"; } + diff --git a/src/assets/fonts/iconfont.js b/src/assets/fonts/iconfont.js index a4dfa9b..cfbeb49 100644 --- a/src/assets/fonts/iconfont.js +++ b/src/assets/fonts/iconfont.js @@ -1,69 +1 @@ -(window._iconfont_svg_string_3725111 = - ''), - (function (o) { - var t = (t = document.getElementsByTagName("script"))[t.length - 1], - e = t.getAttribute("data-injectcss"), - t = t.getAttribute("data-disable-injectsvg"); - if (!t) { - var i, - n, - l, - a, - d, - c = function (t, e) { - e.parentNode.insertBefore(t, e); - }; - if (e && !o.__iconfont__svg__cssinject__) { - o.__iconfont__svg__cssinject__ = !0; - try { - document.write( - "" - ); - } catch (t) { - console && console.log(t); - } - } - (i = function () { - var t, - e = document.createElement("div"); - (e.innerHTML = o._iconfont_svg_string_3725111), - (e = e.getElementsByTagName("svg")[0]) && - (e.setAttribute("aria-hidden", "true"), - (e.style.position = "absolute"), - (e.style.width = 0), - (e.style.height = 0), - (e.style.overflow = "hidden"), - (e = e), - (t = document.body).firstChild - ? c(e, t.firstChild) - : t.appendChild(e)); - }), - document.addEventListener - ? ~["complete", "loaded", "interactive"].indexOf(document.readyState) - ? setTimeout(i, 0) - : ((n = function () { - document.removeEventListener("DOMContentLoaded", n, !1), i(); - }), - document.addEventListener("DOMContentLoaded", n, !1)) - : document.attachEvent && - ((l = i), - (a = o.document), - (d = !1), - h(), - (a.onreadystatechange = function () { - "complete" == a.readyState && - ((a.onreadystatechange = null), s()); - })); - } - function s() { - d || ((d = !0), l()); - } - function h() { - try { - a.documentElement.doScroll("left"); - } catch (t) { - return void setTimeout(h, 50); - } - s(); - } - })(window); +window._iconfont_svg_string_3725111='',function(o){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var i,l,n,a,d,c=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!o.__iconfont__svg__cssinject__){o.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=o._iconfont_svg_string_3725111,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?c(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),i()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(n=i,a=o.document,d=!1,h(),a.onreadystatechange=function(){"complete"==a.readyState&&(a.onreadystatechange=null,s())})}function s(){d||(d=!0,n())}function h(){try{a.documentElement.doScroll("left")}catch(t){return void setTimeout(h,50)}s()}}(window); \ No newline at end of file diff --git a/src/assets/fonts/iconfont.json b/src/assets/fonts/iconfont.json index a56cdac..f47454e 100644 --- a/src/assets/fonts/iconfont.json +++ b/src/assets/fonts/iconfont.json @@ -5,6 +5,13 @@ "css_prefix_text": "icon-", "description": "", "glyphs": [ + { + "icon_id": "11230059", + "name": "close", + "font_class": "close", + "unicode": "e613", + "unicode_decimal": 58899 + }, { "icon_id": "34453005", "name": "left", diff --git a/src/assets/fonts/iconfont.ttf b/src/assets/fonts/iconfont.ttf index ffd5bb2ba0c128ceca9e7dcc33b56d73e855e663..be831969af4f7e8ca4aed6ec85177363c5826f51 100644 GIT binary patch delta 803 zcmZutOK1~O6g_ulGLuZA2BL{ALF%WO31~?)BoteTpRVJ=O(ixBH8x1n6xv0FVq$S6 zQiTz*h$6Tv1p{uyDhT4PxN>JUhJg_j)SYC!Z>Af?`#9Y1xu3Un;CAAErk(sY^c9ej zj0^LP8`tjCKYRp~RYtU4t6n|&{^?@?Jx0FH0qwJVm+e=KWA*0pN(QbA5cfc)(VDBO z5v9l6S@wsU)s;m`qR9D!?2jx|o3-fki7pW29@6|`YpK1Q+bTT+^q*XC4+O{^w}Z06 zZCzI(5&26ZUWB76emtq{oA`yW;uZ8RohS)IXr{Iml5epagyf}p2i6hfm?%UhMh`R?7=5p0~D-EnS6tK2swf#Ws$HJL@$OkjgkNFV0^{0J^ zW9)Gs+!yww4{@Gd^ue=WPx;`faAth)d^ims;!fw0k2Ws_XTyhBg5@$6u!e`%fw z9Ierg#8puFr#rhpJ%nMTU_jh|cz@y$CE_OwXQ+_R8DnImj%a&HQ%4ioxJIgxO%*5~ z)3T~TsX{iNptytqOk=%Vsq9qB>xSvszA3#hO>^+tG}CE1o4&|;u$@kuCY>{>Q~$Tx zBd&5l-tnwu=5+R9XQYb(wX%wUo=@h02?LlC!(ORlmSM<^!9?z_* delta 601 zcmZ8c!AcuZ6g~INBx7b$3^djVMZ~IPkxDEm2(fjebXPZBh@uVECSYPjgV>ExD71?% zinGyOso+XPDBZdA2f9?KWMdc@7k1HIAw6%NAoLCAzI*T7bIyGqx{tfQNe?8_t#WnfVzpP_EXua!dfZVaQc#Z;Mv1 zbxZzB)|qN?YfXCaod2nhzSUxNIdxb#1sw8KX|1-=sIQDPvw%CmfsYW{?zDF>Z?mKf znNe~dyr{$O#oX`3#m>SXcxJXa{o{ciGk3dT!`fxp0d+^#N*W;IU=`CUK%NO>{g;R8;l1N!DKKME`*ivpxp*q34dJ; zJ{3;={{eBt=q#Ge%@S}T-MIf#{q>v5X(aV(_!LFGAJq)VL~GW78VJS>^gDtH1HEf7 zX+Q@AQwI9Q;er8O5mpT7k8t0Bn;<;s*Ma6Vj!qg`6flEre8Z(=Wm8VR=VRBgj3-Jg Uu_Y#Pail{M;)*9p_@myde>gU5n*aa+ diff --git a/src/assets/fonts/iconfont.woff b/src/assets/fonts/iconfont.woff index c2bc9a6e1210f1055bde43a4472c81b6495ed2dd..a85603919cffbc3d2d6c091c459ec56bb9a75be1 100644 GIT binary patch delta 1309 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 TmH*rxP5n~b$ydHjW+DRs;;7;J diff --git a/src/assets/fonts/iconfont.woff2 b/src/assets/fonts/iconfont.woff2 index bdb49a64b17261c536cc86c19da0b2d1fda73fba..98c20a7ebb27ed982eccc865ba01f3c12895ac02 100644 GIT binary patch delta 1357 zcmV-T1+x0g3D^o4cTYw#00961000G801E&B000Yw000FDkr*C-L<)!yhZO-f0we=4 z3mO0fAO(bH2Z0Y8ED9qLc5`qVf$T32=rOKMm9R`(+Pux_UGpso))tARZeVC<0%v^j zi{TXs&gbCa>(BSj%!^(=!4mlulLANzV6g*tf>$ZA>v>medQowVayP6=J~*~vp(B5y z5QIk%j_UiaS79oD+W-Nb^FhYhR1nV7_lYt`Uz)RRPbg&6%aWXZ@@R`WpxmeFC;J_c>`eA(um;eRjw9GAz#0U4G%wi6O9`-wFECRv=P?)_oZ?OI! zD%WoK(E54E=Lw&88wME8uAzjv1Yu$jEPekMPa)ATVME7?9fTP&`hdT!WCyQJMp(cb zj1b`Mk1)f3hf0Kk548vh9~uxEd}u|O;PViK4L(mm=j1YMmBO-;5-Yf`W0&TI-P^Dytrr9+vKX>29k0oYp+ta6v$MNI|v!>6ZN83)W z6{lL-lIqLa^ZzW_n7P4;R*jc zh4Adt^)(@Pn>#eO+r`@bLhPLH+_7fQuFwpy?_HZvdB4i`jC4e?GDYK!|d6Ojq*)cxvHUIRrf8k znZ2^1apg+p%xP?x!`3xLN2n>%b&O!emsDFP)+aG&v91@HEo+M~j)g7cg~Mkox%)k8 zj6EJ3vjxaz_uuzRyS^^{*;k=Qu!W{z1?DU z(5L@>=%}Q0=RPnPP$+HFSL|{614^7#IW448Vp@6@$SL6^E~lSTftV6c%g+KSC6aU7 zDyTd%01Waw z!EgjSQc{vd^o4$*UP8}7xj*FDA_H|%c`Kiokc-%1-swg}fntjA!CwqRAjnLA4o4}B zNZyvE3VV}cq_}#;P*0!<7#sm>L=vS=F7BWA1!;?*$0^x=em1iTS~#c`sub)`V@fq> zOFGVWw1!Y#0qWM0MBpQz9|f^UKn`EaK_gKxIr7<7Nt3Cx#-e_6T-@^z3BtQr6%@m% zG&+M|vew#2n_-{`A PyeiCbw=s^@3IG5AS>1oo delta 1216 zcmV;x1V8)O3d{)@cTYw#00961000Ec01E&B000WC000Dhkr*C-E((TRh5-RK0we=0 z3m5_Qg2TG?IwV@IHwta+8`o0JrKHKuo%mT}B zrcv3AZ0I85dqf<^A5e_0FMHvnY!3TzWhu1LWK-*iGW@j*y<_Btu~ zlCv*@05lFGkmDvybIDt~V(WU^VIZRgB!yz_s>BM+ffl2IBrp};Wj8bs=ZHZbmp|Za z@bTgcK~0c&6mqCp@$pgarTt&7t20{->I13mwXm=RJb(g!`W=~G)HGXfgi*8~3SIRZ zM{EU3C_rJP{pkgn!I|NiQJL{ymVR0L<$5;TM_%hJV+%_3A3X5lK_XBXnE3IbL3lx$ z)4?2zX-NAWCcKbdz=Q`fgPD+!8Lmc5Wus7|kd2241HLR}!h|nt)%cNJLyZsFb*j(+ z1Uz{eIX^&utVggeLxrLZu@_Q@LcgoDRH=@}Fp}Num=lf7jVI!>Vu?9h;&WrsISF%1 zv01y~SFZBJRZTVM;zUXG(peh2Tzaxmcy&+w%A@XDX{RNcN7-D{gsEH|*xkuD))! zZZ+gb1#W(v-_X*0yxsBU4~>Ns+zZIV`CP8AKUOJx$1ZhJk5(2|9;>VOS7619u-({b zhfh6!oBy0d)NHuf&@=1Qsb;u|^trdA@X1#*r8n1^J#gS0XYOOi9XNYT?K+R=I&%h6 zJMLp=?!Y-anCpbC&=h;3WlglFG%b^@Nfz}KyJ@mL$)dI=H!V}FiGP~O_Lq?_FWcuX z#U`HLVyLwKrS(!)wO`V43tNp1b~u@AUY~S-Std7ZH8fbKtb}tqqSKzGq0wsel59hc zAuq`g0LaJLpYICUWH_r7WN)iUO#)CM`36wc@*i-jzC%F3^F_acAb#7z>CRn(AbRMJU}rUQ3%5i^x~ief&%J6lE+<86z~*bU|xfV zGCqQr0{(+0B%Vv(PjZ3Vx}lGAOF$) -
-
- {{ props.name }} -
- -
- -
-
+
+
+ {{ props.name }} +
+ + 预览图 + + + + + +
+ +
+
-
-
-
-
-
+
+ +
+ + +
+ + + + +
+ + + + +
+
+
-
+
-
+
-
-
+ @touchend="moveCamera('stop')" + @touchstart="moveCamera('right')" + @contextmenu.prevent + >
+
+
+
+
+
+
-
-
+ \ No newline at end of file diff --git a/src/components/CameraList.vue b/src/components/CameraList.vue index 87555f5..033d62c 100644 --- a/src/components/CameraList.vue +++ b/src/components/CameraList.vue @@ -1,86 +1,80 @@