blessing rank basic complete

package.json

@@ -46,7 +46,7 @@
     "less-loader": "^4.1.0",
     "lodash": "^4.17.15",
     "mini-css-extract-plugin": "0.5.0",
-    "node-sass": "^4.11.0",
+    "node-sass": "^4.13.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "pnp-webpack-plugin": "1.2.1",
     "postcss-flexbugs-fixes": "4.1.0",

src/components/blessingRank/index.js

+import React, { Component } from 'react';
+import { http } from "@/utils";
+import './index.scss';
+
+class BlessingRank extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      rankList: []
+    }
+  }
+
+  componentDidMount() {
+    this.fetchRankData();
+  }
+
+  fetchRankData = () => {
+    http.get(`${API.home}/sys/blessing/ranking`).then(res => {
+      const { code, data } = res.data;
+      if(code === 200) {
+        this.setState({
+          rankList: data,
+        });
+      }
+    });
+  }
+
+  formatString = (str, len) => {
+    return str.length > len? `${str.substr(0, len)}...` : str;
+  }
+
+  render() {
+    const { rankList } = this.state;
+    return (
+      <>
+        <div className="rank__banner">
+
+        </div>
+        <div className="rank__body">
+          <div className="rank__table">
+            <dl className="rank__table-header">
+              <dd className="rank__table-column">排名</dd>
+              <dd className="rank__table-column">用户</dd>
+              <dd className="rank__table-column">成绩</dd>
+              <dd className="rank__table-column">奖品</dd>
+            </dl>
+            {
+              rankList.map((item, index) => {
+                return (
+                  <dl className="rank__table-body" key={index}>
+                    <dd className="rank__table-column">
+                      {
+                        index < 3
+                        ? (
+                          <i className="rank__table-num" data-num={index+1}></i>
+                        )
+                        : index + 1
+                      }
+                    </dd>
+                    <dd className="rank__table-column">
+                      <div className="rank__table-user">
+                        <i className="rank__table-portrait" style={{backgroundImage: `url(${item.head_image})`}}></i>
+                        <span>{this.formatString(item.user_name, 5)}</span>
+                      </div>
+                    </dd>
+                    <dd className="rank__table-column">{item.blessing_value}</dd>
+                    <dd className="rank__table-column">{this.formatString(item.prize_name, 7)}</dd>
+                  </dl>
+                );
+              })
+            }
+            
+          </div>
+          <div className="rank__rule">
+            <h2 className="rank__rule-title">活动规则</h2>
+            <p className="rank__rule-desc">1. 11月5日至11月13日之间每人有一次测试机会，可通过“集福气”活动额外获得2次测试机会；</p>
+            <p className="rank__rule-desc">2. 单次测试时间为一小时，超时自动提交试卷；</p>
+            <p className="rank__rule-desc">3. 试卷内容为Python基础（8道题*3分）、机器学习（12道题*3分）、深度学习（10道题*4分），总分100分；</p>
+            <p className="rank__rule-desc">4. 无固定试卷，参与测试时从试题库中随机抽题组卷；</p>
+            <p className="rank__rule-desc">5. 排行榜实时更新，分数相同则用时短者排名更高，多次测试保留最高分；</p>
+            <p className="rank__rule-desc">6. 如发现某账号有作弊嫌疑，七月在线有权清空账号测试成绩；</p>
+            <p className="rank__rule-desc">7. 活动最终解释权归七月在线所有。</p>
+          </div>
+        </div>
+      </>
+    );
+  }
+}
+
+export default BlessingRank;
\ No newline at end of file

src/components/blessingRank/index.scss

