Gitlink
/
forgeplus-react
0
0
Fork 37
Code Issues Pull Requests 5 Releases 1 Wiki Activity

云际专区首页修改

This commit is contained in:
jhnine 2024-01-26 17:47:43 +08:00
parent b64417bcf2
commit d84e8aa424
4 changed files with 444 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/forge/Information/Pages/JCC/homePage.jsx
View File

@ -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(
<div className="zone1_box zone_jcc_box">
<div className="zone_jcc_box">
{
// 专区简介
data && (data.introductionTitle || data.introductionContent || data.introductionImage) &&
@ -132,45 +184,22 @@ function HeaderPageJCC(props){
<div className="zone_news">
<div className="boxmain" style={{display:"flex"}}>
<p className="news_title">{ data.homepageCmsTitle }</p>
<div className="zone_new_first">
<p className="task-hide">
<span className="item_index">1</span>
<Link to={`/zone/${deptId}/newdetail/${newsList[0].id}`} className="new_first_title task-hide">{newsList[0].name}</Link>
</p>
<p className="new_first_desc mt20 task-hide">{newsList[0].summary}</p>
<p className="font-13 zone_n_value mt20" style={{color:"#8d95a3"}}>
<span className="flexCenter">
<img src={shijian} alt="" className="mr3" />
{newsList[0].publishTime}
</span>
<Link to={`/zone/${deptId}/newdetail/${newsList[0].id}`} className="zone_btn">查看更多<img src={guideArrow} alt="" width="14px" className="ml3"/></Link>
</p>
</div>
<ul className={ `zone_new_three ${ newsList && (newsList.length < 4) ? 'zone_new_two' : '' }`}>
<Tabs className='news_tab' tabPosition="left" onChange={handleTabChange} >
{
newsList.map((i,k)=>{
return(
k > 0 &&
<div onClick={() => { history.push(`/zone/${deptId}/newdetail/${i.id}`) }}>
<li className="new_item" style={{ display: 'inline-block' }}>
<p className="task-hide">
<span className="item_index">{k + 1}</span>
<Link className="zone_n_title" to={`/zone/${deptId}/newdetail/${i.id}`}>{i.name}</Link>
</p>
<p className="zone_n_desc task-hide-2">{i.summary}</p>
<p className="zone_n_value">
<span className="font-13 flexCenter" style={{color:"#8d95a3"}}>
<img src={shijian} alt="" className="mr3" />
{i.publishTime}
</span>
<span className="flexCenter zone_btn">查看详情<img src={guideArrow} alt="" width="14px"/></span>
</p>
</li>
</div>
<Tabs.TabPane tab={i.name} key={i.id} onClick={() => { history.push(`/zone/${deptId}/newdetail/${i.id}`) }}>
<div className='tab-content'>
<div className='title'>{i.name}</div>
<p><img src={shijian} alt="" className="mr3 photo" />{i.publishTime}</p>
<p className='new_desc'>{i.summary || '-'}</p>
<img src={newsList[k].headImg || img1} alt="" height="250px" style={{width:"100%",objectFit:"cover"}}/>
</div>
</Tabs.TabPane>
)
})
}
</ul>
</Tabs>
</div>
</div>
}

313
src/forge/Information/Pages/JCC/index.scss
View File

@ -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;
}
}
}

265
src/forge/Information/Pages/headerPage.jsx
View File

