<template>
  <div class="a-introduce">
    <ul class="introduce">
      <li class="introduce-warp">
        <i-status></i-status>
      </li>
      <li class="introduce-warp">
        <i-resources></i-resources>
      </li>
      <li class="introduce-warp">
        <i-platform></i-platform>
      </li>
      <li class="introduce-warp">
        <i-recommend></i-recommend>
      </li>
      <li class="introduce-warp">
        <i-show></i-show>
      </li>
      <li class="introduce-warp">
        <i-media></i-media>
      </li>
    </ul>
  </div>
</template>

<script>
import IStatus from 'components/a-introduce/i-status'
import IResources from 'components/a-introduce/i-resources'
import IPlatform from 'components/a-introduce/i-platform'
import IRecommend from 'components/a-introduce/i-recommend'
import IShow from 'components/a-introduce/i-show'
import IMedia from 'components/a-introduce/i-media'

export default {
  name: 'app',
  components: {
    IStatus,
    IResources,
    IPlatform,
    IRecommend,
    IShow,
    IMedia
  }
}

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.a-introduce
  background-color: #fff
  min-width: 1000px
  .introduce-warp
    min-width: 1000px
    overflow: hidden
    text-align: center
    margin: 0 auto
    &:nth-child(even)
      background-color: #f3f5f8
</style>
