resolve conflict code review by zhaobiao
Showing
6 changed files
with
207 additions
and
1 deletions
static/img/me/logistic/sf-icon.jpg
0 → 100644
![](/fe/YOHOBUYWAP/raw/d93b22ba4566657f802c27553e3d578e0b017af7/static/img/me/logistic/sf-icon.jpg)
10.9 KB
static/js/me/logistic.js
0 → 100644
1 | +/** | ||
2 | + * 物流信息页面 | ||
3 | + * @author: 赵彪<bill.zhao@yoho.cn> | ||
4 | + * @date: 2015/12/02 | ||
5 | + */ | ||
6 | + | ||
7 | +var $ = require('jquery'), | ||
8 | + $footer = $('#yoho-footer'); | ||
9 | + | ||
10 | +var winH = window.outerHeight, | ||
11 | + bodyH = document.body.offsetHeight, | ||
12 | + footH = $footer.height(); | ||
13 | + | ||
14 | +function addFooterTopBorder() { | ||
15 | + if (footH + bodyH > winH) { | ||
16 | + window.rePosFooter(); | ||
17 | + } else { | ||
18 | + $footer.css('border-top', '1px solid #f1f1f1'); | ||
19 | + } | ||
20 | +} | ||
21 | + | ||
22 | +$(document).ready(addFooterTopBorder); | ||
23 | + | ||
24 | + | ||
25 | + | ||
26 | + | ||
27 | + | ||
28 | + | ||
29 | + |
1 | $vip: sprite-map("me/vip/*.png", $spacing: 10px); | 1 | $vip: sprite-map("me/vip/*.png", $spacing: 10px); |
2 | $fav: sprite-map("me/fav/*.png", $spacing: 5px); | 2 | $fav: sprite-map("me/fav/*.png", $spacing: 5px); |
3 | 3 | ||
4 | -@import "home", "vip-grade", "order", "order-detail", "coupons", "personal-details", "yoho-coin", "fav", "suggest", "address", "online-service", "my-guang", "ihelp", "browse-record"; | 4 | +@import "home", "vip-grade", "order", "order-detail", "coupons", "personal-details", "yoho-coin", "fav", "suggest", "address", "online-service", "my-guang", "ihelp", "browse-record", "logistic"; |
5 | + | ||
5 | 6 |
static/sass/me/_logistic.scss
0 → 100644
1 | +$logistic_gray: #f0f0f0; | ||
2 | +$border_color_strong: #e3e3e3; | ||
3 | +$border_color_light: #eee; | ||
4 | + | ||
5 | +@mixin set-singleBorder($side, $c) { | ||
6 | + border-#{$side}: 1px solid $c; | ||
7 | +} | ||
8 | + | ||
9 | +.logistic-page { | ||
10 | + background-color: $logistic_gray; | ||
11 | + | ||
12 | + @include set-singleBorder("bottom", $border_color_light); | ||
13 | + | ||
14 | + .overview { | ||
15 | + height: 120rem / $pxConvertRem; | ||
16 | + line-height: 120rem / $pxConvertRem; | ||
17 | + width: 100%; | ||
18 | + margin-bottom: 40rem / $pxConvertRem; | ||
19 | + background-color: #fff; | ||
20 | + color: #464646; | ||
21 | + | ||
22 | + @include set-singleBorder("bottom", $border_color_strong); | ||
23 | + | ||
24 | + .left { | ||
25 | + width: 19%; | ||
26 | + float: left; | ||
27 | + text-align: center; | ||
28 | + height: 100%; | ||
29 | + | ||
30 | + .icon { | ||
31 | + width: 88rem / $pxConvertRem; | ||
32 | + height: 88rem / $pxConvertRem; | ||
33 | + margin: 0 auto; | ||
34 | + background-size: 100%; | ||
35 | + background-repeat: no-repeat; | ||
36 | + background-position: center; | ||
37 | + margin-top: 16rem / $pxConvertRem; | ||
38 | + } | ||
39 | + } | ||
40 | + | ||
41 | + .right { | ||
42 | + width: 81%; | ||
43 | + float: left; | ||
44 | + padding-top: 20rem / $pxConvertRem; | ||
45 | + padding-bottom: 20rem / $pxConvertRem; | ||
46 | + height: 80rem / $pxConvertRem; | ||
47 | + | ||
48 | + div { | ||
49 | + height: 40rem / $pxConvertRem; | ||
50 | + line-height: 44rem / $pxConvertRem; | ||
51 | + color: #595959; | ||
52 | + font-size: 24rem / $pxConvertRem; | ||
53 | + } | ||
54 | + } | ||
55 | + | ||
56 | + .info { | ||
57 | + padding-right: 4rem / $pxConvertRem; | ||
58 | + } | ||
59 | + } | ||
60 | + | ||
61 | + .title { | ||
62 | + height: 112rem / $pxConvertRem; | ||
63 | + line-height: 112rem / $pxConvertRem; | ||
64 | + background-color: #fff; | ||
65 | + padding-left: 40rem / $pxConvertRem; | ||
66 | + font-size: 40rem / $pxConvertRem; | ||
67 | + color: #4f4f4f; | ||
68 | + | ||
69 | + @include set-singleBorder("top", $border_color_strong); | ||
70 | + | ||
71 | + @include set-singleBorder("bottom", $border_color_light); | ||
72 | + } | ||
73 | + | ||
74 | + .detail { | ||
75 | + background-color: #fff; | ||
76 | + padding-left: 80rem / $pxConvertRem; | ||
77 | + } | ||
78 | + | ||
79 | + .timeline-box { | ||
80 | + @include set-singleBorder("left", $border_color_strong); | ||
81 | + | ||
82 | + position: relative; | ||
83 | + padding-left: 52rem / $pxConvertRem; | ||
84 | + } | ||
85 | + | ||
86 | + .timeline-node { | ||
87 | + position: absolute; | ||
88 | + top: 32rem / $pxConvertRem; | ||
89 | + left: -9.04444rem / $pxConvertRem; | ||
90 | + display: inline-block; | ||
91 | + width: 16.4rem / $pxConvertRem; | ||
92 | + height: 16.4rem / $pxConvertRem; | ||
93 | + background-color: $border_color_strong; | ||
94 | + border-radius: 100%; | ||
95 | + } | ||
96 | + | ||
97 | + .timeline-box:first-child { | ||
98 | + .timeline-node { | ||
99 | + background-color: #989898; | ||
100 | + } | ||
101 | + | ||
102 | + .timeline-info-row { | ||
103 | + color: #606060; | ||
104 | + } | ||
105 | + } | ||
106 | + | ||
107 | + .timeline-info { | ||
108 | + padding: (20rem / $pxConvertRem) 0; | ||
109 | + | ||
110 | + @include set-singleBorder("bottom", $border_color_light); | ||
111 | + } | ||
112 | + | ||
113 | + .timeline-box:last-child { | ||
114 | + .timeline-info { | ||
115 | + border: none; | ||
116 | + } | ||
117 | + } | ||
118 | + | ||
119 | + .timeline-info-row { | ||
120 | + min-height: 40rem / $pxConvertRem; | ||
121 | + line-height: 40rem / $pxConvertRem; | ||
122 | + font-size: 28rem / $pxConvertRem; | ||
123 | + color: #bababa; | ||
124 | + padding-right: 32rem / $pxConvertRem; | ||
125 | + } | ||
126 | +} |
1 | +{{> layout/header}} | ||
2 | +<div class="logistic-page yoho-page"> | ||
3 | + <div class="overview"> | ||
4 | + <div class="left" > | ||
5 | + <div class="icon" style='background-image:url("{{logisticImg}}")'> </div> | ||
6 | + </div> | ||
7 | + | ||
8 | + <div class="right"> | ||
9 | + <div> | ||
10 | + <span class='info'>物流公司:</span> | ||
11 | + <span >{{logisticCompany}}</span> | ||
12 | + </div> | ||
13 | + <div> | ||
14 | + <span class='info'>快递单号:</span> | ||
15 | + <span>{{logisticNumber}}</span> | ||
16 | + </div> | ||
17 | + </div> | ||
18 | + | ||
19 | + </div> | ||
20 | + | ||
21 | + <div class="title"> | ||
22 | + <span>物流详情</span> | ||
23 | + </div> | ||
24 | + | ||
25 | + <div class="detail"> | ||
26 | + {{# logisticDetail}} | ||
27 | + <div class="timeline-box "> | ||
28 | + <span class="timeline-node"></span> | ||
29 | + <div class="timeline-info"> | ||
30 | + <div class="timeline-info-row"> | ||
31 | + {{ city}} {{ status}} | ||
32 | + </div> | ||
33 | + <div class="timeline-info-row"> | ||
34 | + {{date}} | ||
35 | + </div> | ||
36 | + </div> | ||
37 | + </div> | ||
38 | + {{/ logisticDetail}} | ||
39 | + </div> | ||
40 | +</div> | ||
41 | +{{> layout/footer}} |
@@ -276,8 +276,17 @@ | @@ -276,8 +276,17 @@ | ||
276 | seajs.use('js/me/personal-details'); | 276 | seajs.use('js/me/personal-details'); |
277 | </script> | 277 | </script> |
278 | {{/if}} | 278 | {{/if}} |
279 | +<<<<<<< HEAD | ||
279 | {{#if browseRecordPage}} | 280 | {{#if browseRecordPage}} |
280 | <script> | 281 | <script> |
281 | seajs.use('js/me/browse-record'); | 282 | seajs.use('js/me/browse-record'); |
282 | </script> | 283 | </script> |
283 | {{/if}} | 284 | {{/if}} |
285 | +======= | ||
286 | +{{#if logisticInfoPage}} | ||
287 | +<script> | ||
288 | + seajs.use('js/me/logistic'); | ||
289 | +</script> | ||
290 | +{{/if}} | ||
291 | + | ||
292 | +>>>>>>> feature/logistic |
-
Please register or login to post a comment