add textbook

front/project/www/app.less

@@ -146,6 +146,10 @@
   padding: 10px;
 }
 
+.p-20 {
+  padding: 20px;
+}
+
 .p-l-5 {
   padding-left: 5px;
 }
@@ -310,6 +314,10 @@
   background: #EAEEF4FF;
 }
 
+.b-c-3 {
+  background: #FBFBFBFF;
+}
+
 .f-s-16 {
   font-size: 16px;
 }

front/project/www/components/Header/index.less

@@ -92,6 +92,7 @@
   }
 }
 
+.textbook #header,
 .main #header,
 .course #header {
   .body {

front/project/www/components/Select/index.js

@@ -8,9 +8,9 @@ export default class Select extends Component {
     this.state = { selecting: false };
   }
 
-  componentWillMount() { }
+  componentWillMount() {}
 
-  componentWillUnmount() { }
+  componentWillUnmount() {}
 
   open() {
     this.setState({ selecting: true });
@@ -22,7 +22,16 @@ export default class Select extends Component {
 
   render() {
     const { selecting } = this.state;
-    const { placeholder, value, list = [], size = 'basic', theme = 'theme', excludeSelf, onChange } = this.props;
+    const {
+      className = '',
+      placeholder,
+      value,
+      list = [],
+      size = 'basic',
+      theme = 'theme',
+      excludeSelf,
+      onChange,
+    } = this.props;
     let index = -1;
     for (let i = 0; i < list.length; i += 1) {
       if (list[i].key === value) {
@@ -42,7 +51,7 @@ export default class Select extends Component {
 
     const title = list.length > 0 && index >= 0 ? list[index].title : placeholder;
     return (
-      <div className={`select ${theme || ''} ${size}`}>
+      <div className={`select ${className} ${theme || ''} ${size}`}>
         <div hidden={!selecting} className="mask" onClick={() => this.close()} />
         <div className={`select-warp ${selecting ? 'active' : ''}`}>
           <Button size={size} theme={theme} radius onClick={() => this.open()}>

front/project/www/components/UserPagination/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import './index.less';
 import Icon from '../Icon';
+import Select from '../Select';
 
 export default class extends Component {
   onChangePage(page) {
@@ -11,14 +12,29 @@ export default class extends Component {
   }
 
   render() {
-    const { current, total, pageSize } = this.props;
+    const { current, total, pageSize, jump } = this.props;
+    const all = Math.ceil(total / pageSize);
     return (
       <div className="user-pagination">
         <Icon name="arrow-left-small" onClick={() => this.onChangePage(current - 1)} />
         <span>
-          <b>{current}</b>/{Math.ceil(total / pageSize)}
+          <b>{current}</b>/{all}
         </span>
         <Icon name="arrow-right-small" onClick={() => this.onChangePage(current + 1)} />
+        {jump && (
+          <div style={{ display: 'inline-block' }} className="m-l-2 v-a-m">
+            <div style={{ display: 'inline-block' }} className="v-a-m">
+              跳转至
+            </div>
+            <Select
+              size="small"
+              theme="white"
+              value={current}
+              list={[...Array(all)].map((key, index) => ({ title: `第${index + 1}页`, key: index + 1 }))}
+              onChange={key => this.onChangePage(key)}
+            />
+          </div>
+        )}
       </div>
     );
   }

front/project/www/components/UserTable/index.js

@@ -40,6 +40,7 @@ export default class UserTable extends Component {
       sortMap = {},
       maxHeight,
       onChange,
+      jump,
     } = this.props;
     return (
       <div className={`user-table ${size} ${even} ${theme} ${border ? 'border' : ''}`}>
@@ -58,14 +59,18 @@ export default class UserTable extends Component {
                       {item.fixSort &&
                         (sortMap[item.key] ? (
                           <Icon active name="arrow-down" onClick={() => this.onSort(item.key, '')} />
-                        ) : (<Icon name="arrow-up" onClick={() => this.onSort(item.key, 'desc')} />))}
+                        ) : (
+                          <Icon name="arrow-up" onClick={() => this.onSort(item.key, 'desc')} />
+                        ))}
                       {item.sort &&
                         (sortMap[item.key] ? (
                           <Assets
                             name={sortMap[item.key] === 'asc' ? 'seqencing2_up_select' : 'seqencing2_down_select'}
                             onClick={() => this.onSort(item.key, sortMap[item.key] === 'asc' ? 'desc' : '')}
                           />
-                        ) : (<Assets name="seqencing2_normal" onClick={() => this.onSort(item.key, 'asc')} />))}
+                        ) : (
+                          <Assets name="seqencing2_normal" onClick={() => this.onSort(item.key, 'asc')} />
+                        ))}
                     </th>
                   );
                 })}
@@ -88,7 +93,9 @@ export default class UserTable extends Component {
           </tbody>
         </table>
         {data.length === 0 && <div className="empty">暂无数据</div>}
-        {total > 0 && data.length > 0 && <UserPagination total={total} pageSize={pageSize} current={current} onChange={onChange} />}
+        {total > 0 && data.length > 0 && (
+          <UserPagination jump={jump} total={total} pageSize={pageSize} current={current} onChange={onChange} />
+        )}
       </div>
     );
   }
@@ -113,7 +120,11 @@ export default class UserTable extends Component {
         align={item.align}
       >
         {childIndex === -1 && columnIndex === 0 && select && (
-          <CheckboxItem theme="white" checked={checked} onClick={value => this.onSelect(value, row[rowKey], row, rowKey)} />
+          <CheckboxItem
+            theme="white"
+            checked={checked}
+            onClick={value => this.onSelect(value, row[rowKey], row, rowKey)}
+          />
         )}
         {item.render ? item.render(row[item.key], row, index, childIndex) : row[item.key]}
       </td>

front/project/www/routes/textbook/topic/index.less

@@ -1,3 +1,21 @@
 @charset "utf-8";
 
-#textbook-topic {}
+#textbook-topic {
+  background: #fff;
+  min-height: 100%;
+
+  .content {
+    width: 1140px !important;
+  }
+
+  .top {
+    padding: 8px 0;
+    height: 60px;
+    line-height: 44px;
+  }
+
+  .center {
+    padding-bottom: 100px;
+    position: relative;
+  }
+}

front/project/www/routes/textbook/topic/page.js

@@ -1,9 +1,48 @@
 import React from 'react';
 import './index.less';
 import Page from '@src/containers/Page';
+import Footer from '../../../components/Footer';
+import { Contact } from '../../../components/Other';
+import Select from '../../../components/Select';
+import UserTable from '../../../components/UserTable';
 
 export default class extends Page {
   renderView() {
-    return <div>1</div>;
+    return (
+      <div>
+        <div className="top content t-8">
+          机经 > 本期机经 > <span className="t-1">逻辑</span>
+          <Select className="f-r m-t-1" size="small" theme="white" value={'1'} list={[{ title: '123', key: '1' }]} />
+        </div>
+        <div className="center content">
+          <div className="t-1 t-s-18 m-b-1">
+            【逻辑】0515 起逻辑机经整理
+            <Select
+              className="f-r m-l-1"
+              size="small"
+              theme="default"
+              value={'1'}
+              list={[{ title: '123', key: '1' }]}
+            />
+            <Select className="f-r" size="small" theme="default" value={'1'} list={[{ title: '123', key: '1' }]} />
+          </div>
+          <UserTable
+            size="small"
+            data={[{}, {}, {}]}
+            current={1}
+            pageSize={20}
+            total={100}
+            jump
+            columns={[
+              { title: '文章编号', key: '1', sort: true },
+              { title: '关键词', key: '2' },
+              { title: '机经质量', key: '3' },
+            ]}
+          />
+        </div>
+        <Contact />
+        <Footer />
+      </div>
+    );
   }
 }

front/project/www/routes/textbook/topicDetail/index.less

@@ -1,3 +1,46 @@
 @charset "utf-8";
 
-#textbook-topic-detail {}
+#textbook-topic-detail {
+  background: #fff;
+  min-height: 100%;
+
+  .content {
+    width: 1140px !important;
+  }
+
+  .top {
+    padding: 8px 0;
+    height: 60px;
+    line-height: 44px;
+  }
+
+  .center {
+    padding-bottom: 100px;
+    position: relative;
+
+    .prev {
+      position: absolute;
+      left: -100px;
+      top: 100px;
+      cursor: pointer;
+    }
+
+    .next {
+      position: absolute;
+      right: -100px;
+      top: 100px;
+      cursor: pointer;
+    }
+
+    .detail {
+      padding: 20px 0;
+      border-bottom: 1px solid #eee;
+
+      .t {
+        border-left: 6px solid #7876FCFF;
+        line-height: 14px;
+        padding-left: 10px;
+      }
+    }
+  }
+}

