cart head

@@ -10,6 +10,12 @@ const helper = require('../models/cart-helper');
 const ghelper = require('../../guang/models/guang-helper');
 const simpleHeaderModel = require('../../../doraemon/models/simple-header');
 
+const stepper = [
+    {name: '查看购物车', focus: true},
+    {name: '填写订单'},
+    {name: '付款，完成购买'}
+];
+
 const getProductInfo = (req, res, next) => {
     let pid = req.query.productId || '';
 
@@ -85,6 +91,7 @@ const cart = (req, res, next) => {
             return res.render('cart', {
                 module: 'cart',
                 page: 'cart',
+                stepper: stepper,
                 simpleHeader: simpleHeaderModel.setSimpleHeaderData(),
                 uid: uid,
                 cart: ret

 <div class="order-ensure-page shop-cart yoho-page clearfix">
     <div class="order-edit order-cart" id="cart-page">
         <div class="order-title cart-page-title order-ensure-title">
-            <ul>
-                <li class="first active">查看购物车</li>
-                <li>填写订单</li>
-                <li class="end">付款，完成购买</li>
-            </ul>
+            {{> shopping-step}}
         </div>
         {{#unless cart.isLogin}}
             <div class="cartnew-tips">

 .order-ensure-page{
-
-    .order-title {
-        position: relative;
-        margin-bottom: 15px;
-        margin-top: 30px;
-        height: auto;
-        overflow: hidden;
-        &:before {
-             content: '';
-             display: block;
-             background: url(/order/save/cart_logo.png);
-             width: 117px;
-             height: 33px;
-        }
-
-        &.cart-page-title {
-            &:before {
-                 content: '';
-                 display: block;
-                 background: url(/order/save/cart.png);
-                 width: 117px;
-                 height: 33px;
-            }
-        }
-        ul {
-            display: block;
-            background: url(/order/save/cartnew_flow.png);
-            width: 364px;
-            height: 12px;
-            position: absolute;
-            right: 0;
-            top: 0;
-
-            li {
-                display: block;
-                width: 33.33333333%;
-                float: left;
-                font-size: 12px;
-                color: #999;
-                height: 50px;
-                line-height: 50px;
-                text-align: center;
-                position: relative;
-
-                &.active {
-                    color: #333;
-                    &:after {
-                         display: block;
-                         content: '';
-                         background: url(/order/save/cart_flow_black.png);
-                         width: 12px;
-                         height: 12px;
-                         position: absolute;
-                         left: 50%;
-                         margin-left: -6px;
-                         top: 0;
-                    }
-                }
-
-                &.first {
-                    text-align: left;
-
-                    &.active {
-                        &:after {
-                             left: 0;
-                             margin-left: 0;
-                         }
-                    }
-                }
-                &.end {
-                    text-align: right;
-
-                    &.active {
-                        &:after {
-                             right: 0;
-                             margin-left: 0;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
     .none{
         display: none !important;
     }
@@ -464,6 +381,71 @@
         background-color: transparent;
     }
 
+    .order-ensure-title {
+        position: relative;
+        margin: 40px auto 50px;
+
+        &:before {
+            content: '';
+            display: block;
+            background: url(/cart/cart-ico.png);
+            width: 150px;
+            height: 42px;
+        }
+    }
+
+
+    .shopping-step {
+        width: 440px;
+        font-size: 15px;
+        display: block;
+        border-top: 2px solid #b0b0b0;
+        position: absolute;
+        right: 0;
+        top: 0;
+
+        li {
+            display: block;
+            float: left;
+            position: relative;
+            width: 33.33%;
+            color: #999;
+            line-height: 40px;
+            text-align: center;
+
+            &:after {
+                content: '';
+                display: block;
+                position: absolute;
+                background: url(/cart/step-off.png);
+                width: 12px;
+                height: 12px;
+                left: 50%;
+                margin-left: -6px;
+                top: -7px;
+            }
+
+            &.first {
+                text-align: left;
+            }
+
+            &.last {
+                text-align: right;
+            }
+
+            &.first:after {
+                left: 0;
+                margin-left: 0;
+            }
+
+            &.last:after {
+                left: auto;
+                right: 0;
+                margin-left: 0;
+            }
+        }
+    }
+
     .cart-table {
         border: 1px solid #e0e0e0;
         &:not(last-child){