From 0790abb6f9fd800f070ba80a2f6a2ad6d97d69ae Mon Sep 17 00:00:00 2001 From: "sylor_huang@126.com" Date: Wed, 16 Sep 2020 14:39:13 +0800 Subject: [PATCH] Change Header --- public/css/edu-purge.css | 36 +- src/modules/tpm/NewHeader.js | 1087 +++++++-------------------- src/modules/tpm/NewHeader_backup.js | 1052 ++++++++++++++++++++++++++ src/modules/tpm/TPMIndex.css | 45 +- src/modules/tpm/css/NewHeader.css | 119 +++ src/modules/tpm/css/header.css | 150 ++++ 6 files changed, 1633 insertions(+), 856 deletions(-) create mode 100644 src/modules/tpm/NewHeader_backup.js create mode 100644 src/modules/tpm/css/NewHeader.css create mode 100644 src/modules/tpm/css/header.css diff --git a/public/css/edu-purge.css b/public/css/edu-purge.css index 1f8de4b7..a7e956ee 100644 --- a/public/css/edu-purge.css +++ b/public/css/edu-purge.css @@ -3948,12 +3948,18 @@ html>body #ajax-indicator { .head-nav { text-align: center; height: 60px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + padding: 0 70px; + /* text-align: center; + height: 60px; box-sizing: border-box; min-width: 780px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - flex: 1; + flex: 1; */ } .head-nav ul#header-nav { @@ -3968,34 +3974,46 @@ html>body #ajax-indicator { float: left; height: 60px; line-height: 60px; - margin-right: 30px; + padding: 0 24px; cursor: pointer; position: relative; font-size: 16px; } - +.head-nav ul#header-nav li.active a, .head-nav ul#header-nav li:hover a{ + color: #1484ef; +} +.head-nav ul#header-nav li.active a:after{ + content: ""; + width: 100%; + height: 2px; + background-color: #1484ef; + left: 0; + bottom: 12px; + position: absolute; +} .head-nav ul#header-nav li a { display: block; height: 100%; width: 100%; color: #333333; font-size: 16px; + position: relative; } -.head-nav ul#header-nav li a:hover { +/* .head-nav ul#header-nav li a:hover { color: #5091FF; -} +} */ .head-nav ul#header-nav li:last-child { margin-right: 0px } .head-nav ul#header-nav li.active a:first-child { - color: #459be5 !important; + color: #1484ef !important; } .head-nav ul#header-nav li.active p { - color: #459be5 !important; + color: #1484ef !important; } .head-nav ul#header-nav li p:hover { @@ -4025,7 +4043,7 @@ html>body #ajax-indicator { color: #FFF !important; } -.head-nav ul#header-nav li.active:after { +/* .head-nav ul#header-nav li.active:after { content: ''; position: absolute; left: 0px; @@ -4035,7 +4053,7 @@ html>body #ajax-indicator { height: 2px; width: 32px; background-color: #459be5; -} +} */ .head-right { box-sizing: border-box; diff --git a/src/modules/tpm/NewHeader.js b/src/modules/tpm/NewHeader.js index 217e3e66..5d72fa93 100644 --- a/src/modules/tpm/NewHeader.js +++ b/src/modules/tpm/NewHeader.js @@ -1,876 +1,301 @@ -import React, { Component } from 'react'; -import { Link } from "react-router-dom"; -import AccountProfile from "../user/AccountProfile"; -import { getImageUrl } from 'educoder' -import axios from 'axios'; -import { Modal, Input, message, notification } from 'antd'; +import React, { Component } from "react"; +import axios from "axios"; +// import '../../modules/tp-forums/css/NewHeader.css' +import { getImageUrl } from "../../common/educoder"; +import "./css/header.css"; +import "./css/NewHeader.css"; +import { Modal, Input, message, notification } from "antd"; -import LoginDialog from '../login/LoginDialog'; -import GotoQQgroup from '../../modal/GotoQQgroup' -import 'antd/lib/modal/style/index.css'; -import 'antd/lib/checkbox/style/index.css'; -import 'antd/lib/radio/style/index.css'; -import 'antd/lib/input/style/index.css'; -import './TPMIndex.css'; +import LoginDialog from "../login/LoginDialog"; +const $ = window.$; +// import { getImageUrl } from "educoder"; -const $ = window.$ -// TODO 这部分脚本从公共脚本中直接调用 -const { Search } = Input; -let old_url; - -window._header_componentHandler = null; class NewHeader extends Component { constructor(props) { - super(props) + super(props); this.state = { - Addcoursestypes: false, - tojoinitemtype: false, - tojoinclasstitle: undefined, - rolearr: ["", ""], - Checkboxteacherchecked: false, - Checkboxstudentchecked: false, - Checkboxteachingchecked: false, - Checkboxteachertype: false, - Checkboxteachingtype: false, - code_notice: false, - checked_notice: false, - RadioGroupvalue: undefined, - submitapplications: false, isRender: false, - showSearchOpentype: false, - showTrial: false, - setevaluatinghides: false, - occupation: 0, - mydisplay: false, - headtypesonClickbool: false, - headtypess: "/", mygetHelmetapi2: null, - goshowqqgtounp: false, - visiblemyss: false, - } + headtypess: null, + headtypesonClickbool: null, + }; } componentDidMount() { - // this.getAppdata(); - this.geturlsdata(); - window._header_componentHandler = this; - - //下拉框的显示隐藏 - var hoverTimeout; - var hoveredPanel; - $(".edu-menu-panel").hover(function () { - if (hoverTimeout) { // 一次只显示一个panel - if (hoveredPanel && hoveredPanel !== this) { - $(hoveredPanel).find(".edu-menu-list").hide() - } - clearTimeout(hoverTimeout); - hoverTimeout = null; - } - hoveredPanel = this; - $(this).find(".edu-menu-list").show(); - }, function () { - var that = this; - // 延迟hide - hoverTimeout = setTimeout(function () { - $(that).find(".edu-menu-list").hide(); - }, 800) - - }); - //获取游览器地址 - try { - window.sessionStorage.setItem("yslgeturls", JSON.stringify(window.location.href)) - } catch (e) {} - } - - openNotification = (messge) => { - notification.open({ - message: "提示", - description: - messge, - }); + this.set_header() }; - - componentWillReceiveProps(newProps, oldProps) { + set_header = () => { + const {mygetHelmetapi} = this.props; this.setState({ - user: newProps.user - }) - if (newProps.Headertop !== undefined) { - old_url = newProps.Headertop.old_url - } - - } - getCookie = (key) => { - var arr, reg = RegExp('(^| )' + key + '=([^;]+)(;|$)'); - if (arr === document.cookie.match(reg)) - return decodeURIComponent(arr[2]); - else - return null; - } - - delCookie = (name) => { - var exp = new Date(); - exp.setTime(exp.getTime() - 1); - var cval = this.getCookie(name); - if (cval != null) { - document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString(); - } - } - onLogout = () => { - const url = `/accounts/logout.json` - this.delCookie("autologin_trustie") - axios.get(url, { - }).then((response) => { - if (response.data.status === 1) { - this.setState({ - user: undefined - }) - window.location.href = "/login" - message.success('退出成功'); - } - }); - } - - tojoinclass = () => { - let { user } = this.state; - if (user === undefined) { - this.setState({ - isRender: true - }) - return - } - if (user && user.login === "") { - this.setState({ - isRender: true - }) - return; - } - if (user && user.profile_completed === false) { - this.setState({ - AccountProfiletype: true - }) - return; - } - this.setState({ - Addcoursestypes: true, - }) - } - - tojoinitem = () => { - if (this.props.user && this.props.user.email === undefined || this.props.user && this.props.user.email === null || this.props.user && this.props.user.email === "") { - this.openNotification("请先绑定邮箱，谢谢"); - return - } - let { user } = this.state; - if (user === undefined) { - this.setState({ - isRender: true - }) - return - } - if (user && user.login === "") { - this.setState({ - isRender: true - }) - return; - } - - if (user && user.profile_completed === false) { - this.setState({ - AccountProfiletype: true - }) - return; - } - - this.setState({ - tojoinitemtype: true - }) - } - - - submitstatevalue = (sum, value, data) => { - this.setState({ - Addcoursestypes: false, - tojoinitemtype: false, - tojoinclasstitle: undefined, - rolearr: ["", ""], - Checkboxteacherchecked: false, - Checkboxstudentchecked: false, - Checkboxteachingchecked: false, - Checkboxteachertype: false, - Checkboxteachingtype: false, - code_notice: false, - checked_notice: false, - submitapplicationssum: sum, - submitapplications: true, - submitapplicationsvalue: value, - submitapplicationsvaluedata: data, - RadioGroupvalue: undefined - }) - } - - onChangeRadioGroup = (e) => { - this.setState({ - RadioGroupvalue: e.target.value, - }); - } - - submitsubmitapplications = () => { - let { - submitapplicationssum, - submitapplicationsvaluedata - } = this.state; - this.setState({ - submitapplications: false, - RadioGroupvalue: undefined - }) - if (submitapplicationssum === 0) { - if (submitapplicationsvaluedata !== undefined) { - window.location.href = "/courses/" + submitapplicationsvaluedata; - } - } else if (submitapplicationssum === 1) { - if (submitapplicationsvaluedata !== undefined) { - window.location.href = "/projects/" + submitapplicationsvaluedata; - } - } - } - - hidesubmitapplications = () => { - this.setState({ - Addcoursestypes: false, - tojoinitemtype: false, - tojoinclasstitle: undefined, - rolearr: ["", ""], - Checkboxteacherchecked: false, - Checkboxstudentchecked: false, - Checkboxteachingchecked: false, - Checkboxteachertype: false, - Checkboxteachingtype: false, - code_notice: false, - checked_notice: false, - submitapplications: false, - RadioGroupvalue: undefined + mygetHelmetapi2: mygetHelmetapi }) } educoderlogin = () => { //登录账号 this.setState({ - isRender: true - }) - } - educoderloginysl = () => { - //退出账号 - var url = `/accounts/logout.json`; - axios.get((url)).then((result) => { - if (result !== undefined) { - window.location.href = "/"; - } - }).catch((error) => { - console.log(error); - }) - } - - hideAddcoursestypes = () => { - this.setState({ - Addcoursestypes: false - }) + isRender: true, + }); }; - HideAddcoursestypess = (i) => { - console.log("调用了"); - this.setState({ - Addcoursestypes: false, - mydisplay: true, - occupation: i, - }) - }; - ModalCancelsy = () => { - this.setState({ - mydisplay: false, - }) - }; - - - hidetojoinclass = () => { - this.setState({ - tojoinclasstype: false, - tojoinitemtype: false, - tojoinclasstitle: undefined, - rolearr: ["", ""], - Checkboxteacherchecked: false, - Checkboxstudentchecked: false, - Checkboxteachingchecked: false, - Checkboxteachertype: false, - Checkboxteachingtype: false, - code_notice: false, - checked_notice: false, - RadioGroupvalue: undefined - }) - } - - submittojoinclass = (value) => { - let { tojoinclasstitle, rolearr, RadioGroupvalue } = this.state; - - if (tojoinclasstitle === undefined) { - this.setState({ - code_notice: true - }) - return - } - let newrolearr = rolearr; - if (tojoinclasstitle.length < 6) { - this.setState({ - code_notice: true - }) - return - } - if (tojoinclasstitle === "" || tojoinclasstitle === undefined) { - this.setState({ - code_notice: true - }) - return - } else { - this.setState({ - code_notice: false - }) - } - - let pamst = []; - let num = 0; - for (var i = 0; i < newrolearr.length; i++) { - if (newrolearr[i] !== "") { - pamst.push(newrolearr[i]) - } else { - num = num + 1 - } - } - - if (num === 2 && value === 0) { - this.setState({ - checked_notice: true - }) - return - } - - if (value === 1 && RadioGroupvalue === undefined) { - this.setState({ - checked_notice: true - }) - return - } - if (value === 1) { - let url = "/project_applies.json"; - axios.post(url, { - code: tojoinclasstitle, - role: RadioGroupvalue - } - ).then((response) => { - if (response.data.status === 1) { - this.submitstatevalue(1, "您输入的邀请码错误") - } else if (response.data.status === 2) { - this.submitstatevalue(1, "您已经是该项目成员", response.data.project) - } else if (response.data.status === 3) { - this.submitstatevalue(1, "请选择一个角色") - } else if (response.data.status === 4) { - this.submitstatevalue(1, "您的申请已提交，请等待项目管理员审批") - } else if (response.data.status === 5) { - this.submitstatevalue(1, "您已经申请加入该项目了，请耐心等待") - } else if (response.data.status === 6) { - this.submitstatevalue(1, "您已成功加入项目", response.data.project) - } else if (response.data.status === 0) { - if (RadioGroupvalue === "reporter") { - this.openNotification("您加入项目成功!"); - window.location.href = `/projects/${response.data.project_id}`; - } else { - this.openNotification("您的申请已提交，请等待项目管理员审批!"); - } - } - }) - } - this.hidetojoinclass() - } - // 关闭 - cancelModulationModels = () => { - this.setState({ isRenders: false }) - } - - inputjoinclassvalue = (e) => { - console.log(e.target.value.length); - if (e.target.value.length >= 7) { - this.openNotification("请输入6位项目邀请码!"); - return - } - this.setState({ - tojoinclasstitle: e.target.value - }) - } - - showSearchOpen = (e) => { - this.setState({ - showSearchOpentype: true - }) - } - - hideshowSearchOpen = (e) => { - let { setevaluatinghides } = this.state; - if (setevaluatinghides === true) { - this.setState({ - showSearchOpentype: false, - setevaluatinghides: false - }) - } - } - - onKeywordSearchKeyDown = (value) => { - let url = `/search?value=${value}`; - this.props.history.push(url) - } - - onKeywordSearchKeyDowns = () => { - this.setState({ - setevaluatinghides: false - }) - } - - setevaluatinghides = () => { - this.setState({ - setevaluatinghides: true - }) - } - //头部获取是否已经登录了 - getUser = (url, type) => { - if (type === "projects") { - if (this.props.user && this.props.user.email === undefined || this.props.user && this.props.user.email === null || this.props.user && this.props.user.email === "") { - this.openNotification("请先绑定邮箱，谢谢"); - return - } - } - let { user } = this.state; - - if (user === undefined) { - this.setState({ - isRender: true - }) - return - } - if (user && user.login === "") { - this.setState({ - isRender: true - }) - return; - } - - if (user && user.profile_completed === false) { - this.setState({ - AccountProfiletype: true - }) - return; - } - if (type === "newshixuns") { - if (this.props && this.props.current_user && this.props.current_user.is_shixun_marker === false) { - this.setgoshowqqgtounp(true); - return; - } - } - if (url !== undefined || url !== "") { - window.location.href = url; - } - } - //修改登录方法 Modifyloginvalue = () => { this.setState({ isRender: false, - }) - } + }); + }; - hideAccountProfile = () => { - this.setState({ - AccountProfiletype: false - }) + matchpaths = (url) => { + const { match } = this.props; + if (url) { + if (url === "/forums" && match.path === "/forums") { + return true; + } else if ( + url.startsWith("/projects") && + match.path.startsWith("/projects") + ) { + return true; + } else if (url.startsWith("/paths") && match.path.startsWith("/paths")) { + return true; + } else if ( + url.startsWith("/courses") && + match.path.startsWith("/courses") + ) { + return true; + } else if ( + url.startsWith("/competitions") && + match.path.startsWith("/competitions") + ) { + return true; + } else if ( + url.startsWith("/statistics") && + match.path.startsWith("/statistics") + ) { + return true; + } else if (url.startsWith("/users") && match.path.startsWith("/users")) { + return true; + } else { + return false; + } + } }; headtypesonClick = (url, bool) => { this.setState({ headtypess: url, headtypesonClickbool: bool, - }) - } - //获取数据为空的时候 - gettablogourlnull = () => { - this.setState({ - mygetHelmetapi2: undefined }); - var link = document.createElement('link'), - oldLink = document.getElementById('dynamic-favicon'); - link.id = 'dynamic-favicon'; - link.rel = 'shortcut icon'; - link.href = "/react/build/./favicon.ico"; - if (oldLink) { - document.head.removeChild(oldLink); - } - document.head.appendChild(link); }; - - //获取数据的时候 - gettablogourldata = (response) => { - document.title = response.data.setting.name; - var link = document.createElement('link'), - oldLink = document.getElementById('dynamic-favicon'); - link.id = 'dynamic-favicon'; - link.rel = 'shortcut icon'; - link.href = '/' + response.data.setting.tab_logo_url; - if (oldLink) { - document.head.removeChild(oldLink); - } - document.head.appendChild(link); - } - - handleVisibleChanges = (boll) => { - this.setState({ - visiblemyss: boll, - }) - } - - getAppdata = () => { - try { - var chromesettingArray = JSON.parse(localStorage.getItem('chromesetting')); - var chromesettingresponseArray = JSON.parse(localStorage.getItem('chromesettingresponse')); - this.setState({ - mygetHelmetapi2: chromesettingArray - }); - if (chromesettingArray.tab_logo_url) { - this.gettablogourldata(chromesettingresponseArray); - } else { - this.gettablogourlnull(); - } - } catch (e) { - this.geturlsdata(); - } - }; - - geturlsdata = () => { - let url = "/setting.json"; - axios.get(url).then((response) => { - if (response && response.data) { - this.setState({ - mygetHelmetapi2: response.data.setting - }); - // localStorage.setItem('chromesetting', JSON.stringify(response.data.setting)); - // localStorage.setItem('chromesettingresponse', JSON.stringify(response)); - try { - if (response.data.setting.tab_logo_url) { - this.gettablogourldata(response); - } else { - this.gettablogourlnull(); - } - } catch (e) { - this.gettablogourlnull(); - } - } else { - this.gettablogourlnull(); - } - }).catch((error) => { - this.gettablogourlnull(); - }); - } - - - matchpaths = (url) => { - const { match } = this.props; - if(url){ - if (url === '/forums' && match.path === '/forums') { - return true - } else if (url.startsWith('/projects') && match.path.startsWith('/projects')) { - return true - } else if (url.startsWith('/paths') && match.path.startsWith('/paths')) { - return true - } else if (url.startsWith('/courses') && match.path.startsWith('/courses')) { - return true - } else if (url.startsWith('/competitions') && match.path.startsWith('/competitions')) { - return true - } else if (url.startsWith('/statistics') && match.path.startsWith('/statistics')) { - return true - } else if (url.startsWith('/users') && match.path.startsWith('/users')) { - return true - } else { - return false - } - } - } - - - // 处理弹框 - setgoshowqqgtounp = (bool) => { - this.setState({ - goshowqqgtounp: bool - }) - } render() { - const isLogin = true; // 这里不会出现未登录的情况，服务端在服务端路由时发现如果是未登录，则跳转到登录页了。 - const { match } = this.props; + const { user, match } = this.props; + const isLogin = !!user; // 这里不会出现未登录的情况，服务端在服务端路由时发现如果是未登录，则跳转到登录页了。 - - let { Addcoursestypes, - tojoinitemtype, - tojoinclasstitle, - code_notice, - checked_notice, - AccountProfiletype, - submitapplications, - submitapplicationsvalue, - user, - isRender, - showSearchOpentype, - headtypesonClickbool, - headtypess, - 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 { - 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 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 (courses.match(reg)) { - if (item.hidden === true) { - coursestypes = true - } - } - }) - } + let { mygetHelmetapi2, isRender } = this.state; return ( -
-
- {isRender === true ? - this.Modifyloginvalue()} - /> : ""} - - {AccountProfiletype === true ? - this.hideAccountProfile()} - {...this.props} - {...this.state} - /> : ""} - { - goshowqqgtounp === true ? - this.setgoshowqqgtounp(bool)}> - :"" - } - this.headtypesonClick("/", false)} className={"fl mr30"}> - { - mygetHelmetapi2 && mygetHelmetapi2.nav_logo_url && mygetHelmetapi2.nav_logo_url ? - 可控开源社区 - : - 可控开源社区 - } +
+ {isRender === true ? ( + this.Modifyloginvalue()} + /> + ) : ( + "" + )} +
+ this.headtypesonClick("/", false)} + className={"mr20"} + > + {mygetHelmetapi2 && + mygetHelmetapi2.nav_logo_url && + mygetHelmetapi2.nav_logo_url ? ( + 可控开源社区 + ) : ( + 可控开源社区 + )} - { - mygetHelmetapi2 && mygetHelmetapi2.navbar && mygetHelmetapi2.navbar.length > 0 ? -
+
+ {mygetHelmetapi2 && + mygetHelmetapi2.navbar && + mygetHelmetapi2.navbar.length > 0 ? (
    - { - mygetHelmetapi2.navbar && mygetHelmetapi2.navbar.map((item, key) => { + {mygetHelmetapi2.navbar && + mygetHelmetapi2.navbar.map((item, key) => { var new_link = item.link; - var user_login = this.props.user && this.props.user.login; - var is_hidden = item.hidden - if (new_link && (new_link.indexOf("courses") > -1 || new_link.indexOf("contests") > -1)) { - if (user_login) { - if (new_link.indexOf("courses") > -1) { - new_link = new_link.replace(/courses/g, "users/" + user_login + "/courses") - } else if (new_link.indexOf("contests") > -1) { - new_link = new_link.replace(/contests/g, "users/" + user_login + "/contests") - } - } else { - is_hidden = true - } - } - if (user_login && (new_link && new_link.indexOf("homes") > -1)) { - new_link = new_link.replace(/homes/g, "users/" + user_login + "/user_activities") - } + var is_hidden = item.hidden; return ( -
  • this.headtypesonClick(item.link, true)} className={`${this.matchpaths(item.link) === true ? 'pr active' : 'pr'}`} style={!is_hidden ? { display: 'flex' } : { display: 'none' }}> +
  • this.headtypesonClick(item.link, true)} + className={`${ + this.matchpaths(item.link) === true ? "active" : "" + }`} + style={ + !is_hidden ? { display: "" } : { display: "none" } + } + > {item.name}
    • - ) - }) - } + ); + })}
