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:
{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