添加箭头

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

@@ -1,19 +1,46 @@
 {extend name="public/base" /}
 
 {block name="style"}
+
+
+<script type="text/javascript">
+  (function (doc, win) {
+        var docEl = doc.documentElement;
+        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
+
+        function setRootFontSize() {
+            var clientWidth = docEl.clientWidth;
+            if (!clientWidth) return;
+            var fontSize = clientWidth / 8.04; // 750px/7.5=100px，375px/7.5=50px
+            console.log(fontSize,'======fontSize=====')
+            // 直接修改内联样式，优先级最高
+            docEl.setAttribute('style', 'font-size: ' + fontSize + 'px !important;');
+        }
+
+        setRootFontSize();
+        win.addEventListener(resizeEvt, setRootFontSize);
+        doc.addEventListener('DOMContentLoaded', setRootFontSize);
+    })(document, window);
+</script>
+
+
 <style>
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
-        font-family: sans-serif
+        font-family: sans-serif;
+        font-size: inherit !important;
+        /* font-size:100% !important; */
     }
 
     body {
         background: #f5f5f5;
-
+        font-size: inherit !important;
+        /* font-size:100% !important; */
         height: 100vh;
         overflow: hidden
+
     }
 
     .top-box {
@@ -21,6 +48,7 @@
         box-sizing: border-box;
         padding: 20px 22px;
         background: #fff;
+        margin-top: 46px;
     }
 
     .top-bar {
@@ -43,7 +71,7 @@
     }
 
     .title {
-        font-size: 0.32rem;
+        font-size: 0.32rem !important;
         font-weight: 500;
     }
 
@@ -63,9 +91,9 @@
 
     .sidebar li {
         list-style: none;
-        padding: 24px 0;
+        padding: 24px 16px;
         text-align: center;
-        font-size: 0.28rem;
+        font-size: 0.28rem !important;
         color: #686A70;
         cursor: pointer;
     }
@@ -76,11 +104,12 @@
     }
 
     /* 右侧内容 */
-    .content {
+    .right-content {
         flex: 1;
         overflow-y: auto;
         padding-left: 12px;
         background: #fff;
+        margin-bottom: 80px;
 
     }
 
@@ -96,7 +125,7 @@
     }
 
     .sec-title {
-        font-size: 0.28rem;
+        font-size: 0.28rem !important;
         color: #686A70;
         font-weight: 500
     }
@@ -126,7 +155,7 @@
         display: none
     }
 
-    .card {
+    .right-card {
         flex-shrink: 0;
         background: #FAFAFA;
         border-radius: 8px;
@@ -144,7 +173,6 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 12px;
         color: #999;
     }
 
@@ -158,7 +186,7 @@
     }
 
     .card-name {
-        font-size: 0.2rem;
+        font-size: 0.2rem !important;
         width: 1.52rem;
         height: auto;
         color: #1D1D1F;
@@ -170,7 +198,7 @@
     }
 
     .card-model {
-        font-size: 0.16rem;
+        font-size: 0.16rem !important;
         color: #686A70;
         margin-top: 4px
     }
@@ -185,80 +213,9 @@
         display: block;
 
     }
+
 </style>
-<style>
-    /* 全屏侧边菜单 */
-    .full-menu {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: rgba(0, 0, 0, .4);
-        z-index: 9999;
-        display: none;
-    }
 
-    .full-menu.show {
-        display: block;
-    }
-
-    .menu-wrap {
-        width: 80%;
-        height: 100%;
-        background: #fff;
-        position: relative;
-        padding: 20px;
-        overflow-y: auto;
-    }
-
-    .menu-close {
-        position: absolute;
-        right: 16px;
-        top: 16px;
-        font-size: 20px;
-        cursor: pointer;
-    }
-
-    .menu-logo {
-        margin: 30px 0 40px;
-    }
-
-    .menu-logo img {
-        height: 24px;
-    }
-
-    .menu-item {
-        padding: 14px 0;
-        border-bottom: 1px solid #eee;
-        font-size: 15px;
-        cursor: pointer;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-
-    .menu-item::after {
-        content: '>';
-        font-size: 12px;
-        color: #999;
-    }
-
-    .sub-menu {
-        padding-left: 16px;
-        display: none;
-    }
-
-    .sub-menu.show {
-        display: block;
-    }
-
-    .sub-item {
-        padding: 10px 0;
-        font-size: 14px;
-        color: #666;
-    }
-</style>
 {/block}
 
 {block name="main"}
@@ -276,12 +233,12 @@
     {if condition="!empty($categorys)"}
     <ul class="sidebar">
         {volist name="categorys" id="category"}
-        <li class="nav-item" data-tab="tab{$category.id}">{$category.name}</li>
+        <li class="nav-item {eq name='$key' value='0'}active{/eq}" data-tab="tab{$category.id}">{$category.name}</li>
         {/volist}
     </ul>
 
     <!-- 右侧分区内容 -->
-    <div class="content">
+    <div class="right-content">
         {volist name="categorys" id="category"}
         <div class="tab-pane {eq name='$key' value='0'}active{/eq}" id="tab{$category.id}">
             {if condition="!empty($category.children)"}
@@ -319,37 +276,7 @@
 {/block}
 
 {block name="script"}
-<script type="text/javascript">
-    (function (doc, win)
-    {
-        var docEl = doc.documentElement;
-        var resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';
-        var designWidth = 804; // 设计稿宽度
-        var designRemPx = 100; // 设计稿下 1rem 对应 px
 
-        function setRootFontSize ()
-        {
-            var clientWidth = docEl.clientWidth;
-            if (!clientWidth) return;
-
-            // 计算基础字号
-            var fontSize = (clientWidth / designWidth) * designRemPx;
-
-            // 限制范围（可选）
-            fontSize = Math.max(fontSize, 28); // 最小 28px
-            fontSize = Math.min(fontSize, 80); // 最大 80px
-
-            docEl.style.fontSize = fontSize + 'px';
-
-            // 设置 body 基准，避免继承问题
-            doc.body.style.fontSize = '14px';
-        }
-
-        setRootFontSize();
-        win.addEventListener(resizeEvt, setRootFontSize);
-        doc.addEventListener('DOMContentLoaded', setRootFontSize);
-    })(document, window);
-</script>
 <script>
     // 点击右侧箭头滚动
     function scrollNext (el)