代码提交

src/assets/gaoJ.svg

@@ -0,0 +1 @@
+<?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 t="1752714800249" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2803" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M959.800889 318.762667a30.364444 30.364444 0 0 1-11.377778 41.543111l-98.133333 56.632889-30.222222-52.864 94.435555-56.632889a47.872 47.872 0 0 1 22.641778-3.783111 34.688 34.688 0 0 1 22.656 15.104z m-898.844445 0c4.48-6.968889 11.107556-12.273778 18.887112-15.104a24.974222 24.974222 0 0 1 22.656 3.783111l94.435555 56.632889-30.222222 52.864-94.421333-56.632889a30.364444 30.364444 0 0 1-11.377778-41.543111h0.042666zM249.799111 129.962667a47.900444 47.900444 0 0 1 22.656-3.783111 37.688889 37.688889 0 0 1 18.887111 15.104l56.661334 94.407111-52.878223 30.208-56.647111-94.407111a30.364444 30.364444 0 0 1 11.377778-41.528889h-0.056889zM513.848889 56.888889a37.105778 37.105778 0 0 1 36.636444 31.530667v109.511111h-70.570666v-109.511111C476.131556 73.315556 494.961778 56.888889 513.848889 56.888889z m253.383111 73.073778a30.364444 30.364444 0 0 1 11.377778 41.528889l-56.647111 94.407111-52.878223-30.208 56.647112-94.407111a66.304 66.304 0 0 1 18.887111-15.104c7.552 0 18.887111 0 22.656 3.783111h-0.042667zM533.020444 409.329778L378.168889 665.614222h124.629333l-30.222222 181.902222 162.247111-252.387555h-132.024889l30.222222-185.799111z m-271.928888 483.100444h-64.782223V594.360889c1.521778-172.103111 141.952-310.556444 314.055111-309.632A308.48 308.48 0 0 1 819.868444 594.346667v298.069333H261.091556z m-169.955556 0H933.404444a37.12 37.12 0 0 1 33.991112 37.603556 33.877333 33.877333 0 0 1-33.991112 33.991111H91.164444a33.848889 33.848889 0 0 1-33.991111-33.991111 37.12 37.12 0 0 1 33.991111-37.603556" fill="#323233" p-id="2804"></path></svg>

src/assets/icon/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/assets/icon/demo_index.html

@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4977098" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60c;</span>
+                <div class="name">告警</div>
+                <div class="code-name">&amp;#xe60c;</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.woff2?t=1752716651599') format('woff2'),
+       url('iconfont.woff?t=1752716651599') format('woff'),
+       url('iconfont.ttf?t=1752716651599') 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-gaojing"></span>
+            <div class="name">
+              告警
+            </div>
+            <div class="code-name">.icon-gaojing
+            </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-gaojing"></use>
+                </svg>
+                <div class="name">告警</div>
+                <div class="code-name">#icon-gaojing</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/icon/iconfont.css

@@ -0,0 +1,19 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4977098 */
+  src: url('iconfont.woff2?t=1752716651599') format('woff2'),
+       url('iconfont.woff?t=1752716651599') format('woff'),
+       url('iconfont.ttf?t=1752716651599') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-gaojing:before {
+  content: "\e60c";
+}
+

src/assets/icon/iconfont.js

@@ -0,0 +1 @@
+window._iconfont_svg_string_4977098='<svg><symbol id="icon-gaojing" viewBox="0 0 1024 1024"><path d="M959.800889 318.762667a30.364444 30.364444 0 0 1-11.377778 41.543111l-98.133333 56.632889-30.222222-52.864 94.435555-56.632889a47.872 47.872 0 0 1 22.641778-3.783111 34.688 34.688 0 0 1 22.656 15.104z m-898.844445 0c4.48-6.968889 11.107556-12.273778 18.887112-15.104a24.974222 24.974222 0 0 1 22.656 3.783111l94.435555 56.632889-30.222222 52.864-94.421333-56.632889a30.364444 30.364444 0 0 1-11.377778-41.543111h0.042666zM249.799111 129.962667a47.900444 47.900444 0 0 1 22.656-3.783111 37.688889 37.688889 0 0 1 18.887111 15.104l56.661334 94.407111-52.878223 30.208-56.647111-94.407111a30.364444 30.364444 0 0 1 11.377778-41.528889h-0.056889zM513.848889 56.888889a37.105778 37.105778 0 0 1 36.636444 31.530667v109.511111h-70.570666v-109.511111C476.131556 73.315556 494.961778 56.888889 513.848889 56.888889z m253.383111 73.073778a30.364444 30.364444 0 0 1 11.377778 41.528889l-56.647111 94.407111-52.878223-30.208 56.647112-94.407111a66.304 66.304 0 0 1 18.887111-15.104c7.552 0 18.887111 0 22.656 3.783111h-0.042667zM533.020444 409.329778L378.168889 665.614222h124.629333l-30.222222 181.902222 162.247111-252.387555h-132.024889l30.222222-185.799111z m-271.928888 483.100444h-64.782223V594.360889c1.521778-172.103111 141.952-310.556444 314.055111-309.632A308.48 308.48 0 0 1 819.868444 594.346667v298.069333H261.091556z m-169.955556 0H933.404444a37.12 37.12 0 0 1 33.991112 37.603556 33.877333 33.877333 0 0 1-33.991112 33.991111H91.164444a33.848889 33.848889 0 0 1-33.991111-33.991111 37.12 37.12 0 0 1 33.991111-37.603556" fill="#323233" ></path></symbol></svg>',(n=>{var t=(e=(e=document.getElementsByTagName("script"))[e.length-1]).getAttribute("data-injectcss"),e=e.getAttribute("data-disable-injectsvg");if(!e){var o,i,a,c,d,l=function(t,e){e.parentNode.insertBefore(t,e)};if(t&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}o=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4977098,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?l(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),o()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(a=o,c=n.document,d=!1,r(),c.onreadystatechange=function(){"complete"==c.readyState&&(c.onreadystatechange=null,s())})}function s(){d||(d=!0,a())}function r(){try{c.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}s()}})(window);

src/assets/icon/iconfont.json

@@ -0,0 +1,16 @@
+{
+  "id": "4977098",
+  "name": "北京暂降平台",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "36284864",
+      "name": "告警",
+      "font_class": "gaojing",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    }
+  ]
+}

src/assets/scss/SagTraceResult_WX.scss

@@ -0,0 +1,198 @@
+#index {
+  color: #d3d6dd;
+  width: 1920px;
+  height: 1080px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: left top;
+  .bg {
+    width: 100%;
+    height: 100%;
+    padding: 16px 16px 0 16px;
+    background-image: url("../../assets/pageBg.png");
+    background-size: cover;
+    background-position: center center;
+  }
+  .headerBox {
+    width: 100%;
+    height: 124px;
+    background-image: url("../../assets/download.png");
+    background-size: cover;
+    background-position: center center;
+  }
+  .secondLine {
+    position: absolute;
+    right: 20px;
+    top: 30px;
+  }
+  .host-body {
+    //头部样式
+    .dv-dec-10,
+    .dv-dec-10-s {
+      width: 33.3%;
+      height: 5px;
+    }
+    .dv-dec-10-s {
+      transform: rotateY(180deg);
+    }
+    .dv-dec-8 {
+      width: 200px;
+      height: 50px;
+    }
+    .title {
+      position: relative;
+      width: 500px;
+      text-align: center;
+      background-size: cover;
+      background-repeat: no-repeat;
+
+      .title-text {
+        width: 100%;
+        font-size: 35px;
+        position: absolute;
+        line-height: 35px;
+        top: 10px;
+        left: 50%;
+        font-weight: 700;
+        transform: translate(-50%);
+      }
+
+      .dv-dec-6 {
+        position: absolute;
+        bottom: -30px;
+        left: 50%;
+        width: 250px;
+        height: 8px;
+        transform: translate(-50%);
+      }
+    }
+
+    // 第二行
+
+    .react-r-s,
+    .react-l-s {
+      background-color: #0f1325;
+    }
+
+    // 平行四边形
+    .react-right {
+      &.react-l-s {
+        text-align: right;
+        width: 150px;
+      }
+      font-size: 18px;
+      width: 200px;
+      line-height: 30px;
+      text-align: center;
+      transform: skewX(-45deg);
+
+      .react-after {
+        position: absolute;
+        right: -25px;
+        top: 0;
+        height: 24px;
+        width: 50px;
+        background-color: #0f1325;
+        transform: skewX(45deg);
+      }
+
+      .text {
+        display: inline-block;
+        transform: skewX(45deg);
+      }
+    }
+
+    // .react-left {
+    //   &.react-l-s {
+    //     width: 500px;
+    //     text-align: left;
+    //   }
+    //   font-size: 18px;
+    //   width: 100px;
+    //   height: 50px;
+    //   line-height: 50px;
+    //   text-align: center;
+    //   transform: skewX(45deg);
+    //   background-color: #0f1325;
+
+    //   .react-before {
+    //     position: absolute;
+    //     left: -25px;
+    //     top: 0;
+    //     height: 50px;
+    //     width: 50px;
+    //     background-color: #0f1325;
+    //     transform: skewX(-45deg);
+    //   }
+
+    //   .text {
+    //     display: inline-block;
+    //     transform: skewX(-45deg);
+    //   }
+    // }
+
+    .body-box {
+      margin-top: 10px;
+      display: flex;
+      flex-direction: column;
+
+      //下方区域的布局
+      .content-box {
+        display: grid;
+        gap: 5px;
+        grid-template-columns: 3fr 1fr;
+        // grid-template-columns: 1fr 2fr 1fr;
+      }
+      //下方区域的布局
+      .content-left {
+        display: grid;
+        gap: 5px;
+        grid-template-rows: 1fr, 2fr;
+        // grid-template-columns: 1fr 2fr 1fr;
+      }
+      // 底部数据
+      .bototm-box {
+        margin-top: 5px;
+        display: grid;
+        gap: 5px;
+        grid-template-columns: 1fr 2fr 1fr;
+      }
+    }
+  }
+  .dv-border-box-13 {
+    padding: 20px 10px 0 10px;
+  }
+  .writing {
+    text-decoration: underline;
+    color: #ffcc00;
+    cursor: pointer;
+    margin-right: 20px;
+    white-space: nowrap;
+  }
+  .titleBox {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    line-height: 32px;
+    font-size: 18px;
+    padding-left: 20px;
+    margin: 0 auto;
+    // background-image: url("@/assets/img/title.png");
+    // background-size: cover;
+    // background-position: center center;
+    background: linear-gradient(
+      90deg,
+      #cccccc80 0%,
+      #1d83ce70 1%,
+      #1d83ce50 35%,
+      #1d83ce30 70%,
+      #1d83ce10 100% /* 活力橙 */
+    );
+  }
+
+
+
+  
+}

src/assets/scss/_variables.scss

