| </head> | </head> | ||||
| <body> | <body> | ||||
| <div id="root"></div> | <div id="root"></div> | ||||
| <script src="/umi.23f5ba2d.js"></script> | |||||
| <script src="/umi.7e8d979f.js"></script> | |||||
| </body> | </body> | ||||
| </html> | </html> |
| .with-prefix:before{content:"";width:8px;height:8px;margin-right:16px;display:inline-block;background-color:#19be6e;transform:translateY(-1px)} |
| const height = loginHeightRef.current.offsetHeight; | const height = loginHeightRef.current.offsetHeight; | ||||
| getHeight(height) | getHeight(height) | ||||
| } | } | ||||
| }, []); | |||||
| }, [loginHeightRef.current]); | |||||
| return ( | return ( | ||||
| <> | <> |
| .with-prefix::before { | |||||
| content: ""; | |||||
| width: 8px; | |||||
| height: 8px; | |||||
| margin-right: 16px; | |||||
| display: inline-block; | |||||
| background-color: #19be6e; | |||||
| transform: translateY(-1px); | |||||
| } |
| import { useState, useEffect, useRef } from 'react'; | import { useState, useEffect, useRef } from 'react'; | ||||
| import { ProList, PageContainer } from '@ant-design/pro-components'; | import { ProList, PageContainer } from '@ant-design/pro-components'; | ||||
| import { ConfigProvider, Button, Flex, Input, Space, Tabs, Select, Row, List, Carousel, Tag, Card, Avatar, Typography } from 'antd'; | |||||
| import { ConfigProvider, Button, Flex, Input, Space, Tabs, Select, Row, List, Carousel, Tag, Card, Segmented, Typography } from 'antd'; | |||||
| import { SearchOutlined, FireOutlined, MessageOutlined, RightOutlined } from '@ant-design/icons'; | import { SearchOutlined, FireOutlined, MessageOutlined, RightOutlined } from '@ant-design/icons'; | ||||
| import { useModel, connect, history, Link } from 'umi'; | import { useModel, connect, history, Link } from 'umi'; | ||||
| import { GetSectionDetailByCode, GetArticleList } from '@/services/apis/information'; | import { GetSectionDetailByCode, GetArticleList } from '@/services/apis/information'; | ||||
| import './index.less' | |||||
| interface TalentHomeInformationProps { | interface TalentHomeInformationProps { | ||||
| height: number | height: number | ||||
| const TalentHomeInformation: React.FC<TalentHomeInformationProps> = ({ height }) => { | const TalentHomeInformation: React.FC<TalentHomeInformationProps> = ({ height }) => { | ||||
| const [list, setList] = useState<object[]>([]) | const [list, setList] = useState<object[]>([]) | ||||
| const [newsType, setNewsType] = useState<string>('政策补贴') | |||||
| const [newHeight, setNewHeight] = useState<number>(475) | |||||
| useEffect(() => { | useEffect(() => { | ||||
| GetSectionDetailByCode({ code: 'WZSYZX' }).then(res => { | |||||
| GetSectionDetailByCode({ code: 'JYFCZC' }).then(res => { | |||||
| GetArticleList({ page: 1, pagesize: 10, section_id: res.data.id }).then(res1 => { | GetArticleList({ page: 1, pagesize: 10, section_id: res.data.id }).then(res1 => { | ||||
| setList(res1.data.articles) | setList(res1.data.articles) | ||||
| }) | }) | ||||
| }) | }) | ||||
| }, []); | }, []); | ||||
| return ( | return ( | ||||
| <> | <> | ||||
| <ConfigProvider | <ConfigProvider | ||||
| } | } | ||||
| }} | }} | ||||
| > | > | ||||
| <Card size='small' style={{ width: '100%', height: height, borderRadius: 8, overflow: 'hidden' }}> | |||||
| <Space direction='vertical' size={0} style={{ width: '100%', overflow: 'hidden' }}> | |||||
| <Space direction='vertical' size={0} style={{ width: '100%', overflow: 'hidden', height: newHeight }}> | |||||
| <Segmented | |||||
| size='large' | |||||
| block | |||||
| value={newsType} | |||||
| options={['政策补贴', '最新资讯']} | |||||
| onChange={(value) => { | |||||
| setNewsType(value) | |||||
| if (value === '政策补贴') { | |||||
| GetSectionDetailByCode({ code: 'JYFCZC' }).then(res => { | |||||
| GetArticleList({ page: 1, pagesize: 10, section_id: res.data.id }).then(res1 => { | |||||
| setList(res1.data.articles) | |||||
| }) | |||||
| }) | |||||
| } else { | |||||
| GetSectionDetailByCode({ code: 'WZSYZX' }).then(res => { | |||||
| GetArticleList({ page: 1, pagesize: 10, section_id: res.data.id }).then(res1 => { | |||||
| setList(res1.data.articles) | |||||
| }) | |||||
| }) | |||||
| } | |||||
| }} | |||||
| /> | |||||
| <div style={{ padding: '20px 8px', borderRadius: 10, height: newHeight }}> | |||||
| { | { | ||||
| list && list.length > 0 && list.map(item => (<> | list && list.length > 0 && list.map(item => (<> | ||||
| <Link to={{ pathname: `/talent/information/detail?id=${item.id}` }} target='_blank'> | <Link to={{ pathname: `/talent/information/detail?id=${item.id}` }} target='_blank'> | ||||
| <Flex justify='space-between'> | |||||
| <Typography.Paragraph ellipsis={{ rows: 1 }} style={{ color: '#000', fontSize: 16 }}> | |||||
| {item.title} | |||||
| <Flex align='center'> | |||||
| <Typography.Paragraph className="with-prefix" ellipsis={{ rows: 1 }} style={{ color: '#000', fontSize: 16 }}> | |||||
| {item.title} | |||||
| </Typography.Paragraph> | </Typography.Paragraph> | ||||
| </Flex> | </Flex> | ||||
| </Link> | </Link> | ||||
| </>)) | </>)) | ||||
| } | } | ||||
| </Space> | |||||
| </Card> | |||||
| </div> | |||||
| </Space> | |||||
| </ConfigProvider > | </ConfigProvider > | ||||
| <Cascader style={{ width: '50%' }} placeholder="请选择地区" options={dictModel.areaList} fieldNames={cascaderfieldNames} onChange={(value) => { | <Cascader style={{ width: '50%' }} placeholder="请选择地区" options={dictModel.areaList} fieldNames={cascaderfieldNames} onChange={(value) => { | ||||
| setSearchJobParams(prevState => ({ | setSearchJobParams(prevState => ({ | ||||
| ...prevState, | ...prevState, | ||||
| location: value && value.length > 0 ? value[length - 1] : 0, | |||||
| location: value && value.length > 0 ? value[value.length - 1] : 0, | |||||
| })); | })); | ||||
| }} /> | }} /> | ||||
| </Space> | </Space> |
| <Space> | <Space> | ||||
| <Popconfirm | <Popconfirm | ||||
| showCancel={false} | showCancel={false} | ||||
| placement="bottom" | |||||
| placement="right" | |||||
| title='地区' | title='地区' | ||||
| icon={null} | icon={null} | ||||
| description={<> | description={<> | ||||
| onChange={() => { | onChange={() => { | ||||
| cityChange(item, index) | cityChange(item, index) | ||||
| setAreaItem({ item: item, index: index }) | setAreaItem({ item: item, index: index }) | ||||
| searchCityChange(item, index) | |||||
| }} | }} | ||||
| > | > | ||||
| {item.name} | {item.name} | ||||
| onChange={() => { | onChange={() => { | ||||
| cityChange(item, index) | cityChange(item, index) | ||||
| setAreaItem({ item: item, index: index }) | setAreaItem({ item: item, index: index }) | ||||
| searchCityChange(item, index) | |||||
| }} | }} | ||||
| > | > | ||||
| {item.name} | {item.name} | ||||
| )) | )) | ||||
| } | } | ||||
| </Flex> | </Flex> | ||||
| <Cascader style={{ width: '50%' }} placeholder="请选择地区" options={dictModel.areaList} fieldNames={cascaderfieldNames} /> | |||||
| <Cascader style={{ width: '50%' }} placeholder="请选择地区" options={dictModel.areaList} changeOnSelect fieldNames={cascaderfieldNames} onChange={(value, selectedOptions) => { | |||||
| console.log(value, selectedOptions) | |||||
| setSearchJobParams(prevState => ({ | |||||
| ...prevState, | |||||
| province: value && value[0] ? value[0] : 0, | |||||
| city: value && value[1] ? value[1] : 0, | |||||
| district: value && value[2] ? value[2] : 0, | |||||
| street: value && value[3] ? value[3] : 0, | |||||
| })); | |||||
| }} /> | |||||
| </Space> | </Space> | ||||
| </> | </> | ||||
| } | } | ||||
| okText="搜索" | |||||
| onConfirm={() => searchCityChange(areaItem.item, areaItem.index)} | |||||
| > | > | ||||
| <Button size='small'>选择地址</Button> | <Button size='small'>选择地址</Button> | ||||
| </Popconfirm> | </Popconfirm> | ||||
| </Popconfirm> | </Popconfirm> | ||||
| <Popconfirm | <Popconfirm | ||||
| showCancel={false} | showCancel={false} | ||||
| placement="bottom" | |||||
| placement="right" | |||||
| title='职位' | title='职位' | ||||
| icon={null} | icon={null} | ||||
| description={<> | description={<> |
| const [page, setPage] = useState<number>(1) | const [page, setPage] = useState<number>(1) | ||||
| const [pageSize, setPageSize] = useState<number>(3) | const [pageSize, setPageSize] = useState<number>(3) | ||||
| const [positionList, setPositionList] = useState<any[]>([]); | const [positionList, setPositionList] = useState<any[]>([]); | ||||
| const [loginHeight, setLoginHeight] = useState<number>(432) // 获取登录的高度 | |||||
| const [loginHeight, setLoginHeight] = useState<number>(475) // 获取登录的高度 | |||||
| const [keywordName, setKeywordName] = useState<string>(''); | const [keywordName, setKeywordName] = useState<string>(''); | ||||
| const [positionType, setPositionType] = useState<string>('热门职位') | const [positionType, setPositionType] = useState<string>('热门职位') | ||||
| const [type, setType] = useState<string>('jobseeker') | const [type, setType] = useState<string>('jobseeker') | ||||
| const [openPreview, setOpenPreview] = useState(false); | const [openPreview, setOpenPreview] = useState(false); | ||||
| dispatch({ type: 'dictModel/getList', payload: { code: 2027, type: 'setIndustryPostList' } }) | |||||
| // useEffect(() => { | // useEffect(() => { | ||||
| // PostJobSearch({ page: 1, pagesize: 3, keyword: '文员' }).then(res => { | // PostJobSearch({ page: 1, pagesize: 3, keyword: '文员' }).then(res => { | ||||
| setLoginHeight(value) | setLoginHeight(value) | ||||
| } | } | ||||
| return ( | return ( | ||||
| <> | <> | ||||
| </PageContainer> | </PageContainer> | ||||
| {/* 未登录的登录页 */} | {/* 未登录的登录页 */} | ||||
| <Flex vertical justify='center' align='center' style={{ background: '#ffffff', width: '100%', marginBottom: 40, position: 'relative' }}> | |||||
| <Flex vertical justify='center' align='center' style={{ background: '#edfff3', padding: '40px 314px', width: '100%' }}> | |||||
| <Flex vertical justify='center' align='center' style={{ width: '100%', marginBottom: 40, position: 'relative' }}> | |||||
| <Flex vertical justify='center' align='center' style={{ background: '#ffffff', padding: '40px 314px', width: '100%' }}> | |||||
| <Flex justify='space-bewteen' style={{ width: '100%' }}> | <Flex justify='space-bewteen' style={{ width: '100%' }}> | ||||
| <Row gutter={[16, 16]}> | <Row gutter={[16, 16]}> | ||||
| <Col span={6}> | |||||
| <Tabs | |||||
| size='small' | |||||
| style={{ height: '300px', zIndex: 99 , background: '#ffffff' }} | |||||
| tabPosition='left' | |||||
| items={dictModel.industryPostList.map((item, index) => { | |||||
| return { | |||||
| key: item.id, | |||||
| label: item.name, | |||||
| children: (<> | |||||
| <Space direction='vertical' style={{ height: '600px', overflow: 'auto' }}> | |||||
| { | |||||
| item.children.map((childrenItem, childrenIndex) => ( | |||||
| <> | |||||
| <Typography.Title level={5}> | |||||
| { | |||||
| childrenItem.name | |||||
| } | |||||
| </Typography.Title> | |||||
| <Space wrap> | |||||
| { | |||||
| childrenItem.children.map((thirdItem, thirdIndex) => ( | |||||
| <> | |||||
| <Space> | |||||
| {thirdItem.name} | |||||
| </Space> | |||||
| </> | |||||
| )) | |||||
| } | |||||
| </Space> | |||||
| </> | |||||
| )) | |||||
| } | |||||
| </Space> | |||||
| </>) | |||||
| } | |||||
| })} | |||||
| /> | |||||
| </Col> | |||||
| <Col span={12}> | |||||
| <Col span={16}> | |||||
| <TalentHomeBanner getHeight={getHeight}></TalentHomeBanner> | <TalentHomeBanner getHeight={getHeight}></TalentHomeBanner> | ||||
| </Col> | </Col> | ||||
| <Col span={6} style={{ height: loginHeight, width: '100%' }}> | |||||
| <Col span={8} style={{ height: loginHeight, width: '100%' }}> | |||||
| <Flex justify='flex-end' style={{ height: loginHeight, width: '100%' }}> | <Flex justify='flex-end' style={{ height: loginHeight, width: '100%' }}> | ||||
| <TalentHomeInformation height={loginHeight}></TalentHomeInformation> | <TalentHomeInformation height={loginHeight}></TalentHomeInformation> | ||||
| </Flex> | </Flex> |