body { width:100%; overflow-x:hidden; margin:0; } img { vertical-align:middle; max-width:100%; } body,ul,li { list-style:none; padding:0; margin:0; } .progress { width:100%; padding:10px 0; font-size:14px; background-color:#fff; border-bottom:1px solid #eee; position:fixed; z-index:999; } .progress ul { display:flex; justify-content:space-between; align-items:center; } .progress ul li { text-align:center; width:100%; color:#999; position:relative; } .progress ul li i { display:inline-block; width:12px; height:12px; background:#ccc; border-radius:100%; position:relative; } .progress ul li p { margin:2px 0; } .progress ul li.active i::after { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:block; width:28px; height:28px; background:url(../images/icon-point-active.png) center center no-repeat; background-size:100% 100%; z-index:9; } .progress ul li::after { content:""; position:absolute; width:160%; height:4px; background:#eee; border-radius:4px; top:5px; left:20%; z-index:-1; } .progress ul li:last-child::after { display:none; } .progress ul li.active p { color:#0570DB; }
更新时间:2022-01-11 15:41:43