sj-miniprogram/pages/intention/company-select.scss

.company-select-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #FFFFFF;

    .search-header {
        padding: 20rpx 40rpx;
        background-color: #FFFFFF;
        position: sticky;
        top: 0;
        z-index: 10;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.02);

        .search-box {
            display: flex;
            align-items: center;
            background-color: #F8FAFC;
            border-radius: 40rpx;
            padding: 0 30rpx;
            height: 72rpx;
            border: 2rpx solid transparent;
            transition: all 0.25s;

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

            .icon-search {
                width: 24rpx;
                height: 24rpx;
                border: 3rpx solid #A0AABF;
                border-radius: 50%;
                position: relative;
                margin-right: 16rpx;
                flex-shrink: 0;

                &::after {
                    content: '';
                    position: absolute;
                    width: 8rpx;
                    height: 3rpx;
                    background-color: #A0AABF;
                    bottom: -2rpx;
                    right: -4rpx;
                    transform: rotate(45deg);
                }
            }

            input {
                flex: 1;
                font-size: 26rpx;
                color: #333333;
                background: transparent;
            }
        }
    }

    .company-list {
        flex: 1;
        padding: 0 40rpx;
        box-sizing: border-box;
        overflow-y: scroll;

        .empty-state {
            padding-top: 200rpx;
            text-align: center;

            .empty-text {
                font-size: 28rpx;
                color: #A0AABF;
            }
        }

        .company-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 36rpx 10rpx;
            border-bottom: 1rpx solid #F0F4FC;
            transition: background-color 0.2s;

            &:active {
                background-color: #F8FAFC;
            }

            .company-name {
                font-size: 30rpx;
                color: #1A1A1A;
                flex: 1;
                padding-right: 20rpx;
            }

            .checkbox {
                width: 44rpx;
                height: 44rpx;
                border-radius: 50%;
                border: 2rpx solid #C4CEDB;
                box-sizing: border-box;
                display: flex;
                justify-content: center;
                align-items: center;
                transition: all 0.2s;

                &.checked {
                    border-color: #1F6CFF;
                    background-color: #1F6CFF;
                    box-shadow: 0 4rpx 10rpx rgba(31, 108, 255, 0.2);

                    &::after {
                        content: '';
                        width: 10rpx;
                        height: 20rpx;
                        border-right: 4rpx solid #FFFFFF;
                        border-bottom: 4rpx solid #FFFFFF;
                        transform: rotate(45deg) translate(-2rpx, -4rpx);
                    }
                }
            }
        }
    }

    .footer-btn-area {
        padding: 30rpx 40rpx calc(env(safe-area-inset-bottom) + 30rpx);
        background-color: #FFFFFF;
        box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.04);

        .btn-confirm {
            width: 100%;
            height: 88rpx;
            background: linear-gradient(135deg, #1F6CFF 0%, #0052D9 100%);
            color: #FFFFFF;
            font-size: 32rpx;
            font-weight: 500;
            border-radius: 44rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 12rpx 24rpx rgba(31, 108, 255, 0.25);
            margin: 0;

            &:active {
                transform: scale(0.98);
                opacity: 0.9;
            }

            &::after {
                border: none;
            }
        }
    }
}