备份

m1.html

@@ -17,6 +17,15 @@
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
   <link rel="shortcut icon" type="image/ico" href="images/logos/bpilogo.ico" />
 
+  <!-- Materialize CSS -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+
+  <!-- Materialize JavaScript -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+
+  <link rel="stylesheet" href="style/css/bootstrap.min.css">
+
+
   <!-- InstanceBeginEditable name="head" -->
   <!-- InstanceEndEditable -->
 
@@ -86,44 +95,47 @@
         <h4 class="light text-lighten-3">IC物料编码生成</h4>
       </div>
     </div>
-    <div class="card col s12 m6 l3">
-      <div class="card-image waves-effect waves-block waves-light">
-        <style>
-          .input-box {
-            display: inline-block;
-            margin-right: 10px;
-            border: 1px solid #ccc;
-            padding: 5px;
-            border-radius: 5px;
-          }
-        </style>
 
-        <div class="input-box">
-          <label for="typeSelect">选择类型：</label>
-          <select id="typeSelect">
-            <option value="control-ic">主控IC</option>
-            <option value="memory-ic">存储IC</option>
-            <option value="power-ic">电源IC</option>
-            <option value="connector-ic">接口IC</option>
-            <option value="other-ic">其他IC</option>
-          </select>
+
+    <div class="container">
+      <div class="row">
+        <div class="col-lg-12">
+          <div class="card">
+            <div class="card-body">
+              <!-- 在这里添加 card 的内容 -->
+              <label for="typeSelect">选择主控类型：</label>
+              <select id="typeSelect" class="browser-default">
+                <option value="control-ic">主控类IC</option>
+                <option value="memory-ic">存储类IC</option>
+                <option value="power-ic">电源类IC</option>
+                <option value="connector-ic">接口类IC</option>
+                <option value="other-ic">其他类IC</option>
+              </select>
+              <div class="form-row">
+                <div class="col">
+                  <label for="valueInput">型号中的系列号：</label>
+                  <input type="text" id="valueInput" class="form-control" placeholder="IC型号中的系列号" onkeydown="handleKeyDown(event)">
+                </div>
+                <div class="col">
+                  <label for="serialInput">流水号：</label>
+                  <input type="text" id="serialInput" class="form-control" placeholder="IC流水号" onkeydown="handleKeyDown(event)">
+                </div>
+              </div>
+              <div class="col">
+                <button onclick="convertValue()" class="btn btn-primary">转换</button>
+              </div>
+              <br><br>
+              <hr class="custom-divider"> <!-- 添加自定义样式的分割线 -->
+              <p id="output">转换结果将在这里显示</p>
+            </div>
+          </div>
         </div>
-        <br><br>
-
-        <div class="input-box">
-          <label for="valueInput">型号中的系列号：</label>
-          <input type="text" id="valueInput" placeholder="IC型号中的系列号" onkeydown="handleKeyDown(event)">
-          <label for="valueInput">流水号：</label>
-          <input type="text" id="valueInput" placeholder="IC流水号" onkeydown="handleKeyDown(event)">
-        </div>
-      </div>
-
-      <div class="card-content">
-
-        <button onclick="convertValue()">转换</button>
-        <p id="output">转换结果将在这里显示</p>
       </div>
     </div>
+    
+    
+    
+    
     <!-- InstanceEndEditable -->
   </div>
   <div id="resistance" class="col s12">
@@ -196,6 +208,28 @@
   <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
   <script src="style/js/materialize.js"></script>
   <script src="style/js/init.js"></script>
+  
+  <script>
+    $(document).ready(function() {
+      $('#valueInput').click(function() {
+        $.ajax({
+          url: 'fetch_data.php', // 替换为服务器端获取数据库数据的 URL
+          type: 'GET',
+          success: function(data) {
+            var options = '';
+            // 解析从服务器返回的数据
+            for (var i = 0; i < data.length; i++) {
+              options += '<option value="' + data[i] + '">' + data[i] + '</option>';
+            }
+            $('#valueInput').html(options); // 将选项添加到下拉列表中
+          },
+          error: function() {
+            alert('无法获取数据。');
+          }
+        });
+      });
+    });
+  </script>
 
 
 </body>

style/css/materialize.css

@@ -5558,7 +5558,7 @@ small {
 
 .tabs {
   position: relative;
-  height: 60px;
+  height: 80px;
   background-color: #fff;
   margin: 0 auto;
   width: 100%;

style/css/style.css

@@ -103,3 +103,6 @@ footer.page-footer {
 .breadcrumb:last-child {
 	color:#ffffff
 }
+.custom-divider {
+  border-top: 1px solid #000000; /* 设置分割线颜色为黑色 */
+}