public/css/gitlink.min.css

@@ -24,6 +24,10 @@
   font-family: "jinbuti";
   src: url("../fonts/dingtalk_jinbuti-webfont.woff");
 }
+@font-face {
+  font-family: "DouyinSans";
+  src: url("../fonts/DouyinSansBold.ttf");
+}
 .header {
   width: 100%;
   height: 51px;
@@ -1978,6 +1982,10 @@ a.decoration {
   padding-bottom: 100px
 }
 
+.pb180 {
+  padding-bottom: 180px
+}
+
 .pr5 {
   padding-right: 5px
 }
@@ -2212,6 +2220,17 @@ a.decoration {
   display: -ms-flex
 }
 
+.df-center{
+  display: flex;
+  align-items: center;
+}
+
+.df-center-between{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .flex1 {
   flex: 1;
   width: 0;
@@ -6352,4 +6371,8 @@ p {
 
 .cursor {
   cursor: pointer
+}
+
+.opacity8{
+  opacity: 0.8;
 }

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

@@ -0,0 +1,290 @@
+import React, { Fragment, useEffect, useRef, useState } from 'react';
+import { Spin, Pagination, Divider, message, Input } from 'antd';
+import { Link } from 'react-router-dom';
+import { getProjectsLists } from '../../../api';
+import { projectCateConfig } from '../projectCateConfig';
+import nodata from '../../../img/nodata.png';
+import { getUniqueIdentifier, getUserName, getBrowserPlatform, getBrowserBrand } from '../../../utils';
+import { setZoneVisits } from '../../../api';
+import { tempEnum } from '../../../tempInfo';
+import icon1 from '../../../img/project/icon1.png'
+import icon6 from '../../../img/project/icon6.png'
+import icon7 from '../../../img/project/icon7.png'
+import '../index.scss';
+import './index.scss';
+import Nodata from '../../../../Nodata';
+
+function ProjectCateDetail(props) {
+  const pageSize = 12;
+  const { cateId, deptId } = props.match.params;
+  const { id, location: { search }, history } = props;
+  const searchParams = new URLSearchParams(search);
+  const name = decodeURIComponent(searchParams.get("name")) || '';
+
+  const [cateName, setCateName] = useState(undefined);
+  const [ searchName , setSearchName ] = useState(undefined);
+  const [lists, setLists] = useState(undefined);
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [visibleSections, setVisibleSections] = useState({
+    coreArea: false,
+    projectList: false
+  });
+
+  const coreAreaRef = useRef(null);
+  const projectListRef = useRef(null);
+
+  const cateDetailConfig = projectCateConfig.getCateDetailConfig(cateName);
+  const { bannerTitle = "", overviewList = [], coreAreas = [] } = cateDetailConfig || {}
+  const coreArea4 = coreAreas.slice(3, 4).pop()
+
+  // 根据分类ID获取分类名称
+  useEffect(() => {
+    if (name) {
+      if (Object.keys(projectCateConfig.getCateDetailConfig(name)).length === 0) {
+        message.error("非法数据");
+        history.push(`/zone/${deptId}/projects`)
+      }
+      setCateName(name);
+    }
+  }, [name]);
+
+
+  // 页面访问统计
+  useEffect(() => {
+    let uuid = getUniqueIdentifier();
+    let url = props.location.pathname;
+    let platform = getBrowserPlatform();
+    let browser = getBrowserBrand();
+    let username = getUserName(props.current_user);
+    let remark = ` 操作系统：${platform};浏览器：${browser};`;
+    setZoneVisits({ url, username, uuid, remark });
+  }, []);
+
+  // 获取项目列表
+  useEffect(() => {
+    if (id && cateName) {
+      setLoading(true);
+      getLists();
+    }
+  }, [id, cateName, page, searchName]);
+
+  useEffect(() => {
+    // 如果两个区域都已经可见，则不再需要观察者
+    if (visibleSections.coreArea && visibleSections.projectList) {
+      return;
+    }
+
+    const observerOptions = {
+      root: null, // 相对于视口
+      threshold: 0.35, // 当元素 30% 进入视口时触发
+    };
+
+    const handleIntersect = (entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const targetId = entry.target.dataset.sectionId;
+          
+          setVisibleSections(prev => {
+            const newState = { ...prev };
+            if (targetId === 'core-area') newState.coreArea = true;
+            if (targetId === 'project-list') newState.projectList = true;
+            return newState;
+          });
+
+          // 触发后取消观察，避免重复触发（如果只需要一次性动画）
+          observer.unobserve(entry.target);
+        }
+      });
+    };
+
+    const observer = new IntersectionObserver(handleIntersect, observerOptions);
+
+    if (coreAreaRef.current) {
+      coreAreaRef.current.dataset.sectionId = 'core-area';
+      observer.observe(coreAreaRef.current);
+    }
+
+    if (projectListRef.current) {
+      projectListRef.current.dataset.sectionId = 'project-list';
+      observer.observe(projectListRef.current);
+    }
+
+    // 清理函数
+    return () => {
+      observer.disconnect();
+    };
+  }, [visibleSections.coreArea, visibleSections.projectList]);
+
+  function getLists() {
+    getProjectsLists(id, {
+      pageNum: page,
+      pageSize: pageSize,
+      projectTypeId: cateId,
+      name: searchName
+    }).then(result => {
+      if (result) {
+        setLists(result.data.rows);
+        setTotal(result.data.total);
+        setLoading(false);
+      }
+    }).catch(() => {
+      setLoading(false);
+    });
+  }
+
+  return (
+    <div className="project-cate-detail project-cate-page">
+      {/* Banner 区域 */}
+      <div className="banner-content">
+        <div className="project-cate-title fadeInChar">
+          {bannerTitle && bannerTitle.split("").map((char, index) => (
+            <span key={index} className="title-char" style={{ animationDelay: `${0.6 + index * 0.15}s` }}>
+              {char}
+            </span>
+          ))}
+        </div>
+        <p className="font-16">{cateDetailConfig.bannerSubtitle}</p>
+      </div>
+
+      {/* 行业综述区域 */}
+      <div className='overview-content-box'>
+        <div className="project-cate-title center pt60 pb50 fadeInChar">
+          {"行业综述 · 发展概览".split("").map((char, index) => (
+            <span key={index} className="title-char" style={{ animationDelay: `${0.6 + index * 0.15}s` }}>
+              {char}
+            </span>
+          ))}
+        </div>
+        <div className="df project-cate-1600 overview-content pb60">
+          <div className="overview-image">
+            <div className='placeholder-img'>
+              <img src={cateDetailConfig.overviewLeftImg} alt={cateDetailConfig.bannerTitle} />
+            </div>
+          </div>
+          <div className='pt20 pb20 flex1'>
+            <div className="overview-list font-15">
+              {overviewList.map((item, index) => {
+                return <div key={index}>
+                  {item && <img src={icon1} width={25} className='mr10 mt5' />}
+                  {item}
+                </div>
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 核心领域区域 */}
+      <div ref={coreAreaRef} className={`core-area-grid-box pb60 ${visibleSections.coreArea ? 'animate-in' : ''}`}>
+        <div className={`project-cate-title center pt60 pb50 ${visibleSections.coreArea ? 'fadeInChar' : ''}`}>
+          {"核心领域 · 应用场景".split("").map((char, index) => (
+            <span key={index} className="title-char" style={{ animationDelay: `${0.6 + index * 0.15}s` }}>
+              {char}
+            </span>
+          ))}
+        </div>
+        <div className="project-cate-1600 core-area-grid df">
+          {coreAreas.slice(0, 3).map((item, index) => {
+            return <div className={`flex1 core-area-card card-${index + 1}`}>
+              <img src={item.icon} className='mr10 mt5' />
+              <div className="font-18 font-bd mt20 mb15">{item.title}</div>
+              {item.points.map((point, pIndex) => (
+                <div key={pIndex} className='df mb10 font-15 card-point' style={{ alignItems: 'flex-start' }}>
+                  {point && <img src={icon6} width={16} className='mr5 mt8' />}
+                  <span dangerouslySetInnerHTML={{ __html: point }}></span>
+                </div>
+              ))}
+              <img src={item.image} width={260} className='card-decoration-img' />
+              <img src={item.image_bk} width={240} className='card-decoration-img-bk' />
+            </div>
+          })}
+        </div>
+        {coreArea4 && <div className='project-cate-1600 core-area-card mt20 card-4'>
+          <img src={coreArea4.icon} className='mr10 mt5' />
+          <div className="font-18 font-bd mt20 mb15">{coreArea4.title}</div>
+          <div className='card-4-points'>
+            {coreArea4.points.map((point, pIndex) => (
+              <div key={pIndex} className='df mb10 font-15 card-point' style={{ alignItems: 'flex-start' }}>
+                {point && <img src={icon6} width={16} className='mr5 mt8' />}
+                <span dangerouslySetInnerHTML={{ __html: point }}></span>
+              </div>
+            ))}
+          </div>
+          <img src={coreArea4.image} width={260} className='card-decoration-img' />
+          <img src={coreArea4.image_bk} width={240} className='card-decoration-img-bk' />
+        </div>}
+      </div>
+
+      {/* 项目列表区域 */}
+      <div ref={projectListRef} className={`project-list-section ${visibleSections.projectList ? 'animate-in' : ''}`}>
+        <div className={`project-cate-title center pt60 ${visibleSections.projectList ? 'fadeInChar' : ''}`}>{
+          "项目详情 · 核心信息".split("").map((char, index) => (
+            <span key={index} className="title-char" style={{ animationDelay: `${0.6 + index * 0.15}s` }}>
+              {char}
+            </span>
+          ))
+        }</div>
+        <div className='project-cate-1600 center pb30 pt50 project-cate-search-box'>
+          <Input.Search
+            className={`project-cate-search ${searchName ? 'active' : ''}`}
+            prefix={<i className="iconfont icon-sousuo6 font-18 pl10"/>}
+            suffix={searchName ? <span className='project_total'>共找到<span>{total}</span>个结果</span> : <span className='project_total'><span className='font-bd'>{total}</span></span>}
+            onSearch={(value)=>{setPage(1); setSearchName(value)}}
+            size={'large'} 
+            placeholder="搜索相关项目"
+          />
+        </div>
+        <Spin spinning={loading}>
+          <div className={`project-cate-1600`}>
+            {lists && lists.length > 0 ? (
+              <div className='project-list-box'>
+                {lists.map((item, key) => (
+                  <div key={key} className='project-list-item'>
+                    <div className='df-center-between mb40'>
+                      <div className='font-18 font-bd project-list-item-title'>{item.projectProperties && item.projectProperties.name && item.projectProperties.name.split("/").pop()}</div>
+                      <img src={icon7} width={42} />
+                    </div>
+                    {item.projectProperties && item.projectProperties.description && (
+                      <div className="in_b_desc task-hide opacity8 font-15 mb15">
+                        {item.projectProperties.description}
+                      </div>
+                    )}
+                    {item.projectProperties && item.projectProperties.topics && (
+                      <ul className="project-list-item-tag mb30">
+                        {item.projectProperties.topics.split(",").map((t, k) => (
+                          <li key={k}>{t}</li>
+                        ))}
+                      </ul>
+                    )}
+                    <div className='df-center-between font-13 opacity8'>
+                      <div>
+                        {item.projectType && <span>{item.projectType}</span>}
+                        {item.projectProperties && item.projectProperties.language && <Fragment>
+                          <Divider type="vertical" style={{ height: '0.7em' }} />
+                          <span>{item.projectProperties.language}</span>
+                        </Fragment>}
+                      </div>
+                      {item.projectProperties && item.projectProperties.timeAgo && <span>更新于{item.projectProperties.timeAgo}</span>}
+                    </div>
+                    <a className='font-15 project-list-item-btn' href={item.projectURL}>查看详情<i className='iconfont icon-zuojiantou1 ml5 font-12'></i></a>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className='center'>
+                <Nodata _html="暂无数据" />
+              </div>
+            )}
+          </div>
+        </Spin>
+        <div className="project-cate-1600 pt30 pb50 edu-txt-right">
+          <Pagination className="black-pagination" hideOnSinglePage pageSize={pageSize} current={page} onChange={(page) => { setPage(page); }} total={total} showQuickJumper />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ProjectCateDetail;

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

@@ -0,0 +1,264 @@
+// 大气海洋环境分类详情页样式
+.project-cate-detail {
+
+  .banner-content {
+    height: 180px;
+    background: url('../../../img/project/banner_bk.png'), linear-gradient(90deg, #CEEAFF 0%, #C4E1FF 100%);
+    background-size: auto 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    padding: 30px 0 0 17vw;
+  }
+
+  .overview-content {
+    .overview-image {
+      width: 47%;
+      padding: 25px;
+      background-image: url('../../../img/project/bk1.png');
+      background-size: 100% 100%;
+      border-radius: 15px;
+
+      &:hover {
+        .placeholder-img>img {
+          transform: scale(1.05);
+        }
+      }
+    }
+
+    .placeholder-img {
+      border-radius: 15px;
+      overflow: hidden;
+    }
+
+    .placeholder-img>img {
+      width: 100%;
+      object-fit: cover;
+      transition: all .3s ease;
+    }
+
+    .overview-list {
+      border-radius: 0px 15px 15px 0px;
+      background: #ffffff8a;
+      backdrop-filter: blur(10px);
+      height: 100%;
+      padding: 35px 50px 35px 85px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      &>div {
+        display: flex;
+        align-items: flex-start;
+      }
+    }
+  }
+
+  .core-area-grid {
+    gap: 20px;
+
+    .card-1 {
+      background: linear-gradient(180deg, #f5faff 0%, #ffffff 100%);
+
+      &:hover {
+        background: linear-gradient(180deg, #D8EBFF 0%, #ffffff 100%);
+      }
+    }
+
+    .card-2 {
+      background: linear-gradient(180deg, #f7f5ff 0%, #ffffff 100%);
+
+      &:hover {
+        background: linear-gradient(180deg, #E7E2FD 0%, #ffffff 100%);
+      }
+    }
+
+    .card-3 {
+      background: linear-gradient(180deg, #fffaf7 0%, #ffffff 100%);
+
+      &:hover {
+        background: linear-gradient(180deg, #FFEBDE 0%, #ffffff 100%);
+      }
+    }
+  }
+
+  .core-area-card {
+    padding: 35px 0 30px 30px;
+    border: 2px solid;
+    border-color: #ffffff;
+    border-radius: 15px;
+    box-shadow: 0px 3px 12px rgba(130, 132, 164, 0.05);
+    position: relative;
+    overflow: hidden;
+
+    .card-decoration-img {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      z-index: 3;
+      transition: all .3s ease;
+    }
+    .card-point{
+      position: relative;
+      z-index: 10;
+    }
+
+    .card-decoration-img-bk {
+      position: absolute;
+      bottom: 0px;
+      right: 0;
+      z-index: 2;
+      transition: all .3s ease;
+    }
+
+    &:hover {
+      .card-decoration-img {
+        transform: translate(0, 0) rotate(0) skewX(0) skewY(0) scaleX(1.05) scaleY(1.05);
+      }
+
+      .card-decoration-img-bk {
+        transform: translate(0, 0) rotate(6deg) skewX(0) skewY(0) scaleX(1.05) scaleY(1.05);
+      }
+    }
+  }
+
+  .card-4-points {
+    width: 70%;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .card-4 {
+    background: linear-gradient(180deg, #f7fffa 0%, #ffffff 100%);
+
+    &:hover {
+      background: linear-gradient(180deg, #DFF8E9 0%, #ffffff 100%);
+    }
+  }
+
+  .project-list-box {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+
+    .project-list-item {
+      padding: 40px 30px;
+      background: #ffffff;
+      border: 2px solid;
+      border-color: #ffffff;
+      border-radius: 15px;
+      box-shadow: 0px 3px 12px rgba(130, 132, 164, 0.05);
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      position: relative;
+
+      &:hover {
+        background-image: url('../../../img/project/bk2.png');
+        background-size: 100% 100%;
+
+        .project-list-item-btn {
+          opacity: 1 !important;
+          bottom: 35px;
+        }
+      }
+    }
+
+    .project-list-item-btn {
+      width: 90%;
+      position: absolute;
+      bottom: 0px;
+      background: #091221;
+      border-radius: 6px;
+      color: #ffffff;
+      text-align: center;
+      padding: 1px 0;
+      opacity: 0;
+      transition: all .3s ease;
+
+      &:hover {
+        .iconfont {
+          display: inline-block;
+          animation: arrow-move 1.2s ease-in-out infinite;
+        }
+      }
+
+    }
+
+    .project-list-item-tag {
+      display: flex;
+      gap: 10px;
+
+      &>li {
+        padding: 0 10px;
+        background: #f3f5fb;
+        border-radius: 4px;
+        font-size: 13px;
+        opacity: 0.8;
+      }
+    }
+
+    .project-list-item-title {
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        bottom: -10px;
+        width: 34px;
+        height: 2px;
+        background: linear-gradient(90deg, #091221 0%, #466aff 50%);
+      }
+    }
+  }
+}
+.overview-content-box{
+  background-image: url("../../../img/project/bk3.png");
+  background-size: 100% 100%;
+}
+.core-area-grid-box{
+  background-image: url("../../../img/project/bk4.png");
+  background-size: 100% 100%;
+}
+.project-list-section{
+  background-image: url("../../../img/project/bk5.png");
+  background-size: 100% 100%;
+}
+
+.project-cate-search-box:has(.project-cate-search.active, .project-cate-search:hover, .ant-input:focus){
+  background-image: url('../../../img/project/bk6.png');
+  background-size: 100% 110%;
+}
+.project-cate-search.ant-input-search{
+  width:262px;
+  padding: 1px 0;
+  transition: width .3s ease;
+  .ant-input-prefix, .ant-input-suffix{
+    background: none !important;
+  }
+  .ant-input-search-icon{
+    display: none;
+  }
+  .ant-input{
+    border-radius:26px;
+    border-color: transparent;
+    padding: 6px 15px 8px 58px;
+    font-size: 15px;
+  }
+  .project_total{
+    min-width:34px;
+    height:34px;
+    border-radius: 26px;
+    background:rgba(76, 88, 118, 0.08);
+    text-align: center;
+    line-height: 34px;
+    padding: 0 10px;
+  }
+  &:hover, &:has(.ant-input:focus), &.active{
+    width: 80%;
+  }
+  &:hover .ant-input, .ant-input:focus{
+    border: 1px solid transparent !important;
+    border-radius: 40px;
+    background: linear-gradient(white, white) padding-box, linear-gradient(91.6deg,#e38784 5.13%,#2c89fe 99.19%) border-box;
+  }
+}

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

@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react';
+import { Spin } from 'antd';
+import { getProjectsTypeLists } from '../../../api';
+import { projectCateConfig } from '../projectCateConfig';
+import { getUniqueIdentifier, getUserName, getBrowserPlatform, getBrowserBrand } from '../../../utils';
+import { setZoneVisits } from '../../../api';
+import '../index.scss';
+import './index.scss';
+import Nodata from '../../../../Nodata';
+
+function ProjectCateList(props) {
+  const { id } = props;
+  const [ typeList, setTypeList ] = useState(undefined);
+  const [ loading, setLoading ] = useState(false);
+
+  // 页面访问统计
+  useEffect(() => {
+    let uuid = getUniqueIdentifier();
+    let url = props.location.pathname;
+    let platform = getBrowserPlatform();
+    let browser = getBrowserBrand();
+    let username = getUserName(props.current_user);
+    let remark = ` 操作系统：${platform};浏览器：${browser};`;
+    setZoneVisits({url, username, uuid, remark});
+  }, []);
+
+  // 获取分类列表
+  useEffect(() => {
+    if (id) {
+      setLoading(true);
+      getTypeList();
+    }
+  }, [id]);
+
+  function getTypeList() {
+    getProjectsTypeLists(id).then(result => {
+      if (result) {
+        setTypeList(result.data.rows.slice(0,6));
+      }
+      setLoading(false);
+    }).catch(() => {
+      setLoading(false);
+    });
+  }
+
+  return (
+    <div className="project_cate_home project-cate-page">
+      <div className="project-cate-title center pt60 fadeInChar">
+        {"开源项目·汇聚智慧".split("").map((char, index) => (
+          <span key={index} className="title-char" style={{ animationDelay: `${1 + index * 0.15}s` }}>
+            {char}
+          </span>
+        ))}
+      </div>
+      <div className='center font-20 project_cate_item pb50'>汇聚全球开发者力量，共建高性能超算新生态</div>
+      <div className='project-cate-1600 pb180'>
+        <Spin spinning={loading}>
+          {typeList && !!typeList.length ? <div className='project_cate_list'>
+            {typeList.map((item, index)=>{
+              const cate = projectCateConfig.getCateName(item.name, index)
+              return <div key={index} className={`project_cate_item cate_card_${index+1}`} style={{ animationDelay: `${0.4 + index * 0.3}s` }}>
+                <span className='cate_card_icon'></span>
+                <div className='font-18 font-bd mt40 mb25'>{item.name}</div>
+                <div className='font-15 opacity8 mb40'>{cate.description}</div>
+                <a className='font-15 project_cate_item_btn' href={`/zone/NSCC/projects/${item.id}?name=${item.name}`}>查看详情<i className='iconfont icon-zuojiantou1 ml5 font-12'></i></a>
+              </div>
+            })}
+          </div> : <Nodata _html="暂无数据"/>}
+        </Spin>
+      </div>
+    </div>
+  );
+}
+
+export default ProjectCateList;

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

@@ -0,0 +1,135 @@
+.project_cate_home {
+  background: url('../../../img/project/cate_page.png'), linear-gradient(90deg,#F3F8FF 0%,#E7F1FF 25%,#E2EBFF 50%,#F7FAFF 100%);;
+  background-size: 100% 100%;
+}
+
+.project_cate_list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+
+  .project_cate_item {
+    border: 1px solid;
+    border-color: #ffffff;
+    border-radius: 15px;
+    box-shadow: 0px 3px 12px rgba(130, 132, 164, 0.05);
+    background-image: url('../../../img/project/cate1.png');
+    background-size: 100% 100%;
+    padding: 35px;
+    &:hover{
+      background-image: url('../../../img/project/cate1_hover.png');
+      color:#ffffff;
+      .project_cate_item_btn{
+        background:#ffffff;
+        border-color: #ffffff;
+      }
+      &.cate_card_5, &.cate_card_6{
+        background-image: url('../../../img/project/cate2_hover.png');
+      }
+    }
+  }
+
+  .cate_card_icon {
+    width: 33px;
+    height: 33px;
+    display: inline-block;
+    background-size: auto;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  .cate_card_1 {
+    .cate_card_icon {
+      background-image: url('../../../img/project/cate_icon1.png');
+    }
+
+    &:hover {
+      .cate_card_icon {
+        background-image: url('../../../img/project/cate_icon1_active.png');
+      }
+    }
+  }
+
+  .cate_card_2 {
+    .cate_card_icon {
+      background-image: url('../../../img/project/cate_icon2.png');
+    }
+
+    &:hover {
+      .cate_card_icon {
+        background-image: url('../../../img/project/cate_icon2_active.png');
+      }
+    }
+  }
+
+  .cate_card_3 {
+    .cate_card_icon {
+      background-image: url('../../../img/project/cate_icon3.png');
+    }
+
+    &:hover {
+      .cate_card_icon {
+        background-image: url('../../../img/project/cate_icon3_active.png');
+      }
+    }
+  }
+
+  .cate_card_4 {
+    .cate_card_icon {
+      background-image: url('../../../img/project/cate_icon4.png');
+    }
+
+    &:hover {
+      .cate_card_icon {
+        background-image: url('../../../img/project/cate_icon4_active.png');
+      }
+    }
+  }
+
+  .cate_card_5 {
+    background-image: url('../../../img/project/cate2.png');
+    .cate_card_icon {
+      background-image: url('../../../img/project/cate_icon5.png');
+    }
+
+    &:hover {
+      .cate_card_icon {
+        background-image: url('../../../img/project/cate_icon5_active.png');
+      }
+    }
+  }
+
+  .cate_card_6 {
+    background-image: url('../../../img/project/cate3.png');
+    .cate_card_icon {
+      background-image: url('../../../img/project/cate_icon6.png');
+    }
+
+    &:hover {
+      .cate_card_icon {
+        background-image: url('../../../img/project/cate_icon6_active.png');
+      }
+    }
+  }
+
+  .cate_card_5,
+  .cate_card_6 {
+    grid-column: span 2;
+  }
+
+  .project_cate_item_btn {
+    display: block;
+    border: 1px solid;
+    border-color: #091221;
+    border-radius: 6px;
+    font-size: 15px;
+    text-align: center;
+    color: #091221;
+    &:hover {
+      .iconfont {
+        display: inline-block;
+        animation: arrow-move 1.2s ease-in-out infinite;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,58 @@
+.project-cate-page {
+  color: #091221;
+  font-family: "alibabaReg";
+
+  .project-cate-title {
+    font-family: "DouyinSans";
+    font-weight: 700;
+    font-size: 36px;
+  }
+
+  .project-cate-1600 {
+    width: 1600px;
+    margin: 0 auto;
+  }
+}
+.project_cate_item{
+  --slide-offset: 40px;
+  animation-name: adcSlideUp;
+  animation-timing-function: linear;
+  animation-duration: 0.5s;
+  animation-fill-mode: backwards;
+}
+
+.core-area-grid-box, .project-list-section{
+  &:not(.animate-in)>div{
+    opacity: 0;
+  }
+}
+.overview-content-box>div, .animate-in>div{
+  animation-name: adcSlideUp;
+  animation-timing-function: linear;
+  animation-duration: .5s;
+  animation-fill-mode: backwards;
+  &.card-4{
+    animation-delay: 0.5s;
+  }
+}
+@keyframes adcSlideUp{
+  0% {
+    opacity: 0;
+    transform: translateY(var(--slide-offset, 68px));
+  }
+  100% {
+      opacity: 1;
+      transform: translateY(0);
+  }
+}
+
+@keyframes arrow-move {
+  0%, 100% { transform: translateX(0); }
+  50%       { transform: translateX(4px); }
+}
+
+// @media screen and (max-width: 1400px){
+//   .project-cate-page .project-cate-1600{
+//     width: 1200px;
+//   }
+// }

src/forge/Information/Pages/project/projectCateConfig.js

@@ -0,0 +1,392 @@
+import img1_1 from '../../img/project/image1.png';
+import img1_2 from '../../img/project/image2.png';
+import img1_3 from '../../img/project/image3.png';
+import img1_4 from '../../img/project/image4.png';
+import img1_5 from '../../img/project/image5.png';
+import img1_6 from '../../img/project/image6.png';
+import icon2 from '../../img/project/icon2.png';
+import icon3 from '../../img/project/icon3.png';
+import icon4 from '../../img/project/icon4.png';
+import icon5 from '../../img/project/icon5.png';
+import img1_bk from '../../img/project/1.png';
+import img1 from '../../img/project/1-1.png';
+import img2_bk from '../../img/project/2.png';
+import img2 from '../../img/project/2-1.png';
+import img3_bk from '../../img/project/3.png';
+import img3 from '../../img/project/3-1.png';
+import img4_bk from '../../img/project/4.png';
+import img4 from '../../img/project/4-1.png';
+import img2_1 from '../../img/project/1-2-1.png';
+import img2_2 from '../../img/project/1-2-2.png';
+import img3_1 from '../../img/project/1-3-1.png';
+import img3_2 from '../../img/project/1-3-2.png';
+import img3_3 from '../../img/project/1-3-3.png';
+import img4_1 from '../../img/project/1-4-1.png';
+import img4_2 from '../../img/project/1-4-2.png';
+import img4_3 from '../../img/project/1-4-3.png';
+import img5_1 from '../../img/project/1-5-1.png';
+import img5_2 from '../../img/project/1-5-2.png';
+import img5_3 from '../../img/project/1-5-3.png';
+import img5_4 from '../../img/project/1-5-4.png';
+import img6_1 from '../../img/project/1-6-1.png';
+import img6_2 from '../../img/project/1-6-2.png';
+import img6_3 from '../../img/project/1-6-3.png';
+// 项目分类数据配置
+// 根据分类名称存储对应的文案数据
+export const projectCateConfig = {
+  // 分类ID与名称映射
+  cateNames: {
+    "大气海洋环境": {
+      description: "大气海洋环境是高性能计算的重要应用领域之一，涵盖天气预报、气候预测、海洋模拟、空气质量、水环境及河口海岸动力…"
+    },
+    "天文地球物理": {
+      description: "天文地球物理是高性能计算的重要应用方向之一，主要面向宇宙结构演化、天体物理过程以及地球内部结构与动力学等复杂…"
+    },
+    "工业设计制造": {
+      description: "工业设计制造是高性能计算的核心应用领域之一，广泛涵盖计算流体力学（CFD）、计算固体力学、高频电磁仿真…"
+    },
+    "新能源新材料": {
+      description: "新能源新材料行业以材料微观结构与宏观性能之间的关系为核心研究对象，依托高性能计算与先进算法，实现材料从…"
+    },
+    "生物医药健康": {
+      description: "生物医药健康是高性能计算与人工智能深度融合的核心应用领域之一，涵盖分子模拟、药物研发、基因数据分析、蛋白质结构预测…"
+    },
+    "工具": {
+      description: "工具类软件是高性能计算生态的核心基石，广泛涵盖编译器、并行编程框架、数学与科学计算核心库、性能分析与调优工具…"
+    }
+  },
+  
+  // 分类详情配置
+  cateDetail: {
+    '大气海洋环境': {
+      bannerTitle: '大气海洋环境',
+      bannerSubtitle: '大气海洋环境依托超算模拟预测，支撑防灾减灾与生态资源管理',
+      overviewLeftImg: img1_1,
+      overviewList: [
+        "大气海洋环境是高性能计算的重要应用领域，主要涵盖天气预报、气候预测、海洋模拟、空气质量、水环境及河口海岸动力过程等方向。",
+        "该领域具有计算规模大、时效性要求高、多尺度与多物理过程耦合显著等特点，对高性能计算能力存在持续且强烈的需求",
+        "随着地球系统模型向高分辨率、复杂物理过程、集合预报和多圈层耦合方向发展，对计算性能、并行效率、数据处理与存储支撑能力提出了更高要求",
+        "依托高性能计算平台，可显著提升台风、暴雨、雷电、风暴潮及重污染天气等过程的模拟与预测能力",
+        "同时也能提高海洋环境、水环境和气候变化研究的效率与精度，为防灾减灾、生态保护、资源管理和公共安全提供有力支撑"
+      ],
+      coreAreas: [
+        {
+          icon: icon2,
+          title: "数值天气预报与灾害天气模拟",
+          points: [
+            "大气数值模拟是天气预报和灾害预警的重要基础",
+            "依托高性能计算，可运行多种气象模式，实现极<br/>端天气高分辨率预报",
+            "该类应用对计算速度、并行效<br/>率和数据处理能力要求高",
+            "可支撑各类气象预报，在防灾<br/>减灾和应急管理中作用显著"
+          ],
+          image: img1,
+          image_bk: img1_bk
+        },
+        {
+          icon: icon3,
+          title: "海洋环流与海气耦合模拟",
+          points: [
+            "海洋环境模拟主要研究多尺度海洋动力及海气相互作用过程",
+            "基于高性能计算可运行多种海洋模型，实现精细化模拟",
+            "广泛应用于海洋预报、工程安全<br/>及资源开发等场景",
+          ],
+          image: img2,
+          image_bk: img2_bk
+        },
+        {
+          icon: icon4,
+          title: "空气质量模拟与环境污染评估",
+          points: [
+            "环境模式通过模拟污染物全过程，分析区域空气质量及污染成因",
+            "依托高性能计算与典型模式，可实现气象 - 化学耦合模拟与污染评估",
+            "应用于污染预警、协同治理及环<br/>境影响分析，支撑生态治理与政<br/>策制定及资源开发等场景",
+          ],
+          image: img3,
+          image_bk: img3_bk
+        },
+        {
+          icon: icon5,
+          title: "区域气候与气候变化研究",
+          points: [
+            "区域和全球气候模拟用于研究长期气候演变与极端气候事件趋势",
+            "依托高性能计算与多种气候模式，可开展气候模拟、情景预测及多圈层耦合研究",
+            "模拟尺度与分辨率提升，带来更高的计算和存储需求",
+            "为气候评估、水资源、农业与能源规划提供科学依据"
+          ],
+          image: img4,
+          image_bk: img4_bk
+        }
+      ]
+    },
+    '天文地球物理': {
+      bannerTitle: '天文地球物理',
+      bannerSubtitle: '天文地球物理依托超算开展复杂模拟，助力基础科研与灾害预警研究',
+      overviewLeftImg: img1_2,
+      overviewList: [
+        "天文地球物理是高性能计算的重要应用方向，主要围绕宇宙结构演化、天体物理过程及地球内部结构动 力学等复杂科学问题展开研究",
+        "具体研究内容包括宇宙大尺度结构形成、恒星与星系演化、引力波源模拟、地球深部物质运移以及地震波传播机理等",
+        "该领域研究具有多尺度、多物理过程耦合的特点，需开展大规模数值模拟与海量观测数据处理，对算力和存储能力要求极高",
+        "引力波探测、射电望远镜、地震台网等观测技术快速发展，数据量激增，推动研究从观测驱动向计算驱动转型",
+        "借助高性能计算平台可有效提升宇宙演化模拟精度与地震波建模反演效率，为基础科研和灾害预警提供关键支撑"
+      ],
+      coreAreas: [
+        {
+          icon: icon2,
+          title: "地震模拟与地球内部结构反演",
+          points: [
+            "地震学通过地震波数值模拟与反演，研究地球内部结构与介质特性",
+            "依托高性能计算平台，可运行 SPECFEM3D、SeisFlows 等软件完成全流程计算",
+            "该类应用对计算规模与并行效率要求极高",
+            "用于地震灾害评估与资源勘探，应用价值显著",
+            "",
+            "",
+            "",
+            "",
+            "",
+            "",
+            ""
+          ],
+          image: img2_1,
+          image_bk: img1_bk
+        },
+        {
+          icon: icon3,
+          title: "宇宙结构形成与天体演化模拟",
+          points: [
+            "宇宙学模拟采用 N 体与流体动力学方法，研究宇宙及星系演化",
+            "依托超算平台，使用 GADGET、RAMSES 等软件开展相关模拟",
+            "模拟分辨率提升，使计算资源需求呈指数级增长",
+            "服务基础科研，为观测数据提供理论支撑",
+          ],
+          image: img2_2,
+          image_bk: img2_bk
+        }
+      ]
+    },
+    "工业设计制造": {
+      bannerTitle: '工业设计制造',
+      bannerSubtitle: '工业设计制造依托超算仿真，赋能高端装备研发与制造业数字化转型',
+      overviewLeftImg: img1_3,
+      overviewList: [
+        "",
+        "工业设计制造是高性能计算核心应用领域，覆盖 CFD、固体力学、电磁仿真等多物理场仿真方向",
+        "领域工程问题复杂度高，对超大规模并行计算与高效求解能力需求迫切",
+        "数字孪生与高保真模拟推动工业研发向高精度预测、多学科协同优化升级",
+        "超算平台及仿真工具可提升高端装备研发效率，支撑制造业数字化转型与技术创新",
+        "",
+      ],
+      coreAreas: [
+        {
+          icon: icon2,
+          title: "流体力学",
+          points: [
+            "计算流体力学是装备气动设计、热管理及多相流分析的核心基础",
+            "依托超算平台，可使用 OpenFOAM 等开源软件开展高保真数值<br/>模拟",
+            "应用需海量网格与求解，对超<br/>算大规模并行能力要求极高",
+            "可有效提升装备性能，在多领<br/>域工程中具有重要应用价值"
+          ],
+          image: img3_1,
+          image_bk: img1_bk
+        },
+        {
+          icon: icon3,
+          title: "固体力学",
+          points: [
+            "固体力学仿真是评估结构复杂载荷下变形、应力及失效的关键手段",
+            "基于超算平台，可采用 FrontISTR、Code_Aster 等软件开展强非<br/>线性瞬态模拟",
+            "这类应用对计算效率与内存吞吐<br/>能力要求极高",
+            "为装备轻量化与安全评估提供支<br/>撑，服务机械制造及工程安全",
+          ],
+          image: img3_2,
+          image_bk: img2_bk
+        },
+        {
+          icon: icon4,
+          title: "多物理场耦合与高频电磁仿真",
+          points: [
+            "多物理场模拟主要解决流固热耦合与微电子复杂电磁设计问题",
+            "依托高性能计算，可使用 MOOSE、Elmer、Meep 等软件开展<br/>大规模计算",
+            "问题方程复杂，对求解稳定性与<br/>并行效率要求极高",
+            "在半导体、核能、通信器件等<br/>系统研发中具有不可替代作用",
+          ],
+          image: img3_3,
+          image_bk: img2_bk
+        }
+      ]
+    },
+    "新能源新材料": {
+      bannerTitle: '新能源新材料',
+      bannerSubtitle: '以算力与算法创新，实现材料数字化研发，赋能新能源产业',
+      overviewLeftImg: img1_4,
+      overviewList: [
+        "",
+        "新能源新材料以微观结构与宏观性能关联为核心，实现全流程数字化研发",
+        "采用第一性原理、分子动力学等方法，系统分析材料多方面性能",
+        "算力与 AI 融合推动研发模式向 “计算 + 数据驱动” 转变，提升研发效率",
+        "对新能源发展、低碳转型与高端材料国产化具有重要战略意义",
+        ""
+      ],
+      coreAreas: [
+        {
+          icon: icon2,
+          title: "动力电池与储能系统优化",
+          points: [
+            "动力电池与储能领域通过多尺度模拟，实现材料结构设计与性能预测",
+            "精准分析离子扩散、电化学稳定窗口及界面反应等关键机制",
+            "有效提升电池能量密度、安全性<br/>与循环寿命",
+            "广泛应用于新能源汽车、电网储<br/>能及分布式能源系统"
+          ],
+          image: img4_1,
+          image_bk: img1_bk
+        },
+        {
+          icon: icon3,
+          title: "光伏材料与新能源发电效率提升",
+          points: [
+            "光伏领域采用材料计算与高通量筛选，优化钙钛矿等新型光电材料",
+            "精准预测材料带隙、载流子迁移率及光电转换效率等关键性能",
+            "大幅缩短研发周期，提升发电效率<br/>并降低制造成本",
+            "助力新能源发电技术迭代升级",
+          ],
+          image: img4_2,
+          image_bk: img2_bk
+        },
+        {
+          icon: icon4,
+          title: "氢能与燃料电池关键材料研发",
+          points: [
+            "氢能领域围绕电催化剂、储氢及燃料电池膜材料开展计算模拟研究",
+            "通过模拟分析反应路径、吸附能与活性位点，实现催化材料定向设计",
+            "有助于提升制氢效率，降低对<br/>贵金属的依赖",
+            "增强燃料电池系统的稳定性与<br/>经济性",
+          ],
+          image: img4_3,
+          image_bk: img2_bk
+        }
+      ]
+    },
+    "生物医药健康": {
+      bannerTitle: '生物医药健康',
+      bannerSubtitle: '生物医药 + 超算与 AI 融合，赋能新药研发与精准医疗，护航全民健康',
+      overviewLeftImg: img1_5,
+      overviewList: [
+        "",
+        "生物医药健康是超算与 AI 深度融合的核心应用，覆盖分子模拟、药物研发、基因分析等多个方向",
+        "领域数据与计算密集、算法复杂，对超算算力、存储及大数据处理能力需求极强",
+        "基因测序、AI 制药、蛋白结构解析等技术发展，对算力、算法与数据安全提出更高要求",
+        "依托超算与 AI 可加速新药研发，提升精准诊疗效率，支撑疾病研究与公共卫生防控",
+        "",
+      ],
+      coreAreas: [
+        {
+          icon: icon2,
+          title: "基因数据分析与精准医疗 ",
+          points: [
+            "基因数据分析是精准医疗的核心基础",
+            "基于超算平台，使用多款生物信息学工具完成测序数据处理分析",
+            "场景对并行效率、存储带宽和<br/>流程自动化要求极高",
+            "可支撑疾病诊断、用药指导与<br/>队列研究，服务临床与个体化<br/>治疗"
+          ],
+          image: img5_1,
+          image_bk: img1_bk
+        },
+        {
+          icon: icon3,
+          title: "AI辅助药物研发与分子模拟 ",
+          points: [
+            "传统药物研发周期长、成本高，超算与 AI 可显著提升研发效率",
+            "依托 GROMACS、AutoDock 等软件开展分子模拟与高通量虚拟筛选",
+            "结合 AlphaFold 等 AI 模型，<br/>实现蛋白质结构快速精准预测",
+            "应用于靶点发现、化合物优化<br/>与毒理预测，有效降本提速"
+          ],
+          image: img5_2,
+          image_bk: img2_bk
+        },
+        {
+          icon: icon4,
+          title: "医学影像处理与AI辅助诊断 ",
+          points: [
+            "医学影像数据量大、特征复杂，可在超算平台上完成图像分割、配准<br/>与 AI 推理。",
+            "应用场景涵盖肿瘤识别、眼底筛查、<br/>肺结节检测、病理智能诊断等",
+            "有效提升诊断准确率与效率，<br/>助力大规模筛查与基层医疗<br/>能力提升",
+          ],
+          image: img5_3,
+          image_bk: img2_bk
+        },
+        {
+          icon: icon4,
+          title: "生物信息库与多组学整合分析 ",
+          points: [
+            "生命科学研究需融合公共数据库与本地多组学海量数据进行管理与分析",
+            "依托超算平台开展差异表达、富集分析、调控网络构建及疾病机制挖掘",
+            "支撑生命科学基础研究、新药靶点验证与疾病机理解析",
+            "为生命健康基础研究与产业转化提供核心算力支撑",
+          ],
+          image: img5_4,
+          image_bk: img2_bk
+        }
+      ]
+    },
+    "泛化工具": {
+      bannerTitle: '泛化工具',
+      bannerSubtitle: '超算工具软件筑牢算力生态，支撑 E 级异构融合与高效数值模拟',
+      overviewLeftImg: img1_6,
+      overviewList: [
+        "",
+        "工具类软件是超算生态核心，涵盖编译器、并行框架、数学库、调度系统等关键模块",
+        "具备通用性强、与硬件耦合度高、技术迭代快的特点，是连接算力与应用的重要桥梁",
+        "E 级与异构架构发展，对工具的编译、并行扩展、数据 I/O、资源调度提出更高要求",
+        "高性能工具可降低开发成本、提升模拟效率，支撑构建开放高效的超算生态",
+        ""
+      ],
+      coreAreas: [
+        {
+          icon: icon2,
+          title: "基础计算框架与数学库",
+          points: [
+            "基础框架与数学库是超算应用实现大规模扩展的重要基石",
+            "依托 MPI 并行模型、PETSc 求解器库，可高效求解复杂方程并<br/>实现分布式计算",
+            "对硬件适配与通信效率要求极高，<br/>能有效降低相关领域开发门槛",
+            "为跨学科大规模数值模拟提供<br/>底层算法加速与算力支撑"
+          ],
+          image: img6_1,
+          image_bk: img1_bk
+        },
+        {
+          icon: icon3,
+          title: "性能分析剖析与代码深度调优",
+          points: [
+            "性能分析工具是提升程序效率与超算算力利用率的关键支撑",
+            "利用 TAU、Scalasca 等工具可精准定位异构架构下的程序瓶颈",
+            "超算异构化发展导致代码优化复杂度<br/>大幅提升",
+            "适用于并行代码性能诊断与算法<br/>优化，缩短移植周期、降低计算<br/>能耗",
+          ],
+          image: img6_2,
+          image_bk: img2_bk
+        },
+        {
+          icon: icon4,
+          title: "海量数据流转与可视化",
+          points: [
+            "并行 I/O 库与科学可视化工具是处理超算海量数据的必备手段",
+            "借助 HDF5、NetCDF 及 ParaView、VisIt 等工具，实现 TB 级数据<br/>高速读写与高保真渲染",
+            "这类工具直接影响数据交互效率<br/>与科学发现的直观性",
+            "广泛应用于多领域科研场景，<br/>助力洞察复杂物理规律",
+          ],
+          image: img6_3,
+          image_bk: img2_bk
+        }
+      ]
+    }
+  },
+  
+  // 获取分类名称
+  getCateName: function(cateId, index) {
+    return this.cateNames[cateId] || Object.values(this.cateNames)[index] || this.cateNames["大气海洋环境"];
+  },
+  
+  // 获取分类详情配置
+  getCateDetailConfig: function(cateName) {
+    return this.cateDetail[cateName] || {};
+  },
+};

src/forge/Information/index.jsx

@@ -72,6 +72,14 @@ const ProjectSource = Loadable({
   loader: () => import("./Pages/projectSource"),
   loading: Loading,
 });
+const ProjectCateDetail = Loadable({
+  loader: () => import("./Pages/project/cateDetail"),
+  loading: Loading,
+});
+const ProjectCateList = Loadable({
+  loader: () => import("./Pages/project/cateList"),
+  loading: Loading,
+});
 const NewsDetail = Loadable({
   loader: () => import("./Pages/newsDetail"),
   loading: Loading,
@@ -127,6 +135,7 @@ function Index(props){
   const [ role , setRole ] = useState(undefined);
   const { pathname } = props.history.location;
   const sourcedetail = pathname.indexOf(`/zone/${deptId}/newdetail/`)>-1 && isPhone();
+  const projectCateDetail = pathname.indexOf(`/zone/${deptId}/projects/`)>-1;
   const {current_user} = props;
 
   
@@ -196,7 +205,7 @@ function Index(props){
 
   return(
     <div className="information_main">
-      { (!sourcedetail && deptId!=="apply") && (id ? <PublicBanner {...props} data={data} temp={ temp } adminUrl={adminUrl} id={id}/> : <div style={{ width: '100%', height: '450px' }}></div>)}
+      { (!projectCateDetail && !sourcedetail && deptId!=="apply") && (id ? <PublicBanner {...props} data={data} temp={ temp } adminUrl={adminUrl} id={id}/> : <div style={{ width: '100%', height: '450px' }}></div>)}
       <Switch>
         <Route
           path="/zone/:deptId/news/self"
@@ -282,6 +291,18 @@ function Index(props){
             <VIP {...props} {...p} id={id} temp={ temp } sectionMemberTitle={data && data.sectionMemberTitle}/>
           )}
         ></Route>
+        <Route
+          path="/zone/:deptId/projects/:cateId"
+          render={(p) => (
+            <ProjectCateDetail {...props} {...p} id={id} temp={ temp } sectionProjectTitle={data && data.sectionProjectTitle}/>
+          )}
+        ></Route>
+        <Route
+          path="/zone/NSCC/projects"
+          render={(p) => (
+            <ProjectCateList {...props} {...p} id={id} temp={ temp } data={data}/>
+          )}
+        ></Route>
         <Route
           path="/zone/:deptId/projects"
           render={(p) => (

src/forge/Information/index.scss

@@ -16,6 +16,65 @@
 }
 
 // 公共样式
+.black-pagination {
+  // 默认项：白底黑字，灰边框
+  .ant-pagination-item {
+    background-color: transparent;
+    border: 1px solid #fff;
+    
+    a {
+      color: #091221;
+    }
+
+    &:hover {
+      border-color: #091221; // 悬停：黑边框
+      a {
+        color: #091221;
+      }
+    }
+  }
+
+  // 选中项：黑底白字
+  .ant-pagination-item-active {
+    background-color: #091221 !important;
+    border-color: #091221 !important;
+    
+    a {
+      color: #fff !important;
+    }
+    
+    &:hover {
+      border-color: #091221;
+      a {
+        color: #fff;
+      }
+    }
+  }
+  
+  // 上一页/下一页按钮
+  .ant-pagination-prev, .ant-pagination-next, .ant-pagination-prev:focus, .ant-pagination-next:focus {
+    .ant-pagination-item-link {
+      &, &:hover, &:active, &:focus {
+        color: #091221;
+        border: none;
+        background: none;
+      }
+    }
+  }
+
+  .ant-pagination-options{
+    color:#212121;
+    input{
+      background-color: transparent;
+      border-color: white;
+      &:hover, &:active, &:focus{
+        border-color: rgb(9, 18, 33);
+        box-shadow: 0 0 0 2px rgba(9, 18, 33, 0.2)
+      }
+    }
+  }
+}
+
 .themeBut{
   border-color: var(--primary-color);
   color: var(--primary-color);
@@ -254,14 +313,10 @@
         transition: all 0.3s;
         &:hover{
           background-image: url('./img/button1.png');
-          .icon-jiantou3{
-            left: 5px;
-          }
         }
         .icon-jiantou3{
-          position: relative;
-          left: 0px;
-          transition: left .85s ease;
+          display: inline-block;
+          animation: moveArrow 4s infinite;
         }
       }
     }
@@ -2177,6 +2232,14 @@
   animation: moveArrow 4s infinite;
 }
 
+.fadeInChar {
+  .title-char {
+    display: inline-block;
+    opacity: 0;
+    animation: fadeInCharZone 0.5s ease-out forwards;
+  }
+}
+
 @keyframes moveArrow {
   0% {
     transform: translateX(0);
@@ -2197,4 +2260,15 @@
   100% {
     transform: translateX(0);
   }
+}
+
+@keyframes fadeInCharZone {
+  from {
+    opacity: 0;
+    filter: blur(20px);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+  }
 }