首页增加竞赛轮播

This commit is contained in:
何童崇 2022-04-18 16:40:39 +08:00
parent e9e9851e0c
commit 15d73d4f30
8 changed files with 115 additions and 13 deletions

59
src/home/Slider/index.jsx Normal file
View File

@ -0,0 +1,59 @@
import React, { memo, useEffect, useState } from 'react';
import Slider from 'react-slick';
import { Link } from "react-router-dom";
// import notice from '../img/slider.gif';
import notice from '../img/notice.png';
import text from '../img/slider.png';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import './index.scss';
let setting = {
infinite: true,
speed: 28000,
slidesToShow: 1,
slidesToScroll: 1,
autoplaySpeed: 0,
// autoplaySpeed: 10000000,
centerMode: true,
centerPadding: '0px',
// pauseOnDotsHover: true,
// pauseOnFocus: true,
autoplay: true,
arrows: false,
vertical: false,
easing: 'linear',
useTransform: false,
cssEase: 'linear',
}
function SecondSection() {
return (
<div className="home-competition-slide">
<Slider {...setting}>
<div>
<Link to="/competition/qz2022" className="competition-slide-item" >
<img className='competition-notice' src={notice} />
<img className='competition-text' src={text} />
</Link>
</div>
<div>
<Link to="/competition/qz2022" className="competition-slide-item" >
<img className='competition-notice' src={notice} />
<img className='competition-text' src={text} />
</Link>
</div>
</Slider>
</div>
)
}
export default memo(SecondSection);

View File

@ -0,0 +1,37 @@
.home-competition-slide {
position: relative;
// height: 50px;
width: calc(100vw + 500px);
top: 4.375em;
left: 0;
right: 0;
z-index: 10;
.competition-slide-item {
display: flex;
justify-content: flex-end;
}
.competition-notice {
width: 2.6vw;
animation: ballRotation 1s infinite alternate;
}
.competition-text {
width: 23.5vw;
}
@keyframes ballRotation {
0% {
transform: scale(0.75);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(0.75);
}
}
}

BIN
src/home/img/notice.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 457 KiB

BIN
src/home/img/slider.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 170 KiB

View File

@ -3,6 +3,7 @@ import { TPMIndexHOC } from '../modules/tpm/TPMIndexHOC';
import { isMobile } from 'educoder';
import './index.scss';
import Slider from './Slider';
import FirstSection from './FirstSection';
import SecondSection from './SecondSection';
import ThirdSection from './ThirdSection';
@ -33,15 +34,15 @@ function HomePage({ history }) {
let settings = JSON.parse(localStorage.chromesetting);
let main_web_site_url = settings.main_web_site_url;
let forumUrl ="";
let competitionUrl ="";
if(settings.navbar){
for (const item of settings.navbar){
if(item.name.indexOf("论坛")>-1){
forumUrl=item.link;
let forumUrl = "";
let competitionUrl = "";
if (settings.navbar) {
for (const item of settings.navbar) {
if (item.name.indexOf("论坛") > -1) {
forumUrl = item.link;
}
if(item.name.indexOf("竞赛")>-1){
competitionUrl=item.link;
if (item.name.indexOf("竞赛") > -1) {
competitionUrl = item.link;
}
}
}
@ -116,7 +117,7 @@ function HomePage({ history }) {
setSixth(false);
}
if(isHuawei){
if (isHuawei) {
setFourth(true);
setSixth(true);
}
@ -126,13 +127,15 @@ function HomePage({ history }) {
return (
<div className="homePage">
<Slider />
<div id="home-first-section" className="home-first-section">
<FirstSection first={first} />
</div>
<div id="home-second-section" className="home-second-section">
<SecondSection second={second} main_web_site_url={main_web_site_url} btnUrl={forumUrl}/>
<SecondSection second={second} main_web_site_url={main_web_site_url} btnUrl={forumUrl} />
</div>
@ -149,11 +152,11 @@ function HomePage({ history }) {
</div>
<div id="home-sixth-section" className="home-sixth-section">
<SixthSection sixth={sixth} main_web_site_url={main_web_site_url} btnUrl={competitionUrl}/>
<SixthSection sixth={sixth} main_web_site_url={main_web_site_url} btnUrl={competitionUrl} />
</div>
<div id="home-seventh-section" className="home-seventh-section">
<SeventhSection main_web_site_url={main_web_site_url} btnUrl={forumUrl}/>
<SeventhSection main_web_site_url={main_web_site_url} btnUrl={forumUrl} />
</div>
<Footer />

View File

@ -29,7 +29,7 @@ export default (props) => {
current={current}
total={total}
showSizeChanger={showSizeChanger}
pageSize={pageSize}
pageSize={pageSize||10}
/>}
</div>

View File

@ -375,6 +375,8 @@ function Competition(props){
total={total}
setCurPage={(page)=>{updateUrl(page)}}
current={curPage}
pagination={false}
pageSize={10}
/>
</div>
)

View File

@ -1,4 +1,5 @@
import React, { useState, useMemo, useEffect } from "react";
import { Base64 } from 'js-base64';
import {Select, Button, Tooltip } from 'antd';
import {current_main_site_url} from '../fetch';
import PaginationTable from "../../components/paginationTable";