<template>
|
<div>
|
<div class="bannerbg chuany-width100 h-[450px] flex items-center">
|
<div
|
class="content text-white font-['Source_Han_Sans_SC'] font-bold text-[50px] leading-[80px] tracking-[11%] capitalize ">
|
<p class="pb-3">全方位印刷解决方案 —— </p>
|
<p>顶尖设备，卓越品质，满足您的一切印刷需求</p>
|
</div>
|
</div>
|
<!-- <el-image class="chuany-width100" :src="data.joinbanner"></el-image> -->
|
<div class="bg-white">
|
<div class="content">
|
<ul style="width:60%;"
|
class="chuany-flex chuany-justify-between chuany-align-center content chuany-font20 chuany-padding10 h-[60px]">
|
<li :class="['chuany-cursor', data.tab == 1 ? 'actived' : '']" @click="tabchange(1)">制版设备</li>
|
<li :class="['chuany-cursor', data.tab == 2 ? 'actived' : '']" @click="tabchange(2)">印刷设备</li>
|
<li :class="['chuany-cursor', data.tab == 3 ? 'actived' : '']" @click="tabchange(3)">装订设备</li>
|
<li :class="['chuany-cursor', data.tab == 4 ? 'actived' : '']" @click="tabchange(4)">其他装订</li>
|
</ul>
|
</div>
|
</div>
|
<div v-if="data.tab == 1">
|
<p
|
class="font-['Source_Code_Pro'] font-semibold text-[36px] leading-[50px] tracking-[10%] align-middle capitalize text-center my-12">
|
柯达全自动CTP数字直接制版机</p>
|
<div class="content flex justify-center pb-12">
|
<el-image style="width: 578.03px; height: 386.84px" :src="equipment1" class="mr-16"></el-image>
|
<el-image style="width: 578.03px; height: 386.84px" :src="equipment2" class="ml-16"></el-image>
|
</div>
|
</div>
|
<div v-if="data.tab == 2" class="bg-white">
|
<div class="content flex justify-center items-center px-16 py-8">
|
<div class=" mx-16 px-16">
|
<p class="w-1/2 font-['Source_Code_Pro'] font-semibold text-[36px] align-middle capitalize">数码印刷</p>
|
<div class="font-['Source_Han_Sans_SC'] font-normal text-[24px] tracking-[4%] capitalize text-[#696969] mt-16">
|
<p >自有数码印刷设备，</p>
|
<p> 打样安全保密急件立等可取</p>
|
</div>
|
</div>
|
<el-image style="width: 511.13px; height: 527.12px" :src="yinshuashebei1"></el-image>
|
</div>
|
<div class="shebeipeizhi2 h-[997.73px]">
|
<div class="content">
|
<p class="font-['Source_Code_Pro'] font-semibold text-[36px] align-middle capitalize text-center text-white py-16">彩色印刷</p>
|
<div class="flex justify-center">
|
<div class="p-6 bg-white w-[587.98px] h-[695.5px] flex flex-wrap items-center justify-center" style="margin: 0 auto;">
|
<el-image style="width: 540px; height: 364.01px;margin: 0 auto;" :src="baseyinshuaji"></el-image>
|
<p class="w-[416.69px] h-[75.76px] bg-[linear-gradient(114.84deg,rgba(14,88,209,0.81)_35.46%,rgba(51,109,252,0.63)_93.3%)] font-['Source_Han_Sans_SC'] font-medium text-[32px] leading-[75.76px] tracking-[5%] capitalize text-center text-white">海德堡八色印刷机</p>
|
<div class="font-['Source_Han_Sans_SC'] font-normal text-[24px] leading-[41px] tracking-[10%] text-center capitalize">
|
<p>印刷速度：15200张/小时</p>
|
<p>印刷纸张克重：52克-300克</p>
|
<p>最大印刷面积：720×1020mm</p>
|
</div>
|
</div>
|
<div class="p-6 bg-white w-[587.98px] h-[695.5px] flex flex-wrap items-center justify-center" style="margin: 0 auto;">
|
<el-image style="width: 540px; height: 364.01px;margin: 0 auto;" :src="baseyinshuaji1"></el-image>
|
<p class="w-[416.69px] h-[75.76px] bg-[linear-gradient(114.84deg,rgba(14,88,209,0.81)_35.46%,rgba(51,109,252,0.63)_93.3%)] font-['Source_Han_Sans_SC'] font-medium text-[32px] leading-[75.76px] tracking-[5%] capitalize text-center text-white">海德堡四色印刷机</p>
|
<div class="font-['Source_Han_Sans_SC'] font-normal text-[24px] leading-[41px] tracking-[10%] text-center capitalize">
|
<p>印刷速度：15200张/小时</p>
|
<p>印刷纸张克重：52克-300克</p>
|
<p>最大印刷面积：720×1020mm</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="content flex justify-center items-center px-16 py-16">
|
<el-image style="width: 658.09px; height: 466.33px" :src="heibai"></el-image>
|
<div class=" mx-16 px-16">
|
<p class="w-1/2 font-['Source_Code_Pro'] font-semibold text-[36px] align-middle capitalize">黑白印刷</p>
|
<p class="font-['Source_Han_Sans_SC'] font-medium text-[32px] leading-[50px] tracking-[5%] capitalize h-[50px] flex items-center text-[#2646B3] mt-8">高速对开双面印刷机</p>
|
<div class="font-['Source_Han_Sans_SC'] font-normal text-[24px] tracking-[4%] capitalize text-[#696969] mt-8">
|
<p >最大印刷面积：630×920mm</p>
|
<p> 印刷速度：10000张双面/小时</p>
|
<p> 印刷纸张克重：40克—200克</p>
|
</div>
|
</div>
|
</div>
|
<div class="lunzhuanbg px-16 py-16">
|
<div class="content flex justify-center items-center ">
|
<div class=" mx-16 px-16">
|
<p class="w-1/2 font-['Source_Code_Pro'] font-semibold text-[36px] align-middle capitalize">轮转印刷</p>
|
<p class="font-['Source_Han_Sans_SC'] font-medium text-[32px] leading-[50px] tracking-[5%] capitalize h-[50px] flex items-center text-[#2646B3] mt-8">全新轮转印刷机</p>
|
<div class="font-['Source_Han_Sans_SC'] font-normal text-[24px] tracking-[4%] capitalize text-[#696969] mt-8">
|
<p >印刷速度：约30000 张/小时</p>
|
<p> 纸张克重范围：45g/m² - 150g/m²</p>
|
<p> 最大印刷面积：787mm × 546mm</p>
|
</div>
|
</div>
|
<el-image style="width: 658.09px; height: 466.33px" :src="lunzhuan"></el-image>
|
</div>
|
|
</div>
|
</div>
|
<div v-if="data.tab == 3" class="bg-white ">
|
<div class="zhuangding1">
|
<div class="content relative z-0">
|
<div class=" contentbg w-[512.66px] h-[540.71px] relative left-0 pl-16 pt-8 float-right">
|
<p class="font-['Source_Code_Pro'] font-semibold text-[36px] align-middle capitalize py-16 text-white">独家引进马天尼全自动<br>胶装联动线</p>
|
<div class="font-['Source_Han_Sans_SC'] font-normal text-[22px] leading-[37.4px] tracking-[0%] capitalize text-white">
|
<p>19夹20配</p>
|
<p>自动扫描图文检测错贴</p>
|
<p>配页、胶包、修切一次完成</p>
|
<p>每小时7000册</p>
|
<p>胶装牢固，不易撕扯分离</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="content pb-14">
|
<p class="font-['Source_Code_Pro'] font-semibold text-[36px] align-middle capitalize text-center py-16">马天尼霹雳马MC</p>
|
<div class="flex justify-evenly">
|
<div v-for="(item,index) in images" :key="index" class="flex flex-wrap w-[70px] items-center justify-center">
|
<el-image style="width: 50px; height: 50px" :src="item.url"></el-image>
|
<p>{{ item.name }}</p>
|
</div>
|
</div>
|
<el-image style="width: 1402.41px; height: 291.58px" :src="zhuangding2" class="my-6"></el-image>
|
<p class="font-['Source_Han_Sans_SC'] font-normal text-[22px] leading-[41px] tracking-[0%] capitalize text-[#333] text-center">
|
最大印刷面积：2100 × 1600 mm
|
|
印刷速度：14,000 本/小时
|
|
印刷纸张克重：0.2 - 0.4 mm
|
</p>
|
</div>
|
<div class="zhuangding3">
|
<div class="content relative z-0">
|
<div class=" contentbg w-[512.66px] h-[540.71px] relative right-0 pl-16 pt-8">
|
<p class="font-['Source_Code_Pro'] font-semibold text-[36px] align-middle capitalize py-16 text-white">五台全自动骑马订联动线</p>
|
<div class="font-['Source_Han_Sans_SC'] font-normal text-[22px] leading-[37.4px] tracking-[0%] capitalize text-white">
|
<p>最大装订尺寸 315×360mm</p>
|
<p>最小装订尺寸 210×140mm</p>
|
<p>最大装订帖数 6帖+封面</p>
|
<p>装订速度 8000册/小时</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-if="data.tab == 4" class="bg-white pb-10">
|
<p class="font-['Source_Han_Sans_SC'] font-normal text-[24px] leading-[41px] tracking-[10%] text-center capitalize text-[#696969] py-12">
|
所有工序，无需外协，川印都能完成</p>
|
<div class="content flex flex-wrap justify-between pb-8">
|
<div v-for="(item,index) in arrayList" class=" pb-4 hover:text-[#0D61CE] cursor-pointer mx-6 ">
|
<el-image v-if="index==0||index==1" style="width: 586.34px; height: 406.59px" :src="item.url" class="hover:shadow-[0px_6px_18px_0px_#054CB726] transition-shadow duration-300"></el-image>
|
<el-image v-else style="width: 380px; height: 300px" :src="item.url" class="hover:shadow-[0px_6px_18px_0px_#054CB726] transition-shadow duration-300"></el-image>
|
<p class="font-['Source_Han_Sans'] font-medium text-[24px] leading-[50px] tracking-[5%] text-center capitalize pt-1">{{ item.name }}</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
|
const { $route ,$router} = getCurrentInstance().appContext.config.globalProperties
|
|
import $store from "@/store/index.js";
|
import equipment1 from '@/static/img/equipment1.png'
|
import equipment2 from '@/static/img/equipment2.png'
|
import moqieji from '@/static/img/moqieji.png'
|
import fumoji from '@/static/img/fumoji.png'
|
import jinkouMBO from '@/static/img/jinkouMBO.png'
|
import lekouji from '@/static/img/lekouji.png'
|
import sufengji from '@/static/img/sufengji.png'
|
import zhanyeji from '@/static/img/zhanyeji.png'
|
import tangjinji from '@/static/img/tangjinji.png'
|
import suoxianji from '@/static/img/suoxianji.png'
|
import zhanxinfeng from '@/static/img/zhanxinfeng.png'
|
import yinshuashebei1 from '@/static/img/yinshuashebei1.png'
|
import baseyinshuaji from '@/static/img/baseyinshuaji.png'
|
import baseyinshuaji1 from '@/static/img/baseyinshuaji1.png'
|
import heibai from '@/static/img/heibai.png'
|
import lunzhuan from '@/static/img/lunzhuan.png'
|
import zhuangding2 from '@/static/img/zhuangding2.png'
|
import Frame from '@/static/img/Frame.png'
|
import Frame1 from '@/static/img/Frame-1.png'
|
import Frame2 from '@/static/img/Frame-2.png'
|
import Frame3 from '@/static/img/Frame-3.png'
|
import Frame4 from '@/static/img/Frame-4.png'
|
|
const data = reactive({
|
tab: 1,
|
})
|
const images = [
|
{
|
name:'智控快设',
|
url:Frame4
|
},
|
{
|
name:'高效高速',
|
url:Frame
|
},
|
{
|
name:'裁切精准',
|
url:Frame1
|
},
|
{
|
name:'高度自动',
|
url:Frame2
|
},
|
{
|
name:'操作简易',
|
url:Frame3
|
},
|
]
|
const arrayList = [
|
{
|
name:'进口MBO全自动折页机',
|
url:jinkouMBO
|
},
|
{
|
name:'进口阿斯特全自动锁线机',
|
url:suoxianji
|
},
|
{
|
name:'模切机',
|
url:moqieji
|
},
|
{
|
name:'勒口机',
|
url:lekouji
|
},
|
{
|
name:'塑封机',
|
url:sufengji
|
},
|
{
|
name:'粘页机',
|
url:zhanyeji
|
},
|
// {
|
// name:'粘信封机',
|
// url:zhanxinfeng
|
// },
|
{
|
name:'烫金机',
|
url:tangjinji
|
},
|
{
|
name:'覆膜机',
|
url:fumoji
|
},
|
|
]
|
const tabchange = (el) => {
|
$router.push({
|
path: '/equipment',
|
query: { id: el }
|
})
|
data.tab = el
|
$route.query.id = el
|
|
}
|
|
onMounted(() => {
|
data.tab = $route.query.id;
|
})
|
</script>
|
|
<style scoped>
|
.el-button {
|
width: 309.52px;
|
height: 77.34px;
|
font-size: 28px;
|
}
|
|
.actived {
|
line-height: 52px;
|
border-bottom: 4px solid #09a860;
|
}
|
|
.bannerbg {
|
background: linear-gradient(90deg, rgba(14, 97, 206, 0.9) 30%, rgba(108, 160, 255, 0.18) 100%),
|
url('@/static/img/yinshuapeizhibanner.png') center/cover no-repeat;
|
}
|
|
.bannerbg1 {
|
background: linear-gradient(90deg, rgba(14, 97, 206, 0.9) 30%, rgba(108, 160, 255, 0.18) 100%),
|
url('@/static/img/yinshuapeizhibanner.png') center/cover no-repeat;
|
}
|
.shebeipeizhi2{
|
background: linear-gradient(114.84deg, rgba(14, 88, 209, 0.9) 35.46%, rgba(51, 109, 252, 0.7) 93.3%),
|
url('@/static/img/yinshuapeizhi2.png') center/cover no-repeat;
|
|
}
|
.zhuangding1{
|
width: 100%;
|
height: 540.71px;
|
background: linear-gradient(90deg, rgba(140, 140, 140, 0.3) 0%, rgba(38, 38, 38, 0.42) 77.99%),
|
url('@/static/img/zhuangding1.png') center/cover no-repeat;
|
background-blend-mode: multiply;
|
}
|
.contentbg{
|
background: linear-gradient(114.84deg, rgba(14, 88, 209, 0.9) 35.46%, rgba(51, 109, 252, 0.7) 93.3%);
|
}
|
.zhuangding3{
|
width: 100%;
|
height: 540.71px;
|
background: linear-gradient(90deg, rgba(140, 140, 140, 0.3) 0%, rgba(38, 38, 38, 0.42) 77.99%),url('@/static/img/zhuangding3.png') center/cover no-repeat;
|
|
}
|
|
.lunzhuanbg {
|
position: relative;
|
z-index: 1;
|
}
|
.lunzhuanbg::before {
|
content: "";
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background: #F8FAFF url('@/static/img/lunzhuanbeijing.png') center/cover no-repeat;
|
opacity: 0.3; /* 背景色+背景图都30%透明 */
|
z-index: -1;
|
}
|
</style>
|
