ZhiHuiJiaoWu_UniApp/pages/coach/course/info_list.vue

<!--课程-详情列表-->
<template>
  <view class="main_box">
    <view class="main_section">
      <view class="section_1">
        <view class="title">班级：少年班</view>
        <view class="title">时间：2025-05-25 15:30 - 17:30</view>
        <view class="title">地点：xxx体育馆302室</view>
        <view class="title">课程：篮球少儿课</view>
        <view class="title">教练：张全蛋</view>
        <view class="title">人数：30</view>
        <view class="tag" style="background-color: #FAD24E;">上课中</view>
      </view>

      <view class="section_2">
        <view :class="['table', tableType==1 ? 'select':'']" @click="switchTag(1)">签到情况</view>
        <view :class="['table', tableType==2 ? 'select':'']" @click="switchTag(2)">作业情况</view>
      </view>

      <!--签到情况-->
      <view class="section_3" v-if="tableType == 1">
        <view class="item">
          <view class="left">
            <image class="pic" model="aspectFit" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
            <view class="box">
              <view class="title">黄明明</view>
              <view class="title">课程截止时间：2025-05-25</view>
            </view>
          </view>
          <view class="right">
            <view class="tag">请假</view>
          </view>
        </view>

        <view class="item">
          <view class="left">
            <image class="pic" model="aspectFit" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
            <view class="box">
              <view class="title">黄明明</view>
              <view class="title">课程截止时间：2025-05-25</view>
            </view>
          </view>
          <view class="right">
            <view class="tag">请假</view>
          </view>
        </view>


        <view class="item">
          <view class="left">
            <image class="pic" model="aspectFit" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
            <view class="box">
              <view class="title">黄明明</view>
              <view class="title">课程截止时间：2025-05-25</view>
            </view>
          </view>
          <view class="right">
            <view class="tag">请假</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 {
      tableType: 1,//1=签到情况，2=作业情况
      tableList_1:[],//1=签到情况列表
      tableList_2:[],//2=作业情况列表
    }
  },
  onLoad() {
  },
  methods: {
    //切换标签
    switchTag(type) {
      this.tableType = type
    },




    //打开课时详情页
    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: #292929;
  .title{
    padding: 20rpx 0;
    font-size: 30rpx;
    color: #fff;
  }
}

.main_section{
  min-height: 100vh;
  background: #292929 100%;
  padding: 30rpx 24rpx;
  padding-top: 40rpx;
  padding-bottom: 150rpx;
  font-size: 24rpx;
  color: #FFFFFF;

  .section_1{
    position: relative;
    padding: 18rpx 34rpx 50rpx;
    display: flex;
    flex-direction: column;
    gap: 15rpx;
    color: #fff;
    font-size: 24rpx;
    background-color: #434544;
    border-radius: 22rpx;
    .tag{
      position: absolute;
      top: 0;
      right: 0;

      width: 110rpx;
      height: 60rpx;
      line-height: 55rpx;
      border-radius: 0rpx 24rpx 0rpx 24rpx;
      color: #fff;
      font-size: 24rpx;
      text-align: center;
    }
  }

  .section_2{
    margin-top: 44rpx;
    color: #fff;
    font-size: 30rpx;

    display: flex;
    justify-content: center;
    align-items: center;
    .table{
      width: 50%;
      height: 64rpx;
      background-color: #1684FCFF;

      line-height: 62rpx;
      text-align: center;
    }
    .table:nth-child(1){
      border-top-left-radius: 8rpx;
      border-bottom-left-radius: 8rpx;
    }
    .table:nth-child(2){
      border-top-right-radius: 8rpx;
      border-bottom-right-radius: 8rpx;
    }

    .select{
      background-color: #fff;
      color: #1684FCFF;
    }
  }

  .section_3{
    margin-top: 44rpx;
    padding: 30rpx 0;
    border-radius: 22rpx;
    background-color: #434544;
    display: flex;
    flex-direction: column;
    .item{
      border-top: 1px solid #D7D7D7;
      padding: 20rpx 33rpx 20rpx 14rpx;

      display: flex;
      justify-content: space-between;
      align-items: center;
      .left{
        width: 80%;
        display: flex;
        align-items: center;
        gap: 26rpx;
        .pic{
          width: 92rpx;
          height: 92rpx;
          border-radius: 50%;
          background-color: #797979FF;
        }
        .box{
          display: flex;
          flex-direction: column;
          gap: 10rpx;
          .title{
            color: #fff;
            font-size: 24rpx;
          }
        }
      }
      .right{
        .tag{
          width: 93rpx;
          height: 93rpx;
          border-radius: 50%;
          line-height: 90rpx;
          font-size: 26rpx;
          background-color: rgba(254,250,131,0.62);
          color: rgba(255,255,255,1);
          text-align: center;
          border: 0rpx solid rgba(254,250,131,0.62);
          //旋转45°
          transform: rotate(-30deg);
        }
      }
    }
    .item:nth-child(1){
      border-top: 0px;
    }
  }
}


</style>