69 lines
2.4 KiB
PHP
69 lines
2.4 KiB
PHP
<?php
|
|
include './head.php';
|
|
?>
|
|
</div>
|
|
|
|
<div class="iframe-container">
|
|
<iframe fk-main="my" src="./my.fx"></iframe>
|
|
<iframe fk-main="trade" src="./trade.fx"></iframe>
|
|
<iframe fk-main="ticket" src="./ticket.fx"></iframe>
|
|
</div>
|
|
<div style="border-top-left-radius: 15px;
|
|
border-top-right-radius: 15px;
|
|
background-color: rgba(33, 150, 243, 0.08);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);" class="mdui-bottom-nav mdui-bottom-nav-text-auto">
|
|
<a fk-main-open="my" class="mdui-bottom-nav-active">
|
|
<i class="mdui-icon material-icons">accessibility</i>
|
|
<label>主页</label>
|
|
</a>
|
|
<a fk-main-open="trade">
|
|
<i class="mdui-icon material-icons">dashboard</i>
|
|
<label>商品</label>
|
|
</a>
|
|
<a fk-main-open="ticket">
|
|
<i class="mdui-icon material-icons">chat</i>
|
|
<label>工单</label>
|
|
</a>
|
|
</div>
|
|
<script>
|
|
const navItems = document.querySelectorAll('.mdui-bottom-nav a');
|
|
const iframeContainer = document.querySelector('.iframe-container');
|
|
const iframes = document.querySelectorAll('iframe'); // 获取所有 iframe
|
|
const iframeCount = iframes.length; // 计算 iframe 的数量
|
|
|
|
navItems.forEach(item => {
|
|
item.addEventListener('click', function() {
|
|
// 移除所有导航项的活动状态
|
|
navItems.forEach(nav => nav.classList.remove('mdui-bottom-nav-active'));
|
|
// 给当前点击的导航项添加活动状态
|
|
this.classList.add('mdui-bottom-nav-active');
|
|
|
|
// 获取 fk-main-open 属性的值，用于查找相应的 iframe
|
|
const pageId = this.getAttribute('fk-main-open');
|
|
const iframeIndex = Array.from(iframes).findIndex(iframe => iframe.getAttribute('fk-main') === pageId);
|
|
|
|
// 检查 iframeIndex 是否有效
|
|
if (iframeIndex >= 0 && iframeIndex < iframeCount) {
|
|
// 计算准确的 translateX 值，确保滑动至正确位置
|
|
iframeContainer.style.transform = `translateX(-${(iframeIndex * 100) / iframeCount}%)`;
|
|
}
|
|
});
|
|
});</script>
|
|
|
|
<script>
|
|
// 获取所有 class 为 iframe-container 的元素
|
|
const containers = document.querySelectorAll('.iframe-container');
|
|
|
|
// 遍历每个 iframe-container
|
|
containers.forEach(container => {
|
|
// 获取当前 container 中的 iframe 数量
|
|
const iframeCount = container.querySelectorAll('iframe').length;
|
|
|
|
// 计算容器的宽度，每个 iframe 增加 100%
|
|
const newWidth = iframeCount * 100 + '%';
|
|
|
|
// 设置 iframe-container 的宽度，动画通过 CSS 控制
|
|
container.style.width = newWidth;
|
|
});
|
|
</script>
|