Compare commits

...

46 Commits

Author SHA1 Message Date
Dragon
ddfd7370f2 修改新加坡规则 2024-02-19 18:39:24 +08:00
Dragon
c58674a618 修改规则 2024-02-19 18:34:07 +08:00
Dragon
7fdcfdaa32 修复切换异常问题 2024-02-19 18:05:17 +08:00
Dragon
70607468ff 新增台湾地区银行提领绑定资料 2024-02-19 16:44:39 +08:00
Dragon
267cf85389 修改规则 2024-02-13 00:17:18 +08:00
Dragon
0a865eda72 修改活动时间 2024-02-12 13:14:34 +08:00
Dragon
a598111ede 新增情人节 2024-02-06 17:12:09 +08:00
Dragon
956c3c26f9 新增peko新春榜单 2024-02-05 21:27:57 +08:00
Dragon
3632ed33a9 新春榜单暂存 2024-02-01 14:18:56 +08:00
Dragon
c6410f6d33 调整弹窗 2024-01-25 16:00:50 +08:00
Dragon
fc98b7f93c 调整联系我们弹窗 2024-01-25 15:53:51 +08:00
Dragon
1fbc64721e 替换pc图 2024-01-25 14:30:12 +08:00
Dragon
1694d222d6 优化体验 2024-01-25 12:34:27 +08:00
Dragon
d44a302a2f 优化体验 2024-01-25 12:25:49 +08:00
Dragon
d459bb3a93 压缩图片 2024-01-24 20:22:59 +08:00
Dragon
9def117874 修改移动端判断 2024-01-24 20:14:49 +08:00
Dragon
6a84f98e41 适配官网 2024-01-24 20:10:25 +08:00
Dragon
ebc54bd4a0 修复点击字段传参 2024-01-23 17:20:11 +08:00
Dragon
c08811e593 修改点击下载传参 2024-01-23 15:59:37 +08:00
Dragon
08656587a1 修改下拉菜单异常问题 2024-01-23 15:35:12 +08:00
Dragon
195c550ef1 修复一直加载中问题 2024-01-23 15:15:42 +08:00
Dragon
c18cd57b9e 修复bug 2024-01-23 14:26:42 +08:00
Dragon
e717dd00ba 优化官网 2024-01-22 21:52:55 +08:00
Dragon
490a2e698d 暂存 2024-01-22 21:52:55 +08:00
Dragon
8da092a707 暂存 2024-01-22 21:52:54 +08:00
Dragon
5e029a3c04 修复大陆提现报错异常 2024-01-22 16:06:39 +08:00
Dragon
74715febed 修复非大陆提现异常问题 2024-01-22 15:06:14 +08:00
Dragon
59ac905999 新增提现未成年限制 2024-01-19 20:31:00 +08:00
Dragon
b0f828f4a3 新增大陆提现是否成年校验 2024-01-19 18:41:29 +08:00
Dragon
2a76f79507 更新账单 2024-01-18 12:01:24 +08:00
Dragon
312d60d55e 新增成功判断 2024-01-12 19:02:19 +08:00
Dragon
6a6665af3c 修复认证异常 2024-01-12 18:26:29 +08:00
Dragon
440dc1b73d 修复报错问题 2024-01-12 17:41:52 +08:00
Dragon
1b436d60a5 完善实名后的皂搓 2024-01-12 17:30:59 +08:00
Dragon
9ff5b68fc8 修改认证判断 2024-01-12 16:29:01 +08:00
Dragon
c7982c7484 修复实名页面报错问题 2024-01-12 16:11:38 +08:00
Dragon
185de5dc77 完善实名认证后的成功失败操作 2024-01-12 16:08:01 +08:00
Dragon
6a2ec77c04 新增实名认证刷脸失败皂搓 2024-01-12 15:39:01 +08:00
Dragon
61ca0a167a 修复bug 2024-01-12 15:17:38 +08:00
Dragon
4508621f41 修改bug 2024-01-12 14:33:15 +08:00
Dragon
b4bd899ce4 提现暂存 2024-01-12 14:33:15 +08:00
Dragon
62a9f2c4a6 修复实名显示异常问题 2024-01-12 14:33:15 +08:00
Dragon
693b19c076 清除缓存 2024-01-12 14:33:15 +08:00
Dragon
7a75f36d6b 清除缓存 2024-01-12 14:33:15 +08:00
Dragon
33bc6ebd86 完成接入人脸认证 2024-01-12 14:33:14 +08:00
Dragon
bb3cd87401 实名认证暂存 2024-01-12 14:33:14 +08:00
213 changed files with 12510 additions and 1582 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 201 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 218 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 161 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@@ -0,0 +1,391 @@
<!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 class="rule_icon"></div>
</div>
<!-- tab切換 -->
<div class="tab">
<div class="act">萌動花盒</div>
<div>甜蜜升溫</div>
<div>熱戀時刻</div>
</div>
<!-- 頁面1 -->
<div class="page1">
<div class="bg1">
<!-- 標題 -->
<img src="./images/page1Bg1Title.png" alt="" class="title">
<!-- 愛心盒子 -->
<img src="./images/loveBox.png" alt="" class="loveBox">
<!-- 文案 -->
<p class="p1">活動期間開出「萌動花盒」中的6種不同禮物</p>
<p class="p2">可獲得「初心萌動」限定銘牌</p>
<p class="p3">今日獎勵已發放</p>
<p class="p4">獎勵自動發放每日僅可領取一次點亮結果和獎勵每日中午12點自動刷新</p>
<!-- 銘牌 -->
<img src="./images/mp.png" alt="" class="mp">
<!-- 點亮列錶 -->
<div class="giftListBox">
<div class="giftList giftList1 filter">
<div class="qp"></div>
<img src="./images/1.png" alt="" class="gift">
<div class="giftName">白玫瑰</div>
<div class="giftVAlue">1314鉆</div>
</div>
<div class="giftList giftList2 filter">
<div class="qp"></div>
<img src="./images/2.png" alt="" class="gift">
<div class="giftName">紅玫瑰</div>
<div class="giftVAlue">1314鉆</div>
</div>
<div class="giftList giftList3 filter">
<div class="qp"></div>
<img src="./images/3.png" alt="" class="gift">
<div class="giftName">粉玫瑰</div>
<div class="giftVAlue">1314鉆</div>
</div>
<div class="giftList giftList4 filter">
<div class="qp"></div>
<img src="./images/4.png" alt="" class="gift">
<div class="giftName">彩玫瑰</div>
<div class="giftVAlue">1314鉆</div>
</div>
<div class="giftList giftList5 filter">
<div class="qp"></div>
<img src="./images/5.png" alt="" class="gift">
<div class="giftName">熾熱愛戀</div>
<div class="giftVAlue">1314鉆</div>
</div>
<div class="giftList giftList6 filter">
<div class="qp"></div>
<img src="./images/6.png" alt="" class="gift">
<div class="giftName">純白愛戀</div>
<div class="giftVAlue">1314鉆</div>
</div>
</div>
</div>
<div class="bg2">
<!-- 標題 -->
<img src="./images/page1Bg2Title.png" alt="" class="title">
<!-- 列錶 -->
<ul>
<li class="liTitle">
<div>點亮時間</div>
<div>獲得獎勵</div>
</li>
<li>
<div class="left">
<p>2024/2/1</p>
<span>00:00:00</span>
</div>
<div>xxxx銘牌</div>
</li>
<li class="null">
<div>暫無點亮記錄,快去集齊禮物吧~</div>
</li>
</ul>
</div>
</div>
<!-- 頁面2 -->
<div class="page2">
<div class="box">
<!-- 標題 -->
<img src="./images/page2Title.png" alt="" class="title">
<!-- 購買記錄icon -->
<img src="./images/page2Buy_icon.png" alt="" class="page2Buy_icon">
<!-- 文案 -->
<i class="i1">剩余時間:00天12時12分</i>
<i class="i2">活動期間送禮到達指定任務值,可解鎖超珍稀限時禮物直購權</i>
<i class="i3">1鉆石送禮=1禮物值</i>
<!-- 任務 -->
<div class="tasks tasks1 taskss">
<div class="giftBox">
<div class="qp"></div>
<img src="./images/tasks1.png" alt="" class="gift">
<div class="giftName">心動一剎</div>
<div class="giftVAlue">13140鉆</div>
</div>
<p class="p1">每達到52000禮物值可解鎖1次直購權</p>
<p class="p2">禮物值</p>
<p class="p3">當前可購買: X個</p>
<div class="line">
<span></span>
<i class="i">0/1000</i>
</div>
<div class="buy">
<img src="./images/diamond.png" alt="" class="diamond">
1314購買
</div>
</div>
<div class="tasks2 taskss">
<div class="giftBox">
<div class="qp"></div>
<img src="./images/tasks2.png" alt="" class="gift">
<div class="giftName">絕對寵溺</div>
<div class="giftVAlue">33440鉆</div>
</div>
<p class="p1">每達到1314520禮物值可解鎖1次直購權</p>
<p class="p2">禮物值</p>
<p class="p3">當前可購買: X個</p>
<div class="line">
<span></span>
<i class="i">0/2000</i>
</div>
<div class="buy">
<img src="./images/diamond.png" alt="" class="diamond">
3344購買
</div>
</div>
</div>
</div>
<!-- 頁面3 -->
<div class="page3">
<!-- 獎勵任務 -->
<div class="box">
<!-- 文案 -->
<i class="i2">突破熱戀值,領取限時裝扮獎勵!
女性用戶獲得粉色裝扮,男性用戶獲得藍色裝扮
每個用戶僅能獲取1次將自動發放至「我的裝扮」</i>
<!-- 任務 -->
<div class="tasks tasks1">
<div class="giftBox">
<div class="qp"></div>
<!-- <img src="./images/logo.png" alt="" class="gift"> -->
<div class="giftName">糖果戀人頭飾</div>
<div class="giftVAlue">13140熱戀值</div>
</div>
<p class="p1">糖果戀人頭飾-情人節限定</p>
<p class="p2">熱戀值</p>
<p class="p3">有效期24H</p>
<div class="line">
<span></span>
<i class="i">0/1000</i>
</div>
<div class="buy">
未完成
</div>
</div>
<div class="tasks2">
<div class="giftBox">
<div class="qp"></div>
<!-- <img src="./images/logo.png" alt="" class="gift"> -->
<div class="giftName">糖果戀人氣泡</div>
<div class="giftVAlue">33440熱戀值</div>
</div>
<p class="p1">糖果戀人氣泡·情人節限定</p>
<p class="p2">熱戀值</p>
<p class="p3">有效期24H</p>
<div class="line">
<span></span>
<i class="i">0/1000</i>
</div>
<div class="buy">
未完成
</div>
</div>
</div>
<!-- 前三 -->
<div class="top3">
<!-- 標題 -->
<div class="title">熱戀榜單</div>
<!-- 榜單獎勵 -->
<img src="./images/page3Rule_icon.png" alt="" class="rule_icon">
<!-- 前三列錶 -->
<div class="no1">
<img src="./images/page3Top1.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="leftlogo">
<img src="./images/logo.png" alt="" class="rightlogo">
<div class="name">我是男用戶6...<i> & </i>我是女用戶6...</div>
<span class="score">9999熱戀值</span>
</div>
<div class="no2">
<img src="./images/page3Top2.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="leftlogo">
<img src="./images/logo.png" alt="" class="rightlogo">
<div class="name">我是男用戶6...<i> & </i>我是女用戶6...</div>
<span class="score">9999熱戀值</span>
</div>
<div class="no3">
<img src="./images/page3Top3.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="leftlogo">
<img src="./images/logo.png" alt="" class="rightlogo">
<div class="name">我是男用戶6...<i> & </i>我是女用戶6...</div>
<span class="score">9999熱戀值</span>
</div>
</div>
<!-- 非前三 -->
<ul>
<li>
<div class="num">4</div>
<img src="./images/logo.png" alt="" class="leftTx">
<img src="./images/logo.png" alt="" class="rightTx">
<div class="leftName">我是男用戶的...</div>
<div class="rightName">我是男用戶的...</div>
<div class="score">0</div>
</li>
</ul>
<!-- 自己組合 -->
<div class="my">
<img src="./images/top.png" alt="" class="icon">
<div class="scroll">
<div class="myBox">
<div class="num">4</div>
<img src="./images/logo.png" alt="" class="leftTx">
<img src="./images/logo.png" alt="" class="rightTx">
<div class="leftName">1我是男用戶的...</div>
<div class="rightName">1我是男用戶的...</div>
<div class="score">0</div>
</div>
</div>
</div>
</div>
<!-- 購買記錄彈窗 -->
<div class="buyRecords">
<div class="buyRecords_in">
<!-- 標題 -->
<img src="./images/page2RuleTitle.png" alt="" class="title">
<!-- 列錶 -->
<ul>
<li class="liTitle">
<div>購買時間</div>
<div>購買禮物</div>
</li>
<li>
<div class="left">
<p>2024/2/1</p>
<span>00:00:00</span>
</div>
<div>xxxx禮物*1個</div>
</li>
<li class="null">
<div>暫無購買記錄~</div>
</li>
</ul>
</div>
</div>
<!-- 活動規則彈窗 -->
<div class="rule">
<div class="rule_in">
<!-- 標題 -->
<img src="./images/ruleTitle.png" alt="" class="title">
<!-- 列錶 -->
<ul>
<li>一、活動時間:</li>
<li> 2024年2月12日12:00:00—2024年2月16日23:59:59</li>
<li> 二、熱戀情人節</li>
<li> 1. 萌動花盒</li>
<li> a. 活動期間5200鉆石萌動花盒幸運禮物限時上線花盒內有6種不同禮物每次送出隨機解鎖1種</li>
<li> b.每送出花盒內的一種禮物皆可點亮對應拼圖所有拼圖全部點亮即可獲得24H【初心萌動】銘牌獎勵</li>
<li> c. 拼圖進度每日中午12點重置活動期間每天均可完成1次 </li>
<li>2. 甜蜜升溫</li>
<li> a. 活動期間,超珍稀禮物直購限時開放,贈送禮物每達指定價值即可解鎖直購</li>
<li>b. 贈送禮物價值每滿520000鉆即可購買【心動一剎131400鉆】</li>
<li>c. 贈送禮物價值每滿1314520鉆即可購買【絕對寵溺334400鉆】</li>
<li>d. 購買的禮物將直接放入背包當中</li>
<li>3. 熱戀時刻</li>
<li>a. 活動時間2月14日0:00:00—2月15日00:00:00</li>
<li>b. 活動時間內比拼熱戀值收到10鉆=1熱戀值</li>
<li>c. 活動時間內熱戀值滿13140可獲得24H【糖果戀人】頭像框獎勵熱戀值滿33440可獲得24H【糖果戀人】氣泡獎勵</li>
<li>d. 大頭號牌照房房主和家族長不可以組成CP不參與榜單活動排名</li>
<li>e. 榜單獎勵TOP1可額外獲得情侶靚號5203344&3344520*30天TOP1-3均可獲得【摯愛唯一】專屬銘牌、頭像框、資料卡、專屬開屏1天</li>
<li>三、特別說明</li>
<li>1.靚號持有者需要在活動結束後2周內確認靚號否則將自動過期無法使用</li>
<li>2.本活動最終解釋權歸PIKO所有本活動以及獎勵與蘋果公司無關</li>
</ul>
</div>
</div>
<!-- 活動結束彈窗 -->
<div class="end">
<div class="end_in">
<img src="./images/endTitle.png" alt="" class="title">
<div class="but">檢視榜單</div>
</div>
</div>
<!-- 購買失敗彈窗 -->
<div class="failureBuy">
<div class="failureBuy_in">
<img src="./images/failureBuyTitle.png" alt="" class="title">
<div class="text">鉆石余額不足</div>
<div class="but close">關閉</div>
<div class="but ok">前往充值</div>
</div>
</div>
<!-- 購買成功彈窗 -->
<div class="success">
<div class="success_in">
<img src="./images/buyTitle.png" alt="" class="title">
<div class="giftListSuccess">
<div class="qp"></div>
<img src="./images/logo.png" alt="" class="gift">
<div class="giftName">禮物名稱</div>
<div class="giftVAlue">0鉆</div>
</div>
<div class="text">xxxx禮物名*1已發放至「我的背包」</div>
<div class="but">知道了</div>
</div>
</div>
<!-- 二次確認購買彈窗 -->
<div class="sure">
<div class="sure_in">
<img src="./images/sureTitle.png" alt="" class="title">
<div class="text">購買成功後將自動發放至「我的背包」</div>
<div class="giftListSuccess">
<div class="qp"></div>
<img src="./images/logo.png" alt="" class="gift">
<div class="giftName">禮物名稱</div>
<div class="giftVAlue">0鉆</div>
</div>
<div class="but close">下次再說</div>
<div class="but ok">立即購買</div>
</div>
</div>
<!-- 榜單獎勵彈窗 -->
<div class="page3Rule">
<div class="page3Rule_in">
<img src="./images/page3Title.png" alt="" class="title">
<div class="box">
<img src="./images/page3Rule_inBg.png" alt="">
</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/route-constant.js"></script>
<script src="./js/index.js"></script>

