repository iniy

.VSCodeCounter/2022-11-23_15-42-08/details.md

+# Details
+
+Date : 2022-11-23 15:42:08
+
+Directory /Users/xingguang/Desktop/yszh/ys/elegantDeep/src
+
+Total : 92 files,  17287 codes, 839 comments, 1418 blanks, all 19544 lines
+
+[Summary](results.md) / Details / [Diff Summary](diff.md) / [Diff Details](diff-details.md)
+
+## Files
+| filename | language | code | comment | blank | total |
+| :--- | :--- | ---: | ---: | ---: | ---: |
+| [src/App.css](/src/App.css) | CSS | 84 | 5 | 5 | 94 |
+| [src/App.js](/src/App.js) | JavaScript | 19 | 1 | 3 | 23 |
+| [src/App.test.js](/src/App.test.js) | JavaScript | 9 | 0 | 1 | 10 |
+| [src/assets/font/demo.css](/src/assets/font/demo.css) | CSS | 286 | 16 | 69 | 371 |
+| [src/assets/font/demo_fontclass.html](/src/assets/font/demo_fontclass.html) | HTML | 99 | 0 | 20 | 119 |
+| [src/assets/font/demo_symbol.html](/src/assets/font/demo_symbol.html) | HTML | 147 | 0 | 21 | 168 |
+| [src/assets/font/demo_unicode.html](/src/assets/font/demo_unicode.html) | HTML | 133 | 0 | 24 | 157 |
+| [src/assets/font/iconfont.css](/src/assets/font/iconfont.css) | CSS | 27 | 0 | 17 | 44 |
+| [src/assets/font/iconfont.js](/src/assets/font/iconfont.js) | JavaScript | 1 | 0 | 0 | 1 |
+| [src/assets/font/iconfont.svg](/src/assets/font/iconfont.svg) | XML | 36 | 3 | 34 | 73 |
+| [src/components/ContentMain/index.js](/src/components/ContentMain/index.js) | JavaScript | 50 | 11 | 8 | 69 |
+| [src/components/CustomBreadcrumb/index.js](/src/components/CustomBreadcrumb/index.js) | JavaScript | 16 | 0 | 1 | 17 |
+| [src/components/CustomMenu/index.js](/src/components/CustomMenu/index.js) | JavaScript | 98 | 9 | 8 | 115 |
+| [src/components/HeaderBar/index.js](/src/components/HeaderBar/index.js) | JavaScript | 89 | 6 | 6 | 101 |
+| [src/components/Loading/index.js](/src/components/Loading/index.js) | JavaScript | 16 | 0 | 1 | 17 |
+| [src/components/Loading/style.css](/src/components/Loading/style.css) | CSS | 76 | 0 | 9 | 85 |
+| [src/components/Loading2/data.json](/src/components/Loading2/data.json) | JSON | 1 | 0 | 0 | 1 |
+| [src/components/Loading2/index.js](/src/components/Loading2/index.js) | JavaScript | 29 | 0 | 1 | 30 |
+| [src/components/LogoTitlte/index.css](/src/components/LogoTitlte/index.css) | CSS | 13 | 0 | 0 | 13 |
+| [src/components/LogoTitlte/index.js](/src/components/LogoTitlte/index.js) | JavaScript | 11 | 0 | 2 | 13 |
+| [src/components/PrivateRoute/index.js](/src/components/PrivateRoute/index.js) | JavaScript | 14 | 0 | 2 | 16 |
+| [src/components/PromptBox/index.js](/src/components/PromptBox/index.js) | JavaScript | 39 | 0 | 1 | 40 |
+| [src/components/SiderNav/index.js](/src/components/SiderNav/index.js) | JavaScript | 44 | 77 | 6 | 127 |
+| [src/components/TypingCard/index.js](/src/components/TypingCard/index.js) | JavaScript | 28 | 0 | 2 | 30 |
+| [src/components/iframePdb/index.js](/src/components/iframePdb/index.js) | JavaScript | 31 | 12 | 6 | 49 |
+| [src/components/url/url.js](/src/components/url/url.js) | JavaScript | 0 | 0 | 1 | 1 |
+| [src/index.css](/src/index.css) | CSS | 42 | 5 | 1 | 48 |
+| [src/index.js](/src/index.js) | JavaScript | 22 | 1 | 1 | 24 |
+| [src/logo.svg](/src/logo.svg) | XML | 7 | 0 | 1 | 8 |
+| [src/registerServiceWorker.js](/src/registerServiceWorker.js) | JavaScript | 80 | 28 | 10 | 118 |
+| [src/routes/About/index.js](/src/routes/About/index.js) | JavaScript | 13 | 0 | 1 | 14 |
+| [src/routes/Home/IndicationDetails/index.css](/src/routes/Home/IndicationDetails/index.css) | CSS | 8 | 0 | 0 | 8 |
+| [src/routes/Home/IndicationDetails/index.js](/src/routes/Home/IndicationDetails/index.js) | JavaScript | 140 | 26 | 26 | 192 |
+| [src/routes/Home/LigandDetails/index.css](/src/routes/Home/LigandDetails/index.css) | CSS | 88 | 0 | 7 | 95 |
+| [src/routes/Home/LigandDetails/index.js](/src/routes/Home/LigandDetails/index.js) | JavaScript | 483 | 9 | 13 | 505 |
+| [src/routes/Home/MutationDetails/index.css](/src/routes/Home/MutationDetails/index.css) | CSS | 171 | 0 | 27 | 198 |
+| [src/routes/Home/MutationDetails/index.js](/src/routes/Home/MutationDetails/index.js) | JavaScript | 963 | 105 | 28 | 1,096 |
+| [src/routes/Home/SearchDetails/index.css](/src/routes/Home/SearchDetails/index.css) | CSS | 97 | 0 | 4 | 101 |
+| [src/routes/Home/SearchDetails/index.js](/src/routes/Home/SearchDetails/index.js) | JavaScript | 1,304 | 54 | 24 | 1,382 |
+| [src/routes/Home/SearchList/index.css](/src/routes/Home/SearchList/index.css) | CSS | 57 | 0 | 1 | 58 |
+| [src/routes/Home/SearchList/index.js](/src/routes/Home/SearchList/index.js) | JavaScript | 456 | 12 | 22 | 490 |
+| [src/routes/Home/TargetDetails/index.css](/src/routes/Home/TargetDetails/index.css) | CSS | 170 | 0 | 27 | 197 |
+| [src/routes/Home/TargetDetails/index.js](/src/routes/Home/TargetDetails/index.js) | JavaScript | 1,597 | 30 | 42 | 1,669 |
+| [src/routes/Home/dockingUploadDetails/index.js](/src/routes/Home/dockingUploadDetails/index.js) | JavaScript | 12 | 0 | 5 | 17 |
+| [src/routes/Home/index.js](/src/routes/Home/index.js) | JavaScript | 797 | 48 | 14 | 859 |
+| [src/routes/Home/style.css](/src/routes/Home/style.css) | CSS | 39 | 1 | 4 | 44 |
+| [src/routes/Index/index.js](/src/routes/Index/index.js) | JavaScript | 40 | 2 | 4 | 46 |
+| [src/routes/Kinase/LigandDetails/index.css](/src/routes/Kinase/LigandDetails/index.css) | CSS | 83 | 0 | 16 | 99 |
+| [src/routes/Kinase/LigandDetails/index.js](/src/routes/Kinase/LigandDetails/index.js) | JavaScript | 668 | 5 | 97 | 770 |
+| [src/routes/Kinase/SearchDetails/index.css](/src/routes/Kinase/SearchDetails/index.css) | CSS | 83 | 0 | 17 | 100 |
+| [src/routes/Kinase/SearchDetails/index.js](/src/routes/Kinase/SearchDetails/index.js) | JavaScript | 723 | 9 | 99 | 831 |
+| [src/routes/Kinase/SearchList/index.css](/src/routes/Kinase/SearchList/index.css) | CSS | 56 | 0 | 9 | 65 |
+| [src/routes/Kinase/SearchList/index.js](/src/routes/Kinase/SearchList/index.js) | JavaScript | 357 | 12 | 66 | 435 |
+| [src/routes/Kinase/TargetDetails/index.css](/src/routes/Kinase/TargetDetails/index.css) | CSS | 145 | 0 | 35 | 180 |
+| [src/routes/Kinase/TargetDetails/index.js](/src/routes/Kinase/TargetDetails/index.js) | JavaScript | 551 | 27 | 83 | 661 |
+| [src/routes/Kinase/index.js](/src/routes/Kinase/index.js) | JavaScript | 676 | 59 | 77 | 812 |
+| [src/routes/Kinase/style.css](/src/routes/Kinase/style.css) | CSS | 39 | 1 | 4 | 44 |
+| [src/routes/KinaseSearch/index.js](/src/routes/KinaseSearch/index.js) | JavaScript | 12 | 0 | 5 | 17 |
+| [src/routes/KnowledgeMap/index.css](/src/routes/KnowledgeMap/index.css) | CSS | 24 | 0 | 3 | 27 |
+| [src/routes/KnowledgeMap/index.js](/src/routes/KnowledgeMap/index.js) | JavaScript | 12 | 0 | 5 | 17 |
+| [src/routes/Login/LoginForm.js](/src/routes/Login/LoginForm.js) | JavaScript | 103 | 101 | 11 | 215 |
+| [src/routes/Login/RegisterForm.js](/src/routes/Login/RegisterForm.js) | JavaScript | 132 | 1 | 6 | 139 |
+| [src/routes/Login/index.js](/src/routes/Login/index.js) | JavaScript | 140 | 15 | 16 | 171 |
+| [src/routes/Login/style.css](/src/routes/Login/style.css) | CSS | 143 | 6 | 5 | 154 |
+| [src/routes/Login2/index.js](/src/routes/Login2/index.js) | JavaScript | 334 | 3 | 16 | 353 |
+| [src/routes/Login2/style.css](/src/routes/Login2/style.css) | CSS | 153 | 1 | 4 | 158 |
+| [src/routes/MolecularSearch/index.css](/src/routes/MolecularSearch/index.css) | CSS | 12 | 0 | 5 | 17 |
+| [src/routes/MolecularSearch/index.js](/src/routes/MolecularSearch/index.js) | JavaScript | 12 | 0 | 5 | 17 |
+| [src/routes/drugbank/IndicationDetails/index.css](/src/routes/drugbank/IndicationDetails/index.css) | CSS | 8 | 0 | 0 | 8 |
+| [src/routes/drugbank/IndicationDetails/index.js](/src/routes/drugbank/IndicationDetails/index.js) | JavaScript | 203 | 11 | 7 | 221 |
+| [src/routes/drugbank/LigandDetails/index.css](/src/routes/drugbank/LigandDetails/index.css) | CSS | 83 | 0 | 16 | 99 |
+| [src/routes/drugbank/LigandDetails/index.js](/src/routes/drugbank/LigandDetails/index.js) | JavaScript | 809 | 5 | 19 | 833 |
+| [src/routes/drugbank/SearchDetails/index.css](/src/routes/drugbank/SearchDetails/index.css) | CSS | 83 | 0 | 17 | 100 |
+| [src/routes/drugbank/SearchDetails/index.js](/src/routes/drugbank/SearchDetails/index.js) | JavaScript | 1,009 | 2 | 22 | 1,033 |
+| [src/routes/drugbank/SearchList/index.css](/src/routes/drugbank/SearchList/index.css) | CSS | 56 | 0 | 9 | 65 |
+| [src/routes/drugbank/SearchList/index.js](/src/routes/drugbank/SearchList/index.js) | JavaScript | 421 | 18 | 19 | 458 |
+| [src/routes/drugbank/TargetDetails/index.css](/src/routes/drugbank/TargetDetails/index.css) | CSS | 145 | 0 | 35 | 180 |
+| [src/routes/drugbank/TargetDetails/index.js](/src/routes/drugbank/TargetDetails/index.js) | JavaScript | 771 | 4 | 27 | 802 |
+| [src/routes/drugbank/index.js](/src/routes/drugbank/index.js) | JavaScript | 556 | 44 | 70 | 670 |
+| [src/routes/drugbank/style.css](/src/routes/drugbank/style.css) | CSS | 39 | 1 | 4 | 44 |
+| [src/routes/kg/index.js](/src/routes/kg/index.js) | JavaScript | 12 | 0 | 5 | 17 |
+| [src/store/appStore.js](/src/store/appStore.js) | JavaScript | 24 | 0 | 3 | 27 |
+| [src/store/index.js](/src/store/index.js) | JavaScript | 7 | 2 | 0 | 9 |
+| [src/utils/AsyncComponent.js](/src/utils/AsyncComponent.js) | JavaScript | 25 | 0 | 6 | 31 |
+| [src/utils/BGParticle.js](/src/utils/BGParticle.js) | JavaScript | 152 | 3 | 16 | 171 |
+| [src/utils/LoadableComponent.js](/src/utils/LoadableComponent.js) | JavaScript | 26 | 1 | 4 | 31 |
+| [src/utils/Session.js](/src/utils/Session.js) | JavaScript | 31 | 0 | 5 | 36 |
+| [src/utils/gVerify.js](/src/utils/gVerify.js) | JavaScript | 117 | 12 | 13 | 142 |
+| [src/utils/request.js](/src/utils/request.js) | JavaScript | 25 | 0 | 3 | 28 |
+| [src/utils/typing.js](/src/utils/typing.js) | JavaScript | 67 | 3 | 6 | 76 |
+| [src/utils/url.js](/src/utils/url.js) | JavaScript | 134 | 16 | 12 | 162 |
+| [src/utils/utils.js](/src/utils/utils.js) | JavaScript | 44 | 16 | 6 | 66 |
+
+[Summary](results.md) / Details / [Diff Summary](diff.md) / [Diff Details](diff-details.md)
\ No newline at end of file

.VSCodeCounter/2022-11-23_15-42-08/diff-details.md

+# Diff Details
+
+Date : 2022-11-23 15:42:08
+
+Directory /Users/xingguang/Desktop/yszh/ys/elegantDeep/src
+
+Total : 0 files,  0 codes, 0 comments, 0 blanks, all 0 lines
+
+[Summary](results.md) / [Details](details.md) / [Diff Summary](diff.md) / Diff Details
+
+## Files
+| filename | language | code | comment | blank | total |
+| :--- | :--- | ---: | ---: | ---: | ---: |
+
+[Summary](results.md) / [Details](details.md) / [Diff Summary](diff.md) / Diff Details
\ No newline at end of file

.VSCodeCounter/2022-11-23_15-42-08/diff.csv

+"filename", "language", "", "comment", "blank", "total"
+"Total", "-", , 0, 0, 0
\ No newline at end of file

.VSCodeCounter/2022-11-23_15-42-08/diff.md

+# Diff Summary
+
+Date : 2022-11-23 15:42:08
+
+Directory /Users/xingguang/Desktop/yszh/ys/elegantDeep/src
+
+Total : 0 files,  0 codes, 0 comments, 0 blanks, all 0 lines
+
+[Summary](results.md) / [Details](details.md) / Diff Summary / [Diff Details](diff-details.md)
+
+## Languages
+| language | files | code | comment | blank | total |
+| :--- | ---: | ---: | ---: | ---: | ---: |
+
+## Directories
+| path | files | code | comment | blank | total |
+| :--- | ---: | ---: | ---: | ---: | ---: |
+
+[Summary](results.md) / [Details](details.md) / Diff Summary / [Diff Details](diff-details.md)
\ No newline at end of file

.VSCodeCounter/2022-11-23_15-42-08/diff.txt

+Date : 2022-11-23 15:42:08
+Directory : /Users/xingguang/Desktop/yszh/ys/elegantDeep/src
+Total : 0 files,  0 codes, 0 comments, 0 blanks, all 0 lines
+
+Languages
++----------+------------+------------+------------+------------+------------+
+| language | files      | code       | comment    | blank      | total      |
++----------+------------+------------+------------+------------+------------+
++----------+------------+------------+------------+------------+------------+
+
+Directories
++------+------------+------------+------------+------------+------------+
+| path | files      | code       | comment    | blank      | total      |
++------+------------+------------+------------+------------+------------+
++------+------------+------------+------------+------------+------------+
+
+Files
++----------+----------+------------+------------+------------+------------+
+| filename | language | code       | comment    | blank      | total      |
++----------+----------+------------+------------+------------+------------+
+| Total    |          |          0 |          0 |          0 |          0 |
++----------+----------+------------+------------+------------+------------+
\ No newline at end of file

.VSCodeCounter/2022-11-23_15-42-08/results.md

