332 lines
12 KiB
SCSS
332 lines
12 KiB
SCSS
.order-box{
|
|
height: 100vh;
|
|
background-color:white ;
|
|
}
|
|
.map-contain{
|
|
width: 500rpx;
|
|
height: 500rpx;
|
|
}
|
|
.order-info{
|
|
min-height: 80vh;
|
|
background-color:#F3F5F9 ;
|
|
overflow: hidden;
|
|
.order-header{
|
|
margin: 40rpx;
|
|
border-radius: 24rpx;
|
|
background: #FEFFFE;
|
|
height: 198rpx;
|
|
.header-bg{
|
|
padding: 12rpx 20rpx 11rpx;
|
|
border-radius: 24rpx 24rpx 0 0;
|
|
height: 32rpx;
|
|
display:flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background-image: linear-gradient(269deg, #8D95AC 0%, #232031 92%);
|
|
color: white;
|
|
font-size: 22rpx;
|
|
.toElectronicStub{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.order-num{
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
.copy{
|
|
width: 25rpx;
|
|
height: 25rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
.order-status{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 32rpx 60rpx 32rpx 27rpx;
|
|
position: relative;
|
|
.line{
|
|
width: 2rpx;
|
|
height:96rpx ;
|
|
background-color: #F5F5F5;
|
|
position: absolute;
|
|
left: 312rpx;
|
|
top: 24rpx;
|
|
}
|
|
.status{
|
|
text-align: center;
|
|
.status-label{
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
.status-tips{
|
|
font-size: 22rpx;
|
|
color:#878787 ;
|
|
|
|
}
|
|
}
|
|
.area{
|
|
font-size: 24rpx;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
.arrow{
|
|
width: 80rpx;
|
|
height: 12rpx;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.green-arrow{
|
|
background-image: url(data:image/png;base64,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);
|
|
}
|
|
.red-arrow{
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKYAAAAaCAYAAAA9gCd5AAAAAXNSR0IArs4c6QAABhlJREFUeF7tmt9rm1UYx7/PeZO0Jas4hxcdejGGDG3aIYq6OcYGMgTFyaQVHCLeKKh/gtj0xmtBvBMZXkxZVNSJIigLW+cubNY1abwabdPOtLFNt7XL7/c9j5z3zdulP5bkfRNHJe+5Suk5z3nO83zy/DgnBG94FmjBAgyIyNAQDUciRgtitiyldgrzZHWWBRgw+SGAFaAEyHZZwAOzXZbsMDnnhoY0FSUnjw7uIxYHBy9d+76dcHpgdhhQ7TiuDWDiaOhRrlAEhGeFoLdCY/EvLxw75jsejeqt7uOB2aoFO2y9HSkTh0P7megHMPoBMICyEPR2aCz+lT2nFdN4YLZivQ5bawM3daT/IEstwuDHAKimR1ilJkoa0XD/5fiPrUZOD8wOg8vtcW3QEodCh0H0DQN9AFTK9lVlqsZHAboqNDEcujT5aytwemC69VQHrbMBiz838AIEzgJ4uBoptU1msOHMwodTgxcTF92mdVdgMrOrdVt8OTp6V87IiKpT3A9blinHpXqj4Y0Lw+HWdHJ/mh2zMjIEMRyBkXj+4ClmeQZAL6xrIRUdtxsqtStgM36Blx4fS8TcwOnIgzaQRNTxDtsx5PyHiqx330dCb7KkzwEEGkBpa2OCK4hmWciTA5em4k6vkpoGsxZKZr7Xt6WxmUYBjABYXg4ileqCEWRoOUJPTxFP9OeATVGrnkRT1ggjGgmu3dG7UanwHX+x0PfyOwXURuNGWoXDHBsf9/Vc/KlXFEumTUS5TL3ozfeFwwWE3YbgRhvv4P8nh4giEWPq0MD7kvBJtZasFyk3H8aKnEwzWpdxoj+avO4kcjYFpoJSRUlOJnfldfkZgw8o1xFcpHQhIPUyijeuB8GVbuuqQQmXBZYyV+3umvIYCYAN5tupVFAvl3pMHXWZZ8gCmJo6m5mVAgGWyaSfZ6Z7SfMRWCqVCIaR54qed3XOpk6wcycxzKyoGptnatJ2kzZdP5cFp6CE4ROvPBm9Ntts5Gy4kYqORCR5fNxf8HefkeA3mgznW62uWGGJ0uIs9NzNjQzaj1tOfEXAWjqN4sqKyZE5muVRzVUPaT4fOJWCjE8CxqYXNSeynOj9/5prl20NWalXczLomuiRLw78PpVpJnI23MwGMzc5pSLlewAqdQrfOia3sn8pMw19LQuIzQ2dM2+REBaUy0uA5kKWgtLvB6ZnYExMWC+9HojbOcG+o3TmoI2zzWslEvgj4AucPBCNLTeKnPcE06wpIxFBw8NGLp78iFmqis7uuJwrSQLlpXlUbi22BcpcJoNcZhHkFkqfH5yaAU9MgFUJ6UHp3KfOVpjsECNaCgZeffq32O16kbMemGYKz8eTH0iWn1afncxk6UwftUKgvJJGZSVtfm5lkNCQzy4hl06rvs+5qGqkNNP31asWkGaJ4V00ODem4xXWhTzRL7tl8LVHrlwpVoHaYvxtIeMLF3x0/LieT/z1OrP8mll1AyaQjqFUKbdy6x+UluZah1LTzHpy7e8b7iLcOpRzkBMx64VXwe1B6ZiwFhZUIyd9t6vrodP7otHidml9C2h87pym0vedROIESXzLwK6a91AH+jBI+FBZy6KYmXVO9KadVMoura5idX4OkGbX7ECXaqPj94Pn5iCvKijJqis9KJ3ZsT2zFZw+QTgbupw4Xfu7Tlv8Bu/ajU4hmTwidXmegQerKdwpBQBpMHK3UVycNjtxxyDVGkBF3VwOa/MpSN1wJ0vTwPPzVvo2f9bqRcr2MOZainknSsAXy4E976qfypn3hlYeuxvI1qGcnNzHED8zsB9AjqznJWeDCHopR8WFaYLUrRTeIDKxFcO2FnrqOrFUotXUHOnlIlRpUHewudNdOeovBeXiAvH4nwRD/d1YH7VHVY5XfDrzfpOzlWPMu9IHiPDxwFj8w23BtKXxzEz3zWy2a/eePSVksy66CyVpLxYWYgDS5mf3o7o+HUN6IY29fXuRXnAp7fx5a6FSp1m11Dxv3A8L+J+KxVZrA5PDFH0/dPT28Cxwjy67bb8eaquFW/wOtbi8rUfxhG2wwHYlnOcuD5IdaQEPzB3pFk8pD0yPgR1pgX8Bdw6nOW3a79sAAAAASUVORK5CYII=);
|
|
}
|
|
.gray-arrow{
|
|
background-image: url('data:image/png;base64,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');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.logistics-info{
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
background: #FFFFFF;
|
|
height: calc(100% - 198rpx);
|
|
padding:40rpx 48rpx 120rpx;
|
|
padding-bottom: 40rpx;
|
|
.order-detail{
|
|
display: flex;
|
|
.left{
|
|
margin-right: 20rpx;
|
|
.send,.get{
|
|
width: 40rpx;
|
|
height: 40prx;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 40rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
.send{
|
|
background: #000000;
|
|
color: white;
|
|
}
|
|
.get{
|
|
background: #E63E32;
|
|
color: white;
|
|
}
|
|
.line{
|
|
width: 2rpx;
|
|
height: 136rpx;
|
|
border-left: 2rpx dashed #D5D1D1;
|
|
margin-left: 18rpx;
|
|
}
|
|
.active{
|
|
height: 159rpx;
|
|
}
|
|
}
|
|
.right{
|
|
width: 100%;
|
|
position: relative;
|
|
.send-people,.get-people{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.send-title{
|
|
height: 100%;
|
|
}
|
|
.send-sub-title{
|
|
color: #151515;
|
|
font-size: 32rpx;
|
|
margin-bottom: 12rpx;
|
|
font-weight: bold;
|
|
}
|
|
.send-desc{
|
|
color: #888888;
|
|
font-size: 24rpx;
|
|
}
|
|
.address-enter{
|
|
font-weight: bold;
|
|
border-left: 2rpx solid #F4F4F4;
|
|
padding-left: 28rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
.get-people{
|
|
margin-bottom: 40rpx;
|
|
}
|
|
.send-people{
|
|
margin-bottom: 40rpx;
|
|
}
|
|
.line{
|
|
width: 100%;
|
|
height: 2rpx;
|
|
background-color: #F4F4F4;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
.price-detail{
|
|
border-top: 2rpx solid #F3F4F7;
|
|
padding: 40rpx 0;
|
|
.goods,.weight,.payType,.base-price{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 28rpx;
|
|
.label,.value{
|
|
font-size: 24rpx;
|
|
}
|
|
.label{
|
|
color: #888;
|
|
}
|
|
}
|
|
.goods{
|
|
margin-top: 0rpx;
|
|
}
|
|
}
|
|
.logistics-orderInfo{
|
|
.logistics-orderInfo-item.active{
|
|
.logistics-orderInfo-left{
|
|
.circle{
|
|
background-color:#E63E32!important;
|
|
}
|
|
}
|
|
}
|
|
.logistics-orderInfo-item{
|
|
display: flex;
|
|
.logistics-orderInfo-left{
|
|
.gray.circle{
|
|
background-color:#818181 ;
|
|
}
|
|
.circle{
|
|
position: relative;
|
|
right: 0rpx;
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
text-align: center;
|
|
line-height: 52rpx;
|
|
border-radius: 50%;
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
image{
|
|
width:40rpx ;
|
|
height:40rpx ;
|
|
}
|
|
}
|
|
.point{
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
border-radius: 50%;
|
|
background-color:#818181 ;
|
|
margin-right: 40rpx;
|
|
position: relative;
|
|
left: 20rpx;
|
|
}
|
|
.line{
|
|
height: 154rpx;
|
|
width: 2rpx;
|
|
border-left: 2rpx dashed #DFDFDF;
|
|
position: relative;
|
|
left: 24rpx;
|
|
}
|
|
.line.short{
|
|
height:120rpx ;
|
|
}
|
|
|
|
}
|
|
.logistics-orderInfo-right{
|
|
margin-left: 20rpx;
|
|
.status{
|
|
font-size: 32rpx;
|
|
color:#2A2929 ;
|
|
font-weight: bold;
|
|
margin-bottom: 6rpx;
|
|
}
|
|
.time{
|
|
margin-bottom: 6rpx;
|
|
}
|
|
.time,.desc{
|
|
font-size: 24rpx;
|
|
color:#818181 ;
|
|
}
|
|
.desc.active{
|
|
font-weight: bold;
|
|
color: #2A2929;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.BtnFooter{
|
|
position: fixed;
|
|
bottom: 0;
|
|
height: 172rpx;
|
|
width: 100%;
|
|
background-color: white;
|
|
|
|
.waiting-box,.pay-box{
|
|
display: flex;
|
|
.btn{
|
|
width: 276rpx;
|
|
height: 88rpx;
|
|
background: #CCCCCC;
|
|
border-radius: 44rpx;
|
|
color: white;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
line-height: 88rpx;
|
|
margin: 24rpx auto 0;
|
|
}
|
|
.share-btn{
|
|
background-color:#E84134;
|
|
margin-left: 20rpx;
|
|
}
|
|
.cancel-order-btn{
|
|
background-color: white;
|
|
color: #191919;
|
|
border: 2rpx solid #191919;
|
|
margin-right: 20rpx;
|
|
}
|
|
.pay-btn{
|
|
width: 400rpx;
|
|
background-color:#E84134;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//地图标记
|
|
::v-deep .customCallout{
|
|
display: flex;
|
|
.content,.areaContent{
|
|
width: 108rpx;
|
|
height: 60rpx;
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
.content{
|
|
background-color:#fff ;
|
|
border-radius: 16rpx 0rpx 0rpx 16rpx;
|
|
}
|
|
.areaContent{
|
|
background-color:#F6EEEC ;
|
|
border-radius: 0 16rpx 16rpx 0;
|
|
}
|
|
.courier{
|
|
width: 206rpx;
|
|
height: 60rpx;
|
|
border-radius:20rpx ;
|
|
background-color: #fff;
|
|
font-size: 28rpx;
|
|
color:#20232A ;
|
|
text-align: center;
|
|
line-height:60rpx ;
|
|
}
|
|
} |