diff --git a/src/forge/Information/Component/memberList.jsx b/src/forge/Information/Component/memberList.jsx index 71c553325..e51129a94 100644 --- a/src/forge/Information/Component/memberList.jsx +++ b/src/forge/Information/Component/memberList.jsx @@ -1,16 +1,36 @@ -import React,{useCallback, useEffect,useState} from 'react'; +import React,{useCallback, useEffect,useState,useMemo,useRef} from 'react'; import { Link } from 'react-router-dom'; import { tempEnum } from '../tempInfo'; import Crown from '../img/crown.png'; import Nodata from '../../Nodata'; import nodata from '../img/nodata.png'; import { Input } from 'antd'; +import Slider from 'react-slick'; +import 'slick-carousel/slick/slick.css'; +import 'slick-carousel/slick/slick-theme.css'; +import Left from '../img/ringleft.png'; +import Right from '../img/ringright.png'; const { Search } = Input; function Member(props) { const { vipLists, temp , deptId , headIcon , hoverIcon } = props; const isUOS = deptId === "uos";//id===91:泛在的开发社区成员,定制 + const [ list , setList ] = useState(vipLists); + const sliderRef = useRef(null); + const [currentSlide, setCurrentSlide] = useState(0); + + // 将成员列表按每行8个进行分组 + const groupMembersByRow = (members) => { + if (!members || members.length === 0) return []; + const grouped = []; + for (let i = 0; i < members.length; i += 24) { + grouped.push(members.slice(i, i + 24)); + } + console.log(grouped); + + return grouped; + }; useEffect(()=>{ if(vipLists && vipLists.length > 0 ){ @@ -30,6 +50,51 @@ function Member(props) { setList(ele); } + const PrevArrow = (props) => { + const { onClick } = props; + const isDisabled = currentSlide === 0; + return ( + + + + ); + }; + + const NextArrow = (props) => { + const { onClick, currentSlide, slideCount } = props; + const isDisabled = currentSlide >= slideCount - 1; + return ( + + + + ); + }; + + const cateSetting={ + dots: false, + arrows: true, + infinite: false, + speed: 800, + slidesToShow: 1, + slidesToScroll: 1, + centerMode: false, + centerPadding: '0px', + autoplay: false, + autoplaySpeed: 5000, + pauseOnHover: true, + prevArrow: , + nextArrow: , + afterChange: (index) => { + setCurrentSlide(index); + }, + } + return(
{ @@ -60,13 +125,38 @@ function Member(props) { } { i.zoneMemberList && i.zoneMemberList.length > 0 ? -
    + (i.typeName.indexOf("社区成员")>-1 && !deptId ? +
    + 成员总览共{i.zoneMemberList.length}个 + + { + groupMembersByRow(i.zoneMemberList).map((row, rowIndex) => ( +
    +
    + {row.map((member, colIndex) => ( +
    +
    +
    + +
    +
    {member.name}
    +
    {member.memberLevel && {member.memberLevel} }
    +
    +
    + ))} +
    +
    + )) + } +
    +
    + :
      { i.zoneMemberList.map((j,key)=>{ return(
    • - { !(isUOS && i.id === 91) && } + { !(isUOS && i.id === 91) && }
      {j.name} @@ -81,10 +171,9 @@ function Member(props) { }) }
    - : - ( - temp === tempEnum.zone1 ? : ) + : + (temp === tempEnum.zone1 ? : ) }
) diff --git a/src/forge/Information/Pages/custom/vip.jsx b/src/forge/Information/Pages/custom/vip.jsx index f1af76b14..44a2b356c 100644 --- a/src/forge/Information/Pages/custom/vip.jsx +++ b/src/forge/Information/Pages/custom/vip.jsx @@ -27,8 +27,7 @@ function CustomVip(props){ const [ applyVisible , setApplyVisible ] = useState(false); const [ memberStatus , setMemberStatus] = useState(memberStatusEnum.notMember); const { id, showNotification, checkIfLogin, showLoginDialog, temp, sectionMemberTitle } = props; - const isNSCC = deptId === "NSCC"; - + useEffect(()=>{ let uuid = getUniqueIdentifier() let url = props.location.pathname @@ -50,7 +49,7 @@ function CustomVip(props){ function getLists(){ getVIPLists(id).then(response=>{ - if(response){ + if(response && response.data){ setVIPLists(response.data.rows); setIsSpin(false); } diff --git a/src/forge/Information/Pages/homepage/component/newsByNSCC.jsx b/src/forge/Information/Pages/homepage/component/newsByNSCC.jsx index 76d5b6335..33523a73b 100644 --- a/src/forge/Information/Pages/homepage/component/newsByNSCC.jsx +++ b/src/forge/Information/Pages/homepage/component/newsByNSCC.jsx @@ -115,10 +115,10 @@ function News(props) { } {/* 第二个顺序栏目 */} {secondDir &&
- - {window.scrollTo(0,450)}} className="font-18 font-bd">{secondDir.name} + {/* */} + {/* {window.scrollTo(0,450)}} className="font-18 font-bd">{secondDir.name} */} {docListBySecondDir.map(item=>{ - return
+ return

{window.scrollTo(0,450)}}>{item.name}

diff --git a/src/forge/Information/Pages/homepage/index.scss b/src/forge/Information/Pages/homepage/index.scss index d661a8acc..49ec7840a 100644 --- a/src/forge/Information/Pages/homepage/index.scss +++ b/src/forge/Information/Pages/homepage/index.scss @@ -894,6 +894,8 @@ background: linear-gradient(180deg,#f4f7ff 0%,#F6F8FD 100%), url('./image/bkImg6.png') top/contain no-repeat; background-blend-mode: multiply; padding: 30px 25px; + max-height:653px; + overflow-y: auto; } .docBySecondDir_NSCC{ background-image:linear-gradient(180deg,#f4f7ff 0%,#ffffff 100%); @@ -901,6 +903,10 @@ box-shadow:0px 0px 12px rgba(33, 73, 212, 0.06); padding: 16px 20px; transition: all 0.3s ease; + margin-bottom:15px; + &:last-child{ + margin-bottom:0px; + } a.font-14{ color: $primary-color; } diff --git a/src/forge/Information/img/right.png b/src/forge/Information/img/right.png new file mode 100644 index 000000000..f5a134bd9 Binary files /dev/null and b/src/forge/Information/img/right.png differ diff --git a/src/forge/Information/img/ringleft.png b/src/forge/Information/img/ringleft.png new file mode 100644 index 000000000..e51738608 Binary files /dev/null and b/src/forge/Information/img/ringleft.png differ diff --git a/src/forge/Information/img/ringright.png b/src/forge/Information/img/ringright.png new file mode 100644 index 000000000..f5a134bd9 Binary files /dev/null and b/src/forge/Information/img/ringright.png differ diff --git a/src/forge/Information/index.scss b/src/forge/Information/index.scss index 741857448..f7ab7cf0c 100644 --- a/src/forge/Information/index.scss +++ b/src/forge/Information/index.scss @@ -2183,6 +2183,147 @@ } } } +.totalMemeber{ + font-family:Alibaba PuHuiTi; + font-weight:500; + color:#091221; + font-size:18px; + padding:30px 40px; + display: flex; + align-items: center; + line-height:25px; + span{ + padding:0 6px; + height:21px; + line-height:21px; + background:#f1ebff; + border-radius:4px; + margin-left:12px; + color:#7a45ec; + font-size:12px; + } +} + +.zoneMemberRow { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + align-items: flex-start; + padding:0 25px 30px; +} +.memeberSlider{ + position: relative; + .custom-prev-arrow,.custom-next-arrow{ + position:absolute; + right:45px; + top:-55px; + left:unset; + width: 30px; + height: 30px; + transform:rotate(-90deg); + display: flex; + align-items: center; + justify-content: center; + cursor:pointer; + i{ + font-size:30px!important; + color:rgba(9, 18, 33, 1); + } + &.arrow-disabled{ + i{ + color: #091221 !important; + opacity: 0.4; + } + cursor: not-allowed; + } + } + .custom-prev-arrow{ + right:105px; + transform:rotate(90deg); + } +} +.zoneMemberItem{ + padding-top:45px; + width:163px; + margin:15px; + position: relative; + &:hover{ + .zoneMI_box .zoneMI_img{ + a::before{ + animation: buttonBorderSpin 3s linear infinite forwards; + } + } + } + &::before,&::after{ + content:""; + position: absolute; + height: 117px; + left:-1px; + right: -1px; + bottom: -1px; + z-index:0; + border-radius:8px; + background:linear-gradient(180deg,rgba(219, 70, 255, 0.17) 0%,rgba(111, 85, 255, 0.17) 42.36%,rgba(70, 106, 255, 0.17) 100%); + } + &::after{ + height: 115px; + z-index: 1; + left:0; + right:0; + bottom:0; + background: #fff; + } + .zoneMI_box{ + height: 115px; + padding-bottom: 10px; + border-radius:8px; + display: flex; + flex-direction: column; + justify-content: flex-end; + position: relative; + align-items: center; + position: relative; + z-index: 10; + background:linear-gradient(313.05deg,#ffffff 19.33%,rgba(242, 246, 255, 0.08) 62.79%,rgba(133, 110, 250, 0.08) 97.93%); + .zoneMI_img{ + position: absolute; + left:50%; + margin-left:-45px; + top:-45px; + z-index:1000; + a{ + position: relative; + &::before{ + content:""; + position: absolute; + height: 94px; + width:94px; + left:-2px; + right: -2px; + bottom: -2px; + top: -2px; + z-index:0; + border-radius:50%; + background:linear-gradient(168.49deg,#466aff -0.45%,#e2e7ff 22.8%,#f3c9ff 42.17%,#ffffff 71.05%); + } + } + img{ + border-radius:50%; + position: relative; + z-index:2; + background: #fff; + } + } + .zoneMI_name{ + color:#091221; + font-size:18px; + font-family:alibaba; + height:25px; + line-height:25px; + } + } +} + .NSCC_source_box{ background-image: url('./img/source-bg.png'); background-size: 100% 100%; @@ -2388,4 +2529,9 @@ opacity: 1; transform: translateY(0px); } +} +@keyframes buttonBorderSpin { + 100% { + transform: rotate(360deg); + } } \ No newline at end of file