新增闪耀周星

2023-11-20 17:31:18 +08:00
parent c76e9865a5
commit b8ecaee589
11 changed files with 185 additions and 0 deletions
--- a/view/peko/activity/smallWeekStar/css/index.css
+++ b/view/peko/activity/smallWeekStar/css/index.css
@@ -0,0 +1,41 @@
+html,
+body {
+  width: 100%;
+  background: #450172;
+}
+
+html .box,
+body .box {
+  width: 10rem;
+  height: 61.62667rem;
+  background: url(../images/bg.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+html .box .gift,
+body .box .gift {
+  position: absolute;
+  width: 7.32rem;
+  height: 3.01333rem;
+  top: 10.58667rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+html .box .swiper,
+body .box .swiper {
+  width: 8.98667rem;
+  height: 14.8rem;
+  position: absolute;
+  top: 19.88rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+html .box .swiper img,
+body .box .swiper img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
--- a/view/peko/activity/smallWeekStar/css/index.scss
+++ b/view/peko/activity/smallWeekStar/css/index.scss
@@ -0,0 +1,42 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    // height: 100%;
+    background: #450172;
+
+    .box {
+        width: px2rem(750);
+        height: px2rem(4622);
+        background: url(../images/bg.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+
+        .gift {
+            position: absolute;
+            width: px2rem(549);
+            height: px2rem(226);
+            top: px2rem(794);
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        .swiper {
+            width: px2rem(674);
+            height: px2rem(1110);
+            position: absolute;
+            top: px2rem(1491);
+            left: 50%;
+            transform: translateX(-50%);
+
+            img {
+                display: block;
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+}
--- a/view/peko/activity/smallWeekStar/css/swiper-bundle.min.css
+++ b/view/peko/activity/smallWeekStar/css/swiper-bundle.min.css
--- a/view/peko/activity/smallWeekStar/images/bg.png
+++ b/view/peko/activity/smallWeekStar/images/bg.png
--- a/view/peko/activity/smallWeekStar/images/gift1.png
+++ b/view/peko/activity/smallWeekStar/images/gift1.png
--- a/view/peko/activity/smallWeekStar/images/gift2.png
+++ b/view/peko/activity/smallWeekStar/images/gift2.png
--- a/view/peko/activity/smallWeekStar/images/img1.png
+++ b/view/peko/activity/smallWeekStar/images/img1.png
--- a/view/peko/activity/smallWeekStar/images/img2.png
+++ b/view/peko/activity/smallWeekStar/images/img2.png
--- a/view/peko/activity/smallWeekStar/index.html
+++ b/view/peko/activity/smallWeekStar/index.html
@@ -0,0 +1,38 @@
+<!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/swiper-bundle.min.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+    <div class="box">
+        <img src="./images/gift1.png" alt="" class="gift">
+        <div class="swiper">
+            <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                    <img src="./images/img1.png" alt="">
+                </div>
+                <div class="swiper-slide">
+                    <img src="./images/img2.png" alt="">
+                </div>
+            </div>
+        </div>
+    </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/swiper-bundle.min.js"></script>
+<script src="../../common/js/route-constant.js"></script>
+<script src="./js/index.js"></script>
--- a/view/peko/activity/smallWeekStar/js/index.js
+++ b/view/peko/activity/smallWeekStar/js/index.js
@@ -0,0 +1,37 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+let env = EnvCheck();
+if (env == 'test') {
+    new VConsole();
+}
+// 初始化函数
+$(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)
+            }
+        })
+        // 礼物轮播
+        var mySwiper = new Swiper('.swiper', {
+            // direction: "vertical",
+            loop: true,
+            autoplay: {
+                delay: 1500,//
+                disableOnInteraction: false
+            }
+        })
+    }, 100)
+})
--- a/view/peko/activity/smallWeekStar/js/swiper-bundle.min.js
+++ b/view/peko/activity/smallWeekStar/js/swiper-bundle.min.js