<template>
    <div class="flex-row process-box">
        <div class="process-main justify-center flex-column" v-for="(item,index) in processList">
            <div class="process-icon align-center" v-if="index==0">
                <div class="line" style="border-bottom-color:#3680e9"></div>
                <image :src="stepNormal" class="process-icon-div"></image>
            </div>
            <div class="process-icon" v-else>
                <div v-if="item.state=='normal'">
                  <div class="line" style="left:0px;"></div>
                  <div class="align-center">
                      <image :src="stepSuccess" class="process-icon-div"></image>
                  </div>
                </div>
                <div v-else-if="item.state=='success'">
                  <div class="line" style="left:0px;border-bottom-color:#3680e9"></div>
                  <div class="align-center">
                      <image :src="stepSuccessDone" class="process-icon-div"></image>
                  </div>
                </div>
                <div v-else-if="item.state=='error'">
                  <div class="line" style="left:0px;border-bottom-color:#ee384f"></div>   
                  <div class="align-center"> 
                      <image :src="stepError" class="process-icon-div"></image>
                  </div>
                </div>
                <div v-else-if="item.state=='cancel'">
                  <div class="line" style="left:0px;border-bottom-color:#ee384f"></div>  
                    <div class="align-center"> 
                        <image :src="stepCancel" class="process-icon-div"></image>
                    </div>
                </div>
            </div>
            <div class="mb15 align-center mt20">
                <text class="font-14 m-color-1">{{item.name}}</text>
            </div>
            <div class="align-center">
                <text class="font-12 m-color-9">{{item.data}}</text>
            </div>
            </div>
    </div>
</template>

