Skip to content

M
mr-julyedu
Commit 7ef773ec by wangshuo
Options

AI水平测试

parent c037c8c5
Showing with 413 additions and 2 deletions
src/components/blessingPreheat/index.js
......@@ -3,6 +3,8 @@ import RulePopup from './rulePopup/index'
import CoursePopup from './coursePopup/index'
import CourseList from './courseList/index';
import ListHeader from './listHeader/index';
import LevelTest from './levelTest/index';
import RankList from './rankList/index';
import './index.scss'
import { Popup } from '@/common'
import {CopyToClipboard} from 'react-copy-to-clipboard'
......@@ -17,7 +19,8 @@ class BlessingPreheat extends Component {
isCourse: false,
inviteVisible: false,
joinLotteryVisible: false,
timelineShareVisible: false
timelineShareVisible: false,
showRecordList: false,
}
}
......@@ -33,6 +36,12 @@ class BlessingPreheat extends Component {
Toast.info('复制成功', 2,null,false)
}
showRecordList = () => {
this.setState({
showRecordList: true,
});
}
render() {
const {isRule, isCourse, inviteVisible} = this.state
return (
......@@ -81,6 +90,19 @@ class BlessingPreheat extends Component {
>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt="" className="qr-code"/>
</Popup>
<ListHeader text="全国AI工程师水平测试" styles={{margin: '0 0 15px'}} />
<div className="test__record" onClick={this.showRecordList}>
测试记录>
</div>
<LevelTest></LevelTest>
<ListHeader text="测试排行榜" styles={{margin: '20px 0 10px'}} size='middle' />
<div className="sort__rules">
仅显示前10名
</div>
<RankList></RankList>
</div>
)
}
......
src/components/blessingPreheat/index.scss
#blessing-preheat {
background: #5327FA;
.invite-popup {
.content {
display: flex;
......@@ -98,4 +99,25 @@
}
}
}
.test__record {
width: 106px;
height: 26px;
border:1px solid rgba(255,246,4,1);
border-radius:13px;
font-size:14px;
font-weight:400;
color:rgba(255,246,4,1);
margin: 10px auto 14px;
display: flex;
justify-content: center;
align-items: center;
}
.sort__rules {
font-size:12px;
font-weight:400;
color:rgba(255,255,255,1);
text-align: center;
text-align-last: center;
}
}
src/components/blessingPreheat/levelTest/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
import listFrame from './../listFrame/index';
import {getParam, http, browser, wxShare} from "@/utils"
class LevelTest extends Component {
constructor(props) {
super(props);
this.state = {
testNumber: 12345,
number: 1,
prizeListUrl: [
{
url:
"https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/AIExam/top1.png"
},
{
url:
"https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/AIExam/top2.png"
},
{
url:
"https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/AIExam/top3-4.png"
},
{
url:
"https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/AIExam/top5-7.png"
},
{
url:
"https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/AIExam/top8-10.png"
}
],
}
}
componentDidMount() {
http.get(`${API.home}/sys/ai_test/get_user_testinfo`).then(res => {
let {code, data: {user_test_total, user_residue_number}} = res.data;
if(code === 200) {
this.setState({
testNumber: user_test_total,
number: user_residue_number
})
}
});
}
startTest = () => {
console.log('startTest');
}
render() {
let {
testNumber,
number,
prizeListUrl,
} = this.state;
return (
<div className="level__test_module">
<div className='start__test' onClick={this.startTest}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/test_icon.png" />
<div className="button__text">
<p>点击测试</p>
<span>（剩余{number}次）</span>
</div>
</div>
<div className='test__number'>
已有
<span className='number'>
{testNumber}
</span>
人参加测试
</div>
<div className='prize__rules'>
<div className="prize__title">— 活动奖品 —</div>
<div className="prize__list">
{
prizeListUrl.map((item, index) => {
return (
<div className='prize__container' key={index}>
<img src={item.url} />
</div>
)
})
}
</div>
<div className="prize__title">— 活动规则 —</div>
<div className="rules__text">
<p>1. 11月5日至11月13日之间每人有一次测试机会，可通过“集福气”活动额外获得2次测试机会；</p>
<p>2. 单次测试时间为一小时，超时自动提交试卷；</p>
<p>3. 试卷内容为Python基础（8道题*3分）、机器学习（12道题*3分）、深度学习（10道题*4分），总分100分；</p>
<p>4. 无固定试卷，参与测试时从试题库中随机抽题组卷；</p>
<p>5. 排行榜实时更新，分数相同则用时短者排名更高，多次测试保留最高分；</p>
<p>6. 如发现某账号有作弊嫌疑，七月在线有权清空账号测试成绩；</p>
<p>7. 活动最终解释权归七月在线所有。</p>
</div>
</div>
</div>
)
}
}
export default listFrame(LevelTest)
src/components/blessingPreheat/levelTest/index.scss 0 → 100644
.level__test_module {
width: 100%;
// height:580px;
padding-bottom: 20px;
.start__test {
width:174px;
height:33px;
background:linear-gradient(-90deg,rgba(255,140,27,1) 0%,rgba(255,59,5,1) 100%);
border-radius:17px;
margin: 20px auto 8px;
display: flex;
justify-content: center;
align-items: center;
font-size:14px;
font-weight:500;
color:rgba(255,255,255,1);
.button__text {
font-size:14px;
font-weight:500;
color:rgba(255,255,255,1);
display: flex;
flex-direction: row;
justify-content: center;
align-items: baseline;
margin-left: 5px;
span {
font-size:12px;
}
}
}
.test__number {
font-size:12px;
font-weight:400;
color:rgba(255,255,255,1);
margin: 0 auto;
display: flex;
justify-content: center;
align-items: baseline;
.number {
font-size: 16px;
margin: 0 5px;
}
}
.prize__rules {
width:335px;
// height:461px;
background:rgba(89,112,255,1);
border-radius:5px;
margin: 16px auto;
padding: 15px 10px;
.prize__title {
font-size:14px;
font-weight:400;
color:rgba(255,255,255,1);
text-align: center;
text-align-last: center;
margin-bottom: 10px;
}
.prize__list {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
margin-bottom: 16px;
.prize__container {
width: 100px;
height: 100px;
margin: 0 6px 8px 0;
&:nth-child(3n) {
margin: 0 0 8px 0;
}
}
}
.rules__text {
font-size:12px;
font-weight:400;
color:rgba(240,241,255,1);
line-height:17px;
}
}
}
\ No newline at end of file
src/components/blessingPreheat/listFrame/index.js
......@@ -9,7 +9,6 @@ function ListFrame(WrappedComponent) {
<div className="list-frame">
<div className="list-frame__content">
<WrappedComponent />
33333
</div>
</div>
)
......
src/components/blessingPreheat/rankList/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
import {getParam, http, browser, wxShare} from "@/utils"
export default class RankList extends Component {
constructor(props) {
super(props);
this.state = {
rankList: []
}
}
componentDidMount() {
http.get(`${API.home}/sys/ai_test/ranking/10`).then(res => {
console.log(res);
let data = res.data.data;
let code = res.data.code;
if(code === 200) {
this.setState({
rankList: data.rankings
})
}
});
}
render() {
let {rankList} = this.state;
return (
<div className="rank__list_module">
<div className="rank__table_head">
<div className="table_head table_head__sort">排名</div>
<div className="table_head table_head__user_info">用户</div>
<div className="table_head table_head__time">用时</div>
<div className="table_head table_head__score">成绩</div>
<div className="table_head table_head__prize">奖品</div>
</div>
<div className="rank__table_body">
{
rankList.map((item, index)=>{
return (
<div className="table__tr" key={index}>
<div className='table__body table_head__sort'>
{
index > 2 ? (index + 1) : (
null
)
}
</div>
<div className='table__body table_head__user_info'>
<img className="user__avatar" src={item.avatar} />
<span className="user__name">{item.user_name}</span>
</div>
<div className='table__body table_head__time'>{item.cost_time}</div>
<div className='table__body table_head__score'>{item.score}</div>
<div className='table__body table_head__prize'>{item.prize}</div>
</div>
)
})
}
</div>
</div>
)
}
}
src/components/blessingPreheat/rankList/index.scss 0 → 100644
.rank__list_module {
width:366px;
height:523px;
background:rgba(71,28,230,1);
border-radius:6px;
margin: 16px auto 0;
.rank__table_head {
width: 100%;
height:38px;
background:rgba(89,112,255,1);
border-radius:5px 5px 0px 0px;
display: flex;
justify-content: center;
align-items: center;
.table_head {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 14px;
font-weight: 400;
}
}
.rank__table_body {
.table__tr {
height: 48px;
display: flex;
justify-content: center;
align-items: center;
&:nth-child(1) {
.table_head__sort {
background: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/gold.png') 50% 50% no-repeat;
background-size: 14px 18px;
}
}
&:nth-child(2) {
.table_head__sort {
background: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/silver.png') 50% 50% no-repeat;
background-size: 14px 18px;
}
}
&:nth-child(3) {
.table_head__sort {
background: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/copper.png') 50% 50% no-repeat;
background-size: 14px 18px;
}
}
&:nth-child(2n) {
background:#3900C9;
}
.table__body {
font-size:12px;
font-weight:400;
color:rgba(255,255,254,1);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.table_head__user_info {
.user__avatar {
width: 18px;
height: 18px;
border-radius: 50%;
margin-right: 6px;
}
.user__name {
width: 86px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.table_head__prize {
display: inline-block;
line-height: 48px;
text-align: start;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.table_head__sort {
width: 50px;
}
.table_head__user_info {
width: 110px;
}
.table_head__time {
width: 58px;
}
.table_head__score {
width: 58px;
}
.table_head__prize {
width: 90px;
}
}
\ No newline at end of file
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