写一个类似时光轴的东西

时间：2021-12-28 18:20:12
<!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>

写一个类似时光轴的东西

大概就长这样。。。。。。

标签：

相关文章