diff --git a/src/forge/Information/Pages/JCC/homePage.jsx b/src/forge/Information/Pages/JCC/homePage.jsx index 08b37d1fb..fcf364b2a 100644 --- a/src/forge/Information/Pages/JCC/homePage.jsx +++ b/src/forge/Information/Pages/JCC/homePage.jsx @@ -1,5 +1,6 @@ -import React,{ useState, useEffect } from 'react'; +import React,{ useState, useRef, useEffect } from 'react'; import { httpUrl } from '../../fetch'; +import img1 from '../../img/img1.png'; import visionFw from '../../img/vision-fw.png'; import visionYj from '../../img/vision-yj.png'; @@ -13,7 +14,7 @@ import Projects from '../../Component/projects'; import Partner from '../../Component/partner'; import '../../indexZone1.scss' import './index.scss' -import { Popover } from 'antd'; +import { Popover, Tabs } from 'antd'; function HeaderPageJCC(props){ const [ projectList , setProjectList ] = useState(undefined); @@ -22,7 +23,9 @@ function HeaderPageJCC(props){ const [ partnerList, setParterList ] = useState(undefined); const { deptId } = props.match.params; const { data, id, history } = props; + const [ activeKey, setActiveKey ] = useState(undefined); + let tabTimer = undefined; const vision = [ {imageUrl: visionFw, title: '服务无边界'}, {imageUrl: visionYj, title: '云间有协作'}, @@ -30,7 +33,6 @@ function HeaderPageJCC(props){ {imageUrl: visionJz, title: '价值可交换'} ] - useEffect(()=>{ if(id){ getProjectList(); @@ -54,6 +56,10 @@ function HeaderPageJCC(props){ axios.get(url).then(result=>{ if(result){ setNewsList(result.data.rows); + clearInterval(tabTimer) + tabTimer = setInterval(() => { + handle(result.data.rows && result.data.rows[0].id, result.data.rows) + }, 5000) } }).catch(error=>{}) } @@ -92,8 +98,54 @@ function HeaderPageJCC(props){ } }).catch(error=>{}) } + + function handle(value, rows){ + console.log("value",value) + console.log('newsList',rows) + // 获取新闻id的数组 + let idList = rows ? rows.map(obj => obj.id) : [] + console.log('idList',idList) + + + // 获取所有 tab节点 + let tabs = document.querySelectorAll('.zone_news .ant-tabs-tab') + const tabIndex = idList.indexOf(value) + console.log('tabIndex',tabIndex) + if(tabIndex !== -1 ){ + if(tabIndex !== idList.length -1){ + tabs[tabIndex + 1].click() + }else{ + tabs[0].click() + } + } + + // switch (value) { + // case "tabOne": + // this.tabs[1].click() + // break + // case "tabTwo": + // this.tabs[2].click() + // break + // case "tabThree": + // this.tabs[0].click() + // break + // default: + // break + // } + } + function handleTabChange(key) { + console.log('key',key) + setTimeout(()=>{ + setActiveKey(key) + },100) + clearInterval(tabTimer) + tabTimer = setInterval(() => { + handle(key, newsList) + }, 5000) + } + return( -
+
{ // 专区简介 data && (data.introductionTitle || data.introductionContent || data.introductionImage) && @@ -132,45 +184,22 @@ function HeaderPageJCC(props){

{ data.homepageCmsTitle }

-
-

- 1 - {newsList[0].name} -

-

{newsList[0].summary}

-

- - - {newsList[0].publishTime} - - 查看更多 -

-
-
    + { newsList.map((i,k)=>{ return( - k > 0 && -
    { history.push(`/zone/${deptId}/newdetail/${i.id}`) }}> -
  • -

    - {k + 1} - {i.name} -

    -

    {i.summary}

    -

    - - - {i.publishTime} - - 查看详情 -

    -
    • -
    + { history.push(`/zone/${deptId}/newdetail/${i.id}`) }}> +
    +
    {i.name}
    +

    {i.publishTime}

    +

    {i.summary || '-'}

    + +
    +     ) }) } -
+
} diff --git a/src/forge/Information/Pages/JCC/index.scss b/src/forge/Information/Pages/JCC/index.scss index 0be308023..df6d1976e 100644 --- a/src/forge/Information/Pages/JCC/index.scss +++ b/src/forge/Information/Pages/JCC/index.scss @@ -1,22 +1,44 @@ +@import '../../theme.scss'; .zone_jcc_box{ background-color: #f7f7f7; + padding-top:70px; .zone_infos{ + display: flex; + align-items: center; + margin-top: 54px; + padding:27px 24px; position: relative; &>img{ position: absolute; right: 0; top: 0; + border-radius: 4px; + object-fit: contain; } .zone_infos_desc{ + position: relative; + padding:0px 34px 0px 10px; + flex: 1; .tleft{ text-align: left; margin-bottom: 25px !important; } .z_name{ + color:#1f2329; + font-size:26px; + height: 28px; + line-height: 28px; + margin-bottom: 28px!important; font-size: 20px; } .z_desc{ + color:#3d485d; + font-size:14px; + line-height:32px; + word-break: break-all; + -webkit-line-clamp: 4; + white-space: pre-wrap; background: white; padding: 50px 250px 50px 50px; margin-right: 350px; @@ -24,10 +46,228 @@ } } } + .zone_vision { + background-color: #ffffff; + .boxmain { + display: flex; + justify-content: space-between; + } + .vision_item { + width: 244px; + display: flex; + align-items: center; + flex-direction: column; + .vision_icon { + height: 162px; + width: 162px; + background-image: url(../../img/visionBack.png); + background-size: 100% 100%; + position: relative; + img { + width: 50%; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } + } + .vision_icon:hover { + background-image: url(../../img/visionBackActive.png); + } + .vision_title { + font-weight:700; + color:#1f2329; + font-size:17px; + line-height:27px; + text-align:center; + margin-top: 39px; + margin-top: 0; + font-weight: 600; + } + .vision_content { + margin-top: 21px; + color:#4c5876; + font-size:14px; + line-height:27px; + text-align:center; + } + } + } + .zone_news{ + height: 30.2vw; + min-height: 475px; + background-color: #273144; + background-image: url(../../img/bgJccNews.png); + background-repeat: no-repeat; + background-size: cover; + .boxmain { + width: 1200px; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-evenly; + } + .news_title { + height: 44px; + font-weight: 500; + color: #ffffff; + font-size: 32px; + text-align: center; + } + .photo { + margin-bottom: 3px; + margin-right: 5px; + } + .news_tab{ + color: #fff; + .ant-tabs-bar{ + background-color: rgba(33, 84, 118, 0.5); + } + .ant-tabs-nav-container{ + font-size: 18px; + } + .ant-tabs-left-bar .ant-tabs-tab, .ant-tabs-right-bar .ant-tabs-tab { + padding: 34px 24px; + margin: 0; + text-align: left; + width: 260px; + overflow-x: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + .ant-tabs-left-content { + padding-left: 100px; + } + .ant-tabs-tab-active{ + background-color: #04BBF7; + color: white; + } + .ant-tabs-nav .ant-tabs-tab:active { + color: white; + } + .ant-tabs-ink-bar{ + display: none !important; + } + .ant-tabs-nav .ant-tabs-tab:hover { + color: white; + } + .tab-content{ + height: 20.2vw; + display: flex; + flex-direction: column; + justify-content: space-between; + } + .title{ + font-size: 20px; + margin-bottom: 10px; + } + .new_desc{ + height: 48px; + font-size: 15px; + word-break: break-all; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + } + } + } + .zone_projects{ + background-image:linear-gradient(180deg,#f1f4fa 0%,#ffffff 100%); + .right_arraw { + width: 48px; + height: 48px; + right: 0; + } + .left_arraw { + width: 48px; + height: 48px; + left: 0; + z-index: 100; + } + .slick-track { + display: flex; + align-items: center; + height: 435px; + .slick-slide { + height: auto; + } + } + .less_three_project { + display: flex; + justify-content: center; + .container { + .zone_p_item { + background: #fefefe; + } + margin: 10px; + } + } + .not_three_project { + .slick-track { + .slick-slide[aria-hidden="true"] { + opacity: 0; + } + } + } + .slick-current { + z-index: 100; + } + .slick-current .zone_p_item { + width:364px; + height:395px; + background:#fefefe; + } + .zone_p_item { + width: 364px; + height: 320px; + border-radius:16px; + padding: 42px 42px 35px 42px; + box-shadow:0px 0px 20px rgba(35, 54, 185, 0.06); + background: url(../../img/projectBg.png) no-repeat; + background-size: 100% 100%; + border-color:#ffffff; + transition: 0.3s; + display: flex; + flex-direction: column; + align-items: center; + .info_img { + width:74px; + height: 74px; + border-radius: 50%; + } + .z_p_title { + font-weight: 700; + color: #1f2329; + font-size: 16px; + text-align: center; + margin-top: 10px; + cursor: pointer; + width: 90%; + } + .z_p_desc{ + margin-top: 18px; + color:#4c5876; + font-size:14px; + line-height:22px; + word-break: break-all; + -webkit-line-clamp: 5 + } + } + .zone_p_item:hover { + .z_p_title { + color: #07a583; + } + } + } .zone_contributor{ min-height: 466px; background-color: #F7F9FC; padding:44px 0px 30px; + .container { + height: 220px; + } .zone_c_lists{ display: flex; align-items: center; @@ -37,8 +277,8 @@ // background-image: url(./img/contributebg.png); box-shadow:0px 0px 15px rgba(49,61,113,0.06); background-size: 100% 100%; - width: 110px; - height: 110px; + width:80px; + height: 80px; border:1px solid #fff; display: flex; flex-direction: column; @@ -47,36 +287,65 @@ margin-bottom: 40px!important; margin-right: 40px; & img{ - width: 110px; - height: 110px; + width: 80px; + height: 80px; border-radius: 50%; margin-bottom: 16px; } } - } - } - .zone_vision { - .vision_item { - .vision_icon { + .slick-track { + display: flex; + } + .c_item { + margin-top: 40px; + margin-left: 10px; + width: 380px; + height: 165px; + background-image: url(../../img/cbg.png); + background-size: 100% 100%; + position: relative; + background-color:#f6f7fa; + border:2px solid; + border-color:#ffffff; + border-radius:4px; + box-shadow:0px 0px 10px rgba(7, 70, 165, 0.11); + padding: 30px 35px; img { - width: 50%; + position: absolute; + width:80px; + height:80px; + border-radius: 50%; + border: solid 2px #ffffff; + right: 27px; + top: -40px; + object-fit: cover; + } + .c_name { + color: #000000; + font-size: 16px; + text-align: center; + max-width: 240px; + } + .c_desc { + color: #4c5876; + font-size: 15px; + line-height: 26px; } } - .vision_title { - margin-top: 0; - font-weight: 600; + .c_item:hover { + box-shadow:0px 0px 35px rgba(7, 70, 165, 0.11); } } } } - .zone_popover{ - width: 300px; - :global{ - .ant-popover-title{ - font-weight: 600; - } - .ant-popover-content{ - width: 300px; - } +.zone_popover{ + width: 300px; + :global{ + .ant-popover-title{ + font-weight: 600; + } + .ant-popover-content{ + width: 300px; } } +} diff --git a/src/forge/Information/Pages/headerPage.jsx b/src/forge/Information/Pages/headerPage.jsx index 7ac2948c9..bb42d12a3 100644 --- a/src/forge/Information/Pages/headerPage.jsx +++ b/src/forge/Information/Pages/headerPage.jsx @@ -1,187 +1,96 @@ -import React,{ useState, useEffect } from 'react'; -import img1 from '../img/img1.png'; -import { httpUrl } from '../fetch'; -import guideArrow from '../img/guideArrow.png'; -import { Link } from 'react-router-dom'; -import shijian from '../img/shijian.png'; -import { getHomePageList , gethomePageDocList , getAllList } from '../api'; -import axios from 'axios'; -import Partner from '../Component/partner'; +import React , { Component } from 'react' +import "antd/dist/antd.css"; +import { Tabs , Carousel } from 'antd' +const contentStyle = { + height: '160px', + color: '#fff', + lineHeight: '160px', + textAlign: 'center', + background: '#364d79', +}; -function HeaderPage(props){ - const [ projectList , setProjectList ] = useState(undefined); - const [ personList , setPersonList ] = useState(undefined); - const [ newsList, setNewsList ] = useState(undefined); - const [ partnerList, setParterList ] = useState(undefined); - const { deptId } = props.match.params; - const { data, id, temp } = props; - - useEffect(()=>{ - if(id){ - getProjectList(); - getNewsList(); - getPersonList(); - getPartnerList(); +class App extends Component { + constructor(props){ + super(props); + this.state={ + activeKey:"tabOne" } - },[id]) - - function getPersonList(){ - getHomePageList(id).then(result=>{ - if(result){ - setPersonList(result.data.rows); - } - }).catch(error=>{}) } - - function getNewsList(){ - gethomePageDocList(id).then(result=>{ - if(result){ - setNewsList(result.data.rows); - } - }).catch(error=>{}) + componentDidMount(){ + this.tabs = document.querySelectorAll('.work-order .ant-tabs-tab') + this.tabTimer = setInterval(() => { + this.handle(this.state.activeKey) + }, 3000) } - - function getProjectList(){ - getAllList(id,{isHomepage:1}).then(result=>{ - if(result){ - setProjectList(result.data.rows); - } - }).catch(console.error()) + handle(value){ + console.log("value",value) + console.log('tab',this) + switch (value) { + case "tabOne": + this.tabs[1].click() + break + case "tabTwo": + this.tabs[2].click() + break + case "tabThree": + this.tabs[0].click() + break + default: + break + } } - - function getPartnerList(){ - const url = `${httpUrl}/zone/open/${id}/partners/list`; - axios.get(url).then(result=>{ - if(result){ - const array = result.data.rows; - const newArray = []; - for(let i in array) { - let e = array[i] - if (e.zonePartnersList && e.zonePartnersList.length > 0) { - e.zonePartnersList[0].typeName = e.typeName; + handleTabChange = key => { + clearInterval(this.tabTimer) + console.log("key",key) + setTimeout(()=>{ + if (key === 'tabOne') { + this.setState({activeKey:"tabOne"}) } - if ( e.zonePartnersList.length > 0 ) { - newArray.push(e.zonePartnersList); + else if (key === 'tabTwo') { + this.setState({activeKey:"tabTwo"}) } - } - setParterList(newArray); - } - }).catch(error=>{}) - } - return( -
- {data &&

{data.firstTitle}

} - { - // 专区简介 - data && (data.introductionTitle || data.introductionContent || data.introductionImage) && -
-
- {data.introductionTitle &&

{data.introductionTitle}

} -

+ else if (key === 'tabThree') { + this.setState({activeKey:"tabThree"}) + } + },100) + this.tabTimer = setInterval(() => { + this.handle(this.state.activeKey) + }, 3000) + } + render() { + const {TabPane} = Tabs + return( +
+ {/* 通过Carousel组件实现自动轮播 */} + +
+

1

+
+
+

2

+
+
+

3

+
+
+

4

+
+ + {/* 通过定时器实现自动轮播 */} + + + Content of Tab Pane 1 + + + Content of Tab Pane 2 + + + Content of Tab Pane 3 + +
- { - data.introductionImage && - - } -
- } - { - // 新闻动态 - data && data.cmsShow === 1 && newsList && newsList.length>0 && -
-

{ data.homepageCmsTitle }

-
-
- - {newsList[0].name} -

{newsList[0].summary}

-

- - {newsList[0].publishTime} -

-

- 查看详情 -

-
-
    - { - newsList.map((i,k)=>{ - return( - k > 0 &&
  • - {i.name} -

    {i.summary}

    -

    - - - {i.publishTime} - - 查看详情 -

    -
    • - ) - }) - } -
-
-
- } - { - // 精选项目 - data && data.projectShow === 1 && projectList && projectList.length>0 && -
-

{ data.homepageProjectTitle }

- { -
- { - projectList.map((i,k)=>{ - return( -
  • -
    {i.projectProperties && i.projectProperties.authorImageUrl && }
    -
    - window.open(i.projectURL)} className="z_p_title task-hide">{i.projectProperties && i.projectProperties.name} -

    {i.projectProperties && i.projectProperties.description ? i.projectProperties.description : "暂无~"}

    -
    -
    • - ) - }) - } -
    - } -
    - } - { - // 核心贡献者 - data && data.memberShow === 1 && personList && personList.length > 0 && -
    -

    { data.homepageMemberTitle }

    - { -
      - { - personList.map((i,k)=>{ - return( -
    • - - {i.name} -

      {i.introduction || "暂无~"}

      -
      • - ) - }) - } -
    - } -
    - } - - - { - // 合作伙伴 - data && data.partnersShow === 1 && partnerList && partnerList.length > 0 && -
    -

    { data.homepagePartnersTitle }

    - -
    - } -
    - ) + ) + } } -export default HeaderPage; \ No newline at end of file + +export default App \ No newline at end of file diff --git a/src/forge/Information/img/bgJccNews.png b/src/forge/Information/img/bgJccNews.png new file mode 100644 index 000000000..9332e0920 Binary files /dev/null and b/src/forge/Information/img/bgJccNews.png differ