diff --git a/public/react/src/App.js b/public/react/src/App.js
index b40af3e0b..0db6c5b1a 100644
--- a/public/react/src/App.js
+++ b/public/react/src/App.js
@@ -222,6 +222,12 @@ const InfosIndex = Loadable({
 	loader: () => import('./modules/user/usersInfo/InfosIndex'),
 	loading: Loading,
 })
+// 题库
+const BanksIndex = Loadable({
+	loader: () => import('./modules/user/usersInfo/banks/BanksIndex'),
+	loading: Loading,
+})
+
 
 // 教学案例
 const MoopCases =  Loadable({
@@ -365,6 +371,13 @@ class App extends Component {
 									}
 							}></Route>
 
+							<Route path="/banks"
+								render={
+									(props) => {										
+										return (<BanksIndex {...this.props} {...props} {...this.state} />)
+									}
+							}></Route>
+
 							<Route
 								path="/changepassword" component={EducoderLogin}
 							/>
diff --git a/public/react/src/modules/user/usersInfo/banks/BanksIndex.js b/public/react/src/modules/user/usersInfo/banks/BanksIndex.js
new file mode 100644
index 000000000..16e99438e
--- /dev/null
+++ b/public/react/src/modules/user/usersInfo/banks/BanksIndex.js
@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+
+import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
+
+import { Breadcrumb } from 'antd';
+import { SnackbarHOC } from 'educoder';
+import { TPMIndexHOC } from '../../../tpm/TPMIndexHOC';
+import { CNotificationHOC } from '../../../courses/common/CNotificationHOC'
+
+import Loadable from 'react-loadable';
+import Loading from '../../../../Loading';
+
+// 毕设选题
+const GtopicBanks = Loadable({
+	loader: () => import('./GtopicBanks'),
+	loading: Loading,
+})
+
+const BanksTabIndex = Loadable({
+	loader: () => import('./BanksTabIndex'),
+	loading: Loading,
+})
+
+class BanksIndex extends Component{
+  constructor(props){
+    super(props);
+    this.state={
+      crumbData:undefined
+    }
+  }
+
+  initPublic = (crumbData) =>{
+    this.setState({
+      crumbData
+    })
+  }
+
+  render(){
+    let { crumbData }=this.state
+    const common = {
+      initPublic:this.initPublic
+    }
+    return(
+      <div className="educontent">
+        {
+           crumbData &&
+           <Breadcrumb separator=">" className="breadcrumb">
+            <Breadcrumb.Item href="/users/innov/banks">题库</Breadcrumb.Item>
+            {
+              crumbData.crumbArray && crumbData.crumbArray.map((item,key)=>{
+                return(
+                  <Breadcrumb.Item href={item.to || ""}>{item.content}</Breadcrumb.Item>
+                )
+              })
+            }          
+          </Breadcrumb>
+        }
+        
+        <p className="clearfix mt20 mb20">
+          <span className="fl font-24 color-grey-3 task-hide lineh-30" style={{maxWidth:'800px'}}>{crumbData && crumbData.title}</span>
+          {
+            crumbData && crumbData.is_public && <span className="bank_is_public">公开</span>
+          }
+        </p>
+
+        <Switch {...this.props}>
+
+          <Route path='/banks/gtopic/:bankId' 
+            render={
+              (props) => {
+                return (<BanksTabIndex {...this.props} {...props} {...this.state} {...common}/>)
+              }
+          }></Route>
+          
+        </Switch>
+
+      </div>
+    )
+  }
+}
+export default CNotificationHOC() ( SnackbarHOC() ( TPMIndexHOC(BanksIndex) ));
\ No newline at end of file
diff --git a/public/react/src/modules/user/usersInfo/banks/BanksTabIndex.js b/public/react/src/modules/user/usersInfo/banks/BanksTabIndex.js
new file mode 100644
index 000000000..7ce6c100f
--- /dev/null
+++ b/public/react/src/modules/user/usersInfo/banks/BanksTabIndex.js
@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+
+import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
+
+import "../usersInfo.css"
+import "../../../courses/css/members.css"
+import "../../../courses/css/Courses.css"
+
+import Loadable from 'react-loadable';
+import Loading from '../../../../Loading';
+
+import BanksMenu from './banksMenu'
+// 毕设选题
+const GtopicBanks = Loadable({
+	loader: () => import('./GtopicBanks'),
+	loading: Loading,
+})
+
+class BanksTabIndex extends Component{
+  constructor(props){
+    super(props);
+    this.state={
+      banksMenu:undefined
+    }
+  }
+
+  initPublic = (crumbData,menuData) =>{
+    this.setState({
+      banksMenu:menuData
+    })
+    this.props.initPublic(crumbData);
+  }
+
+  render(){
+    let{
+      banksMenu      
+    }=this.state
+
+    const common={
+      initPublic:this.initPublic,
+    }
+    return(
+      <React.Fragment>
+        {
+          banksMenu && 
+          <BanksMenu 
+            banksMenu={banksMenu}
+            {...this.props}
+            {...this.state} 
+            {...common}
+          ></BanksMenu>
+        }
+        <Switch {...this.props}>
+
+
+          <Route path='/banks/gtopic/:bankId' 
+            render={
+              (props) => {
+                return (<GtopicBanks {...this.props} {...props} {...this.state} {...common} />)
+              }
+          }></Route>
+
+        </Switch>
+      </React.Fragment>
+    )
+  }
+}
+export default (BanksTabIndex);
\ No newline at end of file
diff --git a/public/react/src/modules/user/usersInfo/banks/GtopicBanks.js b/public/react/src/modules/user/usersInfo/banks/GtopicBanks.js
new file mode 100644
index 000000000..4d7aceb8b
--- /dev/null
+++ b/public/react/src/modules/user/usersInfo/banks/GtopicBanks.js
@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+
+
+class GtopicBanks extends Component{
+  constructor(props){
+    super(props);
+  }
+  componentDidMount = () =>{
+    let bankId = this.props.match.params.bankId
+    const crumbData={
+      title:'MySQL数据库编程开发实训（基础篇）111',
+      is_public:true,
+      crumbArray:[
+        {content:'详情'},
+      ]
+    }
+    const menuData={
+      tab:'0',//tab选中的index
+      menuArray:[//tab以及tab路由
+        {to:'/banks/gtopic/1',content:'内容详情'},
+        // {to:'/banks/gtopic/1/answer',content:'参考答案'},
+      ],
+      category:'topic',//毕设选题
+      id:bankId
+    }
+    this.props.initPublic(crumbData,menuData);
+  }
+  render(){
+    return(
+      <div>
+        
+      </div>
+    )
+  }
+}
+export default GtopicBanks;
\ No newline at end of file
diff --git a/public/react/src/modules/user/usersInfo/banks/banksMenu.js b/public/react/src/modules/user/usersInfo/banks/banksMenu.js
new file mode 100644
index 000000000..bcd79406b
--- /dev/null
+++ b/public/react/src/modules/user/usersInfo/banks/banksMenu.js
@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+
+import { Menu } from 'antd'
+import { Link } from 'react-router-dom'
+import { WordsBtn } from 'educoder'
+import "../usersInfo.css"
+import "../../../courses/css/Courses.css"
+import "../../../courses/css/busyWork.css"
+
+class BanksMenu extends Component{
+  constructor(props){
+    super(props);
+  }
+  render(){
+    let { banksMenu } = this.props;
+    return(
+      <div className="clearfix bor-bottom-greyE edu-back-white" style={{padding:"2px 30px"}}>
+        {
+          banksMenu &&
+          <div className="task_menu_ul fl">
+            <Menu mode="horizontal" selectedKeys={[`${banksMenu && banksMenu.tab}`]}>
+              {
+                banksMenu.menuArray && banksMenu.menuArray.map((item,key)=>{
+                  return(
+                    <Menu.Item key={key}><Link to={`${item.to}`}>{item.content}</Link></Menu.Item>
+                  )
+                })
+              }
+            </Menu>
+          </div>
+        }
+        
+        <span className="fr mt18">
+          <WordsBtn to={''} style="blue" className="ml20 font-16">删除</WordsBtn>
+          <WordsBtn to={''} style="blue" className="ml20 font-16">编辑</WordsBtn>
+          <WordsBtn to={''} style="blue" className="ml20 font-16">发送</WordsBtn>
+        </span>
+      </div>
+    )
+  }
+}
+export default BanksMenu;
\ No newline at end of file
diff --git a/public/react/src/modules/user/usersInfo/usersInfo.css b/public/react/src/modules/user/usersInfo/usersInfo.css
index 67951957b..23205be38 100644
--- a/public/react/src/modules/user/usersInfo/usersInfo.css
+++ b/public/react/src/modules/user/usersInfo/usersInfo.css
@@ -227,6 +227,29 @@
   left:0px;
   background: #4CACFF;
 }
+
+/* 题库相关 */
+.breadcrumb{
+  height: 18px;
+  line-height: 18px;
+  margin:10px 0px 0px;
+}
+.breadcrumb .ant-breadcrumb-separator{
+  margin:0px 2px!important;
+}
+.breadcrumb span.ant-breadcrumb-link{
+  cursor: default;
+}
+.bank_is_public{
+  background: #E4F2FE;
+  float: left;
+  height: 30px;
+  line-height: 30px;
+  padding:0px 20px;
+  color: #4CACFF;
+  font-size: 16px;
+  margin-left: 10px;
+}
 .topicsbox{
     width: 1200px;
     /*min-height: 216px;*/