题库布局

src/components/problems/index.js

+import React, { Component } from 'react';
+import './index.scss'
+import { HeaderBar, CallApp } from "@common/index"
+
+class Problems extends Component {
+  state = {
+    isShowAnswer: false,
+    answer: '@nishizhen：个人感觉逻辑回归和线性回归首先都是广义的线性回归，\n' +
+      '其次经典线性模型的优化目标函数是最小二乘，而逻辑回归则是似然函数，\n' +
+      '另外线性回归在整个实数域范围内进行预测，敏感度一致，而分类范围，需要在[0,1]。逻辑回归就是一种减小预测范围，将预测值限定为[0,1]间的一种回归模型，因而对于这类问题来说，逻辑回归的鲁棒性比线性回归的要好。\n' +
+      '@乖乖癞皮狗：逻辑回归的模型本质上是一个线性回归模型，逻辑回归都是以线性回归为理论支持的。但线性回归模型无法做到sigmoid的非线性形式，sigmoid可以轻松处理0/1分类问题。\n' +
+      '                            ',
+  }
+
+  render() {
+    const {isShowAnswer, answer} = this.state
+    return (
+      <article id={'problems'}>
+        <HeaderBar title='机器学习' arrow={true} cart={false}></HeaderBar>
+        <div className="topic">
+          1.请用python编写函数find_string，从文本中搜索并打印内容，要求支持通配符星号和问号。
+          例子：
+          >>>find_string('hello\nworld\n','wor')
+          ['wor']
+          >>>find_string('hello\nworld\n','l*d')
+          ['ld']
+          >>>find_string('hello\nworld\n','o.')
+          ['or']
+        </div>
+        {
+          !isShowAnswer &&
+          <div className="btn" onClick={() => {
+            this.setState({
+              isShowAnswer: true,
+            });
+          }}>
+            <button>查看解析 <i className={'iconfont iconiconfront-69'}></i></button>
+          </div>
+        }
+        {
+          isShowAnswer &&
+          <div className={`content ${isShowAnswer ? 'slideInDown' : ''}`}>
+            <div className={'title'}>解析</div>
+            <span>
+              {answer}
+            </span>
+          </div>
+        }
+        <footer>
+          <div className="app">更多题目请 <CallApp text={'前往APP'}/></div>
+          <div className="op">
+            <a href="javascript:void(0);" className={'nav'}>上一题</a>
+            <a href="javascript:void(0);" className={'nav'}>下一题</a>
+          </div>
+        </footer>
+      </article>
+    );
+  }
+}
+
+export default Problems;
\ No newline at end of file

src/components/problems/index.scss

+#problems {
+  height: 100%;
+  padding: 58px 0 54px;
+
+  .detail-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  .topic {
+    padding: 0 13px;
+    white-space: pre-wrap;
+    font-size: 16px;
+    color: #555;
+  }
+
+  .btn {
+    position: relative;
+    margin-top: 21px;
+
+    button {
+      position: absolute;
+      right: 0;
+      top: 0;
+      font-size: 12px;
+      color: #09f;
+      -webkit-appearance: none;
+      outline: 0;
+      border: 0;
+      background-color: transparent;
+    }
+
+    .iconfont {
+      font-size: 14px;
+    }
+  }
+
+  .content {
+    margin-top: 16px;
+    padding: 15px 13px;
+    background-color: #F5F5F5;
+    font-size: 16px;
+    color: #333;
+    white-space: pre-wrap;
+
+    .title {
+      margin-bottom: 5px;
+      color: #999;
+      font-size: 14px;
+    }
+  }
+
+  footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 44px;
+    padding: 0 12px 0 15px;
+    border-top: 1px solid #DDD;
+    background-color: #fff;
+    font-size: 12px;
+    color: #09f;
+
+    .app {
+      display: flex;
+      color: #666;
+
+      div {
+        margin-left: 5px;
+        color: #09f;
+      }
+    }
+
+    .nav {
+      display: inline-block;
+      width: 60px;
+      height: 22px;
+      line-height: 22px;
+      border: 1px solid rgba(0, 153, 255, 1);
+      border-radius: 11px;
+      text-align: center;
+
+      &:nth-child(1) {
+        margin-right: 20px;
+      }
+    }
+  }
+}
+
+@keyframes slideInDown {
+  from {
+    transform: translate3d(0, -10%, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+    visibility: visible;
+  }
+}
+
+.slideInDown {
+  animation: slideInDown .3s both;
+}
\ No newline at end of file

src/router/router-config.js

@@ -335,4 +335,9 @@ export default [
     path: '/ai-test',
     component: loadable(() => import('@/components/ai-test')),
   },
+  //题库
+  {
+    path: '/problems',
+    component: loadable(() => import('@/components/problems')),
+  },
 ]