调整刷新位置

view/peko/activity/2023-ruffian/index.html

@@ -42,8 +42,8 @@
     <div class="page2">
         <!-- 榜單切換 -->
         <div class="listTab">
-            <div class="active">勇氣榜（送禮）</div>
-            <div>狂歡榜（收禮）</div>
+            <div class="active">勇氣榜</div>
+            <div>狂歡榜</div>
         </div>
         <!-- 榜單盒子 -->
         <div class="listBg">
@@ -96,7 +96,7 @@
         </div>
     </div>
     <!-- 本活動與Apple inc.無關； -->
-    <div class="apple">本活動最終解釋權歸Piko所有，本活動以及獎勵與Google/蘋果公司無關</div>
+    <div class="apple">本活動以及獎勵與Google/蘋果公司無關</div>
     <!-- 規則彈窗 -->
     <div class="rule">
         <div class="rule_iaon">

view/peko/activity/act-nameplate/js/public.js

@@ -3,7 +3,7 @@ let urlPrefix = getUrlPrefix();
 var browser = checkVersion();
 var info = {};
 if (EnvCheck() === 'test') new VConsole
-// 封装layer消息提醒框
+// 封裝layer消息提醒框
 let layerIndex
 const showLoading = (content = '加載中...') => {
     layer.open({
@@ -29,7 +29,7 @@ const toastMsg = (content = '操作完成', time = 2) => {
 let delayLock = false, newApplyLock = false
 
 let btnStatus = []
-// 获取用户铭牌状态
+// 獲取用戶銘牌狀態
 const getUserNameplateInfo = () => {
   showLoading()
   networkRequest({
@@ -54,11 +54,11 @@ const getUserNameplateInfo = () => {
   })
 }
 
-// 渲染首页按钮状态
+// 渲染首頁按鈕狀態
 const renderBtnStatus = () => {
   btnStatus.map( (item,index) => {
       if(index > 1){
-        // 进阶款式
+        // 進階款式
         $('.btn').eq(index).find('img').attr('src', `${item > 0 ? './images/apply-btn-basics.png' : './images/disabled-btn.png'}`)
         if(item > 0){
           $('.btn').eq(index).on('click', () => {
@@ -66,7 +66,7 @@ const renderBtnStatus = () => {
           })
         }
       }else{
-        // 基础款式
+        // 基礎款式
         $('.btn').eq(index).find('img').attr('src', `${item > 0 ? './images/apply-btn-basics.png' : './images/disabled-btn.png'}`)
         if(item > 0){
           $('.btn').eq(index).on('click', () => {
@@ -78,7 +78,7 @@ const renderBtnStatus = () => {
 }
 
 let userNameplateList = []
-// 获取用户已有铭牌列表
+// 獲取用戶已有銘牌列錶
 const getUserNameplateList = (type) => {
   showLoading()
   networkRequest({
@@ -108,7 +108,7 @@ const getUserNameplateList = (type) => {
   })
 }
 
-// 渲染铭牌列表(选择弹窗)
+// 渲染銘牌列錶(選擇彈窗)
 const renderNameplateList = () => {
   let str = ''
   userNameplateList.map( item => {
@@ -133,7 +133,7 @@ const renderNameplateList = () => {
 
 
 let newNameplateList = []
-// 获取新铭牌列表
+// 獲取新銘牌列錶
 const getNewNameplateList = (type) => {
   showLoading()
   networkRequest({
@@ -147,7 +147,7 @@ const getNewNameplateList = (type) => {
       hideLoading(layerIndex)
       if(res.code === 200){
         if(!res.data.length){
-          toastMsg('暂时没有铭牌可申请')
+          toastMsg('暫時沒有銘牌可申請')
           return
         }
         newNameplateList = res.data
@@ -163,8 +163,8 @@ const getNewNameplateList = (type) => {
   })
 }
 
-let newNameplateId  //只有一个可选时，默认选中
-// 渲染申请新铭牌弹窗
+let newNameplateId  //只有一個可選時，默認選中
+// 渲染申請新銘牌彈窗
 const renderNewNameplateList = () => {
   let str = '';
   newNameplateList.map( item => {
@@ -187,7 +187,7 @@ const renderNewNameplateList = () => {
   $('body').css('overflow', 'hidden')
 }
 
-// 确认延长期限
+// 確認延長期限
 const delayNamaplateConfirm = (params) => {
   showLoading()
   networkRequest({
@@ -204,7 +204,7 @@ const delayNamaplateConfirm = (params) => {
     success(res){
       hideLoading(layerIndex)
       if(res.code === 200){
-        toastMsg('申请成功')
+        toastMsg('申請成功')
         $('.shade-mask-delay').hide()
         $('body').css('overflow', 'auto')
         delayLock = false
@@ -222,7 +222,7 @@ const delayNamaplateConfirm = (params) => {
   })
 }
 
-// 确认申请新铭牌
+// 確認申請新銘牌
 const applyNewNamaplateConfirm = (params) => {
   showLoading()
   networkRequest({
@@ -239,7 +239,7 @@ const applyNewNamaplateConfirm = (params) => {
     success(res){
       hideLoading(layerIndex)
       if(res.code === 200){
-        toastMsg('申请成功')
+        toastMsg('申請成功')
         $('.shade-mask-new').hide()
         $('body').css('overflow', 'auto')
         newApplyLock  = false
@@ -268,12 +268,12 @@ $(function () {
     _hmt.push(['_trackEvent', 'client', 'click', "act_nameplate"]);
   }
 
-  // 点击申请记录按钮
+  // 點擊申請記錄按鈕
   $('.record').on('click', function(){
     window.location.href = './record.html'
   })
 
-  // 关闭弹窗
+  // 關閉彈窗
   $('.shade-mask .close').on('click', () => {
     $('.shade-mask').hide()
     $('body').css('overflow', 'auto')
@@ -290,7 +290,7 @@ $(function () {
   })
 
   let maxApplyDay, nameplateId, type, text
-  // 监听 延长期限 按钮点击事件
+  // 監聽 延長期限 按鈕點擊事件
   $('.select-ul').on('click', '.delay-btn', function() {
     let li = $(this).parent();
     let src = li.find('.nameplate img').attr('src');
@@ -307,29 +307,29 @@ $(function () {
     $('.shade-mask-delay').show().siblings('.shade-mask, .shade-mask-new').hide()
   })
 
-  // 延期弹窗 点击减按钮
+  // 延期彈窗 點擊減按鈕
   $('.shade-mask-delay').on('click', '.decrease', function(){
     let applyDay = parseInt( $(this).parent().find('span').html() );
     if(applyDay > 7){
       applyDay -= 7;
     }else{
-      toastMsg('铭牌至少申请7天')
+      toastMsg('銘牌至少申請7天')
     }
     $('.shade-mask-delay .delay-time p span').html(applyDay);
   })
-  //延期弹窗 点击加按钮
+  //延期彈窗 點擊加按鈕
   $('.shade-mask-delay').on('click', '.increase', function(){
     let applyDay = parseInt( $(this).parent().find('span').html() );
     if(applyDay >= maxApplyDay){
-      toastMsg('已达最大申请时长')
+      toastMsg('已達最大申請時長')
     }else{
       applyDay += 7;
     }
     $('.shade-mask-delay .delay-time p span').html(applyDay);
   })
-  // 监听申请延期确定按钮点击事件
+  // 監聽申請延期確定按鈕點擊事件
   $('.shade-mask-delay').on('click', '.apply-btn', function(){
-    // applyType 1申请新铭牌，2延长
+    // applyType 1申請新銘牌，2延長
     if(!delayLock){
       delayLock = true
       let params = {
@@ -345,59 +345,59 @@ $(function () {
 
   /*************************           ******************************/
 
-  // 监听 申请新铭牌 按钮点击事件
+  // 監聽 申請新銘牌 按鈕點擊事件
   $('.shade-mask').on('click', '.apply-btn', function(){
     let type = $(this).parent().find('.select-ul li').eq(0).data('type');
     getNewNameplateList(type)
   })
 
-  // 申请新铭牌弹窗 点击减按钮
+  // 申請新銘牌彈窗 點擊減按鈕
   $('.shade-mask-new').on('click', '.decrease', function(){
     let applyDay = parseInt( $(this).parent().find('span').html() );
     if(applyDay > 7){
       applyDay -= 7;
     }else{
-      toastMsg('铭牌至少申请7天')
+      toastMsg('銘牌至少申請7天')
     }
     $('.shade-mask-new .delay-time p span').html(applyDay);
   })
-  // 申请新铭牌弹窗 点击加按钮
+  // 申請新銘牌彈窗 點擊加按鈕
   $('.shade-mask-new').on('click', '.increase', function(){
     let applyDay = parseInt( $(this).parent().find('span').html() );
     let maxApplyDay = parseInt( $(this).parent().parent().parent().find('.apply-new-ul li').eq(0).data('applyDay') );
     if(applyDay >= maxApplyDay){
-      toastMsg('已达最大申请时长')
+      toastMsg('已達最大申請時長')
     }else{
       applyDay += 7;
     }
     $('.shade-mask-new .delay-time p span').html(applyDay);
   })
   
-  // 申请新铭牌弹窗 点击铭牌列表事件
+  // 申請新銘牌彈窗 點擊銘牌列錶事件
   $('.shade-mask-new').on('click', 'li', function(){
     $(this).addClass('active').siblings('li').removeClass('active');
     newNameplateId = $(this).data('nameplateId');
   })
 
-  // 申请新铭牌弹窗 确定申请 按钮点击事件
+  // 申請新銘牌彈窗 確定申請 按鈕點擊事件
   $('.shade-mask-new').on('click', '.apply-btn', function(){
     let content = $(this).parent();
     let ipt = content.find('input.new-nameplate-desc').val()
     if(!newNameplateId){
-      toastMsg('请选择样式');
+      toastMsg('請選擇樣式');
       return
     }
     if(!ipt){
-      toastMsg('请添加铭牌文字');
+      toastMsg('請添加銘牌文字');
       return
     }else{
       if(ipt.length !== 4){
-        toastMsg('请添加4个字的铭牌文字');
+        toastMsg('請添加4個字的銘牌文字');
         return
       }
     }
     
-    // applyType 1申请新铭牌，2延长
+    // applyType 1申請新銘牌，2延長
     if(!newApplyLock){
       newApplyLock = true
       let params = {

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%;
+}

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%;
+            }
+        }
+    }
+}

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/gift3.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>

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)
+})

view/peko/activity/spacTimeLuck/css/index.css

@@ -0,0 +1,290 @@
+html,
+body {
+  width: 100%;
+  background: linear-gradient(0deg, #474B6E 0%, #37304A 99%);
+}
+
+.rabbit {
+  z-index: 999;
+}
+
+.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;
+}
+
+.layui-m-layershade {
+  background-color: rgba(0, 0, 0, 0.4) !important;
+}
+
+.header {
+  width: 10rem;
+  height: 15.06667rem;
+  margin: 0 auto 0;
+  background: url(../images/header.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.header .giftBox {
+  width: 10rem;
+  height: 3.86667rem;
+  position: relative;
+  top: 8.94667rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: url(../images/gift.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.header .giftBox div {
+  position: absolute;
+  width: 1.73333rem;
+  text-align: center;
+}
+
+.header .giftBox div p {
+  color: #fff;
+  font-size: 0.34667rem;
+  font-weight: 400;
+  margin-bottom: 0.10667rem;
+}
+
+.header .giftBox div span {
+  color: #FAF8B6;
+  font-size: 0.32rem;
+  font-weight: 300;
+  display: block;
+}
+
+.header .giftBox .div1 {
+  top: 3.50667rem;
+  left: 0.61333rem;
+}
+
+.header .giftBox .div2 {
+  top: 2.54667rem;
+  left: 2.96rem;
+}
+
+.header .giftBox .div3 {
+  top: 4rem;
+  left: 5.46667rem;
+}
+
+.header .giftBox .div4 {
+  top: 3.29333rem;
+  left: 7.86667rem;
+}
+
+.content {
+  position: relative;
+  width: 9.34667rem;
+  height: 17.72rem;
+  margin: -0.93333rem auto 0.24rem;
+  background: url(../images/content.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content .title {
+  width: 100%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.45333rem;
+  font-weight: 400;
+  position: absolute;
+  left: 0;
+  top: 0.38667rem;
+}
+
+.content .text {
+  width: 8rem;
+  height: 1.37333rem;
+  color: #FFFFFF;
+  font-size: 0.32rem;
+  font-weight: 300;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 1.84rem;
+  line-height: 0.47rem;
+}
+
+.content .lineBox {
+  width: 9.24rem;
+  height: 2.76rem;
+  background: url(../images/lineBigBox.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  top: 3.73333rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.content .lineBox .line {
+  width: 7.88rem;
+  height: 0.68rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.69333rem;
+  box-sizing: border-box;
+  padding: 0.10667rem 0.08rem;
+  background: url(../images/lineBox.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content .lineBox .line .line_in {
+  width: 0%;
+  height: 100%;
+  background: linear-gradient(0deg, #FFE993 0%, #EC9409 52%, #FFFC9E 98%);
+  border-radius: 0.68rem;
+  text-align: center;
+  line-height: 0.50667rem;
+  color: #F14029;
+  font-size: 0.34667rem;
+  font-weight: 400;
+}
+
+.content .lineBox .tavBox {
+  width: 95%;
+  position: absolute;
+  top: 1.61333rem;
+  left: 50%;
+  transform: translateX(-50%);
+  box-sizing: border-box;
+  padding: 0 0.13333rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.content .lineBox .tavBox div {
+  width: 0.68rem;
+  height: 0.53333rem;
+  line-height: 0.53333rem;
+  border-radius: 0.10667rem;
+  background: linear-gradient(0deg, #6871B0 0%, #6483CA 100%);
+  color: #FFFFFF;
+  font-size: 0.28rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+.content .lineBox .tavBox .active {
+  background: url(../images/tabAct.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content .updataIcon {
+  width: 0.73333rem;
+  height: 0.78667rem;
+  position: absolute;
+  right: 0.92rem;
+  top: 6.68rem;
+}
+
+.content .lottery {
+  width: 8.69333rem;
+  height: 7.98667rem;
+  position: relative;
+  top: 5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: url(../images/contentBox.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content .lottery .title {
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  top: 0.33333rem;
+  left: 0rem;
+  color: #FFFFFF;
+  font-size: 0.4rem;
+  font-weight: 500;
+}
+
+.content .lottery .user {
+  width: 2.01333rem;
+  height: 2.08rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.84rem;
+}
+
+.content .lottery .user img {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.content .lottery .user .ts {
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+
+.content .lottery .user .tx {
+  border-radius: 50%;
+  width: 1.66667rem;
+  height: 1.66667rem;
+}
+
+.content .lottery .user p {
+  width: 130%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.28rem;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 2.13333rem;
+}
+
+.content .lottery .giftList {
+  width: 6.58667rem;
+  height: 4.28rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 3.26667rem;
+}
+
+.content .dimension {
+  width: 100%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.28rem;
+  font-weight: 400;
+  position: absolute;
+  left: 0;
+  top: 16.32rem;
+}

view/peko/activity/spacTimeLuck/css/index.scss

@@ -0,0 +1,297 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: linear-gradient(0deg, #474B6E 0%, #37304A 99%);
+}
+
+.rabbit {
+    z-index: 999;
+}
+
+.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);
+    }
+}
+
+.layui-m-layershade {
+    background-color: rgba(0, 0, 0, .4) !important;
+}
+
+.header {
+    width: px2rem(750);
+    height: px2rem(1130);
+    margin: 0 auto 0;
+    background: url(../images/header.png) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+
+    .giftBox {
+        width: px2rem(750);
+        height: px2rem(290);
+        position: relative;
+        top: px2rem(671);
+        left: 50%;
+        transform: translateX(-50%);
+        background: url(../images/gift.png) no-repeat;
+        background-size: 100% 100%;
+
+        div {
+            position: absolute;
+            width: px2rem(130);
+            text-align: center;
+
+            p {
+                color: #fff;
+                font-size: px2rem(26);
+                font-weight: 400;
+                margin-bottom: px2rem(8);
+            }
+
+            span {
+                color: #FAF8B6;
+                font-size: px2rem(24);
+                font-weight: 300;
+                display: block;
+            }
+        }
+
+        .div1 {
+            top: px2rem(263);
+            left: px2rem(46);
+        }
+
+        .div2 {
+            top: px2rem(191);
+            left: px2rem(222);
+        }
+
+        .div3 {
+            top: px2rem(300);
+            left: px2rem(410);
+        }
+
+        .div4 {
+            top: px2rem(247);
+            left: px2rem(590);
+        }
+    }
+}
+
+.content {
+    position: relative;
+    width: px2rem(701);
+    height: px2rem(1329);
+    margin: px2rem(-70) auto px2rem(18);
+    // background-color: linear-gradient(0deg, #474B6E 0%, #37304A 99%);
+    background: url(../images/content.png) no-repeat;
+    background-size: 100% 100%;
+
+    .title {
+        width: 100%;
+        text-align: center;
+        color: #FFFFFF;
+        font-size: px2rem(34);
+        font-weight: 400;
+        position: absolute;
+        left: 0;
+        top: px2rem(29);
+    }
+
+    .text {
+        width: px2rem(600);
+        height: px2rem(103);
+        color: #FFFFFF;
+        font-size: px2rem(24);
+        font-weight: 300;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(138);
+        line-height: 0.47rem;
+    }
+
+    .lineBox {
+        width: px2rem(693);
+        height: px2rem(207);
+        background: url(../images/lineBigBox.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        top: px2rem(280);
+        left: 50%;
+        transform: translateX(-50%);
+
+        .line {
+            width: px2rem(591);
+            height: px2rem(51);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(52);
+            box-sizing: border-box;
+            padding: px2rem(8) px2rem(6);
+            background: url(../images/lineBox.png) no-repeat;
+            background-size: 100% 100%;
+
+            .line_in {
+                width: 0%;
+                height: 100%;
+                background: linear-gradient(0deg, #FFE993 0%, #EC9409 52%, #FFFC9E 98%);
+                border-radius: px2rem(51);
+                text-align: center;
+                line-height: px2rem(38);
+                color: #F14029;
+                font-size: px2rem(26);
+                font-weight: 400;
+            }
+        }
+
+        .tavBox {
+            width: 95%;
+            position: absolute;
+            top: px2rem(121);
+            left: 50%;
+            transform: translateX(-50%);
+            box-sizing: border-box;
+            padding: 0 px2rem(10);
+            display: flex;
+            justify-content: space-between;
+
+            div {
+                width: px2rem(51);
+                // padding: 0 px2rem(10);
+                height: px2rem(40);
+                line-height: px2rem(40);
+                border-radius: px2rem(8);
+                background: linear-gradient(0deg, #6871B0 0%, #6483CA 100%);
+                color: #FFFFFF;
+                font-size: px2rem(21);
+                font-weight: 500;
+                text-align: center;
+            }
+
+            .active {
+                background: url(../images/tabAct.png) no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+    }
+
+    .updataIcon {
+        width: px2rem(55);
+        height: px2rem(59);
+        position: absolute;
+        right: px2rem(69);
+        top: px2rem(501);
+    }
+
+    .lottery {
+        width: px2rem(652);
+        height: px2rem(599);
+        position: relative;
+        top: 5rem;
+        left: 50%;
+        transform: translateX(-50%);
+        background: url(../images/contentBox.png) no-repeat;
+        background-size: 100% 100%;
+
+        .title {
+            width: 100%;
+            text-align: center;
+            position: absolute;
+            top: px2rem(25);
+            left: px2rem(0);
+            color: #FFFFFF;
+            font-size: px2rem(30);
+            font-weight: 500;
+        }
+
+        .user {
+            width: px2rem(151);
+            height: px2rem(156);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(63);
+
+            img {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+            }
+
+            .ts {
+                width: 100%;
+                height: 100%;
+                z-index: 2;
+            }
+
+            .tx {
+                border-radius: 50%;
+                width: px2rem(125);
+                height: px2rem(125);
+            }
+
+            p {
+                width: 130%;
+                text-align: center;
+                color: #FFFFFF;
+                font-size: px2rem(21);
+                font-weight: 400;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(160);
+            }
+        }
+
+        .giftList {
+            width: px2rem(494);
+            height: px2rem(321);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(245);
+        }
+    }
+
+    .dimension {
+        width: 100%;
+        text-align: center;
+        color: #FFFFFF;
+        font-size: px2rem(21);
+        font-weight: 400;
+        position: absolute;
+        left: 0;
+        top: px2rem(1224);
+    }
+
+}

view/peko/activity/spacTimeLuck/index.html

@@ -0,0 +1,84 @@
+<!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">
+        <!-- 禮物展示 -->
+        <div src="" alt="" class="giftBox">
+            <div class="div1">
+                <p>冬雪心願</p>
+                <span>28000鉆</span>
+            </div>
+            <div class="div2">
+                <p>蝶戀花</p>
+                <span>28000鉆</span>
+            </div>
+            <div class="div3">
+                <p>夜鶯與玫瑰</p>
+                <span>28000鉆</span>
+            </div>
+            <div class="div4">
+                <p>玫瑰時鐘</p>
+                <span>28000鉆</span>
+            </div>
+        </div>
+    </div>
+    <!-- 內容 -->
+    <div class="content">
+        <div class="title">活動規則</div>
+        <div class="text">活動期間全民助力, 每送出一個上新禮物下方進度條+1, 第<b></b>名用戶成為幸運兒可獲得幸運獎勵</div>
+        <div class="lineBox">
+            <div class="line">
+                <div class="line_in"></div>
+            </div>
+            <div class="tavBox">
+                <!-- <div class="active">18</div>
+                <div>38</div>
+                <div>88</div>
+                <div>128</div>
+                <div>208</div>
+                <div>288</div>
+                <div>398</div>
+                <div>488</div>
+                <div>598</div>
+                <div>688</div>
+                <div>788</div>
+                <div>888</div> -->
+            </div>
+        </div>
+        <img src="./images/updataIcon.png" alt="" class="updataIcon">
+        <div class="lottery">
+            <div class="title">幸運兒</div>
+            <div class="user">
+                <img src="./images/ts.png" alt="" class="ts">
+                <img src="./images/logo.png" alt="" class="tx">
+                <p></p>
+            </div>
+            <img src="./images/18.png" alt="" class="giftList">
+        </div>
+        <div class="dimension">本活動最終解釋權歸Piko所有，本活動以及獎勵與Google/蘋果公司無關</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/route-constant.js"></script>
+<script src="./js/wow.js"></script>
+<script src="./js/index.js"></script>

view/peko/activity/spacTimeLuck/js/index.js

@@ -0,0 +1,134 @@
+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)
+            }
+        })
+        getConfig();
+    }, 100)
+})
+var obj = {};
+// 獲取配置接口
+function getConfig () {
+    $('.content .lineBox .tavBox div').remove();
+    showLoading()
+    networkRequest({
+        type: 'GET',
+        url: urlPrefix + '/act/2023LuckyProcessBar/getConfig',
+        success (res) {
+            if (res.code === 200) {
+                // 處理進度
+                $('.content .lineBox .line .line_in').text(`${res.data.cur}/${res.data.max}`);
+                $(`.content .lineBox .line .line_in`).css({ width: `${(res.data.cur / res.data.max) * 100 >= 100 ? 100 : (res.data.cur / res.data.max) * 100}%` });
+                obj = res.data.stageMap;
+                var cur = res.data.cur;
+                var str = '';
+                var text = '';
+                var arr = [];
+                var curstage;
+                // 渲染切換tab
+                for (var key in obj) {
+                    if (obj.hasOwnProperty(key)) {
+                        str += `
+                            <div class="key${obj[key].stage}" key=${obj[key].stage}>${obj[key].stage}</div>
+                        `
+                        text += `${obj[key].stage}/`
+                        arr.push(obj[key]);
+                    }
+                }
+                $('.content .lineBox .tavBox').append(str);
+                $('.content .text b').text(text);
+                // 處理當前階段
+                arr.forEach((val, i) => {
+                    if (val.luckyUser) {//false
+                        // curstage = val.stage;
+                        // $('.content .lottery .user .tx').attr('src', val.luckyUser.avatar)
+                        // $('.content .lottery .user p').text(val.luckyUser.nick);
+                        if (i == arr.length - 1) {
+                            curstage = arr[arr.length - 1].stage;
+                            $('.content .lottery .user .tx').attr('src', val.luckyUser.avatar)
+                            $('.content .lottery .user p').text(val.luckyUser.nick);
+                        } else {
+                            curstage = arr[i + 1].stage;
+                            $('.content .lottery .user .tx').attr('src', `./images/logo.png`);
+                            $('.content .lottery .user p').text('虛位以待');
+                        }
+                    } else if (i == 0) {
+                        curstage = arr[0].stage;
+                        $('.content .lottery .user .tx').attr('src', `./images/logo.png`);
+                        $('.content .lottery .user p').text('虛位以待');
+                    }
+                });
+                // console.log(curstage);
+                $(`.content .lineBox .tavBox .key${curstage}`).addClass('active').siblings().removeClass('active');
+                $('.content .lottery .giftList').attr('src', `./images/${curstage}.png`)
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
+// 刷新按鈕
+$('.content .updataIcon').click(function () {
+    getConfig();
+})
+// tab切換
+$('.content').on('click', ' .lineBox .tavBox div', function () {
+    var key = $(this).attr('key')
+    $(this).addClass('active').siblings().removeClass('active');
+    $('.content .lottery .giftList').attr('src', `./images/${key}.png`)
+    // console.log(obj[key]);
+    if (obj[key].luckyUser) {
+        $('.content .lottery .user .tx').attr('src', obj[key].luckyUser.avatar);
+        $('.content .lottery .user p').text(obj[key].luckyUser.nick);
+    } else {
+        $('.content .lottery .user .tx').attr('src', `./images/logo.png`);
+        $('.content .lottery .user p').text('虛位以待');
+    }
+})

view/peko/activity/spacTimeLuck/js/wow.js

@@ -0,0 +1,46 @@
+var baba = document.querySelector('body');
+baba.addEventListener('click', function (e) {
+    // $('body,html').css({ "width": "100%", "position": "relative", "overflow": "hidden" });
+    tianJia(e);
+})
+
+var erZi = [];
+function tianJia (e) {
+    var sunZi = document.createElement('div');
+    sunZi.className = 'rabbit';
+    // sunZi.innerHTML = '<i class="iconfont icon-tuzi"></i>';
+    sunZi.innerHTML = '<img src="./images/icon.png" alt="">';
+    baba.appendChild(sunZi);
+    erZi.push({
+        el: sunZi,
+        top: e.pageY - 80,
+        left: e.pageX - 20,
+        opacity: 1,
+        scale: 1,
+        color: `rgb(${255 * Math.random()},${255 * Math.random()},${255 * Math.random()})`
+    });
+    move();
+};
+function move () {
+    for (var i = 0; i < erZi.length; i++) {
+        if (erZi[i].opacity <= 0) {
+            baba.removeChild(erZi[i].el);
+            erZi.splice(i, 1);
+            return;
+        }
+        erZi[i].top--;
+        erZi[i].opacity = erZi[i].opacity - 0.04;
+        // erZi[i].scale = erZi[i].scale + 0.0001;
+        erZi[i].el.style.cssText = `
+            top: ${erZi[i].top}px;
+            left: ${erZi[i].left}px;
+            color: ${erZi[i].color};
+            opacity: ${erZi[i].opacity};
+            transform: scale(${erZi[i].scale});
+            position: absolute;
+            `
+
+    }
+    window.requestAnimationFrame(move);
+    // $('body,html').css({ "width": "100%", "position": "relative", "overflow": "auto" });
+}

view/peko/home-yinyou/index.html

@@ -48,7 +48,7 @@
                 <a href="https://beian.miit.gov.cn/#/Integrated/index">粤ICP备18040812号</a>
             </div>
             <div class="gongsi">
-                <p>公司主体：广州芒果互娱网络科技有限公司</p>
+                <p>公司主体：香港栗子科技有限公司</p>
                 <p>联系地址：广州市天河区珠吉路59号之二四楼A4569</p>
                 <p>联系方式：020-85698266</p>
             </div>

view/peko/home/css/index.css

@@ -16,11 +16,10 @@ html {
   .m-bg img {
     display: block;
   }
-
   .homePc {
     width: 100%;
     height: 10rem;
-    background: url(../images/homePc.png) no-repeat;
+    background: url(../images/homePc2.png) no-repeat;
     background-size: 100% 100%;
     position: relative;
   }
@@ -28,7 +27,7 @@ html {
     width: 1.11rem;
     height: 0.5rem;
     background: rgba(255, 255, 255, 0.2);
-    border-radius: 0.13rem;
+    border-radius: .13rem;
     font-size: 0.24rem;
     color: #fff;
     text-align: center;
@@ -58,7 +57,6 @@ html {
     left: 2.4rem;
     bottom: 1.6rem;
   }
-
   .eori {
     width: 100%;
     background: #30312C;
@@ -78,19 +76,17 @@ html {
     margin: 0 0.2rem;
   }
 }
+
 @media screen and (max-width: 768px) {
   body {
     background-color: #0C0122;
   }
-
   .pc-bg {
     display: none;
   }
-
   .m-bg {
     display: block;
   }
-
   .homeM {
     width: 100%;
     height: 14.89rem;
@@ -102,7 +98,7 @@ html {
     width: 1.11rem;
     height: 0.5rem;
     background: rgba(255, 255, 255, 0.2);
-    border-radius: 0.13rem;
+    border-radius: .13rem;
     font-size: 0.24rem;
     color: #fff;
     text-align: center;
@@ -148,26 +144,24 @@ html {
     width: 2.2rem;
     height: 0.7rem;
   }
-
   .button-wrapper {
     display: block;
     position: absolute;
     left: 1.28rem;
     top: 17.52rem;
-    width: 7.4666666667rem;
-    height: 1.2266666667rem;
+    width: 7.46667rem;
+    height: 1.22667rem;
   }
   .button-wrapper a {
     display: inline-block;
     width: 100%;
     height: 100%;
   }
-
   .button2-wrapper {
     display: block;
     position: absolute;
-    left: 3.0933333333rem;
-    bottom: 1.7066666667rem;
+    left: 3.09333rem;
+    bottom: 1.70667rem;
     width: 4rem;
     height: 0.8rem;
     background: rgba(255, 255, 255, 0);
@@ -177,11 +171,9 @@ html {
     width: 100%;
     height: 100%;
   }
-
   .m-button {
     display: block;
   }
-
   .text-wrapper {
     padding-left: 0;
     width: 90%;
@@ -192,10 +184,9 @@ html {
     margin-bottom: 10px;
   }
   .text-wrapper .text1,
-.text-wrapper p {
+  .text-wrapper p {
     text-align: center;
   }
-
   .eori {
     width: 100%;
     background: #30312C;
@@ -210,9 +201,9 @@ html {
   }
   .eori .recordfoot .record {
     display: inline-block;
-    padding-right: 0.0533333333rem;
-    height: 0.3733333333rem;
-    width: 0.4266666667rem;
+    padding-right: 0.05333rem;
+    height: 0.37333rem;
+    width: 0.42667rem;
     background: url(../images/icon_police.png) no-repeat;
   }
   .eori .gongsi {
@@ -233,6 +224,7 @@ html {
     font-size: 20px;
   }
 }
+
 .toast {
   background: rgba(0, 0, 0, 0.9);
   border-radius: 10px;
@@ -254,9 +246,7 @@ html {
   display: none;
   position: fixed;
   top: 0;
-  right: 0.2666666667rem;
-  width: 6.1333333333rem;
+  right: 0.26667rem;
+  width: 6.13333rem;
   z-index: 9;
 }
-
-/*# sourceMappingURL=index.css.map */

view/peko/home/css/index.scss

@@ -1,449 +1,300 @@
-@function px2rem($px, $rem: 75) {
-  @return $px / $rem+rem;
+@function px2rem($px) {
+    @return $px / 75+rem;
 }
 
 body,
 html {
-  width: 100%;
-  height: 100%;
-  font-family: "Heiti SC", "Microsoft Sans Serif";
-  //overflow: hidden;
+    width: 100%;
+    height: 100%;
+    font-family: "Heiti SC", "Microsoft Sans Serif";
+    //overflow: hidden;
 }
 
 .container {
-  position: relative;
+    position: relative;
 }
 
-// .eori {
-//   // height: 8.7%;
-//   width: 100%;
-//   background: #000;
-//   // color: #D1D1D1;
-//   position: absolute;
-//   left: 0;
-//   padding: px2rem(10, ) 0;
-//   // p {
-//   //   height: 40px;
-//   //   width: 50%;
-//   //   float: left;
-//   //   text-align: center;
-//   //   line-height: 40px;
-//   //   font-size: 10px;
-//   //   text-align: right;
-//   //   padding-right: 20px;
-//   //   box-sizing: border-box;
-
-//   //   a {
-//   //     color: #666;
-//   //   }
-//   // }
-
-//   .weixin-name {
-//     padding-top: px2rem(20);
-//   }
-
-//   .recordfoot {
-//     width: 100%;
-//     color: #000;
-//     text-align: left;
-//     display: flex;
-//     justify-content: center;
-//     align-items: center;
-//     font-size: 13px;
-//     margin-bottom: px2rem(6, );
-
-//     .record {
-//       display: inline-block;
-//       padding-right: px2rem(4);
-//       width: px2rem(14, );
-//       height: px2rem(16, );
-//       background: url(../images/icon_police.png) no-repeat;
-//       // background: #948aff;
-//     }
-
-//     a {
-//       color: #fff;
-//     }
-//   }
-
-//   .gongsi {
-//     display: flex;
-//     justify-content: center;
-//     font-size: 13px;
-//     color: #fff;
-
-//     p {
-//       &:nth-child(2) {
-//         margin: 0 14px;
-//       }
-//     }
-//   }
-
-//   // div {
-//   //   // height: 30px;
-//   //   width: 100%;
-//   //   text-align: center;
-//   //   // line-height: 30px;
-//   //   font-size: 16px;
-//   // }
-
-//   .tit {
-//     height: 60px;
-//     line-height: 60px;
-//     text-align: center;
-//     font-size: 20px;
-//   }
-// }
-
-// .footer {
-//   line-height: 70px;
-//   text-align: center;
-//   font-size: 14px;
-//   color: #fff;
-//   background: rgba(0, 0, 0, 0.6);
-
-//   span {
-//     margin: 0 6px;
-//   }
-
-//   a {
-//     color: #fff;
-//   }
-// }
-
-// .button-wrapper {
-//   cursor: pointer;
-//   position: absolute;
-//   left: 68.55%;
-//   // top: 62.27%;
-//   top: 68%;
-//   width: 19.4%;
-//   height: 6.6%;
-//   background: rgba(253, 247, 247, 0);
-
-//   a {
-//     display: inline-block;
-//     width: 100%;
-//     height: 100%;
-//   }
-// }
-
-// .button2-wrapper {
-//   cursor: pointer;
-//   position: absolute;
-//   left: 45.55%;
-//   // top: 61.09%;
-//   top: 67%;
-//   width: 19.4%;
-//   height: 7.6%;
-//   // background: rgba(253, 247, 247, 0);
-
-//   a {
-//     display: inline-block;
-//     width: 100%;
-//     height: 100%;
-//   }
-// }
-
-// .button-wrapper,
-// .button2-wrapper {
-//   display: none;
-// }
-
 // pc端
 @media screen and (min-width:769px) {
-  .m-bg {
-    display: none;
+    .m-bg {
+        display: none;
 
-    img {
-      display: block;
-    }
-  }
-
-  .homePc {
-    width: 100%;
-    height: 10rem;
-    background: url(../images/homePc.png) no-repeat;
-    background-size: 100% 100%;
-    position: relative;
-
-    .charge {
-      width: 1.11rem;
-      height: 0.5rem;
-      background: rgb(255, 255, 255, 0.2);
-      border-radius: .13rem;
-      font-size: 0.24rem;
-      color: #fff;
-      text-align: center;
-      line-height: 0.5rem;
-      position: absolute;
-      top: 0.16rem;
-      right: 2.77rem;
-    }
-
-    .googlePlay {
-      width: 2.2rem;
-      height: 0.7rem;
-      position: absolute;
-      left: 2.4rem;
-      bottom: 3.4rem;
-    }
-    .appleStore {
-      width: 2.2rem;
-      height: 0.7rem;
-      position: absolute;
-      left: 2.4rem;
-      bottom: 2.5rem;
-    }
-    .apk {
-      width: 2.2rem;
-      height: 0.7rem;
-      position: absolute;
-      left: 2.4rem;
-      bottom: 1.6rem;
-    }
-  }
-
-  .eori {
-    // height: 1.2rem;
-    width: 100%;
-    background: #30312C;
-    color: rgb(255, 255, 255);
-    padding: 0.2rem 0;
-    vertical-align: top;
-    // position: absolute;
-    // top: 0.75rem;
-
-    // .recordfoot {
-    //   color: #fff;
-    //   display: flex;
-    //   justify-content: center;
-    //   align-items: center;
-
-    //   .record {
-    //     display: inline-block;
-    //     padding-right: px2rem(4);
-    //     height: px2rem(28, );
-    //     width: px2rem(32, );
-    //     background: url(../images/icon_police.png) no-repeat;
-    //   }
-    // }
-
-    .gongsi {
-      display: flex;
-      justify-content: center;
-      text-align: center;
-
-      p {
-        font-size: 0.2rem;
-
-        &:nth-child(2) {
-          margin: 0 0.2rem;
+        img {
+            display: block;
         }
-      }
     }
 
-  }
+    .homePc {
+        width: 100%;
+        height: 10rem;
+        background: url(../images/homePc2.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+
+        .charge {
+            width: 1.11rem;
+            height: 0.5rem;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: .13rem;
+            font-size: 0.24rem;
+            color: #fff;
+            text-align: center;
+            line-height: 0.5rem;
+            position: absolute;
+            top: 0.16rem;
+            right: 2.77rem;
+        }
+
+        .googlePlay {
+            width: 2.2rem;
+            height: 0.7rem;
+            position: absolute;
+            left: 2.4rem;
+            bottom: 3.4rem;
+        }
+
+        .appleStore {
+            width: 2.2rem;
+            height: 0.7rem;
+            position: absolute;
+            left: 2.4rem;
+            bottom: 2.5rem;
+        }
+
+        .apk {
+            width: 2.2rem;
+            height: 0.7rem;
+            position: absolute;
+            left: 2.4rem;
+            bottom: 1.6rem;
+        }
+    }
+
+    .eori {
+        // height: 1.2rem;
+        width: 100%;
+        background: #30312C;
+        color: rgb(255, 255, 255);
+        padding: 0.2rem 0;
+        vertical-align: top;
+        // position: absolute;
+        // top: 0.8rem;
+
+        .gongsi {
+            display: flex;
+            justify-content: center;
+            text-align: center;
+
+            p {
+                font-size: 0.2rem;
+
+                &:nth-child(2) {
+                    margin: 0 0.2rem;
+                }
+            }
+        }
+
+    }
 
 }
 
 // 移动端
 @media screen and (max-width:768px) {
-  body {
-    background-color: #0C0122;
-  }
-
-  .pc-bg {
-    display: none;
-  }
-
-  .m-bg {
-    display: block;
-  }
-
-  .homeM {
-    width: 100%;
-    // width: px2rem(750, );
-    // height: px2rem(1489, );
-    // height: 19.88rem;
-    height: 14.89rem;
-    background: url(../images/homeM.png) no-repeat;
-    background-size: 100% 100%;
-    position: relative;
-
-    .charge {
-      width: 1.11rem;
-      height: 0.5rem;
-      background: rgb(255, 255, 255, 0.2);
-      border-radius: .13rem;
-      font-size: 0.24rem;
-      color: #fff;
-      text-align: center;
-      line-height: 0.5rem;
-      position: absolute;
-      top: 0.2rem;
-      right: 0.4rem;
-      // left: 50%;
-      // transform: translateX(-50%);
+    body {
+        background-color: #0C0122;
     }
 
-    .swiper {
-      width: 100%;
-      height: 8.6rem;
-      position: absolute;
-      top: 4.8rem;
-      overflow: hidden;
+    .pc-bg {
+        display: none;
+    }
 
-      .swiper-wrapper {
-        width: 60%;
-        height: 100%;
+    .m-bg {
+        display: block;
+    }
 
-        .swiper-slide {
-          img {
+    .homeM {
+        width: 100%;
+        // width: px2rem(750);
+        // height: px2rem(1489);
+        // height: 19.88rem;
+        height: 14.89rem;
+        background: url(../images/homeM.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+
+        .charge {
+            width: 1.11rem;
+            height: 0.5rem;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: .13rem;
+            font-size: 0.24rem;
+            color: #fff;
+            text-align: center;
+            line-height: 0.5rem;
+            position: absolute;
+            top: 0.2rem;
+            right: 0.4rem;
+            // left: 50%;
+            // transform: translateX(-50%);
+        }
+
+        .swiper {
+            width: 100%;
+            height: 8.6rem;
+            position: absolute;
+            top: 4.8rem;
+            overflow: hidden;
+
+            .swiper-wrapper {
+                width: 60%;
+                height: 100%;
+
+                .swiper-slide {
+                    img {
+                        width: 100%;
+                        height: 100%;
+                    }
+                }
+
+                .swiper-slide-prev {
+                    width: 100%;
+                    height: 90%;
+                    margin-top: 0.6rem;
+                }
+
+                .swiper-slide-next {
+                    width: 100%;
+                    height: 90%;
+                    margin-top: 0.6rem;
+                }
+            }
+        }
+
+        .logo {
+            position: absolute;
+            bottom: 0.6rem;
+            left: 0;
+            width: 100%;
+            display: flex;
+            justify-content: space-evenly;
+
+            img {
+                width: 2.2rem;
+                height: 0.7rem;
+            }
+        }
+    }
+
+    .button-wrapper {
+        display: block;
+        position: absolute;
+        left: px2rem(96);
+        top: px2rem(1314);
+        width: px2rem(560);
+        height: px2rem(92);
+
+        a {
+            display: inline-block;
             width: 100%;
             height: 100%;
-          }
+        }
+    }
+
+    .button2-wrapper {
+        display: block;
+        position: absolute;
+        left: px2rem(232);
+        // top: px2rem(1208);
+        bottom: px2rem(128);
+        width: px2rem(300);
+        height: px2rem(60);
+        background: rgba(255, 255, 255, 0);
+
+        a {
+            display: inline-block;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .m-button {
+        display: block;
+    }
+
+    .text-wrapper {
+        padding-left: 0;
+        width: 90%;
+        margin-left: -45%;
+        padding-top: 108px;
+
+        .text {
+            .txt1 {
+                margin-bottom: 10px;
+            }
+
         }
 
-        .swiper-slide-prev {
-          width: 100%;
-          height: 90%;
-          margin-top: 0.6rem;
+        .text1,
+        p {
+            text-align: center;
+        }
+    }
+
+    .eori {
+        // height: 1.2rem;
+        width: 100%;
+        background: #30312C;
+        color: rgb(255, 255, 255);
+        padding: 0.2rem 0;
+        // position: absolute;
+        // top: 0.75rem;
+
+        .recordfoot {
+            color: #fff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .record {
+                display: inline-block;
+                padding-right: px2rem(4);
+                height: px2rem(28);
+                width: px2rem(32);
+                background: url(../images/icon_police.png) no-repeat;
+            }
         }
 
-        .swiper-slide-next {
-          width: 100%;
-          height: 90%;
-          margin-top: 0.6rem;
+        .gongsi {
+            display: block;
+            text-align: center;
+
+            p {
+                line-height: 1.3;
+                font-size: 0.2rem;
+
+                &:nth-child(2) {
+                    margin: 0;
+                }
+            }
         }
-      }
-    }
 
-    .logo {
-      position: absolute;
-      bottom: 0.6rem;
-      left: 0;
-      width: 100%;
-      display: flex;
-      justify-content: space-evenly;
+        // div {
+        //   // height: 30px;
+        //   width: 100%;
+        //   text-align: center;
+        //   // line-height: 30px;
+        //   font-size: 14px;
+        // }
 
-      img {
-        width: 2.2rem;
-        height: 0.7rem;
-      }
-    }
-  }
-
-  .button-wrapper {
-    display: block;
-    position: absolute;
-    left: px2rem(96);
-    top: px2rem(1314);
-    width: px2rem(560);
-    height: px2rem(92);
-
-    a {
-      display: inline-block;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .button2-wrapper {
-    display: block;
-    position: absolute;
-    left: px2rem(232);
-    // top: px2rem(1208);
-    bottom: px2rem(128);
-    width: px2rem(300);
-    height: px2rem(60);
-    background: rgba(255, 255, 255, 0);
-
-    a {
-      display: inline-block;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .m-button {
-    display: block;
-  }
-
-  .text-wrapper {
-    padding-left: 0;
-    width: 90%;
-    margin-left: -45%;
-    padding-top: 108px;
-
-    .text {
-      .txt1 {
-        margin-bottom: 10px;
-      }
-
-    }
-
-    .text1,
-    p {
-      text-align: center;
-    }
-  }
-
-  .eori {
-    // height: 1.2rem;
-    width: 100%;
-    background: #30312C;
-    color: rgb(255, 255, 255);
-    padding: 0.2rem 0;
-    // position: absolute;
-    // top: 0.75rem;
-
-    .recordfoot {
-      color: #fff;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .record {
-        display: inline-block;
-        padding-right: px2rem(4);
-        height: px2rem(28, );
-        width: px2rem(32, );
-        background: url(../images/icon_police.png) no-repeat;
-      }
-    }
-
-    .gongsi {
-      display: block;
-      text-align: center;
-
-      p {
-        line-height: 1.3;
-        font-size: 0.2rem;
-
-        &:nth-child(2) {
-          margin: 0;
+        .tit {
+            height: px2rem(120);
+            line-height: px2rem(120);
+            text-align: center;
+            font-size: 20px;
         }
-      }
+
     }
 
-    // div {
-    //   // height: 30px;
-    //   width: 100%;
-    //   text-align: center;
-    //   // line-height: 30px;
-    //   font-size: 14px;
-    // }
-
-    .tit {
-      height: px2rem(120);
-      line-height: px2rem(120);
-      text-align: center;
-      font-size: 20px;
-    }
-
-  }
-
 }
 
 // @media screen and (max-width:375px) {
@@ -459,27 +310,27 @@ html {
 
 
 .toast {
-  background: rgba(0, 0, 0, 0.9);
-  border-radius: 10px;
-  width: 100px;
-  font-size: 16px;
-  position: fixed;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  color: #fff;
-  height: 40px;
-  line-height: 40px;
-  text-align: center;
-  display: none;
-  z-index: 9;
+    background: rgba(0, 0, 0, 0.9);
+    border-radius: 10px;
+    width: 100px;
+    font-size: 16px;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    display: none;
+    z-index: 9;
 }
 
 .tips {
-  display: none;
-  position: fixed;
-  top: 0;
-  right: px2rem(20);
-  width: px2rem(460);
-  z-index: 9;
+    display: none;
+    position: fixed;
+    top: 0;
+    right: px2rem(20);
+    width: px2rem(460);
+    z-index: 9;
 }

view/peko/home/index.html

@@ -28,6 +28,7 @@
   <title>piko</title>
 
   <!-- <link rel="stylesheet" href="./home/css/reset.css"> -->
+  <link rel="shortcut icon" href="./images/pikolive.png" type="image/x-icon">
   <link rel="stylesheet" href="./css/reset.css">
   <link rel="stylesheet" href="./css/index.css">
   <!-- <link rel="stylesheet" href="./home/css/index.css"> -->
@@ -66,7 +67,7 @@
           <!-- <div class="swiper-pagination swp"></div> -->
         </div>
         <div class="logo">
-          <img class="googlePlay" src="./images/googlePlay.png" alt="">
+          <img class="googlePlay" src="./images/googlePlay2.png" alt="">
           <img class="appleStore" src="./images/appleStore.png" alt="">
           <img class="apk" src="./images/apk.png" alt="">
         </div>
@@ -82,10 +83,10 @@
         <a href="https://beian.miit.gov.cn/#/Integrated/index">粤ICP备2020098441号</a>
       </div> -->
       <div class="gongsi">
-        <p>Hong Kong Li Zi Technology Co., Limited</p>
-        <p>香港荔枝科技有限公司</p>
+        <p>Hongkong Han Fei Technology Co., Limited</p>
+        <!-- <p>香港翰飞科技有限公司</p> -->
         <p>CR No:3040005 </p>
-        <p>地址：FLAT/RM 7022 BLK D 7/F,TAK WING IND BLDG,3 TSUN WEN ROAD,TUEN MUN</p>
+        <p>Address：BLDG. 19-21 HING YIP STREET KWUN TONG, KLN</p>
       </div>
     </div>
   </div>

view/peko/home/js/index.js

@@ -103,6 +103,7 @@ $(function () {
     })
     // logo跳转
     $('.googlePlay').click(function () {
+        return
         window.location.href = 'https://play.google.com/store/apps/details?id=com.vele.pekolive'
     })
     $('.appleStore').click(function () {

view/peko/modules/boxActivity/css/index.css

@@ -0,0 +1,396 @@
+html,
+body {
+  width: 100%;
+  background-image: url(../images/bg.png);
+  background-size: 100% 39.94667rem;
+  background-repeat: no-repeat;
+}
+
+.rabbit {
+  z-index: 999;
+  width: 0.8rem;
+  height: 0.8rem;
+}
+
+.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;
+}
+
+.layui-m-layershade {
+  background-color: rgba(0, 0, 0, 0.4) !important;
+}
+
+.header {
+  width: 10rem;
+  height: 10rem;
+  margin: 0 auto -2rem;
+  background: url(../images/header.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab {
+  width: 7.86667rem;
+  height: 1.01333rem;
+  line-height: 1.01333rem;
+  margin: 0 auto 0;
+  display: flex;
+  justify-content: space-between;
+  background: #1D388F;
+  border: 0.02667rem solid #8FC5FF;
+  box-sizing: border-box;
+  border-radius: 0.16rem;
+}
+
+.tab div {
+  width: 3.94667rem;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.37333rem;
+}
+
+.tab .atc {
+  color: #fff;
+  background: url(../images/tabAct.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab {
+  width: 8.96rem;
+  height: 2.24rem;
+  display: flex;
+  justify-content: space-between;
+  margin: 0.90667rem auto 0;
+}
+
+.boxTab div {
+  width: 2.82667rem;
+  height: 100%;
+  position: relative;
+}
+
+.boxTab div .top {
+  width: 1.97333rem;
+  height: 1.97333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 1.01333rem;
+}
+
+.boxTab div p {
+  width: 100%;
+  text-align: center;
+  color: #696C70;
+  font-size: 0.32rem;
+  position: absolute;
+  left: 0;
+  top: 1.25333rem;
+  font-weight: 500;
+}
+
+.boxTab div span {
+  width: 100%;
+  text-align: center;
+  font-size: 0.29333rem;
+  height: 0.32rem;
+  line-height: 0.32rem;
+  color: #696C70;
+  font-weight: 400;
+  vertical-align: middle;
+  position: absolute;
+  left: 0;
+  top: 1.70667rem;
+}
+
+.boxTab div span .img {
+  width: 0.32rem;
+  height: 0.32rem;
+  display: inline-block;
+  vertical-align: middle;
+  background: url(../images/notDiamond.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab div span b {
+  vertical-align: middle;
+}
+
+.boxTab .box1 {
+  background: url(../images/notShow.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .box1 .top {
+  background: url(../images/notBox1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .box2 {
+  background: url(../images/notShow.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .box2 .top {
+  background: url(../images/notBox2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .box3 {
+  background: url(../images/notShow.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .box3 .top {
+  background: url(../images/notBox3.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act1 {
+  background: url(../images/show.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act1 .top {
+  background: url(../images/box1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act1 p {
+  color: #FFFFFF;
+}
+
+.boxTab .act1 span .img {
+  background: url(../images/diamond.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act1 span b {
+  color: #FFFFFF;
+}
+
+.boxTab .act2 {
+  background: url(../images/show.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act2 .top {
+  background: url(../images/box2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act2 p {
+  color: #FFFFFF;
+}
+
+.boxTab .act2 span .img {
+  background: url(../images/diamond.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act2 span b {
+  color: #FFFFFF;
+}
+
+.boxTab .act3 {
+  background: url(../images/show.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act3 .top {
+  background: url(../images/box3.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act3 p {
+  color: #FFFFFF;
+}
+
+.boxTab .act3 span .img {
+  background: url(../images/diamond.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act3 span b {
+  color: #FFFFFF;
+}
+
+.page1 .boxList {
+  width: 9.14667rem;
+  display: block;
+  margin: 0.05333rem auto 0;
+}
+
+.page1 .boxList1 {
+  height: 26.18667rem;
+}
+
+.page1 .boxList2 {
+  height: 20.72rem;
+}
+
+.page1 .boxList3 {
+  height: 21.84rem;
+}
+
+.page2 {
+  display: none;
+  width: 9.14667rem;
+  height: 8.3rem;
+  margin: 0 auto 0;
+  overflow-y: scroll;
+}
+
+.page2::-webkit-scrollbar {
+  display: none;
+}
+
+.page2 .div {
+  width: 9.14667rem;
+  height: 1.97333rem;
+  margin-bottom: 0.10667rem;
+  background: url(../images/liBg.png) no-repeat;
+  background-size: 100% 100%;
+  box-sizing: border-box;
+  padding: 0 0.32rem;
+}
+
+.page2 .div .leftUser {
+  float: left;
+  width: 1.76rem;
+  margin-right: 0.21333rem;
+  margin-top: 0.21333rem;
+}
+
+.page2 .div .leftUser .tx {
+  display: block;
+  width: 1.06667rem;
+  height: 1.06667rem;
+  border-radius: 50%;
+  margin: 0 auto;
+}
+
+.page2 .div .leftUser p {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 0.29333rem;
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-top: 0.05333rem;
+}
+
+.page2 .div .inFo {
+  float: left;
+  width: 3rem;
+  text-align: center;
+  margin-top: 0.53333rem;
+}
+
+.page2 .div .inFo p {
+  width: 100%;
+  text-align: center;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 0.32rem;
+  margin-bottom: 0.2rem;
+}
+
+.page2 .div .inFo p b {
+  color: #FFEF8A;
+}
+
+.page2 .div .inFo span {
+  width: 100%;
+  display: block;
+  text-align: center;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 0.32rem;
+}
+
+.page2 .div .inFo span b {
+  color: #7AE9FF;
+}
+
+.page2 .div .rigtUser {
+  float: left;
+  width: 1.76rem;
+  margin-top: 0.21333rem;
+}
+
+.page2 .div .rigtUser .tx {
+  display: block;
+  width: 1.06667rem;
+  height: 1.06667rem;
+  border-radius: 50%;
+  margin: 0 auto;
+}
+
+.page2 .div .rigtUser p {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 0.29333rem;
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-top: 0.05333rem;
+}
+
+.page2 .div .gift {
+  float: right;
+  display: block;
+  width: 1.6rem;
+  height: 1.6rem;
+  margin-top: 0.18667rem;
+}
+
+.disclaimers {
+  width: 100%;
+  margin-top: 0.24rem;
+  margin-bottom: 0.26667rem;
+}
+
+.disclaimers p {
+  width: 100%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.26667rem;
+  margin-bottom: 0.13333rem;
+}
+
+.updata {
+  position: fixed;
+  right: 0.5rem;
+  width: 1rem;
+  height: 1rem;
+  bottom: 1.6rem;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 50%;
+  display: none;
+}

view/peko/modules/boxActivity/css/index.scss

@@ -0,0 +1,413 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background-image: url(../images/bg.png);
+    background-size: 100% px2rem(2996);
+    background-repeat: no-repeat;
+}
+
+.rabbit {
+    z-index: 999;
+    width: px2rem(60);
+    height: px2rem(60);
+}
+
+.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);
+    }
+}
+
+.layui-m-layershade {
+    background-color: rgba(0, 0, 0, .4) !important;
+}
+
+.header {
+    width: px2rem(750);
+    height: px2rem(750);
+    margin: 0 auto -2rem;
+    background: url(../images/header.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.tab {
+    width: px2rem(590);
+    height: px2rem(76);
+    line-height: px2rem(76);
+    margin: 0 auto 0;
+    display: flex;
+    justify-content: space-between;
+    background: #1D388F;
+    border: px2rem(2) solid #8FC5FF;
+    box-sizing: border-box;
+    border-radius: px2rem(12);
+
+    div {
+        width: px2rem(296);
+        text-align: center;
+        color: rgba(255, 255, 255, 0.8);
+        font-size: px2rem(28);
+    }
+
+    .atc {
+        color: #fff;
+        background: url(../images/tabAct.png) no-repeat;
+        background-size: 100% 100%;
+    }
+}
+
+
+.boxTab {
+    width: px2rem(672);
+    height: px2rem(168);
+    display: flex;
+    justify-content: space-between;
+    margin: px2rem(68) auto 0;
+
+    div {
+        width: px2rem(212);
+        height: 100%;
+        position: relative;
+
+        .top {
+            width: px2rem(148);
+            height: px2rem(148);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: px2rem(76);
+        }
+
+        p {
+            width: 100%;
+            text-align: center;
+            color: #696C70;
+            font-size: px2rem(24);
+            position: absolute;
+            left: 0;
+            top: px2rem(94);
+            font-weight: 500;
+        }
+
+        span {
+            width: 100%;
+            text-align: center;
+            font-size: px2rem(22);
+            height: px2rem(24);
+            line-height: px2rem(24);
+            color: #696C70;
+            font-weight: 400;
+            vertical-align: middle;
+            position: absolute;
+            left: 0;
+            top: px2rem(128);
+
+            .img {
+                width: px2rem(24);
+                height: px2rem(24);
+                display: inline-block;
+                vertical-align: middle;
+                background: url(../images/notDiamond.png) no-repeat;
+                background-size: 100% 100%;
+            }
+
+            b {
+                vertical-align: middle;
+            }
+        }
+    }
+
+    .box1 {
+        background: url(../images/notShow.png) no-repeat;
+        background-size: 100% 100%;
+
+        .top {
+            background: url(../images/notBox1.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .box2 {
+        background: url(../images/notShow.png) no-repeat;
+        background-size: 100% 100%;
+
+        .top {
+            background: url(../images/notBox2.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .box3 {
+        background: url(../images/notShow.png) no-repeat;
+        background-size: 100% 100%;
+
+        .top {
+            background: url(../images/notBox3.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .act1 {
+        background: url(../images/show.png) no-repeat;
+        background-size: 100% 100%;
+
+        .top {
+            background: url(../images/box1.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+
+        p {
+            color: #FFFFFF;
+        }
+
+        span {
+            .img {
+                background: url(../images/diamond.png) no-repeat;
+                background-size: 100% 100%;
+            }
+
+            b {
+                color: #FFFFFF;
+            }
+        }
+    }
+
+    .act2 {
+        background: url(../images/show.png) no-repeat;
+        background-size: 100% 100%;
+
+        .top {
+            background: url(../images/box2.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+
+        p {
+            color: #FFFFFF;
+        }
+
+        span {
+            .img {
+                background: url(../images/diamond.png) no-repeat;
+                background-size: 100% 100%;
+            }
+
+            b {
+                color: #FFFFFF;
+            }
+        }
+    }
+
+    .act3 {
+        background: url(../images/show.png) no-repeat;
+        background-size: 100% 100%;
+
+        .top {
+            background: url(../images/box3.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        p {
+            color: #FFFFFF;
+        }
+
+        span {
+            .img {
+                background: url(../images/diamond.png) no-repeat;
+                background-size: 100% 100%;
+            }
+
+            b {
+                color: #FFFFFF;
+            }
+        }
+    }
+}
+
+.page1 {
+    // display: none;
+
+    .boxList {
+        width: px2rem(686);
+        display: block;
+        margin: px2rem(4) auto 0;
+    }
+
+    .boxList1 {
+        height: px2rem(1964);
+    }
+
+    .boxList2 {
+        height: px2rem(1554);
+    }
+
+    .boxList3 {
+        height: px2rem(1638);
+    }
+}
+
+.page2 {
+    display: none;
+    width: px2rem(686);
+    height: 8.3rem;
+    margin: 0 auto 0;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    .div {
+        width: px2rem(686);
+        height: px2rem(148);
+        margin-bottom: px2rem(8);
+        background: url(../images/liBg.png) no-repeat;
+        background-size: 100% 100%;
+        box-sizing: border-box;
+        padding: 0 px2rem(24);
+
+        .leftUser {
+            float: left;
+            width: px2rem(132);
+            margin-right: px2rem(16);
+            margin-top: px2rem(16);
+
+            .tx {
+                display: block;
+                width: px2rem(80);
+                height: px2rem(80);
+                border-radius: 50%;
+                margin: 0 auto;
+            }
+
+            p {
+                width: 100%;
+                text-align: center;
+                color: #fff;
+                font-size: px2rem(22);
+                font-weight: 500;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                margin-top: px2rem(4);
+            }
+        }
+
+        .inFo {
+            float: left;
+            width: 3rem;
+            text-align: center;
+            margin-top: px2rem(40);
+
+            p {
+                width: 100%;
+                text-align: center;
+                font-weight: 400;
+                color: rgba(255, 255, 255, 0.9);
+                font-size: px2rem(24);
+                margin-bottom: px2rem(15);
+
+                b {
+                    color: #FFEF8A;
+                }
+            }
+
+            span {
+                width: 100%;
+                display: block;
+                text-align: center;
+                font-weight: 400;
+                color: rgba(255, 255, 255, 0.9);
+                font-size: px2rem(24);
+
+                b {
+                    color: #7AE9FF;
+                }
+            }
+        }
+
+        .rigtUser {
+            float: left;
+            width: px2rem(132);
+            margin-top: px2rem(16);
+
+            .tx {
+                display: block;
+                width: px2rem(80);
+                height: px2rem(80);
+                border-radius: 50%;
+                margin: 0 auto;
+            }
+
+            p {
+                width: 100%;
+                text-align: center;
+                color: #fff;
+                font-size: px2rem(22);
+                font-weight: 500;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                margin-top: px2rem(4);
+            }
+        }
+
+        .gift {
+            float: right;
+            display: block;
+            width: px2rem(120);
+            height: px2rem(120);
+            margin-top: px2rem(14);
+        }
+    }
+}
+
+.disclaimers {
+    width: 100%;
+    margin-top: px2rem(18);
+    margin-bottom: px2rem(20);
+
+    p {
+        width: 100%;
+        text-align: center;
+        color: #FFFFFF;
+        font-size: px2rem(20);
+        margin-bottom: px2rem(10);
+    }
+}
+
+.updata {
+    position: fixed;
+    right: 0.5rem;
+    width: 1rem;
+    height: 1rem;
+    bottom: 1.6rem;
+    background: rgba(0, 0, 0, .4);
+    border-radius: 50%;
+    display: none;
+}

view/peko/modules/boxActivity/index.html

@@ -0,0 +1,91 @@
+<!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"></div>
+    <!-- tab切換 -->
+    <div class="tab">
+        <div class="atc">寶箱介紹</div>
+        <div>手氣榜</div>
+    </div>
+
+    <!-- 寶箱獎勵切換 -->
+    <div class="boxTab">
+        <div class="box box1 act1">
+            <div class="top"></div>
+            <p>白銀寶箱</p>
+            <span>
+                <div class="img"></div><b>600</b>
+            </span>
+        </div>
+        <div class="box box2">
+            <div class="top"></div>
+            <p>黃金寶箱</p>
+            <span>
+                <div class="img"></div><b>2000</b>
+            </span>
+        </div>
+        <div class="box box3">
+            <div class="top"></div>
+            <p>鉆石寶箱</p>
+            <span>
+                <div class="img"></div><b>5000</b>
+            </span>
+        </div>
+    </div>
+
+    <!-- 頁面1 -->
+    <div class="page1">
+        <!-- 寶箱獎勵 -->
+        <img src="./images/boxList1.png" alt="" class="boxList">
+    </div>
+
+    <!-- 頁面2 -->
+    <div class="page2">
+        <!-- <div class="div">
+            <div class="leftUser">
+                <img src="./images/logo.png" alt="" class="tx">
+                <p>我是名字哦哦哦哦哦哦</p>
+            </div>
+            <div class="inFo">
+                <p>贈送 <b>白銀寶箱*1</b> 給</p>
+                <span>獲得 <b>牛氣沖天*1</b></span>
+            </div>
+            <div class="rigtUser">
+                <img src="./images/logo.png" alt="" class="tx">
+                <p>我是名字哦哦哦哦哦哦</p>
+            </div>
+            <img src="" alt="" class="gift">
+        </div> -->
+    </div>
+    <!-- 更新 -->
+    <img src="./images/update.png" alt="" class="updata">
+    <!-- 免責聲明 -->
+    <div class="disclaimers">
+        <p>活動最終解釋權歸Piko Live所有</p>
+        <p>本活動以及獎勵與Google/蘋果公司無關</p>
+    </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/wow.js"></script>
+<script src="./js/index.js"></script>

view/peko/modules/boxActivity/js/index.js

@@ -0,0 +1,130 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+let env = EnvCheck();
+var boxId = [];
+if (env == 'test') {
+    boxId = [2167, 2166, 2165];
+    new VConsole();
+} else {
+    boxId = [2210, 2211, 2212];
+}
+var giftId = boxId[0];
+var page = 1;
+// 封裝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)
+            }
+        })
+        getRank();
+    }, 100)
+})
+// 榜單接口
+function getRank () {
+    $('.page2 .div').remove();
+    showLoading()
+    networkRequest({
+        type: 'GET',
+        url: urlPrefix + '/luckybag/getRank',
+        data: { giftId },
+        success (res) {
+            if (res.code === 200) {
+                var str = '';
+                res.data.forEach(res => {
+                    str += `
+                    <div class="div">
+                        <div class="leftUser">
+                            <img src="${res.sendAvatar}" alt="" class="tx">
+                            <p>${res.sendNick}</p>
+                        </div>
+                        <div class="inFo">
+                            <p>贈送 <b>${res.luckyBagName}*${res.luckyBagNum}</b> 給</p>
+                            <span>獲得 <b>${res.giftName}*${res.giftNum}</b></span>
+                        </div>
+                        <div class="rigtUser">
+                            <img src="${res.receiveAvatar}" alt="" class="tx">
+                            <p>${res.receiveNick}</p>
+                        </div>
+                        <img src="${res.giftUrl}" alt="" class="gift">
+                    </div>
+                    `
+                });
+                $('.page2').append(str);
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
+// 頁面切換
+$('.tab div').click(function () {
+    var i = $(this).index() + 1;
+    page = i;
+    $(this).addClass('atc').siblings().removeClass('atc');
+    $('.page1').hide();
+    $('.page2').hide();
+    $(`.page${i}`).show();
+    if (i == 2) {
+        getRank();
+        $('.updata').show();
+    }else{
+        $('.updata').hide();
+    }
+})
+// 寶箱切換
+$('.boxTab .box').click(function () {
+    var i = $(this).index();
+    giftId = boxId[i];
+    $('.boxTab .box').removeClass('act1').removeClass('act2').removeClass('act3');
+    $(this).addClass(`act${i + 1}`);
+    if (page == 1) {
+        $('.page1 .boxList').removeClass('boxList1').removeClass('boxList2').removeClass('boxList3').addClass(`boxList${i + 1}`);
+        $('.page1 .boxList').attr('src', `./images/boxList${i + 1}.png`);
+    } else {
+        getRank();
+    }
+})
+// 更新
+$('.updata').click(function () {
+    getRank();
+})

view/peko/modules/boxActivity/js/wow.js

@@ -0,0 +1,46 @@
+var baba = document.querySelector('body');
+baba.addEventListener('click', function (e) {
+    // $('body,html').css({ "width": "100%", "position": "relative", "overflow": "hidden" });
+    tianJia(e);
+})
+
+var erZi = [];
+function tianJia (e) {
+    var sunZi = document.createElement('div');
+    sunZi.className = 'rabbit';
+    // sunZi.innerHTML = '<i class="iconfont icon-tuzi"></i>';
+    sunZi.innerHTML = '<img src="./images/xingyunbao.png" alt="">';
+    baba.appendChild(sunZi);
+    erZi.push({
+        el: sunZi,
+        top: e.pageY - 80,
+        left: e.pageX - 20,
+        opacity: 1.3,
+        scale: 1,
+        color: `rgb(${255 * Math.random()},${255 * Math.random()},${255 * Math.random()})`
+    });
+    move();
+};
+function move () {
+    for (var i = 0; i < erZi.length; i++) {
+        if (erZi[i].opacity <= 0) {
+            baba.removeChild(erZi[i].el);
+            erZi.splice(i, 1);
+            return;
+        }
+        erZi[i].top--;
+        erZi[i].opacity = erZi[i].opacity - 0.04;
+        // erZi[i].scale = erZi[i].scale + 0.0001;
+        erZi[i].el.style.cssText = `
+            top: ${erZi[i].top}px;
+            left: ${erZi[i].left}px;
+            color: ${erZi[i].color};
+            opacity: ${erZi[i].opacity};
+            transform: scale(${erZi[i].scale});
+            position: absolute;
+            `
+
+    }
+    window.requestAnimationFrame(move);
+    // $('body,html').css({ "width": "100%", "position": "relative", "overflow": "auto" });
+}

view/peko/modules/charm/css/index.css

@@ -66,13 +66,13 @@ img {
 }
 
 .rank-three .rank-three-detail .user-grade img {
-  height: 0.4rem;
-  width: 0.4rem;
+  height: 0.5rem;
+  width: 1rem;
 }
 
 .rank-three .rank-three-detail .user-grade img:last-child {
-  height: 0.42667rem;
-  width: 0.53333rem;
+  height: 0.5rem;
+  width: 1rem;
   margin-left: 0.05333rem;
 }
 
@@ -177,13 +177,13 @@ img {
 }
 
 .renk-other .rank-other-detail .user-detail .user-grade img {
-  height: 0.4rem;
-  width: 0.4rem;
+  height: 0.5rem;
+  width: 1rem;
 }
 
 .renk-other .rank-other-detail .user-detail .user-grade img:last-child {
-  height: 0.42667rem;
-  width: 0.53333rem;
+  height: 0.5rem;
+  width: 1rem;
   margin-left: 0.05333rem;
 }
 

view/peko/modules/charm/css/index.scss

@@ -1,244 +1,247 @@
 @charset "UTF-8";
-@function px2rem($px, $rem:37.5) {
-  @return $px / $rem+rem;
+
+@function px2rem($px) {
+    @return $px / 37.5+rem;
 }
 
 html,
 body {
-  width: 100%;
-  height: 100%;
+    width: 100%;
+    height: 100%;
 }
 
 img {
-  // width: 100%;
-  vertical-align: top;
+    // width: 100%;
+    vertical-align: top;
 }
 
-@import '../../../common/css/flex.scss';
 
 .rank-three {
-  // position: fixed;
-  // top: 0;
-  // left: 0;
-  width: 100%;
-  height: px2rem(226);
-  background: url("../images/top-bg.png");
-  background-size: 100% 100%;
+    // position: fixed;
+    // top: 0;
+    // left: 0;
+    width: 100%;
+    height: px2rem(226);
+    background: url("../images/top-bg.png");
+    background-size: 100% 100%;
 
-  .rank-three-detail {
-    position: absolute;
-    z-index: 2;
-    width: px2rem(110);
-    height: px2rem(160);
-    display: flex;
-    flex-direction: column;
-    // justify-content: center;
-    align-items: center;
-
-    .user-img {
-      width: px2rem(97);
-      height: px2rem(97);
-      position: relative;
-
-      .ranking-bg {
-        width: px2rem(97);
-        height: px2rem(97);
-        position: relative;
-        z-index: 3;
-        background: url("../images/one.png");
-        background-size: 100% 100%;
-      }
-
-      img {
-        width: px2rem(60);
-        height: px2rem(60);
+    .rank-three-detail {
         position: absolute;
-        top: px2rem(18);
-        left: px2rem(18);
-        border-radius: 50%;
+        z-index: 2;
+        width: px2rem(110);
+        height: px2rem(160);
+        display: flex;
+        flex-direction: column;
+        // justify-content: center;
+        align-items: center;
 
-        &.un-url {
+        .user-img {
+            width: px2rem(97);
+            height: px2rem(97);
+            position: relative;
 
-          background: #fff;
-        }
-      }
-    }
+            .ranking-bg {
+                width: px2rem(97);
+                height: px2rem(97);
+                position: relative;
+                z-index: 3;
+                background: url("../images/one.png");
+                background-size: 100% 100%;
+            }
 
-    .user-nick {
-      font-size: px2rem(14);
-      font-weight: bold;
-      color: #fff;
-    }
+            img {
+                width: px2rem(60);
+                height: px2rem(60);
+                position: absolute;
+                top: px2rem(18);
+                left: px2rem(18);
+                border-radius: 50%;
 
-    .user-grade {
-      display: flex;
-      height: px2rem(20);
-      align-items: center;
+                &.un-url {
 
-      img {
-        height: px2rem(15);
-        width: px2rem(15);
-        &:last-child {
-          height: px2rem(16);
-          width: px2rem(20);
-          margin-left: px2rem(2);
+                    background: #fff;
+                }
+            }
         }
 
-        &.active {
-          display: none;
-        }
-      }
-    }
-
-    .user-charm {
-      height: px2rem(22);
-      background: rgba(255, 255, 255, 0.2);
-      min-width: px2rem(70);
-      padding: 0 px2rem(3);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: px2rem(11);
-
-      img {
-        width: px2rem(12);
-        height: px2rem(10);
-        margin-right: px2rem(2);
-      }
-
-      span {
-        color: #7154ee;
-        font-size: px2rem(14);
-      }
-    }
-
-    &:first-child {
-      top: px2rem(7);
-      left: px2rem(132);
-
-      .user-img {
-        .ranking-bg {
-          background: url("../images/one.png");
-          background-size: 100% 100%;
+        .user-nick {
+            font-size: px2rem(14);
+            font-weight: bold;
+            color: #fff;
         }
 
-        img {
-          position: absolute;
+        .user-grade {
+            display: flex;
+            height: px2rem(20);
+            align-items: center;
+
+            img {
+                height: 0.5rem;
+                width: 1rem;
+
+                &:last-child {
+                    height: 0.5rem;
+                    width: 1rem;
+                    margin-left: px2rem(2);
+                }
+
+                &.active {
+                    display: none;
+                }
+            }
         }
-      }
-    }
 
-    &:nth-child(2) {
-      top: px2rem(39);
-      left: px2rem(20);
+        .user-charm {
+            height: px2rem(22);
+            background: rgba(255, 255, 255, 0.2);
+            min-width: px2rem(70);
+            padding: 0 px2rem(3);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: px2rem(11);
 
-      .user-img {
-        .ranking-bg {
-          background: url("../images/two.png");
-          background-size: 100% 100%;
+            img {
+                width: px2rem(12);
+                height: px2rem(10);
+                margin-right: px2rem(2);
+            }
+
+            span {
+                color: #7154ee;
+                font-size: px2rem(14);
+            }
         }
-      }
-    }
 
-    &:nth-child(3) {
-      top: px2rem(48);
-      right: px2rem(20);
+        &:first-child {
+            top: px2rem(7);
+            left: px2rem(132);
 
-      .user-img {
-        .ranking-bg {
-          background: url("../images/three.png");
-          background-size: 100% 100%;
+            .user-img {
+                .ranking-bg {
+                    background: url("../images/one.png");
+                    background-size: 100% 100%;
+                }
+
+                img {
+                    position: absolute;
+                }
+            }
+        }
+
+        &:nth-child(2) {
+            top: px2rem(39);
+            left: px2rem(20);
+
+            .user-img {
+                .ranking-bg {
+                    background: url("../images/two.png");
+                    background-size: 100% 100%;
+                }
+            }
+        }
+
+        &:nth-child(3) {
+            top: px2rem(48);
+            right: px2rem(20);
+
+            .user-img {
+                .ranking-bg {
+                    background: url("../images/three.png");
+                    background-size: 100% 100%;
+                }
+            }
         }
-      }
     }
-  }
 }
 
 .renk-other {
-  // overflow-y: scroll;
-  // -webkit-overflow-scrolling: touch;
-  // &::-webkit-scrollbar {
-  //   display: none;
-  // }
-  // padding-top: px2rem(230);
+    // overflow-y: scroll;
+    // -webkit-overflow-scrolling: touch;
+    // &::-webkit-scrollbar {
+    //   display: none;
+    // }
+    // padding-top: px2rem(230);
     padding-bottom: px2rem(20);
-  .rank-other-detail {
-    margin-bottom: px2rem(20);
-    display: flex;
-    align-items: center;
 
-    .user-rank {
-      width: px2rem(45);
-      text-align: center;
-      font-size: px2rem(20);
-      color: #333333;
-    }
-
-    .user-img {
-      width: px2rem(50);
-      height: px2rem(50);
-      border-radius: 50%;
-    }
-
-    .user-detail {
-      margin-left: px2rem(25);
-      width: px2rem(180);
-
-      .nick {
-        font-size: px2rem(15);
-        font-weight: 600;
-        color: #333;
-      }
-
-      .user-grade {
+    .rank-other-detail {
+        margin-bottom: px2rem(20);
         display: flex;
-        height: px2rem(20);
         align-items: center;
 
-        img {
-          height: px2rem(15);
-          width: px2rem(15);
-          &:last-child {
-            height: px2rem(16);
-            width: px2rem(20);
-            margin-left: px2rem(2);
-          }
-
-          &.active {
-            display: none;
-          }
+        .user-rank {
+            width: px2rem(45);
+            text-align: center;
+            font-size: px2rem(20);
+            color: #333333;
+        }
+
+        .user-img {
+            width: px2rem(50);
+            height: px2rem(50);
+            border-radius: 50%;
+        }
+
+        .user-detail {
+            margin-left: px2rem(25);
+            width: px2rem(180);
+
+            .nick {
+                font-size: px2rem(15);
+                font-weight: 600;
+                color: #333;
+            }
+
+            .user-grade {
+                display: flex;
+                height: px2rem(20);
+                align-items: center;
+
+                img {
+                    height: 0.5rem;
+                    width: 1rem;
+
+                    &:last-child {
+                        height: 0.5rem;
+                        width: 1rem;
+                        margin-left: px2rem(2);
+                    }
+
+                    &.active {
+                        display: none;
+                    }
+                }
+            }
+        }
+
+        .user-charm {
+            height: px2rem(22);
+            background: rgba(255, 255, 255, 0.2);
+            width: px2rem(90);
+            display: flex;
+            align-items: center;
+            border-radius: px2rem(11);
+
+            img {
+                width: px2rem(12);
+                height: px2rem(10);
+                margin-right: px2rem(2);
+            }
+
+            span {
+                color: #333;
+                font-size: px2rem(14);
+            }
         }
-      }
     }
-
-    .user-charm {
-      height: px2rem(22);
-      background: rgba(255, 255, 255, 0.2);
-      width: px2rem(90);
-      display: flex;
-      align-items: center;
-      border-radius: px2rem(11);
-
-      img {
-        width: px2rem(12);
-        height: px2rem(10);
-        margin-right: px2rem(2);
-      }
-
-      span {
-        color: #333;
-        font-size: px2rem(14);
-      }
-    }
-  }
 }
 
-.message{
-  display: none;
-  position: fixed;
-  bottom: px2rem(20);
-  left: 50%;
-  transform: translateX(-50%);
-  font-size: px2rem(16);
-  color: #000;
+.message {
+    display: none;
+    position: fixed;
+    bottom: px2rem(20);
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: px2rem(16);
+    color: #000;
 }

view/peko/modules/charm/index.html

@@ -9,6 +9,7 @@
   <title>魅力值</title>
   <link rel="stylesheet" href="../../common/css/reset.css">
   <link rel="stylesheet" href="../../common/css/swiper.min.css">
+  <link rel="stylesheet" href="../../common/css/flex.css">
   <link rel="stylesheet" href="css/index.css?v=1.1">
   <script src="../../common/js/flexible.js"></script>
 </head>

view/peko/modules/luckyTarot/css/index.css

@@ -1,6 +1,7 @@
+@charset "UTF-8";
 body {
   width: 100%;
-  height: 21.6533333333rem;
+  height: 21.65333rem;
   background: url(../images/bg.png) no-repeat;
   background-size: 100% 100%;
   margin: 0 auto;
@@ -14,26 +15,28 @@ body {
 
 .back {
   position: fixed;
-  top: 0.9333333333rem;
-  left: 0.4533333333rem;
+  top: 0.93333rem;
+  left: 0.45333rem;
   z-index: 9999;
-  width: 0.8266666667rem;
-  height: 0.8266666667rem;
+  width: 0.82667rem;
+  height: 0.82667rem;
 }
+
 .back img {
   width: 100%;
   height: 100%;
 }
+
 .back p {
   color: #fff;
-  font-size: 0.4266666667rem;
+  font-size: 0.42667rem;
   position: absolute;
   width: 9rem;
   left: 0;
   top: 0;
   height: 100%;
   text-align: center;
-  line-height: 0.8266666667rem;
+  line-height: 0.82667rem;
 }
 
 .header {
@@ -47,25 +50,27 @@ body {
 
 .roulette {
   width: 10rem;
-  height: 11.3333333333rem;
+  height: 11.33333rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: 0rem;
 }
+
 .roulette .roulette_in {
   width: 100%;
   height: 100%;
 }
+
 .roulette .roulette_in canvas {
   width: 100%;
   height: 100%;
 }
 
 .gold_10 {
-  width: 6.4266666667rem;
-  height: 0.6933333333rem;
-  margin: 0rem auto 0.2666666667rem;
+  width: 6.42667rem;
+  height: 0.69333rem;
+  margin: 0rem auto 0.26667rem;
   display: block;
   position: relative;
   z-index: 3;
@@ -73,239 +78,293 @@ body {
 
 .rule {
   width: 0.68rem;
-  height: 1.8666666667rem;
+  height: 1.86667rem;
   background: url(../images/icon.png) no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  top: 2.8133333333rem;
+  top: 2.81333rem;
   right: 0;
   color: #FFE7A9;
-  font-size: 0.2933333333rem;
+  font-size: 0.29333rem;
   text-align: center;
-  padding: 0.3333333333rem 0.1333333333rem 0.3066666667rem 0.2666666667rem;
+  padding: 0.33333rem 0.13333rem 0.30667rem 0.26667rem;
   box-sizing: border-box;
   z-index: 3;
 }
 
 .record {
   width: 0.68rem;
-  height: 1.8666666667rem;
+  height: 1.86667rem;
   background: url(../images/icon.png) no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  top: 4.8533333333rem;
+  top: 4.85333rem;
   right: 0;
   color: #FFE7A9;
-  font-size: 0.2933333333rem;
+  font-size: 0.29333rem;
   text-align: center;
-  padding: 0.3333333333rem 0.1333333333rem 0.3066666667rem 0.2666666667rem;
+  padding: 0.33333rem 0.13333rem 0.30667rem 0.26667rem;
   box-sizing: border-box;
   z-index: 9;
 }
 
 .tarotBox {
-  width: 9.8266666667rem;
-  height: 14.1333333333rem;
+  width: 9.82667rem;
+  height: 14.13333rem;
   background: url(../images/middleBg.png) no-repeat;
   background-size: 100% 100%;
   margin: 0 auto 0;
   position: relative;
+  overflow: hidden;
 }
+
 .tarotBox .tabBox {
   width: 9.56rem;
-  height: 1.3066666667rem;
+  height: 1.30667rem;
   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;
+  width: 3.37333rem;
   height: 100%;
   color: #FEF0C0;
-  font-size: 0.3733333333rem;
+  font-size: 0.37333rem;
   text-align: center;
   box-sizing: border-box;
-  padding-top: 0.3466666667rem;
+  padding-top: 0.34667rem;
 }
+
 .tarotBox .tabBox div b {
   color: #FEF0C0;
   font-size: 0.24rem;
   margin-top: 0.04rem;
   display: block;
 }
+
 .tarotBox .tabBox .active1 {
   background: url(../images/active1.png) no-repeat;
   background-size: 100% 100%;
   color: #FFFFFF;
 }
+
 .tarotBox .tabBox .active1 b {
   color: #FFFFFF;
 }
+
 .tarotBox .tabBox .active2 {
   background: url(../images/active2.png) no-repeat;
   background-size: 100% 100%;
   color: #FFFFFF;
 }
+
 .tarotBox .tabBox .active2 b {
   color: #FFFFFF;
 }
+
 .tarotBox .tabBox .active3 {
   background: url(../images/active3.png) no-repeat;
   background-size: 100% 100%;
   color: #FFFFFF;
 }
+
 .tarotBox .tabBox .active3 b {
   color: #FFFFFF;
 }
+
 .tarotBox .gradeText {
   position: absolute;
-  left: 0.9866666667rem;
-  top: 1.4666666667rem;
+  left: 0.98667rem;
+  top: 1.46667rem;
   color: #FFEAA9;
   font-size: 0.32rem;
 }
+
 .tarotBox .diamond {
-  min-width: 1.9733333333rem;
-  height: 0.5866666667rem;
-  border-radius: 0.5866666667rem;
-  line-height: 0.5866666667rem;
+  min-width: 1.97333rem;
+  height: 0.58667rem;
+  border-radius: 0.58667rem;
+  line-height: 0.58667rem;
   position: absolute;
   right: 0.96rem;
   top: 1.28rem;
   background: #343662;
   color: #FFFFFF;
-  border: 0.0133333333rem solid #FFF3B1;
+  border: 0.01333rem solid #FFF3B1;
   box-sizing: border-box;
   vertical-align: middle;
 }
+
 .tarotBox .diamond .diamondIcon {
   display: inline-block;
-  width: 0.3866666667rem;
+  width: 0.38667rem;
   height: 0.28rem;
   margin-top: 0.16rem;
-  margin-left: 0.1733333333rem;
+  margin-left: 0.17333rem;
 }
+
 .tarotBox .diamond b {
-  font-size: 0.2666666667rem;
+  font-size: 0.26667rem;
   display: inline-block;
-  margin: 0 0.0933333333rem;
+  margin: 0 0.09333rem;
 }
+
 .tarotBox .diamond .add {
   width: 0.24rem;
   height: 0.24rem;
   display: inline-block;
-  margin-top: 0.1733333333rem;
-  margin-right: 0.1866666667rem;
+  margin-top: 0.17333rem;
+  margin-right: 0.18667rem;
 }
+
 .tarotBox .cardBox {
-  width: 1.9733333333rem;
-  height: 3.2133333333rem;
+  width: 1.97333rem;
+  height: 3.21333rem;
   position: absolute;
   z-index: 3;
 }
+
+.tarotBox .cardBox span {
+  text-align: center;
+  font-size: 0.34667rem;
+  font-weight: 600;
+  position: absolute;
+  left: 0.3rem;
+  top: 0.3rem;
+}
+
 .tarotBox .card1 {
   background: url(../images/card.png) no-repeat;
   background-size: 100% 100%;
+  color: #64CCF3;
+  text-shadow: #000 0.01333rem 0.01333rem 0.01333rem;
 }
+
 .tarotBox .card2 {
   background: url(../images/card2.png) no-repeat;
   background-size: 100% 100%;
   display: none;
+  color: #DC8FF0;
+  text-shadow: #000 0.01333rem 0.01333rem 0.01333rem;
 }
+
 .tarotBox .card3 {
   background: url(../images/card3.png) no-repeat;
   background-size: 100% 100%;
   display: none;
+  color: #FFEB3B;
+  text-shadow: #000 0.01333rem 0.01333rem 0.01333rem;
 }
+
 .tarotBox .card1_active {
   background: url(../images/card1_active.png) no-repeat;
   background-size: 100% 100%;
 }
+
 .tarotBox .card2_active {
   background: url(../images/card2_active.png) no-repeat;
   background-size: 100% 100%;
 }
+
 .tarotBox .card3_active {
   background: url(../images/card3_active.png) no-repeat;
   background-size: 100% 100%;
 }
+
 .tarotBox .card_not {
   background: url(../images/not.png) no-repeat;
   background-size: 100% 100%;
 }
+
 .tarotBox .card_winning1 {
   background: url(../images/winning1.png) no-repeat;
   background-size: 100% 100%;
 }
+
 .tarotBox .card_winning2 {
   background: url(../images/winning2.png) no-repeat;
   background-size: 100% 100%;
 }
+
 .tarotBox .card_winning3 {
   background: url(../images/winning3.png) no-repeat;
   background-size: 100% 100%;
 }
+
 .tarotBox .cardBox0 {
-  left: 0.9466666667rem;
-  top: 2.0933333333rem;
+  left: 0.94667rem;
+  top: 2.09333rem;
 }
+
 .tarotBox .cardBox1 {
-  left: 2.9866666667rem;
-  top: 2.0933333333rem;
+  left: 2.98667rem;
+  top: 2.09333rem;
 }
+
 .tarotBox .cardBox2 {
   left: 5.04rem;
-  top: 2.0933333333rem;
+  top: 2.09333rem;
 }
+
 .tarotBox .cardBox3 {
   left: 7.08rem;
-  top: 2.0933333333rem;
+  top: 2.09333rem;
 }
+
 .tarotBox .cardBox4 {
   left: 7.08rem;
   top: 5.52rem;
 }
+
 .tarotBox .cardBox5 {
   left: 7.08rem;
-  top: 8.8533333333rem;
+  top: 8.85333rem;
 }
+
 .tarotBox .cardBox6 {
   left: 5.04rem;
-  top: 8.8533333333rem;
+  top: 8.85333rem;
 }
+
 .tarotBox .cardBox7 {
-  left: 2.9866666667rem;
-  top: 8.8533333333rem;
+  left: 2.98667rem;
+  top: 8.85333rem;
 }
+
 .tarotBox .cardBox8 {
-  left: 0.9466666667rem;
-  top: 8.8533333333rem;
+  left: 0.94667rem;
+  top: 8.85333rem;
 }
+
 .tarotBox .cardBox9 {
-  left: 0.9466666667rem;
+  left: 0.94667rem;
   top: 5.52rem;
 }
+
 .tarotBox .cardBoxBut {
-  width: 2.5066666667rem;
-  height: 0.9866666667rem;
+  width: 2.50667rem;
+  height: 0.98667rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  top: 7.4666666667rem;
+  top: 7.46667rem;
   z-index: 3;
 }
+
 .tarotBox .butAgain {
-  width: 2.5066666667rem;
-  height: 0.9866666667rem;
+  width: 2.50667rem;
+  height: 0.98667rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  top: 7.4666666667rem;
+  top: 7.46667rem;
   display: none;
   z-index: 3;
 }
+
 .tarotBox .gonggao {
   width: 100%;
   height: 1.3rem;
@@ -315,27 +374,32 @@ body {
   top: 12.25rem;
   overflow: hidden;
 }
+
 .tarotBox .gonggao .ul1 {
   width: 100%;
   height: 100%;
 }
+
 .tarotBox .gonggao .ul1 li {
   width: 100%;
   text-align: center;
   color: #fff;
   font-size: 0.32rem;
-  margin-bottom: 0.1466666667rem;
+  margin-bottom: 0.14667rem;
 }
+
 .tarotBox .gonggao .ul1 li b {
   color: #FFEAA9;
 }
+
 .tarotBox .gonggao .ul1 li i {
   font-style: normal;
   color: #80E6FF;
 }
+
 .tarotBox .cardBoxText_gift {
-  width: 4.2666666667rem;
-  height: 3.0133333333rem;
+  width: 4.26667rem;
+  height: 3.01333rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -344,9 +408,10 @@ body {
   font-size: 0.4rem;
   text-align: center;
 }
+
 .tarotBox .cardBoxText_gx {
-  width: 4.2666666667rem;
-  height: 3.0133333333rem;
+  width: 4.26667rem;
+  height: 3.01333rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -355,22 +420,26 @@ body {
   padding-top: 0.88rem;
   display: none;
 }
+
 .tarotBox .cardBoxText_gx p {
   width: 100%;
   text-align: center;
-  margin-bottom: 0.2133333333rem;
+  margin-bottom: 0.21333rem;
   color: #FFE26D;
-  font-size: 0.3733333333rem;
+  font-size: 0.37333rem;
 }
+
 .tarotBox .cardBoxText_gx p i {
   font-style: normal;
 }
+
 .tarotBox .cardBoxText_gx p b {
   color: #FFE26D;
 }
+
 .tarotBox .cardBoxText_no {
-  width: 4.2666666667rem;
-  height: 3.0133333333rem;
+  width: 4.26667rem;
+  height: 3.01333rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -379,22 +448,26 @@ body {
   padding-top: 0.88rem;
   display: none;
 }
+
 .tarotBox .cardBoxText_no p {
   width: 100%;
   text-align: center;
-  margin-bottom: 0.2133333333rem;
+  margin-bottom: 0.21333rem;
   color: #fff;
-  font-size: 0.3733333333rem;
+  font-size: 0.37333rem;
 }
+
 .tarotBox .cardBoxText_no p i {
   font-style: normal;
 }
+
 .tarotBox .cardBoxText_no p b {
   color: #80E6FF;
 }
+
 .tarotBox .cardBoxText {
-  width: 4.2666666667rem;
-  height: 3.0133333333rem;
+  width: 4.26667rem;
+  height: 3.01333rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -403,31 +476,37 @@ body {
   padding-top: 0.88rem;
   z-index: 3;
 }
+
 .tarotBox .cardBoxText p {
   width: 100%;
   text-align: center;
-  margin-bottom: 0.2133333333rem;
+  margin-bottom: 0.21333rem;
   color: #fff;
-  font-size: 0.3733333333rem;
+  font-size: 0.37333rem;
 }
+
 .tarotBox .cardBoxText p i {
   font-style: normal;
 }
+
 .tarotBox .cardBoxText p b {
   color: #80E6FF;
 }
+
 .tarotBox .star {
   width: 4.48rem;
-  height: 3.8666666667rem;
+  height: 3.86667rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: 5.52rem;
 }
+
 .tarotBox .star .star_in {
   width: 100%;
   height: 100%;
 }
+
 .tarotBox .star .star_in canvas {
   width: 100%;
   height: 100%;
@@ -443,35 +522,40 @@ h3 {
 
 .rule_pub {
   position: fixed;
+  right: 0;
+  bottom: 0;
   left: 0;
   top: 0;
-  bottom: 0;
-  right: 0;
   z-index: 99999;
   background: rgba(0, 0, 0, 0.4);
   display: none;
+  height: 100vh;
+  width: 100vw;
 }
+
 .rule_pub .rule_pub_in {
-  width: 8.72rem;
-  height: 11.6533333333rem;
+  width: 8rem;
+  height: 10.93333rem;
   background: url(../images/rule.png) no-repeat;
   background-size: 100% 100%;
   position: relative;
   left: 50%;
-  top: 50%;
+  top: 45%;
   transform: translate(-50%, -50%);
 }
+
 .rule_pub .rule_pub_in .close {
   position: absolute;
-  width: 0.9066666667rem;
-  height: 0.9066666667rem;
+  width: 0.90667rem;
+  height: 0.90667rem;
   left: 50%;
   transform: translateX(-50%);
-  bottom: -1.3333333333rem;
+  bottom: -1.33333rem;
 }
 
 .winningRecord {
   position: fixed;
+  height: 21.65333rem;
   left: 0;
   top: 0;
   bottom: 0;
@@ -479,78 +563,88 @@ h3 {
   z-index: 99999;
   background: rgba(0, 0, 0, 0.4);
   display: none;
+  height: 100vh;
+  width: 100vw;
 }
+
 .winningRecord .winningRecord_in {
   width: 8.72rem;
-  height: 11.6533333333rem;
+  height: 10.93333rem;
   background: url(../images/winningRecord.png) no-repeat;
   background-size: 100% 100%;
   position: relative;
   left: 50%;
-  top: 50%;
+  top: 45%;
   transform: translate(-50%, -50%);
 }
+
 .winningRecord .winningRecord_in .title {
   width: 100%;
   display: flex;
   justify-content: space-between;
-  margin-bottom: 0.4266666667rem;
+  margin-bottom: 0.42667rem;
 }
+
 .winningRecord .winningRecord_in .title div {
   width: 25%;
   color: #FFFFFF;
-  font-size: 0.3733333333rem;
-  margin-top: 2.1866666667rem;
+  font-size: 0.37333rem;
+  margin-top: 2.18667rem;
   text-align: center;
 }
+
 .winningRecord .winningRecord_in ul {
   width: 100%;
   box-sizing: border-box;
   padding: 0 0.04rem;
-  height: 8rem;
+  height: 7.7rem;
   margin: 0 auto;
   overflow-y: scroll;
 }
+
 .winningRecord .winningRecord_in ul::-webkit-scrollbar {
   width: 0;
   display: none;
 }
+
 .winningRecord .winningRecord_in ul li {
   background: none;
   width: 100%;
-  height: 1.0666666667rem;
-  line-height: 1.0666666667rem;
+  height: 1.33333rem;
   color: #FFEE9D;
-  font-size: 0.3466666667rem;
+  font-size: 0.34667rem;
   display: flex;
   justify-content: space-between;
   overflow: hidden;
+  word-wrap: break-word;
+  /* 使用自动换行功能 */
+  margin-bottom: 0.13333rem;
 }
+
 .winningRecord .winningRecord_in ul li div {
   text-align: center;
   width: 25%;
 }
-.winningRecord .winningRecord_in ul li .box {
-  line-height: 1.0666666667rem;
-}
+
 .winningRecord .winningRecord_in ul li .box_acitve {
   line-height: 0.45rem;
-  margin-top: 0.1rem;
 }
+
 .winningRecord .winningRecord_in ul li .time {
   line-height: 0.4rem;
-  margin-top: 0.2rem;
 }
+
 .winningRecord .winningRecord_in ul .active {
   background: rgba(135, 133, 243, 0.6);
 }
+
 .winningRecord .winningRecord_in .close {
   position: absolute;
-  width: 0.9066666667rem;
-  height: 0.9066666667rem;
+  width: 0.90667rem;
+  height: 0.90667rem;
   left: 50%;
   transform: translateX(-50%);
-  bottom: -1.3333333333rem;
+  bottom: -1.33333rem;
 }
 
 .shade-mask-fragmentNum {
@@ -563,6 +657,7 @@ h3 {
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.6);
 }
+
 .shade-mask-fragmentNum .shade-content-fragmentNum {
   position: absolute;
   top: 50%;
@@ -577,45 +672,49 @@ h3 {
   flex-direction: column;
   align-items: center;
 }
+
 .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-title {
   font-size: 0.48rem;
   font-weight: bold;
   color: #333333;
-  margin-top: 0.5066666667rem;
+  margin-top: 0.50667rem;
 }
+
 .shade-mask-fragmentNum .shade-content-fragmentNum img {
   width: 1.6rem;
   width: 1.6rem;
   margin-top: 1.44rem;
 }
+
 .shade-mask-fragmentNum .shade-content-fragmentNum p {
   font-size: 0.4rem;
   font-weight: 600;
   color: #333333;
-  margin-top: 0.6666666667rem;
+  margin-top: 0.66667rem;
 }
+
 .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap {
   display: flex;
   justify-content: space-between;
-  width: 6.8266666667rem;
-  height: 1.0133333333rem;
+  width: 6.82667rem;
+  height: 1.01333rem;
   margin-top: 1.2rem;
 }
+
 .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .cancel-btn,
 .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .confirm-btn {
   width: 3.2rem;
-  height: 1.0133333333rem;
-  line-height: 1.0133333333rem;
+  height: 1.01333rem;
+  line-height: 1.01333rem;
   text-align: center;
-  border-radius: 0.5066666667rem;
-  font-size: 0.3733333333rem;
+  border-radius: 0.50667rem;
+  font-size: 0.37333rem;
   font-weight: 600;
   background-color: #EAE5FC;
   color: #7154EE;
 }
+
 .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .confirm-btn {
   background-color: #735FFE;
   color: #fff;
 }
-
-/*# sourceMappingURL=index.css.map */

view/peko/modules/luckyTarot/css/index.scss

@@ -1,12 +1,12 @@
-@function px2rem($px, $rem:75) {
-    @return $px / $rem+rem;
+@function px2rem($px) {
+    @return $px / 75+rem;
 }
 
 html {}
 
 body {
     width: 100%;
-    height: px2rem(1624, );
+    height: px2rem(1624);
     background: url(../images/bg.png) no-repeat;
     background-size: 100% 100%;
     margin: 0 auto;
@@ -21,11 +21,11 @@ body {
 
 .back {
     position: fixed;
-    top: px2rem(70, );
-    left: px2rem(34, );
+    top: px2rem(70);
+    left: px2rem(34);
     z-index: 9999;
-    width: px2rem(62, );
-    height: px2rem(62, );
+    width: px2rem(62);
+    height: px2rem(62);
 
     img {
         width: 100%;
@@ -34,33 +34,33 @@ body {
 
     p {
         color: #fff;
-        font-size: px2rem(32, );
+        font-size: px2rem(32);
         position: absolute;
         width: 9rem;
         left: 0;
         top: 0;
         height: 100%;
         text-align: center;
-        line-height: px2rem(62, );
+        line-height: px2rem(62);
     }
 }
 
 .header {
-    width: px2rem(684, );
-    height: px2rem(228, );
-    margin: 0 auto px2rem(0, );
+    width: px2rem(684);
+    height: px2rem(228);
+    margin: 0 auto px2rem(0);
     display: block;
     position: relative;
     z-index: 3;
 }
 
 .roulette {
-    width: px2rem(750, );
-    height: px2rem(850, );
+    width: px2rem(750);
+    height: px2rem(850);
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
-    top: px2rem(0, );
+    top: px2rem(0);
 
     .roulette_in {
         width: 100%;
@@ -74,57 +74,58 @@ body {
 }
 
 .gold_10 {
-    width: px2rem(482, );
-    height: px2rem(52, );
-    margin: px2rem(0, ) auto px2rem(20, );
+    width: px2rem(482);
+    height: px2rem(52);
+    margin: px2rem(0) auto px2rem(20);
     display: block;
     position: relative;
     z-index: 3;
 }
 
 .rule {
-    width: px2rem(51, );
-    height: px2rem(140, );
+    width: px2rem(51);
+    height: px2rem(140);
     background: url(../images/icon.png) no-repeat;
     background-size: 100% 100%;
     position: absolute;
-    top: px2rem(211, );
+    top: px2rem(211);
     right: 0;
     color: #FFE7A9;
-    font-size: px2rem(22, );
+    font-size: px2rem(22);
     text-align: center;
-    padding: px2rem(25, ) px2rem(10, ) px2rem(23, ) px2rem(20, );
+    padding: px2rem(25) px2rem(10) px2rem(23) px2rem(20);
     box-sizing: border-box;
     z-index: 3;
 }
 
 .record {
-    width: px2rem(51, );
-    height: px2rem(140, );
+    width: px2rem(51);
+    height: px2rem(140);
     background: url(../images/icon.png) no-repeat;
     background-size: 100% 100%;
     position: absolute;
-    top: px2rem(364, );
+    top: px2rem(364);
     right: 0;
     color: #FFE7A9;
-    font-size: px2rem(22, );
+    font-size: px2rem(22);
     text-align: center;
-    padding: px2rem(25, ) px2rem(10, ) px2rem(23, ) px2rem(20, );
+    padding: px2rem(25) px2rem(10) px2rem(23) px2rem(20);
     box-sizing: border-box;
     z-index: 9;
 }
 
 .tarotBox {
-    width: px2rem(737, );
-    height: px2rem(1060, );
+    width: px2rem(737);
+    height: px2rem(1060);
     background: url(../images/middleBg.png) no-repeat;
     background-size: 100% 100%;
     margin: 0 auto 0;
     position: relative;
+    overflow: hidden;
 
     .tabBox {
-        width: px2rem(717, );
-        height: px2rem(98, );
+        width: px2rem(717);
+        height: px2rem(98);
         display: flex;
         justify-content: space-between;
         background: url(../images/tabBox.png) no-repeat;
@@ -132,18 +133,18 @@ body {
         margin: 0 auto;
 
         div {
-            width: px2rem(253, );
+            width: px2rem(253);
             height: 100%;
             color: #FEF0C0;
-            font-size: px2rem(28, );
+            font-size: px2rem(28);
             text-align: center;
             box-sizing: border-box;
-            padding-top: px2rem(26, );
+            padding-top: px2rem(26);
 
             b {
                 color: #FEF0C0;
-                font-size: px2rem(18, );
-                margin-top: px2rem(3, );
+                font-size: px2rem(18);
+                margin-top: px2rem(3);
                 display: block;
             }
         }
@@ -181,60 +182,74 @@ body {
 
     .gradeText {
         position: absolute;
-        left: px2rem(74, );
-        top: px2rem(110, );
+        left: px2rem(74);
+        top: px2rem(110);
         color: #FFEAA9;
-        font-size: px2rem(24, );
+        font-size: px2rem(24);
     }
 
     .diamond {
-        min-width: px2rem(148, );
-        height: px2rem(44, );
-        border-radius: px2rem(44, );
-        line-height: px2rem(44, );
+        min-width: px2rem(148);
+        height: px2rem(44);
+        border-radius: px2rem(44);
+        line-height: px2rem(44);
         position: absolute;
-        right: px2rem(72, );
-        top: px2rem(96, );
+        right: px2rem(72);
+        top: px2rem(96);
         background: #343662;
         color: #FFFFFF;
-        border: px2rem(1, ) solid #FFF3B1;
+        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, );
+            width: px2rem(29);
+            height: px2rem(21);
+            margin-top: px2rem(12);
+            margin-left: px2rem(13);
         }
 
         b {
-            font-size: px2rem(20, );
+            font-size: px2rem(20);
             display: inline-block;
-            margin: 0 px2rem(7, );
+            margin: 0 px2rem(7);
         }
 
         .add {
-            width: px2rem(18, );
-            height: px2rem(18, );
+            width: px2rem(18);
+            height: px2rem(18);
             display: inline-block;
-            margin-top: px2rem(13, );
-            margin-right: px2rem(14, );
+            margin-top: px2rem(13);
+            margin-right: px2rem(14);
         }
     }
 
     .cardBox {
-        width: px2rem(148, );
-        height: px2rem(241, );
+        width: px2rem(148);
+        height: px2rem(241);
+        // line-height: px2rem(241);
         position: absolute;
         z-index: 3;
+
         // transition: all 1s;
+        span {
+            text-align: center;
+            font-size: px2rem(26);
+            font-weight: 600;
+            position: absolute;
+            // left: px2rem(13);
+            // top: px2rem(10);
+            left: 0.3rem;
+            top: 0.3rem;
+        }
     }
 
     .card1 {
         background: url(../images/card.png) no-repeat;
         background-size: 100% 100%;
+        color: #64CCF3;
+        text-shadow:#000 px2rem(1) px2rem(1) px2rem(1);
     }
 
 
@@ -242,6 +257,8 @@ body {
         background: url(../images/card2.png) no-repeat;
         background-size: 100% 100%;
         display: none;
+        color: #DC8FF0;
+        text-shadow:#000 px2rem(1) px2rem(1) px2rem(1);
     }
 
 
@@ -249,6 +266,8 @@ body {
         background: url(../images/card3.png) no-repeat;
         background-size: 100% 100%;
         display: none;
+        color: #FFEB3B;
+        text-shadow:#000 px2rem(1) px2rem(1) px2rem(1);
     }
 
     .card1_active {
@@ -287,72 +306,72 @@ body {
     }
 
     .cardBox0 {
-        left: px2rem(71, );
-        top: px2rem(157, );
+        left: px2rem(71);
+        top: px2rem(157);
     }
 
     .cardBox1 {
-        left: px2rem(224, );
-        top: px2rem(157, );
+        left: px2rem(224);
+        top: px2rem(157);
     }
 
     .cardBox2 {
-        left: px2rem(378, );
-        top: px2rem(157, );
+        left: px2rem(378);
+        top: px2rem(157);
     }
 
     .cardBox3 {
-        left: px2rem(531, );
-        top: px2rem(157, );
+        left: px2rem(531);
+        top: px2rem(157);
     }
 
     .cardBox4 {
-        left: px2rem(531, );
-        top: px2rem(414, );
+        left: px2rem(531);
+        top: px2rem(414);
     }
 
     .cardBox5 {
-        left: px2rem(531, );
-        top: px2rem(664, );
+        left: px2rem(531);
+        top: px2rem(664);
     }
 
     .cardBox6 {
-        left: px2rem(378, );
-        top: px2rem(664, );
+        left: px2rem(378);
+        top: px2rem(664);
     }
 
     .cardBox7 {
-        left: px2rem(224, );
-        top: px2rem(664, );
+        left: px2rem(224);
+        top: px2rem(664);
     }
 
     .cardBox8 {
-        left: px2rem(71, );
-        top: px2rem(664, );
+        left: px2rem(71);
+        top: px2rem(664);
     }
 
     .cardBox9 {
-        left: px2rem(71, );
-        top: px2rem(414, );
+        left: px2rem(71);
+        top: px2rem(414);
     }
 
     .cardBoxBut {
-        width: px2rem(188, );
-        height: px2rem(74, );
+        width: px2rem(188);
+        height: px2rem(74);
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(560, );
+        top: px2rem(560);
         z-index: 3;
     }
 
     .butAgain {
-        width: px2rem(188, );
-        height: px2rem(74, );
+        width: px2rem(188);
+        height: px2rem(74);
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(560, );
+        top: px2rem(560);
         display: none;
         z-index: 3;
     }
@@ -374,8 +393,8 @@ body {
                 width: 100%;
                 text-align: center;
                 color: #fff;
-                font-size: px2rem(24, );
-                margin-bottom: px2rem(11, );
+                font-size: px2rem(24);
+                margin-bottom: px2rem(11);
 
                 b {
                     color: #FFEAA9;
@@ -390,34 +409,34 @@ body {
     }
 
     .cardBoxText_gift {
-        width: px2rem(320, );
-        height: px2rem(226, );
+        width: px2rem(320);
+        height: px2rem(226);
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(432, );
+        top: px2rem(432);
         color: #FEF0C0;
-        font-size: px2rem(30, );
+        font-size: px2rem(30);
         text-align: center;
     }
 
     .cardBoxText_gx {
-        width: px2rem(320, );
-        height: px2rem(226, );
+        width: px2rem(320);
+        height: px2rem(226);
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(414, );
+        top: px2rem(414);
         box-sizing: border-box;
-        padding-top: px2rem(66, );
+        padding-top: px2rem(66);
         display: none;
 
         p {
             width: 100%;
             text-align: center;
-            margin-bottom: px2rem(16, );
+            margin-bottom: px2rem(16);
             color: #FFE26D;
-            font-size: px2rem(28, );
+            font-size: px2rem(28);
 
             i {
                 font-style: normal;
@@ -430,22 +449,22 @@ body {
     }
 
     .cardBoxText_no {
-        width: px2rem(320, );
-        height: px2rem(226, );
+        width: px2rem(320);
+        height: px2rem(226);
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(414, );
+        top: px2rem(414);
         box-sizing: border-box;
-        padding-top: px2rem(66, );
+        padding-top: px2rem(66);
         display: none;
 
         p {
             width: 100%;
             text-align: center;
-            margin-bottom: px2rem(16, );
+            margin-bottom: px2rem(16);
             color: #fff;
-            font-size: px2rem(28, );
+            font-size: px2rem(28);
 
             i {
                 font-style: normal;
@@ -458,22 +477,22 @@ body {
     }
 
     .cardBoxText {
-        width: px2rem(320, );
-        height: px2rem(226, );
+        width: px2rem(320);
+        height: px2rem(226);
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(414, );
+        top: px2rem(414);
         box-sizing: border-box;
-        padding-top: px2rem(66, );
+        padding-top: px2rem(66);
         z-index: 3;
 
         p {
             width: 100%;
             text-align: center;
-            margin-bottom: px2rem(16, );
+            margin-bottom: px2rem(16);
             color: #fff;
-            font-size: px2rem(28, );
+            font-size: px2rem(28);
 
             i {
                 font-style: normal;
@@ -486,12 +505,12 @@ body {
     }
 
     .star {
-        width: px2rem(336, );
-        height: px2rem(290, );
+        width: px2rem(336);
+        height: px2rem(290);
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(414, );
+        top: px2rem(414);
 
         .star_in {
             width: 100%;
@@ -507,45 +526,48 @@ body {
 
 h3 {
     width: 100%;
-    margin-bottom: px2rem(12, );
+    margin-bottom: px2rem(12);
     color: #D7D9F7;
-    font-size: px2rem(18, );
+    font-size: px2rem(18);
     text-align: center;
 }
 
 .rule_pub {
     position: fixed;
+    right: 0;
+    bottom: 0;
     left: 0;
     top: 0;
-    bottom: 0;
-    right: 0;
     z-index: 99999;
     background: rgba(0, 0, 0, .4);
     display: none;
+    height: 100vh;
+    width: 100vw;
 
     .rule_pub_in {
-        width: px2rem(654, );
-        height: px2rem(874, );
+        width: px2rem(600);
+        height: px2rem(820);
         background: url(../images/rule.png) no-repeat;
         background-size: 100% 100%;
         position: relative;
         left: 50%;
-        top: 50%;
+        top: 45%;
         transform: translate(-50%, -50%);
 
         .close {
             position: absolute;
-            width: px2rem(68, );
-            height: px2rem(68, );
+            width: px2rem(68);
+            height: px2rem(68);
             left: 50%;
             transform: translateX(-50%);
-            bottom: px2rem(-100, );
+            bottom: px2rem(-100);
         }
     }
 }
 
 .winningRecord {
     position: fixed;
+    height: px2rem(1624);
     left: 0;
     top: 0;
     bottom: 0;
@@ -553,28 +575,30 @@ h3 {
     z-index: 99999;
     background: rgba(0, 0, 0, .4);
     display: none;
+    height: 100vh;
+    width: 100vw;
 
     .winningRecord_in {
-        width: px2rem(654, );
-        height: px2rem(874, );
+        width: px2rem(654);
+        height: px2rem(820);
         background: url(../images/winningRecord.png) no-repeat;
         background-size: 100% 100%;
         position: relative;
         left: 50%;
-        top: 50%;
+        top: 45%;
         transform: translate(-50%, -50%);
 
         .title {
             width: 100%;
             display: flex;
             justify-content: space-between;
-            margin-bottom: px2rem(32, );
+            margin-bottom: px2rem(32);
 
             div {
                 width: 25%;
                 color: #FFFFFF;
-                font-size: px2rem(28, );
-                margin-top: px2rem(164, );
+                font-size: px2rem(28);
+                margin-top: px2rem(164);
                 text-align: center;
             }
         }
@@ -582,8 +606,8 @@ h3 {
         ul {
             width: 100%;
             box-sizing: border-box;
-            padding: 0 px2rem(3, );
-            height: 8rem;
+            padding: 0 px2rem(3);
+            height: 7.7rem;
             margin: 0 auto;
             overflow-y: scroll;
 
@@ -595,31 +619,32 @@ h3 {
             li {
                 background: none;
                 width: 100%;
-                height: px2rem(80, );
-                line-height: px2rem(80, );
+                height: px2rem(100);
+                // line-height: px2rem(100);
                 color: #FFEE9D;
-                font-size: px2rem(26, );
+                font-size: px2rem(26);
                 display: flex;
                 justify-content: space-between;
                 overflow: hidden;
-
+                word-wrap: break-word; /* 使用自动换行功能 */
+                margin-bottom: px2rem(10);
                 div {
                     text-align: center;
                     width: 25%;
                 }
 
                 .box {
-                    line-height: px2rem(80, );
+                    // line-height: px2rem(100);
                 }
 
                 .box_acitve {
                     line-height: 0.45rem;
-                    margin-top: 0.1rem;
+                    // margin-top: 0.1rem;
                 }
 
                 .time {
                     line-height: 0.4rem;
-                    margin-top: 0.2rem;
+                    // margin-top: 0.2rem;
                 }
             }
 
@@ -630,11 +655,11 @@ h3 {
 
         .close {
             position: absolute;
-            width: px2rem(68, );
-            height: px2rem(68, );
+            width: px2rem(68);
+            height: px2rem(68);
             left: 50%;
             transform: translateX(-50%);
-            bottom: px2rem(-100, );
+            bottom: px2rem(-100);
         }
     }
 }

view/peko/modules/luckyTarot/index.html

@@ -9,7 +9,7 @@
     <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">
+    <link rel="stylesheet" href="./css/index.css?v=1.0">
 </head>
 
 <body>
@@ -47,38 +47,38 @@
             <img src="./images/add.png" alt="" class="add">
         </div>
         <!-- 默認卡片 -->
-        <div class="cardBox cardBox0 card1"></div>
-        <div class="cardBox cardBox1 card1"></div>
-        <div class="cardBox cardBox2 card1"></div>
-        <div class="cardBox cardBox3 card1"></div>
-        <div class="cardBox cardBox4 card1"></div>
-        <div class="cardBox cardBox5 card1"></div>
-        <div class="cardBox cardBox6 card1"></div>
-        <div class="cardBox cardBox7 card1"></div>
-        <div class="cardBox cardBox8 card1"></div>
-        <div class="cardBox cardBox9 card1"></div>
+        <div class="cardBox cardBox0 card1"><span>0</span></div>
+        <div class="cardBox cardBox1 card1"><span>1</span></div>
+        <div class="cardBox cardBox2 card1"><span>2</span></div>
+        <div class="cardBox cardBox3 card1"><span>3</span></div>
+        <div class="cardBox cardBox4 card1"><span>4</span></div>
+        <div class="cardBox cardBox5 card1"><span>5</span></div>
+        <div class="cardBox cardBox6 card1"><span>6</span></div>
+        <div class="cardBox cardBox7 card1"><span>7</span></div>
+        <div class="cardBox cardBox8 card1"><span>8</span></div>
+        <div class="cardBox cardBox9 card1"><span>9</span></div>
         <!-- 中級卡片 -->
-        <div class="cardBox cardBox0 card2"></div>
-        <div class="cardBox cardBox1 card2"></div>
-        <div class="cardBox cardBox2 card2"></div>
-        <div class="cardBox cardBox3 card2"></div>
-        <div class="cardBox cardBox4 card2"></div>
-        <div class="cardBox cardBox5 card2"></div>
-        <div class="cardBox cardBox6 card2"></div>
-        <div class="cardBox cardBox7 card2"></div>
-        <div class="cardBox cardBox8 card2"></div>
-        <div class="cardBox cardBox9 card2"></div>
+        <div class="cardBox cardBox0 card2"><span>0</span></div>
+        <div class="cardBox cardBox1 card2"><span>1</span></div>
+        <div class="cardBox cardBox2 card2"><span>2</span></div>
+        <div class="cardBox cardBox3 card2"><span>3</span></div>
+        <div class="cardBox cardBox4 card2"><span>4</span></div>
+        <div class="cardBox cardBox5 card2"><span>5</span></div>
+        <div class="cardBox cardBox6 card2"><span>6</span></div>
+        <div class="cardBox cardBox7 card2"><span>7</span></div>
+        <div class="cardBox cardBox8 card2"><span>8</span></div>
+        <div class="cardBox cardBox9 card2"><span>9</span></div>
         <!-- 高級卡片 -->
-        <div class="cardBox cardBox0 card3"></div>
-        <div class="cardBox cardBox1 card3"></div>
-        <div class="cardBox cardBox2 card3"></div>
-        <div class="cardBox cardBox3 card3"></div>
-        <div class="cardBox cardBox4 card3"></div>
-        <div class="cardBox cardBox5 card3"></div>
-        <div class="cardBox cardBox6 card3"></div>
-        <div class="cardBox cardBox7 card3"></div>
-        <div class="cardBox cardBox8 card3"></div>
-        <div class="cardBox cardBox9 card3"></div>
+        <div class="cardBox cardBox0 card3"><span>0</span></div>
+        <div class="cardBox cardBox1 card3"><span>1</span></div>
+        <div class="cardBox cardBox2 card3"><span>2</span></div>
+        <div class="cardBox cardBox3 card3"><span>3</span></div>
+        <div class="cardBox cardBox4 card3"><span>4</span></div>
+        <div class="cardBox cardBox5 card3"><span>5</span></div>
+        <div class="cardBox cardBox6 card3"><span>6</span></div>
+        <div class="cardBox cardBox7 card3"><span>7</span></div>
+        <div class="cardBox cardBox8 card3"><span>8</span></div>
+        <div class="cardBox cardBox9 card3"><span>9</span></div>
         <!-- 女神眷顧妳 -->
         <div class="cardBoxText_gift">願幸運之神眷顧妳</div>
         <!-- 中獎文按提示 -->
@@ -169,4 +169,4 @@
 <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>
+<script src="./js/index.js?v=1.1"></script>

view/peko/modules/luckyTarot/js/index.js

@@ -32,6 +32,7 @@ var gearPositionActive = 0;//當前選澤的檔位
 var prodId = [];//檔位類型
 var prodIdActive;
 var lock = true;//鎖
+var lock2 = true;
 var page = 1;//頁碼
 var scrollLock = true;
 var arrLast = []//記錄上次開獎的數組
@@ -58,7 +59,6 @@ $(function () {
             })
             getAdvertising();
             productList();
-            getUserInfo();
             svgaFun();
             svgaFun2();
         }, 100)
@@ -161,6 +161,7 @@ function productList () {
                     prodId.push(res.prodId);
                     $(`.tarotBox .tabBox .tabBox${i + 1} b`).text(`${res.prodNeedPrice}鉆/張`)
                 })
+                getUserInfo();
             } else {
                 toastMsg(res.message)
             }
@@ -174,7 +175,7 @@ function productList () {
 }
 // 獲取用戶信息
 const getUserInfo = () => {
-    showLoading()
+    // showLoading()
     networkRequest({
         type: 'POST',
         url: urlPrefix + '/seekElfin/user/info',
@@ -211,11 +212,12 @@ const recordPage = () => {
             if (res.code == 200) {
                 var str = ''
                 res.data.records.forEach((res, i) => {
+                            // <div>${JSON.parse(res.selectdNo).length}張</div>
                     str += `
                         <li calss="${i % 2 == 0 ? 'active' : ''}">
                             <div>${res.prodName}</div>
-                            <div>${JSON.parse(res.selectdNo).length}張</div>
-                            <div class="box ${res.win ? 'box_acitve' : ''}">${res.win ? `中獎<br>${res.receiveGoldNum}鉆石` : '未中獎'}</div>
+                            <div>${res.selectdNo}</div>
+                            <div class="box ${res.win ? 'box_acitve' : 'box_acitve'}">${res.win ? `幸運號碼: ${res.drawNum}<br>${res.receiveGoldNum}鉆石` :`未猜中<br>幸運號碼: ${res.drawNum}`}</div>
                             <div class="time">${dateFormat(res.createTime, 'yyyy.MM.dd')}<br>${dateFormat(res.createTime, 'hh:mm:ss')}</div>
                         </li>
                     `
@@ -343,7 +345,7 @@ function kineticEffect (arr, bool, data) {
             $('.tarotBox .cardBoxText').hide();
             $('.tarotBox .cardBoxText_gift').hide();
             $('.cardBoxText_gx').html(`
-                <p>翻到鉆石卡!</p>
+                <p>翻到幸運數字${data.data.drawNum}！</p>
                 <p>獲得 <b>${data.data.receiveGoldNum}</b> 鉆石</p>
             `)
             $('.cardBoxText_gx').show();
@@ -356,34 +358,35 @@ function kineticEffect (arr, bool, data) {
         $('.cardBoxBut').hide();
         $('.tarotBox .butAgain').attr('src', prodIdActive == 1 ? './images/butAgain1.png' : prodIdActive == 2 ? './images/butAgain2.png' : './images/butAgain3.png')
         $('.butAgain').show();
-        lock = true;
     }, 1000)
 }
 // 檔位tab切換按鈕
 $('.tarotBox .tabBox div').click(function () {
-    if(lock){
-    var i = $(this).index() + 1;
-    // 切換tab樣式
-    $('.tarotBox .tabBox div').removeClass('active1').removeClass('active2').removeClass('active3');
-    $(this).addClass(`active${i}`);
-    // 切換卡牌樣式
-    $('.tarotBox .cardBox').hide();
-    $(`.tarotBox .card${i}`).show();
-    // 切換按鈕樣式
-    $('.tarotBox .cardBoxBut').attr('src', `./images/but${i}.png`)
-    // if (i == 1) {
-    gearPositionActive = gearPosition[i - 1];
-    prodIdActive = prodId[i - 1];
-    $('.tarotBox .gradeText b').text(gearPositionActive * 10);
-    // } else if (i == 2) {
-    //     gearPosition = 1000;
-    //     $('.tarotBox .gradeText b').text(gearPosition * 10);
-    // } else {
-    //     gearPosition = 10000;
-    //     $('.tarotBox .gradeText b').text(gearPosition * 10);
-    // }
-    // 清空默認樣式
-    initialStytle();}
+    if (lock) {
+        var i = $(this).index() + 1;
+        // 切換tab樣式
+        $('.tarotBox .tabBox div').removeClass('active1').removeClass('active2').removeClass('active3');
+        $(this).addClass(`active${i}`);
+        // 切換卡牌樣式
+        $('.tarotBox .cardBox').hide();
+        $(`.tarotBox .card${i}`).show();
+        // 切換按鈕樣式
+        $('.tarotBox .cardBoxBut').attr('src', `./images/but${i}.png`)
+        // if (i == 1) {
+        gearPositionActive = gearPosition[i - 1];
+        prodIdActive = prodId[i - 1];
+        $('.tarotBox .gradeText b').text(gearPositionActive * 10);
+        console.log(gearPositionActive);
+        // } else if (i == 2) {
+        //     gearPosition = 1000;
+        //     $('.tarotBox .gradeText b').text(gearPosition * 10);
+        // } else {
+        //     gearPosition = 10000;
+        //     $('.tarotBox .gradeText b').text(gearPosition * 10);
+        // }
+        // 清空默認樣式
+        initialStytle();
+    }
 })
 // 選擇初級卡片按鈕
 $('.tarotBox .card1').click(function () {
@@ -435,6 +438,7 @@ $('.tarotBox .cardBoxBut').click(function () {
 // 再翻一次按鈕
 $('.butAgain').click(function () {
     initialStytle(true);
+    lock = true;
 })
 // 跳轉充值頁面
 $('.tarotBox .diamond').click(() => {
@@ -463,6 +467,7 @@ $('.tarotBox .diamond').click(() => {
 })
 // 打開規則
 $('.rule').click(function () {
+    $(window).scrollTop(0)
     bodyScroolFun(true);
     $('.rule_pub ').show();
 })
@@ -473,6 +478,7 @@ $('.rule_pub .rule_pub_in .close').click(function () {
 })
 // 打開記錄
 $('.record').click(function () {
+    $(window).scrollTop(0)
     $('.winningRecord .winningRecord_in ul li').remove();
     page = 1;
     recordPage();

view/peko/modules/pay/index.html

@@ -7,7 +7,7 @@
     <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">
+    <link rel="stylesheet" href="./css/index.css?v=1.0">
 </head>
 
 <body>
@@ -140,6 +140,26 @@
             <div class="but">確認</div>
         </div>
     </div>
+    <!-- 首次选择弹窗 -->
+    <div class="selectAddress">
+        <div class="selectAddress_in">
+            <div class="title">請確認儲值地區</div>
+            <div class="selectAddressList">
+                <img src="./images/more_icon.png" alt="">
+            </div>
+            <div class="list_in">
+                <p>台湾</p>
+                <p>台湾</p>
+                <p>台湾</p>
+                <p>台湾</p>
+            </div>
+            <div class="but">確認</div>
+        </div>
+    </div>
+    <!-- 引导图 -->
+    <div class="guidd">
+        <img src="./images/guide.png" alt="">
+    </div>
 </body>
 
 </html>
@@ -148,4 +168,4 @@
 <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>
+<script src="./js/index.js?v=1.0"></script>

view/peko/modules/pay/js/index.js

@@ -57,6 +57,7 @@ $(function () {
 // 请求地区列表
 function getArea () {
     $('.area .area_in p').remove();
+    $('.selectAddress .selectAddress_in .list_in p').remove();
     showLoading();
     networkRequest({
         type: 'GET',
@@ -72,7 +73,9 @@ function getArea () {
                     isRecommendArr[i] = res.isRecommend;
                 });
                 $('.area .area_in').append(str);
+                $('.selectAddress .selectAddress_in .list_in').append(str);
                 $('.header .box .right i').text(res.data[0].areaName);
+                $('.selectAddress .selectAddress_in .selectAddressList').html(`${res.data[0].areaName}<img src="./images/more_icon.png" alt="">`);
                 if (countryCode == '') {
                     countryCode = res.data[0].areaCode;
                 }
@@ -82,6 +85,14 @@ function getArea () {
                     $('.tabs i').hide();
                 }
                 getChargePageInfoForH5();
+                if (!browser.app) {
+                    if (window.localStorage.getItem('first')) {
+                        $('.selectAddress').hide();
+                    } else {
+                        $('.selectAddress').show();
+                        bodyScroolFun(true);
+                    }
+                }
             } else {
                 hideLoading(layerIndex);
                 toastMsg(res.message);
@@ -93,6 +104,39 @@ function getArea () {
         }
     });
 }
+// 调起选择下拉
+$('.selectAddress .selectAddress_in .selectAddressList').click(function () {
+    $('.selectAddress .selectAddress_in .list_in').css({ height: '6rem', 'padding': '0.2rem 0.53333rem' });
+    return false
+})
+// 首次切换地区
+$('.selectAddress .selectAddress_in .list_in').on('click', 'p', function () {
+    countryCode = $(this).attr('areacode');
+    var texts = $(this).text();
+    $('.header .box .right i').text(texts);
+    $('.selectAddress .selectAddress_in .selectAddressList').html(`${texts}<img src="./images/more_icon.png" alt="">`);
+    $('.selectAddress .selectAddress_in .list_in').css({ height: '0', 'padding': '0' });
+    return false;
+})
+// 关闭切换地区
+$('.selectAddress').click(function () {
+    window.localStorage.setItem('first', 1);
+    $('.selectAddress').hide();
+    $('.selectAddress .selectAddress_in .list_in').css({ height: '0', 'padding': '0' });
+    $('.guidd').show();
+})
+// 首次确认地区
+$('.selectAddress .selectAddress_in .but').click(function () {
+    window.localStorage.setItem('first', 1);
+    getChargePageInfoForH5();
+    $('.selectAddress').hide();
+    $('.guidd').show();
+})
+// 关闭引导图
+$('.guidd').click(function () {
+    $('.guidd').hide();
+    bodyScroolFun(false);
+})
 // 渲染档位列表
 function getChargePageInfoForH5 () {
     showLoading();
@@ -335,7 +379,6 @@ $('.userNull .userNull_in .but').click(function () {
     bodyScroolFun(false);
     $('.userNull').hide();
 })
-
 // 代充列表接口
 function rechargeUserList (regionCode) {
     showLoading();

view/peko/modules/rule-yinyou/community-norms.html

@@ -161,11 +161,11 @@
                 $('.subject').html('广州时间在线网络科技有限公司')
             }
             if (channel.indexOf('kuaishou') != -1) {
-                $('.subject').html('广州芒果互联网络科技有限公司')
+                $('.subject').html('香港栗子科技有限公司')
             }
         }
     }
-    $('.subject').html('广州芒果互联网络科技有限公司')
+    $('.subject').html('香港栗子科技有限公司')
     setTimeout(() => {
         $('body').show()
     }, 0)

view/peko/modules/rule-yinyou/live-protocol.html

@@ -279,11 +279,11 @@
           $('.subject').html('广州时间在线网络科技有限公司')
         }
         if (channel.indexOf('kuaishou') != -1) {
-          $('.subject').html('广州芒果互联网络科技有限公司')
+          $('.subject').html('香港栗子科技有限公司')
         }
       }
     }
-    $('.subject').html('广州芒果互联网络科技有限公司')
+    $('.subject').html('香港栗子科技有限公司')
     setTimeout(() => {
       $('.protocol-max').show()
     }, 0)

view/peko/modules/rule-yinyou/privacy-wap-ks.html

@@ -59,13 +59,13 @@
     </li>
     <li class="title">“<span class='name'>piko</span>”隐私政策指引</li>
     <li>
-      <span class='name'>piko</span>是一种由<span class="subject">广州芒果互联网络科技有限公司</span>（包括<span class="jc">芒果互联</span>关联公司，以下简称“我们”）提供服务的产品。<span class="font-bold">为说明<span class='name'>piko</span>会如何收集、使用和存储你的个人信息及你享有何种权利，我们将通过本指引向你阐述相关事宜，其中要点如下：</span>
+      <span class='name'>piko</span>是一种由<span class="subject">香港栗子科技有限公司</span>（包括<span class="jc">香港栗子</span>关联公司，以下简称“我们”）提供服务的产品。<span class="font-bold">为说明<span class='name'>piko</span>会如何收集、使用和存储你的个人信息及你享有何种权利，我们将通过本指引向你阐述相关事宜，其中要点如下：</span>
     </li>
     <li>
       1.我们将逐一说明我们收集的你的个人信息类型及其对应的用途，以便你了解我们针对某一特定功能所收集的具体个人信息的类别、使用理由及收集方式。<br>
       2.当你使用某些功能时，我们会在获得你的同意后，收集你的敏感个人信息。除非按照相关法律法规要求必须收集，拒绝提供这些信息仅会使你无法使用相关特定功能，但不影响你正常使用<span class='name'>piko</span>的其他功能。<br>
-      3.我们不会主动共享或转让你的个人信息至<span class="subject">广州芒果互联网络科技有限公司</span>外的第三方。如存在其他共享或转让你的个人信息，或你需要我们将你的个人信息共享或转让至<span class="subject">广州芒果互联网络科技有限公司</span>外的第三方情形时，我们会直接征得或确认第三方征得你对上述行为的明示同意，但法律法规另有规定或因保护用户权益或保护平台生态安全需要除外。此外，我们会对外提供信息的行为进行风险评估。<br>
-      4.我们不会主动从<span class="subject">广州芒果互联网络科技有限公司</span>外的第三方获取你的个人信息。如为业务发展需要从第三方获取你的个人信息，我们会依法核实来源的合法性，或在获取前向你明示你个人信息的来源、类型及使用范围，如<span class='name'>piko</span>开展业务需进行的个人信息处理活动超出你原本向第三方提供个人信息时的授权同意范围，我们将在处理你的该等个人信息前，征得你的明示同意；此外，我们也将会严格遵守相关法律法规的规定，并要求第三方保障其提供的信息的合法性。<br>
+      3.我们不会主动共享或转让你的个人信息至<span class="subject">香港栗子科技有限公司</span>外的第三方。如存在其他共享或转让你的个人信息，或你需要我们将你的个人信息共享或转让至<span class="subject">香港栗子科技有限公司</span>外的第三方情形时，我们会直接征得或确认第三方征得你对上述行为的明示同意，但法律法规另有规定或因保护用户权益或保护平台生态安全需要除外。此外，我们会对外提供信息的行为进行风险评估。<br>
+      4.我们不会主动从<span class="subject">香港栗子科技有限公司</span>外的第三方获取你的个人信息。如为业务发展需要从第三方获取你的个人信息，我们会依法核实来源的合法性，或在获取前向你明示你个人信息的来源、类型及使用范围，如<span class='name'>piko</span>开展业务需进行的个人信息处理活动超出你原本向第三方提供个人信息时的授权同意范围，我们将在处理你的该等个人信息前，征得你的明示同意；此外，我们也将会严格遵守相关法律法规的规定，并要求第三方保障其提供的信息的合法性。<br>
       5.你可以通过本指引所列途径及方式查阅、更正、复制、删除你的个人信息，也可以撤回同意、注销帐号以及投诉举报等隐私功能。<br>
       6.为了在本指引下收集你的信息，或者向你提供服务、优化我们的服务以及保障你的帐号安全，我们将需要向你索取相关的权限；其中的敏感权限例如<span class="font-bold">位置、摄像头、麦克风、相册</span>等均不会默认开启，只有在你明确同意后我们才会在你同意的范围内调用或使用。对你已经向我们授权的该等权限，<span class="font-bold">你也可以在“我—设置——个人信息与权限—系统权限管理”中查询我们已调用或使用的系统权限类型、使用目的，并进行统一管理。</span><br>
       需要特别说明的是，我们获得具体某一项敏感权限并不代表我们必然会收集你的相关信息；即使我们已经获得敏感权限，也仅在必要范围内，并在你使用相关的服务或功能期间根据本指引来收集你的相关信息。
@@ -332,7 +332,7 @@
       十二、联系我们
     </li>
     <li>
-      公司：<span class="subject">技广州芒果互联网络科有限公司</span><br>
+      公司：<span class="subject">技香港栗子互联网络科有限公司</span><br>
       电话：020-85698266
     </li>
   </ul>

view/peko/modules/rule-yinyou/privacy-wap-mangguo.html

@@ -350,7 +350,7 @@
             $('.subject').html('广州时间在线网络科技有限公司')
           }
           if (channel.indexOf('kuaishou') != -1) {
-            $('.subject').html('广州芒果互联网络科技有限公司')
+            $('.subject').html('香港栗子科技有限公司')
           }
         }
       }

view/peko/modules/rule-yinyou/privacy-wap-mg.html

@@ -55,18 +55,18 @@
   <ul class="max">
     <li style="font-weight: bold;">
       更新时间：2021年12月11日<br>
-      感谢您信任并使用<span class='name'>芒果piko</span>，我们根据最新的法律法规，监管政策要求，更新了《<span class='name'>芒果piko</span>隐私政策》<br>
+      感谢您信任并使用<span class='name'>栗子piko</span>，我们根据最新的法律法规，监管政策要求，更新了《<span class='name'>栗子piko</span>隐私政策》<br>
       请您仔细阅读并充分理解以下条款。
     </li>
-    <li class="title">“<span class='name'>芒果piko</span>”隐私政策指引</li>
+    <li class="title">“<span class='name'>栗子piko</span>”隐私政策指引</li>
     <li>
-      <span class='name'>芒果piko</span>是一种由<span class="subject">广州芒果互联网络科技有限公司</span>（包括<span class="jc">芒果互联</span>关联公司，以下简称“我们”）提供服务的产品。<span class="font-bold">为说明<span class='name'>芒果piko</span>会如何收集、使用和存储你的个人信息及你享有何种权利，我们将通过本指引向你阐述相关事宜，其中要点如下：</span>
+      <span class='name'>栗子piko</span>是一种由<span class="subject">香港栗子科技有限公司</span>（包括<span class="jc">香港栗子</span>关联公司，以下简称“我们”）提供服务的产品。<span class="font-bold">为说明<span class='name'>栗子piko</span>会如何收集、使用和存储你的个人信息及你享有何种权利，我们将通过本指引向你阐述相关事宜，其中要点如下：</span>
     </li>
     <li>
       1.我们将逐一说明我们收集的你的个人信息类型及其对应的用途，以便你了解我们针对某一特定功能所收集的具体个人信息的类别、使用理由及收集方式。<br>
-      2.当你使用某些功能时，我们会在获得你的同意后，收集你的敏感个人信息。除非按照相关法律法规要求必须收集，拒绝提供这些信息仅会使你无法使用相关特定功能，但不影响你正常使用<span class='name'>芒果piko</span>的其他功能。<br>
-      3.我们不会主动共享或转让你的个人信息至广州芒果互联网络科技有限公司外的第三方。如存在其他共享或转让你的个人信息，或你需要我们将你的个人信息共享或转让至广州芒果互联网络科技有限公司外的第三方情形时，我们会直接征得或确认第三方征得你对上述行为的明示同意，但法律法规另有规定或因保护用户权益或保护平台生态安全需要除外。此外，我们会对外提供信息的行为进行风险评估。<br>
-      4.我们不会主动从广州芒果互联网络科技有限公司外的第三方获取你的个人信息。如为业务发展需要从第三方获取你的个人信息，我们会依法核实来源的合法性，或在获取前向你明示你个人信息的来源、类型及使用范围，如<span class='name'>芒果piko</span>开展业务需进行的个人信息处理活动超出你原本向第三方提供个人信息时的授权同意范围，我们将在处理你的该等个人信息前，征得你的明示同意；此外，我们也将会严格遵守相关法律法规的规定，并要求第三方保障其提供的信息的合法性。<br>
+      2.当你使用某些功能时，我们会在获得你的同意后，收集你的敏感个人信息。除非按照相关法律法规要求必须收集，拒绝提供这些信息仅会使你无法使用相关特定功能，但不影响你正常使用<span class='name'>栗子piko</span>的其他功能。<br>
+      3.我们不会主动共享或转让你的个人信息至香港栗子科技有限公司外的第三方。如存在其他共享或转让你的个人信息，或你需要我们将你的个人信息共享或转让至香港栗子科技有限公司外的第三方情形时，我们会直接征得或确认第三方征得你对上述行为的明示同意，但法律法规另有规定或因保护用户权益或保护平台生态安全需要除外。此外，我们会对外提供信息的行为进行风险评估。<br>
+      4.我们不会主动从香港栗子科技有限公司外的第三方获取你的个人信息。如为业务发展需要从第三方获取你的个人信息，我们会依法核实来源的合法性，或在获取前向你明示你个人信息的来源、类型及使用范围，如<span class='name'>栗子piko</span>开展业务需进行的个人信息处理活动超出你原本向第三方提供个人信息时的授权同意范围，我们将在处理你的该等个人信息前，征得你的明示同意；此外，我们也将会严格遵守相关法律法规的规定，并要求第三方保障其提供的信息的合法性。<br>
       5.你可以通过本指引所列途径及方式查阅、更正、复制、删除你的个人信息，也可以撤回同意、注销帐号以及投诉举报等隐私功能。<br>
       6.为了在本指引下收集你的信息，或者向你提供服务、优化我们的服务以及保障你的帐号安全，我们将需要向你索取相关的权限；其中的敏感权限例如<span class="font-bold">位置、摄像头、麦克风、相册</span>等均不会默认开启，只有在你明确同意后我们才会在你同意的范围内调用或使用。对你已经向我们授权的该等权限，<span class="font-bold">你也可以在“我—设置——个人信息与权限—系统权限管理”中查询我们已调用或使用的系统权限类型、使用目的，并进行统一管理。</span><br>
       需要特别说明的是，我们获得具体某一项敏感权限并不代表我们必然会收集你的相关信息；即使我们已经获得敏感权限，也仅在必要范围内，并在你使用相关的服务或功能期间根据本指引来收集你的相关信息。
@@ -75,7 +75,7 @@
       一、适用范围
     </li>
     <li>
-      本隐私保护指引适用于<span class='name'>芒果piko</span>。
+      本隐私保护指引适用于<span class='name'>栗子piko</span>。
     </li><br>
     <li class="font-bold">
       二、定义
@@ -83,13 +83,13 @@
     <li>
       1.个人信息：指以电子或其他方式记录的、能够单独或与其他信息结合识别特定自然人身份或反映特定自然人活动情况的各种信息。<br>
       2.个人敏感信息：指一旦泄露、非法提供或滥用可能危害人身和财产安全，极易导致个人名誉，生理健康受到损害或歧视性替换等的个人信息，包括身份证件号码，个人生物识别信息，银行在帐户，通信内容，健康生理信息等。故在提供任何属于敏感信息的个人信息前，请您清楚考虑这些提供是正确的并且同意您的个人敏感信息可按本指引所述的目的和方式进行处理。<br>
-      3. <span class='name'>芒果piko</span>软件及相关服务：指公司及其关联方通过合法拥有并运营的、标注名称为"<span class='name'>芒果piko</span>"的客户端应用程序，向您提供的产品与服务，包括但不限于音频直播、浏览及互动等功能。<br>
+      3. <span class='name'>栗子piko</span>软件及相关服务：指公司及其关联方通过合法拥有并运营的、标注名称为"<span class='name'>栗子piko</span>"的客户端应用程序，向您提供的产品与服务，包括但不限于音频直播、浏览及互动等功能。<br>
     </li><br>
     <li class="font-bold">
       三、基本原则
     </li>
     <li>
-      我们将遵循合法、合理、必要的原则并根据本指引所述的目的，收集、使用和储存您在使用<span class='name'>芒果piko</span>过程中主动提供或因使用而产生的个人信息。如果我们要将您的个人信息用于本指引未载明的其它用途，或基于特定目的将收集而来的信息用于其他目的，我们将在使用前，再次向您告知并征得您的同意。了解更多有关手机个人信息的目的、范围等信息，请点击<a href="./personal-info.html" class="font-bold SDK" style="color: rgb(91, 155, 213);text-decoration: none">《个人信息收集清单》</a>。
+      我们将遵循合法、合理、必要的原则并根据本指引所述的目的，收集、使用和储存您在使用<span class='name'>栗子piko</span>过程中主动提供或因使用而产生的个人信息。如果我们要将您的个人信息用于本指引未载明的其它用途，或基于特定目的将收集而来的信息用于其他目的，我们将在使用前，再次向您告知并征得您的同意。了解更多有关手机个人信息的目的、范围等信息，请点击<a href="./personal-info.html" class="font-bold SDK" style="color: rgb(91, 155, 213);text-decoration: none">《个人信息收集清单》</a>。
     </li><br>
     <li class="font-bold">
       四、我们如何收集和使用个人信息
@@ -98,28 +98,28 @@
       （一）关于收集的个人信息及对应的用途
     </li>
     <li>
-      1.当你使用<span class='name'>芒果piko</span>服务时，为保障您正常使用我们的服务，维护我们服务的正常运行，改进及优化我们的服务体验以及保障你的帐号安全，我们会收集、使用您的设备型号、MAC地址、IMEI、电信运营商、操作系统、唯一设备标识符（IDFA、OAID）、登录IP地址、软件版本号、接入网络的方式、类型和状态、网络质量数据、操作日志、服务日志信息（如你在软件进行搜索、查看操作的记录、服务故障信息、引荐网址等信息）等日志信息。当你将应用停留在“后台”时我们仍然会收集你的MAC地址，在你收到消息或使用语音房服务会提醒你处于后台状态。
+      1.当你使用<span class='name'>栗子piko</span>服务时，为保障您正常使用我们的服务，维护我们服务的正常运行，改进及优化我们的服务体验以及保障你的帐号安全，我们会收集、使用您的设备型号、MAC地址、IMEI、电信运营商、操作系统、唯一设备标识符（IDFA、OAID）、登录IP地址、软件版本号、接入网络的方式、类型和状态、网络质量数据、操作日志、服务日志信息（如你在软件进行搜索、查看操作的记录、服务故障信息、引荐网址等信息）等日志信息。当你将应用停留在“后台”时我们仍然会收集你的MAC地址，在你收到消息或使用语音房服务会提醒你处于后台状态。
     </li>
     <li>
-      2. 当你注册和登录<span class='name'>芒果piko</span>服务时，我们会收集、使用你的昵称、头像、手机号码，同时，我们将通过发送短信验证码来验证您的身份是否有效，基于手机的自动读取信息功能，会读取您手机的短信以获取注册验证码。收集这些信息是为了帮助你完成<span class='name'>芒果piko</span>注册和使用<span class='name'>芒果piko</span>社交等功能，保护你<span class='name'>芒果piko</span>帐号的安全。收集、使用手机号码是为了满足相关法律法规的真实身份信息认证要求。若你不提供这类信息，你可能无法正常使用我们的服务。另外你还可以根据自身需求选择填写性别、生日等信息。如果您完善以上额外信息，将有助于我们为您提供更好的服务和体验，但如果您不提供上述信息，将不会影响使用产品的基本功能。
+      2. 当你注册和登录<span class='name'>栗子piko</span>服务时，我们会收集、使用你的昵称、头像、手机号码，同时，我们将通过发送短信验证码来验证您的身份是否有效，基于手机的自动读取信息功能，会读取您手机的短信以获取注册验证码。收集这些信息是为了帮助你完成<span class='name'>栗子piko</span>注册和使用<span class='name'>栗子piko</span>社交等功能，保护你<span class='name'>栗子piko</span>帐号的安全。收集、使用手机号码是为了满足相关法律法规的真实身份信息认证要求。若你不提供这类信息，你可能无法正常使用我们的服务。另外你还可以根据自身需求选择填写性别、生日等信息。如果您完善以上额外信息，将有助于我们为您提供更好的服务和体验，但如果您不提供上述信息，将不会影响使用产品的基本功能。
     </li>
     <li>
-      3. 当你使用第三方账号（如微信、QQ）登录进入<span class='name'>芒果piko</span>，您此时将授权我们获取您在第三方平台注册的公开信息（QQ或微信的唯一标识、头像、昵称、性别）用于保存您的登录信息，使您在使用不同设备登录时能够同步您的数据。并在您同意本指引后将您的第三方账号与您的<span class='name'>芒果piko</span>账户绑定，使您可以通过第三方账号直接登录并使用<span class='name'>芒果piko</span>产品和相关服务。如果您不同意授权或拒绝我们获取上述信息，您将无法通过第三方账号登录，但不影响您正常使用<span class='name'>芒果piko</span>的其他功能。
+      3. 当你使用第三方账号（如微信、QQ）登录进入<span class='name'>栗子piko</span>，您此时将授权我们获取您在第三方平台注册的公开信息（QQ或微信的唯一标识、头像、昵称、性别）用于保存您的登录信息，使您在使用不同设备登录时能够同步您的数据。并在您同意本指引后将您的第三方账号与您的<span class='name'>栗子piko</span>账户绑定，使您可以通过第三方账号直接登录并使用<span class='name'>栗子piko</span>产品和相关服务。如果您不同意授权或拒绝我们获取上述信息，您将无法通过第三方账号登录，但不影响您正常使用<span class='name'>栗子piko</span>的其他功能。
     </li>
     <li>
-      4.当你使用语音房功能时，为了让你可以浏览其他感兴趣的用户资料和进行好友消息互动，我们可能会收集使用<span class='name'>芒果piko</span>的设备信息，如设备型号、MAC地址、IMEI、操作系统、运营商、电话号码软硬件信息，并可能访问您手机设备的应用列表信息及麦克风、相册、相机功能。此外，在您使用该功能的过程中，我们会自动收集您主动编辑上传的资料和使用过程中的详细情况，并作为有关的网络日志保存，包括但不限于您公屏发布的文字信息，您上传的图片信息，您的购买记录及消耗记录，您使用的语言，访问的日期和时间，您请求的网页记录、操作系统、软件版本号、登录IP信息，好友记录包括您关注的人及添加为好友的人。当您在<span class='name'>芒果piko</span>语聊房进行听歌或者语音互动的时候，我们会访问您手机的麦克风、手机拨号、通话状态权限，对您的设备中的文件进行扫描识别，以便您在房间进行正常的语音交流、播放音乐或者当您手机有通话状态的时候停止房间的声音和麦克风录音功能。您可在开启麦克风权限后使用麦克风实现语音连麦聊天，在此过程中，我们会收集您的录音内容。请您知晓，即使您已同意开启麦克风权限，我们也仅会在您主动使用聊天或语音时通过麦克风获取语音信息。上述信息属于敏感信息，拒绝提供这些信息仅会使您无法使用<span class='name'>芒果piko</span>语聊房的部分功能，以避免影响其他用户的使用体验及泄露您个人隐私，但不影响您正常使用<span class='name'>芒果piko</span>的其他功能。
+      4.当你使用语音房功能时，为了让你可以浏览其他感兴趣的用户资料和进行好友消息互动，我们可能会收集使用<span class='name'>栗子piko</span>的设备信息，如设备型号、MAC地址、IMEI、操作系统、运营商、电话号码软硬件信息，并可能访问您手机设备的应用列表信息及麦克风、相册、相机功能。此外，在您使用该功能的过程中，我们会自动收集您主动编辑上传的资料和使用过程中的详细情况，并作为有关的网络日志保存，包括但不限于您公屏发布的文字信息，您上传的图片信息，您的购买记录及消耗记录，您使用的语言，访问的日期和时间，您请求的网页记录、操作系统、软件版本号、登录IP信息，好友记录包括您关注的人及添加为好友的人。当您在<span class='name'>栗子piko</span>语聊房进行听歌或者语音互动的时候，我们会访问您手机的麦克风、手机拨号、通话状态权限，对您的设备中的文件进行扫描识别，以便您在房间进行正常的语音交流、播放音乐或者当您手机有通话状态的时候停止房间的声音和麦克风录音功能。您可在开启麦克风权限后使用麦克风实现语音连麦聊天，在此过程中，我们会收集您的录音内容。请您知晓，即使您已同意开启麦克风权限，我们也仅会在您主动使用聊天或语音时通过麦克风获取语音信息。上述信息属于敏感信息，拒绝提供这些信息仅会使您无法使用<span class='name'>栗子piko</span>语聊房的部分功能，以避免影响其他用户的使用体验及泄露您个人隐私，但不影响您正常使用<span class='name'>栗子piko</span>的其他功能。
     </li>
     <li>
       5.当你使用赛事报名功能时，为了保证竞技赛事的公平性，我们需要收集您的一些信息，包括如下个人信息：设备型号、设备名称、MAC地址、唯一设备识别码、浏览器类型和设置、语言设置、操作系统和应用程序版本、登录IP地址、接入网络的方式、网络质量数据、移动网络信息、产品版本号、网络日志信息（如操作日志、服务日志）。同时为了收集上述基本的个人设备信息，我们将会申请访问您的设备信息的权限，我们收集这些信息是为了向您提供赛事服务及更好的针对违反赛事规定的用户进行处理，如您拒绝提供上述权限将可能导致您无法使用我们的相关产品与服务。
     </li>
     <li>
-      6. 当你使用动态发布功能时，您上传的照片、评论、点赞、相机信息会存储在我们的服务器中，因为存储是实现这一功能所必需的，若使用图片上传功能我们可能会访问您手机设备的相册、相机功能。我们会以加密的方式存储，您也可以随时删除、取消这些信息，我们不会对该信息进行编辑或整理或者将其用于该功能以外的其他用途，但您知道并同意，该信息是<span class='name'>芒果piko</span>全部用户公开可见的，您的自主上传行为即视同您同意在<span class='name'>芒果piko</span>上的全部用户均可对该信息进行浏览，并可保存、下载、转发等。请注意，您公开发布的信息中可能会涉及您或他人的个人信息甚至个人敏感信息，如您选择上传包含个人信息的图片，请您更加谨慎地考虑，是否在使用我们的服务时共享甚至公开分享相关信息。
+      6. 当你使用动态发布功能时，您上传的照片、评论、点赞、相机信息会存储在我们的服务器中，因为存储是实现这一功能所必需的，若使用图片上传功能我们可能会访问您手机设备的相册、相机功能。我们会以加密的方式存储，您也可以随时删除、取消这些信息，我们不会对该信息进行编辑或整理或者将其用于该功能以外的其他用途，但您知道并同意，该信息是<span class='name'>栗子piko</span>全部用户公开可见的，您的自主上传行为即视同您同意在<span class='name'>栗子piko</span>上的全部用户均可对该信息进行浏览，并可保存、下载、转发等。请注意，您公开发布的信息中可能会涉及您或他人的个人信息甚至个人敏感信息，如您选择上传包含个人信息的图片，请您更加谨慎地考虑，是否在使用我们的服务时共享甚至公开分享相关信息。
     </li>
     <li>
       7. 当你使用搜索功能时，我们会收集您的搜索关键字信息、日志记录。为了提供高效的搜索服务，部分前述信息会暂时存储在您的设备之中，并可向您展示搜索结果内容、搜索历史记录。您可以自主选择是否清除上述搜索历史记录。
     </li>
     <li>
-      8.当你使用个人资料编辑功能时，在编辑过程中，我们会收集你为此功能所主动填写/设置的头像、昵称、照片、个人简介、性别、生日等信息，我们可能会访问您手机设备的相册、相机功能，拒绝提供这些信息仅会使您无法使用<span class='name'>芒果piko</span>的部分功能，但不影响您正常使用<span class='name'>芒果piko</span>的其他功能。这些信息将被上传并存储在我们的服务器中，以便你在登录<span class='name'>芒果piko</span>时使用该等信息。你也可以随时修改等信息。
+      8.当你使用个人资料编辑功能时，在编辑过程中，我们会收集你为此功能所主动填写/设置的头像、昵称、照片、个人简介、性别、生日等信息，我们可能会访问您手机设备的相册、相机功能，拒绝提供这些信息仅会使您无法使用<span class='name'>栗子piko</span>的部分功能，但不影响您正常使用<span class='name'>栗子piko</span>的其他功能。这些信息将被上传并存储在我们的服务器中，以便你在登录<span class='name'>栗子piko</span>时使用该等信息。你也可以随时修改等信息。
     </li>
     <li>
       9.在您使用提现时，根据国家相关的法律法规，你需要进行<span class="font-bold">实人认证</span>。<span class="font-bold">实人认证</span>服务由阿里云公司提供。如果拒绝实名认证，你将可能无法获得相关服务，但不影响其他功能的正常使用。此外，为保障帐号安全，我们可能需要你填写你的真实姓名、身份证号码并通过“人脸识别”的方式进行校验以确认是你本人操作，我们仅获得校验的结果，不会保留相关信息，除非我们依照法律法规规定另行取得你的同意。上述信息包含敏感个人信息，你可以拒绝提供，如果拒绝提供你将可能无法获得相关服务，但不影响其他功能的正常使用。
@@ -128,13 +128,13 @@
       10.当您使用piko的消费功能时，我们会收集您的充值记录、消费记录信息、支付宝、微信支付信息，以便您查询自己的交易记录，同时尽最大程度保护您的财产、虚拟财产安全。上述信息属于敏感信息，但收集上述信息为实现相关功能所必须，否则将无法完成交易。
     </li>
     <li class="font-bold">
-      11. 我们不会收集你的聊天记录。你在<span class='name'>芒果piko</span>中的聊天记录会存储在你的终端设备，你可以选择自行备份、删除或在不同设备中转移。
+      11. 我们不会收集你的聊天记录。你在<span class='name'>栗子piko</span>中的聊天记录会存储在你的终端设备，你可以选择自行备份、删除或在不同设备中转移。
     </li>
     <li>
       12. 如果你联系我们的客服，我们可能需要你提供必要的个人信息进行身份验证，以保证你的帐号安全。为根据你的诉求提供服务，经过你的授权，人工客服人员需要在你授权范围内查询或核验你的相关信息，<span class="font-bold">我们将尽可能采取技术和管理措施保障你的信息安全和保密，并在必要范围内进行使用。我们可能还会保存你的联系方式（你使用的或主动提供的手机号码、微信号、QQ号或其他联系方式）、你与我们的通信记录和内容，以及其他必要信息，以便为你提供和记录客户服务。</span> 
     </li>
     <li>
-      13.为帮助我们更好地了解<span class='name'>芒果piko</span>及相关服务的运行情况，以便确保运行与提供服务的安全，我们可能记录网络日志信息，以及使用软件及相关服务的频率、崩溃数据、总体安装、使用情况、性能数据信息。
+      13.为帮助我们更好地了解<span class='name'>栗子piko</span>及相关服务的运行情况，以便确保运行与提供服务的安全，我们可能记录网络日志信息，以及使用软件及相关服务的频率、崩溃数据、总体安装、使用情况、性能数据信息。
     </li>
     <li>
       更多详情请见<a href="./permissions.html" class="font-bold SDK" style="color: rgb(91, 155, 213);text-decoration: none">《设备权限清单》</a>，您不同意开启特定权限通常只影响您使用其对应的特定功能。
@@ -144,10 +144,10 @@
     </li>
     <li>
       为了给您提供更好的服务，您同意我们可以向第三方包括但不限于我们的关联公司，合作伙伴极端产品中获取您的个人信息，我们可能从第三方获取您授权共享的帐户信息（包括但不限于一键登录，昵称以及账户信息），并且在您同意本指引后将您的第三方账户与您的账户绑定。我们依据本协议约定，在符合相关法律和法规规定的指向下，使用您的这些个人信息。<br>
-      1.基于我们与通信运营商的合作，您使用<span class='name'>芒果piko</span>密码登录、填写手机验证码、第三方账号登录。手机号码属个人敏感信息，您有权拒绝提供，但这会将使得您无法使用"手机号登录"方式注册登录<span class='name'>芒果piko</span>，但不影响您通过其他方式注册登录，也不影响其他功能的正常使用。<br>
-      2.当您使用第三方账号登录<span class='name'>芒果piko</span>时，经过您的明示授权同意，我们会收集第三方账号的昵称、头像以及手机号信息，并在您同意本指引后将您的第三方账户与您的账户绑定，使您可以通过第三方账户直接登录并使用我们的产品或服务。<br>
+      1.基于我们与通信运营商的合作，您使用<span class='name'>栗子piko</span>密码登录、填写手机验证码、第三方账号登录。手机号码属个人敏感信息，您有权拒绝提供，但这会将使得您无法使用"手机号登录"方式注册登录<span class='name'>栗子piko</span>，但不影响您通过其他方式注册登录，也不影响其他功能的正常使用。<br>
+      2.当您使用第三方账号登录<span class='name'>栗子piko</span>时，经过您的明示授权同意，我们会收集第三方账号的昵称、头像以及手机号信息，并在您同意本指引后将您的第三方账户与您的账户绑定，使您可以通过第三方账户直接登录并使用我们的产品或服务。<br>
       3.用户因使用我们的产品或者服务而被我们收集的信息，例如其他用户发布的信息中可能含有您的部分信息。<br>
-      4.在您使用<span class='name'>芒果piko</span>软件及相关服务提供的身份认证功能时，我们会根据相关法律法规规定和/或该身份认证功能所必需，我们将采用行业内通行的方式及尽最大的商业努力来保护您个人敏感信息的安全。如果您不提供这些信息，您将可能无法获得相关服务。<br>
+      4.在您使用<span class='name'>栗子piko</span>软件及相关服务提供的身份认证功能时，我们会根据相关法律法规规定和/或该身份认证功能所必需，我们将采用行业内通行的方式及尽最大的商业努力来保护您个人敏感信息的安全。如果您不提供这些信息，您将可能无法获得相关服务。<br>
       5. 为了给您提供更好的服务或为了预防互联网犯罪，我们的关联公司、合作伙伴会依据法律的规定或征得您同意的前提下，向我们分享您的个人信息。
     </li>
     <li class="font-bold">
@@ -162,7 +162,7 @@
       5.所收集的个人信息是您自行向社会公众公开的；<br>
       6.从合法公开披露的信息中收集到您的个人信息，如从合法的新闻报道，政府信息公开等渠道；<br>
       7.根据您的要求长期和补充合同所必需的；<br>
-      8.用于维护<span class='name'>芒果piko</span>的产品和/或服务的安全稳定运行所必需的，例如发现，处置产品或服务的故障；<br>
+      8.用于维护<span class='name'>栗子piko</span>的产品和/或服务的安全稳定运行所必需的，例如发现，处置产品或服务的故障；<br>
       9.法律法规规定的其他优点。<br>
       特别提示您注意，如信息无法单独或结合其他信息识别到您的个人身份，其不属于法律意义上您的个人信息；故根据适用的法律，若我们对个人信息采取技术措施和其他必要措施进行处理，使得数据接收方无法重新识别特定个人且不能复原，则此类处理后数据的共享、转让、公开披露无需另行向您通知并征得您的同意。当您的信息可以单独或结合其他信息识别到您的个人身份时，或我们将无法与任何特定个人信息建立联系的数据与其他您的个人信息结合使用时，则在结合使用期间，这些信息将作为您的个人信息按照本指引处理与保护。
     </li><br>
@@ -212,15 +212,15 @@
       </span><br>
       <span class="font-bold">（一）查询您的个人信息</span><br>
       1. 查阅头像、昵称（即“名字”，下同）、性别、个人简介、相册、动态等信息<br>
-      1) 进入<span class='name'>芒果piko</span>后，点击“我的”；<br>
+      1) 进入<span class='name'>栗子piko</span>后，点击“我的”；<br>
       2) 点击头像栏；<br>
       3) 进行信息查询访问。<br><br>
       2. 查阅黑名单<br>
-      1) 进入<span class='name'>芒果piko</span>后，点击“我的”；<br>
+      1) 进入<span class='name'>栗子piko</span>后，点击“我的”；<br>
       2) 点击右上角“设置”图标；<br>
       3) 点击“黑名单管理”进行查询。<br><br>
       3. 查阅与复制个人信息<br>
-      1) 进入<span class='name'>芒果piko</span>后，点击“我的”；<br>
+      1) 进入<span class='name'>栗子piko</span>后，点击“我的”；<br>
       2）点击右上角“设置”图标；<br>
       3) 点击 “帮助”；<br>
       4) 点击“联系官方”；<br>
@@ -228,45 +228,45 @@
       您有权获取您的个人信息副本，您可以联系我们，我们会在验证您的用户身份后的十五天内对您的请求进行处理。<br><br>
       <span class="font-bold">（二）删除个人信息</span><br>
       1.删除一对一全部聊天记录<br>
-      1) 进入<span class='name'>芒果piko</span>后，长按对话；<br>
+      1) 进入<span class='name'>栗子piko</span>后，长按对话；<br>
       2) 点击“删除该聊天”。<br><br>
       2.删除部分聊天记录：<br>
-      1) 进入<span class='name'>芒果piko</span>后，打开对话，长按点击一条需要删除的消息；<br>
+      1) 进入<span class='name'>栗子piko</span>后，打开对话，长按点击一条需要删除的消息；<br>
       2) 选择“删除”，删除此条消息。<br><br>
       3.删除个人简介、相册等基本信息（性别无法修改或删除）：<br>
-      1) 进入<span class='name'>芒果piko</span>后，点击“我的”；<br>
+      1) 进入<span class='name'>栗子piko</span>后，点击“我的”；<br>
       2) 点击头像栏，进入后点击编辑；<br>
       3) 删除相关信息。<br><br>
       4.删除动态<br>
-      1) 进入<span class='name'>芒果piko</span>后，点击“我的”；<br>
+      1) 进入<span class='name'>栗子piko</span>后，点击“我的”；<br>
       2) 点击需要访问的动态信息；<br>
       3) 点击右下角“…”，并删除动态信息。<br><br>
       <span class="font-bold">（三）更正个人信息</span><br>
       1.更改头像、昵称、性别、生日、个人介绍、相册<br>
-      1) 进入<span class='name'>芒果piko</span>后，点击“我的”；<br>
+      1) 进入<span class='name'>栗子piko</span>后，点击“我的”；<br>
       2) 点击头像栏，进入后点击编辑；<br>
       3) 进行更正操作。<br><br>
       2.更改手机号、登录密码、支付宝账号、支付密码<br>
-      1) 进入<span class='name'>芒果piko</span>后，点击“我的”；<br>
+      1) 进入<span class='name'>栗子piko</span>后，点击“我的”；<br>
       2) 点击右上角“设置”图标，选择对应选项；<br>
       3) 进行更正操作。<br><br>
       <span class="font-bold">（四）权限管理</span><br>
       1.系统权限管理<br>
-      1) 进入<span class='name'>芒果piko</span>后，点击“我的”；<br>
+      1) 进入<span class='name'>栗子piko</span>后，点击“我的”；<br>
       2) 点击右上角“设置”图标；<br>
       3) 点击“个人信息与权限”；<br>
       4) 点击“系统权限管理”；<br>
       5) 点击“前往系统设置更多”。<br><br>
       <span class="font-bold">（五）注销账户</span><br>
-      1.注销<span class='name'>芒果piko</span>账号<br>
-      1) 进入<span class='name'>芒果piko</span>后，点击“我的”；<br>
+      1.注销<span class='name'>栗子piko</span>账号<br>
+      1) 进入<span class='name'>栗子piko</span>后，点击“我的”；<br>
       2）点击右上角“设置”图标；<br>
       3) 点击 “帮助”；<br>
       4) 点击“注销账号”；<br>
       5）根据指引进行注销操作。<br>
       注：当你申请注销帐号时，我们将在十五个工作日内回复并处理，成功注销账号后，我们将按照《中华人民共和国网络安全法》等法律法规的规定留存你的相关信息；超出必要保存期限后，我们将删除或匿名化处理你的个人信息。<br><br>
       2.投诉举报<br>
-      1) 进入<span class='name'>芒果piko</span>后，点击“我的”；<br>
+      1) 进入<span class='name'>栗子piko</span>后，点击“我的”；<br>
       2) 点击右上角“设置”图标；<br>
       3）点击“我要反馈”；<br>
       4) 发送投诉内容。<br><br>
@@ -275,9 +275,9 @@
       七、对Cookie和同类技术的使用
     </li>
     <li>
-      Cookie和同类技术是互联网中的通用常用技术。当您使用"<span class='name'>芒果piko</span>"软件及相关服务时，我们可能会使用相关技术向您的设备发送一个或多个Cookie或匿名标识符，以收集和存储您访问、使用本产品时的信息。我们或我们的第三方合作伙伴可能通过cookie或同类技术收集您的信息，包括您的设备信息、浏览信息、点击信息，并将该信息储存为日志信息，用于记住您的身份、分析您使用我们服务的情况。<br>
+      Cookie和同类技术是互联网中的通用常用技术。当您使用"<span class='name'>栗子piko</span>"软件及相关服务时，我们可能会使用相关技术向您的设备发送一个或多个Cookie或匿名标识符，以收集和存储您访问、使用本产品时的信息。我们或我们的第三方合作伙伴可能通过cookie或同类技术收集您的信息，包括您的设备信息、浏览信息、点击信息，并将该信息储存为日志信息，用于记住您的身份、分析您使用我们服务的情况。<br>
       请您理解，我们的某些服务只能通过使用“Cookie”才可得到实现。如果您的浏览器或浏览器附加服务允许，您可以修改对Cookie的接受程度或者拒绝我们的Cookie，但这一举动在某些情况下可能会影响您安全使用我们平台提供的服务。您可以通过浏览器设置拒绝或管理cookie或同类技术的使用，但请注意，如果停用cookies或web beacon，您有可能无法享受佳的服务体验，某些服务也可能无法正常使用。<br>
-      同时，我们也会使用第三方SDK实现以上采集和使用，其中，如您使用小米、魅族、华为、OPPO、VIVO手机的，<span class='name'>芒果piko</span>接入的上述手机厂商Push SDK需要收集手机唯一标识信息，并可能会收集您的手机型号、系统类型、系统版本、设备屏幕尺寸参数用于实现推广活动信息的推送。<br>
+      同时，我们也会使用第三方SDK实现以上采集和使用，其中，如您使用小米、魅族、华为、OPPO、VIVO手机的，<span class='name'>栗子piko</span>接入的上述手机厂商Push SDK需要收集手机唯一标识信息，并可能会收集您的手机型号、系统类型、系统版本、设备屏幕尺寸参数用于实现推广活动信息的推送。<br>
       我们使用Cookie和同类技术主要为了实现以下功能或服务：<br>
       （一）保障产品与服务的安全、高效运转<br>
       我们可能会设置认证与保障安全性的cookie或匿名标识符，使我们确认您是否安全登录服务，或者是否遇到盗用、欺诈等不法行为。这些技术还会帮助我们改进服务效率，提升登录和响应速度。<br>
@@ -309,17 +309,17 @@
     <li>
       <span
         class="font-bold">1.未满十八岁的未成年人请在父母或监护人的陪同下阅读本隐私保护指引，使用我们的产品和服务必须得到监护人的同意。我们重视对未成年人个人信息的保护，未成年用户务必请监护人仔细阅读本隐私保护指引，并应确保已征得您的监护人同意后使用我们的服务并向我们提供您的信息。如您的监护人不同意您按照本指引使用我们的服务或向我们提供信息，请您立即终止使用我们的服务并及时通知我们。</span><br>
-        2.如您注册或使用<span class='name'>芒果piko</span>，根据相关法律法规的规定，若您是14周岁以下的儿童，在使用<span class='name'>芒果piko</span>前，应当按照注册、使用流程，事先取得您的家长或法定监护人的同意，并由您的家长或法定监护人帮助您完成<span class='name'>芒果piko</span>的注册流程，以便您能使用我们提供的产品或服务。<br>
+        2.如您注册或使用<span class='name'>栗子piko</span>，根据相关法律法规的规定，若您是14周岁以下的儿童，在使用<span class='name'>栗子piko</span>前，应当按照注册、使用流程，事先取得您的家长或法定监护人的同意，并由您的家长或法定监护人帮助您完成<span class='name'>栗子piko</span>的注册流程，以便您能使用我们提供的产品或服务。<br>
         3.若您是儿童的监护人，您对您所监护的未成年人的个人信息有相关疑问时，请通过本隐私政策公示的联系方式与我们联系。<br>
         4.我们不会在知情的情况下收集未成年人的个人信息。除非监护人同意，未成年人请不要注册账户或发送自己的姓名、住址、电话、邮件地址个人信息给我们。我们将根据国家相关法律法规及本指引的规定保护未成年人用户信息的保密性及安全性。如果我们不小心收集到了未成年人的信息，我们在知情后会尽快删除。<br>
-        5.我们不会在未经未成年人的监护人同意的情况下，显示未成年人个人信息的搜索结果；如未成年人的监护人要求我们删除、屏蔽<span class='name'>芒果piko</span>上与其有关的未成年人个人信息的，请联系我们。<br>
+        5.我们不会在未经未成年人的监护人同意的情况下，显示未成年人个人信息的搜索结果；如未成年人的监护人要求我们删除、屏蔽<span class='name'>栗子piko</span>上与其有关的未成年人个人信息的，请联系我们。<br>
         6.特别的，为更好的保护未成年人隐私权益，我们提醒您慎重发布包含未成年人影像的内容，一经发布，即视为您已取得监护人同意展示未成年人的肖像、声音，且允许我们依据用户服务协议和本隐私保护指引使用、管理该与未成年人相关的内容。如权利人通知我们您发布的内容侵犯未成年人的权利，出于保护权利人及未成年人权利的考虑，我们有权对您发布的内容进行处理。
     </li><br>
     <li class="font-bold">
       十、隐私保护指引的修订
     </li>
     <li>
-      我们可能适时修订隐私保护指引，该修订构成本隐私保护指引的一部分。未经您明确同意，我们不会削减您按照本指引所应享有的权利。对于隐私保护指引发生的重大变化，我们可能还会通过交互文案、产品界面或弹窗等方式向你另行告知处理个人信息的目的、方式或范围，若另行告知的内容与本指引不一致的，以另行告知的内容为准。若您不同意修订后的隐私保护指引，您有权并应立即停止使用<span class='name'>芒果piko</span>，若您继续使用<span class='name'>芒果piko</span>，即表示同意接受修订的隐私保护指引的约束。
+      我们可能适时修订隐私保护指引，该修订构成本隐私保护指引的一部分。未经您明确同意，我们不会削减您按照本指引所应享有的权利。对于隐私保护指引发生的重大变化，我们可能还会通过交互文案、产品界面或弹窗等方式向你另行告知处理个人信息的目的、方式或范围，若另行告知的内容与本指引不一致的，以另行告知的内容为准。若您不同意修订后的隐私保护指引，您有权并应立即停止使用<span class='name'>栗子piko</span>，若您继续使用<span class='name'>栗子piko</span>，即表示同意接受修订的隐私保护指引的约束。
     </li><br>
     <li class="font-bold">
       十一、管辖与法律适用
@@ -333,7 +333,7 @@
       十二、联系我们
     </li>
     <li>
-      公司：<span class="subject">广州芒果互联网络科技有限公司</span><br>
+      公司：<span class="subject">香港栗子科技有限公司</span><br>
       电话：020-85698266
     </li>
   </ul>

view/peko/modules/rule-yinyou/privacy-wap.html

@@ -387,13 +387,13 @@
                     $('.jc').html('时间在线')
                 }
                 if (channel.indexOf('kuaishou') != -1) {
-                    $('.subject').html('广州芒果互联网络科技有限公司')
-                    $('.jc').html('芒果互联')
+                    $('.subject').html('香港栗子科技有限公司')
+                    $('.jc').html('香港栗子')
                 }
             }
         }
-        $('.subject').html('广州芒果互联网络科技有限公司')
-        $('.jc').html('芒果互联')
+        $('.subject').html('香港栗子科技有限公司')
+        $('.jc').html('香港栗子')
         setTimeout(() => {
             $('.max').show()
         }, 50);