筛选区域样式开发

src/pages/mall/index.tsx

-
 import React, { useState } from 'react';
-import { Button, Form, Input, Select, Cascader } from 'antd';
+import { Button, Form, Input, Select, Cascader, Space, Tag } from 'antd';
 
 const { Option } = Select;
 
@@ -45,45 +44,176 @@ const options: AddrOption[] = [
   },
 ];
 
-export default function Mall(){
-  const onAddrChange = (value: string[]) => {
-    console.log(value);
+export default function Mall() {
+  const onProvinceChange = (value: string) => {
+    console.log('省', value);
+  };
+
+  const onCityChange = (value: string) => {
+    console.log('市', value);
+  };
+
+  const onMoreChange = (value: string) => {
+    console.log('更多', value);
+  };
+
+  const onCloseTag = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    console.log('删除', e);
   };
 
   return (
     <div className='page' style={{ paddingTop: '29px' }}>
-      <div className='filter-wrap' style={{marginBottom: '11px'}}>
+      <div className='filter-wrap' style={{ marginBottom: '11px' }}>
         <div className='filter-item'>
           <div className='filter-item__title'>地域：</div>
-          <div></div>
+          <div className='filter-item-main'>
+            <Space size={40}>
+              <Select
+                bordered={false}
+                dropdownMatchSelectWidth={false}
+                placeholder='选择省'
+                onChange={onProvinceChange}
+                options={[
+                  { value: 'jack', label: 'Jack' },
+                  { value: 'lucy', label: 'Lucy' },
+                  { value: 'Yiminghe', label: 'yiminghe' },
+                  { value: 'disabled', label: 'Disabled', disabled: true },
+                ]}
+              />
+              <Select
+                bordered={false}
+                dropdownMatchSelectWidth={false}
+                placeholder='选择市'
+                onChange={onCityChange}
+                options={[
+                  { value: 'jack', label: 'Jack' },
+                  { value: 'lucy', label: 'Lucy' },
+                  { value: 'Yiminghe', label: 'yiminghe' },
+                  { value: 'disabled', label: 'Disabled', disabled: true },
+                ]}
+              />
+            </Space>
+          </div>
         </div>
       </div>
       <div className='filter-wrap'>
         <div className='filter-item'>
           <div className='filter-item__title'>类目：</div>
-          <div></div>
+          <div className='filter-item-main'>
+            <Space size={40}>
+              <Button type='link'>不限</Button>
+              <Button type='link'>无人机</Button>
+              <Button type='link'>挂载</Button>
+              <Button type='link'>地面站</Button>
+            </Space>
+            <Select
+              placeholder='更多'
+              onChange={onMoreChange}
+              bordered={false}
+              dropdownMatchSelectWidth={false}
+              options={[
+                { value: 'jack', label: 'Jack' },
+                { value: 'lucy', label: 'Lucy' },
+                { value: 'Yiminghe', label: 'yiminghe' },
+                { value: 'disabled', label: 'Disabled', disabled: true },
+              ]}
+            />
+          </div>
         </div>
         <div className='filter-item'>
           <div className='filter-item__title'>品牌：</div>
-          <div></div>
+          <div className='filter-item-main'>
+            <Space size={40}>
+              <Button type='link'>不限</Button>
+              <Button type='link'>无人机</Button>
+              <Button type='link'>挂载</Button>
+              <Button type='link'>地面站</Button>
+            </Space>
+            <Select
+              placeholder='更多'
+              onChange={onMoreChange}
+              bordered={false}
+              dropdownMatchSelectWidth={false}
+              options={[
+                { value: 'jack', label: 'Jack' },
+                { value: 'lucy', label: 'Lucy' },
+                { value: 'Yiminghe', label: 'yiminghe' },
+                { value: 'disabled', label: 'Disabled', disabled: true },
+              ]}
+            />
+          </div>
         </div>
         <div className='filter-item'>
           <div className='filter-item__title'>部件：</div>
-          <div></div>
+          <div className='filter-item-main'>
+            <Space size={40}>
+              <Button type='link'>不限</Button>
+              <Button type='link'>无人机</Button>
+              <Button type='link'>挂载</Button>
+              <Button type='link'>地面站</Button>
+            </Space>
+            <Select
+              placeholder='更多'
+              onChange={onMoreChange}
+              bordered={false}
+              dropdownMatchSelectWidth={false}
+              options={[
+                { value: 'jack', label: 'Jack' },
+                { value: 'lucy', label: 'Lucy' },
+                { value: 'Yiminghe', label: 'yiminghe' },
+                { value: 'disabled', label: 'Disabled', disabled: true },
+              ]}
+            />
+          </div>
         </div>
         <div className='filter-item'>
           <div className='filter-item__title'>型号：</div>
-          <div></div>
+          <div className='filter-item-main'>
+            <Space size={40}>
+              <Button type='link'>不限</Button>
+              <Button type='link'>无人机</Button>
+              <Button type='link'>挂载</Button>
+              <Button type='link'>地面站</Button>
+            </Space>
+            <Select
+              placeholder='更多'
+              onChange={onMoreChange}
+              bordered={false}
+              dropdownMatchSelectWidth={false}
+              options={[
+                { value: 'jack', label: 'Jack' },
+                { value: 'lucy', label: 'Lucy' },
+                { value: 'Yiminghe', label: 'yiminghe' },
+                { value: 'disabled', label: 'Disabled', disabled: true },
+              ]}
+            />
+          </div>
         </div>
         <div className='filter-item'>
           <div className='filter-item__title'>成色：</div>
-          <div></div>
+          <div className='filter-item-main'>
+            <Space size={40}>
+              <Button type='link'>不限</Button>
+              <Button type='link'>无人机</Button>
+              <Button type='link'>挂载</Button>
+              <Button type='link'>地面站</Button>
+            </Space>
+          </div>
         </div>
         <div className='filter-item'>
           <div className='filter-item__title'>已选：</div>
-          <div></div>
+          <div className='filter-item-main'>
+            <Space size={10}>
+              <Tag closable onClose={onCloseTag}>
+                无人机
+              </Tag>
+              <Tag closable onClose={onCloseTag}>
+                无人机
+              </Tag>
+            </Space>
+          </div>
         </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}

src/style/index.scss

@@ -38,5 +38,37 @@ body::-webkit-scrollbar {
       color: #999999;
       line-height: 20px;
     }
+
+    .filter-item-main {
+      flex: 1;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .ant-select-selector {
+      padding: 0 6px 0 0;
+
+      .ant-select-selection-item,
+      .ant-select-selection-placeholder {
+        font-size: 16px;
+        font-family: MicrosoftYaHei;
+        color: #3e4149;
+      }
+    }
+
+    .ant-select-arrow {
+      color: #3e4149;
+    }
+
+    .ant-btn-link {
+      font-size: 16px;
+      font-family: MicrosoftYaHei;
+      color: #3e4149;
+      padding: 0;
+    }
   }
 }
+
+.ant-tag-close-icon {
+  font-size: 10px !important;
+}