<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>
