侧边栏圆角动画

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}

public/static/index/mobile/css/category.css

@@ -13,7 +13,8 @@
     font-size: inherit !important;
     /* font-size:100% !important; */
     height: 100vh;
-        overflow: hidden
+    overflow: hidden;
+    max-width: 100vw !important;
 
 }
 
@@ -38,14 +39,17 @@
 }
 
 .back {
-        width: 14px;
-        height: 14px;
+    width: 0.28rem;
+    height:  0.28rem;
     color: #333;
     cursor: pointer;
     display: flex;
     align-items: center;
 }
-
+.back img {
+    width: 0.28rem;
+    height:  0.28rem;
+}
 .title {
     font-size: 0.32rem !important;
     font-weight: 500;
@@ -58,10 +62,10 @@
     margin-top:0.018rem;
 }
 
-    /* 左侧菜单 */
+/* 左侧菜单  #FAFAFA;*/
 .sidebar {
     width: 114px;
-        background: #FAFAFA;
+    background: #fff;
     overflow-y: auto;
     box-sizing: border-box;
 }
@@ -71,17 +75,27 @@
     padding: 24px 16px;
     text-align: center;
     font-size: 0.28rem !important;
-        color: #686A70;
+    color:#686A70;   /* #686A70;*/
     cursor: pointer;
+    background:#FAFAFA;
+    /* 分别控制上下圆角的过渡 */
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    transition: border-radius 1s cubic-bezier(0.4, 0, 0.2, 1);
 }
-
 .sidebar li.active {
     color: #004BFA;
     background: #fff;
-        border-top-right-radius: 0.17rem;
-        border-bottom-right-radius:0.17rem ;
 }
 
+
+.sidebar li.active-prev {
+    border-bottom-right-radius: 0.17rem !important;
+}
+
+.sidebar li.active-next {
+    border-top-right-radius: 0.17rem !important;
+}
 /* 右侧内容 */
 .right-content {
     flex: 1;
@@ -110,8 +124,8 @@
 }
 
 .sec-arrow {
-        width: 20px;
-        height: 20px;
+    width: 0.28rem;
+    height: 0.28rem;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -119,7 +133,10 @@
     font-size: 20px;
     cursor: pointer;
 }
-
+.sec-arrow img {
+    width: 0.28rem;
+    height: 0.28rem;
+}
 /* 横向滚动容器 */
 .scroll-box {
     display: flex;
@@ -145,7 +162,15 @@
     align-items: center;
     padding-top: 8px;
 }
+.card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 12px;
+    padding-left: 19px;
+    padding-right: 19px;
    
+}
 .card-img {
     width: 1.52rem;
     background: #f1f1f1;
@@ -153,15 +178,19 @@
     align-items: center;
     justify-content: center;
     color: #999;
+    margin-top: 8px;
 }
 
 .card-img img {
     width: 100%;
+
 }
 
 .card-info {
-        padding: 8px;
-        text-align: center
+   
+    text-align: center;
+    padding-top: 8px;
+    padding-bottom: 10px;
 }
 
 .card-name {
@@ -192,4 +221,3 @@
     display: block;
 
 }
-