智慧教务系统UniApp前端项目(使用中2025-0517)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

252 lines
6.8 KiB

<!--班级-列表-->
<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>