+# Summary
+
+Date : 2022-11-23 15:42:08
+
+Directory /Users/xingguang/Desktop/yszh/ys/elegantDeep/src
+
+Total : 92 files,  17287 codes, 839 comments, 1418 blanks, all 19544 lines
+
+Summary / [Details](details.md) / [Diff Summary](diff.md) / [Diff Details](diff-details.md)
+
+## Languages
+| language | files | code | comment | blank | total |
+| :--- | ---: | ---: | ---: | ---: | ---: |
+| JavaScript | 58 | 14,554 | 800 | 968 | 16,322 |
+| CSS | 28 | 2,310 | 36 | 350 | 2,696 |
+| HTML | 3 | 379 | 0 | 65 | 444 |
+| XML | 2 | 43 | 3 | 35 | 81 |
+| JSON | 1 | 1 | 0 | 0 | 1 |
+
+## Directories
+| path | files | code | comment | blank | total |
+| :--- | ---: | ---: | ---: | ---: | ---: |
+| . | 92 | 17,287 | 839 | 1,418 | 19,544 |
+| assets | 7 | 729 | 19 | 185 | 933 |
+| assets/font | 7 | 729 | 19 | 185 | 933 |
+| components | 16 | 555 | 115 | 54 | 724 |
+| components/ContentMain | 1 | 50 | 11 | 8 | 69 |
+| components/CustomBreadcrumb | 1 | 16 | 0 | 1 | 17 |
+| components/CustomMenu | 1 | 98 | 9 | 8 | 115 |
+| components/HeaderBar | 1 | 89 | 6 | 6 | 101 |
+| components/Loading | 2 | 92 | 0 | 10 | 102 |
+| components/Loading2 | 2 | 30 | 0 | 1 | 31 |
+| components/LogoTitlte | 2 | 24 | 0 | 2 | 26 |
+| components/PrivateRoute | 1 | 14 | 0 | 2 | 16 |
+| components/PromptBox | 1 | 39 | 0 | 1 | 40 |
+| components/SiderNav | 1 | 44 | 77 | 6 | 127 |
+| components/TypingCard | 1 | 28 | 0 | 2 | 30 |
+| components/iframePdb | 1 | 31 | 12 | 6 | 49 |
+| components/url | 1 | 0 | 0 | 1 | 1 |
+| routes | 51 | 15,088 | 612 | 1,083 | 16,783 |
+| routes/About | 1 | 13 | 0 | 1 | 14 |
+| routes/Home | 15 | 6,382 | 285 | 244 | 6,911 |
+| routes/Home/IndicationDetails | 2 | 148 | 26 | 26 | 200 |
+| routes/Home/LigandDetails | 2 | 571 | 9 | 20 | 600 |
+| routes/Home/MutationDetails | 2 | 1,134 | 105 | 55 | 1,294 |
+| routes/Home/SearchDetails | 2 | 1,401 | 54 | 28 | 1,483 |
+| routes/Home/SearchList | 2 | 513 | 12 | 23 | 548 |
+| routes/Home/TargetDetails | 2 | 1,767 | 30 | 69 | 1,866 |
+| routes/Home/dockingUploadDetails | 1 | 12 | 0 | 5 | 17 |
+| routes/Index | 1 | 40 | 2 | 4 | 46 |
+| routes/Kinase | 10 | 3,381 | 113 | 503 | 3,997 |
+| routes/Kinase/LigandDetails | 2 | 751 | 5 | 113 | 869 |
+| routes/Kinase/SearchDetails | 2 | 806 | 9 | 116 | 931 |
+| routes/Kinase/SearchList | 2 | 413 | 12 | 75 | 500 |
+| routes/Kinase/TargetDetails | 2 | 696 | 27 | 118 | 841 |
+| routes/KinaseSearch | 1 | 12 | 0 | 5 | 17 |
+| routes/KnowledgeMap | 2 | 36 | 0 | 8 | 44 |
+| routes/Login | 4 | 518 | 123 | 38 | 679 |
+| routes/Login2 | 2 | 487 | 4 | 20 | 511 |
+| routes/MolecularSearch | 2 | 24 | 0 | 10 | 34 |
+| routes/drugbank | 12 | 4,183 | 85 | 245 | 4,513 |
+| routes/drugbank/IndicationDetails | 2 | 211 | 11 | 7 | 229 |
+| routes/drugbank/LigandDetails | 2 | 892 | 5 | 35 | 932 |
+| routes/drugbank/SearchDetails | 2 | 1,092 | 2 | 39 | 1,133 |
+| routes/drugbank/SearchList | 2 | 477 | 18 | 28 | 523 |
+| routes/drugbank/TargetDetails | 2 | 916 | 4 | 62 | 982 |
+| routes/kg | 1 | 12 | 0 | 5 | 17 |
+| store | 2 | 31 | 2 | 3 | 36 |
+| utils | 9 | 621 | 51 | 71 | 743 |
+
+Summary / [Details](details.md) / [Diff Summary](diff.md) / [Diff Details](diff-details.md)
\ No newline at end of file

.babelrc

+{
+  "presets":["react-app"],
+  "plugins": [
+    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }],
+    ["transform-decorators-legacy"]
+  ]
+}
\ No newline at end of file

.gitignore

+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+/.idea
+/.vscode
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

-GPCR 
\ No newline at end of file

config/env.js

+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+
+// Make sure that including paths.js after env.js will read .env variables.
+delete require.cache[require.resolve('./paths')];
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  throw new Error(
+    'The NODE_ENV environment variable is required but was not specified.'
+  );
+}
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+var dotenvFiles = [
+  `${paths.dotenv}.${NODE_ENV}.local`,
+  `${paths.dotenv}.${NODE_ENV}`,
+  // Don't include `.env.local` for `test` environment
+  // since normally you expect tests to produce the same
+  // results for everyone
+  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+  paths.dotenv,
+].filter(Boolean);
+
+// Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.  Variable expansion is supported in .env files.
+// https://github.com/motdotla/dotenv
+// https://github.com/motdotla/dotenv-expand
+dotenvFiles.forEach(dotenvFile => {
+  if (fs.existsSync(dotenvFile)) {
+    require('dotenv-expand')(
+      require('dotenv').config({
+        path: dotenvFile,
+      })
+    );
+  }
+});
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// https://github.com/facebookincubator/create-react-app/issues/253.
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
+// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
+// We also resolve them to make sure all tools using them work consistently.
+const appDirectory = fs.realpathSync(process.cwd());
+process.env.NODE_PATH = (process.env.NODE_PATH || '')
+  .split(path.delimiter)
+  .filter(folder => folder && !path.isAbsolute(folder))
+  .map(folder => path.resolve(appDirectory, folder))
+  .join(path.delimiter);
+
+// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in Webpack configuration.
+const REACT_APP = /^REACT_APP_/i;
+
+function getClientEnvironment(publicUrl) {
+  const raw = Object.keys(process.env)
+    .filter(key => REACT_APP.test(key))
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key];
+        return env;
+      },
+      {
+        // Useful for determining whether we’re running in production mode.
+        // Most importantly, it switches React into the correct mode.
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        // Useful for resolving the correct path to static assets in `public`.
+        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+        // This should only be used as an escape hatch. Normally you would put
+        // images into the `src` and `import` them in code to get their paths.
+        PUBLIC_URL: publicUrl,
+      }
+    );
+  // Stringify all values so we can feed into Webpack DefinePlugin
+  const stringified = {
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key]);
+      return env;
+    }, {}),
+  };
+
+  return { raw, stringified };
+}
+
+module.exports = getClientEnvironment;

config/jest/cssTransform.js

+'use strict';
+
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process() {
+    return 'module.exports = {};';
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return 'cssTransform';
+  },
+};

config/jest/fileTransform.js

+'use strict';
+
+const path = require('path');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process(src, filename) {
+    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
+  },
+};

config/paths.js

+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+const url = require('url');
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebookincubator/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+
+const envPublicUrl = process.env.PUBLIC_URL;
+
+function ensureSlash(path, needsSlash) {
+  const hasSlash = path.endsWith('/');
+  if (hasSlash && !needsSlash) {
+    return path.substr(path, path.length - 1);
+  } else if (!hasSlash && needsSlash) {
+    return `${path}/`;
+  } else {
+    return path;
+  }
+}
+
+const getPublicUrl = appPackageJson =>
+  envPublicUrl || require(appPackageJson).homepage;
+
+// We use `PUBLIC_URL` environment variable or "homepage" field to infer
+// "public path" at which the app is served.
+// Webpack needs to know it to put the right <script> hrefs into HTML even in
+// single-page apps that may serve index.html for nested URLs like /todos/42.
+// We can't use a relative path in HTML because we don't want to load something
+// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
+function getServedPath(appPackageJson) {
+  const publicUrl = getPublicUrl(appPackageJson);
+  const servedUrl =
+    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
+  return ensureSlash(servedUrl, true);
+}
+
+// config after eject: we're in ./config/
+module.exports = {
+  dotenv: resolveApp('.env'),
+  appBuild: resolveApp('build'),
+  appPublic: resolveApp('public'),
+  appHtml: resolveApp('public/index.html'),
+  appIndexJs: resolveApp('src/index.js'),
+  appPackageJson: resolveApp('package.json'),
+  appSrc: resolveApp('src'),
+  yarnLockFile: resolveApp('yarn.lock'),
+  testsSetup: resolveApp('src/setupTests.js'),
+  appNodeModules: resolveApp('node_modules'),
+  publicUrl: getPublicUrl(resolveApp('package.json')),
+  servedPath: getServedPath(resolveApp('package.json')),
+};

config/polyfills.js

+'use strict';
+
+if (typeof Promise === 'undefined') {
+  // Rejection tracking prevents a components issue where React gets into an
+  // inconsistent state due to an error, but it gets swallowed by a Promise,
+  // and the user has no idea what causes React's erratic future behavior.
+  require('promise/lib/rejection-tracking').enable();
+  window.Promise = require('promise/lib/es6-extensions.js');
+}
+
+// fetch() polyfill for making API calls.
+require('whatwg-fetch');
+
+// Object.assign() is commonly used with React.
+// It will use the native implementation if it's present and isn't buggy.
+Object.assign = require('object-assign');
+
+// In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
+// We don't polyfill it in the browser--this is user's responsibility.
+if (process.env.NODE_ENV === 'test') {
+  require('raf').polyfill(global);
+}

config/webpackDevServer.config.js

+'use strict';
+
+const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
+const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
+const ignoredFiles = require('react-dev-utils/ignoredFiles');
+const config = require('./webpack.config.dev');
+const paths = require('./paths');
+
+const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+const host = process.env.HOST || '0.0.0.0';
+
+module.exports = function(proxy, allowedHost) {
+  return {
+    // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
+    // websites from potentially accessing local content through DNS rebinding:
+    // https://github.com/webpack/webpack-dev-server/issues/887
+    // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
+    // However, it made several existing use cases such as development in cloud
+    // environment or subdomains in development significantly more complicated:
+    // https://github.com/facebookincubator/create-react-app/issues/2271
+    // https://github.com/facebookincubator/create-react-app/issues/2233
+    // While we're investigating better solutions, for now we will take a
+    // compromise. Since our WDS configuration only serves files in the `public`
+    // folder we won't consider accessing them a vulnerability. However, if you
+    // use the `proxy` feature, it gets more dangerous because it can expose
+    // remote code execution vulnerabilities in backends like Django and Rails.
+    // So we will disable the host check normally, but enable it if you have
+    // specified the `proxy` setting. Finally, we let you override it if you
+    // really know what you're doing with a special environment variable.
+    disableHostCheck:
+      !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
+    // Enable gzip compression of generated files.
+    compress: true,
+    // Silence WebpackDevServer's own logs since they're generally not useful.
+    // It will still show compile warnings and errors with this setting.
+    clientLogLevel: 'none',
+    // By default WebpackDevServer serves physical files from current directory
+    // in addition to all the virtual build products that it serves from memory.
+    // This is confusing because those files won’t automatically be available in
+    // production build folder unless we copy them. However, copying the whole
+    // project directory is dangerous because we may expose sensitive files.
+    // Instead, we establish a convention that only files in `public` directory
+    // get served. Our build script will copy `public` into the `build` folder.
+    // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
+    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
+    // Note that we only recommend to use `public` folder as an escape hatch
+    // for files like `favicon.ico`, `manifest.json`, and libraries that are
+    // for some reason broken when imported through Webpack. If you just want to
+    // use an image, put it in `src` and `import` it from JavaScript instead.
+    contentBase: paths.appPublic,
+    // By default files from `contentBase` will not trigger a page reload.
+    watchContentBase: true,
+    // Enable hot reloading server. It will provide /sockjs-node/ endpoint
+    // for the WebpackDevServer client so it can learn when the files were
+    // updated. The WebpackDevServer client is included as an entry point
+    // in the Webpack development configuration. Note that only changes
+    // to CSS are currently hot reloaded. JS changes will refresh the browser.
+    hot: true,
+    // It is important to tell WebpackDevServer to use the same "root" path
+    // as we specified in the config. In development, we always serve from /.
+    publicPath: config.output.publicPath,
+    // WebpackDevServer is noisy by default so we emit custom message instead
+    // by listening to the compiler events with `compiler.plugin` calls above.
+    quiet: true,
+    // Reportedly, this avoids CPU overload on some systems.
+    // https://github.com/facebookincubator/create-react-app/issues/293
+    // src/node_modules is not ignored to support absolute imports
+    // https://github.com/facebookincubator/create-react-app/issues/1065
+    watchOptions: {
+      ignored: ignoredFiles(paths.appSrc),
+    },
+    // Enable HTTPS if the HTTPS environment variable is set to 'true'
+    https: protocol === 'https',
+    host: host,
+    overlay: false,
+    historyApiFallback: {
+      // Paths with dots should still use the history fallback.
+      // See https://github.com/facebookincubator/create-react-app/issues/387.
+      disableDotRule: true,
+    },
+    public: allowedHost,
+    proxy,
+    before(app) {
+      // This lets us open files from the runtime error overlay.
+      app.use(errorOverlayMiddleware());
+      // This service worker file is effectively a 'no-op' that will reset any
+      // previous service worker registered for the same host:port combination.
+      // We do this in development to avoid hitting the production cache if
+      // it used the same host and port.
+      // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
+      app.use(noopServiceWorkerMiddleware());
+    },
+  };
+};

package.json

+{
+  "name": "syzh",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@antv/data-set": "^0.8.9",
+    "@babel/polyfill": "^7.2.5",
+    "animate.css": "^3.6.1",
+    "antd": "^3.6.2",
+    "autoprefixer": "7.1.6",
+    "axios": "^0.18.0",
+    "babel-core": "6.26.0",
+    "babel-eslint": "7.2.3",
+    "babel-jest": "20.0.3",
+    "babel-loader": "7.1.2",
+    "babel-preset-react-app": "^3.1.1",
+    "babel-runtime": "6.26.0",
+    "bizcharts": "^3.1.10",
+    "bodymovin": "^4.13.0",
+    "case-sensitive-paths-webpack-plugin": "2.1.1",
+    "chalk": "1.1.3",
+    "css-loader": "0.28.7",
+    "dotenv": "4.0.0",
+    "dotenv-expand": "4.2.0",
+    "draft-js": "^0.10.5",
+    "draftjs-to-html": "^0.8.4",
+    "draftjs-to-markdown": "^0.5.1",
+    "eslint": "4.10.0",
+    "eslint-config-react-app": "^2.1.0",
+    "eslint-loader": "1.9.0",
+    "eslint-plugin-flowtype": "2.39.1",
+    "eslint-plugin-import": "2.8.0",
+    "eslint-plugin-jsx-a11y": "5.1.1",
+    "eslint-plugin-react": "7.4.0",
+    "extract-text-webpack-plugin": "3.0.2",
+    "file-loader": "1.1.5",
+    "fs-extra": "3.0.1",
+    "gsap": "^2.0.1",
+    "html-to-draftjs": "^1.4.0",
+    "html-webpack-plugin": "2.29.0",
+    "js-md5": "^0.7.3",
+    "jsme-react": "^0.0.9",
+    "mobx": "^5.0.3",
+    "mobx-react": "^5.2.3",
+    "molstar-react": "^0.5.0",
+    "nprogress": "^0.2.0",
+    "object-assign": "4.1.1",
+    "postcss-flexbugs-fixes": "3.2.0",
+    "postcss-loader": "2.0.8",
+    "promise": "8.0.1",
+    "raf": "3.4.0",
+    "rc-animate": "^3.1.1",
+    "react": "^18.1.0",
+    "react-dev-utils": "^5.0.1",
+    "react-dom": "^16.4.1",
+    "react-draft-wysiwyg": "^1.12.13",
+    "react-loadable": "^5.4.0",
+    "react-router-dom": "^4.3.1",
+    "react-scripts": "^3.4.4",
+    "resolve": "1.6.0",
+    "screenfull": "^3.3.2",
+    "shufflejs": "^5.1.2",
+    "style-loader": "0.19.0",
+    "sw-precache-webpack-plugin": "0.11.4",
+    "url-loader": "0.6.2",
+    "webpack": "3.8.1",
+    "webpack-dev-server": "2.9.4",
+    "webpack-manifest-plugin": "1.3.2",
+    "whatwg-fetch": "2.0.3"
+  },
+  "scripts": {
+    "start": "node scripts/start.js",
+    "build": "node scripts/build.js",
+    "test": "node scripts/test.js --env=jsdom"
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,mjs}"
+    ],
+    "setupFiles": [
+      "<rootDir>/config/polyfills.js"
+    ],
+    "testMatch": [
+      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
+      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
+    ],
+    "testEnvironment": "node",
+    "testURL": "http://localhost",
+    "transform": {
+      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
+      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+    },
+    "transformIgnorePatterns": [
+      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
+    ],
+    "moduleNameMapper": {
+      "^react-native$": "react-native-web"
+    },
+    "moduleFileExtensions": [
+      "web.js",
+      "js",
+      "json",
+      "web.jsx",
+      "jsx",
+      "node",
+      "mjs"
+    ]
+  },
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "devDependencies": {
+    "babel-plugin-import": "^1.8.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.5",
+    "qs": "^6.10.3"
+  },
+  "homepage": "."
+}
\ No newline at end of file

public/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <title>雅深智慧</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+  </body>
+</html>

public/manifest.json

+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

scripts/build.js

+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'production';
+process.env.NODE_ENV = 'production';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+const path = require('path');
+const chalk = require('chalk');
+const fs = require('fs-extra');
+const webpack = require('webpack');
+const config = require('../config/webpack.config.prod');
+const paths = require('../config/paths');
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
+const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
+const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
+const printBuildError = require('react-dev-utils/printBuildError');
+
+const measureFileSizesBeforeBuild =
+  FileSizeReporter.measureFileSizesBeforeBuild;
+const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
+const useYarn = fs.existsSync(paths.yarnLockFile);
+
+// These sizes are pretty large. We'll warn for bundles exceeding them.
+const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
+const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
+
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+  process.exit(1);
+}
+
+// First, read the current file sizes in build directory.
+// This lets us display how much they changed later.
+measureFileSizesBeforeBuild(paths.appBuild)
+  .then(previousFileSizes => {
+    // Remove all content but keep the directory so that
+    // if you're in it, you don't end up in Trash
+    fs.emptyDirSync(paths.appBuild);
+    // Merge with the public folder
+    copyPublicFolder();
+    // Start the webpack build
+    return build(previousFileSizes);
+  })
+  .then(
+    ({ stats, previousFileSizes, warnings }) => {
+      if (warnings.length) {
+        console.log(chalk.yellow('Compiled with warnings.\n'));
+        console.log(warnings.join('\n\n'));
+        console.log(
+          '\nSearch for the ' +
+            chalk.underline(chalk.yellow('keywords')) +
+            ' to learn more about each warning.'
+        );
+        console.log(
+          'To ignore, add ' +
+            chalk.cyan('// eslint-disable-next-line') +
+            ' to the line before.\n'
+        );
+      } else {
+        console.log(chalk.green('Compiled successfully.\n'));
+      }
+
+      console.log('File sizes after gzip:\n');
+      printFileSizesAfterBuild(
+        stats,
+        previousFileSizes,
+        paths.appBuild,
+        WARN_AFTER_BUNDLE_GZIP_SIZE,
+        WARN_AFTER_CHUNK_GZIP_SIZE
+      );
+      console.log();
+
+      const appPackage = require(paths.appPackageJson);
+      const publicUrl = paths.publicUrl;
+      const publicPath = config.output.publicPath;
+      const buildFolder = path.relative(process.cwd(), paths.appBuild);
+      printHostingInstructions(
+        appPackage,
+        publicUrl,
+        publicPath,
+        buildFolder,
+        useYarn
+      );
+    },
+    err => {
+      console.log(chalk.red('Failed to compile.\n'));
+      printBuildError(err);
+      process.exit(1);
+    }
+  );
+
+// Create the production build and print the deployment instructions.
+function build(previousFileSizes) {
+  console.log('Creating an optimized production build...');
+
+  let compiler = webpack(config);
+  return new Promise((resolve, reject) => {
+    compiler.run((err, stats) => {
+      if (err) {
+        return reject(err);
+      }
+      const messages = formatWebpackMessages(stats.toJson({}, true));
+      if (messages.errors.length) {
+        // Only keep the first error. Others are often indicative
+        // of the same problem, but confuse the reader with noise.
+        if (messages.errors.length > 1) {
+          messages.errors.length = 1;
+        }
+        return reject(new Error(messages.errors.join('\n\n')));
+      }
+      if (
+        process.env.CI &&
+        (typeof process.env.CI !== 'string' ||
+          process.env.CI.toLowerCase() !== 'false') &&
+        messages.warnings.length
+      ) {
+        console.log(
+          chalk.yellow(
+            '\nTreating warnings as errors because process.env.CI = true.\n' +
+              'Most CI servers set it automatically.\n'
+          )
+        );
+        return reject(new Error(messages.warnings.join('\n\n')));
+      }
+      return resolve({
+        stats,
+        previousFileSizes,
+        warnings: messages.warnings,
+      });
+    });
+  });
+}
+
+function copyPublicFolder() {
+  fs.copySync(paths.appPublic, paths.appBuild, {
+    dereference: true,
+    filter: file => file !== paths.appHtml,
+  });
+}

scripts/start.js

+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'development';
+process.env.NODE_ENV = 'development';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+const fs = require('fs');
+const chalk = require('chalk');
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const clearConsole = require('react-dev-utils/clearConsole');
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const {
+  choosePort,
+  createCompiler,
+  prepareProxy,
+  prepareUrls,
+} = require('react-dev-utils/WebpackDevServerUtils');
+const openBrowser = require('react-dev-utils/openBrowser');
+const paths = require('../config/paths');
+const config = require('../config/webpack.config.dev');
+const createDevServerConfig = require('../config/webpackDevServer.config');
+
+const useYarn = fs.existsSync(paths.yarnLockFile);
+const isInteractive = process.stdout.isTTY;
+
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+  process.exit(1);
+}
+
+// Tools like Cloud9 rely on this.
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
+const HOST = process.env.HOST || '0.0.0.0';
+
+if (process.env.HOST) {
+  console.log(
+    chalk.cyan(
+      `Attempting to bind to HOST environment variable: ${chalk.yellow(
+        chalk.bold(process.env.HOST)
+      )}`
+    )
+  );
+  console.log(
+    `If this was unintentional, check that you haven't mistakenly set it in your shell.`
+  );
+  console.log(`Learn more here: ${chalk.yellow('http://bit.ly/2mwWSwH')}`);
+  console.log();
+}
+
+// We attempt to use the default port but if it is busy, we offer the user to
+// run on a different port. `choosePort()` Promise resolves to the next free port.
+choosePort(HOST, DEFAULT_PORT)
+  .then(port => {
+    if (port == null) {
+      // We have not found a port.
+      return;
+    }
+    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+    const appName = require(paths.appPackageJson).name;
+    const urls = prepareUrls(protocol, HOST, port);
+    // Create a webpack compiler that is configured with custom messages.
+    const compiler = createCompiler(webpack, config, appName, urls, useYarn);
+    // Load proxy config
+    const proxySetting = require(paths.appPackageJson).proxy;
+    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
+    // Serve webpack assets generated by the compiler over a web sever.
+    const serverConfig = createDevServerConfig(
+      proxyConfig,
+      urls.lanUrlForConfig
+    );
+    const devServer = new WebpackDevServer(compiler, serverConfig);
+    // Launch WebpackDevServer.
+    devServer.listen(port, HOST, err => {
+      if (err) {
+        return console.log(err);
+      }
+      if (isInteractive) {
+        clearConsole();
+      }
+      console.log(chalk.cyan('Starting the development server...\n'));
+      openBrowser(urls.localUrlForBrowser);
+    });
+
+    ['SIGINT', 'SIGTERM'].forEach(function(sig) {
+      process.on(sig, function() {
+        devServer.close();
+        process.exit();
+      });
+    });
+  })
+  .catch(err => {
+    if (err && err.message) {
+      console.log(err.message);
+    }
+    process.exit(1);
+  });

scripts/test.js

+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'test';
+process.env.NODE_ENV = 'test';
+process.env.PUBLIC_URL = '';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+const jest = require('jest');
+let argv = process.argv.slice(2);
+
+// Watch unless on CI or in coverage mode
+if (!process.env.CI && argv.indexOf('--coverage') < 0) {
+  argv.push('--watch');
+}
+
+
+jest.run(argv);

src/App.css

