内容提价

longyvfengyun

2023-10-01 a2a400c1d5e6a55e2e71730ffceb710e2fa610cc

内容提价

 src/assets/iconfont/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/iconfont/demo_index.html

New file
@@ -0,0 +1,303 @@
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4272377" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">语音</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">疲劳驾驶</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">吸烟</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe90a;</span>
                <div class="name">打电话</div>
                <div class="code-name">&amp;#xe90a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">食品</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：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=1696090145576') format('woff2'),
       url('iconfont.woff?t=1696090145576') format('woff'),
       url('iconfont.ttf?t=1696090145576') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&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 iconfont-yuyin"></span>
            <div class="name">
              语音
            </div>
            <div class="code-name">.iconfont-yuyin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-fatigue-driving"></span>
            <div class="name">
              疲劳驾驶
            </div>
            <div class="code-name">.iconfont-fatigue-driving
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-xiyan"></span>
            <div class="name">
              吸烟
            </div>
            <div class="code-name">.iconfont-xiyan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-call"></span>
            <div class="name">
              打电话
            </div>
            <div class="code-name">.iconfont-call
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfont-shipin"></span>
            <div class="name">
              食品
            </div>
            <div class="code-name">.iconfont-shipin
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont iconfont-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="#iconfont-yuyin"></use>
                </svg>
                <div class="name">语音</div>
                <div class="code-name">#iconfont-yuyin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-fatigue-driving"></use>
                </svg>
                <div class="name">疲劳驾驶</div>
                <div class="code-name">#iconfont-fatigue-driving</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-xiyan"></use>
                </svg>
                <div class="name">吸烟</div>
                <div class="code-name">#iconfont-xiyan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-call"></use>
                </svg>
                <div class="name">打电话</div>
                <div class="code-name">#iconfont-call</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfont-shipin"></use>
                </svg>
                <div class="name">食品</div>
                <div class="code-name">#iconfont-shipin</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&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/iconfont/iconfont.css

