<template>
  <div class="service">
    <div class="service-hd">职业证书</div>
    <ul class="service-bd">
      <li v-for="(item, index) in data" :key="index">
        <app-link :data="item">
          <img :src="item.icon" class="icon" />
          <div class="text" v-html="item.text"></div>
        </app-link>
      </li>
    </ul>
  </div>
</template>
<script>
import AppLink from '@/components/Link'
export default {
  components: { AppLink },
  data() {
    return {
      data: [
        // {
        //   icon: 'https://webapp-pub.ezijing.com/www/pc/home/onlineEdu_01.png',
        //   text: this.$t('home.onlineEdu.service'),
        //   path: '/services/solution'
        // },
        {
          icon: 'https://webapp-pub.ezijing.com/www/pc/home/05.png',
          text: this.$t('home.college.x'),
          href: 'https://x.ezijing.com'
        },
        {
          icon: 'https://webapp-pub.ezijing.com/www/pc/home/onlineEdu_02.png',
          text: this.$t('home.onlineEdu.prp'),
          href: 'https://prp.ezijing.com/'
        },
        {
          icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_szcx.png',
          text: '高管培训<br/>数字创新管理',
          onClick: this.showTips
        }
      ]
    }
  },
  methods: {
    showTips() {
      this.$notify({ type: 'primary', message: '暂未开通，尽请期待' })
    }
  }
}
</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;
}
.service-bd {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  li {
    min-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>
