Skip to content

W
web
提交 efc13e6d 作者: 曹云
操作

改-四个模块渲染条件

上级 8a0a3306
正在显示 包含 456 行增加 和 35 行删除
components/contentBox/index.tsx
......@@ -5,11 +5,10 @@ import Right from './right';
import {BoxProps} from './interface';
export default function ContentBox(props:BoxProps) {
console.log(props);
return (
<Box>
<Left {...props}/>
<Right />
<Left boxIndex={props.boxIndex} leftRenderDom={props.leftRenderDom}/>
<Right rightRenderDom={props.rightRenderDom}/>
</Box>
)
}
components/contentBox/interface.ts
export interface leftBoxProps {
boxIndex: number,
leftRenderDom: {
noFor?: boolean,
RenderDom: JSX.Element
},
}
export interface rightBoxProps {
rightRenderDom: {
noFor?: boolean,
RenderDom: JSX.Element
}
}
export interface BoxProps {
boxIndex:number,
RenderDom:JSX.Element
boxIndex: number,
leftRenderDom: {
noFor?: boolean,
RenderDom: JSX.Element
},
rightRenderDom: {
noFor?: boolean,
RenderDom: JSX.Element
}
}
\ No newline at end of file
components/contentBox/left/index.tsx
import React from 'react';
import { Box } from './styled';
import {BoxProps} from '../interface';
export default function Left(props:BoxProps) {
const { boxIndex , RenderDom } = props
import {leftBoxProps} from '../interface';
export default function Left(props:leftBoxProps) {
const { boxIndex , leftRenderDom } = props
return (
<Box index={boxIndex}>
{RenderDom}
{RenderDom}
{RenderDom}
{RenderDom}
{RenderDom}
{RenderDom}
{RenderDom}
{RenderDom}
{RenderDom}
{RenderDom}
{
leftRenderDom.noFor ?
<div>111111</div>
:
leftRenderDom.RenderDom
}
</Box>
)
}
components/contentBox/right/index.tsx
import React from 'react';
import { Box } from './styled';
export default function Right() {
import {rightBoxProps} from '../interface';
export default function Right(props:rightBoxProps) {
const { rightRenderDom } = props
return (
<Box>
<div className='item' style={{height:170,backgroundColor:"blue"}}>right</div>
<div className='item' style={{height:170,backgroundColor:"blue"}}>right</div>
{
rightRenderDom.noFor ?
<div>111111</div>
:
rightRenderDom.RenderDom
}
</Box>
)
}
pages/equipmentLeasing/index.tsx
import React from 'react';
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() {
return (
<Layout>
<div>EquipmentLeasing</div>
</Layout>);
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={{RenderDom:Dom}} rightRenderDom={{noFor:true,RenderDom: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
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>
<div>FlyingHandService</div>
<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={{RenderDom:Dom}} rightRenderDom={{noFor:true,RenderDom: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/rotationChart/index.tsx
......@@ -5,7 +5,7 @@ import { Box } from "./styled"
export default function RotationChart() {
return (
<Box>
<Carousel autoplay dots={{className:"botsBotton"}}>
<Carousel className='rotationChart' autoplay dots={{className:"botsBotton"}}>
<div>
<h3 className="contentStyle">1</h3>
</div>
......@@ -19,6 +19,9 @@ export default function RotationChart() {
<h3 className="contentStyle">4</h3>
</div>
</Carousel>
<div>
asdasdas
</div>
</Box>
)
}
pages/home/rotationChart/styled.tsx
......@@ -2,9 +2,12 @@ import styled from "styled-components"
export const Box = styled.div`
box-sizing: border-box;
width: 790px;
height: 490px;
margin: 15px 0 30px 0;
display: flex;
.rotationChart{
width: 790px;
margin-right: 24px;
}
.botsBotton{
li{
display: flex;
......
pages/home/waterfallFlowBody/index.tsx
......@@ -4,6 +4,6 @@ export default function WaterfallFlowBody() {
const Dom = <div className='item' style={{height:343}}>12312312312</div>
return <div>
<ContentBox boxIndex={2} RenderDom={Dom}/>
<ContentBox boxIndex={2} leftRenderDom={{RenderDom:Dom}} rightRenderDom={{noFor:true,RenderDom:Dom}}/>
</div>;
}
pages/jobServices/index.tsx
import React from 'react';
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}}>12312312</div>
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>
<ContentBox boxIndex={4} RenderDom={Dom}/>
<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={{RenderDom:Dom}} rightRenderDom={{noFor:true,RenderDom:Dom}}/>
</Box>
</Layout>
)
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论