jiangxiSZ/shuzhixiangzheng/src/components/MainPageChild/EducationPage.vue

<template>
    <div id="educationPage">
      <tr id="schoolStatus">在校生情况</tr>
      <div id="table_head">
          <td id="td1">类型</td>
          <td id="td2">人数</td>
          <td id="td3">比例</td>
      </div>
    </div>
</template>
    <script>  
    export default {
      name: 'EducationPage',
      components:{
        
      },
      data () {
        return {
          msg: '',
        }
      },
      mounted(){
        
      },
      methods:{
        
      }
    }
</script>
    
 <style scoped>
     #td1{
        font-weight:bold;
        position: absolute;
        left:10%;
        top:15%
     }
     #td2{
        font-weight:bold;
        position: absolute;
        left:40%;
        top:15%
     }
     #td3{
        font-weight:bold;
        position: absolute;
        left:70%;
        top:15%
     }
     #educationPage{
        position: absolute;
        width: 100%;
        height: 25%;
        background-color: rgb(20, 10, 220,0.1);
        top:52%;
     }
     #schoolStatus{
         position: absolute;
         font-family: "宋体";
         font-weight:bold;
         left:10%
     }
     #table_head{
        position: absolute;
        background-color:rgb(10,98,197) ;
        font-size: 13px; 
        top:10%;
        width: 180px;
        height: 30px;
        left: 10%;
     }
</style>