新增厨房重构
This commit is contained in:
Dragon
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
307
view/peko/activity/act-kitchen/css/record.css
Normal file
307
view/peko/activity/act-kitchen/css/record.css
Normal file
@@ -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;
|
||||
}
|
||||
350
view/peko/activity/act-kitchen/css/record.scss
Normal file
350
view/peko/activity/act-kitchen/css/record.scss
Normal file
@@ -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 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
BIN
view/peko/activity/act-kitchen/images/1.png
Normal file
BIN
view/peko/activity/act-kitchen/images/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
view/peko/activity/act-kitchen/images/2.png
Normal file
BIN
view/peko/activity/act-kitchen/images/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
view/peko/activity/act-kitchen/images/3.png
Normal file
BIN
view/peko/activity/act-kitchen/images/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
view/peko/activity/act-kitchen/images/4.png
Normal file
BIN
view/peko/activity/act-kitchen/images/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
view/peko/activity/act-kitchen/images/5.png
Normal file
BIN
view/peko/activity/act-kitchen/images/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
view/peko/activity/act-kitchen/images/6.png
Normal file
BIN
view/peko/activity/act-kitchen/images/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
view/peko/activity/act-kitchen/images/7.png
Normal file
BIN
view/peko/activity/act-kitchen/images/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
view/peko/activity/act-kitchen/images/8.png
Normal file
BIN
view/peko/activity/act-kitchen/images/8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 1.8 KiB |
BIN
view/peko/activity/act-kitchen/images/border.png
Normal file
BIN
view/peko/activity/act-kitchen/images/border.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 5.7 KiB |
BIN
view/peko/activity/act-kitchen/images/first.png
Normal file
BIN
view/peko/activity/act-kitchen/images/first.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 981 KiB After Width: | Height: | Size: 273 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 319 KiB After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
BIN
view/peko/activity/act-kitchen/images/mineBg.png
Normal file
BIN
view/peko/activity/act-kitchen/images/mineBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 326 KiB After Width: | Height: | Size: 60 KiB |
BIN
view/peko/activity/act-kitchen/images/myBoxBg.png
Normal file
BIN
view/peko/activity/act-kitchen/images/myBoxBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
BIN
view/peko/activity/act-kitchen/images/no-money.png
Normal file
BIN
view/peko/activity/act-kitchen/images/no-money.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 18 KiB |
BIN
view/peko/activity/act-kitchen/images/record/diamond.png
Normal file
BIN
view/peko/activity/act-kitchen/images/record/diamond.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 784 B |
BIN
view/peko/activity/act-kitchen/images/record/record-bg.png
Normal file
BIN
view/peko/activity/act-kitchen/images/record/record-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
view/peko/activity/act-kitchen/images/record/result.png
Normal file
BIN
view/peko/activity/act-kitchen/images/record/result.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
view/peko/activity/act-kitchen/images/record/touru.png
Normal file
BIN
view/peko/activity/act-kitchen/images/record/touru.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 21 KiB |
BIN
view/peko/activity/act-kitchen/images/result_popup.png
Normal file
BIN
view/peko/activity/act-kitchen/images/result_popup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
view/peko/activity/act-kitchen/images/result_popupNo.png
Normal file
BIN
view/peko/activity/act-kitchen/images/result_popupNo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
view/peko/activity/act-kitchen/images/result_popupTitle.png
Normal file
BIN
view/peko/activity/act-kitchen/images/result_popupTitle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
view/peko/activity/act-kitchen/images/rou.png
Normal file
BIN
view/peko/activity/act-kitchen/images/rou.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
view/peko/activity/act-kitchen/images/rule-bg.png
Normal file
BIN
view/peko/activity/act-kitchen/images/rule-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 637 B |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 1.8 KiB |
BIN
view/peko/activity/act-kitchen/images/su.png
Normal file
BIN
view/peko/activity/act-kitchen/images/su.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
view/peko/activity/act-kitchen/images/t1.png
Normal file
BIN
view/peko/activity/act-kitchen/images/t1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
BIN
view/peko/activity/act-kitchen/images/t2.png
Normal file
BIN
view/peko/activity/act-kitchen/images/t2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
BIN
view/peko/activity/act-kitchen/images/t3.png
Normal file
BIN
view/peko/activity/act-kitchen/images/t3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 12 KiB |
BIN
view/peko/activity/act-kitchen/images/title-bg.png
Normal file
BIN
view/peko/activity/act-kitchen/images/title-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 717 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
BIN
view/peko/activity/act-kitchen/images/xx.png
Normal file
BIN
view/peko/activity/act-kitchen/images/xx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
@@ -23,7 +23,7 @@
|
||||
<div class="box">
|
||||
<!-- 标题 -->
|
||||
<div class="boxTitle">
|
||||
請選擇：<b>30</b> 秒
|
||||
<!-- 請選擇：<b>30</b> 秒 -->
|
||||
</div>
|
||||
<!-- tab -->
|
||||
<dib class="tab">
|
||||
@@ -40,114 +40,117 @@
|
||||
<b>10000</b>
|
||||
</div>
|
||||
</dib>
|
||||
<!-- 食材列表 -->
|
||||
<div class="box_in1 box_in">
|
||||
<div class="sBox">
|
||||
<div class="sBox1 sBox_active">
|
||||
<img src="./images/iconsssssss.png" alt="">
|
||||
<div class="sBox item1">
|
||||
<div class="sBox1 ">
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
<div class="SboxText">洋葱</div>
|
||||
<div class="qp">
|
||||
<i>已选择</i>
|
||||
<p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
|
||||
<b>100</b>
|
||||
<b></b>
|
||||
</p>
|
||||
</div>
|
||||
<div class="bei">x15</div>
|
||||
</div>
|
||||
<div class="sBox">
|
||||
<div class="sBox item2">
|
||||
<div class="sBox1">
|
||||
<img src="./images/iconsssssss.png" alt="">
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
<div class="SboxText">洋葱</div>
|
||||
<div class="qp">
|
||||
<i>已选择</i>
|
||||
<p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
|
||||
<b>100</b>
|
||||
<b></b>
|
||||
</p>
|
||||
</div>
|
||||
<div class="bei">x15</div>
|
||||
</div>
|
||||
<div class="sBox">
|
||||
<div class="sBox item3">
|
||||
<div class="sBox1">
|
||||
<img src="./images/iconsssssss.png" alt="">
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
<div class="SboxText">洋葱</div>
|
||||
<div class="qp">
|
||||
<i>已选择</i>
|
||||
<p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
|
||||
<b>100</b>
|
||||
<b></b>
|
||||
</p>
|
||||
</div>
|
||||
<div class="bei">x15</div>
|
||||
</div>
|
||||
<div class="sBox">
|
||||
<div class="sBox item4">
|
||||
<div class="sBox1">
|
||||
<img src="./images/iconsssssss.png" alt="">
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
<div class="SboxText">洋葱</div>
|
||||
<div class="qp">
|
||||
<i>已选择</i>
|
||||
<p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
|
||||
<b>100</b>
|
||||
<b></b>
|
||||
</p>
|
||||
</div>
|
||||
<div class="bei">x15</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_in1 box_in">
|
||||
<div class="sBox">
|
||||
<div class="sBox1 sBox_active">
|
||||
<img src="./images/iconsssssss.png" alt="">
|
||||
<div class="sBox item5">
|
||||
<div class="sBox1 ">
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
<div class="SboxText">洋葱</div>
|
||||
<div class="qp">
|
||||
<i>已选择</i>
|
||||
<p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
|
||||
<b>100</b>
|
||||
<b></b>
|
||||
</p>
|
||||
</div>
|
||||
<div class="bei">x15</div>
|
||||
</div>
|
||||
<div class="sBox">
|
||||
<div class="sBox item6">
|
||||
<div class="sBox1">
|
||||
<img src="./images/iconsssssss.png" alt="">
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
<div class="SboxText">洋葱</div>
|
||||
<div class="qp">
|
||||
<i>已选择</i>
|
||||
<p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
|
||||
<b>100</b>
|
||||
<b></b>
|
||||
</p>
|
||||
</div>
|
||||
<div class="bei">x15</div>
|
||||
</div>
|
||||
<div class="sBox">
|
||||
<div class="sBox item7">
|
||||
<div class="sBox1">
|
||||
<img src="./images/iconsssssss.png" alt="">
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
<div class="SboxText">洋葱</div>
|
||||
<div class="qp">
|
||||
<i>已选择</i>
|
||||
<p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
|
||||
<b>100</b>
|
||||
<b></b>
|
||||
</p>
|
||||
</div>
|
||||
<div class="bei">x15</div>
|
||||
</div>
|
||||
<div class="sBox">
|
||||
<div class="sBox item8">
|
||||
<div class="sBox1">
|
||||
<img src="./images/iconsssssss.png" alt="">
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
<div class="SboxText">洋葱</div>
|
||||
<div class="qp">
|
||||
<i>已选择</i>
|
||||
<p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
|
||||
<b>100</b>
|
||||
<b></b>
|
||||
</p>
|
||||
</div>
|
||||
<div class="bei">x15</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第二轮透明遮罩 -->
|
||||
<div class="masks"></div>
|
||||
</div>
|
||||
<!-- 往轮结果 -->
|
||||
<div class="resultOut">
|
||||
@@ -162,22 +165,23 @@
|
||||
<img src="./images/sqp.png" alt="" class="sqp sqp8">
|
||||
<img src="./images/sqp.png" alt="" class="sqp sqp9">
|
||||
<img src="./images/sqp.png" alt="" class="sqp sqp10">
|
||||
<img src="./images/iconsss.png" alt="" class="sqp_in sqp_in1">
|
||||
<img src="./images/iconsss.png" alt="" class="sqp_in sqp_in2">
|
||||
<img src="./images/iconsss.png" alt="" class="sqp_in sqp_in3">
|
||||
<img src="./images/iconsss.png" alt="" class="sqp_in sqp_in4">
|
||||
<img src="./images/iconsss.png" alt="" class="sqp_in sqp_in5">
|
||||
<img src="./images/iconsss.png" alt="" class="sqp_in sqp_in6">
|
||||
<img src="./images/iconsss.png" alt="" class="sqp_in sqp_in7">
|
||||
<img src="./images/iconsss.png" alt="" class="sqp_in sqp_in8">
|
||||
<img src="./images/iconsss.png" alt="" class="sqp_in sqp_in9">
|
||||
<img src="./images/iconsss.png" alt="" class="sqp_in sqp_in10">
|
||||
<img src="" alt="" class="sqp_in sqp_in1">
|
||||
<img src="" alt="" class="sqp_in sqp_in2">
|
||||
<img src="" alt="" class="sqp_in sqp_in3">
|
||||
<img src="" alt="" class="sqp_in sqp_in4">
|
||||
<img src="" alt="" class="sqp_in sqp_in5">
|
||||
<img src="" alt="" class="sqp_in sqp_in6">
|
||||
<img src="" alt="" class="sqp_in sqp_in7">
|
||||
<img src="" alt="" class="sqp_in sqp_in8">
|
||||
<img src="" alt="" class="sqp_in sqp_in9">
|
||||
<img src="" alt="" class="sqp_in sqp_in10">
|
||||
</div>
|
||||
<!-- 大奖展示 -->
|
||||
<div class="resultText"></div>
|
||||
<!-- 免责声明 -->
|
||||
<h3>本活動最終解釋權歸Piko所有<br>
|
||||
<b>活動獎勵與Google Play/Apple Store無關</b></h3>
|
||||
<b>活動獎勵與Google Play/Apple Store無關</b>
|
||||
</h3>
|
||||
<!-- 用户信息 -->
|
||||
<div class="my">
|
||||
<div class="left">
|
||||
@@ -190,6 +194,123 @@
|
||||
<b>今日獎勵:0</b>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 开奖结果弹窗 -->
|
||||
<div class="result_popup">
|
||||
<div class="result_popup_in">
|
||||
<div class="result_popup_inTitle">本輪結果 <b></b></div>
|
||||
<!-- 中奖结果列表 -->
|
||||
<ul class="resultList">
|
||||
<li>
|
||||
<img src="./images/logo.png" alt="">
|
||||
<div class="name">洋葱</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 收益 -->
|
||||
<div class="income">
|
||||
<p class="p1">
|
||||
<img src="./images/Sdiamond.png" alt="">
|
||||
<b>0</b>
|
||||
</p>
|
||||
<p class="p2">
|
||||
<img src="./images/Sdiamond.png" alt="">
|
||||
<b>0</b>
|
||||
</p>
|
||||
</div>
|
||||
<!-- 本轮前三 -->
|
||||
<div class="no">
|
||||
<div class="no1">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="name">虚位以待</div>
|
||||
<p>
|
||||
<img src="./images/Sdiamond.png" alt="" class="Sdiamond">
|
||||
<b> 0</b>
|
||||
</p>
|
||||
</div>
|
||||
<div class="no2">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="name">虚位以待</div>
|
||||
<p>
|
||||
<img src="./images/Sdiamond.png" alt="" class="Sdiamond">
|
||||
<b> 0</b>
|
||||
</p>
|
||||
</div>
|
||||
<div class="no3">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="name">虚位以待</div>
|
||||
<p>
|
||||
<img src="./images/Sdiamond.png" alt="" class="Sdiamond">
|
||||
<b> 0</b>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 规则弹窗 -->
|
||||
<div class="shade-mask">
|
||||
<div class="shade-content">
|
||||
<main>
|
||||
<div class="cyfs">
|
||||
<p class="title">參與方式</p>
|
||||
用戶可通過花費鉆石參與《星級廚房》遊戲，每次最少消耗100鉆石，每回合時間30秒
|
||||
<p class="jietu"><img src="./images/t1.png" alt=""></p>
|
||||
</div>
|
||||
<div class="lwff">
|
||||
<p class="title">禮物發放</p>
|
||||
每次參與遊戲後會獲得一次禮物開獎;
|
||||
<p class="jietu t2"><img src="./images/t2.png" alt=""></p>
|
||||
每次隨機從8種食材中選取一個或多個作為中獎食材，中獎後獲得（中獎物品所花費的鉆石數*中獎食材對應倍數）的鉆石獎勵，當中獎多個食材時，獲得的鉆石會同時發放。鉆石將直接發放到賬戶中。
|
||||
<p class="jietu t3"><img src="./images/t3.png" alt=""></p>
|
||||
例如購買1個5倍番茄花費100鉆，購買1個蘿蔔花費100鉆，中獎後將獲得100*5+100*5=1000鉆。
|
||||
</div>
|
||||
<div class="qtsm">
|
||||
<p class="title">其他說明</p>
|
||||
如果以上說明未能解答您的疑問，請聯繫客服，會有專人解答疑難
|
||||
<p>本活動以及活動獎勵與Google/蘋果公司無關</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 今日排名弹窗 -->
|
||||
<div class="shade-mask-rank">
|
||||
<div class="shade-content-rank">
|
||||
<div class="rank-top">
|
||||
|
||||
<div class="tab-wrap">
|
||||
<span class="diamond-rank active">今日獎勵榜</span>
|
||||
<span class="num-rank">今日歐皇榜</span>
|
||||
</div>
|
||||
|
||||
<div class="topthree-wrap">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="other-rank">
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="mine">
|
||||
<span class="mine-rank"></span>
|
||||
<div class="mine-info">
|
||||
<img src="./images/logo.png" alt="">
|
||||
<span class="mine-nick"></span>
|
||||
</div>
|
||||
<span class="mine-diamond-num"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 碎片不足提示弹窗 -->
|
||||
<div class="shade-mask-fragmentNum">
|
||||
<div class="shade-content-fragmentNum">
|
||||
<div class="fragmentNum-title">鉆石余額不足</div>
|
||||
<img src="./images/no-money.png" alt="">
|
||||
<p>当前鉆石不足</p>
|
||||
<div class="fragmentNum-btn-wrap">
|
||||
<div class="cancel-btn">取消</div>
|
||||
<div class="confirm-btn">获取鉆石</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -199,4 +320,5 @@
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="../../common/js/svga.min.js"></script>
|
||||
<script src="./js/wow.js"></script>
|
||||
<script src="./js/index.js"></script>
|
||||
@@ -25,4 +25,619 @@ const toastMsg = (content = '操作完成', time = 2) => {
|
||||
time,
|
||||
skin: 'msg'
|
||||
})
|
||||
}
|
||||
}
|
||||
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 += `
|
||||
<li>
|
||||
<img src="${res.drawName == '洋蔥' ? './images/1.png' : res.drawName == '番茄' ? './images/2.png' : res.drawName == '蘑菇' ? './images/3.png' : res.drawName == '土豆' ? './images/4.png' : res.drawName == '大閘蟹' ? './images/5.png' : res.drawName == '魚' ? './images/6.png' : res.drawName == '雞肉' ? './images/7.png' : res.drawName == '龍蝦' ? './images/8.png' : res.drawImageUrl}" alt="">
|
||||
<div class="name">${res.drawName}</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
$('.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(`請選擇：<b>${0}</b> 秒`);
|
||||
} else if (status == 2) {
|
||||
circulate = 0;
|
||||
$('.box .boxTitle').html(`开奖中：<b>${0}</b> 秒`);
|
||||
} else {
|
||||
$('.box .boxTitle').html(`下一轮：<b>${0}</b> 秒`);
|
||||
$('.result_popup .result_popup_in .result_popup_inTitle b').html(`${0}`);
|
||||
}
|
||||
getNewestAct();
|
||||
clearInterval(timer);
|
||||
} else {
|
||||
if (status == 1) {
|
||||
$('.box .boxTitle').html(`請選擇：<b>${countupTimes}</b> 秒`);
|
||||
} else if (status == 2) {
|
||||
$('.box .boxTitle').html(`开奖中：<b>${countupTimes}</b> 秒`);
|
||||
} else {
|
||||
$('.box .boxTitle').html(`下一轮：<b>${countupTimes}</b> 秒`);
|
||||
$('.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('猜中<b> ' + myInfoN.num + ' </b>次')
|
||||
}
|
||||
}
|
||||
// 渲染榜單信息
|
||||
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 = `
|
||||
<div class="info-wrap" uid="${item.uid}">
|
||||
<div class="avatar">
|
||||
<p></p>
|
||||
<img src="${item.avatar}" alt="">
|
||||
</div>
|
||||
<p class="diamond-num">${num}</p>
|
||||
<p class="nick">${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}</p>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
$('.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 += `
|
||||
<li uid="${item.uid}">
|
||||
<span class="index">${index + 2}</span>
|
||||
<div class="others-info">
|
||||
<img src="${item.avatar}" alt="">
|
||||
<span class="others-nick">${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}</span>
|
||||
</div>
|
||||
<span class="others-diamond-num">${num}</span>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
$('.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 = `
|
||||
<div class="info-wrap" uid="${item.uid}">
|
||||
<div class="avatar">
|
||||
<p></p>
|
||||
<img src="${item.avatar}" alt="">
|
||||
</div>
|
||||
<p class="diamond-num" style="display:block">${num}</p>
|
||||
<p class="nick">${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}</p>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
$('.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 = '猜中<b> ' + item.num + ' </b>次'
|
||||
}
|
||||
others += `
|
||||
<li uid="${item.uid}">
|
||||
<span class="index">${index + 2}</span>
|
||||
<div class="others-info">
|
||||
<img src="${item.avatar}" alt="">
|
||||
<span class="others-nick">${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}</span>
|
||||
</div>
|
||||
<span class="others-diamond-num">${num}</span>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
$('.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()
|
||||
})
|
||||
152
view/peko/activity/act-kitchen/js/record.js
Normal file
152
view/peko/activity/act-kitchen/js/record.js
Normal file
@@ -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 += `
|
||||
<li style="margin-bottom: 0.8rem;">
|
||||
<h3>${dateFormat(res.drawTime, 'yy-MM-dd hh:mm:ss')}</h3>
|
||||
<div class="goldBox">
|
||||
<span>NO.${res.roundId}</span>
|
||||
<p style="display: ${res.drawStatus == 1 ? 'none' : 'block'};" class="fasle">哎呀~猜錯了 o(╥﹏╥)o</p>
|
||||
<p style="display: ${res.drawStatus == 1 ? 'block' : 'none'};" class="true">厲害~猜對了 ୧(๑•̀◡•́๑)૭</p>
|
||||
</div>
|
||||
<div class="result-wrap">
|
||||
<div class="result">
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="award">
|
||||
<p>獎勵:</p>
|
||||
<img src="./images/diamond.png" class="diamond" alt="">
|
||||
<b>${res.reward}</b>
|
||||
</div>
|
||||
<div class="result_sBox">
|
||||
${res.drawItemList.map(item => {
|
||||
return `<div class="bg"><img src="${item.drawImageUrl}" alt=""></div>`
|
||||
}).join('')}
|
||||
</div>
|
||||
</div>
|
||||
<div class="put-wrap">
|
||||
<div class="put"></div>
|
||||
<div class="list">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
$('.record-list').append(str)
|
||||
|
||||
|
||||
results.forEach((res, index) => {
|
||||
res.forEach(val => {
|
||||
$('.record-list li').eq(lisIndexId).find('.list').append(`
|
||||
<div class= "item">
|
||||
<p><img src="${val.itemUrl}" class="gift" alt=""></p>
|
||||
<div>
|
||||
<img src="./images/diamond.png" class="diamond" alt="">
|
||||
<span class="in">${val.costPiece}</span>
|
||||
</div>
|
||||
</div>
|
||||
`)
|
||||
})
|
||||
lisIndex = lisIndex + 1;
|
||||
lisIndexId = lisIndexId + 1;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
$(window).scroll(function () {
|
||||
if ($(window).scrollTop() + $(window).height() > $(document).height() - 10) {
|
||||
// 请求下一页
|
||||
if (canNext) {
|
||||
page++
|
||||
getUserRecord()
|
||||
} else {
|
||||
console.log('无数据被锁定');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
45
view/peko/activity/act-kitchen/js/wow.js
Normal file
45
view/peko/activity/act-kitchen/js/wow.js
Normal file
@@ -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 = '<i class="iconfont icon-tuzi"></i>';
|
||||
sunZi.innerHTML = '<img src="./images/xx.png" alt="">';
|
||||
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);
|
||||
}
|
||||
146
view/peko/activity/act-kitchen/record.html
Normal file
146
view/peko/activity/act-kitchen/record.html
Normal file
@@ -0,0 +1,146 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<title>游戏记录</title>
|
||||
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="./css/record.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ul class="record-list">
|
||||
<!-- <li style="margin-bottom: 0.8rem;">
|
||||
<h3>23-02-25 19:13:24</h3>
|
||||
<div class="goldBox">
|
||||
<span>NO.230225191242</span>
|
||||
<p style="display: block;" class="fasle">哎呀~猜錯了 o(╥﹏╥)o</p>
|
||||
<p style="display: none;" class="true">厲害~猜對了 ୧(๑•̀◡•́๑)૭</p>
|
||||
</div>
|
||||
<div class="result-wrap">
|
||||
<div class="result">
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="award">
|
||||
<p>獎勵:</p>
|
||||
<img src="./images/diamond.png" class="diamond" alt="">
|
||||
<b>0</b>
|
||||
</div>
|
||||
<div class="result_sBox">
|
||||
<div class="bg">
|
||||
<img src="http://beta.img.pekolive.com/FjWcbuxEpzZ8P3aS4A0n2llW9Jw9?imageslim" alt="">
|
||||
</div>
|
||||
<div class="bg">
|
||||
<img src="http://beta.img.pekolive.com/FjWcbuxEpzZ8P3aS4A0n2llW9Jw9?imageslim" alt="">
|
||||
</div>
|
||||
<div class="bg">
|
||||
<img src="http://beta.img.pekolive.com/FjWcbuxEpzZ8P3aS4A0n2llW9Jw9?imageslim" alt="">
|
||||
</div>
|
||||
<div class="bg">
|
||||
<img src="http://beta.img.pekolive.com/FjWcbuxEpzZ8P3aS4A0n2llW9Jw9?imageslim" alt="">
|
||||
</div>
|
||||
<div class="bg">
|
||||
<img src="http://beta.img.pekolive.com/FjWcbuxEpzZ8P3aS4A0n2llW9Jw9?imageslim" alt="">
|
||||
</div>
|
||||
<div class="bg">
|
||||
<img src="http://beta.img.pekolive.com/FjWcbuxEpzZ8P3aS4A0n2llW9Jw9?imageslim" alt="">
|
||||
</div>
|
||||
<div class="bg">
|
||||
<img src="http://beta.img.pekolive.com/FjWcbuxEpzZ8P3aS4A0n2llW9Jw9?imageslim" alt="">
|
||||
</div>
|
||||
<div class="bg">
|
||||
<img src="http://beta.img.pekolive.com/FjWcbuxEpzZ8P3aS4A0n2llW9Jw9?imageslim" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="put-wrap">
|
||||
<div class="put"></div>
|
||||
<div class="list">
|
||||
<div class="item">
|
||||
<p><img src="http://beta.img.pekolive.com/FmLQyTfMaHlwkvj568vpV0uk7aSc?imageslim" class="gift"
|
||||
alt=""></p>
|
||||
<div>
|
||||
<img src="./images/diamond.png" class="diamond" alt="">
|
||||
<span class="in">100</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<p><img src="http://beta.img.pekolive.com/Fm94cJfxF1Eqm0U04nG476JvFLaF?imageslim" class="gift"
|
||||
alt=""></p>
|
||||
<div>
|
||||
<img src="./images/diamond.png" class="diamond" alt="">
|
||||
<span class="in">0</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<p><img src="http://beta.img.pekolive.com/FjWcbuxEpzZ8P3aS4A0n2llW9Jw9?imageslim" class="gift"
|
||||
alt=""></p>
|
||||
<div>
|
||||
<img src="./images/diamond.png" class="diamond" alt="">
|
||||
<span class="in">100</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<p><img src="http://beta.img.pekolive.com/Ftlck3geTvQvvjBkyCwxuv7tHR_a?imageslim" class="gift"
|
||||
alt=""></p>
|
||||
<div>
|
||||
<img src="./images/diamond.png" class="diamond" alt="">
|
||||
<span class="in">100</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<p><img src="http://beta.img.pekolive.com/Fnnd7i5L8BPI95DF_ZvhdGkk8cqI?imageslim" class="gift"
|
||||
alt=""></p>
|
||||
<div>
|
||||
<img src="./images/diamond.png" class="diamond" alt="">
|
||||
<span class="in">0</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<p><img src="http://beta.img.pekolive.com/FoIKvxfBJiUUGNcL8ouKQKENQ2eb?imageslim" class="gift"
|
||||
alt=""></p>
|
||||
<div>
|
||||
<img src="./images/diamond.png" class="diamond" alt="">
|
||||
<span class="in">100</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<p><img src="http://beta.img.pekolive.com/Fv3U6kNuCovsRljPb_an73W0U0lZ?imageslim" class="gift"
|
||||
alt=""></p>
|
||||
<div>
|
||||
<img src="./images/diamond.png" class="diamond" alt="">
|
||||
<span class="in">100</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<p><img src="http://beta.img.pekolive.com/FuEuGPGHcyGExK_nJhvx08S4KeJ9?imageslim" class="gift"
|
||||
alt=""></p>
|
||||
<div>
|
||||
<img src="./images/diamond.png" class="diamond" alt="">
|
||||
<span class="in">100</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li> -->
|
||||
</ul>
|
||||
<ul class="none" style="display: none;"></ul>
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||
<script src="../../common/js/common2.js"></script>
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="./js/record.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user