sj-miniprogram/pages/experience/form-common.scss

page {
    background-color: #F6F8FB;
}

.page-container {
    min-height: 100vh;
    background-color: #F6F8FB;
    display: flex;
    flex-direction: column;
    width: 100vw;
    box-sizing: border-box;
}



.form-content {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 24rpx 32rpx 40rpx;

    .form-card {
        background-color: #FFFFFF;
        border-radius: 32rpx;
        padding: 40rpx 32rpx;
        box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.03);
    }

    .form-item {
        margin-bottom: 48rpx;

        &:last-child {
            margin-bottom: 0;
        }

        .label-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;
            padding-left: 8rpx;

            .label {
                font-size: 28rpx;
                font-weight: 600;
                color: #333333;
            }

            .optional {
                font-size: 26rpx;
                color: #B3B3B3;
                font-weight: normal;
                margin-left: 8rpx;
            }

            .tag-missing {
                color: #FF7B3B;
                font-size: 22rpx;
                background-color: rgba(255, 123, 59, 0.1);
                padding: 4rpx 14rpx;
                border-radius: 8rpx;
                font-weight: 500;
            }
        }

        .input-box {
            position: relative;
            display: flex;
            align-items: center;
            background-color: #F8FAFC;
            border-radius: 16rpx;
            padding: 0 24rpx;
            height: 84rpx;
            transition: all 0.3s ease;
            border: 2rpx solid transparent;

            &:focus-within {
                background-color: #EBF1FA;
                border-color: rgba(31, 108, 255, 0.2);
            }

            input {
                flex: 1;
                font-size: 28rpx;
                color: #1A1A1A;
                font-weight: 500;
                height: 100%;
            }

            .ph-style {
                color: #A0AABF;
                font-size: 28rpx;
                font-weight: 400;
            }

            .arrow {
                width: 14rpx;
                height: 14rpx;
                border-right: 3.5rpx solid #B0BACC;
                border-top: 3.5rpx solid #B0BACC;
                transform: rotate(45deg);
                margin-left: 20rpx;
                border-radius: 2rpx;
            }

            .date-picker-wrap {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 100%;

                .date-block {
                    flex: 1;
                    position: relative;
                    height: 100%;
                    display: flex;
                    align-items: center;

                    &.right-text {
                        justify-content: flex-end;
                    }
                }

                .date-text {
                    font-size: 28rpx;
                    color: #1A1A1A;
                    font-weight: 500;

                    &.is-empty {
                        color: #A0AABF;
                        font-weight: 400;
                        font-size: 28rpx;
                    }
                }

                .date-separator {
                    color: #A0AABF;
                    margin: 0 30rpx;
                    font-size: 28rpx;
                    font-weight: 500;
                }
            }

            .picker-overlay {
                position: absolute;
                inset: 0;
                z-index: 10;
                opacity: 0;
                width: 100%;
                height: 100%;
            }
        }

        .textarea-box {
            background-color: #F8FAFC;
            border-radius: 16rpx;
            padding: 24rpx;
            transition: all 0.3s ease;
            border: 2rpx solid transparent;

            &:focus-within {
                background-color: #EBF1FA;
                border-color: rgba(31, 108, 255, 0.2);
            }

            textarea {
                width: 100%;
                height: 160rpx;
                font-size: 28rpx;
                color: #1A1A1A;
                line-height: 1.6;
                font-weight: 400;
            }

            .ph-style {
                color: #A0AABF;
                font-size: 28rpx;
            }
        }
    }

    .switch-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 8rpx;
        border-top: 1rpx solid #F0F4FC;
        margin-top: 20rpx;

        &:first-of-type {
            margin-top: 40rpx;
        }

        .s-label {
            font-size: 32rpx;
            font-weight: 500;
            color: #1A1A1A;
        }
    }
}

.footer-btn-area {
    width: 100vw;
    box-sizing: border-box;
    padding: 30rpx 40rpx calc(env(safe-area-inset-bottom) + 30rpx);
    background-color: transparent;

    .btn-save {
        width: 100%;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(135deg, $brand-primary 0%, #0052D9 100%);
        color: #FFFFFF;
        font-size: 28rpx;
        font-weight: 600;
        border-radius: 40rpx;
        transition: all 0.3s;
        border: none;
        box-shadow: 0 12rpx 24rpx rgba(31, 108, 255, 0.25);
        margin: 0;

        &::after {
            border: none;
        }

        &:active {
            opacity: 0.8;
            transform: scale(0.98);
            box-shadow: 0 6rpx 12rpx rgba(31, 108, 255, 0.2);
        }

        &.is-disabled {
            background: #E5E9F2;
            color: #A0AABF;
            box-shadow: none;
            opacity: 1;
            pointer-events: none;
        }
    }
}