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;
}
.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 .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;
}
.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;
}
/* .package-info{
  padding:56rpx 20rpx 40rpx 20rpx;
  position: relative;
  color: #555555;
}

.package-info::before{
  content: '';
  position: absolute;
  width:1.2rpx;
  background-color: rgba(85, 85, 85, 0.5);
  left:38.5rpx;top:90rpx;
  bottom:130rpx;
} */

/* .package-info .name{
  font-size: 40rpx;
  font-weight: 600;
  flex: 1;
}
.package-info .received-status{
  border-left: 1rpx solid #999999;
  padding-left:18rpx;
} */
/* .package-info .package{
  font-size:32rpx;
  margin-top:24rpx;
  display: flex;
} */

/* .package-info .station-list .sl-item{
  position: relative;
  padding-left:64rpx;
  padding-bottom:50rpx;
  display: flex;
  align-items: center;
}
.package-info .station-list .sl-item:first-child::before{
  content: '取';
  left:0;top:0;
  width:40rpx;height:40rpx;
  color:#fff;
  font-size: 24rpx;
  text-align: center;
  line-height: 40rpx;
}
.package-info .station-list .sl-item::before{
  position: absolute;
  left:12rpx;top:12rpx;
  width:16rpx;height:16rpx;
  content: '';
  background-color: #555555;
  border-radius: 50%;
  display: inline-block;
}
.package-list .item .station-list .sl-item{
  padding-bottom:50rpx;
} */
/* .package-info .package .value{
  flex:1;
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
} */

/* .package-info .address{
  padding-left:64rpx;
  position: relative;
}
.package-info .address::before{
  content: '送';
  position: absolute;
  top:0;left:0;
  width:40rpx;height:40rpx;
  background-color: var(--main-color);
  border-radius: 50%;
  color:#fff;
  line-height: 40rpx;
  text-align: center;
  font-size: 24rpx;
}
.package-info .address .title{
  color:var(--main-font-color);
  font-size: 40rpx;
  font-weight: 600;
}
.package-info .address .sub-title{
  font-size: 32rpx;
  margin-top:24rpx
} */

.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;
}
.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;
}
.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;
}