Skip to content

W
web-ci-test
提交 7f57cbbc 作者: 曹云
操作

添-页面组件样式调整

上级 9fb83ac4
正在显示 包含 247 行增加 和 79 行删除
.babelrc 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 {...props}/>
<Right />
</Box>
)
}
components/contentBox/interface.ts 0 → 100644
export interface BoxProps {
boxIndex:number,
RenderDom:JSX.Element
}
\ No newline at end of file
components/contentBox/left/index.tsx 0 → 100644
import React from 'react';
import { Box } from './styled';
import {BoxProps} from '../interface';
export default function Left(props:BoxProps) {
const { boxIndex , RenderDom } = props
return (
<Box index={boxIndex}>
{RenderDom}
{RenderDom}
{RenderDom}
{RenderDom}
{RenderDom}
{RenderDom}
{RenderDom}
{RenderDom}
{RenderDom}
{RenderDom}
</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';
export default function Right() {
return (
<Box>
<div className='item' style={{height:170,backgroundColor:"blue"}}>right</div>
<div className='item' style={{height:170,backgroundColor:"blue"}}>right</div>
</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
......@@ -24,10 +24,13 @@
"next": "^13.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.62.1",
"ts-node": "^10.9.1",
"tslib": "^2.5.0",
"typescript": "^4.9.4",
"sass": "^1.62.1"
"typescript": "^4.9.4"
},
"dependencies": {}
"dependencies": {
"babel-plugin-styled-components": "^2.1.1",
"styled-components": "^6.0.0-rc.1"
}
}
pages/equipmentLeasing/index.tsx 0 → 100644
import React from 'react';
import Layout from "~/components/layout";
export default function EquipmentLeasing() {
return (
<Layout>
<div>EquipmentLeasing</div>
</Layout>);
}
pages/flyingHandService/index.tsx 0 → 100644
import React from 'react';
import Layout from "~/components/layout";
export default function FlyingHandService() {
return (
<Layout>
<div>FlyingHandService</div>
</Layout>
);
}
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 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>
</Box>
)
}
pages/home/rotationChart/styled.tsx 0 → 100644
import styled from "styled-components"
export const Box = styled.div`
box-sizing: border-box;
width: 790px;
height: 490px;
margin: 15px 0 30px 0;
.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 ContentBox from '~/components/contentBox';
export default function WaterfallFlowBody() {
const Dom = <div className='item' style={{height:343}}>12312312312</div>
return <div>
<ContentBox boxIndex={2} RenderDom={Dom}/>
</div>;
}
pages/jobServices/index.tsx 0 → 100644
import React from 'react';
import {Box} from './styled';
import Layout from "~/components/layout";
import ContentBox from '~/components/contentBox';
export default function JobServices() {
const Dom = <div className='item' style={{height:343}}>12312312</div>
return (
<Layout>
<Box>
<ContentBox boxIndex={4} RenderDom={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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论