Gitlink
/
forgeplus-react
39
0
Fork 30
Code Issues Pull Requests Releases 1 Wiki Activity

为首页定制化改造头部

This commit is contained in:
何童崇 2021-11-10 14:30:48 +08:00
parent 14e4dc7d9e
commit dc6cfc342e
6 changed files with 104 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -290,7 +290,7 @@ class App extends Component {
<Route exact path="/" <Route exact path="/"
render={ render={
(props) => ( (props) => (
<HomePage /> <HomePage {...props} {...this.props} {...this.state}/>
// <Projects {...this.props} {...props} {...this.state}></Projects> // <Projects {...this.props} {...props} {...this.state}></Projects>
) )
} }

9
src/common/UrlTool.js
View File

@ -34,6 +34,15 @@ export function getImage(path) {
} }
} }
export function getLogoImageUrl(path) {
const local = 'http://117.50.100.12:49999';
if (isDev) {
return `${local}/${path}`
}
return `/${path}`;
}
export function getcdnImageUrl(path) { export function getcdnImageUrl(path) {
// https://www.educoder.net // https://www.educoder.net
// https://testbdweb.trustie.net // https://testbdweb.trustie.net

2
src/common/educoder.js
View File

@ -6,7 +6,7 @@ export {
getUploadLogoActionUrl as getUploadLogoActionUrl, getUploadLogoActionUrl as getUploadLogoActionUrl,
getImageUrl as getImageUrl,getImage as getImage, getmyUrl as getmyUrl, getRandomNumber as getRandomNumber, getUrl as getUrl, publicSearchs as publicSearchs, getRandomcode as getRandomcode, getUrlmys as getUrlmys, getUrl2 as getUrl2, setImagesUrl as setImagesUrl getImageUrl as getImageUrl,getImage as getImage, getmyUrl as getmyUrl, getRandomNumber as getRandomNumber, getUrl as getUrl, publicSearchs as publicSearchs, getRandomcode as getRandomcode, getUrlmys as getUrlmys, getUrl2 as getUrl2, setImagesUrl as setImagesUrl
, getUploadActionUrl as getUploadActionUrl, getUploadActionUrltwo as getUploadActionUrltwo, getUploadActionUrlthree as getUploadActionUrlthree, getUploadActionUrlOfAuth as getUploadActionUrlOfAuth , getUploadActionUrl as getUploadActionUrl, getUploadActionUrltwo as getUploadActionUrltwo, getUploadActionUrlthree as getUploadActionUrlthree, getUploadActionUrlOfAuth as getUploadActionUrlOfAuth
, getTaskUrlById as getTaskUrlById, TEST_HOST, htmlEncode as htmlEncode, getupload_git_file as getupload_git_file, getcdnImageUrl as getcdnImageUrl , getTaskUrlById as getTaskUrlById, TEST_HOST, htmlEncode as htmlEncode, getupload_git_file as getupload_git_file, getcdnImageUrl as getcdnImageUrl,getLogoImageUrl as getLogoImageUrl
} from './UrlTool'; } from './UrlTool';
export { setmiyah as setmiyah } from './Component'; export { setmiyah as setmiyah } from './Component';

16
src/home/index.jsx
View File

@ -1,11 +1,16 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import NewSlide from "./NewSlide"; import NewSlide from "./NewSlide";
import { TPMIndexHOC } from '../modules/tpm/TPMIndexHOC';
import './index.scss'; import './index.scss';
function HomePage() { function HomePage(props) {
return ( return (
<div> <div className="homePage">
<div className="topEdition">
</div>
<div className="waves-header"> <div className="waves-header">
<svg className="waves" <svg className="waves"
viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto"> viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
@ -14,8 +19,8 @@ function HomePage() {
</defs> </defs>
<g className="parallax"> <g className="parallax">
<use xlinkHref="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" /> <use xlinkHref="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
<use xlinkHref="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" /> {/* <use xlinkHref="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" /> */}
<use xlinkHref="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" /> <use xlinkHref="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.4)" />
<use xlinkHref="#gentle-wave" x="48" y="7" fill="#fff" /> <use xlinkHref="#gentle-wave" x="48" y="7" fill="#fff" />
</g> </g>
</svg> </svg>
@ -27,5 +32,4 @@ function HomePage() {
) )
} }
export default TPMIndexHOC(HomePage);
export default HomePage;

141
src/modules/tpm/NewHeader.js
View File

@ -1,7 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import AccountProfile from "../user/AccountProfile"; import AccountProfile from "../user/AccountProfile";
import { getImageUrl } from 'educoder' import { getImageUrl,getLogoImageUrl } from 'educoder'
import axios from 'axios'; import axios from 'axios';
import { Modal, Input, message, notification } from 'antd'; import { Modal, Input, message, notification } from 'antd';
@ -586,6 +586,8 @@ class NewHeader extends Component {
return true return true
} else if (url.indexOf('users') > -1 && match.path.indexOf('users') > -1) { } else if (url.indexOf('users') > -1 && match.path.indexOf('users') > -1) {
return true return true
} else if (['http://117.50.100.12:8080','https://osredm.com'].includes(url) && match.path === '/') {
return true
} else { } else {
return false return false
} }
@ -618,74 +620,79 @@ class NewHeader extends Component {
mygetHelmetapi2, mygetHelmetapi2,
goshowqqgtounp, goshowqqgtounp,
} = this.state; } = this.state;
/*用户名称 用户头像url*/
let activeIndex = false;
let activeForums = false;
let activeShixuns = false;
let activePaths = false;
let coursestype = false;
let activePackages = false;
let activeMoopCases = false;
let activeCompetitions = false;
if (match.path === '/forums') { let activeIndex = '';
activeForums = true; if(match.path === '/'){
} else if (match.path.startsWith('/shixuns')) {
activeShixuns = true;
} else if (match.path.startsWith('/paths')) {
activePaths = true;
} else if (match.path.startsWith('/courses')) {
coursestype = true;
} else if (match.path.startsWith('/crowdsourcing')) {
activePackages = true;
} else if (match.path.startsWith('/moop_cases')) {
activeMoopCases = true;
} else if (match.path.startsWith('/competitions')) {
activeCompetitions = true;
} else {
activeIndex = true; activeIndex = true;
} }
let headtypes = '/'; /*用户名称 用户头像url*/
if (mygetHelmetapi2) { // let activeIndex = false;
if (mygetHelmetapi2.navbar) { // let activeForums = false;
if (mygetHelmetapi2.navbar.length > 0) { // let activeShixuns = false;
if (match.path === '/') { // let activePaths = false;
if (headtypesonClickbool === false) { // let coursestype = false;
headtypes = undefined; // let activePackages = false;
} else { // let activeMoopCases = false;
headtypes = headtypess; // let activeCompetitions = false;
}
} else { // if (match.path === '/forums') {
for (var i = 0; i < mygetHelmetapi2.navbar.length; i++) { // activeForums = true;
if (match.path === mygetHelmetapi2.navbar[i].link) { // } else if (match.path.startsWith('/shixuns')) {
headtypes = mygetHelmetapi2.navbar[i].link; // activeShixuns = true;
break; // } else if (match.path.startsWith('/paths')) {
} // activePaths = true;
} // } else if (match.path.startsWith('/courses')) {
} // coursestype = true;
} // } else if (match.path.startsWith('/crowdsourcing')) {
} // activePackages = true;
} // } else if (match.path.startsWith('/moop_cases')) {
let shixuntype = false; // activeMoopCases = true;
let pathstype = false; // } else if (match.path.startsWith('/competitions')) {
// activeCompetitions = true;
// } else {
// activeIndex = true;
// }
// let headtypes = '/';
// if (mygetHelmetapi2) {
// if (mygetHelmetapi2.navbar) {
// if (mygetHelmetapi2.navbar.length > 0) {
// if (match.path === '/') {
// if (headtypesonClickbool === false) {
// headtypes = undefined;
// } else {
// headtypes = headtypess;
// }
// } else {
// for (var i = 0; i < mygetHelmetapi2.navbar.length; i++) {
// if (match.path === mygetHelmetapi2.navbar[i].link) {
// headtypes = mygetHelmetapi2.navbar[i].link;
// break;
// }
// }
// }
// }
// }
// }
// let shixuntype = false;
// let pathstype = false;
let coursestypes = false; let coursestypes = false;
if (this.props && this.props.mygetHelmetapi != null) { if (this.props && this.props.mygetHelmetapi != null) {
let shixun = "/shixuns"; // let shixun = "/shixuns";
let paths = "/paths"; // let paths = "/paths";
let courses = "/courses"; let courses = "/courses";
this.props.mygetHelmetapi.navbar.map((item, key) => { this.props.mygetHelmetapi.navbar.map((item, key) => {
var reg = RegExp(item.link); var reg = RegExp(item.link);
if (shixun.match(reg)) { // if (shixun.match(reg)) {
if (item.hidden === true) { // if (item.hidden === true) {
shixuntype = true // shixuntype = true
} // }
} // }
if (paths.match(reg)) { // if (paths.match(reg)) {
if (item.hidden === true) { // if (item.hidden === true) {
pathstype = true // pathstype = true
} // }
} // }
if (courses.match(reg)) { if (courses.match(reg)) {
if (item.hidden === true) { if (item.hidden === true) {
coursestypes = true coursestypes = true
@ -694,7 +701,7 @@ class NewHeader extends Component {
}) })
} }
return ( return (
<div className="newHeaders" id="nHeader"> <div className={`newHeaders ${activeIndex && 'homePage'}`} id="nHeader">
<div className="headerContent"> <div className="headerContent">
{isRender === true ? {isRender === true ?
<LoginDialog <LoginDialog
@ -717,7 +724,7 @@ class NewHeader extends Component {
<a href={mygetHelmetapi2 && mygetHelmetapi2.new_course.default_url} className={"fl mr30"} style={{minWidth:"45px"}}> <a href={mygetHelmetapi2 && mygetHelmetapi2.new_course.default_url} className={"fl mr30"} style={{minWidth:"45px"}}>
{ {
mygetHelmetapi2 && mygetHelmetapi2.nav_logo_url ? mygetHelmetapi2 && mygetHelmetapi2.nav_logo_url ?
<img alt="可控开源社区" className="logoimg" style={{ heigth: "40px" }} src={getImageUrl(mygetHelmetapi2.nav_logo_url)}></img> <img alt="可控开源社区" className="logoimg" style={{ heigth: "40px" }} src={getLogoImageUrl(mygetHelmetapi2.nav_logo_url)}></img>
: :
"" ""
} }
@ -762,7 +769,7 @@ class NewHeader extends Component {
<div className="head-right"> <div className="head-right">
{this.props.user && this.props.user.login && {this.props.user && this.props.user.login &&
<div className="edu-menu-panel"> <div className="edu-menu-panel">
<i className="iconfont icon-tianjiafangda color-grey-6"></i> <i className={`iconfont icon-tianjiafangda ${activeIndex?'color-white':'color-grey-6'} `}></i>
<div className="edu-menu-list" style={{ top: '48px' }}> <div className="edu-menu-list" style={{ top: '48px' }}>
<div className="overPart"></div> <div className="overPart"></div>
{ {
@ -816,18 +823,18 @@ class NewHeader extends Component {
</div> </div>
{user === undefined ? {user === undefined ?
<span className="font-15"> <span className="font-15">
<a onClick={() => this.educoderlogin()} className="mr5 color-grey-6">登录</a> <a onClick={() => this.educoderlogin()} className={`mr5 ${activeIndex ? 'color-white' : 'color-grey-6'}`}>登录</a>
{ {
mygetHelmetapi2 && mygetHelmetapi2.new_course && mygetHelmetapi2.new_course.register_url && mygetHelmetapi2 && mygetHelmetapi2.new_course && mygetHelmetapi2.new_course.register_url &&
<span><em className="vertical-line"></em><a className="ml5 color-grey-6" href={`${mygetHelmetapi2.new_course.register_url}`} target="_blank">注册</a></span> <span><em className="vertical-line"></em><a className={`ml5 ${activeIndex ? 'color-white' : 'color-grey-6'}`} href={`${mygetHelmetapi2.new_course.register_url}`} target="_blank">注册</a></span>
} }
</span> </span>
: user.login === "" ? : user.login === "" ?
<span className="font-15"> <span className="font-15">
<a onClick={() => this.educoderlogin()} className="mr5 color-grey-6">登录</a> <a onClick={() => this.educoderlogin()} className={`mr5 ${activeIndex ? 'color-white' : 'color-grey-6'}`}>登录</a>
{ {
mygetHelmetapi2 && mygetHelmetapi2.new_course && mygetHelmetapi2.new_course.register_url && mygetHelmetapi2 && mygetHelmetapi2.new_course && mygetHelmetapi2.new_course.register_url &&
<span><em className="vertical-line"></em><a className="color-grey-6 ml5" href={`${mygetHelmetapi2.new_course.register_url}`} target="_blank">注册</a></span> <span><em className="vertical-line"></em><a className={`ml5 ${activeIndex ? 'color-white' : 'color-grey-6'}`} href={`${mygetHelmetapi2.new_course.register_url}`} target="_blank">注册</a></span>
} }
</span> </span>
: :

10
src/modules/tpm/css/headerExcess.css
View File

@ -9,4 +9,12 @@
left:0px; left:0px;
bottom: 12px; bottom: 12px;
position: absolute; position: absolute;
} }
.newHeaders.homePage{
background-color: #1A2358;
}
.newHeaders.homePage .head-nav ul#header-nav li a{
color: #fff;
}