<template>
  <div class="service">
    <div class="service-hd">{{ $t('home.college.title') }}</div>
    <ul class="service-bd">
      <li v-for="(item, index) in data" :key="index">
        <app-link :item="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/01.png',
          text: this.$t('home.college.corePower'), 
          path: '/services/college'
        },
        {
          icon: 'https://webapp-pub.ezijing.com/www/pc/home/02.png',
          text: this.$t('home.college.program'),
          path: '/services/major'
        },
        {
          icon: 'https://webapp-pub.ezijing.com/www/pc/home/03.png',
          text: this.$t('home.college.saas'),
          href: 'https://x-learning.ezijing.com'
        },
        {
          icon: 'https://webapp-pub.ezijing.com/www/pc/home/04.png',
          text: this.$t('home.college.internship'),
          path: '/services/employment'
        },
        {
          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/06.png',
          text: this.$t('home.college.cert'),
          path: '/services/job'
        }
      ]
    }
  },
  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>
