Vue-Beispielcode zur Implementierung einer horizontalen Zeitleiste mit zwei Spalten

<Vorlage>
    <ul Klasse="timelineHengBox">
        <li Klasse = "timelineHengItem" v-for = "(Item, Index) in TimelineList" :Schlüssel = "Index" 
            :style="{left: index % 2 != 0 ? (liHalf*index)+52+'px':0,'border-right': index == timelineList.length - 2 ?'1px solid #FEFEFE' : 'none'}">
            <div class="timeline_dot" :style="{top: index % 2 != 0 ? '-5px' : '93px'}"></div>
            <div Klasse = "timeline_dot" v-show = "index == timelineList.length - 2" Stil = "rechts: -6px;oben:93px;links: nicht festgelegt;"></div>
            <div class="timeline_wapper flex" :class="{'mt20': ​​​​index % 2 != 0}">
                <img src="../../static/img/excelIcon.png" class="bjIcon" :style="{'margin': index % 2 != 0 ? '11px 44px 0 42px' :''}">
                <div>{{item.content}}</div>
            </div>
            <div class="timelineDate_bottom" :style="{'top': index % 2 != 0 ? '-20px' : '103px'}">{{item.dateTime}}</div>
        </li>
    </ul>
</Vorlage>

<Skript>
    Standard exportieren {
        Name: "timelineH",
        Requisiten: {
            Zeitleistenliste: {
                Typ: Array,
                Standard: []
            }
        },
        Daten () {
            zurückkehren {
                liWidth: 496, //Die Breite des gesamten li, um mit dem Stil des li darunter übereinzustimmen liHalf: 248, //Dies ist die halbe Breite des li, damit der Punkt auf der mittleren horizontalen Linie die richtige Position finden kann}
        }
    }
</Skript>
<Stilbereich>
    .timelineHengBox {
        Farbe: #fff;
        Rand: 0;
        Polsterung: 0 26px;
        Breite: 92 %;
        Polsterung oben: 18px;
        Polsterung unten: 10px;
        Rand links: 26px;
        Höhe: 87px;
        Rahmen unten: 3px durchgezogen #FEFEFE;
    }
    .timelineHengItem {
        Listenstil: keiner;
        Höhe: 97px;
        Breite: 496px;
        Rahmen links: 1px durchgezogen #FEFEFE;
        schweben: links;
        Rahmen unten: 3px durchgezogen #FEFEFE;
        Position: relativ;
    }
    .timelineHengItem:n-tes-Kind(2n) {
        Position: absolut;
        links: 248px;
        Rahmen unten: 0;
        oben: 115px;
    }
    .timeline_dot {
        Breite: 10px;
        Höhe: 11px;
        Hintergrund: #FEFEFE;
        Position: absolut;
        links: -5px;
        oben: 93px;
    }
    .timeline_dot:n-tes-Kind(2n) {
        oben: -7px;
    }
    .timeline_wapper {
        Breite: 400px;
        Textausrichtung: links;
        Schriftgröße: 12px;
        Farbe: #FFFFFF;
        Zeilenhöhe: 20px;
    }
    .mt20 {
        Rand oben: 20px;
    }
    .bjIcon {
        Breite: 32px;
        Höhe: 32px;
        Rand: 31px 44px 0 42px;
    }
    .timelineDate_bottom {
        Breite: 80px;
        Höhe: 20px;
        Position: absolut;
        oben: 103px;
        links: -60px;
        Textausrichtung: links;
        Schriftgröße: 14px;
        Schriftstärke: fett;
        Farbe: #FFBA00;
        Rand links: 77px;
    }
</Stil>

<div Klasse="timelineHengContainer">
     <timelineH :timelineList='Zeitlinienliste' />
</div>

importiere timelineH aus "@/components/timelineH.vue";
Komponenten:
        ZeitleisteH
},

Daten() {
    zurückkehren {
          Zeitleistenliste: [

                {
                    Datum/Uhrzeit: '2021-09',
                    Inhalt: ,,Willkommen beim Bergbau, bau jeden Tag ab und gewinne Erz, hahahaha, Willkommen beim Bergbau, bau jeden Tag ab und gewinne Erz, hahahaha, Willkommen beim Bergbau, bau jeden Tag ab und gewinne Erz, hahahaha, Willkommen beim Bergbau, bau jeden Tag ab und gewinne Erz, hahahaha. '
                },{
                    Datum/Uhrzeit: '2021-10',
                    Inhalt: ,,Bitte halten Sie sich im Winter warm, es ist zu kalt.Bitte halten Sie sich im Winter warm, es ist zu kalt.Bitte halten Sie sich im Winter warm, es ist zu kalt.Bitte halten Sie sich im Winter warm, es ist zu kalt. '
                },{
                    Datum/Uhrzeit: '2021-11',
                    Inhalt: „Die 30-Tage-Post-Challenge hat offiziell begonnen. Ich will einen Projektor. Ich wollte schon immer einen kaufen.“ '
                },{
                    Datum/Uhrzeit: '2021-12',
                    Inhalt: ,,Der Monat ist fast zu Ende, ein neues Jahr beginnt, ein frohes neues Jahr, ein neues Jahr beginnt, ein frohes neues Jahr, ein neues Jahr beginnt, ein frohes neues Jahr. '
                }
            ]
    }
}

.timelineHengContainer {
        Breite: 100 %;
        Höhe: 227px;
        Hintergrundbild: URL('../../static/img/timelineBg.png');
        Hintergrundgröße: 100 % 100 %;
        Hintergrundwiederholung: keine Wiederholung;
}