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