beefast-mini-merchant/pages/order/list/index.wxss

.order-category{
  background-color: rgba(153, 153, 153, 0.3);
  display: flex;
  border-radius: 12rpx;
  position: relative;
  padding:0 12rpx;
}
.order-category::before{
  content: '';
  position: absolute;
  top:6rpx;bottom:6rpx;
  left:6rpx;
  width:140rpx;
  background-color: #fff;
  border-radius: 8rpx;
  transition-duration: .4s;
  /* transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); */
  transition-timing-function:cubic-bezier(.26,.9,.31,.97);
}
.order-category.IMMEDIATE::before{
  right:auto;left:6rpx;
}
.order-category.SCHEDULED::before{
  left:126rpx;
}
.order-category .item{
  padding:16rpx 22rpx;
  position: relative;
  white-space: nowrap;
  font-size: 28rpx;
}
.order-category .item.current{
  font-weight: 600;
}

.top-bar{
  display: flex;
  justify-content: space-around;
  padding:40rpx 0;
}
.top-bar .item{
  font-size: 28rpx;
  padding:0 50rpx
}
.top-bar .item.current{
  font-weight: 500;
  font-size: 32rpx;
}

.search{
  margin:0 16rpx;
  background-color: #fff;
  padding:10rpx 10rpx 10rpx 40rpx;
  display: flex;
  align-items: center;
  border-radius: 60rpx;
}
.search .input{
  flex:1;
  height:56rpx;
}
.search .button{
  border-radius: 60rpx;
  font-size: 28rpx;
  padding:14rpx 30rpx;
  line-height: 1;
  font-weight: normal;
  background-color: rgba(153, 153, 153, 0.3);
}



.package-list .item{
  margin:16rpx;
  background-color: #ffffff;
  border-radius: 18rpx;
  color: #555555;
  padding:20rpx;
  position: relative;
}
.package-list .item:first-child{
  margin-top:0;
  background-color: red;
}
.package-list .item .item-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom:50rpx;
}
.package-list .item .item-head .tag{
  background-color: rgba(153, 153, 153, 0.1);
  border-radius: 12rpx;
  padding:16rpx 20rpx;
  font-weight: 500;
  color:#555555;
}
.package-list .item .item-head .deliver-time{
  color:#222222;
}
.package-list .item .item-head .time{
  color:#ff0000;
  font-weight: 500;
}
.package-list .item::before{
  content: '';
  position: absolute;
  width:1.2rpx;
  background-color: rgba(85, 85, 85, 0.5);
  left:38.5rpx;top:160rpx;
  bottom:250rpx;
}
.package-list .item.no-btns::before{
  bottom:100rpx;
}
.package-list .item .name{
  font-size: 40rpx;
  display: flex;
  white-space: nowrap;
}
.package-list .item .name .text{
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  flex:1;
}
.package-list .item .received-status{
  border-left: 1rpx solid #999999;
  padding-left:18rpx;
  color:var(--main-color);
}
.package-list .item .received-status.done{
  color:unset;
}
.package-list .item .merchant{
  position: relative;
  padding-left:64rpx;
  padding-bottom:80rpx;
}
.package-list .item .merchant .money{
  font-size: 40rpx;
  margin-top:24rpx;
}
.package-list .item .merchant::before{
  position: absolute;
  left:12rpx;top:12rpx;
  width:16rpx;height:16rpx;
  content: '';
  background-color: #555555;
  border-radius: 50%;
  display: inline-block;
}

.package-list .item .merchant::before,
.package-list .item .address::before{
  position: absolute;
  content: '商';
  left:0;top:0;
  width:40rpx;height:40rpx;
  color:#fff;
  font-size: 24rpx;
  text-align: center;
  line-height: 40rpx;
  border-radius: 50%;
}

.package-list .item .address::before{
  content: '送';
  background-color: var(--main-color);
}

.package-list .item .address{
  padding-left:64rpx;
  position: relative;
  padding-bottom:20rpx;
}
.package-list .item .address .title{
  color:var(--main-font-color);
  font-size: 40rpx;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.package-list .item .address .sub-title{
  font-size: 32rpx;
  margin-top:14rpx;
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.package-list .item .address .sub-title .make-phone-tap-area{
  padding:10rpx
}
.package-list .item .address .sub-title .make-phone{
  border:1.2rpx solid rgba(254, 196, 0, 0.5);
  border-radius: 50%;
  color: rgb(255, 195, 0);
  padding:10rpx;
  font-size:24rpx;
}
/* .package-list .item.is-new-order .address .sub-title::before{
  content:'新';
  background-color:#ff0000;
  color:#fff;
  font-size: 24rpx;
  margin-right: 12rpx;
  border-radius: 8rpx;
  padding:6rpx 8rpx;
} */

.package-list .item .btns{
  display: flex;
  gap:24rpx;
  margin-top:30rpx;

}
.package-list .item .btns .button{
  height:96rpx;
  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;
}
.package-list .item .btns .more-btn{
  width:200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.package-list .item .btns .more-btn .icon,
.package-list .item .btns .more-btn .icon::before,
.package-list .item .btns .more-btn .icon::after{
  width:16rpx;height:16rpx;
  background: #555555;
  border-radius: 50%;
  position: relative;
  overflow: visible;
}
.package-list .item .btns .more-btn .icon::before{
  content:'';
  position:absolute;
  left:-36rpx;top:0;
}
.package-list .item .btns .more-btn .icon::after{
  content:'';
  position:absolute;
  left:36rpx;top:0;
}
.package-list .item .btns .more-btn[disabled]{
  color:#999;
  border-color:rgb(221, 219, 219);
}
.package-list .item .btns .swipe-button{
  height:96rpx;
  flex:1;
}