diff --git a/public/react/src/App.js b/public/react/src/App.js
index e713cd0fd..47e471767 100644
--- a/public/react/src/App.js
+++ b/public/react/src/App.js
@@ -123,6 +123,12 @@ const SearchPage = Loadable({
 	loading: Loading,
 })
 
+//教学案例
+const MoopCases = Loadable({
+	loader: () => import('./modules/moop_cases/index'),
+	loading: Loading,
+})
+
 // 课堂讨论
 // const BoardIndex = Loadable({
 //   loader: () => import('./modules/courses/boards/BoardIndex'),
@@ -387,6 +393,11 @@ class App extends Component {
 							<Route path="/testRCComponent" component={TestComponent}/>
 							<Route path="/testUrlQuery" component={TestUrlQueryComponent}/>
 
+							{/* 教学案例 */}
+							<Route path="/moop_cases"render={
+									(props) => (<MoopCases {...this.props} {...props} {...this.state} />)
+							}/>
+
 							{/* <Route component={NotFoundPage}/> */}
 							{/*列表页*/}
 							{/*<Route component={TPMShixunsIndexComponent}/>*/}
diff --git a/public/react/src/images/moop_cases/teach_ex.jpg b/public/react/src/images/moop_cases/teach_ex.jpg
new file mode 100644
index 000000000..eef1f7ce6
Binary files /dev/null and b/public/react/src/images/moop_cases/teach_ex.jpg differ
diff --git a/public/react/src/modules/courses/css/Courses.css b/public/react/src/modules/courses/css/Courses.css
index 2408e95bb..57b1e37f9 100644
--- a/public/react/src/modules/courses/css/Courses.css
+++ b/public/react/src/modules/courses/css/Courses.css
@@ -683,8 +683,9 @@ a.white-btn.use_scope-btn:hover{
 }
 
 .colorBlue {
+    padding: 0px 7px;
     background-color: #fff;
-    color: #4CACFF;
+    color: #4CACFF!important;
     border: 1px solid #4CACFF;
 }   
 .greyBack{
diff --git a/public/react/src/modules/moop_cases/CaseItem.js b/public/react/src/modules/moop_cases/CaseItem.js
new file mode 100644
index 000000000..45be0b3cb
--- /dev/null
+++ b/public/react/src/modules/moop_cases/CaseItem.js
@@ -0,0 +1,47 @@
+import React,{ Component } from "react";
+import { Spin } from "antd";
+import './css/moopCases.css'
+import '../courses/css/Courses.css'
+
+import { getUrl } from 'educoder';
+
+import Tags from './CaseTags'
+
+class CaseItem extends Component{
+  constructor(props){
+    super(props);
+  }
+
+  render(){
+    let { libraries } = this.props;
+    console.log(libraries)
+    return(
+      <div className="library-list-container">
+        {
+          libraries && libraries.map((item,key)=>{
+            return(
+              <li className="library_list_item">
+                <img alt={item.id} className="mr15 mt3 radius4" height="90" src={getUrl(`${item.cover_url}`)} width="120" />
+                <div className="flex1">
+                  <p className="clearfix mb15 lineh-40">
+                    <a href="/moop_cases/15" className="task-hide font-22 library_l_name">{item.title}</a>
+                    <Tags tags={item.tags}></Tags>
+                  </p>
+                  <p className="clearfix lineh-20 mt10">
+                    <span className="color-grey-3 mr10">{item.author_name}</span>
+                    <span className="color-grey-3 mr20">{item.author_school_name}</span>
+                    <span className="color-grey-c mr20 fr"><span className=" item-group-icon mr5"><i className="fa fa-download"></i></span>{item.download_count} 下载</span>
+                    <span className="color-grey-c mr20 fr"><span className=" item-group-icon mr5"><i className="fa fa-thumbs-o-up"></i></span>{item.praise_count} 赞</span>
+                    <span className="color-grey-c mr20 fr"><span className=" item-group-icon mr5"><i className="fa fa-eye"></i></span>{item.visited_count} 浏览</span>
+                  </p>
+                </div>
+              </li>
+            )
+          })
+        }
+        
+      </div>
+    )
+  }
+}
+export default CaseItem;
\ No newline at end of file
diff --git a/public/react/src/modules/moop_cases/CaseTags.js b/public/react/src/modules/moop_cases/CaseTags.js
new file mode 100644
index 000000000..0826b8645
--- /dev/null
+++ b/public/react/src/modules/moop_cases/CaseTags.js
@@ -0,0 +1,26 @@
+import React,{ Component } from "react";
+import './css/moopCases.css'
+import '../courses/css/Courses.css'
+
+class CaseTags extends Component{
+  constructor(props){
+    super(props);
+  }
+
+  render(){
+    let { tags } = this.props;
+    return(
+      <React.Fragment>
+        {
+          tags && tags.map((item,key)=>{
+            return(
+              <span className={item == "获奖案例" ? "edu-filter-btn fl cdefault edu-activity-red mt10 ml10" : "edu-filter-btn fl cdefault edu-activity-blue mt10 ml10"}>{item}</span>
+            )
+          })
+        }
+      </React.Fragment>
+      
+    )
+  }
+}
+export default CaseTags;
\ No newline at end of file
diff --git a/public/react/src/modules/moop_cases/css/moopCases.css b/public/react/src/modules/moop_cases/css/moopCases.css
new file mode 100644
index 000000000..95e539c7b
--- /dev/null
+++ b/public/react/src/modules/moop_cases/css/moopCases.css
@@ -0,0 +1,50 @@
+.winput-300-35{
+  width: 300px;
+  height: 35px;
+  padding: 5px;
+  box-sizing: border-box;
+}
+.library_nav li {
+  float: left;
+  cursor: pointer;
+  margin-right: 30px;
+  position: relative;
+  color: #05101A;
+  height: 40px;
+  line-height: 20px;
+  font-size: 16px;
+}
+.library_nav li.active a, .library_nav li:hover a{
+  color: #4cacff!important;
+}
+.library_list {
+  margin-bottom: 30px;
+}
+.library_list_item:hover {
+  box-shadow: 0px 4px 8px rgba(158,158,158,0.16);
+}
+.library_list_item {
+  background: #fff;
+  padding: 20px 30px;
+  margin-bottom: 30px;
+  display: flex;
+}
+.library_list_item .library_l_name {
+  max-width: 600px;
+  float: left;
+}
+
+.edu-activity-red {
+  background-color: #FC2B6A;
+  color: #fff!important;
+  cursor: pointer;
+  border: 1px solid #FC2B6A;
+  line-height: 17px;
+}
+.edu-activity-blue {
+  background-color: #4CACFF;
+  color: #fff!important;
+  cursor: pointer;
+  border: 1px solid #4CACFF;
+  line-height: 17px;
+}
\ No newline at end of file
diff --git a/public/react/src/modules/moop_cases/index.js b/public/react/src/modules/moop_cases/index.js
new file mode 100644
index 000000000..f35925388
--- /dev/null
+++ b/public/react/src/modules/moop_cases/index.js
@@ -0,0 +1,135 @@
+import React,{ Component } from "react";
+import { Input , Spin , Pagination } from "antd";
+import './css/moopCases.css'
+import '../courses/css/Courses.css'
+
+import { SnackbarHOC , ActionBtn , WordsBtn } from 'educoder';
+import { TPMIndexHOC } from '../tpm/TPMIndexHOC';
+import { CNotificationHOC } from '../courses/common/CNotificationHOC'
+
+import axios from 'axios'
+
+import NoneData from '../courses/coursesPublic/NoneData'
+
+import mainImg from '../../images/moop_cases/teach_ex.jpg'
+import CaseItem from './CaseItem'
+
+const Search = Input.Search;
+class Index extends Component{
+  constructor(props){
+    super(props);
+    this.state={
+      type:0,
+      search:undefined,
+      page:1,
+      pageSize:20,
+      libraries:undefined,
+      totalCount:undefined
+    }
+  }
+
+  componentDidMount = () =>{
+    let { type , search , page , pageSize } = this.state;
+    this.InitList(type,search,page,pageSize);
+  }
+
+  // 列表
+  InitList = (type,search,page,pageSize) =>{
+    let url = `/libraries.json`;
+    axios.get(url,{params:{
+      type:type == 0 ? undefined : "mine",
+      keyword:search,
+      page,
+      per_page:pageSize
+    }}).then((result)=>{
+      if(result){
+        this.setState({
+          libraries:result.data.libraries,
+          totalCount:result.data.count
+        })
+      }
+    }).catch((error)=>{
+      console.log(error);
+    })
+  }
+
+  // tab切换
+  changeType = (type) =>{
+    this.setState({
+      type,
+      page:1
+    })
+    let { search , page , pageSize } = this.state;
+    this.InitList(type,search,page,pageSize);
+  }
+
+  // 输入搜索内容
+  inputStudent=(e)=>{
+    this.setState({
+      search:e.target.value
+    })
+  }
+
+  // 搜索
+  searchInfo = () =>{
+    let { type , search , pageSize } = this.state;
+    this.InitList( type , search , 1 , pageSize );
+  }
+
+  // 切换分页
+  onChangePage =(pageNumber)=>{
+    this.setState({
+      page:pageNumber
+    })
+    let { type , search , pageSize } = this.state;
+    this.InitList( type , search , pageNumber , pageSize );
+  }
+
+  render(){
+    let { type , search ,libraries , totalCount ,pageSize ,page } = this.state;
+    return(
+      <div className="newMain">
+        <img src={mainImg} width="100%" />
+        <div className="educontent">
+          <div className="edu-back-white mb30 mt30">
+            <p className="padding20-30 clearfix bor-bottom-greyE">
+              <span className="font-18 fl color-grey-3">教学案例</span>
+              <ActionBtn style="colorBlue" className="fr" onClick={() => this.addQuestion(null, Q_TYPE_SINGLE)}>发布案例</ActionBtn>
+            </p>
+            <div className="clearfix pl30 pr30">
+              <ul className="fl library_nav mt20">
+                <li className={type == 0 ? "active" :""} onClick={()=>this.changeType(0)}>
+                  <a href="javascript:void(0)">全部</a>
+                </li>
+                <li className={type == 1 ? "active" :""} onClick={()=>this.changeType(1)}>
+                  <a href="javascript:void(0)">我的</a>
+                </li>
+              </ul>
+              <div className="fr mt16 mb16 searchView"style={{width:"300px"}}>
+                <Search
+                  value={search}
+                  placeholder="输入教学案例标题、作者、单位进行检索"
+                  onInput={this.inputStudent}
+                  onSearch={this.searchInfo}
+                ></Search>
+              </div>
+            </div>
+          </div>
+          {
+            libraries && libraries.length > 0 &&  <CaseItem {...this.props} {...this.state} libraries={libraries}></CaseItem>
+          }
+          {
+            libraries && libraries.length == 0 && <div className="mb50"><NoneData></NoneData></div>
+          }
+          {
+            totalCount && totalCount > pageSize &&
+            <div className="mb50 edu-txt-center clearfix">
+              <Pagination defaultCurrent={page} current={page} pageSize={pageSize} showQuickJumper onChange={this.onChangePage} total={totalCount}></Pagination>
+            </div>
+          }
+        </div>
+      </div>
+    )
+  }
+}
+export default CNotificationHOC() ( SnackbarHOC() ( TPMIndexHOC(Index) ));
\ No newline at end of file