129 lines
2.7 KiB
Vue
129 lines
2.7 KiB
Vue
<template>
|
|
<div class="pageroot" id="partnersroot" style="background-color: white;">
|
|
<div class="normalcontentdiv" id="ptntitle">
|
|
<span class="normalcontenttitle">
|
|
与30+合作伙伴共创
|
|
</span>
|
|
</div>
|
|
<div id="partnerscontent">
|
|
<div v-for="item in logos"
|
|
class="partneritempanel" id="ptn01">
|
|
<div class="partnerlogodiv">
|
|
<img :src="`${this.$axios.defaults.baseURL}${item.url}`" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Partners",
|
|
data(){
|
|
return{
|
|
logos:[]
|
|
}
|
|
},
|
|
methods: {
|
|
init_logos:function() {
|
|
let reqarg='/api/apipartner?populate=*';
|
|
this.$axios.get(reqarg)
|
|
.then(response => {
|
|
const resp = response.data;
|
|
if (Array.isArray(resp.data.icons)) {
|
|
this.logos = resp.data.icons;
|
|
if (this.logos.length === 0) {
|
|
console.error("返回的数组为空");
|
|
}
|
|
} else {
|
|
console.error("返回的数据不是数组");
|
|
this.logos = [];
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
this.logos = [];
|
|
});
|
|
}
|
|
},
|
|
mounted() {
|
|
this.init_logos();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "src/publicstyle.scss";
|
|
|
|
#partnerscontent{
|
|
display: grid;
|
|
@include media-breakpoint-between(xs, md){
|
|
margin-left: 32px;
|
|
margin-right: 32px;
|
|
margin-top: 24px;
|
|
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: repeat(7, 1fr);
|
|
}
|
|
@include media-breakpoint-between(md,xl){
|
|
width: 610px;
|
|
height: 374.38px;
|
|
margin-top: 95px;
|
|
margin-left: 100px;
|
|
margin-right: 100px;
|
|
|
|
grid-template-columns: repeat(5, 1fr);
|
|
grid-template-rows: repeat(4, 1fr);
|
|
}
|
|
@include media-breakpoint-up(xl){
|
|
margin-left: 289px;
|
|
margin-right: 289px;
|
|
margin-top: 95px;
|
|
|
|
grid-template-columns: repeat(5, 1fr);
|
|
grid-template-rows: repeat(4, 1fr);
|
|
}
|
|
}
|
|
#partnersroot{
|
|
@include media-breakpoint-between(xs, md){
|
|
padding-bottom: 64px;
|
|
}
|
|
@include media-breakpoint-up(md){
|
|
padding-bottom: 217px;
|
|
}
|
|
}
|
|
|
|
.partneritempanel{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-content: center;
|
|
@include media-breakpoint-between(xs, md){
|
|
padding-top: 9px;
|
|
padding-bottom: 9px;
|
|
}
|
|
@include media-breakpoint-up(md){
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
}
|
|
}
|
|
|
|
.partnerlogodiv{
|
|
aspect-ratio: 2.5;
|
|
@include media-breakpoint-between(xs, md){
|
|
max-width: 95px;
|
|
max-height: 38px;
|
|
}
|
|
@include media-breakpoint-up(md){
|
|
max-width: 200px;
|
|
max-height: 80px;
|
|
}
|
|
}
|
|
|
|
.partnerlogodiv img{
|
|
object-fit: fill;
|
|
width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
</style>
|