From 813d740481cfa0e6b6ff4d1da4c11d5012221058 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=9A=E4=BA=91=E7=80=9A?= <1258430687@qq.com>
Date: Fri, 4 Aug 2023 18:07:53 +0800
Subject: [PATCH] Ccf

---
 .../Information/Pages/headerPagebyCCF.jsx     | 265 ++++++++++++++++++
 src/forge/Information/index.jsx               |   6 +
 src/forge/Information/indexZonebyCCF.scss     | 215 ++++++++++++++
 3 files changed, 486 insertions(+)
 create mode 100644 src/forge/Information/Pages/headerPagebyCCF.jsx
 create mode 100644 src/forge/Information/indexZonebyCCF.scss

diff --git a/src/forge/Information/Pages/headerPagebyCCF.jsx b/src/forge/Information/Pages/headerPagebyCCF.jsx
new file mode 100644
index 00000000..f1c52bb3
--- /dev/null
+++ b/src/forge/Information/Pages/headerPagebyCCF.jsx
@@ -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;
\ No newline at end of file
diff --git a/src/forge/Information/index.jsx b/src/forge/Information/index.jsx
index 6c689769..053b07ad 100644
--- a/src/forge/Information/index.jsx
+++ b/src/forge/Information/index.jsx
@@ -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>
diff --git a/src/forge/Information/indexZonebyCCF.scss b/src/forge/Information/indexZonebyCCF.scss
new file mode 100644
index 00000000..bb3ea37d
--- /dev/null
+++ b/src/forge/Information/indexZonebyCCF.scss
@@ -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;
+}
\ No newline at end of file