Skip to content

R
RB_StrongestBrain_250520
Commit 68bebf7c authored by cc's avatar cc
Browse files
Options

update

parent b2d42324
Hide whitespace changes
Inline Side-by-side
Showing with 278 additions and 0 deletions
src/pages/HomePage/HomePage.tsx
View file @ 68bebf7c
......@@ -6,6 +6,7 @@ import store from "@/store/store.ts";
import { Button } from "@grace/ui";
import MyPrize from '../MyPrize/MyPrize';
import Rule from '../RulePage/RulePage';
import Rank from '../RankPage/RankPage';
import { PageCtrl } from '@/core/ctrls/PageCtrl';
import { SvgaPlayer } from "@grace/svgaplayer";
......@@ -20,6 +21,8 @@ class HomePage extends React.Component<any, any> {
async componentDidMount () {
await store.doAssist();
store.updateIndex();
PageCtrl.changePage(Rank);
}
clickPrize = () => {
......
src/pages/RankPage/RankPage.less 0 → 100644
View file @ 68bebf7c
@import "../../res.less";
.rankPage {
width: 750px;
height: 100vh;
left: 0px;
top: 0px;
position: absolute;
overflow:hidden;
.bg {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("rank/bg.jpg");
}
.title {
width: 204px;
height: 67px;
left: calc(50% - 204px/2);
top: 147px;
position: absolute;
.sparkBg("rank/title.png");
}
.prizeList{
width:680px;
height: 275px;
position: absolute;
top:374px;
left: 43px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
.prizeItem{
width:176px;
height: 260px;
display: inline-block;
.sparkBg("rank/itembg4.png");
margin-right: 10px;
position: relative;
&:nth-child(1){
.sparkBg("rank/itembg1.png");
}
&:nth-child(2){
.sparkBg("rank/itembg2.png");
}
&:nth-child(3){
.sparkBg("rank/itembg3.png");
}
.prizeImg{
width:150px;
height: 150px;
position: absolute;
left:calc(50% - 150px/2);
top:10px;
img{
width:100%;
height: 100%;
border-radius: 10px;
background-color: #fff;
}
}
.prizeName{
width: 166px;
position: absolute;
top:165px;
left:5px;
text-align: center;
font-size: 24px;
color: #a16834;
.lineClamp1();
}
.rank{
width: 166px;
position: absolute;
top:200px;
left:5px;
text-align: center;
font-size: 30px;
color: #a16834;
.lineClamp1();
font-weight: 500;
font-style: italic;
}
}
}
.rankTitle{
width:610px;
display: flex;
position: absolute;
left:calc(50% - 610px/2);
top:700px;
div{
flex:1;
text-align: center;
font-size: 23px;
color: #e4a43b;
&:nth-child(1){
flex:0.5;
}
&:nth-child(2){
flex:1.5;
}
}
}
.myRankInfo{
width:610px;
display: flex;
height: 94px;
position: absolute;
left:calc(50% - 610px/2);
top:725px;
border-bottom:1px solid #f1ebe5;
div{
flex:1;
height: 94px;
line-height: 94px;
text-align: center;
font-size: 23px;
color: #333334;
font-weight: 500;
&:nth-child(1){
flex:0.5;
font-size: 29px;
font-weight: 700;
}
&:nth-child(2){
flex:1.5;
}
}
}
.rankList{
width:610px;
height: calc(100vh - 820px);
overflow-y: auto;
overflow-x: hidden;
position: absolute;
left:calc(50% - 610px/2);
top:815px;
.rankItem{
width:610px;
display: flex;
height: 94px;
border-bottom:1px solid #f1ebe5;
div{
flex:1;
height: 94px;
line-height: 94px;
text-align: center;
font-size: 23px;
color: #333334;
font-weight: 500;
position: relative;
&:nth-child(1){
flex:0.5;
}
&:nth-child(2){
flex:1.5;
}
}
&:nth-child(1){
div{
span{
width:43px;
height: 37px;
position: absolute;
top:calc(50% - 37px/2);
left:calc(50% - 43px/2);
.sparkBg("rank/no1.png");
}
}
}
&:nth-child(2){
div{
span{
width:43px;
height: 37px;
position: absolute;
top:calc(50% - 37px/2);
left:calc(50% - 43px/2);
.sparkBg("rank/no2.png");
}
}
}
&:nth-child(3){
div{
span{
width:43px;
height: 37px;
position: absolute;
top:calc(50% - 37px/2);
left:calc(50% - 43px/2);
.sparkBg("rank/no3.png");
}
}
}
}
}
.back {
left: 32px;
top: 151px;
width: 59px;
height: 57px;
position: absolute;
.webpBg("rank/back.png");
}
}
\ No newline at end of file
src/pages/RankPage/RankPage.tsx 0 → 100644
View file @ 68bebf7c
import React from 'react';
import { observer } from 'mobx-react';
import './RankPage.less';
import API from "@/api";
import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
import store from "@/store/store.ts";
import HomePage from '../HomePage/HomePage';
@observer
class RankPage extends React.Component<any, any> {
clickBack = () => {
PageCtrl.changePage(HomePage);
}
render() {
return <div className="rankPage">
<div className="bg"></div>
<div className="title"></div>
<div className="prizeList">
<div className="prizeItem">
<div className="prizeImg">
<img src="" alt="" />
</div>
<div className="prizeName">奖品奖品奖品奖品奖品</div>
<div className="rank">第1名</div>
</div>
</div>
<div className="rankTitle">
<div className="title1">排名</div>
<div className="title2">用户昵称</div>
<div className="title3">成功组局数/月</div>
</div>
<div className="myRankInfo">
<div className="title1">999+</div>
<div className="title2">用户昵称(我)</div>
<div className="title3">20</div>
</div>
<div className="rankList">
<div className="rankItem">
<div className="rank"><span></span></div>
<div className="name">11</div>
<div className="score">11</div>
</div>
<div className="rankItem">
<div className="rank"><span></span></div>
<div className="name">11</div>
<div className="score">11</div>
</div>
<div className="rankItem">
<div className="rank"><span></span></div>
<div className="name">11</div>
<div className="score">11</div>
</div>
<div className="rankItem">
<div className="rank">1</div>
<div className="name">11</div>
<div className="score">11</div>
</div>
</div>
<span className="back" onClick={this.clickBack}></span>
</div>;
}
}
export default RankPage;
\ 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