Skip to content

O
offical_web
Commit c9facba4 by wusiyi
Options

feat: 官网2.0优化

parent 551bbb4c
Showing with 76 additions and 68 deletions
src/components/footBanner.vue
<template>
<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
class="footer-banner w-full flex flex-col items-center place-content-between py-16">
<div class="footer-text flex flex-col items-center mb-10">
<p
class="footer-title font-medium text-3xl lg:text-4xl mb-5 text-center text-gray-700 tracking-wide">
{{ bannerContent.title }}
</p>
<p
class="footer-description font-sm text-lg mt-4 text-center text-gray-500">
{{ bannerContent.description }}
</p>
</div>
class="footer-banner w-full flex flex-col items-center place-content-between py-8 lg:py-16 gap-6">
<p
class="footer-title font-medium text-lg lg:text-4xl text-center text-gray-700 tracking-wide">
{{ bannerContent.title }}
</p>
<p class="text-xs lg:text-xl text-center text-gray-500">
{{ bannerContent.description }}
</p>
<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">
立即使用
</button>
</div>
<div class="bg-right w-20 lg:w-1/4 h-10 lg:h-20"></div>
<Register :visible="registerDialog" @close="registerDialog = false" />
</div>
......@@ -88,33 +82,36 @@ export default {
}
</script>
<style scoped lang="scss">
.footer-register-btn {
border: 1px solid var(--primary-color);
}
.footer-title {
color: var(--secondary-color);
}
.bg-left {
.footer-banner {
background-image: linear-gradient(
to right,
var(--el-color-primary-light-4),
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 {
background-image: linear-gradient(
to left,
var(--el-color-primary-light-4),
var(--el-color-primary-light-8),
#ffffff00
);
@media (max-width: 1100px) {
.footer-banner {
background-size: 100% 30%;
}
}
.footer-register-btn {
border: 1px solid var(--primary-color);
&:hover {
background: var(--primary-color);
}
}
.footer-register-btn:hover {
background: (var(--primary-color));
.footer-title {
color: var(--secondary-color);
}
</style>
src/components/head.vue
......@@ -206,7 +206,7 @@ export default {
},
],
},
{ name: '价格', path: '/price' },
// { name: '价格', path: '/price' },
{ name: '一件定制', path: 'https://jomalls.com/custom/' },
{
name: '关于我们',
......
src/components/headerNavMobile.vue
......@@ -158,11 +158,11 @@ export default {
},
],
},
{ name: '价格', path: '/price' },
// { name: '价格', path: '/price' },
{ name: '一件定制', path: 'https://jomalls.com/custom/' },
// { name: '案例', path: '/case' },
{
name: '关于',
name: '客户服务',
path: '/about',
expanding: false,
children: [
......@@ -172,12 +172,6 @@ export default {
path: '/about',
icon: usSvg,
},
// {
// name: '加入我们',
// subTitle: '加入九猫，一切皆有可能',
// path: '/join',
// icon: joinSvg,
// },
],
},
{ name: '帮助', path: '/help' },
......
src/components/product-intro.vue
......@@ -208,25 +208,24 @@
<div class="section-reason-item">
<div class="season-top flex flex-col items-center">
<Icon
class="w-14 h-14 lg:w-24 lg:h-24"
icon="icon-park-twotone:planet"
width="80"
height="80"
color="var(--primary-color)" />
<p class="reason-card-title">全生态产品</p>
<p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg">
贴合跨境卖家核心使用场景
</p>
<div class="mt-6 flex flex-col items-center">
<p class="text-textPrimary mb-2.5 font-light text-sm">
<div class="lg:mt-6 mt-4 flex flex-col items-center">
<p class="text-textPrimary mb-2.5 font-light text-xs lg:text-sm">
为跨境定制业务量身定制开发解决方案
</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系统、本土供应链、海外云仓
</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 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%人员成本，全面赋能业务增长
</p>
</div>
......@@ -241,21 +240,20 @@
<div class="season-top flex flex-col items-center">
<Icon
icon="icon-park-twotone:shield-add"
width="80"
height="80"
class="w-14 h-14 lg:w-24 lg:h-24"
color="var(--primary-color)" />
<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>
<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 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 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>
</div>
......@@ -265,25 +263,25 @@
<p class="reason-tip-description">快速响应</p>
</div>
</div>
<div class="section-reason-item">
<div class="season-top flex flex-col items-center">
<Icon
icon="mingcute:hand-heart-line"
width="80"
height="80"
class="w-14 h-14 lg:w-24 lg:h-24"
color="var(--primary-color)" />
<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>
<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 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 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>
</div>
......@@ -743,7 +741,7 @@ export default {
flex-direction: column;
align-items: center;
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;
.reason-card-type {
overflow: hidden;
......@@ -770,6 +768,7 @@ export default {
transform: translateY(-8px);
box-shadow: 10px 10px 38px 0 var(--el-color-primary-light-9);
}
.season-top {
padding: 24px 40px 36px;
}
......@@ -783,8 +782,26 @@ export default {
.text-textPrimary {
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 {
font-size: 2.25rem;
color: #1a2035;
......
src/views/aboutus/timeline.vue
......@@ -54,19 +54,19 @@ export default {
timelineItems: [
{
title: '2022年',
content: ['111', '222', '333'],
content: [],
},
{
title: '2023年',
content: ['111', '222', '333'],
content: [],
},
{
title: '2024年',
content: ['111', '222', '333'],
content: [],
},
{
title: '2025年',
content: ['111', '222', '333'],
content: [],
},
],
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