css仿支付寶提現到賬過程時間軸
阿新 • • 發佈：2018-11-27
本來想找一個現成的仿支付寶提現的時間軸，才發現沒有，我覺得不應該啊，又找了一會還是沒喲，算了，自己寫一個吧，分享出來，有需要的朋友可以直接拿走。
需要：1、iconfont（阿里巴巴向量圖示庫找個圖示，我已經找下了，你不想用也可以自己再找）
2、在移動端，我已經寫好rem.js，750px/100即可
直接上程式碼：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>進度處理</title> <style> @font-face { font-family: 'iconfont'; /* project id 924372 */ src: url('//at.alicdn.com/t/font_924372_bygyugzn79.eot'); src: url('//at.alicdn.com/t/font_924372_bygyugzn79.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_924372_bygyugzn79.woff') format('woff'), url('//at.alicdn.com/t/font_924372_bygyugzn79.ttf') format('truetype'), url('//at.alicdn.com/t/font_924372_bygyugzn79.svg#iconfont') format('svg'); } li{ list-style: none; } .schedule .protext{ font-size: .28rem; float: left; margin-top:.15rem; margin-left: .35rem; } .schedule .time{ color:#8B8B8B; font-size: .2rem; font-weight: 400; float: right; margin-top:.15rem; } .times ul{ margin-left: 2rem; } .times ul li { height:.5rem; width:4rem; position: relative; padding:.25rem 0; line-height: .2rem; border-left: .02rem solid #0D8CE9; color:#0D8CE9; } .times ul li.not{ border-left:.02rem solid #A7A7A7; color:#A7A7A7; } .times ul li#not{ padding-bottom:0;height:.3rem; } .icon { font-size: .31rem; position: absolute; left:-.15rem; font-family: iconfont; display: inline-block; background-color: #fff; padding: .1rem 0; } </style> </head> <body> <li class="schedule"> <h6>處理進度</h6> <div class="times"> <ul> <li id="payment" style="padding-top:0;"><div class="icon"></div><div class="protext">付款成功</div><div class="time">11-10 08:40</div></li> <li id="process"><div class="icon"></div><div class="protext">處理中</div><div class="time">11-10 08:40</div></li> <li id="not" class="not"><div class="icon"></div><div class="protext">到賬成功</div><div class="time">11-10 08:40</div></li> </ul> </div> </li> <script> var fonSize = 0; (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; fonSize = 100 * (clientWidth / 750); docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; }; // Abort if browser does not support addEventListener if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script> </body> </html>
效果如下圖：
