Skip to content

W
web
提交 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 @@ ...@@ -7,6 +7,12 @@
justify-content: center; justify-content: center;
} }
.nav{
width: 1200px;
display: flex;
align-items: center;
}
.logo { .logo {
width: 148px; width: 148px;
height: 68px; height: 68px;
......
components/NavHeader/index.tsx
...@@ -10,15 +10,15 @@ const items: TabsProps['items'] = [ ...@@ -10,15 +10,15 @@ const items: TabsProps['items'] = [
label: ` 首页 `, label: ` 首页 `,
}, },
{ {
key: '1', key: '/jobServices',
label: `作业服务`, label: `作业服务`,
}, },
{ {
key: '2', key: '/equipmentLeasing',
label: `设备租赁`, label: `设备租赁`,
}, },
{ {
key: '3', key: '/flyingHandService',
label: `飞手服务`, label: `飞手服务`,
}, },
{ {
...@@ -47,6 +47,7 @@ export default function NavHeader() { ...@@ -47,6 +47,7 @@ export default function NavHeader() {
return ( return (
<div className={styles.navHeader}> <div className={styles.navHeader}>
<div className={styles.nav}>
<div className={styles.logo}></div> <div className={styles.logo}></div>
<Tabs <Tabs
className={styles.tabs} className={styles.tabs}
...@@ -63,6 +64,7 @@ export default function NavHeader() { ...@@ -63,6 +64,7 @@ export default function NavHeader() {
<div className={styles.haedImg}> <div className={styles.haedImg}>
<Avatar size={48} style={{ background: '#fff' }}></Avatar> <Avatar size={48} style={{ background: '#fff' }}></Avatar>
</div> </div>
</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 = { ...@@ -18,7 +18,9 @@ const contentStyle: React.CSSProperties = {
lineHeight: '1', lineHeight: '1',
color: '', color: '',
backgroundColor: '', backgroundColor: '',
width:1200,
position: 'relative', position: 'relative',
margin: "0 auto"
}; };
const footerStyle: React.CSSProperties = { const footerStyle: React.CSSProperties = {
...@@ -29,6 +31,7 @@ const footerStyle: React.CSSProperties = { ...@@ -29,6 +31,7 @@ const footerStyle: React.CSSProperties = {
position: 'relative' position: 'relative'
}; };
type Props = { type Props = {
children: React.ReactNode; children: React.ReactNode;
}; };
......
package.json
...@@ -24,10 +24,13 @@ ...@@ -24,10 +24,13 @@
"next": "^13.1.1", "next": "^13.1.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"sass": "^1.62.1",
"ts-node": "^10.9.1", "ts-node": "^10.9.1",
"tslib": "^2.5.0", "tslib": "^2.5.0",
"typescript": "^4.9.4", "typescript": "^4.9.4"
"sass": "^1.62.1"
}, },
"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 { import React from 'react';
Form, import {Box} from './styled';
Select, import Layout from "~/components/layout";
InputNumber, import RotationChart from './rotationChart'
DatePicker, import WaterfallFlowBody from './waterfallFlowBody'
Switch,
Slider,
Button,
Rate,
Typography,
Space,
Divider,
} from 'antd';
const { Option } = Select;
const { Title } = Typography;
export default function Home() { export default function Home() {
return ( return (
<> <Layout>
<section style={{ textAlign: 'center', marginTop: 48, marginBottom: 40 }}> <Box>
<Space align='start'> <RotationChart/>
<img <WaterfallFlowBody/>
style={{ width: 40, height: 40 }} </Box>
src='https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' </Layout>
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>
</>
);
} }
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论