Merge branch 'gitlink_ssr_head_nscc' into gitlink_ssr_head

src/forge/Information/Pages/project/cateList/CategorySection.jsx

@@ -34,16 +34,16 @@ function CategorySection({ category, index, zoneId, nsccTitle }) {
     return projects.map((item, pIndex)=>{
       return(
         (!range || (range && pIndex >= range[0] && pIndex < range[1])) ? <div key={`${index}_${pIndex}`} className='cate-project-card'>
-          <div className='font-18 project-list-item-title mb20'>
-            {item.projectProperties && item.projectProperties.authorImageUrl && <img src={item.projectProperties.authorImageUrl} width={40} className='mr15'/>}
-            <a href={item.projectURL} className='font-bd'>{item.projectProperties && item.projectProperties.fromOwner}/{item.projectProperties && item.projectProperties.name && item.projectProperties.name.split("/").pop()}</a>
+          <div className='font-18 project-list-item-title mb12 df'>
+            {item.projectProperties && item.projectProperties.authorImageUrl && <img src={item.projectProperties.authorImageUrl} width={40} className='mr15' style={{borderRadius:"50%"}}/>}
+            <a href={item.projectURL} className='font-bd task-hide'>{item.projectProperties && item.projectProperties.fromOwner}/{item.projectProperties && item.projectProperties.name && item.projectProperties.name.split("/").pop()}</a>
             {!showBtn && <i className='iconfont icon-jiantou21 font-16 ml10'></i>}
           </div>
-          <div className="in_b_desc task-hide opacity8 font-15 mb15">
+          <div className="in_b_desc task-hide opacity8 font-15 mb10">
             {item.projectProperties && item.projectProperties.description}
           </div>
           {item.projectProperties && item.projectProperties.topics && (
-            <ul className="project-list-item-tag mb20">
+            <ul className="project-list-item-tag mb15">
               {item.projectProperties.topics.split(",").map((t, k) => (
                 <li key={k}>{t}</li>
               ))}

src/forge/Information/Pages/project/cateList/index.jsx

@@ -4,6 +4,7 @@ import { getProjectsTypeLists, getZoneStatistics, getProjectListByScore, getProj
 import { projectCateConfig } from '../projectCateConfig';
 import { getUniqueIdentifier, getUserName, getBrowserPlatform, getBrowserBrand } from '../../../utils';
 import { setZoneVisits } from '../../../api';
+import CountUp from 'react-countup';
 import '../index.scss';
 import './index.scss';
 import Nodata from '../../../../Nodata';
@@ -183,23 +184,31 @@ function ProjectCateList(props) {
     ))}
   </div>
 
+  const countUpProps = {
+    redraw: false,
+    start: 0,
+    duration: 2,
+    // suffix: "+"
+  };
   return (
     <div className="project_cate_home project-cate-page">
       <AddProjects needAudit={data && data.projectNeedAudit} id={id} visible={visible} typeList={typeList} onCancel={()=>setVisible(false)} role={role && role.role} onFresh={()=>{getTypeList();}}/>
       {/* 数据统计部分 */}
       <div className='project_cate_home_part1'>
         {nsccTitle("数聚开源力量，实时见证开源生态的每一次进化", 0.1, "center pt80 fadeInChar")}
-        <div className='project-cate-1600'>
-          <div className="statistics-cards needScale">
-            {statsData.map((stat, index) => (
-              <div key={index} className="stat-card" style={{ animationDelay: `${0.3 + index * 0.1}s` }}>
-                <div className="stat-value font-20">
-                  <span className='mr5'>{stat.value}</span>
-                  {stat.suffix}
+        <div className='project-cate-1600 '>
+          <div className='statistics-cards-bc'>
+            <div className="statistics-cards needScale">
+              {statsData.map((stat, index) => (
+                <div key={index} className="stat-card" style={{ animationDelay: `${0.3 + index * 0.1}s` }}>
+                  <div className="stat-value font-20">
+                    <span className='mr5'><CountUp {...countUpProps} start={0} end={stat.value} /></span>
+                    {stat.suffix}
+                  </div>
+                  <div className="font-15">{stat.label}</div>
                 </div>
-                <div className="font-15">{stat.label}</div>
-              </div>
-            ))}
+              ))}
+            </div>
           </div>
           {role && role.role !== "None" && <div className='center pt20 needFadeUp'>
             {role.role === "Member" ? <GlowButton href={`/zone/NSCC/projects/self`} className="NSCC_project_btn blue_image font-15 mr50">我的项目<i className='iconfont icon-arrowRight font-16 ml5'></i></GlowButton>:""}

src/forge/Information/Pages/project/cateList/index.scss

@@ -23,6 +23,7 @@
     padding: 25px;
     background-image: url('../../../img/project/cate_page_img2.png');
     background-size: 100% 100%;
+    border-radius:15px;
 
     &:hover {
       .placeholder-img>img {
@@ -152,7 +153,7 @@
           flex: 0 0 calc(33.7% - 20px);
           background-color: #ffffff;
           border-radius:15px;
-          padding:40px;
+          padding:35px 40px;
           &:hover{
             background-image: url('../../../img/project/cate_page_card.png');
             background-size: 101% 100%;
@@ -176,8 +177,13 @@
         background: url('../../../img/project/5_h_b.png') 98% 98% no-repeat;
         color: #fff;
         justify-content: flex-start;
-        padding:50px 80px 50px 45px;
+        padding:35px 80px 35px 45px;
         background-size: 100% 100%;
+        .project-list-item-tag{
+          li{
+            background-color: rgba(255,255,255,0.15);
+          }
+        }
         .project-list-item-title{
           a{
             color: #fff;
@@ -251,6 +257,7 @@
         margin-bottom: 20px;
         background-size: 100% 100%;
         margin-right: 20px;
+        border-radius:15px;
         .cateSixMainBox{
           overflow: hidden;
         }
@@ -268,6 +275,7 @@
         margin-right: 20px;
         background-color: #fff;
         margin-bottom: 20px;
+        justify-content: flex-start;
         &:hover{
           background: url('../../../img/project/6_h.png') -4px -2px no-repeat;
           background-size: 102% 101%;
@@ -336,9 +344,15 @@
     }
   }
 
+  .statistics-cards-bc{
+    background-image: url(../../../img/vipTitleBc.png);
+    background-size: 100% 124%;
+    padding: 25px 0;
+    background-position-y: bottom;
+  }
   .statistics-cards {
     width: 80%;
-    margin: 25px auto;
+    margin: 0px auto;
     display: grid;
     justify-items: center;
     grid-template-columns: repeat(4, 1fr);
@@ -363,7 +377,7 @@
 
   .cate_project_list_box .cate-project-card {
     min-width: 0;
-    padding: 30px;
+    padding:26px;
     border-radius: 15px;
     display: flex;
     flex-direction: column;
@@ -377,7 +391,7 @@
         }
         .icon-jiantou21 {
           color: inherit;
-          top: 0px;
+          top: 4px;
           left: 0px;
           opacity: 1;
           transition:  top 0.5s ease, left 0.5s ease, opacity 0.3s ease 0.1s;
@@ -417,7 +431,7 @@
       text-align: center;
       height: 38px;
       line-height: 38px;
-      margin-top: 35px;
+      margin-top: 30px;
       background:linear-gradient(272.02deg,rgba(10, 145, 255, 0.12) 0.05%,rgba(43, 103, 238, 0.12) 55.23%,rgba(133, 110, 250, 0.12) 99.86%);
 
       &:hover {