一元捐前端移动页面新增捐款弹出框

donate-service/src/main/webapp/WEB-INF/views/mobile/projectDetail.html

@@ -418,6 +418,158 @@
             width: .22rem;
             height: .2rem;
         }
+        /*捐款弹出窗*/
+        .donation{
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 5.85rem;
+            background: #fff;
+        }
+        .donation .header{
+           overflow: hidden;
+        }
+        .donation .header p{
+            float: left;
+            padding-top: .38rem;
+            padding-left: .25rem;
+            margin-right: .2rem;
+            margin-bottom: 0;
+            font-size: .36rem;
+            color: #000;
+        }
+        .donation .header p span{
+            margin-left: .2rem;
+            font-size: .24rem;
+            color: #999;
+        }
+        .donation .header .close{
+            padding: .15rem;
+            float: right;
+            font-size: .50rem;
+            color: #999;
+        }
+        .donation .body {
+            padding: .45rem 0 .5rem .45rem;
+        }
+        .donation .body ul.choose-money{
+            overflow: hidden;
+        }
+        .donation .body  ul.choose-money li{
+            float: left;
+            margin-right: .23rem;
+            width: 1.48rem;
+            height: .6rem;
+            line-height: .6rem;
+            font-size: .26rem;
+            text-align: center;
+            color: #ef613b;
+            border: 1px solid #dcdcdc;
+            list-style: none;
+            cursor: pointer;
+        }
+        .donation .body .choose-money li:last-child{
+            margin-right: 0;
+        }
+        .donation .body .choose-money li.active{
+            border-color: #ef613b;
+            background: url('../static/images/mobile/right.png') no-repeat bottom right;
+        }
+        .donation .body .choose-money input[type='text']{
+            width: 130px;
+            height: 34px;
+            line-height: 34px;
+            padding-left: 15px;
+            border-radius: 0;
+            outline: none;
+        }
+        .donation .body .write{
+            position: relative;
+            margin-top: .25rem;
+            width: 3.2rem;
+            height: .6rem;
+        }
+        .donation .body .write input{
+            padding-left: .25rem;
+            width: 3.2rem;
+            height: .6rem;
+            border-radius: 0;
+        }
+        .donation .body  em{
+            position: absolute;
+            right: .4rem;
+            bottom: .1rem;
+            font-size: .26rem;
+            color: #ef613b;
+            font-style: normal;
+        }
+        .donation .body .mode{
+            margin-top: .32rem;
+            overflow: hidden ;
+            height: .6rem;
+            line-height: .6rem;
+        }
+        .donation .body .mode span{
+            float: left;
+            font-size: .24rem;
+            color: #000;
+        }
+        .donation .body .mode .mode-list{
+            float: left;
+            margin-left: .35rem;
+        }
+        .donation .body .mode .mode-list .item{
+            float: left;
+            margin-left: .35rem;
+            width: 2rem;
+            height: .6rem;
+            line-height: .6rem;
+            font-size: .24rem;
+            color: #333;
+            border: 1px solid #cfcfcf;
+        }
+        .donation .body .mode .mode-list .item.active{
+            border: 1px solid #ef613b;
+            background: url('../static/images/mobile/right.png') no-repeat bottom right;
+        }
+        .donation .body .agree{
+            margin: .58rem 0 .5rem;
+            text-align: left;
+            overflow: hidden;
+        }
+        .donation .body .agree input{
+            float: left;
+        }
+        .donation .body .agree span{
+            float: left;
+            margin: .02rem 0 0 .1rem;
+            font-size: .24rem;
+            color: #999;
+        }
+        .donation .body .agree span a{
+            font-size: .24rem;
+            color: #333;
+        }
+        .donation .btn{
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            padding: 0;
+            width: 100%;
+            height: 1rem;
+            line-height: 1rem;
+            text-align: center;
+        }
+        .donation .btn button{
+            font-size: .3rem;
+            width: 100%;
+            height: 100%;
+            background: #ef613b;
+            color: #fff;
+            outline: none;
+            border: none;
+        }
     </style>
 </head>
 <body>
