From 5ffbec0a33a49c698699646ab71ddb3ad1ea310c Mon Sep 17 00:00:00 2001
From: charles <981744753@qq.com>
Date: 星期二, 21 五月 2024 17:10:03 +0800
Subject: [PATCH] fix:增加一个登录功能
---
vue.config.js | 9
src/assets/style/theme/line/setting.scss | 64 +
src/assets/font/iconfont.woff | 0
src/assets/style/fixed/vue-grid-layout.scss | 9
src/api/modules/login.js | 9
src/views/home/components/audioAnalysis/index.vue | 9
src/assets/style/theme/tomorrow-night-blue/setting.scss | 64 +
src/views/login/image/logo@2x.png | 0
src/assets/style/theme/chester/index.scss | 2
src/assets/style/theme/chester/setting.scss | 64 +
src/views/login/image/logo@2x1.png | 0
src/assets/images/login/login2.png | 0
src/assets/style/theme/element/setting.scss | 64 +
src/assets/style/theme/violet/index.scss | 9
src/assets/style/unit/color.scss | 23
src/assets/style/fixed/n-progress.scss | 8
src/assets/style/theme/violet/setting.scss | 64 +
src/router/index.js | 10
src/assets/images/login/login.png | 0
src/assets/style/fixed/markdown.scss | 9
src/assets/style/index.scss | 904 ++++++++++++++
src/assets/style/public.scss | 44
src/assets/style/theme/star/setting.scss | 64 +
src/views/login/Login.vue | 164 ++
src/assets/font/iconfont.css | 33
src/views/login/image/login-code.png | 0
src/assets/style/theme/theme.scss | 441 +++++++
src/assets/style/theme/tomorrow-night-blue/index.scss | 2
src/assets/style/theme/theme-base.scss | 474 +++++++
src/assets/font/demo.css | 539 ++++++++
src/assets/font/demo_index.html | 299 ++++
public/images/login/login2.png | 0
src/assets/style/theme/register.scss | 9
src/assets/font/iconfont.js | 1
src/views/home/components/audioAnalysis/components/Analysis.vue | 2
src/assets/font/fonts/DIN.css | 4
src/api/index.js | 1
src/assets/font/iconfont.woff2 | 0
src/assets/style/fixed/tree-view.scss | 5
src/assets/font/iconfont.svg | 25
src/assets/font/iconfont.ttf | 0
src/assets/style/theme/line/index.scss | 2
src/assets/style/fixed/element.scss | 31
src/assets/images/login/audio-login.png | 0
src/assets/style/theme/d2/setting.scss | 64 +
src/assets/style/theme/star/index.scss | 2
src/assets/style/theme/d2/index.scss | 2
src/views/login/image/audio-login.png | 0
src/assets/style/public-class.scss | 67 +
public/images/login/login.png | 0
src/assets/font/fonts/DIN_Alternate.ttf | 0
src/assets/style/theme/element/index.scss | 2
src/assets/style/animate/vue-transition.scss | 27
src/assets/style/fixed/base.scss | 12
src/assets/style/fixed/vue-splitpane.scss | 5
src/assets/font/iconfont.json | 44
src/views/login/image/liantong-logo@2x.png | 0
57 files changed, 3,675 insertions(+), 11 deletions(-)
diff --git a/public/images/login/login.png b/public/images/login/login.png
new file mode 100644
index 0000000..02a8264
--- /dev/null
+++ b/public/images/login/login.png
Binary files differ
diff --git a/public/images/login/login2.png b/public/images/login/login2.png
new file mode 100644
index 0000000..0166fcc
--- /dev/null
+++ b/public/images/login/login2.png
Binary files differ
diff --git a/src/api/index.js b/src/api/index.js
index 2338992..1e6eb8a 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,4 +1,5 @@
export * from './modules/text';
export * from './modules/audio';
export * from './modules/train';
+export * from "./modules/login";
diff --git a/src/api/modules/login.js b/src/api/modules/login.js
new file mode 100644
index 0000000..58cd021
--- /dev/null
+++ b/src/api/modules/login.js
@@ -0,0 +1,9 @@
+import {request} from '@/utils'
+
+// 鑾峰彇楠岃瘉鐮�
+export function getCaptchaApi() {
+ return request({
+ url: "http://aps.fai365.com:9080/api/base/captcha",
+ method: "POST",
+ });
+}
\ No newline at end of file
diff --git a/src/assets/font/demo.css b/src/assets/font/demo.css
new file mode 100644
index 0000000..a67054a
--- /dev/null
+++ b/src/assets/font/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/font/demo_index.html b/src/assets/font/demo_index.html
new file mode 100644
index 0000000..a5ffab2
--- /dev/null
+++ b/src/assets/font/demo_index.html
@@ -0,0 +1,299 @@
+<!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>
+
+ </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">&#xeb63;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon iconfont"></span>
+ <div class="name">闂溂鐫�</div>
+ <div class="code-name">&#xe901;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon iconfont"></span>
+ <div class="name">纭欢</div>
+ <div class="code-name">&#xec89;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon iconfont"></span>
+ <div class="name">鐪肩潧</div>
+ <div class="code-name">&#xe8c7;</div>
+ </li>
+
+ <li class="dib">
+ <span class="icon iconfont"></span>
+ <div class="name">鐒婃帴浠跺伐搴忕嚎璺崱</div>
+ <div class="code-name">&#xe610;</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.ttf?t=1700553476245') 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 icon-guanlianshebei"></span>
+ <div class="name">
+ 鍏宠仈璁惧
+ </div>
+ <div class="code-name">.icon-guanlianshebei
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon iconfont icon-biyanjing"></span>
+ <div class="name">
+ 闂溂鐫�
+ </div>
+ <div class="code-name">.icon-biyanjing
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon iconfont icon-yingjian"></span>
+ <div class="name">
+ 纭欢
+ </div>
+ <div class="code-name">.icon-yingjian
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon iconfont icon-yanjing"></span>
+ <div class="name">
+ 鐪肩潧
+ </div>
+ <div class="code-name">.icon-yanjing
+ </div>
+ </li>
+
+ <li class="dib">
+ <span class="icon iconfont icon-hanjiejiangongxuxianluka"></span>
+ <div class="name">
+ 鐒婃帴浠跺伐搴忕嚎璺崱
+ </div>
+ <div class="code-name">.icon-hanjiejiangongxuxianluka
+ </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">
+ <ul class="icon_lists dib-box">
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-guanlianshebei"></use>
+ </svg>
+ <div class="name">鍏宠仈璁惧</div>
+ <div class="code-name">#icon-guanlianshebei</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-biyanjing"></use>
+ </svg>
+ <div class="name">闂溂鐫�</div>
+ <div class="code-name">#icon-biyanjing</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-yingjian"></use>
+ </svg>
+ <div class="name">纭欢</div>
+ <div class="code-name">#icon-yingjian</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-yanjing"></use>
+ </svg>
+ <div class="name">鐪肩潧</div>
+ <div class="code-name">#icon-yanjing</div>
+ </li>
+
+ <li class="dib">
+ <svg class="icon svg-icon" aria-hidden="true">
+ <use xlink:href="#icon-hanjiejiangongxuxianluka"></use>
+ </svg>
+ <div class="name">鐒婃帴浠跺伐搴忕嚎璺崱</div>
+ <div class="code-name">#icon-hanjiejiangongxuxianluka</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/font/fonts/DIN.css b/src/assets/font/fonts/DIN.css
new file mode 100644
index 0000000..14186ac
--- /dev/null
+++ b/src/assets/font/fonts/DIN.css
@@ -0,0 +1,4 @@
+@font-face {
+ font-family: "DIN Alternate";
+ src: url("./DIN_Alternate.ttf");
+}
\ No newline at end of file
diff --git a/src/assets/font/fonts/DIN_Alternate.ttf b/src/assets/font/fonts/DIN_Alternate.ttf
new file mode 100644
index 0000000..af7cbf3
--- /dev/null
+++ b/src/assets/font/fonts/DIN_Alternate.ttf
Binary files differ
diff --git a/src/assets/font/iconfont.css b/src/assets/font/iconfont.css
new file mode 100644
index 0000000..7e97dea
--- /dev/null
+++ b/src/assets/font/iconfont.css
@@ -0,0 +1,33 @@
+@font-face {
+ font-family: "iconfont"; /* Project id */
+ src: url('iconfont.ttf?t=1700553476245') format('truetype');
+}
+
+.iconfont {
+ font-family: "iconfont" !important;
+ font-size: 16px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-guanlianshebei:before {
+ content: "\eb63";
+}
+
+.icon-biyanjing:before {
+ content: "\e901";
+}
+
+.icon-yingjian:before {
+ content: "\ec89";
+}
+
+.icon-yanjing:before {
+ content: "\e8c7";
+}
+
+.icon-hanjiejiangongxuxianluka:before {
+ content: "\e610";
+}
+
diff --git a/src/assets/font/iconfont.js b/src/assets/font/iconfont.js
new file mode 100644
index 0000000..079cc3e
--- /dev/null
+++ b/src/assets/font/iconfont.js
@@ -0,0 +1 @@
+window._iconfont_svg_string_='<svg><symbol id="icon-guanlianshebei" viewBox="0 0 1024 1024"><path d="M260.096 544H160a32 32 0 0 1-32-32V256h480v256a32 32 0 0 1-32 32h-54.976a32 32 0 0 0 0 64H576a96 96 0 0 0 96-96V160a96 96 0 0 0-96-96H160a96 96 0 0 0-96 96v352a96 96 0 0 0 96 96h100.096a32 32 0 0 0 0-64zM128 160a32 32 0 0 1 32-32h416a32 32 0 0 1 32 32v32H128V160z" ></path><path d="M864 416h-90.88a32 32 0 0 0 0 64H864a32 32 0 0 1 32 32v256H416v-256a32 32 0 0 1 32-32h63.072a32 32 0 0 0 0-64H448a96 96 0 0 0-96 96v352a96 96 0 0 0 96 96h416a96 96 0 0 0 96-96V512a96 96 0 0 0-96-96z m32 448a32 32 0 0 1-32 32H448a32 32 0 0 1-32-32v-32h480v32z" ></path></symbol><symbol id="icon-biyanjing" viewBox="0 0 1024 1024"><path d="M469.333333 681.386667c-36.053333-2.432-71.253333-8.533333-104.96-17.92l-69.802666 149.674666a42.368 42.368 0 0 1-56.533334 20.266667 42.666667 42.666667 0 0 1-20.821333-56.32l66.986667-143.658667a451.712 451.712 0 0 1-148.906667-112.682666 388.693333 388.693333 0 0 1-70.570667-119.338667 42.666667 42.666667 0 1 1 80.128-29.354667 303.445333 303.445333 0 0 0 55.210667 93.098667C270.634667 547.413333 383.018667 597.333333 505.728 597.333333c122.752 0 235.136-49.962667 305.706667-132.181333a303.445333 303.445333 0 0 0 55.210666-93.098667 42.666667 42.666667 0 0 1 80.128 29.354667 388.693333 388.693333 0 0 1-70.570666 119.338667 423.68 423.68 0 0 1-18.773334 20.48l104.362667 104.362666a42.666667 42.666667 0 0 1-0.298667 60.032 42.368 42.368 0 0 1-60.032 0.298667l-109.653333-109.653333c-20.48 14.08-42.24 26.581333-65.024 37.418666l66.901333 143.36a42.666667 42.666667 0 0 1-20.821333 56.362667 42.368 42.368 0 0 1-56.533333-20.266667l-69.717334-149.546666a520.533333 520.533333 0 0 1-91.946666 16.810666v130.645334A42.666667 42.666667 0 0 1 512 853.333333c-23.722667 0-42.666667-18.944-42.666667-42.24v-129.706666z" fill="#3D3D3D" ></path><path d="M176.128 524.373333a42.368 42.368 0 0 1 60.032 0.256 42.666667 42.666667 0 0 1 0.298667 60.074667l-121.216 121.216a42.368 42.368 0 0 1-60.074667-0.298667 42.666667 42.666667 0 0 1-0.298667-60.032l121.258667-121.258666z" fill="#3D3D3D" ></path></symbol><symbol id="icon-yingjian" viewBox="0 0 1024 1024"><path d="M192 800h640a32 32 0 0 0 0-64H192a32 32 0 0 0 0 64z" ></path><path d="M990.272 596.96L875.264 113.216A64 64 0 0 0 812.992 64H210.336c-29.664 0-55.456 20.384-62.304 49.28L33.728 596.992a63.68 63.68 0 0 0-1.728 14.752V864a64 64 0 0 0 64 64h832a64 64 0 0 0 64-64v-252.256c0-4.992-0.576-9.952-1.728-14.784zM812.992 128l114.112 480h-384.96c0.896-2.944 1.856-5.92 1.856-9.152V512c0-3.84-0.96-7.424-2.176-10.848C649.792 491.36 736 429.376 736 347.328c0-81.504-85.056-143.168-192-153.6V128h268.992zM512 256c90.56 0 160 44.608 160 91.328s-69.44 91.328-160 91.328-160-44.608-160-91.328S421.44 256 512 256zM210.336 128H480v65.728c-106.944 10.4-192 72.096-192 153.6 0 82.048 86.208 144.064 194.176 153.824A32.256 32.256 0 0 0 480 512v86.848c0 3.232 0.96 6.208 1.856 9.152H96.896L210.336 128zM928 864H96v-192h832v192z" ></path></symbol><symbol id="icon-yanjing" viewBox="0 0 1024 1024"><path d="M512 192c156.448 0 296.021333 98.730667 418.410667 291.605333a52.938667 52.938667 0 0 1 0 56.789334C808.021333 733.269333 668.448 832 512 832c-156.448 0-296.021333-98.730667-418.410667-291.605333a52.938667 52.938667 0 0 1 0-56.789334C215.978667 290.730667 355.552 192 512 192z m0 128c-106.037333 0-192 85.962667-192 192s85.962667 192 192 192 192-85.962667 192-192-85.962667-192-192-192z m0 320c70.688 0 128-57.312 128-128s-57.312-128-128-128-128 57.312-128 128 57.312 128 128 128z" fill="#000000" ></path></symbol><symbol id="icon-hanjiejiangongxuxianluka" viewBox="0 0 1024 1024"><path d="M758.1696 589.312a23.552 23.552 0 0 1 0-47.104c78.2336 0 169.472-45.568 169.472-173.8752s-97.8944-173.8752-181.76-173.8752H286.9248a23.552 23.552 0 0 1 0-47.104h459.0592c61.6448 0 118.0672 19.7632 158.9248 55.6032 45.6704 40.0384 69.8368 97.1776 69.8368 165.376 0 70.3488-24.064 128.6144-69.5296 168.448-38.7072 33.792-90.9312 52.5312-147.0464 52.5312z" ></path><path d="M270.1312 920.7808c-61.5424 0-117.8624-19.6608-158.72-55.5008-45.6704-40.0384-69.8368-97.28-69.8368-165.5808 0-70.3488 24.064-128.6144 69.5296-168.448 38.7072-33.8944 90.9312-52.5312 147.0464-52.5312a23.552 23.552 0 0 1 0 47.104c-78.2336 0-169.472 45.568-169.472 173.8752 0 54.272 18.6368 99.328 53.76 130.1504 32.256 28.2624 77.6192 43.8272 127.7952 43.8272H745.7792a23.552 23.552 0 0 1 0 47.104H270.1312z m-100.0448-579.072C93.184 341.7088 30.72 279.2448 30.72 202.3424c0-76.8 62.464-139.3664 139.3664-139.3664 37.1712 0 72.192 14.5408 98.5088 40.8576 26.3168 26.3168 40.8576 61.3376 40.8576 98.5088-0.1024 76.9024-62.5664 139.3664-139.3664 139.3664z m0-231.6288c-50.8928 0-92.2624 41.3696-92.2624 92.2624s41.3696 92.2624 92.2624 92.2624 92.2624-41.3696 92.2624-92.2624c0-24.6784-9.6256-47.8208-27.0336-65.2288a91.8016 91.8016 0 0 0-65.2288-27.0336z" ></path><path d="M846.336 981.6064c64 0 115.8144-51.8144 115.8144-115.8144 0-64-51.8144-115.8144-115.8144-115.8144-64 0-115.8144 51.8144-115.8144 115.8144 0 30.72 12.1856 60.2112 33.8944 81.92 21.7088 21.6064 51.2 33.8944 81.92 33.8944zM665.1904 533.504c0-16.0768 9.9328-30.5152 24.9856-36.1472l7.7824-2.9696-2.1504-8.0896c-4.5056-17.6128-11.4688-34.4064-20.6848-50.0736l-4.5056-7.168-7.5776 3.3792a38.66624 38.66624 0 0 1-51.0976-51.2l3.3792-7.5776-7.168-4.4032a191.488 191.488 0 0 0-50.0736-20.6848l-8.0896-2.048-2.9696 7.7824a38.66624 38.66624 0 0 1-36.1472 24.9856c-16.0768 0-30.4128-9.9328-36.1472-24.9856l-2.9696-7.7824-7.5776 2.2528c-17.6128 4.5056-34.4064 11.4688-50.0736 20.6848l-7.168 4.5056 3.3792 7.5776a38.2976 38.2976 0 0 1-2.9696 36.6592 38.67648 38.67648 0 0 1-48.2304 14.1312l-7.5776-3.3792-4.5056 7.168a188.3136 188.3136 0 0 0-20.7872 50.0736l-2.048 8.0896 7.7824 2.9696c15.0528 5.7344 24.9856 20.0704 24.9856 36.1472 0 16.0768-9.9328 30.4128-24.9856 36.1472l-7.7824 2.9696 2.048 8.0896c4.5056 17.6128 11.4688 34.4064 20.6848 50.0736l4.5056 7.168 7.5776-3.3792a38.66624 38.66624 0 0 1 51.0976 51.2l-3.3792 7.5776 7.168 4.5056c15.6672 9.1136 32.5632 15.9744 50.0736 20.3776l8.0896 2.048 2.9696-7.7824a38.66624 38.66624 0 0 1 36.1472-24.9856c16.0768 0 30.4128 9.9328 36.1472 24.9856l2.9696 7.7824 8.0896-2.048c17.6128-4.5056 34.4064-11.4688 50.0736-20.6848l7.168-4.4032-3.3792-7.5776c-5.4272-11.9808-4.4032-25.8048 2.7648-36.864s19.3536-17.7152 32.4608-17.6128c5.4272 0 10.8544 1.1264 15.872 3.3792l7.5776 3.3792 4.5056-7.168c9.1136-15.5648 15.872-32.256 20.2752-49.664l2.048-8.0896-7.7824-2.9696a38.85056 38.85056 0 0 1-24.7808-36.352z m-46.6944 61.7472c-3.584-1.024-7.168-1.6384-10.9568-1.6384-10.9568 0-21.4016 4.7104-28.672 12.8a45.568 45.568 0 0 0-10.3424 42.7008c-6.9632 3.9936-14.336 7.2704-21.9136 9.8304a39.15776 39.15776 0 0 0-35.328-22.3232c-15.0528 0-28.8768 8.704-35.328 22.3232-7.68-2.4576-14.9504-5.7344-21.9136-9.8304 3.8912-15.0528 0-31.0272-10.3424-42.5984a38.73792 38.73792 0 0 0-28.4672-12.8c-3.6864 0-7.3728 0.512-10.9568 1.6384-3.6864-7.5776-6.656-15.4624-8.9088-23.6544a45.4656 45.4656 0 0 0 20.6848-38.0928c0-15.36-7.7824-29.696-20.6848-38.0928 2.2528-8.192 5.2224-16.0768 8.9088-23.6544 3.584 1.024 7.168 1.6384 10.9568 1.6384 10.8544-0.1024 21.1968-4.608 28.4672-12.6976a45.568 45.568 0 0 0 10.3424-42.7008c6.9632-3.9936 14.336-7.2704 21.9136-9.8304a39.15776 39.15776 0 0 0 35.328 22.3232c15.0528 0 28.8768-8.704 35.328-22.3232 7.68 2.4576 14.9504 5.8368 21.9136 9.8304-3.8912 15.0528 0 31.1296 10.4448 42.7008 7.2704 8.0896 17.7152 12.8 28.672 12.8 3.6864 0 7.3728-0.512 10.9568-1.6384 3.6864 7.5776 6.656 15.4624 8.9088 23.6544a45.3632 45.3632 0 0 0-20.5824 38.0928c0 15.36 7.7824 29.696 20.5824 38.0928-2.3552 8.0896-5.3248 15.9744-9.0112 23.4496z m0 0" ></path><path d="M511.1808 475.9552c-31.744 0-57.5488 25.8048-57.5488 57.5488s25.8048 57.5488 57.5488 57.5488 57.5488-25.8048 57.5488-57.5488-25.8048-57.4464-57.5488-57.5488z m0 0" ></path></symbol></svg>',function(e){var t=(t=document.getElementsByTagName("script"))[t.length-1],a=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var n,c,i,o,l,d=function(t,a){a.parentNode.insertBefore(t,a)};if(a&&!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(t){console&&console.log(t)}}n=function(){var t,a=document.createElement("div");a.innerHTML=e._iconfont_svg_string_,(a=a.getElementsByTagName("svg")[0])&&(a.setAttribute("aria-hidden","true"),a.style.position="absolute",a.style.width=0,a.style.height=0,a.style.overflow="hidden",a=a,(t=document.body).firstChild?d(a,t.firstChild):t.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(n,0):(c=function(){document.removeEventListener("DOMContentLoaded",c,!1),n()},document.addEventListener("DOMContentLoaded",c,!1)):document.attachEvent&&(i=n,o=e.document,l=!1,h(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,s())})}function s(){l||(l=!0,i())}function h(){try{o.documentElement.doScroll("left")}catch(t){return void setTimeout(h,50)}s()}}(window);
\ No newline at end of file
diff --git a/src/assets/font/iconfont.json b/src/assets/font/iconfont.json
new file mode 100644
index 0000000..39c6e9b
--- /dev/null
+++ b/src/assets/font/iconfont.json
@@ -0,0 +1,44 @@
+{
+ "id": "",
+ "name": "",
+ "font_family": "iconfont",
+ "css_prefix_text": "icon-",
+ "description": "",
+ "glyphs": [
+ {
+ "icon_id": "3868264",
+ "name": "鍏宠仈璁惧",
+ "font_class": "guanlianshebei",
+ "unicode": "eb63",
+ "unicode_decimal": 60259
+ },
+ {
+ "icon_id": "4354835",
+ "name": "闂溂鐫�",
+ "font_class": "biyanjing",
+ "unicode": "e901",
+ "unicode_decimal": 59649
+ },
+ {
+ "icon_id": "6348676",
+ "name": "纭欢",
+ "font_class": "yingjian",
+ "unicode": "ec89",
+ "unicode_decimal": 60553
+ },
+ {
+ "icon_id": "11372780",
+ "name": "鐪肩潧",
+ "font_class": "yanjing",
+ "unicode": "e8c7",
+ "unicode_decimal": 59591
+ },
+ {
+ "icon_id": "18444819",
+ "name": "鐒婃帴浠跺伐搴忕嚎璺崱",
+ "font_class": "hanjiejiangongxuxianluka",
+ "unicode": "e610",
+ "unicode_decimal": 58896
+ }
+ ]
+}
diff --git a/src/assets/font/iconfont.svg b/src/assets/font/iconfont.svg
new file mode 100644
index 0000000..5d4c738
--- /dev/null
+++ b/src/assets/font/iconfont.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+ <metadata>Created by iconfont</metadata>
+ <defs>
+ <font id="iconfont" horiz-adv-x="1024">
+ <font-face
+ font-family="iconfont"
+ font-weight="400"
+ font-stretch="normal"
+ units-per-em="1024"
+ ascent="896"
+ descent="-128"
+ />
+ <missing-glyph />
+
+ <glyph glyph-name="guanlianshebei" unicode="" d="M260.096 352H160a32 32 0 0 0-32 32V640h480v-256a32 32 0 0 0-32-32h-54.976a32 32 0 0 1 0-64H576a96 96 0 0 1 96 96V736a96 96 0 0 1-96 96H160a96 96 0 0 1-96-96v-352a96 96 0 0 1 96-96h100.096a32 32 0 0 1 0 64zM128 736a32 32 0 0 0 32 32h416a32 32 0 0 0 32-32v-32H128V736zM864 480h-90.88a32 32 0 0 1 0-64H864a32 32 0 0 0 32-32v-256H416v256a32 32 0 0 0 32 32h63.072a32 32 0 0 1 0 64H448a96 96 0 0 1-96-96v-352a96 96 0 0 1 96-96h416a96 96 0 0 1 96 96V384a96 96 0 0 1-96 96z m32-448a32 32 0 0 0-32-32H448a32 32 0 0 0-32 32v32h480v-32z" horiz-adv-x="1024" />
+
+ <glyph glyph-name="biyanjing" unicode="" d="M469.333333 214.613333c-36.053333 2.432-71.253333 8.533333-104.96 17.92l-69.802666-149.674666a42.368 42.368 0 0 0-56.533334-20.266667 42.666667 42.666667 0 0 0-20.821333 56.32l66.986667 143.658667a451.712 451.712 0 0 0-148.906667 112.682666 388.693333 388.693333 0 0 0-70.570667 119.338667 42.666667 42.666667 0 1 0 80.128 29.354667 303.445333 303.445333 0 0 1 55.210667-93.098667C270.634667 348.586667 383.018667 298.666667 505.728 298.666667c122.752 0 235.136 49.962667 305.706667 132.181333a303.445333 303.445333 0 0 1 55.210666 93.098667 42.666667 42.666667 0 0 0 80.128-29.354667 388.693333 388.693333 0 0 0-70.570666-119.338667 423.68 423.68 0 0 0-18.773334-20.48l104.362667-104.362666a42.666667 42.666667 0 0 0-0.298667-60.032 42.368 42.368 0 0 0-60.032-0.298667l-109.653333 109.653333c-20.48-14.08-42.24-26.581333-65.024-37.418666l66.901333-143.36a42.666667 42.666667 0 0 0-20.821333-56.362667 42.368 42.368 0 0 0-56.533333 20.266667l-69.717334 149.546666a520.533333 520.533333 0 0 0-91.946666-16.810666v-130.645334A42.666667 42.666667 0 0 0 512 42.666667c-23.722667 0-42.666667 18.944-42.666667 42.24v129.706666zM176.128 371.626667a42.368 42.368 0 0 0 60.032-0.256 42.666667 42.666667 0 0 0 0.298667-60.074667l-121.216-121.216a42.368 42.368 0 0 0-60.074667 0.298667 42.666667 42.666667 0 0 0-0.298667 60.032l121.258667 121.258666z" horiz-adv-x="1024" />
+
+ <glyph glyph-name="yanjing" unicode="" d="M512 704c156.448 0 296.021333-98.730667 418.410667-291.605333a52.938667 52.938667 0 0 0 0-56.789334C808.021333 162.730667 668.448 64 512 64c-156.448 0-296.021333 98.730667-418.410667 291.605333a52.938667 52.938667 0 0 0 0 56.789334C215.978667 605.269333 355.552 704 512 704z m0-128c-106.037333 0-192-85.962667-192-192s85.962667-192 192-192 192 85.962667 192 192-85.962667 192-192 192z m0-320c70.688 0 128 57.312 128 128s-57.312 128-128 128-128-57.312-128-128 57.312-128 128-128z" horiz-adv-x="1024" />
+
+ </font>
+ </defs>
+</svg>
diff --git a/src/assets/font/iconfont.ttf b/src/assets/font/iconfont.ttf
new file mode 100644
index 0000000..3285df0
--- /dev/null
+++ b/src/assets/font/iconfont.ttf
Binary files differ
diff --git a/src/assets/font/iconfont.woff b/src/assets/font/iconfont.woff
new file mode 100644
index 0000000..4afd284
--- /dev/null
+++ b/src/assets/font/iconfont.woff
Binary files differ
diff --git a/src/assets/font/iconfont.woff2 b/src/assets/font/iconfont.woff2
new file mode 100644
index 0000000..2f0476e
--- /dev/null
+++ b/src/assets/font/iconfont.woff2
Binary files differ
diff --git a/src/assets/images/login/audio-login.png b/src/assets/images/login/audio-login.png
new file mode 100644
index 0000000..eabf7aa
--- /dev/null
+++ b/src/assets/images/login/audio-login.png
Binary files differ
diff --git a/src/assets/images/login/login.png b/src/assets/images/login/login.png
new file mode 100644
index 0000000..02a8264
--- /dev/null
+++ b/src/assets/images/login/login.png
Binary files differ
diff --git a/src/assets/images/login/login2.png b/src/assets/images/login/login2.png
new file mode 100644
index 0000000..0166fcc
--- /dev/null
+++ b/src/assets/images/login/login2.png
Binary files differ
diff --git a/src/assets/style/animate/vue-transition.scss b/src/assets/style/animate/vue-transition.scss
new file mode 100644
index 0000000..8921a1e
--- /dev/null
+++ b/src/assets/style/animate/vue-transition.scss
@@ -0,0 +1,27 @@
+// 杩囨浮鍔ㄧ敾 妯悜娓愬彉
+.fade-transverse-leave-active,
+.fade-transverse-enter-active {
+ transition: all .5s;
+}
+.fade-transverse-enter {
+ opacity: 0;
+ transform: translateX(-30px);
+}
+.fade-transverse-leave-to {
+ opacity: 0;
+ transform: translateX(30px);
+}
+
+// 杩囨浮鍔ㄧ敾 缂╂斁娓愬彉
+.fade-scale-leave-active,
+.fade-scale-enter-active {
+ transition: all .3s;
+}
+.fade-scale-enter {
+ opacity: 0;
+ transform: scale(1.2);
+}
+.fade-scale-leave-to {
+ opacity: 0;
+ transform: scale(0.8);
+}
diff --git a/src/assets/style/fixed/base.scss b/src/assets/style/fixed/base.scss
new file mode 100644
index 0000000..850b24e
--- /dev/null
+++ b/src/assets/style/fixed/base.scss
@@ -0,0 +1,12 @@
+// 浼樺寲鏄剧ず
+html, body {
+ margin: 0px;
+ height: 100%;
+ font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "寰蒋闆呴粦", Arial, sans-serif;
+ #app {
+ @extend %full;
+ a {
+ text-decoration: none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/assets/style/fixed/element.scss b/src/assets/style/fixed/element.scss
new file mode 100644
index 0000000..ef2e8e6
--- /dev/null
+++ b/src/assets/style/fixed/element.scss
@@ -0,0 +1,31 @@
+// element 鏍峰紡琛ヤ竵
+.el-card {
+ &.is-always-shadow {
+ box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
+ }
+ &.is-hover-shadow {
+ &:hover {
+ box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
+ }
+ }
+}
+
+.el-menu--horizontal {
+ border-bottom: none !important;
+}
+
+.el-tabs__item:focus.is-active.is-focus:not(:active) {
+ box-shadow: none !important;
+}
+
+// 淇IE瀹藉害涓嶈兘鎾戞弧
+.el-table__body,
+.el-table__header {
+ width: 100% ;
+}
+
+// Chrome涓嬭〃鏍煎ご閮ㄩ敊浣嶄慨澶�
+.el-table th.gutter,
+.el-table colgroup.gutter {
+ display: table-cell !important;
+}
diff --git a/src/assets/style/fixed/markdown.scss b/src/assets/style/fixed/markdown.scss
new file mode 100644
index 0000000..8d13988
--- /dev/null
+++ b/src/assets/style/fixed/markdown.scss
@@ -0,0 +1,9 @@
+// markdown 鏍峰紡琛ヤ竵
+.markdown-body {
+ ul {
+ list-style: disc;
+ }
+ h1, h2 {
+ border-bottom: none;
+ }
+}
\ No newline at end of file
diff --git a/src/assets/style/fixed/n-progress.scss b/src/assets/style/fixed/n-progress.scss
new file mode 100644
index 0000000..2de5618
--- /dev/null
+++ b/src/assets/style/fixed/n-progress.scss
@@ -0,0 +1,8 @@
+#nprogress {
+ .bar {
+ background: $color-primary !important;
+ }
+ .peg {
+ box-shadow: 0 0 10px $color-primary, 0 0 5px $color-primary !important;
+ }
+}
\ No newline at end of file
diff --git a/src/assets/style/fixed/tree-view.scss b/src/assets/style/fixed/tree-view.scss
new file mode 100644
index 0000000..4057c3e
--- /dev/null
+++ b/src/assets/style/fixed/tree-view.scss
@@ -0,0 +1,5 @@
+.tree-view-wrapper.tree-view-small {
+ .tree-view-item {
+ font-size: 10px;
+ }
+}
\ No newline at end of file
diff --git a/src/assets/style/fixed/vue-grid-layout.scss b/src/assets/style/fixed/vue-grid-layout.scss
new file mode 100644
index 0000000..c9f2344
--- /dev/null
+++ b/src/assets/style/fixed/vue-grid-layout.scss
@@ -0,0 +1,9 @@
+// vue-splitpane 鏍峰紡琛ヤ竵
+.vue-grid-item {
+ &.vue-grid-placeholder {
+ border: 1px solid $color-border-1;
+ background-color: rgba(#FFF, .3);
+ opacity: 1;
+ border-radius: 4px;
+ }
+}
\ No newline at end of file
diff --git a/src/assets/style/fixed/vue-splitpane.scss b/src/assets/style/fixed/vue-splitpane.scss
new file mode 100644
index 0000000..106aa33
--- /dev/null
+++ b/src/assets/style/fixed/vue-splitpane.scss
@@ -0,0 +1,5 @@
+// vue-splitpane 鏍峰紡琛ヤ竵
+.splitter-pane-resizer {
+ background-color: $color-border-1 !important;
+ opacity: 1 !important;
+}
\ No newline at end of file
diff --git a/src/assets/style/index.scss b/src/assets/style/index.scss
new file mode 100644
index 0000000..697fac5
--- /dev/null
+++ b/src/assets/style/index.scss
@@ -0,0 +1,904 @@
+.overSpread {
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ background: rgba(0, 0, 0, 0.5);
+ z-index: 10;
+}
+.overSpread1 {
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ background: rgba(0, 0, 0, 0);
+ z-index: 10;
+}
+
+.el-pagination.is-background .el-pager li:not(.disabled).active {
+ background: #2a78fb !important;
+}
+// .el-tabs__content {
+// height: calc(100% - 100px) !important;
+// overflow: auto;
+// }
+.workshopContent {
+ height: 50%;
+ width: 100%;
+ padding: 24px;
+ min-height: 453px;
+ // min-width: 1193px;
+ background: #ffffff;
+ border-radius: 6px;
+ box-sizing: border-box;
+ .el-pagination {
+ position: absolute;
+ bottom: 16px;
+ right: 30px;
+ }
+}
+* {
+ margin: 0;
+ padding: 0;
+}
+// input
+.el-input.is-disabled .el-input__inner{
+ color:#898989!important;
+}
+// 鎸夐挳
+.el-button--mini{
+ line-height:17px!important;
+}
+.el-button--primary {
+ color: #fff;
+ background-color: #2a78fb!important;
+ border-color: #2a78fb!important;
+}
+.el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover{
+ background-color:#a0cfff!important;
+ border-color: #a0cfff!important; //;
+
+}
+.el-button--text {
+ color: #2a78fb !important;
+}
+.el-button--text.is-disabled {
+ color: #7c7f85 !important;
+}
+// .el-radio
+.el-radio__input.is-disabled .el-radio__inner, .el-radio__input.is-disabled.is-checked .el-radio__inner{
+
+ background-color:#e5e2e2!important;
+
+}
+.left_moudel {
+ float: left;
+ // overflow: auto;
+ width: 20%;
+ height: 100%;
+ padding-right: 15px;
+ box-sizing: border-box;
+ border-right: 2px solid #f5f7fa;
+ h4 {
+ color: cornflowerblue;
+ }
+}
+.right_moudel {
+ float: right;
+ width: 79%;
+ height: 100%;
+}
+//.topfrom {
+// margin-bottom: 15px;
+//}
+.topfrom_left {
+ float: left;
+}
+.title {
+ font-size: 16px;
+ font-weight: 600;
+ display: block;
+ margin: 0px 0px;
+ color: #333;
+}
+.font_weight {
+ font-weight: 500;
+ font-size: 16px;
+ font-family: "DIN Alternate";
+}
+.top_right_bottom {
+ font-size: 12px;
+}
+
+.border_right {
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
+}
+.top {
+ width: 100%;
+ height: 61px;
+ display: flex;
+ .top_replenish {
+ width: 34%;
+ display: flex;
+ padding-right: 2%;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ align-content: center;
+ // justify-content: flex-start;
+ align-items: center;
+ justify-content: space-around;
+ text-align: center;
+ }
+
+ .top_left {
+ width: 10%;
+ border-right: 1px solid #ccc;
+ display: flex;
+ padding-right: 2%;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ align-content: center;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ // dd {
+ // margin: 5px 0px;
+ // }
+ // .font_weight {
+ // margin-left: 15px;
+ // }
+ }
+ .top_right {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-content: center;
+ align-items: center;
+ justify-content: space-around;
+ width: calc(90% - 197px);
+ text-align: center;
+ }
+}
+.content_top {
+ height: 128px;
+ display: flex;
+ width: 100%;
+ // min-width: 1641px;
+ flex-wrap: wrap;
+ .cardActive {
+ background: #5595ff !important;
+ color: aliceblue !important;
+ }
+ .content_topLeft {
+ width: 18%;
+ height: 100%;
+ // width: 136px;
+ // height: 128px;
+ .allCard {
+ // width: 100%;
+ // height: 100%;
+ width: 236px;
+ height: 128px;
+ background: #ffffff;
+ color: #000;
+ cursor: pointer;
+ border-radius: 15px;
+ box-sizing: border-box;
+ padding: 15px;
+ .card_top {
+ padding-bottom: 10px;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+ }
+ .card_bottom {
+ width: 100%;
+ height: 60%;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-content: space-around;
+ justify-content: flex-start;
+ align-items: center;
+ margin-top: 5px;
+ p {
+ width: 40%;
+ margin: 6px;
+ font-size: 12px;
+ }
+ }
+ }
+ }
+ .cardtitle {
+ font-size: 20px;
+ font-weight: 600;
+ margin-right: 20px;
+ margin-left: 6px;
+ }
+ .content_topMiddle {
+ width: 70%;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-content: space-between;
+ justify-content: space-between;
+ align-items: center;
+ height: 100%;
+ box-sizing: border-box;
+ padding: 0px 40px;
+ > div {
+ // width: 22%;
+ // height: 100%;
+ width: 205px;
+ height: 128px;
+ background: #ffffff;
+ border: 1px solid #ccc;
+ border-radius: 12px;
+ box-sizing: border-box;
+ padding: 16px 14px 20px 18px;
+ .card {
+ width: 100%;
+ height: 100%;
+ }
+ .card_top {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+ padding-bottom: 10px;
+ }
+ .card_bottom {
+ width: 100%;
+ height: 60%;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-content: space-around;
+ justify-content: flex-start;
+ align-items: center;
+ margin-top: 5px;
+ p {
+ width: 40%;
+ margin: 6px;
+ font-size: 12px;
+ }
+ }
+ }
+ }
+}
+
+.close {
+ font-size: 20px;
+ position: absolute;
+ right: 15px;
+ top: 15px;
+}
+.drawer {
+ z-index: 99;
+ position: fixed;
+ top: 10%;
+ left: 30%;
+ border: none !important;
+ border-radius: 8px !important;
+ box-shadow: 0px 2px 37px -1px rgba(0, 0, 0, 0.2);
+ background: #fff;
+ .drawerHeader {
+ width: 100%;
+ height: 50px;
+ background-color: #f5f7fa;
+ line-height: 50px;
+ font-weight: 600;
+ font-size: 15px;
+ padding-left: 20px;
+ box-sizing: border-box;
+ border-radius: 8px;
+ font-family: PingFangSC-Medium, sans-serif;
+ }
+ .drawerContent {
+ padding: 30px 40px 40px 40px;
+ box-sizing: border-box;
+ border-radius: 8px;
+ }
+}
+// 寮规
+
+.el-dialog__header {
+ padding: 0 !important;
+ height: 50px !important;
+ background: #f5f7fa;
+ line-height: 50px !important;
+ font-weight: 600 !important;
+ font-size: 15px !important;
+ padding-left: 20px !important;
+ box-sizing: border-box !important;
+ border-radius: 8px !important;
+ font-family: PingFangSC-Medium, sans-serif !important;
+}
+.no-header-dialog {
+ .el-dialog__header {
+ display: none !important;
+ }
+}
+.el-dialog__body {
+ padding: 20px 30px 30px 30px !important;
+ box-sizing: border-box !important;
+ min-height: 200px;
+}
+.el-dialog__footer {
+ padding: 0 20px 20px;
+}
+// 鍒楄〃涓嬬殑椤电鐨勬牱寮�
+.table-bottom-tabs {
+ height: 34px;
+ line-height: 34px;
+ background: #e6ecf2;
+ display: flex;
+ font-size: 14px;
+ .tab-pane {
+ min-width: 60px;
+ width:auto;
+ padding:0 20px;
+ margin-right: 20px;
+ text-align: center;
+ background: #2a78fb;
+ cursor: pointer;
+ border-top-left-radius: 20px;
+ border-top-right-radius: 20px;
+ }
+}
+// tab 椤电
+.tab-fixed-element {
+ position: fixed;
+ font-size: 14px;
+ width: calc(100% - 530px);
+ height: 50px;
+ // background: #e6ecf2;
+ margin-top: -155px;
+ margin-left: 130px;
+}
+.el-tabs--card > .el-tabs__header {
+ .el-tabs__item {
+ line-height: 20px !important;
+ box-sizing: content-box;
+ }
+}
+.el-tabs__item {
+ line-height: 40px;
+ height: 40px;
+ color: rgba(0, 0, 0, 0.9);
+ text-align: center;
+ padding: 0 20px !important;
+ position: relative;
+ font-family: PingFangSC-Medium, sans-serif;
+ font-weight: 600 !important;
+ font-size: 14px;
+ &.is-active {
+ background-color: transparent !important;
+ }
+}
+.content .is-active {
+ background-color: transparent !important;
+}
+.el-tabs__nav-wrap::after {
+ display: none;
+}
+.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
+ // border-bottom: 3px solid #2a78fb!important;
+ color: #2a78fb;
+}
+.el-tabs--border-card {
+ .el-tabs__item {
+ width: 75px;
+ height: 20px;
+ line-height: 20px;
+ text-align: center;
+ border-radius: 12px 12px 0 0;
+ background: #fff;
+ margin-left: 3px;
+ }
+}
+// 鏍囩椤�
+.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+ background: #2a78fb !important;
+ color: #fff !important;
+}
+// 鏃ユ湡
+.el-date-editor {
+ .el-range__close-icon,
+ .el-range-separator,
+ .el-range__icon {
+ background: #fff;
+ }
+}
+
+//婊氬姩鏉℃牱寮�
+::-webkit-scrollbar {
+ width: 8px !important;
+ height: 8px !important;
+ -webkit-appearance: none;
+ background-color: #00000040;
+}
+::-webkit-scrollbar-thumb {
+ box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
+ background: #e1e1e1;
+}
+::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
+ // border-radius: 10px;
+ background: #ffffff;
+ // background:#2c60c5;
+}
+//琛ㄦ牸婊氬姩
+// .el-table__body-wrapper::-webkit-scrollbar-thumb {
+// border-radius: 5px;
+// -webkit-box-shadow: rgba(0, 0, 0, 0.4);
+// background-color: rgba(0, 0, 0, 0.4);
+// -webkit-border-radius: 5px;
+// -moz-border-radius: 5px;
+// -ms-border-radius: 5px;
+// -o-border-radius: 5px;
+// }
+// .el-table__body-wrapper::-webkit-scrollbar {
+// width: 10px;
+// height: 15px;
+// background-color: 0 0 2px rgba(0, 0, 0, 0.6);
+// }
+// .el-table__body-wrapper::-webkit-scrollbar-track {
+// box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
+// border-radius: 10px;
+// background: #ffffff;
+// }
+.demo-form-inline {
+ line-height: 40px;
+ .el-form-item {
+ margin-bottom: 10px !important;
+ }
+}
+.el-table .el-table__fixed,
+.el-table .el-table__fixed-right {
+ height: auto !important;
+ bottom: 8px;
+}
+.el-table .el-table__cell {
+ padding: 6px 0px !important;
+ text-align: center !important;
+}
+.el-table .el-table__cell.is-left {
+ text-align: left !important;
+}
+.el-table th.el-table__cell > .cell {
+ font-family: PingFangSC-Medium, sans-serif;
+ font-size: 14px;
+ line-height: 23px;
+ text-align: center;
+ color: rgba(0, 0, 0, 0.9);
+}
+.el-table th.el-table__cell.is-left > .cell {
+ text-align: left !important;
+}
+.pagination {
+ width: 100%;
+ height: 30px;
+ margin-top: 18px;
+ font-family: PingFangSC-Medium, sans-serif;
+ .el-pagination {
+ position: absolute;
+ right: 20px;
+ bottom: 15px;
+ }
+}
+.el-table .cell {
+ .el-button--text.el-button--small {
+ padding: 4px 0px;
+ font-family: PingFangSC-Medium, sans-serif;
+ }
+}
+.el-button.el-button--small {
+ padding: 6px 6px;
+}
+.el-form--label-left .el-form-item__label {
+ font-size: 13px;
+ text-align: left !important;
+}
+.el-table--scrollable-x .el-table__body-wrapper {
+ overflow-x: visible;
+}
+// 鍒楄〃
+.table-left .el-table__cell {
+ text-align: left !important;
+ padding-left: 10px !important;
+ height: 35px;
+}
+.table-left th.el-table__cell > .cell {
+ text-align: left !important;
+ padding: 0px 0px 0px 10px !important;
+}
+
+div {
+ scrollbar-width: thin;
+ scrollbar-color: #e3e3e3 transparent;
+}
+div {
+ scrollbar-width: thin;
+ scrollbar-color: #e1e1e1 transparent;
+}
+
+// 棰滆壊
+.el-table .onSelect {
+ background: #ebf2ff;
+}
+.font_weight_600 {
+ font-weight: 600;
+}
+.color_333 {
+ color: #333;
+}
+.color_666 {
+ color: #666;
+}
+.color_blue {
+ color: #2a78fb;
+}
+.color_67c23a {
+ color: #67c23a;
+}
+.color_red {
+ color: red;
+}
+.color_FF9900 {
+ color: #ff9900;
+}
+.background_blue{
+ background: #2a78fb;
+}
+.background_67c23a{
+ background: #67c23a;
+}
+.background_green{
+ background:green;
+}
+.background_color_eee {
+ background: #eee;
+}
+.background_67c23a{
+ background:#67c23a;
+}
+.background_blue{
+ background:#2a78fb;
+}
+.Badge {
+ width: 6px;
+ height: 6px;
+ background: red;
+ border-radius: 100%;
+ display: inline-block;
+ margin-bottom: 1px;
+ margin-right: 5px;
+}
+.success {
+ color: #06c062;
+}
+.error {
+ color: #f62f2f;
+}
+.warning-radio {
+ color: #e6a23c;
+}
+.warning {
+ color: rgba(0, 0, 0, 0.4);
+}
+// 闂磋窛
+.margin_left_3px {
+ margin-left: 3px;
+}
+.margin_left_5px {
+ margin-left: 5px;
+}
+.margin_left_10px {
+ margin-left: 10px;
+}
+.margin_left_15px {
+ margin-left: 15px;
+}
+.margin_left_20px {
+ margin-left: 20px;
+}
+.margin_left_40px {
+ margin-left: 40px;
+}
+.margin_right_3px {
+ margin-right: 3px;
+}
+.margin_right_5px {
+ margin-right: 5px;
+}
+.margin_right_10px {
+ margin-right: 10px;
+}
+.margin_right_15px {
+ margin-right: 15px !important;
+}
+.margin_right_20px {
+ margin-right: 20px;
+}
+.margin_right_40px {
+ margin-right: 40px;
+}
+.margin_right_60px {
+ margin-right: 60px;
+}
+.margin_top_10px {
+ margin-top: 10px;
+}
+.margin_top_15px {
+ margin-top: 15px;
+}
+.margin_top_20px {
+ margin-top: 20px;
+}
+.margin_top_30px {
+ margin-top: 30px;
+}
+.margin_top_35px {
+ margin-top: 35px;
+}
+.margin_top_40px {
+ margin-top: 40px;
+}
+.margin_bottom_5px{
+ margin-bottom: 5px;
+}
+.margin_bottom_10px {
+ margin-bottom: 10px !important;
+}
+.margin_bottom_15px {
+ margin-bottom: 15px !important;
+}
+.margin_bottom_15px {
+ margin-bottom: 15px !important;
+}
+.margin_bottom_20px {
+ margin-bottom: 20px !important;
+}
+.margin_bottom_30px {
+ margin-bottom: 30px !important;
+}
+.margin_bottom_40px {
+ margin-bottom: 40px !important;
+}
+.margin_bottom_50px {
+ margin-bottom: 50px !important;
+}
+//
+.float_left {
+ float: left;
+}
+.float_right {
+ float: right;
+}
+//
+.line_height_20px {
+ line-height: 20px;
+}
+.line_height_25px {
+ line-height: 25px;
+}
+.line_height_32px {
+ line-height: 32px;
+}
+.text_indent_20 {
+ text-indent: 20px;
+}
+.text_indent_30 {
+ text-indent: 30px;
+}
+// 瀛椾綋澶у皬
+.font_size_12 {
+ font-size: 12px;
+}
+.font_size_13 {
+ font-size: 13px !important;
+}
+.font_size_14 {
+ font-size: 14px;
+}
+.font_size_15 {
+ font-size: 15px;
+}
+.font_size_16 {
+ font-size: 16px;
+}
+.font_size_18 {
+ font-size: 18px;
+}
+.font_size_20 {
+ font-size: 20px !important;
+}
+.font_size_22 {
+ font-size: 22px !important;
+}
+.font_size_30 {
+ font-size: 30px !important;
+}
+.font_size_40 {
+ font-size: 40px !important;
+}
+.cursor_pointer {
+ cursor: pointer;
+}
+// 鐐圭偣
+.success-radio {
+ display: inline-block;
+ width: 5px;
+ height: 5px;
+ border-radius: 50%;
+ background: #67c23a;
+ margin: 3px;
+}
+.warning-radio {
+ display: inline-block;
+ width: 5px;
+ height: 5px;
+ border-radius: 50%;
+ background: #e6a23c;
+ margin: 3px;
+}
+.red-radio {
+ display: inline-block;
+ width: 5px;
+ height: 5px;
+ border-radius: 50%;
+ background: #f62f2f;
+ margin: 3px;
+}
+
+// div:-webkit-scrollbar {
+// width: 11px;
+// }
+// div:-webkit-scrollbar-track {
+// background: transparent;
+// }
+// div:-webkit-scrollbar-thumb {
+// background-color: #e1e1e1;
+// border-radius: 6px;
+// border: 3px solid transparent;
+// }
+
+/* webkit browsers */
+// div::-webkit-scrollbar,
+// div::-webkit-scrollbar-thumb {
+// height: 26px;
+// border-radius: 13px;
+// background-clip: padding-box;
+// border: 10px solid transparent;
+// }
+
+// div::-webkit-scrollbar-thumb {
+// box-shadow: inset 0 0 0 10px;
+// }
+
+// form 琛ㄥ崟鐨�
+
+.btn-pager {
+ display: flex;
+ margin-top: 10px;
+ // background: #fff;
+ .page {
+ margin-left: auto;
+ }
+}
+
+.g6-device{
+ padding: 10px;
+
+ &-container{
+ min-height: 100px;
+ min-width: 200px;
+ position: relative;
+ display: flex;
+ justify-content: space-between;
+ }
+ &-status{
+ position: absolute;
+ top: -10px;
+ left: -10px;
+ display: flex;
+ align-items: center;
+ &-icon{
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ margin-right: 8px;
+ }
+ }
+ &-image{
+ width: 120px;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ &>img{
+ width: 120px;
+ }
+ }
+ &-info{
+ padding: 10px;
+ flex: 1;
+ }
+ &-name{
+ font-size: 18px;
+ color:#0079fe;
+ margin-bottom: 6px;
+ }
+ &-detail{
+ font-size: 16px;
+ color: #9c9c9c;
+ &>div{
+ padding: 2px 0;
+ }
+ }
+}
+
+.g6-procedure{
+ &-container{
+ min-height: 100px;
+ min-width: 100px;
+ max-width: 350px;
+ position: relative;
+ }
+ &-device{
+ display: flex;
+ align-items: center;
+ justify-content:start;
+ flex-wrap: wrap;
+ &-item{
+ box-sizing: border-box;
+ padding: 10px 6px;
+ position: relative;
+ height: 120px;
+ width: 90px;
+ border: 1px solid #e8e8e8;
+ border-radius: 4px;
+ margin-right: 10px;
+ margin-bottom: 10px;
+ }
+ &-image{
+ height: auto;
+ width: 100%;
+ overflow: hidden;
+ & > img{
+ width: 100%;
+ height: auto;
+ }
+ }
+ &-name{
+ bottom: 4px;
+ left: 0;
+ width: 100%;
+ position: absolute;
+ text-align: center;
+ }
+ &-status{
+ position: absolute;
+ top: 2px;
+ right: 2px;
+ display: flex;
+ align-items: center;
+ &-icon{
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ }
+ }
+ }
+ &-name{
+ color:#0066ff;
+ font-size: 16px;
+ }
+}
+
+// vxe-table
+.vxe-table--body{
+ td{
+ height:35px!important;
+ }
+}
\ No newline at end of file
diff --git a/src/assets/style/public-class.scss b/src/assets/style/public-class.scss
new file mode 100644
index 0000000..a851d82
--- /dev/null
+++ b/src/assets/style/public-class.scss
@@ -0,0 +1,67 @@
+@import 'public';
+
+// 琛ヤ竵 base
+@import '~@/assets/style/fixed/base.scss';
+// 琛ヤ竵 element
+@import '~@/assets/style/fixed/element.scss';
+// 琛ヤ竵 markdown
+@import '~@/assets/style/fixed/markdown.scss';
+// 琛ヤ竵 n-progress
+@import '~@/assets/style/fixed/n-progress.scss';
+// 琛ヤ竵 vue-splitpane
+@import '~@/assets/style/fixed/vue-splitpane.scss';
+// 琛ヤ竵 vue-grid-layout
+@import '~@/assets/style/fixed/vue-grid-layout.scss';
+// 琛ヤ竵 tree-view
+@import '~@/assets/style/fixed/tree-view.scss';
+
+// 鍔ㄧ敾
+@import '~@/assets/style/animate/vue-transition.scss';
+
+// 鍦ㄨ繖閲屽啓鍏敤鐨刢lass
+// 娉ㄦ剰 杩欎釜鏂囦欢閲屽彧鍐檆lass
+// mixin绛夊唴瀹硅鍦� public.scss 閲屼功鍐�
+
+// 鏂囧瓧鐩稿叧
+.#{$prefix}-text-center {
+ text-align: center;
+}
+
+// 娴姩鐩稿叧
+.#{$prefix}-fl {
+ float: left;
+}
+.#{$prefix}-fr {
+ float: right;
+}
+
+// 杈硅窛鐩稿叧
+$sizes: (0, 5, 10, 15, 20);
+
+@for $index from 1 to 6 {
+ .#{$prefix}-m-#{nth($sizes, $index)} { margin: #{nth($sizes, $index)}px !important; }
+ .#{$prefix}-mt-#{nth($sizes, $index)} { margin-top: #{nth($sizes, $index)}px !important; }
+ .#{$prefix}-mr-#{nth($sizes, $index)} { margin-right: #{nth($sizes, $index)}px !important; }
+ .#{$prefix}-mb-#{nth($sizes, $index)} { margin-bottom: #{nth($sizes, $index)}px !important; }
+ .#{$prefix}-ml-#{nth($sizes, $index)} { margin-left: #{nth($sizes, $index)}px !important; }
+
+ .#{$prefix}-p-#{nth($sizes, $index)} { padding: #{nth($sizes, $index)}px !important; }
+ .#{$prefix}-pt-#{nth($sizes, $index)} { padding-top: #{nth($sizes, $index)}px !important; }
+ .#{$prefix}-pr-#{nth($sizes, $index)} { padding-right: #{nth($sizes, $index)}px !important; }
+ .#{$prefix}-pb-#{nth($sizes, $index)} { padding-bottom: #{nth($sizes, $index)}px !important; }
+ .#{$prefix}-pl-#{nth($sizes, $index)} { padding-left: #{nth($sizes, $index)}px !important; }
+}
+
+// 蹇�熶娇鐢�
+
+.#{$prefix}-m { margin: 20px !important; }
+.#{$prefix}-mt { margin-top: 20px !important; }
+.#{$prefix}-mr { margin-right: 20px !important; }
+.#{$prefix}-mb { margin-bottom: 20px !important; }
+.#{$prefix}-ml { margin-left: 20px !important; }
+
+.#{$prefix}-p { padding: 20px !important; }
+.#{$prefix}-pt { padding-top: 20px !important; }
+.#{$prefix}-pr { padding-right: 20px !important; }
+.#{$prefix}-pb { padding-bottom: 20px !important; }
+.#{$prefix}-pl { padding-left: 20px !important; }
diff --git a/src/assets/style/public.scss b/src/assets/style/public.scss
new file mode 100644
index 0000000..ac73bac
--- /dev/null
+++ b/src/assets/style/public.scss
@@ -0,0 +1,44 @@
+@import '~@/assets/style/unit/color.scss';
+
+// 宸ュ叿绫诲悕缁熶竴鍓嶇紑
+$prefix: d2;
+
+// 绂佹鐢ㄦ埛閫変腑 榧犳爣鍙樹负鎵嬪舰
+%unable-select {
+ user-select: none;
+ cursor: pointer;
+}
+
+// 濉弧鐖跺厓绱�
+// 缁勮鐖跺厓绱� position: relative | absolute;
+%full {
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ bottom: 0px;
+ left: 0px;
+}
+
+// flex 鍨傜洿姘村钩灞呬腑
+%flex-center-row {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+}
+%flex-center-col {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+
+// 灏嗗厓绱犳ā鎷熸垚鍗＄墖澶栬
+%card {
+ border: 1px solid #dddee1;
+ border-color: #e9eaec;
+ background: #fff;
+ border-radius: 4px;
+ font-size: 14px;
+ position: relative;
+}
diff --git a/src/assets/style/theme/chester/index.scss b/src/assets/style/theme/chester/index.scss
new file mode 100644
index 0000000..7b69d57
--- /dev/null
+++ b/src/assets/style/theme/chester/index.scss
@@ -0,0 +1,2 @@
+@import './setting.scss';
+@import '../theme.scss';
diff --git a/src/assets/style/theme/chester/setting.scss b/src/assets/style/theme/chester/setting.scss
new file mode 100644
index 0000000..899e0aa
--- /dev/null
+++ b/src/assets/style/theme/chester/setting.scss
@@ -0,0 +1,64 @@
+// 涓婚鍚嶇О
+$theme-name: 'chester';
+// 涓婚鑳屾櫙棰滆壊
+$theme-bg-color: #2C3643;
+// 涓婚鑳屾櫙鍥剧墖閬僵
+$theme-bg-mask: rgba(#000, 0);
+
+// 娑堟伅鎻愮ず
+$theme-message-info-background-color: #FFFFFF;
+$theme-message-info-text-color: #222A34;
+$theme-message-info-border-color: #222A34;
+
+// container缁勪欢
+$theme-container-background-color: rgba(#FFF, 1);
+$theme-container-header-footer-background-color: #FFF;
+$theme-container-border-inner: 1px solid #CFD7E5;
+$theme-container-border-outer: 1px solid #2A2D2E;
+
+$theme-multiple-page-control-color: #CCCCCC;
+$theme-multiple-page-control-color-active: #242D38;
+$theme-multiple-page-control-nav-prev-color: #CCCCCC;
+$theme-multiple-page-control-nav-next-color: #CCCCCC;
+$theme-multiple-page-control-border-color: #2A2D2E;
+$theme-multiple-page-control-border-color-active: #FFFFFF;
+$theme-multiple-page-control-background-color: #242D38;
+$theme-multiple-page-control-background-color-active: #FFFFFF;
+
+// 椤舵爮鍜屼晶杈规爮涓睍寮�鐨勮彍鍗� hover 鐘舵�佷笅
+$theme-menu-item-color-hover: #CCCCCC;
+$theme-menu-item-background-color-hover: #2A2D2E;
+
+// 椤舵爮涓婄殑鏂囧瓧棰滆壊
+$theme-header-item-color: #CCCCCC;
+$theme-header-item-background-color: transparent;
+// 椤舵爮涓婄殑椤圭洰鍦� hover 鏃�
+$theme-header-item-color-hover: #CCCCCC;
+$theme-header-item-background-color-hover: #2A2D2E;
+// 椤舵爮涓婄殑椤圭洰鍦� focus 鏃�
+$theme-header-item-color-focus: #CCCCCC;
+$theme-header-item-background-color-focus: #222A34;
+// 椤舵爮涓婄殑椤圭洰鍦� active 鏃�
+$theme-header-item-color-active: #FFFFFF;
+$theme-header-item-background-color-active: #222A34;
+
+// 渚ц竟鏍忎笂鐨勬枃瀛楅鑹�
+$theme-aside-item-color: #CCCCCC;
+$theme-aside-item-background-color: transparent;
+// 渚ц竟鏍忎笂鐨勯」鐩湪 hover 鏃�
+$theme-aside-item-color-hover: #CCCCCC;
+$theme-aside-item-background-color-hover: #2A2D2E;
+// 渚ц竟鏍忎笂鐨勯」鐩湪 focus 鏃�
+$theme-aside-item-color-focus: #CCCCCC;
+$theme-aside-item-background-color-focus: #222A34;
+// 渚ц竟鏍忎笂鐨勯」鐩湪 active 鏃�
+$theme-aside-item-color-active: #FFFFFF;
+$theme-aside-item-background-color-active: #222A34;
+
+// 渚ц竟鏍忚彍鍗曚负绌虹殑鏃跺�欐樉绀虹殑鍏冪礌
+$theme-aside-menu-empty-icon-color: #CCCCCC;
+$theme-aside-menu-empty-text-color: #CCCCCC;
+$theme-aside-menu-empty-background-color: #242D38;
+$theme-aside-menu-empty-icon-color-hover: #FFFFFF;
+$theme-aside-menu-empty-text-color-hover: #FFFFFF;
+$theme-aside-menu-empty-background-color-hover: #242D38;
\ No newline at end of file
diff --git a/src/assets/style/theme/d2/index.scss b/src/assets/style/theme/d2/index.scss
new file mode 100644
index 0000000..7b69d57
--- /dev/null
+++ b/src/assets/style/theme/d2/index.scss
@@ -0,0 +1,2 @@
+@import './setting.scss';
+@import '../theme.scss';
diff --git a/src/assets/style/theme/d2/setting.scss b/src/assets/style/theme/d2/setting.scss
new file mode 100644
index 0000000..f3aa5ef
--- /dev/null
+++ b/src/assets/style/theme/d2/setting.scss
@@ -0,0 +1,64 @@
+// 涓婚鍚嶇О
+$theme-name: "element";
+// 涓婚鑳屾櫙棰滆壊
+$theme-bg-color: #314255;
+// 涓婚鑳屾櫙鍥剧墖閬僵
+$theme-bg-mask: rgba(#000, 0);
+
+// 娑堟伅鎻愮ず
+$theme-message-info-background-color: #ffffff;
+$theme-message-info-text-color: #202d3d;
+$theme-message-info-border-color: #202d3d;
+
+// container缁勪欢
+$theme-container-background-color: rgba(#fff, 1);
+$theme-container-header-footer-background-color: #fff;
+$theme-container-border-inner: 1px solid #cfd7e5;
+$theme-container-border-outer: 1px solid #011527;
+
+$theme-multiple-page-control-color: #bfcbd9;
+$theme-multiple-page-control-color-active: #46a0fc;
+$theme-multiple-page-control-nav-prev-color: #bfcbd9;
+$theme-multiple-page-control-nav-next-color: #bfcbd9;
+$theme-multiple-page-control-border-color: #011527;
+$theme-multiple-page-control-border-color-active: #ffffff;
+$theme-multiple-page-control-background-color: #212d3d;
+$theme-multiple-page-control-background-color-active: #ffffff;
+
+// 椤舵爮鍜屼晶杈规爮涓睍寮�鐨勮彍鍗� hover 鐘舵�佷笅
+$theme-menu-item-color-hover: #bfcbd9;
+$theme-menu-item-background-color-hover: #011527;
+
+// 椤舵爮涓婄殑鏂囧瓧棰滆壊
+$theme-header-item-color: #bfcbd9;
+$theme-header-item-background-color: transparent;
+// 椤舵爮涓婄殑椤圭洰鍦� hover 鏃�
+$theme-header-item-color-hover: #bfcbd9;
+$theme-header-item-background-color-hover: #011527;
+// 椤舵爮涓婄殑椤圭洰鍦� focus 鏃�
+$theme-header-item-color-focus: #bfcbd9;
+$theme-header-item-background-color-focus: #202d3d;
+// 椤舵爮涓婄殑椤圭洰鍦� active 鏃�
+$theme-header-item-color-active: #46a0fc;
+$theme-header-item-background-color-active: #202d3d;
+
+// 渚ц竟鏍忎笂鐨勬枃瀛楅鑹�
+$theme-aside-item-color: #bfcbd9;
+$theme-aside-item-background-color: transparent;
+// 渚ц竟鏍忎笂鐨勯」鐩湪 hover 鏃�
+$theme-aside-item-color-hover: #bfcbd9;
+$theme-aside-item-background-color-hover: #011527;
+// 渚ц竟鏍忎笂鐨勯」鐩湪 focus 鏃�
+$theme-aside-item-color-focus: #bfcbd9;
+$theme-aside-item-background-color-focus: #202d3d;
+// 渚ц竟鏍忎笂鐨勯」鐩湪 active 鏃�
+$theme-aside-item-color-active: #46a0fc;
+$theme-aside-item-background-color-active: #202d3d;
+
+// 渚ц竟鏍忚彍鍗曚负绌虹殑鏃跺�欐樉绀虹殑鍏冪礌
+$theme-aside-menu-empty-icon-color: #bfcbd9;
+$theme-aside-menu-empty-text-color: #bfcbd9;
+$theme-aside-menu-empty-background-color: #202d3d;
+$theme-aside-menu-empty-icon-color-hover: #46a0fc;
+$theme-aside-menu-empty-text-color-hover: #46a0fc;
+$theme-aside-menu-empty-background-color-hover: #202d3d;
diff --git a/src/assets/style/theme/element/index.scss b/src/assets/style/theme/element/index.scss
new file mode 100644
index 0000000..7b69d57
--- /dev/null
+++ b/src/assets/style/theme/element/index.scss
@@ -0,0 +1,2 @@
+@import './setting.scss';
+@import '../theme.scss';
diff --git a/src/assets/style/theme/element/setting.scss b/src/assets/style/theme/element/setting.scss
new file mode 100644
index 0000000..f3aa5ef
--- /dev/null
+++ b/src/assets/style/theme/element/setting.scss
@@ -0,0 +1,64 @@
+// 涓婚鍚嶇О
+$theme-name: "element";
+// 涓婚鑳屾櫙棰滆壊
+$theme-bg-color: #314255;
+// 涓婚鑳屾櫙鍥剧墖閬僵
+$theme-bg-mask: rgba(#000, 0);
+
+// 娑堟伅鎻愮ず
+$theme-message-info-background-color: #ffffff;
+$theme-message-info-text-color: #202d3d;
+$theme-message-info-border-color: #202d3d;
+
+// container缁勪欢
+$theme-container-background-color: rgba(#fff, 1);
+$theme-container-header-footer-background-color: #fff;
+$theme-container-border-inner: 1px solid #cfd7e5;
+$theme-container-border-outer: 1px solid #011527;
+
+$theme-multiple-page-control-color: #bfcbd9;
+$theme-multiple-page-control-color-active: #46a0fc;
+$theme-multiple-page-control-nav-prev-color: #bfcbd9;
+$theme-multiple-page-control-nav-next-color: #bfcbd9;
+$theme-multiple-page-control-border-color: #011527;
+$theme-multiple-page-control-border-color-active: #ffffff;
+$theme-multiple-page-control-background-color: #212d3d;
+$theme-multiple-page-control-background-color-active: #ffffff;
+
+// 椤舵爮鍜屼晶杈规爮涓睍寮�鐨勮彍鍗� hover 鐘舵�佷笅
+$theme-menu-item-color-hover: #bfcbd9;
+$theme-menu-item-background-color-hover: #011527;
+
+// 椤舵爮涓婄殑鏂囧瓧棰滆壊
+$theme-header-item-color: #bfcbd9;
+$theme-header-item-background-color: transparent;
+// 椤舵爮涓婄殑椤圭洰鍦� hover 鏃�
+$theme-header-item-color-hover: #bfcbd9;
+$theme-header-item-background-color-hover: #011527;
+// 椤舵爮涓婄殑椤圭洰鍦� focus 鏃�
+$theme-header-item-color-focus: #bfcbd9;
+$theme-header-item-background-color-focus: #202d3d;
+// 椤舵爮涓婄殑椤圭洰鍦� active 鏃�
+$theme-header-item-color-active: #46a0fc;
+$theme-header-item-background-color-active: #202d3d;
+
+// 渚ц竟鏍忎笂鐨勬枃瀛楅鑹�
+$theme-aside-item-color: #bfcbd9;
+$theme-aside-item-background-color: transparent;
+// 渚ц竟鏍忎笂鐨勯」鐩湪 hover 鏃�
+$theme-aside-item-color-hover: #bfcbd9;
+$theme-aside-item-background-color-hover: #011527;
+// 渚ц竟鏍忎笂鐨勯」鐩湪 focus 鏃�
+$theme-aside-item-color-focus: #bfcbd9;
+$theme-aside-item-background-color-focus: #202d3d;
+// 渚ц竟鏍忎笂鐨勯」鐩湪 active 鏃�
+$theme-aside-item-color-active: #46a0fc;
+$theme-aside-item-background-color-active: #202d3d;
+
+// 渚ц竟鏍忚彍鍗曚负绌虹殑鏃跺�欐樉绀虹殑鍏冪礌
+$theme-aside-menu-empty-icon-color: #bfcbd9;
+$theme-aside-menu-empty-text-color: #bfcbd9;
+$theme-aside-menu-empty-background-color: #202d3d;
+$theme-aside-menu-empty-icon-color-hover: #46a0fc;
+$theme-aside-menu-empty-text-color-hover: #46a0fc;
+$theme-aside-menu-empty-background-color-hover: #202d3d;
diff --git a/src/assets/style/theme/line/index.scss b/src/assets/style/theme/line/index.scss
new file mode 100644
index 0000000..7b69d57
--- /dev/null
+++ b/src/assets/style/theme/line/index.scss
@@ -0,0 +1,2 @@
+@import './setting.scss';
+@import '../theme.scss';
diff --git a/src/assets/style/theme/line/setting.scss b/src/assets/style/theme/line/setting.scss
new file mode 100644
index 0000000..6962499
--- /dev/null
+++ b/src/assets/style/theme/line/setting.scss
@@ -0,0 +1,64 @@
+// 涓婚鍚嶇О
+$theme-name: 'line';
+// 涓婚鑳屾櫙棰滆壊
+$theme-bg-color: #f8f8f9;
+// 涓婚鑳屾櫙鍥剧墖閬僵
+$theme-bg-mask: rgba(#000, 0);
+
+// 娑堟伅鎻愮ず
+$theme-message-info-background-color: $color-bg;
+$theme-message-info-text-color: $color-text-normal;
+$theme-message-info-border-color: $color-border-1;
+
+// container缁勪欢
+$theme-container-background-color: rgba(#FFF, .8);
+$theme-container-header-footer-background-color: #FFF;
+$theme-container-border-inner: 1px solid $color-border-2;
+$theme-container-border-outer: 1px solid #cfd7e5;
+
+$theme-multiple-page-control-color: #FFF;
+$theme-multiple-page-control-color-active: $color-text-normal;
+$theme-multiple-page-control-nav-prev-color: #cfd7e5;
+$theme-multiple-page-control-nav-next-color: #cfd7e5;
+$theme-multiple-page-control-border-color: #cfd7e5;
+$theme-multiple-page-control-border-color-active: #FFF;
+$theme-multiple-page-control-background-color: #cfd7e5;
+$theme-multiple-page-control-background-color-active: #FFF;
+
+// 椤舵爮鍜屼晶杈规爮涓睍寮�鐨勮彍鍗� hover 鐘舵�佷笅
+$theme-menu-item-color-hover: #293849;
+$theme-menu-item-background-color-hover: #EFEFEF;
+
+// 椤舵爮涓婄殑鏂囧瓧棰滆壊
+$theme-header-item-color: $color-text-normal;
+$theme-header-item-background-color: transparent;
+// 椤舵爮涓婄殑椤圭洰鍦� hover 鏃�
+$theme-header-item-color-hover: $color-text-main;
+$theme-header-item-background-color-hover: rgba(#000, .02);
+// 椤舵爮涓婄殑椤圭洰鍦� focus 鏃�
+$theme-header-item-color-focus: $color-text-main;
+$theme-header-item-background-color-focus: rgba(#000, .02);
+// 椤舵爮涓婄殑椤圭洰鍦� active 鏃�
+$theme-header-item-color-active: $color-text-main;
+$theme-header-item-background-color-active: rgba(#000, .03);
+
+// 渚ц竟鏍忎笂鐨勬枃瀛楅鑹�
+$theme-aside-item-color: $color-text-normal;
+$theme-aside-item-background-color: transparent;
+// 渚ц竟鏍忎笂鐨勯」鐩湪 hover 鏃�
+$theme-aside-item-color-hover: $color-text-main;
+$theme-aside-item-background-color-hover: rgba(#000, .02);
+// 渚ц竟鏍忎笂鐨勯」鐩湪 focus 鏃�
+$theme-aside-item-color-focus: $color-text-main;
+$theme-aside-item-background-color-focus: rgba(#000, .02);
+// 渚ц竟鏍忎笂鐨勯」鐩湪 active 鏃�
+$theme-aside-item-color-active: $color-text-main;
+$theme-aside-item-background-color-active: rgba(#000, .03);
+
+// 渚ц竟鏍忚彍鍗曚负绌虹殑鏃跺�欐樉绀虹殑鍏冪礌
+$theme-aside-menu-empty-icon-color: $color-text-normal;
+$theme-aside-menu-empty-text-color: $color-text-normal;
+$theme-aside-menu-empty-background-color: rgba(#000, .03);
+$theme-aside-menu-empty-icon-color-hover: $color-text-main;
+$theme-aside-menu-empty-text-color-hover: $color-text-main;
+$theme-aside-menu-empty-background-color-hover: rgba(#000, .05);
\ No newline at end of file
diff --git a/src/assets/style/theme/register.scss b/src/assets/style/theme/register.scss
new file mode 100644
index 0000000..e2c76f4
--- /dev/null
+++ b/src/assets/style/theme/register.scss
@@ -0,0 +1,9 @@
+@import '~@/assets/style/theme/theme-base.scss';
+
+@import '~@/assets/style/theme/d2/index.scss';
+@import '~@/assets/style/theme/chester/index.scss';
+@import '~@/assets/style/theme/element/index.scss';
+@import '~@/assets/style/theme/line/index.scss';
+@import '~@/assets/style/theme/star/index.scss';
+@import '~@/assets/style/theme/tomorrow-night-blue/index.scss';
+@import '~@/assets/style/theme/violet/index.scss';
\ No newline at end of file
diff --git a/src/assets/style/theme/star/index.scss b/src/assets/style/theme/star/index.scss
new file mode 100644
index 0000000..7b69d57
--- /dev/null
+++ b/src/assets/style/theme/star/index.scss
@@ -0,0 +1,2 @@
+@import './setting.scss';
+@import '../theme.scss';
diff --git a/src/assets/style/theme/star/setting.scss b/src/assets/style/theme/star/setting.scss
new file mode 100644
index 0000000..38cf867
--- /dev/null
+++ b/src/assets/style/theme/star/setting.scss
@@ -0,0 +1,64 @@
+// 涓婚鍚嶇О
+$theme-name: 'star';
+// 涓婚鑳屾櫙棰滆壊
+$theme-bg-color: #EFF4F8;
+// 涓婚鑳屾櫙鍥剧墖閬僵
+$theme-bg-mask: rgba(#000, .3);
+
+// 娑堟伅鎻愮ず
+$theme-message-info-background-color: $color-bg;
+$theme-message-info-text-color: $color-text-normal;
+$theme-message-info-border-color: $color-border-1;
+
+// container缁勪欢
+$theme-container-background-color: rgba(#FFF, .9);
+$theme-container-header-footer-background-color: #FFF;
+$theme-container-border-inner: 1px solid $color-border-1;
+$theme-container-border-outer: 1px solid #114450;
+
+$theme-multiple-page-control-color: #FFF;
+$theme-multiple-page-control-color-active: $color-text-normal;
+$theme-multiple-page-control-nav-prev-color: #FFF;
+$theme-multiple-page-control-nav-next-color: #FFF;
+$theme-multiple-page-control-border-color: #114450;
+$theme-multiple-page-control-border-color-active: #FFF;
+$theme-multiple-page-control-background-color: rgba(#FFF, .5);
+$theme-multiple-page-control-background-color-active: #FFF;
+
+// 椤舵爮鍜屼晶杈规爮涓睍寮�鐨勮彍鍗� hover 鐘舵�佷笅
+$theme-menu-item-color-hover: #293849;
+$theme-menu-item-background-color-hover: #ecf5ff;
+
+// 椤舵爮涓婄殑鏂囧瓧棰滆壊
+$theme-header-item-color: #FFF;
+$theme-header-item-background-color: transparent;
+// 椤舵爮涓婄殑椤圭洰鍦� hover 鏃�
+$theme-header-item-color-hover: #FFF;
+$theme-header-item-background-color-hover: rgba(#000, .2);
+// 椤舵爮涓婄殑椤圭洰鍦� focus 鏃�
+$theme-header-item-color-focus: #FFF;
+$theme-header-item-background-color-focus: rgba(#000, .2);
+// 椤舵爮涓婄殑椤圭洰鍦� active 鏃�
+$theme-header-item-color-active: #FFF;
+$theme-header-item-background-color-active: rgba(#000, .3);
+
+// 渚ц竟鏍忎笂鐨勬枃瀛楅鑹�
+$theme-aside-item-color: #FFF;
+$theme-aside-item-background-color: transparent;
+// 渚ц竟鏍忎笂鐨勯」鐩湪 hover 鏃�
+$theme-aside-item-color-hover: #FFF;
+$theme-aside-item-background-color-hover: rgba(#000, .2);
+// 渚ц竟鏍忎笂鐨勯」鐩湪 focus 鏃�
+$theme-aside-item-color-focus: #FFF;
+$theme-aside-item-background-color-focus: rgba(#000, .2);
+// 渚ц竟鏍忎笂鐨勯」鐩湪 active 鏃�
+$theme-aside-item-color-active: #FFF;
+$theme-aside-item-background-color-active: rgba(#000, .3);
+
+// 渚ц竟鏍忚彍鍗曚负绌虹殑鏃跺�欐樉绀虹殑鍏冪礌
+$theme-aside-menu-empty-icon-color: #FFF;
+$theme-aside-menu-empty-text-color: #FFF;
+$theme-aside-menu-empty-background-color: rgba(#FFF, .2);
+$theme-aside-menu-empty-icon-color-hover: #FFF;
+$theme-aside-menu-empty-text-color-hover: #FFF;
+$theme-aside-menu-empty-background-color-hover: rgba(#FFF, .3);
\ No newline at end of file
diff --git a/src/assets/style/theme/theme-base.scss b/src/assets/style/theme/theme-base.scss
new file mode 100644
index 0000000..94bb412
--- /dev/null
+++ b/src/assets/style/theme/theme-base.scss
@@ -0,0 +1,474 @@
+// 鍑忓皬寮瑰嚭鑿滃崟鐨勯」鐩珮搴�
+.el-menu--popup {
+ .el-menu-item {
+ height: 36px;
+ line-height: 36px;
+ }
+ .el-submenu__title {
+ height: 36px;
+ line-height: 36px;
+ }
+}
+
+// 鏁翠綋妗嗘灦缁撴瀯
+.d2-layout-header-aside-group {
+ height: 100%;
+ width: 100%;
+ min-width: 900px;
+ background-size: cover;
+ background-position: center;
+ overflow: hidden;
+ position: relative;
+ // 鑳屾櫙涓婇潰鐨勫崐閫忔槑閬僵
+ .d2-layout-header-aside-mask {
+ @extend %full;
+ }
+ // 鍐呭灞�
+ .d2-layout-header-aside-content {
+ @extend %full;
+ .d2-theme-header {
+ height: 50px;
+ .d2-theme-header-menu {
+ overflow: hidden;
+ background: #e6ecf2;
+ // border-bottom: 1px solid #ccc;
+ &.is-scrollable {
+ position: relative;
+ padding: 0 20px;
+ .d2-theme-header-menu__prev,
+ .d2-theme-header-menu__next {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ }
+ }
+ .d2-theme-header-menu__content {
+ overflow: hidden;
+ .d2-theme-header-menu__scroll {
+ white-space: nowrap;
+ position: relative;
+ -webkit-transition: -webkit-transform 0.3s;
+ transition: -webkit-transform 0.3s;
+ transition: transform 0.3s;
+ transition: transform 0.3s, -webkit-transform 0.3s;
+ transition: transform 0.3s, -webkit-transform 0.3s;
+ float: left;
+ }
+ }
+ .d2-theme-header-menu__prev,
+ .d2-theme-header-menu__next {
+ height: 60px;
+ position: absolute;
+ top: 0;
+ font-size: 20px;
+ cursor: pointer;
+ display: none;
+ }
+ .d2-theme-header-menu__prev {
+ left: 0;
+ border-top-left-radius: 2px;
+ border-bottom-left-radius: 2px;
+ }
+ .d2-theme-header-menu__next {
+ right: 0;
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+ }
+ }
+ }
+ .d2-theme-container {
+ .d2-theme-container-aside {
+ position: relative;
+ .d2-layout-header-aside-menu-side {
+ @extend %full;
+ overflow: hidden;
+ }
+ }
+ .d2-theme-container-transition {
+ transition: width 0.3s;
+ }
+ .d2-theme-container-main {
+ padding: 0px;
+ position: relative;
+ overflow: hidden;
+ .d2-theme-container-main-layer {
+ position: absolute;
+ top: 0px;
+ bottom: 0px;
+ left: 0px;
+ right: 0px;
+ }
+ .d2-theme-container-main-body {
+ position: relative;
+ }
+ }
+ }
+ }
+}
+
+// 涓婚鍏敤
+.d2-layout-header-aside-group {
+ &.grayMode {
+ -webkit-filter: grayscale(100%);
+ -moz-filter: grayscale(100%);
+ -ms-filter: grayscale(100%);
+ -o-filter: grayscale(100%);
+ filter: grayscale(100%);
+ filter: gray;
+ }
+ // 涓讳綋
+ .d2-layout-header-aside-content {
+ // [甯冨眬] 椤舵爮
+ .d2-theme-header {
+ // logo鍖哄煙
+ .logo-group {
+ float: left;
+ text-align: center;
+ img {
+ height: 60px;
+ }
+ }
+ .logo-transition {
+ transition: width 0.3s;
+ }
+ // 鎶樺彔渚ц竟鏍忓垏鎹㈡寜閽�
+ .toggle-aside-btn {
+ border-bottom: #ccc 1px solid;
+ background: #e6ecf2;
+ float: left;
+ height: 50px;
+ padding-left:20px;
+ width:auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-family: PingFangSC-Medium, sans-serif;
+ @extend %unable-select;
+ i {
+ font-size: 20px;
+ margin-top: 4px;
+ }
+ }
+ // [鑿滃崟] 椤舵爮
+ .el-menu {
+ float: left;
+ border-bottom: none;
+ background-color: transparent;
+ %header-menu-item {
+ @extend %unable-select;
+ i.fa {
+ font-size: 16px;
+ margin-right: 4px;
+ }
+ }
+ .el-menu-item {
+ @extend %header-menu-item;
+ border-bottom: none;
+ }
+ .el-submenu {
+ @extend %header-menu-item;
+ .el-submenu__title {
+ border-bottom: none;
+ }
+ }
+ }
+ // 椤舵爮鍙充晶鐨勬寜閽�
+ .d2-header-right {
+ // border-bottom: 10px solid #ccc !important;
+ background: #e6ecf2;
+ float: right;
+ height: 50px;
+ padding-right:20px;
+ display: flex;
+ align-items: center;
+ .btn-text {
+ padding: 14px 12px;
+ border-radius: 4px;
+ margin: 0px !important;
+ &.el-color-picker.el-color-picker--mini {
+ padding: 9px 6px;
+ }
+ }
+ .el-dropdown {
+ @extend %unable-select;
+ }
+ }
+ }
+ // [甯冨眬] 椤舵爮涓嬮潰
+ .d2-theme-container {
+ // 渚ц竟鏍�
+ .d2-theme-container-aside {
+ %d2-theme-container-aside-menu-icon {
+ width: 20px;
+ text-align: center;
+ font-size: 16px;
+ }
+ // [鑿滃崟] 姝ｅ父鐘舵��
+ .el-menu {
+ @extend %unable-select;
+ background-color: transparent;
+ border-right: none;
+ .el-menu-item {
+ i {
+ @extend %d2-theme-container-aside-menu-icon;
+ }
+ }
+ }
+ .el-submenu {
+ @extend %unable-select;
+ .el-submenu__title {
+ padding:0 15px!important;
+ i {
+ @extend %d2-theme-container-aside-menu-icon;
+ }
+ .el-submenu__icon-arrow {
+ margin-top: -10px;
+ right: 10px;
+ }
+ }
+ }
+ // 鑿滃崟涓虹┖鐨勬椂鍊欐樉绀虹殑淇℃伅
+ .d2-layout-header-aside-menu-empty {
+ height: 160px;
+ margin: 10px;
+ margin-top: 0px;
+ border-radius: 4px;
+ @extend %unable-select;
+ i {
+ font-size: 30px;
+ margin-bottom: 10px;
+ }
+ span {
+ font-size: 14px;
+ }
+ }
+ // [鑿滃崟] 鎶樺彔鐘舵��
+ .el-menu--collapse {
+ background-color: transparent;
+ .el-submenu__title {
+ text-align: center;
+ }
+ }
+ }
+ // 鍙充笅 涓讳綋
+ .d2-theme-container-main {
+ // 涓讳綋閮ㄥ垎鍒嗕负澶氶〉闈㈡帶鍒跺櫒 鍜屼富浣�
+ .d2-theme-container-main-header {
+ height: 41px;
+ // 澶氶〉闈㈡帶鍒跺櫒
+ .d2-multiple-page-control-group {
+ padding-right: 20px;
+ .d2-multiple-page-control-content {
+ overflow: auto;
+ position: relative;
+ .d2-multiple-page-control-content-inner {
+ .d2-multiple-page-control {
+ .el-tabs__header.is-top {
+ margin: 0px;
+ }
+ .el-tabs__nav {
+ overflow: hidden;
+ }
+ }
+ }
+ }
+ .d2-multiple-page-control-btn {
+ position: relative;
+ bottom: -1px;
+ .el-dropdown {
+ .el-button-group {
+ .el-button:first-child {
+ border-bottom-left-radius: 0px;
+ }
+ .el-button:last-child {
+ border-bottom-right-radius: 0px;
+ }
+ }
+ }
+ }
+ }
+ }
+ // 涓讳綋
+ .d2-theme-container-main-body {
+ // 甯冨眬缁勪欢
+ .container-component {
+ @extend %full;
+ background: #e6ecf2;
+ overflow: hidden;
+ // 濉厖寮忓竷灞�缁勪欢
+ .d2-container-full {
+ border: none;
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ bottom: 0px;
+ left: 0px;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ .d2-container-full__header {
+ padding: 20px;
+ border-radius: 12px;
+ width: calc(100% - 80px);
+ margin: 0 auto;
+ // height: 72px;
+ }
+ .d2-container-full__body {
+ flex-grow: 1;
+ height: calc(100% - 110px);
+ padding: 10px 20px;
+ // overflow: auto;
+ position: relative;
+ background-color: #e6ecf2;
+ }
+ .d2-container-full__footer {
+ padding: 20px;
+ }
+ }
+ // 濉厖寮忓竷灞�缁勪欢 - 婊氬姩浼樺寲
+ .d2-container-full-bs {
+ position: absolute;
+ top: 0px;
+ right: 20px;
+ bottom: 0px;
+ left: 0px;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ .d2-container-full-bs__header {
+ padding: 20px;
+ }
+ .d2-container-full-bs__body {
+ flex-grow: 1;
+ overflow: hidden;
+ position: relative;
+ .d2-container-full-bs__body-wrapper-inner {
+ padding: 20px;
+ position: relative;
+ }
+ }
+ .d2-container-full-bs__footer {
+ padding: 20px;
+ }
+ }
+ // 闅愬舰甯冨眬缁勪欢
+ .d2-container-ghost {
+ position: absolute;
+ top: 0px;
+ right: 20px;
+ bottom: 0px;
+ left: 0px;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ .d2-container-ghost__header {
+ padding: 20px;
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ }
+ .d2-container-ghost__body {
+ flex-grow: 1;
+ overflow: auto;
+ position: relative;
+ }
+ .d2-container-ghost__footer {
+ padding: 20px;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ }
+ }
+ // 闅愬舰甯冨眬缁勪欢 - 婊氬姩浼樺寲
+ .d2-container-ghost-bs {
+ position: absolute;
+ top: 0px;
+ right: 20px;
+ bottom: 0px;
+ left: 0px;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ .d2-container-ghost-bs__header {
+ padding: 20px;
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ }
+ .d2-container-ghost-bs__body {
+ flex-grow: 1;
+ overflow: hidden;
+ position: relative;
+ }
+ .d2-container-ghost-bs__footer {
+ padding: 20px;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ }
+ }
+ // 鍗＄墖寮忓竷灞�缁勪欢
+ .d2-container-card {
+ position: absolute;
+ top: 0px;
+ right: 20px;
+ bottom: 0px;
+ left: 0px;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ .d2-container-card__header {
+ padding: 20px;
+ }
+ .d2-container-card__body {
+ flex-grow: 1;
+ overflow: auto;
+ .d2-container-card__body-card {
+ position: relative;
+ margin-bottom: 20px;
+ padding: 20px;
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ }
+ }
+ .d2-container-card__footer {
+ padding: 20px;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ }
+ }
+ // 鍗＄墖寮忓竷灞�缁勪欢 - 婊氬姩浼樺寲
+ .d2-container-card-bs {
+ position: absolute;
+ top: 0px;
+ right: 20px;
+ bottom: 0px;
+ left: 0px;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ .d2-container-card-bs__header {
+ padding: 20px;
+ }
+ .d2-container-card-bs__body {
+ position: relative;
+ flex-grow: 1;
+ overflow: hidden;
+ .d2-container-card-bs__body-wrapper-inner {
+ padding-bottom: 20px;
+ }
+ .d2-container-card-bs__body-card {
+ position: relative;
+ padding: 20px;
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ }
+ }
+ .d2-container-card-bs__footer {
+ padding: 20px;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/assets/style/theme/theme.scss b/src/assets/style/theme/theme.scss
new file mode 100644
index 0000000..7682d41
--- /dev/null
+++ b/src/assets/style/theme/theme.scss
@@ -0,0 +1,441 @@
+// 姣忎釜涓婚鐗规湁鐨勮缃�
+.theme-#{$theme-name} {
+ .el-message {
+ &.el-message--info {
+ background-color: $theme-message-info-background-color;
+ color: $theme-message-info-text-color;
+ border-color: $theme-message-info-border-color;
+ }
+ }
+
+ .el-card {
+ &.d2-card {
+ border: $theme-container-border-outer;
+ .el-card__header {
+ border-bottom: $theme-container-border-outer;
+ }
+ }
+ }
+
+ // 鑳屾櫙鍥剧墖鍜岄伄缃�
+ .d2-layout-header-aside-group {
+ background-color: $theme-bg-color;
+ .d2-layout-header-aside-mask {
+ background: $theme-bg-mask;
+ }
+ }
+
+ // 鑿滃崟椤圭洰
+ @mixin theme-menu-hover-style {
+ color: $theme-menu-item-color-hover;
+ i.fa {
+ color: $theme-menu-item-color-hover;
+ }
+ background: $theme-menu-item-background-color-hover;
+ }
+ %el-menu-icon {
+ i {
+ display: inline-block;
+ width: 14px;
+ text-align: center;
+ margin-right: 5px;
+ }
+ svg {
+ margin: 0px;
+ height: 14px;
+ width: 14px;
+ margin-right: 5px;
+ }
+ }
+ .el-submenu__title {
+ @extend %unable-select;
+ @extend %el-menu-icon;
+ }
+ ::v-deep .el-submenu__title {
+ padding:0 15px!important;
+ }
+ .el-menu-item {
+ @extend %unable-select;
+ @extend %el-menu-icon;
+ }
+ .el-submenu__title:hover {
+ @include theme-menu-hover-style;
+ }
+ .el-menu-item:hover {
+ @include theme-menu-hover-style;
+ }
+ .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
+ @include theme-menu-hover-style;
+ }
+ .el-menu--horizontal .el-menu .el-submenu__title:hover {
+ @include theme-menu-hover-style;
+ }
+
+ // 椤舵爮
+ .d2-theme-header {
+ // border-bottom: 1px solid #ccc;
+ // 椤舵爮鑿滃崟绌洪棿涓嶈冻鏃舵樉绀虹殑婊氬姩鎺т欢
+ .d2-theme-header-menu {
+ .d2-theme-header-menu__prev,
+ .d2-theme-header-menu__next {
+ color: $theme-header-item-color;
+ background: $theme-header-item-background-color;
+ &:hover {
+ color: $theme-header-item-color-hover;
+ background: $theme-header-item-background-color-hover;
+ }
+ }
+ }
+ // 鍒囨崲鎸夐挳
+ .toggle-aside-btn {
+ i {
+ color: $theme-header-item-color;
+ background: $theme-header-item-background-color;
+ &:hover {
+ color: $theme-header-item-color-hover;
+ }
+ }
+ }
+ // 椤舵爮鑿滃崟
+ .el-menu {
+ .el-menu-item {
+ transition: border-top-color 0s;
+ color: $theme-header-item-color;
+ background: $theme-header-item-background-color;
+ i.fa {
+ color: inherit;
+ }
+ &:hover {
+ color: $theme-header-item-color-hover;
+ background: $theme-header-item-background-color-hover;
+ i.fa {
+ color: inherit;
+ }
+ }
+ &:focus {
+ color: $theme-header-item-color-focus;
+ background: $theme-header-item-background-color-focus;
+ i.fa {
+ color: inherit;
+ }
+ }
+ &.is-active {
+ color: $theme-header-item-color-active;
+ background: $theme-header-item-background-color-active;
+ i.fa {
+ color: inherit;
+ }
+ }
+ }
+ .el-submenu {
+ &.is-active {
+ .el-submenu__title {
+ color: $theme-header-item-color-active;
+ background: $theme-header-item-background-color-active;
+ i.fa {
+ color: inherit;
+ }
+ }
+ }
+ .el-submenu__title {
+ transition: border-top-color 0s;
+ color: $theme-header-item-color;
+ background: $theme-header-item-background-color;
+ i.fa {
+ color: inherit;
+ }
+ .el-submenu__icon-arrow {
+ color: $theme-header-item-color;
+ }
+ &:hover {
+ color: $theme-header-item-color-hover;
+ background: $theme-header-item-background-color-hover;
+ i.fa {
+ color: inherit;
+ }
+ .el-submenu__icon-arrow {
+ color: $theme-header-item-color-hover;
+ }
+ }
+ &:focus {
+ color: $theme-header-item-color-focus;
+ background: $theme-header-item-background-color-focus;
+ i.fa {
+ color: inherit;
+ }
+ .el-submenu__icon-arrow {
+ color: $theme-header-item-color-focus;
+ }
+ }
+ }
+ }
+ }
+ // 椤舵爮鍙充晶
+ .d2-header-right {
+ .btn-text {
+ color: $theme-header-item-color;
+ &.can-hover {
+ &:hover {
+ color: $theme-header-item-color-hover;
+ background: $theme-header-item-background-color-hover;
+ }
+ }
+ }
+ }
+ }
+ // [甯冨眬] 椤舵爮涓嬮潰
+ .d2-theme-container {
+ // 渚ц竟鏍�
+ .d2-theme-container-aside {
+ // 鑿滃崟涓虹┖鐨勬椂鍊欐樉绀虹殑淇℃伅
+ .d2-layout-header-aside-menu-empty {
+ background: $theme-aside-menu-empty-background-color;
+ i {
+ color: $theme-aside-menu-empty-icon-color;
+ }
+ span {
+ color: $theme-aside-menu-empty-text-color;
+ }
+ &:hover {
+ background: $theme-aside-menu-empty-background-color-hover;
+ i {
+ color: $theme-aside-menu-empty-icon-color-hover;
+ }
+ span {
+ color: $theme-aside-menu-empty-text-color-hover;
+ }
+ }
+ }
+ // [鑿滃崟] 姝ｅ父鐘舵��
+ .el-menu {
+ .el-menu-item {
+ color: $theme-aside-item-color;
+ background: $theme-aside-item-background-color;
+ i {
+ color: $theme-aside-item-color;
+ }
+ &:hover {
+ color: $theme-aside-item-color-hover;
+ fill: $theme-aside-item-color-hover;
+ background: $theme-aside-item-background-color-hover;
+ i {
+ color: $theme-aside-item-color-hover;
+ }
+ }
+ &:focus {
+ color: $theme-aside-item-color-focus;
+ fill: $theme-aside-item-color-focus;
+ background: $theme-aside-item-background-color-focus;
+ i {
+ color: $theme-aside-item-color-focus;
+ }
+ }
+ &.is-active {
+ color: $theme-aside-item-color-active;
+ fill: $theme-aside-item-color-active;
+ background: $theme-aside-item-background-color-active;
+ i {
+ color: $theme-aside-item-color-active;
+ }
+ }
+ }
+ }
+ .el-submenu {
+ .el-submenu__title {
+ color: $theme-aside-item-color;
+ background: $theme-aside-item-background-color;
+ i {
+ color: $theme-aside-item-color;
+ }
+ .el-submenu__icon-arrow {
+ color: $theme-aside-item-color;
+ }
+ &:hover {
+ color: $theme-aside-item-color-hover;
+ background: $theme-aside-item-background-color-hover;
+ i {
+ color: $theme-aside-item-color-hover;
+ }
+ .el-submenu__icon-arrow {
+ color: $theme-aside-item-color-hover;
+ }
+ }
+ }
+ }
+ }
+ .d2-theme-container-main {
+ // 涓讳綋閮ㄥ垎鍒嗕负澶氶〉闈㈡帶鍒跺櫒 鍜屼富浣�
+ .d2-theme-container-main-header {
+ // 澶氶〉闈㈡帶鍒跺櫒
+ .d2-multiple-page-control {
+ .el-tabs__header.is-top {
+ border-bottom-color: $theme-multiple-page-control-border-color;
+ }
+ .el-tabs__nav {
+ border-color: $theme-multiple-page-control-border-color;
+ .el-tabs__item {
+ @extend %unable-select;
+ color: $theme-multiple-page-control-color;
+ background-color: $theme-multiple-page-control-background-color;
+
+ &:first-child {
+ border-left: none;
+ &:hover {
+ padding: 0px 20px;
+ }
+ }
+ }
+ .el-tabs__item.is-active {
+ color: $theme-multiple-page-control-color-active;
+ background-color: $theme-multiple-page-control-background-color-active;
+ border-bottom-color: $theme-multiple-page-control-border-color-active;
+ }
+ }
+ %el-tabs__nav {
+ font-size: 20px;
+ }
+ .el-tabs__nav-prev {
+ @extend %el-tabs__nav;
+ color: $theme-multiple-page-control-nav-prev-color;
+ }
+ .el-tabs__nav-next {
+ @extend %el-tabs__nav;
+ color: $theme-multiple-page-control-nav-next-color;
+ }
+ }
+ // 澶氶〉鎺у埗鍣ㄧ殑鍏抽棴鎺у埗
+ .d2-multiple-page-control-btn {
+ .el-dropdown {
+ .el-button-group {
+ .el-button {
+ border-color: $theme-multiple-page-control-border-color;
+ }
+ }
+ }
+ }
+ }
+ // 涓讳綋
+ .d2-theme-container-main-body {
+ // 甯冨眬缁勪欢
+ .container-component {
+ // [缁勪欢]
+ // d2-container-full 濉厖鍨�
+ .d2-container-full {
+ border: $theme-container-border-outer;
+ border-top: none;
+ border-bottom: none;
+ .d2-container-full__header {
+ border-bottom: $theme-container-border-inner;
+ background: $theme-container-header-footer-background-color;
+ }
+ .d2-container-full__body {
+ background: $theme-container-background-color;
+ }
+ .d2-container-full__footer {
+ border-top: $theme-container-border-inner;
+ background: $theme-container-header-footer-background-color;
+ }
+ }
+ // [缁勪欢]
+ // d2-container-full-bs 濉厖鍨� 婊氬姩浼樺寲
+ .d2-container-full-bs {
+ border: $theme-container-border-outer;
+ border-top: none;
+ border-bottom: none;
+ .d2-container-full-bs__header {
+ border-bottom: $theme-container-border-inner;
+ background: $theme-container-header-footer-background-color;
+ }
+ .d2-container-full-bs__body {
+ background: $theme-container-background-color;
+ }
+ .d2-container-full-bs__footer {
+ border-top: $theme-container-border-inner;
+ background: $theme-container-header-footer-background-color;
+ }
+ }
+ // [缁勪欢]
+ // d2-container-ghost 闅愬舰甯冨眬缁勪欢
+ .d2-container-ghost {
+ .d2-container-ghost__header {
+ border-bottom: $theme-container-border-outer;
+ border-left: $theme-container-border-outer;
+ border-right: $theme-container-border-outer;
+ background: $theme-container-header-footer-background-color;
+ }
+ .d2-container-ghost__footer {
+ border-top: $theme-container-border-outer;
+ border-left: $theme-container-border-outer;
+ border-right: $theme-container-border-outer;
+ background: $theme-container-header-footer-background-color;
+ }
+ }
+ // [缁勪欢]
+ // d2-container-ghost-bs 闅愬舰甯冨眬缁勪欢 婊氬姩浼樺寲
+ .d2-container-ghost-bs {
+ .d2-container-ghost-bs__header {
+ border-bottom: $theme-container-border-outer;
+ border-left: $theme-container-border-outer;
+ border-right: $theme-container-border-outer;
+ background: $theme-container-header-footer-background-color;
+ }
+ .d2-container-ghost-bs__footer {
+ border-top: $theme-container-border-outer;
+ border-left: $theme-container-border-outer;
+ border-right: $theme-container-border-outer;
+ background: $theme-container-header-footer-background-color;
+ }
+ }
+ // [缁勪欢]
+ // d2-container-card 鍗＄墖鍨�
+ .d2-container-card {
+ .d2-container-card__header {
+ border-bottom: $theme-container-border-inner;
+ border-left: $theme-container-border-outer;
+ border-right: $theme-container-border-outer;
+ background: $theme-container-header-footer-background-color;
+ }
+ .d2-container-card__body {
+ .d2-container-card__body-card {
+ background: $theme-container-background-color;
+ border-left: $theme-container-border-outer;
+ border-right: $theme-container-border-outer;
+ border-bottom: $theme-container-border-outer;
+ }
+ }
+ .d2-container-card__footer {
+ border-top: $theme-container-border-outer;
+ border-left: $theme-container-border-outer;
+ border-right: $theme-container-border-outer;
+ background: $theme-container-header-footer-background-color;
+ }
+ }
+ // [缁勪欢]
+ // d2-container-card-bs 鍗＄墖鍨� 婊氬姩浼樺寲
+ .d2-container-card-bs {
+ .d2-container-card-bs__header {
+ border-bottom: $theme-container-border-inner;
+ border-left: $theme-container-border-outer;
+ border-right: $theme-container-border-outer;
+ background: $theme-container-header-footer-background-color;
+ }
+ .d2-container-card-bs__body {
+ .d2-container-card-bs__body-card {
+ background: $theme-container-background-color;
+ border-left: $theme-container-border-outer;
+ border-right: $theme-container-border-outer;
+ border-bottom: $theme-container-border-outer;
+ }
+ }
+ .d2-container-card-bs__footer {
+ border-top: $theme-container-border-outer;
+ border-left: $theme-container-border-outer;
+ border-right: $theme-container-border-outer;
+ background: $theme-container-header-footer-background-color;
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/assets/style/theme/tomorrow-night-blue/index.scss b/src/assets/style/theme/tomorrow-night-blue/index.scss
new file mode 100644
index 0000000..7b69d57
--- /dev/null
+++ b/src/assets/style/theme/tomorrow-night-blue/index.scss
@@ -0,0 +1,2 @@
+@import './setting.scss';
+@import '../theme.scss';
diff --git a/src/assets/style/theme/tomorrow-night-blue/setting.scss b/src/assets/style/theme/tomorrow-night-blue/setting.scss
new file mode 100644
index 0000000..1f59ca8
--- /dev/null
+++ b/src/assets/style/theme/tomorrow-night-blue/setting.scss
@@ -0,0 +1,64 @@
+// 涓婚鍚嶇О
+$theme-name: 'tomorrow-night-blue';
+// 涓婚鑳屾櫙棰滆壊
+$theme-bg-color: #002253;
+// 涓婚鑳屾櫙鍥剧墖閬僵
+$theme-bg-mask: rgba(#000, 0);
+
+// 娑堟伅鎻愮ず
+$theme-message-info-background-color: $color-bg;
+$theme-message-info-text-color: $color-text-normal;
+$theme-message-info-border-color: $color-border-1;
+
+// container缁勪欢
+$theme-container-background-color: rgba(#FFF, 1);
+$theme-container-header-footer-background-color: #FFF;
+$theme-container-border-inner: 1px solid $color-border-1;
+$theme-container-border-outer: 1px solid #002253;
+
+$theme-multiple-page-control-color: #FFF;
+$theme-multiple-page-control-color-active: $color-text-normal;
+$theme-multiple-page-control-nav-prev-color: #FFF;
+$theme-multiple-page-control-nav-next-color: #FFF;
+$theme-multiple-page-control-border-color: #002253;
+$theme-multiple-page-control-border-color-active: #FFF;
+$theme-multiple-page-control-background-color: rgba(#FFF, .2);
+$theme-multiple-page-control-background-color-active: #FFF;
+
+// 椤舵爮鍜屼晶杈规爮涓睍寮�鐨勮彍鍗� hover 鐘舵�佷笅
+$theme-menu-item-color-hover: #293849;
+$theme-menu-item-background-color-hover: #ecf5ff;
+
+// 椤舵爮涓婄殑鏂囧瓧棰滆壊
+$theme-header-item-color: #FF929A;
+$theme-header-item-background-color: transparent;
+// 椤舵爮涓婄殑椤圭洰鍦� hover 鏃�
+$theme-header-item-color-hover: #FFEBA4;
+$theme-header-item-background-color-hover: rgba(#FFF, .05);
+// 椤舵爮涓婄殑椤圭洰鍦� focus 鏃�
+$theme-header-item-color-focus: #FFB870;
+$theme-header-item-background-color-focus: rgba(#FFF, .05);
+// 椤舵爮涓婄殑椤圭洰鍦� active 鏃�
+$theme-header-item-color-active: #FFB870;
+$theme-header-item-background-color-active: rgba(#FFF, .05);
+
+// 渚ц竟鏍忎笂鐨勬枃瀛楅鑹�
+$theme-aside-item-color: #FF929A;
+$theme-aside-item-background-color: transparent;
+// 渚ц竟鏍忎笂鐨勯」鐩湪 hover 鏃�
+$theme-aside-item-color-hover: #FFEBA4;
+$theme-aside-item-background-color-hover: rgba(#FFF, .05);
+// 渚ц竟鏍忎笂鐨勯」鐩湪 focus 鏃�
+$theme-aside-item-color-focus: #FFB870;
+$theme-aside-item-background-color-focus: rgba(#FFF, .05);
+// 渚ц竟鏍忎笂鐨勯」鐩湪 active 鏃�
+$theme-aside-item-color-active: #FFB870;
+$theme-aside-item-background-color-active: rgba(#FFF, .05);
+
+// 渚ц竟鏍忚彍鍗曚负绌虹殑鏃跺�欐樉绀虹殑鍏冪礌
+$theme-aside-menu-empty-icon-color: #FFB870;
+$theme-aside-menu-empty-text-color: #FFB870;
+$theme-aside-menu-empty-background-color: rgba(#FFF, .1);
+$theme-aside-menu-empty-icon-color-hover: #FFEBA4;
+$theme-aside-menu-empty-text-color-hover: #FFEBA4;
+$theme-aside-menu-empty-background-color-hover: rgba(#FFF, .2);
\ No newline at end of file
diff --git a/src/assets/style/theme/violet/index.scss b/src/assets/style/theme/violet/index.scss
new file mode 100644
index 0000000..753f026
--- /dev/null
+++ b/src/assets/style/theme/violet/index.scss
@@ -0,0 +1,9 @@
+@import './setting.scss';
+@import '../theme.scss';
+
+.theme-#{$theme-name} {
+ .d2-layout-header-aside-group {
+ background: #bc00e3;
+ background: linear-gradient(120deg, #bc00e3 0%, #4EFFFB 100%);
+ }
+}
\ No newline at end of file
diff --git a/src/assets/style/theme/violet/setting.scss b/src/assets/style/theme/violet/setting.scss
new file mode 100644
index 0000000..9101095
--- /dev/null
+++ b/src/assets/style/theme/violet/setting.scss
@@ -0,0 +1,64 @@
+// 涓婚鍚嶇О
+$theme-name: 'violet';
+// 涓婚鑳屾櫙棰滆壊
+$theme-bg-color: #000;
+// 涓婚鑳屾櫙鍥剧墖閬僵
+$theme-bg-mask: rgba(#000, 0);
+
+// 娑堟伅鎻愮ず
+$theme-message-info-background-color: $color-bg;
+$theme-message-info-text-color: $color-text-normal;
+$theme-message-info-border-color: $color-border-1;
+
+// container缁勪欢
+$theme-container-background-color: #FFF;
+$theme-container-header-footer-background-color: #FFF;
+$theme-container-border-inner: 1px solid $color-border-2;
+$theme-container-border-outer: 1px solid #8C40E2;
+
+$theme-multiple-page-control-color: #FFF;
+$theme-multiple-page-control-color-active: $color-text-normal;
+$theme-multiple-page-control-nav-prev-color: #FFF;
+$theme-multiple-page-control-nav-next-color: #FFF;
+$theme-multiple-page-control-border-color: #8C40E2;
+$theme-multiple-page-control-border-color-active: #FFF;
+$theme-multiple-page-control-background-color: rgba(#FFF, .3);
+$theme-multiple-page-control-background-color-active: #FFF;
+
+// 椤舵爮鍜屼晶杈规爮涓睍寮�鐨勮彍鍗� hover 鐘舵�佷笅
+$theme-menu-item-color-hover: #293849;
+$theme-menu-item-background-color-hover: #ecf5ff;
+
+// 椤舵爮涓婄殑鏂囧瓧棰滆壊
+$theme-header-item-color: #FFF;
+$theme-header-item-background-color: transparent;
+// 椤舵爮涓婄殑椤圭洰鍦� hover 鏃�
+$theme-header-item-color-hover: #FFF;
+$theme-header-item-background-color-hover: linear-gradient(-180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.12) 100%);
+// 椤舵爮涓婄殑椤圭洰鍦� focus 鏃�
+$theme-header-item-color-focus: #FFF;
+$theme-header-item-background-color-focus: linear-gradient(-180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.12) 100%);
+// 椤舵爮涓婄殑椤圭洰鍦� active 鏃�
+$theme-header-item-color-active: #FFF;
+$theme-header-item-background-color-active: linear-gradient(-180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.12) 100%);
+
+// 渚ц竟鏍忎笂鐨勬枃瀛楅鑹�
+$theme-aside-item-color: #FFF;
+$theme-aside-item-background-color: transparent;
+// 渚ц竟鏍忎笂鐨勯」鐩湪 hover 鏃�
+$theme-aside-item-color-hover: #FFF;
+$theme-aside-item-background-color-hover: linear-gradient(90deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.00) 100%);
+// 渚ц竟鏍忎笂鐨勯」鐩湪 focus 鏃�
+$theme-aside-item-color-focus: #FFF;
+$theme-aside-item-background-color-focus: linear-gradient(90deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.00) 100%);
+// 渚ц竟鏍忎笂鐨勯」鐩湪 active 鏃�
+$theme-aside-item-color-active: #FFF;
+$theme-aside-item-background-color-active: linear-gradient(90deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.00) 100%);
+
+// 渚ц竟鏍忚彍鍗曚负绌虹殑鏃跺�欐樉绀虹殑鍏冪礌
+$theme-aside-menu-empty-icon-color: #FFF;
+$theme-aside-menu-empty-text-color: #FFF;
+$theme-aside-menu-empty-background-color: rgba(#000, .1);
+$theme-aside-menu-empty-icon-color-hover: #FFF;
+$theme-aside-menu-empty-text-color-hover: #FFF;
+$theme-aside-menu-empty-background-color-hover: rgba(#000, .15);
\ No newline at end of file
diff --git a/src/assets/style/unit/color.scss b/src/assets/style/unit/color.scss
new file mode 100644
index 0000000..3f1ad83
--- /dev/null
+++ b/src/assets/style/unit/color.scss
@@ -0,0 +1,23 @@
+// 涓昏壊
+$color-primary: #2a78fb;
+
+// 杈呭姪鑹�
+$color-info: #909399;
+$color-success: #67c23a;
+$color-warning: #e6a23c;
+$color-danger: #f56c6c;
+
+// 鏂囧瓧
+$color-text-main: #303133;
+$color-text-normal: #606266;
+$color-text-sub: #909399;
+$color-text-placehoder: #c0c4cc;
+
+// 杈规
+$color-border-1: #dcdfe6;
+$color-border-2: #e4e7ed;
+$color-border-3: #ebeef5;
+$color-border-4: #f2f6fc;
+
+// 鑳屾櫙
+$color-bg: #f8f8f9;
diff --git a/src/router/index.js b/src/router/index.js
index 3d55cb9..0256619 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,11 +1,12 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
-import Home from "../views/home/index.vue";
+import Home from "@/views/home/index.vue";
+import Login from "@/views/login/Login.vue";
Vue.use(VueRouter);
const routes = [
{
path:"/",
- redirect:"/home/audioAnalysis"
+ redirect:"/login"
},
{
path:"/home",
@@ -24,6 +25,11 @@
component:()=>import('@/views/home/components/uploadAudio/index.vue')
},
]
+ },
+ {
+ path:'/login',
+ name:'鐧诲綍',
+ component:Login
}
];
const mode = process.env.NODE_ENV==='testing'||'production'?'hash':'history';
diff --git a/src/views/home/components/audioAnalysis/components/Analysis.vue b/src/views/home/components/audioAnalysis/components/Analysis.vue
index 43e0f4f..49ae743 100644
--- a/src/views/home/components/audioAnalysis/components/Analysis.vue
+++ b/src/views/home/components/audioAnalysis/components/Analysis.vue
@@ -89,7 +89,7 @@
{
title: '澶╃┖涔嬪煄',
artist: '榛勫彾',
- url: `${publicPath}audio/test.mp3`,
+ //url: `${publicPath}audio/test.mp3`,
pic: `${publicPath}images/audio/u230.png`,
lrc: '[00:12.09]浣滆瘝锛氭灄澶昜00:12.33]浣滄洸锛氬緪浼熻搐[00:14.40]瀵规垜濂藉鎴戝ソ'
}
diff --git a/src/views/home/components/audioAnalysis/index.vue b/src/views/home/components/audioAnalysis/index.vue
index 260ac1b..89571d1 100644
--- a/src/views/home/components/audioAnalysis/index.vue
+++ b/src/views/home/components/audioAnalysis/index.vue
@@ -3,9 +3,6 @@
<div class="search">
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="">
- <el-input v-model="whereTrain.keyword" size="small" placeholder="璇疯緭鍏ュ徃鏈猴紝杞︽锛岃溅鍙风瓑鍏抽敭瀛楄繘琛屾悳绱�" style="width: 300px"></el-input>
- </el-form-item>
- <el-form-item label="">
<el-date-picker
v-model="searchDateTime"
type="daterange"
@@ -18,8 +15,10 @@
:picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
- <el-form-item>
- <el-button @click="searchCar" size="mini" type="primary" style="border:none;background-color: rgba(24, 144, 255, 1)">鎼滅储</el-button>
+ <el-form-item label="">
+ <el-input v-model="whereTrain.keyword" size="small" placeholder="璇疯緭鍏ュ徃鏈猴紝杞︽锛岃溅鍙风瓑鍏抽敭瀛楄繘琛屾悳绱�" style="width: 340px;position: relative;top:5px">
+ <el-button slot="append" @click="searchCar" icon="el-icon-search" type="primary"></el-button>
+ </el-input>
</el-form-item>
</el-form>
</div>
diff --git a/src/views/login/Login.vue b/src/views/login/Login.vue
new file mode 100644
index 0000000..9d96dde
--- /dev/null
+++ b/src/views/login/Login.vue
@@ -0,0 +1,164 @@
+<template>
+ <div class="login-container">
+ <div class="login-form">
+ <div class="title">鐧诲綍</div>
+ <div class="form">
+ <el-form :model="user" :rules="rules" ref="loginForm" class="demo-ruleForm">
+ <el-form-item label="" prop="name" class="user-name">
+ <el-input placeholder="鐢ㄦ埛" v-model="user.name"></el-input>
+ </el-form-item>
+ <el-form-item label="" prop="password" class="user-pwd">
+ <el-input type="password"show-password placeholder="瀵嗙爜" v-model="user.password"></el-input>
+ </el-form-item>
+ <!--<el-form-item label="" prop="code" class="user-code">
+ <el-input placeholder="楠岃瘉鐮�" v-model="user.code">
+ <template slot="append">
+ <img class="login-code" :src="captcha" @click="getCaptchaData"/>
+ </template>
+ </el-input>
+ </el-form-item>-->
+ <el-form-item label="" class="user-button">
+ <el-button type="primary" @click="submit">鐧诲綍</el-button>
+ </el-form-item>
+ </el-form>
+ <!--<div style="text-align: right" class="user-text">
+ <span>娉ㄥ唽</span><span>|</span><span>蹇樿瀵嗙爜</span>
+ </div>-->
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+ import {getCaptchaApi} from '@/api';
+ export default {
+ name: "Login",
+ data(){
+ return {
+ captchaId:"",
+ captcha:"",
+ user:{
+ name:'',
+ password:'',
+ code:''
+ },
+ rules: {
+ name: [
+ {
+ required: true,
+ message: "璇疯緭鍏ョ敤鎴峰悕",
+ trigger: "blur",
+ },
+ ],
+ password: [
+ {
+ required: true,
+ message: "璇疯緭鍏ュ瘑鐮�",
+ trigger: "blur",
+ },
+ ],
+ code: [
+ {
+ required: true,
+ message: "璇疯緭鍏ラ獙璇佺爜",
+ trigger: "blur",
+ },
+ ],
+ },
+ }
+ },
+ methods:{
+ async getCaptchaData(){
+ const {code,data} =await getCaptchaApi();
+ if (code == 200) {
+ this.captchaId = data.captchaId;
+ this.captcha = data.picPath;
+ }
+ },
+ submit(){
+ this.$refs.loginForm.validate((valid) => {
+ if(valid){
+ if(this.user.name==="admin" && this.user.password==="admin"){
+ this.$message.success("鐧诲綍鎴愬姛");
+ setTimeout(()=>{
+ this.$router.push('/home/audioAnalysis',()=>{})
+ },500);
+ }else{
+ this.$message.error("鐢ㄦ埛鍚嶆垨鑰呭瘑鐮侀敊璇�,璇烽噸鏂拌緭鍏�!");
+ }
+ }
+ });
+ }
+ },
+ mounted(){
+ this.getCaptchaData();
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ .login-container{
+ height: 100vh;
+ width: 100vw;
+ background: url("@/assets/images/login/audio-login.png") no-repeat 0px 0px;
+ background-size: cover;
+ .login-form{
+ width: 431px;
+ height: 340px;
+ left: 8%;
+ top: calc(50% - 260px);
+ position: absolute;
+ background: #fafbff;
+ opacity: .9;
+ border-radius: 24px;
+ padding: 35px 36px;
+ text-align: center;
+ font-size: 36px;
+ line-height: 48px;
+ color: #181f30;
+ .form{
+ margin-top: 20px;
+ .user-name,.user-pwd,.user-code,.user-button{
+ width: 359px;
+ margin: 30px auto;
+ ::v-deep{
+ .el-input__inner{
+ height: 48px;
+ }
+ .el-button{
+ width: 359px;
+ height: 48px;
+ font-size: 16px;
+ line-height: 20px;
+ font-family: PingFangSC-Medium,sans-serif;
+ }
+ .el-button--primary {
+ color: #fff;
+ background-color: #2a78fb!important;
+ border-color: #2a78fb!important;
+ }
+ }
+ }
+ .login-code{
+ width: 100px;
+ }
+ .user-text{
+ margin-top: -20px;
+ span{
+ font-family: PingFangSC-Medium, sans-serif;
+ color: #181f30 !important;
+ font-size: 14px;
+ line-height: 20px;
+ font-weight: bold;
+ &:hover{
+ cursor: pointer;
+ }
+ }
+ span:nth-child(3){
+ margin-right: 40px;
+ }
+ }
+ }
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/src/views/login/image/audio-login.png b/src/views/login/image/audio-login.png
new file mode 100644
index 0000000..eabf7aa
--- /dev/null
+++ b/src/views/login/image/audio-login.png
Binary files differ
diff --git a/src/views/login/image/liantong-logo@2x.png b/src/views/login/image/liantong-logo@2x.png
new file mode 100644
index 0000000..c8753d1
--- /dev/null
+++ b/src/views/login/image/liantong-logo@2x.png
Binary files differ
diff --git a/src/views/login/image/login-code.png b/src/views/login/image/login-code.png
new file mode 100644
index 0000000..14bf592
--- /dev/null
+++ b/src/views/login/image/login-code.png
Binary files differ
diff --git a/src/views/login/image/logo@2x.png b/src/views/login/image/logo@2x.png
new file mode 100644
index 0000000..b6ab7cc
--- /dev/null
+++ b/src/views/login/image/logo@2x.png
Binary files differ
diff --git a/src/views/login/image/logo@2x1.png b/src/views/login/image/logo@2x1.png
new file mode 100644
index 0000000..f37e187
--- /dev/null
+++ b/src/views/login/image/logo@2x1.png
Binary files differ
diff --git a/vue.config.js b/vue.config.js
index 2b0aabc..2344871 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -22,12 +22,15 @@
}
},
proxy:{
+ // "/api/base": {
+ // target: 'http://aps.fai365.com:9080',
+ // //娉細 鏆傛椂浣跨敤====鐢ㄦ埗鏉冮檺锛岃鑹叉殏鏃剁敤鐨勭幆澧�
+ // // target: "http://192.168.20.119:8011",
+ // changeOrigin: true,
+ // },
[process.env.VUE_APP_BASE_API]:{
target: process.env.VUE_APP_BASE_URL,
changeOrigin: true,
- // pathRewrite: {
- // ['^'+process.env.VUE_APP_BASE_API]: ''
- // }
}
}
}
--
Gitblit v1.8.0