一元捐移动页面样式调整

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

@@ -175,6 +175,15 @@
         font-size: .24rem;
         color: #999;
     }
+    .project-item .title h6 em{
+        float: right;
+        font-size: .24rem;
+        font-style: normal ;
+        color: #2da752;
+    }
+    .project-item .title h6 em.end{
+        color: #999;
+    }
     .project-item .intro{
         margin-bottom: .5rem;
         text-align: left;
@@ -196,10 +205,11 @@
         display: inherit;
         margin-bottom: .3rem;
         font-size: .24rem;
+        font-weight: bold ;
         color: #969696;
     }
     .project-item .intro-detail .intro-list p.money{
-        margin-bottom: .3rem;
+        /*margin-bottom: .3rem;*/
         font-size: .36rem;
         color: #ef613b;
     }
@@ -215,6 +225,29 @@
         font-size: .24rem;
         color: #969696;
     }
+    .project-item .intro-detail .intro-list .pro{
+        font-size: .24rem;
+        color: #333;
+        font-weight: bold;
+    }
+    .project-item .intro-date{
+        width: 100%;
+        overflow: hidden;
+    }
+    .project-item .intro-date span{
+        float: left;
+        display: inline-block;
+        width: 1.5rem;
+        font-size: .24rem;
+        color: #969696;
+    }
+    .project-item .intro-date p{
+        float: left;
+        margin-left: .2rem;
+        width: 3rem;
+        font-size: .24rem;
+        color: #969696;
+    }
     .project-intro {
         padding: 0 .3rem;
         margin-top: .2rem;
@@ -241,6 +274,10 @@
         position: relative;
         padding-bottom: .5rem;
     }
+    .project-intro .bottom .list-show .show-all{
+        /*max-height: 13rem;*/
+        /*overflow: hidden;*/
+    }
     .project-intro .bottom p{
         line-height: .42rem;
         font-size: .28rem;
@@ -268,6 +305,10 @@
         -moz-box-shadow: 0 -15px 4px rgba(255, 255, 255, 0.6);
         -webkit-box-shadow: 0 -15px 4px rgba(255, 255, 255, 0.6);
     }
+    .btnUp{
+        bottom: 0;
+        box-shadow: none;
+    }
     .btnClick i{
         margin-left: .05rem;
         font-size: .34rem;
@@ -281,6 +322,7 @@
     }
     .project-intro .bottom .distance {
         padding-bottom: .5rem;
+        text-indent: 0;
     }
     .project-intro .bottom .list02{
         padding-bottom: .6rem;
@@ -290,12 +332,16 @@
     .project-intro .bottom .txt{
         margin-bottom: .22rem;
         font-size: .28rem;
-        color: #787878;
+        color: #666;
     }
     .project-intro .bottom .txt:last-child{
         margin-bottom: 0;
         padding-bottom: .55rem;
     }
+    .project-intro .bottom .txt span{
+        font-size: .28rem;
+        color: #333;
+    }
     /*进度*/
     .project-intro .bottom .list-img01{
         width: 6.9rem;
@@ -599,23 +645,29 @@
                 <div class="title">
                     <h4>{{project.name}}</h4>
                     <h6>
-                        <em>{{project.overdue}}</em>
+                        <em ng-class="{'end' : project.overdue == '已结束'}">{{project.overdue}}</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>
+                        <p class="money">{{project.target || 0 | number:2}}</p>
                     </div>
                     <div class="intro-list">
-                        <span>参与人数</span>
-                        <p class="count">{{project.joinAmount}}</p>
+                        <span>已筹款(元)</span>
+                        <p class="money">{{project.totalAmount|| 0 | number:2}}</p>
+                        <span class="pro">({{project.totalAmount / project.target * 100 || 0 | number : 2}}%)</span>
                     </div>
                     <div class="intro-list">
+                        <span>参与人数</span>
+                        <p class="count">{{project.joinAmount || 0}}</p>
+                    </div>
+                </div>
+                <div class="intro-detail">
+                    <div class="intro-date">
                         <span>筹款截止日期</span>
-                        <p class="time">{{project.startTime | date:'yyyy-MM-dd'}}<br/>至&nbsp;{{project.endTime | date:'yyyy-MM-dd'}}</p>
+                        <p class="time">{{project.startTime | date:'yyyy-MM-dd'}}至&nbsp;{{project.endTime | date:'yyyy-MM-dd'}}</p>
                     </div>
                 </div>
             </div>
@@ -624,12 +676,15 @@
                     <span>项目介绍</span>
                 </div>
                 <div class="bottom">
-                    <div class="list-show">
+                    <div class="list-show" class="show-all">
                         <div ng-bind-html="project.introduction">
                         </div>
-                        <div class="btnClick">
+                        <div class="btnClick" ng-click="selfProjectToggle(true)" ng-if="!projectContentShow">
                             展开全文<i class="fa fa-angle-down"></i>
                         </div>
+                        <div class="btnClick btnUp" ng-click="selfProjectToggle(false)" ng-if="projectContentShow">
+                            收起<i class="fa fa-angle-up"></i>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -658,9 +713,9 @@
                 </div>
                 <div class="bottom">
                     <div class="txt">{{project.organization.name}}</div>
-                    <div class="txt">项目联系人: {{project.personName}}</div>
+                    <div class="txt">项目联系人: <span>{{project.personName}}</span></div>
                     <div class="txt">
-                        联系电话 ：{{project.personTel}}
+                        联系电话: <span>{{project.personTel}}</span>
                     </div>
                 </div>
             </div>
@@ -708,7 +763,7 @@
                     <span>{{activity.name}}</span>
                 </div>
                 <div class="bottom">
-                    <div class="list-show">
+                    <div>
                         <p>
                             {{activity.summary}}
                         </p>
@@ -810,7 +865,7 @@
                 </div>
                 <div class="bottom">
                     <div class="list-show">
-                        <div>
+                        <div class="show-txt">
                             <p>{{project.introduction}}</p>
                         </div>
                         <div class="btnClick">
@@ -896,22 +951,32 @@
         $('.project-detail').eq($index).addClass('show').siblings().removeClass('show');
     });
     //    展开全文
-    $('.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)');
-        }
+    $(function() {
+        var $showAll =$('.show-all').children().html().length;
+        console.log($showAll)
+//        if ($showAll) {
+//            $showAll.siblings('.btnClick').css('display','none');
+//            $showAll.css('max-height','13rem').css('overflow','hidden')
+//        } else {
+//            $showAll.siblings('.btnClick').css('display','block');
+//            $showAll.css('height','auto').css('overflow','visible')
+//        }
     });
-
+//    $('.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)');
+//        }
+//    });
     $('.attend').on('click', function() {
         $('.donation').toggle();
     });