<template>
  <ui-shadow-box class="bg-white pl-20px pr-8px pt-20px pb-10px">
    <div class="mb-8.5px font-thin text-size-20px">{{ $t("热门导航") }}</div>

    <ui-devider></ui-devider>
    <div class="h-12.5px"></div>
    <div class="flex flex-wrap">
<!--      <div class="tag selected">热门标签</div>-->
      <div v-for="(item, index) in labels" @click="handleGoTo(item)" :key="index" class="tag hover:bg-[#1B3E28] hover:text-[white]">{{item.name}}</div>
    </div>
  </ui-shadow-box>
</template>

<script>
export default {
  data(){
     return {
        labels:[]
     }
  },
    methods:{
        handleGoTo(item){
             this.$router.push('/search?keywords=' + item.name)
        }
    },
  async created() {
      let resp = await  this.$http.post(this.$api.cms.labels);
      if(resp.data.status === 200){
         this.labels = resp.data.data.cmsLabels;
      }
  }
};
</script>
<style>
.tag {
  @apply text-primary h-24px text-size-14px font-normal rounded-100px min-w-75px px-10px bg-[#f7f7f7] flex items-center mr-30px mt-10px cursor-pointer;
}
.tag.selected {
  @apply bg-primary text-white;
}
</style>