front/project/www/routes/textbook/topicDetail/page.js

@@ -1,9 +1,141 @@
 import React from 'react';
 import './index.less';
+import Assets from '@src/components/Assets';
 import Page from '@src/containers/Page';
+import Footer from '../../../components/Footer';
+import { Contact } from '../../../components/Other';
+import Select from '../../../components/Select';
+import Modal from '../../../components/Modal';
+import { Button } from '../../../components/Button';
 
 export default class extends Page {
+  constructor(props) {
+    super(props);
+    this.state = { open: false, showTip: true };
+    this.keyMap = {};
+    window.onkeydown = this.onKeydown.bind(this);
+    window.onkeyup = this.onKeyup.bind(this);
+  }
+
+  onKeydown(e) {
+    let active = false;
+    if (this.keyMap[e.keyCode]) return false;
+    switch (e.keyCode) {
+      case 32:
+        active = true;
+        break;
+      case 37:
+        active = true;
+        break;
+      case 39:
+        active = true;
+        break;
+      default:
+        break;
+    }
+    if (active) {
+      this.keyMap[e.keyCode] = true;
+      return false;
+    }
+    return true;
+  }
+
+  onKeyup(e) {
+    let active = false;
+    switch (e.keyCode) {
+      case 32:
+        active = true;
+        this.onOpen();
+        break;
+      case 37:
+        active = true;
+        this.onPrev();
+        break;
+      case 39:
+        active = true;
+        this.onNext();
+        break;
+      default:
+        break;
+    }
+    if (active) {
+      this.keyMap[e.keyCode] = false;
+      return false;
+    }
+    return true;
+  }
+
+  onOpen() {
+    this.setState({ open: !this.state.open });
+  }
+
+  onNext() {}
+
+  onPrev() {}
+
   renderView() {
-    return <div>1</div>;
+    const { showTip } = this.state;
+    return (
+      <div>
+        <div className="top content t-8">
+          机经 > 本期机经 > <span className="t-1">逻辑</span>
+          <Select className="f-r m-t-1" size="small" theme="white" value={'1'} list={[{ title: '123', key: '1' }]} />
+        </div>
+        <div className="center content">
+          <div className="t-1 t-s-18 m-b-1">【逻辑】0515 起逻辑机经整理</div>
+          {this.renderDetail()}
+          <Assets className="prev" name="footer_previous_highlight_1" onClick={() => this.onPrev()} />
+          <Assets className="next" name="footer_next_highlight_1" onClick={() => this.onNext()} />
+        </div>
+        <Contact />
+        <Footer />
+        <Modal
+          show={showTip}
+          title="提示"
+          onConfirm={() => this.setState({ showTip: false })}
+          confirmText="好的,知道了"
+          btnAlign="center"
+        >
+          <div className="t-2 t-s-18">敲击键盘← →可翻页；</div>
+          <div className="t-2 t-s-18">敲击空格键第一次查看解析，敲击空格键第二次收起解析。</div>
+        </Modal>
+      </div>
+    );
+  }
+
+  renderDetail() {
+    const { open } = this.state;
+    return (
+      <div className="detail">
+        <div className="m-b-1">
+          <span className="t-1 t-s-18 m-r-1">NO.34 题目题目题目</span>
+          <span className="t-3 t-s-12">2019-02-21 19:19:20</span>
+          <Button radius className="f-r" onClick={() => this.onOpen()}>
+            {open ? '收起' : '展开'}解析
+          </Button>
+        </div>
+        <div className="t-2 t-s-16 m-b-2">
+          GMAT考试由分析写作、推理、数学和语文四部分组成。分别为： a）分析性写作评价（Analytical Writing
+          Assessment）A：GMAT考试由分析写作、推理、数学和语文四部分组成。分别为： a）分析性写作评价（Analytical Writing
+          Assessment）GMAT考试由分析写作、推理、数学和语文四部分组成。分别为： a）分析性写作评价（Analytical Writing
+          Assessment）A：GMAT考试由分析写作、推理、数学和语文四部分组成。分别为： a）分析性写作评价（Analytical Writing
+          Assessment）A：GMAT考试由分析写作、推理、数学和语文四部分组成。分别为： a）分析性写作评价
+        </div>
+        <div hidden={!open} className="p-20 b-c-3">
+          <div className="t t-1 t-s-16 f-w-b m-b-5">官方解析</div>
+          <div className="t-1 t-s-16">
+            A.By whom they were supposedly named is a passive construction that is unnecessarily indirect and wordy,
+            especially immediately following another passive construction; the singular its does not agree with the
+            plural antecedent the Glass House Mountains. B.This version of the sentence loses the causal connection,
+            failing to explain why James Cook gave the mountains their particular name. C.As the object of a preposition
+            and not the subject of the clause, James Cook does not work as the noun that the verbal phrase beginning
+            with naming can describe; the preposition since loses the important causal logic of the sentence. D.Correct.
+            This concise sentence uses active- voice construction in the relative clause and maintains agreement between
+            the pronoun their and its antecedent. E The pronoun it does not agree with the plural Mountains and the
+            following pronoun their.
+          </div>
+        </div>
+      </div>
+    );
   }
 }

front/project/www/routes/textbook/year/index.less

@@ -1,3 +1,22 @@
 @charset "utf-8";
 
-#textbook-year {}
+#textbook-year {
+  background: #fff;
+  min-height: 100%;
+
+  .content {
+    width: 1140px !important;
+  }
+
+  .top {
+    padding: 8px 0;
+    height: 60px;
+    line-height: 44px;
+  }
+
+  .center {
+    padding-bottom: 100px;
+    position: relative;
+    overflow: hidden;
+  }
+}

front/project/www/routes/textbook/year/page.js

@@ -1,9 +1,36 @@
 import React from 'react';
 import './index.less';
 import Page from '@src/containers/Page';
+import Footer from '../../../components/Footer';
+import { Contact } from '../../../components/Other';
+import Select from '../../../components/Select';
+import UserTable from '../../../components/UserTable';
 
 export default class extends Page {
   renderView() {
-    return <div>1</div>;
+    return (
+      <div>
+        <div className="top content t-8">
+          机经 > 本期机经 > <span className="t-1">逻辑</span>
+          <Select className="f-r m-t-1" size="small" theme="white" value={'1'} list={[{ title: '123', key: '1' }]} />
+        </div>
+        <div className="center content">
+          <div className="t-1 t-s-18 m-b-1">
+            GMAT历年换库记录
+            <Select className="f-r" size="small" theme="default" value={'1'} list={[{ title: '123', key: '1' }]} />
+          </div>
+          <UserTable
+            size="small"
+            columns={[
+              { title: '更新时间', key: '1' },
+              { title: '间隔天数', key: '2' },
+              { title: '当月换库次数(次)', key: '3' },
+            ]}
+          />
+        </div>
+        <Contact />
+        <Footer />
+      </div>
+    );
   }
 }