Skip to content

O
offical_web
Commit 8a045054 by qinjianhui
Options

feat: 移动端适配完成

parent 90959994
Showing with 624 additions and 261 deletions
src/assets/css/common.css
......@@ -1046,11 +1046,31 @@ ul li {
width: 70vw;
}
.w-full-90 {
width: 90vw;
}
@media screen and (max-width: 1100px) {
.w-full-90 {
width: 90vw;
}
}
@media screen and (min-width: 1204px) {
.w-full-70 {
width: 70vw;
}
}
.text-textContent {
--tw-text-opacity: 1;
color: rgba(92, 94, 102, var(--tw-text-opacity));
}
.text-textPrimary {
--tw-text-opacity: 1;
color: rgba(58, 64, 87, var(--tw-text-opacity));
}
.high-light {
--tw-text-opacity: 1;
color: rgba(37, 84, 254, var(--tw-text-opacity));
......
src/components/head.vue
......@@ -2,7 +2,6 @@
<div class="header" :class="{ 'no-shadow': !shadow }" ref="header">
<headerNavMobile
v-if="$isMobile"
:nav="navbar"
:userInfo="userInfo"></headerNavMobile>
<div class="container" v-else>
<div class="logo">
......@@ -191,6 +190,7 @@ export default {
{
name: '产品',
path: '/product/production',
expanding: false,
children: [
{
name: '生产管理',
......@@ -226,6 +226,7 @@ export default {
{
name: '资源与支持',
path: '/support',
expanding: false,
children: [
{
name: '活动信息',
......@@ -250,6 +251,7 @@ export default {
{
name: '关于',
path: '/about',
expanding: false,
children: [
{
name: '关于我们',
......
src/components/headerNavMobile.vue
......@@ -15,17 +15,21 @@
<span class="user-name">{{ userInfo.companyName }}</span>
<span style="margin: 0 10px">欢迎您</span>
<span style="margin: 0 5px">|</span>
<span style="margin-left: 10px;cursor: pointer;" @click="logout">
<span style="margin-left: 10px; cursor: pointer" @click="logout">
<img
style="width: 16px; height: 16px; vertical-align: middle"
src="../assets/images/logout.png" />
</span>
</div>
<transition name="header-nav-mobile">
<div v-show="showing" class="header-nav-mobile-overlay">
<div
v-show="showing"
class="header-nav-mobile-overlay"
@click="toggleShow">
class="header-nav-mobile-header flex items-center justify-between p-2.5">
<img src="../assets/logo.png" class="w-32" height="40px" />
<i
class="el-icon-close text-xl font-bold cursor-pointer"
@click="toggleShow"></i>
</div>
<ul class="header-nav-mobile-items" @click.stop>
<li
v-for="(r, i) in nav"
......@@ -33,11 +37,33 @@
class="header-nav-mobile-item"
:class="{ active: isRouteActive(r) }">
<router-link
class="header-nav-mobile-link"
v-if="!r.children"
class="header-nav-mobile-link flex items-center justify-between"
:to="r.path"
@click.native="toggleShow">
@click.native="toggleShow(r)">
{{ r.name }}
</router-link>
<div
v-else
class="header-nav-mobile-link flex items-center justify-between">
<span>{{ r.name }}</span>
<i
:class="r.expanding ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
@click.stop="toggleExpand(r)"></i>
</div>
<div v-if="r.expanding" class="header-nav-mobile-child">
<div
class="header-nav-mobile-child-item"
v-for="(c, index) in r.children"
:key="index">
<router-link
class="header-nav-mobile-link"
:to="c.path"
@click.native="toggleShow(c)">
{{ c.name }}
</router-link>
</div>
</div>
</li>
</ul>
</div>
......@@ -51,23 +77,90 @@ export default {
data() {
return {
showing: false,
nav: [
{ name: '首页', path: '/home' },
{
name: '产品',
path: '/product/production',
expanding: false,
children: [
{
name: '生产管理',
path: '/product/production',
},
{
name: '一件定制',
path: '/product/custom',
},
{
name: '海外仓物流',
path: '/product/logistics',
},
{
name: '自建站平台',
path: '/product/platform',
},
],
},
{ name: '价格', path: '/price' },
{ name: '一件定制', path: 'https://jomalls.com/custom/' },
{ name: '案例', path: '/case' },
{
name: '资源与支持',
path: '/support',
expanding: false,
children: [
{
name: '活动信息',
path: '',
},
{
name: '入住流程平台',
path: '',
},
{
name: '资讯',
path: '',
},
{
name: '帮助中心',
path: '',
},
],
},
{
name: '关于',
path: '/about',
expanding: false,
children: [
{
name: '关于我们',
path: '/about',
},
{
name: '加入我们',
path: '/join',
},
],
},
],
}
},
props: {
nav: {
type: Array,
},
userInfo: {
type: Object,
},
},
computed: {
},
computed: {},
methods: {
...mapMutations(['setUserInfo']),
toggleShow() {
toggleShow(r) {
if (r && r.children) return
this.showing = !this.showing
},
toggleExpand(r) {
this.$set(r, 'expanding', !r.expanding)
},
isRouteActive(nav) {
const path = this.$route.path
if (nav.path === path) return true
......@@ -89,9 +182,9 @@ export default {
<style scoped lang="scss">
.header-nav-mobile {
height: 50px;
background-color: #2f3032;
// background-color: #2f3032;
display: flex;
color: #fff;
// color: #fff;
align-items: center;
padding: 0 10px;
}
......@@ -139,7 +232,7 @@ export default {
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAcCAYAAAATFf3WAAAAyklEQVRYR+2WMQ6BQRCFvzmHgkaidgI3UEjcQUSBygV0NOIQhIQTcAK1kpM8GcV/gbHJSHb62fn2vZ2ZNUltYAN0yBUvYGmSTsAoF1tDc/4LwNwWJ7W2wbIKGFSgKhgUkKrgTxSU1M+46szs4ZtkDmyjNy2Uv3DAGzAoVCB67N0BJ8Ae0jWMgOm3iyX1AN/JmeJtZs86ZqKWVAWrglEFovn536CkLrDLOAeBmW+SCzCMWlEo/+qAB2BcqED02KMDtoB1xu8WsErfJB+rXD/DrYeGMwAAAABJRU5ErkJggg==);
background-image: url(../assets/mobile.png);
}
.header-nav-mobile-enter-active,
......@@ -159,15 +252,20 @@ export default {
width: 100vw;
height: 100vh;
z-index: 99999;
background-color: #fff;
display: flex;
flex-direction: column;
}
.header-nav-mobile-items {
box-sizing: border-box;
width: 260px;
width: 100%;
height: 100%;
background-color: #000;
// background-color: #fff;
margin: 0;
padding: 30px 20px;
padding: 20px 20px;
flex: 1;
overflow-y: auto;
}
.header-nav-mobile-item,
......@@ -184,23 +282,11 @@ export default {
.header-nav-mobile-item.active {
.header-nav-mobile-link {
position: relative;
&::after {
position: absolute;
top: 100%;
left: 0;
content: '';
display: block;
width: 80px;
height: 2px;
background-color: var(--primary-color);
}
}
}
.header-nav-mobile-item {
font-size: 16px;
color: #fff;
}
.header-nav-mobile-child {
......@@ -220,7 +306,7 @@ export default {
color: inherit;
text-decoration: none;
cursor: pointer;
border-bottom: solid 1px #2c2c2c;
border-bottom: solid 1px var(--border-color);
}
.header-nav-mobile-item > .header-nav-mobile-link {
......
src/components/product-intro.vue
......@@ -41,7 +41,9 @@
class="home-module-item flex justify-center"
v-for="(item, index) in moduleItems"
:key="index">
<div class="content flex w-full-70 gap-28 fade-up-animation">
<div
class="content flex w-full-70 gap-28 fade-up-animation"
v-if="!$isMobile">
<div class="img">
<img :src="item.img" />
</div>
......@@ -64,10 +66,32 @@
</div>
</div>
</div>
<div
v-else
class="mobile-module-content w-full-90 gap-28 fade-up-animation">
<div class="title">
<div class="main-title">{{ item.title }}</div>
<div class="sub-title">{{ item.subTitle }}</div>
</div>
<div class="img">
<img :src="item.img" />
</div>
<div class="desc">
<div
class="desc-item"
v-for="(t, index) in item.items"
:key="index">
<div class="desc-title">
<span class="desc-main-title">{{ t.title }}</span>
<span class="desc-sub-title">{{ t.subTitle }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section-reason w-full-70 fade-up-animation">
<div class="section-reason fade-up-animation pt-10 lg:pt-0">
<div class="section-reason-title">
<div class="flex justify-center flex-col items-center">
<h3 class="text-textContent lx-title mb-8" style="text-align: center">
......@@ -78,7 +102,8 @@
</div>
</div>
</div>
<div class="reason-list flex justify-between">
<div
class="reason-list flex justify-between flex-col mt-6 gap-5 lg:gap-0 lg:mt-10 lg:flex-row">
<div class="section-reason-item">
<div class="season-top flex flex-col items-center">
<svg
......@@ -586,7 +611,54 @@ export default {
}
}
}
.mobile-module-content {
.title {
display: flex;
flex-direction: column;
margin-bottom: 26px;
.main-title {
font-size: 26px;
margin-bottom: 8px;
}
.sub-title {
font-size: 14px;
color: #666;
}
}
.desc {
padding-left: 24px;
.desc-item {
position: relative;
&::before {
background-color: #2554fe;
border-radius: 50%;
position: absolute;
left: -23px;
top: 10px;
content: '';
width: 6px;
height: 6px;
box-shadow: 0 0 0 5px rgba(37, 84, 254, 0.1);
}
&:not(:last-child) {
margin-bottom: 10px;
}
.desc-title {
display: flex;
flex-direction: column;
gap: 6px;
.desc-main-title {
color: #000;
font-size: 16px;
}
.desc-sub-title {
font-size: 14px;
color: #606266;
}
}
}
}
}
.product-intro::v-deep {
.fade-up-animation {
transition: all 0.3s ease;
......@@ -600,6 +672,7 @@ export default {
}
}
.section-reason {
width: 70vw;
margin: 0 auto;
}
.section-reason-item {
......@@ -653,7 +726,6 @@ export default {
color: rgba(58, 64, 87, 1);
}
.reason-list {
margin-top: 80px;
}
.lx-title {
font-size: 2.25rem;
......@@ -678,7 +750,6 @@ export default {
.function_bg {
width: 90vw;
}
.product-pros {
flex-direction: column;
}
......@@ -732,5 +803,8 @@ export default {
width: 100%;
}
}
.section-reason {
width: 90vw;
}
}
</style>
src/components/productDesc.vue
......@@ -5,7 +5,9 @@
v-for="(item, index) in moduleItems"
:data-id="item.id"
:key="index">
<div class="content mx-auto flex w-full-70 gap-28 fade-up-animation gap-20">
<div
v-if="!$isMobile"
class="content mx-auto flex w-full-70 gap-28 fade-up-animation">
<div class="img">
<img :src="item.img" />
</div>
......@@ -28,6 +30,25 @@
</div>
</div>
</div>
<div
v-else
class="mobile-module-content w-full-90 mx-auto gap-28 fade-up-animation">
<div class="title">
<div class="main-title">{{ item.title }}</div>
<div class="sub-title">{{ item.subTitle }}</div>
</div>
<div class="img">
<img :src="item.img" />
</div>
<div class="desc">
<div class="desc-item" v-for="(t, index) in item.items" :key="index">
<div class="desc-title">
<span class="desc-main-title">{{ t.title }}</span>
<span class="desc-sub-title">{{ t.subTitle }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
......@@ -221,12 +242,60 @@ export default {
transform: translateY(0);
}
}
.mobile-module-content {
.title {
display: flex;
flex-direction: column;
margin-bottom: 26px;
.main-title {
font-size: 26px;
margin-bottom: 8px;
}
.sub-title {
font-size: 14px;
color: #666;
}
}
.desc {
padding-left: 24px;
.desc-item {
position: relative;
&::before {
background-color: #2554fe;
border-radius: 50%;
position: absolute;
left: -23px;
top: 10px;
content: '';
width: 6px;
height: 6px;
box-shadow: 0 0 0 5px rgba(37, 84, 254, 0.1);
}
&:not(:last-child) {
margin-bottom: 10px;
}
.desc-title {
display: flex;
flex-direction: column;
gap: 6px;
.desc-main-title {
color: #000;
font-size: 16px;
}
.desc-sub-title {
font-size: 14px;
color: #606266;
}
}
}
}
}
@media screen and (max-width: 1100px) {
.home-module-container {
margin-top: 20px;
}
.home-module-item {
padding: 10px 0;
padding: 60px 0 30px;
.content {
width: 90vw;
display: block;
......
src/components/productLogisticsDesc.vue
<template>
<div class="product-logistics-desc py-16">
<div class="card flex gap-10 h-96 justify-between w-full-70 mx-auto">
<div
class="product-logistics-desc py-8 lg:py-16"
:class="{ 'no-mobile': !$isMobile }">
<div
class="card flex flex-col lg:flex-row gap-10 lg:h-96 justify-between w-full-70 w-full-90 mx-auto">
<img :src="moduleItems.img" class="img" />
<div class="word">
<div
......@@ -33,7 +36,7 @@ export default {
}
</script>
<style lang="scss" scoped>
.product-logistics-desc:nth-child(even) .card {
.product-logistics-desc.no-mobile:nth-child(even) .card {
flex-direction: row-reverse;
}
.product-logistics-desc:nth-child(even) {
......
src/router/index.js
......@@ -44,11 +44,6 @@ const routes = [
component: demandPage,
},
{
path: '/about_us',
name: 'aboutUs',
component: aboutPage,
},
{
path: '/help',
name: 'help',
component: helpPage,
......@@ -83,6 +78,11 @@ const routes = [
name: 'financial',
component: FinancialPage,
},
{
path: '/about',
name: 'about',
component: aboutPage,
},
],
},
{
......
src/styles/index.scss
:root {
--primary-color:#f19240;
--primary-color: #2253fd;
--border-color: #dfe7f9;
}
@tailwind base;
......
src/views/case/casePage.vue
<template>
<div class="case-page bg-colorBg">
<div class="lx-module-case-banner text-center">
<h3 class="case-banner-title">倾听企业故事，探寻出海方案最优解</h3>
<span class="text-lg">链接九猫ERP，共创您的品牌出海新高度</span>
<div class="lx-module-case-banner px-2.5 text-center py-12 lg:py-28">
<h3 class="case-banner-title text-2xl lg:text-4xl">
倾听企业故事，探寻出海方案最优解
</h3>
<span class="text-base lg:text-2xl">
链接九猫ERP，共创您的品牌出海新高度
</span>
</div>
<div class="case-swiper">
<div class="w-full-70 mx-auto bg-white pt-10 px-10 rounded-xl">
<div
class="w-full-70 w-full-90 mx-auto bg-white p-5 lg:pt-10 lg:px-10 rounded-xl">
<el-carousel
indicator-position="outside"
:autoplay="false"
......@@ -14,7 +19,8 @@
<el-carousel-item
v-for="(item, index) in swiperCaseList"
:key="index">
<div class="case-swiper-container h-full flex gap-10">
<div
class="case-swiper-container h-full flex flex-col flex-col-reverse lg:flex-row gap-10">
<div class="left-image flex-1">
<img :src="item.img" />
</div>
......@@ -34,10 +40,14 @@
</el-carousel>
</div>
</div>
<div class="cooperation-case py-20">
<div class="w-full-70 mx-auto">
<div class="cooperation-case-title">合作客户案例</div>
<div class="cooperation-case-list grid grid-cols-4 gap-10 mt-10">
<div class="cooperation-case py-10 lg:py-20">
<div class="w-full-70 w-full-90 mx-auto">
<div
class="cooperation-case-title text-2xl font-medium lg:text-4xl text-center">
合作客户案例
</div>
<div
class="cooperation-case-list grid grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-10 mt-10">
<div
class="case-item-card bg-white"
v-for="(item, index) in caseList"
......@@ -45,7 +55,7 @@
<div class="image">
<img :src="item.img" />
</div>
<div class="content p-6">
<div class="content p-2 lg:p-6">
<div class="logo">
<img :src="item.companyLogo" />
</div>
......@@ -63,8 +73,6 @@
<div class="footer-bg">
<div class="footer-banner">
<div class="footer-title">与众多优秀企业共同选择，实现业绩高效增长</div>
<!---->
</div>
</div>
</div>
......@@ -151,22 +159,16 @@ export default {
display: flex;
flex-direction: column;
justify-content: center;
height: 344px;
width: 100%;
.case-banner-title {
color: #1a2035;
font-weight: 500;
font-size: 44px;
line-height: 1;
line-height: 64px;
font-style: normal;
}
span {
color: #3a4057;
font-weight: 400;
font-size: 18px;
line-height: 1;
line-height: 28px;
margin-top: 8px;
text-align: center;
font-style: normal;
......@@ -177,11 +179,8 @@ export default {
}
.cooperation-case-title {
font-weight: 500;
font-size: 36px;
line-height: 1;
line-height: 54px;
font-style: normal;
width: 1280px;
color: #1a2035;
}
.case-item-card {
......@@ -204,49 +203,69 @@ export default {
color: #3a4057;
}
}
.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 {
background-size: 100% 90px;
.footer-title {
font-weight: 500;
font-size: 1.25rem;
margin-bottom: 1.25rem;
font-size: 36px;
margin-bottom: 20px;
max-width: 70vw;
text-align: center;
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
color: rgba(255, 255, 255, 1);
letter-spacing: 2px;
}
.footer-banner .footer-description {
line-height: 1.75rem;
display: none;
}
.footer-description {
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));
font-size: 18px;
margin-top: 8px;
margin-bottom: 40px;
color: rgba(255, 255, 255, 1);
}
}
@media (min-width: 1024px) {
@media (max-width: 1100px) {
.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;
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);
}
}
.case-item-card {
.image {
height: 120px;
width: 100%;
}
.logo {
width: 80px;
height: 36px;
}
.footer-banner .footer-title {
font-size: 2.25rem;
line-height: 3.125rem;
margin-bottom: 0;
.category-tag {
border-radius: 2px;
padding: 2px 6px;
}
.footer-banner .footer-description {
display: block;
}
}
</style>
src/views/homePage/index.vue
<template>
<div class="home-page">
<div class="banner-images">
<!-- 轮播图先注释 -->
<!-- <el-carousel
class="banner-images-inner"
:interval="5000"
arrow="always"
:height="$isMobile ? '40vw' : '33.333vw'">
<el-carousel-item v-for="(item, index) in bannerImages" :key="index">
<img
class="images"
:src="item.image"
style="width: 100vw; height: 100%; object-fit: cover" />
</el-carousel-item>
</el-carousel> -->
<div class="banner-container gap-20">
<div class="left-content">
<h3 class="left-content-title font-bold">
<div class="banner-images px-5 lg:px-0">
<div
class="banner-container flex-col items-center mt-8 mb-10 lg:flex-row lg:justify-between lg:items-center lg:mt-0 gap-4 lg:gap-20">
<div class="left-content mb-4 lg:mb-0">
<h3
class="left-content-title text-base lg:text-2xl lg:font-bold text-center lg:text-left">
在以亚马逊为主的跨境电商ERP中
</h3>
<h2 class="left-content-title-high-light font-bold">
<h2
class="left-content-title-high-light font-bold text-center lg:text-left">
九猫ERP市占率第一
</h2>
<p class="left-content-description">
<p class="left-content-description text-center lg:text-left">
<span class="high-light">60万+</span>
<span>跨境卖家的一致选择，支持</span>
<span class="high-light">20+</span>
......@@ -114,15 +104,10 @@ export default {
</script>
<style scoped>
.banner-images {
/* font-size: 48px; */
width: 70vw;
margin: 0 auto;
height: 30vw;
padding-top: 40px;
/* display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom, #0089ff 0%, #0089ff 20%, #e8eef9); */
}
/* .banner-images-inner {
......@@ -130,7 +115,7 @@ export default {
} */
.banner-container {
display: flex;
align-items: center;
/* align-items: center; */
height: 100%;
}
.left-content {
......@@ -150,7 +135,7 @@ export default {
}
}
.left-content-title {
font-size: 24px;
/* font-size: 24px; */
}
.left-content-title-high-light {
font-size: 40px;
......@@ -218,9 +203,44 @@ export default {
@media screen and (max-width: 1100px) {
.docking-platform {
padding: 0 20px 40px;
padding: 40px 20px 40px;
}
.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);
}
}
.banner-images {
width: 100%;
height: auto;
padding-top: unset;
}
.left-content-title-high-light {
font-size: 24px;
}
.left-content {
width: 100%;
gap: 6px;
}
.right-content {
width: 100%;
}
.left-content-description {
font-size: 12px;
}
.platforms {
grid-template-columns: repeat(3, 1fr);
}
......
src/views/price/pricePage.vue
<template>
<div class="price-page">
<div class="header-banner pt-28">
<div class="header-banner pt-12 lg:pt-28">
<div class="content-container flex flex-col items-center gap-2">
<h3 class="banner-title font-medium text-4xl">九猫ERP版本对比</h3>
<div
......@@ -32,18 +32,14 @@
</div>
</div>
</div>
<div class="lx-section py-12 bg-colorBg lg:px-0 lg:mt-28 lg:py-28">
<div
class="lx-section mt-12 py-12 bg-colorBg px-[15px] lg:px-0 lg:mt-28 lg:py-28">
<div
class="flex justify-between items-center flex-col-reverse lg:flex-row mx-auto w-full-70">
class="flex justify-between items-center flex-col-reverse lg:flex-row mx-auto w-full-70 w-full-90">
<div class="lx-l-section lg:w-2/4">
<h3
class="hidden lg:block text-4xl text-textTitle font-medium tracking-1px">
获得 600000+ 客户的认可
</h3>
<div class="grid gap-x-5 lg:mt-16 lg:block lg:gap-x-0 grid-cols-3">
<div
class="flex justify-center flex-col lg:items-start items-center mt-12">
class="grid gap-x-5 lg:mt-16 lg:block lg:gap-x-0 grid-cols-2 lg:grid-cols-3">
<div
class="flex lg:justify-center flex-col lg:items-start items-center mt-12">
<h3 class="lx-title">
60
<span class="highlight-text">天</span>
......@@ -54,7 +50,7 @@
</div>
</div>
<div
class="flex justify-center flex-col lg:items-start items-center mt-12">
class="flex lg:justify-center flex-col lg:items-start items-center mt-12">
<h3 class="lx-title">一体化服务</h3>
<div
class="text-sm font-normal text-textContent mt-1 lg:text-left lg:text-base lg:mt-0 text-center">
......@@ -62,7 +58,7 @@
</div>
</div>
<div
class="flex justify-center flex-col lg:items-start items-center mt-12">
class="flex lg:justify-center flex-col lg:items-start items-center mt-12">
<h3 class="lx-title">
15
<span class="highlight-text">天</span>
......@@ -77,7 +73,7 @@
<div
class="lx-r-section flex flex-col justify-center items-center lg:w-2/4">
<h3
class="lg:hidden text-xl mb-13 text-textTitle font-medium tracking-1px text-center">
class="lg:hidden text-xl mb-6 lg:mb-12 text-textTitle font-medium tracking-1px text-center">
获得 600000+ 客户的认可
</h3>
<div class="w-full">
......@@ -89,18 +85,19 @@
</div>
</div>
</div>
<div class="lx-section my-12 lg:my-130px mx-auto max-w-7xl">
<div class="lx-section my-12 mx-auto w-full-70 w-full-90">
<div
class="flex justify-center flex-col items-center lx-large-title aos-init aos-animate"
data-aos="fade-up">
<h3
class="text-4xl font-medium tracking-wider w-full lx-title-no-description"
class="text-3xl lg:text-4xl font-medium tracking-wider w-full lx-title-no-description"
style="text-align: center">
常见问题
</h3>
</div>
<div>
<div class="grid grid-cols-2 gap-16 mt-16">
<div
class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-8 lg:gap-16 lg:mt-16">
<div class="lx-question-card">
<div class="mb-4 flex items-center" style="font-size: 0px">
<span
......@@ -165,7 +162,8 @@
</div>
</div>
</div>
<div class="other-questions mt-16 shadow-lg rounded-md px-8 py-8">
<div
class="other-questions mt-8 lg:mt-16 shadow-lg rounded-md p-2 lg:px-8 lg:py-8">
<el-collapse v-model="activeNames">
<el-collapse-item
v-for="(item, index) in collapses"
......@@ -769,56 +767,90 @@ export default {
top: 8px;
}
}
.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 {
background-size: 100% 90px;
.footer-title {
font-weight: 500;
font-size: 1.25rem;
margin-bottom: 1.25rem;
font-size: 36px;
margin-bottom: 20px;
max-width: 70vw;
text-align: center;
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
color: rgba(255, 255, 255, 1);
letter-spacing: 2px;
}
.footer-banner .footer-description {
line-height: 1.75rem;
display: none;
}
.footer-description {
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));
font-size: 18px;
margin-top: 8px;
margin-bottom: 40px;
color: rgba(255, 255, 255, 1);
}
}
@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 {
font-size: 2.25rem;
line-height: 3.125rem;
margin-bottom: 0;
}
.footer-banner .footer-description {
display: block;
}
.lx-title {
font-size: 2.25rem;
}
}
@media screen and (max-width: 1100px) {
.other-questions {
.title {
line-height: initial;
}
.cus-title {
line-height: initial;
}
&::v-deep {
.el-collapse {
border: none;
}
.el-collapse-item__header {
border: none;
flex-direction: row;
font-size: 14px;
}
.el-collapse-item__wrap {
border: none;
}
.el-collapse-item__wrap {
font-size: 14px;
}
}
}
.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);
}
}
.lx-question-card {
padding: 1.5rem;
}
.image {
height: 33vw !important;
}
......@@ -892,5 +924,4 @@ export default {
padding-bottom: 0;
}
}
</style>
src/views/product/productPlatform.vue
<template>
<div class="product-platform">
<div class="banner-container">
<div class="banner-container lg:p-0 pt-10 px-2.5">
<div
class="content-container flex items-center gap-20 w-full-70 mx-auto pt-10">
class="content-container flex flex-col lg:flex-row items-center gap-8 lg:gap-2">
<div class="left-content">
<h3 class="banner-title font-semibold text-4xl">
<h3
class="banner-title font-semibold text-2xl text-center lg:text-left lg:text-4xl">
多平台全球库存统一管理 订单自动履约
</h3>
<div
class="text-xs px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8">
<span>领星ERP集成</span>
class="text-sm px-8 lg:text-lg lg:px-0 font-light text-textContent lg:text-left text-center mb-8">
<span>九猫ERP集成</span>
<span class="high-light font-bold">20+</span>
<span>主流跨境电商平台，跨境业务一站式管理</span>
</div>
......@@ -29,18 +30,20 @@
<div class="all-platform-wrap py-12 lg:py-20">
<div class="cont-title">
<div class="flex justify-center flex-col items-center gap-2">
<h3 class="font-medium text-3xl" style="text-align: center">
<h3
class="font-medium text-2xl lg:text-3xl"
style="text-align: center">
支持20+主流跨境电商平台
</h3>
<div
class="text-xs px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8">
class="text-sm text-center lg:text-left px-8 lg:text-lg lg:px-0 font-light text-textContent mb-8">
统一集成管理多个平台的业务，全面提高运营管理效益
</div>
</div>
</div>
<div
class="platforms mt-4 grid grid-cols-9 gap-x-5 gap-y-8 w-full-70 mx-auto">
class="platforms mt-4 grid grid-cols-3 lg:grid-cols-9 gap-x-5 gap-y-8 w-full-70 w-full-90 mx-auto">
<div class="platform-item">
<img src="../../assets/logo1.jpg" />
</div>
......@@ -106,7 +109,7 @@
九猫解决方案
</h3>
<div
class="text-xs px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8">
class="text-sm text-center lg:text-left px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8">
打通多平台之间的数据壁垒，轻松管理货物、订单、利润等
</div>
</div>
......@@ -721,49 +724,62 @@ export default {
object-fit: scale-down;
}
}
.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 {
background-size: 100% 90px;
.footer-title {
font-weight: 500;
font-size: 1.25rem;
margin-bottom: 1.25rem;
font-size: 36px;
margin-bottom: 20px;
max-width: 70vw;
text-align: center;
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
color: rgba(255, 255, 255, 1);
letter-spacing: 2px;
}
.footer-banner .footer-description {
line-height: 1.75rem;
display: none;
}
.footer-description {
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));
font-size: 18px;
margin-top: 8px;
margin-bottom: 40px;
color: rgba(255, 255, 255, 1);
}
}
@media (min-width: 1024px) {
@media (max-width: 1100px) {
.left-content {
width: 100%;
gap: 8px;
}
.right-image {
width: 100%;
}
.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;
padding: 40px 10px;
.footer-title {
font-size: 18px;
margin-bottom: 10px;
max-width: 90vw;
text-align: center;
color: rgba(255, 255, 255, 1);
}
.footer-banner .footer-title {
font-size: 2.25rem;
line-height: 3.125rem;
margin-bottom: 0;
.footer-description {
font-weight: 300;
font-size: 12px;
margin-top: 8px;
margin-bottom: 20px;
color: rgba(255, 255, 255, 1);
}
.footer-banner .footer-description {
display: block;
}
}
</style>
src/views/product/productionLogistics.vue
<template>
<div class="product-logistics">
<div class="banner-container">
<div class="content-container flex items-center gap-20">
<div
class="content-container w-full-70 w-full-90 flex items-center flex-col lg:flex-row gap-8 lg:gap-20">
<div class="left-content">
<h3 class="banner-title font-semibold text-4xl">
<h3
class="banner-title font-semibold text-2xl lg:text-4xl text-center lg:text-lef">
海外仓管理， 用九猫WMS
</h3>
<div
class="text-xs px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8">
class="text-sm px-8 text-center lg:text-left lg:text-lg lg:px-0 font-light text-textContent mb-8">
<span>全面覆盖海外仓业务场景，无纸化智能化管理海外仓</span>
</div>
</div>
......@@ -17,20 +19,21 @@
</div>
</div>
</div>
<div class="product-logistics-cont py-28">
<div class="w-full-70 mx-auto">
<div class="product-logistics-cont py-14 lg:py-28">
<div class="w-full-70 w-full-90 mx-auto">
<div class="cont-title">
<div class="flex justify-center flex-col items-center gap-2">
<h3 class="font-medium text-3xl" style="text-align: center">
为什么选择九猫WMS
</h3>
<div
class="text-xs 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 lg:mb-4 lg:mb-8">
领星旗下产品，助海外仓全面实现数字化
</div>
</div>
</div>
<div class="reason-list flex justify-between py-10">
<div
class="reason-list flex flex-col lg:flex-row gap-5 lg:gap-0 justify-between py-5 lg:py-10">
<div class="section-reason-item">
<div class="season-top flex flex-col items-center">
<img src="../../assets/images/product/12.png" width="100" />
......@@ -38,7 +41,7 @@
<p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg">
贴合海外仓全业务场景
</p>
<div class="mt-6 flex flex-col items-center">
<div class="mt-6 flex flex-col lg:items-center">
<p class="text-textPrimary mb-2.5 font-light text-sm">
覆盖一件代发、备货中转、FBA退货、财务等场景
</p>
......@@ -63,7 +66,7 @@
<p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg">
SaaS软件，无需下载即可使用
</p>
<div class="mt-6 flex flex-col items-center">
<div class="mt-6 flex flex-col lg:items-center">
<p class="text-textPrimary mb-2.5 font-light text-sm">
对接多家ERP、电商平台、物流服务商，全链路轻松管理
</p>
......@@ -87,7 +90,7 @@
<p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg">
专业顾问全程服务，为您保驾护航
</p>
<div class="mt-6 flex flex-col items-center">
<div class="mt-6 flex flex-col lg:items-center">
<p class="text-textPrimary mb-2.5 font-light text-sm">
软件顾问、实施全周期跟踪式服务
</p>
......@@ -107,42 +110,44 @@
</div>
</div>
</div>
<div class="product-logistics-container mb-28 py-10">
<div class="product-logistics-container mb-14 lg:mb-28 py-10">
<div class="cont-title">
<div>
<h3 class="font-medium text-3xl" style="text-align: center">
<h3
class="font-medium text-2xl lg:text-3xl"
style="text-align: center">
九猫WMS，提供更高效的解决方案
</h3>
</div>
</div>
<div class="w-full-70 mx-auto">
<div class="navigate bg-white py-2 px-2 flex gap-2 mt-10">
<div class="w-full-70 w-full-90 mx-auto">
<div class="navigate bg-white py-2 px-2 flex gap-2 mt-5 lg:mt-10">
<div
class="navigate-item text flex-1 text-center"
class="navigate-item text text-xs lg:text-base flex-1 text-center"
:class="navigateKey === 'df' ? 'navigate-item-active' : ''"
@click="changeNavigate('df', 0)">
一件代发
</div>
<div
class="navigate-item text flex-1 text-center"
class="navigate-item text flex-1 text-xs lg:text-base text-center"
:class="navigateKey === 'bh' ? 'navigate-item-active' : ''"
@click="changeNavigate('bh', 1)">
备货中转
</div>
<div
class="navigate-item text flex-1 text-center"
class="navigate-item text flex-1 text-xs lg:text-base text-center"
:class="navigateKey === 'th' ? 'navigate-item-active' : ''"
@click="changeNavigate('th', 2)">
退货管理
</div>
<div
class="navigate-item text flex-1 text-center"
class="navigate-item text flex-1 text-xs lg:text-base text-center"
:class="navigateKey === 'cw' ? 'navigate-item-active' : ''"
@click="changeNavigate('cw', 3)">
财务管理
</div>
<div
class="navigate-item text flex-1 text-center"
class="navigate-item text flex-1 text-xs lg:text-base text-center"
:class="navigateKey === 'pda' ? 'navigate-item-active' : ''"
@click="changeNavigate('pda', 4)">
PDA
......@@ -166,7 +171,7 @@
</div>
</div>
<div>
<div class="module-container">
<div class="module-container flex flex-col gap-10 lg:gap-0">
<ProductLogisticsDesc
v-for="(item, index) in moduleBtItems"
:key="index"
......@@ -176,7 +181,7 @@
<div class="footer-bg">
<div class="footer-banner">
<div class="footer-title">亚马逊ERP一体化管理，开启高效决策新体验</div>
<div class="footer-description">
<div class="footer-description text-center lg:text-left">
九猫ERP助力精准核算业务利润与高效决策，业财一体化不再是难事
</div>
<!---->
......@@ -371,7 +376,7 @@ export default {
</script>
<style lang="scss" scoped>
.content-container {
width: 70vw;
// width: 70vw;
height: 30vw;
margin: 0 auto;
padding-top: 40px;
......@@ -461,49 +466,66 @@ export default {
}
}
}
.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 {
background-size: 100% 90px;
.footer-title {
font-weight: 500;
font-size: 1.25rem;
margin-bottom: 1.25rem;
font-size: 36px;
margin-bottom: 20px;
max-width: 70vw;
text-align: center;
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
color: rgba(255, 255, 255, 1);
letter-spacing: 2px;
}
.footer-banner .footer-description {
line-height: 1.75rem;
display: none;
}
.footer-description {
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));
font-size: 18px;
margin-top: 8px;
margin-bottom: 40px;
color: rgba(255, 255, 255, 1);
}
}
@media (min-width: 1024px) {
@media (max-width: 1100px) {
.content-container {
height: auto;
}
.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;
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);
}
.footer-banner .footer-title {
font-size: 2.25rem;
line-height: 3.125rem;
margin-bottom: 0;
}
.footer-banner .footer-description {
display: block;
.season-top {
padding: 18px 20px 26px;
}
.product-logistics-container {
.navigate-item {
padding: 8px 2px;
}
}
}
</style>
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