添加产品页面
parent
66e350d8f0
commit
2c80a642fc
@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<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',
|
||||
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
|
||||
})
|
||||
})
|
||||
},
|
||||
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>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@/style.less";
|
||||
|
||||
.content {
|
||||
width: 70vw;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-top: 4.2vw;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 2.5vw;
|
||||
letter-spacing: 2px;
|
||||
color: #fff6;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
margin-top: 0.4vw;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1.9vw;
|
||||
letter-spacing: 2px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 23.3vw;
|
||||
background-color: @standard-color;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
|
||||
.list1 {
|
||||
position: absolute;
|
||||
box-shadow: 0 0 3px #0002;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
width: 24.8vw;
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
transform: translate(calc(-100% - 2vw), -9.5vw);
|
||||
}
|
||||
|
||||
.list2 {
|
||||
position: absolute;
|
||||
box-shadow: 0 0 3px #0002;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
width: 24.8vw;
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
transform: translate(2vw, -9.5vw);
|
||||
}
|
||||
|
||||
.list1, .list2 {
|
||||
text-align: left;
|
||||
padding: 1.1vw 2.1vw;
|
||||
height: auto;
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
line-height: 2.5vw;
|
||||
font-size: 1vw;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.carousel {
|
||||
width: 62vw;
|
||||
margin: 32vw auto 0 auto;
|
||||
position: relative;
|
||||
|
||||
.swiper {
|
||||
width: 58vw;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
height: 30vw;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue