1356 lines
44 KiB
SCSS
1356 lines
44 KiB
SCSS
@function px2rem($px) {
|
||
@return $px / 75+rem;
|
||
}
|
||
|
||
@font-face{
|
||
font-family: 'pingfang-bold';
|
||
src: url('../../../common/fonts/PingFang\ Bold.ttf');
|
||
src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'),
|
||
url('../../../common/fonts/PingFang\ Bold.ttf') format('truetype'),
|
||
url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
|
||
}
|
||
|
||
@font-face{
|
||
font-family: 'din-medium';
|
||
src: url('../../../common/fonts/DINCond-Medium.ttf');
|
||
src: url('../../../common/fonts/DINCond-Medium.ttf') format('woff'),
|
||
url('../../../common/fonts/DINCond-Medium.ttf') format('truetype'),
|
||
url('../../../common/fonts/DINCond-Medium.ttf') format('svg');
|
||
}
|
||
|
||
@font-face{
|
||
font-family: 'pingfang-medium';
|
||
src: url('../../../common/fonts/PingFang-Medium.ttf');
|
||
src: url('../../../common/fonts/PingFang-Medium.ttf') format('woff'),
|
||
url('../../../common/fonts/PingFang-Medium.ttf') format('truetype'),
|
||
url('../../../common/fonts/PingFang-Medium.ttf') format('svg');
|
||
}
|
||
|
||
body{
|
||
font-family: 'pingfang-medium';
|
||
overflow-x: hidden;
|
||
background-color: #5347ED;
|
||
}
|
||
|
||
.wrap{
|
||
width: 100%;
|
||
height: 115vh;
|
||
background: url('../images/main/index-bg.png?v1.0') no-repeat center/cover;
|
||
position: relative;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
// margin-bottom: px2rem(200);
|
||
.header{
|
||
position: absolute;
|
||
left: 50%;
|
||
top: px2rem(12);
|
||
transform: translateX(-50%);
|
||
z-index: 9;
|
||
width: px2rem(404);
|
||
height: px2rem(186);
|
||
background: url('../images/main/head.png?v1.0') no-repeat 0 0/100% 100%;
|
||
p{
|
||
position: absolute;
|
||
left: 20%;
|
||
top: px2rem(146);
|
||
z-index: 9;
|
||
width: px2rem(228);
|
||
text-align: center;
|
||
font-size: px2rem(20);
|
||
color: #87653C;
|
||
i{
|
||
font-style: normal;
|
||
}
|
||
span{
|
||
font-family: 'din-medium';
|
||
font-size: px2rem(22);
|
||
font-weight: bold;
|
||
color: #942A00;
|
||
}
|
||
}
|
||
}
|
||
.rule, .record, .mall, .rank{
|
||
position: absolute;
|
||
top: px2rem(130);
|
||
left: px2rem(20);
|
||
z-index: 99;
|
||
width: px2rem(86);
|
||
height: px2rem(78);
|
||
img{
|
||
width: 100%;
|
||
}
|
||
}
|
||
.record{
|
||
top: px2rem(50);
|
||
left: px2rem(644);
|
||
}
|
||
.mall{
|
||
top: px2rem(130);
|
||
display: none;
|
||
}
|
||
.rank{
|
||
top: px2rem(130);
|
||
left: px2rem(644);
|
||
}
|
||
|
||
// 过场动画
|
||
.monster-svga{
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 9;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
}
|
||
|
||
.previous-result{
|
||
position: absolute;
|
||
// bottom: px2rem(200);
|
||
top: px2rem(1120);
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: px2rem(710);
|
||
height: px2rem(68);
|
||
font-family: 'pingfang-bold';
|
||
font-size: px2rem(30);
|
||
font-weight: bold;
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
background: url('../images/previous-result-bg.png?v1.0') no-repeat 0 0/100% 100%;
|
||
z-index: 9;
|
||
span{
|
||
font-weight: bold;
|
||
margin-left: px2rem(27);
|
||
text-shadow: 1px 1px 0px#fc8321,
|
||
-1px -1px 0px#fc8321,
|
||
1px 1px 0px#fc8321,
|
||
-1px -1px 0px#fc8321,
|
||
1px 1px 0px#fc8321,
|
||
-1px -1px 0px#fc8321;
|
||
}
|
||
.result-list{
|
||
display: flex;
|
||
p{
|
||
width: px2rem(40);
|
||
height: px2rem(40);
|
||
margin-left: px2rem(8);
|
||
background: url('../images/little-bubble.png?v1.0') 0 0/100% 100%;
|
||
// &:last-child{
|
||
// background: url('../images/last-little-bubble.png?v1.0') 0 0/100% 100%,url('../images/little-bubble.png?v1.0') 0 0/100% 100%;
|
||
// }
|
||
img{
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.game-area{
|
||
position: relative;
|
||
width: 100%;
|
||
height: px2rem(554);
|
||
background: url('../images/main/path-bg.png?v1.0') no-repeat 0 0/100% 100%;
|
||
margin-top: px2rem(136);
|
||
.path{
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 5;
|
||
width: px2rem(650);
|
||
height: px2rem(390);
|
||
}
|
||
.monster-position{
|
||
display: none;
|
||
position: absolute;
|
||
top: px2rem(360);
|
||
left: px2rem(56);
|
||
z-index: 99;
|
||
width: px2rem(86);
|
||
height: px2rem(93);
|
||
}
|
||
.init-position{
|
||
position: absolute;
|
||
top: px2rem(350);
|
||
left: px2rem(62);
|
||
z-index: 999;
|
||
width: px2rem(72);
|
||
height: px2rem(86);
|
||
}
|
||
.sign-wrap{
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 9;
|
||
width: px2rem(650);
|
||
height: px2rem(390);
|
||
div{
|
||
position: absolute;
|
||
left: px2rem(10);
|
||
top: px2rem(10);
|
||
width: px2rem(70);
|
||
height: px2rem(58);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
&.active{
|
||
transform: scale(2.0);
|
||
p{transform: scale(0.7);}
|
||
}
|
||
img{
|
||
width: 70%;
|
||
// opacity: 0.5;
|
||
}
|
||
p{
|
||
// display: none;
|
||
position: absolute;
|
||
top: px2rem(0);
|
||
left: px2rem(50);
|
||
font-size: px2rem(20);
|
||
color: #fff;
|
||
// text-shadow: 1px 1px #FF5C7F, -1px -1px #FF5C7F ;
|
||
text-shadow: 1px 1px 0px#dd40ff,
|
||
-1px -1px 0px#dd40ff,
|
||
1px 1px 0px#dd40ff,
|
||
-1px -1px 0px#dd40ff,
|
||
1px 1px 0px#dd40ff,
|
||
-1px -1px 0px#dd40ff;
|
||
}
|
||
&:nth-child(2){
|
||
left: px2rem(280);
|
||
}
|
||
&:nth-child(3){
|
||
left: px2rem(568);
|
||
}
|
||
&:nth-child(4){
|
||
top: px2rem(138);
|
||
left: px2rem(568);
|
||
}
|
||
&:nth-child(5){
|
||
top: px2rem(138);
|
||
left: px2rem(360);
|
||
}
|
||
&:nth-child(6){
|
||
top: px2rem(138);
|
||
left: px2rem(154);
|
||
}
|
||
&:nth-child(7){
|
||
top: px2rem(256);
|
||
left: px2rem(234);
|
||
}
|
||
&:nth-child(8){
|
||
top: px2rem(256);
|
||
left: px2rem(568);
|
||
}
|
||
}
|
||
}
|
||
.call-weapon{
|
||
position: absolute;
|
||
bottom: px2rem(46);
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: px2rem(438);
|
||
height: px2rem(108);
|
||
}
|
||
}
|
||
|
||
.summon-area{
|
||
.weapon-wrap{
|
||
position: relative;
|
||
width: 100%;
|
||
height: px2rem(84);
|
||
background: url('../images/main/weapon-list.png?v1.0') no-repeat 0 0/100% 100%;
|
||
p{
|
||
position: absolute;
|
||
top: 0;
|
||
left: px2rem(12);
|
||
width: px2rem(82);
|
||
height: px2rem(82);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
img{
|
||
width: 70%;
|
||
}
|
||
&.active{
|
||
background: url('../images/main/weapon-item-active.png?v1.0') no-repeat 0 0/100% 100%;
|
||
}
|
||
&:nth-child(2){
|
||
left: px2rem(104);
|
||
}
|
||
&:nth-child(3){
|
||
left: px2rem(196);
|
||
}
|
||
&:nth-child(4){
|
||
left: px2rem(288);
|
||
}
|
||
&:nth-child(5){
|
||
left: px2rem(380);
|
||
}
|
||
&:nth-child(6){
|
||
left: px2rem(470);
|
||
}
|
||
&:nth-child(7){
|
||
left: px2rem(564);
|
||
}
|
||
&:nth-child(8){
|
||
left: px2rem(654);
|
||
}
|
||
}
|
||
}
|
||
.restrain{
|
||
position: relative;
|
||
width: px2rem(506);
|
||
height: px2rem(158);
|
||
background: url('../images/main/restrain-bg.png?v1.0') no-repeat 0 0/100% 100%;
|
||
margin: px2rem(18) auto px2rem(46);
|
||
.weapon-pic, .monster-pic{
|
||
position: absolute;
|
||
top: px2rem(40);
|
||
left: px2rem(62);
|
||
width: px2rem(60);
|
||
height: px2rem(60);
|
||
img{
|
||
width: 100%;
|
||
}
|
||
}
|
||
.monster-pic{
|
||
width: px2rem(84);
|
||
height: px2rem(90);
|
||
top: px2rem(24);
|
||
left: px2rem(368);
|
||
}
|
||
.weapon-name, .monster-name{
|
||
position: absolute;
|
||
top: px2rem(112);
|
||
left: px2rem(28);
|
||
width: px2rem(132);
|
||
font-size: px2rem(20);
|
||
color: #9688D7;
|
||
text-align: center;
|
||
}
|
||
.monster-name{
|
||
left: px2rem(344);
|
||
}
|
||
}
|
||
|
||
.select-num{
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: auto;
|
||
.decrement-ten, .increment-ten{
|
||
width: px2rem(92);
|
||
height: px2rem(76);
|
||
img{
|
||
width: 100%;
|
||
}
|
||
}
|
||
.ipt-wrap{
|
||
position: relative;
|
||
.decrement, .increment{
|
||
position: absolute;
|
||
top: px2rem(-2);
|
||
left: px2rem(10);
|
||
z-index: 9;
|
||
width: px2rem(72);
|
||
height: px2rem(72);
|
||
}
|
||
.increment{
|
||
left: px2rem(312);
|
||
}
|
||
input{
|
||
position: relative;
|
||
width: px2rem(368);
|
||
height: px2rem(64);
|
||
border-radius: px2rem(32);
|
||
box-sizing: border-box;
|
||
padding-bottom: px2rem(20);
|
||
margin: 0 px2rem(10);
|
||
outline: none;
|
||
background: #3B369B;
|
||
color: #fff;
|
||
font-size: px2rem(30);
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
span{
|
||
display: none;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
top: px2rem(-36);
|
||
color: #fff;
|
||
font-size: px2rem(24);
|
||
}
|
||
p, main{
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: px2rem(-24);
|
||
z-index: 9;
|
||
width: 100%;
|
||
color: rgba($color: #fff, $alpha: .65);
|
||
font-size: px2rem(20);
|
||
text-align: center;
|
||
i{
|
||
font-style: normal;
|
||
}
|
||
}
|
||
main{
|
||
color: #9688D7;
|
||
bottom: px2rem(16);
|
||
}
|
||
}
|
||
}
|
||
.confitm-btn{
|
||
width: px2rem(300);
|
||
height: px2rem(76);
|
||
margin: px2rem(70) auto 0;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
top: 14.3rem;
|
||
&.inactive{
|
||
width: px2rem(333);
|
||
height: px2rem(84);
|
||
}
|
||
&.prepare{
|
||
width: px2rem(300);
|
||
height: px2rem(76);
|
||
}
|
||
img{
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
// 底部信息
|
||
.info-bottom{
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 99;
|
||
width: 100%;
|
||
height: px2rem(100);
|
||
background-color: #DAC9FF;
|
||
display: flex;
|
||
align-items: center;
|
||
.f-wrap{
|
||
flex: 1;
|
||
.fragment, .award{
|
||
font-size: px2rem(24);
|
||
color: rgba($color: #000000, $alpha: 0.7);
|
||
img{
|
||
width: px2rem(35);
|
||
width: px2rem(30);
|
||
margin-left: px2rem(6);
|
||
vertical-align: middle;
|
||
margin-top: px2rem(-2);
|
||
}
|
||
span{
|
||
font-family: 'din-medium';
|
||
color: #574FD0;
|
||
}
|
||
}
|
||
.award{
|
||
margin-top: px2rem(8);
|
||
img{
|
||
width: px2rem(32);
|
||
height: px2rem(32);
|
||
}
|
||
}
|
||
}
|
||
.avatar{
|
||
width: px2rem(72);
|
||
height: px2rem(72);
|
||
margin-left: px2rem(30);
|
||
margin-right: px2rem(24);
|
||
img{
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
border: px2rem(4) solid #574FD0;
|
||
}
|
||
}
|
||
.mine-record{
|
||
font-size: px2rem(24);
|
||
color: #574FD0;
|
||
margin-right: px2rem(24);
|
||
}
|
||
}
|
||
|
||
|
||
|
||
// 规则弹窗
|
||
.shade-mask{
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 999;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: rgba($color: #000000, $alpha: 0.7);
|
||
.shade-content{
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: px2rem(720);
|
||
height: px2rem(850);
|
||
background: url('../images/popup/rule.png?v1.0') no-repeat 0 0/100% 100%;
|
||
font-size: px2rem(20);
|
||
color: #6E5F4C;
|
||
font-weight: 600;
|
||
.close{
|
||
position: absolute;
|
||
top: px2rem(44);
|
||
right: px2rem(54);
|
||
width: px2rem(50);
|
||
height: px2rem(50);
|
||
}
|
||
main{
|
||
overflow: auto;
|
||
height: 75%;
|
||
margin-top: px2rem(140);
|
||
.rule-bg1, .rule-bg2{
|
||
width: 80%;
|
||
margin-left: px2rem(70);
|
||
}
|
||
.rule-weapon-wrap{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: px2rem(550);
|
||
margin: px2rem(30) auto 0;
|
||
p{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: px2rem(60);
|
||
height: px2rem(60);
|
||
border-radius: px2rem(10);
|
||
background-color: #E5C09A;
|
||
&.active{
|
||
background-color: #FAF5E5;
|
||
}
|
||
img{
|
||
width: 80%;
|
||
}
|
||
}
|
||
}
|
||
.rule-summon-wrap{
|
||
display: flex;
|
||
width: px2rem(550);
|
||
margin: px2rem(24) auto px2rem(10);
|
||
div{
|
||
display: flex;
|
||
align-items: center;
|
||
width: 50%;
|
||
div{
|
||
width: px2rem(120);
|
||
height: px2rem(120);
|
||
border-radius: px2rem(10);
|
||
background-color: #FAF5E5;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: px2rem(10);
|
||
img{
|
||
width: 80%;
|
||
}
|
||
}
|
||
p{
|
||
display: flex;
|
||
flex-direction: column;
|
||
span{
|
||
margin-top: px2rem(10);
|
||
i{
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 游戏结果弹窗
|
||
.popup-result, .popup-not-enough, .popup-summon, .popup-rank{
|
||
display: none;
|
||
font-family: 'pingfang-bold';
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 999;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: rgba($color: #000000, $alpha: 0.7);
|
||
.result-content, .not-enough-content, .summon-content{
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: px2rem(720);
|
||
height: px2rem(740);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
&.success-bg{
|
||
background: url('../images/popup/success.png?v1.0') no-repeat 0 0/100% 100%;
|
||
}
|
||
&.failure-bg{
|
||
background: url('../images/popup/failure.png?v1.0') no-repeat 0 0/100% 100%;
|
||
}
|
||
&.not-join-bg{
|
||
background: url('../images/popup/not-join.png?v1.0') no-repeat 0 0/100% 100%;
|
||
}
|
||
.close{
|
||
position: absolute;
|
||
top: px2rem(44);
|
||
right: px2rem(52);
|
||
width: px2rem(50);
|
||
height: px2rem(50);
|
||
}
|
||
.result-title{
|
||
font-size: px2rem(30);
|
||
color: #6F5F4D;
|
||
margin-top: px2rem(162);
|
||
span{
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.result-weapon-pic, .summon-weapon-pic{
|
||
position: absolute;
|
||
top: px2rem(256);
|
||
left: px2rem(200);
|
||
width: px2rem(60);
|
||
height: px2rem(60);
|
||
}
|
||
.result-monster-pic, .summon-monster-pic{
|
||
position: absolute;
|
||
top: px2rem(240);
|
||
right: px2rem(190);
|
||
width: px2rem(84);
|
||
height: px2rem(90);
|
||
}
|
||
|
||
.result-weapon-name, .result-monster-name, .summon-weapon-name, .summon-monster-name{
|
||
position: absolute;
|
||
top: px2rem(360);
|
||
left: px2rem(152);
|
||
width: px2rem(160);
|
||
text-align: center;
|
||
font-size: px2rem(24);
|
||
color: #6F5F4D;
|
||
}
|
||
.result-monster-name, .summon-monster-name{
|
||
left: px2rem(406);
|
||
}
|
||
.result-award{
|
||
display: none;
|
||
margin-top: px2rem(280);
|
||
font-size: px2rem(30);
|
||
font-weight: bold;
|
||
color: #6F5F4D;
|
||
span{
|
||
color: #F35200;
|
||
}
|
||
}
|
||
.top-three{
|
||
position: absolute;
|
||
top: px2rem(600);
|
||
display: flex;
|
||
justify-content: space-around;
|
||
width: 32%;
|
||
img{
|
||
width: px2rem(64);
|
||
height: px2rem(64);
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.popup-not-enough{
|
||
.not-enough-content{
|
||
background: url('../images/popup/not-enough.png?v1.0') no-repeat 0 0/100% 100%;
|
||
.headwear-pic{
|
||
width: px2rem(120);
|
||
height: px2rem(120);
|
||
margin-top: px2rem(240);
|
||
}
|
||
.headwear-name{
|
||
font-size: px2rem(30);
|
||
font-weight: bold;
|
||
color: #6F5F4D;
|
||
margin: px2rem(44) 0 px2rem(14) 0;
|
||
}
|
||
.headwear-award{
|
||
font-size: px2rem(24);
|
||
color: #6F5F4D;
|
||
margin-bottom: px2rem(72);
|
||
}
|
||
.headwear-price{
|
||
width: px2rem(402);
|
||
height: px2rem(60);
|
||
background: url('../images/popup/price-bg.png?v1.0') no-repeat 0 0/100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
.diamond-icon{
|
||
width: px2rem(38);
|
||
height: px2rem(30);
|
||
margin: 0 px2rem(12) 0 px2rem(30);
|
||
}
|
||
span{
|
||
flex: 1;
|
||
font-size: px2rem(30);
|
||
color: #fff;
|
||
}
|
||
.buy-btn{
|
||
width: px2rem(210);
|
||
height: px2rem(60);
|
||
img{
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
.diamond-num{
|
||
margin-top: px2rem(20);
|
||
font-size: px2rem(24);
|
||
color: rgba($color: #6F5F4D, $alpha: .7);
|
||
span{
|
||
font-family: 'din-medium';
|
||
color: #574FD0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.popup-summon{
|
||
.summon-content{
|
||
background: url('../images/popup/summon.png?v1.0') no-repeat 0 0/100% 100%;
|
||
color: #6F5F4D;
|
||
.summon-title{
|
||
font-size: px2rem(30);
|
||
margin-top: px2rem(154);
|
||
span{
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.summon-weapon-pic{
|
||
top: px2rem(236);
|
||
}
|
||
.summon-monster-pic{
|
||
top: px2rem(230);
|
||
}
|
||
.summon-weapon-name, .summon-monster-name{
|
||
top: px2rem(340);
|
||
}
|
||
.multiple{
|
||
position: absolute;
|
||
top: px2rem(370);
|
||
left: px2rem(148);
|
||
width: px2rem(180);
|
||
text-align: center;
|
||
font-size: px2rem(24);
|
||
color: rgba($color: #6F5F4D, $alpha: 1);
|
||
span{
|
||
color: #942A00;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.popup-select-num{
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: px2rem(262);
|
||
.decrement-ten, .increment-ten{
|
||
width: px2rem(76);
|
||
height: px2rem(76);
|
||
img{
|
||
width: 100%;
|
||
}
|
||
}
|
||
.ipt-wrap{
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
.decrement, .increment{
|
||
position: absolute;
|
||
top: px2rem(2);
|
||
left: px2rem(6);
|
||
z-index: 9;
|
||
width: px2rem(72);
|
||
height: px2rem(72);
|
||
}
|
||
.increment{
|
||
left: px2rem(314);
|
||
}
|
||
input{
|
||
position: relative;
|
||
width: px2rem(368);
|
||
height: px2rem(64);
|
||
border-radius: px2rem(32);
|
||
box-sizing: border-box;
|
||
padding-bottom: px2rem(20);
|
||
margin: 0 px2rem(10);
|
||
outline: none;
|
||
background: #9987DC;
|
||
color: #fff;
|
||
font-size: px2rem(30);
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
span{
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
top: px2rem(-36);
|
||
color: #6F5F4D;
|
||
font-size: px2rem(24);
|
||
font-weight: bold;
|
||
}
|
||
p, main{
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: px2rem(-24);
|
||
z-index: 9;
|
||
width: 100%;
|
||
color: rgba($color: #6F5F4D, $alpha: .65);
|
||
font-size: px2rem(20);
|
||
text-align: center;
|
||
i{
|
||
font-style: normal;
|
||
}
|
||
}
|
||
p{
|
||
i{
|
||
color: #942A00;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
main{
|
||
color: rgba($color: #fff, $alpha: .35);
|
||
bottom: px2rem(12);
|
||
}
|
||
}
|
||
}
|
||
.popup-confitm-btn{
|
||
width: px2rem(300);
|
||
height: px2rem(76);
|
||
margin: px2rem(60) auto px2rem(8);
|
||
&.inactive{
|
||
width: px2rem(333);
|
||
height: px2rem(84);
|
||
}
|
||
&.prepare{
|
||
width: px2rem(300);
|
||
height: px2rem(76);
|
||
}
|
||
img{
|
||
width: 100%;
|
||
}
|
||
}
|
||
.mine-prop-num{
|
||
font-size: px2rem(24);
|
||
color: rgba($color: #6F5F4D, $alpha: .7);
|
||
span{
|
||
font-family: 'din-medium';
|
||
color: #574FD0;
|
||
}
|
||
.add{
|
||
width: px2rem(26);
|
||
height: px2rem(26);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 记录弹窗
|
||
.popup-record-list, .pupop-previous-result{
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 999;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: rgba($color: #000000, $alpha: 0.7);
|
||
.record-list-content, .previous-result-content{
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: px2rem(720);
|
||
height: px2rem(850);
|
||
background: url('../images/popup/record.png?v1.0') no-repeat 0 0/100% 100%;
|
||
.close{
|
||
position: absolute;
|
||
top: px2rem(46);
|
||
right: px2rem(60);
|
||
width: px2rem(50);
|
||
height: px2rem(50);
|
||
}
|
||
ul.record-list{
|
||
height: 74%;
|
||
margin-top: px2rem(160);
|
||
overflow: auto;
|
||
li.record-item{
|
||
overflow: hidden;
|
||
width: px2rem(540);
|
||
height: px2rem(292);
|
||
background: url('../images/popup/record-bg.png?v1.0') no-repeat 0 0/100% 100%;
|
||
margin: px2rem(0) auto px2rem(26);
|
||
.time{
|
||
font-family: 'pingfang-medium';
|
||
font-size: px2rem(20);
|
||
color: white;
|
||
text-align: center;
|
||
margin-top: px2rem(8);
|
||
margin-bottom: px2rem(12);
|
||
}
|
||
.monster-wrap{
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
width: 100%;
|
||
height: px2rem(40);
|
||
margin: auto;
|
||
.text1{
|
||
font-size: px2rem(22);
|
||
color: white;
|
||
font-weight: bold;
|
||
margin-left: px2rem(18);
|
||
}
|
||
.text2{
|
||
position: absolute;
|
||
left: px2rem(310);
|
||
color: #6F5F4D;
|
||
font-size: px2rem(18);
|
||
}
|
||
.li-monster-pic{
|
||
position: absolute;
|
||
left: px2rem(394);
|
||
width: px2rem(32);
|
||
height: px2rem(32);
|
||
}
|
||
.li-monster-name{
|
||
position: absolute;
|
||
right: px2rem(4);
|
||
width: px2rem(110);
|
||
text-align: center;
|
||
color: #6F5F4D;
|
||
font-size: px2rem(18);
|
||
}
|
||
}
|
||
ul.weapon-pic-wrap{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding-left: px2rem(16);
|
||
padding-right: px2rem(6);
|
||
box-sizing: border-box;
|
||
margin: px2rem(4) auto px2rem(8);
|
||
li.weapon-item{
|
||
position: relative;
|
||
width: 25%;
|
||
height: px2rem(60);
|
||
margin: px2rem(12) 0 ;
|
||
display: flex;
|
||
align-items: center;
|
||
.summon-icon{
|
||
display: none;
|
||
position: absolute;
|
||
top: 0;
|
||
left: px2rem(8);
|
||
width: px2rem(44);
|
||
height: px2rem(24);
|
||
}
|
||
.weapon-item-pic{
|
||
width: px2rem(60);
|
||
height: px2rem(60);
|
||
margin-right: px2rem(2);
|
||
}
|
||
span{
|
||
font-size: px2rem(20);
|
||
font-weight: bold;
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
.result-wrap{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-family: 'pingfang-medium';
|
||
font-size: px2rem(16);
|
||
color: #6F5F4D;
|
||
margin-left: px2rem(24);
|
||
margin-right: px2rem(18);
|
||
p{
|
||
display: none;
|
||
margin-top: px2rem(-10);
|
||
color: #fff;
|
||
i{
|
||
font-family: 'din-medium';
|
||
font-style: normal;
|
||
font-size: px2rem(20);
|
||
}
|
||
img{
|
||
width: px2rem(25);
|
||
height: px2rem(25);
|
||
vertical-align: middle;
|
||
margin-top: px2rem(-5);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.no-record{
|
||
position: relative;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
text-align: center;
|
||
color: #715E4B;
|
||
font-size: px2rem(30);
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//往轮结果弹窗
|
||
.pupop-previous-result{
|
||
.previous-result-content{
|
||
background-image: url('../images/popup/monster-record.png?v1.0');
|
||
ul.previous-result-list{
|
||
height: 64%;
|
||
margin-top: px2rem(256);
|
||
overflow: auto;
|
||
li{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: px2rem(24);
|
||
font-size: px2rem(24);
|
||
font-weight: bold;
|
||
color: #6E5F4C;
|
||
.result-index{
|
||
width: px2rem(96);
|
||
margin-left: px2rem(92);
|
||
text-align: center;
|
||
}
|
||
.result-monster, .result-weapon{
|
||
display: flex;
|
||
align-items: center;
|
||
div{
|
||
width: px2rem(32);
|
||
height: px2rem(32);
|
||
border-radius: px2rem(10);
|
||
background-color: #FAF5E5;
|
||
margin-left: px2rem(58);
|
||
margin-right: px2rem(12);
|
||
img{
|
||
width: 100%;
|
||
}
|
||
}
|
||
p{
|
||
width: px2rem(150);
|
||
}
|
||
}
|
||
.result-weapon{
|
||
div{
|
||
margin-left: px2rem(14);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 今日排名弹窗
|
||
.popup-rank{
|
||
.rank-content{
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 99;
|
||
width: 100%;
|
||
height: px2rem(916);
|
||
background: url('../images/popup/rank-bg.png?v1.0') no-repeat 0 0/100% 100%;
|
||
.rank-top{
|
||
font-family: 'pingfang-bold';
|
||
color: #fff;
|
||
height: px2rem(300);
|
||
// overflow: hidden;
|
||
.tab-wrap{
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
top: px2rem(-56);
|
||
z-index: 9;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 62%;
|
||
height: px2rem(62);
|
||
p{
|
||
width: px2rem(218);
|
||
height: px2rem(62);
|
||
}
|
||
}
|
||
.topthree-wrap{
|
||
position: relative;
|
||
.info-wrap{
|
||
position: absolute;
|
||
left: 50%;
|
||
top: px2rem(126);
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: px2rem(170);
|
||
height: px2rem(170);
|
||
border-radius: px2rem(10) px2rem(10) 0 0;
|
||
background-image: linear-gradient( rgba($color: #fff, $alpha: .5), rgba($color: #fff, $alpha: 0));
|
||
&:nth-child(2), &:nth-child(3){
|
||
left: px2rem(98);
|
||
top: px2rem(146);
|
||
transform: translateX(0);
|
||
width: px2rem(150);
|
||
height: px2rem(150);
|
||
.avatar{
|
||
width: px2rem(114);
|
||
height: px2rem(154);
|
||
p{
|
||
background-image: url('../images/popup/second.png?v1.0');
|
||
}
|
||
img{
|
||
width: px2rem(112);
|
||
height: px2rem(112);
|
||
top: px2rem(-120);
|
||
}
|
||
}
|
||
// .diamond-num{
|
||
// display: none;
|
||
// }
|
||
|
||
}
|
||
&:nth-child(3){
|
||
left: px2rem(504);
|
||
.avatar{
|
||
p{
|
||
background-image: url('../images/popup/third.png?v1.0');
|
||
}
|
||
}
|
||
}
|
||
.avatar{
|
||
width: px2rem(128);
|
||
height: px2rem(172);
|
||
margin-bottom: px2rem(12);
|
||
margin-top: px2rem(-100);
|
||
p{
|
||
position: relative;
|
||
z-index: 99;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: url('../images/popup/first.png?v1.0') no-repeat 0 0/100% 100%;
|
||
}
|
||
img{
|
||
position: relative;
|
||
z-index: 9;
|
||
top: px2rem(-134);
|
||
left: 0;
|
||
width: px2rem(128);
|
||
height: px2rem(128);
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.nick, .diamond-num{
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: px2rem(24);
|
||
font-weight: bold;
|
||
}
|
||
.diamond-num{
|
||
font-family: 'din-medium';
|
||
margin-top: px2rem(8);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.other-rank{
|
||
overflow: auto;
|
||
position: absolute;
|
||
width: 100%;
|
||
height: px2rem(480);
|
||
padding: px2rem(0) px2rem(80) 0 px2rem(60);
|
||
box-sizing: border-box;
|
||
margin-top: px2rem(40);
|
||
li{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: px2rem(16);
|
||
&:last-child{
|
||
margin-bottom: px2rem(60);
|
||
}
|
||
.index{
|
||
display: inline-block;
|
||
width: px2rem(50);
|
||
font-family: 'din-medium';
|
||
font-size: px2rem(30);
|
||
font-weight: bold;
|
||
color: #6E5F4C;
|
||
text-align: center;
|
||
}
|
||
.others-info{
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: px2rem(24);
|
||
img{
|
||
width: px2rem(100);
|
||
height: px2rem(100);
|
||
border-radius: 50%;
|
||
margin-right: px2rem(20);
|
||
}
|
||
.others-nick{
|
||
font-size: px2rem(28);
|
||
font-weight: bold;
|
||
color: #735D47;
|
||
}
|
||
}
|
||
.others-diamond-num{
|
||
font-size: px2rem(26);
|
||
font-weight: bold;
|
||
color: #7665DE;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mine{
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
z-index: 999;
|
||
width: 100%;
|
||
height: px2rem(120);
|
||
background-color: #7766DF;
|
||
padding: 0 px2rem(58);
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
.mine-rank{
|
||
font-size: px2rem(26);
|
||
font-weight: bold;
|
||
color: white;
|
||
}
|
||
.mine-info{
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
img{
|
||
width: px2rem(100);
|
||
height: px2rem(100);
|
||
border-radius: 50%;
|
||
margin-left: px2rem(30);
|
||
margin-right: px2rem(20);
|
||
}
|
||
.mine-nick{
|
||
font-size: px2rem(28);
|
||
font-weight: bold;
|
||
color: white;
|
||
}
|
||
}
|
||
.mine-diamond-num{
|
||
font-family: 'din-medium';
|
||
font-size: px2rem(26);
|
||
font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 余额不足弹窗
|
||
.shade-mask-no-money{
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 9999;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: rgba($color: #000000, $alpha: 0.4);
|
||
.shade-content-no-money{
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: px2rem(600);
|
||
height: px2rem(600);
|
||
border-radius: px2rem(24);
|
||
background-color: white;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.no-money-title{
|
||
font-size: px2rem(36);
|
||
font-weight: bold;
|
||
color: #333333;
|
||
margin: px2rem(36) 0 px2rem(108);
|
||
}
|
||
.no-money-pic{
|
||
width: px2rem(120);
|
||
height: px2rem(120);
|
||
margin-bottom: px2rem(50);
|
||
}
|
||
.no-money-tip{
|
||
font-size: px2rem(30);
|
||
font-weight: 550;
|
||
color: #333333;
|
||
}
|
||
.no-money-recharge{
|
||
width: px2rem(240);
|
||
height: px2rem(76);
|
||
background-image: linear-gradient(#735FFE, #8776FF);
|
||
border-radius: px2rem(38);
|
||
line-height: px2rem(76);
|
||
text-align: center;
|
||
color: white;
|
||
margin-top: px2rem(90);
|
||
}
|
||
}
|
||
}
|
||
|
||
@media screen and (max-height:603px) {
|
||
.summon-area .restrain{
|
||
margin-bottom: px2rem(18);
|
||
}
|
||
.summon-area .confitm-btn{
|
||
margin-top: px2rem(26);
|
||
}
|
||
.summon-area .select-num .ipt-wrap p{
|
||
bottom: px2rem(-12);
|
||
}
|
||
}
|
||
}
|
||
|
||
.no-in-app{
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
z-index: 99999;
|
||
background-color: white;
|
||
}
|
||
|
||
::-webkit-scrollbar{
|
||
display: none;
|
||
}
|
||
|
||
//解决当img src为空时出现空框，图裂的问题
|
||
img[src=""],img:not([src]){
|
||
opacity:0;
|
||
}
|
||
|
||
|