Merge pull request '开源中心社区改造' (#798) from gitlink_ssr_head into pre_gitlink_ssr

This commit is contained in:
durian 2025-03-04 14:59:23 +08:00
commit 0f41c50999
12 changed files with 707 additions and 2 deletions

View File

@ -4,6 +4,18 @@
font-family: "YouSheBiaoTiHei";
src: url("../fonts/YouSheBiaoTiHei-2.ttf");
}
@font-face {
font-family: "pangmen";
src: url("../fonts/PangMenZhengDaoBiaoTiTiMianFeiBan-2.ttf");
}
@font-face {
font-family: "alibaba";
src: url("../fonts/ALIBABA-PUHUITI-MEDIUM.TTF");
}
@font-face {
font-family: "alibabaReg";
src: url("../fonts/ALIBABA-PUHUITI-REGULAR.TTF");
}
.header {
width: 100%;
height: 51px;

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
public/images/left.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 153 B

View File

@ -49,12 +49,36 @@ function PublicBanner(props){
<div className="in_banner">
<TopEdition bannerList={ data && data.bannerList && data.bannerList.split(",") }></TopEdition>
{
data &&
data && deptId !=='xjykyzx' &&
<div className="zone_content">
<p className="main_t">{data.mainTitle}</p>
<p className="sub_t" dangerouslySetInnerHTML={{ __html: data.subTitle }}></p>
</div>
}
{
data && deptId ==='xjykyzx' &&
<div className="zone_content">
<div className="ky-main_t">
{data.mainTitle}
{/* <div className="ky-year">2025</div> */}
</div>
<div className="ky-main_d">
<span> </span>
<span> </span>
<span> </span>
<span> </span>
</div>
<div className="ky-sub_t_wrap">
<div className="ky-sub_t">
{data.subTitle}
<img className="ky-sub_img_left" src="/images/left.png" alt="" srcset="" />
<img className="ky-sub_img_right" src="/images/left.png" alt="" srcset="" />
</div>
</div>
{/* <p className="main_t">{data.mainTitle}</p>
<p className="sub_t" dangerouslySetInnerHTML={{ __html: data.subTitle }}></p> */}
</div>
}
<div className="bannerMenus">
<Menu mode={"horizontal"} selectedKeys={[key]}>
{sectionHomepageShow && <Menu.Item key={"1"}><Link to={`/zone/${deptId}`}><img src={require(`../img/${temp}Menu1.png`)} alt="" width="29px"/>{sectionHomepageTitle}</Link></Menu.Item>}

View File

@ -0,0 +1,312 @@
import React, { useState, useEffect, Children } 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 xuexi from '../img/xuexiguanli.png';
import { getHomePageList, gethomePageDocList, getAllList, getNewsAllList, getVIPLists } from '../api';
import axios from 'axios';
import Partner from '../Component/partner';
import MemberList from '../Component/memberList';
import '../indexZonebyKyzx.scss';
import '../indexZone1.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';
function HeaderPageKyzx(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);
const [tag,setTag] = useState(0);
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="" />,
afterChange: (index)=> setTag(index)
}
useEffect(() => {
if (id||cateId) {
getProjectList();
getNewsList();
getPersonList();
getPartnerList();
getMainList();
}
}, [id,cateId])
function getPersonList() {
//
// getHomePageList(id).then(result => {
// if (result) {
// setPersonList(result.data.rows);
// }
// }).catch(error => { })
//
getVIPLists(id, {isHomepage: 1}).then(response=>{
if(response){
const list = response.data.rows && response.data.rows.filter(item=>item.zoneMemberList);
setPersonList(list);
}
})
}
function getNewsList() {
gethomePageDocList(id).then(result => {
if (result) {
setNewsList(result.data.rows);
}
}).catch(error => { })
}
function getProjectList() {
getAllList(id, { isHomepage: 1 }).then(result => {
if (result) {
let list = result.data.rows.map(item =>{
let obj = {name:item.projectType,children:[]}
return obj
})
//
list = Array.from(new Set(list.map(JSON.stringify))).map(JSON.parse)
//
list.map(item=>{
result.data.rows.map(subItem =>{
if(item.name === subItem.projectType){
item.children.push(subItem)
}
})
})
// console.log('list', list)
setProjectList(list);
}
}).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 pb100">
{
//
data && data.cmsShow === 1 && newsList && newsList.length >= 0 &&
<div className="zone_news zone_news_ccf">
<p className="in_title mb50">{data.homepageCmsTitle}</p>
<div className="boxmain mb100" style={{ display: "flex" }}>
<div className="zone_new_first">
<Slider {...setting}>
{
newsList && newsList.length > 0 ?
newsList.map((i, k) => {
return (
<div className="regform" key={k}>
<div className="newsBannerBox">
<img src={i.headImg || img1} alt="" className='newsImg' onClick={()=>{window.location.href=`/zone/${deptId}/newdetail/${i.id}`}} />
</div>
</div>
)
})
:
""
}
</Slider>
</div>
<ul className={`zone_new_three_ccf ${newsList.length < 4 ? "flexStart" : "spaceeTween"}`}>
{
newsList.map((i, k) => {
return (
<li key={k} style={{boxShadow:"0px 0px 20px rgba(35, 54, 185, 0.06)"}}>
<Link className="zone_n_title" to={`/zone/${deptId}/newdetail/${i.id}`} style={{color:k===tag?"#466aff":""}} >{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 className="font-17">
<img src={xuexi} alt="" className="mr10"></img>
{i.name}
<Link to={`/zone/${deptId}/news/${i.id}`}><i className="iconfont icon-youhua font-12 lg lh26 icontianjiadaohangcolors you " ></i></Link></p>
{
i.cmsDocList && i.cmsDocList.length > 0 ?
i.cmsDocList.map((j, k) => {
return (
<li key={k} className="task-hide font-14">
<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>
{
projectList.map((item,idx) => (
<div style={{width:'1200px',margin:'0 auto',border:'1px solid #f3f3f3',padding:'10px 26px', marginBottom:20,borderRadius:8,boxShadow:'0px 0px 20px rgba(35, 54, 185, 0.06)'}}>
<div style={{fontSize:'18px',color:'#05101a',marginBottom:'12px',fontFamily:'alibaba'}}>{item.name}</div>
<div className="boxmain zone_p_lists zone_p_lists_ky" >
{
item.children.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 task-hide" key={k}>
{
i.projectProperties.topics.split(",").map(t => {
return (
<li className="tag_li">{t}</li>
)
})
}
</ul>
}
</div>
</div>
</li>
)
})
}
</div>
</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="" width="300px" />
}
</div>
}
{
//
data && data.memberShow === 1 && personList && personList.length > 0 &&
<div className={`zone_contributor boxmain ${temp}_VIP_box`}>
<p className="in_title mb50">{data.homepageMemberTitle}</p>
{/* <MemberList vipLists={personList} temp={temp}/> */}
{personList && personList.map(item=>{
return <div>
<p className='font-18'>{item.typeName}</p>
<ul className="boxmain zone_c_lists mt20">
{
item.zoneMemberList.map((i, k) => {
return (
<li key={k}>
<Link to={`/${i.login}`}><img src={i.imageUrl} alt="" /></Link>
<div className='mb10'>
<span>{i.name}</span>
{i.memberLevel && <span className="memberLevel_tag ml10">{i.memberLevel}</span> }
</div>
<p className="task-hide-2" style={{ display: i.introduction ? "" : "flex" }}>{i.introduction || "暂无~"}</p>
</li>
)
})
}
</ul>
</div>
})}
</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 HeaderPageKyzx;

View File

@ -88,7 +88,7 @@ function ZoneVIP(props){
return(
<div className={`boxmain ${temp}_VIP_box`}>
<p className="in_title">{ sectionMemberTitle }</p>
<p className="vip_sub_title">{ tempConfig[temp].vipDesc }</p>
<p className="vip_sub_title">{deptId === 'xjykyzx'?tempConfig[temp].memberDesc:tempConfig[temp].vipDesc }</p>
{ memberStatus === memberStatusEnum.notMember && <Button className="zone_apply_button" onClick={ apply }>申请加入</Button> }
{ memberStatus === memberStatusEnum.applying && <div className="mt20 tips" ><Icon type="check-circle" theme="filled" />您的申请已提交请耐心等待管理员审核!</div> }
<MemberApply visible={applyVisible} onOk={ onOk } onCancel={() => setApplyVisible(!applyVisible)} current_user={props.current_user}/>

View File

@ -59,6 +59,11 @@ const HeaderPageCCF = Loadable({
loading : Loading,
});
const HeaderPageKyzx = Loadable({
loader : () => import("./Pages/headerPagebyKyzx"),
loading : Loading,
});
const ProjectSource = Loadable({
loader: () => import("./Pages/projectSource"),
loading: Loading,
@ -292,6 +297,7 @@ function Index(props){
deptId==="CCF-ODC" ? <HeaderPageCCF {...props} {...p} data={data} id={id} temp={ temp } />:
deptId === "JCC" ? <HomePageByJCC {...props} {...p} data={data} id={id}/>:
deptId === "uos" ? <HomePageByUos {...props} {...p} data={data} id={id}/>:
deptId==="xjykyzx" ? <HeaderPageKyzx {...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 }/>
)}

View File

@ -67,6 +67,15 @@
height: 450px;
position: relative;
padding-bottom: 88px;
.ky-content{
position: absolute;
top: 0;
left: 0;
left: 50%;
transform: translate(-50%, 0);
width: 1200px;
}
.zone_content {
position: absolute;
display: flex;
@ -78,6 +87,70 @@
left: 50%;
transform: translate(-50%, 0);
padding-bottom: 88px;
.ky-main_t{
color: #fff;
font-family: 'pangmen';
font-size: 44px;
position: relative;
width: 396px;
text-align: center;
border-bottom: 1px solid #82D0FE;
line-height: 44px;
.ky-year{
font-family: 'alibaba';
position: absolute;
color: #000;
background-color: #82D0FE;
font-size: 16px;
border-bottom-right-radius: 16px;
line-height: 20px;
height: 20px;
padding: 0 12px 0 6px;
right: -50px;
top: -10px;
}
}
.ky-main_d{
color: #fff;
font-size: 16px;
font-family: 'alibabaReg';
text-align: center;
width: 396px;
span{
margin:0 10px;
}
}
.ky-sub_t_wrap{
width: 396px;
display: flex;
align-items: center;
justify-content: center;
padding-top: 16px;
.ky-sub_t{
background-color: #82D0FE;
color: #000;
font-family: 'alibaba';
font-size: 22px;
height: 50px;
line-height: 50px;
border-radius: 50px;
padding: 0 46px;
position: relative;
img{
position: absolute;
width: 10px;
}
.ky-sub_img_left{
left: 34px;
top: 10px;
}
.ky-sub_img_right{
transform: rotate(180deg);
right: 34px;
bottom: 10px;
}
}
}
.main_t{
color:#78d0f5;
font-size:40px;
@ -969,6 +1042,12 @@
}
}
}
.zone_p_lists_ky{
li{
margin: 0 20px 20px 0 !important;
}
}
}
.zone_contributor{
min-height: 466px;

View File

@ -0,0 +1,270 @@
@import './theme.scss';
.zone_news_ccf {
margin-top: -10px !important;
.zone_new_first {
background: transparent !important;
padding: 0px !important;
flex: 1;
border-radius: 4px;
width: 0;
.slick-track {
display: flex;
height: 100%;
.slick-slide {
position: relative;
height: 100%;
div {
height: 100%;
.newsBannerBox{
display: flex;
align-items: center;
align-content: center;
}
.newsImg{
width: 785px;
height: 590px;
position: relative;
z-index: 1;
}
}
}
}
.slick-slider {
max-height: 595px;
overflow: hidden;
&: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: 12%;
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_ccf {
margin-left: 30px;
display: flex;
flex-direction: column;
position: relative;
.zone_n_value {
margin-top: 20px;
.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: 22px 20px 19px;
border-radius: 4px;
margin-bottom: 25px !important;
position: relative;
overflow: hidden;
word-break: break-all;
&:last-child {
margin-bottom: 0px;
}
}
.zone_n_title {
height: 48px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
.List {
margin-bottom: 80px;
display: block;
.mainlist {
display: inline-block;
width: 387px;
background-color: #fff;
box-shadow: 0px 0px 20px rgba(35, 54, 185, 0.06);
overflow: hidden;
margin: -30px 10px 0px 10px;
word-break: break-all;
padding: 20px;
min-height: 300px;
p {
left: 10px !important;
.you {
float: right;
}
left: 5px;
font-weight: bold;
img {
height: 20px;
margin-bottom: 3px;
}
}
li {
margin: 10px !important;
list-style: inside;
}
}
}
}
.zone_projects {
.zone_p_lists {
li {
height: 200px;
.z_p_language {
.tag {
align-items: center;
width: 100%;
}
.tag_li {
float: left;
white-space: nowrap;
position: relative;
margin-right: 10px !important;
margin-bottom: 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;
color: var(--primary-color);
font-size: 13px;
padding: 0px 3px !important;
}
}
}
}
}
.in_title_a {
height: 44px;
line-height: 44px;
font-weight: 500;
color: #1f2329;
font-size: 32px;
text-align: center;
margin-top: 40px;
}
.memberLevel_tag{
padding: 0px 5px;
line-height: 25px;
display: inline-block;
border: 1px solid var(--primary-color);
color: var(--primary-color);
}

View File

@ -8,12 +8,14 @@ export const tempConfig = {
hotTitle: '热门资讯',
member: '专区会员',
vipDesc: '社区根据您的贡献与扮演角色将用户划分成为不同的人员团队,并构建会员成长体系。您有兴趣成为会员,尽情发挥创意与智慧,与专区共同成长吗?',
memberDesc:'欢迎加入可控开源创新中心,在这里每一次智慧都将被珍视,每一次协作都将迸发力量,我们将一起开启一段充满创新和和成长的旅程!'
},
zone1: {
mainTitle: '新闻资讯',
hotTitle: '热门新闻资讯',
member: '荣誉榜单',
vipDesc: '荣誉榜单记录用户在开源芯片社区的社区角与成长进度,欢迎广大用户参与到开源芯片项目,与社区共同成长!',
memberDesc:'荣誉榜单记录用户在开源芯片社区的社区角与成长进度,欢迎广大用户参与到开源芯片项目,与社区共同成长!'
}
}