-
- : "" - } -
- {this.props.user && this.props.user.login ? -
- -
-
- {/*
    - { - mygetHelmetapi2 && mygetHelmetapi2.new_course && mygetHelmetapi2.new_course.new_syllabuses && -
  • 新建课程
    • - } - { - mygetHelmetapi2 && mygetHelmetapi2.new_course && mygetHelmetapi2.new_course.new_course && -
  • 新建班级
    • - } -
*/} - { - coursestypes === true && this.props.user && this.props.user.main_site === false ? "" : -
    -
  • 新建镜像项目
    • -
  • 新建托管项目
    • -
- } -
-
- : "" - } - {this.props.user && this.props.user.login ? -
- {user && user.login && - - - - - - } -
- : "" - } - -
-
-
    -
    -

    - {submitapplicationsvalue} -

    -
    -
  • - 取消 - 确定 -
    • -
-
-
- + ) : ( + "" + )}
- {user === undefined ? - - this.educoderlogin()} className="mr5 color-grey-3">登录 - { - mygetHelmetapi2 && mygetHelmetapi2.new_course && mygetHelmetapi2.new_course.register_url && - 注册 + +
+
- : user.login === "" ? - - this.educoderlogin()} className="mr5 color-grey-3">登录 - { - mygetHelmetapi2 && mygetHelmetapi2.new_course && mygetHelmetapi2.new_course.register_url && - 注册 - } - - : -
- - - - -
    -
  • - 个人中心 -
    • - { - mygetHelmetapi2 && mygetHelmetapi2.new_course && mygetHelmetapi2.new_course.my_courses && -
  • 我的课程
    • - } - { - mygetHelmetapi2 && mygetHelmetapi2.new_course && mygetHelmetapi2.new_course.my_organ && -
  • 我的组织
    • - } -
  • - this.educoderloginysl()}>退出 -
    • -
