beefast-mini-deliveryman/pages/order-detail/index.wxss

.order-detail{
  height:100vh;
}
.address-info .title{
  font-size: 40rpx;
  font-weight: 600;
}
.address-info .sub-title{
  font-size: 32rpx;
  margin-top:36rpx;
  display:flex;
  align-items: center;
}
.is-new-order .address-info .sub-title::before{
  content:'新';
  background-color:#ff0000;
  color:#fff;
  font-size: 24rpx;
  margin-right: 12rpx;
  border-radius: 8rpx;
  padding:6rpx 8rpx;
}
.address-info .deliver-time{
  margin-top:30rpx;
}
.address-info .deliver-time .time{
  color: #ff0000;
  font-weight: 500;
  margin-left: 16rpx;
}

.station-info{
  padding-bottom:0;
}
.station-info .title{
  display: flex;
  align-items: center;
  padding-bottom:32rpx;
  border-bottom: 1rpx solid rgba(153, 153, 153, 0.3);
}
.station-info .title .name{
  font-size: 40rpx;
  color: #555555;
  font-weight: 500;
  flex: 1;
}
.station-info .title .view-img-icon{
  width:40rpx;height:40rpx;
  padding:0 18rpx;
}
.station-info .title .received-status{
  font-size: 32rpx;
  border-left: 1rpx solid #999999;
  padding-left:18rpx;
  color:var(--main-color);
}
.station-info .title .received-status.done{
  color: #555555;
}
.station-info .code-item{
  height:132rpx;
  display: flex;
  align-items: center;
  border-top: 0.5px solid rgba(153, 153, 153, 0.2);
}
.station-info .code-item:first-child{
  border: 0;
}
.station-info .code-item .code{
  font-size: 52rpx;
  font-weight: 600;
  flex:1;
  color: #888888;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20rpx;
}
.station-info .code-item .same-count{
  font-size: 24rpx;
  color:#999;
}
.station-info .code-item .code.checked{
  color:var(--main-font-color);
}
.station-info .images{
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding:40rpx 0;
}
.station-info .images .empty-img{
  background: rgba(153, 153, 153, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.station-info .images .empty-img .icon{
  width:84rpx;height:84rpx;
}
.station-info .image{
  width:160rpx;height:160rpx;
  border-radius: 12rpx;
}

.steps{
  display: flex;
  justify-content: space-between;
  color: #999999;
  padding:40rpx 20rpx 28rpx 20rpx;
  position: relative;
}
.steps .item{
  flex:1;
  padding-top:36rpx;
  position: relative;
}
.steps .item.night{
  color:var(--main-font-color);
}
/* 左边线 */
.steps .item::before{
  content: '';
  height:1.2rpx;
  width:calc(50% - 20rpx);
  position: absolute;
  top:8rpx;
  left: 0;
  background-color:rgba(153, 153, 153, 0.3);
}
.steps .item.night::before{
  background-color: var(--main-color);
}
.steps .item.half-night::before{
  background-color: var(--main-color);
}
/* 右边线 */
.steps .item::after{
  content: '';
  height:1.2rpx;
  width:calc(50% - 20rpx);
  position: absolute;
  top:8rpx;
  right: 0;
  background-color:rgba(153, 153, 153, 0.3);
}
.steps .item.night::after{
  background-color: var(--main-color);
}
.steps .item .content{
  width:150rpx;
  margin: 0 auto;
  text-align: center;
  position: relative;
  overflow:visible;
}
.steps .item .name{
  font-size: 28rpx;
  position: relative;
}
/* 小圆点 */
.steps .item .name::after{
  content: '';
  position: absolute;
  width:16rpx;height:16rpx;
  background-color: #D5D5D5;
  border-radius: 50%;
  top:-35rpx;left:70rpx;
  z-index: 1;
}
.steps .item.night .name::after{
  background-color: var(--main-color);
}
.steps .item .time{
  font-size:24rpx;
  margin-top:17rpx;
}
.steps .item:first-child .content{
  margin: 0;
}
.steps .item:first-child::before{
  display: none;
}
.steps .item:first-child::after{
  width:calc(50% + (100% - 150rpx)/2 - 20rpx);
}
.steps .item:last-child .content{
  margin:0 0 0 auto;
}
.steps .item:last-child::before{
  width:calc(50% + (100% - 150rpx)/2 - 20rpx);
}
.steps .item:last-child::after{
  display: none;
}
.income{
  color: #666666;
}
.income .money{
  font-size:40rpx;
}

.order-info .row{
  display: flex;
  align-items: center;
  margin-top:30rpx;
}
.order-info .row:first-child{
  margin:0;
}
.order-info .row .key{
  color: #666666;
  min-width: 150rpx;
  text-align: right;
}
.order-info .row .value{
  flex:1;
  margin-left:30rpx;
}
.order-info .row .copy-area{
  padding:4rpx 6rpx;
}
.order-info .row .copy-btn{
  font-size: 24rpx;
  border-radius: 8rpx;
  border: 0.6rpx solid rgba(153, 153, 153, 0.5);
  padding:6rpx 12rpx;
}

.photos .title{
  font-size: 28rpx;
  font-weight: 600;
}
.photos .imgs{
  margin-top:30rpx;
  display: flex;
  gap: 20rpx;
}
.photos .imgs .image{
  width:160rpx;height:160rpx;
  border-radius: 12rpx;
}

.bottom-bar-v2{
  display: flex;
  gap:24rpx;
}

.bottom-bar-v2 .button{
  height:100rpx;
  line-height: 1;
  border-radius: 12rpx;
  border: 1.2px solid rgba(85, 85, 85, 0.5);
  color: #555555;
  font-weight: normal;
  padding:30rpx 40rpx;
  margin:0;
}
.bottom-bar-v2 .more-btn{
  width:180rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom-bar-v2 .more-btn .icon,
.bottom-bar-v2 .more-btn .icon::before,
.bottom-bar-v2 .more-btn .icon::after{
  width:16rpx;height:16rpx;
  background: #555555;
  border-radius: 50%;
  position: relative;
  overflow: visible;
}
.bottom-bar-v2 .more-btn .icon::before{
  content:'';
  position:absolute;
  left:-36rpx;top:0;
}
.bottom-bar-v2 .more-btn .icon::after{
  content:'';
  position:absolute;
  left:36rpx;top:0;
}
.bottom-bar-v2 .more-btn[disabled]{
  color:#999;
  border-color:rgb(221, 219, 219);
}
.bottom-bar-v2 .swipe-button{
  height:100rpx;
  flex:1;
}