<template>
  <div :style="[{ 'color': themeColor }, styleExtra]" class="hot">
    <i class="iconfont hot-icon" :class="icon"></i>
    <span class="hot-text">{{ text }}</span>
  </div>
</template>

<script>
/*
 * @Author: yangxin
 * @Date: 2021-09-23 17:35:06
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2021-11-22 16:45:59
 */
export default {
  name: "EnHot",
  props: {
    icon: {
      type: String,
      default: "icon-mobile-ui-fire-fill",
    },
    text: {
      type: [Number, String],
      default: "",
    },
    themeColor: {
      type: String,
      default: "#1C9FFF",
    },
    styleExtra: {
      type: Object,
      default: () => {},
    },
  },
};
</script>

<style lang="scss" scoped>
.hot {
  display: flex;
  font-size: j(8);
  &-icon {
    margin-right: j(4);
  }
  &-text {
  }
}
</style>
