forked from Gitlink/forgeplus-react
开源首页改版0.7
This commit is contained in:
parent
94f8f84456
commit
2d428e53f6
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 993 B |
|
|
@ -15,6 +15,10 @@ import CheckProfile from '../Component/ProfileModal/Profile';
|
|||
import Slider from 'react-slick';
|
||||
import left from './img/left.png';
|
||||
import right from './img/right.png';
|
||||
import explore1 from '../Images/explore1.png';
|
||||
import explore2 from '../Images/explore2.png';
|
||||
import explore9 from '../Images/explore9.png';
|
||||
import explore10 from '../Images/explore10.png';
|
||||
import { getImageUrl } from '../../managements/common/utils';
|
||||
|
||||
const Search = Input.Search;
|
||||
|
|
@ -152,7 +156,7 @@ class Index extends Component {
|
|||
<li key={key} className={ parseInt(active_type) === item.id ? 'active' : ''} onClick={() => this.changeType(`${item.id}`, list)}>
|
||||
<p>
|
||||
<span className="font-16">{item.name}</span>
|
||||
<span className="color-blue">{item.projects_count}</span>
|
||||
{/* <span className="color-blue">{item.projects_count}</span> */}
|
||||
</p>
|
||||
</li>
|
||||
)
|
||||
|
|
@ -195,7 +199,7 @@ class Index extends Component {
|
|||
<li key={key} className={parseInt(active_id) === item.id ? 'active' : ''} onClick={() => this.changeCategory(`${item.id}`, list)}>
|
||||
<p>
|
||||
<span className="font-16">{item.name}</span>
|
||||
<span className="color-blue">{item.projects_count}</span>
|
||||
{/* <span className="color-blue">{item.projects_count}</span> */}
|
||||
</p>
|
||||
</li>
|
||||
)
|
||||
|
|
@ -313,7 +317,8 @@ class Index extends Component {
|
|||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{backgroundColor: '#f5f7fa'}}>
|
||||
{/* banner图 */}
|
||||
{bannerList ? bannerList.length === 1 ? bannerList[0].url ? <a href={bannerList[0].url} target={'_blank'}><img alt={bannerList[0].title} src={bannerList[0].image ? `${ mygetHelmetapi && mygetHelmetapi.current_main_site_url }${bannerList[0].image}` : banner} width='100%' height='100%' className='imgBox'/></a> :
|
||||
<img alt={bannerList[0].title} src={bannerList[0].image ? `${ mygetHelmetapi && mygetHelmetapi.current_main_site_url }${bannerList[0].image}` : banner} width='100%' height='100%' className='imgBox'/> :
|
||||
<Slider {...settings} className="projectBannerBox">
|
||||
|
|
@ -327,57 +332,38 @@ class Index extends Component {
|
|||
})}
|
||||
</Slider>: <img src={banner} width="100%" alt=""/>}
|
||||
{bannerList && bannerList.length === 0 && <img src={banner} width="100%" alt=""/>}
|
||||
<div className="ProjectListIndex">
|
||||
{/* 项目列表 */}
|
||||
<div className="ProjectListIndex exploreBox">
|
||||
<Affix className="affix-list-left" offsetTop={90}>
|
||||
<div className="affix-list-content">
|
||||
<ul className="list-l-Menu">
|
||||
<li
|
||||
className="MenuTitle"
|
||||
onClick={() => {
|
||||
this.getType();
|
||||
this.changeType(undefined, this.state.typeList);
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<i className="iconfont icon-bianchengyuyan color-grey-9 font-15 mr5"></i>
|
||||
语言
|
||||
</span>
|
||||
<li className="MenuTitle">
|
||||
<img src={explore1} alt="" width={18} className='mr5'/>语言
|
||||
</li>
|
||||
<div className="list-affix">{typeList}</div>
|
||||
</ul>
|
||||
<ul className="list-l-Menu">
|
||||
<li
|
||||
className="MenuTitle"
|
||||
onClick={() => {
|
||||
this.getCategory();
|
||||
this.changeCategory(undefined, this.state.categoryList);
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<i className="iconfont icon-xiangmuleibie color-grey-9 font-15 mr5"></i>
|
||||
项目类别
|
||||
</span>
|
||||
<li className="MenuTitle">
|
||||
<img src={explore2} alt="" width={18} className='mr5'/>项目类别
|
||||
</li>
|
||||
<div className="list-affix">{categoryList}</div>
|
||||
</ul>
|
||||
</div>
|
||||
</Affix>
|
||||
|
||||
<div
|
||||
className="list-right boxShandow radius-2"
|
||||
style={{ padding: 0 }}
|
||||
>
|
||||
<div className="list-right boxShandow radius-2" style={{ padding: 0 }}>
|
||||
<Spin spinning={isSpin}>
|
||||
<div className="list-r-operation">
|
||||
<div>
|
||||
<Search
|
||||
placeholder="输入项目名称关键字进行搜索"
|
||||
enterButton="搜索"
|
||||
enterButton={<img src={explore9} alt="" width={20}/>}
|
||||
size="large"
|
||||
onSearch={this.searchFun}
|
||||
className="list-r-Search"
|
||||
className="list-r-Search searchBox"
|
||||
value={search}
|
||||
onChange={this.changeSearchValue}
|
||||
allowClear
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -389,10 +375,8 @@ class Index extends Component {
|
|||
placement="bottom"
|
||||
className="mr50"
|
||||
>
|
||||
<a className="ant-dropdown-link">
|
||||
<span className="color-blue font-16">
|
||||
<img src={img_new} alt="" width="13px" /> 新建
|
||||
</span>
|
||||
<a className="ant-dropdown-link font-15 actionBtnBox">
|
||||
<i className='iconfont icon-jiashang1 mr5'></i>新建
|
||||
</a>
|
||||
</Popover>
|
||||
)}
|
||||
|
|
@ -402,10 +386,8 @@ class Index extends Component {
|
|||
trigger={["click"]}
|
||||
placement="bottom"
|
||||
>
|
||||
<a className="ant-dropdown-link">
|
||||
<span className="color-blue font-16">
|
||||
排序 <img src={img_array} alt="" width="10px" />
|
||||
</span>
|
||||
<a className="ant-dropdown-link font-15 actionBtnBox top">
|
||||
排序 <i className='iconfont icon-sanjiaoxing-down ml5'></i>
|
||||
</a>
|
||||
</Popover>
|
||||
</div>
|
||||
|
|
@ -419,6 +401,12 @@ class Index extends Component {
|
|||
{this.pagination(total, limit, page)}
|
||||
</Spin>
|
||||
</div>
|
||||
<div style={{width: '320px'}} className='ml20'>
|
||||
{/* 帮助手册 */}
|
||||
<div className='helpText font-28'>
|
||||
<img src={explore10} alt="" class="helpImg1"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -73,11 +73,11 @@ class IndexItem extends Component {
|
|||
{
|
||||
item.platform === "educoder" ?
|
||||
<a href="javascript:void(0)" style={{ cursor: "default" }} className="show-user-link">
|
||||
<img className="p-r-photo" alt="" src={item.author && item.author.image_url} ></img>
|
||||
<img className="p-r-photo explore" alt="" src={item.author && item.author.image_url} ></img>
|
||||
</a>
|
||||
:
|
||||
<Link to={`/${item.author && item.author.login}`} className="show-user-link">
|
||||
<img className="p-r-photo" alt="" src={getImageUrl(`/${item.author && item.author.image_url}`)} ></img>
|
||||
<img className="p-r-photo explore" alt="" src={getImageUrl(`/${item.author && item.author.image_url}`)} ></img>
|
||||
</Link>
|
||||
}
|
||||
<div className="p-r-Infos">
|
||||
|
|
@ -101,7 +101,7 @@ class IndexItem extends Component {
|
|||
</Tooltip>:""
|
||||
}
|
||||
</AlignCenter> */}
|
||||
<a onClick={() => this.projectHref(`/${item.author.login}/${item.identifier}`, item.user_apply_signatures, item.id, item.is_secret, item.author.login, item.is_member)} className="hide-1 color-grey-3 font-18 task-hide fwt-500 " style={{ whiteSpace: "wrap", display: 'flex', width: 400 }}>
|
||||
<a onClick={() => this.projectHref(`/${item.author.login}/${item.identifier}`, item.user_apply_signatures, item.id, item.is_secret, item.author.login, item.is_member)} className="hide-1 font-16 task-hide" style={{ whiteSpace: "wrap", display: 'flex', flex: 1, color:'#232a39'}}>
|
||||
{item.author.name}/{item.name}
|
||||
{
|
||||
item.forked_from_project_id ?
|
||||
|
|
@ -123,19 +123,18 @@ class IndexItem extends Component {
|
|||
</a>
|
||||
<span className="p-r-tags">
|
||||
<span className="pariseTag">
|
||||
<img src={img_parise} alt="" className="pariseImg" />赞 {item.praises_count}
|
||||
<i className='iconfont icon-morendianzan_icon font-14 mr3'></i>赞 {item.praises_count}
|
||||
</span>
|
||||
<span>
|
||||
<i className="iconfont icon-fork mr3 font-16" style={{ color: "#1B8FFF" }} />fork {item.forked_count}
|
||||
<i className="iconfont icon-fork mr3 font-16"/>fork {item.forked_count}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<p className="break_word task-hide-2 mt10" style={{ maxHeight: "44px", lineHeight: "22px" }}>{item.description}</p>
|
||||
|
||||
<p className="break_word task-hide-2 mt10" style={{ maxHeight: "44px", lineHeight: "22px", color: '#525561'}}>{item.description}</p>
|
||||
<div className="p-r-about">
|
||||
<span className="p-r-detail">
|
||||
{item.last_update_time ? <span><label>更新于</label>{item.time_ago}</span> : ""}
|
||||
{item.language && item.language.id ? <span className="color-grey-3">{item.language.name}</span> : ""}
|
||||
<span className="p-r-detail font-13">
|
||||
{item.last_update_time ? <span><i className='iconfont icon-shijianicon font-13 mr3'/>更新于{item.time_ago}</span> : ""}
|
||||
{item.language && item.language.id ? <span>{item.language.name}</span> : ""}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,37 @@
|
|||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap:wrap;
|
||||
&.exploreBox{
|
||||
flex-wrap: nowrap;
|
||||
.actionBtnBox{
|
||||
color: #2a3ee9;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
&.top{
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
.searchBox .ant-input{
|
||||
padding-left: 16px;
|
||||
height: 36px;
|
||||
border: 1px solid #ffffff;
|
||||
background-color: #f8fbff !important;
|
||||
}
|
||||
.searchBox .ant-input-search-button{
|
||||
height: 36px !important;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.helpText{
|
||||
height:100px;
|
||||
background-image:linear-gradient(131.52deg,#2a3ee9 0%,#428cff 46.02%,#6479ff 100%);
|
||||
border:2px solid #ffffff;
|
||||
.helpImg1{
|
||||
width: 96%;
|
||||
margin: 1.5% 2.1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-left{
|
||||
width: 26%;
|
||||
|
|
@ -19,13 +50,10 @@
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
.affix-list-left{
|
||||
width: 26%;
|
||||
width:200px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.affix-list-content{
|
||||
padding-right:20px;
|
||||
}
|
||||
.list-left > div{
|
||||
border:1px solid #eee;
|
||||
}
|
||||
|
|
@ -61,8 +89,7 @@
|
|||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding:25px 30px;
|
||||
border-bottom: 1px solid #E0E0E0;
|
||||
padding: 15px 23px 0;
|
||||
}
|
||||
.list-r-Search{
|
||||
width: 400px;
|
||||
|
|
@ -100,12 +127,13 @@
|
|||
}
|
||||
.p-r-Item{
|
||||
display: flex;
|
||||
border-bottom:1px solid rgba(238,238,238,1);
|
||||
padding:22px 0px;
|
||||
justify-content: flex-start;
|
||||
padding-top: 22px;
|
||||
}
|
||||
.boxShandow{
|
||||
box-shadow:0px 2px 20px 10px rgba(0,0,0,0.03);
|
||||
flex: 1;
|
||||
background-image:linear-gradient(180deg,#f3f5f8 0%,#ffffff 100%);
|
||||
box-shadow:8px 6px 18px rgba(171, 202, 255, 0.24) inset;
|
||||
}
|
||||
.p-r-photo{
|
||||
width: 60px;
|
||||
|
|
@ -113,10 +141,17 @@
|
|||
border-radius: 50%;
|
||||
margin-right: 22px;
|
||||
margin-top: 8px;
|
||||
&.explore{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.p-r-Infos{
|
||||
flex: 1;
|
||||
width: 0;
|
||||
padding-bottom: 19px;
|
||||
border-bottom: 1px dashed #cccfd6;
|
||||
}
|
||||
.p-r-name{
|
||||
display: flex;
|
||||
|
|
@ -166,16 +201,16 @@
|
|||
margin-left: 15px;
|
||||
padding:0px 10px;
|
||||
border-radius:15px;
|
||||
background: #EBF4FE;
|
||||
color: #333;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
background: #e3ebff;
|
||||
color:#656977;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
}
|
||||
.p-r-tags > span.pariseTag{
|
||||
background: #FFF3DC;
|
||||
background: rgba(223, 115, 20, 0.08);
|
||||
}
|
||||
.p-r-tags.large > span >label{
|
||||
padding:0px 12px;
|
||||
|
|
@ -207,10 +242,7 @@
|
|||
}
|
||||
.p-r-detail > span{
|
||||
margin-right: 22px;
|
||||
color: #888;
|
||||
}
|
||||
.p-r-detail > span > label{
|
||||
color: #999;
|
||||
color:#9b9eaa;
|
||||
}
|
||||
|
||||
.p-r-about{
|
||||
|
|
@ -218,7 +250,7 @@
|
|||
justify-content: space-between;
|
||||
flex-wrap: nowrap;
|
||||
margin-top: 8px;
|
||||
color: #666;
|
||||
color:#9b9eaa;
|
||||
}
|
||||
.spincontent{
|
||||
height:400px;
|
||||
|
|
|
|||
|
|
@ -63,6 +63,7 @@ ul,ol,dl{
|
|||
display: inline-block;
|
||||
}
|
||||
.ProjectListIndex{
|
||||
background-color:#f5f7fa;
|
||||
.ant-affix{
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -228,26 +229,34 @@ form{
|
|||
}
|
||||
}
|
||||
.list-l-Menu{
|
||||
margin-bottom: 12px!important;
|
||||
border-radius:2px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
|
||||
margin-bottom: 35px!important;
|
||||
background-image:linear-gradient(180deg,#f4f5f8 0%,#fbfcfd 100%);
|
||||
border:2px solid #ffffff;
|
||||
.list-affix{
|
||||
min-height: 20px;
|
||||
max-height: 308px;
|
||||
max-height: 285px;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar-thumb{
|
||||
background-color:#e6edf9;
|
||||
box-shadow: none
|
||||
}
|
||||
&::-webkit-scrollbar-track{
|
||||
display: none;
|
||||
}
|
||||
&::-webkit-scrollbar{
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
li{
|
||||
font-size: 1rem;
|
||||
padding:0px 0px 0px 20px;
|
||||
box-sizing: border-box;
|
||||
color: #333;
|
||||
color:#4c5b76;
|
||||
position: relative;
|
||||
p{
|
||||
height: 62px;
|
||||
line-height: 62px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
|
|
@ -256,39 +265,38 @@ form{
|
|||
a{
|
||||
width:100%;
|
||||
}
|
||||
& span:last-child{
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
&:last-child > p{
|
||||
border-bottom: none;
|
||||
}
|
||||
&:not(.MenuTitle):hover{
|
||||
background-color: #fafafa;
|
||||
&:not(.MenuTitle):not(.active):hover{
|
||||
background-color: rgba(225, 225, 225, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
li.active{
|
||||
background-color: #fafafa;
|
||||
background-color: rgba(70, 106, 255, 0.09);
|
||||
color:#2a3ee9;
|
||||
}
|
||||
li.active::before{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 15px;
|
||||
top: 10px;
|
||||
width: 6px;
|
||||
content: '';
|
||||
height: 33px;
|
||||
height: 29px;
|
||||
background: #4154f1;
|
||||
}
|
||||
.MenuTitle{
|
||||
font-size: 16px;
|
||||
font-size: 17px;
|
||||
background-size: 100% 100%;
|
||||
color: #333!important;
|
||||
height: 62px;
|
||||
line-height: 62px;
|
||||
border-bottom: 1px solid #E0E0E0;
|
||||
color:#000000;
|
||||
height: 71px;
|
||||
line-height: 48px;
|
||||
font-weight: 400;
|
||||
padding-left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span{
|
||||
display: block;
|
||||
width: 50%;
|
||||
|
|
@ -297,7 +305,6 @@ form{
|
|||
}
|
||||
span:hover{
|
||||
color: #4154f1;
|
||||
|
||||
.iconfont{
|
||||
color: #4154f1 !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue