|
|
@ -1,11 +1,12 @@ |
|
|
|
<template> |
|
|
|
<view class="order"> |
|
|
|
<mNavbar title="订单详情" :leftClick="toLeft" style="background: linear-gradient(#4899a6, rgb(78 160 167));" /> |
|
|
|
<mNavbar title="订单详情" :leftClick="toLeft" |
|
|
|
style="background: linear-gradient(#ecb978, #edbe83);" /> |
|
|
|
<view class="box"> |
|
|
|
|
|
|
|
<view class="title"> |
|
|
|
<view class="icon"> |
|
|
|
<uni-icons type="wallet-filled" color="#4899a6" size="15"></uni-icons> |
|
|
|
<uni-icons type="wallet-filled" color="#ecb978" size="15"></uni-icons> |
|
|
|
</view> |
|
|
|
<view class="text"> |
|
|
|
<!-- 订单已完成 --> |
|
|
@ -17,7 +18,9 @@ |
|
|
|
请确认订单 |
|
|
|
</view> --> |
|
|
|
|
|
|
|
<van-steps style="background: transparent;padding-bottom: 30px;" active-color="#fff" inactive-color="#ddd" |
|
|
|
<van-steps style="background: transparent;padding-bottom: 30px;" |
|
|
|
active-color="#6e3009" |
|
|
|
inactive-color="rgba(#6e3009, 0.2)" |
|
|
|
:active="stepsActive"> |
|
|
|
<van-step v-for="(item, index) in steps"> |
|
|
|
|
|
|
@ -80,7 +83,7 @@ |
|
|
|
<view class="info"> |
|
|
|
<view class="flex"> |
|
|
|
<view style="width: 8rpx;height: 30rpx; |
|
|
|
background: #6fc6ad;border-radius: 6rpx;" /> |
|
|
|
background: #6e3009;border-radius: 6rpx;" /> |
|
|
|
<view class="head-title">服务项目</view> |
|
|
|
</view> |
|
|
|
|
|
|
@ -407,7 +410,7 @@ |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.order { |
|
|
|
background: linear-gradient(#4899a6, #6fc6ad, #6fc6ad); |
|
|
|
background: linear-gradient(178deg, #ecb978, #ffe6ed); |
|
|
|
padding-bottom: 10px; |
|
|
|
} |
|
|
|
|
|
|
@ -417,7 +420,7 @@ |
|
|
|
.active-icon { |
|
|
|
width: 12px; |
|
|
|
height: 12px; |
|
|
|
background-color: #fff; |
|
|
|
background-color: $uni-color; |
|
|
|
border-radius: 6px; |
|
|
|
transform: translate(-25%, 0); |
|
|
|
} |
|
|
@ -425,7 +428,7 @@ |
|
|
|
.inactive-icon { |
|
|
|
width: 8px; |
|
|
|
height: 8px; |
|
|
|
background-color: #fff; |
|
|
|
background-color: $uni-color; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
|
|
|
@ -440,18 +443,18 @@ |
|
|
|
.inactive-icon.tip { |
|
|
|
width: 6px; |
|
|
|
height: 6px; |
|
|
|
background-color: #fff; |
|
|
|
background-color: $uni-color; |
|
|
|
border-radius: 3px; |
|
|
|
} |
|
|
|
|
|
|
|
.stepText.tip { |
|
|
|
background-color: #b5d7d3; |
|
|
|
background-color: $uni-color; |
|
|
|
padding: 3px 5px; |
|
|
|
position: relative; |
|
|
|
top: 50px; |
|
|
|
border-radius: 5px; |
|
|
|
color: #4899a6; |
|
|
|
display: flex; |
|
|
|
color: #fff; |
|
|
|
font-size: 10px; |
|
|
|
} |
|
|
|
|
|
|
@ -461,7 +464,7 @@ |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%, 0); |
|
|
|
border-top: 7px solid transparent; |
|
|
|
border-bottom: 7px solid #b5d7d3; |
|
|
|
border-bottom: 7px solid $uni-color; |
|
|
|
border-left: 7px solid transparent; |
|
|
|
border-right: 7px solid transparent; |
|
|
|
} |
|
|
@ -478,7 +481,7 @@ |
|
|
|
.icon { |
|
|
|
width: 25px; |
|
|
|
height: 25px; |
|
|
|
background-color: #fff; |
|
|
|
background-color: $uni-color; |
|
|
|
border-radius: 15px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
@ -486,7 +489,7 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.text { |
|
|
|
color: #fff; |
|
|
|
color: $uni-color; |
|
|
|
padding-left: 5px; |
|
|
|
} |
|
|
|
} |
|
|
@ -511,8 +514,8 @@ |
|
|
|
.btn, |
|
|
|
.cancel-btn { |
|
|
|
color: #fff; |
|
|
|
background: $uni-color; |
|
|
|
padding: 10rpx 50rpx; |
|
|
|
background-color: #ffb300; |
|
|
|
border-radius: 30rpx; |
|
|
|
font-size: 25rpx; |
|
|
|
margin: 0 10rpx; |
|
|
@ -739,8 +742,8 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.btn-x { |
|
|
|
color: #6fc6ad; |
|
|
|
border: 1px solid #6fc6ad; |
|
|
|
color: $uni-color; |
|
|
|
border: 1px solid $uni-color; |
|
|
|
padding: 10rpx 20rpx; |
|
|
|
border-radius: 30rpx; |
|
|
|
} |
|
|
@ -750,8 +753,8 @@ |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
.btn { |
|
|
|
color: #6fc6ad; |
|
|
|
border: 1px solid #6fc6ad; |
|
|
|
color: $uni-color; |
|
|
|
border: 1px solid $uni-color; |
|
|
|
padding: 10rpx 20rpx; |
|
|
|
border-radius: 30rpx; |
|
|
|
} |
|
|
|