<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>测试</title> <link rel="stylesheet" href="css/base.css"> <style> .item-order-list { font-size: 0; background: transparent !important; } .item-order-list li { margin-bottom: 10px; background: #fff; } .item-order-list .item-order-header { border-bottom: 1px solid #ccc; color: #000; font-size: 0; box-sizing: border-box; height: 1rem; line-height: 1 } .item-order-list .item-order-header > a { font-size: .42rem; line-height: 1rem; } .item-order-list .item-order-header a i { margin-right: .1rem; margin-left: .2rem } .item-order-list .item-order-header a i.icon-arrow-right { position: relative; top: .2rem; left: -.3rem; font-size: .8rem; color: #999; } .item-order-list .item-order-header span { float: right; margin-top: .32rem; margin-right: .2rem; color: #ed5564; font-size: .42rem } .item-order-content { position: relative; height: 2.6rem; border-bottom: 1px solid #ccc; font-size: 0 } .item-order-content > a { display: inline-block; width: 100%; height: 100% } .item-order-content .img-area { position: absolute; top: .2rem; left: .2rem; display: table; width: 2.2rem; height: 2.2rem; border: 1px solid #ccc; box-sizing: border-box; } .item-order-content .img-area div { padding: .1rem; height: 2.2rem; display: table-cell; vertical-align: middle; box-sizing: border-box; } .item-order-content .img-area img { width: 100%; } .item-order-content .text-area { margin-left: 2.6rem; margin-right: 2.8rem; padding: .2rem; color: #333; font-size: .42rem; } .item-order-content .sub-area { position: absolute; top: .2rem; right: .2rem; width: 2.4rem; text-align: right } .item-order-content .sub-area span { display: block; color: #000; font-size: .42rem; } .item-order-content .sub-area em { color: #999; font-size: .4rem } .item-order-foot { padding: .2rem 0; border-bottom: 1px solid #ccc } .item-order-foot p { padding-right: .2rem; text-align: right; font-size: .42rem } .item-order-foot p em { font-size: .5rem } .item-order-foot p span { color: #999; font-size: .42rem } </style> </head> <body> <div class="wrapper"> <div class="item-order-list"> <ul> <li> <div class="item-order-header"> <a href="store.html"> <i class="iconfont icon-shop"></i>小尤的店铺<i class="iconfont icon-arrow-right"></i> </a> <span>待发货</span> </div> <div class="item-order-content"> <a href="order-detail.html"> <div class="img-area"> <div><img src="images/1.png" alt="?"></div> </div> <div class="text-area"><p class="ellipsis-3">尽享休闲美味时刻甜橙</p></div> <div class="sub-area"> <span>￥100.00</span> <em>x1</em> </div> </a> </div> <div class="item-order-foot"> <p>共一件商品，合计:<em>￥100.00</em><span>(含运费￥0.00)</span></p> </div> </li> <li> <div class="item-order-header"> <a href="store.html"> <i class="iconfont icon-shop"></i>小尤的店铺<i class="iconfont icon-arrow-right"></i> </a> <span>待发货</span> </div> <div class="item-order-content"> <a href="order-detail.html"> <div class="img-area"> <div><img src="images/2.png" alt="?"></div> </div> <div class="text-area"><p class="ellipsis-3">尽享休闲美味时刻甜橙</p></div> <div class="sub-area"> <span>￥100.00</span> <em>x1</em> </div> </a> </div> <div class="item-order-foot"> <p>共一件商品，合计:<em>￥100.00</em><span>(含运费￥0.00)</span></p> </div> </li> </ul> </div> </div> <script> var oHtml=document.getElementsByTagName("html")[0]; var iWidth=document.documentElement.clientWidth; iWidth=iWidth>750?750:iWidth; oHtml.style.fontSize=iWidth/10+"px"; </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>测试</title> <link rel="stylesheet" href="css/base.css"> <style> .flex ul { padding-left: .24rem; background: #fff; border-top: 1px #e5e5e5 solid; border-bottom: 1px #e5e5e5 solid; font-size: 0 } .flex li { display: flex; width: 100%; border-bottom: 1px #e5e5e5 solid } .flex li:last-child { border-bottom: none } .flex .left, .flex .right { padding: .4rem 0; height: 1.4rem; box-sizing: border-box } .flex .left { flex: 0 0 1.95rem } .flex .right { flex: 1 } .flex .left .avatar, .flex .left .text { display: inline-block; width: .98rem; } .flex .left .text span { display: inline-block; font-size: .3rem; color: #888 } .flex .left .avatar, .flex .left .text { vertical-align: middle; } .flex .left .avatar { width: .6rem; height: .6rem; text-align: center; overflow: hidden; border-radius: 100% } .flex .left .avatar img { height: 100%; } .flex .right .info p { font-size: .32rem; color: #444 } .flex .right .info em { font-size: .28rem; color: #666 } </style> </head> <body> <div class="wrapper"> <div class="content flex"> <ul> <li> <div class="left"> <div class="text"> <span>周五</span> <span>8-14</span> </div> <div class="avatar"> <img src="images/1.png"> </div> </div> <div class="right"> <div class="info"> <p>100.00</p> <em>提现-2小时内到账</em> </div> </div> </li> <li> <div class="left"> <div class="text"> <span>周五</span> <span>8-14</span> </div> <div class="avatar"> <img src="images/2.png"> </div> </div> <div class="right"> <div class="info"> <p>100.00</p> <em>提现-2小时内到账</em> </div> </div> </li> </ul> </div> <script> var oHtml = document.getElementsByTagName("html")[0]; var iWidth = document.documentElement.clientWidth; iWidth = iWidth > 750 ? 750 : iWidth; oHtml.style.fontSize = iWidth / 7.5 + "px"; </script> </body> </html>
