<template>
  <span class="course-button-wrapper button-default" :class="type" @click="btnClick">{{btnText}}</span>
</template>
<script>
export default {
  props: {
    btnText: {
      type: String,
      default: "去云鹊医App"
    },
    type: {
      type: String,
      default: "primary"
    }
  },
  data() {
    return {};
  },
  methods: {
    btnClick() {
      if (this.type == "disabled") return;
      this.$emit("btnClick");
    }
  }
};
</script>
<style  lang="less" scoped>
.course-button-wrapper {
  display: inline-block;
  text-align: center;
  margin: 0 5px;
  &.button-default {
    display: inline-block;
    padding: 0 16px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    // width: 100%;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    background: #449284;
  }
  &.primary {
    color: #ffffff;
    background: #449284;
  }
  &.plain {
    color: #ffffff;
    background: none;
    border: 1px solid rgba(255, 255, 255, 1);
  }
  &.disabled {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(68, 146, 132, 0.4);
  }
}
</style>
