Skip to content

O
offical_web
Commit 9193748d by wusiyi
Options

feat: 官网2.0样式优化

parent f5bbba6e
Showing with 459 additions and 116 deletions
src/views/product/production.vue
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="product-content h-full py-10" ref="tabsSection"> <div class="h-full py-10" ref="tabsSection">
<div class="pb-10 w-1/2 m-auto flex justify-center items-center gap-20"> <div class="pb-10 w-1/2 m-auto flex justify-center items-center gap-20">
<div <div
class="product-tabs-item w-52 font-semibold text-gray-500 flex flex-col items-center gap-2 cursor-pointer" class="product-tabs-item w-52 font-semibold text-gray-500 flex flex-col items-center gap-2 cursor-pointer"
...@@ -55,83 +55,319 @@ ...@@ -55,83 +55,319 @@
:class="{ active: activeTab === item.key }"></div> :class="{ active: activeTab === item.key }"></div>
</div> </div>
</div> </div>
<div class="tabs-content"> <!-- 九猫ERP -->
<div <div
v-if="activeTab === 'product'" v-if="activeTab === 'product'"
class="product-tabs-content flex items-center justify-center"> class="flex items-center justify-center bg-white p-10 w-3/5 m-auto">
<img <img
src="../../assets/images/product/temp.png" src="../../assets/images/product/temp.png"
alt="九猫ERP" alt="九猫ERP"
style="width: 90%" /> style="width: 90%" />
</div>
<!-- POD和满印供应链 -->
<div
class="custom-content w-full"
v-else-if="activeTab === 'custom-chain'">
<div class="flex flex-col w-3/4 m-auto">
<h2 class="w-full text-center">Jomall快捷生产</h2>
<div class="w-full flex justify-around items-center">
<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
width="800"
src="../../assets/images/product/costom/01.png"
alt="Jomall快捷生产" />
</div>
</div> </div>
<div v-else-if="activeTab === 'custom-chain'"> <div class="w-10/12 m-auto">
<div class="chain-container"> <h2 class="text-center mt-10">工艺优势</h2>
<div class="chain-left-content"> <div class="flex justify-around">
<video <div class="craft-item">
width="100%" <div class="cirque"></div>
class="video" <div class="square">
src="../../assets/video/abount-jomalls2-video.mp4" 数码
controls></video> <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 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>
<div class="chain-right-content"> <div class="craft-item">
<div class="chain-right-content-item"> <div class="cirque"></div>
<div <div class="square">
class="text-textTitle text-sm font-light lg:text-lg mt-4 lg:mt-8 lg:leading-7 lg:mt-7"> 白墨
九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案 <br />
烫画
</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>
class="mt-3 text-sm font-light text-textTitle lg:text-lg lg:mt-5 lg:leading-7"> </div>
<p class="mt-5"> <div class="craft-item">
九猫科技核心团队拥有超过7年的跨境电商ERP开发经验，设计及开发过的项目覆盖产品管理系统，订单管理系统，供应链系统，供应商系统，生产管理系统，仓库管理系统，营销系统，OA系统等等。 <div class="cirque"></div>
</p> <div class="square">
<p class="mt-5"> 单头
2022年开始转型并专注于DTC独立站平台的产品与服务，自主研发并推出“九猫ERP软件“。 <br />
大数据集成商家平台、营销、供应链、仓储物流、财务、报表等模块，纵向打通资源，横向综合业务，全方位深度赋能。 刺绣
九猫人始终秉承着“顾客至上”的经营理念，以“保障用户数据安全、关心客户使用体验、促进产品不断创新”为己任，意在帮助更多的跨境电商企业实现精细化管理和数字化建设。 </div>
</p> <div class="desc-craft">15单针绣到织物上</div>
<div class="craft-machine">
<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>
<div v-else-if="activeTab === 'supply-chain'"> <h2 class="text-center mt-10">满印供应链</h2>
<div class="chain-container"> <div class="w-8/12 m-auto flex justify-around gap-32">
<div class="chain-left-content"> <div class="w-1/2">
<video <div class="text-gray-500 text-base mb-4">
width="100%" LA
class="video" POD位于广东省广州市番禺区，支持白墨烫画，直喷、刺绣等多种工艺，自营车间规划近12台PRO
src="../../assets/video/abount-jomalls2-video.mp4" B直喷机以及X600机器;搭载自动化分拣系统，折衣、打包等全自动流水线提升订单处理效率与准确性，九猫物流衔接全球物流渠道，优化尾程配送时效成本
controls></video> </div>
<img
src="../../assets/images/product/costom/01.png"
alt="满印供应链" />
</div>
<div class="w-1/2">
<img
src="../../assets/images/product/costom/02.png"
alt="工厂地址" />
<div class="text-gray-800 font-bold text-lg mt-4">
<div>工厂名称：九猫中国供应链</div>
<div>工厂地址：中国广东省广州市番禺区兴南大道403号</div>
</div>
</div>
</div>
<h2 class="text-center mt-10">业务介绍</h2>
<div class="w-8/12 m-auto flex justify-around items-center gap-32">
<div class="video-container">
<video
width="100%"
class="video"
src="../../assets/video/abount-jomalls2-video.mp4"
controls></video>
</div>
<div class="w-2/3 h-full text-base font-light">
<p>
九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案
</p>
<p class="mt-5">
九猫科技核心团队拥有超过7年的跨境电商ERP开发经验，设计及开发过的项目覆盖产品管理系统，订单管理系统，供应链系统，供应商系统，生产管理系统，仓库管理系统，营销系统，OA系统等等。
</p>
<p class="mt-5">
2022年开始转型并专注于DTC独立站平台的产品与服务，自主研发并推出“九猫ERP软件“。
大数据集成商家平台、营销、供应链、仓储物流、财务、报表等模块，纵向打通资源，横向综合业务，全方位深度赋能。
</p>
<p class="mt-5">
九猫人始终秉承着“顾客至上”的经营理念，以“保障用户数据安全、关心客户使用体验、促进产品不断创新”为己任，意在帮助更多的跨境电商企业实现精细化管理和数字化建设。
</p>
</div>
</div>
</div>
<!-- 九猫美国供应链 -->
<div v-else-if="activeTab === 'supply-chain'">
<div class="flex flex-col w-3/4 m-auto">
<h2 class="w-full text-center">Jomall快捷生产</h2>
<div class="w-full flex justify-around items-center">
<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 class="chain-right-content"> <img
<div class="chain-right-content-item"> width="800"
<div src="../../assets/images/product/costom/01.png"
class="text-textTitle text-sm font-light lg:text-lg lg:mt-8 lg:leading-7 lg:mt-7"> alt="Jomall快捷生产" />
九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案 </div>
</div>
<div class="w-10/12 m-auto">
<h2 class="text-center mt-10">工艺优势</h2>
<div class="flex 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 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="mt-3 text-sm font-light text-textTitle lg:text-lg lg:mt-5 lg:leading-7"> </div>
<p class="mt-5"> <div class="flex">
九猫科技核心团队拥有超过7年的跨境电商ERP开发经验，设计及开发过的项目覆盖产品管理系统，订单管理系统，供应链系统，供应商系统，生产管理系统，仓库管理系统，营销系统，OA系统等等。 <Icon
</p> class="mt-5"
<p class="mt-5"> icon="foundation:arrow-left"
2022年开始转型并专注于DTC独立站平台的产品与服务，自主研发并推出“九猫ERP软件“。 width="150"
大数据集成商家平台、营销、供应链、仓储物流、财务、报表等模块，纵向打通资源，横向综合业务，全方位深度赋能。 color="var(--el-color-primary-light-7)" />
九猫人始终秉承着“顾客至上”的经营理念，以“保障用户数据安全、关心客户使用体验、促进产品不断创新”为己任，意在帮助更多的跨境电商企业实现精细化管理和数字化建设。 <div class="flex flex-col items-center gap-4">
</p> <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="cirque"></div>
<div class="square">
白墨
<br />
烫画
</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>
v-else-if="activeTab === 'logistics'" <!-- 九猫物流 -->
class="product-tabs-content flex items-center justify-center"> <div
<img v-else-if="activeTab === 'logistics'"
src="../../assets/images/product/temp.png" class="flex items-center justify-center bg-white p-10 w-3/5 m-auto">
alt="九猫ERP" <img
style="width: 90%" /> src="../../assets/images/product/temp.png"
</div> alt="九猫ERP"
style="width: 90%" />
</div> </div>
</div> </div>
<div class="video-cont" :class="playIcon ? 'active' : ''"> <div class="video-cont" :class="playIcon ? 'active' : ''">
...@@ -301,7 +537,7 @@ export default { ...@@ -301,7 +537,7 @@ export default {
justify-content: center; justify-content: center;
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
transition: opacity 0.3s ease, visibility 0.3s ease; transition: none;
} }
.video-content-hover { .video-content-hover {
...@@ -313,7 +549,7 @@ export default { ...@@ -313,7 +549,7 @@ export default {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transform: translateY(50px); transform: translateY(50px);
transition: opacity 0.8s ease, visibility 0.8s ease, transform 0.8s ease; transition: none;
} }
.divider { .divider {
...@@ -323,15 +559,18 @@ export default { ...@@ -323,15 +559,18 @@ export default {
background: linear-gradient(to right, #ffffff, #5c5c5c, #fff); background: linear-gradient(to right, #ffffff, #5c5c5c, #fff);
} }
.video-bg:hover .video-content-default { .video-bg:hover {
opacity: 0; .video-content-default {
visibility: hidden; opacity: 0;
} visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
.video-bg:hover .video-content-hover { }
opacity: 1; .video-content-hover {
visibility: visible; opacity: 1;
transform: translateY(0); visibility: visible;
transform: translateY(0);
transition: opacity 0.8s ease, visibility 0.8s ease, transform 0.8s ease;
}
} }
.product-tabs-item { .product-tabs-item {
...@@ -339,34 +578,33 @@ export default { ...@@ -339,34 +578,33 @@ export default {
&:hover { &:hover {
color: var(--light-color); color: var(--light-color);
img { img {
filter: none; filter: none;
} }
.active-line {
width: 100px;
opacity: 1;
}
} }
img { img {
filter: grayscale(1) brightness(0.7); filter: grayscale(1) brightness(0.7);
transition: filter 0.3s ease; transition: filter 0.3s ease;
} }
}
.product-tabs-item.active { &.active {
color: var(--primary-color);
&:hover {
color: var(--primary-color); color: var(--primary-color);
}
}
.product-tabs-content { &:hover {
margin: 0 auto; color: var(--primary-color);
background-color: #fff; }
padding: 50px;
width: 60%;
}
.tabs-content { img {
display: flex; filter: none;
justify-content: center; }
}
} }
.active-line { .active-line {
...@@ -381,49 +619,154 @@ export default { ...@@ -381,49 +619,154 @@ export default {
opacity: 0; opacity: 0;
transform: translateY(2px); transform: translateY(2px);
transition: width 0.3s ease, opacity 0.3s ease; transition: width 0.3s ease, opacity 0.3s ease;
&.active {
width: 100px;
opacity: 1;
}
} }
.product-tabs-item:hover .active-line { h2 {
width: 100px; color: var(--secondary-text-color);
opacity: 1; font-size: 28px;
font-weight: 700;
cursor: default;
margin-bottom: 40px;
position: relative;
padding-bottom: 10px;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 15%;
height: 3px;
background-image: linear-gradient(
to right,
#ffffff00,
var(--secondary-color-light6),
var(--secondary-color-dark2),
var(--secondary-color-light6),
#ffffff00
);
}
} }
.active-line.active { h3 {
width: 100px; color: var(--secondary-color-light2);
opacity: 1; font-size: 28px;
font-weight: 700;
cursor: default;
margin-bottom: 40px;
position: relative;
padding-bottom: 10px;
} }
.product-tabs-item.active img { h4 {
filter: none; font-size: 22px;
color: var(--secondary-color-light1);
font-weight: 600;
margin: 10px 0 10px 0;
} }
.logistics-container { .desc-item {
width: 80%; position: relative;
height: 80%; color: var(--el-color-primary-dark-1);
background-color: #fff; margin-left: 23px;
padding: 50px; margin-bottom: 5px;
font-size: 18px;
&::before {
background-color: var(--primary-color);
border-radius: 50%;
position: absolute;
left: -18px;
top: 10px;
content: '';
width: 5px;
height: 5px;
box-shadow: 0 0 0 5px var(--shadow-color);
}
} }
.chain-container { .craft-item {
display: flex; display: flex;
height: 100%; flex-direction: column;
} align-items: center;
.chain-left-content { min-width: 0;
.video {
margin-left: 300px; .cirque {
width: 500px; width: 100px;
object-fit: fill; height: 100px;
border-radius: 50%;
border: 10px solid var(--primary-color);
}
.square {
width: 80px;
height: 80px;
background-color: var(--secondary-color);
position: relative;
top: -50px;
left: 50px;
color: #fff;
text-align: center;
padding: 10px;
font-size: 20px;
font-weight: 500;
}
.desc-craft {
color: #666;
margin-top: -20px;
margin-left: 30px;
} }
} }
.chain-right-content { .craft-machine {
width: 60%; display: flex;
height: 100%; flex-direction: column;
padding: 0 50px; align-items: center;
max-width: 300px;
img {
margin-bottom: 20px;
height: 150px;
}
.machine-desc {
position: relative;
color: var(--el-color-primary-dark-1);
margin-left: 23px;
margin-bottom: 5px;
font-size: 16px;
&::before {
background-color: var(--primary-color);
border-radius: 50%;
position: absolute;
left: -18px;
top: 10px;
content: '';
width: 5px;
height: 5px;
box-shadow: 0 0 0 5px var(--shadow-color);
}
}
} }
.product-content { .video-container {
background-color: var(--background-color); width: 50%;
position: relative;
height: 100%;
margin: 50px auto;
.video {
width: 100%;
height: 100%;
object-fit: fill;
}
} }
.video-cont { .video-cont {
......
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