<template>
  <div class="service">
    <div class="service-hd">{{ $t('menu.services') }}</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://zws-imgs-pub.ezijing.com/static/public/3118a654ec7f92a52b7d04f2f1f5989a.png',
          text: '1+X',
          href: 'https://x.ezijing.com'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/7bea5e01e4e4c92e104bb1d73d313500.png',
          text: '专业共建',
          path: '/services/major'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/6db512b8b2b4501651e6f9bc520d7379.png',
          text: '校企合作',
          onClick: this.showTips
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/0e5522064d9070290b3d541a485d469f.png',
          text: '产业学院',
          path: '/services/college'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/0912f621abe188ccc84df6520a8fecf9.png',
          text: '双高建设',
          onClick: this.showTips
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/6cf5b6010dd7d35a80d4acc270db8a86.png',
          text: '在线教育<br />解决方案',
          onClick: this.showTips
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/9603456c7edb101ec5469f92e9e21553.png',
          text: '更多',
          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>