+body {
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+}
+/*HeaderBar*/
+.trigger{
+    font-size: 18px;
+    line-height: 64px;
+    cursor: pointer;
+}
+.trigger:hover{
+    color: #1890ff;
+}
+.header-ul{
+    display: flex;
+    width: 200px;
+}
+.header-ul li {
+    flex-grow: 1;
+    text-align: center;
+}
+.header-ul>li img{
+    width: 35px;
+    height: 35px;
+    border-radius: 100px;
+}
+.menu{
+    line-height: 2em;
+    padding: 0 10px;
+}
+.menu-group li{
+    padding: 0 24px;
+    line-height: 2em;
+}
+
+#page .card-item{
+    margin-bottom: 10px;
+    border-radius: 3px;
+    line-height: 2em;
+}
+#page .card-ul{
+    list-style: inside circle;
+}
+
+/*GalleryDemo*/
+.aspect {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-bottom: 100%;
+    overflow: hidden;
+}
+.aspect--1x2{
+    padding-bottom: calc(112.5% + 8px);
+}
+.aspect--1x1 {
+    padding-bottom: 56.25%;
+    /*padding的百分比是按父级的width计算的*/
+}
+.aspect--2x1 {
+    padding-bottom: 28.125%;
+}
+.aspect__inner{
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+.vertical-center-modal {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.vertical-center-modal .ant-modal {
+    top: 0;
+}
+
+/*美化webkit内核滚动条*/
+  ::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+  }
+::-webkit-scrollbar-thumb {
+    background-color: #777;
+}
+
+/*更改antd的primary button样式*/
+.ant-btn-primary{
+    background: #36bafb;
+    border-color: #36bafb;
+}
\ No newline at end of file

src/App.js

+import React, { Component } from 'react'
+import PrivateRoute from './components/PrivateRoute'
+import { Route, Switch } from 'react-router-dom'
+import Login from './routes/Login/index'
+// import Login from './routes/Login2/index'
+import Index from './routes/Index/index'
+import './App.css'
+import './assets/font/iconfont.css'
+
+var baseURL = 'http://52.83.169.190:8005 '
+class App extends Component {
+  render () {
+    return (
+      <Switch>
+        <Route path='/login' component={Login} />
+        <PrivateRoute path='/' component={Index} />
+      </Switch>
+    )
+  }
+}
+
+export default App

src/App.test.js

+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+var baseURL = 'http://52.83.169.190:8005 '
+it('renders without crashing', () => {
+  const div = document.createElement('div')
+  ReactDOM.render(<App />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})

src/assets/font/demo.css

+*{margin: 0;padding: 0;list-style: none;}
+/*
+KISSY CSS Reset
+理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
+2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
+3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
+特色：1. 适应中文；2. 基于最新主流浏览器。
+维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
+ */
+
+/** 清除内外边距 **/
+body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
+dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
+pre, /* text formatting elements 文本格式元素 */
+form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
+th, td /* table elements 表格元素 */ {
+  margin: 0;
+  padding: 0;
+}
+
+/** 设置默认字体 **/
+body,
+button, input, select, textarea /* for ie */ {
+  font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
+}
+h1, h2, h3, h4, h5, h6 { font-size: 100%; }
+address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
+code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
+small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
+
+/** 重置列表元素 **/
+ul, ol { list-style: none; }
+
+/** 重置文本格式元素 **/
+a { text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+
+/** 重置表单元素 **/
+legend { color: #000; } /* for ie6 */
+fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
+button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
+/* 注：optgroup 无法扶正 */
+
+/** 重置表格元素 **/
+table { border-collapse: collapse; border-spacing: 0; }
+
+/* 清除浮动 */
+.ks-clear:after, .clear:after {
+  content: '\20';
+  display: block;
+  height: 0;
+  clear: both;
+}
+.ks-clear, .clear {
+  *zoom: 1;
+}
+
+.main {
+  padding: 30px 100px;
+width: 960px;
+margin: 0 auto;
+}
+.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
+
+.helps{margin-top:40px;}
+.helps pre{
+  padding:20px;
+  margin:10px 0;
+  border:solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists{
+  width: 100% !important;
+
+}
+
+.icon_lists li{
+  float:left;
+  width: 100px;
+  height:180px;
+  text-align: center;
+  list-style: none !important;
+}
+.icon_lists .icon{
+  font-size: 42px;
+  line-height: 100px;
+  margin: 10px 0;
+  color:#333;
+  -webkit-transition: font-size 0.25s ease-out 0s;
+  -moz-transition: font-size 0.25s ease-out 0s;
+  transition: font-size 0.25s ease-out 0s;
+
+}
+.icon_lists .icon:hover{
+  font-size: 100px;
+}
+
+
+
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p,
+.markdown pre {
+  margin: 1em 0;
+}
+
+.markdown > p,
+.markdown > blockquote,
+.markdown > .highlight,
+.markdown > ol,
+.markdown > ul {
+  width: 80%;
+}
+
+.markdown ul > li {
+  list-style: circle;
+}
+
+.markdown > ul li,
+.markdown blockquote ul > li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown > ul li p,
+.markdown > ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol > li {
+  list-style: decimal;
+}
+
+.markdown > ol li,
+.markdown blockquote ol > li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown pre {
+  border-radius: 6px;
+  background: #f7f7f7;
+  padding: 20px;
+}
+
+.markdown pre code {
+  border: none;
+  background: #f7f7f7;
+  margin: 0;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown > table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown > table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+
+}
+
+.markdown > table th,
+.markdown > table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown > table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+  font-style: italic;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown > br,
+.markdown > p > br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+pre{
+  background: #fff;
+}
+
+
+
+
+

src/assets/font/demo_fontclass.html

+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+    <link rel="stylesheet" href="iconfont.css">
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                <i class="icon iconfont icon-fenlei"></i>
+                    <div class="name">分类</div>
+                    <div class="fontclass">.icon-fenlei</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-fenlei1"></i>
+                    <div class="name">分类</div>
+                    <div class="fontclass">.icon-fenlei1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shouye"></i>
+                    <div class="name">首页</div>
+                    <div class="fontclass">.icon-shouye</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-suo"></i>
+                    <div class="name">锁</div>
+                    <div class="fontclass">.icon-suo</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shouye1"></i>
+                    <div class="name">首页</div>
+                    <div class="fontclass">.icon-shouye1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-user"></i>
+                    <div class="name">User</div>
+                    <div class="fontclass">.icon-user</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-emiyanzhengma"></i>
+                    <div class="name">emi验证码</div>
+                    <div class="fontclass">.icon-emiyanzhengma</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-user1"></i>
+                    <div class="name">user</div>
+                    <div class="fontclass">.icon-user1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-User"></i>
+                    <div class="name">User</div>
+                    <div class="fontclass">.icon-User</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-lajitong1"></i>
+                    <div class="name">垃圾桶</div>
+                    <div class="fontclass">.icon-lajitong1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-yanzhengmatianchong"></i>
+                    <div class="name">验证码填充</div>
+                    <div class="fontclass">.icon-yanzhengmatianchong</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-suo1"></i>
+                    <div class="name">锁</div>
+                    <div class="fontclass">.icon-suo1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-securityCode-b"></i>
+                    <div class="name">验证码</div>
+                    <div class="fontclass">.icon-securityCode-b</div>
+                </li>
+            
+        </ul>
+
+        <h2 id="font-class-">font-class引用</h2>
+        <hr>
+
+        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
+        <p>与unicode使用方式相比，具有如下特点：</p>
+        <ul>
+        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
+        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
+        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
+        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
+
+
+        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
+        <blockquote>
+        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
+        </blockquote>
+    </div>
+</body>
+</html>

src/assets/font/demo_symbol.html

+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+    <script src="iconfont.js"></script>
+
+    <style type="text/css">
+        .icon {
+          /* 通过设置 font-size 来改变图标大小 */
+          width: 1em; height: 1em;
+          /* 图标和文字相邻时，垂直对齐 */
+          vertical-align: -0.15em;
+          /* 通过设置 color 来改变 SVG 的颜色/fill */
+          fill: currentColor;
+          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+             normalize.css 中也包含这行 */
+          overflow: hidden;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-fenlei"></use>
+                    </svg>
+                    <div class="name">分类</div>
+                    <div class="fontclass">#icon-fenlei</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-fenlei1"></use>
+                    </svg>
+                    <div class="name">分类</div>
+                    <div class="fontclass">#icon-fenlei1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shouye"></use>
+                    </svg>
+                    <div class="name">首页</div>
+                    <div class="fontclass">#icon-shouye</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-suo"></use>
+                    </svg>
+                    <div class="name">锁</div>
+                    <div class="fontclass">#icon-suo</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shouye1"></use>
+                    </svg>
+                    <div class="name">首页</div>
+                    <div class="fontclass">#icon-shouye1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-user"></use>
+                    </svg>
+                    <div class="name">User</div>
+                    <div class="fontclass">#icon-user</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-emiyanzhengma"></use>
+                    </svg>
+                    <div class="name">emi验证码</div>
+                    <div class="fontclass">#icon-emiyanzhengma</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-user1"></use>
+                    </svg>
+                    <div class="name">user</div>
+                    <div class="fontclass">#icon-user1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-User"></use>
+                    </svg>
+                    <div class="name">User</div>
+                    <div class="fontclass">#icon-User</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-lajitong1"></use>
+                    </svg>
+                    <div class="name">垃圾桶</div>
+                    <div class="fontclass">#icon-lajitong1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-yanzhengmatianchong"></use>
+                    </svg>
+                    <div class="name">验证码填充</div>
+                    <div class="fontclass">#icon-yanzhengmatianchong</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-suo1"></use>
+                    </svg>
+                    <div class="name">锁</div>
+                    <div class="fontclass">#icon-suo1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-securityCode-b"></use>
+                    </svg>
+                    <div class="name">验证码</div>
+                    <div class="fontclass">#icon-securityCode-b</div>
+                </li>
+            
+        </ul>
+
+
+        <h2 id="symbol-">symbol引用</h2>
+        <hr>
+
+        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
+        <ul>
+          <li>支持多色图标了，不再受单色限制。</li>
+          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
+          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
+          <li>浏览器渲染svg的性能一般，还不如png。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
+        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
+        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
+        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
+.icon {
+   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
+   vertical-align: <span class="hljs-number">-0.15</span>em;
+   fill: currentColor;
+   overflow: hidden;
+}
+&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
+        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
+  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
+</span>&lt;<span class="hljs-regexp">/svg&gt;
+        </span></code></pre>
+    </div>
+</body>
+</html>

src/assets/font/demo_unicode.html

+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+
+    <style type="text/css">
+
+        @font-face {font-family: "iconfont";
+          src: url('iconfont.eot'); /* IE9*/
+          src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
+          url('iconfont.woff') format('woff'), /* chrome, firefox */
+          url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+          url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
+        }
+
+        .iconfont {
+          font-family:"iconfont" !important;
+          font-size:16px;
+          font-style:normal;
+          -webkit-font-smoothing: antialiased;
+          -webkit-text-stroke-width: 0.2px;
+          -moz-osx-font-smoothing: grayscale;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                <i class="icon iconfont">&#xe60a;</i>
+                    <div class="name">分类</div>
+                    <div class="code">&amp;#xe60a;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe611;</i>
+                    <div class="name">分类</div>
+                    <div class="code">&amp;#xe611;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe612;</i>
+                    <div class="name">首页</div>
+                    <div class="code">&amp;#xe612;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe625;</i>
+                    <div class="name">锁</div>
+                    <div class="code">&amp;#xe625;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe60b;</i>
+                    <div class="name">首页</div>
+                    <div class="code">&amp;#xe60b;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe743;</i>
+                    <div class="name">User</div>
+                    <div class="code">&amp;#xe743;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe61b;</i>
+                    <div class="name">emi验证码</div>
+                    <div class="code">&amp;#xe61b;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe600;</i>
+                    <div class="name">user</div>
+                    <div class="code">&amp;#xe600;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe67b;</i>
+                    <div class="name">User</div>
+                    <div class="code">&amp;#xe67b;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe610;</i>
+                    <div class="name">垃圾桶</div>
+                    <div class="code">&amp;#xe610;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe636;</i>
+                    <div class="name">验证码填充</div>
+                    <div class="code">&amp;#xe636;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe644;</i>
+                    <div class="name">锁</div>
+                    <div class="code">&amp;#xe644;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe60d;</i>
+                    <div class="name">验证码</div>
+                    <div class="code">&amp;#xe60d;</div>
+                </li>
+            
+        </ul>
+        <h2 id="unicode-">unicode引用</h2>
+        <hr>
+
+        <p>unicode是字体在网页端最原始的应用方式，特点是：</p>
+        <ul>
+        <li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
+        <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+        <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
+        </ul>
+        <blockquote>
+        <p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
+        </blockquote>
+        <p>unicode使用步骤如下：</p>
+        <h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
+        <pre><code class="lang-js hljs javascript">@font-face {
+  font-family: <span class="hljs-string">'iconfont'</span>;
+  src: url(<span class="hljs-string">'iconfont.eot'</span>);
+  src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
+  url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
+  url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
+  url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
+}
+</code></pre>
+        <h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
+        <pre><code class="lang-js hljs javascript">.iconfont{
+  font-family:<span class="hljs-string">"iconfont"</span> !important;
+  font-size:<span class="hljs-number">16</span>px;font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+        <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+        <pre><code class="lang-js hljs javascript">&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;&amp;#x33;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span></code></pre>
+
+        <blockquote>
+        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
+        </blockquote>
+    </div>
+
+
+</body>
+</html>

src/assets/font/iconfont.css

+
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1530625048960'); /* IE9*/
+  src: url('iconfont.eot?t=1530625048960#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAvIAAsAAAAAEOgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kk1Y21hcAAAAYAAAADFAAACdmPSBzlnbHlmAAACSAAABwMAAAkYg3QBN2hlYWQAAAlMAAAALwAAADYR4n4uaGhlYQAACXwAAAAeAAAAJAfeA5FobXR4AAAJnAAAABgAAAA8O+oAAGxvY2EAAAm0AAAAIAAAACAQ9BNAbWF4cAAACdQAAAAfAAAAIAEfAF1uYW1lAAAJ9AAAAUUAAAJtPlT+fXBvc3QAAAs8AAAAigAAALdWkMkSeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/s84gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDx3Zm7438AQw9zI0AAUZgTJAQAquQy4eJzFkk0OgkAMhd/Ij4pCkJWRxB07114ADmXCFTwQK4/zOIa+UhYadattPpLpG9qmUwAJgEicRAyEGwLMBkXDFI+QTfEYV533KBVZ4UJww5wVazY8s2M/tve7bpiSSSnflE8WlNH8ID8+uSlrLJCiwEYVY9VMsEWubpYS0y/5fmDhf6VfbTt9h/lUiMuMWiQcTVHv4WieejVHkwVzx/5l6cD0nWObwcqx7WDt6C3AxrEN4tmxjtg5sNy9Yxs0tg6WDwqVPFwAAAB4nHVWW2wcVxk+/zk7M3uZmb3NbS/e8ezM7nR3471fjC+b0NrR2olTFKctcZ2kbR4aIQVMhOS2FOEK1cSiNOGlD1UvtDhppAqklFYqkELVJqII9aFCEEElUNU+pK9QCWTsCf+sGyigzp49Z/5/Znb+7zvf+c4SjpCbH7ArzCBJchtpkBnyJUKAr0BepiNgue0qrYBqcaquyMy1XUuw81U2DXqeV7Rmt13UeYGPggw5aFnNrlulLnTafToJTW0EIJVJLyYK2QQ7D2HDzT3uzdMXQTXtbLQ/5s3t2as0R5PBVTGRSCUSTwR5jgtSGojKcFrXQlwozHubXDStXjFL1AQx5aYPHpVGM4n7z7a/OlLQQwBra5DMjMov7Y2n49geTWvJREqISUEjLdmOAqsfRYykOFL8kODB+x37FX2biCRFiqRGxskXEa3l47AtH1GLs2RQNN3qQ7voqru53etQ/BQy+78TOEGnoooS3bkaU5QYnbo1fjY3PB/VJsrlibLyXwO9RzEVbD8FJafAsPvnboYGlNJkuTzpjarlyVJpEmJK2X/k31h+yQgRSIwYxCIl0vSx9MFFCK6Pwi8bMPDRFD4/cYgecKCw85oDL6dtu53PM/CDgp/efvNzU/TFwATHTRyFfNuPvc3ARCAwYf5v6N/atgkb1vs2/SvJkgpBBAWLL/bi7W5TU+O81rO0rhvvo2j0uMa7DHg77xa7PejmgBeGEVShDzrqTKB/8g4OOhDVZJpqwqsti4KsyQD9ud96R4NBMSiwEFwKqhIOP8Yw6B0NMUkNwqUQE2IwvQClSDQa8a73TErN3q1oYRroZe91PhJSBRjwLKEI3hsRHgaCkmC897qghoiP4+ZVtsimhpyXkXG7U/XpFlQbu3huSG4vXgXIF310Cp+0OpjBC9Sr0NWlpVVacWoANaRyOHp/dur1Qb1+wtuC+fHxeaDKkaWHKH1o6QjUHW/JqQOOcNGpe4/79w3q8OiR8XlK58cJoVjP79kNViFp0iKEs7CYjl2Fdg/Zamk6aCqWZWMHeeQRpd2K7+q7E2/1cbEWmbhzoz0LotNIw1r0Nm1sFB5LQ8MRYdZ7M5Xwvh1WYtNlkxpmeTqmQMRbUyow234fGoMU3BmNgeldTuedBrzfnmVOwrscNhXwPjFLACVctKjnCBxK+tPv1+qx/fQmqaPTkELbxWKraBe9vj/6JPKa3kCmFF7AABueY0P6Gv6X7R8tH5mKJZPdUUrvm5t7AGgyLzuQjLWWx2IJACcL6488/F3IluDhPamRsTSfSaSjjWeDc/f5D/DfqitmKpHh1UZOdNTcmMBsSm0mjOVu1fcEe5WtEZWM+i6IPPZcQeMFFyXK6T0HNQpuz69Hx+LYhixdvgiGARdemQ49DbIogvx0yKv/4QtnuJ+taqGri4yB8GXBMLCj3vixGw8GAg/eOAbv7Lz1i7HF4OY+g/3m2aGmdthJ1BQQm+whJNkAhUdDKqKTcq2miaJvdvdCt9XMcUyRYSisC/SNwbS3MD1gkVjabuW4WEG9/Y7b1UKMy7XsdCzCnl95fgUbm9yZmZqdnUq3Jpo1SwkbkqZJRlixas2JFvzozhX4+nMrK4gfsI5n2Edshbg4O7j6ECe2blEYzo9QpHqR13enJDecHlQbfTInxVUbCjoTy4FA1qheczbNcKAsMr0AthqXcoe2ZPaOvPVMshUz7uLidaVrUe7sgRPlxbj3d41aXaUe5+4yYq1k5u5z5+4m/p60xtZxHiIkSkZwX+phcYViDWyBFzjVYkkrCW20BpXJUEFj6LB2F31E4ZEyhh6SRAHZ+aKLabbubUcDyb8lONnbZvtfmNn5xgyckxVRBykEYel7ui4p0vfDEhhSGEIS6CL9R4VFDxyIskpz++dM3/6YboZFkMI77+FlOUSrEh4774UlKUz3i35axt+itbC8q6E1dg1rzw39mHfcYl7gAyhuFcWtfSpnn1u3XRSYX2cNEXR7mumznQN2KeJtrQcTwXVvKyLKNO7WDnc2FhY2OodrbpzKf/w4FGVS+KkIVWJi+JHfhTJ6gH7A9h7j+eV9jMbF0LvnL5wZnEynTw7OXDj/bkiMf3KTiDT4nXBGBwh+5UORxbO39P4Wu5/tG3rZZ50sz/tO5m98vpPZtwyMlbvs7KlTG6yDMCCn08PD8TnvCr13dvZeCn85fWqD0o1Tp03NO6SZpgavaObpmWVKl2f+w81jOKd1fB++reh/kB/BX/BR4FWN6F0HJecK+J+iRot9QF52dwF2lZnG8eWlg0pdnTt+z3HDpIA39da+CZmSwOAF75qYlYI/ESFjS+cgK+dTINGLRp6PZp1pWb4j54QCtvHAsa/92rsuoEX94IdwzbseZkHhteG9T4E4fBap+RfycJ0IAHicY2BkYGAA4rbp0vXx/DZfGbhZGEDgeuJcCQT9v4GFgbkRyOVgYAKJAgAOEQlTAHicY2BkYGBu+N/AEMMCZDEwsDAwgGkkwA8ARy4CeQAAeJxjYWBgYH7JwMACpFkYoTSRGAA5wgEmAAAAAAB2ANwBNAGYAeACNgKGAsIDBgNKA6gD/gQ2BIx4nGNgZGBg4GcIZGBjAAEmIOYCQgaG/2A+AwASUgF9AHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nG2MUQ6CMBiDVxhMUMDEc/iwM3gGDzDxl83AlrAtcZ7eGR58sQ9t8zUpK9imlv3XgAIlOCrUENihQYs9DujQY8CR4VU/yM5kxBay9trFRKWPTmxV8uhp7WgxSdm3Jjstqvoiya/Zm1k9TXB2kqffHoyyo86Q5x/ZexrjakK6uDudb4x9ABJyKqQAAA==') format('woff'),
+  url('iconfont.ttf?t=1530625048960') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('iconfont.svg?t=1530625048960#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family:"iconfont" !important;
+  font-size:16px;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-fenlei:before { content: "\e60a"; }
+
+.icon-fenlei1:before { content: "\e611"; }
+
+.icon-shouye:before { content: "\e612"; }
+
+.icon-suo:before { content: "\e625"; }
+
+.icon-shouye1:before { content: "\e60b"; }
+
+.icon-user:before { content: "\e743"; }
+
+.icon-emiyanzhengma:before { content: "\e61b"; }
+
+.icon-user1:before { content: "\e600"; }
+
+.icon-User:before { content: "\e67b"; }
+
+.icon-lajitong1:before { content: "\e610"; }
+
+.icon-yanzhengmatianchong:before { content: "\e636"; }
+
+.icon-suo1:before { content: "\e644"; }
+
+.icon-securityCode-b:before { content: "\e60d"; }
+

src/components/ContentMain/index.js

+import React from 'react'
+import { withRouter, Switch, Redirect } from 'react-router-dom'
+import LoadableComponent from '../../utils/LoadableComponent'
+import PrivateRoute from '../PrivateRoute'
+
+const Home = LoadableComponent(() => import('../../routes/Home/index'))  //参数一定要是函数，否则不会懒加载，只会代码拆分
+// 搜索结果
+const SearchList = LoadableComponent(() => import('../../routes/Home/SearchList/index'))
+const SearchDetails = LoadableComponent(() => import('../../routes/Home/SearchDetails/index'))
+const TargetDetails = LoadableComponent(() => import('../../routes/Home/TargetDetails/index'))
+const LigandDetails = LoadableComponent(() => import('../../routes/Home/LigandDetails/index'))
+const IndicationDetails = LoadableComponent(() => import('../../routes/Home/IndicationDetails/index'))
+const MutationDetails = LoadableComponent(() => import('../../routes/Home/MutationDetails/index'))
+const dockingUploadDetails = LoadableComponent(() => import('../../routes/Home/dockingUploadDetails/index'))
+
+
+// 分子搜索
+const MolecularSearch = LoadableComponent(() => import('../../routes/MolecularSearch/index'))
+// 
+// const Kinase = LoadableComponent(()=>import('../../routes/Kinase/index'))  
+// const KinaseSearchList = LoadableComponent(()=>import('../../routes/Kinase/SearchList/index'))
+// const KinaseSearchDetails = LoadableComponent(()=>import('../../routes/Kinase/SearchDetails/index'))
+// const KinaseTargetDetails = LoadableComponent(()=>import('../../routes/Kinase/TargetDetails/index'))
+// const KinaseLigandDetails = LoadableComponent(()=>import('../../routes/Kinase/LigandDetails/index'))
+
+// Kinase
+const KinaseSearch = LoadableComponent(() => import('../../routes/KinaseSearch/index'))
+
+// 知识图谱
+const KnowledgeMap = LoadableComponent(() => import('../../routes/KnowledgeMap/index'))
+// drugbank
+const drugbank = LoadableComponent(() => import('../../routes/drugbank/index'))
+const drugbankSearchList = LoadableComponent(() => import('../../routes/drugbank/SearchList/index'))
+const drugbankSearchDetails = LoadableComponent(() => import('../../routes/drugbank/SearchDetails/index'))
+const drugbankTargetDetails = LoadableComponent(() => import('../../routes/drugbank/TargetDetails/index'))
+const drugbankIndicationDetails = LoadableComponent(() => import('../../routes/drugbank/IndicationDetails/index'))
+
+
+@withRouter
+class ContentMain extends React.Component {
+  render () {
+    return (
+      <div style={{ padding: 16, position: 'relative' }}>
+        <Switch>
+          <PrivateRoute exact path='/home' component={Home} />
+          <PrivateRoute exact path='/home/SearchList' component={SearchList} />
+          <PrivateRoute exact path='/home/SearchDetails' component={SearchDetails} />
+          <PrivateRoute exact path='/home/TargetDetails' component={TargetDetails} />
+          <PrivateRoute exact path='/home/LigandDetails' component={LigandDetails} />
+          <PrivateRoute exact path='/home/IndicationDetails' component={IndicationDetails} />
+          <PrivateRoute exact path='/home/MutationDetails' component={MutationDetails} />
+          <PrivateRoute exact path='/drugbank' component={drugbank} />
+          <PrivateRoute exact path='/drugbank/SearchList' component={drugbankSearchList} />
+          <PrivateRoute exact path='/drugbank/SearchDetails' component={drugbankSearchDetails} />
+          <PrivateRoute exact path='/drugbank/TargetDetails' component={drugbankTargetDetails} />
+          <PrivateRoute exact path='/drugbank/Indication' component={drugbankIndicationDetails} />
+          <PrivateRoute exact path='/dockingUploadDetails' component={dockingUploadDetails} />
+          <PrivateRoute exact path='/MolecularSearch' component={MolecularSearch} />
+          <PrivateRoute exact path='/MolecularSearch' component={MolecularSearch} />
+          <PrivateRoute exact path='/KnowledgeMap' component={KnowledgeMap} />
+          <PrivateRoute exact path='/KinaseSearch' component={KinaseSearch} />
+          <Redirect exact from='/' to='/home' />
+        </Switch>
+      </div>
+    )
+  }
+}
+
+export default ContentMain
\ No newline at end of file

src/components/CustomBreadcrumb/index.js

+import React from 'react'
+import {Breadcrumb} from 'antd'
+import {Link} from 'react-router-dom'
+
+const CustomBreadcrumb = (props)=>(
+  <Breadcrumb style={{marginBottom:16}}>
+    <Breadcrumb.Item><Link to='/home'>首页</Link></Breadcrumb.Item>
+    {props.arr && props.arr.map(item=>{
+      if ((typeof item) === 'object'){
+        return <Breadcrumb.Item key={item.title}><Link to={item.to}>{item.title}</Link></Breadcrumb.Item>
+      } else {
+        return <Breadcrumb.Item key={item}>{item}</Breadcrumb.Item>
+      }
+    })}
+  </Breadcrumb>
+)
+export default CustomBreadcrumb
\ No newline at end of file

src/components/CustomMenu/index.js

+import React from 'react'
+import {Link,withRouter} from 'react-router-dom'
+import {Menu, Icon} from 'antd'
+
+//此组件的意义就是将数据抽离出来，通过传递数据去渲染
+@withRouter
+class CustomMenu extends React.Component {
+  state = {
+    openKeys: [],
+    selectedKeys: []
+  }
+
+  componentDidMount() {
+    // 防止页面刷新侧边栏又初始化了
+    const pathname = this.props.location.pathname
+    //获取当前所在的目录层级
+    const rank = pathname.split('/')
+    switch (rank.length) {
+      case 2 :  //一级目录
+        this.setState({
+          selectedKeys: [pathname]
+        })
+        break;
+      case 5 : //三级目录，要展开两个subMenu
+        this.setState({
+          selectedKeys: [pathname],
+          openKeys: [rank.slice(0, 3).join('/'), rank.slice(0, 4).join('/')]
+        })
+        break;
+      default :
+        this.setState({
+          selectedKeys: [pathname],
+          openKeys: [pathname.substr(0, pathname.lastIndexOf('/'))]
+        })
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    //当点击面包屑导航时，侧边栏要同步响应
+    const pathname = nextProps.location.pathname
+    if (this.props.location.pathname !== pathname) {
+      this.setState({
+        selectedKeys: [pathname],
+      })
+    }
+  }
+
+  onOpenChange = (openKeys) => {
+    //此函数的作用只展开当前父级菜单（父级菜单下可能还有子菜单）
+    if (openKeys.length === 0 || openKeys.length === 1) {
+      this.setState({
+        openKeys
+      })
+      return
+    }
+
+    //最新展开的菜单
+    const latestOpenKey = openKeys[openKeys.length - 1]
+    //判断最新展开的菜单是不是父级菜单，若是父级菜单就只展开一个，不是父级菜单就展开父级菜单和当前子菜单
+    //因为我的子菜单的key包含了父级菜单，所以不用像官网的例子单独定义父级菜单数组，然后比较当前菜单在不在父级菜单数组里面。
+    //只适用于3级菜单
+    if (latestOpenKey.includes(openKeys[0])) {
+      this.setState({
+        openKeys
+      })
+    } else {
+      this.setState({
+        openKeys: [latestOpenKey]
+      })
+    }
+  }
+
+  renderMenuItem = ({key, icon, title,}) => {
+    return (
+      <Menu.Item key={key}>
+        <Link to={key}>
+          {icon && <Icon type={icon}/>}
+          <span>{title}</span>
+        </Link>
+      </Menu.Item>
+    )
+  }
+  renderSubMenu = ({key, icon, title, subs}) => {
+    return (
+      <Menu.SubMenu key={key} title={<span>{icon && <Icon type={icon}/>}<span>{title}</span></span>}>
+        {
+          subs && subs.map(item => {
+            return item.subs && item.subs.length > 0 ? this.renderSubMenu(item) : this.renderMenuItem(item)
+          })
+        }
+      </Menu.SubMenu>
+    )
+  }
+
+  render() {
+    const {openKeys, selectedKeys} = this.state
+    return (
+      <Menu
+        onOpenChange={this.onOpenChange}
+        onClick={({key}) => this.setState({selectedKeys: [key]})}
+        openKeys={openKeys}
+        selectedKeys={selectedKeys}
+        theme={this.props.theme ? this.props.theme : 'dark'}
+        mode='inline'>
+        {
+          this.props.menus && this.props.menus.map(item => {
+            return item.subs && item.subs.length > 0 ? this.renderSubMenu(item) : this.renderMenuItem(item)
+          })
+        }
+      </Menu>
+    )
+  }
+}
+
+export default CustomMenu
\ No newline at end of file

src/components/HeaderBar/index.js

+import React from 'react'
+import { Icon, Badge, Dropdown, Menu, Modal } from 'antd'
+import screenfull from 'screenfull'
+import { inject, observer } from 'mobx-react'
+import { Link, withRouter } from 'react-router-dom'
+import { isAuthenticated } from '../../utils/Session'
+
+//withRouter一定要写在前面，不然路由变化不会反映到props中去
+@withRouter @inject('appStore') @observer
+class HeaderBar extends React.Component {
+  state = {
+    icon: 'arrows-alt',
+    count: 100,
+    visible: false,
+    avatar: require('./img/defaultUser.jpg')
+  }
+
+  componentDidMount () {
+    screenfull.onchange(() => {
+      this.setState({
+        icon: screenfull.isFullscreen ? 'shrink' : 'arrows-alt'
+      })
+    })
+  }
+
+  componentWillUnmount () {
+    screenfull.off('change')
+  }
+
+  toggle = () => {
+    this.props.onToggle()
+  }
+  screenfullToggle = () => {
+    if (screenfull.enabled) {
+      screenfull.toggle()
+    }
+  }
+  logout = () => {
+    this.props.appStore.toggleLogin(false)
+    this.props.history.push(this.props.location.pathname)
+  }
+
+  render () {
+    const { icon, count, visible, avatar } = this.state
+    const { appStore, collapsed, location } = this.props
+    const notLogin = (
+      <div>
+        <Link to={{ pathname: '/login', state: { from: location } }} style={{ color: 'rgba(0, 0, 0, 0.65)' }}>登录</Link>&nbsp;
+        <img src={require('../../assets/img/defaultUser.jpg')} alt="" />
+      </div>
+    )
+    const menu = (
+      <Menu className='menu'>
+        <Menu.ItemGroup title='用户中心' className='menu-group'>
+          {/* <Menu.Item>你好 - {isAuthenticated()}</Menu.Item>
+          <Menu.Item>个人信息</Menu.Item> */}
+          <Menu.Item><span onClick={this.logout}>退出登录</span></Menu.Item>
+        </Menu.ItemGroup>
+        {/* <Menu.ItemGroup title='设置中心' className='menu-group'>
+          <Menu.Item>个人设置</Menu.Item>
+          <Menu.Item>系统设置</Menu.Item>
+        </Menu.ItemGroup> */}
+      </Menu>
+    )
+    const login = (
+      <Dropdown overlay={menu}>
+        <img src={avatar} alt="" />
+      </Dropdown>
+    )
+    return (
+      <div id='headerbar'>
+        <Icon
+          type={collapsed ? 'menu-unfold' : 'menu-fold'}
+          className='trigger'
+          onClick={this.toggle} />
+        <div style={{ lineHeight: '64px', float: 'right' }}>
+          <ul className='header-ul'>
+            <li><Icon type={icon} onClick={this.screenfullToggle} /></li>
+            {/* <li onClick={() => this.setState({count: 0})}>
+              <Badge count={appStore.isLogin ? count : 0} overflowCount={99} style={{marginRight: -17}}>
+                <Icon type="notification"/>
+              </Badge>
+            </li> */}
+            <li>
+              {appStore.isLogin ? login : notLogin}
+            </li>
+          </ul>
+        </div>
+        <Modal
+          footer={null} closable={false}
+          visible={visible}
+          wrapClassName="vertical-center-modal"
+          onCancel={() => this.setState({ visible: false })}>
+          <img src={avatar} alt="" width='100%' />
+        </Modal>
+      </div>
+    )
+  }
+}
+
+export default HeaderBar
\ No newline at end of file

src/components/Loading/index.js

+import React from 'react'
+import './style.css'
+
+class Loading extends React.Component{
+  render(){
+    return (
+      <div id='loading'>
+        <div className="dot"/>
+        <div className="dot"/>
+        <div className="dot"/>
+        <div className="dot"/>
+        <div className="dot"/>
+      </div>
+    )
+  }
+}
+export default Loading
\ No newline at end of file

src/components/Loading/style.css

+#loading .dot {
+    width: 24px;
+    height: 24px;
+    background: #3ac;
+    border-radius: 100%;
+    display: inline-block;
+    animation: slide 1s infinite;
+}
+
+#loading .dot:nth-child(1) {
+    animation-delay: 0.1s;
+    background: #32aacc;
+}
+
+#loading .dot:nth-child(2) {
+    animation-delay: 0.2s;
+    background: #64aacc;
+}
+
+#loading .dot:nth-child(3) {
+    animation-delay: 0.3s;
+    background: #96aacc;
+}
+
+#loading .dot:nth-child(4) {
+    animation-delay: 0.4s;
+    background: #c8aacc;
+}
+
+#loading .dot:nth-child(5) {
+    animation-delay: 0.5s;
+    background: #faaacc;
+}
+
+@-moz-keyframes slide {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.3;
+        transform: scale(2);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@-webkit-keyframes slide {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.3;
+        transform: scale(2);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@-o-keyframes slide {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.3;
+        transform: scale(2);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes slide {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.3;
+        transform: scale(2);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
\ No newline at end of file

src/components/Loading2/index.js

+import React from 'react'
+import bodymovin from 'bodymovin'
+
+class Loading2 extends React.Component {
+  componentDidMount () {
+    var baseURL = 'http://52.83.169.190:8005'
+    const animData = {
+      wrapper: document.querySelector('#animationWindow'),
+      animType: 'svg',
+      loop: true,
+      prerender: true,
+      autoplay: true,
+      animationData: require('./data.json')
+    }
+    this.anim = bodymovin.loadAnimation(animData)
+    this.anim.setSpeed(1.42)
+  }
+  componentWillUnmount () {
+    var baseURL = 'http://52.83.169.190:8005'
+    this.anim = null
+  }
+  render () {
+    return (
+      <div style={{ width: '100%', height: '100%' }}>
+        <div id="animationWindow" style={{ width: '100%', height: '100%' }} />
+      </div>
+    )
+  }
+}
+export default Loading2
\ No newline at end of file

src/components/LogoTitlte/index.css

+.logo-div{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    position: fixed;
+    z-index: 100;
+    margin-top: 50px;
+    min-width: 1000px;
+    min-height: 100px;
+}
+.logo-div img{
+    height: 102px;
+}
\ No newline at end of file

src/components/LogoTitlte/index.js

+import React, { Component } from 'react'
+import './index.css'
+
+export default class LogoTitlte extends Component {
+  render() {
+    return (
+      <div className='logo-div'>
+          <img src={require('./img/logo.png')} alt=""/>
+      </div>
+    )
+  }
+}

src/components/PrivateRoute/index.js

+import React from 'react'
+import { Route, Redirect, } from 'react-router-dom'
+import { isAuthenticated } from '../../utils/Session'
+
+const PrivateRoute = ({component: Component, ...rest}) => (
+  <Route {...rest} render={(props) => (
+    !!isAuthenticated()
+      ? <Component {...props} />
+      : <Redirect to={{
+        pathname: '/login',
+        state: {from: props.location}
+      }}/>
+  )}/>
+)
+
+export default PrivateRoute
\ No newline at end of file

src/components/PromptBox/index.js

+import React from 'react'
+
+class Promptbox extends React.Component {
+  componentDidMount () {
+    this.addContent()
+  }
+  addContent = () => {
+    var baseURL = 'http://52.83.169.190:8005 '
+    const ctx = this.canvas.getContext('2d')
+    const width = this.props.width
+    ctx.strokeStyle = '#f0f0f0'
+    ctx.shadowOffsetX = -2
+    ctx.shadowOffsetY = 2
+    ctx.shadowBlur = 2
+    ctx.shadowColor = 'rgba(0,0,0,0)'
+    ctx.beginPath()
+    ctx.moveTo(0, 20)
+    ctx.lineTo(8, 16)
+    ctx.lineTo(8, 1)
+    ctx.lineTo(width - 1, 1)
+    ctx.lineTo(width - 1, 39)
+    ctx.lineTo(8, 39)
+    ctx.lineTo(8, 23)
+    ctx.closePath()
+    ctx.stroke()
+    ctx.fillStyle = '#000'
+    ctx.textBaseline = 'middle'
+    ctx.font = '14px sans-serif'
+    ctx.beginPath()
+    ctx.fillText(this.props.info, 20, 20)
+  }
+  render () {
+    return (
+      <div>
+        <canvas key={this.props.info} height='41' width={this.props.width} ref={el => this.canvas = el} />
+      </div>
+    )
+  }
+}
+export default Promptbox
\ No newline at end of file

src/components/SiderNav/index.js

+import React from 'react'
+import CustomMenu from "../CustomMenu/index"
+
+const menus = [
+  {
+    title: 'GPCR Search',
+    // icon: 'home',
+    key: '/home'
+  },
+  {
+    title: 'Kinase Search',
+    key: '/KinaseSearch'
+  },
+  {
+    title: 'PDB小分子搜索',
+    // icon: 'search',
+    key: '/MolecularSearch',
+  },
+  {
+    title: 'GPCR 知识图谱',
+    icon: '',
+    key: '/KnowledgeMap',
+  },
+  {
+    title: 'Drugbank',
+    // icon: 'medicine-box',
+    key: '/Drugbank',
+  },
+  // {
+  //   title: '知识图谱',
+  //   icon: 'heat-map',
+  //   key: '/KnowledgeMap',
+  // },
+  // {
+  //   title: '导航组件',
+  //   icon: 'bars',
+  //   key: '/home/navigation',
+  //   subs: [
+  //     {key: '/home/navigation/dropdown', title: '下拉菜单', icon: ''},
+  //     {key: '/home/navigation/menu', title: '导航菜单', icon: ''},
+  //     {key: '/home/navigation/steps', title: '步骤条', icon: ''},
+  //   ]
+  // },
+  // {
+  //   title: '输入组件',
+  //   icon: 'edit',
+  //   key: '/home/entry',
+  //   subs: [
+  //     {
+  //       key: '/home/entry/form',
+  //       title: '表单',
+  //       icon: '',
+  //       subs: [
+  //         {key: '/home/entry/form/basic-form', title: '基础表单', icon: ''},
+  //         {key: '/home/entry/form/step-form', title: '分步表单', icon: ''}
+  //       ]
+  //     },
+  //     {key: '/home/entry/upload', title: '上传', icon: ''},
+  //   ]
+  // },
+  // {
+  //   title: '显示组件',
+  //   icon: 'desktop',
+  //   key: '/home/display',
+  //   subs: [
+  //     {key: '/home/display/carousel', title: '轮播图', icon: ''},
+  //     {key: '/home/display/collapse', title: '折叠面板', icon: ''},
+  //     {key: '/home/display/list', title: '列表', icon: ''},
+  //     {key: '/home/display/table', title: '表格', icon: ''},
+  //     {key: '/home/display/tabs', title: '标签页', icon: '',},
+  //   ]
+  // },
+  // {
+  //   title: '反馈组件',
+  //   icon: 'message',
+  //   key: '/home/feedback',
+  //   subs: [
+  //     {key: '/home/feedback/modal', title: '对话框', icon: '',},
+  //     {key: '/home/feedback/notification', title: '通知提醒框', icon: ''},
+  //     {key: '/home/feedback/spin', title: '加载中', icon: '',}
+  //   ]
+  // },
+  // {
+  //   title: '其它',
+  //   icon: 'bulb',
+  //   key: '/home/other',
+  //   subs:[
+  //     {key: '/home/other/animation', title: '动画', icon: '',},
+  //     {key: '/home/other/gallery', title: '画廊', icon: '',},
+  //     {key:'/home/other/draft',title:'富文本',icon:''},
+  //     {key:'/home/other/chart',title:'图表',icon:''},
+  //     {key:'/home/other/loading',title:'加载动画',icon:''},
+  //     {key:'/home/other/404',title:'404',icon:''},
+  //     {key:'/home/other/springText',title:'弹性文字',icon:''},
+  //   ]
+  // },
+  // {
+  //   title: '关于',
+  //   icon: 'info-circle-o',
+  //   key: '/home/about'
+  // }
+]
+
+
+class SiderNav extends React.Component {
+  render () {
+
+    return (
+      <div style={{ height: '100vh', overflowY: 'scroll' }}>
+        <div style={styles.logo}>
+          {/* 深雅智慧 */}
+        </div>
+        <CustomMenu menus={menus} />
+      </div>
+    )
+  }
+}
+
+const styles = {
+  logo: {
+    height: '32px',
+    // background: 'rgba(255, 255, 255, .2)',
+    margin: '16px'
+  }
+}
+
+export default SiderNav
\ No newline at end of file

src/components/TypingCard/index.js

+import React from 'react'
+import { Card } from 'antd'
+import Typing from '../../utils/typing'
+
+class TypingCard extends React.Component {
+  static defaultProps = {
+    title: '何时使用',
+    source: '',
+    height: 136
+  }
+  componentDidMount () {
+    var baseURL = 'http://52.83.169.190:8005 '
+    const typing = new Typing({
+      source: this.source,
+      output: this.output,
+      delay: 30
+    })
+    typing.start()
+  }
+  render () {
+    return (
+      <Card hoverable bordered={false} className='card-item' title={this.props.title} style={{ minHeight: this.props.height }} id={this.props.id}>
+        <div style={{ display: 'none' }} ref={el => this.source = el} dangerouslySetInnerHTML={{ __html: this.props.source }} />
+        <div ref={el => this.output = el} />
+      </Card>
+    )
+  }
+}
+
+export default TypingCard
\ No newline at end of file

src/components/iframePdb/index.js

+import React, { Component } from 'react'
+
+class WrappedIframe extends React.Component {
+  state = {
+    pdbLink: '',
+  }
+  // shouldComponentUpdate (nextProps, prevState) {
+  //   console.log(111111)
+  //   console.log(nextProps.pdbLink,)
+  //   console.log(prevState,)
+  //   if (nextProps.pdbLink == prevState.pdbLink) {
+  //     return false
+  //   }
+  //   return true
+  // }
+  constructor(props) {
+    var baseURL = 'http://52.83.169.190:8005'
+    super(props)
+  }
+
+  render () {
+    const {
+      pdbLink
+
+    } = this.state
+    return (
+      <iframe
+        height={'100%'}
+        width={'100%'}
+        name="iframe-video"
+        src={pdbLink}
+      />
+    )
+  }
+  componentWillReceiveProps (nextProps, prevState) {
+    // console.log(11111)
+    // console.log(nextProps)
+    // console.log(this.state.pdbLink)
+    setTimeout(() => {
+      this.setState({
+        pdbLink: nextProps.pdbLink
+
+      })
+    }, 10)
+
+  }
+}
+export default WrappedIframe

src/index.css

+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
\ No newline at end of file

src/index.js

+import '@babel/polyfill'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+import registerServiceWorker from './registerServiceWorker'
+import { HashRouter } from 'react-router-dom'
+import { Provider } from 'mobx-react'
+import { LocaleProvider } from 'antd'
+import zh_CN from 'antd/lib/locale-provider/zh_CN'
+import store from './store'
+var baseURL = 'http://52.83.169.190:8005 '
+//打包时，用的HashRouter并加上了basename，因为放在服务器的二级目录下
+ReactDOM.render(
+  <HashRouter>
+    <LocaleProvider locale={zh_CN}>
+      <Provider {...store}>
+        <App />
+      </Provider>
+    </LocaleProvider>
+  </HashRouter>,
+  document.getElementById('root'))
+registerServiceWorker()

src/logo.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
+    <g fill="#61DAFB">
+        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
+        <circle cx="420.9" cy="296.5" r="45.7"/>
+        <path d="M520.5 78.1z"/>
+    </g>
+</svg>

src/registerServiceWorker.js

+// In production, we register a service worker to serve assets from local cache.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on the "N+1" visit to a page, since previously
+// cached resources are updated in the background.
+
+// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
+// This link also includes instructions on opting out of this behavior.
+var baseURL = 'http://52.83.169.190:8005 '
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+  // [::1] is the IPv6 localhost address.
+  window.location.hostname === '[::1]' ||
+  // 127.0.0.1/8 is considered localhost for IPv4.
+  window.location.hostname.match(
+    /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+  )
+)
+
+export default function register () {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location)
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
+      return
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
+
+      if (isLocalhost) {
+        // This is running on localhost. Lets check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl)
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+            'worker. To learn more, visit https://goo.gl/SC7cgQ'
+          )
+        })
+      } else {
+        // Is not local host. Just register service worker
+        registerValidSW(swUrl)
+      }
+    })
+  }
+}
+
+function registerValidSW (swUrl) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the old content will have been purged and
+              // the fresh content will have been added to the cache.
+              // It's the perfect time to display a "New content is
+              // available; please refresh." message in your web app.
+              console.log('New content is available; please refresh.')
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.')
+            }
+          }
+        }
+      }
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error)
+    })
+}
+
+function checkValidServiceWorker (swUrl) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      if (
+        response.status === 404 ||
+        response.headers.get('content-type').indexOf('javascript') === -1
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload()
+          })
+        })
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl)
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      )
+    })
+}
+
+export function unregister () {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister()
+    })
+  }
+}

