.page-rank { display: flex; flex-direction: column; background: #f5f6fb; height: 100vh; } .scroll-view { flex: 1; height: 0; } .content-wrapper { padding: 32rpx; min-height: 100%; } /* 股票列表 */ .stock-list { display: flex; flex-direction: column; gap: 24rpx; } .stock-card { background: #ffffff; border-radius: 24rpx; padding: 32rpx; box-shadow: 0 8rpx 24rpx rgba(37, 52, 94, 0.08); } .stock-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24rpx; padding-bottom: 24rpx; border-bottom: 1rpx solid #f1f2f6; } .stock-title { display: flex; flex-direction: column; gap: 8rpx; } .stock-name { font-size: 34rpx; font-weight: 700; color: #222222; } .stock-code { font-size: 26rpx; color: #5d55e8; font-weight: 500; } .delete-btn { width: 56rpx; height: 56rpx; background: #f16565; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4rpx 12rpx rgba(241, 101, 101, 0.3); } .delete-icon { font-size: 40rpx; font-weight: 700; color: #ffffff; line-height: 1; } .stock-body { display: flex; flex-direction: column; gap: 12rpx; } .info-item { display: flex; justify-content: space-between; align-items: center; } .info-label { font-size: 26rpx; color: #666a7f; } .info-value { font-size: 26rpx; color: #222222; font-weight: 500; } /* 涨跌信息样式 */ .quote-row { display: flex; justify-content: space-between; gap: 24rpx; margin-bottom: 16rpx; padding: 20rpx; background: #f7f8fc; border-radius: 16rpx; } .quote-item { flex: 1; display: flex; flex-direction: column; align-items: center; } .quote-label { font-size: 24rpx; color: #666a7f; margin-bottom: 8rpx; } .quote-value { font-size: 32rpx; font-weight: 700; color: #222222; } /* 涨(红色) */ .change-up { color: #f16565 !important; } /* 跌(绿色) */ .change-down { color: #3abf81 !important; } /* 空状态 */ .empty-content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 200rpx 60rpx; } .empty-icon { font-size: 120rpx; margin-bottom: 40rpx; } .empty-text { font-size: 32rpx; font-weight: 600; color: #333333; margin-bottom: 16rpx; } .empty-desc { font-size: 26rpx; color: #999999; text-align: center; line-height: 1.6; } .bottom-safe-area { height: 80rpx; } /* 模糊效果 */ .blur-content { filter: blur(8rpx); pointer-events: none; } /* 登录遮罩层 */ .login-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; z-index: 999; } .login-prompt { width: 560rpx; max-width: 560rpx; background: #ffffff; border-radius: 24rpx; padding: 50rpx 40rpx; margin: 0 auto; text-align: center; box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3); box-sizing: border-box; } .lock-icon { font-size: 72rpx; margin-bottom: 20rpx; } .prompt-title { display: block; font-size: 32rpx; font-weight: 600; color: #222222; margin-bottom: 12rpx; } .prompt-desc { display: block; font-size: 24rpx; color: #999999; line-height: 1.5; margin-bottom: 32rpx; } .login-button-native { width: 100%; height: 80rpx; background: linear-gradient(135deg, #4CAF50, #66BB6A); color: #ffffff; border-radius: 40rpx; font-size: 30rpx; font-weight: 600; box-shadow: 0 8rpx 24rpx rgba(76, 175, 80, 0.4); display: flex; align-items: center; justify-content: center; border: none; padding: 0; line-height: 80rpx; } .login-button-native::after { border: none; }