Fuelwx/components/orderItemInfo/orderItemInfo.wxss

.orderItemInfoContainer{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 15rpx;
  background-color: #FFFFFF;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.orderInfoBox{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
}
.nozzleAndStatus{
  display: flex;
  justify-content: center;
  width: 100%;
}
.nozzle{
  font-weight: 600;
}
.status{
  position: absolute;
  font-weight: 600;
  margin-left: 70%;
}

.orderInfo{
  width: 100%;
  overflow: hidden;
  transition: height 0.3s ease-in-out; /* 添加过渡效果 */
}

.mainInfo{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.mainInfo image{
  width: 150rpx;
  height: 150rpx;
  flex-grow: 1;
}

.oilInfo{
  display: flex;
  flex-direction: column;
  flex-grow: 3;
}
.oil{
  color: #d92610;
  font-size: large;
  font-weight: 550;
  margin-bottom: 3%;
}
.volume{
  color: #878787;
  font-size: small;
}

.amountBox{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-grow: 3;
}
.mainAmount{
  font-size: larger;
  font-weight: 600;
  margin-bottom: 3%;
}

.amountBox image {
  width: 40rpx;
  height: 40rpx;
  margin-top: 3%;
  transition: transform 0.3s ease-in-out;
}

.line{
  background-color: #e5e5e5;
  height: 1rpx;
  width: 105%;
  margin: 3% 0%;
}

.orderDetailInfo{
  display: flex;
  flex-direction: column;
  width: 100%;
}
.orderDetailInfo view{
  display: flex;
  justify-content: space-between;
}
.orderDetailInfo text{
  color: #838383;
  font-size: small;
  margin: 1% 0%;
}

.botton{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d81e07;
  color: #FFFFFF;
  width: 100%;
  height: 5vh;
  font-size: small;
  border-radius: 0 0 15rpx 15rpx ;
  margin-top: 3%;
}