Skip to content

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

添-首页-页面数据

上级 5239364a
正在显示 包含 413 行增加 和 228 行删除
components/contentBox/left/index.tsx
import React from 'react';
import {Empty} from 'antd';
import { Box } from './styled';
import {leftBoxProps} from '../interface';
export default function Left(props:leftBoxProps) {
const { boxIndex , leftRenderDom , leftcontentstyle} = props
......@@ -26,6 +28,9 @@ export default function Left(props:leftBoxProps) {
}
</Box>
}
{
!leftRenderDom.columns.length ? <Empty description={"暂无数据"}/> : null
}
</div>
)
}
pages/equipmentLeasing/api/index.tsx
import request, { Response } from '~/api/request';
export interface ListPageGoodsInfoParams {
export interface ListPageDeviceInfoParams {
"brandId"?: number,
"districtId"?: number,
"modelId"?: number,
......@@ -11,23 +11,38 @@ export interface ListPageGoodsInfoParams {
"qualityId"?: number
}
export interface Goods {
"createTime": string,
"directoryId": number,
"directoryName": string,
"goodsName": string,
"goodsOneLevelTypeName": string,
"goodsTwoLevelTypeName": string,
"id": number,
"imgUrl": string,
"isCoupons": number,
"status": number
export interface Device {
id: number,
wareNo: string,
wareTitle: string,
wareTypeId: number,
wareStatus: number,
minDeposit: number,
minRent: number,
totalStock: number,
totalSale: number,
propInfoId: null,
createTime: string,
wareImgs: [
{
id: number,
wareInfoId: number,
imgUrl: string,
imgType: number
}
],
tags: string[]
}
export interface Advertisement {
id:number,
imageUrl:string
}
export interface ListPageGoodsInfoResp {
export interface ListPageDeviceInfoResp {
"pageNo": 1,
"pageSize": 10,
"list": Array<Goods>,
"list": Array<Device>,
"totalCount": 0,
"totalPage": 0
}
......@@ -35,7 +50,11 @@ export interface ListPageGoodsInfoResp {
export default {
//web-设备租赁-分页
listPageGoodsInfo: (params: ListPageGoodsInfoParams): Promise<Response<ListPageGoodsInfoResp>> => {
return request('/pms/webProductMall/listPageGoodsInfo', 'post', params)
listPageDeviceInfo: (params: ListPageDeviceInfoParams): Promise<Response<ListPageDeviceInfoResp>> => {
return request('/pms/webDevice/deviceList', 'post', params)
},
//web-设备租赁-广告
listAdvertisementInfo: (): Promise<Response<Array<Advertisement>>> => {
return request('/pms/webDevice/ad', 'get')
}
}
\ No newline at end of file
pages/equipmentLeasing/index.page.tsx
......@@ -5,8 +5,9 @@ import {Box} from './styled';
import Layout from "~/components/layout";
import ContentBox from '~/components/contentBox';
import Filter, { FilterResult } from "~/components/filter";
import Image from 'next/image';
import { FilterOptionResp } from "~/components/filter/api";
import api,{Device,Advertisement} from './api';
// 此函数在构建时被调用
export async function getStaticProps() {
//获取筛选数据，进行静态渲染
......@@ -20,29 +21,55 @@ type Props = {
};
export default function EquipmentLeasing(props:Props) {
const [productList, setProductList] = useState(Array<{element:JSX.Element}>);
const [rightProductList, setRightProductList] = useState(Array<{element:JSX.Element}>);
const router = useRouter();
const leftDom = <div className='item' onClick={() => router.push('/equipmentLeasing/detail/1')}>
const leftDom = (item:Device)=>{
return (<div key={item.id} className='item' onClick={() => router.push('/equipmentLeasing/detail/1')}>
<div className="item-top">
<div className="item-top-image"></div>
<div className="item-top-image"> <Image src={item.wareImgs[0].imgUrl} alt="error" width={116} height={116}/> </div>
</div>
<div className="item-bottom">
<div className="item-bottom-title">入云龙ll 1550入云龙ll入</div>
<div className="item-bottom-title">{item.wareTitle}</div>
<div className="item-bottom-price">
<span className="money">¥23</span>
<span className="money">¥{item.minRent}</span>
<span className="unit">/天起</span>
</div>
</div>
</div>
const rightDom = <div className="right-box-item right-item">
</div>)
}
const rightDom = (item:Advertisement) => {
return (
<div key={item.id} className="right-box-item right-item">
<Image src={item.imageUrl} alt="error" width={270} height={422}/>
</div>
)
}
const onFilterChange = (filterResult: FilterResult) => {
console.log('filterResult', filterResult)
}
useEffect(() => {
api
.listPageDeviceInfo({
pageNo: 1,
pageSize: 10,
})
.then((res) => {
setProductList(res.result?.list.map(item=>{return { element:leftDom(item) }}) || [])
});
api
.listAdvertisementInfo()
.then((res) => {
setRightProductList(res.result?.map(item=>{return { element:rightDom(item) }}) || [])
});
}, []);
return (
<Layout>
<Box>
......@@ -52,7 +79,7 @@ export default function EquipmentLeasing(props:Props) {
onChange={onFilterChange}
></Filter>
<div style={{paddingTop:13}}>
<ContentBox boxIndex={4} leftcontentstyle={{width:"916px",margin:{top:0,right:"12px",bottom:"12px",left:0}}} leftRenderDom={{columns:[{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom}]}} rightRenderDom={{columns:[{element:rightDom},{element:rightDom}]}}/>
<ContentBox boxIndex={4} leftcontentstyle={{width:"916px",margin:{top:0,right:"12px",bottom:"12px",left:0}}} leftRenderDom={{columns:productList}} rightRenderDom={{columns:rightProductList}}/>
</div>
</Box>
</Layout>
......
pages/flyingHandService/api/index.tsx
......@@ -9,12 +9,13 @@ export interface ListPageFlyingInfoParams {
}
export interface Flying {
curriculumName:string,
curriculumDesc:string,
supplierName:string,
id: number,
price: number,
supplierName: string,
curriculumName: string,
free: 0 | 1,
price:number,
id:number,
curriculumDesc: string,
videoUrl: string
}
export interface ListPageFlyingInfoResp {
......
pages/flyingHandService/index.page.tsx
import React , {useEffect,useState} from 'react';
import {Box} from './styled';
// import Image from 'next/image';
import Image from 'next/image';
import { Button, Select, Space } from "antd";
import Layout from "~/components/layout";
import ContentBox from '~/components/contentBox';
......@@ -8,11 +8,14 @@ import api , {Flying} from "./api";
export default function FlyingHandService() {
const [productList, setProductList] = useState(Array<{element:JSX.Element}>);
const [list,setList] = useState(["https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/925072db-5872-44dd-8b71-e408ad3adf41.jpg","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/12d624b0-1250-44a6-9a3f-9025725a2adc.jpg"]
)
const [rightDomList, setRightDomList] = useState(Array<{element:JSX.Element}>)
const leftDom = (item:Flying)=>{
return (<div className='item' key={item.id}>
<div className='item-top'>
{/* <Image src={require("./assets/icon.png")} alt='#'/> */}
<Image src={`${item.videoUrl}?x-oss-process=video/snapshot,t_1000,m_fast`} alt='#' width={220} height={160}/>
{/* <img src={`${item.videoUrl}?x-oss-process=video/snapshot,t_1000,m_fast`} alt="" /> */}
</div>
<div className='item-bottom'>
<div className="bottom-title">{item.curriculumName}</div>
......@@ -23,7 +26,7 @@ export default function FlyingHandService() {
{
item.free ? <div className='price-right-label'>{item.price}</div> : <div>
<span className='price-right-label'>限免</span>
<span className='price-right-money'>{`¥${item.price}`}</span>
{/* <span className='price-right-money'>{`¥${item.price}`}</span> */}
</div>
}
</div>
......@@ -32,8 +35,11 @@ export default function FlyingHandService() {
</div>)
}
const rightDom = <div className='right-item' key={1}>
</div>
const rightDom = (item:string) => {
return ( <div className='right-box-item right-item' key={item}>
<Image src={item} alt="error" width={260} height={420}/>
</div>)
}
const onProvinceChange = (value: string) => {
console.log("省", value);
......@@ -43,12 +49,12 @@ export default function FlyingHandService() {
api
.listPageJobServicesInfo({
pageNo: 1,
pageSize: 10,
pageSize: 12,
})
.then((res) => {
setProductList(res.result?.list.map(item=>{return { element:leftDom(item) }}) || [])
});
setRightDomList(list.map(item=>{return {element:rightDom(item)}}))
}, []);
return (
......@@ -103,7 +109,7 @@ export default function FlyingHandService() {
</div>
<Button type="primary" className='btn'>报名学习课程</Button>
</div>
<ContentBox boxIndex={4} leftcontentstyle={{width:"925px",margin:{top:0,right:"15px",bottom:"15px",left:0}}} leftRenderDom={{columns:productList}} rightRenderDom={{columns:[{element:rightDom}]}}/>
<ContentBox boxIndex={4} leftcontentstyle={{width:"925px",margin:{top:0,right:"15px",bottom:"15px",left:0}}} leftRenderDom={{columns:productList}} rightRenderDom={{columns:rightDomList}}/>
</Box>
</Layout>
);
......
pages/home/waterfallFlowBody/api/index.ts 0 → 100644
import request, { Response } from '~/api/request';
export interface AllType {
id?: number,
name?: string,
appName?: string,
createTime?: string,
industryIcon?: string,
shortName?: null,
industryType?: null,
propagate1?: string,
propagate2?: string,
image?: string,
video?: string,
newsTitle?: string,
newsAuthor?: string,
userAccountId?: number,
surfaceImg?:string,
newsContents?: string,
updateTime?: string | null
tenderNewsId?: number,
tenderInfoNo?: string,
tenderContent?: string,
tenderPrice?: number,
apply?: number,
skillsName?: string
}
export interface FilterOptionResp {
id: number,
name: string
}
export interface RegionResp {
childInfo: RegionResp[] | null,
id: number,
level: number,
name: string,
pid: number
}
export const equipmentLeasingApi = {
deviceCategory: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webDevice/category');
},
deviceBrand: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webDevice/deviceBrand');
},
deviceModel: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webDevice/deviceModel');
},
}
export interface AppType {
id: number,
appName: string,
createTime: string
}
export interface IndustryType {
id: number,
industryIcon: string,
name: string,
shortName: null,
industryType: null,
propagate1: string,
propagate2: string,
image: string,
video: string
}
export const jobServicesApi = {
listAllAppType: (): Promise<Response<Array<AppType>>> => {
return request('/release/work/listAllAppType');
},
listAllIndustry: (): Promise<Response<Array<IndustryType>>> => {
return request('/release/work/listAllIndustry');
},
}
export const mallApi = {
listAllCategory: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webProductMall/category');
},
listAllParts: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webProductMall/parts');
},
listAllQuality: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webProductMall/quality');
},
}
export interface SkillsType {
id: 1,
skillsName: string
}
export const flightSkillsApi = {
IndustryFlightSkills: (): Promise<Response<Array<SkillsType>>> => {
return request('/release/curriculum/getIndustryFlightSkills');
},
}
export interface NewsPageType {
id: number,
newsTitle: string,
newsAuthor: string,
userAccountId: number,
surfaceImg:string,
newsContents: string,
createTime: string,
updateTime: string | null
}
export interface NewsTenderType {
id: number,
tenderNewsId: number,
tenderInfoNo: string,
tenderContent: string,
tenderPrice: number,
createTime: string,
apply: number
}
export interface ListPageNewsInfoResp {
pageNo: 1,
pageSize: 10,
list: Array<NewsPageType>,
totalCount: 0,
totalPage: 0
}
export interface ListTenderNewsInfoResp {
pageNo: 1,
pageSize: 10,
list: Array<NewsTenderType>,
totalCount: 0,
totalPage: 0
}
interface ListPageNewsInfoParams {
pageNo: number,
pageSize: number,
cityCode?: number,
date?: string,
districtCode?: number,
provinceCode?: number
}
interface ListTenderNewsInfoParams {
pageNo: number,
pageSize: number,
cityCode?: number,
date?: string,
districtCode?: number,
provinceCode?: number
}
export const listNewsApi = {
listNewsPage: (params:ListPageNewsInfoParams): Promise<Response<ListPageNewsInfoResp>> => {
return request('/release/industry-news/listNewsPage',"post",params);
},
listNewTenderInfo: (params:ListTenderNewsInfoParams): Promise<Response<ListTenderNewsInfoResp>> => {
return request('/release/tender/listNewTenderInfo','post',params);
},
}
\ No newline at end of file
pages/home/waterfallFlowBody/components/rotationChart/index.tsx
import React from 'react';
import { Carousel } from 'antd';
import { Box } from "./styled"
import Image from 'next/image';
export default function RotationChart() {
const list = ["https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/pc%E7%AB%AF%E8%BD%AE%E6%92%AD%E5%9B%BE1.png","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/ebf4fd5d-f8da-45b7-b0b3-282a31e43929.png","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/6b62ee5b-d929-4dee-b441-258c81c14403.png","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/0dd9e0f6-c1cd-485a-bdf4-8aeb84b1c67a.png","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/bcdabab5-f2f8-4c6d-85c6-4d304d8bfe4c.png"]
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>
{
list.map(item=>(<div key={item}>
<h3 className="contentStyle">
<Image src={item} alt="error" width={790} height={200}/>
</h3>
</div>))
}
</Carousel>
</Box>
)
......
pages/home/waterfallFlowBody/index.tsx
import React from "react";
import React, { useEffect, useState } from "react";
import { Space, Select, Button } from "antd";
import Image from "next/image";
import { Box } from "./styled";
......@@ -6,25 +6,89 @@ import ContentBox from "~/components/contentBox";
import RotationChart from "./components/rotationChart";
import Map from "./components/map";
import icon from "./assets/图标.png";
import { FilterOptionResp,
RegionResp ,
AllType,
AppType,
IndustryType,
SkillsType,
NewsPageType ,
NewsTenderType ,
equipmentLeasingApi ,
jobServicesApi ,
mallApi ,
flightSkillsApi ,
listNewsApi} from "./api";
import { BaseOptionType , DefaultOptionType } from "antd/es/select";
// const icon = "error";
export default function WaterfallFlowBody() {
const onMoreChange = (value: string) => {
console.log("更多", value);
};
const [list,setList] = useState(['中国人寿' ,'中国平安' ,'中国人保', '太平洋保险' ,'新华保险', '中国太平', '泰康保险', '华夏保险', '阳光保险', '友邦保险', '富德生命人寿' ,'中邮人寿', '前海人寿' ,'百年人寿', '国华人寿', '工银安盛人寿', '恒大人寿','君康人寿', '友邦保险', '建信人寿', '大家人寿', '农银人寿', '中信保城人寿', '合众人寿'])
const [list2,setList2] = useState(['天目将PAAS平台' ,'天目将公安平台' ,'天目将应急平台' ,'天目将城管平台' ,'天目将电力平台' ,'天目将石油平台' ,'SESP-U1无人机仿真软件', '云享飞服务号', '无人机商城' ,'云飞手', '云仓', '云享飞' ,'科比特智教'])
// const [brandData,setBrandData] = useState<FilterOptionResp[]>([])
const title = [
{
name: "无人机出租",
},
];
const leftDom = (
<div className="item">
const [moreEqList,setMoreEqList] = useState<any>()
const columns = ["无人机出租","无人机服务","无人机销售","无人机保险","无人机培训","无人机工具软件"];
const [leftDomList,setLeftDomList] = useState(Array<{element:JSX.Element}>)
const [rightTopDomList,setRightTopDomList] = useState<JSX.Element>()
const [rightBottomDomList,setRightBottomDomList] = useState<JSX.Element>()
const {deviceCategory,deviceBrand,deviceModel} = equipmentLeasingApi
const {listAllAppType,listAllIndustry} = jobServicesApi
const {listAllCategory,listAllParts,listAllQuality} = mallApi
const {IndustryFlightSkills} = flightSkillsApi
useEffect(()=>{
(async()=>{
let res1 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
let res2 = await Promise.all([listAllAppType(),listAllIndustry()])
let res3 = await Promise.all([listAllCategory(),listAllParts(),listAllQuality()])
// let res4 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
let res5 = await Promise.all([IndustryFlightSkills()])
// let res6 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
let res7 = await listNewsApi.listNewsPage({pageNo:1,pageSize:10})
let res8 = await listNewsApi.listNewTenderInfo({pageNo:1,pageSize:10})
const listValue:any = [res1.map(item=>item.result).flat(),res2.map(item=>item.result).flat(),res3.map(item=>item.result).flat(),[],res5.map(item=>item.result).flat(),[]]
console.log(res1.map(item=>item.result).flat());
setMoreEqList(res1.map(item=>item.result).flat())
setLeftDomList(columns.map((item,index)=>{return {element:leftDom(item,index,listValue)}}))
setRightTopDomList(rightDom(res7.result?.list!))
setRightBottomDomList(rightDom2(res8.result?.list!))
})()
// Promise.all([category(),brand(),model(),part(),quality(),region()]).then((res)=>{
// console.log("resssss ",res);
// const resultList = res.map(item=>{ return {result:item.result}})
// console.log(resultList[0].result);
// console.log(Array(resultList[0].result)[0]!.map((item,index)=>{
// console.log(item,index);
// return item.name
// }));
// setLeftDomList(columns.map((item,index)=>{return {element:leftDom(item,index,resultList)}}))
// })
},[])
const leftDom = (item:string,index:number,resultList:
Array<Array<AllType>>) => {
return (
<div key={item} className="item">
<div className="item-title">
<div className="item-left">
<div className="item-left-icon">
<Image src={icon} alt="#" />
</div>
<div className="item-left-label">无人机出租</div>
<div className="item-left-label">{item}</div>
</div>
<div>
<Select
......@@ -32,184 +96,71 @@ export default function WaterfallFlowBody() {
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 },
]}
options={moreEqList}
fieldNames={{value:"id",label:"name"}}
/>
</div>
</div>
<div className="item-body">
<Space size={[10, 8]} wrap>
<div className="item-bubble">123123</div>
<div className="item-bubble active">123123</div>
<div className="item-bubble">123123</div>
<div className="item-bubble active">123123</div>
<div className="item-bubble">123123</div>
<div className="item-bubble">123123</div>
<div className="item-bubble">123123</div>
<div className="item-bubble">123123</div>
{
index === 3 ? list.map(item=><div key={item} className="item-bubble">{item}</div>) : index === 5 ? list2.map(item=><div key={item} className="item-bubble">{item}</div>):
resultList[index].map((item,index)=>{
return <div className="item-bubble">{item.name || item.appName || item.skillsName}</div>
})
}
</Space>
</div>
</div>
);
}
const rightDom = (
const rightDom = (list:Array<NewsPageType>)=>{
return (
<div className="right-box-item right-item">
<div className="title">asdasdas</div>
<div className="title">行业新闻</div>
<div className="body">
<div className="body-item">
<div className="item-label">
asdasdasdasjhgdbjasjgdjashgdbjahsdgahjs
</div>
<div className="item-image">
<Image className="item-image" src={icon} alt="#" />
</div>
</div>
<div className="body-item">
<div className="item-label">
asdasdasdasjhgdbjasjgdjashgdbjahsdgahjs
</div>
<div className="item-image">
<Image className="item-image" src={icon} alt="#" />
</div>
</div>
<div className="body-item">
<div className="item-label">
asdasdasdasjhgdbjasjgdjashgdbjahsdgahjs
</div>
<div className="item-image">
<Image className="item-image" src={icon} alt="#" />
</div>
</div>
<div className="body-item">
<div className="item-label">
asdasdasdasjhgdbjasjgdjashgdbjahsdgahjs
</div>
<div className="item-image">
<Image className="item-image" src={icon} alt="#" />
</div>
</div>
<div className="body-item">
<div className="item-label">
asdasdasdasjhgdbjasjgdjashgdbjahsdgahjs
</div>
<div className="item-image">
<Image className="item-image" src={icon} alt="#" />
</div>
</div>
<div className="body-item">
{
list.map(item=>(<div key={item.id} className="body-item">
<div className="item-label">
asdasdasdasjhgdbjasjgdjashgdbjahsdgahjs
{item.newsTitle}
</div>
<div className="item-image">
<Image className="item-image" src={icon} alt="#" />
</div>
<Image className="item-image" src={item.surfaceImg} alt="#" width={40} height={40}/>
</div>
</div>))
}
</div>
</div>
);
)
}
const rightDom2 = (
const rightDom2 = (list:Array<NewsTenderType>) => {
return (
<div className="right-box-item right-item-second">
<div className="title">asdasdas</div>
<div className="title">招标快讯</div>
<div className="body">
<div className="body-item">
<div className="item-label">
<div className="label-top">
asdasdasdasjhgdbjasjgdjashgdbjahsdgahjs
</div>
<div className="label-bottom">123123</div>
</div>
<div className="item-right">
<Button className="btn" size="small" type="primary">
申请合作
</Button>
</div>
</div>
<div className="body-item">
<div className="item-label">
<div className="label-top">
asdasdasdasjhgdbjasjgdjashgdbjahsdgahjs
</div>
<div className="label-bottom">123123</div>
</div>
<div className="item-right">
<Button className="btn" size="small" type="primary">
申请合作
</Button>
</div>
</div>
<div className="body-item">
<div className="item-label">
<div className="label-top">
asdasdasdasjhgdbjasjgdjashgdbjahsdgahjs
</div>
<div className="label-bottom">123123</div>
</div>
<div className="item-right">
<Button className="btn" size="small" type="primary">
申请合作
</Button>
</div>
</div>
<div className="body-item">
<div className="item-label">
<div className="label-top">
asdasdasdasjhgdbjasjgdjashgdbjahsdgahjs
</div>
<div className="label-bottom">123123</div>
</div>
<div className="item-right">
<Button className="btn" size="small" type="primary">
申请合作
</Button>
</div>
</div>
<div className="body-item">
<div className="item-label">
<div className="label-top">
asdasdasdasjhgdbjasjgdjashgdbjahsdgahjs
</div>
<div className="label-bottom">123123</div>
</div>
<div className="item-right">
<Button className="btn" size="small" type="primary">
申请合作
</Button>
</div>
</div>
<div className="body-item">
<div className="item-label">
<div className="label-top">
asdasdasdasjhgdbjasjgdjashgdbjahsdgahjs
</div>
<div className="label-bottom">123123</div>
</div>
<div className="item-right">
<Button className="btn" size="small" type="primary">
申请合作
</Button>
</div>
</div>
<div className="body-item">
{
list.map(item=>(<div className="body-item">
<div className="item-label">
<div className="label-top">
asdasdasdasjhgdbjasjgdjashgdbjahsdgahjs
<div className="label-top" title={item.tenderContent}>
{item.tenderContent}
</div>
<div className="label-bottom">123123</div>
<div className="label-bottom">{item.tenderPrice}</div>
</div>
<div className="item-right">
<Button className="btn" size="small" type="primary">
申请合作
</Button>
</div>
</div>))
}
</div>
</div>
</div>
);
)
}
return (
<Box>
......@@ -218,19 +169,14 @@ export default function WaterfallFlowBody() {
leftRenderDom={{
columns: [
{ noFor: true, element: <RotationChart /> },
{ element: leftDom },
{ element: leftDom },
{ element: leftDom },
{ element: leftDom },
{ element: leftDom },
{ element: leftDom },
...leftDomList
],
}}
rightRenderDom={{
columns: [
{ element: <Map /> },
{ element: rightDom },
{ element: rightDom2 },
{ element: rightTopDomList as JSX.Element},
{ element: rightBottomDomList as JSX.Element},
],
}}
/>
......
pages/home/waterfallFlowBody/styled.tsx
......@@ -26,13 +26,11 @@ export const Box = styled.div`
display: flex;
justify-content: space-around;
align-items: center;
width: 150px;
&-icon {
width: 40px;
height: 40px;
}
&-label {
width: 100px;
height: 32px;
font-size: 20px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
......@@ -74,7 +72,6 @@ export const Box = styled.div`
align-items: center;
padding: 0 25px;
height: 60px;
width: 80px;
font-size: 20px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
......@@ -116,7 +113,6 @@ export const Box = styled.div`
align-items: center;
padding: 0 25px;
height: 62px;
width: 80px;
font-size: 20px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
......@@ -141,6 +137,13 @@ export const Box = styled.div`
line-height: 21px;
word-wrap: break-word;
.label-top {
text-overflow: -o-ellipsis-lastline;
overflow: hidden; //溢出内容隐藏
text-overflow: ellipsis; //文本溢出部分用省略号表示
display: -webkit-box; //特别显示模式
-webkit-line-clamp: 2; //行数
line-clamp: 2;
-webkit-box-orient: vertical; //盒子中内容竖直排列
}
.label-bottom {
font-size: 15px;
......
pages/jobServices/index.page.tsx
......@@ -6,6 +6,7 @@ import ContentBox from '~/components/contentBox';
import { useRouter } from "next/router";
import Filter, { FilterResult } from "~/components/filter";
import api , {Job} from "./api";
import Image from 'next/image';
// 此函数在构建时被调用
export async function getServerSideProps() {
return {
......@@ -13,8 +14,14 @@ export async function getServerSideProps() {
};
}
interface ImageListType {
}
export default function JobServices() {
const router = useRouter();
const [list,setList] = useState(["https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/90a52d3e-1ffa-4347-886e-a1c4535cf8b3.jpg","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/665512fd-12e6-49a9-93c1-f9dcd0e82083.jpg"])
const [rightDomList, setRightDomList] = useState(Array<{element:JSX.Element}>)
const leftDom = (item:Job) => {
return (<div key={item.id} className='item' onClick={() => router.push('/jobServices/detail/1')}>
......@@ -34,9 +41,11 @@ export default function JobServices() {
</div>)
}
const rightDom = <div className="advertisement" key={1}>
112312312312
</div>
const rightDom = (item:string) => {
return (<div className="right-box-item advertisement" key={item}>
<Image src={item} alt="error" width={260} height={420}/>
</div>)
}
const [productList, setProductList] = useState(Array<{element:JSX.Element}>);
......@@ -47,11 +56,10 @@ export default function JobServices() {
pageSize: 10,
})
.then((res) => {
// setProductList(res.result?.list || []);
setProductList(res.result?.list.map(item=>{return { element: leftDom(item) }}))
setProductList(res.result?.list.map(item=>{return { element: leftDom(item) }}) || [])
});
setRightDomList(list.map(item=>{return {element:rightDom(item)}}))
}, []);
const onFilterChange = (filterResult: FilterResult) => {
......@@ -62,14 +70,14 @@ export default function JobServices() {
<Layout>
<Box>
<Filter
types={[ "地域", "类目", "品牌", "型号"]}
types={[ "地域", "类目", "品牌"]}
showResultItem
onChange={onFilterChange}
></Filter>
<div style={{marginTop:18}}>
<ContentBox boxIndex={2}
leftRenderDom={{columns:productList}}
rightRenderDom={{columns:[{element:rightDom}]}}
rightRenderDom={{columns:rightDomList}}
leftcontentstyle={{width:"924px",margin:{top:0,right:"16px",bottom:"16px",left:0}}}
/>
</div>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论