update ui

src/views/Community/components/CompactSearchBox.js

@@ -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>