一些改动

zhangwei

2025-12-22 4a5993fb232124830dcc964fc5525896fdea583e

 src/views/equipment/index.vue

@@ -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 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>
                    <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>
@@ -64,24 +81,32 @@
                    </div>
                </div>
           </div>
           <div class="content flex justify-center items-center px-16 py-16">
            <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 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="lunzhuanbg py-16">
                <div class="content  flex justify-between 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 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>
@@ -94,10 +119,13 @@
        </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="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>
@@ -107,28 +135,47 @@
                    </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">
            <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>{{ item.name }}</p>
                            <p class="pt-2">{{ 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">
                    <!-- <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>
                    </p> -->
                </div>
                <div class="zhuangding2">


                    <!-- <el-image class="w-full" :src="zhuangding2" ></el-image> -->

                </div>
           </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="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>
@@ -139,13 +186,17 @@
           </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 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 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>
@@ -169,11 +220,12 @@
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 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'
@@ -280,11 +332,13 @@
    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;
@@ -292,9 +346,20 @@
    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;
@@ -306,6 +371,7 @@
    position: relative;
    z-index: 1;
}

.lunzhuanbg::before {
    content: "";
    position: absolute;
@@ -314,7 +380,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>