Skip to content

O
offical_web
Commit 139be2d9 by qinjianhui
Options

feat: 底部页面完成

parent 8a045054
Showing with 145 additions and 69 deletions
src/components/headerNavMobile.vue
...@@ -55,13 +55,39 @@ ...@@ -55,13 +55,39 @@
<div <div
class="header-nav-mobile-child-item" class="header-nav-mobile-child-item"
v-for="(c, index) in r.children" v-for="(c, index) in r.children"
:class="{ active: isRouteActive(c) }"
:key="index"> :key="index">
<router-link <router-link
v-if="!c.children"
class="header-nav-mobile-link" class="header-nav-mobile-link"
:to="c.path" :to="c.path"
@click.native="toggleShow(c)"> @click.native="toggleShow(c)">
{{ c.name }} {{ c.name }}
</router-link> </router-link>
<div
v-else
class="header-nav-mobile-link flex items-center justify-between">
<span>{{ c.name }}</span>
<i
:class="
c.expanding ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
"
@click.stop="toggleExpand(c)"></i>
</div>
<div v-if="c.expanding" class="header-nav-mobile-sub-child">
<div
class="header-nav-mobile-child-item"
v-for="(s, index2) in c.children"
:class="{ active: isRouteActive(s) }"
:key="index2">
<router-link
class="header-nav-mobile-link"
:to="s.path"
@click.native="toggleShow(s)">
{{ s.name }}
</router-link>
</div>
</div>
</div> </div>
</div> </div>
</li> </li>
...@@ -111,20 +137,42 @@ export default { ...@@ -111,20 +137,42 @@ export default {
expanding: false, expanding: false,
children: [ children: [
{ {
name: '活动信息', name: '资源',
path: '', expanding: false,
children: [
{
name: '活动信息',
path: '',
},
{
name: '入住流程平台',
path: '',
},
{
name: '资讯',
path: '',
},
],
}, },
{ {
name: '入住流程平台', name: '支持',
path: '', expanding: false,
children: [
{
name: '帮助中心',
path: '',
},
],
}, },
{ {
name: '资讯', name: '了解SaaS ERP',
path: '', expanding: false,
}, children: [
{ {
name: '帮助中心', name: '如何通过财务管控向内部要效益',
path: '', path: '/financial',
},
],
}, },
], ],
}, },
...@@ -278,6 +326,11 @@ export default { ...@@ -278,6 +326,11 @@ export default {
color: var(--primary-color); color: var(--primary-color);
} }
} }
.header-nav-mobile-child-item {
&.active > .header-nav-mobile-link {
color: var(--primary-color);
}
}
.header-nav-mobile-item.active { .header-nav-mobile-item.active {
.header-nav-mobile-link { .header-nav-mobile-link {
...@@ -291,7 +344,19 @@ export default { ...@@ -291,7 +344,19 @@ export default {
.header-nav-mobile-child { .header-nav-mobile-child {
font-size: 14px; font-size: 14px;
color: #999; // color: #999;
background-color: #f8f9ff;
padding: 0 20px;
margin-top: 10px;
}
.header-nav-mobile-sub-child {
margin-left: 20px;
& > .header-nav-mobile-child-item {
border-bottom: 1px solid var(--border-color);
}
}
.header-nav-mobile-child-item {
line-height: 36px;
} }
.header-nav-mobile-children { .header-nav-mobile-children {
...@@ -299,7 +364,7 @@ export default { ...@@ -299,7 +364,7 @@ export default {
padding: 0; padding: 0;
} }
.header-nav-mobile-link { .header-nav-mobile-item > .header-nav-mobile-link {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
......
src/views/product/productionCustom.vue
...@@ -32,17 +32,17 @@ ...@@ -32,17 +32,17 @@
</div> </div>
</div> </div>
</div> </div>
<div class="product-custom-cont bg-colorBg py-14 lg:py-28"> <div class="product-custom-cont bg-colorBg py-14 mt-10 lg:mt-28 lg:py-28">
<div class="custom-container mx-auto"> <div class="custom-container mx-auto">
<div class="cont-title"> <div class="cont-title">
<div class="flex justify-center flex-col items-center gap-2"> <div class="flex justify-center flex-col items-center gap-2 mb-14 lg:mb-28">
<h3 <h3
class="font-medium text-xl lg:text-3xl" class="font-medium text-xl lg:text-3xl"
style="text-align: center"> style="text-align: center">
按需打印商品销售全球 按需打印商品销售全球
</h3> </h3>
<div <div
class="text-sm px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8"> class="text-sm px-8 lg:text-lg lg:px-0 font-light text-textContent">
0成本 · 0库存 0成本 · 0库存
</div> </div>
</div> </div>
...@@ -194,7 +194,8 @@ ...@@ -194,7 +194,8 @@
v-for="(item, index) in reasonList" v-for="(item, index) in reasonList"
:key="index"> :key="index">
<img :src="item.icon" width="36" style="height: 36px" /> <img :src="item.icon" width="36" style="height: 36px" />
<div class="reason-item-title font-bold text-sm text-center lg:text-left lg:text-2xl"> <div
class="reason-item-title font-bold text-sm text-center lg:text-left lg:text-2xl">
{{ item.title }} {{ item.title }}
</div> </div>
<div <div
......
src/views/product/productionLogistics.vue
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
</h3> </h3>
<div <div
class="text-sm px-8 lg:text-lg lg:px-0 font-light text-textContent lg:mb-4 lg:mb-8"> class="text-sm px-8 lg:text-lg lg:px-0 font-light text-textContent lg:mb-4 lg:mb-8">
领星旗下产品，助海外仓全面实现数字化 九猫旗下产品，助海外仓全面实现数字化
</div> </div>
</div> </div>
</div> </div>
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
SKU+箱多维度库存记录，助您精确管理库存 SKU+箱多维度库存记录，助您精确管理库存
</p> </p>
<p class="text-textPrimary mb-2.5 font-light text-sm"> <p class="text-textPrimary mb-2.5 font-light text-sm">
深度对接领星ERP，辐射50万+优质客户群 深度对接九猫ERP，辐射50万+优质客户群
</p> </p>
</div> </div>
</div> </div>
......
src/views/support/financialPage.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="financial-page"> <div class="financial-page">
<div class="bg-colorBg module-show"> <div class="bg-colorBg module-show">
<div class="topics-bg"> <div class="topics-bg">
<div class="w-full-70 mx-auto"> <div class="w-full-70 w-full-90 mx-auto">
<h2 <h2
class="font-medium text-2xl text-textTitle lg:text-5xl text-center"> class="font-medium text-2xl text-textTitle lg:text-5xl text-center">
如何通过财务管控向内部要效益？ 如何通过财务管控向内部要效益？
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</div> </div>
<div class="bg-white module-show"> <div class="bg-white module-show">
<div <div
class="flex justify-between w-full-70 mx-auto py-12 space-x-16 lg:py-28"> class="flex justify-between w-full-70 w-full-90 mx-auto py-12 space-x-16 lg:py-28">
<div> <div>
<div> <div>
<h2 <h2
...@@ -20,13 +20,13 @@ ...@@ -20,13 +20,13 @@
跨境电商财务管理难题 跨境电商财务管理难题
</h2> </h2>
<p <p
class="text-sm text-textTitle mt-5 px-4 lg:font-light lg:px-0 lg:text-lg text-textContent"> class="text-sm text-textTitle mt-5 lg:font-light lg:px-0 lg:text-lg text-textContent">
在当前跨境环境下，跨境业务盈利难度越来越大，跨境电商老板在内部管理的过程愈发需着重关注与效益紧密关联的事宜： 在当前跨境环境下，跨境业务盈利难度越来越大，跨境电商老板在内部管理的过程愈发需着重关注与效益紧密关联的事宜：
</p> </p>
</div> </div>
<ul <ul
class="list mt-6 w-full grid gap-x-28 grid-cols-1 gap-y-3 lg:mt-16 lg:grid-cols-2 lg:gap-y-16"> class="list mt-6 w-full grid gap-x-28 grid-cols-1 gap-y-3 lg:mt-16 lg:grid-cols-2 lg:gap-y-16">
<li class="list-item"> <li class="list-item ml-6 lg:ml-0">
<p <p
class="link-item text-sm text-textTitle font-medium lg:text-lg"> class="link-item text-sm text-textTitle font-medium lg:text-lg">
“如何将有限的收入花到实处，现有费用主要花到哪里了？” “如何将有限的收入花到实处，现有费用主要花到哪里了？”
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<p <p
class="link-item mt-0.5 text-sm font-light text-textContent lg:text-base"></p> class="link-item mt-0.5 text-sm font-light text-textContent lg:text-base"></p>
</li> </li>
<li class="list-item"> <li class="list-item ml-6 lg:ml-0">
<p <p
class="link-item text-sm text-textTitle font-medium lg:text-lg"> class="link-item text-sm text-textTitle font-medium lg:text-lg">
“如何发现所有可能性的隐形费用，精准核算成本与利润？” “如何发现所有可能性的隐形费用，精准核算成本与利润？”
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
<p <p
class="link-item mt-0.5 text-sm font-light text-textContent lg:text-base"></p> class="link-item mt-0.5 text-sm font-light text-textContent lg:text-base"></p>
</li> </li>
<li class="list-item"> <li class="list-item ml-6 lg:ml-0">
<p <p
class="link-item text-sm text-textTitle font-medium lg:text-lg"> class="link-item text-sm text-textTitle font-medium lg:text-lg">
“多久看一次报表，主要看哪些报表，关注哪些维度？” “多久看一次报表，主要看哪些报表，关注哪些维度？”
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
<p <p
class="link-item mt-0.5 text-sm font-light text-textContent lg:text-base"></p> class="link-item mt-0.5 text-sm font-light text-textContent lg:text-base"></p>
</li> </li>
<li class="list-item"> <li class="list-item ml-6 lg:ml-0">
<p <p
class="link-item text-sm text-textTitle font-medium lg:text-lg"> class="link-item text-sm text-textTitle font-medium lg:text-lg">
“售出的订单是否都回款了？业务现金流健康吗？” “售出的订单是否都回款了？业务现金流健康吗？”
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
</div> </div>
<div class="bg-colorBg"> <div class="bg-colorBg">
<div <div
class="flex justify-between w-full-70 mx-auto py-12 space-x-16 lg:py-28"> class="flex justify-between w-full-70 w-full-90 mx-auto py-12 space-x-16 lg:py-28">
<div> <div>
<div> <div>
<h2 <h2
...@@ -72,13 +72,13 @@ ...@@ -72,13 +72,13 @@
为什么跨境老板需要财务管控？ 为什么跨境老板需要财务管控？
</h2> </h2>
<p <p
class="text-sm text-textTitle mt-5 px-4 lg:font-light lg:px-0 lg:text-lg lg:text-textContent"> class="text-sm text-textTitle mt-5 lg:font-light lg:px-0 lg:text-lg lg:text-textContent">
合理的财务管控有利于帮助提升企业的效益，影响企业的发展方向 合理的财务管控有利于帮助提升企业的效益，影响企业的发展方向
</p> </p>
</div> </div>
<ul <ul
class="list mt-6 w-full grid gap-x-28 grid-cols-1 gap-y-3 lg:mt-16 lg:grid-cols-2 lg:gap-y-16"> class="list mt-6 w-full grid gap-x-28 grid-cols-1 gap-y-3 lg:mt-16 lg:grid-cols-2 lg:gap-y-16">
<li class="list-item"> <li class="list-item ml-6 lg:ml-0">
<p <p
class="link-item text-sm text-textTitle font-medium lg:text-lg"> class="link-item text-sm text-textTitle font-medium lg:text-lg">
以财务监管发现公司的运营情况 以财务监管发现公司的运营情况
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
透过财务的利润数据、人员绩效等数据，跨境老板能够发现公司整体的运营情况是否健康及正向发展。 透过财务的利润数据、人员绩效等数据，跨境老板能够发现公司整体的运营情况是否健康及正向发展。
</p> </p>
</li> </li>
<li class="list-item"> <li class="list-item ml-6 lg:ml-0">
<p <p
class="link-item text-sm text-textTitle font-medium lg:text-lg"> class="link-item text-sm text-textTitle font-medium lg:text-lg">
控制资金流向，确保正常运转 控制资金流向，确保正常运转
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
通过财务管控，跨境老板能够发现公司的核心支出与收入等资金流情况、资金或是增长或是下降的趋势，根据实际调整决策。 通过财务管控，跨境老板能够发现公司的核心支出与收入等资金流情况、资金或是增长或是下降的趋势，根据实际调整决策。
</p> </p>
</li> </li>
<li class="list-item"> <li class="list-item ml-6 lg:ml-0">
<p <p
class="link-item text-sm text-textTitle font-medium lg:text-lg"> class="link-item text-sm text-textTitle font-medium lg:text-lg">
预判与管控风险，调整方向 预判与管控风险，调整方向
...@@ -114,7 +114,7 @@ ...@@ -114,7 +114,7 @@
</div> </div>
<div class="bg-white"> <div class="bg-white">
<div <div
class="flex justify-between items-center w-full-70 mx-auto px-4 py-12 lg:py-28 lg:px-0"> class="flex justify-between items-center w-full-70 w-full-90 mx-auto px-4 py-12 lg:py-28 lg:px-0">
<div class="lx-list lg:w-120"> <div class="lx-list lg:w-120">
<header <header
class="text-xl text-center text-textTitle font-medium lg:text-4xl lg:text-left"> class="text-xl text-center text-textTitle font-medium lg:text-4xl lg:text-left">
...@@ -163,7 +163,7 @@ ...@@ -163,7 +163,7 @@
v-for="(item, index) of financialControlList" v-for="(item, index) of financialControlList"
:key="index"> :key="index">
<div <div
class="flex justify-between w-full-70 mx-auto py-12 space-x-16 lg:py-28"> class="flex justify-between w-full-70 w-full-90 mx-auto py-12 space-x-16 lg:py-28">
<div> <div>
<div> <div>
<h2 <h2
...@@ -179,7 +179,7 @@ ...@@ -179,7 +179,7 @@
<ul <ul
class="list mt-6 w-full grid gap-x-28 grid-cols-1 gap-y-3 lg:mt-16 lg:grid-cols-2 lg:gap-y-16"> class="list mt-6 w-full grid gap-x-28 grid-cols-1 gap-y-3 lg:mt-16 lg:grid-cols-2 lg:gap-y-16">
<li <li
class="list-item" class="list-item ml-6 lg:ml-0"
v-for="(c, index1) of item.list" v-for="(c, index1) of item.list"
:key="index1"> :key="index1">
<p <p
...@@ -198,7 +198,7 @@ ...@@ -198,7 +198,7 @@
<div class="bg-colorBg"> <div class="bg-colorBg">
<div <div
data-aos="fade-up" data-aos="fade-up"
class="flex justify-between items-center w-full-70 mx-auto px-4 py-12 lg:py-28 lg:px-0"> class="flex justify-between items-center w-full-70 w-full-90 mx-auto px-4 py-12 lg:py-28 lg:px-0">
<div class="lx-list"> <div class="lx-list">
<header <header
class="text-xl text-center text-textTitle font-medium lg:text-4xl lg:text-left"> class="text-xl text-center text-textTitle font-medium lg:text-4xl lg:text-left">
...@@ -251,7 +251,9 @@ ...@@ -251,7 +251,9 @@
<div class="footer-bg"> <div class="footer-bg">
<div class="footer-banner"> <div class="footer-banner">
<div class="footer-title">选择九猫ERP，实现跨境电商业务高效增长</div> <div class="footer-title">选择九猫ERP，实现跨境电商业务高效增长</div>
<div class="footer-description">九猫ERP，将为您提供全维的业务解决方案</div> <div class="footer-description">
九猫ERP，将为您提供全维的业务解决方案
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -518,50 +520,58 @@ export default { ...@@ -518,50 +520,58 @@ export default {
box-shadow: 0 0 0 5px rgba(37, 84, 254, 0.1); box-shadow: 0 0 0 5px rgba(37, 84, 254, 0.1);
} }
} }
.footer-bg {
background: linear-gradient(180deg, #2554fe, #3572ff);
}
.footer-banner { .footer-banner {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 2.5rem 15px; padding: 80px 15px;
background-image: url(https://static.distributetop.com/office-site-new/office-site-upload/img/history-card-sm-bg.cbfbf77.png); background-image: url(../../assets/images/home/06.png);
background-position-y: bottom; background-position-y: bottom;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 5.375rem; background-size: 100% 90px;
} .footer-title {
.footer-banner .footer-title { font-weight: 500;
font-weight: 500; font-size: 36px;
font-size: 1.25rem; margin-bottom: 20px;
margin-bottom: 1.25rem; max-width: 70vw;
text-align: center; text-align: center;
--tw-text-opacity: 1; color: rgba(255, 255, 255, 1);
color: rgba(255, 255, 255, var(--tw-text-opacity)); letter-spacing: 2px;
letter-spacing: 2px;
}
.footer-banner .footer-description {
line-height: 1.75rem;
display: none;
font-weight: 300;
font-size: 1.125rem;
margin-top: 0.5rem;
margin-bottom: 2.5rem;
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
@media (min-width: 1024px) {
.footer-banner {
padding: 5rem 0;
background-image: url(https://static.distributetop.com/office-site-new/office-site-upload/img/app-promotion-bg.252059a.png);
background-size: cover;
} }
.footer-banner .footer-title { .footer-description {
font-size: 2.25rem; font-weight: 300;
line-height: 3.125rem; font-size: 18px;
margin-bottom: 0; margin-top: 8px;
margin-bottom: 40px;
color: rgba(255, 255, 255, 1);
} }
.footer-banner .footer-description { }
display: block; @media (max-width: 1100px) {
.footer-banner {
padding: 40px 10px;
.footer-title {
font-size: 18px;
margin-bottom: 10px;
max-width: 90vw;
text-align: center;
color: rgba(255, 255, 255, 1);
}
.footer-description {
font-weight: 300;
font-size: 12px;
margin-top: 8px;
margin-bottom: 20px;
color: rgba(255, 255, 255, 1);
}
} }
}
@media (min-width: 1024px) {
.topics-bg { .topics-bg {
height: 475px; height: 475px;
padding: 7.5rem 0; padding: 7.5rem 0;
......
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