活动页增加下拉菜单
This commit is contained in:
cebgcontract
parent
48fffac1c9
commit
1d5d2bcb3f
@ -3,12 +3,33 @@
|
||||
<img src="./img/home/logo@2x.png" />
|
||||
</a>
|
||||
<nav class="nav">
|
||||
<a href="./index.html" id="nav_index">Home</a>
|
||||
<a href="./gameplay.html" id="nav_gameplay">GamePlay</a>
|
||||
<a href="./nft.html" id="nav_nft">NFT</a>
|
||||
<a href="./tokenomic.html" id="nav_tokenomic">Tokenomic</a>
|
||||
<a href="./team.html" id="nav_team">Team</a>
|
||||
<a href="./roadmap.html" id="nav_roadmap">Roadmap</a>
|
||||
<ul class="main">
|
||||
<li><a href="./index.html" id="nav_index">Home</a></li>
|
||||
<li><a href="./gameplay.html" id="nav_gameplay">GamePlay</a></li>
|
||||
<li><a href="./nft.html" id="nav_nft">NFT</a></li>
|
||||
<li><a href="./tokenomic.html" id="nav_tokenomic">Tokenomic</a></li>
|
||||
<li><a href="./team.html" id="nav_team">Team</a></li>
|
||||
<li><a href="./roadmap.html" id="nav_roadmap">Roadmap</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="javascript:void(0)" id="nav_activity" class="dropdown-toggle">
|
||||
Activity
|
||||
<span>
|
||||
<svg t="1666610389853" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1853" width="16" height="16"><path d="M859.8528 292.9664H164.1472c-40.1408 0-60.3136 48.5376-31.8464 77.0048L480.1536 717.824c17.6128 17.6128 46.1824 17.6128 63.7952 0l347.8528-347.8528c28.3648-28.4672 8.2944-77.0048-31.9488-77.0048z" p-id="1854" fill="#ffffff"></path></svg>
|
||||
</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a href="./recruit.html" id="sub_act">Activity1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./recruit.html" id="sub_act1">Activity1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./recruit.html" id="sub_ac2">Activity1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<a href="https://mall.cebg.games/index.html" class="market fr">
|
||||
<img src="img/home/marketplace@2x.png" />
|
||||
|
||||
@ -17,31 +17,31 @@
|
||||
<div class="amb-detail">
|
||||
<div class="amb-de-l">
|
||||
<div class="amb-de-l-img">
|
||||
<img src="img/applyother/am12.jpg" width="284" height="278" />
|
||||
<img id="info_portrait" src="img/applyother/am12.jpg" width="284" height="278" />
|
||||
</div>
|
||||
<div class="amb-i-3">
|
||||
<p class="amb-i-txt">0x123456........445855</p>
|
||||
<p class="amb-i-txt" id="info_account">0x123456........445855</p>
|
||||
</div>
|
||||
<div class="amb-i-4">
|
||||
<p class="amb-i-txt">Kawabonga123@gmail.com</p>
|
||||
<p class="amb-i-txt" id="info_email">Kawabonga123@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="amb-de-r">
|
||||
<div class="amb-i-5"><img src="img/applyother/am5.png" /></div>
|
||||
<div class="amb-i-wrap">
|
||||
<div class="amb-i-6">
|
||||
<p class="amb-i-txt">Kawabonga</p>
|
||||
<p class="amb-i-txt" id="info_name">Kawabonga</p>
|
||||
</div>
|
||||
<div class="amb-i-7">
|
||||
<p class="amb-i-txt">Japan</p>
|
||||
<p class="amb-i-txt" id="info_loc">Japan</p>
|
||||
</div>
|
||||
<div class="amb-i-8">
|
||||
<p class="amb-i-txt">9，999，999</p>
|
||||
<p class="amb-i-txt" id="info_commander">9，999，999</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="amb-i-9"><img src="img/applyother/am9.png" /></div>
|
||||
<div class="amb-i-10">
|
||||
<div class="amb-i-10-scroll">
|
||||
<div class="amb-i-10-scroll" id="info_intro">
|
||||
He didn't write anything
|
||||
</div>
|
||||
</div>
|
||||
@ -58,9 +58,27 @@
|
||||
<%- include('../comp/walletModal.html') %> <%- include('../comp/jslib.html')
|
||||
%>
|
||||
<script>
|
||||
const DETAIL_URL = 'http://192.168.100.82:3000/invitation/get_amb'
|
||||
$(function() {
|
||||
function getUrlParam(name) {
|
||||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
||||
var r = window.location.search.substr(1).match(reg);
|
||||
if (r != null) return unescape(r[2]); return null;
|
||||
}
|
||||
function formatAddress(address) {
|
||||
if (address.length >= 10) {
|
||||
return address.substring(0, 6) + '......' + address.substring(address.length - 4)
|
||||
} else if (address.length > 0 && address.length < 10) {
|
||||
return address
|
||||
} else {
|
||||
return '-'
|
||||
}
|
||||
}
|
||||
|
||||
$("#copyBtn").click(function() {
|
||||
var _text = $(this).prev("span").text();
|
||||
var host = location.origin;
|
||||
var path = location.pathname.replace('ambassadorinfo', 'join');
|
||||
var _text = `${host}${path}?amb=${account}`;
|
||||
const input = document.createElement('input');
|
||||
document.body.appendChild(input);
|
||||
input.value = _text;
|
||||
@ -70,8 +88,53 @@
|
||||
alert('复制成功')
|
||||
}
|
||||
document.body.removeChild(input);
|
||||
|
||||
})
|
||||
let account = getUrlParam('amb');
|
||||
if (!account) {
|
||||
return
|
||||
}
|
||||
function showInfo(data) {
|
||||
$('#info_name').html(data.name || "-");
|
||||
$('#info_loc').html(data.comefrom || "-");
|
||||
$('#info_commander').html(data.commander || "-");
|
||||
$('#info_email').html(data.email || "-");
|
||||
$('#info_account').html(formatAddress(data.account));
|
||||
if (data.aboutme) {
|
||||
$('#info_intro').html(data.aboutme);
|
||||
}
|
||||
if (data.headpic) {
|
||||
$('#info_portrait').attr('src', data.headpic);
|
||||
}
|
||||
}
|
||||
var fetchDatas = async () => {
|
||||
var headers = new Headers();
|
||||
headers.append("Content-Type", "application/json");
|
||||
try {
|
||||
let data = await fetch(
|
||||
DETAIL_URL,
|
||||
{
|
||||
method: 'POST',
|
||||
headers,
|
||||
mode: 'cors',
|
||||
cache: 'no-cache',
|
||||
body: JSON.stringify({
|
||||
account
|
||||
})
|
||||
},
|
||||
|
||||
)
|
||||
.then(res => {
|
||||
return res.json()
|
||||
})
|
||||
if (!data.errcode) {
|
||||
console.log(data.data)
|
||||
showInfo(data.data);
|
||||
}
|
||||
} catch (err) {
|
||||
console.log('error get data', err);
|
||||
}
|
||||
}
|
||||
fetchDatas();
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@ -15,87 +15,18 @@
|
||||
</section>
|
||||
<section class="main-con amb-con">
|
||||
<div class="amb-scroll" id="ambScroll">
|
||||
<div class="amb-inner">
|
||||
<div class="amb-item">
|
||||
<a href="ambassadorinfo.html"><img src="img/applyother/am2.jpg" width="251" height="246"/></a>
|
||||
<div class="amb-item hide" id="sample">
|
||||
<a href="ambassadorinfo.html" class="info_href">
|
||||
<img class="portrait" src="img/applyother/am2.jpg" width="251" height="246"/>
|
||||
</a>
|
||||
<p>
|
||||
<span>Kawabonga</span>
|
||||
<span>Japan</span>
|
||||
<span>1023</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="amb-item">
|
||||
<a href="ambassadorinfo.html"><img src="img/applyother/am2.jpg" width="251" height="246"/></a>
|
||||
<p>
|
||||
<span>Kawabonga</span>
|
||||
<span>Japan</span>
|
||||
<span>1023</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="amb-item">
|
||||
<a href="ambassadorinfo.html"><img src="img/applyother/am2.jpg" width="251" height="246"/></a>
|
||||
<p>
|
||||
<span>Kawabonga</span>
|
||||
<span>Japan</span>
|
||||
<span>1023</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="amb-item">
|
||||
<a href="ambassadorinfo.html"><img src="img/applyother/am2.jpg" width="251" height="246"/></a>
|
||||
<p>
|
||||
<span>Kawabonga</span>
|
||||
<span>Japan</span>
|
||||
<span>1023</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="amb-item">
|
||||
<a href="ambassadorinfo.html"><img src="img/applyother/am2.jpg" width="251" height="246"/></a>
|
||||
<p>
|
||||
<span>Kawabonga</span>
|
||||
<span>Japan</span>
|
||||
<span>1023</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="amb-item">
|
||||
<a href="ambassadorinfo.html"><img src="img/applyother/am2.jpg" width="251" height="246"/></a>
|
||||
<p>
|
||||
<span>Kawabonga</span>
|
||||
<span>Japan</span>
|
||||
<span>1023</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="amb-item">
|
||||
<a href="ambassadorinfo.html"><img src="img/applyother/am2.jpg" width="251" height="246"/></a>
|
||||
<p>
|
||||
<span>Kawabonga</span>
|
||||
<span>Japan</span>
|
||||
<span>1023</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="amb-item">
|
||||
<a href="ambassadorinfo.html"><img src="img/applyother/am2.jpg" width="251" height="246"/></a>
|
||||
<p>
|
||||
<span>Kawabonga</span>
|
||||
<span>Japan</span>
|
||||
<span>1023</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="amb-item">
|
||||
<a href="ambassadorinfo.html"><img src="img/applyother/am2.jpg" width="251" height="246"/></a>
|
||||
<p>
|
||||
<span>Kawabonga</span>
|
||||
<span>Japan</span>
|
||||
<span>1023</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="amb-item">
|
||||
<a href="ambassadorinfo.html"><img src="img/applyother/am2.jpg" width="251" height="246"/></a>
|
||||
<p>
|
||||
<span>Kawabonga</span>
|
||||
<span>Japan</span>
|
||||
<span>1023</span>
|
||||
<span class="name">Kawabonga</span>
|
||||
<span class="loc">Japan</span>
|
||||
<span class="commander">1023</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="amb-inner" id="amb_container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -103,14 +34,40 @@
|
||||
</section>
|
||||
<%- include('../comp/walletModal.html') %> <%- include('../comp/jslib.html')
|
||||
%>
|
||||
<script src="https://cdn.jsdelivr.net/npm/iscroll-custom@5.2.6/dist/iscroll-min.js" integrity="sha256-WL7uPHKr6GnT6ZIaiZYt+5/sq9LCrG8nZYMrSclPuxM=" crossorigin="anonymous"></script>
|
||||
<script>
|
||||
|
||||
const LIST_URL = 'http://192.168.100.82:3000/invitation/list_amb'
|
||||
$(function () {
|
||||
new IScroll("#ambScroll", {
|
||||
mouseWheel: true,
|
||||
scrollbars: true,
|
||||
});
|
||||
var showOne = (data) => {
|
||||
let dom = $('#sample').clone();
|
||||
if (data.headpic) {
|
||||
$('.portrait', dom).attr('src', data.headpic);
|
||||
}
|
||||
$('.info_href', dom).attr('href', `ambassadorinfo.html?amb=${data.account}`)
|
||||
$('.name', dom).replaceWith(`<span>${data.name || '-'}</span>`)
|
||||
$('.loc', dom).replaceWith(`<span>${data.comefrom || '-'}</span>`)
|
||||
$('.commander', dom).replaceWith(`<span>${data.commander || '-'}</span>`)
|
||||
dom.show().appendTo('#amb_container')
|
||||
}
|
||||
var retry = 0;
|
||||
var fetchDatas = async () => {
|
||||
try {
|
||||
let data = await fetch(
|
||||
LIST_URL,
|
||||
{ method: 'POST', mode: 'cors', cache: 'no-cache'}
|
||||
)
|
||||
.then(res => {
|
||||
return res.json()
|
||||
})
|
||||
if (!data.errcode) {
|
||||
for (let d of data.list) {
|
||||
showOne(d);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.log('error get data');
|
||||
}
|
||||
}
|
||||
fetchDatas();
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@ -77,6 +77,38 @@ body {
|
||||
.nav a:hover::after {
|
||||
height: 118px;
|
||||
}
|
||||
.nav .main{
|
||||
flex-wrap: nowrap;
|
||||
display: flex;
|
||||
}
|
||||
.dropdown{
|
||||
position: relative;
|
||||
}
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
float: left;
|
||||
padding: 5px 0;
|
||||
margin: 2px 0 0;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
background-color: #0000005d;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0,0,0,.15);
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
|
||||
box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
|
||||
flex-wrap: wrap!important;
|
||||
}
|
||||
.open .dropdown-menu {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
.market {
|
||||
margin-top: 44px;
|
||||
@ -1127,7 +1159,7 @@ span.swiper-pagination-bullet {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.apply-from input[type='submit'] {
|
||||
.apply-from .submit{
|
||||
background: #fed235;
|
||||
color: #000;
|
||||
width: 274px;
|
||||
@ -1140,6 +1172,7 @@ span.swiper-pagination-bullet {
|
||||
border-radius: 37px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
padding: 25px 50px;
|
||||
}
|
||||
|
||||
.apply-from label.error {
|
||||
@ -1167,7 +1200,6 @@ span.swiper-pagination-bullet {
|
||||
}
|
||||
.amb-scroll{
|
||||
position: relative;
|
||||
height: 800px;
|
||||
overflow: hidden;
|
||||
width: 1290px;
|
||||
margin: 0 auto;
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
</p>
|
||||
|
||||
<p class="tac submit-btn">
|
||||
<input class="submit" type="submit" value="Send">
|
||||
<span class="submit" id="submit_btn">Send</span>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
@ -64,8 +64,14 @@
|
||||
%>
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js" integrity="sha256-JwUksNJ6/R07ZiLRoXbGeNrtlFZMFDKX4hemPiHOmCA=" crossorigin="anonymous"></script>
|
||||
<script>
|
||||
const FORM_URL = 'http://192.168.100.82:3000/invitation/add_commander';
|
||||
$().ready(function() {
|
||||
// 在键盘按下并释放及提交后验证提交表单
|
||||
function getUrlParam(name) {
|
||||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
||||
var r = window.location.search.substr(1).match(reg);
|
||||
if (r != null) return unescape(r[2]); return null;
|
||||
}
|
||||
let ambassador = getUrlParam('amb') || '';
|
||||
$("#signupForm").validate({
|
||||
success:"valid",
|
||||
rules: {
|
||||
@ -80,15 +86,101 @@
|
||||
location: "This field cannot be empty. Please enter your country of residence."
|
||||
},
|
||||
submitHandler: function(form) {
|
||||
// form.submit();
|
||||
showSuccess();
|
||||
postData(generateFormData());
|
||||
}
|
||||
});
|
||||
$('#submit_btn').click(function() {
|
||||
if (window.chain.logined) {
|
||||
$('#signupForm').submit();
|
||||
} else {
|
||||
window.chainLogin(async function(){
|
||||
let result = await checkJoined(window.chain.account);
|
||||
if (result) {
|
||||
showSuccess();
|
||||
} else {
|
||||
$('#signupForm').submit();
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
var generateFormData = () => {
|
||||
return {
|
||||
account: window.chain.account,
|
||||
ambassador,
|
||||
email: $('#email').val(),
|
||||
name: $('#nickname').val(),
|
||||
from: $('#location').val(),
|
||||
bcexp: $('#ever').prop('checked')? 1: 0,
|
||||
followcebg: $('#alr').prop('checked')? 1: 0,
|
||||
joinedcebg: $('#dis').prop('checked')? 1: 0
|
||||
}
|
||||
}
|
||||
var postData = async (formData) => {
|
||||
var headers = new Headers();
|
||||
headers.append("Content-Type", "application/json");
|
||||
try {
|
||||
let data = await fetch(
|
||||
FORM_URL,
|
||||
{
|
||||
method: 'POST',
|
||||
headers,
|
||||
mode: 'cors',
|
||||
cache: 'no-cache',
|
||||
body: JSON.stringify(formData)
|
||||
},
|
||||
)
|
||||
.then(res => {
|
||||
return res.json()
|
||||
})
|
||||
if (!data.errcode) {
|
||||
showSuccess();
|
||||
}
|
||||
} catch (err) {
|
||||
console.log('error post data', err);
|
||||
}
|
||||
}
|
||||
var checkJoined = async function(account) {
|
||||
var headers = new Headers();
|
||||
headers.append("Content-Type", "application/json");
|
||||
try {
|
||||
let data = await fetch(
|
||||
FORM_URL,
|
||||
{
|
||||
method: 'POST',
|
||||
headers,
|
||||
mode: 'cors',
|
||||
cache: 'no-cache',
|
||||
body: JSON.stringify({account})
|
||||
},
|
||||
)
|
||||
.then(res => {
|
||||
return res.json()
|
||||
})
|
||||
if (!data.errcode) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
} catch (err) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
function showSuccess(){
|
||||
$('#success_tip').show()
|
||||
$('#form_layer').hide()
|
||||
}
|
||||
// showSuccess();
|
||||
async function checkStatus() {
|
||||
if (window.chain && window.chain.logined) {
|
||||
let result = await checkJoined(window.chain.account);
|
||||
if (result) {
|
||||
showSuccess();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
@ -10,6 +10,7 @@ var jcchain = require("./jcchain.js");
|
||||
})(jQuery);
|
||||
|
||||
var chain = new jcchain.JCChain();
|
||||
window.chain = chain;
|
||||
var toggleLoginBtn = function () {
|
||||
if (chain.logined) {
|
||||
$("#header_loginbtn").hide();
|
||||
@ -23,15 +24,23 @@ toggleLoginBtn();
|
||||
var logSuccess = function () {
|
||||
console.log("login success");
|
||||
console.log(chain);
|
||||
window.logincb && window.logincb();
|
||||
window.logincb = undefined;
|
||||
toggleLoginBtn();
|
||||
window.onChainLogined && window.onChainLogined();
|
||||
};
|
||||
window.chainLogin = function (cb) {
|
||||
window.logincb = cb;
|
||||
chain.login().then(logSuccess.bind(window));
|
||||
};
|
||||
$("#header_loginbtn").click(function () {
|
||||
chain.login().then(logSuccess.bind(this));
|
||||
window.chainLogin();
|
||||
});
|
||||
|
||||
$("#header_logoutbtn").click(function () {
|
||||
chain.logout().then(() => {
|
||||
toggleLoginBtn();
|
||||
window.onChainLoginOut && window.onChainLoginOut();
|
||||
});
|
||||
});
|
||||
jcchain.EventBus.$on(jcchain.SHOW_CHAIN_MODAL, function () {
|
||||
@ -39,13 +48,26 @@ jcchain.EventBus.$on(jcchain.SHOW_CHAIN_MODAL, function () {
|
||||
$("#wallet_modal").show();
|
||||
});
|
||||
$("#metamask_card").click(function () {
|
||||
chain.selectWalletAndLogin(1).then(logSuccess.bind(this));
|
||||
chain.selectWalletAndLogin(1).then(logSuccess.bind(window));
|
||||
$("#wallet_modal").hide();
|
||||
});
|
||||
$("#wc_card").click(function () {
|
||||
chain.selectWalletAndLogin(2).then(logSuccess.bind(this));
|
||||
chain.selectWalletAndLogin(2).then(logSuccess.bind(window));
|
||||
$("#wallet_modal").hide();
|
||||
});
|
||||
$(window).click(function () {
|
||||
if ($(".dropdown").hasClass("open")) {
|
||||
$(".dropdown").removeClass("open");
|
||||
}
|
||||
});
|
||||
$(".dropdown-toggle").click(function (event) {
|
||||
event.stopPropagation();
|
||||
if (!$(this).parent().hasClass("open")) {
|
||||
$(this).parent().addClass("open");
|
||||
} else {
|
||||
$(this).parent().removeClass("open");
|
||||
}
|
||||
});
|
||||
|
||||
$(".comingSoon").click(function () {
|
||||
$.message({ type: "default", content: "Coming Soon." });
|
||||
@ -53,3 +75,6 @@ $(".comingSoon").click(function () {
|
||||
if (window.cur) {
|
||||
$(`#nav_${cur}`).addClass("cur");
|
||||
}
|
||||
if (window.sub) {
|
||||
$(`#sub_${sub}`).addClass("cur");
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
<section class="main">
|
||||
<section class="header">
|
||||
<img src="img/applyother/a3.png" width="100%" />
|
||||
<script>cur = 'activity'; sub='act1'</script>
|
||||
<%- include('../comp/desktopNav.html') %>
|
||||
</section>
|
||||
<section class="main-con">
|
||||
@ -18,7 +19,7 @@
|
||||
<img src="img/applyother/a4.png" />
|
||||
</div>
|
||||
<div class="rec-2 tac">
|
||||
<a href="commander_form.html"><img src="img/applyother/a5.png" /></a>
|
||||
<a href="join.html"><img src="img/applyother/a5.png" /></a>
|
||||
</div>
|
||||
<div class="rec-3 tac">
|
||||
<div class="gallery-top-wrap">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user