@@ -0,0 +1,97 @@
+// 颜色
+$colors: (
+  "primary": #db9e3f,
+  "info-1": #4394e4,
+  "info": #4b67af,
+  "white": #ffffff,
+  "light": #f9f9f9,
+  "grey-1": #999999,
+  "grey": #666666,
+  "dark-1": #5f5f5f,
+  "dark": #222222,
+  "black-1": #171823,
+  "black": #000000,
+);
+
+// 字体大小
+$base-font-size: 16px;
+$font-sizes: (
+  xxs: 0.1,
+  //8px
+    xs: 0.125,
+  //10px
+    sm: 0.2875,
+  //12px
+    md: 0.1625,
+  //13px
+    lg: 0.175,
+  //14px
+    xl: 0.2,
+  //16px
+    xxl: 0.225,
+  //18px
+    xxxl: 0.25 //20px,,,,
+);
+
+// 宽高
+.w-100 {
+  width: 100%;
+}
+.h-100 {
+  height: 100%;
+}
+
+//flex
+.d-flex {
+  display: flex;
+}
+.flex-column {
+  flex-direction: column;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+$flex-jc: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  between: space-between,
+  around: space-around,
+  evenly: space-evenly,
+);
+
+$flex-ai: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  stretch: stretch,
+);
+
+.flex-1 {
+  flex: 1;
+}
+
+//.mt-1 => margin top
+//spacing
+$spacing-types: (
+  m: margin,
+  p: padding,
+);
+$spacing-directions: (
+  t: top,
+  r: right,
+  b: bottom,
+  l: left,
+);
+$spacing-base-size: 16px;
+$spacing-sizes: (
+  0: 0,
+  1: 0.25,
+  2: 0.5,
+  3: 1,
+  4: 1.5,
+  5: 3,
+);

src/assets/scss/element.scss

@@ -0,0 +1,101 @@
+  :deep(.el-dialog__body) {
+    color: #fff !important;
+    padding: 10px;
+  }
+
+  :deep(.el-form-item__label) {
+    color: #fff !important;
+  }
+  :deep(.el-dialog__header) {
+    padding: 10px;
+    background-color: #21232b;
+    border-bottom: 1px solid #fff;
+  }
+  :deep(.el-dialog__footer) {
+    padding: 0 10px 10px !important;
+  }
+
+  :deep(.el-descriptions__label.el-descriptions__cell) {
+    background: #0a73ff40 !important;
+    color: #fff !important;
+    font-weight: bold;
+  }
+  :deep(.el-descriptions) {
+    --el-descriptions-table-border: 1px solid #0a73ff;
+    .el-descriptions__content.el-descriptions__cell.is-bordered-content {
+      color: #fff;
+    }
+    .el-descriptions__body {
+      background-color: #00000050;
+    }
+  }
+  :deep(.tableBox) {
+    padding: 10px;
+    .el-table {
+      --el-table-border-color: #0a73ff;
+      --el-table-row-hover-bg-color: #0a73ff20;
+      --el-table-header-bg-color: #0a73ff40;
+      --el-table-bg-color: #ffffff00;
+      text-align: center;
+      // th {
+      //   background-color: #0a73ff;
+      //   color: #fff;
+      // }
+      tr {
+        background-color: #00000050 !important;
+        color: #fff;
+      }
+    }
+  }
+  :deep(
+      .el-table--striped
+        .el-table__body
+        tr.el-table__row--striped
+        td.el-table__cell
+    ) {
+    background: #5aa1ff29;
+  }
+  .titles {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    margin-left: 20px;
+
+    div {
+      background-color: #0a73ff70;
+      color: #ccc;
+      cursor: pointer;
+      &:nth-child(1) {
+        margin-right: 10px;
+      }
+    }
+    .titleClick {
+      background-color: #0a73ff;
+      color: #fff;
+    }
+  }
+  :deep(.el-dialog) {
+    --el-dialog-bg-color: #343849c7 !important;
+    padding: 0px;
+    --el-dialog-margin-top: 8vh;
+    .el-dialog__title,
+    .el-dialog__close {
+      color: #fff;
+    }
+  }
+  :deep(.el-drawer) {
+    --el-drawer-bg-color: #343849c7;
+    color: #fff;
+    .el-drawer__header {
+      // background-color: #21232b;
+      background-color: #9f1700;
+    }
+  }
+  :deep(.el-pagination) {
+    .el-pagination__total,
+    .el-pagination__goto,
+    .el-pagination__classifier {
+      color: #fff;
+    }
+    // --el-text-color-regular: #fff;
+  }

src/assets/scss/index.css

