diff --git a/config/env.js b/config/env.js
index 8e68efe00..84d9446b1 100644
--- a/config/env.js
+++ b/config/env.js
@@ -8,11 +8,11 @@ const paths = require('./paths');
 delete require.cache[require.resolve('./paths')];
 
 const NODE_ENV = process.env.NODE_ENV;
-if (!NODE_ENV) {
-	throw new Error(
-		'The NODE_ENV environment variable is required but was not specified.'
-	);
-}
+// if (!NODE_ENV) {
+// 	throw new Error(
+// 		'The NODE_ENV environment variable is required but was not specified.'
+// 	);
+// }
 
 // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
 var dotenvFiles = [
diff --git a/package.json b/package.json
index f8f3a321f..a59494502 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "educoder",
-  "version": "0.1.0",
+  "name": "luntan",
+  "version": "1.1.0",
   "private": true,
   "dependencies": {
     "@monaco-editor/react": "^2.3.0",
@@ -118,7 +118,7 @@
   },
   "scripts": {
     "start": "node --max_old_space_size=15360 scripts/start.js",
-    "build": "NODE_ENV=production node --max_old_space_size=15360 scripts/build.js",
+    "build": "node --max_old_space_size=15360 scripts/build.js",
     "test-build": "NODE_ENV=testBuild node --max_old_space_size=15360 scripts/build.js",
     "pre-build": "NODE_ENV=preBuild node --max_old_space_size=15360 scripts/build.js",
     "gen_stats": "NODE_ENV=production webpack --profile --config=./config/webpack.config.prod.js --json > stats.json",
diff --git a/public/css/edu-all.css b/public/css/edu-all.css
index b8a558075..6d5ae6108 100644
--- a/public/css/edu-all.css
+++ b/public/css/edu-all.css
@@ -38,7 +38,7 @@
   box-sizing: border-box;
 }
 
-.head-nav ul#header-nav li {
+.head-nav ul#header-nav > li {
   float: left;
   height: 60px;
   line-height: 60px;
@@ -48,57 +48,57 @@
   font-size: 16px
 }
 
-.head-nav ul#header-nav li a {
+.head-nav ul#header-nav > li a {
   display: block;
   height: 100%;
   width: 100%;
   color: #fff
 }
 
-.head-nav ul#header-nav li a:hover {
+.head-nav ul#header-nav > li a:hover {
   color: #cccccc;
 }
 
-.head-nav ul#header-nav li:last-child {
+.head-nav ul#header-nav > li:last-child {
   margin-right: 0px
 }
 
-.head-nav ul#header-nav li.active a {
+.head-nav ul#header-nav > li.active a {
   color: #459be5 !important;
 }
 
-.head-nav ul#header-nav li.active p {
+.head-nav ul#header-nav > li.active p {
   color: #459be5 !important;
 }
 
-.head-nav ul#header-nav li p:hover {
+.head-nav ul#header-nav > li p:hover {
   color: #cccccc;
 }
 
-.head-nav ul#header-nav li p {
+.head-nav ul#header-nav > li p {
   display: block;
   height: 100%;
   width: 100%;
   color: #fff
 }
 
-.head-nav ul#header-nav li.active div ul li a {
+.head-nav ul#header-nav > li.active div ul li a {
   color: #000 !important;
 }
 
-.head-nav ul#header-nav li.active div ul li a:hover {
+.head-nav ul#header-nav > li.active div ul li a:hover {
   color: #FFF !important;
 }
 
-.head-nav ul#header-nav li.active ul li a {
+.head-nav ul#header-nav > li.active ul li a {
   color: #000 !important;
 }
 
-.head-nav ul#header-nav li.active ul li a:hover {
+.head-nav ul#header-nav > li.active ul li a:hover {
   color: #FFF !important;
 }
 
-.head-nav ul#header-nav li.active:after {
+.head-nav ul#header-nav > li.active:after {
   content: '';
   position: absolute;
   left: 0px;
diff --git a/public/css/edu-purge.css b/public/css/edu-purge.css
index 9b73c8ead..d9499898c 100644
--- a/public/css/edu-purge.css
+++ b/public/css/edu-purge.css
@@ -3997,7 +3997,7 @@ html>body #ajax-indicator {
   box-sizing: border-box;
 }
 
-.head-nav ul#header-nav li {
+.head-nav ul#header-nav > li {
   float: left;
   height: 58px;
   line-height: 58px;  
@@ -4007,7 +4007,7 @@ html>body #ajax-indicator {
   padding:0px 20px;
 }
 
-.head-nav ul#header-nav li a {
+.head-nav ul#header-nav > li a {
   display: block;
   height: 100%;
   width: 100%;
@@ -4015,24 +4015,24 @@ html>body #ajax-indicator {
   font-size: 16px;
 }
 
-.head-nav ul#header-nav li a:hover,.head-nav ul#header-nav li.active a {
+.head-nav ul#header-nav > li a:hover,.head-nav ul#header-nav > li.active a {
   color: #5091FF;
 }
 
-.head-nav ul#header-nav li:last-child {
+.head-nav ul#header-nav > li:last-child {
   margin-right: 0px
 }
 
-.head-nav ul#header-nav li.active{
+.head-nav ul#header-nav > li.active{
   /* background-color: #3B3B3B; */
 }
 
 
