Browse Source

模版修改

moshaorui 3 weeks ago
parent
commit
40b5100bd6

+ 4 - 4
resources/views/liquid_src/1/screen_protector_solutions/__banner_list.liquid

@@ -1,4 +1,3 @@
-
 <section class="hero d-flex align-items-center">
     <div class="container swiper-container">
         <div class="swiper-wrapper">
@@ -7,7 +6,7 @@
                 <div class="col-md-6 text-center text-md-start">
                     <h1 class="display-4">{{ item.title }}</h1>
                     <p class="lead">{{ item.subtitle }}</p>
-                    <a href="{{ item.banner_url }}" class="btn btn-dark">Mais Informações</a>
+                    <a href="{{ item.banner_url }}" class="btn">Mais Informações</a>
                 </div>
                 <div class="col-md-6 text-center">
                     <img src="{{ site.image_base_url }}{{ item.image_url }}" alt="{{ item.title }}" class="img-fluid mt-4">
@@ -15,6 +14,7 @@
             </div>
             {% endfor %}
         </div>
-        <div class="swiper-pagination"></div>
     </div>
-</section>
+    <div class="swiper-button-next"></div>
+    <div class="swiper-button-prev"></div>
+</section>

+ 2 - 2
resources/views/liquid_src/1/screen_protector_solutions/__banner_list_2.liquid

@@ -1,4 +1,4 @@
-<section class="additional-products py-5">
+<section class="additional-products">
     <div class="container">
         <!-- 添加导航按钮 -->
         <div class="swiper-container-bottom">
@@ -11,4 +11,4 @@
             </div>
         </div>
     </div>
-</section>
+</section>

+ 1 - 3
resources/views/liquid_src/1/screen_protector_solutions/__collection_list_1.liquid

@@ -1,5 +1,3 @@
-
-
 <!-- FAQ Section -->
 <section>
     <div class="container faq">
@@ -32,4 +30,4 @@
             </div>
         </div>
     </div>
-</section>
+</section>

+ 47 - 9
resources/views/liquid_src/1/screen_protector_solutions/__collection_list_2.liquid

@@ -1,19 +1,57 @@
-<!-- FAQ Section -->
+<script src="{{ site.asset_base_url }}/static/tpl/screen_protector_solutions/lib/chart/dist/echarts.min.js"></script>
 <section class="supplier-section">
-    <! -- 供应商 -->
     <div class="container">
         <div class="row">
-            <!-- 国际业务 -->
-            {% for item in pages %}
-                <div class="col-md-4">
-                    <div class="card contact-card">
+            <!-- 右侧表格 -->
+            <div class="col-md-4 supplier-left">
+                {% for item in pages %}
+                    <div class="card">
                         <div class="card-body">
-                            <h3 class="section-title">{{ item.title | decode_html_entities | strip_html }}</h3>
-                            {{page.content | raw }}
+                            <div class="d-flex justify-content-between align-items-start mb-3">
+                                <h5 class="card-title m-0">
+                                    {{ item.title | decode_html_entities | strip_html }}
+                                </h5>
+                                <div class="tags ms-2">
+                                    {% for tag in item.tags %}
+                                        {% if tag.name != 'Agent' %}
+                                            <span class="badge me-2">{{ tag.name}}</span>
+                                        {%endif%}
+                                    {% endfor %}
+                                </div>
+                            </div>
+
+                            <div class="mb-2 card-text">
+                                {{ item.content | raw}}
+                            </div>
+                        </div>
+                    </div>
+                {% endfor %}
+
+                <div class="card hidden" id="empty-card">
+                    <div class="card-body">
+                        <div class="d-flex justify-content-between align-items-start mb-3">
+                            <h5 class="card-title m-0">
+                                Não existem actualmente agentes disponíveis
+                            </h5>
                         </div>
                     </div>
                 </div>
-            {% endfor %}
+            </div>
+
+            <!-- 左侧地图 -->
+            <div class="col-md-8 supplier-right">
+                <div id="chart"></div>
+            </div>
+
         </div>
     </div>
 </section>
+<script>
+    var jsonData;
+    function getJson (data) {
+        jsonData = data
+    }
+</script>
+<script type="text/javascript" src="{{ site.asset_base_url }}/static/tpl/screen_protector_solutions/lib/chart/brazil_geo.json"></script>
+<script src="{{ site.asset_base_url }}/static/tpl/screen_protector_solutions/lib/chart/js.js"></script>
+<script src="{{ site.asset_base_url }}/static/tpl/screen_protector_solutions/lib/chart/init.js"></script>

+ 51 - 0
resources/views/liquid_src/1/screen_protector_solutions/__collection_list_3.liquid

@@ -0,0 +1,51 @@
+<section class="index-new">
+    <div class="container px-0">
+        <!-- 标题 -->
+        <h1 class="display-5 fw-bold text-center mb-5">What's New At Mietubl</h1>
+
+        <div class="row gx-0">
+            <!-- 左侧活动卡片 -->
+            {% for item in pages %}
+                {% if forloop.index == 1 %}
+                    <div class="col-12 col-md-6">
+                        <div class="event-card bg-white h-100 main-new">
+                            {% if item.cover_image %}
+                                <img src="{% if item.cover_image contains 'http' %}{{ item.cover_image }}{% else %}{{ site.image_base_url }}{{ item.cover_image | append: '?x-oss-process=image/resize,m_fill,w_720,h_500' }}{% endif %}" alt="{{ item.title | strip_html }}">
+                            {% else %}
+                                <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/product_default.jpg?x-oss-process=image/resize,m_fill,w_720,h_500" alt="{{ item.title | strip_html }}" class="img-fluid w-100 h-auto">
+                            {% endif %}
+                            <div class="main-new-text">
+                                <p class="date-text mb-3">{{ item.post_date | date: 'M %d.%Y' }}</p>
+                                <p class="fw-bold">{{ item.title | strip_html }}</p>
+                            </div>
+                        </div>
+                    </div>
+                {% endif %}
+            {% endfor %}
+
+            <!-- 右侧新闻列表 -->
+            <div class="col-12 col-md-6">
+                <!-- 新闻条目 1 -->
+                {% for item in pages %}
+                    {% if forloop.index > 1 %}
+                        <div class="news-card bg-white list-new {% if forloop.index < 4 %}list-new-botom{% endif %}">
+                            <div class="row align-items-center">
+                                <div class="col-12 col-md-4">
+                                    {% if item.cover_image %}
+                                        <img src="{% if item.cover_image contains 'http' %}{{ item.cover_image }}{% else %}{{ site.image_base_url }}{{ item.cover_image | append: '?x-oss-process=image/resize,m_fill,w_400,h_266' }}{% endif %}" class="img-fluid rounded-top" style="min-height:120px" alt="{{ item.title | strip_html }}">
+                                    {% else %}
+                                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/product_default.jpg" alt="{{ item.title | strip_html }}" class="img-fluid rounded">
+                                    {% endif %}
+                                </div>
+                                <div class="col-12 col-md-8">
+                                    <p class="date-text">{{ item.post_date | date: 'M %d.%Y' }}</p>
+                                    <div class="news-title">{{ item.title | strip_html }}</div>
+                                </div>
+                            </div>
+                        </div>
+                    {% endif %}
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+</section>

+ 7 - 22
resources/views/liquid_src/1/screen_protector_solutions/_footer.liquid

@@ -1,30 +1,16 @@
-
 <!-- Rodapé -->
 <footer class="bg-dark text-white py-4 footer">
     <!-- 品牌标识区 -->
-    <div class="container mb-4">
+    <div class="container mb-4 mt-4">
         <div class="row align-items-center">
             <h2 class="h4 mb-0 text-center">
-                <img  src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/logo2.svg" class="logo" mtb_edit="2">
-            </h2>
-        </div>
-        <div class="row">
-            <p class="mb-0 text-center logo-txt" mtb_edit="2">Make It Easier To Use, Better Life</p>
-        </div>
-    </div>
-
-    <div class="container footer-links">
-        <div class="row">
-            <div class="col-md-4 footer-contact">
-                <h5>Contato</h5>
-
-                <p>{{ site.dist.company_name }}</p>
-                <p>{{ site.dist.company_address }}</p>
-                <p>Telefone {{ site.dist.service_hotline }}</p>
-                <p mtb_edit="2">Horário de Atendimento:<br /> Segunda a Sexta das 9 às 17 horas</p>
-
+                <img src="https://mietubl-dev.oss.mietubl.com.cn/static/tpl/screen_protector_solutions/image/logo2.svg" mtb_edit="2" id="i2lcuj" class="logo"/> </h2></div><div class="row"><p mtb_edit="2" class="mb-0 text-center logo-txt" id="iy4snk">Make It Easier To Use, Better Life</p></div></div><div class="container footer-links"><div class="row"><div class="col-md-4 footer-contact"><h5>Contato</h5><p>Mietubl Tecnologia Brasil Ltda</p><p>Rua Camomil, 169 - Canindé   CEP 03032-010 - São Paulo - SP - Brasil</p><p>Telefone Telefone +(55) 11 97771-5699</p><p mtb_edit="2" id="i02i0y">Horário de Atendimento:<br/> Segunda a Sexta das 9 às 17 horas</p>
+                {% if site.dist.facebook %}
                 <a href="{{ site.dist.facebook }}" class="text-white me-2"><i class="fab fa-facebook"></i></a>
+                {% endif %}
+                {% if site.dist.instagram %}
                 <a href="{{ site.dist.instagram }}" class="text-white"><i class="fab fa-instagram"></i></a>
+                {% endif %}
             </div>
 
             {% for menu in site.menus_footer %}
@@ -50,5 +36,4 @@
 <script src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
 <script src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/swiper/js/swiper.min.js"></script>
 <!-- JS Personalizado -->
-<script src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/js/scripts.js"></script>
-
+<script src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/js/scripts.js"></script>

+ 11 - 14
resources/views/liquid_src/1/screen_protector_solutions/_header.liquid

@@ -1,20 +1,20 @@
 <header>
     <nav class="navbar navbar-expand-lg navbar-dark bg-orange">
 
-        <div class="container">
+        <div class="nav-box">
             {% if site.dist.logo %}
-            <a class="header-logo position-absolute  translate-middle-y" style="top:50%; z-index: 1000;left: 60px;" href="/">
-                <img src="{{ site.image_base_url }}{{ site.dist.logo }}" height="100px" width="230px">
+            <a class="header-logo" href="/">
+                <img src="{{ site.image_base_url }}{{ site.dist.logo }}">
             </a>
             {% endif %}
 
-            <div class="navbar-toggler-container position-absolute ">
+            <div class="navbar-toggler-container">
                 <button class="navbar-toggler " type="button"
                         data-bs-toggle="collapse"
                         data-bs-target="#navbarNav"
                         aria-controls="navbarNav"
                         aria-expanded="false"
-                        aria-label="切换导航">
+                        aria-label="toggle switch">
                     <span class="navbar-toggler-icon"></span>
                 </button>
             </div>
@@ -33,13 +33,12 @@
                                 </a>
                             {% endif %}
                             {% if menu.children and menu.children.size > 0 %}
-                                <ul class="dropdown-menu w-100 p-0">
-                                    <div class="container py-3" style="max-width: 90%; margin: 0 auto;">
-                                        <div class="row g-4">
+                                <ul class="dropdown-menu">
+                                    <div class="container py-3">
+                                        <div class="dropdown-wrapper">
                                             {% for child in menu.children %}
-                                            <div class="col-4">
+                                            <div class="dropdown-box">
                                                 <div class="d-flex align-items-start">
-
                                                     <div class="flex-shrink-0">
                                                         {%  if child.image_url %}
                                                         <img src="{{ site.asset_base_url }}{{ child.image_url }}"
@@ -56,7 +55,7 @@
                                                         <h6 class="mb-2 fw-bold">{{ child.title }}</h6>
                                                         <div class="d-flex flex-column">
                                                             {% for item in child.children %}
-                                                            <a href="{{ item.uri }}" class="text-decoration-none  mb-1 small">{{ item.title }}</a>
+                                                            <a href="{{ item.uri }}" class="child-item">{{ item.title }}</a>
                                                             {% endfor %}
                                                         </div>
                                                     </div>
@@ -74,6 +73,4 @@
             </div>
         </div>
     </nav>
-</header>
-
-
+</header>

+ 32 - 7
resources/views/liquid_src/1/screen_protector_solutions/collection_list.liquid

@@ -21,6 +21,32 @@
     <!-- CSS Personalizado -->
     <link rel="stylesheet" href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/swiper/css/swiper.min.css">
     <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/css/styles.css" rel="stylesheet">
+    <script type="application/ld+json">
+        {
+            "@context": "https://schema.org",
+            "@type": "ItemList",
+            "name": "{{tag.seo_title}}",
+            "description": "{{ site.dist.seo_description  | strip_html| strip_newlines }}",
+            "url": "{{site.current_url}}",
+            "numberOfItems": {{pages | size}},
+            "itemListOrder": "Descending",
+            "itemListElement": [
+        {% for item in pages %}
+                    {
+                      "@type": "ListItem",
+                      "position": {{forloop.index}},
+                      "item": {
+                        "@type": "NewsArticle",
+                        "headline": "{{ item.title | strip_html }}",
+                        "image": "{% if item.cover_image contains 'http' %}{{ item.cover_image }}{% else %}{{ site.image_base_url }}{{ item.cover_image | append: '?x-oss-process=image/resize,m_fill,w_400,h_266' }}{% endif %}",
+                        "datePublished": "{{ item.post_date | date: '%Y-%m-%d' }}",
+                        "author": {"@type": "Organization", "name": "Mietubl"}
+                      }
+                    }{% if forloop.last == false %},{% endif %}
+        {% endfor %}
+            ]
+        }
+    </script>
 </head>
 <body>
 
@@ -32,13 +58,13 @@
     <div class="breadcrumb">{% for breadcrumb in breadcrumbs %} {%if forloop.last%} <strong>{{ breadcrumb.name }}</strong> {%else%} <a href="{{ breadcrumb.url }}" title="Home page">{{ breadcrumb.name }}</a>{% endif %}{% endfor %} </div>
 
 
-    <div class="row g-4">
+    <div class="article-list">
         <!-- 左侧文章列表 -->
-        <div class="col-lg-12">
-            <div class="row row-cols-1 g-4">
+        <div>
+            <div>
                 {% for item in pages %}
                     <!-- 单篇文章卡片 -->
-                    <div class="col">
+                    <div class="article-list-item">
                         <div class="card article-card h-100 article-left">
                             <div class="row g-0">
                                 <div class="col-md-4">
@@ -56,7 +82,7 @@
                                             <h5 class="card-title">{{ item.title | strip_html }}</h5>
                                         </a>
 
-                                        <div class="d-flex justify-content-between mb-2">
+                                        <div class="d-flex justify-content-between">
                                             <small class="text-muted">{{ item.post_date | date: '%Y-%m-%d' }}</small>
                                         </div>
 
@@ -70,7 +96,6 @@
 
                                     </div>
                                 </div>
-                                <hr class="w-100 mx-auto">
                             </div>
                         </div>
                     </div>
@@ -148,4 +173,4 @@
 
 {% include '_footer.liquid' %}
 </body>
-</html>
+</html>

+ 52 - 83
resources/views/liquid_src/1/screen_protector_solutions/home.liquid

@@ -21,6 +21,32 @@
     <!-- CSS Personalizado -->
     <link rel="stylesheet" href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/swiper/css/swiper.min.css">
     <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/css/styles.css" rel="stylesheet">
+    <script type="application/ld+json">
+        {
+            "@context": "https://schema.org",
+            "@type": "LocalBusiness",
+            "name": "Mietubl Tecnologia Brasil Ltda",
+            "image": "{{ site.asset_base_url }}dist_images/logo/logo67d12900e960a.webp",
+            "address": {
+                "@type": "PostalAddress",
+                "streetAddress": "Rua Camomil, 169 - Canindé",
+                "addressLocality": "São Paulo",
+                "addressRegion": "SP",
+                "postalCode": "03032-010",
+                "addressCountry": "BR"
+            },
+            "telephone": "+(55) 11 97771-5699",
+            "openingHoursSpecification": {
+                "@type": "OpeningHoursSpecification",
+                "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
+                "opens": "09:00",
+                "closes": "17:00"
+            },
+            "sameAs": [
+                "https://www.facebook.com/MietublHolding/"
+            ]
+        }
+    </script>
 </head>
 <body>
 
@@ -36,122 +62,60 @@
     <div class="container">
         <h2 mtb_edit="1" id="ibjxa4" class="text-center mb-4">Nossos Produtos</h2>
         <hr class="w-25 mx-auto mb-5">
-        <div mtb_edit="2" mtb_toolbar="clone,delete" id="ilztiy" class="row">
-            <div class="col-md-4 mb-4" mtb_edit="2" mtb_toolbar="clone,delete">
-                <a href="#" mtb_edit="2">
+        <div mtb_edit="2" mtb_toolbar="clone,delete" id="ilztiy" class="index-product-grid">
+            <div mtb_edit="2" mtb_toolbar="clone,delete" id="iljpsm">
+                <a href="/maquina-de-corte-de-protetor-de-tela" mtb_edit="2" id="if2yh4">
                     <div class="card">
-                        <img src="https://mietubl-dev.oss.mietubl.com.cn/static/tpl/screen_protector_solutions/image/p1.webp" alt="Máquinas para Protetores de Telas" class="card-img-top" mtb_edit="2"/>
+                        <img src="https://mietubl-dev.oss.mietubl.com.cn/static/tpl/screen_protector_solutions/image/p1.webp" alt="Máquinas para Protetores de Telas" mtb_edit="2" id="iyaj5k" class="card-img-top"/>
                         <div class="card-body">
-                            <h5 class="card-title" mtb_edit="2">Máquinas para Protetores de Telas</h5>
-                            <p class="card-text" mtb_edit="2">Máquinas para impressão e corte para protetores de telas de celular</p>
+                            <h5 mtb_edit="2" class="card-title" id="i9tu4i">Máquinas para <br/>Protetores de Telas</h5>
+                            <p mtb_edit="2" class="card-text" id="im5q59">Máquinas para impressão e corte para protetores de telas de celular</p>
                         </div>
-
                     </div>
                 </a>
             </div>
 
-            <div class="col-md-4 mb-4"  mtb_edit="2" mtb_toolbar="clone,delete">
-                <a href="#" mtb_edit="2" >
-                    <div class="card">
-                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/p2.webp" class="card-img-top" alt="Protetores de Telas de Vidro" mtb_edit="2">
-                        <div class="card-body">
-                            <h5 class="card-title" mtb_edit="2">Protetores de Telas de Vidro</h5>
-                            <p class="card-text" mtb_edit="2">Telas protetoras de vidro temperado para variados modelos de celulares e tablets</p>
-                        </div>
+            <div mtb_edit="2" mtb_toolbar="clone,delete" id="i2pxgg">
+                <a href="/protetor-de-tela" mtb_edit="2" id="i50bp9"><div class="card"><img src="https://mietubl-dev.oss.mietubl.com.cn/static/tpl/screen_protector_solutions/image/p2.webp" alt="Protetores de Telas de Vidro" mtb_edit="2" id="ii696z" class="card-img-top"/><div class="card-body"><h5 mtb_edit="2" class="card-title" id="ihaz87">Protetores de Telas de Vidro</h5><p mtb_edit="2" class="card-text" id="i1cdo9">Telas protetoras de vidro temperado para variados modelos de celulares e tablets</p></div>
                     </div>
                 </a>
             </div>
 
-            <div class="col-md-4 mb-4" mtb_edit="2" mtb_toolbar="clone,delete">
-                <a href="#" mtb_edit="2" mtb_toolbar="clone,delete">
-                    <div class="card">
-                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/p3.webp" class="card-img-top" alt="Protetores de Telas de Hidrogel" mtb_edit="2">
-                        <div class="card-body" mtb_edit="2">
-                            <h5 class="card-title" mtb_edit="2">Protetores de Telas de Hidrogel</h5>
-                            <p class="card-text" mtb_edit="2">Telas protetoras adesivas e em Hidrogel para celulares, tablets e laptops</p>
-                        </div>
+            <div mtb_edit="2" mtb_toolbar="clone,delete" id="iqqes9">
+                <a href="/materiais" mtb_edit="2" mtb_toolbar="clone,delete" id="ifpo5t"><div class="card"><img src="https://mietubl-dev.oss.mietubl.com.cn/static/tpl/screen_protector_solutions/image/p3.webp" alt="Protetores de Telas de Hidrogel" mtb_edit="2" id="i2f7tf" class="card-img-top"/><div mtb_edit="2" class="card-body" id="imqxt4"><h5 mtb_edit="2" class="card-title" id="izkqib">Protetores de Telas de Hidrogel</h5><p mtb_edit="2" class="card-text" id="iolc9o">Telas protetoras adesivas e em Hidrogel para celulares, tablets e laptops</p></div>
                     </div>
                 </a>
             </div>
-            <!-- Adicione mais cards conforme necessário -->
-        </div>
 
-        <div mtb_edit="2" mtb_toolbar="clone,delete" id="icljgq" class="row">
-            <div class="col-md-4 mb-4" mtb_edit="2" mtb_toolbar="clone,delete">
-                <a href="#" mtb_edit="2">
-                    <div class="card">
-                        <img src="https://mietubl-dev.oss.mietubl.com.cn/static/tpl/screen_protector_solutions/image/p4.webp" alt="Fones Bluetooth" class="card-img-top" mtb_edit="2"/>
-                        <div class="card-body">
-                            <h5 class="card-title" mtb_edit="2">Fones Bluetooth</h5>
-                            <p class="card-text" mtb_edit="2">Fones auriculares sem fio</p>
-                        </div>
+
+            <div mtb_edit="2" mtb_toolbar="clone,delete" id="i36tdh"> <a href="/tws" mtb_edit="2" id="il0tfz"><div class="card"><img src="https://mietubl-dev.oss.mietubl.com.cn/static/tpl/screen_protector_solutions/image/p4.webp" alt="Fones auriculares sem fio" mtb_edit="2" id="ioc4ng" class="card-img-top"/><div class="card-body"><h5 mtb_edit="2" class="card-title" id="itzjel">Fones Bluetooth</h5><p mtb_edit="2" class="card-text" id="iwleag">Fones auriculares sem fio</p></div>
                     </div>
                 </a>
             </div>
 
 
-
-            <div class="col-md-4 mb-4" mtb_edit="2" mtb_toolbar="clone,delete">
-                <a href="#" mtb_edit="2">
-                    <div class="card">
-                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/p5.webp" class="card-img-top" alt="Alto Falantes" mtb_edit="2">
-                        <div class="card-body">
-                            <h5 class="card-title" mtb_edit="2">Alto Falantes</h5>
-                            <p class="card-text" mtb_edit="2">Alto-falantes Bluetooth portáteis</p>
-                        </div>
+            <div mtb_edit="2" mtb_toolbar="clone,delete" id="i9il66"> <a href="/alto-falantes-bluetooth" mtb_edit="2" id="ieq7da"><div class="card"><img src="https://mietubl-dev.oss.mietubl.com.cn/static/tpl/screen_protector_solutions/image/p5.webp" alt="Alto Falantes" mtb_edit="2" id="i26wj5" class="card-img-top"/><div class="card-body"><h5 mtb_edit="2" class="card-title" id="ic2vfs">Alto Falantes</h5><p mtb_edit="2" class="card-text" id="iemhzc">Alto-falantes Bluetooth portáteis</p></div>
                     </div>
                 </a>
             </div>
 
 
-
-            <div class="col-md-4 mb-4" mtb_edit="2" mtb_toolbar="clone,delete">
-                <a href="#" mtb_edit="2">
-                    <div class="card">
-                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/p6.webp" class="card-img-top" alt="Headphones" mtb_edit="2">
-                        <div class="card-body">
-                            <h5 class="card-title" mtb_edit="2">Headphones</h5>
-                            <p class="card-text" mtb_edit="2">Headphones com ou sem fio</p>
-                        </div>
+            <div mtb_edit="2" mtb_toolbar="clone,delete" id="itpvbg"> <a href="/fones-de-ouvido" mtb_edit="2" id="iitmxe"><div class="card"><img src="https://mietubl-dev.oss.mietubl.com.cn/static/tpl/screen_protector_solutions/image/p6.webp" alt="Headphones" mtb_edit="2" id="ix9gpx" class="card-img-top"/><div class="card-body"><h5 mtb_edit="2" class="card-title" id="ifm306">Headphones</h5><p mtb_edit="2" class="card-text" id="isixiq">Headphones com ou sem fio</p></div>
                     </div>
                 </a>
             </div>
-        </div>
 
