<template>
|
<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>
|
<div class="w-100 chuany-font14 chuany-text-black coreshop-bg-white">
|
<p class="chuany-text-center chuany-text-bold chuany-font38 pt-14" style="color:#000;">物流配送</p>
|
<div class="w-[100%] flex justify-center items-center pt-14 pb-20 ">
|
<el-image style="" :src="wuliu" :fit="fit"></el-image>
|
<!-- <div
|
class="w-[358.5px] h-[221.5px] rounded-[20px] bg-[#F3F3F3] text-[#000] pl-10 pt-8 hover:bg-[#0E61CE] hover:text-[#fff] cursor-pointer">
|
<i class="iconfont icon-truck text-6xl my-icon" style="font-size: 80px;"></i>
|
<p
|
class="font-['Source_Han_Sans_SC'] font-medium text-[28px] leading-[38px] tracking-[4%] text-center capitalize mt-10 ">
|
自有物流配送团队</p>
|
</div>
|
<div
|
class="w-[358.5px] h-[221.5px] rounded-[20px] bg-[#F3F3F3] text-[#000] pl-10 pt-8 hover:bg-[#0E61CE] hover:text-[#fff] cursor-pointer">
|
<i class="iconfont icon-huoche text-6xl" style="font-size: 80px;"></i>
|
|
<p
|
class="font-['Source_Han_Sans_SC'] font-medium text-[28px] leading-[38px] tracking-[4%] text-center capitalize pt-10 ">
|
6辆涉密送货专车</p>
|
</div>
|
<div
|
class="w-[358.5px] h-[221.5px] rounded-[20px] bg-[#F3F3F3] text-[#000] pl-10 pt-8 hover:bg-[#0E61CE] hover:text-[#fff] cursor-pointer">
|
<i class="iconfont icon-safe text-6xl" style="font-size: 80px;"></i>
|
<p
|
class="font-['Source_Han_Sans_SC'] font-medium text-[28px] leading-[38px] tracking-[4%] capitalize text-center pt-10 ">
|
确保准时安全送达</p>
|
</div> -->
|
</div>
|
</div>
|
<div class="bg-[#F8F9FB] pt-24 relative">
|
<div class="content pb-14">
|
<p class="chuany-text-bold chuany-font28">服务承诺</p>
|
<div class="flex justify-between">
|
<div class="font-['Source_Han_Sans_SC'] font-medium text-[24px] leading-[100px] tracking-[4%] text-justify capitalize">
|
<p class=" cursor-pointer hover:text-[#0E61CE]"><span class="font-['Figtree'] font-medium text-[36px] leading-[100px] tracking-[4%] text-justify capitalize pr-5">01</span>专人接单、跟单</p>
|
<p class=" cursor-pointer hover:text-[#0E61CE]"><span class="font-['Figtree'] font-medium text-[36px] leading-[100px] tracking-[4%] text-justify capitalize pr-5">03</span>全部产品由成都市最好的印前、印刷、装订设备生产</p>
|
<p class=" cursor-pointer hover:text-[#0E61CE]"><span class="font-['Figtree'] font-medium text-[36px] leading-[100px] tracking-[4%] text-justify capitalize pr-5">02</span>按时交货</p>
|
<p class=" cursor-pointer hover:text-[#0E61CE]"><span class="font-['Figtree'] font-medium text-[36px] leading-[100px] tracking-[4%] text-justify capitalize pr-5">04</span>印刷、装订质量无可挑剔</p>
|
<p class=" cursor-pointer hover:text-[#0E61CE]"><span class="font-['Figtree'] font-medium text-[36px] leading-[100px] tracking-[4%] text-justify capitalize pr-5">05</span>为客户提供政府采购招投标咨询服务</p>
|
<p class=" cursor-pointer hover:text-[#0E61CE]"><span class="font-['Figtree'] font-medium text-[36px] leading-[100px] tracking-[4%] text-justify capitalize pr-5">06</span>协助客户需求论证、编制采购文件</p>
|
</div>
|
<el-image style="width: 480px; height: 747px" :src="promise"></el-image>
|
</div>
|
</div>
|
<div class="w-[100%] float-left bg-[#0E61CE] h-[125px] absolute bottom-0"></div>
|
</div>
|
</template>
|
|
<script setup>
|
import usbanner from '@/static/img/usbanner.png'
|
import contentimg from '@/static/img/content-img.png'
|
const { $meth } = getCurrentInstance().appContext.config.globalProperties
|
import { articleInfo } from '@/api/text.js'
|
const { $route } = getCurrentInstance().appContext.config.globalProperties
|
import $store from "@/store/index.js";
|
import wuliu from '@/static/img/wuliu.png'
|
|
import promise from '@/static/img/promise.png'
|
|
const data = reactive({
|
activeName: "1",
|
gettab4: {}
|
})
|
|
onMounted(() => {
|
|
articleInfos(1)
|
});
|
const handleClick = (el) => {//tab切换
|
console.log("el:", el.props.name)
|
data.gettab4 = {}
|
if (el.props.name == 1 || el.props.name == 4) {
|
articleInfos(el.props.name)
|
}
|
|
}
|
const articleInfos = (el) => {
|
articleInfo({ id: el }).then(res => {
|
if (res.status == true) {
|
data.gettab4 = res.data.contentBody
|
|
//
|
} else {
|
$message({
|
message: res.msg,
|
grouping: true,
|
type: 'error',
|
})
|
}
|
})
|
|
}
|
</script>
|
<style scoped>
|
.demo-tabs>.el-tabs__content {
|
padding: 32px;
|
color: #6b778c;
|
font-size: 32px;
|
font-weight: 600;
|
}
|
|
.jianjietab p {
|
margin-top: 15px;
|
margin-bottom: 15px;
|
line-height: 2.5em;
|
}
|
|
.phonetab {
|
padding: 100px;
|
}
|
|
.bannerbg {
|
background:
|
linear-gradient(90deg, #0e61ce 10%, rgba(108, 160, 255, 0.5) 100%),
|
url('@/static/img/qualification.png') center/cover no-repeat;
|
}
|
|
.my-icon {
|
cursor: pointer;
|
}
|
|
.my-icon:hover {
|
color: #fff;
|
/* 滑过变蓝色，自定义颜色值 */
|
}
|
</style>
|
