厨房：榜单标题调整间距

view/peko/activity/act-ocean/css/index.css

@@ -834,24 +834,25 @@ body {
 }
 .wrap .shade-mask-rank .shade-content-rank .rank-top .tab-wrap {
   font-family: "pingfang-regular";
-  width: 6.1333333333rem;
+  width: 5.8666666667rem;
   height: 0.9333333333rem;
   background-color: rgba(255, 255, 255, 0.3);
   border-radius: 0.48rem;
   margin: 0.2666666667rem auto 0.08rem;
+  display: flex;
+  overflow: hidden;
+  padding: 0.0666666667rem 0.1333333333rem;
+  box-sizing: border-box;
+  justify-content: space-between;
 }
 .wrap .shade-mask-rank .shade-content-rank .rank-top .tab-wrap span {
   display: inline-block;
-  width: 2.8rem;
+  width: 50%;
   height: 0.8rem;
   line-height: 0.8rem;
   text-align: center;
   font-size: 0.4rem;
   color: white;
-  margin-top: 0.0666666667rem;
-}
-.wrap .shade-mask-rank .shade-content-rank .rank-top .tab-wrap span:first-child {
-  margin-left: 0.1866666667rem;
 }
 .wrap .shade-mask-rank .shade-content-rank .rank-top .tab-wrap .active {
   background-color: white;
@@ -918,7 +919,7 @@ body {
   overflow: auto;
   position: absolute;
   width: 100%;
-  height: 6.9rem;
+  height: 7rem;
   padding: 0.4rem 0.2666666667rem 0;
   box-sizing: border-box;
   margin-top: 0.25rem;

view/peko/activity/act-ocean/css/index.scss

@@ -1098,25 +1098,30 @@ body {
 
                 .tab-wrap {
                     font-family: 'pingfang-regular';
-                    width: px2rem(460);
+                    width: px2rem(440);
                     height: px2rem(70);
                     background-color: rgba($color: #fff, $alpha: .3);
                     border-radius: px2rem(36);
                     margin: px2rem(20) auto px2rem(6);
+                    display: flex;
+                    overflow: hidden;
+                    padding: px2rem(5, ) px2rem(10, );
+                    box-sizing: border-box;
+                    justify-content: space-between;
 
                     span {
                         display: inline-block;
-                        width: px2rem(210);
+                        // width: px2rem(210, );
+                        width: 50%;
                         height: px2rem(60);
                         line-height: px2rem(60);
                         text-align: center;
                         font-size: px2rem(30);
                         color: white;
-                        margin-top: px2rem(5);
 
-                        &:first-child {
-                            margin-left: px2rem(14);
-                        }
+                        // &:first-child {
+                        //     margin-left: px2rem(14);
+                        // }
                     }
 
                     .active {
@@ -1199,7 +1204,7 @@ body {
                 overflow: auto;
                 position: absolute;
                 width: 100%;
-                height: 6.9rem;
+                height: 7rem;
                 // background-color: white;
                 padding: px2rem(30) px2rem(20) 0;
                 box-sizing: border-box;

view/peko/common/js/common2.js

@@ -541,8 +541,8 @@ function getInfoFromClient () {
 
     } else {
         // 非app环境调试参数
-        pubInfo.uid = 0;
-        pubInfo.ticket = "";
+        pubInfo.uid = 2524;
+        pubInfo.ticket = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0aWNrZXRfdHlwZSI6bnVsbCwidWlkIjoyNTI0LCJ0aWNrZXRfaWQiOiIyMTdmYjU3ZC1jZDlhLTRmY2MtOTFiZS0xNjUwNTIxNTIyOTgiLCJleHAiOjM2MDAsImNsaWVudF9pZCI6ImVyYmFuLWNsaWVudCJ9.5vg2KI8Jw9ale_DmqJdr8eq1dl34Vw0OK_aSrb8hdsY";
         // pubInfo.uid = "";
         // pubInfo.ticket = "";
 

view/peko/modules/rule/js/newWishingWellRule.js

@@ -0,0 +1,85 @@
+let urlPrefix = getUrlPrefix()
+getInfoFromClient()
+
+// 封装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'
+    })
+}
+
+let wishingWellList = []
+const getData = (boxType = 2) => {
+    showLoading()
+    networkRequest({
+        type: 'GET',
+        url: urlPrefix + '/findLove/rule',
+        data: {
+            boxType
+        },
+        success(res){
+            hideLoading(layerIndex)
+            if(res.code === 200){
+                wishingWellList = res.data
+                renderList()
+            }else{
+                toastMsg(res.message)
+            }
+        },
+        error(){
+            hideLoading(layerIndex)
+            toastMsg('網絡錯誤')
+        }
+    })
+}
+
+const renderList = () => {
+    let str = ''
+    wishingWellList.map(item => {
+        str += `
+            <li>
+                <img src="${item.picUrl}" alt="" class="prizeUrl">
+                <div>
+                    <p class="gift-name">${item.rewardName}</p>
+                    <p class="gift-prize">${item.diamonds}&nbsp;<img src="./images/diamond.png" alt="" class="diamond"></p>
+                </div>
+                <span class="gift-rate">${item.rate.toFixed(2)}%</span>
+            </li>
+        `
+        $('ul').html(str)
+    })
+}
+
+$(function () {
+    setTimeout(() => {
+        getData()
+    }, 50)
+    let currentIndex = 0
+    $('.tab').on('click', 'div', function(){
+        let index = $(this).index()
+        if(index === currentIndex) return;
+        $(this).addClass('active').siblings('div').removeClass('active')
+        if(index){
+            getData(7)
+        }else{
+            getData(2)
+        }
+        currentIndex = index
+    })
+})

view/peko/modules/rule/newWishingWellRule.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport"
+    content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <link rel="stylesheet" type="text/css" href="../../common/css/reset.css"/>
+  <link rel="stylesheet" href="./style/wishingWellRule.css">
+  <title>玩法规则</title>
+
+</head>
+
+<body>
+  <div class="max">
+    <p class="rule">
+      <span class="icon">1</span>
+      <span>從尋愛之旅處獲得的禮物放到禮物包裹，點開禮物面板即可查看；</span>
+    </p>
+    <p class="rule">
+      <span class="icon">2</span>
+      <span>每次在尋找之旅100%獲得禮物。</span>
+    </p>
+  </div>
+
+  <div class="tab">
+    <div class="active">
+      <span class="tab-name">尋愛之旅</span>
+      <span class="line"></span>
+    </div>
+    <div style="display: none;">
+      <span class="tab-name">梦幻许愿池（限时开放）</span>
+      <span class="line"></span>
+    </div>
+  </div>
+
+  <ul></ul>
+
+  <!-- <h1 class="apple">本活动与苹果公司无关</h1> -->
+</body>
+<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="./js/newWishingWellRule.js?v=1.0"></script>
+</html>