<script>
export default {
  name: "statisticsOnTheNumberOfDetailedReport"
}
</script>

<template>
<view class="static-report-main-box">
  <view class="static-list">
    <view class="item">
      <view class = "title">录取信息</view>
      <view>
        <text>系别：</text>
        <text>电力工程学院</text>
      </view>
      <view>
        <text>录取人数：</text>
        <text>1100</text>
      </view>
      <view>
        <text>报到率：</text>
        <text>95.36%</text>
      </view>
      <view>
        <text>总录：</text>
        <text>1100</text>
      </view>
      <view>
        <text>报道：</text>
        <text>1049</text>
      </view>
      <view>
        <text >未报道：</text>
        <text class="redColor">51</text>
      </view>
    </view>
    <view class="item">
      <view class = "title">性别分类</view>
      <view>
        <text>男生录取人数：</text>
        <text>电力工程学院</text>
      </view>
      <view>
        <text>男生报道人数：</text>
        <text>1100</text>
      </view>
      <view>
        <text >男生未报道人数：</text>
        <text class="redColor">95.36%</text>
      </view>
      <view>
        <text>女生录取人数：</text>
        <text>1100</text>
      </view>
      <view>
        <text>女生报道人数：</text>
        <text>1049</text>
      </view>
      <view>
        <text >女生未报道人数：</text>
        <text class="redColor">51</text>
      </view>
    </view>
  </view>
</view>
</template>

<style scoped lang = "scss">
.static-report-main-box{
  height:100vh;
  background-color:rgb(245,245,247);
  .static-list{
    display: grid;
    padding:10px;
    row-gap: 10px;
    .item{
      padding:15px;
      background-color:white;
      font-size: 14px;
      box-shadow: 0px 2px 16px 0px rgba(70, 93, 124, 0.10);
      border-radius: 5px;
      box-sizing: border-box;
      .title{
        font-size: 18px;
        font-weight: bold;
        color: #2c2c2c;
        margin-bottom:15px;
      }
      >view{
        margin-top:5px;
        font-size: 15px;
        display: grid;
        grid-template-columns: 0.6fr 1fr;
        >text:nth-child(1){
          color: #949494;
          display: inline-block;
          width: auto;
        }
        >text:nth-child(2){
          color: #1e1e1e;
          font-weight: bold;
          display: inline-block;
        }
      }


    }

  }
}
.redColor{
  color:red !important;
}
</style>