@@ -0,0 +1,348 @@
+@charset "UTF-8";
+#index {
+  color: #d3d6dd;
+  width: 1920px;
+  height: 1080px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: left top;
+  --el-text-color-primary: #9b9b9b;
+}
+
+#index .bg {
+  width: 100%;
+  height: 100%;
+  padding: 16px 16px 0 16px;
+  background-image: url("../../assets/pageBg.png");
+  background-size: cover;
+  background-position: center center;
+}
+
+#index .headerBox {
+  width: 100%;
+  height: 124px;
+  background-image: url("../../assets/download.png");
+  background-size: cover;
+  background-position: center center;
+}
+
+#index .secondLine {
+  position: absolute;
+  right: 20px;
+  top: 30px;
+}
+
+#index .host-body .dv-dec-10,
+#index .host-body .dv-dec-10-s {
+  width: 33.3%;
+  height: 5px;
+}
+
+#index .host-body .dv-dec-10-s {
+  transform: rotateY(180deg);
+}
+
+#index .host-body .dv-dec-8 {
+  width: 200px;
+  height: 50px;
+}
+
+#index .host-body .title {
+  position: relative;
+  width: 500px;
+  text-align: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+#index .host-body .title .title-text {
+  width: 100%;
+  font-size: 35px;
+  position: absolute;
+  line-height: 35px;
+  top: 10px;
+  left: 50%;
+  font-weight: 700;
+  transform: translate(-50%);
+}
+
+#index .host-body .title .dv-dec-6 {
+  position: absolute;
+  bottom: -30px;
+  left: 50%;
+  width: 250px;
+  height: 8px;
+  transform: translate(-50%);
+}
+
+#index .host-body .react-r-s,
+#index .host-body .react-l-s {
+  background-color: #0f1325;
+}
+
+#index .host-body .react-right {
+  font-size: 15px;
+  width: 200px;
+  line-height: 30px;
+  text-align: center;
+  transform: skewX(-45deg);
+}
+
+#index .host-body .react-right.react-l-s {
+  text-align: right;
+  width: 150px;
+}
+
+#index .host-body .react-right .react-after {
+  position: absolute;
+  right: -25px;
+  top: 0;
+  height: 24px;
+  width: 50px;
+  background-color: #0f1325;
+  transform: skewX(45deg);
+}
+
+#index .host-body .react-right .text {
+  display: inline-block;
+  transform: skewX(45deg);
+}
+
+#index .host-body .body-box {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+}
+
+#index .host-body .body-box .content-box {
+  display: grid;
+  gap: 5px;
+  grid-template-columns: 1fr 2fr 1fr;
+}
+
+#index .host-body .body-box .bototm-box {
+  margin-top: 5px;
+  display: grid;
+  gap: 5px;
+  grid-template-columns: 1fr 2fr 1fr;
+}
+
+#index .dv-border-box-13 {
+  padding: 20px 10px 0 10px;
+}
+
+#index .writing {
+  text-decoration: underline;
+  color: #daa520;
+  cursor: pointer;
+  margin-right: 20px;
+  white-space: nowrap;
+}
+
+#index .titleBox {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  line-height: 32px;
+  font-size: 18px;
+  padding-left: 20px;
+  margin: 0 auto;
+  background-image: url("@/assets/img/title.png");
+  background-size: cover;
+  background-position: center center;
+}
+
+.el-form-item {
+  margin-bottom: 10px;
+}
+
+/* 呼吸闪烁的容器样式 红色*/
+.bg-red {
+  /* 设置初始的边框样式 */
+  /* 添加呼吸动画 */
+  animation: breathing_red 2s ease-in-out infinite;
+}
+
+/* 定义呼吸动画 */
+@keyframes breathing_red {
+  0% {
+    /* 开始时边框颜色较淡 */
+    border-color: rgba(255, 0, 0, 0.3);
+    box-shadow: inset 0 0 50px rgba(255, 0, 0, 0.2);
+  }
+  50% {
+    /* 中间时边框颜色最深 */
+    border-color: red;
+    box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.8);
+  }
+  100% {
+    /* 结束时边框颜色回到较淡状态 */
+    border-color: rgba(255, 0, 0, 0.3);
+    box-shadow: inset 0 0 50px rgba(255, 0, 0, 0.2);
+  }
+}
+
+/* 呼吸闪烁的容器样式 */
+.bg-yellow {
+  /* 设置初始的边框样式 */
+  /* 添加呼吸动画 */
+  animation: breathing_yellow 2s ease-in-out infinite;
+}
+
+/* 定义呼吸动画 */
+@keyframes breathing_yellow {
+  0% {
+    /* 开始时边框颜色较淡 */
+    border-color: rgba(255, 219, 0, 0.3);
+    box-shadow: inset 0 0 50px rgba(255, 219, 0, 0.2);
+  }
+  50% {
+    /* 中间时边框颜色最深 */
+    border-color: #ffdb00;
+    box-shadow: inset 0 0 100px rgba(255, 219, 0, 0.8);
+  }
+  100% {
+    /* 结束时边框颜色回到较淡状态 */
+    border-color: rgba(255, 219, 0, 0.3);
+    box-shadow: inset 0 0 50px rgba(255, 219, 0, 0.2);
+  }
+}
+
+.scroll-box {
+  width: 1820px;
+  height: 40px;
+  padding: 10px 15px;
+  overflow: hidden;
+  position: relative;
+  left: 50px;
+}
+
+.scroll-content {
+  position: absolute;
+  white-space: nowrap;
+  animation: scroll 0s linear infinite;
+  /* 根据内容长度调整动画时间 */
+  padding-left: 100%;
+  /* 初始位置偏移 */
+}
+
+@keyframes scroll {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+/* 闪烁动画定义 */
+@keyframes flash {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+    /* 半透明效果实现闪烁 */
+  }
+}
+
+.animate-flash-red {
+  animation: flash 1s infinite;
+  /* 1秒周期，无限循环 */
+  color: #ff2501;
+  cursor: pointer;
+}
+
+.animate-flash-yellow {
+  animation: flash 1s infinite;
+  /* 1秒周期，无限循环 */
+  color: #bb7b00;
+  cursor: pointer;
+}
+
+/* 悬停暂停效果 */
+.scroll-box:hover .scroll-content {
+  animation-play-state: paused;
+}
+
+:deep(.el-divider--horizontal) {
+  margin: 10px 0;
+}
+
+@keyframes step-scale {
+  0% {
+    transform: scale(1.2);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  /* 突变时放大 */
+  100% {
+    transform: scale(1.2);
+  }
+  /* 稳定后保持放大 */
+}
+
+.step-scale {
+  animation: step-scale 1s infinite;
+  /* forwards保持最终状态 */
+  text-align: center;
+  color: #ff0000;
+  /* 警告色 */
+}
+
+div {
+  /* 滚动条轨道 */
+  /* 滚动条滑块hover状态 */
+}
+
+div::-webkit-scrollbar {
+  width: 6px;
+  /* 滚动条宽度 */
+}
+
+div::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  /* 滑块圆角 */
+  background: rgba(204, 204, 204, 0.8);
+  /* 设置滚动条轨道背景色 */
+  cursor: pointer;
+  transition: var(--el-transition-duration) background-color;
+}
+
+div::-webkit-scrollbar-thumb:hover {
+  background: rgba(204, 204, 204, 0.5);
+  /* 设置滚动条轨道背景色 */
+}
+
+div .el-divider--horizontal {
+  border-top: 1px var(--el-color-primary) var(--el-border-style);
+}
+
+:deep(.el-input-group__append, .el-input-group__prepend) {
+  background-color: #ffffff00;
+}
+
+:deep(.frontBox) {
+  background-color: var(--el-color-primary) !important;
+  color: #fff !important;
+}
+
+::v-deep(.el-tabs__item) {
+  color: #fff;
+}
+
+::v-deep(.el-tabs__item.is-active) {
+  color: var(--el-color-primary);
+}
+
+::v-deep(.el-tabs__nav-wrap::after) {
+  color: var(--el-color-primary);
+}
+
+::v-deep(.el-tabs__active-bar) {
+  color: var(--el-color-primary);
+}