src/routes/About/index.js

+import React from 'react'
+import CustomBreadcrumb from '../../components/CustomBreadcrumb/index'
+import TypingCard from '../../components/TypingCard'
+
+export default class About extends React.Component{
+  render(){
+    return (
+      <div>
+        <CustomBreadcrumb arr={['关于']}/>
+        <TypingCard source={'这个人很懒，什么也没留下...'} title='关于' />
+      </div>
+    )
+  }
+}
\ No newline at end of file

src/routes/Home/IndicationDetails/index.css

+.IndicationDetails-div{
+    background-color: #fff;
+}
+.IndicationDetails-div .bottom-div{
+    display: flex;
+    height: 80px;
+    align-items: center;
+}
\ No newline at end of file

src/routes/Home/IndicationDetails/index.js

+import React, { Component } from 'react'
+import { Pagination, message, Button, Tabs, Spin, Table, Tag, Typography } from 'antd'
+import { request } from '../../../utils/request'
+import './index.css'
+import qs from 'qs'
+const { Title } = Typography
+export default class IndicationDetails extends Component {
+  state = {
+    IndicationList: [],
+    smilesData: qs.parse(this.props.location.search.slice(1)),
+    total_num: 0
+  }
+  componentDidMount () {
+    this.getDetails()
+  }
+  getDetails () {
+    this.setState({ loading: true })
+    request.post('/gpcr/indication_search', this.state.smilesData)
+      .then(res => {
+        this.setState({ loading: false })
+        if (res.data.code === 200) {
+          this.setState({ IndicationList: res.data.data })
+          this.setState({ total_num: res.data.total_num })
+
+        } else {
+          message.error(res.data.msg)
+        }
+      })
+      .catch(err => {
+        console.error(err)
+      })
+  }
+  onShowSizeChange = (current, pageSize) => {
+
+    let smilesData = this.state.smilesData
+    smilesData.page = current
+    smilesData.page_size = pageSize
+    this.setState({
+      smilesData
+    })
+
+    this.getDetails()
+  }
+  onChange = (current, pageSize) => {
+
+    let smilesData = this.state.smilesData
+    smilesData.page = current
+    smilesData.page_size = pageSize
+    this.setState({
+      smilesData
+    })
+
+    this.getDetails()
+
+  }
+  getOne (e) {
+    console.log(e)
+    const { dataid, datatype } = e
+    let data = {
+      dataid,
+      datatype
+    }
+
+
+    this.props.history.push({ pathname: '/home/SearchDetails', search: qs.stringify(data) })
+
+
+
+  }
+  getOne2 (e) {
+    console.log(e)
+    const { dataid, datatype } = e
+    let data = {
+      dataid,
+      datatype
+    }
+
+
+
+
+    this.props.history.push({ pathname: '/home/TargetDetails', search: qs.stringify(data) })
+
+
+
+
+  }
+  getReferences = (e) => {
+    window.open(e)
+  }
+
+  render () {
+    const columns = [
+      {
+        title: 'indicationName',
+        dataIndex: 'indication_name',
+        key: 'indication_name',
+      },
+      // {
+      //   title: 'Synonyms',
+      //   dataIndex: 'Synonyms',
+      //   key: 'Synonyms',
+      //   render: (Synonyms) => (
+      //     <span>
+      //       {Synonyms != "Null" && Synonyms.map((item, index) => {
+      //         return <span>{item.toUpperCase()},</span>
+      //       })}
+      //     </span>
+      //   ),
+      // },
+      {
+        title: 'Drug',
+        dataIndex: 'Drug',
+        key: 'Drug',
+        render: Drug => (
+          <span>
+            {
+              <Tag color="blue" onClick={() => { this.getOne(Drug) }} >
+                {(Drug.name)}
+              </Tag>
+
+            }
+          </span>
+        ),
+      },
+      // {
+      //   title: 'Target',
+      //   dataIndex: 'Target',
+      //   key: 'Target',
+      //   render: Target => (
+      //     <span>
+      //       {
+      //         <Tag color="blue" onClick={() => { this.getOne2(Target) }} >
+      //           {(Target.name)}
+      //         </Tag>
+
+      //       }
+      //     </span>
+      //   ),
+      // },
+      {
+        title: 'Phase',
+        dataIndex: 'Phase',
+        key: 'Phase',
+      },
+      {
+        title: 'Status',
+        dataIndex: 'Status',
+        key: 'Status',
+      },
+      {
+        title: 'References',
+        dataIndex: 'References',
+        render: References => (
+          <span>
+            {References.map(item => {
+              return (
+                <Tag color="blue" key={item} onClick={() => { this.getReferences(item) }} >
+                  {item.toUpperCase()}
+                </Tag>
+              )
+            })}
+          </span>
+        ),
+      },
+    ]
+    const { IndicationList, total_num } = this.state
+    return (
+      <div className='IndicationDetails-div'>
+        <Title>{IndicationList.name}</Title>
+        <Table
+          bordered
+          rowKey='item'
+          dataSource={IndicationList}
+          pagination={false}
+          columns={columns}
+
+        />
+        <div className='bottom-div'>
+          <Pagination
+            showSizeChanger
+            onShowSizeChange={this.onShowSizeChange}
+            onChange={this.onChange}
+            total={total_num}
+          />
+
+        </div>
+
+      </div>
+    )
+  }
+}

src/routes/Home/LigandDetails/index.css

+.Molstar-div {
+  height: 500px;
+  width: 500px;
+}
+.Molstar-div2 {
+  height: 500px;
+  width: 70%;
+}
+.LigandDetails-div .TabPane-center {
+  display: flex;
+}
+.LigandDetails-div .left-title {
+  white-space: nowrap;
+}
+
+.LigandDetails-div .Structure-right {
+  width: 30%;
+}
+
+.LigandDetails-div .title-div {
+  font-size: 30px;
+  font-weight: 600;
+}
+
+.LigandDetails-div .div-list .list-one {
+  display: flex;
+  align-items: center;
+}
+.LigandDetails-div .div-list .list-one div:first-child {
+  color: black;
+  font-weight: 500;
+  font-size: 18px;
+  margin-right: 10px;
+}
+.LigandDetails-div .ant-collapse > .ant-collapse-item > .ant-collapse-header {
+  font-weight: 500;
+  font-size: 18px;
+}
+.LigandDetails-div .isShowDiv {
+  display: none;
+}
+.LigandDetails-div .title-div-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.LigandDetails-div .Jsme-div {
+  border: 1px solid black;
+}
+
+.LigandDetails-div .Radio-div {
+  display: flex;
+  justify-content: flex-end;
+  height: 50px;
+  align-items: center;
+}
+
+.LigandDetails-div .Sequence-div {
+  overflow: scroll;
+  display: flex;
+}
+.LigandDetails-div .zimu-div {
+  display: flex;
+}
+.LigandDetails-div .Sequenceone-div {
+  margin-right: 5px;
+}
+
+.search-details-div .zimu-div div {
+  padding: 5px;
+}
+.Molstar-div {
+  height: 800px;
+  width: 800px;
+}
+.Molstar-div2 {
+  height: 500px;
+  width: 100%;
+}
+.list-one2 {
+  display: flex;
+  align-items: center;
+  width: 50%;
+}
+.list-one2 div:first-child {
+  color: black;
+  font-weight: 500;
+  font-size: 18px;
+  margin-right: 10px;
+}
+.Calcilated {
+  display: flex;
+  flex-wrap: wrap;
+}

src/routes/Home/MutationDetails/index.css

+.Molstar-div {
+  height: 500px;
+  width: 500px;
+}
+.Molstar-div2 {
+  height: 600px;
+  width: 100%;
+}
+.MutationDetails-div .form-div {
+  width: 1000px;
+}
+.MutationDetails-div .SequenceAlignmentList-div {
+  overflow-x: hidden;
+}
+
+.MutationDetails-div .TabPane-center {
+  display: flex;
+}
+.MutationDetails-div .left-title {
+  white-space: nowrap;
+}
+
+.MutationDetails-div .Structure-right {
+  width: 30%;
+}
+
+.MutationDetails-div .title-div {
+  font-size: 30px;
+  font-weight: 600;
+}
+
+.MutationDetails-div .div-list .list-one {
+  display: flex;
+  align-items: center;
+}
+.MutationDetails-div .div-list .list-one div:first-child {
+  color: black;
+  font-weight: 500;
+  font-size: 18px;
+  margin-right: 10px;
+}
+.MutationDetails-div .ant-collapse > .ant-collapse-item > .ant-collapse-header {
+  font-weight: 500;
+  font-size: 18px;
+}
+.MutationDetails-div .isShowDiv {
+  display: none;
+}
+.MutationDetails-div .title-div-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.MutationDetails-div .Jsme-div {
+  border: 1px solid black;
+}
+
+.MutationDetails-div .Radio-div {
+  display: flex;
+  justify-content: flex-end;
+  height: 50px;
+  align-items: center;
+}
+
+.MutationDetails-div .Sequence-div {
+  overflow: scroll;
+  display: flex;
+}
+.MutationDetails-div .zimu-div {
+  display: flex;
+}
+.MutationDetails-div .Sequenceone-div {
+  margin-right: 5px;
+}
+
+.MutationDetails-div .zimu-div div {
+  padding: 5px;
+}
+.res-color-A {
+  background-color: #e6e600;
+  color: #000;
+}
+
+.res-color-C {
+  background-color: #b2b548;
+  color: #000;
+}
+
+.res-color-D {
+  background-color: #e60a0a;
+  color: #fdff7b;
+}
+
+.res-color-E {
+  background-color: #e60a0a;
+  color: #fdff7b;
+}
+
+.res-color-F {
+  background-color: #18ff0b;
+  color: #000;
+}
+
+.res-color-G {
+  background-color: #ff00f2;
+  color: #000;
+}
+
+.res-color-H {
+  background-color: #0093dd;
+  color: #000;
+}
+
+.res-color-I {
+  background-color: #e6e600;
+  color: #000;
+}
+
+.res-color-K {
+  background-color: #145aff;
+  color: #fdff7b;
+}
+
+.res-color-L {
+  background-color: #e6e600;
+  color: #000;
+}
+
+.res-color-M {
+  background-color: #e6e600;
+  color: #000;
+}
+
+.res-color-N {
+  background-color: #a70cc6;
+  color: #fdff7b;
+}
+
+.res-color-P {
+  background-color: #c09;
+  color: #fdff7b;
+}
+
+.res-color-Q {
+  background-color: #a70cc6;
+  color: #fdff7b;
+}
+
+.res-color-R {
+  background-color: #145aff;
+  color: #fdff7b;
+}
+
+.res-color-S {
+  background-color: #a70cc6;
+  color: #fdff7b;
+}
+
+.res-color-T {
+  background-color: #a70cc6;
+  color: #fdff7b;
+}
+
+.res-color-V {
+  background-color: #e6e600;
+  color: #000;
+}
+
+.res-color-W {
+  background-color: #0bcf00;
+  color: #000;
+}
+
+.res-color-Y {
+  background-color: #18ff0b;
+  color: #000;
+}
+.MutationDetails-div .Anchor-div {
+  position: fixed;
+  bottom: 200px;
+  left: 100px;
+  z-index: 100000000;
+}
+.MutationDetails-div .Anchor-div {
+  position: fixed;
+  bottom: 200px;
+  left: 100px;
+  z-index: 500;
+  background-color: #fff;
+  font-size: 22px;
+  border: 1px solid black;
+  padding: 10px;
+}
+.MutationDetails-div .Anchor-div a {
+  font-size: 18px !important;
+  font-weight: 400;
+}

src/routes/Home/SearchDetails/index.css

