-

zhangwei

2026-04-08 ef5050890cf37409628df47e9c820ac345434209

 src/views/equipment/index.vue

@@ -4,7 +4,7 @@
            <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>
                <p>顶尖设备，卓越品质，满足您的一切印刷需求</p>
            </div>
        </div>
        <!-- <el-image class="chuany-width100" :src="data.joinbanner"></el-image> -->
@@ -28,34 +28,51 @@
                <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 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>
                <el-image style="width: 511.13px; height: 527.12px" :src="yinshuashebei1"></el-image>
           </div>
           <div class="shebeipeizhi2 h-[997.73px]">
            </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>
                    <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">
                        <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"> 
                        <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>
@@ -63,41 +80,68 @@
                        </div>
                    </div>
                </div>
           </div>
           <div class="content flex justify-center items-center px-16 py-16">
            </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-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>
                <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 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 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>
            <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 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">
            <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>
@@ -106,29 +150,48 @@
                        </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 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
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        印刷速度：14,000 本/小时
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        印刷纸张克重：0.2 - 0.4 mm
                    </p> -->
                </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
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    印刷速度：14,000 本/小时
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    印刷纸张克重：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">
                <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>最大装订尺寸&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;315×360mm</p>
                            <p>最小装订尺寸&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;210×140mm</p>
                            <p>最大装订帖数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6帖+封面</p>
@@ -136,24 +199,29 @@
                        </div>
                    </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 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-4 hover:text-[#0D61CE] cursor-pointer mx-6 ">
                        <el-image 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 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
const { $route, $router } = getCurrentInstance().appContext.config.globalProperties

import $store from "@/store/index.js";
import equipment1 from '@/static/img/equipment1.png'
@@ -168,11 +236,13 @@
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 zhuangding2 from '@/static/img/zhuangding2.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'
@@ -183,64 +253,65 @@
    tab: 1,
})
const images = [
     {
        name:'智控快设',
        url:Frame4
    {
        name: '智控快设',
        url: Frame4
    },
    {
        name:'高效高速',
        url:Frame
        name: '高效高速',
        url: Frame
    },
    {
        name:'裁切精准',
        url:Frame1
        name: '裁切精准',
        url: Frame1
    },
    {
        name:'高度自动',
        url:Frame2
        name: '高度自动',
        url: Frame2
    },
    {
        name:'操作简易',
        url:Frame3
        name: '操作简易',
        url: Frame3
    },
]
const arrayList = [
    {
        name:'模切机',
        url:moqieji
        name: '进口MBO全自动折页机',
        url: jinkouMBO
    },
    {
        name:'勒口机',
        url:lekouji
        name: '进口阿斯特全自动锁线机',
        url: suoxianji
    },
    {
        name:'塑封机',
        url:sufengji
        name: '模切机',
        url: moqieji
    },
    {
        name:'粘页机',
        url:zhanyeji
        name: '勒口机',
        url: lekouji
    },
    {
        name:'粘信封机',
        url:zhanxinfeng
        name: '塑封机',
        url: sufengji
    },
    {
        name:'烫金机',
        url:tangjinji
        name: '粘页机',
        url: zhanyeji
    },
    // {
    //     name:'粘信封机',
    //     url:zhanxinfeng
    // },
    {
        name: '烫金机',
        url: tangjinji
    },
    {
        name:'覆膜机',
        url:fumoji
        name: '覆膜机',
        url: fumoji
    },
    {
        name:'进口MBO全自动折页机',
        url:jinkouMBO
    },
    {
        name:'进口阿斯特全自动锁线机',
        url:suoxianji
    },

]
const tabchange = (el) => {
    $router.push({
@@ -270,7 +341,7 @@
}

.bannerbg {
     background: linear-gradient(90deg, rgba(14, 97, 206, 0.9) 30%, rgba(108, 160, 255, 0.18) 100%),
    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;
}

@@ -278,25 +349,38 @@
    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{

.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;
        url('@/static/img/yinshuapeizhi2.png') center/cover no-repeat;

}
.zhuangding1{

.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;
        url('@/static/img/zhuangding1.png') center/cover no-repeat;
    background-blend-mode: multiply;
}
.contentbg{

.contentbg {
    background: linear-gradient(114.84deg, rgba(14, 88, 209, 0.9) 35.46%, rgba(51, 109, 252, 0.7) 93.3%);
}
.zhuangding3{

.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;
    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;

}

@@ -304,6 +388,7 @@
    position: relative;
    z-index: 1;
}

.lunzhuanbg::before {
    content: "";
    position: absolute;
@@ -312,7 +397,8 @@
    width: 100%;
    height: 100%;
    background: #F8FAFF url('@/static/img/lunzhuanbeijing.png') center/cover no-repeat;
    opacity: 0.3; /* 背景色+背景图都30%透明 */
    opacity: 0.3;
    /* 背景色+背景图都30%透明 */
    z-index: -1;
}
</style>