arrow control
This commit is contained in:
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -5,15 +5,9 @@
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
"@/*": ["src/*"]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
"types": ["naive-ui/volar"],
|
||||
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
|
||||
}
|
||||
}
|
||||
|
||||
BIN
monitor_1711.7z
BIN
monitor_1711.7z
Binary file not shown.
BIN
monitor_1720.7z
BIN
monitor_1720.7z
Binary file not shown.
BIN
monitor_1730.7z
BIN
monitor_1730.7z
Binary file not shown.
@ -24,6 +24,7 @@
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"naive-ui": "^2.34.2",
|
||||
"postcss-px-to-viewport": "^1.1.1",
|
||||
"postcss-px2rem-exclude": "^0.0.6",
|
||||
"sass": "^1.54.9",
|
||||
|
||||
@ -9,6 +9,5 @@ module.exports = {
|
||||
// remUnit: 75,
|
||||
// exclude: /node_modules|folder_name|asstes/i,
|
||||
// },
|
||||
|
||||
},
|
||||
};
|
||||
|
||||
@ -17,5 +17,7 @@ export default {
|
||||
<style>
|
||||
#app {
|
||||
background-color: #f6f6f6;
|
||||
//width: 100vw;
|
||||
//height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,15 @@
|
||||
/* 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 {
|
||||
@ -48,7 +52,6 @@
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
#tabs .active {
|
||||
border-bottom-color: #f00;
|
||||
color: #222;
|
||||
@ -215,35 +218,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;
|
||||
}
|
||||
@ -260,7 +263,7 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table {
|
||||
.markdown > table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0px;
|
||||
empty-cells: show;
|
||||
@ -269,21 +272,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 {
|
||||
@ -318,12 +321,11 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.markdown>br,
|
||||
.markdown>p>br {
|
||||
.markdown > br,
|
||||
.markdown > p > br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
background: white;
|
||||
@ -404,7 +406,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;
|
||||
@ -439,7 +441,6 @@ code[class*="language-"] ::selection {
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
@ -449,19 +450,19 @@ code[class*="language-"] ::selection {
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
margin: 0.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: .1em;
|
||||
border-radius: .3em;
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
@ -477,7 +478,7 @@ pre[class*="language-"] {
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
@ -505,7 +506,7 @@ pre[class*="language-"] {
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
background: hsla(0, 0%, 100%, 0.5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
@ -516,7 +517,7 @@ pre[class*="language-"] {
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #DD4A68;
|
||||
color: #dd4a68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
|
||||
@ -1,108 +1,170 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>iconfont Demo</title>
|
||||
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
|
||||
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
|
||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="iconfont.css">
|
||||
<script src="iconfont.js"></script>
|
||||
<!-- jQuery -->
|
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
|
||||
<!-- 代码高亮 -->
|
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
|
||||
<style>
|
||||
.main .logo {
|
||||
margin-top: 0;
|
||||
height: auto;
|
||||
}
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>iconfont Demo</title>
|
||||
<link
|
||||
rel="shortcut icon"
|
||||
href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
|
||||
type="image/x-icon"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/svg+xml"
|
||||
href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="demo.css" />
|
||||
<link rel="stylesheet" href="iconfont.css" />
|
||||
<script src="iconfont.js"></script>
|
||||
<!-- jQuery -->
|
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
|
||||
<!-- 代码高亮 -->
|
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
|
||||
<style>
|
||||
.main .logo {
|
||||
margin-top: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.main .logo a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
|
||||
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
|
||||
|
||||
</a></h1>
|
||||
<div class="nav-tabs">
|
||||
<ul id="tabs" class="dib-box">
|
||||
<li class="dib active"><span>Unicode</span></li>
|
||||
<li class="dib"><span>Font class</span></li>
|
||||
<li class="dib"><span>Symbol</span></li>
|
||||
</ul>
|
||||
|
||||
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3725111" target="_blank" class="nav-more">查看项目</a>
|
||||
|
||||
</div>
|
||||
<div class="tab-container">
|
||||
<div class="content unicode" style="display: block;">
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<h1 class="logo">
|
||||
<a
|
||||
href="https://www.iconfont.cn/"
|
||||
title="iconfont 首页"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
width="200"
|
||||
src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
<div class="nav-tabs">
|
||||
<ul id="tabs" class="dib-box">
|
||||
<li class="dib active"><span>Unicode</span></li>
|
||||
<li class="dib"><span>Font class</span></li>
|
||||
<li class="dib"><span>Symbol</span></li>
|
||||
</ul>
|
||||
|
||||
<a
|
||||
href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3725111"
|
||||
target="_blank"
|
||||
class="nav-more"
|
||||
>查看项目</a
|
||||
>
|
||||
</div>
|
||||
<div class="tab-container">
|
||||
<div class="content unicode" style="display: block">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">left</div>
|
||||
<div class="code-name">&#xe83d;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">down</div>
|
||||
<div class="code-name">&#xe839;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">right</div>
|
||||
<div class="code-name">&#xe840;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">up</div>
|
||||
<div class="code-name">&#xe845;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">prev</div>
|
||||
<div class="code-name">&#xe659;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">next</div>
|
||||
<div class="code-name">&#xe609;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">取消全屏_o</div>
|
||||
<div class="code-name">&#xeb98;</div>
|
||||
</li>
|
||||
|
||||
<div class="name">取消全屏_o</div>
|
||||
<div class="code-name">&#xeb98;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">播放_o</div>
|
||||
<div class="code-name">&#xeb5e;</div>
|
||||
</li>
|
||||
|
||||
<div class="name">播放_o</div>
|
||||
<div class="code-name">&#xeb5e;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">暂停_o</div>
|
||||
<div class="code-name">&#xeb6c;</div>
|
||||
</li>
|
||||
|
||||
<div class="name">暂停_o</div>
|
||||
<div class="code-name">&#xeb6c;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">全屏_o</div>
|
||||
<div class="code-name">&#xeb99;</div>
|
||||
</li>
|
||||
|
||||
<div class="name">全屏_o</div>
|
||||
<div class="code-name">&#xeb99;</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="unicode-">Unicode 引用</h2>
|
||||
<hr>
|
||||
<h2 id="unicode-">Unicode 引用</h2>
|
||||
<hr />
|
||||
|
||||
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
||||
<ul>
|
||||
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
||||
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
|
||||
</blockquote>
|
||||
<p>Unicode 使用步骤如下：</p>
|
||||
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
|
||||
<pre><code class="language-css"
|
||||
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
||||
<ul>
|
||||
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
||||
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p>
|
||||
注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol
|
||||
引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）
|
||||
</p>
|
||||
</blockquote>
|
||||
<p>Unicode 使用步骤如下：</p>
|
||||
<h3 id="-font-face">
|
||||
第一步：拷贝项目下面生成的 <code>@font-face</code>
|
||||
</h3>
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1666600319624') format('woff2'),
|
||||
url('iconfont.woff?t=1666600319624') format('woff'),
|
||||
url('iconfont.ttf?t=1666600319624') format('truetype');
|
||||
src: url('iconfont.woff2?t=1679885453951') format('woff2'),
|
||||
url('iconfont.woff?t=1679885453951') format('woff'),
|
||||
url('iconfont.ttf?t=1679885453951') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
<pre><code class="language-css"
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
<pre><code class="language-css"
|
||||
>.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
@ -111,133 +173,225 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
||||
<pre>
|
||||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
||||
<pre>
|
||||
<code class="language-html"
|
||||
><span class="iconfont">&#x33;</span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>
|
||||
"iconfont" 是你项目下的
|
||||
font-family。可以通过编辑项目查看，默认是 "iconfont"。
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-quxiaoquanping_o"></span>
|
||||
<div class="name">
|
||||
取消全屏_o
|
||||
</div>
|
||||
<div class="code-name">.icon-quxiaoquanping_o
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-bofang_o"></span>
|
||||
<div class="name">
|
||||
播放_o
|
||||
</div>
|
||||
<div class="code-name">.icon-bofang_o
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-zanting_o"></span>
|
||||
<div class="name">
|
||||
暂停_o
|
||||
</div>
|
||||
<div class="code-name">.icon-zanting_o
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-quanping_o"></span>
|
||||
<div class="name">
|
||||
全屏_o
|
||||
</div>
|
||||
<div class="code-name">.icon-quanping_o
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="font-class-">font-class 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
|
||||
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
||||
<ul>
|
||||
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
||||
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
||||
</ul>
|
||||
<p>使用步骤如下：</p>
|
||||
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
||||
</code></pre>
|
||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>"
|
||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content symbol">
|
||||
</div>
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-quxiaoquanping_o"></use>
|
||||
</svg>
|
||||
<div class="name">取消全屏_o</div>
|
||||
<div class="code-name">#icon-quxiaoquanping_o</div>
|
||||
<span class="icon iconfont icon-left"></span>
|
||||
<div class="name">left</div>
|
||||
<div class="code-name">.icon-left</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-bofang_o"></use>
|
||||
</svg>
|
||||
<div class="name">播放_o</div>
|
||||
<div class="code-name">#icon-bofang_o</div>
|
||||
<span class="icon iconfont icon-down"></span>
|
||||
<div class="name">down</div>
|
||||
<div class="code-name">.icon-down</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-zanting_o"></use>
|
||||
</svg>
|
||||
<div class="name">暂停_o</div>
|
||||
<div class="code-name">#icon-zanting_o</div>
|
||||
<span class="icon iconfont icon-right"></span>
|
||||
<div class="name">right</div>
|
||||
<div class="code-name">.icon-right</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-quanping_o"></use>
|
||||
</svg>
|
||||
<div class="name">全屏_o</div>
|
||||
<div class="code-name">#icon-quanping_o</div>
|
||||
<span class="icon iconfont icon-up"></span>
|
||||
<div class="name">up</div>
|
||||
<div class="code-name">.icon-up</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-prev"></span>
|
||||
<div class="name">prev</div>
|
||||
<div class="code-name">.icon-prev</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-next"></span>
|
||||
<div class="name">next</div>
|
||||
<div class="code-name">.icon-next</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-quxiaoquanping_o"></span>
|
||||
<div class="name">取消全屏_o</div>
|
||||
<div class="code-name">.icon-quxiaoquanping_o</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-bofang_o"></span>
|
||||
<div class="name">播放_o</div>
|
||||
<div class="code-name">.icon-bofang_o</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-zanting_o"></span>
|
||||
<div class="name">暂停_o</div>
|
||||
<div class="code-name">.icon-zanting_o</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-quanping_o"></span>
|
||||
<div class="name">全屏_o</div>
|
||||
<div class="code-name">.icon-quanping_o</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="symbol-">Symbol 引用</h2>
|
||||
<hr>
|
||||
<h2 id="font-class-">font-class 引用</h2>
|
||||
<hr />
|
||||
|
||||
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
||||
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
|
||||
<ul>
|
||||
<li>支持多色图标了，不再受单色限制。</li>
|
||||
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
|
||||
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
|
||||
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
|
||||
</ul>
|
||||
<p>使用步骤如下：</p>
|
||||
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
|
||||
<pre><code class="language-html"><script src="./iconfont.js"></script>
|
||||
<p>
|
||||
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode
|
||||
书写不直观，语意不明确的问题。
|
||||
</p>
|
||||
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
||||
<ul>
|
||||
<li>
|
||||
相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon
|
||||
是什么。
|
||||
</li>
|
||||
<li>
|
||||
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class
|
||||
里面的 Unicode 引用。
|
||||
</li>
|
||||
</ul>
|
||||
<p>使用步骤如下：</p>
|
||||
<h3 id="-fontclass-">
|
||||
第一步：引入项目下面生成的 fontclass 代码：
|
||||
</h3>
|
||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
||||
</code></pre>
|
||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
||||
<pre><code class="language-html"><style>
|
||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>
|
||||
" iconfont" 是你项目下的
|
||||
font-family。可以通过编辑项目查看，默认是 "iconfont"。
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-left"></use>
|
||||
</svg>
|
||||
<div class="name">left</div>
|
||||
<div class="code-name">#icon-left</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-down"></use>
|
||||
</svg>
|
||||
<div class="name">down</div>
|
||||
<div class="code-name">#icon-down</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-right"></use>
|
||||
</svg>
|
||||
<div class="name">right</div>
|
||||
<div class="code-name">#icon-right</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-up"></use>
|
||||
</svg>
|
||||
<div class="name">up</div>
|
||||
<div class="code-name">#icon-up</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-prev"></use>
|
||||
</svg>
|
||||
<div class="name">prev</div>
|
||||
<div class="code-name">#icon-prev</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-next"></use>
|
||||
</svg>
|
||||
<div class="name">next</div>
|
||||
<div class="code-name">#icon-next</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-quxiaoquanping_o"></use>
|
||||
</svg>
|
||||
<div class="name">取消全屏_o</div>
|
||||
<div class="code-name">#icon-quxiaoquanping_o</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-bofang_o"></use>
|
||||
</svg>
|
||||
<div class="name">播放_o</div>
|
||||
<div class="code-name">#icon-bofang_o</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-zanting_o"></use>
|
||||
</svg>
|
||||
<div class="name">暂停_o</div>
|
||||
<div class="code-name">#icon-zanting_o</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-quanping_o"></use>
|
||||
</svg>
|
||||
<div class="name">全屏_o</div>
|
||||
<div class="code-name">#icon-quanping_o</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="symbol-">Symbol 引用</h2>
|
||||
<hr />
|
||||
|
||||
<p>
|
||||
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a
|
||||
href=""
|
||||
>文章</a
|
||||
>
|
||||
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
|
||||
</p>
|
||||
<ul>
|
||||
<li>支持多色图标了，不再受单色限制。</li>
|
||||
<li>
|
||||
通过一些技巧，支持像字体那样，通过 <code>font-size</code>,
|
||||
<code>color</code> 来调整样式。
|
||||
</li>
|
||||
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
|
||||
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
|
||||
</ul>
|
||||
<p>使用步骤如下：</p>
|
||||
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
|
||||
<pre><code class="language-html"><script src="./iconfont.js"></script>
|
||||
</code></pre>
|
||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
||||
<pre><code class="language-html"><style>
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
@ -247,34 +401,33 @@
|
||||
}
|
||||
</style>
|
||||
</code></pre>
|
||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-xxx"></use>
|
||||
</svg>
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('.tab-container .content:first').show()
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$(".tab-container .content:first").show();
|
||||
|
||||
$('#tabs li').click(function (e) {
|
||||
var tabContent = $('.tab-container .content')
|
||||
var index = $(this).index()
|
||||
$("#tabs li").click(function (e) {
|
||||
var tabContent = $(".tab-container .content");
|
||||
var index = $(this).index();
|
||||
|
||||
if ($(this).hasClass('active')) {
|
||||
return
|
||||
} else {
|
||||
$('#tabs li').removeClass('active')
|
||||
$(this).addClass('active')
|
||||
if ($(this).hasClass("active")) {
|
||||
return;
|
||||
} else {
|
||||
$("#tabs li").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
|
||||
tabContent.hide().eq(index).fadeIn()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
tabContent.hide().eq(index).fadeIn();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 3725111 */
|
||||
src: url('iconfont.woff2?t=1666600319624') format('woff2'),
|
||||
url('iconfont.woff?t=1666600319624') format('woff'),
|
||||
url('iconfont.ttf?t=1666600319624') format('truetype');
|
||||
src: url("iconfont.woff2?t=1679885453951") format("woff2"),
|
||||
url("iconfont.woff?t=1679885453951") format("woff"),
|
||||
url("iconfont.ttf?t=1679885453951") format("truetype");
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@ -13,6 +13,30 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-left:before {
|
||||
content: "\e83d";
|
||||
}
|
||||
|
||||
.icon-down:before {
|
||||
content: "\e839";
|
||||
}
|
||||
|
||||
.icon-right:before {
|
||||
content: "\e840";
|
||||
}
|
||||
|
||||
.icon-up:before {
|
||||
content: "\e845";
|
||||
}
|
||||
|
||||
.icon-prev:before {
|
||||
content: "\e659";
|
||||
}
|
||||
|
||||
.icon-next:before {
|
||||
content: "\e609";
|
||||
}
|
||||
|
||||
.icon-quxiaoquanping_o:before {
|
||||
content: "\eb98";
|
||||
}
|
||||
@ -28,4 +52,3 @@
|
||||
.icon-quanping_o:before {
|
||||
content: "\eb99";
|
||||
}
|
||||
|
||||
|
||||
@ -1 +1,69 @@
|
||||
window._iconfont_svg_string_3725111='<svg><symbol id="icon-quxiaoquanping_o" viewBox="0 0 1024 1024"><path d="M354.133333 682.666667H256v-42.666667h170.666667v170.666667H384v-98.133334L243.2 853.333333l-29.866667-29.866666L354.133333 682.666667z m358.4 0l140.8 140.8-29.866666 29.866666-140.8-140.8V810.666667h-42.666667v-170.666667h170.666667v42.666667h-98.133334zM354.133333 384L213.333333 243.2l29.866667-29.866667L384 354.133333V256h42.666667v170.666667H256V384h98.133333z m358.4 0H810.666667v42.666667h-170.666667V256h42.666667v98.133333L823.466667 213.333333l29.866666 29.866667L712.533333 384z" fill="#444444" ></path></symbol><symbol id="icon-bofang_o" viewBox="0 0 1024 1024"><path d="M533.333333 896C332.8 896 170.666667 733.866667 170.666667 533.333333S332.8 170.666667 533.333333 170.666667 896 332.8 896 533.333333 733.866667 896 533.333333 896z m0-42.666667c174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333 358.4 853.333333 533.333333 853.333333z m149.333334-320L469.333333 682.666667V384l213.333334 149.333333z m-68.266667 0L512 460.8v145.066667l102.4-72.533334z" fill="#444444" ></path></symbol><symbol id="icon-zanting_o" viewBox="0 0 1024 1024"><path d="M533.333333 896C332.8 896 170.666667 733.866667 170.666667 533.333333S332.8 170.666667 533.333333 170.666667 896 332.8 896 533.333333 733.866667 896 533.333333 896z m0-42.666667c174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333 358.4 853.333333 533.333333 853.333333zM469.333333 426.666667v213.333333h-42.666666v-213.333333h42.666666z m170.666667 0v213.333333h-42.666667v-213.333333h42.666667z" fill="#444444" ></path></symbol><symbol id="icon-quanping_o" viewBox="0 0 1024 1024"><path d="M285.866667 810.666667H384v42.666666H213.333333v-170.666666h42.666667v98.133333l128-128 29.866667 29.866667-128 128z m494.933333 0l-128-128 29.866667-29.866667 128 128V682.666667h42.666666v170.666666h-170.666666v-42.666666h98.133333zM285.866667 256l128 128-29.866667 29.866667-128-128V384H213.333333V213.333333h170.666667v42.666667H285.866667z m494.933333 0H682.666667V213.333333h170.666666v170.666667h-42.666666V285.866667l-128 128-29.866667-29.866667 128-128z" fill="#444444" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var o,i,l,d,a,c=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}o=function(){var t,e=document.createElement("div");e.innerHTML=n._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(o,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),o()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(l=o,d=n.document,a=!1,v(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,s())})}function s(){a||(a=!0,l())}function v(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(v,50)}s()}}(window);
|
||||
(window._iconfont_svg_string_3725111 =
|
||||
'<svg><symbol id="icon-left" viewBox="0 0 1024 1024"><path d="M659.748571 245.272381l-51.687619-51.687619-318.439619 318.585905 318.415238 318.268952 51.712-51.736381-266.703238-266.556952z" ></path></symbol><symbol id="icon-down" viewBox="0 0 1024 1024"><path d="M512.146286 619.52L245.296762 352.792381 193.584762 404.48l318.585905 318.415238 318.268952-318.415238-51.736381-51.687619z" ></path></symbol><symbol id="icon-right" viewBox="0 0 1024 1024"><path d="M605.086476 512.146286L338.358857 245.272381l51.760762-51.687619 318.415238 318.585905L390.095238 830.415238l-51.687619-51.736381z" ></path></symbol><symbol id="icon-up" viewBox="0 0 1024 1024"><path d="M512.146286 454.753524l-266.849524 266.727619L193.584762 669.744762l318.585905-318.415238 318.268952 318.415238-51.736381 51.687619z" ></path></symbol><symbol id="icon-prev" viewBox="0 0 1024 1024"><path d="M784.652701 955.6957 346.601985 517.644983c-2.822492-2.822492-2.822492-7.902977 0-11.289967l439.179713-439.179713c6.77398-6.77398 10.725469-16.370452 10.725469-25.966924L796.507166 36.692393c0-20.32194-16.370452-36.692393-36.692393-36.692393l-4.515987 0c-9.596472 0-19.192944 3.951488-25.966924 10.725469L250.072767 489.420066c-12.418964 12.418964-12.418964 32.740904 0 45.159868l477.565601 477.565601c7.338479 7.338479 17.499449 11.854465 28.224917 11.854465l0 0c22.015436 0 40.079383-18.063947 40.079383-40.079383l0 0C796.507166 973.759647 791.99118 963.598677 784.652701 955.6957z" ></path></symbol><symbol id="icon-next" viewBox="0 0 1024 1024"><path d="M778.541176 490.706824L352.557176 64.752941a30.117647 30.117647 0 0 0-42.586352 42.586353L714.631529 512 310.061176 916.570353a30.087529 30.087529 0 0 0-0.060235 42.646588 29.967059 29.967059 0 0 0 42.646588-0.030117l425.833412-425.86353a30.087529 30.087529 0 0 0 0.030118-42.61647z" fill="#000000" ></path></symbol><symbol id="icon-quxiaoquanping_o" viewBox="0 0 1024 1024"><path d="M354.133333 682.666667H256v-42.666667h170.666667v170.666667H384v-98.133334L243.2 853.333333l-29.866667-29.866666L354.133333 682.666667z m358.4 0l140.8 140.8-29.866666 29.866666-140.8-140.8V810.666667h-42.666667v-170.666667h170.666667v42.666667h-98.133334zM354.133333 384L213.333333 243.2l29.866667-29.866667L384 354.133333V256h42.666667v170.666667H256V384h98.133333z m358.4 0H810.666667v42.666667h-170.666667V256h42.666667v98.133333L823.466667 213.333333l29.866666 29.866667L712.533333 384z" fill="#444444" ></path></symbol><symbol id="icon-bofang_o" viewBox="0 0 1024 1024"><path d="M533.333333 896C332.8 896 170.666667 733.866667 170.666667 533.333333S332.8 170.666667 533.333333 170.666667 896 332.8 896 533.333333 733.866667 896 533.333333 896z m0-42.666667c174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333 358.4 853.333333 533.333333 853.333333z m149.333334-320L469.333333 682.666667V384l213.333334 149.333333z m-68.266667 0L512 460.8v145.066667l102.4-72.533334z" fill="#444444" ></path></symbol><symbol id="icon-zanting_o" viewBox="0 0 1024 1024"><path d="M533.333333 896C332.8 896 170.666667 733.866667 170.666667 533.333333S332.8 170.666667 533.333333 170.666667 896 332.8 896 533.333333 733.866667 896 533.333333 896z m0-42.666667c174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333 358.4 853.333333 533.333333 853.333333zM469.333333 426.666667v213.333333h-42.666666v-213.333333h42.666666z m170.666667 0v213.333333h-42.666667v-213.333333h42.666667z" fill="#444444" ></path></symbol><symbol id="icon-quanping_o" viewBox="0 0 1024 1024"><path d="M285.866667 810.666667H384v42.666666H213.333333v-170.666666h42.666667v98.133333l128-128 29.866667 29.866667-128 128z m494.933333 0l-128-128 29.866667-29.866667 128 128V682.666667h42.666666v170.666666h-170.666666v-42.666666h98.133333zM285.866667 256l128 128-29.866667 29.866667-128-128V384H213.333333V213.333333h170.666667v42.666667H285.866667z m494.933333 0H682.666667V213.333333h170.666666v170.666667h-42.666666V285.866667l-128 128-29.866667-29.866667 128-128z" fill="#444444" ></path></symbol></svg>'),
|
||||
(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(
|
||||
"<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>"
|
||||
);
|
||||
} 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);
|
||||
|
||||
@ -5,6 +5,48 @@
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "34453005",
|
||||
"name": "left",
|
||||
"font_class": "left",
|
||||
"unicode": "e83d",
|
||||
"unicode_decimal": 59453
|
||||
},
|
||||
{
|
||||
"icon_id": "34452987",
|
||||
"name": "down",
|
||||
"font_class": "down",
|
||||
"unicode": "e839",
|
||||
"unicode_decimal": 59449
|
||||
},
|
||||
{
|
||||
"icon_id": "34453038",
|
||||
"name": "right",
|
||||
"font_class": "right",
|
||||
"unicode": "e840",
|
||||
"unicode_decimal": 59456
|
||||
},
|
||||
{
|
||||
"icon_id": "34453072",
|
||||
"name": "up",
|
||||
"font_class": "up",
|
||||
"unicode": "e845",
|
||||
"unicode_decimal": 59461
|
||||
},
|
||||
{
|
||||
"icon_id": "879141",
|
||||
"name": "prev",
|
||||
"font_class": "prev",
|
||||
"unicode": "e659",
|
||||
"unicode_decimal": 58969
|
||||
},
|
||||
{
|
||||
"icon_id": "8078256",
|
||||
"name": "next",
|
||||
"font_class": "next",
|
||||
"unicode": "e609",
|
||||
"unicode_decimal": 58889
|
||||
},
|
||||
{
|
||||
"icon_id": "5387942",
|
||||
"name": "取消全屏_o",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,6 +1,19 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<select
|
||||
<div class="naive-select-wrap">
|
||||
<NConfigProvider :locale="zhCN">
|
||||
<NSelect
|
||||
v-model:value="queryParams.query"
|
||||
:options="projectList"
|
||||
placeholder="请选择项目"
|
||||
label-field="PRONAME"
|
||||
value-field="PROID"
|
||||
@update:value="projectClicked"
|
||||
/>
|
||||
</NConfigProvider>
|
||||
</div>
|
||||
|
||||
<!-- <select
|
||||
name="pets"
|
||||
v-model="queryParams.query"
|
||||
id="proj-select"
|
||||
@ -10,38 +23,66 @@
|
||||
<option v-for="item in projectList" :value="item.PROID">
|
||||
{{ item.PRONAME }}
|
||||
</option>
|
||||
</select>
|
||||
<div
|
||||
v-if="queryParams.query && cameraList.length"
|
||||
class="camera-list"
|
||||
ref="cameraListRef"
|
||||
>
|
||||
<camera
|
||||
v-for="(item, index) in cameraList"
|
||||
:key="index"
|
||||
:name="item.address"
|
||||
:source="item.flvUrl"
|
||||
></camera>
|
||||
</select> -->
|
||||
|
||||
<div v-if="queryParams.query" class="naive-tabs">
|
||||
<NTabs type="segment">
|
||||
<NTabPane name="camera" tab="摄像头列表">
|
||||
<!-- v-if="queryParams.query && activeIndex == 0" -->
|
||||
<div class="camera-list" ref="cameraListRef">
|
||||
<camera
|
||||
v-for="(item, index) in cameraList"
|
||||
:key="index"
|
||||
:name="item.address"
|
||||
:source="item.flvUrl"
|
||||
></camera>
|
||||
<div v-if="!cameraList.length" class="empty">
|
||||
<img src="../assets/empty.png" alt="" />
|
||||
摄像头列表为空
|
||||
</div>
|
||||
</div>
|
||||
</NTabPane>
|
||||
<NTabPane name="image" tab="图片列表">
|
||||
<!-- v-else-if="queryParams.query && activeIndex == 1" -->
|
||||
<div class="image-list">
|
||||
<div class="image-item" v-for="item in imageList" :key="item.PIC">
|
||||
<!-- <img :src="`${protocol}//${host}/portal/r/${item}`" alt="" /> -->
|
||||
<!-- <img :src="`http://81.68.90.198:8088/portal/r/${item}`" alt="" /> -->
|
||||
<!-- TODO:test -->
|
||||
<!-- :src="`${protocol}//${host}/portal/r/${item.PIC}`" -->
|
||||
<NImage
|
||||
class="n-image-item"
|
||||
:src="`http://81.68.90.198:8088/portal/r/${item.PIC}`"
|
||||
:previewed-img-props="{
|
||||
draggable: true,
|
||||
style: { border: 'none' },
|
||||
}"
|
||||
></NImage>
|
||||
<div class="uplode-time">{{ item.CREATEDATE }}</div>
|
||||
</div>
|
||||
<div v-if="!imageList.length" class="empty">
|
||||
<img src="../assets/empty.png" alt="" />
|
||||
图片列表为空
|
||||
</div>
|
||||
</div>
|
||||
</NTabPane>
|
||||
</NTabs>
|
||||
</div>
|
||||
<div v-else-if="queryParams.query && !total">
|
||||
<div class="image-list">
|
||||
<!-- <div class="image-item">
|
||||
<img
|
||||
src="https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<img
|
||||
src="https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF"
|
||||
alt=""
|
||||
/>
|
||||
</div> -->
|
||||
<div class="image-item" v-for="item in imageList" :key="item">
|
||||
<img :src="`${protocol}//${host}/portal/r/${item}`" alt="" />
|
||||
</div>
|
||||
<!-- <div class="switch" v-if="queryParams.query">
|
||||
<div
|
||||
:class="`switch-item ${activeIndex == 0 ? 'active' : ''}`"
|
||||
@click="activeIndex = 0"
|
||||
>
|
||||
摄像头列表
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
:class="`switch-item ${activeIndex == 1 ? 'active' : ''}`"
|
||||
@click="activeIndex = 1"
|
||||
>
|
||||
图片列表
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div v-else class="empty">
|
||||
<img src="../assets/empty.png" alt="" />
|
||||
请选择项目
|
||||
@ -53,9 +94,21 @@
|
||||
import { reactive, ref } from "vue";
|
||||
import camera from "./camera.vue";
|
||||
import axios from "axios";
|
||||
|
||||
import {
|
||||
NSelect,
|
||||
NConfigProvider,
|
||||
zhCN,
|
||||
NTabs,
|
||||
NTabPane,
|
||||
NImage,
|
||||
} from "naive-ui";
|
||||
const cameraLoading = ref(true);
|
||||
const projectList = ref([]);
|
||||
const projectList = ref([
|
||||
// {
|
||||
// PROID: "123123",
|
||||
// PRONAME: "项目12",
|
||||
// },
|
||||
]);
|
||||
const cameraList = ref([]);
|
||||
const imageList = ref([]);
|
||||
const total = ref(0);
|
||||
@ -67,15 +120,69 @@ const queryParams = reactive({
|
||||
cmd: "com.awspaas.user.apps.cmp_camera_list",
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
sid: sid,
|
||||
query: "",
|
||||
// sid: sid,
|
||||
// TODO:test
|
||||
sid: "b9e99f78-2f6e-4d1c-aea9-4364f4191d30",
|
||||
query: undefined,
|
||||
});
|
||||
|
||||
// const activeIndex = ref(0);
|
||||
const loadProjectList = async () => {
|
||||
// const resp = await axios.get(`http://localhost:3000/project-list`);
|
||||
// TODO:test
|
||||
const resp = await axios.get(
|
||||
"./jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectList&sid=" + sid
|
||||
"/api/portal/r/jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectList&sid=b9e99f78-2f6e-4d1c-aea9-4364f4191d30"
|
||||
);
|
||||
// const resp = {
|
||||
// data: [{
|
||||
// "SUPERVISORID": "",
|
||||
// "MAP": "40.763291,111.971932",
|
||||
// "PROID": "HT6YXM-202303232023030010",
|
||||
// "PROTYPE": "",
|
||||
// "UPDATEDATE": 1679559863000,
|
||||
// "SUPERVISOR": "",
|
||||
// "DESIGNERID": "",
|
||||
// "STCV": 800000,
|
||||
// "PROOWNER": "六院本部/资产运营部/",
|
||||
// "SURVEY": "",
|
||||
// "UPDATEUSER": "13088880001",
|
||||
// "SURVEYID": "",
|
||||
// "APPENDIX": "",
|
||||
// "PROCOST": 800000,
|
||||
// "PRICELEADERID": "13088880004",
|
||||
// "PRODEPTLEADERID": "13088880003",
|
||||
// "PROLEADERID": "13088880002",
|
||||
// "PROLEADER": "建设单位项目管理人员",
|
||||
// "CONTRACTOR": "",
|
||||
// "FLOORAREA": 2000,
|
||||
// "CREATEUSER": "13088880001",
|
||||
// "ISEND": 0,
|
||||
// "RSTATUS": "1",
|
||||
// "LEADERID": "13088880007",
|
||||
// "PRICELEADER": "工程造价主管部门领导",
|
||||
// "PROSTATUS": "1",
|
||||
// "CBDATE": 1677600000000,
|
||||
// "CONTRACTORID": "",
|
||||
// "LEADER": "主要领导",
|
||||
// "PRODEPTLEADER": "建设单位项目管理部门领导",
|
||||
// "PRONAME": "A区科创园",
|
||||
// "ASSETLEADER": "固定资产投资主管领导",
|
||||
// "BINDID": "47856a34-afa4-4a9b-ae28-ba450a4ab798",
|
||||
// "ORGID": "d8ee92f8-c80f-4741-b92c-cbc60c91d754",
|
||||
// "PROADDRESS": "内蒙古自治区呼和浩特市赛罕区黄合少镇南地村",
|
||||
// "DESIGNER": "",
|
||||
// "PROCESSDEFID": "obj_a48ef53d7a2f4492bf440174e32bef3a",
|
||||
// "PROPIC": "",
|
||||
// "CREATEDATE": 1679559863000,
|
||||
// "ASSETLEADERID": "13088880005",
|
||||
// "CEDATE": 1703260800000,
|
||||
// "PROFILE": "",
|
||||
// "ACCDATE": 1703260800000,
|
||||
// "ID": "a0fb6df5-48e4-442f-8b9d-da5861c1bf41"
|
||||
// }]
|
||||
// }
|
||||
// const resp = await axios.get(
|
||||
// "./jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectList&sid=" + sid
|
||||
// );
|
||||
return resp.data;
|
||||
};
|
||||
|
||||
@ -85,22 +192,70 @@ const projectClicked = () => {
|
||||
// queryParams.query = proid;
|
||||
queryParams.pageNum = 1;
|
||||
loadCameraList();
|
||||
loadImageList();
|
||||
};
|
||||
|
||||
const loadCameraList = async () => {
|
||||
cameraLoading.value = true;
|
||||
const resp = await axios(`./jd`, {
|
||||
// TODO:test
|
||||
const resp = await axios(`/api/portal/r/jd`, {
|
||||
params: queryParams,
|
||||
});
|
||||
// const resp = {
|
||||
// data: {
|
||||
// "code": 0,
|
||||
// "rows": [{
|
||||
// "address": "A区-科创园南门内",
|
||||
// "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000009_34020000001320000009.flv",
|
||||
// "id": "2e627e9a-afe8-4065-9196-423467396401",
|
||||
// "projectId": "HT6YXM-202303232023030010",
|
||||
// "projectName": "A区科创园"
|
||||
// }, {
|
||||
// "address": "A区科创园东门内",
|
||||
// "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000008_34020000001320000008.flv",
|
||||
// "id": "7ff7ba05-05e4-48e6-a43a-a0983ff1aa2b",
|
||||
// "projectId": "HT6YXM-202303232023030010",
|
||||
// "projectName": "A区科创园"
|
||||
// }, {
|
||||
// "address": "A区科创园东塔吊东北角球机",
|
||||
// "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000010_34020000001320000010.flv",
|
||||
// "id": "e410e322-cceb-40b9-899b-4f3d2e8215eb",
|
||||
// "projectId": "HT6YXM-202303232023030010",
|
||||
// "projectName": "A区科创园"
|
||||
// }, {
|
||||
// "address": "A区科创园东塔吊西南角球机",
|
||||
// "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000011_34020000001320000011.flv",
|
||||
// "id": "ff3e0079-068c-49f0-b1fe-3fa8544d91f2",
|
||||
// "projectId": "HT6YXM-202303232023030010",
|
||||
// "projectName": "A区科创园"
|
||||
// }],
|
||||
// "total": 4
|
||||
// }
|
||||
// }
|
||||
cameraList.value = resp.data.rows;
|
||||
total.value = resp.data.total;
|
||||
cameraLoading.value = false;
|
||||
if (total.value == 0) {
|
||||
const rep = await axios.get(
|
||||
`./jd?cmd=com.awspaas.user.apps.cmp_photo_list&sid=${sid}&proId=${queryParams.query}`
|
||||
); // 摄像头列表为空时,获取图片列表
|
||||
imageList.value = rep.data;
|
||||
}
|
||||
// if (total.value == 0) {
|
||||
// const rep = await axios.get(
|
||||
// `./jd?cmd=com.awspaas.user.apps.cmp_photo_list&sid=${sid}&proId=${queryParams.query}`
|
||||
// ); // 摄像头列表为空时,获取图片列表
|
||||
|
||||
// const rep = await axios.get(
|
||||
// `/api/portal/r/jd?cmd=com.awspaas.user.apps.cmp_photo_list&sid=${sid}&proId=${queryParams.query}`
|
||||
// ); // 摄像头列表为空时,获取图片列表
|
||||
// imageList.value = rep.data;
|
||||
// }
|
||||
};
|
||||
|
||||
const loadImageList = async () => {
|
||||
// const resp = await axios.get(
|
||||
// `./jd?cmd=com.awspaas.user.apps.cmp_photo_list&sid=${sid}&proId=${queryParams.query}`
|
||||
// ); // 摄像头列表为空时,获取图片列表
|
||||
// TODO:test
|
||||
const resp = await axios.get(
|
||||
`/api/portal/r/jd?cmd=com.awspaas.user.apps.cmp_photo_list&sid=b9e99f78-2f6e-4d1c-aea9-4364f4191d30&proId=${queryParams.query}`
|
||||
); // 摄像头列表为空时,获取图片列表
|
||||
imageList.value = resp.data;
|
||||
};
|
||||
const cameraListRef = ref();
|
||||
// 滚动操作
|
||||
@ -147,6 +302,14 @@ loadProjectList().then((data) => {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: scroll;
|
||||
}
|
||||
.naive-select-wrap {
|
||||
width: 750px;
|
||||
padding: 20px 20px 0px;
|
||||
}
|
||||
.naive-tabs {
|
||||
padding: 20px 20px 0;
|
||||
}
|
||||
.nav-bar {
|
||||
width: 750px;
|
||||
@ -159,94 +322,68 @@ loadProjectList().then((data) => {
|
||||
font-size: 32px;
|
||||
position: fixed;
|
||||
}
|
||||
.camera-list {
|
||||
// margin-top: 108px;
|
||||
padding: 0px 20px 0px;
|
||||
}
|
||||
.image-list {
|
||||
padding: 0px 20px 0px;
|
||||
.image-item {
|
||||
margin-bottom: 20px;
|
||||
// border-radius: 10px;
|
||||
// overflow: hidden;
|
||||
img {
|
||||
border-radius: 10px;
|
||||
object-fit: cover;
|
||||
height: 420px;
|
||||
width: 710px;
|
||||
.switch {
|
||||
width: 686px;
|
||||
height: 76px;
|
||||
background: #e4e4e4;
|
||||
border-radius: 8px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
.switch-item {
|
||||
width: 331px;
|
||||
height: 60px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&.active {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .site-list {
|
||||
// flex: 1;
|
||||
// margin-top: 20px;
|
||||
// padding-bottom: 28px;
|
||||
.camera-list {
|
||||
// margin-top: 108px;
|
||||
// padding: 0px 20px 0px;
|
||||
}
|
||||
.image-list {
|
||||
// padding: 0px 20px 0px;
|
||||
.image-item {
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
.uplode-time {
|
||||
color: indianred;
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
// backdrop-filter: blur(14px) saturate(150%);
|
||||
border-radius: 999px;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
// border-radius: 10px;
|
||||
// overflow: hidden;
|
||||
:deep(.n-image-item) {
|
||||
img {
|
||||
// width: 100%;
|
||||
width: 710px;
|
||||
height: 420px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
// img {
|
||||
// object-fit: cover;
|
||||
// border-radius: 10px;
|
||||
// height: 420px;
|
||||
// width: 710px;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
// .site-item {
|
||||
// margin-left: 16px;
|
||||
// margin-right: 16px;
|
||||
// border-radius: 8px;
|
||||
// background-color: #fff;
|
||||
|
||||
// &:not(:last-child) {
|
||||
// margin-bottom: 40px;
|
||||
// }
|
||||
|
||||
// .site-title {
|
||||
// background-color: #949494;
|
||||
// width: 120px;
|
||||
// height: 40px;
|
||||
// line-height: 20px;
|
||||
// border-radius: 8px 0px 18px 0px;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
|
||||
// text {
|
||||
// font-family: YSBiaoTiHei-regular;
|
||||
// color: white;
|
||||
// font-size: 20px;
|
||||
// }
|
||||
// }
|
||||
// .camera-list {
|
||||
// // margin-top: 108px;
|
||||
// padding: 0px 20px 0px;
|
||||
// }
|
||||
// // .camera-list {
|
||||
// // padding: 0 20px 0;
|
||||
// // margin-top: 12px;
|
||||
// // white-space: nowrap;
|
||||
// // // width: 100%;
|
||||
// // display: flex;
|
||||
// // justify-content: space-between;
|
||||
|
||||
// // .camera-item {
|
||||
// // // background-color: aquamarine;
|
||||
|
||||
// // .camera-image {
|
||||
// // width: 200px;
|
||||
// // height: 140px;
|
||||
// // }
|
||||
|
||||
// // .camera-title {
|
||||
// // font-size: 20px;
|
||||
// // text-align: center;
|
||||
// // }
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // .site-time {
|
||||
// // padding-right: 20px;
|
||||
// // margin-top: 26px;
|
||||
// // border-radius: 0 0 8px 8px;
|
||||
// // text-align: right;
|
||||
// // height: 30px;
|
||||
// // font-size: 20px;
|
||||
// // color: #fff;
|
||||
// // background-color: #d7d7d7;
|
||||
// // }
|
||||
// }
|
||||
// }
|
||||
#proj-select {
|
||||
border: none;
|
||||
box-shadow: 0 0 0 1px #dcdfe6 inset;
|
||||
|
||||
@ -3,27 +3,62 @@
|
||||
<div class="camera-name">
|
||||
{{ props.name }}
|
||||
</div>
|
||||
<video class="camera-player" ref="previewVideoRef"></video>
|
||||
<video ref="previewVideoRef" class="camera-player"></video>
|
||||
<div class="overlay" @click="openPlayModal">
|
||||
<!-- <img src="../assets/stLine-play-l@3x.png" alt="" width="40" height="40" /> -->
|
||||
<span class="iconfont icon-bofang_o" style="font-size: 60px"></span>
|
||||
</div>
|
||||
<div v-if="showModal" class="modal-overlay" @click="closePlayModal">
|
||||
<span
|
||||
v-if="isFullscreen"
|
||||
class="quit-fullscreen iconfont icon-quxiaoquanping_o"
|
||||
@click.stop="exitFullscreen"
|
||||
v-if="isFullscreen"
|
||||
></span>
|
||||
<div :class="`modal`" ref="rotateElementRef">
|
||||
<div ref="rotateElementRef" :class="`modal`">
|
||||
<video
|
||||
:class="`camera-player ${isFullscreen ? 'fullscreen-video' : ''}`"
|
||||
ref="videoElementRef"
|
||||
:class="`camera-player ${isFullscreen ? 'fullscreen-video' : ''}`"
|
||||
></video>
|
||||
|
||||
<div class="video-overlay" @click.stop="switchPlayStatus">
|
||||
<div
|
||||
:class="`video-overlay ${isFullscreen ? 'fullscreen-video' : ''}`"
|
||||
@click.stop="switchPlayStatus"
|
||||
>
|
||||
<div v-if="isFullscreen" class="arrow-control">
|
||||
<div
|
||||
:class="`up iconfont icon-up ${pressed.up ? 'pressed' : ''}`"
|
||||
@touchend="moveCamera('stop')"
|
||||
@touchstart="moveCamera('up')"
|
||||
@contextmenu.prevent
|
||||
></div>
|
||||
<div
|
||||
:class="`down iconfont icon-down ${
|
||||
pressed.down ? 'pressed' : ''
|
||||
}`"
|
||||
@touchend="moveCamera('stop')"
|
||||
@touchstart="moveCamera('down')"
|
||||
@contextmenu.prevent
|
||||
></div>
|
||||
<div
|
||||
:class="`left iconfont icon-left ${
|
||||
pressed.left ? 'pressed' : ''
|
||||
}`"
|
||||
@touchend="moveCamera('stop')"
|
||||
@touchstart="moveCamera('left')"
|
||||
@contextmenu.prevent
|
||||
></div>
|
||||
<div
|
||||
:class="`right iconfont icon-right ${
|
||||
pressed.right ? 'pressed' : ''
|
||||
}`"
|
||||
@touchend="moveCamera('stop')"
|
||||
@touchstart="moveCamera('right')"
|
||||
@contextmenu.prevent
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="iconfont icon-quanping_o fullscreen"
|
||||
v-if="!isFullscreen"
|
||||
class="iconfont icon-quanping_o fullscreen"
|
||||
@click.stop="videoFullscreen"
|
||||
></div>
|
||||
</div>
|
||||
@ -31,8 +66,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="camera">
|
||||
import { nextTick, onMounted, onUnmounted, ref } from "vue";
|
||||
<script name="camera" setup>
|
||||
import { nextTick, onUnmounted, reactive, ref, toRefs } from "vue";
|
||||
import flvjs from "flv.js";
|
||||
import axios from "axios";
|
||||
// import { useRoute } from "vue-router";
|
||||
@ -46,6 +81,7 @@ const props = defineProps({
|
||||
"https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
|
||||
},
|
||||
});
|
||||
const { source } = toRefs(props);
|
||||
// const route = useRoute();
|
||||
// document.title = route.query.proname;
|
||||
const showModal = ref(false);
|
||||
@ -136,13 +172,51 @@ const rotateElementRef = ref();
|
||||
const videoFullscreen = () => {
|
||||
const scale = screen.availWidth / videoElementRef.value.offsetHeight;
|
||||
videoElementRef.value.style.setProperty("--scale", scale);
|
||||
videoElementRef.value.parentNode.style.setProperty("--scale", scale);
|
||||
isFullscreen.value = true;
|
||||
};
|
||||
|
||||
const token = ref("");
|
||||
const loadToken = async () => {
|
||||
const url = new URL(source.value);
|
||||
const resp = await axios.get(
|
||||
`${url.protocol}//${url.host}/api/v1/login?username=admin&password=de240967f3dff8b62df33e719d646e3e`
|
||||
);
|
||||
return resp.data.URLToken;
|
||||
};
|
||||
|
||||
const pressed = reactive({
|
||||
left: false,
|
||||
right: false,
|
||||
up: false,
|
||||
down: false,
|
||||
});
|
||||
const moveCamera = async (arrow) => {
|
||||
if (!token.value) {
|
||||
token.value = await loadToken();
|
||||
}
|
||||
|
||||
const serial = source.value.split("/flv/hls/")[1].split("_")[0];
|
||||
const url = new URL(source.value);
|
||||
await axios.get(
|
||||
`${url.protocol}//${url.host}/api/v1/control/ptz?serial=${serial}&code=${serial}&command=${arrow}&token=${token.value}`
|
||||
);
|
||||
if (arrow === "stop") {
|
||||
pressed.left = false;
|
||||
pressed.right = false;
|
||||
pressed.up = false;
|
||||
pressed.down = false;
|
||||
} else {
|
||||
pressed[arrow] = true;
|
||||
}
|
||||
};
|
||||
|
||||
const exitFullscreen = () => {
|
||||
isFullscreen.value = false;
|
||||
};
|
||||
onUnmounted(() => {
|
||||
console.log("destroy player here");
|
||||
|
||||
function flvDestroy() {
|
||||
flvPlayer.off("ERROR", flvPlayerEventHandler);
|
||||
flvPlayer.pause();
|
||||
@ -151,6 +225,7 @@ onUnmounted(() => {
|
||||
flvPlayer.destroy();
|
||||
flvPlayer = null;
|
||||
}
|
||||
|
||||
if (flvPlayer) {
|
||||
flvDestroy();
|
||||
}
|
||||
@ -158,6 +233,7 @@ onUnmounted(() => {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "../assets/fonts/iconfont.css";
|
||||
|
||||
.camera-item {
|
||||
// height: 300px;
|
||||
background-color: white;
|
||||
@ -171,13 +247,13 @@ onUnmounted(() => {
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
background-color: #c6c6c6;
|
||||
border-radius: 10px 0 10px 0;
|
||||
border-radius: 10px 10px 0 0;
|
||||
color: white;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 20px;
|
||||
height: 50px;
|
||||
width: 160px;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
@ -198,6 +274,7 @@ onUnmounted(() => {
|
||||
justify-content: center;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
@ -207,6 +284,7 @@ onUnmounted(() => {
|
||||
z-index: 999;
|
||||
// position: relative;
|
||||
background-color: rgba(153, 153, 153, 0.363);
|
||||
|
||||
.quit-fullscreen {
|
||||
position: fixed;
|
||||
font-size: 60px;
|
||||
@ -214,6 +292,7 @@ onUnmounted(() => {
|
||||
bottom: 25px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -223,6 +302,7 @@ onUnmounted(() => {
|
||||
// height: 60vw;
|
||||
background-color: #fff;
|
||||
border-radius: 2vw;
|
||||
|
||||
.fullscreen-video {
|
||||
transform-origin: center;
|
||||
transform: scale(var(--scale)) rotate(90deg);
|
||||
@ -232,6 +312,7 @@ onUnmounted(() => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
//background-color: #eee;
|
||||
left: 0;
|
||||
top: 0;
|
||||
// display: flex;
|
||||
@ -245,7 +326,73 @@ onUnmounted(() => {
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
font-size: 60px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: #eee;
|
||||
color: #777;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.exit-fullscreen {
|
||||
position: absolute;
|
||||
font-size: 40px;
|
||||
color: white;
|
||||
z-index: 99999;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
.arrow-control {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.56);
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
bottom: 25px;
|
||||
z-index: 9999;
|
||||
|
||||
.iconfont {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 32px;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.iconfont.pressed {
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
.up {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.down {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 4px;
|
||||
}
|
||||
|
||||
.left {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
.right {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
import { openBlock as r, createElementBlock as s, renderSlot as _ } from "vue";
|
||||
const l = (t, e) => {
|
||||
const o = t.__vccOpts || t;
|
||||
for (const [c, n] of e)
|
||||
o[c] = n;
|
||||
return o;
|
||||
}, a = {}, i = { class: "scroll-wrap" };
|
||||
function d(t, e) {
|
||||
return r(), s("div", i, [
|
||||
_(t.$slots, "default")
|
||||
]);
|
||||
}
|
||||
const p = /* @__PURE__ */ l(a, [["render", d]]);
|
||||
export {
|
||||
p as List
|
||||
};
|
||||
@ -1 +0,0 @@
|
||||
(function(e,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e["infinite-list"]={},e.Vue))})(this,function(e,t){"use strict";const l="",c=(n,s)=>{const i=n.__vccOpts||n;for(const[f,_]of s)i[f]=_;return i},r={},u={class:"scroll-wrap"};function d(n,s){return t.openBlock(),t.createElementBlock("div",u,[t.renderSlot(n.$slots,"default")])}const o=c(r,[["render",d]]);e.List=o,e.default=o,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
||||
@ -3,7 +3,8 @@ import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import "modern-normalize/modern-normalize.css";
|
||||
// import { createWebHashHistory, createRouter } from "vue-router";
|
||||
import './assets/fonts/iconfont.css'
|
||||
import "./assets/fonts/iconfont.css";
|
||||
// import naive from "naive-ui";
|
||||
|
||||
// const Home = { template: "<div>Home</div>" };
|
||||
// const About = { template: "<div>About</div>" };
|
||||
|
||||
@ -2,6 +2,17 @@ const { defineConfig } = require("@vue/cli-service");
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true,
|
||||
lintOnSave: false,
|
||||
devServer: {
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://81.68.90.198:8088",
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
"^/api": "", // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 js把路径中的/api去掉
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
publicPath: "./",
|
||||
assetsDir: "../apps/com.awspaas.user.apps.cmp/monitor",
|
||||
});
|
||||
|
||||
147
yarn.lock
147
yarn.lock
@ -965,6 +965,21 @@
|
||||
"@babel/helper-validator-identifier" "^7.18.6"
|
||||
to-fast-properties "^2.0.0"
|
||||
|
||||
"@css-render/plugin-bem@^0.15.10":
|
||||
version "0.15.11"
|
||||
resolved "https://registry.npmmirror.com/@css-render/plugin-bem/-/plugin-bem-0.15.11.tgz#250b853704af1fbb935b8fcd987839dcc9c95ce2"
|
||||
integrity sha512-Bn8qadYPIz5DhZ4obTGHOJzeziQH6kY0+Fk5AEvwuuy378SLwwvXuuoechLjBHcgKkPCM03Oo4dDSGP/6NMdyw==
|
||||
|
||||
"@css-render/vue3-ssr@^0.15.10":
|
||||
version "0.15.11"
|
||||
resolved "https://registry.npmmirror.com/@css-render/vue3-ssr/-/vue3-ssr-0.15.11.tgz#d6646f69c7bd4b54485a40441ac60102822cd492"
|
||||
integrity sha512-n+SuqLPbY30FUTM8slX75OaEG+c8XlTOFrAklekX2XQGvBbz9XdBE6hTEgGlV5kPcTMqTJeCG7Vzhs9/29VC7w==
|
||||
|
||||
"@emotion/hash@~0.8.0":
|
||||
version "0.8.0"
|
||||
resolved "https://registry.npmmirror.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
|
||||
integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
|
||||
|
||||
"@eslint/eslintrc@^0.4.3":
|
||||
version "0.4.3"
|
||||
resolved "https://registry.npmmirror.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
|
||||
@ -1054,6 +1069,11 @@
|
||||
"@jridgewell/resolve-uri" "^3.0.3"
|
||||
"@jridgewell/sourcemap-codec" "^1.4.10"
|
||||
|
||||
"@juggle/resize-observer@^3.3.1":
|
||||
version "3.4.0"
|
||||
resolved "https://registry.npmmirror.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
|
||||
integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
|
||||
|
||||
"@leichtgewicht/ip-codec@^2.0.1":
|
||||
version "2.0.4"
|
||||
resolved "https://registry.npmmirror.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
|
||||
@ -1228,6 +1248,23 @@
|
||||
resolved "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
|
||||
integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
|
||||
|
||||
"@types/katex@^0.14.0":
|
||||
version "0.14.0"
|
||||
resolved "https://registry.npmmirror.com/@types/katex/-/katex-0.14.0.tgz#b84c0afc3218069a5ad64fe2a95321881021b5fe"
|
||||
integrity sha512-+2FW2CcT0K3P+JMR8YG846bmDwplKUTsWgT2ENwdQ1UdVfRk3GQrh6Mi4sTopy30gI8Uau5CEqHTDZ6YvWIUPA==
|
||||
|
||||
"@types/lodash-es@^4.17.6":
|
||||
version "4.17.6"
|
||||
resolved "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.6.tgz#c2ed4c8320ffa6f11b43eb89e9eaeec65966a0a0"
|
||||
integrity sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==
|
||||
dependencies:
|
||||
"@types/lodash" "*"
|
||||
|
||||
"@types/lodash@*", "@types/lodash@^4.14.181":
|
||||
version "4.14.191"
|
||||
resolved "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.191.tgz#09511e7f7cba275acd8b419ddac8da9a6a79e2fa"
|
||||
integrity sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==
|
||||
|
||||
"@types/mime@*":
|
||||
version "3.0.1"
|
||||
resolved "https://registry.npmmirror.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"
|
||||
@ -1243,6 +1280,11 @@
|
||||
resolved "https://registry.npmmirror.com/@types/node/-/node-18.7.18.tgz#633184f55c322e4fb08612307c274ee6d5ed3154"
|
||||
integrity sha512-m+6nTEOadJZuTPkKR/SYK3A2d7FZrgElol9UP1Kae90VVU4a6mxnPuLiIW1m4Cq4gZ/nWb9GrdVXJCoCazDAbg==
|
||||
|
||||
"@types/node@~17.0.5":
|
||||
version "17.0.45"
|
||||
resolved "https://registry.npmmirror.com/@types/node/-/node-17.0.45.tgz#2c0fafd78705e7a18b7906b5201a522719dc5190"
|
||||
integrity sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==
|
||||
|
||||
"@types/normalize-package-data@^2.4.0":
|
||||
version "2.4.1"
|
||||
resolved "https://registry.npmmirror.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
|
||||
@ -1972,6 +2014,11 @@ astral-regex@^2.0.0:
|
||||
resolved "https://registry.npmmirror.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
|
||||
integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
|
||||
|
||||
async-validator@^4.0.7:
|
||||
version "4.2.5"
|
||||
resolved "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz#c96ea3332a521699d0afaaceed510a54656c6339"
|
||||
integrity sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==
|
||||
|
||||
async@^2.6.4:
|
||||
version "2.6.4"
|
||||
resolved "https://registry.npmmirror.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
|
||||
@ -2628,6 +2675,15 @@ css-minimizer-webpack-plugin@^3.0.2:
|
||||
serialize-javascript "^6.0.0"
|
||||
source-map "^0.6.1"
|
||||
|
||||
css-render@^0.15.10:
|
||||
version "0.15.11"
|
||||
resolved "https://registry.npmmirror.com/css-render/-/css-render-0.15.11.tgz#52a77cd8335394485be2417675121c2efe954bb5"
|
||||
integrity sha512-hnLrHPUndVUTF5nmNPRey6hpixK02IPUGdEsm2xRjvJuewToyrVFx9Nmai8rgfVzhTFo5SJVh2PHAtzaIV8JKw==
|
||||
dependencies:
|
||||
"@emotion/hash" "~0.8.0"
|
||||
"@types/node" "~17.0.5"
|
||||
csstype "~3.0.5"
|
||||
|
||||
css-select@^4.1.3:
|
||||
version "4.3.0"
|
||||
resolved "https://registry.npmmirror.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
|
||||
@ -2728,6 +2784,21 @@ csstype@^2.6.8:
|
||||
resolved "https://registry.npmmirror.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
|
||||
integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
|
||||
|
||||
csstype@~3.0.5:
|
||||
version "3.0.11"
|
||||
resolved "https://registry.npmmirror.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33"
|
||||
integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==
|
||||
|
||||
date-fns-tz@^1.3.3:
|
||||
version "1.3.7"
|
||||
resolved "https://registry.npmmirror.com/date-fns-tz/-/date-fns-tz-1.3.7.tgz#e8e9d2aaceba5f1cc0e677631563081fdcb0e69a"
|
||||
integrity sha512-1t1b8zyJo+UI8aR+g3iqr5fkUHWpd58VBx8J/ZSQ+w7YrGlw80Ag4sA86qkfCXRBLmMc4I2US+aPMd4uKvwj5g==
|
||||
|
||||
date-fns@^2.28.0:
|
||||
version "2.29.3"
|
||||
resolved "https://registry.npmmirror.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
|
||||
integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
|
||||
|
||||
debug@2.6.9:
|
||||
version "2.6.9"
|
||||
resolved "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
|
||||
@ -3199,6 +3270,11 @@ events@^3.2.0:
|
||||
resolved "https://registry.npmmirror.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
|
||||
integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
|
||||
|
||||
evtd@^0.2.2, evtd@^0.2.4:
|
||||
version "0.2.4"
|
||||
resolved "https://registry.npmmirror.com/evtd/-/evtd-0.2.4.tgz#0aac39ba44d6926e6668948ac27618e0795b9d07"
|
||||
integrity sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw==
|
||||
|
||||
execa@^0.8.0:
|
||||
version "0.8.0"
|
||||
resolved "https://registry.npmmirror.com/execa/-/execa-0.8.0.tgz#d8d76bbc1b55217ed190fd6dd49d3c774ecfc8da"
|
||||
@ -3650,6 +3726,11 @@ highlight.js@^10.7.1:
|
||||
resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
|
||||
integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
|
||||
|
||||
highlight.js@^11.5.0:
|
||||
version "11.7.0"
|
||||
resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.7.0.tgz#3ff0165bc843f8c9bce1fd89e2fda9143d24b11e"
|
||||
integrity sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==
|
||||
|
||||
hosted-git-info@^2.1.4:
|
||||
version "2.8.9"
|
||||
resolved "https://registry.npmmirror.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
|
||||
@ -4155,6 +4236,11 @@ locate-path@^5.0.0:
|
||||
dependencies:
|
||||
p-locate "^4.1.0"
|
||||
|
||||
lodash-es@^4.17.21:
|
||||
version "4.17.21"
|
||||
resolved "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
|
||||
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
|
||||
|
||||
lodash.debounce@^4.0.8:
|
||||
version "4.0.8"
|
||||
resolved "https://registry.npmmirror.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
|
||||
@ -4417,6 +4503,30 @@ mz@^2.4.0:
|
||||
object-assign "^4.0.1"
|
||||
thenify-all "^1.0.0"
|
||||
|
||||
naive-ui@^2.34.2:
|
||||
version "2.34.2"
|
||||
resolved "https://registry.npmmirror.com/naive-ui/-/naive-ui-2.34.2.tgz#0dad81d2fe28178d07de344688a0c027695247bc"
|
||||
integrity sha512-JyvtVqHzS0O0DyPFFg95cJW0fp2WCEPsjXbeplkxFIfJHCgp5KC75PjnBycryegjPiZNLn9WlRDxXU5emEqRfg==
|
||||
dependencies:
|
||||
"@css-render/plugin-bem" "^0.15.10"
|
||||
"@css-render/vue3-ssr" "^0.15.10"
|
||||
"@types/katex" "^0.14.0"
|
||||
"@types/lodash" "^4.14.181"
|
||||
"@types/lodash-es" "^4.17.6"
|
||||
async-validator "^4.0.7"
|
||||
css-render "^0.15.10"
|
||||
date-fns "^2.28.0"
|
||||
date-fns-tz "^1.3.3"
|
||||
evtd "^0.2.4"
|
||||
highlight.js "^11.5.0"
|
||||
lodash "^4.17.21"
|
||||
lodash-es "^4.17.21"
|
||||
seemly "^0.3.6"
|
||||
treemate "^0.3.11"
|
||||
vdirs "^0.1.8"
|
||||
vooks "^0.2.12"
|
||||
vueuc "^0.4.47"
|
||||
|
||||
nanoid@^3.3.4:
|
||||
version "3.3.4"
|
||||
resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
|
||||
@ -5446,6 +5556,11 @@ schema-utils@^4.0.0:
|
||||
ajv-formats "^2.1.1"
|
||||
ajv-keywords "^5.0.0"
|
||||
|
||||
seemly@^0.3.6:
|
||||
version "0.3.6"
|
||||
resolved "https://registry.npmmirror.com/seemly/-/seemly-0.3.6.tgz#7ef97e8083dea00804965e2662f572a5df9cb18e"
|
||||
integrity sha512-lEV5VB8BUKTo/AfktXJcy+JeXns26ylbMkIUco8CYREsQijuz4mrXres2Q+vMLdwkuLxJdIPQ8IlCIxLYm71Yw==
|
||||
|
||||
select-hose@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.npmmirror.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
|
||||
@ -5988,6 +6103,11 @@ tr46@~0.0.3:
|
||||
resolved "https://registry.npmmirror.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
|
||||
integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
|
||||
|
||||
treemate@^0.3.11:
|
||||
version "0.3.11"
|
||||
resolved "https://registry.npmmirror.com/treemate/-/treemate-0.3.11.tgz#7d52f8f69ab9ce326f8d139e0a3d1ffb25e48222"
|
||||
integrity sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg==
|
||||
|
||||
tslib@^2.0.3:
|
||||
version "2.4.0"
|
||||
resolved "https://registry.npmmirror.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
|
||||
@ -6122,6 +6242,20 @@ vary@~1.1.2:
|
||||
resolved "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
|
||||
integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
|
||||
|
||||
vdirs@^0.1.4, vdirs@^0.1.8:
|
||||
version "0.1.8"
|
||||
resolved "https://registry.npmmirror.com/vdirs/-/vdirs-0.1.8.tgz#a103bc43baca738f8dea912a7e9737154a19dbc2"
|
||||
integrity sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==
|
||||
dependencies:
|
||||
evtd "^0.2.2"
|
||||
|
||||
vooks@^0.2.12, vooks@^0.2.4:
|
||||
version "0.2.12"
|
||||
resolved "https://registry.npmmirror.com/vooks/-/vooks-0.2.12.tgz#2b6e23330b77bac81c7f7a344c4ca3e9f4f6c373"
|
||||
integrity sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==
|
||||
dependencies:
|
||||
evtd "^0.2.2"
|
||||
|
||||
vue-eslint-parser@^8.0.1:
|
||||
version "8.3.0"
|
||||
resolved "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz#5d31129a1b3dd89c0069ca0a1c88f970c360bd0d"
|
||||
@ -6173,6 +6307,19 @@ vue@^3.2.13:
|
||||
"@vue/server-renderer" "3.2.39"
|
||||
"@vue/shared" "3.2.39"
|
||||
|
||||
vueuc@^0.4.47:
|
||||
version "0.4.49"
|
||||
resolved "https://registry.npmmirror.com/vueuc/-/vueuc-0.4.49.tgz#913e6fd629bdfd5bbed79bf108aec605720af2db"
|
||||
integrity sha512-WarAC44a/Yx78CxkAgROYLq+LkAeCGA/6wHidVoFmHLbzyF3SiP2nzRNGD/8zJeJInXv18EnWK6A//eGgMMq8w==
|
||||
dependencies:
|
||||
"@css-render/vue3-ssr" "^0.15.10"
|
||||
"@juggle/resize-observer" "^3.3.1"
|
||||
css-render "^0.15.10"
|
||||
evtd "^0.2.4"
|
||||
seemly "^0.3.6"
|
||||
vdirs "^0.1.4"
|
||||
vooks "^0.2.4"
|
||||
|
||||
watchpack@^2.4.0:
|
||||
version "2.4.0"
|
||||
resolved "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
|
||||
|
||||
Reference in New Issue
Block a user