Skip to content

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

添-作业服务-详情页面

上级 2733a9dc
正在显示 包含 279 行增加 和 1 行删除
pages/jobServices/detail/[pid].tsx 0 → 100644
import React from 'react'
import Layout from "~/components/layout";
import {Box} from './styled';
import { Tabs , Button } from 'antd';
import type { TabsProps } from 'antd';
import Evaluate from './components/evaluate';
export default function index() {
const onChange = (key: string) => {
console.log(key);
};
const items: TabsProps['items'] = [
{
key: '1',
label: `团队介绍`,
children: `详情`,
},
{
key: '2',
label: `团队评价`,
children: <Evaluate />,
},
];
return (
<Layout>
<Box>
<div className='top'>
<div className="top-image"></div>
<div className='top-right'>
<div className='right-top'>
<div className='title'>
农田测绘
</div>
<div className='detail'>
<div className='tab'>专业飞手</div>
<span className='content'>飞手需通过认证培训才可作业</span>
</div>
<div className='more'>
<div className='tab filst'>测绘场景榜第1名</div>
<div className='tab'>7x24小时服务</div>
</div>
</div>
<div className='right-bottom'>
<div className='bottom-btn'>
<Button className='btn-left' size='small' type="primary">马上预约</Button>
<Button className='btn-right' size='small' type="primary">电话沟通</Button>
</div>
</div>
</div>
</div>
<Tabs className='tabs' defaultActiveKey="1" items={items} onChange={onChange} />
</Box>
</Layout>
)
}
pages/jobServices/detail/components/evaluate/index.tsx 0 → 100644
import React from 'react'
import {Box} from './styled';
import { Rate } from 'antd';
import Image from 'next/image';
export default function index() {
const list = [{},{},{},{}]
return (
<Box>
{
list.map(item=>(
<div className='item'>
<div className='item-user'>
<div className='item-user-image'>
<Image className='image' height={42} width={42} src="" alt='#'/>
</div>
<div className='item-user-info'>
<div className="item-user-info-name">湖南139*****098</div>
<Rate style={{height:30}} disabled defaultValue={2} />
</div>
</div>
<div className="item-content">
<div className='item-content-label'>飞手很专业，不愧是经过专业培训的，及时高</div>
<div className='item-content-image'>
<div className='image-item'></div>
<div className='image-item'></div>
<div className='image-item'></div>
<div className='image-item'></div>
<div className='image-item'></div>
</div>
<div className='item-content-time'>
3月4日
</div>
</div>
</div>
))
}
</Box>
)
}
pages/jobServices/detail/components/evaluate/styled.tsx 0 → 100644
import styled from "styled-components"
export const Box = styled.div`
box-sizing: border-box;
.item{
height: 180px;
margin-bottom: 30px;
&-user{
display: flex;
align-items: center;
&-image{
overflow: hidden;
width: 42px;
height: 42px;
background-color: #D8D8D8;
border-radius: 50%;
margin-right: 6px;
}
&-info{
&-name{
height: 20px;
line-height: 20px;
font-size: 15px;
font-family: MicrosoftYaHei;
color: #303030;
}
}
}
&-content{
padding-left: 47px;
&-label{
width: 638px;
height: 20px;
line-height: 20px;
font-size: 15px;
font-family: MicrosoftYaHei;
color: #303030;
/* 溢出隐藏显示省略号 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&-image{
display: flex;
margin-top: 8px;
.image-item{
width: 80px;
height: 80px;
background-color: #D8D8D8;
border-radius: 2px;
margin-right: 10px;
}
}
&-time{
width: 45px;
height: 20px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #797979;
line-height: 20px;
margin-top: 10px;
}
}
}
`
\ No newline at end of file
pages/jobServices/detail/styled.tsx 0 → 100644
import styled from "styled-components"
export const Box = styled.div`
box-sizing: border-box;
width: 1200px;
height: 1338px;
margin-top: 18px;
background-color: #FFFFFF;
.top{
display: flex;
height: 300px;
padding: 24px 0 0 24px;
&-image{
width: 300px;
height: 300px;
background-color: #F4F5F7;
border-radius: 6px;
margin-right: 32px;
}
&-right{
display: flex;
flex-direction: column;
justify-content: space-between;
height: 300px;
.right-top{
.title{
width: 283px;
height: 26px;
font-size: 28px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #090909;
line-height: 26px;
}
.detail{
display: flex;
margin-top: 27px;
.tab{
width: 64px;
height: 18px;
line-height: 18px;
text-align: center;
background: linear-gradient(270deg, #3E62E5 0%, #3588F7 100%);
border-radius: 9px;
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #F6FDFE;
margin-right: 5px;
}
.content{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 20px;
}
}
.more{
display: flex;
margin-top: 25px;
.tab{
width: 131px;
height: 23px;
line-height: 23px;
text-align: center;
border-radius: 3px;
font-family: MicrosoftYaHei;
background-color: #F4F4F4;
color: #333333;
margin-right: 8px;
&.filst{
color: #6E411E;
background-color: #F9E3D1;
}
}
}
}
.right-bottom{
.bottom-btn{
.btn-left{
width: 207px;
height: 40px;
background-color: #FFE4D1;
border: 1px solid #EBBAAF;
font-family: MicrosoftYaHei;
color: #FF552D;
letter-spacing: 1px;
margin-right: 12px;
}
.btn-right{
width: 207px;
height: 40px;
background: #FF552D;
font-family: MicrosoftYaHei;
color: #FFFFFF;
letter-spacing: 1px;
}
}
}
}
}
.tabs{
padding: 0 60px;
margin-top: 69px;
}
`
\ No newline at end of file
pages/jobServices/index.tsx
...@@ -3,9 +3,12 @@ import {Box} from './styled'; ...@@ -3,9 +3,12 @@ import {Box} from './styled';
import { Button, Select, Space, Tag } from "antd"; import { Button, Select, Space, Tag } from "antd";
import Layout from "~/components/layout"; import Layout from "~/components/layout";
import ContentBox from '~/components/contentBox'; import ContentBox from '~/components/contentBox';
import { useRouter } from "next/router";
export default function JobServices() { export default function JobServices() {
const leftDom = <div className='item'> const router = useRouter();
const leftDom = <div className='item' onClick={() => router.push('/jobServices/detail/1')}>
<div className="item-top"> <div className="item-top">
<div className="value"> <div className="value">
<div className="value-left"> <div className="value-left">
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论