<script>
export default {
  props: {
    processList: {
      default: Array
    },
    stepNormal:{
      default:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxNEM3ODVFRTIxQjExMUU4OEE1Q0Y1NDkwMzZEMkY5NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxNEM3ODVFRjIxQjExMUU4OEE1Q0Y1NDkwMzZEMkY5NiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjE0Qzc4NUVDMjFCMTExRTg4QTVDRjU0OTAzNkQyRjk2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE0Qzc4NUVEMjFCMTExRTg4QTVDRjU0OTAzNkQyRjk2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+WrWmZgAAAv9JREFUeNrsmEtoE1EUhs9kkubVWNum0EVRRASl4iOKRQQfuIjWIurG6kbduFDQohSrFbVF3IlQKlhcKYhufCKCtbGbLtTis9SVRaUigkWJkjRNm8T/1KmdSWaSSToz6cJLfg6Te3rny7n3nntuhVQqRbOl2WgWNXs+zmvavjP8BmgrP0KLoErIAf2AhqFX0FPo4YuzVb/yGV/QM02AcMMchI5B83SOHYGuQxcA9cUQGIBshrkKLSgw+qPQGegSoBIFwwCkFabdoLX1GNoNoHDeMADphDls8Bp9A23UArJpgLSYAMJtBXQf4zt0wcBxHcx5E3cw78a2nNMEEN7qA9Bik1PKBBTAdA1ki8wBC0Cm8lt7rmk6amHC3Y6ZWKgKg47lMLUWH0V7tCITLMJxFNSCWV0EmIB03mXAqKb7XatcFDrhpwdNlbRyvjI9LK1x0J0jFdTb4qfGOreir9xjoyv751LfaT+d2+kju3oO90DVajD+dE+fS6Dmet+krS6z0ckGn6L/+JZSqikXyesUqClYSlW+6eH2rnVTAPAlokD1y1y0aYlTKzp+XfWMTRAIn+n9KCr7HaLcl0iUjVZiFxS+6c9qS0UO8zPdKzyapK7eCCWSRNF4ijq6I4r+zp4I/Y6lKIm8ea0vSt/CyX99N59F6dPI30O6/2OcQu/HtGBGMjIwFtJdmB1q3k78qiT8xlUKAF4LdkxFbDzzwOVYeDCFkTHNyoAJvVOlhTwy/Zp/MaEOMpnXEQw1EG78bRYQbm/lNY4cpqcIW7tbK89wZIYshrmlCoNwcTw7LAQJ4Z2D2Q5KrnU/WwDCP7w166kNUi6eD0nOZrYuvOt5zkoPTo9gLpoI8lq68ui+UXINfMMEkA9QgzQD+mCkvb8PumwgyEtoPcb+OpNLXCNnfukaW0hLSLv0FEBiRlxvK2CapcU9RycEH1T3+CYAiHeG3bVlUF6ec2gbVCfVQPIih+/U/OIn0G1ADBt+8c8Cx2dhmfQYxcvjM1lUwv9/Fmm0PwIMAAR+8zVia2a4AAAAAElFTkSuQmCC'
    },
    stepSuccess:{
      default:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyNDQyNzk2RjIxQjExMUU4OTFBRURFMTgwMUVGODBDNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyNDQyNzk3MDIxQjExMUU4OTFBRURFMTgwMUVGODBDNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjI0NDI3OTZEMjFCMTExRTg5MUFFREUxODAxRUY4MEM2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI0NDI3OTZFMjFCMTExRTg5MUFFREUxODAxRUY4MEM2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+So68RgAAAwlJREFUeNrcmMtrU0EUxs9NrI2mhDwMaUmbEFKJi8boJkp9LEXdKC4qBf0HXKgbN+5EBBeudOHKnVJERAoiCIoootAiqATaRQkJoY9EYoNJIEnz8DvjrVR6b+4jN1A88DGXZGbuL2fOmZkTqdPp0E4xG+0g22Wk89zcHDceaBI6BZ2AotBeKA19gV5D76FsMpk05HZJzzLJEIegh9BRnXMXoGvQM0C1LIEBiBfNC+ikSe//hE5D84AyHzMAOYYm3wMIG/8Ydu0dzCeZ8gwGTqF5anGM8nzTarGkCAMQjovPfUqa+xxLSktmUwBxydnQL7sqZ2J3GDlrZqDdfd5SZvEuh5ZnDkBnrXqj3W4nr9er9BWDXNeCuWsViCRJFIvFKBqNks/nU+pyG94ZUITBF3vQnLMKZnx8nIaGhsRzpVJR2/2PqHnmoFUgoVCIPB4PcaYuLS1RvV5X6zqtBjNpBcjIyAgNDw+L53Q6Tevr6926T8lJsw3mcK8gHKxjY2PiOZPJULFY1Bqyj+NcCSbSC4jL5RJxwra6ukqFQkHv0AHD95lEIvH3Zdvy1OEQmSOOakDkcjlDiacEozqD0+mkwcFBsQyRyL8O5M8nJiZEKpfLZbE8Bq2hBPNdrXe1WqV8Pi+e/X4/hcPhP4NtNorH46Kt1Wq0uLhoFOQX1FK66X3oNiqbzdLGxgaNjo5SIBAQAG63W7TNZpNSqRSZuE8/33pgboX5pjVyZWWF2u222EfYQ8LHjYbwCH9uwp6o7TNV6J3W6LW1NQHF1mq1aGFhQSyRSfuoep/BBpRA81XPLMFgUMRSqVQyC3IPS3Sj20HJS/VJz0zLy8u9gPCa3up6asvBdF7u3E+7hHdVNG966PTDytNbwWZk6a4OXkJX+gDyFrqsVrIowsiduWC7aCHIY777divo9BRxITRvoP0mIXi757JnVquI01veSvKN/hFntU6IJnQTegAIXRuRZGQLly9C7Kkz0AXouFz0b9o89Iq9wGed3hrbFIwK3OYVoKO1DH2F+a//LPotwAA+0Qk5v+KixwAAAABJRU5ErkJggg=='
    },
    stepSuccessDone:{
      default:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozNjQxQjc0RTIxQjExMUU4QjREMTg5N0VDRkZDRkMwRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozNjQxQjc0RjIxQjExMUU4QjREMTg5N0VDRkZDRkMwRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM2NDFCNzRDMjFCMTExRThCNEQxODk3RUNGRkNGQzBGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM2NDFCNzREMjFCMTExRThCNEQxODk3RUNGRkNGQzBGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+EPrOvgAAAzVJREFUeNrkmF1IFFEUx8+4rrurpRXZYyWF1kNW9KWmlhSpvSRFlpYFRkYFfTwU0YMVkRYE9SILgUWgbBkRfRAUhCRGYUllBH1AZWlqmziZ5bq74/S/4xii87EzOxtCB/4cdufemd+ce8+59w4niiKNF4uicWTRRjssPeGdDJcBrYGyoFlQLPQBaobuQQ+hVkgx7E3HEsODAcQCODeUptIkWVaR/PsbtB+6BgmWRAYQU+BuQNkGgzgN8kBVUB70NKw5A5DlcF0mQEYae5km6BTEmYIBSCFco5l5pWJH5UhxhmAAwubF1QgkzCbovNpFbnSdAUg8nBeKiWAW5yKj7ocSGU+EQZjdxEs7NWHQYA7c2n9Q3xjIAb3InLbyiUmJNtqS7lK7fBIvb1esM7jAeq2zAsJl56i8YCJlJsdQn0+k2sf9ajVumZyxYyKTahVIZWE8ZQEkOoqjDl6z+BapDVNG2KsuKsiunDhaPNNO0TaOXrUFqLSa1+pSqAazMFyY0uxY2pzmkkBetweo7BKv12UqpodNaW1KCgdk76o4CYSVrc4fAu2o5kPtah9eSEPezxzHhMyd56AJjrHVvGxlHG1Y4iJb1NA1AyA0cnkYGZkvWj3yUp2UP99JDW8H6NCV3r//L8L8YMPDOHwBkbIrvhsNql9pzrRo9ai4/VPKjPTZMVS5MV76b0WKg6q2TZKGZiAo0uoz3UZBerEsCEqRadDqdeu5j74C5lxxAuXMddCT8kQJYhDq94u0/UIP+QXD++nratn0Uq/ns48B2nmRJ2EQA80Nif89SLsv89TWI5iZ97WKMAjXL7h6vd5vOoK0r4aXotGFrCl299C7zqDZJGzU2nYehF7o3aH5U4CO1PVSa7cgRcaknUUABvT2M4+sqMY6xt4gATB9evuZArlxJG3raBBFGDTyWrV6q5gHz/CEvAdG4ztweyIA8gAqMXw6AJBb3kBbZTXyKVQwdW4CUB3cDOh9GBB+eR6W6M1F3YUSQJ/hUuRTYbsBCFZ8DrOsYRvwkFZMo59EkPrT4fKh9VCmfOgfNnaEvSs/vEVtSNQO/pyZ7zMAUtoChHwjS2H+i49FfwQYAN81/2tpZJvPAAAAAElFTkSuQmCC'
    },
    stepError:{
      default:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1RTA5QjhBNTIxQzAxMUU4ODVDQkY1QTIyM0E2RUM2NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1RTA5QjhBNjIxQzAxMUU4ODVDQkY1QTIyM0E2RUM2NSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVFMDlCOEEzMjFDMDExRTg4NUNCRjVBMjIzQTZFQzY1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjVFMDlCOEE0MjFDMDExRTg4NUNCRjVBMjIzQTZFQzY1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+by/PaQAAAu9JREFUeNrsmE9oE0EUxt9uUtOmadr4Dzy1KIp/sB4UrehBKEIRA6KiXtqbYM1ZQfBi9aB48VDQg3hoDyposXqpFqu0aPUi9CDFKoKoUKQq2iZN0zbrN3ES4zqzOzNNoAcffGQhs5tfvnnz5s1ajuPQYgmbFlEETW/8vvNA/tLinzmLY8P3jGEsnWniAEuhVugCFBEMuwN1QK+hrA6cEgyHaIKGNN28DiWgjAqUJwyHqIPeQssXkA5tULcfkO0DsoddLhCERRc0gGda2s5wkDh0v8QLZgxaD4ccHWc2lgGExTrocdFK9HYGA1mCzpa5pByDbrtzyBZMT4+Qui5KoSP7lX8tsLqeKpp3yb6+BVX4Fb0Iz5W/QarDVNN5ngJr6sleFqPpq92+IJHODrKiNZSE87MDz0XDruDPJ4rdsV2uXBLd5SRTNDcymruubDtEVe2tviB2rJacr99ofuy9bOhJ98zYggHCSF2+RjM9fZ5AxSDZLxM0mThL2U/jXiaulcFE/PLAC8gAhMVp4WrCNDXiY0QlOcOnTlDoYEvuOt11lzIPB01ACgz5vClO4M2qdzOHWDAg5lDoaJys0BITEOnS1ir5DCjTP/T7rwHESU2bglgimHmdJ7AcCW5r/PPEcBWF4ntL1um90QEpzpGZvqdKy14SjqjojZqAFKYmlS7kEAu/wsjjs8yZcWMQxTokiDPCCoyYg6ZMQHQKoyt6hc5wwhZhutfWKNcRN5DH5pqGfnptlMIdzfkxSembvVR5eJ/S8s3XoeCWDZR5NCgb1uRuIUT9DGu8h4UORarJmUqqFxDs9myTFcQHqMGzn+HxAnoidEgDJL/bS2KTqDn/B4YPaoYmytTlbYWSyj0wb5hXlQFoN/RKdmSRHlVwA1vqK6H+EoE0QM+8zk6+J0reAW6HXhpC3ICOAyJbsrM2P4DtgB4o7vDnoIusnqiety3d9zPcqQC0gp+DmP1RiDW776CPbGsyeRth/X9ZJIlfAgwATHBXoR9KtP4AAAAASUVORK5CYII='
    },
    stepCancel:{
      default:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3MDEwRTUwNTIxQzAxMUU4Qjc0NEQ1QTE0MkI2RUFBRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3MDEwRTUwNjIxQzAxMUU4Qjc0NEQ1QTE0MkI2RUFBRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjcwMTBFNTAzMjFDMDExRThCNzQ0RDVBMTQyQjZFQUFGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjcwMTBFNTA0MjFDMDExRThCNzQ0RDVBMTQyQjZFQUFGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+qSDUYwAABE1JREFUeNrkmAtsFFUYhc/Mzj5L5alFqi2CIIooBRJAjBgQYhNMqfWRYAQlgtj4ipGAKDHEV9RIE1MJChirJsRXLYlRgRADxjYaidEgpRShgOKzrgvd986M524Hrbsz05ntNiHxJid3s7kz8829//nvf0fSdR3nSpNxDjWl0AvDsxdL7PxUwPgrTcWHt7Vohd5TcrNMBBAPnketoBZZvMw31CZqB/U74YoLQ4ggu3XUEy5fdg91D9XlBMoWhhCiq6bEnXwDCIcGajWB1IJgjJjYSD1cpPg8QM0iUNQVjAGylVpeZMOcpCYRKObI2sbSrB0EENEupr7gM2Sn1p5MPWt5O68C33Uz4Z07C54Jl0AePhT6mR6oJ04h3bYfqU/3Qu+J2gFNpTZQ622XySDuMt4gn3z6FJSsrYd80YVQDx9F5tt2aJEzkIJ+KJeNh1I1GXo8gfgrTUi27Opvlsq5XKfsYBawM72Lf/FChFavQuZgJ2Ibt0BtP5K/5mWjEFx1J3w3zkXyg08Qe+k1wNqtwqG1fS2v5MRKo+nKzJ5GkPuQ2r0P0adfBjLmDtV+/QPRDQ3IfN+B0CMroP0ZRuL1d61gxAOHUhGzmBlBTTS7KnPoB0RuuTf7MGj9Z/vk+x9DHn0+gstvR3pPK9TjP1oNnU81m7lphtUVejgC7effHIGcbYkt26GFTyOwrM5u2FIra19jmoiGlLg3sMcDzxUTkPnuYNZ1IrCFpJJQ7shqIzzyYKbmgQQDKN32Ii081h2MqsJfsxC+eXMghYIo3fQMQg/cDT2RzB0pthivGczI3JHB+qXwVIxByfqHGF0eVzyxhq3QusNGcZHuDXxVtc11fWH+M1KZdiX8ddW9s87kFlh2qysYnfkn9sLm7O/4tnegHj1hNVQzg+n8d/EkBG5bBPVIV3Zq9Z4YvHOmQx41whVQet+XiDe+gcTbH9oOy0t6DKSV7F7NHRladz+8M6sQuXml1TQPpB1n0htrNjNtZqNTLTshXzAS/pvmD0bZ+5aVtdv7rt8/CY/pP7X7cwTpBs/4Smfl47DzEFpTj8Adtf0Nfc8UhtOVsdoORCCKpFfa+BSUGVfZp5iK8qyVfTdci3Tr13ZDTxsFl+VGWcbuF6u3HfL8Y1CmTELqs1Yu3y5kDnRkd2lhe2XiOG6Q18NXswB691/oWfMc1M5jdjBLOAHbbSs9AjVYlpqynN29A0tqIZeX9VqYThOJTThQ2Dm5YycSbzZDj8bsQH6iKnNrYjMYr1EellkHhQTPpZXMP+MglXK7oP3VrpPcrQ9b7ug57XKCHHJaA49hd2yAJwKrdhdBmhwfb40KrEo4u8ggj1JNhZ6bRrP7yqoMddFEyqihPrI7zPV7oiSQ2MieLOA0ebbtpeoI0V20szahhrF7kHrcYSw1Gy/Q7vS8Lbn9PmOcICqMmLraWELxQUDUlsIh+6kOAiQH9SvE/+pj0d8CDADOrJ/Hlv4FYgAAAABJRU5ErkJggg=='
    }
  },
  data(){
      return{
          state: '',
      }   
  },
  name: "Process",
  watch: {},
  methods: {
    setting() {}
  }
};
</script>

<style scoped>
.font-12 {
  font-size: 24px;
}
.font-14 {
  font-size: 28px;
}
.m-color-1 {
  color: #333333;
}
.m-color-9 {
  color: #808080;
}
.flex-row {
  flex-direction: row;
}
.flex-column {
  flex-direction: column;
}
.row-item {
  flex: 1;
  display: inline-flex;
}
.align-center {
  align-items: center;
}
.align-start {
  align-items: flex-start;
}
.align-end {
  align-items: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-center {
  justify-content: center;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.process-main{
 width: 345px;
 height: 200px;
}
.process-box {
  padding-right: 30px;
  padding-left: 30px;
  background-color: #fff;
  height: 200px;
  position: relative;
}
.process-icon{
  width: 345px;
  position: relative;
}
.process-icon-div {
  width: 35px;
  height: 35px;
}
.line {
  position: absolute;
  bottom: 16px;
  right: 0;
  content: " ";
  width: 175px;
  height: 2px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #e8e8e8;
}
</style>


