<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="yes" name="apple-touch-fullscreen" /> <meta content="telephone=no" name="format-detection" /> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="style/base_wap.css" rel="stylesheet" type="text/css" /> <link href="fonts/css/fonts.css" rel="stylesheet" type="text/css" /> <style> html{ font-size: 62.5%; } .copy_btn{ padding: 0.5rem 0.5rem; border: 1px solid #efefef; height: 10rem; } .productImg{ flex: 3; } .LogisticsHead{ display:flex; background: #fff; } .LogisticsCompany{ flex: 9; } .LogisticsCompany div span{ height: 3rem; line-height: 3rem; } .LogisticsCompany div span input { width: 10rem; background: #fff; color: #000; } .LogisticsMsg{ background: #fff; } .LogisticsMsgTitle{ height: 3rem; font-size: 1.4rem; line-height: 2.5rem; padding-left: 1rem; border-bottom: 1px solid #efefef } .LogisticsMsgContent{ display: flex; /* height: 6rem; */ } .IconPoint{ flex: 3; background: url(images/line.png)no-repeat center; background-size:30% 100%; } .LogisticsMsgDtail{ flex:9; } .LogisticsMsgDtail p:first-child{ line-height: 3rem; border-top: 1px solid #efefef; } .LogisticsMsgDtail p:last-child{ line-height: 3rem; border-bottom: 1px solid #efefef; } .PointGreen{ display: block; width: 30px; height: 30px; margin: auto; margin-top: 1.5rem; background: url(images/green_wuliu.png)no-repeat center; background-size: 100% 100%; } .LogisticsFirst{ background: url(images/line.png)no-repeat bottom; background-size: 30% 60%; } .LogisticsLast{ background: url(images/line.png)no-repeat top; background-size: 30% 60%; } .PointGray{ display: block; width: 30px; height: 30px; margin: auto; margin-top: 1.5rem; background: url(images/gray_wuliu.png)no-repeat center; background-size: 100% 100%; } </style> </head> <body> <div class=" LogisticsHead" style="margin-bottom:15px;"> <div class='productImg'> <img src=''> </div> <div class='LogisticsCompany'> <div class='height3'><span>物流公司:</span></div> <div class='height3'><span>运单编号:<input value="1qwewqeqweqeq" disabled='disabled' class='copy'></span><span class="copy_btn" onclick='copy()'>点击复制</span></div> <div class='height3'><span>物流电话:</span></div> </div> </div> <div class="LogisticsMsg"> <p class='LogisticsMsgTitle'>物流跟踪</p> <div class="LogisticsMsgContent"> <div class="IconPoint LogisticsFirst"> <span class='PointGreen'></span> </div> <div class="LogisticsMsgDtail"> <p class=''>您的快递已经发出，正在前往武汉。</p> <p class=''>时间</p> </div> </div> <div class="LogisticsMsgContent"> <div class="IconPoint"> <span class='PointGray'></span> </div> <div class="LogisticsMsgDtail"> <p class=''>您的快递已经发出，正在前往武汉。</p> <p class=''>时间</p> </div> </div> <div class="LogisticsMsgContent"> <div class="IconPoint LogisticsLast"> <span class=' PointGray'></span> </div> <div class="LogisticsMsgDtail"> <p class=''>您的快递已经发出，正在前往武汉。</p> <p class=''>时间</p> </div> </div> </div> </body> </html> <script> function copy(){ var copy_content = document.querySelector('.copy'); copy_content.removeAttribute("disabled"); copy_content.focus(); copy_content.setSelectionRange(0, copy_content.value.length) document.execCommand('copy', true); copy_content.setAttribute("disabled","disabled") } </script>
大概就长这样。。。。。。