<template>
  <!-- 鸿币优惠明细 -->
  <div class="menu_hb_detail">
    <div class="content">
      <i class="iconfont icon-back" @click="close"></i>
      <div class="title">鸿币优惠明细</div>
      <!-- 充值档位, 优惠明细  -->
      <ul class="detail_ul">
        <li class="li_title">
          <div class="left">档位(单位:元)</div>
          <div class="right">优惠折扣</div>
        </li>
        <li v-for="(item, index) in list" :key="index" class="li_content">
          <div class="left">{{ item.money }}</div>
          <div class="right">{{ item.discount }}</div>
        </li>
      </ul>
      <!-- 抽奖次数 -->
      <ul class="draw_ul">
        <li class="li_title">
          <div>抽奖次数</div>
        </li>
        <li class="value_first">
          <div>首充送1次</div>
        </li>
        <li class="value_second">
          <div>首充送2次</div>
        </li>
        <li class="value_thrid">
          <div>
            每满1000
            <br />
            送3次
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "MenuHbDetail",
  components: {},
  data() {
    return {
      // >< ≥≤
      // 表格
      list: [
        {
          money: "100≤ x <200",
          discount: "99折",
        },
        {
          money: "200≤ x <500",
          discount: "98折",
        },
        {
          money: "500≤ x <1000",
          discount: "97折",
        },
        {
          money: "1000≤ x <1500",
          discount: "96折",
        },
        {
          money: "1500≤ x <2000",
          discount: "95折",
        },
        {
          money: "2000≤ x <3000",
          discount: "94折",
        },
        {
          money: "x =3000",
          discount: "92折",
        },
        {
          money: "x >3000",
          discount: "9折",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    close() {
      this.showInnerControl("hb");
    },

    // 显示哪个组件(工具函数)
    showInnerControl(name) {
      this.$emit("showInnerControl", name);
    },
  },
};
</script>

<style lang='less' scoped>
.menu_hb_detail {
  .content {
    width: 700 / @rem;
    height: 800 / @rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -350 / @rem;
    margin-top: -400 / @rem;
    padding: 20 / @rem;
    font-size: 30 / @rem;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 10 / @rem;
    overflow: hidden;

    i {
      float: right;
      font-size: 60 / @rem;
    }

    .icon-back {
      margin-right: 10 / @rem;
      font-size: 50 / @rem;
    }

    .title {
      height: 60 / @rem;
      line-height: 60 / @rem;
      margin-top: 10 / @rem;
      margin-left: 10 / @rem;
      padding-left: 20 / @rem;
      font-size: 36 / @rem;
      font-weight: bold;
      border-left: 4px solid #3faeed;
      text-align: left;
    }

    .detail_ul {
      width: 72%;
      margin: 20 / @rem auto;
      float: left;

      .li_title {
        font-weight: bold;
        border-bottom: 0;
      }

      li {
        height: 70 / @rem;
        line-height: 70 / @rem;
        text-align: center;
        margin: 0 auto;
        box-sizing: border-box;

        &:last-child {
          .left,
          .right {
            border-bottom: 1px solid #999999;
          }
        }

        .left,
        .right {
          width: 50%;
          height: 100%;
          float: left;
          box-sizing: border-box;
          border: 1px solid #999999;
          box-sizing: border-box;
          border-bottom: 0;
        }

        .right {
          border-left: 0;
        }
      }
    }

    .draw_ul {
      width: 28%;
      margin: 20 / @rem auto;
      float: left;

      .li_title {
        height: 70 / @rem;
        font-weight: bold;
        div {
          height: 100%;
          border: 1px solid #999999;
          border-left: 0;
          border-bottom: 0;
        }
      }

      li {
        height: 70 / @rem;
        line-height: 70 / @rem;
        text-align: center;
        margin: 0 auto;
        box-sizing: border-box;
      }

      .value_first,
      .value_second,
      .value_thrid {
        border: 1px solid #999999;
        border-left: 0;
        border-bottom: 0;
      }

      .value_first {
        height: 140 / @rem;
        line-height: 140 / @rem;
      }

      .value_second {
        height: 70 / @rem;
        line-height: 70 / @rem;
      }

      .value_thrid {
        height: 350 / @rem;
        padding-top: 100 / @rem;
        box-sizing: border-box;
        border-bottom: 1px solid #999999;
      }
    }

    .close {
      width: 80%;
      height: 80 / @rem;
      line-height: 80 / @rem;
      margin: auto;
      margin: 40 / @rem auto;
      border-radius: 20 / @rem;
      background-color: #3faeed;
      color: #ffffff;
    }
  }
}
// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  .menu_hb_detail {
    .content {
      width: 350 / @rem;
      height: 300 / @rem;
      margin-left: -175 / @rem;
      margin-top: -150 / @rem;
      font-size: 16 / @rem;
      padding: 10 / @rem;
      overflow-y: auto;

      .icon-back {
        margin-top: 2 / @rem;
        margin-right: 5 / @rem;
        font-size: 25 / @rem;
      }

      .title {
        height: 30 / @rem;
        line-height: 30 / @rem;
        margin-top: 8 / @rem;
        margin-left: 5 / @rem;
        padding-left: 10 / @rem;
        font-size: 18 / @rem;
      }

      .detail_ul {
        margin: 10 / @rem auto;

        li {
          height: 35 / @rem;
          line-height: 35 / @rem;
        }
      }

      .draw_ul {
        margin: 10 / @rem auto;

        li {
          height: 35 / @rem;
          line-height: 35 / @rem;
        }

        .li_title {
          height: 35 / @rem;
        }

        .value_first {
          height: 70 / @rem;
          line-height: 70 / @rem;
        }

        .value_second {
          height: 35 / @rem;
          line-height: 35 / @rem;
        }

        .value_thrid {
          height: 175 / @rem;
          padding-top: 50 / @rem;
        }
      }

      .close {
        width: 80%;
        height: 40 / @rem;
        line-height: 40 / @rem;
        margin: 20 / @rem auto;
        border-radius: 10 / @rem;
      }
    }
  }
}

// ipad 横屏
@media /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad伪横屏 */ all and (orientation: landscape) and (min-width: 800px) and (min-height: 600px),
  all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
  .menu_hb_detail {
    .content {
      width: 350 / @rem;
      height: 400 / @rem;
      left: 50%;
      top: 50%;
      margin-top: -200 / @rem;
      margin-left: -175 / @rem;
      padding: 10 / @rem;
      border-radius: 20 / @rem;
    }
  }
}
</style>