From a2a400c1d5e6a55e2e71730ffceb710e2fa610cc Mon Sep 17 00:00:00 2001
From: longyvfengyun <496960745@qq.com>
Date: 星期日, 01 十月 2023 00:27:53 +0800
Subject: [PATCH] 内容提价
---
src/assets/iconfont/iconfont.json | 44 ++
src/components/dangerActBox.vue | 88 ++++
src/views/user/drivingAnalysis.vue | 44 +
src/assets/iconfont/iconfont.css | 35 +
src/assets/iconfont/demo.css | 539 ++++++++++++++++++++++++++
src/assets/iconfont/iconfont.ttf | 0
src/views/mainLayout/index.vue | 3
src/router/index.js | 17
src/views/mainLayout/components/pageHeader.vue | 9
src/assets/iconfont/demo_index.html | 303 +++++++++++++++
src/assets/iconfont/iconfont.js | 1
src/views/moudle/user/login.js | 1
src/main.js | 2
src/assets/iconfont/iconfont.woff | 0
src/views/moudle/user/userDropdown.js | 39 +
src/assets/iconfont/iconfont.woff2 | 0
src/views/user/js/dangerActModule.js | 42 ++
17 files changed, 1,152 insertions(+), 15 deletions(-)
diff --git a/src/assets/iconfont/demo.css b/src/assets/iconfont/demo.css
new file mode 100644
index 0000000..a67054a
--- /dev/null
+++ b/src/assets/iconfont/demo.css
@@ -0,0 +1,539 @@
+/* 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');
+}
+
+.logo {
+ font-family: "iconfont logo";
+ font-size: 160px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+ position: relative;
+}
+
+.nav-tabs .nav-more {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ height: 42px;
+ line-height: 42px;
+ color: #666;
+}
+
+#tabs {
+ border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+ cursor: pointer;
+ width: 100px;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ font-size: 16px;
+ border-bottom: 2px solid transparent;
+ position: relative;
+ z-index: 1;
+ margin-bottom: -1px;
+ color: #666;
+}
+
+
+#tabs .active {
+ border-bottom-color: #f00;
+ color: #222;
+}
+
+.tab-container .content {
+ display: none;
+}
+
+/* 椤甸潰甯冨眬 */
+.main {
+ padding: 30px 100px;
+ width: 960px;
+ margin: 0 auto;
+}
+
+.main .logo {
+ color: #333;
+ text-align: left;
+ margin-bottom: 30px;
+ line-height: 1;
+ height: 110px;
+ margin-top: -50px;
+ overflow: hidden;
+ *zoom: 1;
+}
+
+.main .logo a {
+ font-size: 160px;
+ color: #333;
+}
+
+.helps {
+ margin-top: 40px;
+}
+
+.helps pre {
+ padding: 20px;
+ margin: 10px 0;
+ border: solid 1px #e7e1cd;
+ background-color: #fffdef;
+ overflow: auto;
+}
+
+.icon_lists {
+ width: 100% !important;
+ overflow: hidden;
+ *zoom: 1;
+}
+
+.icon_lists li {
+ width: 100px;
+ margin-bottom: 10px;
+ margin-right: 20px;
+ text-align: center;
+ list-style: none !important;
+ cursor: default;
+}
+
+.icon_lists li .code-name {
+ line-height: 1.2;
+}
+
+.icon_lists .icon {
+ display: block;
+ height: 100px;
+ line-height: 100px;
+ font-size: 42px;
+ margin: 10px auto;
+ color: #333;
+ -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+ -moz-transition: font-size 0.25s linear, width 0.25s linear;
+ transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+ font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+ /* 閫氳繃璁剧疆 font-size 鏉ユ敼鍙樺浘鏍囧ぇ灏� */
+ width: 1em;
+ /* 鍥炬爣鍜屾枃瀛楃浉閭绘椂锛屽瀭鐩村榻� */
+ vertical-align: -0.15em;
+ /* 閫氳繃璁剧疆 color 鏉ユ敼鍙� SVG 鐨勯鑹�/fill */
+ fill: currentColor;
+ /* path 鍜� stroke 婧㈠嚭 viewBox 閮ㄥ垎鍦� IE 涓嬩細鏄剧ず
+ normalize.css 涓篃鍖呭惈杩欒 */
+ overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+ color: #666;
+}
+
+/* markdown 鏍峰紡 */
+.markdown {
+ color: #666;
+ font-size: 14px;
+ line-height: 1.8;
+}
+
+.highlight {
+ line-height: 1.5;
+}
+
+.markdown img {
+ vertical-align: middle;
+ max-width: 100%;
+}
+
+.markdown h1 {
+ color: #404040;
+ font-weight: 500;
+ line-height: 40px;
+ margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+ color: #404040;
+ margin: 1.6em 0 0.6em 0;
+ font-weight: 500;
+ clear: both;
+}
+
+.markdown h1 {
+ font-size: 28px;
+}
+
+.markdown h2 {
+ font-size: 22px;
+}
+
+.markdown h3 {
+ font-size: 16px;
+}
+
+.markdown h4 {
+ font-size: 14px;
+}
+
+.markdown h5 {
+ font-size: 12px;
+}
+
+.markdown h6 {
+ font-size: 12px;
+}
+
+.markdown hr {
+ height: 1px;
+ border: 0;
+ background: #e9e9e9;
+ margin: 16px 0;
+ clear: both;
+}
+
+.markdown p {
+ margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+ width: 80%;
+}
+
+.markdown ul>li {
+ list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+ margin-left: 20px;
+ padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+ margin: 0.6em 0;
+}
+
+.markdown ol>li {
+ list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+ margin-left: 20px;
+ padding-left: 4px;
+}
+
+.markdown code {
+ margin: 0 3px;
+ padding: 0 5px;
+ background: #eee;
+ border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+ font-weight: 600;
+}
+
+.markdown>table {
+ border-collapse: collapse;
+ border-spacing: 0px;
+ empty-cells: show;
+ border: 1px solid #e9e9e9;
+ width: 95%;
+ margin-bottom: 24px;
+}
+
+.markdown>table th {
+ white-space: nowrap;
+ color: #333;
+ font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+ border: 1px solid #e9e9e9;
+ padding: 8px 16px;
+ text-align: left;
+}
+
+.markdown>table th {
+ background: #F7F7F7;
+}
+
+.markdown blockquote {
+ font-size: 90%;
+ color: #999;
+ border-left: 4px solid #e9e9e9;
+ padding-left: 0.8em;
+ margin: 1em 0;
+}
+
+.markdown blockquote p {
+ margin: 0;
+}
+
+.markdown .anchor {
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ margin-left: 8px;
+}
+
+.markdown .waiting {
+ color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+ opacity: 1;
+ display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+ clear: both;
+}
+
+
+.hljs {
+ display: block;
+ background: white;
+ padding: 0.5em;
+ color: #333333;
+ overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+ color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+ color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+ color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+ color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+ color: #63a35c;
+}
+
+.hljs-tag {
+ color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+ color: #795da3;
+}
+
+.hljs-addition {
+ color: #55a532;
+ background-color: #eaffea;
+}
+
+.hljs-deletion {
+ color: #bd2c00;
+ background-color: #ffecec;
+}
+
+.hljs-link {
+ text-decoration: underline;
+}
+
+/* 浠ｇ爜楂樹寒 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+ color: black;
+ background: none;
+ text-shadow: 0 1px white;
+ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ word-wrap: normal;
+ line-height: 1.5;
+
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+ text-shadow: none;
+ background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+ text-shadow: none;
+ background: #b3d4fc;
+}
+
+@media print {
+
+ code[class*="language-"],
+ pre[class*="language-"] {
+ text-shadow: none;
+ }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+ padding: 1em;
+ margin: .5em 0;
+ overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+ background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+ padding: .1em;
+ border-radius: .3em;
+ white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: slategray;
+}
+
+.token.punctuation {
+ color: #999;
+}
+
+.namespace {
+ opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+ color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+ color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+ color: #9a6e3a;
+ background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+ color: #07a;
+}
+
+.token.function,
+.token.class-name {
+ color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+ color: #e90;
+}
+
+.token.important,
+.token.bold {
+ font-weight: bold;
+}
+
+.token.italic {
+ font-style: italic;
+}
+
+.token.entity {
+ cursor: help;
+}
diff --git a/src/assets/iconfont/demo_index.html b/src/assets/iconfont/demo_index.html
new file mode 100644
index 0000000..3c132b9
--- /dev/null
+++ b/src/assets/iconfont/demo_index.html
@@ -0,0 +1,303 @@
+<!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;
+ }
+
+ .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=4272377" 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">璇煶</div>
+ <div class="code-name">&#xe649;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon iconfont"></span>
+ <div class="name">鐤插姵椹鹃┒</div>
+ <div class="code-name">&#xe632;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon iconfont"></span>
+ <div class="name">鍚哥儫</div>
+ <div class="code-name">&#xe62a;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon iconfont"></span>
+ <div class="name">鎵撶數璇�</div>
+ <div class="code-name">&#xe90a;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon iconfont"></span>
+ <div class="name">椋熷搧</div>
+ <div class="code-name">&#xe607;</div>
+ </li>
+
+ </ul>
+ <div class="article markdown">
+ <h2 id="unicode-">Unicode 寮曠敤</h2>
+ <hr>
+
+ <p>Unicode 鏄瓧浣撳湪缃戦〉绔渶鍘熷鐨勫簲鐢ㄦ柟寮忥紝鐗圭偣鏄細</p>
+ <ul>
+ <li>鏀寔鎸夊瓧浣撶殑鏂瑰紡鍘诲姩鎬佽皟鏁村浘鏍囧ぇ灏忥紝棰滆壊绛夌瓑銆�</li>
+ <li>榛樿鎯呭喌涓嬩笉鏀寔澶氳壊锛岀洿鎺ユ坊鍔犲鑹插浘鏍囦細鑷姩鍘昏壊銆�</li>
+ </ul>
+ <blockquote>
+ <p>娉ㄦ剰锛氭柊鐗� iconfont 鏀寔涓ょ鏂瑰紡寮曠敤澶氳壊鍥炬爣锛歋VG 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=1696090145576') format('woff2'),
+ url('iconfont.woff?t=1696090145576') format('woff'),
+ url('iconfont.ttf?t=1696090145576') format('truetype');
+}
+</code></pre>
+ <h3 id="-iconfont-">绗簩姝ワ細瀹氫箟浣跨敤 iconfont 鐨勬牱寮�</h3>
+<pre><code class="language-css"
+>.iconfont {
+ font-family: "iconfont" !important;
+ font-size: 16px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+ <h3 id="-">绗笁姝ワ細鎸戦�夌浉搴斿浘鏍囧苟鑾峰彇瀛椾綋缂栫爜锛屽簲鐢ㄤ簬椤甸潰</h3>
+<pre>
+<code class="language-html"
+><span class="iconfont">&#x33;</span>
+</code></pre>
+ <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 iconfont-yuyin"></span>
+ <div class="name">
+ 璇煶
+ </div>
+ <div class="code-name">.iconfont-yuyin
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon iconfont iconfont-fatigue-driving"></span>
+ <div class="name">
+ 鐤插姵椹鹃┒
+ </div>
+ <div class="code-name">.iconfont-fatigue-driving
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon iconfont iconfont-xiyan"></span>
+ <div class="name">
+ 鍚哥儫
+ </div>
+ <div class="code-name">.iconfont-xiyan
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon iconfont iconfont-call"></span>
+ <div class="name">
+ 鎵撶數璇�
+ </div>
+ <div class="code-name">.iconfont-call
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon iconfont iconfont-shipin"></span>
+ <div class="name">
+ 椋熷搧
+ </div>
+ <div class="code-name">.iconfont-shipin
+ </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 iconfont-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="#iconfont-yuyin"></use>
+ </svg>
+ <div class="name">璇煶</div>
+ <div class="code-name">#iconfont-yuyin</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#iconfont-fatigue-driving"></use>
+ </svg>
+ <div class="name">鐤插姵椹鹃┒</div>
+ <div class="code-name">#iconfont-fatigue-driving</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#iconfont-xiyan"></use>
+ </svg>
+ <div class="name">鍚哥儫</div>
+ <div class="code-name">#iconfont-xiyan</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#iconfont-call"></use>
+ </svg>
+ <div class="name">鎵撶數璇�</div>
+ <div class="code-name">#iconfont-call</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#iconfont-shipin"></use>
+ </svg>
+ <div class="name">椋熷搧</div>
+ <div class="code-name">#iconfont-shipin</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;
+ vertical-align: -0.15em;
+ fill: currentColor;
+ overflow: hidden;
+}
+</style>
+</code></pre>
+ <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>
+ <script>
+ $(document).ready(function () {
+ $('.tab-container .content:first').show()
+
+ $('#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')
+
+ tabContent.hide().eq(index).fadeIn()
+ }
+ })
+ })
+ </script>
+</body>
+</html>
diff --git a/src/assets/iconfont/iconfont.css b/src/assets/iconfont/iconfont.css
new file mode 100644
index 0000000..59d2b27
--- /dev/null
+++ b/src/assets/iconfont/iconfont.css
@@ -0,0 +1,35 @@
+@font-face {
+ font-family: "iconfont"; /* Project id 4272377 */
+ src: url('iconfont.woff2?t=1696090145576') format('woff2'),
+ url('iconfont.woff?t=1696090145576') format('woff'),
+ url('iconfont.ttf?t=1696090145576') format('truetype');
+}
+
+.iconfont {
+ font-family: "iconfont" !important;
+ font-size: 16px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.iconfont-yuyin:before {
+ content: "\e649";
+}
+
+.iconfont-fatigue-driving:before {
+ content: "\e632";
+}
+
+.iconfont-xiyan:before {
+ content: "\e62a";
+}
+
+.iconfont-call:before {
+ content: "\e90a";
+}
+
+.iconfont-shipin:before {
+ content: "\e607";
+}
+
diff --git a/src/assets/iconfont/iconfont.js b/src/assets/iconfont/iconfont.js
new file mode 100644
index 0000000..ce0b7c9
--- /dev/null
+++ b/src/assets/iconfont/iconfont.js
@@ -0,0 +1 @@
+window._iconfont_svg_string_4272377='<svg><symbol id="iconfont-yuyin" viewBox="0 0 1024 1024"><path d="M515.041727 670.617766c91.584167 0 166.095647-74.504255 166.095647-166.095646V229.350568c0-91.584167-74.51148-166.095647-166.095647-166.095647-91.598617 0-166.102872 74.51148-166.102871 166.095647V504.52212c0 91.591392 74.504255 166.095647 166.102871 166.095646z" fill="" ></path><path d="M801.643237 874.001665H558.391759v-45.423608c161.507768-21.313766 286.60151-159.788217 286.60151-327.01819a43.350032 43.350032 0 0 0-86.700064 0c0 134.124998-109.12648 243.251478-243.258703 243.251479-134.124998 0-243.244253-109.12648-243.244253-243.251479a43.350032 43.350032 0 0 0-86.700063 0c0 167.229972 125.100967 305.711649 286.601509 327.01819v45.423608H228.440217a43.350032 43.350032 0 0 0 0 86.700064h573.20302a43.350032 43.350032 0 0 0 0-86.700064z" fill="" ></path></symbol><symbol id="iconfont-fatigue-driving" viewBox="0 0 1024 1024"><path d="M960 316.371l-252.379 67.625-16.906-63.095 108.151-164.228-141.963 38.039-16.906-63.095 252.379-67.625 16.906 63.095-108.151 164.228 141.963-38.039L960 316.371zM304 384s-95.999 16.001-112 160h640c-7.042-63.376-29.58-101.951-52.61-125.288l65.622-17.897C868.47 433.944 888.505 480.074 896 544h-1.804C934.078 574.362 960 623.496 960 678.955v50.087c0 54.621-25.139 103.113-64.001 133.573v65.384c0 17.674-14.326 32-31.999 32h-96c-17.673 0-32-14.326-32-32v-32H288v32c0 17.674-14.326 32-32 32h-96c-17.674 0-32-14.326-32-32v-65.384c-38.861-30.46-64-78.952-64-133.573v-50.087C64 623.496 89.921 574.362 129.803 544H128c22.667-193.333 159.999-224 159.999-224h347.429l18.286 64H304z m511.999 416c44.182 0 80-35.818 80-80.001 0-44.181-35.817-79.999-80-79.999-44.182 0-80 35.818-80 79.999 0.001 44.183 35.818 80.001 80 80.001zM376 784h272c13.255 0 24-10.745 24-24s-10.745-24-24-24H376c-13.255 0-24 10.745-24 24s10.745 24 24 24z m0-80h272c13.255 0 24-10.745 24-24s-10.745-24-24-24H376c-13.255 0-24 10.745-24 24s10.745 24 24 24z m-248.001 15.998c0 44.184 35.817 80.001 80 80.001C252.182 800 288 764.182 288 719.998c0-44.181-35.817-79.999-80.001-79.999-44.183 0-80 35.818-80 79.999z" ></path></symbol><symbol id="iconfont-xiyan" viewBox="0 0 1024 1024"><path d="M63.284325 904.625192h673.071466V766.051113H63.284325v138.574079z m830.121338 0h67.306942V766.051113h-67.306942v138.574079z m-112.178919 0h67.306942V766.051113H781.226744v138.574079z m38.140669-520.575306c27.595498-27.945469 44.870953-66.977437 44.870953-109.934808 0-85.453231-67.531046-154.74027-150.319587-154.74027v69.286016c45.768393 0 83.011622 38.33919 83.011622 85.453231s-37.243229 85.454254-83.011622 85.454254v69.287039c100.750635 0 179.485861 84.298941 179.485861 187.997722v103.006002h67.306942V616.622826c0.001023-102.775758-57.434084-191.462636-141.344169-232.57294zM692.830485 497.91112h-68.653613v0.231267c-45.754067 0-83.011622-45.266973-83.011622-92.382037s37.258579-80.834027 83.011622-80.834026v-69.287039c-82.787518 0-150.319587 69.287039-150.319587 154.74027s67.306942 154.74027 150.319587 154.74027v-0.231267h68.653613c46.89096 0 88.396259 34.181497 88.396259 94.922906v60.048631h67.306942v-75.984579c0-83.143629-71.79414-145.964396-155.703201-145.964396z" fill="#444444" ></path><path d="M63.284325 904.625192h673.071466V766.051113H63.284325v138.574079z m830.121338 0h67.306942V766.051113h-67.306942v138.574079z m-112.178919 0h67.306942V766.051113H781.226744v138.574079z m38.140669-520.575306c27.595498-27.945469 44.870953-66.977437 44.870953-109.934808 0-85.453231-67.531046-154.74027-150.319587-154.74027v69.286016c45.768393 0 83.011622 38.33919 83.011622 85.453231s-37.243229 85.454254-83.011622 85.454254v69.287039c100.750635 0 179.485861 84.298941 179.485861 187.997722v103.006002h67.306942V616.622826c0.001023-102.775758-57.434084-191.462636-141.344169-232.57294zM692.830485 497.91112h-68.653613v0.231267c-45.754067 0-83.011622-45.266973-83.011622-92.382037s37.258579-80.834027 83.011622-80.834026v-69.287039c-82.787518 0-150.319587 69.287039-150.319587 154.74027s67.306942 154.74027 150.319587 154.74027v-0.231267h68.653613c46.89096 0 88.396259 34.181497 88.396259 94.922906v60.048631h67.306942v-75.984579c0-83.143629-71.79414-145.964396-155.703201-145.964396z" fill="#444444" ></path></symbol><symbol id="iconfont-call" viewBox="0 0 1024 1024"><path d="M289.76 66.192c-22.672 4.24-37.92 12.56-59.952 31.584l-13.408 11.76-24.832 20.56-7.44 6.496c-5.408 4.96-9.056 8.704-13.568 13.824-75.04 84.896-95.008 215.056-52.752 335.792 28.928 82.624 80.048 164.288 153.04 245.632 76.848 85.648 142.08 139.824 217.168 179.568 61.168 32.32 109.44 46.72 165.04 48.4 67.408 2.08 128-13.36 178.368-45.952a204.48 204.48 0 0 0 24.848-19.248l8.512-7.76 16.912-15.744 15.68-13.648c29.6-26.352 42.144-47.472 44.48-78.656 3.328-44.816-16.4-78.8-64.048-119.52L850.976 636.8l-23.664-20.48c-46.4-38.304-84.928-51.952-132.64-44.752-34.048 5.088-55.52 18.064-86.24 50.208l-11.36 12.08c-13.616 14.352-17.888 17.248-23.872 18.448-7.072 1.408-19.968-4.592-50-28.992-43.808-35.52-80.16-76.288-111.6-125.136-17.2-26.88-22.88-43.456-21.28-54.656l0.624-2.928c-0.16 0.544 1.264-1.072 10.928-8.544l17.792-13.472 23.84-19.44c26.72-22.304 39.728-40.608 46.288-67.408 12-48.608 0.8-89.04-37.984-149.76l-21.76-33.632-7.008-10.288c-38.784-55.248-76.48-79.184-125.088-73.152l-8.192 1.28z m70.128 116.032l6.272 9.184 21.008 32.48c28.336 44.368 33.984 64.8 27.936 89.328-2.176 8.944-5.744 13.936-20.416 26.192l-24.544 19.936-14.8 11.152c-22.08 17.072-32.832 29.312-38.4 49.008-10.528 37.376 0.416 74.336 30.016 120.592 35.904 55.76 77.728 102.672 127.904 143.392 46.528 37.776 76.96 51.936 113.36 44.64 24.448-4.88 40.96-16.096 64.64-41.024l11.28-12c19.632-20.544 26.656-24.784 41.888-27.056 24.048-3.632 41.648 2.608 71.92 27.584l11.12 9.536 12.064 10.544 27.136 22.72c30.48 26.064 38.032 39.04 36.88 54.576-0.64 8.608-2.944 12.48-18.352 26.192l-16.72 14.592-17.28 16.064-8.128 7.408a126.24 126.24 0 0 1-15.2 11.776c-36.432 23.584-81.664 35.12-134.08 33.504-43.008-1.312-80.128-12.384-131.536-39.552-66.288-35.088-124.688-83.568-195.888-162.928-66.56-74.176-112.288-147.248-137.6-219.52-33.328-95.264-17.904-195.856 37.744-258.816 2.848-3.232 4.64-5.072 7.216-7.456l5.952-5.184 24.88-20.608 14-12.256 7.792-6.464c6.56-5.104 10.032-6.464 15.904-7.568 17.952-3.36 30.96 4.304 56.032 40.032z" fill="#000000" ></path></symbol><symbol id="iconfont-shipin" viewBox="0 0 1024 1024"><path d="M190.107826 889.989565a115.890087 115.890087 0 0 1-19.144348-4.096 45.679304 45.679304 0 0 1-23.952695-17.140869c-0.934957-1.469217-2.137043-3.116522-2.582261-3.82887a107.742609 107.742609 0 0 1-5.164522-10.685217 37.13113 37.13113 0 0 0-1.380174-3.917913A88.598261 88.598261 0 0 1 133.565217 835.494957v-1.335653h756.869566v1.335653c0 1.558261-2.404174 9.839304-4.318609 14.825739a44.343652 44.343652 0 0 1-3.561739 8.904347c-9.572174 19.545043-21.726609 27.158261-49.018435 30.809044-4.541217 0.534261-639.109565 0.534261-643.428174-0.044522z m-13.801739-83.968a6.722783 6.722783 0 0 1-2.537739-2.359652c-0.934957-1.558261-1.068522-2.715826-1.691826-14.781217l-2.092522-40.559305a36959.276522 36959.276522 0 0 0-5.476174-105.73913c-0.712348-12.109913-1.424696-26.713043-1.602783-32.411826-0.222609-5.743304-0.890435-20.613565-1.602782-33.124174a12221.395478 12221.395478 0 0 1-5.965913-113.975652L152.486957 408.353391 149.593043 353.725217a2447.538087 2447.538087 0 0 1-2.804869-84.190608c0-5.342609 0.133565-5.787826 1.202087-7.435131a8.370087 8.370087 0 0 1 2.137043-2.270608c0.667826-0.311652 37.442783-0.445217 119.54087-0.445218 68.697043 0 119.229217-0.178087 120.030609-0.445217a23.774609 23.774609 0 0 0 3.428174-1.424696 10.818783 10.818783 0 0 1 2.671304-0.979478c0.400696 0 1.113043-0.489739 1.602782-1.068522a8.637217 8.637217 0 0 1 2.671305-1.958956c1.29113-0.712348 2.137043-1.736348 3.517217-4.274087 2.671304-5.12 6.054957-12.733217 8.102957-18.521044l2.493217-6.589217c3.784348-10.195478 5.164522-14.514087 5.609739-17.541565 0.311652-1.78087 1.157565-5.921391 1.914435-9.171479a172.165565 172.165565 0 0 1 8.770783-31.966608c3.650783-8.681739 6.989913-13.712696 12.466087-19.144348A30.675478 30.675478 0 0 1 453.409391 138.462609c3.561739-1.78087 5.342609-2.404174 11.842783-4.051479 3.517217-0.890435 6.233043-0.890435 86.995478-0.801391l83.389218 0.133565 1.469217 1.78087 1.469217 1.869913 0.133566 16.11687c0.089043 10.50713 0 16.784696-0.311653 17.897739a6.233043 6.233043 0 0 1-2.31513 3.072l-1.78087 1.335652-82.543304 0.26713C482.170435 176.261565 468.992 176.39513 467.923478 176.973913c-1.914435 0.934957-3.116522 3.917913-3.917913 9.349565a408.887652 408.887652 0 0 1-1.869913 10.818783l-2.582261 13.935304c-2.537739 14.06887-4.452174 24.219826-6.010434 32.589913a118.873043 118.873043 0 0 0-1.602783 9.305044c0 1.647304 0.845913 3.161043 2.493217 4.452174 1.335652 1.113043 2.048 1.246609 7.435131 1.558261 3.250087 0.133565 13.445565 0.26713 22.617043 0.311652 18.877217 0.044522 18.877217 0.044522 20.48 3.517217 0.845913 1.914435 0.890435 5.12 0.890435 119.763478v117.715479l0.979478 1.647304c1.78087 2.849391 5.075478 3.784348 7.746783 2.092522 0.801391-0.489739 4.452174-3.82887 8.147478-7.479652 12.733217-12.466087 15.849739-15.315478 20.747131-18.699131 5.164522-3.606261 13.935304-7.034435 20.435478-7.969391 4.274087-0.623304 236.989217-0.623304 241.842087 0 10.24 1.335652 20.569043 6.054957 28.226782 12.955826 2.893913 2.671304 8.013913 8.815304 9.928348 12.020869 8.013913 13.445565 13.133913 27.247304 18.209392 48.88487l1.068521 4.585739-1.202087 2.270609a6.322087 6.322087 0 0 1-2.760348 3.116522c-1.558261 0.801391-11.264 0.890435-182.272 0.890434H496.37287l-1.78087 1.558261-1.78087 1.647305-0.222608 36.10713c-0.222609 32.411826-0.356174 37.220174-1.246609 46.747826-0.623304 5.87687-1.380174 14.514087-1.78087 19.144348l-1.647304 19.411478a16322.916174 16322.916174 0 0 0-5.253565 61.039305c-0.801391 8.637217-1.424696 16.473043-1.424696 17.497043 0 1.068522-0.578783 8.94887-1.335652 17.541565-0.801391 8.592696-1.647304 18.075826-1.869913 21.147826-0.311652 4.897391-0.534261 5.698783-1.691826 7.346087-0.75687 1.113043-1.869913 2.048-2.582261 2.226087-0.667826 0.178087-67.584 0.400696-148.613565 0.489739-127.866435 0.178087-147.545043 0.133565-148.791652-0.445217z m288.857043-443.970782c0-29.384348-0.133565-54.00487-0.26713-54.806261a8.592696 8.592696 0 0 0-1.602783-3.027479l-1.335652-1.55826-9.616695-0.178087c-7.123478-0.089043-9.928348 0.089043-10.818783 0.489739-1.914435 0.979478-3.161043 3.472696-3.784348 7.123478a235.653565 235.653565 0 0 1-1.958956 10.284522c-0.75687 3.784348-1.335652 7.301565-1.335653 7.791304 0 0.534261-0.623304 3.962435-1.380173 7.568696-2.671304 12.911304-4.85287 25.555478-6.233044 36.685913-0.311652 2.226087-0.623304 11.709217-0.801391 21.058782l-0.222609 17.051827 1.157565 1.647304c2.226087 3.250087 2.404174 3.294609 21.325913 3.294609h16.918261v-53.426087zM331.108174 413.161739h37.888l0.578783-4.096c0.26713-2.359652 1.29113-9.216 2.226086-15.315478l5.832348-39.268174 4.986435-33.435826c0.934957-6.366609 0.890435-8.592696-0.222609-11.709218a9.305043 9.305043 0 0 0-3.650782-4.63026l-2.671305-2.003479-91.803826-0.178087c-61.885217-0.089043-92.338087 0-93.495652 0.356174-1.157565 0.356174-1.914435 1.024-2.671304 2.359652l-1.068522 1.914435v50.754783c0 49.819826 0 50.799304 0.890435 52.313043a8.904348 8.904348 0 0 0 2.493217 2.493218l1.558261 1.024 50.621218-0.311652c27.870609-0.133565 67.673043-0.26713 88.509217-0.267131z m223.009391 392.904348a50.93287 50.93287 0 0 1-15.760695-5.030957 13.979826 13.979826 0 0 0-2.671305-1.335652c-0.845913 0-8.058435-5.787826-10.952348-8.815304a68.34087 68.34087 0 0 1-8.45913-10.640696 114.732522 114.732522 0 0 1-11.353044-26.445913c-0.222609-0.890435-1.068522-4.185043-1.780869-7.346087a204.221217 204.221217 0 0 1-4.140522-22.260869c-0.712348-8.013913-1.647304-20.880696-1.914435-25.377392l-0.26713-5.075478h359.557565v22.349913c0 25.689043-0.356174 30.408348-2.982956 37.709913-3.116522 8.681739-6.322087 14.692174-12.599653 23.151305-2.092522 2.982957-10.952348 12.02087-14.781217 15.226434a77.156174 77.156174 0 0 1-20.257391 11.575653c-8.637217 3.250087-1.29113 3.027478-130.270609 2.982956-89.666783 0-117.938087-0.178087-121.366261-0.667826z m253.061565-125.862957c-2.448696-0.133565-14.692174-0.801391-27.15826-1.647304-39.535304-2.448696-42.963478-2.537739-63.22087-1.869913-25.733565 0.890435-183.296 1.335652-186.724174 0.623304a30.809043 30.809043 0 0 1-13.356522-8.637217 73.015652 73.015652 0 0 1-5.075478-5.476174l-2.493217-3.250087a8.325565 8.325565 0 0 1-1.424696-2.31513c0-0.311652-0.311652-0.890435-0.623304-1.246609-2.671304-2.938435-7.479652-14.736696-8.94887-21.815652a88.954435 88.954435 0 0 1 1.113044-32.367305 29.96313 29.96313 0 0 1 6.589217-11.620173 28.716522 28.716522 0 0 1 16.072348-7.65774l5.431652-1.113043h149.23687c114.777043 0 149.949217 0.178087 152.08626 0.578783 1.602783 0.356174 4.096 0.801391 5.60974 1.024a32.411826 32.411826 0 0 1 11.353043 5.209043c3.116522 2.31513 6.188522 7.034435 7.880348 12.109913 1.513739 4.452174 2.849391 14.825739 2.849391 22.26087 0 11.486609-3.383652 23.151304-9.928348 33.792a240.194783 240.194783 0 0 0-2.760347 4.452174c-1.513739 2.582261-7.835826 9.394087-11.442087 12.288-2.226087 1.78087-5.520696 3.962435-7.435131 4.897391-3.116522 1.513739-3.784348 1.647304-8.281043 1.780869-2.671304 0.089043-6.90087 0.089043-9.349566 0z" fill="#4775F7" ></path><path d="M184.008348 308.268522v98.927304l5.12 6.500174h181.426087l14.959304-92.649739c1.335652-9.082435-1.335652-15.449043-8.102956-19.055304-8.013913-0.445217-71.234783-0.311652-189.484522 0.445217l-3.917913 5.787826zM461.467826 302.480696h-19.589565c-4.808348 0.934957-7.92487 4.274087-9.349565 10.017391-2.137043 8.592696-17.497043 48.840348-19.856696 63.354435a203.909565 203.909565 0 0 0-2.404174 32.946087c2.003478 4.452174 5.164522 6.678261 9.527652 6.678261h47.638261v-106.852174l-2.226087-3.917913-3.739826-2.226087z" fill="#FFFFFF" ></path></symbol></svg>',function(e){var c=(c=document.getElementsByTagName("script"))[c.length-1],t=c.getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var l,a,n,i,o,h=function(c,t){t.parentNode.insertBefore(c,t)};if(t&&!e.__iconfont__svg__cssinject__){e.__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(c){console&&console.log(c)}}l=function(){var c,t=document.createElement("div");t.innerHTML=e._iconfont_svg_string_4272377,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(c=document.body).firstChild?h(t,c.firstChild):c.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(a=function(){document.removeEventListener("DOMContentLoaded",a,!1),l()},document.addEventListener("DOMContentLoaded",a,!1)):document.attachEvent&&(n=l,i=e.document,o=!1,v(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,s())})}function s(){o||(o=!0,n())}function v(){try{i.documentElement.doScroll("left")}catch(c){return void setTimeout(v,50)}s()}}(window);
\ No newline at end of file
diff --git a/src/assets/iconfont/iconfont.json b/src/assets/iconfont/iconfont.json
new file mode 100644
index 0000000..e8a2771
--- /dev/null
+++ b/src/assets/iconfont/iconfont.json
@@ -0,0 +1,44 @@
+{
+ "id": "4272377",
+ "name": "batt_safe_check",
+ "font_family": "iconfont",
+ "css_prefix_text": "iconfont-",
+ "description": "鍔ㄥ姏鐢垫睜瀹夊叏妫�鏌ュ钩鍙�",
+ "glyphs": [
+ {
+ "icon_id": "1312009",
+ "name": "璇煶",
+ "font_class": "yuyin",
+ "unicode": "e649",
+ "unicode_decimal": 58953
+ },
+ {
+ "icon_id": "7004126",
+ "name": "鐤插姵椹鹃┒",
+ "font_class": "fatigue-driving",
+ "unicode": "e632",
+ "unicode_decimal": 58930
+ },
+ {
+ "icon_id": "8963511",
+ "name": "鍚哥儫",
+ "font_class": "xiyan",
+ "unicode": "e62a",
+ "unicode_decimal": 58922
+ },
+ {
+ "icon_id": "12253338",
+ "name": "鎵撶數璇�",
+ "font_class": "call",
+ "unicode": "e90a",
+ "unicode_decimal": 59658
+ },
+ {
+ "icon_id": "31862779",
+ "name": "椋熷搧",
+ "font_class": "shipin",
+ "unicode": "e607",
+ "unicode_decimal": 58887
+ }
+ ]
+}
diff --git a/src/assets/iconfont/iconfont.ttf b/src/assets/iconfont/iconfont.ttf
new file mode 100644
index 0000000..92b46b6
--- /dev/null
+++ b/src/assets/iconfont/iconfont.ttf
Binary files differ
diff --git a/src/assets/iconfont/iconfont.woff b/src/assets/iconfont/iconfont.woff
new file mode 100644
index 0000000..d310df2
--- /dev/null
+++ b/src/assets/iconfont/iconfont.woff
Binary files differ
diff --git a/src/assets/iconfont/iconfont.woff2 b/src/assets/iconfont/iconfont.woff2
new file mode 100644
index 0000000..09fe295
--- /dev/null
+++ b/src/assets/iconfont/iconfont.woff2
Binary files differ
diff --git a/src/components/dangerActBox.vue b/src/components/dangerActBox.vue
new file mode 100644
index 0000000..d9e1f77
--- /dev/null
+++ b/src/components/dangerActBox.vue
@@ -0,0 +1,88 @@
+<script setup>
+const props = defineProps({
+ name: {
+ type: String,
+ default: ""
+ },
+ time: {
+ type: String,
+ default: ""
+ },
+ icon: {
+ type: String,
+ default: ""
+ },
+ type: {
+ type: String,
+ default: ""
+ }
+})
+</script>
+
+<template>
+ <div class="danger-act-wrapper" :class="type">
+ <div class="danger-act-icon">
+ <i class="iconfont" :class="icon"></i>
+ </div>
+ <div class="danger-act-content">
+ <div class="danger-act-name">{{ name }}</div>
+ <div class="danger-act-time">{{ time }}</div>
+ </div>
+ </div>
+</template>
+
+<style scoped lang="less">
+@warning-color: #fafa5c;
+@danger-color: #ea4444;
+.danger-act-wrapper {
+ padding: 8px;
+ display: flex;
+ .danger-act-icon {
+ padding: 4px 16px;
+ border-radius: 4px;
+ background-color: #0964c2;
+ .iconfont {
+ font-size: 40px;
+ color: #00FEFF;
+ }
+ }
+ .danger-act-content {
+ margin-left: 8px;
+ .danger-act-name {
+ padding: 4px;
+ color: #FFFFFF;
+ }
+ .danger-act-time {
+ padding: 4px;
+ color: #00FEFF;
+ }
+ }
+
+ &.warning {
+ .danger-act-icon {
+ .iconfont {
+ color: @warning-color;
+ }
+ }
+ .danger-act-content {
+ .danger-act-time {
+ color: @warning-color;
+ }
+ }
+ }
+
+ &.danger {
+ .danger-act-icon {
+ .iconfont {
+ color: @danger-color;
+ }
+ }
+ .danger-act-content {
+ .danger-act-time {
+ color: @danger-color;
+ }
+ }
+ }
+
+}
+</style>
diff --git a/src/main.js b/src/main.js
index e727399..4d4b9db 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,6 +8,8 @@
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from "element-plus/es/locale/lang/zh-cn"
import './util/rem'
+import "@/assets/iconfont/iconfont.css"
+import "@/assets/iconfont/iconfont.js"
// 瀵箃oFixed鏁板瓧淇濈暀浣嶆暟浜屾灏佽锛坧s锛歵oFixed杩斿洖鐨勬槸瀛楃涓诧級
Number.prototype.toHold = function (value) {
diff --git a/src/router/index.js b/src/router/index.js
index a011de0..744ad43 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,4 +7,21 @@
routes, // `routes: routes` 鐨勭缉鍐�
});
+router.beforeEach((to, from, next)=>{
+ const token = sessionStorage.getItem("loginToken");
+ // 绠＄悊绯荤粺甯歌鐨勪袱涓粡鍏哥殑閫昏緫
+ // 1.濡傛灉鐢ㄦ埛璁块棶鐧诲綍椤甸潰锛屼絾鏄痶oken宸茬粡瀛樺湪锛岃烦杞埌棣栭〉
+ if(to.path === '/login' && token) {
+ next("/");
+ return;
+ }
+ // 2.濡傛灉鐢ㄦ埛璁块棶涓嶆槸鐧诲綍椤甸潰锛屼絾鏄病鏈塼oken锛岃烦杞埌鐧诲綍椤甸潰
+ if(to.path!=="/login" && !token) {
+ next('/login');
+ return;
+ }
+
+ next();
+});
+
export default router;
diff --git a/src/views/mainLayout/components/pageHeader.vue b/src/views/mainLayout/components/pageHeader.vue
index d2d7483..91b3d90 100644
--- a/src/views/mainLayout/components/pageHeader.vue
+++ b/src/views/mainLayout/components/pageHeader.vue
@@ -5,10 +5,6 @@
import slideMenu from "@/views/mainLayout/js/slideMenu";
import headerInfo from "@/views/mainLayout/js/headerInfo";
headerInfo();
-const isVisible = ref(false);
-const visibleChange = (state)=>{
- isVisible.value = state;
-}
const {isCollapse} = slideMenu();
const pageMenuStore = usePageMenuStore();
const changeMenuState = ()=>{
@@ -21,6 +17,9 @@
const sysTitle = computed(()=>{
return pageMenuStore.sysTitle;
});
+
+import userDropdownModule from "@/views/moudle/user/userDropdown";
+const {isVisible, visibleChange, commandClick} = userDropdownModule();
</script>
<template>
@@ -38,7 +37,7 @@
</div>
<div class="page-header-right">
<div class="hdw-avatar">
- <el-dropdown @visible-change="visibleChange">
+ <el-dropdown @visible-change="visibleChange" @command="commandClick">
<div class="hdw-avatar-wrapper">
<span class="hdw-avatar-icon">
<el-icon size="18"><Avatar /></el-icon>
diff --git a/src/views/mainLayout/index.vue b/src/views/mainLayout/index.vue
index e639665..ee4ed86 100644
--- a/src/views/mainLayout/index.vue
+++ b/src/views/mainLayout/index.vue
@@ -37,7 +37,7 @@
<template>
<div class="main-layout">
<div class="full-height">
- <div class="main-layout-left" v-if="!isCollapse">
+ <div class="main-layout-left" v-show="!isCollapse">
<div class="slide-header">
<div class="logo-wrapper">
<img :src="logoImg" alt="" />
@@ -89,7 +89,6 @@
<div class="body-absolute">
<router-view></router-view>
</div>
-
</div>
</div>
</div>
diff --git a/src/views/moudle/user/login.js b/src/views/moudle/user/login.js
index 201c9f4..7ed0cae 100644
--- a/src/views/moudle/user/login.js
+++ b/src/views/moudle/user/login.js
@@ -6,6 +6,7 @@
const password = ref("");
const router = useRouter();
const checkLogin = ()=>{
+ sessionStorage.setItem("loginToken", "123");
router.push('/');
}
return {
diff --git a/src/views/moudle/user/userDropdown.js b/src/views/moudle/user/userDropdown.js
new file mode 100644
index 0000000..326bef8
--- /dev/null
+++ b/src/views/moudle/user/userDropdown.js
@@ -0,0 +1,39 @@
+import {ref} from "vue";
+import {useRouter} from "vue-router";
+
+/**
+ * 鐢ㄦ埛涓嬫媺缁勪欢
+ */
+const userDropdownModule = ()=>{
+ const isVisible = ref(false);
+ const router = useRouter();
+ const commandClick = (name)=>{
+ switch (name) {
+ case "outSystem":
+ outSystem();
+ break;
+ case "passwordChange":
+ passwordChange();
+ break;
+ default:
+ break;
+ }
+ }
+
+ const outSystem = ()=>{
+ sessionStorage.removeItem("loginToken");
+ router.push({
+ path: "/login",
+ replace: true
+ });
+ };
+
+ const passwordChange = ()=>{
+
+ }
+ const visibleChange = (state)=>{
+ isVisible.value = state;
+ }
+ return {isVisible, commandClick, visibleChange};
+};
+export default userDropdownModule;
diff --git a/src/views/user/drivingAnalysis.vue b/src/views/user/drivingAnalysis.vue
index 82f320d..d123ffb 100644
--- a/src/views/user/drivingAnalysis.vue
+++ b/src/views/user/drivingAnalysis.vue
@@ -7,6 +7,7 @@
import getWaterOption from "@/components/echarts/options/waterPie";
import getGradientLineOption from "@/components/echarts/options/gradientLine";
import getRosePieOption from "@/components/echarts/options/rosePie";
+import DangerActBox from "@/components/dangerActBox.vue";
const carPie = ref(null);
const alarmLine = ref(null);
const rosePie = ref(null);
@@ -20,6 +21,9 @@
const rosePieOption = getRosePieOption();
rosePie.value.setOption(rosePieOption);
});
+
+import dangerActModule from "@/views/user/js/dangerActModule";
+const {dangerList} = dangerActModule();
</script>
<template>
@@ -28,7 +32,16 @@
<div class="alarm-bar-wrapper">
<flex-box>
<div class="flex-box-content">
- <chart-box title="瀹炴椂缁熻"></chart-box>
+ <chart-box title="瀹炴椂缁熻">
+ <div class="danger-act-container">
+ <div class="danger-act-container-absolute">
+ <danger-act-box
+ v-for="(item, key) in dangerList" :key="'key'+key"
+ :name="item.name" :time="item.time"
+ :icon="item.icon" :type="item.type"></danger-act-box>
+ </div>
+ </div>
+ </chart-box>
</div>
</flex-box>
</div>
@@ -47,7 +60,6 @@
<div class="car-grade">45鍒�</div>
</div>
</div>
-
</div>
</div>
</chart-box>
@@ -58,7 +70,7 @@
<div class="content-wrapper middle">
<div class="video-wrapper">
<flex-box>
- <img :src="videoContent" alt="">
+ <img class="video-img" :src="videoContent" alt="">
</flex-box>
</div>
<div class="alarm-line-wrapper">
@@ -84,7 +96,9 @@
<div class="alarm-bar-wrapper">
<flex-box>
<div class="flex-box-content">
- <chart-box title="椋庨櫓琛屼负缁熻"></chart-box>
+ <chart-box title="椋庨櫓琛屼负缁熻">
+
+ </chart-box>
</div>
</flex-box>
</div>
@@ -116,10 +130,6 @@
.video-wrapper {
padding: 8px;
height: 70%;
- img {
- width: auto;
- height: 100%;
- }
}
.alarm-line-wrapper {
padding: 8px;
@@ -169,4 +179,22 @@
}
}
}
+.danger-act-container {
+ position: relative;
+ height: 100%;
+ .danger-act-container-absolute {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow-y: auto;
+ }
+}
+.video-img {
+ width: auto;
+ height: 100%;
+}
</style>
diff --git a/src/views/user/js/dangerActModule.js b/src/views/user/js/dangerActModule.js
new file mode 100644
index 0000000..a1246b3
--- /dev/null
+++ b/src/views/user/js/dangerActModule.js
@@ -0,0 +1,42 @@
+import {ref} from "vue";
+
+const dangerActModule = ()=>{
+ const dangerList = ref([
+ {
+ name: '鍚哥儫',
+ time: '2023-09-30 23:55:00',
+ icon: 'iconfont-xiyan',
+ type: 'warning',
+ },
+ {
+ name: '鎵撶數璇�',
+ time: '2023-09-30 23:55:00',
+ icon: 'iconfont-call',
+ type: '',
+ },
+ {
+ name: '鐤插姵椹鹃┒',
+ time: '2023-09-30 23:55:00',
+ icon: 'iconfont-fatigue-driving',
+ type: 'danger',
+ },
+ {
+ name: '鍠濇按',
+ time: '2023-09-30 23:55:00',
+ icon: 'iconfont-shipin',
+ type: 'warning',
+ },
+ {
+ name: '鍙戣闊�',
+ time: '2023-09-30 23:55:00',
+ icon: 'iconfont-yuyin',
+ type: '',
+ },
+ ]);
+
+ return {
+ dangerList,
+ };
+}
+
+export default dangerActModule;
--
Gitblit v1.9.1