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