forked from Gitlink/forgeplus-react
124 lines
4.2 KiB
JavaScript
124 lines
4.2 KiB
JavaScript
import React, { memo, useEffect, useState } from 'react';
|
||
import { Button } from 'antd';
|
||
import axios from 'axios';
|
||
import Slider from 'react-slick';
|
||
import "slick-carousel/slick/slick.css";
|
||
import "slick-carousel/slick/slick-theme.css";
|
||
import Line from '../Line';
|
||
|
||
import './index.scss';
|
||
|
||
|
||
let setting = {
|
||
infinite: true,
|
||
speed: 750,
|
||
slidesToShow: 3,
|
||
slidesToScroll: 1,
|
||
pauseOnDotsHover: true,
|
||
autoplaySpeed: 4000,
|
||
centerMode: true,
|
||
centerPadding: "10px",
|
||
// pauseOnFocus: true,
|
||
autoplay: true,
|
||
arrows: false,
|
||
vertical: true,
|
||
}
|
||
|
||
|
||
function SecondSection({ second ,main_web_site_url}) {
|
||
|
||
const [leftItem, setLeftItem] = useState({});
|
||
const [list, setList] = useState([]);
|
||
|
||
useEffect(() => {
|
||
const url = `/home/platform_communicates.json`;
|
||
axios.get(url, {
|
||
params: {
|
||
limit: 10,
|
||
page: 1
|
||
}
|
||
}).then(result => {
|
||
if (result && result.data) {
|
||
let communicates = result.data.communicates;
|
||
if (communicates.length) {
|
||
setLeftItem(communicates[0]);
|
||
setList(communicates.slice(1, 5));
|
||
}
|
||
}
|
||
}).catch(error => { });
|
||
}, [])
|
||
|
||
|
||
function goDetail(id) {
|
||
window.open(`${main_web_site_url}/forums/${id}/detail`);
|
||
}
|
||
|
||
return (
|
||
<React.Fragment>
|
||
<h2 className="homePage-blue-tit">社区动态</h2>
|
||
<h4 className="homePage-subhead">为社区用户提供自主交流空间，实现思维碰撞和智慧融合</h4>
|
||
<Line />
|
||
<div className="homepage-main community-main">
|
||
|
||
<div className={`community-left ${second ? "community-active" : ''}`}>
|
||
<div className="community-english">C O M M U N I T Y D Y N A M I C S</div>
|
||
<h3 className="community-star">
|
||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||
</h3>
|
||
|
||
<h4 className="community-left-tit link" onClick={() => { goDetail(leftItem.fake_id) }}>{leftItem.title}</h4>
|
||
|
||
<div className="community-left-content ellipsis-8">
|
||
{leftItem.content}
|
||
</div>
|
||
|
||
<div className="text-center">
|
||
<Button className="homepage-btn" type="primary" onClick={() => { window.open(`${main_web_site_url}/forums`)}}>更多动态 <i className="iconfont icon-gengduoicon"></i></Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="home-second-section-slide">
|
||
<Slider {...setting}>
|
||
{
|
||
list.map((item, i) => {
|
||
return (
|
||
<div className="news-slide-item" key={i}>
|
||
<div className="slide-title" onClick={() => { goDetail(item.fake_id) }}>
|
||
<span className="order-num">{i + 1}</span>
|
||
<h3 className="slide-title-content ellipsis-1 link">{item.title}</h3>
|
||
<span className={`slide-tag slide-tag-${item.type}`}>{item.tag}</span>
|
||
</div>
|
||
<p className="ellipsis-2">{item.content}</p>
|
||
<span className="news-time">{item.created_time && item.created_time.split(' ')[0]}</span>
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
</Slider>
|
||
</div>
|
||
</div>
|
||
|
||
<svg className="waves waves-low "
|
||
viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
|
||
<defs>
|
||
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
||
</defs>
|
||
<g className="parallax">
|
||
{/* <use xlinkHref="#wave-path" x="50" y="3" fill="rgba(4,22,112,0.2)" />
|
||
<use xlinkHref="#wave-path" x="50" y="0" fill="rgba(4,22,112,0.2)" />
|
||
<use xlinkHref="#wave-path" x="50" y="9" fill="#041670" /> */}
|
||
<use xlinkHref="#wave-path" x="50" y="3" fill="rgba(0,55,175,0.2)" />
|
||
<use xlinkHref="#wave-path" x="50" y="0" fill="rgba(0,55,175,0.2)" />
|
||
<use xlinkHref="#wave-path" x="50" y="9" fill="#0037AF" />
|
||
</g>
|
||
</svg>
|
||
</React.Fragment>
|
||
|
||
)
|
||
}
|
||
|
||
export default memo(SecondSection); |