暂存七夕互动

2023-07-31 11:28:48 +08:00
parent 06d2f79d49
commit edd003ceb4
8 changed files with 256 additions and 0 deletions
--- a/view/peko/activity/act-2023-qx/css/index.css
+++ b/view/peko/activity/act-2023-qx/css/index.css
@@ -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 */
--- a/view/peko/activity/act-2023-qx/css/index.scss
+++ b/view/peko/activity/act-2023-qx/css/index.scss
@@ -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;
+}
--- a/view/peko/activity/act-2023-qx/images/betrothal.png
+++ b/view/peko/activity/act-2023-qx/images/betrothal.png
--- a/view/peko/activity/act-2023-qx/images/header.png
+++ b/view/peko/activity/act-2023-qx/images/header.png
--- a/view/peko/activity/act-2023-qx/images/rule_bg.png
+++ b/view/peko/activity/act-2023-qx/images/rule_bg.png
--- a/view/peko/activity/act-2023-qx/images/travel/back.png
+++ b/view/peko/activity/act-2023-qx/images/travel/back.png
--- a/view/peko/activity/act-2023-qx/index.html
+++ b/view/peko/activity/act-2023-qx/index.html
@@ -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>
--- a/view/peko/activity/act-2023-qx/js/index.js
+++ b/view/peko/activity/act-2023-qx/js/index.js
@@ -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(() => {
+        })
+    })
+}