首页需求更改

This commit is contained in:
caishi 2021-09-29 19:31:55 +08:00
parent 0c816805fb
commit 5982c0df96
6 changed files with 54 additions and 36 deletions

View File

@ -95,22 +95,22 @@ function FifthEdition() {
return(
<div id={"scrollBox1"}>
<div style={{width:340*list.length+"px"}}>
<ul className="fifthList" id="box1" style={{width:(340*list.length)/2+"px"}}>
<div style={{width:370*list.length+"px"}}>
<ul className="fifthList" id="box1" style={{width:(370*list.length)/2+"px"}}>
{
list && list.map((i,k)=>{
return(
<li><Link to={i.src}><img src={i.image_url} alt={i.name}/></Link></li>
<li><a href={i.src}><img src={i.image_url} alt={i.name}/></a></li>
)
})
}
</ul>
{list.length > 10 &&
<ul className="fifthList" id="box2" style={{width:(340*list.length)/2+"px"}}>
<ul className="fifthList" id="box2" style={{width:(370*list.length)/2+"px"}}>
{
list && list.map((i,k)=>{
return(
<li><Link to={i.src}><img src={i.image_url} alt={i.name}/></Link></li>
<li><a href={i.src}><img src={i.image_url} alt={i.name}/></a></li>
)
})
}

View File

@ -32,7 +32,9 @@ function Footnav() {
</div> */}
<div>
<li>qq群</li>
<img src={qqImg} alt="qq群"/>
<div className="imgCon">
<img src={qqImg} alt="qq群"/>
</div>
</div>
</li>
</ul>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 17 KiB

View File

@ -164,7 +164,7 @@ body{
top:0px;
height: 100%;
content: "";
transition: 1s;
transition: 3s;
transition-property: width;
}
&.slick-active::after{
@ -350,14 +350,14 @@ body{
margin-top: 28px;
}
p{
font-size: 18px;
font-weight: 500;
font-size: 20px;
color: #637497;
line-height: 36px;
margin-top: 50px;
margin-bottom: 0px!important;
span{
color: #1E1E1E;
color: #000;
font-weight: 500;
}
}
}
@ -458,14 +458,14 @@ body{
}
.highDoSubtitle{
color: #637497;
font-size: 18px;
font-weight: 500;
font-size: 20px;
line-height: 36px;
width: 878px;
max-width: 922px;
margin:30px auto 28px;
text-align: center;
span{
color: #1F1E1E;
color: #000;
font-weight: 500;
}
}
.highDoContent{
@ -501,7 +501,7 @@ body{
transition-delay: 1s;
}
.highDoBottondesc{
font-size: 18px;
font-size: 20px;
font-weight: 500;
color: #000000;
line-height: 39px
@ -586,12 +586,13 @@ body{
margin-bottom: 70px!important;
}
.halfsubTitle{
font-size: 18px;
font-size: 20px;
font-weight: 500;
line-height: 36px;
color: #1E1E1E;
color: #000;
span{
color: #637497;
font-weight: normal;
}
}
}
@ -626,14 +627,15 @@ body{
transition: 3s;
}
p{
max-width: 345px;
max-width: 422px;
text-align: left;
font-size: 18px;
font-weight: 500;
line-height: 32px;
color: #1E1E1E;
color: #000;
font-size: 20px;
span{
color: #637497;
font-weight: normal;
}
&:first-child{
margin-bottom: 55px!important;
@ -907,7 +909,7 @@ body{
margin-bottom: 54px;
}
#scrollBox1{
max-height: 300px;
max-height: 332px;
overflow: hidden;
margin: 35px 0px 0px;
width: 100%;
@ -916,30 +918,39 @@ body{
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 300px;
height: 332px;
width: 100%;
float: left;
li{
border-bottom: none;
width: 300px;
height: 120px;
margin:15px 20px!important;
background: #fff;
box-shadow: 0px 1px 10px 3px rgba(0, 0, 0, 0.06);
border-radius: 4px;
border: 2px solid #FFFFFF;
width: 320px;
height: 130px;
margin:15px 0px!important;
display: flex;
justify-content: center;
align-items: center;
&:nth-child(2n){
margin:15px 0px 15px 40px!important;
margin:12px 0px 12px 30px!important;
}
&:nth-child(2n+1){
margin:15px 40px 15px 0px!important;
margin:12px 30px 12px 0px!important;
}
&:hover a{
width: 100%;
height: 100%;
box-shadow: 0px 1px 15px 7px rgba(0, 0, 0, 0.08);
}
a{
width: 300px;
height: 120px;
background: #fff;
box-shadow: 0px 1px 10px 3px rgba(0, 0, 0, 0.06);
border-radius: 4px;
border: 2px solid #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
transition:.2s;
}
img{
max-width: 100%;
@ -1002,10 +1013,14 @@ body{
}
&.theline{
display: flex;
.imgCon{
padding:5px;
background-color: #fff;
border-radius: 3px;
}
img{
width: 80px;
height: 80px;
border-radius: 3px;
}
}
}

View File

@ -189,7 +189,7 @@ function SecondEdition({setValue}) {
<p className="halfTitle">多维度用户画像</p>
<p className="halfsubTitle"><span>实时采集和分析平台中的各类开源资源数<br/></span>搭建多维度用户画像评估系统</p>
</div>
<div style={{width:"820px",marginLeft:"40px"}}>
<div style={{width:"820px",marginLeft:"34px"}}>
<img src={ImgM4} alt="" width="820px" />
</div>
</div>

View File

@ -3,10 +3,11 @@ import Slider from 'react-slick';
let setting={
dots:true,
infinite: true,
speed: 1000,
speed: 3000,
slidesToShow: 1,
slidesToScroll: 1,
pauseOnDotsHover:true,
autoplaySpeed:0,
pauseOnFocus:true,
autoplay:true,
arrows:true,