.home-container.data-v-4978fed5 { background: #f7f8fa; min-height: 100vh; padding-bottom: 120rpx; } .home-header.data-v-4978fed5 { display: flex; align-items: center; padding: 32rpx 24rpx 0 24rpx; } .search-input.data-v-4978fed5 { flex: 1; height: 64rpx; border-radius: 32rpx; border: none; background: #fff; padding: 0 24rpx; font-size: 28rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04); } .search-btn.data-v-4978fed5 { margin-left: 16rpx; background: #7ac81e; color: #fff; border: none; border-radius: 32rpx; height: 64rpx; padding: 0 32rpx; font-size: 28rpx; } .banner.data-v-4978fed5 { margin: 24rpx 24rpx 0 24rpx; } .banner-img.data-v-4978fed5 { width: 100%; border-radius: 16rpx; } .category-grid.data-v-4978fed5 { margin: 32rpx 24rpx 0 24rpx; } .category-row.data-v-4978fed5 { display: flex; margin-bottom: 16rpx; } .category-item.data-v-4978fed5 { flex: 1; background: #fff; border-radius: 16rpx; margin-right: 16rpx; padding: 24rpx 0 16rpx 0; text-align: center; position: relative; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04); } .category-item.data-v-4978fed5:last-child { margin-right: 0; } .cat-title.data-v-4978fed5 { font-size: 28rpx; font-weight: bold; color: #333; } .cat-desc.data-v-4978fed5 { display: block; font-size: 20rpx; color: #7ac81e; margin-top: 8rpx; } .cat-badge.data-v-4978fed5 { position: absolute; top: 8rpx; right: 16rpx; background: #ffe600; color: #333; font-size: 18rpx; border-radius: 8rpx; padding: 2rpx 8rpx; } .activity-bar.data-v-4978fed5 { display: flex; flex-direction: row; margin: 24rpx 0 0 0; padding-left: 24rpx; background: #fff; height: 80rpx; align-items: center; overflow-x: scroll; } .activity-item.data-v-4978fed5 { min-width: 140rpx; margin-right: 32rpx; font-size: 24rpx; color: #ff6600; text-align: center; } .activity-item text.data-v-4978fed5 { color: #888; font-size: 20rpx; } .main-content.data-v-4978fed5 { display: flex; margin: 32rpx 24rpx 0 24rpx; } .video-section.data-v-4978fed5, .map-section.data-v-4978fed5 { flex: 1; margin-right: 16rpx; background: #fff; border-radius: 16rpx; overflow: hidden; position: relative; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04); } .map-section.data-v-4978fed5 { margin-right: 0; } .video-img.data-v-4978fed5, .map-img.data-v-4978fed5 { width: 100%; height: 160rpx; object-fit: cover; } .video-title.data-v-4978fed5, .map-title.data-v-4978fed5 { position: absolute; left: 16rpx; bottom: 16rpx; color: #fff; font-size: 28rpx; text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2); } .float-btn.data-v-4978fed5 { position: fixed; right: 40rpx; bottom: 180rpx; width: 80rpx; height: 80rpx; background: #00e4ff; color: #fff; font-size: 60rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4rpx 16rpx rgba(0,228,255,0.15); z-index: 10; } .tab-bar.data-v-4978fed5 { position: fixed; left: 0; bottom: 0; width: 100vw; height: 100rpx; background: #fff; display: flex; border-top: 1rpx solid #eee; z-index: 20; } .tab-item.data-v-4978fed5 { flex: 1; text-align: center; color: #888; font-size: 22rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; } .tab-item.active.data-v-4978fed5 { color: #00c3ff; } .tab-icon.data-v-4978fed5 { width: 40rpx; height: 40rpx; margin-bottom: 4rpx; }