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..9f2bb6c89
--- /dev/null
+++ b/public/react/src/modules/user/usersInfo/banks/BanksIndex.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+
+import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
+
+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 GtopicBanksAnswer = Loadable({
+	loader: () => import('./GtopicBanksAnswer'),
+	loading: Loading,
+})
+
+class BanksIndex extends Component{
+  constructor(props){
+    super(props);
+  }
+  render(){
+    return(
+      <div className="educontent">
+
+        <Switch {...this.props}>
+
+          <Route path='/banks/gtopic/:bankId/answer' 
+            render={
+              (props) => {
+                return (<GtopicBanksAnswer {...this.props} {...props} {...this.state} />)
+              }
+          }></Route>
+
+          <Route path='/banks/gtopic/:bankId' 
+            render={
+              (props) => {
+                return (<GtopicBanks {...this.props} {...props} {...this.state} />)
+              }
+          }></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/GtopicBanks.js b/public/react/src/modules/user/usersInfo/banks/GtopicBanks.js
new file mode 100644
index 000000000..c203d668c
--- /dev/null
+++ b/public/react/src/modules/user/usersInfo/banks/GtopicBanks.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+
+import { Breadcrumb } from 'antd';
+
+import "../usersInfo.css"
+import "../../../courses/css/members.css"
+import "../../../courses/css/Courses.css"
+
+import BanksMenu from './banksMenu'
+
+class GtopicBanks extends Component{
+  constructor(props){
+    super(props);
+  }
+  render(){
+    const menuArray=[
+      {content:'内容详情',to:'/banks/gtopic/1'},
+      {content:'参考答案',to:'/banks/gtopic/1/answer'}
+    ]
+    let {bankId}=this.props.match.params;
+    console.log(bankId)
+    return(
+      <div>
+        <Breadcrumb separator=">" className="breadcrumb">
+          <Breadcrumb.Item href="/users/innov/banks">题库</Breadcrumb.Item>
+          <Breadcrumb.Item>详情</Breadcrumb.Item>
+        </Breadcrumb>
+
+        <BanksMenu 
+        id={bankId}
+        tab={0}
+        title={'MySQL数据库编程开发实训（基础篇）'}
+        is_public={true}
+        menuArray={menuArray}
+        {...this.props}
+        ></BanksMenu>
+
+
+      </div>
+    )
+  }
+}
+export default GtopicBanks;
\ No newline at end of file
diff --git a/public/react/src/modules/user/usersInfo/banks/GtopicBanksAnswer.js b/public/react/src/modules/user/usersInfo/banks/GtopicBanksAnswer.js
new file mode 100644
index 000000000..a07bdfd02
--- /dev/null
+++ b/public/react/src/modules/user/usersInfo/banks/GtopicBanksAnswer.js
@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+
+import { Breadcrumb } from 'antd';
+
+import "../usersInfo.css"
+import "../../../courses/css/members.css"
+import "../../../courses/css/Courses.css"
+
+import BanksMenu from './banksMenu'
+
+class GtopicBanksAnswer extends Component{
+  constructor(props){
+    super(props);
+  }
+  render(){
+    const menuArray=[
+      {content:'内容详情',to:'/banks/gtopic/1'},
+      {content:'参考答案',to:'/banks/gtopic/1/answer'}
+    ]
+    return(
+      <div>
+        <Breadcrumb separator=">" className="breadcrumb">
+          <Breadcrumb.Item href="/users/innov/banks">题库</Breadcrumb.Item>
+          <Breadcrumb.Item>详情</Breadcrumb.Item>
+        </Breadcrumb>
+
+        <BanksMenu 
+        tab={1}
+        title={'MySQL数据库编程开发实训（基础篇）'}
+        is_public={true}
+        menuArray={menuArray}
+        {...this.props}
+        ></BanksMenu>
+
+
+      </div>
+    )
+  }
+}
+export default GtopicBanksAnswer;
\ 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..15cecf53b
--- /dev/null
+++ b/public/react/src/modules/user/usersInfo/banks/banksMenu.js
@@ -0,0 +1,47 @@
+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 { menuArray , title , is_public , tab } = this.props;
+    return(
+      <div>
+        <p className="clearfix mt20 mb20">
+          <span className="fl font-24 color-grey-3 task-hide lineh-30" style={{maxWidth:'800px'}}>{title}</span>
+          {
+            is_public && <span className="bank_is_public">公开</span>
+          }
+        </p>
+
+        <div className="clearfix bor-bottom-greyE edu-back-white" style={{padding:"2px 30px"}}>
+          <div className="task_menu_ul fl">
+            <Menu mode="horizontal" defaultSelectedKeys={`${tab}`}>
+              {
+                menuArray && 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>
+      </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 ab5dd6136..12df5b404 100644
--- a/public/react/src/modules/user/usersInfo/usersInfo.css
+++ b/public/react/src/modules/user/usersInfo/usersInfo.css
@@ -226,4 +226,27 @@
   content: '';
   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;
 }
\ No newline at end of file