vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update ui

Browse Source
This commit is contained in:
zzlgreat
2025-11-13 17:58:37 +08:00
parent dfa2635b2e
commit 716b4ba3bd
2 changed files with 62 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/views/Community/components/CompactSearchBox.js
View File

@@ -421,9 +421,16 @@ const CompactSearchBox = ({
};
return (
<div style={{ padding: '12px 16px', background: '#fafafa', borderRadius: '8px' }}>
<div style={{
padding: '16px 20px',
background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 250, 250, 0.95) 100%)',
borderRadius: '12px',
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5)',
border: '1px solid rgba(200, 200, 200, 0.3)',
backdropFilter: 'blur(10px)'
}}>
{/* 单行紧凑布局 */}
<Space wrap style={{ width: '100%' }} size="small">
<Space wrap style={{ width: '100%' }} size="medium">
{/* 搜索框 */}
<AutoComplete
value={inputValue}
@@ -438,12 +445,15 @@ const CompactSearchBox = ({
handleMainSearch();
}
}}
style={{ width: 220 }}
size="small"
style={{ width: 240 }}
>
<Input
prefix={<SearchOutlined style={{ color: '#bfbfbf' }} />}
size="small"
prefix={<SearchOutlined style={{ color: '#1890ff' }} />}
style={{
borderRadius: '8px',
border: '2px solid #e6f7ff',
boxShadow: '0 2px 8px rgba(24, 144, 255, 0.1)'
}}
/>
</AutoComplete>
@@ -478,9 +488,11 @@ const CompactSearchBox = ({
expandTrigger="hover"
displayRender={(labels) => labels[labels.length - 1] || '行业'}
disabled={industryLoading}
style={{ width: 100 }}
size="small"
suffixIcon={<FilterOutlined style={{ fontSize: 12 }} />}
style={{
width: 120,
borderRadius: '8px'
}}
suffixIcon={<FilterOutlined style={{ fontSize: 14, color: '#52c41a' }} />}
/>
</Tooltip>
@@ -490,8 +502,10 @@ const CompactSearchBox = ({
mode="multiple"
value={importance}
onChange={handleImportanceChange}
style={{ width: 100 }}
size="small"
style={{
width: 120,
borderRadius: '8px'
}}
placeholder="重要性"
maxTagCount={0}
maxTagPlaceholder={(omittedValues) => `已选 ${omittedValues.length} 项`}
@@ -508,15 +522,17 @@ const CompactSearchBox = ({
<AntSelect
value={sort}
onChange={handleSortChange}
style={{ width: 110 }}
size="small"
suffixIcon={<SortAscendingOutlined style={{ fontSize: 12 }} />}
style={{
width: 130,
borderRadius: '8px'
}}
suffixIcon={<SortAscendingOutlined style={{ fontSize: 14, color: '#faad14' }} />}
>
<Option value="new">最新</Option>
<Option value="hot">最热</Option>
<Option value="importance">重要性</Option>
<Option value="returns_avg">平均收益</Option>
<Option value="returns_week">周收益</Option>
<Option value="new">⏰ 最新</Option>
<Option value="hot">🔥 最热</Option>
<Option value="importance">⭐ 重要性</Option>
<Option value="returns_avg">📊 平均收益</Option>
<Option value="returns_week">📈 周收益</Option>
</AntSelect>
</Tooltip>
@@ -525,9 +541,12 @@ const CompactSearchBox = ({
<Button
icon={<CloseCircleOutlined />}
onClick={handleReset}
size="small"
danger
type="text"
type="primary"
style={{
borderRadius: '8px',
boxShadow: '0 2px 8px rgba(255, 77, 79, 0.2)'
}}
>
重置
</Button>

58
src/views/Community/components/HeroPanel.js
View File

@@ -469,18 +469,18 @@ const ConceptFlowAnimation = () => {
// 根据涨跌幅计算字体大小（涨跌幅越大，字体越大）
const getFontSize = (changePct) => {
const absChange = Math.abs(changePct);
if (absChange >= 10) return 'md'; // 超大涨跌
if (absChange >= 7) return 'sm'; // 大涨跌
if (absChange >= 5) return 'sm'; // 中涨跌
if (absChange >= 3) return 'xs'; // 小涨跌
return 'xs'; // 微涨跌
if (absChange >= 10) return 'xl'; // 超大涨跌 - 20px
if (absChange >= 7) return 'lg'; // 大涨跌 - 18px
if (absChange >= 5) return 'md'; // 中涨跌 - 16px
if (absChange >= 3) return 'md'; // 小涨跌 - 16px
return 'sm'; // 微涨跌 - 14px
};
return (
<VStack spacing={3} h="200px" justify="center" overflow="hidden" position="relative" w="100%">
{rows.map((row, rowIndex) => {
// 每行不同的速度：第一行25秒，第二行30秒，第三行35秒
const duration = 25 + rowIndex * 5;
// 每行不同的速度：第一行50秒，第二行60秒，第三行70秒（更慢）
const duration = 50 + rowIndex * 10;
return (
<Box
@@ -514,25 +514,15 @@ const ConceptFlowAnimation = () => {
const isHovered = hoveredConcept === `${rowIndex}-${idx}`;
const fontSize = getFontSize(changePct);
const borderWidth = fontSize === 'md' ? '3px' : '2px';
const isLargeFontSize = fontSize === 'xl' || fontSize === 'lg';
return (
<Box
key={`${rowIndex}-${idx}`}
px={4}
py={2}
borderRadius="full"
bg="whiteAlpha.200"
borderWidth={borderWidth}
borderColor={color}
color="white"
fontWeight={fontSize === 'md' ? 'extrabold' : 'bold'}
fontSize={fontSize}
whiteSpace="nowrap"
px={2}
cursor="pointer"
position="relative"
transition="all 0.3s ease"
boxShadow={`0 0 ${fontSize === 'md' ? '15px' : '10px'} ${color}${fontSize === 'md' ? '60' : '40'}`}
onMouseEnter={() => {
setIsPaused(true);
setHoveredConcept(`${rowIndex}-${idx}`);
@@ -543,14 +533,23 @@ const ConceptFlowAnimation = () => {
}}
onClick={() => handleConceptClick(concept.name)}
_hover={{
transform: 'scale(1.15)',
bg: 'whiteAlpha.300',
boxShadow: `0 0 25px ${color}80`,
transform: 'scale(1.2)',
zIndex: 100
}}
>
{/* 概念名称 */}
<Text as="span" color={color}>
<Text
as="span"
color={color}
fontSize={fontSize}
fontWeight={isLargeFontSize ? 'extrabold' : 'bold'}
textShadow={`0 0 ${isLargeFontSize ? '12px' : '8px'} ${color}80, 0 2px 4px rgba(0,0,0,0.5)`}
whiteSpace="nowrap"
transition="all 0.3s ease"
_hover={{
textShadow: `0 0 20px ${color}, 0 0 30px ${color}60, 0 2px 6px rgba(0,0,0,0.7)`
}}
>
{concept.name}
</Text>
@@ -814,21 +813,8 @@ const HeroPanel = () => {
<Box
w="100%"
flex="1"
bg="whiteAlpha.100"
borderRadius="xl"
borderWidth="1px"
borderColor="whiteAlpha.200"
backdropFilter="blur(10px)"
boxShadow="0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05)"
p={3}
position="relative"
overflow="hidden"
transition="all 0.3s ease"
_hover={{
bg: "whiteAlpha.150",
borderColor: "whiteAlpha.300",
boxShadow: "0 6px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
}}
>
<ConceptFlowAnimation />
</Box>