侧边栏圆角动画

app/index/view/mobile/product/classify.html

@@ -62,7 +62,7 @@
                 {if condition="!empty($child.products)"}
                 <div class="scroll-box">
                     {volist name="$child.products" id="pro"}
-                    <a class="card" href="{:url('product/detail', ['id' => $pro.id])}">
+                    <a class="card" href="{:url('product/detail', ['id' => $pro.id])}" style="background: #fafafa;">
                         <div class="card-img">
                             <img src="{$pro.cover_image}" alt="">
                         </div>
@@ -116,5 +116,55 @@
     back.addEventListener('click',()=>{
         window.location.href = document.referrer;
     })
+// 更新侧边栏相邻元素的圆角
+function updateSidebarAdjacentRadius() {
+    const sidebarItems = document.querySelectorAll('.sidebar li');
+    
+    // 先移除所有相邻类名
+    sidebarItems.forEach(item => {
+        item.classList.remove('active-prev', 'active-next');
+    });
+    
+    // 找到当前激活的项
+    let activeIndex = -1;
+    sidebarItems.forEach((item, index) => {
+        if (item.classList.contains('active')) {
+            activeIndex = index;
+        }
+    });
+    
+    // 添加上一个和下一个的类名（使用requestAnimationFrame确保DOM更新）
+    requestAnimationFrame(() => {
+        if (activeIndex > 0) {
+            sidebarItems[activeIndex - 1].classList.add('active-prev');
+        }
+        if (activeIndex < sidebarItems.length - 1) {
+            sidebarItems[activeIndex + 1].classList.add('active-next');
+        }
+    });
+}
+
+// 绑定点击事件
+document.querySelectorAll('.sidebar li').forEach(item => {
+    item.addEventListener('click', function() {
+        // 移除所有active
+        document.querySelectorAll('.sidebar li').forEach(li => {
+            li.classList.remove('active');
+        });
+        // 添加active
+        this.classList.add('active');
+        // 更新相邻圆角
+        updateSidebarAdjacentRadius();
+        
+        // 您的tab切换逻辑
+        // const tabId = this.getAttribute('data-tab');
+        // 切换内容...
+    });
+});
+
+// 页面初始化时调用
+if (document.querySelector('.sidebar li.active')) {
+    updateSidebarAdjacentRadius();
+}
 </script>
-{/block}
+{/block}