donate-parent/donate-console/src/main/webapp/resources/view/project/project_launch_2.html

<!--主体内容-->
<style>

    textarea{ resize:none;}

    body{
        font-family: "Microsoft Yahei", "微软雅黑";
        box-sizing: border-box;
    }
    .clearfix {
        clear: both;
    }
    .section{
        margin: 0 auto;
        width: 1040px;
        min-height: 1845px;
        background: #fff;
        padding: 30px 20px 0 20px;
        overflow: hidden;
        text-align: center;
        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{
        margin-right: -13px;
        background: url(static/images/step02-1.png)no-repeat center center;
    }
    .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;
    }
    .choose .chooseDetail .detail .message{
        position: relative;
        margin: 0 auto;
        margin-bottom: 30px;
        width: 980px;
        height: 46px;
        line-height: 46px;
        text-align: left;
        background: #eeeeee;
    }
    .choose .chooseDetail .detail .message span{
        margin-left: 25px;
        font-size: 18px;
        font-weight: bold;
        color: #505050;
    }
    .choose .chooseDetail .detail .message span:before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 46px;
        background: #ff6000;
    }
    .form .form-group{
        margin-bottom: 22px;
        line-height: 34px;
    }
    .form .form-group label{
        margin-right: 60px;
        width: 80px;
        font-size: 16px;
        font-weight: normal;
        color: #505050;
    }
    .form .form-group input[type='text']{
        padding-left: 5px;
        width: 325px;
        height: 34px;
        border-radius: 0;
    }
    .form .form-group span.help-txt{
        margin-left: 10px;
        font-size: 12px;
        color: #969696;
    }
    .form .form-group div.sort{
        width: 800px;
        text-align: left;
    }
    .form .form-group div.sort span{
        margin: 0 20px 20px 0;
        padding: 0 13px;
        display: inline-block;
        height: 34px;
        line-height: 34px;
        font-size: 16px;
        color: #313131;
        border: 2px solid #dcdcdc;
        cursor: pointer;
    }
    .form .form-group div.sort span.active,.form .form-group div.sort span:hover{
        border: 2px solid #ed6216;
    }
    .form .form-group select{
        padding-left: 5px;
        width: 130px;
        height: 34px;
        cursor: pointer;
    }
    .form .form-groups .fl span{
        margin: 0 15px;
        font-size: 14px;
        color: #313131;
    }
    .form .form-group textarea{
        padding-left: 5px;
        width: 680px;
        height: 130px;
    }
    .form .form-group span.txt{
        margin-top: 10px;
        font-size: 12px;
        color: #979797;
        display: inline-block;
        text-align: left;
        width: 670px;
        line-height: 20px;
    }
    .form .form-group input.valid{
        padding-left: 5px;
        width: 130px;
        height: 34px;
    }
    .form .form-group div.valida{
        text-align: left;
        padding-left: 140px;
    }
    .form .form-group div.valida span{
        display: inline-block;
        width: 120px;
        height: 40px;
    }
    .form .form-group div.valida a{
        margin-left: 5px;
        font-size: 12px;
        color: #2a5bfb;
    }
    .form .text-left{
        margin-left: 140px;
    }
    .form .text-left .agree{
        margin-top: -7px;
    }
    .form .text-left .agree span{
        margin: 0 10px;
        font-size: 12px;
        color: #777;
    }
    .form .text-left .agree a{
        font-size: 12px;
        color: #2a5bfb;
    }
    .form .text-left a.btn{
        margin-bottom: 60px;
        display: inline-block;
        width: 160px;
        height: 34px;
        font-size: 16px;
        color: #fff;
        text-align: center;
        border-radius: 3px;
        background: #ff7624;
        border: none;
        outline: none;
    }
    .form .text-left a.btn:hover{
        background: #be3b1b;
    }
    /*项目详情*/
    .detail .list-item{
        margin-bottom: 40px;
    }
    .detail .list-item:first-child{
        margin-top: 60px;
    }
    .detail .list-item span.fl{
        padding-left: 20px;
        font-size: 16px;
        color: #515151;
    }
    .detail .list-item div.fl{
        margin-left: 65px;
        text-align: left;
        width: 770px;
    }
    .detail .list-item div.fl p{
        font-size: 16px;
        color: #505050;
    }
    .detail .list-item div.fl .computer{
        position: relative;
        margin-top: 22px;
    }
    .detail .list-item div.fl .computer span{
        display: inline-block ;
        width: 80px;
        font-size: 16px;
        color: #505050;
    }
    .detail .list-item div.fl .computer button {
        margin: 0 10px 0 35px;
        width: 110px;
        height: 34px;
        line-height: 34px;
        font-size: 16px;
        color: #505050;
        border: 1px solid #dcdcdc;
        border-radius: 3px;
        background: -webkit-linear-gradient(top, #fdfdfd 0%,#dadada 100%);
        background: -o-linear-gradient(top, #fdfdfd 0%,#dadada 100%);
        background: -ms-linear-gradient(top, #fdfdfd 0%,#dadada 100%);
        background: linear-gradient(to bottom, #fdfdfd 0%,#dadada 100%);
    }
    .detail .list-item div.fl .computer input[type='file']{
        position: absolute;
        top: 6px;
        left: 110px;
        width: 110px;
        height: 34px;
        opacity: 0;
        outline: none;
    }
    .detail .list-item div.fl .computer em{
        font-style: normal;
        font-size: 12px;
        color: #969696;
    }
    .detail .list-item div.fl .showImg{
        margin: 16px 0 0 120px;
        width: 180px;
        height: 180px;
    }
    .detail .list-item div.fl .showImg img{
        width: 180px;
        height: 180px;
    }
    .detail .list-item div.fl .showImg .hover-show{
        position: absolute;
        bottom: 0;
        width: 180px;
        height: 180px;
        line-height: 32px;
        background: rgba(0,0,0,.5);
        display: none;
    }
    .detail .list-item div.fl .showImg:hover .hover-show{
       display: block;
        /*height: 180px;*/
       /*transition: height .5s ease-out;*/
    }
    .detail .list-item div.fl .showImg .hover-show .fa:before{
        font-size: 18px;
        color: #fff;
    }
    .detail .list-item div.fl .showImg .hover-show .fa-trash:before{
        margin-right: 5px;
        position: absolute;
        top: 5px;
        right: 5px;
        z-index: 10000;
        cursor: pointer;
    }

    .detail .list-item div.fl .showImg .hover-show a{
        position: absolute;
        top: 74px;
        left: 70px;
        font-size: 16px;
        color: #fff;
    }
    .detail .list-item div.fl .phone{
        position: relative;
    }
    .detail .list-item div.fl .phone select{
        margin: 0 10px 0 20px;
        width: 180px;
        height: 34px;
        cursor: pointer;
    }
    .detail .list-item div.fl .phone em{
        position: absolute;
        top: 0;
        right: 55px;
        display: inline-block;
        width: 430px;
    }
    .detail .list-item div.fl .upload{
        margin-top: 10px;
        position: relative;
        background: url(static/images/plus.png) no-repeat center center;
        margin-left: 104px;
        width: 180px;
        height: 180px;
        border: 1px dashed #dcdcdc;
    }
    .detail .list-item div.fl .upload input[type='file']{
        position: absolute ;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        outline: none;
        opacity: 0;
        cursor: pointer;
    }
    .detail .list-item div.fl .uploadImg button{
        margin-left: -15px;
    }
    .detail .list-item div.fl .uploadImg input[type='file']{
        top: 0;
        left: -14px;
        opacity: 0;
        outline: none;
    }
    .detail .list-item div.fl span.intro{
        font-size: 12px;
        color: #979797;
    }
    .detail .list-item div.fl .item{
        margin-top: 22px;
    }
    .detail .list-item div.fl .item span{
        margin: 5px 35px 0 0;
        padding-left: 0;
        width: 70px;
        text-align:left;
        font-size: 16px;
        color: #515151;
    }
    .detail .list-item div.fl .item input[type='text']{
        padding-left: 15px;
        width: 325px;
        height: 34px;
        font-size: 16px;
        color: #969696;
        border-radius: 0;
    }
    .detail .list-item div.fl .items{
        position: relative;
    }
    .detail .list-item div.fl .items{
        position: relative;
    }
    .detail .list-item div.fl .items .button{
        position: relative;
        margin-left: -40px;
        width: 580px;
    }
    .detail .list-item div.fl .items .button button{
        margin: 0 10px 0 40px;
        width: 110px;
        height: 34px;
        line-height: 34px;
        font-size: 16px;
        color: #505050;
        border: 1px solid #dcdcdc;
        border-radius: 3px;
        background: -webkit-linear-gradient(top, #fdfdfd 0%,#dadada 100%);
        background: -o-linear-gradient(top, #fdfdfd 0%,#dadada 100%);
        background: -ms-linear-gradient(top, #fdfdfd 0%,#dadada 100%);
        background: linear-gradient(to bottom, #fdfdfd 0%,#dadada 100%);
    }
    .detail .list-item div.fl .items .button input[type='file']{
        padding-left: 15px;
        position: absolute;
        top: 7px;
        left: 40px;
        opacity: 0;
        width: 110px;
        outline: none;
    }
    .detail .list-item div.fl .item textarea{
        padding-left: 15px;
        width: 585px;
        height: 100px;
        font-size: 16px;
        color: #505050;
    }
    .detail .list-item .simple textarea{
        padding-left: 15px;
        width: 690px;
        height: 100px;
        font-size: 16px;
        color: #505050;
    }
    .detail .list-item .simple span{
        margin-top: 10px;
        font-size: 12px;
        color: #979797;
    }

    .detail .list-item .simple .note-editable ol,.detail .list-item .simple .note-editable ul{
        padding-left: 20px;
    }

    .detail .list-item .introduce{
        width: 780px;
        border: 1px solid #dcdcdc;
    }
    .detail .list-item .introduce .intro-header{
        width: 100%;
        height: 54px;
        line-height: 54px;
        background: -webkit-linear-gradient(top, #fff 0%,#dadada 100%);
        background: -o-linear-gradient(top, #fff 0%,#dadada 100%);
        background: -ms-linear-gradient(top, #fff 0%,#dadada 100%);
        background: linear-gradient(to bottom, #fff 0%,#dadada 100%);
    }
    .detail .list-item .introduce .intro-header span{
        font-size: 16px;
        color: #323232;
    }
    .detail .list-item .introduce .intro-header span img{
        margin-left: 30px;
    }
    .detail .list-item .introduce .intro-header span em{
        margin-left: 8px;
        font-size: 16px;
        color: #323232;
        font-style: normal;
    }
    .detail .list-item .introduce .intro-body{
        padding: 23px 20px 30px 20px;
    }
    .detail .list-item .introduce .intro-body p{
        font-size: 18px;
        font-weight: bold ;
        color: #323232;
    }
    .detail .list-item .introduce .intro-body span{
        margin-top: 15px;
        font-size: 14px;
        line-height: 21px;
        color: #505050;
    }
    .detail .list-item div.submitButton{
        margin: 34px 0 37px 148px;
        overflow: hidden;
        width: 850px;
    }
    .detail .list-item .submitButton div{
        float: left;
    }
    .detail .list-item .submitButton div button:first-child{
        margin-right: 25px;
        width: 160px;
        height: 34px;
        line-height: 34px;
        font-size: 16px;
        color: #fff;
        background: #ff7624;
        border-radius: 3px;
        border: none;
        outline: none;
    }
    .detail .list-item .submitButton div button:first-child:hover{
        background: #be3b1b;
    }
    .detail .list-item .submitButton div button:last-child{
        margin-right: 347px;
        width: 110px;
        height: 34px;
        line-height: 34px;
        font-size: 16px;
        color: #ff7624;
        background: #fff;
        border: 1px solid #ff7624;
        border-radius: 3px;
        outline: none;
    }
    .detail .list-item .submitButton a{
        display: inline-block;
        width: 130px;
        height: 34px;
        line-height: 34px;
        font-size: 16px;
        color: #fff;
        text-align: center;
        background: #a0a0a0;
        border-radius: 3px;
        border: none;
        outline: none;
    }
    .detail .list-item .submitButton a:first-child{
        margin-right: 25px;
        width: 160px;
        background: #ff7624;
    }
    /*完成提交*/
    .detail .complete{
        margin: 60px 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 .txt-intro{
        margin-bottom: 34px;
        font-size: 12px;
        color: #969696;
    }
    .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>
<!-- loading start -->
<div class="loading in" ng-class="{'in': loading}"><i></i></div>
<!-- loading end -->
<div class="content-wrapper" style="min-height: 924px;; z-index: 50;">
    <!-- Main content -->
    <section class="content">
        <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="step3">3、完成提交</span>
                </div>
                <form name="detailForm">
                    <div class="chooseDetail">
                        <!--项目详情-->
                        <div class="detail">
                            <div class="list-item clearfix">
                                <span class="fl">项目主图</span>
                                <div class="fl">
                                    <p>(为了让您的项目在不同终端下均能正常展示，请分别上传PC端和手机端的主图)</p>
                                    <div class="computer">
                                        <span>PC端主图</span>
                                        <button type="button">上传图片</button>
                                        <input type="file" ng-multiple="false" id="pcImg" accept="image/*" onchange='angular.element(this).scope().fileChanged(this, 0)'>
                                        <em>(最能代表项目的焦点图，图片尺寸不小于500*280px,支持jpg,gif,png格式，不超过10MB)</em>
                                        <div ng-if="null != pcImgUrl" class="showImg">
                                            <img src="{{pcImgUrl}}">
                                            <span class="hover-show">
                                                <em class="delete" title="删除" ng-click="clearFile('pcImg')"><em class="fa fa-2x fa-trash"></em></em>
                                                <a ng-click="showImg('pcImg')" title="点击查看大图"><em class="fa fa-search" style="margin-right: 5px;"></em>查看</a>
                                            </span>
                                        </div>

                                        <span class="error" ng-show="submited && pcImgUrl == null && project.pcImg == null">*请上传PC端主图</span>
                                    </div>
                                    <div class="computer">
                                        <span>手机端主图</span>
                                        <button>上传图片</button>
                                        <input type="file" ng-multiple="false" id="mobileImg" accept="image/*" onchange='angular.element(this).scope().fileChanged(this, 1)'>
                                        <em>(最能代表项目的焦点图，图片尺寸不小于500*280px,支持jpg,gif,png格式，不超过10MB)</em>
                                        <div ng-if="null != mobileImgUrl" class="showImg">
                                            <img src="{{mobileImgUrl}}">
                                            <span class="hover-show">
                                                <em class="delete" title="删除" ng-click="clearFile('mobileImg')"><em class="fa fa-2x fa-trash"></em></em>
                                                <a ng-click="showImg('mobileImg')" title="点击查看大图"><em class="fa fa-search" style="margin-right: 5px;"></em>查看</a>
                                            </span>
                                        </div>

                                        <span class="error" ng-show="submited && mobileImgUrl == null && project.mobileImg == null">*请上传手机端主图</span>
                                    </div>
                                </div>
                            </div>
                            <div class="list-item clearfix" style="margin-top: -20px;">
                                <span class="fl" style="margin-top: 30px;">手机列表图</span>
                                <div class="fl">
                                    <div class="computer uploadImg">
                                        <button>上传图片</button>
                                        <input type="file" ng-multiple="false" id="mobileListImg" accept="image/*" onchange='angular.element(this).scope().fileChanged(this, 2)'>
                                        <em>(最能代表项目的焦点图，图片尺寸不小于500*375像素以上,支持jpg,gif,png格式，不超过10MB)</em>
                                        <div ng-if="null != mobileListImgUrl" class="showImg" style="margin-left: -15px;">
                                            <img src="{{mobileListImgUrl}}">
                                            <span class="hover-show">
                                                <em class="delete" title="删除" ng-click="clearFile('mobileListImg')"><em class="fa fa-2x fa-trash"></em></em>
                                                <a ng-click="showImg('mobileListImg')" title="点击查看大图"><em class="fa fa-search" style="margin-right: 5px;"></em>查看</a>
                                            </span>
                                        </div>

                                        <span class="error" ng-show="submited && mobileListImgUrl == null && project.mobileListImg == null">*请上传手机列表图</span>
                                    </div>
                                </div>
                            </div>
                            <div class="list-item clearfix">
                                <span class="fl">发起人介绍</span>
                                <div class="fl" style="margin: 5px 0 0 50px;">
                                    <span class="intro"></span>
                                    <div class="item clearfix">
                                        <span class="fl">姓名</span>
                                        <input type="text" class="form-control fl" name="projectPersonName" ng-maxlength="20" ng-model="project.personName" placeholder="不超过二十个字" required>

                                        <span class="error" ng-show="submited && detailForm.projectPersonName.$error.required">*姓名不能为空</span>
                                        <span class="error" ng-show="submited && detailForm.projectPersonName.$error.maxlength">*姓名字数过长</span>
                                    </div>
                                    <div class="item items clearfix">
                                        <span class="fl">头像</span>
                                        <div class="button fl">
                                            <button>上传图片</button>
                                            <input type="file" ng-multiple="false" id="logo" accept="image/*" onchange='angular.element(this).scope().fileChanged(this, 3)'>
                                            <em>（图片尺寸不小于500*500px,不超过2MB）</em>
                                            <div ng-if="null != logoUrl" class="showImg" style="margin-left: 40px;">
                                                <img src="{{logoUrl}}">
                                                <span class="hover-show">
                                                    <em class="delete" title="删除" ng-click="clearFile('logo')"><em class="fa fa-2x fa-trash"></em></em>
                                                    <a ng-click="showImg('logo')" title="点击查看大图"><em class="fa fa-search" style="margin-right: 5px;"></em>查看</a>
                                                </span>
                                            </div>

                                            <span class="error" ng-show="submited && logoUrl == null && project.logo == null">*请上传手机列表图</span>
                                        </div>
                                    </div>
                                    <div class="item clearfix">
                                        <span class="fl">工作单位</span>
                                        <input type="text" class="form-control fl" name="projectWorkunit" ng-model="project.workunit" ng-maxlength="20" placeholder="不超过二十个字" required/>

                                        <span class="error" ng-show="submited && detailForm.projectWorkunit.$error.required">*工作单位不能为空</span>
                                        <span class="error" ng-show="submited && detailForm.projectWorkunit.$error.maxlength">*工作单位字数过长</span>
                                    </div>
                                    <div class="item clearfix">
                                        <span class="fl">联系电话</span>
                                        <input type="text" class="form-control fl" name="projectPersonTel" ng-model="project.personTel" ng-maxlength="20" placeholder="填写联系电话" required/>

                                        <span class="error" ng-show="submited && detailForm.projectPersonTel.$error.required">*联系电话不能为空</span>
                                        <span class="error" ng-show="submited && detailForm.projectPersonTel.$error.maxlength">*联系电话过长</span>
                                    </div>
                                    <div class="item clearfix">
                                        <span class="fl">个人简介</span>
                                        <textarea name="projectSummary" id="" cols="30" rows="10" ng-model="project.summary" ng-maxlength="60" placeholder="不超过六十个字" required></textarea>

                                        <span class="error" ng-show="submited && detailForm.projectSummary.$error.required">*个人简介不能为空</span>
                                        <span class="error" ng-show="submited && detailForm.projectSummary.$error.maxlength">*个人简介过长</span>
                                    </div>
                                </div>
                            </div>
                            <div class="list-item clearfix">
                                <span class="fl">项目简介</span>
                                <div class="fl simple">
                                    <textarea name="projectProSummary" cols="30" rows="10" ng-model="project.proSummary" ng-maxlength="27" placeholder="目的简单介绍，不超过27个字" required></textarea>

                                    <span class="error" ng-show="submited && detailForm.projectProSummary.$error.required">*项目简介不能为空</span>
                                    <span class="error" ng-show="submited && detailForm.projectProSummary.$error.maxlength">*项目简介过长</span>
                                    <br/>
                                </div>
                            </div>
                            <div class="list-item clearfix">
                                <span class="fl">项目介绍</span>
                                <div class="fl simple">
                                    <summernote lang="zh-CN" ng-model="project.introduction" height="300px">
                                        请填写介绍
                                    </summernote>

                                    <span class="error" ng-show="submited && project.introduction == null">*请填写项目介绍</span>
                                </div>
                                <div class="fl submitButton">
                                    <div class="sub">
                                        <button type="button" ng-click="saveDetail(project, true, detailForm.$invalid || !project.introduction ||
                                        (!pcImgUrl && !project.pcImg) || (!mobileImgUrl && !project.mobileImg) ||
                                        (!mobileListImgUrl && !project.mobileListImg) || (!logoUrl && !project.logo))">提交</button>
                                        <button type="button" ng-click="saveDetail(project, false)">保存草稿</button>
                                    </div>
                                    <a ui-sref="launchProject1">返回上一页</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
</div>
<!--查看大图-->
<div id="image-box" style="display: none;">
    <div class="x-close-wrap" title="关闭">
        <a href="javascript:void(0);">&times;</a>
    </div>
    <div class="x-floating-wrap"></div>
    <div class="x-floating">
        <img/>
    </div>
</div>
<script>
    $('.dropdown-toggle').click(function(){
        $(this).next('.dropdown-menu').toggle();
    })
</script>
<!--<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');-->
    <!--});-->

    <!--$(document).ready(function() {-->
        <!--$('#summernote').summernote({-->
            <!--lang: 'zh-CN',-->
            <!--placeholder: '请录入项目进项',-->
            <!--tabsize: 2,-->
            <!--width: 600,-->
            <!--height: 400,-->
            <!--callbacks: {-->
                <!--onImageUpload: function (files) { //the onImageUpload API-->
                    <!--img = sendFile(files[0]);-->
                <!--}-->
            <!--}-->
        <!--});-->
    <!--});-->
    <!--function sendFile(file) {-->
        <!--var data = new FormData();-->
        <!--data.append("file", file);-->
        <!--console.log(data);-->
        <!--$.ajax({-->
            <!--data: data,-->
            <!--type: "POST",-->
            <!--url: '/projectconclude/upload',-->
            <!--cache: false,-->
            <!--contentType: false,-->
            <!--processData: false,-->
            <!--success: function(url) {-->
                <!--$("#summernote").summernote('insertImage', url, 'image name'); // the insertImage API-->
            <!--},-->
            <!--error:function(){-->
                <!--alert("上传失败！");-->
            <!--}-->
        <!--});-->
    <!--}-->

<!--</script>-->