APP
/
coach_assistant
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add all style

master
刘嘉炜 4 years ago
parent
ad1eca85e2
commit
bd8092b3e0
8 changed files with 1055 additions and 1 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. 36
      src/pages.json
  2. 307
      src/pages/approve/list/list.vue
  3. 251
      src/pages/course/experience/experience.vue
  4. 60
      src/pages/course/list/list.vue
  5. 159
      src/pages/course/offer/offer.vue
  6. 54
      src/pages/course/offer_info/offer_info.vue
  7. 89
      src/pages/shift/application/application.vue
  8. 100
      src/pages/shift/record/record.vue

36
src/pages.json
View File

@ -96,6 +96,42 @@
} }
}, },
{ {
"path": "pages/course/experience/experience",
"style": {
"navigationBarTitleText": "体验课预约列表"
}
},
{
"path": "pages/course/offer/offer",
"style": {
"navigationBarTitleText": "报价详情页"
}
},
{
"path": "pages/course/offer_info/offer_info",
"style": {
"navigationBarTitleText": "报价详情页"
}
},
{
"path": "pages/approve/list/list",
"style": {
"navigationBarTitleText": "我的审批"
}
},
{
"path": "pages/shift/application/application",
"style": {
"navigationBarTitleText": "换班"
}
},
{
"path": "pages/shift/record/record",
"style": {
"navigationBarTitleText": "我的换班"
}
},
{
"path": "pages/login/login", "path": "pages/login/login",
"style": { "style": {
} }

307
src/pages/approve/list/list.vue
View File

@ -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>

251
src/pages/course/experience/experience.vue
View File

@ -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>

60
src/pages/course/list/list.vue
View File

@ -22,7 +22,14 @@
</view> </view>
</view> </view>
<view class="cl-ex-item"> <view class="cl-ex-item">
<view class="ei-tit">
<view>羽毛球课包学会(带体验课)</view>
<view>预约中</view>
</view>
<view class="ei-line"><text>预约人数:</text>20</view>
<view class="ei-btns">
<view hover-class="hover-active">查看详情</view>
</view>
</view> </view>
</view> </view>
<view class="cl-mask" v-if="false"> <view class="cl-mask" v-if="false">
@ -160,6 +167,57 @@ export default {
} }
} }
} }
.cl-ex-item{
padding: 44upx 24upx 34upx;
border-radius: 10upx;
background-color: #fff;
.ei-tit{
margin-bottom: 18upx;
@include centerFlex(space-between);
>view{
&:first-child{
line-height: 44upx;
font-size: 32upx;
font-weight: 500;
color: #333;
@include textHide(1);
}
&+view{
flex-grow: 0;
flex-shrink: 0;
font-size: 28upx;
color: #9A9A9D;
&.active{
color: $themeColor;
}
}
}
}
.ei-line{
margin-bottom: 20upx;
font-size: 28upx;
color: #333;
@include textHide(1);
>text{
margin-right: 20upx;
color: #9A9A9D;
}
}
.ei-btns{
@include centerFlex(flex-end);
>view{
width: 192upx;
height: 72upx;
line-height: 68upx;
text-align: center;
font-size: 28upx;
border: 2upx solid $themeColor;
border-radius: 36upx;
color: $themeColor;
}
}
}
} }
.cl-mask{ .cl-mask{
position: fixed; position: fixed;

159
src/pages/course/offer/offer.vue
View File

@ -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>

54
src/pages/course/offer_info/offer_info.vue
View File

@ -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>

89
src/pages/shift/application/application.vue
View File

@ -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>

100
src/pages/shift/record/record.vue
View File

@ -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