php
/
ZhiHuiJiaoWu_UniApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(coach): 教练首页新增功能模块 

- 添加用户信息和统计数据显示模块
- 新增课程预告和最近课程列表
- 增加作业批改功能和相关数据展示
- 优化页面布局和样式，增加底部导航组件
master
liutong 1 year ago
parent
3199720314
commit
137db1d01b
1 changed files with 322 additions and 12 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 328
      pages/coach/home/index.vue

328
pages/coach/home/index.vue
View File

@ -1,6 +1,25 @@
<template>
<view>
<view class="main_section">
<view class="section_1">
<view class="top">
<view class="user">
<view class="pic">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
<view class="name">包子皮</view>
</view>
<view class="right">
<view>
<text class="title">到课率统计</text>
<text>28%</text>
</view>
<view>
<text class="title">发布作业</text>
<text>28%</text>
</view>
</view>
</view>
<view class="bottom"></view>
<view class="text_box">
<text>月授课数</text>
<text>12</text>
@ -9,19 +28,152 @@
<text>名</text>
</view>
</view>
<view class="section_2"></view>
<view class="section_3"></view>
<view class="section_3"></view>
<view class="section_2">
<view class="left_box">
<view>
<text>课程</text>
<text>预告</text>
</view>
<view>
<text>5/28周五 15:30~17:30</text>
<text>301室篮球少儿课程</text>
</view>
</view>
<view class="rigth_box">
<view>详情</view>
</view>
</view>
<view class="section_3">
<view class="title_box">
<view class="top_box">
<text>最近课程</text>
<view></view>
</view>
<view class="line"></view>
</view>
<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 class="section_3">
<view class="title_box">
<view class="top_box">
<text>作业批改</text>
<view>全部</view>
</view>
<view class="line"></view>
</view>
<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>课程：篮球少儿课
</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>课程：篮球少儿课
</view>
</view>
<view class="right_box">
<!-- <view class="tag" style="background:#fad24e;">上课中</view>-->
<view class="tag" style="background:#1cd188;">待批改</view>
</view>
</view>
</view>
</view>
<!-- 底部导航-->
<AQTabber/>
</view>
</template>
<script>
import user from '@/api/user.js';
import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
import AQTabber from "@/components/AQ/AQTabber.vue"
export default {
components: {
fuiIcon
AQTabber,
},
data() {
return {
@ -135,14 +287,172 @@ export default {
<style lang="less" scoped>
.main_section{
min-height: 100vh;
background: #292929 100%;
padding: 0 24rpx;
padding-top: 20rpx;
padding-bottom: 150rpx;
font-size: 28rpx;
.section_1{
border: 1px solid red;
width: 700rpx;
background: #FFFFFF 100%;
height: 264rpx;
border-radius: 14rpx;
.text_box{
margin: 28rpx auto;
padding: 28rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 28rpx;
.top{
display: flex;
justify-content: space-between;
align-items: center;
.user{
display: flex;
align-items: center;
gap: 20rpx;
.pic{
width: 144rpx;
height: 144rpx;
border-radius: 50%;
image{
width: 100%;
height: 100%;
}
}
}
.right{
display: flex;
flex-direction: column;
gap: 20rpx;
view{
display: flex;
gap: 10rpx;
.title{
width: 148rpx;
text-align: right;
}
}
}
}
.bottom{
padding: 0 44rpx;
}
}
.section_2{
border-radius: 60rpx;
padding: 28rpx 36rpx;
background: #29D3B4 100%;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
.left_box{
display: flex;
view{
display: flex;
flex-direction: column;
text{}
}
view:nth-child(1){
padding-right: 10rpx;
border-right: 2px solid #fff;
}
view:nth-child(2){
padding-left: 10rpx;
}
}
.rigth_box{
view{
width: 106rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
border-radius: 25rpx;
background: #32baa1;
font-size: 24rpx;
}
}
}
.section_3{
margin-top: 36rpx;
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>
Write Preview
Loading…
Cancel
Save