.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%; } .page-title-card { background: #ffffff; padding: 30rpx 0; text-align: center; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); border-radius: 0; } .page-title-text { font-size: 36rpx; font-weight: 800; color: #3F51F7; letter-spacing: 2rpx; } .card { background: #ffffff; border-radius: 24rpx; padding: 32rpx; box-shadow: 0 16rpx 40rpx rgba(37, 52, 94, 0.08); margin-bottom: 32rpx; } /* 性能指标卡片 */ .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; } /* 超短精选池卡片 */ .pool-card { padding: 40rpx 32rpx; } .pool-header { display: flex; align-items: center; margin-bottom: 16rpx; } .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; margin-bottom: 32rpx; } /* 锁定内容 */ .locked-content { display: flex; flex-direction: column; align-items: center; padding: 60rpx 0 40rpx; } .lock-icon-wrapper { margin-bottom: 32rpx; } .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; } .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); } .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; } .stock-list-placeholder { padding: 60rpx 0; text-align: center; background: #f7f8fc; border-radius: 16rpx; } .placeholder-text { font-size: 26rpx; color: #9ca2b5; } /* 历史股票池回顾 */ .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; margin-bottom: 16rpx; } .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; } .history-tip { font-size: 24rpx; color: #9ca2b5; line-height: 1.6; } /* 购买弹窗 */ .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; } .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; } .modal-footer { display: flex; flex-direction: column; align-items: 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; } /* 支付方式选择 */ .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-info { display: flex; flex-direction: column; flex: 1; } .points-balance { font-size: 22rpx; color: #9ca2b5; margin-top: 4rpx; } .points-cost { display: flex; align-items: baseline; margin-right: 16rpx; } .points-amount { font-size: 32rpx; font-weight: 700; color: #ff9500; } .points-unit { font-size: 22rpx; color: #ff9500; margin-left: 4rpx; } .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.points-pay { background: linear-gradient(135deg, #ff9500, #ffb347); } .bottom-safe-area { height: 80rpx; } /* 手机号授权弹窗 */ .phone-auth-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 9999; } .phone-auth-prompt { width: 560rpx; background: #ffffff; border-radius: 24rpx; padding: 50rpx 40rpx; text-align: center; box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3); } .auth-icon { font-size: 72rpx; margin-bottom: 20rpx; } .auth-title { display: block; font-size: 32rpx; font-weight: 600; color: #222222; margin-bottom: 12rpx; } .auth-desc { display: block; font-size: 24rpx; color: #999999; line-height: 1.5; margin-bottom: 32rpx; } .auth-button { width: 100%; height: 80rpx; background: linear-gradient(135deg, #FF9800, #FFA726); color: #ffffff; border-radius: 40rpx; font-size: 30rpx; font-weight: 600; box-shadow: 0 8rpx 24rpx rgba(255, 152, 0, 0.4); display: flex; align-items: center; justify-content: center; border: none; padding: 0; line-height: 80rpx; } .auth-button::after { border: none; }