<script>
export default {
  name: "systemRateOfRegister",
  methods:{
    going(url){
      return uni.navigateTo({url})
    }
  }
}
</script>

<template>
  <view class="system-rate-of-register-main-box">
    <view class="select-box">
      选择全部 <img src = "./images/down.svg" alt = "down-icon">
    </view>
    <view class="content-list">
      <view class="item" v-for="item in ['水利工程学院','电力工程学院','信息工程学院','机电工程学院','自动化工程学院']"
      @click="going('/pages/stuRegister/childPage/majorRateOfRegister')"
      >
        <view class="item-title">
          <view>{{ item }}</view>
          <view><img src = "./images/right.svg" alt = "right-icon"></view>
        </view>
        <view class="child-list">
          <view class="item-child" >
            <view>新生已报道</view>
            <view> 366</view>
          </view>
          <view class="item-child">
            <view>新生未报道</view>
            <view> 65</view>
          </view>
          <view class="item-child">
            <view>新生报到率</view>
            <view> 85%</view>
          </view>
        </view>
      </view>
    </view>

  </view>

</template>

<style scoped lang = "scss">
.system-rate-of-register-main-box{
  background-color:rgb(245,245,247);
  height:100vh;
  .select-box{
    width: 100%;
    padding: 2px 0;
    padding-bottom: 12px;
    color:rgb(24,144,255);
    text-align: center;
    background: white;
    img{
      width: 25px;
      height:25px;
      object-fit: cover;
      position: relative;
      top:8px;
      left:5px;
    }
  }
  .content-list{
    padding:10px;
    display: grid;
    row-gap:10px;
    .item{
      background-color: white;
      border-radius: 5px;
      box-shadow: 0px 2px 16px 0px rgba(70, 93, 124, 0.10);
      padding:18px;
      .item-title{
        display: flex;
        justify-content:space-between;
        >view:nth-child(1){
          font-size: 18px;
          font-weight: bold;
          color: #2c2c2c;
        }
        img{
          width: 25px;
          height:25px;
          object-fit:cover;
        }
      }
      .child-list{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        margin-top:10px;
        .item-child{
          text-align: center;
          margin-top:6px;
          >view:nth-child(1){
            font-size: 14px;
            color: #6e6e6e;
          }
          >view:nth-child(2){
            font-size: 18px;
            font-weight: bold;
            margin-top:5px;
            color: #2c2c2c;
          }
        }
      }
    }
  }
}
</style>