Compare commits

...

40 Commits

Author SHA1 Message Date
dragon
7aaa2b47b3 修复bug 2024-08-29 10:57:17 +08:00
dragon
e107cea8c9 删除默认数据 2024-08-28 18:56:33 +08:00
dragon
0f5aa15201 处理账单+号 2024-08-28 11:04:00 +08:00
dragon
e2301327df 修复样式问题 2024-08-27 16:35:36 +08:00
dragon
3cf68e463e 修复样式 2024-08-27 15:53:20 +08:00
dragon
4dd4f27a06 修复样式问题 2024-08-27 15:31:02 +08:00
dragon
fc9885f271 修复bug 2024-08-26 19:00:50 +08:00
dragon
797f724485 修复样式异常 2024-08-26 16:12:24 +08:00
dragon
07f7f634a7 修复翻译 2024-08-26 14:08:35 +08:00
dragon
95a27e7b3b 修复bug 2024-08-23 18:33:48 +08:00
dragon
a241918253 新增账单 2024-08-23 10:53:46 +08:00
dragon
aa3f9a7203 修复bug 2024-08-22 19:13:25 +08:00
dragon
9cfd53a88c 优化公会 2024-08-22 16:31:00 +08:00
dragon
2ef8354480 修改英语翻译 2024-08-13 15:09:17 +08:00
dragon
f907063751 替换阿拉伯图片 2024-08-13 15:06:14 +08:00
dragon
c3307b083c 替换阿拉伯图 2024-08-13 14:25:47 +08:00
dragon
be26cc3637 替换图片以及修改翻译阿拉伯 2024-08-13 14:05:36 +08:00
dragon
1e1db9a721 替换ui 2024-08-13 12:00:09 +08:00
dragon
e2ded0a1a8 新增exp活动 2024-08-12 19:38:36 +08:00
dragon
7e49789a75 清理缓存 2024-08-07 14:54:38 +08:00
dragon
e4c8469c41 清理缓存 2024-08-07 14:53:30 +08:00
dragon
e2cfb33723 清除缓存 2024-08-07 14:18:37 +08:00
dragon
292cc23bc4 修复英语区能看到自己工资问题 2024-08-07 14:02:54 +08:00
dragon
29474eb377 关闭点单页面loading 2024-08-06 10:36:14 +08:00
dragon
aaa0607f3a 工会设置修复翻译异常,以及镜像问题 2024-08-05 18:12:38 +08:00
dragon
0cb1e4d2bc 镜像未加入公会榜单 2024-08-02 17:24:29 +08:00
dragon
86fb0de56f 修改阿语翻译-公会 2024-08-02 15:03:29 +08:00
dragon
261f25446c 修改金币总和字段-公会 2024-08-01 20:18:03 +08:00
dragon
5725eaa780 新增代理工资项 2024-08-01 19:05:54 +08:00
dragon
59834dc1e8 修复设置管理员信息异常问题 2024-08-01 16:15:27 +08:00
dragon
db9c260edc 优化h5公会 2024-08-01 14:56:41 +08:00
dragon
b1a29e48f7 首页榜单-清缓存 2024-07-31 18:59:55 +08:00
dragon
410d83865b 修改榜单-第一名展示数值 2024-07-31 18:25:59 +08:00
dragon
c6f3a7bfa0 新增第二第三数值公会榜单 2024-07-27 00:18:01 +08:00
dragon
ab7774e7aa 新增公会榜单数值 2024-07-26 23:45:05 +08:00
dragon
6a8aad5e96 清除榜单缓存 2024-07-26 16:48:11 +08:00
dragon
74a021639e 完成萌新 2024-07-26 16:35:41 +08:00
dragon
481519169a 官网新增监听窗口变大变小逻辑 2024-07-25 15:33:01 +08:00
dragon
2ba05058d4 点单点击整个资料卡跳转资料页 2024-07-24 09:45:00 +08:00
dragon
1b29257c8a 修复公会无法修改信息问题 2024-07-19 15:08:36 +08:00
249 changed files with 26553 additions and 1462 deletions

Binary file not shown.

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: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 236 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 131 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 212 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 215 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 602 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 311 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 492 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 480 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1012 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1013 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 462 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 478 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 506 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

View File

@@ -0,0 +1,334 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title class="text1"></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="ruleIcon"><i class="text2"></i></div>
<div class="tiem text3"></div>
</div>
<!-- 活动礼物 -->
<div class="giftBox">
<h3 class="text4"></h3>
<div class="textBox">
<img src="./images/VIP.png" alt="" class="vip">
<div class="p1 text5"></div>
<div class="p2 text6"></div>
</div>
<div class="giftList">
<div>
<div class="exp text48"></div>
<img src="./images/giftList1.png" alt="" class="gift newIMg1">
<p class="text7"></p>
<span>
<img src="./images/gold.png" alt="" class="gold">
<i class="text44"></i>
</span>
</div>
<div>
<div class="exp text49"></div>
<img src="./images/giftList2.png" alt="" class="gift newIMg2">
<p class="text8"></p>
<span>
<img src="./images/gold.png" alt="" class="gold">
<i class="text45"></i>
</span>
</div>
<div>
<div class="exp text50"></div>
<img src="./images/giftList3.png" alt="" class="gift newIMg3">
<p class="text9"></p>
<span>
<img src="./images/gold.png" alt="" class="gold">
<i class="text46"></i>
</span>
</div>
<div>
<div class="exp text51"></div>
<img src="./images/giftList4.png" alt="" class="gift newIMg4">
<p class="text10"></p>
<span>
<img src="./images/gold.png" alt="" class="gold">
<i class="text47"></i>
</span>
</div>
</div>
</div>
<!-- 等级 -->
<div class="listBox listBox1">
<div class="tab">
<div class="tab1 text19"></div>
<div class="tab2 text20"></div>
</div>
<h3><strong class="text21"> </strong><img src="./images/why.png" alt=""></h3>
<div class="expBox">
<img src="./images/dam.png" alt="" class="dam">
<div class="top">
<div class="l text11"></div>
<div class="r text12"></div>
</div>
<!-- == -->
<div class="bottom">
<div class="l">15<b class="text13"></b></div>
<div class="r">
<div class="gift_sbox">
<div class="title"><strong class="newtext1">7</strong><strong class="text22"></strong></div>
<img src="./images/ts.png" alt="" class="gift ts">
<p class="text14">头饰</p>
</div>
<div class="gift_sbox">
<div class="title"><strong class="newtexts1">7</strong><strong class="text22"></strong></div>
<img src="./images/qp.png" alt="" class="gift qp">
<p class="text15">气泡</p>
</div>
<div class="but act"></div>
</div>
</div>
<!-- == -->
<div class="bottom">
<div class="l">20<b class="text13"></b></div>
<div class="r">
<div class="gift_sbox">
<div class="title"><strong class="newtext2">7</strong><strong class="text22"></strong></div>
<img src="./images/ts.png" alt="" class="gift ts">
<p class="text14">头饰</p>
</div>
<div class="gift_sbox">
<!-- <div class="title">7<strong class="text22">天</strong></div> -->
<img src="./images/bigGold.png" alt="" class="gift">
<p><b class="newText11">*50</b></p>
</div>
<div class="but">已领取</div>
</div>
</div>
<!-- == -->
<div class="bottom">
<div class="l">25<b class="text13"></b></div>
<div class="r">
<div class="gift_sbox">
<div class="title"><strong class="newtext3">7</strong><strong class="text22"></strong></div>
<img src="./images/zj.png" alt="" class="gift zj">
<p class="text16">座駕</p>
</div>
<div class="gift_sbox">
<!-- <div class="title">7<strong class="text22">天</strong></div> -->
<img src="./images/bigGold.png" alt="" class="gift">
<p><b class="newText22">*100</b></p>
</div>
<div class="but">已领取</div>
</div>
</div>
<!-- == -->
<div class="bottom">
<div class="l">30<b class="text13"></b></div>
<div class="r">
<div class="gift_sbox">
<div class="title"><strong class="newtext4">7</strong><strong class="text22"></strong></div>
<img src="./images/xz.png" alt="" class="gift xz">
<p class="text17">勳章</p>
</div>
<div class="gift_sbox">
<!-- <div class="title">7<strong class="text22">天</strong></div> -->
<img src="./images/bigGold.png" alt="" class="gift">
<p><b class="newText33">*300</b></p>
</div>
<div class="but">已领取</div>
</div>
</div>
<!-- == -->
<div class="bottom">
<div class="l">35<b class="text13"></b></div>
<div class="r">
<div class="gift_sbox">
<div class="title"><strong class="newtext5">7</strong><strong class="text22"></strong></div>
<img src="./images/qp.png" alt="" class="gift qp">
<p class="text18">氣泡</p>
</div>
<div class="gift_sbox">
<!-- <div class="title">7<strong class="text22">天</strong></div> -->
<img src="./images/bigGold.png" alt="" class="gift">
<p><b class="newText44">*500</b></p>
</div>
<div class="but">已领取</div>
</div>
</div>
<!-- == -->
<div class="bottom">
<div class="l">40<b class="text13"></b></div>
<div class="r">
<div class="gift_sbox">
<div class="title"><strong class="newtext6">7</strong><strong class="text22"></strong></div>
<img src="./images/ts.png" alt="" class="gift ts">
<p class="text14">頭飾</p>
</div>
<div class="gift_sbox">
<!-- <div class="title">7<strong class="text22">天</strong></div> -->
<img src="./images/bigGold.png" alt="" class="gift">
<p><b class="newText55">*1000</b></p>
</div>
<div class="but">已领取</div>
</div>
</div>
<!-- == -->
<div class="bottom">
<div class="l">45<b class="text13"></b></div>
<div class="r">
<div class="gift_sbox">
<div class="title"><strong class="newtext7">7</strong><strong class="text22"></strong></div>
<img src="./images/zj.png" alt="" class="gift">
<p class="text16"></p>
</div>
<div class="gift_sbox">
<!-- <div class="title">7<strong class="text22">天</strong></div> -->
<img src="./images/bigGold.png" alt="" class="gift zj">
<p><b class="newText66">*1500</b></p>
</div>
<div class="but">已领取</div>
</div>
</div>
<!-- == -->
<div class="bottom">
<div class="l">50<b class="text13"></b></div>
<div class="r">
<div class="gift_sbox">
<div class="title"><strong class="newtext8">7</strong><strong class="text22"></strong></div>
<img src="./images/xz.png" alt="" class="gift xz">
<p class="text17">勳章</p>
</div>
<div class="gift_sbox">
<!-- <div class="title">7<strong class="text22">天</strong></div> -->
<img src="./images/bigGold.png" alt="" class="gift">
<p><b class="newText77">*2000</b></p>
</div>
<div class="but">已领取</div>
</div>
</div>
<div class="my">
<img src="./images/logo.png" alt="" class="tx">
<div class="user">
<p></p>
<div class="lineBox">
<img src="./images/line.png" alt="" class="line">
<div class="content"><strong class="text23"></strong> <b>70%</b></div>
</div>
<div class="exp">
<div><strong class="text24"></strong><b class="b1">0</b></div>
<div>LV.<b class="b2">0</b></div>
</div>
</div>
</div>
</div>
</div>
<!-- 榜单 -->
<div class="listBox2">
<!-- 切换 -->
<div class="tab">
<div class="tab1 text19"></div>
<div class="tab2 text20"></div>
</div>
<!-- 榜一奖励 -->
<div class="topReward">
<div class="listRule text25"></div>
</div>
<!-- 文案描述 -->
<div class="content1 text26"></div>
<div class="content2 text27"></div>
<!-- 前三 -->
<div class="top1">
<img src="./images/top1.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="nick"></div>
<div class="score">EXP:<b>0</b></div>
</div>
<div class="top2">
<img src="./images/top2.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="nick"></div>
<div class="score">EXP:<b>0</b></div>
</div>
<div class="top3">
<img src="./images/top3.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="nick"></div>
<div class="score">EXP:<b>0</b></div>
</div>
<!-- 非前三 -->
<ul>
<!-- <li>
<div class="num">TOP04</div>
<img src="./images/logo.png" alt="" class="tx">
<div class="nick"></div>
<div class="right">
<p>EXP值</p>
<span class="score">0</span>
</div>
</li> -->
</ul>
<!-- 自己 -->
<div class="my">
<div class="rank"></div>
<div class="num"></div>
<img src="./images/logo.png" alt="" class="tx">
<div class="nick"></div>
<div class="right">
<p></p>
<span class="score">0</span>
</div>
</div>
</div>
<!-- EXP疑问弹窗 -->
<div class="exp_pub">
<div class="exp_pub_in">
<div class="title text28"></div>
<h3 class="text29"></h3>
<div class="box">
<div class="top">
<div class="l text12">等级</div>
<div class="r text30"></div>
</div>
<!-- <div class="bottom">
<div class="l">1级</div>
<div class="r">5000</div>
</div> -->
</div>
</div>
</div>
<!-- 规则弹窗 -->
<div class="rule">
<div class="rule_in">
<div class="tab">
<div class="stab1 act1 text31"></div>
<div class="stab2 text32"></div>
</div>
<div class="box">
<img src="./images/rule1.png" alt="" class="img1">
<img src="./images/rule2.png" alt="" class="img2">
</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="./local/en.js"></script>
<script src="./local/zh.js"></script>
<script src="./local/ar.js"></script>
<script src="./js/index.js?v=1.1"></script>
<script src="../../common/local/langHandler.js"></script>

View File

