Null369
/
forgeplus-react
forked from Gitlink/forgeplus-react
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

header增加专区入口

This commit is contained in:
黄心宇 2023-06-25 14:49:27 +08:00
parent 9e60cc3cdc
commit 156e6977de
5 changed files with 53 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
public/css/edu-purge.css
View File

@ -3962,6 +3962,11 @@ html>body #ajax-indicator {
color: #FF6832;
border:1px solid #FF6832;
}
.head-nav::-webkit-scrollbar {
display: none;
}
.head-nav {
text-align: center;
height: 58px;
@ -3969,33 +3974,25 @@ html>body #ajax-indicator {
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.head-nav ul#header-nav{
/* overflow: hidden; */
white-space: nowrap;
overflow-y: auto;
/* overflow-y: auto; */
display: flex;
padding-left: 50px;
margin-left: -50px;
padding-right: 50px;
margin-right: -50px;
align-self: flex-start;
}
.head-nav ul#header-nav li{
.head-nav li{
height: 58px;
line-height: 58px;
cursor: pointer;
font-size: 16px;
}
.head-nav ul#header-nav a {
.head-nav a {
color: #fff;
margin: 0 20px;
}
.head-nav ul#header-nav li a:hover,.head-nav ul#header-nav li.active a {
.head-nav li a:hover,.head-nav li.active a {
color: #5091FF;
}

2
public/css/gitlink.min.css vendored
View File

File diff suppressed because one or more lines are too long

6
public/index.html
View File

@ -33,10 +33,10 @@
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/alex/alex.all.global.min.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/iconfont.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/edu-purge.css">
<!-- <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/edu-purge.css"> -->
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/editormd.min.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/merge.css">
<!-- <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/gitlink.min.css"> -->
<!-- <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/merge.css"> -->
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/gitlink.min.css">
<%= htmlWebpackPlugin.tags.headTags %>
</head>

11
src/forge/Head/Header.js
View File

@ -335,10 +335,10 @@ class NewHeader extends Component {
:
""
}
<div className="head-nav pr" id={"head-navpre1"}>
{/* <div className="head-nav pr"> */}
{
settings && settings.navbar && settings.navbar.length > 0 ?
<ul id="header-nav" style={{ paddingBottom : `${ zoneList.length ? zoneList.length * 46 : 0 }px` }}>
<ul id="header-nav" className="head-nav pr">
{
settings.navbar && settings.navbar.map((item, key) => {
var new_link = item.link;
@ -359,12 +359,11 @@ class NewHeader extends Component {
// 特色专区下拉菜单
zoneList && zoneList.length > 0 &&
<li
className={`${this.matchZone() === true ? 'pr active' : 'pr'}`}
style={{ display: 'flex' } }
className={`${this.matchZone() === true ? 'active drop-li' : 'drop-li'}`}
onMouseOver={ () => { this.setState( {showSubMenu: true }) } }
onMouseOut={ () => { this.setState( {showSubMenu: false }) } }
>
<a>特色专区</a>
<a onClick={ () => { this.setState( {showSubMenu: true }) } }>特色专区</a>
<ul className={ `drop-down ${ showSubMenu ? 'drop-down-show' : '' }` } style={{ height : showSubMenu ? `${ zoneList.length * 46}px` : 0 }}>
{
zoneList.map((e, k) => {
@ -377,7 +376,7 @@ class NewHeader extends Component {
</ul>
: ""
}
</div>
{/* </div> */}
<div className="head-right">
{ search_url && <HeadSearch {...this.props}/>}
{

60
src/forge/Head/header.scss
View File

@ -369,32 +369,42 @@
.pr {
justify-content: center;
}
.drop-down {
position: absolute;
top: 58px;
background-color: #ffffff;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
transition: height 0.2s ease-in-out;
overflow: hidden;
box-shadow:0px 0px 6px rgba(6, 44, 107, 0.15);
.drop-down-item {
height: 46px !important;
line-height: 46px !important;
padding-right:unset;
position: relative;
a {
color: #252b3a !important;
display: inline-block;
height: 100%;
max-width: 160px;
.drop-li {
display: flex;
flex-direction: column;
align-items: center;
.drop-down {
position: fixed;
top: 58px;
background-color: #ffffff;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
transition: height 0.2s ease-in-out;
overflow: hidden;
box-shadow:0px 0px 6px rgba(6, 44, 107, 0.15);
.drop-down-item {
height: 46px !important;
line-height: 46px !important;
padding-right:unset;
position: relative;
a {
color: #252b3a !important;
display: inline-block;
height: 100%;
max-width: 160px;
}
&:hover {
background-color: #ebf0ff;
}
// &:not(:last-child) {
// border-bottom: solid 1px #cccccc42;
// }
}
&:hover {
background-color: #ebf0ff;
}
// &:not(:last-child) {
// border-bottom: solid 1px #cccccc42;
// }
}
}
}
@media screen and (max-width: 1200px){
.drop-down{
right: 200px;
}
}