php
/
ZhiHuiJiaoWu_UniApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
智慧教务系统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.
162 Commits
1 Branch
0 Tags
9.2 MiB
 
 
 
 
 
Tree: e18933aec8
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'e18933aec8'
${ noResults }
ZhiHuiJiaoWu_UniApp/pages/coach/course/info_list.vue

484 lines
14 KiB
Raw Blame History

<!--课程-详情列表-->
<template>
<view class="main_box">
<view class="main_section">
<view class="section_1">
<view class="title">班级：少年班</view>
<view class="title">时间：2025-05-25 15:30 - 17:30</view>
<view class="title">地点：xxx体育馆302室</view>
<view class="title">课程：篮球少儿课</view>
<view class="title">教练：张全蛋</view>
<view class="title">人数：30</view>
<view class="tag" style="background-color: #FAD24E;">上课中</view>
</view>
<view class="section_2">
<view :class="['table', tableType==1 ? 'select':'']" @click="switchTag(1)">签到情况</view>
<view :class="['table', tableType==2 ? 'select':'']" @click="switchTag(2)">作业情况</view>
</view>
<!--签到情况-->
<view class="section_3" v-if="tableType == 1">
<view class="item">
<view class="left">
<image class="pic" model="aspectFit" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="box">
<view class="title">黄明明</view>
<view class="title">课程截止时间：2025-05-25</view>
</view>
</view>
<view class="right">
<view class="tag">请假</view>
</view>
</view>
<view class="item">
<view class="left">
<image class="pic" model="aspectFit" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="box">
<view class="title">黄明明</view>
<view class="title">课程截止时间：2025-05-25</view>
</view>
</view>
<view class="right">
<view class="tag">请假</view>
</view>
</view>
<view class="item">
<view class="left">
<image class="pic" model="aspectFit" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="box">
<view class="title">黄明明</view>
<view class="title">课程截止时间：2025-05-25</view>
</view>
</view>
<view class="right">
<view class="tag">请假</view>
</view>
</view>
</view>
<!--作业情况-->
<view class="section_4" v-if="tableType == 2">
<view class="item_box">
<fui-collapse-item @change="changeCollapse(1)" open="true" isBorder="false" contentBg="#434544">
<view class="title_box">
<text>待批改（2）</text>
</view>
<template v-slot:content>
<view class="ul">
<view class="li">
<view class="left">
<image class="pic" model="aspectFit" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="box">
<view class="title">黄明明</view>
<view class="title">课程截止时间：2025-05-25</view>
</view>
</view>
<view class="right">
<view class="btn">查看并批改</view>
</view>
</view>
<view class="li">
<view class="left">
<image class="pic" model="aspectFit" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="box">
<view class="title">黄明明</view>
<view class="title">课程截止时间：2025-05-25</view>
</view>
</view>
<view class="right">
<view class="btn">查看并批改</view>
</view>
</view>
<view class="li">
<view class="left">
<image class="pic" model="aspectFit" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="box">
<view class="title">黄明明</view>
<view class="title">课程截止时间：2025-05-25</view>
</view>
</view>
<view class="right">
<view class="btn">查看并批改</view>
</view>
</view>
</view>
</template>
</fui-collapse-item>
</view>
<view class="item_box">
<fui-collapse-item @change="changeCollapse(2)" isBorder="false" contentBg="#434544">
<view class="title_box">
<text>待批改（2）</text>
</view>
<template v-slot:content>
<view class="ul">
<view class="li">
<view class="left">
<image class="pic" model="aspectFit" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="box">
<view class="title">黄明明</view>
<view class="title">课程截止时间：2025-05-25</view>
</view>
</view>
<view class="right">
<view class="btn">查看并批改</view>
</view>
</view>
<view class="li">
<view class="left">
<image class="pic" model="aspectFit" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="box">
<view class="title">黄明明</view>
<view class="title">课程截止时间：2025-05-25</view>
</view>
</view>
<view class="right">
<view class="btn">查看并批改</view>
</view>
</view>
<view class="li">
<view class="left">
<image class="pic" model="aspectFit" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="box">
<view class="title">黄明明</view>
<view class="title">课程截止时间：2025-05-25</view>
</view>
</view>
<view class="right">
<view class="btn">查看并批改</view>
</view>
</view>
</view>
</template>
</fui-collapse-item>
</view>
<view class="item_box">
<fui-collapse-item @change="changeCollapse(3)" isBorder="false" contentBg="#434544">
<view class="title_box">
<text>待批改（2）</text>
</view>
<template v-slot:content>
<view class="ul">
<view class="li">
<view class="left">
<image class="pic" model="aspectFit" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="box">
<view class="title">黄明明</view>
<view class="title">课程截止时间：2025-05-25</view>
</view>
</view>
<view class="right">
<view class="btn">查看并批改</view>
</view>
</view>
<view class="li">
<view class="left">
<image class="pic" model="aspectFit" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="box">
<view class="title">黄明明</view>
<view class="title">课程截止时间：2025-05-25</view>
</view>
</view>
<view class="right">
<view class="btn">查看并批改</view>
</view>
</view>
<view class="li">
<view class="left">
<image class="pic" model="aspectFit" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="box">
<view class="title">黄明明</view>
<view class="title">课程截止时间：2025-05-25</view>
</view>
</view>
<view class="right">
<view class="btn">查看并批改</view>
</view>
</view>
</view>
</template>
</fui-collapse-item>
</view>
</view>
</view>
</view>
</template>
<script>
// import user from '@/api/user.js';
import AQTabber from "@/components/AQ/AQTabber.vue"
export default {
components: {
AQTabber,
},
data() {
return {
tableType: 1,//1=签到情况，2=作业情况
tableList_1:[],//1=签到情况列表
tableList_2:[],//2=作业情况列表
}
},
onLoad() {
},
methods: {
//切换标签
switchTag(type) {
this.tableType = type
},
//打开课时详情页
openViewCourseInfo(item){
uni.navigateTo({
url: '/pages/coach/course/info'
})
},
// 作业情况
changeCollapse(type){
},
}
}
</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: 30rpx 24rpx;
padding-top: 40rpx;
padding-bottom: 150rpx;
font-size: 24rpx;
color: #FFFFFF;
.section_1{
position: relative;
padding: 18rpx 34rpx 50rpx;
display: flex;
flex-direction: column;
gap: 15rpx;
color: #fff;
font-size: 24rpx;
background-color: #434544;
border-radius: 22rpx;
.tag{
position: absolute;
top: 0;
right: 0;
width: 110rpx;
height: 60rpx;
line-height: 55rpx;
border-radius: 0rpx 24rpx 0rpx 24rpx;
color: #fff;
font-size: 24rpx;
text-align: center;
}
}
.section_2{
margin-top: 44rpx;
color: #fff;
font-size: 30rpx;
display: flex;
justify-content: center;
align-items: center;
.table{
width: 50%;
height: 64rpx;
background-color: #1684FCFF;
line-height: 62rpx;
text-align: center;
}
.table:nth-child(1){
border-top-left-radius: 8rpx;
border-bottom-left-radius: 8rpx;
}
.table:nth-child(2){
border-top-right-radius: 8rpx;
border-bottom-right-radius: 8rpx;
}
.select{
background-color: #fff;
color: #1684FCFF;
}
}
.section_3{
margin-top: 44rpx;
padding: 30rpx 0;
border-radius: 22rpx;
background-color: #434544;
display: flex;
flex-direction: column;
.item{
border-top: 1px solid #D7D7D7;
padding: 20rpx 33rpx 20rpx 14rpx;
display: flex;
justify-content: space-between;
align-items: center;
.left{
width: 80%;
display: flex;
align-items: center;
gap: 26rpx;
.pic{
width: 92rpx;
height: 92rpx;
border-radius: 50%;
background-color: #797979FF;
}
.box{
display: flex;
flex-direction: column;
gap: 10rpx;
.title{
color: #fff;
font-size: 24rpx;
}
}
}
.right{
.tag{
width: 93rpx;
height: 93rpx;
border-radius: 50%;
line-height: 90rpx;
font-size: 26rpx;
background-color: rgba(254,250,131,0.62);
color: rgba(255,255,255,1);
text-align: center;
border: 0rpx solid rgba(254,250,131,0.62);
//旋转45°
transform: rotate(-30deg);
}
}
}
.item:nth-child(1){
border-top: 0px;
}
}
.section_4{
margin-top: 44rpx;
padding: 30rpx 0;
border-radius: 22rpx;
background-color: #434544;
display: flex;
flex-direction: column;
.item_box{
margin-bottom: 30rpx;
padding-left: 24rpx;
padding-right: 32rpx;
font-size: 28rpx;
color: #fff;
background-color: #434544;
::v-deep .fui-collapse-item__title{
background-color: #434544 !important;
}
::v-deep .fui-collapse__border-color{
border-top: none !important; /* 取消上边框 */
background: #434544 !important;
}
.title_box{
}
.ul{
background-color: #434544;
.li{
background-color: #434544;
border-top: 1px solid #D7D7D7;
padding: 20rpx 33rpx 20rpx 14rpx;
display: flex;
justify-content: space-between;
align-items: center;
.left{
width: 80%;
display: flex;
align-items: center;
gap: 26rpx;
.pic{
width: 92rpx;
height: 92rpx;
border-radius: 50%;
background-color: #797979FF;
}
.box{
display: flex;
flex-direction: column;
gap: 10rpx;
.title{
color: #fff;
font-size: 24rpx;
}
}
}
.right{
.btn{
background-color: #a4adb3;
color: #fff;
width: 160rpx;
height: 60rpx;
line-height: 60rpx;
border-radius: 8rpx;
background-color: rgba(164,173,179,1);
color: rgba(255,255,255,1);
font-size: 24rpx;
text-align: center;
}
}
}
.li:nth-child(1){
border-top: none !important; /* 取消上边框 */
}
}
}
}
}
</style>