主要使用div布局实现表格效果，并使用渐变实现行背景渐变的效果

页面布局 

<div class="table-wrap"><div class="table-title"><divv-for="(item, index) in tableColumn":key="index":prop="item.prop":style="{width: item.width + 'px'}":align="item.align">{{ item.label }}</div><!-- <div class="prop1">平台</div><div class="prop2">币种</div><div class="prop3">爆仓价格</div><div class="prop4">金额</div><div class="prop5">时间</div> --></div><div class="table-body"><divclass="live-row"v-for="(item, index) in tableData":class="{'long-bg-color': item.flag == 0,'short-bg-color': item.flag == 1}":key="index"><div class="prop1"><img :src="getExchangeIcon(item.pt)" />{{ item.pt }}</div><div class="prop2">{{ item.bz }}</div><div class="prop3">{{ item.bcjg }}</div><div class="prop4">{{ item.je }}</div><div class="prop5">{{ formatTime(item.sj, 'MM-DD HH:mm:ss') }}</div></div></div></div>

数据

const tableColumn = ref([{label: '平台',prop: 'pt',width: 115,align: 'left'},{label: '币种',prop: 'bz',width: 105,align: 'left'},{label: '爆仓价格',prop: 'bcjg',width: 100,align: 'center'},{label: '金额',prop: 'je',width: 100,align: 'right'},{label: '时间',prop: '时间',width: 120,align: 'right'}
]);
const tableData = [{pt: '123',bz: '123',bcjg: '$2342.1',je: '$2342.1万',sj: '1695106716182',flag: 1},{pt: '123',bz: '123',bcjg: '$2342.1',je: '$2342.1万',sj: '1695106716182',flag: 0},{pt: '123',bz: '123',bcjg: '$2342.1',je: '$2342.1万',sj: '1695106716182',flag: 0},{pt: '123',bz: '123',bcjg: '$2342.1',je: '$2342.1万',sj: '1695106716182',flag: 1}
];

样式部分

--table-bg-Short1: linear-gradient(
        to right,
        #ff000000,
        #d32f2f80 90%,
        #d32f2f80
      );
      --table-bg-Long1: linear-gradient(
        to right,
        #ff000000,
        #22ab942e 90%,
        #22ab9457
      );

.table-wrap {.prop1 {width: 115px;text-align: left;}.prop2 {width: 105px;text-align: left;}.prop3 {width: 100px;text-align: center;}.prop4 {width: 100px;text-align: right;}.prop5 {width: 120px;text-align: right;}.table-title {display: flex;color: #868e9b;font-family: PingFang SC;font-size: 14px;font-weight: 400;border-bottom: 1px solid #252525;div {height: 50px;line-height: 50px;}}.table-body {height: 610px;overflow: auto;position: relative;.live-row {display: flex;height: 60px;line-height: 60px;color: #fff;font-family: DIN;font-size: 14px;border-bottom: 1px solid #252525;.prop1 {img {width: 16px;height: 16px;margin-right: 5px;vertical-align: middle;}}}--table-bg-Short1: linear-gradient(to right,#ff000000,#d32f2f80 90%,#d32f2f80);--table-bg-Long1: linear-gradient(to right,#ff000000,#22ab942e 90%,#22ab9457);.long-bg-color {background: var(--table-bg-Long1);}.short-bg-color {background: var(--table-bg-Short1);}}}