Skip to content

W
web
提交 b4a76471 作者: 18928357778
操作

添-首页-布局修改

上级 bc0e29c8
正在显示 包含 93 行增加 和 25 行删除
components/contentBox/index.tsx
......@@ -10,6 +10,7 @@ export default function ContentBox(props: BoxProps) {
boxIndex={props.boxIndex}
leftRenderDom={props.leftRenderDom}
leftcontentstyle={props.leftcontentstyle}
leftWaterfallDom={props.leftWaterfallDom}
/>
<Right rightRenderDom={props.rightRenderDom} />
</Box>
......
components/contentBox/interface.ts
......@@ -5,9 +5,18 @@ export interface DomType {
}[];
pagination?: JSX.Element;
}
export interface WaterfallType {
columns: {
noFor?: boolean;
type?: string,
element: JSX.Element;
}[];
pagination?: JSX.Element;
}
export interface leftBoxProps {
boxIndex: number;
leftRenderDom: DomType;
leftRenderDom?: DomType;
leftWaterfallDom?: WaterfallType;
leftcontentstyle?: {
width?: string;
margin?: {
......@@ -24,7 +33,8 @@ export interface rightBoxProps {
export interface BoxProps {
boxIndex: number;
leftRenderDom: DomType;
leftRenderDom?: DomType;
leftWaterfallDom?: WaterfallType;
leftcontentstyle?: {
width?: string;
margin?: {
......
components/contentBox/left/index.tsx
import React from "react";
import { Empty } from "antd";
import { Box } from "./styled";
import { Box , WaterfallBox } from "./styled";
import { leftBoxProps } from "../interface";
export default function Left(props: leftBoxProps) {
const { boxIndex, leftRenderDom, leftcontentstyle } = props;
const { boxIndex, leftRenderDom, leftcontentstyle, leftWaterfallDom } = props;
return (
<div>
{leftRenderDom.columns.map((item) => {
{leftRenderDom?.columns.map((item) => {
if (item.noFor) {
return item.element;
}
......@@ -16,7 +15,7 @@ export default function Left(props: leftBoxProps) {
})}
{
<Box index={boxIndex} leftcontentstyle={leftcontentstyle}>
{leftRenderDom.columns.map((item) => {
{leftRenderDom?.columns.map((item) => {
if (!item.noFor) {
return item.element;
}
......@@ -24,8 +23,29 @@ export default function Left(props: leftBoxProps) {
})}
</Box>
}
{leftRenderDom.pagination ? leftRenderDom.pagination : null}
{!leftRenderDom.columns.length ? (
{
<WaterfallBox index={boxIndex} leftcontentstyle={leftcontentstyle}>
{ <div className="left-columns">
{leftWaterfallDom?.columns.map((item) => {
if (!item.noFor && item.type === "left") {
return item.element
}
return null
})}
</div>}
{ <div className="right-columns">
{leftWaterfallDom?.columns.map((item) => {
if (!item.noFor && item.type === "right") {
return item.element
}
return null
})}
</div>}
</WaterfallBox>
}
{leftRenderDom?.pagination ? leftRenderDom?.pagination : null}
{!leftRenderDom?.columns.length && !leftWaterfallDom?.columns.length? (
<Empty description={"暂无数据"} />
) : null}
</div>
......
components/contentBox/left/styled.tsx
......@@ -33,4 +33,31 @@ export const Box = styled.div<BoxProps>`
margin-right: 0;
}
}
`
export const WaterfallBox = styled.div<BoxProps>`
box-sizing: border-box;
display: flex;
width: ${props => props.leftcontentstyle?.width ? props.leftcontentstyle?.width : "790px"};
.item{
// 每个元素都要设置右边距margin-right（每个元素的左右间隙）
// 同时设置下边距margin-bottom（每个元素的上下间隙）
/* margin: 0 24px 15px 0; */
margin: ${props => props.leftcontentstyle?.margin ? (`${props.leftcontentstyle?.margin.top} ${props.leftcontentstyle?.margin.right} ${props.leftcontentstyle?.margin.bottom} ${props.leftcontentstyle?.margin.left}`) : "0 24px 15px 0"};;
width: calc(( 100% - ${props => props.index} * ${props => props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : "24px" }) / ${props => props.index});
// 这里一行显示index个，所以是/index，一行显示几个就除以几
// 这里的72px = (分布个数index-1)*间隙20px, 可以根据实际的分布个数和间隙区调整
min-width: calc(( 100% - ${props => props.index} * ${props => props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : "24px" }) / ${props => props.index});
max-width: calc(( 100% - ${props => props.index} * ${props => props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : "24px" }) / ${props => props.index});
// 每行最右侧的那个不设置右外边距
&:nth-child(${props => props.index}n + ${props => props.index}) {
margin-right: 0;
}
}
.left-columns{
}
.right-columns{
}
`
\ No newline at end of file
pages/home/waterfallFlowBody/index.tsx
......@@ -96,16 +96,16 @@ export default function WaterfallFlowBody() {
router: "/mall",
},
{
title: "无人机服务",
router: "/jobServices",
title: "无人机保险",
router: "",
},
{
title: "无人机培训",
router: "flyingHandService",
},
{
title: "无人机保险",
router: "",
title: "无人机服务",
router: "/jobServices",
},
{
title: "无人机工具软件",
......@@ -114,7 +114,7 @@ export default function WaterfallFlowBody() {
];
const [leftDomList, setLeftDomList] = useState(
Array<{ element: JSX.Element }>
Array<{ element: JSX.Element , type?: string,}>
);
const [rightTopDomList, setRightTopDomList] = useState<JSX.Element>();
const [rightBottomDomList, setRightBottomDomList] = useState<JSX.Element>();
......@@ -130,11 +130,12 @@ export default function WaterfallFlowBody() {
"modelId",
"qualityId",
];
const { IndustryFlightSkills } = flightSkillsApi;
const flightApiTypeList = ["licenseId", "flightSkillsId"];
const { listAllIndustry, listAllAppType } = jobServicesApi;
const jobApiTypeList = ["industryId", "appTypeId"];
const { IndustryFlightSkills } = flightSkillsApi;
const flightApiTypeList = ["licenseId", "flightSkillsId"];
useEffect(() => {
(async () => {
......@@ -155,8 +156,8 @@ export default function WaterfallFlowBody() {
listAllParts(),
listAllQuality(),
]);
let res3 = await Promise.all([listAllIndustry(), listAllAppType()]);
let res4 = await Promise.all([IndustryFlightSkills()]);
let res3 = await Promise.all([IndustryFlightSkills()]);
let res4 = await Promise.all([listAllIndustry(), listAllAppType()]);
// let res4 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
// let res6 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
......@@ -201,16 +202,22 @@ export default function WaterfallFlowBody() {
const listValue: any = [
resValuelist1,
resValuelist2,
[],
resValuelist3,
resValuelist4.flat(),
[],
[],
];
setMoreEqList(res1.map((item) => item.result).flat());
setLeftDomList(
columns.map((item, index) => {
return { element: leftDom(item, index, listValue) };
if (index < 3) {
console.log("路由跳转",index);
return { element: leftDom(item, index, listValue) , type:"left" };
}
console.log("路由跳转",index);
return { element: leftDom(item, index, listValue) , type:"right" };
})
);
......@@ -220,6 +227,8 @@ export default function WaterfallFlowBody() {
}, []);
const routerPath = (index: number, item?: AllType) => {
console.log(index);
if (item) {
router.push({
pathname: columns[index].router,
......@@ -260,7 +269,7 @@ export default function WaterfallFlowBody() {
</div>
<div className="item-body">
<Space size={[15, 0]} wrap>
{index === 4
{index === 2
? list.map((item, index) => (
<div
key={item}
......@@ -282,12 +291,12 @@ export default function WaterfallFlowBody() {
{item}
</div>
))
: resultList[index].map((item, index) => {
: resultList[index].map((item, indexer) => {
return (
<div
key={item?.name || item?.appName || item?.skillsName}
className={`item-bubble ${
index === 0 || index === 1 || index === 2
indexer === 0 || indexer === 1 || indexer === 2
? "active"
: ""
}`}
......@@ -380,12 +389,12 @@ export default function WaterfallFlowBody() {
return (
<Box>
<ContentBox
boxIndex={2}
boxIndex={1} //分为左右两列，每列一个,从上而下
leftcontentstyle={{
width: "806px",
margin: { top: 0, right: "10px", bottom: "10px", left: 0 },
}}
leftRenderDom={{
leftWaterfallDom={{
columns: [
{ noFor: true, element: <RotationChart key={45645645} /> },
...leftDomList,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论