<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="relative mt-16 pt-16">
|
<div class="content z-50 relative flex justify-between overflow-visible pb-[100px]">
|
<div class="w-[40%] flex-shrink-0 flex flex-wrap justify-between">
|
<p
|
class="font-['Source_Code_Pro'] font-semibold text-[36px] leading-[50px] tracking-[10%] align-middle capitalize mt-[100px]">
|
专业纸张贸易，品质之选</p>
|
<p class="font-['Source_Han_Sans_SC'] font-normal text-[20px] leading-[40.8px] tracking-[20%] capitalize my-16">
|
我们致力于为印刷、包装、办公及工业领域提<br>供高品质、多品种的纸张解决方案，凭借稳定<br>的供应链和专业的服务，已成为行业内值得信<br>赖的合作伙伴。</p>
|
<el-row :gutter="20">
|
<el-col :span="12"><el-button plain class="py-2 px-4 text-base w-[80%]" size="large">
|
产品种类齐全
|
</el-button></el-col>
|
<el-col :span="12">
|
<el-button plain class="py-2 px-4 text-base w-[80%]" size="large">
|
品质严格把控
|
</el-button>
|
</el-col>
|
<el-col :span="12">
|
<el-button plain class="py-2 px-4 text-base w-[80%]" size="large">
|
定制化服务
|
</el-button>
|
</el-col>
|
<el-col :span="12">
|
<el-button plain class="py-2 px-4 text-base w-[80%]" size="large">
|
高效性供应支持
|
</el-button>
|
</el-col>
|
</el-row>
|
</div>
|
<el-image style="width: 967.96px; height: 623.49px" :src="zhizhang1" class="flex-shrink-0"></el-image>
|
|
|
</div>
|
|
<div class="zhizhang absolute bottom-0 z-0">
|
|
</div>
|
</div>
|
<div>
|
<div class="content my-16">
|
<p
|
class="font-['Source_Code_Pro'] font-semibold text-[36px] leading-[50px] tracking-[10%] align-middle capitalize text-center">
|
您需要的纸张，我们仓库里都有</p>
|
<div class="flex justify-between my-16">
|
<el-image style="width: 386.38px; height: 302.77px" :src="zhizhang2"></el-image>
|
<el-image style="width: 386.38px; height: 302.77px" :src="zhizhang3"></el-image>
|
<el-image style="width: 386.38px; height: 302.77px" :src="zhizhang4"></el-image>
|
</div>
|
</div>
|
</div>
|
<div class="chanpingbg">
|
<div class="content">
|
<p
|
class="font-['Source_Code_Pro'] font-semibold text-[36px] leading-[50px] tracking-[10%] align-middle capitalize my-16">
|
产品展示</p>
|
<div class="flex justify-between">
|
<div
|
class="bg-white flex-1 h-[394.36px] font-['Source_Han_Sans_SC'] font-normal text-xl leading-[40.8px] tracking-[20%] capitalize flex justify-center items-center">
|
严选高品质纸张原料，纸质稳定、<br>纤维均匀，适配多种印刷工艺，确<br>保成品效果一致、清晰、可靠。</div>
|
<el-image style="width: 707.21px; height: 394.36px" :src="zhizhang5"></el-image>
|
</div>
|
</div>
|
</div>
|
<div class="w-100 chuany-font14 chuany-text-black ">
|
|
</div>
|
</template>
|
|
<script setup>
|
import zhizhang1 from '@/static/img/zhizhang1.png'
|
import zhizhang2 from '@/static/img/zhizhang2.png'
|
import zhizhang3 from '@/static/img/zhizhang3.png'
|
import zhizhang4 from '@/static/img/zhizhang4.png'
|
import zhizhang5 from '@/static/img/zhizhang5.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";
|
|
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>
|
.zhizhang {
|
width: 100%;
|
height: 527.36376953125px;
|
background: rgba(217, 217, 217, 0.8) url('@/static/img/zhizhangbg.png') center/cover no-repeat;
|
background-blend-mode: screen;
|
}
|
|
.chanpingbg {
|
width: 100%;
|
height: 681.21px;
|
background: rgba(217, 217, 217, 0.8) url('@/static/img/zhizhangbg1.png') center/cover no-repeat;
|
background-blend-mode: screen;
|
}
|
|
.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/usbanner.png') center/cover no-repeat;
|
}
|
</style>
|
