add logistic page codereview by XWG

+/**
+ * 物流信息页面
+ * @author: 赵彪<bill.zhao@yoho.cn>
+ * @date: 2015/12/02
+ */
+
+var $ = require('jquery'),
+    $footer = $('#yoho-footer');
+
+var winH = window.outerHeight,
+    bodyH = document.body.offsetHeight,
+    footH = $footer.height();
+
+function addFooterTopBorder() {
+    if (footH + bodyH > winH) {
+        window.rePosFooter();
+    }else{
+        $footer.css('border-top', '1px solid #f1f1f1');
+    }
+}
+
+$(document).ready(addFooterTopBorder);
+
+
+
+
+
+
+

 $vip: sprite-map("me/vip/*.png", $spacing: 10px);
 $fav: sprite-map("me/fav/*.png", $spacing: 5px);
 
-@import "home", "vip-grade", "order", "order-detail", "coupons", "personal-details", "yoho-coin", "fav", "suggest", "address", "online-service", "my-guang", "ihelp";
+@import "home", "vip-grade", "order", "order-detail", "coupons", "personal-details", "yoho-coin", "fav", "suggest", "address", "online-service", "my-guang", "ihelp", "logistic";
 

+$logistic_gray: #f0f0f0;
+$border_color_strong: #e3e3e3;
+$border_color_light: #eee;
+
+@mixin set-singleBorder($side, $c) {
+  border-#{$side}: 1px solid $c;
+}
+
+.logistic-page {
+  background-color: $logistic_gray;
+
+  @include set-singleBorder("bottom", $border_color_light);
+
+  .overview {
+    height: 120rem / $pxConvertRem;
+    line-height: 120rem / $pxConvertRem;
+    width: 100%;
+    margin-bottom: 40rem / $pxConvertRem;
+    background-color: #fff;
+    color: #464646;
+
+    @include set-singleBorder("bottom", $border_color_strong);
+
+    .left {
+      width: 19%;
+      float: left;
+      text-align: center;
+      height: 100%;
+
+      .icon {
+        width: 88rem / $pxConvertRem;
+        height: 88rem / $pxConvertRem;
+        margin: 0 auto;
+        background-size: 100%;
+        background-repeat: no-repeat;
+        background-position: center;
+        margin-top: 16rem / $pxConvertRem;
+      }
+    }
+
+    .right {
+      width: 81%;
+      float: left;
+      padding-top: 20rem / $pxConvertRem;
+      padding-bottom: 20rem / $pxConvertRem;
+      height: 80rem / $pxConvertRem;
+
+      div {
+        height: 40rem / $pxConvertRem;
+        line-height: 44rem / $pxConvertRem;
+        color: #595959;
+        font-size: 24rem / $pxConvertRem;
+      }
+    }
+
+    .info {
+      padding-right: 4rem / $pxConvertRem;
+    }
+  }
+
+  .title {
+    height: 112rem / $pxConvertRem;
+    line-height: 112rem / $pxConvertRem;
+    background-color: #fff;
+    padding-left: 40rem / $pxConvertRem;
+    font-size: 40rem / $pxConvertRem;
+    color: #4f4f4f;
+
+    @include set-singleBorder("top", $border_color_strong);
+
+    @include set-singleBorder("bottom", $border_color_light);
+  }
+
+  .detail {
+    background-color: #fff;
+    padding-left: 80rem / $pxConvertRem;
+  }
+
+  .timeline-box {
+    @include set-singleBorder("left", $border_color_strong);
+
+    position: relative;
+    padding-left: 52rem / $pxConvertRem;
+  }
+
+  .timeline-node {
+    position: absolute;
+    top: 32rem / $pxConvertRem;
+    left: -9.04444rem / $pxConvertRem;
+    display: inline-block;
+    width: 16.4rem / $pxConvertRem;
+    height: 16.4rem / $pxConvertRem;
+    background-color: $border_color_strong;
+    border-radius: 100%;
+  }
+
+  .timeline-box:first-child {
+    .timeline-node {
+      background-color: #989898;
+    }
+
+    .timeline-info-row {
+      color: #606060;
+    }
+  }
+
+  .timeline-info {
+    padding: (20rem / $pxConvertRem) 0;
+
+    @include set-singleBorder("bottom", $border_color_light);
+  }
+
+  .timeline-box:last-child {
+    .timeline-info {
+      border: none;
+    }
+  }
+
+  .timeline-info-row {
+    min-height: 40rem / $pxConvertRem;
+    line-height: 40rem / $pxConvertRem;
+    font-size: 28rem / $pxConvertRem;
+    color: #bababa;
+    padding-right: 32rem / $pxConvertRem;
+  }
+}

+{{> layout/header}}
+<div class="logistic-page yoho-page">
+    <div class="overview">
+        <div class="left" >
+            <div class="icon" style='background-image:url("{{logisticImg}}")'> </div>
+        </div>
+
+        <div class="right">
+            <div>
+               <span class='info'>物流公司:</span>
+               <span >{{logisticCompany}}</span>
+            </div>
+            <div>
+               <span class='info'>快递单号:</span>
+               <span>{{logisticNumber}}</span>
+            </div>
+        </div>
+
+    </div>
+
+    <div class="title">
+       <span>物流详情</span>
+    </div>
+
+    <div class="detail">
+       {{# logisticDetail}}
+       <div class="timeline-box ">
+            <span class="timeline-node"></span>
+            <div class="timeline-info">
+                <div class="timeline-info-row">
+                  {{ city}}&nbsp;&nbsp;&nbsp;{{ status}}
+                </div>
+                <div class="timeline-info-row">
+                  {{date}}
+                </div>
+            </div>
+       </div>
+       {{/ logisticDetail}}
+    </div>
+</div>
+{{> layout/footer}}

@@ -270,4 +270,10 @@
 <script>
     seajs.use('js/me/personal-details');
 </script>
-{{/if}}
\ No newline at end of file
+{{/if}}
+{{#if logisticInfoPage}}
+<script>
+    seajs.use('js/me/logistic');
+</script>
+{{/if}}
+