-        <div mtb_edit="2" mtb_toolbar="clone,delete"  class="row">
-
-            <div class="col-md-4 mb-4" mtb_edit="2" mtb_toolbar="clone,delete">
-                <a href="#" mtb_edit="2">
-                    <div class="card">
-                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/p7.webp" class="card-img-top" alt="Cabos de Dados" mtb_edit="2">
-                        <div class="card-body">
-                            <h5 class="card-title" mtb_edit="2">Cabos de Dados</h5>
-                            <p class="card-text" mtb_edit="2">Cabos de Dados para celulares e tablets</p>
-                        </div>
+            <div mtb_edit="2" mtb_toolbar="clone,delete" id="ijysq6"> <a href="/cabos" mtb_edit="2" id="indxww"><div class="card"><img src="https://mietubl-dev.oss.mietubl.com.cn/static/tpl/screen_protector_solutions/image/p7.webp" alt="Cabos de Dados" mtb_edit="2" id="iz7nfh" class="card-img-top"/><div class="card-body"><h5 mtb_edit="2" class="card-title" id="iqi32s">Cabos de Dados</h5><p mtb_edit="2" class="card-text" id="iqfys5">Cabos de Dados para celulares e tablets</p></div>
                     </div>
                 </a>
             </div>
 
-            <div class="col-md-4 mb-4" mtb_edit="2" mtb_toolbar="clone,delete">
-                <a href="#" mtb_edit="2">
-                    <div class="card">
-                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/p8.webp" class="card-img-top" alt="Carregadores" mtb_edit="2">
-                        <div class="card-body">
-                            <h5 class="card-title" mtb_edit="2">Carregadores</h5>
-                            <p class="card-text" mtb_edit="2">Carregadores rápidos para celulares, tablets, laptops e notebooks</p>
-                        </div>
+            <div mtb_edit="2" mtb_toolbar="clone,delete" id="izi6lg"> <a href="/carregador-de-parede" mtb_edit="2" id="i5xp14"><div class="card"><img src="https://mietubl-dev.oss.mietubl.com.cn/static/tpl/screen_protector_solutions/image/p8.webp" alt="Carregadores" mtb_edit="2" id="if5d9r" class="card-img-top"/><div class="card-body"><h5 mtb_edit="2" class="card-title" id="i0s47j">Carregadores</h5><p mtb_edit="2" class="card-text" id="ii0n6h">Carregadores rápidos para celulares, tablets, laptops e notebooks</p></div>
                     </div>
                 </a>
             </div>
 
-            <div class="col-md-4 mb-4" mtb_edit="2" mtb_toolbar="clone,delete">
-                <a href="#" mtb_edit="2">
-                    <div class="card">
-                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/p9.jpg" class="card-img-top" alt="Carregadores" mtb_edit="2">
-                        <div class="card-body">
-                            <h5 class="card-title" mtb_edit="2">Fones Auriculares</h5>
-                            <p class="card-text" mtb_edit="2">Fones de ouvido com fio</p>
-                        </div>
+            <div mtb_edit="2" mtb_toolbar="clone,delete" id="ihuv68"> <a href="/fones-de-ouvido-auricular-com-fio" mtb_edit="2" id="iux7vv"><div class="card"><img src="https://mietubl-dev.oss.mietubl.com.cn/static/tpl/screen_protector_solutions/image/p9.jpg" alt="Fones Auriculare" mtb_edit="2" id="iem0lf" class="card-img-top"/><div class="card-body"><h5 mtb_edit="2" class="card-title" id="im1r3e">Fones Auriculares</h5><p mtb_edit="2" class="card-text" id="imsjla">Fones de ouvido com fio</p></div>
                     </div>
                 </a>
             </div>
@@ -164,9 +128,9 @@
     <!-- 新增纯背景层 -->
     <div class="bg-orange-overlay"></div>
     <!-- 内容容器 -->
-    <div class="container d-flex h-100 position-relative" style="z-index: 1;">
+    <div class="container index-waist" >
         <div class="container-txt d-flex flex-column justify-content-center">
-            <h3 mtb_edit="1" id="ibk1l6">Veja como é simples produzir telas de proteção personalizadas para celular.</h3>
+            <h3 mtb_edit="1" id="ibk1l6">Veja como é simples <br/> produzir telas de proteção <br/> personalizadas para celular.</h3>
         </div>
         <div class="elementor-widget-container">
             <div class="elementor-wrapper elementor-open-inline">
@@ -182,6 +146,10 @@
 
 
 
+{% collection slug="news" limit=4 template="__collection_list_3.liquid" %}
+
+
+
 {% include '_footer.liquid' %}
 
 <script>
@@ -192,7 +160,8 @@
             slideShadows: false, // 滑动时显示阴影
             limitRotation: true // 限制翻转角度
         },
-        pagination: '.swiper-pagination', // 分页器
+        nextButton: '.swiper-button-next',
+        prevButton: '.swiper-button-prev',
         paginationClickable: true, // 分页器可点击
         autoplay: 5000, // 自动播放间隔(毫秒)
         loop: true // 循环播放
@@ -224,4 +193,4 @@
     });
 </script>
 </body>
-</html>
+</html>

+ 36 - 7
resources/views/liquid_src/1/screen_protector_solutions/pages_detail.liquid

@@ -21,6 +21,37 @@
     <!-- CSS Personalizado -->
     <link rel="stylesheet" href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/swiper/css/swiper.min.css">
     <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/css/styles.css" rel="stylesheet">
+       <script type="application/ld+json">
+        {
+            "@context": "https://schema.org",
+            "@type": "NewsArticle",
+            "mainEntityOfPage": {
+                "@type": "WebPage",
+                "@id": "{{site.current_url}}"
+            },
+            "headline": "Privacy screen protector sheets111",
+            "image": [
+                "{% if page.cover_image contains 'http' %}{{ page.cover_image }}{% else %}{{ site.image_base_url }}{{ page.cover_image | append: '?x-oss-process=image/resize,m_fill,w_400,h_266' }}{% endif %}"
+            ],
+            "datePublished": "{{ page.post_date | date: '%Y-%m-%d' }}",
+            "author": {
+                "@type": "Organization",
+                "name": "Mietubl Tecnologia Brasil Ltda",
+                "url": "{{site.current_url}}"
+            },
+            "publisher": {
+                "@type": "Organization",
+                "name": "Mietubl",
+                "logo": {
+                    "@type": "ImageObject",
+                    "url": "{{ site.asset_base_url }}dist_images/logo/logo67d12900e960a.webp"
+                }
+            },
+            "description": "{{page.seo_description  | strip_html| strip_newlines }}",
+            "articleBody": "{{page.content  | strip_html| strip_newlines }}",
+            "keywords": "{{page.seo_keywords  | strip_html| strip_newlines }}"
+        }
+    </script>
 </head>
 <body>
 
@@ -29,7 +60,7 @@
 
 <div class="container article-detail">
 
