物流狀態

適合用於要顯示物流配貨狀態的卡片上

如果你需要 demo,可以 加入好友,並且輸入: demo de90a720-1004-11ea-88e0-b72b119c21ac
{
    "type": "bubble",
    "size": "mega",
    "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
            {
                "type": "text",
                "text": "\u8ca8\u7269\u72c0\u614b\uff1a\u8655\u7406\u4e2d",
                "color": "#b7b7b7",
                "size": "xs"
            },
            {
                "type": "box",
                "layout": "horizontal",
                "contents": [
                    {
                        "type": "text",
                        "text": "20:30",
                        "size": "sm",
                        "gravity": "center"
                    },
                    {
                        "type": "box",
                        "layout": "vertical",
                        "contents": [
                            {
                                "type": "filler"
                            },
                            {
                                "type": "box",
                                "layout": "vertical",
                                "contents": [
                                    {
                                        "type": "filler"
                                    }
                                ],
                                "cornerRadius": "30px",
                                "height": "12px",
                                "width": "12px",
                                "borderColor": "#6486E3",
                                "borderWidth": "2px"
                            },
                            {
                                "type": "filler"
                            }
                        ],
                        "flex": 0
                    },
                    {
                        "type": "text",
                        "text": "\u51fa\u8ca8",
                        "gravity": "center",
                        "flex": 4,
                        "size": "sm"
                    }
                ],
                "spacing": "lg",
                "cornerRadius": "30px",
                "margin": "xl"
            },
            {
                "type": "box",
                "layout": "horizontal",
                "contents": [
                    {
                        "type": "box",
                        "layout": "baseline",
                        "contents": [
                            {
                                "type": "filler"
                            }
                        ],
                        "flex": 1
                    },
                    {
                        "type": "box",
                        "layout": "vertical",
                        "contents": [
                            {
                                "type": "box",
                                "layout": "horizontal",
                                "contents": [
                                    {
                                        "type": "filler"
                                    },
                                    {
                                        "type": "box",
                                        "layout": "vertical",
                                        "contents": [
                                            {
                                                "type": "filler"
                                            }
                                        ],
                                        "width": "2px",
                                        "backgroundColor": "#6486E3"
                                    },
                                    {
                                        "type": "filler"
                                    }
                                ],
                                "flex": 1
                            }
                        ],
                        "width": "12px"
                    },
                    {
                        "type": "text",
                        "text": "\u96c6\u8ca8\u4e2d",
                        "gravity": "center",
                        "flex": 4,
                        "size": "xs",
                        "color": "#8c8c8c"
                    }
                ],
                "spacing": "lg",
                "height": "64px"
            },
            {
                "type": "box",
                "layout": "horizontal",
                "contents": [
                    {
                        "type": "box",
                        "layout": "horizontal",
                        "contents": [
                            {
                                "type": "text",
                                "text": "20:34",
                                "gravity": "center",
                                "size": "sm"
                            }
                        ],
                        "flex": 1
                    },
                    {
                        "type": "box",
                        "layout": "vertical",
                        "contents": [
                            {
                                "type": "filler"
                            },
                            {
                                "type": "box",
                                "layout": "vertical",
                                "contents": [
                                    {
                                        "type": "filler"
                                    }
                                ],
                                "cornerRadius": "30px",
                                "width": "12px",
                                "height": "12px",
                                "borderWidth": "2px",
                                "borderColor": "#6486E3"
                            },
                            {
                                "type": "filler"
                            }
                        ],
                        "flex": 0
                    },
                    {
                        "type": "text",
                        "text": "\u96c6\u8ca8",
                        "gravity": "center",
                        "flex": 4,
                        "size": "sm"
                    }
                ],
                "spacing": "lg",
                "cornerRadius": "30px"
            },
            {
                "type": "box",
                "layout": "horizontal",
                "contents": [
                    {
                        "type": "box",
                        "layout": "baseline",
                        "contents": [
                            {
                                "type": "filler"
                            }
                        ],
                        "flex": 1
                    },
                    {
                        "type": "box",
                        "layout": "vertical",
                        "contents": [
                            {
                                "type": "box",
                                "layout": "horizontal",
                                "contents": [
                                    {
                                        "type": "filler"
                                    },
                                    {
                                        "type": "box",
                                        "layout": "vertical",
                                        "contents": [
                                            {
                                                "type": "filler"
                                            }
                                        ],
                                        "width": "2px",
                                        "backgroundColor": "#B7B7B7"
                                    },
                                    {
                                        "type": "filler"
                                    }
                                ],
                                "flex": 1
                            }
                        ],
                        "width": "12px"
                    },
                    {
                        "type": "text",
                        "text": "\u914d\u9001\u4e2d",
                        "gravity": "center",
                        "flex": 4,
                        "size": "xs",
                        "color": "#8c8c8c"
                    }
                ],
                "spacing": "lg",
                "height": "64px"
            },
            {
                "type": "box",
                "layout": "horizontal",
                "contents": [
                    {
                        "type": "text",
                        "text": "20:40",
                        "gravity": "center",
                        "size": "sm"
                    },
                    {
                        "type": "box",
                        "layout": "vertical",
                        "contents": [
                            {
                                "type": "filler"
                            },
                            {
                                "type": "box",
                                "layout": "vertical",
                                "contents": [
                                    {
                                        "type": "filler"
                                    }
                                ],
                                "cornerRadius": "30px",
                                "width": "12px",
                                "height": "12px",
                                "borderWidth": "2px",
                                "borderColor": "#EF454D"
                            },
                            {
                                "type": "filler"
                            }
                        ],
                        "flex": 0
                    },
                    {
                        "type": "text",
                        "text": "\u5230\u8ca8",
                        "gravity": "center",
                        "flex": 4,
                        "size": "sm"
                    }
                ],
                "spacing": "lg",
                "cornerRadius": "30px"
            }
        ]
    }
}
...