<template>
  <div
    class="main-btn"
    :class="[disabled? 'disabled': '']">{{btnText}}</div>
</template>
<script lang="ts">
import { Component, Prop, PropSync, Vue } from 'vue-property-decorator';
/**
 * 块按钮
 */
@Component({
  name: 'MainButton',
})
export default class MainButton extends Vue {

  @Prop({ type: Boolean, required: false})
  private readonly disabled!: boolean;

  @Prop({ type: String, default: '确定' })
  private readonly btnText!: string;
}
</script>
<style scoped lang="scss">
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

  .main-btn {
    position: relative;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    color: #FFFFFF;
    background: linear-gradient(270deg, #6C7AFE 0%, #5D7BF6 100%);
    border-radius: 4px;
    cursor: pointer;
    transition: opacity .1s;
    -webkit-appearance: none;
    &.disabled {
      background: #B2C9FF;
    } 
    &::before {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      background-color: black;
      border: inherit;
      border-color: black;
      border-radius: inherit; /* inherit parent's border radius */
      transform: translate(-50%, -50%);
      opacity: 0;
      content: ' ';
    }
    &:active::before {
      opacity: 0.1;
    }
  }
</style>