+.rank__banner {
+  height: 168px;
+  background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/rank-banner.png');
+  background-size: cover;
+}
+
+.rank__body {
+  padding: 0 5px 39px;
+  background-color: #5327FA;
+}
+
+.rank__table {
+  display: table;
+  width: 100%;
+  margin: 0 0 20px;
+  padding: 25px 0 0;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.rank__table-header {
+  display: table-row;
+  height: 38px;
+  border-radius: 5px 5px 0px 0px;
+  background-color: #5970FF;
+}
+
+.rank__table-body {
+  display: table-row;
+  height: 38px;
+  background-color: #471CE6;
+
+  &:nth-child(odd) {
+    background-color: #3900C9;
+  }
+}
+
+.rank__table-column {
+  display: table-cell;
+  font-size: 14px;
+  color: #fff;
+  text-align: center;
+  vertical-align: middle;
+
+  &:nth-child(1) {
+    width: 15%;
+  }
+
+  &:nth-child(2) {
+    width: 30%;
+  }
+
+  &:nth-child(3) {
+    width: 20%;
+  }
+
+  &:nth-child(4) {
+    width: 35%;
+  }
+}
+
+.rank__table-num {
+  display: inline-block;
+  width: 14px;
+  height: 16px;
+  background-size: cover;
+
+  &[data-num="1"] {
+    background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/717/-s-diyiming.png');
+  }
+
+  &[data-num="2"] {
+    background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/717/-s-dierming.png');
+  }
+
+  &[data-num="3"] {
+    background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/717/-s-disanming.png');
+  }
+}
+
+.rank__table-user {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rank__table-portrait {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  margin-right: 5px;
+  border-radius: 50%;
+  background-size: cover;
+}
+
+.rank__rule {
+  margin: 0 5px;
+  padding: 20px 20px 48px;
+  border-radius: 5px;
+  background-color: #5970FF;
+}
+
+.rank__rule-title {
+  position: relative;
+  width: 103px;
+  margin: 0 auto 15px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #fff;
+  text-align: center;
+  line-height: 1;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 10px;
+    height: 1px;
+    background-color: #fff;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 0;
+    width: 10px;
+    height: 1px;
+    background-color: #fff;  
+  }
+}
+
+.rank__rule-desc {
+  font-size: 12px;
+  color: #F0F1FF;
+  line-height: 18px;
+}
\ No newline at end of file

src/router/router-config.js

@@ -168,5 +168,10 @@ export default [
     {
         path: '/aist-share',
         component: loadable(() => import(/* webpackChunkName: 'aist-share'*/'@/components/share-page/aist-share'))
-    }
+    },
+    {
+        path: '/blessingRank',
+        component: loadable(() => import(/* webpackChunkName: 'Country' */'@/components/blessingRank/index'))
+    },
+
 ]
\ No newline at end of file

yarn.lock

@@ -6807,21 +6807,11 @@ lodash._reinterpolate@~3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
-lodash.assign@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
-  integrity sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=
-
 lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
   integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
 
-lodash.clonedeep@^4.3.2:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
-  integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
-
 lodash.debounce@^4.0.0:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -6851,11 +6841,6 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
-lodash.mergewith@^4.6.0:
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927"
-  integrity sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==
-
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -7354,11 +7339,16 @@ mux.js@5.1.3:
   resolved "https://registry.yarnpkg.com/mux.js/-/mux.js-5.1.3.tgz#1a59b8979a6780be5bcb63983c7e883c90cd615b"
   integrity sha512-FhDcysLvAkO9H8ftBJ2sK1O4Rmz0AWnMS+2uqP7WjrnaAyE/ox11GEiZkRzrWIdp8at9R9qBHDqdURY3/h/xTg==
 
-nan@^2.10.0, nan@^2.12.1:
+nan@^2.12.1:
   version "2.13.2"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.13.2.tgz#f51dc7ae66ba7d5d55e1e6d4d8092e802c9aefe7"
   integrity sha512-TghvYc72wlMGMVMluVo9WRJc0mB8KxxF/gZ4YYFy7V2ZQX9l7rgbPg7vjS9mt6U5HXODVFVI2bOduCzwOMv/lw==
 
+nan@^2.13.2:
+  version "2.14.0"
+  resolved "https://registry.npm.taobao.org/nan/download/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
+  integrity sha1-eBj3IgJ7JFmobwKV1DTR/CM2xSw=
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -7525,10 +7515,10 @@ node-releases@^1.1.25:
   dependencies:
     semver "^5.3.0"
 
-node-sass@^4.11.0:
-  version "4.11.0"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.11.0.tgz#183faec398e9cbe93ba43362e2768ca988a6369a"
-  integrity sha512-bHUdHTphgQJZaF1LASx0kAviPH7sGlcyNhWade4eVIpFp6tsn7SV8xNMTbsQFpEV9VXpnwTTnNYlfsZXgGgmkA==
+node-sass@^4.13.0:
+  version "4.13.0"
+  resolved "https://registry.npm.taobao.org/node-sass/download/node-sass-4.13.0.tgz?cache=0&sync_timestamp=1571899964908&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnode-sass%2Fdownload%2Fnode-sass-4.13.0.tgz#b647288babdd6a1cb726de4545516b31f90da066"
+  integrity sha1-tkcoi6vdahy3Jt5FRVFrMfkNoGY=
   dependencies:
     async-foreach "^0.1.3"
     chalk "^1.1.1"
@@ -7537,12 +7527,10 @@ node-sass@^4.11.0:
     get-stdin "^4.0.1"
     glob "^7.0.3"
     in-publish "^2.0.0"
-    lodash.assign "^4.2.0"
-    lodash.clonedeep "^4.3.2"
-    lodash.mergewith "^4.6.0"
+    lodash "^4.17.15"
     meow "^3.7.0"
     mkdirp "^0.5.1"
-    nan "^2.10.0"
+    nan "^2.13.2"
     node-gyp "^3.8.0"
     npmlog "^4.0.0"
     request "^2.88.0"