机构注册

donate-console/src/main/java/com/uas/console/donate/controller/OrgController.java

@@ -1,13 +1,14 @@
 package com.uas.console.donate.controller;
 
 import com.alibaba.fastjson.JSONObject;
-import com.uas.console.donate.dao.OrgDao;
 import com.uas.console.donate.model.Org;
 import com.uas.console.donate.service.OrgService;
 import com.uas.dfs.service.FileClient;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
+import org.springframework.ui.ModelMap;
 import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestMethod;
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.ResponseBody;
 import org.springframework.web.multipart.MultipartFile;
@@ -44,15 +45,15 @@ public class OrgController {
      * 保存机构草稿
      */
     @ResponseBody
-    @RequestMapping("/save")
-    public Org save(@RequestParam(required = false) MultipartFile logo,
-                    @RequestParam(required = false) MultipartFile certificate,
-                    @RequestParam(required = false) MultipartFile personCertificate,
-                    @RequestParam(required = false) MultipartFile donateCertificate,
-                    @RequestParam(required = false) MultipartFile legalIdCard,
-                    @RequestParam(required = false) MultipartFile material,
-                    @RequestParam(required = false) MultipartFile certify,
-                    String jsonStr, HttpServletRequest request, HttpServletResponse response) throws IOException{
+    @RequestMapping(value = "/save", method = RequestMethod.POST)
+    public ModelMap save(@RequestParam(required = false) MultipartFile logo,
+                         @RequestParam(required = false) MultipartFile certificate,
+                         @RequestParam(required = false) MultipartFile personCertificate,
+                         @RequestParam(required = false) MultipartFile donateCertificate,
+                         @RequestParam(required = false) MultipartFile legalIdCard,
+                         @RequestParam(required = false) MultipartFile material,
+                         @RequestParam(required = false) MultipartFile certify,
+                         String jsonStr, HttpServletRequest request, HttpServletResponse response) throws IOException{
 
         Org org= JSONObject.parseObject(jsonStr,Org.class);
 

donate-console/src/main/java/com/uas/console/donate/impl/OrgServiceImpl.java

@@ -9,6 +9,7 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.data.domain.Page;
 import org.springframework.data.domain.Pageable;
 import org.springframework.stereotype.Service;
+import org.springframework.ui.ModelMap;
 
 import java.util.List;
 
@@ -28,13 +29,22 @@ public class OrgServiceImpl implements OrgService {
     }
 
     //保存机构
-    public Org save(Org org){
+    public ModelMap save(Org org){
+        ModelMap map = new ModelMap();
         System.out.print(JSON.toJSONString(org));
         //如果机构不是发布状态，就设置为草稿状态
         if(org.getPublish()==null||org.getPublish()==1){
             org.setPublish(1);
         }
-       return orgDao.save(org);
+        try{
+            org = orgDao.save(org);
+        } catch (Exception e) {
+            map.put("error", "系统错误，请联系管理员！");
+        }
+
+        map.put("id", org.getId());
+        map.put("success", "保存成功");
+        return map;
     }
 
     //提交机构申请

donate-console/src/main/java/com/uas/console/donate/service/OrgService.java

@@ -4,7 +4,7 @@ package com.uas.console.donate.service;
 import com.uas.console.donate.model.Org;
 import org.springframework.data.domain.Page;
 import org.springframework.data.domain.Pageable;
-import org.springframework.data.repository.query.Param;
+import org.springframework.ui.ModelMap;
 
 import java.util.List;
 
@@ -16,7 +16,7 @@ public interface OrgService {
     Org show(Long uuid);
 
     //保存机构
-    Org save(Org org);
+    ModelMap save(Org org);
 
     //提交机构申请
     Org sumbit(Org org);

donate-console/src/main/webapp/WEB-INF/views/index.html

@@ -99,7 +99,7 @@
                         <li id=""><a href="listOfInstitutions">机构列表</a></li>
                         <li id=""><a href="userList">用户列表</a></li>
                         <li id=""><a href="permissionsSettings">权限设置</a></li>
-                        <li id=""><a href="selectInstitutionsNature">机构入驻</a></li>
+                        <li id=""><a ui-sref="selectInstitutionsNature">机构入驻</a></li>
                     </ul>
                 </li>
                 <li class="treeview" id="customers">

donate-console/src/main/webapp/resources/js/index/app.js

@@ -2,9 +2,9 @@
  * index
  *
  */
-define([ 'angularAMD', 'ui.router', 'ui-bootstrap', 'ngLocal', 'ngTable', 'common/directives', 'common/services', 'angular-toaster', 'ngSanitize', 'services/Project'], function(angularAMD) {
+define([ 'angularAMD', 'ui.router', 'ui-bootstrap', 'ngLocal', 'ngTable', 'common/directives', 'common/services', 'angular-toaster', 'ngSanitize', 'services/Project', 'services/Organization'], function(angularAMD) {
 	'use strict';
-	var app = angular.module('myApp', [ 'ui.router', 'ui.bootstrap', 'ng.local', 'ngTable', 'common.directives', 'common.services', 'toaster', 'ProjectService']);
+	var app = angular.module('myApp', [ 'ui.router', 'ui.bootstrap', 'ng.local', 'ngTable', 'common.directives', 'common.services', 'toaster', 'ProjectService', 'OrganizationService']);
 	app.init = function() {
 		angularAMD.bootstrap(app);
 	};
@@ -46,6 +46,15 @@ define([ 'angularAMD', 'ui.router', 'ui-bootstrap', 'ngLocal', 'ngTable', 'commo
             title : '项目发起完成',
             templateUrl : 'static/view/project/project_launch_3.html',
             controller : 'ProjectNewCtrl'
+        }).state("selectInstitutionsNature", {
+            url : '/selectInstitutionsNature',
+            title : '机构入驻选择',
+            templateUrl : 'static/view/user/selectInstitutionsNature.html',
+        }).state("charityCertificationStep1", {
+            url : '/charityCertificationStep1',
+            title : '公益机构认证第一步',
+            templateUrl : 'static/view/user/charityCertification1.html',
+            controller : 'charityCertificationStep1Ctrl'
         });
 	}]);
 
@@ -336,6 +345,67 @@ define([ 'angularAMD', 'ui.router', 'ui-bootstrap', 'ngLocal', 'ngTable', 'commo
 
     }]);
 
+    /**
+     * 公益机构认证第一步
+     */
+    app.controller('charityCertificationStep1Ctrl', ['$scope', '$http', '$rootScope', '$timeout', 'toaster', 'Organization',
+        function ($scope, $http, $rootScope, $timeout, toaster, Organization) {
+
+            // 获取当前账户注册机构情况
+            Organization.getByUuid({uuid : "10041166"}, {}, function(data) {//154534654
+                $scope.org = data;
+            }, function() {
+                toaster.pop('error', '注册情况加载失败');
+            });
+
+            // 获取地址信息
+            $http.get('resources/citydata/city.json', {
+                "Accept": "application/json;charset=utf-8", "Accept-Charset": "charset=utf-8"
+            }).then(function (response) {
+                $scope.provinces = response.data;
+            });
+
+            $scope.openDatePicker = function ($event, item, openParam) {
+                $event.preventDefault();
+                $event.stopPropagation();
+                item[openParam] = !item[openParam];
+            };
+
+
+            //提交
+            $scope.register = function (org) {
+                org.type = 2;//机构类别（1:公募 2：非公募)
+                //var file = $scope.myFiles, file = file && file.length > 0 ? file[0] : null;// 可以不传附件
+                $http({
+                    method : 'POST',
+                    url : '/org/save',
+                    params : {
+                        jsonStr : org
+                    },
+                }).success(function (data) {
+                    if (data.success) {
+                        toaster.pop('success', '提示', '保存成功');
+                        $timeout(function () {
+                            //提交后跳转到下一页，防止重复提交
+                            window.location.href = "#/charityCertification2？orgId=" + data.id;
+                        }, 500);
+                    }
+                    if (data.error) {
+                        toaster.pop('error', '提示', data.error);
+                    }
+
+                }).error(function (data, status) {
+                    $scope.loadingShow = false;
+                    if (status == 403) {
+                        toaster.pop('error', '操作失败', data);
+                    } else {
+                        toaster.pop('error', '操作失败', data.error);
+                    }
+                });
+            };
+        }]);
+
+
 
-	return app;
+    return app;
 });

donate-console/src/main/webapp/resources/js/index/services/Organization.js

@@ -0,0 +1,73 @@
+define ([ 'ngResource' ], function() {
+    angular.module('OrganizationService', ['ngResource']).factory('Organization', ['$resource', function ($resource) {
+        return $resource ('Organization', {}, {
+            // 获取机构已注册信息
+            getByUuid: {
+                url: 'org/show',
+                method: 'GET',
+                params: {
+                    uuid: 'uuid'
+                }
+            },
+
+
+            getAudited: {
+                params : {
+                    _state: 'done'
+                }
+            },
+            getUnaudited: {
+                params : {
+                    _state: 'todo'
+                }
+            },
+            getDisagreed: {
+                params : {
+                    _state: 'refused'
+                }
+            },
+            // 获取项目详情
+            getDetailById: {
+                url: 'project/detail/:id',
+                method: 'GET',
+                params: {
+                    id: 'id'
+                }
+            },
+            save: {
+                url: 'project/save',
+                method: 'POST'
+            },
+            // 获取所有项目进度
+            getSchedules: {
+                url:'projectEvolve/getSchedules',
+                method: 'GET'
+            },
+            // 获取项目所有捐款明细
+            getRecords: {
+                url:'projectrecode/getRecords',
+                method:'GET'
+            },
+            // 获取财务支出
+            getFinance: {
+                url:'projectFinance/getFinance',
+                method: 'GET'
+            },
+            // 重新申请
+            reapply: {
+                url: 'project/reapply',
+                method: 'POST'
+            },
+            // 审核同意
+            agree: {
+                url: 'project/approve',
+                method: 'POST'
+            },
+            // 审核不同意
+            disagree: {
+                url: 'project/unapprove',
+                method: 'POST'
+            }
+        });
+    }]);
+});

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

@@ -0,0 +1,429 @@
+<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" class="fl"/>
+                                <div class="fl read"><span>我已经阅读并同意<a href="">《优软一元捐用户协议》</a></span></div>
+                            </div>
+                            <a ui-sref="charityCertification1" class="btn">确定，下一步</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>

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

@@ -0,0 +1,653 @@
+<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;
+    }
+
+    .detail div.submitBtn {
+        margin: 85px 0 60px 130px;
+    }
+
+    .detail .text-left a:first-child {
+        margin-right: 60px;
+        display: inline-block;
+        width: 160px;
+        height: 34px;
+        line-height: 34px;
+        text-align: center;
+        font-size: 16px;
+        color: #fff;
+        background: #ff7624;
+        border-radius: 3px;
+        border: none;
+    }
+
+    .detail .text-left a:first-child:hover {
+        background: #be3b1b;
+    }
+
+    .detail .text-left a:last-child {
+        display: inline-block;
+        width: 130px;
+        height: 34px;
+        line-height: 34px;
+        text-align: center;
+        font-size: 16px;
+        color: #fff;
+        background: #a0a0a0;
+        border-radius: 3px;
+        border: none;
+    }
+</style>
+<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-datetimepicker/2.5.4/jquery.datetimepicker.css">
+<!--主体内容-->
+<div class="content-wrapper" style="min-height: 924px;; z-index: 50;">
+    <!-- Main content -->
+    <form name="charityCertification1">
+        <section class="content">
+            <div class="container">
+                <div class="section">
+                    <div class="instruction"><span>公益1机构认证</span><span>（以下所有信息均为必填项）</span></div>
+                    <div class="choose">
+                        <div class="chooseNav">
+                            <span class="step1 active">1、注册信息</span><span class="step2 active">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">
+                                <div class="message">
+                                    <span>机构基本信息</span>
+                                </div>
+                                <form action="">
+                                    <div class="form-group clearfix">
+                                        <label for="" class="fl control-label">优软账号</label>
+                                        <input required="true" type="text" class="fl form-control" ng-maxlength="15" placeholder="请输入企业UU号" ng-model="org.uuid">
+                                    </div>
+                                    <div class="form-group clearfix">
+                                        <label for="" class="fl control-label">机构全称</label>
+                                        <input required="true" type="text" class="fl form-control" placeholder="请输入机构全称" ng-model="org.name">
+                                        <span class="control-help fl">（请填写机构全称，例如：优软公益慈善基金会）</span>
+                                    </div>
+                                    <div class="form-group clearfix">
+                                        <label for="" class="fl control-label">机构电话</label>
+                                        <!--验证规则：区号+号码，区号以0开头，3位或4位号码由7位或8位数字组成区号与号码之间可以无连接符，也可以“-”连接
+                                        若电话号码与手机号码同时验证:(^(\d{3,4}-)?\d{7,8})$|(13[0-9]{9})-->
+                                        <input required="true" type="text" class="fl form-control" ng-parttern="/^0\d{2,3}-?\d{7,8}$/" ng-model="org.telphone">
+                                        <span class="control-help fl">（请填写机构常用联系电话，例如：0755-26994808）</span>
+                                    </div>
+                                    <div class="form-group clearfix">
+                                        <label for="" class="fl control-label">常驻地址</label>
+                                        <div class="select-group fl">
+                                            <select required="true" name="" id=""  ng-model="org.province" ng-options="key as key for (key,value) in provinces" ng-change="org.city='';">
+                                                <option value="">请选择</option>
+                                            </select>
+                                            <span>省</span>
+                                        </div>
+                                        <div class="select-group fl">
+                                            <select required="true" name="" id="" ng-model="org.city" ng-options="key as key for (key,value) in provinces[org.province]">
+                                                <option value="">请选择</option>
+                                            </select>
+                                            <span>市</span>
+                                        </div>
+                                        <div class="select-group fl">
+                                            <input required="true" type="text" placeholder="详细地址" class="form-control" ng-model="org.address">
+                                        </div>
+                                    </div>
+                                </form>
+                                <div class="message">
+                                    <span>机构现状</span>
+                                </div>
+                                <form action="">
+                                    <div class="form-group clearfix">
+                                        <label for="" class="fl control-label">机构登记性质</label>
+                                        <select required="true" name="" id="" class="fl" ng-model="org.regType">
+                                            <option value="">请选择</option>
+                                            <option value="公益机构">公益机构</option>
+                                        </select>
+                                    </div>
+                                    <div class="form-group clearfix">
+                                        <label for="" class="fl control-label">主要领域</label>
+                                        <div class="area fl" ng-model="org.majorArea">
+                                            <span>疾病援助</span><span>扶贫/救灾</span><span>教育/助学</span><span>环境/动物保护</span><span>其他</span>
+                                        </div>
+                                    </div>
+                                    <div class="form-group clearfix">
+                                        <label for="" class="fl control-label">年募捐额</label>
+                                        <select required="true" name="" id="" class="fl" ng-model="org.yearDonationAmount">
+                                            <option value="">请选择</option>
+                                            <option value="100w-1000w">100w-1000w</option>
+                                            <option value="1000w-10000w">1000w-10000w</option>
+                                            <option value="大于10000w">大于10000w</option>
+                                        </select>
+                                        <span class="fl control-help">（请选择机构上一年的全年募款金额）</span>
+                                    </div>
+                                    <div class="form-group clearfix">
+                                        <label for="" class="fl control-label">机构规模</label>
+                                        <div class="select-group fl">
+                                            <span class="count">全职人数</span>
+                                            <select required="true" name="" id="" ng-model="org.fullTimePopulation">
+                                                <option value="">请选择</option>
+                                                <option value="10-100">10-100</option>
+                                                <option value="100-500">100-500</option>
+                                                <option value="超过500">超过500</option>
+                                            </select>
+                                        </div>
+                                        <div class="select-group fl">
+                                            <span>兼职人数</span>
+                                            <select required="true" name="" id="" ng-model="org.partTimePopulation">
+                                                <option value="">请选择</option>
+                                                <option value="0-10">0-10</option>
+                                                <option value="10-50">10-50</option>
+                                                <option value="超过50">超过50</option>
+                                            </select>
+                                        </div>
+                                        <div class="select-group fl">
+                                            <span>志愿者人数</span>
+                                            <select required="true" name="" id="" ng-model="org.voluntaryPopulation">
+                                                <option value="">请选择</option>
+                                                <option value="0-10">0-10</option>
+                                                <option value="10-50">10-50</option>
+                                                <option value="超过50">超过50</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                    <div class="form-group input-group input-group-xs input-trigger clearfix">
+                                        <label for="" class="fl control-label">成立日期</label>
+                                        <!--<input type="text" class="fl form-control" ng-model="org.createTime">-->
+                                        <input type="text" ng-model="org.createTime"
+                                               class="f1 form-control" placeholder="到"
+                                               datepicker-popup="yyyy-MM-dd" is-open="org.$toOpened"
+                                               ng-required="true"
+                                               current-text="今天" clear-text="清除" close-text="关闭"
+                                               datepicker-options="{formatDayTitle: 'yyyy年M月', formatMonth: 'M月', showWeeks: false}"
+                                               ng-focus="openDatePicker($event, org, '$toOpened')">
+									</span>
+                                    </div>
+                                    <div class="form-group clearfix home">
+                                        <label for="" class="fl control-label">官方主页</label>
+                                        <div class="fl text-left">
+                                            <input required="true" type="text" class="form-control" ng-model="org.website">
+                                            <p class="tip">（请填写您的官网地址，或者机构新浪微博地址，没有设置访问权限的QQ空间、微信公众号推送文章链接其中任意一个）</p>
+                                        </div>
+                                    </div>
+                                    <div class="form-group clearfix home">
+                                        <label for="" class="fl control-label">机构简介</label>
+                                        <div class="fl text-left">
+                                            <textarea required="true" name="" id="" cols="30" rows="10" class="fl"
+                                                      ng-model="org.summary"
+                                                      placeholder="筹款来源、特色项目、服务片区、机构愿景、希望解决的社会问题等"></textarea>
+                                            <p class="tip">机构简介建议保持在200~500字。</p>
+                                        </div>
+                                    </div>
+                                    <div class="form-group clearfix">
+                                        <label for="" class="fl">验证码</label>
+                                        <input type="text" class="form-control valid fl">
+                                        <div class="clearfix valida">
+                                            <span>BBPf</span><a href="">刷新验证码</a>
+                                        </div>
+                                    </div>
+                                    <div class="text-left submitBtn">
+                                        <button type="submit" ng-click="register(org)" ng-disabled="charityCertification1.$invalid">保存，下一步</button><a href="charityCertification">返回上一页</a></div>
+                                    <!--<div class="text-left submitBtn"><a href="charityCertification2">保存，下一步</a><a href="charityCertification">返回上一页</a></div>-->
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </form>
+</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>

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

@@ -0,0 +1,570 @@
+<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;
+    }
+
+    .detail div.submitBtn {
+        margin: 85px 0 60px 130px;
+    }
+
+    .detail .text-left a:first-child {
+        margin-right: 60px;
+        display: inline-block;
+        width: 160px;
+        height: 34px;
+        line-height: 34px;
+        text-align: center;
+        font-size: 16px;
+        color: #fff;
+        background: #ff7624;
+        border-radius: 3px;
+        border: none;
+    }
+
+    .detail .text-left a:first-child:hover {
+        background: #be3b1b;
+    }
+
+    .detail .text-left a:last-child {
+        display: inline-block;
+        width: 130px;
+        height: 34px;
+        line-height: 34px;
+        text-align: center;
+        font-size: 16px;
+        color: #fff;
+        background: #a0a0a0;
+        border-radius: 3px;
+        border: none;
+    }
+</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 active">2、机构信息</span><span
+                            class="step2 active">3、联系人信息</span><span class="step2 steps">4、材料证明</span><span
+                            class="step3">5、完成注册</span>
+                    </div>
+                    <div class="chooseDetail">
+                        <!--联系人信息-->
+                        <div class="detail">
+                            <div class="message">
+                                <span>机构负责人</span>
+                            </div>
+                            <form action="">
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">负责人姓名</label>
+                                    <input type="text" class="fl form-control" ng-model="org.managerName">
+                                    <span class="control-help fl">（请填写机构当前负责人姓名）</span>
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">身份证号</label>
+                                    <input type="text" class="fl form-control" ng-model="org.managerIdcard">
+                                    <span class="control-help fl">（请填写机构当前负责人身份证号码）</span>
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">办公电话</label>
+                                    <input type="text" class="fl form-control" ng-model="org.managerOph">
+                                    <span class="control-help fl">（请填写机构当前负责人有效联系电话）</span>
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">个人手机</label>
+                                    <input type="text" class="fl form-control" ng-model="org.managerMobile">
+                                    <span class="control-help fl">（请填写机构当前负责人常用联系手机号码）</span>
+                                </div>
+                            </form>
+                            <div class="message">
+                                <span>主要联系人</span>
+                            </div>
+                            <form action="">
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">负责人姓名</label>
+                                    <input type="text" class="fl form-control" ng-model="org.contactName">
+                                    <span class="control-help fl">（请填写机构当前联系人姓名）</span>
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">身份证号</label>
+                                    <input type="text" class="fl form-control" ng-model="org.contactIdcard">
+                                    <span class="control-help fl">（请填写机构当前联系人身份证号码）</span>
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">办公电话</label>
+                                    <input type="text" class="fl form-control" ng-model="org.contactTel">
+                                    <span class="control-help fl">（请填写机构当前联系人有效联系电话）</span>
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">个人手机</label>
+                                    <input type="text" class="fl form-control" ng-model="org.contactEmail">
+                                    <span class="control-help fl">（请填写机构当前联系人电子邮箱）</span>
+                                </div>
+                                <div class="text-left submitBtn" style="margin-top: 55px;"><a
+                                        href="charityCertification3">保存，下一步</a><a href="charityCertification1">返回上一页</a>
+                                </div>
+                            </form>
+                        </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>

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

@@ -0,0 +1,576 @@
+<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;
+    }
+
+    .detail div.submitBtn {
+        margin: 85px 0 60px 130px;
+    }
+
+    .detail .text-left a:first-child {
+        margin-right: 60px;
+        display: inline-block;
+        width: 160px;
+        height: 34px;
+        line-height: 34px;
+        text-align: center;
+        font-size: 16px;
+        color: #fff;
+        background: #ff7624;
+        border-radius: 3px;
+        border: none;
+    }
+
+    .detail .text-left a:first-child:hover {
+        background: #be3b1b;
+    }
+
+    .detail .text-left a:last-child {
+        display: inline-block;
+        width: 130px;
+        height: 34px;
+        line-height: 34px;
+        text-align: center;
+        font-size: 16px;
+        color: #fff;
+        background: #a0a0a0;
+        border-radius: 3px;
+        border: none;
+    }
+</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 active">2、机构信息</span><span
+                            class="step2 active">3、联系人信息</span><span class="step2 steps active">4、材料证明</span><span
+                            class="step3">5、完成注册</span>
+                    </div>
+                    <div class="chooseDetail">
+                        <!--材料证明-->
+                        <div class="detail">
+                            <div class="message">
+                                <span>机构银行卡信息</span>
+                            </div>
+                            <form action="">
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">机构开户名称</label>
+                                    <input type="text" class="fl form-control" ng-model="org.bankCardName">
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">开户银行支行</label>
+                                    <select name="" id="" class="fl bankChoose" ng-model="org.cardOfBank">
+                                        <option value="">请选择</option>
+                                    </select>
+                                    <input type="text" class="fl form-control bank-choose" ng-model="org.branchMessage">
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">银行账号</label>
+                                    <input type="text" class="fl form-control" ng-model="account">
+                                </div>
+                            </form>
+                            <div class="message">
+                                <span>机构logo及证书</span>
+                            </div>
+                            <div class="certificate">
+                                <div class="certificate-item clearfix">
+                                    <span class="fl">上传机构logo</span>
+                                    <div class="fl uploadImg">
+                                        <button>上传图片</button>
+                                        <input type="file">
+                                    </div>
+                                </div>
+                                <div class="certificate-item clearfix">
+                                    <span class="fl">慈善组织法人登记证书（加盖慈善机构红章）</span>
+                                    <div class="fl uploadImg">
+                                        <button>上传图片</button>
+                                        <input type="file">
+                                        <a href="">查看样式</a>
+                                    </div>
+                                </div>
+                                <div class="certificate-item clearfix">
+                                    <span class="fl">慈善组织公开募捐资格证书（加盖机构红章）</span>
+                                    <div class="fl uploadImg">
+                                        <button>上传图片</button>
+                                        <input type="file">
+                                        <a href="">查看样式</a>
+                                    </div>
+                                </div>
+                                <div class="certificate-item clearfix">
+                                    <span class="fl">法人身份证（加盖机构红章）</span>
+                                    <div class="fl uploadImg">
+                                        <button>上传图片</button>
+                                        <input type="file">
+                                        <a href="">查看样式</a>
+                                    </div>
+                                </div>
+                                <div class="text-left submitBtn" style="margin-top: 75px;"><a
+                                        href="charityCertification4">保存，下一步</a><a href="charityCertification2">返回上一页</a>
+                                </div>
+                            </div>
+                        </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>

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

@@ -0,0 +1,520 @@
+<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;
+    }
+
+    .detail div.submitBtn {
+        margin: 85px 0 60px 130px;
+    }
+
+    .detail .text-left a:first-child {
+        margin-right: 60px;
+        display: inline-block;
+        width: 160px;
+        height: 34px;
+        line-height: 34px;
+        text-align: center;
+        font-size: 16px;
+        color: #fff;
+        background: #ff7624;
+        border-radius: 3px;
+        border: none;
+    }
+
+    .detail .text-left a:first-child:hover {
+        background: #be3b1b;
+    }
+
+    .detail .text-left a:last-child {
+        display: inline-block;
+        width: 130px;
+        height: 34px;
+        line-height: 34px;
+        text-align: center;
+        font-size: 16px;
+        color: #fff;
+        background: #a0a0a0;
+        border-radius: 3px;
+        border: none;
+    }
+</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 active">2、机构信息</span><span
+                            class="step2 active">3、联系人信息</span><span class="step2 steps active">4、材料证明</span><span
+                            class="step3 active">5、完成注册</span>
+                    </div>
+                    <div class="chooseDetail">
+                        <!--完成注册-->
+                        <div class="detail">
+                            <div class="complete"><img src="static/images/over.png" alt=""/><span>注册完成!</span></div>
+                            <!--<div class="look"><a href="launchProject"><button>发布项目</button></a></div>-->
+                            <a href="/" class="return">返回首页&gt;</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>

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

@@ -0,0 +1,553 @@
+<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;
+        outline: 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 input.nature[type='text'] {
+        padding-left: 10px;
+        width: 175px;
+        height: 34px;
+        font-size: 16px;
+        color: #313131;
+        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;
+    }
+
+    .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 a:first-child {
+        margin-right: 60px;
+        width: 160px;
+        height: 34px;
+        display: inline-block;
+        text-align: center;
+        line-height: 34px;
+        font-size: 16px;
+        color: #fff;
+        background: #ff7624;
+        border-radius: 3px;
+        border: none;
+        outline: none;
+    }
+
+    .detail .text-left a:first-child:hover {
+        background: #be3b1b;
+    }
+
+    .detail .text-left a:last-child {
+        width: 130px;
+        height: 34px;
+        display: inline-block;
+        text-align: center;
+        line-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;
+    }
+
+    /*募款资料*/
+    .certificate .certificate-item .uploadImg em {
+        font-size: 16px;
+        font-style: normal;
+        color: #505050;
+    }
+
+    .certificate .item {
+        margin-bottom: 30px;
+    }
+
+    .certificate .item span.name {
+        width: 160px;
+        margin-right: 63px;
+    }
+
+    .certificate .item:first-child {
+        margin-bottom: 45px;
+    }
+
+    .certificate .certificate-item .uploadImg span.txt-info {
+        margin-left: 20px;
+        font-size: 12px;
+        color: #979797;
+    }
+
+    .certificate .important-txt {
+        margin-left: 60px;
+    }
+
+    .certificate .important-txt p {
+        margin-bottom: 5px;
+        font-size: 14px;
+        color: #505050;
+    }
+
+    /*完成注册*/
+    .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 a {
+        display: inline-block;
+        width: 140px;
+        height: 34px;
+        line-height: 34px;
+        font-size: 16px;
+        color: #fff;
+        background: #ff7624;
+        border-radius: 3px;
+        border: none;
+    }
+
+    .detail .look a: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">4、材料证明</span><span class="step2 steps">5、募款资料</span><span
+                            class="step3">6、完成注册</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" class="fl"/>
+                                <div class="fl read"><span>我已经阅读并同意<a href="">《优软一元捐用户协议》</a></span></div>
+                            </div>
+                            <a class="btn" href="publicOfferingCertification1">确定，下一步</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>

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

@@ -0,0 +1,640 @@
+<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;
+        outline: 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 input.nature[type='text'] {
+        padding-left: 10px;
+        width: 175px;
+        height: 34px;
+        font-size: 16px;
+        color: #313131;
+        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;
+    }
+
+    .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 a:first-child {
+        margin-right: 60px;
+        width: 160px;
+        height: 34px;
+        display: inline-block;
+        text-align: center;
+        line-height: 34px;
+        font-size: 16px;
+        color: #fff;
+        background: #ff7624;
+        border-radius: 3px;
+        border: none;
+        outline: none;
+    }
+
+    .detail .text-left a:first-child:hover {
+        background: #be3b1b;
+    }
+
+    .detail .text-left a:last-child {
+        width: 130px;
+        height: 34px;
+        display: inline-block;
+        text-align: center;
+        line-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;
+    }
+
+    /*募款资料*/
+    .certificate .certificate-item .uploadImg em {
+        font-size: 16px;
+        font-style: normal;
+        color: #505050;
+    }
+
+    .certificate .item {
+        margin-bottom: 30px;
+    }
+
+    .certificate .item span.name {
+        width: 160px;
+        margin-right: 63px;
+    }
+
+    .certificate .item:first-child {
+        margin-bottom: 45px;
+    }
+
+    .certificate .certificate-item .uploadImg span.txt-info {
+        margin-left: 20px;
+        font-size: 12px;
+        color: #979797;
+    }
+
+    .certificate .important-txt {
+        margin-left: 60px;
+    }
+
+    .certificate .important-txt p {
+        margin-bottom: 5px;
+        font-size: 14px;
+        color: #505050;
+    }
+
+    /*完成注册*/
+    .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 a {
+        display: inline-block;
+        width: 140px;
+        height: 34px;
+        line-height: 34px;
+        font-size: 16px;
+        color: #fff;
+        background: #ff7624;
+        border-radius: 3px;
+        border: none;
+    }
+
+    .detail .look a: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 active">2、机构信息</span><span
+                            class="step2">3、联系人信息</span><span class="step2">4、材料证明</span><span class="step2 steps">5、募款资料</span><span
+                            class="step3">6、完成注册</span>
+                    </div>
+                    <div class="chooseDetail">
+                        <!--机构信息-->
+                        <div class="detail">
+                            <div class="message">
+                                <span>机构基本信息</span>
+                            </div>
+                            <form action="">
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">优软账号</label>
+                                    <input type="text" class="fl form-control">
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">机构全称</label>
+                                    <input type="text" class="fl form-control">
+                                    <span class="control-help fl">（请填写机构在银行的开户名称，例如：优软公益慈善基金会）</span>
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">机构电话</label>
+                                    <input type="text" class="fl form-control">
+                                    <span class="control-help fl">（请填写机构常用联系电话，例如：0755-26994808）</span>
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">常驻地址</label>
+                                    <div class="select-group fl">
+                                        <select name="" id="">
+                                            <option value="">请选择</option>
+                                        </select>
+                                        <span>省</span>
+                                    </div>
+                                    <div class="select-group fl">
+                                        <select name="" id="">
+                                            <option value="">请选择</option>
+                                        </select>
+                                        <span>市</span>
+                                    </div>
+                                    <div class="select-group fl">
+                                        <input type="text" placeholder="详细地址" class="form-control">
+                                    </div>
+                                </div>
+                            </form>
+                            <div class="message">
+                                <span>机构现状</span>
+                            </div>
+                            <form action="">
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">机构登记性质</label>
+                                    <input type="text" class="fl form-control nature" placeholder="慈善组织（公募）"/>
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">主要领域</label>
+                                    <div class="area fl"><span>疾病援助</span><span>扶贫/救灾</span><span>教育/助学</span><span>环境/动物保护</span><span>其他</span>
+                                    </div>
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">年募捐额</label>
+                                    <select name="" id="" class="fl">
+                                        <option value="">请选择</option>
+                                    </select>
+                                    <span class="fl control-help">（请选择机构上一年的全年募款金额）</span>
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">机构规模</label>
+                                    <div class="select-group fl">
+                                        <span class="count">全职人数</span>
+                                        <select name="" id="">
+                                            <option value="">请选择</option>
+                                        </select>
+                                    </div>
+                                    <div class="select-group fl">
+                                        <span>兼职人数</span>
+                                        <select name="" id="">
+                                            <option value="">请选择</option>
+                                        </select>
+                                    </div>
+                                    <div class="select-group fl">
+                                        <span>志愿者人数</span>
+                                        <select name="" id="">
+                                            <option value="">请选择</option>
+                                        </select>
+                                    </div>
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">成立日期</label>
+                                    <input type="text" class="fl form-control">
+                                </div>
+                                <div class="form-group clearfix home">
+                                    <label for="" class="fl control-label">官方主页</label>
+                                    <div class="fl text-left">
+                                        <input type="text" class="form-control">
+                                        <p class="tip">（请填写您的官网地址，或者机构新浪微博地址，没有设置访问权限的QQ空间、微信公众号推送文章链接其中任意一个）</p>
+                                    </div>
+                                </div>
+                                <div class="form-group clearfix home">
+                                    <label for="" class="fl control-label">机构简介</label>
+                                    <div class="fl text-left">
+                                        <textarea name="" id="" cols="30" rows="10" class="fl"
+                                                  placeholder="筹款来源、特色项目、服务片区、机构愿景、希望解决的社会问题等"></textarea>
+                                        <p class="tip">机构简介建议保持在200~500字。</p>
+                                    </div>
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl">验证码</label>
+                                    <input type="text" class="form-control valid fl">
+                                    <div class="clearfix valida">
+                                        <span>BBPf</span><a href="">刷新验证码</a>
+                                    </div>
+                                </div>
+                                <div class="text-left submitBtn"><a href="publicOfferingCertification2">保存，下一步</a><a
+                                        href="publicOfferingCertification">返回上一页</a></div>
+                            </form>
+                        </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>

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

@@ -0,0 +1,586 @@
+<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;
+        outline: 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 input.nature[type='text'] {
+        padding-left: 10px;
+        width: 175px;
+        height: 34px;
+        font-size: 16px;
+        color: #313131;
+        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;
+    }
+
+    .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 a:first-child {
+        margin-right: 60px;
+        width: 160px;
+        height: 34px;
+        display: inline-block;
+        text-align: center;
+        line-height: 34px;
+        font-size: 16px;
+        color: #fff;
+        background: #ff7624;
+        border-radius: 3px;
+        border: none;
+        outline: none;
+    }
+
+    .detail .text-left a:first-child:hover {
+        background: #be3b1b;
+    }
+
+    .detail .text-left a:last-child {
+        width: 130px;
+        height: 34px;
+        display: inline-block;
+        text-align: center;
+        line-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;
+    }
+
+    /*募款资料*/
+    .certificate .certificate-item .uploadImg em {
+        font-size: 16px;
+        font-style: normal;
+        color: #505050;
+    }
+
+    .certificate .item {
+        margin-bottom: 30px;
+    }
+
+    .certificate .item span.name {
+        width: 160px;
+        margin-right: 63px;
+    }
+
+    .certificate .item:first-child {
+        margin-bottom: 45px;
+    }
+
+    .certificate .certificate-item .uploadImg span.txt-info {
+        margin-left: 20px;
+        font-size: 12px;
+        color: #979797;
+    }
+
+    .certificate .important-txt {
+        margin-left: 60px;
+    }
+
+    .certificate .important-txt p {
+        margin-bottom: 5px;
+        font-size: 14px;
+        color: #505050;
+    }
+
+    /*完成注册*/
+    .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 a {
+        display: inline-block;
+        width: 140px;
+        height: 34px;
+        line-height: 34px;
+        font-size: 16px;
+        color: #fff;
+        background: #ff7624;
+        border-radius: 3px;
+        border: none;
+    }
+
+    .detail .look a: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 active">2、机构信息</span><span
+                            class="step2 active">3、联系人信息</span><span class="step2">4、材料证明</span><span
+                            class="step2 steps">5、募款资料</span><span class="step3">6、完成注册</span>
+                    </div>
+                    <div class="chooseDetail">
+                        <!--联系人信息-->
+                        <div class="detail">
+                            <div class="message">
+                                <span>机构负责人</span>
+                            </div>
+                            <form action="">
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">负责人姓名</label>
+                                    <input type="text" class="fl form-control">
+                                    <span class="control-help fl">（请填写机构当前负责人姓名）</span>
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">身份证号</label>
+                                    <input type="text" class="fl form-control">
+                                    <span class="control-help fl">（请填写机构当前负责人身份证号码）</span>
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">办公电话</label>
+                                    <input type="text" class="fl form-control">
+                                    <span class="control-help fl">（请填写机构当前负责人有效联系电话）</span>
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">个人手机</label>
+                                    <input type="text" class="fl form-control">
+                                    <span class="control-help fl">（请填写机构当前负责人常用联系手机号码）</span>
+                                </div>
+                            </form>
+                            <div class="message">
+                                <span>主要联系人</span>
+                            </div>
+                            <form action="">
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">负责人姓名</label>
+                                    <input type="text" class="fl form-control">
+                                    <span class="control-help fl">（请填写机构当前联系人姓名）</span>
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">身份证号</label>
+                                    <input type="text" class="fl form-control">
+                                    <span class="control-help fl">（请填写机构当前联系人身份证号码）</span>
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">办公电话</label>
+                                    <input type="text" class="fl form-control">
+                                    <span class="control-help fl">（请填写机构当前联系人有效联系电话）</span>
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">个人手机</label>
+                                    <input type="text" class="fl form-control">
+                                    <span class="control-help fl">（请填写机构当前联系人电子邮箱）</span>
+                                </div>
+                                <div class="text-left submitBtn" style="margin-top: 55px;"><a
+                                        href="publicOfferingCertification3">保存，下一步</a><a
+                                        href="publicOfferingCertification1">返回上一页</a></div>
+                            </form>
+                        </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>

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

