crm-app-vue3/pages/wareHouse/styles/orderList/index.scss

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