智慧教务系统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.
 
 
 
 
 

316 lines
8.7 KiB

<!--即将到期-->
<template>
<view class="main_box">
<!--自定义导航栏-->
<!-- <view class="navbar_section">-->
<!-- <view class="title">班级详情</view>-->
<!-- </view>-->
<view class="main_section">
<!-- 班级成员列表-->
<view class="section_4">
<view class="ul">
<view class="li" @click="openViewStudentInfo({id:1})">
<view class="left">
<view class="box_1">
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="tag_box">
即将到期
</view>
</view>
<view class="box_2">
<view class="name">黄明明</view>
<view class="date">课程截止时间2020.05:25</view>
</view>
</view>
<view class="right">
<view class="item">
<view>24</view>
<view>已上课时</view>
</view>
<view class="item">
<view>24</view>
<view>剩余课时</view>
</view>
</view>
</view>
<view class="li" @click="openViewStudentInfo({id:1})">
<view class="left">
<view class="box_1">
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="tag_box">
即将到期
</view>
</view>
<view class="box_2">
<view class="name">黄明明</view>
<view class="date">课程截止时间2020.05:25</view>
</view>
</view>
<view class="right">
<view class="item">
<view>24</view>
<view>已上课时</view>
</view>
<view class="item">
<view>24</view>
<view>剩余课时</view>
</view>
</view>
</view>
<view class="li" @click="openViewStudentInfo({id:1})">
<view class="left">
<view class="box_1">
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="tag_box">
即将到期
</view>
</view>
<view class="box_2">
<view class="name">黄明明</view>
<view class="date">课程截止时间2020.05:25</view>
</view>
</view>
<view class="right">
<view class="item">
<view>24</view>
<view>已上课时</view>
</view>
<view class="item">
<view>24</view>
<view>剩余课时</view>
</view>
</view>
</view>
<view class="li" @click="openViewStudentInfo({id:1})">
<view class="left">
<view class="box_1">
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="tag_box">
即将到期
</view>
</view>
<view class="box_2">
<view class="name">黄明明</view>
<view class="date">课程截止时间2020.05:25</view>
</view>
</view>
<view class="right">
<view class="item">
<view>24</view>
<view>已上课时</view>
</view>
<view class="item">
<view>24</view>
<view>剩余课时</view>
</view>
</view>
</view>
<view class="li" @click="openViewStudentInfo({id:1})">
<view class="left">
<view class="box_1">
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="tag_box">
即将到期
</view>
</view>
<view class="box_2">
<view class="name">黄明明</view>
<view class="date">课程截止时间2020.05:25</view>
</view>
</view>
<view class="right">
<view class="item">
<view>24</view>
<view>已上课时</view>
</view>
<view class="item">
<view>24</view>
<view>剩余课时</view>
</view>
</view>
</view>
<view class="li" @click="openViewStudentInfo({id:1})">
<view class="left">
<view class="box_1">
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<!-- <view class="tag_box">-->
<!-- 即将到期-->
<!-- </view>-->
</view>
<view class="box_2">
<view class="name">黄明明</view>
<view class="date">课程截止时间2020.05:25</view>
</view>
</view>
<view class="right">
<view class="item">
<view>24</view>
<view>已上课时</view>
</view>
<view class="item">
<view>24</view>
<view>剩余课时</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=作业任务
}
},
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'
})
},
}
}
</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_4{
.ul{
display: flex;
flex-direction: column;
gap: 10rpx;
.li{
padding: 20rpx 0;
padding-bottom: 40rpx;
border-bottom: 2px solid #D7D7D7;
display: flex;
justify-content: space-between;
.left{
display: flex;
align-items: center;
gap: 30rpx;
.box_1{
padding-left: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
.pic{
width: 84rpx;
height: 84rpx;
border-radius: 50%;
}
.tag_box{
position: absolute;
bottom: -30rpx;
width: 120rpx;
height: 38rpx;
background-color: #F59A23;
border-radius: 4rpx;
line-height: 35rpx;
text-align: center;
font-size: 20rpx;
}
}
.box_2{
display: flex;
flex-direction: column;
gap: 20rpx;
.name{
font-size: 28rpx;
}
.date{
font-size: 24rpx;
}
}
}
.right{
display: flex;
align-items: center;
gap: 14rpx;
.item{
border: 1px solid #00E5BB;
border-radius: 10rpx;
width: 102rpx;
display: flex;
flex-direction: column;
view{
text-align: center;
height: 50rpx;
line-height: 50rpx;
}
view:nth-child(1){
font-size: 32rpx;
background-color: #fff;
color: #00e5bb;
}
view:nth-child(2){
font-size: 20rpx;
background-color: #00e5bb;
}
}
}
}
}
}
}
</style>