-    <div class="breadcrumb">{% for breadcrumb in breadcrumbs %} {%if forloop.last%} <strong>Perguntas frequentes</strong> {%else%} <a href="{{ breadcrumb.url }}" title="Home page">{{ breadcrumb.name }}</a>{% endif %}{% endfor %} </div>
+    <div class="breadcrumb">{% for breadcrumb in breadcrumbs %} {%if forloop.last%} <strong>{{ page.title | raw }}</strong> {%else%} <a href="{{ breadcrumb.url }}" title="Home page">{{ breadcrumb.name }}</a>{% endif %}{% endfor %} </div>
 
 
     <div class="row">
@@ -38,13 +69,11 @@
             <article class="card article-content">
                 <div class="card-body">
                     <!-- 文章标题 -->
-                    <h1 class="mb-5 fw-bold display-6">{{ page.title | raw }}</h1>
+                    <h1>{{ page.title | raw }}</h1>
 
                     <!-- 文章元信息 -->
-                    <div class="d-flex justify-content-between mb-4 text-muted article-date">
-                        <div>
-                            <span><i class="fas fa-clock me-1"></i>{{ page.post_date | date: '%Y-%m-%d' }}</span>
-                        </div>
+                    <div class="article-date">
+                            <span><i class="fas fa-clock"></i>{{ page.post_date | date: '%Y-%m-%d' }}</span>
                     </div>
 
 
@@ -99,4 +128,4 @@
 
 {% include '_footer.liquid' %}
 </body>
-</html>
+</html>

+ 43 - 14
resources/views/liquid_src/1/screen_protector_solutions/pages_sp_about.liquid

@@ -21,16 +21,42 @@
     <!-- CSS Personalizado -->
     <link rel="stylesheet" href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/swiper/css/swiper.min.css">
     <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/css/styles.css" rel="stylesheet">
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "Organization",
+      "name": "{{page.seo_title}}",
+      "url": "{{site.current_url}}",
+      "logo": "{{ site.asset_base_url }}dist_images/logo/logo67d12900e960a.webp",
+      "description": "{{ page.seo_description  | strip_html| strip_newlines }}",
+      "address": {
+        "@type": "PostalAddress",
+        "streetAddress": "Rua Camomil, 169 - Canindé",
+        "addressLocality": "São Paulo",
+        "addressRegion": "SP",
+        "postalCode": "03032-010",
+        "addressCountry": "BR"
+      },
+      "contactPoint": {
+        "@type": "ContactPoint",
+        "telephone": "+(55) 11 97771-5699",
+        "contactType": "customer service",
+        "availableLanguage": "pt-BR",
+        "hoursAvailable": "Mo-Fr 09:00-17:00"
+      },
+      "sameAs": [
+        "https://www.facebook.com/MietublHolding/"
+      ]
+    }
+    </script>
 </head>
 <body>
 
 {% include '_header.liquid' %}
 
-
 <!-- Hero Section -->
 
 
-
 <!-- Main Content -->
 <section>
     <div class="container">
@@ -39,7 +65,7 @@
         <div class="row align-items-center g-5">
             <div class="col-lg-6">
 
-                <h3 class="section-title  text-center py-5"> {{ page.title | raw }}</h3>
+                <h3 class="section-title"> {{ page.title | raw }}</h3>
                 <div class="text-muted lead">
                     {{page.content | raw }}
                 </div>
@@ -54,38 +80,41 @@
 </section>
 
 
-
+<section>
+    <div class="wp-page-banner">
+    </div>
+</section>
 
 
 <!-- Core Values -->
 <section class="core-values">
     <div class="container text-center py-5">
-        <h3 class="section-title" mtb_edit="2">O nosso compromisso</h3>
+        <h3 class="section-title2" mtb_edit="2">O nosso compromisso</h3>
         <div class="row g-4">
             <div class="col-md-4">
                 <div class="card h-100 border-0">
                     <div class="card-body">
                         <i class="fas fa-globe-asia fa-3x text-primary mb-3"></i>
-                        <h5 mtb_edit="2">Soluções Globais</h5>
-                        <p class="text-muted" mtb_edit="2">Fornecer soluções tecnológicas em todo o mundo com experiência localizada</p>
+                        <h4 mtb_edit="2" class="mb-3">Soluções Globais</h4>
+                        <p mtb_edit="2">Fornecer soluções tecnológicas em todo o mundo com experiência localizada</p>
                     </div>
                 </div>
             </div>
             <div class="col-md-4">
                 <div class="card h-100 border-0">
                     <div class="card-body">
-                        <i class="fas fa-hand-holding-heart fa-3x text-danger mb-3"></i>
-                        <h5 mtb_edit="2">Criação de Valor</h5>
-                        <p class="text-muted" mtb_edit="2">Garantir a satisfação do consumidor e a rentabilidade do revendedor</p>
+                        <i class="fas fa-hand-holding-heart fa-3x text-primary mb-3"></i>
+                        <h4 mtb_edit="2" class="mb-3">Criação de Valor</h4>
+                        <p  mtb_edit="2">Garantir a satisfação do consumidor e a rentabilidade do revendedor</p>
                     </div>
                 </div>
             </div>
             <div class="col-md-4">
                 <div class="card h-100 border-0">
                     <div class="card-body">
-                        <i class="fas fa-link fa-3x text-success mb-3"></i>
-                        <h5 mtb_edit="2">Construção de ecossistemas</h5>
-                        <p class="text-muted" mtb_edit="2">Integração de recursos ao longo do ciclo de vida do produto</p>
+                        <i class="fas fa-link fa-3x text-primary mb-3"></i>
+                        <h4 mtb_edit="2" class="mb-3">Construção de ecossistemas</h4>
+                        <p  mtb_edit="2">Integração de recursos ao longo do ciclo de vida do produto</p>
                     </div>
                 </div>
             </div>
@@ -98,4 +127,4 @@
 
 {% include '_footer.liquid' %}
 </body>
-</html>
+</html>

+ 60 - 38
resources/views/liquid_src/1/screen_protector_solutions/pages_sp_contact.liquid

