arrow control
This commit is contained in:
@ -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>" };
|
||||
|
||||
Reference in New Issue
Block a user