diff --git a/view/peko/activity/act-kitchen/css/index.css b/view/peko/activity/act-kitchen/css/index.css index 6568f38..cd551ae 100644 --- a/view/peko/activity/act-kitchen/css/index.css +++ b/view/peko/activity/act-kitchen/css/index.css @@ -2,6 +2,15 @@ body, html { width: 100%; background: #CE3346; + position: relative; + box-sizing: border-box; + padding-bottom: 2.4rem; +} + +.rabbit { + position: absolute; + width: 1.33333rem; + height: 1.33333rem; } .header { @@ -70,6 +79,7 @@ html { background: #8B4621; margin: -2.1rem auto 0; position: relative; + display: none; } .box .boxTitle { @@ -188,6 +198,7 @@ html { } .box .box_in .sBox .qp { + display: none; width: 2.02667rem; height: 1.05333rem; background: url(../images/qp.png) no-repeat; @@ -235,6 +246,17 @@ html { text-indent: -5px; } +.box .masks { + position: absolute; + width: 9rem; + height: 9rem; + background: none; + left: 50%; + transform: translateX(-50%); + top: 0rem; + display: none; +} + .resultOut { width: 10rem; height: 1.4rem; @@ -426,3 +448,664 @@ h3 b { .my .right { padding: 0 0.54667rem 0 0.75rem; } + +.result_popup { + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.4); + z-index: 9; + display: none; +} + +.result_popup .result_popup_in { + width: 8.8rem; + height: 11.46667rem; + background: url(../images/result_popup.png) no-repeat; + background-size: 100% 100%; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + box-sizing: border-box; + padding: 1.25333rem 0.4rem 0; +} + +.result_popup .result_popup_in .result_popup_inTitle { + width: 5.92rem; + height: 1.84rem; + line-height: 1.5rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: -0.92rem; + text-align: center; + color: #B33E17; + font-size: 0.42667rem; + background: url(../images/result_popupTitle.png) no-repeat; + background-size: 100% 100%; + font-weight: 600; +} + +.result_popup .result_popup_in .result_popup_inTitle b { + font-weight: 600; +} + +.result_popup .result_popup_in .resultList { + width: 100%; + display: flex; + justify-content: center; + height: 1.57333rem; +} + +.result_popup .result_popup_in .resultList li { + width: 1.57333rem; + height: 1.57333rem; + background: url(../images/border.png) no-repeat; + background-size: 100% 100%; + position: relative; +} + +.result_popup .result_popup_in .resultList li img { + position: absolute; + width: 1.25333rem; + height: 1.25333rem; + border-radius: 50%; + left: 48%; + top: 46%; + transform: translate(-50%, -50%); +} + +.result_popup .result_popup_in .resultList li .name { + width: 100%; + position: absolute; + left: 0; + bottom: -0.5rem; + color: #fff; + font-weight: 800; + font-size: 0.37333rem; + text-align: center; +} + +.result_popup .result_popup_in .income { + width: 7.30667rem; + height: 0.33333rem; + line-height: 0.33333rem; + display: flex; + justify-content: space-between; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 4.45rem; +} + +.result_popup .result_popup_in .income p { + display: flex; + justify-content: center; + text-align: center; + width: 50%; +} + +.result_popup .result_popup_in .income p img { + width: 0.34667rem; + height: 0.29333rem; +} + +.result_popup .result_popup_in .income p b { + color: #FFFFFF; + font-size: 0.32rem; +} + +.result_popup .result_popup_in .no { + width: 7.30667rem; + height: 2.13333rem; + position: absolute; + bottom: 0.21333rem; + left: 50%; + transform: translateX(-50%); + background: url(../images/result_popupNo.png) no-repeat; + background-size: 100% 100%; +} + +.result_popup .result_popup_in .no .no1 { + width: 2.26667rem; + height: 100%; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); +} + +.result_popup .result_popup_in .no .no1 .tx { + width: 1.44rem; + height: 1.44rem; + border-radius: 50%; + box-sizing: border-box; + border: 0.02667rem solid #FFFFFF; + position: absolute; + top: -2.53333rem; + left: 50%; + transform: translateX(-50%); +} + +.result_popup .result_popup_in .no .no1 .name { + width: 100%; + position: absolute; + left: 0; + top: -0.88rem; + text-align: center; + color: #FFFFFF; + font-size: 0.32rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.result_popup .result_popup_in .no .no1 p { + width: 100%; + height: 0.4rem; + line-height: 0.4rem; + display: flex; + justify-content: center; + position: absolute; + left: 0; + top: -0.4rem; +} + +.result_popup .result_popup_in .no .no1 p .Sdiamond { + width: 0.34667rem; + height: 0.29333rem; + margin-top: 0.05rem; +} + +.result_popup .result_popup_in .no .no1 p b { + font-size: 0.37333rem; + color: #fff; +} + +.result_popup .result_popup_in .no .no2 { + width: 2.26667rem; + height: 100%; + position: absolute; + bottom: 0; + left: 0; +} + +.result_popup .result_popup_in .no .no2 .tx { + width: 1.44rem; + height: 1.44rem; + border-radius: 50%; + box-sizing: border-box; + border: 0.02667rem solid #FFFFFF; + position: absolute; + top: -2.13333rem; + left: 50%; + transform: translateX(-50%); +} + +.result_popup .result_popup_in .no .no2 .name { + width: 100%; + position: absolute; + left: 0; + top: -0.48rem; + text-align: center; + color: #FFFFFF; + font-size: 0.32rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.result_popup .result_popup_in .no .no2 p { + width: 100%; + height: 0.4rem; + line-height: 0.4rem; + display: flex; + justify-content: center; + position: absolute; + left: 0; + top: 0rem; +} + +.result_popup .result_popup_in .no .no2 p .Sdiamond { + width: 0.34667rem; + height: 0.29333rem; + margin-top: 0.05rem; +} + +.result_popup .result_popup_in .no .no2 p b { + font-size: 0.37333rem; + color: #fff; +} + +.result_popup .result_popup_in .no .no3 { + width: 2.26667rem; + height: 100%; + position: absolute; + bottom: 0; + right: 0; +} + +.result_popup .result_popup_in .no .no3 .tx { + width: 1.44rem; + height: 1.44rem; + border-radius: 50%; + box-sizing: border-box; + border: 0.02667rem solid #FFFFFF; + position: absolute; + top: -2.13333rem; + left: 50%; + transform: translateX(-50%); +} + +.result_popup .result_popup_in .no .no3 .name { + width: 100%; + position: absolute; + left: 0; + top: -0.48rem; + text-align: center; + color: #FFFFFF; + font-size: 0.32rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.result_popup .result_popup_in .no .no3 p { + width: 100%; + height: 0.4rem; + line-height: 0.4rem; + display: flex; + justify-content: center; + position: absolute; + left: 0; + top: 0rem; +} + +.result_popup .result_popup_in .no .no3 p .Sdiamond { + width: 0.34667rem; + height: 0.29333rem; + margin-top: 0.05rem; +} + +.result_popup .result_popup_in .no .no3 p b { + font-size: 0.37333rem; + color: #fff; +} + +.shade-mask { + display: none; + position: fixed; + top: 0; + left: 0; + z-index: 999; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.4); +} + +.shade-mask .shade-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 7.68rem; + height: 8.88rem; + background: url("../images/rule-bg.png") no-repeat 0 0/100% 100%; + font-size: 0.34667rem; + color: #B58147; + font-weight: 600; + overflow: hidden; +} + +.shade-mask .shade-content main { + position: absolute; + top: 0.8rem; + width: 100%; + height: 85%; + padding: 0 0.56rem; + box-sizing: border-box; + overflow: auto; +} + +.shade-mask .shade-content main div { + line-height: 1.2; + margin-top: 0.2rem; +} + +.shade-mask .shade-content main div .title { + width: 3.36rem; + height: 0.61333rem; + line-height: 0.61333rem; + background: url("../images/title-bg.png") no-repeat 0 0/100% 100%; + margin: 0 auto 0.29333rem; + text-align: center; +} + +.shade-mask .shade-content main div .jietu { + width: 6.53333rem; + height: 3.66667rem; + margin-top: 0.16rem; + margin-bottom: 0.42667rem; +} + +.shade-mask .shade-content main div .jietu.t2 { + height: 3.98667rem; +} + +.shade-mask .shade-content main div .jietu.t3 { + height: 4.2rem; +} + +.shade-mask-rank { + display: none; + position: fixed; + top: 0; + left: 0; + z-index: 999; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.6); +} + +.shade-mask-rank .shade-content-rank { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 8.8rem; + height: 13.06667rem; + background: white; + background: url(../images/myBoxBg.png) no-repeat; + background-size: 100% 100%; +} + +.shade-mask-rank .shade-content-rank .rank-top { + height: 4.53333rem; + overflow: hidden; +} + +.shade-mask-rank .shade-content-rank .rank-top .tab-wrap { + font-family: 'pingfang-regular'; + width: 5.86667rem; + height: 0.93333rem; + background-color: rgba(255, 255, 255, 0.3); + border-radius: 0.48rem; + margin: 0.26667rem auto 0.08rem; + display: flex; + overflow: hidden; + padding: 0.06667rem; + box-sizing: border-box; + justify-content: space-between; +} + +.shade-mask-rank .shade-content-rank .rank-top .tab-wrap span { + display: inline-block; + width: 50%; + height: 0.8rem; + line-height: 0.8rem; + text-align: center; + font-size: 0.4rem; + color: white; +} + +.shade-mask-rank .shade-content-rank .rank-top .tab-wrap .active { + background-color: white; + color: #F56801; + border-radius: 0.4rem; +} + +.shade-mask-rank .shade-content-rank .rank-top .topthree-wrap { + position: relative; +} + +.shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap { + position: absolute; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap:first-child { + width: 1.76rem; + left: 50%; + transform: translateX(-50%); +} + +.shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap:first-child .diamond-num { + display: none; +} + +.shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap .avatar { + width: 2.58667rem; + height: 2.50667rem; + margin-bottom: 0.26667rem; +} + +.shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap .avatar p { + position: relative; + z-index: 99; + width: 100%; + height: 100%; + background: url("../images/first.png") no-repeat 0 0/100% 100%; +} + +.shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap .avatar img { + position: relative; + z-index: 9; + top: -2.13333rem; + left: 50%; + transform: translateX(-50%); + width: 1.70667rem; + height: 1.70667rem; + border-radius: 50%; +} + +.shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap .nick, +.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; +} + +.shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap .diamond-num { + font-family: 'din-medium'; + margin: 0; + margin-top: -0.26667rem; + margin-bottom: 0.05333rem; + color: #fff; + font-size: 0.32rem; +} + +.shade-mask-rank .shade-content-rank .other-rank { + overflow: auto; + position: absolute; + width: 100%; + height: 7rem; + padding: 0.4rem 0.26667rem 0; + box-sizing: border-box; + margin-top: 0.25rem; +} + +.shade-mask-rank .shade-content-rank .other-rank li { + width: 90%; + display: flex; + align-items: center; + margin: 0 auto 0.53333rem; +} + +.shade-mask-rank .shade-content-rank .other-rank li .index { + display: inline-block; + width: 0.4rem; + font-size: 0.4rem; + font-weight: bold; + color: #333; + text-align: center; +} + +.shade-mask-rank .shade-content-rank .other-rank li .others-info { + flex: 1; + display: flex; + align-items: center; + margin-left: 0.26667rem; +} + +.shade-mask-rank .shade-content-rank .other-rank li .others-info img { + width: 1.33333rem; + height: 1.33333rem; + border-radius: 50%; + margin-right: 0.26667rem; +} + +.shade-mask-rank .shade-content-rank .other-rank li .others-info .others-nick { + font-size: 0.37333rem; + font-weight: bold; + color: #333333; +} + +.shade-mask-rank .shade-content-rank .other-rank li .others-diamond-num { + font-size: 0.34667rem; + font-weight: bold; + color: #FF7700; +} + +.shade-mask-rank .shade-content-rank .other-rank li .others-diamond-num b { + color: #FF5110; + font-weight: bold; +} + +.shade-mask-rank .shade-content-rank .mine { + position: fixed; + left: 0; + bottom: 0; + z-index: 999; + width: 100%; + height: 1.33333rem; + 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; +} + +.shade-mask-rank .shade-content-rank .mine .mine-rank { + font-size: 0.34667rem; + font-weight: bold; + color: white; + white-space: nowrap; +} + +.shade-mask-rank .shade-content-rank .mine .mine-info { + flex: 1; + display: flex; + align-items: center; + white-space: nowrap; +} + +.shade-mask-rank .shade-content-rank .mine .mine-info img { + width: 1.06667rem; + height: 1.06667rem; + border-radius: 50%; + margin-left: 0.4rem; + margin-right: 0.53333rem; +} + +.shade-mask-rank .shade-content-rank .mine .mine-info .mine-nick { + font-size: 0.37333rem; + font-weight: bold; + color: white; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + width: 3.5rem; +} + +.shade-mask-rank .shade-content-rank .mine .mine-diamond-num { + font-size: 0.34667rem; + font-weight: bold; + color: #fff; + white-space: nowrap; +} + +.shade-mask-rank .shade-content-rank .mine .mine-diamond-num 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(0, 0, 0, 0.6); +} + +.shade-mask-fragmentNum .shade-content-fragmentNum { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 8rem; + height: 8rem; + background: white; + border-radius: 0.32rem; + overflow: hidden; + display: flex; + flex-direction: column; + align-items: center; +} + +.shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-title { + font-size: 0.48rem; + font-weight: bold; + color: #333333; + margin-top: 0.50667rem; +} + +.shade-mask-fragmentNum .shade-content-fragmentNum img { + width: 1.6rem; + width: 1.6rem; + margin-top: 1.44rem; +} + +.shade-mask-fragmentNum .shade-content-fragmentNum p { + font-size: 0.4rem; + font-weight: 600; + color: #333333; + margin-top: 0.66667rem; +} + +.shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap { + display: flex; + justify-content: space-between; + width: 6.82667rem; + height: 1.01333rem; + margin-top: 1.2rem; +} + +.shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .cancel-btn, +.shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .confirm-btn { + width: 3.2rem; + height: 1.01333rem; + line-height: 1.01333rem; + text-align: center; + border-radius: 0.50667rem; + font-size: 0.37333rem; + font-weight: 600; + background-color: #EAE5FC; + color: #7154EE; +} + +.shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .confirm-btn { + background-color: #735FFE; + color: #fff; +} diff --git a/view/peko/activity/act-kitchen/css/index.scss b/view/peko/activity/act-kitchen/css/index.scss index 2173b58..814cb74 100644 --- a/view/peko/activity/act-kitchen/css/index.scss +++ b/view/peko/activity/act-kitchen/css/index.scss @@ -6,6 +6,16 @@ body, html { width: 100%; background: #CE3346; + position: relative; + box-sizing: border-box; + padding-bottom: px2rem(180); +} + +.rabbit { + position: absolute; + // z-index: 99; + width: px2rem(100); + height: px2rem(100); } .header { @@ -74,6 +84,7 @@ html { background: #8B4621; margin: -2.1rem auto 0; position: relative; + display: none; // overflow: hidden; .boxTitle { @@ -190,6 +201,7 @@ html { } .qp { + display: none; width: px2rem(152); height: px2rem(79); background: url(../images/qp.png) no-repeat; @@ -238,6 +250,17 @@ html { } } } + + .masks { + position: absolute; + width: 9rem; + height: 9rem; + background: none; + left: 50%; + transform: translateX(-50%); + top: 0rem; + display: none; + } } .resultOut { @@ -371,7 +394,8 @@ h3 { text-align: center; color: #FFFFFF; font-size: px2rem(20); - b{ + + b { margin-top: px2rem(8); display: block; } @@ -431,4 +455,687 @@ h3 { .right { padding: 0 px2rem(41) 0 0.75rem; } +} + +.result_popup { + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + background: rgba(0, 0, 0, .4); + z-index: 9; + display: none; + + .result_popup_in { + width: px2rem(660); + height: px2rem(860); + background: url(../images/result_popup.png) no-repeat; + background-size: 100% 100%; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + box-sizing: border-box; + padding: px2rem(94) px2rem(30) 0; + + .result_popup_inTitle { + width: px2rem(444); + height: px2rem(138); + line-height: 1.5rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(-69); + text-align: center; + color: #B33E17; + font-size: px2rem(32); + background: url(../images/result_popupTitle.png) no-repeat; + background-size: 100% 100%; + font-weight: 600; + + b { + font-weight: 600; + } + } + + .resultList { + width: 100%; + display: flex; + justify-content: center; + height: px2rem(118); + + li { + width: px2rem(118); + height: px2rem(118); + background: url(../images/border.png) no-repeat; + background-size: 100% 100%; + position: relative; + + img { + position: absolute; + width: px2rem(94); + height: px2rem(94); + border-radius: 50%; + left: 48%; + top: 46%; + transform: translate(-50%, -50%); + } + + .name { + width: 100%; + position: absolute; + left: 0; + bottom: -0.5rem; + color: #fff; + font-weight: 800; + font-size: px2rem(28); + text-align: center; + } + } + } + + .income { + width: px2rem(548); + height: px2rem(25); + line-height: px2rem(25); + display: flex; + justify-content: space-between; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 4.45rem; + + p { + display: flex; + justify-content: center; + text-align: center; + width: 50%; + + img { + width: px2rem(26); + height: px2rem(22); + } + + b { + color: #FFFFFF; + font-size: px2rem(24); + } + } + } + + .no { + width: px2rem(548); + height: px2rem(160); + position: absolute; + bottom: px2rem(16); + left: 50%; + transform: translateX(-50%); + background: url(../images/result_popupNo.png) no-repeat; + background-size: 100% 100%; + + .no1 { + width: px2rem(170); + height: 100%; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + + .tx { + width: px2rem(108); + height: px2rem(108); + border-radius: 50%; + box-sizing: border-box; + border: px2rem(2) solid #FFFFFF; + position: absolute; + top: px2rem(-190); + left: 50%; + transform: translateX(-50%); + } + + .name { + width: 100%; + position: absolute; + left: 0; + top: px2rem(-66); + text-align: center; + color: #FFFFFF; + font-size: px2rem(24); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + p { + width: 100%; + height: px2rem(30); + line-height: px2rem(30); + display: flex; + justify-content: center; + position: absolute; + left: 0; + top: px2rem(-30); + + .Sdiamond { + width: px2rem(26); + height: px2rem(22); + margin-top: 0.05rem; + } + + b { + font-size: px2rem(28); + color: #fff; + } + } + } + + .no2 { + width: px2rem(170); + height: 100%; + position: absolute; + bottom: 0; + left: 0; + + .tx { + width: px2rem(108); + height: px2rem(108); + border-radius: 50%; + box-sizing: border-box; + border: px2rem(2) solid #FFFFFF; + position: absolute; + top: px2rem(-160); + left: 50%; + transform: translateX(-50%); + } + + .name { + width: 100%; + position: absolute; + left: 0; + top: px2rem(-36); + text-align: center; + color: #FFFFFF; + font-size: px2rem(24); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + p { + width: 100%; + height: px2rem(30); + line-height: px2rem(30); + display: flex; + justify-content: center; + position: absolute; + left: 0; + top: px2rem(-0); + + .Sdiamond { + width: px2rem(26); + height: px2rem(22); + margin-top: 0.05rem; + } + + b { + font-size: px2rem(28); + color: #fff; + } + } + } + + .no3 { + width: px2rem(170); + height: 100%; + position: absolute; + bottom: 0; + right: 0; + + .tx { + width: px2rem(108); + height: px2rem(108); + border-radius: 50%; + box-sizing: border-box; + border: px2rem(2) solid #FFFFFF; + position: absolute; + top: px2rem(-160); + left: 50%; + transform: translateX(-50%); + } + + .name { + width: 100%; + position: absolute; + left: 0; + top: px2rem(-36); + text-align: center; + color: #FFFFFF; + font-size: px2rem(24); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + p { + width: 100%; + height: px2rem(30); + line-height: px2rem(30); + display: flex; + justify-content: center; + position: absolute; + left: 0; + top: px2rem(-0); + + .Sdiamond { + width: px2rem(26); + height: px2rem(22); + margin-top: 0.05rem; + } + + b { + font-size: px2rem(28); + color: #fff; + } + } + } + } + } +} + +// 规则弹窗 +.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 newline at end of file diff --git a/view/peko/activity/act-kitchen/css/record.css b/view/peko/activity/act-kitchen/css/record.css new file mode 100644 index 0000000..a848059 --- /dev/null +++ b/view/peko/activity/act-kitchen/css/record.css @@ -0,0 +1,307 @@ +@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"); +} + +html, +body { + width: 100%; + background: linear-gradient(0deg, #E6AD6A 0%, #F9CA92 100%); +} + +.img { + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 6rem; + height: 4.13333rem; + background: url(../images/null.png) no-repeat; + background-size: 100% 100%; +} + +.img p { + text-align: center; + width: 1.33333%rem; + position: absolute; + bottom: -1rem; + left: 50%; + transform: translate(-50%); + color: #fff; + font-size: 0.26667rem; +} + +.record-list { + width: 10rem; + margin: 0.4rem auto; +} + +.record-list li { + width: 100%; + height: 8.48rem; + background: url("../images/record/record-bg.png") no-repeat; + background-size: 100% 100%; + border-radius: 0.26667rem; + overflow: hidden; +} + +.record-list li h3 { + width: 100%; + height: 0.7rem; + line-height: 0.7rem; + text-align: center; + color: #fff; + margin: 0.3rem auto -0.3rem; +} + +.record-list li .goldBox { + width: 90%; + height: 0.58667rem; + line-height: 0.58667rem; + background: #F46331; + display: flex; + box-sizing: border-box; + padding: 0 0.26667rem; + margin: 0.2rem auto 0; +} + +.record-list li .goldBox p { + color: #fff; + width: 50%; + text-align: center; + display: none; +} + +.record-list li .goldBox span { + color: #FFF773; + font-size: 0.26667rem; +} + +.record-list li .result-wrap { + width: 84%; + height: 1.21333rem; + line-height: 1.21333rem; + box-sizing: border-box; + margin: 0.06667rem auto 0.33333rem; + display: flex; + justify-content: space-between; + position: relative; +} + +.record-list li .result-wrap .result { + display: flex; + align-items: center; +} + +.record-list li .result-wrap .result span { + font-size: 0.37333rem; + color: #FFFFFF; + padding-right: 0.18667rem; + font-weight: 600; + position: absolute; + left: 50%; + transform: translateX(-50%); + width: 1.90667rem; + height: 0.6rem; + background: url(../images/record/result.png) no-repeat; + background-size: 100% 100%; + top: 0.2rem; +} + +.record-list li .result-wrap .award { + display: flex; + align-items: center; + position: absolute; + right: 0rem; + top: -0.1rem; +} + +.record-list li .result-wrap .award p, +.record-list li .result-wrap .award b { + font-size: 0.37333rem; + color: #FFFFFF; + font-weight: 600; +} + +.record-list li .result-wrap .award .diamond { + width: 0.37333rem; + height: 0.37333rem; +} + +.record-list li .result-wrap .result_sBox { + width: 8.8rem; + height: 1.14667rem; + margin: 1rem auto 0; + display: flex; + justify-content: center; + position: relative; + left: 50%; + transform: translateX(-50%); +} + +.record-list li .result-wrap .result_sBox .bg { + width: 1.14667rem; + height: 1.14667rem; + background: url("../images/record_bubble_act.png") no-repeat; + background-size: 100% 100%; + text-align: center; +} + +.record-list li .result-wrap .result_sBox .bg img { + width: 75%; + display: block; + margin: 0.13333rem auto 0; +} + +.record-list li .put-wrap { + width: 84%; + height: 1.21333rem; + line-height: 1.21333rem; + box-sizing: border-box; + margin: 2rem auto 0; + display: flex; + position: relative; +} + +.record-list li .put-wrap .put { + font-size: 0.37333rem; + color: #FFFFFF; + font-weight: 600; + margin-right: 0.9rem; + position: absolute; + width: 1.02667rem; + height: 0.6rem; + left: 50%; + transform: translateX(-50%); + background: url(../images/record/touru.png) no-repeat; + background-size: 100% 100%; + top: -0.6rem; +} + +.record-list li .put-wrap .list { + width: 6.72rem; + height: 2.77333rem; + display: flex; + flex-wrap: wrap; + margin: 0.3rem auto 0; +} + +.record-list li .put-wrap .list .item { + width: 0.98667rem; + height: 1.2rem; + margin-right: 0.92rem; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; +} + +.record-list li .put-wrap .list .item:nth-child(4n) { + margin-right: 0; +} + +.record-list li .put-wrap .list .item p { + width: 0.82667rem; + height: 0.82667rem; + background: url("../images/record_bubble.png") no-repeat; + background-size: 100% 100%; +} + +.record-list li .put-wrap .list .item p .gift { + width: 75%; + margin-top: 0.1rem; + margin-left: 0.1rem; +} + +.record-list li .put-wrap .list .item div { + width: 100%; + height: 0.33333rem; + display: flex; + align-items: center; + justify-content: center; +} + +.record-list li .put-wrap .list .item div .diamond { + width: 0.33333rem; + height: 0.33333rem; + margin-top: -0.01rem; +} + +.record-list li .put-wrap .list .item div .in { + font-size: 0.26667rem; + color: #FFFFFF; + font-weight: 600; + white-space: nowrap; +} + +.record-list li .marine_organism { + width: 78%; + height: 2.13333rem; + margin: 0 auto; + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +.record-list li .marine_organism span { + width: 1.6rem; + height: 1.6rem; + position: relative; + display: block; +} + +.record-list li .marine_organism span img { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 0.72rem; + height: 0.62667rem; + display: block; +} + +.record-list li .marine_organism span b { + position: absolute; + right: -0.1rem; + top: 0.3rem; + color: #FFFFFF; + font-size: 0.26667rem; +} + +.record-list li .marine_organism .active { + width: 1.6rem; + height: 1.6rem; + position: relative; +} + +.record-list li .marine_organism .active img { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 0.96rem; + height: 0.82667rem; + display: block; +} + +.record-list li .marine_organism .active b { + position: absolute; + right: -0.1rem; + top: 0.3rem; + color: #FEEF60; + font-weight: bold; + font-size: 0.32rem; +} diff --git a/view/peko/activity/act-kitchen/css/record.scss b/view/peko/activity/act-kitchen/css/record.scss new file mode 100644 index 0000000..69a337c --- /dev/null +++ b/view/peko/activity/act-kitchen/css/record.scss @@ -0,0 +1,350 @@ +@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'); +} + +@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'); +} + +html, +body { + width: 100%; + background: linear-gradient(0deg, #E6AD6A 0%, #F9CA92 100%); +} + +.img { + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: px2rem(450 ); + height: px2rem(310 ); + background: url(../images/null.png) no-repeat; + background-size: 100% 100%; + + p { + text-align: center; + width: px2rem(100% ); + position: absolute; + bottom: -1rem; + left: 50%; + transform: translate(-50%); + color: #fff; + font-size: px2rem(20 ); + } +} + +.record-list { + width: px2rem(750 ); + margin: px2rem(30 ) auto; + + li { + width: 100%; + height: px2rem(636 ); + // background: linear-gradient(0deg, #46BBC1 0%, #62DEE4 100%); + background: url('../images/record/record-bg.png') no-repeat; + background-size: 100% 100%; + border-radius: px2rem(20 ); + overflow: hidden; + + h3 { + width: 100%; + height: 0.7rem; + line-height: 0.7rem; + text-align: center; + color: #fff; + margin: 0.3rem auto -0.3rem; + + } + + .goldBox { + width: 90%; + height: px2rem(44 ); + line-height: px2rem(44 ); + background: #F46331; + display: flex; + // justify-content: space-between; + box-sizing: border-box; + padding: 0 px2rem(20 ); + margin: 0.2rem auto 0; + + p { + color: #fff; + width: 50%; + text-align: center; + display: none; + } + + span { + color: #FFF773; + font-size: px2rem(20 ); + } + + // .gold { + // font-size: px2rem(26 ); + // color: #FEEF60; + // } + } + + .result-wrap { + width: 84%; + height: px2rem(91 ); + line-height: px2rem(91 ); + box-sizing: border-box; + margin: px2rem(5 ) auto px2rem(25 ); + display: flex; + justify-content: space-between; + position: relative; + + .result { + display: flex; + align-items: center; + + span { + font-size: px2rem(28 ); + color: #FFFFFF; + padding-right: px2rem(14 ); + font-weight: 600; + position: absolute; + left: 50%; + transform: translateX(-50%); + width: px2rem(143 ); + height: px2rem(45 ); + background: url(../images/record/result.png) no-repeat; + background-size: 100% 100%; + top: 0.2rem; + } + + // .bg { + // width: px2rem(91 ); + // height: px2rem(91 ); + // background: url('../images/record_bubble_act.png') no-repeat; + // background-size: 100% 100%; + // text-align: center; + + // img { + // width: 75%; + // margin-top: 0.15rem; + // } + // } + + } + + .award { + display: flex; + align-items: center; + position: absolute; + // right: 0.8rem; + // top: 1.8rem; + right: 0rem; + top: -0.1rem; + + p, + b { + font-size: px2rem(28 ); + color: #FFFFFF; + font-weight: 600; + } + + .diamond { + width: px2rem(28 ); + height: px2rem(28 ); + } + } + + .result_sBox { + width: px2rem(660 ); + height: px2rem(86 ); + margin: 1rem auto 0; + display: flex; + justify-content: center; + position: relative; + left: 50%; + transform: translateX(-50%); + + .bg { + width: px2rem(86 ); + height: px2rem(86 ); + background: url('../images/record_bubble_act.png') no-repeat; + background-size: 100% 100%; + text-align: center; + + img { + width: 75%; + display: block; + margin: px2rem(10 ) auto 0; + } + } + } + } + + .put-wrap { + width: 84%; + height: px2rem(91 ); + line-height: px2rem(91 ); + box-sizing: border-box; + margin: 2rem auto 0; + display: flex; + position: relative; + + .put { + font-size: px2rem(28 ); + color: #FFFFFF; + font-weight: 600; + margin-right: 0.9rem; + position: absolute; + width: px2rem(77 ); + height: px2rem(45 ); + left: 50%; + transform: translateX(-50%); + background: url(../images/record/touru.png) no-repeat; + background-size: 100% 100%; + top: -0.6rem; + } + + .list { + width: px2rem(504 ); + height: px2rem(208 ); + display: flex; + flex-wrap: wrap; + margin: 0.3rem auto 0; + + .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: px2rem(25 ); + height: px2rem(25 ); + margin-top: -0.01rem; + } + + .in { + font-size: px2rem(20 ); + color: #FFFFFF; + font-weight: 600; + white-space: nowrap; + } + } + } + } + } + + .marine_organism { + // width: px2rem(560 ); + width: 78%; + height: px2rem(160 ); + margin: 0 auto; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + + span { + width: px2rem(120 ); + height: px2rem(120 ); + position: relative; + display: block; + + img { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: px2rem(54 ); + height: px2rem(47 ); + display: block; + } + + b { + position: absolute; + right: -0.1rem; + top: 0.3rem; + color: #FFFFFF; + font-size: px2rem(20 ); + } + } + + .active { + width: px2rem(120 ); + height: px2rem(120 ); + position: relative; + + img { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: px2rem(72 ); + height: px2rem(62 ); + display: block; + } + + b { + position: absolute; + right: -0.1rem; + top: 0.3rem; + color: #FEEF60; + // -webkit-text-stroke: px2rem(2 ) #FF5C7E; + // text-stroke: px2rem(2 ) #FF5C7E; + font-weight: bold; + font-size: px2rem(24 ); + } + } + } + + } +} \ No newline at end of file diff --git a/view/peko/activity/act-kitchen/images/1.png b/view/peko/activity/act-kitchen/images/1.png new file mode 100644 index 0000000..a9aa97f Binary files /dev/null and b/view/peko/activity/act-kitchen/images/1.png differ diff --git a/view/peko/activity/act-kitchen/images/2.png b/view/peko/activity/act-kitchen/images/2.png new file mode 100644 index 0000000..df5203d Binary files /dev/null and b/view/peko/activity/act-kitchen/images/2.png differ diff --git a/view/peko/activity/act-kitchen/images/3.png b/view/peko/activity/act-kitchen/images/3.png new file mode 100644 index 0000000..7e2ccde Binary files /dev/null and b/view/peko/activity/act-kitchen/images/3.png differ diff --git a/view/peko/activity/act-kitchen/images/4.png b/view/peko/activity/act-kitchen/images/4.png new file mode 100644 index 0000000..4291283 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/4.png differ diff --git a/view/peko/activity/act-kitchen/images/5.png b/view/peko/activity/act-kitchen/images/5.png new file mode 100644 index 0000000..b6c6542 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/5.png differ diff --git a/view/peko/activity/act-kitchen/images/6.png b/view/peko/activity/act-kitchen/images/6.png new file mode 100644 index 0000000..7e32f37 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/6.png differ diff --git a/view/peko/activity/act-kitchen/images/7.png b/view/peko/activity/act-kitchen/images/7.png new file mode 100644 index 0000000..1eadf3b Binary files /dev/null and b/view/peko/activity/act-kitchen/images/7.png differ diff --git a/view/peko/activity/act-kitchen/images/8.png b/view/peko/activity/act-kitchen/images/8.png new file mode 100644 index 0000000..3bd1128 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/8.png differ diff --git a/view/peko/activity/act-kitchen/images/Bdiamond.png b/view/peko/activity/act-kitchen/images/Bdiamond.png index 9ba9fc4..5286053 100644 Binary files a/view/peko/activity/act-kitchen/images/Bdiamond.png and b/view/peko/activity/act-kitchen/images/Bdiamond.png differ diff --git a/view/peko/activity/act-kitchen/images/Sdiamond.png b/view/peko/activity/act-kitchen/images/Sdiamond.png index cbf9b6b..718500d 100644 Binary files a/view/peko/activity/act-kitchen/images/Sdiamond.png and b/view/peko/activity/act-kitchen/images/Sdiamond.png differ diff --git a/view/peko/activity/act-kitchen/images/add.png b/view/peko/activity/act-kitchen/images/add.png index ddb3aac..c892c51 100644 Binary files a/view/peko/activity/act-kitchen/images/add.png and b/view/peko/activity/act-kitchen/images/add.png differ diff --git a/view/peko/activity/act-kitchen/images/border.png b/view/peko/activity/act-kitchen/images/border.png new file mode 100644 index 0000000..62c05f3 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/border.png differ diff --git a/view/peko/activity/act-kitchen/images/boxTitle.png b/view/peko/activity/act-kitchen/images/boxTitle.png index c8996d8..35f3e2a 100644 Binary files a/view/peko/activity/act-kitchen/images/boxTitle.png and b/view/peko/activity/act-kitchen/images/boxTitle.png differ diff --git a/view/peko/activity/act-kitchen/images/box_in.png b/view/peko/activity/act-kitchen/images/box_in.png index 73424ba..6796708 100644 Binary files a/view/peko/activity/act-kitchen/images/box_in.png and b/view/peko/activity/act-kitchen/images/box_in.png differ diff --git a/view/peko/activity/act-kitchen/images/first.png b/view/peko/activity/act-kitchen/images/first.png new file mode 100644 index 0000000..ce9e639 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/first.png differ diff --git a/view/peko/activity/act-kitchen/images/header.png b/view/peko/activity/act-kitchen/images/header.png index 102a03b..74f0c86 100644 Binary files a/view/peko/activity/act-kitchen/images/header.png and b/view/peko/activity/act-kitchen/images/header.png differ diff --git a/view/peko/activity/act-kitchen/images/headerH3.png b/view/peko/activity/act-kitchen/images/headerH3.png index 1925c7a..d0796bc 100644 Binary files a/view/peko/activity/act-kitchen/images/headerH3.png and b/view/peko/activity/act-kitchen/images/headerH3.png differ diff --git a/view/peko/activity/act-kitchen/images/headerText.png b/view/peko/activity/act-kitchen/images/headerText.png index 2fe8104..188b626 100644 Binary files a/view/peko/activity/act-kitchen/images/headerText.png and b/view/peko/activity/act-kitchen/images/headerText.png differ diff --git a/view/peko/activity/act-kitchen/images/iconsss.png b/view/peko/activity/act-kitchen/images/iconsss.png deleted file mode 100644 index 057cf61..0000000 Binary files a/view/peko/activity/act-kitchen/images/iconsss.png and /dev/null differ diff --git a/view/peko/activity/act-kitchen/images/iconsssssss.png b/view/peko/activity/act-kitchen/images/iconsssssss.png deleted file mode 100644 index dcd4f62..0000000 Binary files a/view/peko/activity/act-kitchen/images/iconsssssss.png and /dev/null differ diff --git a/view/peko/activity/act-kitchen/images/logo.png b/view/peko/activity/act-kitchen/images/logo.png index 70ff4ef..dd9636d 100644 Binary files a/view/peko/activity/act-kitchen/images/logo.png and b/view/peko/activity/act-kitchen/images/logo.png differ diff --git a/view/peko/activity/act-kitchen/images/mineBg.png b/view/peko/activity/act-kitchen/images/mineBg.png new file mode 100644 index 0000000..cad5432 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/mineBg.png differ diff --git a/view/peko/activity/act-kitchen/images/my.png b/view/peko/activity/act-kitchen/images/my.png index 7c404d8..629fabc 100644 Binary files a/view/peko/activity/act-kitchen/images/my.png and b/view/peko/activity/act-kitchen/images/my.png differ diff --git a/view/peko/activity/act-kitchen/images/myBoxBg.png b/view/peko/activity/act-kitchen/images/myBoxBg.png new file mode 100644 index 0000000..26c9595 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/myBoxBg.png differ diff --git a/view/peko/activity/act-kitchen/images/no-money.png b/view/peko/activity/act-kitchen/images/no-money.png new file mode 100644 index 0000000..c460916 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/no-money.png differ diff --git a/view/peko/activity/act-kitchen/images/qp.png b/view/peko/activity/act-kitchen/images/qp.png index af1f2fb..054c0ac 100644 Binary files a/view/peko/activity/act-kitchen/images/qp.png and b/view/peko/activity/act-kitchen/images/qp.png differ diff --git a/view/peko/activity/act-kitchen/images/rank_icon.png b/view/peko/activity/act-kitchen/images/rank_icon.png index 87a295a..d57450d 100644 Binary files a/view/peko/activity/act-kitchen/images/rank_icon.png and b/view/peko/activity/act-kitchen/images/rank_icon.png differ diff --git a/view/peko/activity/act-kitchen/images/record/diamond.png b/view/peko/activity/act-kitchen/images/record/diamond.png new file mode 100644 index 0000000..6c9aa8d Binary files /dev/null and b/view/peko/activity/act-kitchen/images/record/diamond.png differ diff --git a/view/peko/activity/act-kitchen/images/record/record-bg.png b/view/peko/activity/act-kitchen/images/record/record-bg.png new file mode 100644 index 0000000..89d2aab Binary files /dev/null and b/view/peko/activity/act-kitchen/images/record/record-bg.png differ diff --git a/view/peko/activity/act-kitchen/images/record/result.png b/view/peko/activity/act-kitchen/images/record/result.png new file mode 100644 index 0000000..62793cf Binary files /dev/null and b/view/peko/activity/act-kitchen/images/record/result.png differ diff --git a/view/peko/activity/act-kitchen/images/record/touru.png b/view/peko/activity/act-kitchen/images/record/touru.png new file mode 100644 index 0000000..bdbf904 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/record/touru.png differ diff --git a/view/peko/activity/act-kitchen/images/record_icon.png b/view/peko/activity/act-kitchen/images/record_icon.png index 0380e3d..8395c42 100644 Binary files a/view/peko/activity/act-kitchen/images/record_icon.png and b/view/peko/activity/act-kitchen/images/record_icon.png differ diff --git a/view/peko/activity/act-kitchen/images/resultOut.png b/view/peko/activity/act-kitchen/images/resultOut.png index 8bc6907..eb2d176 100644 Binary files a/view/peko/activity/act-kitchen/images/resultOut.png and b/view/peko/activity/act-kitchen/images/resultOut.png differ diff --git a/view/peko/activity/act-kitchen/images/resultText.png b/view/peko/activity/act-kitchen/images/resultText.png index 7e7badc..0d3991c 100644 Binary files a/view/peko/activity/act-kitchen/images/resultText.png and b/view/peko/activity/act-kitchen/images/resultText.png differ diff --git a/view/peko/activity/act-kitchen/images/result_popup.png b/view/peko/activity/act-kitchen/images/result_popup.png new file mode 100644 index 0000000..fee8bb4 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/result_popup.png differ diff --git a/view/peko/activity/act-kitchen/images/result_popupNo.png b/view/peko/activity/act-kitchen/images/result_popupNo.png new file mode 100644 index 0000000..2fc7d04 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/result_popupNo.png differ diff --git a/view/peko/activity/act-kitchen/images/result_popupTitle.png b/view/peko/activity/act-kitchen/images/result_popupTitle.png new file mode 100644 index 0000000..6fdf74b Binary files /dev/null and b/view/peko/activity/act-kitchen/images/result_popupTitle.png differ diff --git a/view/peko/activity/act-kitchen/images/rou.png b/view/peko/activity/act-kitchen/images/rou.png new file mode 100644 index 0000000..df6e82e Binary files /dev/null and b/view/peko/activity/act-kitchen/images/rou.png differ diff --git a/view/peko/activity/act-kitchen/images/rule-bg.png b/view/peko/activity/act-kitchen/images/rule-bg.png new file mode 100644 index 0000000..48e2c29 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/rule-bg.png differ diff --git a/view/peko/activity/act-kitchen/images/rule_icon.png b/view/peko/activity/act-kitchen/images/rule_icon.png index f4dd08a..0afdd47 100644 Binary files a/view/peko/activity/act-kitchen/images/rule_icon.png and b/view/peko/activity/act-kitchen/images/rule_icon.png differ diff --git a/view/peko/activity/act-kitchen/images/sBox.png b/view/peko/activity/act-kitchen/images/sBox.png index 689221f..1b4b6d3 100644 Binary files a/view/peko/activity/act-kitchen/images/sBox.png and b/view/peko/activity/act-kitchen/images/sBox.png differ diff --git a/view/peko/activity/act-kitchen/images/sBoxTextBg.png b/view/peko/activity/act-kitchen/images/sBoxTextBg.png index 977f3c3..7c9659c 100644 Binary files a/view/peko/activity/act-kitchen/images/sBoxTextBg.png and b/view/peko/activity/act-kitchen/images/sBoxTextBg.png differ diff --git a/view/peko/activity/act-kitchen/images/sBox_active.png b/view/peko/activity/act-kitchen/images/sBox_active.png index fbca8ca..01b52ff 100644 Binary files a/view/peko/activity/act-kitchen/images/sBox_active.png and b/view/peko/activity/act-kitchen/images/sBox_active.png differ diff --git a/view/peko/activity/act-kitchen/images/sBoxbei.png b/view/peko/activity/act-kitchen/images/sBoxbei.png index bae429c..9dbd494 100644 Binary files a/view/peko/activity/act-kitchen/images/sBoxbei.png and b/view/peko/activity/act-kitchen/images/sBoxbei.png differ diff --git a/view/peko/activity/act-kitchen/images/sqp.png b/view/peko/activity/act-kitchen/images/sqp.png index 2651efe..d300b83 100644 Binary files a/view/peko/activity/act-kitchen/images/sqp.png and b/view/peko/activity/act-kitchen/images/sqp.png differ diff --git a/view/peko/activity/act-kitchen/images/su.png b/view/peko/activity/act-kitchen/images/su.png new file mode 100644 index 0000000..20651f5 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/su.png differ diff --git a/view/peko/activity/act-kitchen/images/t1.png b/view/peko/activity/act-kitchen/images/t1.png new file mode 100644 index 0000000..16bdfdb Binary files /dev/null and b/view/peko/activity/act-kitchen/images/t1.png differ diff --git a/view/peko/activity/act-kitchen/images/t2.png b/view/peko/activity/act-kitchen/images/t2.png new file mode 100644 index 0000000..e18c9a7 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/t2.png differ diff --git a/view/peko/activity/act-kitchen/images/t3.png b/view/peko/activity/act-kitchen/images/t3.png new file mode 100644 index 0000000..7ea0783 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/t3.png differ diff --git a/view/peko/activity/act-kitchen/images/tab.png b/view/peko/activity/act-kitchen/images/tab.png index a650f83..67a2b64 100644 Binary files a/view/peko/activity/act-kitchen/images/tab.png and b/view/peko/activity/act-kitchen/images/tab.png differ diff --git a/view/peko/activity/act-kitchen/images/tab_active.png b/view/peko/activity/act-kitchen/images/tab_active.png index 8124aee..4574e83 100644 Binary files a/view/peko/activity/act-kitchen/images/tab_active.png and b/view/peko/activity/act-kitchen/images/tab_active.png differ diff --git a/view/peko/activity/act-kitchen/images/title-bg.png b/view/peko/activity/act-kitchen/images/title-bg.png new file mode 100644 index 0000000..8effc65 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/title-bg.png differ diff --git a/view/peko/activity/act-kitchen/images/wljg.png b/view/peko/activity/act-kitchen/images/wljg.png index 421dd2c..42ed518 100644 Binary files a/view/peko/activity/act-kitchen/images/wljg.png and b/view/peko/activity/act-kitchen/images/wljg.png differ diff --git a/view/peko/activity/act-kitchen/images/xx.png b/view/peko/activity/act-kitchen/images/xx.png new file mode 100644 index 0000000..ab3f810 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/xx.png differ diff --git a/view/peko/activity/act-kitchen/index.html b/view/peko/activity/act-kitchen/index.html index 04adce5..d5b2bb2 100644 --- a/view/peko/activity/act-kitchen/index.html +++ b/view/peko/activity/act-kitchen/index.html @@ -23,7 +23,7 @@
- 請選擇：30 秒 +
@@ -40,114 +40,117 @@ 10000
+
-
-
- +
+
+
洋葱
已选择

- 100 +

x15
-
+
- +
洋葱
已选择

- 100 +

x15
-
+
- +
洋葱
已选择

- 100 +

x15
-
+
- +
洋葱
已选择

- 100 +

x15
-
-
- +
+
+
洋葱
已选择

- 100 +

x15
-
+
- +
洋葱
已选择

- 100 +

x15
-
+
- +
洋葱
已选择

- 100 +

x15
-
+
- +
洋葱
已选择

- 100 +

x15
+ +
@@ -162,22 +165,23 @@ - - - - - - - - - - + + + + + + + + + +

本活動最終解釋權歸Piko所有
- 活動獎勵與Google Play/Apple Store無關

+ 活動獎勵與Google Play/Apple Store無關 +
@@ -190,6 +194,123 @@ 今日獎勵:0
+ +
+
+
本輪結果
+ +
    +
  • + +
    洋葱
    +
    • +
+ +
+

+ + 0 +

+

+ + 0 +

+
+ +
+
+ +
虚位以待
+

+ + 0 +

+
+
+ +
虚位以待
+

+ + 0 +

+
+
+ +
虚位以待
+

+ + 0 +

+
+
+
+
+ +
+
+
+
+

參與方式

+ 用戶可通過花費鉆石參與《星級廚房》遊戲，每次最少消耗100鉆石，每回合時間30秒 +

+
+
+

禮物發放

+ 每次參與遊戲後會獲得一次禮物開獎; +

+ 每次隨機從8種食材中選取一個或多個作為中獎食材，中獎後獲得（中獎物品所花費的鉆石數*中獎食材對應倍數）的鉆石獎勵，當中獎多個食材時，獲得的鉆石會同時發放。鉆石將直接發放到賬戶中。 +

+ 例如購買1個5倍番茄花費100鉆，購買1個蘿蔔花費100鉆，中獎後將獲得100*5+100*5=1000鉆。 +
+
+

其他說明

+ 如果以上說明未能解答您的疑問，請聯繫客服，會有專人解答疑難 +

本活動以及活動獎勵與Google/蘋果公司無關

+
+
+
+
+ +
+
+
+ +
+ 今日獎勵榜 + 今日歐皇榜 +
+ +
+ +
+
+ +
    + +
+ +
+ +
+ + +
+ +
+
+
+ +
+
+
鉆石余額不足
+ +

当前鉆石不足

+
+
取消
+
获取鉆石
+
+
+
@@ -199,4 +320,5 @@ + \ No newline at end of file diff --git a/view/peko/activity/act-kitchen/js/index.js b/view/peko/activity/act-kitchen/js/index.js index 4b52471..e979ab0 100644 --- a/view/peko/activity/act-kitchen/js/index.js +++ b/view/peko/activity/act-kitchen/js/index.js @@ -25,4 +25,619 @@ const toastMsg = (content = '操作完成', time = 2) => { time, skin: 'msg' }) -} \ No newline at end of file +} +var diamonds = 0;//存储当前用户钻石余额 +var gearPosition = 100;//当前档位; +var roundId;//当前进行轮的roundId; +var timer;//定时器存储 +var countupTimes;//存储每个阶段倒计时剩余时间戳; +var userComeinTime, startTime, drawStageStartTime, showResultStageStartTime, endTime; +var circulate = 0;//等待开奖中动效计时 +var circulateTime;//存储开奖中动效计时器 +// 榜單類型，1是鉆石榜，2是歐皇榜 +let type = 1 +let pageSize = 20 +// 鉆石榜單 +let pageD = 1 +let myInfoD = [] +let rankListD = [] +// 歐皇榜單 +let pageN = 1 +let myInfoN = [] +let rankListN = [] +let clickTabCanNetworkN = true +let isLockD = true +let isLockN = true +let isLock = true +let canRequsetNextPageD = true +let canRequsetNextPageN = true +$(function () { + getInfoFromClient() + setTimeout(function () { + getNewestAct(); + getUserInfo(); + }, 100) +}) +// 獲取用戶相關信息 +function getUserInfo () { + networkRequest({ + type: 'GET', + url: urlPrefix + '/act/luckySea/getUserActInfo', + success (res) { + if (res.code === 200) { + diamonds = res.data.diamonds; + $('.my .right b').text(`今日獎勵: ${unitProcessing(res.data.todayReward, 100000, 1, 'w')}`); + $('.my .left b').text(`鉆石余額: ${unitProcessing(res.data.diamonds, 100000, 1, 'w')}`); + } else { + toastMsg(res.message) + return + } + }, + error (err) { + toastMsg('網絡錯誤，請退出重進') + } + }) +} +// 获取最新一次的深海奇缘活动信息 +function getNewestAct () { + showLoading() + networkRequest({ + type: 'GEt', + url: urlPrefix + '/act/luckySea/getNewestAct', + data: { count: 10 }, + success (res) { + if (res.code === 200) { + // 处理往轮结果传参 + roundId = res.data.roundId; + listLuckySeaActInfo(roundId); + if ($.isEmptyObject(res.data) || res.data.status === 4) { + return showLoading('服務器正在維護中...') + } else { + if (res.timestamp >= res.data.endTime) { //請求的還是上一輪的數據，重新請求 + console.log('請求的還是上一輪的數據，必須重新請求'); + showLoading() + timer = setTimeout(() => { + getNewestAct() + }, 600); + } else {//活动状态(1: 选择阶段 2:正在开奖 3:已经开奖) + userComeinTime = res.timestamp + startTime = res.data.startTime + drawStageStartTime = res.data.drawStageStartTime + showResultStageStartTime = res.data.showResultStageStartTime + endTime = res.data.endTime + clearInterval(circulateTime); + if (startTime <= userComeinTime && userComeinTime < drawStageStartTime) { + // 第一阶段 + console.log("第一阶段"); + countupTimes = Math.floor(((drawStageStartTime - startTime) - (userComeinTime - startTime)) / 1000 + 1); + countup(1); + listItem(roundId); + $('.masks').hide(); + $('.result_popup').hide(); + } else if (drawStageStartTime <= userComeinTime && userComeinTime < showResultStageStartTime) { + // 第二阶段 + console.log("第二阶段"); + countupTimes = Math.floor(((showResultStageStartTime - drawStageStartTime) - (userComeinTime - drawStageStartTime)) / 1000 + 1); + countup(2); + circulateTime = setInterval(function () { + circulate = circulate > 8 ? 0 : circulate; + circulate++; + $('.box .box_in .sBox .sBox1').removeClass('sBox_active'); + $(`.box .box_in .item${circulate} .sBox1`).addClass('sBox_active'); + $('.box .box_in .sBox .qp').hide(); + $('.masks').show(); + }, 100); + } else if (showResultStageStartTime <= userComeinTime && userComeinTime < endTime) { + // 第三阶段 + console.log("第三阶段"); + countupTimes = Math.floor(((endTime - showResultStageStartTime) - (userComeinTime - showResultStageStartTime)) / 1000 + 1); + countup(3); + // 渲染本轮结果 + var str = ''; + $('.result_popup .result_popup_in .resultList li').remove(); + res.data.drawItemList.forEach(res => { + str += ` +
  • + +
    ${res.drawName}
    +
    • + ` + }) + $('.result_popup .result_popup_in .resultList').append(str); + // 渲染本轮投入和产出 + var costPieceNum = 0; + res.data.userDrawResult.drawRecords.forEach((res, i) => { + costPieceNum = costPieceNum + res.costPieceNum; + }) + $('.result_popup .result_popup_in .income .p1 b').text(costPieceNum); + $('.result_popup .result_popup_in .income .p2 b').text(res.data.userDrawResult.prizeDiamonds); + // 處理前三 + var top3 = res.data.rankUserList.slice(0, 3); + if (top3.length < 3) { + let arr = new Array(3 - top3.length).fill({ + avatar: './images/logo.png', + nick: '虛位以待', + prizeDiamonds: "" + }) + top3.push(...arr) + } + // 渲染前三 + top3.forEach((res, i) => { + $(`.result_popup .result_popup_in .no .no${i + 1} .tx`).attr('src', res.avatar); + $(`.result_popup .result_popup_in .no .no${i + 1} .tx`).attr('uid', res.uid); + $(`.result_popup .result_popup_in .no .no${i + 1} .name`).text(res.nick); + $(`.result_popup .result_popup_in .no .no${i + 1} p b`).text(res.prizeDiamonds); + }) + $('.result_popup').show(); + } + } + } + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('網絡錯誤，請退出重進') + } + }) +} +// 倒計時 +function countup (status) { + timer = setInterval(() => { + countupTimes-- + if (countupTimes <= 0) { + if (status == 1) { + $('.box .boxTitle').html(`請選擇：${0} 秒`); + } else if (status == 2) { + circulate = 0; + $('.box .boxTitle').html(`开奖中：${0} 秒`); + } else { + $('.box .boxTitle').html(`下一轮：${0} 秒`); + $('.result_popup .result_popup_in .result_popup_inTitle b').html(`${0}`); + } + getNewestAct(); + clearInterval(timer); + } else { + if (status == 1) { + $('.box .boxTitle').html(`請選擇：${countupTimes} 秒`); + } else if (status == 2) { + $('.box .boxTitle').html(`开奖中：${countupTimes} 秒`); + } else { + $('.box .boxTitle').html(`下一轮：${countupTimes} 秒`); + $('.result_popup .result_popup_in .result_popup_inTitle b').html(`${countupTimes}`); + } + } + + }, 1000); +} +// 渲染抽奖列表 +function listItem (roundId) { + showLoading() + networkRequest({ + type: 'GEt', + url: urlPrefix + '/act/luckySea/listItem', + data: { roundId }, + success (res) { + if (res.code === 200) { + res.data.forEach((res, i) => { + $(`.box .box_in .item${i + 1}`).attr('id', res.id); + $(`.box .box_in .item${i + 1} .sBox1 img`).attr('src', res.name == '洋蔥' ? './images/1.png' : res.name == '番茄' ? './images/2.png' : res.name == '蘑菇' ? './images/3.png' : res.name == '土豆' ? './images/4.png' : res.name == '大閘蟹' ? './images/5.png' : res.name == '魚' ? './images/6.png' : res.name == '雞肉' ? './images/7.png' : res.name == '龍蝦' ? './images/8.png' : res.imgUrl); + $(`.box .box_in .item${i + 1} .qp p b`).text(res.costPieceNum); + $(`.box .box_in .item${i + 1} .bei`).text('x' + res.multiple); + $(`.box .box_in .item${i + 1} .SboxText`).text(res.name); + if (res.costPieceNum > 0) { + $(`.box .box_in .item${i + 1} .qp`).show(); + $(`.box .box_in .item${i + 1} .sBox1 `).addClass('sBox_active'); + } else { + $(`.box .box_in .item${i + 1} .qp`).hide(); + $(`.box .box_in .item${i + 1} .sBox1 `).removeClass('sBox_active'); + } + }) + $('.box').show(); + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('網絡錯誤，請退出重進') + } + }) +} +// 获取往轮结果 +function listLuckySeaActInfo (roundId) { + showLoading() + networkRequest({ + type: 'GEt', + url: urlPrefix + '/act/luckySea/listLuckySeaActInfo', + data: { count: 10, roundId }, + success (res) { + if (res.code === 200) { + res.data.forEach((res, i) => { + if (res.drawItemList.length > 1) { + if (res.drawName == '荤菜狂欢') { + $(`.resultOut .sqp_in${i + 1} `).attr('src', './images/rou.png'); + } else { + $(`.resultOut .sqp_in${i + 1} `).attr('src', './images/su.png'); + } + } else { + // $(`.resultOut .sqp_in${i + 1} `).attr('src', res.drawItemList[0].drawImageUrl); + $(`.resultOut .sqp_in${i + 1} `).attr('src', res.drawItemList[0].drawName == '洋蔥' ? './images/1.png' : res.drawItemList[0].drawName == '番茄' ? './images/2.png' : res.drawItemList[0].drawName == '蘑菇' ? './images/3.png' : res.drawItemList[0].drawName == '土豆' ? './images/4.png' : res.drawItemList[0].drawName == '大閘蟹' ? './images/5.png' : res.drawItemList[0].drawName == '魚' ? './images/6.png' : res.drawItemList[0].drawName == '雞肉' ? './images/7.png' : res.drawItemList[0].drawName == '龍蝦' ? './images/8.png' : res.drawItemList[0].drawImageUrl); + } + }); + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('網絡錯誤，請退出重進') + } + }) +} +// 档位切换 +$('.box .tab div').click(function () { + var i = $(this).index() + 1; + $(this).addClass('active').siblings().removeClass('active'); + gearPosition = i == 1 ? 100 : i == 2 ? 1000 : 10000; +}) +// 抽奖接口 +function draw (itemId, tais) { + // showLoading() + networkRequest({ + type: 'POST', + url: urlPrefix + '/act/luckySea/draw', + data: { itemId, num: gearPosition }, + success (res) { + if (res.code === 200) { + listItem(roundId); + getUserInfo(); + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('網絡錯誤，請退出重進') + } + }) +} +// 选择食材按钮 +$('.box .box_in .sBox').click(function () { + var id = $(this).attr('id'); + draw(id, $(this)); +}) +// 去充值按钮 +$('.my div .add').click(function () { + if (browser.app) { + if (browser.android) { + let channel = pubInfo.deviceInfo.channel; + console.log(pubInfo.deviceInfo); + if (channel == "google") { + window.androidJsObj.openChargePage(6); + } else { + window.androidJsObj.openChargePage(6); + window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4'; + } + } else if (browser.ios) { + let channel = pubInfo.deviceInfo.channel; + if (channel == "appstore") { + window.webkit.messageHandlers.openChargePage.postMessage(null); + } else { + window.webkit.messageHandlers.chargePayClickPage.postMessage(6); + window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4'; + } + } + } else { + toastMsg('請在app內打開') + } +}) +// 打开规则弹窗 +$('.header .rule_icon').click(function () { + $('.shade-mask').show() +}) +// 关闭规则弹窗 +$('.shade-mask').click(function () { + $('.shade-mask').hide() +}) +// 打开游戏记录 +$('.header .record_icon').click(function () { + window.location.href = './record.html' +}) +// 关闭排行榜 +$('.shade-mask-rank').click(function () { + $('.shade-mask-rank').hide() + return false; +}) +// 監聽今日排名按鈕點擊事件 +$('.header .rank_icon').click(function () { + getListRank(type, pageD) + $('.shade-mask-rank').show() +}) +// 監聽今日排名tab +$('.tab-wrap').on('click', 'span', function () { + $(this).addClass('active').siblings().removeClass('active') + if (type === $(this).index() + 1) return + type = $(this).index() + 1 + + $('.other-rank').scrollTop(0) + if (type === 1) { + renderRankList() + renderMyInfo() + } else { + if (clickTabCanNetworkN) { + getListRank(type, pageN) + } else { + renderRankList() + renderMyInfo() + } + clickTabCanNetworkN = false + } + + return false; +}) +function getListRank (type, page) { + networkRequest({ + type: 'GET', + url: urlPrefix + '/act/luckySea/listRank', + data: { + type, + page, + pageSize + }, + success (res) { + if (res.code === 200) { + if (type === 1) { + // 鉆石榜單 + if (res.data.rankList.length === pageSize) { + // 可以請求下一頁 + canRequsetNextPageD = true + } else { + // 不再請求下一頁 + canRequsetNextPageD = false + } + rankListD.push(...res.data.rankList) + myInfoD = res.data.myRankInfo + renderMyInfo() + renderRankList() + isLockD = true + } else { + if (res.data.rankList.length === pageSize) { + // 可以請求下一頁 + canRequsetNextPageN = true + } else { + // 不再請求下一頁 + canRequsetNextPageN = false + } + rankListN.push(...res.data.rankList) + myInfoN = res.data.myRankInfo + renderMyInfo() + renderRankList() + isLockN = true + } + } else { + toastMsg(res.message) + } + }, + error (err) { + toastMsg('網絡錯誤') + } + }) +} +// 渲染底部個人信息 +function renderMyInfo () { + if (type === 1) { + // 鉆石榜單 + let erbanNo = myInfoD.erbanNo + let myIndex = rankListD.findIndex((item, index) => { + return item.erbanNo === erbanNo + }) + if (myIndex === -1) { + $('.mine-rank').html('未上榜') + } else { + $('.mine-rank').html(myIndex + 1) + } + $('.mine-info').find('img').attr('src', myInfoD.avatar) + if (myInfoD.nick) { + myInfoD.nick.length > 5 ? myInfoD.nick.slice(0, 5) + '...' : myInfoD.nick + } else { + myInfoD.nick = '未知' + } + $('.mine-info').find('.mine-nick').html(myInfoD.nick) + let tostr = myInfoD.num.toString() + let num + if (tostr.length >= 5) { + num = (myInfoD.num / 10000).toFixed(2) + 'w' + } else { + num = myInfoD.num + } + // $('.mine-diamond-num').html('今日獎勵' + num) + $('.mine-diamond-num').html(num == 0 ? '—— ——' : num) + } else { + let erbanNo = myInfoN.erbanNo + let myIndex = rankListN.findIndex((item, index) => { + return item.erbanNo === erbanNo + }) + if (myIndex === -1) { + $('.mine-rank').html('未上榜') + } else { + $('.mine-rank').html(myIndex + 1) + } + $('.mine-info').find('img').attr('src', myInfoN.avatar) + if (myInfoN.nick) { + myInfoN.nick.length > 5 ? myInfoN.nick.slice(0, 5) + '...' : myInfoN.nick + } else { + myInfoN.nick = '未知' + } + $('.mine-info').find('.mine-nick').html(myInfoN.nick) + $('.mine-diamond-num').html('猜中 ' + myInfoN.num + ' 次') + } +} +// 渲染榜單信息 +function renderRankList () { + if (type === 1) { + // 鉆石榜單 + // 渲染前3 + let topThreeArr = rankListD.slice(0, 1) + if (rankListD.length === 0) { + let len = 1 - rankListD.length + let arr = new Array(len).fill({ + nick: '虛位以待', + avatar: './images/default.png', + num: '' + }) + topThreeArr.push(...arr) + } + let topThreeStr = '' + topThreeArr.map((item) => { + let tostr = item.num.toString() + let num + if (tostr.length >= 5) { + num = (item.num / 10000).toFixed(2) + 'w' + } else { + num = item.num + } + + topThreeStr = ` +
    +
    +

    + +
    +

    ${num}

    +

    ${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}

    +
    + ` + }) + $('.topthree-wrap').html(topThreeStr) + $('.topthree-wrap .info-wrap').click(function () { + let uid = $(this).attr('uid') + openPerson(uid) + }) + + + // 渲染非前3 + let othersArr = rankListD.slice(1) + let others = '' + othersArr.map((item, index) => { + let tostr = item.num.toString() + let num + if (tostr.length >= 5) { + num = (item.num / 10000).toFixed(2) + 'w' + } else { + num = item.num + } + others += ` +
  • + ${index + 2} +
    + + ${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick} +
    + ${num} +
    • + ` + }) + $('.other-rank').html(others) + $('.other-rank li').click(function () { + let uid = $(this).attr('uid') + openPerson(uid) + }) + } else { + // 歐皇榜單 + // 渲染前3 + let topThreeArr = rankListN.slice(0, 1) + if (rankListN.length === 0) { + let len = 1 - rankListN.length + let arr = new Array(len).fill({ + nick: '虛位以待', + avatar: './images/default.png' + }) + topThreeArr.push(...arr) + } + let topThreeStr = '' + topThreeArr.map((item) => { + let num = '' + if (item.erbanNo) { + num = '猜中' + item.num + '次' + } + topThreeStr = ` +
    +
    +

    + +
    +

    ${num}

    +

    ${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}

    +
    + ` + }) + $('.topthree-wrap').html(topThreeStr) + $('.topthree-wrap .info-wrap').click(function () { + let uid = $(this).attr('uid') + openPerson(uid) + }) + + // 渲染非前3 + let othersArr = rankListN.slice(1) + console.log(othersArr); + let others = '' + othersArr.map((item, index) => { + let num + if (item.erbanNo) { + num = '猜中 ' + item.num + ' 次' + } + others += ` +
  • + ${index + 2} +
    + + ${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick} +
    + ${num} +
    • + ` + }) + $('.other-rank').html(others) + $('.other-rank li').click(function () { + let uid = $(this).attr('uid') + openPerson(uid) + }) + } + +} +// 取消余额不足弹窗 +$('.cancel-btn').click(function () { + $('.shade-mask-fragmentNum').hide(); +}) +// 取消余额不足跳转弹窗按钮 +$('.shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .confirm-btn').click(function () { + if (browser.app) { + if (browser.android) { + let channel = pubInfo.deviceInfo.channel; + console.log(pubInfo.deviceInfo); + if (channel == "google") { + window.androidJsObj.openChargePage(6); + } else { + window.androidJsObj.openChargePage(6); + window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4'; + } + } else if (browser.ios) { + let channel = pubInfo.deviceInfo.channel; + if (channel == "appstore") { + window.webkit.messageHandlers.openChargePage.postMessage(null); + } else { + window.webkit.messageHandlers.chargePayClickPage.postMessage(6); + window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4'; + } + } + } else { + toastMsg('請在app內打開') + } + $('.shade-mask-fragmentNum').hide() +}) \ No newline at end of file diff --git a/view/peko/activity/act-kitchen/js/record.js b/view/peko/activity/act-kitchen/js/record.js new file mode 100644 index 0000000..0249c80 --- /dev/null +++ b/view/peko/activity/act-kitchen/js/record.js @@ -0,0 +1,152 @@ +let urlPrefix = getUrlPrefix() +let browser = checkVersion() +// 获取用户的游戏记录 +// let recordList = [] +let page = 1 +let pageSize = 10 +let canNext = true; + +let lisIndexId = 0; +var lisIndex = 0; +const toastMsg = (content = '', time = 2) => { + layer.open({ + content, + time, + skin: 'msg' + }) +} + +$(function () { + getInfoFromClient() + if (EnvCheck() === 'test') { new VConsole } + setTimeout(function () { + getUserRecord() + }, 100) + + function getUserRecord () { + canNext = false + networkRequest({ + type: 'GET', + url: urlPrefix + '/act/luckySea/listDrawRecord', + data: { + page, + pageSize + }, + success (res) { + if (res.code === 200) { + if (res.data.length != 0) { + // 能够继续请求下一页 + canNext = true + // recordList.push(...res.data) + renderRecord(res.data) + } else { + canNext = false + toastMsg('沒有更多啦~') + } + + } else { + canNext = true + toastMsg(res.message) + } + }, + error (err) { + canNext = true + toastMsg('網絡錯誤，請退出重進') + } + }) + } + + // 渲染游戏记录 + const renderRecord = (recordList) => { + if (recordList.length === 0) { + $('.record-list').hide(); + // $('.img').show(); + } else { + // $('.record-list li').remove(); + $('.record-list').show(); + $('.img').hide(); + console.log(recordList, 'recordList') + var drawId; + var itemUrl; + var results = []; + + + let str = ''; + recordList.forEach((res, index) => { + drawId = res.drawId; + results.push(res.results); + + res.results.forEach(item => { + // console.log(drawId, 'drawId'); + if (drawId == item.itemId) { + itemUrl = item.itemUrl + } + }) + str += ` +
  • +

    ${dateFormat(res.drawTime, 'yy-MM-dd hh:mm:ss')}

    +
    + NO.${res.roundId} +

    哎呀~猜錯了 o(╥﹏╥)o

    +

    厲害~猜對了 ୧(๑•̀◡•́๑)૭

    +
    +
    +
    + +
    +
    +

    獎勵:

    + + ${res.reward} +
    +
    + ${res.drawItemList.map(item => { + return `
    ` + }).join('')} +
    +
    +
    +
    +
    + +
    +
    +
    • + ` + }) + $('.record-list').append(str) + + + results.forEach((res, index) => { + res.forEach(val => { + $('.record-list li').eq(lisIndexId).find('.list').append(` +
    +

    +
    + + ${val.costPiece} +
    +
    + `) + }) + lisIndex = lisIndex + 1; + lisIndexId = lisIndexId + 1; + }); + } + + + } + + $(window).scroll(function () { + if ($(window).scrollTop() + $(window).height() > $(document).height() - 10) { + // 请求下一页 + if (canNext) { + page++ + getUserRecord() + } else { + console.log('无数据被锁定'); + } + } + }); + +}) diff --git a/view/peko/activity/act-kitchen/js/wow.js b/view/peko/activity/act-kitchen/js/wow.js new file mode 100644 index 0000000..78408cc --- /dev/null +++ b/view/peko/activity/act-kitchen/js/wow.js @@ -0,0 +1,45 @@ +var baba = document.querySelector('body'); +baba.addEventListener('click', function (e) { + $('body,html').css({ "width": "100%", "position": "relative", "overflow": "hidden" }); + tianJia(e); +}) + +var erZi = []; +function tianJia (e) { + var sunZi = document.createElement('div'); + sunZi.className = 'rabbit'; + // sunZi.innerHTML = ''; + sunZi.innerHTML = ''; + baba.appendChild(sunZi); + erZi.push({ + el: sunZi, + top: e.pageY - 60, + left: e.pageX - 30, + opacity: 1, + scale: 1, + color: `rgb(${255 * Math.random()},${255 * Math.random()},${255 * Math.random()})` + }); + move(); +}; +function move () { + for (var i = 0; i < erZi.length; i++) { + if (erZi[i].opacity <= 0) { + baba.removeChild(erZi[i].el); + erZi.splice(i, 1); + return; + } + erZi[i].top--; + erZi[i].opacity = erZi[i].opacity - 0.04; + // erZi[i].scale = erZi[i].scale + 0.0001; + erZi[i].el.style.cssText = ` + top: ${erZi[i].top}px; + left: ${erZi[i].left}px; + color: ${erZi[i].color}; + opacity: ${erZi[i].opacity}; + transform: scale(${erZi[i].scale}); + position: absolute; + ` + + } + window.requestAnimationFrame(move); +} \ No newline at end of file diff --git a/view/peko/activity/act-kitchen/record.html b/view/peko/activity/act-kitchen/record.html new file mode 100644 index 0000000..709eda8 --- /dev/null +++ b/view/peko/activity/act-kitchen/record.html @@ -0,0 +1,146 @@ + + + + + + + 游戏记录 + + + + + + +
      + +
    + + + + + + + + + + \ No newline at end of file