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 {
    .left{
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 12rpx;
      .pic{
        width: 100rpx;
      }
      .name{}
    }
    .right{}
  }
}


</style>