<template>
  <!-- 按钮 -->
  <div
    class="btn"
    :style="{ background: bgColor, width: btnwidth, borderColor: borderColor }"
    @click="Hit"
  >
    <i
      v-show="iconStyle != 'none'"
      class="icon"
      :class="iconStyle"
      :style="{ fontSize: iconSize, color: iconColor }"
    ></i>
    <!-- <img class="icon" :src="imgUrl" alt="" /> -->
    <div class="describe" :style="{ color: scriptColor }">{{ describe }}</div>
  </div>
</template>

<script>
export default {
  props: {
    bgColor: {
      //背景颜色
      type: String,
      default: "#5473E8",
    },
    btnwidth: {
      //按钮宽度
      type: String,
      default: "0.416667rem",
    },
    borderColor: {
      //边框颜色
      type: String,
      default: "transparent",
    },
    describe: {
      //文字
      type: String,
      default: "查询",
    },
    // imgUrl: {
    //   //图标
    //   type: String,
    //   default: require("@/assets/icon/add.png"),
    // },
    iconStyle: {
      //图标
      type: String,
      default: "el-icon-search",
    },
    iconSize: {
      //图标大小
      type: String,
      default: "0.104167rem",
    },
    iconColor: {
      //图标颜色
      type: String,
      default: "#FFFFFF",
    },
    scriptColor: {
      //文字颜色
      type: String,
      default: "#FFFFFF",
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    Hit() {
      this.$emit("answer");
    },
  },
};
</script>

<style lang="scss" scoped>
.btn {
  // max-width: 110px;
  height: 40px;
  // padding: 9px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  // line-height: 40px;
  justify-content: center;
  border: 1px solid transparent;
  .icon {
    margin-right: 7px;
    display: block;
    // margin-top: 6px;
  }
  .describe {
    font-size: 16px;
  }
}
.btn:hover {
  cursor: pointer;
}
</style>
