开源社区改造
This commit is contained in:
parent
9dc709dd7e
commit
def1a5ee2d
|
|
@ -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.
Binary file not shown.
|
After Width: | Height: | Size: 153 B |
|
|
@ -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>}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, Children } from 'react';
|
||||
import img1 from '../img/img1.png';
|
||||
import { httpUrl } from '../fetch';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
|
@ -8,7 +8,7 @@ import { getHomePageList, gethomePageDocList, getAllList, getNewsAllList, getVIP
|
|||
import axios from 'axios';
|
||||
import Partner from '../Component/partner';
|
||||
import MemberList from '../Component/memberList';
|
||||
import '../indexZonebyCCF.scss';
|
||||
import '../indexZonebyKyzx.scss';
|
||||
import '../indexZone1.scss';
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
|
|
@ -17,7 +17,7 @@ import Left from '../../../home/Img/left.png';
|
|||
import Right from '../../../home/Img/right.png';
|
||||
|
||||
|
||||
function HeaderPageCCF(props) {
|
||||
function HeaderPageKyzx(props) {
|
||||
const [projectList, setProjectList] = useState(undefined);
|
||||
const [personList, setPersonList] = useState(undefined);
|
||||
const [newsList, setNewsList] = useState(undefined);
|
||||
|
|
@ -79,7 +79,24 @@ function HeaderPageCCF(props) {
|
|||
function getProjectList() {
|
||||
getAllList(id, { isHomepage: 1 }).then(result => {
|
||||
if (result) {
|
||||
setProjectList(result.data.rows);
|
||||
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())
|
||||
}
|
||||
|
|
@ -161,7 +178,7 @@ function HeaderPageCCF(props) {
|
|||
{
|
||||
mainList && mainList.length > 0 ?
|
||||
mainList.map((i, k) => {
|
||||
if (i.name === "开源业内资讯" || i.name === "开源战略工作组" || i.name === "开源活动")
|
||||
if (i.name === "开源中心周报" || i.name === "开源中心月计划" || i.name === "开源中心活动")
|
||||
return (
|
||||
<ul className="mainlist radius4">
|
||||
<p className="font-17">
|
||||
|
|
@ -194,9 +211,13 @@ function HeaderPageCCF(props) {
|
|||
<div className="zone_projects">
|
||||
<p className="in_title mb40">{data.homepageProjectTitle}</p>
|
||||
{
|
||||
<div className="boxmain zone_p_lists">
|
||||
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" >
|
||||
|
||||
{
|
||||
projectList.map((i, k) => {
|
||||
item.children.map((i, k) => {
|
||||
return (
|
||||
<li key={k}>
|
||||
<div className="imgBox">{i.projectProperties && i.projectProperties.authorImageUrl && <img src={i.projectProperties.authorImageUrl} alt="" />}</div>
|
||||
|
|
@ -223,6 +244,11 @@ function HeaderPageCCF(props) {
|
|||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
|
||||
)
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
|
@ -283,4 +309,4 @@ function HeaderPageCCF(props) {
|
|||
</div>
|
||||
)
|
||||
}
|
||||
export default HeaderPageCCF;
|
||||
export default HeaderPageKyzx;
|
||||
|
|
@ -75,7 +75,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}/>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -8,12 +8,14 @@ export const tempConfig = {
|
|||
hotTitle: '热门资讯',
|
||||
member: '专区会员',
|
||||
vipDesc: '社区根据您的贡献与扮演角色将用户划分成为不同的人员团队，并构建会员成长体系。您有兴趣成为会员，尽情发挥创意与智慧，与专区共同成长吗？',
|
||||
memberDesc:'欢迎加入可控开源创新中心，在这里每一次智慧都将被珍视，每一次协作都将迸发力量，我们将一起开启一段充满创新和和成长的旅程！'
|
||||
},
|
||||
zone1: {
|
||||
mainTitle: '新闻资讯',
|
||||
hotTitle: '热门新闻资讯',
|
||||
member: '荣誉榜单',
|
||||
vipDesc: '荣誉榜单记录用户在开源芯片社区的社区角与成长进度，欢迎广大用户参与到开源芯片项目，与社区共同成长！',
|
||||
memberDesc:'荣誉榜单记录用户在开源芯片社区的社区角与成长进度，欢迎广大用户参与到开源芯片项目，与社区共同成长！'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue