Vueタイムラインコンポーネントの使い方

<テンプレート>
    <ul class="タイムラインラッパー">
        <li class="timeline-item" v-for="timelineList 内の t" :key="t.id">
        <div class="タイムラインボックス">
            <div class="out-circle">
                <div class="in-circle"></div>
            </div>
            <div class="long-line"></div>
        </div>
        <div class="タイムラインコンテンツ">
            <div class="timeline-date">{{t.date}}</div>
            <div class="timeline-title">{{ t.title}}</div>
            <div class="timeline-desc">{{ t.content}}</div>
        </div>
    </li>
    </ul>

</テンプレート>

<script type="text/babel">
    'vue' から Vue をインポートします
    デフォルトのVue.component('Timeline',{をエクスポートする
        名前:「タイムライン」、
        小道具: {
            タイムラインリスト: {
                タイプ: 配列、
                デフォルト: () => {
                    戻る []
                }
            }
        }
    })
</スクリプト>

<スタイル スコープ lang="scss">
    ul.タイムラインラッパー{
        リストスタイル: なし;
        マージン: 0;
        パディング: 0;
    }

    /* タイムライン */
    .タイムライン項目 {
        位置: 相対的;

        .タイムラインボックス{
            テキスト配置: 中央;
            位置: 絶対;

            .out-circle {
                幅: 16px;
                高さ: 16px;
                背景: rgba(14, 116, 218, 0.1);
                ボックスの影: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
                /*不透明度: 0.1;*/
                境界線の半径: 50%;
                ディスプレイ: フレックス;
                アイテムの位置を中央揃えにします。

                .in-circle {
                    幅: 8px;
                    高さ: 8px;
                    マージン: 0 自動;
                    背景: rgba(14, 116, 218, 1);
                    境界線の半径: 50%;
                    ボックスの影: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
                }
            }

            .long-line {
                幅: 2px;
                高さ: 98px;
                背景: rgba(14, 116, 218, 1);
                ボックスの影: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
                不透明度: 0.1;
                左マージン: 8px;
            }
        }

        .タイムラインコンテンツ{
            ボックスのサイズ: 境界線ボックス;
            左マージン: 20px;
            高さ: 106px;
            パディング: 0 0 0 20px;
            テキスト配置: 左;
            下部マージン: 30px;

            .タイムラインタイトル{
                フォントサイズ: 14px;
                単語区切り: 全区切り;
                下部マージン: 16px;
                色: #333;
                フォントの太さ: 500;
                /*表示: インライン;*/
            }

            .タイムライン日付{
                フォントサイズ: 16px;
                色: #333;
                フォントの太さ: 500;
                下部マージン: 16px;
            }
            .timeline-desc {
                フォントサイズ: 14px;
                色: #999999;
            }
        }

    }


    .timeline-item:last-of-type .timeline-content {
        下マージン: 0;
    }
</スタイル>

// 親コンポーネント参照 <timeline :timeline-list="dongtai"></timeline>

// コンポーネントをインポートします。独自のコンポーネント パスを使用することを忘れないでください。import Timeline from "./Timeline";
//data() によって返されるオブジェクトで配列 dongtai:[] を宣言します