<template>
  <div class='icon'>
    <div class='in-icon'>
      <div class='title'>内置图标</div>
      <div class='icon-wrap'>
        <div v-for='(item, index) in list' :key="index" class='icon-item'>
          <div class='icon-item-wrap'><BKIcon :name="item"></BKIcon></div>
          <div class='icon-title'>{{item}}</div>
        </div>
      </div>
    </div>
    <div class='out-icon'>
      <div class='title'>外链图片</div>
      <div class='icon-wrap'>
        <div class='icon-wrap'>
        <div v-for='(item, index) in outUrl' :key="index" class='icon-item'>
          <div class='icon-item-wrap'><BKIcon :url="item"></BKIcon></div>
          <!-- <div class='icon-title'>{{item}}</div> -->
        </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BKIcon from '@/components/BKIcon'
export default {
  components: {
    BKIcon
  },
  data () {
    return {
      list: [
        'arrow-right',
        'arrow-left',
        'arrow-down',
        'arrow-up',
        'cart',
        'black-share',
        'default-avatar',
        'error',
        'failure',
        'like',
        'location-white',
        'location',
        'mail',
        'menu-black',
        'menu',
        'money',
        'phone',
        'plus',
        'refresh',
        'search',
        'setting',
        'star',
        'success',
        'user'
      ],
      outUrl: [
        'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1827451614,1788793728&fm=26&gp=0.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566363747779&di=572fb29cff331762df0e5ba620704544&imgtype=0&src=http%3A%2F%2Fs1.sinaimg.cn%2Fmw690%2Fbb8e9d0egx6DjayfPIA40%26690',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566363772396&di=89674eec7e32b7183b041bdcce0c881b&imgtype=0&src=http%3A%2F%2Fimg4.cache.netease.com%2Fent%2F2015%2F12%2F4%2F20151204110611ff51c.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566363802755&di=70710708c9d7375a9b7939fec2717173&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3078879214%2C3600206816%26fm%3D214%26gp%3D0.jpg'
      ]
    }
  },
  mounted () {
    wx.setNavigationBarTitle({
      title: 'BKIcon 图标'
    })
  }
}
</script>
<style scoped>
.icon {
  padding: 40px;
}
.title {
  font-size: 26px;
  font-weight: 600;
  color: #ccc;
  margin-bottom: 20px;
  margin-top: 40px;
}
.icon-wrap {
  padding-bottom: 60px;
  display: flex;
}
.icon-wrap {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.icon-item {
  justify-items: center;
  align-items: center;
  flex-direction: column;
  display: flex;
  width: 155px;
  height: 90px;
  margin-top: 40px;
}
.icon-item-wrap {
  width: 60px;
  height: 60px;
}
.icon-title {
  margin-top: 20px;
  font-size: 22px;
  color: #ccc;
}
</style>
