<template>
  <div>
    <div class="flex">
      <div class="header">
        <el-col span="6">
          <h3>title</h3>
        </el-col>
        <el-col span="9">
          <h3></h3>
        </el-col>
        <el-col span="6">
          <el-menu
            :default-active="this.$route.path"
            class="el-menu-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="white"
            text-color="#2E131B"
            active-text-color="#FA6690"
            router=true
            mode="horizontal"
          >
            <el-menu-item index="/Hellocopy/Son1">
              <!-- 配置子页面 -->
              <i class="el-icon-menu"></i>
              <span slot="title">列表</span>
            </el-menu-item>

            <el-menu-item index="/Hellocopy/Son2">
              <!-- 配置子页面 -->
              <i class="el-icon-menu"></i>
              <span slot="title">个人中心</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </div>
      <div class="flex-item">
        <!--
                <div>
                    <p>{{json}}</p>
                    <p>{{json.test}}</p>
                    <p>{{json.test}}</p>
                    <p>{{json.test}}</p>
                    <p>{{json.test}}</p>
                    <p>{{json.test}}</p>
                    <p>{{json.test}}</p>
                    <p>{{json.test}}</p>
                    <p>{{json.test}}</p>
                    <p>{{json.test}}</p>
                    <p>{{json.test}}</p>
                    <p>{{json.test}}</p>
                </div>
        -->
        <div class="item">
          <router-view></router-view>
        </div>
      </div>

      <div class="footer">
        <el-row></el-row>
        <el-col span="6" style="margin:auto">
           
          <img src="../../public/img/2.png" />
           <img src="../../public/img/2.png" />
            <img src="../../public/img/2.png" />
         
        </el-col>
        <!--当父元素设置了弹性布局并且设置了高度后，只要设置元素的margin:auto就可以实现元素的垂直居中了-->
        <el-col span="6">
          <h3></h3>
        </el-col>
        <el-col span="6" style="margin:auto">
          <p>Powered by Animal · Made with ❤️ by Miku</p>
        </el-col>
        <el-col span="6">
          <h3></h3>
        </el-col>
      </div>
    </div>
  </div>
</template>




<script>
import axios from "axios";
export default {
  data() {
    return {
      msg: "hello",
      json: ""
    };
  },
  methods: {
    getJson() {
      axios({
        url: "/static/json/1.json",
        method: "get"
      }).then(res => {
        this.json = res.data;
        console.log("???" + JSON.stringify(res.data));
      });
    }
  },
  created() {
    this.getJson();
  }
};
</script>


<style>
body {
  font-family: "微软雅黑";
}
.flex {
  display: flex; /*声明是flex布局*/
  flex-direction: column; /*使得div里面的块 竖向排列 */
  height: 100vh; /*vh就是当前屏幕可见高度的1%，也就是说height:100vh == height:100%;*/
}
.flex-item {
  flex: 1; /*假设有3个元素123排列flex，那么这样做能让中间的2展开铺满。生效的前提是父级元素声明了flex布局跟100%高度*/
  overflow: auto; /*如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。*/
}

.footer {
  background: white;
  color: #2e131b;
  min-height: 100px;
  display: flex; /*给footer的子级元素保留垂直居中的设置*/
}
.header {
  background: white;
  color: #2e131b;
  min-height: 60px;
  border-bottom: 2px solid #f5f5f5;
}

.item {
  margin-top: 60px;
  margin-left: 160px;
  margin-right: 160px;
  margin-bottom: 20px;
}
</style>