Compare commits

..

73 Commits

Author SHA1 Message Date
dragon
98e98b8d0a 输出日志 2024-04-03 14:42:33 +08:00
dragon
6674cd5d19 输出入职 2024-04-03 14:38:29 +08:00
wanglong
3d755e72c2 修改贵族规则,新增规则账单 2024-04-01 18:11:28 +08:00
Dragon
9872bbde1e 厨房音效暂存 2024-03-29 15:39:51 +08:00
Dragon
63dfd178b8 新增标头信息 2024-03-29 14:55:12 +08:00
Dragon
1d5a2afcb1 优化名字 2024-03-28 10:58:23 +08:00
Dragon
d61d352a6b 优化房间帮ui 2024-03-28 10:17:47 +08:00
Dragon
b7848b6b46 替换ui优化首页魔盒任务 2024-03-27 14:42:23 +08:00
Dragon
260a862cd0 修复bug 2024-03-26 20:48:55 +08:00
Dragon
db4564f660 新增未直播跳转房间逻辑 2024-03-26 18:22:14 +08:00
Dragon
e43bb067f4 修改倒计时判断内容 2024-03-26 17:21:45 +08:00
Dragon
303c1a8d9c 修复房间列表报错问题 2024-03-26 15:45:22 +08:00
Dragon
8b32164c0d 繁体化 2024-03-26 15:25:48 +08:00
Dragon
34a9af2269 新增未开始倒计时判断 2024-03-26 15:25:47 +08:00
Dragon
fd8bde036a 新增图片 2024-03-25 19:04:12 +08:00
Dragon
68a7047088 新增幸运礼物账单 2024-03-25 15:34:41 +08:00
Dragon
c968a1474c 完成愚人节活动 2024-03-25 15:27:47 +08:00
Dragon
6488013cdb 首页暂存 2024-03-25 15:27:47 +08:00
Dragon
2f6504eb6c 暂存 2024-03-25 15:27:46 +08:00
Dragon
8f2f7844c6 ios专用mobling 2024-03-20 16:27:14 +08:00
Dragon
abc10de889 修改ios跳转逻辑 2024-03-20 14:09:41 +08:00
Dragon
e15b444529 新增ios跳转 2024-03-20 11:16:46 +08:00
Dragon
abfd45dff3 新增账单;修改分享标题 2024-03-19 18:37:21 +08:00
Dragon
7ac90ab207 修复bug 2024-03-18 16:05:51 +08:00
Dragon
adb0d95b02 新增邀请活动 2024-03-18 11:13:37 +08:00
Dragon
efb6649c23 修改规则 2024-03-12 11:25:21 +08:00
Dragon
36e00a2193 新增白色情人节 2024-03-11 17:54:05 +08:00
Dragon
b1261cf787 新增白色情人节文件暂存 2024-03-11 10:26:47 +08:00
Dragon
17b91c9cc5 清除缓存 2024-03-08 18:04:53 +08:00
Dragon
99f27fc1d7 修复排行榜异常 2024-03-08 18:01:34 +08:00
Dragon
c431b9aabf 修复记录背景异常 2024-03-08 16:45:44 +08:00
Dragon
00c8f39c48 新增疯狂动物园 2024-03-08 15:21:20 +08:00
Dragon
309dc6097a 替换决赛图片 2024-03-05 20:20:39 +08:00
Dragon
ec732f0c75 清除缓存 2024-03-04 20:57:08 +08:00
Dragon
cfab5b8cc9 替换桌球榜单 2024-03-04 20:48:39 +08:00
Dragon
4453a09a92 修复榜单异常 2024-03-04 15:16:02 +08:00
Dragon
a033d971cb 修复bug 2024-03-04 14:44:11 +08:00
Dragon
a378783cdc 新增女神节榜单 2024-03-04 11:46:11 +08:00
Dragon
696286103e 替换页面三图片 2024-03-03 21:14:18 +08:00
Dragon
f4e0dcc71c 替换图片 2024-03-03 17:07:16 +08:00
Dragon
a288347760 替换图片 2024-03-02 13:38:07 +08:00
Dragon
41bb7136ab 替换ui图 2024-02-28 19:57:48 +08:00
Dragon
a57dd223a8 新增争霸赛 2024-02-28 19:57:47 +08:00
Dragon
c83c6e0240 优化许愿之星刷新问题 2024-02-28 18:12:07 +08:00
Dragon
abf5178c62 繁体化 2024-02-27 22:31:33 +08:00
Dragon
5fce805f9b 修复分页bug 2024-02-27 22:14:55 +08:00
Dragon
e533052973 修复bug 2024-02-27 20:16:07 +08:00
Dragon
e3f6712622 完善许愿之星 2024-02-27 10:16:03 +08:00
Dragon
09d94a22ee 新增刷新按钮 2024-02-26 14:33:20 +08:00
Dragon
81d1f8e918 新增许愿之星 2024-02-26 14:33:19 +08:00
Dragon
62b59ca91a 许愿之星暂存 2024-02-26 14:33:18 +08:00
Dragon
92c9774b18 新增接口超时问题 2024-02-26 14:32:32 +08:00
Dragon
8722c6584b 优化充值等待中 2024-02-23 12:33:14 +08:00
Dragon
dd3d0ae151 修复下注异常问题 2024-02-22 21:57:28 +08:00
Dragon
5f45fdcbf0 清除缓存 2024-02-22 21:23:51 +08:00
Dragon
9f468451fe 修复bug 2024-02-22 16:09:23 +08:00
Dragon
bb0acd6a57 补齐动效 2024-02-21 11:54:21 +08:00
Dragon
8b473fa5c8 修复展示异常问题 2024-02-21 10:16:27 +08:00
Dragon
ed12c0936d 新增繁体图片 2024-02-20 19:23:23 +08:00
Dragon
0c852bad5e 完成繁体化 2024-02-20 19:23:21 +08:00
Dragon
8a32d8e076 暂存 2024-02-20 19:23:20 +08:00
Dragon
44a39d96d9 守护星球再次暂存 2024-02-20 19:23:18 +08:00
Dragon
8c5e933052 守护星球暂存 2024-02-20 19:23:18 +08:00
Dragon
f15768be4e 修复分享下载页报错问题 2024-02-20 19:22:25 +08:00
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
519 changed files with 27498 additions and 1881 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: 232 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 252 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 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.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 455 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 248 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 299 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 202 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 234 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 341 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 356 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 198 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 248 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 414 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 945 B

View File

