

<template>
  <div class="cusbutton" @click="$emit('click')" :class="{ small, selected }">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "CusButton",
  props: {
    small: {
      type: Boolean,
      default: false
    },
    selected: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style scoped lang="less">
  .cusbutton {
    display: inline-block;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(26, 94, 232, 0.8) 0%, rgba(61, 198, 239, 0.4) 49.3%, rgba(29, 242, 228, 0.8) 100%);
    border: 1px solid rgba(29, 228, 242, 0.6);
    box-shadow: 0px 4px 4px  rgba(3, 167, 255, 0.3);
    padding: 10px 15px;
    word-break: keep-all;
    cursor: pointer;

    /** 文本1 */
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 26.06px;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;
    a {
      color: rgba(255, 255, 255, 1) !important;
    }
    &.small {
      padding: 2px 10px;
      background: linear-gradient(180deg, rgba(188, 216, 247, 0.4) 0%, rgba(152, 217, 237, 0.15) 48.61%, rgba(156, 255, 248, 0.4) 100%);
      border: 1px solid rgba(29, 228, 242, 0.6);
      box-shadow: 0px 4px 4px  rgba(190, 244, 247, 0.2);
      color: rgba(255, 255, 255, 1);
      &:hover {
        background: linear-gradient(180deg, rgba(26, 94, 232, 0.8) 0%, rgba(61, 198, 239, 0.4) 49.3%, rgba(29, 242, 228, 0.8) 100%);
        border: 1px solid rgba(29, 228, 242, 0.6);
        box-shadow: 0px 4px 4px  rgba(3, 167, 255, 0.3);
      }
      &.selected {
        background: linear-gradient(180deg, rgba(26, 94, 232, 0.8) 0%, rgba(61, 198, 239, 0.4) 49.3%, rgba(29, 242, 228, 0.8) 100%);
        border: 1px solid rgba(29, 228, 242, 0.6);
        box-shadow: 0px 4px 4px  rgba(3, 167, 255, 0.3);
      }

    }
  }
</style>
