/* 引入字体图标 */ @font-face { font-family: 'iconfont'; src: url('//at.alicdn.com/t/font_3266846_kxscvlm9qpp.woff2') format('woff2'); } .iconfont.data-v-502b983e { font-family: "iconfont" !important; font-size: 22rpx; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-robot.data-v-502b983e:before { content: "\e64b"; } .icon-eye.data-v-502b983e:before { content: "\e614"; } /* 页面容器 */ .page-container.data-v-502b983e { min-height: 100vh; background-color: #f7f8fa; position: relative; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* 头部标签样式 */ .header-tabs.data-v-502b983e { display: flex; background-color: #fff; padding: 0 30rpx; position: relative; border-bottom: 1rpx solid #f2f2f2; } .tab-item.data-v-502b983e { position: relative; padding: 20rpx 30rpx; margin-right: 50rpx; font-size: 30rpx; color: #666; transition: all 0.3s ease; } .tab-item.active.data-v-502b983e { color: #333; font-weight: 600; } .tab-line.data-v-502b983e { position: absolute; bottom: 0; left: 50%; width: 0; height: 6rpx; background-color: #4dc971; border-radius: 3rpx; transition: all 0.3s ease; transform: translateX(-50%); } .tab-line.active.data-v-502b983e { width: 40rpx; } /* 内容区域样式 */ .content-container.data-v-502b983e { height: calc(100vh - 88rpx); box-sizing: border-box; } .cards-section.data-v-502b983e { padding: 12rpx; } /* 内容卡片通用样式 */ .content-card.data-v-502b983e { background-color: #fff; border-radius: 16rpx; margin-bottom: 24rpx; overflow: hidden; transition: all 0.2s ease; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); position: relative; } .card-hover.data-v-502b983e { transform: translateY(-2rpx); box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12); } /* 缩略图 */ .content-thumbnail.data-v-502b983e { position: relative; width: 100%; height: 300rpx; background-color: #f0f0f0; } .thumbnail-image.data-v-502b983e { width: 100%; height: 100%; object-fit: cover; } /* 播放按钮 */ .play-button.data-v-502b983e { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70rpx; height: 70rpx; background-color: rgba(0, 0, 0, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .play-icon.data-v-502b983e { width: 0; height: 0; border-style: solid; border-width: 9rpx 0 9rpx 16rpx; border-color: transparent transparent transparent #ffffff; margin-left: 4rpx; } /* 视频时长 */ .video-duration.data-v-502b983e { position: absolute; bottom: 10rpx; right: 10rpx; padding: 3rpx 8rpx; background-color: rgba(0, 0, 0, 0.6); color: #fff; font-size: 18rpx; border-radius: 10rpx; } /* 内容类型标签 */ .content-type-tag.data-v-502b983e { position: absolute; top: 10rpx; left: 10rpx; padding: 4rpx 10rpx; font-size: 20rpx; border-radius: 6rpx; z-index: 2; } .content-type-tag.video.data-v-502b983e { background-color: #4dc971; color: #fff; } .content-type-tag.article.data-v-502b983e { background-color: #3498db; color: #fff; } /* 内容信息 */ .content-info.data-v-502b983e { padding: 16rpx; position: relative; } .content-title.data-v-502b983e { font-size: 30rpx; font-weight: 600; color: #333; line-height: 1.4; margin-bottom: 10rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .source-name.data-v-502b983e { color: #999; font-size: 22rpx; } .info-row.data-v-502b983e { display: flex; justify-content: space-between; align-items: center; } .view-count.data-v-502b983e { color: #c0c0c0; font-size: 20rpx; display: flex; align-items: center; } .view-count .iconfont.data-v-502b983e { margin-right: 4rpx; } /* 空状态 */ .empty-state.data-v-502b983e { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 120rpx 0; } .empty-image.data-v-502b983e { width: 180rpx; height: 180rpx; margin-bottom: 16rpx; } .empty-text.data-v-502b983e { font-size: 26rpx; color: #999; } /* AI按钮 */ .assistant-btn.data-v-502b983e { position: fixed; right: 30rpx; bottom: 100rpx; height: 80rpx; border-radius: 40rpx; background: linear-gradient(135deg, #42b983, #3db160); display: flex; align-items: center; padding: 0 24rpx; box-shadow: 0 6rpx 20rpx rgba(66, 185, 131, 0.35); z-index: 99; transition: all 0.25s ease; } .assistant-icon.data-v-502b983e { width: 68rpx; height: 68rpx; margin-right: 10rpx; } .btn-hover.data-v-502b983e { transform: scale(1.05); box-shadow: 0 8rpx 24rpx rgba(66, 185, 131, 0.45); } .btn-text.data-v-502b983e { font-size: 28rpx; color: #fff; font-weight: 500; }