/* Drawer root */ .stock-detail-panel .ant-drawer-body { padding: 24px 16px; background: #ffffff; } /* Card common style */ .stock-detail-panel .ant-card { border-radius: 8px; } .stock-detail-panel .ant-card-head-title { font-weight: 600; } /* Stock list items */ .stock-item { cursor: pointer; transition: background-color 0.2s ease, border-left 0.2s ease; border-left: 3px solid transparent; padding-left: 4px; /* compensate for border shift */ } .stock-item:hover { background-color: #fafafa; } .stock-item.selected { background-color: #e6f7ff; border-left-color: #1890ff; } .stock-item .ant-list-item-meta-title { font-size: 14px; font-weight: 600; } .stock-item .ant-list-item-meta-description { font-size: 12px; line-height: 1.4; } .stock-item .ant-tag { margin-left: 4px; } /* ReactECharts */ .stock-detail-panel .echarts-for-react { width: 100%; } /* Card spacing */ .stock-detail-panel .ant-card:not(:last-child) { margin-bottom: 16px; } /* Close icon */ .stock-detail-panel .anticon-close:hover { color: #ff4d4f; } .row-hover { background: #f5faff !important; box-shadow: 0 2px 8px rgba(24,144,255,0.10); transition: background 0.2s, box-shadow 0.2s; z-index: 2; } /* 新增样式 - 相关标的Tab */ .stock-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; padding: 16px; margin-bottom: 16px; color: white; } .stock-header-icon { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .stock-search-bar { background: #f8f9fa; border-radius: 8px; padding: 12px; margin-bottom: 16px; border: 1px solid #e9ecef; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .stock-search-input { border-radius: 6px; border: 1px solid #d9d9d9; transition: all 0.3s; max-width: 300px; } .stock-search-input:focus { border-color: #1890ff; box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); } .monitoring-button { background: linear-gradient(135deg, #4caf50 0%, #45a049 100%); border: none; border-radius: 6px; color: white; font-weight: 500; transition: all 0.3s; padding: 4px 12px; height: auto; font-size: 12px; } .monitoring-button:hover { background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3); } .monitoring-button.monitoring { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); } .monitoring-button.monitoring:hover { background: linear-gradient(135deg, #ee5a52 0%, #d63031 100%); } .add-stock-button { background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%); border: none; border-radius: 6px; color: white; font-weight: 500; transition: all 0.3s; padding: 4px 12px; height: auto; font-size: 12px; } .add-stock-button:hover { background: linear-gradient(135deg, #096dd9 0%, #0050b3 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3); } .refresh-button { border-radius: 6px; transition: all 0.3s; padding: 4px 8px; height: auto; font-size: 12px; } .refresh-button:hover { transform: rotate(180deg); transition: transform 0.5s ease; } .monitoring-status { background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%); border: 1px solid #4caf50; border-radius: 6px; padding: 8px 12px; margin-top: 12px; display: flex; align-items: center; gap: 8px; animation: pulse 2s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } .stock-count { font-size: 14px; color: rgba(255, 255, 255, 0.8); margin-top: 4px; } .stock-title { font-size: 18px; font-weight: bold; margin-bottom: 4px; } /* 表格hover效果增强 */ .ant-table-tbody > tr.row-hover > td { background: #f5faff !important; border-color: #91d5ff; } .ant-table-tbody > tr.row-hover:hover > td { background: #e6f7ff !important; } /* 搜索图标样式 */ .search-icon { color: #666; font-size: 16px; margin-right: 8px; } /* 按钮组样式 */ .action-buttons { display: flex; gap: 8px; align-items: center; } /* 响应式设计 */ @media (max-width: 768px) { .stock-search-bar { flex-direction: column; gap: 12px; } .action-buttons { width: 100%; justify-content: space-between; } }