update styles

This commit is contained in:
caishi 2022-01-20 11:50:30 +08:00
parent ea737f5b61
commit 4f9a03a1af
8 changed files with 85 additions and 77 deletions

View File

@ -3984,14 +3984,30 @@ html>body #ajax-indicator {
display: block; display: block;
height: 100%; height: 100%;
width: 100%; width: 100%;
color: #fff; color: #333;
font-size: 16px; font-size: 16px;
} }
.publicNav ul#header-nav li a {
color: #fff!important;
}
.publicNav .head-right i{
color: #fff!important;
}
.head-nav ul#header-nav li a:hover,.head-nav ul#header-nav li.active a { .head-nav ul#header-nav li a:hover,.head-nav ul#header-nav li.active a {
color: #5091FF; color: #5091FF;
} }
.head-nav ul#header-nav li.active a:after {
content: "";
width: 50%;
height: 2px;
background-color: #1484ef;
left: 50%;
margin-left: -25%;
bottom: 8px;
position: absolute;
}
.head-nav ul#header-nav li:last-child { .head-nav ul#header-nav li:last-child {
margin-right: 0px margin-right: 0px
} }

View File

@ -128,7 +128,7 @@ const Teaching = Loadable({
// }) // })
// 此处仅维护前端可能的一级路由,不用进行项目或者组织判断的字段。 // 此处仅维护前端可能的一级路由,不用进行项目或者组织判断的字段。
const keyWord = ["explore", "settings", "setting", "mulan", "wiki", "issues", "setting", "trending", "code", "projects", "pulls", "mine", "login", "register", "email", "export", "nopage", "404", "403", "500", "501", "search", "organize", "login", "register", "resetPassword", "aboutus","educoder"]; const keyWord = ["explore", "settings", "setting", "mulan", "wiki", "issues", "setting", "trending", "code", "projects", "pulls", "mine", "login", "register", "email", "export", "nopage", "404", "403", "500", "501", "search", "organize", "login", "register", "resetPassword", "aboutus","educoder","task","notice"];
class App extends Component { class App extends Component {
constructor(props) { constructor(props) {

View File

@ -196,10 +196,18 @@ class NewHeader extends Component {
matchpaths = (url) => { matchpaths = (url) => {
const { match } = this.props; const { match } = this.props;
const hostname = window.location.hostname;
const port = window.location.port;
const isDev = window.location.port == 3007; const isDev = window.location.port == 3007;
const isdev2= isDev ?'https://testforgeplus.trustie.net':`https://${window.location.hostname}`; let isdev2= isDev ?'http://192.168.1.40:3000':`http://${hostname}`;
let str = ""; let str = "";
if(url.indexOf("http")>-1){ if(url.indexOf("http")>-1){
if(url.indexOf("https")>-1){
isdev2 = `https://${hostname}`;
}
if(port){
isdev2 += `:${port}`;
}
str = isdev2+match.path; str = isdev2+match.path;
}else{ }else{
str = match.path; str = match.path;
@ -311,7 +319,7 @@ class NewHeader extends Component {
: :
"" ""
} }
<div className="head-nav pr" id={"head-navpre1"}> <div id={"head-navpre1"} className={"head-nav pr"}>
{ {
settings && settings.navbar && settings.navbar.length > 0 ? settings && settings.navbar && settings.navbar.length > 0 ?
<ul id="header-nav"> <ul id="header-nav">
@ -352,7 +360,8 @@ class NewHeader extends Component {
{ {
current_user && (current_user.main_site || current_user.login) && (settings && settings.add && settings.add.length>0)? current_user && (current_user.main_site || current_user.login) && (settings && settings.add && settings.add.length>0)?
<Dropdown overlay={this.addMenu(settings && settings.add)} placement="bottomRight"> <Dropdown overlay={this.addMenu(settings && settings.add)} placement="bottomRight">
<img src={require(`./img/add.png`)} alt="" width="16px" className="mr15 ml30"/> {/* <img src={require(`./img/add.png`)} alt="" width="16px" className="mr15 ml30"/> */}
<i className="iconfont icon-tianjiafangda ml15 mr15 color-grey-6 font-18"></i>
</Dropdown>:"" </Dropdown>:""
} }
@ -365,9 +374,10 @@ class NewHeader extends Component {
onVisibleChange={this.handleVisibleChange} onVisibleChange={this.handleVisibleChange}
destroyTooltipOnHide destroyTooltipOnHide
> >
<Link to={"/settings/notice"} className="message-icon"> <Link to={"/settings/notice"} className="message-icon mt3">
{current_user && <Badge count={current_user.message_unread_total}> {current_user && <Badge count={current_user.message_unread_total}>
<img src={require(`./img/ring.png`)} alt="" width="16px" className="ml15 mr15"/> {/* <img src={require(`./img/ring.png`)} alt="" width="16px" className="ml15 mr15"/> */}
<i className="iconfont icon-xiaoxilingdang ml15 mr15 color-grey-6 font-18"></i>
</Badge>} </Badge>}
</Link> </Link>
</Popover> </Popover>
@ -376,13 +386,13 @@ class NewHeader extends Component {
</div> </div>
{!user || (user && !user.login) ? {!user || (user && !user.login) ?
<span className="font-15 ml30"> <span className="font-15 ml30">
<a onClick={() => this.educoderlogin()} className="mr5 color-white">登录</a> <a onClick={() => this.educoderlogin()} className="mr5 color-grey-6">登录</a>
{ {
(settings && settings.common && settings.common.register) ? (settings && settings.common && settings.common.register) ?
publicNav ? publicNav ?
<a href='/register' className="regBtn">立即注册</a> <a href='/register' className="regBtn">立即注册</a>
: :
<span><em className="vertical-line"></em><a className="ml5 color-white" href='/register'></a></span> <span><em className="vertical-line"></em><a className="ml5 color-grey-6" href='/register'></a></span>
:"" :""
} }
</span> </span>

View File

@ -3,10 +3,10 @@ import { Menu, Input , Spin, Pagination , Popover , Affix } from 'antd';
import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css"; import "slick-carousel/slick/slick-theme.css";
import '../css/index.scss' import '../css/index.scss';
import './list.scss'; import './list.scss';
import './Index.scss'; import './Index.scss';
import ListItem from './IndexItem' import ListItem from './IndexItem';
import axios from 'axios'; import axios from 'axios';
import img_new from '../Images/new.png'; import img_new from '../Images/new.png';
import img_array from '../Images/array.png'; import img_array from '../Images/array.png';
@ -122,7 +122,7 @@ class Index extends Component {
}).catch((error) => { }) }).catch((error) => { })
} }
// 获取类型 // 获取语言
getType = () => { getType = () => {
const url = `/projects/group_type_list.json`; const url = `/projects/group_type_list.json`;
axios.get(url).then((result) => { axios.get(url).then((result) => {
@ -131,16 +131,16 @@ class Index extends Component {
name:'全部语言', name:'全部语言',
id:0, id:0,
}); });
this.setTypeList(result.data, 0) this.setTypeList(result.data, undefined)
} }
}).catch((error) => { }) }).catch((error) => { })
} }
// 设置语言list
setTypeList = (list, active_type) => { setTypeList = (list, active_type) => {
this.setState({ this.setState({
typeList: list.map((item, key) => { typeList: list.map((item, key) => {
return ( return (
<li key={key} className={ parseInt(active_type) === item.id ? 'active' : ''} onClick={() => this.changeType(`${item.id}`, list)}> <li key={key} className={ (active_type && parseInt(active_type) === item.id) ? 'active' : ''} onClick={() => this.changeType(`${item.id}`, list)}>
<p> <p>
<span className="font-16">{item.name}</span> <span className="font-16">{item.name}</span>
<span className="color-blue">{item.projects_count}</span> <span className="color-blue">{item.projects_count}</span>
@ -151,20 +151,20 @@ class Index extends Component {
}) })
} }
// 切换语言类型 // 切换语言
changeType = (id, list) => { changeType = (id, list) => {
this.setState({ this.setState({
isSpin: true, isSpin: true,
search: undefined, search: undefined,
category_id: undefined, languageId: id,
},()=>{ },()=>{
this.setTypeList(list, id) this.setTypeList(list, id)
const { page , sort , languageId } = this.state; const { page , sort , category_id } = this.state;
this.getListData(page , undefined, sort, id , languageId); this.getListData(page , undefined, sort, category_id , id);
}) })
} }
// 获取类型 // 获取项目类别
getCategory = () => { getCategory = () => {
const url = `/project_categories/group_list.json`; const url = `/project_categories/group_list.json`;
@ -174,24 +174,35 @@ class Index extends Component {
name:'全部类别', name:'全部类别',
id:0, id:0,
}); });
// this.setCategoryList(result.data, 0); this.setCategoryList(result.data, undefined);
} }
}).catch((error) => { }) }).catch((error) => { })
} }
// 设置项目类别list
setCategoryList = (list) => { setCategoryList = (list,active_id) => {
this.setState({ this.setState({
CategoryList: list categoryList: list.map((item, key) => {
return (
<li key={key} className={active_id && 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>
</p>
</li>
)
})
}) })
} }
// 切换项目类别category_id
changeCategory = (id, list) => { changeCategory = (id, list) => {
this.setState({ this.setState({
category_id: id, category_id: id,
page: 1 page: 1,
search:undefined
},()=>{ },()=>{
const { sort, project_type , languageId } = this.state; this.setCategoryList(list, id)
this.getListData(1 , undefined, sort, project_type, id , languageId); const { sort , languageId } = this.state;
this.getListData(1 , undefined, sort, id , languageId);
}); });
} }
@ -278,27 +289,6 @@ class Index extends Component {
isSpin, total, search, limit, page, typeList, categoryList , isSpin, total, search, limit, page, typeList, categoryList ,
recommendOriList , CategoryList , category_id } = this.state; recommendOriList , CategoryList , category_id } = this.state;
// const setting={
// dots: true,
// infinite: true,
// speed: 500,
// slidesToShow: 5,
// slidesToScroll: 5,
// autoplay:false,
// arrows:false,
// adaptiveHeight:true
// }
// const settings={
// dots: true,
// infinite: true,
// speed: 500,
// slidesToShow: 6,
// slidesToScroll: 6,
// autoplay:false,
// arrows:false,
// adaptiveHeight:true
// }
return ( return (
<div> <div>
{/* <p className="t_project_banner"> {/* <p className="t_project_banner">
@ -350,20 +340,10 @@ class Index extends Component {
<div className="list-affix">{typeList}</div> <div className="list-affix">{typeList}</div>
</ul> </ul>
<ul className="list-l-Menu"> <ul className="list-l-Menu">
<li className="MenuTitle"><i className="iconfont icon-xiangmuleibie color-grey-9 font-15 mr5"></i></li> <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>
CategoryList && CategoryList.length > 0 ? CategoryList.map((item,key)=>{ </li>
return( <div className="list-affix">{categoryList}</div>
<li key={key} className={category_id && parseInt(category_id) === item.id ? 'active' : ''} onClick={() => this.changeCategory(`${item.id}`)}>
<p>
<span className="font-16">{item.name}</span>
<span className="color-blue">{item.projects_count}</span>
</p>
</li>
)
})
:""
}
</ul> </ul>
</div> </div>
</Affix> </Affix>

View File

@ -522,4 +522,5 @@
margin-left: 0px; margin-left: 0px;
} }
} }
} }

View File

@ -222,22 +222,22 @@ form{
} }
} }
.list-l-Menu{ .list-l-Menu{
margin-bottom: 12px; margin-bottom: 12px!important;
border-radius:2px; border-radius:2px;
background-color: #fff; background-color: #fff;
box-shadow: 0px 0px 2px rgba(0,0,0,0.2); box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
.list-affix{ .list-affix{
min-height: 20px; min-height: 20px;
max-height: 240px; max-height: 248px;
overflow-y: auto; overflow-y: auto;
} }
&>li{ li{
font-size: 1rem; font-size: 1rem;
padding:0px 0px 0px 20px; padding:0px 0px 0px 20px;
box-sizing: border-box; box-sizing: border-box;
color: #333; color: #333;
position: relative; position: relative;
& > p{ p{
height: 62px; height: 62px;
line-height: 62px; line-height: 62px;
width: 100%; width: 100%;
@ -261,10 +261,11 @@ form{
background-color: #fafafa; background-color: #fafafa;
} }
} }
& li.active{
li.active{
background-color: #fafafa; background-color: #fafafa;
} }
& li.active::before{ li.active::before{
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 15px; top: 15px;
@ -281,14 +282,13 @@ form{
line-height: 62px; line-height: 62px;
border-bottom: 1px solid #E0E0E0; border-bottom: 1px solid #E0E0E0;
font-weight: 400; font-weight: 400;
padding-left: 20px;
span{ span{
display: block; display: block;
width: 50%; width: 50%;
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
} }
span:hover{ span:hover{
color: #1484EF; color: #1484EF;

View File

@ -25,12 +25,13 @@ body>.-task-title {
.newHeaders{ .newHeaders{
max-width: unset; max-width: unset;
width: 100%; width: 100%;
height:58px; height:70px;
min-width: 1200px; min-width: 1200px;
z-index: 1000; z-index: 1000;
position: fixed; position: fixed;
background: #1B2440; background: #fff;
color: #fff; color: #333;
box-shadow: 0 0 12px rgb(0 ,0 ,0,10%);
} }
.newHeaders.publicNav{ .newHeaders.publicNav{
position: absolute; position: absolute;

View File

@ -270,7 +270,7 @@ export function TPMIndexHOC(WrappedComponent, headFoot) {
size="large" tip={this._gLoadingTip || "加载中..."} size="large" tip={this._gLoadingTip || "加载中..."}
> >
<div className="newContainer newContainers"> <div className="newContainer newContainers">
{!publicNav && <div style={{height:"58px"}}></div> } {!publicNav && <div style={{height:"70px"}}></div> }
{ {
current_user && current_user &&
<WrappedComponent initCommonState={(user) => this.initCommonState(user)} <WrappedComponent initCommonState={(user) => this.initCommonState(user)}