Просмотр исходного кода

Merge remote-tracking branch 'origin/dev' into dev

dongbw 8 лет назад
Родитель
Сommit
501b4fffaa

+ 3 - 0
donate-service/src/main/java/com/uas/service/donate/WebAppConfiguration.java

@@ -82,6 +82,9 @@ public class WebAppConfiguration extends WebMvcConfigurerAdapter {
 		registry.addViewController("/userAgreement").setViewName("userAgreement");
 		registry.addViewController("/institutionsToIntroduce").setViewName("institutionsToIntroduce");
 		super.addViewControllers(registry);
+//		移动页面
+		registry.addViewController("/mobile/activeDetail").setViewName("/mobile/activeDetail");
+		registry.addViewController("/mobile/projectDetail").setViewName("/mobile/projectDetail");
 	}
 
 	@Override

+ 299 - 0
donate-service/src/main/webapp/WEB-INF/views/mobile/activeDetail.html

@@ -0,0 +1,299 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>活动详情-一元捐</title>
+    <meta name="keywords" content="">
+    <meta name="description" content="">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="renderer" content="webkit">
+    <!--css begin-->
+    <link rel="stylesheet" href="../static/lib/bootstrap/css/bootstrap.min.css">
+    <style>
+        *{padding:0;margin:0;box-sizing:border-box;font-family:"Microsoft Yahei"}
+        body{
+            background: #eff3f4;
+        }
+        /*顶部导航*/
+        .nav{
+            width: 100%;
+            height: .8rem;
+            line-height: .8rem;
+            background: #fff;
+        }
+        .nav .container{
+            margin: 0 auto;
+            padding: 0 1.1rem;
+            /*width: 100%;*/
+            max-width: 640px;
+            height: 100%;
+            text-align: left;
+        }
+        .nav .container span{
+            position: relative;
+            padding-bottom: 0.13rem;
+            font-size: .28rem;
+            color: #999;
+            cursor: pointer;
+        }
+        .nav .container span:first-child {
+            margin-right: 1.5rem;
+        }
+        .nav .container span.active{
+            color: #333;
+        }
+        .nav .container span.active em:after{
+            content: '';
+            bottom: -0.08rem;
+            left: 26%;
+            position: absolute;
+            width: .3rem;
+            height: .08rem;
+            background: #ef613b;
+        }
+        /*主体部分*/
+        .section {
+            margin-top: .2rem;
+            width: 100%;
+        }
+        .section .container{
+            padding: 0;
+            margin: 0 auto;
+            max-width: 640px;
+            text-align: center;
+        }
+        .section .container .img{
+            width: 100%;
+            height: 5.28rem;
+            background: #fff;
+        }
+        .section .container .img img{
+            width: 100%;
+            height: 100%;
+        }
+        /*活动详情*/
+        .detail {
+            padding: 0 .3rem;
+            text-align: left;
+            background: #fff;
+        }
+        .detail .title {
+            padding-top: .5rem;
+            margin-bottom: .35rem;
+            overflow: hidden ;
+        }
+        .detail .title h4{
+            float: left;
+            font-size: .36rem;
+            font-weight: bold;
+            color: #333;
+        }
+        .detail .title h6.state{
+            float: right;
+            font-size: .24rem;
+            color: #999;
+        }
+        .txt{
+            padding-bottom: .55rem;
+        }
+        .txt p{
+            margin-bottom: .7rem;
+            font-size: .28rem;
+            color: #666;
+        }
+        .txt p:last-child{
+            margin-bottom: 0;
+        }
+        /*奖品介绍*/
+        .intro{
+            margin-top: .2rem;
+            padding: 0 .3rem;
+            text-align: left;
+            background: #fff;
+        }
+        .intro .intro-header{
+            width: 100%;
+            height: .82rem;
+            line-height: .82rem;
+            border-bottom: 1px solid #dcdcdc;
+        }
+        .intro .intro-header span{
+           font-size: .36rem;
+            color: #333;
+        }
+        .prize{
+            margin-top: .4rem;
+        }
+        .prize .prize-item {
+            margin-bottom: .2rem;
+            font-size: .28rem;
+            color: #777;
+        }
+        .prize-img {
+            margin-top: .75rem;
+            padding-bottom: .55rem;
+        }
+        .prize-img img{
+            margin-bottom: .55rem;
+            width: 6.9rem;
+            height: 6.5rem;
+            border: 1px solid #dcdcdc;
+        }
+        .footer{
+            margin-top: .4rem;
+            height: 1rem;
+            line-height: 1rem;
+            width: 100%;
+            overflow: hidden ;
+            background: #fff;
+        }
+        .footer a.look{
+            float: left;
+            display: inline-block;
+            width: 4.4rem;
+            height: 1rem;
+            font-size: .24rem;
+            color: #666;
+            text-align: center;
+        }
+        .footer a.look:active{
+            text-decoration: none;
+        }
+        .footer a.look img{
+            margin-right: .18rem;
+            margin-top: -0.05rem;
+            width: .22rem;
+            height: .2rem;
+        }
+        .footer a.attend{
+            float: right;
+            display: inline-block;
+            width: 3.1rem;
+            height: 1rem;
+            font-size: .3rem;
+            color: #fff;
+            text-align: center;
+            background: #a0a0a0;
+        }
+        .footer a.attend:active{
+            text-decoration: none;
+        }
+        /*数据统计*/
+        .statistics{
+            margin: 0 auto 7.05rem;
+            padding: .35rem .3rem 0;
+            width: 100%;
+            text-align: left;
+            background: #fff;
+        }
+        .statistics .statistics-list{
+            margin-bottom: .55rem;
+        }
+        .statistics .statistics-list p{
+            margin-bottom: .5rem;
+            font-size: .28rem;
+            color: #323232;
+        }
+        .statistics .statistics-list span{
+            font-family: 'Arial'!important;
+            font-size: .56rem;
+            color: #ef613b;
+        }
+        .statistics .statistics-list b{
+            margin-left: .5rem;
+            font-size: .28rem;
+            font-weight: normal;
+            color: #323232;
+        }
+        .section-detail{
+            display: none;
+        }
+        .show{
+            display: block;
+        }
+    </style>
+</head>
+<body>
+<div class="nav">
+    <div class="container">
+        <span class="active">详情<em></em></span><span>数据统计<em></em></span>
+    </div>
+</div>
+<div class="section">
+    <div class="container">
+        <!--活动详情-->
+        <div class="section-detail show">
+            <div class="img">
+                <img src="../static/images/mobile/banner.png" alt=""/>
+            </div>
+            <div class="detail">
+                <div class="title">
+                    <h4>优软一元捐感恩回馈活动001</h4>
+                    <h6 class="state">进行中</h6>
+                </div>
+                <div class="txt">
+                    <p>1、活动介绍:基层团组织通过学校在校园内公布申请条
+                        件,学生及其监护人提出求助申请学校对申请学生进行
+                        家访,核实家庭经济状况后报县级团委审核,县级团委
+                        上报市级团委汇总;
+                    </p>
+                    <p>2、参加条件:确认市级团委汇总地区申请资料后报市青
+                        基会;
+                    </p>
+                    <p>
+                        3、开奖时间等:市青基会终审申请,制作项目档案,并
+                        报理事会审议;审议通过后向申请人进行资助,并做审
+                        计和公示。
+                    </p>
+                </div>
+            </div>
+            <div class="intro">
+                <div class="intro-header">
+                    <span>奖品介绍</span>
+                </div>
+                <div class="prize">
+                    <div class="prize-item">一等奖 : iphone7plus*3</div>
+                    <div class="prize-item">二等奖 : iphone7plus*2</div>
+                    <div class="prize-item">三等奖 : iphone7plus*1</div>
+                    <div class="prize-item">四等奖 : iphone7plus*0</div>
+                </div>
+                <div class="prize-img">
+                    <img src="../static/images/mobile/prize01.png" alt=""/>
+                    <img src="../static/images/mobile/prize02.png" alt=""/>
+                </div>
+            </div>
+        </div>
+        <!--数据统计-->
+        <div class="section-detail">
+            <div class="statistics">
+                <div class="statistics-list">
+                    <p>活动参加人数:</p>
+                    <div><span>21,206</span><b>人次</b></div>
+                </div>
+                <div class="statistics-list">
+                    <p>与活动相关的项目已筹得:</p>
+                    <div><span>1,409,765</span><b>元</b></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">未参加活动</a>
+        </div>
+    </div>
+</div>
+<!--js begin-->
+<script src="../static/lib/jquery/jquery.min.js"></script>
+<script src="../static/lib/bootstrap/js/bootstrap.min.js"></script>
+<script>
+    $('html').css('fontSize',$(window).width()/750 * 100);
+//    点击切换
+    $('.nav').on('click','span',function(){
+        var $index = $(this).index();
+        $(this).addClass('active').siblings().removeClass('active');
+        $('.section-detail').eq($index).addClass('show').siblings().removeClass('show');
+    });
+</script>
+</body>
+</html>

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

@@ -0,0 +1,903 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>项目详情-一元捐</title>
+    <meta name="keywords" content="">
+    <meta name="description" content="">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="renderer" content="webkit">
+    <!--css begin-->
+    <link rel="stylesheet" href="../static/lib/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../static/lib/font-awesome/css/font-awesome.min.css">
+    <style>
+        *{padding:0;margin:0;box-sizing:border-box;font-family:"Microsoft Yahei"}
+        body{
+            background: #eff3f4;
+        }
+        /*footer*/
+        .footer{
+            margin-top: .4rem;
+            height: 1rem;
+            line-height: 1rem;
+            width: 100%;
+            overflow: hidden ;
+            background: #fff;
+        }
+        .footer a.look{
+            float: left;
+            display: inline-block;
+            width: 4.4rem;
+            height: 1rem;
+            font-size: .24rem;
+            color: #666;
+            text-align: center;
+        }
+        .footer a.look:active{
+            text-decoration: none;
+        }
+        .footer a.look img{
+            margin-right: .18rem;
+            margin-top: -0.05rem;
+            width: .22rem;
+            height: .2rem;
+        }
+        .footer a.attend{
+            float: right;
+            display: inline-block;
+            width: 3.1rem;
+            height: 1rem;
+            font-size: .3rem;
+            color: #fff;
+            text-align: center;
+            background: #ef613b;
+        }
+        .footer a.attend:active{
+            text-decoration: none;
+        }
+        .project-detail {
+            display: none;
+        }
+        .show{
+            display: block;
+        }
+        /*顶部导航*/
+        .nav{
+            width: 100%;
+            height: .8rem;
+            line-height: .8rem;
+            background: #fff;
+        }
+        .nav .container{
+            margin: 0 auto;
+            /*width: 100%;*/
+            max-width: 640px;
+            height: 100%;
+            text-align: center;
+        }
+        .nav .container span{
+            position: relative ;
+            /*没有结项报告的nav样式*/
+            /*margin-right: 1.1rem;*/
+            /*有结项报告的nav样式*/
+            margin-right: 0.7rem;
+            padding-bottom: 0.13rem;
+            font-size: .28rem;
+            color: #999;
+            cursor: pointer;
+        }
+        .nav .container span:last-child {
+            margin-right: 0;
+        }
+        .nav .container span.active{
+            color: #333;
+        }
+        .nav .container span.active em:after{
+            content: '';
+            bottom: -0.08rem;
+            left: 25%;
+            position: absolute;
+            width: .3rem;
+            height: .08rem;
+            background: #ef613b;
+        }
+        /*主体部分*/
+        .section {
+            margin-top: .2rem;
+            width: 100%;
+        }
+        .section .container{
+            padding: 0;
+            margin: 0 auto;
+            max-width: 640px;
+            text-align: center;
+        }
+        /*banner*/
+        .banner{
+            width: 100%;
+            height: 5.2rem;
+            margin: 0 auto;
+        }
+        .banner .carousel {
+            width: 100%;
+            height: 5.2rem;
+        }
+        .carousel-inner>.item>a>img, .carousel-inner>.item>img {
+            line-height: 1;
+            height: 5.2rem;
+        }
+        .banner img{
+            width: 100%;
+        }
+        .banner .carousel-indicators{
+            bottom: 0;
+            text-align: center;
+        }
+        .banner .carousel-indicators li{
+            width: .12rem;
+            height: .12rem;
+            opacity: .9;
+            margin: 0 .04rem;
+            background-color: transparent;
+        }
+        .banner .carousel-indicators li.active{
+            background-color: #fff;
+        }
+        .banner .carousel-control.right,.banner .carousel-control.left {
+            background: 0;
+            box-shadow: none;
+            font-size: 1rem;
+            width: .6rem;
+            height: .6rem;
+            line-height: .3rem;
+            position: absolute;
+            top: 50%;
+            margin-top: -0.3rem;
+            background-image: none;
+            filter: none;
+            border: .05rem solid #fff;
+            border-radius: 100%;
+        }
+        .banner .carousel-control{
+            opacity: .1;
+        }
+        .banner .carousel-control.right{
+            right: 0.05rem;
+        }
+        .banner .carousel-control.left{
+            left: 0.05rem;
+        }
+        .project-item{
+            padding: .55rem .3rem .27rem;
+            background: #fff;
+        }
+        .project-item .title{
+            overflow: hidden ;
+            margin-bottom: .33rem;
+        }
+        .project-item .title h4{
+            float: left;
+            font-size: .36rem;
+            font-weight: bold;
+            color: #333;
+        }
+        .project-item .title h6{
+            float: right;
+            font-size: .24rem;
+            color: #999;
+        }
+        .project-item .intro{
+            margin-bottom: .5rem;
+            text-align: left;
+            font-size: .28rem;
+            color: #999;
+        }
+        .project-item .intro-detail{
+            overflow: hidden;
+        }
+        .project-item .intro-detail .intro-list{
+            float: left;
+            width: 33.3333%;
+            text-align: left ;
+        }
+        .project-item .intro-detail .intro-list:last-child{
+            margin-right: 0;
+        }
+        .project-item .intro-detail .intro-list span{
+            display: inherit;
+            margin-bottom: .3rem;
+            font-size: .24rem;
+            color: #969696;
+        }
+        .project-item .intro-detail .intro-list p.money{
+            margin-bottom: .3rem;
+            font-size: .36rem;
+            color: #ef613b;
+        }
+        .project-item .intro-detail .intro-list p.count{
+            font-size: .36rem;
+            color: #333;
+        }
+        .project-item .intro-detail .intro-list p.count{
+            font-size: .36rem;
+            color: #333;
+        }
+        .project-item .intro-detail .intro-list p.time{
+             font-size: .24rem;
+             color: #969696;
+         }
+        .project-intro {
+            padding: 0 .3rem;
+            margin-top: .2rem;
+            background: #fff;
+            text-align: left;
+        }
+        .project-first{
+            margin-top: 0;
+        }
+        .project-intro .top{
+            width: 100%;
+            height: .8rem;
+            line-height: .8rem;
+            border-bottom: 1px solid #dcdcdc;
+        }
+        .project-intro .top span{
+            font-size: .28rem;
+            color: #1d1d1d;
+        }
+        .project-intro .bottom{
+            padding-top: .39rem;
+        }
+        .project-intro .bottom .list-show{
+            position: relative;
+            padding-bottom: .5rem;
+        }
+        .project-intro .bottom p{
+            line-height: .42rem;
+            font-size: .28rem;
+            color: #787878;
+            text-indent: 2em;
+        }
+        .project-intro .bottom .list-img{
+            margin-top: .3rem;
+            margin-bottom: .45rem;
+            width: 6.9rem;
+            height: 3.24rem;
+        }
+        .btnClick{
+            position: absolute;
+            bottom: .14rem;
+            width: 100%;
+            height: .8rem;
+            line-height: .8rem;
+            font-size: .24rem;
+            color: #787878;
+            text-align: center;
+            background: #fff;
+            box-shadow: 0 -15px 4px rgba(255, 255, 255, 0.6);
+            -o-box-shadow: 0 -15px 4px rgba(255, 255, 255, 0.6);
+            -moz-box-shadow: 0 -15px 4px rgba(255, 255, 255, 0.6);
+            -webkit-box-shadow: 0 -15px 4px rgba(255, 255, 255, 0.6);
+        }
+        .btnClick i{
+            margin-left: .05rem;
+            font-size: .34rem;
+            color: #787878;
+        }
+        .project-intro .bottom .list-none{
+            display: none;
+        }
+        .project-intro .bottom .list-none p:last-child {
+            margin-bottom: .25rem;
+        }
+        .project-intro .bottom .distance {
+            padding-bottom: .5rem;
+        }
+        .project-intro .bottom .list02{
+            padding-bottom: .6rem;
+            width: 6.85rem;
+            height: 3.6rem;
+        }
+        .project-intro .bottom .txt{
+            margin-bottom: .22rem;
+            font-size: .28rem;
+            color: #787878;
+        }
+        .project-intro .bottom .txt:last-child{
+            margin-bottom: 0;
+            padding-bottom: .55rem;
+        }
+       /*进度*/
+        .project-intro .bottom .list-img01{
+            width: 6.9rem;
+            height: 3.9rem;
+        }
+        .project-intro .bottom .list-img02{
+            width: 6.9rem;
+            height: 5.15rem;
+        }
+        .project-intro .bottom .list-img03{
+            width: 6.9rem;
+            height: 3.05rem;
+        }
+        /*活动*/
+        .project-intro .bottom p.activity{
+            margin-bottom: .67rem;
+        }
+        .project-intro .bottom p.activity:last-child{
+            margin-bottom: .17rem;
+        }
+        .project-intro .bottom .prize-intro{
+            padding-bottom: .45rem;
+            overflow: hidden;
+        }
+        .project-intro .bottom .prize-intro span{
+            display: inline-block;
+            float: left;
+            margin-right: -0.7rem;
+            width: 1.5rem;
+            font-size: .28rem;
+            color: #777;
+        }
+        .project-intro .bottom .prize-intro div p{
+            margin-bottom: .15rem;
+            font-size: .28rem;
+            color: #777;
+        }
+        .project-intro .bottom .prize-intro div{
+            float: left;
+            width: 5.4rem;
+        }
+        /*机构*/
+        .institutions-intro{
+            background: #fff;
+        }
+        .institutions-img{
+            position: relative ;
+            text-align: center;
+        }
+        .institutions-img .thumb-img{
+            width: 100%;
+            height: 2.8rem;
+        }
+        .institutions-img p{
+            position: absolute;
+            bottom: 20px;
+            left: 0;
+            right: 0;
+            margin: auto;
+            font-size: .3rem;
+            color: #fff;
+        }
+        .institutions-intro .bottom{
+            padding: .4rem .3rem;
+            text-align: left;
+        }
+        .institutions-intro .bottom p{
+            margin-bottom: 0;
+            font-size: .28rem;
+            line-height: .42rem;
+            text-indent: 2em;
+            color: #777;
+        }
+        .project-intro .bottom .list-item{
+            overflow: hidden;
+            margin-bottom: .45rem;
+        }
+        .project-intro .bottom .list-item:last-child {
+            padding-bottom: .45rem;
+        }
+        .project-intro .bottom .list-item span:first-child {
+            float: left;
+            text-align: left;
+            font-size: .28rem;
+            color: #777;
+        }
+        .project-intro .bottom .list-item span:last-child {
+            float: right;
+            text-align: right;
+            font-size: .28rem;
+            color: #1e1e1e;
+        }
+        /*结项报告*/
+        .footer a.looks{
+            width: 100%;
+            height: 1rem;
+            line-height: 1rem;
+            text-align: center;
+            font-size: .24rem;
+            color: #777;
+        }
+        .footer a.looks:active{
+            text-decoration: none;
+        }
+        .footer a.looks img{
+            margin-right: .18rem;
+            margin-top: -0.05rem;
+            width: .22rem;
+            height: .2rem;
+        }
+    </style>
+</head>
+<body>
+<div class="nav">
+    <div class="container">
+        <!--<span>详情<em></em></span><span>进度<em></em></span><span>活动<em></em></span><span class="active">机构<em></em></span>-->
+        <span>详情<em></em></span><span>进度<em></em></span><span>活动<em></em></span><span>机构<em></em></span><span class="active">结项报告<em></em></span>
+    </div>
+</div>
+<div class="section">
+    <div class="container">
+        <!--详情-->
+        <div class="project-detail">
+            <!--banner-->
+            <div class="banner">
+                <div id="myCarousel" class="carousel slide">
+                    <!-- 轮播(Carousel)指标 -->
+                    <ol class="carousel-indicators">
+                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+                        <li data-target="#myCarousel" data-slide-to="1"></li>
+                        <li data-target="#myCarousel" data-slide-to="2"></li>
+                    </ol>
+                    <!-- 轮播(Carousel)项目 -->
+                    <div class="carousel-inner">
+                        <div class="item active"><img src="../static/images/mobile/banner01.png"/></div>
+                        <div class="item"><img src="../static/images/mobile/banner01.png"/></div>
+                        <div class="item"><img src="../static/images/mobile/banner01.png"/></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>寒门学子 阳光助学</h4>
+                    <h6>筹备中</h6>
+                </div>
+                <p class="intro">帮助更多贫困家庭的孩子圆梦助学。</p>
+                <div class="intro-detail">
+                    <div class="intro-list">
+                        <span>筹款目标(元)</span>
+                        <p class="money">115000</p>
+                        <span>47.4%</span>
+                    </div>
+                    <div class="intro-list">
+                        <span>参与人数</span>
+                        <p class="count">526</p>
+                    </div>
+                    <div class="intro-list">
+                        <span>筹款截止日期</span>
+                        <p class="time">2017-09-11<br/>至 2017-10-27</p>
+                    </div>
+                </div>
+            </div>
+            <div class="project-intro">
+                <div class="top">
+                    <span>项目介绍</span>
+                </div>
+                <div class="bottom">
+                    <div class="list-show">
+                        <p>
+                            教室里,稚嫩的脸庞渴望着对知识的哺育,放学后,娇弱的肩膀还要扛起家庭的重担,他们不仅是老师眼里的好学生,成绩优异,品行良好,他们还是家长的“顶梁柱”,虽然年纪小,但是干起活来毫不马虎,又是一年开学季,有很多因为家庭原因的孩子即将离开学校。我们看似并不高额的费用却影响着他们整个家庭。也许您的一次随手捐赠,就能改变家庭贫困孩子们的人生。
+                        </p>
+                        <img src="../static/images/mobile/list01.png" alt="" class="list-img"/>
+                        <p>我们出生后,不能选择自己的家庭,但是我们可以
+                            选择自己的人生。他成绩优异,乐于助人,是老师的好
+                            助手,是同学们的靠谱班长,但是贫困的家里并不能支
+                            撑着他继续上学,虽然只是需要一些食宿费,当家人第
+                            一次跟他说起退学的时候,他反抗,赢了,从那时起,
+                            每天天不亮就出去干活,捡瓶子,一个瓶子几分钱,一
+                            天下来生意好赚个几块钱。他懂家里的不易,但是他不
+                            想继续在村里待一辈子过这样的生活,他更相信知识可
+                            以改变命运。
+                        </p>
+                        <p>
+                            还有许许多多个他,没有穿过一件像样的衣服,没
+                            有和家人出去旅游过,没有衣来伸手饭来张口的生活,
+                        </p>
+                        <div class="list-none">
+                            <p>
+                                我们出生后,不能选择自己的家庭,但是我们可以
+                                选择自己的人生。他成绩优异,乐于助人,是老师的好
+                                助手,是同学们的靠谱班长,但是贫困的家里并不能支
+                                撑着他继续上学,虽然只是需要一些食宿费,当家人第
+                                一次跟他说起退学的时候,他反抗,赢了,从那时起,
+                                每天天不亮就出去干活,捡瓶子,一个瓶子几分钱,一
+                                天下来生意好赚个几块钱。他懂家里的不易,但是他不
+                                想继续在村里待一辈子过这样的生活,他更相信知识可
+                                以改变命运。
+                            </p>
+                            <p>
+                                教室里,稚嫩的脸庞渴望着对知识的哺育,放学后,娇弱的肩膀还要扛起家庭的重担,他们不仅是老师眼里的好学生,成绩优异,品行良好,他们还是家长的“顶梁柱”,虽然年纪小,但是干起活来毫不马虎,又是一年开学季,有很多因为家庭原因的孩子即将离开学校。我们看似并不高额的费用却影响着他们整个家庭。也许您的一次随手捐赠,就能改变家庭贫困孩子们的人生。
+                            </p>
+                        </div>
+                        <div class="btnClick">
+                           展开全文<i class="fa fa-angle-down"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="project-intro">
+                <div class="top">
+                    <span>资助人群</span>
+                </div>
+                <div class="bottom">
+                    <p class="distance">西北、西南贫困山区的小学、初中、高中学生(包
+                        含职业教育)大学生。
+                    </p>
+                </div>
+            </div>
+            <div class="project-intro">
+                <div class="top">
+                    <span>执行计划</span>
+                </div>
+                <div class="bottom">
+                    <p>
+                        1、基层团组织通过学校在校园内公布申请条件,学
+                        生及其监护人提出求助申请学校对申请学生进行家访,
+                        核实家庭经济状况后报县级团委审核,县级团委上报市
+                        级团委汇总;
+                    </p>
+                    <p> 2、确认市级团委汇总地区申请资料后报市青基会;</p>
+                    <p>
+                        3、市青基会终审申请,制作项目档案,并报理事会
+                        审议;审议通过后向申请人进行资助,并做审计和公示。
+                    </p>
+                    <p>
+                        2017年9月~12月期间,资助大学生50人,小初高
+                        预计资助150名学生。还要设立小学初中及高中贫困励志
+                        补助助学金,鼓励孩子好好学习。
+                        <br/>2018年1月~2018年6月,预计资助100名学生,帮
+                        助他们解决生活困难,完成学业。
+                    </p>
+                    <img src="../static/images/mobile/list02.png" alt="" class="list02"/>
+                </div>
+            </div>
+            <div class="project-intro">
+                <div class="top">
+                    <span>执行机构</span>
+                </div>
+                <div class="bottom">
+                    <div class="txt">吉林省青少年发展基金会</div>
+                    <div class="txt">项目联系人: 李四</div>
+                    <div class="txt">
+                        联系电话 :13800000000
+                    </p>
+                </div>
+            </div>
+        </div>
+            <div class="footer">
+            <a href="" class="look"><img src="../static/images/mobile/list-ul.png" alt=""/>查看同类其他项目</a>
+            <a href="" class="attend">我要捐款</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">
+                        <p>
+                            7月29日,上午辗转几处洽谈,寻找购置商家,由
+                            于当初预算课桌椅和餐桌椅报价太低,经反复思索与寻
+                            求朋友帮忙,终于找到本地一个爱心老板愿意援手,无
+                            偿支持。
+                        </p>
+                        <p>
+                            河南省信阳市平桥区五里镇柿元小学“换个课桌黑
+                            板好读书”项目,实际筹款总额:4455.7 元,“一校一
+                            梦想”基金配捐:10381元,实际拨付善款:14830元
+                            。剩余6.7元用于“一校一梦想”其他项目。
+                        </p>
+                        <img src="../static/images/mobile/list03.png" alt="" class="list-img list-img01"/>
+                        <p>7月30日,上午上午与商家签订课桌椅、餐桌椅购买
+                            合同,同时,钢木门的商家来到学校,在办公室签订合
+                            同。签完合同后,商家就开始了精准的测量。
+                        </p>
+                        <img src="../static/images/mobile/list04.png" alt="" class="list-img list-img02"/>
+                    </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">我要捐款</a>
+            </div>
+        </div>
+        <!--活动-->
+        <div class="project-detail">
+            <div class="project-intro project-first">
+                <div class="top">
+                    <span>优软一元捐感恩活动01</span>
+                </div>
+                <div class="bottom">
+                    <div class="list-show">
+                        <p class="activity">
+                            1、活动介绍:基层团组织通过学校在校园内公布申
+                            请条件,学生及其监护人提出求助申请学校对申请学生
+                            进行家访,核实家庭经济状况后报县级团委审核,县级
+                            团委上报市级团委汇总;
+                        </p>
+                        <p class="activity">
+                            2、参加条件:确认市级团委汇总地区申请资料后报
+                            市青基会;
+                        </p>
+                        <p class="activity">
+                            3、开奖时间等:市青基会终审申请,制作项目档案
+                            ,并报理事会审议;审议通过后向申请人进行资助,并
+                            做审计和公示。3、开奖时间等:市青基会终审申请,制作项目档案
+                            ,并报理事会审议;审议通过后向申请人进行资助,并
+                            做审计和公示。
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div class="project-intro">
+                <div class="top">
+                    <span>奖品介绍</span>
+                </div>
+                <div class="bottom">
+                    <div class="prize-intro">
+                        <span>活动奖品 : </span>
+                        <div>
+                            <p>奖品一XXX *2</p>
+                            <p>奖品二AAAAAA *10</p>
+                            <p>奖品三QQQ *100</p>
+                            <p>参与奖DEDDQW*100</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">我要捐款</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>吉林省青少年发展基金会</p>
+                </div>
+                <div class="bottom">
+                    <p>
+                        吉林省青少年发展基金会,简称吉林青基会,隶属
+                        共青团吉林省委,成立于1992年11月,是希望工程在吉
+                        林省唯一合法实施机构。作为中国改革开放后最早成立
+                        的非营利性组织和国内最具影响的民间组织之一,吉林
+                        省青少年发展基金会旨在促进我国的教育、社保福利、
+                        医疗卫生、社区发展等领域的公益事业。迄今为止,项
+                        目区域累计覆盖全国31个省、市、自治区,逾千万人收
+                        益。
+                    </p>
+                </div>
+            </div>
+            <div class="project-intro">
+                <div class="top">
+                    <span>机构信息</span>
+                </div>
+                <div class="bottom">
+                    <div class="list-item">
+                        <span>成立日期</span><span>1992年9月9日</span>
+                    </div>
+                    <div class="list-item">
+                        <span>所在地</span><span>吉林 长春</span>
+                    </div>
+                    <div class="list-item">
+                        <span>联系电话</span><span>025-84561234</span>
+                    </div>
+                    <div class="list-item">
+                        <span>联系地址</span><span>吉林省长春市汉口路71号</span>
+                    </div>
+                    <div class="list-item">
+                        <span>官方网址</span><span>http://www.usoftchina.com</span>
+                    </div>
+                </div>
+            </div>
+            <div class="footer">
+                <a href="" class="look"><img src="../static/images/mobile/list-ul.png" alt=""/>查看同类其他项目</a>
+                <a href="" class="attend">我要捐款</a>
+            </div>
+        </div>
+        <!--结项报告-->
+        <div class="project-detail show">
+            <!--banner-->
+            <div class="banner">
+                <div id="myCarousels" class="carousel slide">
+                    <!-- 轮播(Carousel)指标 -->
+                    <ol class="carousel-indicators">
+                        <li data-target="#myCarousels" data-slide-to="0" class="active"></li>
+                        <li data-target="#myCarousels" data-slide-to="1"></li>
+                        <li data-target="#myCarousels" data-slide-to="2"></li>
+                    </ol>
+                    <!-- 轮播(Carousel)项目 -->
+                    <div class="carousel-inner">
+                        <div class="item active"><img src="../static/images/mobile/banner01.png"/></div>
+                        <div class="item"><img src="../static/images/mobile/banner01.png"/></div>
+                        <div class="item"><img src="../static/images/mobile/banner01.png"/></div>
+                    </div>
+                    <!-- 轮播(Carousel)导航 -->
+                    <a class="carousel-control left" href="#myCarousels"
+                       data-slide="prev">&lsaquo;</a>
+                    <a class="carousel-control right" href="#myCarousels"
+                       data-slide="next">&rsaquo;</a>
+                </div>
+            </div>
+            <div class="project-item">
+                <div class="title">
+                    <h4>寒门学子 阳光助学</h4>
+                    <h6>结束</h6>
+                </div>
+                <p class="intro">帮助更多贫困家庭的孩子圆梦助学。</p>
+                <div class="intro-detail">
+                    <div class="intro-list">
+                        <span>筹款目标(元)</span>
+                        <p class="money">115000</p>
+                        <span>47.4%</span>
+                    </div>
+                    <div class="intro-list">
+                        <span>参与人数</span>
+                        <p class="count">526</p>
+                    </div>
+                    <div class="intro-list">
+                        <span>筹款截止日期</span>
+                        <p class="time">2017-09-11<br/>至 2017-10-27</p>
+                    </div>
+                </div>
+            </div>
+            <div class="project-intro">
+                <div class="top">
+                    <span>项目介绍</span>
+                </div>
+                <div class="bottom">
+                    <div class="list-show">
+                        <p>
+                            教室里,稚嫩的脸庞渴望着对知识的哺育,放学后,娇弱的肩膀还要扛起家庭的重担,他们不仅是老师眼里的好学生,成绩优异,品行良好,他们还是家长的“顶梁柱”,虽然年纪小,但是干起活来毫不马虎,又是一年开学季,有很多因为家庭原因的孩子即将离开学校。我们看似并不高额的费用却影响着他们整个家庭。也许您的一次随手捐赠,就能改变家庭贫困孩子们的人生。
+                        </p>
+                        <img src="../static/images/mobile/list01.png" alt="" class="list-img"/>
+                        <p>我们出生后,不能选择自己的家庭,但是我们可以
+                            选择自己的人生。他成绩优异,乐于助人,是老师的好
+                            助手,是同学们的靠谱班长,但是贫困的家里并不能支
+                            撑着他继续上学,虽然只是需要一些食宿费,当家人第
+                            一次跟他说起退学的时候,他反抗,赢了,从那时起,
+                            每天天不亮就出去干活,捡瓶子,一个瓶子几分钱,一
+                            天下来生意好赚个几块钱。他懂家里的不易,但是他不
+                            想继续在村里待一辈子过这样的生活,他更相信知识可
+                            以改变命运。
+                        </p>
+                        <p>
+                            还有许许多多个他,没有穿过一件像样的衣服,没
+                            有和家人出去旅游过,没有衣来伸手饭来张口的生活,
+                        </p>
+                        <div class="list-none">
+                            <p>
+                                我们出生后,不能选择自己的家庭,但是我们可以
+                                选择自己的人生。他成绩优异,乐于助人,是老师的好
+                                助手,是同学们的靠谱班长,但是贫困的家里并不能支
+                                撑着他继续上学,虽然只是需要一些食宿费,当家人第
+                                一次跟他说起退学的时候,他反抗,赢了,从那时起,
+                                每天天不亮就出去干活,捡瓶子,一个瓶子几分钱,一
+                                天下来生意好赚个几块钱。他懂家里的不易,但是他不
+                                想继续在村里待一辈子过这样的生活,他更相信知识可
+                                以改变命运。
+                            </p>
+                            <p>
+                                教室里,稚嫩的脸庞渴望着对知识的哺育,放学后,娇弱的肩膀还要扛起家庭的重担,他们不仅是老师眼里的好学生,成绩优异,品行良好,他们还是家长的“顶梁柱”,虽然年纪小,但是干起活来毫不马虎,又是一年开学季,有很多因为家庭原因的孩子即将离开学校。我们看似并不高额的费用却影响着他们整个家庭。也许您的一次随手捐赠,就能改变家庭贫困孩子们的人生。
+                            </p>
+                        </div>
+                        <div class="btnClick">
+                            展开全文<i class="fa fa-angle-down"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="project-intro">
+                <div class="top">
+                    <span>资助人群</span>
+                </div>
+                <div class="bottom">
+                    <p class="distance">西北、西南贫困山区的小学、初中、高中学生(包
+                        含职业教育)大学生。
+                    </p>
+                </div>
+            </div>
+            <div class="project-intro">
+                <div class="top">
+                    <span>执行计划</span>
+                </div>
+                <div class="bottom">
+                    <p>
+                        1、基层团组织通过学校在校园内公布申请条件,学
+                        生及其监护人提出求助申请学校对申请学生进行家访,
+                        核实家庭经济状况后报县级团委审核,县级团委上报市
+                        级团委汇总;
+                    </p>
+                    <p> 2、确认市级团委汇总地区申请资料后报市青基会;</p>
+                    <p>
+                        3、市青基会终审申请,制作项目档案,并报理事会
+                        审议;审议通过后向申请人进行资助,并做审计和公示。
+                    </p>
+                    <p>
+                        2017年9月~12月期间,资助大学生50人,小初高
+                        预计资助150名学生。还要设立小学初中及高中贫困励志
+                        补助助学金,鼓励孩子好好学习。
+                        <br/>2018年1月~2018年6月,预计资助100名学生,帮
+                        助他们解决生活困难,完成学业。
+                    </p>
+                    <img src="../static/images/mobile/list02.png" alt="" class="list02"/>
+                </div>
+            </div>
+            <div class="project-intro">
+                <div class="top">
+                    <span>执行机构</span>
+                </div>
+                <div class="bottom">
+                    <div class="txt">吉林省青少年发展基金会</div>
+                    <div class="txt">项目联系人: 李四</div>
+                    <div class="txt">
+                        联系电话 :13800000000
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div class="footer">
+                <a href="" class="looks"><img src="../static/images/mobile/list-ul.png" alt=""/>查看同类其他项目</a>
+            </div>
+        </div>
+</div>
+<!--js begin-->
+<script src="../static/lib/jquery/jquery.min.js"></script>
+<script src="../static/lib/bootstrap/js/bootstrap.min.js"></script>
+<script>
+    $('html').css('fontSize',$(window).width()/750 * 100);
+//    点击切换
+    $('.nav').on('click','span',function(){
+        var $index = $(this).index();
+        $(this).addClass('active').siblings().removeClass('active');
+        $('.project-detail').eq($index).addClass('show').siblings().removeClass('show');
+    });
+//    banner
+    $('#myCarousel').carousel({
+        interval: 5000
+    });
+    $('#myCarousels').carousel({
+        interval: 5000
+    });
+//    展开全文
+    $('.btnClick').on('click',function(){
+        $(this).prev().toggle();
+        if($(this).prev().css('display') == 'block'){
+            $(this).html('合起 <i class="fa fa-angle-up"></i>')
+                   .css('bottom','0')
+                   .css('box-shadow','none');
+        } else{
+            $(this).html('展开全文 <i class="fa fa-angle-down"></i>')
+                   .css('bottom','.14rem')
+                   .css('box-shadow','0 -15px 4px rgba(255, 255, 255, 0.6)')
+                   .css('-o-box-shadow','0 -15px 4px rgba(255, 255, 255, 0.6)')
+                   .css('-webkit-box-shadow','0 -15px 4px rgba(255, 255, 255, 0.6)')
+                   .css('-moz-box-shadow','0 -15px 4px rgba(255, 255, 255, 0.6)');
+        }
+    });
+</script>
+</body>
+</html>

BIN
donate-service/src/main/webapp/resources/images/mobile/banner.png


BIN
donate-service/src/main/webapp/resources/images/mobile/banner01.png


BIN
donate-service/src/main/webapp/resources/images/mobile/institutions.png


BIN
donate-service/src/main/webapp/resources/images/mobile/list-ul.png


BIN
donate-service/src/main/webapp/resources/images/mobile/list01.png


BIN
donate-service/src/main/webapp/resources/images/mobile/list02.png


BIN
donate-service/src/main/webapp/resources/images/mobile/list03.png


BIN
donate-service/src/main/webapp/resources/images/mobile/list04.png


BIN
donate-service/src/main/webapp/resources/images/mobile/list05.png


BIN
donate-service/src/main/webapp/resources/images/mobile/prize01.png


BIN
donate-service/src/main/webapp/resources/images/mobile/prize02.png