::v-deep .u-transition{ z-index: 999 !important;//解决预览图片层级问题 } ::v-deep .order_list{ overflow: hidden; padding: 0 20rpx; font-size: 28rpx; color: #333333; background-color: #f5f7fa; min-height: 100vh; font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; .search_form{ display: flex; align-items: center; justify-content: space-between; gap: 15rpx; margin-top: 20rpx; background-color: #ffffff; border-radius: 16rpx; padding: 20rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05); transition: all 0.3s ease; } .btns{ display: flex; gap: 16rpx; padding: 24rpx 20rpx; background-color: #ffffff; border-top: 1rpx solid #f0f2f5; border-radius: 16rpx 16rpx 0 0; margin-top: 20rpx; button{ flex: 1; border-radius: 12rpx; height: 88rpx; font-size: 30rpx; font-weight: 500; transition: all 0.3s ease; &:hover{ transform: translateY(-2rpx); box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); } } } .list_wrap{ margin-top: 20rpx; overflow: auto; height: calc(100vh - 280rpx); width: 100%; .order_item{ background-color: #ffffff; border-radius: 20rpx; padding: 32rpx; margin-bottom: 20rpx; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06); line-height: 52rpx; transition: all 0.3s ease; position: relative; overflow: hidden; &::before{ content: ''; position: absolute; top: 0; left: 0; width: 6rpx; height: 100%; background: linear-gradient(180deg, #1a7cec 0%, #5FB8FF 100%); border-radius: 20rpx 0 0 20rpx; } .order_col_1{ display: grid; flex: 1; margin-top: 24rpx; padding-top: 24rpx; border-top: 1rpx solid #f0f2f5; &:first-child{ margin-top: 0; padding-top: 0; border-top: none; } } .order_col_2{ display: grid; grid-template-columns: repeat(2, 1fr); } .order_info{ font-size: 26rpx; display: flex; align-items: center; color: #666666; &::before{ content: ''; width: 6rpx; height: 6rpx; border-radius: 50%; background-color: #4A90E2; margin-right: 12rpx; } } .title{ font-weight: 600; font-size: 30rpx; color: #1a1a1a; } .money{ font-size: 30rpx; font-weight: 700; color: #f13939; background: linear-gradient(135deg, #FF6B6B 0%, #f7a071 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .scroll_img{ width: calc(100vw - 112rpx); border-radius: 12rpx; overflow: hidden; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08); } } } .search_pop{ padding: 48rpx 24rpx; background-color: #ffffff; border-radius: 20rpx 20rpx 0 0; .u-form-item{ margin-bottom: 36rpx; &:last-child{ margin-bottom: 0; } } .u-form-item__label{ font-size: 28rpx; font-weight: 500; color: #333333; margin-bottom: 12rpx; display: block; } .u-input{ border-radius: 12rpx; border: 2rpx solid #f0f2f5; transition: all 0.3s ease; &:focus{ border-color: #4A90E2; box-shadow: 0 0 0 4rpx rgba(74, 144, 226, 0.1); } } } // 美化滑动操作按钮 .u-swipe-action__item{ border-radius: 0 20rpx 20rpx 0; overflow: hidden; .u-swipe-action__content{ border-radius: 20rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 500; transition: all 0.3s ease; &:hover{ opacity: 0.9; } } } // 美化空状态 .u-empty{ margin-top: 120rpx; .u-empty__text{ font-size: 28rpx; color: #999999; margin-top: 20rpx; } .u-empty__icon{ width: 160rpx; height: 160rpx; } } // 自定义滚动条 ::-webkit-scrollbar{ width: 6rpx; height: 6rpx; } ::-webkit-scrollbar-track{ background: #f1f1f1; border-radius: 3rpx; } ::-webkit-scrollbar-thumb{ background: #c1c1c1; border-radius: 3rpx; } ::-webkit-scrollbar-thumb:hover{ background: #a8a8a8; } } // 响应式设计 @media (max-width: 375px) { ::v-deep .order_list{ .list_wrap{ .order_item{ padding: 28rpx; .order_col_2{ grid-template-columns: 1fr; } } } } }