src/assets/scss/index.min.css

@@ -0,0 +1 @@
+#index{color:#d3d6dd;width:1920px;height:1080px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);transform-origin:left top;--el-text-color-primary:#9b9b9b}#index .bg{width:100%;height:100%;padding:16px 16px 0 16px;background-image:url("../../assets/pageBg.png");background-size:cover;background-position:center center}#index .headerBox{width:100%;height:124px;background-image:url("../../assets/download.png");background-size:cover;background-position:center center}#index .secondLine{position:absolute;right:20px;top:30px}#index .host-body .dv-dec-10,#index .host-body .dv-dec-10-s{width:33.3%;height:5px}#index .host-body .dv-dec-10-s{transform:rotateY(180deg)}#index .host-body .dv-dec-8{width:200px;height:50px}#index .host-body .title{position:relative;width:500px;text-align:center;background-size:cover;background-repeat:no-repeat}#index .host-body .title .title-text{width:100%;font-size:35px;position:absolute;line-height:35px;top:10px;left:50%;font-weight:700;transform:translate(-50%)}#index .host-body .title .dv-dec-6{position:absolute;bottom:-30px;left:50%;width:250px;height:8px;transform:translate(-50%)}#index .host-body .react-r-s,#index .host-body .react-l-s{background-color:#0f1325}#index .host-body .react-right{font-size:15px;width:200px;line-height:30px;text-align:center;transform:skewX(-45deg)}#index .host-body .react-right.react-l-s{text-align:right;width:150px}#index .host-body .react-right .react-after{position:absolute;right:-25px;top:0;height:24px;width:50px;background-color:#0f1325;transform:skewX(45deg)}#index .host-body .react-right .text{display:inline-block;transform:skewX(45deg)}#index .host-body .body-box{margin-top:10px;display:flex;flex-direction:column}#index .host-body .body-box .content-box{display:grid;gap:5px;grid-template-columns:1fr 2fr 1fr}#index .host-body .body-box .bototm-box{margin-top:5px;display:grid;gap:5px;grid-template-columns:1fr 2fr 1fr}#index .dv-border-box-13{padding:20px 10px 0 10px}#index .writing{text-decoration:underline;color:#daa520;cursor:pointer;margin-right:20px;white-space:nowrap}#index .titleBox{display:flex;justify-content:space-between;width:100%;line-height:32px;font-size:18px;padding-left:20px;margin:0 auto;background-image:url("@/assets/img/title.png");background-size:cover;background-position:center center}.el-form-item{margin-bottom:10px}.bg-red{animation:breathing_red 2s ease-in-out infinite}@keyframes breathing_red{0%{border-color:rgba(255,0,0,0.3);box-shadow:inset 0 0 50px rgba(255,0,0,0.2)}50%{border-color:red;box-shadow:inset 0 0 100px rgba(255,0,0,0.8)}100%{border-color:rgba(255,0,0,0.3);box-shadow:inset 0 0 50px rgba(255,0,0,0.2)}}.bg-yellow{animation:breathing_yellow 2s ease-in-out infinite}@keyframes breathing_yellow{0%{border-color:rgba(255,219,0,0.3);box-shadow:inset 0 0 50px rgba(255,219,0,0.2)}50%{border-color:#ffdb00;box-shadow:inset 0 0 100px rgba(255,219,0,0.8)}100%{border-color:rgba(255,219,0,0.3);box-shadow:inset 0 0 50px rgba(255,219,0,0.2)}}.scroll-box{width:1820px;height:40px;padding:10px 15px;overflow:hidden;position:relative;left:50px}.scroll-content{position:absolute;white-space:nowrap;animation:scroll 0s linear infinite;padding-left:100%}@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}@keyframes flash{0%,100%{opacity:1}50%{opacity:0.3}}.animate-flash-red{animation:flash 1s infinite;color:#ff2501;cursor:pointer}.animate-flash-yellow{animation:flash 1s infinite;color:#bb7b00;cursor:pointer}.scroll-box:hover .scroll-content{animation-play-state:paused}:deep(.el-divider--horizontal){margin:10px 0}@keyframes step-scale{0%{transform:scale(1.2)}50%{transform:scale(1.2)}100%{transform:scale(1.2)}}.step-scale{animation:step-scale 1s infinite;text-align:center;color:#ff0000}div::-webkit-scrollbar{width:6px}div::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(204,204,204,0.8);cursor:pointer;transition:var(--el-transition-duration) background-color}div::-webkit-scrollbar-thumb:hover{background:rgba(204,204,204,0.5)}div .el-divider--horizontal{border-top:1px var(--el-color-primary) var(--el-border-style)}:deep(.el-input-group__append,.el-input-group__prepend){background-color:#ffffff00}:deep(.frontBox){background-color:var(--el-color-primary) !important;color:#fff !important}::v-deep(.el-tabs__item){color:#fff}::v-deep(.el-tabs__item.is-active){color:var(--el-color-primary)}::v-deep(.el-tabs__nav-wrap::after){color:var(--el-color-primary)}::v-deep(.el-tabs__active-bar){color:var(--el-color-primary)}

