ZhiHuiJiaoWu_UniApp/pages/coach/my/index.vue

<!--我的-首页-->
<template>
  <view class="main_box">
    <!--自定义导航栏-->
    <view class="navbar_section">
      <view class="title">我的</view>
    </view>

    <view style="background:#29D3B4;">
      <!--用户信息-->
      <view class="user_section">
        <view class="box">
          <view class="left">
            <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
            <view class="name">包子皮</view>
          </view>
          <view class="right">
            <view class="btn">切换身份</view>
            <view class="btn">到课率统计</view>
            <view class="btn"></view>
          </view>
        </view>
      </view>

      <!--统计信息-->
      <view class="count_section">
        <view class="main">
          <view class="course_box">
            <view class="top">
              <view class="item">
                <view class="num">1234</view>
                <view class="intro">总授课数/节</view>
              </view>
              <view class="item">
                <view class="num">4</view>
                <view class="intro">总授班级/个</view>
              </view>
              <view class="item">
                <view class="num">1234</view>
                <view class="intro">总负责学员/名
                </view>
              </view>
            </view>
            <view class="bottom">
              月授课数
              <text>12</text>
              节，月负责学员
              <text>188</text>
              名
            </view>
          </view>
        </view>
        <view class="bg_box bg_top"></view>
        <view class="bg_box bg_bottom"></view>
      </view>
    </view>



    <view class="main_section">
      <view class="section_box">
        <view class="item">
         <view>我的体育场</view>
         <view>xxx场馆</view>
        </view>

        <view class="item">
          <view>即将到期</view>
          <view></view>
        </view>

        <view class="item">
          <view>授课统计</view>
          <view></view>
        </view>

      </view>

      <view class="section_box">
        <view class="item">
          <view>意见反馈</view>
          <view></view>
        </view>

        <view class="item">
          <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=作业任务
      Atype:1,//1=作业完成,2=作业未提交
    }
  },
  onLoad() {
  },
  methods: {
    //切换tab
    tabChange(tabType) {
      this.tabType = tabType
    },

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

    //打开体测报告
    openViewPhysicalExamination(item){
      uni.navigateTo({
        url: '/pages/coach/student/physical_examination'
      })
    },

    //打开作业任务
    opebViewWorkDetails(item){
      uni.navigateTo({
        url: '/pages/coach/student/work_details'
      })
    },
  }
}
</script>

<style lang="less" scoped>

.main_box{
  background: #292929;
  min-height: 28vh;
}

//自定义导航栏
.navbar_section{
  border: 1px solid #29D3B4;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #29D3B4;
  .title{
    padding: 20rpx 0;
    font-size: 30rpx;
    color: #fff;
  }
}

//用户信息
.user_section {
  background-color: #29D3B4;
  padding-top: 58rpx;
  padding-bottom: 42rpx;
  color: #fff;
  font-size: 28rpx;
  .box{
    padding-left: 19rpx;
    padding-right: 29rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15rpx;
    .left{
      display: flex;
      align-items: center;
      gap: 20rpx;
      .pic{
        width: 144rpx;
        height: 144rpx;
        border-radius: 50%;
      }
      .name{
        font-size: 28rpx;
      }
    }
    .right{
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      .btn{
        min-height: 28rpx;
        font-size: 28rpx;
      }
    }
  }
}

//统计信息
.count_section{
  position: relative;
  .main{
    position: relative;
    z-index: 2;
    padding: 0rpx 24rpx;
    display: flex;
    justify-content: center;
    .course_box{
      padding: 42rpx 28rpx;
      width: 692rpx;
      border-radius: 20rpx;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      gap: 32rpx;
      .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item{
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 12rpx;
          .num{
            color: #29D3B4;
            font-size: 56rpx;
          }
          .intro{
            color: #AAAAAA;
            font-size: 24rpx;
          }
        }
      }
      .bottom{
        font-size: 24rpx;
        color: #333333;
        text{
          color: #29D3B4;
        }
      }

  }
}
  .bg_box{
    z-index: 1;
    width: 100%;
    height: 150rpx;
  }

  .bg_top{
    position: absolute;
    top: 0;
    background-color: #29D3B4;
  }
  .bg_bottom{
    top: 50%;
    position: absolute;
    background-color: #292929;
  }
}

.main_section{
  background: #292929 100%;
  padding: 0 24rpx;
  padding-top: 40rpx;
  padding-bottom: 150rpx;
  font-size: 24rpx;
  color: #333333;
  display: flex;
  flex-direction: column;
  gap: 22rpx;

  .section_box {
    background: #fff;
    border-radius: 16rpx;
    padding: 6rpx 24rpx;
    display: flex;
    flex-direction: column;
    .item{
      padding: 24rpx 78rpx;
      border-top: 1px solid #F2F2F2;
      font-size: 28rpx;
      display: flex;
      justify-content: space-between;
    }
    .item:nth-child(1){
      border-top: 0;
    }


  }

}


</style>