<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="">
|
<div class="bg-white pt-16 pb-1">
|
<p class="font-['Source_Code_Pro'] font-semibold text-[36px] align-middle capitalize text-center mt-6">数码印刷</p>
|
<div
|
class="font-['Source_Han_Sans_SC'] font-normal text-[24px] tracking-[4%] capitalize text-[#696969] my-14 text-center">
|
<p>自有数码印刷设备，打样安全保密急件立等可取</p>
|
</div>
|
</div>
|
<div class="content flex justify-between items-center py-16">
|
<div class="w-[620px] h-[527.12px] bg-white flex justify-center items-center">
|
<el-image style="width: 511.13px; height: 527.12px" :src="yinshuashebei11" ></el-image>
|
</div>
|
<div class="w-[620px] h-[527.12px] bg-white flex justify-center items-center">
|
<el-image style="width: 511.13px; height: 527.12px" :src="yinshuashebei1"></el-image>
|
</div>
|
</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-between items-center py-16">
|
<el-image style="width: 658.09px; height: 466.33px" :src="heibai"></el-image>
|
<div class="mx-8">
|
<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 py-16">
|
<div class="content flex justify-between items-center ">
|
<div class=" mx-8">
|
<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 class="content flex justify-between items-center py-16">
|
<el-image style="width: 658.09px; height: 466.33px" :src="lunzhuan1"></el-image>
|
<div class="mx-8">
|
<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>印刷面积：880mm*546mm</p>
|
<p>纸张范围：铜版纸、轻涂纸、双胶纸、新闻纸</p>
|
<p>折页开本：8开、16开、0.5印张、8开单页</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-if="data.tab == 3" class="bg-white ">
|
<div class="zhuangding1">
|
<div class="content">
|
<div class=" contentbg w-[512.66px] h-[540.71px] float-right pl-16">
|
<p
|
class="font-['Source_Code_Pro'] font-semibold text-[36px] align-middle capitalize py-16 text-white">
|
西南地区独家引进<br>全新马天尼<br>全自动胶装联动线<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="h-[1083.56px] relative bg-[#f4f9fb]">
|
<div class="h-[40%]">
|
<p
|
class="font-['Source_Code_Pro'] font-semibold text-[36px] align-middle capitalize text-center pt-16">
|
西南地区唯一一台</p>
|
<p
|
class="font-['Source_Code_Pro'] font-semibold text-[36px] align-middle capitalize text-center pb-12">
|
马天尼霹雳马MC全自动骑订联动线</p>
|
<p
|
class="font-['Source_Han_Sans_SC'] font-normal text-[22px] leading-[41px] tracking-[0%] capitalize text-[#333] text-center pb-12">
|
装订速度：14,000 本/小时</p>
|
<div class="content 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 class="pt-2">{{ item.name }}</p>
|
</div>
|
</div>
|
<!-- <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="zhuangding2">
|
|
|
<!-- <el-image class="w-full" :src="zhuangding2" ></el-image> -->
|
|
</div>
|
</div>
|
<div class="zhuangding3">
|
<div class="content">
|
<div class=" contentbg w-[512.66px] h-[540.71px] 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_Code_Pro'] font-semibold text-[36px] align-middle capitalize text-center py-12">
|
所有工序，无需外协，川印都能完成</p>
|
<div class="content flex flex-wrap justify-between pb-8">
|
<div v-for="(item, index) in arrayList" class=" pb-6 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 yinshuashebei11 from '@/static/img/yinshuashebei-1.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 lunzhuan1 from '@/static/img/lunzhuan1.png'
|
import zhuangding2 from '@/static/img/zhuangding-2.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%);
|
}
|
|
.zhuangding2 {
|
width: 100%;
|
height: 60%;
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 86.6%, rgba(255, 255, 255, 0.5) 91.77%, #FFFFFF 97.65%),
|
url('@/static/img/zhuangding2.png') bottom left / cover no-repeat;
|
/* contain 会等比缩放图片，优先让宽度适配容器宽度，保证图片完整显示 */
|
|
}
|
|
.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>
|
