時間軸範例

Widget程式碼範例

<div class="chart_content">
    <!-- 時間軸 -->
    <div class="timeline_block">
        <ul class="timeline">
            <!-- 第1筆 -->
            <li class="timeline-item">
                <!-- 日期 -->
                <!-- now 顯示於現在 -->
                <div class="timeline-item__timestamp now">
                    <div class="dot"></div>
                    <time>1/13</time>
                    <h4>(可放標題)</h4>
                </div>
                <div class="timeline-item__content"> ​
                    <ul>
                        <li><time>08:00</time>...</li>
                        <li><time>15:00</time>...</li>
                    </ul>
                </div>
            </li>
            <!-- 第2筆 -->
            <li class="timeline-item">
                <!-- 日期 -->
                <div class="timeline-item__timestamp">
                    <!-- active 請加上classname -->
                    <div class="dot active"></div>
                    <time>1/10</time>
                    <h4>(可放標題)</h4>
                </div>
                <div class="timeline-item__content"> ​
                    <ul>
                        <li><time>21:00</time>...</li>
                        <li><time>17:20</time>...</li>
                        <li><time>14:00</time>...</li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>

時間軸

update:
  • (可放標題)

    • T3預測壽命少於20pcs
  • (可放標題)

    • T3預測壽命少於20pcs
  • (可放標題)

    • T2換刀(崩刃)
    • 交班啟動
  • (可放標題)

    • 定期打掃,對電器櫃,線路板等進行清灰檢查
    • 交班關機
    • T3換刀
  • (可放標題)

    • T3預測壽命少於20pcs

時間軸

update:
  • (可放標題)

    • T2換刀(崩刃)
    • 交班啟動
  • (可放標題)

    • 定期打掃,對電器櫃,線路板等進行清灰檢查
    • 交班關機
    • T3換刀
  • (可放標題)

    • T3預測壽命少於20pcs
  • (可放標題)

    • T3預測壽命少於20pcs

時間軸

update:
  • (可放標題)

    • T2換刀(崩刃)
    • 交班啟動
  • (可放標題)

    • 定期打掃,對電器櫃,線路板等進行清灰檢查
    • 交班關機
    • T3換刀
  • (可放標題)

    • T3預測壽命少於20pcs
  • (可放標題)

    • T3預測壽命少於20pcs

時間軸

update:
  • (可放標題)

    • T2換刀(崩刃)
    • 交班啟動
  • (可放標題)

    • 定期打掃,對電器櫃,線路板等進行清灰檢查
    • 交班關機
    • T3換刀
  • (可放標題)

    • T3預測壽命少於20pcs
  • (可放標題)

    • T3預測壽命少於20pcs

時間軸

update:
  • (可放標題)

    • T2換刀(崩刃)
    • 交班啟動
  • (可放標題)

    • 定期打掃,對電器櫃,線路板等進行清灰檢查
    • 交班關機
    • T3換刀
  • (可放標題)

    • T3預測壽命少於20pcs
  • (可放標題)

    • T3預測壽命少於20pcs

時間軸

update:
  • (可放標題)

    • T2換刀(崩刃)
    • 交班啟動
  • (可放標題)

    • 定期打掃,對電器櫃,線路板等進行清灰檢查
    • 交班關機
    • T3換刀
  • (可放標題)

    • T3預測壽命少於20pcs
  • (可放標題)

    • T3預測壽命少於20pcs

時間軸

update:
  • (可放標題)

    • T2換刀(崩刃)
    • 交班啟動
  • (可放標題)

    • 定期打掃,對電器櫃,線路板等進行清灰檢查
    • 交班關機
    • T3換刀
  • (可放標題)

    • T3預測壽命少於20pcs
  • (可放標題)

    • T3預測壽命少於20pcs

時間軸

update:
  • (可放標題)

    • T2換刀(崩刃)
    • 交班啟動
  • (可放標題)

    • 定期打掃,對電器櫃,線路板等進行清灰檢查
    • 交班關機
    • T3換刀
  • (可放標題)

    • T3預測壽命少於20pcs
  • (可放標題)

    • T3預測壽命少於20pcs

時間軸

update:
  • (可放標題)

    • T2換刀(崩刃)
    • 交班啟動
  • (可放標題)

    • 定期打掃,對電器櫃,線路板等進行清灰檢查
    • 交班關機
    • T3換刀
  • (可放標題)

    • T3預測壽命少於20pcs
  • (可放標題)

    • T3預測壽命少於20pcs

時間軸

update:
  • (可放標題)

    • T2換刀(崩刃)
    • 交班啟動
  • (可放標題)

    • 定期打掃,對電器櫃,線路板等進行清灰檢查
    • 交班關機
    • T3換刀
  • (可放標題)

    • T3預測壽命少於20pcs
  • (可放標題)

    • T3預測壽命少於20pcs

時間軸

update:
  • (可放標題)

    • T2換刀(崩刃)
    • 交班啟動
  • (可放標題)

    • 定期打掃,對電器櫃,線路板等進行清灰檢查
    • 交班關機
    • T3換刀
  • (可放標題)

    • T3預測壽命少於20pcs
  • (可放標題)

    • T3預測壽命少於20pcs