<template>
  <div class="zhezhao" v-show="show">
    <div class="box">
      <div class="logo"></div>
      <div class="product-title">
        {{ pageData.mainProduct.productName }}
      </div>
      <div class="price-box">
        <span class="now">
          {{
            "首月" +
            (pageData.mainProduct.originalPrice -
              pageData.mainProduct.discountInfo) +
            "元"
          }}
        </span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: { show: Boolean },
  data() {
    return {};
  },
  computed: {
    pageData() {
      return this.$store.state.pageData;
    },
  },
};
</script>
<style lang="scss">
.zhezhao {
  width: 750px;
  height: 150px;
  position: fixed;
  top: 177px;
  z-index: 100000;
  .box {
    width: 580px;
    height: 160px;
    background: #ffffff;
    border-radius: 0.08rem;
    margin: 0 auto;
    background-image: url(../assets/img/top@2x.png);
    background-size: 581px 96px;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 140px;
    .logo {
      width: 92.4px;
      height: 50.4px;
      background-image: url(../assets/img/unicmlogo.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 22px;
      left: 37px;
    }
    .product-title {
      font-size: 30px;
      font-weight: bold;
      line-height: 32px;
      text-align: center;
      color: #000000;
    }
    .price-box {
      height: 36px;
      margin-top: 20px;
      text-align: center;
      font-weight: bold;
      .now {
        font-size: 44px;
        color: #222222;
      }
    }
  }
}
</style>
