<template>
    <div class="hotTag">
        <div :style="{'text-align': direction}" class="hotTagTitle">{{title}}</div>
        <div class="hotTagItem" :key="index" v-for="(item,index) in allTags">
            <span class="itemName">{{item}}</span>
        </div>
    </div>
</template>

<script>
export default {
  name: 'YqyHotLabel',
  components: {
  },
  watch: {
  },
  props: {
        allTags: {
            type: Array,
            default:()=>{
                return ['a', '最新发布','在学人数', 'aaaaaa', '最新发布','在学人数', '最新发布','在学人数', '最新发布','在学人数', '最新发布']
            }
        },
        direction: {
            type: String,
            default: 'left'
        },
        title: {
            type: String,
            default: '热门标签'
        }
    },
  data () {
    return {
    }
  },
  mounted(){
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.hotTag{
    width: 100%;
    background-color: #fff;
    padding: px2rem(60px) px2rem(15px) px2rem(26px);
    margin-bottom: px2rem(6px);
}
.hotTagTitle{
    font-size: px2rem(18px);
    font-weight: bold;
}
.hotTagItem{
    margin: px2rem(10px) px2rem(15px) 0 0;
    display: inline-block;
    .itemName{
        background-color: RGBA(244, 247, 255, 1);
        color: RGBA(121, 148, 237, 1);
        padding: px2rem(2px) px2rem(6px);
        font-size: px2rem(13pt);
    }
}
</style>
