Merge branch 'dev' into 'master'

Dev

See merge request !2

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

src/components/footer.vue

+<template>
+  <footer class="banner_footer">
+    <div class="bottom-text">
+      <span style="margin-left: 20px">
+        <i class="el-icon-message" style="margin-right: 5px"></i>
+        <a href="mailto:support@jomalls.com">support@jomalls.com</a>
+      </span>
+      <span style="margin-left: 50px">
+        <i class="el-icon-map-location" style="margin-right: 5px"></i>
+        广州市南沙区丰泽东路106号
+      </span>
+      <span class="record-number">
+        <a href="https://beian.miit.gov.cn" target="_black">
+          粤ICP备2022141405号-1
+        </a>
+      </span>
+      <span style="margin-left: 50px">
+        九猫科技 Copyright © {{ currentYear }}
+      </span>
+    </div>
+  </footer>
+</template>
+<script>
+export default {
+  name: 'PageFooter',
+  data() {
+    return {
+      currentYear: new Date().getFullYear(),
+    }
+  },
+}
+</script>
+<style scoped>
+.banner_footer {
+  color: #fff;
+  background-color: #20222e;
+  padding: 0 100px;
+}
+
+.record-number {
+  text-align: center;
+  margin-left: 50px;
+}
+.record-number a {
+  text-decoration: none;
+  color: #fff;
+}
+
+.bottom-text {
+  padding: 20px 0;
+  text-align: center;
+}
+
+.bottom-text span {
+  display: inline-block;
+}
+
+.bottom-text a {
+  color: #fff;
+  text-decoration: none;
+}
+</style>

src/components/head.vue

 <template>
 <template>
-  <header class="header">
+  <header class="header" :class="{ 'no-shadow': !shadow }">
     <div class="container">
     <div class="container">
       <div class="logo">
       <div class="logo">
         <span class="logo_text">
         <span class="logo_text">
@@ -8,11 +8,14 @@
       </div>
       </div>
       <nav class="navbar">
       <nav class="navbar">
         <ul class="navbar_item_wrap">
         <ul class="navbar_item_wrap">
-          <li class="navbar_item"><a href="">首页</a></li>
-          <li class="navbar_item"><a href="">核心功能</a></li>
-          <li class="navbar_item"><a href="">价格</a></li>
-          <li class="navbar_item"><a href="">需求痛点</a></li>
-          <li class="navbar_item"><a href="">关于我们</a></li>
+          <li
+            class="navbar_item"
+            :class="{ active: active === item.path }"
+            v-for="item in navbar"
+            @click="changePath"
+            :key="item.path">
+            <router-link :to="item.path">{{ item.name }}</router-link>
+          </li>
         </ul>
         </ul>
       </nav>
       </nav>
       <div class="right_btn">
       <div class="right_btn">
@@ -23,7 +26,7 @@
           <span class="reg-btn" @click="register">注册</span>
           <span class="reg-btn" @click="register">注册</span>
         </div>
         </div>
 
 
-        <el-button type="primary">免费试用</el-button>
+        <el-button type="primary" @click="register">免费试用</el-button>
       </div>
       </div>
     </div>
     </div>
   </header>
   </header>
