.page-container { height: 100vh; display: flex; flex-direction: column; background: #f5f6fb; } .scroll-view { flex: 1; height: 0; } .content-wrapper { padding: 32rpx; background: #f5f6fb; min-height: 100%; } .card { background: #ffffff; border-radius: 24rpx; padding: 32rpx; box-shadow: 0 16rpx 40rpx rgba(37, 52, 94, 0.08); margin-bottom: 32rpx; } /* 强势趋势池标题区域 */ .pool-header-section { margin-bottom: 24rpx; } .pool-header { display: flex; align-items: center; margin-bottom: 12rpx; } .pool-icon { font-size: 32rpx; margin-right: 12rpx; } .pool-title { font-size: 32rpx; font-weight: 600; color: #222222; } .pool-desc { font-size: 26rpx; color: #666a7f; } /* 性能指标卡片 */ .performance-card { display: flex; justify-content: space-around; align-items: center; background: #f7f8fc; padding: 32rpx 24rpx; } .performance-item { display: flex; flex-direction: column; align-items: center; } .performance-label { font-size: 24rpx; color: #666a7f; margin-bottom: 12rpx; } .performance-value { font-size: 32rpx; font-weight: 700; color: #222222; } .performance-value.success { color: #3abf81; } .performance-value.profit { color: #f16565; } /* 股票列表卡片 */ .stock-list-card { padding: 32rpx; } .stock-item { display: flex; justify-content: space-between; align-items: center; padding: 24rpx 0; border-bottom: 1rpx solid #f1f2f6; } .stock-item:last-child { border-bottom: none; } .stock-info { flex: 1; } .stock-name-row { display: flex; align-items: center; margin-bottom: 12rpx; } .stock-name { font-size: 28rpx; font-weight: 600; color: #222222; margin-right: 16rpx; } .stock-code { font-size: 24rpx; color: #9ca2b5; } .stock-price-row { display: flex; align-items: center; } .stock-price-label { font-size: 24rpx; color: #9ca2b5; margin-right: 8rpx; } .stock-price { font-size: 26rpx; font-weight: 600; color: #222222; } .stock-right { display: flex; align-items: center; gap: 16rpx; } .stock-score-badge { background: #e7f7ef; border-radius: 20rpx; padding: 8rpx 16rpx; min-width: 80rpx; text-align: center; } .stock-score { font-size: 26rpx; font-weight: 700; color: #3abf81; } .stock-actions { display: flex; gap: 12rpx; } .action-btn { width: 56rpx; height: 56rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15); } .buy-btn { background: #3abf81; } .sell-btn { background: #f16565; } .action-icon { font-size: 32rpx; font-weight: 700; color: #ffffff; } /* 历史股票池回顾 */ .history-card { padding: 32rpx; } .history-header { display: flex; align-items: center; margin-bottom: 24rpx; } .history-icon { font-size: 28rpx; margin-right: 12rpx; } .history-title { font-size: 30rpx; font-weight: 600; color: #222222; } .history-search-row { display: flex; align-items: center; } .history-date-input { flex: 1; background: #f7f8fc; border-radius: 12rpx; padding: 24rpx 24rpx; font-size: 26rpx; color: #222222; } .history-search-button { width: 80rpx; height: 80rpx; background: #5d55e8; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; margin-left: 16rpx; } .search-icon { font-size: 32rpx; color: #ffffff; } /* 弹窗样式 */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-content { width: 640rpx; background: #ffffff; border-radius: 24rpx; padding: 40rpx 32rpx 32rpx; box-sizing: border-box; } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32rpx; } .modal-title { font-size: 32rpx; font-weight: 600; color: #222222; } .modal-close { font-size: 48rpx; color: #9ca2b5; line-height: 1; width: 48rpx; height: 48rpx; display: flex; align-items: center; justify-content: center; } .modal-footer { display: flex; flex-direction: column; align-items: center; } .bottom-safe-area { height: 80rpx; } /* 锁定内容样式 */ .locked-content { display: flex; flex-direction: column; align-items: center; padding: 60rpx 0 40rpx; } .lock-icon-wrapper { margin-bottom: 32rpx; } .locked-content .lock-icon { font-size: 80rpx; } .lock-text { font-size: 28rpx; color: #222222; margin-bottom: 16rpx; text-align: center; } .lock-desc { font-size: 24rpx; color: #9ca2b5; margin-bottom: 48rpx; text-align: center; line-height: 1.6; } .locked-content .unlock-button { width: 100%; background: linear-gradient(135deg, #5d55e8, #7568ff); border-radius: 16rpx; padding: 28rpx 0; text-align: center; box-shadow: 0 12rpx 24rpx rgba(93, 85, 232, 0.4); } .locked-content .unlock-button-text { font-size: 30rpx; font-weight: 600; color: #ffffff; } /* 已解锁内容样式 */ .unlocked-content { margin-top: 32rpx; } .unlocked-tip { font-size: 26rpx; color: #3abf81; margin-bottom: 24rpx; display: block; } /* 购买弹窗样式 */ .subscription-options { margin-bottom: 32rpx; } .subscription-option { display: flex; justify-content: space-between; align-items: center; padding: 32rpx 24rpx; border: 2rpx solid #e5e7eb; border-radius: 16rpx; margin-bottom: 20rpx; transition: all 0.3s; } .subscription-option.active { border-color: #5d55e8; background: #f7f8fc; } .option-info { display: flex; flex-direction: column; } .option-title { font-size: 28rpx; font-weight: 600; color: #222222; margin-bottom: 8rpx; } .option-desc { font-size: 24rpx; color: #9ca2b5; } .option-price { font-size: 36rpx; font-weight: 700; color: #f16565; } /* 支付方式选择 */ .payment-method-section { margin-bottom: 32rpx; padding-top: 24rpx; border-top: 1rpx solid #f1f2f6; } .payment-method-title { display: block; font-size: 26rpx; font-weight: 600; color: #222222; margin-bottom: 20rpx; } .payment-methods { display: flex; flex-direction: column; gap: 16rpx; } .payment-method-item { display: flex; align-items: center; padding: 24rpx 20rpx; border: 2rpx solid #e5e7eb; border-radius: 12rpx; transition: all 0.3s; position: relative; } .payment-method-item.active { border-color: #5d55e8; background: #f7f5ff; } .payment-icon { font-size: 36rpx; margin-right: 16rpx; } .payment-name { font-size: 28rpx; font-weight: 500; color: #222222; flex: 1; } .payment-check { width: 36rpx; height: 36rpx; background: #5d55e8; border-radius: 50%; color: #ffffff; font-size: 24rpx; display: flex; align-items: center; justify-content: center; } .pay-button { width: 100%; background: #f16565; border-radius: 16rpx; padding: 28rpx 0; text-align: center; margin-bottom: 24rpx; } .pay-button-text { font-size: 30rpx; font-weight: 600; color: #ffffff; } .agreement-text { font-size: 22rpx; color: #9ca2b5; }