jifuning
/
ximeichang


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" type="text/css" href="../../css/projeck.css" />
</head>
<style type="text/css">
    html,body{
        background: transparent;
        -webkit-touch-callout: none;
        font-family: Tahoma, Geneva, sans-serif;
        font-style: normal;
        margin: 0;
    }
    .api_layout{
        background-color: #fff;
        position: absolute; margin: auto;
        left: 0; right: 0; top: 0; bottom: 0;
        width: 325px; height: 444px;
        opacity: 1;
        padding: 0 20px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        overflow: hidden;
        padding-top: 106px;
    }
    .api_box{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: #fff;
      z-index: 100;
      padding: 0 20px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border-radius: 5px;
    }
    .selectTitle{
        padding: 15px 0;
    }
    .api_layout .font-s{
        font-size: 14px;
    }
    .api_layout .input-s{
        height: 40px;
        border: 1px solid #97a3b4;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding-left: 10px;
    }
    .column{
      height: 338px;
      overflow-y: scroll;;
      -webkit-overflow-scrolling: touch;
    }
    .column-select{
        background-color: transparent;
        box-shadow: none;
        display: block;
        padding: 0;
        margin: 0;
        width: 100%;
        line-height: normal;
        color: #424242;
        font-family: inherit;
        box-sizing: border-box;
        -webkit-user-select: text;
        user-select: text;
        -webkit-appearance: none;
        appearance: none;
    }
    .aui-list-item-input{
        margin-top: 10px;
    }
    .aui-list-item-input:after{
        content:"";
        border-left:5px solid transparent;
        border-right:5px solid transparent;
        border-bottom:5px solid #b3c0ce;
        -webkit-transform-origin:5px 2.5px;
        transform-origin:5px 2.5px;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        position:absolute;
        right:10px;
        top:18px;
        -webkit-transform:rotate(180deg);
        transform:rotate(180deg);
    }
    .api_leader_head{
        height: 50px;
        width: 50px;
        display: block;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        margin-right: 10px;
    }
    .column li{
        padding: 10px 0;
    }
    /*cheackbox*/
    .remember-password-container {
        width: 56px;
        height: 24px;
        text-align: center;
    }
    .remember-password-container .remember-password-content {
        position: relative;
    }

    .remember-password-container input[type=checkbox]{
        width: 20px;
        height: 20px;
        position: absolute;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
        font-size: initial;
    }

    .remember-me-label {
        cursor: pointer;
    }
    .remember-password-container span {
        position: absolute;
        width: 20px;
        height: 20px;
        top: 2px;
        background: url(../../image/cheackbox2.png);
        background-size: 20px;
        background-repeat: no-repeat;
    }

    .remember-password-container input[type=checkbox]:checked+span {
        background: url(../../image/cheackbox1.png);
        background-size: 20px;
        background-repeat: no-repeat;
    }
    .api-icon-close{
      position: absolute;
      top: 13px;
      right: -5px;
      font-size: 24px;
      font-weight: bold;
    }
