forked from Gitlink/forgeplus-react
首页需求更改
This commit is contained in:
caishi
parent
0c816805fb
commit
5982c0df96
|
|
@ -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>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,8 +32,10 @@ function Footnav() {
|
|||
</div> */}
|
||||
<div>
|
||||
<li>qq群</li>
|
||||
<div className="imgCon">
|
||||
<img src={qqImg} alt="qq群"/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 17 KiB |
|
|
@ -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: 320px;
|
||||
height: 130px;
|
||||
margin:15px 0px!important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&:nth-child(2n){
|
||||
margin:12px 0px 12px 30px!important;
|
||||
}
|
||||
&:nth-child(2n+1){
|
||||
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;
|
||||
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;
|
||||
&:nth-child(2n){
|
||||
margin:15px 0px 15px 40px!important;
|
||||
}
|
||||
&:nth-child(2n+1){
|
||||
margin:15px 40px 15px 0px!important;
|
||||
}
|
||||
a{
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue