Skip to content

O
offical_web
Commit 797acae4 by wusiyi
Options

Merge branch 'dev'

parents 3cd8434e b889278a
Showing with 1237 additions and 582 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>
src/views/product/production.vue
...@@ -54,483 +54,819 @@ ...@@ -54,483 +54,819 @@
:class="{ active: activeTab === item.key }"></div> :class="{ active: activeTab === item.key }"></div>
</div> </div>
</div> </div>
<!-- 九猫ERP --> <div class="tab-content-wrapper" ref="tabContentWrapper">
<div <transition :name="transitionName">
v-if="activeTab === 'product'" <!-- 九猫ERP -->
class="flex flex-col items-center justify-center bg-white lg:p-10 py-5 m-auto">
<h2 class="text-center mt-10">ERP介绍</h2>
<div
class="lg:w-8/12 w-full m-auto flex flex-col lg:flex-row justify-between items-center gap-16">
<div class="video-container lg:w-1/3 w-10/12">
<video
width="100%"
class="video"
src="../../assets/video/abount-jomalls2-video.mp4"
controls />
</div>
<div <div
class="lg:w-3/5 w-11/12 h-full lg:text-base text-xs font-light mt-5 lg:mt-0"> v-if="activeTab === 'product'"
<p class="mt-5"> key="product"
九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案 class="flex flex-col items-center justify-center bg-white lg:p-10 py-5 m-auto">
</p> <h2 class="text-center mt-10 fade-up-animation">ERP介绍</h2>
<p class="mt-5">
九猫科技核心团队拥有超过7年的跨境电商ERP开发经验，设计及开发过的项目覆盖产品管理系统，订单管理系统，供应链系统，供应商系统，生产管理系统，仓库管理系统，营销系统，OA系统等等。
</p>
<p class="mt-5">
2022年开始转型并专注于DTC独立站平台的产品与服务，自主研发并推出“九猫ERP软件“。
大数据集成商家平台、营销、供应链、仓储物流、财务、报表等模块，纵向打通资源，横向综合业务，全方位深度赋能。
九猫人始终秉承着“顾客至上”的经营理念，以“保障用户数据安全、关心客户使用体验、促进产品不断创新”为己任，意在帮助更多的跨境电商企业实现精细化管理和数字化建设。
</p>
</div>
</div>
<div
class="w-full m-auto flex flex-col items-center justify-center mt-20">
<h2 class="text-center">产品功能贴合卖家需求</h2>
<div class="lg:w-10/12 w-11/12 flex flex-wrap justify-between">
<div <div
v-for="(item, index) in erpFunctions" class="fade-up-animation lg:w-8/12 w-full m-auto flex flex-col lg:flex-row justify-between items-center gap-16">
:key="index" <div class="video-container lg:w-1/3 w-10/12">
class="erp-function-item lg:mb-20 mb-10" <video
@mouseenter="handleImageHover(item.imageSrc)" width="100%"
@mouseleave="handleImageLeave"> class="video"
<div class="flex"> src="../../assets/video/abount-jomalls2-video.mp4"
<Icon controls />
class="erp-function-item-icon lg:w-16 lg:h-20 w-10 h-10"
:icon="item.icon"
:color="item.iconColor" />
<div class="erp-function-title">{{ item.title }}</div>
</div> </div>
<div class="erp-function-pic"> <div
<img :src="item.imageSrc" :alt="item.alt" /> class="lg:w-3/5 w-11/12 h-full lg:text-base text-xs font-light mt-5 lg:mt-0">
<p class="mt-5 text-justify">
九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案
</p>
<p class="mt-5 text-justify">
九猫科技核心团队拥有超过7年的跨境电商ERP开发经验，设计及开发过的项目覆盖产品管理系统，订单管理系统，供应链系统，供应商系统，生产管理系统，仓库管理系统，营销系统，OA系统等等。
</p>
<p class="mt-5 text-justify">
2022年开始转型并专注于DTC独立站平台的产品与服务，自主研发并推出“九猫ERP软件“。
大数据集成商家平台、营销、供应链、仓储物流、财务、报表等模块，纵向打通资源，横向综合业务，全方位深度赋能。
九猫人始终秉承着“顾客至上”的经营理念，以“保障用户数据安全、关心客户使用体验、促进产品不断创新”为己任，意在帮助更多的跨境电商企业实现精细化管理和数字化建设。
</p>
</div> </div>
</div> </div>
</div>
<transition name="image-fade">
<div v-if="hoveredImageSrc" class="erp-function-pic-hover">
<img :src="hoveredImageSrc" />
</div>
</transition>
</div>
<div class="w-full m-auto flex flex-col items-center justify-center">
<h2 class="text-center mt-10">对接平台</h2>
<div class="flex flex-wrap justify-around lg:w-9/12 w-11/12">
<div
v-for="(platform, index) in platforms"
:key="index"
class="platform-item lg:h-24 h-16 flex justify-center items-center bg-white shadow-md p-5 rounded-sm transition-all duration-300 cursor-pointer rounded-md mb-10">
<img
class="platform-image"
:src="
require(`../../assets/platforms/${platform.name}.${platform.type}`)
"
:alt="platform.name" />
</div>
</div>
</div>
</div>
<!-- POD和满印供应链 -->
<div
class="custom-content w-full"
v-else-if="activeTab === 'custom-chain'">
<div class="flex flex-col m-auto">
<h2 class="text-center mt-10">业务介绍</h2>
<div
class="lg:w-8/12 w-full px-5 lg:px-0 m-auto flex flex-col lg:flex-row justify-between items-center lg:gap-32">
<div class="video-container lg:w-1/3">
<video
width="100%"
class="video"
src="../../assets/video/abount-jomalls2-video.mp4"
controls></video>
</div>
<div <div
class="lg:w-2/3 w-full h-full lg:text-base text-xs font-light mt-5 lg:mt-0"> class="w-full m-auto flex flex-col items-center justify-center mt-20">
<p class="text-xl font-bold font-gray-600"> <h2 class="text-center fade-up-animation">
广州九猫POD柔性供应链位于广州番禺 产品功能贴合卖家需求
</p> </h2>
<p class="mt-5 ml-5 intro-text"> <div
生产车间全面支持直喷、白墨烫画、刺绣等多种前沿工艺，配备工业级打印与精密刺绣设备，确保图案细腻、品质上乘。 class="lg:w-8/12 w-11/12 lg:gap-x-36 mt-10 gap-x-10 gap-y-16 flex flex-wrap justify-between">
</p> <div class="erp-function-item p-10 fade-up-animation">
<p class="mt-5 ml-5 intro-text"> <div class="flex">
智造流水线集成自动化订单处理系统，从分拣、质检到打包、贴标，实现高效精准的一件代发操作，保障订单零延误。 <Icon
</p> class="erp-function-item-icon lg:w-16 lg:h-20 w-10 h-10"
<p class="mt-5 ml-5 intro-text"> icon="fluent:people-interwoven-24-regular"
区位优势坐拥番禺地利，无缝对接粤港澳大湾区高效物流网络，为国内及跨境客户提供极具性价比与时效的配送服务。 color="#00BCD4" />
</p> <div class="erp-function-title">职员管理</div>
<p class="mt-5 ml-5 intro-text"> </div>
我们致力于以柔性生产力核心，伴随品牌共同成长，赋能企业精准开拓并深耕全球市场。 <div
</p> class="px-5 text-justify text-gray-600 lg:text-base text-xs">
</div> 聚焦于组织架构与权限控制，支持
</div> <span class="text-darker-primary-color">多层级设置</span>
</div> 和
<span class="text-darker-primary-color">
<div class="flex flex-col lg:w-3/4 w-10/12 m-auto"> 细粒度权限分配
<h2 class="w-full text-center">Jomall快捷生产</h2> </span>
<div ，并通过设备与登录行为监控，实现操作可追溯与
class="w-full flex lg:flex-row flex-col justify-around items-center"> <span class="text-darker-primary-color">安全可控</span>
<div> 。
<div class="flex flex-col">
<h4>快捷订单生产</h4>
<div class="desc-item">拣胚单、生产单一图一码，生产精准</div>
<div class="desc-item">多种方式排产，不易浪费</div>
<div class="desc-item">订单时间处理快</div>
<div class="desc-item">数据可追踪，责任到人</div>
<div class="desc-item">机器、系统API对接(数据直接传输)</div>
</div>
<div class="flex flex-col">
<h4>传统订单生产</h4>
<div class="desc-item">EXCEL表格或纸质对接</div>
<div class="desc-item">依赖经验，滞后人工统计</div>
<div class="desc-item">人工排产，易出错浪费</div>
<div class="desc-item">生产计划相应反应较慢</div>
<div class="desc-item">订单时间处理时间长</div>
<div class="desc-item">生产错误率高</div>
</div>
</div>
<img
class="lg:mt-0 mt-5"
width="800"
src="../../assets/images/product/costom/01.png"
alt="Jomall快捷生产" />
</div>
</div>
<div class="w-10/12 m-auto flex flex-col">
<h2 class="text-center mt-10">工艺优势</h2>
<div class="flex flex-col lg:flex-row justify-around">
<div class="craft-item">
<div class="cirque"></div>
<div class="square">
数码
<br />
直喷
</div>
<div class="desc-craft">
通过在衣服上直接喷射彩色墨水的方式打印
</div>
<div class="flex justify-around gap-10">
<div class="craft-machine">
<h4>GTX PRO B</h4>
<img
src="../../assets/images/product/costom/gtxprob.png"
alt="GTX PRO B" />
<div>
<div class="machine-desc">满足工业级服装打印生产需求</div>
<div class="machine-desc">
高速打印颜色丰富、精维的设计图案
</div>
<div class="machine-desc">最大打印尺寸40.6cm × 53.3cm</div>
<div class="machine-desc">纯棉等天然纤维面料的效果更好</div>
</div> </div>
</div> </div>
<div class="craft-machine"> <div class="erp-function-item p-10 fade-up-animation">
<h4>GTX 600</h4> <div class="flex">
<img <Icon
src="../../assets/images/product/costom/gtx600.png" class="erp-function-item-icon lg:w-16 lg:h-20 w-10 h-10"
alt="GTX 600" /> icon="lucide:store"
<div> color="#6495ED" />
<div class="machine-desc">满足工业级服装打印生产需求</div> <div class="erp-function-title">店铺运营</div>
<div class="machine-desc">高饱和度打印</div> </div>
<div class="machine-desc">最大打印尺寸61cm × 61cm</div> <div
<div class="machine-desc">纯棉等天然纤维面料的效果更好</div> class="px-5 text-justify text-gray-600 lg:text-base text-xs">
集成多渠道数据，提供
<span class="text-darker-primary-color">
多维度运营概览与分析
</span>
，以店铺ID为核心
<span class="text-darker-primary-color">统一管理业绩</span>
、
<span class="text-darker-primary-color">费用与佣金</span>
，支持
<span class="text-darker-primary-color">
一站式监控与决策
</span>
。
</div> </div>
</div> </div>
</div> <div class="erp-function-item p-10 fade-up-animation">
</div> <div class="flex">
<div class="craft-item"> <Icon
<div class="cirque"></div> class="erp-function-item-icon lg:w-16 lg:h-20 w-10 h-10"
<div class="square"> icon="material-symbols:production-quantity-limits-rounded"
白墨 color="#DEB887" />
<br /> <div class="erp-function-title">产品运营</div>
烫画
</div>
<div class="desc-craft">
图案打印在特殊转印膜上通过高温和压力将图案转印到织物
</div>
<div class="craft-machine">
<h4>数码白墨烫画机</h4>
<img
src="../../assets/images/product/costom/th.png"
alt="数码白墨烫画机" />
<div>
<div class="machine-desc">
进口板卡，白彩同出套位精准，易撕不易裂
</div> </div>
<div class="machine-desc">自检系统、自动上粉抖粉、搅拌</div> <div
<div class="machine-desc"> class="px-5 text-justify text-gray-600 lg:text-base text-xs">
适用于多种面料，包括、涤棉、化纤等 <span class="text-darker-primary-color">
双供应链与选品设计
</span>
，支撑高效定制开发，
<span class="text-darker-primary-color">
支持海量款式与稳定代发
</span>
，通过可视化设计 ，实现精准成本测算，助力快速选品上新。
</div> </div>
</div> </div>
</div> <div class="erp-function-item p-10 fade-up-animation">
</div> <div class="flex">
<div class="craft-item"> <Icon
<div class="cirque"></div> class="erp-function-item-icon lg:w-16 lg:h-20 w-10 h-10"
<div class="square"> icon="fluent:money-16-regular"
单头 color="#FFC639" />
<br /> <div class="erp-function-title">财务管理</div>
刺绣 </div>
</div> <p
<div class="desc-craft">15单针绣到织物上</div> class="px-5 text-justify text-gray-600 lg:text-base text-xs">
<div class="craft-machine"> 提供
<h4>刺绣机</h4> <span class="text-darker-primary-color">全链路对账</span>
<img 与
src="../../assets/images/product/costom/cx.png" <span class="text-darker-primary-color">多维报表分析</span>
alt="刺绣机" /> ，覆盖生产、采购、物流、营销等环节，实现对成本、利润及绩效的精细化核算与洞察。
<div> </p>
<div class="machine-desc"> </div>
支持平绣、成帽绣、成衣绣、袜子绣、口袋绣、八合一、绳子绣、成鞋绣 <div class="erp-function-item p-10 fade-up-animation">
<div class="flex">
<Icon
class="erp-function-item-icon lg:w-16 lg:h-20 w-10 h-10"
icon="iconoir:graph-up"
color="#F08080" />
<div class="erp-function-title">营销管理</div>
</div>
<div
class="px-5 text-justify text-gray-600 lg:text-base text-xs">
提供
<span class="text-darker-primary-color">全流程处理</span>
与
<span class="text-darker-primary-color">可视化跟踪</span>
，覆盖订单各环节，支持异常处理与状态查询，实现生命周期精细化管控。
</div>
</div>
<div class="erp-function-item p-10 fade-up-animation">
<div class="flex">
<Icon
class="erp-function-item-icon lg:w-16 lg:h-20 w-10 h-10"
icon="icon-park-outline:transaction-order"
color="#0AA344" />
<div class="erp-function-title">订单管理</div>
</div>
<div
class="px-5 text-justify text-gray-600 lg:text-base text-xs">
整合
<span class="text-darker-primary-color">
客户、广告与红人资源
</span>
，通过用户画像、渠道监控与任务协作实现
<span class="text-darker-primary-color">精准推广</span>
与
<span class="text-darker-primary-color">
<span class="text-darker-primary-color">自动预警</span>
</span>
，支持营销效果可视化追踪。
</div> </div>
<div class="machine-desc">平绣面积400cm × 600cm</div>
<div class="machine-desc">帽绣面积360cm × 80cm</div>
<div class="machine-desc">成衣绣面积300cm × 300cm</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div
</div> class="w-full m-auto flex flex-col items-center justify-center mt-20">
<div class="flex m-auto flex-col"> <h2 class="text-center fade-up-animation">特色功能</h2>
<h2 class="text-center mt-10">满印供应链</h2> <div
<div class="flex items-end lg:items-center justify-around lg:w-9/12 w-11/12 fade-up-animation">
class="lg:w-8/12 w-10/12 m-auto flex flex-col lg:flex-row items-center justify-around lg:gap-32 gap-5"> <div
<div class="lg:w-1/2 w-full"> class="lg:w-1/2 w-2/5 flex flex-col lg:ml-44 ml-4 mobile-text-overlay">
<div class="text-gray-500 lg:text-base text-xs mb-4"> <h4>选品设计</h4>
<p class="text-xl font-bold text-gray-700 intro-text"> <div class="desc-item">多品类基板一件定制</div>
全工艺精通，效果卓越 <div class="desc-item">一品多图、一图多品</div>
</p> <div class="desc-item">一键素材上传、直观展示效果</div>
<p class="mt-3 ml-5 mb-5"> <div class="desc-item">成本直观，数据精准</div>
专业匹配数码直喷、热转印、丝网印等全系工艺，拥有独立印花工厂与数字色彩管理系统，确保复杂图案高清还原、色彩鲜艳持久，攻克传统印花对位不准、色牢度低的痛点。 <div class="desc-item">多组设计，批量设计</div>
</p> </div>
<p class="text-xl font-bold text-gray-700 intro-text"> <img
极致柔性，一件起订 class="lg:w-1/2 w-3/5"
</p> src="../../assets/images/product/costom/04.png"
<p class="mt-5 ml-5 mb-5"> alt="" />
打破传统起订量限制，支持
<span class="text-darker-primary-color">
1件起订、小单快反
</span>
。采用智能排版与按需生产技术，零库存压力，助力品牌轻松测款、快速追单，敏捷响应市场变化。
</p>
<p class="text-xl font-bold text-gray-700 intro-text">
一站式交付，周期极速
</p>
<p class="mt-5 ml-5 mb-5">
整合面料、印花、缝纫、后整全链路，流程数字化管控。
<span class="text-darker-primary-color">24小时快速打样</span>
，
<span class="text-darker-primary-color">7-15天批量出货</span>
，大幅缩短从设计到成衣的周期，抢占销售先机。
</p>
<p class="text-xl font-bold text-gray-700 intro-text">
严苛品控，全程保障
</p>
<p class="mt-5 ml-5 mb-5">
执行印花部位全检标准，结合面料预处理与水洗测试，确保图案清晰牢固、服装整体工艺达标。提供产前样确认与标准化质检报告，交付安心。
</p>
<p class="text-xl font-bold text-gray-700 intro-text">
服务集成，全程赋能
</p>
<p class="mt-5 ml-5 mb-5">
提供从设计文件优化、面料选型推荐，到生产跟进、渠道代发的一站式服务。专注解决满印技术难题，让客户可全心投入设计与营销，实现高效协同
</p>
</div> </div>
</div> </div>
<div class="lg:w-1/2 w-full"> <div
<img class="w-full m-auto flex flex-col items-center justify-center">
src="../../assets/images/product/costom/03.png" <h2 class="text-center mt-10 fade-up-animation">对接平台</h2>
alt="工厂地址" /> <div
<div class="text-gray-800 font-bold lg:text-lg text-xs mt-10"> class="mt-10 flex flex-wrap justify-around lg:w-9/12 w-11/12 fade-up-animation">
<div>工厂名称：九猫中国供应链</div> <div
v-for="(platform, index) in platforms"
:key="index"
class="platform-item lg:h-24 h-16 flex justify-center items-center bg-white shadow-md p-5 rounded-sm transition-all duration-300 cursor-pointer rounded-md mb-10">
<img
class="platform-image"
:src="
require(`../../assets/platforms/${platform.name}.${platform.type}`)
"
:alt="platform.name" />
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <!-- POD和满印供应链 -->
</div>
<!-- 九猫美国供应链 -->
<div v-else-if="activeTab === 'supply-chain'">
<div class="flex flex-col m-auto">
<h2 class="text-center mt-10">业务介绍</h2>
<div <div
class="lg:w-8/12 w-full px-5 lg:px-0 m-auto flex flex-col lg:flex-row justify-between items-center lg:gap-32"> v-else-if="activeTab === 'custom-chain'"
<div class="video-container lg:w-1/3"> key="custom-chain"
<video class="custom-content w-full">
width="100%" <div class="flex flex-col m-auto">
class="video" <h2 class="text-center mt-10 fade-up-animation">业务介绍</h2>
src="../../assets/video/lapod-video.mp4" <div
controls /> class="fade-up-animation lg:w-8/12 w-full px-5 lg:px-0 m-auto flex flex-col lg:flex-row justify-between items-center lg:gap-32">
</div> <div class="video-container lg:w-1/3">
<video
<div width="100%"
class="lg:w-2/3 w-full h-full lg:text-base text-xs font-light mt-5 lg:mt-0"> class="video"
<p class="text-xl font-bold font-gray-600"> src="../../assets/video/abount-jomalls2-video.mp4"
LA POD工厂坐落于美国加利福尼亚州的核心工业区 controls></video>
</p> </div>
<p class="mt-5 ml-5 intro-text"> <div
仓储区配备6万只现代化仓储空间，可容纳超500万件胚衣。 class="lg:w-2/3 w-full h-full lg:text-base text-xs font-light mt-5 lg:mt-0">
</p> <p class="text-xl font-bold font-gray-600">
<p class="mt-5 ml-5 intro-text"> 广州九猫POD柔性供应链位于广州番禺
生产间支持白墨烫画、直喷、烫印多种工艺，设备规划50台Brother打印机·自营车间搭载自动化分拣系统，折衣、打包、打标以及分拣全自动流水线显著提升订单处理效率与准确性。 </p>
</p> <p class="mt-5 ml-5 intro-text">
<p class="mt-5 ml-5 intro-text"> 生产车间全面支持直喷、白墨烫画、刺绣等多种前沿工艺，配备工业级打印与精密刺绣设备，确保图案细腻、品质上乘。
依托洛杉矶核心区位优势，衔接全美物流网络，优化跨境配送时效与成本。 </p>
</p> <p class="mt-5 ml-5 intro-text">
<p class="mt-5 ml-5 intro-text"> 智造流水线集成自动化订单处理系统，从分拣、质检到打包、贴标，实现高效精准的一件代发操作，保障订单零延误。
我们将持续分享LA POD的故事，助力企业深耕美国市场。 </p>
</p> <p class="mt-5 ml-5 intro-text">
区位优势坐拥番禺地利，无缝对接粤港澳大湾区高效物流网络，为国内及跨境客户提供极具性价比与时效的配送服务。
</p>
<p class="mt-5 ml-5 intro-text">
我们致力于以柔性生产力核心，伴随品牌共同成长，赋能企业精准开拓并深耕全球市场。
</p>
</div>
</div>
</div> </div>
</div> <div class="flex flex-col lg:w-3/4 w-10/12 m-auto items-center">
<div class="flex flex-col lg:w-3/4 w-10/12 m-auto"> <h2 class="w-full text-center fade-up-animation">
<h2 class="w-full text-center">Jomall快捷生产</h2> Jomall快捷生产
<div </h2>
class="w-full flex lg:flex-row flex-col justify-around items-center"> <div
<div> class="lg:gap-x-4 gap-x-10 gap-y-16 flex flex-wrap justify-around">
<div class="flex flex-col"> <div class="fast-production-item group fade-up-animation">
<h4>快捷订单生产</h4> <div class="flex">
<div class="desc-item">拣胚单、生产单一图一码，生产精准</div> <Icon
<div class="desc-item">多种方式排产，不易浪费</div> class="erp-function-item-icon lg:w-16 lg:h-20 w-10 h-10"
<div class="desc-item">订单时间处理快</div> icon="icon-park-twotone:order"
<div class="desc-item">数据可追踪，责任到人</div> color="#e3d43a" />
<div class="desc-item">机器、系统API对接(数据直接传输)</div> <div class="erp-function-title">智能订单转化</div>
</div>
<div
class="flex flex-col gap-4 text-gray-500 lg:text-base text-xs text-justify lg:-mt-5 flex-grow">
<div>
易联单，零错漏：销售订单一键生成标准生产单，复杂订单智能拆解合并。
</div>
<div>
一图一码：每个生产任务附带专属可视化指引与二维码，扫码即开工，信息精准直达机台或工位。
</div>
</div>
<div
@click="handleClickMore"
class="flex items-center justify-end text-gray-500 cursor-pointer text-xs lg:text-base hover:font-bold hover:text-darker-primary-color transition-all duration-300 opacity-0 group-hover:opacity-100 mt-auto">
<Icon class="w-4 h-4" icon="fa7-solid:angles-right" />
查看更多
</div>
</div> </div>
<div class="flex flex-col"> <div class="fast-production-item group fade-up-animation">
<h4>传统订单生产</h4> <div class="flex">
<div class="desc-item">EXCEL表格或纸质对接</div> <Icon
<div class="desc-item">依赖经验，滞后人工统计</div> class="erp-function-item-icon lg:w-16 lg:h-20 w-10 h-10"
<div class="desc-item">人工排产，易出错浪费</div> icon="ant-design:code-twotone"
<div class="desc-item">生产计划相应反应较慢</div> color="#48ade6" />
<div class="desc-item">订单时间处理时间长</div> <div class="erp-function-title">高级智能排程</div>
<div class="desc-item">生产错误率高</div> </div>
<div
class="flex flex-col gap-4 text-gray-500 lg:text-base text-xs text-justify lg:-mt-5 flex-grow">
<div>
多规则优化：支持按交期、客户优先级、相似工艺、集中裁剪等多种智能算法排序。
</div>
<div>
杜绝浪费：系统自动计算最优用料与流程，显著降低面料、辅料及工时损耗。
</div>
</div>
<div
class="flex items-center justify-end text-gray-500 cursor-pointer text-xs lg:text-base hover:font-bold hover:text-darker-primary-color transition-all duration-300 opacity-0 group-hover:opacity-100 mt-auto">
<Icon class="w-4 h-4" icon="fa7-solid:angles-right" />
查看更多
</div>
</div>
<div class="fast-production-item group fade-up-animation">
<div class="flex">
<Icon
class="erp-function-item-icon lg:w-16 lg:h-20 w-10 h-10"
icon="icon-park-twotone:buy"
color="#ff75a9" />
<div class="erp-function-title">极速处理与实时追踪</div>
</div>
<div
class="flex flex-col gap-4 text-gray-500 lg:text-base text-xs text-justify lg:-mt-5 flex-grow">
<div>
订单秒级响应：全数字化流程，订单确认、排产、下达较传统方式提速70%以上。
</div>
<div>
全链透明可控责任一步到人：全环节动态看板清晰呈现进度，系统自动绑定节点数据与人员设备确保全程透明权责分明。
</div>
</div>
<div
class="flex items-center justify-end text-gray-500 cursor-pointer text-xs lg:text-base hover:font-bold hover:text-darker-primary-color transition-all duration-300 opacity-0 group-hover:opacity-100 mt-auto">
<Icon class="w-4 h-4" icon="fa7-solid:angles-right" />
查看更多
</div>
</div>
<div class="fast-production-item group fade-up-animation">
<div class="flex">
<Icon
class="erp-function-item-icon lg:w-16 lg:h-20 w-10 h-10"
icon="icon-park-twotone:connect"
color="#6ace63" />
<div class="erp-function-title">深度系统集成</div>
</div>
<div
class="flex flex-col gap-4 text-gray-500 lg:text-base text-xs text-justify lg:-mt-5 flex-grow">
<div>开放API生态：无缝对接印花设备及现有ERP系统。</div>
<div>
数据自动流动：消除人工录入，确保数据在系统间高效、准确传递，打破信息孤岛。
</div>
</div>
<div
class="flex items-center justify-end text-gray-500 cursor-pointer text-xs lg:text-base hover:font-bold hover:text-darker-primary-color transition-all duration-300 opacity-0 group-hover:opacity-100 mt-auto">
<Icon class="w-4 h-4" icon="fa7-solid:angles-right" />
查看更多
</div>
</div> </div>
</div> </div>
<img
class="lg:mt-0 mt-5"
width="800"
src="../../assets/images/product/costom/01.png"
alt="Jomall快捷生产" />
</div> </div>
</div> <div class="w-10/12 m-auto flex flex-col">
</div> <h2 class="text-center mt-10 fade-up-animation">工艺优势</h2>
<div class="w-10/12 m-auto flex flex-col"> <div class="flex flex-col lg:flex-row justify-around">
<h2 class="text-center mt-10">工艺优势</h2> <div class="craft-item fade-up-animation">
<div class="flex lg:flex-row flex-col justify-around">
<div class="craft-item">
<div class="flex flex-row lg:flex-col justify-between">
<div>
<div class="cirque"></div> <div class="cirque"></div>
<div class="square"> <div class="square">
数码 数码
<br /> <br />
直喷 直喷
</div> </div>
<div class="desc-craft">
通过在衣服上直接喷射彩色墨水的方式打印
</div>
<div class="flex justify-around gap-10">
<div class="craft-machine">
<h4>GTX PRO B</h4>
<img
src="../../assets/images/product/costom/gtxprob.png"
alt="GTX PRO B" />
<div>
<div class="machine-desc">
满足工业级服装打印生产需求
</div>
<div class="machine-desc">
高速打印颜色丰富、精维的设计图案
</div>
<div class="machine-desc">
最大打印尺寸40.6cm × 53.3cm
</div>
<div class="machine-desc">
纯棉等天然纤维面料的效果更好
</div>
</div>
</div>
<div class="craft-machine">
<h4>GTX 600</h4>
<img
src="../../assets/images/product/costom/gtx600.png"
alt="GTX 600" />
<div>
<div class="machine-desc">
满足工业级服装打印生产需求
</div>
<div class="machine-desc">高饱和度打印</div>
<div class="machine-desc">最大打印尺寸61cm × 61cm</div>
<div class="machine-desc">
纯棉等天然纤维面料的效果更好
</div>
</div>
</div>
</div>
</div> </div>
<img <div class="craft-item fade-up-animation">
v-if="$isMobile" <div class="cirque"></div>
class="w-1/2 h-1/2" <div class="square">
src="../../assets/images/product/supply/01.png" 白墨
alt="数码直喷案例" /> <br />
</div> 烫画
</div>
<div class="desc-craft"> <div class="desc-craft">
通过在衣服上直接喷射彩色墨水的方式打印 图案打印在特殊转印膜上通过高温和压力将图案转印到织物
</div> </div>
<div class="flex justify-around gap-10"> <div class="craft-machine">
<div class="craft-machine"> <h4>数码白墨烫画机</h4>
<h4>GTX PRO B</h4> <img
<img src="../../assets/images/product/costom/th.png"
src="../../assets/images/product/costom/gtxprob.png" alt="数码白墨烫画机" />
alt="GTX PRO B" /> <div>
<div> <div class="machine-desc">
<div class="machine-desc">满足工业级服装打印生产需求</div> 进口板卡，白彩同出套位精准，易撕不易裂
<div class="machine-desc"> </div>
高速打印颜色丰富、精维的设计图案 <div class="machine-desc">
自检系统、自动上粉抖粉、搅拌
</div>
<div class="machine-desc">
适用于多种面料，包括、涤棉、化纤等
</div>
</div> </div>
<div class="machine-desc">最大打印尺寸40.6cm × 53.3cm</div>
<div class="machine-desc">纯棉等天然纤维面料的效果更好</div>
</div> </div>
</div> </div>
<div class="craft-machine"> <div class="craft-item fade-up-animation">
<h4>GTX 600</h4> <div class="cirque"></div>
<img <div class="square">
src="../../assets/images/product/costom/gtx600.png" 单头
alt="GTX 600" /> <br />
<div> 刺绣
<div class="machine-desc">满足工业级服装打印生产需求</div> </div>
<div class="machine-desc">高饱和度打印</div> <div class="desc-craft">15单针绣到织物上</div>
<div class="machine-desc">最大打印尺寸61cm × 61cm</div> <div class="craft-machine">
<div class="machine-desc">纯棉等天然纤维面料的效果更好</div> <h4>刺绣机</h4>
<img
src="../../assets/images/product/costom/cx.png"
alt="刺绣机" />
<div>
<div class="machine-desc">
支持平绣、成帽绣、成衣绣、袜子绣、口袋绣、八合一、绳子绣、成鞋绣
</div>
<div class="machine-desc">平绣面积400cm × 600cm</div>
<div class="machine-desc">帽绣面积360cm × 80cm</div>
<div class="machine-desc">成衣绣面积300cm × 300cm</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div v-if="!$isMobile" class="flex"> <div class="flex m-auto flex-col">
<Icon <h2 class="text-center mt-10 fade-up-animation">满印供应链</h2>
class="mt-5" <div
icon="foundation:arrow-left" class="lg:w-8/12 w-10/12 m-auto flex flex-col lg:flex-row items-center justify-around lg:gap-32 gap-5 fade-up-animation">
width="150" <div class="lg:w-1/2 w-full">
color="var(--el-color-primary-light-7)" /> <div class="text-gray-500 lg:text-base text-xs mb-4">
<div class="flex flex-col items-center gap-4"> <p class="text-xl font-bold text-gray-700 intro-text">
<img 全工艺精通，效果卓越
width="300" </p>
src="../../assets/images/product/supply/01.png" <p class="mt-3 ml-5 mb-5">
alt="数码直喷案例" /> 专业匹配数码直喷、热转印、丝网印等全系工艺，拥有独立印花工厂与数字色彩管理系统，确保复杂图案高清还原、色彩鲜艳持久，攻克传统印花对位不准、色牢度低的痛点。
<img </p>
width="300" <p class="text-xl font-bold text-gray-700 intro-text">
src="../../assets/images/product/supply/02.png" 极致柔性，一件起订
alt="白墨烫画案例" /> </p>
<p class="mt-5 ml-5 mb-5">
打破传统起订量限制，支持
<span class="text-darker-primary-color">
1件起订、小单快反
</span>
。采用智能排版与按需生产技术，零库存压力，助力品牌轻松测款、快速追单，敏捷响应市场变化。
</p>
<p class="text-xl font-bold text-gray-700 intro-text">
一站式交付，周期极速
</p>
<p class="mt-5 ml-5 mb-5">
整合面料、印花、缝纫、后整全链路，流程数字化管控。
<span class="text-darker-primary-color">
24小时快速打样
</span>
，
<span class="text-darker-primary-color">
7-15天批量出货
</span>
，大幅缩短从设计到成衣的周期，抢占销售先机。
</p>
<p class="text-xl font-bold text-gray-700 intro-text">
严苛品控，全程保障
</p>
<p class="mt-5 ml-5 mb-5">
执行印花部位全检标准，结合面料预处理与水洗测试，确保图案清晰牢固、服装整体工艺达标。提供产前样确认与标准化质检报告，交付安心。
</p>
<p class="text-xl font-bold text-gray-700 intro-text">
服务集成，全程赋能
</p>
<p class="mt-5 ml-5 mb-5">
提供从设计文件优化、面料选型推荐，到生产跟进、渠道代发的一站式服务。专注解决满印技术难题，让客户可全心投入设计与营销，实现高效协同
</p>
</div>
</div>
<div class="lg:w-1/2 w-full">
<img
src="../../assets/images/product/costom/03.png"
alt="工厂地址" />
<div class="text-gray-800 font-bold lg:text-lg text-xs mt-10">
<div>工厂名称：九猫中国供应链</div>
</div>
</div>
</div> </div>
<Icon
class="self-end mb-5"
icon="foundation:arrow-right"
width="150"
color="var(--el-color-primary-light-7)" />
</div> </div>
<div class="craft-item"> </div>
<!-- 九猫美国供应链 -->
<div v-else-if="activeTab === 'supply-chain'" key="supply-chain">
<div class="flex flex-col m-auto">
<h2 class="text-center mt-10 fade-up-animation">业务介绍</h2>
<div <div
class="flex flex-row lg:flex-col justify-between items-center"> class="fade-up-animation lg:w-8/12 w-full px-5 lg:px-0 m-auto flex flex-col lg:flex-row justify-between items-center lg:gap-32">
<div> <div class="video-container lg:w-1/3">
<div class="cirque"></div> <video
<div class="square"> width="100%"
白墨 class="video"
<br /> src="../../assets/video/lapod-video.mp4"
烫画 controls />
</div> </div>
<div
class="lg:w-2/3 w-full h-full lg:text-base text-xs font-light mt-5 lg:mt-0">
<p class="text-xl font-bold font-gray-600">
LA POD工厂坐落于美国加利福尼亚州的核心工业区
</p>
<p class="mt-5 ml-5 intro-text">
仓储区配备6万只现代化仓储空间，可容纳超500万件胚衣。
</p>
<p class="mt-5 ml-5 intro-text">
生产间支持白墨烫画、直喷、烫印多种工艺，设备规划50台Brother打印机·自营车间搭载自动化分拣系统，折衣、打包、打标以及分拣全自动流水线显著提升订单处理效率与准确性。
</p>
<p class="mt-5 ml-5 intro-text">
依托洛杉矶核心区位优势，衔接全美物流网络，优化跨境配送时效与成本。
</p>
<p class="mt-5 ml-5 intro-text">
我们将持续分享LA POD的故事，助力企业深耕美国市场。
</p>
</div> </div>
<img
v-if="$isMobile"
class="w-1/3 h-1/3"
src="../../assets/images/product/supply/02.png"
alt="白墨烫画案例" />
</div> </div>
<div class="desc-craft"> <div class="flex flex-col lg:w-3/4 w-10/12 m-auto items-center">
图案打印在特殊转印膜上通过高温和压力将图案转印到织物 <h2 class="w-full text-center fade-up-animation">
美国专供底胚
</h2>
<div
class="us-production-container lg:gap-x-4 gap-x-10 gap-y-16 flex flex-nowrap justify-between w-full">
<div class="us-production-item group fade-up-animation">
<div class="flex">
<Icon
class="erp-function-item-icon lg:w-16 lg:h-20 w-10 h-10"
icon="ph:shirt-folded-duotone"
color="#6a83d0" />
<div class="erp-function-title">款多质专</div>
</div>
<div
class="flex flex-col gap-4 text-gray-500 lg:text-base text-xs text-justify lg:-mt-5 flex-grow">
<div>
覆盖卫衣、常规T恤、水洗T三大主流品类，并按
<span class="text-darker-primary-color">克重</span>
与
<span class="text-darker-primary-color">工艺</span>
精细划分，精准匹配市场多元需求。
</div>
</div>
<div
@click="handleClickMore"
class="flex items-center justify-end text-gray-500 cursor-pointer text-xs lg:text-base hover:font-bold hover:text-darker-primary-color transition-all duration-300 opacity-0 group-hover:opacity-100 mt-auto">
<Icon class="w-4 h-4" icon="fa7-solid:angles-right" />
查看更多
</div>
</div>
<div class="us-production-item group fade-up-animation">
<div class="flex">
<Icon
class="erp-function-item-icon lg:w-16 lg:h-20 w-10 h-10"
icon="ri:ruler-2-fill"
color="e6915b" />
<div class="erp-function-title">合规可靠</div>
</div>
<div
class="flex flex-col gap-4 text-gray-500 lg:text-base text-xs text-justify lg:-mt-5 flex-grow">
<div>
全系列底胚严格遵循法规与质检标准，确保
<span class="text-darker-primary-color">
品质稳定统一
</span>
，从源头规避风险。
</div>
</div>
<div
class="flex items-center justify-end text-gray-500 cursor-pointer text-xs lg:text-base hover:font-bold hover:text-darker-primary-color transition-all duration-300 opacity-0 group-hover:opacity-100 mt-auto">
<Icon class="w-4 h-4" icon="fa7-solid:angles-right" />
查看更多
</div>
</div>
<div class="us-production-item group fade-up-animation">
<div class="flex">
<Icon
class="erp-function-item-icon lg:w-16 lg:h-20 w-10 h-10"
icon="ph:lightning-duotone"
color="#e6c42b" />
<div class="erp-function-title">高效协同</div>
</div>
<div
class="flex flex-col gap-4 text-gray-500 lg:text-base text-xs text-justify lg:-mt-5 flex-grow">
<div>
与设计模块深度集成，支持
<span class="text-darker-primary-color">一键套版</span>
、
<span class="text-darker-primary-color">多款测试</span>
、
<span class="text-darker-primary-color">批量出图</span>
，极大提升系列开发效率。
</div>
</div>
<div
class="flex items-center justify-end text-gray-500 cursor-pointer text-xs lg:text-base hover:font-bold hover:text-darker-primary-color transition-all duration-300 opacity-0 group-hover:opacity-100 mt-auto">
<Icon class="w-4 h-4" icon="fa7-solid:angles-right" />
查看更多
</div>
</div>
<div class="us-production-item group fade-up-animation">
<div class="flex">
<Icon
class="erp-function-item-icon lg:w-16 lg:h-20 w-10 h-10"
icon="fluent:paint-brush-32-filled"
color="#31c4b5" />
<div class="erp-function-title">系列开发</div>
</div>
<div
class="flex flex-col gap-4 text-gray-500 lg:text-base text-xs text-justify lg:-mt-5 flex-grow">
<div>
便于将同一设计快速应用于不同底胚，轻松构建产品矩阵，满足测款与系列化上新需求。
</div>
</div>
<div
class="flex items-center justify-end text-gray-500 cursor-pointer text-xs lg:text-base hover:font-bold hover:text-darker-primary-color transition-all duration-300 opacity-0 group-hover:opacity-100 mt-auto">
<Icon class="w-4 h-4" icon="fa7-solid:angles-right" />
查看更多
</div>
</div>
</div>
<div
class="fade-up-animation lg:w-2/3 w-full lg:mt-10 mt-20 flex gap-20 flex-wrap lg:justify-between justify-center">
<img
class="shadow-2xl"
src="../../assets/images/product/costom/05.png"
alt="" />
<img
class="shadow-2xl"
src="../../assets/images/product/costom/06.png"
alt="" />
<img
class="shadow-2xl"
src="../../assets/images/product/costom/07.png"
alt="" />
<img
class="shadow-2xl"
src="../../assets/images/product/costom/08.png"
alt="" />
<img
class="shadow-2xl"
src="../../assets/images/product/costom/09.png"
alt="" />
<img
class="shadow-2xl"
src="../../assets/images/product/costom/10.png"
alt="" />
</div>
<div
class="mt-10 text-gray-500 cursor-pointer flex justify-end hover:font-bold hover:text-darker-primary-color"
@click="toCostom">
查看更多...
</div>
</div> </div>
<div class="craft-machine"> </div>
<h4>数码白墨烫画机</h4>
<img <div class="w-10/12 m-auto flex flex-col">
src="../../assets/images/product/costom/th.png" <h2 class="text-center mt-10 fade-up-animation">工艺优势</h2>
alt="数码白墨烫画机" /> <div
<div> class="fade-up-animation flex lg:flex-row flex-col justify-around">
<div class="machine-desc"> <div class="craft-item">
进口板卡，白彩同出套位精准，易撕不易裂 <div class="flex flex-row lg:flex-col justify-between">
<div>
<div class="cirque"></div>
<div class="square">
数码
<br />
直喷
</div>
</div>
<img
v-if="$isMobile"
class="w-1/2 h-1/2"
src="../../assets/images/product/supply/01.png"
alt="数码直喷案例" />
</div>
<div class="desc-craft">
通过在衣服上直接喷射彩色墨水的方式打印
</div>
<div class="flex justify-around gap-10">
<div class="craft-machine">
<h4>GTX PRO B</h4>
<img
src="../../assets/images/product/costom/gtxprob.png"
alt="GTX PRO B" />
<div>
<div class="machine-desc">
满足工业级服装打印生产需求
</div>
<div class="machine-desc">
高速打印颜色丰富、精维的设计图案
</div>
<div class="machine-desc">
最大打印尺寸40.6cm × 53.3cm
</div>
<div class="machine-desc">
纯棉等天然纤维面料的效果更好
</div>
</div>
</div>
<div class="craft-machine">
<h4>GTX 600</h4>
<img
src="../../assets/images/product/costom/gtx600.png"
alt="GTX 600" />
<div>
<div class="machine-desc">
满足工业级服装打印生产需求
</div>
<div class="machine-desc">高饱和度打印</div>
<div class="machine-desc">最大打印尺寸61cm × 61cm</div>
<div class="machine-desc">
纯棉等天然纤维面料的效果更好
</div>
</div>
</div>
</div> </div>
<div class="machine-desc">自检系统、自动上粉抖粉、搅拌</div> </div>
<div class="machine-desc"> <div v-if="!$isMobile" class="flex">
适用于多种面料，包括、涤棉、化纤等 <Icon
class="mt-5"
icon="foundation:arrow-left"
width="150"
color="var(--el-color-primary-light-7)" />
<div class="flex flex-col items-center gap-4">
<img
width="300"
src="../../assets/images/product/supply/01.png"
alt="数码直喷案例" />
<img
width="300"
src="../../assets/images/product/supply/02.png"
alt="白墨烫画案例" />
</div>
<Icon
class="self-end mb-5"
icon="foundation:arrow-right"
width="150"
color="var(--el-color-primary-light-7)" />
</div>
<div class="craft-item">
<div
class="flex flex-row lg:flex-col justify-between items-center">
<div>
<div class="cirque"></div>
<div class="square">
白墨
<br />
烫画
</div>
</div>
<img
v-if="$isMobile"
class="w-1/3 h-1/3"
src="../../assets/images/product/supply/02.png"
alt="白墨烫画案例" />
</div>
<div class="desc-craft">
图案打印在特殊转印膜上通过高温和压力将图案转印到织物
</div>
<div class="craft-machine">
<h4>数码白墨烫画机</h4>
<img
src="../../assets/images/product/costom/th.png"
alt="数码白墨烫画机" />
<div>
<div class="machine-desc">
进口板卡，白彩同出套位精准，易撕不易裂
</div>
<div class="machine-desc">
自检系统、自动上粉抖粉、搅拌
</div>
<div class="machine-desc">
适用于多种面料，包括、涤棉、化纤等
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <!-- 九猫物流 -->
</div> <div
<!-- 九猫物流 --> v-else-if="activeTab === 'logistics'"
<div key="logistics"
v-else-if="activeTab === 'logistics'" class="flex items-center justify-center bg-white lg:p-10 py-5 lg:w-8/12 w-full m-auto">
class="flex items-center justify-center bg-white lg:p-10 py-5 lg:w-8/12 w-full m-auto"> <img
<img class="erp-image"
class="erp-image" src="../../assets/images/product/logistic/01.png"
src="../../assets/images/product/logistic/01.png" alt="九猫物流01" />
alt="九猫物流01" /> </div>
</transition>
</div> </div>
</div> </div>
<div class="video-cont" :class="playIcon ? 'active' : ''"> <div class="video-cont" :class="playIcon ? 'active' : ''">
...@@ -559,6 +895,8 @@ export default { ...@@ -559,6 +895,8 @@ export default {
data() { data() {
return { return {
activeTab: 'product', activeTab: 'product',
prevTab: 'product',
transitionName: 'slide-left',
productNavs: [ productNavs: [
{ {
name: '九猫ERP', name: '九猫ERP',
...@@ -611,51 +949,6 @@ export default { ...@@ -611,51 +949,6 @@ export default {
currentVideo: 3, currentVideo: 3,
playIcon: false, playIcon: false,
currentVideoSrc: '', currentVideoSrc: '',
hoveredImageSrc: null,
erpFunctions: [
{
icon: 'fluent:people-interwoven-24-regular',
iconColor: '#00BCD4',
title: '职员管理',
imageSrc: require('../../assets/images/product/erp/01.png'),
alt: '职员管理',
},
{
icon: 'lucide:store',
iconColor: '#6495ED',
title: '店铺运营',
imageSrc: require('../../assets/images/product/erp/02.png'),
alt: '店铺运营',
},
{
icon: 'material-symbols:production-quantity-limits-rounded',
iconColor: '#DEB887',
title: '产品运营',
imageSrc: require('../../assets/images/product/erp/03.png'),
alt: '产品运营',
},
{
icon: 'fluent:money-16-regular',
iconColor: '#FFC639',
title: '财务管理',
imageSrc: require('../../assets/images/product/erp/04.png'),
alt: '九猫ERP04',
},
{
icon: 'iconoir:graph-up',
iconColor: '#F08080',
title: '营销管理',
imageSrc: require('../../assets/images/product/erp/05.png'),
alt: '营销管理',
},
{
icon: 'icon-park-outline:transaction-order',
iconColor: '#0AA344',
title: '订单管理',
imageSrc: require('../../assets/images/product/erp/06.png'),
alt: '订单管理',
},
],
platforms: [ platforms: [
{ name: 'logo1', type: 'png' }, { name: 'logo1', type: 'png' },
{ name: 'logo2', type: 'svg' }, { name: 'logo2', type: 'svg' },
...@@ -691,15 +984,43 @@ export default { ...@@ -691,15 +984,43 @@ export default {
if (validKeys.includes(tab)) { if (validKeys.includes(tab)) {
this.scrollToTabs() this.scrollToTabs()
} }
// 初始化淡入上移动画
this.initFadeUpAnimation()
},
beforeDestroy() {
if (this._animationObserver) {
this._animationObserver.disconnect()
}
}, },
watch: { watch: {
'$route.query.tab'(newTab) { '$route.query.tab'(newTab) {
const validKeys = ['product', 'custom-chain', 'supply-chain', 'logistics'] const validKeys = ['product', 'custom-chain', 'supply-chain', 'logistics']
if (validKeys.includes(newTab)) { if (validKeys.includes(newTab) && newTab !== this.activeTab) {
// 根据tab索引决定滑动方向
const tabOrder = [
'product',
'custom-chain',
'supply-chain',
'logistics',
]
const currentIndex = tabOrder.indexOf(this.activeTab)
const nextIndex = tabOrder.indexOf(newTab)
// 确定滑动方向
this.transitionName =
nextIndex > currentIndex ? 'slide-left' : 'slide-right'
this.prevTab = this.activeTab
this.activeTab = newTab this.activeTab = newTab
this.scrollToTabs() this.scrollToTabs()
} }
}, },
activeTab() {
// 当activeTab变化时，重置并重新初始化动画
this.$nextTick(() => {
this.resetAndInitAnimation()
})
},
}, },
methods: { methods: {
scrollToTabs() { scrollToTabs() {
...@@ -717,10 +1038,19 @@ export default { ...@@ -717,10 +1038,19 @@ export default {
}) })
}, },
onClickTab(key) { onClickTab(key) {
// 根据tab索引决定滑动方向
const tabOrder = ['product', 'custom-chain', 'supply-chain', 'logistics']
const currentIndex = tabOrder.indexOf(this.activeTab)
const nextIndex = tabOrder.indexOf(key)
// 确定滑动方向
this.transitionName =
nextIndex > currentIndex ? 'slide-left' : 'slide-right'
this.prevTab = this.activeTab
this.activeTab = key this.activeTab = key
const query = Object.assign({}, this.$route.query, { tab: key }) const query = Object.assign({}, this.$route.query, { tab: key })
this.$router.replace({ path: this.$route.path, query }).catch(() => {}) this.$router.replace({ path: this.$route.path, query }).catch(() => {})
this.scrollToTabs()
}, },
async goToLogin() { async goToLogin() {
await this.$router.push('/home').catch(() => {}) await this.$router.push('/home').catch(() => {})
...@@ -737,11 +1067,97 @@ export default { ...@@ -737,11 +1067,97 @@ export default {
this.$refs.player.pause() this.$refs.player.pause()
this.currentVideoSrc = '' this.currentVideoSrc = ''
}, },
handleImageHover(imageSrc) { async handleClickMore() {
this.hoveredImageSrc = imageSrc // 跳转到首页
await this.$router.push('/home').catch(() => {})
// 使用 scrollParent 进行滚动
this.$nextTick(() => {
this.scrollParent().scrollTo({
top: 0,
behavior: 'smooth',
})
})
},
async toCostom() {
window.open('https://jomalls.com/custom/?tab=true', '_blank')
},
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) => {
// 如果元素已经有 fade-up-visible 类（切换tab时添加的），保持它
// 如果没有，移除它以确保动画可以重新触发
if (!item.classList.contains('fade-up-visible')) {
item.classList.remove('fade-up-visible')
}
observer.observe(item)
})
}
})
this._animationObserver = observer
}, },
handleImageLeave() { resetAndInitAnimation() {
this.hoveredImageSrc = null // 断开旧的观察器
if (this._animationObserver) {
this._animationObserver.disconnect()
this._animationObserver = null
}
// 在切换tab时，立即显示所有元素（不触发动画）
this.$nextTick(() => {
if (this.$el) {
this.$el.querySelectorAll('.fade-up-animation').forEach((item) => {
// 先移除之前的类
item.classList.remove('fade-up-visible')
// 使用内联样式立即设置最终状态，禁用transition
item.style.transition = 'none'
item.style.opacity = '1'
item.style.transform = 'translateY(0)'
})
}
// 延迟后，移除内联样式，添加可见类，保持元素可见（不触发动画）
setTimeout(() => {
if (this.$el) {
this.$el.querySelectorAll('.fade-up-animation').forEach((item) => {
// 先添加可见类
item.classList.add('fade-up-visible')
// 在下一帧移除内联样式，此时元素已经有 fade-up-visible，保持在可见状态
requestAnimationFrame(() => {
item.style.transition = ''
item.style.opacity = ''
item.style.transform = ''
})
})
}
// 重新初始化观察器，元素已经在可见状态，不会触发动画
// 只有当元素离开视口后再进入时，才会重新触发动画
setTimeout(() => {
this.initFadeUpAnimation()
}, 100)
}, 50)
})
}, },
}, },
} }
...@@ -901,12 +1317,13 @@ h4 { ...@@ -901,12 +1317,13 @@ h4 {
} }
.erp-function-item { .erp-function-item {
width: 30%; min-width: 250px;
height: 300px; width: 24%;
height: 250px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 4px 12px 0 #0000000f; box-shadow: 0 4px 12px 0 #0000000f;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: box-shadow 0.3s ease;
padding: 10px; padding: 10px;
&:hover { &:hover {
...@@ -921,13 +1338,78 @@ h4 { ...@@ -921,13 +1338,78 @@ h4 {
.erp-function-title { .erp-function-title {
color: var(--secondary-color); color: var(--secondary-color);
font-size: 20px; font-size: 22px;
font-weight: 600; font-weight: 600;
margin: 0px 0 0px 20px; margin: 0px 0 0px 20px;
} }
}
.fast-production-item {
min-width: 400px;
width: 43%;
height: 220px;
border-radius: 10px;
box-shadow: 0 4px 12px 0 #0000000f;
cursor: default;
transition: box-shadow 0.3s ease, transform 0.3s ease;
padding: 15px;
display: flex;
flex-direction: column;
&:hover {
box-shadow: 0 4px 12px 2px #0000001f;
transform: scale(1.05) translateY(-10px);
}
.erp-function-item-icon {
position: relative;
top: -35px;
left: 10px;
}
.erp-function-title {
color: var(--secondary-color);
font-size: 22px;
font-weight: 600;
margin: 0px 0 0px 20px;
}
}
.us-production-container {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
width: 100%;
}
.us-production-item {
min-width: 200px;
width: 23%;
height: 220px;
border-radius: 10px;
box-shadow: 0 4px 12px 0 #0000000f;
cursor: default;
transition: box-shadow 0.3s ease, transform 0.3s ease;
padding: 15px;
display: flex;
flex-direction: column;
&:hover {
box-shadow: 0 4px 12px 2px #0000001f;
transform: scale(1.05) translateY(-10px);
}
.erp-function-item-icon {
position: relative;
top: -35px;
left: 10px;
}
.erp-function-pic { .erp-function-title {
transition: all 0.3s ease; color: var(--secondary-color);
font-size: 22px;
font-weight: 600;
margin: 0px 0 0px 20px;
} }
} }
...@@ -943,26 +1425,7 @@ h4 { ...@@ -943,26 +1425,7 @@ h4 {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 50px; margin-bottom: 50px;
padding: 40px; padding: 40px;
width: 90%; width: 60%;
}
.erp-function-pic-hover {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
padding: 20px;
background-color: #fff;
border-radius: 10px;
pointer-events: none;
img {
min-width: 1000px;
object-fit: contain;
display: block;
}
} }
@media (max-width: 1100px) { @media (max-width: 1100px) {
...@@ -975,30 +1438,47 @@ h4 { ...@@ -975,30 +1438,47 @@ h4 {
top: -15px; top: -15px;
left: px; left: px;
} }
}
.erp-function-pic-hover { .erp-function-title {
display: none; font-size: 16px;
}
} }
.platform-item { .fast-production-item {
width: 30%; width: 100%;
height: 100%;
.erp-function-item-icon {
position: relative;
top: -10px;
left: 10px;
}
.erp-function-title {
font-size: 16px;
margin: 0px 0 10px 20px;
}
} }
}
.image-fade-enter-active, .us-production-container {
.image-fade-leave-active { flex-wrap: wrap;
transition: opacity 0.3s ease, transform 0.3s ease; }
}
.image-fade-enter, .us-production-item {
.image-fade-leave-to { width: 100%;
opacity: 0; height: 100%;
} .erp-function-item-icon {
position: relative;
top: -10px;
left: 10px;
}
.erp-function-title {
font-size: 16px;
margin: 0px 0 10px 20px;
}
}
.image-fade-enter-to, .platform-item {
.image-fade-leave { width: 30%;
opacity: 1; }
} }
.intro-text { .intro-text {
...@@ -1160,6 +1640,13 @@ h4 { ...@@ -1160,6 +1640,13 @@ h4 {
.desc-item { .desc-item {
font-size: 14px; font-size: 14px;
white-space: nowrap;
}
.mobile-text-overlay {
overflow: visible;
position: relative;
z-index: 10;
} }
.erp-image { .erp-image {
...@@ -1175,4 +1662,102 @@ h4 { ...@@ -1175,4 +1662,102 @@ h4 {
font-size: 14px; font-size: 14px;
} }
} }
.fade-up-animation {
transition: opacity 0.3s ease, transform 0.3s ease;
opacity: 0.2;
transform: translateY(100px);
will-change: opacity, transform;
}
// 确保当元素同时有其他类时，transition 仍然包含 opacity 和 transform
.erp-function-item.fade-up-animation,
.fast-production-item.fade-up-animation,
.us-production-item.fade-up-animation {
transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.fade-up-animation.fade-up-visible {
opacity: 1;
transform: translateY(0);
}
// Tab切换滑动动画
.tab-content-wrapper {
position: relative;
overflow: hidden;
min-height: 400px;
width: 100%;
> * {
position: relative;
width: 100%;
}
}
// 向左滑动（下一个tab）
.slide-left-enter-active {
transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 1;
}
.slide-left-leave-active {
transition: opacity 0.4s cubic-bezier(0.55, 0.06, 0.68, 0.19),
transform 0.4s cubic-bezier(0.55, 0.06, 0.68, 0.19);
z-index: 0;
}
.slide-left-enter {
opacity: 0;
transform: translateX(100%);
}
.slide-left-enter-to {
opacity: 1;
transform: translateX(0);
}
.slide-left-leave {
opacity: 1;
transform: translateX(0);
}
.slide-left-leave-to {
opacity: 0;
transform: translateX(-100%);
}
// 向右滑动（上一个tab）
.slide-right-enter-active {
transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 1;
}
.slide-right-leave-active {
transition: opacity 0.4s cubic-bezier(0.55, 0.06, 0.68, 0.19),
transform 0.4s cubic-bezier(0.55, 0.06, 0.68, 0.19);
z-index: 0;
}
.slide-right-enter {
opacity: 0;
transform: translateX(-100%);
}
.slide-right-enter-to {
opacity: 1;
transform: translateX(0);
}
.slide-right-leave {
opacity: 1;
transform: translateX(0);
}
.slide-right-leave-to {
opacity: 0;
transform: translateX(100%);
}
</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