<template>
	<view class="student-report-main-box">

    <view class="student-top-content-show">

      <view class="top-content-list">
        <view class="item">
          <view>录取总人数</view>
          <view>8200<text>人</text></view>
        </view>
        <view class="item">
          <view>录取总人数</view>
          <view>8200<text>人</text></view>
      </view>
    </view>
      <view class="deadline">截止时间：{{formatDate(new Date())}}</view>
	</view>

    <view class="student-function-list">
      <view class = "item" @click="going('/pages/stuRegister/childPage/systemRateOfRegister')">
        <view>系统报到率</view>
        <view><img src = "./images/right.svg" alt = "going-icon"></view>
      </view>
      <view class = "item" @click="going('/pages/stuRegister/childPage/systemRateOfRegister')">
        <view>专业报到率</view>
        <view><img src = "./images/right.svg" alt = "going-icon"></view>
      </view>
      <view class = "item" @click="going('/pages/stuRegister/childPage/systemRateOfRegister')">
        <view>班级报到率</view>
        <view><img src = "./images/right.svg" alt = "going-icon"></view>
      </view>
      <view class = "item" @click="going('/pages/stuRegister/childPage/systemRateOfRegister')">
        <view>学院报到率</view>
        <view><img src = "./images/right.svg" alt = "going-icon"></view>
      </view>
      <view class = "item" @click="going('/pages/stuRegister/childPage/systemRateOfRegister')">
        <view>明细报道数统计</view>
        <view><img src = "./images/right.svg" alt = "going-icon"></view>
      </view>
      <view class = "item" @click="going('/pages/stuRegister/childPage/systemRateOfRegister')">
        <view>明细查询</view>
        <view><img src = "./images/right.svg" alt = "going-icon"></view>
      </view>
    </view>

  </view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
      formatDate(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');

        return `${year}年${month}月${day}日 ${hours}:${minutes}`;
      },
      going(url){
        return uni.navigateTo({url})
      }
		}
	}
</script>

<style scoped lang="scss">
.student-report-main-box{
  padding: 13px;
  .student-top-content-show{
    background: linear-gradient(rgb(24,145,255),rgb(11,97,255));
    box-sizing: border-box;
    border-radius: 5px;
    color: white;

    .top-content-list{
      display: grid;
      grid-template-columns: 50% 50%;
      padding-top: 20px;
      .item{
        text-align: center;
        >view:nth-child(1){
          font-size:14px ;
        }
        >view:nth-child(2){
          font-size: 37px;
          margin-top: 10px;
          text{
            font-size:18px ;
          }
        }
      }
    }

    .deadline{
      text-align: center;
      padding: 20px 0;
      color:rgba(255,255,255,0.8);
    }
  }
  .student-function-list{
    margin-top:5px;
    display: grid;
    row-gap: 5px;
    .item:before{
      content: ' ';
      background-color: rgba(30,147,254,1);
      width:4px;
      height:20px;
      position: absolute;
      left:15px;

    }
    .item{
      display: flex;
      justify-content: space-between;
      box-shadow: 0px 2px 16px 0px rgba(70, 93, 124, 0.10);
      padding:15px 20px;
      padding-left: 30px;
      z-index: 999;
      border-radius: 5px;
      position: relative;
      view:nth-child(2){
        img{
          width: 20px;
          height:20px;
          object-fit: cover;
        }
      }
    }
  }
}
</style>
