.container.data-v-cc3734ea { width: 100%; height: 100vh; background-color: #F8F9FB; position: relative; overflow: hidden; } .loading-box.data-v-cc3734ea { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 80vh; padding-top: 200rpx; } .loading-box .loading-spinner.data-v-cc3734ea { width: 60rpx; height: 60rpx; border: 6rpx solid #f3f3f3; border-top: 6rpx solid #1F6CFF; border-radius: 50%; animation: spin-cc3734ea 1s linear infinite; } .loading-box .loading-text.data-v-cc3734ea { margin-top: 20rpx; font-size: 28rpx; color: #999; } @keyframes spin-cc3734ea { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .fixed-header.data-v-cc3734ea { position: fixed; top: 0; left: 0; right: 0; z-index: 100; } .gradient-section.data-v-cc3734ea { background: linear-gradient(180deg, #1F6CFF 0%, #FFFFFF 100%); padding: 0 40rpx 20rpx; } .search-bar.data-v-cc3734ea { background: rgba(255, 255, 255, 0.95); border-radius: 40rpx; display: flex; align-items: center; padding: 0 30rpx; box-shadow: 0 4rpx 20rpx rgba(31, 108, 255, 0.1); margin-right: 200rpx; height: 100%; } .search-bar .search-icon.data-v-cc3734ea { width: 32rpx; height: 32rpx; margin-right: 20rpx; opacity: 0.4; } .search-bar .search-input.data-v-cc3734ea { flex: 1; font-size: 28rpx; } .search-bar .ph-color.data-v-cc3734ea { color: #999; } .white-section.data-v-cc3734ea { background: #FFF; padding-bottom: 0; } .horizontal-tabs-wrap.data-v-cc3734ea { display: flex; justify-content: space-between; align-items: center; padding: 20rpx 40rpx; } .horizontal-tabs-wrap .main-tabs.data-v-cc3734ea { display: flex; gap: 40rpx; } .horizontal-tabs-wrap .main-tabs .main-tab.data-v-cc3734ea { font-size: 34rpx; font-weight: bold; color: #888; position: relative; padding-bottom: 10rpx; } .horizontal-tabs-wrap .main-tabs .main-tab.active.data-v-cc3734ea { color: #1A1A1A; } .horizontal-tabs-wrap .main-tabs .main-tab.active.data-v-cc3734ea:after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 36rpx; height: 6rpx; background: #1F6CFF; border-radius: 3rpx; } .horizontal-tabs-wrap .record-text.data-v-cc3734ea { font-size: 28rpx; color: #1F6CFF; } .filter-row.data-v-cc3734ea { display: flex; justify-content: space-between; padding: 20rpx 40rpx 20rpx; } .filter-row .filter-item.data-v-cc3734ea { font-size: 28rpx; color: #333; font-weight: 500; display: flex; align-items: center; transition: all 0.3s; } .filter-row .filter-item.active.data-v-cc3734ea { color: #1F6CFF; } .filter-row .filter-item .arrow-down.data-v-cc3734ea { width: 24rpx; height: 24rpx; margin-left: 8rpx; opacity: 0.3; transition: transform 0.3s; } .filter-row .filter-item .arrow-down.rotate.data-v-cc3734ea { transform: rotate(180deg); opacity: 0.8; } .dropdown-wrapper.data-v-cc3734ea { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 100%); z-index: 99; } .dropdown-wrapper .mask.data-v-cc3734ea { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); animation: fadeIn-cc3734ea 0.3s ease-out; } .dropdown-wrapper .dropdown-content.data-v-cc3734ea { background: #FFF; position: relative; z-index: 1; border-top: 1rpx solid #F0F0F0; border-radius: 0 0 32rpx 32rpx; padding: 10rpx 0; max-height: 60vh; overflow-y: auto; animation: slideDown-cc3734ea 0.3s ease-out; } .dropdown-wrapper .dropdown-content .option-item.data-v-cc3734ea { display: flex; justify-content: space-between; align-items: center; padding: 30rpx 40rpx; font-size: 28rpx; color: #333; } .dropdown-wrapper .dropdown-content .option-item.data-v-cc3734ea:active { background: #F8F9FB; } .dropdown-wrapper .dropdown-content .option-item.selected.data-v-cc3734ea { color: #1F6CFF; font-weight: bold; } .dropdown-wrapper .dropdown-content .option-item .check-icon.data-v-cc3734ea { width: 32rpx; height: 32rpx; } @keyframes fadeIn-cc3734ea { from { opacity: 0; } to { opacity: 1; } } @keyframes slideDown-cc3734ea { from { transform: translateY(-20%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .scroll-body.data-v-cc3734ea { position: fixed; left: 0; right: 0; bottom: 0; background-color: #F8F9FB; } .assessment-list.data-v-cc3734ea { padding: 30rpx 40rpx; display: flex; flex-direction: column; gap: 30rpx; } .training-list.data-v-cc3734ea { padding: 30rpx 40rpx; display: flex; flex-direction: column; gap: 30rpx; } .training-card.data-v-cc3734ea { background: #FFF; border-radius: 32rpx; padding: 32rpx; box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03); } .training-card .t-title.data-v-cc3734ea { font-size: 32rpx; font-weight: bold; color: #1A1A1A; line-height: 1.4; display: block; margin-bottom: 20rpx; } .training-card .tag-row.data-v-cc3734ea { display: flex; gap: 10rpx; margin: 12rpx 0; } .training-card .tag-row .tag-badge.data-v-cc3734ea { font-size: 20rpx; color: #999; background: #F5F7FA; padding: 6rpx 14rpx; border-radius: 6rpx; } .training-card .tag-row .tag-badge.type-tag.data-v-cc3734ea { color: #1F6CFF; background: rgba(31, 108, 255, 0.08); } .training-card .tag-row .tag-badge.category-tag.data-v-cc3734ea { color: #FF9500; background: rgba(255, 149, 0, 0.08); } .training-card .info-list.data-v-cc3734ea { margin-top: 24rpx; display: flex; flex-direction: column; gap: 16rpx; } .training-card .info-list .info-item.data-v-cc3734ea { display: flex; align-items: center; } .training-card .info-list .info-item .i-icon.data-v-cc3734ea { width: 28rpx; height: 28rpx; margin-right: 16rpx; opacity: 0.5; } .training-card .info-list .info-item .i-text.data-v-cc3734ea { font-size: 26rpx; color: #666; } .training-card .info-list .info-item .ending-tag.data-v-cc3734ea { font-size: 22rpx; color: #FF4D4F; margin-left: 20rpx; } .video-card.data-v-cc3734ea { background: #FFF; border-radius: 32rpx; overflow: hidden; box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03); } .video-card .video-cover-wrap.data-v-cc3734ea { width: 100%; height: 380rpx; position: relative; } .video-card .video-cover-wrap .v-cover.data-v-cc3734ea { width: 100%; height: 100%; } .video-card .video-cover-wrap .play-overlay.data-v-cc3734ea { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .video-card .video-cover-wrap .play-overlay .play-icon.data-v-cc3734ea { width: 100rpx; height: 100rpx; opacity: 0.9; } .video-card .video-cover-wrap .v-bottom-info.data-v-cc3734ea { position: absolute; left: 0; right: 0; bottom: 0; height: 80rpx; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); padding: 0 24rpx; display: flex; justify-content: space-between; align-items: center; color: #FFF; font-size: 24rpx; } .video-card .video-cover-wrap .v-bottom-info .m-icon.data-v-cc3734ea { width: 24rpx; height: 24rpx; margin-right: 8rpx; } .video-card .video-cover-wrap .v-bottom-info .play-mini-icon.data-v-cc3734ea { width: 0; height: 0; border-left: 12rpx solid #FFF; border-top: 8rpx solid transparent; border-bottom: 8rpx solid transparent; margin-right: 10rpx; } .video-card .video-cover-wrap .v-bottom-info .v-info-left.data-v-cc3734ea, .video-card .video-cover-wrap .v-bottom-info .v-info-right.data-v-cc3734ea { display: flex; align-items: center; } .video-card .video-cover-wrap .live-status.data-v-cc3734ea { position: absolute; right: 24rpx; top: 24rpx; border-radius: 8rpx; padding: 4rpx 12rpx; font-size: 22rpx; color: #FFF; } .video-card .video-cover-wrap .live-status.streaming.data-v-cc3734ea { background: #FF4D4F; } .video-card .video-cover-wrap .live-status.upcoming.data-v-cc3734ea { background: #1F6CFF; } .video-card .video-cover-wrap .live-status.not-started.data-v-cc3734ea { background: #999; } .video-card .video-cover-wrap .live-status.finished.data-v-cc3734ea { background: #666; } .video-card .v-content.data-v-cc3734ea { padding: 24rpx; } .video-card .v-content .v-title.data-v-cc3734ea { font-size: 32rpx; font-weight: bold; color: #1A1A1A; } .video-card .v-content .v-title-row.data-v-cc3734ea { display: flex; justify-content: space-between; align-items: center; } .video-card .v-content .spectators.data-v-cc3734ea { display: flex; align-items: center; color: #999; font-size: 24rpx; } .video-card .v-content .spectators .s-icon.data-v-cc3734ea { width: 24rpx; height: 24rpx; margin-right: 8rpx; } .job-card.data-v-cc3734ea { background: #FFF; border-radius: 32rpx; padding: 24rpx; display: flex; box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03); position: relative; } .job-card .card-left.data-v-cc3734ea { width: 220rpx; height: 220rpx; flex-shrink: 0; margin-right: 24rpx; } .job-card .card-left .cover-img.data-v-cc3734ea { width: 100%; height: 100%; border-radius: 16rpx; } .job-card .card-right.data-v-cc3734ea { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .job-card .card-right .top-line.data-v-cc3734ea { display: flex; justify-content: space-between; align-items: center; } .job-card .card-right .top-line .job-title.data-v-cc3734ea { font-size: 34rpx; font-weight: bold; color: #1A1A1A; } .job-card .card-right .top-line .job-level-tag.data-v-cc3734ea { font-size: 22rpx; color: #1F6CFF; background: rgba(31, 108, 255, 0.1); padding: 4rpx 12rpx; border-radius: 8rpx; } .job-card .card-right .tag-row.data-v-cc3734ea { display: flex; gap: 10rpx; margin: 12rpx 0; } .job-card .card-right .tag-row .tag-badge.data-v-cc3734ea { font-size: 20rpx; color: #999; background: #F5F7FA; padding: 6rpx 14rpx; border-radius: 6rpx; } .job-card .card-right .tag-row .tag-badge.type-tag.data-v-cc3734ea { color: #1F6CFF; background: rgba(31, 108, 255, 0.08); } .job-card .card-right .tag-row .tag-badge.category-tag.data-v-cc3734ea { color: #FF9500; background: rgba(255, 149, 0, 0.08); } .job-card .card-right .desc-text.data-v-cc3734ea { font-size: 24rpx; color: #888; line-height: 1.4; margin-bottom: 16rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .job-card .card-right .btn-wrap.data-v-cc3734ea { display: flex; justify-content: flex-end; gap: 10rpx; } .job-card .card-right .btn-wrap .consult-btn.data-v-cc3734ea { margin: 0; background: #FFB700; color: #FFF; border-radius: 30rpx; height: 56rpx; line-height: 56rpx; padding: 0 36rpx; font-size: 26rpx; font-weight: bold; } .job-card .card-right .btn-wrap .consult-btn.data-v-cc3734ea::after { border: none; } .job-card .card-right .btn-wrap .start-btn.data-v-cc3734ea { margin: 0; background: linear-gradient(135deg, #1F6CFF 0%, #0056FF 100%); color: #FFF; border-radius: 30rpx; height: 56rpx; line-height: 56rpx; padding: 0 36rpx; font-size: 26rpx; font-weight: bold; } .job-card .card-right .btn-wrap .start-btn.data-v-cc3734ea::after { border: none; } .job-card .card-right .btn-wrap .apply-btn.data-v-cc3734ea { margin: 0; background: #1F6CFF; color: #FFF; border-radius: 30rpx; height: 56rpx; line-height: 56rpx; padding: 0 36rpx; font-size: 26rpx; font-weight: bold; } .job-card .card-right .btn-wrap .apply-btn.data-v-cc3734ea::after { border: none; } .job-card .card-right .btn-wrap .applied-btn.data-v-cc3734ea { margin: 0; background: #E0E0E0; color: #999; border-radius: 30rpx; height: 56rpx; line-height: 56rpx; padding: 0 36rpx; font-size: 26rpx; font-weight: bold; } .job-card .card-right .btn-wrap .applied-btn.data-v-cc3734ea::after { border: none; } .job-card .card-right .btn-wrap .retry-btn.data-v-cc3734ea { margin: 0; background: #E8F0FF; color: #2B5CFF; border-radius: 30rpx; height: 56rpx; line-height: 56rpx; padding: 0 36rpx; font-size: 26rpx; font-weight: bold; } .job-card .card-right .btn-wrap .retry-btn.data-v-cc3734ea::after { border: none; } .job-card .card-right .btn-wrap .report-btn.data-v-cc3734ea { margin: 0; background: #E8F0FF; color: #2B5CFF; border-radius: 30rpx; height: 56rpx; line-height: 56rpx; padding: 0 36rpx; font-size: 26rpx; font-weight: bold; } .job-card .card-right .btn-wrap .report-btn.data-v-cc3734ea::after { border: none; } .job-card .card-right .btn-wrap .report-btn.disabled.data-v-cc3734ea { background: #F0F2F5; color: #C0C4CC; pointer-events: none; } .text-ellipsis-2.data-v-cc3734ea { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .no-data.data-v-cc3734ea { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100rpx 0; } .no-data .empty-icon.data-v-cc3734ea { width: 200rpx; height: 200rpx; margin-bottom: 20rpx; opacity: 0.5; } .no-data text.data-v-cc3734ea { font-size: 28rpx; color: #999; } .no-more.data-v-cc3734ea { text-align: center; font-size: 26rpx; color: #BBB; padding: 40rpx 0; } .tabbar-placeholder.data-v-cc3734ea { height: 180rpx; } .card-anim.data-v-cc3734ea { animation: fadeUp-cc3734ea 0.6s ease-out backwards; } .card-anim.data-v-cc3734ea:nth-child(1) { animation-delay: 0.1s; } .card-anim.data-v-cc3734ea:nth-child(2) { animation-delay: 0.2s; } .card-anim.data-v-cc3734ea:nth-child(3) { animation-delay: 0.3s; } .card-anim.data-v-cc3734ea:nth-child(4) { animation-delay: 0.4s; } .card-anim.data-v-cc3734ea:nth-child(5) { animation-delay: 0.5s; } @keyframes fadeUp-cc3734ea { from { opacity: 0; transform: translateY(30rpx); } to { opacity: 1; transform: translateY(0); } }