<template>
  <div class="det-hd">
    <img src="../../../assets/logo-top.png" alt="logo" class="det-hd-logo" />
    <div class="det-hd-recommend">
      <h2 class="det-hd-recommend-h2">智能产品官-小果</h2>
      <h1 class="det-hd-recommend-h1">为您优选推荐</h1>
      <cr-tag>
        由
        <strong>华泰财险</strong>承保
      </cr-tag>
    </div>
    <div class="det-hd-insured">
      <h1 class="det-hd-insured-title">30万重疾轻症保障</h1>
      <small class="det-hd-insured-sub">100种重症+40种轻症确诊即赔</small>
      <h5 class="det-hd-insured-price">
        首月
        <strong>3</strong>元
        <small>次月5.6元/月起</small>
      </h5>
      <cr-button type="warning" block @click="btnClick">立即开启保障</cr-button>
      <div class="det-hd-insured-people">
        已有
        <em>31492</em>位用户投保
      </div>
    </div>
  </div>
</template>

<script>
const BTN_CLICK_EVENT = "click";
export default {
  name: "DetailHeader",
  data() {
    return {};
  },
  methods: {
    btnClick() {
      this.$emit(BTN_CLICK_EVENT, 1);
    }
  }
};
</script>
<style lang="less">
@import "../../../style/var.less";
.sub-text-mixins {
  font-size: @font-size-12;
  color: @gray-4;
  line-height: @line-height-sm;
}
.det-hd {
  background: url("../../../assets/goods/detail/bg-zhongjixian.png") top no-repeat;
  background-size: contain;
  padding: 10px 16px;
  &-logo {
    position: relative;
    left: -16px;
    width: 100px;
    height: 32px;
    margin: 16px 0 12px;
  }
  &-recommend {
    color: @white;
    padding: 0 8px;
    &-h2 {
      font-size: @font-size-20;
      font-weight: @font-weight-bold;
      line-height: 28px;
    }
    &-h1 {
      font-size: @font-size-26;
      font-weight: @font-weight-bold;
      line-height: 37px;
      margin-top: -3px;
    }
    .cr-tag {
      background: linear-gradient(180deg, rgba(219, 99, 19, 1) 0%, rgba(192, 83, 10, 1) 100%);
      font-size: 12px !important;
      font-weight: normal !important;
      strong {
        font-weight: bold;
      }
    }
  }
  &-insured {
    margin-top: 39px;
    background: @white;
    box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
    border-radius: @border-radius-md;
    padding: 30px 32px;
    text-align: center;
    background: url(../../../assets/goods/detail/stamp.png) no-repeat;
    background-color: #fff;
    background-position: bottom right;
    background-size: 19%;
    &-title {
      font-size: 34px;
      font-weight: @font-weight-bold;
      color: @black;
      line-height: @line-height-lg * 2;
      margin-top: 1px;
    }
    &-sub {
      .sub-text-mixins();
      margin-top: 8px;
    }
    &-price {
      font-size: @font-size-16;
      font-weight: @font-weight-bold;
      color: @black;
      line-height: @line-height-sm;
      margin-top: 24px;
      strong {
        color: @orange-dark;
        font-size: @font-size-32;
        font-weight: @font-weight-bold;
        margin: 0 3px;
      }
      small {
        margin-left: 5px;
        .sub-text-mixins();
      }
    }
    .cr-button {
      margin-top: 30px;
      height: @button-large-height;
      line-height: @button-large-line-height;
      font-size: @font-size-16;
      box-shadow: 1px 12px 14px 0px rgba(255, 200, 66, 0.4);
    }
    &-people {
      .sub-text-mixins();
      margin-top: 18px;
      em {
        color: @black;
        font-style: normal;
        margin: 0 3px;
      }
    }
  }
}
</style>
