Skip to content

D
db-game-template
Commit a8cd9c81 authored by 李硕's avatar 李硕
Browse files
Options

弹窗添加

parent 0377fb32
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 481 additions and 187 deletions
src/components/comawardp/comawardp.jsx
View file @ a8cd9c81
......@@ -11,14 +11,25 @@ class Comawardp extends Component {
this.state = this.state || { resList: resList };
}
render() {
const { onClose, rankPrizeInfo } = this.props;
console.log('rankPrizeInfo=', rankPrizeInfo);
/*
prizeName: "中的奖品"
prizePic: "http://yun.duiba.com.cn/spark/assets/273d0395e7c858d2fdae770fd3716401e431146d.png"
prizeUrl: "www.baidu.com"
rank: 25
show: true
*/
return (
<div className="awardp">
<img className="rankPrizeBg" />
<img className="awardbg" src={this.state.resList['ded7851e-6b2e-4fa9-8790-238a0779979e'].url} />
<label className="prizena">奖品名称奖品名称</label>
<label className="lastmon">上月排名第X名</label>
<img className="awardim" src={this.state.resList['32106cbd-7920-4c6a-8669-83acbedbbed8'].url} />
<img className="awardcl" src={this.state.resList['c9098829-9dc3-4561-887d-e2a9b3a60e43'].url} />
<img className="receive" src={this.state.resList['f67866ee-5b8b-4cbd-bab5-7847e8cfff27'].url} />
<label className="prizena">{rankPrizeInfo.prizeName}</label>
<label className="lastmon">上月排名第{rankPrizeInfo.rank}名</label>
{/* <img className="awardim" src={this.state.resList['32106cbd-7920-4c6a-8669-83acbedbbed8'].url} /> */}
<img className="awardim" src={rankPrizeInfo.prizePic} />
<img className="awardcl" onClick={onClose} src={this.state.resList['c9098829-9dc3-4561-887d-e2a9b3a60e43'].url} />
<img className="receive" src={this.state.resList['f67866ee-5b8b-4cbd-bab5-7847e8cfff27'].url} />
</div>
);
}
......
src/components/comawardp/comawardp.less
View file @ a8cd9c81
......@@ -5,6 +5,7 @@
height: 1624px;
display: block;
position: absolute;
.awardbg {
width: 750px;
height: 841px;
......@@ -12,19 +13,31 @@
position: absolute;
transform-origin: 0px 0px 0px;
}
.rankPrizeBg {
width: 750px;
height: 2000px;
top: -376px;
position: absolute;
opacity: 0.8;
background-color: black;
}
.prizena {
width: 219px;
width: 240px;
height: 26px;
opacity: 1;
left: 266px;
top: 655px;
position: absolute;
text-align: center;
transform-origin: 0px 0px 0px;
font-size: 28px;
color: rgba(0, 66, 24, 1);
}
.lastmon {
width: 212px;
width: 230px;
height: 34px;
opacity: 1;
left: 269px;
......@@ -32,8 +45,10 @@
position: absolute;
transform-origin: 0px 0px 0px;
font-size: 32px;
text-align: center;
color: rgba(0, 66, 24, 1);
}
.awardim {
width: 502px;
height: 242px;
......@@ -43,6 +58,7 @@
position: absolute;
transform-origin: 0px 0px 0px;
}
.awardcl {
width: 62px;
height: 62px;
......@@ -52,6 +68,7 @@
position: absolute;
transform-origin: 0px 0px 0px;
}
.receive {
width: 463px;
height: 132px;
......@@ -61,4 +78,4 @@
position: absolute;
transform-origin: 0px 0px 0px;
}
}
}
\ No newline at end of file
src/components/comexp/comexp.jsx
View file @ a8cd9c81
......@@ -11,13 +11,17 @@ class Comexp extends Component {
this.state = this.state || { resList: resList };
}
render() {
let { goodsInfo, onClose } = this.props;
console.log('goodsInfo===', goodsInfo);
return (
<div className="exp">
<img className="exchangeBg" />
<img className="exbg" src={this.state.resList['19a2b473-acbc-4659-b47f-c7ba0d3fc5b3'].url} />
<label className="energyn">99能量</label>
<label className="goodsna">商品名称商品名称商品名称</label>
<img className="rewardi" src={this.state.resList['8ac8af1c-b8d3-4a2e-96b2-07e7269adebc'].url} />
<img className="exclose" src={this.state.resList['665b8867-e35c-485e-a01c-6a2d94023436'].url} />
<label className="energyn">{goodsInfo.needCount}能量</label>
<label className="goodsna">{goodsInfo.prizeName}</label>
<img className="rewardi" src={goodsInfo.prizePic} />
<img className="exclose" onClick={onClose} src={this.state.resList['665b8867-e35c-485e-a01c-6a2d94023436'].url} />
<img className="exbtn" src={this.state.resList['a2fa486a-50ab-444d-9acd-3e15dbbe9d7c'].url} />
</div>
);
......
src/components/comexp/comexp.less
View file @ a8cd9c81
......@@ -4,7 +4,8 @@
width: 750px;
height: 1624px;
display: block;
position: absolute;
position: fixed;
.exbg {
width: 750px;
height: 841px;
......@@ -12,28 +13,43 @@
position: absolute;
transform-origin: 0px 0px 0px;
}
.exchangeBg {
width: 750px;
height: 2000px;
top: -444px;
position: absolute;
opacity: 0.8;
background-color: black;
}
.energyn {
width: 86px;
width: 160px;
height: 26px;
opacity: 1;
left: 331px;
left: 300px;
top: 655px;
position: absolute;
text-align: center;
transform-origin: 0px 0px 0px;
font-size: 28px;
color: rgba(0, 66, 24, 1);
}
.goodsna {
width: 375px;
height: 30px;
opacity: 1;
left: 189px;
top: 336px;
text-align: center;
position: absolute;
transform-origin: 0px 0px 0px;
font-size: 32px;
color: rgba(0, 66, 24, 1);
}
.rewardi {
width: 502px;
height: 242px;
......@@ -43,6 +59,7 @@
position: absolute;
transform-origin: 0px 0px 0px;
}
.exclose {
width: 62px;
height: 62px;
......@@ -52,6 +69,7 @@
position: absolute;
transform-origin: 0px 0px 0px;
}
.exbtn {
width: 463px;
height: 132px;
......@@ -61,4 +79,4 @@
position: absolute;
transform-origin: 0px 0px 0px;
}
}
}
\ No newline at end of file
src/components/cominvitep/cominvitep.jsx
View file @ a8cd9c81
......@@ -11,8 +11,18 @@ class Cominvitep extends Component {
this.state = this.state || { resList: resList };
}
render() {
const { inviteRecordList, onClose } = this.props;
console.log('inviteRecordList=', inviteRecordList);
/*
userName string
userId number
avatar string
bonus number
inviteTime
*/
return (
<div className="invitep">
<img className="inviteBg" />
<img className="bj" src={this.state.resList['d90703c1-655e-4b42-9122-d8931c30d591'].url} />
<img className="inviteh" src={this.state.resList['923fc6ea-34bb-4344-9918-45aa79a455b1'].url} />
<div className="items">
......@@ -20,8 +30,25 @@ class Cominvitep extends Component {
<label className="user">用户</label>
<label className="invitet">邀请时间</label>
<label className="reward">获得奖励</label>
<div className="inviteList">
{/* className={index % 2 == 1 ? 'inviteSlot1' : 'inviteSlot2'} */}
{inviteRecordList.map((item, index) => <p key={index} className={index % 2 == 1 ? 'inviteSlot1' : 'inviteSlot2'} >
<label className="inviteName" >{item.userName}</label>
<label className="inviteTime">{item.inviteTime}</label>
<label className="inviteBonus">{item.bonus}</label>
</p>
)}
</div>
</div>
<img className="invitec" src={this.state.resList['c9098829-9dc3-4561-887d-e2a9b3a60e43'].url} />
{/* {arr.map((item, index) => <p key={index} className={index == 0 ? 'rankSlot0' : (index % 2 == 1 ? 'rankSlot1' : 'rankSlot2')}>
{<label className="rankItems">{item.index}</label>}
<label className="rankItems2">{item.nickname}</label>
<label className="rankItems3">{item.score}</label>
</p>)} */}
<img className="invitec" onClick={onClose} src={this.state.resList['c9098829-9dc3-4561-887d-e2a9b3a60e43'].url} />
</div>
);
}
......
src/components/cominvitep/cominvitep.less
View file @ a8cd9c81
.invitep {
top: 677px;
bottom: -680px;
left: 0px;
width: 750px;
height: 1624px;
display: block;
position: absolute;
position: fixed;
.bj {
width: 750px;
height: 947px;
......@@ -12,6 +14,17 @@
position: absolute;
transform-origin: 0px 0px 0px;
}
.inviteBg {
width: 750px;
height: 2000px;
top: -444px;
position: absolute;
opacity: 0.8;
background-color: black;
}
.inviteh {
width: 690px;
height: 60px;
......@@ -21,6 +34,81 @@
position: absolute;
transform-origin: 0px 0px 0px;
}
/************VVVVVV**********/
.inviteList {
width: 692px;
max-height: 536px;
opacity: 1;
background-color: gray;
position: absolute;
top: 40px;
overflow: scroll;
.inviteSlot1 {
width: 692px;
height: 70px;
opacity: 1;
margin-top: 0px;
margin-left: 0px;
display: flex;
// position: absolute;
background-color: #f3f3f3;
}
.inviteSlot2 {
width: 692px;
height: 70px;
opacity: 1;
margin-top: 0px;
margin-left: 0px;
display: flex;
background-color:#ffffff;
}
// .rankSlot2 {
// width: 692px;
// height: 70px;
// opacity: 1;
// margin-top: 0px;
// margin-left: 0px;
// display: flex;
// background-color:;
// }
.inviteName {
width: 500px;
height: 30px;
opacity: 1;
margin-top: 18px;
margin-left: 0px;
text-align: center;
overflow: hidden;
}
.inviteTime {
width: 500px;
height: 30px;
opacity: 1;
margin-top: 18px;
margin-left: 0px;
margin-left: 0px;
text-align: center;
// position: absolute;
}
.inviteBonus {
width: 400px;
height: 30px;
opacity: 1;
margin-top: 18px;
text-align: center;
// position: absolute;
}
}
//*************************
.items {
width: 692px;
height: 575px;
......@@ -29,6 +117,7 @@
top: 310px;
position: absolute;
transform-origin: 0px 0px 0px;
.inviteb {
width: 692px;
height: 534px;
......@@ -37,8 +126,9 @@
position: absolute;
transform-origin: 0px 0px 0px;
}
.user {
width: 47px;
width: 100px;
height: 24px;
opacity: 1;
left: 92px;
......@@ -47,8 +137,9 @@
font-size: 26px;
color: rgba(255, 251, 189, 1);
}
.invitet {
width: 100px;
width: 120px;
height: 24px;
opacity: 1;
left: 309px;
......@@ -57,8 +148,9 @@
font-size: 26px;
color: rgba(255, 251, 189, 1);
}
.reward {
width: 100px;
width: 110px;
height: 24px;
opacity: 1;
left: 541px;
......@@ -68,6 +160,7 @@
color: rgba(255, 251, 189, 1);
}
}
.invitec {
width: 62px;
height: 62px;
......@@ -77,4 +170,4 @@
position: absolute;
transform-origin: 0px 0px 0px;
}
}
}
\ No newline at end of file
src/components/comrankp/comrankp.jsx
View file @ a8cd9c81
......@@ -34,29 +34,6 @@ class Comrankp extends Component {
}
showItem(list) {
const sidebar = (
<ul>
{list.map((item) =>
<li key={item.index}>
<p>{item.nickname}</p>
</li>
)}
</ul>
);
const content = list.map((item) =>
<div key={item.index}>
<p>{item.nickname}</p>
<p>{item.score}</p>
</div>
);
return (
<div>
{sidebar}
{content}
</div>
);
}
render() {
let { rankList, onClose, myRankData } = this.props;
......@@ -74,10 +51,10 @@ class Comrankp extends Component {
<label className="steps">步数</label>
<div className="rankLists" >
<img className="start" src={resList['9808ca60-2683-4708-8faa-9b1f5de40f4d'].url} />
{arr.map((item, index) => <p key={index} className={index==0? 'rankSlot0':(index%2==1?'rankSlot1' :'rankSlot2')}>
{<label className="rankItems">{item.index}</label>}
<label className="rankItems">{item.nickname}</label>
<label className="rankItems">{item.score}</label>
{arr.map((item, index) => <p key={index} className={index == 0 ? 'rankSlot0' : (index % 2 == 1 ? 'rankSlot1' : 'rankSlot2')}>
<label className="rankItems">{item.index}</label>
<label className="rankItems2">{item.nickname}</label>
<label className="rankItems3">{item.score}</label>
</p>)}
{rankList.length >= 1 && <img className="first" src={resList['94f9079b-951a-4d41-89ee-f59e8dee36df'].url} />}
{rankList.length >= 2 && <img className="second" src={resList['fcc55c60-6d9f-4524-8028-b7a37aefe152'].url} />}
......
src/components/comrankp/comrankp.less
View file @ a8cd9c81
......@@ -4,7 +4,7 @@
width: 750px;
height: 1624px;
display: block;
position: absolute;
position: fixed;
.rankBg {
width: 750px;
......@@ -51,7 +51,7 @@
position: absolute;
top: 40px;
overflow: scroll;
.rankSlot0 {
width: 692px;
height: 70px;
......@@ -70,7 +70,6 @@
margin-top: 0px;
margin-left: 0px;
display: flex;
// position: absolute;
background-color: #f3f3f3;
}
......@@ -81,20 +80,40 @@
margin-top: 0px;
margin-left: 0px;
display: flex;
// position: absolute;
background-color: #ffffff;
}
.rankItems {
width: 692px;
width: 100px;
height: 30px;
opacity: 1;
margin-top: 18px;
margin-left: 70px;
margin-left: 76px;
display: flex;
text-align: center;
// position: absolute;
}
.rankItems2 {
width: 800px;
height: 30px;
opacity: 1;
margin-top: 18px;
margin-left: 68px;
text-align: center;
overflow: hidden;
}
.rankItems3 {
width: 580px;
height: 30px;
opacity: 1;
margin-top: 18px;
margin-left: 20px;
text-align: center;
overflow: hidden;
}
.start {
width: 23px;
height: 22px;
......
src/components/comrulep/comrulep.less
View file @ a8cd9c81
......@@ -4,7 +4,7 @@
width: 750px;
height: 1624px;
display: block;
position: absolute;
position: fixed;
opacity: 1;
.bgModal {
......
src/pages/pagemainscene/pagemainscene.jsx
View file @ a8cd9c81
This diff is collapsed.
src/pages/pagemainscene/pagemainscene.less
View file @ a8cd9c81
......@@ -60,7 +60,8 @@
transform-origin: 0px 0px 0px;
}
.usermesicon {//写了圆形不知道能不能用
.usermesicon {
//写了圆形不知道能不能用
width: 102px;
height: 102px;
border-radius: 51px;
......@@ -385,12 +386,14 @@
top: 656px;
position: absolute;
transform-origin: 0px 0px 0px;
.tasks{
.tasks {
top: 130px;
left: 50%;
transform: translateX(-50%);
position: absolute;
}
.taskbg {
width: 742px;
height: 478px;
......@@ -409,9 +412,9 @@
position: absolute;
transform-origin: 0px 0px 0px;
}
.taskprize2 {
......@@ -484,9 +487,11 @@
margin: 15px auto;
position: relative;
transform-origin: 0px 0px 0px;
.float{
.float {
float: left;
}
.taskprize3img {
margin-top: 20px;
margin-left: 30px;
......@@ -496,6 +501,7 @@
position: absolute;
transform-origin: 0px 0px 0px;
}
.taskprize3num {
margin-top: 25px;
margin-left: 70px;
......@@ -699,7 +705,7 @@
position: relative;
transform-origin: 0px 0px 0px;
// margin: 50px auto;
justify-content:center;
justify-content: center;
.invitepeoitembg {
width: 78px;
......@@ -817,20 +823,27 @@
}
.exchangelist {
width: 309px;
height: 388px;
width: 680px;
height: 700px;
opacity: 1;
left: 52px;
top: 161px;
position: absolute;
transform-origin: 0px 0px 0px;
overflow: scroll;
.exchangelistitem {
width: 309px;
height: 388px;
opacity: 1;
position: absolute;
position: relative;
transform-origin: 0px 0px 0px;
display: inline-block;
margin-top: 20px;
&:nth-child(2n){
margin-left: 20px;
// background: red;
}
.exchangelistitemimg {
width: 309px;
......@@ -863,7 +876,7 @@
}
.exchangelistitemprize {
width: 95px;
width: 150px;
height: 26px;
opacity: 1;
left: 14px;
......@@ -875,7 +888,7 @@
}
.exchangelistitemold {
width: 107px;
width: 120px;
height: 23px;
opacity: 0.8;
left: 116px;
......
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