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
50591242c7
commit
3489e70f15
2 changed files with 123 additions and 228 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 349
      pages/coach/class/list.vue
  2. 2
      pages/coach/course/info.vue

349
pages/coach/class/list.vue
View File

@ -8,152 +8,89 @@
<view class="main_section"> <view class="main_section">
<view class="section_1"> <view class="section_1">
<view class="ul"> <fui-input class="input_item" borderTop placeholder="搜索"></fui-input>
<view class="li">
<text>周日</text>
<text>14</text>
<text></text>
</view>
<view class="li">
<text>周一</text>
<text>14</text>
<text></text>
</view>
<view class="li">
<text>周二</text>
<text>14</text>
<text></text>
</view>
<view class="li">
<text>周日</text>
<text class="today">今</text>
<text class=""></text>
</view>
<view class="li">
<text>周一</text>
<text>14</text>
<text class="select_plan"></text>
</view>
<view class="li">
<text>周二</text>
<text>14</text>
<text></text>
</view>
<view class="li">
<text>周二</text>
<text>14</text>
<text></text>
</view>
</view>
</view> </view>
<view class="section_2"> <view class="section_2">
<view class="item_box"> <view class="ul">
<fui-dropdown-menu :size="28" selectedColor="#465CFF" :options="options_course" @click="clickCourse" @close="show_course=false" ref="ref_course"> <view class="li">
<view class="fui-filter__item" @tap="filterTapCourse"> <view class="left">
<text>{{course_name}}</text> <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="fui-filter__icon" :class="{'fui-icon__ani':show_course}">
<fui-icon name="turningdown" :size="32" color="#FFF"></fui-icon>
</view> </view>
</view> <view class="right">
</fui-dropdown-menu> <view class="box_1">
</view> <view class="name">
<view class="item_box"> 少年班
<fui-dropdown-menu :size="28" selectedColor="#465CFF" :options="options_classroom" @click="clickClassroom" @close="show_classroom=false" ref="ref_classroom"> </view>
<view class="fui-filter__item" @tap="filterTapClassroom"> <view class="btn_box">
<text>{{classroom_name}}</text> <view>2人即将到期</view>
<view class="fui-filter__icon" :class="{'fui-icon__ani':show_classroom}"> </view>
<fui-icon name="turningdown" :size="32" color="#FFF"></fui-icon>
</view>
</view>
</fui-dropdown-menu>
</view>
</view>
<view class="section_3">
<view class="ul">
<view class="li" @click="openViewCourseInfo({id:1})">
<view class="top_box">
<view class="center_box">
<view>班级：少年班</view>
<view>时间：2020-05-25 15:30 - 17:30</view>
<view>课室：302室
</view>
<view>课程：篮球少儿课
</view> </view>
</view> <view class="box_2">
<view class="right_box"> <view class="user_list">
<view class="tag" style="background:#fad24e;">上课中</view> <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<!-- <view class="tag" style="background:#1cd188;">待上课</view>--> <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view> <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
<view class="bottom_box">
<view class="hint">
已签到学生 (15/34)
</view>
<view class="list_box">
<view class="list">
<view class="itme">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
<view class="itme">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
<view class="itme">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
<view class="itme">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view> </view>
</view> <view class="num">34</view>
<view class="btn">
详情
</view> </view>
</view> </view>
</view> </view>
</view> <view class="li">
<view class="li" @click="openViewCourseInfo({id:2})"> <view class="left">
<view class="top_box"> <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="center_box"> </view>
<view>班级：少年班</view> <view class="right">
<view>时间：2020-05-25 15:30 - 17:30</view> <view class="box_1">
<view>课室：302室 <view class="name">
少年班
</view>
<view class="btn_box">
<view>2人即将到期</view>
</view>
</view> </view>
<view>课程：篮球少儿课 <view class="box_2">
<view class="user_list">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
<view class="num">34</view>
</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 class="bottom_box"> <view class="li">
<view class="hint"> <view class="left">
已签到学生 (15/34) <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view> </view>
<view class="list_box"> <view class="right">
<view class="list"> <view class="box_1">
<view class="itme"> <view class="name">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> 少年班
</view> </view>
<view class="itme"> <view class="btn_box">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> <view>2人即将到期</view>
</view> </view>
<view class="itme"> </view>
<view class="box_2">
<view class="user_list">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
<view class="itme">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view> </view>
</view> <view class="num">34</view>
<view class="btn">
详情
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view>
</view> </view>
</view> </view>
@ -275,146 +212,104 @@ export default {
.main_section{ .main_section{
min-height: 100vh; min-height: 100vh;
background: #292929 100%; background: #292929 100%;
padding: 0 24rpx;
padding-top: 40rpx; padding-top: 40rpx;
padding-bottom: 150rpx; padding-bottom: 150rpx;
font-size: 24rpx; font-size: 24rpx;
color: #FFFFFF; color: #FFFFFF;
.section_1{ .section_1 {
background: #333333 100%; border-radius: 10rpx;
width: 100%; background-color: #525252;
padding: 30rpx 28rpx; ::v-deep .fui-input__wrap{
.ul{ border-radius: 10rpx !important;
display: flex; background-color: #525252 !important;
justify-content: space-between;
align-items: center;
.li{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10rpx;
text{
font-size: 24rpx;
color: #FFFFFF;
text-align: center;
}
text:nth-child(2){
width: 44rpx;
height: 44rpx;
}
text:nth-child(3){
width: 8rpx;
height: 8rpx;
}
.today{
border-radius: 50%;
background: #29D3B4;
text-align: center;
line-height: 42rpx;
}
.select_plan{
background: #F59A23;
border-radius: 50%;
}
}
} }
} ::v-deep .fui-input__background{
background-color: #525252 !important;
}
.input_item {
height: 60rpx;
::v-deep .uni-input-wrapper{
.uni-input-placeholder {
font-size: 28rpx !important;
}
.section_2{
margin-top: 30rpx;
padding: 0 20rpx ;
color: #fff;
display: flex;
align-items: center;
gap: 20rpx;
.item_box {
width: 45%;
.fui-filter__item {
display: flex;
} }
} }
::v-deep .uni-input-input {
color: #fff;
}
} }
.section_3{ .section_2{
margin-top: 36rpx; margin-top: 34rpx;
color: #fff;
font-size: 24rpx;
.ul{ .ul{
padding: 0 26rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 30rpx; gap: 24rpx;
.li{ .li{
position: relative; background: #404045;
border-radius: 22rpx; padding: 50rpx 36rpx 46rpx;
background: #434544 100%; border-radius: 16rpx;
padding: 14rpx 0;
display: flex; display: flex;
flex-direction: column; gap: 32rpx;
.top_box{ .left{
padding: 20rpx 30rpx; .pic{
.center_box{ border-radius: 50%;
display: flex; width: 92rpx;
flex-direction: column; height: 92rpx;
gap: 10rpx;
view{}
}
.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;
}
} }
} }
.bottom_box{ .right{
border-top: 1px dashed #F2F2F2; display: flex;
padding: 26rpx 16rpx 0 26rpx; flex-direction: column;
.hint{ gap: 28rpx;
color:#D7D7D7; .box_1{
display: flex;
align-items: center;
gap: 36rpx;
.name{
font-size: 28rpx;
}
.btn_box{
view{
border: 1px solid #FAD04D;
border-radius: 10rpx;
width: 182rpx;
height: 48rpx;
line-height: 42rpx;
text-align: center;
font-size: 26rpx;
color: #FAD04D;
}
}
} }
.list_box{ .box_2{
margin-top: 22rpx;
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
.list{ gap: 44rpx;
.user_list{
display: flex; display: flex;
align-items: center; align-items: center;
gap: 14rpx; gap: 14rpx;
.itme{ image{
image{ border-radius: 50%;
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
border-radius: 50%;
}
} }
} }
.btn{ .num{}
border: 1px solid #FAD04D;
border-radius: 10rpx;
background: #434544;
color: #FAD04D;
width: 110rpx;
height: 60rpx;
line-height: 55rpx;
text-align: center;
font-size: 24rpx;
}
} }
} }
} }
} }
} }
} }

2
pages/coach/course/info.vue
View File

@ -146,7 +146,7 @@ export default {
} }
</script> </script>
<style lang="less" scoped> <style lang="less" >
.main_box{ .main_box{
background: #292929 ; background: #292929 ;

Write Preview
Loading…
Cancel
Save