View File

@@ -0,0 +1,531 @@
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'
})
}
var activityCode1;
var activityCode2;
var activityCode;
var diamondNum;
var taskCode;
var taskIcon;
var taskName;
var showValue;
var countupTime;
// 初始化函數
$(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)
}
})
getTask_MENG_DONG_HUA_HE();
getTask_TIAN_MI_SHENG_WEN();
getRank();
}, 100)
})
// 獲取榜單接口
function getRank () {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/act/2024Valentines/cpRank/getRank',
success (res) {
if (res.code === 200) {
// 處理任務
res.data.cpTaskList.forEach((val, i) => {
console.log(res.status);
if (val.status == 2) {
$(`.page3 .box .tasks${i + 1} .buy`).addClass("act");
$(`.page3 .box .tasks${i + 1} .buy`).text("已完成");
$(`.page3 .box .tasks${i + 1} .line .i`).text(`${res.data.score > val.score ? val.score : res.data.score}/${val.score}`);
$(`.page3 .box .tasks${i + 1} .line span`).css('width', `${(res.data.score / val.score) * 100 >= 100 ? 98.8 : (res.data.score / val.score) * 100}%`)
} else {
$(`.page3 .box .tasks${i + 1} .buy`).removeClass("act");
$(`.page3 .box .tasks${i + 1} .buy`).text("未完成");
$(`.page3 .box .tasks${i + 1} .line .i`).text(`${res.data.score > val.score ? val.score : res.data.score}/${val.score}`);
$(`.page3 .box .tasks${i + 1} .line span`).css('width', `${(res.data.score / val.score) * 100 >= 100 ? 98.8 : (res.data.score / val.score) * 100}%`)
}
});
// 處理前三
var top3 = res.data.rankList.slice(0, 3);
var notTop3 = res.data.rankList.slice(3);
if (top3.length < 3) {
let arr = new Array(3 - top3.length).fill({
leftAvatar: './images/logo.png',
rightAvatar: './images/logo.png',
leftNick: '虛位以待',
rightNick: '虛位以待',
score: "0"
})
top3.push(...arr)
}
top3.forEach((res, i) => {
$(`.page3 .top3 .no${i + 1} .leftlogo`).attr('src', res.leftAvatar);
$(`.page3 .top3 .no${i + 1} .rightlogo`).attr('src', res.rightAvatar);
$(`.page3 .top3 .no${i + 1} .name`).html(`${res.leftNick.length > 6 ? res.leftNick.slice(0, 6) + '...' : res.leftNick}<i> & </i>${res.rightNick.length > 6 ? res.rightNick.slice(0, 6) + '...' : res.rightNick}`);
$(`.page3 .top3 .no${i + 1} .score`).text(unitProcessing(res.score, 10000, 1, 'w') + '熱戀值')
})
// 非前三
var str = '';
$('.page3 ul li').remove();
notTop3.forEach((res, i) => {
str += `
<li>
<div class="num">${res.ranking}</div>
<img src="${res.leftAvatar}" alt="" class="leftTx">
<img src="${res.rightAvatar}" alt="" class="rightTx">
<div class="leftName">${res.leftNick}</div>
<div class="rightName">${res.rightNick}</div>
<div class="score">${unitProcessing(res.score, 10000, 1, 'w')}</div>
</li>
`
})
$('.page3 ul').append(str);
// 處理自己榜單排名
$('.page3 .my .myBox').remove();
var strMy = '';
res.data.meRankList.forEach((res, i) => {
strMy += `
<div class="myBox">
<div class="num">${res.ranking == 0 ? '未上榜' : res.ranking}</div>
<img src="${res.leftAvatar}" alt="" class="leftTx">
<img src="${res.rightAvatar}" alt="" class="rightTx">
<div class="leftName">${res.leftNick}</div>
<div class="rightName">${res.rightNick}</div>
<div class="score">${unitProcessing(res.score, 10000, 1, 'w')}</div>
</div>
`
})
$('.page3 .my .scroll').append(strMy)
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網路錯誤,請退出重進')
}
})
}
// 獲取萌動禮盒點亮任務接口
function activityInfo () {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/activity/info',
data: { activityCode: activityCode2 },
success (res) {
if (res.code === 200) {
if (res.data.endTime - res.timestamp > 0) {
countup(res.data.endTime - res.timestamp);
} else {
$('.end').show();
bodyScroolFun(true);
}
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網路錯誤,請退出重進')
}
})
}
// 倒計時
function countup (leftTime) {
clearTimeout(countupTime)
//獲取當前時間
// var now = nowTime;
var d = 0;
var h = 0;
var m = 0;
var s = 0;
//定義變數 d,h,m,s保存倒計時的時間
var d, h, m, s;
//遞歸每秒調⽤countTime⽅法顯⽰動態時間效果
if (leftTime > 0) {
d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24));
h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
s = getzf(Math.floor(leftTime / 1000 % 60));
//將倒計時賦值到div中
$('.page2 .box .i1').text(`剩余時間:${d}${h}${m}${s}`);
} else {
$('.page2 .box .i1').text(`剩余時間:已結束`);
}
if (leftTime > 0) {
leftTime = leftTime - 1000;
}
countupTime = setTimeout(function () {
countup(leftTime);
}, 1000);
}
// 獲取萌動禮盒點亮任務接口
function getTask_MENG_DONG_HUA_HE () {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/activity/task/user',
data: { componentCode: "MENG_DONG_HUA_HE" },
success (res) {
if (res.code === 200) {
// 渲染合成列錶
$('.page1 .bg1 .giftListBox .giftList').remove();
var str = '';
res.data[0].children.forEach((res, i) => {
str += `
<div class="giftList giftList${i + 1} ${res.completed ? '' : 'filter'}">
<div class="qp"></div>
<img src="${res.taskIcon}" alt="" class="gift">
<div class="giftName">${res.taskName}</div>
<div class="giftVAlue">${res.taskValue}鉆</div>
</div>
`
});
$('.page1 .bg1 .giftListBox').append(str);
activityCode1 = 'ACT_2024_VALENTINES_DAY';
recordPage(activityCode1, 'MENG_DONG_HUA_HE',);
if (res.data[0].reward.granted) {
$('.page1 .bg1 .p3').show();
} else {
$('.page1 .bg1 .p3').hide();
}
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網路錯誤,請退出重進')
}
})
}
// 獲取甜蜜升溫任務接口
function getTask_TIAN_MI_SHENG_WEN () {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/activity/task/user',
data: { componentCode: "TIAN_MI_SHENG_WEN" },
success (res) {
if (res.code === 200) {
activityCode2 = 'ACT_2024_VALENTINES_DAY';
res.data.forEach((res, i) => {
$(`.page2 .box .tasks${i + 1} .giftBox .gift`).attr('src', res.taskIcon);
$(`.page2 .box .tasks${i + 1} .giftBox .giftName`).text(res.reward.rewardName);
$(`.page2 .box .tasks${i + 1} .giftBox .giftVAlue`).text(res.reward.showValue + '鉆');
$(`.page2 .box .tasks${i + 1} .p1`).text(`每達到${res.taskValue}禮物值可解鎖1次直購權`);
$(`.page2 .box .tasks${i + 1} .line .i`).text(`${res.completeValue % res.taskValue}/${res.taskValue}`);
$(`.page2 .box .tasks${i + 1} .line span`).css('width', `${(res.completeValue % res.taskValue / res.taskValue) * 100 >= 100 ? 98.8 : (res.completeValue % res.taskValue / res.taskValue) * 100}%`);
$(`.page2 .box .tasks${i + 1} .p3`).text(`當前可購買: ${Math.floor(res.activityValue / res.taskValue)}`);
$(`.page2 .box .tasks${i + 1} .buy`).html(`<img src="./images/diamond.png" alt="" class="diamond">
${res.reward.showValue}購買`);
$(`.page2 .box .tasks${i + 1} .buy`).attr('activityCode', res.activityCode);
$(`.page2 .box .tasks${i + 1} .buy`).attr('taskCode', res.taskCode);
$(`.page2 .box .tasks${i + 1} .buy`).attr('diamondNum', res.reward.showValue);
$(`.page2 .box .tasks${i + 1} .buy`).attr('num', Math.floor(res.activityValue / res.taskValue));
$(`.page2 .box .tasks${i + 1} .buy`).attr('taskIcon', res.taskIcon);
$(`.page2 .box .tasks${i + 1} .buy`).attr('taskName', res.reward.rewardName);
$(`.page2 .box .tasks${i + 1} .buy`).attr('showValue', res.reward.showValue);
})
activityInfo();
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網路錯誤,請退出重進')
}
})
}
// 購買接口
function exchange (activityCode, diamondNum, taskCode, taskIcon, taskName, showValue) {
showLoading()
networkRequest({
type: 'post',
url: urlPrefix + '/activity/task/exchange',
data: { activityCode, diamondNum, taskCode, num: 1 },
success (res) {
if (res.code === 200) {
$('.success .success_in .giftListSuccess .gift').attr('src', taskIcon);
$('.success .success_in .giftListSuccess .giftName').text(taskName);
$('.success .success_in .giftListSuccess .giftVAlue').text(`${showValue}`);
$('.success .success_in .text').text(`${taskName}*1已發放至「我的背包」`);
$('.success').show();
getTask_TIAN_MI_SHENG_WEN();
bodyScroolFun(true);
} else if (res.code == 31005) {
$('.failureBuy').show();
bodyScroolFun(true);
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網路錯誤,請退出重進')
}
})
}
// 購買禮物按鈕
$(`.page2 .box .taskss .buy`).click(function () {
var num = $(this).attr('num');
activityCode = $(this).attr('activityCode');
diamondNum = $(this).attr('diamondNum');
taskCode = $(this).attr('taskCode');
taskIcon = $(this).attr('taskIcon');
taskName = $(this).attr('taskName');
showValue = $(this).attr('showValue');
if (num > 0) {//true
$('.sure .sure_in .giftListSuccess .gift').attr('src', taskIcon);
$('.sure .sure_in .giftListSuccess .giftName').text(taskName);
$('.sure .sure_in .giftListSuccess .giftVAlue').text(showValue + '鉆');
$('.sure').show();
bodyScroolFun(true);
} else {
toastMsg('當前購買次數不足~')
}
});
// 二次確認彈窗
$('.sure .sure_in .ok').click(function () {
exchange(activityCode, diamondNum, taskCode, taskIcon, taskName, showValue);
$('.sure').hide();
bodyScroolFun(false);
})
// tab切換
$('.tab div').click(function () {
var i = $(this).index() + 1;
$('.page1,.page2,.page3').hide();
$(`.page${i}`).show();
$(this).addClass(`act`).siblings().removeClass('act')
if (i == 3) {
getRank();
}
})
// 記錄接口
function recordPage (activityCode, componentCode) {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/activity/task/user/record/page',
data: { activityCode, componentCode, pageNum: 1, pageSize: 9999 },
success (res) {
if (res.code === 200) {
var str = '';
if (componentCode == 'MENG_DONG_HUA_HE') {
$('.page1 .bg2 ul li').remove()
if (res.data.records.length <= 0) {
str = `<li class="null"><div>暫無點亮記錄,快去集齊禮物吧~</div></li>`
} else {
res.data.records.forEach(res => {
str += `
<li class="liTitle">
<div>點亮時間</div>
<div>獲得獎勵</div>
</li>
<li>
<div class="left">
<p>${dateFormat(res.createTime, 'yyyy/MM/dd')}</p>
<span>${dateFormat(res.createTime, 'hh/mm/ss')}</span>
</div>
<div>${res.rewardName}銘牌</div>
</li>
`})
}
$('.page1 .bg2 ul').append(str);
} else if (componentCode == 'TIAN_MI_SHENG_WEN') {
$('.buyRecords .buyRecords_in ul li').remove();
if (res.data.records.length <= 0) {
str = `<li class="null"><div>暫無購買記錄~</div></li>`
} else {
res.data.records.forEach(res => {
str += `
<li class="liTitle">
<div>購買時間</div>
<div>購買禮物</div>
</li>
<li>
<div class="left">
<p>${dateFormat(res.createTime, 'yyyy/MM/dd')}</p>
<span>${dateFormat(res.createTime, 'hh/mm/ss')}</span>
</div>
<div>${res.rewardName}禮物*1個</div>
</li>
`})
}
$('.buyRecords .buyRecords_in ul').append(str);
}
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網路錯誤,請退出重進')
}
})
}
// 打開購買記錄
$('.page2 .box .page2Buy_icon').click(function () {
recordPage(activityCode2, 'TIAN_MI_SHENG_WEN',);
$('.buyRecords').show();
bodyScroolFun(true);
})
// 關閉購買記錄
$('.buyRecords').click(function () {
$('.buyRecords').hide();
bodyScroolFun(false);
})
// 打開規則記錄
$('.header .rule_icon').click(function () {
$('.rule').show();
bodyScroolFun(true);
})
// 關閉規則記錄
$('.rule').click(function () {
$('.rule').hide();
bodyScroolFun(false);
})
// 自己榜單展開按鈕
var scrollBool = true;
$('.page3 .my .icon').click(function () {
$('.page3 .my .scroll').scrollTop(0)
if (scrollBool) {
$('.page3 .my').css({ "height": "8.74667rem", "background": "url(./images/myBg.png) no-repeat", "background-size": "100% 100%" })
$('.page3 .my .scroll').css({ "overflow-y": "scroll" })
$('.page3 .my .icon').attr('src', './images/bottom.png')
bodyScroolFun(true);
} else {
$('.page3 .my').css({ "height": "2.2rem", "background": "url(./images/myBg2.png) no-repeat", "background-size": "100% 100%" })
$('.page3 .my .scroll').css({ "overflow-y": "hidden" })
$('.page3 .my .icon').attr('src', './images/top.png')
bodyScroolFun(false);
}
scrollBool = !scrollBool;
})
// 關閉活動結束彈窗
$('.end .end_in .but').click(function () {
$('.page1,.page2,.page3').hide();
$(`.page${3}`).show();
$('.tab div').removeClass('act');
$('.tab div').eq(2).addClass('act');
$('.end').hide();
bodyScroolFun(false);
})
// 關閉充值彈窗
$('.failureBuy .failureBuy_in .close').click(function () {
$('.failureBuy').hide();
bodyScroolFun(false);
})
// 跳轉充值彈窗
$('.failureBuy .failureBuy_in .ok').click(function () {
$('.failureBuy').hide();
bodyScroolFun(false);
if (browser.app) {
if (browser.android) {
let channel = pubInfo.deviceInfo.channel;
console.log(pubInfo.deviceInfo);
if (channel == "google") {
window.androidJsObj.openChargePage(6);
} else {
window.androidJsObj.openChargePage(6);
window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
}
} else if (browser.ios) {
let channel = pubInfo.deviceInfo.channel;
if (channel == "appstore") {
window.webkit.messageHandlers.openChargePage.postMessage(null);
} else {
window.webkit.messageHandlers.chargePayClickPage.postMessage(6);
window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
}
}
} else {
toastMsg('請在app內打開')
}
})
// 關閉購買成功彈窗
$('.success .success_in .but').click(function () {
$('.success').hide();
bodyScroolFun(false);
})
// 關閉二次確認彈窗
$('.sure .sure_in .close').click(function () {
$('.sure').hide();
bodyScroolFun(false);
})
// 關閉榜單獎勵
$('.page3Rule').click(function () {
$('.page3Rule').hide();
bodyScroolFun(false);
})
// 打開榜單獎勵
$('.page3 .top3 .rule_icon').click(function () {
$('.page3Rule').show();
bodyScroolFun(true);
})
//補0操作
function getzf (num) {
if (parseInt(num) < 10) {
num = '0' + num;
}
return num;
}

View File

@@ -0,0 +1,564 @@
html,
body {
width: 100%;
background: linear-gradient(0deg, #FB88A9 0%, #FFBECE 61%);
}
.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;
}
.header {
width: 10rem;
height: 8.4rem;
position: relative;
margin: 0 auto 0;
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
}
.header .rule_icon {
width: 0.62667rem;
height: 1.73333rem;
position: absolute;
top: 2.57333rem;
right: 0rem;
}
.tab {
width: 8rem;
height: 1.17333rem;
line-height: 1.17333rem;
margin: 0.10667rem auto 0.58667rem;
background: #fff;
border-radius: 1.17333rem;
display: flex;
justify-content: space-between;
}
.tab div {
color: #BB4A56;
font-size: 0.4rem;
text-align: center;
width: 4rem;
height: 1.17333rem;
font-weight: 500;
}
.tab .tab1 {
background: url(../images/tab1.png) no-repeat;
background-size: 100% 100%;
color: transparent;
}
.tab .tab2 {
background: url(../images/tab2.png) no-repeat;
background-size: 100% 100%;
color: transparent;
}
.page1 .pageImg1 {
display: block;
width: 9.2rem;
height: 20.58667rem;
margin: 0 auto 0.34667rem;
}
.page1 .pageImg2 {
display: block;
width: 9.2rem;
height: 16.33333rem;
margin: 0 auto 0.46667rem;
}
.page2 {
display: none;
}
.page2 .box {
width: 9.2rem;
height: 17.14667rem;
background: url(../images/page2Bg.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto 0.48rem;
overflow: hidden;
position: relative;
}
.page2 .box .listTab {
width: 7.38667rem;
height: 1.17333rem;
line-height: 1.17333rem;
border-radius: 1.17333rem;
display: flex;
justify-content: space-between;
margin: 0.58667rem auto 2.06667rem;
background: #fff;
}
.page2 .box .listTab div {
width: 3.72rem;
color: #BB4A56;
font-size: 0.4rem;
font-weight: 500;
text-align: center;
}
.page2 .box .listTab .listTab1 {
background: url(../images/listTab1.png) no-repeat;
background-size: 100% 100%;
color: transparent;
}
.page2 .box .listTab .listTab2 {
background: url(../images/listTab2.png) no-repeat;
background-size: 100% 100%;
color: transparent;
}
.page2 .box .topBox {
position: relative;
width: 8.26667rem;
height: 5.33333rem;
margin: 0 auto -0.8rem;
}
.page2 .box .topBox .top1 {
width: 2.54667rem;
height: 2.78667rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -1.25333rem;
}
.page2 .box .topBox .top1 .ts {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.page2 .box .topBox .top1 .tx {
width: 2.25333rem;
height: 2.18667rem;
position: absolute;
top: 0.05333rem;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.page2 .box .topBox .top1 .name {
width: 100%;
height: 1.12rem;
line-height: 1.12rem;
text-align: center;
color: #FFFFFF;
font-size: 0.32rem;
font-weight: 400;
background: url(../images/name1.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: 2.66667rem;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.page2 .box .topBox .top1 .score {
width: 100%;
text-align: center;
color: #AD4868;
font-size: 0.29333rem;
font-weight: 400;
position: absolute;
left: 0;
top: 3.9rem;
}
.page2 .box .topBox .top2 {
width: 2.09333rem;
height: 2.28rem;
position: absolute;
left: 0.33333rem;
top: -0.37333rem;
}
.page2 .box .topBox .top2 .ts {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.page2 .box .topBox .top2 .tx {
width: 1.8rem;
height: 1.76rem;
position: absolute;
top: 0.05333rem;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.page2 .box .topBox .top2 .name {
width: 100%;
height: 1.12rem;
line-height: 1.12rem;
text-align: center;
color: #FFFFFF;
font-size: 0.32rem;
font-weight: 400;
background: url(../images/name2.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: 2.26667rem;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.page2 .box .topBox .top2 .score {
width: 100%;
text-align: center;
color: #AD4868;
font-size: 0.29333rem;
font-weight: 400;
position: absolute;
left: 0;
top: 3.5rem;
}
.page2 .box .topBox .top3 {
width: 2.09333rem;
height: 2.28rem;
position: absolute;
right: 0.33333rem;
top: -0.37333rem;
}
.page2 .box .topBox .top3 .ts {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.page2 .box .topBox .top3 .tx {
width: 1.8rem;
height: 1.76rem;
position: absolute;
top: 0.05333rem;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.page2 .box .topBox .top3 .name {
width: 100%;
height: 1.12rem;
line-height: 1.12rem;
text-align: center;
color: #FFFFFF;
font-size: 0.32rem;
font-weight: 400;
background: url(../images/name3.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: 2.26667rem;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.page2 .box .topBox .top3 .score {
width: 100%;
text-align: center;
color: #AD4868;
font-size: 0.29333rem;
font-weight: 400;
position: absolute;
left: 0;
top: 3.5rem;
}
.page2 .box ul {
width: 8.56rem;
margin: 0 auto 1.84rem;
overflow-y: scroll;
height: 6.6rem;
}
.page2 .box ul::-webkit-scrollbar {
display: none;
}
.page2 .box ul li {
width: 100%;
height: 1.6rem;
line-height: 1.6rem;
margin-bottom: 0.2rem;
background: #FFF7F9;
border-radius: 0.16rem;
}
.page2 .box ul li .num {
width: 0.8rem;
height: 100%;
text-align: center;
color: #AD4868;
font-size: 0.48rem;
font-weight: bold;
float: left;
margin-right: 0.29333rem;
}
.page2 .box ul li .tx {
width: 1.09333rem;
height: 1.09333rem;
box-sizing: border-box;
border: 0.01333rem solid #FE71B8;
float: left;
margin-top: 0.25333rem;
margin-right: 0.22667rem;
border-radius: 50%;
}
.page2 .box ul li .name {
width: 2.06667rem;
height: 100%;
color: #AD4868;
font-size: 0.34667rem;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
}
.page2 .box ul li .score {
float: right;
color: #AD4868;
font-size: 0.29333rem;
font-weight: 400;
margin-right: 0.37333rem;
}
.page2 .box .my {
position: absolute;
width: 100%;
height: 1.84rem;
line-height: 1.84rem;
bottom: 0;
left: 0;
background: url(../images/my.png) no-repeat;
background-size: 100% 100%;
overflow: hidden;
}
.page2 .box .my .num {
width: 0.8rem;
height: 100%;
text-align: center;
color: #AD4868;
font-size: 0.26667rem;
font-weight: 400;
float: left;
margin-right: 0.29333rem;
margin-left: 0.32rem;
}
.page2 .box .my .tx {
width: 1.09333rem;
height: 1.09333rem;
box-sizing: border-box;
border: 0.01333rem solid #FE71B8;
float: left;
margin-top: 0.38667rem;
margin-right: 0.22667rem;
border-radius: 50%;
}
.page2 .box .my .name {
width: 2.06667rem;
height: 100%;
color: #AD4868;
font-size: 0.34667rem;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
}
.page2 .box .my .score {
float: right;
color: #AD4868;
font-size: 0.29333rem;
font-weight: 400;
margin-right: 0.37333rem;
}
.bootom {
margin-bottom: 0.26667rem;
}
.bootom p {
width: 100%;
text-align: center;
color: #7E0033;
font-size: 0.32rem;
font-weight: 400;
margin-bottom: 0.2rem;
}
.rule {
display: none;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99;
}
.rule .rule_in {
width: 8.18667rem;
height: 13.53333rem;
background: url(../images/rule_bg.png) no-repeat;
background-size: 100% 100%;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
.rule .rule_in .tabRule {
width: 6.50667rem;
height: 1.01333rem;
line-height: 1.01333rem;
display: flex;
justify-content: space-between;
border-radius: 0.64rem;
background: #fff;
margin: 0.6rem auto 0.25333rem;
}
.rule .rule_in .tabRule div {
text-align: center;
color: #CA5987;
font-size: 0.37333rem;
font-weight: 500;
width: 3.25333rem;
}
.rule .rule_in .tabRule .act {
background: url(../images/rule_act.png) no-repeat;
background-size: 100% 100%;
color: #fff;
}
.rule .rule_in .box1 {
width: 7.34667rem;
height: 11.4rem;
overflow-y: scroll;
margin: 0 auto;
}
.rule .rule_in .box1::-webkit-scrollbar {
display: none;
}
.rule .rule_in .box1 img {
display: block;
width: 7.25333rem;
}
.rule .rule_in .box2 {
display: none;
}
.rule .rule_in .box2 .box2Tab {
width: 4.74667rem;
height: 0.8rem;
margin: 0 auto 0.26667rem;
display: flex;
justify-content: space-between;
}
.rule .rule_in .box2 .box2Tab div {
width: 2.34667rem;
}
.rule .rule_in .box2 .box2Tab .tab1 {
background: url(../images/box2tab1.png) no-repeat;
background-size: 100% 100%;
}
.rule .rule_in .box2 .box2Tab .tab2 {
background: url(../images/box2tab2.png) no-repeat;
background-size: 100% 100%;
}
.rule .rule_in .box2 .box2Tab .act1 {
background: url(../images/box2tabAct1.png) no-repeat;
background-size: 100% 100%;
}
.rule .rule_in .box2 .box2Tab .act2 {
background: url(../images/box2tabAct2.png) no-repeat;
background-size: 100% 100%;
}
.rule .rule_in .box2 .imgBox {
width: 7.52rem;
height: 10rem;
margin: 0 auto;
overflow-y: scroll;
}
.rule .rule_in .box2 .imgBox::-webkit-scrollbar {
display: none;
}
.rule .rule_in .box2 .imgBox img {
width: 100%;
display: block;
}

View File

@@ -0,0 +1,581 @@
@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
width: 100%;
background: linear-gradient(0deg, #FB88A9 0%, #FFBECE 61%);
}
// 返回按钮
.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);
}
}
.header {
width: px2rem(750);
height: px2rem(630);
position: relative;
margin: 0 auto 0;
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
.rule_icon {
width: px2rem(47);
height: px2rem(130);
position: absolute;
top: px2rem(193);
right: px2rem(0);
}
}
.tab {
width: px2rem(600);
height: px2rem(88);
line-height: px2rem(88);
margin: px2rem(8) auto px2rem(44);
background: #fff;
border-radius: px2rem(88);
display: flex;
justify-content: space-between;
div {
color: #BB4A56;
font-size: px2rem(30);
text-align: center;
width: px2rem(300);
height: px2rem(88);
font-weight: 500;
}
.tab1 {
background: url(../images/tab1.png) no-repeat;
background-size: 100% 100%;
color: rgba(0, 0, 0, .0);
}
.tab2 {
background: url(../images/tab2.png) no-repeat;
background-size: 100% 100%;
color: rgba(0, 0, 0, .0);
}
}
.page1 {
// display: none;
.pageImg1 {
display: block;
width: px2rem(690);
height: px2rem(1544);
margin: 0 auto px2rem(26);
}
.pageImg2 {
display: block;
width: px2rem(690);
height: px2rem(1225);
margin: 0 auto px2rem(35);
}
}
.page2 {
display: none;
.box {
width: px2rem(690);
height: px2rem(1286);
background: url(../images/page2Bg.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto px2rem(36);
overflow: hidden;
position: relative;
.listTab {
width: px2rem(554);
height: px2rem(88);
line-height: px2rem(88);
border-radius: px2rem(88);
display: flex;
justify-content: space-between;
margin: px2rem(44) auto px2rem(155);
background: #fff;
div {
width: px2rem(279);
color: #BB4A56;
font-size: px2rem(30);
font-weight: 500;
text-align: center;
}
.listTab1 {
background: url(../images/listTab1.png) no-repeat;
background-size: 100% 100%;
color: rgba(0, 0, 0, .0);
}
.listTab2 {
background: url(../images/listTab2.png) no-repeat;
background-size: 100% 100%;
;
color: rgba(0, 0, 0, .0);
}
}
.topBox {
position: relative;
width: px2rem(620);
height: px2rem(400);
margin: 0 auto px2rem(-60);
.top1 {
width: px2rem(191);
height: px2rem(209);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(-94);
.ts {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.tx {
width: px2rem(169);
height: px2rem(164);
position: absolute;
top: px2rem(4);
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.name {
width: 100%;
height: px2rem(84);
line-height: px2rem(84);
text-align: center;
color: #FFFFFF;
font-size: px2rem(24);
font-weight: 400;
background: url(../images/name1.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: px2rem(200);
left: 50%;
transform: translateX(-50%);
//超出省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.score {
width: 100%;
text-align: center;
color: #AD4868;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
left: 0;
top: 3.9rem;
}
}
.top2 {
width: px2rem(157);
height: px2rem(171);
position: absolute;
left: px2rem(25);
top: px2rem(-28);
.ts {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.tx {
width: px2rem(135);
height: px2rem(132);
position: absolute;
top: px2rem(4);
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.name {
width: 100%;
height: px2rem(84);
line-height: px2rem(84);
text-align: center;
color: #FFFFFF;
font-size: px2rem(24);
font-weight: 400;
background: url(../images/name2.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: px2rem(170);
left: 50%;
transform: translateX(-50%);
//超出省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.score {
width: 100%;
text-align: center;
color: #AD4868;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
left: 0;
top: 3.5rem;
}
}
.top3 {
width: px2rem(157);
height: px2rem(171);
position: absolute;
right: px2rem(25);
top: px2rem(-28);
.ts {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.tx {
width: px2rem(135);
height: px2rem(132);
position: absolute;
top: px2rem(4);
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.name {
width: 100%;
height: px2rem(84);
line-height: px2rem(84);
text-align: center;
color: #FFFFFF;
font-size: px2rem(24);
font-weight: 400;
background: url(../images/name3.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: px2rem(170);
left: 50%;
transform: translateX(-50%);
//超出省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.score {
width: 100%;
text-align: center;
color: #AD4868;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
left: 0;
top: 3.5rem;
}
}
}
ul {
width: px2rem(642);
margin: 0 auto px2rem(138);
overflow-y: scroll;
height: 6.6rem;
&::-webkit-scrollbar {
display: none;
}
li {
width: 100%;
height: px2rem(120);
line-height: px2rem(120);
margin-bottom: px2rem(15);
background: #FFF7F9;
border-radius: px2rem(12);
.num {
width: px2rem(60);
height: 100%;
text-align: center;
color: #AD4868;
font-size: px2rem(36);
font-weight: bold;
float: left;
margin-right: px2rem(22);
}
.tx {
width: px2rem(82);
height: px2rem(82);
box-sizing: border-box;
border: px2rem(1) solid #FE71B8;
float: left;
margin-top: px2rem(19);
margin-right: px2rem(17);
border-radius: 50%;
}
.name {
width: px2rem(155);
height: 100%;
color: #AD4868;
font-size: px2rem(26);
font-weight: 500;
//超出省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
}
.score {
float: right;
color: #AD4868;
font-size: px2rem(22);
font-weight: 400;
margin-right: px2rem(28);
}
}
}
.my {
position: absolute;
width: 100%;
height: px2rem(138);
line-height: px2rem(138);
bottom: 0;
left: 0;
background: url(../images/my.png) no-repeat;
background-size: 100% 100%;
overflow: hidden;
.num {
width: px2rem(60);
height: 100%;
text-align: center;
color: #AD4868;
font-size: px2rem(20);
font-weight: 400;
float: left;
margin-right: px2rem(22);
margin-left: px2rem(24);
}
.tx {
width: px2rem(82);
height: px2rem(82);
box-sizing: border-box;
border: px2rem(1) solid #FE71B8;
float: left;
margin-top: px2rem(29);
margin-right: px2rem(17);
border-radius: 50%;
}
.name {
width: px2rem(155);
height: 100%;
color: #AD4868;
font-size: px2rem(26);
font-weight: 500;
//超出省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
}
.score {
float: right;
color: #AD4868;
font-size: px2rem(22);
font-weight: 400;
margin-right: px2rem(28);
}
}
}
}
.bootom {
margin-bottom: px2rem(20);
p {
width: 100%;
text-align: center;
color: #7E0033;
font-size: px2rem(24);
font-weight: 400;
margin-bottom: px2rem(15);
}
}
.rule {
display: none;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .8);
z-index: 99;
.rule_in {
width: px2rem(614);
height: px2rem(1015);
background: url(../images/rule_bg.png) no-repeat;
background-size: 100% 100%;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
.tabRule {
width: px2rem(488);
height: px2rem(76);
line-height: px2rem(76);
display: flex;
justify-content: space-between;
border-radius: px2rem(48);
background: #fff;
margin: px2rem(45) auto px2rem(19);
div {
text-align: center;
color: #CA5987;
font-size: px2rem(28);
font-weight: 500;
width: px2rem(244);
}
.act {
background: url(../images/rule_act.png) no-repeat;
background-size: 100% 100%;
color: #fff;
}
}
.box1 {
width: px2rem(551);
height: 11.4rem;
overflow-y: scroll;
margin: 0 auto;
// display: none;
&::-webkit-scrollbar {
display: none;
}
img {
display: block;
width: px2rem(544);
}
}
.box2 {
display: none;
.box2Tab {
width: px2rem(356);
height: px2rem(60);
margin: 0 auto px2rem(20);
display: flex;
justify-content: space-between;
div {
width: px2rem(176);
}
.tab1 {
background: url(../images/box2tab1.png) no-repeat;
background-size: 100% 100%;
}
.tab2 {
background: url(../images/box2tab2.png) no-repeat;
background-size: 100% 100%;
}
.act1 {
background: url(../images/box2tabAct1.png) no-repeat;
background-size: 100% 100%;
}
.act2 {
background: url(../images/box2tabAct2.png) no-repeat;
background-size: 100% 100%;
}
}
.imgBox {
width: px2rem(564);
height: 10rem;
margin: 0 auto;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
}
img {
width: 100%;
display: block;
}
}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 447 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 129 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 693 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 347 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 380 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

@@ -0,0 +1,112 @@
<!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">
<img src="./images/rule_icon.png" alt="" class="rule_icon">
</div>
<!-- tab -->
<div class="tab">
<div class="tab1">新春福利</div>
<div class="">新春榜單</div>
</div>
<!-- 頁面1 -->
<div class="page1">
<img src="./images/pageImg1.png" alt="" class="pageImg1">
<img src="./images/pageImg2.png" alt="" class="pageImg2">
</div>
<!-- 頁面2 -->
<div class="page2">
<div class="box">
<!-- 切換 -->
<div class="listTab">
<div class="listTab1">財氣榜</div>
<div class="">福氣榜</div>
</div>
<!-- 前三 -->
<div class="topBox">
<div class="top1">
<img src="./images/ts1.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="name">用戶昵稱</div>
<div class="score">財氣值: <b>0</b></div>
</div>
<div class="top2">
<img src="./images/ts2.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="name">用戶昵稱</div>
<div class="score">財氣值: <b>0</b></div>
</div>
<div class="top3">
<img src="./images/ts3.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="name">用戶昵稱</div>
<div class="score">財氣值: <b>0</b></div>
</div>
</div>
<!-- 非前三 -->
<ul>
<li>
<div class="num">4</div>
<img src="./images/logo.png" alt="" class="tx">
<div class="name">用戶昵稱</div>
<div class="score">財氣值999999999</div>
</li>
</ul>
<div class="my">
<div class="num">未上榜</div>
<img src="./images/logo.png" alt="" class="tx">
<div class="name">用戶昵稱</div>
<div class="score">財氣值999999999</div>
</div>
</div>
</div>
<!-- 免責宣告 -->
<div class="bootom">
<p>本活動最終解釋權歸官方所有</p>
<p>本活動以及獎勵與蘋果/Google公司無關</p>
</div>
<!-- 彈窗規則 -->
<div class="rule">
<div class="rule_in">
<div class="tabRule">
<div class="act">活動規則</div>
<div>活動獎勵</div>
</div>
<div class="box1">
<img src="./images/rule1.png" alt="">
</div>
<div class="box2">
<div class="box2Tab">
<div class="tab1 act1"></div>
<div class="tab2"></div>
</div>
<div class="imgBox">
<img src="./images/img1.png" alt="" srcset="">
</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/route-constant.js"></script>
<script src="./js/index.js"></script>

View File

@@ -0,0 +1,158 @@
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'
})
}
var rankType = 2;
// 初始化函數
$(function () {
getInfoFromClient()
setTimeout(function () {
// 頁面全屏
if (browser.app) {
if (browser.android) {
window.androidJsObj.initShowNav(false)
} else {
window.webkit.messageHandlers.initShowNav.postMessage(0)
}
};
// 頂部返回事件
$('.back').click(() => {
if (browser.android) {
window.androidJsObj.closeWebView()
} else {
window.webkit.messageHandlers.closeWebView.postMessage(null)
}
})
}, 100)
})
// 接口
function getRank () {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/act/special/gift/getRank',
data: { rankType: rankType, page: 1, pageSize: 30 },
success (res) {
if (res.code === 200) {
// 處理前三
var top3 = res.data.rankList.slice(0, 3);
var notTop3 = res.data.rankList.slice(3);
if (top3.length < 3) {
let arr = new Array(3 - top3.length).fill({
avatar: './images/logo.png',
nick: '虛位以待',
score: "0"
})
top3.push(...arr)
}
top3.forEach((res, index) => {
$(`.page2 .box .topBox .top${index + 1} .tx`).attr('src', res.avatar);
$(`.page2 .box .topBox .top${index + 1} .name`).text(res.nick);
$(`.page2 .box .topBox .top${index + 1} .score`).text(`${rankType == 2 ? "財氣值:" : "福氣值:"}${unitProcessing(res.score, 10000, 1, 'w')}`);
})
// 處理非前三
var str = '';
$('.page2 .box ul li').remove();
notTop3.forEach((res, i) => {
str += `
<li>
<div class="num">${res.ranking}</div>
<img src="${res.avatar}" alt="" class="tx">
<div class="name">${res.nick}</div>
<div class="score">${rankType == 2 ? "財氣值:" : "福氣值:"}${unitProcessing(res.score, 10000, 1, 'w')}</div>
</li>
`
})
$('.page2 .box ul').append(str);
// 處理自己
$('.page2 .box .my .tx').attr('src', res.data.meRank.avatar);
$('.page2 .box .my .num').text(res.data.meRank.ranking == 0 ? '未上榜' : res.data.meRank.ranking);
$('.page2 .box .my .name').text(res.data.meRank.nick);
$('.page2 .box .my .score').text(`${rankType == 2 ? "財氣值:" : "福氣值:"}${unitProcessing(res.data.meRank.score, 10000, 1, 'w')}`);
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網路錯誤,請退出重進')
}
})
}
// tab切換
$('.tab div').click(function () {
var i = $(this).index() + 1;
$('.page1,.page2').hide();
$(`.page${i}`).show();
$('.tab div').removeClass('tab1').removeClass('tab2');
$(this).addClass(`tab${i}`);
if (i == 2) {
getRank();
}
})
// 榜單切換
$('.page2 .box .listTab div').click(function () {
var i = $(this).index() + 1;
$('.page2 .box .listTab div').removeClass('listTab1').removeClass('listTab2');
$(this).addClass(`listTab${i}`);
if (i == 1) {
rankType = 2;
} else {
rankType = 4;
}
getRank()
})
// 規則切換
$('.rule .rule_in .tabRule div').click(function () {
var i = $(this).index() + 1;
$(this).addClass('act').siblings().removeClass('act');
$('.rule .rule_in .box1,.rule .rule_in .box2').hide();
$(`.rule .rule_in .box${i}`).show();
return false;
})
$('.rule .rule_in .box2 .box2Tab div').click(function () {
var i = $(this).index() + 1;
$('.rule .rule_in .box2 .box2Tab div').removeClass('act1').removeClass('act2')
$(this).addClass(`act${i}`);
$('.rule .rule_in .box2 .imgBox img').attr('src', `./images/img${i}.png`)
return false;
})
// 打開規則
$('.header .rule_icon').click(function () {
$('.rule').show();
bodyScroolFun(true);
})
// 關閉規則
$('.rule').click(function () {
$('.rule').hide();
bodyScroolFun(false);
return false;
})

View File

@@ -563,6 +563,9 @@ function getInfoFromClient () {
fontConvert(true);//调用字体转换函数
// }, 1000)
function fontConvert (fontConvertBool) {
if (window.location.pathname.match(/identity/)) {
return false;
}
function SconvertT () {//简体转换繁体
document.head.innerHTML = s2t(document.head.innerHTML);
document.body.innerHTML = s2t(document.body.innerHTML);
@@ -778,7 +781,7 @@ function networkRequest (reqObj = {}, type) {
if (browser.app) {
pubHeader.pub_ticket = pubInfo.ticket
} else {
pubHeader.h5_token =sessionStorage.getItem("ticket") ? sessionStorage.getItem("ticket") : '';
pubHeader.h5_token = sessionStorage.getItem("ticket") ? sessionStorage.getItem("ticket") : '';
}
const url = reqObj.url;
const commParams = objToParam(pubHeader);

7
view/peko/home/css/animate.css vendored Normal file

File diff suppressed because one or more lines are too long

View File

@@ -1,252 +1,676 @@
body,
html {
width: 100%;
height: 100%;
font-family: "Heiti SC", "Microsoft Sans Serif";
}
.container {
position: relative;
}
@media screen and (min-width: 769px) {
.m-bg {
.h5 {
display: none;
}
.m-bg img {
display: block;
body,
html {
width: 100%;
height: 100%;
background: linear-gradient(180deg, #302286 0%, #0E0B24 100%);
font-family: Avenir, Avenir;
cursor: pointer;
}
.homePc {
body .container,
html .container {
position: relative;
}
body .pc-bg,
html .pc-bg {
display: none;
}
body .homePc,
html .homePc {
width: 100%;
height: 10rem;
background: url(../images/homePc2.png) no-repeat;
background: url(../images/pcBgBig.png) no-repeat;
background-size: 100% 100%;
position: relative;
}
.homePc .charge {
width: 1.11rem;
body .homePc .diamound,
html .homePc .diamound {
width: 1.2rem;
height: 0.5rem;
line-height: 0.46667rem;
color: #FFFFFF;
font-size: 0.25rem;
text-align: center;
background: rgba(255, 255, 255, 0.2);
border-radius: .13rem;
font-size: 0.24rem;
color: #fff;
text-align: center;
line-height: 0.5rem;
border-radius: 0.53333rem;
box-sizing: border-box;
border: 1px solid #fff;
position: absolute;
top: 0.16rem;
right: 2.77rem;
right: 3.46667rem;
top: 0.3rem;
vertical-align: middle;
}
.homePc .googlePlay {
width: 2.2rem;
height: 0.7rem;
body .homePc .diamound img,
html .homePc .diamound img {
display: inline-block;
width: 0.33rem;
height: 0.33rem;
vertical-align: middle;
margin-top: -0.01rem;
}
body .homePc .pcIos,
html .homePc .pcIos {
width: 2.9rem;
height: 0.64rem;
position: absolute;
left: 2.4rem;
bottom: 3.4rem;
right: 5rem;
top: 5.855rem;
}
.homePc .appleStore {
width: 2.2rem;
height: 0.7rem;
body .homePc .pcAnd,
html .homePc .pcAnd {
width: 2.9rem;
height: 0.64rem;
position: absolute;
left: 2.4rem;
bottom: 2.5rem;
right: 5rem;
top: 6.79rem;
}
.homePc .apk {
width: 2.2rem;
height: 0.7rem;
position: absolute;
left: 2.4rem;
bottom: 1.6rem;
}
.eori {
body .bootom,
html .bootom {
width: 100%;
background: #30312C;
color: white;
padding: 0.2rem 0;
vertical-align: top;
}
.eori .gongsi {
display: flex;
justify-content: center;
position: fixed;
left: 0;
bottom: 0;
background: #0F0B27;
text-align: center;
color: #fff;
padding-bottom: 0.2rem;
padding-top: 0.1rem;
}
.eori .gongsi p {
font-size: 0.2rem;
}
.eori .gongsi p:nth-child(2) {
margin: 0 0.2rem;
body .bootom p,
html .bootom p {
margin-bottom: 0.1rem;
font-size: 0.15rem;
color: #B8B7BF;
}
}
@media screen and (max-width: 768px) {
body {
background-color: #0C0122;
}
.pc-bg {
.pc,
.homePc {
display: none;
}
.m-bg {
body,
html {
width: 100%;
height: 100%;
background: #0E0B24;
}
body .header,
html .header {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 1.2rem;
box-sizing: border-box;
padding: 0 0.53333rem;
margin: 0.26667rem auto 0;
z-index: 3;
}
body .header .line,
html .header .line {
width: 90%;
height: 0.02667rem;
background: #fff;
opacity: .3;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
}
body .header .logo,
html .header .logo {
display: block;
width: 0.85333rem;
height: 0.85333rem;
margin-right: 0.21333rem;
float: left;
}
.homeM {
width: 100%;
height: 14.89rem;
background: url(../images/homeM.png) no-repeat;
background-size: 100% 100%;
position: relative;
body .header .name,
html .header .name {
font-size: 0.46667rem;
color: #FFFFFF;
font-weight: 800;
float: left;
margin-top: 0.2rem;
}
.homeM .charge {
width: 1.11rem;
height: 0.5rem;
background: rgba(255, 255, 255, 0.2);
border-radius: .13rem;
font-size: 0.24rem;
body .header .diamound,
html .header .diamound {
width: 1.86667rem;
height: 0.74667rem;
line-height: 0.74667rem;
box-sizing: border-box;
border: 1px solid #fff;
vertical-align: middle;
color: #fff;
font-size: 0.32rem;
float: right;
margin-top: 0.05333rem;
margin-right: 0.42667rem;
text-align: center;
line-height: 0.5rem;
position: absolute;
top: 0.2rem;
right: 0.4rem;
border-radius: 0.74667rem;
}
.homeM .swiper {
body .header .diamound img,
html .header .diamound img {
vertical-align: middle;
width: 0.50667rem;
height: 0.42667rem;
display: inline-block;
margin-top: -0.1rem;
}
body .header .more,
html .header .more {
float: right;
width: 0.53333rem;
height: 0.53333rem;
display: block;
margin-top: 0.16rem;
}
body .h5,
html .h5 {
display: block;
width: 100%;
height: 8.6rem;
position: absolute;
top: 4.8rem;
height: 100%;
overflow: hidden;
}
.homeM .swiper .swiper-wrapper {
width: 60%;
height: 100%;
}
.homeM .swiper .swiper-wrapper .swiper-slide img {
body .h5 .pagesBox,
html .h5 .pagesBox {
width: 100%;
height: 100%;
transition: all .5s;
transform: translateY(0%);
}
.homeM .swiper .swiper-wrapper .swiper-slide-prev {
body .h5 .pagesBox .page1,
html .h5 .pagesBox .page1 {
width: 100%;
height: 90%;
margin-top: 0.6rem;
height: 100%;
position: relative;
overflow: hidden;
background: url(../images/h51.png) no-repeat center;
background-size: 10rem 100%;
}
.homeM .swiper .swiper-wrapper .swiper-slide-next {
width: 100%;
height: 90%;
margin-top: 0.6rem;
}
.homeM .logo {
body .h5 .pagesBox .page1 .pageTxte1,
html .h5 .pagesBox .page1 .pageTxte1 {
width: 6.42667rem;
height: 1.33333rem;
position: absolute;
bottom: 0.6rem;
left: 0;
width: 100%;
display: flex;
justify-content: space-evenly;
left: 1.44rem;
top: 5.01333rem;
}
.homeM .logo img {
width: 2.2rem;
height: 0.7rem;
}
.button-wrapper {
display: block;
body .h5 .pagesBox .page1 .pageTxte2,
html .h5 .pagesBox .page1 .pageTxte2 {
width: 6.42667rem;
height: 1.33333rem;
position: absolute;
left: 1.28rem;
top: 17.52rem;
width: 7.46667rem;
right: 1.44rem;
top: 6.77333rem;
}
body .h5 .pagesBox .page1 .downioad,
html .h5 .pagesBox .page1 .downioad {
width: 4.98667rem;
height: 1.22667rem;
}
.button-wrapper a {
display: inline-block;
width: 100%;
height: 100%;
}
.button2-wrapper {
display: block;
position: absolute;
left: 3.09333rem;
bottom: 1.70667rem;
width: 4rem;
height: 0.8rem;
background: rgba(255, 255, 255, 0);
left: 50%;
transform: translateX(-50%);
bottom: 2.96rem;
display: block;
}
.button2-wrapper a {
display: inline-block;
body .h5 .pagesBox .page1 .down,
html .h5 .pagesBox .page1 .down {
width: 0.50667rem;
height: 0.37333rem;
position: absolute;
left: 48%;
bottom: 0.26667rem;
}
body .h5 .pagesBox .page2,
html .h5 .pagesBox .page2 {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.m-button {
body .h5 .pagesBox .page2 .pageText2,
html .h5 .pagesBox .page2 .pageText2 {
width: 10rem;
height: 10.85333rem;
position: relative;
top: 3.44rem;
margin: 0 auto;
display: block;
display: none;
}
body .h5 .pagesBox .page2 .page2_in,
html .h5 .pagesBox .page2 .page2_in {
width: 10rem;
height: 11.65333rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 2.50667rem;
}
body .h5 .pagesBox .page2 .pagetx1,
html .h5 .pagesBox .page2 .pagetx1 {
width: 6.34667rem;
height: 4.10667rem;
position: absolute;
left: 3.12rem;
top: 4.56rem;
}
body .h5 .pagesBox .page2 .pagetx2,
html .h5 .pagesBox .page2 .pagetx2 {
width: 6.34667rem;
height: 4.10667rem;
position: absolute;
left: 0.53333rem;
top: 9.17333rem;
}
body .h5 .pagesBox .page2 .downioad,
html .h5 .pagesBox .page2 .downioad {
width: 4.98667rem;
height: 1.12rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.66667rem;
display: block;
}
.text-wrapper {
padding-left: 0;
width: 90%;
margin-left: -45%;
padding-top: 108px;
}
.text-wrapper .text .txt1 {
margin-bottom: 10px;
}
.text-wrapper .text1,
.text-wrapper p {
text-align: center;
}
.eori {
width: 100%;
background: #30312C;
color: white;
padding: 0.2rem 0;
}
.eori .recordfoot {
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.eori .recordfoot .record {
display: inline-block;
padding-right: 0.05333rem;
body .h5 .pagesBox .page2 .down,
html .h5 .pagesBox .page2 .down {
width: 0.50667rem;
height: 0.37333rem;
width: 0.42667rem;
background: url(../images/icon_police.png) no-repeat;
position: absolute;
left: 48%;
bottom: 0.26667rem;
}
.eori .gongsi {
body .h5 .pagesBox .page3,
html .h5 .pagesBox .page3 {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
body .h5 .pagesBox .page3 .pageText3,
html .h5 .pagesBox .page3 .pageText3 {
width: 6.82667rem;
height: 1.52rem;
position: relative;
display: block;
margin: 0 auto;
top: 2.8rem;
display: none;
}
body .h5 .pagesBox .page3 .page3_in,
html .h5 .pagesBox .page3 .page3_in {
width: 10rem;
height: 11.65333rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 2.50667rem;
}
body .h5 .pagesBox .page3 .page3Icon1,
html .h5 .pagesBox .page3 .page3Icon1 {
width: 4.09333rem;
height: 2.93333rem;
position: absolute;
left: 5.68rem;
top: 5.65333rem;
}
body .h5 .pagesBox .page3 .page3Icon2,
html .h5 .pagesBox .page3 .page3Icon2 {
width: 4.32rem;
height: 3.09333rem;
position: absolute;
left: 0rem;
top: 4.85333rem;
}
body .h5 .pagesBox .page3 .page3Icon3,
html .h5 .pagesBox .page3 .page3Icon3 {
width: 4.32rem;
height: 3.09333rem;
position: absolute;
right: 0rem;
top: 10rem;
}
body .h5 .pagesBox .page3 .page3Icon4,
html .h5 .pagesBox .page3 .page3Icon4 {
width: 3.78667rem;
height: 2.72rem;
position: absolute;
left: 0rem;
top: 11.14667rem;
}
body .h5 .pagesBox .page3 .downioad,
html .h5 .pagesBox .page3 .downioad {
width: 4.98667rem;
height: 1.12rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.66667rem;
display: block;
}
body .h5 .pagesBox .page3 .down,
html .h5 .pagesBox .page3 .down {
width: 0.50667rem;
height: 0.37333rem;
position: absolute;
left: 48%;
bottom: 0.26667rem;
}
body .h5 .pagesBox .page4,
html .h5 .pagesBox .page4 {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
body .h5 .pagesBox .page4 .pageText4,
html .h5 .pagesBox .page4 .pageText4 {
width: 6.4rem;
height: 1.52rem;
position: relative;
top: 2.8rem;
display: block;
margin: 0 auto;
display: none;
}
body .h5 .pagesBox .page4 .page4_in,
html .h5 .pagesBox .page4 .page4_in {
width: 10rem;
height: 11.65333rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 2.50667rem;
}
body .h5 .pagesBox .page4 .page4Icon1,
html .h5 .pagesBox .page4 .page4Icon1 {
width: 5.57333rem;
height: 5.12rem;
position: absolute;
left: 0rem;
top: 5.12rem;
}
body .h5 .pagesBox .page4 .page4Icon2,
html .h5 .pagesBox .page4 .page4Icon2 {
width: 5.57333rem;
height: 5.12rem;
position: absolute;
right: 0rem;
top: 8.58667rem;
}
body .h5 .pagesBox .page4 .downioad,
html .h5 .pagesBox .page4 .downioad {
width: 4.98667rem;
height: 1.12rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.66667rem;
display: block;
}
body .h5 .pagesBox .page4 .down,
html .h5 .pagesBox .page4 .down {
width: 0.50667rem;
height: 0.37333rem;
position: absolute;
left: 48%;
bottom: 0.26667rem;
}
body .h5 .pagesBox .page5,
html .h5 .pagesBox .page5 {
width: 100%;
height: 100%;
background: url(../images/h55.png) no-repeat center;
background-size: 100% 17.92rem;
position: relative;
overflow: hidden;
}
body .h5 .pagesBox .page5 .pageTxte5,
html .h5 .pagesBox .page5 .pageTxte5 {
width: 6.61333rem;
height: 4.42667rem;
position: relative;
top: 3.41333rem;
display: block;
margin: 0 auto;
}
body .h5 .pagesBox .page5 .contactUs,
html .h5 .pagesBox .page5 .contactUs {
width: 3.62667rem;
height: 1.22667rem;
position: absolute;
display: block;
margin: 0 auto;
left: 50%;
transform: translateX(-50%);
bottom: 5.14667rem;
}
body .h5 .pagesBox .page5 .bootom,
html .h5 .pagesBox .page5 .bootom {
width: 100%;
position: absolute;
bottom: 0.32rem;
left: 0;
text-align: center;
color: #B4B4BA;
font-size: 0.32rem;
}
.eori .gongsi p {
line-height: 1.3;
font-size: 0.2rem;
body .h5 .pagesBox .page5 .bootom p,
html .h5 .pagesBox .page5 .bootom p {
margin-bottom: 0.10667rem;
}
.eori .gongsi p:nth-child(2) {
margin: 0;
body .h5 .pagesBox .page5 .downioad,
html .h5 .pagesBox .page5 .downioad {
width: 4.98667rem;
height: 1.22667rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 2.96rem;
display: block;
}
.eori .tit {
height: 1.6rem;
line-height: 1.6rem;
body .h5 .pagesBox .page5 .down,
html .h5 .pagesBox .page5 .down {
width: 0.50667rem;
height: 0.37333rem;
position: absolute;
left: 48%;
bottom: 0.26667rem;
}
body .h5 .menu,
html .h5 .menu {
width: 100%;
height: 0%;
background: #0E0B24;
position: fixed;
transition: all .2s;
left: 0;
top: 0;
overflow: hidden;
}
body .h5 .menu .top,
html .h5 .menu .top {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1.2rem;
box-sizing: border-box;
padding: 0 0.53333rem;
margin: 0.26667rem auto 0;
z-index: 3;
top: 0;
left: 50%;
transform: translateX(-50%);
}
body .h5 .menu .top .line,
html .h5 .menu .top .line {
width: 90%;
height: 0.02667rem;
background: #fff;
opacity: .3;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
}
body .h5 .menu .top .logo,
html .h5 .menu .top .logo {
display: block;
width: 0.85333rem;
height: 0.85333rem;
margin-right: 0.21333rem;
float: left;
}
body .h5 .menu .top .name,
html .h5 .menu .top .name {
font-size: 0.46667rem;
color: #FFFFFF;
font-weight: 800;
float: left;
margin-top: 0.2rem;
}
body .h5 .menu .top .diamound,
html .h5 .menu .top .diamound {
width: 1.86667rem;
height: 0.74667rem;
line-height: 0.74667rem;
box-sizing: border-box;
border: 1px solid #fff;
vertical-align: middle;
color: #fff;
font-size: 0.32rem;
float: right;
margin-top: 0.05333rem;
margin-right: 0.42667rem;
text-align: center;
font-size: 20px;
border-radius: 0.74667rem;
}
body .h5 .menu .top .diamound img,
html .h5 .menu .top .diamound img {
vertical-align: middle;
width: 0.50667rem;
height: 0.42667rem;
display: inline-block;
margin-top: -0.1rem;
}
body .h5 .menu .top .close,
html .h5 .menu .top .close {
float: right;
width: 0.53333rem;
height: 0.53333rem;
display: block;
margin-top: 0.16rem;
}
body .h5 .menu ul,
html .h5 .menu ul {
width: 100%;
height: 1.2rem;
box-sizing: border-box;
padding: 0 0.53333rem;
margin: 1.6rem auto 0;
}
body .h5 .menu ul li,
html .h5 .menu ul li {
width: 100%;
height: 1.54667rem;
line-height: 1.54667rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
display: flex;
justify-content: space-between;
}
body .h5 .menu ul li span,
html .h5 .menu ul li span {
color: #FFFFFF;
font-size: 0.42667rem;
}
body .h5 .menu ul li img,
html .h5 .menu ul li img {
width: 0.42667rem;
height: 0.42667rem;
display: block;
margin-top: 0.58667rem;
}
body .contactUs_pub,
html .contactUs_pub {
position: fixed;
z-index: 99;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: none;
}
body .contactUs_pub .contactUs_pub_in,
html .contactUs_pub .contactUs_pub_in {
width: 7.8rem;
height: 6.4rem;
left: 50%;
top: 50%;
position: relative;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 0.42667rem;
overflow: hidden;
}
body .contactUs_pub .contactUs_pub_in .sClose,
html .contactUs_pub .contactUs_pub_in .sClose {
width: 0.42667rem;
height: 0.42667rem;
position: absolute;
right: 0.42667rem;
top: 0.34667rem;
}
body .contactUs_pub .contactUs_pub_in .title,
html .contactUs_pub .contactUs_pub_in .title {
text-align: center;
width: 100%;
margin-top: 0.48rem;
margin-bottom: 0.21333rem;
color: #1F1B4F;
font-size: 0.42667rem;
font-weight: 600;
}
body .contactUs_pub .contactUs_pub_in ul,
html .contactUs_pub .contactUs_pub_in ul {
width: 7.2rem;
margin: 0 auto 0;
}
body .contactUs_pub .contactUs_pub_in ul li,
html .contactUs_pub .contactUs_pub_in ul li {
width: 100%;
height: 1.49333rem;
line-height: 1.49333rem;
border-bottom: 0.02667rem solid #EBECF0;
}
body .contactUs_pub .contactUs_pub_in ul li img,
html .contactUs_pub .contactUs_pub_in ul li img {
display: block;
width: 0.64rem;
height: 0.64rem;
float: left;
margin-top: 0.42667rem;
margin-right: 0.58667rem;
}
body .contactUs_pub .contactUs_pub_in ul li span,
html .contactUs_pub .contactUs_pub_in ul li span {
display: block;
float: left;
height: 100%;
color: #1F1B4F;
font-size: 0.37333rem;
font-weight: 500;
}
body .contactUs_pub .contactUs_pub_in ul li span b,
html .contactUs_pub .contactUs_pub_in ul li span b {
color: #1F1B4F;
font-weight: bold;
}
}
.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;
}
.tips {
display: none;
position: fixed;
top: 0;
right: 0.26667rem;
width: 6.13333rem;
z-index: 9;
}

File diff suppressed because it is too large Load Diff

Binary file not shown.

Before

Width:  |  Height:  |  Size: 954 B

After

Width:  |  Height:  |  Size: 403 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 501 B

Some files were not shown because too many files have changed in this diff Show More