1493 lines
46 KiB
SCSS
1493 lines
46 KiB
SCSS
@function px2rem($px, $rem: 75) {
|
|
@return $px / $rem+rem;
|
|
}
|
|
|
|
// @function prefixurl() {
|
|
// @return 'https://img.pekolive.com/'
|
|
// }
|
|
|
|
@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');
|
|
}
|
|
|
|
html,
|
|
body {
|
|
font-family: 'din-medium';
|
|
background: #E17E3D;
|
|
// 海浪svga过长
|
|
overflow-x: hidden;
|
|
// height: 19rem;
|
|
&::-webkit-scrollbar{
|
|
display: none;
|
|
}
|
|
}
|
|
.back {
|
|
position: fixed;
|
|
top: px2rem(70, );
|
|
left: px2rem(34, );
|
|
z-index: 9;
|
|
width: px2rem(62, );
|
|
height: px2rem(62, );
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.wrap {
|
|
width: 100%;
|
|
height: 100vh;
|
|
// background: url('../images/index-bg.png') no-repeat center/cover;
|
|
position: relative;
|
|
|
|
.banner {
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
.subtitle {
|
|
position: absolute;
|
|
top: px2rem(9, );
|
|
right: px2rem(84, );
|
|
width: px2rem(140, );
|
|
height: px2rem(84, );
|
|
}
|
|
}
|
|
|
|
.rule,
|
|
.record {
|
|
position: fixed;
|
|
top: px2rem(160);
|
|
// bottom: px2rem(1100);
|
|
left: 0;
|
|
z-index: 99;
|
|
width: px2rem(118);
|
|
height: px2rem(40);
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.record {
|
|
top: px2rem(214);
|
|
// bottom: px2rem(1040);
|
|
}
|
|
|
|
// 往轮结果
|
|
.previous_Round_Result {
|
|
width: px2rem(707, );
|
|
height: px2rem(114, );
|
|
position: absolute;
|
|
top: 16.1rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: url(../images/previous_Round_Result.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 9;
|
|
|
|
span {
|
|
color: #fff;
|
|
position: absolute;
|
|
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;
|
|
font-size: px2rem(36, );
|
|
left: px2rem(0, );
|
|
bottom: 1.65rem;
|
|
background: url(../images/wljg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
width: px2rem(128, );
|
|
height: px2rem(38, );
|
|
position: absolute;
|
|
}
|
|
|
|
.box {
|
|
width: px2rem(707, );
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
box-sizing: border-box;
|
|
padding: px2rem(19, ) px2rem(10, ) 0 px2rem(10, );
|
|
overflow-x: scroll;
|
|
|
|
&::-webkit-scrollbar {
|
|
// width: 0;
|
|
height: 2px;
|
|
display: none;
|
|
}
|
|
|
|
ul {
|
|
width: 35rem;
|
|
height: 100%;
|
|
|
|
li {
|
|
float: left;
|
|
width: px2rem(122, );
|
|
height: px2rem(73, );
|
|
background: url(../images/previous_Round_Result_Li.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
margin-right: px2rem(8, );
|
|
// padding: 0 px2rem(4, );
|
|
|
|
p {
|
|
display: block;
|
|
width: px2rem(25, );
|
|
height: px2rem(25, );
|
|
background: url(../images/record_bubble.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
margin: 0 px2rem(2, );
|
|
|
|
img {
|
|
display: block;
|
|
width: 80%;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// .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') 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') 0 0/100% 100%;
|
|
|
|
// // &:nth-child(11){
|
|
// // width: px2rem(40, );
|
|
// // height: px2rem(42, );
|
|
// // margin-left: 0.25rem;
|
|
// // background: url('../images/btn_result.png') 0 0/100% 100%;
|
|
// // }
|
|
// img {
|
|
// width: 100%;
|
|
// }
|
|
// }
|
|
|
|
// }
|
|
|
|
// .more-result {
|
|
// width: px2rem(42);
|
|
// height: px2rem(44);
|
|
// margin-left: 0.2rem;
|
|
|
|
// img {
|
|
// width: 100%;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
.mall {
|
|
position: absolute;
|
|
top: px2rem(184);
|
|
// bottom: px2rem(1020);
|
|
right: 0;
|
|
z-index: 99;
|
|
width: px2rem(142);
|
|
height: px2rem(134);
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.game-area {
|
|
position: absolute;
|
|
top: px2rem(274);
|
|
z-index: 9;
|
|
width: 100%;
|
|
height: px2rem(1054);
|
|
background: url('../images/game-area.png') no-repeat 0 0/100% 100%;
|
|
|
|
.roundId {
|
|
font-size: px2rem(20, );
|
|
color: #701800;
|
|
position: absolute;
|
|
top: px2rem(12, );
|
|
left: px2rem(35, );
|
|
}
|
|
|
|
// 等待倒计时30s
|
|
.select-time {
|
|
display: none;
|
|
|
|
.count-down,
|
|
.current-tip {
|
|
font-family: 'pingfang-bold';
|
|
position: absolute;
|
|
top: px2rem(-40);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
// width: px2rem(322);
|
|
width: 5.45rem;
|
|
height: px2rem(72);
|
|
line-height: px2rem(62);
|
|
background: url('../images/count-down.png') no-repeat 0 0/100% 100%;
|
|
text-align: center;
|
|
font-size: px2rem(24);
|
|
font-weight: bold;
|
|
color: #B82F1A;
|
|
}
|
|
|
|
.current-tip {
|
|
top: px2rem(50);
|
|
width: px2rem(368);
|
|
height: px2rem(68);
|
|
line-height: px2rem(68);
|
|
background: url('../images/tip.png') no-repeat 0 0/100% 100%;
|
|
font-size: px2rem(22);
|
|
color: #F0C799;
|
|
}
|
|
|
|
// 海鲜列表
|
|
ul {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
// justify-content: space-between;
|
|
padding-left: px2rem(47);
|
|
|
|
li {
|
|
transition: all, 0.2s;
|
|
position: relative;
|
|
z-index: 99;
|
|
width: px2rem(138);
|
|
height: px2rem(148);
|
|
margin-top: px2rem(130);
|
|
margin-right: px2rem(32);
|
|
background: url('../images/bubble-bg.png') no-repeat 0 0/100% 100%;
|
|
|
|
&:nth-child(-n+4) {
|
|
margin-top: px2rem(80);
|
|
}
|
|
|
|
img {
|
|
width: px2rem(120);
|
|
height: px2rem(120);
|
|
transform: translate(px2rem(8), px2rem(-26));
|
|
}
|
|
|
|
.multiple {
|
|
position: absolute;
|
|
bottom: px2rem(20);
|
|
left: px2rem(-10);
|
|
width: px2rem(64);
|
|
height: px2rem(28);
|
|
line-height: px2rem(28);
|
|
text-align: center;
|
|
background: url('../images/multiple-bg.png') no-repeat 0 0/100% 100%;
|
|
font-size: px2rem(20);
|
|
font-weight: bold;
|
|
color: white;
|
|
}
|
|
|
|
.name {
|
|
position: absolute;
|
|
bottom: px2rem(-40);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
min-width: px2rem(160);
|
|
padding: px2rem(8);
|
|
box-sizing: border-box;
|
|
width: px2rem(136);
|
|
height: px2rem(58);
|
|
background: url('../images/name-bg.png') no-repeat 0 0/100% 100%;
|
|
text-align: center;
|
|
font-size: px2rem(25);
|
|
font-weight: bold;
|
|
color: white;
|
|
line-height: 0.6rem;
|
|
|
|
&.general {
|
|
height: px2rem(46);
|
|
line-height: px2rem(30);
|
|
background: url('../images/name-general-bg.png') no-repeat 0 0/100% 100%;
|
|
}
|
|
|
|
.gift-price {
|
|
font-size: px2rem(18);
|
|
padding-top: px2rem(4);
|
|
}
|
|
}
|
|
|
|
.bubble-2s {
|
|
display: none;
|
|
// width: px2rem(92);
|
|
// height: px2rem(56);
|
|
width: px2rem(132);
|
|
height: px2rem(74);
|
|
position: absolute;
|
|
top: px2rem(-72);
|
|
left: px2rem(-28);
|
|
background: url('../images/qipao-2s.png') no-repeat 0 0/100% 100%;
|
|
transform: rotate(343deg);
|
|
text-indent: px2rem(16);
|
|
|
|
p {
|
|
font-size: px2rem(18);
|
|
color: white;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin-left: px2rem(-20);
|
|
|
|
&.first-line {
|
|
padding-top: px2rem(10);
|
|
}
|
|
|
|
&.second-line {
|
|
padding-top: px2rem(4);
|
|
}
|
|
}
|
|
}
|
|
|
|
.select-num {
|
|
// display: none;
|
|
position: absolute;
|
|
top: px2rem(-6);
|
|
right: px2rem(-4);
|
|
font-size: px2rem(24);
|
|
font-weight: bold;
|
|
color: #fff;
|
|
// text-shadow: 1px 1px #FF5C7F, -1px -1px #FF5C7F ;
|
|
text-shadow: 1px 1px 0px#ff622b,
|
|
-1px -1px 0px#ff622b,
|
|
1px 1px 0px#ff622b,
|
|
-1px -1px 0px#ff622b,
|
|
1px 1px 0px#ff622b,
|
|
-1px -1px 0px#ff622b;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 碎片按钮
|
|
.btn-wrap {
|
|
display: flex;
|
|
// justify-content: space-between;
|
|
align-items: center;
|
|
width: px2rem(710);
|
|
height: px2rem(126);
|
|
margin: px2rem(140) auto 0;
|
|
background: url('../images/btn-wrap-bg.png') no-repeat 0 0/100% 100%;
|
|
|
|
div {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: px2rem(190);
|
|
height: px2rem(80);
|
|
background: url('../images/fragment-btn.png') no-repeat 0 0/100% 100%;
|
|
line-height: px2rem(80);
|
|
font-size: px2rem(30);
|
|
color: #975B25;
|
|
|
|
&.active {
|
|
background-image: url('../images/fragment-btn-active.png');
|
|
color: #B33E17;
|
|
}
|
|
|
|
&:first-child {
|
|
margin-left: px2rem(60);
|
|
}
|
|
|
|
&:last-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
margin: 0 px2rem(12);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 架子
|
|
.shelf {
|
|
width: px2rem(710);
|
|
height: px2rem(100);
|
|
position: absolute;
|
|
top: px2rem(440);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
&:last-child {
|
|
top: px2rem(720);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 等待结果5s
|
|
.wait-time {
|
|
display: none;
|
|
width: px2rem(750);
|
|
height: px2rem(600);
|
|
margin: auto;
|
|
position: relative;
|
|
|
|
.count-down,
|
|
.current-tip {
|
|
font-family: 'pingfang-bold';
|
|
position: absolute;
|
|
top: px2rem(-40);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: px2rem(322);
|
|
height: px2rem(72);
|
|
line-height: px2rem(62);
|
|
background: url('../images/count-down.png') no-repeat 0 0/100% 100%;
|
|
text-align: center;
|
|
color: #B82F1A;
|
|
font-size: px2rem(24);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.current-tip {
|
|
top: px2rem(50);
|
|
width: px2rem(368);
|
|
height: px2rem(68);
|
|
line-height: px2rem(68);
|
|
background: url('../images/tip.png') no-repeat 0 0/100% 100%;
|
|
text-align: center;
|
|
font-size: px2rem(22);
|
|
color: #FFF0C799;
|
|
font-weight: bold;
|
|
}
|
|
|
|
}
|
|
|
|
// 动画上
|
|
.wait-time-s {
|
|
width: px2rem(750, );
|
|
height: px2rem(680, );
|
|
position: absolute;
|
|
top: 1.5rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 5;
|
|
}
|
|
|
|
// 动画下
|
|
.wait-time-x {
|
|
width: px2rem(750, );
|
|
height: px2rem(680, );
|
|
position: absolute;
|
|
top: 1.4rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
// 开奖时间
|
|
.draw-time {
|
|
display: none;
|
|
// width: px2rem(750);
|
|
// height: px2rem(600);
|
|
// width: px2rem(210, );
|
|
width: 55%;
|
|
height: px2rem(213, );
|
|
margin: 1.8rem auto 0.2rem;
|
|
// background: url('../images/drawBg.png');
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-flow: row wrap;
|
|
box-sizing: border-box;
|
|
|
|
.count-down,
|
|
.current-tip {
|
|
font-family: 'pingfang-bold';
|
|
position: absolute;
|
|
top: px2rem(-40);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: px2rem(322);
|
|
height: px2rem(72);
|
|
line-height: px2rem(62);
|
|
background: url('../images/count-down.png') no-repeat 0 0/100% 100%;
|
|
text-align: center;
|
|
font-size: px2rem(24);
|
|
color: #B82F1A;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.current-tip {
|
|
top: px2rem(50);
|
|
width: px2rem(368);
|
|
height: px2rem(68);
|
|
line-height: px2rem(68);
|
|
background: url('../images/tip.png') no-repeat 0 0/100% 100%;
|
|
font-size: px2rem(22);
|
|
color: #F0C799;
|
|
}
|
|
|
|
.top-three {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 2.3rem;
|
|
width: 100%;
|
|
height: 4rem;
|
|
|
|
.top-three-title {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: 'pingfang-bold';
|
|
font-size: px2rem(24);
|
|
font-weight: bold;
|
|
color: white;
|
|
margin-bottom: px2rem(18);
|
|
|
|
.line {
|
|
width: px2rem(50);
|
|
border: px2rem(1) solid white;
|
|
}
|
|
}
|
|
|
|
.top-three-list {
|
|
// display: flex;
|
|
// justify-content: space-between;
|
|
// width: px2rem(340);
|
|
// margin: auto;
|
|
position: relative;
|
|
|
|
.no1 {
|
|
width: px2rem(188);
|
|
height: px2rem(168);
|
|
background: linear-gradient(0deg, #FFD871 0%, #FFA352 81%);
|
|
border-radius: px2rem(18, );
|
|
position: relative;
|
|
top: 1.3rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
.tx {
|
|
width: px2rem(130, );
|
|
height: px2rem(130, );
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: -0.9rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
}
|
|
|
|
.txBox {
|
|
width: px2rem(131, );
|
|
height: px2rem(170, );
|
|
position: absolute;
|
|
top: -1.41rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.nick {
|
|
width: 100%;
|
|
height: 1rem;
|
|
line-height: 0.6rem;
|
|
font-size: px2rem(22, );
|
|
color: #fff;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: px2rem(85, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis; //溢出显示省略号
|
|
}
|
|
|
|
.num {
|
|
width: 100%;
|
|
height: 0.4rem;
|
|
position: absolute;
|
|
bottom: 0.15rem;
|
|
// display: flex;
|
|
// align-items: center;
|
|
// justify-content: center;
|
|
line-height: 0.35rem;
|
|
text-align: center;
|
|
|
|
.diamond {
|
|
width: px2rem(25, );
|
|
height: px2rem(25, );
|
|
}
|
|
|
|
span {
|
|
font-size: px2rem(22, );
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.no2 {
|
|
width: px2rem(162, );
|
|
height: px2rem(142, );
|
|
background: linear-gradient(0deg, #7DD5FF 0%, #5A8FFF 100%);
|
|
border-radius: px2rem(18, );
|
|
position: relative;
|
|
top: -0.55rem;
|
|
left: 1.15rem;
|
|
|
|
.tx {
|
|
width: px2rem(130, );
|
|
height: px2rem(130, );
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: -0.9rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
}
|
|
|
|
.txBox {
|
|
width: px2rem(131, );
|
|
height: px2rem(170, );
|
|
position: absolute;
|
|
top: -1.4rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.nick {
|
|
width: 100%;
|
|
height: 1rem;
|
|
line-height: 0.6rem;
|
|
font-size: px2rem(22, );
|
|
color: #fff;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: px2rem(70, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis; //溢出显示省略号
|
|
}
|
|
|
|
.num {
|
|
width: 100%;
|
|
height: px2rem(25, );
|
|
position: absolute;
|
|
bottom: 0.14rem;
|
|
text-align: center;
|
|
line-height: px2rem(25, );
|
|
|
|
.diamond {
|
|
width: px2rem(25, );
|
|
height: px2rem(25, );
|
|
}
|
|
|
|
span {
|
|
font-size: px2rem(22, );
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.no3 {
|
|
width: px2rem(162, );
|
|
height: px2rem(142, );
|
|
background: linear-gradient(0deg, #FFAE88 0%, #FC6CCF 81%);
|
|
border-radius: px2rem(18, );
|
|
position: relative;
|
|
position: relative;
|
|
top: -2.45rem;
|
|
left: 6.7rem;
|
|
|
|
.tx {
|
|
width: px2rem(130, );
|
|
height: px2rem(130, );
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: -0.9rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
}
|
|
|
|
.txBox {
|
|
width: px2rem(131, );
|
|
height: px2rem(170, );
|
|
position: absolute;
|
|
top: -1.44rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.nick {
|
|
width: 100%;
|
|
height: 1rem;
|
|
line-height: 0.6rem;
|
|
font-size: px2rem(22, );
|
|
color: #fff;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: px2rem(70, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis; //溢出显示省略号
|
|
}
|
|
|
|
.num {
|
|
width: 100%;
|
|
height: px2rem(25, );
|
|
position: absolute;
|
|
bottom: 0.14rem;
|
|
text-align: center;
|
|
line-height: px2rem(25, );
|
|
|
|
.diamond {
|
|
width: px2rem(25, );
|
|
height: px2rem(25, );
|
|
}
|
|
|
|
span {
|
|
font-size: px2rem(22, );
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.draw-pic {
|
|
z-index: 1;
|
|
width: px2rem(101, );
|
|
// width: 25%;
|
|
height: px2rem(101, );
|
|
margin: 0 auto 0;
|
|
background: url('../images/drawBg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
img {
|
|
width: px2rem(60, );
|
|
// margin: -0.3rem 0 0 1.18rem;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 45%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
// .draw-pic {
|
|
// position: absolute;
|
|
// left: 50%;
|
|
// transform: translateX(-50%);
|
|
// top: 1.65rem;
|
|
// z-index: 1;
|
|
// width: px2rem(100);
|
|
// background: url('../images/drawBg.png');
|
|
// // height: px2rem(91);
|
|
|
|
// img {
|
|
// width: 100%;
|
|
// // height: 100%;
|
|
// // margin: -0.3rem 0 0 1.18rem;
|
|
// }
|
|
// }
|
|
|
|
.award-info {
|
|
width: px2rem(600, );
|
|
// height: px2rem(183, );
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 7.2rem;
|
|
display: flex;
|
|
|
|
.desc {
|
|
color: #fff;
|
|
font-size: px2rem(28, );
|
|
font-weight: 600;
|
|
}
|
|
|
|
.diamond {
|
|
width: 0.35rem;
|
|
height: 0.35rem;
|
|
margin-left: 0.5rem;
|
|
margin-right: 0.1rem;
|
|
}
|
|
|
|
.award-wrap {
|
|
color: #FEEF60;
|
|
font-weight: 600;
|
|
font-size: px2rem(28, );
|
|
// .award-total {
|
|
// color: #FEEF60;
|
|
// }
|
|
}
|
|
}
|
|
|
|
.put-wrap {
|
|
width: px2rem(600, );
|
|
height: px2rem(183, );
|
|
// line-height: px2rem(183, );
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
// top: 3.8rem;
|
|
top: 4.5rem;
|
|
display: flex;
|
|
|
|
.put {
|
|
font-size: px2rem(28, );
|
|
color: #FFFFFF;
|
|
font-weight: 600;
|
|
margin-right: 0.4rem;
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
.list {
|
|
width: px2rem(504, );
|
|
height: px2rem(208, );
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.item {
|
|
width: px2rem(74, );
|
|
height: px2rem(90, );
|
|
margin-right: 0.92rem;
|
|
// position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
&:nth-child(4n) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
p {
|
|
width: px2rem(62, );
|
|
height: px2rem(62, );
|
|
background: url('../images/record_bubble.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.gift {
|
|
width: 75%;
|
|
margin-top: 0.1rem;
|
|
margin-left: 0.1rem;
|
|
}
|
|
}
|
|
|
|
div {
|
|
width: 100%;
|
|
height: px2rem(25, );
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.diamond {
|
|
width: 0.33rem;
|
|
height: 0.33rem;
|
|
}
|
|
|
|
.in {
|
|
font-size: px2rem(20, );
|
|
color: #FFFFFF;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
// 底部信息
|
|
.info-bottom {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 99;
|
|
width: 100%;
|
|
height: px2rem(130);
|
|
background: url('../images/index-bottom.png') no-repeat 0 0/100% 100%;
|
|
display: flex;
|
|
// justify-content: space-evenly;
|
|
align-items: center;
|
|
|
|
.info-wrap {
|
|
margin-top: px2rem(14);
|
|
|
|
.diamond-num,
|
|
.fragment-num {
|
|
// width: px2rem(250);
|
|
width: 4rem;
|
|
height: px2rem(42);
|
|
background-color: #BD7F38;
|
|
border-radius: px2rem(20);
|
|
line-height: px2rem(42);
|
|
font-size: px2rem(26);
|
|
font-weight: bold;
|
|
color: white;
|
|
text-indent: px2rem(10);
|
|
margin-bottom: px2rem(10);
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
width: px2rem(100);
|
|
height: px2rem(100);
|
|
margin-left: px2rem(42);
|
|
margin-right: px2rem(20);
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.add {
|
|
width: px2rem(41);
|
|
height: px2rem(41);
|
|
margin-top: px2rem(-48);
|
|
margin-left: px2rem(12);
|
|
}
|
|
|
|
.rank {
|
|
width: px2rem(170);
|
|
height: px2rem(54);
|
|
margin-left: px2rem(44);
|
|
}
|
|
}
|
|
|
|
// 规则弹窗
|
|
.shade-mask {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba($color: #000000, $alpha: 0.4);
|
|
|
|
.shade-content {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: px2rem(576);
|
|
height: px2rem(666);
|
|
background: url('../images/rule-bg.png') no-repeat 0 0/100% 100%;
|
|
// padding: px2rem(56) px2rem(54) px2rem(42) px2rem(40);
|
|
// box-sizing: border-box;
|
|
font-size: px2rem(26);
|
|
color: #B58147;
|
|
font-weight: 600;
|
|
overflow: hidden;
|
|
|
|
main {
|
|
position: absolute;
|
|
top: px2rem(60);
|
|
width: 100%;
|
|
height: 85%;
|
|
padding: 0 px2rem(42);
|
|
box-sizing: border-box;
|
|
overflow: auto;
|
|
|
|
div {
|
|
line-height: 1.2;
|
|
margin-top: 0.2rem;
|
|
|
|
.title {
|
|
width: px2rem(252);
|
|
height: px2rem(46);
|
|
line-height: px2rem(46);
|
|
background: url('../images/title-bg.png') no-repeat 0 0/100% 100%;
|
|
margin: 0 auto px2rem(22);
|
|
text-align: center;
|
|
}
|
|
|
|
.jietu {
|
|
width: px2rem(490);
|
|
height: px2rem(275);
|
|
margin-top: px2rem(12);
|
|
margin-bottom: px2rem(32);
|
|
|
|
&.t2 {
|
|
height: px2rem(299);
|
|
}
|
|
|
|
&.t3 {
|
|
// height: px2rem(301);
|
|
height: 4.2rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 今日排名弹窗
|
|
.shade-mask-rank {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba($color: #000000, $alpha: 0.6);
|
|
|
|
.shade-content-rank {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: px2rem(660);
|
|
height: px2rem(980);
|
|
background: white;
|
|
background: url(../images/myBoxBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.rank-top {
|
|
height: px2rem(340);
|
|
// background-image: linear-gradient(#F49C35, #FFDD81);
|
|
overflow: hidden;
|
|
|
|
.tab-wrap {
|
|
font-family: 'pingfang-regular';
|
|
width: px2rem(440);
|
|
height: px2rem(70);
|
|
background-color: rgba($color: #fff, $alpha: .3);
|
|
border-radius: px2rem(36);
|
|
margin: px2rem(20) auto px2rem(6);
|
|
display: flex;
|
|
overflow: hidden;
|
|
padding: px2rem(5, );
|
|
box-sizing: border-box;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
display: inline-block;
|
|
// width: px2rem(210, );
|
|
width: 50%;
|
|
height: px2rem(60);
|
|
line-height: px2rem(60);
|
|
text-align: center;
|
|
font-size: px2rem(30);
|
|
color: white;
|
|
|
|
// &:first-child {
|
|
// margin-left: px2rem(14);
|
|
// }
|
|
}
|
|
|
|
.active {
|
|
background-color: white;
|
|
color: #F56801;
|
|
border-radius: px2rem(30);
|
|
}
|
|
}
|
|
|
|
.topthree-wrap {
|
|
position: relative;
|
|
|
|
.info-wrap {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
|
|
&:first-child {
|
|
width: px2rem(132);
|
|
// height: px2rem(175);
|
|
// margin-top: px2rem(86);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
.diamond-num {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
width: px2rem(194);
|
|
height: px2rem(188);
|
|
margin-bottom: px2rem(20);
|
|
|
|
p {
|
|
position: relative;
|
|
z-index: 99;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url('../images/first.png') no-repeat 0 0/100% 100%;
|
|
}
|
|
|
|
img {
|
|
position: relative;
|
|
z-index: 9;
|
|
top: px2rem(-160);
|
|
// left: px2rem(2);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: px2rem(128);
|
|
height: px2rem(128);
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.nick,
|
|
.diamond-num {
|
|
width: px2rem(360);
|
|
text-align: center;
|
|
font-size: px2rem(30);
|
|
font-weight: bold;
|
|
color: white;
|
|
}
|
|
|
|
.diamond-num {
|
|
font-family: 'din-medium';
|
|
margin: 0;
|
|
margin-top: px2rem(-20);
|
|
margin-bottom: px2rem(4);
|
|
color: #fff;
|
|
font-size: px2rem(24);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.other-rank {
|
|
overflow: auto;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 7rem;
|
|
// background-color: white;
|
|
padding: px2rem(30) px2rem(20) 0;
|
|
box-sizing: border-box;
|
|
margin-top: 0.25rem;
|
|
|
|
li {
|
|
width: 90%;
|
|
display: flex;
|
|
align-items: center;
|
|
// margin-bottom: px2rem(40);
|
|
margin: 0 auto px2rem(40, );
|
|
|
|
&:last-child {
|
|
// margin-bottom: px2rem(140);
|
|
}
|
|
|
|
.index {
|
|
display: inline-block;
|
|
width: px2rem(30);
|
|
font-size: px2rem(30);
|
|
font-weight: bold;
|
|
color: #333;
|
|
text-align: center;
|
|
}
|
|
|
|
.others-info {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: px2rem(20);
|
|
|
|
img {
|
|
width: px2rem(100);
|
|
height: px2rem(100);
|
|
border-radius: 50%;
|
|
margin-right: px2rem(20);
|
|
}
|
|
|
|
.others-nick {
|
|
font-size: px2rem(28);
|
|
font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.others-diamond-num {
|
|
font-size: px2rem(26);
|
|
font-weight: bold;
|
|
color: #FF7700;
|
|
|
|
b {
|
|
color: #FF5110;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mine {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
width: 100%;
|
|
height: px2rem(100);
|
|
// background-color: rgba($color: #000000, $alpha: .8);
|
|
background: url(../images/mineBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 0 0.7rem 0 0.2rem;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.mine-rank {
|
|
font-size: px2rem(26);
|
|
font-weight: bold;
|
|
color: white;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mine-info {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
|
|
img {
|
|
width: px2rem(80);
|
|
height: px2rem(80);
|
|
border-radius: 50%;
|
|
margin-left: px2rem(30);
|
|
margin-right: px2rem(40);
|
|
}
|
|
|
|
.mine-nick {
|
|
font-size: px2rem(28);
|
|
font-weight: bold;
|
|
color: white;
|
|
overflow: hidden; //超出隐藏
|
|
white-space: nowrap; //不折行
|
|
text-overflow: ellipsis;
|
|
width: 3.5rem;
|
|
}
|
|
}
|
|
|
|
.mine-diamond-num {
|
|
font-size: px2rem(26);
|
|
font-weight: bold;
|
|
color: #fff;
|
|
white-space: nowrap;
|
|
|
|
b {
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 碎片不足弹窗
|
|
.shade-mask-fragmentNum {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba($color: #000000, $alpha: 0.6);
|
|
|
|
.shade-content-fragmentNum {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: px2rem(600);
|
|
height: px2rem(600);
|
|
background: white;
|
|
border-radius: px2rem(24);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.fragmentNum-title {
|
|
font-size: px2rem(36);
|
|
font-weight: bold;
|
|
color: #333333;
|
|
margin-top: px2rem(38);
|
|
}
|
|
|
|
img {
|
|
width: px2rem(120);
|
|
width: px2rem(120);
|
|
margin-top: px2rem(108);
|
|
}
|
|
|
|
p {
|
|
font-size: px2rem(30);
|
|
font-weight: 600;
|
|
color: #333333;
|
|
margin-top: px2rem(50);
|
|
}
|
|
|
|
.fragmentNum-btn-wrap {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: px2rem(512);
|
|
height: px2rem(76);
|
|
margin-top: px2rem(90);
|
|
|
|
.cancel-btn,
|
|
.confirm-btn {
|
|
width: px2rem(240);
|
|
height: px2rem(76);
|
|
line-height: px2rem(76);
|
|
text-align: center;
|
|
border-radius: px2rem(38);
|
|
font-size: px2rem(28);
|
|
font-weight: 600;
|
|
background-color: #EAE5FC;
|
|
color: #7154EE;
|
|
}
|
|
|
|
.confirm-btn {
|
|
background-color: #735FFE;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.no-in-app {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 99999;
|
|
background-color: white;
|
|
}
|
|
|
|
|
|
.bottom {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 99;
|
|
width: 100%;
|
|
height: px2rem(130);
|
|
background: url('../images/bottom.png') no-repeat 0 0/100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&.mb-long {
|
|
margin-bottom: px2rem(68);
|
|
}
|
|
|
|
.avatar {
|
|
width: px2rem(100);
|
|
height: px2rem(100);
|
|
margin-left: px2rem(42);
|
|
margin-right: px2rem(20);
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.info-wrap {
|
|
flex: 1;
|
|
margin-top: px2rem(14);
|
|
|
|
.fragment-num,
|
|
.diamond-num {
|
|
width: px2rem(250);
|
|
height: px2rem(42);
|
|
background-color: #BD7F38;
|
|
border-radius: px2rem(20);
|
|
line-height: px2rem(42);
|
|
font-size: px2rem(26);
|
|
font-weight: bold;
|
|
color: white;
|
|
text-indent: px2rem(10);
|
|
margin-bottom: px2rem(10);
|
|
}
|
|
}
|
|
|
|
.add {
|
|
width: px2rem(41);
|
|
height: px2rem(41);
|
|
margin-top: px2rem(-48);
|
|
margin-right: px2rem(70);
|
|
}
|
|
|
|
.recharge {
|
|
width: px2rem(144);
|
|
height: px2rem(62);
|
|
margin-right: px2rem(74);
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
} |