Skip to content

M
mr-julyedu
Commit c43b495b by FE
Options

blessing rank basic complete

parent f70f9049
Showing with 250 additions and 26 deletions
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 0 → 100644
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 0 → 100644
.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"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment