<template>
  <!-- 遮罩层 -->
  <div v-if="isZheZhao === '1'" class="zhezhoa">
<!--    <div class="box">-->
<!--      <div class="logo"></div>-->
<!--      <div class="product-title">-->
<!--        {{ pageData.mainProduct.productName }}-->
<!--      </div>-->
<!--      <div class="price-box">-->
<!--        <span class="now">-->
<!--          {{ pageData.remarks.maskText }}-->
<!--        </span>-->
<!--      </div>-->
<!--    </div>-->
      <div v-if="indexNum===0" class="maskTest">{{ pageData.remarks.maskText }}</div>
      <div v-else class="maskTest">{{ pageData.remarks.fitText }}</div>
  </div>
  <div v-else-if="isZheZhao === '0'" class="zhezhoa">
    <div class="box">
      <div class="logo"></div>
      <div class="product-title">
        {{ pageData.mainProduct.productName }}
      </div>
      <div class="price-box">
        <span class="now">
          {{ pageData.remarks.zhezhao }}
        </span>
      </div>
    </div>
  </div>
  <div v-else-if="isZheZhao === '2'" class="banzhezhoa">
    <div class="box">
      <div class="logo"></div>
      <div class="price-box">
        <span class="now">
          {{ pageData.remarks.zhezhao }}
        </span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: { showZhezhao: Boolean, isZheZhao: String,indexNum:Number },
  data() {
    return {
      show: false,
    };
  },
  created() {
    if (this.isZheZhao !== null) {
      setTimeout(() => {
        this.show = true;
      }, 5000);
    }
  },
  computed: {
    pageData() {
      return this.$store.state.pageData;
    },
  },
};
</script>
<style lang="scss">
.banzhezhoa {
  width: 750px;
  height: 150px;
  position: fixed;
  top: 177px;
  z-index: 100000;

  .box {
    width: 580px;
    height: 70px;
    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: 100px;

    .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;
    }
    .price-box {
      height: 36px;
      margin-top: 5px;
      text-align: center;
      font-weight: bold;

      .now {
        font-size: 36px;
        color: #d6000f;
      }
    }
  }
}
.zhezhoa {
  width: 750px;
  height: 150px;
  position: fixed;
  top: 177px;
  z-index: 100000;

    .maskTest {
        text-align: center;
        margin-top: 120px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #222222;
        font-size: 30px;
    }

  .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: 40px;
        color: #222222;
      }
    }
  }
}
</style>
