add page

front/project/h5/components/Block/index.js

@@ -4,6 +4,7 @@ import { Icon } from 'antd-mobile';
 import Assets from '@src/components/Assets';
 import Tag from '../Tag';
 import Money from '../Money';
+import Button from '../Button';
 
 export class Block extends Component {
   render() {
@@ -56,7 +57,9 @@ export class CourseBlock extends Component {
             <div className="teacher">
               授课老师<span>李小小</span>
             </div>
-            <div className="desc">老师特别特别特别好，上课特别认真…</div>
+            <div className="desc">
+              老师特别特别特别好，上课特别认真…老师特别特别特别好，上课特别认真…老师特别特别特别好，上课特别认真…老师特别特别特别好，上课特别认真…
+            </div>
             <div className="division" />
             <div className="data">
               <Tag size="small">适合新手</Tag>
@@ -71,6 +74,26 @@ export class CourseBlock extends Component {
   }
 }
 
+export class CourseCoBlock extends Component {
+  render() {
+    const { theme } = this.props;
+    return (
+      <TagBlock className="course-co-block" theme={theme} tag="语文Verbal">
+        <div className="title">OG20基础刷题套餐</div>
+        <div className="info">
+          <div className="teacher">
+            授课老师<span>李小小</span>
+          </div>
+          <Tag size="small">适合新手</Tag>
+        </div>
+        <div className="desc">
+          老师特别特别特别好，上课特别认真…老师特别特别特别好，上课特别认真…老师特别特别特别好，上课特别认真…老师特别特别特别好，上课特别认真…
+        </div>
+      </TagBlock>
+    );
+  }
+}
+
 export class DataBlock extends Component {
   render() {
     return (
@@ -89,3 +112,29 @@ export class DataBlock extends Component {
     );
   }
 }
+
+export class BuyBlock extends Component {
+  render() {
+    const { theme } = this.props;
+    return (
+      <TopBlock className="buy-block" theme={theme}>
+        <div className="block-left">
+          <div className="title">
+            <Tag theme="border" radius size="small">
+              已到期
+            </Tag>
+            VIP会员
+          </div>
+          <div className="date">有效期:2019-11-20</div>
+          <div className="desc">请访问千行 GMAT 官网开通使用</div>
+        </div>
+        <div className="block-right">
+          <div className="btn">
+            <Button radius>开通</Button>
+          </div>
+          <div className="tip">¥888/ 3个月</div>
+        </div>
+      </TopBlock>
+    );
+  }
+}

front/project/h5/components/Block/index.less

@@ -59,7 +59,7 @@
   }
 }
 
-.g--tag-block.not {
+.g-tag-block.not {
   .g-tag-block-tag {
     background: #7660A4;
   }
@@ -191,6 +191,45 @@
   }
 }
 
+.course-co-block {
+  padding: 20px 20px 15px;
+
+  .title {
+    font-size: 16px;
+    color: #1A1A1F;
+    margin-bottom: 5px;
+  }
+
+  .info {
+    border-bottom: 1px solid #eee;
+    padding-bottom: 5px;
+    margin-bottom: 5px;
+
+    .teacher {
+      display: inline-block;
+      font-size: 12px;
+      color: #A7A7B7;
+      margin-bottom: 5px;
+      line-height: 12px;
+
+      span {
+        color: #1A1A1F;
+        margin-left: 5px;
+      }
+    }
+
+    .g-tag-wrapper {
+      float: right;
+    }
+  }
+
+  .desc {
+    font-size: 12px;
+    color: #686872;
+
+  }
+}
+
 .data-block {
   padding: 10px 15px;
   position: relative;
@@ -238,4 +277,65 @@
       }
     }
   }
+}
+
+.buy-block.end {
+
+  .g-tag-wrapper {
+    .g-tag {
+      color: #A7A7B7;
+      border-color: #A7A7B7;
+    }
+  }
+}
+
+.buy-block {
+  padding-top: 25px;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-bottom: 20px;
+
+  .block-left {
+    display: inline-block;
+
+    .title {
+      .g-tag-wrapper {
+        margin-right: 5px;
+      }
+
+      margin-bottom: 4px;
+      color: #303036;
+      font-size: 16px;
+    }
+
+    .date {
+      margin-bottom: 4px;
+      font-size: 10px;
+      color: #686872;
+    }
+
+    .desc {
+      font-size: 10px;
+      color: #686872;
+    }
+  }
+
+  .block-right {
+    float: right;
+    padding-top: 5px;
+
+    .btn {
+      margin-bottom: 4px;
+      text-align: right;
+
+      .g-button {
+        padding: 0 15px;
+      }
+    }
+
+    .tip {
+      font-size: 10px;
+      color: #A7A7B7;
+    }
+  }
 }

front/project/h5/components/Radio/index.less

@@ -25,10 +25,10 @@
 }
 
 .g-special-radio-group {
-  margin: 0 -8.5px;
+  margin: 0 -7.5px;
 
   .g-special-radio-wrapper {
-    margin: 0 8.5px;
+    margin: 0 7.5px;
   }
 }
 
@@ -56,9 +56,9 @@
 }
 
 .g-radio-group {
-  margin: 0 -8.5px;
+  margin: 0 -7.5px;
 
   .g-radio-wrapper {
-    margin: 0 8.5px;
+    margin: 0 7.5px;
   }
 }

front/project/h5/components/Switch/index.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import './index.less';
+import Assets from '@src/components/Assets';
+
+export default class Switch extends Component {
+  render() {
+    const { checked, size = 'big', onClick } = this.props;
+    return (
+      <div className={`g-switch-wrapper ${checked ? 'checked' : ''} ${size}`}>
+        <Assets
+          className="g-switch"
+          name={`swich_${checked ? 'on' : 'off'}_${size}`}
+          onClick={() => onClick && onClick()}
+        />
+      </div>
+    );
+  }
+}

front/project/h5/components/Switch/index.less

@@ -0,0 +1,21 @@
+@import '../../app.less';
+
+.g-switch-wrapper {
+  display: inline-block;
+
+  .g-switch {}
+}
+
+.g-switch-wrapper.big {
+  .assets {
+    width: 42px;
+    height: 22px;
+  }
+}
+
+.g-switch-wrapper.small {
+  .assets {
+    width: 28px;
+    height: 14px;
+  }
+}

front/project/h5/components/Tag/index.js

@@ -1,13 +1,19 @@
 import React, { Component } from 'react';
 import './index.less';
+import Icon from '../Icon';
 
 export default class Tag extends Component {
   render() {
-    const { className = '', width, size = 'basic', theme = 'default', radius, children, onClick } = this.props;
+    const { className = '', width, size = 'basic', theme = 'default', radius, children, onClick, onClose } = this.props;
     return (
       <div className={`g-tag-wrapper ${className} ${size} ${theme} ${radius ? 'radius' : ''}`}>
-        <div style={{ width: width || 'auto' }} className="g-tag" onClick={() => onClick && onClick()}>
+        <div
+          style={{ width: width || 'auto' }}
+          className="g-tag"
+          onClick={() => (onClose && onClose()) || (onClick && onClick())}
+        >
           {children}
+          {onClose && <Icon type="close" />}
         </div>
       </div>
     );

front/project/h5/components/Tag/index.less

@@ -6,6 +6,10 @@
   .g-tag {
     display: inline-block;
     text-align: center;
+
+    .anticon-close {
+      margin-left: 5px;
+    }
   }
 }
 
@@ -53,4 +57,20 @@
     color: #40A8E2;
     border: 1px solid #40A8E2;
   }
+}
+
+.g-tag-wrapper.disabled {
+  .g-tag {
+    background: #F2F2F2;
+    color: #A7A7B7;
+    border: 1px solid #A7A7B7;
+  }
+}
+
+.g-tag-wrapper.white {
+  .g-tag {
+    background: #fff;
+    color: #A7A7B7;
+    border: 1px solid #A7A7B7;
+  }
 }

front/project/h5/routes/index.js

@@ -2,5 +2,6 @@
 
 import Page from './page';
 import Product from './product';
+import Textbook from './textbook';
 
-export default [...Page, ...Product];
+export default [...Page, ...Product, ...Textbook];

front/project/h5/routes/page/invitation/index.less

@@ -37,6 +37,15 @@
     }
   }
 
+  .tag-list {
+    margin-bottom: 20px;
+
+    .g-tag-wrapper {
+      margin-right: 5px;
+      margin-bottom: 5px;
+    }
+  }
+
   .go {
     margin-bottom: 25px;
   }

front/project/h5/routes/page/invitation/page.js

@@ -4,6 +4,7 @@ import Page from '@src/containers/Page';
 import Assets from '@src/components/Assets';
 import Button from '../../../components/Button';
 import Input from '../../../components/Input';
+import Tag from '../../../components/Tag';
 
 export default class extends Page {
   init() {}
@@ -33,6 +34,14 @@ export default class extends Page {
         </Button>
         <div className="title">邮件邀请</div>
         <Input placeholder="添加多个邮箱，请用「；」间隔" />
+        <div className="tag-list">
+          <Tag theme="disabled" radius onClose={() => {}}>
+            adfagfafha@163.com
+          </Tag>
+          <Tag theme="white" radius onClose={() => {}}>
+            adfagfafha@163.com
+          </Tag>
+        </div>
         <Button block width={110} radius>
           发送邀请
         </Button>

front/project/h5/routes/product/bought/index.less

@@ -1,3 +1,5 @@
 @charset "utf-8";
 
-#product-bought {}
+#product-data {
+  padding: 15px;
+}

front/project/h5/routes/product/bought/page.js

@@ -1,12 +1,18 @@
 import React from 'react';
 import './index.less';
 import Page from '@src/containers/Page';
-import {} from '../../../components/Block';
+import { BuyBlock } from '../../../components/Block';
 
 export default class extends Page {
   init() {}
 
   renderView() {
-    return <div />;
+    return (
+      <div>
+        <BuyBlock theme="not" />
+        <BuyBlock />
+        <BuyBlock theme="end" />
+      </div>
+    );
   }
 }

front/project/h5/routes/product/course/index.less

@@ -1,3 +1,129 @@
 @charset "utf-8";
 
-#product-course {}
+#product-course {
+  .top {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    border-bottom: 1px solid #eee;
+    height: 44px;
+    padding: 0 15px;
+    color: #686872;
+
+    .am-tabs {
+      width: 150px;
+      display: inline-block;
+      position: absolute;
+    }
+
+    .right {
+      float: right;
+      padding: 10px;
+
+      .assets {
+        margin-left: 5px;
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .right::before {
+      content: '';
+      position: absolute;
+      transform: translateX(-10px);
+      width: 1px;
+      height: 24px;
+      background: #eee;
+    }
+  }
+
+  .list {
+    padding: 15px;
+    padding-top: 59px;
+  }
+
+  .am-drawer {
+    .am-drawer-sidebar {
+      width: 240px;
+      background: #fff;
+
+      .filter {
+        .body {
+
+          .item {
+            line-height: 30px;
+            padding: 15px;
+            border-bottom: 1px solid #eee;
+
+            .label {
+              color: #303036;
+              font-size: 12px;
+            }
+
+            .value {
+              border-bottom: 1px solid #eee;
+              padding-bottom: 10px;
+            }
+
+            .left {
+              display: inline-block;
+            }
+
+            .right {
+              float: right;
+              text-align: right;
+              border: none;
+              padding: 0;
+
+              .g-checkbox-wrapper {
+                padding-top: 3px;
+              }
+
+              .g-special-radio-wrapper {
+                margin: 0 5px;
+              }
+            }
+
+            .arrow {
+              width: 15px;
+              height: 15px;
+            }
+          }
+
+          .sub {
+            padding: 0 15px;
+            border-bottom: 1px solid #eee;
+
+            .item {
+              padding: 10px 0;
+
+              .label {
+                color: #686872;
+              }
+
+              .value {
+                border: none;
+                padding: 0;
+              }
+            }
+
+            .title {
+              color: #303036;
+              font-size: 12px;
+              line-height: 40px;
+            }
+          }
+        }
+
+        .footer {
+          position: absolute;
+          bottom: 20px;
+          left: 0;
+          right: 0;
+          text-align: center;
+        }
+      }
+    }
+  }
+}

front/project/h5/routes/product/course/page.js

@@ -1,12 +1,81 @@
 import React from 'react';
 import './index.less';
+import { Drawer, Tabs } from 'antd-mobile';
 import Page from '@src/containers/Page';
+import Assets from '@src/components/Assets';
+import { CourseCoBlock } from '../../../components/Block';
+import { SpecialRadioGroup } from '../../../components/Radio';
+import Button from '../../../components/Button';
+import Checkbox from '../../../components/CheckBox';
 
 export default class extends Page {
-  init() {
-  }
+  init() {}
 
   renderView() {
-    return <div />;
+    const { filter } = this.state;
+    return (
+      <Drawer
+        style={{ minHeight: document.documentElement.clientHeight }}
+        position="right"
+        open={filter}
+        sidebar={this.renderFilter()}
+        onOpenChange={isOpen => this.setState({ filter: isOpen })}
+      >
+        <div className="top">
+          <Tabs tabs={[{ title: '单次', key: 'd' }, { title: '套餐', key: 'a' }]} />
+          <div className="right" onClick={() => this.setState({ filter: true })}>
+            筛选
+            <Assets name="screen" />
+          </div>
+        </div>
+        <div className="list">
+          <CourseCoBlock theme="not" />
+          <CourseCoBlock />
+          <CourseCoBlock theme="end" />
+          <CourseCoBlock />
+          <CourseCoBlock />
+          <CourseCoBlock />
+          <CourseCoBlock />
+        </div>
+      </Drawer>
+    );
+  }
+
+  renderFilter() {
+    return (
+      <div className="filter">
+        <div className="body">
+          <div className="sub">
+            <div className="title">筛选学科</div>
+            <div className="item">
+              <div className="label left">长难句</div>
+              <div className="value right">
+                <Checkbox />
+              </div>
+            </div>
+            <div className="item">
+              <div className="label">语文 Verbal</div>
+              <div className="value">
+                <SpecialRadioGroup
+                  list={[
+                    { key: '1', label: '语法 SC' },
+                    { key: '2', label: '阅读 RC' },
+                    { key: '3', label: '逻辑 CR' },
+                  ]}
+                />
+              </div>
+            </div>
+            <div className="item">
+              <div className="label">数学 Quant</div>
+            </div>
+          </div>
+        </div>
+        <div className="footer">
+          <Button radius width={90}>
+            确定
+          </Button>
+        </div>
+      </div>
+    );
   }
 }

front/project/h5/routes/product/index.js

@@ -1,6 +1,9 @@
 import courseDetail from './courseDetail';
 import serviceDetail from './serviceDetail';
 import dataDetail from './dataDetail';
+import list from './list';
+import course from './course';
 import coursePackage from './coursePackage';
+import bought from './bought';
 
-export default [courseDetail, serviceDetail, dataDetail, coursePackage];
+export default [list, course, courseDetail, serviceDetail, dataDetail, coursePackage, bought];

front/project/h5/routes/product/list/index.less

@@ -1,3 +1,124 @@
 @charset "utf-8";
 
-#product-list {}
+#product-list {
+  .top {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    border-bottom: 1px solid #eee;
+    padding: 10px 15px;
+    line-height: 24px;
+    color: #686872;
+
+    .tab {
+      display: inline-block;
+      padding: 0 15px;
+    }
+
+    .tab.active {
+      color: #41A6F3;
+    }
+
+    .right {
+      float: right;
+      border-left: 1px solid #eee;
+      padding: 0 10px;
+
+      .assets {
+        margin-left: 5px;
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+
+  .list {
+    padding: 15px;
+    padding-top: 59px;
+  }
+
+  .am-drawer {
+    .am-drawer-sidebar {
+      width: 240px;
+      background: #fff;
+
+      .filter {
+        .body {
+
+          .item {
+            line-height: 30px;
+            padding: 15px;
+            border-bottom: 1px solid #eee;
+
+            .label {
+              color: #303036;
+              font-size: 12px;
+            }
+
+            .value {
+              border-bottom: 1px solid #eee;
+              padding-bottom: 10px;
+            }
+
+            .left {
+              display: inline-block;
+            }
+
+            .right {
+              float: right;
+              text-align: right;
+              border: none;
+              padding: 0;
+
+              .g-checkbox-wrapper {
+                padding-top: 3px;
+              }
+
+              .g-special-radio-wrapper {
+                margin: 0 5px;
+              }
+            }
+
+            .arrow {
+              width: 15px;
+              height: 15px;
+            }
+          }
+
+          .sub {
+            padding: 0 15px;
+            border-bottom: 1px solid #eee;
+
+            .item {
+              padding: 10px 0;
+
+              .label {
+                color: #686872;
+              }
+
+              .value {
+                border: none;
+                padding: 0;
+              }
+            }
+
+            .title {
+              color: #303036;
+              font-size: 12px;
+              line-height: 40px;
+            }
+          }
+        }
+
+        .footer {
+          position: absolute;
+          bottom: 20px;
+          left: 0;
+          right: 0;
+          text-align: center;
+        }
+      }
+    }
+  }
+}

front/project/h5/routes/product/list/page.js

@@ -1,12 +1,101 @@
 import React from 'react';
 import './index.less';
+import { Drawer } from 'antd-mobile';
 import Page from '@src/containers/Page';
+import Assets from '@src/components/Assets';
+import { DataBlock } from '../../../components/Block';
+import { SpecialRadioGroup } from '../../../components/Radio';
+import Switch from '../../../components/Switch';
+import Button from '../../../components/Button';
+import Checkbox from '../../../components/CheckBox';
 
 export default class extends Page {
-  init() {
-  }
+  init() {}
 
   renderView() {
-    return <div />;
+    const { filter } = this.state;
+    return (
+      <Drawer
+        style={{ minHeight: document.documentElement.clientHeight }}
+        position="right"
+        open={filter}
+        sidebar={this.renderFilter()}
+        onOpenChange={isOpen => this.setState({ filter: isOpen })}
+      >
+        <div className="top">
+          <div className="tab active">销量</div>
+          <div className="tab">更新时间</div>
+          <div className="right" onClick={() => this.setState({ filter: true })}>
+            筛选
+            <Assets name="screen" />
+          </div>
+        </div>
+        <div className="list">
+          <DataBlock />
+          <DataBlock />
+          <DataBlock />
+          <DataBlock />
+          <DataBlock />
+          <DataBlock />
+          <DataBlock />
+        </div>
+      </Drawer>
+    );
+  }
+
+  renderFilter() {
+    return (
+      <div className="filter">
+        <div className="body">
+          <div className="item">
+            <div className="label left">适合新手</div>
+            <div className="value right">
+              <Switch />
+            </div>
+          </div>
+          <div className="item">
+            <div className="label left">原创资料</div>
+            <div className="value right">
+              <Switch />
+            </div>
+          </div>
+          <div className="item">
+            <div className="label left">资料形式</div>
+            <div className="value right">
+              <SpecialRadioGroup list={[{ key: '1', label: '纸质' }, { key: '2', label: '电子' }]} />
+            </div>
+          </div>
+          <div className="sub">
+            <div className="title">筛选学科</div>
+            <div className="item">
+              <div className="label left">长难句</div>
+              <div className="value right">
+                <Checkbox />
+              </div>
+            </div>
+            <div className="item">
+              <div className="label">语文 Verbal</div>
+              <div className="value">
+                <SpecialRadioGroup
+                  list={[
+                    { key: '1', label: '语法 SC' },
+                    { key: '2', label: '阅读 RC' },
+                    { key: '3', label: '逻辑 CR' },
+                  ]}
+                />
+              </div>
+            </div>
+            <div className="item">
+              <div className="label">数学 Quant</div>
+            </div>
+          </div>
+        </div>
+        <div className="footer">
+          <Button radius width={90}>
+            确定
+          </Button>
+        </div>
+      </div>
+    );
   }
 }

front/project/h5/routes/textbook/detail/index.less

@@ -1,3 +1,164 @@
 @charset "utf-8";
 
-#textbook {}
+#textbook-detail {
+  .title {
+    height: 42px;
+    line-height: 42px;
+    color: #303036;
+    font-size: 16px;
+    padding: 0 15px;
+    border-bottom: 1px solid #eee;
+  }
+
+  .detail-list {
+    padding: 0 15px;
+  }
+
+  .detail {
+    border-bottom: 1px solid #eee;
+    padding: 15px 0;
+
+    .detail-title {
+      color: #1A1A1F;
+      font-size: 16px;
+      margin-bottom: 5px;
+    }
+
+    .detail-desc {
+      font-size: 12px;
+      color: #686872;
+      margin-bottom: 10px;
+    }
+
+    .detail-switch {
+      text-align: right;
+      margin-bottom: 10px;
+
+      .g-switch-wrapper {
+        margin-left: 5px;
+      }
+    }
+
+    .detail-result {
+      padding: 10px;
+      font-size: 12px;
+      color: #686872;
+      background: #F1F1F1;
+    }
+  }
+
+  .fixed {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 44px;
+    line-height: 44px;
+    border-top: 1px solid #eee;
+    padding: 0 20px;
+
+    .prev {
+      display: inline-block;
+      margin-right: 25px;
+
+      .anticon {
+        margin-right: 5px;
+      }
+    }
+
+    .next {
+      display: inline-block;
+
+      .anticon {
+        margin-left: 5px;
+      }
+    }
+
+    .page {
+      float: right;
+      color: #A2AAB5;
+      font-size: 12px;
+
+      span {
+        margin: 0 5px;
+        color: #686872;
+      }
+
+      .assets {
+        margin-left: 5px;
+        width: 15px;
+        height: 15px;
+      }
+    }
+  }
+
+  .filter-switch {
+    position: fixed;
+    bottom: 50px;
+    right: 15px;
+    width: 44px;
+    height: 44px;
+    background: #41A6F3;
+    border-radius: 50%;
+    padding-top: 6px;
+    padding-left: 6px;
+    overflow: hidden;
+
+    .assets {
+      width: 32px;
+      height: 32px;
+    }
+  }
+
+  .am-drawer {
+    .am-drawer-sidebar {
+      width: 240px;
+      background: #fff;
+
+      .filter {
+        .body {
+          border-bottom: 1px solid #eee;
+
+          .item {
+            line-height: 30px;
+            padding: 15px;
+
+            .label {
+              color: #303036;
+              font-size: 12px;
+            }
+
+            .value {
+              border-bottom: 1px solid #eee;
+              padding-bottom: 10px;
+            }
+
+            .left {
+              display: inline-block;
+            }
+
+            .right {
+              float: right;
+              text-align: right;
+              border: none;
+              padding: 0;
+            }
+
+            .arrow {
+              width: 15px;
+              height: 15px;
+            }
+          }
+        }
+
+        .footer {
+          position: absolute;
+          bottom: 20px;
+          left: 0;
+          right: 0;
+          text-align: center;
+        }
+      }
+    }
+  }
+}

front/project/h5/routes/textbook/detail/page.js

@@ -1,12 +1,113 @@
-import React from 'react';
+import React, { Component } from 'react';
 import './index.less';
+import { Drawer } from 'antd-mobile';
 import Page from '@src/containers/Page';
+import Assets from '@src/components/Assets';
+import Switch from '../../../components/Switch';
+import Icon from '../../../components/Icon';
+import { SpecialRadioGroup } from '../../../components/Radio';
+import Button from '../../../components/Button';
 
-export default class extends Page {
-  init() {
+class Detail extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { show: false };
+  }
+
+  render() {
+    const { show } = this.state;
+    return (
+      <div className="detail">
+        <div className="detail-title">1.幼儿吞药</div>
+        <div className="detail-desc">
+          幼兒容易將藥丸吞食，故許多藥局將藥丸放在一個幼兒不容易打開的盒子裡，但之後幼兒誤
+          吞藥丸的比例變高了，since_____ ==>大人將盒子放在幼兒容易拿到的地方(感覺跟一題打火機放在幼兒容易拿到的地方相似)
+        </div>
+        <div className="detail-switch">
+          显示答案
+          <Switch size="small" checked={show} onClick={() => this.setState({ show: !show })} />
+        </div>
+        <div hidden={!show} className="detail-result">
+          :吞藥丸的比例變高了，since_____
+          ==>大人將盒子放在幼兒容易拿到的地方(感覺跟一題打火機放在幼兒容易拿到的地方相似)
+          ==>大人將盒子放在幼兒容易拿到的地方(感覺跟一題打火機放在幼兒容易拿到的地方相似)
+        </div>
+      </div>
+    );
   }
+}
+
+export default class extends Page {
+  init() {}
 
   renderView() {
-    return <div />;
+    const { filter } = this.state;
+    console.log(filter);
+    return (
+      <Drawer
+        style={{ minHeight: document.documentElement.clientHeight }}
+        position="right"
+        open={filter}
+        sidebar={this.renderFilter()}
+        onOpenChange={isOpen => this.setState({ filter: isOpen })}
+      >
+        <div className="title">【逻辑】0515 起逻辑机经整理</div>
+        <div className="detail-list">
+          <Detail />
+          <Detail />
+        </div>
+        <div className="fixed">
+          <div className="prev">
+            <Icon type="left" />
+            Previous
+          </div>
+          <div className="next">
+            Next
+            <Icon type="right" />
+          </div>
+          <div className="page">
+            <span>跳转至</span>第<span>15</span>页
+            <Assets name="down_down3" />
+          </div>
+        </div>
+        <div hidden={filter} className="filter-switch">
+          <Assets name="setting" onClick={() => this.setState({ filter: true })} />
+        </div>
+      </Drawer>
+    );
+  }
+
+  renderFilter() {
+    return (
+      <div className="filter">
+        <div className="body">
+          <div className="item">
+            <div className="label">机经质量</div>
+            <div className="value">
+              <SpecialRadioGroup
+                list={[{ key: '1', label: '完整' }, { key: '2', label: '较完整' }, { key: '3', label: '残缺' }]}
+              />
+            </div>
+          </div>
+          <div className="item">
+            <div className="label left">更新时间</div>
+            <div className="value right">
+              由远到近 <Assets className="arrow" name="down_down3" />
+            </div>
+          </div>
+          <div className="item">
+            <div className="label left">看考古</div>
+            <div className="value right">
+              <Switch />
+            </div>
+          </div>
+        </div>
+        <div className="footer">
+          <Button radius width={90}>
+            确定
+          </Button>
+        </div>
+      </div>
+    );
   }
 }

front/project/h5/routes/textbook/index.js

@@ -0,0 +1,3 @@
+import detail from './detail';
+
+export default [detail];