VUE模板架构

    <!-- import CSS -->
    <!-- <link rel="stylesheet" href="/vue/vue.css"> -->
    <style>
        /* 用来设置当前页面element全局table的内间距 */
        .el-table__row td{
            padding: 0;
        }
        /* 用来设置当前页面element全局table 选中某行时的背景色*/
        .el-table__body tr.current-row>td{
          background-color: #f19944 !important;
          /* color: #f19944; */  /* 设置文字颜色，可以选择不设置 */
        }
        /* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
        .el-table--enable-row-hover .el-table__body tr:hover>td {
          background-color: #f19944;
          /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
        }
    </style>
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css">
    <div id="app" >
        <template>
            <div class="block" style="padding: 10px;background: white;">

                <el-timeline>
                    @foreach($project_node_type as $k => $v)
                    <el-timeline-item timestamp="{{ $v }}" placement="top" color="{{ $color_arr[$k] }}">
                        @if(isset($project_node_data[$v]))
                            @foreach($project_node_data[$v] as $ks => $vs)
                                <el-card>
                                    <h4>{{ $vs['created_at'] }}</h4>
                                    <p>{!! $vs['remark'] !!}</p>
                                </el-card>
                            @endforeach
                        @endif
                    </el-timeline-item>
                    @endforeach
                </el-timeline>

            </div>
        </template>
    </div>
    <div class="col-md-12" style="padding:10px">
        <div class="btn-group pull-left"  style="margin-right: 10px">
            <a href="javascript:history.go(-1)" class="btn btn-primary">返回</a>
        </div>
    </div>
    <!-- import Vue before Element -->
    <script src="/vue/vue.js"></script>
    <!-- import JavaScript -->
    <script src="/vue/index.js"></script>
    <script>
        var Main = {
            data() {
                return {
                    loadingstatus:false,//loading框的开关
                    tableData: [],//部门数据
                    defaultProps: {
                        children: 'children',
                        label: 'label'
                    },
                }
            },
            methods: {

            },
            created(){

            },
        }
        var Ctor = Vue.extend(Main)
        new Ctor().$mount('#app')
    </script>