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-31 11:28:48 +08:00
parent 06d2f79d49
commit edd003ceb4
8 changed files with 256 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
view/peko/activity/act-2023-qx/css/index.css Normal file
View File

@@ -0,0 +1,65 @@
body {
width: 100%;
height: 21.6533333333rem;
background: linear-gradient(90deg, #9980FF, #EB8FEA);
margin: 0 auto;
box-sizing: border-box;
}
.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: 10rem;
height: 12.76rem;
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto -1.4rem;
position: relative;
}
.header .rule {
width: 1.84rem;
height: 0.6133333333rem;
line-height: 0.6133333333rem;
text-align: center;
position: absolute;
top: 0.8666666667rem;
right: 0;
color: #F8F3FC;
font-size: 0.3466666667rem;
background: url(../images/rule_bg.png) no-repeat;
background-size: 100% 100%;
}
.betrothal {
width: 9.28rem;
height: 4.2533333333rem;
background: url(../images/betrothal.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto 0.4rem;
position: relative;
z-index: 2;
}
/*# sourceMappingURL=index.css.map */

71
view/peko/activity/act-2023-qx/css/index.scss Normal file
View File

@@ -0,0 +1,71 @@
@function px2rem($px, $rem:75) {
@return $px / $rem+rem;
}
html {}
body {
width: 100%;
height: px2rem(1624, );
background: linear-gradient(90deg, #9980FF, #EB8FEA);
margin: 0 auto;
box-sizing: border-box;
}
.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(750, );
height: px2rem(957, );
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto -1.4rem;
position: relative;
.rule {
width: px2rem(138, );
height: px2rem(46, );
line-height: px2rem(46, );
text-align: center;
position: absolute;
top: px2rem(65, );
right: 0;
color: #F8F3FC;
font-size: px2rem(26, );
background: url(../images/rule_bg.png) no-repeat;
background-size: 100% 100%;
}
}
.betrothal{
width: px2rem(696, );
height: px2rem(319, );
background: url(../images/betrothal.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto px2rem(30, );
position: relative;
z-index: 2;
}

BIN
view/peko/activity/act-2023-qx/images/betrothal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 185 KiB

BIN
view/peko/activity/act-2023-qx/images/header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

BIN
view/peko/activity/act-2023-qx/images/rule_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
view/peko/activity/act-2023-qx/images/travel/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

33
view/peko/activity/act-2023-qx/index.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>
<!-- header -->
<div class="header">
<div class="rule">活動規則</div>
</div>
<!-- 定情信物 -->
<div class="betrothal"></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/svga.min.js"></script>
<script src="./js/index.js"></script>

87
view/peko/activity/act-2023-qx/js/index.js Normal file
View File

@@ -0,0 +1,87 @@
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 + '/seekElfin/product/list',
data: {},
success (res) {
if (res.code === 200) {
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網絡錯誤，請退出重進')
}
})
}
// 播放svg
function svgaFun () {
player1 = new SVGA.Player('.star_in');
parser1 = new SVGA.Parser('.star_in');
parser1.load('./images/star.svga', function (videoItem) {
player1.loops = 1;
player1.clearsAfterStop = false;
player1.setVideoItem(videoItem);
player1.startAnimation();
player1.setContentMode('AspectFill')
player1.onFinished(() => {
})
})
}