修正筛选组件样式

components/filter/compoents/typeInfo/index.tsx

@@ -23,19 +23,26 @@ export default function CategoryItem(props: Props) {
     })
   }
 
+  const showCount = 14;   //展示数量
+
   return (
     <div className={styles.filterItem}>
       <div className={styles.filterItemTitle}>{props.typeName}：</div>
       <div
         className={`${styles.filterItemMain} ${
-          data.length <= 10 && styles.disabled
+          data.length <= showCount && styles.disabled
         }`}
       >
-        <Collapse ghost collapsible="icon" expandIconPosition="end">
+        <Collapse
+          ghost
+          collapsible="icon"
+          expandIconPosition="end"
+          style={{ width: "100%" }}
+        >
           <Collapse.Panel
             header={
-              <Space size={40}>
-                {data.slice(0, 10).map((item) => {
+              <Space size={[40, 0]}>
+                {data.slice(0, showCount).map((item) => {
                   return (
                     <Button
                       type="link"
@@ -44,14 +51,14 @@ export default function CategoryItem(props: Props) {
                     >
                       {item.name}
                     </Button>
-                  )
+                  );
                 })}
               </Space>
             }
             key="1"
           >
             <Space size={40}>
-              {data.slice(10).map((item) => {
+              {data.slice(showCount).map((item) => {
                 return (
                   <Button
                     type="link"
@@ -60,12 +67,12 @@ export default function CategoryItem(props: Props) {
                   >
                     {item.name}
                   </Button>
-                )
+                );
               })}
             </Space>
           </Collapse.Panel>
         </Collapse>
       </div>
     </div>
-  )
+  );
 }

components/filter/index.module.scss

@@ -31,6 +31,7 @@
     flex: 1;
     display: flex;
     justify-content: space-between;
+    overflow: hidden;
 
     &.disabled {
       :global .ant-collapse-expand-icon {