no message

user/index.php

@@ -0,0 +1,69 @@
+<?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>