fix style

front/project/www/app.less

@@ -234,24 +234,44 @@
   flex: 1;
 }
 
+.p-a {
+  position: absolute;
+}
+
+.v-a-t {
+  vertical-align: top;
+}
+
+.v-a-m {
+  vertical-align: middle;
+}
+
+.v-a-b {
+  vertical-align: bottom;
+}
+
 .t-1 {
-  color: #303036;
+  color: #303036 !important;
 }
 
 .t-2 {
-  color: #686872;
+  color: #686872 !important;
 }
 
 .t-3 {
-  color: #B5B5BA;
+  color: #B5B5BA !important;
 }
 
 .t-4 {
-  color: #4292F0;
+  color: #4292F0 !important;
 }
 
 .t-5 {
-  color: #6EC64B;
+  color: #6EC64B !important;
+}
+
+.t-6 {
+  color: #A7A7A7 !important;
 }
 
 .b-c-1 {
@@ -290,7 +310,7 @@ textarea {
 
 input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
-  color: @holder_color;
+  color: #A7A7A7;
 }
 
 .d-i-b {
@@ -363,6 +383,16 @@ body,
       display: block;
     }
   }
+
+  .input-layout {
+    display: flex;
+
+    .label {}
+
+    .input-block {
+      flex: 1;
+    }
+  }
 }
 
 #root {}

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

@@ -467,4 +467,30 @@
 .icon.user-info.no.active,
 .icon.user-info:hover {
   background-image: url('/assets/info.png');
+}
+
+.icon.more,
+.icon.more.no:hover {
+  width: 24px;
+  height: 24px;
+  background: url('/assets/more1_normal.png') no-repeat center;
+}
+
+.icon.more.active,
+.icon.more.no.active,
+.icon.more:hover {
+  background-image: url('/assets/more1_hover.png');
+}
+
+.icon.more-small,
+.icon.more-small.no:hover {
+  width: 20px;
+  height: 20px;
+  background: url('/assets/more2_normal.png') no-repeat center;
+}
+
+.icon.more-small.active,
+.icon.more-small.no.active,
+.icon.more-small:hover {
+  background-image: url('/assets/more2_hover.png');
 }

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

@@ -2,7 +2,6 @@
 
 .invite-block {
 
-
   .title-block {
     font-size: 18px;
     color: #686872;

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

@@ -20,6 +20,7 @@ export default class extends Component {
       close = true,
       maskClosable = false,
       body = true,
+      btnType,
       center,
       height,
     } = this.props;
@@ -46,12 +47,12 @@ export default class extends Component {
           )}
           <div className={`g-modal-btns ${btnAlign}`}>
             {onCancel && (
-              <Button size="lager" theme="link" onClick={() => onCancel()}>
+              <Button size="lager" theme={btnType === 'link' ? 'link t-6' : 'link'} onClick={() => onCancel()}>
                 {cancelText}
               </Button>
             )}
             {onConfirm && (
-              <Button size="lager" radius onClick={() => onConfirm()}>
+              <Button size="lager" theme={btnType === 'link' ? 'link' : 'theme'} radius onClick={() => onConfirm()}>
                 {confirmText}
               </Button>
             )}

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

@@ -44,145 +44,4 @@
       text-align: center;
     }
   }
-}
-
-.g-modal.bind-phone-modal {
-  .step-0-layout {
-    margin-bottom: 70px;
-    font-size: 18px;
-
-    a {
-      margin-right: 20px;
-      float: right;
-    }
-  }
-
-  .step-1-layout {
-    display: flex;
-
-    .label {
-      font-size: 18px;
-      line-height: 40px;
-      margin-right: 20px;
-    }
-
-    .input-layout {
-      flex: 1;
-    }
-  }
-}
-
-.g-modal.bind-email-modal {
-  .step-0-layout {
-    margin-bottom: 70px;
-    font-size: 18px;
-
-    a {
-      margin-right: 20px;
-      float: right;
-    }
-  }
-
-  .step-1-layout {
-    display: flex;
-
-    .label {
-      font-size: 18px;
-      line-height: 40px;
-      margin-right: 10px;
-    }
-
-    .input-layout {
-      flex: 1;
-    }
-  }
-}
-
-.g-modal.edit-info-modal {
-  .edit-info-modal-block {
-    display: flex;
-
-    .label {
-      font-size: 18px;
-      line-height: 40px;
-      margin-right: 10px;
-    }
-
-    .input-layout {
-      flex: 1;
-    }
-
-    .file-upload {
-      background: #F7F7F7;
-      border: none;
-    }
-  }
-}
-
-.g-modal.real-auth-modal {
-  .real-auth-modal-wrapper {
-    position: relative;
-  }
-
-  .real-auth-text {
-    font-size: 18px;
-
-    .t2 {
-      margin-bottom: 30px;
-    }
-
-    .t3 {
-      margin-bottom: 20px;
-    }
-  }
-
-  .real-auth-qrcode {
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-}
-
-.g-modal.edit-avatar-modal {
-  .edit-avatar-modal-wrapper {
-    position: relative;
-  }
-
-  .edit-avatar-o {
-    vertical-align: top;
-    display: inline-block;
-    padding-right: 35px;
-    border-right: 1px solid #d8d8d8;
-
-    .assets {
-      width: 360px;
-    }
-  }
-
-  .edit-avatar-r {
-    display: inline-block;
-    padding-left: 30px;
-
-    .text {
-      font-size: 18px;
-      margin-bottom: 20px;
-    }
-
-    .assets {
-      border-radius: 50%;
-      width: 100px;
-    }
-  }
-}
-
-.g-modal.invite-modal {
-  .invite-modal-wrapper {
-    position: relative;
-
-    .tip {
-      font-size: 18px;
-      color: #686872;
-      margin-bottom: 30px;
-    }
-  }
 }

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import './index.less';
-import { Icon, Dropdown, Menu } from 'antd';
+import { Dropdown, Menu } from 'antd';
+import Icon from '../Icon';
 
 function More(props) {
-  const { menu = [], node, onClick } = props;
+  const { menu = [], size = '', children, onClick } = props;
   return (
     <Dropdown
       overlay={
@@ -16,7 +17,7 @@ function More(props) {
       }
       trigger={['click']}
     >
-      <div className="more">{node || <Icon type="more" />}</div>
+      <div className="more">{children || <Icon name={size ? `more-${size}` : 'more'} />}</div>
     </Dropdown>
   );
 }

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

@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import './index.less';
+import { Icon } from '../Icon';
+
+export default class Open extends Component {
+  constructor(props) {
+    super(props);
+    this.Text = null;
+    this.state = { show: false, more: false };
+    this.checkHeight();
+  }
+
+  checkHeight() {
+    const { height } = this.props;
+    if (this.Text != null) {
+      if (this.Text.offsetHeight > height) {
+        this.setState({ more: true });
+      }
+    } else {
+      setTimeout(() => {
+        this.checkHeight();
+      }, 1);
+    }
+  }
+
+  render() {
+    const { show, more } = this.state;
+    const { up, down, height, className = '', children } = this.props;
+    return (
+      <div className={`super-open ${className} ${more ? 'more' : ''} ${!show ? 'hide' : ''}`}>
+        <div
+          className="hide-content"
+          ref={ref => {
+            this.Text = ref;
+          }}
+          style={{ height: more && !show ? height : null }}
+        >
+          {children}
+        </div>
+        {more && show && <span onClick={() => this.setState({ show: false })}>{up}</span>}
+        {more && !show && <span onClick={() => this.setState({ show: true })}>{down}</span>}
+      </div>
+    );
+  }
+}
+export class OpenText extends Component {
+  render() {
+    const { children } = this.props;
+    return (
+      <Open className="super-open-text" height={60} up={<Icon name="small-up" />} down={<Icon name="small-down" />}>
+        {children}
+      </Open>
+    );
+  }
+}

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

@@ -0,0 +1,21 @@
+@import '../../app.less';
+
+.super-open {
+  position: relative;
+
+  .hide-content {
+    overflow: hidden;
+  }
+}
+
+.super-open-text {
+  line-height: 20px;
+  padding-right: 30px;
+
+  span {
+    position: absolute;
+    top: 0;
+    right: 0;
+    background: #fff;
+  }
+}

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

@@ -1,44 +1,19 @@
 import React, { Component } from 'react';
 import './index.less';
 import Icon from '../Icon';
+import Open from '../Open';
 
 export default class OtherAnswer extends Component {
-  constructor(props) {
-    super(props);
-    this.Text = null;
-    this.state = { show: false, more: false };
-    this.checkHeight();
-  }
-
-  checkHeight() {
-    if (this.Text != null) {
-      if (this.Text.offsetHeight > 80) {
-        this.setState({ more: true });
-      }
-    } else {
-      setTimeout(() => {
-        this.checkHeight();
-      }, 1);
-    }
-  }
-
   render() {
     const { data } = this.props;
-    const { show, more } = this.state;
     return (
-      <div className={`other-answer ${more ? 'more' : ''} ${!show ? 'hide' : ''}`}>
+      <div className="other-answer">
         <div className="small-tag">提问</div>
         <div className="title">{data.content}</div>
         <div className="small-tag">回答</div>
-        <div
-          ref={ref => {
-            this.Text = ref;
-          }}
-          className="desc"
-          dangerouslySetInnerHTML={{ __html: data.answer }}
-        />
-        {more && show && <Icon name="up" onClick={() => this.setState({ show: false })} />}
-        {more && !show && <Icon name="down" onClick={() => this.setState({ show: true })} />}
+        <Open height={80} up={<Icon name="up" />} down={<Icon name="down" />}>
+          <div className="desc" dangerouslySetInnerHTML={{ __html: data.answer }} />
+        </Open>
       </div>
     );
   }

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

@@ -24,7 +24,6 @@
     color: #686872;
     font-size: 16px;
     margin-bottom: 20px;
-    overflow: hidden;
   }
 
   .icon {
@@ -34,19 +33,20 @@
     transform: translateX(-50%);
     display: none;
   }
-}
 
-.other-answer.more.hide {
-  .desc {
-    height: 80px;
-    background: linear-gradient(360deg, rgba(161, 161, 171, 0) 0%, rgba(104, 104, 114, 1) 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+  .super-open.more.hide {
+    .desc {
+      background: linear-gradient(360deg, rgba(161, 161, 171, 0) 0%, rgba(104, 104, 114, 1) 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
   }
 }
 
-.other-answer.more:hover {
-  .icon {
-    display: block;
+.other-answer:hover {
+  .super-open.more {
+    .icon {
+      display: block;
+    }
   }
 }

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

@@ -3,13 +3,16 @@ import './index.less';
 import Progress from '../Progress';
 
 function ProgressText(props) {
-  const { progress, times, size } = props;
+  const { progress, width, times, unit = '遍', size } = props;
   return (
     <div className="progress-text">
-      <div className="p">
+      <div style={{ width }} className="p">
         <Progress progress={progress} size={size} />
       </div>
-      <div className="t">{times > 0 ? `${times}遍+` : ''}{progress}%</div>
+      <div className="t">
+        {times > 0 ? `${times}${unit}+` : ''}
+        {progress}%
+      </div>
     </div>
   );
 }

front/project/www/routes/my/collect/page.js

@@ -17,7 +17,10 @@ import { My } from '../../../stores/my';
 const columns = [
   { key: 'question_type', title: '题型', fixSort: true },
   { key: 'title', title: '题目ID', fixSort: true },
-  { key: 'description', title: '内容' },
+  {
+    key: 'description',
+    title: '内容',
+  },
   { key: 'time', title: '耗时', sort: true },
   { key: 'correct', title: '错误率', sort: true },
   { key: 'latest_time', title: '最近做题' },
@@ -51,7 +54,7 @@ export default class extends Page {
       timerange: 'today',
       filterMap: {},
       sortMap: {},
-      data: [{}, {}],
+      list: [{}, {}],
       selectList: [],
       allChecked: false,
       showDetail: false,
@@ -79,22 +82,34 @@ export default class extends Page {
 
   refreshQuestion(data) {
     const [startTime, endTime] = timeRange(data.timerange);
-    refreshQuestionType(this, data.subject, data.questionType, { all: true, needSentence: true, allSubject: true })
-      .then(({ questionTypes }) => {
-        return refreshStruct(this, data.tab, data.one, data.two, {
-          all: true, needPreview: false, needTextbook: true,
-        })
-          .then(({ structIds, latest, year }) => {
-            My.listQuestionCollect(Object.assign({ module: data.tab, questionTypes, structIds, latest, year, startTime, endTime }, this.state.search, {
-              order: Object.keys(data.sortMap).map(key => {
-                if (key === 'title') return 'pid desc, no desc';
-                return `${key} ${data.sortMap[key]}`;
-              }).join(','),
-            })).then(result => {
-              this.setState({ list: result.list, total: result.total });
-            });
-          });
+    refreshQuestionType(this, data.subject, data.questionType, {
+      all: true,
+      needSentence: true,
+      allSubject: true,
+    }).then(({ questionTypes }) => {
+      return refreshStruct(this, data.tab, data.one, data.two, {
+        all: true,
+        needPreview: false,
+        needTextbook: true,
+      }).then(({ structIds, latest, year }) => {
+        My.listQuestionCollect(
+          Object.assign(
+            { module: data.tab, questionTypes, structIds, latest, year, startTime, endTime },
+            this.state.search,
+            {
+              order: Object.keys(data.sortMap)
+                .map(key => {
+                  if (key === 'title') return 'pid desc, no desc';
+                  return `${key} ${data.sortMap[key]}`;
+                })
+                .join(','),
+            },
+          ),
+        ).then(result => {
+          this.setState({ list: result.list, total: result.total });
+        });
       });
+    });
   }
 
   refreshArticle(data) {
@@ -138,7 +153,7 @@ export default class extends Page {
     }
   }
 
-  onAction() { }
+  onAction() {}
 
   onSelect(selectList) {
     this.setState({ selectList });
@@ -171,40 +186,58 @@ export default class extends Page {
   }
 
   renderTabquestion() {
-    const { questionSubjectSelect, questionSubjectMap = {}, oneSelect, twoSelectMap = {}, filterMap = {}, sortMap = {}, list = [] } = this.state;
+    const {
+      questionSubjectSelect,
+      questionSubjectMap = {},
+      oneSelect,
+      twoSelectMap = {},
+      filterMap = {},
+      sortMap = {},
+      list = [],
+    } = this.state;
     const { selectList = [], allChecked, page, total } = this.state;
     return (
       <div className="tab-1-layout">
         <UserAction
           search
-          selectList={[{
-            children: [{
-              key: 'subject',
-              placeholder: '学科',
-              select: questionSubjectSelect,
-            }, {
-              placeholder: '题型',
-              key: 'questionType',
-              be: 'subject',
-              selectMap: questionSubjectMap,
-            }],
-          }, {
-            label: '范围',
-            children: [{
-              key: 'one',
-              placeholder: '全部',
-              select: oneSelect,
-            }, {
-              key: 'two',
-              be: 'one',
-              placeholder: '全部',
-              selectMap: twoSelectMap,
-            }],
-          }, {
-            right: true,
-            key: 'timerange',
-            select: TimeRange,
-          }]}
+          selectList={[
+            {
+              children: [
+                {
+                  key: 'subject',
+                  placeholder: '学科',
+                  select: questionSubjectSelect,
+                },
+                {
+                  placeholder: '题型',
+                  key: 'questionType',
+                  be: 'subject',
+                  selectMap: questionSubjectMap,
+                },
+              ],
+            },
+            {
+              label: '范围',
+              children: [
+                {
+                  key: 'one',
+                  placeholder: '全部',
+                  select: oneSelect,
+                },
+                {
+                  key: 'two',
+                  be: 'one',
+                  placeholder: '全部',
+                  selectMap: twoSelectMap,
+                },
+              ],
+            },
+            {
+              right: true,
+              key: 'timerange',
+              select: TimeRange,
+            },
+          ]}
           filterMap={filterMap}
           onFilter={value => this.onFilter(value)}
         />
@@ -278,7 +311,7 @@ export default class extends Page {
   renderModal() {
     return [
       <ArticleDetail show={this.state.showDetail} onClose={() => this.setState({ showDetail: false })} />,
-      <Modal title="操作提示" confirmText="好的，知道了" btnAlign="center" onConfirm={() => { }}>
+      <Modal title="操作提示" confirmText="好的，知道了" btnAlign="center" onConfirm={() => {}}>
         <div className="flex-layout m-b-2">
           <div className="flex-block">
             <div className="t-1 t-s-18">组卷功能</div>
@@ -298,10 +331,10 @@ export default class extends Page {
           查阅以上信息。
         </div>
       </Modal>,
-      <Modal title="组卷练习" confirmText="好的，知道了" btnAlign="center" onConfirm={() => { }}>
+      <Modal title="组卷练习" confirmText="好的，知道了" btnAlign="center" onConfirm={() => {}}>
         <div className="t-2 t-s-18">不可同时选中语文题和数学题，请重新选择。</div>
       </Modal>,
-      <Modal title="组卷练习" confirmText="开始练习" onConfirm={() => { }} onCancel={() => { }}>
+      <Modal title="组卷练习" confirmText="开始练习" onConfirm={() => {}} onCancel={() => {}}>
         <div className="t-2 t-s-18">
           您共选择了 <span className="t-4">50</span> 道题目，是否开始练习？
         </div>
@@ -315,15 +348,15 @@ export default class extends Page {
           次以上的错题
         </div>
       </Modal>,
-      <Modal title="移出" onConfirm={() => { }} onCancel={() => { }}>
+      <Modal title="移出" onConfirm={() => {}} onCancel={() => {}}>
         <div className="t-2 t-s-18">
           当前选中的 <span className="t-4">50</span> 道题即将被移出错题本，移出后无法恢复，是否继续？
         </div>
       </Modal>,
-      <Modal title="导出" confirmText="好的，知道了" btnAlign="center" onConfirm={() => { }}>
+      <Modal title="导出" confirmText="好的，知道了" btnAlign="center" onConfirm={() => {}}>
         <div className="t-2 t-s-18">正在下载中，请不要关闭当前页面！</div>
       </Modal>,
-      <Modal title="导出" confirmText="导出" onConfirm={() => { }} onCancel={() => { }}>
+      <Modal title="导出" confirmText="导出" onConfirm={() => {}} onCancel={() => {}}>
         <div className="t-2 t-s-18 m-b-5">
           当前共选中 <span className="t-4">50</span> 道题，请确认需要导出的内容：
         </div>
@@ -338,7 +371,7 @@ export default class extends Page {
           })}
         </div>
       </Modal>,
-      <Modal title="导出" confirmText="导出" onConfirm={() => { }} onCancel={() => { }}>
+      <Modal title="导出" confirmText="导出" onConfirm={() => {}} onCancel={() => {}}>
         <div className="t-2 t-s-18 m-b-5">
           当前共选中 <span className="t-4">50</span> 道题，请确认需要导出的内容：
         </div>

front/project/www/routes/my/note/page.js

@@ -11,6 +11,7 @@ import menu, { refreshQuestionType, refreshStruct } from '../index';
 import Tabs from '../../../components/Tabs';
 import { TimeRange } from '../../../../Constant';
 import { My } from '../../../stores/my';
+import { OpenText } from '../../../components/Open';
 
 const columns = [
   {
@@ -36,10 +37,11 @@ const columns = [
         <div className="group">
           <Link to="">{text}</Link>
         </div>
-      ) : (<div className="sub">
-        <div className="date">{text.split(' ')[0]}</div>
-        <div className="date">{text.split(' ')[1]}</div>
-      </div>
+      ) : (
+        <div className="sub">
+          <div className="date">{text.split(' ')[0]}</div>
+          <div className="date">{text.split(' ')[1]}</div>
+        </div>
       );
     },
   },
@@ -53,7 +55,7 @@ const columns = [
           <Link to="">{text}</Link>
         </div>
       ) : (
-        <div className="sub">{text}</div>
+        <OpenText>{text}</OpenText>
       );
     },
   },
@@ -128,21 +130,33 @@ export default class extends Page {
       data.filterMap.timerange = data.timerange;
     }
     const [startTime, endTime] = timeRange(data.timerange);
-    refreshQuestionType(this, data.subject, data.questionType, { all: true, needSentence: false, allSubject: true })
-      .then(({ questionTypes }) => {
-        return refreshStruct(this, data.tab, data.one, data.two, {
-          all: true, needPreview: false, needTextbook: false,
-        })
-          .then(({ structIds, latest, year }) => {
-            My.listQuestionNote(Object.assign({ module: data.tab, questionTypes, structIds, latest, year, startTime, endTime }, this.state.search, {
-              order: Object.keys(data.sortMap).map(key => {
-                return `${key} ${data.sortMap[key]}`;
-              }).join(','),
-            })).then(result => {
-              this.setState({ list: result.list, total: result.total, page: data.page });
-            });
-          });
+    refreshQuestionType(this, data.subject, data.questionType, {
+      all: true,
+      needSentence: false,
+      allSubject: true,
+    }).then(({ questionTypes }) => {
+      return refreshStruct(this, data.tab, data.one, data.two, {
+        all: true,
+        needPreview: false,
+        needTextbook: false,
+      }).then(({ structIds, latest, year }) => {
+        My.listQuestionNote(
+          Object.assign(
+            { module: data.tab, questionTypes, structIds, latest, year, startTime, endTime },
+            this.state.search,
+            {
+              order: Object.keys(data.sortMap)
+                .map(key => {
+                  return `${key} ${data.sortMap[key]}`;
+                })
+                .join(','),
+            },
+          ),
+        ).then(result => {
+          this.setState({ list: result.list, total: result.total, page: data.page });
+        });
       });
+    });
   }
 
   onTabChange(tab) {
@@ -179,7 +193,7 @@ export default class extends Page {
     }
   }
 
-  onAction() { }
+  onAction() {}
 
   onSelect(selectList) {
     this.setState({ selectList });
@@ -191,7 +205,16 @@ export default class extends Page {
   }
 
   renderTable() {
-    const { tab, questionSubjectSelect, questionSubjectMap = {}, oneSelect, twoSelectMap = {}, filterMap = {}, sortMap = {}, list = [] } = this.state;
+    const {
+      tab,
+      questionSubjectSelect,
+      questionSubjectMap = {},
+      oneSelect,
+      twoSelectMap = {},
+      filterMap = {},
+      sortMap = {},
+      list = [],
+    } = this.state;
     const { selectList = [], allChecked, page, total } = this.state;
     return (
       <div className="table-layout">
@@ -208,34 +231,44 @@ export default class extends Page {
         />
         <UserAction
           search
-          selectList={[{
-            children: [{
-              key: 'subject',
-              placeholder: '学科',
-              select: questionSubjectSelect,
-            }, {
-              placeholder: '题型',
-              key: 'questionType',
-              be: 'subject',
-              selectMap: questionSubjectMap,
-            }],
-          }, {
-            label: '范围',
-            children: [{
-              key: 'one',
-              placeholder: '全部',
-              select: oneSelect,
-            }, {
-              key: 'two',
-              be: 'one',
-              placeholder: '全部',
-              selectMap: twoSelectMap,
-            }],
-          }, {
-            right: true,
-            key: 'timerange',
-            select: TimeRange,
-          }]}
+          selectList={[
+            {
+              children: [
+                {
+                  key: 'subject',
+                  placeholder: '学科',
+                  select: questionSubjectSelect,
+                },
+                {
+                  placeholder: '题型',
+                  key: 'questionType',
+                  be: 'subject',
+                  selectMap: questionSubjectMap,
+                },
+              ],
+            },
+            {
+              label: '范围',
+              children: [
+                {
+                  key: 'one',
+                  placeholder: '全部',
+                  select: oneSelect,
+                },
+                {
+                  key: 'two',
+                  be: 'one',
+                  placeholder: '全部',
+                  selectMap: twoSelectMap,
+                },
+              ],
+            },
+            {
+              right: true,
+              key: 'timerange',
+              select: TimeRange,
+            },
+          ]}
           filterMap={filterMap}
           onFilter={value => this.onFilter(value)}
         />
@@ -276,7 +309,9 @@ export default class extends Page {
             </div>
           );
         })}
-        {total && list.length > 0 && <UserPagination total={total} current={page} onChange={(p) => this.onChangePage(p)} />}
+        {total && list.length > 0 && (
+          <UserPagination total={total} current={page} onChange={p => this.onChangePage(p)} />
+        )}
       </div>
     );
   }

front/project/www/routes/my/order/page.js

@@ -1,10 +1,14 @@
 import React from 'react';
 import './index.less';
+import { Icon, Radio } from 'antd';
 import Page from '@src/containers/Page';
 import { getMap, formatMoney, formatDate } from '@src/services/Tools';
 import UserLayout from '../../../layouts/User';
 import menu from '../index';
 import UserTable from '../../../components/UserTable';
+import Modal from '../../../components/Modal';
+import More from '../../../components/More';
+import IconButton from '../../../components/IconButton';
 import { Order } from '../../../stores/order';
 import { RecordSource, ServiceKey } from '../../../../Constant';
 
@@ -28,27 +32,44 @@ const columns = [
       if (record.productType === 'service') {
         return `${ServiceKeyMap[text]}`;
       }
-      return '';
+      return (
+        <div className="t-2">
+          <div className="flex-layout m-b-5">
+            <div className="flex-block">教学资料-01</div>
+            <More menu={[{ label: '开发票', key: '1' }, { label: '订单详情', key: '2' }]}>
+              <IconButton type="more" />
+            </More>
+          </div>
+          <div className="flex-layout">
+            <div className="flex-block">
+              教学资料-01
+              <br />
+              等4个商品
+            </div>
+            <IconButton type="more" />
+          </div>
+        </div>
+      );
     },
   },
   {
     title: '购买时间',
     key: 'createTime',
-    render: (text) => {
+    render: text => {
       return formatDate(text, 'YYYY-MM-DD\nHH:mm:ss');
     },
   },
   {
     title: '付款方式',
     key: 'source',
-    render: (text) => {
+    render: text => {
       return RecordSourceMap[text];
     },
   },
   {
     title: '付款金额',
     key: 'money',
-    render: (text) => {
+    render: text => {
       return formatMoney(text);
     },
   },
@@ -61,14 +82,15 @@ export default class extends Page {
   }
 
   initState() {
-    return {};
+    return {
+      list: [{}],
+    };
   }
 
   initData() {
-    Order.list(this.state.search)
-      .then(result => {
-        this.setState({ list: result.list, total: result.total, page: this.state.search.page });
-      });
+    Order.list(this.state.search).then(result => {
+      this.setState({ list: result.list, total: result.total, page: this.state.search.page });
+    });
   }
 
   onChangePage(page) {
@@ -92,6 +114,60 @@ export default class extends Page {
           total={total}
           current={page}
         />
+        <Modal title="开发票" width={630} btnType="link" confirmText="申请" onConfirm={() => {}} onCancel={() => {}}>
+          <div className="input-layout m-b-2 t-2 t-s-16">
+            <div className="label m-r-5">发票类型:</div>
+            <div className="input-block">
+              <Radio />
+              普通增值税电子发票
+            </div>
+          </div>
+          <div className="input-layout m-b-2 t-2 t-s-16">
+            <div className="label m-r-5">抬头类型:</div>
+            <div className="input-block">
+              <span className="m-r-2">
+                <Radio />
+                个人
+              </span>
+              <span className="m-l-2">
+                <Radio />
+                公司
+              </span>
+            </div>
+          </div>
+          <div className="input-layout m-b-2 t-2 t-s-16">
+            <div className="label m-r-5">发票抬头:</div>
+            <div className="input-block">
+              <input style={{ width: 330, paddingTop: 3, paddingBottom: 3 }} className="b-c-1 p-l-1 p-r-1 p-l-1" />
+            </div>
+          </div>
+          <div className="input-layout m-b-2 t-2 t-s-16">
+            <div className="label m-r-5">纳税人识别号:</div>
+            <div className="input-block">
+              <input style={{ width: 300, paddingTop: 3, paddingBottom: 3 }} className="b-c-1 p-l-1 p-r-1 p-l-1" />
+            </div>
+          </div>
+          <div className="input-layout m-b-2 t-2 t-s-16">
+            <div className="label m-r-5">发票内容:</div>
+            <div className="input-block">
+              <Radio />
+              商品明细
+            </div>
+          </div>
+          <div className="input-layout t-2 t-s-16">
+            <div className="label m-r-5">发票金额:</div>
+            <div className="input-block">¥ 210010.0</div>
+          </div>
+        </Modal>
+        <Modal title="申请成功" width={630} confirmText="好的，知道了" btnAlign="center" onConfirm={() => {}}>
+          <div className="t-2 t-s-18">
+            <Icon className="t-5 m-r-5" type="check" />
+            我们会在三个工作日内将电子发票发送至您的绑定邮箱:
+          </div>
+          <div className="t-2 t-s-18">201-30-2103@12321.com</div>
+          <div className="m-b-2 t-2 t-s-18">请注意查收。</div>
+          <div className="m-t-2 t-3 t-s-14">我们也会通过站内信的方式通知您</div>
+        </Modal>
       </div>
     );
   }