<template>
<!-- 个人学习报告页 -->
<!-- 报告头部 -->
<div class="reportPage">
   <div class="personTop">
       <div>
        <span class="photo"></span>
        <span>南华凯</span>
        </div>
        <span class="personBack">返回</span>
   </div>
    <div class="topNav">
        <span class="topCon">
        <a><i class="el-icon-document"></i>
        <span @click="oneInfo">单次学情</span></a>
        <a><i class="el-icon-document"></i>
        <span @click="moreInfo">阶段学情</span></a>
        </span>
     </div>
     <!-- 表格区域 -->
     <div class="personMain">
         <el-card>
        <router-view></router-view>
     </el-card>
      <div class="footer"><p>copyright@2013-2019 All Right</p></div>
     </div>
     </div>
</template>
<script>

export default {
    data(){
        return{
           
        }
    },
    methods:{
        oneInfo(){
            this.$router.push('./oneInfo')
            
        },
        moreInfo(){
            this.$router.push('./moreInfo')
        }
    }
}
</script>
<style lang="less" scoped>
.reportPage {
    background-color: #EBEDF5;
}

.personTop {
    display: flex;
    justify-content: space-between;
    height: 60px;
    background-color: #529BFF;
    color: #fff;
    .photo {
    display: inline-block;
    vertical-align: middle;
    width: 42px;
    height: 42px;
    background-color: pink;
    margin: 7px;
    border-radius: 50%;
    }
    .personBack {
       line-height: 60px;
       margin-right: 20px;
    }
}
.topNav {
    display: flex;
    justify-content: center;
    align-items: center;
        height: 50px;
        background-color:#fff;
        line-height: 50px;
        margin: 0 auto;
        a{
            color: #414141;
            margin-left: 70px;
        }
        span {
            padding: 5px;
        }
        // a:hover{
        //     color: #529BFF;
        // }

    }
    .personMain {
        width: 1200px;
        margin: 10px auto;
      
    }

.footer {
    color: #B1B9CF;
   position: fixed;
  bottom: -8px;;
   left: 50%;
   transform: translateX(-50%)
}
   


 
</style>