Skip to content

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

添-首页，作业服务，设备租赁，飞手服务四个模块静态样式

上级 dbc35e46
正在显示 包含 830 行增加 和 48 行删除
components/contentBox/index.tsx
...@@ -7,7 +7,7 @@ export default function ContentBox(props:BoxProps) { ...@@ -7,7 +7,7 @@ export default function ContentBox(props:BoxProps) {
console.log(props); console.log(props);
return ( return (
<Box> <Box>
<Left boxIndex={props.boxIndex} leftRenderDom={props.leftRenderDom}/> <Left boxIndex={props.boxIndex} leftRenderDom={props.leftRenderDom} leftContentStyle={props.leftContentStyle}/>
<Right rightRenderDom={props.rightRenderDom}/> <Right rightRenderDom={props.rightRenderDom}/>
</Box> </Box>
) )
......
components/contentBox/interface.ts
interface DomType { export interface DomType {
noFor?: boolean, columns:{noFor?:boolean,element:JSX.Element}[],
columns:{element:JSX.Element}[],
} }
export interface leftBoxProps { export interface leftBoxProps {
boxIndex: number, boxIndex: number,
leftRenderDom: DomType, leftRenderDom: DomType,
leftContentStyle?:{
width?:string,
margin?:{
top:number | string,
right:number | string,
bottom:number | string,
left:number | string
}
}
} }
export interface rightBoxProps { export interface rightBoxProps {
rightRenderDom: DomType rightRenderDom: DomType
...@@ -13,5 +21,14 @@ export interface rightBoxProps { ...@@ -13,5 +21,14 @@ export interface rightBoxProps {
export interface BoxProps { export interface BoxProps {
boxIndex: number, boxIndex: number,
leftRenderDom: DomType, leftRenderDom: DomType,
leftContentStyle?:{
width?:string,
margin?:{
top:number | string,
right:number | string,
bottom:number | string,
left:number | string
}
},
rightRenderDom: DomType rightRenderDom: DomType
} }
\ No newline at end of file
components/contentBox/left/index.tsx
...@@ -2,15 +2,30 @@ import React from 'react'; ...@@ -2,15 +2,30 @@ import React from 'react';
import { Box } from './styled'; import { Box } from './styled';
import {leftBoxProps} from '../interface'; import {leftBoxProps} from '../interface';
export default function Left(props:leftBoxProps) { export default function Left(props:leftBoxProps) {
const { boxIndex , leftRenderDom } = props const { boxIndex , leftRenderDom , leftContentStyle} = props
return ( return (
<Box index={boxIndex}> <div>
{
leftRenderDom.columns.map((item)=>{
if (item.noFor) {
return item.element
}
return null
})
}
{
<Box index={boxIndex} leftContentStyle={leftContentStyle}>
{ {
leftRenderDom.noFor ? leftRenderDom.columns.map((item)=>{
<div>111111</div> if (!item.noFor) {
: return item.element
leftRenderDom.columns.map((item)=>item.element) }
return null
})
} }
</Box> </Box>
}
</div>
) )
} }
components/contentBox/left/styled.tsx
import styled from "styled-components" import styled from "styled-components"
export interface BoxProps { export interface BoxProps {
index:number index:number,
leftContentStyle?:{
width?:string,
margin?:{
top:number | string,
right:number | string,
bottom:number | string,
left:number | string
}
}
} }
export const Box = styled.div<BoxProps>` export const Box = styled.div<BoxProps>`
box-sizing: border-box; box-sizing: border-box;
width:790px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: ${props => props.leftContentStyle?.width ? props.leftContentStyle?.width : "790px"};
.item{ .item{
// 每个元素都要设置右边距margin-right（每个元素的左右间隙） // 每个元素都要设置右边距margin-right（每个元素的左右间隙）
// 同时设置下边距margin-bottom（每个元素的上下间隙） // 同时设置下边距margin-bottom（每个元素的上下间隙）
margin: 0 24px 15px 0; /* margin: 0 24px 15px 0; */
width: calc((100% - ${props => props.index - 1} * 24px) / ${props => props.index}); 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 - 1} * ${props => props.leftContentStyle?.margin ? props.leftContentStyle?.margin.right : "24px" }) / ${props => props.index});
// 这里一行显示index个，所以是/index，一行显示几个就除以几 // 这里一行显示index个，所以是/index，一行显示几个就除以几
// 这里的72px = (分布个数index-1)*间隙20px, 可以根据实际的分布个数和间隙区调整 // 这里的72px = (分布个数index-1)*间隙20px, 可以根据实际的分布个数和间隙区调整
min-width: calc((100% - ${props => props.index - 1} * 24px) / ${props => props.index}); min-width: calc((100% - ${props => props.index - 1} * ${props => props.leftContentStyle?.margin ? props.leftContentStyle?.margin.right : "24px" }) / ${props => props.index});
max-width: calc((100% - ${props => props.index - 1} * 24px) / ${props => props.index}); max-width: calc((100% - ${props => props.index - 1} * ${props => props.leftContentStyle?.margin ? props.leftContentStyle?.margin.right : "24px" }) / ${props => props.index});
// 每行最右侧的那个不设置右外边距 // 每行最右侧的那个不设置右外边距
&:nth-child(${props => props.index}n + ${props => props.index}) { &:nth-child(${props => props.index}n + ${props => props.index}) {
margin-right: 0; margin-right: 0;
} }
} }
` `
\ No newline at end of file
components/contentBox/right/index.tsx
...@@ -6,10 +6,7 @@ export default function Right(props:rightBoxProps) { ...@@ -6,10 +6,7 @@ export default function Right(props:rightBoxProps) {
return ( return (
<Box> <Box>
{ {
rightRenderDom.noFor ? rightRenderDom.columns.map((item)=>item.element)
<div>111111</div>
:
rightRenderDom.columns.map((item)=>item.element)
} }
</Box> </Box>
) )
......
components/contentBox/right/styled.tsx
...@@ -2,8 +2,7 @@ import styled from "styled-components" ...@@ -2,8 +2,7 @@ import styled from "styled-components"
export const Box = styled.div` export const Box = styled.div`
box-sizing: border-box; box-sizing: border-box;
width: 384px; .right-box-item{
.item{
margin-bottom: 20px; margin-bottom: 20px;
} }
` `
\ No newline at end of file
components/layout/index.tsx
...@@ -18,7 +18,7 @@ const contentStyle: React.CSSProperties = { ...@@ -18,7 +18,7 @@ const contentStyle: React.CSSProperties = {
lineHeight: '1', lineHeight: '1',
color: '', color: '',
backgroundColor: '', backgroundColor: '',
width:1200, // width:1200,
position: 'relative', position: 'relative',
margin: "0 auto" margin: "0 auto"
}; };
......
package.json
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
"typescript": "^4.9.4" "typescript": "^4.9.4"
}, },
"dependencies": { "dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"babel-plugin-styled-components": "^2.1.1", "babel-plugin-styled-components": "^2.1.1",
"styled-components": "^6.0.0-rc.1" "styled-components": "^6.0.0-rc.1"
} }
......
pages/equipmentLeasing/index.tsx
...@@ -5,7 +5,22 @@ import Layout from "~/components/layout"; ...@@ -5,7 +5,22 @@ import Layout from "~/components/layout";
import ContentBox from '~/components/contentBox'; import ContentBox from '~/components/contentBox';
export default function EquipmentLeasing() { export default function EquipmentLeasing() {
const Dom = <div className='item' style={{height:343,backgroundColor:"#ccc"}}>12312312</div> const leftDom = <div className='item'>
<div className="item-top">
<div className="item-top-image"></div>
</div>
<div className="item-bottom">
<div className="item-bottom-title">asdasd</div>
<div className="item-bottom-price">
<span className="money">¥23</span>
<span className="unit">/天起</span>
</div>
</div>
</div>
const rightDom = <div className="right-box-item right-item">
</div>
const [productList, setProductList] = useState(Array<{}>); const [productList, setProductList] = useState(Array<{}>);
...@@ -149,7 +164,7 @@ export default function EquipmentLeasing() { ...@@ -149,7 +164,7 @@ export default function EquipmentLeasing() {
</div> </div>
</div> </div>
</div> </div>
<ContentBox boxIndex={4} leftRenderDom={{columns:[{element:Dom}]}} rightRenderDom={{noFor:true,columns:[{element:Dom}]}}/> <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}]}}/>
</Box> </Box>
</Layout> </Layout>
) )
......
pages/equipmentLeasing/styled.tsx
...@@ -3,4 +3,63 @@ import styled from "styled-components" ...@@ -3,4 +3,63 @@ import styled from "styled-components"
export const Box = styled.div` export const Box = styled.div`
box-sizing: border-box; box-sizing: border-box;
padding-top: 15px; padding-top: 15px;
width: 1200px;
.item{
width: 220px;
height: 205px;
background: #FFFFFF;
border-radius: 6px;
cursor: pointer;
transition: all .5s;
&-top{
height: 145px;
background: #FFFFFF;
border-radius: 6px 6px 0px 0px;
padding: 19px 52px 10px 52px;
&-image{
width: 116px;
height: 116px;
background: #EFEFEF;
}
}
&-bottom{
padding: 10px 13px 14px 18px;
&-title{
width: 189px;
height: 24px;
font-size: 14px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #333333;
line-height: 24px;
}
&-price{
.money{
width: 50px;
height: 26px;
font-size: 16px;
font-family: Arial-BoldMT, Arial;
font-weight: normal;
color: #FF552D;
line-height: 22px;
}
.unit{
width: 58px;
height: 22px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #FF552D;
line-height: 22px;
}
}
}
&:hover{
box-shadow: 20px 20px 10px 0px rgba(228,228,228,1);
}
}
.right-item{
width: 270px;
height: 422px;
background: #D8D8D8;
}
` `
\ No newline at end of file
pages/flyingHandService/index.tsx
import React from 'react'; import React from 'react';
import {Box} from './styled'; import {Box} from './styled';
import { Button, Select, Space, Tag } from "antd"; // import Image from 'next/image';
import { Button, Select, Space } from "antd";
import Layout from "~/components/layout"; import Layout from "~/components/layout";
import ContentBox from '~/components/contentBox'; import ContentBox from '~/components/contentBox';
export default function FlyingHandService() { export default function FlyingHandService() {
const Dom = <div className='item' style={{height:343,backgroundColor:"#ccc"}}>12312312</div> const leftDom = <div className='item'>
<div className='item-top'>
{/* <Image src={require("./assets/icon.png")} alt='#'/> */}
</div>
<div className='item-bottom'>
<div className="bottom-title">asdasdas</div>
<div className="bottom-details">多旋翼无人机设计课程多旋翼无人机设计课程多旋翼无人机设计课程，资源</div>
<div className='bottom-price'>
<div className='bottom-price-left'>供应商简称</div>
<div className='bottom-price-right'>
<span className='price-right-label'>限免</span>
<span className='price-right-money'>¥2999</span>
</div>
</div>
</div>
</div>
const rightDom = <div className='right-item'>
</div>
const onProvinceChange = (value: string) => { const onProvinceChange = (value: string) => {
console.log("省", value); console.log("省", value);
...@@ -63,7 +82,7 @@ export default function FlyingHandService() { ...@@ -63,7 +82,7 @@ export default function FlyingHandService() {
</div> </div>
<Button type="primary" className='btn'>报名学习课程</Button> <Button type="primary" className='btn'>报名学习课程</Button>
</div> </div>
<ContentBox boxIndex={2} leftRenderDom={{columns:[{element:Dom}]}} rightRenderDom={{noFor:true,columns:[{element:Dom}]}}/> <ContentBox boxIndex={4} leftContentStyle={{width:"925px",margin:{top:0,right:"15px",bottom:"15px",left:0}}} leftRenderDom={{columns:[{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom}]}} rightRenderDom={{columns:[{element:rightDom}]}}/>
</Box> </Box>
</Layout> </Layout>
); );
......
pages/flyingHandService/styled.tsx
...@@ -2,12 +2,13 @@ import styled from "styled-components" ...@@ -2,12 +2,13 @@ import styled from "styled-components"
export const Box = styled.div` export const Box = styled.div`
box-sizing: border-box; box-sizing: border-box;
width: 1200px;
.flyingTop{ .flyingTop{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 15px 0; padding: 15px 0;
width: 790px; width: 925px;
&-left{ &-left{
.selectItem{ .selectItem{
width: 120px; width: 120px;
...@@ -25,10 +26,100 @@ export const Box = styled.div` ...@@ -25,10 +26,100 @@ export const Box = styled.div`
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI; font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
&:hover { &:hover {
opacity: 0.8; opacity: 0.8;
} }
} }
} }
.item{
width: 220px;
height: 320px;
cursor: pointer;
transition: all .5s;
background-color: #fff;
border-radius: 6px;
&-top{
width: 220px;
height: 160px;
background-color: #E6E6E6;
border-radius: 6px 6px 0px 0px;
}
&-bottom{
height: 160px;
padding: 9px 12px 20px;
border-radius: 0px 0px 6px 6px;
background-color: #fff;
.bottom-title{
width: 196px;
height: 44px;
font-size: 15px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #34383F;
line-height: 22px;
-webkit-background-clip: text;
}
.bottom-details{
width: 192px;
height: 44px;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #828A92;
line-height: 22px;
//超出两行隐藏
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.bottom-price{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 14px;
&-left{
width: 100px;
height: 26px;
line-height: 26px;
background: #E7EEFF;
border-radius: 12px;
text-align: center;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #4280F9;
}
&-right{
.price-right-label {
width: 36px;
height: 22px;
font-size: 18px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #FF552D;
line-height: 22px;
}
.price-right-money {
margin-left: 5px;
width: 36px;
height: 16px;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #8790A2;
line-height: 16px;
-webkit-background-clip: text;
}
}
}
}
&:hover{
box-shadow: 20px 20px 10px 0px rgba(228,228,228,1);
}
}
.right-item{
width: 260px;
height: 420px;
background: #FFFFFF;
border-radius: 6px;
}
` `
\ No newline at end of file
pages/home/index.tsx
import React from 'react'; import React from 'react';
import {Box} from './styled'; import {Box} from './styled';
import Layout from "~/components/layout"; import Layout from "~/components/layout";
import RotationChart from './rotationChart'
import WaterfallFlowBody from './waterfallFlowBody' import WaterfallFlowBody from './waterfallFlowBody'
export default function Home() { export default function Home() {
return ( return (
<Layout> <Layout>
<Box> <Box>
<RotationChart/>
<WaterfallFlowBody/> <WaterfallFlowBody/>
</Box> </Box>
</Layout> </Layout>
......
pages/home/waterfallFlowBody/components/map/index.tsx 0 → 100644
import React, { Component, useEffect } from 'react';
import {Box} from './styled';
export default function MapComponent() {
let map
const init =async ()=>{
try {
const AMapLoader = await import(/* webpackChunkName: "amap" */ '@amap/amap-jsapi-loader');
AMapLoader.load({
key: '87b424e68754efc3ba9d11ae07475091', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then(AMap => {
map = new AMap.Map('container', {
// 设置地图容器id
viewMode: '3D', // 是否为3D地图模式
zoom: 11, // 初始化地图级别
center: [113.93029,22.53291], // 初始化地图中心点位置
});
})
.catch(e => {
console.log(e);
});
} catch (error) {
console.log(error);
}
}
useEffect(()=>{
init()
},[])
return (
<Box className='right-box-item'>
<div id="container" className="map" ></div>
<div className='map-dosome'>
<div>服务网点</div>
<div>租赁网点</div>
<div>培训网点</div>
<div>更多网点</div>
</div>
</Box>
)
}
\ No newline at end of file
pages/home/waterfallFlowBody/components/map/styled.tsx 0 → 100644
import styled from "styled-components"
export const Box = styled.div`
box-sizing: border-box;
width: 384px;
height: 337px;
#container{
position: relative;
padding: 0px;
margin: 0px;
width: 384px;
height: 285px;
}
.amap-logo {//去除高德地图水印
display: none!important;
visibility: hidden!important;
}
.amap-copyright {//去除高德地图水印
display: none!important;
visibility: hidden!important;
}
.map-dosome{
display: flex;
align-items: center;
justify-content: space-around;
width: 384px;
height: 52px;
background: #FFFFFF;
border-radius: 0px 0px 6px 6px;
}
`
\ No newline at end of file
pages/home/rotationChart/index.tsx → pages/home/waterfallFlowBody/components/rotationChart/index.tsx
import React from 'react'; import React from 'react';
import { Carousel } from 'antd'; import { Carousel } from 'antd';
import { Box } from "./styled" import { Box } from "./styled"
export default function RotationChart() { export default function RotationChart() {
return ( return (
<Box> <Box>
...@@ -19,9 +18,6 @@ export default function RotationChart() { ...@@ -19,9 +18,6 @@ export default function RotationChart() {
<h3 className="contentStyle">4</h3> <h3 className="contentStyle">4</h3>
</div> </div>
</Carousel> </Carousel>
<div>
asdasdas
</div>
</Box> </Box>
) )
} }
pages/home/rotationChart/styled.tsx → pages/home/waterfallFlowBody/components/rotationChart/styled.tsx
...@@ -2,13 +2,15 @@ import styled from "styled-components" ...@@ -2,13 +2,15 @@ import styled from "styled-components"
export const Box = styled.div` export const Box = styled.div`
box-sizing: border-box; box-sizing: border-box;
margin: 15px 0 30px 0; margin: 0 0 30px 0;
display: flex; display: flex;
.rotationChart{ .rotationChart{
width: 790px; width: 790px;
margin-right: 24px; margin-right: 24px;
} }
.botsBotton{ .botsBotton{
position: absolute;
left: 10px;
li{ li{
display: flex; display: flex;
justify-content:center; justify-content:center;
...@@ -26,9 +28,9 @@ export const Box = styled.div` ...@@ -26,9 +28,9 @@ export const Box = styled.div`
} }
.contentStyle{ .contentStyle{
width: 790px; width: 790px;
height: 490px; height: 200px;
color: #fff; color: #fff;
line-height: 490px; line-height: 200px;
text-align: center; text-align: center;
background: #364d79; background: #364d79;
} }
......
pages/home/waterfallFlowBody/index.tsx
import React from 'react'; import React from 'react';
import {Space,Select,Button} from 'antd';
import Image from 'next/image';
import {Box} from './styled'; import {Box} from './styled';
import ContentBox from '~/components/contentBox'; import ContentBox from '~/components/contentBox';
import RotationChart from './components/rotationChart'
import Map from './components/map';
export default function WaterfallFlowBody() { export default function WaterfallFlowBody() {
const Dom = <div className='item' style={{height:343}}>12312312312</div>
const columns = [ const onMoreChange = (value: string) => {
console.log("更多", value);
};
const title = [
{ {
element:Dom name:"无人机出租"
} }
] ]
const leftDom = <div className='item'>
<div className='item-title'>
<div className='item-left'>
<div className='item-left-icon'>
<Image src={require("./assets/icon.png")} alt='#'/>
</div>
<div className='item-left-label'>
无人机出租
</div>
</div>
<div>
<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='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>
</Space>
</div>
</div>
const rightDom = <div className='right-box-item right-item'>
<div className="title">
asdasdas
</div>
<div className="body">
<div className='body-item'>
<div className='item-label'>
asdasdasdasjhgdbjasjgdjashgdbjahsdgahjs
</div>
<div className='item-image'>
<Image className='item-image' src={require("./assets/icon.png")} alt='#'/>
</div>
</div>
<div className='body-item'>
<div className='item-label'>
asdasdasdasjhgdbjasjgdjashgdbjahsdgahjs
</div>
<div className='item-image'>
<Image className='item-image' src={require("./assets/icon.png")} alt='#'/>
</div>
</div>
<div className='body-item'>
<div className='item-label'>
asdasdasdasjhgdbjasjgdjashgdbjahsdgahjs
</div>
<div className='item-image'>
<Image className='item-image' src={require("./assets/icon.png")} alt='#'/>
</div>
</div>
<div className='body-item'>
<div className='item-label'>
asdasdasdasjhgdbjasjgdjashgdbjahsdgahjs
</div>
<div className='item-image'>
<Image className='item-image' src={require("./assets/icon.png")} alt='#'/>
</div>
</div>
<div className='body-item'>
<div className='item-label'>
asdasdasdasjhgdbjasjgdjashgdbjahsdgahjs
</div>
<div className='item-image'>
<Image className='item-image' src={require("./assets/icon.png")} alt='#'/>
</div>
</div>
<div className='body-item'>
<div className='item-label'>
asdasdasdasjhgdbjasjgdjashgdbjahsdgahjs
</div>
<div className='item-image'>
<Image className='item-image' src={require("./assets/icon.png")} alt='#'/>
</div>
</div>
</div>
</div>
const rightDom2 = <div className='right-box-item right-item-second'>
<div className="title">
asdasdas
</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'>
<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>
</div>
return ( return (
<Box> <Box>
<ContentBox boxIndex={2} leftRenderDom={{columns:[{element:Dom}]}} rightRenderDom={{noFor:true,columns:[{element:Dom}]}}/> <ContentBox boxIndex={2} leftRenderDom={{columns:[{noFor:true,element:<RotationChart/>},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom}]}} rightRenderDom={{columns:[{element:<Map/>},{element:rightDom},{element:rightDom2}]}}/>
</Box> </Box>
) )
} }
pages/home/waterfallFlowBody/styled.tsx
import styled from "styled-components" import styled from "styled-components"
let one = require("./assets/icon.png")
export const Box = styled.div` export const Box = styled.div`
box-sizing: border-box; box-sizing: border-box;
padding-top: 24px;
width: 1200px;
margin: 0 auto;
.item{ .item{
background-color: red; height:343px;
transition: all .5s;
cursor: pointer;
&-title{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 25px;
height: 75px;
background: #FFFFFF;
box-shadow: 10px 10px 20px 0px rgba(228,228,228,0.3);
border-radius: 6px 6px 0px 0px ;
.item-left{
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;
font-weight: bold;
color: #000000;
line-height: 32px;
}
}
}
&-body{
padding-left: 10px;
height: 268px;
background: #FFFFFF;
box-shadow: 10px 10px 20px 0px rgba(228,228,228,0.3);
border-radius: 0px 0px 6px 6px;
.item-bubble{
/* width: 80px; */
padding: 0 5px;
height: 32px;
line-height: 32px;
background: #F4F6F9;
border-radius: 19px;
text-align: center;
cursor: pointer;
&.active{
color: #FF552D;
}
}
}
&:hover{
box-shadow: 20px 20px 10px 0px rgba(228,228,228,1);
}
}
.right-item{
height: 344px;
background-color: #fff;
.title{
display: flex;
align-items: center;
padding: 0 25px;
height: 60px;
width: 80px;
font-size: 20px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #000000;
line-height: 25px;
}
.body{
height: 284px;
overflow-y: auto;
&-item{
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
padding: 0 20px;
.item-label{
width: 217px;
height: 40px;
font-size: 16px;
font-family: MicrosoftYaHei;
color: #323232;
line-height: 21px;
word-wrap: break-word;
}
.item-image{
width: 96px;
height: 60px;
background: #D8D8D8;
border-radius: 6px;
}
}
}
}
.right-item-second{
height: 510px;
background-color: #fff;
.title{
display: flex;
align-items: center;
padding: 0 25px;
height: 62px;
width: 80px;
font-size: 20px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #000000;
line-height: 25px;
}
.body{
height: 448px;
overflow-y: auto;
&-item{
display: flex;
justify-content: space-between;
align-items: center;
height: 88px;
padding: 0 20px;
.item-label{
width: 217px;
height: 40px;
font-size: 16px;
font-family: MicrosoftYaHei;
color: #323232;
line-height: 21px;
word-wrap: break-word;
.label-top{
}
.label-bottom{
font-size: 15px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FF552D;
}
}
.item-right{
.btn{
text-align: center;
background: #FF552D;
border-radius: 14px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #FFFFFF;
}
}
}
}
} }
` `
\ No newline at end of file
pages/jobServices/index.tsx
...@@ -5,7 +5,25 @@ import Layout from "~/components/layout"; ...@@ -5,7 +5,25 @@ import Layout from "~/components/layout";
import ContentBox from '~/components/contentBox'; import ContentBox from '~/components/contentBox';
export default function JobServices() { export default function JobServices() {
const Dom = <div className='item' style={{height:343,backgroundColor:"#ccc"}}>12312312</div> const leftDom = <div className='item'>
<div className="item-top">
<div className="value">
<div className="value-left">
<div className="label">asdasdasdasdasasdasdasdasdasasdasdasdasdas</div>
<div className="com">asdasdasdasdas</div>
</div>
<div className="value-right"><span className="money">¥6600</span> <span className="unit">/平</span></div>
</div>
</div>
<div className="item-bottom">
<div className="bottom-left">114条评价</div>
<div className="bottom-right">专业飞手团队，精通巡航业务</div>
</div>
</div>
const rightDom = <div className="advertisement">
112312312312
</div>
const [productList, setProductList] = useState(Array<{}>); const [productList, setProductList] = useState(Array<{}>);
...@@ -149,7 +167,11 @@ export default function JobServices() { ...@@ -149,7 +167,11 @@ export default function JobServices() {
</div> </div>
</div> </div>
</div> </div>
<ContentBox boxIndex={2} leftRenderDom={{columns:[{element:Dom}]}} rightRenderDom={{noFor:true,columns:[{element:Dom}]}}/> <ContentBox boxIndex={2}
leftRenderDom={{columns:[{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom}]}}
rightRenderDom={{columns:[{element:rightDom}]}}
leftContentStyle={{width:"924px",margin:{top:0,right:"16px",bottom:"16px",left:0}}}
/>
</Box> </Box>
</Layout> </Layout>
) )
......
pages/jobServices/styled.tsx
...@@ -3,4 +3,87 @@ import styled from "styled-components" ...@@ -3,4 +3,87 @@ import styled from "styled-components"
export const Box = styled.div` export const Box = styled.div`
box-sizing: border-box; box-sizing: border-box;
padding-top: 15px; padding-top: 15px;
width: 1200px;
.item {
width: 454px;
height: 180px;
background: #FFFFFF;
box-shadow: 10px 10px 20px 0px rgba(228,228,228,0.3);
border-radius: 6px;
padding: 24px;
cursor: pointer;
transition: all .5s;
&-top{
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
.value{
display: flex;
justify-content: space-between;
&-left{
.label{
width: 275px;
height: 48px;
font-size: 20px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #333333;
line-height: 24px;
letter-spacing: 1px;
word-wrap: break-word;
}
.com{
width: 216px;
height: 22px;
font-size: 16px;
font-family: MicrosoftYaHei;
color: #828A92;
line-height: 22px;
}
}
&-right{
.money{
width: 89px;
height: 22px;
font-size: 28px;
font-family: Arial-BoldMT, Arial;
font-weight: normal;
color: #FF552D;
line-height: 22px;
}
.unit{
width: 24px;
height: 22px;
font-size: 16px;
font-family: MicrosoftYaHei;
color: #FF552D;
line-height: 22px;
}
}
}
}
&-bottom{
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #828B93;
line-height: 22px;
-webkit-background-clip: text;
padding-top: 16px;
.bottom-left{
}
.bottom-right{
}
}
&:hover{
box-shadow: 20px 20px 10px 0px rgba(228,228,228,1);
}
}
.advertisement{
width: 260px;
height: 420px;
background: #FFFFFF;
border-radius: 6px;
}
` `
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论