退换货状态组件

 {{# refundDetail}}
     <div class="refund-datail-wrap">
+        {{> returns/returns-status}}
+
         {{# orderReview}}
             <div class="top-tip">
             {{#if pass}}

+<div class="returns-status">
+    <div class="back-wrap">
+        <div class="progress"></div>
+        <div class="visual-state">
+            <ul>
+                {{# statusList}}
+                    <li{{#if act}} class="act"{{/if}}>
+                        <span class="iconfont state-bg">&#xe611;</span>
+                        <div class="number">{{step}}</div>
+                        <div>{{name}}</div>
+                    </li>
+                {{/ statusList}}
+            </ul>
+        </div>
+    </div>
+</div>
\ No newline at end of file

+.returns-wrap {
+    .returns-status {
+        padding: 30px 0 50px;
+
+        .back-wrap {
+            width: 800px;
+            height: 6px;
+            background: #eee;
+            border-radius: 3px;
+            margin: 0 auto;
+        }
+
+        .progress {
+            height: 6px;
+            background: #1d1d1d;
+            border-radius: 3px;
+            width: 30%;
+        }
+
+        .visual-state {
+            width: 100%;
+            display: table;
+            position: relative;
+            top: -15px;
+
+            > ul {
+                display: table-row;
+            }
+
+            li {
+                display: table-cell;
+                text-align: center;
+            }
+
+            .state-bg {
+                color: #eee;
+            }
+
+            .number {
+                position: relative;
+                top: -17px;
+            }
+
+            .cur .state-bg {
+                color: #1d1d1d;
+            }
+            .cur .number {
+                color: #fff;
+            }
+        }
+    }
+}
+
 @import "list";
 @import "refund-detail";