@@ -31,10 +34,35 @@
 
 
 <script>
 <script>
 export default {
 export default {
+  props: {
+    shadow: { type: Boolean },
+  },
+  inject: {
+    scrollParent: 'scrollParent',
+  },
   data() {
   data() {
-    return {}
+    return {
+      navbar: [
+        { name: '首页', path: '/home' },
+        { name: '核心功能', path: '/function' },
+        { name: '价格', path: '/price' },
+        { name: '需求痛点', path: '/demand_pain_point' },
+        { name: '关于我们', path: '/about_us' },
+      ],
+    }
+  },
+  computed: {
+    active() {
+      return this.$route.path
+    },
   },
   },
   methods: {
   methods: {
+    changePath() {
+      this.scrollParent().scrollTo({
+        behavior: 'smooth',
+        top: 0,
+      })
+    },
     login() {
     login() {
       this.$router.push('/')
       this.$router.push('/')
     },
     },
@@ -49,12 +77,17 @@ export default {
 .header {
 .header {
   position: fixed;
   position: fixed;
   z-index: 999;
   z-index: 999;
-  background: #0089ff;
+  /* background: #0089ff; */
   top: 0;
   top: 0;
   right: 0;
   right: 0;
   left: 0;
   left: 0;
   /* box-shadow: 0 2px 10px 0 rgb(0 39 98 / 66%); */
   /* box-shadow: 0 2px 10px 0 rgb(0 39 98 / 66%); */
 }
 }
+
+.header.no-shadow {
+  box-shadow: none !important;
+}
+
 .logo {
 .logo {
   float: left;
   float: left;
   margin-top: 10px;
   margin-top: 10px;
@@ -65,6 +98,11 @@ export default {
 }
 }
 .navbar_item {
 .navbar_item {
   float: left;
   float: left;
+  position: relative;
+}
+
+.navbar_item:hover a {
+  color: #f19240;
 }
 }
 .navbar_item + .navbar_item {
 .navbar_item + .navbar_item {
   margin-left: 30px;
   margin-left: 30px;
@@ -74,8 +112,8 @@ export default {
   height: 60px;
   height: 60px;
   line-height: 60px;
   line-height: 60px;
   text-decoration: none;
   text-decoration: none;
-  color: #fff;
   padding: 0 20px;
   padding: 0 20px;
+  color: #fff;
 }
 }
 .right_btn {
 .right_btn {
   display: flex;
   display: flex;
@@ -109,4 +147,22 @@ export default {
 .user-operate {
 .user-operate {
   margin-right: 10px;
   margin-right: 10px;
 }
 }
+
+.active a {
+  color: #f19240;
+  font-weight: bold;
+}
+
+.active::after {
+  content: '';
+  width: 20px;
+  height: 2px;
+  background-color: #f19240;
+  border-radius: 4px;
+  display: block;
+  position: absolute;
+  left: 50%;
+  bottom: 8px;
+  transform: translateX(-50%);
+}
 </style>
 </style>

src/components/product-intro.vue

 <template>
 <template>
   <div class="product-intro">
   <div class="product-intro">
     <div class="function_bg">
     <div class="function_bg">
-      <h2 style="text-align: center; padding: 20px">产品优势</h2>
+      <h2 style="text-align: center; padding-bottom: 40px">产品优势</h2>
       <div class="product-pros">
       <div class="product-pros">
-        <div class="product-pros-item">
+        <!-- <div class="product-pros-item">
           <div class="grid-content">
           <div class="grid-content">
             <p>
             <p>
               <svg
               <svg
@@ -29,14 +29,11 @@
                   p-id="1686"></path>
                   p-id="1686"></path>
               </svg>
               </svg>
             </p>
             </p>
-            <h3 style="padding-bottom: 10px; border-bottom: 1px solid #fff">
+            <h3 style="padding-bottom: 10px" class="props-item_title">
               生产管理
               生产管理
             </h3>
             </h3>
-            <p style="padding: 10px">
-              生产单、交货单、财务核算一体化；
-              <br />
-              全流程日志，方便追溯和分析；
-              <br />
+            <p class="description">
+              生产单、交货单、财务核算一体化, 全流程日志，方便追溯和分析,
               精准跟踪发货进度，支持分批发货。
               精准跟踪发货进度，支持分批发货。
             </p>
             </p>
           </div>
           </div>
@@ -59,14 +56,11 @@
                   fill="#1296db"></path>
                   fill="#1296db"></path>
               </svg>
               </svg>
             </p>
             </p>
-            <h3 style="padding-bottom: 10px; border-bottom: 1px solid #fff">
+            <h3 style="padding-bottom: 10px" class="props-item_title">
               订单管理
               订单管理
             </h3>
             </h3>
-            <p style="padding: 10px">
-              多平台订单实时同步；
-              <br />
-              订单批量审核，一键拆分、合并订单；
-              <br />
+            <p class="description">
+              多平台订单实时同步, 订单批量审核，一键拆分、合并订单,
               自动派单，扫码自动打印物流面单。
               自动派单，扫码自动打印物流面单。
             </p>
             </p>
           </div>
           </div>
@@ -93,15 +87,12 @@
                   fill="#1296db"></path>
                   fill="#1296db"></path>
               </svg>
               </svg>
             </p>
             </p>
-            <h3 style="padding-bottom: 10px; border-bottom: 1px solid #fff">
+            <h3 style="padding-bottom: 10px" class="props-item_title">
               仓储管理
               仓储管理
             </h3>
             </h3>
-            <p style="padding: 10px">
-              规划最优拣货路径，提升仓库作业效率；
-              <br />
-              线上线下、多平台、多店铺库存实时同步；
-              <br />
-              数据化管理，进销存清晰明了。
+            <p class="description">
+              规划最优拣货路径，提升仓库作业效率,
+              线上线下、多平台、多店铺库存实时同步, 数据化管理，进销存清晰明了。
             </p>
             </p>
           </div>
           </div>
         </div>
         </div>
@@ -127,14 +118,11 @@
                   fill="#1296db"></path>
                   fill="#1296db"></path>
               </svg>
               </svg>
             </p>
             </p>
-            <h3 style="padding-bottom: 10px; border-bottom: 1px solid #fff">
+            <h3 style="padding-bottom: 10px" class="props-item_title">
               报表分析
               报表分析
             </h3>
             </h3>
-            <p style="padding: 10px">
-              多维度利润分析，精准掌握店铺状态；
-              <br />
-              图表结合，数据准确清晰可视化；
-              <br />
+            <p class="description">
+              多维度利润分析，精准掌握店铺状态, 图表结合，数据准确清晰可视化,
               开发业绩统计让公司管理有数据可循。
               开发业绩统计让公司管理有数据可循。
             </p>
             </p>
           </div>
           </div>
@@ -161,14 +149,11 @@
                   fill="#1296db"></path>
                   fill="#1296db"></path>
               </svg>
               </svg>
             </p>
             </p>
-            <h3 style="padding-bottom: 10px; border-bottom: 1px solid #fff">
+            <h3 style="padding-bottom: 10px" class="props-item_title">
               物流管理
               物流管理
             </h3>
             </h3>
-            <p style="padding: 10px">
-              支持自定义规则进行物流商自动匹配；
-              <br />
-              支持根据包裹重量查询物流方式；
-              <br />
+            <p class="description">
+              支持自定义规则进行物流商自动匹配, 支持根据包裹重量查询物流方式,
               物流轨迹实时查询，全程跟踪包裹状态。
               物流轨迹实时查询，全程跟踪包裹状态。
             </p>
             </p>
           </div>
           </div>
@@ -199,14 +184,11 @@
                   fill="#1296db"></path>
                   fill="#1296db"></path>
               </svg>
               </svg>
             </p>
             </p>
-            <h3 style="padding-bottom: 10px; border-bottom: 1px solid #fff">
+            <h3 style="padding-bottom: 10px" class="props-item_title">
               商品管理
               商品管理
             </h3>
             </h3>
-            <p style="padding: 10px">
-              支持绑定主商品，销售、生产、采购一体化；
-              <br />
-              一键导入店铺，同步供应；
-              <br />
+            <p class="description">
+              支持绑定主商品，销售、生产、采购一体化, 一键导入店铺，同步供应,
               智能缺货预警，自动计算补货数量。
               智能缺货预警，自动计算补货数量。
             </p>
             </p>
           </div>
           </div>
@@ -233,15 +215,12 @@
                   fill="#1296db"></path>
                   fill="#1296db"></path>
               </svg>
               </svg>
             </p>
             </p>
-            <h3 style="padding-bottom: 10px; border-bottom: 1px solid #fff">
+            <h3 style="padding-bottom: 10px" class="props-item_title">
               财务管理
               财务管理
             </h3>
             </h3>
-            <p style="padding: 10px">
-              物流、广告、采购等多维度对账，提高财务工作效率；
-              <br />
-              放款双重审核，安全有保障；
-              <br />
-              降低管理、运营、产品成本，加快资金流转。
+            <p class="description">
+              物流、广告、采购等多维度对账，提高财务工作效率,
+              放款双重审核，安全有保障, 降低管理、运营、产品成本，加快资金流转。
             </p>
             </p>
           </div>
           </div>
         </div>
         </div>
@@ -271,95 +250,573 @@
                   fill="#1296db"></path>
                   fill="#1296db"></path>
               </svg>
               </svg>
             </p>
             </p>
-            <h3 style="padding-bottom: 10px; border-bottom: 1px solid #fff">
+            <h3 style="padding-bottom: 10px" class="props-item_title">
               店铺管理
               店铺管理
             </h3>
             </h3>
-            <p style="padding: 10px">
-              多平台、多店铺统一管理；
-              <br />
-              支持多店铺之间导入商品；
-              <br />
+            <p class="description">
+              多平台、多店铺统一管理, 支持多店铺之间导入商品,
               支持商品一键发布下架。
               支持商品一键发布下架。
             </p>
             </p>
           </div>
           </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" @click="register">免费试用</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" @click="register">免费试用</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" @click="register">免费试用</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" @click="register">免费试用</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" @click="register">免费试用</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" @click="register">免费试用</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" @click="register">免费试用</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" @click="register">免费试用</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>
-    </div>
-    <div class="banner_footer">
-      <h2 style="text-align: center; padding: 20px">对接平台</h2>
-      <img src="../assets/logo1.jpg" style="width: 160px; margin: 10px 20px" />
-      <img src="../assets/logo2.jpg" style="width: 160px; margin: 10px 20px" />
-      <img src="../assets/logo3.jpg" style="width: 160px; margin: 10px 20px" />
-      <img src="../assets/logo4.jpg" style="width: 160px; margin: 10px 20px" />
-      <img src="../assets/logo5.jpg" style="width: 160px; margin: 10px 20px" />
-      <img src="../assets/logo6.jpg" style="width: 160px; margin: 10px 20px" />
-      <img src="../assets/logo7.png" style="width: 160px; margin: 10px 20px" />
-      <img src="../assets/logo8.jpg" style="width: 160px; margin: 10px 20px" />
-      <img src="../assets/logo9.jpg" style="width: 160px; margin: 10px 20px" />
-      <img src="../assets/logo10.jpg" style="width: 160px; margin: 10px 20px" />
-      <img src="../assets/logo11.jpg" style="width: 160px; margin: 10px 20px" />
-      <img src="../assets/logo12.jpg" style="width: 160px; margin: 10px 20px" />
-      <img src="../assets/logo13.jpg" style="width: 160px; margin: 10px 20px" />
-      <img src="../assets/logo14.jpg" style="width: 160px; margin: 10px 20px" />
-      <img src="../assets/logo15.jpg" style="width: 160px; margin: 10px 20px" />
-      <img src="../assets/logo16.jpg" style="width: 160px; margin: 10px 20px" />
-      <img src="../assets/logo17.jpg" style="width: 160px; margin: 10px 20px" />
-      <img src="../assets/logo18.jpg" style="width: 160px; margin: 10px 20px" />
-      <div style="margin-top: 20px; text-align: center">
-        <span style="display: inline-block; margin-left: 20px">
-          <i class="el-icon-message" style="margin-right: 5px"></i>
-          support@jomalls.com
-        </span>
-        <span style="display: inline-block; margin-left: 50px">
-          <i class="el-icon-map-location" style="margin-right: 5px"></i>
-          广州市南沙区丰泽东路106号
-        </span>
-        <span class="record-number">
-          <a href="https://beian.miit.gov.cn" target="_black">
-            粤ICP备2022141405号-1
-          </a>
-        </span>
       </div>
       </div>
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
+<script>
+export default {
+  name: 'productIntro',
+  data() {
+    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
+    },
+    register() {
+      this.$router.push('/register')
+    }
+  },
+}
+</script>
 <style scoped>
 <style scoped>
+.product-intro {
+  padding: 100px 0;
+}
 .function_bg {
 .function_bg {
-  padding: 0 20px;
-  text-align: center;
-  margin-bottom: 20px;
+  width: 60vw;
+  margin: 0 auto;
 }
 }
 
 
 .product-pros {
 .product-pros {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 16px 16px;
+  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 {
 .product-pros-item {
   box-sizing: border-box;
   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 {
 .grid-content {
   box-sizing: border-box;
   box-sizing: border-box;
   height: 100%;
   height: 100%;
-  padding: 30px 10px;
+  padding: 20px;
   border-radius: 8px;
   border-radius: 8px;
   line-height: 30px;
   line-height: 30px;
-  background: url(../assets/bg-1.png) center / cover no-repeat;
-}
-.banner_footer {
-  color: #fff;
-  padding: 0 20px 20px 20px;
-  background: url(../assets/footer.jpg) center / cover no-repeat;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  /* background: url(../assets/bg-1.png) center / cover no-repeat; */
+  box-shadow: 0 0 10px rgb(180 189 221 / 8%), 0 6px 14px hsl(0deg 0% 100% / 30%),
+    0 12px 20px rgb(180 189 221 / 20%);
 }
 }
 
 
-.record-number {
-  margin-left: 50px;
-  display: inline-block;
+.description {
+  font-size: 14px;
+  color: #666;
+  text-align: left;
 }
 }
-.record-number a {
-  /* text-decoration: none; */
-  color: #fff;
+
+.props-item_title {
+  font-size: 22px;
+  font-weight: 300;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 }
 </style>
 </style>

src/router/index.js

 import Vue from 'vue'
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import VueRouter from 'vue-router'
 import Home from '../views/home.vue'
 import Home from '../views/home.vue'
+import HomePage from '../views/homePage/index.vue'
+import FunctionPage from '../views/function/functionPage.vue'
+import PricePage from '../views/price/pricePage.vue'
+import demandPage from '../views/demand/demandPage.vue'
+import aboutPage from '../views/aboutus/aboutPage'
 
 
 Vue.use(VueRouter)
 Vue.use(VueRouter)
 
 
@@ -9,6 +14,34 @@ const routes = [
     path: '/',
     path: '/',
     name: 'home',
     name: 'home',
     component: Home,
     component: Home,
+    redirect: '/home',
+    children: [
+      {
+        path: '/home',
+        name: 'homePage',
+        component: HomePage
+      },
+      {
+        path: '/function',
+        name: 'functionPage',
+        component: FunctionPage,
+      },
+      {
+        path: '/price',
+        name: 'pricePage',
+        component: PricePage,
+      },
+      {
+        path: '/demand_pain_point',
+        name: 'demandPage',
+        component: demandPage
+      },
+      {
+        path: '/about_us',
+        name: 'aboutUs',
+        component: aboutPage,
+      }
+    ],
   },
   },
   {
   {
     path: '/register',
     path: '/register',

src/views/aboutus/aboutPage.vue

+<template>
+  <div class="about-us">
+    <div class="header-banner">
+      <div class="image">
+        <img
+          src="../../assets/images/banner-about.jpg"
+          style="width: 100%; height: 100%; object-fit: cover" />
+      </div>
+      <div class="text">
+        <h2>辅助跨境电商企业成为变革</h2>
+        <hr />
+        <ul>
+          <li>
+            <i class="i1"></i>
+            <span>与时俱进</span>
+          </li>
+          <li>
+            <i class="i2"></i>
+            <span>客户至上</span>
+          </li>
+          <li>
+            <i class="i3"></i>
+            <span>人尽奇才</span>
+          </li>
+          <li>
+            <i class="i4"></i>
+            <span>互利共赢</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="content-body">
+      <h2 style="margin-bottom: 20px; text-align: center">关于九猫</h2>
+      <div
+        class="jomals-description"
+        style="text-indent: 2em;">
+        九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案。
+        九猫科技核心团队拥有超过7年的跨境电商ERP开发经验，设计及开发过的项目覆盖产品管理系统，订单管理系统，供应链系统，供应商系统，生产管理系统，仓库管理系统，营销系统，OA系统等等。2022年开始转型并专注于DTC独立站平台的产品与服务，自主研发并推出“九猫ERP软件“。
+        大数据集成商家平台、营销、供应链、仓储物流、财务、报表等模块，纵向打通资源，横向综合业务，全方位深度赋能。
+        九猫人始终秉承着“顾客至上”的经营理念，以“保障用户数据安全、关心客户使用体验、促进产品不断创新”为己任，意在帮助更多的跨境电商企业实现精细化管理和数字化建设。
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'aboutUs',
+}
+</script>
+<style scoped>
+.header-banner {
+  position: relative;
+  overflow: hidden;
+  text-align: center;
+}
+
+.text {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.text h2 {
+  font-size: 36px;
+  text-align: center;
+  color: #fff;
+  font-weight: bold;
+}
+.image {
+  height: 26vw;
+}
+
+.content-body {
+  height: calc(100vh - 26vw - 60px);
+  margin-top: 80px;
+}
+
+.jomals-description {
+  text-indent: 2em;
+  display: block;
+  width: 60vw;
+  margin: 0 auto;
+  font-size: 18px;
+  color: #333;
+  line-height: 36px;
+}
+
+.text hr {
+  border: none;
+  width: 30%;
+  height: 2px;
+  margin: 20px auto;
+  background: url(../../assets/images/banner-line.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.text ul {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.text ul li:not(:last-child) {
+  margin-right: 40px;
+}
+.text li i {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+  vertical-align: top;
+}
+
+.text li span {
+  display: inline-block;
+  line-height: 24px;
+  vertical-align: top;
+  color: #fff;
+}
+
+.text li .i1 {
+  background: url(../../assets/images/banner-icon-01.png);
+  background-size: 100% 100%;
+}
+
+.text li .i2 {
+  background: url(../../assets/images/banner-icon-02.png);
+  background-size: 100% 100%;
+}
+
+.text li .i3 {
+  background: url(../../assets/images/banner-icon-03.png);
+  background-size: 100% 100%;
+}
+
+.text li .i4 {
+  background: url(../../assets/images/banner-icon-04.png);
+  background-size: 100% 100%;
+}
+</style>

src/views/demand/demandPage.vue

+<template>
+  <div class="demand-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="image">
+        <img
+          src="../../assets/images/banner-solution.jpg"
+          style="width: 100%; height: 100%; object-fit: cover" />
+      </div>
+      <div class="text">
+        <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/cg/01.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/cg/02.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/cg/03.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/sc/01.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/sc/02.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/sc/03.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/sc/04.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/sh/01.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/sh/02.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/sh/03.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/fh/01.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/fh/02.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/fh/03.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/fh/04.png" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="tab-pane" v-if="active === 6">
+          <div class="t-row-1">
+            <div class="card-inner">
+              <div class="card-inner-content">
+                <div class="left">
+                  <img src="../../assets/images/fh/wl.png" />
+                </div>
+                <div class="right content-text-wrap">
+                  <div class="content-text" style="margin-left: 40px">
+                    <h4
+                      style="
+                        font-size: 32px;
+                        font-weight: 100;
+                        margin: 0;
+                      ">
+                      物流管理
+                    </h4>
+                    <h5 style="font-size: 14px; margin-bottom: 16px; margin-top: 6px; font-weight: 100;">
+                      智能推荐优势物流商，物流轨迹实时查询
+                    </h5>
+                    <div class="text-des">
+                      <p>精准跟踪发货进度，支持分批发货</p>
+                      <p>发货后的订单，系统自动计算最低物流运费</p>
+                      <p>物流跟踪实时查询包裹状态</p>
+                      <p>图表展示物流方式占比，使你更快做出决策</p>
+                    </div>
+                  </div>
+                </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/fh/05.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/fh/06.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/fh/07.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>
+</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>
+.header-banner {
+  position: relative;
+}
+
+.text {
+  position: absolute;
+  top: 30%;
+  left: 5%;
+}
+
+.text h2 {
+  color: #fff;
+  font-size: 48px;
+  margin-bottom: 20px;
+}
+
+.text p {
+  color: #fff;
+  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;
+}
+
+.feature-scrolling {
+  position: fixed;
+  top: 60px;
+  left: 0;
+  bottom: unset;
+  width: 100%;
+  transform: translateX(0);
+  border-radius: 0;
+  box-shadow: none;
+  z-index: 2;
+}
+
+.card-inner-content .content-text .text-des p {
+  margin-bottom: 12px;
+}
+</style>

src/views/function/functionPage.vue

+<template>
+  <div class="function-page">
+    <div class="header-banner">
+      <div class="image">
+        <img
+          src="../../assets/images/banner.jpg"
+          style="width: 100%; height: 100%; object-fit: cover" />
+      </div>
+      <div class="text">
+        <h2>核心功能</h2>
+        <p>
+          九猫拥有完整的实施和售后体系，秉承“服务为本，客户至上”的理念竭诚为您服务
+        </p>
+      </div>
+    </div>
+    <div class="content-body">
+      <div class="tab-content">
+        <div class="t-row">
+          <div class="t-row-1">
+            <div class="card-inner">
+              <h3 style="text-align: center; font-size: 32px; font-weight: 100">
+                POD订单
+              </h3>
+              <h4 style="text-align: center">
+                pod产品开发，一键合成，一键上架
+              </h4>
+              <div class="card-inner-content">
+                <div class="left">
+                  <img src="../../assets/images/function/01.png" />
+                </div>
+                <div class="right content-text-wrap">
+                  <div class="content-text">
+                    <h4 style="text-align: center">图文定制</h4>
+                    <div class="text-des">
+                      <p style="text-align: center">
+                        支持客户图文定制，自动抓取客户设计的成品图和设计图
+                      </p>
+                    </div>
+                  </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>
+                    <div class="text-des text-des-2">
+                      <p>订单流程受pod生产控制，互相对应</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="right">
+                  <img src="../../assets/images/function/02.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/03.png" />
+                </div>
+                <div class="right content-text-wrap">
+                  <div class="content-text">
+                    <h4 style="text-align: center">方便快捷出单、装箱</h4>
+                    <div class="text-des">
+                      <p style="text-align: center">
+                        生产完成扫码，单件直接出面单，多件放入周转箱等待配齐
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="t-row">
+          <div class="t-row-1">
+            <div class="card-inner">
+              <h3 style="text-align: center; font-size: 32px; font-weight: 100">
+                POD 生产管理
+              </h3>
+              <h4 style="text-align: center">实时统计订单产品数据</h4>
+              <div class="card-inner-content">
+                <div class="left">
+                  <img src="../../assets/images/function/04.png" />
+                </div>
+                <div class="right content-text-wrap">
+                  <div class="content-text">
+                    <h4 style="text-align: center">一键创建生产单</h4>
+                    <div class="text-des text-des-2" style="margin-left:0">
+                      <p style="text-align: center">
+                        操作简单明了，一健创建生产单
+                      </p>
+                    </div>
+                  </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>
+                    <div class="text-des" style="margin-left:0">
+                      <p>分配供应商，打印生产单，拣胚贴码</p>
+                      <p>工厂下载生产图进行压烫</p>
+                      <p>扫码验货进行生产完成，批量发货</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="right">
+                  <img class="t1" src="../../assets/images/function/05.png" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="t-row">
+          <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/R-C.png" />
+                </div>
+                <div class="right content-text-wrap">
+                  <div class="content-text">
+                    <h4 style="text-align: center">
+                      根据库存和销量，自动下单给供应商
+                    </h4>
+                    <div class="text-des">
+                      <p>
+                        采购数据信息自动流转给供应商，减少下单环节和沟通成本，提高采购效率
+                      </p>
+                      <p>开放供应商打印商品标签</p>
+                      <p>
+                        让供应商在系统里一键打印客户SKU标签，大大减少企业的入库工作量
+                      </p>
+                      <p>库存周转周期可调节，资金周转灵活</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="t-row">
+          <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">
+                  <div class="content-text">
+                    <h4>
+                      精准高效决策
+                    </h4>
+                    <div class="text-des" style="margin-left: 0">
+                      <p>
+                        订单处理、店铺发货报表数据分析，业务情况了如指掌
+                      </p>
+                      <p>产品销售报表数据分析，让公司管理有数据可循</p>
+                      <p>
+                        利润统计、开发业绩统计报表分析，更懂您的利润
+                      </p>
+                      <p>物流费用和物流状态报表数据分析，为降低产品成本提供依据</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="right content-text-wrap">
+                  <img src="../../assets/images/function/R-A.png" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'functionPage',
+}
+</script>
+<style scoped>
+.header-banner {
+  position: relative;
+}
+
+.text {
+  position: absolute;
+  top: 30%;
+  left: 5%;
+}
+
+.text h2 {
+  color: #fff;
+  font-size: 48px;
+  margin-bottom: 20px;
+}
+
+.text p {
+  color: #fff;
+  font-size: 24px;
+}
+.image {
+  height: 33.33vw;
+}
+
+.content-body {
+}
+
+.text {
+  position: absolute;
+  top: 30%;
+  left: 5%;
+}
+
+.text h2 {
+  color: #fff;
+  font-size: 48px;
+  margin-bottom: 20px;
+}
+
+.text p {
+  color: #fff;
+  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 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;
+}
+
+.feature-scrolling {
+  position: fixed;
+  top: 60px;
+  left: 0;
+  bottom: unset;
+  width: 100%;
+  transform: translateX(0);
+  border-radius: 0;
+  box-shadow: none;
+  z-index: 2;
+}
+
+.text-des {
+  margin-left: 34px;
+}
+
+.text-des p {
+  margin-bottom: 20px;
+  color: #4e5969;
+}
+
+.text-des-2 {
+  margin-left: 0;
+}
+</style>
\ No newline at end of file

src/views/home.vue

 <template>
 <template>
   <div class="home-page">
   <div class="home-page">
-    <!-- <Head /> -->
-    <div class="login_bg">
-      <div class="logo">
-        <a href="/">
-          <span class="logo_text">
-            <img src="../assets/logo.png" height="40px" />
-          </span>
-        </a>
-      </div>
+    <Head :shadow="headerShadow" />
 
 
-      <div class="banner_text">
-        <h1>智能化订单处理</h1>
-        <h1 style="margin-left: 60px">数字化供采平台</h1>
-        <h1 style="margin-left: 120px">多维度数据分析</h1>
-      </div>
-      <div class="login_content">
-        <h2 style="text-align: center">登录</h2>
-        <el-form
-          size="medium"
-          :model="ruleForm"
-          :rules="rules"
-          ref="ruleForm"
-          class="login_form">
-          <el-form-item prop="email">
-            <el-input
-              prefix-icon="el-icon-message"
-              style="background: #fff"
-              v-model="ruleForm.email"
-              placeholder="Email"></el-input>
-          </el-form-item>
-          <el-form-item prop="password">
-            <el-input
-              :type="showPwd ? 'text' : 'password'"
-              prefix-icon="el-icon-lock"
-              style="background: #fff"
-              v-model="ruleForm.password"
-              placeholder="Password"
-              @keyup.enter.native="submitForm">
-              <i
-                @click="showPwd = !showPwd"
-                slot="suffix"
-                :class="{ eyes: true, open: !showPwd, close: showPwd }"></i>
-            </el-input>
-          </el-form-item>
-          <div style="text-align: center">
-            <button class="login-btn" @click="submitForm">登录</button>
-          </div>
-          <div style="margin-top: 20px; font-size: 14px; text-align: center">
-            还没有账号？
-            <router-link class="link" to="register">马上注册</router-link>
-          </div>
-        </el-form>
-      </div>
-    </div>
-    <!-- <main class="home-main">
-      <div
-        style="
-          font-size: 48px;
-          width: 100%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        ">
-      </div>
-    </main> -->
+    <main class="home-main">
+      <router-view></router-view>
+    </main>
 
 
-    <product-intro />
+    <Footer />
   </div>
   </div>
 </template>
 </template>
 <script>
 <script>
-// import Head from '../components/head.vue'
-import ProductIntro from '../components/product-intro.vue'
-import md5 from 'js-md5'
-import { post } from '../utils/axios'
+import Footer from '../components/footer.vue'
+import Head from '../components/head.vue'
 
 
 export default {
 export default {
-  name: 'HomePage',
-  components: { ProductIntro },
+  name: 'Home',
+  components: { Head, Footer },
+  provide() {
+    return {
+      scrollParent: () => this.$el,
+      setHeaderShadow: (shadow) => (this.headerShadow = shadow),
+    }
+  },
   data() {
   data() {
     return {
     return {
-      ruleForm: {
-        password: '',
-        email: '',
-        checked: false,
-      },
-      rules: {
-        email: [
-          { required: true, message: '请输入邮箱', trigger: 'blur' },
-          {
-            type: 'email',
-            message: '请输入正确的邮箱地址',
-            trigger: ['blur', 'change'],
-          },
-        ],
-        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
-      },
-      showPwd: false,
+      headerShadow: true,
     }
     }
   },
   },
   mounted() {
   mounted() {
@@ -151,89 +78,16 @@ export default {
 }
 }
 
 
 .home-page .header {
 .home-page .header {
-  background: transparent;
   transition: all 0.3s;
   transition: all 0.3s;
 }
 }
 
 
 .home-page.scrolling .header {
 .home-page.scrolling .header {
   box-shadow: 0 2px 10px 0 rgb(0 39 98 / 66%);
   box-shadow: 0 2px 10px 0 rgb(0 39 98 / 66%);
-  background-color: rgba(45, 138, 254, 0.9);
+  background-color: rgba(27, 28, 29, 0.9);
   backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
 }
 }
 
 
-/* .home-main {
-  padding-top: 60px;
-  height: calc(70vh - 60px);
-  background: linear-gradient(to bottom, #0089ff 0%, #0089ff 20%, #e8eef9);
-} */
-
-.logo {
-  position: absolute;
-}
-.logo_text {
-  display: inline-block;
-  line-height: 40px;
-  margin: 60px 0 0 80px;
-}
-.banner_text {
-  position: absolute;
-  top: 30%;
-  left: 10%;
-  line-height: 80px;
-  color: #fff;
-}
-.login_bg {
-  width: 100%;
-  height: 100vh;
-  position: relative;
-  image-rendering: -webkit-optimize-contrast;
-  background: url(../assets/banner.jpg) center / cover no-repeat;
-}
-.login_content {
-  padding: 18px;
-  background: rgba(255, 255, 255, 0.4);
-  position: absolute;
-  top: 50%;
-  left: 80%;
-  border-radius: 6px;
-  transform: translate(-50%, -50%);
-  box-sizing: border-box;
-  background-position: top right, center;
-  background-repeat: no-repeat;
-  background-size: 528px auto, contain;
-}
-
-.login_form {
-  padding: 40px;
-  width: 300px;
-  border-radius: 6px;
-}
-
-.login-btn {
-  width: 100%;
-  height: 38px;
-  display: block;
-  margin: 0 auto;
-  background: #006eff;
-  box-shadow: 0 4px 8px 0 rgb(26 90 216 / 32%);
-  border-radius: 4px;
-  font-size: 16px;
-  color: #fff;
-  cursor: pointer;
-}
-
-.eyes {
-  display: inline-block;
-  height: 14px;
-  width: 18px;
-  margin-top: 11px;
-  margin-right: 5px;
-  cursor: pointer;
-}
-.eyes.open {
-  background: url('../assets/eyes-open.png') no-repeat center / cover;
-}
-.eyes.close {
-  background: url('../assets/eyes-closed.png') no-repeat center / cover;
+.home-main {
+  /* padding-top: 60px; */
 }
 }
 </style>
 </style>

src/views/homePage/index.vue

+<template>
+  <div class="home-page">
+    <div class="banner-images">
+      <el-carousel
+        class="banner-images-inner"
+        :interval="5000"
+        height="33.333vw">
+        <el-carousel-item v-for="(item, index) in bannerImages" :key="index">
+          <img class="images" :src="item.image" style="width: 100vw" />
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+    <product-intro />
+    <div class="docking-platform">
+      <h2 style="text-align: center; padding: 20px">对接平台</h2>
+      <div class="platforms">
+        <div class="platform-item"><img src="../../assets/logo1.jpg" /></div>
+        <div class="platform-item"><img src="../../assets/logo2.jpg" /></div>
+        <div class="platform-item"><img src="../../assets/logo3.jpg" /></div>
+        <div class="platform-item"><img src="../../assets/logo4.jpg" /></div>
+        <div class="platform-item"><img src="../../assets/logo5.jpg" /></div>
+        <div class="platform-item"><img src="../../assets/logo6.jpg" /></div>
+        <div class="platform-item"><img src="../../assets/logo7.png" /></div>
+        <div class="platform-item"><img src="../../assets/logo8.jpg" /></div>
+        <div class="platform-item"><img src="../../assets/logo9.jpg" /></div>
+        <div class="platform-item"><img src="../../assets/logo10.jpg" /></div>
+        <div class="platform-item"><img src="../../assets/logo11.jpg" /></div>
+        <div class="platform-item"><img src="../../assets/logo12.jpg" /></div>
+        <div class="platform-item"><img src="../../assets/logo13.jpg" /></div>
+        <div class="platform-item"><img src="../../assets/logo14.jpg" /></div>
+        <div class="platform-item"><img src="../../assets/logo15.jpg" /></div>
+        <div class="platform-item"><img src="../../assets/logo16.jpg" /></div>
+        <div class="platform-item"><img src="../../assets/logo17.jpg" /></div>
+        <div class="platform-item"><img src="../../assets/logo18.jpg" /></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ProductIntro from '../../components/product-intro.vue'
+
+export default {
+  name: 'homePage',
+  components: {
+    ProductIntro,
+  },
+  data() {
+    return {
+      bannerImages: [
+        { image: require('../../assets/banner/1.jpg') },
+        { image: require('../../assets/banner/2.jpg') },
+        { image: require('../../assets/banner/3.jpg') },
+        { image: require('../../assets/banner/4.jpg') },
+        { image: require('../../assets/banner/5.jpg') },
+        { image: require('../../assets/banner/6.jpg') },
+        { image: require('../../assets/banner/7.jpg') },
+        { image: require('../../assets/banner/8.jpg') },
+        { image: require('../../assets/banner/9.jpg') },
+      ],
+    }
+  },
+}
+</script>
+<style scoped>
+.banner-images {
+  font-size: 48px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(to bottom, #0089ff 0%, #0089ff 20%, #e8eef9);
+}
+
+.banner-images-inner {
+  width: 100%;
+}
+
+.docking-platform {
+  background: url(../../assets/footer.jpg) center / cover no-repeat;
+  padding: 0 100px 70px;
+}
+
+.docking-platform h2 {
+  color: #fff;
+}
+
+.platforms {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(9, 1fr);
+}
+
+@media screen and (max-width: 1440px) {
+  .platforms {
+    grid-template-columns: repeat(9, 1fr);
+  }
+}
+
+@media screen and (max-width: 1000px) {
+  .platforms {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+
+.platform-item {
+  padding: 20px;
+  background-color: #fff;
+  overflow: hidden;
+  border-radius: 6px;
+}
+
+.platforms img {
+  width: 100%;
+}
+</style>

src/views/login.vue

@@ -2,9 +2,11 @@
   <div>
   <div>
     <div class="login_bg">
     <div class="login_bg">
       <div class="logo">
       <div class="logo">
-        <span class="logo_text">
-          <img src="../assets/logo.png" height="40px" />
-        </span>
+        <a href="/">
+          <span class="logo_text">
+            <img src="../assets/logo.png" height="40px" />
+          </span>
+        </a>
       </div>
       </div>
       <div class="banner_text">
       <div class="banner_text">
         <h1>智能化订单处理</h1>
         <h1>智能化订单处理</h1>
@@ -41,11 +43,9 @@
             </el-input>
             </el-input>
           </el-form-item>
           </el-form-item>
           <div style="text-align: center">
           <div style="text-align: center">
-            <button class="login-btn" @click="submitForm">
-              登录
-            </button>
+            <button class="login-btn" @click="submitForm">登录</button>
           </div>
           </div>
-          <div style="margin-top: 20px; font-size: 14px; text-align: center;">
+          <div style="margin-top: 20px; font-size: 14px; text-align: center">
             还没有账号？
             还没有账号？
             <router-link class="link" to="register">马上注册</router-link>
             <router-link class="link" to="register">马上注册</router-link>
           </div>
           </div>

src/views/price/pricePage.vue

+<template>
+  <div class="price-page">
+    <div class="header-banner">
+      <div class="image">
+        <img
+          src="../../assets/images/footer.jpg"
+          style="width: 100%; height: 100%; object-fit: cover" />
+      </div>
+      <div class="text">
+        <h2>专业化的服务团队，让您物超所值</h2>
+        <hr />
+        <ul>
+          <li>
+            <i class="i1"></i>
+            <span>与时俱进</span>
+          </li>
+          <li>
+            <i class="i2"></i>
+            <span>客户至上</span>
+          </li>
+          <li>
+            <i class="i3"></i>
+            <span>人尽奇才</span>
+          </li>
+          <li>
+            <i class="i4"></i>
+            <span>互利共赢</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="content-body">
+      <div class="price-container">
+        <div class="price-columns">
+          <div
+            v-for="(c, i) in priceColumns"
+            :key="i"
+            class="price-column"
+            :class="`${c.labelClass || ''} ${c.class || ''}`">
+            {{ c.label }}
+          </div>
+        </div>
+        <div class="price-items">
+          <div v-for="(p, i) in prices" :key="i" class="price-item">
+            <div
+              v-for="(c, j) in priceColumns"
+              :key="j"
+              class="price-value"
+              :class="`${c.valueClass || ''} ${c.class || ''}`"
+              v-html="value(c, p)"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'pricePage',
+  data() {
+    return {
+      priceColumns: [
+        {
+          label: '版本',
+          value: 'name',
+          class: 'h-2x',
+          valueClass: 'fs-20 fw-b',
+        },
+        { label: '收费方式', value: 'chargeType' },
+        {
+          label: '价格',
+          value: (d) => {
+            d = d.price
+            if (d && typeof d === 'number') return d + '元'
+            return d
+          },
+        },
+        { label: '账号数量', value: 'accountsCount' },
+        { label: '充值金额', value: 'rechargeAmount' },
+        { label: '部署方式', value: 'deploymentType' },
+        { label: '功能定制', value: 'featureCustomization' },
+        { label: '权限管理', value: 'permissionManage' },
+        { label: '财务管理', value: 'financialManage' },
+        { label: '统计报表', value: 'statisticalReport' },
+        { label: '订单管理', value: 'orderManage' },
+        { label: '物流管理', value: 'logisticsManage' },
+        { label: '订单数据存储', value: 'orderStorage' },
+        { label: '操作日志查看天数', value: 'logsRetainDays' },
+        { label: '店铺数量', value: 'shopCount' },
+        { label: '图片空间', value: 'imageStorage' },
+        {
+          label: '培训方式',
+          value: (d) => {
+            d = d.trainingType
+            if (Array.isArray(d)) return d.map((e) => `<p>${e}</p>`).join('')
+            return d
+          },
+          class: 'h-3x',
+          valueClass: 'list',
+        },
+        { label: '专属产品经理', value: 'exclusivePM' },
+      ],
+
+      prices: [
+        {
+          name: '试用版',
+
+          chargeType: '免费3个月或3000单', // 收费方式
+          price: 0, // 价格
+          accountsCount: 10, // 账号数量
+          rechargeAmount: '赠送', // 充值金额
+          deploymentType: 'SaaS', // 部署方式
+          featureCustomization: false, // 功能定制
+          permissionManage: true, // 权限管理
+          financialManage: true, // 财务管理
+          statisticalReport: true, // 统计报表
+          orderManage: true, // 订单管理
+          logisticsManage: true, // 物流管理
+          orderStorage: '3个月或试用套餐结束', // 订单数据存储
+          logsRetainDays: '3个月或试用套餐结束', // 操作日志查看天数
+          shopCount: 20, // 店铺数量
+          imageStorage: '2G', // 图片空间
+          trainingType: '线上培训', // 培训方式
+          exclusivePM: false, // 专属产品经理
+        },
+        {
+          name: '基础版',
+
+          chargeType: '按单收费', // 收费方式
+          price: '0.2元/单', // 价格
+          accountsCount: 100, // 账号数量
+          rechargeAmount: '首充10000元', // 充值金额
+          deploymentType: 'SaaS', // 部署方式
+          featureCustomization: false, // 功能定制
+          permissionManage: true, // 权限管理
+          financialManage: true, // 财务管理
+          statisticalReport: true, // 统计报表
+          orderManage: true, // 订单管理
+          logisticsManage: true, // 物流管理
+          orderStorage: '180天', // 订单数据存储
+          logsRetainDays: '90天', // 操作日志查看天数
+          shopCount: 50, // 店铺数量
+          imageStorage: '4G', // 图片空间
+          trainingType: '线上培训', // 培训方式
+          exclusivePM: true, // 专属产品经理
+        },
+
+        {
+          name: '进阶版',
+
+          chargeType: '按单收费', // 收费方式
+          price: '0.16元/单', // 价格
+          accountsCount: '不限', // 账号数量
+          rechargeAmount: '首充30000元', // 充值金额
+          deploymentType: 'SaaS', // 部署方式
+          featureCustomization: '优化', // 功能定制
+          permissionManage: true, // 权限管理
+          financialManage: true, // 财务管理
+          statisticalReport: true, // 统计报表
+          orderManage: true, // 订单管理
+          logisticsManage: true, // 物流管理
+          orderStorage: '360天', // 订单数据存储
+          logsRetainDays: '180天', // 操作日志查看天数
+          shopCount: 100, // 店铺数量
+          imageStorage: '10G', // 图片空间
+          trainingType: ['每周线上回访', '每年3次上门回访', '每年3次上门实施'], // 培训方式
+          exclusivePM: true, // 专属产品经理
+        },
+
+        {
+          name: '尊享版',
+
+          chargeType: '按月收费', // 收费方式
+          price: 9800, // 价格
+          accountsCount: '不限', // 账号数量
+          rechargeAmount: '季付', // 充值金额
+          deploymentType: 'SaaS', // 部署方式
+          featureCustomization: '优化+通用定制', // 功能定制
+          permissionManage: true, // 权限管理
+          financialManage: true, // 财务管理
+          statisticalReport: true, // 统计报表
+          orderManage: true, // 订单管理
+          logisticsManage: true, // 物流管理
+          orderStorage: '一直存储', // 订单数据存储
+          logsRetainDays: '360天', // 操作日志查看天数
+          shopCount: '不限', // 店铺数量
+          imageStorage: '50G', // 图片空间
+          trainingType: ['每周线上回访', '每年6次上门回访', '每年4次上门实施'], // 培训方式
+          exclusivePM: true, // 专属产品经理
+        },
+
+        {
+          name: '至尊版',
+
+          chargeType: '按月收费', // 收费方式
+          price: 29800, // 价格
+          accountsCount: '不限', // 账号数量
+          rechargeAmount: '季付', // 充值金额
+          deploymentType: 'SaaS或阿里云独立部署', // 部署方式
+          featureCustomization: '支持个性化定制', // 功能定制
+          permissionManage: true, // 权限管理
+          financialManage: true, // 财务管理
+          statisticalReport: true, // 统计报表
+          orderManage: true, // 订单管理
+          logisticsManage: true, // 物流管理
+          orderStorage: '一直存储', // 订单数据存储
+          logsRetainDays: '360天', // 操作日志查看天数
+          shopCount: '不限', // 店铺数量
+          imageStorage: '100G', // 图片空间
+          trainingType: ['每周线上回访', '每年3次上门回访', '每年6次上门实施'], // 培训方式
+          exclusivePM: true, // 专属产品经理
+        },
+      ],
+    }
+  },
+  methods: {
+    value(col, val) {
+      if (!val) return
+      let value
+      const key = col.value
+      if (typeof key === 'function') value = key(val)
+      else value = val[key]
+
+      if (typeof value === 'boolean') {
+        return `<span class="${value ? 'yes' : 'no'}"></span>`
+      }
+      if (typeof value === 'string') {
+        value = value.replaceAll(
+          /((\d+)(\.\d+)?)/g,
+          '<span class="number">$1</span>'
+        )
+      }
+      return value
+    },
+  },
+}
+</script>
+<style scoped>
+.header-banner {
+  position: relative;
+  overflow: hidden;
+  text-align: center;
+}
+
+.text {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.text h2 {
+  font-size: 36px;
+  text-align: center;
+  color: #fff;
+  font-weight: bold;
+  user-select: none;
+}
+.image {
+  height: 26vw;
+}
+
+.text hr {
+  border: none;
+  width: 30%;
+  height: 2px;
+  margin: 20px auto;
+  background: url(../../assets/images/banner-line.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.text ul {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.text ul li:not(:last-child) {
+  margin-right: 40px;
+}
+.text li i {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+  vertical-align: top;
+}
+
+.text li span {
+  display: inline-block;
+  line-height: 24px;
+  vertical-align: top;
+  color: #fff;
+}
+
+.text li .i1 {
+  background: url(../../assets/images/banner-icon-01.png);
+  background-size: 100% 100%;
+}
+
+.text li .i2 {
+  background: url(../../assets/images/banner-icon-02.png);
+  background-size: 100% 100%;
+}
+
+.text li .i3 {
+  background: url(../../assets/images/banner-icon-03.png);
+  background-size: 100% 100%;
+}
+
+.text li .i4 {
+  background: url(../../assets/images/banner-icon-04.png);
+  background-size: 100% 100%;
+}
+
+.content-body {
+  width: 1400px;
+  margin: 0 auto;
+  padding: 100px 0;
+}
+
+.price-container {
+  display: flex;
+  border-radius: 8px;
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
+  user-select: none;
+  overflow: hidden;
+  font-size: 16px;
+}
+
+.price-column,
+.price-value {
+  box-sizing: border-box;
+  height: 40px;
+  padding: 0 30px;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.price-column {
+  border-right: solid 1px #eee;
+  color: #787878;
+}
+
+.price-value {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 1.5;
+}
+
+.price-items {
+  display: flex;
+  flex: 1;
+}
+
+.price-item {
+  transition: 0.15s;
+  padding-bottom: 20px;
+  flex: 1;
+}
+
+.price-item:hover {
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  background-color: #0085fc;
+  color: #fff;
+  border-right: none;
+}
+
+.price-item:not(:last-child) {
+  border-right: solid 1px #eee;
+}
+</style>
+<style>
+.price-container .fs-20 {
+  font-size: 20px;
+}
+
+.price-container .fw-b {
+  font-weight: bold;
+}
+
+.price-container .h-2x {
+  height: 80px;
+}
+
+.price-container .h-3x {
+  height: 120px;
+}
+
+.price-container .number {
+  font-size: 1.2em;
+  margin: 0 4px;
+}
+
+.price-container .list {
+  white-space: normal;
+  flex-direction: column;
+}
+
+.price-container .list p {
+  margin: 0;
+}
+
+.price-container .yes {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  background-size: 100%;
+  background-image: url("data:image/svg+xml,%0A%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.4122 5.66876L17.2065 6.33527C17.6454 6.70315 17.7026 7.35718 17.3345 7.79587C17.3345 7.79594 17.3344 7.79602 17.3341 7.79591L10.3994 16.0559C10.031 16.4942 9.37711 16.5513 8.93832 16.1835L7.3497 14.8505L14.9512 5.79638C15.3196 5.35806 15.9734 5.30094 16.4122 5.66876Z' fill='%2334D98A'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.69383 11.1494L5.38955 10.3767C5.76669 9.95781 6.40934 9.91692 6.83653 10.2846L11.7137 14.4824L10.3868 16.0791C10.0208 16.5195 9.367 16.5798 8.92658 16.2138C8.92115 16.2093 8.91576 16.2047 8.91043 16.2001L4.78549 12.6269C4.35264 12.252 4.3057 11.5971 4.68065 11.1643C4.68499 11.1593 4.68939 11.1543 4.69383 11.1494Z' fill='%2334D98A'/%3E%3C/svg%3E%0A");
+}
+
+.price-container .no {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  background-size: 100%;
+  background-image: url("data:image/svg+xml,%0A%3Csvg width='23' height='22' viewBox='0 0 23 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.1735 5.25388L17.2461 6.32649C17.5846 6.66499 17.5846 7.21382 17.2461 7.55233L13.7974 11.0004L17.2461 14.4489C17.5846 14.7874 17.5846 15.3363 17.2461 15.6748L16.1735 16.7474C15.835 17.0859 15.2862 17.0859 14.9477 16.7474L11.4983 13.2974L8.05233 16.7461C7.71382 17.0846 7.16499 17.0846 6.82649 16.7461L5.75388 15.6735C5.41537 15.335 5.41537 14.7862 5.75388 14.4477L9.19907 11.0004L5.75388 7.55358C5.41537 7.21507 5.41537 6.66625 5.75388 6.32774L6.82649 5.25513C7.16499 4.91663 7.71382 4.91663 8.05233 5.25513L11.4983 8.70123L14.9477 5.25388C15.2862 4.91537 15.835 4.91537 16.1735 5.25388Z' fill='%23FF4930'/%3E%3C/svg%3E%0A");
+}
+</style>

src/views/register.vue

@@ -7,6 +7,7 @@
         </span>
         </span>
       </a>
       </a>
     </div>
     </div>
+
     <div class="login_content">
     <div class="login_content">
       <h2 style="text-align: center">用户注册</h2>
       <h2 style="text-align: center">用户注册</h2>
       <el-form
       <el-form
@@ -304,4 +305,5 @@ export default {
   top: 60px;
   top: 60px;
   left: 80px;
   left: 80px;
 }
 }
+
 </style>
 </style>