冷链官网修改

static/css/style.css

@@ -1731,4 +1731,27 @@ p.help-block li {
   min-height: 100%; /* 至少100%高度 */
   transform: translate(-50%, -50%);
   object-fit: cover; /* 保持图片原始比例的同时填满容器 */
-}
+}
+.service-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.service-item-container {
+  flex: 0 0 auto;
+  max-width: 25%; /* 大屏幕每行4个 */
+  margin: 0 8px; /* 添加一些左右间距 */
+}
+
+@media (max-width: 991.98px) {
+  .service-item-container {
+    max-width: 50%; /* 中等屏幕每行2个 */
+  }
+}
+
+@media (max-width: 767.98px) {
+  .service-item-container {
+    max-width: 100%; /* 小屏幕每行1个 */
+  }
+}

views/services.html

@@ -86,63 +86,58 @@ Page Banner Section
     <!--==========================
 Services Section
     ============================-->
-    <section id="services">
-        <div class="container">
-            <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
-                {{range .Serves}}
-                <button type="button" class="btn btn-outline-dark" onclick="location.href='/services/{{.ID}}'">
-                    {{.Title}}
-                </button>
-                {{end}}
-            </div>
+<section id="services">
+    <div class="container">
+        <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
+            {{range .Serves}}
+            <button type="button" class="btn btn-outline-dark" onclick="location.href='/services/{{.ID}}'">
+                {{.Title}}
+            </button>
+            {{end}}
+        </div>
 
-            <!--现在不需要显示冷链验证的具体内容目前冷链验证只是一个分类-->
-            <!--<div class="row" style="margin-top: 10px;">-->
-            <!--    <div class="div2 col-6" style="width: 300px;height: auto">-->
-            <!--        <img src="{{.Serve.Url}}"-->
-            <!--             class="img-fluid" alt="">-->
-            <!--    </div>-->
-            <!--    <div class="div1 col-6">{{.Serve.Detail}}</div>-->
-            <!--</div>-->
-            <div class="container" style="margin-top: 20px">
-                <div class="section-header">
-                    <h2>{{.Serve.Title}}</h2>
-                </div>
-                <div class="row">
-                    {{range .GetService}}
-                    <div class="col-lg-3 col-md-6 mb-4">
-                        <div class="service-item d-flex h-100" style="
-        background-image: url('{{.Image}}');
-        background-size: cover;
-        background-position: center;
-        overflow: hidden;
-        border-radius: 8px;
-        display: flex;
-        justify-content: center; /* 水平居中 */
-        align-items: center; /* 垂直居中 */
-    ">
-                            <div class="service-info acrylic-border p-4" style="
-            position: relative;
-            background-color: rgba(255, 255, 255, 0.2);
-            backdrop-filter: blur(10px);
-            border-radius: 8px;
-            padding: 16px;
-            z-index: 1;
-            width: calc(100% - 32px); /* 确保背景颜色覆盖整个宽度 */
-            box-sizing: border-box; /* 包含padding和border在width内 */
-        ">
-                                <h4 style="color: #0f7dec; text-align: center;">
-                                    <a style="color: rgb(15,125,236) !important;" class="text-decoration-none text-dark"
-                                       href="/services-detail/{{.ID}}">{{.Title}}</a>
-                                </h4>
-                            </div>
+        <div class="container" style="margin-top: 20px">
+            <div class="section-header">
+                <h2>{{.Serve.Title}}</h2>
+            </div>
+            <div class="row service-row" style="display: flex; flex-wrap: wrap; justify-content: center;">
+                {{range .GetService}}
+                <div class="col-lg-3 col-md-6 mb-4 service-item-container">
+                    <div class="service-item d-flex h-100" style="
+                        background-image: url('{{.Image}}');
+                        background-size: cover;
+                        background-position: center;
+                        overflow: hidden;
+                        border-radius: 8px;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    ">
+                        <div class="service-info acrylic-border p-4" style="
+                            position: relative;
+                            background-color: rgba(255, 255, 255, 0.7);
+                            backdrop-filter: blur(10px);
+                            border-radius: 8px;
+                            padding: 16px;
+                            z-index: 1;
+                            width: calc(100% - 32px);
+                            box-sizing: border-box;
+                        ">
+                            <h4 style="color: #0f7dec; text-align: center;">
+                                <a style="color: rgb(0,52,112) !important;" class="text-decoration-none text-dark"
+                                   href="/services-detail/{{.ID}}">{{.Title}}</a>
+                            </h4>
                         </div>
                     </div>
-                    {{end}}
                 </div>
+                {{end}}
             </div>
         </div>
-    </section><!-- #services -->
+    </div>
+</section>
+
+
+    <!-- #services -->
     <!--==========================
 Clients Section
     ============================-->
@@ -215,6 +210,28 @@ Footer
 <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
 <script src="../static/layui/layui.js"></script>
+<script type="text/javascript">
+    document.addEventListener('DOMContentLoaded', function() {
+        const serviceRow = document.querySelector('.service-row');
+        const serviceItems = document.querySelectorAll('.service-item-container');
+
+        function adjustLayout() {
+            const rowWidth = serviceRow.offsetWidth;
+            const itemWidth = serviceItems[0].offsetWidth + 16; // 16 is the margin (8px left + 8px right)
+            const itemsPerRow = Math.floor(rowWidth / itemWidth);
+
+            if (itemsPerRow >= serviceItems.length) {
+                serviceRow.style.justifyContent = 'center';
+            } else {
+                serviceRow.style.justifyContent = 'flex-start';
+            }
+        }
+
+        adjustLayout();
+
+        window.addEventListener('resize', adjustLayout);
+    });
 
+</script>
 </body>
 </html>