社区动态-项目动态模块样式改版

src/news/list/index.jsx

@@ -7,8 +7,11 @@ import "./index.scss";
 import moment from "moment";
 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 icon16 from '../image/icon16.png'
+import icon17 from '../image/icon17.png'
+import icon18 from '../image/icon18.png'
+import icon19 from '../image/icon19.png'
+import icon20 from '../image/icon20.png'
 import { rollingButton } from "../../components/button";
 import { HoverUnderline } from "../../components/title";
 
@@ -17,9 +20,11 @@ function List() {
   const [list2, setList2] = useState([]);
   const [firstActivity, setFirstActivity] = useState(undefined);
   const [list3, setList3] = useState([]);
-  const firstDynamics = list3.slice(0,2);
   const [isShowAll, setIsShowAll] = useState(false);
+  const [current, setCurrent] = useState(0);
   const list1ByShowAll = isShowAll ? list1.slice(4) : list1.slice(4, 10)
+  const list3_img =[icon16, icon17, icon18, icon19, icon20];
+  const page_max = Math.floor(list3.length/5)
 
   useEffect(() => {
     document.title = "社区动态";
@@ -125,29 +130,23 @@ function List() {
       </div>
       
       {/* 项目动态 */}
-      <div className="dynamics-box pb60">
+      <div className="dynamics-box pb100">
         <div className="font-40 font-bd center pt80 pb60">项目动态</div>
-        <div className="width1600 df pb100">
-          {firstDynamics && firstDynamics.length && <div className="firstDynamics-box">
-            {firstDynamics.map((item, index)=>{
-              return <div className="firstDynamics-item">
-                <img src={!!index ? icon14 : icon13} width={48}/>
-                <div className="font-22 task-hide mb10 pl10">{item.name}</div>
-                <div className="font-15 pl10 task-hide-2">{item.summary}</div>
-              </div>
-            })}  
-          </div>}
-          <div className="dynamics-list">
-            {list3.slice(2, 10).map(item=>{ 
+        <div className="width1600 dynamics_list">
+          <div className="font-28 dynamics_list_title clearfix">
+            社区开发团队研发进度一览
+            <a className={`go2 fr ml20 ${current >= page_max || list3.length <= 5 ? 'unclick' : ''}`} onClick={()=>current < page_max && list3.length > 5 && setCurrent(current+1)}></a>
+            <a className={`go1 fr ${!current ? 'unclick' : ''}`} onClick={()=>current>0 && setCurrent(current-1)}></a>
+          </div>
+          <div className="dynamics_list_box">
+            {list3.slice(current*5, current*5+5).map((item, index)=>{ 
               return <div className="dynamics-item" key={item.id}>
-                <div className="font-22 FlexAJ">
-                  <span className="task-hide flex1">{item.name}</span>
-                  <span className="font-15 opacity8 ml30">{moment(item.publishTime).format('YYYY-MM-DD')}</span>
-                </div>
-                <div className="font-15 opacity8 task-hide-2">{item.summary}</div>
+                <img src={list3_img[index]} width={30} alt=""/>
+                <div className="font-20 task-hide mt10">{item.name}</div>
+                <div className="font-15 opacity8 task-hide mb10">{item.summary}</div>
+                <span className="opacity8">{moment(item.publishTime).format('MM月DD日')}</span>
               </div>
-            })
-            }
+            })}
           </div>
         </div>
       </div>

src/news/list/index.scss

@@ -213,4 +213,41 @@
       background-color: #09122124;
     }
   }
+}
+.dynamics_list{
+  background-image: url('../image/bk10.png');
+  background-size: 100% 100%;
+  padding: 90px 40px 60px 70px;
+  .dynamics_list_title{
+    font-family: "DouyinSansBold";
+    margin-bottom: 85px;
+  }
+  .dynamics_list_box{
+    display: flex;
+    gap: 30px;
+  }
+  .dynamics-item{
+    flex: none;
+    width: calc(20% - 30px);
+  }
+  .go1, .go2{
+    width:32px;
+    height:32px;
+    background-image: url('../image/icon21.png');
+    background-size: 100% 100%;
+  }
+  .go2{
+    background-image: url('../image/icon22.png');
+  }
+  &:hover{
+    .go1{
+      background-image: url('../image/icon23.png');
+    }
+    .go2{
+      background-image: url('../image/icon24.png');
+    }
+  }
+  .unclick{
+    cursor: not-allowed;
+  }
 }