.orderItemContainer{ display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 3%; margin-bottom: 3%; } .dateTime { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; } .timeAndStatus{ display: flex; flex-direction: column; align-items: center; } .middle { display: flex; flex-direction: row; align-items: center; width: 90%; border-bottom: 2rpx dashed #e1e1e2; } .middle image{ width: 150rpx; height: 150rpx; } .orderInfo{ width: 50%; height: 100%; display: flex; flex-direction: column; justify-content: space-around; } .nozzleAndVolume{ display: flex; width: 60%; justify-content: space-between; align-items: center; margin-top: 3%; } .nozzle { color: #ffffff; font-weight: 600; font-size: small; background-color: #ca5a50; border-radius: 10%; } .volume { color: #ff4e0e; font-size: large; } .bottom { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 5%; width: 90%; } .amount { display: flex; flex-direction: row; font-weight: 600; } .botton{ display: flex; width: 60%; justify-content: space-between; } .botton button{ width: 45%; background-color: transparent; border: 1rpx solid #b6df96; font-weight: 500; display: flex; align-items: center; justify-content: center; padding: 5px; }