@@ -863,6 +1015,36 @@
                 <a href="" class="looks"><img src="../static/images/mobile/list-ul.png" alt=""/>查看同类其他项目</a>
             </div>
         </div>
+        <!--捐款弹出框-->
+        <div class="donation">
+            <div class="header">
+                <p>一元捐 <span>一份爱心,一份温暖</span></p>
+                <div class="close">&times;</div>
+            </div>
+            <div class="body">
+                <ul id="choose-money" class="choose-money">
+                    <li class="active">1元</li>
+                    <li>50元</li>
+                    <li>100元</li>
+                    <li>200元</li>
+                </ul>
+                <div class="write"><input type="text" placeholder="自定义金额" class="form-control" id=""/><em>元</em></div>
+                <div class="mode">
+                    <span>付款方式：</span>
+                    <div class="mode-list">
+                        <div class="item active"><img src="" alt=""/>微信</div>
+                        <div class="item"><img src="" alt=""/>支付宝</div>
+                    </div>
+                </div>
+                <div class="agree">
+                    <input type="checkbox"><span>同意并接受<a href="" target="_blank">《优软一元捐用户协议》</a></span></span>
+                </div>
+            </div>
+            <div class="btn">
+                <button>立即捐款</button>
+            </div>
+        </div>
+    </div>
 </div>
 <!--js begin-->
 <script src="../static/lib/jquery/jquery.min.js"></script>

donate-service/src/main/webapp/resources/view/mobile/mobile_project_detail.html

@@ -406,6 +406,158 @@
         width: .22rem;
         height: .2rem;
     }
+    /*捐款弹出窗*/
+    .donation{
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 5.85rem;
+        background: #fff;
+    }
+    .donation .header{
+        overflow: hidden;
+    }
+    .donation .header p{
+        float: left;
+        padding-top: .38rem;
+        padding-left: .25rem;
+        margin-right: .2rem;
+        margin-bottom: 0;
+        font-size: .36rem;
+        color: #000;
+    }
+    .donation .header p span{
+        margin-left: .2rem;
+        font-size: .24rem;
+        color: #999;
+    }
+    .donation .header .close{
+        padding: .15rem;
+        float: right;
+        font-size: .50rem;
+        color: #999;
+    }
+    .donation .body {
+        padding: .45rem 0 .5rem .45rem;
+    }
+    .donation .body ul.choose-money{
+        overflow: hidden;
+    }
+    .donation .body  ul.choose-money li{
+        float: left;
+        margin-right: .23rem;
+        width: 1.48rem;
+        height: .6rem;
+        line-height: .6rem;
+        font-size: .26rem;
+        text-align: center;
+        color: #ef613b;
+        border: 1px solid #dcdcdc;
+        list-style: none;
+        cursor: pointer;
+    }
+    .donation .body .choose-money li:last-child{
+        margin-right: 0;
+    }
+    .donation .body .choose-money li.active{
+        border-color: #ef613b;
+        background: url('../static/images/mobile/right.png') no-repeat bottom right;
+    }
+    .donation .body .choose-money input[type='text']{
+        width: 130px;
+        height: 34px;
+        line-height: 34px;
+        padding-left: 15px;
+        border-radius: 0;
+        outline: none;
+    }
+    .donation .body .write{
+        position: relative;
+        margin-top: .25rem;
+        width: 3.2rem;
+        height: .6rem;
+    }
+    .donation .body .write input{
+        padding-left: .25rem;
+        width: 3.2rem;
+        height: .6rem;
+        border-radius: 0;
+    }
+    .donation .body  em{
+        position: absolute;
+        right: .4rem;
+        bottom: .1rem;
+        font-size: .26rem;
+        color: #ef613b;
+        font-style: normal;
+    }
+    .donation .body .mode{
+        margin-top: .32rem;
+        overflow: hidden ;
+        height: .6rem;
+        line-height: .6rem;
+    }
+    .donation .body .mode span{
+        float: left;
+        font-size: .24rem;
+        color: #000;
+    }
+    .donation .body .mode .mode-list{
+        float: left;
+        margin-left: .35rem;
+    }
+    .donation .body .mode .mode-list .item{
+        float: left;
+        margin-left: .35rem;
+        width: 2rem;
+        height: .6rem;
+        line-height: .6rem;
+        font-size: .24rem;
+        color: #333;
+        border: 1px solid #cfcfcf;
+    }
+    .donation .body .mode .mode-list .item.active{
+        border: 1px solid #ef613b;
+        background: url('../static/images/mobile/right.png') no-repeat bottom right;
+    }
+    .donation .body .agree{
+        margin: .58rem 0 .5rem;
+        text-align: left;
+        overflow: hidden;
+    }
+    .donation .body .agree input{
+        float: left;
+    }
+    .donation .body .agree span{
+        float: left;
+        margin: .02rem 0 0 .1rem;
+        font-size: .24rem;
+        color: #999;
+    }
+    .donation .body .agree span a{
+        font-size: .24rem;
+        color: #333;
+    }
+    .donation .btn{
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        padding: 0;
+        width: 100%;
+        height: 1rem;
+        line-height: 1rem;
+        text-align: center;
+    }
+    .donation .btn button{
+        font-size: .3rem;
+        width: 100%;
+        height: 100%;
+        background: #ef613b;
+        color: #fff;
+        outline: none;
+        border: none;
+    }
 </style>
 <div class="nav">
     <div class="container">
