优化超算专区页面样式

2026-05-29 13:51:22 +08:00 · 2026-05-29 13:51:22 +08:00 · aeab944ffa
parent 182206b407
commit aeab944ffa
13 changed files with 158 additions and 111 deletions
--- a/src/forge/Information/Component/memberList.jsx
+++ b/src/forge/Information/Component/memberList.jsx
@ -45,9 +45,9 @@ function Member(props) {
                  { temp === tempEnum.zone1 && <div className="linear_gradient">{i.typeName}</div> }
                </div>
              </div>
-              <div className={`card_desc ${i.isSearch ? "seachCardDesc":""}`}>
+              {i.typeIntroduction && <div className={`card_desc ${i.isSearch ? "seachCardDesc":""}`}>
                <p>{i.typeIntroduction}</p>
-              </div>
+              </div>}
              {i.isSearch && 
                <Search 
                  onSearch={(e)=>searchFunc(e,k)}
--- a/src/forge/Information/Pages/custom/index.less
+++ b/src/forge/Information/Pages/custom/index.less
@ -64,6 +64,9 @@
            }
            .card_ul{
                padding-bottom: 30px;
+                max-height: 855px;
+                overflow-y: auto;
+
                .card_u_li{
                    padding:25px 40px 0px;
                    cursor: pointer;
--- a/src/forge/Information/Pages/homepage/component/newsByNSCC.jsx
+++ b/src/forge/Information/Pages/homepage/component/newsByNSCC.jsx
@ -21,19 +21,20 @@ function News(props) {
  const newsSectionRef = useRef(null);

  useEffect(() => {
+    let hasAnimated = false; // 标记动画是否已触发
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            // 元素进入视口时先移除再添加类，确保动画重新触发
+          // 只在第一次进入视口时触发动画
+          if (entry.isIntersecting && !hasAnimated) {
+            hasAnimated = true;
            entry.target.classList.remove('bg-zoom-in');
-            // 强制重排
            void entry.target.offsetWidth;
            entry.target.classList.add('bg-zoom-in');
          }
        });
      },
-      { 
+      {
        threshold: 0.2,
        rootMargin: '0px 0px -50px 0px'
      }
@ -102,9 +103,11 @@ function News(props) {
          </div>}
          {docListByFirstDir.length > 1 && <div className='mt20'>
            {docListByFirstDir.slice(1).map(item=>{
-              return <div className='clearfix ml25 mr25 docBox_o' key={item.id}>
-                <Link to={`/zone/${key}/newdetail/${item.id}`} className="font-16 color020">{item.name}<i className='iconfont icon-jiantou3 font-14 ml5'></i></Link>
-                <span className="font-15 fr color5d6">{moment(item.publishTime).format('YYYY-MM-DD')}</span>
+              return <div className='ml25 mr25 docBox_o' key={item.id}>
+                <div className='df-center-between'>
+                  <Link to={`/zone/${key}/newdetail/${item.id}`} className="font-16 color020 task-hide flex1 mr20">{item.name}<i className='iconfont icon-jiantou3 font-14 ml5'></i></Link>
+                  <span className="font-15 color5d6">{moment(item.publishTime).format('YYYY-MM-DD')}</span>
+                </div>
                <Divider dashed className="mt5 mb15"/>
              </div>
            })} 
--- a/src/forge/Information/Pages/homepage/component/projectByNSCC.jsx
+++ b/src/forge/Information/Pages/homepage/component/projectByNSCC.jsx
@ -62,20 +62,21 @@ function Project({ data }) {
  const newsSectionRef = useRef(null);

  useEffect(() => {
+    let hasAnimated = false; // 标记动画是否已触发
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            // 元素进入视口时先移除再添加类，确保动画重新触发
+          // 只在第一次进入视口时触发动画
+          if (entry.isIntersecting && !hasAnimated) {
+            hasAnimated = true;
            entry.target.classList.remove('project_NSCC_tra');
-            // 强制重排
            void entry.target.offsetWidth;
            entry.target.classList.add('project_NSCC_tra');
          }
        });
      },
-      { 
-        threshold: 0.4,
+      {
+        threshold: 0.2,
        rootMargin: '0px 0px -50px 0px'
      }
    );
--- a/src/forge/Information/Pages/homepage/component/sourceByNSCC.jsx
+++ b/src/forge/Information/Pages/homepage/component/sourceByNSCC.jsx
@ -43,7 +43,7 @@ function Source({data}) {
  return <div className='source_1_bg_NSCC' id='nscc_home5'>
    <div className='width1600 pt50 pb60'>
      <p className='font-bd font-36 mb50 task-hide center'>{homepageResourceTitle}</p>
-      <div className='df align'>
+      <div className='df align width1400'>
        {zoneList.slice(0,4).map((item, index)=>{
          return <Fragment>
            <div className={`pointer edu-txt-left`} onClick={()=>{setChooseZoneId(item.id);}} style={{flex: '25%'}}>
@ -76,7 +76,7 @@ function Source({data}) {
            </div>
          })}
        </div>
-        <Pagination pageSize={9} total={total} hideOnSinglePage={true} current={page} onChange={(page)=>{setPage(page)}} className='center mt30'/>
+        <Pagination pageSize={9} total={total} hideOnSinglePage={true} current={page} onChange={(page)=>{setPage(page)}} className='center mt36 black-pagination'/>
        <div>
          {!isSpin && !sourceList.length && <Nodata _html="暂无数据"/>}
        </div>
--- a/src/forge/Information/Pages/homepage/index.scss
+++ b/src/forge/Information/Pages/homepage/index.scss
@ -49,6 +49,10 @@
  width: 1200px;
  margin:0px auto;
 }
+.width1400{
+  width: 1400px;
+  margin:0px auto;
+}
 .width1600{
  width: 1600px!important;
  margin:0px auto;
@ -791,6 +795,7 @@
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
+  border-radius: 40px;
  &.bg-zoom-in {
    background-size: 80% 70%;
    animation: bgZoomIn 0.5s ease-out forwards;
--- a/src/forge/Information/Pages/homepage/nscc.jsx
+++ b/src/forge/Information/Pages/homepage/nscc.jsx
@ -22,6 +22,18 @@ function HeaderPageUos(props) {
    specialProjectCount: "重点项目",
  }
  
+  // 标题出场效果组件
+  const nsccTitle = (title, delay=0.1, classname="") => {
+    if (!title) return null;
+    return <div className={`project-cate-title fadeInChar ${classname}`}>
+      {title.split("").map((char, index) => (
+        <span key={index} className="title-char" style={{ animationDelay: `${delay + index * 0.08}s` }}>
+          {char}
+        </span>
+      ))}
+    </div>
+  }
+  
  const { data } = props;
  const { id, firstTitle, homepageSpecialProjectTitle, homepageCmsTitle, homepageProjectTitle, homepageResourceTitle, homepageMemberTitle } = data || {};
  const [data1, setData1] = useState({});
@ -95,10 +107,8 @@ function HeaderPageUos(props) {
        </Anchor>
      }
      <div className='nscc_introduction pt60 pb50' id="nscc_home1">
-        <div className='font-bd font-36 align'>
-          {firstTitle}
-        </div>
-        <div className='df wrap pt50 between width1600 mb30'>
+        {nsccTitle(firstTitle, 0.1, "font-bd font-36 align")}
+        <div className='df wrap pt50 between width1400 mb30'>
          {Object.keys(label).map(item => {
            return <div className='align font-16'>
              <span className='font-26 font-bd account_nscc'>
--- a/src/forge/Information/Pages/project/cateList/CategorySection.jsx
+++ b/src/forge/Information/Pages/project/cateList/CategorySection.jsx
@ -120,11 +120,11 @@ function CategorySection({ category, index, zoneId, nsccTitle }) {
        </div>
      )}
      {layoutType === 'layout-3' && (
-        <div className="project_cate_home_part4">
+        <div className="project_cate_home_part4 pt35">
          {parter_title()}
          <div className='project_cate_home_part4_list project-cate-1600 needFadeUp'>
            <div className="cate_project_list_box">
-              {renderProjects(true)}
+              {renderProjects(true, [0,6])}
            </div>
          </div>
        </div>
@ -145,7 +145,7 @@ function CategorySection({ category, index, zoneId, nsccTitle }) {
            <div className='cateSixMain'>
              <div className='cateSixMainBox'><img src={main6} width={"100%"}/></div>
            </div>
-            {renderProjects(true)}
+            {renderProjects(true, [0,4])}
          </div>
        </div>
      }
@ -160,7 +160,7 @@ function CategorySection({ category, index, zoneId, nsccTitle }) {
            {/* <GlowButton href={`/zone/NSCC/projects/${category.id}?name=${category.name}`} className="NSCC_project_btn blue_image font-15">查看更多<i className='iconfont icon-arrowRight font-16 ml5'></i></GlowButton> */}
          </div>
          <div className='project-cate-1600 df cate_project_list_box needFadeUp'>
-            {renderProjects(false)}
+            {renderProjects(false, [0,6])}
          </div>
        </div>
      }
--- a/src/forge/Information/Pages/project/cateList/index.jsx
+++ b/src/forge/Information/Pages/project/cateList/index.jsx
@ -29,70 +29,73 @@ function ProjectCateList(props) {
    }
  },[typeList])

-   // 滚动监听元素(放大)位置增加动态效果
-  function InitScaleObs(){
-    const eles = document.getElementsByClassName("needScale");
-    const observer = new IntersectionObserver((entries) => {
-      const entry = entries[0];
-      // 如果元素进入视口
-      let name = entries[0].target.className;
-      if (entry.isIntersecting) {
-        entries[0].target.className = name + ` fadeScale`;
-      }else{
-        entries[0].target.className = name.replaceAll(" fadeScale","");
-      }
-    }, {
-      threshold: 0.3 //露出 30% 时触发
-    });
-    if(eles && eles.length> 0){
-      for(var i =0;i<eles.length;i++){
-        observer.observe(eles[i])
-      }
-    }
-  }
-   // 滚动监听元素(内容)位置增加动态效果
-  function InitContentObs(){
-    const eles = document.getElementsByClassName("needFadeUp");
-    const observer = new IntersectionObserver((entries) => {
-      const entry = entries[0];
-      // 如果元素进入视口
-      let name = entries[0].target.className;
-      if (entry.isIntersecting) {
-        entries[0].target.className = name + ` fadeUp`;
-      }else{
-        entries[0].target.className = name.replaceAll(" fadeUp","");
-      }
-    }, {
-      threshold: 0.3 //露出 30% 时触发
-    });
-    if(eles && eles.length> 0){
-      for(var i =0;i<eles.length;i++){
-        observer.observe(eles[i])
-      }
-    }
-  }
+   // 滚动监听元素(放大)位置增加动态效果(只触发一次)
+   function InitScaleObs(){
+     const eles = document.getElementsByClassName("needScale");
+     const observer = new IntersectionObserver((entries) => {
+       entries.forEach(entry => {
+         // 只触发一次，进入视口后不再移除 class
+         if (entry.isIntersecting) {
+           let name = entry.target.className;
+           if (!name.includes(' fadeScale')) {
+             entry.target.className = name + ` fadeScale`;
+           }
+         }
+       });
+     }, {
+       threshold: 0.3 //露出 30% 时触发
+     });
+     if(eles && eles.length> 0){
+       for(var i =0;i<eles.length;i++){
+         observer.observe(eles[i])
+       }
+     }
+   }
+   // 滚动监听元素(内容)位置增加动态效果(只触发一次)
+   function InitContentObs(){
+     const eles = document.getElementsByClassName("needFadeUp");
+     const observer = new IntersectionObserver((entries) => {
+       entries.forEach(entry => {
+         // 只触发一次，进入视口后不再移除 class
+         if (entry.isIntersecting) {
+           let name = entry.target.className;
+           if (!name.includes(' fadeUp')) {
+             entry.target.className = name + ` fadeUp`;
+           }
+         }
+       });
+     }, {
+       threshold: 0.3 //露出 30% 时触发
+     });
+     if(eles && eles.length> 0){
+       for(var i =0;i<eles.length;i++){
+         observer.observe(eles[i])
+       }
+     }
+   }

-  // 滚动监听元素(标题)位置增加动态效果
-  function InitObs(){
-    const eles = document.getElementsByClassName("project-cate-title");
-    const observer = new IntersectionObserver((entries) => {
-      const entry = entries[0];
-      // 如果元素进入视口
-      let name = entries[0].target.className;
-      if (entry.isIntersecting) {
-        entries[0].target.className = name + ` fadeInChar`;
-      }else{
-        entries[0].target.className = name.replaceAll(" fadeInChar","");
-      }
-    }, {
-      threshold: 0.1 //露出 30% 时触发
-    });
-    if(eles && eles.length> 0){
-      for(var i =0;i<eles.length;i++){
-        observer.observe(eles[i])
-      }
-    }
-  }
+   // 滚动监听元素(标题)位置增加动态效果(只触发一次)
+   function InitObs(){
+     const eles = document.getElementsByClassName("project-cate-title");
+     const observer = new IntersectionObserver((entries) => {
+       entries.forEach(entry => {
+         // 只触发一次，进入视口后不再移除 class
+         if (entry.isIntersecting) {
+           let name = entry.target.className;
+           if (!name.includes(' fadeInChar')) {
+             entry.target.className = name + ` fadeInChar`;
+           }
+         }
+       });
+     }, {
+       threshold: 0.1 //露出 10% 时触发
+     });
+     if(eles && eles.length> 0){
+       for(var i =0;i<eles.length;i++){
+         observer.observe(eles[i])
+       }
+     }
+   }
  const statsData = [
    { label: '开源项目', value: statistics?.projectCount || 0, suffix: '个' },
    { label: '领域分类', value: statistics?.categoryCount || 6, suffix: '个' },
@ -185,7 +188,7 @@ function ProjectCateList(props) {
      <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")}
+        {nsccTitle("数聚开源力量，实时见证开源生态的每一次进化", 0.1, "center pt80 fadeInChar")}
        <div className='project-cate-1600'>
          <div className="statistics-cards needScale">
            {statsData.map((stat, index) => (
@ -210,20 +213,17 @@ function ProjectCateList(props) {
      
      {/* 分类介绍部分 */}
      <Spin spinning={loading}>
-        {typeList && !!typeList.length && (
-          <div className="category-list">
-            {typeList.map((item, index) => (
-              <CategorySection 
-                key={index} 
-                category={item} 
-                index={index}
-                zoneId={id}
-                onGetProjects={getCategoryProjects}
-                nsccTitle={nsccTitle}
-              />
-            ))}
-          </div>
-        )}
+        <div className="category-list" style={{minHeight: '500px'}}>
+          {typeList && !!typeList.length && typeList.map((item, index) => (
+            <CategorySection 
+              key={index} 
+              category={item} 
+              index={index}
+              zoneId={id}
+              nsccTitle={nsccTitle}
+            />
+          ))}
+        </div>
      </Spin>
      
      {/* 底部区域 */}
--- a/src/forge/Information/Pages/project/cateList/index.scss
+++ b/src/forge/Information/Pages/project/cateList/index.scss
@ -113,6 +113,11 @@
      background-position: 100% 0px;
      background-size: 200% 100%;
      padding: 25px;
+      max-height:652px;
+      overflow-y: auto;
+      &::-webkit-scrollbar{
+        display: none;
+      }
    }
    .cate_project_list_box{
      display: grid;
--- a/src/forge/Information/Pages/source.jsx
+++ b/src/forge/Information/Pages/source.jsx
@ -24,7 +24,7 @@ function Source(props){
  const [ total , setTotal ] = useState(0);
  const [ search , setSearch ] = useState(undefined);
  const [ isSpin , setIsSpin ] = useState(true);
-  const limit = 21;
+  const limit = 20;
  const { id , temp, history, role, sectionResourceTitle } = props;
  const isNSCC = deptId === "NSCC";

@ -100,7 +100,13 @@ function Source(props){
  return(
    <div className={`${temp}_source_box ${isNSCC ? "NSCC_source_box" : ""}`}>
      <div className="source_h">
-        <p className="in_title">{sectionResourceTitle}{isNSCC && <Fragment><span className='font-bd font-30'> · </span><span className='primaryColor'>应用集市</span></Fragment>}</p>
+        <p className="in_title">
+          {sectionResourceTitle}
+          {isNSCC && <Fragment>
+            <span className='font-bd font-30'> · </span>
+            <span className='primaryColor'>应用集市</span>
+          </Fragment>}
+        </p>
        <div className={`titleButBox mt30 ${isNSCC ? 'titleButBoxByNSCC' : 'center'}`}>
          {isNSCC ? <div className='searchByNSCC font-15'>
            <span className='color-grey-70'>猜你想问</span>
--- a/src/forge/Information/index.scss
+++ b/src/forge/Information/index.scss
@ -266,9 +266,9 @@
      bottom: 0px;
      background-color:rgba(54, 66, 101, .5);
      height: 88px;
+      text-align: center;
      .ant-menu{
-        width: 1200px;
-        margin:0px auto;
+        display: inline-block;
        background-color: transparent;
        height: 100%;
        font-size: 16px;
@ -279,7 +279,7 @@
          line-height: 88px;
          border-bottom: none!important;
          padding:0px ;
-          margin-right: 80px!important;
+          margin: 0 40px !important;
          img{
            margin-right: 10px;
          }
@ -302,13 +302,16 @@
      }
    }
    &.bannerByNSCC{
+      .bannerMenus .ant-menu li{
+        margin: 0 65px !important;
+      }
+      .zone_content{
+        width: 1400px;
+      }
      .main_t_nscc{
        line-height: normal;
        width: max-content;
        color: rgba(255, 255, 255, 0.9);
-        // border-bottom: 1px solid transparent;
-        // border-image: linear-gradient(135deg,#72f4fc 0%,#4ac0f3 39.2%,#468bff 100%) 1;
-        // margin-bottom: -20px !important;
      }
      .title_n_1{
        font-size: 40px;
@ -2245,7 +2248,8 @@
  }
 }
 .searchByNSCC{
-  flex: 1;
+  flex: 0.8;
+  margin: 0 auto;
  border: 1px solid transparent;
  border-radius: 12px;
  background-clip: padding-box, border-box;
@ -2321,9 +2325,15 @@

 .fadeUp{
  opacity: 0;
+  transform: translateY(100px);
  animation-delay: .2s;
  animation: fadeUpZone 0.8s ease-out forwards;
 }
+.needFadeUp{
+  opacity: 0;
+  transform: translateY(100px);
+  transition: opacity 0.6s ease, transform 0.6s ease;
+}
 .needScale{
  transform: scale(.8);
  transition: 1s;
--- a/src/forge/Information/indexZone1.scss
+++ b/src/forge/Information/indexZone1.scss
@ -1,6 +1,10 @@
@import './theme.scss';


+.width1400{
+  width: 1400px;
+  margin:0px auto;
+}
 .width1600{
  width: 1600px!important;
  margin:0px auto;