u

code/container-ocr/ocr-uniapp/test.html

@@ -0,0 +1,84 @@
+<!doctype html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>集装箱录入</title>
+  </head>
+
+  <body class="bg-gray-50 text-gray-900">
+    <!-- Header -->
+    <div class="px-4 pt-6 pb-2">
+      <h1 class="text-xl font-semibold tracking-tight">集装箱录入</h1>
+      <p class="text-sm text-gray-500 mt-1">拍照识别箱号并上传相关图片</p>
+    </div>
+
+    <div class="px-4 pb-28 space-y-6">
+      <!-- 箱号 -->
+      <div class="space-y-2">
+        <label class="text-sm font-medium">集装箱号</label>
+        <input
+          type="text"
+          placeholder="自动识别或手动输入"
+          class="w-full h-11 px-3 rounded-lg border border-gray-200 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+
+      <!-- 主照片 -->
+      <div class="space-y-2">
+        <div class="flex justify-between items-center">
+          <label class="text-sm font-medium">箱号主照片</label>
+          <span class="text-xs text-gray-400">OCR识别</span>
+        </div>
+
+        <div class="bg-white border border-gray-200 rounded-xl p-3">
+          <div class="h-44 rounded-lg bg-gray-100 flex flex-col items-center justify-center text-gray-400">
+            <div class="text-2xl">📷</div>
+            <span class="text-xs mt-2">点击拍照或选择图片</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 其他照片 -->
+      <div class="space-y-2">
+        <label class="text-sm font-medium">其他照片</label>
+
+        <div class="grid grid-cols-3 gap-3">
+          <!-- 图片 -->
+          <div
+            class="aspect-square bg-white border border-gray-200 rounded-lg flex items-center justify-center text-gray-400"
+          >
+            +
+          </div>
+
+          <div
+            class="aspect-square bg-white border border-gray-200 rounded-lg flex items-center justify-center text-gray-400"
+          >
+            +
+          </div>
+
+          <div
+            class="aspect-square bg-white border border-gray-200 rounded-lg flex items-center justify-center text-gray-400"
+          >
+            +
+          </div>
+        </div>
+      </div>
+
+      <!-- 备注 -->
+      <div class="space-y-2">
+        <label class="text-sm font-medium">备注</label>
+        <textarea
+          placeholder="填写补充说明..."
+          class="w-full min-h-[90px] p-3 rounded-lg border border-gray-200 bg-white text-sm resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
+        ></textarea>
+      </div>
+    </div>
+
+    <!-- 底部操作 -->
+    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
+      <button class="w-full h-11 rounded-lg bg-black text-white text-sm font-medium">提交</button>
+    </div>
+  </body>
+</html>