@@ -0,0 +1,593 @@
+<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;
+        outline: 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 input.nature[type='text'] {
+        padding-left: 10px;
+        width: 175px;
+        height: 34px;
+        font-size: 16px;
+        color: #313131;
+        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;
+    }
+
+    .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 a:first-child {
+        margin-right: 60px;
+        width: 160px;
+        height: 34px;
+        display: inline-block;
+        text-align: center;
+        line-height: 34px;
+        font-size: 16px;
+        color: #fff;
+        background: #ff7624;
+        border-radius: 3px;
+        border: none;
+        outline: none;
+    }
+
+    .detail .text-left a:first-child:hover {
+        background: #be3b1b;
+    }
+
+    .detail .text-left a:last-child {
+        width: 130px;
+        height: 34px;
+        display: inline-block;
+        text-align: center;
+        line-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;
+    }
+
+    /*募款资料*/
+    .certificate .certificate-item .uploadImg em {
+        font-size: 16px;
+        font-style: normal;
+        color: #505050;
+    }
+
+    .certificate .item {
+        margin-bottom: 30px;
+    }
+
+    .certificate .item span.name {
+        width: 160px;
+        margin-right: 63px;
+    }
+
+    .certificate .item:first-child {
+        margin-bottom: 45px;
+    }
+
+    .certificate .certificate-item .uploadImg span.txt-info {
+        margin-left: 20px;
+        font-size: 12px;
+        color: #979797;
+    }
+
+    .certificate .important-txt {
+        margin-left: 60px;
+    }
+
+    .certificate .important-txt p {
+        margin-bottom: 5px;
+        font-size: 14px;
+        color: #505050;
+    }
+
+    /*完成注册*/
+    .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 a {
+        display: inline-block;
+        width: 140px;
+        height: 34px;
+        line-height: 34px;
+        font-size: 16px;
+        color: #fff;
+        background: #ff7624;
+        border-radius: 3px;
+        border: none;
+    }
+
+    .detail .look a: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 active">2、机构信息</span><span
+                            class="step2 active">3、联系人信息</span><span class="step2 active">4、材料证明</span><span
+                            class="step2 steps">5、募款资料</span><span class="step3">6、完成注册</span>
+                    </div>
+                    <div class="chooseDetail">
+                        <!--材料证明-->
+                        <div class="detail">
+                            <div class="message">
+                                <span>机构银行卡信息</span>
+                            </div>
+                            <form action="">
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">机构开户名称</label>
+                                    <input type="text" class="fl form-control">
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">开户银行支行</label>
+                                    <select name="" id="" class="fl bankChoose">
+                                        <option value="">请选择</option>
+                                    </select>
+                                    <input type="text" class="fl form-control bank-choose">
+                                </div>
+                                <div class="form-group clearfix">
+                                    <label for="" class="fl control-label">银行账号</label>
+                                    <input type="text" class="fl form-control">
+                                </div>
+                            </form>
+                            <div class="message">
+                                <span>机构logo及证书</span>
+                            </div>
+                            <div class="certificate">
+                                <div class="certificate-item clearfix">
+                                    <span class="fl">上传机构logo</span>
+                                    <div class="fl uploadImg">
+                                        <button>上传图片</button>
+                                        <input type="file">
+                                    </div>
+                                </div>
+                                <div class="certificate-item clearfix">
+                                    <span class="fl">慈善组织法人登记证书（加盖慈善机构红章）</span>
+                                    <div class="fl uploadImg">
+                                        <button>上传图片</button>
+                                        <input type="file">
+                                        <a href="">查看样式</a>
+                                    </div>
+                                </div>
+                                <div class="certificate-item clearfix">
+                                    <span class="fl">慈善组织公开募捐资格证书（加盖机构红章）</span>
+                                    <div class="fl uploadImg">
+                                        <button>上传图片</button>
+                                        <input type="file">
+                                        <a href="">查看样式</a>
+                                    </div>
+                                </div>
+                                <div class="certificate-item clearfix">
+                                    <span class="fl">法人身份证（加盖机构红章）</span>
+                                    <div class="fl uploadImg">
+                                        <button>上传图片</button>
+                                        <input type="file">
+                                        <a href="">查看样式</a>
+                                    </div>
+                                </div>
+                                <div class="text-left submitBtn" style="margin-top: 75px;"><a
+                                        href="publicOfferingCertification4">保存，下一步</a><a
+                                        href="publicOfferingCertification2">返回上一页</a></div>
+                            </div>
+                        </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>

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