-.head-nav ul#header-nav li p:hover {
+.head-nav ul#header-nav > li p:hover {
   color: #cccccc;
 }
 
-.head-nav ul#header-nav li p {
+.head-nav ul#header-nav > li p {
   display: block;
   height: 100%;
   width: 100%;
diff --git a/src/modules/tpm/NewHeader.js b/src/modules/tpm/NewHeader.js
index b01beda6c..020905ea3 100644
--- a/src/modules/tpm/NewHeader.js
+++ b/src/modules/tpm/NewHeader.js
@@ -14,11 +14,9 @@ import 'antd/lib/input/style/index.css';
 import './TPMIndex.css';
 import logo from './images/logo.png';
 
+let old_url ;
 const $ = window.$
-// TODO 这部分脚本从公共脚本中直接调用
-const { Search } = Input;
-let old_url;
-
+const gitlinkUrl = `https://www.gitlink.org.cn`;
 window._header_componentHandler = null;
 class NewHeader extends Component {
   constructor(props) {
@@ -48,7 +46,9 @@ class NewHeader extends Component {
       mygetHelmetapi2: null,
       goshowqqgtounp: false,
       visiblemyss: false,
-      navbar: []
+      navbar: [],
+      showSubMenu:false,
+      zoneList:[]
     }
   }
   componentDidMount() {
@@ -81,6 +81,27 @@ class NewHeader extends Component {
     try {
       window.sessionStorage.setItem("yslgeturls", JSON.stringify(window.location.href))
     } catch (e) {}
+
+    this.getZoneList()
+  }
+
+  // 获取专区下拉
+  getZoneList = () =>{
+    const url = `https://gateway.gitlink.org.cn/api/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) => {
+    });
   }
 
   openNotification = (messge) => {
@@ -644,6 +665,8 @@ class NewHeader extends Component {
       isRender,
       mygetHelmetapi2,
       goshowqqgtounp,
+      zoneList,
+      showSubMenu,
       navbar
     } = this.state;
     
@@ -685,30 +708,48 @@ class NewHeader extends Component {
                 {
                   navbar && navbar.map((item, key) => {
                     var new_link = item.link;
-                    var user_login = this.props.user && this.props.user.login;
+                    // 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")
-                    }
+                    // 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")
+                    // }
                     if (item.name === '特色专区') {
-                      is_hidden = true
+                      return(
+                        // 特色专区下拉菜单
+                      zoneList && zoneList.length > 0 ? <li
+                        className={`drop-li`}
+                        onMouseOver={ () => { this.setState( {showSubMenu: true }) } }
+                        onMouseOut={ () => { this.setState( {showSubMenu: false }) } }
+                      >
+                        <a onClick={ () => { this.setState( {showSubMenu: true }) } }>特色专区</a>
+                        <ul className={ `drop-down ${ showSubMenu ? 'drop-down-show' : '' }` } style={{ height : showSubMenu ? `${ current_user && current_user.login ? ((zoneList.length+1) * 46) : (zoneList.length * 46)}px` : 0 }}>
+                          {
+                            zoneList.map((e, k) => {
+                              return <li className="drop-down-item" key={ k }><a href={ `${gitlinkUrl}${e.link}` } className="task-hide" title={ e.name } target="_blank">{ e.name }</a></li>
+                            })
+                          }
+                          {current_user && current_user.login && <li className="drop-down-item"><a href={`${gitlinkUrl}/zone/apply`} target="_blank">+申请创建</a></li> }
+                        </ul>
+                      </li> : ''
+                      )
+                    }else{
+                      return (
+                        <li key={key} onClick={() => this.headtypesonClick(item.link, true)} className={`${this.matchpaths(item.link) === true ? 'pr active' : 'pr'}`} style={!is_hidden ? { display: 'flex' } : { display: 'none' }}>
+                          <a href={new_link}>{item.name}</a>
+                        </li>
+                      )
                     }
-                    return (
-                      <li key={key} onClick={() => this.headtypesonClick(item.link, true)} className={`${this.matchpaths(item.link) === true ? 'pr active' : 'pr'}`} style={!is_hidden ? { display: 'flex' } : { display: 'none' }}>
-                        <a href={new_link}>{item.name}</a>
-                      </li>
-                    )
                   })
                 }
               </ul>
diff --git a/src/modules/tpm/TPMIndex.css b/src/modules/tpm/TPMIndex.css
index 6da113045..47b8c6d74 100644
--- a/src/modules/tpm/TPMIndex.css
+++ b/src/modules/tpm/TPMIndex.css
@@ -413,4 +413,38 @@ body>.-task-title {
 .progress-container {
   flex: 1 0 0;
   margin-left: 20px;
+}
+.drop-li {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.drop-li .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-li .drop-down .drop-down-item {
+  height: 46px !important;
+  line-height: 46px !important;
+  padding-right:unset;
+  position: relative;
+  padding:0px 20px;
+}
+.head-nav .drop-li .drop-down .drop-down-item:hover {
+  background-color: #ebf0ff;
+}
+.drop-li .drop-down .drop-down-item a {
+  color: #252b3a !important;
+  display: inline-block;
+  height: 100%;
+  max-width: 160px;
+}
+.drop-li .drop-down .drop-down-item a &:hover {
+  background-color: #ebf0ff;
 }
\ No newline at end of file