fix: 优化

public/iconfont/demo.css

+/* 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;
+}

public/iconfont/demo_index.html

+<!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=3857911" 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">&#xe727;</span>
+                <div class="name">订单管理</div>
+                <div class="code-name">&amp;#xe727;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe65d;</span>
+                <div class="name">商品管理</div>
+                <div class="code-name">&amp;#xe65d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60a;</span>
+                <div class="name">财务管理</div>
+                <div class="code-name">&amp;#xe60a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe661;</span>
+                <div class="name">报表分析</div>
+                <div class="code-name">&amp;#xe661;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xeb51;</span>
+                <div class="name">仓库_仓储管理_o</div>
+                <div class="code-name">&amp;#xeb51;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xeb37;</span>
+                <div class="name">生产管理</div>
+                <div class="code-name">&amp;#xeb37;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe656;</span>
+                <div class="name">物流管理</div>
+                <div class="code-name">&amp;#xe656;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62e;</span>
+                <div class="name">店铺管理</div>
+                <div class="code-name">&amp;#xe62e;</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=1673317221620') format('woff2'),
+       url('iconfont.woff?t=1673317221620') format('woff'),
+       url('iconfont.ttf?t=1673317221620') 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-dingdanguanli35"></span>
+            <div class="name">
+              订单管理
+            </div>
+            <div class="code-name">.icon-dingdanguanli35
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shangpinguanli"></span>
+            <div class="name">
+              商品管理
+            </div>
+            <div class="code-name">.icon-shangpinguanli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-caiwuguanli"></span>
+            <div class="name">
+              财务管理
+            </div>
+            <div class="code-name">.icon-caiwuguanli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-baobiaofenxi"></span>
+            <div class="name">
+              报表分析
+            </div>
+            <div class="code-name">.icon-baobiaofenxi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-cangku_cangchuguanli_o"></span>
+            <div class="name">
+              仓库_仓储管理_o
+            </div>
+            <div class="code-name">.icon-cangku_cangchuguanli_o
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shengchanguanli"></span>
+            <div class="name">
+              生产管理
+            </div>
+            <div class="code-name">.icon-shengchanguanli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-wuliuguanli"></span>
+            <div class="name">
+              物流管理
+            </div>
+            <div class="code-name">.icon-wuliuguanli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dianpuguanli"></span>
+            <div class="name">
+              店铺管理
+            </div>
+            <div class="code-name">.icon-dianpuguanli
+            </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-dingdanguanli35"></use>
+                </svg>
+                <div class="name">订单管理</div>
+                <div class="code-name">#icon-dingdanguanli35</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shangpinguanli"></use>
+                </svg>
+                <div class="name">商品管理</div>
+                <div class="code-name">#icon-shangpinguanli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-caiwuguanli"></use>
+                </svg>
+                <div class="name">财务管理</div>
+                <div class="code-name">#icon-caiwuguanli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-baobiaofenxi"></use>
+                </svg>
+                <div class="name">报表分析</div>
+                <div class="code-name">#icon-baobiaofenxi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-cangku_cangchuguanli_o"></use>
+                </svg>
+                <div class="name">仓库_仓储管理_o</div>
+                <div class="code-name">#icon-cangku_cangchuguanli_o</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shengchanguanli"></use>
+                </svg>
+                <div class="name">生产管理</div>
+                <div class="code-name">#icon-shengchanguanli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-wuliuguanli"></use>
+                </svg>
+                <div class="name">物流管理</div>
+                <div class="code-name">#icon-wuliuguanli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dianpuguanli"></use>
+                </svg>
+                <div class="name">店铺管理</div>
+                <div class="code-name">#icon-dianpuguanli</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>

public/iconfont/iconfont.css

+@font-face {
+  font-family: "iconfont"; /* Project id 3857911 */
+  src: url('iconfont.woff2?t=1673317221620') format('woff2'),
+       url('iconfont.woff?t=1673317221620') format('woff'),
+       url('iconfont.ttf?t=1673317221620') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-dingdanguanli35:before {
+  content: "\e727";
+}
+
+.icon-shangpinguanli:before {
+  content: "\e65d";
+}
+
+.icon-caiwuguanli:before {
+  content: "\e60a";
+}
+
+.icon-baobiaofenxi:before {
+  content: "\e661";
+}
+
+.icon-cangku_cangchuguanli_o:before {
+  content: "\eb51";
+}
+
+.icon-shengchanguanli:before {
+  content: "\eb37";
+}
+
+.icon-wuliuguanli:before {
+  content: "\e656";
+}
+
+.icon-dianpuguanli:before {
+  content: "\e62e";
+}
+

public/iconfont/iconfont.js