@@ -21,6 +21,40 @@
     <!-- CSS Personalizado -->
     <link rel="stylesheet" href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/swiper/css/swiper.min.css">
     <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/css/styles.css" rel="stylesheet">
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "LocalBusiness",
+      "name": "Mietubl Tecnologia Brasil Ltda",
+      "image": "https://mietubl-dev.oss.mietubl.com.cn/dist_images/logo/logo67d12900e960a.webp",
+      "url": "{{site.current_url}}",
+      "priceRange": "$$",
+      "address": {
+        "@type": "PostalAddress",
+        "streetAddress": "Rua Camomil, 169 - Canindé",
+        "addressLocality": "São Paulo",
+        "addressRegion": "SP",
+        "postalCode": "03032-010",
+        "addressCountry": "BR"
+      },
+      "telephone": "+(55) 11 97771-5699",
+      "openingHoursSpecification": {
+        "@type": "OpeningHoursSpecification",
+        "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
+        "opens": "09:00",
+        "closes": "17:00"
+      },
+      "contactPoint": {
+        "@type": "ContactPoint",
+        "contactType": "customer service",
+        "availableLanguage": "pt-BR",
+        "email": "support@mietubl.com.br"
+      },
+      "sameAs": [
+        "https://www.facebook.com/MietublHolding/"
+      ]
+    }
+    </script>
 </head>
 <body>
 
@@ -32,7 +66,7 @@
 <section class="contact-section">
     <div class="container">
         <div class="breadcrumb"><a href="/" title="Home page">Home</a>  <strong>Perguntas frequentes</strong></div>
-        <div class="row g-5 contact-row">
+        <div class="row contact-row">
             <!-- Left Column -->
             <div class="col-md-6">
                 <h2 class="mb-5" mtb_edit="2">Contato</h2>
@@ -62,53 +96,41 @@
             <div class="col-md-6 contact-form">
                 <div class="form-container">
                     <h3 class="mb-4" mtb_edit="2">Seja um Representante</h3>
-                    <form id="form_contact" data-action="/contact" class="form-default" role="form">
-                        <!-- 姓名 -->
-                        <div class="row mb-3 align-items-center">
-                            <label class="col-md-3 col-form-label" mtb_edit="2">Nome</label>
-                            <div class="col-md-9">
+                    <form id="form_contact" data-action="/contact" class="contact-grid-container" role="form">
+                            <!-- 姓名 -->
+                            <div class="grid-item">
+                                <label>Nome</label>
                                 <input type="text" name="customer_name" class="form-control" required>
                             </div>
-                        </div>
-
-                        <!-- 邮箱 -->
-                        <div class="row mb-3 align-items-center">
-                            <label class="col-md-3 col-form-label" mtb_edit="2">E-mail</label>
-                            <div class="col-md-9">
+                        
+                            <!-- 邮箱 -->
+                            <div class="grid-item">
+                                <label>E-mail</label>
                                 <input type="email" name="email" class="form-control" required>
                             </div>
-                        </div>
-
-                        <!-- 公司名称 -->
-                        <div class="row mb-3 align-items-center">
-                            <label class="col-md-3 col-form-label" mtb_edit="2">Empresa</label>
-                            <div class="col-md-9">
+                        
+                            <!-- 公司名称 -->
+                            <div class="grid-item">
+                                <label>Empresa</label>
                                 <input type="text" name="company_name" class="form-control">
                             </div>
-                        </div>
-
-                        <!-- WhatsApp -->
-                        <div class="row mb-3 align-items-center">
-                            <label class="col-md-3 col-form-label" mtb_edit="2">WhatsApp</label>
-                            <div class="col-md-9">
+                        
+                            <!-- WhatsApp -->
+                            <div class="grid-item">
+                                <label>WhatsApp</label>
                                 <input type="tel" name="whats_app" class="form-control">
                             </div>
-                        </div>
-
-                        <!-- 消息 -->
-                        <div class="row mb-3 align-items-center">
-                            <label class="col-md-3 col-form-label" mtb_edit="2">Mensagem</label>
-                            <div class="col-md-9">
+                        
+                            <!-- 消息 -->
+                            <div class="grid-item">
+                                <label class="contact-label">Mensagem</label>
                                 <textarea class="form-control" name="content" rows="4"></textarea>
                             </div>
-                        </div>
-
-                        <!-- 提交按钮 -->
-                        <div class="row">
-                            <div class="col-md-9 offset-md-3">
-                                <button class="quote btnch"  data-bs-toggle="modal" data-bs-target="#quoteModal">Get a quote</button>
+                        
+                            <!-- 提交按钮 -->
+                            <div>
+                                <button class="quote btnch" data-bs-toggle="modal" data-bs-target="#quoteModal">Get a quote</button>
                             </div>
-                        </div>
                     </form>
                 </div>
             </div>
@@ -178,4 +200,4 @@
     });
 </script>
 </body>
-</html>
+</html>

+ 37 - 11
resources/views/liquid_src/1/screen_protector_solutions/products_categories.liquid

@@ -22,20 +22,47 @@
     <!-- CSS Personalizado -->
     <link rel="stylesheet" href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/swiper/css/swiper.min.css">
     <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/css/styles.css" rel="stylesheet">
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "ItemList",
+      "name": "{{category.seo_title}}",
+      "description": "{{ site.dist.seo_description  | strip_html| strip_newlines }}",
+      "url": {{site.current_url}}",
+      "numberOfItems": {{products | size}},
+      "itemListElement": [
+       {% for item in products %}
+        {
+          "@type": "ListItem",
+          "position": {{forloop.index}},
+          "item": {
+            "@type": "Product",
+            "name": "{{ item.title | strip_html }}",
+            "image": "{% if image_url contains 'http' %}{{ image_url }}?x-oss-process=image/resize,m_pad,w_260,h_260{% else %}{{ site.image_base_url }}{{ image_url | append: '?x-oss-process=image/resize,m_pad,w_260,h_260' }}{% endif %}",
+            "url": "/products/{{ item.id }}",
+            "brand": {"@type": "Brand", "name": "Mietubl"},
+            "description": "{{ item.seo_description }}"
+          }
+        }{% if forloop.last == false %},{% endif %}
+        {% endfor %}
+      ]
+    }
+    </script>
+    
 </head>
 <body>
 {% include '_header.liquid' %}
 
 
 <div class="products-list container"> <!-- 修改外层容器类名 -->
-    <div class="breadcrumb"><a href="/" title="Home page">Home</a>  <strong>{{category.name}}</strong></div>
-
+    <div class="breadcrumb"><a href="/" title="Home page">Home</a>  <strong>Data cable</strong></div>
+    
     <h2 class="section-header">{{category.name}}</h2>
 
-    <div class="row g-4 section-list"> <!-- 修改内层容器类名 -->
+    <div class="cat-list-grid"> <!-- 修改内层容器类名 -->
         <!-- 头戴式降噪耳机 -->
         {% for item in products %}
-        <div class="col-6 col-md-3">
+        <div>
             <div class=" product-card">
                 <a href="/products/{{ item.id }}" title="{{ item.title | strip_html }}">
                     {% if item.images and item.images[0].image_url %}
@@ -51,9 +78,10 @@
             </div>
         </div>
         {% endfor %}
-
-        <!-- 分页代码 -->
-        <nav aria-label="Page navigation" class="mt-4">
+    </div>
+    
+         <!-- 分页代码 -->
+        <nav aria-label="page-navigation" class="mt-4">
             <ul class="pagination justify-content-center flex-wrap">
                 {% if paginator.previous_page %}
                     <li class="page-item mr-2">
@@ -96,9 +124,7 @@
                     </li>
                 {% endif %}
             </ul>
-        </nav>
-
-    </div>
+        </nav>   
 </div>
 
 
@@ -106,4 +132,4 @@
 
 {% include '_footer.liquid' %}
 </body>
-</html>
+</html>

+ 40 - 22
resources/views/liquid_src/1/screen_protector_solutions/products_detail.liquid

@@ -21,6 +21,30 @@
     <!-- CSS Personalizado -->
     <link rel="stylesheet" href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/swiper/css/swiper.min.css">
     <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/css/styles.css" rel="stylesheet">
+    <script type="application/ld+json">
+        {
+            "@context": "https://schema.org",
+            "@type": "Product",
+            "name": "{{product.seo_title}}",
+            "image": [
+                {% for item in product.images %}"{% if image_url contains 'http' %}{{ image_url }}?x-oss-process=image/resize,w_500,m_lfit{% else %}{{ site.image_base_url }}{{ image_url }}?x-oss-process=image/resize,w_500,m_lfit{% endif %}"{% if forloop.last == false %},{% endif %}{% endfor %}
+            ],
+            "description": "{{product.seo_description}}",
+            "brand": {
+                "@type": "Brand",
+                "name": "Mietubl",
+                "logo": "{{ site.asset_base_url }}dist_images/logo/logo67d12900e960a.webp"
+            },
+            "sku": "{{product.sku | strip_html }}",
+            "offers": {
+                "@type": "Offer",
+                "priceCurrency": "BRL",
+                "availability": "https://schema.org/InStock",
+                "itemCondition": "https://schema.org/NewCondition",
+                "url": "{{site.current_url}}"
+            }
+        }
+    </script>
 </head>
 <body>
 
@@ -60,7 +84,7 @@
                     {% if product.images and product.images.size > 0 %}
                         {% for item in product.images %}
                             {% assign image_url = item.image_url %}
-                            <img src="{% if image_url contains 'http' %}{{ image_url }}?x-oss-process=image/resize,w_100,m_lfit{% else %}{{ site.image_base_url }}{{ image_url }}?x-oss-process=image/resize,w_100,m_lfit{% endif %}" class="swiper-slide" data-bs-target="#mainCarousel" data-bs-slide-to="{{ forloop.index0 }}" alt="{{ product.title }}">
+                            <img src="{% if image_url contains 'http' %}{{ image_url }}{% else %}{{ site.image_base_url }}{{ image_url }}{% endif %}" class="swiper-slide" data-bs-target="#mainCarousel" data-bs-slide-to="{{ forloop.index0 }}" alt="{{ product.title }}">
                         {% endfor %}
                     {% else %}
                         <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/product_default.jpg" class="swiper-slide" data-bs-target="#mainCarousel" data-bs-slide-to="0" alt="{{ product.title }}">
@@ -160,18 +184,13 @@
 
     <div class="row mt-5">
         <div class="col-12">
-            <ul class="nav nav-tabs mb-4" id="myTab" role="tablist">
-                <li class="nav-item" role="presentation">
-                    <button class="nav-link active" id="description-tab" data-bs-toggle="tab" data-bs-target="#description" type="button" role="tab" aria-controls="description" aria-selected="true">
-                        Descrição
-                    </button>
-                </li>
-                <li class="nav-item" role="presentation">
-                    <button class="nav-link" id="specification-tab" data-bs-toggle="tab" data-bs-target="#specification" type="button" role="tab" aria-controls="specification" aria-selected="false">
-                        Especificação
-                    </button>
-                </li>
-            </ul>
+            <div class="product-tab-nav">
+                <ul class="nav nav-tabs mb-4" id="myTab" role="tablist">
+                    <li class="nav-item active" role="presentation">Descrição</li>
+                    <li class="nav-item" role="presentation">Especificação</li>
+                </ul>
+                <div class="line"></div>
+            </div>
 
             <div class="tab-content" id="myTabContent">
                 <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
@@ -216,33 +235,32 @@
                     <input type="hidden" name="consulting_products" value="{{ product.title }}" />
 
                     <!-- 修改为上下布局 -->
-                    <div class="mb-3">
+                    <div>
                         <label class="form-label">Nome</label>
                         <input type="text" name="customer_name" class="form-control" required>
                     </div>
 
-                    <div class="mb-3">
+                    <div>
                         <label class="form-label">E-mail</label>
                         <input type="email" name="email" class="form-control" required>
                     </div>
 
-                    <div class="mb-3">
+                    <div>
                         <label class="form-label">Empresa</label>
                         <input type="text" name="company_name" class="form-control">
                     </div>
 
-                    <div class="mb-3">
+                    <div>
                         <label class="form-label">WhatsApp</label>
                         <input type="tel" name="whats_app" class="form-control">
                     </div>
 
-                    <div class="mb-3">
+                    <div>
                         <label class="form-label">Mensagem</label>
                         <textarea class="form-control" name="content" rows="4"></textarea>
                     </div>
 
-                    <!-- 按钮保持原宽度 -->
-                    <div class="d-grid text-center" style="display: grid; justify-content: center;">
+                    <div  >
                         <button type="submit" class="quote btnch">Enviar</button>
                     </div>
                 </form>
@@ -256,8 +274,8 @@
 <script>
     var swiper = new Swiper('.swiper-container', {
         slidesPerView: 5,
+        spaceBetween: 10,
         paginationClickable: true,
-        spaceBetween: 30,
         freeMode: true
     });
 
@@ -320,4 +338,4 @@
 
 </script>
 </body>
-</html>
+</html>