<template>
  <div class="active_title">
    <!-- 红包 -->
    <div v-if="active === 'hb'" class="active_title_hb">{{ acitveTitle }}</div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {};
  },
  props: {
    // 活动代号
    active: {
      type: String,
      default: "",
    },
    // 活动标题
    acitveTitle: {
      type: String,
      default: "",
    },
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang='less'>
.active_title {
  width: 250 / @rem;
  margin: -60 / @rem auto 0;

  // 红包
  .active_title_hb {
    position: relative;
    width: 250 / @rem;
    height: 100 / @rem;
    line-height: 100 / @rem;
    border-radius: 0 0 20px 20px;
    color: #fff;
    background-image: linear-gradient(#fbd6bf, #ff0a2f);

    &::after {
      position: absolute;
      left: -40 / @rem;
      top: 0;
      content: "";
      display: block;
      border: 20 / @rem solid transparent;
      border-right: 20 / @rem solid #c50b00;
      border-bottom: 20 / @rem solid #c50b00;
    }

    &::before {
      position: absolute;
      left: 250 / @rem;
      top: 0;
      content: "";
      display: block;
      border: 20 / @rem solid transparent;
      border-left: 20 / @rem solid #c50b00;
      border-bottom: 20 / @rem solid #c50b00;
    }
  }
}

// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  .active_title {
    width: 125 / @rem;
    margin: -30 / @rem auto 0;

    // 红包
    .active_title_hb {
      width: 125 / @rem;
      height: 50 / @rem;
      line-height: 50 / @rem;

      &::after {
        left: -20 / @rem;
        border: 10 / @rem solid transparent;
        border-right: 10 / @rem solid #c50b00;
        border-bottom: 10 / @rem solid #c50b00;
      }

      &::before {
        left: 125 / @rem;
        border: 10 / @rem solid transparent;
        border-left: 10 / @rem solid #c50b00;
        border-bottom: 10 / @rem solid #c50b00;
      }
    }
  }
}
</style>