Commit fa9a5608 authored by wildfirecode13's avatar wildfirecode13

111

parent bfe5afd9
'use strict';
import React from 'react';
import { RES_PATH } from '../../../sparkrc.js';
import { observer } from 'mobx-react';
import store from '../../store/index';
import modalStore from '@src/store/modal';
import API from '../../api';
import './rank.less';
@observer
class Rank extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="rank">
<span className="rank_bg"></span>
<span className="rank_tab1"></span>
<span className="rank_tab2"></span>
<span className="rank_tips_rank">排名</span>
<span className="rank_rank">99</span>
<span className="rank_tips_history">历史最高分</span>
<span className="rank_score">25980</span>
<span className="rank_nickname">ID: 用户昵称昵称</span>
<div className="rank_list_item">
<span className="rank_list_item_score">分数: 25899</span>
<span className="rank_list_item_name">ID: 大太阳</span>
<span className="rank_list_item_icon1"></span>
<span className="rank_list_item_line"></span>
</div>
<div className="rank_prizelist">
<span className="rank_prizelist_img_placeholder"></span>
<span className="rank_prizelist_name">第一名</span>
<span className="rank_prizelist_tips">排行榜奖励X月X日开奖</span>
</div>
<span className="rank_title"></span>
<span className="rank_close"></span>
<span className="rank_tips">恭喜你入榜 请领取您的奖品</span>
<span className="rank_drawbtn"></span>
</div>
);
}
}
export default Rank;
@import "../../res.less";
.rank {
width: 659px;
height: 1107px;
left: 46px;
top: 279px;
position: absolute;
.rank_bg {
width: 657px;
height: 957px;
left: 0px;
top: 11px;
position: absolute;
.sparkBg("rank/rank_bg.png");
}
.rank_tab1 {
width: 623px;
height: 622px;
left: 18px;
top: 115px;
position: absolute;
.sparkBg("rank/rank_tab1.png");
}
.rank_tab2 {
width: 617px;
height: 614px;
left: 21px;
top: 115px;
position: absolute;
.sparkBg("rank/rank_tab2.png");
}
.rank_tips_rank {
width: 59px;
height: 25px;
left: 507px;
top: 235px;
position: absolute;
font-size: 26px;
line-height: 25px;
color: rgba(107, 52, 41, 1);
}
.rank_rank {
width: 47px;
height: 27px;
left: 513px;
top: 276px;
position: absolute;
font-size: 33px;
line-height: 27px;
color: rgba(107, 52, 41, 1);
}
.rank_tips_history {
width: 141px;
height: 25px;
left: 316px;
top: 236px;
position: absolute;
font-size: 26px;
line-height: 25px;
color: rgba(107, 52, 41, 1);
}
.rank_score {
width: 107px;
height: 26px;
left: 332px;
top: 275px;
position: absolute;
font-size: 33px;
line-height: 26px;
color: rgba(107, 52, 41, 1);
}
.rank_nickname {
width: 204px;
height: 25px;
left: 70px;
top: 255px;
position: absolute;
font-size: 26px;
line-height: 25px;
color: rgba(107, 52, 41, 1);
}
.rank_list_item {
width: 590px;
height: 68px;
left: 34px;
top: 320px;
position: absolute;
.rank_list_item_score {
width: 163px;
height: 26px;
left: 402px;
top: 28px;
position: absolute;
font-size: 28px;
line-height: 26px;
color: rgba(71, 44, 174, 1);
}
.rank_list_item_name {
width: 132px;
height: 26px;
left: 93px;
top: 28px;
position: absolute;
font-size: 28px;
line-height: 26px;
color: rgba(224, 109, 92, 1);
}
.rank_list_item_icon1 {
width: 50px;
height: 54px;
left: 29px;
top: 14px;
position: absolute;
.sparkBg("rank/rank_list_item_icon1.png");
}
.rank_list_item_line {
width: 590px;
height: 3px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("rank/rank_list_item_line.png");
}
}
.rank_prizelist {
width: 410px;
height: 192px;
left: 63px;
top: 743px;
position: absolute;
.rank_prizelist_img_placeholder {
width: 120px;
height: 119px;
left: 0px;
top: 39px;
position: absolute;
.sparkBg("rank/rank_prizelist_img_placeholder.png");
}
.rank_prizelist_name {
width: 89px;
height: 26px;
left: 21px;
top: 166px;
position: absolute;
font-size: 28px;
line-height: 26px;
color: rgba(255, 255, 255, 1);
}
.rank_prizelist_tips {
width: 296px;
height: 27px;
left: 124px;
top: 0px;
position: absolute;
font-size: 28px;
line-height: 27px;
color: rgba(255, 252, 165, 1);
}
}
.rank_title {
width: 177px;
height: 60px;
left: 241px;
top: 45px;
position: absolute;
.sparkBg("rank/rank_title.png");
}
.rank_close {
width: 82px;
height: 82px;
left: 577px;
top: 0px;
position: absolute;
.sparkBg("rank/rank_close.png");
}
.rank_tips {
width: 275px;
height: 21px;
left: 197px;
top: 980px;
position: absolute;
font-size: 22px;
line-height: 21px;
color: rgba(255, 255, 255, 1);
}
.rank_drawbtn {
width: 389px;
height: 95px;
left: 134px;
top: 1012px;
position: absolute;
.sparkBg("rank/rank_drawbtn.png");
}
}
import React, { Component } from "react"; import React, { Component } from "react";
import Rank from "../components/rank/rank";
import Prize from "../components/prize/prize"; import Prize from "../components/prize/prize";
import Noprize from "../components/noprize/noprize"; import Noprize from "../components/noprize/noprize";
import Noprize_history from "../components/noprize_history/noprize_history"; import Noprize_history from "../components/noprize_history/noprize_history";
...@@ -13,7 +14,8 @@ export const cfg = { ...@@ -13,7 +14,8 @@ export const cfg = {
Alert: Alert, Alert: Alert,
Noprize_history: Noprize_history, Noprize_history: Noprize_history,
Noprize: Noprize, Noprize: Noprize,
Prize: Prize Prize: Prize,
Rank: Rank
}; };
@observer @observer
......
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