So verwenden Sie die Vue-Timeline-Komponente

<Vorlage>
    <ul Klasse="Zeitleisten-Wrapper">
        <li class="timeline-item" v-for="t in timelineList" :key="t.id">
        <div Klasse="Zeitleistenbox">
            <div Klasse="Aus-Kreis">
                <div Klasse="im Kreis"></div>
            </div>
            <div Klasse = "lange Linie""></div>
        </div>
        <div Klasse="Zeitleisteninhalt">
            <div class="timeline-date">{{t.date}}</div>
            <div class="timeline-title">{{ t.title}}</div>
            <div class="timeline-desc">{{ t.inhalt}}</div>
        </div>
    </li>
    </ul>

</Vorlage>

<Skripttyp="text/babel">
    Vue von „vue“ importieren
    exportiere Standard Vue.component('Zeitleiste',{
        Name: "Zeitleiste",
        Requisiten: {
            Zeitleistenliste: {
                Typ: Array,
                Standard: () => {
                    zurückkehren []
                }
            }
        }
    })
</Skript>

<style scoped lang="scss">
    ul.timeline-wrapper {
        Listenstil: keiner;
        Rand: 0;
        Polsterung: 0;
    }

    /* Zeitleiste */
    .Zeitleistenelement {
        Position: relativ;

        .Zeitleistenbox {
            Textausrichtung: zentriert;
            Position: absolut;

            .out-Kreis {
                Breite: 16px;
                Höhe: 16px;
                Hintergrund: rgba (14, 116, 218, 0,1);
                Kastenschatten: 0px 4px 12px 0px rgba (0, 0, 0, 0,1);
                /*Deckkraft: 0,1;*/
                Randradius: 50 %;
                Anzeige: Flex;
                Elemente ausrichten: zentrieren;

                .im Kreis {
                    Breite: 8px;
                    Höhe: 8px;
                    Rand: 0 automatisch;
                    Hintergrund: rgba(14, 116, 218, 1);
                    Randradius: 50 %;
                    Kastenschatten: 0px 4px 12px 0px rgba (0, 0, 0, 0,1);
                }
            }

            .lange Zeile {
                Breite: 2px;
                Höhe: 98px;
                Hintergrund: rgba(14, 116, 218, 1);
                Kastenschatten: 0px 4px 12px 0px rgba (0, 0, 0, 0,1);
                Deckkraft: 0,1;
                Rand links: 8px;
            }
        }

        .timeline-inhalt {
            Box-Größe: Rahmenbox;
            Rand links: 20px;
            Höhe: 106px;
            Polsterung: 0 0 0 20px;
            Textausrichtung: links;
            Rand unten: 30px;

            .Zeitleistentitel {
                Schriftgröße: 14px;
                Wörtertrennung: alles trennen;
                Rand unten: 16px;
                Farbe: #333;
                Schriftstärke: 500;
                /*Anzeige: inline;*/
            }

            .Zeitleistendatum {
                Schriftgröße: 16px;
                Farbe: #333;
                Schriftstärke: 500;
                Rand unten: 16px;
            }
            .timeline-desc {
                Schriftgröße: 14px;
                Farbe: #999999;
            }
        }

    }


    .timeline-item:letztes-vom-Typ .timeline-content {
        Rand unten: 0;
    }
</Stil>

// Referenz der übergeordneten Komponente <timeline :timeline-list="dongtai"></timeline>

// Komponenten importieren. Denken Sie daran, Ihren eigenen Komponentenpfad zu verwenden. importiere Timeline aus "./Timeline";
//Deklariere das Array dongtai:[] im von data() zurückgegebenen Objekt.