ZhiHuiJiaoWu_UniApp/pages/coach/my/arrival_statistics.vue

<!--到课统计-详情-->
<template>
  <view class="main_box">

    <view class="main_section">
      <view class="section_3">
        <view class="ul">
          <view class="li">
            <view class="left_box">
              <view class="date_box">
                <text>12</text>
                <text>/</text>
                <text>24</text>
              </view>
              <view class="ratio">
                到课率：80%
              </view>
            </view>
            <view class="center_box">
              <view>班级：少年班</view>
              <view>时间：2020-05-25 15:30 - 17:30</view>
              <view>课室：302室
              </view>
              <view>课程：篮球少儿课
              </view>
            </view>
            <view class="right_box">
              <view class="tag" style="background:#fad24e;">上课中</view>
              <!--            <view class="tag" style="background:#1cd188;">待上课</view>-->
            </view>
          </view>
          <view class="li">
            <view class="left_box">
              <view class="date_box">
                <text>12</text>
                <text>/</text>
                <text>24</text>
              </view>
              <view class="ratio">
                到课率：80%
              </view>
            </view>
            <view class="center_box">
              <view>班级：少年班</view>
              <view>时间：2020-05-25 15:30 - 17:30</view>
              <view>课室：302室
              </view>
              <view>课程：篮球少儿课
              </view>
            </view>
            <view class="right_box">
              <!--            <view class="tag" style="background:#fad24e;">上课中</view>-->
              <view class="tag" style="background:#1cd188;">待上课</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

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


export default {
  components: {
    AQTabber,
  },
  data() {
    return {
      formData:{},

      //课程下拉菜单相关
      show_course:false,//是否显示下拉菜单
      //课程下拉菜单
      course_name:'课程',//选中的下拉菜单名称
      options_course: [
        {
          text: '请选择课程',
          value: '',
          checked: true
        }, {
          text: '羽毛球课程1',
          value: '1'
        }, {
          text: '篮球课程2',
          value: '2'
        }
      ],

      //课室下拉菜单相关
      show_classroom:false,//是否显示下拉菜单
      //课程下拉菜单
      classroom_name:'课室',//选中的下拉菜单名称
      options_classroom: [
        {
          text: '请选择课室',
          value: '',
          checked: true
        }, {
          text: '羽毛球201',
          value: '1'
        }, {
          text: '篮球室101',
          value: '2'
        }
      ],
    }
  },
  onLoad() {
  },
  methods: {
    //选中课程下拉菜单点击事件
    clickCourse(e){
      console.log(e)
      this.course_name = e.text
      this.show_course = true
    },
    //显示下拉菜单
    filterTapCourse() {
      //显示下拉框
      this.$refs.ref_course.show()
      this.show_course = true;
    },



    //选中课室
    clickClassroom(e){
      console.log(e)
      this.classroom_name = e.text
      this.show_classroom = true
    },
    //显示课室下拉菜单
    filterTapClassroom() {
      //显示下拉框
      this.$refs.ref_classroom.show()
      this.show_classroom = true;
    },

    //打开课时详情页
    openViewCourseInfo(item){
      uni.navigateTo({
        url: '/pages/coach/course/info'
      })
    },
  }
}
</script>

<style lang="less" scoped>

.main_box{
  background: #292929 ;
}

//自定义导航栏
.navbar_section{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #29d3b4;
  .title{
    padding: 20rpx 0;
    font-size: 30rpx;
    color: #315d55;
  }
}

.main_section{
  min-height: 100vh;
  background: #292929 100%;
  padding: 0 24rpx;
  padding-top: 32rpx;
  padding-bottom: 150rpx;
  font-size: 28rpx;
  .section_3{
    color: #fff;
    font-size: 24rpx;
    .title_box{
      display: flex;
      flex-direction: column;
      .top_box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        text{
          font-size: 30rpx;
        }
      }
      .line{
        width: 90rpx;
        height: 2px;
        background: #29D3B4;
      }
    }
    .ul{
      margin-top: 30rpx;
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      .li{
        position: relative;
        border-radius: 22rpx;
        background: #434544 100%;
        padding: 14rpx 0;
        display: flex;
        align-items: center;
        .left_box{
          margin-left: 28rpx;
          width: 146rpx;
          display: flex;
          flex-direction: column;
          gap: 10rpx;
          .date_box{
            display: flex;
            font-size: 48rpx;
            text:nth-child(1){
              color: #29D3B4;
            }
          }
          .ratio{
            color: #AAAAAA;
          }
        }
        .center_box{
          margin-left: 52rpx;
          display: flex;
          flex-direction: column;
          gap: 10rpx;
        }
        .right_box{
          .tag{
            position:absolute;
            top: 0rpx;
            right: 0rpx;
            padding: 10rpx;
            width: 102rpx;
            text-align: center;
            font-size: 24rpx;
            border-bottom-left-radius: 20rpx;
            border-top-right-radius: 20rpx;
          }

        }
      }

    }
  }

}


</style>