-
11src/js/api.js
-
2src/js/server.js
-
6src/pages.json
-
40src/pages/approve/list/list.vue
-
225src/pages/approve/record/record.vue
-
6src/pages/course/list/list.vue
-
100src/pages/feedback/feedback.vue
-
33src/pages/index/index.vue
-
3src/pages/message_list/message_list.vue
-
14src/pages/mine_trainee/mine_trainee.vue
-
BINsrc/static/images/arrow_c874.png
-
BINsrc/static/images/close_c00.png
-
BINsrc/static/images/close_cf9.png
-
BINsrc/static/images/phone_c33.png
-
BINsrc/static/images/search_cf9.png
-
BINsrc/static/images/sex_0.png
-
BINsrc/static/images/sex_1.png
@ -0,0 +1,225 @@ |
|||
<template> |
|||
<view class="approve-record"> |
|||
<view class="l-tabs"> |
|||
<view @click="tabChange(0)"> |
|||
<view :class="['t-txt', tabIdx==0?'active':'']"> |
|||
<text>预约审批</text> |
|||
<view class="t-label">99</view> |
|||
</view> |
|||
</view> |
|||
<view @click="tabChange(1)"> |
|||
<view :class="['t-txt', tabIdx==1?'active':'']"> |
|||
<text>请假审批</text> |
|||
<view class="t-label">99</view> |
|||
</view> |
|||
</view> |
|||
<view @click="tabChange(2)"> |
|||
<view :class="['t-txt', tabIdx==2?'active':'']"> |
|||
<text>换班审批</text> |
|||
<view class="t-label">99</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="r-list"> |
|||
<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 mode="aspectFit" src="/static/images/arrow_c874.png"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '../../../utils/util'; |
|||
export default { |
|||
data(){ |
|||
return { |
|||
tabIdx: 0 |
|||
} |
|||
}, |
|||
methods: { |
|||
tabChange(i){ |
|||
this.tabIdx = i; |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~style/public.scss"; |
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.r-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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: 24 | Height: 24 | Size: 239 B |
|
After Width: 40 | Height: 40 | Size: 353 B |
|
After Width: 36 | Height: 36 | Size: 339 B |
|
After Width: 36 | Height: 36 | Size: 499 B |
|
After Width: 32 | Height: 32 | Size: 449 B |
|
After Width: 36 | Height: 36 | Size: 544 B |
|
After Width: 36 | Height: 38 | Size: 534 B |