Gitlink
/
forgeplus-react
39
0
Fork 30
Code Issues Pull Requests Releases 1 Wiki Activity

根据客户要求修改静态页面细节

This commit is contained in:
何童崇 2021-11-22 14:25:17 +08:00
parent 954cf38074
commit 6d2a50ef5e
16 changed files with 302 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/home/FifthSection/index.jsx
View File

@ -56,14 +56,17 @@ function FifthSection({ fifth }) {
</div>
</div>
<Button className="homepage-btn" type="primary">寻找创客</Button>
</div>
<div className="task-main">
<h2 className="homePage-blue-tit">创客空间</h2>
<h4 className="homePage-subhead">开源项目版块集项目托管、版本管理等功能于一体，为开源协作和群智汇聚提供创作环境</h4>
<Line />
<Collapse accordion defaultActiveKey={['1']}>
<Collapse
accordion
defaultActiveKey={['1']}
expandIconPosition="right"
>
<Panel header="多样化目标识别及网络化协同控制仿真验证模块开发" key="1">
<p className="collapse-des">研发配置要求为包含网络化协同控制仿真验证与多样化目标识别仿真验证模块的1套软件和1份测试报告。</p>
<div className="collapse-content">
@ -133,7 +136,10 @@ function FifthSection({ fifth }) {
</Collapse>
</div>
</div>
<div className="text-center">
<Button className="homepage-btn " type="primary">寻找创客 <i className="iconfont icon-gengduoicon"></i></Button>
</div>
<svg className="waves waves-low "

192
src/home/FifthSection/index.scss
View File

@ -3,7 +3,11 @@
.fifth-main {
display: flex;
margin: 5vh auto 10vh;
margin: 5vh auto 3vh;
}
.homepage-btn {
margin-bottom: 10vh;
}
.circle-wave {
@ -13,13 +17,11 @@
flex: none;
&:hover .icon-circle {
animation-play-state: paused !important;
}
animation-play-state: paused;
.homepage-btn{
position: absolute;
right: 50px;
bottom: 0;
li span {
animation-play-state: paused;
}
}
}
.icon-circle {
@ -45,56 +47,98 @@
margin-top: -20px;
cursor: pointer;
.iconfont {
font-size: 20px !important;
font-size: 24px !important;
cursor: pointer;
}
}
li:first-child {
span {
animation: iconItem infinite 20s linear;
}
}
li:nth-of-type(2) {
background: #e33230;
transform: rotate(36deg);
transform-origin: 20px 300px;
span {
transform: rotate(-36deg);
animation: iconItem2 infinite 20s linear;
}
}
li:nth-of-type(3) {
background: #0766fb;
transform: rotate(72deg);
transform-origin: 20px 300px;
span {
transform: rotate(-72deg);
animation: iconItem3 infinite 20s linear;
}
}
li:nth-of-type(4) {
background: #f02c66;
transform: rotate(108deg);
transform-origin: 20px 300px;
span {
transform: rotate(-108deg);
animation: iconItem4 infinite 20s linear;
}
}
li:nth-of-type(5) {
background: #6038ff;
transform: rotate(144deg);
transform-origin: 20px 300px;
span {
transform: rotate(-144deg);
animation: iconItem5 infinite 20s linear;
}
}
li:nth-of-type(6) {
background: #f85e55;
transform: rotate(180deg);
transform-origin: 20px 300px;
span {
transform: rotate(-180deg);
animation: iconItem6 infinite 20s linear;
}
}
li:nth-of-type(7) {
background: #c13cff;
transform: rotate(216deg);
transform-origin: 20px 300px;
span {
transform: rotate(-216deg);
animation: iconItem7 infinite 20s linear;
}
}
li:nth-of-type(8) {
background: #2cb840;
transform: rotate(252deg);
transform-origin: 20px 300px;
span {
transform: rotate(-252deg);
animation: iconItem8 infinite 20s linear;
}
}
li:nth-of-type(9) {
background: #5744f6;
transform: rotate(288deg);
transform-origin: 20px 300px;
span {
transform: rotate(-288deg);
animation: iconItem9 infinite 20s linear;
}
}
li:nth-of-type(10) {
background: #e9862e;
transform: rotate(324deg);
transform-origin: 20px 300px;
span {
transform: rotate(-324deg);
animation: iconItem10 infinite 20s linear;
}
}
li {
position: absolute;
span {
position: absolute;
left: 0;
@ -119,6 +163,96 @@
}
}
@keyframes iconItem {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
@keyframes iconItem2 {
0% {
transform: rotate(-36deg);
}
100% {
transform: rotate(-396deg);
}
}
@keyframes iconItem3 {
0% {
transform: rotate(-72deg);
}
100% {
transform: rotate(-432deg);
}
}
@keyframes iconItem4 {
0% {
transform: rotate(-108deg);
}
100% {
transform: rotate(-468deg);
}
}
@keyframes iconItem5 {
0% {
transform: rotate(-144deg);
}
100% {
transform: rotate(-504deg);
}
}
@keyframes iconItem6 {
0% {
transform: rotate(-180deg);
}
100% {
transform: rotate(-540deg);
}
}
@keyframes iconItem7 {
0% {
transform: rotate(-216deg);
}
100% {
transform: rotate(-576deg);
}
}
@keyframes iconItem8 {
0% {
transform: rotate(-252deg);
}
100% {
transform: rotate(-612deg);
}
}
@keyframes iconItem9 {
0% {
transform: rotate(-288deg);
}
100% {
transform: rotate(-648deg);
}
}
@keyframes iconItem10 {
0% {
transform: rotate(-324deg);
}
100% {
transform: rotate(-684deg);
}
}
.circleBox {
position: relative;
right: 15px;
@ -243,10 +377,13 @@
.ant-collapse {
border: 0;
background: inherit;
.ant-collapse-item {
border: 0;
margin-bottom: 30px;
}
.ant-collapse-item:last-child, .ant-collapse-item:last-child > .ant-collapse-header{
.ant-collapse-item:last-child,
.ant-collapse-item:last-child > .ant-collapse-header {
border-radius: 6px 6px 0 0;
}
@ -260,6 +397,19 @@
letter-spacing: 0;
font-weight: 500;
padding: 27px 36px;
.ant-collapse-arrow {
display: inline-flex;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
box-shadow: 0px 0px 5px 1px rgba(38, 118, 255, 0.1);
svg {
transform: rotate(90deg);
}
}
}
.ant-collapse-item-active {
@ -275,6 +425,10 @@
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.ant-collapse-arrow {
display: none;
}
}
.ant-collapse-content > .ant-collapse-content-box {
@ -289,7 +443,7 @@
letter-spacing: 0;
line-height: 28px;
font-weight: 400;
margin-bottom: .5em !important;
margin-bottom: 0.5em !important;
}
.collapse-content {
padding: 12px;
@ -297,24 +451,24 @@
background: #f5f7fa;
border-radius: 4px;
.collapse-content-item{
.collapse-content-item {
height: 30px;
line-height: 30px;
font-weight: 400;
}
.iconfont{
.iconfont {
margin-right: 12px;
color: #EA0000;
color: #ea0000;
}
.collapse-content-money{
margin-left:16px;
color: #EA0000;
.collapse-content-money {
margin-left: 16px;
color: #ea0000;
}
.collapse-content-time{
margin-left:16px;
.collapse-content-time {
margin-left: 16px;
}
}
.waves{
.waves {
position: relative;
bottom: -10px;
}

7
src/home/FirstSection/index.scss
View File

@ -24,6 +24,7 @@
.website-content {
display: flex;
justify-content: space-between;
align-items: center;
height: 82vh;
min-height: 600px;
}
@ -51,6 +52,7 @@
font-size: 16px;
line-height: 2.3;
margin-bottom: 40px;
opacity: 0.8;
}
.website-more{
@ -65,11 +67,9 @@
flex: none;
justify-content: center;
align-items: flex-end;
align-self: flex-end;
position: relative;
width: 680px;
height: 580px;
margin-bottom: 10vh;
img {
opacity: 0;
}
@ -177,13 +177,12 @@
@keyframes website {
0% {
top: 60vh;
top: 25vh;
opacity: 0;
}
100% {
top: 0;
opacity: 1;
transition: all 2s;
}
}

18
src/home/Footer/index.jsx
View File

@ -1,18 +1,18 @@
import React, { memo } from "react";
import logo from '../../modules/tpm/images/hskylogo.png';
// import logo from '../../modules/tpm/images/hskylogo.png';
import './index.scss';
function HomeFooter() {
return (
<div class="home-footer homePage">
<div className="home-footer homePage">
<div className="arc"></div>
<div className="homepage-main footer-main">
{/* <img className="logo" src={logo} alt="红山开源"></img> */}
<p>
<span class="mr15"><i class="iconfont icon-weibiaoti- font-16"></i>+86-010-66357650</span>
<span class="mr15"><i class="iconfont icon-mail font-16"></i>osredm@163.com</span>
<span class="mr15"><i class="iconfont icon-xiazai18 font-16"></i> 北京市海淀区西三环北路72号</span>
<span className="mr15"><i className="iconfont icon-weibiaoti- font-16"></i>+86-010-66357650</span>
<span className="mr15"><i className="iconfont icon-xiazai18 font-16"></i> 北京市海淀区西三环北路72号</span>
<span className="footer-email mr15"><i className="iconfont icon-mail font-16"></i>osredm@163.com</span>
</p>
<p>
@ -22,11 +22,11 @@ function HomeFooter() {
<a className="police-number" href="https://beian.miit.gov.cn/#/Integrated/index">京ICP备2021005060</a>
</p>
</div>
{/* <p class="mb10">
{/* <p className="mb10">
style="width: 100%;height: 92px;background-color: #323232;color: #ccc;padding-top: 25px;"
<span class="mr15"><i class="iconfont icon-weibiaoti- font-16"></i>+86-010-66357650</span>
<span class="mr15"><i class="iconfont icon-mail font-16"></i>osredm@163.com</span>
<span class="mr15"><i class="iconfont icon-xiazai18 font-16"></i> 北京市海淀区西三环北路72号</span>
<span className="mr15"><i className="iconfont icon-weibiaoti- font-16"></i>+86-010-66357650</span>
<span className="mr15"><i className="iconfont icon-mail font-16"></i>osredm@163.com</span>
<span className="mr15"><i className="iconfont icon-xiazai18 font-16"></i> 北京市海淀区西三环北路72号</span>
</p>
<p>版权所有：红山开源社区&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802034576" style="color: #ccc; margin-right: 20px;">

12
src/home/Footer/index.scss
View File

@ -1,12 +1,13 @@
.home-footer {
height: 40vh;
width: 100vw;
background: #162046;
overflow: hidden;
.arc {
position: relative;
margin-top: -15vh;
margin: -15vh -5vw 0 -5vw;
height: 30vh;
width: 100%;
width: 110vw;
// background: linear-gradient(#cbdcff 0%, #bbccef 100%);
background: #cbdcff;
border-radius: 50%;
@ -43,4 +44,11 @@
.police-number{
color: #bdc2d1;
}
.footer-email{
display: inline-flex;
.iconfont{
margin-right: 2px;
}
}
}

2
src/home/FourthSection/index.jsx
View File

@ -33,7 +33,7 @@ function FourthSection({ fourth }) {
<h2 className="homePage-blue-tit">开源项目</h2>
<h4 className="homePage-subhead">开源项目版块集项目托管、版本管理等功能于一体，为开源协作和群智汇聚提供创作环境</h4>
<Line />
<Button className="homepage-btn" type="primary">查看项目</Button>
<Button className="homepage-btn" type="primary">查看项目 <i className="iconfont icon-gengduoicon"></i></Button>
</div>
<div className={fourth ? "code-box clearfix activeCode" : "code-box clearfix"} >

18
src/home/SecondSection/index.jsx
View File

@ -14,7 +14,7 @@ let setting = {
slidesToShow: 3,
slidesToScroll: 1,
pauseOnDotsHover: true,
autoplaySpeed: 2000,
autoplaySpeed: 20000,
centerMode: true,
centerPadding: "10px",
// pauseOnFocus: true,
@ -51,7 +51,7 @@ function SecondSection({ second }) {
</div>
<div className="text-center">
<Button className="homepage-btn" type="primary">更多动态</Button>
<Button className="homepage-btn" type="primary">更多动态 <i className="iconfont icon-gengduoicon"></i></Button>
</div>
</div>
@ -64,7 +64,8 @@ function SecondSection({ second }) {
<span className="slide-tag">热点资讯</span>
</div>
<p className="ellipsis-2">习主席指出，要紧跟科技强国建设进程，优化国防创新布局和环境条件，用好用足各方面优势力量和资源, sunt in culpa qui officia deserunt mollit id est laborum.</p>
<span>2021-09-13</span>
<span className="news-time">2021-09-13</span>
<i className="iconfont icon-a-shuangyinhao12x"></i>
</div>
<div className="news-slide-item" key={2}>
@ -74,7 +75,8 @@ function SecondSection({ second }) {
<span className="slide-tag slide-tag-red">热点资讯</span>
</div>
<p className="ellipsis-2">加快推进国防科技创新加优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出.</p>
<span>2021-09-15</span>
<span className="news-time">2021-09-15</span>
<i className="iconfont icon-a-shuangyinhao12x"></i>
</div>
<div className="news-slide-item" key={3}>
@ -84,7 +86,8 @@ function SecondSection({ second }) {
<span className="slide-tag slide-tag-yellow">热点资讯</span>
</div>
<p className="ellipsis-2">习主席指出，要紧跟科技强国建设进程，优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出</p>
<span>2021-09-12</span>
<span className="news-time">2021-09-12</span>
<i className="iconfont icon-a-shuangyinhao12x"></i>
</div>
<div className="news-slide-item" key={4}>
@ -94,7 +97,8 @@ function SecondSection({ second }) {
<span className="slide-tag slide-tag-red">热点资讯</span>
</div>
<p className="ellipsis-2">加快推进国防科技创新加优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出.</p>
<span>2021-09-15</span>
<span className="news-time">2021-09-15</span>
<i className="iconfont icon-a-shuangyinhao12x"></i>
</div>
</Slider>
</div>
@ -111,7 +115,7 @@ function SecondSection({ second }) {
<use xlinkHref="#wave-path" x="50" y="9" fill="#041670" />
</g>
</svg>
{/* </div> */}
{/* </div> */}
</React.Fragment>
)

31
src/home/SecondSection/index.scss
View File

@ -3,7 +3,6 @@
text-align: center;
padding-top: 40px;
margin-bottom: -10px;
.community-left-tit {
font-size: 20px;
@ -15,6 +14,10 @@
justify-content: space-between;
margin: 20px auto 50px;
text-align: left;
.homepage-btn {
margin-top: 40px;
}
}
.community-english {
@ -48,7 +51,6 @@
line-height: 36px;
}
.community-active {
position: relative;
animation: community 0.75s 1 forwards;
@ -95,6 +97,11 @@
border: 1px solid #fff;
border-radius: 6px;
& > .iconfont {
float: right;
font-size: 25px !important;
color: rgb(239, 122, 48);
}
.slide-title {
display: flex;
align-items: center;
@ -102,7 +109,7 @@
h3 {
color: #000870;
font-size: 18px;
margin-bottom: 0 !important;
flex: auto;
}
@ -124,6 +131,12 @@
text-align: center;
}
.news-time {
font-size: 15px;
font-weight: 400;
color: #3c476e;
}
.slide-tag {
color: #fff;
padding: 3px 13px;
@ -131,23 +144,19 @@
border-radius: 3px;
}
.slide-tag-red{
background: #E53939;
.slide-tag-red {
background: #e53939;
}
.slide-tag-yellow{
background: #FF7300;
.slide-tag-yellow {
background: #ff7300;
}
p {
color: #3c476e;
}
}
.slick-center {
margin-left: 100px;
}
}

25
src/home/SeventhSection/index.jsx
View File

@ -35,36 +35,39 @@ function SeventhSection() {
<h2 className="homePage-blue-tit">论坛交流</h2>
<h4 className="homePage-subhead">论坛交流版块通过技术交流、学术探讨等方式，为社区用户提供自主交流空间，实现思维碰撞和智慧融合</h4>
<Line />
<div class="clients">
<img class="client" src={head2} alt="images-not_found"/>
<img class="client" src={head3} alt="images-not_found"/>
<img class="client" src={head4} alt="images-not_found"/>
<img class="client" src={head5} alt="images-not_found"/>
<img class="client" src={head6} alt="images-not_found"/>
<img class="client" src={head7} alt="images-not_found"/>
<div className="clients">
<img className="client" src={head2} alt="images-not_found"/>
<img className="client" src={head3} alt="images-not_found"/>
<img className="client" src={head4} alt="images-not_found"/>
<img className="client" src={head5} alt="images-not_found"/>
<img className="client" src={head6} alt="images-not_found"/>
<img className="client" src={head7} alt="images-not_found"/>
<i className="start-icon iconfont icon-a-shuangyinhao12x"></i>
<i className="end-icon iconfont icon-a-shuangyinhao12x"></i>
</div>
<Slider {...setting}>
<div className="issue-item" key={1}>
<img className="author-head" src={head1} />
<span className="issue-author">opersou</span>
<h3 className="issue-title ellipsis-1">Linux基金会发布《2021开源职业报告》提出新的方案，促进人才成长合作发展</h3>
<p className="issue-content ellipsis-8">新冠疫情的大规模爆发对社会经济、人民生活各方面均造成较大影响，众多企业面临劳动用工、合同履约以及银行信贷三重危机。而今，世界各地经济正逐渐从新冠疫情常态化趋势下复苏，后疫情时代中雇佣模式的转变，对劳动关系领域带来了新挑战，这一变化与挑战在科技领域尤为凸显。当云原生技术的加速应用成为远程化工作的主流，使得相关信息化人才缺口在本次全球化疫情中更加恶化。
<p className="issue-content ellipsis-5">新冠疫情的大规模爆发对社会经济、人民生活各方面均造成较大影响，众多企业面临劳动用工、合同履约以及银行信贷三重危机。而今，世界各地经济正逐渐从新冠疫情常态化趋势下复苏，后疫情时代中雇佣模式的转变，对劳动关系领域带来了新挑战，这一变化与挑战在科技领域尤为凸显。当云原生技术的加速应用成为远程化工作的主流，使得相关信息化人才缺口在本次全球化疫情中更加恶化。
新冠疫情的大规模爆发对社会经济、人民生活各方面均造成较大影响，众多企业面临劳动用工、合同履约以及银行信贷三重危机。而今，世界各地经济正逐渐从新冠疫情常态化趋势下复苏，后疫情时代中雇佣模式的转变，对劳动关系领域带来了新挑战，这一变化与挑战在科技领域尤为凸显。当云原生技术的加速应用成为远程化工作的主流，使得相关信息化人才缺口在本次全球化疫情中更加恶化。</p>
<span className="issue-time">2021-09-13</span>
</div>
<div className="issue-item" key={2}>
<img className="author-head" src={head2} />
<span className="issue-name">李刚</span>
<span className="issue-author">李刚</span>
<h3 className="issue-title ellipsis-1">Linux基金会发布《2021开源职业报告》</h3>
<p className="issue-content ellipsis-8">新冠疫情的大规模爆发对社会经济、人民生活各方面均造成较大影响，众多企业面临劳动用工、合同履约以及银行信贷三重危机。而今，世界各地经济正逐渐从新冠疫情常态化趋势下复苏，后疫情时代中雇佣模式的转变，对劳动关系领域带来了新挑战，这一变化与挑战在科技领域尤为凸显。当云原生技术的加速应用成为远程化工作的主流，使得相关信息化人才缺口在本次全球化疫情中更加恶化。
<p className="issue-content ellipsis-5">新冠疫情的大规模爆发对社会经济、人民生活各方面均造成较大影响，众多企业面临劳动用工、合同履约以及银行信贷三重危机。而今，世界各地经济正逐渐从新冠疫情常态化趋势下复苏，后疫情时代中雇佣模式的转变，对劳动关系领域带来了新挑战，这一变化与挑战在科技领域尤为凸显。当云原生技术的加速应用成为远程化工作的主流，使得相关信息化人才缺口在本次全球化疫情中更加恶化。
新冠疫情的大规模爆发对社会经济、人民生活各方面均造成较大影响，众多企业面临劳动用工、合同履约以及银行信贷三重危机。而今，世界各地经济正逐渐从新冠疫情常态化趋势下复苏，后疫情时代中雇佣模式的转变，对劳动关系领域带来了新挑战，这一变化与挑战在科技领域尤为凸显。当云原生技术的加速应用成为远程化工作的主流，使得相关信息化人才缺口在本次全球化疫情中更加恶化。</p>
<span className="issue-time">2021-09-13</span>
</div>
</Slider>
<Button className="homepage-btn" type="primary">参与交流</Button>
<Button className="homepage-btn" type="primary">参与交流 <i className="iconfont icon-gengduoicon"></i></Button>
</div>

53
src/home/SeventhSection/index.scss
View File

@ -3,59 +3,75 @@
text-align: center;
padding-top: 40px;
.seventh-main{
.seventh-main {
position: relative;
}
.clients{
.clients {
position: absolute;
width: 100%;
height: 500px;
left: 0;
bottom: 40px;
z-index: 10;
.client{
.client {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
}
.client:nth-child(1){
top:0;
.client:nth-child(1) {
top: 0;
left: 0;
animation: zoomin .9s infinite alternate;
animation: zoomin 0.9s infinite alternate;
}
.client:nth-child(2){
top:190px;
.client:nth-child(2) {
top: 190px;
left: -115px;
animation: zoomin 1.3s infinite alternate;
}
.client:nth-child(3){
.client:nth-child(3) {
left: 0;
bottom: 70px;
animation: zoomin 1.6s infinite alternate;
}
.client:nth-child(4){
.client:nth-child(4) {
top: 40px;
right: 0;
animation: zoomin 1.9s infinite alternate;
}
.client:nth-child(5){
.client:nth-child(5) {
right: -85px;
bottom: 135px;
animation: zoomin 2.1s infinite alternate;
}
.client:nth-child(6){
right: 240px;
bottom: 40px;
.client:nth-child(6) {
right: 220px;
bottom: 10px;
animation: zoomin 1.6s infinite alternate;
}
.icon-a-shuangyinhao12x {
position: absolute;
color: #ef7a30;
font-size: 36px !important ;
}
.start-icon {
top: 50px;
left: 280px;
transform: rotateY(180deg);
}
.end-icon {
bottom: 145px;
right: 290px;
}
}
.slick-slider {
margin: 40px auto 20px;
height: 480px;
background: url(../img/7-bg.png) no-repeat;
background-size: 804px 474px;
background-position: center;
}
.slick-list {
@ -72,16 +88,19 @@
margin: 0 auto;
}
.issue-author {
display: inline-block;
font-size: 18px;
font-weight: 500;
color: #ff7300;
line-height: 28px;
margin: 10px auto;
}
.issue-title {
font-size: 20px;
font-weight: 500;
color: #000870;
line-height: 28px;
margin-bottom: 20px;
}
.issue-content {
text-align: left;
@ -99,9 +118,13 @@
}
}
.homepage-btn {
margin-top: 50px;
}
@keyframes zoomin {
0% {
transform: scale(.9);
transform: scale(0.9);
}
100% {

2
src/home/SixthSection/index.jsx
View File

@ -73,7 +73,7 @@ function SixthSection({ sixth }) {
</div>
<Button className="homepage-btn" type="primary">我要参赛</Button>
<Button className="homepage-btn" type="primary">我要参赛 <i className="iconfont icon-gengduoicon"></i></Button>
<svg className="waves"
viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
<defs>

2
src/home/SixthSection/index.scss
View File

@ -67,6 +67,7 @@
font-size: 15px;
font-weight: 400;
line-height: 28px;
opacity: .8;
.des-item-title {
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
@ -164,6 +165,7 @@
.homepage-btn{
margin-top: 0;
background-color: #4F7DFF ;
}
.waves {

4
src/home/ThirdSection/index.scss
View File

@ -20,8 +20,8 @@
display: flex;
justify-content: space-around;
max-width: 100%;
min-height: 35vh;
margin: 40px auto;
// min-height: 35vh;
margin: 10vh auto;
}
.circle-item > h4 {

BIN
src/home/img/7-bg.png Executable file → Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 55 KiB

2
src/home/index.jsx
View File

@ -51,7 +51,7 @@ function HomePage(props) {
console.log("top:" + top);
// 第一个动效
if (top >= clientHeight - 100) {
if (top >= clientHeight - 300) {
setFirst(false);
} else {
setFirst(true);

14
src/home/index.scss
View File

@ -1,6 +1,5 @@
.homePage {
background: #fff;
font-family: PingFangSC-Medium, PingFang SC;
// 首页多个部分公共样式
@ -22,13 +21,13 @@
}
// 8行省略号
.ellipsis-8 {
.ellipsis-5 {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 8;
line-clamp: 8;
-webkit-line-clamp: 5;
line-clamp:5;
-webkit-box-orient: vertical;
}
@ -42,7 +41,12 @@
.homepage-btn {
width: 140px;
height: 56px;
margin-top: 40px;
font-size: 16px;
.icon-gengduoicon{
margin-left:5px;
color: #FFBF2D;
font-size: 16px !important;
}
}
.text-center {
text-align: center;