+window._iconfont_svg_string_3857911='<svg><symbol id="icon-dingdanguanli35" viewBox="0 0 1024 1024"><path d="M768 704 384 704l0-64 384 0L768 704zM768 384 384 384l0 64 384 0L768 384zM768 512 384 512l0 64 384 0L768 512zM768 768 384 768l0 64 384 0L768 768z"  ></path><path d="M128 832l64 0 0 64L128 896 64 896l0-64L64 0l576 0 64 0 0 64 0 64-64 0L640 64 128 64 128 832z"  ></path><path d="M256 192l0 832 640 0L896 192 256 192zM832 960 320 960 320 256l512 0L832 960z"  ></path></symbol><symbol id="icon-shangpinguanli" viewBox="0 0 1024 1024"><path d="M792.29952 1005.5424 241.28512 1005.5424c-64.6912 0-91.62752-46.41792-96.86016-70.96832-2.86208-16.09216-66.70336-373.90848-79.9232-472.0896-4.81792-35.87584 1.89952-64.51712 19.91168-85.13024 17.13152-19.55328 44.14976-30.336 76.09344-30.336 7.38304 0 13.25056 0.57856 16.44544 0.98816l679.68512 0c3.18976-0.41472 9.0624-0.98816 16.44032-0.98816 31.9488 0 58.96704 10.78272 76.06784 30.34624 18.04288 20.60288 24.73472 49.24416 19.9168 85.12-13.19424 98.17088-77.03552 456.00256-79.73376 471.18848C883.93216 959.11936 856.99584 1005.5424 792.29952 1005.5424L792.29952 1005.5424M160.50688 403.41504c-8.94976 0-25.20064 1.44896-33.62304 11.06944-8.53504 9.7536-8.23808 27.39712-6.47168 40.48896 13.0304 96.97792 78.70976 465.0752 79.37536 468.77696 1.31584 4.87936 9.0624 25.37984 41.50272 25.37984l551.0144 0c35.70176 0 41.45664-25.21088 41.67168-26.28096 0.50176-2.80064 66.18112-370.89792 79.1808-467.87584 1.77152-13.09184 2.06848-30.73536-6.44096-40.48896-8.43264-9.6256-24.6784-11.06944-33.62816-11.06944-5.37088 0-9.16992 0.50688-9.91232 0.62464-1.4592 0.2304-3.09248 0.36864-4.55168 0.36864L174.96576 404.40832c-1.56672 0-3.13856-0.13824-4.70528-0.39936C169.70752 403.93216 165.87776 403.41504 160.50688 403.41504L160.50688 403.41504M160.50688 403.41504 160.50688 403.41504zM239.80032 553.4976c0 15.43168 6.35392 30.76096 17.26464 41.67168 10.9056 10.91072 26.24512 17.25952 41.67168 17.25952s30.76096-6.3488 41.67168-17.25952 17.25952-26.24 17.25952-41.67168-6.3488-30.76096-17.25952-41.67168-26.24512-17.25952-41.67168-17.25952-30.76608 6.3488-41.6768 17.25952C246.15936 522.74176 239.80032 538.07104 239.80032 553.4976L239.80032 553.4976M239.80032 553.4976 239.80032 553.4976zM675.92192 553.4976c0 15.43168 6.3488 30.76096 17.25952 41.67168s26.24 17.25952 41.67168 17.25952 30.76608-6.3488 41.67168-17.25952c10.91072-10.91072 17.25952-26.24 17.25952-41.67168s-6.3488-30.76096-17.25952-41.67168c-10.9056-10.91072-26.24-17.25952-41.67168-17.25952s-30.76096 6.3488-41.67168 17.25952S675.92192 538.07104 675.92192 553.4976L675.92192 553.4976M675.92192 553.4976 675.92192 553.4976zM768.26112 308.63872c-15.5904 0-28.20096-12.63104-28.20096-28.20608 0-113.34656-100.16768-205.568-223.27296-205.568-123.1104 0-223.25248 92.22144-223.25248 205.568 0 15.57504-12.61568 28.20608-28.20096 28.20608-15.5904 0-28.20608-12.63104-28.20608-28.20608 0-144.45568 125.45024-261.96992 279.65952-261.96992 154.20416 0 279.67488 117.51424 279.67488 261.96992C796.46208 296.00768 783.85152 308.63872 768.26112 308.63872L768.26112 308.63872M768.26112 308.63872 768.26112 308.63872z" fill="#262536" ></path></symbol><symbol id="icon-caiwuguanli" viewBox="0 0 1024 1024"><path d="M512 320c-211.2 0-384 243.2-384 544 0 38.4 6.4 108.8 12.8 134.4l6.4 12.8h736l6.4-12.8c6.4-25.6 12.8-96 12.8-134.4C896 563.2 723.2 320 512 320z m339.2 646.4H172.8c-6.4-25.6-6.4-64-6.4-108.8C166.4 588.8 320 364.8 512 364.8c192 0 345.6 224 345.6 499.2 0 38.4-6.4 83.2-6.4 102.4z m-256-684.8L716.8 51.2H531.2l-25.6 32-64-70.4h-128l102.4 268.8h179.2zM422.4 57.6l83.2 89.6 44.8-51.2H640L569.6 243.2H448L377.6 57.6h44.8z m179.2 627.2c-19.2-12.8-44.8-25.6-76.8-38.4V524.8c12.8 0 25.6 6.4 38.4 12.8 12.8 6.4 19.2 19.2 32 32l19.2-12.8-38.4-38.4c-12.8-6.4-32-12.8-51.2-12.8v-38.4h-19.2v38.4c-32 0-57.6 12.8-76.8 25.6-12.8 12.8-25.6 32-25.6 57.6 0 19.2 6.4 38.4 25.6 51.2 12.8 12.8 38.4 25.6 76.8 32v140.8c-19.2 0-32-6.4-44.8-19.2-12.8-6.4-25.6-19.2-32-38.4l-19.2 19.2c12.8 19.2 25.6 32 44.8 44.8 19.2 12.8 38.4 19.2 57.6 19.2v38.4h19.2v-38.4c32 0 57.6-12.8 76.8-25.6 19.2-12.8 25.6-38.4 25.6-64-6.4-25.6-12.8-44.8-32-64z m-96-38.4c-25.6-6.4-44.8-12.8-57.6-25.6-12.8-6.4-19.2-19.2-19.2-38.4s6.4-32 19.2-38.4c12.8-12.8 32-19.2 51.2-19.2v121.6h6.4z m76.8 147.2c-12.8 12.8-32 19.2-57.6 19.2v-134.4c25.6 6.4 44.8 19.2 57.6 25.6 12.8 12.8 19.2 25.6 19.2 38.4 0 25.6-6.4 38.4-19.2 51.2z" fill="" ></path></symbol><symbol id="icon-baobiaofenxi" viewBox="0 0 1024 1024"><path d="M602.88 629.333333a25.173333 25.173333 0 0 1 26.453333 26.88v106.666667a26.88 26.88 0 0 1-53.333333 0v-106.666667a25.173333 25.173333 0 0 1 26.88-26.88zM245.333333 512a19.626667 19.626667 0 0 0 16.213334-5.546667l175.786666-170.666666L533.333333 426.666667a26.026667 26.026667 0 0 0 37.546667 0l165.12-160V298.666667a42.666667 42.666667 0 0 0 10.666667 21.333333 27.306667 27.306667 0 0 0 21.333333 10.666667 25.173333 25.173333 0 0 0 26.88-26.88V208.213333c0-21.333333-5.546667-26.88-21.333333-26.88h-106.666667a25.173333 25.173333 0 0 0-26.88 26.88 25.173333 25.173333 0 0 0 26.88 26.453334h26.453333L554.666667 373.333333l-96-90.453333a25.6 25.6 0 0 0-37.12 0L229.12 469.333333a25.6 25.6 0 0 0 0 37.12c0 5.546667 10.666667 5.546667 16.213333 5.546667z m527.786667 10.666667a25.173333 25.173333 0 0 0-26.453333 26.88v213.333333a26.88 26.88 0 0 0 53.333333 0v-213.333333c-5.546667-16.213333-15.786667-26.88-26.88-26.88z m-367.786667-26.88v266.666666a26.88 26.88 0 1 0 53.333334 0v-266.666666a26.88 26.88 0 0 0-53.333334 0z m506.88 389.546666H165.546667a25.173333 25.173333 0 0 1-26.88-26.88V112.213333A25.173333 25.173333 0 0 0 112.213333 85.333333a25.173333 25.173333 0 0 0-26.88 26.88v773.12A50.346667 50.346667 0 0 0 138.666667 938.666667h773.546666a26.88 26.88 0 0 0 0-53.333334zM234.666667 602.88v160a25.173333 25.173333 0 0 0 26.88 26.453333 25.173333 25.173333 0 0 0 26.453333-26.453333v-160a25.173333 25.173333 0 0 0-26.453333-26.88 25.173333 25.173333 0 0 0-26.88 26.88z" fill="#666666" ></path></symbol><symbol id="icon-cangku_cangchuguanli_o" viewBox="0 0 1024 1024"><path d="M512 490.666667V469.333333h42.666667v25.6c12.8 4.266667 25.6 8.533333 38.4 17.066667l17.066666-17.066667 29.866667 29.866667-17.066667 17.066667c8.533333 12.8 12.8 25.6 17.066667 38.4h25.6v42.666666H640c-4.266667 12.8-8.533333 25.6-17.066667 38.4l17.066667 17.066667-29.866667 29.866667-17.066666-17.066667c-12.8 8.533333-25.6 12.8-38.4 17.066667v17.066666h-42.666667v-25.6c-12.8-4.266667-25.6-8.533333-38.4-17.066666l-17.066667 17.066666-29.866666-25.6 17.066666-17.066666c-8.533333-12.8-12.8-25.6-17.066666-38.4h-21.333334v-42.666667h25.6c4.266667-12.8 8.533333-25.6 17.066667-38.4l-21.333333-17.066667 29.866666-29.866666 17.066667 17.066666c12.8-8.533333 25.6-12.8 38.4-17.066666z m328.533333 320v-42.666667h85.333334v-217.6l-234.666667-234.666667-21.333333 21.333334-29.866667-29.866667L691.2 256l320 320h-42.666667V810.666667h-128zM217.6 810.666667h-128v-234.666667H42.666667L362.666667 256l51.2 51.2-29.866667 29.866667-21.333333-21.333334L128 550.4V768h85.333333v42.666667z m597.333333-234.666667V810.666667h-554.666666v-234.666667H213.333333L533.333333 256l320 320h-38.4z m-512-25.6V768h469.333334v-217.6l-234.666667-234.666667-234.666667 234.666667z m230.4 110.933333c34.133333 0 64-29.866667 64-64s-29.866667-64-64-64-64 29.866667-64 64 29.866667 64 64 64z m0-42.666666c-12.8 0-21.333333-8.533333-21.333333-21.333334s8.533333-21.333333 21.333333-21.333333 21.333333 8.533333 21.333334 21.333333-8.533333 21.333333-21.333334 21.333334z" fill="#444444" ></path></symbol><symbol id="icon-shengchanguanli" viewBox="0 0 1024 1024"><path d="M270.304 483.392L512 604.224l241.696-120.832a32 32 0 1 1 28.608 57.216l-256 128a32 32 0 0 1-28.608 0l-256-128a32 32 0 0 1 28.608-57.216z m0 128L512 732.224l241.696-120.832a32 32 0 0 1 28.608 57.216l-256 128a32 32 0 0 1-28.608 0l-256-128a32 32 0 0 1 28.608-57.216zM327.584 384L512 476.224 696.448 384 512 291.776 327.552 384z m198.72-156.608l256 128a32 32 0 0 1 0 57.216l-256 128a32 32 0 0 1-28.608 0l-256-128a32 32 0 0 1 0-57.216l256-128a32 32 0 0 1 28.608 0z" fill="#202425" ></path></symbol><symbol id="icon-wuliuguanli" viewBox="0 0 1024 1024"><path d="M332.816 283.68c-22.784 0-44.64 9.024-60.72 25.088l-115.76 115.52A85.52 85.52 0 0 0 131.2 484.8v185.92a50.768 50.768 0 0 0 50.848 50.704h70.08a106.736 106.736 0 0 1 105.024-87.376 106.736 106.736 0 0 1 105.04 87.36h140.16a106.736 106.736 0 0 1 105.024-87.36 106.736 106.736 0 0 1 105.024 87.36h17.552a50.768 50.768 0 0 0 50.848-50.688v-122.768H530.08a54.192 54.192 0 0 1-54.224-54.144V283.68h-143.04z m-87.84-2.08a124.384 124.384 0 0 1 87.84-36.32h162.24a19.2 19.2 0 0 1 19.2 19.2v229.328c0 8.672 7.04 15.76 15.824 15.76h369.92a19.2 19.2 0 0 1 19.2 19.2v141.968c0 49.248-40 89.104-89.248 89.104h-35.024a19.2 19.2 0 0 1-19.2-19.2c0-37.616-30.56-68.176-68.352-68.176a68.272 68.272 0 0 0-68.352 68.16 19.2 19.2 0 0 1-19.2 19.2H444.72a19.2 19.2 0 0 1-19.2-19.2c0-37.6-30.56-68.16-68.368-68.16a68.272 68.272 0 0 0-68.352 68.16 19.2 19.2 0 0 1-19.2 19.2h-87.552A89.168 89.168 0 0 1 92.8 670.752v-185.92c0-32.912 13.104-64.464 36.416-87.712l115.744-115.52z" fill="#000000" ></path><path d="M355.552 671.2a68.256 68.256 0 0 0-68.352 68.16c0 37.616 30.56 68.176 68.352 68.176a68.256 68.256 0 0 0 68.352-68.16c0-37.616-30.56-68.176-68.352-68.176z m-106.752 68.16c0-58.88 47.84-106.56 106.752-106.56 58.928 0 106.752 47.68 106.752 106.56 0 58.896-47.84 106.576-106.752 106.576-58.912 0-106.752-47.68-106.752-106.56zM707.552 671.2a68.256 68.256 0 0 0-68.352 68.16c0 37.616 30.56 68.176 68.352 68.176a68.256 68.256 0 0 0 68.368-68.16c0-37.616-30.56-68.176-68.368-68.176z m-106.752 68.16c0-58.88 47.84-106.56 106.752-106.56 58.928 0 106.752 47.68 106.752 106.56 0 58.896-47.84 106.576-106.752 106.576-58.912 0-106.752-47.68-106.752-106.56zM332.736 366.432a19.2 19.2 0 0 1-0.032 27.152l-71.136 70.992a19.2 19.2 0 0 1-27.136-27.184l71.152-70.976a19.2 19.2 0 0 1 27.152 0.016zM476.8 188a51.2 51.2 0 0 1 51.2-51.2h340a51.2 51.2 0 0 1 51.2 51.2v336a19.2 19.2 0 0 1-19.2 19.2H528a51.2 51.2 0 0 1-51.2-51.2v-304z m51.2-12.8a12.8 12.8 0 0 0-12.8 12.8v304a12.8 12.8 0 0 0 12.8 12.8h352.8v-316.8a12.8 12.8 0 0 0-12.8-12.8H528z" fill="#000000" ></path></symbol><symbol id="icon-dianpuguanli" viewBox="0 0 1024 1024"><path d="M140.13110586 487.90748164a93.04384746 93.04384746 0 0 0 41.14067519 9.73749815c38.49778388 0 65.47939365-26.12744385 80.96492901-46.64753701 15.927692 21.05269013 43.36150781 47.67253594 82.72350703 48.18503584h1.76862656c39.81420527 0 69.4588043-25.122542 85.82865382-44.08503662a163.7989752 163.7989752 0 0 0 26.54950253 25.63504188l2.2107832 1.53749971c1.76862656 1.00490185 3.09509737 2.56249951 4.86372481 3.58749932 1.32646992 1.00490185 2.65294073 1.53749971 4.01960654 2.56249863l1.33651933 1.00490186 2.65293985 1.5374997c1.31642138 0.5124999 2.65294073 1.53749971 4.01960742 2.00980372l1.32646992 0.5124999c1.32646992 0.5124999 2.21078408 1.00490185 3.53725401 1.53749971a25.28332646 25.28332646 0 0 0 3.09509736 1.00490097c2.21078408 1.00490185 4.42156729 1.53749971 7.08455654 2.56249952a62.51493427 62.51493427 0 0 0 18.94239669 2.6026954h0.45220605a70.9561081 70.9561081 0 0 0 18.08822989-2.56249951 1.4872544 1.4872544 0 0 0 1.32647079-0.5124999 56.82719003 56.82719003 0 0 0 7.03431124-2.56249864c0.88431328-0.5124999 1.76862656-0.5124999 2.66299013-1.00490185 1.31642138-0.5124999 2.21078408-1.00490185 3.53725401-1.53749971l1.32646992-0.5124999a14.72180977 14.72180977 0 0 0 4.01960654-2.0098037l2.65294073-1.53749971 1.32646992-1.00490098c1.32646992-1.00490185 2.65294073-1.53749971 4.01960654-2.56249951 1.76862656-1.00490185 3.09509737-2.00980371 5.30588144-3.58749932l1.32646992-1.00490186a184.75117558 184.75117558 0 0 0 26.54950254-25.63504189c16.42009394 18.38970088 46.02449707 44.02474277 85.83870235 44.02474278h1.77867597c38.92989112-0.5124999 66.79581503-27.1323457 82.72350703-48.18503585 15.48553536 21.02254365 42.47719453 46.64753614 80.96492901 46.64753702a94.46075859 94.46075859 0 0 0 41.20096904-9.73749815c74.362725-34.86003926 75.20684238-117.90511523 65.47939366-156.86515283-0.44215664-1.00490185-0.44215664-2.00980371-0.88431328-3.07499941L849.77257959 83.96715078c-3.09509737-7.17499776-9.29534062-11.78749688-15.92769199-11.78749687H583.43343682c-0.88431328 0-1.76862656-0.5124999-2.65294073-0.5124999-0.44215664 0-1.32646992 0.5124999-1.76862744 0.5124999H443.18935654c-0.44215664 0-1.33651933-0.5124999-1.77867597-0.5124999-0.87426474 0-1.75857803 0.5124999-2.65293985 0.5124999h-248.21071699c-6.6423999 0-13.27475127 4.61249912-15.92769199 11.78749687l-99.08330625 244.00017862a8.15980166 8.15980166 0 0 0-0.88431328 3.07499941C64.91421494 370.00236729 65.79852822 453.04744239 140.13110586 487.90748164z m206.60778721-30.24754013h-1.32646992c-34.06616719-0.5124999-57.06836719-33.32253955-65.03723789-46.64753614l42.03503789-297.83276279h99.97766894l-7.03431211 303.48031025c-8.41102734 11.27499698-33.16175596 41.01003809-68.57449102 41.0100372z m199.5332792-10.73235059l-0.88431329 0.5124999c-1.32646992 1.00490185-2.22083261 1.53749971-3.537254 2.56249951a23.96690508 23.96690508 0 0 0-3.10514678 2.00980371l-0.88431328 0.5124999-1.32646992 0.51249991c-0.88431328 0.5124999-1.32646992 0.5124999-2.21078408 1.00490097l-0.88431329 0.5124999-0.88431328 0.51249991c-0.44215664 0.5124999-1.32646992 0.5124999-2.21078408 1.00490185l-1.32646992 0.5124999c-1.33651933 0.5124999-2.21078408 1.00490185-3.54730342 1.53749971h-0.88431328a43.12033154 43.12033154 0 0 1-10.61176201 1.53749971h-1.32646992a43.69312529 43.69312529 0 0 1-11.05391865-1.53749971l-4.01960655-1.53749971-2.65294072-0.5124999a3.16544063 3.16544063 0 0 1-1.76862656-1.00490185l-0.88431416-0.51249991-0.89436182-0.5124999c-0.88431328-0.5124999-1.31642138-0.5124999-2.21078409-1.00490097l-3.09509735-2.00980372-2.65294073-1.53749971c-1.32646992-1.00490185-2.21078408-1.53749971-3.53725312-2.5624995l-1.26617695-1.00490098c-12.83259463-9.73749727-23.0022-22.56004248-27.87597247-29.22254121l7.03431212-303.97271133h106.19801015L571.48515547 420.80014707a115.85511562 115.85511562 0 0 1-25.2129832 26.12744385z m133.60167948 10.76249707h-1.2862749c-42.91935117 0-71.23748028-45.62253633-71.67963691-45.62253633l-0.44215664-0.5124999-7.03431211-298.34526182h99.98771836l42.46714512 302.47540752c-9.28529122 14.86249629-30.96102129 41.52253799-61.94214053 42.03503789z m237.15679747-113.80511602c2.21078408 10.77254648 14.59117266 77.92007695-45.13013438 106.11761836a64.564933 64.564933 0 0 1-27.86592392 6.66249785c-41.20096904 0-65.03723701-50.24508398-65.47939365-50.24508398a28.7904331 28.7904331 0 0 0-3.10514678-4.61249912l-40.25636104-288.60776456h88.03943701z m-808.74487794 0l93.7774257-230.70532939h84.94433964l-41.14067519 295.27026328c-5.30588057 10.24999717-28.31812998 47.67253594-64.15292374 47.67253594a64.564933 64.564933 0 0 1-27.86592392-6.66249873c-59.73135645-27.1323457-48.23528115-93.29507227-45.57229101-105.60511758z m827.32551065 567.46798331h-71.24752969v-348.60039522c0-11.2850455-7.95882128-20.51004375-17.68627002-20.51004375s-17.69631856 9.22499737-17.69631855 20.51004375v348.57024785H405.58593623V562.75256006c0-11.2850455-7.9688707-20.51004375-17.70636797-20.51004375s-17.69631856 9.19485-17.69631855 20.51004375v348.57024785h-172.54162002V562.75256006c0-11.2850455-7.95882128-20.51004375-17.69631856-20.51004375s-17.69631856 9.22499737-17.69631855 20.51004375v348.57024785H94.55881484c-9.72744873 0-17.69631856 9.22499737-17.69631856 20.51004375s7.9688707 20.49999434 17.69631856 20.49999433h841.04241768c9.72744873 0 17.69631856-9.22499737 17.69631855-20.49999433s-7.9688707-20.51004375-17.69631855-20.51004375z m0 0"  ></path><path d="M935.60123252 962H94.55881484c-14.36004492 0-26.03700263-13.53602549-26.03700263-30.14705039s11.67695771-30.14705039 26.03700263-30.14705127h59.34949365V562.74251065c0-16.63112285 11.67695771-30.14705039 26.03700264-30.14705039s26.03700263 13.53602549 26.03700264 30.14705039v338.91314326h155.86025185V562.74251065c0-16.63112285 11.68700625-30.14705039 26.03700264-30.14705039s26.04705205 13.53602549 26.04705117 30.14705039v338.91314326h406.71386016V562.74251065c0-16.63112285 11.67695771-30.14705039 26.03700263-30.14705039s26.03700263 13.53602549 26.03700265 30.14705039v338.91314326h62.88674765c14.34999638 0 26.03700263 13.53602549 26.03700264 30.14705039s-11.72720302 30.1972957-26.03700264 30.1972957zM94.55881484 920.98996192c-5.1551455 0-9.35563447 4.86372393-9.35563447 10.83284032s4.20048896 10.84288887 9.35563447 10.84288888h841.04241768c5.1551455 0 9.34558594-4.86372393 9.34558594-10.84288888s-4.19044043-10.83284033-9.34558594-10.83284032h-79.56811582V562.74251065c0-5.96911641-4.20048896-10.83284033-9.35563448-10.83284034s-9.31543857 4.86372393-9.31543857 10.83284034v358.24745127h-440.14693886V562.74251065c0-5.96911641-4.19044043-10.83284033-9.35563448-10.83284034s-9.34558594 4.86372393-9.34558593 10.83284034v358.24745127H189.3009456V562.74251065c0-5.96911641-4.20048896-10.83284033-9.35563446-10.83284034s-9.35563447 4.86372393-9.35563448 10.83284034v358.24745127z m418.08934688-410.09032969a70.89581426 70.89581426 0 0 1-21.62548477-2.89411611l-3.21568505-1.11544102a42.00489053 42.00489053 0 0 1-4.79338067-1.79877393 12.12916377 12.12916377 0 0 1-3.71813642-1.34656875l-1.19583281-0.472304 1.36666581-9.72744785-3.95931269 8.65220361a21.77621982 21.77621982 0 0 1-3.09509736-1.55759765l-6.86347823-4.19044044a35.17155878 35.17155878 0 0 1-4.01960654-2.56249862 17.54558349 17.54558349 0 0 1-2.62279336-1.94950987l-4.11004776-2.91421494a182.60068536 182.60068536 0 0 1-22.4093083-20.45979844c-16.79190732 17.41494638-46.3360166 40.27645987-85.66786846 40.27645986h-1.75857802c-30.36812872-0.39191133-58.7766999-15.42524062-82.72350703-43.64287997-17.64607324 20.7411706-44.64778183 42.11542969-80.96492901 42.11542968a100.87203164 100.87203164 0 0 1-44.32621289-10.47107549C57.94019756 459.76018555 56.18161953 371.55996494 66.41151875 329.26365283a19.61568106 19.61568106 0 0 1 1.60784209-5.50686093l99.07325771-243.89968888C170.86099941 69.60710586 180.34727188 62.50245049 190.55707315 62.50245049h248.2107161a4.79338066 4.79338066 0 0 1 2.66299015-0.45220518l136.50584502 0.50245049a9.04411494 9.04411494 0 0 1 2.85392021-0.50245049l253.07444092 0.50245049c9.71739932 0 18.90220078 6.73284112 23.39411132 17.15367217l100.16860079 247.51733466c10.83284033 43.15047802 9.61690958 132.35560137-70.00145157 169.68769893a101.95732529 101.95732529 0 0 1-44.27596846 10.45097754c-36.89999033 0-63.69066914-21.31396435-81.03527226-42.0450873-17.99778955 21.10293545-45.55219307 43.10023359-82.55267315 43.5725376h-1.8791666c-37.3521955 0-66.45414815-20.71102412-85.70806523-40.43724434a180.63107842 180.63107842 0 0 1-22.02744463 20.36935723l-3.20563652 2.32132324c-1.58774502 1.12548955-2.84387167 2.00980371-4.36127344 2.88406757a13.73700586 13.73700586 0 0 1-2.00980283 1.27622549l-5.96911641 3.83872412a19.21372031 19.21372031 0 0 1-5.0245084 2.54240157l-9.47622305 3.84877353c-1.24607813 0.5124999-2.42181299 1.00490185-3.5774499 1.36666583l-0.82401943 1.00490185-3.21568506 0.3416669a77.37742969 77.37742969 0 0 1-19.635779 2.65293984z m-25.83602227-24.48945351a6.66249785 6.66249785 0 0 1 1.94950899 0.54264638 30.80023682 30.80023682 0 0 0 3.58749932 1.3264708l3.45686132 1.21593076c7.97891924 2.45196035 19.62572959 3.14534268 31.93577579 0.05024531l0.26127421-0.30147099 2.48210772-0.56274434a28.64974747 28.64974747 0 0 0 4.01960654-1.42696055l8.29043877-3.39656747a16.73161347 16.73161347 0 0 0 3.3262251-1.4470585l3.51715517-2.12034288a21.74607247 21.74607247 0 0 1 3.3262251-2.30122441l2.00980283-1.30637285c1.07524512-0.62303906 1.94950898-1.25612754 3.01470557-2.00980283l1.6580874-1.16568633a177.41539248 177.41539248 0 0 0 26.27817891-25.2129832l5.80833193-6.73284111 5.89877315 6.6423999c16.73161347 18.86200488 44.21567461 41.35170411 80.01027245 41.3517041h1.77867598c35.41273506-0.46225459 61.13821904-24.67033682 76.45292051-44.89900664l6.36102773-8.3909294 6.26053711 8.49141915c14.54092734 19.73626875 39.29165596 43.26101807 74.61395069 43.26101718a87.42644648 87.42644648 0 0 0 37.91494072-8.98382021c68.67498164-32.21714795 69.73012793-109.10217656 60.69606152-145.25853926l-0.5124999-1.85906777-98.99286504-243.82934561c-1.59779355-3.71813643-4.91396924-6.25048857-8.37083144-6.25048858l-392.8361669-0.29142158a7.94877276 7.94877276 0 0 1-2.24093144 0.29142158h-248.21071611a9.14460557 9.14460557 0 0 0-8.24019434 5.92891964L83.0828375 332.08742656c0 0.09044121-0.07034326 0.16078448-0.09044121 0.22107832l-0.31151953 1.42696055c-9.04411494 36.17646065-7.97891924 113.04139043 60.59557178 145.20829394l0.10048974 0.05024444a86.19041777 86.19041777 0 0 0 37.91494073 8.98382109c34.67915684 0 59.7514544-23.56494433 74.68429394-43.34140986l6.27058653-8.31053672 6.28063505 8.29043877c15.31470146 20.2286707 41.04018457 44.43675293 76.54336172 44.89900752h1.68823477c38.57817568 0 66.63503057-25.85612021 79.92988066-41.26126289l6.07965469-7.03431211 5.89877314 7.28553692a155.07642832 155.07642832 0 0 0 25.122542 24.20808222l1.87916659 1.29632256a21.84656308 21.84656308 0 0 1 3.01470469 2.2208335l2.21078409 1.6178915a44.47694883 44.47694883 0 0 1 3.9593127 2.52230273l3.10514589 2.00980372a10.92328154 10.92328154 0 0 1 2.00980283 1.00490185l6.81323379 3.01470469z m27.13234571-17.08332891a53.55121113 53.55121113 0 0 1-14.18921191-1.75857804l-6.2203421-1.95955839a9.31543857 9.31543857 0 0 1-4.91396923-2.38161709l-1.00490098-0.5526958a11.98847724 11.98847724 0 0 1-2.23088203-1.05514629l-10.09926211-6.65244931c-14.92279013-11.33529082-25.7254831-24.89141513-30.95097188-32.04631495l-2.0098037-2.81372432 7.38602753-317.07662958h122.35682988l7.83823272 321.01584346-1.90931309 2.77352929a126.00462217 126.00462217 0 0 1-27.24288487 28.24778584l-4.25073427 2.91421494a31.5639624 31.5639624 0 0 0-3.09509649 2.00980371l-1.8389707 1.1455875-5.02450839-8.14975224 1.52745117 9.68725195-12.58136983 5.11494961a48.30562442 48.30562442 0 0 1-11.51617324 1.58774502z m15.57597568-21.76617041l3.88896944 6.98406679-2.86396963-9.1546541a15.2443582 15.2443582 0 0 1 2.19068525-1.00490186l5.09485166 8.13970372-2.81372431-9.17475293a19.43479863 19.43479863 0 0 1 3.09509735-2.00980284l3.53725401-2.57254892 4.59240029 8.15980166-4.50195908-8.13970371a106.94163779 106.94163779 0 0 0 21.28381699-21.41445498l-7.16494834-295.02908614h-89.9487501l-6.77303789 290.81854864c5.10490019 6.6825958 13.68676055 16.78185791 24.01715039 24.6200915l10.17965391 6.86347822a5.16519492 5.16519492 0 0 1 1.7987748 0.78382354l3.85882208 1.67818535 5.22548877 1.90931309a39.95489092 39.95489092 0 0 0 18.61077919-0.28137217l3.60759727-1.27622549c0.87426474-0.39191133 1.60784297-0.69338232 2.28112646-0.93455859l0.21102979-0.11053916 0.30147011-0.10048975z m-32.1568541-0.65318643l1.72843066 1.3666667a4.88382187 4.88382187 0 0 0-1.67818535-1.34656875z m-2.46200888-0.50245049l2.0098037 0.33161749a5.96911641 5.96911641 0 0 0-1.95955839-0.28137218z m185.03254774 20.92205303h-1.34656875c-37.29190166 0-64.41419795-30.07670713-77.26689052-48.01420283l-2.69313662-3.12524385-0.53259786-4.4316167-7.31568427-308.27369091h115.66418466l44.16542842 314.5342289-2.00980283 3.24583242c-8.52156651 13.65661406-32.26739326 45.45170332-68.57449101 46.04459502zM614.69592823 407.73642559c11.19460518 15.40514268 33.89533418 40.2463125 63.86150214 40.2463125l1.32646992 9.667154-0.12058857-9.667154c26.32842422-0.4321081 44.89900752-22.49974863 53.25978955-34.89018663L692.24419092 122.84679746h-84.30120264z m-267.95703516 59.59066992h-1.32646992c-37.85464688-0.56274521-62.88674766-35.72425459-71.89066671-50.8078292l-1.9193625-3.20563652 43.72327266-309.80114122h115.63403643l-7.38602667 316.84550186-1.93946044 2.61274483c-12.36029062 16.56077959-38.48773447 44.35636026-74.89532285 44.35636025z m-57.57081768-58.68625869c8.79289013 13.76715323 28.63969805 38.93994053 56.3448375 39.3519498l1.22598018 9.66715489v-9.66715489c28.01665898 0 49.240183-20.93210244 60.29410078-35.12131347l6.76298847-290.02467568h-84.30120263z m554.85646612 57.66125888c-34.50832383 0-58.05317021-30.14705039-69.93110831-50.24508398l-2.47205742-4.32107754a17.08332891 17.08332891 0 0 0-2.00980371-3.12524385l-1.89926455-2.21078408-42.2058709-302.89746621h103.01247246l96.61124795 238.111454c8.49141914 41.27131231-0.20098037 93.75732773-50.09434893 117.31222354a72.22228418 72.22228418 0 0 1-31.01126659 7.37597812z m-60.79655128-69.28797128l3.01470469 5.38627324c9.34558594 16.64117227 29.26273711 44.57743857 57.74165068 44.57743857a57.7115042 57.7115042 0 0 0 24.71053272-5.94901758c49.56175107-23.39411133 43.7433706-76.65390088 40.34680312-93.97840605L817.92724502 122.84679746h-72.93576445z m-601.50400312 68.77547138a72.21223565 72.21223565 0 0 1-31.04141309-7.38602754c-65.64017812-29.84558028-53.59140703-102.61051084-50.50635908-116.89016396l0.5526958-1.76862657 96.0384542-236.23228916h100.0480122L253.02176211 413.41412041c-2.77352842 5.37622383-28.32817852 52.37547627-71.297775 52.37547539zM116.1742502 347.10065791c-3.54730254 17.22401455-9.80784052 70.34311846 40.7186165 93.35536612a57.77179805 57.77179805 0 0 0 24.83112041 6.02941025c31.26249141 0 51.53135888-33.06126533 56.17400449-41.46224326l39.3117539-282.17639355h-69.85071649z"  ></path><path d="M742.25814805 589.40255234c-6.63235136-8.19999756-18.1384752-8.19999756-25.21298321 0L564.85280411 762.66770117c-7.03431211 7.68749766-7.03431211 21.01249424 0 29.2124918 3.53725401 4.11004776 7.95882128 6.16004737 12.39043798 6.16004736a17.64607324 17.64607324 0 0 0 12.38038858-5.63749804L741.81599141 619.13759346c7.52671406-8.72254688 7.52671406-22.04754258 0.44215664-29.73504112z m-90.69237686 265.02272227a17.66617207 17.66617207 0 0 0 12.39043711-5.63749893l87.15512373-98.93257119c7.03431211-7.69754707 7.03431211-21.02254365 0-29.22254033-6.63235136-8.19999756-18.08823076-8.19999756-25.22303261 0l-86.71296622 98.93257032c-7.03431211 7.68749766-7.03431211 21.01249424 0 29.2225412a16.92254443 16.92254443 0 0 0 12.39043799 5.63749893z m-349.51485586-174.85289385v77.91002754c0 11.2850455 7.9688707 20.51004375 17.69631855 20.51004375s17.69631856-9.22499737 17.69631856-20.51004375v-77.85978223c0-11.27499698-7.95882128-20.49999434-17.69631856-20.49999433s-17.69631856 9.22499737-17.69631855 20.49999433z m0 0"  ></path></symbol></svg>',function(c){var l=(l=document.getElementsByTagName("script"))[l.length-1],a=l.getAttribute("data-injectcss"),l=l.getAttribute("data-disable-injectsvg");if(!l){var t,h,e,n,i,o=function(l,a){a.parentNode.insertBefore(l,a)};if(a&&!c.__iconfont__svg__cssinject__){c.__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(l){console&&console.log(l)}}t=function(){var l,a=document.createElement("div");a.innerHTML=c._iconfont_svg_string_3857911,(a=a.getElementsByTagName("svg")[0])&&(a.setAttribute("aria-hidden","true"),a.style.position="absolute",a.style.width=0,a.style.height=0,a.style.overflow="hidden",a=a,(l=document.body).firstChild?o(a,l.firstChild):l.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),t()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(e=t,n=c.document,i=!1,m(),n.onreadystatechange=function(){"complete"==n.readyState&&(n.onreadystatechange=null,s())})}function s(){i||(i=!0,e())}function m(){try{n.documentElement.doScroll("left")}catch(l){return void setTimeout(m,50)}s()}}(window);
\ No newline at end of file

public/iconfont/iconfont.json

+{
+  "id": "3857911",
+  "name": "erp-official-website",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "763150",
+      "name": "订单管理",
+      "font_class": "dingdanguanli35",
+      "unicode": "e727",
+      "unicode_decimal": 59175
+    },
+    {
+      "icon_id": "1277993",
+      "name": "商品管理",
+      "font_class": "shangpinguanli",
+      "unicode": "e65d",
+      "unicode_decimal": 58973
+    },
+    {
+      "icon_id": "1440372",
+      "name": "财务管理",
+      "font_class": "caiwuguanli",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
+    {
+      "icon_id": "4320366",
+      "name": "报表分析",
+      "font_class": "baobiaofenxi",
+      "unicode": "e661",
+      "unicode_decimal": 58977
+    },
+    {
+      "icon_id": "5387773",
+      "name": "仓库_仓储管理_o",
+      "font_class": "cangku_cangchuguanli_o",
+      "unicode": "eb51",
+      "unicode_decimal": 60241
+    },
+    {
+      "icon_id": "7335566",
+      "name": "生产管理",
+      "font_class": "shengchanguanli",
+      "unicode": "eb37",
+      "unicode_decimal": 60215
+    },
+    {
+      "icon_id": "11481180",
+      "name": "物流管理",
+      "font_class": "wuliuguanli",
+      "unicode": "e656",
+      "unicode_decimal": 58966
+    },
+    {
+      "icon_id": "15077383",
+      "name": "店铺管理",
+      "font_class": "dianpuguanli",
+      "unicode": "e62e",
+      "unicode_decimal": 58926
+    }
+  ]
+}

public/index.html

@@ -22,6 +22,8 @@
   <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
   <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
   <% } %>
+  <link rel="stylesheet" href="./iconfont/iconfont.css">
+  <script src="./iconfont/iconfont.js"></script>
   <!-- 使用CDN的CSS文件 -->
   <script src="./config.js"></script>
 </head>

src/components/product-intro.vue

@@ -3,7 +3,7 @@
     <div class="function_bg">
       <h2 style="text-align: center; padding-bottom: 40px">产品优势</h2>
       <div class="product-pros">
-        <div class="product-pros-item">
+        <!-- <div class="product-pros-item">
           <div class="grid-content">
             <p>
               <svg
@@ -258,6 +258,376 @@
               支持商品一键发布下架。
             </p>
           </div>
+        </div> -->
+        <div class="product-pros-tabs">
+          <div
+            class="tab-item"
+            :class="{ active: activeTab === index }"
+            v-for="(item, index) in tabItems"
+            @click="onChangeTabIndex(index)"
+            :key="index">
+            <i class="iconfont" :class="item.icon"></i>
+            <span class="tab-item-name">{{ item.title }}</span>
+          </div>
+        </div>
+        <div class="product-pros-contents">
+          <div class="tab-pane" v-show="activeTab === 0">
+            <div class="tab-pane_top">
+              <img src="../assets/images/solution-bg.png" />
+              <span class="text">
+                智能分析采购需求，不同类型的采购形式配置，同时合理管控供应商及整个采购流程，每一个环节都清晰明了
+              </span>
+              <div class="free-btn">
+                <el-button type="primary" size="small">免费试用</el-button>
+              </div>
+            </div>
+            <div class="tab-pane_bottom">
+              <div class="row">
+                <div class="row-item">
+                  <div class="item-text">
+                    <span>智能备货分析</span>
+                  </div>
+                  <div class="item-des">
+                    <span>
+                      统计本地仓客户订单销量，根据备货规则提示本地仓库是否需要补货，且提供参考补货数量
+                    </span>
+                  </div>
+                </div>
+                <div class="row-item">
+                  <div class="item-icon"></div>
+                  <div class="item-text">
+                    <span>1688自动下单</span>
+                  </div>
+                  <div class="item-des">
+                    <span>设置规则后自动下单，节省人力成本</span>
+                  </div>
+                </div>
+                <div class="row-item">
+                  <div class="item-icon"></div>
+                  <div class="item-text">
+                    <span>加急采购</span>
+                  </div>
+                  <div class="item-des">
+                    <span>库存不足，系统自动加急采购，可一键生成采购单</span>
+                  </div>
+                </div>
+                <div class="row-item">
+                  <div class="item-icon"></div>
+                  <div class="item-text">
+                    <span>不良品管理</span>
+                  </div>
+                  <div class="item-des">
+                    <span>针对不良品的退换货流程管理</span>
+                  </div>
+                </div>
+                <div class="row-item">
+                  <div class="item-icon"></div>
+                  <div class="item-text">
+                    <span>加工采购</span>
+                  </div>
+                  <div class="item-des">
+                    <span>支持原料采购、成品加工，实现自主加工产品</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="tab-pane" v-show="activeTab === 1">
+            <div class="tab-pane_top">
+              <img src="../assets/images/solution-bg.png" />
+              <span class="text">
+                系统智能化实现自动分仓、自动审单、标记发货及监控、发货超时提醒，多种订单状态满足客户日常处理订单的所有需求
+              </span>
+              <div class="free-btn">
+                <el-button type="primary" size="small">免费试用</el-button>
+              </div>
+            </div>
+            <div class="tab-pane_bottom">
+              <div class="row">
+                <div class="row-item">
+                  <div class="item-text">
+                    <span>同步订单</span>
+                  </div>
+                  <div class="item-des">
+                    <span>
+                      系统自动抓取平台上的订单到客户订单页面
+                    </span>
+                  </div>
+                </div>
+                <div class="row-item">
+                  <div class="item-text">
+                    <span>智能发货</span>
+                  </div>
+                  <div class="item-des">
+                    <span>FBA库存不足时，对库存现有的商品数先发货，再去采购不足商品</span>
+                  </div>
+                </div>
+                <div class="row-item">
+                  <div class="item-text">
+                    <span>自动派单</span>
+                  </div>
+                  <div class="item-des">
+                    <span>自动派单，扫码自动打印物流面单</span>
+                  </div>
+                </div>
+                <div class="row-item">
+                  <div class="item-icon"></div>
+                  <div class="item-text">
+                    <span>批量审核</span>
+                  </div>
+                  <div class="item-des">
+                    <span>订单批量审核，一键拆分、合并订单；</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="tab-pane" v-show="activeTab === 2">
+            <div class="tab-pane_top">
+              <img src="../assets/images/solution-bg.png" />
+              <span class="text">
+                智能高效的仓储管理系统，集收货、入库、出库等库内作业为一体，对信息、资源更完美的管理
+              </span>
+              <div class="free-btn">
+                <el-button type="primary" size="small">免费试用</el-button>
+              </div>
+            </div>
+            <div class="tab-pane_bottom">
+              <div class="row">
+                <div class="row-item">
+                  <div class="item-text">
+                    <span>提升效率</span>
+                  </div>
+                  <div class="item-des">
+                    <span>
+                      规划最优拣货路径，提升仓库作业效率；
+                    </span>
+                  </div>
+                </div>
+                <div class="row-item">
+                  <div class="item-text">
+                    <span>实时同步库存</span>
+                  </div>
+                  <div class="item-des">
+                    <span>线上线下、多平台、多店铺库存实时同步；</span>
+                  </div>
+                </div>
+                <div class="row-item">
+                  <div class="item-text">
+                    <span>数据化管理</span>
+                  </div>
+                  <div class="item-des">
+                    <span>数据化管理，进销存清晰明了。</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="tab-pane" v-show="activeTab === 3">
+            <div class="tab-pane_top">
+              <img src="../assets/images/solution-bg.png" />
+              <span class="text">
+                强大的数据中心，能够精准、快速地分析出各个维度、环节的利润、成本、支出。
+              </span>
+              <div class="free-btn">
+                <el-button type="primary" size="small">免费试用</el-button>
+              </div>
+            </div>
+            <div class="tab-pane_bottom">
+              <div class="row">
+                <div class="row-item">
+                  <div class="item-text">
+                    <span>订单利润报表</span>
+                  </div>
+                  <div class="item-des">
+                    <span>
+                      多维度利润分析，精准掌握店铺状态
+                    </span>
+                  </div>
+                </div>
+                <div class="row-item">
+                  <div class="item-text">
+                    <span>图表结合</span>
+                  </div>
+                  <div class="item-des">
+                    <span>图表结合，数据准确清晰可视化</span>
+                  </div>
+                </div>
+                <div class="row-item">
+                  <div class="item-text">
+                    <span>资金流通报表</span>
+                  </div>
+                  <div class="item-des">
+                    <span>开发业绩统计让公司管理有数据可循</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="tab-pane" v-show="activeTab === 4">
+            <div class="tab-pane_top">
+              <img src="../assets/images/solution-bg.png" />
+              <span class="text">
+                通过订单审核策略自动匹配运输方式、发货仓，运费试算。包裹物流轨迹追踪，精准掌握包裹状态信息，提高效率，减少损失
+              </span>
+              <div class="free-btn">
+                <el-button type="primary" size="small">免费试用</el-button>
+              </div>
+            </div>
+            <div class="tab-pane_bottom">
+              <div class="row">
+                <div class="row-item">
+                  <div class="item-text">
+                    <span>自定义申报规则</span>
+                  </div>
+                  <div class="item-des">
+                    <span>
+                      自定义申报报关信息，按需快速申报，避免高昂关税
+                    </span>
+                  </div>
+                </div>
+                <div class="row-item">
+                  <div class="item-text">
+                    <span>包裹物流轨迹</span>
+                  </div>
+                  <div class="item-des">
+                    <span>物流轨迹状态实时跟踪，实现包裹一站式查询与异常提醒</span>
+                  </div>
+                </div>
+                <div class="row-item">
+                  <div class="item-text">
+                    <span>运输统计</span>
+                  </div>
+                  <div class="item-des">
+                    <span>统计发货、自动计算运费，方便运费核算</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="tab-pane" v-show="activeTab === 5">
+            <div class="tab-pane_top">
+              <img src="../assets/images/solution-bg.png" />
+              <span class="text">
+                管理所有产品信息，精细到每一张图片、每一个标题，并且实现快速批量刊登
+              </span>
+              <div class="free-btn">
+                <el-button type="primary" size="small">免费试用</el-button>
+              </div>
+            </div>
+            <div class="tab-pane_bottom">
+              <div class="row">
+                <div class="row-item">
+                  <div class="item-text">
+                    <span>一体化</span>
+                  </div>
+                  <div class="item-des">
+                    <span>
+                      支持绑定主商品，销售、生产、采购一体化
+                    </span>
+                  </div>
+                </div>
+                <div class="row-item">
+                  <div class="item-text">
+                    <span>一健导入</span>
+                  </div>
+                  <div class="item-des">
+                    <span>一键导入店铺，同步供应</span>
+                  </div>
+                </div>
+                <div class="row-item">
+                  <div class="item-text">
+                    <span>缺货预警</span>
+                  </div>
+                  <div class="item-des">
+                    <span>智能缺货预警，自动计算补货数量</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="tab-pane" v-show="activeTab === 6">
+            <div class="tab-pane_top">
+              <img src="../assets/images/solution-bg.png" />
+              <span class="text">
+                采用精准严谨的财务管理流程，算清每一分钱的来龙去脉，实时掌握公司资金流
+              </span>
+              <div class="free-btn">
+                <el-button type="primary" size="small">免费试用</el-button>
+              </div>
+            </div>
+            <div class="tab-pane_bottom">
+              <div class="row">
+                <div class="row-item">
+                  <div class="item-text">
+                    <span>多维度对账</span>
+                  </div>
+                  <div class="item-des">
+                    <span>
+                      物流、广告、采购等多维度对账，提高财务工作效率
+                    </span>
+                  </div>
+                </div>
+                <div class="row-item">
+                  <div class="item-text">
+                    <span>双重审核</span>
+                  </div>
+                  <div class="item-des">
+                    <span>放款双重审核，安全有保障</span>
+                  </div>
+                </div>
+                <div class="row-item">
+                  <div class="item-text">
+                    <span>加快资金流转</span>
+                  </div>
+                  <div class="item-des">
+                    <span>降低管理、运营、产品成本，加快资金流转</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="tab-pane" v-show="activeTab === 7">
+            <div class="tab-pane_top">
+              <img src="../assets/images/solution-bg.png" />
+              <span class="text">
+                采用精准严谨的财务管理流程，算清每一分钱的来龙去脉，实时掌握公司资金流
+              </span>
+              <div class="free-btn">
+                <el-button type="primary" size="small">免费试用</el-button>
+              </div>
+            </div>
+            <div class="tab-pane_bottom">
+              <div class="row">
+                <div class="row-item">
+                  <div class="item-text">
+                    <span>统计管理</span>
+                  </div>
+                  <div class="item-des">
+                    <span>
+                      多平台、多店铺统一管理
+                    </span>
+                  </div>
+                </div>
+                <div class="row-item">
+                  <div class="item-text">
+                    <span>方便快捷</span>
+                  </div>
+                  <div class="item-des">
+                    <span>支持多店铺之间导入商品</span>
+                  </div>
+                </div>
+                <div class="row-item">
+                  <div class="item-text">
+                    <span>下架</span>
+                  </div>
+                  <div class="item-des">
+                    <span>支持商品一键发布下架</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -267,26 +637,159 @@
 export default {
   name: 'productIntro',
   data() {
-    return {}
+    return {
+      activeTab: 0,
+      tabItems: [
+        {
+          icon: 'icon-shengchanguanli',
+          title: '采购管理',
+        },
+        { icon: 'icon-dingdanguanli35', title: '订单管理' },
+        { icon: 'icon-cangku_cangchuguanli_o', title: '仓储管理' },
+        { icon: 'icon-baobiaofenxi', title: '报表分析' },
+        { icon: 'icon-wuliuguanli', title: '物流管理' },
+        { icon: 'icon-shangpinguanli', title: '商品管理' },
+        { icon: 'icon-caiwuguanli', title: '财务管理' },
+        { icon: 'icon-dianpuguanli', title: '店铺管理' },
+      ],
+    }
+  },
+  methods: {
+    onChangeTabIndex(index) {
+      this.activeTab = index
+    },
   },
 }
 </script>
 <style scoped>
+.product-intro {
+  padding: 100px 0;
+}
 .function_bg {
-  padding: 100px;
-  text-align: center;
+  width: 60vw;
+  margin: 0 auto;
 }
 
 .product-pros {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 10px;
+  display: flex;
+  align-items: stretch;
+  /* grid-template-columns: repeat(4, 1fr);
+  gap: 10px; */
+}
+
+.product-pros-tabs {
+  width: 230px;
+  transition: 0.5s linear all;
+  box-shadow: 0px 0px 20px rgb(208 208 208 / 25%);
 }
 
 .product-pros-item {
   box-sizing: border-box;
 }
 
+.tab-item {
+  cursor: pointer;
+  user-select: none;
+  height: 64px;
+  line-height: 64px;
+  padding-left: 30px;
+  border-left: 4px solid transparent;
+  transition: 0.2s ease-in-out all;
+}
+
+.tab-item:hover {
+  background-color: #f2f4f5;
+  color: #008ad4;
+}
+
+.tab-item i {
+  font-size: 24px;
+  margin-right: 15px;
+  vertical-align: middle;
+  color: #666;
+  transition: 0.2s ease-in-out all;
+}
+
+.tab-item span {
+  color: #666;
+  transition: 0.2s ease-in-out all;
+}
+
+.tab-item.active {
+  border-color: #008ad4;
+  background-color: #f2f4f5;
+}
+
+.tab-item.active i,
+.tab-item.active span {
+  color: #008ad4;
+}
+.tab-item.active i {
+  font-size: 32px;
+}
+
+.tab-pane_top {
+  width: 100%;
+  height: 140px;
+  position: relative;
+}
+
+.tab-pane_top img {
+  height: 100%;
+  width: 100%;
+}
+
+.tab-pane_top span {
+  position: absolute;
+  top: 40px;
+  left: 50px;
+}
+
+.tab-item.active span {
+  font-size: 18px;
+}
+
+.free-btn {
+  position: absolute;
+  top: 90px;
+  left: 50px;
+}
+
+.product-pros-contents {
+  margin-left: 20px;
+  flex: 1;
+  box-shadow: 0px 0px 20px rgb(208 208 208 / 25%);
+}
+
+.item-des {
+  color: #777;
+  font-size: 14px;
+  display: inline-block;
+  margin-top: 10px;
+}
+.tab-pane_bottom {
+  padding: 20px 20px 20px 30px;
+}
+
+.row-item:not(:first-child) {
+  padding-top: 20px;
+}
+.item-text {
+  position: relative;
+}
+
+.item-text::after {
+  display: block;
+  content: '';
+  width: 6px;
+  height: 6px;
+  position: absolute;
+  top: 50%;
+  left: -10px;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  background-color: #008ad4;
+}
 .grid-content {
   box-sizing: border-box;
   height: 100%;

src/views/aboutus/aboutPage.vue

@@ -53,7 +53,7 @@ export default {
 }
 
 .text h2 {
-  font-size: 48px;
+  font-size: 36px;
   text-align: center;
   color: #fff;
   font-weight: bold;

src/views/demand/demandPage.vue

 <template>
   <div class="demand-page">
-    <div class="header-banner">
+    <div ref="headerBanner" class="header-banner">
+      <!-- <div class="image">
+        <img
+          src="../../assets/images/function/function.png"
+          style="width: 100%; height: 100%; object-fit: cover" />
+      </div> -->
       <div class="image">
         <img
           src="../../assets/images/banner-solution.jpg"
           style="width: 100%; height: 100%; object-fit: cover" />
       </div>
       <div class="text">
-        <h2>痛点需求</h2>
+        <h2>需求痛点</h2>
         <p>
           九猫拥有完整的实施和售后体系，秉承“服务为本，客户至上”的理念竭诚为您服务
         </p>
       </div>
+      <div class="feature-list" ref="feature">
+        <div
+          class="feature-item"
+          v-for="(f, index) in featureLists"
+          :key="index"
+          :class="{ active: active === index }"
+          @click="onChangePane(index)">
+          <span>{{ f }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="function-body">
+      <div class="tab-content">
+        <div class="tab-pane" v-if="active === 0">
+          <div class="t-row-1">
+            <div class="card-inner">
+              <h3 style="text-align: center; font-size: 32px; font-weight: 100;">缺货统计</h3>
+              <h4 style="text-align: center">
+                打通供应链全流程，派单统计产品缺货数量
+              </h4>
+              <div class="card-inner-content">
+                <div class="left">
+                  <img src="../../assets/images/function/qh.png" />
+                </div>
+                <div class="right content-text-wrap">
+                  <div class="content-text">
+                    <h4 style="text-align: center">多维度数据分析</h4>
+                    <p style="text-align: center">
+                      SPU、SKU两个维度统计缺货数量
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="t-row-2">
+            <div class="card-inner">
+              <div class="card-inner-content">
+                <div class="left content-text-wrap">
+                  <div class="content-text">
+                    <h4>高效采购生产</h4>
+                    <p>采购生产双向进行</p>
+                  </div>
+                </div>
+                <div class="right a-img">
+                  <img class="t1" src="../../assets/images/function/sx.png" />
+                  <img class="t2" src="../../assets/images/function/sx_1.png" />
+                  <img class="t3" src="../../assets/images/function/sx-2.png" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="t-row-3">
+            <div class="card-inner">
+              <div class="card-inner-content">
+                <div class="left">
+                  <img src="../../assets/images/function/cg.png" />
+                </div>
+                <div class="right content-text-wrap">
+                  <div class="content-text">
+                    <h4 style="text-align: center">SKU查询订单</h4>
+                    <p style="text-align: center">
+                      根据SKU方便快捷的查询要备货的订单
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="tab-pane" v-if="active === 1">
+          <div class="t-row-1">
+            <div class="card-inner">
+              <h3 style="text-align: center; font-size: 32px;font-weight: 100;">仓库预警</h3>
+              <h4 style="text-align: center">
+                各仓库库存状况一目了然，解决库存难管理问题
+              </h4>
+              <div class="card-inner-content">
+                <div class="left">
+                  <img src="../../assets/images/warehouse/kc.png" />
+                </div>
+                <div class="right content-text-wrap">
+                  <div class="content-text">
+                    <h4 style="text-align: center">实时查看产品库存数量</h4>
+                    <p style="text-align: center">
+                      实时统计产品库存数量、占用数量、可用数量、缺货数量等
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="t-row-2">
+            <div class="card-inner">
+              <div class="card-inner-content">
+                <div class="left content-text-wrap">
+                  <div class="content-text">
+                    <h4>订单占用明细</h4>
+                    <p>
+                      实时统计产品占用的订单明细，交易时间、缺货数量、订单状态等
+                    </p>
+                  </div>
+                </div>
+                <div class="right">
+                  <img class="t1" src="../../assets/images/warehouse/dd.png" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="t-row-3">
+            <div class="card-inner">
+              <div class="card-inner-content">
+                <div class="left">
+                  <img src="../../assets/images/warehouse/no.png" />
+                </div>
+                <div class="right content-text-wrap">
+                  <div class="content-text">
+                    <h4 style="text-align: center">采购未入库明细</h4>
+                    <p style="text-align: center">
+                      实时统计采购未入库的数量、单号，实时掌握采买情况
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="tab-pane" v-if="active === 2">
+          <div class="t-row-1">
+            <div class="card-inner">
+              <h3 style="text-align: center; font-size: 32px;font-weight: 100;">采购管理</h3>
+              <h4 style="text-align: center">
+                运营、采购、仓库等部门高效协同，实时跟踪采购需求
+              </h4>
+              <div class="card-inner-content">
+                <div class="left">
+                  <img src="../../assets/images/warehouse/kc.png" />
+                </div>
+                <div class="right content-text-wrap">
+                  <div class="content-text">
+                    <h4 style="text-align: center">一键生成采购单</h4>
+                    <p style="text-align: center">
+                      根据缺货数量一键生成采购单，建议补货数量，科学控制备货库存
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="t-row-2">
+            <div class="card-inner">
+              <div class="card-inner-content">
+                <div class="left content-text-wrap">
+                  <div class="content-text">
+                    <h4>跨部门高效协同合作</h4>
+                    <p>各部门协同合作，轻松掌握库存量、采购量以及到货量</p>
+                  </div>
+                </div>
+                <div class="right">
+                  <img class="t1" src="../../assets/images/warehouse/dd.png" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="t-row-3">
+            <div class="card-inner">
+              <div class="card-inner-content">
+                <div class="left">
+                  <img src="../../assets/images/warehouse/no.png" />
+                </div>
+                <div class="right content-text-wrap">
+                  <div class="content-text">
+                    <h4 style="text-align: center">采购流程方便快捷</h4>
+                    <p style="text-align: center">
+                      审核、付款、发货、入库一体化操作
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="tab-pane" v-if="active === 3">
+          <div class="t-row-1">
+            <div class="card-inner">
+              <h3 style="text-align: center; font-size: 32px;font-weight: 100;">生产管理</h3>
+              <h4 style="text-align: center">
+                采购与供应商同页面操作，实时沟通，有效缩短收货周期
+              </h4>
+              <div class="card-inner-content">
+                <div class="left">
+                  <img src="../../assets/images/warehouse/kc.png" />
+                </div>
+                <div class="right content-text-wrap">
+                  <div class="content-text">
+                    <h4 style="text-align: center">一键生成采购单</h4>
+                    <p style="text-align: center">
+                      精准跟踪发货进度，支持分批发货
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="t-row-2">
+            <div class="card-inner">
+              <div class="card-inner-content">
+                <div class="left content-text-wrap">
+                  <div class="content-text">
+                    <h4>跨部门高效协同合作</h4>
+                    <p>生产单、交货单与财务核算一体化管理</p>
+                  </div>
+                </div>
+                <div class="right">
+                  <img class="t1" src="../../assets/images/warehouse/dd.png" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="t-row-3">
+            <div class="card-inner">
+              <div class="card-inner-content">
+                <div class="left">
+                  <img src="../../assets/images/warehouse/no.png" />
+                </div>
+                <div class="right content-text-wrap">
+                  <div class="content-text">
+                    <h4 style="text-align: center">采购流程方便快捷</h4>
+                    <p style="text-align: center">支持发货前修改发货数量</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="t-row-4">
+            <div class="card-inner">
+              <div class="card-inner-content">
+                <div class="left content-text-wrap">
+                  <div class="content-text">
+                    <h4>跨部门高效协同合作</h4>
+                    <p>全流程日志，方便追溯和分析</p>
+                  </div>
+                </div>
+                <div class="right">
+                  <img class="t1" src="../../assets/images/warehouse/dd.png" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="tab-pane" v-if="active === 4">
+          <div class="t-row-1">
+            <div class="card-inner">
+              <h3 style="text-align: center; font-size: 32px;font-weight: 100;">收获管理</h3>
+              <h4 style="text-align: center">
+                采购生产同路径入库，收货信息化管理
+              </h4>
+              <div class="card-inner-content">
+                <div class="left">
+                  <img src="../../assets/images/warehouse/kc.png" />
+                </div>
+                <div class="right content-text-wrap">
+                  <div class="content-text">
+                    <h4 style="text-align: center">一键生成采购单</h4>
+                    <p style="text-align: center">入库财务及仓库双重审核</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="t-row-2">
+            <div class="card-inner">
+              <div class="card-inner-content">
+                <div class="left content-text-wrap">
+                  <div class="content-text">
+                    <h4>跨部门高效协同合作</h4>
+                    <p>允许分批收货，收货后可进行质检</p>
+                  </div>
+                </div>
+                <div class="right">
+                  <img class="t1" src="../../assets/images/warehouse/dd.png" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="t-row-3">
+            <div class="card-inner">
+              <div class="card-inner-content">
+                <div class="left">
+                  <img src="../../assets/images/warehouse/no.png" />
+                </div>
+                <div class="right content-text-wrap">
+                  <div class="content-text">
+                    <h4 style="text-align: center">采购流程方便快捷</h4>
+                    <p style="text-align: center">可用其它入库快速入库</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="tab-pane" v-if="active === 5">
+          <div class="t-row-1">
+            <div class="card-inner">
+              <h3 style="text-align: center; font-size: 32px;font-weight: 100;">自发货</h3>
+              <h4 style="text-align: center">
+                采购与供应商同页面操作，实时沟通，有效缩短收货周期
+              </h4>
+              <div class="card-inner-content">
+                <div class="left">
+                  <img src="../../assets/images/warehouse/kc.png" />
+                </div>
+                <div class="right content-text-wrap">
+                  <div class="content-text">
+                    <h4 style="text-align: center">一键生成采购单</h4>
+                    <p style="text-align: center">
+                      精准跟踪发货进度，支持分批发货
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="t-row-2">
+            <div class="card-inner">
+              <div class="card-inner-content">
+                <div class="left content-text-wrap">
+                  <div class="content-text">
+                    <h4>跨部门高效协同合作</h4>
+                    <p>生产单、交货单与财务核算一体化管理</p>
+                  </div>
+                </div>
+                <div class="right">
+                  <img class="t1" src="../../assets/images/warehouse/dd.png" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="t-row-3">
+            <div class="card-inner">
+              <div class="card-inner-content">
+                <div class="left">
+                  <img src="../../assets/images/warehouse/no.png" />
+                </div>
+                <div class="right content-text-wrap">
+                  <div class="content-text">
+                    <h4 style="text-align: center">采购流程方便快捷</h4>
+                    <p style="text-align: center">支持发货前修改发货数量</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="t-row-4">
+            <div class="card-inner">
+              <div class="card-inner-content">
+                <div class="left content-text-wrap">
+                  <div class="content-text">
+                    <h4>跨部门高效协同合作</h4>
+                    <p>全流程日志，方便追溯和分析</p>
+                  </div>
+                </div>
+                <div class="right">
+                  <img class="t1" src="../../assets/images/warehouse/dd.png" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="tab-pane" v-if="active === 6">
+          <div class="t-row-1">
+            <div class="card-inner">
+              <h3 style="text-align: center; font-size: 32px;font-weight: 100;">物流管理</h3>
+              <h4 style="text-align: center">
+                智能推荐优势物流商，物流轨迹实时查询
+              </h4>
+              <div class="card-inner-content">
+                <div class="left">
+                  <img src="../../assets/images/warehouse/kc.png" />
+                </div>
+                <div class="right content-text-wrap">
+                  <div class="content-text">
+                    <h4 style="text-align: center">全程跟踪包裹状态</h4>
+                    <p style="text-align: center">
+                      精准跟踪发货进度，支持分批发货
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="t-row-2">
+            <div class="card-inner">
+              <div class="card-inner-content">
+                <div class="left content-text-wrap">
+                  <div class="content-text">
+                    <h4>跨部门高效协同合作</h4>
+                    <p>发货后的订单，系统自动计算最低物流运费</p>
+                  </div>
+                </div>
+                <div class="right">
+                  <img class="t1" src="../../assets/images/warehouse/dd.png" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="t-row-3">
+            <div class="card-inner">
+              <div class="card-inner-content">
+                <div class="left">
+                  <img src="../../assets/images/warehouse/no.png" />
+                </div>
+                <div class="right content-text-wrap">
+                  <div class="content-text">
+                    <h4 style="text-align: center">采购流程方便快捷</h4>
+                    <p style="text-align: center">物流跟踪实时查询包裹状态</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="t-row-4">
+            <div class="card-inner">
+              <div class="card-inner-content">
+                <div class="left content-text-wrap">
+                  <div class="content-text">
+                    <h4>跨部门高效协同合作</h4>
+                    <p>图表展示物流方式占比，使你更快做出决策</p>
+                  </div>
+                </div>
+                <div class="right">
+                  <img class="t1" src="../../assets/images/warehouse/dd.png" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="tab-pane" v-if="active === 7">
+          <div class="t-row-1">
+            <div class="card-inner">
+              <h3 style="text-align: center; font-size: 32px;font-weight: 100;">FBA发货</h3>
+              <h4 style="text-align: center">
+                一表连通装箱、发货、物流，操作流程方便快捷
+              </h4>
+              <div class="card-inner-content">
+                <div class="left">
+                  <img src="../../assets/images/warehouse/kc.png" />
+                </div>
+                <div class="right content-text-wrap">
+                  <div class="content-text">
+                    <h4 style="text-align: center">一键生成采购单</h4>
+                    <p style="text-align: center">一键装箱，一键创建物流订单</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="t-row-2">
+            <div class="card-inner">
+              <div class="card-inner-content">
+                <div class="left content-text-wrap">
+                  <div class="content-text">
+                    <h4>跨部门高效协同合作</h4>
+                    <p>可分批生成跟踪号</p>
+                  </div>
+                </div>
+                <div class="right">
+                  <img class="t1" src="../../assets/images/warehouse/dd.png" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="t-row-3">
+            <div class="card-inner">
+              <div class="card-inner-content">
+                <div class="left">
+                  <img src="../../assets/images/warehouse/no.png" />
+                </div>
+                <div class="right content-text-wrap">
+                  <div class="content-text">
+                    <h4 style="text-align: center">采购流程方便快捷</h4>
+                    <p style="text-align: center">缺货自动转至待补货</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-    <div class="content-body"></div>
   </div>
 </template>
 <script>
 export default {
   name: 'demandPage',
+  inject: {
+    scrollParent: 'scrollParent',
+    setHeaderShadow: 'setHeaderShadow',
+  },
+  data() {
+    return {
+      featureLists: [
+        '缺货统计',
+        '仓库预警',
+        '采购管理',
+        '生产管理',
+        '收货管理',
+        '自发货',
+        '物流管理',
+        'FBA发货',
+      ],
+      active: 0,
+    }
+  },
+  mounted() {
+    this.setHeaderShadow(false)
+    this.scrollParent().addEventListener('scroll', this.onScroll)
+  },
+  beforeDestroy() {
+    this.setHeaderShadow(true)
+    this.scrollParent().removeEventListener('scroll', this.onScroll)
+  },
+  methods: {
+    onScroll() {
+      const top = this.scrollParent().scrollTop
+      if (top >= this.$refs.headerBanner.offsetHeight - 60) {
+        this.$refs.feature.classList.add('feature-scrolling')
+      } else {
+        this.$refs.feature.classList.remove('feature-scrolling')
+      }
+    },
+    onChangePane(index) {
+      this.active = index
+      this.scrollParent().scrollTo({
+        behavior: 'smooth',
+        top: this.$refs.headerBanner.offsetHeight - 60,
+      })
+    },
+  },
 }
 </script>
 <style scoped>
@@ -43,10 +580,143 @@ export default {
   font-size: 24px;
 }
 .image {
-  height: 33.33vw;
+  height: 33.333vw;
+}
+
+.feature-list {
+  display: flex;
+  position: absolute;
+  left: 50%;
+  bottom: -30px;
+  transform: translateX(-50%);
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
+  width: 1150px;
+  background-color: #fff;
+  border-radius: 6px;
+  transition: all 0.3s;
+}
+
+.feature-item {
+  flex: 1;
+  text-align: center;
+  padding: 20px;
+  cursor: pointer;
+}
+
+.active {
+  background-color: #0089ff;
+  color: #fff;
+}
+
+.function-body {
+}
+
+.t-row-1 {
+  padding-top: 70px;
+  padding-bottom: 80px;
+}
+
+.t-row-2,
+.t-row-4 {
+  padding: 75px 0;
+  background-color: #f7f8fa;
+}
+
+.t-row-3,
+.t-row-5 {
+  padding: 75px 0;
+}
+
+.t-row-2 .a-img {
+  position: relative;
+}
+
+.t-row-2 .t1 {
+  width: 100%;
+}
+
+.t-row-2 .t2 {
+  position: absolute;
+  width: 150px;
+  left: 33px;
+  top: 130px;
+}
+
+.t-row-2 .t3 {
+  position: absolute;
+  width: 160px;
+  left: 290px;
+  top: 80px;
+}
+
+.card-inner {
+  margin: 0 auto;
+  width: 1150px;
+}
+
+.card-inner h4 {
+  color: #777;
+  font-weight: 100;
+  margin-top: 10px;
+  margin-bottom: 80px;
+}
+
+.card-inner-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.card-inner-content .content-text h4 {
+  margin-bottom: 16px;
+  line-height: 48px;
+  font-weight: 500;
+  font-size: 32px;
+  position: relative;
+}
+
+.card-inner-content .content-text p {
+  margin-bottom: 40px;
+  color: #4e5969;
+  line-height: 24px;
+  font-size: 16px;
+}
+
+.card-inner-content .content-text h4::before {
+  content: '';
+  position: absolute;
+  top: -16px;
+  width: 34px;
+  height: 6px;
+  background-color: #0089ff;
+  border-radius: 3px;
+}
+
+.left {
+  flex: 1;
+}
+
+.left img {
+  width: 100%;
+}
+
+.right img {
+  width: 100%;
+}
+
+.right {
+  flex: 1;
 }
 
-.content-body {
-  height: calc(100vh - 33.333vw - 60px);
+.feature-scrolling {
+  position: fixed;
+  top: 60px;
+  left: 0;
+  bottom: unset;
+  width: 100%;
+  transform: translateX(0);
+  border-radius: 0;
+  box-shadow: none;
+  z-index: 2;
 }
-</style>
\ No newline at end of file
+</style>

src/views/function/functionPage.vue

 <template>
   <div class="function-page">
-    <div ref="headerBanner" class="header-banner">
-      <!-- <div class="image">
-        <img
-          src="../../assets/images/function/function.png"
-          style="width: 100%; height: 100%; object-fit: cover" />
-      </div> -->
+    <div class="header-banner">
       <div class="image">
         <img
-          src="../../assets/images/banner-solution.jpg"
+          src="../../assets/images/banner.jpg"
           style="width: 100%; height: 100%; object-fit: cover" />
       </div>
       <div class="text">
@@ -17,545 +12,13 @@
           九猫拥有完整的实施和售后体系，秉承“服务为本，客户至上”的理念竭诚为您服务
         </p>
       </div>
-      <div class="feature-list" ref="feature">
-        <div
-          class="feature-item"
-          v-for="(f, index) in featureLists"
-          :key="index"
-          :class="{ active: active === index }"
-          @click="onChangePane(index)">
-          <span>{{ f }}</span>
-        </div>
-      </div>
-    </div>
-    <div class="function-body">
-      <div class="tab-content">
-        <div class="tab-pane" v-if="active === 0">
-          <div class="t-row-1">
-            <div class="card-inner">
-              <h3 style="text-align: center; font-size: 32px; font-weight: 100;">缺货统计</h3>
-              <h4 style="text-align: center">
-                打通供应链全流程，派单统计产品缺货数量
-              </h4>
-              <div class="card-inner-content">
-                <div class="left">
-                  <img src="../../assets/images/function/qh.png" />
-                </div>
-                <div class="right content-text-wrap">
-                  <div class="content-text">
-                    <h4 style="text-align: center">多维度数据分析</h4>
-                    <p style="text-align: center">
-                      SPU、SKU两个维度统计缺货数量
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="t-row-2">
-            <div class="card-inner">
-              <div class="card-inner-content">
-                <div class="left content-text-wrap">
-                  <div class="content-text">
-                    <h4>高效采购生产</h4>
-                    <p>采购生产双向进行</p>
-                  </div>
-                </div>
-                <div class="right a-img">
-                  <img class="t1" src="../../assets/images/function/sx.png" />
-                  <img class="t2" src="../../assets/images/function/sx_1.png" />
-                  <img class="t3" src="../../assets/images/function/sx-2.png" />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="t-row-3">
-            <div class="card-inner">
-              <div class="card-inner-content">
-                <div class="left">
-                  <img src="../../assets/images/function/cg.png" />
-                </div>
-                <div class="right content-text-wrap">
-                  <div class="content-text">
-                    <h4 style="text-align: center">SKU查询订单</h4>
-                    <p style="text-align: center">
-                      根据SKU方便快捷的查询要备货的订单
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="tab-pane" v-if="active === 1">
-          <div class="t-row-1">
-            <div class="card-inner">
-              <h3 style="text-align: center; font-size: 32px;font-weight: 100;">仓库预警</h3>
-              <h4 style="text-align: center">
-                各仓库库存状况一目了然，解决库存难管理问题
-              </h4>
-              <div class="card-inner-content">
-                <div class="left">
-                  <img src="../../assets/images/warehouse/kc.png" />
-                </div>
-                <div class="right content-text-wrap">
-                  <div class="content-text">
-                    <h4 style="text-align: center">实时查看产品库存数量</h4>
-                    <p style="text-align: center">
-                      实时统计产品库存数量、占用数量、可用数量、缺货数量等
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="t-row-2">
-            <div class="card-inner">
-              <div class="card-inner-content">
-                <div class="left content-text-wrap">
-                  <div class="content-text">
-                    <h4>订单占用明细</h4>
-                    <p>
-                      实时统计产品占用的订单明细，交易时间、缺货数量、订单状态等
-                    </p>
-                  </div>
-                </div>
-                <div class="right">
-                  <img class="t1" src="../../assets/images/warehouse/dd.png" />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="t-row-3">
-            <div class="card-inner">
-              <div class="card-inner-content">
-                <div class="left">
-                  <img src="../../assets/images/warehouse/no.png" />
-                </div>
-                <div class="right content-text-wrap">
-                  <div class="content-text">
-                    <h4 style="text-align: center">采购未入库明细</h4>
-                    <p style="text-align: center">
-                      实时统计采购未入库的数量、单号，实时掌握采买情况
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="tab-pane" v-if="active === 2">
-          <div class="t-row-1">
-            <div class="card-inner">
-              <h3 style="text-align: center; font-size: 32px;font-weight: 100;">采购管理</h3>
-              <h4 style="text-align: center">
-                运营、采购、仓库等部门高效协同，实时跟踪采购需求
-              </h4>
-              <div class="card-inner-content">
-                <div class="left">
-                  <img src="../../assets/images/warehouse/kc.png" />
-                </div>
-                <div class="right content-text-wrap">
-                  <div class="content-text">
-                    <h4 style="text-align: center">一键生成采购单</h4>
-                    <p style="text-align: center">
-                      根据缺货数量一键生成采购单，建议补货数量，科学控制备货库存
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="t-row-2">
-            <div class="card-inner">
-              <div class="card-inner-content">
-                <div class="left content-text-wrap">
-                  <div class="content-text">
-                    <h4>跨部门高效协同合作</h4>
-                    <p>各部门协同合作，轻松掌握库存量、采购量以及到货量</p>
-                  </div>
-                </div>
-                <div class="right">
-                  <img class="t1" src="../../assets/images/warehouse/dd.png" />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="t-row-3">
-            <div class="card-inner">
-              <div class="card-inner-content">
-                <div class="left">
-                  <img src="../../assets/images/warehouse/no.png" />
-                </div>
-                <div class="right content-text-wrap">
-                  <div class="content-text">
-                    <h4 style="text-align: center">采购流程方便快捷</h4>
-                    <p style="text-align: center">
-                      审核、付款、发货、入库一体化操作
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="tab-pane" v-if="active === 3">
-          <div class="t-row-1">
-            <div class="card-inner">
-              <h3 style="text-align: center; font-size: 32px;font-weight: 100;">生产管理</h3>
-              <h4 style="text-align: center">
-                采购与供应商同页面操作，实时沟通，有效缩短收货周期
-              </h4>
-              <div class="card-inner-content">
-                <div class="left">
-                  <img src="../../assets/images/warehouse/kc.png" />
-                </div>
-                <div class="right content-text-wrap">
-                  <div class="content-text">
-                    <h4 style="text-align: center">一键生成采购单</h4>
-                    <p style="text-align: center">
-                      精准跟踪发货进度，支持分批发货
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="t-row-2">
-            <div class="card-inner">
-              <div class="card-inner-content">
-                <div class="left content-text-wrap">
-                  <div class="content-text">
-                    <h4>跨部门高效协同合作</h4>
-                    <p>生产单、交货单与财务核算一体化管理</p>
-                  </div>
-                </div>
-                <div class="right">
-                  <img class="t1" src="../../assets/images/warehouse/dd.png" />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="t-row-3">
-            <div class="card-inner">
-              <div class="card-inner-content">
-                <div class="left">
-                  <img src="../../assets/images/warehouse/no.png" />
-                </div>
-                <div class="right content-text-wrap">
-                  <div class="content-text">
-                    <h4 style="text-align: center">采购流程方便快捷</h4>
-                    <p style="text-align: center">支持发货前修改发货数量</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="t-row-4">
-            <div class="card-inner">
-              <div class="card-inner-content">
-                <div class="left content-text-wrap">
-                  <div class="content-text">
-                    <h4>跨部门高效协同合作</h4>
-                    <p>全流程日志，方便追溯和分析</p>
-                  </div>
-                </div>
-                <div class="right">
-                  <img class="t1" src="../../assets/images/warehouse/dd.png" />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="tab-pane" v-if="active === 4">
-          <div class="t-row-1">
-            <div class="card-inner">
-              <h3 style="text-align: center; font-size: 32px;font-weight: 100;">收获管理</h3>
-              <h4 style="text-align: center">
-                采购生产同路径入库，收货信息化管理
-              </h4>
-              <div class="card-inner-content">
-                <div class="left">
-                  <img src="../../assets/images/warehouse/kc.png" />
-                </div>
-                <div class="right content-text-wrap">
-                  <div class="content-text">
-                    <h4 style="text-align: center">一键生成采购单</h4>
-                    <p style="text-align: center">入库财务及仓库双重审核</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="t-row-2">
-            <div class="card-inner">
-              <div class="card-inner-content">
-                <div class="left content-text-wrap">
-                  <div class="content-text">
-                    <h4>跨部门高效协同合作</h4>
-                    <p>允许分批收货，收货后可进行质检</p>
-                  </div>
-                </div>
-                <div class="right">
-                  <img class="t1" src="../../assets/images/warehouse/dd.png" />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="t-row-3">
-            <div class="card-inner">
-              <div class="card-inner-content">
-                <div class="left">
-                  <img src="../../assets/images/warehouse/no.png" />
-                </div>
-                <div class="right content-text-wrap">
-                  <div class="content-text">
-                    <h4 style="text-align: center">采购流程方便快捷</h4>
-                    <p style="text-align: center">可用其它入库快速入库</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="tab-pane" v-if="active === 5">
-          <div class="t-row-1">
-            <div class="card-inner">
-              <h3 style="text-align: center; font-size: 32px;font-weight: 100;">自发货</h3>
-              <h4 style="text-align: center">
-                采购与供应商同页面操作，实时沟通，有效缩短收货周期
-              </h4>
-              <div class="card-inner-content">
-                <div class="left">
-                  <img src="../../assets/images/warehouse/kc.png" />
-                </div>
-                <div class="right content-text-wrap">
-                  <div class="content-text">
-                    <h4 style="text-align: center">一键生成采购单</h4>
-                    <p style="text-align: center">
-                      精准跟踪发货进度，支持分批发货
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="t-row-2">
-            <div class="card-inner">
-              <div class="card-inner-content">
-                <div class="left content-text-wrap">
-                  <div class="content-text">
-                    <h4>跨部门高效协同合作</h4>
-                    <p>生产单、交货单与财务核算一体化管理</p>
-                  </div>
-                </div>
-                <div class="right">
-                  <img class="t1" src="../../assets/images/warehouse/dd.png" />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="t-row-3">
-            <div class="card-inner">
-              <div class="card-inner-content">
-                <div class="left">
-                  <img src="../../assets/images/warehouse/no.png" />
-                </div>
-                <div class="right content-text-wrap">
-                  <div class="content-text">
-                    <h4 style="text-align: center">采购流程方便快捷</h4>
-                    <p style="text-align: center">支持发货前修改发货数量</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="t-row-4">
-            <div class="card-inner">
-              <div class="card-inner-content">
-                <div class="left content-text-wrap">
-                  <div class="content-text">
-                    <h4>跨部门高效协同合作</h4>
-                    <p>全流程日志，方便追溯和分析</p>
-                  </div>
-                </div>
-                <div class="right">
-                  <img class="t1" src="../../assets/images/warehouse/dd.png" />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="tab-pane" v-if="active === 6">
-          <div class="t-row-1">
-            <div class="card-inner">
-              <h3 style="text-align: center; font-size: 32px;font-weight: 100;">物流管理</h3>
-              <h4 style="text-align: center">
-                智能推荐优势物流商，物流轨迹实时查询
-              </h4>
-              <div class="card-inner-content">
-                <div class="left">
-                  <img src="../../assets/images/warehouse/kc.png" />
-                </div>
-                <div class="right content-text-wrap">
-                  <div class="content-text">
-                    <h4 style="text-align: center">全程跟踪包裹状态</h4>
-                    <p style="text-align: center">
-                      精准跟踪发货进度，支持分批发货
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="t-row-2">
-            <div class="card-inner">
-              <div class="card-inner-content">
-                <div class="left content-text-wrap">
-                  <div class="content-text">
-                    <h4>跨部门高效协同合作</h4>
-                    <p>发货后的订单，系统自动计算最低物流运费</p>
-                  </div>
-                </div>
-                <div class="right">
-                  <img class="t1" src="../../assets/images/warehouse/dd.png" />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="t-row-3">
-            <div class="card-inner">
-              <div class="card-inner-content">
-                <div class="left">
-                  <img src="../../assets/images/warehouse/no.png" />
-                </div>
-                <div class="right content-text-wrap">
-                  <div class="content-text">
-                    <h4 style="text-align: center">采购流程方便快捷</h4>
-                    <p style="text-align: center">物流跟踪实时查询包裹状态</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="t-row-4">
-            <div class="card-inner">
-              <div class="card-inner-content">
-                <div class="left content-text-wrap">
-                  <div class="content-text">
-                    <h4>跨部门高效协同合作</h4>
-                    <p>图表展示物流方式占比，使你更快做出决策</p>
-                  </div>
-                </div>
-                <div class="right">
-                  <img class="t1" src="../../assets/images/warehouse/dd.png" />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="tab-pane" v-if="active === 7">
-          <div class="t-row-1">
-            <div class="card-inner">
-              <h3 style="text-align: center; font-size: 32px;font-weight: 100;">FBA发货</h3>
-              <h4 style="text-align: center">
-                一表连通装箱、发货、物流，操作流程方便快捷
-              </h4>
-              <div class="card-inner-content">
-                <div class="left">
-                  <img src="../../assets/images/warehouse/kc.png" />
-                </div>
-                <div class="right content-text-wrap">
-                  <div class="content-text">
-                    <h4 style="text-align: center">一键生成采购单</h4>
-                    <p style="text-align: center">一键装箱，一键创建物流订单</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="t-row-2">
-            <div class="card-inner">
-              <div class="card-inner-content">
-                <div class="left content-text-wrap">
-                  <div class="content-text">
-                    <h4>跨部门高效协同合作</h4>
-                    <p>可分批生成跟踪号</p>
-                  </div>
-                </div>
-                <div class="right">
-                  <img class="t1" src="../../assets/images/warehouse/dd.png" />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="t-row-3">
-            <div class="card-inner">
-              <div class="card-inner-content">
-                <div class="left">
-                  <img src="../../assets/images/warehouse/no.png" />
-                </div>
-                <div class="right content-text-wrap">
-                  <div class="content-text">
-                    <h4 style="text-align: center">采购流程方便快捷</h4>
-                    <p style="text-align: center">缺货自动转至待补货</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
+    <div class="content-body"></div>
   </div>
 </template>
 <script>
 export default {
   name: 'functionPage',
-  inject: {
-    scrollParent: 'scrollParent',
-    setHeaderShadow: 'setHeaderShadow',
-  },
-  data() {
-    return {
-      featureLists: [
-        '缺货统计',
-        '仓库预警',
-        '采购管理',
-        '生产管理',
-        '收货管理',
-        '自发货',
-        '物流管理',
-        'FBA发货',
-      ],
-      active: 0,
-    }
-  },
-  mounted() {
-    this.setHeaderShadow(false)
-    this.scrollParent().addEventListener('scroll', this.onScroll)
-  },
-  beforeDestroy() {
-    this.setHeaderShadow(true)
-    this.scrollParent().removeEventListener('scroll', this.onScroll)
-  },
-  methods: {
-    onScroll() {
-      const top = this.scrollParent().scrollTop
-      if (top >= this.$refs.headerBanner.offsetHeight - 60) {
-        this.$refs.feature.classList.add('feature-scrolling')
-      } else {
-        this.$refs.feature.classList.remove('feature-scrolling')
-      }
-    },
-    onChangePane(index) {
-      this.active = index
-      this.scrollParent().scrollTo({
-        behavior: 'smooth',
-        top: this.$refs.headerBanner.offsetHeight - 60,
-      })
-    },
-  },
 }
 </script>
 <style scoped>
@@ -580,143 +43,10 @@ export default {
   font-size: 24px;
 }
 .image {
-  height: 33.333vw;
-}
-
-.feature-list {
-  display: flex;
-  position: absolute;
-  left: 50%;
-  bottom: -30px;
-  transform: translateX(-50%);
-  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
-  width: 1150px;
-  background-color: #fff;
-  border-radius: 6px;
-  transition: all 0.3s;
-}
-
-.feature-item {
-  flex: 1;
-  text-align: center;
-  padding: 20px;
-  cursor: pointer;
-}
-
-.active {
-  background-color: #0089ff;
-  color: #fff;
-}
-
-.function-body {
-}
-
-.t-row-1 {
-  padding-top: 70px;
-  padding-bottom: 80px;
-}
-
-.t-row-2,
-.t-row-4 {
-  padding: 75px 0;
-  background-color: #f7f8fa;
-}
-
-.t-row-3,
-.t-row-5 {
-  padding: 75px 0;
-}
-
-.t-row-2 .a-img {
-  position: relative;
-}
-
-.t-row-2 .t1 {
-  width: 100%;
-}
-
-.t-row-2 .t2 {
-  position: absolute;
-  width: 150px;
-  left: 33px;
-  top: 130px;
-}
-
-.t-row-2 .t3 {
-  position: absolute;
-  width: 160px;
-  left: 290px;
-  top: 80px;
-}
-
-.card-inner {
-  margin: 0 auto;
-  width: 1150px;
-}
-
-.card-inner h4 {
-  color: #777;
-  font-weight: 100;
-  margin-top: 10px;
-  margin-bottom: 80px;
-}
-
-.card-inner-content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.card-inner-content .content-text h4 {
-  margin-bottom: 16px;
-  line-height: 48px;
-  font-weight: 500;
-  font-size: 32px;
-  position: relative;
-}
-
-.card-inner-content .content-text p {
-  margin-bottom: 40px;
-  color: #4e5969;
-  line-height: 24px;
-  font-size: 16px;
-}
-
-.card-inner-content .content-text h4::before {
-  content: '';
-  position: absolute;
-  top: -16px;
-  width: 34px;
-  height: 6px;
-  background-color: #0089ff;
-  border-radius: 3px;
-}
-
-.left {
-  flex: 1;
-}
-
-.left img {
-  width: 100%;
-}
-
-.right img {
-  width: 100%;
-}
-
-.right {
-  flex: 1;
+  height: 33.33vw;
 }
 
-.feature-scrolling {
-  position: fixed;
-  top: 60px;
-  left: 0;
-  bottom: unset;
-  width: 100%;
-  transform: translateX(0);
-  border-radius: 0;
-  box-shadow: none;
-  z-index: 2;
+.content-body {
+  height: calc(100vh - 33.333vw - 60px);
 }
-</style>
+</style>
\ No newline at end of file

src/views/price/pricePage.vue

@@ -3,7 +3,7 @@
     <div class="header-banner">
       <div class="image">
         <img
-          src="../../assets/images/banner-about.jpg"
+          src="../../assets/images/footer.jpg"
           style="width: 100%; height: 100%; object-fit: cover" />
       </div>
       <div class="text">