项目列表:banner部分样式版本更新

This commit is contained in:
caishi 2021-07-05 17:14:31 +08:00
parent a8981c48f3
commit 4979d30a8a
3 changed files with 65 additions and 8 deletions

BIN
src/forge/Images/banner.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 212 KiB

View File

@ -1,6 +1,6 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Menu, Input , Spin, Pagination , Popover , Select } from 'antd';
import { Menu, Input , Spin, Pagination , Popover , Select , Button } from 'antd';
import { getImageUrl } from 'educoder';
import '../css/index.scss'
import './list.css';
@ -9,7 +9,8 @@ import ListItem from './IndexItem'
import axios from 'axios';
import img_new from '../Images/new.png';
import img_array from '../Images/array.png';
import banner from '../Images/banner_list.jpg';
import banner from '../Images/banner.png';
import AddProjectModal from '../Head/AddProjectModal';
const Search = Input.Search;
class Index extends Component {
@ -260,9 +261,24 @@ class Index extends Component {
return (
<div>
<p className="t_project_banner">
<img src={banner} width="100%" alt=""/>
</p>
<div className="subjectBanner">
<img src={banner} alt=""/>
<div className="bannerBox">
<div class="subjectleft">
<span>开源社区</span>
<span>面向高校的教学开源</span>
</div>
<Button type={"primary"} size={"large"}>
<Link to={`/projects/deposit/new`}>新建项目</Link>
</Button>
<Button type={"primary"} size={"large"}>
<AddProjectModal showNotification={this.props.showNotification}/>
</Button>
<Button type={"primary"} size={"large"} style={{backgroundColor:"rgb(47, 163, 79)",borderColor:"rgb(47, 163, 79)"}}>
<a href={`https://data.educoder.net/api/attachments/1955244?disposition=inline`} target="_blank">新手指引</a>
</Button>
</div>
</div>
{
recommendList && recommendList.length>0 &&
<div className="recommandProjects">

View File

@ -1,10 +1,51 @@
.lineH2{line-height:2}
.t_project_banner {
/* height: 260px;
background: url(../Images/banner_list.jpg) no-repeat center; */
.subjectBanner {
height: 160px;
position: relative;
overflow: hidden;
background-color: #050d34;
}
.subjectleft{
margin-top: 40px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
.bannerBox{
width: 1200px;
position: absolute;
z-index: 2;
left: 50%;
top: 0;
transform: translateX(-50%);
}
.subjectleft span:first-child{
width: 140px;
height: 30px;
font-size: 30px;
font-weight: 600;
color: #fff;
line-height: 30px;
letter-spacing: 4px;
}
.subjectleft span:last-child{
height: 16px;
font-size: 16px;
color: #fff;
line-height: 16px;
letter-spacing: 4px;
margin-left: 16px;
}
.bannerBox .ant-btn{
margin-top: 30px;
height: 40px;
font-size: 16px;
width: 120px;
border-radius: 4px;
margin-right: 40px;
}
.ProjectListIndex{
width: 1200px;
margin:20px auto;