Skip to content

O
offical_web
Commit 139be2d9 by qinjianhui
Options

feat: 底部页面完成

parent 8a045054
Showing with 395 additions and 126 deletions
src/components/footer.vue
<template>
<footer class="banner_footer">
<div class="bottom-text">
<span style="margin-left: 20px">
<i class="el-icon-message" style="margin-right: 5px"></i>
<a href="mailto:mia@jomalls.com">mia@jomalls.com</a>
</span>
<span style="margin-left: 50px">
<a href="/after-sales-agreement" target="_blank">售后协议</a>
</span>
<span style="margin-left: 50px">
<i class="el-icon-map-location" style="margin-right: 5px"></i>
广州市南沙区丰泽东路106号
</span>
<span class="record-number">
<a href="https://beian.miit.gov.cn" target="_black">
粤ICP备2022141405号-1
</a>
</span>
<div
class="footer-container flex justify-between text-white w-full-70 w-full-90 mx-auto py-12 px-6 lg:py-20 lg:px-0">
<div class="footer-content-left">
<div class="mr-48 hidden lg:block">
<div class="jomalls text-3xl font-bold tracking-wider font-mono">
<span>JOMALLS九猫</span>
</div>
<div class="flex mt-12 gap-2">
<div class="flex flex-col items-center mr-35px">
<div class="rounded-sm bg-white overflow-hidden">
<div class="w-32 h-32 border">二维码</div>
</div>
<p class="mt-3 font-light text-xs text-white text-opacity-65">
扫码获取专业服务
</p>
</div>
<div class="flex flex-col items-center">
<div class="rounded-sm bg-white overflow-hidden">
<div class="w-32 h-32 border">二维码</div>
</div>
<p class="mt-3 font-light text-xs text-white text-opacity-65">
扫码了解九猫最新动态
</p>
</div>
</div>
<div class="mt-8 flex items-center">
<div class="mr-6">
<p class="font-light text-sm text-white text-opacity-65">
售前咨询电话
</p>
<p class="text-2xl font-medium">xxxxx</p>
</div>
<div class="ml-6">
<p class="font-light text-sm text-white text-opacity-65">
售后咨询电话
</p>
<p class="text-2xl font-medium">xxxxx</p>
</div>
</div>
<div class="mt-5">
<p class="font-light text-sm text-white text-opacity-65">邮箱</p>
<a class="text-2xl font-medium" href="mailto:mia@jomalls.com">
mia@jomalls.com
</a>
</div>
</div>
</div>
<div class="footer-content-right flex flex-1 flex-col">
<div
class="flex flex-col lg:flex-row lg:justify-between lg:mb-20 mb-7.5">
<div class="border-b border-gray-700 border-solid lg:border-b-0">
<div
class="flex justify-between items-center font-medium text-base leading-10 lg:text-lg lg:leading-normal">
产品
<span
class="flex justify-center items-center w-5 h-5"
@click="isShowProduct = !isShowProduct"
v-show="$isMobile">
<i
:class="
isShowProduct ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
"
class="transition-all"></i>
</span>
</div>
<ul
class="footer-routers bg-textPrimary rounded mt-0 mb-2 space-y-5 py-5 px-4 lg:bg-transparent lg:space-y-3 lg:py-0 lg:px-0 lg:mb-0 lg:mt-7"
v-show="isShowProduct || !$isMobile">
<li>
<a
href="/product/production"
class="font-normal text-gray-400 inline-block w-full h-full text-sm text-white/65 hover:underline hover:text-white"
blank="true">
生产管理
</a>
</li>
<li>
<a
href="/product/custom"
class="font-normal text-gray-400 inline-block w-full h-full text-sm text-white/65 hover:underline hover:text-white"
blank="true">
一件定制
</a>
</li>
<li>
<a
href="/product/logistics"
class="font-normal text-gray-400 inline-block w-full h-full text-sm text-white/65 hover:underline hover:text-white"
blank="true">
海外仓物流
</a>
</li>
<li>
<a
href="/product/platform"
class="font-normal text-gray-400 inline-block w-full h-full text-sm text-white/65 hover:underline hover:text-white"
blank="true">
自建站平台
</a>
</li>
</ul>
</div>
<div class="border-b border-gray-700 border-solid lg:border-b-0">
<div
class="flex justify-between items-center font-medium text-base leading-10 lg:text-lg lg:leading-normal">
资源
<span
class="flex justify-center items-center w-5 h-5"
@click="isShowResource = !isShowResource"
v-show="$isMobile">
<i
:class="
isShowResource ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
"
class="transition-all"></i>
</span>
</div>
<ul
v-show="isShowResource || !$isMobile"
class="bg-textPrimary rounded mt-0 mb-2 space-y-5 py-[18px] px-4 lg:bg-transparent lg:space-y-3 lg:py-0 lg:px-0 lg:mb-0 lg:mt-7">
<li>
<a
href=""
class="font-normal text-gray-400 inline-block w-full h-full text-sm text-white/65 hover:underline hover:text-white"
blank="true">
活动信息
</a>
</li>
<li>
<a
href=""
class="font-normal text-gray-400 inline-block w-full h-full text-sm text-white/65 hover:underline hover:text-white"
blank="true">
入住平台流程
</a>
</li>
<li>
<a
href=""
class="font-normal text-gray-400 inline-block w-full h-full text-sm text-white/65 hover:underline hover:text-white"
blank="true">
咨讯
</a>
</li>
</ul>
</div>
<span style="margin-left: 50px">
九猫科技 Copyright © {{ currentYear }}
</span>
<div class="border-b border-gray-700 border-solid lg:border-b-0">
<div
class="flex justify-between items-center font-medium text-base leading-10 lg:text-lg lg:leading-normal">
案例
<span
class="flex justify-center items-center w-5 h-5"
@click="isShowCase = !isShowCase"
v-show="$isMobile">
<i
:class="
isShowCase ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
"
class="transition-all"></i>
</span>
</div>
<ul
v-show="isShowCase || !$isMobile"
class="bg-textPrimary text-gray-400 rounded mt-0 mb-2 space-y-5 py-[18px] px-4 lg:bg-transparent lg:space-y-3 lg:py-0 lg:px-0 lg:mb-0 lg:mt-7">
<li>
<a
href="/case"
class="font-normal inline-block w-full h-full text-sm text-white/65 hover:underline hover:text-white"
blank="true">
案例中心
</a>
</li>
</ul>
</div>
<div class="border-b border-gray-700 border-solid lg:border-b-0">
<div
class="flex justify-between items-center font-medium text-base leading-10 lg:text-lg lg:leading-normal">
关于
<span
class="flex justify-center items-center w-5 h-5"
@click="isShowAbout = !isShowAbout"
v-show="$isMobile">
<i
:class="
isShowAbout ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
"></i>
</span>
</div>
<ul
v-show="isShowAbout || !$isMobile"
class="bg-textPrimary rounded mt-0 mb-2 space-y-5 py-[18px] px-4 lg:bg-transparent lg:space-y-3 lg:py-0 lg:px-0 lg:mb-0 lg:mt-7">
<li>
<a
href="/join"
target="_blank"
rel="noopener nofollow noreferrer"
static="true"
class="font-normal text-gray-400 inline-block w-full h-full text-sm text-white/65 hover:underline hover:text-white">
加入我们
</a>
</li>
<li>
<a
href="/about"
target="_blank"
rel="noopener nofollow noreferrer"
static="true"
class="font-normal text-gray-400 inline-block w-full h-full text-sm text-white/65 hover:underline hover:text-white">
关于九猫
</a>
</li>
</ul>
</div>
</div>
<div
class="overflow-hidden col-span-full border-t-0 lg:border-t lg:border-solid lg:divide-gray-700">
<ul
class="flex flex-wrap justify-end -mr-3 lg:pt-8 hidden lg:flex"></ul>
<div
class="text-xs text-center lg:text-right lg:mt-4 text-white text-opacity-45 font-light mt-4">
<span class="flex justify-center items-center md:justify-end">
<img
src="https://static.distributetop.com/office-site-new/office-site-upload/img/gongan.0c57706.png"
class="w-5 h-5 mr-1" />
<a
href="https://beian.miit.gov.cn"
target="_blank"
rel="noopener nofollow noreferrer"
static="true"
class="text-xs text-gray-400 text-white text-opacity-45 font-light">
粤ICP备2022141405号-1
</a>
</span>
</div>
<div
class="text-xs text-gray-400 text-center mt-4 lg:text-right text-white text-opacity-45 font-light">
地址：广州市南沙区丰泽东路106号
</div>
</div>
</div>
</div>
</footer>
</template>
......@@ -29,53 +250,25 @@ export default {
name: 'PageFooter',
data() {
return {
currentYear: new Date().getFullYear(),
isShowProduct: false,
isShowResource: false,
isShowCase: false,
isShowAbout: false,
}
},
}
</script>
<style scoped lang="scss">
.banner_footer {
color: #fff;
background-color: #20222e;
padding: 0 100px;
}
.record-number {
text-align: center;
margin-left: 50px;
}
.record-number a {
text-decoration: none;
color: #fff;
background: #20222e;
padding-bottom: 48px;
}
.bottom-text {
padding: 20px 0;
text-align: center;
}
.bottom-text span {
display: inline-block;
.footer-routers {
transition: all 0.5s ease;
}
.bottom-text a {
color: #fff;
text-decoration: none;
}
@media screen and (max-width: 1100px) {
.banner_footer {
padding: 20px;
.bottom-text {
padding: 0;
}
.bottom-text > span {
display: block;
margin-left: 0 !important;
line-height: 26px;
}
padding-bottom: 0;
}
}
</style>
src/components/headerNavMobile.vue
......@@ -55,13 +55,39 @@
<div
class="header-nav-mobile-child-item"
v-for="(c, index) in r.children"
:class="{ active: isRouteActive(c) }"
:key="index">
<router-link
v-if="!c.children"
class="header-nav-mobile-link"
:to="c.path"
@click.native="toggleShow(c)">
{{ c.name }}
</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>
</li>
......@@ -111,20 +137,42 @@ export default {
expanding: false,
children: [
{
name: '活动信息',
path: '',
name: '资源',
expanding: false,
children: [
{
name: '活动信息',
path: '',
},
{
name: '入住流程平台',
path: '',
},
{
name: '资讯',
path: '',
},
],
},
{
name: '入住流程平台',
path: '',
name: '支持',
expanding: false,
children: [
{
name: '帮助中心',
path: '',
},
],
},
{
name: '资讯',
path: '',
},
{
name: '帮助中心',
path: '',
name: '了解SaaS ERP',
expanding: false,
children: [
{
name: '如何通过财务管控向内部要效益',
path: '/financial',
},
],
},
],
},
......@@ -278,6 +326,11 @@ export default {
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-link {
......@@ -291,7 +344,19 @@ export default {
.header-nav-mobile-child {
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 {
......@@ -299,7 +364,7 @@ export default {
padding: 0;
}
.header-nav-mobile-link {
.header-nav-mobile-item > .header-nav-mobile-link {
display: block;
width: 100%;
height: 100%;
......
src/views/product/productionCustom.vue
......@@ -32,17 +32,17 @@
</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="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
class="font-medium text-xl lg:text-3xl"
style="text-align: center">
按需打印商品销售全球
</h3>
<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库存
</div>
</div>
......@@ -194,7 +194,8 @@
v-for="(item, index) in reasonList"
:key="index">
<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 }}
</div>
<div
......
src/views/product/productionLogistics.vue
......@@ -28,7 +28,7 @@
</h3>
<div
class="text-sm px-8 lg:text-lg lg:px-0 font-light text-textContent lg:mb-4 lg:mb-8">
领星旗下产品，助海外仓全面实现数字化
九猫旗下产品，助海外仓全面实现数字化
</div>
</div>
</div>
......@@ -49,7 +49,7 @@
SKU+箱多维度库存记录，助您精确管理库存
</p>
<p class="text-textPrimary mb-2.5 font-light text-sm">
深度对接领星ERP，辐射50万+优质客户群
深度对接九猫ERP，辐射50万+优质客户群
</p>
</div>
</div>
......
src/views/support/financialPage.vue
......@@ -2,7 +2,7 @@
<div class="financial-page">
<div class="bg-colorBg module-show">
<div class="topics-bg">
<div class="w-full-70 mx-auto">
<div class="w-full-70 w-full-90 mx-auto">
<h2
class="font-medium text-2xl text-textTitle lg:text-5xl text-center">
如何通过财务管控向内部要效益？
......@@ -12,7 +12,7 @@
</div>
<div class="bg-white module-show">
<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>
<h2
......@@ -20,13 +20,13 @@
跨境电商财务管理难题
</h2>
<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>
</div>
<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">
<li class="list-item">
<li class="list-item ml-6 lg:ml-0">
<p
class="link-item text-sm text-textTitle font-medium lg:text-lg">
“如何将有限的收入花到实处，现有费用主要花到哪里了？”
......@@ -34,7 +34,7 @@
<p
class="link-item mt-0.5 text-sm font-light text-textContent lg:text-base"></p>
</li>
<li class="list-item">
<li class="list-item ml-6 lg:ml-0">
<p
class="link-item text-sm text-textTitle font-medium lg:text-lg">
“如何发现所有可能性的隐形费用，精准核算成本与利润？”
......@@ -42,7 +42,7 @@
<p
class="link-item mt-0.5 text-sm font-light text-textContent lg:text-base"></p>
</li>
<li class="list-item">
<li class="list-item ml-6 lg:ml-0">
<p
class="link-item text-sm text-textTitle font-medium lg:text-lg">
“多久看一次报表，主要看哪些报表，关注哪些维度？”
......@@ -50,7 +50,7 @@
<p
class="link-item mt-0.5 text-sm font-light text-textContent lg:text-base"></p>
</li>
<li class="list-item">
<li class="list-item ml-6 lg:ml-0">
<p
class="link-item text-sm text-textTitle font-medium lg:text-lg">
“售出的订单是否都回款了？业务现金流健康吗？”
......@@ -64,7 +64,7 @@
</div>
<div class="bg-colorBg">
<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>
<h2
......@@ -72,13 +72,13 @@
为什么跨境老板需要财务管控？
</h2>
<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>
</div>
<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">
<li class="list-item">
<li class="list-item ml-6 lg:ml-0">
<p
class="link-item text-sm text-textTitle font-medium lg:text-lg">
以财务监管发现公司的运营情况
......@@ -88,7 +88,7 @@
透过财务的利润数据、人员绩效等数据，跨境老板能够发现公司整体的运营情况是否健康及正向发展。
</p>
</li>
<li class="list-item">
<li class="list-item ml-6 lg:ml-0">
<p
class="link-item text-sm text-textTitle font-medium lg:text-lg">
控制资金流向，确保正常运转
......@@ -98,7 +98,7 @@
通过财务管控，跨境老板能够发现公司的核心支出与收入等资金流情况、资金或是增长或是下降的趋势，根据实际调整决策。
</p>
</li>
<li class="list-item">
<li class="list-item ml-6 lg:ml-0">
<p
class="link-item text-sm text-textTitle font-medium lg:text-lg">
预判与管控风险，调整方向
......@@ -114,7 +114,7 @@
</div>
<div class="bg-white">
<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">
<header
class="text-xl text-center text-textTitle font-medium lg:text-4xl lg:text-left">
......@@ -163,7 +163,7 @@
v-for="(item, index) of financialControlList"
:key="index">
<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>
<h2
......@@ -179,7 +179,7 @@
<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">
<li
class="list-item"
class="list-item ml-6 lg:ml-0"
v-for="(c, index1) of item.list"
:key="index1">
<p
......@@ -198,7 +198,7 @@
<div class="bg-colorBg">
<div
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">
<header
class="text-xl text-center text-textTitle font-medium lg:text-4xl lg:text-left">
......@@ -251,7 +251,9 @@
<div class="footer-bg">
<div class="footer-banner">
<div class="footer-title">选择九猫ERP，实现跨境电商业务高效增长</div>
<div class="footer-description">九猫ERP，将为您提供全维的业务解决方案</div>
<div class="footer-description">
九猫ERP，将为您提供全维的业务解决方案
</div>
</div>
</div>
</div>
......@@ -518,50 +520,58 @@ export default {
box-shadow: 0 0 0 5px rgba(37, 84, 254, 0.1);
}
}
.footer-bg {
background: linear-gradient(180deg, #2554fe, #3572ff);
}
.footer-banner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2.5rem 15px;
background-image: url(https://static.distributetop.com/office-site-new/office-site-upload/img/history-card-sm-bg.cbfbf77.png);
padding: 80px 15px;
background-image: url(../../assets/images/home/06.png);
background-position-y: bottom;
background-repeat: no-repeat;
background-size: 100% 5.375rem;
}
.footer-banner .footer-title {
font-weight: 500;
font-size: 1.25rem;
margin-bottom: 1.25rem;
text-align: center;
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
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;
background-size: 100% 90px;
.footer-title {
font-weight: 500;
font-size: 36px;
margin-bottom: 20px;
max-width: 70vw;
text-align: center;
color: rgba(255, 255, 255, 1);
letter-spacing: 2px;
}
.footer-banner .footer-title {
font-size: 2.25rem;
line-height: 3.125rem;
margin-bottom: 0;
.footer-description {
font-weight: 300;
font-size: 18px;
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 {
height: 475px;
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