@@ -0,0 +1,363 @@
let urlPrefix = getUrlPrefix()
let browser = checkVersion()
let env = EnvCheck();
if (env == 'test') {
new VConsole();
}
// 封裝layer消息提醒框
let layerIndex
var langReplace;
var localLang;
const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => {
layer.open({
type: 2,
shadeClose: false,
content,
success(e) {
layerIndex = $(e).attr('index')
}
})
}
const hideLoading = (index) => {
layer.close(index)
}
const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => {
layer.open({
content,
time,
skin: 'msg'
})
}
var countupTime;//倒计时容器
var isLock = true;
var page = 1;
// 初始化函數
$(function () {
getInfoFromClient();
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
setTimeout(function () {
// 頁面全屏
if (browser.app) {
if (browser.android) {
window.androidJsObj.initShowNav(false)
} else {
window.webkit.messageHandlers.initShowNav.postMessage(0)
}
};
// 頂部返回事件
$('.back img').click(() => {
if (browser.android) {
window.androidJsObj.closeWebView()
} else {
window.webkit.messageHandlers.closeWebView.postMessage(null)
}
})
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
langReplace = window.lang.replace;
localLang = window.lang;
translateFun();
getConfig();
}, 100)
})
function translateFun() {
var langReplace = window.lang.replace;
var localLang = window.lang;
$('.text1').text(langReplace(localLang.demoModule.text1));
$('.text2').text(langReplace(localLang.demoModule.text2));
$('.text3').text(langReplace(localLang.demoModule.text3));
$('.text4').text(langReplace(localLang.demoModule.text4));
$('.text5').text(langReplace(localLang.demoModule.text5));
$('.text6').text(langReplace(localLang.demoModule.text6));
$('.text7').text(langReplace(localLang.demoModule.text7));
$('.text8').text(langReplace(localLang.demoModule.text8));
$('.text9').text(langReplace(localLang.demoModule.text9));
$('.text10').text(langReplace(localLang.demoModule.text10));
$('.text11').text(langReplace(localLang.demoModule.text11));
$('.text12').text(langReplace(localLang.demoModule.text12));
$('.text13').text(langReplace(localLang.demoModule.text13));
$('.text14').text(langReplace(localLang.demoModule.text14));
$('.text15').text(langReplace(localLang.demoModule.text15));
$('.text16').text(langReplace(localLang.demoModule.text16));
$('.text17').text(langReplace(localLang.demoModule.text17));
$('.text18').text(langReplace(localLang.demoModule.text18));
$('.text19').text(langReplace(localLang.demoModule.text19));
$('.text20').text(langReplace(localLang.demoModule.text20));
$('.text21').text(langReplace(localLang.demoModule.text21));
$('.text22').text(langReplace(localLang.demoModule.text22));
$('.text23').text(langReplace(localLang.demoModule.text23));
$('.text24').text(langReplace(localLang.demoModule.text24));
$('.text25').text(langReplace(localLang.demoModule.text25));
$('.text26').text(langReplace(localLang.demoModule.text26));
$('.text27').text(langReplace(localLang.demoModule.text27));
$('.text28').text(langReplace(localLang.demoModule.text28));
$('.text29').text(langReplace(localLang.demoModule.text29));
$('.text30').text(langReplace(localLang.demoModule.text30));
$('.text31').text(langReplace(localLang.demoModule.text31));
$('.text32').text(langReplace(localLang.demoModule.text32));
$('.text43').text(langReplace(localLang.demoModule.text43));
$('.text44').text(langReplace(localLang.demoModule.text44));
$('.text45').text(langReplace(localLang.demoModule.text45));
$('.text46').text(langReplace(localLang.demoModule.text46));
$('.text47').text(langReplace(localLang.demoModule.text47));
$('.text48').text(langReplace(localLang.demoModule.text48));
$('.text49').text(langReplace(localLang.demoModule.text49));
$('.text50').text(langReplace(localLang.demoModule.text50));
$('.text51').text(langReplace(localLang.demoModule.text51));
$('.newtext1').text(langReplace(localLang.demoModule.newtext1));
$('.newtexts1').text(langReplace(localLang.demoModule.newtexts1));
$('.newtext2').text(langReplace(localLang.demoModule.newtext2));
$('.newtext3').text(langReplace(localLang.demoModule.newtext3));
$('.newtext4').text(langReplace(localLang.demoModule.newtext4));
$('.newtext5').text(langReplace(localLang.demoModule.newtext5));
$('.newtext6').text(langReplace(localLang.demoModule.newtext6));
$('.newtext7').text(langReplace(localLang.demoModule.newtext7));
$('.newtext8').text(langReplace(localLang.demoModule.newtext8));
$('.newText11').text(langReplace(localLang.demoModule.newText11));
$('.newText22').text(langReplace(localLang.demoModule.newText22));
$('.newText33').text(langReplace(localLang.demoModule.newText33));
$('.newText44').text(langReplace(localLang.demoModule.newText44));
$('.newText55').text(langReplace(localLang.demoModule.newText55));
$('.newText66').text(langReplace(localLang.demoModule.newText66));
$('.newText77').text(langReplace(localLang.demoModule.newText77));
$('.header').attr('style', langReplace(localLang.demoModule.img1))
$('.giftBox').attr('style', langReplace(localLang.demoModule.img2))
$('.listBox2 .topReward').attr('style', langReplace(localLang.demoModule.img5))
$('.rule .rule_in .box .img1').attr('src', langReplace(localLang.demoModule.img3))
$('.rule .rule_in .box .img2').attr('src', langReplace(localLang.demoModule.img4))
$('.newIMg1').attr('src', langReplace(localLang.demoModule.newIMg1))
$('.newIMg2').attr('src', langReplace(localLang.demoModule.newIMg2))
$('.newIMg3').attr('src', langReplace(localLang.demoModule.newIMg3))
$('.newIMg4').attr('src', langReplace(localLang.demoModule.newIMg4))
}
// 配置接口
function getConfig() {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/act/expBattle/getConfig',
success(res) {
if (res.code === 200) {
// 活动结束
if ((res.data.endTime - res.timestamp) <= 0) {
$('.header .tiem').text(langReplace(localLang.demoModule.text33));
}
var me = res.data.me
// 处理自己
$('.listBox .expBox .my .tx').attr('src', me.avatar);
$('.listBox .expBox .my .user p').text(me.nick);
$('.listBox .expBox .my .user .exp .b1').text(me.level);
$('.listBox .expBox .my .user .exp .b2').text(me.level + 1);
if (me.level >= 50) {
$('.listBox .expBox .my .user .exp .b2').text(me.level);
}
// 处理任务状态
var levelTaskStatusMap = res.data.levelTaskStatusMap;
const sortedKeys = Object.keys(levelTaskStatusMap).sort((a, b) => Number(a) - Number(b));
const sortedObj = {};
sortedKeys.forEach(key => {
sortedObj[key] = levelTaskStatusMap[key];
});
Object.getOwnPropertyNames(sortedObj).forEach((res, i) => {
if (sortedObj[res] == 0) {
$(`.listBox .expBox .bottom`).eq(i).children('.r').children('.but').removeClass('act');
$(`.listBox .expBox .bottom`).eq(i).children('.r').children('.but').text(langReplace(localLang.demoModule.text34));
} else if (sortedObj[res] == 1) {
$(`.listBox .expBox .bottom`).eq(i).children('.r').children('.but').addClass('act');
$(`.listBox .expBox .bottom`).eq(i).children('.r').children('.but').text(langReplace(localLang.demoModule.text34));
$(`.listBox .expBox .bottom`).eq(i).children('.r').children('.but').attr("status", sortedObj[res]);
$(`.listBox .expBox .bottom`).eq(i).children('.r').children('.but').attr("leve", Object.keys(sortedObj)[i]);
} else {
$(`.listBox .expBox .bottom`).eq(i).children('.r').children('.but').removeClass('act');
$(`.listBox .expBox .bottom`).eq(i).children('.r').children('.but').text(langReplace(localLang.demoModule.text35));
}
})
// 处理等级
var expLevelMap = res.data.expLevelMap;
const sortedKeys1 = Object.keys(expLevelMap).sort((a, b) => Number(a) - Number(b));
const sortedObj1 = {};
sortedKeys1.forEach(key => {
sortedObj1[key] = expLevelMap[key];
});
var str = '';
$('.exp_pub .exp_pub_in .box .bottom').remove();
for (const key in sortedObj1) {
if (sortedObj1.hasOwnProperty(key)) { // 仅遍历对象自身的属性,不包括继承的属性
const value = sortedObj1[key];
str += `
<div class="bottom">
<div class="l">${value}${langReplace(localLang.demoModule.text13)}</div>
<div class="r">${key}</div>
</div>
`
}
}
$('.exp_pub .exp_pub_in .box').append(str)
console.log(sortedKeys1);
$(`.listBox .expBox .my .user .lineBox .content b`).text(`${me.score}/${sortedKeys1[me.level]}`)
$('.listBox .expBox .my .user .lineBox .line').css('width', `${(me.score / sortedKeys1[me.level] * 100) > 100 ? 100 : me.score / sortedKeys1[me.level] * 100}%`)
if (me.level >= 50) {
$(`.listBox .expBox .my .user .lineBox .content b`).text(me.score);
$('.listBox .expBox .my .user .lineBox .line').css('width', `${100}%`)
}
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error(err) {
hideLoading(layerIndex)
toastMsg(langReplace(localLang.demoModule.layerIndex3))
}
})
}
// 打开EXP疑问弹窗
$('.listBox h3 img').click(function () {
$('.exp_pub').show();
bodyScroolFun(true);
})
// 关闭EXP疑问弹窗
$('.exp_pub').click(function () {
$('.exp_pub').hide();
bodyScroolFun(false);
})
// 榜单接口
function getRank() {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/act/expBattle/getRank',
success(res) {
if (res.code === 200) {
var my = res.data.meRank;
var listTo3 = res.data.rankList.slice(0, 3);
var notListTo3 = res.data.rankList.slice(3);
if (listTo3.length < 3) {
let arr = new Array(3 - listTo3.length).fill({
avatar: './images/logo.png',
nick: langReplace(localLang.demoModule.text36),
score: 0
})
listTo3.push(...arr)
}
// 处理前三
listTo3.forEach((res, i) => {
$(`.listBox2 .top${i + 1} .tx`).attr('src', res.avatar);
$(`.listBox2 .top${i + 1} .nick`).text(res.nick);
$(`.listBox2 .top${i + 1} .score b`).text(unitProcessingAr(res.score, 1));
})
// 非前三
$('.listBox2 ul li').remove();
var str = '';
notListTo3.forEach(res => {
str += `
<li>
<div class="num">TOP${res.ranking}</div>
<img src="${res.avatar}" alt="" class="tx">
<div class="nick">${res.nick}</div>
<div class="right">
<p>${langReplace(localLang.demoModule.text37)}</p>
<span class="score">${unitProcessingAr(res.score, 1)}</span>
</div>
</li>
`
})
$('.listBox2 ul').append(str);
// 处理自己
if (my.ranking == 0) {
if (res.data.rankList.length == 0) {
$('.listBox2 .my .rank').text(`${langReplace(localLang.demoModule.text38)}0EXP`);
} else {
$('.listBox2 .my .rank').text(`${langReplace(localLang.demoModule.text39)}${unitProcessingAr(res.data.rankList[res.data.rankList.length - 1].score - my.score)}EXP`);
}
} else {
if (my.ranking == 1) {
$('.listBox2 .my .rank').text(`${langReplace(localLang.demoModule.text40)}${unitProcessingAr(my.score - res.data.rankList[1].score, 1)}EXP`);
} else {
$('.listBox2 .my .rank').text(`${langReplace(localLang.demoModule.text41)}${unitProcessingAr(res.data.rankList[my.ranking - 2].score - my.score)}EXP`);
}
}
$('.listBox2 .my .num').text(my.ranking == 0 ? langReplace(localLang.demoModule.text42) : `TOP${my.ranking}`)
$('.listBox2 .my .tx').attr('src', my.avatar);
$('.listBox2 .my .nick').text(my.nick)
$('.listBox2 .my .score').text(unitProcessingAr(my.score, 1))
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error(err) {
hideLoading(layerIndex)
toastMsg(langReplace(localLang.demoModule.layerIndex3))
}
})
}
// 切换等级和榜单
$('.listBox .tab div,.listBox2 .tab div').click(function () {
var i = $(this).index() + 1;
$('.listBox2,.listBox1').hide()
$(`.listBox${i}`).show();
if (i == 2) {
getRank();
}
})
// 领取奖励按钮
$('.listBox .expBox .bottom .r .but').click(function () {
var status = $(this).attr('status');
var leve = $(this).attr('leve');
if (status == 1) {
getReward(leve);
}
})
// 领取接口
function getReward(level) {
showLoading()
networkRequest({
type: 'post',
url: urlPrefix + '/act/expBattle/getReward',
data: { level },
success(res) {
if (res.code === 200) {
getConfig();
toastMsg(langReplace(localLang.demoModule.text43));
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error(err) {
hideLoading(layerIndex)
toastMsg(langReplace(localLang.demoModule.layerIndex3))
}
})
}
// 打开活动规则
$('.header .ruleIcon').click(function () {
$('.rule .rule_in .tab div').removeClass('act1').removeClass('act2');
$('.rule .rule_in .tab .stab1 ').addClass(`act1`);
$(`.rule .rule_in .box .img1`).show().siblings().hide();
$('.rule').show();
bodyScroolFun(true);
})
// 打开榜单规则
$('.listBox2 .topReward .listRule').click(function () {
$('.rule .rule_in .tab div').removeClass('act1').removeClass('act2');
$('.rule .rule_in .tab .stab2 ').addClass(`act2`);
$(`.rule .rule_in .box .img2`).show().siblings().hide();
$('.rule').show();
bodyScroolFun(true);
})
// 关闭活动规则
$('.rule').click(function () {
$('.rule').hide();
bodyScroolFun(false);
return false
})
// 切换规则
$('.rule .rule_in .tab div').click(function () {
var i = $(this).index() + 1;
$('.rule .rule_in .tab div').removeClass('act1').removeClass('act2');
$(this).addClass(`act${i}`);
$(`.rule .rule_in .box .img${i}`).show().siblings().hide();
return false
})

View File

@@ -0,0 +1,86 @@
// 阿拉伯
langAr = {
// 模块
demoModule: {
layerIndex1: `جار التحميل...`,
layerIndex2: `تم العملية بنجاح`,
layerIndex3: `خطأ في الشبكة`,
img1: `background: url(./images/header_ar.png) no-repeat;background-size: 100% 100%;`,
img2: `background: url(./images/giftBg_ar.png) no-repeat;background-size: 100% 100%;`,
img5: `background: url(./images/topReward_ar.png) no-repeat;background-size: 100% 100%;`,
img3: `./images/rule1_ar.png`,
img4: `./images/rule2_ar.png`,
newIMg1:`./images/giftList1_ar.png`,
newIMg2:`./images/giftList2_ar.png`,
newIMg3:`./images/giftList3_ar.png`,
newIMg4:`./images/giftList4_ar.png`,
text1: `تحدى زيادة المستوى`,
text2: `قاعدة`,
text3: `وقت النشاط:2024.08.13 إلى 08.22`,
text4: `ارسال هديا ،لزيادة المستوى`,
text5: `مستخدم vip:يمكنه ارسال هديا الحدث والحصول على اعلي نقاط`,
text6: `509564EXP!`,
text7: `خاتم القمر`,
text8: `نجوم الفضاء `,
text9: `الفضائى`,
text10: `ملك الفضاء`,
text11: `مستوى`,
text12: `مكافئات`,
text13: `مستوى`,
text14: `اطارات`,
text15: `فقاعة محادثة`,
text16: `دخولية`,
text17: `وسام`,
text18: `فقاعة محادثة`,
text19: `مكافئة الحدث`,
text20: `ترتيب `,
text21: `(الوصول للمستوايات التالية يمكنك الحصول علي مكافئة)`,
text22: `سماء`,
// text23: `باقى على المستوى القادم`,
text23: ` `,
text24: `الحالي:LV.`,
text25: `قراءة المزيد`,
text26: `تبعا لهدايا الحدث المرسلة هيكون هناك ترتيب للحدث`,
text27: `(اول 50 مستخدم في قائمة الحدث يمكنهم الحصول علي جوائز)`,
text28: `نقاط المستوى `,
text29: `(ارسال هدايا وازداد فى نقاط المستوى)`,
text30: `جميع النقاط`,
text31: `قواعد الحدث`,
text32: `مكافئات الترتيب`,
text33: `انتهاء الحدث`,
text34: `احصل على `,
text35: `تم الحصول `,
text36: ` `,
text37: `قيمة الخبرة`,
text38: `باقى على الظهور في الترتيب :`,
text39: `باقى على الظهور في الترتيب :`,
text40: `لازالت تحتاج الى : لتظهر بقائمة الترتيب`,
text41: `باقى على الظهور في الترتيب :`,
text42: `غير مدرج`,
text43: `لقد حصلت علي المكافئة بنجاح`,
text44: `30`,
text45: `150`,
text46: `1200`,
text47: `13999`,
text48: `300 EXP`,
text49: `2250 EXP`,
text50: `26400 EXP`,
text51: `391972 EXP`,
newtext1:`7`,
newtexts1:`7`,
newtext2:`7`,
newtext3:`14`,
newtext4:`14`,
newtext5:`30`,
newtext6:`30`,
newtext7:`30`,
newtext8:`30`,
newText11:`*50`,
newText22:`*100`,
newText33:`*300`,
newText44:`*500`,
newText55:`*1000`,
newText66:`*1500`,
newText77:`*2000`,
}
}

View File

@@ -0,0 +1,84 @@
langEn = {
demoModule: {
layerIndex1: `Loading...`,
layerIndex2: `Success`,
layerIndex3: `Network error`,
img1: `background: url(./images/header_en.png) no-repeat;background-size: 100% 100%;`,
img2: `background: url(./images/giftBg_en.png) no-repeat;background-size: 100% 100%;`,
img5: `background: url(./images/topReward_en.png) no-repeat;background-size: 100% 100%;`,
img3: `./images/rule1_en.png`,
img4: `./images/rule2_en.png`,
newIMg1:`./images/giftList1_en.png`,
newIMg2:`./images/giftList2_en.png`,
newIMg3:`./images/giftList3_en.png`,
newIMg4:`./images/giftList4_en.png`,
text1: `level event`,
text2: `rule`,
text3: `the time of event :2024.08.13-2024.08.22`,
text4: `Send following gifts to get EXP`,
text5: ` VIP5-9 can get additional EXP, UP TO`,
text6: `1001000EXP!`,
text7: `Moon ring`,
text8: `Crystal Moon`,
text9: `Interstellar`,
text10: `Interstellar Overlord`,
text11: `level`,
text12: `reward`,
text13: `Level`,
text14: `AvatarFr`,
text15: `Chat bubble`,
text16: `Mount`,
text17: `Medal`,
text18: `Chat bubble`,
text19: `Level's rewards`,
text20: `Ranking`,
text21: `(When u reach these levels ,u can get these gifts)`,
text22: `days`,
// text23: `u still need ....exp to reach the next level`,
text23: ` `,
text24: `Current:LV.`,
text25: `more detalis`,
text26: `Ranked according to the EXP increased by sending event gifts. the higher the EXP, the higher the rank`,
text27: `(The top 50 will receive more rewards)`,
text28: `EXP Points`,
text29: `(Send following gifts to get EXP ,and get rewards)`,
text30: `The all expx points`,
text31: `The event rules`,
text32: `Leaderboard rewards`,
text33: `End of event`,
text34: `get it`,
text35: `Received`,
text36: ` `,
text37: `EXP value`,
text38: `u still need points to surpass the next user:`,
text39: `u still need points to surpass the next user:`,
text40: `u are Ahead of second place by points `,
text41: `u still need points to be in the ranking list:`,
text42: `not ranked`,
text43: `You've successfully claimed your reward!`,
text44: `1333`,
text45: `5000`,
text46: `12000`,
text47: `27500`,
text48: `13330 EXP`,
text49: `75000 EXP`,
text50: `264000 EXP`,
text51: `770000 EXP`,
newtext1:`7`,
newtexts1:`7`,
newtext2:`7`,
newtext3:`14`,
newtext4:`14`,
newtext5:`30`,
newtext6:`30`,
newtext7:`30`,
newtext8:`30`,
newText11:`*50`,
newText22:`*100`,
newText33:`*300`,
newText44:`*500`,
newText55:`*1000`,
newText66:`*1500`,
newText77:`*2000`,
}
}

View File

@@ -0,0 +1,86 @@
// 中文
langZh = {
// 模塊
demoModule: {
layerIndex1: `加載中...`,
layerIndex2: `操作成功`,
layerIndex3: `網絡錯誤`,
img1: `background: url(./images/header.png) no-repeat;background-size: 100% 100%;`,
img2: `background: url(./images/giftBg.png) no-repeat;background-size: 100% 100%;`,
img5: `background: url(./images/topReward.png) no-repeat;background-size: 100% 100%;`,
img3: `./images/rule1.png`,
img4: `./images/rule2.png`,
newIMg1: `./images/giftList1.png`,
newIMg2: `./images/giftList2.png`,
newIMg3: `./images/giftList3.png`,
newIMg4: `./images/giftList4.png`,
text1: `加速之戰`,
text2: `規則`,
text3: `活動時間:2024.08.13-08.22`,
text4: `送禮物,增加EXP`,
text5: `VIP用戶送出活動禮物最高可獲得`,
text6: `1892800EXP!`,
text7: `星芒石`,
text8: `聖魔權杖`,
text9: `浩瀚星河`,
text10: `星辰之力`,
text11: `等級`,
text12: `獎勵`,
text13: ``,
text14: `頭飾`,
text15: `氣泡`,
text16: `座駕`,
text17: `勳章`,
text18: `氣泡`,
text19: `等級獎勵`,
text20: `榜單`,
text21: `(達到以下等級即可領取獎勵)`,
text22: ``,
// text23: `距離下一等級還差`,
text23: ` `,
text24: `當前:LV.`,
text25: `查看更多`,
text26: `根據送出活動禮物增加的EXP進行排名EXP越高排序越靠前`,
text27: `(EXP最多的前TOP50名用戶將會獲得活動獎勵)`,
text28: `EXP等級`,
text29: `(送禮物增加EXP達到等級領取獎勵)`,
text30: `需要的EXP`,
text31: `活動規則`,
text32: `榜單獎勵`,
text33: `活動結束`,
text34: `領取`,
text35: `已領取`,
text36: `虛位以待`,
text37: `EXP值`,
text38: `距離上榜還差:`,
text39: `距離上榜還差:`,
text40: `領先第二名:`,
text41: `距上一名還差:`,
text42: `未上榜`,
text43: `您已成功領取獎勵`,
text44: `990`,
text45: `5200`,
text46: `13140`,
text47: `52000`,
text48: `9900 EXP`,
text49: `78000 EXP`,
text50: `289080 EXP`,
text51: `1456000 EXP`,
newtext1: `7`,
newtexts1: `7`,
newtext2: `7`,
newtext3: `14`,
newtext4: `14`,
newtext5: `30`,
newtext6: `30`,
newtext7: `30`,
newtext8: `30`,
newText11: `*100`,
newText22: `*500`,
newText33: `*1000`,
newText44: `*5000`,
newText55: `*10000`,
newText66: `*15000`,
newText77: `*20000`,
},
}

View File

@@ -739,11 +739,11 @@ function getInfoFromClient() {
}
} else {
// 非app环境调试参数
pubInfo.uid = sessionStorage.getItem("uid") ? sessionStorage.getItem("uid") : '';
// pubInfo.ticket = sessionStorage.getItem("ticket") ? sessionStorage.getItem("ticket") : '';
pubInfo.h5_token = sessionStorage.getItem("ticket") ? sessionStorage.getItem("ticket") : '';
pubInfo.deviceId = "0";
// 非app环境调试参数
pubInfo.uid = sessionStorage.getItem("uid") ? sessionStorage.getItem("uid") : '';
// pubInfo.ticket = sessionStorage.getItem("ticket") ? sessionStorage.getItem("ticket") : '';
pubInfo.h5_token = sessionStorage.getItem("ticket") ? sessionStorage.getItem("ticket") : '';
pubInfo.deviceId = "0";
pubInfo.deviceInfo = {
app: 'molistarApp',
appVersion: '9.9.9',
@@ -826,14 +826,14 @@ function fuzzyMatchUpdateQueryStringParameterFun() {
}
}
function langCodeFun(langCode) {
if (window.location.href.match(/guildAr/)) {
return
}
var body = document.body;
body.style.display = 'none';
setTimeout(function () {
body.style.display = 'block';
}, 500)
// if (window.location.href.match(/guildAr/)) {
// return
// }
// var body = document.body;
// body.style.display = 'none';
// setTimeout(function () {
// body.style.display = 'block';
// }, 500)
if (langCode == "ar") {
document.documentElement.setAttribute("dir", "rtl");
document.body.classList.add('arabic');
@@ -841,9 +841,9 @@ function langCodeFun(langCode) {
} else if (langCode == "en") {
document.body.classList.add('english');
}
if (window.location.href.match(/guildAr/)) {
document.documentElement.setAttribute("dir", "ltr");
}
// if (window.location.href.match(/guildAr/)) {
// document.documentElement.setAttribute("dir", "ltr");
// }
}
// 获取整条url
function updateQueryStringParameter(uri, key, value) {

View File

@@ -161,7 +161,7 @@
<script src="./local/ar.js"></script>
<script src="./local/en.js"></script>
<script src="./local/zh.js"></script>
<script src="./js/index.js?v=2.11"></script>
<script src="./js/index.js?v=2.12"></script>
<script src="../common/local/langHandler.js"></script>
</body>

View File

@@ -62,7 +62,7 @@ $(function () {
];
setTimeout(function () {
function getUserLanguage() {
console.log(navigator.language, navigator.userLanguage);
console.log('ssss',navigator,navigator.language, navigator.userLanguage);
return navigator.language || navigator.userLanguage; // 兼容不同浏览器的方式
}
// var langCode = getLanguageCode(getUserLanguage());
@@ -358,4 +358,12 @@ function animatedFun(dom, arrClass) {
// 禁止瀏覽器下拉刷新
document.addEventListener('touchmove', event => {
event.preventDefault()
}, { passive: false })
}, { passive: false })
// 定义处理窗口大小变化的函数
function handleResize() {
location.reload()
// 这里可以添加更多的逻辑,比如检查窗口的新尺寸
}
// 监听窗口大小变化事件
window.addEventListener('resize', handleResize);

View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title class="text1"></title>
<!-- 添加管理员页面 -->
<link rel="stylesheet" href="../../common/css/reset.css">
<link rel="stylesheet" href="./css/adminSet.css?v=1.0">
</head>
<body>
<!-- 顶部 -->
<div class="back">
<img src="./images/travel/backB.png" alt="" class="backs">
<img src="./images/fdj.png" alt="" class="fdj">
<input class="text16" type="text" placeholder="">
<div class="text text2"></div>
</div>
<!-- 内容 -->
<ul>
<!-- <li>
<img src="./images/logo.png" alt="" class="tx">
<div class="user">
<p>昵称昵称昵称昵称</p>
<img src="./images/boy.png" alt="" class="sex">
<img src="./images/icon1.png" alt="" class="wealth">
<img src="./images/icon2.png" alt="" class="charm">
<b>ID:0</b>
</div>
<div class="but">إضافة </div>
</li> -->
<li class="null">
<img src="./images/null.png" alt="">
<span class="text3"></span>
</li>
</ul>
<!-- 设置管理员弹窗 -->
<div class="pub">
<div class="pub_in">
<p class="text4"></p>
<div class="butBox">
<div class="close texts1"></div>
<div class="ok texts2"></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="./local/en.js"></script>
<script src="./local/zh.js"></script>
<script src="./local/ar.js"></script>
<script src="./js/adminSet.js"></script>
<script src="../../common/local/langHandler.js"></script>

View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title class="text1"></title>
<!-- 移除管理员页面 -->
<link rel="stylesheet" href="../../common/css/reset.css">
<link rel="stylesheet" href="./css/adminSet2.css?v=1.0">
</head>
<body>
<!-- 顶部 -->
<div class="back">
<img src="./images/travel/backB.png" alt="" class="backs">
<div class="title text2"> </div>
<div class="text text3"></div>
</div>
<!-- 内容 -->
<ul>
<!-- <li>
<img src="./images/logo.png" alt="" class="tx">
<div class="user">
<p>昵称昵称昵称昵称</p>
<img src="./images/boy.png" alt="" class="sex">
<img src="./images/icon1.png" alt="" class="wealth">
<img src="./images/icon2.png" alt="" class="charm">
<b>ID:0</b>
</div>
<div class="but">حذف </div>
</li> -->
<li class="null">
<img src="./images/null.png" alt="">
<span class="text4"></span>
</li>
</ul>
<!-- 设置管理员弹窗 -->
<div class="pub">
<div class="pub_in">
<!-- 移除管理员 -->
<p class="text5"></p>
<div class="butBox">
<div class="close text6"></div>
<div class="ok text7"></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="./local/en.js"></script>
<script src="./local/zh.js"></script>
<script src="./local/ar.js"></script>
<script src="./js/adminSet2.js"></script>
<script src="../../common/local/langHandler.js"></script>

View File

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title id="bill_title" class="text1">Bill</title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="" />
<script src="../../common/js/flexible.js"></script>
<link rel="stylesheet" href="../../common/css/reset.css" />
<link rel="stylesheet" href="css/bill.css" />
</head>
<body>
<div class="nav">
<img src="./images/travel/back3.png" class="back" alt="" />
<p class="text1"></p>
</div>
<div class="income_expenses">
<p class="item act text2"></p>
<p class="item text3"></p>
</div>
<ul>
<!-- <li>
<div>
<p>Salary exchange for coins</p>
<b>-0ÜS</b>
</div>
<div>
<span>Salary:100ÜS->50ÜS</span>
<span>2024/06/11 11:12:56</span>
</div>
</li>
<li>
<div>
<p>Salary exchange for coins</p>
<b>-0ÜS</b>
</div>
<div>
<span>Salary:100ÜS->50ÜS</span>
<span>2024/06/11 11:12:56</span>
</div>
</li> -->
</ul>
<script src="../../common/js/jquery-3.2.1.min.js"></script>
<script src="../../common/js/flexible.js"></script>
<script src="../../common/js/vconsole.min.js"></script>
<script src="../../common/js/common2.js"></script>
<script src="../../common/js/layer.js"></script>
<script src="./local/en.js"></script>
<script src="./local/zh.js"></script>
<script src="./local/ar.js"></script>
<script src="./js/bill.js"></script>
<script src="../../common/local/langHandler.js"></script>
</body>
</html>

View File

@@ -0,0 +1,276 @@
html,
body {
width: 100%;
height: 17.78667rem;
background: #eaeaec;
}
.back {
width: 100%;
height: 2.8rem;
position: fixed;
left: 0;
top: 0rem;
text-align: center;
color: #FFFFFF;
font-size: 0.50667rem;
font-weight: bold;
z-index: 10;
background: #fff;
}
.back .backs {
width: 0.58667rem;
height: 0.58667rem;
position: absolute;
left: 0.24rem;
top: 54%;
}
.back .fdj {
width: 0.42667rem;
height: 0.42667rem;
position: absolute;
top: 58%;
left: 1.41333rem;
z-index: 2;
}
.back input {
border: none;
outline: none;
background: #eaeaec;
width: 6.8rem;
height: 0.74667rem;
line-height: 0.74667rem;
border-radius: 0.74667rem;
box-sizing: border-box;
padding-left: 0.72rem;
position: absolute;
left: 1.22667rem;
top: 65%;
transform: translateY(-50%);
color: #333;
font-size: 0.32rem;
}
.back input::placeholder {
color: #BCBDCB;
font-size: 0.29333rem;
}
.back .text {
position: absolute;
right: 0.62667rem;
height: 100%;
top: 0;
line-height: 3.73333rem;
color: #333333;
font-size: 0.45333rem;
font-weight: bold;
}
ul {
width: 10rem;
height: 18rem;
margin: 2.53333rem auto 0;
overflow-y: scroll;
padding-top: 0.34667rem;
box-sizing: border-box;
}
ul::-webkit-scrollbar {
display: none;
}
ul li {
width: 9.06667rem;
height: 2.13333rem;
box-sizing: border-box;
overflow: hidden;
margin: 0 auto 0.44rem;
position: relative;
background: #fff;
border-radius: 0.13333rem;
}
ul li .tx {
width: 1.06667rem;
height: 1.06667rem;
border-radius: 1.06667rem;
float: left;
margin-right: 0.14667rem;
margin-left: 0.13333rem;
display: block;
margin-top: 0.44rem;
}
ul li .user {
float: left;
width: 6rem;
}
ul li .user p {
color: #515665;
font-size: 0.37333rem;
font-weight: bold;
display: inline-block;
margin-right: 0.10667rem;
margin-bottom: 0.16rem;
width: 2.7rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
box-sizing: border-box;
padding-top: 0.66667rem;
}
ul li .user b {
display: block;
color: #A4ABB2;
font-size: 0.32rem;
}
ul li .user .sex {
width: 0.24rem;
height: 0.24rem;
display: inline-block;
margin-top: 0.81333rem;
margin-right: 0.10667rem;
}
ul li .user .wealth,
ul li .user .charm {
display: inline-block;
width: 0.96rem;
height: 0.48rem;
margin-top: 0.64rem;
}
ul li .but {
width: 1.17333rem;
height: 0.56rem;
background: #AA6CF5;
border-radius: 0.56rem;
position: absolute;
right: 0.34667rem;
top: 1.18667rem;
text-align: center;
color: #fff;
line-height: 0.56rem;
font-size: 0.34667rem;
font-weight: 400;
}
ul li .chairman {
width: 1.04rem;
height: 0.34667rem;
line-height: 0.34667rem;
border-radius: 0.34667rem;
text-align: center;
color: #333;
font-size: 0.29333rem;
font-weight: 400;
position: absolute;
left: 0.16rem;
top: 0.94667rem;
background: linear-gradient(90deg, #FFEB67, #FFFCE7);
}
ul li .administrator {
width: 1.04rem;
height: 0.34667rem;
line-height: 0.34667rem;
border-radius: 0.34667rem;
text-align: center;
color: #333;
font-size: 0.29333rem;
font-weight: 400;
position: absolute;
left: 0.16rem;
top: 0.94667rem;
background: linear-gradient(-90deg, #FBE1FF, #F090FF);
}
ul .null {
width: 100%;
height: 100%;
position: relative;
}
ul .null img {
width: 1.96rem;
height: 2.01333rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
ul .null span {
width: 100%;
left: 0;
top: 55%;
transform: translateY(-50%);
color: #A9A9A9;
font-size: 0.4rem;
font-weight: 400;
position: absolute;
text-align: center;
}
.pub {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 11;
display: none;
}
.pub .pub_in {
background: #fff;
border-radius: 0.4rem;
box-sizing: border-box;
padding: 0.66667rem 0.45333rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.pub .pub_in p {
text-align: center;
color: #333333;
font-size: 0.45333rem;
font-weight: bold;
}
.pub .pub_in .butBox {
width: 6.85333rem;
display: flex;
justify-content: space-between;
margin: 0.66667rem auto 0;
}
.pub .pub_in .butBox div {
width: 3.2rem;
height: 1.01333rem;
text-align: center;
line-height: 1.01333rem;
border-radius: 1.01333rem;
font-size: 0.45333rem;
font-weight: bold;
}
.pub .pub_in .butBox .close {
background: #F5F5F5;
color: #999999;
}
.pub .pub_in .butBox .ok {
background: linear-gradient(90deg, #53C7D4, #7C5EFD);
color: #fff;
}

View File

@@ -0,0 +1,280 @@
@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
width: 100%;
height: px2rem(1334);
background: #eaeaec;
}
.back {
width: 100%;
height: px2rem(210);
position: fixed;
left: 0;
top: px2rem(0);
text-align: center;
color: #FFFFFF;
font-size: px2rem(38);
font-weight: bold;
z-index: 10;
background: #fff;
.backs {
width: px2rem(44);
height: px2rem(44);
position: absolute;
left: px2rem(18);
top: 54%;
}
.fdj {
width: px2rem(32);
height: px2rem(32);
position: absolute;
top:58%;
left: px2rem(106);
z-index: 2;
}
input {
border: none;
outline: none;
background: #eaeaec;
width: px2rem(510);
height: px2rem(56);
line-height: px2rem(56);
border-radius: px2rem(56);
box-sizing: border-box;
padding-left: px2rem(54);
position: absolute;
left: px2rem(92);
top: 65%;
transform: translateY(-50%);
color: #333;
font-size: px2rem(24);
&::placeholder {
color: #BCBDCB;
font-size: px2rem(22);
}
}
.text {
position: absolute;
right: px2rem(47);
height: 100%;
top: 0;
line-height: px2rem(280);
color: #333333;
font-size: px2rem(34);
font-weight: bold;
}
}
ul {
width: px2rem(750);
height: px2rem(1350);
margin: px2rem(190) auto 0;
overflow-y: scroll;
padding-top: px2rem(26);
box-sizing: border-box;
&::-webkit-scrollbar {
display: none;
}
li {
width: px2rem(680);
height: px2rem(160);
box-sizing: border-box;
overflow: hidden;
margin: 0 auto px2rem(33);
position: relative;
background: #fff;
border-radius: px2rem(10);
.tx {
width: px2rem(80);
height: px2rem(80);
border-radius: px2rem(80);
float: left;
margin-right: px2rem(11);
margin-left: px2rem(10);
display: block;
margin-top: px2rem(33);
}
.user {
float: left;
width: 6rem;
p {
color: #515665;
font-size: px2rem(28);
font-weight: bold;
display: inline-block;
margin-right: px2rem(8);
margin-bottom: px2rem(12);
width: 2.7rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
box-sizing: border-box;
padding-top: px2rem(50);
}
b {
display: block;
color: #A4ABB2;
font-size: px2rem(24);
}
.sex {
width: px2rem(18);
height: px2rem(18);
display: inline-block;
margin-top: px2rem(61);
margin-right: px2rem(8);
}
.wealth,
.charm {
display: inline-block;
width: px2rem(72);
height: px2rem(36);
margin-top: px2rem(48);
}
}
.but {
width: px2rem(88);
height: px2rem(42);
background: #AA6CF5;
border-radius: px2rem(42);
position: absolute;
right: px2rem(26);
top: px2rem(89);
text-align: center;
color: #fff;
line-height: px2rem(42);
font-size: px2rem(26);
font-weight: 400;
}
.chairman {
width: px2rem(78);
height: px2rem(26);
line-height: px2rem(26);
border-radius: px2rem(26);
text-align: center;
color: #333;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
left: px2rem(12);
top: px2rem(71);
background: linear-gradient(90deg, #FFEB67, #FFFCE7);
}
.administrator {
width: px2rem(78);
height: px2rem(26);
line-height: px2rem(26);
border-radius: px2rem(26);
text-align: center;
color: #333;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
left: px2rem(12);
top: px2rem(71);
background: linear-gradient(-90deg, #FBE1FF, #F090FF);
}
}
.null {
width: 100%;
height: 100%;
position: relative;
img {
width: px2rem(147);
height: px2rem(151);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
span {
width: 100%;
left: 0;
top: 55%;
transform: translateY(-50%);
color: #A9A9A9;
font-size: px2rem(30);
font-weight: 400;
position: absolute;
text-align: center;
}
}
}
.pub {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, .6);
z-index: 11;
display: none;
.pub_in {
background: #fff;
border-radius: px2rem(30);
box-sizing: border-box;
padding: px2rem(50) px2rem(34);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
p {
text-align: center;
color: #333333;
font-size: px2rem(34);
font-weight: bold;
}
.butBox {
width: px2rem(514);
display: flex;
justify-content: space-between;
margin: px2rem(50) auto 0;
div {
width: px2rem(240);
height: px2rem(76);
text-align: center;
line-height: px2rem(76);
border-radius: px2rem(76);
font-size: px2rem(34);
font-weight: bold;
}
.close {
background: #F5F5F5;
color: #999999;
}
.ok {
background: linear-gradient(90deg, #53C7D4, #7C5EFD);
color: #fff;
}
}
}
}

View File

@@ -0,0 +1,257 @@
html,
body {
width: 100%;
height: 17.78667rem;
background: #eaeaec;
}
.back {
width: 100%;
height: 2.8rem;
position: fixed;
left: 0;
top: 0rem;
text-align: center;
color: #FFFFFF;
font-size: 0.50667rem;
font-weight: bold;
z-index: 10;
background: #fff;
}
.back .backs {
width: 0.58667rem;
height: 0.58667rem;
position: absolute;
left: 0.24rem;
top: 54%;
}
.back .title {
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 100%;
top: 0;
line-height: 3.6rem;
color: #333333;
font-size: 0.45333rem;
font-weight: bold;
}
.back .text {
position: absolute;
right: 0.62667rem;
height: 100%;
top: 0;
line-height: 3.6rem;
color: #333333;
font-size: 0.4rem;
}
ul {
width: 10rem;
height: 18rem;
margin: 2.93333rem auto 0;
overflow-y: scroll;
padding-top: 0.34667rem;
box-sizing: border-box;
}
ul::-webkit-scrollbar {
display: none;
}
ul li {
width: 9.06667rem;
height: 2.13333rem;
box-sizing: border-box;
overflow: hidden;
margin: 0 auto 0.44rem;
position: relative;
background: #fff;
border-radius: 0.13333rem;
}
ul li .tx {
width: 1.06667rem;
height: 1.06667rem;
border-radius: 1.06667rem;
float: left;
margin-right: 0.14667rem;
margin-left: 0.13333rem;
display: block;
margin-top: 0.44rem;
}
ul li .user {
float: left;
width: 6rem;
}
ul li .user p {
color: #515665;
font-size: 0.37333rem;
font-weight: bold;
display: inline-block;
margin-right: 0.10667rem;
margin-bottom: 0.16rem;
width: 2.7rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
box-sizing: border-box;
padding-top: 0.66667rem;
}
ul li .user b {
display: block;
color: #A4ABB2;
font-size: 0.32rem;
}
ul li .user .sex {
width: 0.24rem;
height: 0.24rem;
display: inline-block;
margin-top: 0.81333rem;
margin-right: 0.10667rem;
}
ul li .user .wealth,
ul li .user .charm {
display: inline-block;
width: 0.96rem;
height: 0.48rem;
margin-top: 0.64rem;
}
ul li .but {
width: 1.17333rem;
height: 0.56rem;
background: #71BCDB;
border-radius: 0.56rem;
position: absolute;
right: 0.34667rem;
top: 1.18667rem;
text-align: center;
color: #fff;
line-height: 0.56rem;
font-size: 0.34667rem;
font-weight: 400;
}
ul li .chairman {
width: 1.04rem;
height: 0.34667rem;
line-height: 0.34667rem;
border-radius: 0.34667rem;
text-align: center;
color: #333;
font-size: 0.29333rem;
font-weight: 400;
position: absolute;
left: 0.16rem;
top: 0.94667rem;
background: linear-gradient(90deg, #FFEB67, #FFFCE7);
display: none;
}
ul li .administrator {
width: 1.04rem;
height: 0.34667rem;
line-height: 0.34667rem;
border-radius: 0.34667rem;
text-align: center;
color: #333;
font-size: 0.29333rem;
font-weight: 400;
position: absolute;
left: 0.16rem;
top: 0.94667rem;
background: linear-gradient(-90deg, #FBE1FF, #F090FF);
display: none;
}
ul .null {
width: 100%;
height: 100%;
position: relative;
}
ul .null img {
width: 1.96rem;
height: 2.01333rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
ul .null span {
width: 100%;
left: 0;
top: 57%;
transform: translateY(-50%);
color: #A9A9A9;
font-size: 0.4rem;
font-weight: 400;
position: absolute;
text-align: center;
}
.pub {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 11;
display: none;
}
.pub .pub_in {
background: #fff;
border-radius: 0.4rem;
box-sizing: border-box;
padding: 0.66667rem 0.45333rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.pub .pub_in p {
text-align: center;
color: #333333;
font-size: 0.45333rem;
font-weight: bold;
}
.pub .pub_in .butBox {
width: 6.85333rem;
display: flex;
justify-content: space-between;
margin: 0.66667rem auto 0;
}
.pub .pub_in .butBox div {
width: 3.2rem;
height: 1.01333rem;
text-align: center;
line-height: 1.01333rem;
border-radius: 1.01333rem;
font-size: 0.45333rem;
font-weight: bold;
}
.pub .pub_in .butBox .close {
background: #F5F5F5;
color: #999999;
}
.pub .pub_in .butBox .ok {
background: linear-gradient(90deg, #53C7D4, #7C5EFD);
color: #fff;
}

View File

@@ -0,0 +1,261 @@
@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
width: 100%;
height: px2rem(1334);
background: #eaeaec;
}
.back {
width: 100%;
height: px2rem(210);
position: fixed;
left: 0;
top: px2rem(0);
text-align: center;
color: #FFFFFF;
font-size: px2rem(38);
font-weight: bold;
z-index: 10;
background: #fff;
.backs {
width: px2rem(44);
height: px2rem(44);
position: absolute;
left: px2rem(18);
top: 54%;
}
.title {
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 100%;
top: 0;
line-height: px2rem(270);
color: #333333;
font-size: px2rem(34);
font-weight: bold;
}
.text {
position: absolute;
right: px2rem(47);
height: 100%;
top: 0;
line-height: px2rem(270);
color: #333333;
font-size: px2rem(30);
}
}
ul {
width: px2rem(750);
height: px2rem(1350);
margin: px2rem(220) auto 0;
overflow-y: scroll;
padding-top: px2rem(26);
box-sizing: border-box;
&::-webkit-scrollbar {
display: none;
}
li {
width: px2rem(680);
height: px2rem(160);
box-sizing: border-box;
overflow: hidden;
margin: 0 auto px2rem(33);
position: relative;
background: #fff;
border-radius: px2rem(10);
.tx {
width: px2rem(80);
height: px2rem(80);
border-radius: px2rem(80);
float: left;
margin-right: px2rem(11);
margin-left: px2rem(10);
display: block;
margin-top: px2rem(33);
}
.user {
float: left;
width: 6rem;
p {
color: #515665;
font-size: px2rem(28);
font-weight: bold;
display: inline-block;
margin-right: px2rem(8);
margin-bottom: px2rem(12);
width: 2.7rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
box-sizing: border-box;
padding-top: px2rem(50);
}
b {
display: block;
color: #A4ABB2;
font-size: px2rem(24);
}
.sex {
width: px2rem(18);
height: px2rem(18);
display: inline-block;
margin-top: px2rem(61);
margin-right: px2rem(8);
}
.wealth,
.charm {
display: inline-block;
width: px2rem(72);
height: px2rem(36);
margin-top: px2rem(48);
}
}
.but {
width: px2rem(88);
height: px2rem(42);
background: #71BCDB;
border-radius: px2rem(42);
position: absolute;
right: px2rem(26);
top: px2rem(89);
text-align: center;
color: #fff;
line-height: px2rem(42);
font-size: px2rem(26);
font-weight: 400;
}
.chairman {
width: px2rem(78);
height: px2rem(26);
line-height: px2rem(26);
border-radius: px2rem(26);
text-align: center;
color: #333;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
left: px2rem(12);
top: px2rem(71);
background: linear-gradient(90deg, #FFEB67, #FFFCE7);
display: none;
}
.administrator {
width: px2rem(78);
height: px2rem(26);
line-height: px2rem(26);
border-radius: px2rem(26);
text-align: center;
color: #333;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
left: px2rem(12);
top: px2rem(71);
background: linear-gradient(-90deg, #FBE1FF, #F090FF);
display: none;
}
}
.null {
width: 100%;
height: 100%;
position: relative;
img {
width: px2rem(147);
height: px2rem(151);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
span {
width: 100%;
left: 0;
top: 57%;
transform: translateY(-50%);
color: #A9A9A9;
font-size: px2rem(30);
font-weight: 400;
position: absolute;
text-align: center;
}
}
}
.pub {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, .6);
z-index: 11;
display: none;
.pub_in {
background: #fff;
border-radius: px2rem(30);
box-sizing: border-box;
padding: px2rem(50) px2rem(34);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
p {
text-align: center;
color: #333333;
font-size: px2rem(34);
font-weight: bold;
}
.butBox {
width: px2rem(514);
display: flex;
justify-content: space-between;
margin: px2rem(50) auto 0;
div {
width: px2rem(240);
height: px2rem(76);
text-align: center;
line-height: px2rem(76);
border-radius: px2rem(76);
font-size: px2rem(34);
font-weight: bold;
}
.close {
background: #F5F5F5;
color: #999999;
}
.ok {
background: linear-gradient(90deg, #53C7D4, #7C5EFD);
color: #fff;
}
}
}
}

View File

@@ -0,0 +1,125 @@
body,
html {
width: 100%;
background: #F4F4F4;
}
.nav {
width: 100%;
height: 2.34667rem;
background: #F4F4F4;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 100;
}
.nav .back {
width: 0.58667rem;
height: 0.58667rem;
position: absolute;
left: 0.4rem;
bottom: 0.29333rem;
}
.nav p {
height: 0.58667rem;
line-height: 0.58667rem;
font-size: 0.42667rem;
font-weight: 500;
color: #313131;
position: absolute;
bottom: 0.26667rem;
left: 50%;
transform: translateX(-50%);
}
.income_expenses {
width: 10rem;
height: 1rem;
background: #f4f4f4;
position: fixed;
top: 2.34667rem;
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.income_expenses p {
height: 0.58667rem;
line-height: 0.58667rem;
font-size: 0.42667rem;
font-weight: 500;
color: #afb1b3;
}
.income_expenses .act {
color: #313131;
}
.income_expenses .act::after {
content: "";
display: block;
width: 0.37333rem;
height: 0.10667rem;
border-radius: 0.37333rem;
background: #04D5C6;
vertical-align: bottom;
margin: 0.10667rem auto 0;
}
ul {
width: 9.14667rem;
margin: 3.46667rem auto 0;
overflow: hidden;
}
ul li {
width: 100%;
height: 2.08rem;
background: #ffffff;
border-radius: 0.32rem;
margin-bottom: 0.37333rem;
box-sizing: border-box;
padding: 0 0.24rem;
}
ul li div {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
ul li div p {
font-weight: 600;
font-size: 0.4rem;
color: #313131;
margin-top: 0.4rem;
}
ul li div b {
font-weight: 600;
font-size: 0.48rem;
color: #04D5C6;
white-space: nowrap;
margin-top: 0.4rem;
}
ul li div span {
font-weight: 400;
font-size: 0.34667rem;
color: #7b7b7d;
line-height: 0.42667rem;
margin-top: 0.26667rem;
}
.arLang .nav .back {
right: 0.4rem;
left: unset;
transform: rotate(180deg);
}

View File

@@ -0,0 +1,137 @@
@function px2rem($px, $rem: 37.5) {
@return $px / $rem +rem;
}
body,
html {
width: 100%;
background: #F4F4F4;
}
.nav {
width: 100%;
height: px2rem(88);
background: #F4F4F4;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 100;
.back {
width: px2rem(22);
height: px2rem(22);
position: absolute;
left: px2rem(15);
bottom: px2rem(11);
}
p {
height: px2rem(22);
line-height: px2rem(22);
font-size: px2rem(16);
font-weight: 500;
color: #313131;
position: absolute;
bottom: px2rem(10);
left: 50%;
transform: translateX(-50%);
}
}
.income_expenses {
width: px2rem(375);
height: 1rem;
background: #f4f4f4;
position: fixed;
top: px2rem(88);
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
align-items: center;
justify-content: space-evenly;
p {
height: px2rem(22);
line-height: px2rem(22);
font-size: px2rem(16);
font-weight: 500;
color: #afb1b3;
}
.act {
color: #313131;
&::after {
content: "";
display: block;
width: px2rem(14);
height: px2rem(4);
border-radius: px2rem(14);
background: #04D5C6;
vertical-align: bottom;
margin: px2rem(4) auto 0;
}
}
}
ul {
width: px2rem(343);
margin: px2rem(130) auto 0;
overflow: hidden;
li {
width: 100%;
height: px2rem(78);
background: #ffffff;
border-radius: px2rem(12);
margin-bottom: px2rem(14);
box-sizing: border-box;
padding: 0 px2rem(9);
div {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
p {
font-weight: 600;
font-size: px2rem(15);
color: #313131;
margin-top: px2rem(15);
}
b {
font-weight: 600;
font-size: px2rem(18);
color: #04D5C6;
white-space: nowrap;
margin-top: px2rem(15);
}
span {
font-weight: 400;
font-size: px2rem(13);
color: #7b7b7d;
line-height: px2rem(16);
margin-top: px2rem(10);
}
// .time {
// width: 4.4rem;
// }
}
}
}
.arLang {
.nav {
.back {
right: px2rem(15);
left: unset;
transform: rotate(180deg);
}
}
}

View File

@@ -0,0 +1,234 @@
html,
body {
width: 100%;
height: 17.78667rem;
background: #fff;
box-sizing: border-box;
padding-top: 1.46667rem;
}
.back {
width: 100%;
height: 2.34667rem;
position: fixed;
left: 0;
top: 0rem;
text-align: center;
color: #FFFFFF;
font-size: 0.50667rem;
font-weight: bold;
z-index: 10;
}
.back img {
width: 0.58667rem;
height: 0.58667rem;
position: absolute;
left: 0.24rem;
top: 1.46667rem;
}
.back .title {
color: #313131;
text-align: center;
font-size: 0.42667rem;
font-weight: 500;
margin: 1.53333rem auto 0;
}
.myDiamond {
width: 9.14667rem;
height: 1.17333rem;
line-height: 1.17333rem;
margin: 0 auto 0.26667rem;
display: flex;
justify-content: center;
background: #F2F3F7;
border-radius: 0.21333rem;
overflow: hidden;
}
.myDiamond i {
font-style: normal;
color: #313131;
font-size: 0.37333rem;
font-weight: 500;
}
.myDiamond b {
font-size: 0.37333rem;
color: #04D5C6;
font-weight: 500;
margin: 0 0.13333rem;
}
.myDiamond img {
display: inline-block;
width: 0.42667rem;
height: 0.42667rem;
margin-top: 0.32rem;
}
h3 {
height: 0.66667rem;
width: 100%;
box-sizing: border-box;
padding: 0 0.42667rem;
line-height: 0.66667rem;
display: flex;
margin: 0 auto 0.13333rem;
white-space: nowrap;
display: block;
}
h3 span {
width: 0.10667rem;
height: 0.45333rem;
background: #04D5C6;
border-radius: 0.45333rem;
margin-top: 0.10667rem;
}
h3 b {
margin: 0 0.26667rem;
color: #313131;
font-size: 0.48rem;
font-weight: 600;
}
ul {
width: 9.14667rem;
height: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0 auto 1.30667rem;
}
ul li {
width: 4.50667rem;
height: 1.89333rem;
background: #F2F3F7;
border-radius: 0.21333rem;
overflow: hidden;
box-sizing: border-box;
text-align: center;
margin-bottom: 0.13333rem;
border: 0.05333rem solid #fff;
}
ul li p {
color: #313131;
font-size: 0.42667rem;
font-weight: 600;
margin-top: 0.26667rem;
margin-bottom: 0.24rem;
}
ul li b {
color: #313131;
font-size: 0.37333rem;
font-weight: 600;
}
ul .canCustom p {
line-height: 1.4rem;
}
ul .canCustom p img {
width: 0.29333rem;
height: 0.29333rem;
display: inline-block;
margin: 0 0.06667rem;
vertical-align: middle;
}
ul .act {
border: 0.05333rem solid #04D5C6;
}
.but {
width: 9.14667rem;
height: 1.04rem;
line-height: 1.04rem;
text-align: center;
color: #fff;
font-size: 0.42667rem;
font-weight: 500;
background: #04D5C6;
margin: 0 auto 0;
border-radius: 1.04rem;
}
.arabic .back img {
left: auto;
right: 0.24rem;
transform: rotate(180deg);
}
.pub {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
}
.pub .pub_in {
width: 9.14667rem;
height: 5.86667rem;
background: #fff;
border-radius: 0.21333rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.pub .pub_in h2 {
width: 100%;
text-align: center;
color: #313131;
font-size: 0.48rem;
font-weight: 600;
margin-top: 0.48rem;
margin-bottom: 0.29333rem;
}
.pub .pub_in h3 {
width: 100%;
text-align: center;
color: #313131;
font-size: 0.37333rem;
font-weight: 600;
margin-bottom: 0.88rem;
color: #7B7B7D;
font-weight: 400;
}
.pub .pub_in .view {
width: 6.88rem;
height: 1.14667rem;
line-height: 1.14667rem;
text-align: center;
color: #fff;
background: #04D5C6;
font-size: 0.42667rem;
font-weight: 500;
margin: 0 auto 0.26667rem;
border-radius: 1.14667rem;
}
.pub .pub_in .close {
width: 6.88rem;
height: 1.14667rem;
line-height: 1.14667rem;
text-align: center;
color: #313131;
background: #F2F3F7;
font-size: 0.42667rem;
font-weight: 500;
margin: 0 auto 0.26667rem;
border-radius: 1.14667rem;
}

View File

@@ -0,0 +1,244 @@
@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
width: 100%;
height: px2rem(1334);
background: #fff;
box-sizing: border-box;
padding-top: px2rem(110);
}
.back {
width: 100%;
height: px2rem(176);
position: fixed;
left: 0;
top: px2rem(0);
text-align: center;
color: #FFFFFF;
font-size: px2rem(38);
font-weight: bold;
z-index: 10;
img {
width: px2rem(44);
height: px2rem(44);
position: absolute;
left: px2rem(18);
top: px2rem(110);
}
.title {
color: #313131;
text-align: center;
font-size: px2rem(32);
font-weight: 500;
margin: px2rem(115) auto 0;
}
}
.myDiamond {
width: px2rem(686);
height: px2rem(88);
line-height: px2rem(88);
margin: 0 auto px2rem(20);
display: flex;
justify-content: center;
background: #F2F3F7;
border-radius: px2rem(16);
overflow: hidden;
i {
font-style: normal;
color: #313131;
font-size: px2rem(28);
font-weight: 500;
}
b {
font-size: px2rem(28);
color: #04D5C6;
font-weight: 500;
margin: 0 px2rem(10);
}
img {
display: inline-block;
width: px2rem(32);
height: px2rem(32);
margin-top: px2rem(24);
}
}
h3 {
height: px2rem(50);
width: 100%;
box-sizing: border-box;
padding: 0 px2rem(32);
line-height: px2rem(50);
display: flex;
margin: 0 auto px2rem(10);
white-space: nowrap;
display: block;
span {
// display: block;
width: px2rem(8);
height: px2rem(34);
background: #04D5C6;
border-radius: px2rem(34);
margin-top: px2rem(8);
}
b {
// display: block;
margin: 0 px2rem(20);
color: #313131;
font-size: px2rem(36);
font-weight: 600;
}
}
ul {
width: px2rem(686);
height: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0 auto px2rem(98);
li {
width: px2rem(338);
height: px2rem(142);
background: #F2F3F7;
border-radius: px2rem(16);
overflow: hidden;
box-sizing: border-box;
text-align: center;
margin-bottom: px2rem(10);
border: px2rem(4) solid #fff;
p {
color: #313131;
font-size: px2rem(32);
font-weight: 600;
margin-top: px2rem(20);
margin-bottom: px2rem(18);
}
b {
color: #313131;
font-size: px2rem(28);
font-weight: 600;
}
}
.canCustom {
p {
line-height: px2rem(105);
img {
width: px2rem(22);
height: px2rem(22);
display: inline-block;
margin: 0 px2rem(5);
vertical-align: middle;
}
}
}
.act {
border: px2rem(4) solid #04D5C6;
}
}
.but {
width: px2rem(686);
height: px2rem(78);
line-height: px2rem(78);
text-align: center;
color: #fff;
font-size: px2rem(32);
font-weight: 500;
background: #04D5C6;
margin: 0 auto 0;
border-radius: px2rem(78);
}
.arabic {
.back img {
left: auto;
right: 0.24rem;
transform: rotate(180deg);
}
}
.pub {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .5);
.pub_in {
width: px2rem(686);
height: px2rem(440);
background: #fff;
border-radius: px2rem(16);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
h2 {
width: 100%;
text-align: center;
color: #313131;
font-size: px2rem(36);
font-weight: 600;
margin-top: px2rem(36);
margin-bottom: px2rem(22);
}
h3 {
width: 100%;
text-align: center;
color: #313131;
font-size: px2rem(28);
font-weight: 600;
margin-bottom: px2rem(66);
color: #7B7B7D;
font-weight: 400;
}
.view {
width: px2rem(516);
height: px2rem(86);
line-height: px2rem(86);
text-align: center;
color: #fff;
background: #04D5C6;
font-size: px2rem(32);
font-weight: 500;
margin: 0 auto px2rem(20);
border-radius: px2rem(86);
}
.close {
width: px2rem(516);
height: px2rem(86);
line-height: px2rem(86);
text-align: center;
color: #313131;
background: #F2F3F7;
font-size: px2rem(32);
font-weight: 500;
margin: 0 auto px2rem(20);
border-radius: px2rem(86);
}
}
}

View File

@@ -0,0 +1,274 @@
html,
body {
width: 100%;
height: 17.78667rem;
background: #F5F7F9;
}
.back {
width: 100%;
height: 2.38667rem;
line-height: 3.2rem;
position: fixed;
left: 0;
top: 0rem;
text-align: center;
color: #333333;
font-size: 0.45333rem;
font-weight: bold;
z-index: 10;
background: url(../images/topBg.png) no-repeat top;
background-size: 100% 7rem;
}
.back img {
width: 0.58667rem;
height: 0.58667rem;
position: absolute;
left: 0.24rem;
top: 58%;
}
.top {
width: 9.25333rem;
height: 1.18667rem;
line-height: 0.78667rem;
background: #fff;
border-radius: 0.26667rem 0.26667rem 0 0;
margin: 2.5rem auto 0;
color: #333;
font-size: 0.42667rem;
box-sizing: border-box;
padding: 0 0.4rem;
}
.top .left {
height: 1.18667rem;
line-height: 1.18667rem;
float: left;
}
.top img {
float: right;
display: block;
width: 0.58667rem;
height: 0.58667rem;
margin-top: 0.33333rem;
}
ul {
width: 9.25333rem;
height: 16.81333rem;
overflow-y: scroll;
margin: 0 auto;
border-radius: 0 0 0.26667rem 0.26667rem;
background: #fff;
}
ul::-webkit-scrollbar {
display: none;
}
ul li {
width: 100%;
height: 2.13333rem;
overflow: hidden;
box-sizing: border-box;
padding: 0 0.26667rem 0 0.2rem;
position: relative;
}
ul li .num {
color: #000000;
font-size: 0.4rem;
font-weight: bold;
width: 1.01333rem;
height: 1.01333rem;
line-height: 1.01333rem;
text-align: center;
float: left;
margin-top: 0.66667rem;
}
ul li .ts {
width: 1.70667rem;
height: 1.37333rem;
position: absolute;
z-index: 2;
left: 1.09333rem;
top: 0.49333rem;
}
ul li .tx {
width: 1.33333rem;
height: 1.33333rem;
position: absolute;
left: 1.28rem;
top: 0.52rem;
border-radius: 50%;
}
ul li .user {
float: left;
margin-left: 1.66667rem;
}
ul li .user p {
width: 2.5rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #515665;
font-size: 0.32rem;
margin-bottom: 0.38667rem;
font-weight: bold;
box-sizing: border-box;
padding-top: 0.70667rem;
}
ul li .user b {
color: #A4ABB2;
font-size: 0.32rem;
font-weight: 500;
}
ul li .but {
width: 1.54667rem;
height: 0.56rem;
line-height: 0.56rem;
background: #7F95FF;
border-radius: 0.56rem;
float: right;
margin-top: 0.76rem;
text-align: center;
color: #fff;
font-size: 0.26667rem;
}
ul li:nth-child(odd) {
background: rgba(50, 39, 79, 0.06);
}
ul li:nth-child(1) .num {
background: url(../images/no1.png) no-repeat;
background-size: 100% 100%;
}
ul li:nth-child(1) .ts {
width: 1.78667rem;
height: 1.78667rem;
left: 1.05333rem;
top: 0.18667rem;
}
ul li:nth-child(2) .num {
background: url(../images/no2.png) no-repeat;
background-size: 100% 100%;
}
ul li:nth-child(2) .ts {
width: 1.78667rem;
height: 1.78667rem;
left: 1.05333rem;
top: 0.18667rem;
}
ul li:nth-child(3) .num {
background: url(../images/no3.png) no-repeat;
background-size: 100% 100%;
}
ul li:nth-child(3) .ts {
width: 1.78667rem;
height: 1.78667rem;
left: 1.05333rem;
top: 0.18667rem;
}
.pub {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 11;
display: none;
}
.pub .pub_in {
background: #fff;
border-radius: 0.4rem;
box-sizing: border-box;
padding: 0.66667rem 0.45333rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.pub .pub_in p {
text-align: center;
color: #333333;
font-size: 0.45333rem;
font-weight: bold;
}
.pub .pub_in .butBox {
width: 6.85333rem;
display: flex;
justify-content: space-between;
margin: 0.66667rem auto 0;
}
.pub .pub_in .butBox div {
width: 3.2rem;
height: 1.01333rem;
text-align: center;
line-height: 1.01333rem;
border-radius: 1.01333rem;
font-size: 0.45333rem;
font-weight: bold;
}
.pub .pub_in .butBox .close {
background: #F5F5F5;
color: #999999;
}
.pub .pub_in .butBox .ok {
background: linear-gradient(90deg, #53C7D4, #7C5EFD);
color: #fff;
}
.arabic ul li .num,
.arabic ul li .user {
float: right;
}
.arabic ul li .user {
margin-left: 0;
margin-right: 1.8rem;
}
.arabic ul li .but {
float: left;
}
.arabic ul li .ts {
left: 0;
right: 1.05333rem;
}
.arabic ul li .tx {
left: 0;
right: 1.28rem;
}
.arabic .top .left {
float: right;
}
.arabic .top img {
float: left;
}

View File

@@ -0,0 +1,289 @@
@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
width: 100%;
height: px2rem(1334);
background: #F5F7F9;
}
.back {
width: 100%;
height: px2rem(179);
line-height: px2rem(240);
position: fixed;
left: 0;
top: px2rem(0);
text-align: center;
color: #333333;
font-size: px2rem(34);
font-weight: bold;
z-index: 10;
background: url(../images/topBg.png) no-repeat top;
background-size: 100% 7rem;
img {
width: px2rem(44);
height: px2rem(44);
position: absolute;
left: px2rem(18);
top: 58%;
}
}
.top {
width: px2rem(694);
height: px2rem(89);
line-height: px2rem(59);
background: #fff;
border-radius: px2rem(20) px2rem(20) 0 0;
margin: 2.5rem auto 0;
color: #333;
font-size: px2rem(32);
box-sizing: border-box;
padding: 0 px2rem(30);
.left {
height: px2rem(89);
line-height: px2rem(89);
float: left;
}
img {
float: right;
display: block;
width: px2rem(44);
height: px2rem(44);
margin-top: px2rem(25);
}
}
ul {
width: px2rem(694);
height: px2rem(1261);
overflow-y: scroll;
margin: 0 auto;
border-radius: 0 0 px2rem(20) px2rem(20);
background: #fff;
&::-webkit-scrollbar {
display: none;
}
li {
width: 100%;
height: px2rem(160);
overflow: hidden;
box-sizing: border-box;
padding: 0 px2rem(20) 0 px2rem(15);
position: relative;
.num {
color: #000000;
font-size: px2rem(30);
font-weight: bold;
width: px2rem(76);
height: px2rem(76);
line-height: px2rem(76);
text-align: center;
float: left;
margin-top: px2rem(50);
}
.ts {
width: px2rem(128);
height: px2rem(103);
position: absolute;
z-index: 2;
left: px2rem(82);
top: px2rem(37);
}
.tx {
width: px2rem(100);
height: px2rem(100);
position: absolute;
left: px2rem(96);
top: px2rem(39);
border-radius: 50%;
}
.user {
float: left;
margin-left: px2rem(125);
p {
width: 2.5rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #515665;
font-size: px2rem(24);
margin-bottom: px2rem(29);
font-weight: bold;
box-sizing: border-box;
padding-top: px2rem(53);
}
b {
color: #A4ABB2;
font-size: px2rem(24);
font-weight: 500;
}
}
.but {
width: px2rem(116);
height: px2rem(42);
line-height: px2rem(42);
background: #7F95FF;
border-radius: px2rem(42);
float: right;
margin-top: px2rem(57);
text-align: center;
color: #fff;
font-size: px2rem(20);
}
&:nth-child(odd) {
background: rgba(50, 39, 79, .06);
}
&:nth-child(1) {
.num {
background: url(../images/no1.png) no-repeat;
background-size: 100% 100%;
}
.ts {
width: px2rem(134);
height: px2rem(134);
left: px2rem(79);
top: px2rem(14);
}
}
&:nth-child(2) {
.num {
background: url(../images/no2.png) no-repeat;
background-size: 100% 100%;
}
.ts {
width: px2rem(134);
height: px2rem(134);
left: px2rem(79);
top: px2rem(14);
}
}
&:nth-child(3) {
.num {
background: url(../images/no3.png) no-repeat;
background-size: 100% 100%;
}
.ts {
width: px2rem(134);
height: px2rem(134);
left: px2rem(79);
top: px2rem(14);
}
}
}
}
.pub {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, .6);
z-index: 11;
display: none;
.pub_in {
background: #fff;
border-radius: px2rem(30);
box-sizing: border-box;
padding: px2rem(50) px2rem(34);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
p {
text-align: center;
color: #333333;
font-size: px2rem(34);
font-weight: bold;
}
.butBox {
width: px2rem(514);
display: flex;
justify-content: space-between;
margin: px2rem(50) auto 0;
div {
width: px2rem(240);
height: px2rem(76);
text-align: center;
line-height: px2rem(76);
border-radius: px2rem(76);
font-size: px2rem(34);
font-weight: bold;
}
.close {
background: #F5F5F5;
color: #999999;
}
.ok {
background: linear-gradient(90deg, #53C7D4, #7C5EFD);
color: #fff;
}
}
}
}
.arabic {
ul li .num,
ul li .user {
float: right;
}
ul li .user {
margin-left: 0;
margin-right: 1.8rem;
}
ul li .but {
float: left;
}
ul li .ts {
left: 0;
right: 1.05333rem;
}
ul li .tx {
left: 0;
right: 1.28rem;
}
.top .left {
float: right;
}
.top img {
float: left;
}
}

View File

@@ -0,0 +1,182 @@
html,
body {
width: 100%;
height: 17.78667rem;
background: #F5F7F9;
box-sizing: border-box;
padding: 2.13333rem 0rem 0 0;
}
.back {
width: 100%;
height: 2.66667rem;
line-height: 3.46667rem;
position: fixed;
left: 0;
top: 0rem;
text-align: center;
color: #333333;
font-size: 0.50667rem;
font-weight: bold;
z-index: 10;
background: #fff;
}
.back img {
width: 0.58667rem;
height: 0.58667rem;
position: absolute;
left: 0.24rem;
top: 54%;
}
input {
background: none;
outline: none;
bottom: none;
}
h3 {
color: #333333;
font-size: 0.42667rem;
margin-bottom: 0.57333rem;
font-weight: 500;
margin-left: 0.42667rem;
text-align: left;
}
.name {
width: 9.01333rem;
height: 1.01333rem;
line-height: 1.01333rem;
position: relative;
margin: 0 auto 0.85333rem;
background: #fff;
border-radius: 0.09333rem;
}
.name input {
position: absolute;
left: 0;
top: 0;
width: 80%;
height: 100%;
color: #3C3C3C;
font-size: 0.37333rem;
font-weight: 400;
box-sizing: border-box;
padding-left: 0.37333rem;
}
.name span {
position: absolute;
right: 0.50667rem;
top: 0;
height: 100%;
color: #E13B3F;
font-size: 0.37333rem;
font-weight: 400;
}
.name .act {
color: #67D2A6;
}
.background {
position: relative;
width: 6.66667rem;
height: 4rem;
margin-bottom: 0.89333rem;
}
.background img {
display: inline-block;
margin-left: 0.42667rem;
margin-right: 0.22667rem;
width: 4rem;
height: 4rem;
border-radius: 0.06667rem;
}
.background span {
color: #E13B3F;
font-size: 0.37333rem;
font-weight: 400;
margin-top: 3.65333rem;
display: inline-block;
}
.background input {
position: absolute;
right: 1.2rem;
bottom: -0.2rem;
width: 0.93333rem;
height: 0.8rem;
}
.background .act {
color: #67D2A6;
}
.account {
width: 9.01333rem;
height: 1.01333rem;
line-height: 1.01333rem;
position: relative;
margin: 0 auto 0.85333rem;
background: #fff;
border-radius: 0.09333rem;
display: none;
}
.account i {
font-style: normal;
color: #3C3C3C;
font-weight: 400;
font-size: 0.37333rem;
height: 100%;
position: absolute;
left: 0.26667rem;
}
.account input {
position: absolute;
left: 2.13333rem;
top: 0;
height: 100%;
color: #000;
font-size: 0.37333rem;
font-weight: 500;
box-sizing: border-box;
padding-left: 0.46667rem;
width: 60%;
}
.account span {
position: absolute;
right: 0.50667rem;
top: 0;
height: 100%;
color: #E13B3F;
font-size: 0.37333rem;
font-weight: 400;
}
.account .act {
color: #67D2A6;
}
.arabic .account span {
right: auto;
left: 0.50667rem;
}
.arabic .account i {
left: auto;
right: 0.26667rem;
}
.arabic .account input {
left: auto;
right: 2.5rem;
}

View File

@@ -0,0 +1,189 @@
@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
width: 100%;
height: px2rem(1334);
background: #F5F7F9;
box-sizing: border-box;
padding: px2rem(160) px2rem(0) 0 0;
}
.back {
width: 100%;
height: px2rem(200);
line-height: px2rem(260);
position: fixed;
left: 0;
top: px2rem(0);
text-align: center;
color: #333333;
font-size: px2rem(38);
font-weight: bold;
z-index: 10;
background: #fff;
img {
width: px2rem(44);
height: px2rem(44);
position: absolute;
left: px2rem(18);
top: 54%;
}
}
input {
background: none;
outline: none;
bottom: none;
}
h3 {
color: #333333;
font-size: px2rem(32);
margin-bottom: px2rem(43);
font-weight: 500;
margin-left: px2rem(32);
text-align: left;
}
.name {
width: px2rem(676);
height: px2rem(76);
line-height: px2rem(76);
position: relative;
margin: 0 auto px2rem(64);
background: #fff;
border-radius: px2rem(7);
input {
position: absolute;
left: 0;
top: 0;
width: 80%;
height: 100%;
color: #3C3C3C;
font-size: px2rem(28);
font-weight: 400;
box-sizing: border-box;
padding-left: px2rem(28);
}
span {
position: absolute;
right: px2rem(38);
top: 0;
height: 100%;
color: #E13B3F;
font-size: px2rem(28);
font-weight: 400;
}
.act {
color: #67D2A6;
}
}
.background {
position: relative;
width: px2rem(500);
height: px2rem(300);
margin-bottom: px2rem(67);
img {
display: inline-block;
margin-left: px2rem(32);
margin-right: px2rem(17);
width: px2rem(300);
height: px2rem(300);
border-radius: px2rem(5);
}
span {
color: #E13B3F;
font-size: px2rem(28);
font-weight: 400;
margin-top: px2rem(274);
display: inline-block;
}
input {
position: absolute;
right: 1.2rem;
bottom: -0.2rem;
width: px2rem(70);
height: px2rem(60);
}
.act {
color: #67D2A6;
}
}
.account {
width: px2rem(676);
height: px2rem(76);
line-height: px2rem(76);
position: relative;
margin: 0 auto px2rem(64);
background: #fff;
border-radius: px2rem(7);
display: none;
i {
font-style: normal;
color: #3C3C3C;
font-weight: 400;
font-size: px2rem(28);
height: 100%;
position: absolute;
left: px2rem(20);
}
input {
position: absolute;
left: px2rem(160);
top: 0;
height: 100%;
color: #000;
font-size: px2rem(28);
font-weight: 500;
box-sizing: border-box;
padding-left: px2rem(35);
width: 60%;
}
span {
position: absolute;
right: px2rem(38);
top: 0;
height: 100%;
color: #E13B3F;
font-size: px2rem(28);
font-weight: 400;
}
.act {
color: #67D2A6;
}
}
.arabic {
.account span {
right: auto;
left: 0.50667rem;
}
.account i {
left: auto;
right: 0.26667rem;
}
.account input{
left: auto;
right: 2.5rem;
}
}

View File

@@ -0,0 +1,667 @@
html,
body {
width: 100%;
background: #fff;
}
.back {
width: 100%;
height: 0.58667rem;
line-height: 0.58667rem;
position: fixed;
left: 0;
top: 1.46667rem;
text-align: center;
color: #FFFFFF;
font-size: 0.50667rem;
font-weight: bold;
z-index: 10;
}
.back img {
width: 0.58667rem;
height: 0.58667rem;
position: absolute;
left: 0.24rem;
top: 0rem;
}
.back b {
width: 75%;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.header {
width: 10rem;
height: 5.86667rem;
background: url(../images/header.png) no-repeat;
background-size: cover;
position: relative;
margin: 0 auto 0rem;
}
.header .tx {
width: 2.05333rem;
height: 2.05333rem;
position: absolute;
left: 0.45333rem;
top: 2.88rem;
border-radius: 50%;
border: 0.02667rem solid #FFE8A9;
}
.header .ts {
width: 2.77333rem;
height: 2.77333rem;
position: absolute;
top: 1.73333rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: none;
}
.header .nick {
width: 55%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #fff;
font-size: 0.53333rem;
font-weight: bold;
position: absolute;
top: 3.22667rem;
left: 2.93333rem;
}
.header .id {
width: 55%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #fff;
font-size: 0.34667rem;
font-weight: 500;
position: absolute;
top: 4.10667rem;
left: 2.93333rem;
}
.header .guildNick {
width: 100%;
position: absolute;
left: 0;
top: 6.30667rem;
color: #FFFFFF;
opacity: 0.8;
font-size: 0.32rem;
text-align: center;
display: none;
}
.header .inveMember {
min-width: 1.57333rem;
height: 0.72rem;
border-radius: 0.72rem;
line-height: 0.72rem;
text-align: center;
background: linear-gradient(90deg, #7CDD9B, #62D0A8);
color: #fff;
font-size: 0.37333rem;
position: absolute;
top: 3.54667rem;
right: 0.42667rem;
z-index: 5;
padding: 0 0.13333rem;
}
.header .inveMember img {
display: inline-block;
width: 0.50667rem;
height: 0.56rem;
vertical-align: middle;
margin-top: -0.1rem;
display: none;
}
.header .inveMember span {
display: inline-block;
vertical-align: middle;
}
.headerBox {
width: 10rem;
border-radius: 0.26667rem;
margin: -0.4rem auto 0rem;
position: relative;
background: #fff;
overflow: hidden;
}
.headerBox .headerBox_in {
width: 9.14667rem;
max-height: 3.06667rem;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0.32rem auto 0;
}
.headerBox .headerBox_in div {
width: 4.45333rem;
height: 1.38667rem;
line-height: 1.38667rem;
margin-bottom: 0.24rem;
background: #F2F3F7;
border-radius: 0.32rem;
text-align: left;
box-sizing: border-box;
padding: 0 0.13333rem;
}
.headerBox .headerBox_in div img {
display: inline;
width: 0.69333rem;
height: 0.69333rem;
vertical-align: middle;
}
.headerBox .headerBox_in div span {
display: inline-block;
color: #313131;
font-size: 0.4rem;
}
.headerBox .headerBox_in .E3F2FF {
background: #E3F2FF;
}
.headerBox .headerBox_in .FFEFE5 {
background: #FFEFE5;
}
.agencylevel {
width: 10rem;
height: 3.62667rem;
margin: 0.34667rem auto 0;
}
.agencylevel .top {
width: 100%;
box-sizing: border-box;
padding: 0 0.33333rem;
height: 0.66667rem;
line-height: 0.66667rem;
margin-top: 0.41333rem;
position: relative;
}
.agencylevel .top span {
float: left;
width: 0.10667rem;
height: 0.45333rem;
background: #04D5C6;
border-radius: 9.22667rem;
margin: 0.10667rem 0.13333rem 0;
display: block;
}
.agencylevel .top b {
float: left;
font-size: 0.48rem;
color: #313131;
font-weight: bold;
display: block;
margin-right: 0.09333rem;
}
.agencylevel .top i {
display: block;
font-size: 0.48rem;
color: #313131;
float: left;
font-style: normal;
}
.agencylevel .agencylevelInfo {
width: 9.14667rem;
height: 2.69333rem;
background: #EBFFF6;
border-radius: 0.21333rem;
margin: 0.26667rem auto 0;
box-sizing: border-box;
padding: 0.24rem;
}
.agencylevel .agencylevelInfo h3 {
width: 100%;
display: block;
color: #313131;
font-size: 0.34667rem;
margin-bottom: 0.26667rem;
font-weight: 600;
}
.agencylevel .agencylevelInfo h3 b {
color: #313131;
font-size: 0.34667rem;
}
.agencylevel .agencylevelInfo h4 {
color: #7B7B7D;
font-weight: 400;
margin-bottom: 0.26667rem;
}
.agencylevel .agencylevelInfo .line {
width: 8.66667rem;
height: 0.13333rem;
position: relative;
background: #B2E8D0;
border-radius: 0.13333rem;
overflow: hidden;
margin-bottom: 0.26667rem;
}
.agencylevel .agencylevelInfo .line .line_in {
position: absolute;
top: 0;
left: 0;
width: 10%;
background: #04D5C6;
height: 100%;
}
.agencylevel .agencylevelInfo .bottom {
width: 100%;
display: flex;
justify-content: space-between;
color: #7B7B7D;
font-size: 0.32rem;
font-weight: 400;
}
.guildList {
width: 10rem;
border-radius: 0.26667rem;
margin: 0rem auto 0;
position: relative;
background: #fff;
overflow: hidden;
}
.guildList .top {
width: 100%;
box-sizing: border-box;
padding: 0 0.33333rem;
height: 0.66667rem;
line-height: 0.66667rem;
margin-top: 0.41333rem;
position: relative;
}
.guildList .top span {
float: left;
width: 0.10667rem;
height: 0.45333rem;
background: #04D5C6;
border-radius: 9.22667rem;
margin: 0.10667rem 0.13333rem 0;
display: block;
}
.guildList .top b {
float: left;
font-size: 0.48rem;
color: #313131;
font-weight: bold;
display: block;
margin-right: 0.09333rem;
}
.guildList .top i {
display: block;
font-size: 0.48rem;
color: #313131;
float: left;
font-style: normal;
}
.guildList .top img {
float: right;
display: block;
width: 0.42667rem;
height: 0.42667rem;
position: absolute;
left: 6.45rem;
top: 51%;
transform: translateY(-50%);
z-index: 2;
display: none;
}
.guildList .top input {
border: none;
outline: none;
background: #F5F7F9;
width: 3.46667rem;
height: 0.66667rem;
border-radius: 0.66667rem;
box-sizing: border-box;
padding-left: 0.72rem;
color: #333;
display: none;
float: right;
}
.guildList .top input::placeholder {
color: #BCBDCB;
font-size: 0.29333rem;
}
.guildList ul {
width: 100%;
height: 6.7rem;
margin: 0.25333rem auto 0;
overflow-y: scroll;
}
.guildList ul::-webkit-scrollbar {
display: none;
}
.guildList ul li {
width: 9.14667rem;
height: 1.94667rem;
box-sizing: border-box;
overflow: hidden;
margin: 0 auto 0.44rem;
position: relative;
box-sizing: border-box;
padding-left: 0.13333rem;
background: #F2F3F7;
border-radius: 0.32rem;
}
.guildList ul li .tx {
width: 1.46667rem;
height: 1.46667rem;
border-radius: 50%;
float: left;
margin-right: 0.14667rem;
margin-left: 0.13333rem;
display: block;
margin-top: 0.24rem;
}
.guildList ul li .user {
float: left;
width: 6rem;
}
.guildList ul li .user p {
color: #515665;
font-size: 0.37333rem;
font-weight: bold;
display: inline-block;
margin-right: 0.10667rem;
margin-bottom: 0.06667rem;
max-width: 2.7rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
box-sizing: border-box;
padding-top: 0.6rem;
}
.guildList ul li .user b {
display: block;
color: #A4ABB2;
font-size: 0.32rem;
}
.guildList ul li .user .sex {
width: 0.24rem;
height: 0.24rem;
display: inline-block;
margin-top: 0.6rem;
margin-right: 0.10667rem;
}
.guildList ul li .user .wealth,
.guildList ul li .user .charm {
display: inline-block;
width: 0.96rem;
height: 0.48rem;
margin-top: 0.49333rem;
}
.guildList ul li .but {
width: 1.17333rem;
height: 0.56rem;
background: #62D0A8;
border-radius: 0.56rem;
position: absolute;
right: 0.34667rem;
top: 0.69rem;
text-align: center;
color: #fff;
line-height: 0.56rem;
font-size: 0.29333rem;
font-weight: 400;
}
.guildList ul li .chairman {
width: 1.2rem;
height: 0.45333rem;
line-height: 0.45333rem;
border-radius: 0.45333rem;
text-align: center;
color: #fff;
font-size: 0.29333rem;
font-weight: 400;
position: absolute;
left: 0.37333rem;
top: 1.30667rem;
background: #04D5C6;
display: none;
}
.guildList ul li .administrator {
width: 1.04rem;
height: 0.34667rem;
line-height: 0.34667rem;
border-radius: 0.34667rem;
text-align: center;
color: #333;
font-size: 0.29333rem;
font-weight: 400;
position: absolute;
left: 0.26667rem;
top: 0.94667rem;
background: linear-gradient(-90deg, #FBE1FF, #F090FF);
display: none;
}
.pub {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 11;
display: none;
}
.pub .pub_in {
background: #fff;
border-radius: 0.4rem;
box-sizing: border-box;
padding: 0.66667rem 0.45333rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.pub .pub_in p {
text-align: center;
color: #333333;
font-size: 0.45333rem;
font-weight: bold;
}
.pub .pub_in .butBox {
width: 6.85333rem;
display: flex;
justify-content: space-between;
margin-top: 0.66667rem;
margin: 0.66667rem auto 0;
}
.pub .pub_in .butBox div {
width: 3.2rem;
height: 1.01333rem;
text-align: center;
line-height: 1.01333rem;
border-radius: 1.01333rem;
font-size: 0.45333rem;
font-weight: bold;
}
.pub .pub_in .butBox .close {
background: #F5F5F5;
color: #999999;
}
.pub .pub_in .butBox .ok {
background: linear-gradient(90deg, #53C7D4, #7C5EFD);
color: #fff;
}
.arabic .back img {
left: auto;
right: 0.24rem;
transform: rotate(180deg);
}
.arabic .header .tx {
left: auto;
right: 0.45333rem;
}
.arabic .header .nick {
left: auto;
right: 2.93333rem;
}
.arabic .header .id {
left: auto;
right: 2.93333rem;
}
.arabic .guildList .top img {
right: 0.4rem;
}
.arabic .guildList .top input {
padding-right: 0.5rem;
}
.arabic .guildList ul li .but {
left: 0.34667rem;
right: auto;
}
.arabic .guildList ul li .chairman,
.arabic .guildList ul li .administrator {
right: 0.37333rem;
left: auto;
}
.arabic .guildList ul li .tx,
.arabic .guildList ul li .user {
float: right;
}
.arabic .guildList ul li .user {
padding-right: 0.2rem;
}
.arabic .header .headerBox div img {
float: right;
}
.arabic .header .headerBox div span {
float: right;
}
.arabic .headerBox .headerBox_in div span {
font-size: 0.33333rem;
}
.english .header .headerBox {
width: 8rem;
}
.english .header .headerBox div {
width: 3.9rem;
}
.english .header .headerBox div span {
font-size: 0.21333rem;
}
.arabic .header .inveMember {
right: auto;
left: 0.42667rem;
}
.arabic .headerBox .headerBox_in div {
text-align: right;
}
.arabic .header .headerBox {
width: 8rem;
}
.arabic .header .headerBox div {
width: 3.9rem;
}
.arabic .header .headerBox div span {
font-size: 0.29333rem;
}
.arabic .guildList .top b {
float: right;
}
.arabic .guildList .top i {
float: right;
}
.arabic .guildList .top input {
float: left;
}
.arabic .guildList .top img {
right: 6.3rem;
left: auto;
transform: rotate(100deg);
top: 0.1rem;
}
.arabic .guildList .top span {
float: right;
display: block;
}
.arabic .agencylevel .agencylevelInfo .line .line_in {
left: auto;
right: 0;
}

View File

@@ -0,0 +1,694 @@
@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
width: 100%;
// height: px2rem(1334);
background: #fff;
}
.back {
width: 100%;
height: px2rem(44);
line-height: px2rem(44);
position: fixed;
left: 0;
top: px2rem(110);
text-align: center;
color: #FFFFFF;
font-size: px2rem(38);
font-weight: bold;
z-index: 10;
img {
width: px2rem(44);
height: px2rem(44);
position: absolute;
left: px2rem(18);
top: px2rem(0);
}
b {
width: 75%;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.header {
width: px2rem(750);
height: px2rem(440);
background: url(../images/header.png) no-repeat;
background-size: cover;
position: relative;
margin: 0 auto px2rem(0);
.tx {
width: px2rem(154);
height: px2rem(154);
position: absolute;
left: px2rem(34);
top: px2rem(216);
border-radius: 50%;
border: px2rem(2) solid #FFE8A9;
}
.ts {
width: px2rem(208);
height: px2rem(208);
position: absolute;
top: px2rem(130);
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: none;
}
.nick {
width: 55%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #fff;
font-size: px2rem(40);
font-weight: bold;
position: absolute;
top: px2rem(242);
left: px2rem(220);
}
.id {
width: 55%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #fff;
font-size: px2rem(26);
font-weight: 500;
position: absolute;
top: px2rem(308);
left: px2rem(220);
}
.guildNick {
width: 100%;
position: absolute;
left: 0;
top: px2rem(473);
color: #FFFFFF;
opacity: 0.8;
font-size: px2rem(24);
text-align: center;
display: none;
}
.inveMember {
min-width: px2rem(118);
height: px2rem(54);
border-radius: px2rem(54);
line-height: px2rem(54);
text-align: center;
background: linear-gradient(90deg, #7CDD9B, #62D0A8);
color: #fff;
font-size: px2rem(28);
position: absolute;
top: px2rem(266);
right: px2rem(32);
z-index: 5;
padding: 0 px2rem(10);
img {
display: inline-block;
width: px2rem(38);
height: px2rem(42);
vertical-align: middle;
margin-top: -0.1rem;
display: none;
}
span {
display: inline-block;
vertical-align: middle;
}
}
}
.headerBox {
width: px2rem(750);
border-radius: px2rem(20);
margin: px2rem(-30) auto px2rem(0);
position: relative;
background: #fff;
overflow: hidden;
.headerBox_in {
width: px2rem(686);
max-height: px2rem(230);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: px2rem(24) auto 0;
div {
width: px2rem(334);
height: px2rem(104);
line-height: px2rem(104);
margin-bottom: px2rem(18);
background: #F2F3F7;
border-radius: px2rem(24);
text-align: left;
box-sizing: border-box;
padding: 0 px2rem(10);
img {
display: inline;
width: px2rem(52);
height: px2rem(52);
vertical-align: middle;
}
span {
display: inline-block;
color: #313131;
font-size: px2rem(30);
}
}
.E3F2FF {
background: #E3F2FF;
}
.FFEFE5 {
background: #FFEFE5;
}
}
}
.agencylevel {
width: px2rem(750);
height: px2rem(272);
margin: px2rem(26) auto 0;
.top {
width: 100%;
box-sizing: border-box;
padding: 0 px2rem(25);
height: px2rem(50);
line-height: px2rem(50);
margin-top: px2rem(31);
position: relative;
span {
float: left;
width: px2rem(8);
height: px2rem(34);
background: #04D5C6;
border-radius: px2rem(692);
margin: px2rem(8) px2rem(10) 0;
display: block;
}
b {
float: left;
font-size: px2rem(36);
color: #313131;
font-weight: bold;
display: block;
margin-right: px2rem(7);
}
i {
display: block;
font-size: px2rem(36);
color: #313131;
float: left;
font-style: normal;
}
}
.agencylevelInfo {
width: px2rem(686);
height: px2rem(202);
background: #EBFFF6;
border-radius: px2rem(16);
margin: px2rem(20) auto 0;
box-sizing: border-box;
padding: px2rem(18);
h3 {
width: 100%;
display: block;
color: #313131;
font-size: px2rem(26);
margin-bottom: px2rem(20);
font-weight: 600;
b {
color: #313131;
font-size: px2rem(26);
}
}
h4 {
color: #7B7B7D;
font-weight: 400;
margin-bottom: px2rem(20);
}
.line {
width: px2rem(650);
height: px2rem(10);
position: relative;
background: #B2E8D0;
border-radius: px2rem(10);
overflow: hidden;
margin-bottom: px2rem(20);
.line_in {
position: absolute;
top: 0;
left: 0;
width: 10%;
background: #04D5C6;
height: 100%;
}
}
.bottom {
width: 100%;
display: flex;
justify-content: space-between;
color: #7B7B7D;
font-size: px2rem(24);
font-weight: 400;
}
}
}
.guildList {
width: px2rem(750);
// height: 11rem;
// height: 6.7rem;
border-radius: px2rem(20);
margin: px2rem(0) auto 0;
position: relative;
background: #fff;
overflow: hidden;
.top {
width: 100%;
box-sizing: border-box;
padding: 0 px2rem(25);
height: px2rem(50);
line-height: px2rem(50);
margin-top: px2rem(31);
position: relative;
// margin-left: px2rem(-13);
span {
float: left;
width: px2rem(8);
height: px2rem(34);
background: #04D5C6;
border-radius: px2rem(692);
margin: px2rem(8) px2rem(10) 0;
display: block;
}
b {
float: left;
font-size: px2rem(36);
color: #313131;
font-weight: bold;
display: block;
margin-right: px2rem(7);
}
i {
display: block;
font-size: px2rem(36);
color: #313131;
float: left;
font-style: normal;
}
img {
float: right;
display: block;
width: px2rem(32);
height: px2rem(32);
position: absolute;
left: 6.45rem;
top: 51%;
transform: translateY(-50%);
z-index: 2;
display: none;
}
input {
border: none;
outline: none;
background: #F5F7F9;
width: px2rem(260);
height: px2rem(50);
border-radius: px2rem(50);
box-sizing: border-box;
padding-left: px2rem(54);
// position: absolute;
// left: 3.7rem;
// top: 50%;
// transform: translateY(-50%);
color: #333;
display: none;
float: right;
&::placeholder {
color: #BCBDCB;
font-size: px2rem(22);
}
}
}
ul {
width: 100%;
// height: 11rem;
height: 6.7rem;
margin: px2rem(19) auto 0;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
}
li {
width: px2rem(686);
height: px2rem(146);
box-sizing: border-box;
overflow: hidden;
margin: 0 auto px2rem(33);
position: relative;
box-sizing: border-box;
padding-left: px2rem(10);
background: #F2F3F7;
border-radius: px2rem(24);
.tx {
width: px2rem(110);
height: px2rem(110);
border-radius: 50%;
float: left;
margin-right: px2rem(11);
margin-left: px2rem(10);
display: block;
margin-top: px2rem(18)
}
.user {
float: left;
width: 6rem;
p {
color: #515665;
font-size: px2rem(28);
font-weight: bold;
display: inline-block;
margin-right: px2rem(8);
margin-bottom: px2rem(5);
max-width: 2.7rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
box-sizing: border-box;
padding-top: px2rem(45);
}
b {
display: block;
color: #A4ABB2;
font-size: px2rem(24);
}
.sex {
width: px2rem(18);
height: px2rem(18);
display: inline-block;
margin-top: px2rem(45);
margin-right: px2rem(8);
}
.wealth,
.charm {
display: inline-block;
width: px2rem(72);
height: px2rem(36);
margin-top: px2rem(37);
}
}
.but {
width: px2rem(88);
height: px2rem(42);
background: #62D0A8;
border-radius: px2rem(42);
position: absolute;
right: px2rem(26);
top: 0.69rem;
text-align: center;
color: #fff;
line-height: px2rem(42);
font-size: px2rem(22);
font-weight: 400;
}
.chairman {
width: px2rem(90);
height: px2rem(34);
line-height: px2rem(34);
border-radius: px2rem(34);
text-align: center;
color: #fff;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
left: px2rem(28);
top: px2rem(98);
background: #04D5C6;
display: none;
}
.administrator {
width: px2rem(78);
height: px2rem(26);
line-height: px2rem(26);
border-radius: px2rem(26);
text-align: center;
color: #333;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
left: px2rem(20);
top: px2rem(71);
background: linear-gradient(-90deg, #FBE1FF, #F090FF);
display: none;
}
}
}
}
.pub {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, .6);
z-index: 11;
display: none;
.pub_in {
background: #fff;
border-radius: px2rem(30);
box-sizing: border-box;
padding: px2rem(50) px2rem(34);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
p {
text-align: center;
color: #333333;
font-size: px2rem(34);
font-weight: bold;
}
.butBox {
width: px2rem(514);
display: flex;
justify-content: space-between;
margin-top: px2rem(50);
margin: px2rem(50) auto 0;
div {
width: px2rem(240);
height: px2rem(76);
text-align: center;
line-height: px2rem(76);
border-radius: px2rem(76);
font-size: px2rem(34);
font-weight: bold;
}
.close {
background: #F5F5F5;
color: #999999;
}
.ok {
background: linear-gradient(90deg, #53C7D4, #7C5EFD);
color: #fff;
}
}
}
}
.arabic {
.back img {
left: auto;
right: 0.24rem;
transform: rotate(180deg);
}
.header .tx {
left: auto;
right: 0.45333rem;
}
.header .nick {
left: auto;
right: 2.93333rem;
}
.header .id {
left: auto;
right: 2.93333rem;
}
.guildList .top img {
right: px2rem(30);
}
.guildList .top input {
padding-right: 0.5rem;
}
.guildList ul li .but {
left: 0.34667rem;
right: auto;
}
.guildList ul li .chairman,
.guildList ul li .administrator {
right: px2rem(28);
left: auto;
}
.guildList ul li .tx,
.guildList ul li .user {
float: right;
}
.guildList ul li .user {
padding-right: 0.2rem;
}
.header .headerBox div img {
float: right;
}
.header .headerBox div span {
float: right;
}
.headerBox .headerBox_in div span {
font-size: px2rem(25);
}
}
.english {
.header .headerBox {
width: 8rem;
div {
width: 3.9rem;
span {
font-size: px2rem(16);
}
}
}
.headerBox .headerBox_in .guildInfoSet span,
.headerBox .headerBox_in .adminSet span {
// font-size: px2rem(20);
}
}
.arabic {
.header .inveMember {
right: auto;
left: px2rem(32);
}
.headerBox .headerBox_in div{
text-align: right;
}
.header .headerBox {
width: 8rem;
div {
width: 3.9rem;
span {
font-size: px2rem(22);
}
}
}
.guildList .top b {
float: right;
}
.guildList .top i {
float: right;
}
.guildList .top input {
float: left;
}
.guildList .top img {
right: 6.3rem;
left: auto;
transform: rotate(100deg);
top: 0.1rem;
}
.guildList .top span {
float: right;
display: block;
}
.agencylevel .agencylevelInfo .line .line_in {
left: auto;
right: 0;
}
}

View File

@@ -0,0 +1,274 @@
html,
body {
width: 100%;
height: 17.78667rem;
background: #eaeaec;
}
.back {
width: 100%;
height: 2.53333rem;
position: fixed;
left: 0;
top: 0rem;
text-align: center;
color: #FFFFFF;
font-size: 0.50667rem;
font-weight: bold;
z-index: 10;
background: #fff;
}
.back .backs {
width: 0.58667rem;
height: 0.58667rem;
position: absolute;
left: 0.24rem;
top: 59%;
}
.back .fdj {
width: 0.42667rem;
height: 0.42667rem;
position: absolute;
top: 66%;
left: 1.41333rem;
z-index: 2;
}
.back input {
border: none;
outline: none;
background: #eaeaec;
width: 6.8rem;
height: 0.74667rem;
line-height: 0.74667rem;
border-radius: 0.74667rem;
box-sizing: border-box;
padding: 0 0.72rem;
position: absolute;
left: 1.22667rem;
top: 75%;
transform: translateY(-50%);
color: #333;
font-size: 0.32rem;
}
.back input::placeholder {
color: #BCBDCB;
font-size: 0.29333rem;
}
.back .text {
position: absolute;
right: 0.62667rem;
height: 100%;
top: 0;
line-height: 3.73333rem;
color: #333333;
font-size: 0.45333rem;
font-weight: bold;
}
ul {
width: 10rem;
height: 18rem;
margin: 2.4rem auto 0;
overflow-y: scroll;
padding-top: 0.34667rem;
box-sizing: border-box;
}
ul::-webkit-scrollbar {
display: none;
}
ul li {
width: 9.06667rem;
height: 2.13333rem;
box-sizing: border-box;
overflow: hidden;
margin: 0 auto 0.44rem;
position: relative;
background: #fff;
border-radius: 0.13333rem;
}
ul li .tx {
width: 1.06667rem;
height: 1.06667rem;
border-radius: 1.06667rem;
float: left;
margin-right: 0.14667rem;
margin-left: 0.13333rem;
display: block;
margin-top: 0.44rem;
}
ul li .user {
float: left;
width: 6rem;
}
ul li .user p {
color: #515665;
font-size: 0.37333rem;
font-weight: bold;
display: inline-block;
margin-right: 0.10667rem;
margin-top: 0.74667rem;
margin-bottom: 0.16rem;
width: 2.7rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
ul li .user b {
display: block;
color: #A4ABB2;
font-size: 0.32rem;
}
ul li .user .sex {
width: 0.24rem;
height: 0.24rem;
display: inline-block;
margin-top: 0.81333rem;
margin-right: 0.10667rem;
}
ul li .user .wealth,
ul li .user .charm {
display: inline-block;
width: 0.96rem;
height: 0.48rem;
margin-top: 0.64rem;
}
ul li .but {
width: 1.17333rem;
height: 0.56rem;
background: #F08ED3;
border-radius: 0.56rem;
position: absolute;
right: 0.34667rem;
top: 1.18667rem;
text-align: center;
color: #fff;
line-height: 0.56rem;
font-size: 0.34667rem;
font-weight: 400;
}
ul li .chairman {
width: 1.04rem;
height: 0.34667rem;
line-height: 0.34667rem;
border-radius: 0.34667rem;
text-align: center;
color: #333;
font-size: 0.29333rem;
font-weight: 400;
position: absolute;
left: 0.16rem;
top: 0.94667rem;
background: linear-gradient(90deg, #FFEB67, #FFFCE7);
}
ul li .administrator {
width: 1.04rem;
height: 0.34667rem;
line-height: 0.34667rem;
border-radius: 0.34667rem;
text-align: center;
color: #333;
font-size: 0.29333rem;
font-weight: 400;
position: absolute;
left: 0.16rem;
top: 0.94667rem;
background: linear-gradient(-90deg, #FBE1FF, #F090FF);
}
ul .null {
width: 100%;
height: 100%;
position: relative;
}
ul .null img {
width: 1.96rem;
height: 2.01333rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
ul .null span {
width: 100%;
left: 0;
top: 55%;
transform: translateY(-50%);
color: #A9A9A9;
font-size: 0.4rem;
font-weight: 400;
position: absolute;
text-align: center;
}
.pub {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 11;
}
.pub .pub_in {
background: #fff;
border-radius: 0.4rem;
box-sizing: border-box;
padding: 0.66667rem 0.45333rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.pub .pub_in p {
text-align: center;
color: #333333;
font-size: 0.45333rem;
font-weight: bold;
}
.pub .pub_in .butBox {
width: 6.85333rem;
display: flex;
justify-content: space-between;
margin: 0.66667rem auto 0;
}
.pub .pub_in .butBox div {
width: 3.2rem;
height: 1.01333rem;
text-align: center;
line-height: 1.01333rem;
border-radius: 1.01333rem;
font-size: 0.45333rem;
font-weight: bold;
}
.pub .pub_in .butBox .close {
background: #F5F5F5;
color: #999999;
}
.pub .pub_in .butBox .ok {
background: linear-gradient(90deg, #53C7D4, #7C5EFD);
color: #fff;
}

View File

@@ -0,0 +1,278 @@
@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
width: 100%;
height: px2rem(1334);
background: #eaeaec;
}
.back {
width: 100%;
height: px2rem(190);
position: fixed;
left: 0;
top: px2rem(0);
text-align: center;
color: #FFFFFF;
font-size: px2rem(38);
font-weight: bold;
z-index: 10;
background: #fff;
.backs {
width: px2rem(44);
height: px2rem(44);
position: absolute;
left: px2rem(18);
top: 59%;
}
.fdj {
width: px2rem(32);
height: px2rem(32);
position: absolute;
top: 66%;
left: px2rem(106);
z-index: 2;
}
input {
border: none;
outline: none;
background: #eaeaec;
width: px2rem(510);
height: px2rem(56);
line-height: px2rem(56);
border-radius: px2rem(56);
box-sizing: border-box;
padding: 0 px2rem(54);
position: absolute;
left: px2rem(92);
top: 75%;
transform: translateY(-50%);
color: #333;
font-size: px2rem(24);
&::placeholder {
color: #BCBDCB;
font-size: px2rem(22);
}
}
.text {
position: absolute;
right: px2rem(47);
height: 100%;
top: 0;
line-height: px2rem(280);
color: #333333;
font-size: px2rem(34);
font-weight: bold;
}
}
ul {
width: px2rem(750);
height: px2rem(1350);
margin: px2rem(180) auto 0;
overflow-y: scroll;
padding-top: px2rem(26);
box-sizing: border-box;
&::-webkit-scrollbar {
display: none;
}
li {
width: px2rem(680);
height: px2rem(160);
box-sizing: border-box;
overflow: hidden;
margin: 0 auto px2rem(33);
position: relative;
background: #fff;
border-radius: px2rem(10);
.tx {
width: px2rem(80);
height: px2rem(80);
border-radius: px2rem(80);
float: left;
margin-right: px2rem(11);
margin-left: px2rem(10);
display: block;
margin-top: px2rem(33);
}
.user {
float: left;
width: 6rem;
p {
color: #515665;
font-size: px2rem(28);
font-weight: bold;
display: inline-block;
margin-right: px2rem(8);
margin-top: px2rem(56);
margin-bottom: px2rem(12);
width: 2.7rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
b {
display: block;
color: #A4ABB2;
font-size: px2rem(24);
}
.sex {
width: px2rem(18);
height: px2rem(18);
display: inline-block;
margin-top: px2rem(61);
margin-right: px2rem(8);
}
.wealth,
.charm {
display: inline-block;
width: px2rem(72);
height: px2rem(36);
margin-top: px2rem(48);
}
}
.but {
width: px2rem(88);
height: px2rem(42);
background: #F08ED3;
border-radius: px2rem(42);
position: absolute;
right: px2rem(26);
top: px2rem(89);
text-align: center;
color: #fff;
line-height: px2rem(42);
font-size: px2rem(26);
font-weight: 400;
}
.chairman {
width: px2rem(78);
height: px2rem(26);
line-height: px2rem(26);
border-radius: px2rem(26);
text-align: center;
color: #333;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
left: px2rem(12);
top: px2rem(71);
background: linear-gradient(90deg, #FFEB67, #FFFCE7);
}
.administrator {
width: px2rem(78);
height: px2rem(26);
line-height: px2rem(26);
border-radius: px2rem(26);
text-align: center;
color: #333;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
left: px2rem(12);
top: px2rem(71);
background: linear-gradient(-90deg, #FBE1FF, #F090FF);
}
}
.null {
width: 100%;
height: 100%;
position: relative;
img {
width: px2rem(147);
height: px2rem(151);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
span {
width: 100%;
left: 0;
top: 55%;
transform: translateY(-50%);
color: #A9A9A9;
font-size: px2rem(30);
font-weight: 400;
position: absolute;
text-align: center;
}
}
}
.pub {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, .6);
z-index: 11;
.pub_in {
background: #fff;
border-radius: px2rem(30);
box-sizing: border-box;
padding: px2rem(50) px2rem(34);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
p {
text-align: center;
color: #333333;
font-size: px2rem(34);
font-weight: bold;
}
.butBox {
width: px2rem(514);
display: flex;
justify-content: space-between;
margin: px2rem(50) auto 0;
div {
width: px2rem(240);
height: px2rem(76);
text-align: center;
line-height: px2rem(76);
border-radius: px2rem(76);
font-size: px2rem(34);
font-weight: bold;
}
.close {
background: #F5F5F5;
color: #999999;
}
.ok {
background: linear-gradient(90deg, #53C7D4, #7C5EFD);
color: #fff;
}
}
}
}

View File

@@ -0,0 +1,9 @@
/**
*
* 移动端底部抽屉选择器
* @author yyq
* @CSDN 慕云枫
* @date 2023-12-07
* @version 1.5
*/
ul,li{margin:0;padding:0}.lay-picker{position:fixed;left:0;top:0;width:100%;height:100%;z-index:99999999999999;display:none;overflow:hidden}.lay-picker-shade{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:9}.lay-picker-container{position:absolute;left:0;bottom:0;z-index:99;width:100%;background:#fff;color:#333;font-size:17px;-webkit-transition:transform .25s;-webkit-transform:translate3d(0,100%,0);transition:transform .25s;transform:translate3d(0,100%,0)}.lay-picker-header{height:50px;line-height:50px;border-bottom:1px solid #f3f3f3;margin-bottom:1px;margin:0 15px}.lay-picker-title{text-align:center;position:absolute;top:0;left:0;z-index:9;width:100%;color:#333}.lay-picker-search{margin:0 15px;text-align:center;padding:5px 0}.lay-picker-search input{text-align:center;height:40px;line-height:40px;border:0;border-bottom:1px solid #f3f3f3;transition:all .2s;-webkit-transition:all .2s;box-shadow:none !important;font-size:14px}.lay-picker-search input:hover,.lay-picker-search input:focus{border:none !important;border-bottom:1px solid #e5e5e5 !important}.lay-picker-btn{position:relative;z-index:99}.lay-picker-cancel{color:#333}.lay-picker-confirm{float:right;color:#228fff}.lay-picker-shadowup,.lay-picker-shadowdown{height:120px;width:100%;position:absolute;left:0;z-index:50}.lay-picker-shadowup{height:115px;top:-1px;background:-webkit-linear-gradient(to bottom,#FFF,rgba(255,255,255,.6));background:linear-gradient(to bottom,#FFF,rgba(255,255,255,.6));pointer-events:none;border-bottom:1px solid #efefef}.lay-picker-shadowdown{height:130px;bottom:0;background:-webkit-linear-gradient(to top,#FFF,rgba(255,255,255,.6));background:linear-gradient(to top,#FFF,rgba(255,255,255,.6));pointer-events:none;border-top:1px solid #efefef}.lay-picker-content{position:relative;height:300px;margin:15px;overflow:hidden}.lay-picker-box{overflow:hidden}.lay-picker-box:after{display:table;height:0;clear:both;content:''}.lay-picker-list-wrap{float:left;height:300px;overflow:hidden;-webkit-transition:width .2s;transition:width .2s}.lay-picker-list-wrap ul{position:relative;padding:100px 0;margin-top:17px;-webkit-transition:transform .1s ease-out;transition:transform .1s ease-out}.lay-picker-list-wrap ul:after{position:absolute;top:0;left:0;right:0;bottom:0;z-index:55;content:''}.lay-picker-list-wrap li{line-height:50px;height:50px;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.lay-picker-bottom{text-align:center;margin-top:10px;margin-bottom:30px;font-size:16px}.lay-picker-bottom-btn{border-radius:6px;display:inline-block;width:30%;height:40px;line-height:40px}.lay-picker-bottom-btn-cancel{color:#333;background:#efefef;margin-right:3%}.lay-picker-bottom-btn-confirm{color:#fff;background:#33c119}

View File

@@ -0,0 +1,159 @@
.mobileSelect {
position: relative;
z-index: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all .1s;
transition: all .1s
}
.mobileSelect .grayLayer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #eee;
background: rgba(0,0,0,.7);
z-index: 888;
display: block
}
.mobileSelect .content {
width: 100%;
display: block;
position: fixed;
z-index: 889;
color: #000;
-webkit-transition: all .4s;
transition: all .4s;
bottom: -350px;
left: 0;
background: #fff
}
.mobileSelect .content .fixWidth {
width: 90%;
margin: 0 auto;
position: relative
}
.mobileSelect .content .fixWidth:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
.mobileSelect .content .btnBar {
border-bottom: 1px solid #dcdcdc;
font-size: 15px;
height: 45px;
position: relative;
text-align: center;
line-height: 45px
}
.mobileSelect .content .btnBar .cancel,.mobileSelect .content .btnBar .ensure {
height: 45px;
width: 55px;
cursor: pointer;
position: absolute;
top: 0
}
.mobileSelect .content .btnBar .cancel {
left: 0;
color: #A4ABB2;
font-weight: bold;
}
.mobileSelect .content .btnBar .ensure {
right: 0;
color: #515665;
font-weight: bold;
}
.mobileSelect .content .btnBar .title {
font-size: 15px;
}
.mobileSelect .content .panel:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
.mobileSelect .content .panel .wheels {
width: 100%;
height: 200px;
overflow: hidden
}
.mobileSelect .content .panel .wheel {
position: relative;
z-index: 0;
float: left;
width: 50%;
height: 200px;
overflow: hidden;
-webkit-transition: width .3s ease;
transition: width .3s ease
}
.mobileSelect .content .panel .wheel .selectContainer {
display: block;
text-align: center;
-webkit-transition: -webkit-transform .18s ease-out;
transition: -webkit-transform .18s ease-out;
transition: transform .18s ease-out;
transition: transform .18s ease-out,-webkit-transform .18s ease-out
}
.mobileSelect .content .panel .wheel .selectContainer li {
font-size: 15px;
display: block;
height: 40px;
line-height: 40px;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
.mobileSelect .content .panel .selectLine {
height: 40px;
width: 100%;
position: absolute;
top: 80px;
pointer-events: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-top: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc
}
.mobileSelect .content .panel .shadowMask {
position: absolute;
top: 0;
width: 100%;
height: 200px;
background: -webkit-gradient(linear,left top,left bottom,from(#ffffff),color-stop(rgba(255,255,255,0)),to(#ffffff));
background: -webkit-linear-gradient(top,#ffffff,rgba(255,255,255,0),#ffffff);
background: linear-gradient(to bottom,#ffffff,rgba(255,255,255,0),#ffffff);
opacity: .9;
pointer-events: none
}
.mobileSelect-show {
opacity: 1;
z-index: 10000;
visibility: visible
}
.mobileSelect-show .content {
bottom: 0
}

View File

@@ -0,0 +1,733 @@
html,
body {
width: 100%;
height: 17.78667rem;
background: #fff;
}
.back {
width: 100%;
height: 2.34667rem;
position: fixed;
left: 0;
top: 0rem;
text-align: center;
color: #FFFFFF;
font-size: 0.50667rem;
font-weight: bold;
z-index: 10;
}
.back img {
width: 0.58667rem;
height: 0.58667rem;
position: absolute;
left: 0.24rem;
top: 1.46667rem;
}
.back .tab {
width: 55%;
height: 0.58667rem;
line-height: 0.58667rem;
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.46667rem;
}
.back .tab div {
height: 100%;
color: #AFB1B3;
font-size: 0.37333rem;
font-weight: 500;
text-align: center;
position: relative;
}
.back .tab div span {
width: 0.37333rem;
height: 0.10667rem;
border-radius: 0.10667rem;
background: #04D5C6;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -0.2rem;
display: none;
}
.back .tab .act {
color: #313131;
font-size: 0.42667rem;
}
.back .tab .act span {
display: block;
}
.page1 .my {
width: 9.14667rem;
height: 2.10667rem;
margin: 2.42667rem auto 0.26667rem;
background: #F2F3F7;
border-radius: 0.21333rem;
padding: 0.32rem 0.53333rem;
box-sizing: border-box;
}
.page1 .my .tx {
float: left;
width: 1.46667rem;
height: 1.46667rem;
display: block;
margin-right: 0.32rem;
border-radius: 50%;
}
.page1 .my .user {
width: 4.66667rem;
float: left;
}
.page1 .my .user p {
color: #333333;
font-size: 0.45333rem;
font-weight: 600;
margin-bottom: 0.13333rem;
margin-top: 0.34667rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.page1 .my .user b {
color: #7B7B7D;
font-size: 0.37333rem;
font-weight: 400;
}
.page1 .diamond {
width: 9.14667rem;
height: 1.17333rem;
line-height: 1.17333rem;
background: #F2F3F7;
margin: 0 auto 0.26667rem;
border-radius: 0.21333rem;
overflow: hidden;
box-sizing: border-box;
padding: 0 0.29333rem;
}
.page1 .diamond p {
float: left;
width: 6rem;
color: #313131;
font-size: 0.4rem;
font-weight: 500;
}
.page1 .diamond p i {
font-style: normal;
}
.page1 .diamond .withdraw {
width: 2.08rem;
height: 0.82667rem;
border-radius: 0.82667rem;
line-height: 0.82667rem;
background: #04D5C6;
color: #fff;
font-size: 0.34667rem;
font-weight: 500;
text-align: center;
float: right;
margin-top: 0.18667rem;
}
.page1 .account {
width: 9.14667rem;
height: 0.85333rem;
line-height: 0.85333rem;
border-radius: 0.21333rem;
background: #04D5C6;
margin: 0 auto 0.26667rem;
text-align: center;
color: #fff;
font-size: 0.4rem;
font-weight: 500;
}
.page1 .incomeTitle {
width: 9.14667rem;
height: 0.66667rem;
line-height: 0.66667rem;
position: relative;
margin: 0 auto 0.13333rem;
}
.page1 .incomeTitle span {
position: absolute;
width: 0.10667rem;
height: 0.45333rem;
top: 50%;
transform: translateY(-50%);
left: -0.26667rem;
background: #04D5C6;
}
.page1 .incomeTitle b {
display: block;
float: left;
color: #313131;
font-size: 0.48rem;
font-weight: 600;
}
.page1 .incomeTitle i {
font-style: normal;
display: block;
float: left;
height: 0.45333rem;
border-radius: 0.45333rem;
line-height: 0.45333rem;
padding: 0.05333rem 0.21333rem;
background: #313131;
color: #fff;
margin: 0.10667rem 0.26667rem 0;
}
.page1 .copywriting1 {
width: 9.14667rem;
height: 0.90667rem;
line-height: 0.4rem;
margin: 0 auto 0.26667rem;
color: #AFB1B3;
font-size: 0.32rem;
font-weight: 600;
}
.page1 .incomeBox {
width: 9.14667rem;
height: 2.82667rem;
position: relative;
margin: 0 auto 0.26667rem;
background: #EBFFF6;
border-radius: 0.21333rem;
box-sizing: border-box;
padding: 0.24rem;
}
.page1 .incomeBox .d {
width: 100%;
height: 0.48rem;
line-height: 0.48rem;
margin-bottom: 0.29333rem;
}
.page1 .incomeBox .d b {
display: block;
float: left;
color: #313131;
font-size: 0.37333rem;
font-weight: 400;
}
.page1 .incomeBox .d img {
display: block;
width: 0.48rem;
height: 0.48rem;
float: left;
margin: 0 0.13333rem;
}
.page1 .incomeBox .d span {
display: block;
float: right;
color: #313131;
font-size: 0.34667rem;
font-weight: 600;
}
.page1 .incomeBox .line {
width: 8.66667rem;
height: 0.02667rem;
background: #C2E7D6;
margin: 0 auto 0.26667rem;
}
.page1 .incomeTitleLast {
width: 9.14667rem;
height: 0.66667rem;
line-height: 0.66667rem;
position: relative;
margin: 0 auto 0.13333rem;
}
.page1 .incomeTitleLast span {
position: absolute;
width: 0.10667rem;
height: 0.45333rem;
top: 50%;
transform: translateY(-50%);
left: -0.26667rem;
background: #04D5C6;
}
.page1 .incomeTitleLast b {
display: block;
float: left;
color: #313131;
font-size: 0.48rem;
font-weight: 600;
}
.page1 .incomeTitleLast i {
font-style: normal;
display: block;
float: left;
height: 0.45333rem;
border-radius: 0.45333rem;
line-height: 0.45333rem;
padding: 0.05333rem 0.21333rem;
background: #313131;
color: #fff;
margin: 0.10667rem 0.26667rem 0;
}
.page1 .incomeBoxLast {
width: 9.14667rem;
height: 2.82667rem;
position: relative;
margin: 0.26667rem auto 0.26667rem;
background: #F2F3F7;
border-radius: 0.21333rem;
box-sizing: border-box;
padding: 0.24rem;
}
.page1 .incomeBoxLast .d {
width: 100%;
height: 0.48rem;
line-height: 0.48rem;
margin-bottom: 0.29333rem;
}
.page1 .incomeBoxLast .d b {
display: block;
float: left;
color: #313131;
font-size: 0.37333rem;
font-weight: 400;
}
.page1 .incomeBoxLast .d img {
display: block;
width: 0.48rem;
height: 0.48rem;
float: left;
margin: 0 0.13333rem;
}
.page1 .incomeBoxLast .d span {
display: block;
float: right;
color: #313131;
font-size: 0.34667rem;
font-weight: 600;
}
.page1 .incomeBoxLast .line {
width: 8.66667rem;
height: 0.02667rem;
background: #E4E4E4;
margin: 0 auto 0.26667rem;
}
.page2 {
display: none;
}
.page2 .agentSalary {
width: 9.14667rem;
height: 0.66667rem;
line-height: 0.66667rem;
position: relative;
margin: 2.66667rem auto 0.13333rem;
}
.page2 .agentSalary span {
position: absolute;
width: 0.10667rem;
height: 0.45333rem;
top: 50%;
transform: translateY(-50%);
left: -0.26667rem;
background: #04D5C6;
}
.page2 .agentSalary b {
display: block;
float: left;
color: #313131;
font-size: 0.48rem;
font-weight: 600;
}
.page2 .agentSalary i {
font-style: normal;
display: block;
float: left;
height: 0.45333rem;
border-radius: 0.45333rem;
line-height: 0.45333rem;
padding: 0.05333rem 0.21333rem;
background: #313131;
color: #fff;
margin: 0.10667rem 0.26667rem 0;
}
.page2 .agentSalary img {
float: right;
display: block;
width: 0.56rem;
height: 0.56rem;
margin-top: 0.10667rem;
}
.page2 .agentSalaryInfo {
width: 9.14667rem;
height: 3.54667rem;
background: #F2F3F7;
margin: 0.26667rem auto 0.26667rem;
border-radius: 0.21333rem;
box-sizing: border-box;
padding: 0.24rem 0.24rem;
}
.page2 .agentSalaryInfo .top {
width: 8.66667rem;
height: 1.06667rem;
line-height: 1.06667rem;
background: #BBF6DB;
border-radius: 0.21333rem;
box-sizing: border-box;
padding: 0 0.24rem;
}
.page2 .agentSalaryInfo .top span {
display: block;
float: left;
color: #313131;
font-size: 0.42667rem;
font-weight: 600;
}
.page2 .agentSalaryInfo .top img {
display: block;
width: 0.48rem;
height: 0.48rem;
float: left;
margin: 0.32rem 0.13333rem 0;
}
.page2 .agentSalaryInfo .top b {
float: right;
display: block;
color: #313131;
font-size: 0.48rem;
font-weight: 600;
}
.page2 .agentSalaryInfo .bottom {
width: 100%;
height: 1.76rem;
display: flex;
justify-content: space-between;
margin-top: 0.24rem;
}
.page2 .agentSalaryInfo .bottom div {
width: 4.21333rem;
height: 1.76rem;
background: #fff;
border-radius: 0.21333rem;
text-align: center;
overflow: hidden;
}
.page2 .agentSalaryInfo .bottom div p {
color: #313131;
font-size: 0.48rem;
font-weight: 600;
margin-bottom: 0.2rem;
margin-top: 0.33333rem;
}
.page2 .agentSalaryInfo .bottom div p img {
display: inline-block;
width: 0.48rem;
height: 0.48rem;
}
.page2 .agentSalaryInfo .bottom div span {
color: #7B7B7D;
font-size: 0.29333rem;
font-weight: 400;
}
.page2 .agentSalaryInfo .bottom .act {
background: #DBF6FF;
}
.page2 .agentSalary2 {
width: 9.14667rem;
height: 0.66667rem;
line-height: 0.66667rem;
position: relative;
margin: 0 auto 0.26667rem;
}
.page2 .agentSalary2 span {
position: absolute;
width: 0.10667rem;
height: 0.45333rem;
top: 50%;
transform: translateY(-50%);
left: -0.26667rem;
background: #04D5C6;
}
.page2 .agentSalary2 b {
display: block;
float: left;
color: #313131;
font-size: 0.48rem;
font-weight: 600;
}
.page2 .agentSalary2 i {
font-style: normal;
display: block;
float: left;
height: 0.45333rem;
border-radius: 0.45333rem;
line-height: 0.45333rem;
padding: 0.05333rem 0.21333rem;
background: #313131;
color: #fff;
margin: 0.10667rem 0.26667rem 0;
}
.page2 .agentSalary2 img {
float: right;
display: block;
width: 0.56rem;
height: 0.56rem;
margin-top: 0.10667rem;
}
.page2 .data {
width: 9.14667rem;
height: 13rem;
margin: 0 auto 0rem;
overflow-y: scroll;
}
.page2 .data::-webkit-scrollbar {
display: none;
}
.page2 .data .box {
width: 100%;
height: 1.94667rem;
border-radius: 0.21333rem;
background: #DBF6FF;
box-sizing: border-box;
padding: 0 0.24rem;
margin-bottom: 0.26667rem;
}
.page2 .data .box .tx {
float: left;
width: 1.46667rem;
height: 1.46667rem;
border-radius: 50%;
display: block;
margin-top: 0.24rem;
margin-right: 0.21333rem;
}
.page2 .data .box .user {
width: 3.33333rem;
float: left;
}
.page2 .data .box .user p {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #333333;
font-size: 0.42667rem;
font-weight: 600;
margin-top: 0.53333rem;
margin-bottom: 0.13333rem;
}
.page2 .data .box .user b {
color: #7B7B7D;
font-size: 0.34667rem;
font-weight: 400;
}
.page2 .data .box .right {
float: right;
text-align: right;
}
.page2 .data .box .right p {
color: #313131;
font-size: 0.48rem;
font-weight: 600;
margin-top: 0.45333rem;
margin-bottom: 0.2rem;
}
.page2 .data .box .right b {
color: #313131;
font-size: 0.34667rem;
font-weight: 400;
}
.arabic .my .tx {
float: right;
}
.arabic .my .user {
float: right;
margin-right: 0.2rem;
}
.arabic .incomeTitle span {
float: right;
}
.arabic .incomeTitle b {
float: right;
}
.arabic .incomeTitle i {
float: right;
}
.arabic .incomeTitle span {
left: auto;
right: -0.26667rem;
}
.arabic .incomeBox .d b {
float: right;
}
.arabic .incomeBox .d img {
float: right;
}
.arabic .incomeBox .d span {
float: left;
}
.arabic .incomeTitleLast span {
float: right;
}
.arabic .incomeTitleLast b {
float: right;
}
.arabic .incomeTitleLast i {
float: right;
}
.arabic .incomeTitleLast span {
left: auto;
right: -0.26667rem;
}
.arabic .incomeBoxLast .d b {
float: right;
}
.arabic .incomeBoxLast .d img {
float: right;
}
.arabic .incomeBoxLast .d span {
float: left;
}
.arabic .page1 .diamond p {
float: right;
}
.arabic .page1 .diamond .withdraw {
float: left;
}
.arabic .page2 .agentSalary b,
.arabic .page2 .agentSalary2 b {
float: right;
}
.arabic .page2 .agentSalary i,
.arabic .page2 .agentSalary2 i {
float: right;
}
.arabic .page2 .agentSalary img,
.arabic .page2 .agentSalary2 img {
float: left;
transform: rotate(180deg);
}
.arabic .page2 .agentSalary span,
.arabic .page2 .agentSalary2 span {
left: auto;
right: -0.26667rem;
}
.arabic .page2 .agentSalaryInfo .top span {
float: right;
}
.arabic .page2 .agentSalaryInfo .top img {
float: right;
}
.arabic .page2 .agentSalaryInfo .top b {
float: left;
}
.arabic .page2 .data .box .tx {
float: right;
margin-left: 0.2rem;
margin-right: 0;
}
.arabic .page2 .data .box .user {
float: right;
}
.arabic .page2 .data .box .right {
float: left;
text-align: left;
}
.arabic .back img {
left: auto;
right: 0.24rem;
transform: rotate(180deg);
}

View File

@@ -0,0 +1,757 @@
@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
width: 100%;
height: px2rem(1334);
background: #fff;
}
.back {
width: 100%;
height: px2rem(176);
position: fixed;
left: 0;
top: px2rem(0);
text-align: center;
color: #FFFFFF;
font-size: px2rem(38);
font-weight: bold;
z-index: 10;
img {
width: px2rem(44);
height: px2rem(44);
position: absolute;
left: px2rem(18);
top: px2rem(110);
}
.tab {
width: 55%;
height: px2rem(44);
line-height: px2rem(44);
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(110);
div {
height: 100%;
color: #AFB1B3;
font-size: px2rem(28);
font-weight: 500;
text-align: center;
position: relative;
span {
width: px2rem(28);
height: px2rem(8);
border-radius: px2rem(8);
background: #04D5C6;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(-15);
display: none;
}
}
.act {
color: #313131;
font-size: px2rem(32);
span {
display: block;
}
}
}
}
.page1 {
// display: none;
.my {
width: px2rem(686);
height: px2rem(158);
margin: px2rem(182) auto px2rem(20);
background: #F2F3F7;
border-radius: px2rem(16);
padding: px2rem(24) px2rem(40);
box-sizing: border-box;
.tx {
float: left;
width: px2rem(110);
height: px2rem(110);
display: block;
margin-right: px2rem(24);
border-radius: 50%;
}
.user {
width: px2rem(350);
float: left;
p {
color: #333333;
font-size: px2rem(34);
font-weight: 600;
margin-bottom: px2rem(10);
margin-top: px2rem(26);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
b {
color: #7B7B7D;
font-size: px2rem(28);
font-weight: 400;
}
}
}
.diamond {
width: px2rem(686);
height: px2rem(88);
line-height: px2rem(88);
background: #F2F3F7;
margin: 0 auto px2rem(20);
border-radius: px2rem(16);
overflow: hidden;
box-sizing: border-box;
padding: 0 px2rem(22);
p {
float: left;
width: px2rem(450);
color: #313131;
font-size: px2rem(30);
font-weight: 500;
i {
font-style: normal;
}
}
.withdraw {
width: px2rem(156);
height: px2rem(62);
border-radius: px2rem(62);
line-height: px2rem(62);
background: #04D5C6;
color: #fff;
font-size: px2rem(26);
font-weight: 500;
text-align: center;
float: right;
margin-top: px2rem(14);
}
}
.account {
width: px2rem(686);
height: px2rem(64);
line-height: px2rem(64);
border-radius: px2rem(16);
background: #04D5C6;
margin: 0 auto px2rem(20);
text-align: center;
color: #fff;
font-size: px2rem(30);
font-weight: 500;
}
.incomeTitle {
width: px2rem(686);
height: px2rem(50);
line-height: px2rem(50);
position: relative;
margin: 0 auto px2rem(10);
span {
position: absolute;
width: px2rem(8);
height: px2rem(34);
top: 50%;
transform: translateY(-50%);
left: px2rem(-20);
background: #04D5C6;
}
b {
display: block;
float: left;
color: #313131;
font-size: px2rem(36);
font-weight: 600;
}
i {
font-style: normal;
display: block;
float: left;
height: px2rem(34);
border-radius: px2rem(34);
line-height: px2rem(34);
padding: px2rem(4) px2rem(16);
background: #313131;
color: #fff;
margin: px2rem(8) px2rem(20) 0;
}
}
.copywriting1 {
width: px2rem(686);
height: px2rem(68);
line-height: 0.4rem;
margin: 0 auto px2rem(20);
color: #AFB1B3;
font-size: px2rem(24);
font-weight: 600;
}
.incomeBox {
width: px2rem(686);
height: px2rem(212);
position: relative;
margin: 0 auto px2rem(20);
background: #EBFFF6;
border-radius: px2rem(16);
box-sizing: border-box;
padding: px2rem(18);
.d {
width: 100%;
height: px2rem(36);
line-height: px2rem(36);
margin-bottom: px2rem(22);
b {
display: block;
float: left;
color: #313131;
font-size: px2rem(28);
font-weight: 400;
}
img {
display: block;
width: px2rem(36);
height: px2rem(36);
float: left;
margin: 0 px2rem(10);
}
span {
display: block;
float: right;
color: #313131;
font-size: px2rem(26);
font-weight: 600;
}
}
.line {
width: px2rem(650);
height: px2rem(2);
background: #C2E7D6;
margin: 0 auto px2rem(20);
}
}
.incomeTitleLast {
width: px2rem(686);
height: px2rem(50);
line-height: px2rem(50);
position: relative;
margin: 0 auto px2rem(10);
span {
position: absolute;
width: px2rem(8);
height: px2rem(34);
top: 50%;
transform: translateY(-50%);
left: px2rem(-20);
background: #04D5C6;
}
b {
display: block;
float: left;
color: #313131;
font-size: px2rem(36);
font-weight: 600;
}
i {
font-style: normal;
display: block;
float: left;
height: px2rem(34);
border-radius: px2rem(34);
line-height: px2rem(34);
padding: px2rem(4) px2rem(16);
background: #313131;
color: #fff;
margin: px2rem(8) px2rem(20) 0;
}
}
.incomeBoxLast {
width: px2rem(686);
height: px2rem(212);
position: relative;
margin: px2rem(20) auto px2rem(20);
background: #F2F3F7;
border-radius: px2rem(16);
box-sizing: border-box;
padding: px2rem(18);
.d {
width: 100%;
height: px2rem(36);
line-height: px2rem(36);
margin-bottom: px2rem(22);
b {
display: block;
float: left;
color: #313131;
font-size: px2rem(28);
font-weight: 400;
}
img {
display: block;
width: px2rem(36);
height: px2rem(36);
float: left;
margin: 0 px2rem(10);
}
span {
display: block;
float: right;
color: #313131;
font-size: px2rem(26);
font-weight: 600;
}
}
.line {
width: px2rem(650);
height: px2rem(2);
background: #E4E4E4;
margin: 0 auto px2rem(20);
}
}
}
.page2 {
display: none;
.agentSalary {
width: px2rem(686);
height: px2rem(50);
line-height: px2rem(50);
position: relative;
margin: px2rem(200) auto px2rem(10);
span {
position: absolute;
width: px2rem(8);
height: px2rem(34);
top: 50%;
transform: translateY(-50%);
left: px2rem(-20);
background: #04D5C6;
}
b {
display: block;
float: left;
color: #313131;
font-size: px2rem(36);
font-weight: 600;
}
i {
font-style: normal;
display: block;
float: left;
height: px2rem(34);
border-radius: px2rem(34);
line-height: px2rem(34);
padding: px2rem(4) px2rem(16);
background: #313131;
color: #fff;
margin: px2rem(8) px2rem(20) 0;
}
img {
float: right;
display: block;
width: px2rem(42);
height: px2rem(42);
margin-top: px2rem(8);
}
}
.agentSalaryInfo {
width: px2rem(686);
height: px2rem(266);
background: #F2F3F7;
margin: px2rem(20) auto px2rem(20);
border-radius: px2rem(16);
box-sizing: border-box;
padding: px2rem(18) px2rem(18);
.top {
width: px2rem(650);
height: px2rem(80);
line-height: px2rem(80);
background: #BBF6DB;
border-radius: px2rem(16);
box-sizing: border-box;
padding: 0 px2rem(18);
span {
display: block;
float: left;
color: #313131;
font-size: px2rem(32);
font-weight: 600;
}
img {
display: block;
width: px2rem(36);
height: px2rem(36);
float: left;
margin: px2rem(24) px2rem(10) 0;
}
b {
float: right;
display: block;
color: #313131;
font-size: px2rem(36);
font-weight: 600;
}
}
.bottom {
width: 100%;
height: px2rem(132);
display: flex;
justify-content: space-between;
margin-top: px2rem(18);
div {
width: px2rem(316);
height: px2rem(132);
background: #fff;
border-radius: px2rem(16);
text-align: center;
overflow: hidden;
p {
color: #313131;
font-size: px2rem(36);
font-weight: 600;
margin-bottom: px2rem(15);
margin-top: px2rem(25);
img {
display: inline-block;
width: px2rem(36);
height: px2rem(36);
}
}
span {
color: #7B7B7D;
font-size: px2rem(22);
font-weight: 400;
}
}
.act {
background: #DBF6FF;
}
}
}
.agentSalary2 {
width: px2rem(686);
height: px2rem(50);
line-height: px2rem(50);
position: relative;
margin: 0 auto px2rem(20);
span {
position: absolute;
width: px2rem(8);
height: px2rem(34);
top: 50%;
transform: translateY(-50%);
left: px2rem(-20);
background: #04D5C6;
}
b {
display: block;
float: left;
color: #313131;
font-size: px2rem(36);
font-weight: 600;
}
i {
font-style: normal;
display: block;
float: left;
height: px2rem(34);
border-radius: px2rem(34);
line-height: px2rem(34);
padding: px2rem(4) px2rem(16);
background: #313131;
color: #fff;
margin: px2rem(8) px2rem(20) 0;
}
img {
float: right;
display: block;
width: px2rem(42);
height: px2rem(42);
margin-top: px2rem(8);
}
}
.data {
width: px2rem(686);
height: 13rem;
margin: 0 auto px2rem(0);
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
}
.box {
width: 100%;
height: px2rem(146);
border-radius: px2rem(16);
background: #DBF6FF;
box-sizing: border-box;
padding: 0 px2rem(18);
margin-bottom: px2rem(20);
.tx {
float: left;
width: px2rem(110);
height: px2rem(110);
border-radius: 50%;
display: block;
margin-top: px2rem(18);
margin-right: px2rem(16);
}
.user {
width: px2rem(250);
float: left;
p {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #333333;
font-size: px2rem(32);
font-weight: 600;
margin-top: px2rem(40);
margin-bottom: px2rem(10);
}
b {
color: #7B7B7D;
font-size: px2rem(26);
font-weight: 400;
}
}
.right {
float: right;
text-align: right;
p {
color: #313131;
font-size: px2rem(36);
font-weight: 600;
margin-top: px2rem(34);
margin-bottom: px2rem(15);
}
b {
color: #313131;
font-size: px2rem(26);
font-weight: 400;
}
}
}
}
}
.arabic {
.my .tx {
float: right;
}
.my .user {
float: right;
margin-right: 0.2rem;
}
.incomeTitle {
span {
float: right;
}
b {
float: right;
}
i {
float: right;
}
span {
left: auto;
right: -0.26667rem;
}
}
.incomeBox .d {
b {
float: right;
}
img {
float: right;
}
span {
float: left;
}
}
.incomeTitleLast {
span {
float: right;
}
b {
float: right;
}
i {
float: right;
}
span {
left: auto;
right: -0.26667rem;
}
}
.incomeBoxLast .d {
b {
float: right;
}
img {
float: right;
}
span {
float: left;
}
}
.page1 .diamond p {
float: right;
}
.page1 .diamond .withdraw {
float: left;
}
.page2 .agentSalary,
.page2 .agentSalary2 {
b {
float: right;
}
i {
float: right;
}
img {
float: left;
transform: rotate(180deg);
}
span {
left: auto;
right: px2rem(-20);
}
}
.page2 .agentSalaryInfo {
.top {
span {
float: right;
}
img {
float: right;
}
b {
float: left;
}
}
}
.page2 .data .box {
.tx {
float: right;
margin-left: 0.2rem;
margin-right: 0;
}
.user {
float: right;
}
.right {
float: left;
text-align: left;
}
}
.back img {
left: auto;
right: 0.24rem;
transform: rotate(180deg);
}
}

View File

@@ -0,0 +1,124 @@
body,
html {
width: 100%;
background: #f4f4f4;
}
.nav {
width: 100%;
height: 2.34667rem;
background: #f4f4f4;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 100;
}
.nav .back {
width: 0.58667rem;
height: 0.58667rem;
position: absolute;
left: 0.4rem;
bottom: 0.29333rem;
}
.nav p {
height: 0.58667rem;
line-height: 0.58667rem;
font-size: 0.42667rem;
font-weight: 500;
color: #313131;
position: absolute;
bottom: 0.26667rem;
left: 50%;
transform: translateX(-50%);
}
ul {
width: 9.14667rem;
margin: 2.34667rem auto 0;
}
ul .date {
width: 100%;
height: 0.93333rem;
line-height: 0.93333rem;
font-weight: 500;
font-size: 0.4rem;
color: #313131;
background: #f4f4f4;
position: sticky;
top: 2.34667rem;
z-index: 2;
}
ul li {
width: 100%;
height: 2.08rem;
background: #ffffff;
border-radius: 0.32rem;
margin-bottom: 0.37333rem;
position: relative;
}
ul li .avatar {
width: 1.46667rem;
height: 1.46667rem;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0.24rem;
}
ul li .name {
font-weight: 600;
font-size: 0.42667rem;
line-height: 0.58667rem;
color: #313131;
position: absolute;
top: 0.48rem;
left: 2.02667rem;
max-width: 2.6rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
ul li .id {
font-weight: 400;
font-size: 0.34667rem;
color: #7b7b7d;
position: absolute;
top: 1.22667rem;
left: 2.02667rem;
}
ul li span {
font-weight: 400;
font-size: 0.34667rem;
color: #7b7b7d;
position: absolute;
top: 0.53333rem;
right: 0.24rem;
}
ul li span b {
font-weight: 500;
color: #ff9010;
}
ul li .coins {
font-size: 0.34667rem;
color: #afb1b3;
position: absolute;
top: 1.12rem;
right: 0.24rem;
}
.arLang .nav .back {
right: 0.4rem;
left: unset;
transform: rotate(180deg);
}

View File

@@ -0,0 +1,131 @@
@function px2rem($px, $rem: 37.5) {
@return $px / $rem + rem;
}
body,
html {
width: 100%;
background: #f4f4f4;
}
.nav {
width: 100%;
height: px2rem(88);
background: #f4f4f4;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 100;
.back {
width: px2rem(22);
height: px2rem(22);
position: absolute;
left: px2rem(15);
bottom: px2rem(11);
}
p {
height: px2rem(22);
line-height: px2rem(22);
font-size: px2rem(16);
font-weight: 500;
color: #313131;
position: absolute;
bottom: px2rem(10);
left: 50%;
transform: translateX(-50%);
}
}
ul {
width: px2rem(343);
margin: px2rem(88) auto 0;
.date {
width: 100%;
height: px2rem(35);
line-height: px2rem(35);
font-weight: 500;
font-size: px2rem(15);
color: #313131;
background: #f4f4f4;
position: sticky;
top: px2rem(88);
z-index: 2;
}
li {
width: 100%;
height: px2rem(78);
background: #ffffff;
border-radius: px2rem(12);
margin-bottom: px2rem(14);
position: relative;
.avatar {
width: px2rem(55);
height: px2rem(55);
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: px2rem(9);
}
.name {
font-weight: 600;
font-size: px2rem(16);
line-height: px2rem(22);
color: #313131;
position: absolute;
top: px2rem(18);
left: px2rem(76);
max-width: 2.6rem;
// 单行溢出省略
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.id {
font-weight: 400;
font-size: px2rem(13);
color: #7b7b7d;
position: absolute;
top: px2rem(46);
left: px2rem(76);
}
span {
font-weight: 400;
font-size: px2rem(13);
color: #7b7b7d;
position: absolute;
top: px2rem(20);
right: px2rem(9);
b {
font-weight: 500;
color: #ff9010;
}
}
.coins {
font-size: px2rem(13);
color: #afb1b3;
position: absolute;
top: px2rem(42);
right: px2rem(9);
}
}
}
.arLang {
.nav {
.back {
right: px2rem(15);
left: unset;
transform: rotate(180deg);
}
}
}

View File

@@ -0,0 +1,609 @@
body,
html {
width: 100%;
background: #ffffff;
}
.nav {
width: 100%;
height: 2.34667rem;
background: #ffffff;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 100;
}
.nav .back {
width: 0.58667rem;
height: 0.58667rem;
position: absolute;
left: 0.4rem;
bottom: 0.29333rem;
}
.nav p {
height: 0.58667rem;
line-height: 0.58667rem;
font-size: 0.42667rem;
font-weight: 500;
color: #313131;
position: absolute;
bottom: 0.26667rem;
left: 50%;
transform: translateX(-50%);
}
.my_salary {
width: 9.12rem;
padding-bottom: 0.21333rem;
border-bottom: 1px solid #e4e4e4;
margin: 3.04rem auto 0;
display: flex;
justify-content: space-between;
}
.my_salary p {
height: 0.66667rem;
line-height: 0.66667rem;
}
.my_salary p e,
.my_salary p b {
font-size: 0.48rem;
color: #313131;
}
.my_salary p b {
color: #04D5C6;
}
.my_salary p span {
font-size: 0.37333rem;
color: #7b7b7d;
}
.my_salary p img {
width: 0.64rem;
height: 0.64rem;
display: inline-block;
}
.tab {
width: 9.17333rem;
height: 0.85333rem;
background: #f2f3f7;
border-radius: 0.21333rem;
margin: 0.26667rem auto 0;
display: flex;
}
.tab .item {
width: 50%;
height: 100%;
border-radius: 0.21333rem;
font-size: 0.37333rem;
color: #313131;
line-height: 0.85333rem;
text-align: center;
}
.tab .act {
background: #04D5C6;
color: #ffffff;
}
.transfer_method_tit,
.transfer_dollars_tit {
width: 9.2rem;
margin: 0 auto 0;
display: flex;
align-items: baseline;
}
.transfer_method_tit .title,
.transfer_dollars_tit .title {
font-weight: 600;
font-size: 0.48rem;
color: #313131;
line-height: 0.66667rem;
padding: 0.32rem 0;
}
.transfer_method_tit .title::before,
.transfer_dollars_tit .title::before {
content: "";
display: inline-block;
width: 0.10667rem;
height: 0.48rem;
border-radius: 0.37333rem;
background: #04D5C6;
vertical-align: top;
margin: 0.10667rem 0.21333rem;
}
.transfer_method_tit p,
.transfer_dollars_tit p {
height: 0.48rem;
line-height: 0.48rem;
font-size: 0.26667rem;
color: #ffffff;
padding: 0 0.16rem;
background: #313131;
border-radius: 0.32rem;
margin: 0 0.13333rem;
}
.transfer_method,
.transfer_dollars {
width: 9.17333rem;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.transfer_method li,
.transfer_dollars li {
width: 4.48rem;
height: 1.86667rem;
background: #f2f3f7;
border-radius: 0.21333rem;
box-sizing: border-box;
margin-bottom: 0.16rem;
position: relative;
border: 0.05333rem solid #fff;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.transfer_method li:nth-child(2n),
.transfer_dollars li:nth-child(2n) {
margin-right: unset;
}
.transfer_method li p,
.transfer_dollars li p {
font-weight: 500;
font-size: 0.42667rem;
color: #313131;
text-align: center;
line-height: 0.58667rem;
}
.transfer_method li span,
.transfer_dollars li span {
font-weight: 400;
font-size: 0.37333rem;
color: #313131;
}
.transfer_method li span .coin,
.transfer_dollars li span .coin {
width: 0.37333rem;
height: 0.37333rem;
display: inline-block;
}
.transfer_method li .dollar,
.transfer_dollars li .dollar {
width: 0.42667rem;
height: 0.42667rem;
margin-top: 0.05333rem;
display: inline-block;
}
.transfer_method li .custom,
.transfer_dollars li .custom {
width: 0.32rem;
height: 0.32rem;
margin-top: 0.13333rem;
display: inline-block;
}
.transfer_method li .tips,
.transfer_dollars li .tips {
background: #04D5C6;
border-radius: 0px 0.16rem 0px 0.21333rem;
position: absolute;
top: 0;
right: 0;
font-size: 0.32rem;
color: #ffffff;
padding: 0.10667rem;
}
.transfer_method li .tips img,
.transfer_dollars li .tips img {
width: 0.29333rem;
height: 0.29333rem;
display: inline-block;
vertical-align: unset;
}
.transfer_method .li_act,
.transfer_dollars .li_act {
border: 0.05333rem solid #04D5C6;
}
.transfer_method .official_withdraw,
.transfer_method .agent_settlement,
.transfer_dollars .official_withdraw,
.transfer_dollars .agent_settlement {
position: relative;
}
.transfer_method .official_withdraw .pop,
.transfer_method .agent_settlement .pop,
.transfer_dollars .official_withdraw .pop,
.transfer_dollars .agent_settlement .pop {
width: 4.8rem;
height: 1.12rem;
background: url(../images/pop.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: -0.42667rem;
left: 3.52rem;
font-size: 0.32rem;
line-height: 0.42667rem;
color: #ffffff;
padding: 0.10667rem 0.21333rem 0;
}
.transfer_dollars {
margin-bottom: 2.13333rem;
}
.confirm {
width: 9.17333rem;
height: 1.06667rem;
background: #04D5C6;
border-radius: 0.66667rem;
position: fixed;
bottom: 0.48rem;
left: 50%;
transform: translateX(-50%);
font-weight: 400;
font-size: 0.42667rem;
color: #ffffff;
line-height: 1.06667rem;
text-align: center;
}
.agent_pop,
.president_pop {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
display: none;
}
.agent_pop .agent_pop_in,
.agent_pop .president_pop_in,
.president_pop .agent_pop_in,
.president_pop .president_pop_in {
width: 7.73333rem;
background: #ffffff;
border-radius: 0.42667rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.agent_pop .agent_pop_in .title,
.agent_pop .president_pop_in .title,
.president_pop .agent_pop_in .title,
.president_pop .president_pop_in .title {
width: 100%;
font-weight: 500;
font-size: 0.42667rem;
color: #313131;
text-align: center;
padding: 0.37333rem 0;
}
.agent_pop .agent_pop_in h2,
.agent_pop .president_pop_in h2,
.president_pop .agent_pop_in h2,
.president_pop .president_pop_in h2 {
font-size: 0.32rem;
color: #afb1b3;
line-height: 0.45333rem;
text-align: center;
padding: 0 0.21333rem 0.21333rem;
}
.agent_pop .agent_pop_in .wrap,
.agent_pop .president_pop_in .wrap,
.president_pop .agent_pop_in .wrap,
.president_pop .president_pop_in .wrap {
width: 6.98667rem;
max-height: 9.97333rem;
margin: 0 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.agent_pop .agent_pop_in .wrap::-webkit-scrollbar,
.agent_pop .president_pop_in .wrap::-webkit-scrollbar,
.president_pop .agent_pop_in .wrap::-webkit-scrollbar,
.president_pop .president_pop_in .wrap::-webkit-scrollbar {
display: none;
}
.agent_pop .agent_pop_in .wrap li,
.agent_pop .president_pop_in .wrap li,
.president_pop .agent_pop_in .wrap li,
.president_pop .president_pop_in .wrap li {
box-sizing: border-box;
border: 2px solid #fff;
width: 100%;
height: 1.92rem;
background: #f4f4f4;
border-radius: 0.21333rem;
margin-bottom: 0.26667rem;
position: relative;
}
.agent_pop .agent_pop_in .wrap li .avatar,
.agent_pop .president_pop_in .wrap li .avatar,
.president_pop .agent_pop_in .wrap li .avatar,
.president_pop .president_pop_in .wrap li .avatar {
width: 1.46667rem;
height: 1.46667rem;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0.24rem;
}
.agent_pop .agent_pop_in .wrap li .name,
.agent_pop .president_pop_in .wrap li .name,
.president_pop .agent_pop_in .wrap li .name,
.president_pop .president_pop_in .wrap li .name {
display: flex;
align-items: center;
position: absolute;
top: 0.4rem;
left: 2.02667rem;
}
.agent_pop .agent_pop_in .wrap li .name p,
.agent_pop .president_pop_in .wrap li .name p,
.president_pop .agent_pop_in .wrap li .name p,
.president_pop .president_pop_in .wrap li .name p {
max-width: 3rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 600;
font-size: 0.42667rem;
color: #333333;
line-height: 0.58667rem;
}
.agent_pop .agent_pop_in .wrap li .name .flag,
.agent_pop .president_pop_in .wrap li .name .flag,
.president_pop .agent_pop_in .wrap li .name .flag,
.president_pop .president_pop_in .wrap li .name .flag {
width: 0.45333rem;
height: 0.32rem;
}
.agent_pop .agent_pop_in .wrap li .id,
.agent_pop .president_pop_in .wrap li .id,
.president_pop .agent_pop_in .wrap li .id,
.president_pop .president_pop_in .wrap li .id {
font-weight: 400;
font-size: 0.34667rem;
color: #7b7b7d;
position: absolute;
bottom: 0.45333rem;
left: 2.02667rem;
}
.agent_pop .agent_pop_in .wrap .li_act,
.agent_pop .president_pop_in .wrap .li_act,
.president_pop .agent_pop_in .wrap .li_act,
.president_pop .president_pop_in .wrap .li_act {
box-sizing: border-box;
border: 2px solid #04D5C6;
}
.agent_pop .agent_pop_in .wrap li.no,
.agent_pop .president_pop_in .wrap li.no,
.president_pop .agent_pop_in .wrap li.no,
.president_pop .president_pop_in .wrap li.no {
width: 100%;
line-height: 1.92rem;
text-align: center;
font-weight: 400;
font-size: 0.26667rem;
color: #7b7b7d;
}
.agent_pop .agent_pop_in .btn_wrap,
.agent_pop .president_pop_in .btn_wrap,
.president_pop .agent_pop_in .btn_wrap,
.president_pop .president_pop_in .btn_wrap {
width: 6.98667rem;
margin: 0.26667rem auto;
display: flex;
justify-content: space-evenly;
}
.agent_pop .agent_pop_in .btn_wrap .cancel,
.agent_pop .agent_pop_in .btn_wrap .sure,
.agent_pop .president_pop_in .btn_wrap .cancel,
.agent_pop .president_pop_in .btn_wrap .sure,
.president_pop .agent_pop_in .btn_wrap .cancel,
.president_pop .agent_pop_in .btn_wrap .sure,
.president_pop .president_pop_in .btn_wrap .cancel,
.president_pop .president_pop_in .btn_wrap .sure {
width: 2.93333rem;
height: 0.96rem;
background: #04D5C6;
border-radius: 3.12rem;
font-weight: 500;
color: #ffffff;
font-size: 0.37333rem;
line-height: 0.96rem;
text-align: center;
}
.agent_pop .agent_pop_in .btn_wrap .cancel,
.agent_pop .president_pop_in .btn_wrap .cancel,
.president_pop .agent_pop_in .btn_wrap .cancel,
.president_pop .president_pop_in .btn_wrap .cancel {
background: #ebebeb;
color: #7b7b7d;
}
.custom_pop {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
display: none;
}
.custom_pop .custom_pop_in {
width: 9.17333rem;
background: #ffffff;
border-radius: 0.42667rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.custom_pop .custom_pop_in .title {
width: 100%;
font-weight: 500;
font-size: 0.42667rem;
color: #313131;
text-align: center;
padding: 0.37333rem 0 0.13333rem;
}
.custom_pop .custom_pop_in h1 {
font-size: 0.32rem;
color: #afb1b3;
line-height: 0.45333rem;
text-align: center;
padding-bottom: 0.21333rem;
}
.custom_pop .custom_pop_in h2 {
font-size: 0.32rem;
color: #7b7b7d;
line-height: 0.45333rem;
padding-left: 2.13333rem;
padding-top: 0.13333rem;
box-sizing: border-box;
}
.custom_pop .custom_pop_in .ipt {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.custom_pop .custom_pop_in .ipt span {
font-weight: 600;
font-size: 0.48rem;
color: #04D5C6;
margin-right: 0.26667rem;
}
.custom_pop .custom_pop_in .ipt input {
width: 5.65333rem;
height: 0.8rem;
border-radius: 0.21333rem;
border: 1px solid #e4e4e4;
outline: none;
font-weight: 500;
font-size: 0.4rem;
color: #313131;
padding: 0 0.13333rem;
}
.custom_pop .custom_pop_in .ipt e {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 1.4rem;
font-weight: 400;
font-size: 0.37333rem;
color: #24cf9e;
}
.custom_pop .custom_pop_in .btn_wrap {
width: 6.98667rem;
margin: 0.53333rem auto 0.26667rem;
display: flex;
justify-content: space-evenly;
}
.custom_pop .custom_pop_in .btn_wrap .cancel,
.custom_pop .custom_pop_in .btn_wrap .sure {
width: 2.72rem;
height: 0.8rem;
background: #04D5C6;
border-radius: 0.66667rem;
font-weight: 500;
color: #ffffff;
font-size: 0.37333rem;
line-height: 0.8rem;
text-align: center;
}
.custom_pop .custom_pop_in .btn_wrap .cancel {
background: #ebebeb;
color: #7b7b7d;
}
.arabic .nav .back {
right: 0.4rem;
left: unset;
transform: rotate(180deg);
}
.arabic .transfer_method .official_withdraw .pop {
left: unset;
right: 3.52rem;
}
.arabic .my_salary p img {
transform: rotate(180deg);
}
.arabic .custom_pop .custom_pop_in .ipt e {
right: unset;
left: 1.4rem;
}
.arabic .custom_pop .custom_pop_in h2 {
padding-right: 1.4666666667rem;
padding-left: unset;
}
.arabic .transfer_method .official_withdraw .pop, .arabic .transfer_method .agent_settlement .pop, .arabic .transfer_dollars .official_withdraw .pop, .arabic .transfer_dollars .agent_settlement .pop {
background: url(../images/pop-ar.png) no-repeat;
background-size: 100% 100%;
left: auto;
right: 3.52rem;
}

View File

@@ -0,0 +1,565 @@
@function px2rem($px, $rem: 37.5) {
@return $px / $rem +rem;
}
body,
html {
width: 100%;
background: #ffffff;
// overflow: hidden;
}
.nav {
width: 100%;
height: px2rem(88);
background: #ffffff;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 100;
.back {
width: px2rem(22);
height: px2rem(22);
position: absolute;
left: px2rem(15);
bottom: px2rem(11);
}
p {
height: px2rem(22);
line-height: px2rem(22);
font-size: px2rem(16);
font-weight: 500;
color: #313131;
position: absolute;
bottom: px2rem(10);
left: 50%;
transform: translateX(-50%);
}
}
.my_salary {
width: px2rem(342);
padding-bottom: px2rem(8);
border-bottom: 1px solid #e4e4e4;
margin: px2rem(114) auto 0;
display: flex;
justify-content: space-between;
p {
height: px2rem(25);
line-height: px2rem(25);
e,
b {
font-size: px2rem(18);
color: #313131;
}
b {
color: #04D5C6;
}
span {
font-size: px2rem(14);
color: #7b7b7d;
}
img {
width: px2rem(24);
height: px2rem(24);
display: inline-block;
}
}
}
.tab {
width: px2rem(344);
height: px2rem(32);
background: #f2f3f7;
border-radius: px2rem(8);
margin: px2rem(10) auto 0;
display: flex;
.item {
width: 50%;
height: 100%;
border-radius: px2rem(8);
font-size: px2rem(14);
color: #313131;
line-height: px2rem(32);
text-align: center;
}
.act {
background: #04D5C6;
color: #ffffff;
}
}
.transfer_method_tit,
.transfer_dollars_tit {
width: px2rem(345);
margin: 0 auto 0;
display: flex;
align-items: baseline;
.title {
font-weight: 600;
font-size: px2rem(18);
color: #313131;
line-height: px2rem(25);
padding: px2rem(12) 0;
&::before {
content: "";
display: inline-block;
width: px2rem(4);
height: px2rem(18);
border-radius: px2rem(14);
background: #04D5C6;
vertical-align: top;
margin: px2rem(4) px2rem(8);
}
}
p {
height: px2rem(18);
line-height: px2rem(18);
font-size: px2rem(10);
color: #ffffff;
padding: 0 px2rem(6);
background: #313131;
border-radius: px2rem(12);
margin: 0 px2rem(5);
}
}
.transfer_method,
.transfer_dollars {
width: px2rem(344);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
li {
width: px2rem(168);
height: px2rem(70);
background: #f2f3f7;
border-radius: px2rem(8);
box-sizing: border-box;
// margin-right: px2rem(6);
margin-bottom: px2rem(6);
position: relative;
border: px2rem(2) solid #fff;
&:nth-child(2n) {
margin-right: unset;
}
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
p {
font-weight: 500;
font-size: px2rem(16);
color: #313131;
text-align: center;
line-height: px2rem(22);
}
span {
font-weight: 400;
font-size: px2rem(14);
color: #313131;
.coin {
width: px2rem(14);
height: px2rem(14);
display: inline-block;
}
}
.dollar {
width: px2rem(16);
height: px2rem(16);
margin-top: px2rem(2);
display: inline-block;
}
.custom {
width: px2rem(12);
height: px2rem(12);
margin-top: px2rem(5);
display: inline-block;
}
.tips {
background: #04D5C6;
border-radius: 0px px2rem(6) 0px px2rem(8);
position: absolute;
top: 0;
right: 0;
font-size: px2rem(12);
color: #ffffff;
padding: px2rem(4);
img {
width: px2rem(11);
height: px2rem(11);
display: inline-block;
vertical-align: unset;
}
}
}
.li_act {
border: px2rem(2) solid #04D5C6;
}
.official_withdraw,
.agent_settlement {
position: relative;
// display: none;
.pop {
width: px2rem(180);
height: px2rem(42);
background: url(../images/pop.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: px2rem(-16);
left: px2rem(132);
font-size: px2rem(12);
line-height: px2rem(16);
color: #ffffff;
padding: px2rem(4) px2rem(8) 0;
}
}
}
.transfer_dollars {
margin-bottom: px2rem(80);
}
.confirm {
width: px2rem(344);
height: px2rem(40);
// background: linear-gradient(274deg, #feb301 0%, #ffda5f 100%);
background: #04D5C6;
border-radius: px2rem(25);
position: fixed;
bottom: px2rem(18);
left: 50%;
transform: translateX(-50%);
font-weight: 400;
font-size: px2rem(16);
color: #ffffff;
line-height: px2rem(40);
text-align: center;
}
.agent_pop,
.president_pop {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
display: none;
.agent_pop_in,
.president_pop_in {
width: px2rem(290);
// height: px2rem(495);
background: #ffffff;
border-radius: px2rem(16);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.title {
width: 100%;
font-weight: 500;
font-size: px2rem(16);
color: #313131;
text-align: center;
padding: px2rem(14) 0;
}
h2 {
font-size: px2rem(12);
color: #afb1b3;
line-height: px2rem(17);
text-align: center;
padding: 0 px2rem(8) px2rem(8);
}
.wrap {
width: px2rem(262);
max-height: px2rem(374);
margin: 0 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
display: none;
}
li {
box-sizing: border-box;
border: 2px solid #fff;
width: 100%;
height: px2rem(72);
background: #f4f4f4;
border-radius: px2rem(8);
margin-bottom: px2rem(10);
position: relative;
.avatar {
width: px2rem(55);
height: px2rem(55);
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: px2rem(9);
}
.name {
display: flex;
align-items: center;
position: absolute;
top: px2rem(15);
left: px2rem(76);
p {
max-width: 3rem;
// 单行溢出省略
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 600;
font-size: px2rem(16);
color: #333333;
line-height: px2rem(22);
}
.flag {
width: px2rem(17);
height: px2rem(12);
}
}
.id {
font-weight: 400;
font-size: px2rem(13);
color: #7b7b7d;
position: absolute;
bottom: px2rem(17);
left: px2rem(76);
}
}
.li_act {
box-sizing: border-box;
border: 2px solid #04D5C6;
}
li.no {
width: 100%;
// line-height: px2rem(374);
line-height: 1.92rem;
text-align: center;
font-weight: 400;
font-size: px2rem(10);
color: #7b7b7d;
}
}
.btn_wrap {
width: px2rem(262);
margin: px2rem(10) auto;
display: flex;
justify-content: space-evenly;
.cancel,
.sure {
width: px2rem(110);
height: px2rem(36);
background: #04D5C6;
border-radius: px2rem(117);
font-weight: 500;
color: #ffffff;
font-size: px2rem(14);
line-height: px2rem(36);
text-align: center;
}
.cancel {
background: #ebebeb;
color: #7b7b7d;
}
}
}
// .agent_pop_in{
// width: px2rem(580);
// height: px2rem(988);
// }
}
.custom_pop {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
display: none;
.custom_pop_in {
width: px2rem(344);
// height: px2rem(495);
background: #ffffff;
border-radius: px2rem(16);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.title {
width: 100%;
font-weight: 500;
font-size: px2rem(16);
color: #313131;
text-align: center;
padding: px2rem(14) 0 px2rem(5);
}
h1 {
font-size: px2rem(12);
color: #afb1b3;
line-height: px2rem(17);
text-align: center;
padding-bottom: px2rem(8);
}
h2 {
font-size: px2rem(12);
color: #7b7b7d;
line-height: px2rem(17);
padding-left: px2rem(80);
padding-top: px2rem(5);
box-sizing: border-box;
}
.ipt {
display: flex;
align-items: center;
justify-content: center;
position: relative;
span {
font-weight: 600;
font-size: px2rem(18);
color: #04D5C6;
margin-right: px2rem(10);
}
input {
width: px2rem(212);
height: px2rem(30);
border-radius: px2rem(8);
border: 1px solid #e4e4e4;
outline: none;
font-weight: 500;
font-size: px2rem(15);
color: #313131;
padding: 0 px2rem(5);
}
e {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 1.4rem;
font-weight: 400;
font-size: px2rem(14);
color: #24cf9e;
// text-decoration: underline;
}
}
.btn_wrap {
width: px2rem(262);
margin: px2rem(20) auto px2rem(10);
display: flex;
justify-content: space-evenly;
.cancel,
.sure {
width: px2rem(102);
height: px2rem(30);
// background: linear-gradient(274deg, #feb301 0%, #ffda5f 100%);
background: #04D5C6;
border-radius: px2rem(25);
font-weight: 500;
color: #ffffff;
font-size: px2rem(14);
line-height: px2rem(30);
text-align: center;
}
.cancel {
background: #ebebeb;
color: #7b7b7d;
}
}
}
}
.arabic {
.nav {
.back {
right: px2rem(15);
left: unset;
transform: rotate(180deg);
}
}
.transfer_method .official_withdraw .pop {
left: unset;
right: 3.52rem;
}
.my_salary p img {
transform: rotate(180deg);
}
.custom_pop .custom_pop_in {
.ipt e {
right: unset;
left: 1.4rem;
}
h2 {
padding-right: 1.4666666667rem;
padding-left: unset;
}
}
.transfer_method .official_withdraw .pop, .transfer_method .agent_settlement .pop, .transfer_dollars .official_withdraw .pop, .transfer_dollars .agent_settlement .pop{
background: url(../images/pop-ar.png) no-repeat;
background-size: 100% 100%;
left: auto;
right: 3.52rem;
}
}

View File

@@ -0,0 +1,276 @@
html,
body {
width: 100%;
height: 17.78667rem;
background: #eaeaec;
}
.back {
width: 100%;
height: 2.8rem;
position: fixed;
left: 0;
top: 0rem;
text-align: center;
color: #FFFFFF;
font-size: 0.50667rem;
font-weight: bold;
z-index: 10;
background: #fff;
}
.back .backs {
width: 0.58667rem;
height: 0.58667rem;
position: absolute;
left: 0.24rem;
top: 58%;
}
.back .fdj {
width: 0.42667rem;
height: 0.42667rem;
position: absolute;
top: 61%;
left: 1.41333rem;
z-index: 2;
}
.back input {
border: none;
outline: none;
background: #eaeaec;
width: 6.8rem;
height: 0.74667rem;
line-height: 0.74667rem;
border-radius: 0.74667rem;
box-sizing: border-box;
padding-left: 0.72rem;
position: absolute;
left: 1.22667rem;
top: 70%;
transform: translateY(-50%);
color: #333;
font-size: 0.32rem;
}
.back input::placeholder {
color: #BCBDCB;
font-size: 0.29333rem;
}
.back .text {
position: absolute;
right: 0.62667rem;
height: 100%;
top: 0;
line-height: 3.93333rem;
color: #333333;
font-size: 0.45333rem;
font-weight: bold;
}
ul {
width: 10rem;
height: 18rem;
margin: 2.53333rem auto 0;
overflow-y: scroll;
padding-top: 0.34667rem;
box-sizing: border-box;
}
ul::-webkit-scrollbar {
display: none;
}
ul li {
width: 9.06667rem;
height: 2.13333rem;
box-sizing: border-box;
overflow: hidden;
margin: 0 auto 0.44rem;
position: relative;
background: #fff;
border-radius: 0.13333rem;
}
ul li .tx {
width: 1.06667rem;
height: 1.06667rem;
border-radius: 1.06667rem;
float: left;
margin-right: 0.14667rem;
margin-left: 0.13333rem;
display: block;
margin-top: 0.44rem;
}
ul li .user {
float: left;
width: 6rem;
}
ul li .user p {
color: #515665;
font-size: 0.37333rem;
font-weight: bold;
display: inline-block;
margin-right: 0.10667rem;
margin-bottom: 0.16rem;
width: 2.7rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
box-sizing: border-box;
padding-top: 0.74667rem;
}
ul li .user b {
display: block;
color: #A4ABB2;
font-size: 0.32rem;
}
ul li .user .sex {
width: 0.24rem;
height: 0.24rem;
display: inline-block;
margin-top: 0.81333rem;
margin-right: 0.10667rem;
}
ul li .user .wealth,
ul li .user .charm {
display: inline-block;
width: 0.96rem;
height: 0.48rem;
margin-top: 0.64rem;
}
ul li .but {
width: 1.17333rem;
height: 0.56rem;
background: #7C9EFF;
border-radius: 0.56rem;
position: absolute;
right: 0.34667rem;
top: 1.18667rem;
text-align: center;
color: #fff;
line-height: 0.56rem;
font-size: 0.34667rem;
font-weight: 400;
}
ul li .chairman {
width: 1.04rem;
height: 0.34667rem;
line-height: 0.34667rem;
border-radius: 0.34667rem;
text-align: center;
color: #333;
font-size: 0.29333rem;
font-weight: 400;
position: absolute;
left: 0.16rem;
top: 0.94667rem;
background: linear-gradient(90deg, #FFEB67, #FFFCE7);
}
ul li .administrator {
width: 1.04rem;
height: 0.34667rem;
line-height: 0.34667rem;
border-radius: 0.34667rem;
text-align: center;
color: #333;
font-size: 0.29333rem;
font-weight: 400;
position: absolute;
left: 0.16rem;
top: 0.94667rem;
background: linear-gradient(-90deg, #FBE1FF, #F090FF);
}
ul .null {
width: 100%;
height: 100%;
position: relative;
}
ul .null img {
width: 1.96rem;
height: 2.01333rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
ul .null span {
width: 100%;
left: 0;
top: 55%;
transform: translateY(-50%);
color: #A9A9A9;
font-size: 0.4rem;
font-weight: 400;
position: absolute;
text-align: center;
}
.pub {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 11;
display: none;
}
.pub .pub_in {
background: #fff;
border-radius: 0.4rem;
box-sizing: border-box;
padding: 0.66667rem 0.45333rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.pub .pub_in p {
text-align: center;
color: #333333;
font-size: 0.45333rem;
font-weight: bold;
}
.pub .pub_in .butBox {
width: 6.85333rem;
display: flex;
justify-content: space-between;
margin: 0.66667rem auto 0;
}
.pub .pub_in .butBox div {
width: 3.2rem;
height: 1.01333rem;
text-align: center;
line-height: 1.01333rem;
border-radius: 1.01333rem;
font-size: 0.45333rem;
font-weight: bold;
}
.pub .pub_in .butBox .close {
background: #F5F5F5;
color: #999999;
}
.pub .pub_in .butBox .ok {
background: linear-gradient(90deg, #53C7D4, #7C5EFD);
color: #fff;
}

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