开源激励计划活动首页

public/css/gitlink.min.css

@@ -1798,6 +1798,10 @@ a.decoration {
   margin-left: 180px
 }
 
+.mrat{
+  margin-right: auto;
+}
+
 .mr3 {
   margin-right: 3px
 }

src/App.js

@@ -168,8 +168,13 @@ const Iframe = Loadable({
   loading: Loading,
 });
 
+const Incentiveprogram = Loadable({
+  loader: () => import('./activity/incentiveprogram'),
+  loading: Loading,
+});
+
 // 此处仅维护前端可能的一级路由，不用进行项目或者组织判断的字段。
-const keyWord = ["explore", "settings", "setting", "mulan", "wiki", "issues", "setting", "trending", "code", "projects", "pulls", "mine", "login", "register", "email", "export", "nopage", "404", "403", "500", "501", "search", "organize", "login", "register", "resetPassword", "aboutus","educoder", "glcc","bindlogin", "softbot","zone", "hiagent","softwareFactory"];
+const keyWord = ["explore", "settings", "setting", "mulan", "wiki", "issues", "setting", "trending", "code", "projects", "pulls", "mine", "login", "register", "email", "export", "nopage", "404", "403", "500", "501", "search", "organize", "login", "register", "resetPassword", "aboutus","educoder", "glcc","bindlogin", "softbot","zone", "hiagent","softwareFactory", "incentiveprogram"];
 
 class App extends Component {
   constructor(props) {
@@ -359,6 +364,15 @@ class App extends Component {
             {
               pathType ?         
               <Switch>
+              {/* 活动 */}
+              <Route
+                path={"/incentiveprogram"}
+                render={
+                  (props) => {
+                    return (<Incentiveprogram {...this.props} {...props} {...this.state} />)
+                  }
+                }>
+              </Route>
               {/* iframe页面 */}
               <Route path="/hiagent"
                 render={

src/AppConfig.js

@@ -32,9 +32,9 @@ export function initAxiosInterceptors(props) {
   // 判断网络是否连接
   initOnlineOfflineListener();
 
-  // var proxy = "https://testforgeplus.trustie.net";
+  var proxy = "https://testforgeplus.trustie.net";
   // var proxy = "http://172.20.32.201:4000";
-  var proxy = "https://www.gitlink.org.cn";
+  // var proxy = "https://www.gitlink.org.cn";
 
   //响应前的设置
   axios.interceptors.request.use(

src/activity/incentiveprogram/index.jsx

@@ -0,0 +1,70 @@
+import React, { Fragment, useEffect } from "react";
+import { TPMIndexHOC } from "../../modules/tpm/TPMIndexHOC";
+import "./index.scss";
+import { Divider, Icon } from "antd";
+import Light from "./light";
+import Project from "./project";
+import Time from "./time";
+
+function Incentiveprogram(props) {
+
+  useEffect(() => {
+    document.title = "开源激励计划";
+  }, []);
+
+
+  const applyList = [
+    {
+      title: "开源项目报名",
+      desc: "原创开源项目，初始版本已经发布半年以上",
+      img: require("../image/item2.png"),
+      link: "https://v.wjx.cn/vm/wJn3xMO.aspx"
+    },
+    {
+      title: "开源课程报名",
+      desc: "开源相关课程，且己建立一年以上",
+      img: require("../image/item3.png"),
+      link: "https://v.wjx.cn/vm/YDgW8US.aspx"
+    },
+    {
+      title: "开源贡献者报名",
+      desc: "在开源项目中做过出色贡献",
+      img: require("../image/item4.png"),
+      link: "https://v.wjx.cn/vm/PpwVfuw.aspx"
+    }
+  ]
+
+  return <div className="incentiveprogram_box">
+    <div className="banner_Incentiveprogram">
+      <div className="banner_item_box">
+        <span className="banner_item_1 color-white">
+          <img src={require("../image/item1.png")} alt="" width={12} className="mr5 mb3"/>
+          汇聚优质成果
+        </span>
+        <div className="font-40 color-091" style={{fontFamily: "ziyouwenyihei"}}>开源激励计划·赋能<span className="banner_item_2">优质开源成果</span></div>
+        <div className="opacity8 color-091 center">CCF开源发展技术委员会 <Icon type="close" className="font-12"/> 天工开物开源基金会 联合发起</div>
+      </div>
+      <div className="df main_Incentiveprogram apply_item_box_list">
+        {applyList.map((item, index) =>{
+          return <Fragment key={index}> 
+            <div className="apply_item_box" key={index}>
+              <img src={item.img} alt="" width={30}/>
+              <div className="apply_item_title color-091 font-18 font-bd mt3 mb2 pointer" onClick={()=>{
+                window.open(item.link)
+              }}>{item.title}</div>
+              <div className="color-091">{item.desc}</div>
+            </div>
+            {index !== applyList.length - 1 && <Divider type="vertical" style={{height: 'auto'}} />}
+          </Fragment>
+        })}
+      </div>
+    </div>
+    <Light/>
+    <div className="project_bk_color">
+      <Project/>
+    </div>
+    <Time/>
+  </div>;
+}
+
+export default TPMIndexHOC(Incentiveprogram);

src/activity/incentiveprogram/index.scss

@@ -0,0 +1,195 @@
+.opacity7 {
+  opacity: 0.7;
+}
+
+.opacity8 {
+  opacity: 0.8;
+}
+
+.color-091 {
+  color: #091221;
+}
+
+.main_Incentiveprogram {
+  width: 1600px;
+  margin: 0 auto;
+}
+
+.gap10 {
+  gap: 10px
+}
+
+.gap20 {
+  gap: 20px
+}
+
+.jsb {
+  justify-content: space-between;
+}
+
+.banner_Incentiveprogram {
+  background-image: url('../image/banner.png');
+  background-size: 100% 100%;
+  padding: 100px 0 50px;
+
+  .banner_item_box {
+    width: 600px;
+    margin: 0 auto;
+  }
+
+  .banner_item_1 {
+    padding: 10px 20px;
+    background-image: linear-gradient(132.09deg, #4689ff 0%, #5182ff 28.18%, #b546ff 100%);
+    border-radius: 0px 20px 0px 20px;
+  }
+
+  .banner_item_2 {
+    // 字体颜色渐变
+    background-image: linear-gradient(132.09deg, #4689ff 0%, #5182ff 28.18%, #b546ff 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .apply_item_box_list {
+    background-image: url('../image/item5.png');
+    background-size: 100% 100%;
+    justify-content: space-around;
+    padding: 50px 0 32px;
+    margin-top: 70px;
+  }
+
+  .apply_item_box {
+    &:hover .apply_item_title {
+      color: #466aff;
+      position: relative;
+
+      &::after {
+        content: '\e9a5';
+        font-family: 'iconfont';
+        position: absolute;
+        margin-left: 8px;
+        font-weight: normal;
+      }
+    }
+  }
+}
+
+.light_Incentiveprogram {
+  background-image: url('../image/banner2.png');
+  background-size: 100% 100%;
+  padding-bottom: 110px;
+
+  .light_box {
+    gap: 20px;
+  }
+
+  .light_item {
+    background-color: #ffffff;
+    border-radius: 10px;
+    padding: 45px 40px;
+    transition: all 0.5s ease-in-out;
+
+    &.active {
+      background-image: url('../image/item6.png');
+      background-size: 100% 100%;
+      color: white;
+
+      .tag_light {
+        color: #091221;
+        background-color: #f6f7fa;
+        transition: all 0.5s ease-in-out;
+      }
+    }
+  }
+
+  .tag_light {
+    background-color: #f6f7fa;
+    border-radius: 4px;
+    padding: 2px 10px;
+  }
+}
+
+.project_bk_color {
+  background: linear-gradient(to bottom, #EFF5FF 0%, #E8F9FF 50%, #ffffff 50%, #ffffff 100%);
+}
+
+.project_Incentiveprogram {
+  background-image: url('../image/banner3.png');
+  background-size: 100% 100%;
+  padding-top: 40px;
+  padding-bottom: 80px;
+
+  .white_bk {
+    background-color: #ffffff;
+    border-radius: 30px;
+    padding: 30px;
+  }
+
+  .blue_item {
+    background-image: linear-gradient(180deg, rgba(70, 106, 255, 0.2) 0%, #ffffff 100%);
+    border-radius: 12px;
+  }
+
+  .project_item_inc {
+    width: 230px;
+
+    &+.ant-divider.ant-divider-vertical {
+      top: 1.94em;
+      height: 100px;
+      background: none;
+      background-image: linear-gradient(180deg, rgba(9, 18, 33, 0) 0%, rgba(9, 18, 33, 0.1) 52.72%, rgba(90, 96, 106, 0) 100%);
+    }
+  }
+
+  .project_tag {
+    color: white;
+    background-image: linear-gradient(116.57deg, #466aff 0%, #a052ff 100%);
+    border-radius: 8px;
+    padding: 10px;
+    margin-top: 35px;
+  }
+
+  .project_item_right {
+    height: 47.8%;
+    gap: 15px;
+
+    .blue_item_2 {
+      line-height: 38px;
+      padding: 17px;
+    }
+  }
+
+  .project_item_right_1 .blue_item {
+    width: 110px;
+    text-align: center;
+  }
+}
+
+.time_Incentiveprogram {
+  background-image: url('../image/banner4.png');
+  background-size: 100% 100%;
+  padding-bottom: 80px;
+
+  .time_2_inc {
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.45);
+    backdrop-filter: blur(0px);
+  }
+
+  .time_item_Inc {
+    flex: 0 0 calc(21.5%);
+  }
+}
+
+@media (max-width: 1400px) {
+  .main_Incentiveprogram {
+    width: 1200px;
+  }
+}
+
+@media (max-width: 1200px) {
+  .main_Incentiveprogram {
+    width: 100%;
+  }
+}

src/activity/incentiveprogram/light.jsx

@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from "react";
+
+// 活动亮点
+function Light() {
+  const [active, setActive] = useState(0);
+  // 三秒切换list的高亮显示元素
+  
+
+  const list = [
+    {
+      img: require("../image/item7.png"),
+      title: "三大激励类别",
+      desc: "年度评选涵盖优秀开源项目、优秀开源课程及优秀开源贡献者，全面激励开源生态的创新与协作",
+      tags: ["开源项目", "开源课程", "开源贡献者"]
+    }, {
+      img: require("../image/item8.png"),
+      title: "激励金额与资源扩展",
+      desc: "激励金总额达20万以上，并持续引入更多企业资源，设立多样化赛道，推动开源事业蓬勃发展",
+      tags: ["现有激励金：20万", " 更多合作资源"]
+    }, {
+      img: require("../image/item7.png"),
+      title: "开源生态共建",
+      desc: "通过评选挖掘优质开源成果，汇聚行业力量，为技术社区注入新活力与可持续发展动力",
+      tags: ["挖掘优质成果", "汇聚行业资源"]
+    }, {
+      img: require("../image/item8.png"),
+      title: "未来展望",
+      desc: "不断丰富激励形式与资源支持，打造更具影响力的开源激励平台，助力全球技术创新",
+      tags: ["持续丰富激励", "打造标杆平台"]
+    }
+  ];
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setActive(prevActive => (prevActive + 1) % list.length);
+    }, 4000);
+
+    return () => clearInterval(interval);
+  }, [list.length]);
+
+  return (
+    <div className="light_Incentiveprogram">
+      <div className="main_Incentiveprogram color-091">
+        <div className="font-36 font-bd center mb50 mt15">活动亮点</div>
+        <div className="df light_box">
+          {list.map((item, index) => {
+            return <div 
+              key={index} 
+              className={`light_item ${index === active ? 'active' : ''}`}
+              onClick={() => setActive(index)}
+            >
+              <img src={item.img} alt="" width={40}/>
+              <div className="font-20 font-bd mt15 mb25">{item.title}</div>
+              <div className="mb40">{item.desc}</div>
+              <div className="df gap10">
+                {item.tags.map((tag, i) => {
+                  return <span key={`${index}_${i}`} className="font-12 opacity7 tag_light">{tag}</span>
+                })}
+              </div>
+            </div>
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Light;

src/activity/incentiveprogram/project.jsx

@@ -0,0 +1,83 @@
+import { Divider } from "antd";
+import React, { useState, useEffect, Fragment } from "react";
+
+// 征集开源项目
+function Project() {
+
+  const list = [
+    {
+      img: require("../image/item9.png"),
+      title: "面向对象",
+      desc: "面向社会征集\n开源创新成果和开源贡献",
+      tags: "提升优质开源成果价值"
+    }, {
+      img: require("../image/item9.png"),
+      title: "成果类型",
+      desc: "开源原创项目.开源\n课程/数字教材、开源贡献",
+      tags: "多样化方式参与开源"
+    }, {
+      img: require("../image/item9.png"),
+      title: "依托平台",
+      desc: "所有项目要求在GitLink\n平台以开源开放的形式发布",
+      tags: "GitLink平台持续公益开源支持"
+    }
+  ];
+
+  return (
+    <div className="project_Incentiveprogram">
+      <div className="main_Incentiveprogram color-091">
+        <div className="font-36 font-bd center mb50 mt15">征集开源项目</div>
+        <div className="df gap20">
+          <div className="white_bk" style={{width: '54%'}}>
+            <div className="font-30 font-bd center mb50 pt10">征集开源项目</div>
+            <div className="df jsb pb15">
+              {list.map((item, index) => {
+                return <Fragment>
+                  <div className="project_item_inc center" key={index}>
+                    <img src={item.img} alt="" width={36} />
+                    <div className="font-16 font-bd mt12 mb10">{item.title}</div>
+                    <div style={{ whiteSpace: 'pre-line' }}>{item.desc}</div>
+                    <div className="project_tag">{item.tags}</div>
+                  </div>
+                  {index !== list.length - 1 && <Divider type="vertical" />}
+                </Fragment>
+              })}
+            </div>
+          </div>
+          <div className="flex1">
+            <div className="df white_bk mb20 project_item_right project_item_right_1">
+              <div className="pt30 mrat">
+                <span className="font-30 font-bd mb50">激励金</span><br />
+                <span>创新开源项目/开源课程/开源贡献</span>
+              </div>
+              <div className="blue_item font-13 pt30">
+                <span className="color-blue font-16">A等</span><br />
+                <span>1名<br />激励金2万</span>
+              </div>
+              <div className="blue_item font-13 pt30">
+                <span className="color-blue font-16">B等</span><br />
+                <span>3名<br />激励金0.5万</span>
+              </div>
+              <div className="blue_item pt50">
+                ......
+              </div>
+            </div>
+            <div className="white_bk df project_item_right">
+              <div className="pt30 mrat">
+                <span className="font-30 font-bd mb50 task-hide">年度评审与激励</span><br />
+                <span>创新开源项目/开源课程/开源贡献</span>
+              </div>
+              <div className="blue_item blue_item_2 font-13">
+                <span className="color-blue font-16 mr15">申请渠道</span>GitLink<br />
+                <span className="color-blue font-16 mr15">评选方式</span>成果开源、持续贡献、年度申报、专家评审<br />
+                <span className="color-blue font-16 mr15">激励形式</span>荣誉证书 + 现金激励<br />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Project;

src/activity/incentiveprogram/time.jsx

@@ -0,0 +1,71 @@
+import { Divider } from "antd";
+import React, { useState, useEffect, Fragment } from "react";
+
+// 时间规划
+function Time() {
+
+  const list = [
+    {
+      title: "计划正式启动",
+      desc: "LAUNCHED",
+    }, {
+      title: "开源贡献实践",
+      desc: "ENGAGEMENT",
+    }, {
+      title: "报名截止",
+      desc: "DEADLINE",
+    }, {
+      title: "激励评审",
+      desc: "EVALUATION",
+    }, {
+      title: "激励发放",
+      desc: "AWARD",
+    }
+  ];
+
+  const list1 = [
+    {
+      title: "2025年11月28日",
+      desc: "报名通道将于近日开放，\n最新动态请持续关注官网通知",
+    }, {
+      title: "2025年11月起",
+      desc: "鼓励长期持续参与开源贡献，\n开源贡献时长为核心评选标准之一",
+    }, {
+      title: "2026年5月30日",
+      desc: "需在截止前在GitLink平台开源，\n平台活跃度将作为评选加分项",
+    }, {
+      title: "2026年6-7月",
+      desc: "由CCF开源发展技术委员会激励\n计划评审委员会专业审议，确保公平公正",
+    }, {
+      title: "2026年8月",
+      desc: "激励（荣誉部分）预计在2026\nCCF中国开源大会现场统一颁发",
+    }
+  ];
+
+  return (
+    <div className="time_Incentiveprogram">
+      <div className="main_Incentiveprogram color-091 pt60">
+        <div className="font-36 font-bd center mb50 mt15">时间规划</div>
+        <div className="df jsb padding30">
+          {list.map((item, index) => (
+            <div className="time_item_Inc" key={index}>
+              <div className="font-18 font-bd">{item.title}</div>
+              <div className="font-12 mt5 mb20">{item.desc}</div>
+              <img src={require("../image/item10.png").default} alt="" width={186} />
+            </div>
+          ))}
+        </div>
+        <div className="df jsb padding30 time_2_inc mt10">
+          {list1.map((item, index) => (
+            <div className="time_item_Inc" key={index}>
+              <span className="font-16">{item.title}</span>
+              <div style={{ whiteSpace: 'pre-line' }} className="mt5">{item.desc}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Time;

src/forge/Head/Header.js

@@ -203,7 +203,7 @@ class NewHeader extends Component {
         response.data.data.forEach((e, i) => {
           newArray[i] = {
             name: e.name,
-            link: `/zone/${e.key}`
+            link: e.key.toLocaleLowerCase() === "incentiveprogram" ? `/incentiveprogram` : `/zone/${e.key}`
           }
         });
         this.setState({ zoneList: newArray })