Merge remote-tracking branch 'origin/caoyun'

babel.config.json

+{
+    "presets": ["next/babel"],
+    "plugins": [
+      [
+        "styled-components",{ "ssr":true }
+      ]
+    ]
+  }
\ No newline at end of file

components/NavHeader/index.module.scss

@@ -7,6 +7,12 @@
   justify-content: center;
 }
 
+.nav{
+  width: 1200px;
+  display: flex;
+  align-items: center;
+}
+
 .logo {
   width: 148px;
   height: 68px;

components/NavHeader/index.tsx

@@ -10,15 +10,15 @@ const items: TabsProps["items"] = [
     label: `  首页  `,
   },
   {
-    key: "1",
+    key: '/jobServices',
     label: `作业服务`,
   },
   {
-    key: "2",
+    key: '/equipmentLeasing',
     label: `设备租赁`,
   },
   {
-    key: "3",
+    key: '/flyingHandService',
     label: `飞手服务`,
   },
   {
@@ -47,6 +47,7 @@ export default function NavHeader() {
 
   return (
     <div className={styles.navHeader}>
+      <div className={styles.nav}> 
       <div className={styles.logo}></div>
       <Tabs
         className={styles.tabs}
@@ -63,6 +64,7 @@ export default function NavHeader() {
       <div className={styles.haedImg}>
         <Avatar size={48} style={{ background: '#fff' }}></Avatar>
       </div>
+      </div>
     </div>
   );
 }

components/contentBox/index.tsx

+import React from 'react';
+import { Box } from './styled';
+import Left from './left';
+import Right from './right';
+import {BoxProps} from './interface';
+export default function ContentBox(props:BoxProps) {
+    console.log(props);
+  return (
+    <Box>
+        <Left boxIndex={props.boxIndex} leftRenderDom={props.leftRenderDom}/> 
+        <Right rightRenderDom={props.rightRenderDom}/>
+    </Box>
+  )
+}

components/contentBox/interface.ts

+interface DomType {
+    noFor?: boolean,
+    columns:{element:JSX.Element}[],
+}
+export interface leftBoxProps {
+    boxIndex: number,
+    leftRenderDom: DomType,
+}
+export interface rightBoxProps {
+    rightRenderDom: DomType
+}
+
+export interface BoxProps {
+    boxIndex: number,
+    leftRenderDom: DomType,
+    rightRenderDom: DomType
+}
\ No newline at end of file

components/contentBox/left/index.tsx

+import React from 'react';
+import { Box } from './styled';
+import {leftBoxProps} from '../interface';
+export default function Left(props:leftBoxProps) {
+    const { boxIndex , leftRenderDom } = props
+  return (
+    <Box index={boxIndex}>
+        {
+          leftRenderDom.noFor ? 
+           <div>111111</div>
+           :
+           leftRenderDom.columns.map((item)=>item.element)
+        }
+    </Box>
+  )
+}

components/contentBox/left/styled.tsx

+import styled from "styled-components"
+export interface BoxProps {
+    index:number
+}
+
+export const Box = styled.div<BoxProps>`
+    box-sizing: border-box;
+    width:790px;
+    display: flex;
+    flex-wrap: wrap;
+    .item{
+			// 每个元素都要设置右边距margin-right（每个元素的左右间隙）
+			// 同时设置下边距margin-bottom（每个元素的上下间隙）
+			margin: 0 24px 15px 0;
+			width: calc((100% - ${props => props.index - 1} * 24px) / ${props => props.index});   
+			// 这里一行显示index个，所以是/index，一行显示几个就除以几 
+			// 这里的72px = (分布个数index-1)*间隙20px, 可以根据实际的分布个数和间隙区调整
+			min-width: calc((100% - ${props => props.index - 1} * 24px) / ${props => props.index});
+			max-width: calc((100% - ${props => props.index - 1} * 24px) / ${props => props.index});
+			// 每行最右侧的那个不设置右外边距
+			&:nth-child(${props => props.index}n + ${props => props.index}) {
+				margin-right: 0;
+			} 
+		}
+`
\ No newline at end of file

components/contentBox/right/index.tsx

+import React from 'react';
+import { Box } from './styled';
+import {rightBoxProps} from '../interface';
+export default function Right(props:rightBoxProps) {
+  const { rightRenderDom } = props
+  return (
+    <Box>
+        {
+          rightRenderDom.noFor ? 
+           <div>111111</div>
+           :
+           rightRenderDom.columns.map((item)=>item.element)
+        }
+    </Box>
+  )
+}

components/contentBox/right/styled.tsx

+import styled from "styled-components"
+
+export const Box = styled.div`
+    box-sizing: border-box;
+    width: 384px;
+    .item{
+        margin-bottom: 20px;
+    }
+`
\ No newline at end of file

components/contentBox/styled.tsx

+import styled from "styled-components"
+
+export const Box = styled.div`
+    box-sizing: border-box;
+    display:flex;
+    justify-content: space-between;
+    width:100%;
+`
\ No newline at end of file

components/layout/index.tsx

@@ -18,7 +18,9 @@ const contentStyle: React.CSSProperties = {
   lineHeight: '1',
   color: '',
   backgroundColor: '',
+  width:1200,
   position: 'relative',
+  margin: "0 auto"
 };
 
 const footerStyle: React.CSSProperties = {
@@ -29,6 +31,7 @@ const footerStyle: React.CSSProperties = {
   position: 'relative'
 };
 
+
 type Props = {
   children: React.ReactNode;
 };

package.json

@@ -29,6 +29,8 @@
     "typescript": "^4.9.4"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.0.1"
+    "@ant-design/icons": "^5.0.1",
+    "babel-plugin-styled-components": "^2.1.1",
+    "styled-components": "^6.0.0-rc.1"
   }
 }

pages/equipmentLeasing/index.tsx

+import React, { useEffect, useState } from "react";
+import {Box} from './styled';
+import { Button, Select, Space, Tag } from "antd";
+import Layout from "~/components/layout";
+import ContentBox from '~/components/contentBox';
+
+export default function EquipmentLeasing() {
+  const Dom = <div className='item' style={{height:343,backgroundColor:"#ccc"}}>12312312</div>
+
+  const [productList, setProductList] = useState(Array<{}>);
+
+  useEffect(() => {
+    setProductList([{}, {}, {}, {}, {}, {}]);
+  }, []);
+
+  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  (
+    <Layout>
+      <Box>
+      <div className="filter-wrap" style={{ marginBottom: "11px" }}>
+          <div className="filter-item">
+            <div className="filter-item__title">地域：</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" style={{marginBottom:24}}>
+          <div className="filter-item">
+            <div className="filter-item__title">类目：</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 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 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 className="filter-item-main">
+              <Space size={10}>
+                <Tag closable onClose={onCloseTag}>
+                  无人机
+                </Tag>
+                <Tag closable onClose={onCloseTag}>
+                  无人机
+                </Tag>
+              </Space>
+            </div>
+          </div>
+        </div>
+        <ContentBox boxIndex={4} leftRenderDom={{columns:[{element:Dom}]}} rightRenderDom={{noFor:true,columns:[{element:Dom}]}}/>
+      </Box>
+    </Layout>
+  )
+}

pages/equipmentLeasing/styled.tsx

+import styled from "styled-components"
+
+export const Box = styled.div`
+    box-sizing: border-box;
+    padding-top: 15px;
+`
\ No newline at end of file

pages/flyingHandService/index.tsx

+import React from 'react';
+import {Box} from './styled';
+import { Button, Select, Space, Tag } from "antd";
+import Layout from "~/components/layout";
+import ContentBox from '~/components/contentBox';
+
+export default function FlyingHandService() {
+  const Dom = <div className='item' style={{height:343,backgroundColor:"#ccc"}}>12312312</div>
+
+  const onProvinceChange = (value: string) => {
+    console.log("省", value);
+  };
+
+  return (
+    <Layout>
+      <Box>
+        <div className='flyingTop'>
+          <div className='flyingTop-left'>
+            <Space>
+              <Select
+                  className='selectItem'
+                  bordered={false}
+                  dropdownMatchSelectWidth={false}
+                  placeholder="区域"
+                  size="large"
+                  onChange={onProvinceChange}
+                  options={[
+                    { value: "jack", label: "Jack" },
+                    { value: "lucy", label: "Lucy" },
+                    { value: "Yiminghe", label: "yiminghe" },
+                    { value: "disabled", label: "Disabled", disabled: true },
+                  ]}
+                />
+                 <Select
+                  className='selectItem'
+                  bordered={false}
+                  dropdownMatchSelectWidth={false}
+                  placeholder="考证"
+                  size="large"
+                  onChange={onProvinceChange}
+                  options={[
+                    { value: "jack", label: "Jack" },
+                    { value: "lucy", label: "Lucy" },
+                    { value: "Yiminghe", label: "yiminghe" },
+                    { value: "disabled", label: "Disabled", disabled: true },
+                  ]}
+                />
+                <Select
+                  className='selectItem'
+                  bordered={false}
+                  dropdownMatchSelectWidth={false}
+                  placeholder="技能"
+                  size="large"
+                  onChange={onProvinceChange}
+                  options={[
+                    { value: "jack", label: "Jack" },
+                    { value: "lucy", label: "Lucy" },
+                    { value: "Yiminghe", label: "yiminghe" },
+                    { value: "disabled", label: "Disabled", disabled: true },
+                  ]}
+                />
+            </Space>
+          </div>
+          <Button type="primary" className='btn'>报名学习课程</Button>
+        </div>
+        <ContentBox boxIndex={2} leftRenderDom={{columns:[{element:Dom}]}} rightRenderDom={{noFor:true,columns:[{element:Dom}]}}/>
+      </Box>
+    </Layout>
+  );
+}

pages/flyingHandService/styled.tsx

+import styled from "styled-components"
+
+export const Box = styled.div`
+    box-sizing: border-box;
+    .flyingTop{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 15px 0;
+        width: 790px;
+        &-left{
+          .selectItem{
+            width: 120px;
+            background-color: #fff;
+            border-radius: 5px;
+          }  
+        }
+        .btn {
+            width: 220px;
+            height: 60px;
+            background: linear-gradient(90deg, #278eff 0%, #0052da 100%);
+            border-radius: 6px;
+            border: 0;
+            font-size: 16px;
+            font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+            font-weight: bold;
+            color: #ffffff;
+
+            &:hover {
+                opacity: 0.8;
+            }
+        }
+    }
+`
\ No newline at end of file

pages/home/index.tsx

-import {
-  Form,
-  Select,
-  InputNumber,
-  DatePicker,
-  Switch,
-  Slider,
-  Button,
-  Rate,
-  Typography,
-  Space,
-  Divider,
-} from 'antd';
-
-const { Option } = Select;
-const { Title } = Typography;
-
+import React from 'react';
+import {Box} from './styled';
+import Layout from "~/components/layout";
+import RotationChart from './rotationChart'
+import WaterfallFlowBody from './waterfallFlowBody'
 export default function Home() {
   return (
-    <>
-      <section style={{ textAlign: 'center', marginTop: 48, marginBottom: 40 }}>
-        <Space align='start'>
-          <img
-            style={{ width: 40, height: 40 }}
-            src='https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'
-            alt='Ant Design'
-          />
-          <Title level={2} style={{ marginBottom: 0 }}>
-            Ant Design
-          </Title>
-        </Space>
-      </section>
-      <Divider style={{ marginBottom: 60 }}>Form</Divider>
-      <Form labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
-        <Form.Item label='数字输入框'>
-          <InputNumber min={1} max={10} defaultValue={3} />
-          <span className='ant-form-text'> 台机器</span>
-          <a href='https://ant.design'>链接文字</a>
-        </Form.Item>
-        <Form.Item label='开关'>
-          <Switch defaultChecked />
-        </Form.Item>
-        <Form.Item label='滑动输入条'>
-          <Slider defaultValue={70} />
-        </Form.Item>
-        <Form.Item label='选择器'>
-          <Select defaultValue='lucy' style={{ width: 192 }}>
-            <Option value='jack'>jack</Option>
-            <Option value='lucy'>lucy</Option>
-            <Option value='disabled' disabled>
-              disabled
-            </Option>
-            <Option value='yiminghe'>yiminghe</Option>
-          </Select>
-        </Form.Item>
-        <Form.Item label='日期选择框'>
-          <DatePicker />
-        </Form.Item>
-        <Form.Item label='日期范围选择框'>
-          <DatePicker.RangePicker />
-        </Form.Item>
-        <Form.Item label='评分'>
-          <Rate defaultValue={5} />
-        </Form.Item>
-        <Form.Item wrapperCol={{ span: 8, offset: 8 }}>
-          <Space>
-            <Button type='primary' htmlType='submit'>
-              Submit
-            </Button>
-            <Button>Cancel</Button>
-          </Space>
-        </Form.Item>
-      </Form>
-    </>
-  );
+    <Layout>
+        <Box>
+          <RotationChart/>
+          <WaterfallFlowBody/>
+        </Box>
+    </Layout>
+  )
 }

pages/home/rotationChart/index.tsx

+import React from 'react';
+import { Carousel } from 'antd';
+import { Box } from "./styled"
+
+export default function RotationChart() {
+  return (
+    <Box>
+       <Carousel className='rotationChart' autoplay dots={{className:"botsBotton"}}>
+             <div>
+               <h3 className="contentStyle">1</h3>
+             </div>
+             <div>
+               <h3 className="contentStyle">2</h3>
+             </div>
+             <div>
+               <h3 className="contentStyle">3</h3>
+             </div>
+             <div>
+               <h3 className="contentStyle">4</h3>
+             </div>
+        </Carousel>
+        <div>
+          asdasdas
+        </div>
+    </Box>
+  )
+}

pages/home/rotationChart/styled.tsx

+import styled from "styled-components"
+
+export const Box = styled.div`
+    box-sizing: border-box;
+    margin: 15px 0 30px 0;
+    display: flex;
+    .rotationChart{
+        width: 790px;
+        margin-right: 24px;
+    }
+    .botsBotton{
+        li{
+            display: flex;
+            justify-content:center;
+            align-items: center;
+            &:not(.slick-active)>button{
+                width: 10px;
+                height: 10px;
+                border-radius:50%;
+            }
+            &>button{
+                height: 10px;
+                border-radius:5px;
+            }
+        }
+    }
+    .contentStyle{
+            width: 790px;
+            height: 490px;
+            color: #fff;
+            line-height: 490px;
+            text-align: center;
+            background: #364d79;
+    }
+`
\ No newline at end of file

pages/home/styled.tsx

+import styled from "styled-components"
+
+export const Box = styled.div`
+    box-sizing: border-box;
+`
\ No newline at end of file

pages/home/waterfallFlowBody/index.tsx

+import React from 'react';
+import {Box} from './styled';
+import ContentBox from '~/components/contentBox';
+export default function WaterfallFlowBody() {
+  const Dom = <div className='item' style={{height:343}}>12312312312</div>
+  const columns = [
+    {
+      element:Dom
+    }
+  ]
+  return (
+    <Box>
+      <ContentBox boxIndex={2} leftRenderDom={{columns:[{element:Dom}]}} rightRenderDom={{noFor:true,columns:[{element:Dom}]}}/>
+    </Box>
+  )
+}

pages/home/waterfallFlowBody/styled.tsx

+import styled from "styled-components"
+
+export const Box = styled.div`
+    box-sizing: border-box;
+    .item{
+        background-color: red;
+    }
+`
\ No newline at end of file

pages/jobServices/index.tsx

+import React, { useEffect, useState } from "react";
+import {Box} from './styled';
+import { Button, Select, Space, Tag } from "antd";
+import Layout from "~/components/layout";
+import ContentBox from '~/components/contentBox';
+
+export default function JobServices() {
+  const Dom = <div className='item' style={{height:343,backgroundColor:"#ccc"}}>12312312</div>
+
+  const [productList, setProductList] = useState(Array<{}>);
+
+  useEffect(() => {
+    setProductList([{}, {}, {}, {}, {}, {}]);
+  }, []);
+
+  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  (
+    <Layout>
+      <Box>
+      <div className="filter-wrap" style={{ marginBottom: "11px" }}>
+          <div className="filter-item">
+            <div className="filter-item__title">地域：</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" style={{marginBottom:24}}>
+          <div className="filter-item">
+            <div className="filter-item__title">行业：</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 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 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 className="filter-item-main">
+              <Space size={10}>
+                <Tag closable onClose={onCloseTag}>
+                  无人机
+                </Tag>
+                <Tag closable onClose={onCloseTag}>
+                  无人机
+                </Tag>
+              </Space>
+            </div>
+          </div>
+        </div>
+        <ContentBox boxIndex={2} leftRenderDom={{columns:[{element:Dom}]}} rightRenderDom={{noFor:true,columns:[{element:Dom}]}}/>
+      </Box>
+    </Layout>
+  )
+}

pages/jobServices/styled.tsx

+import styled from "styled-components"
+
+export const Box = styled.div`
+    box-sizing: border-box;
+    padding-top: 15px;
+`
\ No newline at end of file