快捷導(dǎo)航

Vue實(shí)現(xiàn)縱向的物流時(shí)間軸效果的示例代碼

更新時(shí)間：2024年08月06日 08:36:31 作者：小蹦跶兒

在當(dāng)今數(shù)字化的時(shí)代,用戶體驗(yàn)的優(yōu)化至關(guān)重要,物流信息的展示作為電商和供應(yīng)鏈領(lǐng)域中的關(guān)鍵環(huán)節(jié),其呈現(xiàn)方式直接影響著用戶對貨物運(yùn)輸狀態(tài)的感知和滿意度,所以本文介紹了Vue實(shí)現(xiàn)縱向的物流時(shí)間軸效果的方法,需要的朋友可以參考下

前言：

在當(dāng)今數(shù)字化的時(shí)代，用戶體驗(yàn)的優(yōu)化至關(guān)重要。物流信息的展示作為電商和供應(yīng)鏈領(lǐng)域中的關(guān)鍵環(huán)節(jié)，其呈現(xiàn)方式直接影響著用戶對貨物運(yùn)輸狀態(tài)的感知和滿意度。

縱向的物流時(shí)間軸效果能夠以清晰、直觀的方式向用戶展示物流的各個(gè)關(guān)鍵節(jié)點(diǎn)，幫助用戶更好地跟蹤貨物的運(yùn)輸進(jìn)程。在 Vue 這一強(qiáng)大的前端框架中實(shí)現(xiàn)這樣的效果，不僅能夠提升開發(fā)效率，還能為用戶帶來更加流暢和交互性強(qiáng)的體驗(yàn)。

物流時(shí)間軸效果在提升信息呈現(xiàn)的直觀性以及增強(qiáng)用戶體驗(yàn)方面表現(xiàn)出色，并且同樣適用于其他場景。

一、實(shí)現(xiàn)的效果圖

注：截圖中的數(shù)據(jù)為模擬的假數(shù)據(jù)。

二、實(shí)現(xiàn)方案

前言中介紹了下物流時(shí)間軸的作用和優(yōu)勢，我的項(xiàng)目里就是用了物流時(shí)間軸的效果去呈現(xiàn)項(xiàng)目中的【資產(chǎn)動態(tài)檔案】這一模塊，可以直觀且清晰的看到各個(gè)節(jié)點(diǎn)的信息。

首先用ul-li的方式實(shí)現(xiàn)：

代碼如下：

<div class="commonTitle">資產(chǎn)動態(tài)檔案</div>
<div class="content">
    <ul class="dynamicFiles" v-for="(item,index) in timeAxis" :key="index">
        <li>{{ item.time }}</li>
        <li class="detail">{{ item.address }}</li>
    </ul>
</div>

此處時(shí)間軸中用到的數(shù)據(jù)暫時(shí)先用假數(shù)據(jù)，大家自行替換即可：

    // 時(shí)間軸列表
    timeAxis: [
        {
          state: 1, // 狀態(tài)： 1:已完成，0:未完成
          time: '今天2024年5月2日 上午10:50:11',
          address: '【鎮(zhèn)江轉(zhuǎn)運(yùn)中心】已發(fā)出 下一站【鎮(zhèn)江為民中心】'
        },
        {
          state: 0,
          time: '2024年5月2日 上午10:30:10',
          address: '【鎮(zhèn)江轉(zhuǎn)運(yùn)中心】已收入'
        },
        {
          state: 0,
          time: '2024年5月2日 上午10:10:08',
          address: '【江蘇省無錫市富民路】已發(fā)出 下一站【鎮(zhèn)江中心】'
        },
        {
          state: 0,
          time: '2024年5月2日 上午7:59:24',
          address: '【江蘇省無錫市富民路公司】已打包'
        },
        {
          state: 0,
          time: '2024年5月2日 上午6:40:23',
          address: '【江蘇省無錫市富民路公司】已收件'
        }
    ],

css樣式實(shí)現(xiàn)：

/* 時(shí)間軸 */
    .dynamicFiles {
      position: relative;
      line-height: 36px;
      font: 24px PingFangSC-Regular;
      color: #17233d;
      padding-left: 32px;

      .detail {
        margin-top: 8px;
        padding: 12px 20px;
        background: #eaf6ff;
        border-radius: 12px;
      }

      &:before {
        position: absolute;
        margin-top: 8px;
        left: 4px;
        content: "";
        height: 12px;
        width: 12px;
        border-radius: 50%;
        background: linear-gradient( 318deg, #cbcfe2 0%, #dfe7f0 100%);
        z-index: 1;
      }
      &:after {
        position: absolute;
        top: 12px;
        left: 8px;
        bottom: -28px;
        content: "";
        width: 1px;
        border-right: 1px solid #dde4ef;
      }
      &:not(:first-child) {
        padding-top: 20px;
      }
      &:last-child {
        &:after {
          display: none;
        }
      }
      &:first-child {
        &:before {
          background: linear-gradient( 180deg, #4eccfe 0%, #3f90fd 100%);
        }
      }
      &:last-child > .detail {
        background: #ffeaea;
      }
    }

大功告成，可直接復(fù)制粘貼！