src/assets/scss/index.scss

@@ -0,0 +1,368 @@
+#index {
+  color: #d3d6dd;
+  width: 1920px;
+  height: 1080px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: left top;
+  --el-text-color-primary: #9b9b9b;
+  .bg {
+    width: 100%;
+    height: 100%;
+    padding: 16px 16px 0 16px;
+    background-image: url("../../assets/pageBg.png");
+    background-size: cover;
+    background-position: center center;
+  }
+  .headerBox {
+    width: 100%;
+    height: 124px;
+    background-image: url("../../assets/download.png");
+    background-size: cover;
+    background-position: center center;
+  }
+  .secondLine {
+    position: absolute;
+    right: 20px;
+    top: 30px;
+  }
+  .host-body {
+    //头部样式
+    .dv-dec-10,
+    .dv-dec-10-s {
+      width: 33.3%;
+      height: 5px;
+    }
+    .dv-dec-10-s {
+      transform: rotateY(180deg);
+    }
+    .dv-dec-8 {
+      width: 200px;
+      height: 50px;
+    }
+    .title {
+      position: relative;
+      width: 500px;
+      text-align: center;
+      background-size: cover;
+      background-repeat: no-repeat;
+
+      .title-text {
+        width: 100%;
+        font-size: 35px;
+        position: absolute;
+        line-height: 35px;
+        top: 10px;
+        left: 50%;
+        font-weight: 700;
+        transform: translate(-50%);
+      }
+
+      .dv-dec-6 {
+        position: absolute;
+        bottom: -30px;
+        left: 50%;
+        width: 250px;
+        height: 8px;
+        transform: translate(-50%);
+      }
+    }
+
+    // 第二行
+
+    .react-r-s,
+    .react-l-s {
+      background-color: #0f1325;
+    }
+
+    // 平行四边形
+    .react-right {
+      &.react-l-s {
+        text-align: right;
+        width: 150px;
+      }
+      font-size: 15px;
+      width: 200px;
+      line-height: 30px;
+      text-align: center;
+      transform: skewX(-45deg);
+
+      .react-after {
+        position: absolute;
+        right: -25px;
+        top: 0;
+        height: 24px;
+        width: 50px;
+        background-color: #0f1325;
+        transform: skewX(45deg);
+      }
+
+      .text {
+        display: inline-block;
+        transform: skewX(45deg);
+      }
+    }
+
+    // .react-left {
+    //   &.react-l-s {
+    //     width: 500px;
+    //     text-align: left;
+    //   }
+    //   font-size: 18px;
+    //   width: 100px;
+    //   height: 50px;
+    //   line-height: 50px;
+    //   text-align: center;
+    //   transform: skewX(45deg);
+    //   background-color: #0f1325;
+
+    //   .react-before {
+    //     position: absolute;
+    //     left: -25px;
+    //     top: 0;
+    //     height: 50px;
+    //     width: 50px;
+    //     background-color: #0f1325;
+    //     transform: skewX(-45deg);
+    //   }
+
+    //   .text {
+    //     display: inline-block;
+    //     transform: skewX(-45deg);
+    //   }
+    // }
+
+    .body-box {
+      margin-top: 10px;
+      display: flex;
+      flex-direction: column;
+
+      //下方区域的布局
+      .content-box {
+        display: grid;
+        gap: 5px;
+        grid-template-columns: 1fr 2fr 1fr;
+      }
+
+      // 底部数据
+      .bototm-box {
+        margin-top: 5px;
+        display: grid;
+        gap: 5px;
+        grid-template-columns: 1fr 2fr 1fr;
+      }
+    }
+  }
+  .dv-border-box-13 {
+    padding: 20px 10px 0 10px;
+  }
+  .writing {
+    text-decoration: underline;
+    color: #daa520;
+    cursor: pointer;
+    margin-right: 20px;
+    white-space: nowrap;
+  }
+  .titleBox {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    // height: 30px;
+
+    line-height: 32px;
+    font-size: 18px;
+    padding-left: 20px;
+    margin: 0 auto;
+    background-image: url("@/assets/img/title.png");
+    background-size: cover;
+    background-position: center center;
+  }
+}
+.el-form-item {
+  margin-bottom: 10px;
+}
+/* 呼吸闪烁的容器样式 红色*/
+.bg-red {
+  /* 设置初始的边框样式 */
+  // border: 1px solid rgba(255, 0, 0, 0.3);
+  /* 添加呼吸动画 */
+  animation: breathing_red 2s ease-in-out infinite;
+}
+
+/* 定义呼吸动画 */
+@keyframes breathing_red {
+  0% {
+    /* 开始时边框颜色较淡 */
+    border-color: rgba(255, 0, 0, 0.3);
+    box-shadow: inset 0 0 50px rgba(255, 0, 0, 0.2);
+  }
+  50% {
+    /* 中间时边框颜色最深 */
+    border-color: rgba(255, 0, 0, 1);
+    box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.8);
+  }
+  100% {
+    /* 结束时边框颜色回到较淡状态 */
+    border-color: rgba(255, 0, 0, 0.3);
+    box-shadow: inset 0 0 50px rgba(255, 0, 0, 0.2);
+  }
+}
+
+/* 呼吸闪烁的容器样式 */
+.bg-yellow {
+  /* 设置初始的边框样式 */
+  // border: 1px solid rgba(255, 219, 0, 0.3);
+  /* 添加呼吸动画 */
+  animation: breathing_yellow 2s ease-in-out infinite;
+}
+
+/* 定义呼吸动画 */
+@keyframes breathing_yellow {
+  0% {
+    /* 开始时边框颜色较淡 */
+    border-color: rgba(255, 219, 0, 0.3);
+    box-shadow: inset 0 0 50px rgba(255, 219, 0, 0.2);
+  }
+  50% {
+    /* 中间时边框颜色最深 */
+    border-color: rgba(255, 219, 0, 1);
+    box-shadow: inset 0 0 100px rgba(255, 219, 0, 0.8);
+  }
+  100% {
+    /* 结束时边框颜色回到较淡状态 */
+    border-color: rgba(255, 219, 0, 0.3);
+    box-shadow: inset 0 0 50px rgba(255, 219, 0, 0.2);
+  }
+}
+
+.scroll-box {
+  width: 1820px;
+  height: 40px;
+  padding: 10px 15px;
+  overflow: hidden;
+  position: relative;
+  left: 50px;
+}
+
+.scroll-content {
+  position: absolute;
+  white-space: nowrap;
+  animation: scroll 0s linear infinite;
+  /* 根据内容长度调整动画时间 */
+
+  padding-left: 100%;
+  /* 初始位置偏移 */
+}
+
+@keyframes scroll {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+/* 闪烁动画定义 */
+@keyframes flash {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3; /* 半透明效果实现闪烁 */
+  }
+}
+
+.animate-flash-red {
+  animation: flash 1s infinite; /* 1秒周期，无限循环 */
+  color: #ff2501;
+  cursor: pointer;
+}
+.animate-flash-yellow {
+  animation: flash 1s infinite; /* 1秒周期，无限循环 */
+  color: #bb7b00;
+  cursor: pointer;
+}
+
+/* 悬停暂停效果 */
+.scroll-box:hover .scroll-content {
+  animation-play-state: paused;
+}
+
+:deep(.el-divider--horizontal) {
+  margin: 10px 0;
+}
+
+@keyframes step-scale {
+  0% {
+    transform: scale(1.2);
+  }
+  50% {
+    transform: scale(1.2);
+  } /* 突变时放大 */
+  100% {
+    transform: scale(1.2);
+  } /* 稳定后保持放大 */
+}
+.step-scale {
+  animation: step-scale 1s infinite; /* forwards保持最终状态 */
+  text-align: center;
+  color: #ff0000; /* 警告色 */
+}
+
+div {
+  &::-webkit-scrollbar {
+    width: 6px; /* 滚动条宽度 */
+  }
+
+  /* 滚动条轨道 */
+  // &::-webkit-scrollbar-track {
+  //   background: #ccc; /* 轨道背景色 */
+  //   border-radius: 10px; /* 轨道圆角 */
+  // }
+
+  // /* 滚动条滑块 */
+  &::-webkit-scrollbar-thumb {
+    // background: #1d83ce; /* 滑块颜色 */
+    border-radius: 10px; /* 滑块圆角 */
+    background: rgba(204, 204, 204, 0.8); /* 设置滚动条轨道背景色 */
+    cursor: pointer;
+    transition: var(--el-transition-duration) background-color;
+  }
+
+  /* 滚动条滑块hover状态 */
+  &::-webkit-scrollbar-thumb:hover {
+    // background: #1d83ce; /* hover时的滑块颜色 */
+    background: rgba(204, 204, 204, 0.5); /* 设置滚动条轨道背景色 */
+  }
+
+  .el-divider--horizontal {
+    border-top: 1px var(--el-color-primary) var(--el-border-style);
+  }
+}
+
+:deep(.el-input-group__append, .el-input-group__prepend) {
+  background-color: #ffffff00;
+}
+:deep(.frontBox) {
+  background-color: var(--el-color-primary) !important;
+  color: #fff !important;
+}
+
+::v-deep(.el-tabs__item) {
+  color: #fff;
+}
+::v-deep(.el-tabs__item.is-active) {
+  color: var(--el-color-primary);
+}
+
+::v-deep(.el-tabs__nav-wrap::after) {
+  color: var(--el-color-primary);
+}
+
+::v-deep(.el-tabs__active-bar) {
+  color: var(--el-color-primary);
+}

