|
|
|
|
@ -1,41 +1,97 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="title">ENTERPRISE QUALIFICATION</div>
|
|
|
|
|
<div class="subTitle">企业资质</div>
|
|
|
|
|
<div class="bg">
|
|
|
|
|
<div class="list1">
|
|
|
|
|
<div class="item">国家级专精特新“小巨人”企业</div>
|
|
|
|
|
<div class="item">国家高新技术企业</div>
|
|
|
|
|
<div class="item">青岛市专精特新中小企业</div>
|
|
|
|
|
<div class="item">青岛市雏鹰企业</div>
|
|
|
|
|
<div class="item">科技型中小企业</div>
|
|
|
|
|
<div class="item">青岛市“百千万”工程千帆企业</div>
|
|
|
|
|
<div class="item">获批山东省中小企业创新能力提升工程项目</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="list2">
|
|
|
|
|
<div class="item">获批青岛第四批“人才特区”人才项目</div>
|
|
|
|
|
<div class="item">第四届“创业齐鲁 共赢未来”高层次人才创业大赛（创业企业类）优胜奖</div>
|
|
|
|
|
<div class="item">第十届中国创新创业大赛青岛赛区二等奖</div>
|
|
|
|
|
<div class="item">第十一届LT中国物流技术奖-创新应用奖</div>
|
|
|
|
|
<div class="item">通过ISO 9001质量管理体系认证</div>
|
|
|
|
|
<div class="item">轮胎用RFID电子标签产品获得ROSH认证</div>
|
|
|
|
|
<div class="item">轮胎用RFID电子标签自动化设备通过CE认证</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="title">ENTERPRISE QUALIFICATION</div>
|
|
|
|
|
<div class="subTitle">企业资质</div>
|
|
|
|
|
<div class="bg">
|
|
|
|
|
<div class="list1" ref="list1">
|
|
|
|
|
<div class="item" v-for="i in cardList1">{{ i.usInfoDetailTitle }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="list2" ref="list2">
|
|
|
|
|
<div class="item" v-for="i in cardList2">{{ i.usInfoDetailTitle }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="carousel">
|
|
|
|
|
<div class="swiper mySwiper">
|
|
|
|
|
<div class="swiper-wrapper">
|
|
|
|
|
<div class="swiper-slide" v-for="i in imgList">
|
|
|
|
|
<el-image
|
|
|
|
|
style="width: 100%;height: 100%"
|
|
|
|
|
:src="i.usInfoDetailPic"
|
|
|
|
|
fit="contain"></el-image>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="swiper-button-next"></div>
|
|
|
|
|
<div class="swiper-button-prev"></div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import banner from '@/assets/image/banner.png'
|
|
|
|
|
import Swiper from 'swiper';
|
|
|
|
|
import {Navigation, Autoplay} from 'swiper/modules'
|
|
|
|
|
import {getAboutUsInfoDetails} from "@/api/contactUs";
|
|
|
|
|
|
|
|
|
|
Swiper.use([Navigation, Autoplay])
|
|
|
|
|
export default {
|
|
|
|
|
name: 'ProductCenter',
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
banner,
|
|
|
|
|
name: 'ProductCenter',
|
|
|
|
|
props: ['aboutUsInfoId'],
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
banner,
|
|
|
|
|
imgList: [],
|
|
|
|
|
cardList1: [],
|
|
|
|
|
cardList2: []
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
async getData() {
|
|
|
|
|
await getAboutUsInfoDetails({
|
|
|
|
|
aboutUsInfoId: this.aboutUsInfoId
|
|
|
|
|
}).then(e => {
|
|
|
|
|
console.log(e)
|
|
|
|
|
this.imgList = e.data.filter(v => v.usInfoDetailPic)
|
|
|
|
|
let list = e.data.filter(v => v.usInfoDetailTitle)
|
|
|
|
|
let cardList = list.filter((v, k) => v.usInfoDetailTitle.length <= 25)
|
|
|
|
|
let longList = list.filter((v, k) => v.usInfoDetailTitle.length > 25)
|
|
|
|
|
this.cardList1 = cardList.filter((v, k) => k % 2 === 0)
|
|
|
|
|
this.cardList2 = cardList.filter((v, k) => k % 2 === 1)
|
|
|
|
|
if(this.cardList1.length<=this.cardList2.length){
|
|
|
|
|
this.cardList1 = this.cardList1.concat(longList.filter((v, k) => k % 2 === 0))
|
|
|
|
|
this.cardList2 = this.cardList2.concat(longList.filter((v, k) => k % 2 === 1))
|
|
|
|
|
}else{
|
|
|
|
|
this.cardList1 = this.cardList1.concat(longList.filter((v, k) => k % 2 === 1))
|
|
|
|
|
this.cardList2 = this.cardList2.concat(longList.filter((v, k) => k % 2 === 0))
|
|
|
|
|
}
|
|
|
|
|
this.$nextTick(()=>{
|
|
|
|
|
console.log(this.$refs.list1.offsetHeight)
|
|
|
|
|
console.log(this.$refs.list2.offsetHeight)
|
|
|
|
|
let height = (Math.max(this.$refs.list1.offsetHeight,this.$refs.list2.offsetHeight) - 2.2 * (window.innerWidth/100)) + 'px'
|
|
|
|
|
this.$refs.list1.style.height = height
|
|
|
|
|
this.$refs.list2.style.height = height
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
methods: {}
|
|
|
|
|
initSwiper() {
|
|
|
|
|
const swiper = new Swiper(".mySwiper", {
|
|
|
|
|
slidesPerView: 4,
|
|
|
|
|
spaceBetween: 30,
|
|
|
|
|
loop: true,
|
|
|
|
|
autoplay: true,
|
|
|
|
|
navigation: {
|
|
|
|
|
nextEl: ".swiper-button-next",
|
|
|
|
|
prevEl: ".swiper-button-prev",
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async mounted() {
|
|
|
|
|
await this.getData()
|
|
|
|
|
await this.$nextTick()
|
|
|
|
|
this.initSwiper()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
@ -79,7 +135,6 @@ export default {
|
|
|
|
|
top: 100%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
width: 24.8vw;
|
|
|
|
|
height: 20.8vw;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
transform: translate(calc(-100% - 2vw), -9.5vw);
|
|
|
|
|
@ -91,15 +146,17 @@ export default {
|
|
|
|
|
top: 100%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
width: 24.8vw;
|
|
|
|
|
height: 20.8vw;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
transform: translate(2vw, -9.5vw);
|
|
|
|
|
}
|
|
|
|
|
.list1,.list2{
|
|
|
|
|
|
|
|
|
|
.list1, .list2 {
|
|
|
|
|
text-align: left;
|
|
|
|
|
padding: 1.1vw 2.1vw ;
|
|
|
|
|
.item{
|
|
|
|
|
padding: 1.1vw 2.1vw;
|
|
|
|
|
height: auto;
|
|
|
|
|
|
|
|
|
|
.item {
|
|
|
|
|
width: 100%;
|
|
|
|
|
line-height: 2.5vw;
|
|
|
|
|
font-size: 1vw;
|
|
|
|
|
@ -108,4 +165,18 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.carousel {
|
|
|
|
|
width: 62vw;
|
|
|
|
|
margin: 32vw auto 0 auto;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.swiper {
|
|
|
|
|
width: 58vw;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.swiper-slide {
|
|
|
|
|
height: 30vw;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
夜笙歌
6 months ago