diff --git a/src/App.js b/src/App.js
index 7130cc68..57c94765 100644
--- a/src/App.js
+++ b/src/App.js
@@ -120,7 +120,7 @@ class App extends Component {
 		});
 
 		initAxiosInterceptors(this.props);
-		this.getAppdata();
+		this.getSetting();
 
 		window.addEventListener('error', (event) => {
 			const msg = `${event.type}: ${event.message}`;
@@ -133,67 +133,30 @@ class App extends Component {
 		})
 	};
 
-	//获取数据为空的时候
-	gettablogourlnull = () => {
-		this.setState({
-			mygetHelmetapi: undefined
-		});
-		document.title = "Forge";
-		var link = document.createElement('link'),
-			oldLink = document.getElementById('dynamic-favicon');
-		link.id = 'dynamic-favicon';
-		link.rel = 'shortcut icon';
-		link.href = "/react/build/./favicon.ico";
-		if (oldLink) {
-			document.head.removeChild(oldLink);
-		}
-		document.head.appendChild(link);
-	};
 
-	//获取数据的时候
+	getSetting=()=>{
+		const url = `/setting.json`;
+		axios.get(url).then(result=>{
+			if(result){
+				this.setState({
+					headData:result.data.data
+				})
+				this.gettablogourldata(result.data.data)
+			}
+		}).catch(error=>{})
+	}
+
 	gettablogourldata = (response) => {
-		document.title = response.data.setting.name;
-		var link = document.createElement('link'),
-			oldLink = document.getElementById('dynamic-favicon');
+		document.title = response.name;
+		var link = document.createElement('link'),oldLink = document.getElementById('dynamic-favicon');
 		link.id = 'dynamic-favicon';
 		link.rel = 'shortcut icon';
-		link.href = '/' + response.data.setting.tab_logo_url;
+		link.href = '/' + response.tab_logo_url;
 		if (oldLink) {
 			document.head.removeChild(oldLink);
 		}
 		document.head.appendChild(link);
 	}
