page {
    font-size: 32rpx;
}

@mixin common {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 51px - env(safe-area-inset-bottom));
    background-color: #fafafa;
}

@mixin flex-center($justify: center) {
    display: flex;
    justify-content: $justify;
    align-items: center;
}

@mixin flex-justify($justify: space-between) {
    display: flex;
    justify-content: $justify;
}

@mixin flex-align {
    display: flex;
    align-items: center;
}

@mixin flex-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@mixin flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

@mixin flex-direction {
    display: flex;
    flex-direction: column;
}

@mixin arrow-right($size: 32rpx, $color: #7f7f7f) {
    width: 16rpx;
    height: 16rpx;
    border-top: 1px solid $color;
    border-right: 1px solid $color;
    transform: rotate(45deg);
}

@mixin ellipsis($textWidth: 100%, $line: 1) {
    max-width: $textWidth;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: $line;
    overflow: hidden;
}

// 添加客户信息、添加客户联系人页面公共样式
.client-info,
.client-contact,
.client-device {
    @include flex-direction;
    width: 100vw;
    height: 100vh;
    padding: 20rpx 24rpx;
    background-color: $gray-1;

    .form {
        flex: 1;
        overflow-y: auto;
        @include flex-direction;
        gap: 20rpx;
    }

    .btn {
        margin-top: 24rpx;
        button {
            height: 80rpx !important;
        }
    }
}

.order-content-wrapper {
    @apply flex flex-col gap-[20rpx];
    > view {
        @apply flex text-[28rpx];
        text:nth-of-type(1) {
            @apply w-[160rpx] inline-block text-[#44464A];
        }
        text:nth-of-type(2) {
            @apply flex-1;
        }
    }
}

.order-btns-wrapper {
    @apply border-t border-[#F9F9F9] px-[18rpx] flex justify-end items-center flex-wrap;
    u-button {
        @apply mr-2 my-1;
        button {
            padding: 0 46rpx !important;
        }
        &:last-child {
            @apply mr-0;
        }
    }
}
// 设置页面的背景图片
.page-bg-img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}

.u-textarea {
    padding-top: 6rpx !important;
    padding-bottom: 6rpx !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    // background-color: $gray-1 !important;
}

// 显示字段的表单，不需要输入
.c-form-item-wrapper {
    @apply px-[32rpx];
    .item {
        @apply flex py-[10rpx] items-start;
        view:nth-of-type(1) {
            @apply w-[160rpx] text-gray2 mr-1;
        }
        view:nth-of-type(2) {
            @apply flex-1 overflow-auto;
        }
        &.with-border {
            @apply border-b border-gray;
        }
        .u-input {
            width: 100% !important;
        }
        &.black {
            view:nth-of-type(1) {
                @apply text-lightblack;
            }
        }
    }
    .whole-row-label {
        @apply h-[80rpx] leading-[80rpx];
        &.required:after {
            content: ' *';
            @apply text-error mr-1;
        }
    }
}
// 需要输入的表单
.c-input-field-item {
    @apply flex justify-between py-2 items-center h-[100rpx];
    .value-item {
        @apply py-1 px-2 ml-2 border border-[#DFDFDF] rounded-md;
        &.active {
            @apply border-primary;
        }
    }
    &.with-border {
        @apply border-b border-gray;
    }
    .label {
        &.required:after {
            content: ' *';
            @apply text-error mr-1;
        }
    }
}

.page-common-footer {
    @apply fixed bottom-0 left-0 bg-white w-full pt-3 pl-3 flex justify-between items-center z-10;
    padding-bottom: Max(env(safe-area-inset-bottom), 24rpx);
    u-button {
        @apply flex-1 mr-3;
        :deep(button) {
            @apply flex-1 h-[40px];
        }
    }
}

.field-required::after {
    content: ' *';
    @apply text-error;
}
// 客户库、合同管理公共样式
.client,
.contract {
    height: 100%;
    @include flex-direction;
    .search {
        width: 100%;
        padding: 14rpx 0;
        background-color: $white-1;
    }
    .list {
        flex: 1;
        @include flex-direction;
        gap: 20rpx;
        padding: 20rpx 24rpx 0;
        background-color: $gray-1;
    }
    .float-btn {
        position: fixed;
        right: 40rpx;
        bottom: 200rpx;
        > view {
            @include flex-center;
            width: 80rpx;
            height: 80rpx;
            border-radius: 999px;
            background-color: $blue-1;
            color: $white-1;
        }
    }
}
.u-textarea__count {
    background: transparent !important;
}

.overflow-tooltip {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    word-break: break-all;
}
// 上传后图片布局
.upload-wrapper {
    .u-upload__wrap {
        // display: grid !important;
        // grid-template-columns: repeat(4, 1fr) !important;
        // gap: 20rpx !important;
    }
}

.gray-btn {
    :deep(button) {
        @apply text-primary bg-[#f0f0fb] border-none;
    }
}
@media (max-width: 375px) {
    .upload-wrapper {
        .u-upload__wrap {
            // display: grid !important;
            // grid-template-columns: repeat(auto-fit, minmax(160rpx, 1fr)) !important;
            // gap: 20rpx !important;
        }
    }
}
.upload-wrapper {
    &.column-4 {
        .u-upload__wrap {
            // grid-template-columns: repeat(4, 1fr) !important;
        }
    }
}
.u-tabs__wrapper__nav__item {
    > view {
        width: 100% !important;
        height: 100% !important;
    }
}

.difficult-reason {
    @apply p-[32rpx];
    .title {
        @apply text-[#3D3D3D] text-base mb-3;
    }
    .item {
        @apply flex items-center mb-3;
        .serial-number {
            @apply w-[40rpx] h-[40rpx] rounded-[50%] bg-[#8491A5] text-white mr-3 text-center text-sm;
        }
        u-input {
            @apply flex-1 overflow-auto;
        }
    }
}
.u-tabbar {
    .u-tabbar__content {
        z-index: 999 !important;
    }
}