<template>
    <div>
        <h1>Steps</h1>
        <p>一种可以自定义具体内容的steps进度条。</p>
        <h5>示例</h5>
        <p>默认用法</p>
        <nut-steps stepsId="step1">
          <nut-step stepTitle="您的订单已经发往北京"><p>2017-12-12</p></nut-step>
          <nut-step stepTitle="您的订单已经到达上海"><p>2017-12-11</p></nut-step>
          <nut-step stepTitle="快递公司已揽件"><p>2017-12-10</p></nut-step>
        </nut-steps>
        
        <p>可配置活动数值，显示进度数字以及title具体每个进度条的高度</p>
        <nut-steps stepsId="step2" :active="2" :showNum='true' :titleTop="20">
          <nut-step stepTitle="您的订单已经发往北京"><p>2017-12-12</p></nut-step>
          <nut-step stepTitle="您的订单已经到达上海"><p>2017-12-11</p></nut-step>
          <nut-step stepTitle="快递公司已揽件"><p>2017-12-10</p></nut-step>
        </nut-steps>
        
        <p>可以设置进度条为图片</p>
        <nut-steps stepsId="step3" :active="1">
          <nut-step stepTitle="您的订单已经发往北京" icon="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAABFFBMVEUAAAD0WD3yLi/zLzHyMDDyLi/xtk3yLS/yMDDyMDDyMDDyMDDyLi/zvFDyMDDyMDDyMDDyMDDyMDDyMDDzMDDzMDDyLS/yMDDzMjLyLS/yMDDyIi3yMDDzKC7yMDDyMDDyMDDyMDDyMDD1vE3yMDD2dX3yKC7yKC70PT3zMjLyIS3xHy3yIS3yMTHyICzyMDD4lpb/zE7zNDT9tUTyMDD////yLi7yJibyKSnyKyv+6ur+7+/2Vlb+5eX+2dn0UFD0QkL+8vL+3t75kZH4dHT3a2v3YmL2XV3+4eH+0dD9ysn8xcX7vb33fn34eXj3b2/3Zmb1Wlr1TU3zPj7+9vb+7Oz7trb3h4f4hoX6hYT0SUnzPT3vEYM6AAAANHRSTlMAAgQl+N0OB+mgeVRPFfLt4dfPxLuzSEUpCeWxl3FjWT82IhkL8uDRsqiZloyJc19RKCEf9c2jwQAAAYVJREFUOMuN1GdXwjAUBuBQyt5TQEDAvddN2EO2qCy3/v//4W1PIS2Q4vutPc/JuMkN0UVKuGNhpywHo5fxA7Ix9kwIeALn9+tE8jhhJRf2FbO/C+ux5Q0mEYKN8Vi4sQZBEO9S+Y5BmLimki6xKR3eqsbiNTHdKvWp9bGZGnpjwYH2hKY4QdM4cWAVI0LTq6BpsQJu39S0fxi4JZIVmWmd0uGcAUQlou2fwey7VdaZPpp6Ew34HSSsbaRZoaNWiZshmhoajJUEOKJPi7GKgzallZr2tUPkxXRjiuq1rJqZYgaa4QjVC6pnRRVrDUrflwY8ON1CMVX9llVT7eP6liOFYangC9UHzB/RTLnBhZ8CV+wT1QjNQ48bpQQZ0CnooEIzKTH+NyoZj4WxjmK6RZ1RjkWKrKq3scFAYe2qMKg1wWBiDn7phMlZ+PUVxZXc2gjgvFu01NHWlsJYUyJzLf23zc0fjBwxxpF1rpoz34ZH7EpfMH/aSjZGyrtjQRnkVCTtNTyHf/a1zubJ1UQcAAAAAElFTkSuQmCC"><p>2017-12-12</p></nut-step>
          <nut-step stepTitle="您的订单已经到达上海" icon="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzNGRUY2RkQyNDE1MTFFN0EwMDZFQTU3N0ZDRDlCMTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzNGRUY2RkUyNDE1MTFFN0EwMDZFQTU3N0ZDRDlCMTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDM0ZFRjZGQjI0MTUxMUU3QTAwNkVBNTc3RkNEOUIxNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDM0ZFRjZGQzI0MTUxMUU3QTAwNkVBNTc3RkNEOUIxNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrYHA1cAAAKcSURBVHjatFfPbxJREGYXsQXKEqitSQ099CIXy6FHbUKDHoFwJYSr5WL4a0DjFTjBgYSDJHqlV40hQNLWVD34I7HQCEWxWWeaec26vN19u8IkX3azO+99b+bNzJsnucREAigEP2AF4KZ/V4BfgDHggqCKTGgmOPldwAbgluAi/wC+A77SomwThwERG4S8BXwC/DCyiLeYbcA9gOxyLjg2BPCQ+02JkXQHsO5anGBMeAFDM+LtBZMyWaUtG/GIw+TeZYmfov/SpdlDNwXSP6IoitxoNPbj8XhAdPZEIqHgGBzL+R3Re3kLsKcHTFBUQcbj8Uk6nX7M09Eik8k8QV0cU6/XnxnobTGLJcrTOSmVSu8mk8mpz+fbqdVqL4A8ZGQpkIYrlcpz1IUxJ+Vy+b2B6gZL46CZFWgpswKfaJWZpfA8FvBOkPl9zym5A1JEBE2+D1izChp0M7qbXHmay+UO8bvWvdls9rDZbJ4LxOBPJI6JlkU9OX5zQHpdTt2Uu5KI9mAwmHa73depVOoREno8npAD0usKabsWy7IszU0y/81S0OJN0cMAU6Zard7s6Ww2G+J7Mpl82Ov13vT7/UtB3isknNoh9Xq9N3sKeMryHIMMdQSJp0LphCmDZLyUEclzXjpZFhAz0v8gD7IzOMZTgIJ/YEVqRI5jDXRjLKpV6pHmpFAo7Gr31Cxl8J92z2HsAwNV5FLZETUB3NFHd6vV+hyNRrvFYvFlu90eieR5p9N5FQgE3ubz+SOIepXTh31AYm3+hajtWaZgtTvXdyBTasz8SyJlLS+357qgxmx1waRo5ZlVezukQ8O/QEvP9LcLt4HyiBqzNRMdK5kBPgK+OL3CbBLsXGG+ERxdYcwubbc1C0Gi33YvbX8FGADA2JGWHa3uaQAAAABJRU5ErkJggg=="><p>2017-12-11</p></nut-step>
          <nut-step stepTitle="快递公司已揽件" icon='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzNGRUY2RkQyNDE1MTFFN0EwMDZFQTU3N0ZDRDlCMTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzNGRUY2RkUyNDE1MTFFN0EwMDZFQTU3N0ZDRDlCMTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDM0ZFRjZGQjI0MTUxMUU3QTAwNkVBNTc3RkNEOUIxNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDM0ZFRjZGQzI0MTUxMUU3QTAwNkVBNTc3RkNEOUIxNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrYHA1cAAAKcSURBVHjatFfPbxJREGYXsQXKEqitSQ099CIXy6FHbUKDHoFwJYSr5WL4a0DjFTjBgYSDJHqlV40hQNLWVD34I7HQCEWxWWeaec26vN19u8IkX3azO+99b+bNzJsnucREAigEP2AF4KZ/V4BfgDHggqCKTGgmOPldwAbgluAi/wC+A77SomwThwERG4S8BXwC/DCyiLeYbcA9gOxyLjg2BPCQ+02JkXQHsO5anGBMeAFDM+LtBZMyWaUtG/GIw+TeZYmfov/SpdlDNwXSP6IoitxoNPbj8XhAdPZEIqHgGBzL+R3Re3kLsKcHTFBUQcbj8Uk6nX7M09Eik8k8QV0cU6/XnxnobTGLJcrTOSmVSu8mk8mpz+fbqdVqL4A8ZGQpkIYrlcpz1IUxJ+Vy+b2B6gZL46CZFWgpswKfaJWZpfA8FvBOkPl9zym5A1JEBE2+D1izChp0M7qbXHmay+UO8bvWvdls9rDZbJ4LxOBPJI6JlkU9OX5zQHpdTt2Uu5KI9mAwmHa73depVOoREno8npAD0usKabsWy7IszU0y/81S0OJN0cMAU6Zard7s6Ww2G+J7Mpl82Ov13vT7/UtB3isknNoh9Xq9N3sKeMryHIMMdQSJp0LphCmDZLyUEclzXjpZFhAz0v8gD7IzOMZTgIJ/YEVqRI5jDXRjLKpV6pHmpFAo7Gr31Cxl8J92z2HsAwNV5FLZETUB3NFHd6vV+hyNRrvFYvFlu90eieR5p9N5FQgE3ubz+SOIepXTh31AYm3+hajtWaZgtTvXdyBTasz8SyJlLS+357qgxmx1waRo5ZlVezukQ8O/QEvP9LcLt4HyiBqzNRMdK5kBPgK+OL3CbBLsXGG+ERxdYcwubbc1C0Gi33YvbX8FGADA2JGWHa3uaQAAAABJRU5ErkJggg=='><p>2017-12-10</p></nut-step>
        </nut-steps>
        
    </div>
</template>

<script>
import Vue from 'vue';
export default {
    data(){
        return{
        
        }
    },
    methods:{
    }
}
</script>

<style lang="scss" scoped>

</style>


