8 changed files with 1055 additions and 1 deletions
-
36src/pages.json
-
307src/pages/approve/list/list.vue
-
251src/pages/course/experience/experience.vue
-
60src/pages/course/list/list.vue
-
159src/pages/course/offer/offer.vue
-
54src/pages/course/offer_info/offer_info.vue
-
89src/pages/shift/application/application.vue
-
100src/pages/shift/record/record.vue
@ -0,0 +1,307 @@ |
|||
<template> |
|||
<view class="approve-list"> |
|||
<view class="l-tabs"> |
|||
<view v-for="i in 3" :key="i"> |
|||
<view class="t-txt active"> |
|||
<text>预约审批</text> |
|||
<view class="t-label">99</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="l-bar"> |
|||
<view>审核人数:3人</view> |
|||
<view>审批记录</view> |
|||
</view> |
|||
<view class="l-null" v-if="false"> |
|||
<image></image> |
|||
<view>抱歉，没有相关课程订单信息...</view> |
|||
</view> |
|||
<view class="l-list" v-else> |
|||
<view class="l-item"> |
|||
<view class="l-content"> |
|||
<view class="c-user"> |
|||
<image></image> |
|||
<view>胡可课</view> |
|||
</view> |
|||
<view class="c-content"> |
|||
<view class="c-name">羽毛球课程(羽毛球课)</view> |
|||
<view class="c-times"> |
|||
<view v-for="i in 10" :key="i">2020-08-22 10:30</view> |
|||
</view> |
|||
</view> |
|||
<view class="c-status"> |
|||
<view class="s-icon" v-if="false"></view> |
|||
<view class="s-txt s-active" v-else>通过</view> |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="l-reason"> |
|||
<view>原因:</view> |
|||
<view>作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内…</view> |
|||
</view> |
|||
<view class="l-unfold"> |
|||
<view> |
|||
<text>展开</text> |
|||
<image></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="l-bot-bar"> |
|||
<view class="bb-select"> |
|||
<view></view> |
|||
<text>全选</text> |
|||
</view> |
|||
<view class="bb-btns"> |
|||
<view>不同意</view> |
|||
<view>同意</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~style/public.scss"; |
|||
.approve-list{ |
|||
padding-bottom: 120upx; |
|||
padding-bottom: calc( 120upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 120upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
} |
|||
.l-tabs{ |
|||
margin-bottom: 28upx; |
|||
background-color: #fff; |
|||
@include centerFlex(center); |
|||
>view{ |
|||
flex-grow: 0; |
|||
width: 33.33%; |
|||
display: flex; |
|||
justify-content: center; |
|||
.t-txt{ |
|||
position: relative; |
|||
height: 96upx; |
|||
line-height: 96upx; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
.t-label{ |
|||
position: absolute; |
|||
right: -34upx; |
|||
top: 18upx; |
|||
width: 32upx; |
|||
height: 32upx; |
|||
border-radius: 50%; |
|||
line-height: 32upx; |
|||
text-align: center; |
|||
font-size: 20upx; |
|||
font-weight: 400; |
|||
color: #fff; |
|||
background-color: #FF4444; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
&.active{ |
|||
font-weight: 600; |
|||
color: $themeColor; |
|||
&::after{ |
|||
content: ''; |
|||
position: absolute; |
|||
display: block; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
height: 8upx; |
|||
background-color: $themeColor; |
|||
border-radius: 4upx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.l-bar{ |
|||
padding: 0 50upx; |
|||
height: 92upx; |
|||
background-color: yellowgreen; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
&:first-child{ |
|||
max-width: 60%; |
|||
color: #333; |
|||
@include textHide(1); |
|||
} |
|||
&+view{ |
|||
color: $themeColor; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
} |
|||
.l-list{ |
|||
padding: 0 24upx; |
|||
.l-item{ |
|||
padding: 24upx; |
|||
background-color: #fff; |
|||
.l-content{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.c-user{ |
|||
flex-shrink: 0; |
|||
margin-right: 30upx; |
|||
>image{ |
|||
margin: 0 auto 8upx; |
|||
display: block; |
|||
width: 100upx; |
|||
height: 100upx; |
|||
border-radius: 50%; |
|||
background-color: skyblue; |
|||
} |
|||
>view{ |
|||
max-width: 120upx; |
|||
line-height: 40upx; |
|||
text-align: center; |
|||
font-size: 28upx; |
|||
color: #9a9a9d; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
.c-content{ |
|||
flex-grow: 1; |
|||
padding-top: 26upx; |
|||
.c-name,.c-times>view{ |
|||
font-size: 28upx; |
|||
line-height: 52upx; |
|||
color: #333; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
} |
|||
} |
|||
.c-status{ |
|||
flex-shrink: 0; |
|||
padding-top: 60upx; |
|||
.s-icon{ |
|||
width: 36upx; |
|||
height: 36upx; |
|||
border: 2upx solid #9a9a9d; |
|||
border-radius: 50%; |
|||
>image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
.s-txt{ |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
color: $themeColor; |
|||
&.s-active{ |
|||
color: #FF4444; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
.l-reason{ |
|||
padding-top: 14upx; |
|||
border-top: 2upx solid #D8D8D8; |
|||
display: flex; |
|||
>view{ |
|||
&:first-child{ |
|||
flex-shrink: 0; |
|||
margin-right: 20upx; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
} |
|||
&+view{ |
|||
flex-grow: 1; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #9a9a9d; |
|||
} |
|||
} |
|||
} |
|||
.l-unfold{ |
|||
padding: 10upx 0 0; |
|||
@include centerFlex(flex-end); |
|||
>view{ |
|||
font-size: 28upx; |
|||
line-height: 46upx; |
|||
color: $themeColor; |
|||
>image{ |
|||
margin-left: 10upx; |
|||
width: 24upx; |
|||
height: 24upx; |
|||
background-color: skyblue; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.l-null{ |
|||
padding-top: 94upx; |
|||
>image{ |
|||
margin: 0 auto 20upx; |
|||
display: block; |
|||
width: 346upx; |
|||
height: 346upx; |
|||
background-color: skyblue; |
|||
} |
|||
>view{ |
|||
text-align: center; |
|||
line-height: 44upx; |
|||
font-size: 32upx; |
|||
color: #9A9A9D; |
|||
} |
|||
} |
|||
.l-bot-bar{ |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: 0; |
|||
padding: 10upx 24upx; |
|||
padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
width: 100%; |
|||
background-color: #fff; |
|||
@include centerFlex(space-between); |
|||
.bb-select{ |
|||
flex-shrink: 0; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
@include centerFlex(flex-start); |
|||
>view{ |
|||
margin-right: 14upx; |
|||
width: 36upx; |
|||
height: 36upx; |
|||
border-radius: 50%; |
|||
border: 2upx solid #9a9a9d; |
|||
} |
|||
|
|||
} |
|||
.bb-btns{ |
|||
flex-shrink: 0; |
|||
@include centerFlex(flex-end); |
|||
>view{ |
|||
width: 220upx; |
|||
height: 88upx; |
|||
line-height: 84upx; |
|||
text-align: center; |
|||
border-radius: 44upx; |
|||
border: 2upx solid $themeColor; |
|||
color: $themeColor; |
|||
&+view{ |
|||
margin-left: 20upx; |
|||
background-color: $themeColor; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,251 @@ |
|||
<template> |
|||
<view class="course-experience"> |
|||
<view class="e-tab"> |
|||
<view><image></image><text>未报价</text></view> |
|||
<view><image></image><text>未报价</text></view> |
|||
</view> |
|||
<view class="e-unfold"> |
|||
<view><text>全部展开</text><image></image></view> |
|||
</view> |
|||
<view class="e-list"> |
|||
<view class="l-item" v-for="i in 5" :key="i"> |
|||
<view class="i-header"> |
|||
<view class="h-icon" v-if="false"></view> |
|||
<view class="h-status red" v-else>已支付</view> |
|||
</view> |
|||
<view class="i-info"> |
|||
<image></image> |
|||
<view> |
|||
<view class="i-content"> |
|||
<view class="c-line"> |
|||
<text>昵称：</text>长大 |
|||
</view> |
|||
<view class="c-line"> |
|||
<text>学员姓名：</text>长大 |
|||
</view> |
|||
<view class="c-line"> |
|||
<text>性别：</text>长大 |
|||
</view> |
|||
<view class="c-line"> |
|||
<text>联系方式：</text>123456789789 |
|||
</view> |
|||
</view> |
|||
<view class="i-btns"> |
|||
<view v-if="true" hover-class="hover-active">报价</view> |
|||
<view class="b-detail" hover-class="hover-active" v-else>详情</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="i-list"> |
|||
<view class="l-line" v-for="j in 5" :key="j"> |
|||
<text>课程一：</text>羽毛球技能技巧大班大班大班大班大班 |
|||
</view> |
|||
</view> |
|||
<view class="i-unfold"> |
|||
<text>展开</text> |
|||
<image></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="e-fixed-bar"> |
|||
<view class="fb-select"> |
|||
<view></view> |
|||
<text>全选</text> |
|||
</view> |
|||
<view class="fb-btn" hover-class="hover-active">召开体验课</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.course-experience{ |
|||
padding-bottom: 108upx; |
|||
padding-bottom: calc( 108upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 108upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
} |
|||
.e-tab{ |
|||
background-color: #fff; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
flex-grow: 1; |
|||
max-width: 50%; |
|||
height: 108upx; |
|||
line-height: 108upx; |
|||
text-align: center; |
|||
font-size: 32upx; |
|||
color: #9A9A9D; |
|||
>image{ |
|||
margin-right: 16upx; |
|||
vertical-align: middle; |
|||
width: 56upx; |
|||
height: 56upx; |
|||
background-color: skyblue; |
|||
} |
|||
} |
|||
} |
|||
.e-unfold{ |
|||
padding: 20upx 24upx; |
|||
@include centerFlex(flex-end); |
|||
>view{ |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
color: #333; |
|||
>image{ |
|||
margin-left: 12upx; |
|||
vertical-align: middle; |
|||
width: 28upx; |
|||
height: 28upx; |
|||
background-color: skyblue; |
|||
} |
|||
} |
|||
} |
|||
.e-list{ |
|||
padding: 0 24upx; |
|||
.l-item{ |
|||
margin-bottom: 24upx; |
|||
padding: 20upx; |
|||
border-radius: 10upx; |
|||
background-color: #fff; |
|||
border: 2upx solid $themeColor; |
|||
.i-header{ |
|||
@include centerFlex(flex-end); |
|||
|
|||
.h-icon{ |
|||
width: 36upx; |
|||
height: 36upx; |
|||
border: 2upx solid #9a9a9d; |
|||
border-radius: 50%; |
|||
>image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
.h-status{ |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
color: #333; |
|||
&.red{ |
|||
color: #FF4444; |
|||
} |
|||
} |
|||
} |
|||
.i-info{ |
|||
display: flex; |
|||
padding-bottom: 22upx; |
|||
>image{ |
|||
flex-shrink: 0; |
|||
margin-right: 20upx; |
|||
width: 88upx; |
|||
height: 88upx; |
|||
border-radius: 50%; |
|||
background-color: skyblue; |
|||
} |
|||
>view{ |
|||
flex-grow: 1; |
|||
@include centerFlex(space-between); |
|||
} |
|||
.i-content{ |
|||
flex-grow: 1; |
|||
.c-line{ |
|||
font-size: 28upx; |
|||
line-height: 50upx; |
|||
color: #333; |
|||
@include textHide(1); |
|||
>text{ |
|||
color: #9a9a9d; |
|||
} |
|||
} |
|||
} |
|||
.i-btns{ |
|||
margin-left: 10upx; |
|||
flex-shrink: 0; |
|||
>view{ |
|||
width: 176upx; |
|||
height: 72upx; |
|||
line-height: 68upx; |
|||
text-align: center; |
|||
font-size: 32upx; |
|||
color: #fff; |
|||
border: 2upx solid #FF873D; |
|||
border-radius: 36upx; |
|||
background-color: #FF873D; |
|||
&.b-detail{ |
|||
background-color: #fff; |
|||
border-color: $themeColor; |
|||
color: $themeColor; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.i-list{ |
|||
padding: 18upx 0 26upx; |
|||
border-top: 2upx solid #D8D8D8; |
|||
.l-line{ |
|||
font-size: 28upx; |
|||
line-height: 52upx; |
|||
color: #333; |
|||
@include textHide(1); |
|||
>text{ |
|||
color: #9a9a9d; |
|||
} |
|||
} |
|||
} |
|||
.i-unfold{ |
|||
font-size: 28upx; |
|||
line-height: 46upx; |
|||
color: $themeColor; |
|||
text-align: right; |
|||
>image{ |
|||
margin-left: 10upx; |
|||
vertical-align: middle; |
|||
width: 24upx; |
|||
height: 24upx; |
|||
background-color: skyblue; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.e-fixed-bar{ |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
background-color: #fff; |
|||
padding: 10upx 24upx; |
|||
padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
@include centerFlex(space-between); |
|||
.fb-select{ |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
color: #333; |
|||
>view{ |
|||
margin-right: 14upx; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
width: 36upx; |
|||
height: 36upx; |
|||
border-radius: 50%; |
|||
border: 2upx solid #9a9a9d; |
|||
} |
|||
} |
|||
.fb-btn{ |
|||
width: 544upx; |
|||
height: 88upx; |
|||
line-height: 88upx; |
|||
text-align: center; |
|||
border-radius: 44upx; |
|||
font-size: 32upx; |
|||
color: #fff; |
|||
background-color: $themeColor; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,159 @@ |
|||
<template> |
|||
<view class="course-offer fixed-bot-padding"> |
|||
<view class="o-section"> |
|||
<view class="s-line"> |
|||
<view class="l-tit">课程名称: </view> |
|||
<view class="l-txt">哈哈哈哈哈哈哈哈哈</view> |
|||
</view> |
|||
<view class="s-line"> |
|||
<view class="l-tit">上课用户: </view> |
|||
<view class="l-txt">张三</view> |
|||
</view> |
|||
<view class="s-line"> |
|||
<view class="l-tit">课程次数: </view> |
|||
<view class="l-frame"><input value="12222" /></view> |
|||
</view> |
|||
<view class="s-line"> |
|||
<view class="l-tit">课程报价: </view> |
|||
<view class="l-frame"><input value="12222" /></view> |
|||
<view class="l-txt">元</view> |
|||
</view> |
|||
</view> |
|||
<view class="fixed-bot-btn"><view hover-class="hover-active">确定</view></view> |
|||
|
|||
<view class="o-mask"> |
|||
<view class="m-modal"> |
|||
<view class="m-tit">请确定课程报价信息</view> |
|||
<view class="m-lines"> |
|||
<view><text>课程名称:</text>羽毛球课程羽毛球课程(包学会)</view> |
|||
<view><text>上课用户:</text>羽毛球课程羽毛球课程(包学会)</view> |
|||
<view><text>课程次数:</text>羽毛球课程羽毛球课程(包学会)</view> |
|||
<view><text>课程报价:</text>羽毛球课程羽毛球课程(包学会)</view> |
|||
</view> |
|||
<view class="m-btns"> |
|||
<view hover-class="hover-active">取消</view> |
|||
<view hover-class="hover-active">提交</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~style/public.scss"; |
|||
page{ |
|||
background-color: #fff; |
|||
} |
|||
.course-offer{ |
|||
|
|||
} |
|||
.o-section{ |
|||
padding: 34upx 24upx; |
|||
.s-line{ |
|||
|
|||
@include centerFlex(flex-start); |
|||
.l-tit{ |
|||
flex-shrink: 0; |
|||
margin-right: 50upx; |
|||
line-height: 70upx; |
|||
font-size: 28upx; |
|||
color: #9a9a9d; |
|||
} |
|||
.l-txt{ |
|||
height: 70upx; |
|||
line-height: 70upx; |
|||
flex-grow: 1; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
@include textHide(1); |
|||
} |
|||
.l-frame{ |
|||
margin-bottom: 8upx; |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
margin-right: 10upx; |
|||
padding: 0 12upx; |
|||
width: 312upx; |
|||
height: 68upx; |
|||
border: 2upx solid #D8D8D8; |
|||
border-radius: 10upx; |
|||
background-color: #f7f7f7; |
|||
>input{ |
|||
flex-grow: 1; |
|||
height: 100%; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.o-mask{ |
|||
position: fixed; |
|||
left: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
right: 0; |
|||
z-index: 3; |
|||
background-color: rgba($color: #000000, $alpha: .5); |
|||
} |
|||
.m-modal{ |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%, -50%); |
|||
padding: 40upx 50upx 60upx; |
|||
width: 620upx; |
|||
border-radius: 10upx; |
|||
background-color: #fff; |
|||
.m-tit{ |
|||
margin-bottom: 40upx; |
|||
text-align: center; |
|||
line-height: 44upx; |
|||
font-size: 32upx; |
|||
font-weight: 500; |
|||
color: #333; |
|||
} |
|||
.m-lines{ |
|||
margin-bottom: 40upx; |
|||
padding: 0 50upx; |
|||
>view{ |
|||
font-size: 28upx; |
|||
line-height: 60upx; |
|||
color: #333; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
>text{ |
|||
margin-right: 12upx; |
|||
color: #9A9A9D; |
|||
} |
|||
} |
|||
} |
|||
.m-btns{ |
|||
@include centerFlex(center); |
|||
>view{ |
|||
margin: 0 14upx; |
|||
width: 240upx; |
|||
height: 88upx; |
|||
line-height: 84upx; |
|||
border-radius: 44upx; |
|||
text-align: center; |
|||
border: 2upx solid #D8D8D8; |
|||
font-size: 32upx; |
|||
color: #9A9A9D; |
|||
&+view{ |
|||
background-color: $themeColor; |
|||
border-color: $themeColor; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,54 @@ |
|||
<template> |
|||
<view class="offer-info"> |
|||
<view class="i-status i-active">等待客户支付</view> |
|||
<view class="i-setion"> |
|||
<view class="s-line" v-for="i in 5" :key="i"><text>课程名称：</text>羽毛球必杀训练课</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
page{ |
|||
background-color: #fff; |
|||
} |
|||
.offer-info{ |
|||
|
|||
} |
|||
.i-status{ |
|||
margin-bottom: 40upx; |
|||
height: 144upx; |
|||
line-height: 144upx; |
|||
text-align: center; |
|||
font-size: 40upx; |
|||
font-weight: 600; |
|||
color: #FF873D; |
|||
background-color: rgba($color: #FF873D, $alpha: .09); |
|||
&.i-active{ |
|||
color: #009874; |
|||
background-color: rgba($color: $themeColor, $alpha: .09); |
|||
} |
|||
} |
|||
.i-setion{ |
|||
padding: 0 30upx; |
|||
.s-line{ |
|||
margin-bottom: 12upx; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
>text{ |
|||
color: #9a9a9d; |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,89 @@ |
|||
<template> |
|||
<view class="shift-application fixed-bot-padding"> |
|||
<view class="a-warn">注：私教课以及用户预约的课程不可换班</view> |
|||
<view class="a-tit">我的换班</view> |
|||
<view class="a-ipts"> |
|||
<view v-for="i in 4" :key="i"> |
|||
<input placeholder="请选择课程" /> |
|||
<image></image> |
|||
</view> |
|||
</view> |
|||
<view class="a-tip"> |
|||
<view>换班需要换班教练的时间为空闲。</view> |
|||
<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"; |
|||
page{ |
|||
background-color: #fff; |
|||
} |
|||
.shift-application{ |
|||
|
|||
} |
|||
.a-warn{ |
|||
margin-bottom: 52upx; |
|||
height: 92upx; |
|||
line-height: 92upx; |
|||
text-align: center; |
|||
font-size: 28upx; |
|||
color: #FF873D; |
|||
background-color: rgba($color: #FF873D, $alpha: .2); |
|||
} |
|||
.a-tit{ |
|||
line-height: 44upx; |
|||
text-align: center; |
|||
font-size: 32upx; |
|||
font-weight: 500; |
|||
color: #333; |
|||
|
|||
} |
|||
.a-ipts{ |
|||
padding-top: 24upx; |
|||
>view{ |
|||
margin: 0 auto 24upx; |
|||
width: 538upx; |
|||
height: 88upx; |
|||
border: 2upx solid #d8d8d8; |
|||
border-radius: 10upx; |
|||
padding: 0 20upx; |
|||
@include centerFlex(space-between); |
|||
>input{ |
|||
flex-grow: 1; |
|||
height: 100%; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
} |
|||
>image{ |
|||
margin-left: 20upx; |
|||
flex-shrink: 0; |
|||
width: 28upx; |
|||
height: 28upx; |
|||
background-color: skyblue; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.a-tip{ |
|||
margin: 0 auto; |
|||
width: 538upx; |
|||
>view{ |
|||
font-size: 26upx; |
|||
line-height: 36upx; |
|||
color: #9a9a9d; |
|||
} |
|||
} |
|||
.fixed-bot-btn{ |
|||
border-top: 2upx solid #D8D8D8; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,100 @@ |
|||
<template> |
|||
<view class="shift-record"> |
|||
<view class="r-list"> |
|||
<view class="l-item" v-for="i in 10" :key="i"> |
|||
<view class="i-status active">已提交</view> |
|||
<view class="i-top"> |
|||
<view class="i-line"> |
|||
<view>课程名称:</view> |
|||
<view> |
|||
<view>篮球初级课</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="i-bot"> |
|||
<view class="i-line"> |
|||
<view>课程名称:</view> |
|||
<view> |
|||
<view>2020/08/22 10:30~12:30</view> |
|||
<view>2020/08/22 10:30~12:30</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="i-unfold"> |
|||
<text>展开</text> |
|||
<image></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.shift-record{ |
|||
|
|||
} |
|||
.r-list{ |
|||
padding: 24upx; |
|||
.l-item{ |
|||
margin-bottom: 24upx; |
|||
padding: 20upx 24upx; |
|||
border-radius: 10upx; |
|||
background-color: #fff; |
|||
.i-status{ |
|||
text-align: right; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
&.active{ |
|||
color: $themeColor; |
|||
} |
|||
} |
|||
.i-top{ |
|||
padding-bottom: 20upx; |
|||
border-bottom: 2upx solid #D8D8D8; |
|||
} |
|||
.i-line{ |
|||
display: flex; |
|||
>view{ |
|||
&:first-child{ |
|||
flex-shrink: 0; |
|||
margin-right: 14upx; |
|||
line-height: 52upx; |
|||
font-size: 28upx; |
|||
color: #9A9A9D; |
|||
} |
|||
&+view{ |
|||
flex-grow: 1; |
|||
>view{ |
|||
line-height: 52upx; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.i-unfold{ |
|||
line-height: 46upx; |
|||
font-size: 28upx; |
|||
color: $themeColor; |
|||
@include centerFlex(flex-end); |
|||
|
|||
>image{ |
|||
margin-left: 10upx; |
|||
flex-shrink: 0; |
|||
width: 24upx; |
|||
height: 24upx; |
|||
background-color: skyblue; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue