donate-parent/donate-console/src/main/webapp/resources/view/user/charityCertification.html

<style>
    body{
        font-family: "Microsoft Yahei", "微软雅黑";
        box-sizing: border-box;
    }
   .clearfix {
       clear: both;
   }
    .container{
        width: 1040px;
        margin: 0 auto;
        padding: 0;
    }
     .section{
        padding: 30px 20px 0 20px;
        width: 100%;
        overflow: hidden;
        text-align: center;
        margin: 0 auto;
        background: #fff;
        border: 1px solid #dcdcdc;
    }
    .instruction{
        padding-bottom: 20px;
        text-align: left;
        border-bottom: 2px solid #ef613b;
    }
    .instruction span:first-child{
        font-size: 18px;
        color: #1e1e1e;
    }
    .instruction span:last-child{
        font-size: 14px;
        color: #797979;
    }
    .choose .chooseNav{
        margin: 30px 0 36px 0;
    }
    .choose .chooseNav span{
        margin-right: -10px;
        display: inline-block;
        height: 30px;
        width: 150px;
        line-height: 30px;
        font-size: 14px;
        color: #fff;
    }
    .choose .chooseNav span.step1{
        background: url(static/images/step01.png)no-repeat center center;
    }
    .choose .chooseNav span.step2{
        background: url(static/images/step02-1.png)no-repeat center center;
    }
    .choose .chooseNav span.steps{
        margin-right: -13px;
    }
    .choose .chooseNav span.step2.active{
        background: url(static/images/step02-2.png)no-repeat center center;
    }
    .choose .chooseNav span.step3{
        background: url(static/images/step03-1.png)no-repeat center center;
    }
    .choose .chooseNav span.step3.active{
        background: url(static/images/step03-2.png)no-repeat center center;
    }
    /*注册信息*/
    .detail h3.protocol{
        padding: 10px 0 24px 0;
        font-size: 24px;
        color: #323232;
        font-weight: bold;
    }
    .detail .protocol-detail{
        padding: 30px 60px 0 37px;
        margin: 0 auto;
        width: 900px;
        height: 490px;
        overflow-y: auto;
        text-align: left;
        border: 1px solid #dcdcdc;
    }
    .detail .protocol-detail h5{
        padding-bottom: 37px;
        font-size: 16px;
        font-weight: bold;
        color: #505050;
    }
    .detail .protocol-detail p{
        margin-bottom: 30px;
        font-size: 12px;
        font-weight: bold;
        color: #505050;
    }
    .detail .protocol-detail div.item:last-child{
        margin-bottom: 70px;
    }
    .detail .agree{
        margin: 18px auto 0 auto;
        width: 900px;
        text-align: left;
    }
    .detail .agree input[type='checkbox']{
        margin: 0;
    }
    .detail .agree span{
        margin-left: 8px;
        font-size: 12px;
        color: #787878;
    }
    .detail .agree span a{
        font-size: 12px;
        color: #2a5bfb;
    }
    .detail .agree div.read{
        margin-top: -2px;
    }
    .detail a.btn{
        margin: 30px 0 47px 0;
        display: inline-block;
        width:160px;
        height: 34px;
        font-size: 16px;
        color: #ffffff;
        background: #ff6000;
        border: none;
    }
    .detail a.btn:hover{
        background: #be3b1b;
    }
    /*机构信息*/
    .detail .message {
        position: relative;
        margin: 0 auto;
        margin-bottom: 30px;
        width: 980px;
        height: 46px;
        line-height: 46px;
        text-align: left;
        background: #eeeeee;
    }
    .detail .message span {
        margin-left: 25px;
        font-size: 18px;
        font-weight: bold;
        color: #505050;
    }
    .detail .message span:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 46px;
        background: #ff6000;
    }
    .detail form{
        margin: 0 auto;
        width: 980px;
    }
    .detail .form-group {
        margin-bottom: 22px;
        height: 34px;
        line-height: 34px;
    }
    .detail .form-group:last-child {
        margin-bottom: 50px;
    }
    .detail .form-group label{
        margin-right: 30px;
        width: 100px;
        font-size: 16px;
        font-weight: normal;
        text-align: left;
        color: #505050;
    }
    .detail .form-group input[type='text']{
        padding-left: 10px;
        width: 325px;
        height: 34px;
        border-radius: 0;
    }
    .detail .form-group .control-help{
        margin-left: 10px;
        font-size: 12px;
        color: #969696;
    }
    .detail .form-group .select-group select{
        padding-left: 10px;
        width: 130px;
        height: 34px;
        cursor: pointer;
        border: 1px solid #dcdcdc;
    }
    .detail .form-group .select-group span{
        margin: 0 20px;
        font-size: 14px;
        color: #313131;
    }
    .detail .form-group .select-group span.count{
        margin: 0 20px 0 0;
    }
    .detail .form-group .select-group input{
        padding-left: 10px;
        width: 410px;
        height: 34px;
        border-radius: 0;
        outline: none;
    }
    .detail .form-group select{
        padding-left: 10px;
        width: 175px;
        height: 34px;
        cursor: pointer;
    }
    .detail .form-group .area span{
        margin-right: 20px;
        display: inline-block;
        padding: 0 18px;
        height: 34px;
        font-size: 16px;
        color: #313131;
        border: 1px solid #dcdcdc;
    }
    .detail .home input[type='text']{
        width: 540px;
        height: 34px;
    }
    .detail .form-group div.fl p.tip{
        margin-bottom: 20px;
        font-size: 12px;
        color: #969696;
    }
    .detail .form-group div.fl textarea{
        padding-left: 17px;
        width: 690px;
        height: 210px;
        font-size: 14px;
        color: #313131;
    }
    .detail .form-group input.valid {
        padding-left: 5px;
        width: 130px;
        height: 34px;
    }
    .detail .form-group div.valida {
        text-align: left;
        padding-left: 130px;
    }
    .detail .form-group div.valida span {
        display: inline-block;
        width: 120px;
        height: 40px;
    }
    .detail .form-group div.valida a {
        margin-left: 5px;
        font-size: 12px;
        color: #1c9700;
    }
    .detail div.submitBtn{
        margin: 85px 0 60px 130px;
    }
    .detail .text-left button:first-child{
        margin-right: 60px;
        width: 160px;
        height: 34px;
        font-size: 16px;
        color: #fff;
        background: #ff7624;
        border-radius: 3px;
        border: none;
        outline: none;
    }
    .detail .text-left button:first-child:hover{
        background: #be3b1b;
    }
    .detail .text-left button:last-child{
        width: 130px;
        height: 34px;
        font-size: 16px;
        color: #fff;
        background: #a0a0a0;
        border-radius: 3px;
        border: none;
        outline: none;
    }
    /*材料证明*/
    .detail .form-group select.bankChoose{
        margin-right: 15px;
        padding-left: 10px;
        width: 175px;
        height: 34px;
        font-size: 16px;
        color: #313131;
    }
    .detail .form-group input.bank-choose{
        padding-left: 10px;
        width: 175px;
        height: 34px;
        font-size: 16px;
        color: #313131;
    }
    .certificate .certificate-item{
        text-align: left;
    }
    .certificate .certificate-item{
        margin-bottom: 27px;
    }
    .certificate .certificate-item:first-child{
        margin-bottom: 20px;
    }
    .certificate .certificate-item span{
        margin: 0 25px 0 60px;
        width: 210px;
        font-size: 16px;
        text-align: left;
        color: #515151;
    }
    .certificate .certificate-item .uploadImg {
        position: relative;
    }
    .certificate .certificate-item .uploadImg button{
        width: 110px;
        height: 34px;
        font-size: 16px;
        color: #505050;
        background: -webkit-linear-gradient(top, #fefefe 0%,#d9d9d9 100%);
        background: -o-linear-gradient(top, #fefefe 0%,#d9d9d9 100%);
        background: -ms-linear-gradient(top, #fefefe 0%,#d9d9d9 100%);
        background: linear-gradient(to bottom, #fefefe 0%,#d9d9d9 100%);
        border: 1px solid #d2d2d2;
        cursor: pointer;
    }
    .certificate .certificate-item .uploadImg input[type='file']{
        position: absolute;
        top: 0;
        left: 0;
        width: 110px;
        height: 34px;
        outline: none;
        opacity: 0;
    }
    .certificate .certificate-item .uploadImg a{
        margin-left: 20px;
        font-size: 16px;
        color: #1968f9;
    }
    /*完成注册*/
    .detail .complete{
        margin: 80px auto 30px auto;
        text-align: center;
    }
    .detail .complete img{
        margin: -15px 20px 0 0;
        width: 45px;
        height: 45px;
    }
    .detail .complete span{
        font-size: 30px;
        font-weight: bold;
        color: #47b260;
    }
    .detail .look button{
        width: 140px;
        height: 34px;
        line-height: 34px;
        font-size: 16px;
        color: #fff;
        background: #ff7624;
        border-radius: 3px;
        border: none;
        outline: none;
    }
    .detail .look button:hover{
        background: #be3b1b;
    }
    .detail a.return{
        display: inherit;
        margin: 20px 0 60px 0;
        font-size: 16px;
        color: #1968f9;
    }
</style>
<!--主体内容-->
<div class="content-wrapper" style="min-height: 924px;; z-index: 50;">
    <!-- Main content -->
    <section class="content">
        <div class="container">
            <div class="section">
                <div class="instruction"><span>公益机构认证</span><span>（以下所有信息均为必填项）</span></div>
                <div class="choose">
                    <div class="chooseNav">
                        <span class="step1 active">1、注册信息</span><span class="step2">2、机构信息</span><span class="step2">3、联系人信息</span><span class="step2 steps">4、材料证明</span><span class="step3">5、完成注册</span>
                    </div>
                    <div class="chooseDetail">
                        <!--注册信息-->
                        <div class="detail show">
                            <h3 class="protocol">优软一元捐用户协议</h3>
                            <div class="protocol-detail">
                                <div class="item">
                                    <h5>1.重要须知</h5>
                                    <p>1.1.本协议是用户（您）与腾讯公益慈善基金会（以下简称“腾讯”）之间关于腾讯公益网（以下简称“公益网”）服务产品的法律协议。</p>
                                    <p>1.2.腾讯在此特别提醒用户认真阅读本《用户协议》中的各个条款，并特别提醒用户欲使用公益网服务，必须事先认真阅读本服务条款中各条款，包括免除或者限制腾讯责任的免责条款以及对用户的权利限制条款。</p>
                                    <p>1.3.这些条款可由腾讯随时更新，且毋须另行通知。本协议条款一旦发生变更，腾讯将在网页上公布修改内容。修改后的协议条款一旦在网页上公布即有效，并代替原来的协议条款。您可随时登录网站查阅最新版服务条款。</p>
                                    <p>1.4.用户阅读后，请选择接受或不接受本服务条款（未成年人审阅时应该得到法定监护人的陪同）。</p>
                                    <p>1.5.如果用户不同意本服务条款或腾讯随时对服务条款修改，则用户无权使用并应主动取消腾讯提供的服务。</p>
                                    <p>1.6.用户的使用行为将被视为用户对全部服务条款的完全接受，包括接受腾讯对服务条款随时所做的任何修改，并同意接受本《协议》各项条款的约束。</p>
                                    <p style="margin-bottom: 70px;">1.7.用户若有违反本条款规定，腾讯有权终止用户腾讯公益网服务的使用资格并保留追究相关法律责任的权利。</p>
                                </div>
                            </div>
                            <div class="agree clearfix">
                                <input type="checkbox" ng-click="changeChecked()" ng-checked="checked" required class="fl">

                                <div class="fl read"><span>我已经阅读并同意<a href="http://lj.ubtob.com/userAgreement">《优软一元捐用户协议》</a></span></div>
                            </div>
                            <button class="btn" ng-disabled="!checked" ng-click="stepNext(checked, 2)">确定，下一步</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
    $('.right-nav').on('click', 'span', function () {
        var index = $(this).index();
        $(this).addClass('active').siblings().removeClass('active');
        $('.right-list').eq(index).addClass('show').siblings().removeClass('show');
    });
</script>