New file
@@ -0,0 +1,35 @@
@font-face {
  font-family: "iconfont"; /* Project id 4272377 */
  src: url('iconfont.woff2?t=1696090145576') format('woff2'),
       url('iconfont.woff?t=1696090145576') format('woff'),
       url('iconfont.ttf?t=1696090145576') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconfont-yuyin:before {
  content: "\e649";
}

.iconfont-fatigue-driving:before {
  content: "\e632";
}

.iconfont-xiyan:before {
  content: "\e62a";
}

.iconfont-call:before {
  content: "\e90a";
}

.iconfont-shipin:before {
  content: "\e607";
}


 src/assets/iconfont/iconfont.js

New file
@@ -0,0 +1 @@
window._iconfont_svg_string_4272377='<svg><symbol id="iconfont-yuyin" viewBox="0 0 1024 1024"><path d="M515.041727 670.617766c91.584167 0 166.095647-74.504255 166.095647-166.095646V229.350568c0-91.584167-74.51148-166.095647-166.095647-166.095647-91.598617 0-166.102872 74.51148-166.102871 166.095647V504.52212c0 91.591392 74.504255 166.095647 166.102871 166.095646z" fill="" ></path><path d="M801.643237 874.001665H558.391759v-45.423608c161.507768-21.313766 286.60151-159.788217 286.60151-327.01819a43.350032 43.350032 0 0 0-86.700064 0c0 134.124998-109.12648 243.251478-243.258703 243.251479-134.124998 0-243.244253-109.12648-243.244253-243.251479a43.350032 43.350032 0 0 0-86.700063 0c0 167.229972 125.100967 305.711649 286.601509 327.01819v45.423608H228.440217a43.350032 43.350032 0 0 0 0 86.700064h573.20302a43.350032 43.350032 0 0 0 0-86.700064z" fill="" ></path></symbol><symbol id="iconfont-fatigue-driving" viewBox="0 0 1024 1024"><path d="M960 316.371l-252.379 67.625-16.906-63.095 108.151-164.228-141.963 38.039-16.906-63.095 252.379-67.625 16.906 63.095-108.151 164.228 141.963-38.039L960 316.371zM304 384s-95.999 16.001-112 160h640c-7.042-63.376-29.58-101.951-52.61-125.288l65.622-17.897C868.47 433.944 888.505 480.074 896 544h-1.804C934.078 574.362 960 623.496 960 678.955v50.087c0 54.621-25.139 103.113-64.001 133.573v65.384c0 17.674-14.326 32-31.999 32h-96c-17.673 0-32-14.326-32-32v-32H288v32c0 17.674-14.326 32-32 32h-96c-17.674 0-32-14.326-32-32v-65.384c-38.861-30.46-64-78.952-64-133.573v-50.087C64 623.496 89.921 574.362 129.803 544H128c22.667-193.333 159.999-224 159.999-224h347.429l18.286 64H304z m511.999 416c44.182 0 80-35.818 80-80.001 0-44.181-35.817-79.999-80-79.999-44.182 0-80 35.818-80 79.999 0.001 44.183 35.818 80.001 80 80.001zM376 784h272c13.255 0 24-10.745 24-24s-10.745-24-24-24H376c-13.255 0-24 10.745-24 24s10.745 24 24 24z m0-80h272c13.255 0 24-10.745 24-24s-10.745-24-24-24H376c-13.255 0-24 10.745-24 24s10.745 24 24 24z m-248.001 15.998c0 44.184 35.817 80.001 80 80.001C252.182 800 288 764.182 288 719.998c0-44.181-35.817-79.999-80.001-79.999-44.183 0-80 35.818-80 79.999z"  ></path></symbol><symbol id="iconfont-xiyan" viewBox="0 0 1024 1024"><path d="M63.284325 904.625192h673.071466V766.051113H63.284325v138.574079z m830.121338 0h67.306942V766.051113h-67.306942v138.574079z m-112.178919 0h67.306942V766.051113H781.226744v138.574079z m38.140669-520.575306c27.595498-27.945469 44.870953-66.977437 44.870953-109.934808 0-85.453231-67.531046-154.74027-150.319587-154.74027v69.286016c45.768393 0 83.011622 38.33919 83.011622 85.453231s-37.243229 85.454254-83.011622 85.454254v69.287039c100.750635 0 179.485861 84.298941 179.485861 187.997722v103.006002h67.306942V616.622826c0.001023-102.775758-57.434084-191.462636-141.344169-232.57294zM692.830485 497.91112h-68.653613v0.231267c-45.754067 0-83.011622-45.266973-83.011622-92.382037s37.258579-80.834027 83.011622-80.834026v-69.287039c-82.787518 0-150.319587 69.287039-150.319587 154.74027s67.306942 154.74027 150.319587 154.74027v-0.231267h68.653613c46.89096 0 88.396259 34.181497 88.396259 94.922906v60.048631h67.306942v-75.984579c0-83.143629-71.79414-145.964396-155.703201-145.964396z" fill="#444444" ></path><path d="M63.284325 904.625192h673.071466V766.051113H63.284325v138.574079z m830.121338 0h67.306942V766.051113h-67.306942v138.574079z m-112.178919 0h67.306942V766.051113H781.226744v138.574079z m38.140669-520.575306c27.595498-27.945469 44.870953-66.977437 44.870953-109.934808 0-85.453231-67.531046-154.74027-150.319587-154.74027v69.286016c45.768393 0 83.011622 38.33919 83.011622 85.453231s-37.243229 85.454254-83.011622 85.454254v69.287039c100.750635 0 179.485861 84.298941 179.485861 187.997722v103.006002h67.306942V616.622826c0.001023-102.775758-57.434084-191.462636-141.344169-232.57294zM692.830485 497.91112h-68.653613v0.231267c-45.754067 0-83.011622-45.266973-83.011622-92.382037s37.258579-80.834027 83.011622-80.834026v-69.287039c-82.787518 0-150.319587 69.287039-150.319587 154.74027s67.306942 154.74027 150.319587 154.74027v-0.231267h68.653613c46.89096 0 88.396259 34.181497 88.396259 94.922906v60.048631h67.306942v-75.984579c0-83.143629-71.79414-145.964396-155.703201-145.964396z" fill="#444444" ></path></symbol><symbol id="iconfont-call" viewBox="0 0 1024 1024"><path d="M289.76 66.192c-22.672 4.24-37.92 12.56-59.952 31.584l-13.408 11.76-24.832 20.56-7.44 6.496c-5.408 4.96-9.056 8.704-13.568 13.824-75.04 84.896-95.008 215.056-52.752 335.792 28.928 82.624 80.048 164.288 153.04 245.632 76.848 85.648 142.08 139.824 217.168 179.568 61.168 32.32 109.44 46.72 165.04 48.4 67.408 2.08 128-13.36 178.368-45.952a204.48 204.48 0 0 0 24.848-19.248l8.512-7.76 16.912-15.744 15.68-13.648c29.6-26.352 42.144-47.472 44.48-78.656 3.328-44.816-16.4-78.8-64.048-119.52L850.976 636.8l-23.664-20.48c-46.4-38.304-84.928-51.952-132.64-44.752-34.048 5.088-55.52 18.064-86.24 50.208l-11.36 12.08c-13.616 14.352-17.888 17.248-23.872 18.448-7.072 1.408-19.968-4.592-50-28.992-43.808-35.52-80.16-76.288-111.6-125.136-17.2-26.88-22.88-43.456-21.28-54.656l0.624-2.928c-0.16 0.544 1.264-1.072 10.928-8.544l17.792-13.472 23.84-19.44c26.72-22.304 39.728-40.608 46.288-67.408 12-48.608 0.8-89.04-37.984-149.76l-21.76-33.632-7.008-10.288c-38.784-55.248-76.48-79.184-125.088-73.152l-8.192 1.28z m70.128 116.032l6.272 9.184 21.008 32.48c28.336 44.368 33.984 64.8 27.936 89.328-2.176 8.944-5.744 13.936-20.416 26.192l-24.544 19.936-14.8 11.152c-22.08 17.072-32.832 29.312-38.4 49.008-10.528 37.376 0.416 74.336 30.016 120.592 35.904 55.76 77.728 102.672 127.904 143.392 46.528 37.776 76.96 51.936 113.36 44.64 24.448-4.88 40.96-16.096 64.64-41.024l11.28-12c19.632-20.544 26.656-24.784 41.888-27.056 24.048-3.632 41.648 2.608 71.92 27.584l11.12 9.536 12.064 10.544 27.136 22.72c30.48 26.064 38.032 39.04 36.88 54.576-0.64 8.608-2.944 12.48-18.352 26.192l-16.72 14.592-17.28 16.064-8.128 7.408a126.24 126.24 0 0 1-15.2 11.776c-36.432 23.584-81.664 35.12-134.08 33.504-43.008-1.312-80.128-12.384-131.536-39.552-66.288-35.088-124.688-83.568-195.888-162.928-66.56-74.176-112.288-147.248-137.6-219.52-33.328-95.264-17.904-195.856 37.744-258.816 2.848-3.232 4.64-5.072 7.216-7.456l5.952-5.184 24.88-20.608 14-12.256 7.792-6.464c6.56-5.104 10.032-6.464 15.904-7.568 17.952-3.36 30.96 4.304 56.032 40.032z" fill="#000000" ></path></symbol><symbol id="iconfont-shipin" viewBox="0 0 1024 1024"><path d="M190.107826 889.989565a115.890087 115.890087 0 0 1-19.144348-4.096 45.679304 45.679304 0 0 1-23.952695-17.140869c-0.934957-1.469217-2.137043-3.116522-2.582261-3.82887a107.742609 107.742609 0 0 1-5.164522-10.685217 37.13113 37.13113 0 0 0-1.380174-3.917913A88.598261 88.598261 0 0 1 133.565217 835.494957v-1.335653h756.869566v1.335653c0 1.558261-2.404174 9.839304-4.318609 14.825739a44.343652 44.343652 0 0 1-3.561739 8.904347c-9.572174 19.545043-21.726609 27.158261-49.018435 30.809044-4.541217 0.534261-639.109565 0.534261-643.428174-0.044522z m-13.801739-83.968a6.722783 6.722783 0 0 1-2.537739-2.359652c-0.934957-1.558261-1.068522-2.715826-1.691826-14.781217l-2.092522-40.559305a36959.276522 36959.276522 0 0 0-5.476174-105.73913c-0.712348-12.109913-1.424696-26.713043-1.602783-32.411826-0.222609-5.743304-0.890435-20.613565-1.602782-33.124174a12221.395478 12221.395478 0 0 1-5.965913-113.975652L152.486957 408.353391 149.593043 353.725217a2447.538087 2447.538087 0 0 1-2.804869-84.190608c0-5.342609 0.133565-5.787826 1.202087-7.435131a8.370087 8.370087 0 0 1 2.137043-2.270608c0.667826-0.311652 37.442783-0.445217 119.54087-0.445218 68.697043 0 119.229217-0.178087 120.030609-0.445217a23.774609 23.774609 0 0 0 3.428174-1.424696 10.818783 10.818783 0 0 1 2.671304-0.979478c0.400696 0 1.113043-0.489739 1.602782-1.068522a8.637217 8.637217 0 0 1 2.671305-1.958956c1.29113-0.712348 2.137043-1.736348 3.517217-4.274087 2.671304-5.12 6.054957-12.733217 8.102957-18.521044l2.493217-6.589217c3.784348-10.195478 5.164522-14.514087 5.609739-17.541565 0.311652-1.78087 1.157565-5.921391 1.914435-9.171479a172.165565 172.165565 0 0 1 8.770783-31.966608c3.650783-8.681739 6.989913-13.712696 12.466087-19.144348A30.675478 30.675478 0 0 1 453.409391 138.462609c3.561739-1.78087 5.342609-2.404174 11.842783-4.051479 3.517217-0.890435 6.233043-0.890435 86.995478-0.801391l83.389218 0.133565 1.469217 1.78087 1.469217 1.869913 0.133566 16.11687c0.089043 10.50713 0 16.784696-0.311653 17.897739a6.233043 6.233043 0 0 1-2.31513 3.072l-1.78087 1.335652-82.543304 0.26713C482.170435 176.261565 468.992 176.39513 467.923478 176.973913c-1.914435 0.934957-3.116522 3.917913-3.917913 9.349565a408.887652 408.887652 0 0 1-1.869913 10.818783l-2.582261 13.935304c-2.537739 14.06887-4.452174 24.219826-6.010434 32.589913a118.873043 118.873043 0 0 0-1.602783 9.305044c0 1.647304 0.845913 3.161043 2.493217 4.452174 1.335652 1.113043 2.048 1.246609 7.435131 1.558261 3.250087 0.133565 13.445565 0.26713 22.617043 0.311652 18.877217 0.044522 18.877217 0.044522 20.48 3.517217 0.845913 1.914435 0.890435 5.12 0.890435 119.763478v117.715479l0.979478 1.647304c1.78087 2.849391 5.075478 3.784348 7.746783 2.092522 0.801391-0.489739 4.452174-3.82887 8.147478-7.479652 12.733217-12.466087 15.849739-15.315478 20.747131-18.699131 5.164522-3.606261 13.935304-7.034435 20.435478-7.969391 4.274087-0.623304 236.989217-0.623304 241.842087 0 10.24 1.335652 20.569043 6.054957 28.226782 12.955826 2.893913 2.671304 8.013913 8.815304 9.928348 12.020869 8.013913 13.445565 13.133913 27.247304 18.209392 48.88487l1.068521 4.585739-1.202087 2.270609a6.322087 6.322087 0 0 1-2.760348 3.116522c-1.558261 0.801391-11.264 0.890435-182.272 0.890434H496.37287l-1.78087 1.558261-1.78087 1.647305-0.222608 36.10713c-0.222609 32.411826-0.356174 37.220174-1.246609 46.747826-0.623304 5.87687-1.380174 14.514087-1.78087 19.144348l-1.647304 19.411478a16322.916174 16322.916174 0 0 0-5.253565 61.039305c-0.801391 8.637217-1.424696 16.473043-1.424696 17.497043 0 1.068522-0.578783 8.94887-1.335652 17.541565-0.801391 8.592696-1.647304 18.075826-1.869913 21.147826-0.311652 4.897391-0.534261 5.698783-1.691826 7.346087-0.75687 1.113043-1.869913 2.048-2.582261 2.226087-0.667826 0.178087-67.584 0.400696-148.613565 0.489739-127.866435 0.178087-147.545043 0.133565-148.791652-0.445217z m288.857043-443.970782c0-29.384348-0.133565-54.00487-0.26713-54.806261a8.592696 8.592696 0 0 0-1.602783-3.027479l-1.335652-1.55826-9.616695-0.178087c-7.123478-0.089043-9.928348 0.089043-10.818783 0.489739-1.914435 0.979478-3.161043 3.472696-3.784348 7.123478a235.653565 235.653565 0 0 1-1.958956 10.284522c-0.75687 3.784348-1.335652 7.301565-1.335653 7.791304 0 0.534261-0.623304 3.962435-1.380173 7.568696-2.671304 12.911304-4.85287 25.555478-6.233044 36.685913-0.311652 2.226087-0.623304 11.709217-0.801391 21.058782l-0.222609 17.051827 1.157565 1.647304c2.226087 3.250087 2.404174 3.294609 21.325913 3.294609h16.918261v-53.426087zM331.108174 413.161739h37.888l0.578783-4.096c0.26713-2.359652 1.29113-9.216 2.226086-15.315478l5.832348-39.268174 4.986435-33.435826c0.934957-6.366609 0.890435-8.592696-0.222609-11.709218a9.305043 9.305043 0 0 0-3.650782-4.63026l-2.671305-2.003479-91.803826-0.178087c-61.885217-0.089043-92.338087 0-93.495652 0.356174-1.157565 0.356174-1.914435 1.024-2.671304 2.359652l-1.068522 1.914435v50.754783c0 49.819826 0 50.799304 0.890435 52.313043a8.904348 8.904348 0 0 0 2.493217 2.493218l1.558261 1.024 50.621218-0.311652c27.870609-0.133565 67.673043-0.26713 88.509217-0.267131z m223.009391 392.904348a50.93287 50.93287 0 0 1-15.760695-5.030957 13.979826 13.979826 0 0 0-2.671305-1.335652c-0.845913 0-8.058435-5.787826-10.952348-8.815304a68.34087 68.34087 0 0 1-8.45913-10.640696 114.732522 114.732522 0 0 1-11.353044-26.445913c-0.222609-0.890435-1.068522-4.185043-1.780869-7.346087a204.221217 204.221217 0 0 1-4.140522-22.260869c-0.712348-8.013913-1.647304-20.880696-1.914435-25.377392l-0.26713-5.075478h359.557565v22.349913c0 25.689043-0.356174 30.408348-2.982956 37.709913-3.116522 8.681739-6.322087 14.692174-12.599653 23.151305-2.092522 2.982957-10.952348 12.02087-14.781217 15.226434a77.156174 77.156174 0 0 1-20.257391 11.575653c-8.637217 3.250087-1.29113 3.027478-130.270609 2.982956-89.666783 0-117.938087-0.178087-121.366261-0.667826z m253.061565-125.862957c-2.448696-0.133565-14.692174-0.801391-27.15826-1.647304-39.535304-2.448696-42.963478-2.537739-63.22087-1.869913-25.733565 0.890435-183.296 1.335652-186.724174 0.623304a30.809043 30.809043 0 0 1-13.356522-8.637217 73.015652 73.015652 0 0 1-5.075478-5.476174l-2.493217-3.250087a8.325565 8.325565 0 0 1-1.424696-2.31513c0-0.311652-0.311652-0.890435-0.623304-1.246609-2.671304-2.938435-7.479652-14.736696-8.94887-21.815652a88.954435 88.954435 0 0 1 1.113044-32.367305 29.96313 29.96313 0 0 1 6.589217-11.620173 28.716522 28.716522 0 0 1 16.072348-7.65774l5.431652-1.113043h149.23687c114.777043 0 149.949217 0.178087 152.08626 0.578783 1.602783 0.356174 4.096 0.801391 5.60974 1.024a32.411826 32.411826 0 0 1 11.353043 5.209043c3.116522 2.31513 6.188522 7.034435 7.880348 12.109913 1.513739 4.452174 2.849391 14.825739 2.849391 22.26087 0 11.486609-3.383652 23.151304-9.928348 33.792a240.194783 240.194783 0 0 0-2.760347 4.452174c-1.513739 2.582261-7.835826 9.394087-11.442087 12.288-2.226087 1.78087-5.520696 3.962435-7.435131 4.897391-3.116522 1.513739-3.784348 1.647304-8.281043 1.780869-2.671304 0.089043-6.90087 0.089043-9.349566 0z" fill="#4775F7" ></path><path d="M184.008348 308.268522v98.927304l5.12 6.500174h181.426087l14.959304-92.649739c1.335652-9.082435-1.335652-15.449043-8.102956-19.055304-8.013913-0.445217-71.234783-0.311652-189.484522 0.445217l-3.917913 5.787826zM461.467826 302.480696h-19.589565c-4.808348 0.934957-7.92487 4.274087-9.349565 10.017391-2.137043 8.592696-17.497043 48.840348-19.856696 63.354435a203.909565 203.909565 0 0 0-2.404174 32.946087c2.003478 4.452174 5.164522 6.678261 9.527652 6.678261h47.638261v-106.852174l-2.226087-3.917913-3.739826-2.226087z" fill="#FFFFFF" ></path></symbol></svg>',function(e){var c=(c=document.getElementsByTagName("script"))[c.length-1],t=c.getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var l,a,n,i,o,h=function(c,t){t.parentNode.insertBefore(c,t)};if(t&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(c){console&&console.log(c)}}l=function(){var c,t=document.createElement("div");t.innerHTML=e._iconfont_svg_string_4272377,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(c=document.body).firstChild?h(t,c.firstChild):c.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(a=function(){document.removeEventListener("DOMContentLoaded",a,!1),l()},document.addEventListener("DOMContentLoaded",a,!1)):document.attachEvent&&(n=l,i=e.document,o=!1,v(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,s())})}function s(){o||(o=!0,n())}function v(){try{i.documentElement.doScroll("left")}catch(c){return void setTimeout(v,50)}s()}}(window);

 src/assets/iconfont/iconfont.json

New file
@@ -0,0 +1,44 @@
{
  "id": "4272377",
  "name": "batt_safe_check",
  "font_family": "iconfont",
  "css_prefix_text": "iconfont-",
  "description": "动力电池安全检查平台",
  "glyphs": [
    {
      "icon_id": "1312009",
      "name": "语音",
      "font_class": "yuyin",
      "unicode": "e649",
      "unicode_decimal": 58953
    },
    {
      "icon_id": "7004126",
      "name": "疲劳驾驶",
      "font_class": "fatigue-driving",
      "unicode": "e632",
      "unicode_decimal": 58930
    },
    {
      "icon_id": "8963511",
      "name": "吸烟",
      "font_class": "xiyan",
      "unicode": "e62a",
      "unicode_decimal": 58922
    },
    {
      "icon_id": "12253338",
      "name": "打电话",
      "font_class": "call",
      "unicode": "e90a",
      "unicode_decimal": 59658
    },
    {
      "icon_id": "31862779",
      "name": "食品",
      "font_class": "shipin",
      "unicode": "e607",
      "unicode_decimal": 58887
    }
  ]
}

 src/assets/iconfont/iconfont.ttf

Binary files differ

 src/assets/iconfont/iconfont.woff

Binary files differ

 src/assets/iconfont/iconfont.woff2

Binary files differ

 src/components/dangerActBox.vue

New file
@@ -0,0 +1,88 @@
<script setup>
const props = defineProps({
    name: {
        type: String,
        default: ""
    },
    time: {
        type: String,
        default: ""
    },
    icon: {
        type: String,
        default: ""
    },
    type: {
        type: String,
        default: ""
    }
})
</script>

<template>
    <div class="danger-act-wrapper" :class="type">
        <div class="danger-act-icon">
            <i class="iconfont" :class="icon"></i>
        </div>
        <div class="danger-act-content">
            <div class="danger-act-name">{{ name }}</div>
            <div class="danger-act-time">{{ time }}</div>
        </div>
    </div>
</template>

<style scoped lang="less">
@warning-color: #fafa5c;
@danger-color: #ea4444;
.danger-act-wrapper {
    padding: 8px;
    display: flex;
    .danger-act-icon {
        padding: 4px 16px;
        border-radius: 4px;
        background-color: #0964c2;
        .iconfont {
            font-size: 40px;
            color: #00FEFF;
        }
    }
    .danger-act-content {
        margin-left: 8px;
        .danger-act-name {
            padding: 4px;
            color: #FFFFFF;
        }
        .danger-act-time {
            padding: 4px;
            color: #00FEFF;
        }
    }

    &.warning {
        .danger-act-icon {
            .iconfont {
                color: @warning-color;
            }
        }
        .danger-act-content {
            .danger-act-time {
                color: @warning-color;
            }
        }
    }

    &.danger {
        .danger-act-icon {
            .iconfont {
                color: @danger-color;
            }
        }
        .danger-act-content {
            .danger-act-time {
                color: @danger-color;
            }
        }
    }

}
</style>

 src/main.js

