www-huanghe/modules/account/views/identifyCheck.html

<ion-view view-title="会员认证">
  <div class="bar bar-header">
    <div class="button button-icon icon  pus_blue" ng-click="goback()"></div>
    <button class="button button-icon  icon goback" ng-click="goback()"></button>
    <h3 class="DockingTheme_h3">{{pageTitle}}</h3>
  </div>
  <ion-content style="overflow-x:hidden;overflow-y:visible;" class="has-header">
    <div class="status-section">
      <div class="status-bar">
        <span class="check-mark"><i class="icon ion-checkmark-round color-blue"></i></span>
        <span class="icon-character color-blue">选择认证类型</span>
        <i class="color-blue icon ion-chevron-right"></i>
        <span class="check-mark"><i class="icon ion-checkmark-round color-blue"></i></span>
        <span class="icon-character color-blue">填写认证信息</span>
        <i class="color-blue icon ion-chevron-right"></i>
        <i class="icon-number blue-number">3</i>
        <span class="icon-character color-blue">审核认证信息</span>
        <i class="color-blue icon ion-chevron-right"></i>
        <i class="icon-number gray-number">4</i>
        <span class="icon-character color-gray">认证结果</span>
      </div>
    </div>
    <div class="form-box">
      <div class="hole-row" ng-repeat="list in formList" ng-init="outerIndex=$index">
        <div class="input-title"><sup ng-if='list.needed' style="color:red;">*</sup>{{list.title}}</div>
        <div class="input-box">
          <!--普通输入框-->
          <span class="input-title">{{list.content}}</span>
          <ion-scroll ng-if="list.type=='upload'" ng-show="list.imagelist.length>0" scroll="true" has-bouncing="true" direction="x" scrollbar-x="false" delegate-handle="scrollimage" class="photo_div" style="margin-left:-50px;margin-right:10px;overflow-x:hidden;overflow-y:hidden;">
            <a class="photo_img" ng-repeat="image in list.imagelist track by $index" ng-init="imageIndex=$index" ng-click="shouBigImage(imageIndex,outerIndex)">
              <img ng-src="{{image.photoName | picturefilter}}" style="width:100%;height:85px;" class="back-img"/>
            </a>
          </ion-scroll>
        </div>
      </div>
    </div>
    <div class="opinion-section">
      <div>平台审核</div>
      <div style="margin:10px 0;">
        <span ng-click="isChecked=!isChecked" ng-class="{'submit-mark':true,'bg-blue':!isChecked}"><i class="icon ion-checkmark-round"></i></span>
        <span>通过</span>
      </div>
      <div style="margin:10px 0;">
        <span ng-click="isChecked=!isChecked" ng-class="{'submit-mark':true,'bg-blue':isChecked}"><i class="icon ion-checkmark-round"></i></span>
        <span>拒绝</span>
      </div>
      <textarea ng-show="isChecked" placeholder="请填写拒绝理由" rows="3" style="border:1px solid #ddd;border-radius:5px;width:100%;"></textarea>
      <div class="submit-section">
        <button ng-click="submitForm" ng-class="{'submit-button':true,'sbg-blue':true}" disabled="{{isChecked}}">提交审核</button>
      </div>
    </div>
    <div class="opinion-section">信息审核中，请耐心等待...</div>
  </ion-content>

  <!--需求图片放大区域-->
  <div ng-show="bigImage" class="popover-backdrop" >
    <ion-slide-box auto-play="false" does-continue="false" show-pager="true"  delegate-handle="slide_detail">
      <ion-slide  ng-repeat="image in imagelist track by $index" style="background-color:#000;">
        <button class="pswp_button_arrow"  ng-click="hideBigImage()"></button>
        <div class="pinch-zoom" style="width: 100%;height: 100%">
          <img class="img-responsive bigimage" src="{{image.photoName | picturefilter}}" ng-click="hideBigImage()"/>
        </div>
      </ion-slide>
    </ion-slide-box>
  </div>
</ion-view>
<style>
  .opinion-section{
    padding:10px 20% 0;
    border-top:1px solid #ddd;
  }
  .submit-section{
    text-align: center;
    margin:20px;
  }
  .submit-button{
    padding:10px 20px;
    border:0;
    outline: none;
    background-color: #F7F4F4;
    color:#B6B2B2;
    border-radius:5px;
  }
  .sbg-blue{
    background-color: #1CA8F6;
    color:#fff;
  }
  .submit-mark{
    display:inline-block;
    width:20px;
    height:20px;
    line-height:17px;
    background-color: #D7DADF;
    border-radius:5px;
    text-align: center;
    color:#fff;
  }
  .bg-blue{
    background-color:#3B8BD0;
  }
  .drop-down-items{
    border:1px solid #ddd;
    position:absolute;
    top:33px;
    left:0;
    min-width:100%;
    z-index:1000;
    background-color:#fff;
    padding:5px 0;
    max-height:200px;
    overflow: auto;
  }
  .drop-down-items li{
    padding:5px;
  }
  .drop-down-box{
    position:relative;
    width:29.5%;
    display:inline-block;
    margin-right:5px;
  }
  .area-app{
    width:90%;
    margin-bottom:5px;
  }
  .drop-down-icon{
    position:absolute;
    top:0px;
    right:0px;
    width:30px;
    height:34px;
    line-height:34px;
    text-align: center;
    color:#A29D9D;
  }
  .hole-row{
    display:flex;
    margin-bottom:10px;
  }
  .input-title{
    text-align: right;
    line-height:34px;
    width:35%;
    margin-right:10px;
  }
  .input-box{
    width:65%;
    position:relative;
  }
  .check-mark{
    display:inline-block;
    width:20px;
    height:20px;
    line-height:14px;
    border:3px solid #1CA8F6;
    border-radius:50%;
    margin:0 0 10px;
  }
  .icon-character{
    font-size:1.2em;
  }
  .color-blue{
    color:#1CA8F6;
  }
  .color-gray{
    color:#D7DADF;
  }
  .icon-number{
    display:inline-block;
    width:20px;
    height:20px;
    line-height:17px;
    border-radius:50%;
    margin:0 5px 5px 15px;
  }
  .blue-number{
    background-color:#1CA8F6;
    color:#fff;
  }
  .gray-number{
    border:1px solid #D7DADF;
    color:#D7DADF;
  }
  .status-section{
    text-align: center;
    margin:10px 0;
  }
  .status-bar{
    display:inline-block;
    width:75%;
  }
  .upload_add{
    display: block;
    width: 40px;
    height: 40px;
    font-size: 40px;
    text-align: center;
    line-height: 30px;
    color: #9ca3ac;
    border: 1.5px dashed #b9c5cf;
    border-radius: 5px;
    text-decoration: none;
  }
</style>