4 changed files with 281 additions and 3 deletions
-
23src/subpackage/order/pages/timekeeping/modules/order_detail/bf_button.vue
-
30src/subpackage/order/pages/timekeeping/modules/order_detail/bottom_fixed.vue
-
180src/subpackage/order/pages/timekeeping/modules/order_detail/end_billing_modal.vue
-
51src/subpackage/order/pages/timekeeping/order_detail/person.vue
@ -0,0 +1,23 @@ |
|||
<template> |
|||
<view class="bf-button"> |
|||
<slot>取消预约</slot> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.bf-button{ |
|||
padding: 0 32upx; |
|||
display: inline-block; |
|||
min-width: 192upx; |
|||
text-align: center; |
|||
border-radius: 10upx; |
|||
background: #fff; |
|||
@include flcw(32upx, 88upx, $mColor, 500); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<view class="bottom-fixed"> |
|||
<view class="bf-placeholder"></view> |
|||
<view class="bf-content"> |
|||
<view class="bc-btns"> |
|||
<slot></slot> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
created(){ |
|||
console.log('bottom_fixed') |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.bottom-fixed{ |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
padding: 10upx 24upx; |
|||
background: #f2f2f7; |
|||
@include ctf(flex-end); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,180 @@ |
|||
<template> |
|||
<view class="end-billing-modal"> |
|||
<view class="ebm-mask" v-if="false"> |
|||
<view class="em-container"> |
|||
<view class="ec-close"></view> |
|||
<view class="ec-title">结束计费</view> |
|||
<view class="ec-info"> |
|||
<view class="ei-line"><text class="el-txt">操作人：</text>张三</view> |
|||
<view class="ei-line"><text class="el-txt">时长合计：</text>1小时25分9秒</view> |
|||
<view class="ei-line"><text class="el-txt">金额合计：</text>¥100.2</view> |
|||
</view> |
|||
|
|||
<view class="ec-opts"> |
|||
<view class="eo-item active"> |
|||
<view class="ei-icon"></view> |
|||
<view class="ei-txt">停止计时</view> |
|||
</view> |
|||
<view class="eo-item"> |
|||
<view class="ei-icon"></view> |
|||
<view class="ei-txt">完结订单</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="ec-amount"> |
|||
<view class="et-name"><text class="en-txt">*</text>请输入金额</view> |
|||
<input type="digit" class="ea-ipt"> |
|||
</view> |
|||
|
|||
<view class="ec-btn">确认</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.ebm-mask{ |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
|
|||
} |
|||
.em-container{ |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%, -50%); |
|||
padding: 0upx 80upx; |
|||
width: 620upx; |
|||
height: 806upx; |
|||
border-radius: 10upx; |
|||
background: #fff; |
|||
.ec-close{ |
|||
position: absolute; |
|||
right: 30upx; |
|||
top: 30upx; |
|||
width: 48upx; |
|||
height: 48upx; |
|||
transform: rotate(45deg); |
|||
&::before, &::after{ |
|||
content: ''; |
|||
display: block; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
width: 100%; |
|||
height: 4upx; |
|||
background: #9a9a9d; |
|||
border-radius: 4upx; |
|||
} |
|||
&::after{ |
|||
transform: translate(-50%, -50%) rotate(90deg); |
|||
} |
|||
} |
|||
|
|||
.ec-title{ |
|||
padding-top: 78upx; |
|||
text-align: center; |
|||
@include flcw(32upx, 44upx, #1A1A1A, 500); |
|||
} |
|||
|
|||
.ec-btn{ |
|||
margin: 60upx auto 0upx; |
|||
width: 240upx; |
|||
text-align: center; |
|||
border-radius: 10upx; |
|||
background: $mColor; |
|||
@include flcw(32upx, 88upx, #fff, 500); |
|||
} |
|||
|
|||
} |
|||
|
|||
.ec-info{ |
|||
padding-top: 34upx; |
|||
.ei-line{ |
|||
@include flcw(28upx, 48upx, #1A1A1A); |
|||
@include tHide; |
|||
.el-txt{ |
|||
color: #1A1A1A; |
|||
} |
|||
&:nth-child(2){ |
|||
color: $mColor; |
|||
} |
|||
&:nth-child(3){ |
|||
color: #FF873D; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.ec-opts{ |
|||
padding-top: 58upx; |
|||
@include ctf(space-between); |
|||
.eo-item{ |
|||
flex-shrink: 0; |
|||
width: 50%; |
|||
@include ctf; |
|||
.ei-icon{ |
|||
flex-shrink: 0; |
|||
margin-right: 12upx; |
|||
padding: 4upx; |
|||
width: 32upx; |
|||
height: 32upx; |
|||
border: 4upx solid #d8d8d8; |
|||
border-radius: 50%; |
|||
@include ctf(center); |
|||
&::after{ |
|||
content: ''; |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #d8d8d8; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
.ei-txt{ |
|||
@include flcw(28upx, 48upx, #d8d8d8); |
|||
} |
|||
&.active{ |
|||
.ei-icon{ |
|||
border-color: $mColor; |
|||
&::after{ |
|||
background: $mColor; |
|||
} |
|||
} |
|||
.ei-txt{ |
|||
color: #1A1A1A; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.ec-amount{ |
|||
padding-top: 48upx; |
|||
.et-name{ |
|||
@include flcw(28upx, 48upx, #1A1A1A); |
|||
.en-txt{ |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
.ea-ipt{ |
|||
margin-top: 8upx; |
|||
padding: 0 12upx; |
|||
height: 88upx; |
|||
border-radius: 10upx; |
|||
border: 2upx solid #D8D8D8; |
|||
@include flcw(28upx, 48upx, #1A1A1A); |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue