add jcc page
This commit is contained in:
parent
1ebab3f9f4
commit
b64417bcf2
|
|
@ -1,9 +1,221 @@
|
|||
import React, { } from 'react';
|
||||
import './index.scss';
|
||||
import React,{ useState, useEffect } from 'react';
|
||||
import { httpUrl } from '../../fetch';
|
||||
|
||||
function HomePage(props) {
|
||||
return (
|
||||
<div>云际计算社区首页（自定义）</div>
|
||||
)
|
||||
import visionFw from '../../img/vision-fw.png';
|
||||
import visionYj from '../../img/vision-yj.png';
|
||||
import visionZy from '../../img/vision-zy.png';
|
||||
import visionJz from '../../img/vision-jz.png';
|
||||
import guideArrow from '../../img/guideArrow1.png';
|
||||
import { Link } from 'react-router-dom';
|
||||
import shijian from '../../img/shijian.png';
|
||||
import axios from 'axios';
|
||||
import Projects from '../../Component/projects';
|
||||
import Partner from '../../Component/partner';
|
||||
import '../../indexZone1.scss'
|
||||
import './index.scss'
|
||||
import { Popover } from 'antd';
|
||||
|
||||
function HeaderPageJCC(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, history } = props;
|
||||
|
||||
const vision = [
|
||||
{imageUrl: visionFw, title: '服务无边界'},
|
||||
{imageUrl: visionYj, title: '云间有协作'},
|
||||
{imageUrl: visionZy, title: '资源易共享'},
|
||||
{imageUrl: visionJz, title: '价值可交换'}
|
||||
]
|
||||
|
||||
|
||||
useEffect(()=>{
|
||||
if(id){
|
||||
getProjectList();
|
||||
getNewsList();
|
||||
getPersonList();
|
||||
getPartnerList();
|
||||
}
|
||||
},[id])
|
||||
|
||||
function getPersonList(){
|
||||
const url = `${httpUrl}/zone/open/${id}/member/homePageList`;
|
||||
axios.get(url).then(result=>{
|
||||
if(result){
|
||||
setPersonList(result.data.rows);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
function getNewsList(){
|
||||
const url = `${httpUrl}/cms/doc/open/zone/${id}/homePageDocList`;
|
||||
axios.get(url).then(result=>{
|
||||
if(result){
|
||||
setNewsList(result.data.rows);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
function getProjectList(){
|
||||
const url = `${httpUrl}/zone/open/${id}/project/list`;
|
||||
axios.get(url,{params:{
|
||||
isHomepage:1
|
||||
}}).then(result=>{
|
||||
if(result){
|
||||
if (result.data.rows.length < 3) {
|
||||
setProjectList(result.data.rows)
|
||||
} else {
|
||||
setProjectList([...result.data.rows, {}]);
|
||||
}
|
||||
}
|
||||
}).catch(console.error())
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
if ( e.zonePartnersList.length > 0 ) {
|
||||
newArray.push(e.zonePartnersList);
|
||||
}
|
||||
}
|
||||
setParterList(newArray);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
return(
|
||||
<div className="zone1_box zone_jcc_box">
|
||||
{
|
||||
// 专区简介
|
||||
data && (data.introductionTitle || data.introductionContent || data.introductionImage) &&
|
||||
<div className="boxmain zone_infos mb30">
|
||||
<div className="zone_infos_desc">
|
||||
{data && <p className="in_title tleft">{data.firstTitle}</p>}
|
||||
<p className="z_name">{data.introductionTitle}</p>
|
||||
<p className="z_desc task-hide-2" dangerouslySetInnerHTML={{ __html: data.introductionContent }} ></p>
|
||||
</div>
|
||||
{
|
||||
data.introductionImage &&
|
||||
<img src={data.introductionImage} alt="" width="600px" height="361px"/>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<div className="zone_vision pt40 pb100">
|
||||
<p className="in_title mb40">宗旨及愿景</p>
|
||||
<div className='boxmain'>
|
||||
{
|
||||
vision.map((i, k) => {
|
||||
return (
|
||||
<div className="vision_item" key={ k }>
|
||||
<div className="vision_icon">
|
||||
<img src={i.imageUrl} alt="" />
|
||||
</div>
|
||||
<p className="vision_title">{ i.title }</p>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
// 新闻动态
|
||||
data && data.cmsShow === 1 && newsList && newsList.length>0 &&
|
||||
<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' : '' }`}>
|
||||
{
|
||||
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>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
// 精选项目
|
||||
data && data.projectShow === 1 && projectList && projectList.length > 0 &&
|
||||
<div className="zone_projects pt50 pb30">
|
||||
<p className="in_title mb40">{ data.homepageProjectTitle }</p>
|
||||
<Projects projectList={projectList}></Projects>
|
||||
</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}>
|
||||
<Popover overlayClassName="zone_popover" content={i.introduction || "暂无~"} title={i.name} trigger="hover">
|
||||
<Link to={`/${i.login}`}><img src={i.imageUrl} alt="" /></Link>
|
||||
</Popover>
|
||||
</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 HomePage;
|
||||
export default HeaderPageJCC;
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
|
||||
.zone_jcc_box{
|
||||
background-color: #f7f7f7;
|
||||
.zone_infos{
|
||||
position: relative;
|
||||
&>img{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.zone_infos_desc{
|
||||
.tleft{
|
||||
text-align: left;
|
||||
margin-bottom: 25px !important;
|
||||
}
|
||||
.z_name{
|
||||
font-size: 20px;
|
||||
}
|
||||
.z_desc{
|
||||
background: white;
|
||||
padding: 50px 250px 50px 50px;
|
||||
margin-right: 350px;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
.zone_contributor{
|
||||
min-height: 466px;
|
||||
background-color: #F7F9FC;
|
||||
padding:44px 0px 30px;
|
||||
.zone_c_lists{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
flex-wrap: wrap;
|
||||
li{
|
||||
// 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;
|
||||
border:1px solid #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 40px!important;
|
||||
margin-right: 40px;
|
||||
& img{
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.zone_vision {
|
||||
.vision_item {
|
||||
.vision_icon {
|
||||
img {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
.vision_title {
|
||||
margin-top: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.zone_popover{
|
||||
width: 300px;
|
||||
:global{
|
||||
.ant-popover-title{
|
||||
font-weight: 600;
|
||||
}
|
||||
.ant-popover-content{
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Loading…
Reference in New Issue