diff --git a/src/App.js b/src/App.js
index d1c049dc0..f7e3d3618 100644
--- a/src/App.js
+++ b/src/App.js
@@ -388,6 +388,14 @@ class App extends Component {
                   }
                 }>
               </Route>
+              <Route
+                path={"/zone1/:deptId"}
+                render={
+                  (props) => {
+                    return (<Information {...this.props} {...props} {...this.state} />)
+                  }
+                }>
+              </Route>
               <Route
                 path={"/settings"}
                 render={
diff --git a/src/forge/Information/Component/contributor.jsx b/src/forge/Information/Component/contributor.jsx
new file mode 100644
index 000000000..1b7ab5952
--- /dev/null
+++ b/src/forge/Information/Component/contributor.jsx
@@ -0,0 +1,42 @@
+import React , { useEffect } from 'react';
+import Slider from 'react-slick';
+import { Link } from 'react-router-dom';
+
+const settings = {
+  dots: true,
+  infinite: true,
+  speed: 500,
+  slidesToShow: 3,
+  slidesToScroll: 3,
+  arrows: false,
+  adaptiveHeight: true,
+};
+
+function Contributor(props) {
+  const { personList } = props
+  return(
+    <div className="boxmain zone_c_lists">
+      {
+        personList && personList.length > 0 ?
+          <Slider {...settings}>
+            {
+              personList.map((i,k)=>{
+                return(
+                  <div className="container">
+                    <div className="c_item">
+                      <Link to={`/${i.login}`}><img src={i.imageUrl} alt="" /></Link>
+                      <span className="c_name">{i.name}</span>
+                      <p className="c_desc task-hide-2" style={{display:i.introduction?"":"flex"}}>{i.introduction || "暂无~"}</p>
+                    </div>
+                  </div>
+                )
+              })
+            }
+          </Slider>
+        :""
+      }
+    </div>
+    
+  )
+}
+export default Contributor;
\ No newline at end of file
diff --git a/src/forge/Information/Component/hot.jsx b/src/forge/Information/Component/hot.jsx
index ba9c224fd..4096b0a86 100644
--- a/src/forge/Information/Component/hot.jsx
+++ b/src/forge/Information/Component/hot.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-function Hot({list , title,deptId}){
+function Hot({list , title, deptId, temp}){
   return(
     <div>
       <p className="hot_title">{title}</p>
@@ -13,7 +13,7 @@ function Hot({list , title,deptId}){
               return(
                 <li>
                   <span style={{opacity:k<3 ? `${1-((k+1)/10)}` :"0.3"}}>{k+1}</span>
-                  <Link to={`/zone/${deptId}/newdetail/${i.id}`}>{i.name}</Link>
+                  <Link to={`/${temp}/${deptId}/newdetail/${i.id}`}>{i.name}</Link>
                 </li>
               )
             })
diff --git a/src/forge/Information/Component/newsBox.jsx b/src/forge/Information/Component/newsBox.jsx
new file mode 100644
index 000000000..43e5b44ad
--- /dev/null
+++ b/src/forge/Information/Component/newsBox.jsx
@@ -0,0 +1,50 @@
+import React , { useState } from 'react';
+
+
+
+function PublicBanner(props){
+  const [ key , setKey ] = useState("1");
+  const { deptId } = props.match.params;
+  const { pathname } = props.history.location;
+  const { data , adminUrl } = props;
+
+  return(
+    <div className="zone_news">
+      <p className="in_title mb40">新闻动态</p>
+      <div className="boxmain" style={{display:"flex"}}>
+        <div className="zone_new_first">
+          <img src={newsList[0].headImg || img1} alt="" height="302px" style={{width:"100%",objectFit:"cover"}} className="mb30"/>
+          <Link to={`/${temp}/${deptId}/newdetail/${newsList[0].id}`} className="zone_n_title task-hide">{newsList[0].name}</Link>
+          <p className="zone_n_desc task-hide-2">{newsList[0].summary}</p>
+          <p className="font-13 mt10 flexCenter" style={{color:"#8d95a3"}}>
+            <img src={shijian} alt="" className="mr3" />
+            {newsList[0].publishTime}
+          </p>
+          <p className="mt15">
+            <Link to={`/${temp}/${deptId}/newdetail/${newsList[0].id}`} className="color-blue flexCenter zone_btn">查看详情<img src={guideArrow} alt="" width="14px" className="ml3"/></Link>
+          </p>
+        </div>
+        <ul className={`zone_new_three ${newsList.length <4 ? "flexStart" : "spaceeTween"}`}>
+          {
+            newsList.map((i,k)=>{
+              return(
+                k > 0 && <li>
+                  <Link className="zone_n_title task-hide" to={`/${temp}/${deptId}/newdetail/${i.id}`}>{i.name}</Link>
+                  <p className="zone_n_desc task-hide-2 mt10">{i.summary}</p>
+                  <p className="zone_n_value">
+                    <span className="font-13" style={{color:"#8d95a3"}}>
+                      <img src={shijian} alt="" className="mr3" />
+                      {i.publishTime}
+                    </span>
+                    <Link  to={`/${temp}/${deptId}/newdetail/${i.id}`} className="color-blue flexCenter zone_btn">查看详情<img src={guideArrow} alt="" width="14px"/></Link>
+                  </p>
+                </li>
+              )
+            })
+          }
+        </ul>
+      </div>
+    </div>
+  )
+}
+export default newBox;
\ No newline at end of file
diff --git a/src/forge/Information/Component/partner.jsx b/src/forge/Information/Component/partner.jsx
new file mode 100644
index 000000000..4658883a3
--- /dev/null
+++ b/src/forge/Information/Component/partner.jsx
@@ -0,0 +1,95 @@
+import React , { useEffect } from 'react';
+import Slider from 'react-slick';
+import { httpUrl } from '../fetch';
+import axios from 'axios';
+import { useState } from 'react';
+
+const settings = {
+  dots: false,
+  infinite: true,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  vertical: true,
+  verticalSwiping: true,
+  autoplay:true,
+  arrows:false
+};
+function Partner(props) {
+  const [ topics ,setTopics ] = useState(undefined);
+  const { id } = props;
+
+  useEffect(()=>{
+    getPartnerList();
+  },[id])
+
+  function getPartnerList(){
+    const url = `${httpUrl}/zone/open/${id}/partners/list`;
+    axios.get(url).then(result=>{
+      if(result){
+        getUnit(result.data.rows)
+      }
+    }).catch(error=>{})
+  }
+
+  function getUnit(array){
+    const newArray = [];
+    for(let i = 0; i< array.length;) {
+      newArray.push(array.slice(i, i += 5));
+    }
+    setTopics(newArray)
+  }
+
+  function Init() {
+    let box = document.getElementById('scrollBox1');
+    scrollUp();
+    var myTimer = setInterval(scrollUp, 10);
+    // 鼠标移入container 元素上 清除定时器 停止滚动
+    box.onmouseover = () => {
+      clearInterval(myTimer);
+    }
+    // 鼠标移出container 元素上 继续滚动
+    // 60表示每隔60毫秒向上滚动一次
+    box.onmouseout = () => {
+      myTimer = setInterval(scrollUp, 10);
+    }
+  }
+
+  function scrollUp() {
+    let box = document.getElementById('scrollBox1');
+    if(box){
+      let con1 = document.getElementById('box1');
+      if (box.scrollLeft >= con1.clientWidth) {
+        box.scrollLeft = 0;
+      } else {
+        box.scrollLeft++;
+      }
+    }
+  }
+
+  return(
+    <div id={"scrollBox1"}>
+      {
+        topics && topics.length>0 ?
+        <Slider {...settings} className="unitMainSlider">
+          {
+            topics.map((i,k)=>{
+              return(
+                <div className="slickMainline">
+                {
+                  i.map((j,k1)=>{
+                    return(
+                      <a href={j.link} target="_blank"><img src={j.logo} alt=""/></a>
+                    )
+                  })
+                }
+                </div>
+              )
+            })
+          }
+        </Slider>
+        :""
+      }
+    </div>
+  )
+}
+export default Partner;
\ No newline at end of file
diff --git a/src/forge/Information/Component/projects.jsx b/src/forge/Information/Component/projects.jsx
new file mode 100644
index 000000000..83f8195ab
--- /dev/null
+++ b/src/forge/Information/Component/projects.jsx
@@ -0,0 +1,58 @@
+import React , { useEffect } from 'react';
+import Slider from 'react-slick';
+import projectRight from '../img/projectRight.png';
+import projectLeft from '../img/projectLeft.png';
+
+function SampleNextArrow(props) {
+  const { className, style } = props;
+  return (
+    <img src={projectRight} className={`right_arraw ${className}`}></img>
+  );
+}
+
+function SamplePrevArrow(props) {
+  const { className, style } = props;
+  return (
+    <img src={projectLeft} className={`left_arraw ${className}`}></img>
+  );
+}
+
+
+const settings = {
+  className: "center",
+  centerMode: true,
+  centerPadding: "100px",
+  slidesToShow: 3,
+  speed: 500,
+  nextArrow: <SampleNextArrow className="right_arraw"/>,
+  prevArrow: <SamplePrevArrow className="left_arraw"/>
+};
+
+function Projects(props) {
+  const { projectList } = props
+
+  return(
+    <div className="boxmain">
+      {
+        projectList && projectList.length > 0 ?
+          <Slider {...settings}>
+            {
+              projectList.map((i,k)=>{
+                return(
+                  <div className="container">
+                    <div className="zone_p_item" onClick={()=>window.open(i.projectURL)}>
+                      {i.projectProperties && i.projectProperties.authorImageUrl && <img className="info_img" src={i.projectProperties.authorImageUrl} alt="" /> }
+                      <p className="z_p_title task-hide">{i.projectProperties && i.projectProperties.name}</p>
+                      <p className="z_p_desc task-hide-2">{i.projectProperties && i.projectProperties.description ? i.projectProperties.description : "暂无~"}</p>
+                    </div>
+                  </div>
+                )
+              })
+            }
+          </Slider>
+        :""
+      }
+    </div>
+  )
+}
+export default Projects;
\ No newline at end of file
diff --git a/src/forge/Information/Component/publicBanner.jsx b/src/forge/Information/Component/publicBanner.jsx
index d21f6fedd..647254ba0 100644
--- a/src/forge/Information/Component/publicBanner.jsx
+++ b/src/forge/Information/Component/publicBanner.jsx
@@ -1,14 +1,9 @@
 import React , { useState , useEffect } from 'react';
 import { Menu } from 'antd';
-import Menu1 from '../img/menu1.png';
-import Menu2 from '../img/menu2.png';
-import Menu3 from '../img/menu3.png';
-import Menu4 from '../img/menu4.png';
-import Menu5 from '../img/menu5.png';
-import Menu6 from '../img/menu6.png';
 import Menu7 from '../img/menu7.png';
 import banner from '../img/mainbanner.png'
 import { Link } from 'react-router-dom';
+import { tempConfig } from '../tempInfo';
 
 
 
@@ -17,16 +12,16 @@ function PublicBanner(props){
   const { deptId } = props.match.params;
   const { pathname } = props.history.location;
   const { data , adminUrl } = props;
-
+  const temp = props.pathName
 
 
   useEffect(()=>{
     if(pathname){
-      const info = /\/zone\/[A-Za-z0-9]{0,}\/news/g;
-      const infodetail = /\/zone\/[A-Za-z0-9]{0,}\/newdetail/g;
-      const project = /\/zone\/[A-Za-z0-9]{0,}\/projects/g;
-      const vip = /\/zone\/[A-Za-z0-9]{0,}\/VIP/g;
-      if(pathname === `/zone/${deptId}`){
+      const info = /[A-Za-z0-9]{0,}\/news/g;
+      const infodetail = /[A-Za-z0-9]{0,}\/newdetail/g;
+      const project = /[A-Za-z0-9]{0,}\/projects/g;
+      const vip = /[A-Za-z0-9]{0,}\/VIP/g;
+      if(pathname === `/${temp}/${deptId}`){
         setKey("1");
       }
       else if(project.test(pathname)){
@@ -52,12 +47,12 @@ function PublicBanner(props){
       }
       <div className="bannerMenus">
         <Menu mode={"horizontal"} selectedKeys={[key]}>
-          <Menu.Item key={"1"}><Link to={`/zone/${deptId}`}><img src={Menu1} alt="" width="29px"/>首页</Link></Menu.Item>
-          <Menu.Item key={"2"}><Link to={`/zone/${deptId}/projects`}><img src={Menu2} alt="" width="34px"/>开源项目</Link></Menu.Item>
+          <Menu.Item key={"1"}><Link to={`/${temp}/${deptId}`}><img src={require(`../img/${temp}Menu1.png`)} alt="" width="29px"/>首页</Link></Menu.Item>
+          <Menu.Item key={"2"}><Link to={`/${temp}/${deptId}/projects`}><img src={require(`../img/${temp}Menu2.png`)} alt="" width="34px"/>开源项目</Link></Menu.Item>
           {/* <Menu.Item key={"3"}><img src={Menu3} alt="" width="33px"/>资源发布</Menu.Item> */}
-          <Menu.Item key={"4"}><Link to={`/zone/${deptId}/news`}><img src={Menu4} alt="" width="32px"/>领域资讯</Link></Menu.Item>
+          <Menu.Item key={"4"}><Link to={`/${temp}/${deptId}/news`}><img src={require(`../img/${temp}Menu4.png`)} alt="" width="32px"/>{ tempConfig[temp].mainTitle }</Link></Menu.Item>
           {/* <Menu.Item key={"5"}><img src={Menu5} alt="" width="27px"/>Sig小组</Menu.Item> */}
-          <Menu.Item key={"6"}><Link to={`/zone/${deptId}/VIP`}><img src={Menu6} alt="" width="36px"/>专区会员</Link></Menu.Item>
+          <Menu.Item key={"6"}><Link to={`/${temp}/${deptId}/VIP`}><img src={require(`../img/${temp}Menu6.png`)} alt="" width="36px"/>{ tempConfig[temp].member }</Link></Menu.Item>
           { adminUrl && <Menu.Item key={"7"}><a onClick={()=>{window.location.href=adminUrl}}><img src={Menu7} alt="" width="34px"/>后台管理</a></Menu.Item> }
         </Menu>
       </div>
diff --git a/src/forge/Information/Pages/headerPage.jsx b/src/forge/Information/Pages/headerPage.jsx
index f682c39ca..2be268401 100644
--- a/src/forge/Information/Pages/headerPage.jsx
+++ b/src/forge/Information/Pages/headerPage.jsx
@@ -1,16 +1,20 @@
 import React,{ useState, useEffect } from 'react';
 import img1 from '../img/img1.png';
+import img2 from '../img/img2.png';
+import { httpUrl } from '../fetch';
 import guideArrow from '../img/guideArrow.png';
 import { Link } from 'react-router-dom';
 import shijian from '../img/shijian.png';
-import { getHomePageList , gethomePageDocList , getAllList } from '../api';
+import axios from 'axios';
+import Nodata from '../../Nodata';
 
 function HeaderPage(props){
   const [ projectList , setProjectList ] = useState(undefined);
   const [ personList , setPersonList ] = useState(undefined);
   const [ newsList, setNewsList ] = useState(undefined);
   const { deptId } = props.match.params;
-  const { data ,  id } = props;
+  const { data, id } = props;
+  const temp = props.pathName
 
   useEffect(()=>{
     if(id){
@@ -21,7 +25,8 @@ function HeaderPage(props){
   },[id])
 
   function getPersonList(){
-    getHomePageList(id).then(result=>{
+    const url = `${httpUrl}/zone/open/${id}/member/homePageList`;
+    axios.get(url).then(result=>{
       if(result){
         setPersonList(result.data.rows);
       }
@@ -29,7 +34,8 @@ function HeaderPage(props){
   }
 
   function getNewsList(){
-    gethomePageDocList(id).then(result=>{
+    const url = `${httpUrl}/cms/doc/open/zone/${id}/homePageDocList`;
+    axios.get(url).then(result=>{
       if(result){
         setNewsList(result.data.rows);
       }
@@ -37,7 +43,10 @@ function HeaderPage(props){
   }
 
   function getProjectList(){
-    getAllList(id,{isHomepage:1}).then(result=>{
+    const url = `${httpUrl}/zone/open/${id}/project/list`;
+    axios.get(url,{params:{
+      isHomepage:1
+    }}).then(result=>{
       if(result){
         setProjectList(result.data.rows);
       }
@@ -50,12 +59,12 @@ function HeaderPage(props){
         data && (data.introductionTitle || data.introductionContent ||  data.introductionImage) &&
         <div className="boxmain zone_infos">
             <div className="zone_infos_desc">
-              {data.introductionTitle && <p className="z_name">{data.introductionTitle}</p>}
-              <p className="z_desc task-hide-2" style={{WebkitLineClamp:data.introductionTitle?"4":"7"}}>{data.introductionContent}</p>
+              <p className="z_name">{data.introductionTitle}</p>
+              <p className="z_desc task-hide-2">{data.introductionContent}</p>
             </div>
           {
             data.introductionImage &&
-            <img src={data.introductionImage} alt="" height="277px"/>
+            <img src={data.introductionImage} alt="" width="474px" height="277px"/>
           }
         </div>
       }
@@ -66,14 +75,14 @@ function HeaderPage(props){
           <div className="boxmain" style={{display:"flex"}}>
             <div className="zone_new_first">
               <img src={newsList[0].headImg || img1} alt="" height="302px" style={{width:"100%",objectFit:"cover"}} className="mb30"/>
-              <Link to={`/zone/${deptId}/newdetail/${newsList[0].id}`} className="zone_n_title task-hide">{newsList[0].name}</Link>
+              <Link to={`/${temp}/${deptId}/newdetail/${newsList[0].id}`} className="zone_n_title task-hide">{newsList[0].name}</Link>
               <p className="zone_n_desc task-hide-2">{newsList[0].summary}</p>
               <p className="font-13 mt10 flexCenter" style={{color:"#8d95a3"}}>
                 <img src={shijian} alt="" className="mr3" />
                 {newsList[0].publishTime}
               </p>
               <p className="mt15">
-                <Link to={`/zone/${deptId}/newdetail/${newsList[0].id}`} className="color-blue flexCenter zone_btn">查看详情<img src={guideArrow} alt="" width="14px" className="ml3"/></Link>
+                <Link to={`/${temp}/${deptId}/newdetail/${newsList[0].id}`} className="color-blue flexCenter zone_btn">查看详情<img src={guideArrow} alt="" width="14px" className="ml3"/></Link>
               </p>
             </div>
             <ul className={`zone_new_three ${newsList.length <4 ? "flexStart" : "spaceeTween"}`}>
@@ -81,14 +90,14 @@ function HeaderPage(props){
                 newsList.map((i,k)=>{
                   return(
                     k > 0 && <li>
-                      <Link className="zone_n_title task-hide" to={`/zone/${deptId}/newdetail/${i.id}`}>{i.name}</Link>
+                      <Link className="zone_n_title task-hide" to={`/${temp}/${deptId}/newdetail/${i.id}`}>{i.name}</Link>
                       <p className="zone_n_desc task-hide-2 mt10">{i.summary}</p>
                       <p className="zone_n_value">
                         <span className="font-13" style={{color:"#8d95a3"}}>
                           <img src={shijian} alt="" className="mr3" />
                           {i.publishTime}
                         </span>
-                        <Link  to={`/zone/${deptId}/newdetail/${i.id}`} className="color-blue flexCenter zone_btn">查看详情<img src={guideArrow} alt="" width="14px"/></Link>
+                        <Link  to={`/${temp}/${deptId}/newdetail/${i.id}`} className="color-blue flexCenter zone_btn">查看详情<img src={guideArrow} alt="" width="14px"/></Link>
                       </p>
                     </li>
                   )
diff --git a/src/forge/Information/Pages/headerPageZone1.jsx b/src/forge/Information/Pages/headerPageZone1.jsx
new file mode 100644
index 000000000..8aad1a487
--- /dev/null
+++ b/src/forge/Information/Pages/headerPageZone1.jsx
@@ -0,0 +1,263 @@
+import React,{ useState, useEffect } from 'react';
+import { httpUrl } from '../fetch';
+
+import img1 from '../img/img1.png';
+import img2 from '../img/img2.png';
+import vision0 from '../img/vision0.png';
+import vision1 from '../img/vision1.png';
+import vision2 from '../img/vision2.png';
+import vision3 from '../img/vision3.png';
+import intro1 from '../img/intro1.png';
+import intro2 from '../img/intro2.png';
+import intro3 from '../img/intro3.png';
+import intro4 from '../img/intro4.png';
+import guideArrow from '../img/guideArrow.png';
+import ra from '../img/ra.png'
+import { Link } from 'react-router-dom';
+import shijian from '../img/shijian.png';
+import axios from 'axios';
+import Nodata from '../../Nodata';
+import Projects from '../Component/projects';
+import Contributor from '../Component/contributor';
+import Partner from '../Component/partner';
+import '../indexZone1.scss'
+
+function HeaderPage(props){
+  const [ projectList , setProjectList ] = useState(undefined);
+  const [ personList , setPersonList ] = useState(undefined);
+  const [ newsList, setNewsList ] = useState(undefined);
+  const { deptId } = props.match.params;
+  const { data, id } = props;
+  const temp = props.pathName
+
+  const vision = [
+    {imageUrl: vision0, title: '促进技术创新和应用', content: '通过开源硬件社区的建设，可以让更多的人参与到硬件开发中来，激发大众的创造力和创新精神，从而推动硬件领域的技术创新和实际应用。'},
+    {imageUrl: vision1, title: '降低硬件开发成本', content: '通过共享开源硬件设计和资源，可以帮助个人和小型企业降低硬件开发的成本，打破品牌垄断，促进市场竞争。'},
+    {imageUrl: vision2, title: '推广教育和普及知识', content: '通过开源硬件社区的建设，可以提供更多的硬件开发教育和知识普及资源，为学生、教师和爱好者等不同群体提供更多的学习机会和平台。'},
+    {imageUrl: vision3, title: '加强国际合作和交流', content: '开源硬件社区可以促进国内外的交流和合作，扩大中国在全球开源硬件领域的影响力，推动中外企业和机构之间的技术合作和交流。'}
+  ]
+
+  const communityInfo = [
+    { level: '普通用户', todo: '寻找项目或SIG组' },
+    { level: '项目贡献者', todo: '参与项目贡献' },
+    { level: '项目开发者', todo: '推动项目发展' },
+    { level: '项目管理者', todo: '成为项目领军人物' }
+  ]
+
+  const growPathInfo = [
+    { type: '计划一', plan: '保留chisel语言学习（学习）' },
+    { type: '计划二', plan: '小核、SoC快速开发（初级、中级、高级）' },
+    { type: '计划三', plan: '果壳项目（初级、中级、高级）' },
+    { type: '计划四', plan: '香山贡献参与' }
+  ]
+
+  const introDetail = [
+    { title: '能力阶梯', icon: intro1, desc: '成长体系按照开发者从⼊门到进阶再到⾹⼭顶级项⽬设⽴了⽤户能⼒提升的阶梯式真实项⽬' },
+    { title: '贡献分级', icon: intro2, desc: '所有开源项⽬全部为开芯院开源开放的真实项⽬，开发者参与开源项⽬的所有贡献将作为成长等级、知产授权、加⼊⾼级别项⽬（悬赏、获得offer等）、成为核⼼贡献者的参与 依据' },
+    { title: '成长认证', icon: intro3, desc: '开发者可以通过完成开源项⽬对应的任务，赢取对应能⼒成长认证，开源项⽬对应的⾼级任务将获得对应等级L2或⾼级别的知识产权授权，同时解锁下⼀级别成长任务' },
+    { title: '顶级认证', icon: intro4, desc: '参与顶级项⽬“⾹⼭”的贡献者，将获得中国科学院计算技术研究所副所长、研究员，北京开源芯⽚研究院⾸席科学家，RISC-V国际基⾦会理事会成员包云岗签名贡献者证书' }
+  ]
+
+
+  useEffect(()=>{
+    if(id){
+      getProjectList();
+      getNewsList();
+      getPersonList();
+    }
+  },[id])
+
+  function getPersonList(){
+    const url = `${httpUrl}/zone/open/${id}/member/homePageList`;
+    axios.get(url).then(result=>{
+      if(result){
+        setPersonList(result.data.rows);
+      }
+    }).catch(error=>{})
+  }
+
+  function getNewsList(){
+    const url = `${httpUrl}/cms/doc/open/zone/${id}/homePageDocList`;
+    axios.get(url).then(result=>{
+      if(result){
+        setNewsList(result.data.rows);
+      }
+    }).catch(error=>{})
+  }
+
+  function getProjectList(){
+    const url = `${httpUrl}/zone/open/${id}/project/list`;
+    axios.get(url,{params:{
+      isHomepage:1
+    }}).then(result=>{
+      if(result){
+        setProjectList(result.data.rows);
+      }
+    }).catch(console.error())
+  }
+  return(
+    <div className="zone1_box">
+      {
+        data && (data.introductionTitle || data.introductionContent ||  data.introductionImage) &&
+        <div className="boxmain zone_infos mb30">
+            <div className="zone_infos_desc">
+              <p className="z_name">{data.introductionTitle}</p>
+              <p className="z_desc task-hide-2">{data.introductionContent}</p>
+            </div>
+          {
+            data.introductionImage &&
+            <img src={data.introductionImage} alt="" width="600px" height="361px"/>
+          }
+        </div>
+      }
+      <div className="zone_vision pt40 pb60">
+        <p className="in_title mb40">宗旨及愿景</p>
+        <div className='boxmain'>
+          {
+            vision.map((i, k) => {
+              return (
+                <div className="vision_item">
+                  <div className="vision_icon">
+                    <img src={i.imageUrl} alt="" />
+                  </div>
+                  <p className="vision_title">{ i.title }</p>
+                  <p className="vision_content">{ i.content }</p>
+                </div>
+              )
+            })
+          }
+        </div>
+      </div>
+      {
+        newsList && newsList.length>0 &&
+        <div className="zone_news">
+          <div className="boxmain" style={{display:"flex"}}>
+            <p className="news_title">新闻动态</p>
+            <div className="zone_new_first">
+              <p className="task-hide">
+                <span className="item_index">1</span>
+                <Link to={`/${temp}/${deptId}/newdetail/${newsList[0].id}`} className="new_first_title task-hide">{newsList[0].name}</Link>
+              </p>
+              <p className="new_first_desc mt20 task-hide-2">{newsList[0].summary}</p>
+              <p className="font-13 zone_n_value mt20" style={{color:"#8d95a3"}}>
+                <span>
+                  <img src={shijian} alt="" className="mr3" />
+                  {newsList[0].publishTime}
+                </span>
+                <Link to={`/${temp}/${deptId}/newdetail/${newsList[0].id}`} className="zone_btn">查看更多<img src={guideArrow} alt="" width="14px" className="ml3"/></Link>
+              </p>
+            </div>
+            <ul className="zone_new_three">
+              {
+                newsList.map((i,k)=>{
+                  return(
+                    k > 0 && 
+                    <Link to={`/${temp}/${deptId}/newdetail/${i.id}`}>
+                      <li className="new_item">
+                        <p className="task-hide">
+                          <span className="item_index">{k + 1}</span>
+                          <Link className="zone_n_title" to={`/${temp}/${deptId}/newdetail/${i.id}`}>{i.name}</Link>
+                        </p>
+                        <p className="zone_n_desc task-hide-2">{i.summary}</p>
+                        <p className="zone_n_value">
+                          <span className="font-13" style={{color:"#8d95a3"}}>
+                            <img src={shijian} alt="" className="mr3" />
+                            {i.publishTime}
+                          </span>
+                          <span className="flexCenter zone_btn">查看详情<img src={guideArrow} alt="" width="14px"/></span>
+                        </p>
+                      </li>
+                    </Link>
+                  )
+                })
+              }
+            </ul>
+          </div>
+        </div>
+      }
+
+      <div className="zone_projects pt50 pb30">
+        <p className="in_title mb40">精选项目</p>
+        <Projects projectList={projectList}></Projects>
+      </div>
+
+      <div className="zone_contributor">
+        <p className="in_title">核心贡献者</p>
+        <Contributor personList={personList}></Contributor>
+      </div>
+
+      <div className="zone_community pt60 pb60">
+        <p className="in_title mb20">参与社区</p>
+        <p className="sub_title mb50"><img src={ra} alt="" className="mr5" />成为社区成员，尽情发挥您的创意</p>
+        <div className="c_role boxmain">
+          {
+            communityInfo.map(i => {
+              return (
+                <div className="c_role_item">
+                  <p className="role_level">{ i.level }</p>
+                  <p className="role_todo">{ i.todo }</p>
+                  <div className="dot"></div>
+                </div>
+              )
+            })
+          }
+        </div>
+        <div className="dot_line"></div>
+      </div>
+
+      <div className="zone_grow pt60 pb60">
+        <p className="in_title mb20">开源芯⽚⽤户成长体系介绍</p>
+        <p className="sub_title">参与开源芯⽚项⽬的开发者需要签署开源贡献者协议</p>
+        <p className="sub_title mb50">建议开发者按照开源项⽬成长路径进⾏参与，稳步提升能⼒，降低跳级参与带来的挑战</p>
+        <div className="grow_path boxmain">
+          {
+            growPathInfo.map((i, k) => {
+              return (
+                <div className="grow_path_item">
+                  { k % 2 === 1 && <div className="dot"></div> }
+                  <div className="grow_path_type">
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    { i.type }
+                  </div>
+                  <p className="grow_path_plan">{ i.plan }</p>
+                  { k % 2 === 0 && <div className="dot"></div> }
+                  
+                </div>
+              )
+            })
+          }
+        </div>
+        <div className="line"></div>
+        <div className="grow_introduction boxmain pt40">
+          {
+            introDetail.map(i => {
+              return (
+                <div className="intro_item">
+                  <p className="intro_title">
+                    <img src={i.icon} alt="" className="mr3" />
+                    { i.title }
+                  </p>
+                  <p className="intro_desc">{ i.desc }</p>
+                </div>
+              )
+            })
+          }
+        </div>
+        <div className="dot_line"></div>
+      </div>
+
+      <div className="zone_communicate">
+        <p className="in_title">集萃群智经验   交流心得体会</p>
+        <button>立即加入</button>
+      </div>
+
+      <div className="zone_parter">
+        <p className="in_title">合作伙伴</p>
+        <Partner id={ id }></Partner>
+      </div>
+    </div>
+  )
+}
+export default HeaderPage;
\ No newline at end of file
diff --git a/src/forge/Information/Pages/main.jsx b/src/forge/Information/Pages/main.jsx
index e8617b5fb..841139d65 100644
--- a/src/forge/Information/Pages/main.jsx
+++ b/src/forge/Information/Pages/main.jsx
@@ -10,7 +10,8 @@ import shijian from '../img/shijian.png';
 import liulan from '../img/liulan.png';
 import emptydata from '../../Images/nodata.png';
 import DefaultImg from '../Component/defaultImg';
-import { getNewsAllList , getNewsHotList } from '../api';
+import { httpUrl } from '../fetch';
+import { tempConfig } from '../tempInfo';
 
 function Main(props){
   const [ key , setKey ] = useState("1");
@@ -19,8 +20,10 @@ function Main(props){
   const [ menuH , setMenuH ] = useState(true);
   const [ hotList , setHotList ] = useState(undefined);
   const [ isSpin , setIsSpin ] = useState(true);
+  const [ newCateId , setNewCateId ] = useState(undefined);
   const { deptId , cateId } = props.match.params;
   const { id } = props;
+  const temp = props.pathName
 
 
   useEffect(()=>{
@@ -32,10 +35,14 @@ function Main(props){
   },[id])
 
   function getMainList(){
-    getNewsAllList(id).then(result=>{
+    const url = `${httpUrl}/cms/doc/open/zone/${id}/docOverviewList`;
+    axios.get(url).then(result=>{
       if(result){
         let rows = result.data.rows;
         setMainList(rows);
+        if (temp !== 'zone') {
+          selectCate(rows[0].id)
+        }
         setTimeout(() => {
           let ele = document.getElementById("menus");
           if(ele){
@@ -49,8 +56,9 @@ function Main(props){
   }
 
   function getHotList(){
-    getNewsHotList(id,{
-      pageSize:15,pageNum:1
+    const url = `${httpUrl}/cms/doc/open/zone/${id}/hotDocList`;
+    axios.get(url,{
+      params:{pageSize:15,pageNum:1}
     }).then(result=>{
       if(result){
         setHotList(result.data.rows);
@@ -58,23 +66,41 @@ function Main(props){
     }).catch(error=>{})
   }
 
+  function selectCate(id) {
+    setNewCateId(id)
+    props.history.push(`/${temp}/${deptId}/news/${id}`)
+  }
+
   return(
     <div>
       <div className="main_content">
         <div className="boxmain">
-          <p className="in_title">领域资讯</p>
+          <p className="in_title">{ tempConfig[temp].mainTitle }</p>
           {
             mainList && mainList.length>0 && 
-            <Menu mode={"horizontal"} id="menus" selectedKeys={[cateId||"0"]} style={{justifyContent:menuH?"flex-start":"center"}}>
-              <Menu.Item key={"0"}><Link to={`/zone/${deptId}/news`}>全部</Link></Menu.Item>
-              {
-                mainList.map((i,k)=>{
-                  return(
-                    <Menu.Item key={`${i.id}`}><Link to={`/zone/${deptId}/news/${i.id}`}>{i.name}</Link></Menu.Item>
-                  )
-                })
-              }
-            </Menu>
+            (
+              temp === 'zone' ?
+              <Menu mode={"horizontal"} id="menus" selectedKeys={[cateId||"0"]} style={{justifyContent:menuH?"flex-start":"center"}}>
+                <Menu.Item key={"0"}><Link to={`/${temp}/${deptId}/news`}>全部</Link></Menu.Item>
+                {
+                  mainList.map((i,k)=>{
+                    return(
+                      <Menu.Item key={`${i.id}`}><Link to={`/${temp}/${deptId}/news/${i.id}`}>{i.name}</Link></Menu.Item>
+                    )
+                  })
+                }
+              </Menu>
+              :
+              <div className="main_tag">
+                {
+                  mainList.map((i,k)=>{
+                    return(
+                      <div className={`main_tag_item task-hide ${newCateId === i.id ? 'main_tag_selected' : ''}`} key={`${i.id}`} onClick={() => selectCate(i.id)} >{i.name}</div>
+                    )
+                  })
+                }
+              </div>
+            )
           }
           {
             !mainList && <div style={{height:105}}><Skeleton /></div>
@@ -143,7 +169,7 @@ function Main(props){
             {
               hotList && hotList.length>0 &&
               <div className="short_width radius4">
-                <Hot title={"热门资讯"} list={hotList} deptId={deptId}/>
+                <Hot temp={ temp } title={ tempConfig[temp].hotTitle } list={hotList} deptId={deptId}/>
               </div>
             }
           </Box>
diff --git a/src/forge/Information/Pages/newsDetail.jsx b/src/forge/Information/Pages/newsDetail.jsx
index 8684724b3..d7c00fbb4 100644
--- a/src/forge/Information/Pages/newsDetail.jsx
+++ b/src/forge/Information/Pages/newsDetail.jsx
@@ -4,13 +4,15 @@ import liulan from '../img/liulan.png';
 import RenderHtml from '../../../components/render-html';
 import { Base64 } from 'js-base64';
 import axios from 'axios';
-import { getNewsDetail } from '../api';
+import { httpUrl } from '../fetch';
+import { tempConfig } from '../tempInfo';
 
 function NewsDetail(props){
   const { deptId , id } = props.match.params;
   const [ detail , setDetail ] = useState(undefined);
   const [ cmsDir , setCmsDir ] = useState(undefined);
   const [ content , setContent]=useState(undefined);
+  const temp = props.pathName
 
   useEffect(()=>{
     if(id){
@@ -20,7 +22,8 @@ function NewsDetail(props){
   },[id])
 
   function getDetails(){
-    getNewsDetail(id).then(result=>{
+    const url = `${httpUrl}/cms/doc/open/${id}`;
+    axios.get(url).then(result=>{
       if(result){
         let data = result.data.data;
         setDetail(data);
@@ -35,8 +38,8 @@ function NewsDetail(props){
         detail && 
         <div style={{width:'1200px',margin:"0px auto",padding:"30px 0px"}}>
           <Breadcrumb separator=">">
-            <Breadcrumb.Item href={`/zone/${deptId}/news`}>领域资讯</Breadcrumb.Item>
-            { cmsDir && <Breadcrumb.Item href={`/zone/${deptId}/news/${cmsDir.id}`}>{cmsDir.name}</Breadcrumb.Item> }
+            <Breadcrumb.Item href={`/${temp}/${deptId}/news`}>{tempConfig[temp].mainTitle}</Breadcrumb.Item>
+            { cmsDir && <Breadcrumb.Item href={`/${temp}/${deptId}/news/${cmsDir.id}`}>{cmsDir.name}</Breadcrumb.Item> }
             <Breadcrumb.Item>正文</Breadcrumb.Item>
           </Breadcrumb>
           <div className="info_text">
diff --git a/src/forge/Information/Pages/projectSource.jsx b/src/forge/Information/Pages/projectSource.jsx
index b093147e8..37a0e4b18 100644
--- a/src/forge/Information/Pages/projectSource.jsx
+++ b/src/forge/Information/Pages/projectSource.jsx
@@ -5,7 +5,7 @@ import { Input , Menu , Pagination , Spin } from 'antd';
 import { Link } from 'react-router-dom';
 import Nodata from '../../Nodata';
 import axios from 'axios';
-import { getProjectsLists , getProjectsTypeLists } from '../api';
+import { httpUrl } from '../fetch';
 const { Search } = Input;
 
 function ProjectSource(props){ 
@@ -20,6 +20,7 @@ function ProjectSource(props){
   const [ value , setValue ] = useState(undefined);
   const [ loading , setLoading ]  = useState(false);
   const { id } = props;
+  const temp = props.pathName
 
   useEffect(()=>{
     if(id){
@@ -35,11 +36,14 @@ function ProjectSource(props){
   },[id,typeId,page,searchName])
 
   function getLists(){
-    getProjectsLists(id,{
-      pageNum:page,
-      name:searchName,
-      pageSize,
-      projectTypeId:typeId===0?undefined:typeId
+    const url = `${httpUrl}/zone/open/${id}/project/list`;
+    axios.get(url,{
+      params:{
+        pageNum:page,
+        name:searchName,
+        pageSize,
+        projectTypeId:typeId===0?undefined:typeId
+      }
     }).then(result=>{
       if(result){
         setLists(result.data.rows);
@@ -49,14 +53,15 @@ function ProjectSource(props){
     }).catch(error=>{})
   }
 
+
   function getTypeList(){
-    getProjectsTypeLists(id).then(result=>{
+    const url = `${httpUrl}/zone/open/${id}/projectType/list`;
+    axios.get(url).then(result=>{
       if(result){
         setTypeList(result.data.rows);
       }
     }).catch(error=>{})
   }
-  
   const menu = (
     <Menu>
       <Menu.Item>更新时间排序</Menu.Item>
@@ -146,7 +151,8 @@ function ProjectSource(props){
                                 </ul>
                               }
                               <ul className="in_b_infos">
-                                { i.deptName && <li className="infos_cate">{i.deptName}</li> }
+                                {/* { i.deptName && <li className="infos_cate">{i.deptName}</li> } */}
+                                { i.projectProperties && i.projectProperties.language  && <li className="infos_cate">{i.projectProperties.language}</li> }
                                 { i.projectType && <li className="infos_language">{i.projectType}</li> }
                                 { i.projectProperties && i.projectProperties.timeAgo && <li><i className="iconfont icon-a-31shijian font-13 mr3"></i> 更新于{i.projectProperties.timeAgo}</li>}
                               </ul>
diff --git a/src/forge/Information/Pages/zoneVIP.jsx b/src/forge/Information/Pages/zoneVIP.jsx
index 0eee4127d..791289054 100644
--- a/src/forge/Information/Pages/zoneVIP.jsx
+++ b/src/forge/Information/Pages/zoneVIP.jsx
@@ -3,7 +3,9 @@ import Crown from '../img/crown.png';
 import Nodata from '../../Nodata';
 import { Link } from 'react-router-dom';
 import { Spin } from 'antd';
-import { getVIPLists } from '../api';
+import { httpUrl } from '../fetch';
+import axios from 'axios';
+import '../indexZone1.scss'
 
 
 function ZoneVIP(props){
@@ -11,6 +13,7 @@ function ZoneVIP(props){
   const [ vipLists , setVIPLists ] = useState(undefined);
   const [ isSpin , setIsSpin ] = useState(true);
   const { id } = props;
+  const temp = props.pathName
 
   useEffect(()=>{
     if(id){
@@ -20,7 +23,8 @@ function ZoneVIP(props){
   },[id])
 
   function getLists(){
-    getVIPLists(id).then(response=>{
+    const url = `${httpUrl}/zone/open/${id}/member/overviewList`;
+    axios.get(url).then(response=>{
       if(response){
         setVIPLists(response.data.rows);
         setIsSpin(false);
@@ -29,7 +33,7 @@ function ZoneVIP(props){
   }
 
   return(
-    <div className="boxmain zone_VIP_box">
+    <div className={`boxmain ${temp}_VIP_box`}>
       <p className="in_title">专区会员</p>
       <p className="vip_sub_title">社区根据您的贡献与扮演角色将用户划分成为不同的人员团队，并构建会员成长体系。您有兴趣成为会员，尽情发挥创意与智慧，与专区共同成长吗？</p>
       <Spin spinning={isSpin}>
@@ -43,7 +47,12 @@ function ZoneVIP(props){
                   <div className="vip_list_card">
                     <div className="card_title">
                       <img src={Crown} alt="" width="37px" style={{marginBottom:5,marginRight:5}}/>
-                      <span>{i.typeName}</span>
+                      <div>
+                        <div>
+                          {i.typeName}
+                        </div>
+                        { temp === 'zone1' && <div className="linear_gradient">{i.typeName}</div> }
+                      </div>
                     </div>
                     <p className="card_desc">{i.typeIntroduction}</p>
                     {
@@ -52,11 +61,14 @@ function ZoneVIP(props){
                         {
                           i.zoneMemberList.map((j,key)=>{
                             return(
+                           
                               <li className="card_u_li">
-                                <Link to={`/${j.login}`} ><img src={j.imageUrl} alt="" /></Link>
-                                <div className="card_u_info">
-                                  <div className="card_u_up"><span className="card_name task-hide">{j.name}</span>{j.memberLevel && <span className="card_tag">{j.memberLevel}</span> }</div>
-                                  <p className="card_u_down task-hide-2">{j.introduction}</p>
+                                <div className="card_u_wrap">
+                                  <Link to={`/${j.login}`} ><img src={j.imageUrl} alt="" /></Link>
+                                  <div className="card_u_info">
+                                    <div className="card_u_up"><span className="card_name task-hide">{j.name}</span>{j.memberLevel && <span className="card_tag">{j.memberLevel}</span> }</div>
+                                    <p className="card_u_down task-hide-2">{j.introduction}</p>
+                                  </div>
                                 </div>
                               </li>
                             )
diff --git a/src/forge/Information/fetch.js b/src/forge/Information/fetch.js
index 29cc15d28..d42bb4a05 100644
--- a/src/forge/Information/fetch.js
+++ b/src/forge/Information/fetch.js
@@ -1,44 +1,10 @@
-import axios from 'axios';
-import { message , notification } from 'antd';
+import javaFetch from '../javaFetch';
 
-function beforeFetch(actionUrl){
-  if (window.location.href.indexOf('localhost') < 0) {
-    axios.defaults.withCredentials = true;
-  }
-
-  const service = axios.create({
-    baseURL: actionUrl,
-    timeout: 1800000, // 请求超时时间
-  });
-
-  service.interceptors.response.use(
-    response => {
-      const res = response||{};
-      if(res && res.data && res.data.code === 404){
-        message.error("错误链接！");
-        window.location.href = '/nopage';
-        return Promise.reject('error');
-      }else if(res && res.data && res.data.code === 500){
-        message.error(res.data.msg);
-        return Promise.reject('error');
-      }else{
-        return response;
-      }
-    },
-    error => {
-      console.log(error);
-      // notification.open({
-      //   message: "提示",
-      //   description: error.message,
-      // });
-      // return Promise.reject(error);
-    }
-  )
-  return service;
-}
 let settings = localStorage.chromesetting&&JSON.parse(localStorage.chromesetting);
-let actionUrl = settings && settings.common.zone +'/api';
+let actionUrl = settings && settings.common.zone +"/api";
 
-const service = beforeFetch(actionUrl);
+
+const service = javaFetch(actionUrl);
 export const httpUrl = actionUrl;
+// export const main_site_url = settings && settings.common.main_site_url
 export default service;
\ No newline at end of file
diff --git a/src/forge/Information/img/1.png b/src/forge/Information/img/1.png
new file mode 100644
index 000000000..49e865855
Binary files /dev/null and b/src/forge/Information/img/1.png differ
diff --git a/src/forge/Information/img/cbg.png b/src/forge/Information/img/cbg.png
new file mode 100644
index 000000000..2f05655a1
Binary files /dev/null and b/src/forge/Information/img/cbg.png differ
diff --git a/src/forge/Information/img/cbg2.png b/src/forge/Information/img/cbg2.png
new file mode 100644
index 000000000..2f7a42562
Binary files /dev/null and b/src/forge/Information/img/cbg2.png differ
diff --git a/src/forge/Information/img/communicateBg.png b/src/forge/Information/img/communicateBg.png
new file mode 100644
index 000000000..2f9c7ff87
Binary files /dev/null and b/src/forge/Information/img/communicateBg.png differ
diff --git a/src/forge/Information/img/growBg.png b/src/forge/Information/img/growBg.png
new file mode 100644
index 000000000..69c4506e1
Binary files /dev/null and b/src/forge/Information/img/growBg.png differ
diff --git a/src/forge/Information/img/intro1.png b/src/forge/Information/img/intro1.png
new file mode 100644
index 000000000..0c7978978
Binary files /dev/null and b/src/forge/Information/img/intro1.png differ
diff --git a/src/forge/Information/img/intro2.png b/src/forge/Information/img/intro2.png
new file mode 100644
index 000000000..5eb763589
Binary files /dev/null and b/src/forge/Information/img/intro2.png differ
diff --git a/src/forge/Information/img/intro3.png b/src/forge/Information/img/intro3.png
new file mode 100644
index 000000000..c641ecb8b
Binary files /dev/null and b/src/forge/Information/img/intro3.png differ
diff --git a/src/forge/Information/img/intro4.png b/src/forge/Information/img/intro4.png
new file mode 100644
index 000000000..1e9832b9f
Binary files /dev/null and b/src/forge/Information/img/intro4.png differ
diff --git a/src/forge/Information/img/newsBg.png b/src/forge/Information/img/newsBg.png
new file mode 100644
index 000000000..127cf4df9
Binary files /dev/null and b/src/forge/Information/img/newsBg.png differ
diff --git a/src/forge/Information/img/projectBg.png b/src/forge/Information/img/projectBg.png
new file mode 100644
index 000000000..4648e2547
Binary files /dev/null and b/src/forge/Information/img/projectBg.png differ
diff --git a/src/forge/Information/img/projectLeft.png b/src/forge/Information/img/projectLeft.png
new file mode 100644
index 000000000..c0568bcaf
Binary files /dev/null and b/src/forge/Information/img/projectLeft.png differ
diff --git a/src/forge/Information/img/projectRight.png b/src/forge/Information/img/projectRight.png
new file mode 100644
index 000000000..4f5eed3a3
Binary files /dev/null and b/src/forge/Information/img/projectRight.png differ
diff --git a/src/forge/Information/img/ra.png b/src/forge/Information/img/ra.png
new file mode 100644
index 000000000..6015c61c2
Binary files /dev/null and b/src/forge/Information/img/ra.png differ
diff --git a/src/forge/Information/img/vipListBg.png b/src/forge/Information/img/vipListBg.png
new file mode 100644
index 000000000..839769346
Binary files /dev/null and b/src/forge/Information/img/vipListBg.png differ
diff --git a/src/forge/Information/img/vipTitleBg.png b/src/forge/Information/img/vipTitleBg.png
new file mode 100644
index 000000000..b3cfbaf4b
Binary files /dev/null and b/src/forge/Information/img/vipTitleBg.png differ
diff --git a/src/forge/Information/img/vision0.png b/src/forge/Information/img/vision0.png
new file mode 100644
index 000000000..7fc5da0d6
Binary files /dev/null and b/src/forge/Information/img/vision0.png differ
diff --git a/src/forge/Information/img/vision1.png b/src/forge/Information/img/vision1.png
new file mode 100644
index 000000000..9061cd950
Binary files /dev/null and b/src/forge/Information/img/vision1.png differ
diff --git a/src/forge/Information/img/vision2.png b/src/forge/Information/img/vision2.png
new file mode 100644
index 000000000..e46b3c126
Binary files /dev/null and b/src/forge/Information/img/vision2.png differ
diff --git a/src/forge/Information/img/vision3.png b/src/forge/Information/img/vision3.png
new file mode 100644
index 000000000..4f0d0ee4f
Binary files /dev/null and b/src/forge/Information/img/vision3.png differ
diff --git a/src/forge/Information/img/visionBack.png b/src/forge/Information/img/visionBack.png
new file mode 100644
index 000000000..f1f4be650
Binary files /dev/null and b/src/forge/Information/img/visionBack.png differ
diff --git a/src/forge/Information/img/visionBackActive.png b/src/forge/Information/img/visionBackActive.png
new file mode 100644
index 000000000..9dad4ea10
Binary files /dev/null and b/src/forge/Information/img/visionBackActive.png differ
diff --git a/src/forge/Information/img/zone1Menu1.png b/src/forge/Information/img/zone1Menu1.png
new file mode 100644
index 000000000..623ebbedb
Binary files /dev/null and b/src/forge/Information/img/zone1Menu1.png differ
diff --git a/src/forge/Information/img/zone1Menu2.png b/src/forge/Information/img/zone1Menu2.png
new file mode 100644
index 000000000..112fa05a0
Binary files /dev/null and b/src/forge/Information/img/zone1Menu2.png differ
diff --git a/src/forge/Information/img/zone1Menu4.png b/src/forge/Information/img/zone1Menu4.png
new file mode 100644
index 000000000..851a1da99
Binary files /dev/null and b/src/forge/Information/img/zone1Menu4.png differ
diff --git a/src/forge/Information/img/zone1Menu6.png b/src/forge/Information/img/zone1Menu6.png
new file mode 100644
index 000000000..824e638da
Binary files /dev/null and b/src/forge/Information/img/zone1Menu6.png differ
diff --git a/src/forge/Information/img/menu1.png b/src/forge/Information/img/zoneMenu1.png
similarity index 100%
rename from src/forge/Information/img/menu1.png
rename to src/forge/Information/img/zoneMenu1.png
diff --git a/src/forge/Information/img/menu2.png b/src/forge/Information/img/zoneMenu2.png
similarity index 100%
rename from src/forge/Information/img/menu2.png
rename to src/forge/Information/img/zoneMenu2.png
diff --git a/src/forge/Information/img/menu4.png b/src/forge/Information/img/zoneMenu4.png
similarity index 100%
rename from src/forge/Information/img/menu4.png
rename to src/forge/Information/img/zoneMenu4.png
diff --git a/src/forge/Information/img/menu6.png b/src/forge/Information/img/zoneMenu6.png
similarity index 100%
rename from src/forge/Information/img/menu6.png
rename to src/forge/Information/img/zoneMenu6.png
diff --git a/src/forge/Information/index.jsx b/src/forge/Information/index.jsx
index 1b61224be..90b81c61f 100644
--- a/src/forge/Information/index.jsx
+++ b/src/forge/Information/index.jsx
@@ -1,15 +1,19 @@
 import React ,{ useEffect , useState } from "react";
 
-import { Route, Switch } from "react-router-dom";
+import { Route, Switch, useLocation } from "react-router-dom";
 import { withRouter } from "react-router";
+import { httpUrl } from './fetch';
+
 import { SnackbarHOC } from "educoder";
 import { CNotificationHOC } from "../../modules/courses/common/CNotificationHOC";
 import { TPMIndexHOC } from "../../modules/tpm/TPMIndexHOC";
 import Loadable from "react-loadable";
 import Loading from "../../Loading";
+import axios from 'axios';
 import PublicBanner from "./Component/publicBanner";
-import { getMainInfos , getCheckZoneRole } from './api';
 import './index.scss';
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
 
 const VIP = Loadable({
   loader: () => import("./Pages/zoneVIP"),
@@ -19,6 +23,12 @@ const HeaderPage = Loadable({
   loader: () => import("./Pages/headerPage"),
   loading: Loading,
 });
+
+const HeaderPageZone1 = Loadable({
+  loader: () => import("./Pages/headerPageZone1"),
+  loading: Loading,
+});
+
 const ProjectSource = Loadable({
   loader: () => import("./Pages/projectSource"),
   loading: Loading,
@@ -27,15 +37,22 @@ const NewsDetail = Loadable({
   loader: () => import("./Pages/newsDetail"),
   loading: Loading,
 });
+const NewsList = Loadable({
+  loader: () => import("./Pages/newsList"),
+  loading: Loading,
+});
+
 const Main = Loadable({
   loader: () => import("./Pages/main"),
   loading: Loading,
 });
+
 function Index(props){
   const [ data , setData ] = useState(undefined);
   const [ adminUrl , setAdminUrl ] = useState(undefined);
   const { deptId } = props.match.params;
   const [ id , setId ] = useState(undefined);
+  const temp = props.pathName
 
   useEffect(()=>{
     if(deptId){
@@ -43,8 +60,14 @@ function Index(props){
     }
   },[deptId])
 
+  function setTheme() {
+    document.getElementsByTagName("html")[0].dataset.theme = temp;
+  }
+  setTheme()
+
   function getDetail(){
-    getMainInfos(deptId).then(result=>{
+    const url = `${httpUrl}/zone/open/zoneName/${deptId}`;
+    axios.get(url).then(result=>{
       if(result){
         let data = result.data.data;
         setData(data);
@@ -58,8 +81,12 @@ function Index(props){
   }
 
   function getAdminUrl(id){
-    getCheckZoneRole(id).then(response=>{
-      if(response && response.data && response.data.data){
+    const url = `${httpUrl}/zone/zoneDetail/${deptId}/checkZoneRole`;
+    if (window.location.href.indexOf('localhost') < 0) {
+      axios.defaults.withCredentials = true;
+    }
+    axios.get(url).then(response=>{
+      if(response && response.data.code === 200){
         setAdminUrl(response.data.data);
       }else{
         setAdminUrl(undefined);
@@ -71,39 +98,39 @@ function Index(props){
       <PublicBanner {...props} data={data} adminUrl={adminUrl}/>
       <Switch>
         <Route
-          path="/zone/:deptId/news/:cateId"
+          path="/:temp/:deptId/news/:cateId"
           render={(p) => (
             <Main {...props} {...p} id={id}/>
           )}
         ></Route>
         <Route
-          path="/zone/:deptId/newdetail/:id"
+          path="/:temp/:deptId/newdetail/:id"
           render={(p) => (
             <NewsDetail {...props} {...p} id={id}/>
           )}
         ></Route>
         <Route
-          path="/zone/:deptId/VIP"
+          path="/:temp/:deptId/VIP"
           render={(p) => (
             <VIP {...props} {...p} id={id}/>
           )}
         ></Route>
         <Route
-          path="/zone/:deptId/projects"
+          path="/:temp/:deptId/projects"
           render={(p) => (
             <ProjectSource {...props} {...p} id={id}/>
           )}
         ></Route>
         <Route
-          path="/zone/:deptId/news"
+          path="/:temp/:deptId/news"
           render={(p) => (
             <Main {...props} {...p} id={id}/>
           )}
         ></Route>
         <Route
-          path="/zone/:deptId"
+          path="/:temp/:deptId"
           render={(p) => (
-            <HeaderPage {...props} {...p} data={data} id={id}/>
+            temp === 'zone' ? <HeaderPage {...props} {...p} data={data} id={id}/> : <HeaderPageZone1 {...props} {...p} data={data} id={id}/>
           )}
         ></Route>
       </Switch>
diff --git a/src/forge/Information/index.scss b/src/forge/Information/index.scss
index 95176d674..ef25fa9ab 100644
--- a/src/forge/Information/index.scss
+++ b/src/forge/Information/index.scss
@@ -1,3 +1,5 @@
+@import './theme.scss';
+
 .information_main{
   background-color:#f3f5f8;
   min-height: 100vh;
@@ -5,7 +7,7 @@
     font-size: 15px;
     margin-bottom: 20px;
     .ant-breadcrumb-link{
-      color: #466aff;
+      color: var(--primary-color);
     }
     & > span:last-child .ant-breadcrumb-link{
       color: rgba(76, 88, 118, 1);
@@ -79,7 +81,7 @@
             left: 0px;
             height: 4px;
             bottom: 1px;
-            background-color: #466aff;
+            background-color: var(--primary-color);
           }
           &.ant-menu-item-active::after{
             background-color:rgba(255, 255, 255, 0.36);
@@ -147,7 +149,7 @@
           text-overflow: ellipsis;
         }
         &:hover{
-          color: #466aff;
+          color: var(--primary-color);
         }
         span{
           display: block;
@@ -156,7 +158,7 @@
           color: #fff;
           height:22px;
           line-height:22px;
-          background-color:#466aff;
+          background-color: var(--primary-color);
           opacity: 0.3;
           border-radius:2px;
           margin-right: 7px;
@@ -354,6 +356,53 @@
 .boxmain{
   width: 1200px;
   margin:0px auto;
+  .main_tag {
+    height: 50px;
+    width: fit-content;
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    margin-top: 42px;
+    margin-bottom: 48px;
+    box-shadow:0px 0px 15px rgba(30, 47, 162, 0.09);
+    overflow: hidden;
+    .main_tag_item {
+      background-color: #f6f7fa;
+      text-align: center;
+      line-height: 50px;
+      border-top: solid white 2px;
+      border-bottom: solid white 2px;
+      width: 164px;
+      position: relative;
+      padding: 0 5px;
+      cursor: pointer;
+      a {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+    .main_tag_item:last-child {
+      border-right: solid white 2px;
+    }
+    .main_tag_item:first-child {
+      border-left: solid white 2px;
+    }
+    .main_tag_item:not(:last-child)::after {
+      content: "";
+      height: 100%;
+      width: 1px;
+      background-color: #8d95ac;
+      opacity: 0.17;
+      position: absolute;
+      right: 0;
+    }
+    .main_tag_selected {
+      background-color: #089f7f;
+      color: white;
+      border: none !important;
+    }
+  }
 }
 .flexCenter{
   display: flex;
@@ -420,6 +469,14 @@
       align-items: center;
       justify-content: space-between;
       margin-bottom: 5px;
+      .ant-btn-primary{
+        color: #fff;
+        background-color: var(--primary-color);
+        border:none;
+        &:hover{
+          background-color: var(--light-color);
+        }
+      }
     }
     .in_list_box{
       min-height: 40vh;
@@ -481,10 +538,10 @@
           li{
             height:24px;
             line-height:24px;
-            background-color:rgba(70, 106, 255, 0.12);
+            background-color:var(--tag-back);
             border-radius:2px;
             margin-right: 12px;
-            color:#466aff;
+            color: var(--primary-color);
             font-size:13px;
             padding:0px 7px;
           }
@@ -506,7 +563,7 @@
               content: "";
               width:6px;
               height:6px;
-              background-color:#466aff;
+              background-color:var(--primary-color);
               border-radius: 50%;
             }
             &::after{
@@ -551,8 +608,8 @@
         align-items: center;
       }
       &.active{
-        color:#466aff;
-        background-image:linear-gradient(89.9deg,rgba(70, 106, 255, 0) 0%,rgba(70, 106, 255, 0.09) 100%);
+        color: var(--primary-color);
+        background-image: var(--linear-back-color);
       }
       &.active::after{
         position: absolute;
@@ -560,7 +617,7 @@
         height: 100%;
         content: "";
         width: 3px;
-        background-color: #466aff;
+        background-color: var(--primary-color);;
       }
     }
   }
@@ -577,6 +634,7 @@
     padding:27px 24px;
     &>img{
       border-radius: 4px;
+      object-fit: cover;
     }
     .zone_infos_desc{
       padding:0px 34px 0px 10px;
@@ -702,15 +760,15 @@
           margin-right: 0px!important;
         }
         .imgBox{
-          // background-color: #E3E7F3;
-          border-radius: 50%;
+          background-color: #E3E7F3;
+          border-radius: 8px;
           width: 75px;
           height: 75px;
           margin-right: 14px;
           img{
             width: 75px;
             height: 75px;
-            border-radius: 50%;
+            border-radius: 8px;
           }
         }
         .infosBox{
@@ -882,51 +940,53 @@
         margin-top: 15px;
         padding-bottom: 10px;
         .card_u_li{
-          display: flex;
-          padding:25px 0px;
-          border-bottom: 1px dashed rgba(141, 149, 172,0.27);
-          align-items: center;
-          object-fit: cover;
-          &:last-child{
+          &:last-child .card_u_wrap{
             border-bottom: none;
           }
-          & > a >img{
-            width: 100px;
-            height: 100px;
-            border-radius: 50%;
-            margin-right: 24px;
-          }
-          .card_u_info{
-            .card_u_down{
-              color:#4c5876;
-              font-size:15px;
-              line-height:26px;
-              word-break: break-all;
-              margin-top: 15px;
+          .card_u_wrap {
+            display: flex;
+            padding:25px 0px;
+            border-bottom: 1px dashed rgba(141, 149, 172,0.27);
+            align-items: center;
+            object-fit: cover;
+            & > a >img{
+              width: 100px;
+              height: 100px;
+              border-radius: 50%;
+              margin-right: 24px;
             }
-            .card_u_up{
-              display: flex;
-              align-items: center;
-              .card_name{
-                font-weight:700;
-                color:#1f2329;
-                font-size:16px;
-                display: block;
-                max-width: 700px;
-                height:26px;
-                line-height: 26px;
-              }
-              .card_tag{
-                display: inline-block;
-                height:26px;
-                background-color:rgba(70, 106, 255, 0.13);
-                border-radius:2px;
-                min-width: 76px;
-                text-align: center;
-                line-height: 26px;
-                color:#466aff;
+            .card_u_info{
+              .card_u_down{
+                color:#4c5876;
                 font-size:15px;
-                margin-left: 15px;
+                line-height:26px;
+                word-break: break-all;
+                margin-top: 15px;
+              }
+              .card_u_up{
+                display: flex;
+                align-items: center;
+                .card_name{
+                  font-weight:700;
+                  color:#1f2329;
+                  font-size:16px;
+                  display: block;
+                  max-width: 700px;
+                  height:26px;
+                  line-height: 26px;
+                }
+                .card_tag{
+                  display: inline-block;
+                  height:26px;
+                  background-color:rgba(70, 106, 255, 0.13);
+                  border-radius:2px;
+                  min-width: 76px;
+                  text-align: center;
+                  line-height: 26px;
+                  color:#466aff;
+                  font-size:15px;
+                  margin-left: 15px;
+                }
               }
             }
           }
@@ -934,10 +994,4 @@
       }
     }
   }
-}
-.informations_detail.markdown-body{
-  &>p{
-    line-height: 32px;
-    margin-bottom: 8px!important;
-  }
 }
\ No newline at end of file
diff --git a/src/forge/Information/indexZone1.scss b/src/forge/Information/indexZone1.scss
new file mode 100644
index 000000000..504ffe3b2
--- /dev/null
+++ b/src/forge/Information/indexZone1.scss
@@ -0,0 +1,661 @@
+@import './theme.scss';
+
+
+.zone1_box{
+    padding-top:70px;
+    background-color:#f7f9fc;
+    .zone_infos{
+      display: flex;
+      align-items: center;
+      margin-top: 54px;
+      padding:27px 24px;
+      &>img{
+        border-radius: 4px;
+        object-fit: cover;
+      }
+      .zone_infos_desc{
+        padding:0px 34px 0px 10px;
+        flex: 1;
+        .z_name{
+          color:#1f2329;
+          font-size:26px;
+          height: 28px;
+          line-height: 28px;
+          margin-bottom: 28px!important;
+        }
+        .z_desc{
+          color:#3d485d;
+          font-size:14px;
+          line-height:32px;
+          word-break: break-all;
+          -webkit-line-clamp: 4;
+        }
+      }
+    }
+    .zone_vision {
+      background-color: #ffffff;
+        .boxmain {
+            display: flex;
+            justify-content: space-between;
+        }
+        .vision_item {
+            width: 244px;
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            .vision_icon {
+                height: 162px;
+                width: 162px;
+                background-image: url(./img/visionBack.png);
+                background-size: 100% 100%;
+                position: relative;
+                img {
+                  width: 30%;
+                  position: absolute;
+                  left: 50%;
+                  top: 50%;
+                  transform: translate(-50%, -50%);
+                }
+            }
+            .vision_icon:hover {
+                background-image: url(./img/visionBackActive.png);
+            }
+            .vision_title {
+                font-weight:700;
+                color:#1f2329;
+                font-size:17px;
+                line-height:27px;
+                text-align:center;
+                margin-top: 39px;
+            }
+            .vision_content {
+                margin-top: 21px;
+                color:#4c5876;
+                font-size:14px;
+                line-height:27px;
+                text-align:center;
+            }
+        }
+    }
+    .zone_news{
+      height: 29vw;
+      min-height: 475px;
+      background-color: #273144;
+      background-image: url(./img/newsBg.png);
+      background-repeat: no-repeat;
+      background-size: contain;
+      .boxmain {
+        width: 1200px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+      }
+      .news_title {
+        height: 44px;
+        font-weight: 500;
+        color: #ffffff;
+        font-size: 32px;
+        transform: translate(40%, 0);
+      }
+      .new_first_title {
+        height: 25px;
+        color: #ffffff;
+        font-size: 18px;
+      }
+      .new_first_desc {
+        opacity: 80%;
+        height: 20px;
+        color: #ffffff;
+        font-size: 14px;
+        line-height: 27px;
+      }
+      .zone_n_title{
+        color:#1f2329;
+        font-size:17px;
+        height: 24px;
+        line-height: 24px;
+      }
+      .zone_n_desc{
+        color:#4c5876;
+        font-size:14px;
+        line-height:27px;
+        word-break: break-all;
+      }
+      .zone_n_value{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 20px;
+        line-height: 20px;
+      }
+      .zone_btn{
+        padding-right: 20px;
+        position: relative;
+        height: 20px;
+        line-height: 20px;
+        color: #07a583;
+        transition: 0.1s;
+        img{
+          position: absolute;
+          left: 62px;
+          top:5px;
+          transition: 0.1s;
+        }
+      }
+      .item_index {
+        display: inline-block;
+        width:26px;
+        height:26px;
+        margin-right: 12px;
+        border:1px solid;
+        border-color:#07a583;
+        border-radius:3px;
+        text-align: center;
+        line-height: 26px;
+        color: #07a583;
+        font-size: 14px;
+      }
+      .zone_new_first{
+        margin-left: 40%;
+        border-radius: 4px;
+        width: 682px;
+        padding-right: 30px;
+        .item_index {
+          font-weight:700;
+          color:#ffffff;
+          background-color:#07a583;
+        }
+      }
+      .zone_new_three{
+        width: 1200px;
+        display: flex;
+        justify-content: space-between;
+        margin: 0 auto;
+        li{
+          background-color: #fff;
+          width: 354px;
+          height: 196px;
+          padding:28px 22px;
+          border-radius: 4px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          transition: 0.1s;
+        }
+        .new_item {
+            cursor: pointer;
+        }
+        .new_item:hover {
+            transform: translate(0, -10px);
+            img{
+                left: 73px;
+            }
+            .zone_btn {
+                transform: translate(-5px, 0);
+            }
+            .zone_n_title {
+                color: #07a583;
+            }
+        }
+      }
+    }
+    .zone_projects{
+      background-image:linear-gradient(180deg,#f1f4fa 0%,#ffffff 100%);
+      .right_arraw {
+        width: 48px;
+        height: 48px;
+        right: 0;
+      }
+      .left_arraw {
+        width: 48px;
+        height: 48px;
+        left: 0;
+      }
+      .slick-track {
+        display: flex;
+        align-items: center;
+        height: 435px;
+        .slick-slide {
+          height: auto;
+          opacity: 0;
+        }
+        .slick-active {
+          opacity: 1;
+        }
+      }
+      .container {
+
+      }
+      .slick-current {
+        z-index: 100;
+      }
+      .slick-current .zone_p_item {
+        width:364px;
+        height:395px;
+        background:#fefefe;
+      }
+      .zone_p_item {
+        cursor: pointer;
+        width: 364px;
+        height: 320px;
+        border-radius:16px;
+        padding: 42px;
+        box-shadow:0px 0px 20px rgba(35, 54, 185, 0.06);
+        background: url(./img/projectBg.png) no-repeat;
+        background-size: 100% 100%;
+        border-color:#ffffff;
+        transition: 0.3s;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .info_img {
+          width:74px;
+          height: 74px;
+          border-radius: 50%;
+        }
+        .z_p_title {
+          height: 22px;
+          font-weight: 700;
+          color: #1f2329;
+          font-size: 16px;
+          text-align: center;
+          margin-top: 20px;
+        }
+        .z_p_desc{
+          margin-top: 18px;
+          color:#4c5876;
+          font-size:14px;
+          line-height:22px;
+          word-break: break-all;
+          -webkit-line-clamp: 5
+        }
+      }
+    }
+    .zone_contributor{
+      min-height: 466px;
+      background-color: #F7F9FC;
+      padding:44px 0px 30px;
+      .container {
+        height: 220px;
+      }
+      .zone_c_lists{
+        .slick-track {
+          display: flex;
+        }
+        .c_item {
+          margin-top: 40px;
+          margin-left: 10px;
+          width: 380px;
+          height: 165px;
+          background-image: url(./img/cbg.png);
+          background-size: 100% 100%;
+          position: relative;
+          background-color:#f6f7fa;
+          border:2px solid;
+          border-color:#ffffff;
+          border-radius:4px;
+          box-shadow:0px 0px 10px rgba(7, 70, 165, 0.11);
+          padding: 30px 35px;
+          img {
+            position: absolute;
+            width:80px;
+            height:80px;
+            border-radius: 50%;
+            border: solid 2px #ffffff;
+            right: 27px;
+            top: -40px;
+            object-fit: cover;
+          }
+          .c_name {
+            color: #000000;
+            font-size: 16px;
+            text-align: center;
+          }
+          .c_desc {
+            color: #4c5876;
+            font-size: 15px;
+            line-height: 26px;
+          }
+        }
+        .c_item:hover {
+          box-shadow:0px 0px 35px rgba(7, 70, 165, 0.11);
+        }
+      }
+    }
+    .zone_community {
+      background-color:#ebeff5;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .sub_title {
+        font-size: 17px;
+        line-height: 27px;
+        img {
+          width:32.93px;
+          height:9.15px;
+        }
+      }
+      .c_role {
+        display: flex;
+        justify-content: space-between;
+        z-index: 10;
+        .c_role_item {
+          width: 260px;
+          height: 213px;
+          background-image: url(./img/cbg2.png);
+          background-size: 100% 100%;
+          position: relative;
+          padding: 30px 23px;
+          .role_level {
+            font-weight: 700;
+            font-size: 18px;
+            line-height: 27px;
+          }
+          .role_todo {
+            color: #3d485d;
+            font-size: 15px;
+            line-height: 27px;
+            margin-top: 10px;
+          }
+          .dot {
+            width:14px;
+            height:14px;
+            border-radius: 50%;
+            background-color:#07a583;
+            position: absolute;
+            left: 6px;
+            bottom: 7px;
+          }
+        }
+      }
+      .dot_line {
+        height: 0px;
+        width: 1200px;
+        border-bottom: dashed 1px #8d95ac;
+        transform: translate(0, -14px);
+      }
+    }
+    .zone_grow {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      background: url('./img/growBg.png') no-repeat;
+      background-size: 100% 100%;
+      .grow_path {
+        height: 158px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        .grow_path_item {
+          z-index: 10;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          .grow_path_type {
+            width: 82px;
+            height: 28px;
+            border: 1px solid;
+            border-color: #07a583;
+            border-radius: 2px;
+            color: #07a583;
+            font-size: 15px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-top: 10px;
+            div {
+              width: 3px;
+              height: 13px;
+              background-color: #07a583;
+              margin-right: 3px;
+            }
+          }
+          .grow_path_plan {
+            color: #4c5876;
+            font-size: 15px;
+            text-align: center;
+            margin: 5px 0;
+          }
+        }
+        .grow_path_item:nth-child(even) {
+          align-self: self-end;
+        }
+        .grow_path_item:nth-child(odd) {
+          align-self: self-start;
+        }
+        .dot {
+          width:12px;
+          height:12px;
+          background-color:#ffffff;
+          border:1px solid;
+          border-color:#07a583;
+          border-radius: 50%;
+        }
+      }
+      .line {
+        height: 0px;
+        width: 1200px;
+        border-bottom: solid 1px #07a583;
+        transform: translate(0, -80px);
+      }
+      .grow_introduction {
+        display: flex;
+        justify-content: space-between;
+        .intro_item {
+          width: 275px;
+          height: 250px;
+          background-color: #ffffff;
+          border-radius: 6px;
+          box-shadow: 0px 0px 12px rgba(29, 72, 129, 0.08);
+          padding: 22px 17px;
+          transition: 0.1s;
+          .intro_title {
+            font-weight: 700;
+            color: #3d485d;
+            font-size: 16px;
+            img {
+              width: 36px;
+              height: 36px;
+              margin-right: 10px;
+            }
+          }
+          .intro_desc {
+            color: #4c5876;
+            font-size: 15px;
+            margin-top: 6px;
+          }
+        }
+        .intro_item:hover {
+          transform: translate(0, -20px);
+        }
+      }
+    }
+    .zone_communicate {
+      height: 160px;
+      background: url('./img/communicateBg.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-evenly;
+      p {
+        font-weight: 500;
+        font-size: 22px;
+        color: #ffffff;
+      }
+      button {
+        width: 140px;
+        height: 40px;
+        color: #ffffff;
+        background-color: #07a583;
+        border-radius: 2px;
+        font-size: 16px;
+        cursor: pointer;
+        border: none;
+      }
+    }
+    .zone_parter{
+      background-color: #fff;
+      padding:70px 0px 90px;
+      #scrollBox1{
+        max-height: 332px;
+        overflow: hidden;
+        margin: 35px 0px 0px;
+        width: 100%;
+        .unitMainSlider{
+          width: 1200px;
+          margin:0px auto;
+          .slick-list{
+            height: 140px;
+            width: 100%;
+            overflow: hidden;
+            .slickMainline{
+              display: flex!important;
+              padding:10px 2px;
+              align-items: center;
+              justify-content: center;
+              a{
+                background: #FFFFFF;
+                box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.06);
+                border-radius: 4px;
+                border: 1px solid #FFFFFF;
+                margin-right: 20px;
+                padding:20px;
+                height: 120px;
+                width: 220px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                &:hover{
+                  border: 1px solid #8FCEFF;
+                }
+                img{
+                  max-width: 100%;
+                  max-height: 100%;
+                }
+                &:last-child{
+                  margin-right: 0px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+}
+  .zone1_VIP_box{
+    padding:50px 0px;
+    .vip_sub_title{
+      color:#1f2329;
+      font-size:15px;
+      line-height:27px;
+      text-align:center;
+      max-width: 1000px;
+      word-break: break-all;
+      margin:16px auto 0px;
+    }
+    .vip_list{
+      width: 1200px;
+      background-image: url('./img/vipListBg.png'), linear-gradient(180deg,#009f7d 0%,#0f6754 100%);
+      background-repeat: no-repeat;
+      background-size: contain;
+      border-radius: 10px;
+      .vip_list_card{
+        padding:0px 40px 10px;
+        .card_title{
+          width: 443px;
+          height: 49px;
+          background: url('./img/vipTitleBg.png') no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin: 0 auto;
+          margin-top: 38px;
+          font-size: 20px;
+          font-weight: 700;
+          div {
+            div:nth-child(1) {
+              text-shadow: 0 1px 0 #fed5a6;
+              color: #ffffff;
+            }
+            div:nth-child(2) {
+              position: absolute;
+              z-index: 10;
+              background-image: -webkit-linear-gradient(0deg,#fffcf9 0%,#ffffff 51.47%,#fed5a6 100%);
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+              text-shadow: none;
+            }
+          }
+        }
+        .card_desc{
+          color:#ffffff;
+          font-size:15px;
+          line-height:32px;
+          word-break: break-all;
+          margin-top: 32px;
+        }
+        .card_ul{
+          margin: 25px 25px 25px 0;
+          padding-bottom: 10px;
+          background-image: linear-gradient(180deg,#f7f9fc 0%,#ffffff 100%);
+          border-radius: 12px;
+          .card_u_li{
+            &:last-child .card_u_wrap{
+              border-bottom: none;
+            }
+            .card_u_wrap {
+              display: flex;
+              padding:30px 40px;
+              border-bottom: 1px dashed rgba(141, 149, 172,0.27);
+              align-items: center;
+              object-fit: cover;
+              & > a >img{
+                width: 80px;
+                height: 80px;
+                border-radius: 50%;
+                margin-right: 24px;
+              }
+              .card_u_info{
+                .card_u_down{
+                  color:#4c5876;
+                  font-size:15px;
+                  line-height:26px;
+                  word-break: break-all;
+                  margin-top: 15px;
+                }
+                .card_u_up{
+                  display: flex;
+                  align-items: center;
+                  .card_name{
+                    font-weight:700;
+                    color:#1f2329;
+                    font-size:16px;
+                    display: block;
+                    max-width: 700px;
+                    height:26px;
+                    line-height: 26px;
+                  }
+                  .card_tag{
+                    color: #07a583;
+                    border: 1px solid;
+                    border-color: #07a583;
+                    border-radius: 2px;
+                    display: inline-block;
+                    min-width: 76px;
+                    text-align: center;
+                    line-height: 26px;
+                    font-size:15px;
+                    margin-left: 15px;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/src/forge/Information/tempInfo.js b/src/forge/Information/tempInfo.js
new file mode 100644
index 000000000..38b434b4d
--- /dev/null
+++ b/src/forge/Information/tempInfo.js
@@ -0,0 +1,13 @@
+export const tempConfig = {
+    zone: {
+        mainTitle: '领域资讯',
+        hotTitle: '热门资讯',
+        member: '专区会员'
+    },
+    zone1: {
+        mainTitle: '新闻资讯',
+        hotTitle: '热门新闻资讯',
+        member: '荣誉榜单'
+    }
+}
+
diff --git a/src/forge/Information/theme.scss b/src/forge/Information/theme.scss
new file mode 100644
index 000000000..40f14bc81
--- /dev/null
+++ b/src/forge/Information/theme.scss
@@ -0,0 +1,12 @@
+html[data-theme="zone"] {
+    --primary-color: #466aff;
+    --light-color: rgba(70,106,255,0.85);
+    --linear-back-color: linear-gradient(89.9deg,rgba(70, 106, 255, 0) 0%,rgba(70, 106, 255, 0.09) 100%);
+    --tag-back: rgba(70, 106, 255, 0.12);
+}
+html[data-theme="zone1"] {
+    --primary-color: #089f7f;
+    --light-color: rgba(7, 165, 131, 0.85);
+    --linear-back-color: linear-gradient(89.9deg,rgba(7, 165, 131, 0) 0%,rgba(7, 165, 131, 0.09) 100%);
+    --tag-back: rgba(142, 147, 161, 0.1);
+}
\ No newline at end of file