Skip to content

O
offical_web
Commit c9facba4 by wusiyi
Options

feat: 官网2.0优化

parent 551bbb4c
Showing with 71 additions and 63 deletions
src/components/footBanner.vue
<template> <template>
<div class="footer-bg flex items-center" v-if="bannerContent"> <div class="footer-bg flex items-center" v-if="bannerContent">
<div class="bg-left w-20 lg:w-1/4 h-10 lg:h-20"></div>
<div <div
class="footer-banner w-full flex flex-col items-center place-content-between py-16"> class="footer-banner w-full flex flex-col items-center place-content-between py-8 lg:py-16 gap-6">
<div class="footer-text flex flex-col items-center mb-10">
<p <p
class="footer-title font-medium text-3xl lg:text-4xl mb-5 text-center text-gray-700 tracking-wide"> class="footer-title font-medium text-lg lg:text-4xl text-center text-gray-700 tracking-wide">
{{ bannerContent.title }} {{ bannerContent.title }}
</p> </p>
<p <p class="text-xs lg:text-xl text-center text-gray-500">
class="footer-description font-sm text-lg mt-4 text-center text-gray-500">
{{ bannerContent.description }} {{ bannerContent.description }}
</p> </p>
</div>
<button <button
class="footer-register-btn lg:w-48 w-24 h-10 lg:h-14 rounded-lg text-base lg:text-lg text-gray-700 cursor-pointer transition ease-in-out duration-300 hover:bg-primary-color hover:text-white" class="footer-register-btn lg:w-48 w-20 h-8 lg:h-14 rounded-lg text-sm lg:text-lg text-gray-700 cursor-pointer transition ease-in-out duration-300 hover:bg-primary-color hover:text-white"
@click="goToLogin"> @click="goToLogin">
立即使用 立即使用
</button> </button>
</div> </div>
<div class="bg-right w-20 lg:w-1/4 h-10 lg:h-20"></div>
<Register :visible="registerDialog" @close="registerDialog = false" /> <Register :visible="registerDialog" @close="registerDialog = false" />
</div> </div>
...@@ -88,33 +82,36 @@ export default { ...@@ -88,33 +82,36 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.footer-register-btn { .footer-banner {
border: 1px solid var(--primary-color);
}
.footer-title {
color: var(--secondary-color);
}
.bg-left {
background-image: linear-gradient( background-image: linear-gradient(
to right, to right,
var(--el-color-primary-light-4), var(--el-color-primary-light-4),
var(--el-color-primary-light-8), var(--el-color-primary-light-8),
#ffffff00 #ffffff00 20%,
#ffffff00 80%,
var(--el-color-primary-light-8),
var(--el-color-primary-light-4)
); );
background-size: 100% 40%;
background-position: center;
background-repeat: no-repeat;
} }
.bg-right { @media (max-width: 1100px) {
background-image: linear-gradient( .footer-banner {
to left, background-size: 100% 30%;
var(--el-color-primary-light-4), }
var(--el-color-primary-light-8), }
#ffffff00
); .footer-register-btn {
border: 1px solid var(--primary-color);
&:hover {
background: var(--primary-color);
}
} }
.footer-register-btn:hover { .footer-title {
background: (var(--primary-color)); color: var(--secondary-color);
} }
</style> </style>
src/components/head.vue
...@@ -206,7 +206,7 @@ export default { ...@@ -206,7 +206,7 @@ export default {
}, },
], ],
}, },
{ name: '价格', path: '/price' }, // { name: '价格', path: '/price' },
{ name: '一件定制', path: 'https://jomalls.com/custom/' }, { name: '一件定制', path: 'https://jomalls.com/custom/' },
{ {
name: '关于我们', name: '关于我们',
......
src/components/headerNavMobile.vue
...@@ -158,11 +158,11 @@ export default { ...@@ -158,11 +158,11 @@ export default {
}, },
], ],
}, },
{ name: '价格', path: '/price' }, // { name: '价格', path: '/price' },
{ name: '一件定制', path: 'https://jomalls.com/custom/' }, { name: '一件定制', path: 'https://jomalls.com/custom/' },
// { name: '案例', path: '/case' }, // { name: '案例', path: '/case' },
{ {
name: '关于', name: '客户服务',
path: '/about', path: '/about',
expanding: false, expanding: false,
children: [ children: [
...@@ -172,12 +172,6 @@ export default { ...@@ -172,12 +172,6 @@ export default {
path: '/about', path: '/about',
icon: usSvg, icon: usSvg,
}, },
// {
// name: '加入我们',
// subTitle: '加入九猫，一切皆有可能',
// path: '/join',
// icon: joinSvg,
// },
], ],
}, },
{ name: '帮助', path: '/help' }, { name: '帮助', path: '/help' },
......
src/components/product-intro.vue
...@@ -208,25 +208,24 @@ ...@@ -208,25 +208,24 @@
<div class="section-reason-item"> <div class="section-reason-item">
<div class="season-top flex flex-col items-center"> <div class="season-top flex flex-col items-center">
<Icon <Icon
class="w-14 h-14 lg:w-24 lg:h-24"
icon="icon-park-twotone:planet" icon="icon-park-twotone:planet"
width="80"
height="80"
color="var(--primary-color)" /> color="var(--primary-color)" />
<p class="reason-card-title">全生态产品</p> <p class="reason-card-title">全生态产品</p>
<p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg"> <p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg">
贴合跨境卖家核心使用场景 贴合跨境卖家核心使用场景
</p> </p>
<div class="mt-6 flex flex-col items-center"> <div class="lg:mt-6 mt-4 flex flex-col items-center">
<p class="text-textPrimary mb-2.5 font-light text-sm"> <p class="text-textPrimary mb-2.5 font-light text-xs lg:text-sm">
为跨境定制业务量身定制开发解决方案 为跨境定制业务量身定制开发解决方案
</p> </p>
<p class="text-textPrimary mb-2.5 font-light text-sm"> <p class="text-textPrimary mb-2.5 font-light text-xs lg:text-sm">
集成ERP系统、本土供应链、海外云仓 集成ERP系统、本土供应链、海外云仓
</p> </p>
<p class="text-textPrimary mb-2.5 font-light text-sm"> <p class="text-textPrimary mb-2.5 font-light text-xs lg:text-sm">
减少跨境难度、提升多平台运营协作效率 减少跨境难度、提升多平台运营协作效率
</p> </p>
<p class="text-textPrimary mb-2.5 font-light text-sm"> <p class="text-textPrimary mb-2.5 font-light text-xs lg:text-sm">
较少50%人员成本，全面赋能业务增长 较少50%人员成本，全面赋能业务增长
</p> </p>
</div> </div>
...@@ -241,21 +240,20 @@ ...@@ -241,21 +240,20 @@
<div class="season-top flex flex-col items-center"> <div class="season-top flex flex-col items-center">
<Icon <Icon
icon="icon-park-twotone:shield-add" icon="icon-park-twotone:shield-add"
width="80" class="w-14 h-14 lg:w-24 lg:h-24"
height="80"
color="var(--primary-color)" /> color="var(--primary-color)" />
<p class="reason-card-title">全方位保障</p> <p class="reason-card-title">全方位保障</p>
<p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg"> <p class="text-textPrimary font-normal mt-2 text-xs lg:text-lg">
深度开发能力与数据安全护航 深度开发能力与数据安全护航
</p> </p>
<div class="mt-6 flex flex-col items-center"> <div class="mt-6 flex flex-col items-center">
<p class="text-textPrimary mb-2.5 font-light text-sm"> <p class="text-textPrimary mb-2.5 font-light text-xs lg:text-sm">
五级权限管理体系 五级权限管理体系
</p> </p>
<p class="text-textPrimary mb-2.5 font-light text-sm"> <p class="text-textPrimary mb-2.5 font-light text-xs lg:text-sm">
支持私有化部署 支持私有化部署
</p> </p>
<p class="text-textPrimary mb-2.5 font-light text-sm"> <p class="text-textPrimary mb-2.5 font-light text-xs lg:text-sm">
全链路数据加密与灾备恢复机制 全链路数据加密与灾备恢复机制
</p> </p>
</div> </div>
...@@ -265,25 +263,25 @@ ...@@ -265,25 +263,25 @@
<p class="reason-tip-description">快速响应</p> <p class="reason-tip-description">快速响应</p>
</div> </div>
</div> </div>
<div class="section-reason-item"> <div class="section-reason-item">
<div class="season-top flex flex-col items-center"> <div class="season-top flex flex-col items-center">
<Icon <Icon
icon="mingcute:hand-heart-line" icon="mingcute:hand-heart-line"
width="80" class="w-14 h-14 lg:w-24 lg:h-24"
height="80"
color="var(--primary-color)" /> color="var(--primary-color)" />
<p class="reason-card-title">全周期服务</p> <p class="reason-card-title">全周期服务</p>
<p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg"> <p class="text-textPrimary font-normal mt-2 text-xs lg:text-lg">
全程专业服务，满足卖家需求 全程专业服务，满足卖家需求
</p> </p>
<div class="mt-6 flex flex-col items-center"> <div class="mt-6 flex flex-col items-center">
<p class="text-textPrimary mb-2.5 font-light text-sm"> <p class="text-textPrimary mb-2.5 font-light text-xs lg:text-sm">
软件顾问、实施、售后全流程服务 软件顾问、实施、售后全流程服务
</p> </p>
<p class="text-textPrimary mb-2.5 font-light text-sm"> <p class="text-textPrimary mb-2.5 font-light text-xs lg:text-sm">
一体化专业服务，深度赋能客户 一体化专业服务，深度赋能客户
</p> </p>
<p class="text-textPrimary mb-2.5 font-light text-sm"> <p class="text-textPrimary mb-2.5 font-light text-xs lg:text-sm">
为软件使用负责，持续交付新功能 为软件使用负责，持续交付新功能
</p> </p>
</div> </div>
...@@ -743,7 +741,7 @@ export default { ...@@ -743,7 +741,7 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-shadow: 0 0 16px 0 var(--shadow-color); box-shadow: 0 0px 10px 0px var(--shadow-color);
transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;
.reason-card-type { .reason-card-type {
overflow: hidden; overflow: hidden;
...@@ -770,6 +768,7 @@ export default { ...@@ -770,6 +768,7 @@ export default {
transform: translateY(-8px); transform: translateY(-8px);
box-shadow: 10px 10px 38px 0 var(--el-color-primary-light-9); box-shadow: 10px 10px 38px 0 var(--el-color-primary-light-9);
} }
.season-top { .season-top {
padding: 24px 40px 36px; padding: 24px 40px 36px;
} }
...@@ -783,8 +782,26 @@ export default { ...@@ -783,8 +782,26 @@ export default {
.text-textPrimary { .text-textPrimary {
color: rgba(58, 64, 87, 1); color: rgba(58, 64, 87, 1);
} }
.reason-list {
@media (max-width: 1100px) {
.season-top {
padding: 16px 20px 18px;
}
.reason-card-title {
font-size: 20px;
margin-top: 8px;
}
.section-reason-item {
.reason-card-type {
padding-top: 12px;
padding-bottom: 16px;
.reason-tip {
font-size: 24px;
}
}
}
} }
.lx-title { .lx-title {
font-size: 2.25rem; font-size: 2.25rem;
color: #1a2035; color: #1a2035;
......
src/views/aboutus/timeline.vue
...@@ -54,19 +54,19 @@ export default { ...@@ -54,19 +54,19 @@ export default {
timelineItems: [ timelineItems: [
{ {
title: '2022年', title: '2022年',
content: ['111', '222', '333'], content: [],
}, },
{ {
title: '2023年', title: '2023年',
content: ['111', '222', '333'], content: [],
}, },
{ {
title: '2024年', title: '2024年',
content: ['111', '222', '333'], content: [],
}, },
{ {
title: '2025年', title: '2025年',
content: ['111', '222', '333'], content: [],
}, },
], ],
currentIndex: 0, currentIndex: 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