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

<template>
<view class="major-rate-register-main-box">
  <view class="select-box">
   <view>
     选择全部 <img src = "./images/down.svg" alt = "down-icon">
   </view>
    <view>
      选择专业 <img src = "./images/down.svg" alt = "down-icon">
    </view>
  </view>
  <view class="select-list">
    <view class="item"
          @click="going('/pages/stuRegister/childPage/statisticsOnTheNumberOfDetailedReport')"
          v-for="item in ['2023级水利水电工程专业/xxx技术专业','2023级水利工程专业','2023级水利水电工程智能管理专业','2023水文与水资源技术专业','2023级水土保持技术专业']">
      <view class="title">
        {{item}}
      </view>
      <view>新生已报道: <text>366</text></view>
      <view>新生未报道: <text>80</text></view>
      <view>新生报到率: <text>78%</text></view>
    </view>
  </view>
</view>
</template>

<style scoped lang = "scss">
.major-rate-register-main-box{
  height:100vh;
  background-color:rgb(245,245,247);
  .select-box:before{
    content: ' ';
    height:23px;
    width: 1px;
    background-color: rgb(24,144,255);
    position: absolute;
    left: 50%;
    top:10px;
  }
  .select-box{
    width: 100%;
    padding: 2px 0;
    padding-bottom: 12px;
    color:rgb(24,144,255);
    text-align: center;
    background: white;
    display: flex;
    position: relative;
   view{
     width: 50%;
     img{
       width: 25px;
       height:25px;
       object-fit: cover;
       position: relative;
       top:8px;
       left:5px;
     }
   }
  }
  .select-list{
    padding:10px;
    display: grid;
    box-sizing: border-box;
    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;
        width: 90vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      >view:nth-child(2){
        margin-top:10px;
        color: #6e6e6e;
        text{
          margin-left: 3px;
        }
      }
      >view:nth-child(3){
        margin-top:5px;
        color: #6e6e6e;
        text{
          margin-left: 3px;
        }
      }
      >view:nth-child(4){
        margin-top:5px;
        color: #6e6e6e;
        text{
          margin-left: 3px;
        }
        text{
          color: rgb(255, 23, 23);
          margin-left: 3px;
        }
      }
    }
  }
}
</style>