+.search-details-div .Molstar-div {
+  height: 550px;
+  width: 800px;
+}
+.Molstar-div2 {
+  width: 60%;
+  height: 600px;
+}
+.search-details-div .title-div {
+  font-size: 30px;
+  font-weight: 600;
+}
+
+.search-details-div .div-list .list-one {
+  display: flex;
+  align-items: center;
+}
+.search-details-div .div-list .list-one div:first-child {
+  color: black;
+  font-weight: 500;
+  font-size: 18px;
+  margin-right: 10px;
+}
+.search-details-div .ant-collapse > .ant-collapse-item > .ant-collapse-header {
+  font-weight: 500;
+  font-size: 18px;
+}
+.search-details-div .isShowDiv {
+  display: none;
+}
+.search-details-div .title-div-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.search-details-div .Jsme-div {
+  border: 1px solid black;
+}
+.search-details-div .TabPane-center {
+  display: flex;
+}
+.search-details-div .Structure-right {
+  width: 40%;
+}
+.search-details-div .div-list2 .list-one2 {
+  display: flex;
+  align-items: center;
+  width: 50%;
+}
+.search-details-div .div-list2 .list-one2 div:first-child {
+  color: black;
+  font-weight: 500;
+  font-size: 18px;
+  margin-right: 10px;
+}
+.search-details-div .Calcilated {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.search-details-div .div-list2 {
+  width: 50%;
+}
+.list-one2 {
+  display: flex;
+  align-items: center;
+  width: 50%;
+}
+.list-one2 div:first-child {
+  color: black;
+  font-weight: 500;
+  font-size: 18px;
+  margin-right: 10px;
+}
+.Calcilated {
+  display: flex;
+  flex-wrap: wrap;
+}
+.DataList-left {
+  width: 100%;
+}
+.search-details-div .Anchor-div {
+  position: fixed;
+  bottom: 200px;
+  left: 100px;
+  z-index: 500;
+  background-color: #fff;
+  font-size: 22px;
+  border: 1px solid black;
+  padding: 10px;
+}
+.search-details-div .Anchor-div a {
+  font-size: 18px !important;
+  font-weight: 400;
+}
+
+.search-details-div .Synonyms-div {
+  display: flex;
+  flex-flow: wrap;
+}

src/routes/Home/SearchList/index.css

+.search-div {
+}
+.search-div .list-div-one {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.search-div .list-div-left {
+  width: 30%;
+}
+.search-div .list-div-right {
+  width: 70%;
+  word-wrap: break-word;
+  word-break: normal;
+}
+.Molstar-div {
+  height: 800px;
+  width: 800px;
+}
+.search-div .btn-list {
+  height: 100%;
+  display: flex;
+  width: 20%;
+  flex-wrap: wrap;
+}
+.search-div .search-content {
+  color: #000000d9;
+  font-weight: 500;
+  font-size: 30px;
+}
+.search-div .CheckboxList {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  padding: 10px;
+}
+.search-div .CheckboxList button {
+  margin-left: 10px;
+}
+.search-div .list-div-one .list-div-right span {
+  font-weight: 500;
+  color: black;
+}
+.search-div .ant-card-extra {
+  margin-left: initial !important;
+  font-weight: 500;
+}
+.search-div .list-div-one .btn-list span {
+  font-weight: 500;
+  color: black;
+}
+.search-div .list-div-one .btn-list .right-div {
+  width: 100%;
+}
+.search-div .isShowDiv {
+  display: none;
+}

src/routes/Home/TargetDetails/index.css

+.Molstar-div {
+  height: 500px;
+  width: 500px;
+}
+.Molstar-div2 {
+  height: 500px;
+  width: 70%;
+}
+.search-TargetDetails-div .TabPane-center {
+  display: flex;
+}
+
+.search-TargetDetails-div .Structure-right {
+  width: 50%;
+}
+
+.search-TargetDetails-div .title-div {
+  font-size: 30px;
+  font-weight: 600;
+}
+
+.search-TargetDetails-div .div-list .list-one {
+  display: flex;
+  align-items: center;
+}
+.search-TargetDetails-div .div-list .list-one div:first-child {
+  color: black;
+  font-weight: 500;
+  font-size: 18px;
+  margin-right: 10px;
+}
+.search-TargetDetails-div
+  .ant-collapse
+  > .ant-collapse-item
+  > .ant-collapse-header {
+  font-weight: 500;
+  font-size: 18px;
+}
+.search-TargetDetails-div .isShowDiv {
+  display: none;
+}
+.search-TargetDetails-div .title-div-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.search-TargetDetails-div .Jsme-div {
+  border: 1px solid black;
+}
+
+.search-TargetDetails-div .Radio-div {
+  display: flex;
+  justify-content: flex-end;
+  height: 50px;
+  align-items: center;
+}
+
+.search-TargetDetails-div .Sequence-div {
+  overflow: scroll;
+  display: flex;
+}
+.search-TargetDetails-div .zimu-div {
+  display: flex;
+}
+.search-TargetDetails-div .Sequenceone-div {
+  margin-right: 5px;
+}
+
+.search-TargetDetails-div .zimu-div div {
+  padding: 5px;
+}
+.res-color-A {
+  background-color: #e6e600;
+  color: #000;
+}
+
+.res-color-C {
+  background-color: #b2b548;
+  color: #000;
+}
+
+.res-color-D {
+  background-color: #e60a0a;
+  color: #fdff7b;
+}
+
+.res-color-E {
+  background-color: #e60a0a;
+  color: #fdff7b;
+}
+
+.res-color-F {
+  background-color: #18ff0b;
+  color: #000;
+}
+
+.res-color-G {
+  background-color: #ff00f2;
+  color: #000;
+}
+
+.res-color-H {
+  background-color: #0093dd;
+  color: #000;
+}
+
+.res-color-I {
+  background-color: #e6e600;
+  color: #000;
+}
+
+.res-color-K {
+  background-color: #145aff;
+  color: #fdff7b;
+}
+
+.res-color-L {
+  background-color: #e6e600;
+  color: #000;
+}
+
+.res-color-M {
+  background-color: #e6e600;
+  color: #000;
+}
+
+.res-color-N {
+  background-color: #a70cc6;
+  color: #fdff7b;
+}
+
+.res-color-P {
+  background-color: #c09;
+  color: #fdff7b;
+}
+
+.res-color-Q {
+  background-color: #a70cc6;
+  color: #fdff7b;
+}
+
+.res-color-R {
+  background-color: #145aff;
+  color: #fdff7b;
+}
+
+.res-color-S {
+  background-color: #a70cc6;
+  color: #fdff7b;
+}
+
+.res-color-T {
+  background-color: #a70cc6;
+  color: #fdff7b;
+}
+
+.res-color-V {
+  background-color: #e6e600;
+  color: #000;
+}
+
+.res-color-W {
+  background-color: #0bcf00;
+  color: #000;
+}
+
+.res-color-Y {
+  background-color: #18ff0b;
+  color: #000;
+}
+.MutationDetails-div .SequenceAlignmentList-div {
+  overflow-x: hidden;
+}
+.table-sequence-div {
+  white-space: nowrap;
+  display: flex;
+}
+.table-sequence-div div {
+  width: 12px;
+  text-align: center;
+}
+
+.search-TargetDetails-div .Anchor-div {
+  position: fixed;
+  bottom: 200px;
+  left: 100px;
+  z-index: 500;
+  background-color: #fff;
+  font-size: 22px;
+  border: 1px solid black;
+  padding: 10px;
+}
+.search-TargetDetails-div .Anchor-div a {
+  font-size: 18px !important;
+  font-weight: 400;
+}

src/routes/Home/dockingUploadDetails/index.js

+import React, { Component } from 'react'
+
+export default class dockingUploadDetails extends Component {
+    componentDidMount(){
+
+     window.open('http://52.83.230.236:8000/docking_upload')
+      }
+   
+  render() {
+    return (
+      <div>
+
+      </div>
+    )
+  }
+}

src/routes/Home/style.css

+.home .top-div{
+    /* display: flex; */
+    justify-content: center;
+    align-items: center;
+    padding: 10px 0px;
+}
+.home .bottom-div{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.home .Radio-div{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 0px;
+}
+.home .isShowDiv{
+    display: none;
+}
+.home .top-div label{
+    font-weight: 600;
+    font-size: 20px;
+}
+.home .Radio-div label{
+    font-size: 18px;
+    font-weight: 500;
+   
+}
+.home .top-div .mutation-label label{
+    font-weight: 300;
+    font-size: 16px;
+}
+.home .Radio-div .mutation-label label{
+    font-size: 16px;
+    font-weight: 300;
+   
+}
+
+.home .Tips-div{
+    line-height: 28px;
+    width: 500px;
+    
+}
\ No newline at end of file

src/routes/Index/index.js

+import React from 'react'
+import {Layout} from 'antd'
+import SiderNav from '../../components/SiderNav'
+import ContentMain from '../../components/ContentMain'
+import HeaderBar from '../../components/HeaderBar'
+
+const {Sider, Header, Content, Footer} = Layout
+
+
+class Index extends React.Component{
+  state = {
+    collapsed: false
+  }
+
+  toggle = () => {
+    // console.log(this)  状态提升后，到底是谁调用的它
+    this.setState({
+      collapsed: !this.state.collapsed
+    })
+  }
+  render() {
+    // 设置Sider的minHeight可以使左右自适应对齐
+    return (
+      <div id='page'>
+        <Layout>
+          <Sider collapsible
+                 trigger={null}
+                 collapsed={this.state.collapsed}
+                 >
+            <SiderNav/>
+          </Sider>
+          <Layout>
+            <Header style={{background: '#fff', padding: '0 16px'}}>
+              <HeaderBar collapsed={this.state.collapsed} onToggle={this.toggle}/>
+            </Header>
+            <Content>
+              <ContentMain/>
+            </Content>
+            {/* <Footer></Footer> */}
+          </Layout>
+        </Layout>
+      </div>
+    );
+  }
+}
+export default Index
\ No newline at end of file

src/routes/Kinase/LigandDetails/index.css

+.Molstar-div{
+    height: 500px;
+    width: 500px;
+    
+}
+.Molstar-div2{
+    height: 500px;
+    width:70%;
+    
+}
+.LigandDetails-div .TabPane-center{
+  display: flex;
+
+}
+.LigandDetails-div .left-title{
+    white-space: nowrap;
+}
+
+
+
+
+.LigandDetails-div .Structure-right{
+  width: 30%;
+}
+
+.LigandDetails-div .title-div{
+    font-size: 30px;
+    font-weight: 600;
+}
+
+.LigandDetails-div .div-list .list-one{
+    display: flex;
+align-items: center;
+}
+.LigandDetails-div .div-list .list-one 
+div:first-child{
+    color: black;
+    font-weight: 500;
+    font-size: 18px;
+    margin-right: 10px;
+}
+.LigandDetails-div 
+.ant-collapse > .ant-collapse-item > .ant-collapse-header{
+    font-weight: 500;
+    font-size: 18px;
+}
+.LigandDetails-div .isShowDiv{
+    display: none;
+}
+.LigandDetails-div .title-div-top{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.LigandDetails-div .Jsme-div{
+    border: 1px solid  black;
+}
+
+.LigandDetails-div .Radio-div{
+    display: flex;
+    justify-content: flex-end;
+    height: 50px;
+    align-items: center;
+}
+
+.LigandDetails-div .Sequence-div{
+    overflow:scroll;
+    display: flex;
+    
+}
+.LigandDetails-div .zimu-div{
+    display: flex;
+}
+.LigandDetails-div .Sequenceone-div{
+    margin-right: 5px;
+}
+
+
+.search-details-div .zimu-div div{
+    padding: 5px;
+}
+.list-one2{
+    display: flex;
+align-items: center;
+width: 50%;
+}
+.list-one2 
+div:first-child{
+    color: black;
+    font-weight: 500;
+    font-size: 18px;
+    margin-right: 10px;
+  
+}
+.Calcilated{
+    display: flex;
+    flex-wrap: wrap;
+}

src/routes/Kinase/SearchDetails/index.css

+.Molstar-div{
+    height: 500px;
+    width: 500px;
+    
+}
+.Molstar-div2{
+    height: 500px;
+    width:70%;
+    
+}
+.LigandDetails-div .TabPane-center{
+  display: flex;
+
+}
+.LigandDetails-div .left-title{
+    white-space: nowrap;
+}
+
+
+
+
+.LigandDetails-div .Structure-right{
+  width: 30%;
+}
+
+.LigandDetails-div .title-div{
+    font-size: 30px;
+    font-weight: 600;
+}
+
+.LigandDetails-div .div-list .list-one{
+    display: flex;
+align-items: center;
+}
+.LigandDetails-div .div-list .list-one 
+div:first-child{
+    color: black;
+    font-weight: 500;
+    font-size: 18px;
+    margin-right: 10px;
+}
+.LigandDetails-div 
+.ant-collapse > .ant-collapse-item > .ant-collapse-header{
+    font-weight: 500;
+    font-size: 18px;
+}
+.LigandDetails-div .isShowDiv{
+    display: none;
+}
+.LigandDetails-div .title-div-top{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.LigandDetails-div .Jsme-div{
+    border: 1px solid  black;
+}
+
+.LigandDetails-div .Radio-div{
+    display: flex;
+    justify-content: flex-end;
+    height: 50px;
+    align-items: center;
+}
+
+.LigandDetails-div .Sequence-div{
+    overflow:scroll;
+    display: flex;
+    
+}
+.LigandDetails-div .zimu-div{
+    display: flex;
+}
+.LigandDetails-div .Sequenceone-div{
+    margin-right: 5px;
+}
+
+
+.search-details-div .zimu-div div{
+    padding: 5px;
+}
+.list-one2{
+    display: flex;
+align-items: center;
+width: 50%;
+}
+.list-one2 
+div:first-child{
+    color: black;
+    font-weight: 500;
+    font-size: 18px;
+    margin-right: 10px;
+  
+}
+.Calcilated{
+    display: flex;
+    flex-wrap: wrap;
+}
+

src/routes/Kinase/SearchList/index.css

+.search-div{
+    
+}
+ .search-div .list-div-one{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.search-div .list-div-left{
+    width: 30%;
+}
+.search-div .list-div-right{
+    width: 70%;
+    word-wrap: break-word; word-break: normal;
+}
+ .Molstar-div{
+    height: 800px;
+    width: 800px;
+    
+}
+.search-div .btn-list{
+    height: 100%;
+    display: flex;
+    width: 20%;
+    flex-wrap: wrap;
+}
+.search-div .search-content{
+    color: #000000d9;
+    font-weight: 500;
+    font-size: 30px;
+}
+.search-div .CheckboxList{
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    padding: 10px;
+}
+.search-div .CheckboxList button{
+    margin-left: 10px;
+}
+.search-div .list-div-one .list-div-right span{
+    font-weight: 500;
+    color: black;
+
+}
+.search-div .ant-card-extra{
+ margin-left: initial !important;
+ font-weight: 500;
+
+}
+.search-div .list-div-one .btn-list span{
+    font-weight: 500;
+    color: black;
+
+}
+.search-div .list-div-one .btn-list .right-div {
+   width: 100%;
+
+}
+.search-div .isShowDiv{
+    display: none;
+}
+
+

src/routes/Kinase/TargetDetails/index.css

+.Molstar-div{
+    height: 500px;
+    width: 500px;
+    
+}
+.Molstar-div2{
+    height: 500px;
+    width:70%;
+    
+}
+.search-details-div .TabPane-center{
+  display: flex;
+
+}
+
+
+.search-details-div .Structure-right{
+  width: 30%;
+}
+
+.search-details-div .title-div{
+    font-size: 30px;
+    font-weight: 600;
+}
+
+.search-details-div .div-list .list-one{
+    display: flex;
+align-items: center;
+}
+.search-details-div .div-list .list-one 
+div:first-child{
+    color: black;
+    font-weight: 500;
+    font-size: 18px;
+    margin-right: 10px;
+}
+.search-details-div 
+.ant-collapse > .ant-collapse-item > .ant-collapse-header{
+    font-weight: 500;
+    font-size: 18px;
+}
+.search-details-div .isShowDiv{
+    display: none;
+}
+.search-details-div .title-div-top{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.search-details-div .Jsme-div{
+    border: 1px solid  black;
+}
+
+.search-details-div .Radio-div{
+    display: flex;
+    justify-content: flex-end;
+    height: 50px;
+    align-items: center;
+}
+
+.search-details-div .Sequence-div{
+    overflow:scroll;
+    display: flex;
+    
+}
+.search-details-div .zimu-div{
+    display: flex;
+    background-color: #f0f0f0;
+}
+.search-details-div .Sequenceone-div{
+    margin-right: 5px;
+}
+
+
+.search-details-div .zimu-div div{
+    padding: 5px;
+}
+.res-color-A {
+    background-color: #e6e600;
+    color: #000;
+  }
+  
+  .res-color-C {
+    background-color: #b2b548;
+    color: #000;
+  }
+  
+  .res-color-D {
+    background-color: #e60a0a;
+    color: #fdff7b;
+  }
+  
+  .res-color-E {
+    background-color: #e60a0a;
+    color: #fdff7b;
+  }
+  
+  .res-color-F {
+    background-color: #18ff0b;
+    color: #000;
+  }
+  
+  .res-color-G {
+    background-color: #ff00f2;
+    color: #000;
+  }
+  
+  .res-color-H {
+    background-color: #0093dd;
+    color: #000;
+  }
+  
+  .res-color-I {
+    background-color: #e6e600;
+    color: #000;
+  }
+  
+  .res-color-K {
+    background-color: #145aff;
+    color: #fdff7b;
+  }
+  
+  .res-color-L {
+    background-color: #e6e600;
+    color: #000;
+  }
+  
+  .res-color-M {
+    background-color: #e6e600;
+    color: #000;
+  }
+  
+  .res-color-N {
+    background-color: #a70cc6;
+    color: #fdff7b;
+  }
+  
+  .res-color-P {
+    background-color: #c09;
+    color: #fdff7b;
+  }
+  
+  .res-color-Q {
+    background-color: #a70cc6;
+    color: #fdff7b;
+  }
+  
+  .res-color-R {
+    background-color: #145aff;
+    color: #fdff7b;
+  }
+  
+  .res-color-S {
+    background-color: #a70cc6;
+    color: #fdff7b;
+  }
+  
+  .res-color-T {
+    background-color: #a70cc6;
+    color: #fdff7b;
+  }
+  
+  .res-color-V {
+    background-color: #e6e600;
+    color: #000;
+  }
+  
+  .res-color-W {
+    background-color: #0bcf00;
+    color: #000;
+  }
+  
+  .res-color-Y {
+    background-color: #18ff0b;
+    color: #000;
+  }
+
+
+

src/routes/Kinase/style.css

+.home .top-div{
+    /* display: flex; */
+    justify-content: center;
+    align-items: center;
+    padding: 10px 0px;
+}
+.home .bottom-div{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.home .Radio-div{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 0px;
+}
+.home .isShowDiv{
+    display: none;
+}
+.home .top-div label{
+    font-weight: 600;
+    font-size: 20px;
+}
+.home .Radio-div label{
+    font-size: 18px;
+    font-weight: 500;
+   
+}
+.home .top-div .mutation-label label{
+    font-weight: 300;
+    font-size: 16px;
+}
+.home .Radio-div .mutation-label label{
+    font-size: 16px;
+    font-weight: 300;
+   
+}
+
+.home .Tips-div{
+    line-height: 28px;
+    width: 500px;
+    
+}
\ No newline at end of file

src/routes/KinaseSearch/index.js

+import React, { Component } from 'react'
+
+export default class dockingUploadDetails extends Component {
+  componentDidMount () {
+
+    window.open('http://52.83.169.190:3001')
+  }
+
+  render () {
+    return (
+      <div>
+
+      </div>
+    )
+  }
+}

src/routes/KnowledgeMap/index.css

+.KnowledgeMap-div {
+  position: relative;
+  height: 100vh;
+}
+
+.KnowledgeMap-div .KnowledgeMap-left-div {
+  max-width: 320px;
+  box-sizing: border-box;
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  z-index: 1000;
+}
+.KnowledgeMap-div .KnowledgeMap-right-div {
+  height: 100vh;
+}
+
+.KnowledgeMap-div .login-form {
+  max-width: 320px;
+}
+.KnowledgeMap-div .login-form-forgot {
+  float: right;
+}
+.KnowledgeMap-div .login-form-button {
+  width: 100%;
+}

src/routes/KnowledgeMap/index.js

+import React, { Component } from 'react'
+
+export default class dockingUploadDetails extends Component {
+  componentDidMount () {
+
+    window.open('http://52.83.169.190:3002')
+  }
+
+  render () {
+    return (
+      <div>
+
+      </div>
+    )
+  }
+}

src/routes/Login/LoginForm.js

+import React from 'react'
+import { calculateWidth } from '../../utils/utils'
+import { withRouter } from 'react-router-dom'
+import { inject, observer } from 'mobx-react/index'
+import { Form, Input, message } from 'antd'
+import PromptBox from '../../components/PromptBox'
+import { request } from '../../utils/request'
+import qs from 'qs'
+import md5 from 'js-md5'
+
+
+@withRouter @inject('appStore') @observer @Form.create()
+class LoginForm extends React.Component {
+  state = {
+    focusItem: -1,   //保存当前聚焦的input
+    code: ''         //验证码
+  }
+
+  componentDidMount () {
+    // this.createCode()
+  }
+
+  /**
+   * 生成验证码
+   */
+  // createCode = () => {
+  //   const ctx = this.canvas.getContext('2d')
+  //   const chars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
+  //   let code = ''
+  //   ctx.clearRect(0, 0, 80, 39)
+  //   for (let i = 0; i < 4; i++) {
+  //     const char = chars[randomNum(0, 57)]
+  //     code += char
+  //     ctx.font = randomNum(20, 25) + 'px SimHei'  //设置字体随机大小
+  //     ctx.fillStyle = '#D3D7F7'
+  //     ctx.textBaseline = 'middle'
+  //     ctx.shadowOffsetX = randomNum(-3, 3)
+  //     ctx.shadowOffsetY = randomNum(-3, 3)
+  //     ctx.shadowBlur = randomNum(-3, 3)
+  //     ctx.shadowColor = 'rgba(0, 0, 0, 0.3)'
+  //     let x = 80 / 5 * (i + 1)
+  //     let y = 39 / 2
+  //     let deg = randomNum(-25, 25)
+  //     /**设置旋转角度和坐标原点**/
+  //     ctx.translate(x, y)
+  //     ctx.rotate(deg * Math.PI / 180)
+  //     ctx.fillText(char, 0, 0)
+  //     /**恢复旋转角度和坐标原点**/
+  //     ctx.rotate(-deg * Math.PI / 180)
+  //     ctx.translate(-x, -y)
+  //   }
+  //   this.setState({
+  //     code
+  //   })
+  // }
+  loginSubmit = (e) => {
+    e.preventDefault()
+    this.setState({
+      focusItem: -1
+    })
+    this.props.form.validateFields((err, values) => {
+      // this.props.appStore.toggleLogin(true, {username: values.username})
+      // const {from} = this.props.location.state || {from: {pathname: '/'}}
+      // this.props.history.push(from)
+
+      if (!err) {
+        // 表单登录时，若验证码长度小于4则不会验证，所以我们这里要手动验证一次，线上的未修复
+        // if (this.state.code.toUpperCase() !== values.verification.toUpperCase()) {
+        //   this.props.form.setFields({
+        //     verification: {
+        //       value: values.verification,
+        //       errors: [new Error('验证码错误')]
+        //     }
+        //   })
+        //   return
+        // }
+        // console.log();
+
+        // const users = this.props.appStore.users
+        // // 检测用户名是否存在
+        // const result = users.find(item => item.username === values.username)
+        // if (!result) {
+        //   this.props.form.setFields({
+        //     username: {
+        //       value: values.username,
+        //       errors: [new Error('用户名不存在')]
+        //     }
+        //   })
+        //   return
+        // } else {
+        //   //检测密码是否错误
+        //   if (result.passwd !== values.passwd) {
+        //     this.props.form.setFields({
+        //       passwd: {
+        //         value: values.passwd,
+        //         errors: [new Error('密码错误')]
+        //       }
+        //     })
+        //     return
+        //   }
+        // }
+        const newPasswd = md5(values.passwd)
+        values.passwd = newPasswd
+        request.post('/gpcr/login', qs.stringify(values))
+          .then(res => {
+            console.log(res)
+            if (res.data.code === 200) {
+              this.props.appStore.toggleLogin(true, { username: values.username })
+              const { from } = this.props.location.state || { from: { pathname: '/' } }
+              this.props.history.push(from)
+            }
+            else {
+              message.error(res.data.msg)
+            }
+          })
+          .catch(err => {
+            console.error(err)
+          })
+
+
+      }
+    })
+  }
+  register = () => {
+    this.props.switchShowBox('register')
+    setTimeout(() => this.props.form.resetFields(), 500)
+  }
+
+  render () {
+    const { getFieldDecorator, getFieldError } = this.props.form
+    const { focusItem, } = this.state
+    return (
+      <div className={this.props.className}>
+        <h3 className='title'>管理员登录</h3>
+        <Form onSubmit={this.loginSubmit}>
+          <Form.Item help={getFieldError('username') &&
+            <PromptBox info={getFieldError('username')} width={calculateWidth(getFieldError('username'))} />}>
+            {getFieldDecorator('username', {
+              rules: [{ required: true, message: '请输入用户名' }]
+            })(
+              <Input
+                onFocus={() => this.setState({ focusItem: 0 })}
+                onBlur={() => this.setState({ focusItem: -1 })}
+                maxLength={16}
+                placeholder='用户名'
+                addonBefore={<span className='iconfont icon-User' style={focusItem === 0 ? styles.focus : {}} />} />
+            )}
+          </Form.Item>
+          <Form.Item help={getFieldError('passwd') &&
+            <PromptBox info={getFieldError('passwd')} width={calculateWidth(getFieldError('passwd'))} />}>
+            {getFieldDecorator('passwd', {
+              rules: [{ required: true, message: '请输入密码' }]
+            })(
+              <Input
+                onFocus={() => this.setState({ focusItem: 1 })}
+                onBlur={() => this.setState({ focusItem: -1 })}
+                type='password'
+                maxLength={16}
+                placeholder='密码'
+                addonBefore={<span className='iconfont icon-suo1' style={focusItem === 1 ? styles.focus : {}} />} />
+            )}
+          </Form.Item>
+          {/* <Form.Item help={getFieldError('verification') &&
+          <PromptBox info={getFieldError('verification')} width={calculateWidth(getFieldError('verification'))}/>}>
+            {getFieldDecorator('verification', {
+              validateFirst: true,
+              rules: [
+                {required: true, message: '请输入验证码'},
+                {
+                  validator: (rule, value, callback) => {
+                    if (value.length >= 4 && code.toUpperCase() !== value.toUpperCase()) {
+                      callback('验证码错误')
+                    }
+                    callback()
+                  }
+                }
+              ]
+            })(
+              <Row>
+                <Col span={15}>
+                  <Input
+                    onFocus={() => this.setState({focusItem: 2})}
+                    onBlur={() => this.setState({focusItem: -1})}
+                    maxLength={4}
+                    placeholder='验证码'
+                    addonBefore={<span className='iconfont icon-securityCode-b'
+                                       style={focusItem === 2 ? styles.focus : {}}/>}/>
+                </Col>
+                <Col span={9}>
+                  <canvas onClick={this.createCode} width="80" height='39' ref={el => this.canvas = el}/>
+                </Col>
+              </Row>
+            )}
+          </Form.Item> */}
+          <div className='bottom'>
+            <input className='loginBtn' type="submit" value='登录' />
+            {/* <span className='registerBtn' onClick={this.register}>注册</span> */}
+          </div>
+        </Form>
+        <div className='footer'>
+          <div>欢迎登陆雅深智慧平台</div>
+        </div>
+      </div>
+    )
+  }
+}
+
+const styles = {
+  focus: {
+    width: '20px',
+    opacity: 1
+  },
+}
+
+export default LoginForm
\ No newline at end of file

src/routes/Login/RegisterForm.js

+import React from 'react'
+import { Form, Input, message } from 'antd'
+import { inject, observer } from 'mobx-react/index'
+import { calculateWidth } from '../../utils/utils'
+import PromptBox from '../../components/PromptBox'
+
+
+@inject('appStore') @observer @Form.create()
+class RegisterForm extends React.Component {
+  state = {
+    focusItem: -1
+  }
+  registerSubmit = (e) => {
+    var baseURL = 'http://52.83.169.190:8005'
+    var baseURL = 'http://52.83.169.190:8005'
+    e.preventDefault()
+    this.setState({
+      focusItem: -1
+    })
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        const users = this.props.appStore.users
+        // 检测用户名是否存在
+        const result = users.find(item => item.username === values.registerUsername)
+        if (result) {
+          this.props.form.setFields({
+            registerUsername: {
+              value: values.registerUsername,
+              errors: [new Error('用户名已存在')]
+            }
+          })
+          return
+        }
+
+        const obj = [...this.props.appStore.users, {
+          username: values.registerUsername,
+          password: values.registerPassword
+        }]
+        localStorage.setItem('users', JSON.stringify(obj))
+        this.props.appStore.initUsers()
+        message.success('注册成功')
+      }
+    })
+  }
+  gobackLogin = () => {
+    var baseURL = 'http://52.83.169.190:8005'
+    var baseURL = 'http://52.83.169.190:8005'
+    this.props.switchShowBox('login')
+    setTimeout(() => this.props.form.resetFields(), 500)
+  }
+
+  render () {
+    const { getFieldDecorator, getFieldError, getFieldValue } = this.props.form
+    const { focusItem } = this.state
+    return (
+      <div className={this.props.className}>
+        <h3 className='title'>管理员注册</h3>
+        <Form onSubmit={this.registerSubmit}>
+          <Form.Item help={getFieldError('registerUsername') && <PromptBox info={getFieldError('registerUsername')}
+            width={calculateWidth(getFieldError('registerUsername'))} />}>
+            {getFieldDecorator('registerUsername', {
+              validateFirst: true,
+              rules: [
+                { required: true, message: '用户名不能为空' },
+                { pattern: '^[^ ]+$', message: '不能输入空格' },
+              ]
+            })(
+              <Input
+                onFocus={() => this.setState({ focusItem: 0 })}
+                onBlur={() => this.setState({ focusItem: -1 })}
+                maxLength={16}
+                placeholder='用户名'
+                addonBefore={<span className='iconfont icon-User' style={focusItem === 0 ? styles.focus : {}} />} />
+            )}
+          </Form.Item>
+          <Form.Item help={getFieldError('registerPassword') && <PromptBox info={getFieldError('registerPassword')}
+            width={calculateWidth(getFieldError('registerPassword'))} />}>
+            {getFieldDecorator('registerPassword', {
+              validateFirst: true,
+              rules: [
+                { required: true, message: '密码不能为空' },
+                { pattern: '^[^ ]+$', message: '密码不能有空格' }
+              ]
+            })(
+              <Input
+                onFocus={() => this.setState({ focusItem: 1 })}
+                onBlur={() => this.setState({ focusItem: -1 })}
+                type='password'
+                maxLength={16}
+                placeholder='密码'
+                addonBefore={<span className='iconfont icon-suo1' style={focusItem === 1 ? styles.focus : {}} />} />
+            )}
+          </Form.Item>
+          <Form.Item help={getFieldError('confirmPassword') && <PromptBox info={getFieldError('confirmPassword')}
+            width={calculateWidth(getFieldError('confirmPassword'))} />}>
+            {getFieldDecorator('confirmPassword', {
+              validateFirst: true,
+              rules: [
+                { required: true, message: '请确认密码' },
+                {
+                  validator: (rule, value, callback) => {
+                    if (value && value !== getFieldValue('registerPassword')) {
+                      callback('两次输入不一致！')
+                    }
+                    callback()
+                  }
+                },
+              ]
+            })(
+              <Input
+                onFocus={() => this.setState({ focusItem: 2 })}
+                onBlur={() => this.setState({ focusItem: -1 })}
+                type='password'
+                maxLength={16}
+                placeholder='确认密码'
+                addonBefore={<span className='iconfont icon-suo1' style={focusItem === 2 ? styles.focus : {}} />} />
+            )}
+          </Form.Item>
+          <div className='bottom'>
+            <input className='loginBtn' type="submit" value='注册' />
+            <span className='registerBtn' onClick={this.gobackLogin}>返回登录</span>
+          </div>
+        </Form>
+        <div className='footer'>
+          <div>欢迎登陆后台管理系统</div>
+        </div>
+      </div>
+    )
+  }
+}
+
+const styles = {
+  focus: {
+    width: '20px',
+    opacity: 1
+  },
+}
+
+export default RegisterForm
\ No newline at end of file

src/routes/Login/index.js

+import React from 'react'
+import BGParticle from '../../utils/BGParticle'
+import { notification } from 'antd'
+import './style.css'
+import { withRouter } from 'react-router-dom'
+import { inject, observer } from 'mobx-react/index'
+import Loading2 from '../../components/Loading2'
+import { preloadingImages } from '../../utils/utils'
+import LogoTitlte from '../../components/LogoTitlte/index'
+import 'animate.css'
+import LoginForm from './LoginForm'
+import RegisterForm from './RegisterForm'
+
+const url = 'http://47.99.130.140/imgs/wallhaven-g83v2e.jpg'
+const imgs = [
+  'http://47.99.130.140/imgs/wallhaven-p8r1e9.jpg',
+  'http://47.99.130.140/imgs/wallhaven-e7zyy8.jpg',
+  'http://47.99.130.140/imgs/wallhaven-6k9e7q.jpg',
+  'http://47.99.130.140/imgs/photo.jpg',
+]
+
+
+
+
+@withRouter @inject('appStore') @observer
+class Login extends React.Component {
+
+  state = {
+    showBox: 'login',   //展示当前表单
+    url: '',  //背景图片
+    loading: false,
+    loading2: false,
+  }
+
+  componentDidMount () {
+
+
+    this.props.appStore.toggleLogin(true, { username: 'username' })
+    const { from } = this.props.location.state || { from: { pathname: '/home' } }
+    this.props.history.push(from)
+
+    var baseURL = 'http://52.83.169.190:8005'
+    var baseURL = 'http://52.83.169.190:8005'
+
+
+  }
+
+  componentWillUnmount () {
+    var baseURL = 'http://52.83.169.190:8005'
+    var baseURL = 'http://52.83.169.190:8005'
+    this.particle && this.particle.destory()
+    notification.destroy()
+
+  }
+  //载入页面时的一些处理
+  initPage = () => {
+    this.setState({
+      loading: true
+    })
+    this.props.appStore.initUsers()
+    this.loadImageAsync(url).then(url => {
+      this.setState({
+        loading: false,
+        url
+      })
+    }).then(() => {
+      //为什么写在then里？id为backgroundBox的DOM元素是在loading为false时才有，而上面的setState可能是异步的，必须等到setState执行完成后才去获取dom
+      this.particle = new BGParticle('backgroundBox')
+      this.particle.init()
+      // notification.open({
+      //   message:<ul><li>初始账号：admin</li><li>初始密码：admin</li></ul>,
+      //   duration:0,
+      //   className:'login-notification'
+      // })
+    })
+  }
+  //切换showbox
+  switchShowBox = (box) => {
+    this.setState({
+      showBox: box
+    })
+  }
+
+  //登录的背景图太大，等载入完后再显示，实际上是图片预加载，
+  loadImageAsync (url) {
+
+    return new Promise(function (resolve, reject) {
+      const image = new Image()
+      image.onload = function () {
+        resolve(url)
+      }
+      image.onerror = function () {
+        console.log('图片载入错误')
+      }
+      image.src = url
+    })
+  }
+
+  render () {
+    const { showBox, loading } = this.state
+    return (
+      <div className='index-div'>
+        <LogoTitlte></LogoTitlte>
+        <div id='login-page'>
+          <div className='home-page-div'>
+            <div>Yashen API 是一个集成了化学、生物学、计算化学、计算生物学和机器学习的数据驱动的药物发现平台，帮助药物化学家在药物智能发现领域大展身手。</div>
+            <div> 我们的数据平台专注于挖掘包括药物和配体结构、蛋白质结构和突变数据在内的 GPCR 数据、Kinase 数据，并开发知识图谱和计算工具来加速药物发现。</div>
+            <div> Yashen API is a data-driven drug discovery platform, which integrates chemistry, biology, computational chemistry, computational biology and machine learning to empower medicinal chemists to make intelligent drug discovery decisions.   </div>
+            <div>Our platform focuses on mining available GPCR knowledge and Kinase knowledge including corresponding drugs and ligands structure, protein structures and mutation data, creating knowledge graph and developing computational tools to accelerate drug discovery.</div>
+          </div>
+          {
+            loading ?
+              <div>
+                <h3 style={styles.loadingTitle} className='animated bounceInLeft'>载入中...</h3>
+                <Loading2 />
+              </div> :
+              <div>
+                <div id='backgroundBox' style={styles.backgroundBox} />
+                <div className='container'>
+                  <LoginForm
+                    className={showBox === 'login' ? 'box showBox' : 'box hiddenBox'}
+                    switchShowBox={this.switchShowBox} />
+                  <RegisterForm
+                    className={showBox === 'register' ? 'box showBox' : 'box hiddenBox'}
+                    switchShowBox={this.switchShowBox} />
+                </div>
+              </div>
+          }
+
+        </div>
+
+      </div>
+    )
+  }
+}
+
+const styles = {
+  backgroundBox: {
+    position: 'fixed',
+    top: '0',
+    left: '0',
+    width: '100vw',
+    height: '100vh',
+    // backgroundImage: `url(${url})`,
+    backgroundSize: 'cover',
+    transition: 'all .5s',
+    // backgroundColor: '#4FA1D9'
+  },
+  focus: {
+    // transform: 'scale(0.7)',
+    width: '20px',
+    opacity: 1
+  },
+  loadingBox: {
+    position: 'fixed',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%,-50%)'
+  },
+  loadingTitle: {
+    position: 'fixed',
+    top: '50%',
+    left: '50%',
+    marginLeft: -45,
+    marginTop: -18,
+    color: '#000',
+    fontWeight: 500,
+    fontSize: 24
+  },
+}
+
+export default Login