<template>
    <div  class="app-container home">
       <el-card class="box-card xxcp_bg xxcp_bg1" style="margin-bottom:30px">
          <el-row :gutter="24"  >
            <el-col :span="24" :xs="24" >
               <el-image style="width:100%;height: 150px;" :src="img.img_bg"></el-image>
               <el-image style="width:60px;position: absolute;top: 50px;left: 30px;" :src="img.icon_xunzhang"></el-image>
               <div style=" position: absolute;top: 50px;left: 100px;line-height:32px;color:#fff">
                 <div style="font-size:18px;font-weight:bold">八年级上学期期末考试</div>
                 <div>总分150分</div>
               </div>
                <div style="margin-top:20px;position: relative;padding:0 20px">
                     <el-image style="" :src="img.img_label_bg1"></el-image>
                     <div style=" position: absolute;top:6px;left: 40px;">考试情况分析备份</div>
                      <el-row :gutter="24" style="margin-top:30px">
                        <el-col :span="6" :xs="12" >
                          <div style="line-height:40px">参加考试人数：<span style="color:#51C9A7;font-size:22px">50人</span></div>
                          <div style="line-height:40px"><span style="color:#51C9A7;font-size:22px">0</span>缺考</div>
                        </el-col>
                        <el-col :span="6" :xs="12" >
                          <div style="line-height:40px">平均得分率：<span style="color:#51C9A7;font-size:22px">50%</span></div>
                          <div style="line-height:40px">较上次考试：</div>
                        </el-col>
                        <el-col :span="6" :xs="12" >
                          <div style="line-height:40px">平均分：<span style="color:#51C9A7;font-size:22px">102.3</span></div>
                          <div style="line-height:40px">最高分<span style="color:#51C9A7;">150</span>最低分<span style="color:#51C9A7;">60</span>满分<span style="color:#51C9A7;">150</span> </div>
                        </el-col>
                        <el-col :span="6" :xs="12" >
                          <div style="line-height:40px">及格率：<span style="color:#51C9A7;font-size:22px">100人</span></div>
                          <div style="line-height:40px">得分率<span style="color:#51C9A7;">90%</span>的<span style="color:#51C9A7;">10</span> 人</div>
                        </el-col>
                      </el-row >
                        <el-row :gutter="24" style="margin-top:30px">
                          <el-col :span="6" :xs="12" v-for="n in 4">
                            <div style="border: 1px solid #51C9A7; border-radius: 5px 5px 0px 0px">
                              <div style="background: #51C9A7;line-height: 60px;text-align: center;color: #fff;  ">大步进步</div>
                               <el-table
                                     :data="tableData"
                                     style="width: 100%">
                                     <el-table-column
                                       prop="name1"
                                       align="center"
                                       label="姓名">
                                     </el-table-column>
                                     <el-table-column
                                       prop="name2"
                                       align="center"
                                       label="班级排名" >
                                     </el-table-column>
                                     <el-table-column
                                       prop="name3"
                                       align="center"
                                       label="提升">
                                     </el-table-column>
                                   </el-table>
                              </div>
                          </el-col>
                        </el-row >
                </div>
            </el-col>
         </el-row >
       </el-card>
       <el-card class="box-card xxcp_bg xxcp_bg1" style="margin-bottom:30px">
          <el-row :gutter="24"  >
            <el-col :span="24" :xs="24" >
                <div style="margin-top:20px;position: relative;padding:0 20px">
                     <el-image style="" :src="img.img_label_bg1"></el-image>
                     <div style=" position: absolute;top:6px;left: 40px;">考试情况分析</div>
                        <el-row :gutter="24" style="margin-top:30px">
                          <el-col :span="24" :xs="12" >
                            <div >
                              <table style="width:100%">
                                <tr>
                                  <th style="line-height:60px;background:#51C9A7;color:#fff">题号</th>
                                  <th style="line-height:60px;background:#51C9A7;color:#fff" v-for="n in 10">{{n}}</th>
                                </tr>
                                <tr class="text-center">
                                    <td  style="line-height:60px;background:#51C9A7;color:#fff">答错人数</td>
                                     <th style="line-height:60px;border:1px solid #51C9A7 " v-for="n in 10">0</th>
                                </tr>
                                <tr class="text-center">
                                    <td  style="line-height:60px;background:#51C9A7;color:#fff">错误率</td>
                                     <th style="line-height:60px;border:1px solid #51C9A7 " v-for="n in 10">0</th>
                                </tr>
                              </table>
                            </div>
                          </el-col>
                        </el-row >
                </div>
            </el-col>
         </el-row >
       </el-card>
       <el-card class="box-card xxcp_bg xxcp_bg1" style="margin-bottom:30px">
          <el-row :gutter="24"  >
            <el-col :span="24" :xs="24" >
                <div style="margin-top:20px;position: relative;padding:0 20px">
                     <el-image style="" :src="img.img_label_bg2"></el-image>
                     <div style=" position: absolute;top:6px;left: 40px;">客观得分题</div>
                        <el-row :gutter="24" style="margin-top:30px">
                          <el-col :span="24" :xs="12" >
                            <div >
                              <table style="width:100%">
                                <tr>
                                  <th style="line-height:60px;background:#51C9A7;color:#fff">题号</th>
                                  <th style="line-height:60px;background:#51C9A7;color:#fff" v-for="n in 5">{{n}}（B）</th>
                                </tr>
                                <tr class="text-center">
                                    <td  style="line-height:60px;background:#51C9A7;color:#fff">选项</td>
                                    <th style="line-height:60px;border:1px solid #51C9A7 " v-for="n in 5">
                                      <div class="text-center" style="width:25%;float:left" v-for="n in options">{{n}}</div>
                                    </th>
                                </tr>
                                <tr class="text-center">
                                    <td  style="line-height:60px;background:#51C9A7;color:#fff">错误率</td>
                                     <th style="line-height:60px;border:1px solid #51C9A7 " v-for="n in 5">0</th>
                                </tr>
                              </table>
                            </div>
                          </el-col>
                        </el-row >
                </div>
            </el-col>
         </el-row >
       </el-card>

       <el-card class="box-card xxcp_bg xxcp_bg1" style="margin-bottom:30px">
          <el-row :gutter="24"  >
            <el-col :span="24" :xs="24" >
                <div style="margin-top:20px;position: relative;padding:0 20px">
                     <el-image style="" :src="img.img_label_bg3"></el-image>
                     <div style=" position: absolute;top:6px;left: 40px;">知识点分析</div>
                        <el-row :gutter="24" style="margin-top:30px">
                          <el-col :span="24" :xs="12" >
                            <div >
                              <table style="width:100%">
                                <tr>
                                  <th style="line-height:60px;background:#F5AB86;color:#fff">知识点</th>
                                  <th style="line-height:60px;background:#F5AB86;color:#fff">考点掌握水平</th>
                                  <th style="line-height:60px;background:#F5AB86;color:#fff">班级得分率</th>
                                  <th style="line-height:60px;background:#F5AB86;color:#fff">答错人数</th>
                                  <th style="line-height:60px;background:#F5AB86;color:#fff">对应题号</th>
                                </tr>
                                <tr class="text-center" v-for="n in 4">
                                    <td  style="line-height:60px;  ">1</td> 
                                    <td  style="line-height:60px;  ">1</td> 
                                    <td  style="line-height:60px;  ">1</td> 
                                    <td  style="line-height:60px;  ">1</td> 
                                    <td  style="line-height:60px;  ">1</td> 
                                </tr>
                              </table>
                            </div>
                          </el-col>
                        </el-row >
                </div>
            </el-col>
         </el-row >
       </el-card>
    </div>
</template>

<script>
export default {
  data() {
    return {
        options:['A','B','C','D'],
        img:{
           img_bg:require('@/assets/images/img_bg.png'),
           icon_xunzhang:require('@/assets/images/icon_xunzhang.png'),
           img_label_bg1:require('@/assets/images/img_label_bg1.png'),
           img_label_bg2:require('@/assets/images/img_label_bg2.png'),
           img_label_bg3:require('@/assets/images/img_label_bg3.png'),
        },
        tableData:[{
          name1:'张三',
          name2:'10',
          name3:'2'
        },
        {
          name1:'张三',
          name2:'10',
          name3:'2'
        },
        {
          name1:'张三',
          name2:'10',
          name3:'2'
        },
        {
          name1:'张三',
          name2:'10',
          name3:'2'
        },
        {
          name1:'张三',
          name2:'10',
          name3:'2'
        }]
    };
  },
  mounted() {

  }
 }
</script>

<style>
</style>
