10 changed files with 792 additions and 28 deletions
-
26src/App.vue
-
30src/pages.json
-
8src/pages/course/list/list.vue
-
41src/pages/course/roll_call/roll_call.vue
-
70src/pages/course/student_list/student_list.vue
-
27src/pages/course/student_review/student_review.vue
-
99src/pages/course/task/task.vue
-
142src/pages/course/task_finish/task_finish.vue
-
208src/pages/course/task_info/task_info.vue
-
169src/pages/course/task_publish/task_publish.vue
@ -0,0 +1,99 @@ |
|||
<template> |
|||
<view class="course-task fixed-bot-padding"> |
|||
<picker> |
|||
<view class="top-bar"><text>12</text></view> |
|||
</picker> |
|||
<view class="ct-list"> |
|||
<view class="cl-item" v-for="i in 10" :key="i"> |
|||
<view class="ci-date"> |
|||
<view>2020/09/08</view> |
|||
<view>完成情况:5/20</view> |
|||
</view> |
|||
<view class="ci-content"> |
|||
<text>作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作…</text> |
|||
</view> |
|||
<view class="cc-unfold"> |
|||
<text>展开</text> |
|||
<image></image> |
|||
</view> |
|||
<view class="cc-btn" hover-class="hover-active">完成列表</view> |
|||
</view> |
|||
</view> |
|||
<view class="fixed-bot-btn"><view hover-class="hover-active">布置作业</view></view> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.course-task{ |
|||
|
|||
} |
|||
.ct-list{ |
|||
padding: 24upx; |
|||
.cl-item{ |
|||
margin-bottom: 24upx; |
|||
padding: 30upx 30upx 50upx; |
|||
border-radius: 10upx; |
|||
background-color: #fff; |
|||
font-size: 0; |
|||
.ci-date{ |
|||
margin-bottom: 40upx; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
font-size: 32upx; |
|||
line-height: 44upx; |
|||
color: #333; |
|||
max-width: 50%; |
|||
@include textHide(1); |
|||
&:first-child{ |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
} |
|||
.ci-content{ |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
color: #9a9a9d; |
|||
@include textHide(3); |
|||
} |
|||
.cc-unfold{ |
|||
margin-bottom: 34upx; |
|||
font-size: 28upx; |
|||
color: $themeColor; |
|||
line-height: 40upx; |
|||
@include centerFlex(flex-end); |
|||
>image{ |
|||
margin-left: 10upx; |
|||
width: 24upx; |
|||
height: 24upx; |
|||
background-color: skyblue; |
|||
} |
|||
} |
|||
.cc-btn{ |
|||
float: right; |
|||
display: inline-block; |
|||
padding: 0 18upx; |
|||
height: 64upx; |
|||
line-height: 64upx; |
|||
border-radius: 32upx; |
|||
text-align: center; |
|||
font-size: 28upx; |
|||
color: #fff; |
|||
background-color: $themeColor; |
|||
|
|||
} |
|||
&::after{ |
|||
content: ''; |
|||
display: block; |
|||
clear: both; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,142 @@ |
|||
<template> |
|||
<view class="course-task-finish fixed-bot-padding"> |
|||
<picker> |
|||
<view class="top-bar"><text>12</text></view> |
|||
</picker> |
|||
<view class="ctf-time"> |
|||
<picker class="ct-picker"> |
|||
<view class="cp-con"> |
|||
<input disabled value="2020年12月27日" /> |
|||
<image></image> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
<view class="ctf-list"> |
|||
<view class="cl-item" v-for="i in 10" :key="i"> |
|||
<view class="ci-time">10:18</view> |
|||
<view class="ci-content"> |
|||
<view class="cc-user"> |
|||
<image class="u-avatar"></image> |
|||
<view class="u-name">Adjoin</view> |
|||
<image class="u-icon"></image> |
|||
</view> |
|||
<view class="cc-status"> |
|||
<view :class="[i == 2?'active':'']">已完成</view> |
|||
<image></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="fixed-bot-btn"><view hover-class="hover-active">批量提醒完成</view></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~style/public.scss"; |
|||
.course-task-finish{ |
|||
|
|||
} |
|||
.ctf-time{ |
|||
padding-top: 4upx; |
|||
padding-left: 20upx; |
|||
height: 96upx; |
|||
background-color: #fff; |
|||
.ct-picker{ |
|||
padding: 0; |
|||
width: 312upx; |
|||
border-radius: 10upx; |
|||
border: 2upx solid #D8D8D8; |
|||
background-color: #F2F2F7; |
|||
.cp-con{ |
|||
padding: 0 20upx; |
|||
height: 68upx; |
|||
@include centerFlex(space-between); |
|||
>input{ |
|||
flex-grow: 1; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
} |
|||
>image{ |
|||
flex-shrink: 0; |
|||
width: 28upx; |
|||
height: 28upx; |
|||
background-color: skyblue; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.ctf-list{ |
|||
padding: 24upx; |
|||
.cl-item{ |
|||
margin-bottom: 24upx; |
|||
padding: 20upx 24upx 44upx; |
|||
border-radius: 10upx; |
|||
background-color: #fff; |
|||
.ci-time{ |
|||
text-align: right; |
|||
font-size: 32upx; |
|||
line-height: 44upx; |
|||
color: #9a9a9d; |
|||
} |
|||
.ci-content{ |
|||
@include centerFlex(space-between); |
|||
.cc-user{ |
|||
@include centerFlex(space-between); |
|||
.u-avatar{ |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
margin-right: 20upx; |
|||
width: 116upx; |
|||
height: 116upx; |
|||
border-radius: 50%; |
|||
background-color: skyblue; |
|||
} |
|||
.u-name{ |
|||
line-height: 44upx; |
|||
font-weight: 500; |
|||
font-size: 32upx; |
|||
color: #333; |
|||
@include textHide(1); |
|||
} |
|||
.u-icon{ |
|||
margin-left: 12upx; |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
width: 36upx; |
|||
height: 36upx; |
|||
background-color: skyblue; |
|||
} |
|||
} |
|||
.cc-status{ |
|||
flex-shrink: 0; |
|||
margin-left: 20upx; |
|||
max-width: 30%; |
|||
@include centerFlex(flex-end); |
|||
>view{ |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: $themeColor; |
|||
@include textHide(1); |
|||
&.active{ |
|||
color: #FF4444; |
|||
} |
|||
} |
|||
>image{ |
|||
flex-shrink: 0; |
|||
margin-left: 16upx; |
|||
width: 32upx; |
|||
height: 32upx; |
|||
background-color: skyblue; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,208 @@ |
|||
<template> |
|||
<view class="task-info"> |
|||
<block> |
|||
<view class="i-header"> |
|||
<picker> |
|||
<view class="top-bar"><text>12</text></view> |
|||
</picker> |
|||
<picker class="select-picker"> |
|||
<view> |
|||
<input disabled value="小小李木子" /> |
|||
<image></image> |
|||
</view> |
|||
</picker> |
|||
|
|||
</view> |
|||
<view class="i-user"> |
|||
<image></image> |
|||
<view> |
|||
<text>学员姓名:</text>小李张净水器净 |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<view class="ti-section"> |
|||
<block v-if="false"> |
|||
<view class="s-name"> |
|||
<view>羽毛球课包学会(带体验课)</view> |
|||
<view>一班</view> |
|||
</view> |
|||
<view class="s-user"> |
|||
<view>学员名称:</view> |
|||
<picker class="select-picker"> |
|||
<view> |
|||
<input disabled value="小小李木子" /> |
|||
<image></image> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
</block> |
|||
|
|||
<view class="s-detail"> |
|||
<view>完成情况</view> |
|||
<view>作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容村上春树吃餐……</view> |
|||
</view> |
|||
<view class="s-addr"> |
|||
<view>视频链接：</view> |
|||
<view>htttp//ksjksjksj.cocfcwqcwq</view> |
|||
<view>复制</view> |
|||
</view> |
|||
<view class="s-imgs"> |
|||
<image v-for="i in 5" :key="i"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.ti-section{ |
|||
padding: 0 24upx 26upx; |
|||
background-color: #fff; |
|||
|
|||
.s-name{ |
|||
height: 128upx; |
|||
border-bottom: 2upx solid #D8D8D8; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
line-height: 44upx; |
|||
font-size: 32upx; |
|||
color: #333; |
|||
@include textHide(1); |
|||
&+view{ |
|||
margin-left: 10upx; |
|||
flex-shrink: 0; |
|||
max-width: 20%; |
|||
} |
|||
} |
|||
} |
|||
.s-user{ |
|||
padding: 16upx 0; |
|||
@include centerFlex(flex-start); |
|||
>view{ |
|||
margin-right: 22upx; |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
color: #9a9a9d; |
|||
} |
|||
|
|||
} |
|||
.s-detail{ |
|||
padding-top: 20upx; |
|||
>view{ |
|||
&:first-child{ |
|||
margin-bottom: 12upx; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
} |
|||
&+view{ |
|||
word-break: break-all; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #9a9a9d; |
|||
} |
|||
} |
|||
} |
|||
.s-addr{ |
|||
padding: 30upx 0; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
&:first-child{ |
|||
flex-shrink: 0; |
|||
color: #333; |
|||
} |
|||
&:nth-child(2){ |
|||
flex-grow: 1; |
|||
color: #9A9A9D; |
|||
@include textHide(1); |
|||
} |
|||
&:nth-child(3){ |
|||
margin-left: 10upx; |
|||
flex-shrink: 0; |
|||
width: 98upx; |
|||
height: 42upx; |
|||
line-height: 38upx; |
|||
text-align: center; |
|||
border: 2upx solid #009874; |
|||
border-radius: 22upx; |
|||
color: $themeColor; |
|||
} |
|||
} |
|||
} |
|||
.s-imgs{ |
|||
padding-top: 20upx; |
|||
font-size: 0; |
|||
>image{ |
|||
margin-bottom: 24upx; |
|||
width: 200upx; |
|||
height: 200upx; |
|||
border-radius: 10upx; |
|||
background-color: skyblue; |
|||
&:not(:nth-child(3n)){ |
|||
margin-right: 44upx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
.i-header{ |
|||
padding: 0 24upx 26upx; |
|||
background-color: #fff; |
|||
|
|||
} |
|||
.i-user{ |
|||
margin: 24upx 0 24upx; |
|||
padding: 30upx; |
|||
background-color: #fff; |
|||
@include centerFlex(flex-start); |
|||
>image{ |
|||
flex-shrink: 0; |
|||
margin-right: 32upx; |
|||
width: 112upx; |
|||
height: 112upx; |
|||
border-radius: 50%; |
|||
background-color: slateblue; |
|||
|
|||
} |
|||
>view{ |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
@include textHide(1); |
|||
>text{ |
|||
color: #9a9a9d; |
|||
} |
|||
} |
|||
} |
|||
.select-picker{ |
|||
width: 312upx; |
|||
border: 2upx solid #D8D8D8; |
|||
border-radius: 10upx; |
|||
background-color: #F2F2F7; |
|||
view{ |
|||
padding: 0 24upx; |
|||
height: 68upx; |
|||
@include centerFlex(center); |
|||
>input{ |
|||
flex-grow: 1; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
} |
|||
>image{ |
|||
flex-shrink: 0; |
|||
width: 28upx; |
|||
height: 28upx; |
|||
background-color: skyblue; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,169 @@ |
|||
<template> |
|||
<view class="task-publish fixed-bot-padding"> |
|||
<view class="p-section"> |
|||
<view class="s-desc"> |
|||
<view class="d-tit">作业描述</view> |
|||
<view class="d-frame"><textarea placeholder="请输入"></textarea></view> |
|||
</view> |
|||
<view class="s-addr"> |
|||
<view>视频链接</view> |
|||
<view><input value="12345" /></view> |
|||
</view> |
|||
<view class="s-imgs"> |
|||
<view class="i-tit"><text>上传照片</text>(最多上传6张，只支持.jpg、png 格式）</view> |
|||
<view class="i-list"> |
|||
<view class="l-item" v-for="i in 5" :key="i"> |
|||
<image class="i-close"></image> |
|||
<image class="i-img"></image> |
|||
</view> |
|||
<view class="l-item l-add"> |
|||
<view class="a-icon"></view> |
|||
<view class="a-tip">上传照片</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="fixed-bot-btn"><view hover-class="hover-active">保存</view></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.task-publish{ |
|||
.p-section{ |
|||
padding: 30upx; |
|||
background-color: #fff; |
|||
} |
|||
.s-desc{ |
|||
display: flex; |
|||
.d-tit{ |
|||
padding-top: 20upx; |
|||
flex-shrink: 0; |
|||
margin-right: 20upx; |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
color: #333; |
|||
} |
|||
.d-frame{ |
|||
flex-grow: 1; |
|||
padding: 16upx; |
|||
height: 290upx; |
|||
border: 2upx solid #D8D8D8; |
|||
border-radius: 10upx; |
|||
>textarea{ |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
color: #9a9a9d; |
|||
} |
|||
} |
|||
} |
|||
.s-addr{ |
|||
padding: 30upx 0; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
&:first-child{ |
|||
flex-shrink: 0; |
|||
margin-right: 20upx; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
} |
|||
&+view{ |
|||
padding: 0 14upx; |
|||
flex-grow: 1; |
|||
height: 78upx; |
|||
border: 2upx solid #D8D8D8; |
|||
border-radius: 10upx; |
|||
>input{ |
|||
width: 100%; |
|||
height: 100%; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #9a9a9d; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.s-imgs{ |
|||
.i-tit{ |
|||
line-height: 44upx; |
|||
font-size: 24upx; |
|||
color: #9a9a9d; |
|||
>text{ |
|||
font-size: 32upx; |
|||
color: #333; |
|||
} |
|||
} |
|||
.i-list{ |
|||
padding: 20upx 0; |
|||
font-size: 0; |
|||
.l-item{ |
|||
position: relative; |
|||
display: inline-block; |
|||
margin-bottom: 24upx; |
|||
width: 200upx; |
|||
height: 200upx; |
|||
border-radius: 10upx; |
|||
overflow: hidden; |
|||
background-color: springgreen; |
|||
&:not(:nth-child(3n)){ |
|||
margin-right: 44upx; |
|||
} |
|||
.i-close{ |
|||
position: absolute; |
|||
right: 6upx; |
|||
top: 6upx; |
|||
z-index: 2; |
|||
width: 40upx; |
|||
height: 40upx; |
|||
background-color: skyblue; |
|||
} |
|||
.i-img{ |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: yellowgreen; |
|||
} |
|||
} |
|||
.l-add{ |
|||
padding-top: 36upx; |
|||
border: 2upx solid #D8D8D8; |
|||
.a-icon{ |
|||
position: relative; |
|||
margin: 0 auto 30upx; |
|||
width: 60upx; |
|||
height: 60upx; |
|||
background-color: slateblue; |
|||
&::after,&::before{ |
|||
content: ''; |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%, -50%); |
|||
background-color: #D8D8D8; |
|||
width: 60upx; |
|||
height: 4upx; |
|||
} |
|||
&::after{ |
|||
height: 60upx; |
|||
width: 4upx; |
|||
} |
|||
} |
|||
.a-tip{ |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
text-align: center; |
|||
color: #9a9a9d; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue