开户流程页面

2019/scaffold-project-demo/biz/css/base.css

@@ -1413,16 +1413,16 @@ a {
.step-to-detail{
    width: 1rem;
    line-height: .33rem;
    color: #269AE4;
    color: #19BB20;
    text-align: center;
    font-size: .14rem;
    border: .01rem solid #269AE4;
    border: .01rem solid #19BB20;
    border-radius: .035rem;
    display: none;
}
.step-to-modify{
    font-size: .12rem;
    color: #31B3EF;
    color: #19BB20;
    line-height: .25rem;
    display: none;
    float: left;
@@ -1476,17 +1476,17 @@ a {
.step-item-ok  .zfk-step-flag,
.step-item-  .zfk-step-flag,
.step-item-current .zfk-step-flag{
    background-image: linear-gradient(-167deg, #00D2FF 0%, #3A7BD5 100%);
    background-image: linear-gradient(-167deg, #19BB20 0%, #19BB20 100%);
}
.zfk-step-list ul li.step-item-current .zfk-step-flag:before,
.zfk-step-list ul li.step-item-ok .zfk-step-flag:before{
    background-color: #269AE4;
    background-color: #19BB20;
}
.zfk-step-list li.step-item-current .zfk-step-flag:after{
    content: "";
    position: absolute;
    display: block;
    border: .02rem solid #419BF9;
    border: .02rem solid #19BB20;
    width: .18rem;
    height: .18rem;
    border-radius: 50%;

2019/scaffold-project-demo/biz/js/zfk-main.js

@@ -1,45 +1,22 @@
require(['jquery', 'ipuUI'], function ($, ipuUI) {
  $(function () {
    // 选择套餐
    $(".step-item-tc .step-to-detail").click(function () {
      location.href = "zfk-package-no.html";
    });
    // 去缴费
    $(".step-item-jf .step-to-detail").click(function () {
      location.href = "zfk-charge.html";
    });
    // 去开户
    $(".step-item-zkf .step-to-detail").click(function () {
      location.href = "zfk-account-sim.html";
    });
    // 下面演示用代码
    // 主流程上一步
    $(".btn-prev").click(function () {
      $(".step-item-current").removeClass("step-item-current").prev().removeClass("step-item-ok").addClass("step-item-current");
    // 修改
    $(".step-to-modify").click(function () {
      $(this).parents(".ipu-list-item").nextAll().removeClass("step-item-current").removeClass("step-item-ok");
      $(this).parents(".ipu-list-item").removeClass("step-item-ok").addClass("step-item-current");
    });
    // 主流程下一步
    $(".btn-next").click(function () {
      $(".zfk-main-step-list .step-item-current").addClass("step-item-ok");
      if ($(".zfk-main-step-list .step-item-current").next(".ipu-fn-hide").size() == 0) {
    // 下一步
    $(".step-to-detail").click(function () {
      if (!$(this).hasClass("go-to-next")) {
        $(".zfk-main-step-list .step-item-current").addClass("step-item-ok");
        $(".zfk-main-step-list .step-item-current").removeClass("step-item-current").next().addClass("step-item-current");
      } else {
        $(".zfk-account-step-list").show();
        alert("下一步");
      }
    });
    // 开通副卡
    $(".btn-ktfk").click(function () {
      $(".step-item-fkkf").toggleClass("step-item-current step-item-ok")
    });
    // 开通宽带
    $(".btn-ktkd").click(function () {
      $(".step-item-ktkd").toggleClass("step-item-current step-item-ok")
    });
  });
});

2019/scaffold-project-demo/zfk-main.html

@@ -45,7 +45,7 @@
                  </div>
                  <div class="ipu-list-item-after">
                    <div class="step-to-detail">
                      选择
                      下一步
                    </div>
                    <div class="step-to-modify">修改</div>
                  </div>
@@ -61,7 +61,10 @@
                    <i class="fa fa-check-circle step-ok-flag"></i>
                  </div>
                  <div class="ipu-list-item-after">
                    <div class="step-to-detail">去认证</div>
                    <div class="step-to-detail">
                      下一步
                    </div>
                    <div class="step-to-modify">修改</div>
                  </div>
                </div>
              </li>
@@ -75,7 +78,10 @@
                    <i class="fa fa-check-circle step-ok-flag"></i>
                  </div>
                  <div class="ipu-list-item-after">
                    <div class="step-to-detail">去缴费</div>
                    <div class="step-to-detail">
                      下一步
                    </div>
                    <div class="step-to-modify">修改</div>
                  </div>
                </div>
              </li>
@@ -89,44 +95,10 @@
                    <i class="fa fa-check-circle step-ok-flag"></i>
                  </div>
                  <div class="ipu-list-item-after">
                    <div class="step-to-detail">去开户</div>
                  </div>
                </div>
              </li>
              <li class="ipu-list-item ipu-fn-hide">
              </li>
            </ul>
          </div>
          <div class="ipu-list zfk-step-list zfk-account-step-list ipu-fn-hide">
            <ul>
              <li class="ipu-list-item step-item-asset step-item-current step-item-fkkf">
                <div class="ipu-list-item-media">
                  <div  class="zfk-step-flag"></div>
                </div>
                <div class="ipu-list-item-inner ipu-flex-align-center">
                  <div class="ipu-list-item-title ipu-flex-align-center">
                    <span class="zfk-step-name">副卡开户</span>
                    <i class="fa fa-check-circle step-ok-flag"></i>
                  </div>
                  <div class="ipu-list-item-after">
                    <div class="step-to-detail">去开户</div>
                  </div>
                </div>
              </li>
              <li class="ipu-list-item step-item-asset step-item-current step-item-ktkd">
                <div class="ipu-list-item-media">
                  <div  class="zfk-step-flag"></div>
                </div>
                <div class="ipu-list-item-inner ipu-flex-align-center">
                  <div class="ipu-list-item-title ipu-flex-align-center">
                    <span class="zfk-step-name">开通宽带</span>
                    <i class="fa fa-check-circle step-ok-flag"></i>
                  </div>
                  <div class="ipu-list-item-after">
                    <div class="step-to-detail">去开通</div>
                    <div class="step-to-detail go-to-next">
                      下一步
                    </div>
                    <div class="step-to-modify">修改</div>
                  </div>
                </div>
              </li>
@@ -179,25 +151,6 @@
            </ul>
          </div>
          <!-- 演示用 -->
          <div class="ipu-btn-wrap">
            <div class="ipu-btn-group">
              <button class="ipu-btn ipu-btn-s btn-prev">
                上一步
              </button>
              <button class="ipu-btn ipu-btn-s btn-next">
                下一步
              </button>
              <button class="ipu-btn ipu-btn-s btn-ktfk">
                开通副卡
              </button>
              <button class="ipu-btn ipu-btn-s btn-ktkd">
                开通宽带
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>