vue 物流界面布局效果

            <div class="tl-card-error trans">n              <ul>nn                <li class="right">n

<div class="tl-card-error trans">n <ul>nn <li class="right">n <span class='tl-point-6-313'></span>n <div class="status">11:39n ｜血氧异常： <span class='tl-red'>91%</span>n ｜体温异常： <span class='tl-red'>40°C</span>n ｜脉搏异常：<span class='tl-red'>108次/分</span>n </div>n </li>n <li class="right">n <span class='tl-point-6-313'></span>n <div class="status">11:39｜血氧异常： <span class='tl-red'>91%</span></div>n </li>n <li class="right">n <span class='tl-point-6-313'></span>n <div class="status">11:39｜血氧异常： <span class='tl-red'>91%</span></div>n </li>n <li class="right">n <span class='tl-point-6-313'></span>n <div class="status">11:39｜血氧异常： <span class='tl-red'>91%</span></div>n </li>n <li class="right">n <span class='tl-point-6-313'></span>n <div class="status">11:39｜血氧异常： <span class='tl-red'>91%</span></div>n </li>n <li class="right">n <span class='tl-point-6-313'></span>n <div class="status">11:39｜血氧异常： <span class='tl-red'>91%</span></div>n </li>n <li class="right">n <span class='tl-point-6-313'></span>n <div class="status">11:39｜血氧异常： <span class='tl-red'>91%</span></div>n </li>n <li class="right">n <span class='tl-point-6-313'></span>n <div class="status">11:39｜血氧异常： <span class='tl-red'>91%</span></div>n </li>n <li class="right">n <span class='tl-point-6-313'></span>n <div class="status">11:39｜血氧异常： <span class='tl-red'>91%</span></div>n </li>n </ul>n </div>n

css

/*物流展示效果布局*/n.trans {n padding-left: 20px;n}nn.trans ul {n list-style: none;n padding: 0;n margin: 0;n}nn.trans ul li {n display: inline-block;n float: left;n position: relative;n}nn.left {n width: 35%;n text-align: center;n}nn.right {n width: 100%;n /* height: 34px;*/n box-sizing: border-box;n border-left: 1px solid #C4C4C4;n padding-bottom: 10px;n}nn.time {n text-align: right;n}nn.right img {n width: 25px;n height: 25px;n vertical-align: middle;n position: absolute;n left: -12.5px;n}n.tl-point-6-313{n position: absolute;n top: 8px;n left: -4px;n width: 6px;n height: 6px;n background: #31394D;n border-radius: 50%;n}nn.status {n display: inline-block;n padding-left: 20px;n font-size: 14px;n font-family: PingFangSC-Semibold, PingFang SC;n font-weight: 600;n color: #31394D;n}nn.transCon {n display: inline-block;n padding: 8px 0px 8px 30px;n}nnn.mb-19{n margin-bottom: 19px;n}n.tl-font-16-3139-600{n font-size: 16px;n font-family: PingFangSC-Semibold, PingFang SC;n font-weight: 600;n color: #31394D;n}