@@ -0,0 +1,570 @@
+<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;
+        outline: 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 input.nature[type='text'] {
+        padding-left: 10px;
+        width: 175px;
+        height: 34px;
+        font-size: 16px;
+        color: #313131;
+        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;
+    }
+
+    .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 a:first-child {
+        margin-right: 60px;
+        width: 160px;
+        height: 34px;
+        display: inline-block;
+        text-align: center;
+        line-height: 34px;
+        font-size: 16px;
+        color: #fff;
+        background: #ff7624;
+        border-radius: 3px;
+        border: none;
+        outline: none;
+    }
+
+    .detail .text-left a:first-child:hover {
+        background: #be3b1b;
+    }
+
+    .detail .text-left a:last-child {
+        width: 130px;
+        height: 34px;
+        display: inline-block;
+        text-align: center;
+        line-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;
+    }
+
+    /*募款资料*/
+    .certificate .certificate-item .uploadImg em {
+        font-size: 16px;
+        font-style: normal;
+        color: #505050;
+    }
+
+    .certificate .item {
+        margin-bottom: 30px;
+    }
+
+    .certificate .item span.name {
+        width: 160px;
+        margin-right: 63px;
+    }
+
+    .certificate .item:first-child {
+        margin-bottom: 45px;
+    }
+
+    .certificate .certificate-item .uploadImg span.txt-info {
+        margin-left: 20px;
+        font-size: 12px;
+        color: #979797;
+    }
+
+    .certificate .important-txt {
+        margin-left: 60px;
+    }
+
+    .certificate .important-txt p {
+        margin-bottom: 5px;
+        font-size: 14px;
+        color: #505050;
+    }
+
+    /*完成注册*/
+    .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 a {
+        display: inline-block;
+        width: 140px;
+        height: 34px;
+        line-height: 34px;
+        font-size: 16px;
+        color: #fff;
+        background: #ff7624;
+        border-radius: 3px;
+        border: none;
+    }
+
+    .detail .look a: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 active">2、机构信息</span><span
+                            class="step2 active">3、联系人信息</span><span class="step2 active">4、材料证明</span><span
+                            class="step2 steps active">5、募款资料</span><span class="step3">6、完成注册</span>
+                    </div>
+                    <div class="chooseDetail">
+                        <!--募款资料-->
+                        <div class="detail">
+                            <div class="message">
+                                <span>提交募捐资料</span>
+                            </div>
+                            <div class="certificate">
+                                <div class="certificate-item item clearfix">
+                                    <span class="fl name">您的机构</span>
+                                    <div class="fl uploadImg">
+                                        <em>注册机构名称</em>
+                                    </div>
+                                </div>
+                                <div class="certificate-item item clearfix">
+                                    <span class="fl name">XXX合作商户资料</span>
+                                    <div class="fl uploadImg">
+                                        <button>上传图片</button>
+                                        <input type="file">
+                                        <a href="">下载模板</a>
+                                        <span class="txt-info">（请根据模板要求填写对应内容）</span>
+                                    </div>
+                                </div>
+                                <div class="certificate-item item clearfix">
+                                    <span class="fl name">XXX结算银行账号证明</span>
+                                    <div class="fl uploadImg">
+                                        <button>上传图片</button>
+                                        <input type="file">
+                                        <a href="">下载模板</a>
+                                        <span class="txt-info">（请根据模板要求填写对应内容）</span>
+                                    </div>
+                                </div>
+                                <div class="important-txt text-left">
+                                    <p>重要说明：</p>
+                                    <p>1、您需要提交的相关资料，由优软一元捐代为办理在优软云平台的募捐账号。</p>
+                                    <p>2、所有上传图片大小不超过1M支持jpg、png格式。</p>
+                                </div>
+                                <div class="text-left submitBtn" style="margin-top: 35px;margin-left: 375px;"><a
+                                        href="publicOfferingCertification5">保存，下一步</a><a
+                                        href="publicOfferingCertification3">返回上一页</a></div>
+                            </div>
+                        </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>

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

@@ -0,0 +1,536 @@
+<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;
+        outline: 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 input.nature[type='text'] {
+        padding-left: 10px;
+        width: 175px;
+        height: 34px;
+        font-size: 16px;
+        color: #313131;
+        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;
+    }
+
+    .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 a:first-child {
+        margin-right: 60px;
+        width: 160px;
+        height: 34px;
+        display: inline-block;
+        text-align: center;
+        line-height: 34px;
+        font-size: 16px;
+        color: #fff;
+        background: #ff7624;
+        border-radius: 3px;
+        border: none;
+        outline: none;
+    }
+
+    .detail .text-left a:first-child:hover {
+        background: #be3b1b;
+    }
+
+    .detail .text-left a:last-child {
+        width: 130px;
+        height: 34px;
+        display: inline-block;
+        text-align: center;
+        line-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;
+    }
+
+    /*募款资料*/
+    .certificate .certificate-item .uploadImg em {
+        font-size: 16px;
+        font-style: normal;
+        color: #505050;
+    }
+
+    .certificate .item {
+        margin-bottom: 30px;
+    }
+
+    .certificate .item span.name {
+        width: 160px;
+        margin-right: 63px;
+    }
+
+    .certificate .item:first-child {
+        margin-bottom: 45px;
+    }
+
+    .certificate .certificate-item .uploadImg span.txt-info {
+        margin-left: 20px;
+        font-size: 12px;
+        color: #979797;
+    }
+
+    .certificate .important-txt {
+        margin-left: 60px;
+    }
+
+    .certificate .important-txt p {
+        margin-bottom: 5px;
+        font-size: 14px;
+        color: #505050;
+    }
+
+    /*完成注册*/
+    .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 a {
+        display: inline-block;
+        width: 140px;
+        height: 34px;
+        line-height: 34px;
+        font-size: 16px;
+        color: #fff;
+        background: #ff7624;
+        border-radius: 3px;
+        border: none;
+    }
+
+    .detail .look a: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 active">2、机构信息</span><span
+                            class="step2 active">3、联系人信息</span><span class="step2 active">4、材料证明</span><span
+                            class="step2 steps active">5、募款资料</span><span class="step3 active">6、完成注册</span>
+                    </div>
+                    <div class="chooseDetail">
+                        <!--完成注册-->
+                        <div class="detail">
+                            <div class="complete"><img src="static/images/over.png" alt=""/><span>注册完成!</span></div>
+                            <!--<div class="look"><a href="launchProject">发布项目</a></div>-->
+                            <a href="/" class="return">返回首页&gt;</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>

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

@@ -0,0 +1,132 @@
+
+<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>身份1说明</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 ui-sref="charityCertificationStep1">
+                                <div class="img">
+                                    <img src="static/images/non-public.png" alt=""/>
+                                </div>
+                                <p>公益机构</p>
+                                <span>适合慈善组织(务公开募捐资格证书)、民办非企业单位、社会团体、企业等，不具备直接面向公众募捐的性质</span>
+                            </a>
+                        </div>
+                        <div class="choose-item">
+                            <a ui-sref="publicOfferingCertification">
+                                <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>