<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 ">
|
<div v-for="(item, index) in images" :key="index" :class="index == 1 ? 'pt-5 pb-16' : 'coreshop-bg-white pt-5 pb-16'">
|
<p class="font-['Source_Han_Sans_CN_VF'] font-bold text-[40px] leading-[50px] tracking-[10%] text-center align-middle capitalize pt-10" style="color:#000;">{{ item.name }}</p>
|
<p class="font-['Source_Han_Sans_SC'] font-normal text-[20px] leading-[38px] tracking-[20%] text-center capitalize text-[#696969] p-5">{{ item.text }}</p>
|
<div class="content flex flex-wrap flex-between" style="justify-content: space-between;">
|
<div v-for="(url, index) in item.urls" :key="index" class="w-[371.65px] h-[232.91px] group relative cursor-pointer overflow-hidden mt-12 mx-6 hover:shadow-[0px_6px_18px_0px_#054CB726] transition-shadow duration-300">
|
<el-image :src="url.url" style="width: 371.65px; height: 232.91px" class="mr-auto"></el-image>
|
<div class="absolute inset-0 bg-[#3E597D99]/30 transition-all duration-300 group-hover:opacity-0 "></div>
|
<span class="font-['Source_Han_Sans_SC'] font-bold text-[24px] leading-[38px] tracking-[10%] text-center capitalize text-[#fff] absolute inset-0 flex items-center justify-center transition-all duration-300 group-hover:opacity-0">{{ url.name }}</span>
|
</div>
|
</div>
|
</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 other1 from '@/static/img/other1.png'
|
import other2 from '@/static/img/other2.png'
|
import other3 from '@/static/img/other3.png'
|
import other4 from '@/static/img/other4.png'
|
import other5 from '@/static/img/other5.png'
|
import other6 from '@/static/img/other6.png'
|
import other7 from '@/static/img/other7.png'
|
import other8 from '@/static/img/other8.png'
|
import other9 from '@/static/img/other9.png'
|
import other10 from '@/static/img/other10.png'
|
import other11 from '@/static/img/other11.png'
|
import other12 from '@/static/img/other12.png'
|
const data = reactive({
|
activeName: "1",
|
gettab4: {}
|
})
|
const images = ref([{
|
urls: [
|
{
|
name: '涉密文件',
|
url: other1,
|
},
|
{
|
name: '手提袋',
|
url: other2,
|
},
|
{
|
name: '折页',
|
url: other3,
|
},
|
{
|
name: '笔记本',
|
url: other4,
|
},
|
{
|
name: '卡片',
|
url: other5,
|
},
|
{
|
name: '资质证书',
|
url: other6,
|
},
|
{
|
name: '毕业证书',
|
url: other7,
|
},
|
{
|
name: '军事地图',
|
url: other8,
|
},
|
{
|
name: '财务单据',
|
url: other9,
|
},
|
{
|
name: '奖状',
|
url: other10,
|
},
|
{
|
name: '教辅',
|
url: other11,
|
},
|
{
|
name: '……',
|
url: other12,
|
},
|
],
|
name: "其他",
|
text: '各种资料设计、照排、印刷；资料档案装订；涉密文件资料销毁……'
|
},
|
])
|
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/usbanner.png') center/cover no-repeat;
|
}
|
</style>
|
