Skip to content

O
offical_web
Commit 9a24e95e by wusiyi
Options

feat: 移动端适配

parent 66cafb79
Showing with 82 additions and 31 deletions
src/components/footer.vue
......@@ -3,7 +3,7 @@
<FootBanner />
<footer class="banner_footer">
<div
class="footer-container flex justify-between text-white w-full-70 w-full-90 mx-auto py-12 px-6 lg:py-20 lg:px-0">
class="footer-container flex justify-between text-white w-full-70 w-full-90 mx-auto py-12 px-6 lg:py-14 lg:px-0">
<div class="footer-content-left">
<div class="mr-48 hidden lg:block">
<div class="jomalls text-3xl font-bold tracking-wider font-mono">
......@@ -135,7 +135,7 @@
</div>
<div class="footer-content-right flex flex-1 flex-col">
<div
class="flex flex-col lg:flex-row lg:justify-between lg:mb-20 mb-7.5">
class="flex flex-col lg:flex-row lg:justify-between lg:mb-10 mb-7.5">
<div
v-for="(section, index) in footerSections"
:key="index"
......@@ -353,7 +353,6 @@ export default {
<style scoped lang="scss">
.banner_footer {
background: #20222e;
padding-bottom: 48px;
}
.footer-routers {
......
src/views/product/production.vue
......@@ -90,15 +90,16 @@
<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 justify-around items-center gap-32">
<div class="video-container w-1/3">
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 class="w-2/3 h-full lg:text-base text-xs font-light">
<div
class="lg:w-2/3 w-full h-full lg:text-base text-xs font-light mt-5 lg:mt-0">
<p>
九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案
</p>
......@@ -116,9 +117,10 @@
</div>
</div>
<div class="flex flex-col w-3/4 m-auto">
<h2 class="text-center mt-10">Jomall快捷生产</h2>
<div class="w-full flex justify-around items-center">
<div class="flex flex-col lg:w-3/4 w-10/12 m-auto">
<h2 class="w-full text-center">Jomall快捷生产</h2>
<div
class="w-full flex lg:flex-row flex-col justify-around items-center">
<div>
<div class="flex flex-col">
<h4>快捷订单生产</h4>
......@@ -139,6 +141,7 @@
</div>
</div>
<img
class="lg:mt-0 mt-5"
width="800"
src="../../assets/images/product/costom/01.png"
alt="Jomall快捷生产" />
......@@ -146,7 +149,7 @@
</div>
<div class="w-10/12 m-auto flex flex-col">
<h2 class="text-center mt-10">工艺优势</h2>
<div class="flex justify-around">
<div class="flex flex-col lg:flex-row justify-around">
<div class="craft-item">
<div class="cirque"></div>
<div class="square">
......@@ -239,9 +242,10 @@
</div>
<div class="flex m-auto flex-col">
<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">
<div
class="lg:w-8/12 w-10/12 m-auto flex flex-col lg:flex-row justify-around lg:gap-32 gap-5">
<div class="lg:w-1/2 w-full">
<div class="text-gray-500 lg:text-base text-xs mb-4">
LA
POD位于广东省广州市番禺区，支持白墨烫画，直喷、刺绣等多种工艺，自营车间规划近12台PRO
B直喷机以及X600机器;搭载自动化分拣系统，折衣、打包等全自动流水线提升订单处理效率与准确性，九猫物流衔接全球物流渠道，优化尾程配送时效成本
......@@ -250,11 +254,11 @@
src="../../assets/images/product/costom/01.png"
alt="满印供应链" />
</div>
<div class="w-1/2">
<div class="lg:w-1/2 w-full">
<img
src="../../assets/images/product/costom/02.png"
alt="工厂地址" />
<div class="text-gray-800 font-bold text-lg mt-4">
<div class="text-gray-800 font-bold lg:text-lg text-xs mt-4">
<div>工厂名称：九猫中国供应链</div>
<div>工厂地址：中国广东省广州市番禺区兴南大道403号</div>
</div>
......@@ -266,15 +270,17 @@
<div v-else-if="activeTab === 'supply-chain'">
<div class="flex flex-col m-auto">
<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">
<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 class="w-2/3 h-full text-base font-light">
<div
class="lg:w-2/3 w-full h-full lg:text-base text-xs font-light mt-5 lg:mt-0">
<p>
九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案
</p>
......@@ -290,8 +296,10 @@
</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="w-full flex justify-around items-center">
<div
class="w-full flex lg:flex-row flex-col justify-around items-center">
<div>
<div class="flex flex-col">
<h4>快捷订单生产</h4>
......@@ -312,21 +320,33 @@
</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">
<h2 class="text-center mt-10">工艺优势</h2>
<div class="flex justify-around">
<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="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>
......@@ -359,7 +379,7 @@
</div>
</div>
</div>
<div class="flex">
<div v-if="!$isMobile" class="flex">
<Icon
class="mt-5"
icon="foundation:arrow-left"
......@@ -369,11 +389,11 @@
<img
width="300"
src="../../assets/images/product/supply/01.png"
alt="数码直喷" />
alt="数码直喷案例" />
<img
width="300"
src="../../assets/images/product/supply/02.png"
alt="白墨烫画" />
alt="白墨烫画案例" />
</div>
<Icon
class="self-end mb-5"
......@@ -382,12 +402,22 @@
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>
......@@ -664,7 +694,7 @@ h2 {
font-size: 28px;
font-weight: 700;
cursor: default;
margin: 0 auto 40px;
margin: 40px auto;
position: relative;
padding-bottom: 10px;
display: inline-block;
......@@ -724,12 +754,6 @@ h4 {
width: 90%;
}
@media (max-width: 1100px) {
.erp-image {
padding: 5px;
}
}
.desc-item {
position: relative;
color: var(--el-color-primary-dark-1);
......@@ -755,6 +779,7 @@ h4 {
flex-direction: column;
align-items: center;
min-width: 0;
margin-top: 20px;
.cirque {
width: 100px;
......@@ -819,7 +844,7 @@ h4 {
.video-container {
position: relative;
height: 100%;
margin: 50px auto;
margin: 0px auto 0;
.video {
width: 100%;
height: 100%;
......@@ -861,4 +886,31 @@ h4 {
}
}
}
@media (max-width: 1100px) {
h2 {
font-size: 16px;
}
h4 {
font-size: 16px;
}
.desc-item {
font-size: 14px;
}
.erp-image {
padding: 5px;
}
.craft-machine {
.machine-desc {
font-size: 14px;
}
}
.desc-craft {
font-size: 14px;
}
}
</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