donate-parent/donate-console/src/main/webapp/resources/view/user/selectInstitutionsNature.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{
            margin-right: 20px;
            font-size: 18px;
            color: #1e1e1e;
        }
        .instruction a{
            font-size: 16px;
            color: #005ae1;
        }
        .instruction a img{
            margin: -2px 5px 0 0;
        }
        .choose{
            text-align: center;
        }
        .choose p.choose-txt{
            margin: 36px 0 40px 0;
            font-size: 16px;
            color: #1e1e1e;
        }
        .choose .choose-about{
            margin-bottom: 140px;
            overflow: hidden;
        }
        .choose .choose-about .choose-item{
            float: left;
            padding: 0 17px;
            margin-right: 70px;
            width: 260px;
            height: 260px;
            border: #dcdcdc 1px solid;
            background: -webkit-linear-gradient(top, #fff 0%,#f5f5f5 100%);
            background: -o-linear-gradient(top, #fff 0%,#f5f5f5 100%);
            background: -ms-linear-gradient(top, #fff 0%,#f5f5f5 100%);
            background: linear-gradient(to bottom, #fff 0%,#f5f5f5 100%);
        }
        .choose .choose-about .choose-item:first-child {
            margin-left: 255px;
        }
        .choose .choose-about .choose-item:last-child {
            width: 240px;
        }
        .choose .choose-about .choose-item .img{
            height: 140px;
        }
        .choose .choose-about .choose-item .img img{
            margin: 30px 0 20px 0;
            width: 72px;
            height: 90px;
        }
        .choose .choose-about .choose-item p{
            margin-bottom: 20px;
            font-size: 16px;
            color: #1e1e1e;
            font-weight: bold;
        }
        .choose .choose-about .choose-item span{
            font-size: 13px;
            color: #787878;
            line-height: 22px;
        }
    </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><a href="projectProcessInstruction"><img src="static/images/instruction.png" alt=""/>项目发起流程说明</a></div>
                <div class="choose">
                    <p class="choose-txt">请选择适合您的身份，完成以下注册和认证，以便快速发布公益项目。</p>
                    <div class="choose-about">
                        <div class="choose-item">
                            <a ng-click="registerCharityCertification()">
                                <div class="img">
                                    <img src="static/images/non-public.png" alt=""/>
                                </div>
                                <p>公益机构</p>
                                <span>适合慈善组织(务公开募捐资格证书)、民办非企业单位、社会团体、企业等，不具备直接面向公众募捐的性质</span>
                            </a>
                        </div>
                        <div class="choose-item">
                            <a ng-click="registerPublicOfferingCertification()">
                                <div class="img">
                                    <img src="static/images/public.png" alt=""/>
                                </div>
                                <p>慈善组织(公募)</p>
                                <span>适合民证部批准,持有法人登记证书、公开募捐资格证书，具备向公众募捐集资金性质的公募基金会。</span>
                            </a>
                        </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>