Skip to content

W
web-ci-test
提交 5ea3bc3e 作者: 翁进城
操作

Merge remote-tracking branch 'origin/caoyun'

上级 73b9c58a dbc35e46
正在显示 包含 672 行增加 和 77 行删除
babel.config.json 0 → 100644
{
"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 0 → 100644
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 0 → 100644
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 0 → 100644
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 0 → 100644
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 0 → 100644
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 0 → 100644
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 0 → 100644
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 0 → 100644
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 0 → 100644
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 0 → 100644
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 0 → 100644
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 0 → 100644
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 0 → 100644
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 0 → 100644
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 0 → 100644
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 0 → 100644
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 0 → 100644
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 0 → 100644
import styled from "styled-components"
export const Box = styled.div`
box-sizing: border-box;
padding-top: 15px;
`
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论