特色专区下拉菜单

public/css/edu-purge.css

@@ -3977,8 +3977,10 @@ html>body #ajax-indicator {
   overflow-y: auto;
   /* overflow-y: auto; */
   display: flex;
-  padding-bottom: 250px;
-  margin-bottom: -250px;
+  padding-left: 50px;
+  margin-left: -50px;
+  padding-right: 50px;
+  margin-right: -50px;
 }
 
 .head-nav ul#header-nav li{

src/forge/Head/Header.js

@@ -45,7 +45,8 @@ class NewHeader extends Component {
       visiblemyss: false,
       openSearch:false,
       visible:false,  //浮动消息框展示控制
-      showSubMenu: -1
+      showSubMenu: false,
+      zoneList: [], // 专区列表
     }
   }
   componentDidMount() {
@@ -58,6 +59,8 @@ class NewHeader extends Component {
     }
     window._header_componentHandler = this;
 
+    this.getZoneList(settings && settings.common.zone +'/api')
+
     try {
       window.sessionStorage.setItem("yslgeturls", JSON.stringify(window.location.href))
     } catch (e) {}
@@ -192,6 +195,24 @@ class NewHeader extends Component {
     });
   }
 
+  getZoneList = (httpUrl) =>{
+    const url = `${httpUrl}/zone/open/list`
+    axios.get(url).then((response) => {
+      if (response && response.data && response.data.data && response.data.data.length > 0) {
+        let newArray = [];
+        response.data.data.forEach((e, i) => {
+          newArray[i] = {
+            name: e.name,
+            link: `/zone/${e.key}`
+          }
+        });
+        this.setState({ zoneList: newArray })
+      } else {
+      }
+    }).catch((error) => {
+    });
+  }
+
   matchpaths = (url) => {
     const { match } = this.props;
     const isDev = window.location.port == 3007;
@@ -208,6 +229,10 @@ class NewHeader extends Component {
       return false
     }
   }
+
+  matchZone = () => {
+    return window.location.href.includes('/zone/')
+  }
   
   checkProfile=(url)=>{
     const { showCompeleteDialog , completeProfile } = this.props;
@@ -274,7 +299,8 @@ class NewHeader extends Component {
       user,
       isRender,
       visible,
-      showSubMenu
+      showSubMenu,
+      zoneList
     } = this.state;
     let search_url = settings && settings.common && settings.common.search;
     return (
@@ -312,7 +338,7 @@ class NewHeader extends Component {
           <div className="head-nav pr" id={"head-navpre1"}>
             {
               settings && settings.navbar && settings.navbar.length > 0 ?
-              <ul id="header-nav">
+              <ul id="header-nav" style={{ paddingBottom : `${ zoneList.length ? zoneList.length * 46 : 0 }px` }}>
                 {
                   settings.navbar && settings.navbar.map((item, key) => {
                     var new_link = item.link;
@@ -323,19 +349,31 @@ class NewHeader extends Component {
                       <li key={key} 
                         className={`${this.matchpaths(new_link) === true ? 'pr active' : 'pr'}`}
                         style={{display:!is_hidden ? 'flex' : 'none'} }
-                        onMouseOver={ () => { this.setState( {showSubMenu: key }) } }
-                        onMouseOut={ () => { this.setState( {showSubMenu: -1 }) } }
                       >
                         <a href={new_link} target={wl ? "_self":"_blank"}>{item.name}</a>
-                        <ul className={ `drop-down ${ showSubMenu === key ? 'drop-down-show' : '' }` } style={{ height : showSubMenu === key ? `${3 * 46}px` : 0 }}>
-                          <li className="drop-down-item"><a href={new_link} target={wl ? "_self":"_blank"}>埃拉拉拉拉拉啊啦啦啦</a></li>
-                          <li className="drop-down-item"><a href={new_link} target={wl ? "_self":"_blank"}>{item.name}</a></li>
-                          <li className="drop-down-item"><a href={new_link} target={wl ? "_self":"_blank"}>{item.name}</a></li>
-                        </ul>
                       </li>
                     )
                   })
                 }
+                {
+                  // 特色专区下拉菜单
+                  zoneList && zoneList.length > 0 &&
+                  <li
+                    className={`${this.matchZone() === true ? 'pr active' : 'pr'}`}
+                    style={{ display: 'flex' } }
+                    onMouseOver={ () => { this.setState( {showSubMenu: true }) } }
+                    onMouseOut={ () => { this.setState( {showSubMenu: false }) } }
+                  >
+                    <a>特色专区</a>
+                    <ul className={ `drop-down ${ showSubMenu ? 'drop-down-show' : '' }` } style={{ height : showSubMenu ? `${ zoneList.length * 46}px` : 0 }}>
+                      {
+                        zoneList.map((e, k) => {
+                          return <li className="drop-down-item" key={ k }><a href={ e.link } className="task-hide" title={ e.name } target="_blank">{ e.name }</a></li>
+                        })
+                      }
+                    </ul>
+                  </li>
+                }
               </ul>
             : ""
             }

src/forge/Head/header.scss

@@ -387,6 +387,7 @@
         color: #252b3a !important;
         display: inline-block;
         height: 100%;
+        max-width: 160px;
       }
       &:hover {
         background-color: #ebf0ff;

src/forge/Information/index.scss

@@ -1040,6 +1040,7 @@
       display: flex;
       justify-content: flex-start;
       align-items: flex-end;
+      flex-wrap: wrap;
       .zone_part_item {
         color:#1f2329;
         font-size:20px;
@@ -1047,27 +1048,32 @@
         display: flex;
         flex-direction: column;
         align-items: flex-start;
-      }
-      a {
-        display: inline-block;
-        width: 220px;
-        height: 88px;
-        line-height: 88px;
-        margin-right: 20px;
-        margin-top: 20px;
-        margin-bottom: 30px!important;
-        color:#1f2329;
-        font-size:20px;
-        text-align: center;
-        background-color:#ffffff;
-        border-radius:8px;
-        box-shadow:0px 0px 15px rgba(28, 48, 175, 0.08);
-        transition: 0.1s linear;
-        img{
-          max-height: 66px;
+        a {
+          display: inline-block;
+          width: 220px;
+          height: 88px;
+          line-height: 88px;
+          margin-right: 20px;
+          margin-top: 20px;
+          margin-bottom: 30px!important;
+          color:#1f2329;
+          font-size:20px;
+          text-align: center;
+          background-color:#ffffff;
+          border-radius:8px;
+          box-shadow:0px 0px 15px rgba(28, 48, 175, 0.08);
+          transition: 0.1s linear;
+          img{
+            max-height: 66px;
+          }
+          &:hover {
+            transform: translate(0, -5px);
+          }
         }
-        &:hover {
-          transform: translate(0, -5px);
+        &:nth-child(n + 6) {
+          a {
+            margin-top: 0px;
+          }
         }
       }
     }