diff --git a/public/images/educoder/project_packagesHead.jpg b/public/images/educoder/project_packagesHead.jpg
new file mode 100644
index 000000000..181045e03
Binary files /dev/null and b/public/images/educoder/project_packagesHead.jpg differ
diff --git a/public/react/src/App.js b/public/react/src/App.js
index 49dac07cd..6d1e2a521 100644
--- a/public/react/src/App.js
+++ b/public/react/src/App.js
@@ -226,6 +226,12 @@ const Interestpage = Loadable({
 	loading: Loading,
 })
 
+//众包创新
+const ProjectPackages=Loadable({
+	loader: () => import('./modules/projectPackages/ProjectPackageIndex'),
+	loading: Loading,
+})
+
 class App extends Component {
 	constructor(props) {
 		super(props)
@@ -296,6 +302,9 @@ class App extends Component {
 					<Router>
 						<Switch>
 							{/*<Route path="/login" component={LoginRegisterPage}/>*/}
+
+							{/*众包创新*/}
+							<Route path={"/crowdsourcing"} component={ProjectPackages}/>
 							{/*认证*/}
 							<Route path="/account" component={AccountPage}/>
 
diff --git a/public/react/src/modules/projectPackages/MDEditors.js b/public/react/src/modules/projectPackages/MDEditors.js
new file mode 100644
index 000000000..b6fee5582
--- /dev/null
+++ b/public/react/src/modules/projectPackages/MDEditors.js
@@ -0,0 +1,337 @@
+import React, {Component} from 'react';
+
+import {Input, Select, Radio, Checkbox, Popconfirm, message, Modal} from 'antd';
+
+import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
+
+import { getImageUrl, toPath, getUrl } from 'educoder';
+
+require('codemirror/lib/codemirror.css');
+
+let origin = getUrl();
+let path = getUrl("/editormd/lib/")
+
+
+const $ = window.$;
+
+let timeout;
+
+let currentValue;
+
+const Option = Select.Option;
+
+const RadioGroup = Radio.Group;
+
+
+
+// 保存数据
+function md_add_data(k,mdu,d){
+    window.sessionStorage.setItem(k+mdu,d);
+}
+
+// 清空保存的数据
+function md_clear_data(k,mdu,id){
+    window.sessionStorage.removeItem(k+mdu);
+    var id1 = "#e_tip_"+id;
+    var id2 = "#e_tips_"+id;
+    if(k == 'content'){
+        $(id2).html("　");
+    }else{
+        $(id1).html("　");
+    }
+}
+window.md_clear_data = md_clear_data
+// editor 存在了jquery对象上，应用不需要自己写md_rec_data方法了
+function md_rec_data(k, mdu, id) {
+    if (window.sessionStorage.getItem(k + mdu) !== null) {
+        var editor = $("#e_tips_" + id).data('editor');
+        editor.setValue(window.sessionStorage.getItem(k + mdu));
+        // debugger;
+        // /shixuns/b5hjq9zm/challenges/3977/tab=3  setValue可能导致editor样式问题
+        md_clear_data(k, mdu, id);
+    }
+}
+window.md_rec_data = md_rec_data;
+
+function md_elocalStorage(editor,mdu,id){
+    if (window.sessionStorage){
+        var oc = window.sessionStorage.getItem('content'+mdu);
+        if(oc !== null ){
+            console.log("#e_tips_"+id)
+            $("#e_tips_"+id).data('editor', editor);
+            var h = '您上次有已保存的数据，是否<a style="cursor: pointer;" class="link-color-blue" onclick="md_rec_data(\'content\',\''+ mdu + '\',\'' + id + '\')">恢复</a> ? / <a style="cursor: pointer;" class="link-color-blue" onclick="md_clear_data(\'content\',\''+ mdu + '\',\'' + id + '\')">不恢复</a>';
+            $("#e_tips_"+id).html(h);
+        }
+        setInterval(function() {
+            var d = new Date();
+            var h = d.getHours();
+            var m = d.getMinutes();
+            var s = d.getSeconds();
+            h = h < 10 ? '0' + h : h;
+            m = m < 10 ? '0' + m : m;
+            s = s < 10 ? '0' + s : s;
+            if(editor.getValue().trim() != ""){
+                md_add_data("content",mdu,editor.getValue());
+                var id1 = "#e_tip_"+id;
+                var id2 = "#e_tips_"+id;
+                
+                var textStart = " 数据已于 "
+                var text = textStart + h + ':' + m + ':' + s +" 保存 ";
+                // 占位符   
+                var oldHtml = $(id2).html();
+                if (oldHtml && oldHtml != '　' && oldHtml.startsWith(textStart) == false) {
+                    $(id2).html( oldHtml.split('　(')[0] + `　(${text})`);
+                } else {
+                    $(id2).html(text);
+                }
+                // $(id2).html("");
+            }
+        },10000);
+
+    }else{
+        $("#e_tip_"+id).after('您的浏览器不支持localStorage.无法开启自动保存草稿服务,请升级浏览器！');
+    }
+}
+
+
+function create_editorMD(id, width, high, placeholder, imageUrl, callback, initValue, 
+        onchange, watch, { noStorage, showNullButton }, that) {
+    // 还是出现了setting只有一份，被共用的问题
+    
+    var editorName = window.editormd(id, {
+        width: width,
+        height: high===undefined?400:high,
+        path: path,   // "/editormd/lib/"
+        markdown : initValue,
+
+        dialogLockScreen: false,
+        watch:watch===undefined?true:watch,
+        syncScrolling: "single",
+        tex: true,
+        tocm: true,
+        emoji: true,
+        taskList: true,
+        codeFold: true,
+        searchReplace: true,
+        htmlDecode: "style,script,iframe",
+        sequenceDiagram: true,
+        autoFocus: false,
+
+        // mine
+        
+        toolbarIcons: function (mdEditor) {
+						//
+						// let react_id = `react_${id}`;
+						// const __that = window[react_id]
+
+						// Or return editormd.toolbarModes[name]; // full, simple, mini
+						// Using "||" set icons align right.
+						const icons = ["bold", "italic", "|", "list-ul", "list-ol", "|", "code", "code-block", "|", "testIcon", "testIcon1", '|', "image", "table", '|', "watch", "clear"];
+						// if (__that.props.showNullButton) {
+						// 	icons.push('nullBtton')
+						// }
+						return icons
+
+
+        },
+        toolbarCustomIcons: {
+            testIcon: "<a type=\"inline\" class=\"latex\" ><div class='zbg'></div></a>",
+            testIcon1: "<a type=\"latex\" class=\"latex\" ><div class='zbg_latex'></div></a>",
+            nullBtton: "<a type=\"nullBtton\" class='pr' title='增加填空'><div class='border-left'><span></span></div><span class='fillTip'>点击插入填空项</span><i class=\"iconfont icon-edit font-16\"></i></a>",
+        },
+        //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
+        saveHTMLToTextarea: true,
+        // 用于增加自定义工具栏的功能，可以直接插入HTML标签，不使用默认的元素创建图标
+        dialogMaskOpacity: 0.6,
+        placeholder: placeholder,
+        imageUpload: true,
+        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp", "JPG", "JPEG", "GIF", "PNG", "BMP", "WEBP"],
+        imageUploadURL: imageUrl,//url
+        onchange: onchange,
+        onload: function() {
+            let _id = this.id   // 如果要使用this，这里不能使用箭头函数
+            let _editorName = this;
+            let react_id = `react_${_editorName.id}`;
+            const __that = window[react_id]
+            
+            // this.previewing();
+            // let _id = id;
+            $("#" + _id + " [type=\"latex\"]").bind("click", function () {
+                _editorName.cm.replaceSelection("```latex");
+                _editorName.cm.replaceSelection("\n");
+                _editorName.cm.replaceSelection("\n");
+                _editorName.cm.replaceSelection("```");
+                var __Cursor = _editorName.cm.getDoc().getCursor();
+                _editorName.cm.setCursor(__Cursor.line - 1, 0);
+            });
+
+            $("#" + _id + " [type=\"inline\"]").bind("click", function () {
+                _editorName.cm.replaceSelection("$$$$");
+                var __Cursor = _editorName.cm.getDoc().getCursor();
+                _editorName.cm.setCursor(__Cursor.line, __Cursor.ch - 2);
+                _editorName.cm.focus();
+            });
+            $("[type=\"inline\"]").attr("title", "行内公式");
+            $("[type=\"latex\"]").attr("title", "多行公式");
+
+            if (__that.props.showNullButton) {
+                const NULL_CH = '▁'
+                // const NULL_CH = '〇'
+                // const NULL_CH = '🈳'
+                
+                $("#" + _id + " [type=\"nullBtton\"]").bind("click", function () {
+                    _editorName.cm.replaceSelection(NULL_CH);
+                    // var __Cursor = _editorName.cm.getDoc().getCursor();
+                    // _editorName.cm.setCursor(__Cursor.line - 1, 0);
+                });
+            }
+
+            if (noStorage == true) {
+
+            } else {
+                md_elocalStorage(_editorName, `MDEditor__${_id}`, _id);
+            }
+
+            callback && callback(_editorName)
+        }
+    });
+    return editorName;
+}
+
+
+export default class MDEditors extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            initValue: ''
+        }
+    }
+    componentDidUpdate(prevProps, prevState) {
+        // 不能加，影响了试卷填空题
+        // if (this.props.initValue != prevProps.initValue) {
+        //     this.answers_editormd.setValue(this.props.initValue)
+        // }
+    }
+    
+    // react_mdEditor_
+    componentDidMount = () => {
+        const { mdID, initValue, placeholder, showNullButton} = this.props;
+        
+        let _id = `mdEditor_${mdID}`
+        this.contentChanged = false;
+        const _placeholder = placeholder || "";
+        // amp;
+        // 编辑时要传memoId
+		  	const imageUrl = `/upload_with_markdown?container_id=&container_type=Memo`;
+        // 创建editorMd
+        let react_id = `react_${_id}`;
+
+        window[react_id] = this
+        const answers_editormd = create_editorMD(_id, '100%', this.props.height, _placeholder, imageUrl, (__editorName) => {
+            react_id = `react_${__editorName.id}`;
+            const that = window[react_id]
+
+            setTimeout(() => {
+                console.log('timeout', __editorName.id)
+                __editorName.resize()
+                __editorName.cm && __editorName.cm.refresh()
+            }, that.props.refreshTimeout || 500)
+            if (that.props.initValue != undefined && that.props.initValue != '') {
+                __editorName.setValue(that.props.initValue)
+            }
+            if (that.state.initValue) {
+                __editorName.setValue(that.state.initValue)
+            }
+            __editorName.cm.on("change", (_cm, changeObj) => {
+                that.contentChanged = true;
+                if (that.state.showError) {
+                    that.setState({showError: false})
+                }
+                that.onEditorChange()
+            })
+            that.props.onCMBlur && __editorName.cm.on('blur', () => {
+                that.props.onCMBlur()
+            })
+            that.props.onCMBeforeChange && __editorName.cm.on('beforeChange', (cm,change) => {
+                that.props.onCMBeforeChange(cm,change)
+            })
+            that.answers_editormd = __editorName;
+            window[_id] = __editorName;
+        }, initValue, this.onEditorChange,this.props.watch, {
+            noStorage: this.props.noStorage,
+            showNullButton: this.props.showNullButton
+        }, this);
+        
+    }
+    showError = () => {
+        this.setState({showError: true})
+    }
+    onEditorChange = () => {
+        this.props.setcheckoutcontent()
+        if (!this.answers_editormd) return;
+        const val = this.answers_editormd.getValue();
+        try {
+            this.props.onChange && this.props.onChange(val)
+        } catch(e) {
+            // http://localhost:3007/courses/1309/common_homeworks/6566/setting 
+            // 从这个页面，跳转到编辑页面，再在编辑页面点击返回的时候，这里会报错
+            console.error('出错')
+            console.error(e)
+        }
+    }
+    resize = () => {
+        if (!this.answers_editormd) { // 还未初始化
+            return;
+        }
+        this.answers_editormd.resize()
+        this.answers_editormd.cm && this.answers_editormd.cm.refresh()
+        this.answers_editormd.cm.focus()
+    }
+
+    getValue = () => {
+        try {
+            return this.answers_editormd.getValue()
+        } catch (e) {
+            return ''
+        }
+    }
+    setValue = (val) => {
+        try {
+            this.answers_editormd.setValue(val)
+        } catch (e) {
+            // TODO 这里多实例的时候，前一个实例的state会被后面这个覆盖 参考NewWork.js    http://localhost:3007/courses/1309/homework/9300/edit/1
+            // 未初始化
+            this.setState({ initValue: val })
+        }
+    }
+    
+    render() {
+
+        let {
+            showError
+        } = this.state;
+        let { mdID, className, noStorage } = this.props;
+        let _style = {}
+        if (showError) {
+            _style.border = '1px solid red'
+        }
+        return (
+            <React.Fragment>
+                <div className={`df ${className} mt20`} >
+                {/* padding10-20  */}
+                    <div className="edu-back-greyf5 radius4" id={`mdEditor_${mdID}`} style={{..._style}}>
+                        <textarea style={{display: 'none'}}  id="evaluate_script_show" name="content"  ></textarea>
+                        <div className="CodeMirror cm-s-defualt">
+                        </div>
+                    </div>
+                </div>
+                <div className={"fr rememberTip"}>
+                    {noStorage == true ? '　' : <p id={`e_tips_mdEditor_${mdID}`} className="edu-txt-right color-grey-cd font-12">　</p>}
+                    {/* {noStorage == true ? '　' : <p id={`e_tips_mdEditor_${mdID}`} className="edu-txt-right color-grey-cd font-12">　</p>} */}
+                </div>
+            </React.Fragment>
+        )
+    }
+}
+
+
diff --git a/public/react/src/modules/projectPackages/PackageIndex/PackageBanner.js b/public/react/src/modules/projectPackages/PackageIndex/PackageBanner.js
new file mode 100644
index 000000000..bc5aee524
--- /dev/null
+++ b/public/react/src/modules/projectPackages/PackageIndex/PackageBanner.js
@@ -0,0 +1,25 @@
+import React, {Component} from 'react';
+import {Link} from "react-router-dom";
+
+class PackageBanner extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+
+        }
+    }
+    componentDidMount() {
+
+
+    }
+
+
+    render() {
+        return (
+            <div className="project_packagesHead" style={{height: '300px'}}></div>
+        )
+    }
+}
+
+export default PackageBanner;
+
diff --git a/public/react/src/modules/projectPackages/PackageIndex/PackageConcent.js b/public/react/src/modules/projectPackages/PackageIndex/PackageConcent.js
new file mode 100644
index 000000000..46e36f90f
--- /dev/null
+++ b/public/react/src/modules/projectPackages/PackageIndex/PackageConcent.js
@@ -0,0 +1,298 @@
+import React, {Component} from 'react';
+import {Link} from "react-router-dom";
+import axios from 'axios';
+import { Input ,Icon,Button,Pagination} from 'antd';
+import moment from 'moment';
+import '../packageconcnet.css';
+
+const { Search } = Input;
+// let categorylist=[
+// 	{name:"全部",value:undefined},
+// 	{name:"前端开发",value:"front"},
+// 	{name:"后端开发",value:"backend"},
+// 	{name:"移动开发",value:"mobile"},
+// 	{name:"数据库",value:"database"},
+// 	{name:"云计算和大数据",value:"cloud_compute_and_big_data"},
+// 	{name:"人工智能",value:"ai"},
+// 	{name:"其他",value:"other"},
+// ]
+//
+// function setcategorylist(val){
+// 	let vals=""
+// 	categorylist.some((item,key)=> {
+// 			if (item.value === val) {
+// 				vals=item.name
+// 				return true
+// 			}
+// 		}
+// 	)
+//
+// 	return vals
+// }
+
+
+
+class PackageConcent extends Component {
+	constructor(props) {
+		super(props)
+		this.state = {
+			data:undefined,
+			project_packages:undefined,
+			category:undefined,
+			keyword:undefined,
+			sort_by:"recently",
+			sort_direction:"desc",
+			page:1,
+			per_page:20,
+			categories:[]
+		}
+	}
+	//desc’, ‘desc’, ‘asc’
+	//否	string	排序，默认最新, ‘recently’, ‘price’
+	//	否	string	类型, front,backend,mobile,database, cloud_compute_and_big_data,devops_and_test,ai,other
+	componentDidMount() {
+		window.document.title = '众包创新'
+		let {category,keyword,sort_by,sort_direction,page}=this.state
+  	this.setdatas(category,keyword,sort_by,sort_direction,page)
+
+		let Url = `/project_package_categories.json`;
+		axios.get(Url).then((response) => {
+     // console.log(response)
+			this.setState({
+				categories:response.data.categories
+			})
+		}).catch((error) => {
+			console.log(error)
+		})
+
+	}
+
+   setdatas=(category,keyword,sort_by,sort_direction,page)=>{
+
+		 let Url = `/project_packages.json`;
+		 axios.get(Url,{params:{
+				 category_id:category,
+				 keyword:keyword,
+				 sort_by:sort_by,
+				 sort_direction:sort_direction,
+				 page:page,
+				 per_page:20,
+			 }}
+		 ).then((response) => {
+			 this.setState({
+				 data:response.data,
+				 project_packages:response.data.project_packages
+			 })
+		 }).catch((error) => {
+			 console.log(error)
+		 })
+	 }
+
+	setdatafuns=(value)=>{
+		let {category,keyword,sort_by,sort_direction,page}=this.state
+		this.setState({
+			keyword:value
+		})
+		this.setdatas(category,value,sort_by,sort_direction,page)
+	}
+
+
+	setcategory=(value)=>{
+		let {category,keyword,sort_by,sort_direction,page}=this.state
+		this.setState({
+			category:value
+		})
+		this.setdatas(value,keyword,sort_by,sort_direction,page)
+	}
+
+	setsort_byfun=(value)=>{
+		let {category,keyword,sort_by,sort_direction,page}=this.state
+
+		this.setState({
+			sort_by:value
+		})
+		let sort_directionvalue;
+		if(value===sort_by){
+			if(sort_direction==="desc"){
+				this.setState({
+					sort_direction:"asc"
+				})
+				sort_directionvalue="asc";
+			}else{
+				this.setState({
+					sort_direction:"desc"
+				})
+				sort_directionvalue="desc";
+			}
+		}else{
+			this.setState({
+				sort_direction:"desc"
+			})
+			sort_directionvalue="desc";
+		}
+
+		this.setdatas(category,keyword,value,sort_directionvalue,page)
+	}
+	render() {
+		let {data,page,category,sort_by,sort_direction,project_packages}=this.state;
+
+		return (
+			<div className="educontent clearfix mtf10" style={{flex: "1 0 auto"}}>
+
+				<div className="stud-class-set">
+					<div className="news">
+						<div className="edu-class-inner container clearfix">
+							<div className="member for-content-0 for-content">
+								<div className="people clearfix mb25">
+
+
+									{/*concent*/}
+									<div className="mb30">
+										<div className="clearfix">
+												<p className="clearfix" >
+													<p style={{height: '50px'}}>
+														<Search placeholder="输入标题名称进行检索"
+																		style={{ width: 749}}
+																		className="packinput"
+																		enterButton={<span><Icon type="search" className="mr5"/> 搜索</span>}
+																		onSearch={ (value)=>this.setdatafuns(value)} />
+														<Button type="primary"  className="setissues fr" size={"large"}>
+															<a href="/crowdsourcing/new" >发布需求</a>
+														</Button>
+													</p>
+												</p>
+										</div>
+									</div>
+
+									<div className="edu-back-white mb30">
+										<p className="clearfix padding30">
+											<p className="clearfix mb30 shaiContent">
+												<span className="shaiTitle fl mt3">类型：</span>
+												<div className="fl pr shaiAllItem pagetype">
+													<li className={category===undefined?"shaiItem shixun_repertoire active":"shaiItem shixun_repertoire"}  onClick={()=>this.setcategory(undefined)}>全部</li>
+													{this.state.categories.map((item,key)=>{
+														return(
+															<li key={key} className={category===item.id?"shaiItem shixun_repertoire active":"shaiItem shixun_repertoire"} value={item.id} onClick={()=>this.setcategory(item.id)}>{item.name}</li>
+														)
+													})}
+
+												</div>
+											</p>
+
+											<p className="clearfix shaiContent">
+												<span className="shaiTitle fl mt3">排序：</span>
+												<div className="fl pr shaiAllItem">
+													<li className="shaiItem shixun_repertoire" value="recently" onClick={()=>this.setsort_byfun("recently")}>
+													 <span className={sort_by==="recently"?"color-blue":""}>最新</span>
+													 <sapn className="relativef">
+														 <i className={sort_by==="recently"&&sort_direction==="asc"?
+															 "iconfont icon-sanjiaoxing-up font-12 topsj color-blue" :"iconfont icon-sanjiaoxing-up font-12 topsj"}></i>
+														 <i className={sort_by==="recently"&&sort_direction==="desc"?
+															 "iconfont icon-sanjiaoxing-down font-12 bottomsj color-blue":"iconfont icon-sanjiaoxing-down font-12 bottomsj"}></i>
+													 </sapn>
+													</li>
+
+													<li className="shaiItem shixun_repertoire " value="price" onClick={()=>this.setsort_byfun("price")}>
+														<span  className={sort_by==="price"?"color-blue":""}>价格</span>
+														<sapn className="relativef">
+															<i className={sort_by==="price"&&sort_direction==="asc"?
+																"iconfont icon-sanjiaoxing-up font-12 topsj color-blue" :"iconfont icon-sanjiaoxing-up font-12 topsj"}></i>
+															<i className={sort_by==="price"&&sort_direction==="desc"?
+																"iconfont icon-sanjiaoxing-down font-12 bottomsj color-blue":"iconfont icon-sanjiaoxing-down font-12 bottomsj"}></i>
+														</sapn>
+													</li>
+												</div>
+											</p>
+										</p>
+									</div>
+
+
+									{project_packages&&project_packages.map((item,key)=>{
+										return(
+											<div className="educontent project-packages-list mb30" key={key}>
+
+												<div className="project-package-item">
+
+													<div className="item-image">
+														<img src={"/images/educoder/project_packages/"+item.category+".png"}/>
+													</div>
+
+													<div className=" item-body">
+
+														<div className=" item-head mbf10">
+
+															<div className=" item-head-title">
+																<a className={"fl mt3 font-20 font-bd color-dark maxwidth700 "}
+																	 href={"/crowdsourcing/"+item.id}
+																	 title={item.title}
+																>{item.title}</a>
+															</div>
+
+															<div className=" item-head-blank"></div>
+
+															<div className=" item-head-price">
+																{item.min_price===null?"":<span>￥{item.min_price}</span>}
+																{item.max_price===null||item.min_price===null?"":<span>~</span>}
+																{item.max_price===null?"":<span>￥{item.max_price}</span>}
+																{item.min_price===null&&item.max_price===null?<span>可议价</span>:""}
+															</div>
+
+														</div>
+
+														<div className=" item-category mt10">
+															<div className=" item-category-item">{item.category_name}</div>
+														</div>
+
+														<div className=" item-other">
+															<div className=" item-group item-other-visit">
+																<span className=" item-group-icon mr10"><i className="fa fa-eye"></i></span>
+																<span className=" item-group-text">{item.visit_count}人浏览</span>
+															</div>
+															<div className=" item-group item-other-deadline">
+
+																<span className=" item-group-icon mr10"><i className="fa fa-clock-o"></i></span>
+																<span className=" item-group-text">{moment(item.deadline_at).endOf('day').fromNow()}竞标截止</span>
+
+															</div>
+															<div className=" item-group item-other-bidding ml0">
+
+																<span className=" item-group-icon mr10"><i className="fa fa-user" ></i></span>
+																<span className=" item-group-text">{item.bidding_users_count}人竞标</span>
+
+															</div>
+															<div className=" item-other-blank"></div>
+															<div className=" item-group item-other-publish-at">
+																{item.published_at===null?<span className="item-group-text">更新于：{moment(item.updated_at).format("YYYY-MM-DD HH:mm")} </span>:
+																<span className=" item-group-text">发布于：{moment(item.published_at).format("YYYY-MM-DD HH:mm")} </span>}
+															</div>
+														</div>
+
+													</div>
+
+												</div>
+											</div>
+										)
+									})}
+									{project_packages&&project_packages.length===0?<div className="edu-back-white">
+										<div className="edu-tab-con-box clearfix edu-txt-center">
+											<img className="edu-nodata-img mb20" src="https://www.educoder.net/images/educoder/nodata.png" />
+											<p className="edu-nodata-p mb20">暂无数据哦~</p></div>
+									</div>:""}
+
+									<div className={"mt40"}>
+										<Pagination className="edu-txt-center" hideOnSinglePage={true} pageSize={20} current={page} total={data&&data.count} />
+									</div>
+
+
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		)
+	}
+}
+
+export default PackageConcent;
+
diff --git a/public/react/src/modules/projectPackages/PackageIndex/PackageIndex.js b/public/react/src/modules/projectPackages/PackageIndex/PackageIndex.js
new file mode 100644
index 000000000..e6c7cdc98
--- /dev/null
+++ b/public/react/src/modules/projectPackages/PackageIndex/PackageIndex.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
+
+//业务组件
+import PackageBanner from "./PackageBanner";
+import PackageConcent from "./PackageConcent";
+
+class PackageIndex extends Component{
+	constructor(props) {
+		super(props)
+	}
+
+	componentDidMount(){
+		window.document.title = '众包创新'
+	}
+
+	render() {
+		return (
+			<div>
+				<div className="clearfix">
+					{/*头部banner*/}
+					<PackageBanner {...this.props}></PackageBanner>
+					{/*内容banner*/}
+					<PackageConcent {...this.props}></PackageConcent>
+				</div>
+			</div>
+		)
+	}
+}
+export default PackageIndex;
\ No newline at end of file
diff --git a/public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/NEITaskDetailsModel.js b/public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/NEITaskDetailsModel.js
new file mode 100644
index 000000000..16e22dae0
--- /dev/null
+++ b/public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/NEITaskDetailsModel.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import { Spin, Icon , Modal,Input,Button} from 'antd';
+class NEITaskDetailsModel extends Component {
+
+	constructor(props) {
+		super(props);
+		this.state = {
+
+		}
+	}
+
+	render() {
+
+		return(
+			<Modal
+				keyboard={false}
+				title="提示"
+				visible={this.props.applytype===undefined?false:this.props.applytype}
+				closable={false}
+				footer={null}
+				destroyOnClose={true}
+				centered={true}
+				width="530px"
+			>
+					<div className="task-popup-content">
+						<p className="task-popup-text-center font-16 mb20">
+					 				<div>{this.props.applyvalue}</div>
+						    	<div>{this.props.applybottom}</div>
+						</p>
+						<div className="clearfix mt30 edu-txt-center">
+							<a  className="task-btn mr30 color_white" onClick={this.props.applycancel}>取消</a>
+							<a className="task-btn task-btn-orange " onClick={this.props.applyconfirm}>确定</a>
+						</div>
+
+					</div>
+			</Modal>
+		)
+	}
+}
+
+export default NEITaskDetailsModel;
\ No newline at end of file
diff --git a/public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/PackageIndexNEITaskDetails.js b/public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/PackageIndexNEITaskDetails.js
new file mode 100644
index 000000000..4f06a0cba
--- /dev/null
+++ b/public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/PackageIndexNEITaskDetails.js
@@ -0,0 +1,485 @@
+import React, {Component} from 'react';
+import {Link} from "react-router-dom";
+import axios from 'axios';
+import { Input ,Icon,Button,Pagination,DatePicker,Breadcrumb} from 'antd';
+import { handleDateString,markdownToHTML,bytesToSize} from 'educoder';
+import NEITaskDetailsModel from './NEITaskDetailsModel';
+import moment from 'moment';
+import '../packageconcnet.css';
+import './pds.css'
+import gouxuan from './img/gouxuan.png'
+import weigouxuan from './img/weigouxuan.png'
+const { Search } = Input;
+// let categorylist=[
+// 	{name:"全部",value:undefined},
+// 	{name:"前端开发",value:"front"},
+// 	{name:"后端开发",value:"backend"},
+// 	{name:"移动开发",value:"mobile"},
+// 	{name:"数据库",value:"database"},
+// 	{name:"云计算和大数据",value:"cloud_compute_and_big_data"},
+// 	{name:"人工智能",value:"ai"},
+// 	{name:"其他",value:"other"},
+// ]
+//
+// function setcategorylist(val){
+// 	let vals=""
+// 	categorylist.some((item,key)=> {
+// 			if (item.value === val) {
+// 				vals=item.name
+// 				return true
+// 			}
+// 		}
+// 	)
+//
+// 	return vals
+// }
+
+class PackageIndexNEITaskDetails extends Component {
+	constructor(props) {
+		super(props)
+		this.contentMdRef = React.createRef();
+		this.state = {
+			data:undefined,
+			modalCancel: false,
+			overtype:false,
+			setbiddingmantype:false,
+			datalist:[]
+		}
+	}
+
+	componentDidMount() {
+    this.getdatas()
+		window.document.title = '众包创新'
+	}
+
+   getdatas=()=>{
+		 let url =`/project_packages/${this.props.match.params.id}.json`;
+		 axios.get(url).then((response) => {
+			 this.setState({
+				 data:response.data
+			 })
+		 }).catch((error) => {
+			 console.log(error);
+
+		 })
+	 }
+
+	setbiddingman=()=>{
+    this.setState({
+			setbiddingmantype:true
+		})
+	}
+
+	notsetbiddingman=()=>{
+		let {data} =this.state;
+		let gouxuans2=data.bidding_users
+		for (var i=0;i<gouxuans2.length;i++){
+				if(gouxuans2[i].bool === true){
+					gouxuans2[i].bool=false;
+				}
+		}
+		this.setState({
+			setbiddingmantype:false,
+			datalist:[]
+		})
+	}
+	modalCancel=()=>{
+		this.setState({
+			modalCancel:false
+		})
+	}
+
+	setbiddingusers=()=>{
+    let{datalist}=this.state;
+    if(datalist.length>0){
+			this.setState({
+				applytype:true,
+				applyvalue:`选择的${datalist.length}个竞标者将被设定为“中标”`,
+				applybottom:"是否确认执行？",
+				applycancel:this.setApplycancel,
+				applyconfirm:this.setApplysumbit
+			})
+		}
+
+	}
+
+	setApplysumbit=()=>{
+		this.setState({
+			applytype:false,
+		})
+		let{datalist}=this.state;
+		let newlist=[];
+		datalist.map((item,key)=>{
+				newlist.push(item.id)
+		})
+
+
+		let url=`/project_packages/${this.props.match.params.id}/bidding_users/win.json`;
+		axios.post(url,{
+			user_ids:newlist
+		}).then((response) => {
+			if(response.data.status===0){
+				this.props.showSnackbar("提交成功");
+				this.setState({
+					setbiddingmantype:false
+				})
+				this.getdatas()
+			}else if(response.data.status===-1){
+				this.props.showSnackbar(response.data.message);
+			}
+		}).catch((error) => {
+			console.log(error)
+		})
+
+	}
+
+
+
+	Clickteacher2=(e)=>{
+		let {data} =this.state;
+		let newlist=[]
+		let gouxuans2=data.bidding_users
+		for (var i=0;i<gouxuans2.length;i++){
+			if(gouxuans2[i].id === e){
+				// console.log("51");
+				// console.log(e);
+				if(gouxuans2[i].bool === true){
+					gouxuans2[i].bool=false;
+				}else{
+					gouxuans2[i].bool=true;
+					newlist.push(gouxuans2[i])
+				}
+			}else{
+				if(gouxuans2[i].bool === true){
+					newlist.push(gouxuans2[i])
+				}
+			}
+		}
+		console.log(newlist);
+		this.setState({
+			datalist:newlist,
+		})
+
+	}
+	setover=()=>{
+		this.setState({
+			overtype:true
+		})
+	}
+
+	setout=()=>{
+		this.setState({
+			overtype:false
+		})
+	}
+
+	deletePackages=()=>{
+		this.setState({
+			applytype:true,
+			applyvalue:"是否确认删除?",
+			applycancel:this.setApplycancel,
+			applyconfirm:this.setApplydelect
+		})
+	}
+
+	setApplydelect=()=>{
+		this.setState({
+			applytype:false,
+		})
+		let url=`/project_packages/${this.props.match.params.id}.json`;
+		axios.delete(url ).then((response) => {
+			// const status = response.data.status
+			// console.log(response)
+			this.props.showSnackbar('删除成功');
+		}).catch((error) => {
+			console.log(error)
+		})
+	}
+
+	setBiddingApply=()=>{
+		this.setState({
+			applytype:true,
+			applyvalue:"是否确认报名?",
+			applycancel:this.setApplycancel,
+			applyconfirm:this.setApplyconfirm
+		})
+	}
+
+	setApplycancel=()=>{
+		this.setState({
+			applytype:false,
+		})
+	}
+
+	setApplyconfirm=()=>{
+		this.setState({
+			applytype:false,
+		})
+		let url=`/project_packages/${this.props.match.params.id}/bidding_users.json`;
+		axios.post(url).then((response) => {
+			if(response.data.status===0){
+				this.props.showSnackbar("报名成功");
+				this.getdatas()
+			}else if(response.data.status===-1){
+				this.props.showSnackbar(response.data.message);
+			}
+		}).catch((error) => {
+			console.log(error)
+		})
+
+	}
+	goback = () => {
+		window.history.go(-1)
+	}
+
+	render() {
+		let {overtype,data}=this.state;
+	 // console.log(data&&data.creator.login)
+	 // console.log(this.props.current_user.login)
+		return (
+			<div>
+				<div className="clearfix">
+					<NEITaskDetailsModel
+						applytype={this.state.applytype}
+						applyvalue={this.state.applyvalue}
+						applybottom={this.state.applybottom}
+						applycancel={this.state.applycancel}
+						applyconfirm={this.state.applyconfirm}
+					/>
+				 <div className={"educontent mt20 mb50"}>
+
+					 <Breadcrumb separator={'>'} className={"fl"}>
+						 {/*<Breadcrumb.Item>{this.props.current_user.username}</Breadcrumb.Item>*/}
+						 <Breadcrumb.Item>
+							 <a href="/crowdsourcing">众包创新</a>
+						 </Breadcrumb.Item>
+						 <Breadcrumb.Item><span className={"tabelcli"} title={data&&data.title}>{data&&data.title}</span></Breadcrumb.Item>
+
+					 </Breadcrumb>
+					 <a className="color-grey-6 fr font-15 mr20" onClick={this.goback}>返回</a>
+					<div className="mb20">
+
+						<p className="clearfix ">
+
+							<div className={"stud-class-set coursenavbox edu-back-white mt20"}>
+								<div className={"ant-row contentbox mdInForm "}>
+
+									<div className="educontent project-packages-list">
+										{data&&data.status==="pending"?<div>
+											<div className="publicpart orangeBlack "></div>
+											<span className="smalltrangle"></span>
+											<span className="publicword publicwords"> 未申请 </span>
+										</div>:data&&data.status==="applying"?<div>
+											<div className="publicpart orangeGreen"></div>
+											<span className="smalltrangle"></span>
+											<span className="publicword publicwords"> 待发布 </span>
+										</div>:""}
+
+										<div className="project-package-item project-package-items height185">
+											<div className="item-image">
+												<div className="fl edu-back-white  ">
+													<a href={`/users/${data&&data.creator.login}`}>
+														<img alt="头像" className="radius mt10 ml5" height="70" id="nh_user_logo" name="avatar_image"
+																 src={data&&data.creator.avatar_url} width="70"/>
+													</a>
+													<div className=" edu-back-white pagemancenter mt10 ">
+														{data&&data.creator.name}
+													</div>
+
+													 {data&&data.creator.login===this.props.current_user.login?"":<div className=" edu-back-white  ml5 mt10 "
+															 onMouseOver={this.setover}
+															 onMouseOut={this.setout}
+												    >
+														{overtype===false?<a className="ContacttheTA fl" target="_blank" href={`/users/${this.props.current_user.login}/message_detail?user_id=${data&&data.creator.id}`}> <img alt="头像" class="mr5" src={require('./newsone.png')} />联系TA</a>:
+															<a className="ContacttheTAs fl" target="_blank" href={`/users/${this.props.current_user.login}/message_detail?user_id=${data&&data.creator.id}`}> <img alt="头像" className="mr5"
+																																	 src={require('./newstwo.png')}/>联系TA</a>}
+													</div>}
+												</div>
+
+
+											</div>
+
+											<div className=" item-body">
+
+												<div className=" item-head mbf10">
+
+													<div className=" item-head-title ">
+														<span className={"fl mt3 font-18 font-bd color-dark maxwidth700 "}
+															 title={data&&data.title}
+														>{data&&data.title}
+														</span>
+													</div>
+
+													<div className=" item-head-price mtf7">
+														 {data&&data.min_price===null?"":<span>￥<span className={"font-24"}>{data&&data.min_price}</span></span>}
+														 {data&&data.max_price===null||data&&data.min_price===null?"":<span>~</span>}
+														 {data&&data.max_price===null?"":<span>￥<span className={"font-24"}>{data&&data.max_price}</span></span>}
+													   {data&&data.min_price===null&&data&&data.max_price===null?<span>可议价</span>:""}
+													</div>
+
+												</div>
+
+												<div className="item-category">
+													<div className="item-category-item">{data&&data.category_name}</div>
+												</div>
+
+												<div className=" item-other">
+													<div>
+														{data&&data.published_at===null?<span className="item-group-text">
+															更新时间：{moment(data&&data.updated_at).format("YYYY-MM-DD HH:mm")}
+														</span>:<span className="item-group-text">
+															发布时间：{moment(data&&data.published_at).format("YYYY-MM-DD HH:mm")}
+														</span>}
+													</div>
+													<div className=" item-group item-other-deadline ml40">
+														<span className="item-group-text">竞标截止时间：{moment(data&&data.deadline_at).format("YYYY-MM-DD HH:mm")}</span>
+													</div>
+												</div>
+
+											</div>
+
+										</div>
+									</div>
+
+								</div>
+							</div>
+
+							{/*详情*/}
+							<div className={"stud-class-set padding26 coursenavbox edu-back-white mt20"}>
+								<div>
+									<div className={"longboxs"}>
+									 需求详情：
+
+										{data&&data.status==="pending"&&data&&data.operation.can_select_bidding_user===true?<div className="fr">
+											<a className="task-btn-nebules fr" href={`/crowdsourcing/${this.props.match.params.id}/edit`}>编辑</a>
+											<a className="task-btn-nebules fr" onClick={this.deletePackages}>删除</a>
+										</div>:""}
+
+									</div>
+									<div className={"padding020"}>
+										<div className={"markdown-body"} dangerouslySetInnerHTML={{__html: markdownToHTML(data&&data.content).replace(/▁/g,"▁▁▁")}}></div>
+									</div>
+
+								</div>
+
+								{data&&data.attachments.length>0?<div>
+									<div className={"longboxs "}>
+										需求文件：
+									</div>
+										{data&&data.attachments.map((item,key)=>{
+										return(
+											<div className={"newForm newFormbox mt10 "}>
+												<i className="color-green iconfont icon-fujian mr5 fl font-14 mt3"></i>
+												<a className="upload_filename color-grey readonly hidden fl mtf3 mr10 ml5" href={item.url}>{item.title}  &nbsp; &nbsp;{bytesToSize(item.filesize)}</a>
+											</div>
+										)})}
+								</div>:""}
+							</div>
+
+
+
+							{/*发布者和竞选者状态show*/}
+							{this.state.setbiddingmantype===false&&data&&data.published_at!=null?<div className={"stud-class-set  coursenavbox edu-back-white mt20"}>
+								{/*下面是头像*/}
+								<div className={"stud-class-set pd26 coursenavbox edu-back-white"}>
+									<div className={"relativef"}>
+										<div className={"longboxs mb0"}>
+											报名列表({data&&data.bidding_users.length})
+										</div>
+										<div className="packageabsolute">
+											{data&&data.operation.can_bidding===true?<Button type="primary" className="defalutSubmitbtn fl ml20 defalutSubmitbtns" onClick={this.setBiddingApply}>竞标报名</Button>:""}
+											{data&&data.operation.can_select_bidding_user===true?<Button type="primary" className="defalutSubmitbtn fl ml20 defalutSubmitbtns" onClick={this.setbiddingman}>选择中标者</Button>:""}
+										</div>
+									</div>
+								</div>
+
+								<div className={"ysllogin_register_contents   ysllogin_register_contentss edu-back-white "} style={{borderTop: '1px solid rgb(234, 234, 234)'}}>
+									<div className="ysllogin_section">
+										<div className="ysldivhome2">
+											<div style={{height: "20px"}}> </div>
+
+											{data&&data.bidding_users.map((item,key)=>{
+												return(
+													<div className="ysldivhomediv1 homehove" key={key}>
+														{item.status==="bidding_won"?<img src={gouxuan} className="yslgouxuanimg"/>:""}
+														<a href={`/users/${item.login}`}><img className="div1img" src={item.avatar_url}/></a>
+														<div className="textall mt10" title={item.name}> <p className="ptext">{item.name}</p></div>
+														{this.props.current_user.login!=item.login?<a className="ContacttheTAs fl none" target="_blank" href={`/users/${this.props.current_user.login}/message_detail?user_id=${item.id}`}>
+															<img alt="头像" className="mr5" src={require('./newstwo.png')}/>联系TA
+														</a>:""}
+													</div>
+												)
+											})}
+
+											{data&&data.bidding_users.length===0?<div className="edu-back-white" style={{width: '1200px'}}>
+												<div className="edu-tab-con-box clearfix edu-txt-center">
+													<img className="edu-nodata-img mb20" src="https://www.educoder.net/images/educoder/nodata.png" />
+													<p className="edu-nodata-p mb20">暂无人员竞标~</p></div>
+											</div>:""}
+
+
+										</div>
+									</div>
+								</div>
+							</div>:""}
+
+
+							{this.state.setbiddingmantype===true?<div className={"stud-class-set  coursenavbox edu-back-white mt20"}>
+								{/*发布人选择状态*/}
+              {/*下面是头像*/}
+								<div className={"stud-class-set pd26 coursenavbox edu-back-white"}>
+									<div className={"relativef"}>
+										<div className={"longboxs mb0"}>
+											报名列表({data&&data.bidding_users.length})
+										</div>
+
+										<div className="packageabsolute">
+											<div className=" fl mt10 mr20">
+												已选 <span className={"color-orange06"}>({this.state.datalist.length})</span>
+											</div>
+											<a className="defalutCancelbtns fl" onClick={this.notsetbiddingman}>取消</ a>
+											<Button type="primary" className="defalutSubmitbtn fl ml20 defalutSubmitbtns" onClick={this.setbiddingusers}>确定</Button>
+										</div>
+									</div>
+								</div>
+							<div className={"ysllogin_register_contents   ysllogin_register_contentss edu-back-white "}  style={{borderTop: '1px solid rgb(234, 234, 234)'}}>
+								<div className="ysllogin_section">
+									<div className="ysldivhome2">
+										<div style={{height: "20px"}}> </div>
+										{data&&data.bidding_users.map((item,key)=>{
+												return(
+													<div className="ysldivhomediv1" onClick={()=>this.Clickteacher2(item.id)} key={key}>
+														{item.bool===true?<img src={gouxuan} className="yslgouxuanimg"/>:<img src={weigouxuan} className="yslgouxuanimg"/>}
+														<a href={`/users/${item.login}`} target="_blank"><img className="div1img" src={item.avatar_url}/></a>
+														<span className={item.bool===true?"textall mt10 color-blue":"textall mt10"} title={item.name}> <p className="ptext">{item.name}</p></span>
+													</div>
+												)
+											})}
+
+										{data&&data.bidding_users.length===0?<div className="edu-back-white" style={{width: '1200px'}}>
+											<div className="edu-tab-con-box clearfix edu-txt-center">
+												<img className="edu-nodata-img mb20" src="https://www.educoder.net/images/educoder/nodata.png" />
+												<p className="edu-nodata-p mb20">暂无人员竞标~</p></div>
+										</div>:""}
+
+									</div>
+							</div>
+							</div>
+							</div>:""}
+
+						</p>
+
+					</div>
+
+
+				 </div>
+				</div>
+			</div>
+		)
+	}
+}
+
+export default PackageIndexNEITaskDetails;
+
+
+
diff --git a/public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/img/gouxuan.png b/public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/img/gouxuan.png
new file mode 100644
index 000000000..5bc53f007
Binary files /dev/null and b/public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/img/gouxuan.png differ
diff --git a/public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/img/weigouxuan.png b/public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/img/weigouxuan.png
new file mode 100644
index 000000000..40ca55728
Binary files /dev/null and b/public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/img/weigouxuan.png differ
diff --git a/public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/newsone.png b/public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/newsone.png
new file mode 100755
index 000000000..9aadd57c2
Binary files /dev/null and b/public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/newsone.png differ
diff --git a/public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/newstwo.png b/public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/newstwo.png
new file mode 100755
index 000000000..8ac58b2c4
Binary files /dev/null and b/public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/newstwo.png differ
diff --git a/public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/pds.css b/public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/pds.css
new file mode 100644
index 000000000..a6f9e10dc
--- /dev/null
+++ b/public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/pds.css
@@ -0,0 +1,60 @@
+.ysldivhome2{
+    display: flex;
+    flex-flow: row wrap;
+    align-content:stretch;
+    flex-direction: row;
+    margin-bottom: 20px;
+}
+
+.ysllogin_register_contents{
+    display: flex;
+    margin-top: 20px;
+    /*justify-content: center;*/
+    background: #fff;
+}
+
+.ysllogin_register_contentss{
+  margin-top:0px !important;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.ysldivhomediv1{
+    width: 80px;
+    height: 130px;
+    display: flex;
+    flex-direction:column;
+    margin-left: 48px;
+    margin-top: 20px;
+}
+.yslgouxuanimg{
+    width: 20px;
+    height: 20px;
+    margin-left: 64px;
+
+}
+.yslgouxuanimg2{
+    height: 20px;
+}
+.div1img{
+    display: flex;
+    justify-content:center;
+    width: 80px;
+    height: 80px;
+    border-radius:50%;
+
+}
+.textall{
+    text-align: center;
+    font-size: 13px;
+    color: #4B4B4B;
+
+}
+.ptext{
+    width: 80px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
+}
+.ysllogin_section {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
\ No newline at end of file
diff --git a/public/react/src/modules/projectPackages/PackageIndexNewandEdit/PackageIndexNEIBanner.js b/public/react/src/modules/projectPackages/PackageIndexNewandEdit/PackageIndexNEIBanner.js
new file mode 100644
index 000000000..ffb28d3df
--- /dev/null
+++ b/public/react/src/modules/projectPackages/PackageIndexNewandEdit/PackageIndexNEIBanner.js
@@ -0,0 +1,41 @@
+import React, {Component} from 'react';
+import {Link} from "react-router-dom";
+import { Steps, Divider } from 'antd';
+const { Step } = Steps;
+
+class PackageIndexNEIBanner extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+					current:0
+        }
+    }
+    componentDidMount() {
+
+
+    }
+
+	onChange=(current)=>{
+    	debugger
+		console.log('onChange:', current);
+		this.setState({ current });
+	};
+
+    render() {
+			const { current } = this.state;
+        return (
+					<div className="edu-back-white mb20 PackageIndexNEIBanner">
+						<p className="clearfix padding110">
+							<Steps current={current} >
+								<Step title="发布需求"/>
+								<Step title="筛选合适的接包方"/>
+								<Step title="线下交易，完成实施"/>
+							</Steps>
+						</p>
+					</div>
+        )
+    }
+}
+
+export default PackageIndexNEIBanner;
+
diff --git a/public/react/src/modules/projectPackages/PackageIndexNewandEdit/PackageIndexNEIBannerConcent.js b/public/react/src/modules/projectPackages/PackageIndexNewandEdit/PackageIndexNEIBannerConcent.js
new file mode 100644
index 000000000..e7e4b20a2
--- /dev/null
+++ b/public/react/src/modules/projectPackages/PackageIndexNewandEdit/PackageIndexNEIBannerConcent.js
@@ -0,0 +1,932 @@
+import React, {Component} from 'react';
+import {Link} from "react-router-dom";
+import axios from 'axios';
+import { Input , Spin, Icon ,Button,Pagination,DatePicker} from 'antd';
+import { handleDateString,getUrl,bytesToSize} from 'educoder';
+import locale from 'antd/lib/date-picker/locale/zh_CN';
+import MDEditors from '../MDEditors';
+import PhoneModel from './PhoneModel';
+import moment from 'moment';
+import '../packageconcnet.css';
+const { Search } = Input;
+const $ = window.$;
+let origin = getUrl();
+
+//  load
+if (!window.postUpMsg) {
+	$.getScript(
+		`${origin}/javascripts/attachments.js`,
+		(data, textStatus, jqxhr) => {
+
+		});
+}
+
+
+function checkPhone(phone){
+
+	if(!(/^1[3456789]\d{9}$/.test(phone))){
+		// alert("手机号码有误，请重填");
+		return false;
+	}
+}
+
+function range(start, end) {
+	const result = [];
+	for (let i = start; i < end; i++) {
+		result.push(i);
+	}
+	return result;
+}
+
+function disabledDateTime() {
+	return {
+		disabledMinutes: () => range(1, 30).concat(range(31, 60)),
+	};
+}
+class PackageIndexNEIBannerConcent extends Component {
+	constructor(props) {
+		super(props)
+		this.contentMdRef = React.createRef();
+		this.state = {
+			modalCancel:false,
+			getverificationcodes:true,
+			seconds:35,
+			springtype:false,
+			category:undefined,
+			title:undefined,
+			content:undefined,
+			attachment_ids:undefined,
+			deadline_at:undefined,
+			min_price:undefined,
+			max_price:undefined,
+			contact_name:undefined,
+			contact_phone:undefined,
+			code:undefined,
+			publish:false,
+			categories:[]
+		}
+	}
+	componentDidUpdate = (prevProps) => {
+		if(prevProps.current_user.username!=this.props.current_user.username){
+			this.setState({
+				contact_name:this.props.current_user.username
+			})
+		}
+	}
+
+	componentDidMount() {
+		window.document.title = '众包创新'
+		if(this.props.match.params.id!=undefined){
+
+			 let url=`/project_packages/${this.props.match.params.id}.json`
+			 axios.get((url)).then((response) => {
+				 console.log(response)
+				 let data=response.data
+					 this.setState({
+						 category:data.category_id,
+						 title:data.title,
+						 content:data.content,
+						 deadline_at:moment(data.deadline_at),
+						 min_price:data.min_price,
+						 max_price:data.max_price,
+						 contact_name:data.contact_name==null||data.contact_name==undefined?this.props.current_user.username:data.contact_name,
+						 phones:data.contact_phone,
+						 attachments:data.attachments,
+
+					 })
+			 }).catch((error) => {
+				 console.log(error);
+
+			 })
+		 }else{
+			this.setState({
+				contact_name:this.props.current_user.username
+			})
+		}
+
+		let Url = `/project_package_categories.json`;
+		axios.get(Url).then((response) => {
+			// console.log(response)
+			if(response.data.status===-1){
+
+			}else{
+				this.setState({
+					categories:response.data.categories
+				})
+			}
+
+		}).catch((error) => {
+			console.log(error)
+		})
+
+		// this.contentMdRef.current.setValue("测试赋值")
+	}
+	//获取验证码;
+	getverificationcode =()=>{
+		// 	if (this.state.logins&&this.state.logins.length === 0) {
+		//  // 判断没有输入手机号
+		// 		return
+		// 	}
+     if(this.state.getverificationcodes === undefined){
+			 console.log("undefined");
+			 return;
+		 }
+		if (this.state.getverificationcodes === true) {
+			this.setState({
+				getverificationcodes: undefined,
+			})
+			let timer = setInterval(() => {
+				this.setState((preState) => ({
+					seconds: preState.seconds - 1,
+				}), () => {
+					if (this.state.seconds == 0) {
+						clearInterval(timer);
+						this.setState({
+							getverificationcodes: false,
+							seconds: 35,
+						})
+					}
+				});
+			}, 1000)
+			//其他的网络请求也可以
+			this.SMSverification();
+		} else {
+			this.setState({
+				getverificationcodes: undefined,
+			})
+			let timer = setInterval(() => {
+				this.setState((preState) => ({
+					seconds: preState.seconds - 1,
+				}), () => {
+					if (this.state.seconds == 0) {
+						clearInterval(timer);
+						this.setState({
+							getverificationcodes: false,
+							seconds: 35,
+
+						})
+					}
+				});
+			}, 1000)
+			//其他的网络请求也可以
+			this.SMSverification();
+		}
+	}
+	//短信验证
+	SMSverification = () => {
+		let {contact_phone,code}=this.state;
+		var url = `/account/get_verification_code.json`;
+		axios.get((url), {
+			params: {
+				value: contact_phone,
+				type: 9,
+			}
+		}).then((result) => {
+			//验证有问题{"status":1,"message":"success"}
+			// console.log(result);
+			this.openNotification("验证码已发送，请注意查收!",2);
+
+
+		}).catch((error) => {
+			console.log(error);
+
+		})
+	}
+
+
+	onChangeTimePicker = (value, dateString) => {
+		if(value===null){
+			this.setState({
+				deadline_at:""
+			})
+		}else{
+			if(moment(handleDateString(dateString))===undefined||moment(handleDateString(dateString))===null||moment(handleDateString(dateString))===""){
+				this.setState({
+					deadline_attypes:true
+				})
+			}else{
+				this.setState({
+					deadline_attypes:false
+				})
+			}
+			if(moment(handleDateString(dateString))<moment(new Date())){
+				this.setState({
+					deadline_attypexy:true
+				})
+			}else{
+				this.setState({
+					deadline_attypexy:false
+				})
+			}
+
+			this.setState({
+				deadline_at: moment(handleDateString(dateString))
+			})
+		}
+
+
+	}
+
+	setcheckoutcontent=()=>{
+		const content = this.contentMdRef.current.getValue().trim();
+		if(content===undefined||content===null||content===""){
+		 this.setState({
+			 contenttypes:true
+		 })
+		}else{
+		 this.setState({
+			 contenttypes:false
+		 })
+		}
+	}
+
+
+ setcheckout=(min_price,max_price)=>{
+	 // if(min_price===undefined){
+		//  this.setState({
+		// 	 min_pricetype:true
+		//  })
+	 // }else{
+		//  this.setState({
+		// 	 min_pricetype:false
+		//  })
+	 // }
+
+
+	 // if(parseInt(min_price)===undefined||parseInt(min_price)===null||parseInt(min_price)===""){
+	 //
+		//  this.setState({
+		// 	 min_pricetype:true
+		//  })
+	 // }else{
+		//  this.setState({
+		// 	 min_pricetype:false
+		//  })
+	 // }
+
+	 // if(parseInt(max_price)===undefined||parseInt(max_price)===null||parseInt(max_price)===""){
+	 //
+		//  this.setState({
+		// 	 min_pricetype:true
+		//  })
+	 //
+	 // }else{
+		//  this.setState({
+		// 	 min_pricetype:false
+		//  })
+	 // }
+
+	 if(parseInt(min_price)<=0){
+		 this.setState({
+			 smallstype:true
+		 })
+	 }else{
+		 this.setState({
+			 smallstype:false
+		 })
+	 }
+
+	 if(parseInt(max_price)<parseInt(min_price)){
+
+		 this.setState({
+			 minmaxtype:true
+		 })
+	 }else{
+		 this.setState({
+			 minmaxtype:false
+		 })
+	 }
+
+ }
+
+
+
+	setPublication=(type)=>{
+		const content = this.contentMdRef.current.getValue().trim();
+		// console.log(content)
+		// console.log(this.state.deadline_at._i)
+    this.setState({
+			publish:type
+		})
+    let types=type;
+		let {category,title,attachment_ids,deadline_at,min_price,max_price,contact_name,contact_phone,code,modalCancel}=this.state;
+
+		if(category===undefined||category===null||category===""){
+			this.setState({
+				categorytypes:true
+			})
+			this.scrollToAnchor("publishtimestart");
+			return
+		}
+
+		if(title===undefined||title===null||title===""){
+			this.setState({
+				titletypes:true
+			})
+			this.scrollToAnchor("publishtimestart");
+			return
+		}
+
+		if(content===undefined||content===null||content===""){
+			this.setState({
+				contenttypes:true
+			})
+			this.scrollToAnchor("publishtimestart");
+			return
+		}
+
+		if(deadline_at===undefined||deadline_at===null||deadline_at===""){
+			this.setState({
+				deadline_attypes:true
+			})
+			this.scrollToAnchor("publishtime");
+			return
+		}
+
+
+		if(moment(deadline_at)<moment(new Date())){
+			this.setState({
+				deadline_attypexy:true
+			})
+			return
+		}
+
+		// if(min_price===undefined){
+		// 	this.setState({
+		// 		min_pricetype:true
+		// 	})
+		// }else{
+		// 	this.setState({
+		// 		min_pricetype:false
+		// 	})
+		// }
+
+		// if(parseInt(min_price)===undefined||parseInt(min_price)===null||parseInt(min_price)===""){
+		// 	this.setState({
+		// 		min_pricetype:true
+		// 	})
+		// 	return
+		// }
+
+		// if(parseInt(max_price)===undefined||parseInt(max_price)===null||parseInt(max_price)===""){
+		// 	this.setState({
+		// 		min_pricetype:true
+		// 	})
+		// 	return
+		// }
+
+		if(parseInt(min_price)<=0){
+			this.setState({
+				smallstype:true
+			})
+			return
+		}
+
+		if(parseInt(max_price)<parseInt(min_price)){
+			this.setState({
+				minmaxtype:true
+			})
+			return
+		}
+
+
+		if(contact_name===undefined||contact_name===""||contact_name===null){
+			this.setState({
+				contact_nametype:true
+			})
+			return
+		}
+
+		// if(modalCancel===false){
+		// 	if(this.props.current_user.phone===undefined||this.props.current_user.phone===null||this.props.current_user.phone===""){
+		// 		this.setState({
+		// 			current_userphonetype:true
+		// 		})
+		// 		return
+		// 	}
+		// }
+
+
+		if(modalCancel===true||this.props.current_user.phone===null){
+			if(contact_phone===undefined||contact_phone===null||contact_phone===""){
+				this.setState({
+					contact_phonetype:true
+				})
+				return
+			}
+
+			if(checkPhone(contact_phone)===false){
+				this.setState({
+					contact_phonetypes:true
+				})
+				return
+			}
+
+			if(code===undefined||code===""||code===null){
+				this.setState({
+					codeypes:true
+				})
+				return
+			}
+		}
+
+		this.setState({
+			springtype:true
+		})
+   if(this.props.match.params.id===undefined){
+		 const url = `/project_packages.json`;
+
+		 axios.post(url, {
+			   category_id: category,
+				 title: title,
+				 content: content,
+				 attachment_ids: attachment_ids,
+				 deadline_at:deadline_at._i,
+				 min_price:parseInt(min_price),
+				 max_price:parseInt(max_price),
+				 contact_name: contact_name===null||contact_name===undefined?this.props.current_user.username:contact_name,
+				 contact_phone: contact_phone===undefined?this.props.current_user.phone:contact_phone,
+				 code:code,
+				 publish:types
+			 }
+		 ).then((response) => {
+			 if(response.data.status===0){
+				 if(type===true){
+					 this.props.setPublicationfun(response.data.id)
+				 }else{
+					 window.location.href="/crowdsourcing/"+response.data.id
+				 }
+				 this.setState({
+					 springtype:false
+				 })
+			 }else if(response.data.status===-1){
+				 if(response.data.message==="无效的验证码"){
+					 this.setState({
+						 codeypesno:true,
+						 springtype:false
+					 })
+				 }
+			 }
+			 this.setState({
+				 springtype:false
+			 })
+		 }).catch((error) => {
+			 console.log(error)
+			 this.setState({
+				 springtype:false
+			 })
+		 })
+
+
+	 }else{
+
+   //	edit
+
+		 const url = `/project_packages/${this.props.match.params.id}.json`;
+
+		 axios.put(url, {
+			   category_id: category,
+				 title: title,
+				 content: content,
+				 attachment_ids: attachment_ids,
+				 deadline_at:deadline_at._i,
+				 min_price:parseInt(min_price),
+				 max_price:parseInt(max_price),
+				 contact_name:  contact_name===null||contact_name===undefined?this.props.current_user.username:contact_name,
+				 contact_phone: contact_phone===undefined?this.props.current_user.phone:contact_phone,
+				 code:code,
+				 publish:types
+			 }
+		 ).then((response) => {
+			 if(response.data.status===0){
+				 if(type===true){
+					 this.props.setPublicationfun(response.data.id)
+				 }else{
+					 window.location.href="/crowdsourcing/"+response.data.id
+				 }
+				 this.setState({
+					 springtype:false
+				 })
+			 }else if(response.data.status===-1){
+				 if(response.data.message==="无效的验证码"){
+					 this.setState({
+						 codeypesno:true,
+						 springtype:false
+					 })
+				 }
+			 }
+			 this.setState({
+				 springtype:false
+			 })
+		 }).catch((error) => {
+			 console.log(error)
+			 this.setState({
+				 springtype:false
+			 })
+		 })
+
+
+	 }
+
+
+
+	}
+
+	modalCancel=()=>{
+		this.setState({
+			modalCancel:false,
+			contact_phone:undefined,
+			code:undefined,
+		})
+	}
+
+	editmodels=()=>{
+		this.setState({
+			modalCancel:true
+		})
+	}
+
+
+	setcategory=(value)=>{
+		if(value===undefined||value===null||value===""){
+			this.setState({
+				categorytypes:true
+			})
+		}else{
+			this.setState({
+				categorytypes:false
+			})
+		}
+		this.setState({
+			category:value
+		})
+	}
+
+	settitlefun=(e)=>{
+
+		if(e.target.value===undefined||e.target.value===null||e.target.value===""){
+			this.setState({
+				titletypes:true
+			})
+		}else{
+			this.setState({
+				titletypes:false
+			})
+		}
+
+		this.setState({
+			title:e.target.value
+		})
+	}
+
+
+	onChangemin_prices=(e)=>{
+		let{max_price}=this.state;
+		this.setState({
+			min_price:e.target.value
+		})
+		this.setcheckout(e.target.value,max_price)
+
+
+	}
+	onChangemax_prices=(e)=>{
+		let{min_price}=this.state;
+		this.setState({
+			max_price:e.target.value
+		})
+		this.setcheckout(min_price,e.target.value)
+
+	}
+
+	onChangeContact_name=(e)=>{
+
+		if(e.target.value===undefined||e.target.value===""||e.target.value===null){
+			this.setState({
+				contact_nametype:true
+			})
+		}else{
+			this.setState({
+				contact_nametype:false
+			})
+		}
+
+
+		this.setState({
+			contact_name:e.target.value
+		})
+	}
+
+	onChangeContact_phone=(e)=>{
+	 let {modalCancel}=this.state;
+		// if(modalCancel===false){
+		// 	if(this.props.current_user.phone===undefined||this.props.current_user.phone===null||this.props.current_user.phone===""){
+		// 		this.setState({
+		// 			current_userphonetype:true
+		// 		})
+		// 	}else{
+		// 		this.setState({
+		// 			current_userphonetype:false
+		// 		})
+		// 	}
+		// }
+		if(modalCancel===true||this.props.current_user.phone===null){
+			if(e.target.value===undefined||e.target.value===null||e.target.value===""){
+				this.setState({
+					contact_phonetype:true
+				})
+			}else{
+				this.setState({
+					contact_phonetype:false
+				})
+			}
+
+			if(checkPhone(e.target.value)===false){
+				this.setState({
+					contact_phonetypes:true
+				})
+			}else{
+				this.setState({
+					contact_phonetypes:false
+				})
+			}
+		}
+
+
+		this.setState({
+			contact_phone:e.target.value
+		})
+	}
+
+	onChangeCode=(e)=>{
+		if(e.target.value===undefined||e.target.value===""||e.target.value===null){
+			this.setState({
+				codeypes:true
+			})
+		}else{
+			this.setState({
+				codeypes:false
+			})
+		}
+		this.setState({
+			code:e.target.value
+		})
+	}
+
+	//跳转道描点的地方
+	scrollToAnchor = (anchorName) => {
+		if (anchorName) {
+			// 找到锚点
+			let anchorElement = document.getElementById(anchorName);
+			// 如果对应id的锚点存在，就跳转到锚点
+			if(anchorElement) { anchorElement.scrollIntoView(); }
+		}
+	}
+
+	render() {
+		let {modalCancel,seconds,getverificationcodes,attachments,
+			category,title}=this.state;
+		let categorylist=[
+			{name:"前端开发",value:"front"},
+			{name:"后端开发",value:"backend"},
+			{name:"移动开发",value:"mobile"},
+			{name:"数据库",value:"database"},
+			{name:"云计算和大数据",value:"cloud_compute_and_big_data"},
+			{name:"人工智能",value:"ai"},
+			{name:"其他",value:"other"},
+		]
+
+
+		return (
+
+		<div className="mb20 touchSelect">
+			{/*<PhoneModel*/}
+				{/*modalsType={modalCancel}*/}
+				{/*modalCancel={this.modalCancel}*/}
+			{/*/>*/}
+			<Spin size="large" spinning={this.state.springtype} >
+				<p className="clearfix" id={"publishtimestart"}>
+
+					<div className={"stud-class-set pd30a0 coursenavbox edu-back-white pb20"}>
+							<div className={"ant-row contentbox mdInForm "}>
+								<div className="ant-form-item-label mb10">
+									<label htmlFor="coursesNew_description" className="ant-form-item-required font-16">请选择需求类型</label>
+								</div>
+
+								<p className="clearfix mb20 shaiContent" >
+									<div className="fl pr shaiAllItem pagetype">
+										{this.state.categories.map((item,key)=>{
+											return(
+												<li key={key} className={category===item.id?"shaiItem shixun_repertoire active borderccc":"shaiItem shixun_repertoire borderccc"} value={item.id} onClick={()=>this.setcategory(item.id)}>{item.name}</li>
+											)
+										})}
+									</div>
+								</p>
+								{this.state.categorytypes===true?<div className={"color-red"}>请选择类型</div>:""}
+
+							<div className="ant-form-item-label mb10">
+								<label htmlFor="coursesNew_description" className="ant-form-item-required font-16" >需求标题和详情</label>
+							</div>
+
+							<Input placeholder="请输入需求标题，示例：美食类APP开发，最大限制60个字符" maxLength="60" className="input-100-40s mt5 fafafas"
+							 value={title} onInput={this.settitlefun}/>
+								{this.state.titletypes===true?<div className={"color-red mt10"}>不能为空</div>:""}
+							<MDEditors ref={this.contentMdRef} placeholder="请填写清晰完整的需求内容" mdID={'courseContentMD'} refreshTimeout={1500}
+													watch={false}  className="courseMessageMD" initValue={this.state.content}  setcheckoutcontent={()=>this.setcheckoutcontent()}></MDEditors>
+								{/* 请求status 422 */}
+								{this.state.contenttypes===true?<div className={"color-red"}>不能为空</div>:""}
+								{/*<div className="df uploadBtn">*/}
+									{/*<a href="javascript:void(0);" className="fl" onClick={() => window.$('#_file').click()}*/}
+										 {/*data-tip-down="请选择文件上传">*/}
+										{/*/!*<i className="fa fa-upload mr5 color-blue"></i>*!/*/}
+										{/*<span className="color-blue">上传附件</span>*/}
+									{/*</a>*/}
+									{/*<span style={{ fontSize: "14px"}}>(最多可添加 <span className={"color-orange06"}>5</span> 个图片/文件，每个大小不超过 <span className={"color-orange06"}>10MB</span>)</span>*/}
+								{/*</div>*/}
+								{/*{attachments&&attachments.map((item,key)=>{*/}
+									{/*return(*/}
+										{/*<div className={"newForm newFormbox mt10 "}>*/}
+											{/*<i className="color-green iconfont icon-fujian mr5 fl font-14 mt4"></i>*/}
+											{/*<a className="upload_filename color-grey readonly hidden fl mtf3 mr10 ml5" href={item.url}>{item.title}  &nbsp; &nbsp;{bytesToSize(item.filesize)}</a>*/}
+										{/*</div>*/}
+									{/*)})}*/}
+								{/*<form className="newForm newFormbox mt10 ">*/}
+									{/*<span id={`attachments_fields`} className="attachments_fields"*/}
+												{/*xmlns="http://www.w3.org/1999/html">*/}
+									{/*</span>*/}
+											{/*<span className="add_attachment">*/}
+										{/*<input className="file_selector"*/}
+													 {/*data-are-you-sure="您确定要删除吗？"*/}
+													 {/*data-delete-all-files="您确定要删除所有文件吗"*/}
+													 {/*data-description-placeholder="可选的描述"*/}
+													 {/*data-field-is-public="公开"*/}
+													 {/*data-file-count="个文件已上传"*/}
+													 {/*data-lebel-file-uploding="个文件正在上传"*/}
+													 {/*data-max-concurrent-uploads="2"*/}
+													 {/*data-max-file-size-message="该文件无法上传。超过文件大小限制 (10 MB)，建议上传到百度云等其他共享工具里，然后在txt文档里给出链接以及共享密码并上传"*/}
+													 {/*data-max-file-size="10485760" data-upload-path="/uploads.js"*/}
+													 {/*id="_file"*/}
+													 {/*multiple="multiple" name="attachments[dummy][file]"*/}
+													 {/*onChange={() => {*/}
+														  {/*debugger;*/}
+ 													   {/*console.log(window.$('.file_selector')[0])*/}
+														 {/*window.addInputFiles(window.$('.file_selector')[0])*/}
+													 {/*}}*/}
+													 {/*style={{'display': 'none'}}*/}
+													 {/*type="file">*/}
+										{/*</input>*/}
+									{/*</span>*/}
+								{/*</form>*/}
+
+
+						</div>
+					</div>
+
+					<div className={"stud-class-set padding30 coursenavbox edu-back-white"} style={{borderTop: '1px solid #EAEAEA'}} id={"publishtime"}>
+						<div className={"ant-row contentbox mdInForm "}>
+							<div className="ant-form-item-label mb10">
+								<label htmlFor="coursesNew_description" className="ant-form-item-required font-16">工期与预算</label>
+							</div>
+							<p className="clearfix mb20 shaiContent">
+								<span className="shaiTitle fl mt5 ml10">竞标截止：</span>
+								<DatePicker
+									showToday={false}
+									showTime={{ format: 'HH:mm' }}
+									locale={locale}
+									style={{"width": "260px"}}
+									format="YYYY-MM-DD HH:mm"
+									placeholder="请选择任务的竞标截止日期"
+									className={"fafas"}
+									disabledTime={disabledDateTime}
+									value={this.state.deadline_at}
+									onChange={this.onChangeTimePicker}
+								/>
+
+								{this.state.deadline_attypes===true?<div className={"color-red ml100"}>不能为空</div>:""}
+
+								{this.state.deadline_attypexy===true?<div className={"color-red ml100"}>不能早于当前时间</div>:""}
+							</p>
+							<p className="clearfix mb20 shaiContent">
+								<span className="shaiTitle fl mt5 ml10">支付费用：</span>
+								<Input
+									className={"fafas"}
+									style={{"width": "260px"}}
+									value={this.state.min_price}
+									placeholder="支付多少费用（最低）"
+									onInput={(e)=>this.onChangemin_prices(e)}
+									suffix={
+										<span >¥</span>
+									}
+								/>
+								<span className={"ml10 mr10"}>～</span>
+								<Input
+								className={"fafas"}
+								style={{"width": "260px"}}
+								value={this.state.max_price}
+								placeholder="支付多少费用（最高）"
+								onInput={(e)=>this.onChangemax_prices(e)}
+								suffix={
+									<span>¥</span>
+								}
+								/><span className={"pagenoedits"}>不填，则表示可议价</span>
+								  {this.state.min_pricetype===true?<div className={"color-red ml100"}>不能为空</div>:""}
+								  {this.state.smallstype===true?<div className={"color-red ml100"}>不能小于零</div>:""}
+									{this.state.minmaxtype===true?<div className={"color-red ml100"}>最高费用不能小于最低费用</div>:""}
+							</p>
+							<div className="ant-form-item-label mb10">
+								<label htmlFor="coursesNew_description" className="ant-form-item-required font-16" >联系方式</label>
+							</div>
+							<p className="clearfix mb20 shaiContent">
+								<span className="shaiTitle fl mt5 ml38">姓名：</span>
+								<Input
+									className={"fafafas"}
+									style={{"width": "260px"}}
+									value={this.state.contact_name===null||this.state.contact_name===undefined?this.props.current_user.username:this.state.contact_name}
+									placeholder="请输入姓名"
+									onInput={(e)=>this.onChangeContact_name(e)}
+								/>
+								{this.state.contact_nametype===true?<div className={"color-red ml100"}>不能为空</div>:""}
+							</p>
+
+							{modalCancel===false&&this.props.current_user.phone!=null?<p className="clearfix mb20 shaiContent">
+								<span className="shaiTitle fl mt5 ml25">手机号：</span>
+								<Input
+									className={"fafafas fl"}
+									style={{"width": "260px"}}
+									value={this.state.phones===undefined?this.props.current_user.phone:this.state.phones}
+									placeholder="请输入手机号"
+									disabled={true}
+								/>
+								<a className="fl ml20">
+									<i className="iconfont icon-bianjidaibeijing font-20 color-blue" onClick={()=>this.editmodels()}></i>
+								</a>
+							</p>:""}
+							{/*{this.state.current_userphonetype===true?<div className={"color-red ml100"}>不能为空</div>:""}*/}
+							{modalCancel===true||this.props.current_user.phone===null?<p className="clearfix mb20 shaiContent">
+									<span className="shaiTitle mt5 fl">
+							    <span className="shaiTitle fl mt5 ml25">
+										{/*未注册才显示!*/}
+
+										手机号：</span>
+										<Input
+											className={"fafafas fl"}
+											style={{"width": "260px"}}
+											value={this.state.contact_phone}
+											placeholder="请输入手机号码"
+											onInput={(e)=>this.onChangeContact_phone(e)}
+										/>
+										{this.state.contact_phonetype===true?<div className={"color-red ml100"}>不能为空</div>:""}
+										{this.state.contact_phonetypes===true?<div className={"color-red ml100"}>请输入正确的手机号</div>:""}
+									</span>
+
+									<span className="shaiTitle mt5 ml17 fl">
+										<span>
+											<Search
+												style={{ width: 300 }}
+												value={this.state.code}
+												className="fafas"
+												placeholder="请输入验证码"
+												enterButton={
+											  getverificationcodes === undefined ? <span>重新发送 ({seconds}s)</span>: getverificationcodes === true ?<span  >获取验证码</span>	:<span  >重新发送</span>}
+												onSearch={()=>this.getverificationcode()}
+												onInput={(e)=>this.onChangeCode(e)}
+											/>
+											{this.state.codeypes===true?<div className={"color-red"}>验证码不能为空</div>:""}
+											{this.state.codeypesno===true?<div className={"color-red"}>验证码不正确</div>:""}
+										</span>
+										<span>
+											{/*<Button type="primary" className="defalutSubmitbtn ml10 defalutSubmitbtnmodels">重新发送（）</Button>*/}
+										</span>
+									</span>
+									<a className="fl mt8">
+										<span className="font-18 color-blue" onClick={()=>this.modalCancel()}>X</span>
+									</a>
+								</p>:""}
+
+
+						</div>
+					</div>
+				</p>
+
+				<div className="clearfix mt30 mb30">
+					<Button type="primary" className="defalutSubmitbtn fl mr20 defalutSubmitbtns" onClick={()=>this.setPublication(true)}>申请发布</Button>
+					<a className="defalutCancelbtns fl"  onClick={()=>this.setPublication(false)}>保存</ a>
+				</div>
+			</Spin>
+			</div>
+
+		)
+	}
+}
+
+export default PackageIndexNEIBannerConcent;
+
+// attachments:[
+// 	{
+// 		id: 206525,
+// 		title: "412420b57ed8c141963d4c548bde551f",
+// 		filesize: 18523,
+// 		description: null,
+// 		url: "/api/attachments/206525"
+// 	}
+// 	]
+
diff --git a/public/react/src/modules/projectPackages/PackageIndexNewandEdit/PackageIndexNEISubmit.js b/public/react/src/modules/projectPackages/PackageIndexNewandEdit/PackageIndexNEISubmit.js
new file mode 100644
index 000000000..9f287e90e
--- /dev/null
+++ b/public/react/src/modules/projectPackages/PackageIndexNewandEdit/PackageIndexNEISubmit.js
@@ -0,0 +1,49 @@
+import React, {Component} from 'react';
+import {Link} from "react-router-dom";
+import { Icon ,Button} from 'antd';
+
+class PackageIndexNEISubmit extends Component {
+	constructor(props) {
+		super(props)
+		this.state = {
+			current:0
+		}
+	}
+	componentDidMount() {
+		window.document.title = '众包创新'
+	}
+	setageload=(sum)=>{
+		if(sum===undefined){
+			window.location.href="/crowdsourcing/new"
+		}else{
+			// this.props.history.push("/project_packages/"+sum)
+			window.location.href="/crowdsourcing/"+sum
+		}
+
+	}
+	render() {
+
+		return (
+			<div className="mb20">
+
+				<p className="clearfix ">
+					<div className={"stud-class-set padding200 coursenavbox edu-back-white"}>
+					    <div className={"mb20"}><Icon type="check-circle" theme="filled" className={"fontcircle color-green"}/></div>
+							<div className={"sumbtongs mb5"}>恭喜!</div>
+							<div className={"sumbtongs mb5"}>提交成功</div>
+							<div className={"terraces mb5"}>平台正在审核您的申请，审核结果将以平台消息的形式通知您</div>
+							<div className="clearfix mt30 mb30 padding251">
+								<a className="defalutCancelbtns fl" onClick={()=>this.setageload(this.props.id)}>查看发布需求</ a>
+								<Button type="primary" className="defalutSubmitbtn fl ml40 defalutSubmitbtns" onClick={()=>this.setageload()}>继续发布</Button>
+							</div>
+					</div>
+				</p>
+
+
+			</div>
+		)
+	}
+}
+
+export default PackageIndexNEISubmit;
+
diff --git a/public/react/src/modules/projectPackages/PackageIndexNewandEdit/PackageIndexNewandEditIndex.js b/public/react/src/modules/projectPackages/PackageIndexNewandEdit/PackageIndexNewandEditIndex.js
new file mode 100644
index 000000000..1571fd77a
--- /dev/null
+++ b/public/react/src/modules/projectPackages/PackageIndexNewandEdit/PackageIndexNewandEditIndex.js
@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
+
+//业务组件
+import PackageIndexNEIBanner from "./PackageIndexNEIBanner";
+
+import PackageIndexNEIBannerConcent from "./PackageIndexNEIBannerConcent"
+
+import PackageIndexNEISubmit from './PackageIndexNEISubmit'
+import '../packageconcnet.css';
+class PackageIndexNewandEditIndex extends Component{
+	constructor(props) {
+		super(props)
+		this.state = {
+			setPublication:false,
+			id:undefined
+		}
+	}
+
+	componentDidMount(){
+		window.document.title = '众包创新'
+	}
+
+	setPublicationfun=(ids)=>{
+		this.setState({
+			setPublication:true,
+			id:ids
+		})
+	}
+	render() {
+		let {setPublication}=this.state;
+		return (
+			<div>
+				<div className="clearfix">
+					{setPublication===false?<div className={"educontent mt20 mb50"}>
+
+							  <p className="clearfix mt20 mb20">
+										<span className="fl font-24 color-grey-3">
+											{this.props.match.params.id!=undefined?"编辑":"新建"}</span>
+								</p>
+
+					    	<PackageIndexNEIBanner {...this.props} />
+
+								<PackageIndexNEIBannerConcent
+									{...this.props}
+									setPublicationfun={this.setPublicationfun}
+								/>
+
+								</div>:
+							  <div className={"educontent mt30 mb50"}>
+										<PackageIndexNEISubmit
+											{...this.props}
+											id={this.state.id}
+										/>
+							  </div>}
+				</div>
+			</div>
+		)
+	}
+}
+export default PackageIndexNewandEditIndex;
\ No newline at end of file
diff --git a/public/react/src/modules/projectPackages/PackageIndexNewandEdit/PhoneModel.js b/public/react/src/modules/projectPackages/PackageIndexNewandEdit/PhoneModel.js
new file mode 100644
index 000000000..99d63e7c2
--- /dev/null
+++ b/public/react/src/modules/projectPackages/PackageIndexNewandEdit/PhoneModel.js
@@ -0,0 +1,140 @@
+import React, { Component } from 'react';
+import { Spin, Icon , Modal,Input,Button} from 'antd';
+class PhoneModel extends Component {
+	//getverificationcodes 是否是重新发送或者是获取验证码
+	//多少秒
+	constructor(props) {
+		super(props);
+		this.state = {
+			funmodalsType:false,
+			istype:false,
+			getverificationcodes:true,
+			seconds:35,
+		}
+	}
+	//获取验证码
+	getverificationcode =()=>{
+		// 	if (this.state.logins&&this.state.logins.length === 0) {
+		// 判断没有输入手机号
+		// 		return
+		// 	}
+
+		if (this.state.getverificationcodes === true) {
+			this.setState({
+				getverificationcodes: undefined,
+			})
+			let timer = setInterval(() => {
+				this.setState((preState) => ({
+					seconds: preState.seconds - 1,
+				}), () => {
+					if (this.state.seconds == 0) {
+						clearInterval(timer);
+						this.setState({
+							getverificationcodes: false,
+							seconds: 35,
+						})
+					}
+				});
+			}, 1000)
+			//其他的网络请求也可以
+			this.SMSverification();
+		} else {
+			this.setState({
+				getverificationcodes: undefined,
+			})
+			let timer = setInterval(() => {
+				this.setState((preState) => ({
+					seconds: preState.seconds - 1,
+				}), () => {
+					if (this.state.seconds == 0) {
+						clearInterval(timer);
+						this.setState({
+							getverificationcodes: false,
+							seconds: 35,
+
+						})
+					}
+				});
+			}, 1000)
+			//其他的网络请求也可以
+			this.SMSverification();
+		}
+	}
+	//短信验证
+	SMSverification = () => {
+		// var url = `/accounts/get_verification_code.json`;
+		// axios.get((url), {
+		// 	params: {
+		// 		login: this.state.logins,
+		// 		type: 1,
+		// 	}
+		// }).then((result) => {
+		// 	//验证有问题{"status":1,"message":"success"}
+		// 	// console.log(result);
+		// 	this.openNotification("验证码已发送，请注意查收!",2);
+		//
+		//
+		// }).catch((error) => {
+		// 	console.log(error);
+		//
+		// })
+	}
+	render() {
+		let{getverificationcodes,seconds} =this.state;
+		const antIcons = <Icon type="loading" style={{ fontSize: 24 }} spin />
+		return(
+			<Modal
+				keyboard={false}
+				title="修改手机号"
+				visible={this.props.modalsType===undefined?false:this.props.modalsType}
+				closable={false}
+				footer={null}
+				destroyOnClose={true}
+				centered={true}
+				width="530px"
+			>
+					<div className="task-popup-content">
+						<p className="task-popup-text-center font-16 mb20">
+							<span className="shaiTitle mt5">手机号码：<span>
+								<Input
+									style={{ width: 337 }}
+									placeholder="请输入手机号码" />
+							</span></span>
+						</p>
+						<p className="task-popup-text-center font-16 mt5">
+
+							<span className="shaiTitle mt5 ml17">
+								验证码：
+								<span>
+									<Input
+										style={{ width: 200 }}
+										placeholder="请输入验证码" />
+								</span>
+								<span>
+									  {
+											getverificationcodes === undefined ?
+												<Button type="primary"  className="defalutSubmitbtn ml10 defalutSubmitbtnmodels" 	 >重新发送 ({seconds}s)</Button>
+											: getverificationcodes === true ?
+												<Button type="primary" className="defalutSubmitbtn ml10 defalutSubmitbtnmodels" 	onClick={() => this.getverificationcode()} >获取验证码</Button>
+												:
+												<Button type="primary" className="defalutSubmitbtn ml10 defalutSubmitbtnmodels" 	onClick={() => this.getverificationcode()} >重新发送</Button>
+
+										}
+													{/*<Button type="primary" className="defalutSubmitbtn ml10 defalutSubmitbtnmodels">重新发送（）</Button>*/}
+								</span>
+							</span>
+
+						</p>
+
+						<div className="clearfix mt30 edu-txt-center">
+							<a  className="task-btn mr30 color_white" onClick={this.props.modalCancel}>取消</a>
+							<a className="task-btn task-btn-orange " onClick={this.props.modalSave}>确定</a>
+						</div>
+
+					</div>
+			</Modal>
+		)
+	}
+}
+
+export default PhoneModel;
\ No newline at end of file
diff --git a/public/react/src/modules/projectPackages/ProjectPackageIndex.js b/public/react/src/modules/projectPackages/ProjectPackageIndex.js
new file mode 100644
index 000000000..097e012e0
--- /dev/null
+++ b/public/react/src/modules/projectPackages/ProjectPackageIndex.js
@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+
+import { Redirect } from 'react-router';
+
+import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
+
+import Loading from '../../Loading'
+
+import Loadable from 'react-loadable';
+import { TPMIndexHOC } from '../tpm/TPMIndexHOC'
+import { SnackbarHOC } from 'educoder'
+
+
+const PackageIndex = Loadable({
+	loader: () => import('./PackageIndex/PackageIndex'),
+	loading: Loading,
+})
+
+const PackageIndexNewandEdit = Loadable({
+	loader: () => import('./PackageIndexNewandEdit/PackageIndexNewandEditIndex'),
+	loading: Loading,
+})
+
+const PackageIndexNEITaskDetails = Loadable({
+	loader: () => import('./PackageIndexNEITaskDetails/PackageIndexNEITaskDetails'),
+	loading: Loading,
+})
+
+class ProjectPackageIndex extends Component {
+	constructor(props) {
+		super(props)
+	}
+
+	componentDidMount(){
+		window.document.title = '众包创新'
+	}
+
+	render() {
+
+		return (
+			<div className="newMain clearfix">
+
+				<Switch>
+					{/*众包首页*/}
+
+					<Route path="/crowdsourcing/:id/edit"
+								 render={
+									 (props) => (<PackageIndexNewandEdit {...this.props} {...props} {...this.state} />)
+								 }
+					></Route>
+
+					<Route path="/crowdsourcing/new"
+								 render={
+									 (props) => (<PackageIndexNewandEdit {...this.props} {...props} {...this.state} />)
+								 }
+					></Route>
+
+					<Route path="/crowdsourcing/:id"
+								 render={
+									 (props) => (<PackageIndexNEITaskDetails {...this.props} {...props} {...this.state} />)
+								 }
+					></Route>
+
+					<Route path="/crowdsourcing"
+								 render={
+									 (props) => (<PackageIndex {...this.props} {...props} {...this.state} />)
+								 }
+					></Route>
+				</Switch>
+
+			</div>
+		);
+	}
+}
+
+export default SnackbarHOC() (TPMIndexHOC (ProjectPackageIndex)) ;
\ No newline at end of file
diff --git a/public/react/src/modules/projectPackages/packageconcnet.css b/public/react/src/modules/projectPackages/packageconcnet.css
new file mode 100644
index 000000000..c17d95c9b
--- /dev/null
+++ b/public/react/src/modules/projectPackages/packageconcnet.css
@@ -0,0 +1,338 @@
+.width1240{
+    width:1240px;
+}
+.packinput .ant-input{
+    height: 50px;
+    width:749px;
+    border-color: #E1EDF8 !important;
+}
+
+.packinput .ant-input-group-addon .ant-btn{
+    width:140px !important;
+    font-size: 18px;
+    height: 50px;
+    background:rgba(76,172,255,1);
+    margin-right:18px;
+}
+
+.setissues{
+    width:280px;
+    height:50px;
+    background:rgba(76,172,255,1);
+    border-radius:4px;
+    margin-left: 15px;
+}
+
+.pagetype li{
+    color:#8F8F8F !important;
+}
+
+.maxwidth700{
+    max-width: 700px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.mbf10{
+    margin-bottom:-10px;
+}
+
+.PackageIndexNEIBanner{
+    width:1200px;
+    height:110px;
+    background:rgba(255,255,255,1);
+    box-shadow:0px 2px 6px 0px rgba(125,125,125,0.26);
+    border-radius:8px;
+}
+
+.padding110{
+    padding: 39px 110px 0px;
+    box-sizing: border-box;
+}
+
+.borderccc{
+    border: 1px solid #ccc;
+}
+
+.input-100-40s{
+    width: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+}
+
+.fafafas{
+    background-color: #fafafa!important;
+    height: 40px;
+}
+
+.fafafas:focus{
+    background-color: #fff!important;
+}
+
+.fafas .ant-input{
+    background-color: #fafafa!important;
+    height: 40px;
+}
+
+.fafas .ant-input:focus{
+    background-color: #fff!important;
+}
+.fafas .ant-input-group-addon .ant-btn{
+    width:140px !important;
+    font-size: 14px;
+    height: 40px;
+    background:rgba(76,172,255,1);
+}
+
+.newFormbox .upload_filename{
+    line-height: 32px;
+}
+
+.newFormbox .attachment span{
+    line-height: 23px;
+}
+
+.newFormbox .attachment .remove-upload{
+    line-height: 28px;
+}
+
+.pd26a0{
+    padding: 26px 26px 16px 26px;
+}
+
+.newFormbox .attachment .icon-fujian{
+    font-size: 14px !important;
+    line-height: 14px;
+    margin-top: 9px;
+}
+
+.newFormbox{
+    height:20px
+}
+
+.ml24{
+    margin-left:24px;
+}
+
+.defalutCancelbtns{
+    display: block;
+    border: 1px solid #4CACFF !important;
+    background-color: #fff;
+    color: #4CACFF !important;
+    width:130px;
+    height:40px;
+    text-align: center;
+    line-height: 40px;
+    border-radius: 4px;
+}
+
+.defalutSubmitbtns{
+    background-color: #4CACFF;
+    height:40px;
+}
+
+.defalutSubmitbtnmodels{
+    width:127px;
+    height:30px;
+    background-color: #4CACFF;
+}
+
+.ant-steps-item-process .ant-steps-item-icon{
+    background-color: #4CACFF !important;
+}
+
+.ant-steps-item-process .ant-steps-item-icon{
+    background-color: #4CACFF !important;
+}
+
+.padding200{
+    padding: 115px 200px 215px 200px;
+}
+
+.fontcircle{
+    font-size: 80px;
+    display: inherit;
+}
+
+.sumbtongs{
+    font-size: 24px;
+    display: inherit;
+    text-align: center;
+}
+
+.terraces{
+    font-size: 16px;
+    display: inherit;
+    text-align: center;
+    color:#999;
+}
+.padding251{
+    padding: 0px 251px;
+}
+
+.ant-modal-title{
+    text-align: center;
+}
+.ml17{
+    margin-left: 17px;
+}
+
+.project-package-items{
+    display: -webkit-flex;
+    display: flex;
+    flex-direction: row;
+    margin:0px !important;
+    padding: 20px;
+    background: white;
+    margin-bottom:0px !important;
+    box-shadow: none  !important;
+}
+
+.mtf7{
+    margin-top:-7px;
+}
+
+.publicpart.orangeGreen {
+    border-left: 80px solid #29BD8B;
+}
+
+.publicwords{
+    left: 3px;
+    top: 18px;
+}
+
+.project-packages-list .project-package-items .item-image{
+    width:100px !important;
+}
+
+.height185{
+    height: 185px;
+}
+
+.ContacttheTA{
+    width: 80px;
+    height: 26px;
+    font-size: 14px;
+    line-height: 26px;
+    display: block;
+    border: 1px solid #4CACFF !important;
+    background-color: #fff;
+    color: #4CACFF !important;
+    text-align: center;
+    border-radius: 4px;
+}
+.ContacttheTAs{
+    width: 80px;
+    height: 26px;
+    font-size: 14px;
+    line-height: 24px;
+    /*display: block;*/
+    border: 1px solid #fff !important;
+    background-color: #4CACFF;
+    color: #fff !important;
+    text-align: center;
+    border-radius: 4px;
+}
+.ml28{
+    margin-left: 28px;
+}
+
+.longboxs{
+    font-size: 16px;
+    font-family: MicrosoftYaHei-Bold;
+    font-weight: bold;
+    color: rgba(5,16,26,1);
+    border-left: 4px solid rgba(76,172,255,1);
+    padding-left: 10px;
+    margin-bottom: 20px;
+}
+
+.padding020{
+    padding: 0px 20px 20px;
+}
+
+.mtf3{
+    margin-top:-3px;
+}
+
+.task-btn-nebules{
+    background: #fff!important;
+    color: #4CACFF!important;
+    border: 1px solid #4CACFF!important;
+    margin-left: 20px;
+    cursor: pointer;
+    display: inline-block;
+    padding: 0 12px;
+    letter-spacing: 1px;
+    text-align: center;
+    font-size: 14px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 2px;
+}
+
+.packageabsolute{
+    position: absolute;
+    right: -16px;
+    top: -7px;
+}
+.relativef{
+    position: relative;
+}
+
+.homehove:hover .ptext{
+    color: #4CACFF!important;
+}
+
+.homehove:hover .ContacttheTAs{
+    display: block;
+}
+
+.topsj{
+    position: absolute;
+    top: -6px;
+}
+.bottomsj{
+    position: absolute;
+    bottom: -6px;
+}
+.touchSelect .ant-spin-dot-spin{
+    margin-top: 30% !important;
+}
+
+.pagenoedits{
+    margin-left: 20px;
+    color: #ccc;
+}
+
+.pagemancenter{
+    text-align: center;
+}
+
+.ml0{
+    margin-left: 0px;
+}
+.tabelcli{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 850px;
+    display: table-cell;
+}
+
+.mtf10{
+    margin-top:-10px;
+}
+
+.padding26{
+    padding: 26px;
+    box-sizing: border-box;
+}
+
+.pd26{
+    padding: 26px;
+}
+.pd30a0{
+    padding: 30px 30px 16px 30px;
+}
\ No newline at end of file
diff --git a/public/react/src/modules/tpm/NewHeader.js b/public/react/src/modules/tpm/NewHeader.js
index 3d1136371..379c70e27 100644
--- a/public/react/src/modules/tpm/NewHeader.js
+++ b/public/react/src/modules/tpm/NewHeader.js
@@ -716,7 +716,10 @@ submittojoinclass=(value)=>{
 								/>
               </li>
 							<li className=""><a href={this.props.Headertop===undefined?"":this.props.Headertop.moop_cases_url}>教学案例</a></li>
-							<li className=""><a href={this.props.Headertop===undefined?"":this.props.Headertop.crowdsourcing_url}>众包创新</a></li>
+							<li className=""><a
+								// href={this.props.Headertop===undefined?"":this.props.Headertop.crowdsourcing_url}
+								href={'/crowdsourcing'}
+							>众包创新</a></li>
               <li className={`${activeForums === true ? 'active' : ''}`}><a href={this.props.Headertop===undefined?"":this.props.Headertop.topic_url}>交流问答</a></li>
               <li
                 style={{display: this.props.Headertop === undefined ? 'none'  : this.props.Headertop.auth===null? 'none' : 'block'}}
diff --git a/public/stylesheets/educoder/edu-all.css b/public/stylesheets/educoder/edu-all.css
index 4fdd8c400..65db45900 100644
--- a/public/stylesheets/educoder/edu-all.css
+++ b/public/stylesheets/educoder/edu-all.css
@@ -3053,4 +3053,6 @@ a.singlepublishtwo{
 .CourseTargetPoint tbody tr td{vertical-align: top;}
 .editormd-dialog-footer{
     padding: 0px;
-}
\ No newline at end of file
+}
+.project_packagesHead{width: 100%;margin-bottom:40px;background-size: 100% 100%;background-image: url("/images/educoder/project_packagesHead.jpg");height: 240px;
+    justify-content: center;align-items: center;display: -webkit-flex;}
\ No newline at end of file