@@ -8,6 +8,8 @@
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from "element-plus/es/locale/lang/zh-cn"
import './util/rem'
import "@/assets/iconfont/iconfont.css"
import "@/assets/iconfont/iconfont.js"

// 对toFixed数字保留位数二次封装（ps：toFixed返回的是字符串）
Number.prototype.toHold = function (value) {

 src/router/index.js

@@ -7,4 +7,21 @@
  routes, // `routes: routes` 的缩写
});

router.beforeEach((to, from, next)=>{
  const token = sessionStorage.getItem("loginToken");
  // 管理系统常见的两个经典的逻辑
  // 1.如果用户访问登录页面，但是token已经存在，跳转到首页
  if(to.path === '/login' && token) {
    next("/");
    return;
  }
  // 2.如果用户访问不是登录页面，但是没有token，跳转到登录页面
  if(to.path!=="/login" && !token) {
    next('/login');
    return;
  }

  next();
});

export default router;

 src/views/mainLayout/components/pageHeader.vue

@@ -5,10 +5,6 @@
import slideMenu from "@/views/mainLayout/js/slideMenu";
import headerInfo from "@/views/mainLayout/js/headerInfo";
headerInfo();
const isVisible = ref(false);
const visibleChange = (state)=>{
    isVisible.value = state;
}
const {isCollapse} = slideMenu();
const pageMenuStore = usePageMenuStore();
const changeMenuState = ()=>{
@@ -21,6 +17,9 @@
const sysTitle = computed(()=>{
    return pageMenuStore.sysTitle;
});

import userDropdownModule from "@/views/moudle/user/userDropdown";
const {isVisible, visibleChange, commandClick} = userDropdownModule();
</script>

<template>
@@ -38,7 +37,7 @@
        </div>
        <div class="page-header-right">
            <div class="hdw-avatar">
                <el-dropdown @visible-change="visibleChange">
                <el-dropdown @visible-change="visibleChange" @command="commandClick">
                    <div class="hdw-avatar-wrapper">
                                <span class="hdw-avatar-icon">
                      <el-icon size="18"><Avatar /></el-icon>

 src/views/mainLayout/index.vue

@@ -37,7 +37,7 @@
<template>
    <div class="main-layout">
        <div class="full-height">
            <div class="main-layout-left" v-if="!isCollapse">
            <div class="main-layout-left" v-show="!isCollapse">
                <div class="slide-header">
                    <div class="logo-wrapper">
                        <img :src="logoImg" alt="" />
@@ -89,7 +89,6 @@
                        <div class="body-absolute">
                            <router-view></router-view>
                        </div>

                    </div>
                </div>
            </div>

 src/views/moudle/user/login.js

@@ -6,6 +6,7 @@
  const password = ref("");
  const router = useRouter();
  const checkLogin = ()=>{
    sessionStorage.setItem("loginToken", "123");
    router.push('/');
  }
  return {

 src/views/moudle/user/userDropdown.js

New file
@@ -0,0 +1,39 @@
import {ref} from "vue";
import {useRouter} from "vue-router";

/**
 * 用户下拉组件
 */
const userDropdownModule = ()=>{
  const isVisible = ref(false);
  const router = useRouter();
  const commandClick = (name)=>{
    switch (name) {
      case "outSystem":
        outSystem();
        break;
      case "passwordChange":
        passwordChange();
        break;
      default:
        break;
    }
  }

  const outSystem = ()=>{
    sessionStorage.removeItem("loginToken");
    router.push({
      path: "/login",
      replace: true
    });
  };

  const passwordChange = ()=>{

  }
  const visibleChange = (state)=>{
    isVisible.value = state;
  }
  return {isVisible, commandClick, visibleChange};
};
export default userDropdownModule;

 src/views/user/drivingAnalysis.vue

@@ -7,6 +7,7 @@
import getWaterOption from "@/components/echarts/options/waterPie";
import getGradientLineOption from "@/components/echarts/options/gradientLine";
import getRosePieOption from "@/components/echarts/options/rosePie";
import DangerActBox from "@/components/dangerActBox.vue";
const carPie = ref(null);
const alarmLine = ref(null);
const rosePie = ref(null);
@@ -20,6 +21,9 @@
    const rosePieOption = getRosePieOption();
    rosePie.value.setOption(rosePieOption);
});