@@ -0,0 +1,269 @@
<!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?v=1.0">
</head>
<body>
<!-- 頂部返回 -->
<div class="back">
<img src="./images/travel/back.png" alt="">
</div>
<!-- 頭部 -->
<div class="header">
<!-- 限定禮物 -->
<img src="./images/qualifyGift_icon.png" alt="" class="qualifyGift_icon">
<!-- 活動規則 -->
<img src="./images/rule_icon.png" alt="" class="rule_icon">
</div>
<!-- tab切換 -->
<div class="tabs">
<div class="tab1 act1"></div>
<div class="tab2"></div>
<div class="tab3"></div>
<div class="tab4"></div>
</div>
<!-- 頁面1 -->
<div class="page1">
<!-- 奇幻魔盒 -->
<div class="box1">
<img src="./images/pageBox1Rule_icon.png" alt="" class="pageBox1Rule_icon">
<div class="time">3分鐘倒計時: <span class="sp1">03</span><span class="sp2">00</span></div>
<div class="text">用戶在送出第一個奇幻魔盒後開啓3分鐘倒計時<br>在此期間內點亮所有禮物,可獲得<b>【愚人慶典】</b>禮物*1</div>
<div class="giftBoxs">
<!-- <div class="">
<img src="./images/pageBox1Gift1.png" alt="">
撲克士兵
</div>
<div>
<img src="./images/pageBox1Gift2.png" alt="">
咬咬鯊
</div>
<div>
<img src="./images/pageBox1Gift3.png" alt="">
兔子先生
</div>
<div>
<img src="./images/pageBox1Gift4.png" alt="">
甜心魔法
</div>
<div>
<img src="./images/pageBox1Gift5.png" alt="">
奇趣雜技
</div> -->
</div>
</div>
<!-- 奇幻榜 -->
<div class="box2">
<!-- 前三 -->
<div class="top3">
<div class="no1">
<img src="./images/page1Top1.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="nick">用戶昵稱</div>
<div class="score">奇幻值:0</div>
</div>
<div class="no2">
<img src="./images/page1Top2.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="nick">用戶昵稱</div>
<div class="score">奇幻值:0</div>
</div>
<div class="no3">
<img src="./images/page1Top3.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="nick">用戶昵稱</div>
<div class="score">奇幻值:0</div>
</div>
</div>
<!-- 非前三 -->
<ul>
<!-- <li>
<div class="num">1.</div>
<img src="./images/logo.png" alt="" class="tx">
<div class="nick">用戶昵稱</div>
<div class="score">奇幻值: 20</div>
</li> -->
</ul>
</div>
<!-- 自己榜單 -->
<div class="my">
<div class="num">1.</div>
<img src="./images/logo.png" alt="" class="tx">
<div class="nick">用戶昵稱</div>
<div class="score">奇幻值: 20</div>
</div>
</div>
<!-- 頁面2 -->
<div class="page2">
<!-- 更新 -->
<img src="./images/upDate.png" alt="" class="upDate">
<!-- 切換 -->
<div class="tab">
<div class="act1">牌照房間</div>
<div class="">個播房間</div>
</div>
<!-- 第一名房間 -->
<div class="topRoom">
<img src="./images/logo.png" alt="" class="tx">
<div class="roomName">房間昵稱</div>
<div class="score">房間進度值: <b>00.0%</b></div>
</div>
<!-- 第一名進度 -->
<div class="topLine">
<div></div>
<span>0/0</span>
</div>
<!-- 文案介紹 -->
<div class="text">房間進度值達到100%,即可開啓紅包雨</div>
<!-- 第一名房間跳轉 -->
<img src="./images/page2ToRoomBut.png" alt="" class="page2ToRoomBut">
<div class="page2NotTopTitle">其他房間推薦</div>
<!-- 其他房間 -->
<ul>
<li>
<img src="./images/logo.png" alt="" class="tx">
<div class="live">直播中</div>
<div class="roomName">房間昵稱</div>
<div class="score">房間進度值: <b>00.0%</b></div>
<div class="line_in">
<div></div>
<span>0/0</span>
</div>
<img src="./images/go.png" alt="" class="go">
<img src="./images/notGo.png" alt="" class="notGo">
</li>
</ul>
</div>
<!-- 頁面3 -->
<div class="page3"></div>
<!-- 頁面4 -->
<div class="page4 page41">
<!-- 切換 -->
<div class="page4_tab">
<div></div>
<div></div>
</div>
<!-- 日榜總榜切換 -->
<div class="dayTab">
<div class="act">日榜</div>
<div>總榜</div>
</div>
<!-- 日期切換 -->
<div class="timeTab">
<div class="act">3.27</div>
<div>3.27</div>
<div>3.27</div>
<div>3.27</div>
<div>3.27</div>
<div>3.27</div>
</div>
<!-- 前三 -->
<div class="top3">
<div class="no1">
<img src="./images/page1Top1.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="nick">用戶昵稱</div>
<div class="score">奇幻值:0</div>
</div>
<div class="no2">
<img src="./images/page1Top2.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="nick">用戶昵稱</div>
<div class="score">奇幻值:0</div>
</div>
<div class="no3">
<img src="./images/page1Top3.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="nick">用戶昵稱</div>
<div class="score">奇幻值:0</div>
</div>
</div>
<!-- 非前三 -->
<ul>
<li>
<div class="num">1.</div>
<img src="./images/logo.png" alt="" class="tx">
<div class="nick">用戶昵稱</div>
<div class="score">奇幻值: 20</div>
</li>
</ul>
<!-- 自己榜單 -->
<div class="my">
<div class="num">1.</div>
<img src="./images/logo.png" alt="" class="tx">
<div class="nick">用戶昵稱</div>
<div class="score">奇幻值: 20</div>
</div>
</div>
<!-- 魔盒說明 -->
<div class="MagicBoxRule">
<div class="MagicBoxRule_in MagicBoxRule1">
<!-- 切換 -->
<div class="tab">
<div></div>
<div></div>
</div>
<!-- 切換頁面1 -->
<img src="./images/MagicBoxRule1Bg.png" alt="" class="MagicBoxRulePage1">
<!-- 切換頁面2 -->
<div class="MagicBoxRulePage2">
<ul>
<li>
<div>
<p>2024/3/19</p>
<b>14:07:07</b>
</div>
<div class="centen">用戶昵稱</div>
<div class="right">
<p>獲得:禮物名稱</p>
<b>0 <img src="./images/diamond.png" alt=""></b>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 活動規則 -->
<div class="rule">
<div class="rule_in">
<div class="box">
<img src="./images/rule_in.png" alt="" srcset="">
</div>
</div>
</div>
<!-- 限定禮物規則 -->
<div class="limitedGift">
<div class="limitedGift_in">
<div class="box">
<img src="./images/limitedGift_in.png" alt="" srcset="">
</div>
</div>
</div>
</body>
</html>
</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,566 @@
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 page = 1;
var isLock = true;
var timeOut = null;
var countupTime = 0;
var XIAO_CHOU_ROOM = 'XIAO_CHOU_ROOM_1';
var rankType = 1; //排行榜類型1=送禮日榜2=送禮總榜3=收禮日榜4=收禮總榜);
var data = null;//默認日榜;
var type = 'a';//a:送禮b:收禮;
var type2 = 'a';//a:日榜b:總榜;
var curDate; //當天日期;
// 初始化函數
$(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)
}
})
getTime();
getRank();
}, 100)
})
// 獲取任務接口
function getTaskUser () {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/activity/task/user',
data: { componentCode: "QI_HUAN_MO_HE" },
success (res) {
if (res.code === 200) {
// 渲染愚人盛典禮物
$('.page1 .box1 .giftBoxs div').remove();
var str = '';
res.data[0].children.forEach((res, i) => {
var img = res.taskIcon.split("|");
str += `
<div class="${res.completed ? 'act' : ''}">
<img src = "${res.completed ? img[1] : img[0]}" alt = "" >
${res.taskName}
</div >
`
});
$('.page1 .box1 .giftBoxs').append(str);
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網路錯誤,請退出重進')
}
})
}
// 獲取倒計時接口
function getTime () {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/act/2024AprilFoolsDay/getTime',
data: { activityCode: "ACT_2024_APRIL_FOOLS_DAY", taskCode: "QI_HUAN_GIFT" },
success (res) {
if (res.code === 200) {
if (res.data) {
countupTime = res.data - res.timestamp;
countup();
}
getTaskUser();
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網路錯誤,請退出重進')
}
})
}
// 倒計時
function countup () {
clearTimeout(timeOut)
//獲取當前時間
var d = 0;
var h = 0;
var m = 0;
var s = 0;
//定義變量 d,h,m,s保存倒計時的時間
var d, h, m, s;
if (countupTime >= 0) {
d = getzf(Math.floor(countupTime / 1000 / 60 / 60 / 24));
h = getzf(Math.floor(countupTime / 1000 / 60 / 60 % 24));
m = getzf(Math.floor(countupTime / 1000 / 60 % 60));
s = getzf(Math.floor(countupTime / 1000 % 60));
//將倒計時賦值到div中
$('.page1 .box1 .time .sp1').text(m);
$('.page1 .box1 .time .sp2').text(s);
countupTime = countupTime - 1000;
//遞歸每秒調⽤countTime⽅法顯⽰動態時間效果
} else {
getTime();
return
}
timeOut = setTimeout(countup, 1000);
}
//補0操作
function getzf (num) {
if (parseInt(num) < 10) {
num = '0' + num;
}
return num;
}
// tab切換
$('.tabs div').click(function () {
var i = $(this).index() + 1;
$('.tabs div').removeClass('act1').removeClass('act2').removeClass('act3').removeClass('act4');
$(this).addClass(`act${i}`);
$('.page1,.page2,.page3,.page4').hide();
$(`.page${i}`).show();
if (i == 1) {
getRank();
} else if (i == 2) {
getRooms();
} else if (i == 4) {
giftGetRank(rankType, data);
}
})
// 更新房間接口按鈕
$('.page2 .upDate').click(function () {
getRooms();
})
// 獲取奇幻榜接口
function getRank () {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/act/2023Halloween/rank/getRank',
data: { rankType: 4, pageSize: 15, },
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, i) => {
$(`.page1 .box2 .top3 .no${i + 1} .tx`).attr('src', res.avatar);
$(`.page1 .box2 .top3 .no${i + 1} .nick`).text(res.nick);
$(`.page1 .box2 .top3 .no${i + 1} .score`).html('奇幻值<br>' + unitProcessing(res.score, 10000, 1, 'w'))
})
// 非前三
var str = '';
$('.page1 .box2 ul li').remove();
notTop3.forEach((res, i) => {
str += `
<li>
<div class="num">${res.ranking}.</div>
<img src="${res.avatar}" alt="" class="tx">
<div class="nick">${res.nick}</div>
<div class="score">奇幻值: ${unitProcessing(res.score, 10000, 1, 'w')}</div>
</li>
`
})
$('.page1 .box2 ul').append(str);
// 處理自己榜單
$('.page1 .my .num').text(res.data.meRank.ranking == 0 ? '未上榜' : res.data.meRank.ranking);
$('.page1 .my .tx').attr('src', res.data.meRank.avatar);
$('.page1 .my .nick').text(res.data.meRank.nick);
$('.page1 .my .score').text('奇幻值' + unitProcessing(res.data.meRank.score, 10000, 1, 'w'));
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網路錯誤,請退出重進')
}
})
}
// 頁面2切換
$('.page2 .tab div').click(function () {
var i = $(this).index() + 1;
$('.page2 .tab div').removeClass('act1').removeClass('act2');
$(this).addClass(`act${i}`);
XIAO_CHOU_ROOM = i == 1 ? 'XIAO_CHOU_ROOM_1' : 'XIAO_CHOU_ROOM_4';
getRooms();
})
// 獲取房間榜接口
function getRooms () {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/act/2024AprilFoolsDay/getRooms',
data: { activityCode: "ACT_2024_APRIL_FOOLS_DAY", taskCode: XIAO_CHOU_ROOM },
success (res) {
if (res.code === 200) {
var top = res.data.slice(0, 1);
if (top.length < 3) {
let arr = new Array(1 - top.length).fill({
roomAvatar: './images/logo.png',
roomTitle: '虛位以待',
percentage: 0,
activityValue: 0,
conditionValue: 0,
})
top.push(...arr)
}
console.log(top);
var notTop = res.data.slice(1);
// 第一房間
$('.page2 .topRoom .tx').attr('src', top[0].roomAvatar);
$('.page2 .topRoom .roomName').text(top[0].roomTitle);
$('.page2 .topRoom .score b').text(top[0].percentage + '%');
$('.page2 .topLine div').css('width', top[0].percentage + '%');
$('.page2 .topLine span').text(`${top[0].activityValue}/${top[0].conditionValue}`);
$('.page2 .page2ToRoomBut').attr("uid", top[0].roomUid);
$('.page2 .page2ToRoomBut').attr("src", top[0].isUnderway ? './images/page2ToRoomBut.png' : './images/page2ToRoomBut2.png');
$('.page2 .page2ToRoomBut').attr("isUnderway", top[0].isUnderway);
// 其他房間
$('.page2 ul li').remove();
var str = '';
notTop.forEach(res => {
str += `
<li>
<img src="${res.roomAvatar}" alt="" class="tx">
<div class="live" style="display:${res.isLive ? 'block' : 'none'}">直播中</div>
<div class="roomName">${res.roomTitle}</div>
<div class="score">房間進度值: <b>${res.percentage}%</b></div>
<div class="line_in">
<div style="width:${res.percentage}%"></div>
<span>${res.activityValue}/${res.conditionValue}</span>
</div>
<img style="display:${res.isUnderway ? 'block' : 'none'}" src="./images/go.png" alt="" class="go" uid=${res.roomUid}>
<img style="display:${!res.isUnderway ? 'block' : 'none'}" src="./images/notGo.png" alt="" class="notGo" uid=${res.roomUid}>
</li>
`
})
$('.page2 ul').append(str);
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網路錯誤,請退出重進')
}
})
}
// 房間最前面的跳轉按鈕
$('.page2 .page2ToRoomBut').click(function () {
var uid = $(this).attr('uid');
var isUnderway = $(this).attr('isUnderway');
if (isUnderway) {
if (browser.ios) {
window.webkit.messageHandlers.openRoom.postMessage(uid);
} else if (browser.android) {
if (androidJsObj && typeof androidJsObj === 'object') {
window.androidJsObj.openRoom(uid);
}
}
}
})
// 其他房間跳轉房間按鈕
$('.page2 ul').on('click', ' li .go', function () {
var uid = $(this).attr('uid');
if (browser.ios) {
window.webkit.messageHandlers.openRoom.postMessage(uid);
} else if (browser.android) {
if (androidJsObj && typeof androidJsObj === 'object') {
window.androidJsObj.openRoom(uid);
}
}
})
// 其他房間跳轉房間按鈕
$('.page2 ul').on('click', ' li .notGo', function () {
var uid = $(this).attr('uid');
if (browser.ios) {
window.webkit.messageHandlers.openRoom.postMessage(uid);
} else if (browser.android) {
if (androidJsObj && typeof androidJsObj === 'object') {
window.androidJsObj.openRoom(uid);
}
}
})
// 頁面4切換
$('.page4 .page4_tab div').click(function () {
var i = $(this).index() + 1;
$('.page4').removeClass('page41').removeClass('page42');
$('.page4').addClass(`page4${i}`);
if (i == 1) {
type = 'a';
rankType = type2 == "a" ? 1 : 2;
} else {
type = 'b';
rankType = type2 == "a" ? 3 : 4;
}
giftGetRank(rankType, data);
})
// 頁面4 日榜/總榜切換
$('.page4 .dayTab div').click(function () {
var i = $(this).index() + 1;
$(this).addClass('act').siblings().removeClass('act')
if (i == 1) {
type2 = 'a';
rankType = type == "a" ? 1 : 3;
$('.page4 .timeTab').show();
} else {
type2 = 'b';
rankType = type == "a" ? 2 : 4;
$('.page4 .timeTab').hide();
}
giftGetRank(rankType, data);
})
// 頁面4 日期切換
$('.page4 .timeTab div').click(function () {
var i = $(this).index() + 1;
var datas = $(this).attr('data');
$(this).addClass('act').siblings().removeClass('act')
rankType = type == "a" ? 1 : 3;//排行榜類型1=甜蜜日榜2=甜蜜總榜3=愛意日榜4=愛意總榜)
data = datas;
giftGetRank(rankType, data);
})
// 獲取愚人榜單接口
function giftGetRank (rankType, date) {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/act/special/gift/getRank',
data: { rankType, date, pageSize: 30 },
success (res) {
if (res.code === 200) {
// 設置當天日期
curDate = res.data.curDate;
// 處理日期
if (res.data.dateList) {
res.data.dateList.forEach((res, i) => {
$('.page4 .timeTab div').eq(i).text(`${res[5]}${res[6]}.${res[8]}${res[9]}`);
$('.page4 .timeTab div').eq(i).attr('data', res);
if (res == curDate && date == null) {
$('.page4 .timeTab div').removeClass('act')
$('.page4 .timeTab div').eq(i).addClass('act');
}
})
}
// 處理前三
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, i) => {
$(`.page4 .top3 .no${i + 1} .tx`).attr('src', res.avatar);
$(`.page4 .top3 .no${i + 1} .nick`).text(res.nick);
$(`.page4 .top3 .no${i + 1} .score`).html(`${rankType == 1 || rankType == 2 ? '愚樂值' : '娛樂值'}<br>` + unitProcessing(res.score, 10000, 1, 'w'))
})
// 非前三
var str = '';
$('.page4 ul li').remove();
notTop3.forEach((res, i) => {
str += `
<li>
<div class="num">${res.ranking}.</div>
<img src="${res.avatar}" alt="" class="tx">
<div class="nick">${res.nick}</div>
<div class="score">${rankType == 1 || rankType == 2 ? '愚樂值' : '娛樂值'}: ${unitProcessing(res.score, 10000, 1, 'w')}</div>
</li>
`
})
$('.page4 ul').append(str);
// 處理自己榜單
$('.page4 .my .num').text(res.data.meRank.ranking == 0 ? '未上榜' : res.data.meRank.ranking);
$('.page4 .my .tx').attr('src', res.data.meRank.avatar);
$('.page4 .my .nick').text(res.data.meRank.nick);
$('.page4 .my .score').text(`${rankType == 1 || rankType == 2 ? '愚樂值' : '娛樂值'}` + unitProcessing(res.data.meRank.score, 10000, 1, 'w'));
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網路錯誤,請退出重進')
}
})
}
// 魔盒切換
$('.MagicBoxRule .MagicBoxRule_in .tab div').click(function () {
var i = $(this).index() + 1;
$('.MagicBoxRule .MagicBoxRule_in').removeClass('MagicBoxRule1').removeClass('MagicBoxRule2');
$('.MagicBoxRule .MagicBoxRule_in').addClass(`MagicBoxRule${i}`);
$('.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage1,.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2').hide();
$(`.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage${i}`).show();
return false;
})
// 獲取魔盒接口
function getRecordPage () {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/activity/task/user/record/page',
data: {
componentCode: "QI_HUAN_MO_HE",
activityCode: 'ACT_2024_APRIL_FOOLS_DAY',
pageNum: page,
pageSize: 20,
},
success (res) {
if (res.code === 200) {
var str = ''
if (res.data.records.length == 0) {
str = `
<li class="not">暫無記錄</li>
`
isLock = false;
} else {
res.data.records.forEach(res => {
str += `
<li>
<div>
<p>${dateFormat(res.createTime, 'yyyy/MM/dd')}</p>
<b>${dateFormat(res.createTime, 'hh:mm:ss')}</b>
</div>
<div class="centen">${res.nick}</div>
<div class="right">
<p>獲得:${res.rewardName}</p>
<b>${res.showValue} <img src="./images/diamond.png" alt=""></b>
</div>
</li>
`
})
isLock = true;
}
$('.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul').append(str);
} else {
toastMsg(res.message)
isLock = true;
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網路錯誤,請退出重進')
isLock = true;
}
})
}
// 滾動
$('.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul').scroll(function () {
let scrollTop = $(this).scrollTop()
let scrollHeight = $('.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul')[0].scrollHeight
let ulHeight = $(this).innerHeight()
if (scrollTop + ulHeight + 100 >= scrollHeight) {
if (isLock) {
// 請求下一頁
page = page + 1;
getRecordPage();
isLock = false;
}
}
})
// 打開魔盒規則
$('.page1 .box1 .pageBox1Rule_icon').click(function () {
$('.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul li').remove();
getRecordPage();
$('.MagicBoxRule').show();
bodyScroolFun(true);
})
// 關閉魔盒規則
$('.MagicBoxRule').click(function () {
$('.MagicBoxRule').hide();
bodyScroolFun(false);
})
// 打開規則
$('.header .rule_icon').click(function () {
$('.rule').show();
bodyScroolFun(true);
})
// 關閉規則
$('.rule').click(function () {
$('.rule').hide();
bodyScroolFun(false);
})
// 打開限定禮物規則
$('.header .qualifyGift_icon').click(function () {
$('.limitedGift').show();
bodyScroolFun(true);
})
// 關閉限定禮物規則
$('.limitedGift').click(function () {
$('.limitedGift').hide();
bodyScroolFun(false);
})

View File

@@ -0,0 +1,498 @@
html,
body {
width: 100%;
background: #FBABAD;
}
.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: 14.56rem;
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
position: relative;
margin: 0 auto 0.24rem;
}
.header .rule_icon {
width: 1.14667rem;
height: 3.4rem;
position: absolute;
right: 0rem;
top: 6.25333rem;
}
.tabBox {
width: 7.66667rem;
height: 1.13333rem;
margin: 0 auto 0.22667rem;
display: flex;
justify-content: space-between;
}
.tabBox div {
width: 3.58667rem;
}
.tabBox .tab1 {
background: url(../images/tab1.png) no-repeat;
background-size: 100% 100%;
}
.tabBox .tab2 {
background: url(../images/tab2.png) no-repeat;
background-size: 100% 100%;
}
.tabBox .tabAct1 {
background: url(../images/tabAct1.png) no-repeat;
background-size: 100% 100%;
}
.tabBox .tabAct2 {
background: url(../images/tabAct2.png) no-repeat;
background-size: 100% 100%;
}
.page1 {
width: 9.44rem;
height: 18.6rem;
margin: 0 auto 0.34667rem;
background: url(../images/page1Bg.png) no-repeat;
background-size: 100% 100%;
}
.page2 {
display: none;
width: 9.44rem;
height: 18.42667rem;
background: url(../images/page2Bg.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto 2.06667rem;
overflow: hidden;
}
.page2 .tablist {
width: 4.90667rem;
height: 0.70667rem;
display: flex;
justify-content: space-between;
margin: 0.50667rem auto 0.93333rem;
background: url(../images/tabListBg.png) no-repeat;
background-size: 100% 100%;
}
.page2 .tablist div {
width: 2.45333rem;
height: 0.70667rem;
line-height: 0.70667rem;
color: #FFFFFF;
font-size: 0.38667rem;
font-weight: 500;
text-align: center;
}
.page2 .tablist .act {
background: url(../images/tabListAct.png) no-repeat;
background-size: 100% 100%;
}
.page2 .top3Box {
width: 8.33333rem;
height: 3.13333rem;
position: relative;
margin: 0 auto 0.33333rem;
}
.page2 .top3Box .no1 {
width: 2.73333rem;
height: 3.49333rem;
background: url(../images/no1Bg.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
}
.page2 .top3Box .no1 .ts {
width: 1.56rem;
height: 1.58667rem;
z-index: 2;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.96rem;
}
.page2 .top3Box .no1 .tx {
width: 1.21333rem;
height: 1.21333rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 2.10667rem;
border-radius: 50%;
}
.page2 .top3Box .no1 .name {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #AE3E4E;
font-size: 0.30667rem;
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.38667rem;
text-align: center;
}
.page2 .top3Box .no1 p {
width: 100%;
color: #AE3E4E;
font-size: 0.26667rem;
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.70667rem;
text-align: center;
}
.page2 .top3Box .no1 .score {
width: 100%;
color: #fff;
font-size: 0.26667rem;
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.24rem;
text-align: center;
}
.page2 .top3Box .no2 {
width: 2.73333rem;
height: 3.13333rem;
background: url(../images/no23Bg.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 0%;
bottom: 0;
}
.page2 .top3Box .no2 .ts {
width: 1.56rem;
height: 1.58667rem;
z-index: 2;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.72rem;
}
.page2 .top3Box .no2 .tx {
width: 1.21333rem;
height: 1.21333rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.89333rem;
border-radius: 50%;
}
.page2 .top3Box .no2 .name {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #AE3E4E;
font-size: 0.30667rem;
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.26667rem;
text-align: center;
}
.page2 .top3Box .no2 p {
width: 100%;
color: #AE3E4E;
font-size: 0.26667rem;
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.72rem;
text-align: center;
}
.page2 .top3Box .no2 .score {
width: 100%;
color: #fff;
font-size: 0.26667rem;
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.26667rem;
text-align: center;
}
.page2 .top3Box .no3 {
width: 2.73333rem;
height: 3.13333rem;
background: url(../images/no23Bg.png) no-repeat;
background-size: 100% 100%;
position: absolute;
right: 0%;
bottom: 0;
}
.page2 .top3Box .no3 .ts {
width: 1.56rem;
height: 1.58667rem;
z-index: 2;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.72rem;
}
.page2 .top3Box .no3 .tx {
width: 1.21333rem;
height: 1.21333rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.89333rem;
border-radius: 50%;
}
.page2 .top3Box .no3 .name {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #AE3E4E;
font-size: 0.30667rem;
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.26667rem;
text-align: center;
}
.page2 .top3Box .no3 p {
width: 100%;
color: #AE3E4E;
font-size: 0.26667rem;
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.72rem;
text-align: center;
}
.page2 .top3Box .no3 .score {
width: 100%;
color: #fff;
font-size: 0.26667rem;
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.26667rem;
text-align: center;
}
.page2 ul {
width: 9.26667rem;
height: 12.6rem;
overflow-y: scroll;
margin: 0 auto 0;
}
.page2 ul::-webkit-scrollbar {
display: none;
}
.page2 ul li {
width: 100%;
height: 1.53333rem;
background: url(../images/liBg.png) no-repeat;
background-size: 100% 100%;
margin-bottom: 0.02667rem;
}
.page2 ul li .num {
width: 0.46667rem;
height: 1.53333rem;
line-height: 1.53333rem;
color: #AE3E4E;
font-size: 0.4rem;
font-weight: 400;
margin-left: 0.38667rem;
text-align: center;
margin-right: 0.6rem;
float: left;
}
.page2 ul li .tx {
width: 1.16rem;
height: 1.16rem;
border-radius: 50%;
border: 0.02667rem solid #AE3E4E;
margin-top: 0.2rem;
margin-right: 0.37333rem;
display: block;
float: left;
}
.page2 ul li .name {
width: 3rem;
height: 1.53333rem;
line-height: 1.53333rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #AE3E4E;
font-size: 0.36rem;
float: left;
}
.page2 ul li .score {
float: right;
height: 1.53333rem;
line-height: 1.53333rem;
color: #AE3E4E;
font-weight: 400;
margin-right: 0.56rem;
}
.page2 .my {
position: fixed;
width: 10rem;
height: 2.06667rem;
background: url(../images/my.png) no-repeat;
background-size: 100% 100%;
margin-bottom: 0.02667rem;
left: 50%;
transform: translateX(-50%);
bottom: 0;
}
.page2 .my .num {
width: 1.33333rem;
height: 2.06667rem;
line-height: 2.06667rem;
color: #AE3E4E;
font-size: 0.4rem;
font-weight: 400;
margin-left: 0.38667rem;
text-align: center;
margin-right: 0.25333rem;
float: left;
}
.page2 .my .tx {
width: 1.16rem;
height: 1.16rem;
border-radius: 50%;
border: 0.02667rem solid #AE3E4E;
margin-top: 0.42667rem;
margin-right: 0.37333rem;
display: block;
float: left;
}
.page2 .my .name {
width: 3rem;
height: 2.06667rem;
line-height: 2.06667rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #AE3E4E;
font-size: 0.36rem;
float: left;
}
.page2 .my .score {
float: right;
height: 2.06667rem;
line-height: 2.06667rem;
color: #AE3E4E;
font-weight: 400;
margin-right: 0.56rem;
}
.rule {
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.6);
}
.rule .rule_in {
width: 8.76rem;
height: 13.13333rem;
background: url(../images/ruleBg.png) no-repeat;
background-size: 100% 100%;
overflow: hidden;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.rule .rule_in .rulebox {
width: 8.06667rem;
height: 11.5rem;
margin: 1.38667rem auto 0;
overflow-y: scroll;
}
.rule .rule_in .rulebox::-webkit-scrollbar {
display: none;
}
.rule .rule_in .rulebox img {
display: block;
width: 100%;
}

View File

@@ -0,0 +1,507 @@
@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
width: 100%;
background: #FBABAD;
}
// 返回按钮
.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(1092);
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
position: relative;
margin: 0 auto px2rem(18);
.rule_icon {
width: px2rem(86);
height: px2rem(255);
position: absolute;
right: px2rem(0);
top: px2rem(469);
}
}
.tabBox {
width: px2rem(575);
height: px2rem(85);
margin: 0 auto px2rem(17);
display: flex;
justify-content: space-between;
div {
width: px2rem(269);
}
.tab1 {
background: url(../images/tab1.png) no-repeat;
background-size: 100% 100%;
}
.tab2 {
background: url(../images/tab2.png) no-repeat;
background-size: 100% 100%;
}
.tabAct1 {
background: url(../images/tabAct1.png) no-repeat;
background-size: 100% 100%;
}
.tabAct2 {
background: url(../images/tabAct2.png) no-repeat;
background-size: 100% 100%;
}
}
.page1 {
// display: none;
width: px2rem(708);
height: px2rem(1395);
margin: 0 auto px2rem(26);
background: url(../images/page1Bg.png) no-repeat;
background-size: 100% 100%;
}
.page2 {
display: none;
width: px2rem(708);
height: px2rem(1382);
background: url(../images/page2Bg.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto px2rem(155);
overflow: hidden;
.tablist {
width: px2rem(368);
height: px2rem(53);
display: flex;
justify-content: space-between;
margin: px2rem(38) auto px2rem(70);
background: url(../images/tabListBg.png) no-repeat;
background-size: 100% 100%;
div {
width: px2rem(184);
height: px2rem(53);
line-height: px2rem(53);
color: #FFFFFF;
font-size: px2rem(29);
font-weight: 500;
text-align: center;
}
.act {
background: url(../images/tabListAct.png) no-repeat;
background-size: 100% 100%;
}
}
.top3Box {
width: px2rem(625);
height: px2rem(235);
position: relative;
margin: 0 auto px2rem(25);
.no1 {
width: px2rem(205);
height: px2rem(262);
background: url(../images/no1Bg.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
.ts {
width: px2rem(117);
height: px2rem(119);
z-index: 2;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(147);
}
.tx {
width: px2rem(91);
height: px2rem(91);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(158);
border-radius: 50%;
}
.name {
width: 100%;
//超出省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #AE3E4E;
font-size: px2rem(23);
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(104);
text-align: center;
}
p {
width: 100%;
color: #AE3E4E;
font-size: px2rem(20);
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(53);
text-align: center;
}
.score {
width: 100%;
color: #fff;
font-size: px2rem(20);
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(18);
text-align: center;
}
}
.no2 {
width: px2rem(205);
height: px2rem(235);
background: url(../images/no23Bg.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 0%;
bottom: 0;
.ts {
width: px2rem(117);
height: px2rem(119);
z-index: 2;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(129);
}
.tx {
width: px2rem(91);
height: px2rem(91);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(142);
border-radius: 50%;
}
.name {
width: 100%;
//超出省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #AE3E4E;
font-size: px2rem(23);
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(95);
text-align: center;
}
p {
width: 100%;
color: #AE3E4E;
font-size: px2rem(20);
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(54);
text-align: center;
}
.score {
width: 100%;
color: #fff;
font-size: px2rem(20);
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(20);
text-align: center;
}
}
.no3 {
width: px2rem(205);
height: px2rem(235);
background: url(../images/no23Bg.png) no-repeat;
background-size: 100% 100%;
position: absolute;
right: 0%;
bottom: 0;
.ts {
width: px2rem(117);
height: px2rem(119);
z-index: 2;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(129);
}
.tx {
width: px2rem(91);
height: px2rem(91);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(142);
border-radius: 50%;
}
.name {
width: 100%;
//超出省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #AE3E4E;
font-size: px2rem(23);
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(95);
text-align: center;
}
p {
width: 100%;
color: #AE3E4E;
font-size: px2rem(20);
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(54);
text-align: center;
}
.score {
width: 100%;
color: #fff;
font-size: px2rem(20);
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(20);
text-align: center;
}
}
}
ul {
width: px2rem(695);
height: 12.6rem;
overflow-y: scroll;
margin: 0 auto 0;
&::-webkit-scrollbar {
display: none;
}
li {
width: 100%;
height: px2rem(115);
background: url(../images/liBg.png) no-repeat;
background-size: 100% 100%;
margin-bottom: px2rem(2);
.num {
width: px2rem(35);
height: px2rem(115);
line-height: px2rem(115);
color: #AE3E4E;
font-size: px2rem(30);
font-weight: 400;
margin-left: px2rem(29);
text-align: center;
margin-right: px2rem(45);
float: left;
}
.tx {
width: px2rem(87);
height: px2rem(87);
border-radius: 50%;
border: px2rem(2) solid #AE3E4E;
margin-top: px2rem(15);
margin-right: px2rem(28);
display: block;
float: left;
}
.name {
width: 3rem;
height: px2rem(115);
line-height: px2rem(115);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #AE3E4E;
font-size: px2rem(27);
float: left;
}
.score {
float: right;
height: px2rem(115);
line-height: px2rem(115);
color: #AE3E4E;
font-weight: 400;
margin-right: px2rem(42);
}
}
}
.my {
position: fixed;
width: px2rem(750);
height: px2rem(155);
background: url(../images/my.png) no-repeat;
background-size: 100% 100%;
margin-bottom: px2rem(2);
left: 50%;
transform: translateX(-50%);
bottom: 0;
.num {
width: px2rem(100);
height: px2rem(155);
line-height: px2rem(155);
color: #AE3E4E;
font-size: px2rem(30);
font-weight: 400;
margin-left: px2rem(29);
text-align: center;
margin-right: px2rem(19);
float: left;
}
.tx {
width: px2rem(87);
height: px2rem(87);
border-radius: 50%;
border: px2rem(2) solid #AE3E4E;
margin-top: px2rem(32);
margin-right: px2rem(28);
display: block;
float: left;
}
.name {
width: 3rem;
height: px2rem(155);
line-height: px2rem(155);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #AE3E4E;
font-size: px2rem(27);
float: left;
}
.score {
float: right;
height: px2rem(155);
line-height: px2rem(155);
color: #AE3E4E;
font-weight: 400;
margin-right: px2rem(42);
}
}
}
.rule {
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 999;
background: rgba(0, 0, 0, .6);
.rule_in {
width: px2rem(657);
height: px2rem(985);
background: url(../images/ruleBg.png) no-repeat;
background-size: 100% 100%;
overflow: hidden;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.rulebox {
width: px2rem(605);
height: 11.5rem;
margin: px2rem(104) auto 0;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
}
img {
display: block;
width: 100%;
}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 784 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 539 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 278 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 336 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@@ -0,0 +1,101 @@
<!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>
<!-- header -->
<div class="header">
<img src="./images/rule_icon.png" alt="" class="rule_icon">
</div>
<!-- tab -->
<div class="tabBox">
<div class="tab1 tabAct1"></div>
<div class="tab2"></div>
</div>
<!-- page1 -->
<div class="page1"></div>
<!-- page2 -->
<div class="page2">
<!-- tab -->
<div class="tablist">
<div class="act">守護榜</div>
<div>女神榜</div>
</div>
<!-- 前三 -->
<div class="top3Box">
<div class="no1">
<img src="./images/no1.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="name">用戶昵稱</div>
<p>守護榜</p>
<div class="score">0</div>
</div>
<div class="no2">
<img src="./images/no2.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="name">用戶昵稱</div>
<p>守護榜</p>
<div class="score">0</div>
</div>
<div class="no3">
<img src="./images/no3.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="name">用戶昵稱</div>
<p>守護榜</p>
<div class="score">0</div>
</div>
</div>
<!-- 非前三 -->
<ul>
<li>
<div class="num">04</div>
<img src="./images/logo.png" alt="" class="tx">
<div class="name">用戶昵稱</div>
<div class="score">守護榜:0</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">守護榜:0</div>
</div>
</div>
<!-- 活動規則 -->
<div class="rule">
<div class="rule_in">
<div class="rulebox">
<img src="./images/rule.png" alt="">
</div>
</div>
</div>
</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="../../common/js/vconsole.min.js"></script>
<script src="../../common/js/route-constant.js"></script>
<script src="./js/index.js"></script>
</html>

View File

@@ -0,0 +1,140 @@
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,
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, i) => {
$(`.page2 .top3Box .no${i + 1} .tx`).attr('src', res.avatar);
$(`.page2 .top3Box .no${i + 1} .name`).text(res.nick);
$(`.page2 .top3Box .no${i + 1} p`).text(`${rankType == 2 ? "守護值" : "女神值"}`);
$(`.page2 .top3Box .no${i + 1} .score`).text(unitProcessing(res.score, 10000, 1, 'w'));
})
// 非前三
$('.page2 ul li').remove();
var str = '';
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 ul').append(str);
// 處理自己榜單
$('.page2 .my .num').text(res.data.meRank.ranking == 0 ? '未上榜' : res.data.meRank.ranking);
$('.page2 .my .tx').attr('src', res.data.meRank.avatar);
$('.page2 .my .name').text(res.data.meRank.nick);
$('.page2 .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切換
$('.tabBox div').click(function () {
var i = $(this).index() + 1;
$('.tabBox div').removeClass('tabAct1').removeClass('tabAct2');
$(this).addClass(`tabAct${i}`);
$('.page1,.page2').hide();
$(`.page${i}`).show();
if (i == 2) {
getRank();
}
})
$('.page2 .tablist div').click(function () {
var i = $(this).index() + 1;
$(this).addClass('act').siblings().removeClass('act');
rankType = i == 1 ? 2 : 4;
getRank();
})
// 打開規則
$('.header .rule_icon').click(function () {
$('.rule').show();
bodyScroolFun(true);
})
// 關閉規則
$('.rule').click(function () {
$('.rule').hide();
bodyScroolFun(false);
})

View File

@@ -0,0 +1,901 @@
html,
body {
width: 100%;
background: #FFE1C5;
}
.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.69333rem;
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto 0;
position: relative;
}
.header .h3 {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 3.25333rem;
height: 1.36rem;
width: 8.6rem;
}
.header .rule_rule {
width: 0.77333rem;
height: 0.77333rem;
position: absolute;
top: 4.77333rem;
right: 0.4rem;
}
.header .text {
width: 5.33333rem;
height: 0.8rem;
line-height: 0.8rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 5.06667rem;
background: url(../images/header_text.png) no-repeat;
background-size: 100% 100%;
text-align: center;
color: #FFF6E5;
font-size: 0.37333rem;
font-weight: 400;
}
.header .text b {
font-size: 0.56rem;
font-weight: 600;
vertical-align: middle;
}
.header .text img {
display: inline-block;
width: 0.58667rem;
height: 0.58667rem;
vertical-align: middle;
}
.bg {
width: 100%;
height: 48.10667rem;
background: url(../images/bg.png) no-repeat;
background-size: 100% 100%;
position: relative;
margin: -0.56rem auto 0;
overflow: hidden;
}
.bg .myInfo {
width: 9.2rem;
height: 4.06667rem;
background: url(../images/myInfo.png) no-repeat;
background-size: 100% 100%;
margin: 1.12rem auto 0.26667rem;
position: relative;
}
.bg .myInfo .tx {
width: 1.6rem;
height: 1.6rem;
border: 0.02667rem solid #F55E3E;
position: absolute;
left: 0.53333rem;
top: 0.73333rem;
border-radius: 50%;
}
.bg .myInfo p {
color: #FE3312;
font-size: 0.37333rem;
position: absolute;
top: 1.34667rem;
left: 2.37333rem;
font-weight: 400;
}
.bg .myInfo .invitationCode {
position: absolute;
right: 1.45333rem;
top: 1.18667rem;
font-size: 0.64rem;
font-weight: normal;
color: #FE3312;
}
.bg .myInfo .skip {
position: absolute;
left: 0.53333rem;
bottom: 0.66667rem;
width: 3.92rem;
height: 0.8rem;
line-height: 0.8rem;
text-align: center;
color: #FE3312;
font-size: 0.24rem;
font-weight: 400;
background: url(../images/myInfoBut.png) no-repeat;
background-size: 100% 100%;
}
.bg .myInfo .skip img {
display: inline-block;
width: 0.37333rem;
height: 0.37333rem;
vertical-align: middle;
}
.bg .myInfo .copy {
position: absolute;
right: 0.53333rem;
bottom: 0.66667rem;
width: 3.92rem;
height: 0.8rem;
line-height: 0.8rem;
text-align: center;
color: #FE3312;
font-size: 0.24rem;
font-weight: 400;
background: url(../images/myInfoBut.png) no-repeat;
background-size: 100% 100%;
}
.bg .myInfo .copy img {
display: inline-block;
width: 0.37333rem;
height: 0.37333rem;
vertical-align: middle;
}
.bg .myIncome {
width: 9.2rem;
height: 1.33333rem;
position: relative;
margin: 0 auto 0.26667rem;
background: url(../images/myIncomeBg.png) no-repeat;
background-size: 100% 100%;
}
.bg .myIncome img {
position: absolute;
width: 0.58667rem;
height: 0.58667rem;
top: 50%;
transform: translateY(-50%);
right: 0.37333rem;
}
.bg .myIncome p {
color: #FFFFFF;
font-size: 0.48rem;
font-weight: 500;
position: absolute;
left: 0.26667rem;
top: 50%;
transform: translateY(-50%);
}
.bg .myIncome b {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 1.2rem;
color: #FE3312;
font-size: 0.48rem;
}
.bg .incomeBox {
width: 9.2rem;
height: 10.66667rem;
background: #fff;
border-radius: 0.26667rem;
border: 0.05333rem solid #FE7835;
margin: 0 auto 0.26667rem;
position: relative;
}
.bg .incomeBox .tab {
width: 8.66667rem;
height: 1.92rem;
display: flex;
justify-content: space-between;
margin: 0.18667rem auto 0.26667rem;
}
.bg .incomeBox .tab div {
width: 4.21333rem;
height: 100%;
text-align: center;
background: url(../images/tab.png) no-repeat;
background-size: 100% 100%;
}
.bg .incomeBox .tab div p {
color: #FFFFFF;
font-size: 0.32rem;
font-weight: 500;
margin-top: 0.46667rem;
margin-bottom: 0.24rem;
}
.bg .incomeBox .tab div span {
color: #fff;
font-size: 0.37333rem;
font-weight: 400;
}
.bg .incomeBox .tab div span img {
display: inline-block;
vertical-align: middle;
width: 0.58667rem;
height: 0.58667rem;
}
.bg .incomeBox .tab .act {
background: url(../images/tabAct.png) no-repeat;
background-size: 100% 100%;
}
.bg .incomeBox .tab .act p {
margin-top: 0.36rem;
}
.bg .incomeBox .sTab {
width: 100%;
height: 0.8rem;
line-height: 0.8rem;
display: flex;
justify-content: space-between;
margin: 0 auto 0rem;
}
.bg .incomeBox .sTab div {
width: 50%;
height: 100%;
text-align: center;
color: #333333;
font-size: 0.26667rem;
font-weight: 400;
}
.bg .incomeBox .sTab .tab1 {
background: url(../images/sTab1.png) no-repeat;
background-size: 100% 100%;
color: #FE3312;
}
.bg .incomeBox .sTab .tab2 {
background: url(../images/sTab2.png) no-repeat;
background-size: 100% 100%;
color: #FE3312;
}
.bg .incomeBox .tableTitle {
width: 99.9%;
display: flex;
justify-content: space-between;
margin-bottom: 0;
position: absolute;
top: 3.17rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
background: #fff;
}
.bg .incomeBox .tableTitle div {
width: 25%;
height: 0.66667rem;
line-height: 0.66667rem;
text-align: center;
color: #333333;
font-size: 0.26667rem;
font-weight: 400;
}
.bg .incomeBox ul {
width: 100%;
height: 7.4rem;
margin: 0 auto 0;
overflow-y: scroll;
position: relative;
}
.bg .incomeBox ul::-webkit-scrollbar {
display: none;
}
.bg .incomeBox ul .top {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 0;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.bg .incomeBox ul .top div {
width: 25%;
height: 0.66667rem;
line-height: 0.66667rem;
text-align: center;
color: #333333;
font-size: 0.26667rem;
font-weight: 400;
}
.bg .incomeBox ul li {
width: 100%;
height: 0.66667rem;
margin-bottom: 0.24rem;
display: flex;
justify-content: space-between;
}
.bg .incomeBox ul li:nth-child(1) {
margin-top: 0.66667rem;
}
.bg .incomeBox ul li div {
overflow: hidden;
width: 25%;
text-align: center;
color: #666666;
font-size: 0.24rem;
font-weight: 400;
line-height: 0.66667rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.bg .incomeBox ul li div img {
display: inline-block;
vertical-align: middle;
width: 0.42667rem;
height: 0.42667rem;
}
.bg .incomeBox ul li .act {
line-height: 0rem;
}
.bg .incomeBox ul li .act p {
margin-top: 0.2rem;
margin-bottom: 0.30667rem;
}
.bg .rule {
width: 9.2rem;
height: 18.90667rem;
border-radius: 0.26667rem;
border: 0.05333rem solid #FE7835;
margin: 0 auto 0.53333rem;
position: relative;
background: #fff;
}
.bg .rule .title {
width: 4.26667rem;
height: 0.8rem;
line-height: 0.8rem;
text-align: center;
color: #fff;
font-size: 0.48rem;
font-weight: 500;
background: url(../images/titleBg.png) no-repeat;
background-size: 100% 100%;
position: relative;
top: 0.4rem;
left: 50%;
transform: translateX(-50%);
margin-bottom: 0.53333rem;
}
.bg .rule .rule1 {
position: relative;
width: 8.66667rem;
height: 4.29333rem;
margin: 0 auto 0.26667rem;
background: url(../images/rule1.png) no-repeat;
background-size: 100% 100%;
}
.bg .rule .rule1 h3 {
width: 100%;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0.26667rem;
color: #fff;
font-size: 0.26667rem;
font-weight: 500;
}
.bg .rule .rule1 .text1 {
position: absolute;
left: 1.97333rem;
top: 1.13333rem;
color: #333333;
font-size: 0.24rem;
font-weight: 400;
}
.bg .rule .rule1 .text2 {
position: absolute;
left: 5.38667rem;
top: 1.13333rem;
color: #333333;
font-size: 0.24rem;
font-weight: 400;
}
.bg .rule .rule1 .rule1_in {
width: 5.13333rem;
height: 1.6rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.73333rem;
}
.bg .rule .rule1 .sp1 {
position: absolute;
left: 1.98667rem;
height: 0.42667rem;
line-height: 0.42667rem;
bottom: 0.4rem;
color: #FE3312;
font-size: 0.24rem;
font-weight: 500;
}
.bg .rule .rule1 .sp1 img {
display: inline-block;
width: 0.42667rem;
height: 0.42667rem;
vertical-align: middle;
}
.bg .rule .rule1 .sp2 {
position: absolute;
right: 1.98667rem;
height: 0.42667rem;
line-height: 0.42667rem;
bottom: 0.4rem;
color: #FE3312;
font-size: 0.24rem;
font-weight: 500;
}
.bg .rule .rule1 .sp2 img {
display: inline-block;
width: 0.42667rem;
height: 0.42667rem;
vertical-align: middle;
}
.bg .rule .rule2 {
width: 8.66667rem;
height: 11.74667rem;
position: relative;
margin: 0 auto 0.4rem;
background: url(../images/rule2.png) no-repeat;
background-size: 100% 100%;
}
.bg .rule .rule2 h3 {
width: 100%;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0.26667rem;
color: #fff;
font-size: 0.26667rem;
font-weight: 500;
}
.bg .rule .rule2 .text1 {
color: #333333;
font-size: 0.24rem;
font-weight: 5.33333rem;
position: absolute;
left: 0.45333rem;
top: 1.13333rem;
}
.bg .rule .rule2 .text2 {
color: #333333;
font-size: 0.24rem;
font-weight: 5.33333rem;
position: absolute;
left: 3.6rem;
top: 1.13333rem;
}
.bg .rule .rule2 .text3 {
color: #333333;
font-size: 0.24rem;
font-weight: 5.33333rem;
position: absolute;
left: 6.86667rem;
top: 1.13333rem;
}
.bg .rule .rule2 .rule_2in {
width: 8.13333rem;
height: 1.6rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.73333rem;
}
.bg .rule .rule2 .p1 {
width: 100%;
color: #FE3312;
font-size: 0.26667rem;
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 3.86667rem;
text-align: center;
}
.bg .rule .rule2 .p2 {
width: 100%;
color: #FE3312;
font-size: 0.26667rem;
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 8.28rem;
text-align: center;
}
.bg .rule .rule2 .table1 {
width: 8.13333rem;
height: 3.24rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 4.50667rem;
}
.bg .rule .rule2 .table2 {
width: 8.13333rem;
height: 2.49333rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 8.85333rem;
}
.bg .rule .rule2 .table1_1 {
width: 8.13333rem;
height: 0.8rem;
line-height: 0.8rem;
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 4.56rem;
z-index: 2;
}
.bg .rule .rule2 .table1_1 div {
width: 50%;
text-align: center;
color: #FF4627;
font-size: 0.24rem;
font-weight: 500;
}
.bg .rule .rule2 .table1_2 {
width: 8.13333rem;
height: 0.8rem;
line-height: 0.8rem;
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 5.4rem;
z-index: 2;
}
.bg .rule .rule2 .table1_2 div {
width: 50%;
text-align: center;
color: #FF4627;
font-size: 0.24rem;
font-weight: 400;
}
.bg .rule .rule2 .table1_3 {
width: 8.13333rem;
height: 0.8rem;
line-height: 0.8rem;
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 6.2rem;
z-index: 2;
}
.bg .rule .rule2 .table1_3 div {
width: 50%;
text-align: center;
color: #FF4627;
font-size: 0.24rem;
font-weight: 400;
}
.bg .rule .rule2 .table1_4 {
width: 8.13333rem;
height: 0.8rem;
line-height: 0.8rem;
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 6.95rem;
z-index: 2;
}
.bg .rule .rule2 .table1_4 div {
width: 50%;
text-align: center;
color: #FF4627;
font-size: 0.24rem;
font-weight: 400;
}
.bg .rule .rule2 .table2_1 {
width: 8.13333rem;
height: 0.8rem;
line-height: 0.8rem;
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 8.9rem;
z-index: 2;
}
.bg .rule .rule2 .table2_1 div {
width: 50%;
text-align: center;
color: #FF4627;
font-size: 0.24rem;
font-weight: 500;
}
.bg .rule .rule2 .table2_2 {
width: 8.13333rem;
height: 0.8rem;
line-height: 0.8rem;
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 9.8rem;
z-index: 2;
}
.bg .rule .rule2 .table2_2 div {
width: 50%;
text-align: center;
color: #FF4627;
font-size: 0.24rem;
font-weight: 400;
}
.bg .rule .rule2 .table2_3 {
width: 8.13333rem;
height: 0.8rem;
line-height: 0.8rem;
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 10.6rem;
z-index: 2;
}
.bg .rule .rule2 .table2_3 div {
width: 50%;
text-align: center;
color: #FF4627;
font-size: 0.24rem;
font-weight: 400;
}
.bg .rule .wishingStar {
width: 100%;
text-align: center;
color: #333333;
font-size: 0.24rem;
font-weight: 300;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.4rem;
}
.bg .rule .wishingStar b {
color: #FE3312;
}
.bg .otherNotes {
width: 4.26667rem;
height: 0.8rem;
line-height: 0.8rem;
background: url(../images/titleBg.png) no-repeat;
background-size: 100% 100%;
position: relative;
margin: 0 auto 0.53333rem;
text-align: center;
color: #FFFFFF;
font-size: 0.48rem;
font-weight: 400;
}
.bg ul {
width: 9.2rem;
margin: 0 auto 0.70667rem;
}
.bg ul li {
width: 100%;
color: #666666;
font-size: 0.24rem;
font-weight: 400;
line-height: 0.34rem;
}
.bg ul .title {
color: #333333;
font-size: 0.26667rem;
font-weight: 500;
margin-bottom: 0.24rem;
margin-top: 0.26667rem;
}
.openShare {
position: fixed;
left: 0rem;
bottom: 6.2rem;
width: 1.6rem;
height: 0.45333rem;
line-height: 0.45333rem;
background: linear-gradient(180deg, #FFAD50 0%, #FE3111 100%);
border-radius: 0px 0.22667rem 0.22667rem 0px;
text-align: center;
color: #fff;
font-size: 0.21333rem;
display: none;
z-index: 3;
}
.code {
position: fixed;
left: 0;
bottom: 4.85rem;
background: url(../images/codeBg.png) no-repeat;
background-size: 100% 100%;
width: 2.34667rem;
height: 3.16rem;
z-index: 3;
}
.code .rule_icon {
width: 0.32rem;
height: 0.32rem;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.code .p1 {
position: absolute;
color: #FFFFFF;
font-size: 0.21333rem;
position: absolute;
left: 50%;
transform: translateX(-47%);
top: 0.24rem;
width: 100%;
text-align: center;
}
.code .p2 {
position: absolute;
color: #FFFFFF;
font-size: 0.21333rem;
position: absolute;
left: 50%;
transform: translateX(-47%);
top: 0.66667rem;
width: 100%;
text-align: center;
}
.code .p2 .diamond {
width: 0.32rem;
height: 0.32rem;
vertical-align: middle;
display: inline-block;
}
.code .p2 b {
font-size: 0.24rem;
font-weight: 500;
vertical-align: middle;
}
.code .codeImg {
width: 1.17333rem;
height: 1.17333rem;
position: absolute;
left: 50%;
transform: translateX(-43%);
top: 1.16rem;
}
.code .but {
width: 1.52rem;
height: 0.34667rem;
line-height: 0.37333rem;
border-radius: 0.34667rem;
background: #fff;
position: absolute;
left: 0.50667rem;
bottom: 0.24rem;
text-align: center;
color: #000;
font-size: 0.24rem;
}

View File

@@ -0,0 +1,908 @@
@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
width: 100%;
background: #FFE1C5;
// background: linear-gradient(0deg, #DE3B4F 0%, #FFE4C9 99%);
}
// 返回按钮
.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(652);
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto 0;
position: relative;
.h3 {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(244);
height: px2rem(102);
width: px2rem(645);
}
.rule_rule {
width: px2rem(58);
height: px2rem(58);
position: absolute;
top: px2rem(358);
right: px2rem(30);
}
.text {
width: px2rem(400);
height: px2rem(60);
line-height: px2rem(60);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(380);
background: url(../images/header_text.png) no-repeat;
background-size: 100% 100%;
text-align: center;
color: #FFF6E5;
font-size: px2rem(28);
font-weight: 400;
b {
font-size: px2rem(42);
font-weight: 600;
vertical-align: middle;
}
img {
display: inline-block;
width: px2rem(44);
height: px2rem(44);
vertical-align: middle;
}
}
}
.bg {
width: 100%;
height: px2rem(3608);
background: url(../images/bg.png) no-repeat;
background-size: 100% 100%;
position: relative;
margin: px2rem(-42) auto 0;
overflow: hidden;
.myInfo {
width: px2rem(690);
height: px2rem(305);
background: url(../images/myInfo.png) no-repeat;
background-size: 100% 100%;
margin: px2rem(84) auto px2rem(20);
position: relative;
.tx {
width: px2rem(120);
height: px2rem(120);
border: px2rem(2) solid #F55E3E;
position: absolute;
left: px2rem(40);
top: px2rem(55);
border-radius: 50%;
}
p {
color: #FE3312;
font-size: px2rem(28);
position: absolute;
top: px2rem(101);
left: px2rem(178);
font-weight: 400;
}
.invitationCode {
position: absolute;
right: px2rem(109);
top: px2rem(89);
font-size: px2rem(48);
font-weight: normal;
color: #FE3312;
}
.skip {
position: absolute;
left: px2rem(40);
bottom: px2rem(50);
width: px2rem(294);
height: px2rem(60);
line-height: px2rem(60);
text-align: center;
color: #FE3312;
font-size: px2rem(18);
font-weight: 400;
background: url(../images/myInfoBut.png) no-repeat;
background-size: 100% 100%;
img {
display: inline-block;
width: px2rem(28);
height: px2rem(28);
vertical-align: middle;
}
}
.copy {
position: absolute;
right: px2rem(40);
bottom: px2rem(50);
width: px2rem(294);
height: px2rem(60);
line-height: px2rem(60);
text-align: center;
color: #FE3312;
font-size: px2rem(18);
font-weight: 400;
background: url(../images/myInfoBut.png) no-repeat;
background-size: 100% 100%;
img {
display: inline-block;
width: px2rem(28);
height: px2rem(28);
vertical-align: middle;
}
}
}
.myIncome {
width: px2rem(690);
height: px2rem(100);
position: relative;
margin: 0 auto px2rem(20);
background: url(../images/myIncomeBg.png) no-repeat;
background-size: 100% 100%;
img {
position: absolute;
width: px2rem(44);
height: px2rem(44);
top: 50%;
transform: translateY(-50%);
right: px2rem(28);
}
p {
color: #FFFFFF;
font-size: px2rem(36);
font-weight: 500;
position: absolute;
left: px2rem(20);
top: 50%;
transform: translateY(-50%);
}
b {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: px2rem(90);
color: #FE3312;
font-size: px2rem(36);
}
}
.incomeBox {
width: px2rem(690);
height: px2rem(800);
background: #fff;
border-radius: px2rem(20);
border: px2rem(4) solid #FE7835;
margin: 0 auto px2rem(20);
position: relative;
.tab {
width: px2rem(650);
height: px2rem(144);
display: flex;
justify-content: space-between;
margin: px2rem(14) auto px2rem(20);
div {
width: px2rem(316);
height: 100%;
text-align: center;
background: url(../images/tab.png) no-repeat;
background-size: 100% 100%;
p {
color: #FFFFFF;
font-size: px2rem(24);
font-weight: 500;
margin-top: px2rem(35);
margin-bottom: px2rem(18);
}
span {
color: #fff;
font-size: px2rem(28);
font-weight: 400;
img {
display: inline-block;
vertical-align: middle;
width: px2rem(44);
height: px2rem(44);
}
}
}
.act {
background: url(../images/tabAct.png) no-repeat;
background-size: 100% 100%;
p {
margin-top: px2rem(27);
}
}
}
.sTab {
width: 100%;
height: px2rem(60);
line-height: px2rem(60);
display: flex;
justify-content: space-between;
margin: 0 auto px2rem(0);
div {
width: 50%;
height: 100%;
text-align: center;
color: #333333;
font-size: px2rem(20);
font-weight: 400;
}
.tab1 {
background: url(../images/sTab1.png) no-repeat;
background-size: 100% 100%;
color: #FE3312;
}
.tab2 {
background: url(../images/sTab2.png) no-repeat;
background-size: 100% 100%;
color: #FE3312;
}
}
.tableTitle {
width: 99.9%;
display: flex;
justify-content: space-between;
margin-bottom: 0;
position: absolute;
top: 3.17rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
background: #fff;
div {
width: 25%;
height: px2rem(50);
line-height: px2rem(50);
text-align: center;
color: #333333;
font-size: px2rem(20);
font-weight: 400;
}
}
ul {
width: 100%;
height: 7.4rem;
margin: 0 auto 0;
overflow-y: scroll;
position: relative;
&::-webkit-scrollbar {
display: none;
}
.top {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 0;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
div {
width: 25%;
height: px2rem(50);
line-height: px2rem(50);
text-align: center;
color: #333333;
font-size: px2rem(20);
font-weight: 400;
}
}
li {
width: 100%;
height: px2rem(50);
margin-bottom: px2rem(18);
display: flex;
justify-content: space-between;
&:nth-child(1) {
margin-top: px2rem(50);
}
div {
overflow: hidden;
width: 25%;
text-align: center;
color: #666666;
font-size: px2rem(18);
font-weight: 400;
line-height: px2rem(50);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
img {
display: inline-block;
vertical-align: middle;
width: px2rem(32);
height: px2rem(32);
}
}
.act {
line-height: px2rem(0);
p {
margin-top: px2rem(15);
margin-bottom: px2rem(23);
}
}
}
}
}
.rule {
width: px2rem(690);
height: px2rem(1418);
border-radius: px2rem(20);
border: px2rem(4) solid #FE7835;
margin: 0 auto px2rem(40);
position: relative;
background: #fff;
.title {
width: px2rem(320);
height: px2rem(60);
line-height: px2rem(60);
text-align: center;
color: #fff;
font-size: px2rem(36);
font-weight: 500;
background: url(../images/titleBg.png) no-repeat;
background-size: 100% 100%;
position: relative;
top: px2rem(30);
left: 50%;
transform: translateX(-50%);
margin-bottom: px2rem(40);
}
.rule1 {
position: relative;
width: px2rem(650);
height: px2rem(322);
margin: 0 auto px2rem(20);
background: url(../images/rule1.png) no-repeat;
background-size: 100% 100%;
h3 {
width: 100%;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(20);
color: #fff;
font-size: px2rem(20);
font-weight: 500;
}
.text1 {
position: absolute;
left: px2rem(148);
top: px2rem(85);
color: #333333;
font-size: px2rem(18);
font-weight: 400;
}
.text2 {
position: absolute;
left: px2rem(404);
top: px2rem(85);
color: #333333;
font-size: px2rem(18);
font-weight: 400;
}
.rule1_in {
width: px2rem(385);
height: px2rem(120);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(130);
}
.sp1 {
position: absolute;
left: px2rem(149);
height: px2rem(32);
line-height: px2rem(32);
bottom: px2rem(30);
color: #FE3312;
font-size: px2rem(18);
font-weight: 500;
img {
display: inline-block;
width: px2rem(32);
height: px2rem(32);
vertical-align: middle;
}
}
.sp2 {
position: absolute;
right: px2rem(149);
height: px2rem(32);
line-height: px2rem(32);
bottom: px2rem(30);
color: #FE3312;
font-size: px2rem(18);
font-weight: 500;
img {
display: inline-block;
width: px2rem(32);
height: px2rem(32);
vertical-align: middle;
}
}
}
.rule2 {
width: px2rem(650);
height: px2rem(881);
position: relative;
margin: 0 auto px2rem(30);
background: url(../images/rule2.png) no-repeat;
background-size: 100% 100%;
h3 {
width: 100%;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(20);
color: #fff;
font-size: px2rem(20);
font-weight: 500;
}
.text1 {
color: #333333;
font-size: px2rem(18);
font-weight: px2rem(400);
position: absolute;
left: px2rem(34);
top: px2rem(85);
}
.text2 {
color: #333333;
font-size: px2rem(18);
font-weight: px2rem(400);
position: absolute;
left: px2rem(270);
top: px2rem(85);
}
.text3 {
color: #333333;
font-size: px2rem(18);
font-weight: px2rem(400);
position: absolute;
left: px2rem(515);
top: px2rem(85);
}
.rule_2in {
width: px2rem(610);
height: px2rem(120);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(130);
}
.p1 {
width: 100%;
color: #FE3312;
font-size: px2rem(20);
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(290);
text-align: center;
}
.p2 {
width: 100%;
color: #FE3312;
font-size: px2rem(20);
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(621);
text-align: center;
}
.table1 {
width: px2rem(610);
height: px2rem(243);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(338);
}
.table2 {
width: px2rem(610);
height: px2rem(187);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(664);
}
.table1_1 {
width: px2rem(610);
height: px2rem(60);
line-height: px2rem(60);
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(342);
z-index: 2;
div {
width: 50%;
text-align: center;
color: #FF4627;
font-size: px2rem(18);
font-weight: 500;
}
}
.table1_2 {
width: px2rem(610);
height: px2rem(60);
line-height: px2rem(60);
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(405);
z-index: 2;
div {
width: 50%;
text-align: center;
color: #FF4627;
font-size: px2rem(18);
font-weight: 400;
}
}
.table1_3 {
width: px2rem(610);
height: px2rem(60);
line-height: px2rem(60);
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 6.2rem;
z-index: 2;
div {
width: 50%;
text-align: center;
color: #FF4627;
font-size: px2rem(18);
font-weight: 400;
}
}
.table1_4 {
width: px2rem(610);
height: px2rem(60);
line-height: px2rem(60);
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 6.95rem;
z-index: 2;
div {
width: 50%;
text-align: center;
color: #FF4627;
font-size: px2rem(18);
font-weight: 400;
}
}
.table2_1 {
width: px2rem(610);
height: px2rem(60);
line-height: px2rem(60);
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 8.9rem;
z-index: 2;
div {
width: 50%;
text-align: center;
color: #FF4627;
font-size: px2rem(18);
font-weight: 500;
}
}
.table2_2 {
width: px2rem(610);
height: px2rem(60);
line-height: px2rem(60);
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 9.8rem;
z-index: 2;
div {
width: 50%;
text-align: center;
color: #FF4627;
font-size: px2rem(18);
font-weight: 400;
}
}
.table2_3 {
width: px2rem(610);
height: px2rem(60);
line-height: px2rem(60);
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 10.6rem;
z-index: 2;
div {
width: 50%;
text-align: center;
color: #FF4627;
font-size: px2rem(18);
font-weight: 400;
}
}
}
.wishingStar {
width: 100%;
text-align: center;
color: #333333;
font-size: px2rem(18);
font-weight: 300;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(30);
b {
color: #FE3312;
}
}
}
.otherNotes {
width: px2rem(320);
height: px2rem(60);
line-height: px2rem(60);
background: url(../images/titleBg.png) no-repeat;
background-size: 100% 100%;
position: relative;
margin: 0 auto px2rem(40);
text-align: center;
color: #FFFFFF;
font-size: px2rem(36);
font-weight: 400;
}
ul {
width: px2rem(690);
margin: 0 auto px2rem(53);
li {
width: 100%;
color: #666666;
font-size: px2rem(18);
font-weight: 400;
line-height: 0.34rem;
}
.title {
color: #333333;
font-size: px2rem(20);
font-weight: 500;
margin-bottom: px2rem(18);
margin-top: px2rem(20);
}
}
}
.openShare {
position: fixed;
left: px2rem(0);
bottom: 6.2rem;
width: px2rem(120);
height: px2rem(34);
line-height: px2rem(34);
background: linear-gradient(180deg, #FFAD50 0%, #FE3111 100%);
border-radius: 0px px2rem(17) px2rem(17) 0px;
text-align: center;
color: #fff;
font-size: px2rem(16);
display: none;
z-index: 3;
}
.code {
position: fixed;
left: 0;
bottom: 4.85rem;
background: url(../images/codeBg.png) no-repeat;
background-size: 100% 100%;
width: px2rem(176);
height: px2rem(237);
z-index: 3;
.rule_icon {
width: px2rem(24);
height: px2rem(24);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.p1 {
position: absolute;
color: #FFFFFF;
font-size: px2rem(16);
position: absolute;
left: 50%;
transform: translateX(-47%);
top: px2rem(18);
width: 100%;
text-align: center;
}
.p2 {
position: absolute;
color: #FFFFFF;
font-size: px2rem(16);
position: absolute;
left: 50%;
transform: translateX(-47%);
top: px2rem(50);
width: 100%;
text-align: center;
.diamond {
width: px2rem(24);
height: px2rem(24);
vertical-align: middle;
display: inline-block;
}
b {
font-size: px2rem(18);
font-weight: 500;
vertical-align: middle;
}
}
.codeImg {
width: px2rem(88);
height: px2rem(88);
position: absolute;
left: 50%;
transform: translateX(-43%);
top: px2rem(87);
}
.but {
width: px2rem(114);
height: px2rem(26);
line-height: px2rem(28);
border-radius: px2rem(26);
background: #fff;
position: absolute;
left: px2rem(38);
bottom: px2rem(18);
text-align: center;
color: #000;
font-size: px2rem(18);
}
}

View File

@@ -0,0 +1,93 @@
html,
body {
width: 100%;
background: #FE614B;
}
.header {
width: 10rem;
height: 16.61333rem;
position: relative;
margin: 0 auto 0;
background: url(../images/share/header.png) no-repeat;
background-size: 100% 100%;
}
.header .swiper {
width: 9.26667rem;
height: 9.64rem;
position: relative;
left: 50%;
transform: translateX(-53%);
top: 6.72rem;
}
.box {
width: 10rem;
height: 6.10667rem;
background: url(../images/share/box.png) no-repeat;
background-size: 100% 100%;
margin: -1rem auto 0rem;
position: relative;
z-index: 2;
overflow: hidden;
}
.box .xz {
width: 6.42667rem;
height: 1.22667rem;
line-height: 1.22667rem;
text-align: center;
color: #fff;
font-size: 0.42667rem;
background: url(../images/share/xzBg.png) no-repeat;
background-size: 100% 100%;
margin: 1.33333rem auto 0.4rem;
}
.box .codeBg {
width: 6.42667rem;
height: 1.22667rem;
line-height: 1.22667rem;
margin: 0 auto 0rem;
background: url(../images/share/codeBg.png) no-repeat;
background-size: 100% 100%;
position: relative;
}
.box .codeBg .copy {
width: 2.13333rem;
height: 0.8rem;
position: absolute;
top: 0.21333rem;
right: 0.21333rem;
}
.box .codeBg .num {
width: 2rem;
height: 1.22667rem;
position: absolute;
left: 2rem;
top: 0;
text-align: center;
color: #666;
font-size: 0.37333rem;
font-weight: bold;
}
.bottom {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background: url(../images/share/bottom.png) no-repeat;
background-size: 100% 100%;
width: 10rem;
height: 1.33333rem;
line-height: 1.33333rem;
text-align: center;
color: #fff;
font-size: 0.4rem;
font-weight: 400;
z-index: 3;
}

View File

@@ -0,0 +1,93 @@
@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
width: 100%;
background: #FE614B;
}
.header {
width: px2rem(750);
height: px2rem(1246);
position: relative;
margin: 0 auto 0;
background: url(../images/share/header.png) no-repeat;
background-size: 100% 100%;
.swiper {
width: px2rem(695);
height: px2rem(723);
position: relative;
left: 50%;
transform: translateX(-53%);
top: px2rem(504);
}
}
.box {
width: px2rem(750);
height: px2rem(458);
background: url(../images/share/box.png) no-repeat;
background-size: 100% 100%;
margin: -1rem auto px2rem(0);
position: relative;
z-index: 2;
overflow: hidden;
.xz {
width: px2rem(482);
height: px2rem(92);
line-height: px2rem(92);
text-align: center;
color: #fff;
font-size: px2rem(32);
background: url(../images/share/xzBg.png) no-repeat;
background-size: 100% 100%;
margin: px2rem(100) auto px2rem(30);
}
.codeBg{
width: px2rem(482);
height: px2rem(92);
line-height: px2rem(92);
margin: 0 auto px2rem(0);
background: url(../images/share/codeBg.png) no-repeat;
background-size: 100% 100%;
position: relative;
.copy{
width: px2rem(160);
height: px2rem(60);
position: absolute;
top: px2rem(16);
right: px2rem(16);
}
.num{
width: 2rem;
height: px2rem(92);
position: absolute;
left: 2rem;
top: 0;
text-align: center;
color: #666;
font-size: px2rem(28);
font-weight: bold;
}
}
}
.bottom{
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background: url(../images/share/bottom.png) no-repeat;
background-size: 100% 100%;
width: px2rem(750);
height: px2rem(100);
line-height: px2rem(100);
text-align: center;
color: #fff;
font-size: px2rem(30);
font-weight: 400;
z-index: 3;
}

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 387 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

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