forked from Gitlink/forgeplus-react
Ccf
This commit is contained in:
parent
cdfb709e0c
commit
813d740481
|
|
@ -0,0 +1,265 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import img1 from '../img/img1.png';
|
||||
import { httpUrl } from '../fetch';
|
||||
import { Link } from 'react-router-dom';
|
||||
import shijian from '../img/shijian.png';
|
||||
import { getHomePageList, gethomePageDocList, getAllList, getNewsAllList } from '../api';
|
||||
import axios from 'axios';
|
||||
import Partner from '../Component/partner';
|
||||
import '../indexZonebyCCF.scss';
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
import Slider from 'react-slick';
|
||||
import Left from '../../../home/Img/left.png';
|
||||
import Right from '../../../home/Img/right.png';
|
||||
|
||||
const setting = {
|
||||
dots: true,
|
||||
infinite: true,
|
||||
speed: 2000,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
pauseOnDotsHover: true,
|
||||
autoplaySpeed: 5000,
|
||||
pauseOnFocus: true,
|
||||
autoplay: true,
|
||||
arrows: true,
|
||||
prevArrow: <img className='slick-prev slick-arrow' src={Left} width="70px" alt="" />,
|
||||
nextArrow: <img className='slick-prev slick-arrow' src={Right} width="70px" alt="" />
|
||||
}
|
||||
|
||||
function HeaderPageCCF(props) {
|
||||
const [projectList, setProjectList] = useState(undefined);
|
||||
const [personList, setPersonList] = useState(undefined);
|
||||
const [newsList, setNewsList] = useState(undefined);
|
||||
const [partnerList, setParterList] = useState(undefined);
|
||||
const { deptId, cateId } = props.match.params;
|
||||
const { data, id, temp } = props;
|
||||
const [mainList, setMainList] = useState(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
getProjectList();
|
||||
getNewsList();
|
||||
getPersonList();
|
||||
getPartnerList();
|
||||
getMainList();
|
||||
}
|
||||
}, [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 => { })
|
||||
}
|
||||
|
||||
function getProjectList() {
|
||||
getAllList(id, { isHomepage: 1 }).then(result => {
|
||||
if (result) {
|
||||
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 => { })
|
||||
}
|
||||
function getMainList() {
|
||||
getNewsAllList(id).then(result => {
|
||||
if (result) {
|
||||
let rows = result.data.rows;
|
||||
setMainList(rows);
|
||||
}
|
||||
}).catch(error => { })
|
||||
}
|
||||
return (
|
||||
<div className="zone_box">
|
||||
{
|
||||
// 新闻动态
|
||||
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">
|
||||
<Slider {...setting}>
|
||||
{
|
||||
newsList && newsList.length > 0 ?
|
||||
newsList.map((i, k) => {
|
||||
return (
|
||||
<div className="regform" key={k}>
|
||||
<img src={i.headImg || img1} alt="" height="400px" style={{ width: "100%", objectFit: "cover" }} className="mb30" />
|
||||
<div className="detail">
|
||||
<Link to={`/zone/${deptId}/newdetail/${i.id}`} className="color-blue flexCenter zone_btn line" >点击图片了解更多</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
:
|
||||
""
|
||||
}
|
||||
</Slider>
|
||||
</div>
|
||||
<ul className={`zone_new_three ${newsList.length < 4 ? "flexStart" : "spaceeTween"}`}>
|
||||
{
|
||||
newsList.map((i, k) => {
|
||||
return (
|
||||
<li key={k}>
|
||||
<Link className="zone_n_title" to={`/zone/${deptId}/newdetail/${i.id}`}>{i.name}</Link>
|
||||
<p className="zone_n_value">
|
||||
<span className="font-15" style={{ color: "#8d95a3" }}>
|
||||
<img src={shijian} alt="" className="mr3 photo" />
|
||||
{i.publishTime}
|
||||
</span>
|
||||
|
||||
<p className="font-15 flexCenter zone_btn" style={{ color: '#8d95a3' }} key={k} ><i className="iconfont icon-liulan font-15 lg ml7 mr5 lh26 icontianjiadaohangcolors" style={{ color: "#8d95a3" }} ></i>{i.visits}</p>
|
||||
</p>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
{/* 图片下三个栏目 */}
|
||||
<div className="List">
|
||||
{
|
||||
mainList && mainList.length > 0 ?
|
||||
mainList.map((i, k) => {
|
||||
if (i.name === "开源业内资讯" || i.name === "开源战略工作组" || i.name === "开源活动")
|
||||
return (
|
||||
<ul className="mainlist radius4">
|
||||
<p><i className="icon-tuijian icon-youhua font-12 lg lh26 icontianjiadaohangcolors color-blue "></i> {i.name}<i className="iconfont icon-youhua font-12 lg lh26 icontianjiadaohangcolors you "></i></p>
|
||||
{
|
||||
i.cmsDocList && i.cmsDocList.length > 0 ?
|
||||
i.cmsDocList.map((j, k) => {
|
||||
return (
|
||||
<li key={k} className="task-hide">
|
||||
<Link to={`/zone/${deptId}/newdetail/${j.id}`} className="mt10">{j.name}</Link>
|
||||
</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 className="z_p_language">
|
||||
{
|
||||
i.projectProperties.topics &&
|
||||
<ul className="tag" key={k}>
|
||||
{
|
||||
i.projectProperties.topics.split(",").map(t => {
|
||||
return (
|
||||
<li className="tag_li">{t}</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
{data && <p className="in_title_a">{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>
|
||||
</div>
|
||||
{
|
||||
data.introductionImage &&
|
||||
<img src={data.introductionImage} alt="" height="277px" />
|
||||
}
|
||||
</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 HeaderPageCCF;
|
||||
|
|
@ -39,6 +39,11 @@ const HeaderPageZone1 = Loadable({
|
|||
loading: Loading,
|
||||
});
|
||||
|
||||
const HeaderPageCCF = Loadable({
|
||||
loader : () => import("./Pages/headerPagebyCCF"),
|
||||
loading : Loading,
|
||||
});
|
||||
|
||||
const ProjectSource = Loadable({
|
||||
loader: () => import("./Pages/projectSource"),
|
||||
loading: Loading,
|
||||
|
|
@ -171,6 +176,7 @@ function Index(props){
|
|||
<Route
|
||||
path="/zone/:deptId"
|
||||
render={(p) => (
|
||||
deptId==="CCF-ODC"?<HeaderPageCCF {...props} {...p} data={data} id={id} temp={ temp } />:
|
||||
temp === tempEnum.zone ? <HeaderPage {...props} {...p} data={data} id={id} temp={ temp }/> : <HeaderPageZone1 {...props} {...p} data={data} id={id} temp={ temp }/>
|
||||
)}
|
||||
></Route>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,215 @@
|
|||
@import './theme.scss';
|
||||
.zone_news{
|
||||
margin-top: -10px !important;
|
||||
.zone_new_first{
|
||||
background-color: #fff;
|
||||
padding:0px !important;
|
||||
flex:1;
|
||||
border-radius: 4px;
|
||||
width: 0;
|
||||
.slick-track{
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
.slick-slide{
|
||||
position: relative;
|
||||
height:100%;
|
||||
div{
|
||||
height: 100%;
|
||||
.regform{
|
||||
img{
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
top: 30px;
|
||||
}
|
||||
.detail{
|
||||
overflow: hidden;
|
||||
z-index: 1000;
|
||||
position: relative;
|
||||
top: -100px;
|
||||
left: 300px;
|
||||
width: 210px;
|
||||
background:linear-gradient(to right,rgb(0, 234, 255),rgb(55, 255, 0));
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
text-indent: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.slick-slider{
|
||||
&:hover{
|
||||
.slick-arrow{
|
||||
display: block!important;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
.slick-arrow{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
display: none!important;
|
||||
background: transparent;
|
||||
&:hover{
|
||||
i{
|
||||
color: rgba(225,225,225,0.8);
|
||||
}
|
||||
}
|
||||
i{
|
||||
font-size: 50px!important;
|
||||
color: rgba(225,225,225,0.3);
|
||||
transition: 0.3s;
|
||||
}
|
||||
&.slick-prev{
|
||||
left: 10px;
|
||||
}
|
||||
&.slick-next{
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
.slick-dots{
|
||||
width: 260px;
|
||||
text-align: left;
|
||||
left: 50%;
|
||||
margin-left: -115px;
|
||||
bottom: 15%;
|
||||
position: absolute;
|
||||
display: flex!important;
|
||||
z-index: 2;
|
||||
li{
|
||||
background-color: rgba(225,225,225,0.5);
|
||||
position: relative;
|
||||
height: 3px;
|
||||
width: 46px;
|
||||
margin-right: 15px;
|
||||
&::after{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
width: 0px;
|
||||
top:0px;
|
||||
height: 100%;
|
||||
content: "";
|
||||
transition: 5.2s;
|
||||
transition-property: width;
|
||||
}
|
||||
&.slick-active::after{
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
button{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
left:0px;
|
||||
background-color: transparent!important;
|
||||
border:none;
|
||||
cursor: pointer;
|
||||
color: transparent;
|
||||
&::before {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.zone_new_three{
|
||||
margin-left: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.zone_n_value{
|
||||
margin-top: 50px;
|
||||
.photo{
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
&.spaceeTween{
|
||||
justify-content: space-between;
|
||||
}
|
||||
&.flexStart{
|
||||
justify-content: flex-start;
|
||||
li{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
li{
|
||||
background-color: #fff;
|
||||
width: 385px;
|
||||
padding: 10px !important;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 30px;
|
||||
&:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.List{
|
||||
margin-bottom: 20px;
|
||||
.mainlist{
|
||||
display: inline-block;
|
||||
width: 360px;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
margin: 30px 40px 0px 10px;
|
||||
word-break: break-all;
|
||||
padding: 10px;
|
||||
p{
|
||||
left: 10px !important;
|
||||
.you{
|
||||
float: right;
|
||||
}
|
||||
left: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
li{
|
||||
margin-left: 10px;
|
||||
list-style: inside;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.zone_projects{
|
||||
.zone_p_lists{
|
||||
li{
|
||||
padding: 25px 30px !important;
|
||||
height: 170px;
|
||||
.z_p_language{
|
||||
.tag{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px!important;
|
||||
}
|
||||
.tag_li{
|
||||
position: relative;
|
||||
margin-right: 10px !important;
|
||||
top: 10px !important;
|
||||
border: 0px solid;
|
||||
width: auto;
|
||||
height:24px;
|
||||
text-align: center;
|
||||
line-height:21px;
|
||||
background-color:var(--tag-back);
|
||||
border-radius:2px;
|
||||
margin-right: 12px;
|
||||
color: var(--primary-color);
|
||||
font-size:13px;
|
||||
padding:0px 7px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.in_title_a{
|
||||
height:44px;
|
||||
line-height:44px;
|
||||
font-weight:500;
|
||||
color:#1f2329;
|
||||
font-size:32px;
|
||||
text-align:center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
Loading…
Reference in New Issue