+ .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">3</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 ffd5bb2..be83196 100644
Binary files a/src/assets/fonts/iconfont.ttf and b/src/assets/fonts/iconfont.ttf differ
diff --git a/src/assets/fonts/iconfont.woff b/src/assets/fonts/iconfont.woff
index c2bc9a6..a856039 100644
Binary files a/src/assets/fonts/iconfont.woff and b/src/assets/fonts/iconfont.woff differ
diff --git a/src/assets/fonts/iconfont.woff2 b/src/assets/fonts/iconfont.woff2
index bdb49a6..98c20a7 100644
Binary files a/src/assets/fonts/iconfont.woff2 and b/src/assets/fonts/iconfont.woff2 differ
diff --git a/src/assets/test.js b/src/assets/test.js
new file mode 100644
index 0000000..3471a01
--- /dev/null
+++ b/src/assets/test.js
@@ -0,0 +1,50 @@
+let df = [
+ 0,
+ 1800,
+ 3600,
+ 5400,
+ 7200,
+ 9000,
+ 10800,
+ 12600,
+ 14400,
+ 16200,
+ 18000,
+ 19800,
+ 21600,
+ 23400,
+ 25200,
+ 27000,
+ 28800,
+ 30600,
+ 32400,
+ 34200,
+ 36000,
+ 37800,
+ 39600,
+ 41400,
+ 43200,
+ 45000,
+ 46800,
+ 48600,
+ 50400,
+ 52200,
+ 54000,
+ 55800,
+ 57600,
+ 59400,
+ 61200,
+ 63000,
+ 64800,
+ 66600,
+ 68400,
+ 70200,
+ 72000,
+ 73800,
+ 75600,
+ 77400,
+ 79200,
+ 81000,
+ 82800,
+ 84600
+]
\ No newline at end of file
diff --git a/src/components/CameraItem.vue b/src/components/CameraItem.vue
index 8a95f72..9fbe392 100644
--- a/src/components/CameraItem.vue
+++ b/src/components/CameraItem.vue
@@ -1,176 +1,286 @@
-
-
- {{ 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 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
- 摄像头列表为空
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+ 摄像头列表为空
+
+
+
+
+
+
+
+
+
+
+
+
-
{{ item.CREATEDATE }}
-
-
-
- 图片列表为空
-
-
-
+ :src="`${protocol}//${host}/portal/r/${item.PIC}`"
+ class="n-image-item"
+ >
+
{{ item.CREATEDATE }}
+
+
+ 图片列表为空
+
+
+
+
+
+ 请选择项目
+
-
-
- 请选择项目
-
-
- 
- 摄像头列表为空
-