Skip to content

O
offical_web
Commit b889278a by wusiyi
Options

feat: 产品页更新

parent 9628d690
Showing with 916 additions and 261 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,10 +85,12 @@
</div>
</div>
<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>
<div class="fade-up-animation">
<timeline />
</div>
</div>
</div>
</template>
<script>
import Timeline from './timeline.vue'
......@@ -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>
src/views/product/production.vue
......@@ -54,13 +54,16 @@
:class="{ active: activeTab === item.key }"></div>
</div>
</div>
<div class="tab-content-wrapper" ref="tabContentWrapper">
<transition :name="transitionName">
<!-- 九猫ERP -->
<div
v-if="activeTab === 'product'"
key="product"
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>
<h2 class="text-center mt-10 fade-up-animation">ERP介绍</h2>
<div
class="lg:w-8/12 w-full m-auto flex flex-col lg:flex-row justify-between items-center gap-16">
class="fade-up-animation 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%"
......@@ -71,13 +74,13 @@
<div
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">
<p class="mt-5 text-justify">
九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案
</p>
<p class="mt-5">
<p class="mt-5 text-justify">
九猫科技核心团队拥有超过7年的跨境电商ERP开发经验，设计及开发过的项目覆盖产品管理系统，订单管理系统，供应链系统，供应商系统，生产管理系统，仓库管理系统，营销系统，OA系统等等。
</p>
<p class="mt-5">
<p class="mt-5 text-justify">
2022年开始转型并专注于DTC独立站平台的产品与服务，自主研发并推出“九猫ERP软件“。
大数据集成商家平台、营销、供应链、仓储物流、财务、报表等模块，纵向打通资源，横向综合业务，全方位深度赋能。
九猫人始终秉承着“顾客至上”的经营理念，以“保障用户数据安全、关心客户使用体验、促进产品不断创新”为己任，意在帮助更多的跨境电商企业实现精细化管理和数字化建设。
......@@ -86,36 +89,161 @@
</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">
<h2 class="text-center fade-up-animation">
产品功能贴合卖家需求
</h2>
<div
v-for="(item, index) in erpFunctions"
:key="index"
class="erp-function-item lg:mb-20 mb-10"
@mouseenter="handleImageHover(item.imageSrc)"
@mouseleave="handleImageLeave">
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">
<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="item.icon"
:color="item.iconColor" />
<div class="erp-function-title">{{ item.title }}</div>
icon="fluent:people-interwoven-24-regular"
color="#00BCD4" />
<div class="erp-function-title">职员管理</div>
</div>
<div class="erp-function-pic">
<img :src="item.imageSrc" :alt="item.alt" />
<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>
。
</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="lucide:store"
color="#6495ED" />
<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>
，以店铺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 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="material-symbols:production-quantity-limits-rounded"
color="#DEB887" />
<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="fluent:money-16-regular"
color="#FFC639" />
<div class="erp-function-title">财务管理</div>
</div>
<p
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>
，覆盖生产、采购、物流、营销等环节，实现对成本、利润及绩效的精细化核算与洞察。
</p>
</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>
<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
class="w-full m-auto flex flex-col items-center justify-center mt-20">
<h2 class="text-center fade-up-animation">特色功能</h2>
<div
class="flex items-end lg:items-center justify-around lg:w-9/12 w-11/12 fade-up-animation">
<div
class="lg:w-1/2 w-2/5 flex flex-col lg:ml-44 ml-4 mobile-text-overlay">
<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">多组设计，批量设计</div>
</div>
<img
class="lg:w-1/2 w-3/5"
src="../../assets/images/product/costom/04.png"
alt="" />
</div>
</div>
<div
class="w-full m-auto flex flex-col items-center justify-center">
<h2 class="text-center mt-10 fade-up-animation">对接平台</h2>
<div
class="mt-10 flex flex-wrap justify-around lg:w-9/12 w-11/12 fade-up-animation">
<div
v-for="(platform, index) in platforms"
:key="index"
......@@ -132,12 +260,13 @@
</div>
<!-- POD和满印供应链 -->
<div
class="custom-content w-full"
v-else-if="activeTab === 'custom-chain'">
v-else-if="activeTab === 'custom-chain'"
key="custom-chain"
class="custom-content w-full">
<div class="flex flex-col m-auto">
<h2 class="text-center mt-10">业务介绍</h2>
<h2 class="text-center mt-10 fade-up-animation">业务介绍</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">
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 class="video-container lg:w-1/3">
<video
width="100%"
......@@ -165,41 +294,109 @@
</div>
</div>
</div>
<div class="flex flex-col lg:w-3/4 w-10/12 m-auto">
<h2 class="w-full text-center">Jomall快捷生产</h2>
<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">
Jomall快捷生产
</h2>
<div
class="w-full flex lg:flex-row flex-col justify-around items-center">
class="lg:gap-x-4 gap-x-10 gap-y-16 flex flex-wrap justify-around">
<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:order"
color="#e3d43a" />
<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 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>
一图一码：每个生产任务附带专属可视化指引与二维码，扫码即开工，信息精准直达机台或工位。
</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="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="ant-design:code-twotone"
color="#48ade6" />
<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
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>
<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>
<h2 class="text-center mt-10 fade-up-animation">工艺优势</h2>
<div class="flex flex-col lg:flex-row justify-around">
<div class="craft-item">
<div class="craft-item fade-up-animation">
<div class="cirque"></div>
<div class="square">
数码
......@@ -216,12 +413,18 @@
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">
高速打印颜色丰富、精维的设计图案
</div>
<div class="machine-desc">最大打印尺寸40.6cm × 53.3cm</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">
......@@ -230,15 +433,19 @@
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">高饱和度打印</div>
<div class="machine-desc">最大打印尺寸61cm × 61cm</div>
<div class="machine-desc">纯棉等天然纤维面料的效果更好</div>
<div class="machine-desc">
纯棉等天然纤维面料的效果更好
</div>
</div>
</div>
</div>
<div class="craft-item">
</div>
<div class="craft-item fade-up-animation">
<div class="cirque"></div>
<div class="square">
白墨
......@@ -257,14 +464,16 @@
<div class="machine-desc">
进口板卡，白彩同出套位精准，易撕不易裂
</div>
<div class="machine-desc">自检系统、自动上粉抖粉、搅拌</div>
<div class="machine-desc">
自检系统、自动上粉抖粉、搅拌
</div>
<div class="machine-desc">
适用于多种面料，包括、涤棉、化纤等
</div>
</div>
</div>
</div>
<div class="craft-item">
<div class="craft-item fade-up-animation">
<div class="cirque"></div>
<div class="square">
单头
......@@ -290,9 +499,9 @@
</div>
</div>
<div class="flex m-auto flex-col">
<h2 class="text-center mt-10">满印供应链</h2>
<h2 class="text-center mt-10 fade-up-animation">满印供应链</h2>
<div
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">
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">
<div class="lg:w-1/2 w-full">
<div class="text-gray-500 lg:text-base text-xs mb-4">
<p class="text-xl font-bold text-gray-700 intro-text">
......@@ -316,9 +525,13 @@
</p>
<p class="mt-5 ml-5 mb-5">
整合面料、印花、缝纫、后整全链路，流程数字化管控。
<span class="text-darker-primary-color">24小时快速打样</span>
<span class="text-darker-primary-color">
24小时快速打样
</span>
，
<span class="text-darker-primary-color">7-15天批量出货</span>
<span class="text-darker-primary-color">
7-15天批量出货
</span>
，大幅缩短从设计到成衣的周期，抢占销售先机。
</p>
<p class="text-xl font-bold text-gray-700 intro-text">
......@@ -347,11 +560,11 @@
</div>
</div>
<!-- 九猫美国供应链 -->
<div v-else-if="activeTab === 'supply-chain'">
<div v-else-if="activeTab === 'supply-chain'" key="supply-chain">
<div class="flex flex-col m-auto">
<h2 class="text-center mt-10">业务介绍</h2>
<h2 class="text-center mt-10 fade-up-animation">业务介绍</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">
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 class="video-container lg:w-1/3">
<video
width="100%"
......@@ -379,40 +592,148 @@
</p>
</div>
</div>
<div class="flex flex-col lg:w-3/4 w-10/12 m-auto">
<h2 class="w-full text-center">Jomall快捷生产</h2>
<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="w-full flex lg:flex-row flex-col justify-around items-center">
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>
<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>
覆盖卫衣、常规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="lg:mt-0 mt-5"
width="800"
src="../../assets/images/product/costom/01.png"
alt="Jomall快捷生产" />
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="w-10/12 m-auto flex flex-col">
<h2 class="text-center mt-10">工艺优势</h2>
<div class="flex lg:flex-row flex-col justify-around">
<h2 class="text-center mt-10 fade-up-animation">工艺优势</h2>
<div
class="fade-up-animation flex lg:flex-row flex-col justify-around">
<div class="craft-item">
<div class="flex flex-row lg:flex-col justify-between">
<div>
......@@ -440,12 +761,18 @@
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">
高速打印颜色丰富、精维的设计图案
</div>
<div class="machine-desc">最大打印尺寸40.6cm × 53.3cm</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">
......@@ -454,10 +781,14 @@
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">高饱和度打印</div>
<div class="machine-desc">最大打印尺寸61cm × 61cm</div>
<div class="machine-desc">纯棉等天然纤维面料的效果更好</div>
<div class="machine-desc">
纯棉等天然纤维面料的效果更好
</div>
</div>
</div>
</div>
......@@ -513,7 +844,9 @@
<div class="machine-desc">
进口板卡，白彩同出套位精准，易撕不易裂
</div>
<div class="machine-desc">自检系统、自动上粉抖粉、搅拌</div>
<div class="machine-desc">
自检系统、自动上粉抖粉、搅拌
</div>
<div class="machine-desc">
适用于多种面料，包括、涤棉、化纤等
</div>
......@@ -526,12 +859,15 @@
<!-- 九猫物流 -->
<div
v-else-if="activeTab === 'logistics'"
key="logistics"
class="flex items-center justify-center bg-white lg:p-10 py-5 lg:w-8/12 w-full m-auto">
<img
class="erp-image"
src="../../assets/images/product/logistic/01.png"
alt="九猫物流01" />
</div>
</transition>
</div>
</div>
<div class="video-cont" :class="playIcon ? 'active' : ''">
<div class="video-player">
......@@ -559,6 +895,8 @@ export default {
data() {
return {
activeTab: 'product',
prevTab: 'product',
transitionName: 'slide-left',
productNavs: [
{
name: '九猫ERP',
......@@ -611,51 +949,6 @@ export default {
currentVideo: 3,
playIcon: false,
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: [
{ name: 'logo1', type: 'png' },
{ name: 'logo2', type: 'svg' },
......@@ -691,15 +984,43 @@ export default {
if (validKeys.includes(tab)) {
this.scrollToTabs()
}
// 初始化淡入上移动画
this.initFadeUpAnimation()
},
beforeDestroy() {
if (this._animationObserver) {
this._animationObserver.disconnect()
}
},
watch: {
'$route.query.tab'(newTab) {
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.scrollToTabs()
}
},
activeTab() {
// 当activeTab变化时，重置并重新初始化动画
this.$nextTick(() => {
this.resetAndInitAnimation()
})
},
},
methods: {
scrollToTabs() {
......@@ -717,10 +1038,19 @@ export default {
})
},
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
const query = Object.assign({}, this.$route.query, { tab: key })
this.$router.replace({ path: this.$route.path, query }).catch(() => {})
this.scrollToTabs()
},
async goToLogin() {
await this.$router.push('/home').catch(() => {})
......@@ -737,11 +1067,97 @@ export default {
this.$refs.player.pause()
this.currentVideoSrc = ''
},
handleImageHover(imageSrc) {
this.hoveredImageSrc = imageSrc
async handleClickMore() {
// 跳转到首页
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')
},
handleImageLeave() {
this.hoveredImageSrc = null
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
},
resetAndInitAnimation() {
// 断开旧的观察器
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 {
}
.erp-function-item {
width: 30%;
height: 300px;
min-width: 250px;
width: 24%;
height: 250px;
border-radius: 10px;
box-shadow: 0 4px 12px 0 #0000000f;
cursor: pointer;
transition: all 0.3s ease;
transition: box-shadow 0.3s ease;
padding: 10px;
&:hover {
......@@ -921,13 +1338,78 @@ h4 {
.erp-function-title {
color: var(--secondary-color);
font-size: 20px;
font-size: 22px;
font-weight: 600;
margin: 0px 0 0px 20px;
}
}
.erp-function-pic {
transition: all 0.3s ease;
.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-title {
color: var(--secondary-color);
font-size: 22px;
font-weight: 600;
margin: 0px 0 0px 20px;
}
}
......@@ -943,26 +1425,7 @@ h4 {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 50px;
padding: 40px;
width: 90%;
}
.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;
}
width: 60%;
}
@media (max-width: 1100px) {
......@@ -975,30 +1438,47 @@ h4 {
top: -15px;
left: px;
}
}
.erp-function-pic-hover {
display: none;
.erp-function-title {
font-size: 16px;
}
}
.platform-item {
width: 30%;
.fast-production-item {
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,
.image-fade-leave-active {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.us-production-container {
flex-wrap: wrap;
}
.image-fade-enter,
.image-fade-leave-to {
opacity: 0;
}
.us-production-item {
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-to,
.image-fade-leave {
opacity: 1;
.platform-item {
width: 30%;
}
}
.intro-text {
......@@ -1160,6 +1640,13 @@ h4 {
.desc-item {
font-size: 14px;
white-space: nowrap;
}
.mobile-text-overlay {
overflow: visible;
position: relative;
z-index: 10;
}
.erp-image {
......@@ -1175,4 +1662,102 @@ h4 {
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>
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