<template>
  <div
    class="zr-tips"
    :class="[
        type ? `el-link el-link--${type}` : '#ff3030'
    ]"
  >
    <span class="zr-tips-star" v-if="star">*</span>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    star: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: 'default'
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.zr-tips {
  display: flex;
  justify-content: left;
  font-size: 14px;
  line-height: 21px;
  margin-top: 10px;
  .zr-tips-star {
    margin-right: 5px;
  }
  .zr-tips-icon {
    position: relative;
    top: 1px;
    margin-left: 5px;
    font-size: 16px;
  }
  a:hover {
    text-decoration: none !important;
  }
}
</style>