@@ -415,303 +567,333 @@
 </div>
 <div class="section">
     <div class="container">
-    <!--详情-->
-    <div class="project-detail show">
-        <!--banner-->
-        <div class="banner">
-            <div id="myCarousel" class="carousel slide">
-                <!-- 轮播（Carousel）指标 -->
-                <ol class="carousel-indicators">
-                    <li data-target="#myCarousel" ng-class="{'active': $index == 0}" ng-repeat="carousel in carousels" data-slide-to="{{$index}}"></li>
-                </ol>
-                <!-- 轮播（Carousel）项目 -->
-                <div class="carousel-inner">
-                    <div class="item" ng-repeat="carousel in carousels" ng-class="{'active' : $index == 0}">
-                        <a href="{{carousel.hrefUrl}}"><img src="{{carousel.pictureUrl}}" alt="项目缩略图"/></a>
+        <!--详情-->
+        <div class="project-detail show">
+            <!--banner-->
+            <div class="banner">
+                <div id="myCarousel" class="carousel slide">
+                    <!-- 轮播（Carousel）指标 -->
+                    <ol class="carousel-indicators">
+                        <li data-target="#myCarousel" ng-class="{'active': $index == 0}" ng-repeat="carousel in carousels" data-slide-to="{{$index}}"></li>
+                    </ol>
+                    <!-- 轮播（Carousel）项目 -->
+                    <div class="carousel-inner">
+                        <div class="item" ng-repeat="carousel in carousels" ng-class="{'active' : $index == 0}">
+                            <a href="{{carousel.hrefUrl}}"><img src="{{carousel.pictureUrl}}" alt="项目缩略图"/></a>
+                        </div>
                     </div>
+                    <!-- 轮播（Carousel）导航 -->
+                    <a class="carousel-control left" href="#myCarousel"
+                       data-slide="prev">&lsaquo;</a>
+                    <a class="carousel-control right" href="#myCarousel"
+                       data-slide="next">&rsaquo;</a>
                 </div>
-                <!-- 轮播（Carousel）导航 -->
-                <a class="carousel-control left" href="#myCarousel"
-                   data-slide="prev">&lsaquo;</a>
-                <a class="carousel-control right" href="#myCarousel"
-                   data-slide="next">&rsaquo;</a>
             </div>
