2列の水平タイムラインを実装するためのVueサンプルコード

<テンプレート>
    <ul class="timelineHengBox">
        <li class="timelineHengItem" v-for="(item,index) in timelineList" :key="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 class="timeline_dot" v-show="index == timelineList.length - 2" style="right: -6px;top:93px;left: unset;"></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>
</テンプレート>

<スクリプト>
    エクスポートデフォルト{
        名前: 'timelineH',
        小道具: {
            タイムラインリスト: {
                タイプ: 配列、
                デフォルト： []
            }
        },
        データ （） {
            戻る {
                liWidth: 496, // li 全体の幅。下の li のスタイルと一致するようにする liHalf: 248, // これは li の幅の半分で、中央の水平線上の点が正しい位置を見つけられるようにする}
        }
    }
</スクリプト>
<スタイルスコープ>
    .timelineHengBox {
        色: #fff;
        マージン: 0;
        パディング: 0 26px;
        幅: 92%;
        パディング上部: 18px;
        パディング下部: 10px;
        左マージン: 26px;
        高さ: 87px;
        下境界線: 3px 実線 #FEFEFE;
    }
    .timelineHengItem {
        リストスタイル: なし;
        高さ: 97px;
        幅: 496ピクセル;
        左境界線: 1px 実線 #FEFEFE;
        フロート: 左;
        下境界線: 3px 実線 #FEFEFE;
        位置: 相対的;
    }
    .timelineHengItem:n番目の子(2n) {
        位置: 絶対;
        左: 248ピクセル;
        下境界線: 0;
        上: 115px;
    }
    .timeline_dot {
        幅: 10px;
        高さ: 11px;
        背景: #FEFEFE;
        位置: 絶対;
        左: -5px;
        上: 93px;
    }
    .timeline_dot:n番目の子(2n) {
        上: -7px;
    }
    .timeline_wapper {
        幅: 400ピクセル;
        テキスト配置: 左;
        フォントサイズ: 12px;
        色: #FFFFFF;
        行の高さ: 20px;
    }
    .mt20 {
        上マージン: 20px;
    }
    .bjアイコン{
        幅: 32px;
        高さ: 32px;
        マージン: 31px 44px 0 42px;
    }
    .timelineDate_bottom {
        幅: 80ピクセル;
        高さ: 20px;
        位置: 絶対;
        上: 103px;
        左: -60px;
        テキスト配置: 左;
        フォントサイズ: 14px;
        フォントの太さ: 太字;
        色: #FFBA00;
        左マージン: 77px;
    }
</スタイル>

<div class="timelineHengContainer">
     <timelineH :timelineList='timelineList' />
</div>

「@/components/timelineH.vue」からtimelineHをインポートします。
コンポーネント:
        タイムラインH
},

データ（） {
    戻る {
          タイムラインリスト: [

                {
                    日時: '2021-09',
                    内容: 「採掘へようこそ、毎日採掘して鉱石を手に入れよう、ハハハハ、採掘へようこそ、毎日採掘して鉱石を手に入れよう、ハハハハ、採掘へようこそ、毎日採掘して鉱石を手に入れよう、ハハハハ、採掘へようこそ、毎日採掘して鉱石を手に入れよう、ハハハハ。」 '
                },{
                    日時: '2021-10',
                    内容: 「冬は寒すぎるので、暖かくしてください。冬は寒すぎるので、暖かくしてください。冬は寒すぎるので、暖かくしてください。冬は寒すぎるので、暖かくしてください。冬は寒すぎるので、暖かくしてください。」 '
                },{
                    日時: '2021-11',
                    内容: 「30日間の投稿チャレンジが正式に始まりました。プロジェクターが欲しいです。ずっと買いたいと思っていたんです。」 '
                },{
                    日付時刻: '2021-12',
                    内容: 「もうすぐ月末、新しい年が始まります、明けましておめでとうございます、新しい年が始まります、明けましておめでとうございます、新しい年が始まります、明けましておめでとうございます。」 '
                }
            ]
    }
}

.timelineHengコンテナ{
        幅: 100%;
        高さ: 227px;
        背景画像: url('../../static/img/timelineBg.png');
        背景サイズ: 100% 100%;
        背景繰り返し: 繰り返しなし;
}