</style>
<body>
<div class="api_layout">
  <div class="api_box">
    <div class="selectTitle after-border relative">
        <h3 class="h3">选择审批人</h3>
        <i class="aui-iconfont aui-icon-close api-icon-close" onclick="api.closeFrame()"></i>
    </div>
    <div class="aui-list-item-input relative">
        <select class="column-select input-s font-s">
            <option>Option1</option>
            <option>Option2</option>
            <option>Option3</option>
        </select>
    </div>
  </div>
    <ul class="column">
        <li class="after-border relative">
            <label class="remember-me-label flex-space">
                <div class="flex-start">
                    <img src="" onerror=javascript:this.src="http://jiewei-icon.oss-cn-beijing.aliyuncs.com/icon/default-avatar.png" class="api_leader_head">
                    <div>
                        <p class="name font-s">张三</p>
                        <p class="del font-s">信息监测中心</p>
                    </div>
                </div>
                <div class="remember-password-container">
                    <div class="remember-password-content">
                        <input type="checkbox">
                        <span></span>
                    </div>
                </div>
            </label>
        </li>
        <li class="after-border relative">
            <label class="remember-me-label flex-space">
                <div class="flex-start">
                    <img src="" onerror=javascript:this.src="http://jiewei-icon.oss-cn-beijing.aliyuncs.com/icon/default-avatar.png" class="api_leader_head">
                    <div>
                        <p class="name font-s">张三</p>
                        <p class="del font-s">信息监测中心</p>
                    </div>
                </div>
                <div class="remember-password-container">
                    <div class="remember-password-content">
                        <input type="checkbox">
                        <span></span>
                    </div>
                </div>
            </label>
        </li>
        <li class="after-border relative">
            <label class="remember-me-label flex-space">
                <div class="flex-start">
                    <img src="" onerror=javascript:this.src="http://jiewei-icon.oss-cn-beijing.aliyuncs.com/icon/default-avatar.png" class="api_leader_head">
                    <div>
                        <p class="name font-s">张三</p>
                        <p class="del font-s">信息监测中心</p>
                    </div>
                </div>
                <div class="remember-password-container">
                    <div class="remember-password-content">
                        <input type="checkbox">
                        <span></span>
                    </div>
                </div>
            </label>
        </li>
        <li class="after-border relative">
            <label class="remember-me-label flex-space">
                <div class="flex-start">
                    <img src="" onerror=javascript:this.src="http://jiewei-icon.oss-cn-beijing.aliyuncs.com/icon/default-avatar.png" class="api_leader_head">
                    <div>
                        <p class="name font-s">张三</p>
                        <p class="del font-s">信息监测中心</p>
                    </div>
                </div>
                <div class="remember-password-container">
                    <div class="remember-password-content">
                        <input type="checkbox">
                        <span></span>
                    </div>
                </div>
            </label>
        </li>
        <li class="after-border relative">
            <label class="remember-me-label flex-space">
                <div class="flex-start">
                    <img src="" onerror=javascript:this.src="http://jiewei-icon.oss-cn-beijing.aliyuncs.com/icon/default-avatar.png" class="api_leader_head">
                    <div>
                        <p class="name font-s">张三</p>
                        <p class="del font-s">信息监测中心</p>
                    </div>
                </div>
                <div class="remember-password-container">
                    <div class="remember-password-content">
                        <input type="checkbox">
                        <span></span>
                    </div>
                </div>
            </label>
        </li>
        <li class="after-border relative">
            <label class="remember-me-label flex-space">
                <div class="flex-start">
                    <img src="" onerror=javascript:this.src="http://jiewei-icon.oss-cn-beijing.aliyuncs.com/icon/default-avatar.png" class="api_leader_head">
                    <div>
                        <p class="name font-s">张三</p>
                        <p class="del font-s">信息监测中心</p>
                    </div>
                </div>
                <div class="remember-password-container">
                    <div class="remember-password-content">
                        <input type="checkbox">
                        <span></span>
                    </div>
                </div>
            </label>
        </li>
        <li class="after-border relative">
            <label class="remember-me-label flex-space">
                <div class="flex-start">
                    <img src="" onerror=javascript:this.src="http://jiewei-icon.oss-cn-beijing.aliyuncs.com/icon/default-avatar.png" class="api_leader_head">
                    <div>
                        <p class="name font-s">张三</p>
                        <p class="del font-s">信息监测中心</p>
                    </div>
                </div>
                <div class="remember-password-container">
                    <div class="remember-password-content">
                        <input type="checkbox">
                        <span></span>
                    </div>
                </div>
            </label>
        </li>
        <li class="after-border relative">
            <label class="remember-me-label flex-space">
                <div class="flex-start">
                    <img src="" onerror=javascript:this.src="http://jiewei-icon.oss-cn-beijing.aliyuncs.com/icon/default-avatar.png" class="api_leader_head">
                    <div>
                        <p class="name font-s">张三</p>
                        <p class="del font-s">信息监测中心</p>
                    </div>
                </div>
                <div class="remember-password-container">
                    <div class="remember-password-content">
                        <input type="checkbox">
                        <span></span>
                    </div>
                </div>
            </label>
        </li>
    </ul>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
</html>