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 @@
</div>
<div
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">
<Icon
class="w-14 h-14 lg:w-24 lg:h-24"
......@@ -214,26 +214,24 @@
<p class="reason-card-title">全场景赋能</p>
<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-base text-justify leading-6 lg:leading-8">
聚焦跨境核心场景，提供量身定制的解决方案。我们无缝整合
<span class="font-bold text-darker-primary-color">智能ERP</span>
、
<span class="font-bold text-darker-primary-color">
本土优质供应链
</span>
与
<span class="font-bold text-darker-primary-color">
全球海外云仓网络
</span>
，构建一体化运营闭环。极大降低跨境复杂度，实现多平台高效协同，助力企业
<span class="font-bold text-darker-primary-color">
提升运营效率
</span>
，
<span class="font-bold text-darker-primary-color">
降低超50%的人员成本
</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">
提供智能ERP、优质供应链
</p>
<p
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
class="text-textPrimary font-light text-xs lg:text-sm text-justify leading-6 lg:leading-8">
驱动业务高效增长
</p>
</div>
</div>
......@@ -243,7 +241,7 @@
</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">
<Icon
icon="icon-park-twotone:shield-add"
......@@ -253,24 +251,20 @@
<div class="mt-6 flex flex-col items-center">
<p
class="text-textPrimary mb-2.5 font-light text-xs lg:text-base text-justify leading-6 lg:leading-8">
我们以企业级安全标准为基石，为您的业务保驾护航。拥有
<span class="font-bold text-darker-primary-color">
深度定制开发能力
</span>
，并构建了从
<span class="font-bold text-darker-primary-color">
五级精细权限管理
</span>
、
<span class="font-bold text-darker-primary-color">
支持私有化部署
</span>
，到
<span class="font-bold text-darker-primary-color">
全链路数据加密完整安全体系
</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
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>
</div>
</div>
......@@ -280,7 +274,7 @@
</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">
<Icon
icon="mingcute:hand-heart-line"
......@@ -290,20 +284,24 @@
<div class="mt-6 flex flex-col items-center">
<p
class="text-textPrimary mb-2.5 font-light text-xs lg:text-base text-justify leading-6 lg:leading-8">
不止于软件交付，我们提供贯穿始终的专业服务。从初期的
<span class="font-bold text-darker-primary-color">
软件顾问咨询与落地实施
</span>
，到持续的
<span class="font-bold text-darker-primary-color">
售后支持与深度赋能
</span>
，我们承诺为软件的使用效果负责，并
<span class="font-bold text-darker-primary-color">
持续迭代交付新功能
</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
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
class="text-textPrimary font-light text-xs lg:text-sm text-justify leading-6 lg:leading-8">
确保长期价值回报
</p>
</div>
</div>
......@@ -760,6 +758,7 @@ export default {
margin: 0 auto;
}
.section-reason-item {
width: 25%;
background-color: rgba(255, 255, 255, 1);
border-radius: 20px;
box-sizing: border-box;
......@@ -818,6 +817,7 @@ export default {
margin-top: 8px;
}
.section-reason-item {
width: 100%;
.reason-card-type {
padding-top: 12px;
padding-bottom: 16px;
......
src/views/aboutus/aboutPage.vue
......@@ -17,11 +17,10 @@
</div>
</div>
<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
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
data-aos="fade-right"
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">
九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案
......@@ -37,7 +36,7 @@
</p>
</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
class="video flex justify-center items-center"
src="../../assets/video/abount-jomalls2-video.mp4"
......@@ -46,11 +45,11 @@
</div>
</div>
<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
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
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
class="text-gray-200 text-2xl font-semibold absolute top-5 left-5">
使命
......@@ -60,7 +59,7 @@
</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
class="text-gray-200 text-2xl font-semibold absolute top-5 left-5">
愿景
......@@ -70,7 +69,7 @@
</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
class="text-gray-200 text-2xl font-semibold absolute top-5 left-5">
价值观
......@@ -86,8 +85,10 @@
</div>
</div>
<div class="bg-colorBg-gradient w-full flex flex-col m-auto mt-20 py-10">
<h2 class="text-center">发展历程</h2>
<timeline />
<h2 class="text-center fade-up-animation">发展历程</h2>
<div class="fade-up-animation">
<timeline />
</div>
</div>
</div>
</template>
......@@ -98,6 +99,50 @@ export default {
components: {
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>
<style scoped lang="scss">
......@@ -213,4 +258,29 @@ $culture-pics: (
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>
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