5 changed files with 272 additions and 39 deletions
@ -0,0 +1,256 @@ |
|||
<!--到课统计-详情--> |
|||
<template> |
|||
<view class="main_box"> |
|||
|
|||
<view class="main_section"> |
|||
<view class="section_3"> |
|||
<view class="ul"> |
|||
<view class="li"> |
|||
<view class="left_box"> |
|||
<view class="date_box"> |
|||
<text>12</text> |
|||
<text>/</text> |
|||
<text>24</text> |
|||
</view> |
|||
<view class="ratio"> |
|||
到课率：80% |
|||
</view> |
|||
</view> |
|||
<view class="center_box"> |
|||
<view>班级：少年班</view> |
|||
<view>时间：2020-05-25 15:30 - 17:30</view> |
|||
<view>课室：302室 |
|||
</view> |
|||
<view>课程：篮球少儿课 |
|||
</view> |
|||
</view> |
|||
<view class="right_box"> |
|||
<view class="tag" style="background:#fad24e;">上课中</view> |
|||
<!-- <view class="tag" style="background:#1cd188;">待上课</view>--> |
|||
</view> |
|||
</view> |
|||
<view class="li"> |
|||
<view class="left_box"> |
|||
<view class="date_box"> |
|||
<text>12</text> |
|||
<text>/</text> |
|||
<text>24</text> |
|||
</view> |
|||
<view class="ratio"> |
|||
到课率：80% |
|||
</view> |
|||
</view> |
|||
<view class="center_box"> |
|||
<view>班级：少年班</view> |
|||
<view>时间：2020-05-25 15:30 - 17:30</view> |
|||
<view>课室：302室 |
|||
</view> |
|||
<view>课程：篮球少儿课 |
|||
</view> |
|||
</view> |
|||
<view class="right_box"> |
|||
<!-- <view class="tag" style="background:#fad24e;">上课中</view>--> |
|||
<view class="tag" style="background:#1cd188;">待上课</view> |
|||
</view> |
|||
</view> |
|||
</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 { |
|||
formData:{}, |
|||
|
|||
//课程下拉菜单相关 |
|||
show_course:false,//是否显示下拉菜单 |
|||
//课程下拉菜单 |
|||
course_name:'课程',//选中的下拉菜单名称 |
|||
options_course: [ |
|||
{ |
|||
text: '请选择课程', |
|||
value: '', |
|||
checked: true |
|||
}, { |
|||
text: '羽毛球课程1', |
|||
value: '1' |
|||
}, { |
|||
text: '篮球课程2', |
|||
value: '2' |
|||
} |
|||
], |
|||
|
|||
//课室下拉菜单相关 |
|||
show_classroom:false,//是否显示下拉菜单 |
|||
//课程下拉菜单 |
|||
classroom_name:'课室',//选中的下拉菜单名称 |
|||
options_classroom: [ |
|||
{ |
|||
text: '请选择课室', |
|||
value: '', |
|||
checked: true |
|||
}, { |
|||
text: '羽毛球201', |
|||
value: '1' |
|||
}, { |
|||
text: '篮球室101', |
|||
value: '2' |
|||
} |
|||
], |
|||
} |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
methods: { |
|||
//选中课程下拉菜单点击事件 |
|||
clickCourse(e){ |
|||
console.log(e) |
|||
this.course_name = e.text |
|||
this.show_course = true |
|||
}, |
|||
//显示下拉菜单 |
|||
filterTapCourse() { |
|||
//显示下拉框 |
|||
this.$refs.ref_course.show() |
|||
this.show_course = true; |
|||
}, |
|||
|
|||
|
|||
|
|||
//选中课室 |
|||
clickClassroom(e){ |
|||
console.log(e) |
|||
this.classroom_name = e.text |
|||
this.show_classroom = true |
|||
}, |
|||
//显示课室下拉菜单 |
|||
filterTapClassroom() { |
|||
//显示下拉框 |
|||
this.$refs.ref_classroom.show() |
|||
this.show_classroom = true; |
|||
}, |
|||
|
|||
//打开课时详情页 |
|||
openViewCourseInfo(item){ |
|||
uni.navigateTo({ |
|||
url: '/pages/coach/course/info' |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
|
|||
.main_box{ |
|||
background: #292929 ; |
|||
} |
|||
|
|||
//自定义导航栏 |
|||
.navbar_section{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #29d3b4; |
|||
.title{ |
|||
padding: 20rpx 0; |
|||
font-size: 30rpx; |
|||
color: #315d55; |
|||
} |
|||
} |
|||
|
|||
.main_section{ |
|||
min-height: 100vh; |
|||
background: #292929 100%; |
|||
padding: 0 24rpx; |
|||
padding-top: 32rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 28rpx; |
|||
.section_3{ |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
.title_box{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
.top_box{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
text{ |
|||
font-size: 30rpx; |
|||
} |
|||
} |
|||
.line{ |
|||
width: 90rpx; |
|||
height: 2px; |
|||
background: #29D3B4; |
|||
} |
|||
} |
|||
.ul{ |
|||
margin-top: 30rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
.li{ |
|||
position: relative; |
|||
border-radius: 22rpx; |
|||
background: #434544 100%; |
|||
padding: 14rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
.left_box{ |
|||
margin-left: 28rpx; |
|||
width: 146rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 10rpx; |
|||
.date_box{ |
|||
display: flex; |
|||
font-size: 48rpx; |
|||
text:nth-child(1){ |
|||
color: #29D3B4; |
|||
} |
|||
} |
|||
.ratio{ |
|||
color: #AAAAAA; |
|||
} |
|||
} |
|||
.center_box{ |
|||
margin-left: 52rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 10rpx; |
|||
} |
|||
.right_box{ |
|||
.tag{ |
|||
position:absolute; |
|||
top: 0rpx; |
|||
right: 0rpx; |
|||
padding: 10rpx; |
|||
width: 102rpx; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
border-bottom-left-radius: 20rpx; |
|||
border-top-right-radius: 20rpx; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
</style> |
|||
Loading…
Reference in new issue