import dangerActModule from "@/views/user/js/dangerActModule";
const {dangerList} = dangerActModule();
</script>

<template>
@@ -28,7 +32,16 @@
            <div class="alarm-bar-wrapper">
                <flex-box>
                    <div class="flex-box-content">
                        <chart-box title="实时统计"></chart-box>
                        <chart-box title="实时统计">
                            <div class="danger-act-container">
                                <div class="danger-act-container-absolute">
                                    <danger-act-box
                                        v-for="(item, key) in dangerList" :key="'key'+key"
                                        :name="item.name" :time="item.time"
                                        :icon="item.icon" :type="item.type"></danger-act-box>
                                </div>
                            </div>
                        </chart-box>
                    </div>
                </flex-box>
            </div>
@@ -47,7 +60,6 @@
                                            <div class="car-grade">45分</div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </chart-box>
@@ -58,7 +70,7 @@
        <div class="content-wrapper middle">
            <div class="video-wrapper">
                <flex-box>
                    <img :src="videoContent" alt="">
                    <img class="video-img" :src="videoContent" alt="">
                </flex-box>
            </div>
            <div class="alarm-line-wrapper">
@@ -84,7 +96,9 @@
            <div class="alarm-bar-wrapper">
                <flex-box>
                    <div class="flex-box-content">
                        <chart-box title="风险行为统计"></chart-box>
                        <chart-box title="风险行为统计">

                        </chart-box>
                    </div>
                </flex-box>
            </div>
