<template>
  <div class='tuitui-loading'>
      <div class='title'>Loading 内置19种</div>
      <div class='icon-wrap'>
        <div v-for='(item, index) in list' :key="index" class='item'>
          <div class='item-wrap'><BKLoading :name="item" :tips="item"></BKLoading></div>
        </div>
    </div>
  </div>
</template>
<script>
import BKLoading from '@/components/BKLoading'
export default {
  components: {
    BKLoading
  },
  data () {
    return {
      list: [
        'loader-01',
        'loader-02',
        'loader-03',
        'loader-04',
        'loader-05',
        'loader-06',
        'loader-07',
        'loader-08',
        'loader-09',
        'loader-10',
        'loader-11',
        'loader-12',
        'loader-13',
        'loader-14',
        'loader-15',
        'loader-16',
        'loader-17',
        'loader-18',
        'loader-19'
      ]
    }
  },
  mounted () {
    wx.setNavigationBarTitle({
      title: 'BKLoading 加载中'
    })
  }
}
</script>
<style scoped>
.tuitui-loading {
  padding: 40px;
}
.title {
  font-size: 26px;
  font-weight: 600;
  color: #ccc;
  margin-bottom: 20px;
  margin-top: 40px;
}
.item {
  height: 150px;
  border-bottom: solid 1px #eee;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  padding-left: 40px;
}
</style>
