moliparty/peko-h5
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新塔罗

Browse Source
This commit is contained in:
Dragon
2023-07-18 15:48:21 +08:00
parent 46db54d18b
commit 775a68a23c
16 changed files with 594 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
view/peko/modules/luckyTarot/css/index.css Normal file
View File

@@ -0,0 +1,214 @@
html,
body {
width: 100%;
height: 21.6533333333rem;
background: url(../images/bg.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.back {
position: fixed;
top: 0.9333333333rem;
left: 0.4533333333rem;
z-index: 9999;
width: 0.8266666667rem;
height: 0.8266666667rem;
}
.back img {
width: 100%;
height: 100%;
}
.back p {
color: #fff;
font-size: 0.4266666667rem;
position: absolute;
width: 9rem;
left: 0;
top: 0;
height: 100%;
text-align: center;
line-height: 0.8266666667rem;
}
.header {
width: 9.12rem;
height: 3.04rem;
margin: 2.0933333333rem auto 0rem;
display: block;
}
.gold_10 {
width: 6.4266666667rem;
height: 0.6933333333rem;
margin: 0rem auto 0.2666666667rem;
display: block;
}
.rule {
width: 0.68rem;
height: 1.8666666667rem;
background: url(../images/icon.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: 2.8133333333rem;
right: 0;
color: #FFE7A9;
font-size: 0.2933333333rem;
text-align: center;
padding: 0.3333333333rem 0.1333333333rem 0.3066666667rem 0.2666666667rem;
box-sizing: border-box;
}
.record {
width: 0.68rem;
height: 1.8666666667rem;
background: url(../images/icon.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: 4.8533333333rem;
right: 0;
color: #FFE7A9;
font-size: 0.2933333333rem;
text-align: center;
padding: 0.3333333333rem 0.1333333333rem 0.3066666667rem 0.2666666667rem;
box-sizing: border-box;
}
.tarotBox {
width: 9.8266666667rem;
height: 14.1333333333rem;
background: url(../images/middleBg.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto 0;
position: relative;
}
.tarotBox .tabBox {
width: 9.56rem;
height: 1.3066666667rem;
line-height: 1.3066666667rem;
display: flex;
justify-content: space-between;
background: url(../images/tabBox.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto;
}
.tarotBox .tabBox div {
width: 3.3733333333rem;
height: 100%;
color: #FEF0C0;
font-size: 0.4266666667rem;
text-align: center;
}
.tarotBox .tabBox .active1 {
background: url(../images/active1.png) no-repeat;
background-size: 100% 100%;
color: #FFFFFF;
}
.tarotBox .gradeText {
position: absolute;
left: 0.9866666667rem;
top: 1.4666666667rem;
color: #FFEAA9;
font-size: 0.32rem;
}
.tarotBox .diamond {
min-width: 1.9733333333rem;
height: 0.5866666667rem;
border-radius: 0.5866666667rem;
line-height: 0.5866666667rem;
position: absolute;
right: 0.96rem;
top: 1.28rem;
background: #343662;
color: #FFFFFF;
border: 0.0133333333rem solid #FFF3B1;
box-sizing: border-box;
vertical-align: middle;
}
.tarotBox .diamond .diamondIcon {
display: inline-block;
width: 0.3866666667rem;
height: 0.28rem;
margin-top: 0.16rem;
margin-left: 0.1733333333rem;
}
.tarotBox .diamond b {
font-size: 0.2666666667rem;
display: inline-block;
margin: 0 0.0933333333rem;
}
.tarotBox .diamond .add {
width: 0.24rem;
height: 0.24rem;
display: inline-block;
margin-top: 0.1733333333rem;
margin-right: 0.1866666667rem;
}
.tarotBox .cardBox {
width: 1.9733333333rem;
height: 3.2133333333rem;
position: absolute;
background: url(../images/card.png) no-repeat;
background-size: 100% 100%;
}
.tarotBox .cardBox0 {
left: 0.9466666667rem;
top: 2.0933333333rem;
}
.tarotBox .cardBox1 {
left: 2.9866666667rem;
top: 2.0933333333rem;
}
.tarotBox .cardBox2 {
left: 5.04rem;
top: 2.0933333333rem;
}
.tarotBox .cardBox3 {
left: 7.08rem;
top: 2.0933333333rem;
}
.tarotBox .cardBox4 {
left: 7.08rem;
top: 5.52rem;
}
.tarotBox .cardBox5 {
left: 7.08rem;
top: 8.8533333333rem;
}
.tarotBox .cardBox6 {
left: 5.04rem;
top: 8.8533333333rem;
}
.tarotBox .cardBox7 {
left: 2.9866666667rem;
top: 8.8533333333rem;
}
.tarotBox .cardBox8 {
left: 0.9466666667rem;
top: 8.8533333333rem;
}
.tarotBox .cardBox9 {
left: 0.9466666667rem;
top: 5.52rem;
}
.tarotBox .but {
width: 2.5333333333rem;
height: 1.0133333333rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 7.32rem;
}
h3 {
width: 100%;
margin-bottom: 0.16rem;
color: #D7D9F7;
font-size: 0.24rem;
text-align: center;
}
/*# sourceMappingURL=index.css.map */

238
view/peko/modules/luckyTarot/css/index.scss Normal file
View File

@@ -0,0 +1,238 @@
@function px2rem($px, $rem:75) {
@return $px / $rem+rem;
}
html,
body {
width: 100%;
height: px2rem(1624, );
background: url(../images/bg.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.back {
position: fixed;
top: px2rem(70, );
left: px2rem(34, );
z-index: 9999;
width: px2rem(62, );
height: px2rem(62, );
img {
width: 100%;
height: 100%;
}
p {
color: #fff;
font-size: px2rem(32, );
position: absolute;
width: 9rem;
left: 0;
top: 0;
height: 100%;
text-align: center;
line-height: px2rem(62, );
}
}
.header {
width: px2rem(684, );
height: px2rem(228, );
margin: px2rem(157, ) auto px2rem(0, );
display: block;
}
.gold_10 {
width: px2rem(482, );
height: px2rem(52, );
margin: px2rem(0, ) auto px2rem(20, );
display: block;
}
.rule {
width: px2rem(51, );
height: px2rem(140, );
background: url(../images/icon.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: px2rem(211, );
right: 0;
color: #FFE7A9;
font-size: px2rem(22, );
text-align: center;
padding: px2rem(25, ) px2rem(10, ) px2rem(23, ) px2rem(20, );
box-sizing: border-box;
}
.record {
width: px2rem(51, );
height: px2rem(140, );
background: url(../images/icon.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: px2rem(364, );
right: 0;
color: #FFE7A9;
font-size: px2rem(22, );
text-align: center;
padding: px2rem(25, ) px2rem(10, ) px2rem(23, ) px2rem(20, );
box-sizing: border-box;
}
.tarotBox {
width: px2rem(737, );
height: px2rem(1060, );
background: url(../images/middleBg.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto 0;
position: relative;
.tabBox {
width: px2rem(717, );
height: px2rem(98, );
line-height: px2rem(98, );
display: flex;
justify-content: space-between;
background: url(../images/tabBox.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto;
div {
width: px2rem(253, );
height: 100%;
color: #FEF0C0;
font-size: px2rem(32, );
text-align: center;
}
.active1 {
background: url(../images/active1.png) no-repeat;
background-size: 100% 100%;
color: #FFFFFF;
}
}
.gradeText {
position: absolute;
left: px2rem(74, );
top: px2rem(110, );
color: #FFEAA9;
font-size: px2rem(24, );
}
.diamond {
min-width: px2rem(148, );
height: px2rem(44, );
border-radius: px2rem(44, );
line-height: px2rem(44, );
position: absolute;
right: px2rem(72, );
top: px2rem(96, );
background: #343662;
color: #FFFFFF;
border: px2rem(1, ) solid #FFF3B1;
box-sizing: border-box;
vertical-align: middle;
.diamondIcon {
display: inline-block;
width: px2rem(29, );
height: px2rem(21, );
margin-top: px2rem(12, );
margin-left: px2rem(13, );
}
b {
font-size: px2rem(20, );
display: inline-block;
margin: 0 px2rem(7, );
}
.add {
width: px2rem(18, );
height: px2rem(18, );
display: inline-block;
margin-top: px2rem(13, );
margin-right: px2rem(14, );
}
}
.cardBox {
width: px2rem(148, );
height: px2rem(241, );
position: absolute;
background: url(../images/card.png) no-repeat;
background-size: 100% 100%;
}
.cardBox0 {
left: px2rem(71, );
top: px2rem(157, );
}
.cardBox1 {
left: px2rem(224, );
top: px2rem(157, );
}
.cardBox2 {
left: px2rem(378, );
top: px2rem(157, );
}
.cardBox3 {
left: px2rem(531, );
top: px2rem(157, );
}
.cardBox4 {
left: px2rem(531, );
top: px2rem(414, );
}
.cardBox5 {
left: px2rem(531, );
top: px2rem(664, );
}
.cardBox6 {
left: px2rem(378, );
top: px2rem(664, );
}
.cardBox7 {
left: px2rem(224, );
top: px2rem(664, );
}
.cardBox8 {
left: px2rem(71, );
top: px2rem(664, );
}
.cardBox9 {
left: px2rem(71, );
top: px2rem(414, );
}
.but{
width: px2rem(190, );
height: px2rem(76, );
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(549, );
}
}
h3 {
width: 100%;
margin-bottom: px2rem(12, );
color: #D7D9F7;
font-size: px2rem(18, );
text-align: center;
}

BIN
view/peko/modules/luckyTarot/images/10Gold.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

BIN
view/peko/modules/luckyTarot/images/active1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 101 KiB

BIN
view/peko/modules/luckyTarot/images/add.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 423 B

BIN
view/peko/modules/luckyTarot/images/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 MiB

BIN
view/peko/modules/luckyTarot/images/but.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
view/peko/modules/luckyTarot/images/card.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 237 KiB

BIN
view/peko/modules/luckyTarot/images/diamond.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
view/peko/modules/luckyTarot/images/header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 336 KiB

BIN
view/peko/modules/luckyTarot/images/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
view/peko/modules/luckyTarot/images/middleBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
view/peko/modules/luckyTarot/images/tabBox.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
view/peko/modules/luckyTarot/images/travel/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

70
view/peko/modules/luckyTarot/index.html Normal file
View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>幸运塔罗</title>
<link rel="stylesheet" href="../../common/css/reset.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 顶部返回 -->
<div class="back">
<img src="./images/travel/back.png" alt="">
<p>幸运塔罗</p>
</div>
<!-- 主视觉 -->
<img src="./images/header.png" alt="" class="header">
<!-- 十倍金币 -->
<img src="./images/10Gold.png" alt="" class="gold_10">
<!-- 玩法介绍 -->
<div class="rule">玩法介绍</div>
<!-- 中奖记录 -->
<div class="record">中奖记录</div>
<!-- 塔罗大背景 -->
<div class="tarotBox">
<!-- 选择等级tab -->
<div class="tabBox">
<div class="active1">初級卡</div>
<div>中級卡</div>
<div>高級卡</div>
</div>
<!-- 等级介绍 -->
<p class="gradeText">翻到金幣卡獲得<b>100</b>金幣</p>
<!-- 剩余钻石 -->
<div class="diamond">
<img src="./images/diamond.png" alt="" class="diamondIcon">
<b>1000</b>
<img src="./images/add.png" alt="" class="add">
</div>
<!-- 默认卡片 -->
<div class="cardBox cardBox0"></div>
<div class="cardBox cardBox1"></div>
<div class="cardBox cardBox2"></div>
<div class="cardBox cardBox3"></div>
<div class="cardBox cardBox4"></div>
<div class="cardBox cardBox5"></div>
<div class="cardBox cardBox6"></div>
<div class="cardBox cardBox7"></div>
<div class="cardBox cardBox8"></div>
<div class="cardBox cardBox9"></div>
<!-- 翻拍按钮 -->
<img src="./images/but.png" alt="" class="but">
</div>
<!-- 本活動最終解釋權歸所有&本活動以及活動獎勵與蘋果公司無關 -->
<h3>本活動最終解釋權歸PEKO所有</h3>
<h3>本活動以及活動獎勵與蘋果公司無關</h3>
</body>
</html>
<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/index.js"></script>

72
view/peko/modules/luckyTarot/js/index.js Normal file
View File

@@ -0,0 +1,72 @@
let urlPrefix = getUrlPrefix()
let browser = checkVersion()
let env = EnvCheck();
if (env == 'test') {
new VConsole();
}
// 封裝layer消息提醒框
let layerIndex
const showLoading = (content = '加載中...') => {
layer.open({
type: 2,
shadeClose: false,
content,
success (e) {
layerIndex = $(e).attr('index')
}
})
}
const hideLoading = (index) => {
layer.close(index)
}
const toastMsg = (content = '操作完成', time = 2) => {
layer.open({
content,
time,
skin: 'msg'
})
}
$(function () {
setTimeout(function () {
getInfoFromClient()
setTimeout(function () {
// 页面全屏
if (browser.app) {
if (browser.android) {
window.androidJsObj.initShowNav(false)
} else {
window.webkit.messageHandlers.initShowNav.postMessage(0)
}
};
// 顶部返回事件
$('.back').click(() => {
if (browser.android) {
window.androidJsObj.closeWebView()
} else {
window.webkit.messageHandlers.closeWebView.postMessage(null)
}
})
}, 100)
})
})
// 接口
function get () {
showLoading()
networkRequest({
type: 'GET',
url: urlPrefix + '',
data: {},
success (res) {
if (res.code === 200) {
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網絡錯誤，請退出重進')
}
})
}