-        </div>
-        <div class="project-item">
-            <div class="title">
-                <h4>{{project.name}}</h4>
-                <h6>
-                    <em ng-if="project.overdue != 1">进行中</em>
-                    <em ng-if="project.overdue == 1">已结束</em>
-                </h6>
+            <div class="project-item">
+                <div class="title">
+                    <h4>{{project.name}}</h4>
+                    <h6>
+                        <em ng-if="project.overdue != 1">进行中</em>
+                        <em ng-if="project.overdue == 1">已结束</em>
+                    </h6>
+                </div>
+                <p class="intro">{{project.proSummary}}</p>
+                <div class="intro-detail">
+                    <div class="intro-list">
+                        <span>筹款目标(元)</span>
+                        <p class="money">{{project.target | number:2}}</p>
+                        <span>{{project.totalAmount / project.target * 100 | number : 2}}%</span>
+                    </div>
+                    <div class="intro-list">
+                        <span>参与人数</span>
+                        <p class="count">{{project.joinAmount}}</p>
+                    </div>
+                    <div class="intro-list">
+                        <span>筹款截止日期</span>
+                        <p class="time">{{project.startTime | date:'yyyy-MM-dd'}}<br/>至nbsp;{{project.endTime | date:'yyyy-MM-dd'}}</p>
+                    </div>
+                </div>
             </div>
-            <p class="intro">{{project.proSummary}}</p>
-            <div class="intro-detail">
-                <div class="intro-list">
-                    <span>筹款目标(元)</span>
-                    <p class="money">{{project.target | number:2}}</p>
-                    <span>{{project.totalAmount / project.target * 100 | number : 2}}%</span>
+            <div class="project-intro">
+                <div class="top">
+                    <span>项目介绍</span>
+                </div>
+                <div class="bottom">
+                    <div class="list-show">
+                        <div>
+                            <p>{{project.introduction}}</p>
+                        </div>
+                        <div class="btnClick">
+                            展开全文<i class="fa fa-angle-down"></i>
+                        </div>
+                    </div>
                 </div>
-                <div class="intro-list">
-                    <span>参与人数</span>
-                    <p class="count">{{project.joinAmount}}</p>
+            </div>
+            <div class="project-intro">
+                <div class="top">
+                    <span>资助人群</span>
                 </div>
-                <div class="intro-list">
-                    <span>筹款截止日期</span>
-                    <p class="time">{{project.startTime | date:'yyyy-MM-dd'}}<br/>至nbsp;{{project.endTime | date:'yyyy-MM-dd'}}</p>
+                <div class="bottom">
+                    <p class="distance">{{project.population}}
+                    </p>
                 </div>
             </div>
-        </div>
-        <div class="project-intro">
-            <div class="top">
-                <span>项目介绍</span>
+            <div class="project-intro">
+                <div class="top">
+                    <span>执行计划</span>
+                </div>
+                <div class="bottom">
+                    <p>
+                        {{project.executionPlan}}
+                    </p>
+                </div>
             </div>
-            <div class="bottom">
-                <div class="list-show">
-                    <div>
-                        <p>{{project.introduction}}</p>
-                    </div>
-                    <div class="btnClick">
-                        展开全文<i class="fa fa-angle-down"></i>
+            <div class="project-intro">
+                <div class="top">
+                    <span>执行机构</span>
+                </div>
+                <div class="bottom">
+                    <div class="txt">{{project.organization.name}}</div>
+                    <div class="txt">项目联系人: {{project.personName}}</div>
+                    <div class="txt">
+                        联系电话 ：{{project.personTel}}
                     </div>
                 </div>
             </div>
-        </div>
-        <div class="project-intro">
-            <div class="top">
-                <span>资助人群</span>
-            </div>
-            <div class="bottom">
-                <p class="distance">{{project.population}}
-                </p>
+            <div class="footer">
+                <!--<a href="" class="look"><img src="../static/images/mobile/list-ul.png" alt=""/>查看同类其他项目</a>-->
+                <a class="attend" ng-click="donate(project.id, record)">我要捐款</a>
             </div>
         </div>
-        <div class="project-intro">
-            <div class="top">
-                <span>执行计划</span>
+        <!--进度-->
+        <div class="project-detail">
+            <div class="project-intro project-first">
+                <div class="top">
+                    <span>项目进度</span>
+                </div>
+                <div class="bottom">
+                    <div class="list-show">
+                        <div ng-repeat="schedule in schedules">
+                            {{schedule.description}}
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div class="bottom">
-                <p>
-                    {{project.executionPlan}}
-                </p>
+            <!--<div class="project-intro">-->
+                <!--<div class="top">-->
+                    <!--<span>发票公开</span>-->
+                <!--</div>-->
+                <!--<div class="bottom">-->
+                    <!--<p>湖南岳阳平江县观音阁学校“平江山里娃儿的心愿”-->
+                        <!--，实际筹款总额：8870.3 元，“一校一梦想”基金配捐-->
+                        <!--：20580元，实际拨付善款：29400元。剩余50.3元用于-->
+                        <!--“一校一梦想”其他项目。发票如下：-->
+                    <!--</p>-->
+                    <!--<img src="../static/images/mobile/list05.png" alt="" class="list-img list-img03"/>-->
+                <!--</div>-->
+            <!--</div>-->
+            <div class="footer">
+                <!--<a href="" class="look"><img src="../static/images/mobile/list-ul.png" alt=""/>查看同类其他项目</a>-->
+                <a href="" class="attend" ng-click="donate(project.id, record)">我要捐款</a>
             </div>
         </div>
-        <div class="project-intro">
-            <div class="top">
-                <span>执行机构</span>
-            </div>
-            <div class="bottom">
-                <div class="txt">{{project.organization.name}}</div>
-                <div class="txt">项目联系人: {{project.personName}}</div>
-                <div class="txt">
-                    联系电话 ：{{project.personTel}}
+        <!--活动-->
+        <div class="project-detail">
+            <div class="project-intro project-first">
+                <div class="top">
+                    <span>{{activity.name}}</span>
+                </div>
+                <div class="bottom">
+                    <div class="list-show">
+                        <p>
+                            {{activity.summary}}
+                        </p>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="footer">
-            <!--<a href="" class="look"><img src="../static/images/mobile/list-ul.png" alt=""/>查看同类其他项目</a>-->
-            <a class="attend" ng-click="donate(project.id, record)">我要捐款</a>
-        </div>
-    </div>
-    <!--进度-->
-    <div class="project-detail">
-        <div class="project-intro project-first">
-            <div class="top">
-                <span>项目进度</span>
-            </div>
-            <div class="bottom">
-                <div class="list-show">
-                    <div ng-repeat="schedule in schedules">
-                        {{schedule.description}}
+            <div class="project-intro">
+                <div class="top">
+                    <span>奖品介绍</span>
+                </div>
+                <div class="bottom">
+                    <div class="prize-intro">
+                        <span>活动奖品 : </span>
+                        <div ng-repeat="award in activity.awards | orderBy: 'amount'">
+                            <p>{{award.awardLevel}}{{award.awardName}} *{{award.amount}}</p>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <!--<div class="project-intro">-->
-            <!--<div class="top">-->
-                <!--<span>发票公开</span>-->
-            <!--</div>-->
-            <!--<div class="bottom">-->
-                <!--<p>湖南岳阳平江县观音阁学校“平江山里娃儿的心愿”-->
-                    <!--，实际筹款总额：8870.3 元，“一校一梦想”基金配捐-->
-                    <!--：20580元，实际拨付善款：29400元。剩余50.3元用于-->
-                    <!--“一校一梦想”其他项目。发票如下：-->
-                <!--</p>-->
-                <!--<img src="../static/images/mobile/list05.png" alt="" class="list-img list-img03"/>-->
-            <!--</div>-->
-        <!--</div>-->
-        <div class="footer">
-            <!--<a href="" class="look"><img src="../static/images/mobile/list-ul.png" alt=""/>查看同类其他项目</a>-->
-            <a href="" class="attend" ng-click="donate(project.id, record)">我要捐款</a>
-        </div>
-    </div>
-    <!--活动-->
-    <div class="project-detail">
-        <div class="project-intro project-first">
-            <div class="top">
-                <span>{{activity.name}}</span>
+            <div class="footer">
+                <!--<a href="" class="look"><img src="../static/images/mobile/list-ul.png" alt=""/>查看同类其他项目</a>-->
+                <a href="" class="attend" ng-click="donate(project.id, record)">我要捐款</a>
             </div>
-            <div class="bottom">
-                <div class="list-show">
+        </div>
+        <!--机构-->
+        <div class="project-detail">
+            <div class="institutions-intro">
+                <div class="institutions-img">
+                    <img src="../static/images/mobile/institutions.png" alt="" class="thumb-img"/>
+                    <p>{{organization.name}}</p>
+                </div>
+                <div class="bottom">
                     <p>
-                        {{activity.summary}}
+                        {{organization.summary}}
                     </p>
                 </div>
             </div>
-        </div>
-        <div class="project-intro">
-            <div class="top">
-                <span>奖品介绍</span>
-            </div>
-            <div class="bottom">
-                <div class="prize-intro">
-                    <span>活动奖品 : </span>
-                    <div ng-repeat="award in activity.awards | orderBy: 'amount'">
-                        <p>{{award.awardLevel}}{{award.awardName}} *{{award.amount}}</p>
+            <div class="project-intro">
+                <div class="top">
+                    <span>机构信息</span>
+                </div>
+                <div class="bottom">
+                    <div class="list-item">
+                        <span>成立日期</span><span ng-bind="organization.createTime | date : 'yyyy-MM-dd'"></span>
+                    </div>
+                    <div class="list-item">
+                        <span>所在地</span><span>{{organization.province}}&nbsp;{{organization.city}}</span>
+                    </div>
+                    <div class="list-item">
+                        <span>联系电话</span><span ng-bind="organization.telphone"></span>
+                    </div>
+                    <div class="list-item">
+                        <span>联系地址</span><span ng-bind="organization.address"></span>
+                    </div>
+                    <div class="list-item">
+                        <span>官方网址</span><span ng-bind="organization.website"></span>
                     </div>
                 </div>
             </div>
-        </div>
-        <div class="footer">
-            <!--<a href="" class="look"><img src="../static/images/mobile/list-ul.png" alt=""/>查看同类其他项目</a>-->
-            <a href="" class="attend" ng-click="donate(project.id, record)">我要捐款</a>
-        </div>
-    </div>
-    <!--机构-->
-    <div class="project-detail">
-        <div class="institutions-intro">
-            <div class="institutions-img">
-                <img src="../static/images/mobile/institutions.png" alt="" class="thumb-img"/>
-                <p>{{organization.name}}</p>
-            </div>
-            <div class="bottom">
-                <p>
-                    {{organization.summary}}
-                </p>
+            <div class="footer">
+                <!--<a href="" class="look"><img src="../static/images/mobile/list-ul.png" alt=""/>查看同类其他项目</a>-->
+                <a href="" class="attend" ng-click="donate(project.id, record)">我要捐款</a>
             </div>
         </div>
-        <div class="project-intro">
-            <div class="top">
-                <span>机构信息</span>
-            </div>
-            <div class="bottom">
-                <div class="list-item">
-                    <span>成立日期</span><span ng-bind="organization.createTime | date : 'yyyy-MM-dd'"></span>
-                </div>
-                <div class="list-item">
-                    <span>所在地</span><span>{{organization.province}}&nbsp;{{organization.city}}</span>
-                </div>
-                <div class="list-item">
-                    <span>联系电话</span><span ng-bind="organization.telphone"></span>
+        <!--结项报告-->
+        <div class="project-detail" ng-if="project.overdue == 1">
+            <!--banner-->
+            <div class="banner">
+                <div id="myCarousels" class="carousel slide">
+                    <!-- 轮播（Carousel）指标 -->
+                    <ol class="carousel-indicators">
+                        <li data-target="#myCarousel" ng-class="{'active': $index == 0}" ng-repeat="carousel in carousels" data-slide-to="{{$index}}"></li>
+                    </ol>
+                    <!-- 轮播（Carousel）项目 -->
+                    <div class="carousel-inner">
+                        <div class="item" ng-repeat="carousel in carousels" ng-class="{'active' : $index == 0}">
+                            <a href="{{carousel.hrefUrl}}"><img src="{{carousel.pictureUrl}}" alt="项目缩略图"/></a>
+                        </div>
+                    </div>
+                    <!-- 轮播（Carousel）导航 -->
+                    <a class="carousel-control left" href="#myCarousel"
+                       data-slide="prev">&lsaquo;</a>
+                    <a class="carousel-control right" href="#myCarousel"
+                       data-slide="next">&rsaquo;</a>
                 </div>
