Skip to content

O
offical_web
Commit 4a6ea607 by qinjianhui
Options

fix: 优化

parent 67090795
Showing with 2224 additions and 694 deletions
public/iconfont/demo.css 0 → 100644
/* 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 0 → 100644
<!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 0 → 100644
@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 0 → 100644
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 0 → 100644
{
"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 @@ ...@@ -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/product-intro.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="function_bg"> <div class="function_bg">
<h2 style="text-align: center; padding-bottom: 40px">产品优势</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
...@@ -258,6 +258,376 @@ ...@@ -258,6 +258,376 @@
支持商品一键发布下架。 支持商品一键发布下架。
</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">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
<div class="row">
<div class="row-item">
<div class="item-text">
<span>智能备货分析</span>
</div>
<div class="item-des">
<span>
统计本地仓客户订单销量，根据备货规则提示本地仓库是否需要补货，且提供参考补货数量
</span>
</div>
</div>
<div class="row-item">
<div class="item-icon"></div>
<div class="item-text">
<span>1688自动下单</span>
</div>
<div class="item-des">
<span>设置规则后自动下单，节省人力成本</span>
</div>
</div>
<div class="row-item">
<div class="item-icon"></div>
<div class="item-text">
<span>加急采购</span>
</div>
<div class="item-des">
<span>库存不足，系统自动加急采购，可一键生成采购单</span>
</div>
</div>
<div class="row-item">
<div class="item-icon"></div>
<div class="item-text">
<span>不良品管理</span>
</div>
<div class="item-des">
<span>针对不良品的退换货流程管理</span>
</div>
</div>
<div class="row-item">
<div class="item-icon"></div>
<div class="item-text">
<span>加工采购</span>
</div>
<div class="item-des">
<span>支持原料采购、成品加工，实现自主加工产品</span>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" v-show="activeTab === 1">
<div class="tab-pane_top">
<img src="../assets/images/solution-bg.png" />
<span class="text">
系统智能化实现自动分仓、自动审单、标记发货及监控、发货超时提醒，多种订单状态满足客户日常处理订单的所有需求
</span>
<div class="free-btn">
<el-button type="primary" size="small">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
<div class="row">
<div class="row-item">
<div class="item-text">
<span>同步订单</span>
</div>
<div class="item-des">
<span>
系统自动抓取平台上的订单到客户订单页面
</span>
</div>
</div>
<div class="row-item">
<div class="item-text">
<span>智能发货</span>
</div>
<div class="item-des">
<span>FBA库存不足时，对库存现有的商品数先发货，再去采购不足商品</span>
</div>
</div>
<div class="row-item">
<div class="item-text">
<span>自动派单</span>
</div>
<div class="item-des">
<span>自动派单，扫码自动打印物流面单</span>
</div>
</div>
<div class="row-item">
<div class="item-icon"></div>
<div class="item-text">
<span>批量审核</span>
</div>
<div class="item-des">
<span>订单批量审核，一键拆分、合并订单；</span>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" v-show="activeTab === 2">
<div class="tab-pane_top">
<img src="../assets/images/solution-bg.png" />
<span class="text">
智能高效的仓储管理系统，集收货、入库、出库等库内作业为一体，对信息、资源更完美的管理
</span>
<div class="free-btn">
<el-button type="primary" size="small">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
<div class="row">
<div class="row-item">
<div class="item-text">
<span>提升效率</span>
</div>
<div class="item-des">
<span>
规划最优拣货路径，提升仓库作业效率；
</span>
</div>
</div>
<div class="row-item">
<div class="item-text">
<span>实时同步库存</span>
</div>
<div class="item-des">
<span>线上线下、多平台、多店铺库存实时同步；</span>
</div>
</div>
<div class="row-item">
<div class="item-text">
<span>数据化管理</span>
</div>
<div class="item-des">
<span>数据化管理，进销存清晰明了。</span>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" v-show="activeTab === 3">
<div class="tab-pane_top">
<img src="../assets/images/solution-bg.png" />
<span class="text">
强大的数据中心，能够精准、快速地分析出各个维度、环节的利润、成本、支出。
</span>
<div class="free-btn">
<el-button type="primary" size="small">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
<div class="row">
<div class="row-item">
<div class="item-text">
<span>订单利润报表</span>
</div>
<div class="item-des">
<span>
多维度利润分析，精准掌握店铺状态
</span>
</div>
</div>
<div class="row-item">
<div class="item-text">
<span>图表结合</span>
</div>
<div class="item-des">
<span>图表结合，数据准确清晰可视化</span>
</div>
</div>
<div class="row-item">
<div class="item-text">
<span>资金流通报表</span>
</div>
<div class="item-des">
<span>开发业绩统计让公司管理有数据可循</span>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" v-show="activeTab === 4">
<div class="tab-pane_top">
<img src="../assets/images/solution-bg.png" />
<span class="text">
通过订单审核策略自动匹配运输方式、发货仓，运费试算。包裹物流轨迹追踪，精准掌握包裹状态信息，提高效率，减少损失
</span>
<div class="free-btn">
<el-button type="primary" size="small">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
<div class="row">
<div class="row-item">
<div class="item-text">
<span>自定义申报规则</span>
</div>
<div class="item-des">
<span>
自定义申报报关信息，按需快速申报，避免高昂关税
</span>
</div>
</div>
<div class="row-item">
<div class="item-text">
<span>包裹物流轨迹</span>
</div>
<div class="item-des">
<span>物流轨迹状态实时跟踪，实现包裹一站式查询与异常提醒</span>
</div>
</div>
<div class="row-item">
<div class="item-text">
<span>运输统计</span>
</div>
<div class="item-des">
<span>统计发货、自动计算运费，方便运费核算</span>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" v-show="activeTab === 5">
<div class="tab-pane_top">
<img src="../assets/images/solution-bg.png" />
<span class="text">
管理所有产品信息，精细到每一张图片、每一个标题，并且实现快速批量刊登
</span>
<div class="free-btn">
<el-button type="primary" size="small">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
<div class="row">
<div class="row-item">
<div class="item-text">
<span>一体化</span>
</div>
<div class="item-des">
<span>
支持绑定主商品，销售、生产、采购一体化
</span>
</div>
</div>
<div class="row-item">
<div class="item-text">
<span>一健导入</span>
</div>
<div class="item-des">
<span>一键导入店铺，同步供应</span>
</div>
</div>
<div class="row-item">
<div class="item-text">
<span>缺货预警</span>
</div>
<div class="item-des">
<span>智能缺货预警，自动计算补货数量</span>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" v-show="activeTab === 6">
<div class="tab-pane_top">
<img src="../assets/images/solution-bg.png" />
<span class="text">
采用精准严谨的财务管理流程，算清每一分钱的来龙去脉，实时掌握公司资金流
</span>
<div class="free-btn">
<el-button type="primary" size="small">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
<div class="row">
<div class="row-item">
<div class="item-text">
<span>多维度对账</span>
</div>
<div class="item-des">
<span>
物流、广告、采购等多维度对账，提高财务工作效率
</span>
</div>
</div>
<div class="row-item">
<div class="item-text">
<span>双重审核</span>
</div>
<div class="item-des">
<span>放款双重审核，安全有保障</span>
</div>
</div>
<div class="row-item">
<div class="item-text">
<span>加快资金流转</span>
</div>
<div class="item-des">
<span>降低管理、运营、产品成本，加快资金流转</span>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" v-show="activeTab === 7">
<div class="tab-pane_top">
<img src="../assets/images/solution-bg.png" />
<span class="text">
采用精准严谨的财务管理流程，算清每一分钱的来龙去脉，实时掌握公司资金流
</span>
<div class="free-btn">
<el-button type="primary" size="small">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
<div class="row">
<div class="row-item">
<div class="item-text">
<span>统计管理</span>
</div>
<div class="item-des">
<span>
多平台、多店铺统一管理
</span>
</div>
</div>
<div class="row-item">
<div class="item-text">
<span>方便快捷</span>
</div>
<div class="item-des">
<span>支持多店铺之间导入商品</span>
</div>
</div>
<div class="row-item">
<div class="item-text">
<span>下架</span>
</div>
<div class="item-des">
<span>支持商品一键发布下架</span>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -267,26 +637,159 @@ ...@@ -267,26 +637,159 @@
export default { export default {
name: 'productIntro', name: 'productIntro',
data() { data() {
return {} return {
activeTab: 0,
tabItems: [
{
icon: 'icon-shengchanguanli',
title: '采购管理',
},
{ icon: 'icon-dingdanguanli35', title: '订单管理' },
{ icon: 'icon-cangku_cangchuguanli_o', title: '仓储管理' },
{ icon: 'icon-baobiaofenxi', title: '报表分析' },
{ icon: 'icon-wuliuguanli', title: '物流管理' },
{ icon: 'icon-shangpinguanli', title: '商品管理' },
{ icon: 'icon-caiwuguanli', title: '财务管理' },
{ icon: 'icon-dianpuguanli', title: '店铺管理' },
],
}
},
methods: {
onChangeTabIndex(index) {
this.activeTab = index
},
}, },
} }
</script> </script>
<style scoped> <style scoped>
.product-intro {
padding: 100px 0;
}
.function_bg { .function_bg {
padding: 100px; width: 60vw;
text-align: center; margin: 0 auto;
} }
.product-pros { .product-pros {
display: grid; display: flex;
grid-template-columns: repeat(4, 1fr); align-items: stretch;
gap: 10px; /* 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%;
......
src/views/aboutus/aboutPage.vue
...@@ -53,7 +53,7 @@ export default { ...@@ -53,7 +53,7 @@ export default {
} }
.text h2 { .text h2 {
font-size: 48px; font-size: 36px;
text-align: center; text-align: center;
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
......
src/views/demand/demandPage.vue
<template> <template>
<div class="demand-page"> <div class="demand-page">
<div class="header-banner"> <div ref="headerBanner" class="header-banner">
<!-- <div class="image">
<img
src="../../assets/images/function/function.png"
style="width: 100%; height: 100%; object-fit: cover" />
</div> -->
<div class="image"> <div class="image">
<img <img
src="../../assets/images/banner-solution.jpg" src="../../assets/images/banner-solution.jpg"
style="width: 100%; height: 100%; object-fit: cover" /> style="width: 100%; height: 100%; object-fit: cover" />
</div> </div>
<div class="text"> <div class="text">
<h2>痛点需求</h2> <h2>需求痛点</h2>
<p> <p>
九猫拥有完整的实施和售后体系，秉承“服务为本，客户至上”的理念竭诚为您服务 九猫拥有完整的实施和售后体系，秉承“服务为本，客户至上”的理念竭诚为您服务
</p> </p>
</div> </div>
<div class="feature-list" ref="feature">
<div
class="feature-item"
v-for="(f, index) in featureLists"
:key="index"
:class="{ active: active === index }"
@click="onChangePane(index)">
<span>{{ f }}</span>
</div>
</div>
</div>
<div class="function-body">
<div class="tab-content">
<div class="tab-pane" v-if="active === 0">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px; font-weight: 100;">缺货统计</h3>
<h4 style="text-align: center">
打通供应链全流程，派单统计产品缺货数量
</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/function/qh.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">多维度数据分析</h4>
<p style="text-align: center">
SPU、SKU两个维度统计缺货数量
</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-2">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>高效采购生产</h4>
<p>采购生产双向进行</p>
</div>
</div>
<div class="right a-img">
<img class="t1" src="../../assets/images/function/sx.png" />
<img class="t2" src="../../assets/images/function/sx_1.png" />
<img class="t3" src="../../assets/images/function/sx-2.png" />
</div>
</div>
</div>
</div>
<div class="t-row-3">
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/function/cg.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">SKU查询订单</h4>
<p style="text-align: center">
根据SKU方便快捷的查询要备货的订单
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" v-if="active === 1">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">仓库预警</h3>
<h4 style="text-align: center">
各仓库库存状况一目了然，解决库存难管理问题
</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/kc.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">实时查看产品库存数量</h4>
<p style="text-align: center">
实时统计产品库存数量、占用数量、可用数量、缺货数量等
</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-2">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>订单占用明细</h4>
<p>
实时统计产品占用的订单明细，交易时间、缺货数量、订单状态等
</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
</div>
</div>
</div>
</div>
<div class="t-row-3">
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/no.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">采购未入库明细</h4>
<p style="text-align: center">
实时统计采购未入库的数量、单号，实时掌握采买情况
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" v-if="active === 2">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">采购管理</h3>
<h4 style="text-align: center">
运营、采购、仓库等部门高效协同，实时跟踪采购需求
</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/kc.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">一键生成采购单</h4>
<p style="text-align: center">
根据缺货数量一键生成采购单，建议补货数量，科学控制备货库存
</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-2">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<p>各部门协同合作，轻松掌握库存量、采购量以及到货量</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
</div>
</div>
</div>
</div>
<div class="t-row-3">
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/no.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">采购流程方便快捷</h4>
<p style="text-align: center">
审核、付款、发货、入库一体化操作
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" v-if="active === 3">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">生产管理</h3>
<h4 style="text-align: center">
采购与供应商同页面操作，实时沟通，有效缩短收货周期
</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/kc.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">一键生成采购单</h4>
<p style="text-align: center">
精准跟踪发货进度，支持分批发货
</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-2">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<p>生产单、交货单与财务核算一体化管理</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
</div>
</div>
</div>
</div>
<div class="t-row-3">
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/no.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">采购流程方便快捷</h4>
<p style="text-align: center">支持发货前修改发货数量</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-4">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<p>全流程日志，方便追溯和分析</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" v-if="active === 4">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">收获管理</h3>
<h4 style="text-align: center">
采购生产同路径入库，收货信息化管理
</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/kc.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">一键生成采购单</h4>
<p style="text-align: center">入库财务及仓库双重审核</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-2">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<p>允许分批收货，收货后可进行质检</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
</div>
</div>
</div>
</div>
<div class="t-row-3">
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/no.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">采购流程方便快捷</h4>
<p style="text-align: center">可用其它入库快速入库</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" v-if="active === 5">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">自发货</h3>
<h4 style="text-align: center">
采购与供应商同页面操作，实时沟通，有效缩短收货周期
</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/kc.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">一键生成采购单</h4>
<p style="text-align: center">
精准跟踪发货进度，支持分批发货
</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-2">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<p>生产单、交货单与财务核算一体化管理</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
</div>
</div>
</div>
</div>
<div class="t-row-3">
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/no.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">采购流程方便快捷</h4>
<p style="text-align: center">支持发货前修改发货数量</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-4">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<p>全流程日志，方便追溯和分析</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" v-if="active === 6">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">物流管理</h3>
<h4 style="text-align: center">
智能推荐优势物流商，物流轨迹实时查询
</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/kc.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">全程跟踪包裹状态</h4>
<p style="text-align: center">
精准跟踪发货进度，支持分批发货
</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-2">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<p>发货后的订单，系统自动计算最低物流运费</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
</div>
</div>
</div>
</div>
<div class="t-row-3">
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/no.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">采购流程方便快捷</h4>
<p style="text-align: center">物流跟踪实时查询包裹状态</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-4">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<p>图表展示物流方式占比，使你更快做出决策</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" v-if="active === 7">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">FBA发货</h3>
<h4 style="text-align: center">
一表连通装箱、发货、物流，操作流程方便快捷
</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/kc.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">一键生成采购单</h4>
<p style="text-align: center">一键装箱，一键创建物流订单</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-2">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<p>可分批生成跟踪号</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
</div>
</div>
</div>
</div>
<div class="t-row-3">
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/no.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">采购流程方便快捷</h4>
<p style="text-align: center">缺货自动转至待补货</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<div class="content-body"></div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'demandPage', 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> </script>
<style scoped> <style scoped>
...@@ -43,10 +580,143 @@ export default { ...@@ -43,10 +580,143 @@ export default {
font-size: 24px; font-size: 24px;
} }
.image { .image {
height: 33.33vw; height: 33.333vw;
}
.feature-list {
display: flex;
position: absolute;
left: 50%;
bottom: -30px;
transform: translateX(-50%);
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
width: 1150px;
background-color: #fff;
border-radius: 6px;
transition: all 0.3s;
}
.feature-item {
flex: 1;
text-align: center;
padding: 20px;
cursor: pointer;
}
.active {
background-color: #0089ff;
color: #fff;
}
.function-body {
}
.t-row-1 {
padding-top: 70px;
padding-bottom: 80px;
}
.t-row-2,
.t-row-4 {
padding: 75px 0;
background-color: #f7f8fa;
}
.t-row-3,
.t-row-5 {
padding: 75px 0;
}
.t-row-2 .a-img {
position: relative;
}
.t-row-2 .t1 {
width: 100%;
}
.t-row-2 .t2 {
position: absolute;
width: 150px;
left: 33px;
top: 130px;
}
.t-row-2 .t3 {
position: absolute;
width: 160px;
left: 290px;
top: 80px;
}
.card-inner {
margin: 0 auto;
width: 1150px;
}
.card-inner h4 {
color: #777;
font-weight: 100;
margin-top: 10px;
margin-bottom: 80px;
}
.card-inner-content {
display: flex;
justify-content: center;
align-items: center;
}
.card-inner-content .content-text h4 {
margin-bottom: 16px;
line-height: 48px;
font-weight: 500;
font-size: 32px;
position: relative;
}
.card-inner-content .content-text p {
margin-bottom: 40px;
color: #4e5969;
line-height: 24px;
font-size: 16px;
}
.card-inner-content .content-text h4::before {
content: '';
position: absolute;
top: -16px;
width: 34px;
height: 6px;
background-color: #0089ff;
border-radius: 3px;
}
.left {
flex: 1;
}
.left img {
width: 100%;
}
.right img {
width: 100%;
}
.right {
flex: 1;
} }
.content-body { .feature-scrolling {
height: calc(100vh - 33.333vw - 60px); position: fixed;
top: 60px;
left: 0;
bottom: unset;
width: 100%;
transform: translateX(0);
border-radius: 0;
box-shadow: none;
z-index: 2;
} }
</style> </style>
\ No newline at end of file
src/views/function/functionPage.vue
<template> <template>
<div class="function-page"> <div class="function-page">
<div ref="headerBanner" class="header-banner"> <div 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"> <div class="image">
<img <img
src="../../assets/images/banner-solution.jpg" src="../../assets/images/banner.jpg"
style="width: 100%; height: 100%; object-fit: cover" /> style="width: 100%; height: 100%; object-fit: cover" />
</div> </div>
<div class="text"> <div class="text">
...@@ -17,545 +12,13 @@ ...@@ -17,545 +12,13 @@
九猫拥有完整的实施和售后体系，秉承“服务为本，客户至上”的理念竭诚为您服务 九猫拥有完整的实施和售后体系，秉承“服务为本，客户至上”的理念竭诚为您服务
</p> </p>
</div> </div>
<div class="feature-list" ref="feature">
<div
class="feature-item"
v-for="(f, index) in featureLists"
:key="index"
:class="{ active: active === index }"
@click="onChangePane(index)">
<span>{{ f }}</span>
</div>
</div>
</div>
<div class="function-body">
<div class="tab-content">
<div class="tab-pane" v-if="active === 0">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px; font-weight: 100;">缺货统计</h3>
<h4 style="text-align: center">
打通供应链全流程，派单统计产品缺货数量
</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/function/qh.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">多维度数据分析</h4>
<p style="text-align: center">
SPU、SKU两个维度统计缺货数量
</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-2">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>高效采购生产</h4>
<p>采购生产双向进行</p>
</div>
</div>
<div class="right a-img">
<img class="t1" src="../../assets/images/function/sx.png" />
<img class="t2" src="../../assets/images/function/sx_1.png" />
<img class="t3" src="../../assets/images/function/sx-2.png" />
</div>
</div>
</div>
</div>
<div class="t-row-3">
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/function/cg.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">SKU查询订单</h4>
<p style="text-align: center">
根据SKU方便快捷的查询要备货的订单
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" v-if="active === 1">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">仓库预警</h3>
<h4 style="text-align: center">
各仓库库存状况一目了然，解决库存难管理问题
</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/kc.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">实时查看产品库存数量</h4>
<p style="text-align: center">
实时统计产品库存数量、占用数量、可用数量、缺货数量等
</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-2">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>订单占用明细</h4>
<p>
实时统计产品占用的订单明细，交易时间、缺货数量、订单状态等
</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
</div>
</div>
</div>
</div>
<div class="t-row-3">
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/no.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">采购未入库明细</h4>
<p style="text-align: center">
实时统计采购未入库的数量、单号，实时掌握采买情况
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" v-if="active === 2">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">采购管理</h3>
<h4 style="text-align: center">
运营、采购、仓库等部门高效协同，实时跟踪采购需求
</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/kc.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">一键生成采购单</h4>
<p style="text-align: center">
根据缺货数量一键生成采购单，建议补货数量，科学控制备货库存
</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-2">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<p>各部门协同合作，轻松掌握库存量、采购量以及到货量</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
</div>
</div>
</div>
</div>
<div class="t-row-3">
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/no.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">采购流程方便快捷</h4>
<p style="text-align: center">
审核、付款、发货、入库一体化操作
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" v-if="active === 3">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">生产管理</h3>
<h4 style="text-align: center">
采购与供应商同页面操作，实时沟通，有效缩短收货周期
</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/kc.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">一键生成采购单</h4>
<p style="text-align: center">
精准跟踪发货进度，支持分批发货
</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-2">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<p>生产单、交货单与财务核算一体化管理</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
</div>
</div>
</div>
</div>
<div class="t-row-3">
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/no.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">采购流程方便快捷</h4>
<p style="text-align: center">支持发货前修改发货数量</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-4">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<p>全流程日志，方便追溯和分析</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" v-if="active === 4">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">收获管理</h3>
<h4 style="text-align: center">
采购生产同路径入库，收货信息化管理
</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/kc.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">一键生成采购单</h4>
<p style="text-align: center">入库财务及仓库双重审核</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-2">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<p>允许分批收货，收货后可进行质检</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
</div>
</div>
</div>
</div>
<div class="t-row-3">
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/no.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">采购流程方便快捷</h4>
<p style="text-align: center">可用其它入库快速入库</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" v-if="active === 5">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">自发货</h3>
<h4 style="text-align: center">
采购与供应商同页面操作，实时沟通，有效缩短收货周期
</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/kc.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">一键生成采购单</h4>
<p style="text-align: center">
精准跟踪发货进度，支持分批发货
</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-2">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<p>生产单、交货单与财务核算一体化管理</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
</div>
</div>
</div>
</div>
<div class="t-row-3">
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/no.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">采购流程方便快捷</h4>
<p style="text-align: center">支持发货前修改发货数量</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-4">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<p>全流程日志，方便追溯和分析</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" v-if="active === 6">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">物流管理</h3>
<h4 style="text-align: center">
智能推荐优势物流商，物流轨迹实时查询
</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/kc.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">全程跟踪包裹状态</h4>
<p style="text-align: center">
精准跟踪发货进度，支持分批发货
</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-2">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<p>发货后的订单，系统自动计算最低物流运费</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
</div>
</div>
</div>
</div>
<div class="t-row-3">
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/no.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">采购流程方便快捷</h4>
<p style="text-align: center">物流跟踪实时查询包裹状态</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-4">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<p>图表展示物流方式占比，使你更快做出决策</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" v-if="active === 7">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">FBA发货</h3>
<h4 style="text-align: center">
一表连通装箱、发货、物流，操作流程方便快捷
</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/kc.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">一键生成采购单</h4>
<p style="text-align: center">一键装箱，一键创建物流订单</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-2">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<p>可分批生成跟踪号</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
</div>
</div>
</div>
</div>
<div class="t-row-3">
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/no.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">采购流程方便快捷</h4>
<p style="text-align: center">缺货自动转至待补货</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<div class="content-body"></div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'functionPage', name: 'functionPage',
inject: {
scrollParent: 'scrollParent',
setHeaderShadow: 'setHeaderShadow',
},
data() {
return {
featureLists: [
'缺货统计',
'仓库预警',
'采购管理',
'生产管理',
'收货管理',
'自发货',
'物流管理',
'FBA发货',
],
active: 0,
}
},
mounted() {
this.setHeaderShadow(false)
this.scrollParent().addEventListener('scroll', this.onScroll)
},
beforeDestroy() {
this.setHeaderShadow(true)
this.scrollParent().removeEventListener('scroll', this.onScroll)
},
methods: {
onScroll() {
const top = this.scrollParent().scrollTop
if (top >= this.$refs.headerBanner.offsetHeight - 60) {
this.$refs.feature.classList.add('feature-scrolling')
} else {
this.$refs.feature.classList.remove('feature-scrolling')
}
},
onChangePane(index) {
this.active = index
this.scrollParent().scrollTo({
behavior: 'smooth',
top: this.$refs.headerBanner.offsetHeight - 60,
})
},
},
} }
</script> </script>
<style scoped> <style scoped>
...@@ -580,143 +43,10 @@ export default { ...@@ -580,143 +43,10 @@ export default {
font-size: 24px; font-size: 24px;
} }
.image { .image {
height: 33.333vw; height: 33.33vw;
}
.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 { .content-body {
position: fixed; height: calc(100vh - 33.333vw - 60px);
top: 60px;
left: 0;
bottom: unset;
width: 100%;
transform: translateX(0);
border-radius: 0;
box-shadow: none;
z-index: 2;
} }
</style> </style>
\ No newline at end of file
src/views/price/pricePage.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="header-banner"> <div class="header-banner">
<div class="image"> <div class="image">
<img <img
src="../../assets/images/banner-about.jpg" src="../../assets/images/footer.jpg"
style="width: 100%; height: 100%; object-fit: cover" /> style="width: 100%; height: 100%; object-fit: cover" />
</div> </div>
<div class="text"> <div class="text">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment