<template>
  <div>
    <img class="info" v-if="isMobile" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/rzxx-mary.png">
    <div v-else class="info-content-box">
      <div class="title">
        <div class="line"></div>
        <div class="name">认证信息</div>
        <div class="line"></div>
      </div>
      <ul class="content-mian">
        <li v-for="(item, index) in data" :key="index">
          <div class="logo">
            <img :src="item.img" class="img">
          </div>
          <img :src="item.text" class="text">
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'schoolRanking',
  data() {
    return {
      data: [
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_info_i1.png',
          text: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_info_t1.png'
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_info_i2.png',
          text: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_info_t2.png'
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_info_i3.png',
          text: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_info_t3.png'
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_info_i4.png',
          text: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_info_t4.png'
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_info_i5.png',
          text: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_info_t5.png'
        }
      ]
    }
  },
  computed: {
    isMobile() {
      return this.$store.state.isMobile
    }
  }
}
</script>
<style lang="scss" scoped>
.info{
  width: 100%;
  display: block;
}
.info-content-box{
  min-width: 1200px;
  padding-bottom: 150px;
  margin-top: 100px;
  width: 100%;
  background: rgb(163,0,22);
  .title{
    width: 996px;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    padding: 118px 0 119px;
    .line{
      width: 369px;
      height: 1px;
      background: #FFFFFF;
    }
    .name{
      font-size: 36px;
      font-weight: bold;
      line-height: 100%;
      color: #FFFFFF;
    }
  }
  .content-mian{
    width: 1014px;
    margin: 0 auto;
    display: flex;
    li{
      width: 190px;
      height: 229px;
      background: #fff;
      border-radius: 20px;
      margin-left: 16px;
      &:nth-child(1){
        margin-left: 0;
      }
      &:nth-child(1){
        .img{
          width: 81px;
          height: 66px;
        }
        .text{
          width: 148px;
          height: 69px;
        }
      }
      &:nth-child(2){
        .img{
          width: 152px;
          height: 61px;
        }
        .text{
          width: 184px;
          height: 69px;
        }
      }
      &:nth-child(3){
        .img{
          width: 79px;
          height: 82px;
        }
        .text{
          width: 172px;
          height: 65px;
        }
      }
      &:nth-child(4){
        .img{
          width: 72px;
          height: 91px;
        }
        .text{
          width: 166px;
          height: 69px;
        }
      }
      &:nth-child(5){
        .img{
          width: 84px;
          height: 84px;
        }
        .text{
          width: 134px;
          height: 67px;
        }
      }
      .logo{
        height: 91px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 22px;
        margin-bottom: 27px;
        .img{
          display: block;
        }
      }
      .text{
        display: block;
        margin: 0 auto;
        
      }
    }
  }
}
</style>
