<template>
  <div style="width: 100%">
    <el-main>
        <div class="tou">
          <span>平台数据检测</span>
        </div>
        <div id="statistics">
            <div class="count">
                <!-- <h4><div></div>目前平台学生(个)</h4> -->
                <div><span>1024</span><img src="../../assets/dataimage/greenUp.png"></div>
            </div>
            <div class="count">
                <!-- <h4><div></div>劳动作业数量</h4> -->
                <div><span>1863</span><img src="../../assets/dataimage/redUp.png"></div>
            </div>
            <div class="count">
                <!-- <h4><div></div>劳动课程数量</h4> -->
                <div><span>228</span><img src="../../assets/dataimage/blueUp.png"></div>
            </div>
        </div>
        <div id="graphicalArea">
            <div class="graphical">
                <span>课程劳动教育</span>
                <div><img src="../../assets/dataimage/1.png"></div>
            </div>
            <div class="graphical">
                <span>五育融合</span>
                <div><img src="../../assets/dataimage/2.png"></div>
            </div>
            <div class="graphical">
                <span>得奖占比</span>
                <div><img src="../../assets/dataimage/3.png"></div>
            </div>
            <div class="graphical">
                <span>家校社</span>
                <div><img src="../../assets/dataimage/4.png"></div>
            </div>
            <div class="graphical">
                <span>义工社团情况</span>
                <div><img src="../../assets/dataimage/5.png"></div>
            </div>
            <div class="graphical">
                <span>劳动素养</span>
                <div><img src="../../assets/dataimage/6.png"></div>
            </div>
        </div>
        <el-table
            :data="tableData"
            stripe="true"
            :header-cell-style="{ background: '#3867d6',color:'#ffffff',textAlign:'center'}"
            style="width: 91.5%;margin-top:20px;">
            <el-table-column
                type="index"
                label="排名"
                align="center"
                width="250">
                <!-- <img src="../../assets/dataimage/flag.png"> -->
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                align="center"
                width="300">
            </el-table-column>
            <el-table-column
                prop="class"
                label="班级"
                align="center"
                width="200">
            </el-table-column>
            <el-table-column
                prop="fraction"
                label="积分"
                align="center"
                width="200">
            </el-table-column>
            <el-table-column
                prop="school"
                align="center"
                label="学校">
            </el-table-column>
        </el-table>
    </el-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
        tableData: [{
            name: '王小虎',
            class: '六年级三班',
            fraction:687,
            school:'深圳市龙岗区X城外国语小学'
          }, {
            name: '王小虎',
            class: '六年级三班',
            fraction:687,
            school:'深圳市龙岗区X城外国语小学'
          }, {
            name: '王小虎',
            class: '六年级三班',
            fraction:687,
            school:'深圳市龙岗区X城外国语小学'
          }, {
            name: '王小虎',
            class: '六年级三班',
            fraction:687,
            school:'深圳市龙岗区X城外国语小学'
          },{
            name: '王小虎',
            class: '六年级三班',
            fraction:687,
            school:'深圳市龙岗区X城外国语小学'
          },{
            name: '王小虎',
            class: '六年级三班',
            fraction:687,
            school:'深圳市龙岗区X城外国语小学'
          },{
            name: '王小虎',
            class: '六年级三班',
            fraction:687,
            school:'深圳市龙岗区X城外国语小学'
          },{
            name: '王小虎',
            class: '六年级三班',
            fraction:687,
            school:'深圳市龙岗区X城外国语小学'
          },{
            name: '王小虎',
            class: '六年级三班',
            fraction:687,
            school:'深圳市龙岗区X城外国语小学'
          },{
            name: '王小虎',
            class: '六年级三班',
            fraction:687,
            school:'深圳市龙岗区X城外国语小学'
          }]
    };
  },

};
</script>

<style scoped>
#statistics{
    width: 100%;
    height: 150px;
    display: flex;
    justify-content:flex-start;
    margin-top:20px ;
}
.count{
    position: relative;
    height: 100%;
    width: 400px;
    border-radius: 15px;
}
.count:nth-child(1){
    background-image: url('../../assets/dataimage/studentMessage.png');
}
.count:nth-child(2){
    background-image: url('../../assets/dataimage/labourMessage.png');
}
.count:nth-child(3){
    background-image: url('../../assets/dataimage/curriculumMessage.png');
}
.count:nth-child(n+2){
    margin-left: 25px;
}
.count>h4>div{
    float: left;
    width: 4px;
    height: 20px;
    margin-right:8px ;
    background: white;
}
.count>h4{
    top: 20px;
    left: 40px;
    position: absolute;
    color: white;
    font-weight:300 ;
    font-size:.89em ;
}
.count>div{
    position: absolute;
    top: 45px;
    left: 40px;
}
.count>div>span{
    color: white;
    font-size:4em ;
    margin-right: 5px;
}
.count>div>img{
    position: relative;
    bottom: -5px;
}
#graphicalArea{
    width: 100%;
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}
.graphical{
    position: relative;
    box-sizing: border-box;
    width: 45%;
    height: 450px;
    margin-top:20px ;
    /* border-radius: 10px; */
    background: #f1f2f6;
}
.graphical:nth-child(2n){
    margin-left:20px ;
}
.graphical>span{
    position:absolute;
    font-size:1.1em ;
    font-weight:500 ;
    top: 15px;
    left: 10px;
    color: #636e72;
}
.graphical>div{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
main{
    overflow-y:hidden ;
}
</style>
