为首页定制化改造头部

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

View File

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

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) {
// https://www.educoder.net
// https://testbdweb.trustie.net

View File

@ -6,7 +6,7 @@ export {
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
, 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';
export { setmiyah as setmiyah } from './Component';

View File

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

View File

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import { Link } from "react-router-dom";
import AccountProfile from "../user/AccountProfile";
import { getImageUrl } from 'educoder'
import { getImageUrl,getLogoImageUrl } from 'educoder'
import axios from 'axios';
import { Modal, Input, message, notification } from 'antd';
@ -586,6 +586,8 @@ class NewHeader extends Component {
return true
} else if (url.indexOf('users') > -1 && match.path.indexOf('users') > -1) {
return true
} else if (['http://117.50.100.12:8080','https://osredm.com'].includes(url) && match.path === '/') {
return true
} else {
return false
}
@ -618,74 +620,79 @@ class NewHeader extends Component {
mygetHelmetapi2,
goshowqqgtounp,
} = 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') {
activeForums = true;
} 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 {
let activeIndex = '';
if(match.path === '/'){
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;
/*用户名称 用户头像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') {
// activeForums = true;
// } 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;
// }
// 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;
if (this.props && this.props.mygetHelmetapi != null) {
let shixun = "/shixuns";
let paths = "/paths";
// let shixun = "/shixuns";
// let paths = "/paths";
let courses = "/courses";
this.props.mygetHelmetapi.navbar.map((item, key) => {
var reg = RegExp(item.link);
if (shixun.match(reg)) {
if (item.hidden === true) {
shixuntype = true
}
}
if (paths.match(reg)) {
if (item.hidden === true) {
pathstype = true
}
}
// if (shixun.match(reg)) {
// if (item.hidden === true) {
// shixuntype = true
// }
// }
// if (paths.match(reg)) {
// if (item.hidden === true) {
// pathstype = true
// }
// }
if (courses.match(reg)) {
if (item.hidden === true) {
coursestypes = true
@ -694,7 +701,7 @@ class NewHeader extends Component {
})
}
return (
<div className="newHeaders" id="nHeader">
<div className={`newHeaders ${activeIndex && 'homePage'}`} id="nHeader">
<div className="headerContent">
{isRender === true ?
<LoginDialog
@ -717,7 +724,7 @@ class NewHeader extends Component {
<a href={mygetHelmetapi2 && mygetHelmetapi2.new_course.default_url} className={"fl mr30"} style={{minWidth:"45px"}}>
{
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">
{this.props.user && this.props.user.login &&
<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="overPart"></div>
{
@ -816,18 +823,18 @@ class NewHeader extends Component {
</div>
{user === undefined ?
<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 &&
<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>
: user.login === "" ?
<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 &&
<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>
:

View File

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