fix:增加一个登录功能

charles

2024-05-21 5ffbec0a33a49c698699646ab71ddb3ad1ea310c

fix:增加一个登录功能

 public/images/login/login.png

 public/images/login/login2.png

 src/api/index.js

@@ -1,4 +1,5 @@
export * from './modules/text';
export * from './modules/audio';
export * from './modules/train';
export * from "./modules/login";


 src/api/modules/login.js

New file
@@ -0,0 +1,9 @@
import {request} from '@/utils'

// 获取验证码
export function getCaptchaApi() {
    return request({
        url: "http://aps.fai365.com:9080/api/base/captcha",
        method: "POST",
    });
}

 src/assets/font/demo.css

New file
@@ -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;
}

 src/assets/font/demo_index.html

New file
@@ -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">&#xeb63;</span>
                <div class="name">关联设备</div>
                <div class="code-name">&amp;#xeb63;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe901;</span>
                <div class="name">闭眼睛</div>
                <div class="code-name">&amp;#xe901;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec89;</span>
                <div class="name">硬件</div>
                <div class="code-name">&amp;#xec89;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c7;</span>
                <div class="name">眼睛</div>
                <div class="code-name">&amp;#xe8c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">焊接件工序线路卡</div>
                <div class="code-name">&amp;#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 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.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"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</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">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</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">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</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>

 src/assets/font/fonts/DIN.css

New file
@@ -0,0 +1,4 @@
@font-face {
    font-family: "DIN Alternate";
    src: url("./DIN_Alternate.ttf");
}

 src/assets/font/fonts/DIN_Alternate.ttf

Binary files differ

 src/assets/font/iconfont.css

New file
@@ -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";
}


 src/assets/font/iconfont.js

New file
@@ -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);

 src/assets/font/iconfont.json

New file
@@ -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
    }
  ]
}

 src/assets/font/iconfont.svg

New file
@@ -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="&#60259;" 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="&#59649;" 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="&#59591;" 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>

 src/assets/font/iconfont.ttf

Binary files differ

 src/assets/font/iconfont.woff

Binary files differ

 src/assets/font/iconfont.woff2

Binary files differ

 src/assets/images/login/audio-login.png

 src/assets/images/login/login.png

 src/assets/images/login/login2.png

 src/assets/style/animate/vue-transition.scss

New file
@@ -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);
}

 src/assets/style/fixed/base.scss

New file
@@ -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;
    }
  }
}

 src/assets/style/fixed/element.scss

New file
@@ -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;
}

 src/assets/style/fixed/markdown.scss

New file
@@ -0,0 +1,9 @@
// markdown 样式补丁
.markdown-body {
  ul {
    list-style: disc;
  }
  h1, h2 {
    border-bottom: none;
  }
}

 src/assets/style/fixed/n-progress.scss

New file
@@ -0,0 +1,8 @@
#nprogress {
  .bar {
    background: $color-primary !important;
  }
  .peg {
    box-shadow: 0 0 10px $color-primary, 0 0 5px $color-primary !important;
  }
}

 src/assets/style/fixed/tree-view.scss

New file
@@ -0,0 +1,5 @@
.tree-view-wrapper.tree-view-small {
  .tree-view-item {
    font-size: 10px;
  }
}

 src/assets/style/fixed/vue-grid-layout.scss

New file
@@ -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;
  }
}

 src/assets/style/fixed/vue-splitpane.scss

New file
@@ -0,0 +1,5 @@
// vue-splitpane 样式补丁
.splitter-pane-resizer {
  background-color: $color-border-1 !important;
  opacity: 1 !important;
}

 src/assets/style/index.scss

New file
@@ -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;
  }
}

 src/assets/style/public-class.scss

New file
@@ -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';

// 在这里写公用的class
// 注意 这个文件里只写class
// 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; }

 src/assets/style/public.scss

New file
@@ -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;
}

 src/assets/style/theme/chester/index.scss

New file
@@ -0,0 +1,2 @@
@import './setting.scss';
@import '../theme.scss';

 src/assets/style/theme/chester/setting.scss

New file
@@ -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;

 src/assets/style/theme/d2/index.scss

New file
@@ -0,0 +1,2 @@
@import './setting.scss';
@import '../theme.scss';

 src/assets/style/theme/d2/setting.scss

New file
@@ -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;

 src/assets/style/theme/element/index.scss

New file
@@ -0,0 +1,2 @@
@import './setting.scss';
@import '../theme.scss';

 src/assets/style/theme/element/setting.scss

New file
@@ -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;

 src/assets/style/theme/line/index.scss

New file
@@ -0,0 +1,2 @@
@import './setting.scss';
@import '../theme.scss';

 src/assets/style/theme/line/setting.scss

New file
@@ -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);

 src/assets/style/theme/register.scss

New file
@@ -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';

 src/assets/style/theme/star/index.scss

New file
@@ -0,0 +1,2 @@
@import './setting.scss';
@import '../theme.scss';

 src/assets/style/theme/star/setting.scss

New file
@@ -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);

 src/assets/style/theme/theme-base.scss

New file
@@ -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;
              }
            }
          }
        }
      }
    }
  }
}

 src/assets/style/theme/theme.scss

New file
@@ -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;
            }
          }
        }
      }
    }
  }
}

 src/assets/style/theme/tomorrow-night-blue/index.scss

New file
@@ -0,0 +1,2 @@
@import './setting.scss';
@import '../theme.scss';

 src/assets/style/theme/tomorrow-night-blue/setting.scss

New file
@@ -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);

 src/assets/style/theme/violet/index.scss

New file
@@ -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%);
  }
}

 src/assets/style/theme/violet/setting.scss

New file
@@ -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);

 src/assets/style/unit/color.scss

New file
@@ -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;

 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';

 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]对我好对我好'
                    }

 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>

 src/views/login/Login.vue

New file
@@ -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>

 src/views/login/image/audio-login.png

 src/views/login/image/liantong-logo@2x.png

 src/views/login/image/login-code.png

 src/views/login/image/logo@2x.png

 src/views/login/image/logo@2x1.png

 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]: ''
                // }
            }
        }
    }