调整刷新位置

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/index.html

@@ -12,7 +12,7 @@
 
 <body>
     <div class="box">
-        <img src="./images/gift1.png" alt="" class="gift">
+        <img src="./images/gift3.png" alt="" class="gift">
         <div class="swiper">
             <div class="swiper-wrapper">
                 <div class="swiper-slide">

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/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"> -->

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/luckyTarot/css/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 body {
   width: 100%;
   height: 21.65333rem;
@@ -226,21 +227,36 @@ body {
   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 {
@@ -594,13 +610,15 @@ h3 {
 .winningRecord .winningRecord_in ul li {
   background: none;
   width: 100%;
-  height: 1.06667rem;
-  line-height: 1.06667rem;
+  height: 1.33333rem;
   color: #FFEE9D;
   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 {
@@ -608,18 +626,12 @@ h3 {
   width: 25%;
 }
 
-.winningRecord .winningRecord_in ul li .box {
-  line-height: 1.06667rem;
-}
-
 .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 {

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

@@ -1,5 +1,5 @@
-@function px2rem($px, $rem:75) {
-    @return $px / $rem+rem;
+@function px2rem($px) {
+    @return $px / 75+rem;
 }
 
 html {}
@@ -228,14 +228,28 @@ body {
     .cardBox {
         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);
     }
 
 
@@ -243,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);
     }
 
 
@@ -250,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 {
@@ -601,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);
                 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;
                 }
             }
 

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

@@ -212,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>
                     `
@@ -344,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();