+ > + + {/*
+ + + +
*/} + {user && user.login ? ( +
+ {user && ( + + + + )} + {user && user.login && user.tidding_count > 0 && ( + + {user.tidding_count > 99 ? "99+" : user.tidding_count} + + )} + {user && user.login && user.tidding_count > 0 && ( + + )} +
+ ) : ( +
+ )} + {user && user.login ? ( + user.username && ( +
+
+ + + + +
+
+ ) + ) : ( + + this.educoderlogin()}> + 登录 + + {mygetHelmetapi2 && + mygetHelmetapi2.new_course && + mygetHelmetapi2.new_course.register_url && ( + + + + 注册 + + + )} + + )}
- } +
); diff --git a/src/modules/tpm/NewHeader_backup.js b/src/modules/tpm/NewHeader_backup.js new file mode 100644 index 00000000..13c3c2a0 --- /dev/null +++ b/src/modules/tpm/NewHeader_backup.js @@ -0,0 +1,1052 @@ +import React, { Component } from "react"; +import { Link } from "react-router-dom"; +import AccountProfile from "../user/AccountProfile"; +import { getImageUrl } from "educoder"; +import axios from "axios"; +import { Modal, Input, message, notification } from "antd"; + +import LoginDialog from "../login/LoginDialog"; +import GotoQQgroup from "../../modal/GotoQQgroup"; +import "antd/lib/modal/style/index.css"; +import "antd/lib/checkbox/style/index.css"; +import "antd/lib/radio/style/index.css"; +import "antd/lib/input/style/index.css"; +import "./TPMIndex.css"; + +const $ = window.$; +// TODO 这部分脚本从公共脚本中直接调用 +const { Search } = Input; +let old_url; + +window._header_componentHandler = null; +class NewHeader extends Component { + constructor(props) { + super(props); + this.state = { + Addcoursestypes: false, + tojoinitemtype: false, + tojoinclasstitle: undefined, + rolearr: ["", ""], + Checkboxteacherchecked: false, + Checkboxstudentchecked: false, + Checkboxteachingchecked: false, + Checkboxteachertype: false, + Checkboxteachingtype: false, + code_notice: false, + checked_notice: false, + RadioGroupvalue: undefined, + submitapplications: false, + isRender: false, + showSearchOpentype: false, + showTrial: false, + setevaluatinghides: false, + occupation: 0, + mydisplay: false, + headtypesonClickbool: false, + headtypess: "/", + mygetHelmetapi2: null, + goshowqqgtounp: false, + visiblemyss: false, + }; + } + componentDidMount() { + // this.getAppdata(); + this.geturlsdata(); + window._header_componentHandler = this; + + //下拉框的显示隐藏 + var hoverTimeout; + var hoveredPanel; + $(".edu-menu-panel").hover( + function () { + if (hoverTimeout) { + // 一次只显示一个panel + if (hoveredPanel && hoveredPanel !== this) { + $(hoveredPanel).find(".edu-menu-list").hide(); + } + clearTimeout(hoverTimeout); + hoverTimeout = null; + } + hoveredPanel = this; + $(this).find(".edu-menu-list").show(); + }, + function () { + var that = this; + // 延迟hide + hoverTimeout = setTimeout(function () { + $(that).find(".edu-menu-list").hide(); + }, 800); + } + ); + //获取游览器地址 + try { + window.sessionStorage.setItem( + "yslgeturls", + JSON.stringify(window.location.href) + ); + } catch (e) {} + } + + openNotification = (messge) => { + notification.open({ + message: "提示", + description: messge, + }); + }; + + componentWillReceiveProps(newProps, oldProps) { + this.setState({ + user: newProps.user, + }); + if (newProps.Headertop !== undefined) { + old_url = newProps.Headertop.old_url; + } + } + getCookie = (key) => { + var arr, + reg = RegExp("(^| )" + key + "=([^;]+)(;|$)"); + if (arr === document.cookie.match(reg)) return decodeURIComponent(arr[2]); + else return null; + }; + + delCookie = (name) => { + var exp = new Date(); + exp.setTime(exp.getTime() - 1); + var cval = this.getCookie(name); + if (cval != null) { + document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString(); + } + }; + onLogout = () => { + const url = `/accounts/logout.json`; + this.delCookie("autologin_trustie"); + axios.get(url, {}).then((response) => { + if (response.data.status === 1) { + this.setState({ + user: undefined, + }); + window.location.href = "/login"; + message.success("退出成功"); + } + }); + }; + + tojoinclass = () => { + let { user } = this.state; + if (user === undefined) { + this.setState({ + isRender: true, + }); + return; + } + if (user && user.login === "") { + this.setState({ + isRender: true, + }); + return; + } + if (user && user.profile_completed === false) { + this.setState({ + AccountProfiletype: true, + }); + return; + } + this.setState({ + Addcoursestypes: true, + }); + }; + + tojoinitem = () => { + if ( + (this.props.user && this.props.user.email === undefined) || + (this.props.user && this.props.user.email === null) || + (this.props.user && this.props.user.email === "") + ) { + this.openNotification("请先绑定邮箱，谢谢"); + return; + } + let { user } = this.state; + if (user === undefined) { + this.setState({ + isRender: true, + }); + return; + } + if (user && user.login === "") { + this.setState({ + isRender: true, + }); + return; + } + + if (user && user.profile_completed === false) { + this.setState({ + AccountProfiletype: true, + }); + return; + } + + this.setState({ + tojoinitemtype: true, + }); + }; + + submitstatevalue = (sum, value, data) => { + this.setState({ + Addcoursestypes: false, + tojoinitemtype: false, + tojoinclasstitle: undefined, + rolearr: ["", ""], + Checkboxteacherchecked: false, + Checkboxstudentchecked: false, + Checkboxteachingchecked: false, + Checkboxteachertype: false, + Checkboxteachingtype: false, + code_notice: false, + checked_notice: false, + submitapplicationssum: sum, + submitapplications: true, + submitapplicationsvalue: value, + submitapplicationsvaluedata: data, + RadioGroupvalue: undefined, + }); + }; + + onChangeRadioGroup = (e) => { + this.setState({ + RadioGroupvalue: e.target.value, + }); + }; + + submitsubmitapplications = () => { + let { submitapplicationssum, submitapplicationsvaluedata } = this.state; + this.setState({ + submitapplications: false, + RadioGroupvalue: undefined, + }); + if (submitapplicationssum === 0) { + if (submitapplicationsvaluedata !== undefined) { + window.location.href = "/courses/" + submitapplicationsvaluedata; + } + } else if (submitapplicationssum === 1) { + if (submitapplicationsvaluedata !== undefined) { + window.location.href = "/projects/" + submitapplicationsvaluedata; + } + } + }; + + hidesubmitapplications = () => { + this.setState({ + Addcoursestypes: false, + tojoinitemtype: false, + tojoinclasstitle: undefined, + rolearr: ["", ""], + Checkboxteacherchecked: false, + Checkboxstudentchecked: false, + Checkboxteachingchecked: false, + Checkboxteachertype: false, + Checkboxteachingtype: false, + code_notice: false, + checked_notice: false, + submitapplications: false, + RadioGroupvalue: undefined, + }); + }; + educoderlogin = () => { + //登录账号 + this.setState({ + isRender: true, + }); + }; + educoderloginysl = () => { + //退出账号 + var url = `/accounts/logout.json`; + axios + .get(url) + .then((result) => { + if (result !== undefined) { + window.location.href = "/"; + } + }) + .catch((error) => { + console.log(error); + }); + }; + + hideAddcoursestypes = () => { + this.setState({ + Addcoursestypes: false, + }); + }; + HideAddcoursestypess = (i) => { + console.log("调用了"); + this.setState({ + Addcoursestypes: false, + mydisplay: true, + occupation: i, + }); + }; + ModalCancelsy = () => { + this.setState({ + mydisplay: false, + }); + }; + + hidetojoinclass = () => { + this.setState({ + tojoinclasstype: false, + tojoinitemtype: false, + tojoinclasstitle: undefined, + rolearr: ["", ""], + Checkboxteacherchecked: false, + Checkboxstudentchecked: false, + Checkboxteachingchecked: false, + Checkboxteachertype: false, + Checkboxteachingtype: false, + code_notice: false, + checked_notice: false, + RadioGroupvalue: undefined, + }); + }; + + submittojoinclass = (value) => { + let { tojoinclasstitle, rolearr, RadioGroupvalue } = this.state; + + if (tojoinclasstitle === undefined) { + this.setState({ + code_notice: true, + }); + return; + } + let newrolearr = rolearr; + if (tojoinclasstitle.length < 6) { + this.setState({ + code_notice: true, + }); + return; + } + if (tojoinclasstitle === "" || tojoinclasstitle === undefined) { + this.setState({ + code_notice: true, + }); + return; + } else { + this.setState({ + code_notice: false, + }); + } + + let pamst = []; + let num = 0; + for (var i = 0; i < newrolearr.length; i++) { + if (newrolearr[i] !== "") { + pamst.push(newrolearr[i]); + } else { + num = num + 1; + } + } + + if (num === 2 && value === 0) { + this.setState({ + checked_notice: true, + }); + return; + } + + if (value === 1 && RadioGroupvalue === undefined) { + this.setState({ + checked_notice: true, + }); + return; + } + if (value === 1) { + let url = "/project_applies.json"; + axios + .post(url, { + code: tojoinclasstitle, + role: RadioGroupvalue, + }) + .then((response) => { + if (response.data.status === 1) { + this.submitstatevalue(1, "您输入的邀请码错误"); + } else if (response.data.status === 2) { + this.submitstatevalue( + 1, + "您已经是该项目成员", + response.data.project + ); + } else if (response.data.status === 3) { + this.submitstatevalue(1, "请选择一个角色"); + } else if (response.data.status === 4) { + this.submitstatevalue(1, "您的申请已提交，请等待项目管理员审批"); + } else if (response.data.status === 5) { + this.submitstatevalue(1, "您已经申请加入该项目了，请耐心等待"); + } else if (response.data.status === 6) { + this.submitstatevalue(1, "您已成功加入项目", response.data.project); + } else if (response.data.status === 0) { + if (RadioGroupvalue === "reporter") { + this.openNotification("您加入项目成功!"); + window.location.href = `/projects/${response.data.project_id}`; + } else { + this.openNotification("您的申请已提交，请等待项目管理员审批!"); + } + } + }); + } + this.hidetojoinclass(); + }; + // 关闭 + cancelModulationModels = () => { + this.setState({ isRenders: false }); + }; + + inputjoinclassvalue = (e) => { + console.log(e.target.value.length); + if (e.target.value.length >= 7) { + this.openNotification("请输入6位项目邀请码!"); + return; + } + this.setState({ + tojoinclasstitle: e.target.value, + }); + }; + + showSearchOpen = (e) => { + this.setState({ + showSearchOpentype: true, + }); + }; + + hideshowSearchOpen = (e) => { + let { setevaluatinghides } = this.state; + if (setevaluatinghides === true) { + this.setState({ + showSearchOpentype: false, + setevaluatinghides: false, + }); + } + }; + + onKeywordSearchKeyDown = (value) => { + let url = `/search?value=${value}`; + this.props.history.push(url); + }; + + onKeywordSearchKeyDowns = () => { + this.setState({ + setevaluatinghides: false, + }); + }; + + setevaluatinghides = () => { + this.setState({ + setevaluatinghides: true, + }); + }; + //头部获取是否已经登录了 + getUser = (url, type) => { + if (type === "projects") { + if ( + (this.props.user && this.props.user.email === undefined) || + (this.props.user && this.props.user.email === null) || + (this.props.user && this.props.user.email === "") + ) { + this.openNotification("请先绑定邮箱，谢谢"); + return; + } + } + let { user } = this.state; + + if (user === undefined) { + this.setState({ + isRender: true, + }); + return; + } + if (user && user.login === "") { + this.setState({ + isRender: true, + }); + return; + } + + if (user && user.profile_completed === false) { + this.setState({ + AccountProfiletype: true, + }); + return; + } + if (type === "newshixuns") { + if ( + this.props && + this.props.current_user && + this.props.current_user.is_shixun_marker === false + ) { + this.setgoshowqqgtounp(true); + return; + } + } + if (url !== undefined || url !== "") { + window.location.href = url; + } + }; + + //修改登录方法 + Modifyloginvalue = () => { + this.setState({ + isRender: false, + }); + }; + + hideAccountProfile = () => { + this.setState({ + AccountProfiletype: false, + }); + }; + headtypesonClick = (url, bool) => { + this.setState({ + headtypess: url, + headtypesonClickbool: bool, + }); + }; + //获取数据为空的时候 + gettablogourlnull = () => { + this.setState({ + mygetHelmetapi2: undefined, + }); + var link = document.createElement("link"), + oldLink = document.getElementById("dynamic-favicon"); + link.id = "dynamic-favicon"; + link.rel = "shortcut icon"; + link.href = "/react/build/./favicon.ico"; + if (oldLink) { + document.head.removeChild(oldLink); + } + document.head.appendChild(link); + }; + + //获取数据的时候 + gettablogourldata = (response) => { + document.title = response.data.setting.name; + var link = document.createElement("link"), + oldLink = document.getElementById("dynamic-favicon"); + link.id = "dynamic-favicon"; + link.rel = "shortcut icon"; + link.href = "/" + response.data.setting.tab_logo_url; + if (oldLink) { + document.head.removeChild(oldLink); + } + document.head.appendChild(link); + }; + + handleVisibleChanges = (boll) => { + this.setState({ + visiblemyss: boll, + }); + }; + + getAppdata = () => { + try { + var chromesettingArray = JSON.parse( + localStorage.getItem("chromesetting") + ); + var chromesettingresponseArray = JSON.parse( + localStorage.getItem("chromesettingresponse") + ); + this.setState({ + mygetHelmetapi2: chromesettingArray, + }); + if (chromesettingArray.tab_logo_url) { + this.gettablogourldata(chromesettingresponseArray); + } else { + this.gettablogourlnull(); + } + } catch (e) { + this.geturlsdata(); + } + }; + + geturlsdata = () => { + let url = "/setting.json"; + axios + .get(url) + .then((response) => { + if (response && response.data) { + this.setState({ + mygetHelmetapi2: response.data.setting, + }); + try { + if (response.data.setting.tab_logo_url) { + this.gettablogourldata(response); + } else { + this.gettablogourlnull(); + } + } catch (e) { + this.gettablogourlnull(); + } + } else { + this.gettablogourlnull(); + } + }) + .catch((error) => { + this.gettablogourlnull(); + }); + }; + + matchpaths = (url) => { + const { match } = this.props; + if (url) { + if (url === "/forums" && match.path === "/forums") { + return true; + } else if ( + url.startsWith("/projects") && + match.path.startsWith("/projects") + ) { + return true; + } else if (url.startsWith("/paths") && match.path.startsWith("/paths")) { + return true; + } else if ( + url.startsWith("/courses") && + match.path.startsWith("/courses") + ) { + return true; + } else if ( + url.startsWith("/competitions") && + match.path.startsWith("/competitions") + ) { + return true; + } else if ( + url.startsWith("/statistics") && + match.path.startsWith("/statistics") + ) { + return true; + } else if (url.startsWith("/users") && match.path.startsWith("/users")) { + return true; + } else { + return false; + } + } + }; + + // 处理弹框 + setgoshowqqgtounp = (bool) => { + this.setState({ + goshowqqgtounp: bool, + }); + }; + render() { + const isLogin = true; // 这里不会出现未登录的情况，服务端在服务端路由时发现如果是未登录，则跳转到登录页了。 + const { match } = this.props; + + let { + Addcoursestypes, + tojoinitemtype, + tojoinclasstitle, + code_notice, + checked_notice, + AccountProfiletype, + submitapplications, + submitapplicationsvalue, + user, + isRender, + showSearchOpentype, + headtypesonClickbool, + headtypess, + 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 { + 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 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 (courses.match(reg)) { + if (item.hidden === true) { + coursestypes = true; + } + } + }); + } + return ( +
+
+ {isRender === true ? ( + this.Modifyloginvalue()} + /> + ) : ( + "" + )} + + {AccountProfiletype === true ? ( + this.hideAccountProfile()} + {...this.props} + {...this.state} + /> + ) : ( + "" + )} + {goshowqqgtounp === true ? ( + this.setgoshowqqgtounp(bool)} + > + ) : ( + "" + )} + this.headtypesonClick("/", false)} + className={"fl mr30"} + > + {mygetHelmetapi2 && + mygetHelmetapi2.nav_logo_url && + mygetHelmetapi2.nav_logo_url ? ( + 可控开源社区 + ) : ( + 可控开源社区 + )} + + {mygetHelmetapi2 && + mygetHelmetapi2.navbar && + mygetHelmetapi2.navbar.length > 0 ? ( +
+
    + {mygetHelmetapi2.navbar && + mygetHelmetapi2.navbar.map((item, key) => { + var new_link = item.link; + var user_login = this.props.user && this.props.user.login; + var is_hidden = item.hidden; + if ( + new_link && + (new_link.indexOf("courses") > -1 || + new_link.indexOf("contests") > -1) + ) { + if (user_login) { + if (new_link.indexOf("courses") > -1) { + new_link = new_link.replace( + /courses/g, + "users/" + user_login + "/courses" + ); + } else if (new_link.indexOf("contests") > -1) { + new_link = new_link.replace( + /contests/g, + "users/" + user_login + "/contests" + ); + } + } else { + is_hidden = true; + } + } + if ( + user_login && + new_link && + new_link.indexOf("homes") > -1 + ) { + new_link = new_link.replace( + /homes/g, + "users/" + user_login + "/user_activities" + ); + } + return ( +
  • this.headtypesonClick(item.link, true)} + className={`${ + this.matchpaths(item.link) === true ? "active" : "" + }`} + style={ + !is_hidden ? { display: "" } : { display: "none" } + } + > + {item.name} +
    • + ); + })} +
+
+ ) : ( + "" + )} +
+ {this.props.user && this.props.user.login ? ( +
+ +
+
+ {coursestypes === true && + this.props.user && + this.props.user.main_site === false ? ( + "" + ) : ( +
    +
  • + 新建镜像项目 +
    • +
  • + 新建托管项目 +
    • +
+ )} +
+
+ ) : ( + "" + )} + {this.props.user && this.props.user.login ? ( +
+ {user && user.login && ( + + + + + )} +
+ ) : ( + "" + )} + +
+
+ +
+
+ +
+ {user === undefined ? ( + + this.educoderlogin()} + className="mr5 color-grey-3" + > + 登录 + + {mygetHelmetapi2 && + mygetHelmetapi2.new_course && + mygetHelmetapi2.new_course.register_url && ( + + + + 注册 + + + )} + + ) : user.login === "" ? ( + + this.educoderlogin()} + className="mr5 color-grey-3" + > + 登录 + + {mygetHelmetapi2 && + mygetHelmetapi2.new_course && + mygetHelmetapi2.new_course.register_url && ( + + + + 注册 + + + )} + + ) : ( +
+ + + + +
+ )} +
+
+ ); + } +} + +export default NewHeader; diff --git a/src/modules/tpm/TPMIndex.css b/src/modules/tpm/TPMIndex.css index 3d97b393..dac2908b 100644 --- a/src/modules/tpm/TPMIndex.css +++ b/src/modules/tpm/TPMIndex.css @@ -22,16 +22,29 @@ body>.-task-title { min-height: 100%; overflow: hidden; } -.newHeaders{ - max-width: unset; - background: #24292d; - width: 100%; - height:60px; - min-width: 1200px; - z-index: 1000; - -moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1); - background:rgba(255,255,255,1); - box-shadow:0px 2px 10px 0px rgba(0,0,0,0.1); +.newHeader{ + background: #fff; + width: 100%; + height: 60px; + min-width: 1200px; + position: fixed; + top: 0; + left: 0; + z-index: 99; + -webkit-box-shadow: 0 0 12px rgba(0,0,0,.1); + box-shadow: 0 0 12px rgba(0,0,0,.1); +} +.head-navnew{ + width:97%; + display: flex; +} +.newHeader .logoimg { + margin-top: 12px; + float: left; + width: 48px; +} +.headerLeft{ + flex: 1 1; } .headerContent{ width:1200px; @@ -59,11 +72,11 @@ body>.-task-title { background-color: #fff; } /*Header START*/ -.newHeader .logoimg { +/* .newHeader .logoimg { margin-top: 16px; float: left; width: 97px; -} +} */ .headIcon, #header_keyword_search { @@ -131,10 +144,10 @@ body>.-task-title { color: #000 !important; } -.newHeader { +/* .newHeader { background: #24292D !important; height: 60px !important; -} +} */ /*-------------------个人主页：右侧提示区域--------------------------*/ .-task-sidebar { @@ -305,11 +318,11 @@ body>.-task-title { margin-left: 18%; } -.logoimg { +/* .logoimg { float: left; min-width: 40px; height: 40px; -} +} */ .headwith100b { width: 100%; diff --git a/src/modules/tpm/css/NewHeader.css b/src/modules/tpm/css/NewHeader.css new file mode 100644 index 00000000..ccaf3c2f --- /dev/null +++ b/src/modules/tpm/css/NewHeader.css @@ -0,0 +1,119 @@ + +.headerRight{ + float: right; +} +.head-navnew{ + width:97%; + display: flex; +} +.iconSearch{ + color: #666 !important; + margin-top: -13px !important; + display: block; +} +.headerLeft{ + flex:1; +} +.headerRight{ + flex:0.8; + width:200px; +} +.headerRightbox{ + width:100%; + display:flex; +} +.radius{border-radius: 50%;} +.posi-search{ + flex:8; + margin-top:15px; + } +.headRightbox{ + display:flex; + flex:4; +} +.headRightboxuse{ + display:flex; + flex:2; + margin-right: 15px; +} +.headRightpan,.headRightwrite,.headRighthint{ + width: 48px; + height: 60px; + line-height: 60px; +} +.headRighthint-font{ + color:#666 !important; +} +.searchBox{ + float:right; +} +.newslight{ + left: 25px !important; + top: 14px !important; + color:#fff; + min-height:18px; + min-width: 18px; + line-height:18px; + padding:0px 3px; + border-radius:50%; + background:red; + position:absolute; + font-size:12px +} +.isLogin{ + line-height:46px +} +.isLoginImg{ + margin-top: 7px !important; +} +.headerRight a { + color: #1A3F5F; + font-size: 14px; +} +.headerRight a:hover{ + color: #21B351 !important; +} +.headerRight i{ + font-size: 18px !important; + margin-top: 17px; + vertical-align: -4px; +} +.headIcon, #header_keyword_search { + padding-top: 0px !important; +} +.search-all { + width: 300px !important; + height: 28px !important; +} +.edu-menu-list li{ + text-align:left; +} +.eduSearch{ + width:50px !important; + height:26px; + line-height: 26px; +} +.eduSearch:after { + position: absolute; + height: 10px; + width: 1px; + background-color: #EBEBEB; + right: 0px; + top: 9px; + content: ''; +} +.searchLabel{ + margin: 0px !important; + vertical-align: 0px !important; + font-size: 12px !important; +} +.search-input{ + width: 73% !important; + margin-left: 2%; +} +.newHeader .search-all .search-input { + color: #000; +} +.border-Tgrey-eb{ + border-top: 1px solid #ebebeb; +} diff --git a/src/modules/tpm/css/header.css b/src/modules/tpm/css/header.css new file mode 100644 index 00000000..eda01308 --- /dev/null +++ b/src/modules/tpm/css/header.css @@ -0,0 +1,150 @@ +.newHeader { + background: #fff; + width: 100%; + height: 60px; + min-width: 1200px; + position: fixed; + top: 0px; + left: 0px; + z-index: 99; + -moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.1); + box-shadow: 0px 0px 12px rgba(0,0,0,0.1); +} +.educontent { + width: 1200px; + margin: 0 auto; +} +.head-nav { + text-align: center; + height: 60px; + box-sizing: border-box; + width:100%; + padding:0px 70px +} +.newHeader .logoimg { + margin-top: 12px; + float: left; + width: 48px; +} +.headerLeft { + -ms-flex: 1 1; + flex: 1 1; +} +.head-nav ul#header-nav { + position: absolute; + top: 0px; + z-index: 3; + height: 60px; + box-sizing: border-box; +} +.head-nav ul#header-nav li { + float: left; + height: 60px; + line-height: 60px; + padding: 0px 24px; + cursor: pointer; + position: relative; + font-size: 16px; +} +.head-nav ul#header-nav li a { + display: block; + height: 100%; + width: 100%; + color: #333; + position: relative; +} +.head-nav ul#header-nav li:hover a, .head-nav ul#header-nav li.active a{ + color: #1484EF; +} +.head-nav ul#header-nav li.active a::after{ + content: ""; + width: 100%; + height:2px; + background-color: #1484EF; + left:0px; + bottom: 12px; + position: absolute; +} +.headRightboxuse { + -ms-flex: 2 1; + flex: 2 1; + margin-right: 15px; +} +.headRightbox, .headRightboxuse { + display: -ms-flexbox; + display: flex; +} +.edu-menu-panel { + position: relative; + cursor: pointer; +} +.edu-menu-panel:hover .edu-menu-list{ + display: block; +} +ul.edu-menu-list li:hover{ + background: #fafafa !important; + /* color: #1484EF !important */ +} +ul.edu-menu-list li:hover > a{color: #1484EF !important;} + +.headRighthint, .headRightpan, .headRightwrite { + width: 48px; + height: 60px; + line-height: 60px; +} +.color-white { + color: #ffffff!important; +} +em.vertical-line { + display: inline-block; + width: 2px; + background: #999; + height: 10px; +} +.edu-menu-list { + position: absolute; + padding: 5px 0px; + box-shadow: 0 2px 8px 0 rgba(0,0,0,.2); + display: none; + width: 120px; + background: #FFFFff; + right: -5px; + border-radius: 0px 0px 4px 4px; + color: #05101a; + font-size: 14px; + z-index: 100; +} +.edu-menu-list li { + width: 100%; + padding: 0px 15px; + box-sizing: border-box; + height: 35px; + line-height: 35px; + cursor: pointer; +} +.edu-menu-list li a, .edu-menuSmall-list li a { + width: 100%; + height: 100%; + display: block; + color: #323232; + text-align: center; +} +.currentName { + display: block; + width: 100%; + padding: 0px 15px; + height: 40px; + line-height: 40px; + font-size: 16px; + box-sizing: border-box; + cursor: default; + text-align: center; +} +.border-Bgrey-eb { + border-bottom: 1px solid #ebebeb; +} +.task-hide { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} \ No newline at end of file