/** 首页量化查询界面样式 **/ .page { height: 100vh; box-sizing: border-box; padding: 32rpx 32rpx 48rpx; background: #f5f6fb; } .page-title { margin-top: 8rpx; margin-bottom: 24rpx; text-align: center; font-size: 32rpx; font-weight: 700; color: #5d55e8; letter-spacing: 4rpx; } .card { background: #ffffff; border-radius: 24rpx; padding: 32rpx 32rpx 36rpx; box-shadow: 0 16rpx 40rpx rgba(37, 52, 94, 0.08); margin-bottom: 32rpx; position: relative; /* 确保下拉列表定位参照此元素 */ } .search-card { margin-top: 16rpx; z-index: 10; /* 确保搜索卡片层级较高 */ } .card-title { display: block; font-size: 32rpx; font-weight: 600; color: #222222; margin-bottom: 32rpx; } .search-row { display: flex; align-items: center; background: #f7f8fc; border-radius: 999rpx; padding: 0 8rpx 0 32rpx; height: 96rpx; box-sizing: border-box; } .search-input { flex: 1; font-size: 28rpx; color: #222222; } .search-placeholder { color: #b4b8c6; } .search-button { width: 96rpx; height: 80rpx; margin-left: 12rpx; border-radius: 999rpx; background: linear-gradient(135deg, #5d55e8, #7568ff); display: flex; align-items: center; justify-content: center; box-shadow: 0 12rpx 24rpx rgba(93, 85, 232, 0.4); } .icon-search { width: 0; height: 0; border-radius: 50%; border: 10rpx solid #ffffff; border-color: #ffffff transparent transparent transparent; position: relative; } .icon-search::after { content: ''; position: absolute; width: 24rpx; height: 4rpx; border-radius: 999rpx; background: #ffffff; transform: rotate(45deg); right: -20rpx; bottom: -6rpx; } .search-tip { display: block; margin-top: 20rpx; font-size: 24rpx; color: #9ca2b5; } /* 下拉列表样式 */ .search-dropdown { position: absolute; top: 180rpx; /* 根据标题和输入框高度估算 */ left: 32rpx; right: 32rpx; background: #ffffff; border-radius: 16rpx; box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15); max-height: 400rpx; overflow-y: auto; z-index: 999; border: 1rpx solid #f0f0f0; } .dropdown-item { padding: 24rpx 32rpx; border-bottom: 1rpx solid #f5f6fb; display: flex; justify-content: space-between; align-items: center; } .dropdown-item:last-child { border-bottom: none; } .dropdown-item-hover { background-color: #f7f8fc; } .item-name { font-size: 28rpx; color: #333; } .item-code { font-size: 24rpx; color: #999; } .result-card { margin-top: 8rpx; } .result-loading { font-size: 26rpx; color: #666a7f; } .result-error { font-size: 26rpx; color: #ff5b5b; } .detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24rpx; } .detail-name { font-size: 30rpx; font-weight: 700; color: #1f1f2e; } .detail-sub { margin-top: 8rpx; font-size: 24rpx; color: #9da3b5; } .score-badge { min-width: 140rpx; padding: 12rpx 22rpx; border-radius: 20rpx; background: #f16565; color: #ffffff; font-size: 40rpx; font-weight: 700; text-align: right; box-shadow: 0 10rpx 24rpx rgba(241, 101, 101, 0.35); } .section { margin-top: 20rpx; } .section-title { font-size: 28rpx; font-weight: 700; color: #1f1f2e; margin-bottom: 16rpx; } .history-row { display: flex; align-items: center; justify-content: space-between; padding: 18rpx 0; border-bottom: 1rpx solid #f1f2f6; } .history-row:last-child { border-bottom: none; } .history-date { font-size: 26rpx; color: #3c4050; } .history-score { min-width: 96rpx; text-align: center; padding: 6rpx 18rpx; border-radius: 30rpx; font-size: 28rpx; font-weight: 700; color: #ffffff; } .tag-danger { background: #f16565; } .tag-success { background: #3abf81; } .tag-info { background: #4c86ff; } .history-note { display: block; margin-top: 12rpx; font-size: 22rpx; color: #9da3b5; } .factor-row { display: flex; align-items: center; justify-content: space-between; padding: 14rpx 0; } .factor-name { font-size: 26rpx; color: #3c4050; } .factor-score { font-size: 28rpx; font-weight: 600; color: #4c86ff; } .card-header { display: flex; align-items: center; margin-bottom: 24rpx; } .card-header-title { font-size: 30rpx; font-weight: 600; color: #222222; } .icon-circle { width: 40rpx; height: 40rpx; border-radius: 50%; background: #e7f7ef; display: flex; align-items: center; justify-content: center; margin-right: 16rpx; } .icon-check { font-size: 24rpx; color: #28a745; } .advantage-item { margin-bottom: 12rpx; font-size: 26rpx; line-height: 1.6; color: #4a4f63; } .advantage-label { font-weight: 600; } .advantage-desc { font-weight: 400; } .risk-card { margin-bottom: 24rpx; } .icon-warning { width: 40rpx; height: 40rpx; border-radius: 50%; background: #ffecef; display: flex; align-items: center; justify-content: center; margin-right: 16rpx; } .icon-warning-text { font-size: 26rpx; color: #ff5b5b; } .risk-text { display: block; font-size: 24rpx; line-height: 1.8; color: #666a7f; } .bottom-safe-area { height: 80rpx; }