diff --git a/view/peko/activity/act-ocean/css/index.css b/view/peko/activity/act-ocean/css/index.css index a5e3900..54ac13c 100644 --- a/view/peko/activity/act-ocean/css/index.css +++ b/view/peko/activity/act-ocean/css/index.css @@ -1,17 +1,16 @@ @font-face { - font-family: 'pingfang-bold'; + 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'; + 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'; +html, +body { + font-family: "din-medium"; background: #C8864C; overflow-x: hidden; } @@ -21,36 +20,33 @@ html, body { height: 100vh; position: relative; } - .wrap .banner { width: 100%; } - -.wrap .rule, .wrap .record { +.wrap .rule, +.wrap .record { position: fixed; - top: 2.13333rem; + top: 2.1333333333rem; left: 0; z-index: 99; - width: 1.57333rem; - height: 0.53333rem; + width: 1.5733333333rem; + height: 0.5333333333rem; } - -.wrap .rule img, .wrap .record img { +.wrap .rule img, +.wrap .record img { width: 100%; } - .wrap .record { - top: 2.85333rem; + top: 2.8533333333rem; } - .wrap .previous-result { position: absolute; - top: 14.93333rem; + top: 14.9333333333rem; left: 50%; transform: translateX(-50%); - width: 9.46667rem; - height: 0.90667rem; - font-family: 'pingfang-bold'; + width: 9.4666666667rem; + height: 0.9066666667rem; + font-family: "pingfang-bold"; font-size: 0.4rem; font-weight: bold; color: white; @@ -59,236 +55,205 @@ html, body { background: url("../images/previous-result-bg.png") no-repeat 0 0/100% 100%; z-index: 9; } - .wrap .previous-result span { font-weight: bold; margin-left: 0.36rem; 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; } - .wrap .previous-result .result-list { display: flex; } - .wrap .previous-result .result-list p { - width: 0.53333rem; - height: 0.53333rem; - margin-left: 0.10667rem; + width: 0.5333333333rem; + height: 0.5333333333rem; + margin-left: 0.1066666667rem; background: url("../images/little-bubble.png") 0 0/100% 100%; } - .wrap .previous-result .result-list p img { width: 100%; } - .wrap .mall { position: absolute; - top: 2.45333rem; + top: 2.4533333333rem; right: 0; z-index: 99; - width: 1.89333rem; - height: 1.78667rem; + width: 1.8933333333rem; + height: 1.7866666667rem; } - .wrap .mall img { width: 100%; } - .wrap .game-area { position: absolute; - top: 3.65333rem; + top: 3.6533333333rem; z-index: 9; width: 100%; - height: 14.05333rem; + height: 14.0533333333rem; background: url("../images/game-area.png") no-repeat 0 0/100% 100%; } - .wrap .game-area .select-time { display: none; } - -.wrap .game-area .select-time .count-down, .wrap .game-area .select-time .current-tip { - font-family: 'pingfang-bold'; +.wrap .game-area .select-time .count-down, +.wrap .game-area .select-time .current-tip { + font-family: "pingfang-bold"; position: absolute; - top: -0.53333rem; + top: -0.5333333333rem; left: 50%; transform: translateX(-50%); - width: 4.29333rem; + width: 4.2933333333rem; height: 0.96rem; - line-height: 0.82667rem; + line-height: 0.8266666667rem; background: url("../images/count-down.png") no-repeat 0 0/100% 100%; text-align: center; font-size: 0.32rem; font-weight: bold; color: #B82F1A; } - .wrap .game-area .select-time .current-tip { - top: 0.66667rem; - width: 4.90667rem; - height: 0.90667rem; - line-height: 0.90667rem; + top: 0.6666666667rem; + width: 4.9066666667rem; + height: 0.9066666667rem; + line-height: 0.9066666667rem; background: url("../images/tip.png") no-repeat 0 0/100% 100%; - font-size: 0.29333rem; + font-size: 0.2933333333rem; color: #F0C799; } - .wrap .game-area .select-time ul { display: flex; flex-wrap: wrap; - padding-left: 0.62667rem; + padding-left: 0.6266666667rem; } - .wrap .game-area .select-time ul li { position: relative; z-index: 99; width: 1.84rem; - height: 1.97333rem; - margin-top: 1.73333rem; - margin-right: 0.42667rem; + height: 1.9733333333rem; + margin-top: 1.7333333333rem; + margin-right: 0.4266666667rem; background: url("../images/bubble-bg.png") no-repeat 0 0/100% 100%; } - .wrap .game-area .select-time ul li:nth-child(-n+4) { - margin-top: 1.06667rem; + margin-top: 1.0666666667rem; } - .wrap .game-area .select-time ul li img { width: 1.6rem; height: 1.6rem; - transform: translate(0.10667rem, -0.34667rem); + transform: translate(0.1066666667rem, -0.3466666667rem); } - .wrap .game-area .select-time ul li .multiple { position: absolute; - bottom: 0.26667rem; - left: -0.13333rem; - width: 0.85333rem; - height: 0.37333rem; - line-height: 0.37333rem; + bottom: 0.2666666667rem; + left: -0.1333333333rem; + width: 0.8533333333rem; + height: 0.3733333333rem; + line-height: 0.3733333333rem; text-align: center; background: url("../images/multiple-bg.png") no-repeat 0 0/100% 100%; - font-size: 0.26667rem; + font-size: 0.2666666667rem; font-weight: bold; color: white; } - .wrap .game-area .select-time ul li .name { position: absolute; - bottom: -0.53333rem; + bottom: -0.5333333333rem; left: 50%; transform: translateX(-50%); - min-width: 2.13333rem; - padding: 0.10667rem; + min-width: 2.1333333333rem; + padding: 0.1066666667rem; box-sizing: border-box; - width: 1.81333rem; - height: 0.77333rem; + width: 1.8133333333rem; + height: 0.7733333333rem; background: url("../images/name-bg.png") no-repeat 0 0/100% 100%; text-align: center; - font-size: 0.26667rem; + font-size: 0.2666666667rem; font-weight: bold; color: white; } - .wrap .game-area .select-time ul li .name.general { - height: 0.61333rem; + height: 0.6133333333rem; line-height: 0.4rem; background: url("../images/name-general-bg.png") no-repeat 0 0/100% 100%; } - .wrap .game-area .select-time ul li .name .gift-price { font-size: 0.24rem; - padding-top: 0.05333rem; + padding-top: 0.0533333333rem; } - .wrap .game-area .select-time ul li .bubble-2s { display: none; width: 1.76rem; - height: 0.98667rem; + height: 0.9866666667rem; position: absolute; top: -0.96rem; - left: -0.37333rem; + left: -0.3733333333rem; background: url("../images/qipao-2s.png") no-repeat 0 0/100% 100%; transform: rotate(343deg); - text-indent: 0.21333rem; + text-indent: 0.2133333333rem; } - .wrap .game-area .select-time ul li .bubble-2s p { font-size: 0.24rem; color: white; font-weight: bold; text-align: center; - margin-left: -0.26667rem; + margin-left: -0.2666666667rem; } - .wrap .game-area .select-time ul li .bubble-2s p.first-line { - padding-top: 0.13333rem; + padding-top: 0.1333333333rem; } - .wrap .game-area .select-time ul li .bubble-2s p.second-line { - padding-top: 0.05333rem; + padding-top: 0.0533333333rem; } - .wrap .game-area .select-time ul li .select-num { position: absolute; top: -0.08rem; - right: -0.05333rem; + right: -0.0533333333rem; font-size: 0.32rem; font-weight: bold; color: #fff; 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; } - .wrap .game-area .select-time .btn-wrap { display: flex; align-items: center; - width: 9.46667rem; + width: 9.4666666667rem; height: 1.68rem; - margin: 1.86667rem auto 0; + margin: 1.8666666667rem auto 0; background: url("../images/btn-wrap-bg.png") no-repeat 0 0/100% 100%; } - .wrap .game-area .select-time .btn-wrap div { display: flex; justify-content: center; - width: 2.53333rem; - height: 1.06667rem; + width: 2.5333333333rem; + height: 1.0666666667rem; background: url("../images/fragment-btn.png") no-repeat 0 0/100% 100%; - line-height: 1.06667rem; + line-height: 1.0666666667rem; font-size: 0.4rem; color: #975B25; } - .wrap .game-area .select-time .btn-wrap div.active { background-image: url("../images/fragment-btn-active.png"); color: #B33E17; } - .wrap .game-area .select-time .btn-wrap div:first-child { margin-left: 0.8rem; } - .wrap .game-area .select-time .btn-wrap div:last-child { margin-left: 0; } - .wrap .game-area .select-time .btn-wrap div:nth-child(2) { margin: 0 0.16rem; } - .wrap .game-area .select-time .shelf { - width: 9.46667rem; - height: 1.33333rem; + width: 9.4666666667rem; + height: 1.3333333333rem; position: absolute; - top: 5.86667rem; + top: 5.8666666667rem; left: 50%; transform: translateX(-50%); } - .wrap .game-area .select-time .shelf:last-child { top: 9.6rem; } - .wrap .game-area .wait-time { display: none; width: 10rem; @@ -296,67 +261,63 @@ html, body { margin: auto; position: relative; } - -.wrap .game-area .wait-time .count-down, .wrap .game-area .wait-time .current-tip { - font-family: 'pingfang-bold'; +.wrap .game-area .wait-time .count-down, +.wrap .game-area .wait-time .current-tip { + font-family: "pingfang-bold"; position: absolute; - top: -0.53333rem; + top: -0.5333333333rem; left: 50%; transform: translateX(-50%); - width: 4.29333rem; + width: 4.2933333333rem; height: 0.96rem; - line-height: 0.82667rem; + line-height: 0.8266666667rem; background: url("../images/count-down.png") no-repeat 0 0/100% 100%; text-align: center; color: #B82F1A; font-size: 0.32rem; font-weight: bold; } - .wrap .game-area .wait-time .current-tip { - top: 0.66667rem; - width: 4.90667rem; - height: 0.90667rem; - line-height: 0.90667rem; + top: 0.6666666667rem; + width: 4.9066666667rem; + height: 0.9066666667rem; + line-height: 0.9066666667rem; background: url("../images/tip.png") no-repeat 0 0/100% 100%; text-align: center; - font-size: 0.29333rem; + font-size: 0.2933333333rem; color: #FFF0C799; font-weight: bold; } - .wrap .game-area .draw-time { display: none; width: 10rem; height: 8rem; } - -.wrap .game-area .draw-time .count-down, .wrap .game-area .draw-time .current-tip { - font-family: 'pingfang-bold'; +.wrap .game-area .draw-time .count-down, +.wrap .game-area .draw-time .current-tip { + font-family: "pingfang-bold"; position: absolute; - top: -0.53333rem; + top: -0.5333333333rem; left: 50%; transform: translateX(-50%); - width: 4.29333rem; + width: 4.2933333333rem; height: 0.96rem; - line-height: 0.82667rem; + line-height: 0.8266666667rem; background: url("../images/count-down.png") no-repeat 0 0/100% 100%; text-align: center; font-size: 0.32rem; color: #B82F1A; font-weight: bold; } - .wrap .game-area .draw-time .current-tip { - top: 0.66667rem; - width: 4.90667rem; - height: 0.90667rem; - line-height: 0.90667rem; + top: 0.6666666667rem; + width: 4.9066666667rem; + height: 0.9066666667rem; + line-height: 0.9066666667rem; background: url("../images/tip.png") no-repeat 0 0/100% 100%; - font-size: 0.29333rem; + font-size: 0.2933333333rem; color: #F0C799; } - .wrap .game-area .draw-time .top-three { position: absolute; left: 50%; @@ -364,135 +325,117 @@ html, body { bottom: 3.2rem; width: 100%; } - .wrap .game-area .draw-time .top-three .top-three-title { display: flex; justify-content: center; align-items: center; - font-family: 'pingfang-bold'; + font-family: "pingfang-bold"; font-size: 0.32rem; font-weight: bold; color: white; margin-bottom: 0.24rem; } - .wrap .game-area .draw-time .top-three .top-three-title .line { - width: 0.66667rem; - border: 0.01333rem solid white; + width: 0.6666666667rem; + border: 0.0133333333rem solid white; } - .wrap .game-area .draw-time .top-three .top-three-list { display: flex; justify-content: space-between; - width: 4.53333rem; + width: 4.5333333333rem; margin: auto; } - .wrap .game-area .draw-time .top-three .top-three-list p { - width: 0.98667rem; - height: 0.98667rem; + width: 0.9866666667rem; + height: 0.9866666667rem; } - .wrap .game-area .draw-time .top-three .top-three-list p img { width: 100%; height: 100%; border-radius: 50%; - border: 0.02667rem solid #FEEF60; + border: 0.0266666667rem solid #FEEF60; } - .wrap .game-area .draw-time .draw-pic { position: absolute; left: 50%; transform: translateX(-50%); top: 1.92rem; z-index: 1; - width: 3.73333rem; - height: 3.73333rem; + width: 3.7333333333rem; + height: 3.7333333333rem; } - .wrap .game-area .draw-time .draw-pic img { width: 100%; height: 100%; } - .wrap .game-area .draw-time .award-info { position: absolute; top: 8rem; width: 100%; - font-family: 'pingfang-bold'; + font-family: "pingfang-bold"; text-align: center; font-size: 0.32rem; font-weight: bold; } - .wrap .game-area .draw-time .award-info .desc { color: #FEEF60; margin-bottom: 0.16rem; } - .wrap .game-area .draw-time .award-info .award-wrap { color: white; } - .wrap .game-area .draw-time .award-info .award-wrap .award-total { color: #FEEF60; } - .wrap .info-bottom { position: fixed; bottom: 0; left: 0; z-index: 99; width: 100%; - height: 1.73333rem; + height: 1.7333333333rem; background: url("../images/index-bottom.png") no-repeat 0 0/100% 100%; display: flex; align-items: center; } - .wrap .info-bottom .f-wrap { - margin-top: 0.18667rem; + margin-top: 0.1866666667rem; } - -.wrap .info-bottom .f-wrap .fragment, .wrap .info-bottom .f-wrap .award { - width: 3.33333rem; +.wrap .info-bottom .f-wrap .fragment, +.wrap .info-bottom .f-wrap .award { + width: 3.3333333333rem; height: 0.56rem; background-color: #BD7F38; - border-radius: 0.26667rem; + border-radius: 0.2666666667rem; line-height: 0.56rem; - font-size: 0.34667rem; + font-size: 0.3466666667rem; font-weight: bold; color: white; - text-indent: 0.13333rem; - margin-bottom: 0.13333rem; + text-indent: 0.1333333333rem; + margin-bottom: 0.1333333333rem; } - .wrap .info-bottom .avatar { - width: 1.33333rem; - height: 1.33333rem; + width: 1.3333333333rem; + height: 1.3333333333rem; margin-left: 0.56rem; - margin-right: 0.26667rem; + margin-right: 0.2666666667rem; } - .wrap .info-bottom .avatar img { width: 100%; height: 100%; border-radius: 50%; } - .wrap .info-bottom .add { - width: 0.54667rem; - height: 0.54667rem; + width: 0.5466666667rem; + height: 0.5466666667rem; margin-top: -0.64rem; margin-left: 0.16rem; } - .wrap .info-bottom .rank { - width: 2.26667rem; + width: 2.2666666667rem; height: 0.72rem; - margin-left: 0.58667rem; + margin-left: 0.5866666667rem; } - .wrap .shade-mask { display: none; position: fixed; @@ -503,7 +446,6 @@ html, body { height: 100vh; background-color: rgba(0, 0, 0, 0.4); } - .wrap .shade-mask .shade-content { position: absolute; top: 50%; @@ -512,12 +454,11 @@ html, body { width: 7.68rem; height: 8.88rem; background: url("../images/rule-bg.png") no-repeat 0 0/100% 100%; - font-size: 0.34667rem; + font-size: 0.3466666667rem; color: #B58147; font-weight: 600; overflow: hidden; } - .wrap .shade-mask .shade-content main { position: absolute; top: 0.8rem; @@ -527,35 +468,29 @@ html, body { box-sizing: border-box; overflow: auto; } - .wrap .shade-mask .shade-content main div { line-height: 1.2; } - .wrap .shade-mask .shade-content main div .title { width: 3.36rem; - height: 0.61333rem; - line-height: 0.61333rem; + height: 0.6133333333rem; + line-height: 0.6133333333rem; background: url("../images/title-bg.png") no-repeat 0 0/100% 100%; - margin: 0 auto 0.29333rem; + margin: 0 auto 0.2933333333rem; text-align: center; } - .wrap .shade-mask .shade-content main div .jietu { - width: 6.53333rem; - height: 3.66667rem; + width: 6.5333333333rem; + height: 3.6666666667rem; margin-top: 0.16rem; - margin-bottom: 0.42667rem; + margin-bottom: 0.4266666667rem; } - .wrap .shade-mask .shade-content main div .jietu.t2 { - height: 3.98667rem; + height: 3.9866666667rem; } - .wrap .shade-mask .shade-content main div .jietu.t3 { - height: 4.01333rem; + height: 4.0133333333rem; } - .wrap .shade-mask-rank { display: none; position: fixed; @@ -566,32 +501,28 @@ html, body { height: 100vh; background-color: rgba(0, 0, 0, 0.6); } - .wrap .shade-mask-rank .shade-content-rank { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8.8rem; - height: 13.06667rem; + height: 13.0666666667rem; background: white; } - .wrap .shade-mask-rank .shade-content-rank .rank-top { - height: 4.53333rem; + height: 4.5333333333rem; background-image: linear-gradient(#F49C35, #FFDD81); overflow: hidden; } - .wrap .shade-mask-rank .shade-content-rank .rank-top .tab-wrap { - font-family: 'pingfang-regular'; - width: 6.13333rem; - height: 0.93333rem; + font-family: "pingfang-regular"; + width: 6.1333333333rem; + height: 0.9333333333rem; background-color: rgba(255, 255, 255, 0.3); border-radius: 0.48rem; - margin: 0.26667rem auto 0.08rem; + margin: 0.2666666667rem auto 0.08rem; } - .wrap .shade-mask-rank .shade-content-rank .rank-top .tab-wrap span { display: inline-block; width: 2.8rem; @@ -600,23 +531,19 @@ html, body { text-align: center; font-size: 0.4rem; color: white; - margin-top: 0.06667rem; + margin-top: 0.0666666667rem; } - .wrap .shade-mask-rank .shade-content-rank .rank-top .tab-wrap span:first-child { - margin-left: 0.18667rem; + margin-left: 0.1866666667rem; } - .wrap .shade-mask-rank .shade-content-rank .rank-top .tab-wrap .active { background-color: white; color: #F5A03A; border-radius: 0.4rem; } - .wrap .shade-mask-rank .shade-content-rank .rank-top .topthree-wrap { position: relative; } - .wrap .shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap { position: absolute; display: flex; @@ -624,23 +551,19 @@ html, body { align-items: center; width: 100%; } - .wrap .shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap:first-child { width: 1.76rem; left: 50%; transform: translateX(-50%); } - .wrap .shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap:first-child .diamond-num { display: none; } - .wrap .shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap .avatar { width: 1.76rem; - height: 2.33333rem; - margin-bottom: 0.26667rem; + height: 2.3333333333rem; + margin-bottom: 0.2666666667rem; } - .wrap .shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap .avatar p { position: relative; z-index: 99; @@ -648,50 +571,45 @@ html, body { height: 100%; background: url("../images/first.png") no-repeat 0 0/100% 100%; } - .wrap .shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap .avatar img { position: relative; z-index: 9; - top: -1.81333rem; - left: 0.02667rem; - width: 1.70667rem; - height: 1.70667rem; + top: -1.8133333333rem; + left: 0.0266666667rem; + width: 1.7066666667rem; + height: 1.7066666667rem; border-radius: 50%; } - -.wrap .shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap .nick, .wrap .shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap .diamond-num { +.wrap .shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap .nick, +.wrap .shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap .diamond-num { width: 4.8rem; text-align: center; font-size: 0.4rem; font-weight: bold; color: white; } - .wrap .shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap .diamond-num { - font-family: 'din-medium'; + font-family: "din-medium"; margin: 0; - margin-top: -0.26667rem; - margin-bottom: 0.05333rem; + margin-top: -0.2666666667rem; + margin-bottom: 0.0533333333rem; color: #ED7B50; font-size: 0.32rem; } - .wrap .shade-mask-rank .shade-content-rank .other-rank { overflow: auto; position: absolute; width: 100%; height: 7.2rem; background-color: white; - padding: 0.4rem 0.26667rem 0; + padding: 0.4rem 0.2666666667rem 0; box-sizing: border-box; } - .wrap .shade-mask-rank .shade-content-rank .other-rank li { display: flex; align-items: center; - margin-bottom: 0.53333rem; + margin-bottom: 0.5333333333rem; } - .wrap .shade-mask-rank .shade-content-rank .other-rank li .index { display: inline-block; width: 0.4rem; @@ -700,79 +618,68 @@ html, body { color: #333333; text-align: center; } - .wrap .shade-mask-rank .shade-content-rank .other-rank li .others-info { flex: 1; display: flex; align-items: center; - margin-left: 0.26667rem; + margin-left: 0.2666666667rem; } - .wrap .shade-mask-rank .shade-content-rank .other-rank li .others-info img { - width: 1.33333rem; - height: 1.33333rem; + width: 1.3333333333rem; + height: 1.3333333333rem; border-radius: 50%; - margin-right: 0.26667rem; + margin-right: 0.2666666667rem; } - .wrap .shade-mask-rank .shade-content-rank .other-rank li .others-info .others-nick { - font-size: 0.37333rem; + font-size: 0.3733333333rem; font-weight: bold; color: #333333; } - .wrap .shade-mask-rank .shade-content-rank .other-rank li .others-diamond-num { - font-size: 0.34667rem; + font-size: 0.3466666667rem; font-weight: bold; color: #ED7B50; } - .wrap .shade-mask-rank .shade-content-rank .mine { position: fixed; left: 0; bottom: 0; z-index: 999; width: 100%; - height: 1.33333rem; + height: 1.3333333333rem; background-color: rgba(0, 0, 0, 0.8); padding: 0 0.2rem; box-sizing: border-box; display: flex; align-items: center; } - .wrap .shade-mask-rank .shade-content-rank .mine .mine-rank { - font-size: 0.34667rem; + font-size: 0.3466666667rem; font-weight: bold; color: white; } - .wrap .shade-mask-rank .shade-content-rank .mine .mine-info { flex: 1; display: flex; align-items: center; } - .wrap .shade-mask-rank .shade-content-rank .mine .mine-info img { - width: 1.06667rem; - height: 1.06667rem; + width: 1.0666666667rem; + height: 1.0666666667rem; border-radius: 50%; margin-left: 0.4rem; - margin-right: 0.53333rem; + margin-right: 0.5333333333rem; } - .wrap .shade-mask-rank .shade-content-rank .mine .mine-info .mine-nick { - font-size: 0.37333rem; + font-size: 0.3733333333rem; font-weight: bold; color: white; } - .wrap .shade-mask-rank .shade-content-rank .mine .mine-diamond-num { - font-size: 0.34667rem; + font-size: 0.3466666667rem; font-weight: bold; color: #ED7B50; } - .wrap .shade-mask-fragmentNum { display: none; position: fixed; @@ -783,7 +690,6 @@ html, body { height: 100vh; background-color: rgba(0, 0, 0, 0.6); } - .wrap .shade-mask-fragmentNum .shade-content-fragmentNum { position: absolute; top: 50%; @@ -798,47 +704,42 @@ html, body { flex-direction: column; align-items: center; } - .wrap .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-title { font-size: 0.48rem; font-weight: bold; color: #333333; - margin-top: 0.50667rem; + margin-top: 0.5066666667rem; } - .wrap .shade-mask-fragmentNum .shade-content-fragmentNum img { width: 1.6rem; width: 1.6rem; margin-top: 1.44rem; } - .wrap .shade-mask-fragmentNum .shade-content-fragmentNum p { font-size: 0.4rem; font-weight: 600; color: #333333; - margin-top: 0.66667rem; + margin-top: 0.6666666667rem; } - .wrap .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap { display: flex; justify-content: space-between; - width: 6.82667rem; - height: 1.01333rem; + width: 6.8266666667rem; + height: 1.0133333333rem; margin-top: 1.2rem; } - -.wrap .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .cancel-btn, .wrap .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .confirm-btn { +.wrap .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .cancel-btn, +.wrap .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .confirm-btn { width: 3.2rem; - height: 1.01333rem; - line-height: 1.01333rem; + height: 1.0133333333rem; + line-height: 1.0133333333rem; text-align: center; - border-radius: 0.50667rem; - font-size: 0.37333rem; + border-radius: 0.5066666667rem; + font-size: 0.3733333333rem; font-weight: 600; background-color: #EAE5FC; color: #7154EE; } - .wrap .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .confirm-btn { background-color: #735FFE; color: #fff; @@ -854,3 +755,62 @@ html, body { z-index: 99999; background-color: white; } + +.bottom { + position: fixed; + bottom: 0; + left: 0; + z-index: 99; + width: 100%; + height: 1.7333333333rem; + background: url("../images/mall/bottom.png") no-repeat 0 0/100% 100%; + display: flex; + align-items: center; +} +.bottom.mb-long { + margin-bottom: 0.9066666667rem; +} +.bottom .avatar { + width: 1.3333333333rem; + height: 1.3333333333rem; + margin-left: 0.56rem; + margin-right: 0.2666666667rem; +} +.bottom .avatar img { + width: 100%; + height: 100%; + border-radius: 50%; +} +.bottom .info-wrap { + flex: 1; + margin-top: 0.1866666667rem; +} +.bottom .info-wrap .fragment-num, +.bottom .info-wrap .diamond-num { + width: 3.3333333333rem; + height: 0.56rem; + background-color: #BD7F38; + border-radius: 0.2666666667rem; + line-height: 0.56rem; + font-size: 0.3466666667rem; + font-weight: bold; + color: white; + text-indent: 0.1333333333rem; + margin-bottom: 0.1333333333rem; +} +.bottom .add { + width: 0.5466666667rem; + height: 0.5466666667rem; + margin-top: -0.64rem; + margin-right: 0.9333333333rem; +} +.bottom .recharge { + width: 1.92rem; + height: 0.8266666667rem; + margin-right: 0.9866666667rem; +} +.bottom .recharge img { + width: 100%; +} + +/*# sourceMappingURL=index.css.map */ diff --git a/view/peko/activity/act-ocean/css/index.scss b/view/peko/activity/act-ocean/css/index.scss index 6a365f0..b4de1ef 100644 --- a/view/peko/activity/act-ocean/css/index.scss +++ b/view/peko/activity/act-ocean/css/index.scss @@ -2,7 +2,7 @@ @return $px / $rem+rem; } -@font-face{ +@font-face { font-family: 'pingfang-bold'; src: url('../../../common/fonts/PingFang\ Bold.ttf'); src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'), @@ -10,7 +10,7 @@ url('../../../common/fonts/PingFang\ Bold.ttf') format('svg'); } -@font-face{ +@font-face { font-family: 'din-medium'; src: url('../../../common/fonts/DINCond-Medium.ttf'); src: url('../../../common/fonts/DINCond-Medium.ttf') format('woff'), @@ -18,23 +18,27 @@ url('../../../common/fonts/DINCond-Medium.ttf') format('svg'); } -html, body{ +html, +body { font-family: 'din-medium'; background: #C8864C; // 海浪svga过长 overflow-x: hidden; } -.wrap{ +.wrap { width: 100%; height: 100vh; // background: url('../images/index-bg.png') no-repeat center/cover; position: relative; - .banner{ + + .banner { width: 100%; } - .rule, .record{ + + .rule, + .record { position: fixed; top: px2rem(160); // bottom: px2rem(1100); @@ -42,16 +46,18 @@ html, body{ z-index: 99; width: px2rem(118); height: px2rem(40); - img{ + + img { width: 100%; } } - .record{ + + .record { top: px2rem(214); // bottom: px2rem(1040); } - .previous-result{ + .previous-result { position: absolute; // bottom: px2rem(200); top: px2rem(1120); @@ -67,34 +73,38 @@ html, body{ align-items: center; background: url('../images/previous-result-bg.png') no-repeat 0 0/100% 100%; z-index: 9; - span{ + + 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; + -1px -1px 0px#fc8321, + 1px 1px 0px#fc8321, + -1px -1px 0px#fc8321, + 1px 1px 0px#fc8321, + -1px -1px 0px#fc8321; } - .result-list{ + + .result-list { display: flex; - p{ + + p { width: px2rem(40); height: px2rem(40); margin-left: px2rem(8); background: url('../images/little-bubble.png') 0 0/100% 100%; + // &:last-child{ // background: url('../images/last-little-bubble.png') 0 0/100% 100%,url('../images/little-bubble.png') 0 0/100% 100%; // } - img{ + img { width: 100%; } } } } - - .mall{ + + .mall { position: absolute; top: px2rem(184); // bottom: px2rem(1020); @@ -102,21 +112,26 @@ html, body{ z-index: 99; width: px2rem(142); height: px2rem(134); - img{ + + img { width: 100%; } } - .game-area{ + + .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%; + // 等待倒计时30s - .select-time{ + .select-time { display: none; - .count-down, .current-tip{ + + .count-down, + .current-tip { font-family: 'pingfang-bold'; position: absolute; top: px2rem(-40); @@ -125,13 +140,14 @@ html, body{ width: px2rem(322); height: px2rem(72); line-height: px2rem(62); - background: url('../images/count-down.png') no-repeat 0 0/100% 100% ; + 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{ + + .current-tip { top: px2rem(50); width: px2rem(368); height: px2rem(68); @@ -140,13 +156,15 @@ html, body{ font-size: px2rem(22); color: #F0C799; } + // 海鲜列表 - ul{ + ul { display: flex; flex-wrap: wrap; // justify-content: space-between; padding-left: px2rem(47); - li{ + + li { position: relative; z-index: 99; width: px2rem(138); @@ -154,15 +172,18 @@ html, body{ margin-top: px2rem(130); margin-right: px2rem(32); background: url('../images/bubble-bg.png') no-repeat 0 0/100% 100%; - &:nth-child(-n+4){ + + &:nth-child(-n+4) { margin-top: px2rem(80); } - img{ + + img { width: px2rem(120); height: px2rem(120); - transform: translate( px2rem(8), px2rem(-26) ); + transform: translate(px2rem(8), px2rem(-26)); } - .multiple{ + + .multiple { position: absolute; bottom: px2rem(20); left: px2rem(-10); @@ -175,7 +196,8 @@ html, body{ font-weight: bold; color: white; } - .name{ + + .name { position: absolute; bottom: px2rem(-40); left: 50%; @@ -190,17 +212,20 @@ html, body{ font-size: px2rem(20); font-weight: bold; color: white; - &.general{ + + &.general { height: px2rem(46); line-height: px2rem(30); background: url('../images/name-general-bg.png') no-repeat 0 0/100% 100%; } - .gift-price{ + + .gift-price { font-size: px2rem(18); padding-top: px2rem(4); } } - .bubble-2s{ + + .bubble-2s { display: none; // width: px2rem(92); // height: px2rem(56); @@ -212,21 +237,25 @@ html, body{ background: url('../images/qipao-2s.png') no-repeat 0 0/100% 100%; transform: rotate(343deg); text-indent: px2rem(16); - p{ + + p { font-size: px2rem(18); color: white; font-weight: bold; text-align: center; margin-left: px2rem(-20); - &.first-line{ + + &.first-line { padding-top: px2rem(10); } - &.second-line{ + + &.second-line { padding-top: px2rem(4); } } } - .select-num{ + + .select-num { // display: none; position: absolute; top: px2rem(-6); @@ -236,16 +265,17 @@ html, body{ 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; + -1px -1px 0px#ff622b, + 1px 1px 0px#ff622b, + -1px -1px 0px#ff622b, + 1px 1px 0px#ff622b, + -1px -1px 0px#ff622b; } } } + // 碎片按钮 - .btn-wrap{ + .btn-wrap { display: flex; // justify-content: space-between; align-items: center; @@ -253,7 +283,8 @@ html, body{ height: px2rem(126); margin: px2rem(140) auto 0; background: url('../images/btn-wrap-bg.png') no-repeat 0 0/100% 100%; - div{ + + div { display: flex; justify-content: center; width: px2rem(190); @@ -262,42 +293,51 @@ html, body{ line-height: px2rem(80); font-size: px2rem(30); color: #975B25; - &.active{ + + &.active { background-image: url('../images/fragment-btn-active.png'); color: #B33E17; } - &:first-child{ + + &:first-child { margin-left: px2rem(60); } - &:last-child{ + + &:last-child { margin-left: 0; } - &:nth-child(2){ + + &:nth-child(2) { margin: 0 px2rem(12); } } } + // 架子 - .shelf{ + .shelf { width: px2rem(710); height: px2rem(100); position: absolute; top: px2rem(440); left: 50%; transform: translateX(-50%); - &:last-child{ + + &:last-child { top: px2rem(720); } } } + // 等待结果5s - .wait-time{ + .wait-time { display: none; width: px2rem(750); height: px2rem(600); margin: auto; position: relative; - .count-down, .current-tip{ + + .count-down, + .current-tip { font-family: 'pingfang-bold'; position: absolute; top: px2rem(-40); @@ -312,27 +352,31 @@ html, body{ font-size: px2rem(24); font-weight: bold; } - .current-tip{ + + .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% ; + background: url('../images/tip.png') no-repeat 0 0/100% 100%; text-align: center; font-size: px2rem(22); color: #FFF0C799; font-weight: bold; } - + } + // 开奖时间 - .draw-time{ + .draw-time { display: none; width: px2rem(750); height: px2rem(600); + // margin: auto; // margin-top: px2rem(80); - .count-down, .current-tip{ + .count-down, + .current-tip { font-family: 'pingfang-bold'; position: absolute; top: px2rem(-40); @@ -341,28 +385,31 @@ html, body{ width: px2rem(322); height: px2rem(72); line-height: px2rem(62); - background: url('../images/count-down.png') no-repeat 0 0/100% 100% ; + 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{ + + .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% ; + background: url('../images/tip.png') no-repeat 0 0/100% 100%; font-size: px2rem(22); color: #F0C799; } - .top-three{ + + .top-three { position: absolute; left: 50%; transform: translateX(-50%); bottom: px2rem(240); width: 100%; - .top-three-title{ + + .top-three-title { display: flex; justify-content: center; align-items: center; @@ -371,20 +418,24 @@ html, body{ font-weight: bold; color: white; margin-bottom: px2rem(18); - .line{ + + .line { width: px2rem(50); border: px2rem(1) solid white; } } - .top-three-list{ + + .top-three-list { display: flex; justify-content: space-between; width: px2rem(340); margin: auto; - p{ + + p { width: px2rem(74); height: px2rem(74); - img{ + + img { width: 100%; height: 100%; border-radius: 50%; @@ -393,7 +444,8 @@ html, body{ } } } - .draw-pic{ + + .draw-pic { position: absolute; left: 50%; transform: translateX(-50%); @@ -401,12 +453,14 @@ html, body{ z-index: 1; width: px2rem(280); height: px2rem(280); - img{ + + img { width: 100%; height: 100%; } } - .award-info{ + + .award-info { position: absolute; top: px2rem(600); width: 100%; @@ -414,21 +468,25 @@ html, body{ text-align: center; font-size: px2rem(24); font-weight: bold; - .desc{ + + .desc { color: #FEEF60; margin-bottom: px2rem(12); } - .award-wrap{ + + .award-wrap { color: white; - .award-total{ + + .award-total { color: #FEEF60; } } } } } + // 底部信息 - .info-bottom{ + .info-bottom { position: fixed; bottom: 0; left: 0; @@ -439,9 +497,12 @@ html, body{ display: flex; // justify-content: space-evenly; align-items: center; - .f-wrap{ + + .f-wrap { margin-top: px2rem(14); - .fragment, .award{ + + .fragment, + .award { width: px2rem(250); height: px2rem(42); background-color: #BD7F38; @@ -454,31 +515,36 @@ html, body{ margin-bottom: px2rem(10); } } - .avatar{ + + .avatar { width: px2rem(100); height: px2rem(100); margin-left: px2rem(42); margin-right: px2rem(20); - img{ + + img { width: 100%; height: 100%; border-radius: 50%; } } - .add{ + + .add { width: px2rem(41); height: px2rem(41); margin-top: px2rem(-48); margin-left: px2rem(12); } - .rank{ + + .rank { width: px2rem(170); height: px2rem(54); margin-left: px2rem(44); } } + // 规则弹窗 - .shade-mask{ + .shade-mask { display: none; position: fixed; top: 0; @@ -487,7 +553,8 @@ html, body{ width: 100vw; height: 100vh; background-color: rgba($color: #000000, $alpha: 0.4); - .shade-content{ + + .shade-content { position: absolute; top: 50%; left: 50%; @@ -501,7 +568,8 @@ html, body{ color: #B58147; font-weight: 600; overflow: hidden; - main{ + + main { position: absolute; top: px2rem(60); width: 100%; @@ -509,9 +577,11 @@ html, body{ padding: 0 px2rem(42); box-sizing: border-box; overflow: auto; - div{ + + div { line-height: 1.2; - .title{ + + .title { width: px2rem(252); height: px2rem(46); line-height: px2rem(46); @@ -519,15 +589,18 @@ html, body{ margin: 0 auto px2rem(22); text-align: center; } - .jietu{ + + .jietu { width: px2rem(490); height: px2rem(275); margin-top: px2rem(12); margin-bottom: px2rem(32); - &.t2{ + + &.t2 { height: px2rem(299); } - &.t3{ + + &.t3 { height: px2rem(301); } } @@ -535,8 +608,9 @@ html, body{ } } } + // 今日排名弹窗 - .shade-mask-rank{ + .shade-mask-rank { display: none; position: fixed; top: 0; @@ -545,7 +619,8 @@ html, body{ width: 100vw; height: 100vh; background-color: rgba($color: #000000, $alpha: 0.6); - .shade-content-rank{ + + .shade-content-rank { position: absolute; top: 50%; left: 50%; @@ -553,18 +628,21 @@ html, body{ width: px2rem(660); height: px2rem(980); background: white; - .rank-top{ + + .rank-top { height: px2rem(340); background-image: linear-gradient(#F49C35, #FFDD81); overflow: hidden; - .tab-wrap{ + + .tab-wrap { font-family: 'pingfang-regular'; width: px2rem(460); height: px2rem(70); background-color: rgba($color: #fff, $alpha: .3); border-radius: px2rem(36); margin: px2rem(20) auto px2rem(6); - span{ + + span { display: inline-block; width: px2rem(210); height: px2rem(60); @@ -573,46 +651,55 @@ html, body{ font-size: px2rem(30); color: white; margin-top: px2rem(5); - &:first-child{ + + &:first-child { margin-left: px2rem(14); } } - .active{ + + .active { background-color: white; color: #F5A03A; border-radius: px2rem(30); } } - .topthree-wrap{ + + .topthree-wrap { position: relative; - .info-wrap{ + + .info-wrap { position: absolute; display: flex; flex-direction: column; align-items: center; width: 100%; - &:first-child{ + + &:first-child { width: px2rem(132); // height: px2rem(175); // margin-top: px2rem(86); left: 50%; transform: translateX(-50%); - .diamond-num{ + + .diamond-num { display: none; } } - .avatar{ + + .avatar { width: px2rem(132); height: px2rem(175); margin-bottom: px2rem(20); - p{ + + p { position: relative; z-index: 99; width: 100%; height: 100%; background: url('../images/first.png') no-repeat 0 0/100% 100%; } - img{ + + img { position: relative; z-index: 9; top: px2rem(-136); @@ -622,14 +709,17 @@ html, body{ border-radius: 50%; } } - .nick, .diamond-num{ + + .nick, + .diamond-num { width: px2rem(360); text-align: center; font-size: px2rem(30); font-weight: bold; color: white; } - .diamond-num{ + + .diamond-num { font-family: 'din-medium'; margin: 0; margin-top: px2rem(-20); @@ -640,8 +730,8 @@ html, body{ } } } - - .other-rank{ + + .other-rank { overflow: auto; position: absolute; width: 100%; @@ -649,14 +739,17 @@ html, body{ background-color: white; padding: px2rem(30) px2rem(20) 0; box-sizing: border-box; - li{ + + li { display: flex; align-items: center; margin-bottom: px2rem(40); - &:last-child{ + + &:last-child { // margin-bottom: px2rem(140); } - .index{ + + .index { display: inline-block; width: px2rem(30); font-size: px2rem(30); @@ -664,32 +757,36 @@ html, body{ color: #333333; text-align: center; } - .others-info{ + + .others-info { flex: 1; display: flex; align-items: center; margin-left: px2rem(20); - img{ + + img { width: px2rem(100); height: px2rem(100); border-radius: 50%; margin-right: px2rem(20); } - .others-nick{ + + .others-nick { font-size: px2rem(28); font-weight: bold; color: #333333; } } - .others-diamond-num{ + + .others-diamond-num { font-size: px2rem(26); font-weight: bold; color: #ED7B50; } } } - - .mine{ + + .mine { position: fixed; left: 0; bottom: 0; @@ -701,29 +798,34 @@ html, body{ box-sizing: border-box; display: flex; align-items: center; - .mine-rank{ + + .mine-rank { font-size: px2rem(26); font-weight: bold; color: white; } - .mine-info{ + + .mine-info { flex: 1; display: flex; align-items: center; - img{ + + img { width: px2rem(80); height: px2rem(80); border-radius: 50%; margin-left: px2rem(30); margin-right: px2rem(40); } - .mine-nick{ + + .mine-nick { font-size: px2rem(28); font-weight: bold; color: white; } } - .mine-diamond-num{ + + .mine-diamond-num { font-size: px2rem(26); font-weight: bold; color: #ED7B50; @@ -731,8 +833,9 @@ html, body{ } } } + // 碎片不足弹窗 - .shade-mask-fragmentNum{ + .shade-mask-fragmentNum { display: none; position: fixed; top: 0; @@ -741,7 +844,8 @@ html, body{ width: 100vw; height: 100vh; background-color: rgba($color: #000000, $alpha: 0.6); - .shade-content-fragmentNum{ + + .shade-content-fragmentNum { position: absolute; top: 50%; left: 50%; @@ -754,30 +858,36 @@ html, body{ display: flex; flex-direction: column; align-items: center; - .fragmentNum-title{ + + .fragmentNum-title { font-size: px2rem(36); font-weight: bold; color: #333333; margin-top: px2rem(38); } - img{ + + img { width: px2rem(120); width: px2rem(120); margin-top: px2rem(108); } - p{ + + p { font-size: px2rem(30); font-weight: 600; color: #333333; margin-top: px2rem(50); } - .fragmentNum-btn-wrap{ + + .fragmentNum-btn-wrap { display: flex; justify-content: space-between; width: px2rem(512); height: px2rem(76); margin-top: px2rem(90); - .cancel-btn, .confirm-btn{ + + .cancel-btn, + .confirm-btn { width: px2rem(240); height: px2rem(76); line-height: px2rem(76); @@ -788,7 +898,8 @@ html, body{ background-color: #EAE5FC; color: #7154EE; } - .confirm-btn{ + + .confirm-btn { background-color: #735FFE; color: #fff; } @@ -797,7 +908,7 @@ html, body{ } } -.no-in-app{ +.no-in-app { display: none; position: fixed; top: 0; @@ -807,3 +918,69 @@ html, body{ z-index: 99999; background-color: white; } + + +.bottom { + position: fixed; + bottom: 0; + left: 0; + z-index: 99; + width: 100%; + height: px2rem(130); + background: url('../images/mall/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%; + } + } +} \ No newline at end of file diff --git a/view/peko/activity/act-ocean/index.html b/view/peko/activity/act-ocean/index.html index 3b1f14e..53582e4 100644 --- a/view/peko/activity/act-ocean/index.html +++ b/view/peko/activity/act-ocean/index.html @@ -1,5 +1,6 @@ +
其他說明
- 如果以上說明未能解答您的疑問,請聯系客服,會有專人解答疑難 + 如果以上說明未能解答您的疑問,請聯系客服,會有專人解答疑難本活动与苹果公司无关