@@ -116,10 +130,6 @@
            .video-wrapper {
                padding: 8px;
                height: 70%;
                img {
                    width: auto;
                    height: 100%;
                }
            }
            .alarm-line-wrapper {
                padding: 8px;
@@ -169,4 +179,22 @@
        }
    }
}
.danger-act-container {
    position: relative;
    height: 100%;
    .danger-act-container-absolute {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow-y: auto;
    }
}
.video-img {
    width: auto;
    height: 100%;
}
</style>

 src/views/user/js/dangerActModule.js

New file
@@ -0,0 +1,42 @@
import {ref} from "vue";

const dangerActModule = ()=>{
  const dangerList = ref([
    {
      name: '吸烟',
      time: '2023-09-30 23:55:00',
      icon: 'iconfont-xiyan',
      type: 'warning',
    },
    {
      name: '打电话',
      time: '2023-09-30 23:55:00',
      icon: 'iconfont-call',
      type: '',
    },
    {
      name: '疲劳驾驶',
      time: '2023-09-30 23:55:00',
      icon: 'iconfont-fatigue-driving',
      type: 'danger',
    },
    {
      name: '喝水',
      time: '2023-09-30 23:55:00',
      icon: 'iconfont-shipin',
      type: 'warning',
    },
    {
      name: '发语音',
      time: '2023-09-30 23:55:00',
      icon: 'iconfont-yuyin',
      type: '',
    },
  ]);

  return {
    dangerList,
  };
}

export default dangerActModule;