From 1d25ea9dd3fb41054dec9a4dde08ec25c30d6726 Mon Sep 17 00:00:00 2001
From: chenhao <852066789@qq.com>
Date: Wed, 17 Sep 2025 11:37:58 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ruoyi-admin):=20=E4=BC=98=E5=8C=96=20U?=
 =?UTF-8?q?NISSENSE=20=E4=BA=91=E7=BB=88=E7=AB=AF=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=92=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 viewport 设置，优化移动端适配- 调整页面布局，增加内容区域样式
- 优化表格样式，实现响应式布局- 添加可点击的电话号码链接
- 调整标题样式
---
 .../system/vendor/vendorQueryStatic.html      | 74 +++++++++++++------
 1 file changed, 50 insertions(+), 24 deletions(-)
diff --git a/ruoyi-admin/src/main/resources/templates/system/vendor/vendorQueryStatic.html b/ruoyi-admin/src/main/resources/templates/system/vendor/vendorQueryStatic.html
index 2695bd7f..486f3bd4 100644
--- a/ruoyi-admin/src/main/resources/templates/system/vendor/vendorQueryStatic.html
+++ b/ruoyi-admin/src/main/resources/templates/system/vendor/vendorQueryStatic.html
@@ -2,15 +2,25 @@
 <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
 <head>
     <th:block th:include="include :: header('UNISSENSE云终端')" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style>
+        html, body {
+            width: 100%;
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden; /* Prevent horizontal scrollbar */
+        }
         body {
             font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 20px;
             background-color: #f9f9f9;
+            -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape mode */
+            text-size-adjust: 100%;
+        }
+        .content-wrapper {
+             padding: 20px;
+             box-sizing: border-box;
         }
         .container {
-            /*width: 100%;*/
             margin: 0;
             padding: 10px 0;
             background-color: white;
@@ -32,7 +42,8 @@
 
         }
         .tableBOx{
-            width:70vw;
+            width:100%;
+            table-layout: fixed;
         }
         label {
             margin-bottom: 0;
@@ -72,7 +83,7 @@
         }
 
        .table-striped {
-            display: flex;justify-content: flex-start;flex-direction: column;align-items: center
+            display: flex;justify-content: flex-start;flex-direction: column;align-items: flex-start
         }
        .table-striped thead{
            background: #f5f5f5 !important;
@@ -82,6 +93,7 @@
         }
         .table-striped tbody td{
             padding: 10px;
+            word-break: break-all;
         }
         .tabBtn{
             display: inline-block;
@@ -94,7 +106,13 @@
             width: 100px;
         }
 
+        .mobile-title { display: none; }
+        .desktop-title { display: inline-block; }
+
         @media (max-width: 768px) {
+            .content-wrapper {
+                padding: 10px;
+            }
             .tableBOx {
                 width: 100%;
             }
@@ -111,36 +129,41 @@
                 flex-direction: column;
                 border-bottom: 1px solid #ddd;
                 margin-bottom: 10px;
+                background-color: #fff;
+                border-radius: 5px;
+                padding: 10px;
+                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
             }
 
             .table-striped tbody td {
                 display: flex;
-                justify-content: space-between;
+                justify-content: flex-start;
                 align-items: center;
-                padding: 20px 10px;
+                padding: 15px 10px;
                 border-bottom: 1px solid #eee;
             }
+            
+            .table-striped tbody tr td:last-child {
+                border-bottom: none;
+            }
 
-            /*.table-striped tbody tr td:first-child {*/
-            /*    font-weight: bold;*/
-            /*    min-width: 100px;*/
-            /*    max-width: 120px;*/
-            /*}*/
-
-            /* 新增样式：为每个 td 添加伪元素来显示表头 */
             .table-striped tbody tr td::before {
                 content: attr(data-th); /* 使用 data-th 属性来显示表头 */
                 font-weight: bold;
                 display: inline-block;
-                min-width: 100px;
-                max-width: 100px;
                 margin-right: 10px;
+                color: #333;
+                width: 90px;
+                flex-shrink: 0;
             }
+
+            .desktop-title { display: none; }
+            .mobile-title { display: inline-block; }
         }
     </style>
 </head>
 <body  class="gray-bg">
-<div class="col-sm-12 select-table table-striped" >
+<div class="col-sm-12 select-table table-striped content-wrapper" >
     <div class="topBox">
         <div class="title">UNISSENSE云终端 </div>
 <!--    <div style="color: #dd242a">H3C产品保修条款</div>-->
@@ -153,22 +176,25 @@
 <!--    <button type="button" onclick="getData()">查询</button>-->
 
 </div>
-    <div style="font-size: 16px;text-align: left;width: 82vw;font-weight: 600;"><blockquote style="border-left-color: #1c84c6">UNISSENSE云终端售后联系方式</blockquote> </div>
-    <div style="width: 82svw;overflow-x: auto">
+    <div style="font-size: 16px;text-align: left;font-weight: 600; margin-bottom: 10px;"><blockquote style="border-left: 5px solid #1c84c6; margin-left: 0; padding-left: 10px; line-height: 1.5;">
+        <span class="desktop-title">UNISSENSE云终端售后联系方式</span>
+        <span class="mobile-title">UNISSENSE云终端<br>售后联系方式</span>
+    </blockquote> </div>
+    <div style="width: 100%;">
     <table class="tableBOx" id="tableBOx">
         <thead>
         <tr>
-            <th style="min-width: 100px">制造商名称</th>
-            <th style="min-width: 100px">产品</th>
-            <th style="min-width: 100px">售后电话</th>
-            <th style="min-width: 100px">邮箱地址</th>
+            <th>制造商名称</th>
+            <th>产品</th>
+            <th>售后电话</th>
+            <th>邮箱地址</th>
         </tr>
         </thead>
         <tbody>
         <tr>
             <td data-th="制造商名称">紫光汇智信息技术有限公司</td>
             <td data-th="产品">UNISSENSE云终端</td>
-            <td data-th="售后电话">19357191658（5*8小时）</td>
+            <td data-th="售后电话"><a th:href="'tel:19357191658'">19357191658</a>（5*8小时）</td>
             <td data-th="邮箱地址">jiachenming@unisinsight.com</td>
         </tr>
         </tbody>
