<template>
  <div class="service">
    <div class="service-hd">教育服务</div>
    <ul class="service-bd">
      <li v-for="(item, index) in data" :key="index">
        <img :src="item.icon" class="icon" />
        <div class="text" v-html="item.text"></div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/e624ed7af7b49a9e04e7ac2ec95db7e1.png',
          text: '1+X',
          path: ''
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/e624ed7af7b49a9e04e7ac2ec95db7e1.png',
          text: '专业共建',
          path: ''
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/e624ed7af7b49a9e04e7ac2ec95db7e1.png',
          text: '校企合作',
          path: ''
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/e624ed7af7b49a9e04e7ac2ec95db7e1.png',
          text: '产业学院',
          path: ''
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.service {
  margin: 0.2rem 0.16rem;
}
.service-hd {
  padding-bottom: 0.1rem;
  font-size: 0.12rem;
  font-weight: bold;
  line-height: 1;
  color: #424242;
}
.service-bd {
  display: flex;
  li {
    width: 0.78rem;
    height: 1.1rem;
    background: #fff;
    cursor: pointer;
    img {
      display: block;
      width: 0.45rem;
      height: 0.45rem;
      margin: 0.17rem auto 0;
    }
    .text {
      margin-top: 0.07rem;
      font-size: 0.1rem;
      color: #666;
      text-align: center;
    }
  }
  li + li {
    margin-left: 0.1rem;
  }
}
</style>
