diff --git a/view/molistar/activity/ramadan/css/index.css b/view/molistar/activity/ramadan/css/index.css index b016cf75..6ff3213b 100644 --- a/view/molistar/activity/ramadan/css/index.css +++ b/view/molistar/activity/ramadan/css/index.css @@ -87,7 +87,7 @@ body { box-sizing: border-box; padding: 0 0.13333rem 0 0.04rem; overflow: hidden; - margin-bottom: 0.66667rem; + margin-bottom: 0.4rem; } .header .danmu #my_container .my_container_in img { @@ -108,11 +108,89 @@ body { font-weight: 500; } +.header .ramadanBlessings { + width: 10rem; + height: 3.73333rem; + background: url(../images/page2_dmBg.png) no-repeat; + background-size: 100% 100%; + position: relative; + margin: -0.8rem auto 0; +} + +.header .ramadanBlessings .title { + width: 5.33333rem; + height: 1.36rem; + line-height: 1.36rem; + text-align: center; + color: #FFED26; + font-size: 0.42667rem; + font-weight: 600; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: -0.4rem; + background: url(../images/page2Title.png) no-repeat; + background-size: 100% 100%; +} + +.header .ramadanBlessings input { + width: 6.48rem; + height: 0.82667rem; + line-height: 0.82667rem; + border: 0.02667rem solid #2A823C; + border-radius: 0.17333rem; + outline: none; + background: #003A22; + color: #FFED26; + font-size: 0.37333rem; + font-weight: 600; + box-sizing: border-box; + padding: 0 0.26667rem; + position: absolute; + left: 0.93333rem; + top: 1.2rem; +} + +.header .ramadanBlessings input::placeholder { + color: #FFED26; + font-size: 0.37333rem; + font-weight: 400; +} + +.header .ramadanBlessings .send { + width: 1.6rem; + height: 0.8rem; + background: url(../images/send.png) no-repeat; + background-size: 100% 100%; + text-align: center; + line-height: 0.8rem; + font-size: 0.37333rem; + color: #140600; + font-weight: 600; + position: absolute; + top: 1.21333rem; + right: 0.8rem; +} + +.header .ramadanBlessings p { + width: 7.37333rem; + height: 0.69333rem; + line-height: 0.45333rem; + color: #FFED26; + font-size: 0.32rem; + font-weight: 400; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 0.8rem; + text-align: center; +} + .header .tab { width: 9.62667rem; height: 1.22667rem; text-align: center; - margin: 9rem auto 0; + margin: 0.4rem auto 0; display: flex; justify-content: space-around; } @@ -149,7 +227,7 @@ body { .page1 { width: 100%; position: relative; - margin: -3.46667rem auto 0; + margin: 0 auto 0; } .page1 .lanternBox { @@ -1194,78 +1272,6 @@ body { margin: 0 auto 0rem; } -.page22 .tip { - display: none; - position: fixed; - left: 0; - top: 0; - bottom: 0; - right: 0; - z-index: 99; - background: rgba(0, 0, 0, 0.5); -} - -.page22 .tip .tip_in { - width: 9.18667rem; - height: 4.85333rem; - background: linear-gradient(90deg, #066A43, #00482B); - border-radius: 0.4rem; - border: 0.02667rem solid #FFED26; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); -} - -.page22 .tip .tip_in .title { - width: 100%; - text-align: center; - color: #FFED26; - font-size: 0.42667rem; - font-weight: 600; - margin: 0.70667rem auto 0.42667rem; -} - -.page22 .tip .tip_in p { - width: 7.70667rem; - min-height: 0.81333rem; - margin: 0 auto; - color: #FFED26; - font-size: 0.37333rem; - font-weight: 600; - line-height: 0.45333rem; -} - -.page22 .tip .tip_in .close { - width: 3.54667rem; - height: 1.01333rem; - text-align: center; - line-height: 1.01333rem; - color: #140600; - font-size: 0.37333rem; - font-weight: 600; - background: url(../images/page2_pubBut.png) no-repeat; - background-size: 100% 100%; - position: absolute; - top: 3.2rem; - left: 0.57333rem; -} - -.page22 .tip .tip_in .ok { - width: 3.54667rem; - height: 1.01333rem; - text-align: center; - line-height: 1.01333rem; - color: #140600; - font-size: 0.37333rem; - font-weight: 600; - background: url(../images/page1PubBut.png) no-repeat; - background-size: 100% 100%; - position: absolute; - top: 3.2rem; - right: 0.57333rem; -} - .page22 .unfortunately { display: none; position: fixed; @@ -1474,6 +1480,7 @@ body { .page2 { display: none; + margin-top: 3.2rem; } .page2 .todayCoinsPool { @@ -2389,3 +2396,75 @@ body { .Turkiye .page1 .c .page1_2 .answering { width: 7.5rem; } + +.tip { + display: none; + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 99; + background: rgba(0, 0, 0, 0.5); +} + +.tip .tip_in { + width: 9.18667rem; + height: 4.85333rem; + background: linear-gradient(90deg, #066A43, #00482B); + border-radius: 0.4rem; + border: 0.02667rem solid #FFED26; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.tip .tip_in .title { + width: 100%; + text-align: center; + color: #FFED26; + font-size: 0.42667rem; + font-weight: 600; + margin: 0.70667rem auto 0.42667rem; +} + +.tip .tip_in p { + width: 7.70667rem; + min-height: 0.81333rem; + margin: 0 auto; + color: #FFED26; + font-size: 0.37333rem; + font-weight: 600; + line-height: 0.45333rem; +} + +.tip .tip_in .close { + width: 3.54667rem; + height: 1.01333rem; + text-align: center; + line-height: 1.01333rem; + color: #140600; + font-size: 0.37333rem; + font-weight: 600; + background: url(../images/page2_pubBut.png) no-repeat; + background-size: 100% 100%; + position: absolute; + top: 3.2rem; + left: 0.57333rem; +} + +.tip .tip_in .ok { + width: 3.54667rem; + height: 1.01333rem; + text-align: center; + line-height: 1.01333rem; + color: #140600; + font-size: 0.37333rem; + font-weight: 600; + background: url(../images/page1PubBut.png) no-repeat; + background-size: 100% 100%; + position: absolute; + top: 3.2rem; + right: 0.57333rem; +} diff --git a/view/molistar/activity/ramadan/css/index.scss b/view/molistar/activity/ramadan/css/index.scss index 0d76e059..f16550a4 100644 --- a/view/molistar/activity/ramadan/css/index.scss +++ b/view/molistar/activity/ramadan/css/index.scss @@ -90,7 +90,7 @@ body { box-sizing: border-box; padding: 0 px2rem(10) 0 px2rem(3); overflow: hidden; - margin-bottom: px2rem(50); + margin-bottom: px2rem(30); img { display: block; @@ -113,11 +113,89 @@ body { } } + .ramadanBlessings { + width: px2rem(750); + height: px2rem(280); + background: url(../images/page2_dmBg.png) no-repeat; + background-size: 100% 100%; + position: relative; + margin: -0.8rem auto 0; + + .title { + width: px2rem(400); + height: px2rem(102); + line-height: px2rem(102); + text-align: center; + color: #FFED26; + font-size: px2rem(32); + font-weight: 600; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(-30); + background: url(../images/page2Title.png) no-repeat; + background-size: 100% 100%; + } + + input { + width: px2rem(486); + height: px2rem(62); + line-height: px2rem(62); + border: px2rem(2) solid #2A823C; + border-radius: px2rem(13); + outline: none; + background: #003A22; + color: #FFED26; + font-size: px2rem(28); + font-weight: 600; + box-sizing: border-box; + padding: 0 px2rem(20); + position: absolute; + left: px2rem(70); + top: px2rem(90); + + &::placeholder { + color: #FFED26; + font-size: px2rem(28); + font-weight: 400; + } + } + + .send { + width: px2rem(120); + height: px2rem(60); + background: url(../images/send.png) no-repeat; + background-size: 100% 100%; + text-align: center; + line-height: px2rem(60); + font-size: px2rem(28); + color: #140600; + font-weight: 600; + position: absolute; + top: px2rem(91); + right: px2rem(60); + } + + p { + width: px2rem(553); + height: px2rem(52); + line-height: px2rem(34); + color: #FFED26; + font-size: px2rem(24); + font-weight: 400; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: px2rem(60); + text-align: center; + } + } + .tab { width: px2rem(722); height: px2rem(92); text-align: center; - margin: 9rem auto 0; + margin: 0.4rem auto 0; display: flex; justify-content: space-around; @@ -157,8 +235,8 @@ body { .page1 { width: 100%; position: relative; - margin: px2rem(-260) auto 0; - // display: none; + margin: 0 auto 0; + // display: none;px2rem(-260) .lanternBox { width: px2rem(750); @@ -1222,77 +1300,7 @@ body { } } - .tip { - display: none; - position: fixed; - left: 0; - top: 0; - bottom: 0; - right: 0; - z-index: 99; - background: rgba(0, 0, 0, .5); - .tip_in { - width: px2rem(689); - height: px2rem(364); - background: linear-gradient(90deg, #066A43, #00482B); - border-radius: px2rem(30); - border: px2rem(2) solid #FFED26; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - - .title { - width: 100%; - text-align: center; - color: #FFED26; - font-size: px2rem(32); - font-weight: 600; - margin: px2rem(53) auto px2rem(32); - } - - p { - width: px2rem(578); - min-height: px2rem(61); - margin: 0 auto; - color: #FFED26; - font-size: px2rem(28); - font-weight: 600; - line-height: px2rem(34); - } - - .close { - width: px2rem(266); - height: px2rem(76); - text-align: center; - line-height: px2rem(76); - color: #140600; - font-size: px2rem(28); - font-weight: 600; - background: url(../images/page2_pubBut.png) no-repeat; - background-size: 100% 100%; - position: absolute; - top: px2rem(240); - left: px2rem(43); - } - - .ok { - width: px2rem(266); - height: px2rem(76); - text-align: center; - line-height: px2rem(76); - color: #140600; - font-size: px2rem(28); - font-weight: 600; - background: url(../images/page1PubBut.png) no-repeat; - background-size: 100% 100%; - position: absolute; - top: px2rem(240); - right: px2rem(43); - } - } - } .unfortunately { display: none; @@ -1503,6 +1511,7 @@ body { .page2 { display: none; + margin-top: 3.2rem; .todayCoinsPool { width: px2rem(750); @@ -1713,6 +1722,7 @@ body { .page3_in1 { padding-top: px2rem(10); + .timeOutBox { width: px2rem(438); height: px2rem(90); @@ -2422,16 +2432,92 @@ body { background: url(../images/header-tr.png) no-repeat; background-size: 100% 100%; } - .header .tab div span{ + + .header .tab div span { width: 2.78667rem; } - .page2 .ramadanGifts .c .gifyBigBox .gift{ + + .page2 .ramadanGifts .c .gifyBigBox .gift { width: 21rem; - .giftBox{ + + .giftBox { margin-right: px2rem(90); } } - .page1 .c .page1_2 .answering{ + + .page1 .c .page1_2 .answering { width: 7.5rem; } +} + +.tip { + display: none; + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 99; + background: rgba(0, 0, 0, .5); + + .tip_in { + width: px2rem(689); + height: px2rem(364); + background: linear-gradient(90deg, #066A43, #00482B); + border-radius: px2rem(30); + border: px2rem(2) solid #FFED26; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + + .title { + width: 100%; + text-align: center; + color: #FFED26; + font-size: px2rem(32); + font-weight: 600; + margin: px2rem(53) auto px2rem(32); + } + + p { + width: px2rem(578); + min-height: px2rem(61); + margin: 0 auto; + color: #FFED26; + font-size: px2rem(28); + font-weight: 600; + line-height: px2rem(34); + } + + .close { + width: px2rem(266); + height: px2rem(76); + text-align: center; + line-height: px2rem(76); + color: #140600; + font-size: px2rem(28); + font-weight: 600; + background: url(../images/page2_pubBut.png) no-repeat; + background-size: 100% 100%; + position: absolute; + top: px2rem(240); + left: px2rem(43); + } + + .ok { + width: px2rem(266); + height: px2rem(76); + text-align: center; + line-height: px2rem(76); + color: #140600; + font-size: px2rem(28); + font-weight: 600; + background: url(../images/page1PubBut.png) no-repeat; + background-size: 100% 100%; + position: absolute; + top: px2rem(240); + right: px2rem(43); + } + } } \ No newline at end of file diff --git a/view/molistar/activity/ramadan/index.html b/view/molistar/activity/ramadan/index.html index 7a388b22..48bcab57 100644 --- a/view/molistar/activity/ramadan/index.html +++ b/view/molistar/activity/ramadan/index.html @@ -20,7 +20,7 @@
- - + +