-	//获取当前定制信息
-	getAppdata = () => {
-		let url = "/setting.json";
-		axios.get(url).then((response) => {
-			if (response) {
-				if (response.data) {
-					this.setState({
-						mygetHelmetapi: response.data.setting
-					});
-					//存储配置到游览器
-					localStorage.setItem('chromesetting', JSON.stringify(response.data.setting));
-					localStorage.setItem('chromesettingresponse', JSON.stringify(response));
-					try {
-						if (response.data.setting.tab_logo_url) {
-							this.gettablogourldata(response);
-						} else {
-							this.gettablogourlnull();
-						}
-					} catch (e) {
-						this.gettablogourlnull();
-					}
-				} else {
-					this.gettablogourlnull();
-				}
-			} else {
-				this.gettablogourlnull();
-			}
-		}).catch((error) => {
-			this.gettablogourlnull();
-		});
-	};
 
 	render() {
 		return (
diff --git a/src/AppConfig.js b/src/AppConfig.js
index 3b223f44..1f87e949 100644
--- a/src/AppConfig.js
+++ b/src/AppConfig.js
@@ -34,7 +34,7 @@ function clearAllCookie() {
   cookie.remove('autologin_trustie', { path: '/' });
   setpostcookie()
 }
-clearAllCookie();
+// clearAllCookie();
 function setpostcookie() {
   const str = window.location.pathname;
   if (str.indexOf("/wxcode") !== -1) {
@@ -50,13 +50,13 @@ function setpostcookie() {
     }
   }
 }
-setpostcookie();
+// setpostcookie();
 
 window._debugType = debugType;
 export function initAxiosInterceptors(props) {
   initOnlineOfflineListener();
   var proxy = "http://localhost:3000";
-    proxy = "http://192.168.1.37:3000";
+    proxy = "https://mulan.trustie.net";
 
   const requestMap = {};
   window.setfalseInRequestMap = function (keyName) {
@@ -65,10 +65,10 @@ export function initAxiosInterceptors(props) {
   //响应前的设置
   axios.interceptors.request.use(
     config => {
-      setpostcookie()
-      clearAllCookie()
+      // clearAllCookie()
+      // setpostcookie()
 
-      if (config.url.indexOf(proxy) !== -1) {
+      if (config.url.indexOf("http") !== -1) {
         return config
       }
       requestProxy(config)
@@ -79,20 +79,20 @@ export function initAxiosInterceptors(props) {
         if (window.location.port === "3007") {
           config.url = `${proxy}${url}`;
           if (config.url.indexOf('?') === -1) {
-            config.url = `${config.url}?debug=${debugType}`;
+            config.url = `${config.url}`;
           } else {
-            config.url = `${config.url}&debug=${debugType}`;
+            config.url = `${config.url}`;
           }
         } else {
           config.url = url;
         }
-        setpostcookie();
+        // setpostcookie();
       }
-      if (config.url.indexOf('update_file') === -1) {
-        requestMap[config.url] = true;
+      // if (config.url.indexOf('update_file') === -1) {
+      //   requestMap[config.url] = true;
 
-        window.setTimeout("setfalseInRequestMap('" + config.url + "')", 900)
-      }
+      //   window.setTimeout("setfalseInRequestMap('" + config.url + "')", 900)
+      // }
       return config;
     },
     err => {
@@ -147,7 +147,7 @@ export function initAxiosInterceptors(props) {
       }, 2000);
     }
     requestMap[response.config.url] = false;
-    setpostcookie();
+    // setpostcookie();
     return response;
   }, function (error) {
     return Promise.reject(error);
diff --git a/src/indexEduplus2RequestProxy.js b/src/indexEduplus2RequestProxy.js
index 81cfba0e..fc3e2111 100644
--- a/src/indexEduplus2RequestProxy.js
+++ b/src/indexEduplus2RequestProxy.js
@@ -66,19 +66,3 @@ export function requestProxy(config) {
     }
     return config;
 }
-
-/**
-    ('/api/v1/careers/qweqw/edit/').match(/\/api\/v1\/careers\/(\w*)\/edit/i)
-    0: "/api/v1/careers/qweqw/edit"
-    1: "qweqw"
-
-    example:
-    `/api/v1/games/${this.props.game.identifier}/answer_grade` ->
-    `/tasks/${this.props.game.identifier}/answer_grade.json` 
-
-
-    https://testeduplus2.educoder.net/api/v1/games/feguz4tiqpvx/rep_content
-        ?path=src/step2/CLnkQueue.cpp&shixun_gpid=2791&status=0&retry=0   ->
-    http://testeduplus2.educoder.net/tasks/tonblikwzj78/rep_content.json
-        ?path=1-4.py&shixun_gpid=2448&status=0
- */
\ No newline at end of file
diff --git a/src/mulan/Components/Login/Index.scss b/src/mulan/Components/Login/Index.scss
index 2995c97e..3bb708f6 100644
--- a/src/mulan/Components/Login/Index.scss
+++ b/src/mulan/Components/Login/Index.scss
@@ -1,4 +1,11 @@
 .loginModal{
+  .ant-modal-close{
+    top:0px!important;
+    height: 48px;
+    line-height: 48px;
+    display: flex;
+    align-items: center;
+  }
   .ant-modal-body{
     padding:0px;
     .ant-menu{
diff --git a/src/mulan/Components/Login/Login.jsx b/src/mulan/Components/Login/Login.jsx
index debbbd0c..fb479702 100644
--- a/src/mulan/Components/Login/Login.jsx
+++ b/src/mulan/Components/Login/Login.jsx
@@ -1,24 +1,48 @@
-import React, { useState , forwardRef } from 'react';
-import { Form , Input , Checkbox } from 'antd';
+import React, { useState , forwardRef, useEffect } from 'react';
+import { Form , Input , Checkbox, Button } from 'antd';
 import "./Index.scss";
+import axios from 'axios';
 
-function LoginModal({form}){
+function LoginModal({form , successFunc , visible}){
   const [ active , setActive ] = useState(false);
+  const [ loading , setLoading ] = useState(false);
 
   const { getFieldDecorator, validateFields , setFieldsValue , getFieldsValue } = form;
 
+
   function changeInput(){
-    const { account , password } = getFieldsValue();
-    if(account && password){
+    const { login , password } = getFieldsValue();
+    if(login && password){
       setActive(true);
     }else{
       setActive(false);
     }
   }
+  function loginFunc() {
+    validateFields((error,values)=>{
+      if(!error){
+        setLoading(true);
+        const url = `/accounts/login.json`;
+        axios.post(url,{
+          ...values
+        }).then(result=>{
+          successFunc(result.data.data);
+          setLoading(false);
+          if(!values.savePass){
+            setFieldsValue({
+              login:undefined,
+              password:undefined,
+              savePass:false
+            })
+          }
+        }).catch(error=>{})
+      }
+    })
+  }
   return(
     <Form>
       <Form.Item>
-        {getFieldDecorator("account",{
+        {getFieldDecorator("login",{
           rules:[{required:true,message:"请输入登录账号"}]
         })(
           <Input placeholder="请输入登录账号" onChange={changeInput}/>
@@ -28,19 +52,19 @@ function LoginModal({form}){
         {getFieldDecorator("password",{
           rules:[{required:true,message:"请输入登录密码"}]
         })(
-          <Input placeholder="请输入登录密码" onChange={changeInput}/>
+          <Input.Password placeholder="请输入登录密码" onChange={changeInput}/>
         )}
       </Form.Item>
       {
         active ?
-        <a className="subbtn activeBtn">登录</a>
+        <Button className="subbtn activeBtn" loading={loading} onClick={loginFunc}>登录</Button>
         :
         <span className="subbtn">登录</span>
       }
       <Form.Item className="saveitem">
-        {getFieldDecorator("savePass",{
-          rules:[]
-        })(
+        {getFieldDecorator("savePass",
+          {rules:[]},{valuePropName:"checked"}
+        )(
           <Checkbox>记住密码</Checkbox>
         )}
       </Form.Item>
diff --git a/src/mulan/Components/Login/LoginModal.jsx b/src/mulan/Components/Login/LoginModal.jsx
index 7adf2f87..8215ec54 100644
--- a/src/mulan/Components/Login/LoginModal.jsx
+++ b/src/mulan/Components/Login/LoginModal.jsx
@@ -4,17 +4,19 @@ import "./Index.scss";
 import Login from './Login';
 import Register from './Register';
 
-function LoginModal({visible,}){
+function LoginModal({visible,onCancel,successFunc}){
   const [ n , setN ] = useState("0");
+
   return(
     <Modal
       visible={visible}
-      closable={false}
+      closable={true}
       width="440px"
       title={false}
       footer={false}
       className="loginModal"
       centered
+      onCancel={onCancel}
     >
       <Menu defaultSelectedKeys={[n]} mode={"horizontal"}>
         <Menu.Item key="0" onClick={(e)=>setN(e.key)}>登录</Menu.Item>
@@ -23,9 +25,9 @@ function LoginModal({visible,}){
       <div className="content">
         {
           n === "0"?
-          <Login />
+          <Login successFunc={successFunc} visible={visible}/>
           :
-          <Register />
+          <Register successFunc={successFunc} visible={visible}/>
         }
       </div>
     </Modal>
diff --git a/src/mulan/Components/Login/Register.jsx b/src/mulan/Components/Login/Register.jsx
index 6762d961..0e6c8134 100644
--- a/src/mulan/Components/Login/Register.jsx
+++ b/src/mulan/Components/Login/Register.jsx
@@ -1,39 +1,95 @@
-import React, { useState , forwardRef } from 'react';
-import { Form , Input } from 'antd';
+import React, { useState , forwardRef , useEffect } from 'react';
+import { Form , Input , Button } from 'antd';
 import "./Index.scss";
+import axios from 'axios';
 
-function Register({form}){
+function Register({ form , successFunc , visible }){
   const [ active , setActive ] = useState(false);
+  const [ loading , setLoading ] = useState(false);
 
   const { getFieldDecorator, validateFields , setFieldsValue , getFieldsValue } = form;
 
+  useEffect(()=>{
+    if(!visible){
+      setFieldsValue({
+        mail:undefined,
+        password:undefined,
+        passwordAgain:undefined
+      })
+    }
+  },[visible])
+
   function changeInput(){
-    const { account , password } = getFieldsValue();
-    if(account && password){
+    const { mail , password , passwordAgain } = getFieldsValue();
+    if(mail && password && passwordAgain){
       setActive(true);
     }else{
       setActive(false);
     }
   }
+
+  function registerFunc(){
+    validateFields((error,values)=>{
+      if(!error){
+        setLoading(true);
+        const url = `/accounts/register.json`;
+        axios.post(url,{
+          ...values
+        }).then(result=>{
+          if(result && result.data && result.data.status === 0){
+            successFunc(result.data.data);
+            setLoading(false);
+            setFieldsValue({
+              mail:undefined,
+              password:undefined,
+              passwordAgain:undefined
+            })
+          }
+        }).catch(error=>{})
+      }
+    })
+  }
+
+  function checkRepeat(rule, value, callback){
+    const { password } = getFieldsValue();
+    if(!value){
+      callback();
+    }else if(value !== password){
+      callback("两次输入的密码不一致！");
+    }else{
+      callback();
+    }
+    callback();
+  }
   return(
     <Form>
       <Form.Item>
-        {getFieldDecorator("account",{
+        {getFieldDecorator("mail",{
           rules:[{required:true,message:"请输入注册账号"}]
         })(
-          <Input placeholder="请输入手机号码或者邮箱账号" onChange={changeInput}/>
+          <Input placeholder="请输入邮箱账号" onChange={changeInput}/>
         )}
       </Form.Item>
       <Form.Item >
         {getFieldDecorator("password",{
           rules:[{required:true,message:"请输入注册密码"}]
         })(
-          <Input placeholder="请输入注册密码" onChange={changeInput}/>
+          <Input.Password placeholder="请输入注册密码" onChange={changeInput}/>
+        )}
+      </Form.Item>
+      <Form.Item >
+        {getFieldDecorator("passwordAgain",{
+          rules:[
+            {required:true,message:"请再次输入密码"},
+            {validator:checkRepeat}
+          ]
+        })(
+          <Input.Password placeholder="请再次输入密码" onChange={changeInput}/>
         )}
       </Form.Item>
       {
         active ?
-        <a className="subbtn activeBtn">注册</a>
+        <Button className="subbtn activeBtn" loading={loading} onClick={registerFunc}>注册</Button>
         :
         <span className="subbtn">注册</span>
       }
diff --git a/src/mulan/Data/getUrl.jsx b/src/mulan/Data/getUrl.jsx
new file mode 100644
index 00000000..2f03c866
--- /dev/null
+++ b/src/mulan/Data/getUrl.jsx
@@ -0,0 +1,10 @@
+
+const local = 'https://mulan.trustie.net';
+const isDev = window.location.port === "3007";
+
+export function getUrlHead(path) {
+	if (isDev) {
+		return `${local}/${path}`;
+	}
+	return `${path}`;
+}
\ No newline at end of file
diff --git a/src/mulan/HOC/Footer.jsx b/src/mulan/HOC/Footer.jsx
index 7cc5e07c..3ee1e6f5 100644
--- a/src/mulan/HOC/Footer.jsx
+++ b/src/mulan/HOC/Footer.jsx
@@ -1,8 +1,20 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 function Footer(props){
   return(
-    <div className="footsnav">Copyright © 中国开源云联盟 京ICP备05013730号-37</div>
+    <div className="homefooterbase">
+      <ul className="homeFooterUl">
+        <li><Link to={``}>关于我们</Link></li>
+        <li><Link to={``}>帮助中心</Link></li>
+        <li><Link to={``}>合作伙伴</Link></li>
+        <li><Link to={``}>服务协议</Link></li>
+      </ul>
+      <div>
+        <span>木兰开源社区版权所有 ©2020 技术支持:长沙智擎科技</span>
+        <a href="http://www.beian.miit.gov.cn/" target="_blank" style={{color:"#666"}}>粤ICP备12009483号</a>
+      </div>
+    </div>
   )
 }
 export default Footer;
\ No newline at end of file
diff --git a/src/mulan/HOC/Header.jsx b/src/mulan/HOC/Header.jsx
index f7430259..abff030d 100644
--- a/src/mulan/HOC/Header.jsx
+++ b/src/mulan/HOC/Header.jsx
@@ -1,10 +1,16 @@
 import React from 'react';
 import Nav from './Nav';
 
-function Header({users}){
+function Header({ users,headData, successFunc , quitFunc , match }){
   return(
     <div className="headsnav">
-      <Nav users={users}/>
+      <Nav 
+        match={match}
+        users={users} 
+        headData={headData} 
+        successFunc={successFunc} 
+        quitFunc={quitFunc}
+      />
     </div>
   )
 }
diff --git a/src/mulan/HOC/HomeHeader.jsx b/src/mulan/HOC/HomeHeader.jsx
deleted file mode 100644
index 39fa2a0d..00000000
--- a/src/mulan/HOC/HomeHeader.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import Nav from './Nav';
-
-function HomeHeader({users}){
-  return(
-    <div className="homeHeader">
-      <Nav users={users}/>
-    </div>
-  )
-}
-export default HomeHeader;
\ No newline at end of file
diff --git a/src/mulan/HOC/HomeHoc.jsx b/src/mulan/HOC/HomeHoc.jsx
index d2aa14f9..f89b4b02 100644
--- a/src/mulan/HOC/HomeHoc.jsx
+++ b/src/mulan/HOC/HomeHoc.jsx
@@ -1,6 +1,8 @@
 import React, { Component, useState } from 'react';
-import Header from './HomeHeader';
+import Header from './Header';
+import Footer from './Footer';
 import './Index.scss';
+import axios from 'axios';
 
 export function HomeHoc(Sub){
   return class II extends Component {
@@ -10,14 +12,53 @@ export function HomeHoc(Sub){
         users:undefined
       }
     }
+
+    componentDidMount=()=>{
+      this.getUser();
+    }
+
+    getUser=()=>{
+      const url = `/users/get_user_info.json`;
+      axios.get(url).then(result=>{
+        if(result){
+          this.setState({
+            users:result.data.data
+          })
+        }
+      }).catch(error=>{})
+    }
+
+    successFunc=(data)=> {
+      if(data){
+        this.setState({
+          users:data
+        })
+      }else{
+        this.getUser();
+      }
+    }
+
+    quitFunc =()=>{
+      const url = `/accounts/logout.json`;
+      axios.get(url).then(result=>{
+        if(result && result.data){
+          this.setState({
+            users:undefined
+          })
+        }
+      }).catch(error=>{})
+    }
+
     render(){
       const { users } = this.state; 
+      const { headData } = this.props;
       return(
-        <div style={{height:"100%",overflow:"auto"}}>
-          <Header {...this.props} {...this.state} users={users}/>
-          <div className="homebody" style={{paddingTop:"0px"}}>
+        <div style={{height:"100%",overflow:"auto",position:"relative"}}>
+          <Header {...this.props} {...this.state} users={users} headData={headData} successFunc={this.successFunc} quitFunc={this.quitFunc}/>
+          <div className="homebody">
             <Sub {...this.props} {...this.state} users={users}/>
           </div>
+          <Footer />
         </div>
       )
     }
diff --git a/src/mulan/HOC/Index.scss b/src/mulan/HOC/Index.scss
index c944b2b4..b564693d 100644
--- a/src/mulan/HOC/Index.scss
+++ b/src/mulan/HOC/Index.scss
@@ -18,20 +18,20 @@
   line-height: 60px;
   z-index: 100;
   box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
-  background: #312b2b;
+  background: #fff;
  
   ul{
     li{
       a{
-        color: #fff;
+        color: #333;
       }
       
     }
   }
 }
 .headDiv{
-  width:1200px;
   margin: 0px auto;
+  padding:0px 60px;
   display: flex;
   justify-content: space-between;
   .headerNav{
@@ -46,13 +46,14 @@
   }
   .headUserInfo{
     a{
-      color: #fff;
+      color: #666666;
     }
   }
 }
 
 .homebody{
   padding-top: 60px;
+  min-height: 100%;
 }
 .footsnav{
   position: absolute;
@@ -63,4 +64,44 @@
   padding-bottom:10px;
   background-color: #fff;
   color: #999;
+}
+
+.homefooterbase{
+  background: #DEDEDE;
+  line-height: 38px;
+  font-size: 12px;
+  color: #666;
+  text-align: center;
+  padding:30px 0px;
+  .homeFooterUl{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin:0px;
+    li{
+      padding:0px 40px;
+      a{
+        color: #666666;
+        display: block;
+      }
+    }
+  }
+}
+.menuItems{
+  .ant-dropdown-menu-item{
+    text-align: center;
+    border-bottom: 1px solid #eee;
+    color: #333;
+  }
+  .ant-dropdown-menu-item:last-child{
+    border-bottom: none;
+  }
+  .ant-dropdown-menu-item:first-child:hover{
+    color: #333;
+    cursor: default;
+  }
+  .ant-dropdown-menu-item:hover{
+    background-color: #fff;
+    color: #aac5fd;
+  }
 }
\ No newline at end of file
diff --git a/src/mulan/HOC/Nav.jsx b/src/mulan/HOC/Nav.jsx
index ab6d69a1..c8bb639b 100644
--- a/src/mulan/HOC/Nav.jsx
+++ b/src/mulan/HOC/Nav.jsx
@@ -1,25 +1,50 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
+import { getUrlHead } from '../Data/getUrl';
+import { Dropdown , Menu } from 'antd';
 import logo from '../images/logo.png';
 import LoginModal from '../Components/Login/LoginModal';
 
-function Nav({users}){
+function Nav({ users, headData , successFunc , quitFunc , match }){
   const [ visible ,setVisible ] =  useState(false);
+  const [ navs , setNavs ] = useState(undefined);
+  useEffect(()=>{
+    if(headData){
+      setNavs(headData.navbar);
+    }
+  },[headData])
 
+  function success(data) {
+    setVisible(false);
+    successFunc(data);
+  }
+
+  const menus =(
+    <Menu className="menuItems">
+      <Menu.Item>{users && users.real_name}</Menu.Item>
+      <Menu.Item onClick={quitFunc}>退出</Menu.Item>
+    </Menu>
+  )
   
   return(
     <div className="headDiv">
-      <LoginModal visible={visible} />
+      <LoginModal visible={visible} onCancel={()=>setVisible(false)} successFunc={success}/>
       <ul className="headerNav">
-        <li><img src={logo} alt="" width="110px"/></li>
-        <li><Link to={`/`}>首页</Link></li>
-        <li><Link to={`/projects`}>开源软件</Link></li>
-        <li><Link to={`/license/preface`}>开源许可证</Link></li>
+        <li><img src={logo} alt="" width="110px" style={{marginRight:"100px"}}/></li>
+        {
+          navs && navs.length>0 && navs.map((i,k)=>{
+            return(
+              <li><Link to={i.link} className={i.link===(match && match.url) ? "color-blue":""}>{i.name}</Link></li>
+            )
+          })
+        }
       </ul>
       <div className="headUserInfo">
         {
           users && users.login ?
-          <img src={''} alt="" width="48px" height="48px"/>
+          <Dropdown overlay={menus} placement={"bottomRight"}>
+            <img src={users && getUrlHead(users.image_url)} alt="" width="48px" height="48px" style={{borderRadius:"50%"}}/>
+          </Dropdown>
           :
           <a onClick={()=>setVisible(true)}>登录/注册</a>
         }
diff --git a/src/mulan/Index.jsx b/src/mulan/Index.jsx
index 617d7750..e3827ac1 100644
--- a/src/mulan/Index.jsx
+++ b/src/mulan/Index.jsx
@@ -2,216 +2,211 @@ import React, { useEffect, useState } from 'react';
 import { HomeHoc }  from './HOC/HomeHoc';
 import { Link } from 'react-router-dom';
 import './Index.scss';
-import logo1 from './images/coscl.jpg';
-import logo2 from './images/openeuler.jpg';
-import logo3 from './images/opengcc.jpg';
-import logo4 from './images/openlooKeng.png';
+import main from './images/320.jpg';
 import icon1 from './images/icon1.png';
 import icon2 from './images/icon2.png';
 import active1 from './images/active1.jpg';
 import active2 from './images/active2.png';
 import DefaultImg from './images/default.png';
-import perl from './images/perl.png';
-import deno from './images/deno.png';
-import go7c from './images/go7c.png';
-// import axios from 'axios';
+import { Carousel } from 'antd';
+import { getUrlHead } from './Data/getUrl';
+import axios from 'axios';
 
 function Index(props){
-  // const [ recommand ,setRecommand ] =useState(undefined);
-  // useEffect(()=>{
-  //   getRecommand();
-  // },[])
+  const [ about ,setAbout ] =useState(undefined);
+  const [ covers ,setCovers ] =useState(undefined);
+  const [ recommand ,setRecommand ] =useState(undefined);
+  const [ news ,setNews ] =useState(undefined);
+  const [ activity ,setActivity ] =useState(undefined);
+  const [ cooperaters ,setCooperaters ] =useState(undefined);
+  useEffect(()=>{
+    getRecommand();
+    getAbout();
+    getNews();
+    getActivity();
+    getCooperaters();
+  },[])
 
-  // function getRecommand(){
-  //   const url = `/projects/recommand.json`;
-  //   axios.get(url).then(result=>{
-  //     if(result && result.data){
-  //       setRecommand(result.data.data);
-  //     }
-  //   }).catch(error=>{})
-  // }
+  // 关于我们
+  function getAbout(){
+    const url = `/helps/about.json`;
+    axios.get(url).then(result=>{
+      if(result && result.data){
+        setAbout(result.data.data);
+        setCovers(result.data.data.covers);
+      }
+    }).catch(error=>{})
+  }
+  // 开源软件推荐
+  function getRecommand(){
+    const url = `/projects/recommend.json`;
+    axios.get(url).then(result=>{
+      if(result && result.data){
+        setRecommand(result.data.data);
+      }
+    }).catch(error=>{})
+  }
+  // 开源活动
+  function getNews(){
+    const url = `/topics.json`;
+    axios.get(url,{
+      params:{type:"activity"}
+    }).then(result=>{
+      if(result && result.data){
+        setNews(result.data.data);
+      }
+    }).catch(error=>{})
+  }
+  // 开源资讯
+  function getActivity(){
+    const url = `/topics.json`;
+    axios.get(url,{
+      params:{type:"news"}
+    }).then(result=>{
+      if(result && result.data){
+        setActivity(result.data.data);
+      }
+    }).catch(error=>{})
+  }
+  // 合作伙伴
+  function getCooperaters(){
+    const url = `/cooperaters.json`;
+    axios.get(url).then(result=>{
+      if(result && result.data){
+        setCooperaters(result.data.data);
+      }
+    }).catch(error=>{})
+  }
   return(
     <div>
       <div className="homebase">
-        <div className="baseinfo">
-          <p>木兰开源社区</p>
-          <p className="sub"><span>开放</span><span>共享</span>打造开源生态</p>
+        <Carousel 
+          autoplay
+          pauseOnDotsHover
+        >
+          {
+            covers && covers.length>0?
+            covers.map((i,k)=>{
+              return(
+                <a href={i.path}><img src={i.image_url} alt="" /></a>
+              )
+            })
+            :<img src={main} alt="" />
+          }
+        </Carousel>
+      </div>
+      {
+        recommand && recommand.length > 0 &&
+        <div className="homeproject">
+          <div class="tit">开源软件推荐</div>
+          <ul>
+            {
+              recommand.map((item,key)=>{
+                return(
+                  <li>
+                    <a href={item.url}>
+                      <div className="p_head">
+                        <p className="p_name task-hide-2">{item.full_name}</p>
+                        <img src={item.author && item.author.image_url ? getUrlHead(item.author.image_url) : DefaultImg } alt="" style={{maxHeight:"50px"}}/>
+                      </div>
+                    </a>
+                    <p className="p_author">{item.author && item.author.name}</p>
+                    <p className="p_desc task-hide-2">{item.description}</p>
+                  </li>
+                )
+              })
+            }
+          </ul>
+          <Link to={`/projects`} className="color-blue">查看更多<i className="iconfont icon-youjiantou ml8 font-12 color-blue"></i></Link>
         </div>
-      </div>
-      <div className="homeproject">
-        <div class="tit">开源软件推荐<em></em></div>
-        <ul>
-          <li>
-            <a href="https://forgeplus.trustie.net/projects/alogfans/object-storage-system">
-              <div className="p_head">
-                <p className="p_name task-hide-2">云对象存储系统</p>
-                <img src={DefaultImg} alt="" height="50px"/>
+      }
+      
+      {
+        about && 
+        <div className="homeFirst">
+          <div className="firstPanel">
+            <div className="firstPanelBox">
+              <div class="tit" style={{marginBottom:"30px"}}>{about.name}</div>
+              <div className="desc">
+                {about.content}
               </div>
-            </a>
-            <p className="p_author">清华大学</p>
-            <p className="p_desc task-hide-2">云对象存储系统作为云操作系统的重要组成部分，主要负责非结构化数据的储存 和管理，用户通过REST API与系统进行交互。云对象存储系统支持服务端加密、 访问权限控制、静态网站托管和大对象分段上传等功能。这些API均与Amazon S3 和阿里云 OSS 标准兼容，以便于现有的云应用向中国云迁移。</p>
-          </li>
-          <li>
-            <a href="https://forgeplus.trustie.net/projects/fatead/CCDemon">
-              <div className="p_head">
-                <p className="p_name task-hide-2">CCDemon</p>
-                <img src={DefaultImg} alt="" height="50px"/>
-              </div>
-            </a>
-            <p className="p_author">复旦大学</p>
-            <p className="p_desc task-hide-2">基于相似代码分析的代码辅助完成工具。</p>
-          </li>
-          <li>
-            <a href="https://forgeplus.trustie.net/projects/lee-star/UserPortrait">
-              <div className="p_head">
-                <p className="p_name task-hide-2">UserPortrait</p>
-                <img src={DefaultImg} alt="" height="50px"/>
-              </div>
-            </a>
-            <p className="p_author">国防科技大学</p>
-            <p className="p_desc task-hide-2">面向群体化协同开发的用户画像系统，从社区影响力、社区活跃度、社区贡献度 、项目经验、语言能力五个维度评估开发者能力，综合利用基本属性数据、行为 数据、社交数据构建用户画像。</p>
-          </li>
-          <li>
-            <a href="https://forgeplus.trustie.net/projects/jinjiahaomvp/RETO">
-              <div className="p_head">
-                <p className="p_name task-hide-2">RETO</p>
-                <img src={DefaultImg} alt="" height="50px"/>
-              </div>
-            </a>
-            <p className="p_author">北京理工大学</p>
-            <p className="p_desc task-hide-2">该项目由北京理工大学智能化软件工程实验室负责，主要设计并实现了Rename重 构机会的推荐、Move Method重构机会的推荐以及运行过程中动态地对阈值进行 优化这三个功能。</p>
-          </li>
-          <li>
-            <a href="https://forgeplus.trustie.net/projects/wynebula/ceph">
-              <div className="p_head">
-                <p className="p_name task-hide-2">OC-BlueStore</p>
-                <img src={DefaultImg} alt="" height="50px"/>
-              </div>
-            </a>
-            <p className="p_author">中科院计算所</p>
-            <p className="p_desc task-hide-2">面向云计算场景分布式存储系统单机引擎,基于开放SSD实现软件定义和租户感知 的数据布局，支持软件触发垃圾回收。</p>
-          </li>
-          <li>
-            <a href="https://forgeplus.trustie.net/projects/lvna-system/labeled-RISC-V">
-              <div className="p_head">
-                <p className="p_name task-hide-2">Labeled Risc-V</p>
-                <img src={DefaultImg} alt="" height="50px"/>
-              </div>
-            </a>
-            <p className="p_author">中科院计算所</p>
-            <p className="p_desc task-hide-2">基于精简指令集（RISC）原则的开源指令集架构，用于允许任何人设计、制造和 销售RISC-V芯片和软件。</p>
-          </li>
-          <li>
-            <a href="https://forgeplus.trustie.net/projects/ipads-sgx-migration/sgx-migration">
-              <div className="p_head">
-                <p className="p_name task-hide-2">SGX-Migration</p>
-                <img src={DefaultImg} alt="" height="50px"/>
-              </div>
-            </a>
-            <p className="p_author">上海交通大学</p>
-            <p className="p_desc task-hide-2">致力于在异构云平台之间，实现Enclave的实时跨云迁移。</p>
-          </li>
-          <li>
-            <a href="https://forgeplus.trustie.net/projects/huazhichao/HCloud">
-              <div className="p_head">
-                <p className="p_name task-hide-2">HCloud</p>
-                <img src={DefaultImg} alt="" height="50px"/>
-              </div>
-            </a>
-            <p className="p_author">上海交通大学</p>
-            <p className="p_desc task-hide-2">致力于跨云环境下的可信数据融合与机密计算。</p>
-          </li>
-        </ul>
-      </div>
-      <div className="homeFirst">
-        <div className="firstPanel">
-          <div className="firstPanelBox">
-            <div class="tit">关于我们<em></em></div>
-            <div className="desc">
-              木兰开源社区建立于2019年8月，是国家重点研发计划重点专项“云计算和大数据开源社区生态系统”的重要成果之一。旨在促进开源领域的交流，建立科教界和产业界开源交流互动平台，加强企业和行业用户之间的沟通，推进企业和个人开发者利用开源软件不断提升技术水平。从开源学习到商业代码托管，您可以从众多的开源开发项目中进行开发学习、主持和审查代码、管理项目和构建软件。
+              <ul className="aboutul">
+                <li>
+                  <img src={icon1} alt="" width="186px"/>
+                  <font>开源项目总数</font>
+                  <span>{about.total_projects_count}</span>
+                </li>
+                <li>
+                  <img src={icon2} alt="" width="186px"/>
+                  <font>科技项目开源成果</font>
+                  <span>{about.science_projects_count}</span>
+                </li>
+              </ul>
             </div>
-            <ul className="aboutul">
-              <li>
-                <img src={icon1} alt="" width="84px"/>
-                <span>918</span>
-                <font>开源项目总数</font>
-              </li>
-              <li>
-                <img src={icon2} alt="" width="84px"/>
-                <span>10</span>
-                <font>科技项目开源成果</font>
-              </li>
-            </ul>
           </div>
         </div>
-      </div>
+      }
+      
       
       <div className="sourceAbout">
-        <div class="tit">开源活动<em></em></div>
-        <div className="sourceactive">
-          <li style={{backgroundImage:`url(${active1})`}}></li>
-          <li style={{backgroundImage:`url(${active2})`}}></li>
-        </div>
+        <div class="tit">开源活动</div>
+        {
+          news && news.length>0 ?
+          <div className="sourceactive">
+            {
+              news.map((item,key)=>{
+                return(
+                  key < 2 &&<a href={item.url} style={{backgroundImage:`url(${getUrlHead(item.cover)})`}}></a>
+                )
+              })
+            }
+          </div>
+          :
+          <div className="sourceactive">
+            <li style={{backgroundImage:`url(${active1})`}}></li>
+            <li style={{backgroundImage:`url(${active2})`}}></li>
+          </div>
+        }
+        
+        {/* <Link to={`/projects`} className="color-blue">查看更多<i className="iconfont icon-youjiantou ml8 font-12 color-blue"></i></Link> */}
       </div>
       
       <div className={"homenews"}>
-        <div class="tit">开源资讯<em></em></div>
+        <div class="tit">开源资讯</div>
         <div>
-          <ul className="newsul">
-            <li>
-              {/* <div className="imgBox"><img src="" alt="" width="145px" height="96px"/></div> */}
-              <div className="news-info">
-                <p className="news-title"><Link to={""} target="_blank">木兰重生：更多 $ 的妙用，self 的拓展语义</Link></p>
-                <div className="news-desc task-hide-2">本项目旨在重现「木兰」编程语言的语法和功能。所有例程演示的语法可以用原始的木兰可执行文件 ulang-0.2.2.exe 检验。如发现有异烦请告知，定将礼谢。 上篇演示了 $ 在木兰中的部分用途</div>
-                <div className="news-time">2020/10/02 05:06</div>
-              </div>
-            </li>
-            <li>
-              <div className="imgBox"><img src={perl} alt="" width="145px" height="96px"/></div>
-              <div className="news-info">
-                <p className="news-title"><Link to={""} target="_blank">官方宣布 Perl 7 计划</Link></p>
-                <div className="news-desc task-hide-2">Perl 官方宣布了 Perl 7 计划。Perl 7 目前已经在开发中，但是在代码与语法上不会有太大的改变，其本质上是具有现代默认设置的 Perl 5，并为之后进行更大的更改奠定了基础。</div>
-                <div className="news-time">2020/06/25 09:09</div>
-              </div>
-            </li>
-            <li>
-              <div className="imgBox"><img src={deno} alt=""/></div>
-              <div className="news-info">
-                <p className="news-title"><Link to={""} target="_blank">Deno 继颠覆 Node 之后，又“内部”拒绝了 TypeScript</Link></p>
-                <div className="news-desc task-hide-2">Deno 团队计划删除所有内部代码构建时的 TS 类型检查与捆绑。打算将所有运行时代码转移到同一个 JavaScript 文件当中，但仍将使用随附的 d.ts 文件保存类型定义与说明文档。</div>
-                <div className="news-time">2020/06/22 15:48</div>
-              </div>
-            </li>
-            <li>
-              <div className="imgBox"><img src={go7c} alt=""/></div>
-              <div className="news-info">
-                <p className="news-title"><Link to={""} target="_blank">Go 泛型草案更新，明年8月发布的 Go 1.17 将引入</Link></p>
-                <div className="news-desc task-hide-2">Go 团队近日在博客介绍了 Go 泛型的最新进展。 Go 团队表示他们一直在完善泛型的设计草案，并为此编写了一个类型检查器——可按照设计草案中的说明，解析使用泛型的 Go 代码并报告任何类</div>
-                <div className="news-time">2020/06/18 07:56</div>
-              </div>
-            </li>
-          </ul>
+          {
+            activity && activity.length> 0 &&
+            <ul className="newsul">
+              {
+                activity.map((item,key)=>{
+                  return(
+                    <li>
+                      <div className="imgBox"><img src={getUrlHead(item.cover)} alt="" width="145px" height="96px"/></div>
+                      <div className="news-info">
+                        <p className="news-title"><a href={item.url} target="_blank">{item.title}</a></p>
+                        <div className="news-desc task-hide-2">{item.content}</div>
+                        <div className="news-time">{item.created_at}</div>
+                      </div>
+                    </li>
+                  )
+                })
+              }
+            </ul>
+          }
         </div>
       </div>
-
-      <div className="homeFooter">
+      {
+        cooperaters && cooperaters.length > 0 &&
         <ul className="homeFooterUl homeFooterParter">
-          <li><img src={logo1} alt="" width="200px"/></li>
-          <li><img src={logo2} alt="" width="200px"/></li>
-          <li><img src={logo3} alt="" width="200px"/></li>
-          <li><img src={logo4} alt="" width="200px"/></li>
+          {
+            cooperaters.map((i,k)=>{
+              return(
+                <li><a href={i.website_url} target="_blank"><img src={getUrlHead(i.logo_url) } alt="" width="200px"/></a></li>
+              )
+            })
+          }
         </ul>
-        <ul className="homeFooterUl">
-          <li><Link to={``}>关于我们</Link></li>
-          <li><Link to={``}>帮助中心</Link></li>
-          <li><Link to={``}>合作伙伴</Link></li>
-          <li><Link to={``}>服务协议</Link></li>
-        </ul>
-        <div className="homefooterbase">
-          <span>木兰开源社区版权所有 ©2020 技术支持:长沙智擎科技</span>
-          <a href="http://www.beian.miit.gov.cn/" target="_blank" style={{color:"#666"}}>粤ICP备12009483号</a>
-        </div>
-      </div>
+      }
     </div>
   )
 }
diff --git a/src/mulan/Index.scss b/src/mulan/Index.scss
index efa9cf87..e66f3356 100644
--- a/src/mulan/Index.scss
+++ b/src/mulan/Index.scss
@@ -1,14 +1,14 @@
 .homeFirst{
   background:url(./images/bg2.jpg)center center no-repeat;
-  min-height: 450px;
+  min-height: 480px;
   position: relative;
   margin-bottom: 90px;
   .firstPanel{
     position: absolute;
-    top:70px;
+    top:60px;
     width: 100%;
     .firstPanelBox{
-      width: 1200px;
+      width: 1300px;
       margin:0px auto;
       background-color: #fff;
       box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
@@ -16,16 +16,16 @@
       align-items: center;
       justify-content: center;
       flex-direction: column;
-      min-height: 400px;
+      min-height: 498px;
       border-radius: 4px;
-      padding:30px 0px ;
+      padding-top:50px;
       background:url(./images/1_1.png) no-repeat;
       .desc{
-        margin:20px auto 50px;
+        margin:0px auto 50px;
         line-height: 22px;
         font-size: 16px;
         color: #666;
-        width: 880px;
+        width: 1030px;
         text-indent: 2em;
         text-align: justify;
       }
@@ -42,48 +42,49 @@
             font-size: 28px;
             line-height: 42px;
             font-weight: bold;
+            color: #1890FF;
           }
           font{
-            color: #999;
+            color: #666;
           }
         }
       }
     }
   }
 }
-.homeFooter{
-  background: #fff;
-  .homeFooterParter{
-    padding:30px 0px;
-    width: 1200px;
-    margin:0px auto;
-  }
-  .homeFooterUl{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding:15px;
-    li{
-      padding:0px 40px;
-      a{
-        color: #ccc;
-        display: block;
-      }
+.homeFooterParter{
+  padding:30px 0px;
+  width: 1200px;
+  margin:0px auto!important;
+}
+.homeFooterUl{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin:0px;
+  li{
+    padding:0px 40px;
+    a{
+      color: #666666;
+      display: block;
     }
   }
+}
+.homeFooter{
+  background: #fff;
   .homefooterbase{
-    height: 38px;
-    background: #333;
+    background: #DEDEDE;
     line-height: 38px;
     font-size: 12px;
     color: #666;
     text-align: center;
+    padding:30px 0px;
   }
 }
 .homebase{
   position: relative;
   min-height: 480px;
-  background-image:url(./images/320.jpeg);
+  
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center;
@@ -94,6 +95,9 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  .ant-carousel{
+    width: 100%;
+  }
   p{
     margin-bottom:20px;
     text-align: center;
@@ -107,7 +111,8 @@
   }
 }
 .homeproject{
-  padding:60px 0px;
+  padding:60px 0px 100px 0px;
+  text-align: center;
   ul{
     display: flex;
     flex-wrap: wrap;
@@ -119,11 +124,12 @@
       border-radius: 6px;
       box-shadow: 0px 0px 4px rgba(0,0,0,0.1);
       margin-bottom: 40px;
+      text-align: left;
       .p_head{
         padding:25px 20px;
         display: flex;
         align-items: flex-start;
-        background-image: linear-gradient(#118af3, #8dcaf5);
+        background-image: url('./images/cards.png');
         border-radius: 6px 6px 0px 0px;
         justify-content: space-between;
       }
@@ -151,13 +157,14 @@
   }
 }
 .sourceAbout{
-  padding:60px 0px;
+  padding:60px 0px 100px 0px;
+  text-align: center;
   .sourceactive{
     display: flex;
     align-items: center;
     justify-content: center;
     margin:40px 0px;
-    li{
+    a{
       width: 600px;
       height: 300px;
       background-size: cover;
@@ -173,7 +180,7 @@
   font-size: 22px;
   color: #444;
   font-weight: bold;
-  margin-bottom: 45px;
+  margin-bottom: 60px;
   text-align: center;
   em{
     display: block;
diff --git a/src/mulan/Projects/Index.jsx b/src/mulan/Projects/Index.jsx
index cb9e0fa3..78fb22a5 100644
--- a/src/mulan/Projects/Index.jsx
+++ b/src/mulan/Projects/Index.jsx
@@ -1,103 +1,148 @@
 import React, { useEffect, useState } from 'react';
-import { HOC } from '../HOC/Index';
-import {Link} from 'react-router-dom';
-import Title from '../../forge/Component/Title';
-import { AlignCenter } from '../../forge/Component/layout';
+import { HomeHoc } from '../HOC/HomeHoc';
+import { Box , Long , Short , Gap } from '../../forge/Component/layout';
+import { AlignCenter ,FlexAJ } from '../../forge/Component/layout';
 import './Index.scss';
 import DefaultImg from '../images/default.png';
+import { getUrlHead } from '../Data/getUrl';
+import axios from 'axios';
+import { Skeleton , Pagination } from 'antd';
+import Ranking from './Ranking';
+
 const data =[
   {
-    name:"Mini-Kernel",
-    desc:"中国云操作系统最小内核开源项目，基于中国云标准API。 中国云OS最小内核定 位于打造成一个标准的最小化核心的基础云平台，功能组件包括计算、存储、网 络、认证。",
-    tags:["Java"],
-    imageurl:"",
-    link:"https://forgeplus.trustie.net/projects/G-Cloud/mini-kernel"
+    index:1,
+    name:"Trustie社区 / Mini-Kernel",
+    count:123223123
   },
   {
-    name:"gRemote",
-    desc:" 提供一种细粒度的异构云端GPU共享服务，在提供良好GPU隔离效果的同时，提高 GPU的利用率。",
-    tags:["C/C++"],
-    imageurl:"",
-    link:"https://forgeplus.trustie.net/projects/shanyd/Tstore"
+    index:2,
+    name:"Trustie社区 / Mini-Kernel",
+    count:123223122
   },
   {
-    name:"Mini-Kernel",
-    desc:"中国云操作系统最小内核开源项目，基于中国云标准API。 中国云OS最小内核定 位于打造成一个标准的最小化核心的基础云平台，功能组件包括计算、存储、网 络、认证。",
-    tags:["Java"],
-    imageurl:"",
-    link:"https://forgeplus.trustie.net/projects/gremote/gRemote"
-  },
-  {
-    name:"分布式文件系统",
-    desc:"基于 GlusterFS 开发的分布式存储系统。",
-    tags:["C"],
-    imageurl:"",
-    link:"https://forgeplus.trustie.net/projects/shanyd/Tstore"
-  },
-  {
-    name:"Coordinator",
-    desc:"基于RDMA的高性能协同系统。",
-    tags:["C+/C++"],
-    imageurl:"",
-    link:"https://forgeplus.trustie.net/projects/haoba1992/Coordinator"
-  },
-  {
-    name:"容器热迁移 container_migrate",
-    desc:"容器热迁移项目主要面向数据中心。Docker+k8s已成为云计算环境的一种广泛使 用方式，以容器作为服务载体的服务方式也成为主流。在资源调度过程中，会出 现容器重新调度到新节点上的情况，而现在服务变得轻量化，实时性要求变高， 无法忍受长时间的服务中断问题，因此在线迁移成为了需求。本项目提供一种 Docker在线迁移尝试与解决方案，并将其应用于k8s中，实现对pod的在线迁移的 尝试。",
-    tags:["Python"],
-    imageurl:"",
-    link:"https://forgeplus.trustie.net/projects/haoba1992/Coordinator"
-  },
-  {
-    name:"容器热迁移 container_migrate",
-    desc:"容器热迁移项目主要面向数据中心。Docker+k8s已成为云计算环境的一种广泛使 用方式，以容器作为服务载体的服务方式也成为主流。在资源调度过程中，会出 现容器重新调度到新节点上的情况，而现在服务变得轻量化，实时性要求变高， 无法忍受长时间的服务中断问题，因此在线迁移成为了需求。本项目提供一种 Docker在线迁移尝试与解决方案，并将其应用于k8s中，实现对pod的在线迁移的 尝试。",
-    tags:["Python"],
-    imageurl:"",
-    link:"https://forgeplus.trustie.net/projects/hustguoyun/container_migrate"
+    index:3,
+    name:"Trustie社区 / Mini-Kernel",
+    count:123223121
   }
 ]
+const limit = 12;
 function Index(props){
-  const [ list , setList ] = useState(undefined);
+  const [ list , setList ] = useState([]);
+  const [ date ,setDate ] = useState("week");
+  const [ page ,setPage ] = useState(1);
+  const [ total ,setTotal ] = useState(0);
+  const [ rankList ,setRankList ] = useState([]);
+
   useEffect(()=>{
-    setList(data);
-  },[])
+    getData();
+  },[page])
+
+  useEffect(()=>{
+    getRank();
+  },[date])
+
+  // 获取项目列表
+  function getData() {
+    const url =  `/projects/science.josn`;
+    axios.get(url,{
+      params:{page,limit}
+    }).then(result=>{
+      if(result){
+        setList(result.data.data);
+        setTotal(result.data.total_count);
+      }
+    }).catch(error=>{})
+  }
+
+  // 获取排行列表
+  function getRank(){
+    const url =  `/projects/liveness.json`;
+    axios.get(url,{
+      params:{time_type:date,type:"commits"}
+    }).then(result=>{
+      if(result){
+        setRankList(result.data.data);
+      }
+    }).catch(error=>{})
+  }
+
   return(
-    <div className="panels">
-      <div className="projectsList">
-        <Title>基础类开源软件</Title>
+    <Box className="panels">
+      <Long>
+        <div className="projectsList">
+        <p className="font-16">基础类开源软件</p>
         {
           list && list.length > 0 ?
             <div className="lists">
               {
                 list.map((item,key)=>{
                   return(
-                    <li>
-                      <a href={item.link} className="listName">{item.name}</a>
-                      <AlignCenter className="listInfo">
-                        <p className="listInfoDesc task-hide-2">{item.desc}</p>
-                        <img src={item.imageurl || DefaultImg} alt="" width="48px" className="ml10"/>
-                      </AlignCenter>
-                      {
-                        item.tags && item.tags.length>0 &&
-                        <div className="listTag">
-                          {
-                            item.tags.map((i,k)=>{
-                              return(
-                                <span>{i}</span>
-                              )
-                            })
-                          }
+                    <a href={item.url} >
+                      <li>
+                        <div className="listinfo">
+                          <p className="listName">{item.full_name}</p>
+                          <div className="listNum">
+                            {/* <span>代码行数：20.43K</span> */}
+                            <span>仓库大小：{item.size ||"0kB"}</span>
+                            <span>commits数：{item.commits_count}</span>
+                          </div>
                         </div>
-                      }
-                    </li>
+                        <AlignCenter className="listMain">
+                          <p className="listInfoDesc task-hide-2">{item.description}</p>
+                          <img src={(item.author && getUrlHead(item.author.image_url)) || DefaultImg} alt="" width="48px" className="ml10"/>
+                        </AlignCenter>
+                        {
+                          item.project_tags && item.project_tags.length>0 &&
+                          <div className="listTag">
+                            {
+                              item.project_tags.map((i,k)=>{
+                                return(
+                                  <span>{i}</span>
+                                )
+                              })
+                            }
+                          </div>
+                        }
+                        <div className="projectNum">
+                          <AlignCenter><i className="iconfont icon-liulanyan font-12 mr2"></i>{item.visits}</AlignCenter>
+                          <AlignCenter><i className="iconfont icon-kongxing font-12 mr2"></i>{item.praises_count}</AlignCenter>
+                          <AlignCenter><i className="iconfont icon-fork font-12 mr2"></i>{item.forked_count}</AlignCenter>
+                        </div>
+                      </li>
+                    </a>
                   )
                 })
               }
             </div>
           :""
         }
+        {
+          list && list.length === 0 && <Skeleton />
+        }
+        {
+          total > limit &&
+          <div className="edu-txt-center">
+            <Pagination showQuickJumper current={page} total={total} pageSize={limit} onChange={(p)=>{setPage(p)}}/>
+          </div>
+        }
+        
       </div>
-    </div>
+      </Long>
+      <Short>
+        <Gap>
+          <FlexAJ>
+            <p className="font-16">活跃度排名</p>
+            <ul>
+              <a className={date === "week"?"color-blue":"color-grey-9"} onClick={()=>setDate("week")}>周</a>
+              <a className={date === "month"?"ml15 color-blue":"ml15 color-grey-9"} onClick={()=>setDate("month")}>月</a>
+              <a className={date === "year"?"ml15 color-blue":"ml15 color-grey-9"} onClick={()=>setDate("year")}>年</a>
+            </ul>
+          </FlexAJ>
+          <Ranking data={rankList}/>
+        </Gap>
+      </Short>
+    </Box>
   )
 }
-export default HOC(Index);
\ No newline at end of file
+export default HomeHoc(Index);
\ No newline at end of file
diff --git a/src/mulan/Projects/Index.scss b/src/mulan/Projects/Index.scss
index 1c193d3e..e11a1d66 100644
--- a/src/mulan/Projects/Index.scss
+++ b/src/mulan/Projects/Index.scss
@@ -1,16 +1,13 @@
 .panels{
   width: 1200px;
-  margin:20px auto 60px;
+  margin:40px auto 60px;
   .projectsList{
-    margin:20px;
-    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
     .lists{
       min-height:500px;
-      padding:20px 30px;
       display: flex;
       flex-wrap: wrap;
       align-items: flex-start;;
-      & > li{
+      & >a{
         margin-right: 2%;
         border: 1px solid #eee;
         width: 32%;
@@ -25,33 +22,67 @@
         &:nth-child(3n){
           margin-right: 0px;
         }
-        .listName{
+        .listinfo{
           display: flex;
+          flex-direction: column;
           align-items: center;
           justify-content: center;
-          padding:10px 20px;
+          padding:0px 20px;
           height: 90px;
-          background-image: linear-gradient(to right, #118af3, #8dcaf5);
+          background-image: url('../images/cards.png');
           color: #fff;
-          font-size: 18px;
           border-radius: 4px 4px 0px 0px;
-          cursor: pointer;
+          .listName{
+            font-size: 18px;
+            margin:0px;
+            height: 22px;
+            line-height: 22px;
+            margin-bottom: 10px;
+            word-break: break-all;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            width:100%
+          }
+          .listNum{
+            display: flex;
+            flex-wrap: wrap;
+            width: 100%;
+            span{
+              display:block;
+              width: 50%;
+              font-size: 12px;
+              color: #fff;
+              height: 18px;
+              line-height: 18px;
+              &:nth-child(2n){
+                text-align: right;
+              }
+            }
+          }
         }
-        .listInfo{
-          padding:12px 20px 0px 20px;
+        .listMain{
+          display: flex;
+          justify-content: space-between;
+          padding:10px 20px 0px 20px;
+          align-items: center;
           .listInfoDesc{
             line-height: 20px;
             margin:0px;
-            color:#999;
+            color:#666666;
+            max-width: 182px;
+            word-break: break-all;
           }
         }
         .listTag{
-          padding:10px 20px;
+          padding:10px 0px;
+          margin:0px 20px;
+          border-bottom: 1px solid #F1F1F1;
           span{
             display: inline-block;
             margin-right: 5px;
-            background-color: #c5c5c5;
-            color: #fff;
+            background-color: #B9DDFF;
+            color: #1890FF;
             padding:0px 5px;
             border-radius: 4px;
             height: 20px;
@@ -59,6 +90,59 @@
             font-size: 12px;
           }
         }
+        .projectNum{
+          display: flex;
+          justify-content: space-between;
+          color:#999999;
+          font-size: 12px;
+          padding:10px 20px;
+          i{
+            margin-right: 3px;
+            color: #666666!important;
+          }
+        }
+      }
+    }
+  }
+}
+.arrayList{
+  padding:20px 20px 20px 10px;
+  box-shadow: 0px 0px 8px 0px #F1F1F1;
+  min-height: 400px;
+  ul {
+    margin:0px;
+    &>li{
+      display: flex;
+      align-items: center;
+      height: 36px;
+      line-height: 36px;
+      &:first-child .index{
+        color: #E53333;
+      }
+      &:nth-child(2) .index{
+        color: #FF8C29;
+      }
+      &:nth-child(3) .index{
+        color: #F7B500;
+      }
+      .index{
+        display: block;
+        width: 20px;
+        text-align: center;
+        color: #999999;
+      }
+      .name{
+        margin-left: 10px;
+        flex:1;
+        text-align: left;
+        color: #333;
+        margin-bottom: 0px;
+        max-width: 170px;
+      }
+      .num{
+        text-align: right;
+        margin-left: 15px;
+        color: #999999;
       }
     }
   }
diff --git a/src/mulan/Projects/Ranking.jsx b/src/mulan/Projects/Ranking.jsx
new file mode 100644
index 00000000..af8ac189
--- /dev/null
+++ b/src/mulan/Projects/Ranking.jsx
@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react';
+import {Skeleton} from 'antd';
+
+function Ranking({data}){
+  const [list ,setList ]= useState([]);
+  
+  useEffect(()=>{
+    setList(data);
+  },[data])
+
+  return(
+    <div className="arrayList">
+      {
+        list && list.length >0?
+        <ul>
+          {
+            list.map((i,k)=>{
+              return(
+                <li>
+                  <span className="index">{i.no}</span>
+                  <p className="name task-hide">{i.project_full_name}</p>
+                  <span className="num">{i.commits}</span>
+                </li>
+              )
+            })
+          }
+        </ul>
+        :<Skeleton />
+      }
+    </div>
+  )
+}
+export default Ranking;
\ No newline at end of file
diff --git a/src/mulan/images/1_1.png b/src/mulan/images/1_1.png
index e4fd05d8..eadb707a 100644
Binary files a/src/mulan/images/1_1.png and b/src/mulan/images/1_1.png differ
diff --git a/src/mulan/images/320.jpeg b/src/mulan/images/320.jpeg
deleted file mode 100644
index b4c3a18a..00000000
Binary files a/src/mulan/images/320.jpeg and /dev/null differ
diff --git a/src/mulan/images/320.jpg b/src/mulan/images/320.jpg
new file mode 100644
index 00000000..329796e8
Binary files /dev/null and b/src/mulan/images/320.jpg differ
diff --git a/src/mulan/images/bg2.jpg b/src/mulan/images/bg2.jpg
index 178e1b49..1680b606 100644
Binary files a/src/mulan/images/bg2.jpg and b/src/mulan/images/bg2.jpg differ
diff --git a/src/mulan/images/cards.png b/src/mulan/images/cards.png
new file mode 100644
index 00000000..95ace48a
Binary files /dev/null and b/src/mulan/images/cards.png differ
diff --git a/src/mulan/images/icon1.png b/src/mulan/images/icon1.png
index 801bad9f..9cbc8e33 100644
Binary files a/src/mulan/images/icon1.png and b/src/mulan/images/icon1.png differ
diff --git a/src/mulan/images/icon2.png b/src/mulan/images/icon2.png
index 0d3d4545..3993ee7f 100644
Binary files a/src/mulan/images/icon2.png and b/src/mulan/images/icon2.png differ
diff --git a/src/mulan/license/FAQ.jsx b/src/mulan/license/FAQ.jsx
index 5ab732a0..aee2107e 100644
--- a/src/mulan/license/FAQ.jsx
+++ b/src/mulan/license/FAQ.jsx
@@ -1,104 +1,31 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Title from '../../forge/Component/Title';
 import RenderHtml from '../../components/render-html';
+import { Skeleton } from 'antd';
+import Axios from 'axios';
 
 function FAQ(props){
-  const value = `<div class="content">
-  <p><strong>木兰宽松许可证，第1版（Mulan PSL v1）的主要特点是什么？</strong></p>
-  <p class="tid2 mb2">Mulan PSL v1许可证采用中英文表达，中英文表述具有同等法律效力，简化了中国使用者进行法律解释时的复杂度；许可证针对现有诉讼问题更清晰地明确版权、专利和商标授权，提供更完善的法律保护；许可证遵从表述简洁原则，去除冗余，条款简洁，容易理解，兼容性好。</p>
-
-  <p><strong>木兰宽松许可证，第1版（Mulan PSL v1）与业界主流许可证的主要异同是什么？</strong></p>
-  <p class="tid2">Mulan PSL v1与BSD 3-clause License与Apache License V2.0在声明义务、专利许可、对用户专利维权限制及版权许可上均有差异，在商标许可上无差异，见下表：</p>
-  <div class="mb2">
-      <table class="ui small celled table">
-          <thead>
-          <tr>
-              <th style="width:10%"></th>
-              <th class="center aligned" style="width:30%"><strong>Mulan PSL v1</strong></th>
-              <th class="center aligned" style="width:30%"><strong>BSD 3-clause License</strong></th>
-              <th class="center aligned" style="width:30%"><strong>Apache License V2.0</strong></th>
-          </tr>
-          </thead>
-          <tbody>
-          <tr class="top aligned">
-              <td><strong>声明义务</strong></td>
-              <td>
-                  <p>1，分发时附带许可证，保留免责等声明</p>
-              </td>
-              <td>
-                  <p>1，分发时附带许可证，保留免责等声明；</p>
-                  <p>2，其他使用时附带许可证，保留免责等声明</p>
-              </td>
-              <td>
-                  <p>1，分发时附带许可证；</p>
-                  <p>2，分发修改版时应明显声明已修改的文件；</p>
-                  <p>3，分发修改版源代码时保留各种声明；</p>
-                  <p>4，如许可软件含Notice文件，则分发修改版时应带其中的归属声明</p>
-              </td>
-          </tr>
-          <tr class="top aligned">
-              <td><strong>专利许可</strong></td>
-              <td>
-                  <p>1，原始许可人及其关联实体提供专利许可；</p>
-                  <p>2，后续贡献者及其关联实体提供专利许可；</p>
-              </td>
-              <td>
-                  <p>无明确专利许可</p>
-              </td>
-              <td>
-                  <p>1，原始许可人提供专利许可；</p>
-                  <p>2，后续贡献者及其关联实体提供专利许可；</p>
-              </td>
-          </tr>
-          <tr class="top aligned">
-              <td><strong>对用户专利维权的限制</strong></td>
-              <td>
-                  <p>1，用户及其关联实体如直接对许可软件发起专利诉讼，专利许可终止；</p>
-                  <p>2，发起非诉讼维权（如行政维权）专利许可终止；</p>
-                  <p>3，通过间接方式实施上述行为，专利许可终止</p>
-              </td>
-              <td>无</td>
-              <td>
-                  <p>1，用户及其关联实体如直接对许可软件发起专利诉讼，专利许可终止；</p>
-              </td>
-          </tr>
-          <tr class="top aligned">
-              <td><strong>版权许可</strong></td>
-              <td>
-                  <p>1，原始版权人及其关联公司提供版权许可；</p>
-                  <p>2，后续贡献者及其关联实体提供版权许可；</p>
-              </td>
-              <td>
-                  <p>所有贡献者授予版权许可</p>
-              </td>
-              <td>
-                  <p>1，原始许可人提供版权许可；</p>
-                  <p>2，后续贡献者及其关联实体提供版权许可；</p>
-              </td>
-          </tr>
-          <tr class="top aligned">
-              <td><strong>商标许可</strong></td>
-              <td>无</td>
-              <td>无</td>
-              <td>无</td>
-          </tr>
-          </tbody>
-      </table>
-
-  </div>
-
-  <p><strong>木兰宽松许可证，第1版（Mulan PSL v1）与业界主流许可证兼容情况如何？</strong></p>
-  <p class="tid2">许可证的兼容性评判并无统一标准。我们从Mulan PSL v1的条款及目的出发，认为Mulan PSL v1与BSD类许可证类似，兼容性很好。BSD、MIT类宽松许可证兼容Mulan PSL v1许可证；Mulan PSL v1兼容Apache License v2.0、L/GPLv2、L/GPLv3等许可证。即，许可在BSD、MIT类许可证下的代码可以贡献到Mulan PSL v1的项目中，许可在Mulan PSL v1下的代码可以贡献到Apache License V2.0、L/GPLv2或L/GPLv3等的项目中。</p>
-  <p class="tid2">注意，许可证A兼容许可证B（A许可证是B许可证 Compatible）是指，A授权的作品与B授权的作品经过修改或合并，可以使用B对作品的整体进行授权。兼容性是有方向的，A兼容B，但B不一定兼容A。</p>
-
-
-</div>`;
+    const [ value , setValue ] = useState(undefined);
+  
+    useEffect(()=>{
+        const url = `/helps/faq.json`;
+        Axios.get(url).then(result=>{
+            if(result){
+                setValue(result.data.data.content);
+            }
+        }).catch(error=>{})
+    },[])
   return(
     <div>
       <Title>常见问题</Title>
-      <div class="content">
+      <div class="contents">
         <div className="pre">
-          <RenderHtml className="break_word_comments imageLayerParent" value={value} url={props.history.location}/>
+            {
+              value ? 
+                <RenderHtml className="break_word_comments imageLayerParent" value={value} url={props.history.location}/>
+              :
+                <Skeleton />
+            }
         </div>
       </div>
     </div>
diff --git a/src/mulan/license/Index.jsx b/src/mulan/license/Index.jsx
index 12482f42..3e01c99c 100644
--- a/src/mulan/license/Index.jsx
+++ b/src/mulan/license/Index.jsx
@@ -1,10 +1,11 @@
-import React from 'react';
-import { HOC }  from '../HOC/Index';
+import React, { useEffect, useState } from 'react';
+import { HomeHoc }  from '../HOC/HomeHoc';
 import {Route, Switch , Link } from 'react-router-dom';
 import Loadable from 'react-loadable';
 import Loading from '../../Loading';
 import { Box , Long , Short , Gap } from '../../forge/Component/layout';
 import './Index.scss';
+import { Menu } from 'antd';
 
 const Preface = Loadable({
   loader: () => import('./Preface'),
@@ -23,17 +24,41 @@ const FAQ = Loadable({
   loading: Loading,
 })
 function Index(props){
+  const [ nav , setNav ] = useState("0");
+
   const pathname = props.history.location.pathname;
+  useEffect(()=>{
+    if(pathname){
+      if(pathname === `/license/preface`){
+        setNav("0");
+      }
+      if(pathname === `/license/psl/mulanpsl-v1`){
+        setNav("1");
+      }
+      if(pathname === `/license/psl/mulanpsl-v2`){
+        setNav("2");
+      }
+      if(pathname === `/license/public/MulanPubL-V1`){
+        setNav("3");
+      }
+      if(pathname === `/license/faq`){
+        setNav("4");
+      }
+    }
+  },[pathname])
   return(
     <div className="panelsBox">
       <Box>
         <Short>
-          <ul className="leftmenus">
-            <li className={pathname.indexOf(`/license/preface`) > -1 ?"active":""}><Link to={`/license/preface`}>引言</Link></li>
-            <li className={pathname.indexOf(`/license/psl`) > -1 ?"active":""}><Link to={`/license/psl/1`}>木兰宽松许可证</Link></li>
-            <li className={pathname.indexOf(`/license/public`) > -1 ?"active":""}><Link to={`/license/public/1`}>木兰公共许可证</Link></li>
-            <li className={pathname.indexOf(`/license/faq`) > -1 ?"active":""}><Link to={`/license/faq`}>常见问题</Link></li>
-          </ul>
+          <Menu selectedKeys={[nav]} mode="inline" className="menus" defaultOpenKeys={["2_1"]}>
+            <Menu.Item key="0"><Link to={`/license/preface`}>引言</Link></Menu.Item>
+            <Menu.SubMenu key="2_1" title={"木兰宽松许可证"}>
+              <Menu.Item key="1"><Link to={`/license/psl/mulanpsl-v1`}>第一版</Link></Menu.Item>
+              <Menu.Item key="2"><Link to={`/license/psl/mulanpsl-v2`}>第二版</Link></Menu.Item>
+            </Menu.SubMenu>
+            <Menu.Item key="3"><Link to={`/license/public/MulanPubL-V1`}>木兰公共许可证</Link></Menu.Item>
+            <Menu.Item key="4"><Link to={`/license/faq`}>常见问题</Link></Menu.Item>
+          </Menu>
         </Short>
         <Long>
           <Gap>
@@ -71,4 +96,4 @@ function Index(props){
     </div>
   )
 }
-export default HOC(Index);
\ No newline at end of file
+export default HomeHoc(Index);
\ No newline at end of file
diff --git a/src/mulan/license/Index.scss b/src/mulan/license/Index.scss
index 8ba0a7d0..812b60ec 100644
--- a/src/mulan/license/Index.scss
+++ b/src/mulan/license/Index.scss
@@ -1,42 +1,25 @@
 .panelsBox{
   width: 1200px;
   margin: 20px auto;
-  .leftmenus{
-    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
-    li{
-      height: 52px;
-      line-height: 52px;
-      border-bottom: 1px solid #eee;
-      position: relative;
-      &:last-child{
-        border: none;
-      }
-      &.active::before{
-        position: absolute;
-        content: "";
-        left: 0px;
-        height: 30px;
-        width: 3px;
-        top:50%;
-        margin-top: -15px;
-        background-color: #4d9fef;
-      }
-      &.active a,a:hover{
-        color: #4d9fef;
-      }
-      a{
-        display: block;
-        padding:0px 20px;
-        font-size:16px;
-        color:#333;
-      }
+  .menus.ant-menu-inline{
+    border-right: none;
+    box-shadow: 0px 0px 8px 0px #F1F1F1;
+    .ant-menu-submenu-arrow{
+      display: none;
+    }
+    .ant-menu-item-selected{
+      background-color: #fff;
+      color: #1890ff;
+    }
+    .ant-menu-item::after{
+      display: none;
     }
   }
 }
 .boxshadow{
   box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
 }
-.content{
+.contents{
   padding:15px 30px;
   font-size: 15px;
   line-height: 24px;
diff --git a/src/mulan/license/PSL.jsx b/src/mulan/license/PSL.jsx
index 0a1da1f3..dbbb2a18 100644
--- a/src/mulan/license/PSL.jsx
+++ b/src/mulan/license/PSL.jsx
@@ -1,118 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import Title from '../../forge/Component/Title';
 import RenderHtml from '../../components/render-html';
-import { Dropdown , Menu } from 'antd';
-import { Link } from 'react-router-dom';
+import { Button } from 'antd';
+import { Skeleton } from 'antd';
+import Axios from 'axios';
 
-const list = {
-  1:`<p><strong>木兰宽松许可证， 第1版</strong></p>
-  <p style={{marginBottom:"20px"}}>2019年8月</p>
-
-  <p style={{textIndent:"2em"}}>您对“软件”的复制、使用、修改及分发受木兰宽松许可证，第1版（“本许可证”）的如下条款的约束：</p>
-  <p><strong>0.&nbsp;&nbsp;&nbsp;定义</strong></p>
-  <div style={{textIndent:"2em"}}>
-      <p><strong>“软件”</strong>是指由“贡献”构成的许可在“本许可证”下的程序和相关文档的集合。</p>
-      <p><strong>“贡献者”</strong>是指将受版权法保护的作品许可在“本许可证”下的自然人或“法人实体”。</p>
-      <p><strong>“法人实体”</strong>是指提交贡献的机构及其“关联实体”。</p>
-      <p><strong>“关联实体”</strong>是指，对“本许可证”下的一方而言，控制、受控制或与其共同受控制的机构，此处的控制是指有受控方或共同受控方至少50%直接或间接的投票权、资金或其他有价证券。</p>
-      <p><strong>“贡献”</strong>是指由任一“贡献者”许可在“本许可证”下的受版权法保护的作品。</p>
-  </div>
-
-  <p><strong>1.&nbsp;&nbsp;&nbsp;授予版权许可</strong></p>
-  <div style={{textIndent:"2em"}}>
-      <p>每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的版权许可，您可以复制、使用、修改、分发其“贡献”，不论修改与否。</p>
-  </div>
-
-  <p><strong>2.&nbsp;&nbsp;&nbsp;授予专利许可</strong></p>
-  <div style={{textIndent:"2em"}}>
-      <p>每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的（根据本条规定撤销除外）专利许可，供您制造、委托制造、使用、许诺销售、销售、进口其“贡献”或以其他方式转移其“贡献”。前述专利许可仅限于“贡献者”现在或将来拥有或控制的其“贡献”本身或其“贡献”与许可“贡献”时的“软件”结合而将必然会侵犯的专利权利要求，不包括仅因您或他人修改“贡献”或其他结合而将必然会侵犯到的专利权利要求。如您或您的“关联实体”直接或间接地（包括通过代理、专利被许可人或受让人），就“软件”或其中的“贡献”对任何人发起专利侵权诉讼（包括反诉或交叉诉讼）或其他专利维权行动，指控其侵犯专利权，则“本许可证”授予您对“软件”的专利许可自您提起诉讼或发起维权行动之日终止。</p>
-  </div>
-
-  <p><strong>3.&nbsp;&nbsp;&nbsp;无商标许可</strong></p>
-  <div style={{textIndent:"2em"}}>
-      <p>“本许可证”不提供对“贡献者”的商品名称、商标、服务标志或产品名称的商标许可，但您为满足第4条规定的声明义务而必须使用除外。</p>
-  </div>
-
-  <p><strong>4.&nbsp;&nbsp;&nbsp;分发限制</strong></p>
-  <div style={{textIndent:"2em"}}>
-      <p>您可以在任何媒介中将“软件”以源程序形式或可执行形式重新分发，不论修改与否，但您必须向接收者提供“本许可证”的副本，并保留“软件”中的版权、商标、专利及免责声明。</p>
-  </div>
-
-  <p><strong>5.&nbsp;&nbsp;&nbsp;免责声明与责任限制</strong></p>
-  <div style={{textIndent:"2em"}}>
-      <p>“软件”及其中的“贡献”在提供时不带任何明示或默示的担保。在任何情况下，“贡献者”或版权所有者不对任何人因使用“软件”或其中的“贡献”而引发的任何直接或间接损失承担责任，不论因何种原因导致或者基于何种法律理论,即使其曾被建议有此种损失的可能性。</p>
-  </div>
-
-  <p><strong>条款结束</strong></p>
-  <p><strong>如何将木兰宽松许可证，第1版，应用到您的软件</strong></p>
-  <p>如果您希望将木兰宽松许可证，第1版，应用到您的新软件，为了方便接收者查阅，建议您完成如下三步：</p>
-  <p>1， 请您补充如下声明中的空白，包括软件名、软件的首次发表年份以及您作为版权人的名字；</p>
-  <p>2， 请您在软件包的一级目录下创建以“LICENSE”为名的文件，将整个许可证文本放入该文件中；</p>
-  <p>3， 请将如下声明文本放入每个源文件的头部注释中。</p>
-  <pre>Copyright (c) [2019] [name of copyright holder]
-      [Software Name] is licensed under the Mulan PSL v1.
-      You can use this software according to the terms and conditions of the Mulan PSL v1.
-      You may obtain a copy of Mulan PSL v1 at:
-          http://license.coscl.org.cn/MulanPSL
-      THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR
-      IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR
-      PURPOSE.
-      See the Mulan PSL v1 for more details.</pre>`,
-  2:`<p><strong>木兰宽松许可证， 第2版</strong></p>
-  <p style={{marginBottom:"20px"}}>2020年1月</p>
-  <p style={{textIndent:"2em"}}>您对“软件”的复制、使用、修改及分发受木兰宽松许可证，第2版（“本许可证”）的如下条款的约束：</p>
-  <div style={{textIndent:"2em"}}>
-      <p><strong>0.&nbsp;&nbsp;&nbsp;定义</strong></p>
-      <p><strong>“软件”</strong> 是指由“贡献”构成的许可在“本许可证”下的程序和相关文档的集合。</p>
-      <p><strong>“贡献”</strong> 是指由任一“贡献者”许可在“本许可证”下的受版权法保护的作品。</p>
-      <p><strong>“贡献者”</strong> 是指将受版权法保护的作品许可在“本许可证”下的自然人或“法人实体”。</p>
-      <p><strong>“法人实体”</strong> 是指提交贡献的机构及其“关联实体”。</p>
-      <p><strong>“关联实体”</strong> 是指，对“本许可证”下的行为方而言，控制、受控制或与其共同受控制的机构，此处的控制是指有受控方或共同受控方至少50%直接或间接的投票权、资金或其他有价证券。</p>
-  </div>
-  <div style={{textIndent:"2em"}}>
-      <p><strong>1.&nbsp;&nbsp;&nbsp;授予版权许可</strong></p>
-      <p>每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的版权许可，您可以复制、使用、修改、分发其“贡献”，不论修改与否。</p>
-  </div>
-  <div style={{textIndent:"2em"}}>
-      <p><strong>2.&nbsp;&nbsp;&nbsp;授予专利许可</strong></p>
-      <p>每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的（根据本条规定撤销除外）专利许可，供您制造、委托制造、使用、许诺销售、销售、进口其“贡献”或以其他方式转移其“贡献”。前述专利许可仅限于“贡献者”现在或将来拥有或控制的其“贡献”本身或其“贡献”与许可“贡献”时的“软件”结合而将必然会侵犯的专利权利要求，不包括对“贡献”的修改或包含“贡献”的其他结合。如果您或您的“关联实体”直接或间接地，就“软件”或其中的“贡献”对任何人发起专利侵权诉讼（包括反诉或交叉诉讼）或其他专利维权行动，指控其侵犯专利权，则“本许可证”授予您对“软件”的专利许可自您提起诉讼或发起维权行动之日终止。</p>
-  </div>
-  <div style={{textIndent:"2em"}}>
-      <p><strong>3.&nbsp;&nbsp;&nbsp;无商标许可</strong></p>
-      <p>“本许可证”不提供对“贡献者”的商品名称、商标、服务标志或产品名称的商标许可，但您为满足第4条规定的声明义务而必须使用除外。</p>
-  </div>
-  <div style={{textIndent:"2em"}}>
-      <p><strong>4.&nbsp;&nbsp;&nbsp;分发限制</strong></p>
-      <p>您可以在任何媒介中将“软件”以源程序形式或可执行形式重新分发，不论修改与否，但您必须向接收者提供“本许可证”的副本，并保留“软件”中的版权、商标、专利及免责声明。</p>
-  </div>
-
-  <div style={{textIndent:"2em"}}>
-      <p><strong>5.&nbsp;&nbsp;&nbsp;免责声明与责任限制</strong></p>
-      <p><strong>“软件”及其中的“贡献”在提供时不带任何明示或默示的担保。在任何情况下，“贡献者”或版权所有者不对任何人因使用“软件”或其中的“贡献”而引发的任何直接或间接损失承担责任，不论因何种原因导致或者基于何种法律理论,即使其曾被建议有此种损失的可能性。</strong></p>
-  </div>
-
-  <div style={{textIndent:"2em"}}>
-      <p><strong>6.&nbsp;&nbsp;&nbsp;语言</strong></p>
-      <p><strong>“本许可证”以中英文双语表述，中英文版本具有同等法律效力。如果中英文版本存在任何冲突不一致，以中文版为准。</strong></p>
-  </div>
-
-  <p style={{marginBottom:"20px"}}><strong>条款结束</strong></p>
-
-  <p><strong>如何将木兰宽松许可证，第2版，应用到您的软件</strong></p>
-  <p>如果您希望将木兰宽松许可证，第2版，应用到您的新软件，为了方便接收者查阅，建议您完成如下三步：</p>
-  <p>1， 请您补充如下声明中的空白，包括软件名、软件的首次发表年份以及您作为版权人的名字；</p>
-  <p>2， 请您在软件包的一级目录下创建以“LICENSE”为名的文件，将整个许可证文本放入该文件中；</p>
-  <p>3， 请将如下声明文本放入每个源文件的头部注释中。</p>
-  <pre>Copyright (c) [Year] [name of copyright holder]
-    [Software Name] is licensed under Mulan PSL v2.
-    You can use this software according to the terms and conditions of the Mulan PSL v2.
-    You may obtain a copy of Mulan PSL v2 at:
-            http://license.coscl.org.cn/MulanPSL2
-    THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
-    EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
-    MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
-    See the Mulan PSL v2 for more details.</pre>`
-}
 function PSL(props){
   const [value , setValue ] = useState(undefined);
   const id = props.match.params.id;
@@ -120,25 +12,31 @@ function PSL(props){
   useEffect(()=>{
     if(id && id!==value){
       setValue(parseInt(id));
-      console.log(id);
     }
   },[id])
 
-  const menus = (
-    <Menu>
-      <Menu.Item><Link to={`/license/psl/1`}>第一版</Link></Menu.Item>
-      <Menu.Item><Link to={`/license/psl/2`}>第二版</Link></Menu.Item>
-    </Menu>
-  )
+  useEffect(()=>{
+    const url = `/helps/${id}.josn`;
+    Axios.get(url).then(result=>{
+        if(result){
+            setValue(result.data.data.content);
+        }
+    }).catch(error=>{})
+  },[id])
+
 
   return(
     <div>
-      <Title>木兰宽松许可证<Dropdown overlay={menus} placement="bottomRight"><i className="iconfont icon-sandian font-17 color-grey-9"></i></Dropdown></Title>
-      <div class="content">
+      <Title>木兰宽松许可证
+        {/* <Button type={"primary"}>下载</Button> */}
+      </Title>
+      <div class="contents">
         <div className="pre">
           {
-            value && 
-            <RenderHtml className="break_word_comments imageLayerParent" value={list[value]} url={props.history.location}/>
+            value ? 
+            <RenderHtml className="break_word_comments imageLayerParent" value={value} url={props.history.location}/>
+            :
+            <Skeleton />
           }
         </div>
       </div>
diff --git a/src/mulan/license/Preface.jsx b/src/mulan/license/Preface.jsx
index 541b9b34..d5490fd8 100644
--- a/src/mulan/license/Preface.jsx
+++ b/src/mulan/license/Preface.jsx
@@ -1,20 +1,30 @@
-import React from 'react';
+import React,{useState,useEffect} from 'react';
 import Title from '../../forge/Component/Title';
+import Axios from 'axios';
+import RenderHtml from '../../components/render-html';
+import { Skeleton } from 'antd';
 
 function Preface(props){
+  const [ value , setValue ] = useState(undefined);
+
+  useEffect(()=>{
+      const url = `/helps/introduction.json`;
+      Axios.get(url).then(result=>{
+          if(result){
+              setValue(result.data.data.content);
+          }
+      }).catch(error=>{})
+  },[])
   return(
     <div>
       <Title>引言</Title>
       <div class="content">
-        <p>开源（Open Source）是人类在互联网发展进程中探索出的一种面向全球的大规模协作生产方式，它以开放共享、合作共赢为宗旨，有效地推进了全球化进程。当前，我国开发者和企业参与开源的热情不断高涨，开源产业也逐步完善；然而，我国面向开源的环境、技术、人才、生态等方面还存在诸多问题。推动国内外开源的交流与合作，促进产学研用结合，保护广大开源参与者的利益，造就有影响力、可持续发展的开源生态系统，是相关行业当前的一项重要任务。</p>
-        <p>开源许可证是对开源软件的使用、复制、修改和分发等行为进行规范和约束的一种具有法律效力的格式合同，是开源运动的基石。目前，经开源促进会（OSI）认证的开源软件许可证共有 80 多个，它们都由国外或国际组织机构使用英文发布。对于来自世界各地的广大开源参与者而言，现有许可证中的条款的表述比较晦涩，容易因理解有误而违约。同时，很多许可证对被许可方责任和义务的表述不够完善，容易导致难以解决的法律纠纷。此外，当前国际形势需要来自全球不同地方的更多声音和力量来倡导开源。</p>
-        <p>基于以上考虑，北京大学作为国家重点研发计划“云计算和大数据开源社区生态系统”的子任务牵头单位，依托全国信标委云计算标准工作组和中国开源云联盟，联合国内开源生态圈产学研各界优势团队、开源社区以及拥有丰富知识产权相关经验的众多律师，在对现有主流开源协议全面分析的基础上，共同起草、修订并发布了木兰系列开源许可证。</p>
-        <p>第一发，木兰宽松许可证（Mulan PSL v1），具有以下特点：</p>
-        <p>1，许可证内容以中英文双语表述，中英文版本具有同等法律效力，方便更多的开源参与者阅读使用，简化了中国使用者进行法律解释时的复杂度。</p>
-        <p>2，许可证明确授予用户永久性、全球性、免费的、非独占的、不可撤销的版权和专利许可，并针对目前专利联盟存在的互诉漏洞问题，明确规定禁止“贡献者”或“关联实体”直接或间接地（通过代理、专利被许可人或受让人）进行专利诉讼或其他维权行动，否则终止专利授权。</p>
-        <p>3，许可证明确不提供对“贡献者”的商品名称、商标、服务标志等的商标许可，保护“贡献者”的切身利益。</p>
-        <p>4，许可证经技术专家和法律专家共同修订，在明确合同双方行为约束的前提下尽可能地精简条款、优化表述，降低产生法律纠纷的风险。</p>
-        <p>贡献单位：北京大学，中国电子技术标准化研究院，西南大学，中国科学院软件所，开源社，中移（苏州）软件技术有限公司，华为技术有限公司，华云数据集团有限公司，普元信息技术股份有限公司，中兴通讯股份有限公司，中标软件有限公司等</p>
+        {
+          value ? 
+          <RenderHtml className="break_word_comments imageLayerParent" value={value} url={props.history.location}/>
+          :
+          <Skeleton />
+        }
       </div>
     </div>
   )
diff --git a/src/mulan/license/Public.jsx b/src/mulan/license/Public.jsx
index a6fccabf..c738c91c 100644
--- a/src/mulan/license/Public.jsx
+++ b/src/mulan/license/Public.jsx
@@ -1,92 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import Title from '../../forge/Component/Title';
 import RenderHtml from '../../components/render-html';
-import { Dropdown , Menu } from 'antd';
-import { Link } from 'react-router-dom';
+import { Button } from 'antd';
+import { Skeleton } from 'antd';
+import Axios from 'axios';
 
-const list = {
-  1:`<p><strong>木兰公共许可证，第1版</strong></p>
-  <p style={{marginBottom:"2em"}}>2020年12月</p>
-
-  <p style={{textIndent:"2em"}}>您对“贡献”的复制、使用、修改及分发受木兰公共许可证, 第1版（“本许可证”）的如下条款的约束：</p>
-  <p><strong>0.&nbsp;&nbsp;&nbsp;定义</strong></p>
-  <div style={{textIndent:"2em"}}>
-      <p><strong>“贡献”</strong>是指由“贡献者”许可在“本许可证”下的受版权法保护的作品，包括最初“贡献者”许可在“本许可证”下的作品及后续“贡献者”许可在“本许可证”下的“衍生作品”。</p>
-      <p><strong>“贡献者”</strong>是指将受版权法保护的作品许可在“本许可证”下的自然人或“法人实体”。</p>
-      <p><strong>“法人实体”</strong>是指提交贡献的机构及其“关联实体”。</p>
-      <p><strong>“关联实体”</strong>是指，对“本许可证”下的行为方而言，控制、受控制或与其共同受控制的机构，此处的控制是指有受控方或共同受控方至少50%直接或间接的投票权、资金或其他有价证券。</p>
-      <p><strong>“衍生作品”</strong>是指基于“贡献”创作的作品，具体包括对全部或部分“贡献”进行修改、重写、翻译、注释、组合或与之链接（包括动态链接或静态链接）而形成的作品。仅与“贡献”进行进程间通信或系统调用的作品是独立作品，不属于“衍生作品”。</p>
-      <p><strong>“对应源代码”</strong>是指生成、安装和(对于可执行作品)运行目标代码所需的所有源文件和与之关联的接口定义文件，以及控制这些活动的脚本，但不包括编译环境、编译工具、云服务平台（如果有）。</p>
-      <p><strong>“分发”</strong>是指通过任何媒介向他人提供“贡献”或“衍生作品”的行为，以及利用“贡献”或“衍生作品”通过网络远程给用户提供服务的行为，例如通过利用“贡献”或“衍生作品”搭建的云服务平台提供在线服务的行为。</p>
-  </div>
-
-  <p><strong>1.&nbsp;&nbsp;&nbsp;授予版权许可</strong></p>
-  <div style={{textIndent:"2em"}}>
-      <p>每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的版权许可，您可以复制、使用、修改、“分发”其“贡献”或“衍生作品”，不论修改与否。</p>
-  </div>
-
-  <p><strong>2.&nbsp;&nbsp;&nbsp;授予专利许可</strong></p>
-  <div style={{textIndent:"2em"}}>
-      <p>每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的（根据本条规定撤销除外）专利许可，供您制造、委托制造、使用、许诺销售、销售、进口其“贡献”或以其他方式转移其“贡献”。前述专利许可仅限于“贡献者”现在或将来拥有或控制的其“贡献”中的专利权利要求，不包括仅因您或他人修改“贡献”而将必然会侵犯到的专利权利要求。如果您或您的“关联实体”直接或间接地，就“贡献”对任何人发起专利侵权诉讼（包括反诉或交叉诉讼）或其他专利维权行动，指控其侵犯专利权，则本许可证授予您对“贡献”的专利许可自您提起诉讼或发起维权行动之日终止。</p>
-  </div>
-
-  <p><strong>3.&nbsp;&nbsp;&nbsp;无商标许可</strong></p>
-  <div style={{textIndent:"2em"}}>
-      <p>“本许可证”不提供对“贡献者”的商品名称、商标、服务标志或产品名称的商标许可，但您为满足第4条规定的声明义务而必须使用除外。</p>
-  </div>
-
-  <p><strong>4.&nbsp;&nbsp;&nbsp;分发限制</strong></p>
-  <div style={{textIndent:"2em"}}>
-      <p>您可以在任何媒介中将您接收到的“贡献”或您的“衍生作品”以源程序形式或可执行形式重新“分发”，但必须满足下列条件：</p>
-      <p>（1）您必须向接收者提供“本许可证”的副本，并保留“贡献”中的版权、商标、专利及免责声明；并且，</p>
-      <p>（2）如果您“分发”您接收到的“贡献”，您必须使用“本许可证”提供该“贡献”的源代码副本；如果您 “分发”您的“衍生作品”，您必须：</p>
-      <p>（i）随“衍生作品”向接收者提供使用“本许可证”“分发”的您的“衍生作品”的“对应源代码”。如果您通过下载链接提供前述“对应源代码”，则您应将下载链接地址置于“衍生作品”或其随附文档中的明显位置，有效期不少于自该“衍生作品”“分发”之日起三年，并确保接收者可以获得“对应源代码”；或者，</p>
-      <p>（ii）随“衍生作品”向接收者提供一个书面要约，表明您愿意提供使用“本许可证”“分发”的您“衍生作品”的“对应源代码”。书面要约应放在“衍生作品”中的明显位置，并确保接收者根据书面要约可获取“对应源代码”的时间从您接到该请求之日起不得超过三个月，且有效期不少于自该“衍生作品”“分发”之日起三年。</p>
-  </div>
-
-  <p><strong>5.&nbsp;&nbsp;&nbsp;违约与终止</strong></p>
-  <div style={{textIndent:"2em"}}>
-      <p>如果您违反“本许可证”，任何“贡献者”有权书面通知您终止其依据“本许可证”授予您的许可。该“贡献者”授予您的许可从您接到其终止通知之日起终止。但在如下两种情形下，即使您收到“贡献者”的通知也并不终止您的许可：</p>
-      <p>（1）您在接到终止通知之前已停止所有违反行为；</p>
-      <p>（2）您是首次收到该“贡献者”根据“本许可证”发出的书面终止通知，您在收到该通知后30天内停止所有违反行为。</p>
-      <p>只要下游接收者遵守“本许可证”的相关规定，您在“本许可证”下的许可终止，不影响下游接收者根据“本许可证”享有的权利。</p>
-  </div>
-
-  <p><strong>6.&nbsp;&nbsp;&nbsp;例外</strong></p>
-  <div style={{textIndent:"2em"}}>
-      <p>如果您将“贡献”或您的“衍生作品”与采用GPLv3、AGPLv3、或前述许可证的后续版本（以下简称“GPL类许可证”）的作品结合，且根据“GPL类许可证”的要求您有义务将形成的结合作品以对应的“GPL类许可证”许可的，您可以根据对应的“GPL类许可证”许可结合作品，只要您在分发该结合作品的同时向接收者提供“本许可证”的副本，并保留“贡献”中的版权、商标、专利及免责声明。任何“贡献者”不会因您根据前述原因选择“GPL类许可证”许可而授予该结合作品的接收者更多权利。</p>
-  </div>
-
-  <p><strong>7.&nbsp;&nbsp;&nbsp;免责声明与责任限制</strong></p>
-  <div style={{textIndent:"2em"}}>
-      <p><strong>“贡献”在提供时不带任何明示或默示的担保。在任何情况下，“贡献者”或版权所有者不对任何人因使用“贡献”而引发的任何直接或间接损失承担责任，不论因何种原因导致或者基于何种法律理论,即使其曾被建议有此种损失的可能性。</strong></p>
-  </div>
-
-  <p><strong>8.&nbsp;&nbsp;&nbsp;语言</strong></p>
-  <div style={{textIndent:"2em"}}>
-      <p><strong>“本许可证”以中英文双语表述，中英文版本具有同等法律效力。如果中英文版本存在任何冲突不一致，以中文版为准。</strong></p>
-  </div>
-
-  <p><strong>条款结束</strong></p>
-
-  <p>&nbsp;</p>
-
-  <p><strong>如何将木兰公共许可证，第1版，应用到您的软件</strong></p>
-  <p>如果您希望将木兰公共许可证，第1版，应用到您的新软件，为了方便接收者查阅，建议您完成如下三步：</p>
-  <p>1， 请您补充如下声明中的空白，包括软件名、软件的首次发表年份以及您作为版权人的名字；</p>
-  <p>2， 请您在软件包的一级目录下创建以“LICENSE”为名的文件，将整个许可证文本放入该文件中；</p>
-  <p>3， 请将如下声明文本放入每个源文件的头部注释中。</p>
-  <pre>Copyright (c) [Year] [name of copyright holder]
-    [Software Name] is licensed under Mulan PubL v1.
-    You can use this software according to the terms and conditions of the Mulan PubL v1.
-    You may obtain a copy of Mulan PubL v1 at:
-    http://license.coscl.org.cn/MulanPubL-1.0
-    THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
-    EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
-    MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
-    See the Mulan PubL v1 for more details.
-    </pre>`
-}
 function Public(props){
   const [value , setValue ] = useState(undefined);
   const id = props.match.params.id;
@@ -98,22 +16,27 @@ function Public(props){
     }
   },[id])
 
-  const menus = (
-    <Menu>
-      <Menu.Item><Link to={`/license/public/1`}>第一版</Link></Menu.Item>
-    </Menu>
-  )
+  useEffect(()=>{
+    const url = `/helps/${id}.josn`;
+    Axios.get(url).then(result=>{
+        if(result){
+            setValue(result.data.data.content);
+        }
+    }).catch(error=>{})
+  },[id])
 
   return(
     <div>
-      <Title>木兰公共许可证<Dropdown overlay={menus} placement="bottomRight"><i className="iconfont icon-sandian font-17 color-grey-9"></i></Dropdown></Title>
-      <div class="content">
+      {/* <Button type={"primary"}>下载</Button> */}
+      <Title>木兰公共许可证</Title>
+      <div class="contents">
         <div className="pre">
           {
-            value && 
-            <RenderHtml className="break_word_comments imageLayerParent" value={list[value]} url={props.history.location}/>
+            value ? 
+            <RenderHtml className="break_word_comments imageLayerParent" value={value} url={props.history.location}/>
+            :
+            <Skeleton />
           }
-          
         </div>
       </div>
     </div>