页面结构
<div class="trade"><h2 class="title2">交易记录</h2><div class="steps"><div class="steps-row" v-for="item in 4" :key="item"><div class="steps-row-left"><div class="moon">04-17</div><div class="time">06:00:16</div></div><div class="steps-wrap"><i class="steps-strip"></i></div><div class="steps-row-right"><div class="row-right-top"><span class="status">开仓</span><!-- <span class="status flat">平仓</span> --><span class="currency">BTCUSDT</span><span class="lever">空 20x</span><!-- <span class="lever green">多 20x</span> --><span class="chain">OKX</span></div><div class="row-right-bottom"><div class="kaichang"><span>开仓均价 30,213.6 USDT</span><span>开仓数量 0.500 BTC</span></div><!-- <div class="kaichang jy"><span>交易达人账户收益</span><span>+17/84 USDT（+9.38%）</span></div> --><div class="quantity"><img src="@/assets/images/followOrder/user-icon.svg" /><span>230/1000</span></div></div></div></div></div><div class="more"><span>查看全部</span><img src="@/assets/images/followOrder/right-black-icon.svg" /></div>
</div>
样式代码
.steps {.steps-row {display: flex;align-items: baseline;.steps-wrap {margin: 0 20px;height: 80px;.steps-strip {position: relative;display: inline-block;width: 7px;height: 7px;border-radius: 50%;// background-color: #c9c9c9;border: 1px solid #c9c9c9;&::before {content: '';position: absolute;left: 2px;top: 6px;height: 80px;border-right: 1px dashed #d9d9d9;}}}.steps-row-left {color: #868e9b;text-align: right;font-family: DIN;font-size: 14px;font-weight: 500;}.steps-row-right {.row-right-top {margin-bottom: 11px;.status {color: #868e9b;text-align: center;font-family: DIN;font-size: 12px;font-weight: 500;padding: 0 3px;border-radius: 2px;background: #eaeaea;margin-right: 10px;&.flat {background: #fff;border: 1px solid #868e9b;}}.currency {color: #000;font-family: DIN;font-size: 14px;font-weight: 700;margin-right: 10px;}.lever {color: #e35561;font-family: DIN;font-size: 12px;font-weight: 500;padding: 0 3px;border-radius: 2px;background: #ffdbde;margin-right: 10px;&.green {color: #0ecb81;background: #d5f5e9;}}.chain {color: #fff;font-family: PingFang SC;font-size: 12px;font-style: normal;font-weight: 400;line-height: normal;padding: 0 3px;border-radius: 2px;background: #202020;}}.row-right-bottom {display: flex;align-items: center;.kaichang {color: #000;font-family: PingFang SC;font-size: 14px;font-weight: 400;span {margin-right: 10px;}&.jy {span {&:nth-child(2) {color: #0ecb81;font-family: DIN;font-size: 14px;font-weight: 500;}}}}.quantity {position: relative;color: #868e9b;font-family: DIN;font-size: 14px;font-weight: 500;&::before {position: absolute;top: 3.5px;left: 0;content: '';width: 1px;height: 10px;background: #000;}img {width: 13px;height: 12.278px;margin: 0 5px 0 10px;}}}}}
}
.more {cursor: pointer;display: flex;align-items: center;color: #000;font-family: PingFang SC;font-size: 16px;font-weight: 400;padding-left: 100px;img {width: 20px;height: 20px;margin-left: 10px;}
}
