Skip to content

O
offical_web
Commit cfd7af3a by qinjianhui
Options

feat: 布局、样式修改

parent 67cd4fb3
Showing with 82 additions and 18 deletions
public/iconfont/demo_index.html
...@@ -55,6 +55,12 @@ ...@@ -55,6 +55,12 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe649;</span>
<div class="name">发货管理</div>
<div class="code-name">&amp;#xe649;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe727;</span> <span class="icon iconfont">&#xe727;</span>
<div class="name">订单管理</div> <div class="name">订单管理</div>
<div class="code-name">&amp;#xe727;</div> <div class="code-name">&amp;#xe727;</div>
...@@ -120,9 +126,9 @@ ...@@ -120,9 +126,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1673317221620') format('woff2'), src: url('iconfont.woff2?t=1679542858321') format('woff2'),
url('iconfont.woff?t=1673317221620') format('woff'), url('iconfont.woff?t=1679542858321') format('woff'),
url('iconfont.ttf?t=1673317221620') format('truetype'); url('iconfont.ttf?t=1679542858321') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
...@@ -149,6 +155,15 @@ ...@@ -149,6 +155,15 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-fahuoguanli"></span>
<div class="name">
发货管理
</div>
<div class="code-name">.icon-fahuoguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dingdanguanli35"></span> <span class="icon iconfont icon-dingdanguanli35"></span>
<div class="name"> <div class="name">
订单管理 订单管理
...@@ -249,6 +264,14 @@ ...@@ -249,6 +264,14 @@
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fahuoguanli"></use>
</svg>
<div class="name">发货管理</div>
<div class="code-name">#icon-fahuoguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dingdanguanli35"></use> <use xlink:href="#icon-dingdanguanli35"></use>
</svg> </svg>
<div class="name">订单管理</div> <div class="name">订单管理</div>
......
public/iconfont/iconfont.css
@font-face { @font-face {
font-family: "iconfont"; /* Project id 3857911 */ font-family: "iconfont"; /* Project id 3857911 */
src: url('iconfont.woff2?t=1673317221620') format('woff2'), src: url('iconfont.woff2?t=1679542858321') format('woff2'),
url('iconfont.woff?t=1673317221620') format('woff'), url('iconfont.woff?t=1679542858321') format('woff'),
url('iconfont.ttf?t=1673317221620') format('truetype'); url('iconfont.ttf?t=1679542858321') format('truetype');
} }
.iconfont { .iconfont {
...@@ -13,6 +13,10 @@ ...@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-fahuoguanli:before {
content: "\e649";
}
.icon-dingdanguanli35:before { .icon-dingdanguanli35:before {
content: "\e727"; content: "\e727";
} }
......
public/iconfont/iconfont.json
...@@ -6,6 +6,13 @@ ...@@ -6,6 +6,13 @@
"description": "", "description": "",
"glyphs": [ "glyphs": [
{ {
"icon_id": "29186467",
"name": "发货管理",
"font_class": "fahuoguanli",
"unicode": "e649",
"unicode_decimal": 58953
},
{
"icon_id": "763150", "icon_id": "763150",
"name": "订单管理", "name": "订单管理",
"font_class": "dingdanguanli35", "font_class": "dingdanguanli35",
......
src/views/demand/demandPage.vue
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<div class="text"> <div class="text">
<h2>需求痛点</h2> <h2>需求痛点</h2>
<p> <p>
九猫拥有完整的实施和售后体系，秉承“服务为本，客户至上”的理念竭诚为您服务 九猫ERP处理订单更加智捷、高效；供货承诺数据详实，生产进度一目了然；在线设计器一键合成，文创产品轻松出单
</p> </p>
</div> </div>
<div class="feature-list" ref="feature"> <div class="feature-list" ref="feature">
...@@ -706,15 +706,15 @@ export default { ...@@ -706,15 +706,15 @@ export default {
font-size: 16px; font-size: 16px;
} }
.card-inner-content .content-text h4::before { // .card-inner-content .content-text h4::before {
content: ''; // content: '';
position: absolute; // position: absolute;
top: -16px; // top: -16px;
width: 34px; // width: 34px;
height: 6px; // height: 6px;
background-color: #0089ff; // background-color: #0089ff;
border-radius: 3px; // border-radius: 3px;
} // }
.left { .left {
flex: 1; flex: 1;
......
src/views/function/functionPage.vue
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<div class="text"> <div class="text">
<h2>核心功能</h2> <h2>核心功能</h2>
<p> <p>
九猫拥有完整的实施和售后体系，秉承“服务为本，客户至上”的理念竭诚为您服务 九猫ERP处理订单更加智捷、高效；供货承诺数据详实，生产进度一目了然；在线设计器一键合成，文创产品轻松出单。
</p> </p>
</div> </div>
</div> </div>
...@@ -19,6 +19,36 @@ ...@@ -19,6 +19,36 @@
<div class="t-row-1"> <div class="t-row-1">
<div class="card-inner"> <div class="card-inner">
<h3 style="text-align: center; font-size: 32px; font-weight: 100"> <h3 style="text-align: center; font-size: 32px; font-weight: 100">
订单管理
</h3>
<h4 style="text-align: center">
获取面单、智能打单发货
</h4>
<div class="card-inner-content" :style="$isMobile ? 'flex-direction: column-reverse' : ''">
<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-B.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">
POD订单 POD订单
</h3> </h3>
<h4 style="text-align: center"> <h4 style="text-align: center">
...@@ -121,7 +151,7 @@ ...@@ -121,7 +151,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
<div class="t-row"> <div class="t-row">
<div class="t-row-1"> <div class="t-row-1">
<div class="card-inner"> <div class="card-inner">
......
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