add home result page

front/.eslintrc

@@ -30,7 +30,8 @@
     "toLink": false,
     "openLink": false,
     "WxLogin": false,
-    "CKEDITOR": false
+    "CKEDITOR": false,
+    "Masonry": false
   },
   "rules": {
     "camelcase": "off",

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

@@ -60,6 +60,16 @@
   color: @theme_color;
 }
 
+.button.error {
+  background: #f36565;
+  color: #fff;
+}
+
+.button.warn {
+  background: #f2b252;
+  color: #fff;
+}
+
 .button.border {
   background: #fff;
   border: 2px solid @theme_color;
@@ -79,4 +89,12 @@
 
 .button.white:hover {
   color: @theme_color_hover;
+}
+
+.button.error:hover {
+  background: darken(#f36565, 5);
+}
+
+.button.warn:hover {
+  background: darken(#f2b252, 5);
 }

front/project/www/local.json

@@ -1,6 +1,10 @@
 {
   "development": {
-    "scripts": ["/ckeditor/ckeditor.js", "http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"],
+    "scripts": [
+      "masonry.pkgd.min.js",
+      "/ckeditor/ckeditor.js",
+      "http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"
+    ],
     "proxy": [
       {
         "target": "http://qianxing.nuliji.com",

front/project/www/routes/page/home/index.less

@@ -1,6 +1,8 @@
 @charset "utf-8";
 
 #index {
+  background: #fff;
+
   .block {
     .body {
       width: 1200px;
@@ -16,7 +18,10 @@
 
   .block-1 {
     height: 470px;
-    background: #fff;
+    background-image: url('/assets/part1_img_1920.png');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color: #fff;
 
     .body {
       padding-top: 110px;
@@ -64,8 +69,49 @@
 
   .block-3 {
     background: #fefefe;
-    padding-top: 100px;
-    padding-bottom: 70px;
+    position: relative;
+    padding-bottom: 400px;
+
+    .bg {
+      .bg-1 {
+        background-image: url('/assets/bg_img_1920.png');
+        background-repeat: no-repeat;
+        background-position: center;
+        height: 500px;
+      }
+
+      .bg-2 {
+        background-image: url('/assets/bg_img2_1920.png');
+        background-repeat: no-repeat;
+        background-position: center;
+        height: 500px;
+      }
+
+      .bg-3 {
+        background-image: url('/assets/bg_img3_1920.png');
+        background-repeat: no-repeat;
+        background-position: center;
+        height: 500px;
+      }
+
+      .bg-4 {
+        background-image: url('/assets/bg_img4_1920.png');
+        background-repeat: no-repeat;
+        background-position: center;
+        height: 290px;
+      }
+    }
+
+    .fixed {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+    }
+
+    .body {
+      padding-top: 90px;
+    }
 
     .step {
       .m-title {
@@ -102,10 +148,10 @@
     }
 
     .step-1 {
-      margin-bottom: 100px;
+      margin-bottom: 90px;
 
       .m-title {
-        margin-bottom: 30px;
+        margin-bottom: 20px;
       }
 
       .item {
@@ -117,6 +163,7 @@
           font-size: 24px;
           font-weight: 600;
           color: #303139;
+          margin-bottom: 40px;
 
           .sub {
             font-size: 24px;
@@ -124,6 +171,17 @@
             color: #C8D1DA;
           }
         }
+
+        .btn {
+          .button {
+            margin-right: 40px;
+          }
+
+          .btn-shadow {
+            box-shadow: 0px 15px 25px -5px rgba(66, 146, 240, 0.2);
+            border: 1px solid rgba(248, 251, 255, 1);
+          }
+        }
       }
     }
 
@@ -143,7 +201,11 @@
           font-size: 22px;
           font-weight: 600;
           color: #303139;
-          margin-bottom: 30px;
+          margin-bottom: 20px;
+
+          .assets {
+            margin-right: 5px;
+          }
 
           .sub {
             font-size: 14px;
@@ -161,9 +223,29 @@
       margin-bottom: 100px;
 
       .item {
-        height: 200px;
+        height: 160px;
         width: 380px;
-        padding: 40px 30px;
+        padding: 20px 30px;
+        position: relative;
+
+        .assets {
+          position: absolute;
+        }
+
+        .foot-1 {
+          bottom: 19px;
+          right: 34px;
+        }
+
+        .foot-2 {
+          top: 50px;
+          right: 154px;
+        }
+
+        .foot-3 {
+          top: 25px;
+          right: 27px;
+        }
 
         .title {
           font-size: 36px;
@@ -182,13 +264,15 @@
       margin-bottom: 130px;
 
       .m-title {
-        margin-bottom: 30px;
+        margin-bottom: 20px;
       }
 
       .box {
+
         .detail {
           display: inline-block;
           width: 920px;
+          vertical-align: top;
         }
 
         .list {
@@ -201,12 +285,17 @@
             width: 100%;
             opacity: 0.5;
             line-height: 120px;
-            text-align: center;
+            text-align: left;
+            padding-left: 60px;
             font-weight: 600;
             font-size: 18px;
             position: relative;
             cursor: pointer;
 
+            .assets {
+              margin-right: 8px;
+            }
+
             .place {
               opacity: 0;
               position: absolute;
@@ -214,6 +303,7 @@
               top: 0;
               bottom: 0;
               width: 40px;
+              text-align: center;
             }
 
             .place-1 {
@@ -248,6 +338,19 @@
               }
             }
 
+            .left-arrow {
+              opacity: 0;
+              position: absolute;
+              top: 50%;
+              left: -15px;
+              width: 0;
+              height: 0;
+              transform: translateY(-50%);
+              border-top: 10px solid transparent;
+              border-right: 15px solid #fff;
+              border-bottom: 10px solid transparent;
+            }
+
             .right-arrow {
               display: inline-block;
               position: relative;
@@ -272,14 +375,17 @@
             }
           }
 
-          .tab.active,
-          .tab:hover {
+          .tab.active {
             opacity: 1;
             box-shadow: 0px 12px 20px 0px rgba(156, 183, 223, 0.14), 0px 10px 20px 0px rgba(0, 0, 0, 0.01);
 
             .place {
               opacity: 1;
             }
+
+            .left-arrow {
+              opacity: 1;
+            }
           }
         }
       }
@@ -294,6 +400,13 @@
       .item {
         width: 380px;
         padding: 30px;
+        position: relative;
+
+        .sun {
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
 
         .title {
           font-size: 22px;
@@ -319,7 +432,11 @@
     height: 640px;
     padding-left: 150px;
     padding-top: 280px;
-    background: linear-gradient(241deg, rgba(132, 93, 72, 0) 0%, rgba(88, 50, 29, 1) 100%);
+    background-image: url('/assets/banner1.png');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color: linear-gradient(241deg, rgba(132, 93, 72, 0) 0%, rgba(88, 50, 29, 1) 100%);
+    margin-bottom: 20px;
 
     .title-1 {
       font-size: 32px;
@@ -337,6 +454,51 @@
   .block-5 {
     height: 530px;
     overflow-y: auto;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    background: #fff;
+
+    .grid-item {
+      width: 25%;
+      padding: 5px;
+
+      .item {
+        max-height: 260px;
+        background: #FAFAFA;
+        border: 1px solid #F1F4F7;
+        padding: 20px;
+        overflow: hidden;
+
+        .item-header {
+          margin-bottom: 10px;
+
+          .avatar {
+            width: 40px;
+            height: 40px;
+          }
+
+          .name {
+            color: #5E677B;
+            font-size: 16px;
+            vertical-align: middle;
+            display: inline-block;
+          }
+
+          .date {
+            color: #8897A8;
+            font-size: 12px;
+            float: right;
+            vertical-align: middle;
+          }
+        }
+
+        .item-body {
+          color: #8897A8;
+          padding-left: 10px;
+          overflow: hidden;
+        }
+      }
+    }
   }
 
   .block-6 {
@@ -362,6 +524,13 @@
         font-size: 24px;
         font-weight: 600;
         color: #303139;
+        position: relative;
+
+        .assets {
+          position: absolute;
+          left: -40px;
+          top: 5px;
+        }
       }
 
       .desc {
@@ -396,6 +565,12 @@
         color: #fff;
         margin-bottom: 10px;
       }
+
+      .qrcode {
+        background: #8683fb;
+        padding: 15px;
+        display: inline-block;
+      }
     }
   }
 }

front/project/www/routes/page/home/page.js

@@ -1,10 +1,29 @@
 import React from 'react';
 import './index.less';
 import Page from '@src/containers/Page';
+import Assets from '@src/components/Assets';
 import Button from '../../../components/Button';
 import Footer from '../../../components/Footer';
 
 export default class extends Page {
+  constructor(props) {
+    super(props);
+    this.state = { index: 0 };
+  }
+
+  initData() {
+    setTimeout(() => {
+      this.createLayout();
+    }, 1);
+  }
+
+  createLayout() {
+    const msnry = new Masonry('.grid', {
+      itemSelector: '.grid-item',
+    });
+    msnry.layout();
+  }
+
   renderView() {
     return (
       <div>
@@ -26,159 +45,393 @@ export default class extends Page {
           </div>
         </div>
         <div className="block block-3">
-          <div className="body">
-            <div className="step step-1">
-              <div className="m-title">备考攻略</div>
-              <div className="list">
-                <div className="item m-r-2">
-                  <div className="title">
-                    自学指南<span className="sub">Self-guided</span>
+          <div className="bg">
+            <div className="bg-1" />
+            <div className="bg-2" />
+            <div className="bg-3" />
+            <div className="bg-4" />
+          </div>
+          <div className="fixed">
+            <div className="body">
+              <div className="step step-1">
+                <div className="m-title">备考攻略</div>
+                <div className="list">
+                  <div className="item m-r-2">
+                    <div className="title">
+                      自学指南<span className="sub">Self-guided</span>
+                    </div>
+                    <div className="btn">
+                      <Button className="btn-shadow" size="lager">
+                        从零开始
+                      </Button>
+                      <Button className="btn-shadow" theme="white" size="lager">
+                        继续学习
+                      </Button>
+                    </div>
                   </div>
-                </div>
-                <div className="item m-l-2">
-                  <div className="title">
-                    参与课程<span className="sub">With DUKB24</span>
+                  <div className="item m-l-2">
+                    <div className="title">
+                      参与课程<span className="sub">With DUKB24</span>
+                    </div>
+                    <div className="btn">
+                      <Button theme="error" size="lager" radius>
+                        从零开始
+                      </Button>
+                      <Button theme="warn" size="lager" radius>
+                        继续学习
+                      </Button>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div className="step step-2">
-              <div className="m-title">WHY 千行</div>
-              <div className="list">
-                <div className="item m-r-1-5">
-                  <div className="title">
-                    内容全⾯<span className="sub">360° Support</span>
+              <div className="step step-2">
+                <div className="m-title">WHY 千行</div>
+                <div className="list">
+                  <div className="item m-r-1-5">
+                    <div className="title">
+                      <Assets name="planet" />
+                      内容全⾯<span className="sub">360° Support</span>
+                    </div>
+                    <div className="desc">
+                      网站涵盖考试介绍、方法引导、技巧点拨、练习、课程、机经、模考、心经分享等，从入门到出分，一应俱全，满足各阶段考生的备考需求。
+                    </div>
                   </div>
-                  <div className="desc">
-                    网站涵盖考试介绍、方法引导、技巧点拨、练习、课程、机经、模考、心经分享等，从入门到出分，一应俱全，满足各阶段考生的备考需求。{' '}
+                  <div className="item m-r-1-5 m-l-1-5">
+                    <div className="title">
+                      <Assets name="expert" />
+                      指导专业<span className="sub">We are Pro.</span>
+                    </div>
+                    <div className="desc">专注GMAT备考8年 出分周期高于行业平均水平26% 学员均分高于行业18%</div>
                   </div>
-                </div>
-                <div className="item m-r-1-5 m-l-1-5">
-                  <div className="title">
-                    指导专业<span className="sub">We are Pro.</span>
+                  <div className="item m-l-1-5">
+                    <div className="title">
+                      <Assets name="userfriendly" />
+                      ⼈⼈会⽤<span className="sub">User-frriendly</span>
+                    </div>
+                    <div className="desc">
+                      除提供有用的数据信息外，网站多处设置信息导，提供必要的解释和原理说明，从源头规避误区，协助考生做出更加明智的决策，提高备考效率。
+                    </div>
                   </div>
-                  <div className="desc">专注GMAT备考8年 出分周期高于行业平均水平26% 学员均分高于行业18%</div>
                 </div>
-                <div className="item m-l-1-5">
-                  <div className="title">
-                    ⼈⼈会⽤<span className="sub">User-frriendly</span>
+              </div>
+              <div className="step step-3">
+                <div className="list">
+                  <div className="item m-r-1-5">
+                    <div className="title" style={{ color: '#4292F0' }}>
+                      123342
+                    </div>
+                    <div className="desc">注册用户</div>
+                    <Assets className="foot-1" name="foot1" />
                   </div>
-                  <div className="desc">
-                    除提供有用的数据信息外，网站多处设置信息导，提供必要的解释和原理说明，从源头规避误区，协助考生做出更加明智的决策，提高备考效率。
+                  <div className="item m-r-1-5 m-l-1-5">
+                    <div className="title" style={{ color: '#FFB676' }}>
+                      2234
+                    </div>
+                    <div className="desc">700+分学员</div>
+                    <Assets className="foot-2" name="foot2" />
+                  </div>
+                  <div className="item m-l-1-5">
+                    <div className="title" style={{ color: '#F36565' }}>
+                      680
+                    </div>
+                    <div className="desc">学员均分</div>
+                    <Assets className="foot-3" name="foot1" />
                   </div>
                 </div>
               </div>
-            </div>
-            <div className="step step-3">
-              <div className="list">
-                <div className="item m-r-1-5">
-                  <div className="title" style={{ color: '#4292F0' }}>
-                    123342
-                  </div>
-                  <div className="desc">注册用户</div>
+              <div className="step step-4">
+                <div className="m-title">
+                  千⾏课程<span className="sub">Waste Less, Learn More</span>
                 </div>
-                <div className="item m-r-1-5 m-l-1-5">
-                  <div className="title" style={{ color: '#FFB676' }}>
-                    2234
+                <div className="box">
+                  <div className="detail">
+                    <Assets name="class_img1" />
                   </div>
-                  <div className="desc">700+分学员</div>
-                </div>
-                <div className="item m-l-1-5">
-                  <div className="title" style={{ color: '#F36565' }}>
-                    680
+                  <div className="list">
+                    <div
+                      className={`tab ${this.state.index === 0 ? 'active' : ''}`}
+                      onMouseEnter={() => this.setState({ index: 0 })}
+                    >
+                      <Assets name="grammar" />
+                      语法SC
+                      <div className="place place-1">
+                        <span className="right-arrow" />
+                      </div>
+                      <i className="left-arrow" />
+                    </div>
+                    <div
+                      className={`tab ${this.state.index === 1 ? 'active' : ''}`}
+                      onMouseEnter={() => this.setState({ index: 1 })}
+                    >
+                      <Assets name="read" />
+                      阅读RC
+                      <div className="place place-2">
+                        <span className="right-arrow" />
+                      </div>
+                      <i className="left-arrow" />
+                    </div>
+                    <div
+                      className={`tab ${this.state.index === 2 ? 'active' : ''}`}
+                      onMouseEnter={() => this.setState({ index: 2 })}
+                    >
+                      <Assets name="logic" />
+                      逻辑CR
+                      <div className="place place-3">
+                        <span className="right-arrow" />
+                      </div>
+                      <i className="left-arrow" />
+                    </div>
+                    <div
+                      className={`tab ${this.state.index === 3 ? 'active' : ''}`}
+                      onMouseEnter={() => this.setState({ index: 3 })}
+                    >
+                      <Assets name="math" />
+                      数学Quant
+                      <div className="place place-4">
+                        <span className="right-arrow" />
+                      </div>
+                      <i className="left-arrow" />
+                    </div>
                   </div>
-                  <div className="desc">学员均分</div>
                 </div>
               </div>
-            </div>
-            <div className="step step-4">
-              <div className="m-title">
-                千⾏课程<span className="sub">Waste Less, Learn More</span>
-              </div>
-              <div className="box">
-                <div className="detail" />
+              <div className="step step-5">
+                <div className="m-title">独家服务</div>
                 <div className="list">
-                  <div className="tab">
-                    语法SC
-                    <div className="place place-1">
-                      <span className="right-arrow" />
+                  <div className="item m-r-1-5" style={{ height: 210 }}>
+                    <Assets className="sun" name="sun_blue" />
+                    <div className="title" style={{ color: '#4292F0' }}>
+                      千⾏CAT模考<span className="sub">></span>
                     </div>
+                    <div className="desc">采⽤CAT出题机制、排名制算分⽅法</div>
+                    <div className="desc">独家题源，排除重题⼲扰</div>
+                    <div className="desc">模考报告提供具体考点分析，明确提升 ⽅向</div>
                   </div>
-                  <div className="tab">
-                    阅读RC
-                    <div className="place place-2">
-                      <span className="right-arrow" />
+                  <div className="item m-r-1-5 m-l-1-5" style={{ height: 250 }}>
+                    <Assets className="sun" name="sun_red" />
+                    <div className="title" style={{ color: '#FFB676' }}>
+                      机经服务<span className="sub">></span>
                     </div>
+                    <div className="desc">⾼效整理：梳理逻辑结构，⽆“反吞 噬”⻛险</div>
+                    <div className="desc">轻松获取：⾃动更新⾄邮箱代替⼿动 领取</div>
+                    <div className="desc">随时查阅：⼿机查看、在线浏览、在 线做题</div>
                   </div>
-                  <div className="tab">
-                    逻辑CR
-                    <div className="place place-3">
-                      <span className="right-arrow" />
-                    </div>
-                  </div>
-                  <div className="tab">
-                    数学Quant
-                    <div className="place place-4">
-                      <span className="right-arrow" />
+                  <div className="item m-l-1-5" style={{ height: 185 }}>
+                    <Assets className="sun" name="sun_yello" />
+                    <div className="title" style={{ color: '#F36565' }}>
+                      VIP服务<span className="sub">></span>
                     </div>
+                    <div className="desc">⾃由组卷，练你想练</div>
+                    <div className="desc">独家解析，专业报告</div>
+                    <div className="desc">提问特权，1VS1答疑</div>
                   </div>
                 </div>
               </div>
             </div>
-            <div className="step step-5">
-              <div className="m-title">独家服务</div>
-              <div className="list">
-                <div className="item m-r-1-5" style={{ height: 210 }}>
-                  <div className="title" style={{ color: '#4292F0' }}>
-                    千⾏CAT模考<span className="sub">></span>
-                  </div>
-                  <div className="desc">采⽤CAT出题机制、排名制算分⽅法</div>
-                  <div className="desc">独家题源，排除重题⼲扰</div>
-                  <div className="desc">模考报告提供具体考点分析，明确提升 ⽅向</div>
+          </div>
+        </div>
+        <div className="block block-4" />
+        <div className="block block-5">
+          <div className="grid">
+            <div className="grid-item">
+              <div className="item">
+                <div className="item-header">
+                  <Assets name="" />
+                  <div className="name">好想去旅行</div>
+                  <div className="date">2018年11月2日</div>
                 </div>
-                <div className="item m-r-1-5 m-l-1-5" style={{ height: 250 }}>
-                  <div className="title" style={{ color: '#FFB676' }}>
-                    机经服务<span className="sub">></span>
-                  </div>
-                  <div className="desc">⾼效整理：梳理逻辑结构，⽆“反吞 噬”⻛险</div>
-                  <div className="desc">轻松获取：⾃动更新⾄邮箱代替⼿动 领取</div>
-                  <div className="desc">随时查阅：⼿机查看、在线浏览、在 线做题</div>
+                <div className="item-body">
+                  掌握了学习方法以后，再加上刻苦勤奋的练习，第一次 考试就过关了。
+                  真的是太推荐了。掌握了学习方法以后法以后，再加上刻
                 </div>
-                <div className="item m-l-1-5" style={{ height: 185 }}>
-                  <div className="title" style={{ color: '#F36565' }}>
-                    VIP服务<span className="sub">></span>
-                  </div>
-                  <div className="desc">⾃由组卷，练你想练</div>
-                  <div className="desc">独家解析，专业报告</div>
-                  <div className="desc">提问特权，1VS1答疑</div>
+              </div>
+            </div>
+            <div className="grid-item">
+              <div className="item">
+                <div className="item-header">
+                  <Assets name="" />
+                  <div className="name">好想去旅行</div>
+                  <div className="date">2018年11月2日</div>
+                </div>
+                <div className="item-body">
+                  掌握了学习方法以后，再加上刻苦勤奋的练习，第一次 考试就过关了。 真的是太推荐了。掌握了学习方法以后过关
+                  了。 真的是太推荐了。掌握了学习方法以后，再加上刻
+                </div>
+              </div>
+            </div>
+            <div className="grid-item">
+              <div className="item">
+                <div className="item-header">
+                  <Assets name="" />
+                  <div className="name">好想去旅行</div>
+                  <div className="date">2018年11月2日</div>
+                </div>
+                <div className="item-body">
+                  掌握了学习方法以后，再加上刻苦过关了。掌握了 学习方法以后，再加上刻苦勤奋的练习，第一次考试就过关 了。
+                  真的是太推荐了。掌握了学习方法以后，再加上刻
+                </div>
+              </div>
+            </div>
+            <div className="grid-item">
+              <div className="item">
+                <div className="item-header">
+                  <Assets name="" />
+                  <div className="name">好想去旅行</div>
+                  <div className="date">2018年11月2日</div>
+                </div>
+                <div className="item-body">试就过关 了。 真的是太推荐了。掌握了学习方法以后，再加上刻</div>
+              </div>
+            </div>
+            <div className="grid-item">
+              <div className="item">
+                <div className="item-header">
+                  <Assets name="" />
+                  <div className="name">好想去旅行</div>
+                  <div className="date">2018年11月2日</div>
+                </div>
+                <div className="item-body">
+                  掌握了学习方法以后，再加上刻苦勤奋的练习，第一次 考试就过关了。 真的是太推荐了。掌握了学习方法以后，
+                  再加上刻苦勤奋的练习，第一次考试就过关了。掌握了 学习方法以后，再加上刻苦勤奋的练习，第一次考试就过关
+                </div>
+              </div>
+            </div>
+            <div className="grid-item">
+              <div className="item">
+                <div className="item-header">
+                  <Assets name="" />
+                  <div className="name">好想去旅行</div>
+                  <div className="date">2018年11月2日</div>
+                </div>
+                <div className="item-body">
+                  掌握了学习方法以后，再加上刻苦勤奋的练习，第一次 考试就过关了。 真的是太推荐了。掌握了学习方法以后，
+                  再加上刻苦勤奋的练习，第一次以后，再加上刻
+                </div>
+              </div>
+            </div>
+            <div className="grid-item">
+              <div className="item">
+                <div className="item-header">
+                  <Assets name="" />
+                  <div className="name">好想去旅行</div>
+                  <div className="date">2018年11月2日</div>
+                </div>
+                <div className="item-body">第一次考试就过关 了。 真的是太推荐了。掌握了学习方法以后，再加上刻</div>
+              </div>
+            </div>
+            <div className="grid-item">
+              <div className="item">
+                <div className="item-header">
+                  <Assets name="" />
+                  <div className="name">好想去旅行</div>
+                  <div className="date">2018年11月2日</div>
+                </div>
+                <div className="item-body">了。 真的是太推荐了。掌握了学习方法以后，再加上刻</div>
+              </div>
+            </div>
+            <div className="grid-item">
+              <div className="item">
+                <div className="item-header">
+                  <Assets name="" />
+                  <div className="name">好想去旅行</div>
+                  <div className="date">2018年11月2日</div>
+                </div>
+                <div className="item-body">
+                  掌握了学习方法以后，再加上刻苦第一次考试就过关了。掌握了
+                  学习方法以后，再加上刻苦勤奋的练习，第一次考试就过关 了。 真的是太推荐了。掌握了学习方法以后，再加上刻
+                </div>
+              </div>
+            </div>
+            <div className="grid-item">
+              <div className="item">
+                <div className="item-header">
+                  <Assets name="" />
+                  <div className="name">好想去旅行</div>
+                  <div className="date">2018年11月2日</div>
+                </div>
+                <div className="item-body">
+                  掌握了学习方法以后，再加上刻苦勤奋的练习，第一次 考试就过关了。 真的是太推荐了。掌握了学习方法以后，
+                  再加上刻苦勤奋的练习，第一次考试就过关 了。 真的是太推荐了。掌握了学习方法以后，再加上刻
+                </div>
+              </div>
+            </div>
+            <div className="grid-item">
+              <div className="item">
+                <div className="item-header">
+                  <Assets name="" />
+                  <div className="name">好想去旅行</div>
+                  <div className="date">2018年11月2日</div>
+                </div>
+                <div className="item-body">
+                  掌握了学习方法以后，再加上刻苦勤奋的练习关 了。 真的是太推荐了。掌握了学习方法以后，再加上刻
+                </div>
+              </div>
+            </div>
+            <div className="grid-item">
+              <div className="item">
+                <div className="item-header">
+                  <Assets name="" />
+                  <div className="name">好想去旅行</div>
+                  <div className="date">2018年11月2日</div>
+                </div>
+                <div className="item-body">
+                  掌握了学习方法以后，再加上刻苦勤奋的练习，第 了。 真的是太推荐了。掌握了学习方法以后，再加上刻
+                </div>
+              </div>
+            </div>
+            <div className="grid-item">
+              <div className="item">
+                <div className="item-header">
+                  <Assets name="" />
+                  <div className="name">好想去旅行</div>
+                  <div className="date">2018年11月2日</div>
+                </div>
+                <div className="item-body">
+                  掌握了学习方法以后，再加上刻苦勤奋的练习，第一次 考试就过关了。 真的是太推荐了。掌握了学习方法以后，
+                </div>
+              </div>
+            </div>
+            <div className="grid-item">
+              <div className="item">
+                <div className="item-header">
+                  <Assets name="" />
+                  <div className="name">好想去旅行</div>
+                  <div className="date">2018年11月2日</div>
+                </div>
+                <div className="item-body">
+                  掌握了学习方法以后，再加上刻苦勤奋的练习，第一次 考试就过关了。 真的是太推荐了。掌握了学习方法以后，
+                  再加上刻苦勤奋的练习，第一次考试就过关了。掌握了 学习方法以后，再加上刻苦勤奋的练习，第一次考试就过关
+                  了。 真的是太推荐了。掌握了学习方法以后，再加上刻
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div className="block block-4">
-          <div className="title-1">⼀个⼈⾛的更快，⼀群⼈⾛的更远</div>
-          <div className="title-2">加⼊“千⼈千⾏”，⾛的⼜快⼜远！</div>
-          <div className="title-2">——</div>
-        </div>
-        <div className="block block-5">5</div>
         <div className="block block-6">
           <div className="body">
             <div className="m-title">发展历程</div>
             <div className="step-list">
               <div className="step">
-                <div className="title">2012</div>
+                <div className="title">
+                  <Assets name="dot1" />
+                  2012
+                </div>
                 <div className="desc">“OG12语法千行”首次与大家见面，下载量过万，成为当年最热门的备考资料。</div>
               </div>
               <div className="step">
-                <div className="title">2015</div>
+                <div className="title">
+                  <Assets name="dot2" />
+                  2015
+                </div>
                 <div className="desc">
                   正式成立“广州多少教育咨询有限公司”，致力于帮助GMAT考生花更少的时间，取得更高的成绩，"Waste Less, Learn
                   More." 同时发行“PREP0708语法千行”、“GMAT数学千行”。
                 </div>
               </div>
               <div className="step">
-                <div className="title">2019</div>
+                <div className="title">
+                  <Assets name="dot3" />
+                  2019
+                </div>
                 <div className="desc">
                   发行“千行GMAT长难句”； 每4位GMAT考生中有3位使用“千行资料”； “千行”网站上线，我们希望为您做得更多。
                 </div>
@@ -191,6 +444,7 @@ export default class extends Page {
             <div className="step-list">
               <div className="step">
                 <div className="title">工作机会</div>
+                <Assets name="logo2" />
               </div>
               <div className="step" style={{ paddingLeft: 80 }}>
                 <div className="title">联系我们</div>
@@ -200,6 +454,9 @@ export default class extends Page {
               </div>
               <div className="step" style={{ paddingLeft: 140 }}>
                 <div className="title">关注我们</div>
+                <div className="qrcode">
+                  <Assets name="qrcode" />
+                </div>
               </div>
             </div>
           </div>

front/project/www/routes/page/index.js

@@ -2,6 +2,7 @@ import home from './home';
 import practise from './practise';
 import report from './report';
 import start from './start';
+import result from './result';
 import login from './login';
 
-export default [home, practise, report, start, login];
+export default [home, practise, report, start, result, login];

front/project/www/routes/page/result/index.js

@@ -0,0 +1,10 @@
+export default {
+  path: '/result/:id',
+  key: 'result',
+  title: '查看结果',
+  needLogin: true,
+  hideHeader: true,
+  component() {
+    return import('./page');
+  },
+};

front/project/www/routes/page/result/index.less

@@ -0,0 +1,205 @@
+@charset "utf-8";
+
+#result {
+  height: 100%;
+
+  .layout {
+    background: #fff;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    .layout-header {
+      height: 60px;
+      line-height: 60px;
+      padding: 0 50px;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      box-shadow: 0px 4px 14px 0px rgba(189, 199, 215, 0.16);
+
+      .no {
+        font-size: 20px;
+        display: inline-block;
+        color: #303036;
+        font-size: 20px;
+        margin-right: 25px;
+      }
+
+      .title {
+        color: #A7A7B7;
+        display: inline-block;
+        font-size: 20px;
+      }
+
+      .right {
+        float: right;
+        text-align: right;
+
+        .b {
+          margin-left: 30px;
+
+          .s {
+            color: #4299FF;
+          }
+        }
+
+        .assets {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+
+  .layout-footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 60px;
+    line-height: 60px;
+    box-shadow: 0px -4px 14px 0px rgba(189, 199, 215, 0.16);
+
+    .left {
+      width: 30%;
+      display: inline-block;
+      padding-left: 50px;
+    }
+
+    .right {
+      width: 30%;
+      display: inline-block;
+      text-align: right;
+      padding-right: 50px;
+    }
+
+    .center {
+      width: 40%;
+      display: inline-block;
+      text-align: center;
+
+      .item {
+        display: inline-block;
+        width: 72px;
+        height: 36px;
+        line-height: 36px;
+        margin: 0 10px;
+        color: #787883;
+        cursor: pointer;
+      }
+
+      .item:hover {
+        color: #4299FF;
+      }
+    }
+  }
+
+  .layout-body {
+    background: #fff;
+    flex: 1;
+    overflow: hidden;
+    overflow-y: auto;
+    margin: 60px 0;
+
+    .layout-content {
+      display: flex;
+      height: 100%;
+
+      .content-left {
+        flex: 1;
+      }
+
+      .content-right {
+        flex: 1;
+        background: #EFF3F7;
+        padding: 20px 20px 0 20px;
+        display: flex;
+        flex-direction: column;
+
+        .tabs.card {
+          background: none;
+          margin: 0 -5px;
+
+          >a {
+            width: 100%;
+            padding: 0 5px;
+          }
+
+          .tab {
+            background: #E5E8EE;
+            border-radius: 4px 4px 0px 0px;
+          }
+
+          .tab.active,
+          .tab:hover {
+            background: #fff;
+          }
+        }
+
+        .detail {
+          flex: 1;
+          background: #fff;
+          padding: 30px 50px;
+          overflow: hidden;
+          overflow-y: auto;
+          font-size: 16px;
+          color: #686872;
+        }
+      }
+    }
+  }
+
+  .modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    .body {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      background: #006DAA;
+      width: 400px;
+      color: #fff;
+
+      .title {
+        height: 38px;
+        line-height: 38px;
+        font-size: 18px;
+        padding-left: 25px;
+        border-bottom: 1px solid #fff;
+      }
+
+      .desc {
+        text-align: center;
+        margin-top: 20px;
+        margin-bottom: 20px;
+
+      }
+
+      .btn-list {
+        text-align: center;
+        margin-bottom: 15px;
+
+        .btn {
+          display: inline-block;
+          width: 70px;
+          line-height: 35px;
+          height: 35px;
+          border: 1px solid #fff;
+          background: #006DAA;
+          cursor: pointer;
+        }
+
+        .btn:hover {
+          background: darken(#006DAA, 5);
+        }
+      }
+    }
+  }
+}

front/project/www/routes/page/result/page.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import './index.less';
+import Page from '@src/containers/Page';
+import Assets from '@src/components/Assets';
+import Tabs from '../../../components/Tabs';
+
+export default class extends Page {
+  renderView() {
+    const { modal } = this.state;
+    return (
+      <div className="layout">
+        <div className="layout-header">
+          <div className="no">No.36</div>
+          <div className="title">OG18 - Easy (21-40) </div>
+          <div className="right">
+            <span className="b">
+              用时:<span className="s">1</span>m<span className="s">39</span>s
+            </span>
+            <span className="b">
+              全站:<span className="s">1</span>m<span className="s">39</span>s
+            </span>
+            <span className="b">
+              <span className="s">80</span>%
+            </span>
+            <Assets name="" />
+            <Assets name="" />
+          </div>
+        </div>
+        <div className="layout-body">{this.renderContent()}</div>
+        <div className="layout-footer">
+          <div className="left">1</div>
+          <div className="center">
+            <div className="item">笔记</div>
+            <div className="item">提问</div>
+            <div className="item">纠错</div>
+          </div>
+          <div className="right">1</div>
+        </div>
+        {modal ? this.renderModal() : ''}
+      </div>
+    );
+  }
+
+  renderContent() {
+    return (
+      <div className="layout-content">
+        {this.renderLeft()}
+        {this.renderRight()}
+      </div>
+    );
+  }
+
+  renderRight() {
+    return (
+      <div className="content-right">
+        <Tabs
+          type="card"
+          active="1"
+          tabs={[
+            { key: '1', name: '官方解析', path: '/' },
+            { key: '2', name: '千行解析', path: '/' },
+            { key: '3', name: '题源联想', path: '/' },
+            { key: '4', name: '相关回答', path: '/' },
+          ]}
+        />
+        <div className="detail">
+          “Offering support services to spouses caring for their other halves may reduce martial stress and prevent
+          divorce at older ages,” she said. “But it’s also important to recognize that the pressure to divorce may be
+          health-related and that sick ex-wives may need additional care and services to prevent worsening health and
+          increased health costs.”
+        </div>
+      </div>
+    );
+  }
+
+  renderLeft() {
+    return <div className="content-left">1</div>;
+  }
+
+  renderModal() {
+    const { modal } = this.state;
+    return (
+      <div className="modal">
+        <div className="mask" />
+        <div className="body">
+          <div className="title">{modal.title}</div>
+          <div className="desc">{modal.desc}</div>
+          {modal.type === 'confirm' ? (
+            <div className="btn-list">
+              <div className="btn" onClick={() => this.hideModal(true)}>
+                <span className="t-d-l">Y</span>es
+              </div>
+              <div className="btn" onClick={() => this.hideModal(false)}>
+                <span className="t-d-l">N</span>o
+              </div>
+            </div>
+          ) : (
+            <div className="btn-list">
+              <div className="btn" onClick={() => this.hideModal(true)}>
+                <span className="t-d-l">O</span>k
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+}

front/project/www/routes/page/start/page.js

@@ -152,7 +152,7 @@ export default class extends Page {
     return this.renderDetail();
   }
 
-  renderCotent() {
+  renderContent() {
     const { question = { content: {} }, step } = this.state;
     const { steps = [] } = question.content;
     return (
@@ -216,7 +216,7 @@ export default class extends Page {
           </div>
         </div>
         <div className={`layout-body ${typeset}`}>
-          {this.renderCotent()}
+          {this.renderContent()}
           {this.renderAnswer()}
         </div>
         <div className="layout-footer">