src/assets/scss/style.scss

@@ -0,0 +1,253 @@
+@import "./variables";
+
+//  全局样式
+* {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  box-sizing: border-box;
+  outline: none;
+  --el-color-primary: #0a73ff;
+  --el-color-success: #2e8b57;
+  --el-color-warning: #daa520;
+  --el-color-danger: #a52a2a;
+  --el-scrollbar-bg-color: #ccc;
+  --el-scrollbar-opacity: 0.7;
+  // --el-fill-color-blank: #ffffff00;
+}
+
+html {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.2em;
+  background-color: #f1f1f1;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+
+  /* 滚动条整体 */
+  ::-webkit-scrollbar {
+    width: 8px; /* 垂直滚动条宽度 */
+    height: 8px; /* 水平滚动条高度 */
+  }
+
+  /* 滚动条滑块 */
+  ::-webkit-scrollbar-thumb {
+    background: var(--el-color-primary); /* 滑块颜色 */
+    border-radius: 4px; /* 滑块圆角 */
+    transition: background 0.3s; /* 滑块 hover 过渡效果 */
+  }
+}
+
+a {
+  color: #343440;
+  text-decoration: none;
+  box-sizing: border-box;
+}
+
+.clearfix {
+  &::after {
+    content: "";
+    display: table;
+    height: 0;
+    line-height: 0;
+    visibility: hidden;
+    clear: both;
+  }
+}
+
+// 图标
+.iconfont {
+  font-size: 20px !important;
+  color: #5cd9e8;
+}
+
+//浮动
+.float-r {
+  float: right;
+}
+
+//浮动
+.float-l {
+  float: left;
+}
+
+// 字体加粗
+.fw-b {
+  font-weight: bold;
+}
+
+//文章一行显示，多余省略号显示
+.title-item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bg-color-black {
+  background-color: rgba(19, 25, 47, 0.6);
+}
+
+.bg-color-blue {
+  background-color: #1a5cd7;
+}
+
+.colorBlack {
+  color: #272727 !important;
+
+  &:hover {
+    color: #272727 !important;
+  }
+}
+
+.colorGrass {
+  color: #33cea0;
+
+  &:hover {
+    color: #33cea0 !important;
+  }
+}
+
+.colorRed {
+  color: #ff5722;
+
+  &:hover {
+    color: #ff5722 !important;
+  }
+}
+
+.colorText {
+  color: #d3d6dd !important;
+
+  &:hover {
+    color: #d3d6dd !important;
+  }
+}
+
+.colorBlue {
+  color: #257dff !important;
+
+  &:hover {
+    color: #257dff !important;
+  }
+}
+
+//颜色
+@each $colorkey, $color in $colors {
+  .text-#{$colorkey} {
+    color: $color;
+  }
+
+  .bg-#{$colorkey} {
+    background-color: $color;
+  }
+}
+
+//对齐
+@each $var in (left, center, right) {
+  .text-#{$var} {
+    text-align: $var !important;
+  }
+}
+
+//flex
+@each $key, $value in $flex-jc {
+  .jc-#{$key} {
+    justify-content: $value;
+  }
+}
+
+@each $key, $value in $flex-ai {
+  .ai-#{$key} {
+    align-items: $value;
+  }
+}
+
+//字体
+@each $fontkey, $fontvalue in $font-sizes {
+  .fs-#{$fontkey} {
+    font-size: $fontvalue * $base-font-size;
+  }
+}
+
+//.mt-1 => margin top
+//spacing
+
+@each $typekey, $type in $spacing-types {
+  //.m-1
+  @each $sizekey, $size in $spacing-sizes {
+    .#{$typekey}-#{$sizekey} {
+      #{$type}: $size * $spacing-base-size;
+    }
+  }
+
+  //.mx-1
+  @each $sizekey, $size in $spacing-sizes {
+    .#{$typekey}x-#{$sizekey} {
+      #{$type}-left: $size * $spacing-base-size;
+      #{$type}-right: $size * $spacing-base-size;
+    }
+
+    .#{$typekey}y-#{$sizekey} {
+      #{$type}-top: $size * $spacing-base-size;
+      #{$type}-bottom: $size * $spacing-base-size;
+    }
+  }
+
+  //.mt-1
+  @each $directionkey, $direction in $spacing-directions {
+    @each $sizekey, $size in $spacing-sizes {
+      .#{$typekey}#{$directionkey}-#{$sizekey} {
+        #{$type}-#{$direction}: $size * $spacing-base-size;
+      }
+    }
+  }
+
+  .#{$typekey} {
+    #{$type}: 0;
+  }
+  @for $i from 0 through 100 {
+    .md#{$i} {
+      margin: #{$i}px !important;
+    }
+    .mt#{$i} {
+      margin-top: #{$i}px !important;
+    }
+
+    .mr#{$i} {
+      margin-right: #{$i}px !important;
+    }
+
+    .mb#{$i} {
+      margin-bottom: #{$i}px !important;
+    }
+
+    .ml#{$i} {
+      margin-left: #{$i}px !important;
+    }
+
+    .pd#{$i} {
+      padding: #{$i}px !important;
+    }
+    .pt#{$i} {
+      padding-top: #{$i}px !important;
+    }
+
+    .pr#{$i} {
+      padding-right: #{$i}px !important;
+    }
+
+    .pb#{$i} {
+      padding-bottom: #{$i}px !important;
+    }
+
+    .pl#{$i} {
+      padding-left: #{$i}px !important;
+    }
+  }
+}
+

src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>