ZhiHuiJiaoWu_UniApp/pages/coach/class/list.vue

<!--班级-列表-->
<template>
  <view class="main_box">
    <!--自定义导航栏-->
    <view class="navbar_section">
      <view class="title">班级</view>
    </view>

    <view class="main_section">
      <view class="section_1">
        <fui-input class="input_item" borderTop placeholder="搜索"></fui-input>
      </view>

      <view class="section_2">
        <view class="ul">
          <view class="li" @click="openViewClassInfo({id:1})">
            <view class="left">
              <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
            </view>
            <view class="right">
              <view class="box_1">
                <view class="name">
                  少年班
                </view>
                <view class="btn_box">
                  <view>2人即将到期</view>
                </view>
              </view>
              <view class="box_2">
                <view class="user_list">
                  <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                </view>
                <view class="num">34</view>
              </view>
            </view>
          </view>
          <view class="li" @click="openViewClassInfo({id:2})">
            <view class="left">
              <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
            </view>
            <view class="right">
              <view class="box_1">
                <view class="name">
                  少年班
                </view>
                <view class="btn_box">
                  <view>2人即将到期</view>
                </view>
              </view>
              <view class="box_2">
                <view class="user_list">
                  <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                </view>
                <view class="num">34</view>
              </view>
            </view>
          </view>
          <view class="li" @click="openViewClassInfo({id:3})">
            <view class="left">
              <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
            </view>
            <view class="right">
              <view class="box_1">
                <view class="name">
                  少年班
                </view>
                <view class="btn_box">
<!--                  <view>2人即将到期</view>-->
                </view>
              </view>
              <view class="box_2">
                <view class="user_list">
                  <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                </view>
                <view class="num">34</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:{},
    }
  },
  onLoad() {
  },
  methods: {
    //打开班级详情页
    openViewClassInfo(item){
      uni.navigateTo({
        url: '/pages/coach/class/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: 0 24rpx;
  padding-top: 40rpx;
  padding-bottom: 150rpx;
  font-size: 24rpx;
  color: #FFFFFF;

  .section_1 {
    border-radius: 10rpx;
    background-color: #525252;
    ::v-deep .fui-input__wrap{
      border-radius: 10rpx !important;
      background-color: #525252 !important;
    }
    ::v-deep .fui-input__background{
      background-color: #525252 !important;
    }
    .input_item {
      height: 60rpx;
      ::v-deep .uni-input-wrapper{
        .uni-input-placeholder {
          font-size: 28rpx !important;

        }

      }
    }
    ::v-deep .uni-input-input {
      color: #fff;
    }
  }

  .section_2{
    margin-top: 34rpx;
    .ul{
      display: flex;
      flex-direction: column;
      gap: 24rpx;
      .li{
        background: #404045;
        padding: 50rpx 36rpx 46rpx;
        border-radius: 16rpx;
        display: flex;
        gap: 32rpx;
        .left{
          .pic{
            border-radius: 50%;
            width: 92rpx;
            height: 92rpx;
          }
        }
        .right{
          display: flex;
          flex-direction: column;
          gap: 28rpx;
          .box_1{
            display: flex;
            align-items: center;
            gap: 36rpx;
            .name{
              font-size: 28rpx;
            }
            .btn_box{
              view{
                border: 1px solid #FAD04D;
                border-radius: 10rpx;
                width: 182rpx;
                height: 48rpx;
                line-height: 42rpx;
                text-align: center;
                font-size: 26rpx;
                color: #FAD04D;
              }
            }
          }
          .box_2{
            display: flex;
            align-items: center;
            gap: 44rpx;
            .user_list{
              display: flex;
              align-items: center;
              gap: 14rpx;
              image{
                border-radius: 50%;
                width: 48rpx;
                height: 48rpx;
              }
            }
            .num{}
          }

        }
      }
    }
  }



}


</style>