Commit a7e61245 authored by wildfirecode13's avatar wildfirecode13

1

parent e91a5c53
'use strict';
import React, { Component } from 'react';
import resList from '../../resconfig/resList';
import './comlevelup.less';
class Comlevelup extends Component {
constructor(props) {
super(props);
this.state = { resList: resList };
}
render() {
return (
<div className="levelup ">
<img className="levelup_light " src={this.state.resList['a158cbff-9dcd-49df-bb91-16213d58036e'].url} />
<img className="levelup_bg " src={this.state.resList['b027d194-0fad-45ea-8b1c-3502f7869d2d'].url} />
<img className="levelup_closebtn " src={this.state.resList['d33bbf87-ed39-4959-8673-02a4c31dca77'].url} />
<img className="levelup_bg2 " src={this.state.resList['f88dfc75-c9f1-4e9d-8826-8a1d0e513259'].url} />
<span className="levelup_txt ">精力上限1200 → 精力上限1500</span>
<img className="levelup_title " src={this.state.resList['69bff61a-b5a6-4979-ba8d-9e008aed737a'].url} />
<img className="levelup_imgbg " src={this.state.resList['f56872e2-5e79-4906-99a2-576231f153af'].url} />
<img className="levelup_btn " src={this.state.resList['95520b55-9655-4988-a833-3907978dbffb'].url} />
</div>
);
}
}
export default Comlevelup;
.levelup {
width: 750px;
height: 1093px;
opacity: 1;
top: 221px;
position: absolute;
transform-origin: 0px 0px 0px;
.levelup_light {
width: 750px;
height: 1093px;
opacity: 1;
position: absolute;
transform-origin: 0px 0px 0px;
}
.levelup_bg {
width: 584px;
height: 715px;
opacity: 1;
left: 85px;
top: 200px;
position: absolute;
transform-origin: 0px 0px 0px;
}
.levelup_closebtn {
width: 45px;
height: 45px;
opacity: 1;
left: 584px;
top: 236px;
position: absolute;
transform-origin: 0px 0px 0px;
}
.levelup_bg2 {
width: 651px;
height: 784px;
opacity: 1;
left: 52px;
top: 182px;
position: absolute;
transform-origin: 0px 0px 0px;
}
.levelup_txt {
width: 371px;
height: 26px;
opacity: 1;
left: 191px;
top: 711px;
position: absolute;
transform-origin: 0px 0px 0px;
font-size: 26px;
color: rgba(87, 71, 56, 1);
}
.levelup_title {
width: 206px;
height: 35px;
opacity: 1;
left: 274px;
top: 314px;
position: absolute;
transform-origin: 0px 0px 0px;
}
.levelup_imgbg {
width: 360px;
height: 299px;
opacity: 1;
left: 197px;
top: 377px;
position: absolute;
transform-origin: 0px 0px 0px;
}
.levelup_btn {
width: 351px;
height: 105px;
opacity: 1;
left: 201px;
top: 773px;
position: absolute;
transform-origin: 0px 0px 0px;
}
}
{ {
"pages": [ "pages": [
"pages/pagecanvas/pagecanvas", "pages/pagecanvas/pagecanvas",
"pages/index/index",
"pages/pageshop/pageshop", "pages/pageshop/pageshop",
"pages/index/index",
"pages/myprize/myprize" "pages/myprize/myprize"
], ],
"window": { "window": {
......
.levelup-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
}
.levelup__shade {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.levelup { .levelup {
width: 1116rpx; position: absolute;
width: 750rpx;
height: 1093rpx; height: 1093rpx;
opacity: 1; opacity: 1;
left: -183rpx;
top: 221rpx;
position: absolute;
transform-origin: 0rpx 0rpx 0rpx; transform-origin: 0rpx 0rpx 0rpx;
top:50%;
margin-top: -546rpx;
} }
.levelup .levelup_light { .levelup .levelup_light {
width: 1116rpx; width: 750rpx;
height: 1093rpx; height: 1093rpx;
opacity: 1; opacity: 1;
position: absolute; position: absolute;
transform-origin: 0rpx 0rpx 0rpx; transform-origin: 0rpx 0rpx 0rpx;
} }
.levelup .levelup_bg { .levelup .levelup_bg {
width: 584rpx; width: 584rpx;
height: 715rpx; height: 715rpx;
opacity: 1; opacity: 1;
left: 268rpx; left: 85rpx;
top: 200rpx; top: 200rpx;
position: absolute; position: absolute;
transform-origin: 0rpx 0rpx 0rpx; transform-origin: 0rpx 0rpx 0rpx;
} }
.levelup .levelup_closebtn { .levelup .levelup_closebtn {
width: 45rpx; width: 45rpx;
height: 45rpx; height: 45rpx;
opacity: 1; opacity: 1;
left: 767rpx; left: 584rpx;
top: 236rpx; top: 236rpx;
position: absolute; position: absolute;
transform-origin: 0rpx 0rpx 0rpx; transform-origin: 0rpx 0rpx 0rpx;
} }
.levelup .levelup_bg2 { .levelup .levelup_bg2 {
width: 651rpx; width: 651rpx;
height: 784rpx; height: 784rpx;
opacity: 1; opacity: 1;
left: 235rpx; left: 52rpx;
top: 182rpx; top: 182rpx;
position: absolute; position: absolute;
transform-origin: 0rpx 0rpx 0rpx; transform-origin: 0rpx 0rpx 0rpx;
} }
.levelup .levelup_txt { .levelup .levelup_txt {
width: 371rpx; width: 371rpx;
height: 26rpx; height: 26rpx;
opacity: 1; opacity: 1;
left: 374rpx; left: 191rpx;
top: 711rpx; top: 711rpx;
position: absolute; position: absolute;
transform-origin: 0rpx 0rpx 0rpx; transform-origin: 0rpx 0rpx 0rpx;
font-size: 26rpx; font-size: 26rpx;
color: #574738; color: #574738;
} }
.levelup .levelup_title { .levelup .levelup_title {
width: 206rpx; width: 206rpx;
height: 35rpx; height: 35rpx;
opacity: 1; opacity: 1;
left: 457rpx; left: 274rpx;
top: 314rpx; top: 314rpx;
position: absolute; position: absolute;
transform-origin: 0rpx 0rpx 0rpx; transform-origin: 0rpx 0rpx 0rpx;
} }
.levelup .levelup_imgbg { .levelup .levelup_imgbg {
width: 360rpx; width: 360rpx;
height: 299rpx; height: 299rpx;
opacity: 1; opacity: 1;
left: 380rpx; left: 197rpx;
top: 377rpx; top: 377rpx;
position: absolute; position: absolute;
transform-origin: 0rpx 0rpx 0rpx; transform-origin: 0rpx 0rpx 0rpx;
} }
.levelup .levelup_btn { .levelup .levelup_btn {
width: 351rpx; width: 351rpx;
height: 105rpx; height: 105rpx;
opacity: 1; opacity: 1;
left: 384rpx; left: 201rpx;
top: 773rpx; top: 773rpx;
position: absolute; position: absolute;
transform-origin: 0rpx 0rpx 0rpx; transform-origin: 0rpx 0rpx 0rpx;
......
<view class="levelup-modal">
<view class="levelup__shade modal-animate-fade-in" />
<view class="levelup modal-animate-zoom-in">
<image class="levelup_light " src={{resList['a158cbff-9dcd-49df-bb91-16213d58036e'].url}} />
<image class="levelup_bg " src={{resList['b027d194-0fad-45ea-8b1c-3502f7869d2d'].url}} />
<image class="levelup_bg2 " src={{resList['f88dfc75-c9f1-4e9d-8826-8a1d0e513259'].url}} />
<label class="levelup_txt ">精力上限1200 → 精力上限1500</label>
<image class="levelup_title " src={{resList['69bff61a-b5a6-4979-ba8d-9e008aed737a'].url}} />
<image class="levelup_imgbg " src={{resList['f56872e2-5e79-4906-99a2-576231f153af'].url}} />
<image class="levelup_btn " onTap="onBtnClick" src={{resList['95520b55-9655-4988-a833-3907978dbffb'].url}} />
<image class="levelup_closebtn " onTap="onModalClose" src={{resList['d33bbf87-ed39-4959-8673-02a4c31dca77'].url}} />
</view>
</view>
\ No newline at end of file
...@@ -7,6 +7,10 @@ Component({ ...@@ -7,6 +7,10 @@ Component({
resList: resList resList: resList
}, },
methods: { methods: {
onBtnClick() {
console.log('onBtnClick');
this.onModalClose();
},
onModalClose() { onModalClose() {
const { onModalClose } = this.props; const { onModalClose } = this.props;
onModalClose && onModalClose(); onModalClose && onModalClose();
......
<view class="levelup ">
<image class="levelup_light " src={{resList['137b39ef-0c25-4991-a57e-0308daaec2dd'].url}} />
<image class="levelup_bg " src={{resList['bca418af-89d1-4fe0-90a8-ae8581ad328c'].url}} />
<image onTap="onModalClose" class="levelup_closebtn " src={{resList['c2adf081-7720-4814-ad9e-e28d13522ee0'].url}} />
<image class="levelup_bg2 " src={{resList['9de58772-9830-4e72-aba8-b07802266b5d'].url}} />
<label class="levelup_txt ">精力上限1200 → 精力上限1500</label>
<image class="levelup_title " src={{resList['be93e436-d2eb-4c29-922c-577810ed6571'].url}} />
<image class="levelup_imgbg " src={{resList['b1c40894-4d50-45e6-8fc8-118ef6d9d598'].url}} />
<image class="levelup_btn " src={{resList['8da5fe13-41a3-4b5b-b079-938e0c7eef5a'].url}} />
</view>
\ No newline at end of file
...@@ -43,7 +43,7 @@ const resList = { ...@@ -43,7 +43,7 @@ const resList = {
ext: '.png', ext: '.png',
uuid: '95520b55-9655-4988-a833-3907978dbffb', uuid: '95520b55-9655-4988-a833-3907978dbffb',
url: '//yun.duiba.com.cn/spark/assets/5193855f40ff72dea9f48022083a6a35240b6dc6.png' url: '//yun.duiba.com.cn/spark/assets/5193855f40ff72dea9f48022083a6a35240b6dc6.png'
} },
......
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