-                <div class="list-item">
-                    <span>联系地址</span><span ng-bind="organization.address"></span>
+            </div>
+            <div class="project-item">
+                <div class="title">
+                    <h4>{{project.name}}</h4>
+                    <h6>
+                        <em ng-if="project.overdue != 1">进行中</em>
+                        <em ng-if="project.overdue == 1">已结束</em>
+                    </h6>
                 </div>
-                <div class="list-item">
-                    <span>官方网址</span><span ng-bind="organization.website"></span>
+                <p class="intro">{{project.proSummary}}</p>
+                <div class="intro-detail">
+                    <div class="intro-list">
+                        <span>筹款目标(元)</span>
+                        <p class="money">{{project.target | number:2}}</p>
+                        <span>{{project.totalAmount / project.target * 100 | number : 2}}%</span>
+                    </div>
+                    <div class="intro-list">
+                        <span>参与人数</span>
+                        <p class="count">{{project.joinAmount}}</p>
+                    </div>
+                    <div class="intro-list">
+                        <span>筹款截止日期</span>
+                        <p class="time">{{project.startTime | date:'yyyy-MM-dd'}}<br/>至nbsp;{{project.endTime | date:'yyyy-MM-dd'}}</p>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="footer">
-            <!--<a href="" class="look"><img src="../static/images/mobile/list-ul.png" alt=""/>查看同类其他项目</a>-->
-            <a href="" class="attend" ng-click="donate(project.id, record)">我要捐款</a>
-        </div>
-    </div>
-    <!--结项报告-->
-    <div class="project-detail" ng-if="project.overdue == 1">
-        <!--banner-->
-        <div class="banner">
-            <div id="myCarousels" class="carousel slide">
-                <!-- 轮播（Carousel）指标 -->
-                <ol class="carousel-indicators">
-                    <li data-target="#myCarousel" ng-class="{'active': $index == 0}" ng-repeat="carousel in carousels" data-slide-to="{{$index}}"></li>
-                </ol>
-                <!-- 轮播（Carousel）项目 -->
-                <div class="carousel-inner">
-                    <div class="item" ng-repeat="carousel in carousels" ng-class="{'active' : $index == 0}">
-                        <a href="{{carousel.hrefUrl}}"><img src="{{carousel.pictureUrl}}" alt="项目缩略图"/></a>
+            <div class="project-intro">
+                <div class="top">
+                    <span>项目介绍</span>
+                </div>
+                <div class="bottom">
+                    <div class="list-show">
+                        <div>
+                            <p>{{project.introduction}}</p>
+                        </div>
+                        <div class="btnClick">
+                            展开全文<i class="fa fa-angle-down"></i>
+                        </div>
                     </div>
                 </div>
-                <!-- 轮播（Carousel）导航 -->
-                <a class="carousel-control left" href="#myCarousel"
-                   data-slide="prev">&lsaquo;</a>
-                <a class="carousel-control right" href="#myCarousel"
-                   data-slide="next">&rsaquo;</a>
-            </div>
-        </div>
-        <div class="project-item">
-            <div class="title">
-                <h4>{{project.name}}</h4>
-                <h6>
-                    <em ng-if="project.overdue != 1">进行中</em>
-                    <em ng-if="project.overdue == 1">已结束</em>
-                </h6>
             </div>
-            <p class="intro">{{project.proSummary}}</p>
-            <div class="intro-detail">
-                <div class="intro-list">
-                    <span>筹款目标(元)</span>
-                    <p class="money">{{project.target | number:2}}</p>
-                    <span>{{project.totalAmount / project.target * 100 | number : 2}}%</span>
-                </div>
-                <div class="intro-list">
-                    <span>参与人数</span>
-                    <p class="count">{{project.joinAmount}}</p>
+            <div class="project-intro">
+                <div class="top">
+                    <span>资助人群</span>
                 </div>
-                <div class="intro-list">
-                    <span>筹款截止日期</span>
-                    <p class="time">{{project.startTime | date:'yyyy-MM-dd'}}<br/>至nbsp;{{project.endTime | date:'yyyy-MM-dd'}}</p>
+                <div class="bottom">
+                    <p class="distance">{{project.population}}
+                    </p>
                 </div>
             </div>
-        </div>
-        <div class="project-intro">
-            <div class="top">
-                <span>项目介绍</span>
+            <div class="project-intro">
+                <div class="top">
+                    <span>执行计划</span>
+                </div>
+                <div class="bottom">
+                    <p>
+                        {{project.executionPlan}}
+                    </p>
+                </div>
             </div>
-            <div class="bottom">
-                <div class="list-show">
-                    <div>
-                        <p>{{project.introduction}}</p>
-                    </div>
-                    <div class="btnClick">
-                        展开全文<i class="fa fa-angle-down"></i>
+            <div class="project-intro">
+                <div class="top">
+                    <span>执行机构</span>
+                </div>
+                <div class="bottom">
+                    <div class="txt">{{project.organization.name}}</div>
+                    <div class="txt">项目联系人: {{project.personName}}</div>
+                    <div class="txt">
+                        联系电话 ：{{project.personTel}}
                     </div>
                 </div>
             </div>
-        </div>
-        <div class="project-intro">
-            <div class="top">
-                <span>资助人群</span>
-            </div>
-            <div class="bottom">
-                <p class="distance">{{project.population}}
-                </p>
-            </div>
-        </div>
-        <div class="project-intro">
-            <div class="top">
-                <span>执行计划</span>
-            </div>
-            <div class="bottom">
-                <p>
-                    {{project.executionPlan}}
-                </p>
+            <div class="footer">
+                <!--<a href="" class="look"><img src="../static/images/mobile/list-ul.png" alt=""/>查看同类其他项目</a>-->
             </div>
         </div>
-        <div class="project-intro">
-            <div class="top">
-                <span>执行机构</span>
-            </div>
-            <div class="bottom">
-                <div class="txt">{{project.organization.name}}</div>
-                <div class="txt">项目联系人: {{project.personName}}</div>
-                <div class="txt">
-                    联系电话 ：{{project.personTel}}
+        <!--捐款弹出框-->
+        <div class="donation">
+            <div class="header">
+                <p>一元捐 <span>一份爱心,一份温暖</span></p>
+                <div class="close">&times;</div>
+            </div>
+            <div class="body">
+                <ul id="choose-money" class="choose-money">
+                    <li class="active">1元</li>
+                    <li>50元</li>
+                    <li>100元</li>
+                    <li>200元</li>
+                </ul>
+                <div class="write"><input type="text" placeholder="自定义金额" class="form-control" id=""/><em>元</em></div>
+                <div class="mode">
+                    <span>付款方式：</span>
+                    <div class="mode-list">
+                        <div class="item active"><img src="" alt=""/>微信</div>
+                        <div class="item"><img src="" alt=""/>支付宝</div>
+                    </div>
+                </div>
+                <div class="agree">
+                    <input type="checkbox"><span>同意并接受<a href="" target="_blank">《优软一元捐用户协议》</a></span></span>
                 </div>
             </div>
-        </div>
-        <div class="footer">
-            <!--<a href="" class="look"><img src="../static/images/mobile/list-ul.png" alt=""/>查看同类其他项目</a>-->
+            <div class="btn">
+                <button>立即捐款</button>
+            </div>
         </div>
     </div>
 </div>