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

refactor(coach): 重构学员详情页面布局和样式 

- 更新了学员信息和课程信息的展示方式
- 重新设计了出勤记录和体测报告的界面
- 优化了页面的整体布局和颜色搭配
- 移除了冗余的代码和不必要的注释
master
liutong 1 year ago
parent
2b12cdf9b5
commit
a892c14cbb
1 changed files with 322 additions and 509 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. 831
      pages/coach/student/info.vue

831
pages/coach/student/info.vue
View File

@ -2,381 +2,170 @@
<template>
<view class="main_box">
<!--自定义导航栏-->
<view class="navbar_section">
<view class="title">学员详情</view>
<!-- <view class="navbar_section">-->
<!-- <view class="title">学员详情</view>-->
<!-- </view>-->
<!--学员信息-->
<view class="user_section">
<view class="box">
<vie class="left">
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="btn_box">
<view class="btn">即将到期</view>
</view>
</vie>
<vie class="right">
<veiw class="item">
<view class="name">黄明明</view>
<view class="age">
13岁
</view>
</veiw>
<view class="item">
<view class="title">家长姓名：黄大呢</view>
</view>
<view class="item">
<view class="title">家长电话：18888888888</view>
</view>
</vie>
</view>
</view>
<view class="main_section">
<view class="section_1">
<view class="left">
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="name">包皮子</view>
</view>
<view class="right">
<!--课程信息-->
<view class="course_section">
<view class="main">
<view class="course_box">
<view class="item">
班级：少年班
<view class="title">篮球少儿课程</view>
</view>
<view class="item">
地点：XXXX体育馆 302室
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="name">包子皮</view>
</view>
<view class="item">
课程：篮球少儿课
<view class="content">截止时间：2020.05:25</view>
</view>
<view class="item">
人数：30人
<view class="content">已上课时：24</view>
<view class="content">剩余课时：24</view>
</view>
<view class="item">
时间：2020.05:25 15:30 - 17:30
<view class="tag">
出勤高
</view>
</view>
</view>
<view class="section_2">
<view class="title_box">
<view>最近课程</view>
</view>
<view class="tag_list">
<view class="item" @click="openViewCourseInfo({id:1})">
<view class="title">
篮球少儿课
</view>
<view>
2020.05.30 15:30 - 17:30
</view>
</view>
<view class="item" @click="openViewCourseInfo({id:2})">
<view class="title">
篮球少儿课
</view>
<view>
2020.05.30 15:30 - 17:30
</view>
<view class="btn">
延课一周
</view>
</view>
</view>
<view class="bg_box bg_top"></view>
<view class="bg_box bg_bottom"></view>
</view>
<view class="section_3">
<view class="btn_box">
<view :class="['btn', tabType=='1'?'select':'']" @click="tabChange(1)">
班级成员(30)
</view>
<view :class="['btn', tabType=='2'?'select':'']" @click="tabChange(2)">
作业任务
</view>
<view class="main_section">
<view class="section_box">
<view class="tag_box">
<view :class="['item', tabType=='1' ? 'select':'']" @click="tabChange(1)">出勤记录</view>
<view :class="['item', tabType=='2' ? 'select':'']" @click="tabChange(2)">体侧报告</view>
</view>
</view>
<!-- 班级成员列表-->
<view class="section_4" v-if="tabType=='1'">
<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 v-if="tabType=='1'" class="section_1">
<view class="ul">
<view class="li">
<view class="left">
<view class="title">篮球少儿课</view>
<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
</view>
<view class="box_2">
<view class="name">黄明明</view>
<view class="date">课程截止时间：2020.05:25</view>
<view class="right">
<view v-if="Atype==1" class="btn" style="background-color: #29D3B4;">作业完成</view>
<view v-else class="btn" style="background-color: #E2E2E2;">作业未提交</view>
</view>
</view>
<view class="right">
<view class="item">
<view>24</view>
<view>已上课时</view>
<view class="li">
<view class="left">
<view class="title">篮球少儿课</view>
<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
</view>
<view class="item">
<view>24</view>
<view>剩余课时</view>
<view class="right">
<view v-if="Atype==1" class="btn" style="background-color: #29D3B4;">作业完成</view>
<view v-else class="btn" style="background-color: #E2E2E2;">作业未提交</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 class="section_5" v-if="tabType=='2'">
<view class="ul">
<view class="li">
<view class="left">
<view class="box_1">
<fui-circle
:percent="75"
:width="140"
:show="false"
color="#FFB703"
background="#e9e9e9"
foreground="#58a3f7"
gradient="#58a3f7"
:strokeWidth="4"
:size="16"
>
<!-- 自定义显示内容 -->
<template #default>
<view class="custom_content">
<text>12</text>
<text>/</text>
<text>34</text>
</view>
</template>
</fui-circle>
</view>
<view class="box_2">
完成率：80%
</view>
</view>
<view class="right">
<view class="box_1">
任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容
<view class="li">
<view class="left">
<view class="title">篮球少儿课</view>
<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
</view>
<view class="box_2">
<view class="date">发布时间：2021.05.25</view>
<view class="btn">详情</view>
<view class="right">
<view v-if="Atype==2" class="btn" style="background-color: #29D3B4;">作业完成</view>
<view v-else class="btn" style="background-color: #E2E2E2;">作业未提交</view>
</view>
</view>
</view>
<view class="li">
<view class="left">
<view class="box_1">
<fui-circle
:percent="75"
:width="140"
:show="false"
color="#FFB703"
background="#e9e9e9"
foreground="#58a3f7"
gradient="#58a3f7"
:strokeWidth="4"
:size="16"
>
<!-- 自定义显示内容 -->
<template #default>
<view class="custom_content">
<text>12</text>
<text>/</text>
<text>34</text>
</view>
</template>
</fui-circle>
</view>
<view class="box_2">
完成率：80%
<view class="li">
<view class="left">
<view class="title">篮球少儿课</view>
<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
</view>
<view class="right">
<view v-if="Atype==1" class="btn" style="background-color: #29D3B4;">作业完成</view>
<view v-else class="btn" style="background-color: #E2E2E2;">作业未提交</view>
</view>
</view>
</view>
</view>
<view v-if="tabType=='2'" class="section_2">
<view class="ul">
<view class="li">
<view class="top">
<view class="title">综合评分:96</view>
<view class="hint">打败了99%学员</view>
</view>
<view class="bottom">测试时间：2020.05.30</view>
</view>
<view class="right">
<view class="box_1">
任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容
</view>
<view class="box_2">
<view class="date">发布时间：2021.05.25</view>
<view class="btn">详情</view>
<view class="li">
<view class="top">
<view class="title">综合评分:96</view>
<view class="hint">打败了99%学员</view>
</view>
<view class="bottom">测试时间：2020.05.30</view>
</view>
</view>
<view class="li">
<view class="left">
<view class="box_1">
<fui-circle
:percent="75"
:width="140"
:show="false"
color="#FFB703"
background="#e9e9e9"
foreground="#58a3f7"
gradient="#58a3f7"
:strokeWidth="4"
:size="16"
>
<!-- 自定义显示内容 -->
<template #default>
<view class="custom_content">
<text>12</text>
<text>/</text>
<text>34</text>
</view>
</template>
</fui-circle>
</view>
<view class="box_2">
完成率：80%
<view class="li">
<view class="top">
<view class="title">综合评分:96</view>
<view class="hint">打败了99%学员</view>
</view>
<view class="bottom">测试时间：2020.05.30</view>
</view>
<view class="right">
<view class="box_1">
任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容
</view>
<view class="box_2">
<view class="date">发布时间：2021.05.25</view>
<view class="btn">详情</view>
<view class="li">
<view class="top">
<view class="title">综合评分:96</view>
<view class="hint">打败了99%学员</view>
</view>
<view class="bottom">测试时间：2020.05.30</view>
</view>
</view>
<view class="li">
<view class="left">
<view class="box_1">
<fui-circle
:percent="75"
:width="140"
:show="false"
color="#FFB703"
background="#e9e9e9"
foreground="#58a3f7"
gradient="#58a3f7"
:strokeWidth="4"
:size="16"
>
<!-- 自定义显示内容 -->
<template #default>
<view class="custom_content">
<text>12</text>
<text>/</text>
<text>34</text>
</view>
</template>
</fui-circle>
</view>
<view class="box_2">
完成率：80%
</view>
</view>
<view class="right">
<view class="box_1">
任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容
</view>
<view class="box_2">
<view class="date">发布时间：2021.05.25</view>
<view class="btn">详情</view>
<view class="li">
<view class="top">
<view class="title">综合评分:96</view>
<view class="hint">打败了99%学员</view>
</view>
<view class="bottom">测试时间：2020.05.30</view>
</view>
</view>
</view>
</view>
</view>
<!-- 底部导航-->
@ -397,6 +186,7 @@ export default {
return {
formData:{},
tabType:'1',//1=班级成员,2=作业任务
Atype:1,//1=作业完成,2=作业未提交
}
},
onLoad() {
@ -427,6 +217,7 @@ export default {
.main_box{
background: #292929 ;
min-height: 100vh;
}
//自定义导航栏
@ -442,243 +233,265 @@ export default {
}
}
.main_section{
min-height: 100vh;
background: #292929 100%;
padding: 0 24rpx;
padding-top: 40rpx;
padding-bottom: 150rpx;
font-size: 24rpx;
color: #FFFFFF;
.section_1 {
background: #333333;
border-radius: 16rpx;
padding: 34rpx 64rpx;
//学员信息
.user_section {
background-color: #29D3B4;
padding-top: 58rpx;
padding-bottom: 42rpx;
.box{
display: flex;
justify-content: center;
align-items: center;
gap: 38rpx;
gap: 15rpx;
.left{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 12rpx;
width: 120rpx;
.pic{
width: 92rpx;
height: 92rpx;
border-radius: 50%;
}
.btn_box{
position: absolute;
bottom: -18rpx;
.btn{
width: 120rpx;
height: 38rpx;
line-height: 40rpx;
border-radius: 4rpx;
background-color: rgba(245,154,35,1);
color: rgba(255,255,255,1);
font-size: 20rpx;
text-align: center;
border: 0rpx solid rgba(121,121,121,1);
}
}
}
.right{
display: flex;
flex-direction: column;
gap: 12rpx;
.item {}
gap: 18rpx;
.item{
color: #fff;
display: flex;
align-items: center;
.name{
font-size: 28rpx;
}
.age{
margin-left: 20rpx;
width: 128rpx;
height: 42rpx;
line-height: 42rpx;
border-radius: 34rpx;
background-color: rgba(255,255,255,1);
color: rgba(51,51,51,1);
font-size: 28rpx;
text-align: center;
}
}
}
}
}
.section_2{
margin-top: 42rpx;
.title_box{
font-size: 32rpx;
}
.tag_list{
margin-top: 26rpx;
//课程信息
.course_section{
position: relative;
.main{
position: relative;
z-index: 2;
padding: 0 24rpx;
display: flex;
justify-content: center;
.course_box{
padding: 42rpx 28rpx;
width: 692rpx;
border-radius: 20rpx;
background-color: #fff;
display: flex;
align-items: center;
gap: 26rpx;
.item{
padding-left: 20rpx;
width: 330rpx;
height: 162rpx;
border: 1px solid #00e5bb;
border-radius: 10rpx;
flex-direction: column;
gap: 20rpx;
position: relative;
.item {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10rpx;
align-items: center;
gap: 22rpx;
.title {
font-size: 28rpx;
color: #333333;
}
.pic {
width: 58rpx;
height: 58rpx;
border-radius: 50%;
}
.name {
color: #333333;
font-size: 24rpx;
}
.content {
color: #AAAAAA;
font-size: 24rpx;
}
}
}
.tag{
position: absolute;
right: 0;
top: 0;
width: 110rpx;
height: 60rpx;
line-height: 60rpx;
border-radius: 0rpx 24rpx 0rpx 24rpx;
background-color: rgba(236,128,141,1);
color: rgba(255,255,255,1);
font-size: 24rpx;
text-align: center;
}
.btn{
position: absolute;
right: 30rpx;
bottom: 50rpx;
width: 130rpx;
height: 48rpx;
line-height: 48rpx;
border-radius: 10rpx;
background-color: rgba(41,211,180,0);
color: rgba(50,219,224,1);
font-size: 24rpx;
text-align: center;
font-family: -regular;
border: 2rpx solid rgba(50,219,224,1);
}
}
}
.bg_box{
z-index: 1;
width: 100%;
height: 150rpx;
}
.bg_top{
position: absolute;
top: 0;
background-color: #29D3B4;
}
.bg_bottom{
top: 50%;
position: absolute;
background-color: #292929;
}
}
.main_section{
background: #292929 100%;
padding: 0 24rpx;
padding-top: 40rpx;
padding-bottom: 150rpx;
font-size: 24rpx;
color: #333333;
//按钮切换
.section_3{
margin-top: 54rpx;
.section_box {
background: #fff;
border-radius: 16rpx;
padding: 34rpx 24rpx;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
.btn_box{
border: 1px solid #d7d7d7;
border-radius: 25rpx;
width: 500rpx;
gap: 38rpx;
.tag_box{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
.btn{
width: 250rpx;
height: 76rpx;
line-height: 76rpx;
text-align: center;
color: #7F7F7F;
font-size: 26rpx;
gap: 112rpx;
.item{
width: 112rpx;
font-size: 28rpx;
}
.select{
color: #29D3B4;
background-color: #fff;
}
}
}
//班级成员列表
.section_4{
margin-top: 40rpx;
.ul{
display: flex;
flex-direction: column;
gap: 10rpx;
.li{
padding: 20rpx 0;
padding-bottom: 40rpx;
border-bottom: 2px solid #D7D7D7;
//出勤记录
.section_1{
width: 100%;
.ul{
display: flex;
justify-content: space-between;
.left{
flex-direction: column;
gap: 12rpx;
.li{
padding: 30rpx 20rpx;
border: 1px solid #29D3B4;
border-radius: 18rpx;
background-color: rgba(41,211,180,0.16);
font-size: 26rpx;
display: flex;
justify-content: space-between;
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{
.left{
display: flex;
flex-direction: column;
gap: 20rpx;
.name{
font-size: 28rpx;
}
.date{
font-size: 24rpx;
}
gap: 15rpx;
}
}
.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){
.right{
.btn{
width: 110rpx;
height: 44rpx;
line-height: 44rpx;
border-radius: 8rpx;
background-color: rgba(41,211,180,1);
color: rgba(255,255,255,1);
font-size: 20rpx;
background-color: #00e5bb;
text-align: center;
}
}
}
}
}
}
.section_5{
.ul{
.li{
padding-top: 32rpx;
padding-bottom: 36rpx;
border-bottom: 2px solid #D7D7D7;
//体测报告
.section_2{
width: 100%;
.ul{
display: flex;
justify-content: space-between;
.left{
display: flex;
flex-direction: column;
align-items: center;
gap: 12rpx;
.box_1{
.custom_content{
font-size: 32rpx;
color: #AAAAAA;
}
}
.box_2{
color: #AAAAAA;
font-size: 26rpx;
}
}
.right{
width: 510rpx;
flex-direction: column;
gap: 12rpx;
.li{
padding: 30rpx 20rpx;
border: 1px solid #29D3B4;
border-radius: 18rpx;
background-color: rgba(41,211,180,0.16);
font-size: 26rpx;
display: flex;
flex-direction: column;
gap: 16rpx;
.box_1{
color: #fff;
font-size: 28rpx;
}
.box_2{
gap: 20rpx;
.top{
display: flex;
align-items: center;
justify-content: space-between;
.date{
color: #AAAAAAFF;
font-size: 24rpx;
text-align: right;
gap: 40rpx;
.title{
font-size: 34rpx;
}
.btn{
width: 120rpx;
height: 48rpx;
line-height: 40rpx;
border-radius: 8rpx;
background-color: #FFFFFF00;
color: #FAD04DFF;
font-size: 26rpx;
text-align: center;
border: 2rpx solid #FAD04DFF;
.hint{
color: #F59A23;
font-size: 24rpx;
}
}
.bottom{}
}
}
}
}
}
}

Write Preview
Loading…
Cancel
Save