You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
huazhiyu/pages/OrderDetails/OrderDetails.scss

284 lines
4.7 KiB

.page{
position: relative;
min-height:calc(100vh - 90rpx);
background-color: #f6f6f6;
}
/* 订单状态 */
.order-status{
// width: 100%;
margin:24rpx;
border-radius:10rpx;
// background: linear-gradient(to right,$base,$change-clor);
background-color: #fff;
.status{
// display: flex;
// align-items: center;
// justify-content: center;
width: 100%;
padding:24rpx;
// height: 100rpx;
text{
font-size: 30rpx;
// font-weight: bold;
color: $base;
}
.iconfont{
margin-right: 20rpx;
font-size: 38rpx;
}
.time{
margin-left:60rpx;
margin-top:10rpx;
}
}
.reason{
display: flex;
// align-items: center;
justify-content: center;
width: 100%;
height: 80rpx;
text{
font-size: 28rpx;
color: #f6f6f6;
}
}
}
/* 订单商品 */
.order-goods{
// width: 100%;
margin:24rpx;
background-color: #FFFFFF;
border-radius: 10rpx;
.goods-list{
padding: 0 4%;
.list{
.sellerInfo{
display: flex;
align-items: center;
width: 100%;
color:$base;
padding:20rpx 0;
border-bottom:1px solid #eaeaea;
}
.orderInfo,.orderNum{
display: flex;
align-items: center;
width: 100%;
}
.orderNum{
padding:20rpx 0;
}
min-height: 200rpx;
.thumb{
display: flex;
width: 30%;
text-align: center;
image{
width: 160rpx;
height: 160rpx;
border-radius: 10rpx;
}
}
.item{
width: 70%;
height: 100%;
color:$base;
.title{
display: flex;
align-items: center;
width: 100%;
height: 60rpx;
text{
font-size: 26rpx;
}
}
.num-size{
display: flex;
align-items: center;
width: 100%;
height: 60rpx;
text{
font-size: 26rpx;
color:$base;
margin-right: 20rpx;
}
text:last-child{
margin-right: 0;
}
}
.price{
display: flex;
align-items: center;
width: 100%;
height: 60rpx;
text{
font-size: 28rpx;
font-weight: bold;
color:$base;
}
}
.order-btn{
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
height: 100rpx;
.btn{
padding: 10rpx 30rpx;
color: #555555;
font-size: 26rpx;
border: 2rpx solid #EEEEEE;
border-radius: 100rpx;
}
}.order-btn{
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
height: 100rpx;
.btn{
padding: 10rpx 30rpx;
color: #555555;
font-size: 26rpx;
border: 2rpx solid #EEEEEE;
border-radius: 100rpx;
}
}
}
}
}
.contact{
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
width: 100%;
height: 100rpx;
background-color: #FFFFFF;
box-shadow: 0 0 20rpx #EEEEEE;
border-radius: 0 0 20rpx 20rpx;
text{
font-size: 28rpx;
color: #555555;
}
.iconfont{
font-size: 34rpx;
margin-right: 20rpx;
}
}
}
/* 订单信息 */
.order-info{
// width: 100%;
background-color: #FFFFFF;
border-radius: 10rpx;
margin: 24rpx;
.info-list{
padding: 0 4%;
.list{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100rpx;
border-bottom: 2rpx solid #f6f6f6;
.title{
font-size: 26rpx;
color: $base;
}
.content{
display: flex;
align-items: center;
margin-left: 20rpx;
text{
font-size: 26rpx;
// font-weight: bold;
color: $base;
}
.btn{
padding: 6rpx 20rpx;
background-color: #EEEEEE;
color: #555555;
font-size: 24rpx;
border-radius: 50rpx;
margin-left: 40rpx;
}
}
}
}
}
/* 订单明细 */
.order-details{
// width: 100%;
margin:24rpx;
background-color: #FFFFFF;
border-radius: 10rpx;
.details-list{
padding: 0 4%;
.list{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100rpx;
border-bottom: 2rpx solid #f6f6f6;
.title{
font-size: 26rpx;
color: $base;
}
.price{
font-size: 26rpx;
color: $base;
// font-weight: bold;
}
}
.action{
display: flex;
align-items: center;
justify-content: flex-end;
.price{
font-size: 32rpx;
color: $base;
}
}
}
}
.pic{
margin:24rpx;
padding-bottom:100rpx;
.title{
color:$base;
}
image{
width:300rpx;
height:300rpx;
border:1px solid #eaeaea;
margin-top:10rpx;
}
}
.btnContainer{
position: absolute;
bottom:20rpx;
width:100%;
display: flex;
right:24rpx;
text-align: right;
justify-content: flex-end;
.btnItem{
color:#ffffff;
font-size:26rpx;
background-color: $base;
padding:10rpx 20rpx;
border-radius: 10rpx;
margin:0 10rpx;
}
}