<template>
  <div class='tuitui-tag-wrap'>
    <div class='tag-content'>
      <div class="title">矩形</div>
      <div class='item'>
        <BKTag v-bind='block'></BKTag>
      </div>
      <div class='item'>
        <BKTag v-bind='block1'></BKTag>
      </div>
      <div class='item'>
        <BKTag :text="text" :shape="'left-bottom-radius'"></BKTag>
      </div>
    </div>
    <div class='tag-content'>
      <div class="title">三角形</div>
      <div class='item'>
        <BKTag :text="text" :shape="'right-top-triangle'"></BKTag>
      </div>
      <div class='item'>
        <BKTag :text="text" :shape="'right-bottom-triangle'"></BKTag>
      </div>
      <div class='item'>
        <BKTag :text="text" :shape="'left-top-triangle'"></BKTag>
      </div>
      <div class='item'>
        <BKTag :text="text" :shape="'left-bottom-triangle'"></BKTag>
      </div>
    </div>
  </div>
</template>
<script>
import BKTag from '@/components/BKTag'
export default {
  components: {
    BKTag
  },
  data () {
    return {
      text: '荐',
      block: {
        text: '金融顾问',
        className: 'advisor',
        shape: 'block'
      },
      block1: {
        text: '推荐码123456',
        beforeIcon: '/static/images/tag-example.png',
        className: 'qrcode',
        shape: 'block'
      }
    }
  },
  mounted () {
    wx.setNavigationBarTitle({
      title: 'BKTag 标签'
    })
  },
  methods: {
  }
}
</script>
<style scoped>
.tuitui-tag-wrap {
  margin: 40px;
}
.title {
  font-size: 26px;
  color: #ccc;
  font-weight: 600;
}
.item {
  padding: 40px;
}
.tuitui-tag-wrap >>> .advisor {
  background-color: #F86139;
  color: #fff;
  height: 30px;
  font-size: 22px;
  margin-left: 12px;
}
.tuitui-tag-wrap >>> .qrcode {
  background:rgba(83,145,255,0.15);
  color: #006AF5;
  font-size: 22px;
}

/* 覆盖默认样式 */
.tuitui-tag-wrap >>> .recommend {
  border-color: transparent transparent #CCCCCC;
}
</style>
