Skip to content

O
offical_web
Commit 797acae4 by wusiyi
Options

Merge branch 'dev'

parents 3cd8434e b889278a
Showing with 136 additions and 66 deletions
src/components/product-intro.vue
...@@ -205,7 +205,7 @@ ...@@ -205,7 +205,7 @@
</div> </div>
<div <div
class="reason-list flex justify-between flex-col mt-6 gap-5 lg:gap-10 lg:mt-10 lg:flex-row"> class="reason-list flex justify-between flex-col mt-6 gap-5 lg:gap-10 lg:mt-10 lg:flex-row">
<div class="section-reason-item lg:w-1/3 w-full"> <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" class="w-14 h-14 lg:w-24 lg:h-24"
...@@ -214,26 +214,24 @@ ...@@ -214,26 +214,24 @@
<p class="reason-card-title">全场景赋能</p> <p class="reason-card-title">全场景赋能</p>
<div class="lg:mt-6 mt-4 flex flex-col items-center"> <div class="lg:mt-6 mt-4 flex flex-col items-center">
<p <p
class="text-textPrimary mb-2.5 font-light text-xs lg:text-base text-justify leading-6 lg:leading-8"> class="text-textPrimary font-light text-xs lg:text-sm text-justify leading-6 lg:leading-8">
聚焦跨境核心场景，提供量身定制的解决方案。我们无缝整合 九猫聚焦跨境场景
<span class="font-bold text-darker-primary-color">智能ERP</span> </p>
、 <p
<span class="font-bold text-darker-primary-color"> class="text-textPrimary font-light text-xs lg:text-sm text-justify leading-6 lg:leading-8">
本土优质供应链 提供智能ERP、优质供应链
</span> </p>
与 <p
<span class="font-bold text-darker-primary-color"> class="text-textPrimary font-light text-xs lg:text-sm text-justify leading-6 lg:leading-8">
全球海外云仓网络 与国内海外大仓的一体化解决方案
</span> </p>
，构建一体化运营闭环。极大降低跨境复杂度，实现多平台高效协同，助力企业 <p
<span class="font-bold text-darker-primary-color"> class="text-textPrimary font-light text-xs lg:text-sm text-justify leading-6 lg:leading-8">
提升运营效率 大幅降低运营复杂度与人力成本
</span> </p>
， <p
<span class="font-bold text-darker-primary-color"> class="text-textPrimary font-light text-xs lg:text-sm text-justify leading-6 lg:leading-8">
降低超50%的人员成本 驱动业务高效增长
</span>
，驱动业务持续增长。
</p> </p>
</div> </div>
</div> </div>
...@@ -243,7 +241,7 @@ ...@@ -243,7 +241,7 @@
</div> </div>
</div> </div>
<div class="section-reason-item lg:w-1/3 w-full"> <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="icon-park-twotone:shield-add" icon="icon-park-twotone:shield-add"
...@@ -253,24 +251,20 @@ ...@@ -253,24 +251,20 @@
<div class="mt-6 flex flex-col items-center"> <div class="mt-6 flex flex-col items-center">
<p <p
class="text-textPrimary mb-2.5 font-light text-xs lg:text-base text-justify leading-6 lg:leading-8"> class="text-textPrimary font-light text-xs lg:text-sm text-justify leading-6 lg:leading-8">
我们以企业级安全标准为基石，为您的业务保驾护航。拥有 以企业级安全标准为基石
<span class="font-bold text-darker-primary-color"> </p>
深度定制开发能力 <p
</span> class="text-textPrimary font-light text-xs lg:text-sm text-justify leading-6 lg:leading-8">
，并构建了从 提供深度定制开发与精细权限管理
<span class="font-bold text-darker-primary-color"> </p>
五级精细权限管理 <p
</span> class="text-textPrimary font-light text-xs lg:text-sm text-justify leading-6 lg:leading-8">
、 支持私有化部署与全链路加密
<span class="font-bold text-darker-primary-color"> </p>
支持私有化部署 <p
</span> class="text-textPrimary font-light text-xs lg:text-sm text-justify leading-6 lg:leading-8">
，到 确保核心数据与业务运营的绝对安全稳定
<span class="font-bold text-darker-primary-color">
全链路数据加密完整安全体系
</span>
，确保核心数据与业务运营的绝对安全与稳定。
</p> </p>
</div> </div>
</div> </div>
...@@ -280,7 +274,7 @@ ...@@ -280,7 +274,7 @@
</div> </div>
</div> </div>
<div class="section-reason-item lg:w-1/3 w-full"> <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"
...@@ -290,20 +284,24 @@ ...@@ -290,20 +284,24 @@
<div class="mt-6 flex flex-col items-center"> <div class="mt-6 flex flex-col items-center">
<p <p
class="text-textPrimary mb-2.5 font-light text-xs lg:text-base text-justify leading-6 lg:leading-8"> class="text-textPrimary font-light text-xs lg:text-sm text-justify leading-6 lg:leading-8">
不止于软件交付，我们提供贯穿始终的专业服务。从初期的 全周期咨询服务覆盖
<span class="font-bold text-darker-primary-color"> </p>
软件顾问咨询与落地实施 <p
</span> class="text-textPrimary font-light text-xs lg:text-sm text-justify leading-6 lg:leading-8">
，到持续的 持续迭代更新
<span class="font-bold text-darker-primary-color"> </p>
售后支持与深度赋能 <p
</span> class="text-textPrimary font-light text-xs lg:text-sm text-justify leading-6 lg:leading-8">
，我们承诺为软件的使用效果负责，并 为使用效果负责
<span class="font-bold text-darker-primary-color"> </p>
持续迭代交付新功能 <p
</span> class="text-textPrimary font-light text-xs lg:text-sm text-justify leading-6 lg:leading-8">
，与客户共同成长，确保投资获得长期回报。 与客户共同成长
</p>
<p
class="text-textPrimary font-light text-xs lg:text-sm text-justify leading-6 lg:leading-8">
确保长期价值回报
</p> </p>
</div> </div>
</div> </div>
...@@ -760,6 +758,7 @@ export default { ...@@ -760,6 +758,7 @@ export default {
margin: 0 auto; margin: 0 auto;
} }
.section-reason-item { .section-reason-item {
width: 25%;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
border-radius: 20px; border-radius: 20px;
box-sizing: border-box; box-sizing: border-box;
...@@ -818,6 +817,7 @@ export default { ...@@ -818,6 +817,7 @@ export default {
margin-top: 8px; margin-top: 8px;
} }
.section-reason-item { .section-reason-item {
width: 100%;
.reason-card-type { .reason-card-type {
padding-top: 12px; padding-top: 12px;
padding-bottom: 16px; padding-bottom: 16px;
......
src/views/aboutus/aboutPage.vue
...@@ -17,11 +17,10 @@ ...@@ -17,11 +17,10 @@
</div> </div>
</div> </div>
<div class="lg:w-3/4 w-11/12 flex flex-col m-auto lg:mt-20 mt-5"> <div class="lg:w-3/4 w-11/12 flex flex-col m-auto lg:mt-20 mt-5">
<h2 class="text-center mt-10">品牌介绍</h2> <h2 class="text-center mt-10 fade-up-animation">品牌介绍</h2>
<div <div
class="flex lg:flex-row flex-col w-full items-center lg:justify-between gap-10"> class="fade-up-animation flex lg:flex-row flex-col w-full items-center lg:justify-between gap-10">
<div <div
data-aos="fade-right"
class="w-3/4 flex-col items-center h-full lg:items-start lg:text-sm text-xs font-light"> class="w-3/4 flex-col items-center h-full lg:items-start lg:text-sm text-xs font-light">
<div class="lg:text-lg mt-4 lg:mt-8 lg:leading-7 lg:mt-7"> <div class="lg:text-lg mt-4 lg:mt-8 lg:leading-7 lg:mt-7">
九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案 九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案
...@@ -37,7 +36,7 @@ ...@@ -37,7 +36,7 @@
</p> </p>
</div> </div>
</div> </div>
<div class="video-container lg:w-1/2 w-3/4"> <div class="video-container fade-up-animation lg:w-1/2 w-3/4">
<video <video
class="video flex justify-center items-center" class="video flex justify-center items-center"
src="../../assets/video/abount-jomalls2-video.mp4" src="../../assets/video/abount-jomalls2-video.mp4"
...@@ -46,11 +45,11 @@ ...@@ -46,11 +45,11 @@
</div> </div>
</div> </div>
<div class="w-4/5 flex flex-col m-auto lg:mt-20 mt-10"> <div class="w-4/5 flex flex-col m-auto lg:mt-20 mt-10">
<h2 class="text-center">企业文化</h2> <h2 class="text-center fade-up-animation">企业文化</h2>
<div <div
class="flex justify-center flex-wrap mt-10 lg:gap-20 gap-5 cursor-default"> class="fade-up-animation flex justify-center flex-wrap mt-10 lg:gap-20 gap-5 cursor-default">
<div <div
class="culture-pic1 bg-center bg-cover lg:w-80 w-64 lg:h-56 h-40 overflow-hidden p-5 relative flex items-center justify-center"> class="culture-pic1 fade-up-animation bg-center bg-cover lg:w-80 w-64 lg:h-56 h-40 overflow-hidden p-5 relative flex items-center justify-center">
<div <div
class="text-gray-200 text-2xl font-semibold absolute top-5 left-5"> class="text-gray-200 text-2xl font-semibold absolute top-5 left-5">
使命 使命
...@@ -60,7 +59,7 @@ ...@@ -60,7 +59,7 @@
</div> </div>
</div> </div>
<div <div
class="culture-pic2 bg-center bg-cover lg:w-80 w-64 lg:h-56 h-40 overflow-hidden p-5 relative flex items-center justify-center"> class="culture-pic2 fade-up-animation bg-center bg-cover lg:w-80 w-64 lg:h-56 h-40 overflow-hidden p-5 relative flex items-center justify-center">
<div <div
class="text-gray-200 text-2xl font-semibold absolute top-5 left-5"> class="text-gray-200 text-2xl font-semibold absolute top-5 left-5">
愿景 愿景
...@@ -70,7 +69,7 @@ ...@@ -70,7 +69,7 @@
</div> </div>
</div> </div>
<div <div
class="culture-pic3 bg-center bg-cover lg:w-80 w-64 lg:h-56 h-40 overflow-hidden p-5 relative flex items-center justify-center"> class="culture-pic3 fade-up-animation bg-center bg-cover lg:w-80 w-64 lg:h-56 h-40 overflow-hidden p-5 relative flex items-center justify-center">
<div <div
class="text-gray-200 text-2xl font-semibold absolute top-5 left-5"> class="text-gray-200 text-2xl font-semibold absolute top-5 left-5">
价值观 价值观
...@@ -86,8 +85,10 @@ ...@@ -86,8 +85,10 @@
</div> </div>
</div> </div>
<div class="bg-colorBg-gradient w-full flex flex-col m-auto mt-20 py-10"> <div class="bg-colorBg-gradient w-full flex flex-col m-auto mt-20 py-10">
<h2 class="text-center">发展历程</h2> <h2 class="text-center fade-up-animation">发展历程</h2>
<timeline /> <div class="fade-up-animation">
<timeline />
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -98,6 +99,50 @@ export default { ...@@ -98,6 +99,50 @@ export default {
components: { components: {
Timeline, Timeline,
}, },
mounted() {
// 初始化淡入上移动画
this.initFadeUpAnimation()
},
beforeDestroy() {
if (this._animationObserver) {
this._animationObserver.disconnect()
}
},
methods: {
initFadeUpAnimation() {
// 如果已有观察器，先断开
if (this._animationObserver) {
this._animationObserver.disconnect()
}
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-up-visible')
} else {
entry.target.classList.remove('fade-up-visible')
}
})
},
{
threshold: 0.1, // 当元素10%可见时触发
rootMargin: '0px 0px -50px 0px', // 提前50px触发
}
)
this.$nextTick(() => {
if (this.$el) {
this.$el.querySelectorAll('.fade-up-animation').forEach((item) => {
// 先移除可见类，确保动画可以重新触发
item.classList.remove('fade-up-visible')
observer.observe(item)
})
}
})
this._animationObserver = observer
},
},
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -213,4 +258,29 @@ $culture-pics: ( ...@@ -213,4 +258,29 @@ $culture-pics: (
margin: 0 auto 10px; margin: 0 auto 10px;
} }
} }
.fade-up-animation {
transition: opacity 0.3s ease, transform 0.3s ease;
opacity: 0.2;
transform: translateY(100px);
will-change: opacity, transform;
}
.fade-up-animation.fade-up-visible {
opacity: 1;
transform: translateY(0);
}
// 为企业文化卡片添加依次出现的延迟效果
.culture-pic1.fade-up-animation.fade-up-visible {
transition-delay: 0.1s;
}
.culture-pic2.fade-up-animation.fade-up-visible {
transition-delay: 0.2s;
}
.culture-pic3.fade-up-animation.fade-up-visible {
transition-delay: 0.3s;
}
</style> </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