<template>
  <!-- 统一认证组件 -->
  <div class="tongTog">
    <div class="buyBoxTog" v-if="remarks.isBuy === '1'">
      <div class="btn" @click="$emit('btnClick')" :style="{'background-image': `linear-gradient(to right,${ infoData.btnTopcol},${infoData.btnBotcol})`}">
        {{ remarks.btnText ? remarks.btnText : "立即订购" }}
      </div>

      <!-- <div class="btn" v-else @click="$emit('btnClick')" :style="{
          'background-color': pageData.mainProduct.themeColor[0],
          'border-color': pageData.mainProduct.themeColor[1],
        }">
        {{ pageData.remarks.btnTextAss ? pageData.remarks.btnTextAss : "点我领取" }}
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    infoData: Object,
    remarks: Object,
  },
}
</script>

<style lang="scss" scoped>
.tongTog {
  // 产品配图样式
  @keyframes scale {
    from {
      transform: scale(1);
    }

    to {
      transform: scale(0.8);
    }
  }

  .buyBoxTog {
    .btn {
      width: 670px;
      height: 87px;
      margin: 30px auto;
      border-radius: 10px;
      line-height: 87px;
      font-size: 40px;
      border: 4px solid;
      font-weight: bold;
      text-align: center;
      font-family: PingFang SC;
      color: #ffffff;
      // animation-name: scale;
      // animation-duration: 0.6s;
      // animation-timing-function: linear;
      // animation-iteration-count: infinite;
      // animation-direction: alternate-reverse;
    }
  }
}
</style>