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
74dce8c807
commit
dba5544557
1 changed files with 170 additions and 85 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. 255
      pages/coach/home/index.vue

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

@ -2,55 +2,58 @@
<view class="main_box"> <view class="main_box">
<!--自定义导航栏--> <!--自定义导航栏-->
<view class="navbar_section"> <view class="navbar_section">
<view class="title">首页</view> <view class="left"></view>
<view class="title">待办</view>
<view class="right">发布作业</view>
</view> </view>
<view class="main_section"> <view class="main_section">
<view class="section_1"> <!-- <view class="section_1">-->
<view class="top"> <!-- <view class="top">-->
<view class="user"> <!-- <view class="user">-->
<view class="pic"> <!-- <view class="pic">-->
<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 class="name">包子皮</view> <!-- <view class="name">包子皮</view>-->
</view> <!-- </view>-->
<view class="right"> <!-- <view class="right">-->
<view> <!-- <view>-->
<text class="title">到课率统计</text> <!-- <text class="title">到课率统计</text>-->
<text>28%</text> <!-- <text>28%</text>-->
</view> <!-- </view>-->
<view> <!-- <view>-->
<text class="title" @click="openObjAddView()">发布作业</text> <!-- <text class="title" @click="openObjAddView()">发布作业</text>-->
<text></text> <!-- <text></text>-->
</view> <!-- </view>-->
</view> <!-- </view>-->
</view> <!-- </view>-->
<view class="bottom"></view> <!-- <view class="bottom"></view>-->
<view class="text_box"> <!-- <view class="text_box">-->
<text>月授课数</text> <!-- <text>月授课数</text>-->
<text>12</text> <!-- <text>12</text>-->
<text>节，月负责学员</text> <!-- <text>节，月负责学员</text>-->
<text>188</text> <!-- <text>188</text>-->
<text>名</text> <!-- <text>名</text>-->
</view> <!-- </view>-->
</view> <!-- </view>-->
<view class="section_2"> <!-- <view class="section_2">-->
<view class="left_box"> <!-- <view class="left_box">-->
<view> <!-- <view>-->
<text>课程</text> <!-- <text>课程</text>-->
<text>预告</text> <!-- <text>预告</text>-->
</view> <!-- </view>-->
<view> <!-- <view>-->
<text>5/28周五 15:30~17:30</text> <!-- <text>5/28周五 15:30~17:30</text>-->
<text>301室篮球少儿课程</text> <!-- <text>301室篮球少儿课程</text>-->
</view> <!-- </view>-->
</view> <!-- </view>-->
<view class="rigth_box"> <!-- <view class="rigth_box">-->
<view>详情</view> <!-- <view>详情</view>-->
</view> <!-- </view>-->
</view> <!-- </view>-->
<!--最近课程-->
<view class="section_3"> <view class="section_3">
<view class="title_box"> <view class="title_box">
<view class="top_box"> <view class="top_box">
@ -60,58 +63,52 @@
<view class="line"></view> <view class="line"></view>
</view> </view>
<view class="ul"> <view class="ul">
<!-- 上课中-->
<view class="li"> <view class="li">
<view class="left_box"> <view class="top_box">
<view class="date_box"> <view class="title">课程：篮球少儿课</view>
<text>12</text> <view class="title">时间：2020-05-25 15:30 - 17:30</view>
<text>/</text> <view class="title">地点：xxx体育馆 302室</view>
<text>24</text>
</view>
<view class="ratio">
到课率：80%
</view>
</view> </view>
<view class="center_box"> <view class="botton_box">
<view>班级：少年班</view> <view class="box">
<view>时间：2020-05-25 15:30 - 17:30</view> <view>已签到学生（15/34）</view>
<view>课室：302室 <view>
查看
<fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
</view>
</view> </view>
<view>课程：篮球少儿课 <view class="box">
<view>尚未发布作业</view>
<view></view>
</view> </view>
</view> </view>
<view class="right_box">
<view class="tag" style="background:#fad24e;">上课中</view> <view class="tag" style="background:#fad24e;">上课中</view>
<!-- <view class="tag" style="background:#1cd188;">待上课</view>-->
</view>
</view> </view>
<!-- 待上课-->
<view class="li"> <view class="li">
<view class="left_box"> <view class="top_box">
<view class="date_box"> <view class="title">课程：篮球少儿课</view>
<text>12</text> <view class="title">时间：2020-05-25 15:30 - 17:30</view>
<text>/</text> <view class="title">地点：xxx体育馆 302室</view>
<text>24</text>
</view>
<view class="ratio">
到课率：80%
</view>
</view> </view>
<view class="center_box"> <view class="botton_box">
<view>班级：少年班</view> <view class="box">
<view>时间：2020-05-25 15:30 - 17:30</view> <view>应到学生（34）</view>
<view>课室：302室 <view>
</view> 查看
<view>课程：篮球少儿课 <fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
</view>
</view> </view>
</view> </view>
<view class="right_box">
<!-- <view class="tag" style="background:#fad24e;">上课中</view>--> <view class="tag" style="background:#1cd188;">待上课</view>
<view class="tag" style="background:#1cd188;">待上课</view>
</view>
</view> </view>
</view> </view>
</view> </view>
<view class="section_3"> <view class="section_4">
<view class="title_box"> <view class="title_box">
<view class="top_box"> <view class="top_box">
<text>作业批改</text> <text>作业批改</text>
@ -317,14 +314,28 @@ export default {
//自定义导航栏 //自定义导航栏
.navbar_section{ .navbar_section{
padding: 0 40rpx;
display: flex; display: flex;
justify-content: center; justify-content: space-between;
align-items: center; align-items: center;
background: #29d3b4; background: #29d3b4;
view{
width: 30%;
text-align: center;
}
.left{
text-align: left;
}
.title{ .title{
padding: 20rpx 0; padding: 20rpx 0;
font-size: 30rpx; font-size: 30rpx;
color: #315d55; color: #fff;
}
.right{
padding: 20rpx 0;
font-size: 26rpx;
color: #fff;
text-align: right;
} }
} }
@ -421,6 +432,80 @@ export default {
} }
.section_3{ .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{
border: 1px solid #00E5BB;
position: relative;
border-radius: 22rpx;
background: #434544 100%;
padding: 14rpx 20rpx;
padding-bottom: 44rpx;
display: flex;
flex-direction: column;
.top_box{
padding-bottom: 18rpx;
border-bottom: 1px dashed #F2F2F2;
display: flex;
flex-direction: column;
gap: 18rpx;
.title{}
}
.botton_box{
padding-top: 18rpx;
display: flex;
flex-direction: column;
gap: 18rpx;
color: #D7D7D7;
.box{
display: flex;
justify-content: space-between;
view{
display: flex;
align-items: center;
}
}
}
.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;
}
}
}
}
.section_4{
margin-top: 36rpx; margin-top: 36rpx;
color: #fff; color: #fff;
font-size: 24rpx; font-size: 24rpx;
@ -450,7 +535,7 @@ export default {
position: relative; position: relative;
border-radius: 22rpx; border-radius: 22rpx;
background: #434544 100%; background: #434544 100%;
padding: 14rpx 0; padding: 32rpx 0;
display: flex; display: flex;
align-items: center; align-items: center;
.left_box{ .left_box{

Write Preview
Loading…
Cancel
Save