


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <title>{% block title %}{% end %}</title>

    <!--<link rel="stylesheet" type="text/css"  href="https://unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css">-->
    <!--<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
    <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->


    <script src="{{static_url('js/vue_dist_vue.js')}}"></script>
    <script src="{{static_url('js/element-ui_index.js')}}"></script>
    <script src="{{ static_url('js/axios.js') }}"></script>
    <!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <link rel="stylesheet" type="text/css"  href="{{static_url('css/element-ui@2.12.0_index.css')}}">


    <link rel="stylesheet" type="text/css" href="{{static_url('css/css-index.css')}}">
    <link rel="stylesheet" type="text/css" href="{{static_url('css/model.css')}}">


</head>
<body>
<div id="Navigation_bar">
    <el-container>
        <el-header >Header</el-header>
        <el-container style="height: 500px; border: 1px solid #eee">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu :default-openeds="['1', '3']" :default-active="模型列表" @select="handleSelect">

                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-menu"></i>导航栏</template>
                        <el-submenu index="1-1">
                            <template slot="title">模型</template>
                            <el-menu-item index="1-1-1"  onclick="get_model()" name="模型列表">模型列表</el-menu-item>
                        </el-submenu>

                        <el-submenu index="1-2">
                            <template slot="title">特征</template>
                            <el-menu-item index="1-2-1" name = '特征列表'>特征列表</el-menu-item>
                        </el-submenu>

                        <el-submenu index="1-3">
                            <template slot="title">数据集合</template>
                            <el-menu-item index="1-3-1" name="数据列表">数据列表</el-menu-item>
                            <el-menu-item index="1-3-2" name="数据明细">数据明细</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-main>
                    {% block main %}{% end %}
                </el-main>
            </el-container>
        </el-container>
        <el-footer>Footer</el-footer>
    </el-container>

</div>


</body>

<script>
    new Vue().$mount('#Navigation_bar');



    function get_model(){
        alert('sdfsdfsdf')
        axios.get('/models').then(function (res) {
            console.log('sdfsdfsdfdsfdsf',res)
        })
    }


    var aaa =  {
        data() {
            return {
                activeName: '模型列表'
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    };
    Vue.extend(aaa);

    export default {
        data() {
            return {
                activeName: 'second'
            };
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            }
        }
    };

</script>

</html>