<template>
  <div class="selftmreg_main">
    <div class="pointsRule">
      <ul id="list">
        <li :style="pointsRuleBackColor(1)">
          <a>
            <span :style="pointsRuleColor(1)">填写基本信息</span>
            <i :style="pointsRuleBackColor(1)"></i>
          </a>
        </li>
        <li :style="pointsRuleBackColor(2)">
          <a>
            <em class="before"></em>
            <span :style="pointsRuleColor(2)">填写申请人信息</span>
            <i :style="pointsRuleBackColor(2)"></i>
          </a>
        </li>
        <li :style="pointsRuleBackColor(3)">
          <a>
            <em class="before"></em>
            <span :style="pointsRuleColor(3)">确认订单</span>
            <i :style="pointsRuleBackColor(3)"></i>
          </a>
        </li>
        <li :style="pointsRuleBackColor(4)">
          <a>
            <em class="before"></em>
            <span :style="pointsRuleColor(4)">支付订单</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    pointsRuleBackColor(i) {
      if (i < parseInt(this.step)) {
        return "background: #51d2b7; z-index: " + Math.abs(i - 5);
      } else if (i == parseInt(this.step)) {
        return "background: #51d2b7;z-index: " + Math.abs(i - 5);
      } else if (i > parseInt(this.step)) {
        return "background:#EFF0F7;z-index: " + Math.abs(i - 5);
      }
    },
    pointsRuleColor(i) {
      if (i < parseInt(this.step)) {
        return "color: #FFFFFF;";
      } else if (i == parseInt(this.step)) {
        return "color: #FFFFFF;";
      } else if (i > parseInt(this.step)) {
        return "color: #BBB;";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.selftmreg_main {
  width: 100%;
  padding: 0px 20px;
  box-sizing: border-box;
  overflow: hidden;
}
.pointsRule {
  width: 100%;
  display: inline-block;
  font-size: 16px;
  margin: 20px 0px;
  float: left;
  text-align: center;
}

.pointsRule span {
  float: left;
  display: inline-block;
}

.pointsRule ul {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  float: left;
  width: 100%;
}

.pointsRule ul li {
  width: 24%;
  display: list-item;
  text-align: center;
  float: left;
  margin-right: 10px;
  background: #e3e3e3;
  border-top: 1px solid #e3e3e3;
  height: 31px;
  position: relative;
}

.pointsRule ul li:first-child {
  border-left: 1px solid #e3e3e3;
  background: #e3e3e3;
}

.pointsRule ul li a {
  display: block;
  padding: 8px 0;
  cursor: pointer;
  height: 31px;
  box-sizing: border-box;
}

.pointsRule ul li span {
  vertical-align: middle;
  height: 24px;
  line-height: 15px;
  display: inline-block;
  overflow: hidden;
  text-align: center;
  width: 75%;
  padding-left: 24px;
}

.pointsRule ul li i {
  float: right;
  /* border: #726c6c solid; */
  border-width: 1px 1px 0 0;
  width: 21px;
  height: 22px;
  margin: -4px -11px 0px 10px;
  top: 2px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  background: #e3e3e3;
  -moz-transform: rotate(45deg);
  /* Firefox浏览器 */
  -ms-transform: rotate(45deg);
}

.pointsRule ul li em.before {
  border: #e3e3e3 solid;
  border-width: 1px 1px 0 0;
  width: 21px;
  height: 22px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  float: left;
  margin: -4px 10px 0px -11px;
  top: 2px;
  background: #fff;
}
</style>