超算会员-人员太多的情况下改为左右点击轮播
This commit is contained in:
parent
1feff1fd57
commit
6578a4f083
|
|
@ -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 (
|
||||
<span
|
||||
onClick={isDisabled ? undefined : onClick}
|
||||
className={`custom-prev-arrow ${isDisabled ? 'arrow-disabled' : ''}`}
|
||||
>
|
||||
<i className="iconfont icon-jiantou" />
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const NextArrow = (props) => {
|
||||
const { onClick, currentSlide, slideCount } = props;
|
||||
const isDisabled = currentSlide >= slideCount - 1;
|
||||
return (
|
||||
<span
|
||||
onClick={isDisabled ? undefined : onClick}
|
||||
className={`custom-next-arrow ${isDisabled ? 'arrow-disabled' : ''}`}
|
||||
>
|
||||
<i className="iconfont icon-jiantou" />
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
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: <PrevArrow />,
|
||||
nextArrow: <NextArrow />,
|
||||
afterChange: (index) => {
|
||||
setCurrentSlide(index);
|
||||
},
|
||||
}
|
||||
|
||||
return(
|
||||
<div className="vip_list">
|
||||
{
|
||||
|
|
@ -60,13 +125,38 @@ function Member(props) {
|
|||
}
|
||||
{
|
||||
i.zoneMemberList && i.zoneMemberList.length > 0 ?
|
||||
<ul className={`card_ul ${isUOS && i.id === 91 ? "doubleUl" :""}`}>
|
||||
(i.typeName.indexOf("社区成员")>-1 && !deptId ?
|
||||
<div>
|
||||
<span className='totalMemeber'>成员总览<span>共{i.zoneMemberList.length}个</span></span>
|
||||
<Slider ref={sliderRef} {...cateSetting} className='memeberSlider'>
|
||||
{
|
||||
groupMembersByRow(i.zoneMemberList).map((row, rowIndex) => (
|
||||
<div>
|
||||
<div key={rowIndex} className='zoneMemberRow'>
|
||||
{row.map((member, colIndex) => (
|
||||
<div key={member.login + colIndex} className='zoneMemberItem'>
|
||||
<div className='zoneMI_box'>
|
||||
<div className='zoneMI_img'>
|
||||
<Link to={`/${member.login}`} ><img src={member.imageUrl} alt="" width={90} height={90}/></Link>
|
||||
</div>
|
||||
<div className='zoneMI_name'>{member.name}</div>
|
||||
<div>{member.memberLevel && <span className="card_tag">{member.memberLevel}</span> }</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</Slider>
|
||||
</div>
|
||||
: <ul className={`card_ul ${isUOS && i.id === 91 ? "doubleUl" :""}`}>
|
||||
{
|
||||
i.zoneMemberList.map((j,key)=>{
|
||||
return(
|
||||
<li className="card_u_li">
|
||||
<Link to={`/${j.login}`} className="card_u_wrap">
|
||||
{ !(isUOS && i.id === 91) && <Link to={`/${j.login}`} ><img src={j.imageUrl} alt="" /></Link> }
|
||||
{ !(isUOS && i.id === 91) && <Link to={`/${j.login}`} ><img src={j.imageUrl} alt=""/></Link> }
|
||||
<div className="card_u_info">
|
||||
<div className="card_u_up">
|
||||
<span className="card_name task-hide">{j.name}</span>
|
||||
|
|
@ -81,10 +171,9 @@ function Member(props) {
|
|||
})
|
||||
}
|
||||
</ul>
|
||||
:
|
||||
(
|
||||
temp === tempEnum.zone1 ? <Nodata _html="暂无数据" img={ nodata }/> : <Nodata _html="暂无数据" />
|
||||
)
|
||||
:
|
||||
(temp === tempEnum.zone1 ? <Nodata _html="暂无数据" img={ nodata }/> : <Nodata _html="暂无数据" />)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -115,10 +115,10 @@ function News(props) {
|
|||
</div>}
|
||||
{/* 第二个顺序栏目 */}
|
||||
{secondDir && <div className='secondDir_NSCC flex1 ml30'>
|
||||
<Divider type="vertical" style={{width: '3px', height: '17px', backgroundColor: "#466aff", marginBottom: '5px'}}/>
|
||||
<Link to={`/zone/${key}/news/${secondDir.id}`} onClick={()=>{window.scrollTo(0,450)}} className="font-18 font-bd">{secondDir.name}</Link>
|
||||
{/* <Divider type="vertical" style={{width: '3px', height: '17px', backgroundColor: "#466aff", marginBottom: '5px'}}/> */}
|
||||
{/* <Link to={`/zone/${key}/news/${secondDir.id}`} onClick={()=>{window.scrollTo(0,450)}} className="font-18 font-bd">{secondDir.name}</Link> */}
|
||||
{docListBySecondDir.map(item=>{
|
||||
return <div className='docBySecondDir_NSCC mt15'>
|
||||
return <div className='docBySecondDir_NSCC '>
|
||||
<p className='font-16 font-bd task-hide'>
|
||||
<Link to={`/zone/${key}/newdetail/${item.id}`} onClick={()=>{window.scrollTo(0,450)}}>{item.name}</Link>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1018 B |
Binary file not shown.
|
After Width: | Height: | Size: 1018 B |
Binary file not shown.
|
After Width: | Height: | Size: 1018 B |
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue