增加动效

2025-12-30 15:25:48 +08:00 · 2025-12-30 15:25:48 +08:00 · 7a827f38ca
parent d5897e3bd7
commit 7a827f38ca
8 changed files with 120 additions and 45 deletions
--- a/src/components/button/index.scss
+++ b/src/components/button/index.scss
@ -60,6 +60,16 @@
  &.white {
    background-color: #ffffff;
    color: #091221;
+    &:hover{
+      color: #ffffff;
+      background-color: #091221;
+    }
+  }
+
+  &.black-border-button{
+    border:1px solid #091221;
+    color:#091221;
+    background-color: transparent;
  }

  span {
--- a/src/forge/Main/projecthome/v2/components/banner.jsx
+++ b/src/forge/Main/projecthome/v2/components/banner.jsx
@ -7,7 +7,8 @@ import gif2 from '../image/gif.webp';
 import './index.scss';

 function Banner({isVisible}) {
-  const [active, setActive] = useState(1);
+  const [active, setActive] = useState(0);
+  const [active1, setActive1] = useState(0);
  
  const lines1 = [
    'if(!isVisible)',
@ -61,6 +62,11 @@ function Banner({isVisible}) {
      setActive(prevActive => {
        return prevActive < 2 ? prevActive+1 : 0;
      });
+      setTimeout(() => {
+        setActive1(prevActive => {
+          return prevActive < 2 ? prevActive+1 : 0;
+        });
+      }, 300);
    }, 4000);

    // 清理定时器
@ -107,8 +113,8 @@ function Banner({isVisible}) {
                  <div className='center-image-container-content'>
                    <span className='font-18 center-image-container-content-title'>持续汇聚多源需求</span>
                    {/* 四张banner轮播 */}
-                    <div className='center-image-container-content-banner-box FlexAJ pt20'>
-                      <div className='center-image-container-content-banner-box-left'>
+                    <div className='center-image-container-content-banner-box FlexAJ pt3'>
+                      <div className='center-image-container-content-banner-box-left mb20'>
                        {bannerList.map((item, index) => {
                          return <div className={`center-image-container-content-banner-box-left-item ${active === index ? 'active' : ''}`}>{item.title}</div>
                        })}
@ -121,7 +127,7 @@ function Banner({isVisible}) {
                            <source src={gif1}/>
                          </video> */}
                        </div>
-                        <img src={bannerList[active].image} className='center-image-container-content-banner-box-avtive-img'/>
+                        <img src={bannerList[active1].image} className='center-image-container-content-banner-box-avtive-img'/>
                      </div>
                    </div>
                    <img src={gif2} alt='' className='banner_img4'/>
--- a/src/forge/Main/projecthome/v2/components/openSourceCollaboration.jsx
+++ b/src/forge/Main/projecthome/v2/components/openSourceCollaboration.jsx
@ -56,19 +56,20 @@ const OpenSourceCollaboration = ({isVisible}) => {
        <div className="content-wrapper-bottom width1600"></div>
        <div className="content-wrapper width1600 df color-white mb35">
          <div className="left-panel-features-list">
-            {features.map((feature, index) => (
-              <div
-                key={index}
-                className={`feature-item pb20 font-20`}
-              >
-                <AlignCenter>
-                  <i className='iconfont icon-sijiaoxing font-15 mr10'></i>
-                  {feature.title}
-                </AlignCenter>
-                <div className="opacity8 font-14 ml24">{feature.description}</div>
-              </div>
-            ))}
-
+            <div className={`feature-item-box ${isVisible ? 'feature-item-box-active' : ''}`}>
+              {features.map((feature, index) => (
+                <div
+                  key={index}
+                  className={`feature-item pb20 font-20`}
+                >
+                  <AlignCenter>
+                    <i className='iconfont icon-sijiaoxing font-15 mr10'></i>
+                    {feature.title}
+                  </AlignCenter>
+                  <div className="opacity8 font-14 ml24">{feature.description}</div>
+                </div>
+              ))}
+            </div>
            {rollingButton({href: `/projects`, classname: 'mt10 white'})}
          </div>

--- a/src/forge/Main/projecthome/v2/index.scss
+++ b/src/forge/Main/projecthome/v2/index.scss
@ -391,7 +391,7 @@
          color: #091221;
          text-align: left;
          position: relative;
-          top: 10px;
+          top: 15px;
          &-img{
            position: absolute;
            width: 68px;
@ -400,13 +400,13 @@
          }
        }
        &-avtive-img{
-          width: 100%;
+          width: 105%;
        }
      }
      .banner_img4 {
        position: absolute;
-        bottom: -80px;
-        right: -35px;
+        bottom: -78px;
+        right: -62px;
        width: 260px;
        transform: scaleX(-1);
      }
@ -987,18 +987,26 @@
    .left-panel-features-list {
      margin: 93px 0 98px 100px;
    }
-
-    .feature-item:not(:last-of-type) {
+    .feature-item-box{
      position: relative;
-
-      &::before {
+      &::before{
        content: '';
        position: absolute;
        width: 1px;
-        height: 95%;
+        height: 74%;
        border-right: 1px dashed white;
        left: 7px;
-        top: 29px;
+        top: 25px;
+      }
+      &-active::after{
+        content: '';
+        position: absolute;
+        left: 7px;
+        top: 25px;
+        width: 1px;
+        height: 0;
+        background-color: white;
+        animation: height0-74 5.8s linear 0s infinite;
      }
    }
  }
@ -1368,4 +1376,14 @@
  100% {
    width: 100%;
  }
+}
+
+@keyframes height0-74 {
+  0% {
+    height: 0;
+  }
+
+  100% {
+    height: 74%;
+  }
 }
--- a/src/forge/projectHome/explore/index.jsx
+++ b/src/forge/projectHome/explore/index.jsx
@ -195,11 +195,11 @@ function ProjectHomePage(props) {
                  const url = i.author ? `/${i.author.login}/${i.identifier}${i.author.login === "gh_mirrors" ? "/about" : "/about"}` : ``
                  return <div>
                    <div className="FlexAJ">
-                      <div className="">
+                      <div className="flex1">
                        {i.topics && <div className='proListTopics mb10'>
                          {i.topics.slice(0, 2).map(item => <Tooltip title={item.name}><Link to={`/explore/topic/${item.id}/${encodeURIComponent(item.name)}`} className='proListTopic mr15 font-13 task-hide'>{item.name}</Link></Tooltip>)}
                        </div>}
-                        <div className="mb10"><Link className="font-22 font-bd task-hide" to={url}>{i.name}</Link></div>
+                        <Link className="font-22 font-bd" to={url}><div className="task-hide mb10">{i.name}</div></Link>
                        {i.description && <div className="opacity8 font-15 mb20">{i.description}</div>}
                        {rollingButton({href: url, name: "查看详情", hoverName: "查看详情", classname: 'mt10'})}
                      </div>
--- a/src/forums/list/index.jsx
+++ b/src/forums/list/index.jsx
@ -45,11 +45,8 @@ function List(props) {
  function init(updatedTags){
    const tagByState = updatedTags.filter(i=>i.title.includes(tagNameByState))
    setForumTagDetail(tagByState && !!tagByState.length ? tagByState[0] : updatedTags[0]);
-    if(tagByState && !tagByState.length) return
-    const targetDiv = document.getElementById("forums-list3-id");
-    const targetDivRect = targetDiv.getBoundingClientRect();
-    targetDiv && window.scrollTo({
-      top: targetDivRect.top+window.screenY,
+    tagByState && !!tagByState.length && window.scrollTo({
+      top: 850,
      behavior: 'smooth'
    })
  }
@ -154,7 +151,7 @@ function List(props) {
              <div className={`font-18 forums-list-item ${activeId === index ? 'forums-list-item-active' : ''}`} key={index}>
                <span className="forums-subject AlignCenter">
                  <Link className="task-hide" to={`/forums/${item.id}`}>{item.subject}</Link>
-                  {index === 0 && <Tag color="#df2659" className="mr0">new</Tag>}
+                  {index === 0 && <Tag color="#df2659" className="mr0">NEW</Tag>}
                  {item.is_original && <Tag color="#7e41f1">原创</Tag>}
                </span>
              </div>
@ -186,7 +183,7 @@ function List(props) {
          <div className="forums-section-box df">
            {forumTag.map((item, index) => {
              const isSelected = forumTagDetail && forumTagDetail.id === item.id;
-              const forums = item.essencePosts[0] || {};
+              const forums = item.essencePosts && item.essencePosts[0] || {};
              return (
                <div key={index} className={`forums-section-item-box flex1 ${isSelected && 'active'}`} onClick={()=>{setForumTagDetail(item)}}>
                  <div className="forums-section-item">
@ -247,7 +244,7 @@ function List(props) {
            {forumListByTag.length === 0 && (
              <Nodata _html="暂无数据" />
            )}
-            <Pagination pageSize={LIMIT} total={total} hideOnSinglePage={true} current={page} onChange={(page) => { setPage(page) }} className='center mt30' />
+            <Pagination pageSize={LIMIT} total={total} hideOnSinglePage={true} current={page} onChange={(page) => { setPage(page) }} className='edu-txt-right mt30' />
          </div>
        </div>
      </div>
--- a/src/forums/list/index.scss
+++ b/src/forums/list/index.scss
@ -7,6 +7,9 @@
    padding: 0 3px;
    margin-left: 10px;
    margin-right: 0px;
+    &+.ant-tag{
+      margin-left: 6px;
+    }
  }
 }

@ -71,6 +74,7 @@
    cursor: pointer;
    padding: 10px 15px 10px 15px;
    line-height: normal;
+    position: relative;

    .forums-subject {
      padding: 8px 0;
@ -79,6 +83,18 @@
        color: #091221;
      }
    }
+    &::after {
+      position: absolute;
+      bottom: -1px;
+      left: 5%;
+      content: '';
+      width: 0;
+      height: 1px;
+      background-color: #2149d4;
+    }
+    &-active::after{
+      animation: bottomflowLight 3s forwards;
+    }
  }

  .forums-list-item:not(:last-of-type):not(.forums-list-item-active) {
@ -89,8 +105,8 @@
  }

  .forums-list-item:hover, .forums-list-item-active {
-    background-color: #f7f9fd;
-    border-radius: 10px;
+  background-image: linear-gradient(180deg,#f7f9fd00 0%, #f7f9fd 100%);
+    border-radius: 4px;
    font-weight: bold;

    .forums-subject {
@ -132,16 +148,16 @@
    &.active{
      border-color: #2149d4;
      &::before{
-        content: '\e791';
+        content: '\e880';
        font-family: "iconfont";
        position: absolute;
-        bottom: -32px;
-        font-size: 26px;
+        bottom: -20px;
+        font-size: 13px;
        left: 48%;
        color: #2149d4;
      }
    }
-    &:nth-of-type(2) .forums-section-item{
+    &:nth-of-type(2) .forums-section-item, &:nth-of-type(4) .forums-section-item{
      background-image:linear-gradient(90deg,#D7DEFF 0% 49.37%,#C7CFFF 100%);
    }
  }
@ -212,15 +228,31 @@
    }
  }
  .forums-list4-item-link{
+    position: relative;
    .icon-jiantou3{
      display: none;
    }
+    &::before{
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 0;
+      height: 1px;
+      background-color: #2149d4;
+      transition: width 1s ease;
+    }
    &:hover{
-      padding-right: 20px;
      color:#2149d4;
+      &::before{
+        width: 100%;
+      }
      .icon-jiantou3{
        display: inline-block;
      }
+      & ~ .ant-tag{
+        display: none;
+      }
    }
  }
 }
@ -238,4 +270,14 @@
    transform: rotate(-8deg);
    transform-origin: center bottom;
  }
+}
+
+@keyframes bottomflowLight {
+  0% {
+    width: 0;
+  }
+
+  100% {
+    width: 90%;
+  }
 }
--- a/src/news/list/index.jsx
+++ b/src/news/list/index.jsx
@ -9,6 +9,7 @@ import RenderHtml from "../../components/render-html";
 import icon2 from '../image/icon2.png'
 import icon13 from '../image/icon13.png'
 import icon14 from '../image/icon14.png'
+import { rollingButton } from "../../components/button";

 function List() {
  const [list1, setList1] = useState([]);
@ -72,7 +73,7 @@ function List() {
                  
                <div className="font-15 opacity8 task-hide-2 lineh-24 pl8">{item.summary}</div>
                <div className="FlexAJ mt20 pb10 pl8">
-                  <Button className="black-border-button" href={`/news/${item.id}`}>了解更多</Button>
+                  {rollingButton({href: `/news/${item.id}`, classname: "black-border-button"})}
                  <span className="opacity8">{item.publishTime}发布</span>
                </div>
              </div>