<!--即将到期-->
<template>
  <view class="main_box">
    <!--自定义导航栏-->
<!--    <view class="navbar_section">-->
<!--      <view class="title">班级详情</view>-->
<!--    </view>-->

    <view class="main_section">
      <!-- 班级成员列表-->
      <view class="section_4">
        <view class="ul">
			 <!-- @click="openViewStudentInfo({id:1})" -->
          <view class="li">
            <view class="left">
              <view class="box_1">
                <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                <view class="tag_box">
                  即将到期
                </view>
              </view>
              <view class="box_2">
                <view class="name">黄明明</view>
                <view class="date">课程截止时间：2020.05:25</view>
              </view>
            </view>
            <view class="right">
              <view class="item">
                <view>24</view>
                <view>已上课时</view>
              </view>
              <view class="item">
                <view>24</view>
                <view>剩余课时</view>
              </view>
            </view>
          </view>
          <view class="li">
            <view class="left">
              <view class="box_1">
                <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                <view class="tag_box">
                  即将到期
                </view>
              </view>
              <view class="box_2">
                <view class="name">黄明明</view>
                <view class="date">课程截止时间：2020.05:25</view>
              </view>
            </view>
            <view class="right">
              <view class="item">
                <view>24</view>
                <view>已上课时</view>
              </view>
              <view class="item">
                <view>24</view>
                <view>剩余课时</view>
              </view>
            </view>
          </view>
          <view class="li">
            <view class="left">
              <view class="box_1">
                <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                <view class="tag_box">
                  即将到期
                </view>
              </view>
              <view class="box_2">
                <view class="name">黄明明</view>
                <view class="date">课程截止时间：2020.05:25</view>
              </view>
            </view>
            <view class="right">
              <view class="item">
                <view>24</view>
                <view>已上课时</view>
              </view>
              <view class="item">
                <view>24</view>
                <view>剩余课时</view>
              </view>
            </view>
          </view>
          <view class="li">
            <view class="left">
              <view class="box_1">
                <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                <view class="tag_box">
                  即将到期
                </view>
              </view>
              <view class="box_2">
                <view class="name">黄明明</view>
                <view class="date">课程截止时间：2020.05:25</view>
              </view>
            </view>
            <view class="right">
              <view class="item">
                <view>24</view>
                <view>已上课时</view>
              </view>
              <view class="item">
                <view>24</view>
                <view>剩余课时</view>
              </view>
            </view>
          </view>
          <view class="li">
            <view class="left">
              <view class="box_1">
                <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                <view class="tag_box">
                  即将到期
                </view>
              </view>
              <view class="box_2">
                <view class="name">黄明明</view>
                <view class="date">课程截止时间：2020.05:25</view>
              </view>
            </view>
            <view class="right">
              <view class="item">
                <view>24</view>
                <view>已上课时</view>
              </view>
              <view class="item">
                <view>24</view>
                <view>剩余课时</view>
              </view>
            </view>
          </view>
          <view class="li">
            <view class="left">
              <view class="box_1">
                <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                <!--                <view class="tag_box">-->
                <!--                  即将到期-->
                <!--                </view>-->
              </view>
              <view class="box_2">
                <view class="name">黄明明</view>
                <view class="date">课程截止时间：2020.05:25</view>
              </view>
            </view>
            <view class="right">
              <view class="item">
                <view>24</view>
                <view>已上课时</view>
              </view>
              <view class="item">
                <view>24</view>
                <view>剩余课时</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!--    底部导航-->
    <!--    <AQTabber/>-->
  </view>
</template>

<script>
// import user from '@/api/user.js';
import AQTabber from "@/components/AQ/AQTabber.vue"


export default {
  components: {
    AQTabber,
  },
  data() {
    return {
      formData:{},
      tabType:'1',//1=班级成员,2=作业任务
    }
  },
  onLoad() {
  },
  methods: {
    //切换tab
    tabChange(tabType) {
      this.tabType = tabType
    },

    //打开课程详情
    openViewCourseInfo(item){
      this.$navigateTo({
        url: '/pages/coach/course/info'
      })
    },
    //打开学员详情页
    openViewStudentInfo(item){
      this.$navigateTo({
        url: '/pages/coach/student/info'
      })
    },
  }
}
</script>

<style lang="less" scoped>

.main_box{
  background: #292929 ;
}

//自定义导航栏
.navbar_section{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #292929;
  .title{
    padding: 40rpx 0rpx;

    /* 小程序端样式 */
    // #ifdef MP-WEIXIN
    padding: 80rpx 0rpx;
    // #endif

    font-size: 30rpx;
    color: #fff;
  }
}

.main_section{
  min-height: 100vh;
  background: #292929 100%;
  padding: 0 24rpx;
  padding-top: 40rpx;
  padding-bottom: 150rpx;
  font-size: 24rpx;
  color: #FFFFFF;
  //班级成员列表
  .section_4{
    .ul{
      display: flex;
      flex-direction: column;
      gap: 10rpx;
      .li{
        padding: 20rpx 0;
        padding-bottom: 40rpx;
        border-bottom: 2px solid #D7D7D7;
        display: flex;
        justify-content: space-between;
        .left{
          display: flex;
          align-items: center;
          gap: 30rpx;
          .box_1{
            padding-left: 20rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            .pic{
              width: 84rpx;
              height: 84rpx;
              border-radius: 50%;
            }
            .tag_box{
              position: absolute;
              bottom: -30rpx;
              width: 120rpx;
              height: 38rpx;
              background-color: #F59A23;
              border-radius: 4rpx;
              line-height: 35rpx;
              text-align: center;
              font-size: 20rpx;
            }
          }
          .box_2{
            display: flex;
            flex-direction: column;
            gap: 20rpx;
            .name{
              font-size: 28rpx;
            }
            .date{
              font-size: 24rpx;
            }
          }
        }
        .right{
          display: flex;
          align-items: center;
          gap: 14rpx;
          .item{
            border: 1px solid #00E5BB;
            border-radius: 10rpx;
            width: 102rpx;
            display: flex;
            flex-direction: column;
            view{
              text-align: center;
              height: 50rpx;
              line-height: 50rpx;
            }
            view:nth-child(1){
              font-size: 32rpx;
              background-color: #fff;
              color: #00e5bb;
            }
            view:nth-child(2){
              font-size: 20rpx;
              background-color: #00e5bb;
            }
          }
        }
      }
    }
  }
}


</style>