sj-miniprogram/pages/experience/position-select.scss

.position-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;

        .search-box {
            display: flex;
            align-items: center;
            background-color: #F8FAFC;
            border-radius: 40rpx;
            padding: 0 30rpx;
            height: 72rpx;

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

    .content-body {
        flex: 1;
        display: flex;
        overflow: hidden;
        border-top: 1rpx solid #F0F4FC;

        .left-menu {
            width: 220rpx;
            background-color: #F8FAFC;
            height: 100%;
            flex-shrink: 0;

            .menu-item {
                padding: 32rpx 20rpx;
                font-size: 28rpx;
                color: #4D5666;
                text-align: left;
                padding-left: 24rpx;
                position: relative;

                &.active {
                    background-color: #FFFFFF;
                    color: #1F6CFF;
                    font-weight: 600;

                    .active-indicator {
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 8rpx;
                        height: 32rpx;
                        background-color: #1F6CFF;
                        border-top-right-radius: 8rpx;
                        border-bottom-right-radius: 8rpx;
                    }
                }
            }
        }

        .right-content {
            flex: 1;
            height: 100%;
            background-color: #FFFFFF;
            padding: 0 30rpx;
            box-sizing: border-box;

            .category-section {
                padding-top: 30rpx;
                padding-bottom: 20rpx;

                .section-title {
                    font-size: 28rpx;
                    font-weight: bold;
                    color: #1A1A1A;
                    margin-bottom: 24rpx;
                }

                .tags-grid {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 20rpx;

                    .tag-item {
                        width: calc(50% - 10rpx);
                        background-color: #F8FAFC;
                        color: #4D5666;
                        font-size: 24rpx;
                        text-align: center;
                        padding: 18rpx 0;
                        border-radius: 8rpx;
                        box-sizing: border-box;

                        &:active {
                            background-color: #EBF1FA;
                            color: #1F6CFF;
                        }

                        &.selected {
                            background-color: #EBF1FA;
                            color: #1F6CFF;
                            font-weight: 600;
                        }
                    }
                }
            }
        }
    }

    .search-results {
        flex: 1;
        background-color: #FFFFFF;

        .result-list {
            padding: 0 40rpx;

            .result-item {
                padding: 30rpx 0;
                border-bottom: 1rpx solid #F0F4FC;
                font-size: 30rpx;
                color: #333333;

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

                &.selected {
                    color: #1F6CFF;
                    font-weight: 500;
                }
            }
        }

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

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