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
2024-02-23 12:29:08 +08:00
parent 92c9774b18
commit 62b59ca91a
23 changed files with 768 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

305
view/peko/modules/act-wishingStar/css/index.css Normal file
View File

@@ -0,0 +1,305 @@
html,
body {
width: 100%;
background: #F36121;
}
.back {
position: fixed;
top: 0.93333rem;
left: 0.45333rem;
z-index: 99;
width: 0.82667rem;
height: 0.82667rem;
}
.back img {
width: 100%;
height: 100%;
}
.back p {
color: #fff;
font-size: 0.42667rem;
position: absolute;
width: 9rem;
left: 0;
top: 0;
height: 100%;
text-align: center;
line-height: 0.82667rem;
}
.header {
width: 10rem;
height: 12.22667rem;
position: relative;
margin: 0 auto -3.2rem;
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
}
.header .rule_icon {
width: 0.82667rem;
height: 1.94667rem;
position: absolute;
right: 0;
top: 2.08rem;
}
.header .record_icon {
width: 0.82667rem;
height: 1.94667rem;
position: absolute;
right: 0;
top: 4.04rem;
}
.header .tabBox {
width: 8.44rem;
height: 1.6rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 7.4rem;
display: flex;
justify-content: space-between;
}
.header .tabBox div {
width: 3.98667rem;
height: 100%;
}
.header .tabBox .tab1 {
background: url(../images/tab1.png) no-repeat;
background-size: 100% 100%;
}
.header .tabBox .tab2 {
background: url(../images/tab2.png) no-repeat;
background-size: 100% 100%;
}
.header .tabBox .act1 {
background: url(../images/tabAct1.png) no-repeat;
background-size: 100% 100%;
}
.header .tabBox .act2 {
background: url(../images/tabAct2.png) no-repeat;
background-size: 100% 100%;
}
.page1 {
width: 10rem;
height: 13.42667rem;
background: url(../images/page1Bg.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto 0.26667rem;
position: relative;
overflow: hidden;
}
.page1 .top {
width: 100%;
height: 1.2rem;
position: relative;
margin: 0.7rem auto 0;
line-height: 1.2rem;
}
.page1 .top .left {
color: #FEE7C1;
font-size: 0.32rem;
font-weight: 600;
position: absolute;
left: 1.37333rem;
top: 50%;
transform: translateY(-50%);
}
.page1 .top .star {
width: 0.53333rem;
height: 0.53333rem;
position: absolute;
left: 3.08rem;
top: 50%;
transform: translateY(-50%);
}
.page1 .top .centon {
width: 2.17333rem;
left: 3.66667rem;
top: 50%;
transform: translateY(-50%);
color: #FFF5E4;
font-size: 0.42667rem;
font-weight: 600;
position: absolute;
}
.page1 .top .but {
width: 2.72rem;
height: 0.89333rem;
position: absolute;
right: 1.26667rem;
top: 50%;
transform: translateY(-50%);
background: url(../images/buyBut.png) no-repeat;
background-size: 100% 100%;
}
.page1 .page1Title {
width: 5.36rem;
height: 0.30667rem;
display: block;
margin: 0.53333rem auto 0.13333rem;
}
.page1 ul {
width: 9.02667rem;
height: 10.5rem;
margin: 0 auto 0;
overflow-y: scroll;
}
.page1 ul::-webkit-scrollbar {
display: none;
}
.page1 ul li {
width: 100%;
height: 3.29333rem;
background: url(../images/giftBg.png) no-repeat;
background-size: 100% 100%;
position: relative;
margin-bottom: 0.21333rem;
}
.page1 ul li .giftBox {
width: 2.37333rem;
height: 2.37333rem;
position: absolute;
left: 0.42667rem;
top: 0.44rem;
background: url(../images/giftBox.png) no-repeat;
background-size: 100% 100%;
}
.page1 ul li .giftBox .giftImg {
width: 2rem;
height: 2rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.page1 ul li .giftInfo {
height: 0.4rem;
line-height: 0.4rem;
position: absolute;
left: 2.92rem;
top: 0.64rem;
font-weight: 500;
display: flex;
white-space: nowrap;
}
.page1 ul li .giftInfo b {
color: #B52E1C;
font-size: 0.37333rem;
margin-right: 0.17333rem;
}
.page1 ul li .giftInfo img {
display: inline-block;
width: 0.34667rem;
height: 0.34667rem;
vertical-align: middle;
margin-right: 0.08rem;
}
.page1 ul li .giftInfo i {
font-style: normal;
color: #DE2A21;
font-size: 0.29333rem;
font-weight: 400;
}
.page1 ul li .inventory {
color: #AA5854;
font-size: 0.24rem;
font-weight: 5.33333rem;
position: absolute;
right: 0.65333rem;
top: 0.72rem;
}
.page1 ul li .schedule {
color: #FF3600;
font-size: 0.29333rem;
font-weight: 500;
position: absolute;
left: 2.93333rem;
top: 1.36rem;
}
.page1 ul li .line {
width: 4.2rem;
height: 0.4rem;
position: absolute;
left: 4.18667rem;
top: 1.30667rem;
background: url(../images/lineBox.png) no-repeat;
background-size: 100% 100%;
}
.page1 ul li .line .line_in {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 4.09333rem;
height: 0.26667rem;
border-radius: 0.26667rem;
overflow: hidden;
}
.page1 ul li .line .line_in img {
display: block;
height: 100%;
width: 10%;
}
.page1 ul li .line p {
width: 100%;
height: 100%;
line-height: 0.4rem;
text-align: center;
color: #DE2A21;
font-size: 0.24rem;
font-weight: 400;
}
.page1 ul li .wishIng {
padding: 0.10667rem 0.17333rem;
background: #C67571;
border-radius: 0.06667rem;
position: absolute;
left: 2.94667rem;
bottom: 0.69333rem;
text-align: center;
color: #FEF3DA;
font-size: 0.24rem;
font-weight: 400;
}
.page1 ul li .wishIngBut {
width: 2.18667rem;
height: 1.06667rem;
position: absolute;
bottom: 0.44rem;
right: 0.48rem;
}

312
view/peko/modules/act-wishingStar/css/index.scss Normal file
View File

@@ -0,0 +1,312 @@
@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
width: 100%;
background: #F36121;
}
// 返回按钮
.back {
position: fixed;
top: px2rem(70);
left: px2rem(34);
z-index: 99;
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(750);
height: px2rem(917);
position: relative;
margin: 0 auto -3.2rem;
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
.rule_icon {
width: px2rem(62);
height: px2rem(146);
position: absolute;
right: 0;
top: px2rem(156);
}
.record_icon {
width: px2rem(62);
height: px2rem(146);
position: absolute;
right: 0;
top: px2rem(303);
}
.tabBox {
width: px2rem(633);
height: px2rem(120);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(555);
display: flex;
justify-content: space-between;
div {
width: px2rem(299);
height: 100%;
}
.tab1 {
background: url(../images/tab1.png) no-repeat;
background-size: 100% 100%;
}
.tab2 {
background: url(../images/tab2.png) no-repeat;
background-size: 100% 100%;
}
.act1 {
background: url(../images/tabAct1.png) no-repeat;
background-size: 100% 100%;
}
.act2 {
background: url(../images/tabAct2.png) no-repeat;
background-size: 100% 100%;
}
}
}
.page1 {
width: px2rem(750);
height: px2rem(1007);
background: url(../images/page1Bg.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto px2rem(20);
position: relative;
overflow: hidden;
.top {
// width: 8rem;
width: 100%;
height: 1.2rem;
position: relative;
margin: 0.7rem auto 0;
line-height: 1.2rem;
.left {
color: #FEE7C1;
font-size: px2rem(24);
font-weight: 600;
position: absolute;
left: px2rem(103);
top: 50%;
transform: translateY(-50%);
}
.star {
width: px2rem(40);
height: px2rem(40);
position: absolute;
left: px2rem(231);
top: 50%;
transform: translateY(-50%);
}
.centon {
width: px2rem(163);
left: px2rem(275);
top: 50%;
transform: translateY(-50%);
color: #FFF5E4;
font-size: px2rem(32);
font-weight: 600;
position: absolute;
}
.but {
width: px2rem(204);
height: px2rem(67);
position: absolute;
right: px2rem(95);
top: 50%;
transform: translateY(-50%);
background: url(../images/buyBut.png) no-repeat;
background-size: 100% 100%;
}
}
.page1Title {
width: px2rem(402);
height: px2rem(23);
display: block;
margin: px2rem(40) auto px2rem(10);
}
ul {
width: px2rem(677);
height: 10.5rem;
margin: 0 auto 0;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
}
li {
width: 100%;
height: px2rem(247);
background: url(../images/giftBg.png) no-repeat;
background-size: 100% 100%;
position: relative;
margin-bottom: px2rem(16);
.giftBox {
width: px2rem(178);
height: px2rem(178);
position: absolute;
left: px2rem(32);
top: px2rem(33);
background: url(../images/giftBox.png) no-repeat;
background-size: 100% 100%;
.giftImg {
width: px2rem(150);
height: px2rem(150);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
.giftInfo {
height: px2rem(30);
line-height: px2rem(30);
position: absolute;
left: px2rem(219);
top: px2rem(48);
font-weight: 500;
display: flex;
white-space: nowrap;
b {
color: #B52E1C;
font-size: px2rem(28);
margin-right: px2rem(13);
}
img {
display: inline-block;
width: px2rem(26);
height: px2rem(26);
vertical-align: middle;
margin-right: px2rem(6);
}
i {
font-style: normal;
color: #DE2A21;
font-size: px2rem(22);
font-weight: 400;
}
}
.inventory {
color: #AA5854;
font-size: px2rem(18);
font-weight: px2rem(400);
position: absolute;
right: px2rem(49);
top: px2rem(54);
}
.schedule {
color: #FF3600;
font-size: px2rem(22);
font-weight: 500;
position: absolute;
left: px2rem(220);
top: px2rem(102);
}
.line {
width: px2rem(315);
height: px2rem(30);
position: absolute;
left: px2rem(314);
top: px2rem(98);
background: url(../images/lineBox.png) no-repeat;
background-size: 100% 100%;
.line_in {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: px2rem(307);
height: px2rem(20);
border-radius: px2rem(20);
overflow: hidden;
img {
display: block;
height: 100%;
width: 10%;
}
}
p {
width: 100%;
height: 100%;
line-height: px2rem(30);
text-align: center;
color: #DE2A21;
font-size: px2rem(18);
font-weight: 400;
}
}
.wishIng {
padding: px2rem(8) px2rem(13);
background: #C67571;
border-radius: px2rem(5);
position: absolute;
left: px2rem(221);
bottom: px2rem(52);
text-align: center;
color: #FEF3DA;
font-size: px2rem(18);
font-weight: 400;
}
.wishIngBut {
width: px2rem(164);
height: px2rem(80);
position: absolute;
bottom: px2rem(33);
right: px2rem(36);
}
}
}
}

BIN
view/peko/modules/act-wishingStar/images/buyBut.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
view/peko/modules/act-wishingStar/images/diamond.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
view/peko/modules/act-wishingStar/images/giftBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
view/peko/modules/act-wishingStar/images/giftBox.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
view/peko/modules/act-wishingStar/images/header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
view/peko/modules/act-wishingStar/images/line.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
view/peko/modules/act-wishingStar/images/lineBox.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
view/peko/modules/act-wishingStar/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
view/peko/modules/act-wishingStar/images/page1Bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 236 KiB

BIN
view/peko/modules/act-wishingStar/images/page1Title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
view/peko/modules/act-wishingStar/images/record_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
view/peko/modules/act-wishingStar/images/rule_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
view/peko/modules/act-wishingStar/images/star.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
view/peko/modules/act-wishingStar/images/tab1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
view/peko/modules/act-wishingStar/images/tab2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
view/peko/modules/act-wishingStar/images/tabAct1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
view/peko/modules/act-wishingStar/images/tabAct2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

BIN
view/peko/modules/act-wishingStar/images/travel/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
view/peko/modules/act-wishingStar/images/wishIngBut.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

73
view/peko/modules/act-wishingStar/index.html Normal file
View File

@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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="">
</div>
<!-- 头部 -->
<div class="header">
<!-- 活动规则icon -->
<img src="./images/rule_icon.png" alt="" class="rule_icon">
<!-- 参与记录icon -->
<img src="./images/record_icon.png" alt="" class="record_icon">
<!-- Tab切换 -->
<div class="tabBox">
<div class="tab1 act1"></div>
<div class="tab2"></div>
</div>
</div>
<!-- 页面一 -->
<div class="page1">
<!-- 我的魔法棒 -->
<div class="top">
<div class="left">我的魔法棒</div>
<img src="./images/star.png" alt="" class="star">
<div class="centon">0</div>
<div class="but"></div>
</div>
<!-- 小标题 -->
<img src="./images/page1Title.png" alt="" class="page1Title">
<!-- 许愿列表 -->
<ul>
<li>
<div class="giftBox">
<img src="./images/logo.png" alt="" class="giftImg">
</div>
<div class="giftInfo">
<b>礼物名称</b>
<img src="./images/diamond.png" alt="" class="diamond">
<i>0</i>
</div>
<div class="inventory">库存0</div>
<div class="schedule">许愿进度</div>
<div class="line">
<div class="line_in">
<img src="./images/line.png" alt="">
</div>
<p>1234/8888</p>
</div>
<div class="wishIng">已許願12次</div>
<img src="./images/wishIngBut.png" alt="" class="wishIngBut">
</li>
</ul>
</div>
</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="../../common/js/route-constant.js"></script>
<script src="./js/index.js"></script>

78
view/peko/modules/act-wishingStar/js/index.js Normal file
View File

@@ -0,0 +1,78 @@
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 () {
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 + '',
success (res) {
if (res.code === 200) {
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網路錯誤，請退出重進')
}
})
}
// Tab切换
$('.header .tabBox').on('click', ' div', function () {
var i = $(this).index() + 1;
$('.header .tabBox div').removeClass('act1').removeClass('act2');
$(this).addClass(`act${i}`);
})