@ -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(
<div className="zone_box">
{data && <p className="in_title">{data.firstTitle}</p> }
{
// 专区简介
data && (data.introductionTitle || data.introductionContent || data.introductionImage) &&
<div className="boxmain zone_infos">
<div className="zone_infos_desc">
{data.introductionTitle && <p className="z_name">{data.introductionTitle}</p>}
<p className="z_desc task-hide-2" style={{WebkitLineClamp:data.introductionTitle?"4":"7"}} dangerouslySetInnerHTML={{ __html: data.introductionContent }} ></p>
else if (key === 'tabThree') {
this.setState({activeKey:"tabThree"})
}
},100)
this.tabTimer = setInterval(() => {
this.handle(this.state.activeKey)
}, 3000)
}
render() {
const {TabPane} = Tabs
return(
<div className="work-order">
{/* 通过Carousel组件实现自动轮播 */}
<Carousel autoplay autoplaySpeed={3000}>
<div>
<h3 style={contentStyle}>1</h3>
</div>
<div>
<h3 style={contentStyle}>2</h3>
</div>
<div>
<h3 style={contentStyle}>3</h3>
</div>
<div>
<h3 style={contentStyle}>4</h3>
</div>
</Carousel>
{/* 通过定时器实现自动轮播 */}
<Tabs onChange={this.handleTabChange} >
<TabPane tab="Tab 1" key="tabOne">
Content of Tab Pane 1
</TabPane>
<TabPane tab="Tab 2" key="tabTwo">
Content of Tab Pane 2
</TabPane>
<TabPane tab="Tab 3" key="tabThree">
Content of Tab Pane 3
</TabPane>
</Tabs>
</div>
{
data.introductionImage &&
<img src={data.introductionImage} alt="" height="277px"/>
}
</div>
}
{
// 新闻动态
data && data.cmsShow === 1 && newsList && newsList.length>0 &&
<div className="zone_news">
<p className="in_title mb40">{ data.homepageCmsTitle }</p>
<div className="boxmain" style={{display:"flex"}}>
<div className="zone_new_first">
<img src={newsList[0].headImg || img1} alt="" height="302px" style={{width:"100%",objectFit:"cover"}} className="mb30"/>
<Link to={`/zone/${deptId}/newdetail/${newsList[0].id}`} className="zone_n_title task-hide">{newsList[0].name}</Link>
<p className="zone_n_desc task-hide-2">{newsList[0].summary}</p>
<p className="font-13 mt10 flexCenter" style={{color:"#8d95a3"}}>
<img src={shijian} alt="" className="mr3" />
{newsList[0].publishTime}
</p>
<p className="mt15">
<Link to={`/zone/${deptId}/newdetail/${newsList[0].id}`} className="color-blue flexCenter zone_btn">查看详情<img src={guideArrow} alt="" width="14px" className="ml3"/></Link>
</p>
</div>
<ul className={`zone_new_three ${newsList.length <4 ? "flexStart" : "spaceeTween"}`}>
{
newsList.map((i,k)=>{
return(
k > 0 && <li key={ k }>
<Link className="zone_n_title task-hide" to={`/zone/${deptId}/newdetail/${i.id}`}>{i.name}</Link>
<p className="zone_n_desc task-hide-2 mt10">{i.summary}</p>
<p className="zone_n_value">
<span className="font-13" style={{color:"#8d95a3"}}>
<img src={shijian} alt="" className="mr3" />
{i.publishTime}
</span>
<Link to={`/zone/${deptId}/newdetail/${i.id}`} className="color-blue flexCenter zone_btn">查看详情<img src={guideArrow} alt="" width="14px"/></Link>
</p>
</li>
)
})
}
</ul>
</div>
</div>
}
{
// 精选项目
data && data.projectShow === 1 && projectList && projectList.length>0 &&
<div className="zone_projects">
<p className="in_title mb40">{ data.homepageProjectTitle }</p>
{
<div className="boxmain zone_p_lists">
{
projectList.map((i,k)=>{
return(
<li key={ k }>
<div className="imgBox">{i.projectProperties && i.projectProperties.authorImageUrl && <img src={i.projectProperties.authorImageUrl} alt="" /> }</div>
<div className="infosBox">
<a onClick={()=>window.open(i.projectURL)} className="z_p_title task-hide">{i.projectProperties && i.projectProperties.name}</a>
<p className="z_p_desc task-hide-2">{i.projectProperties && i.projectProperties.description ? i.projectProperties.description : "暂无~"}</p>
</div>
</li>
)
})
}
</div>
}
</div>
}
{
// 核心贡献者
data && data.memberShow === 1 && personList && personList.length > 0 &&
<div className="zone_contributor">
<p className="in_title">{ data.homepageMemberTitle }</p>
{
<ul className="boxmain zone_c_lists">
{
personList.map((i,k)=>{
return(
<li key={ k }>
<Link to={`/${i.login}`}><img src={i.imageUrl} alt="" /></Link>
<span>{i.name}</span>
<p className="task-hide-2" style={{display:i.introduction?"":"flex"}}>{i.introduction || "暂无~"}</p>
</li>
)
})
}
</ul>
}
</div>
}
{
// 合作伙伴
data && data.partnersShow === 1 && partnerList && partnerList.length > 0 &&
<div className="zone_parter">
<p className="in_title">{ data.homepagePartnersTitle }</p>
<Partner id={ id } partnerList={ partnerList }></Partner>
</div>
}
</div>
)
)
}
}
export default HeaderPage;
export default App

BIN
src/forge/Information/img/bgJccNews.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB