修改所有界面UI

package.json

@@ -45,6 +45,7 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
+    "@kjgl77/datav-vue3": "^1.7.3",
     "@popperjs/core": "^2.11.8",
     "axios": "^1.2.2",
     "brace-expansion": "^4.0.1",

src/Fingerprint/FingerprintEnroll.vue

@@ -1,157 +1,150 @@
-<!-- 指纹录入 -->
+<!-- 指纹录入 - 智能仓储科技风格 -->
 <template>
-  <div class="fingerprint-wrapper">
-    <PageHeader :show-back="true" :is-go-home="false" :is-custom-back="true" @back="handleBack" />
-    <div class="fingerprint-page">
-      <div class="fingerprint-content">
-        <!-- 步骤内容 -->
-        <div class="step-container">
-          <!-- 第一步输入账号 -->
-          <div v-if="currentStep === 1" class="step-card step-one">
-            <div class="card-header">
-              <div class="step-icon">
-                <i class="icon-user">👤</i>
-              </div>
-              <div>
-                <h2 class="step-title">身份验证</h2>
-                <p class="step-desc">请输入登录账号进行身份验证</p>
-              </div>
+  <div class="fingerprint-page">
+    <!-- 背景层 -->
+    <div class="bg-layer" :style="{ backgroundImage: `url(${bgImg})` }" />
+
+    <!-- 顶部标题区域 -->
+    <div class="header-section">
+      <button class="back-btn" @click="handleBack">
+        <i class="fas fa-arrow-left" />
+        <span>返回</span>
+      </button>
+      <h1 class="page-title">指纹录入</h1>
+    </div>
+
+    <!-- 主内容区域 -->
+    <main class="main-content">
+      <!-- 步骤内容 -->
+      <div class="step-container">
+        <!-- 第一步输入账号 -->
+        <div v-if="currentStep === 1" class="step-card">
+          <div class="card-header">
+            <div class="step-icon">
+              <i class="fas fa-user" />
+            </div>
+            <div>
+              <h2 class="step-title">身份验证</h2>
+              <p class="step-desc">请输入登录账号进行身份验证</p>
             </div>
+          </div>
 
-            <div class="input-section">
-              <div class="input-wrapper">
-                <van-cell-group inset style="padding: 10px 0 20px;">
-                  <van-field v-model="jobNo" size="large" :border="true" label="登录账号:" placeholder="请输入登录账号" />
-                </van-cell-group>
-              </div>
+          <div class="input-section">
+            <div class="input-wrapper">
+              <label class="input-label">登录账号</label>
+              <input
+                v-model="jobNo"
+                type="text"
+                placeholder="请输入登录账号"
+                class="dark-input"
+                @keyup.enter="handleNextStep"
+              />
+            </div>
 
-              <van-button
-                type="primary" size="large" class="next-button" :loading="checking" loading-text="验证中..." block
-                @click="handleNextStep"
-              >
-                验证并继续
-              </van-button>
+            <button
+              class="submit-btn"
+              :disabled="checking"
+              @click="handleNextStep"
+            >
+              {{ checking ? '验证中...' : '验证并继续' }}
+            </button>
+          </div>
+        </div>
+
+        <!-- 第二步 指纹录入 -->
+        <div v-else class="step-card step-two">
+          <!-- 设备状态 - 右上角 -->
+          <div class="device-status-top" @click="handleDeviceClick">
+            <div class="status-indicator" :class="{ connected: isConnected }">
+              <div class="status-dot" />
+              <span class="status-text">
+                {{ isConnected ? '设备已连接' : '设备未连接' }}
+              </span>
             </div>
           </div>
 
-          <!-- 第二部 指纹录入 -->
-          <div v-else class="step-card step-two">
-            <!-- 设备状态 - 右上角 -->
-            <div class="device-status-top" @click="handleDeviceClick">
-              <div class="status-indicator" :class="{ connected: isConnected }">
-                <div class="status-dot" />
-                <span class="status-text">
-                  {{ isConnected ? '设备已连接' : '设备未连接' }}
-                </span>
-              </div>
+          <div class="card-header">
+            <div class="step-icon fingerprint-step">
+              <i class="fas fa-fingerprint" />
             </div>
+            <div class="header-content">
+              <h2 class="step-title">指纹录入</h2>
+              <p class="step-desc">
+                登录账号：<span class="job-highlight">{{ jobNo }}</span>
+              </p>
+            </div>
+          </div>
 
-            <div class="card-header">
-              <div class="step-icon">
-                <i class="icon-fingerprint">👆</i>
+          <div class="fingerprint-section">
+            <!-- 指纹扫描器 -->
+            <div class="fingerprint-display">
+              <div class="fingerprint-scanner" :class="{ active: isConnected, scanning: isScanning }">
+                <!-- 外圈光环 -->
+                <div class="scanner-ring ring-1" />
+                <div class="scanner-ring ring-2" />
+                <div class="scanner-ring ring-3" />
+                
+                <!-- 指纹图标 -->
+                <svg class="fingerprint-icon" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+                  <ellipse cx="100" cy="100" rx="85" ry="90" fill="none" stroke="currentColor" stroke-width="2" opacity="0.3" />
+                  <ellipse cx="100" cy="100" rx="75" ry="80" fill="none" stroke="currentColor" stroke-width="2" opacity="0.4" />
+                  <ellipse cx="100" cy="100" rx="65" ry="70" fill="none" stroke="currentColor" stroke-width="2" opacity="0.5" />
+                  <path
+                    d="M100 30 C130 30, 150 50, 150 80 C150 110, 130 130, 100 130 C70 130, 50 110, 50 80 C50 50, 70 30, 100 30"
+                    fill="none" stroke="currentColor" stroke-width="2.5" opacity="0.6"
+                  />
+                  <path
+                    d="M100 40 C120 40, 135 55, 135 75 C135 95, 120 110, 100 110 C80 110, 65 95, 65 75 C65 55, 80 40, 100 40"
+                    fill="none" stroke="currentColor" stroke-width="2.5" opacity="0.7"
+                  />
+                  <path
+                    d="M100 50 C110 50, 120 60, 120 70 C120 80, 110 90, 100 90 C90 90, 80 80, 80 70 C80 60, 90 50, 100 50"
+                    fill="none" stroke="currentColor" stroke-width="2.5" opacity="0.8"
+                  />
+                  <path d="M60 60 Q100 40, 140 60" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.6" />
+                  <path d="M65 70 Q100 50, 135 70" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.6" />
+                  <path d="M70 80 Q100 60, 130 80" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.6" />
+                  <path d="M75 90 Q100 70, 125 90" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.6" />
+                  <path d="M80 100 Q100 80, 120 100" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.6" />
+                  <circle cx="100" cy="75" r="8" fill="none" stroke="currentColor" stroke-width="2" opacity="0.8" />
+                  <circle cx="100" cy="75" r="4" fill="currentColor" opacity="0.6" />
+                </svg>
+
+                <!-- 扫描动画线 -->
+                <div v-if="isScanning" class="scan-line" />
               </div>
-              <div class="header-content">
-                <h2 class="step-title">指纹录入</h2>
-                <p class="step-desc">
-                  登录账号：<span class="job-highlight">{{ jobNo }}</span>
-                  <!-- <a-button type="link" size="small" class="edit-link" @click="backToStepOne">
-                    返回
-                  </a-button> -->
-                </p>
+
+              <div class="instruction-text">
+                {{ isConnected ? statusText : '请先连接指纹设备' }}
               </div>
             </div>
 
-            <div class="fingerprint-section">
-              <!-- 指纹 -->
-              <div class="fingerprint-display">
-                <div class="fingerprint-scanner" :class="{ active: isConnected, scanning: isScanning }">
-                  <div class="scanner-glow" />
-                  <svg class="fingerprint-icon" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-                    <!-- 外侧指纹脊线 -->
-                    <ellipse
-                      cx="100" cy="100" rx="85" ry="90" fill="none" stroke="currentColor" stroke-width="2"
-                      opacity="0.3"
-                    />
-                    <ellipse
-                      cx="100" cy="100" rx="75" ry="80" fill="none" stroke="currentColor" stroke-width="2"
-                      opacity="0.4"
-                    />
-                    <ellipse
-                      cx="100" cy="100" rx="65" ry="70" fill="none" stroke="currentColor" stroke-width="2"
-                      opacity="0.5"
-                    />
-
-                    <!-- 内侧指纹脊线 -->
-                    <path
-                      d="M100 30 C130 30, 150 50, 150 80 C150 110, 130 130, 100 130 C70 130, 50 110, 50 80 C50 50, 70 30, 100 30"
-                      fill="none" stroke="currentColor" stroke-width="2.5" opacity="0.6"
-                    />
-                    <path
-                      d="M100 40 C120 40, 135 55, 135 75 C135 95, 120 110, 100 110 C80 110, 65 95, 65 75 C65 55, 80 40, 100 40"
-                      fill="none" stroke="currentColor" stroke-width="2.5" opacity="0.7"
-                    />
-                    <path
-                      d="M100 50 C110 50, 120 60, 120 70 C120 80, 110 90, 100 90 C90 90, 80 80, 80 70 C80 60, 90 50, 100 50"
-                      fill="none" stroke="currentColor" stroke-width="2.5" opacity="0.8"
-                    />
-
-                    <!-- 指纹脊线 -->
-                    <path
-                      d="M60 60 Q100 40, 140 60" fill="none" stroke="currentColor" stroke-width="1.5"
-                      opacity="0.6"
-                    />
-                    <path
-                      d="M65 70 Q100 50, 135 70" fill="none" stroke="currentColor" stroke-width="1.5"
-                      opacity="0.6"
-                    />
-                    <path
-                      d="M70 80 Q100 60, 130 80" fill="none" stroke="currentColor" stroke-width="1.5"
-                      opacity="0.6"
-                    />
-                    <path
-                      d="M75 90 Q100 70, 125 90" fill="none" stroke="currentColor" stroke-width="1.5"
-                      opacity="0.6"
-                    />
-                    <path
-                      d="M80 100 Q100 80, 120 100" fill="none" stroke="currentColor" stroke-width="1.5"
-                      opacity="0.6"
-                    />
-
-                    <!-- 中央螺旋纹 -->
-                    <circle cx="100" cy="75" r="8" fill="none" stroke="currentColor" stroke-width="2" opacity="0.8" />
-                    <circle cx="100" cy="75" r="4" fill="currentColor" opacity="0.6" />
-                  </svg>
-
-                  <!-- 扫描动画覆盖层 -->
-                  <div v-if="isScanning" class="scan-line" />
-                </div>
-
-                <div class="instruction-text">
-                  {{ isConnected ? statusText : '请先连接指纹设备' }}
-                </div>
-              </div>
+            <!-- 操作按钮 -->
+            <div class="action-section">
+              <button
+                class="submit-btn enroll-btn"
+                :disabled="!isConnected || isScanning"
+                @click="handleEnroll"
+              >
+                {{ isScanning ? '正在录入中...' : '指纹录入' }}
+              </button>
 
-              <!-- Action Buttons -->
-              <div class="action-section">
-                <van-button
-                  type="primary" size="large" class="enroll-button btn" :disabled="!isConnected"
-                  :loading="isScanning" loading-text="正在录入中..." block
-                  @click="handleEnroll"
-                >
-                  指纹录入
-                </van-button>
-
-                <van-button size="large" class="reset-button btn" :disabled="!isConnected" block @click="handleReEnroll">
-                  重新录入
-                </van-button>
-                <!-- <van-button size="large" class="reset-button" block @click="handleDisableConnect">
-                  断开连接
-                </van-button> -->
-              </div>
+              <button
+                class="reset-btn"
+                :disabled="!isConnected"
+                @click="handleReEnroll"
+              >
+                重新录入
+              </button>
             </div>
           </div>
         </div>
       </div>
+    </main>
+
+    <!-- Loading -->
+    <div v-if="checking" class="loading-overlay">
+      <div class="loading-spinner" />
     </div>
   </div>
 </template>
@@ -159,10 +152,12 @@
 <script setup>
 import { useRouter } from 'vue-router';
 import { showToast, showFailToast } from 'vant';
-import PageHeader from '../common/PageHeader.vue';
 import { ref, onMounted, onUnmounted } from 'vue';
 import { checkEmployeeByJobNo } from '../api/fingerprint.js';
 
+// 图片资源
+import bgImg from '../assets/images/bj.png';
+
 const router = useRouter();
 
 const currentStep = ref(1);
@@ -338,225 +333,247 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-/* 全局重置 - 防止出现滚动条 */
-* {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  overflow: hidden !important;
-  height: 100vh !important;
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-/* 基础布局 */
-.fingerprint-wrapper {
+/* ========== 基础样式 ========== */
+.fingerprint-page {
+  width: 100%;
   height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background: #f8fafc;
+  max-height: 100vh;
   position: relative;
+  font-family: 'Microsoft YaHei', sans-serif;
+  color: #fff;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
-.fingerprint-wrapper::before {
-  content: '';
-  position: absolute;
+/* 背景层 */
+.bg-layer {
+  position: fixed;
   top: 0;
   left: 0;
-  right: 0;
-  bottom: 0;
-  background:
-    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
-    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
-  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  background-color: #041c3d;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  z-index: 0;
 }
 
-.fingerprint-page {
-  flex: 1;
+/* ========== 顶部标题区域 ========== */
+.header-section {
+  position: relative;
+  width: 100%;
+  padding: 20px 30px;
+  box-sizing: border-box;
+  z-index: 10;
   display: flex;
-  align-items: stretch;
+  align-items: center;
   justify-content: center;
-  padding: 0.5rem;
-  position: relative;
-  z-index: 1;
-  overflow: hidden;
+  flex-shrink: 0;
 }
 
-.fingerprint-content {
-  width: 100%;
+.back-btn {
+  position: absolute;
+  left: 30px;
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
-  align-items: stretch;
-  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  background: linear-gradient(90deg, #1a4a7a 0%, #0d3a6a 100%);
+  border: 1px solid #2a7fff;
+  border-radius: 8px;
+  padding: 10px 20px;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.back-btn:hover {
+  background: linear-gradient(90deg, #2a5a8a 0%, #1d4a7a 100%);
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.4);
+}
+
+.back-btn i {
+  font-size: 18px;
+  color: #00bfff;
+}
+
+.page-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #ffffff;
+  letter-spacing: 2px;
+  margin: 0;
+  text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
+}
+
+/* ========== 主内容区域 ========== */
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 30px;
+  position: relative;
+  z-index: 10;
+  min-height: 0;
   overflow: hidden;
+  flex: 1;
 }
 
-/* 步骤卡片 */
+/* 步骤容器 */
 .step-container {
-  display: flex;
-  justify-content: center;
-  align-items: stretch;
   width: 100%;
   flex: 1;
+  display: flex;
 }
 
+/* 步骤卡片 */
 .step-card {
   width: 100%;
-  background: white;
-  border-radius: 12px;
-  padding: clamp(1.5rem, 3vh, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  background: rgba(9, 61, 140, 0.6);
+  border: 1px solid #049FD8;
+  border-radius: 16px;
+  padding: 50px 40px;
+  position: relative;
+  box-shadow: 0 0 30px rgba(4, 159, 216, 0.2);
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  overflow: hidden;
-}
-
-/* 第一步 - 使卡片更大更居中 */
-.step-one {
-  min-height: auto;
+  flex: 1;
 }
 
-/* 第二步 - 防止过度填充，添加适当的间距 */
-.step-two {
-  min-height: auto;
+.step-two .fingerprint-section {
+  flex: 1;
 }
 
+/* 卡片头部 */
 .card-header {
   display: flex;
   align-items: center;
-  gap: clamp(0.5rem, 2vw, 1rem);
-  margin-bottom: clamp(0.5rem, 2vh, 1rem);
-  flex-shrink: 0;
+  gap: 20px;
+  margin-bottom: 30px;
 }
 
 .step-icon {
-  width: clamp(2.5rem, 6vw, 4rem);
-  height: clamp(2.5rem, 6vw, 4rem);
+  width: 70px;
+  height: 70px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #667eea, #764ba2);
+  background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: clamp(1rem, 3vw, 1.8rem);
-  color: white;
+  font-size: 30px;
+  color: #fff;
   flex-shrink: 0;
+  box-shadow: 0 0 20px rgba(0, 191, 255, 0.4);
+}
+
+.step-icon.fingerprint-step {
+  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
+  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
 }
 
 .step-title {
-  font-size: clamp(1.2rem, 4vw, 2rem);
-  font-weight: 700;
-  color: #1f2937;
-  margin-bottom: clamp(0.25rem, 1vh, 0.5rem);
+  font-size: 32px;
+  font-weight: bold;
+  color: #fff;
+  margin: 0 0 10px 0;
 }
 
 .step-desc {
-  font-size: clamp(0.9rem, 2.5vw, 1.2rem);
-  color: #6b7280;
-  line-height: 1.5;
+  font-size: 22px;
+  color: #7ec8ff;
+  margin: 0;
 }
 
-/* 第一步样式 */
-.input-section {
-  display: flex;
-  flex-direction: column;
-  gap: clamp(1.2rem, 3.5vh, 2.5rem);
+.header-content {
   flex: 1;
-  justify-content: flex-start;
-  padding-top: clamp(2rem, 4vh, 3rem);
-  min-height: 0;
-  max-width: 100%;
 }
 
-.input-wrapper {
-  position: relative;
+.job-highlight {
+  color: #00bfff;
+  font-weight: bold;
+  background: rgba(0, 191, 255, 0.2);
+  padding: 4px 12px;
+  border-radius: 6px;
 }
 
-.job-input {
-  height: clamp(3.5rem, 8vh, 5rem);
-  font-size: clamp(1rem, 2.5vw, 1.3rem);
-  border-radius: clamp(8px, 1.5vw, 12px);
-  border: 2px solid #e5e7eb;
-  transition: all 0.3s ease;
+/* ========== 输入区域 ========== */
+.input-section {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  flex: 1;
+  justify-content: center;
 }
 
-.job-input:focus {
-  border-color: #667eea;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
 }
 
-.input-icon {
-  position: absolute;
-  right: 1rem;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 1.2rem;
-  color: #9ca3af;
+.input-label {
+  font-size: 24px;
+  color: #7ec8ff;
+  font-weight: 500;
 }
 
-.next-button {
-  height: clamp(3.5rem, 8vh, 5rem);
-  font-size: clamp(1rem, 2.5vw, 1.3rem);
-  font-weight: 600;
-  background: linear-gradient(135deg, #667eea, #764ba2);
-  border: none;
-  border-radius: clamp(8px, 1.5vw, 12px);
-  transition: all 0.3s ease;
+.dark-input {
+  width: 100%;
+  padding: 24px 30px;
+  background: rgba(13, 58, 106, 0.8);
+  border: 2px solid #2a7fff;
+  border-radius: 12px;
+  color: #fff;
+  font-size: 28px;
+  outline: none;
+  transition: all 0.3s;
 }
 
-.next-button:hover {
-  background: linear-gradient(135deg, #5a67d8, #6b46c1);
-  transform: translateY(-1px);
-  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
+.dark-input::placeholder {
+  color: #7ec8ff;
+  opacity: 0.7;
 }
 
-/* 第二步样式 */
-.header-content {
-  flex: 1;
+.dark-input:focus {
+  border-color: #00bfff;
+  box-shadow: 0 0 15px rgba(0, 191, 255, 0.3);
 }
 
-.job-highlight {
-  color: #667eea;
-  font-weight: 700;
-  background: rgba(102, 126, 234, 0.1);
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  border-radius: 6px;
+/* 提交按钮 - 大按钮防误触 */
+.submit-btn {
+  width: 100%;
+  padding: 28px 0;
+  background: linear-gradient(90deg, #1e90ff 0%, #00bfff 100%);
+  border: none;
+  border-radius: 12px;
+  font-size: 28px;
+  font-weight: bold;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.3s;
+  letter-spacing: 4px;
+  min-height: 80px;
 }
 
-.edit-link {
-  color: #667eea;
-  font-weight: 600;
-  margin-left: 0.5rem;
+.submit-btn:hover:not(:disabled) {
+  box-shadow: 0 0 25px rgba(30, 144, 255, 0.6);
+  transform: translateY(-2px);
 }
 
-.fingerprint-section {
-  display: flex;
-  flex-direction: column;
-  gap: clamp(0.75rem, 2vh, 1.25rem);
-  flex: 1;
-  justify-content: center;
-  align-items: center;
-  min-height: 0;
-}
-
-/* 设备状态 */
-.device-status {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 20px;
-  cursor: pointer;
+.submit-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
+/* ========== 设备状态 ========== */
 .device-status-top {
   position: absolute;
-  top: clamp(1rem, 2vh, 1.5rem);
-  right: clamp(1rem, 2vw, 1.5rem);
+  top: 20px;
+  right: 20px;
   cursor: pointer;
   z-index: 10;
 }
@@ -564,393 +581,334 @@ body {
 .status-indicator {
   display: flex;
   align-items: center;
-  gap: 0.8rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  padding-left: 1.8rem;
-  padding-right: 1.8rem;
-  border-radius: 50px;
-  background: rgba(239, 68, 68, 0.1);
-  color: #dc2626;
-  font-weight: 700;
-  transition: all 0.3s ease;
-  font-size: 1.5rem;
+  gap: 12px;
+  padding: 14px 28px;
+  border-radius: 30px;
+  background: rgba(239, 68, 68, 0.2);
+  border: 1px solid #ef4444;
+  color: #f87171;
+  font-weight: 600;
+  font-size: 20px;
+  transition: all 0.3s;
 }
 
 .status-indicator.connected {
-  background: rgba(16, 185, 129, 0.1);
-  color: #059669;
+  background: rgba(16, 185, 129, 0.2);
+  border-color: #10b981;
+  color: #34d399;
 }
 
 .status-dot {
-  width: 12px;
-  height: 12px;
+  width: 10px;
+  height: 10px;
   border-radius: 50%;
   background: currentColor;
   animation: pulse 2s infinite;
 }
 
 @keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.6; transform: scale(0.9); }
+}
 
-  0%,
-  100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0.5;
-  }
+/* ========== 指纹区域 ========== */
+.fingerprint-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 40px;
+  flex: 1;
 }
 
-/* 指纹显示 */
 .fingerprint-display {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 1.5rem;
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-  margin-left: 0;
-  margin-right: 0;
+  gap: 30px;
 }
 
+/* 指纹扫描器 - 科技感设计 */
 .fingerprint-scanner {
   position: relative;
-  width: clamp(160px, 28vw, 230px);
-  height: clamp(160px, 28vw, 230px);
+  width: 280px;
+  height: 280px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
+  background: rgba(5, 30, 60, 0.8);
   display: flex;
   align-items: center;
   justify-content: center;
-  border: clamp(2px, 0.5vw, 4px) solid #e5e7eb;
   transition: all 0.3s ease;
-  overflow: hidden;
 }
 
-.fingerprint-scanner.active {
-  border-color: #667eea;
-  background: linear-gradient(135deg, #f0f4ff, #e0e7ff);
+/* 扫描器外圈光环 */
+.scanner-ring {
+  position: absolute;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  transition: all 0.3s;
 }
 
-.fingerprint-scanner.scanning {
-  animation: scannerPulse 2s infinite;
+.ring-1 {
+  width: 100%;
+  height: 100%;
+  border-color: rgba(30, 144, 255, 0.3);
 }
 
-@keyframes scannerPulse {
-
-  0%,
-  100% {
-    transform: scale(1);
-    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4);
-  }
+.ring-2 {
+  width: 115%;
+  height: 115%;
+  border-color: rgba(30, 144, 255, 0.2);
+}
 
-  50% {
-    transform: scale(1.05);
-    box-shadow: 0 0 0 20px rgba(102, 126, 234, 0);
-  }
+.ring-3 {
+  width: 130%;
+  height: 130%;
+  border-color: rgba(30, 144, 255, 0.1);
 }
 
-.scanner-glow {
-  position: absolute;
-  inset: -10px;
-  border-radius: 50%;
-  background: radial-gradient(circle, rgba(102, 126, 234, 0.2) 0%, transparent 70%);
-  opacity: 0;
-  transition: opacity 0.3s ease;
+.fingerprint-scanner.active .ring-1 {
+  border-color: rgba(0, 191, 255, 0.6);
+  box-shadow: 0 0 15px rgba(0, 191, 255, 0.3);
 }
 
-.fingerprint-scanner.active .scanner-glow {
-  opacity: 1;
+.fingerprint-scanner.active .ring-2 {
+  border-color: rgba(0, 191, 255, 0.4);
+  animation: ringPulse 2s infinite 0.2s;
 }
 
-.fingerprint-icon {
-  width: clamp(110px, 20vw, 160px);
-  height: clamp(110px, 20vw, 160px);
-  color: #9ca3af;
-  transition: color 0.3s ease;
+.fingerprint-scanner.active .ring-3 {
+  border-color: rgba(0, 191, 255, 0.2);
+  animation: ringPulse 2s infinite 0.4s;
 }
 
-.fingerprint-scanner.active .fingerprint-icon {
-  color: #667eea;
+@keyframes ringPulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.05); opacity: 0.7; }
 }
 
-.scan-line {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: linear-gradient(90deg, transparent, #667eea, transparent);
-  animation: scanning 2s linear infinite;
+.fingerprint-scanner.scanning {
+  animation: scannerGlow 1.5s infinite;
 }
 
-@keyframes scanning {
-  0% {
-    transform: translateY(0);
-  }
+@keyframes scannerGlow {
+  0%, 100% { box-shadow: 0 0 20px rgba(0, 191, 255, 0.3); }
+  50% { box-shadow: 0 0 40px rgba(0, 191, 255, 0.6); }
+}
 
-  100% {
-    transform: translateY(var(--scanner-size, 220px));
-  }
+.fingerprint-icon {
+  width: 180px;
+  height: 180px;
+  color: #5a8cba;
+  transition: color 0.3s ease;
+  z-index: 1;
 }
 
-/* 动态扫描动画 */
-.fingerprint-scanner {
-  --scanner-size: clamp(150px, 28vw, 220px);
+.fingerprint-scanner.active .fingerprint-icon {
+  color: #00bfff;
 }
 
-/* 横屏扫描动画 */
-@media (orientation: landscape) {
-  .fingerprint-scanner {
-    --scanner-size: clamp(160px, 28vw, 220px);
-  }
+/* 扫描线 */
+.scan-line {
+  position: absolute;
+  top: 10%;
+  left: 10%;
+  right: 10%;
+  height: 3px;
+  background: linear-gradient(90deg, transparent, #00bfff, transparent);
+  border-radius: 2px;
+  animation: scanMove 2s linear infinite;
+  box-shadow: 0 0 10px #00bfff;
 }
 
-/* 竖屏大屏幕扫描动画 */
-@media (orientation: portrait) and (min-width: 768px) {
-  .fingerprint-scanner {
-    --scanner-size: clamp(170px, 28vw, 220px);
-  }
+@keyframes scanMove {
+  0% { top: 10%; }
+  100% { top: 85%; }
 }
 
+/* 指示文字 */
 .instruction-text {
-  font-size: 2rem;
-  color: #6b7280;
+  font-size: 26px;
+  color: #7ec8ff;
   text-align: center;
-  font-weight: 700;
-  max-width: clamp(250px, 50vw, 400px);
+  font-weight: 600;
+  max-width: 600px;
   line-height: 1.6;
-  margin-top: 15px;
-  margin-bottom: 15px;
-  margin-left: 0;
-  margin-right: 0;
 }
 
-/* 按钮 */
+/* ========== 操作按钮 ========== */
 .action-section {
   display: flex;
   flex-direction: column;
-  gap: clamp(0.6rem, 1.5vh, 0.9rem);
-  flex-shrink: 0;
+  gap: 20px;
   width: 100%;
+  max-width: 600px;
 }
 
-.enroll-button {
-  height: clamp(3.5rem, 8vh, 5rem);
-  font-size: 2rem;
-  font-weight: 600;
-  background: linear-gradient(135deg, #667eea, #764ba2);
-  border: none;
-  border-radius: clamp(8px, 1.5vw, 12px);
-  transition: all 0.3s ease;
-  color: #fff;
+.enroll-btn {
+  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
 }
 
-.enroll-button:hover:not(:disabled) {
-  background: linear-gradient(135deg, #5a67d8, #6b46c1);
-  transform: translateY(-1px);
-  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
+.enroll-btn:hover:not(:disabled) {
+  box-shadow: 0 0 25px rgba(16, 185, 129, 0.6);
 }
 
-.reset-button {
-  height: clamp(2.75rem, 5vh, 3.5rem);
-  font-size: 2rem;
+.reset-btn {
+  width: 100%;
+  padding: 24px 0;
+  background: transparent;
+  border: 2px solid #2a7fff;
+  border-radius: 12px;
+  font-size: 24px;
   font-weight: 500;
-  background: white;
-  border: 2px solid #e5e7eb;
-  border-radius: clamp(8px, 1.5vw, 12px);
-  color: #6b7280;
-  transition: all 0.3s ease;
+  color: #7ec8ff;
+  cursor: pointer;
+  transition: all 0.3s;
+  min-height: 70px;
+}
+
+.reset-btn:hover:not(:disabled) {
+  background: rgba(42, 127, 255, 0.2);
+  border-color: #00bfff;
+  color: #fff;
+}
+
+.reset-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ========== Loading 遮罩 ========== */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(4, 28, 61, 0.8);
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
-  padding:2rem 0;
+  z-index: 1000;
 }
 
-.reset-button:hover:not(:disabled) {
-  border-color: #667eea;
-  color: #667eea;
-  background: rgba(102, 126, 234, 0.05);
+.loading-spinner {
+  width: 60px;
+  height: 60px;
+  border: 4px solid rgba(30, 144, 255, 0.3);
+  border-top-color: #00bfff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
 }
 
-.button-icon {
-  font-size: 1.2rem;
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }
 
-/* 横屏优化 */
-@media (orientation: landscape) {
-  .input-section {
-    gap: clamp(1.5rem, 4vh, 2.5rem);
+/* ========== 响应式 - 横屏 ========== */
+@media screen and (orientation: landscape) {
+  .header-section {
+    padding: 10px 20px;
   }
 
-  .job-input {
-    height: clamp(3.5rem, 7vh, 4.5rem);
+  .page-title {
+    font-size: 22px;
   }
 
-  .next-button {
-    height: clamp(3.5rem, 7vh, 4.5rem);
+  .back-btn {
+    padding: 8px 16px;
+    font-size: 14px;
+    left: 20px;
   }
 
-  .fingerprint-scanner {
-    width: clamp(160px, 28vw, 220px);
-    height: clamp(160px, 28vw, 220px);
+  .main-content {
+    padding: 10px 20px;
   }
 
-  .fingerprint-icon {
-    width: clamp(120px, 20vw, 160px);
-    height: clamp(120px, 20vw, 160px);
+  .step-card {
+    padding: 20px 30px;
   }
-}
 
-/* 竖屏优化 - 内容略微升高 */
-@media (orientation: portrait) {
-  .input-section {
-    gap: clamp(1.5rem, 4vh, 3rem);
+  .step-container {
+    max-width: 100%;
   }
 
-  .fingerprint-scanner {
-    width: clamp(150px, 28vw, 220px);
-    height: clamp(150px, 28vw, 220px);
+  .card-header {
+    margin-bottom: 15px;
   }
 
-  .fingerprint-icon {
-    width: clamp(110px, 20vw, 160px);
-    height: clamp(110px, 20vw, 160px);
+  .step-icon {
+    width: 50px;
+    height: 50px;
+    font-size: 22px;
   }
-}
 
-/* 竖屏大屏幕优化 */
-@media (orientation: portrait) and (min-width: 768px) and (min-height: 1000px) {
-  .input-section {
-    gap: clamp(2rem, 5vh, 3.5rem);
+  .step-title {
+    font-size: 22px;
   }
 
-  .fingerprint-scanner {
-    width: clamp(170px, 30vw, 240px);
-    height: clamp(170px, 30vw, 240px);
+  .step-desc {
+    font-size: 16px;
   }
 
-  .fingerprint-icon {
-    width: clamp(120px, 22vw, 170px);
-    height: clamp(120px, 22vw, 170px);
+  .input-label {
+    font-size: 18px;
   }
-}
 
-/* 针对1080*1920分辨率优化 */
-@media (min-width: 1080px) and (max-width: 1080px) and (min-height: 1920px) and (max-height: 1920px) {
-  .fingerprint-section {
-    justify-content: flex-start;
-    padding-top: 2rem;
+  .dark-input {
+    padding: 14px 20px;
+    font-size: 18px;
   }
 
-  .card-header {
-    margin-bottom: 1rem;
+  .fingerprint-section {
+    flex-direction: row;
+    justify-content: center;
+    gap: 60px;
   }
 
-  .device-status {
-    margin-bottom: 1rem;
+  .fingerprint-scanner {
+    width: 180px;
+    height: 180px;
   }
 
-  .fingerprint-display {
-    margin-top: 0;
+  .fingerprint-icon {
+    width: 120px;
+    height: 120px;
   }
-}
 
-/* 可访问性 */
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
+  .instruction-text {
+    font-size: 22px;
+    max-width: 300px;
   }
-}
 
-/* 深色模式支持 */
-@media (prefers-color-scheme: dark) {
-  .step-card {
-    background: #374151;
-    border-color: #4b5563;
+  .action-section {
+    max-width: 350px;
   }
 
-  .step-title {
-    color: #f9fafb;
+  .submit-btn {
+    padding: 16px 0;
+    font-size: 18px;
+    min-height: 60px;
   }
 
-  .step-desc {
-    color: #d1d5db;
+  .reset-btn {
+    padding: 14px 0;
+    font-size: 16px;
+    min-height: 50px;
   }
 
-  .instruction-text {
-    color: #d1d5db;
+  .input-section {
+    gap: 20px;
   }
-}
-
-.btn {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-:deep(.van-field) {
-  border: 1px solid #ccc;
-  border-radius: 6px;
-}
-
-/* vant 按钮样式覆盖 */
-:deep(.van-button--block) {
-  display: block;
-  width: 100%;
-}
-
-:deep(.van-button__content) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
 
-/* 验证按钮样式 */
-.next-button:deep(.van-button) {
-  height: clamp(3.5rem, 8vh, 5rem);
-  background: linear-gradient(135deg, #667eea, #764ba2);
-  border: none;
-  padding: 0 1.5rem;
-}
-
-.next-button:deep(.van-button):active {
-  background: linear-gradient(135deg, #5a67d8, #6b46c1);
-}
-
-/* 指纹录入按钮样式 */
-.enroll-button:deep(.van-button) {
-  height: clamp(3.5rem, 8vh, 5rem);
-  background: linear-gradient(135deg, #667eea, #764ba2);
-  border: none;
-  padding: 0 1.5rem;
-}
-
-.enroll-button:deep(.van-button):active {
-  background: linear-gradient(135deg, #5a67d8, #6b46c1);
-}
-
-/* 重新录入按钮样式 */
-.reset-button:deep(.van-button) {
-  height: clamp(2.75rem, 5vh, 3.5rem);
-  background: white;
-  border: 2px solid #e5e7eb !important;
-  color: #6b7280;
-  padding: 0 1.5rem;
-}
-
-.reset-button:deep(.van-button):active {
-  border-color: #667eea !important;
-  color: #667eea;
-  background: rgba(102, 126, 234, 0.05);
-}
+  .status-indicator {
+    padding: 10px 18px;
+    font-size: 14px;
+  }
 
-.reset-button:deep(.van-button--disabled) {
-  opacity: 0.5;
+  .device-status-top {
+    top: 15px;
+    right: 15px;
+  }
 }
 </style>

src/agv-process/DeliveryManagement.vue

@@ -1,71 +1,86 @@
-<!-- 取料区管理 -->
+<!-- 取料区管理 - 深色科技风格 -->
 <template>
-  <div class="page-container">
-    <!-- 顶部信息栏 -->
-    <PageHeader title="取料区管理" />
+  <div class="delivery-page">
+    <!-- 背景层 -->
+    <div class="bg-layer" :style="{ backgroundImage: `url(${bgImg})` }" />
+
+    <!-- 顶部标题区域 -->
+    <div class="header-section">
+      <button class="back-btn" @click="$router.push('/home')">
+        <i class="fas fa-arrow-left" />
+        <span>返回</span>
+      </button>
+      <h1 class="page-title">取料区管理</h1>
+    </div>
 
     <!-- 主内容区域 -->
     <main class="main-content">
-      <div class="stations-container">
-        <div class="stations-grid">
-          <div
-            v-for="station in stations" :key="station.positionNo" class="station-card"
-            :class="{ 'station-occupied': station.positionStatus === '占用', 'station-idle': station.positionStatus === '空闲中' }"
-            @click="openStation(station)"
-          >
-            <div class="card-header">
-              <div class="card-title">{{ station.positionName }}</div>
-              <van-tag v-if="station.positionStatus === '空闲中'" class="card-status" type="success">
-                {{ station.positionStatus }}
-              </van-tag>
-              <van-tag v-if="station.positionStatus === '已占用'" class="card-status" type="danger">
-                {{ station.positionStatus }}
-              </van-tag>
-              <van-tag v-if="station.positionStatus === '待入库'" class="card-status" type="warning">
-                {{ station.positionStatus }}
-              </van-tag>
-            </div>
+      <div class="stations-grid">
+        <div
+          v-for="station in stations" :key="station.positionNo" class="station-card"
+          :class="getStationClass(station)" @click="openStation(station)"
+        >
+          <div class="card-header">
+            <div class="card-title">{{ station.positionName }}</div>
+            <span class="status-badge" :class="getStatusClass(station.positionStatus)">
+              {{ station.positionStatus }}
+            </span>
+          </div>
 
-            <!-- 卡片内容 -->
-            <div class="card-content">
-              <!-- 占用状态 - 显示物料图片 -->
-              <div v-if="station.positionStatus === '已占用'" class="material-display">
-                <div class="material-image">
-                  <img src="./car.svg" :alt="station.materialName" />
-                </div>
-                <!-- <div v-if="station.positionName" class="material-info">
-                  <div class="material-name">{{ station.positionName }}</div>
-                  <div class="material-code">{{ station.positionNo }}</div>
-                </div> -->
+          <!-- 卡片内容 -->
+          <div class="card-content">
+            <!-- 占用状态 - 显示物料图片 -->
+            <div v-if="station.positionStatus === '已占用'" class="material-display">
+              <div class="material-image">
+                <img src="./car.svg" :alt="station.materialName" />
               </div>
+            </div>
 
-              <!-- 空闲状态 - 显示空闲图标 -->
-              <van-empty v-else description="暂无物料车" />
+            <!-- 空闲状态 -->
+            <div v-else class="empty-state">
+              <i class="fas fa-inbox" />
+              <span>暂无物料车</span>
             </div>
           </div>
         </div>
       </div>
     </main>
-    <!-- 确认取走弹窗 -->
-    <van-dialog
-      v-model:show="visible" title="确认取走" show-cancel-button class-name="large-dialog"
-      confirm-button-text="确认" cancel-button-text="取消" @confirm="takeAway" @cancel="cancelTask"
-    >
-      <div class="large-dialog-content">
-        <p>请确认您是否要取走【{{ positionName }}】的料车？</p>
+
+    <!-- 确认取走弹窗 - 科技感风格 -->
+    <div v-if="visible" class="tech-modal-overlay" @click.self="cancelTask">
+      <div class="tech-modal">
+        <div class="modal-content-row">
+          <div class="modal-text">
+            <h3>确认取走</h3>
+            <p>请确认您是否要取走<br /><span class="highlight">【{{ positionName }}】</span>的料车？</p>
+          </div>
+          <div class="modal-icon">
+            <div class="icon-box">
+              <i class="fas fa-dolly" />
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="modal-btn cancel-btn" @click="cancelTask">取消</button>
+          <button class="modal-btn confirm-btn" @click="takeAway">确认取走</button>
+        </div>
       </div>
-    </van-dialog>
+    </div>
 
-    <Loading v-if="loading" />
+    <!-- Loading -->
+    <div v-if="loading" class="loading-overlay">
+      <div class="loading-spinner" />
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue';
 import { showNotify } from 'vant';
-import PageHeader from '../common/PageHeader.vue';
 import { getLocatorFeedAreaStatus, takeAwaySkip } from '../api/agv.js';
 
+// 图片资源
+import bgImg from '../assets/images/bj.png';
 
 // 加载状态
 const loading = ref(false);
@@ -78,10 +93,26 @@ const visible = ref(false);
 const positionName = ref('');
 const positionNo = ref('');
 
+// 获取卡片样式类
+const getStationClass = station => {
+    if (station.positionStatus === '已占用') return 'station-occupied';
+    if (station.positionStatus === '空闲中') return 'station-idle';
+    if (station.positionStatus === '待入库') return 'station-pending';
+    return '';
+};
+
+// 获取状态徽章类
+const getStatusClass = status => {
+    if (status === '已占用') return 'status-danger';
+    if (status === '空闲中') return 'status-success';
+    if (status === '待入库') return 'status-warning';
+    return '';
+};
+
 // 打开弹窗
 const openStation = station => {
     if (station.positionStatus === '空闲中' || station.positionStatus === '待入库') {
-        showNotify({ type: 'warning', message: '请选择占用中的还料区' });
+        showNotify({ type: 'danger', message: '请选择占用中的还料区' });
     } else {
         visible.value = true;
         positionName.value = station.positionName;
@@ -100,7 +131,7 @@ const takeAway = async () => {
             visible.value = false;
             await getStations();
         } else {
-            showNotify({ type: 'warning', message: res.errorMessage || '料车取走失败' });
+            showNotify({ type: 'danger', message: res.errorMessage || '料车取走失败' });
         }
     } catch (error) {
         console.error('料车取走失败:', error);
@@ -126,7 +157,7 @@ const getStations = async () => {
                 stations.value = [];
             }
         } else {
-            showNotify({ type: 'warning', message: res.errorMessage });
+            showNotify({ type: 'danger', message: res.errorMessage });
         }
 
     } catch (error) {
@@ -143,245 +174,361 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* 页面容器 - 固定高度布局 */
-.page-container {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    background-color: #f9fafb;
-    overflow: hidden;
+/* ========== 基础样式 ========== */
+.delivery-page {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  font-family: 'Microsoft YaHei', sans-serif;
+  color: #fff;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
-/* 主内容区 - 可滚动 */
-.main-content {
-    flex: 1;
-    overflow-y: auto;
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
+/* 背景层 */
+.bg-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #041c3d;
+  background-size: cover;
+  background-position: center;
+  z-index: 0;
+}
+
+/* ========== 顶部标题区域 ========== */
+.header-section {
+  position: relative;
+  width: 100%;
+  padding: 20px 30px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
-/* 还料位容器 */
-.stations-container {
-    flex: 1;
-    background-color: white;
-    border-radius: 0.5rem;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-    padding: 2rem;
-    overflow-y: auto;
+.back-btn {
+  position: absolute;
+  left: 30px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: linear-gradient(90deg, #1a4a7a 0%, #0d3a6a 100%);
+  border: 1px solid #2a7fff;
+  border-radius: 8px;
+  padding: 10px 20px;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s;
 }
 
-/* 网格布局 */
-.stations-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-    gap: 1.5rem;
+.back-btn:hover {
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.4);
 }
 
-/* 响应式布局 */
-@media (min-width: 768px) {
-    .stations-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
+.page-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #ffffff;
+  text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
 }
 
-@media (min-width: 1280px) {
-    .stations-grid {
-        grid-template-columns: repeat(3, 1fr);
-    }
+/* ========== 主内容区域 ========== */
+.main-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 30px;
+  position: relative;
+  z-index: 10;
 }
 
-@media (min-width: 1536px) {
-    .stations-grid {
-        grid-template-columns: repeat(4, 1fr);
-    }
+/* 网格布局 */
+.stations-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
 }
 
-/* 还料位卡片 */
+/* ========== 卡片样式 ========== */
 .station-card {
-    background-color: #ffffff;
-    border-radius: 0.75rem;
-    border: 3px solid #97b5f9;
-    padding: 1.5rem;
-    transition: all 0.3s ease;
-    min-height: 320px;
-    display: flex;
-    flex-direction: column;
+  background: rgba(9, 61, 140, 0.6);
+  border: 1px solid #049FD8;
+  border-radius: 12px;
+  padding: 20px;
+  min-height: 280px;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  transition: all 0.3s;
 }
 
 .station-card:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+  transform: translateY(-4px);
+  box-shadow: 0 0 25px rgba(4, 159, 216, 0.4);
 }
 
-/* 占用状态卡片 */
 .station-occupied {
-    border-color: #3b82f6;
-    background: linear-gradient(to bottom, #ffffff 0%, #eff6ff 100%);
+  border-color: #ef4444;
+  background: rgba(239, 68, 68, 0.15);
 }
 
-/* 空闲状态卡片 */
 .station-idle {
-    border-color: #d1d5db;
-    background-color: #fafafa;
+  border-color: #10b981;
+  background: rgba(16, 185, 129, 0.1);
+}
+
+.station-pending {
+  border-color: #f59e0b;
+  background: rgba(245, 158, 11, 0.1);
 }
 
 /* 卡片头部 */
 .card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 1.5rem;
-    padding-bottom: 1rem;
-    border-bottom: 2px solid #e5e7eb;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .card-title {
-    font-size: 1.25rem;
-    font-weight: 700;
-    color: #111827;
+  font-size: 20px;
+  font-weight: bold;
+  color: #fff;
 }
 
-/* 状态标签 */
-.card-status {
-    padding: 0.375rem 0.875rem;
-    border-radius: 0.5rem;
-    font-size: 0.875rem;
-    font-weight: 600;
+/* 状态徽章 */
+.status-badge {
+  padding: 6px 14px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 600;
 }
 
 /* 卡片内容 */
 .card-content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.status-success {
+  background: rgba(16, 185, 129, 0.2);
+  color: #34d399;
+}
+
+.status-danger {
+  background: rgba(239, 68, 68, 0.2);
+  color: #f87171;
+}
+
+.status-warning {
+  background: rgba(245, 158, 11, 0.2);
+  color: #fbbf24;
 }
 
 /* 物料显示区域 */
 .material-display {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1rem;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .material-image {
-    width: 180px;
-    height: 180px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #f9fafb;
-    border-radius: 0.5rem;
-    padding: 1rem;
+  width: 150px;
+  height: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  padding: 15px;
 }
 
 .material-image img {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  filter: brightness(0) invert(1);
+}
+
+/* 空状态 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  color: #7ec8ff;
+}
+
+.empty-state i {
+  font-size: 48px;
+  opacity: 0.5;
+}
+
+.empty-state span {
+  font-size: 14px;
 }
 
-.material-info {
-    text-align: center;
-    width: 100%;
+/* ========== 科技感弹窗样式 ========== */
+.tech-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(4, 28, 61, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
 }
 
-.material-name {
-    font-size: 1rem;
-    font-weight: 600;
-    color: #111827;
-    margin-bottom: 0.25rem;
+.tech-modal {
+  background: linear-gradient(135deg, #0a3d6d 0%, #041c3d 100%);
+  border: 1px solid #049FD8;
+  border-radius: 16px;
+  width: 90%;
+  max-width: 500px;
+  box-shadow: 0 0 40px rgba(4, 159, 216, 0.3);
 }
 
-.material-code {
-    font-size: 0.875rem;
-    color: #6b7280;
+.modal-content-row {
+  padding: 30px;
+  display: flex;
+  align-items: center;
+  gap: 30px;
 }
 
-.station-idle:hover {
-    background-color: #e5e7eb;
+.modal-text {
+  flex: 1;
 }
 
-.idle-text {
-    font-size: 1rem;
-    font-weight: 500;
-    color: #9ca3af;
+.modal-text h3 {
+  font-size: 22px;
+  font-weight: bold;
+  color: #fff;
+  margin: 0 0 12px 0;
 }
 
-/* 工具类 */
-.mr-1 {
-    margin-right: 0.25rem;
+.modal-text p {
+  font-size: 16px;
+  color: #7ec8ff;
+  margin: 0;
+  line-height: 1.6;
 }
 
-.mr-2 {
-    margin-right: 0.5rem;
+.modal-text .highlight {
+  color: #00bfff;
+  font-weight: bold;
 }
 
-.ml-2 {
-    margin-left: 0.5rem;
+.modal-icon {
+  flex-shrink: 0;
 }
 
-/* 大字体防误触弹窗样式 */
-:deep(.large-dialog) {
-  width: 85vw !important;
-  max-width: 600px !important;
-  border-radius: 16px !important;
+.icon-box {
+  width: 80px;
+  height: 80px;
+  background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 36px;
+  color: #fff;
+  box-shadow: 0 10px 30px rgba(0, 191, 255, 0.3);
 }
 
-:deep(.large-dialog .van-dialog__header) {
-  font-size: 1.5rem !important;
-  font-weight: 700 !important;
-  padding: 1.5rem 1.5rem 1rem !important;
-  color: #111827 !important;
+.modal-footer {
+  padding: 20px 30px 30px;
+  display: flex;
+  gap: 15px;
 }
 
-:deep(.large-dialog .van-dialog__content) {
-  padding: 1rem 1.5rem 1.5rem !important;
+.modal-btn {
+  flex: 1;
+  padding: 14px 0;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
 }
 
-:deep(.large-dialog .van-dialog__footer) {
-  padding: 1rem 1.5rem 1.5rem !important;
-  display: flex !important;
-  gap: 1rem !important;
+.cancel-btn {
+  background: transparent;
+  border: 1px solid #2a7fff;
+  color: #7ec8ff;
 }
 
-:deep(.large-dialog .van-dialog__cancel),
-:deep(.large-dialog .van-dialog__confirm) {
-  flex: 1 !important;
-  height: 48px !important;
-  font-size: 1.125rem !important;
-  font-weight: 600 !important;
-  border-radius: 8px !important;
+.cancel-btn:hover {
+  background: rgba(42, 127, 255, 0.2);
 }
 
-:deep(.large-dialog .van-dialog__cancel) {
-  background-color: #f3f4f6 !important;
-  color: #374151 !important;
-  border: none !important;
+.confirm-btn {
+  background: linear-gradient(90deg, #1e90ff 0%, #00bfff 100%);
+  border: none;
+  color: #fff;
 }
 
-:deep(.large-dialog .van-dialog__confirm) {
-  background-color: #3b82f6 !important;
-  color: white !important;
-  border: none !important;
+.confirm-btn:hover {
+  box-shadow: 0 0 20px rgba(30, 144, 255, 0.5);
 }
 
-.large-dialog-content {
-  min-height: 80px;
+/* ========== Loading ========== */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(4, 28, 61, 0.8);
   display: flex;
-  flex-direction: column;
+  align-items: center;
   justify-content: center;
+  z-index: 1000;
 }
 
-.large-dialog-content p {
-  margin: 0;
-  font-size: 1.125rem;
-  line-height: 1.8;
-  color: #374151;
-  text-align: center;
+.loading-spinner {
+  width: 60px;
+  height: 60px;
+  border: 4px solid rgba(30, 144, 255, 0.3);
+  border-top-color: #00bfff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ========== 响应式 - 横屏 ========== */
+@media screen and (orientation: landscape) {
+  .header-section {
+    padding: 10px 20px;
+  }
+
+  .page-title {
+    font-size: 22px;
+  }
+
+  .main-content {
+    padding: 10px 20px;
+  }
+
+  .station-card {
+    min-height: 200px;
+    padding: 15px;
+  }
 }
 </style>

src/api/agv.js

@@ -39,4 +39,13 @@ export function takeAwaySkip(positionNo) {
         url: '/api/LocatorResource/takeAwaySkip?positionNo=' + positionNo,
         method: 'get',
     });
+}
+
+// 查询工装设备
+export function findDeviceByCondition(params) {
+    return request({
+        url: '/api/InventoryResource/findDeviceByCondition',
+        method: 'post',
+        data: params,
+    });
 }

src/api/blankBox.js

@@ -0,0 +1,25 @@
+import request from '../util/request.js';
+
+// 空料箱上架
+export function checkBlankBox() {
+    return request({
+        url: '/api/FeedBoxResource/checkBlankBox',
+        method: 'get',
+    });
+}
+
+// 请求一个空料箱
+export function requestBlankBox() {
+    return request({
+        url: '/api/FeedBoxResource/requestBlankBox',
+        method: 'get',
+    });
+}
+
+// 请求校验一个空料箱和多个工装设备
+export function checkBlankBoxAndInventory() {
+    return request({
+        url: '/api/FeedBoxResource/checkBlankBoxAndInventory',
+        method: 'get',
+    });
+}

src/api/stockIn.js

@@ -23,4 +23,21 @@ export function cfStockInLeave() {
         url: '/api/stockInResource/validationInsideTurnstile',
         method: 'get',
     });
+}
+
+// 根据人员信息查询对应归还的工装设备信息
+export function queryCFStockInByUser(userId) {
+    return request({
+        url: '/api/stockInResource/queryCFStockInByUser?userId=' + userId,
+        method: 'get',
+    });
+}
+
+// 回填归还入库单入库时间
+export function backfillCFStockInTime(params) {
+    return request({
+        url: '/api/stockInResource/backfillCFStockInTime',
+        method: 'post',
+        data: params,
+    });
 }

src/assets/main.css

@@ -55,3 +55,6 @@ body {
 .action-btn:hover {
   opacity: 0.9;
 }
+:deep(.vs__search){
+  margin: 0 !important;
+}

src/box/FeedingArea.vue

@@ -0,0 +1,1407 @@
+<!-- 上料区管理 -->
+<template>
+  <div class="feeding-container">
+    <!-- 动态背景 -->
+    <div class="tech-background">
+      <div class="tech-grid" />
+      <div class="tech-gradient" />
+      <!-- <div class="tech-particles">
+        <div v-for="i in 15" :key="i" class="particle" :style="getParticleStyle(i)" />
+      </div> -->
+    </div>
+
+    <!-- 顶部导航 -->
+    <header class="tech-header">
+      <div class="header-left">
+        <div class="logo-box" style="cursor: pointer;" @click="goBack">
+          <i class="fas fa-warehouse" />
+        </div>
+        <!-- <div class="logo-text">上料区</div> -->
+      </div>
+      <div class="header-center">
+        <h1 class="system-title">料箱上架</h1>
+      </div>
+      <div class="header-right">
+        <!-- <div class="date-display">{{ currentDate }}</div> -->
+      </div>
+    </header>
+
+    <!-- 主内容区域 -->
+    <main class="tech-main">
+      <!-- 操作按钮区域 -->
+      <div class="action-cards">
+        <!-- 空料箱上架 -->
+        <div class="action-card" @click="handlePlaceEmptyBin(false)">
+          <div class="card-border" />
+          <div class="card-glow" />
+          <div class="card-content">
+            <div class="card-icon green">
+              <i class="fas fa-arrow-up-from-bracket" />
+            </div>
+            <div class="card-label">空料箱上架</div>
+            <!-- <div class="card-decoration">
+              <div class="deco-line" />
+              <div class="deco-corner" />
+            </div> -->
+          </div>
+        </div>
+
+        <!-- 请求空料箱 -->
+        <div class="action-card" @click="handleRequestEmptyBin(false)">
+          <div class="card-border" />
+          <div class="card-glow" />
+          <div class="card-content">
+            <div class="card-icon blue">
+              <i class="fas fa-box-open" />
+            </div>
+            <div class="card-label">请求空料箱</div>
+            <!-- <div class="card-decoration">
+              <div class="deco-line" />
+              <div class="deco-corner" />
+            </div> -->
+          </div>
+        </div>
+
+        <!-- 请求校验 -->
+        <div class="action-card" @click="handleRequestVerification(false)">
+          <div class="card-border" />
+          <div class="card-glow" />
+          <div class="card-content">
+            <div class="card-icon orange">
+              <i class="fas fa-magnifying-glass-chart" />
+            </div>
+            <div class="card-label">工装/设备上架</div>
+            <!-- <div class="card-decoration">
+              <div class="deco-line" />
+              <div class="deco-corner" />
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <!-- 识别结果弹窗 - 科技感风格 -->
+    <div v-if="showResultDialog" class="tech-modal-overlay" @click.self="closeDialog">
+      <div class="tech-modal result-modal">
+        <!-- 弹窗标题 -->
+        <div class="modal-header">
+          <h3>{{ dialogTitle }}</h3>
+          <button class="close-btn" @click="closeDialog">
+            <i class="fas fa-times" />
+          </button>
+        </div>
+
+        <div class="dialog-content">
+          <!-- 状态标签 -->
+          <div v-if="showVerificationStatus" class="verification-status">
+            <span class="status-tag" :class="verificationSuccess ? 'success' : 'danger'">
+              <i :class="verificationSuccess ? 'fas fa-check-circle' : 'fas fa-times-circle'" />
+              {{ verificationSuccess ? '校验通过' : '校验未通过' }}
+            </span>
+            <span v-if="errorResult" class="status-tag danger">
+              {{ errorResult }}
+            </span>
+          </div>
+
+          <!-- 双栏布局 -->
+          <div class="dialog-body">
+            <!-- 左侧：料箱列表 -->
+            <div class="list-section">
+              <h3 class="section-title">
+                <i class="fas fa-boxes" />
+                料箱信息
+              </h3>
+              <div class="item-list">
+                <div v-for="bin in binList" :key="bin.id" class="item-card">
+                  <div class="item-header">
+                    <div class="item-info">
+                      <div class="item-id">{{ bin.feedBoxName }}</div>
+                    </div>
+                    <span class="item-tag">{{ bin.feedBoxNo }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 右侧：工装/设备列表 或 校验结果 -->
+            <template v-if="!isRequest">
+              <div class="list-section">
+                <h3 class="section-title">
+                  <i class="fas fa-tools" />
+                  工装 / 设备信息
+                </h3>
+                <div class="item-list">
+                  <div v-for="tool in toolList" :key="tool.id" class="item-card">
+                    <div class="item-info">
+                      <div class="item-name">{{ tool.inventoryName }}</div>
+                      <div class="item-id">编号: {{ tool.inventoryNo }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </template>
+            <template v-else>
+              <div class="verification-result">
+                <div class="result-header">
+                  <i class="fas fa-check-circle" />
+                  <h4>请求成功</h4>
+                </div>
+                <p class="result-message">请求空料箱【{{ binList[0]?.feedBoxName }}】成功</p>
+              </div>
+            </template>
+          </div>
+
+          <!-- 底部按钮 -->
+          <div class="dialog-footer">
+            <button v-if="showVerificationStatus" class="modal-btn primary-btn" @click="handleReverify">
+              <i class="fas fa-sync-alt" />
+              重新校验
+            </button>
+            <button class="modal-btn close-action-btn" @click="closeDialog">
+              关闭
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 页脚 -->
+    <footer class="tech-footer">
+      <!-- <p>&copy; 2024 智能仓储管理系统. All rights reserved.</p> -->
+    </footer>
+  </div>
+  <Loading v-if="loading" />
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import { showNotify, showToast } from 'vant';
+import { checkBlankBox, requestBlankBox, checkBlankBoxAndInventory } from '../api/blankBox.js';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+const currentDate = ref('');
+const errorResult = ref('');
+const loading = ref(false);
+const showResultDialog = ref(false);
+const dialogTitle = ref('');
+const showVerificationStatus = ref(false); // 是否显示校验结果
+const isRequest = ref(false); // 是否为请求空料箱
+const verificationSuccess = ref(true); // 校验是否成功
+
+const binList = ref([]);
+
+const toolList = ref([]);
+
+const goBack = () => {
+    router.back();
+};
+
+// 接口数据处理
+const handleDataProcessing = (res, isReverify = false) => {
+    if (res.data) {
+        binList.value = [];
+        toolList.value = [];
+        isRequest.value = false;
+        const { success, rfidFeedBoxResponseList, rfidInventoryResponseList, feedBoxNo, feedBoxName } = res.data;
+        if (!isReverify) showResultDialog.value = true;
+        if (success) {
+            verificationSuccess.value = true;
+        } else {
+            verificationSuccess.value = false;
+        }
+        if (rfidFeedBoxResponseList && rfidFeedBoxResponseList.length > 0) {
+            binList.value = rfidFeedBoxResponseList;
+        }
+        if (rfidInventoryResponseList && rfidInventoryResponseList.length > 0) {
+            toolList.value = rfidInventoryResponseList;
+        }
+        if (feedBoxNo && feedBoxName) {
+            isRequest.value = true;
+            binList.value = [res.data];
+        }
+    }
+    if (res.errorCode !== 0) {
+        verificationSuccess.value = false;
+        errorResult.value = res.errorMessage,
+        showNotify({ type: 'danger', message: res.errorMessage, duration: 6000, zIndex: 9999999 });
+    } else {
+        errorResult.value = '';
+    }
+};
+
+// 空料箱上架
+const handlePlaceEmptyBin = async isReverify => {
+    dialogTitle.value = '上架结果';
+    showVerificationStatus.value = true;
+    loading.value = true;
+    try {
+        const res = await checkBlankBox();
+        handleDataProcessing(res, isReverify);
+    } catch (error) {
+        verificationSuccess.value = false;
+        console.error('空料箱上架:', error);
+        showNotify({ type: 'danger', message: '空料箱上架API调用失败' });
+    } finally {
+        loading.value = false;
+    }
+};
+
+// 请求空料箱
+const handleRequestEmptyBin = async isReverify => {
+    dialogTitle.value = '请求结果';
+    showVerificationStatus.value = false;
+    loading.value = true;
+    try {
+        const res = await requestBlankBox();
+        handleDataProcessing(res, isReverify);
+    } catch (error) {
+        console.error('校验失败:', error);
+        verificationSuccess.value = false;
+        showNotify({ type: 'danger', message: '请求空料箱API调用失败' });
+    } finally {
+        loading.value = false;
+    }
+};
+
+// 请求校验
+const handleRequestVerification = async isReverify => {
+    dialogTitle.value = '校验结果';
+    showVerificationStatus.value = true;
+    loading.value = true;
+    try {
+        const res = await checkBlankBoxAndInventory();
+        handleDataProcessing(res, isReverify);
+    } catch (error) {
+        console.error('校验失败:', error);
+        verificationSuccess.value = false;
+        showNotify({ type: 'danger', message: '请求校验API调用失败' });
+    } finally {
+        loading.value = false;
+    }
+};
+
+const handleReverify = () => {
+    showNotify({ type: 'primary', message: '正在重新校验....', zIndex: 9999999 });
+    if (dialogTitle.value === '上架结果') {
+        handlePlaceEmptyBin();
+    } else if (dialogTitle.value === '校验结果')
+        handleRequestVerification(true);
+};
+
+const closeDialog = () => {
+    showResultDialog.value = false;
+};
+
+
+const updateDateTime = () => {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = String(now.getMonth() + 1).padStart(2, '0');
+    const day = String(now.getDate()).padStart(2, '0');
+    const hour = String(now.getHours()).padStart(2, '0');
+    const minute = String(now.getMinutes()).padStart(2, '0');
+    const second = String(now.getSeconds()).padStart(2, '0');
+    currentDate.value = `${year}.${month}.${day} ${hour}:${minute}:${second}`;
+};
+
+const getParticleStyle = index => {
+    const size = Math.random() * 4 + 2;
+    const left = Math.random() * 100;
+    const animationDuration = Math.random() * 20 + 10;
+    const animationDelay = Math.random() * 5;
+    return {
+        width: `${size}px`,
+        height: `${size}px`,
+        left: `${left}%`,
+        animationDuration: `${animationDuration}s`,
+        animationDelay: `${animationDelay}s`,
+    };
+};
+
+let timer = null;
+
+onMounted(() => {
+    // updateDateTime();
+    // timer = setInterval(updateDateTime, 1000); // 每秒更新一次
+});
+
+onUnmounted(() => {
+    if (timer) {
+        clearInterval(timer);
+    }
+});
+</script>
+
+<style scoped>
+/* ========== 主容器 ========== */
+.feeding-container {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  background: #0a0e27;
+  font-family: 'Microsoft YaHei', Arial, sans-serif;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ========== 动态背景 ========== */
+.tech-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+.tech-grid {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image:
+    linear-gradient(rgba(0, 153, 255, 0.1) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0, 153, 255, 0.1) 1px, transparent 1px);
+  background-size: 50px 50px;
+  animation: gridMove 20s linear infinite;
+}
+
+@keyframes gridMove {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: translate(50px, 50px);
+  }
+}
+
+.tech-gradient {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(ellipse at center,
+      rgba(0, 100, 200, 0.2) 0%,
+      rgba(10, 14, 39, 0.8) 50%,
+      #0a0e27 100%);
+}
+
+.tech-particles {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.particle {
+  position: absolute;
+  background: rgba(0, 255, 255, 0.8);
+  border-radius: 50%;
+  bottom: -10px;
+  animation: particleFloat linear infinite;
+  box-shadow:
+    0 0 10px rgba(0, 255, 255, 0.8),
+    0 0 20px rgba(0, 153, 255, 0.6);
+}
+
+@keyframes particleFloat {
+  0% {
+    transform: translateY(0) rotate(0deg);
+    opacity: 0;
+  }
+
+  10% {
+    opacity: 1;
+  }
+
+  90% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateY(-100vh) rotate(360deg);
+    opacity: 0;
+  }
+}
+
+/* ========== 顶部栏 ========== */
+.tech-header {
+  position: relative;
+  z-index: 10;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 40px;
+  background: linear-gradient(180deg, rgba(0, 20, 50, 0.9) 0%, rgba(10, 14, 39, 0.7) 100%);
+  border-bottom: 2px solid rgba(0, 153, 255, 0.3);
+  box-shadow: 0 4px 20px rgba(0, 153, 255, 0.2);
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  min-width: 200px;
+}
+
+.logo-box {
+  width: 50px;
+  height: 50px;
+  background: linear-gradient(135deg, #00ff88 0%, #0099ff 100%);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  color: #fff;
+  box-shadow: 0 0 20px rgba(0, 153, 255, 0.6);
+  animation: logoGlow 2s ease-in-out infinite;
+}
+
+@keyframes logoGlow {
+
+  0%,
+  100% {
+    box-shadow: 0 0 20px rgba(0, 153, 255, 0.6);
+  }
+
+  50% {
+    box-shadow: 0 0 30px rgba(0, 255, 136, 0.8);
+  }
+}
+
+.logo-text {
+  font-size: 32px;
+  font-weight: bold;
+  color: #00ff88;
+  text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
+  letter-spacing: 2px;
+}
+
+.header-center {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+
+.system-title {
+  font-size: 48px;
+  font-weight: bold;
+  color: #fff;
+  text-shadow: 0 0 20px rgba(0, 153, 255, 0.8);
+  letter-spacing: 8px;
+}
+
+.header-right {
+  min-width: 200px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.date-display {
+  font-size: 24px;
+  color: #00ffff;
+  font-weight: 600;
+  padding: 10px 20px;
+  background: rgba(0, 153, 255, 0.1);
+  border: 1px solid rgba(0, 153, 255, 0.3);
+  border-radius: 8px;
+  box-shadow: inset 0 0 10px rgba(0, 153, 255, 0.2);
+}
+
+/* ========== 主内容区域 ========== */
+.tech-main {
+  position: relative;
+  z-index: 5;
+  flex: 1;
+  padding: 60px 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* ========== 操作卡片区域 ========== */
+.action-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 40px;
+  max-width: 1400px;
+  width: 100%;
+  padding: 0 20px;
+}
+
+.action-card {
+  position: relative;
+  height: 350px;
+  max-height: calc((100vh - 200px) / 1.5);
+  cursor: pointer;
+  transition: all 0.4s ease;
+}
+
+.action-card:hover {
+  transform: translateY(-15px) scale(1.05);
+}
+
+.card-border {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg,
+      rgba(0, 255, 255, 0.9) 0%,
+      rgba(0, 153, 255, 0.9) 25%,
+      rgba(255, 0, 255, 0.9) 50%,
+      rgba(0, 153, 255, 0.9) 75%,
+      rgba(0, 255, 255, 0.9) 100%);
+  background-size: 200% 200%;
+  border-radius: 20px;
+  padding: 4px;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  animation: borderShine 3s linear infinite;
+}
+
+@keyframes borderShine {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  100% {
+    background-position: 200% 50%;
+  }
+}
+
+.card-glow {
+  position: absolute;
+  inset: -8px;
+  background: radial-gradient(circle at center,
+      rgba(0, 255, 255, 0.6) 0%,
+      rgba(0, 153, 255, 0.4) 40%,
+      transparent 70%);
+  border-radius: 20px;
+  opacity: 0.5;
+  animation: glowPulse 2s ease-in-out infinite;
+}
+
+.action-card:hover .card-glow {
+  opacity: 1;
+}
+
+@keyframes glowPulse {
+
+  0%,
+  100% {
+    opacity: 0.5;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+.card-content {
+  position: relative;
+  height: 100%;
+  background: linear-gradient(135deg, rgba(10, 25, 50, 0.95) 0%, rgba(15, 30, 60, 0.95) 100%);
+  border-radius: 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 40px;
+  backdrop-filter: blur(15px);
+  overflow: hidden;
+  box-shadow: inset 0 0 50px rgba(0, 255, 255, 0.1), 0 15px 50px rgba(0, 0, 0, 0.6);
+}
+
+.card-icon {
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 80px;
+  color: #fff;
+  border: 4px solid;
+  transition: all 0.4s ease;
+  animation: iconPulse 2s ease-in-out infinite;
+}
+
+.card-icon.blue {
+  background: linear-gradient(135deg, rgba(0, 153, 255, 0.3), rgba(0, 255, 255, 0.3));
+  border-color: rgba(0, 255, 255, 0.8);
+  box-shadow: 0 0 50px rgba(0, 153, 255, 1), inset 0 0 30px rgba(0, 255, 255, 0.3);
+}
+
+.card-icon.green {
+  background: linear-gradient(135deg, rgba(0, 255, 136, 0.3), rgba(0, 200, 100, 0.3));
+  border-color: rgba(0, 255, 136, 0.8);
+  box-shadow: 0 0 50px rgba(0, 255, 136, 1), inset 0 0 30px rgba(0, 255, 136, 0.3);
+}
+
+.card-icon.orange {
+  background: linear-gradient(135deg, rgba(255, 153, 0, 0.3), rgba(255, 100, 0, 0.3));
+  border-color: rgba(255, 153, 0, 0.8);
+  box-shadow: 0 0 50px rgba(255, 153, 0, 1), inset 0 0 30px rgba(255, 153, 0, 0.3);
+}
+
+@keyframes iconPulse {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.08);
+  }
+}
+
+.action-card:hover .card-icon {
+  transform: scale(1.15) rotate(10deg);
+}
+
+.card-label {
+  font-size: 42px;
+  font-weight: bold;
+  color: #fff;
+  text-shadow: 0 0 20px rgba(0, 255, 255, 1), 0 0 40px rgba(0, 153, 255, 0.8);
+  letter-spacing: 4px;
+}
+
+.card-decoration {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.deco-line {
+  position: absolute;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 70%;
+  height: 4px;
+  background: linear-gradient(90deg, transparent, #00ffff 20%, #ff00ff 50%, #00ffff 80%, transparent);
+  box-shadow: 0 0 20px rgba(0, 255, 255, 1);
+  animation: lineFlow 2s ease-in-out infinite;
+}
+
+@keyframes lineFlow {
+
+  0%,
+  100% {
+    opacity: 0.6;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+.deco-corner {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: 40px;
+  height: 40px;
+  border-top: 4px solid #00ffff;
+  border-right: 4px solid #00ffff;
+  border-radius: 0 10px 0 0;
+  box-shadow: 0 0 20px rgba(0, 255, 255, 1);
+  animation: cornerPulse 1.5s ease-in-out infinite;
+}
+
+@keyframes cornerPulse {
+
+  0%,
+  100% {
+    opacity: 0.6;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+/* ========== 页脚 ========== */
+.tech-footer {
+  position: relative;
+  z-index: 10;
+  padding: 15px;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 12px;
+  background: rgba(10, 14, 39, 0.7);
+  border-top: 1px solid rgba(0, 153, 255, 0.2);
+  flex-shrink: 0;
+}
+
+/* ========== 弹窗样式 ========== */
+:deep(.tech-dialog) {
+  width: 95vw !important;
+  max-width: 1400px !important;
+  border-radius: 20px !important;
+  background: linear-gradient(135deg, rgba(15, 25, 45, 0.98), rgba(20, 30, 50, 0.98)) !important;
+  border: 3px solid rgba(0, 255, 255, 0.5) !important;
+  box-shadow: 0 0 50px rgba(0, 255, 255, 0.5), inset 0 0 30px rgba(0, 255, 255, 0.1) !important;
+}
+
+:deep(.tech-dialog .van-dialog__header) {
+  padding: 25px 30px !important;
+  font-size: 32px !important;
+  font-weight: bold !important;
+  color: #00ffff !important;
+  text-shadow: 0 0 20px rgba(0, 255, 255, 1) !important;
+  background: transparent !important;
+  border-bottom: 2px solid rgba(0, 255, 255, 0.3) !important;
+}
+
+.dialog-content {
+  padding: 30px;
+  color: #fff;
+}
+
+.verification-status {
+  margin-bottom: 25px;
+  display: flex;
+  /* justify-content: center; */
+  justify-content: space-between;
+}
+
+:deep(.van-tag) {
+  padding: 10px 25px !important;
+  font-size: 18px !important;
+  font-weight: 600 !important;
+  border-radius: 20px !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+}
+
+.dialog-body {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 30px;
+  margin-bottom: 30px;
+}
+
+.list-section {
+  background: rgba(10, 20, 40, 0.6);
+  border-radius: 12px;
+  padding: 20px;
+  border: 2px solid rgba(0, 255, 255, 0.2);
+}
+
+.section-title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #00ffff;
+  margin-bottom: 20px;
+  text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+}
+
+.item-list {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.item-card {
+  background: rgba(20, 30, 50, 0.6);
+  border-radius: 10px;
+  padding: 15px;
+  margin-bottom: 15px;
+  border: 1px solid rgba(0, 153, 255, 0.3);
+  transition: all 0.3s ease;
+}
+
+.item-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 5px 20px rgba(0, 255, 255, 0.3);
+  border-color: rgba(0, 255, 255, 0.6);
+}
+
+.item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.item-info {
+  flex: 1;
+}
+
+.item-id,
+.item-name {
+  font-size: 18px;
+  font-weight: bold;
+  color: #fff;
+  margin-bottom: 8px;
+}
+
+.item-location {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.item-type {
+  font-size: 14px;
+  margin-top: 10px;
+  padding: 5px 10px;
+  border-radius: 8px;
+  display: inline-block;
+}
+
+.type-tool {
+  background: rgba(0, 153, 255, 0.2);
+  color: #0099ff;
+  border: 1px solid rgba(0, 153, 255, 0.5);
+}
+
+.type-equipment {
+  background: rgba(153, 0, 255, 0.2);
+  color: #9900ff;
+  border: 1px solid rgba(153, 0, 255, 0.5);
+}
+
+.verification-result {
+  padding: 20px;
+}
+
+.result-header {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 20px;
+}
+
+.result-header i {
+  font-size: 36px;
+}
+
+.result-header h4 {
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.text-success {
+  color: #00ff88;
+}
+
+.text-danger {
+  color: #ff3366;
+}
+
+.result-message {
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.9);
+  line-height: 1.6;
+  margin-bottom: 20px;
+}
+
+.result-errors {
+  background: rgba(255, 51, 102, 0.1);
+  border: 1px solid rgba(255, 51, 102, 0.3);
+  border-radius: 8px;
+  padding: 15px;
+}
+
+.result-errors h5 {
+  font-size: 16px;
+  font-weight: bold;
+  color: #ff3366;
+  margin-bottom: 10px;
+}
+
+.result-errors ul {
+  list-style: disc;
+  padding-left: 25px;
+}
+
+.result-errors li {
+  color: rgba(255, 255, 255, 0.8);
+  margin-bottom: 5px;
+}
+
+.dialog-footer {
+  display: flex;
+  gap: 15px;
+  justify-content: flex-end;
+}
+
+.action-btn {
+  min-width: 150px;
+  height: 50px;
+  font-size: 18px;
+  font-weight: 600;
+  border-radius: 10px;
+}
+
+:deep(.van-button--primary) {
+  background: linear-gradient(135deg, #0099ff, #00ffff) !important;
+  border: 2px solid #00ffff !important;
+  box-shadow: 0 0 20px rgba(0, 255, 255, 0.5) !important;
+}
+
+:deep(.van-button--default) {
+  background: rgba(100, 100, 100, 0.3) !important;
+  border: 2px solid rgba(255, 255, 255, 0.3) !important;
+  color: #fff !important;
+}
+
+/* ========== 响应式设计 ========== */
+@media (max-width: 1200px) {
+  .action-cards {
+    grid-template-columns: 1fr;
+    gap: 30px;
+    padding: 0 10px;
+  }
+
+  .dialog-body {
+    grid-template-columns: 1fr;
+  }
+
+  .system-title {
+    font-size: 36px;
+    letter-spacing: 4px;
+  }
+
+  .action-card {
+    height: 300px;
+    max-height: calc((100vh - 180px) / 1.5);
+  }
+
+  .tech-main {
+    padding: 40px 20px;
+  }
+}
+
+@media (max-width: 768px) {
+  .tech-header {
+    padding: 0 15px;
+    height: 70px;
+  }
+
+  .header-left,
+  .header-right {
+    min-width: auto;
+  }
+
+  .logo-box {
+    width: 40px;
+    height: 40px;
+    font-size: 20px;
+  }
+
+  .logo-text {
+    font-size: 20px;
+  }
+
+  .date-display {
+    font-size: 14px;
+    padding: 6px 12px;
+  }
+
+  .system-title {
+    font-size: 20px;
+    letter-spacing: 2px;
+  }
+
+  .tech-main {
+    padding: 30px 15px;
+  }
+
+  .action-cards {
+    gap: 25px;
+    padding: 0 5px;
+    grid-template-columns: 1fr;
+  }
+
+  .action-card {
+    height: 280px;
+    max-height: calc((100vh - 150px) / 1.5);
+  }
+
+  .card-icon {
+    width: 100px;
+    height: 100px;
+    font-size: 50px;
+  }
+
+  .card-label {
+    font-size: 28px;
+    letter-spacing: 2px;
+  }
+
+  .tech-footer {
+    padding: 10px;
+    font-size: 11px;
+  }
+
+  .dialog-content {
+    padding: 20px;
+  }
+
+  .section-title {
+    font-size: 18px;
+  }
+
+  .deco-line {
+    bottom: 20px;
+  }
+
+  .deco-corner {
+    width: 30px;
+    height: 30px;
+    border-width: 3px;
+  }
+}
+
+@media (max-width: 480px) {
+  .tech-header {
+    height: 60px;
+    padding: 0 10px;
+  }
+
+  .logo-box {
+    width: 35px;
+    height: 35px;
+    font-size: 18px;
+  }
+
+  .logo-text {
+    font-size: 16px;
+  }
+
+  .system-title {
+    font-size: 16px;
+    letter-spacing: 1px;
+  }
+
+  .date-display {
+    font-size: 12px;
+    padding: 5px 10px;
+  }
+
+  .tech-main {
+    padding: 20px 10px;
+  }
+
+  .action-card {
+    height: 250px;
+    max-height: calc((100vh - 120px) / 1.5);
+  }
+
+  .card-icon {
+    width: 80px;
+    height: 80px;
+    font-size: 40px;
+  }
+
+  .card-label {
+    font-size: 24px;
+  }
+
+  .card-content {
+    gap: 30px;
+  }
+}
+
+/* 滚动条样式 */
+.item-list::-webkit-scrollbar {
+  width: 8px;
+}
+
+.item-list::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+}
+
+.item-list::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #0099ff, #00ffff);
+  border-radius: 4px;
+  box-shadow: 0 0 10px rgba(0, 153, 255, 0.5);
+}
+
+/* 隐藏主内容区域的滚动条 */
+.tech-main::-webkit-scrollbar {
+  width: 0;
+  display: none;
+}
+
+.tech-main {
+  scrollbar-width: none;
+  /* Firefox */
+  -ms-overflow-style: none;
+  /* IE and Edge */
+}
+
+.mr-1 {
+  margin-right: 4px;
+}
+
+.mr-2 {
+  margin-right: 8px;
+}
+
+/* ========== 科技感弹窗样式 ========== */
+.tech-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(4, 28, 61, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+}
+
+.tech-modal {
+  background: linear-gradient(135deg, #0a3d6d 0%, #041c3d 100%);
+  border: 1px solid #049FD8;
+  border-radius: 16px;
+  width: 90%;
+  max-width: 800px;
+  max-height: 80vh;
+  overflow: hidden;
+  box-shadow: 0 0 40px rgba(4, 159, 216, 0.3);
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 25px;
+  border-bottom: 1px solid rgba(4, 159, 216, 0.3);
+}
+
+.modal-header h3 {
+  font-size: 22px;
+  font-weight: bold;
+  color: #fff;
+  margin: 0;
+}
+
+.close-btn {
+  width: 36px;
+  height: 36px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: 50%;
+  color: #7ec8ff;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: #fff;
+}
+
+.dialog-content {
+  padding: 20px 25px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.verification-status {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.status-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.status-tag.success {
+  background: rgba(16, 185, 129, 0.2);
+  color: #34d399;
+}
+
+.status-tag.danger {
+  background: rgba(239, 68, 68, 0.2);
+  color: #f87171;
+}
+
+.dialog-body {
+  display: flex;
+  gap: 20px;
+}
+
+.list-section {
+  flex: 1;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+  padding: 15px;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  color: #7ec8ff;
+  margin: 0 0 15px 0;
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.item-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.item-card {
+  background: rgba(9, 61, 140, 0.5);
+  border: 1px solid rgba(4, 159, 216, 0.3);
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.item-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.item-info {
+  flex: 1;
+}
+
+.item-id {
+  font-size: 14px;
+  color: #fff;
+  font-weight: 500;
+}
+
+.item-name {
+  font-size: 14px;
+  color: #fff;
+  margin-bottom: 4px;
+}
+
+.item-tag {
+  background: rgba(16, 185, 129, 0.2);
+  color: #34d399;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+}
+
+.verification-result {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+}
+
+.result-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.result-header i {
+  font-size: 48px;
+  color: #34d399;
+}
+
+.result-header h4 {
+  font-size: 20px;
+  color: #34d399;
+  margin: 0;
+}
+
+.result-message {
+  font-size: 14px;
+  color: #7ec8ff;
+  text-align: center;
+  margin: 0;
+}
+
+.dialog-footer {
+  display: flex;
+  gap: 15px;
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.modal-btn {
+  flex: 1;
+  padding: 14px 0;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.primary-btn {
+  background: linear-gradient(90deg, #1e90ff 0%, #00bfff 100%);
+  border: none;
+  color: #fff;
+}
+
+.primary-btn:hover {
+  box-shadow: 0 0 20px rgba(30, 144, 255, 0.5);
+}
+
+.close-action-btn {
+  background: transparent;
+  border: 1px solid #2a7fff;
+  color: #7ec8ff;
+}
+
+.close-action-btn:hover {
+  background: rgba(42, 127, 255, 0.2);
+}
+
+/* 响应式 */
+@media screen and (max-width: 768px) {
+  .dialog-body {
+    flex-direction: column;
+  }
+
+  .tech-modal {
+    max-width: 95%;
+    max-height: 90vh;
+  }
+}
+</style>

src/common/FilterPanel.vue

@@ -5,7 +5,7 @@
       <div class="filter-title">
         <i class="fas fa-filter mr-2" />
         <span>筛选条件</span>
-        <a-tag v-if="collapsed" color="blue" class="ml-2">{{ activeFilterCount }} 个条件</a-tag>
+        <van-tag v-if="collapsed" type="primary" class="ml-2">{{ activeFilterCount }} 个条件</van-tag>
       </div>
       <div class="filter-toggle">
         <span class="text-sm text-gray-500 mr-2">{{ collapsed ? '展开' : '收起' }}</span>

src/finishProduct/FinishProductIn.vue

@@ -1,150 +1,203 @@
-<!-- 成品入库 -->
+<!-- 成品入库 - 智能仓储风格 -->
 <template>
-  <div class="page-container">
-    <!-- 顶部信息栏 -->
-    <PageHeader title="成品入库" />
+  <div class="stock-requisition-page">
+    <!-- 背景层 -->
+    <div class="bg-layer" :style="{ backgroundImage: `url(${bgImg})` }" />
+
+    <!-- 顶部标题区域 -->
+    <div class="header-section">
+      <button class="logout-btn" @click="goHome">
+        <i class="fas fa-home" />
+        <span>主页</span>
+      </button>
+      <h1 class="page-title">成品入库</h1>
+      <!-- 右侧操作按钮 -->
+      <div class="header-actions">
+        <button class="action-btn add-btn" @click="openModal">
+          <i class="fas fa-plus-circle" />
+          <span>添加成品</span>
+        </button>
+      </div>
+    </div>
 
     <!-- 主内容区域 -->
     <main class="main-content">
-      <!-- 页面标题和操作按钮 -->
-      <div class="page-header-row">
-        <div class="page-title">
-          <h2 />
-        </div>
-        <van-button type="primary" style="width: 109px" @click="handleSubmit">
-          <i class="fas fa-upload mr-1" />
-          提交
-        </van-button>
+      <!-- 统计信息 -->
+      <div v-if="products.length > 0" class="stats-section">
+        <span class="stats-text">当前已添加 {{ products.length }} 条成品记录</span>
       </div>
 
-      <!-- 顶部统计与新增按钮 -->
-      <div class="top-actions-row">
-        <div class="top-actions-info">
-          当前已添加 <span class="font-semibold">{{ products.length }}</span> 条成品记录
+      <!-- 卡片网格区域 -->
+      <div class="card-grid-wrapper">
+        <!-- 空状态 -->
+        <div v-if="products.length === 0" class="empty-state">
+          <i class="fas fa-box-open empty-icon" />
+          <p>请添加成品</p>
         </div>
-        <van-button @click="openModal">
-          <i class="fas fa-plus-circle mr-1" />
-          添加成品
-        </van-button>
-      </div>
 
-      <!-- 卡片容器 -->
-      <div class="card-container">
-        <!-- 卡片列表区域  -->
-        <div class="card-list-wrapper">
-          <van-empty v-if="products.length === 0" description="请添加成品" />
-
-          <!-- 卡片列表 -->
-          <div v-else class="card-list">
-            <div v-for="(product, index) in products" :key="product.code || index" class="inventory-card">
-              <div class="card-header">
-                <div class="card-header-left">
-                  <div class="custom-avatar">
-                    <i class="fas fa-box" />
-                  </div>
-                  <div class="ml-4 card-title-info">
-                    <div class="card-name">{{ product.inventoryName }}</div>
-                    <div class="card-subtitle">编号: {{ product.inventoryNo }}</div>
-                  </div>
-                </div>
-                <div class="card-header-right">
-                  <div class="card-location">
-                    <i class="fas fa-map-marker-alt mr-2" />
-                    <span>{{ product.positionName }}</span>
-                  </div>
-                  <van-button type="danger" size="small" class="delete-btn" @click.stop="openDeleteDialog(index)">
-                    <i class="fas fa-trash" />
-                  </van-button>
-                </div>
+        <!-- 卡片网格 -->
+        <div v-else class="card-grid">
+          <div v-for="(product, index) in products" :key="product.code || index" class="inventory-card">
+            <!-- 卡片序号 -->
+            <div class="card-index">{{ index + 1 }}</div>
+
+            <!-- 图片区域 -->
+            <div class="card-image">
+              <div class="image-placeholder">
+                <i class="fas fa-box" />
               </div>
             </div>
-          </div>
-        </div>
 
-        <!-- 底部统计区域（固定） -->
-        <div v-if="products.length > 0" class="pagination-wrapper">
-          <span class="text-gray-600">共 {{ products.length }} 条数据</span>
+            <!-- 信息区域 -->
+            <div class="card-info">
+              <div class="info-row">
+                <span class="info-label">名称:</span>
+                <span class="info-value">{{ product.inventoryName || '-' }}</span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">编号:</span>
+                <span class="info-value">{{ product.inventoryNo || '-' }}</span>
+              </div>
+              <div class="info-row location-row">
+                <i class="fas fa-map-marker-alt location-icon" />
+                <span class="info-value">{{ product.positionName || '-' }}</span>
+              </div>
+            </div>
+
+            <!-- 操作区域 -->
+            <div class="card-action-section">
+              <button class="delete-btn" @click.stop="openDeleteDialog(index)">
+                <i class="fas fa-trash" /> 删除
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     </main>
 
+    <!-- 底部操作按钮 -->
+    <div class="bottom-actions">
+      <button class="submit-btn" :disabled="products.length === 0" @click="handleSubmit">
+        提交入库
+      </button>
+    </div>
+
     <!-- 新增成品弹窗 -->
-    <van-dialog
-      v-model:show="isModalOpen" title="新增成品" show-cancel-button
-      confirm-button-text="保存" cancel-button-text="取消"
-      :confirm-button-disabled="!isFormValid"
-      class-name="large-dialog"
-      @confirm="saveProduct" @cancel="closeModal"
-    >
-      <div class="large-dialog-form">
-        <div class="large-form-item">
-          <label class="large-form-label">成品名称</label>
-          <van-field v-model="newProduct.inventoryName" placeholder="请输入成品名称" clearable class="large-input" />
+    <div v-if="isModalOpen" class="tech-modal-overlay" @click.self="closeModal">
+      <div class="tech-modal">
+        <!-- <button class="modal-close-btn" @click="closeModal">
+          <i class="fas fa-times" />
+        </button> -->
+        <div class="modal-header">
+          <h3>新增成品</h3>
+          <p>请填写成品信息</p>
         </div>
-        <div class="large-form-item">
-          <label class="large-form-label">成品编号</label>
-          <van-field v-model="newProduct.inventoryNo" placeholder="请输入成品编号" clearable class="large-input" />
+        <div class="modal-body">
+          <div class="form-item">
+            <label>成品名称</label>
+            <input v-model="newProduct.inventoryName" type="text" placeholder="请输入成品名称" />
+          </div>
+          <div class="form-item">
+            <label>成品编号</label>
+            <input v-model="newProduct.inventoryNo" type="text" placeholder="请输入成品编号" />
+          </div>
+          <div class="form-item">
+            <label>货位选择</label>
+            <v-select
+              v-model="newProduct.positionId" :options="warehouseLocationOptions"
+              :reduce="item => item.positionId" label="positionName"
+              placeholder="请选择货位" :clearable="true" :filterable="true"
+              class="dark-select"
+              append-to-body
+            >
+              <template #no-options>
+                <span>无该选项数据</span>
+              </template>
+            </v-select>
+          </div>
         </div>
-        <div class="large-form-item">
-          <label class="large-form-label">货位选择</label>
-          <v-select
-            v-model="newProduct.positionId" :options="warehouseLocationOptions"
-            :reduce="item => item.positionId" label="positionName"
-            placeholder="请选择货位" :clearable="true" :filterable="true"
-            class="large-select"
-            append-to-body
-          >
-            <template #no-options>
-              <span>无该选项数据</span>
-            </template>
-          </v-select>
+        <div class="modal-footer">
+          <button class="modal-btn cancel" @click="closeModal">取消</button>
+          <button class="modal-btn confirm" :disabled="!isFormValid" @click="saveProduct">保存</button>
         </div>
       </div>
-    </van-dialog>
+    </div>
 
     <!-- 确认入库弹窗 -->
-    <van-dialog
-      v-model:show="showConfirmModal" title="确认入库" show-cancel-button
-      confirm-button-text="确认入库" cancel-button-text="取消"
-      class-name="large-dialog"
-      @confirm="executeInbound" @cancel="showConfirmModal = false"
-    >
-      <div class="dialog-content">
-        <p>
-          您确定要将选中的
-          <span class="font-semibold">{{ products.length }}</span>
-          个成品进行入库操作吗？
-        </p>
+    <div v-if="showConfirmModal" class="tech-modal-overlay" @click.self="showConfirmModal = false">
+      <div class="tech-modal success-modal">
+        <!-- <button class="modal-close-btn" @click="showConfirmModal = false">
+          <i class="fas fa-times" />
+        </button> -->
+        <div class="modal-content-row">
+          <div class="modal-text">
+            <h3>确认入库</h3>
+            <p>您确定要将选中的 <span class="highlight">{{ products.length }}</span> 个成品进行入库操作吗？</p>
+          </div>
+          <div class="modal-icon">
+            <div class="icon-box">
+              <i class="fas fa-box" />
+              <i class="fas fa-check-circle check-icon" />
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="modal-btn cancel" @click="showConfirmModal = false">取消</button>
+          <button class="modal-btn confirm" @click="executeInbound">确认入库</button>
+        </div>
       </div>
-    </van-dialog>
-
-    <!-- 删除成品确认弹窗 -->
-    <van-dialog
-      v-model:show="showDeleteModal" title="确认删除" show-cancel-button
-      confirm-button-text="确认" cancel-button-text="取消"
-      class-name="large-dialog"
-      @confirm="confirmDelete" @cancel="showDeleteModal = false"
-    >
-      <div class="dialog-content">
-        <p>
-          你确认要删除掉该成品吗
-        </p>
+    </div>
+
+    <!-- 删除成品确认弹窗 - 科技感风格 -->
+    <div v-if="showDeleteModal" class="tech-modal-overlay" @click.self="showDeleteModal = false">
+      <div class="tech-modal warning-modal">
+        <!-- <button class="modal-close-btn" @click="showDeleteModal = false">
+          <i class="fas fa-times" />
+        </button> -->
+        <div class="modal-content-row">
+          <div class="modal-text">
+            <h3>确认删除</h3>
+            <p>你确认要删除掉该成品吗？</p>
+          </div>
+          <div class="modal-icon warning">
+            <div class="icon-box">
+              <i class="fas fa-trash" />
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="modal-btn cancel" @click="showDeleteModal = false">取消</button>
+          <button class="modal-btn confirm danger" @click="confirmDelete">确认删除</button>
+        </div>
       </div>
-    </van-dialog>
+    </div>
 
-    <Loading v-if="loading" />
+    <!-- Loading -->
+    <div v-if="loading" class="loading-overlay">
+      <div class="loading-spinner" />
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref, reactive, onMounted, computed } from 'vue';
+import { useRouter } from 'vue-router';
 import { showNotify } from 'vant';
-import PageHeader from '../common/PageHeader.vue';
 import { generateStockIn, getLocatorList } from '../api/finishProduct';
 import vSelect from 'vue-select';
 import 'vue-select/dist/vue-select.css';
 
-// 加载状态（预留给后续真实接口调用）
+// 图片资源
+import bgImg from '../assets/images/bj.png';
+
+const router = useRouter();
+
+// 返回主页
+const goHome = () => {
+    router.push('/home');
+};
+
+// 加载状态
 const loading = ref(false);
 
 // 仓库货位数据
@@ -290,449 +343,740 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* 页面容器 */
-.page-container {
-  display: flex;
-  flex-direction: column;
+/* ========== 基础样式 ========== */
+.stock-requisition-page {
+  width: 100%;
   height: 100vh;
-  background-color: #f9fafb;
+  max-height: 100vh;
+  position: relative;
+  font-family: 'Microsoft YaHei', sans-serif;
+  color: #fff;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
-/* 主内容区 - 可滚动 */
-.main-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1rem;
+/* 背景层 */
+.bg-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #041c3d;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  z-index: 0;
+}
+
+/* ========== 顶部标题区域 ========== */
+.header-section {
+  position: relative;
+  width: 100%;
+  padding: 20px 30px;
+  box-sizing: border-box;
+  z-index: 10;
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
-/* 页面标题行 */
-.page-header-row {
+.logout-btn {
+  position: absolute;
+  left: 30px;
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-bottom: 0.5rem;
+  gap: 8px;
+  background: linear-gradient(90deg, #1a4a7a 0%, #0d3a6a 100%);
+  border: 1px solid #2a7fff;
+  border-radius: 8px;
+  padding: 10px 20px;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.logout-btn:hover {
+  background: linear-gradient(90deg, #2a5a8a 0%, #1d4a7a 100%);
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.4);
+}
+
+.logout-btn i {
+  font-size: 18px;
+  color: #00bfff;
 }
 
-/* 页面标题 */
-.page-title h2 {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #111827;
+.page-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #ffffff;
+  letter-spacing: 2px;
   margin: 0;
+  text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
 }
 
-/* 顶部统计与按钮行 */
-.top-actions-row {
+/* 右侧操作按钮 */
+.header-actions {
+  position: absolute;
+  right: 30px;
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-bottom: 0.5rem;
+  gap: 15px;
 }
 
-.top-actions-info {
-  font-size: 0.875rem;
-  color: #4b5563;
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: linear-gradient(90deg, #1a6a5a 0%, #0d5a4a 100%);
+  border: 1px solid #2affcf;
+  border-radius: 8px;
+  padding: 10px 20px;
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
 }
 
-/* 卡片容器 */
-.card-container {
+.action-btn:hover {
+  background: linear-gradient(90deg, #2a7a6a 0%, #1d6a5a 100%);
+  box-shadow: 0 0 15px rgba(42, 255, 207, 0.4);
+}
+
+.action-btn i {
+  font-size: 16px;
+  color: #2affcf;
+}
+
+/* ========== 主内容区域 ========== */
+.main-content {
   flex: 1;
-  background-color: white;
-  border-radius: 0.5rem;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  padding: 0 30px;
+  position: relative;
+  z-index: 10;
   min-height: 0;
+  overflow: hidden;
 }
 
-/* 卡片列表包装器（可滚动区域） */
-.card-list-wrapper {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.5rem;
-  min-height: 0;
+/* 统计信息 */
+.stats-section {
+  background: rgba(9, 61, 140, 0.5);
+  border: 1px solid #049FD8;
+  border-radius: 12px;
+  padding: 15px 20px;
+  margin-bottom: 15px;
+  flex-shrink: 0;
+}
+
+.stats-text {
+  color: #7ec8ff;
+  font-size: 16px;
 }
 
-/* 卡片列表（单列布局） */
-.card-list {
+/* ========== 卡片网格区域 ========== */
+.card-grid-wrapper {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-bottom: 10px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 
-/* 底部统计区域（固定） */
-.pagination-wrapper {
-  padding: 0.5rem 1.5rem;
-  border-top: 1px solid #e5e7eb;
-  border-bottom: 1px solid #e5e7eb;
-  background-color: #fafafa;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
+.card-grid-wrapper::-webkit-scrollbar {
+  display: none;
 }
 
-/* 库存卡片样式 */
-.inventory-card {
-  transition: all 0.25s ease;
-  border: 2px solid #e5e7eb;
-  background-color: #ffffff;
-  border-radius: 0.5rem;
-  padding: 1rem 1.5rem;
+/* 空状态 */
+.empty-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #7ec8ff;
+  padding: 60px 0;
 }
 
-.inventory-card:hover {
-  border-color: #93c5fd;
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
+.empty-icon {
+  font-size: 80px;
+  margin-bottom: 20px;
+  opacity: 0.5;
 }
 
-/* 卡片标题区域 */
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
+.empty-state p {
+  font-size: 18px;
+  margin: 0;
 }
 
-.card-header > * {
-  margin-right: 1.5rem;
+/* 卡片网格 - 4列布局 */
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
 }
 
-.card-header > *:last-child {
-  margin-right: 0;
+/* ========== 设备卡片样式 ========== */
+.inventory-card {
+  background: rgba(5, 30, 60, 0.8);
+  border: 2px solid #0d4a8a;
+  border-radius: 12px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  position: relative;
 }
 
-.card-header-left {
+.inventory-card:hover {
+  border-color: #1e90ff;
+  box-shadow: 0 0 20px rgba(30, 144, 255, 0.3);
+  transform: translateY(-3px);
+}
+
+/* 卡片序号 - 左上角 */
+.card-index {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  width: 36px;
+  height: 36px;
+  background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%);
+  border-radius: 50%;
   display: flex;
   align-items: center;
-  flex: 1;
-  min-width: 0;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: #fff;
+  z-index: 2;
+  box-shadow: 0 2px 8px rgba(0, 191, 255, 0.4);
 }
 
-.card-header-right {
+/* 图片区域 */
+.card-image {
+  width: 100%;
+  aspect-ratio: 3 / 4;
   display: flex;
   align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  margin: 15px;
+  margin-bottom: 10px;
+  border-radius: 8px;
+  width: calc(100% - 30px);
 }
 
-.card-header-right > * {
-  margin-left: 1rem;
+.image-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #f0f4f8 0%, #e8ecf0 100%);
+  color: #fff;
+  font-size: 48px;
 }
 
-.card-header-right > *:first-child {
-  margin-left: 0;
+/* 信息区域 */
+.card-info {
+  padding: 10px 15px 15px;
 }
 
-/* 卡片标题信息 */
-.card-title-info {
+.info-row {
   display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.card-title-info > * {
-  margin-bottom: 0.25rem;
+  align-items: baseline;
+  margin-bottom: 6px;
+  font-size: 14px;
 }
 
-.card-title-info > *:last-child {
+.info-row:last-child {
   margin-bottom: 0;
 }
 
-.card-name {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: #111827;
-  line-height: 1.5;
+.info-label {
+  color: #7ec8ff;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  margin-right: 5px;
 }
 
-.card-subtitle {
-  font-size: 0.875rem;
-  color: #6b7280;
-  line-height: 1.4;
+.info-value {
+  color: #fff;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-/* 卡片位置信息 */
-.card-location {
+/* 位置行样式 */
+.location-row {
   display: flex;
   align-items: center;
-  padding: 0.5rem 1rem;
-  background-color: #f3f4f6;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  color: #374151;
-  white-space: nowrap;
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid rgba(30, 144, 255, 0.2);
 }
 
-.card-location i {
-  color: #3b82f6;
+.location-icon {
+  color: #00bfff;
+  font-size: 12px;
+  margin-right: 6px;
 }
 
-/* Ant Design 卡片头部样式 */
-:deep(.ant-card-head) {
-  border-bottom: none;
-  padding: 1rem 1.5rem;
-  min-height: auto;
+/* ========== 操作区域 ========== */
+.card-action-section {
+  padding: 12px 15px;
+  border-top: 1px solid rgba(30, 144, 255, 0.3);
+  background: rgba(9, 61, 140, 0.3);
+  min-height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 删除按钮 */
+.delete-btn {
+  padding: 8px 20px;
+  background: rgba(239, 68, 68, 0.2);
+  border: 1px solid #ef4444;
+  border-radius: 6px;
+  color: #fca5a5;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
-:deep(.ant-card-head-title) {
-  padding: 0;
+.delete-btn:hover {
+  background: rgba(239, 68, 68, 0.4);
+  box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
 }
 
-:deep(.ant-card-body) {
-  padding: 0;
+/* ========== 底部操作按钮 ========== */
+.bottom-actions {
+  width: 100%;
+  padding: 15px 30px;
+  box-sizing: border-box;
+  background: rgba(4, 28, 61, 0.95);
+  z-index: 20;
+  flex-shrink: 0;
 }
 
-/* 按钮样式与其他页面统一 */
-:deep(.ant-btn-primary) {
-  background-color: #3b82f6;
-  border-color: #3b82f6;
+.submit-btn {
+  width: 100%;
+  padding: 18px 0;
+  background: #4a99e2;
+  border: none;
+  border-radius: 12px;
+  font-size: 24px;
+  font-weight: bold;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.3s;
+  letter-spacing: 8px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
-:deep(.ant-btn-primary:hover) {
-  background-color: #2563eb;
-  border-color: #2563eb;
+.submit-btn:hover:not(:disabled) {
+  box-shadow: 0 0 30px rgba(74, 153, 226, 0.6);
+  transform: translateY(-2px);
 }
 
-:deep(.ant-btn[disabled]) {
+.submit-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-/* 删除按钮样式 */
-.delete-btn {
-  background-color: white !important;
-  border-color: #ef4444 !important;
-  color: #ef4444 !important;
-  transition: all 0.2s ease;
+/* ========== 科技感弹窗样式 ========== */
+.tech-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(4, 28, 61, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+}
+
+.tech-modal {
+  background: linear-gradient(135deg, #0a3d6d 0%, #041c3d 100%);
+  border: 1px solid #049FD8;
+  border-radius: 16px;
+  width: 90%;
+  max-width: 500px;
+  position: relative;
+  box-shadow: 0 0 40px rgba(4, 159, 216, 0.3);
+}
+
+.modal-close-btn {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  width: 36px;
+  height: 36px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: 50%;
+  color: #7ec8ff;
+  font-size: 18px;
+  cursor: pointer;
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-:deep(.delete-btn.van-button--danger) {
-  background-color: white !important;
-  border-color: #ef4444 !important;
-  color: #ef4444 !important;
+.modal-close-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: #fff;
 }
 
-.delete-btn:hover,
-:deep(.delete-btn.van-button--danger:active) {
-  background-color: #fef2f2 !important;
-  border-color: #dc2626 !important;
-  color: #dc2626 !important;
+.modal-header {
+  padding: 30px 30px 20px;
 }
 
-/* 自定义头像 */
-.custom-avatar {
-  width: 42px;
-  height: 42px;
-  border-radius: 50%;
-  background-color: #3b82f6;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 20px;
-  flex-shrink: 0;
+.modal-header h3 {
+  font-size: 22px;
+  font-weight: bold;
+  color: #fff;
+  margin: 0 0 8px 0;
 }
 
-/* 大字体防误触弹窗样式 */
-:deep(.large-dialog) {
-  width: 85vw !important;
-  max-width: 600px !important;
-  border-radius: 16px !important;
-  z-index: 2000 !important;
+.modal-header p {
+  font-size: 14px;
+  color: #7ec8ff;
+  margin: 0;
 }
 
-/* 确保 Dialog 遮罩层不会覆盖下拉菜单 */
-:deep(.van-overlay) {
-  z-index: 1999 !important;
+.modal-body {
+  padding: 0 30px 20px;
 }
 
-:deep(.large-dialog .van-dialog__header) {
-  padding-top: 2rem !important;
-  padding-bottom: 1rem !important;
-  padding-left: 1.5rem !important;
-  padding-right: 1.5rem !important;
-  font-size: 1.5rem !important;
-  font-weight: 700 !important;
-  color: #111827 !important;
+.form-item {
+  margin-bottom: 20px;
 }
 
-:deep(.large-dialog .van-dialog__footer) {
-  padding-top: 1rem !important;
-  padding-bottom: 1.5rem !important;
-  padding-left: 1.5rem !important;
-  padding-right: 1.5rem !important;
-  display: flex;
+.form-item:last-child {
+  margin-bottom: 0;
 }
 
-:deep(.large-dialog .van-dialog__footer > *) {
-  margin-right: 1rem;
+.form-item label {
+  display: block;
+  font-size: 14px;
+  color: #7ec8ff;
+  margin-bottom: 8px;
+  font-weight: 500;
 }
 
-:deep(.large-dialog .van-dialog__footer > *:last-child) {
-  margin-right: 0;
+.form-item input {
+  width: 100%;
+  padding: 12px 15px;
+  background: rgba(13, 58, 106, 0.8);
+  border: 1px solid #2a7fff;
+  border-radius: 8px;
+  color: #fff;
+  font-size: 15px;
+  outline: none;
+  transition: all 0.3s;
+  box-sizing: border-box;
 }
 
-:deep(.large-dialog .van-dialog__cancel),
-:deep(.large-dialog .van-dialog__confirm) {
-  flex: 1;
-  height: 56px !important;
-  font-size: 1.125rem !important;
-  font-weight: 600 !important;
-  border-radius: 8px !important;
-  border: none !important;
+.form-item input::placeholder {
+  color: #5a8abf;
 }
 
-:deep(.large-dialog .van-dialog__cancel) {
-  background-color: #f3f4f6 !important;
-  color: #374151 !important;
+.form-item input:focus {
+  border-color: #00bfff;
+  box-shadow: 0 0 10px rgba(0, 191, 255, 0.3);
 }
 
-:deep(.large-dialog .van-dialog__cancel:active) {
-  background-color: #e5e7eb !important;
+.modal-footer {
+  padding: 20px 30px 30px;
+  display: flex;
+  gap: 15px;
 }
 
-:deep(.large-dialog .van-dialog__confirm) {
-  background-color: #10b981 !important;
-  color: white !important;
+.modal-btn {
+  flex: 1;
+  padding: 14px 0;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
 }
 
-:deep(.large-dialog .van-dialog__confirm:active) {
-  background-color: #059669 !important;
+.modal-btn.cancel {
+  background: transparent;
+  border: 1px solid #2a7fff;
+  color: #7ec8ff;
 }
 
-:deep(.large-dialog .van-dialog__confirm:disabled) {
-  background-color: #d1d5db !important;
-  color: #9ca3af !important;
+.modal-btn.cancel:hover {
+  background: rgba(42, 127, 255, 0.2);
 }
 
-/* 大弹窗表单样式 */
-.large-dialog-form {
-  padding: 1.5rem 2rem 2rem 2rem;
+.modal-btn.confirm {
+  background: linear-gradient(90deg, #1e90ff 0%, #00bfff 100%);
+  border: none;
+  color: #fff;
 }
 
-.large-form-item {
-  margin-bottom: 1.5rem;
+.modal-btn.confirm:hover:not(:disabled) {
+  box-shadow: 0 0 20px rgba(30, 144, 255, 0.5);
 }
 
-.large-form-item:last-child {
-  margin-bottom: 0;
+.modal-btn.confirm:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-.large-form-label {
-  display: block;
-  margin-bottom: 0.75rem;
-  font-weight: 600;
-  color: #111827;
-  font-size: 1.125rem;
+.modal-btn.confirm.danger {
+  background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
 }
 
-:deep(.large-input .van-cell) {
-  padding: 0.875rem 1rem;
-  font-size: 1rem;
-  border: 2px solid #e5e7eb;
-  border-radius: 8px;
+.modal-btn.confirm.danger:hover {
+  box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
 }
 
-:deep(.large-input .van-field__control) {
-  font-size: 1rem;
+/* 成功/警告弹窗样式 */
+.modal-content-row {
+  padding: 30px;
+  display: flex;
+  align-items: center;
+  gap: 30px;
 }
 
-.large-select {
-  width: 100%;
-  font-size: 1rem;
+.modal-text {
+  flex: 1;
 }
 
-:deep(.large-select .vs__dropdown-toggle) {
-  padding: 0.75rem 1rem;
-  border: 2px solid #e5e7eb;
-  border-radius: 8px;
-  min-height: 50px;
+.modal-text h3 {
+  font-size: 22px;
+  font-weight: bold;
+  color: #fff;
+  margin: 0 0 12px 0;
 }
 
-:deep(.large-select .vs__search) {
-  font-size: 1rem;
-  padding: 0;
+.modal-text p {
+  font-size: 15px;
+  color: #7ec8ff;
+  margin: 0;
+  line-height: 1.6;
 }
 
-:deep(.large-select .vs__selected) {
-  font-size: 1rem;
-  padding: 0;
-  margin: 0;
+.modal-text .highlight {
+  color: #00bfff;
+  font-weight: bold;
 }
 
-:deep(.large-select .vs__dropdown-menu) {
-  font-size: 1rem;
-  border: 2px solid #e5e7eb;
-  border-radius: 8px;
-  z-index: 99999 !important;
-  position: fixed !important;
+.modal-icon {
+  flex-shrink: 0;
 }
 
-/* 确保下拉菜单显示在最上层 */
-:deep(.v-select.vs--open .vs__dropdown-menu) {
-  z-index: 99999 !important;
+.icon-box {
+  width: 80px;
+  height: 80px;
+  background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 36px;
+  color: #fff;
+  position: relative;
+  transform: perspective(100px) rotateY(-10deg);
+  box-shadow: 0 10px 30px rgba(0, 191, 255, 0.3);
+}
+
+.icon-box .check-icon {
+  position: absolute;
+  bottom: -5px;
+  right: -5px;
+  font-size: 24px;
+  color: #10b981;
+  background: #041c3d;
+  border-radius: 50%;
+  padding: 2px;
 }
 
-:deep(.large-select .vs__dropdown-option) {
-  padding: 0.875rem 1rem;
+.modal-icon.warning .icon-box {
+  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
+  box-shadow: 0 10px 30px rgba(239, 68, 68, 0.3);
 }
 
-/* 全局确保 v-select 下拉菜单在最上层 */
-:deep(.vs__dropdown-menu) {
-  z-index: 99999 !important;
+/* Vue Select 深色主题 */
+:deep(.dark-select .vs__dropdown-toggle) {
+  background: rgba(13, 58, 106, 0.8);
+  border: 1px solid #2a7fff;
+  border-radius: 8px;
+  padding: 8px 12px;
+  min-height: 44px;
 }
 
-/* 确认弹窗内容样式 */
-.dialog-content {
-  padding: 1.5rem 2rem 2rem 2rem;
+:deep(.dark-select .vs__selected) {
+  color: #fff;
 }
 
-.dialog-content p {
-  margin: 0;
-  font-size: 1.125rem;
-  line-height: 1.8;
-  color: #374151;
-  text-align: center;
+:deep(.dark-select .vs__search) {
+  color: #fff;
 }
 
-.dialog-content p.hint-text {
-  margin-top: 0.5rem;
-  font-size: 0.95rem;
-  color: #6b7280;
+:deep(.dark-select .vs__search::placeholder) {
+  color: #5a8abf;
 }
 
-:deep(.van-field) {
-  border: 1px solid #ccc;
-  border-radius: 6px;
+:deep(.dark-select .vs__actions svg) {
+  fill: #7ec8ff;
 }
-:deep(.van-cell) {
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  padding: 6px 8px !important;
+
+:deep(.dark-select .vs__dropdown-menu) {
+  background: rgba(13, 58, 106, 0.95);
+  border: 1px solid #2a7fff;
+  border-radius: 8px;
+  z-index: 99999;
 }
-</style>
 
-<style>
-/* 全局样式：确保 v-select 下拉菜单在模态框之上 */
-.vs__dropdown-menu {
-  z-index: 99999 !important;
+:deep(.dark-select .vs__dropdown-option) {
+  color: #fff;
+  padding: 10px 15px;
 }
 
-.v-select .vs__dropdown-menu {
-  z-index: 99999 !important;
+:deep(.dark-select .vs__dropdown-option--highlight) {
+  background: rgba(30, 144, 255, 0.3);
 }
 
-/* 确保附加到 body 的下拉菜单在最上层 */
-body > .v-select-menu {
-  z-index: 99999 !important;
+/* ========== Loading 遮罩 ========== */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(4, 28, 61, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.loading-spinner {
+  width: 60px;
+  height: 60px;
+  border: 4px solid rgba(30, 144, 255, 0.3);
+  border-top-color: #00bfff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ========== 响应式 - 横屏 ========== */
+@media screen and (orientation: landscape) {
+  .header-section {
+    padding: 10px 20px;
+  }
+
+  .page-title {
+    font-size: 22px;
+  }
+
+  .logout-btn {
+    padding: 6px 14px;
+    font-size: 13px;
+    left: 20px;
+  }
+
+  .header-actions {
+    right: 20px;
+  }
+
+  .action-btn {
+    padding: 6px 14px;
+    font-size: 12px;
+  }
+
+  .main-content {
+    padding: 0 20px;
+  }
+
+  .card-grid {
+    grid-template-columns: repeat(6, 1fr);
+    gap: 15px;
+  }
+
+  .card-index {
+    width: 24px;
+    height: 24px;
+    font-size: 11px;
+    top: 6px;
+    left: 6px;
+  }
+
+  .card-image {
+    margin: 10px;
+    margin-bottom: 8px;
+    width: calc(100% - 20px);
+  }
+
+  .image-placeholder {
+    font-size: 36px;
+  }
+
+  .card-info {
+    padding: 6px 10px 8px;
+  }
+
+  .info-row {
+    font-size: 11px;
+    margin-bottom: 3px;
+  }
+
+  .card-action-section {
+    padding: 8px 10px;
+    min-height: 40px;
+  }
+
+  .delete-btn {
+    padding: 5px 12px;
+    font-size: 11px;
+  }
+
+  .bottom-actions {
+    padding: 10px 20px;
+  }
+
+  .submit-btn {
+    padding: 12px 0;
+    font-size: 18px;
+    letter-spacing: 6px;
+    border-radius: 8px;
+  }
 }
+</style>
 
-body > .vs__dropdown-menu {
+<style>
+/* 全局样式：确保 v-select 下拉菜单在模态框之上 */
+.vs__dropdown-menu {
   z-index: 99999 !important;
 }
 

src/finishProduct/FinishProductOut.vue

@@ -1,27 +1,42 @@
-<!-- 成品出库 -->
+<!-- 成品出库 - 智能仓储风格 -->
 <template>
-  <div class="page-container">
-    <!-- 顶部信息栏 -->
-    <PageHeader title="成品出库管理" />
+  <div class="stock-requisition-page">
+    <!-- 背景层 -->
+    <div class="bg-layer" :style="{ backgroundImage: `url(${bgImg})` }" />
+
+    <!-- 顶部标题区域 -->
+    <div class="header-section">
+      <button class="logout-btn" @click="goHome">
+        <i class="fas fa-home" />
+        <span>主页</span>
+      </button>
+      <h1 class="page-title">成品出库</h1>
+    </div>
 
     <!-- 主内容区域 -->
     <main class="main-content">
       <!-- 筛选区域 -->
-      <FilterPanel :enable-collapse="false" :active-count="activeFilterCount">
-        <div class="filter-form">
+      <div class="filter-section">
+        <div class="filter-row">
           <div class="filter-item">
-            <label class="filter-label">名称:</label>
-            <van-field v-model="searchForm.inventoryName" placeholder="输入名称" class="filter-input" @keyup.enter="handleSearch" />
+            <label class="filter-label">名称</label>
+            <input
+              v-model="searchForm.inventoryName" type="text" placeholder="输入名称"
+              class="filter-input dark-input" @keyup.enter="handleSearch"
+            />
           </div>
           <div class="filter-item">
-            <label class="filter-label">编号:</label>
-            <van-field v-model="searchForm.inventoryNo" placeholder="输入编号" class="filter-input" @keyup.enter="handleSearch" />
+            <label class="filter-label">编号</label>
+            <input
+              v-model="searchForm.inventoryNo" type="text" placeholder="输入编号"
+              class="filter-input dark-input" @keyup.enter="handleSearch"
+            />
           </div>
           <div class="filter-item">
-            <label class="filter-label">仓库:</label>
+            <label class="filter-label">仓库</label>
             <v-select
               v-model="searchForm.warehouseId" :options="warehouseList" :reduce="item => item.id" label="name"
-              placeholder="选择仓库" :clearable="true" :filterable="true" class="filter-select"
+              placeholder="选择仓库" :clearable="true" :filterable="true" class="filter-select dark-select"
               @update:model-value="handleSearch"
             >
               <template #no-options>
@@ -29,155 +44,146 @@
               </template>
             </v-select>
           </div>
-          <div class="filter-item filter-buttons">
-            <van-button type="primary" @click="handleSearch">
-              <i class="fas fa-search mr-1" /> 搜索
-            </van-button>
-            <van-button class="ml-2" @click="handleReset">
-              <i class="fas fa-redo mr-1" /> 重置
-            </van-button>
+          <div class="filter-buttons">
+            <button class="search-btn" @click="handleSearch">搜索</button>
+            <button class="reset-btn" @click="handleReset">重置</button>
           </div>
         </div>
-      </FilterPanel>
+      </div>
 
 
-      <!-- 卡片容器 -->
-      <div class="card-container">
-        <!-- 全选控制栏 -->
-        <div v-if="finishProductList.length > 0" class="select-all-bar">
-          <van-checkbox :model-value="isAllSelected" @update:model-value="toggleSelectAll">
-            <span class="select-all-text">全选当前页（已选 {{ selectedProducts.length }} 项）</span>
-          </van-checkbox>
+      <!-- 全选控制栏 -->
+      <div v-if="finishProductList.length > 0" class="select-all-bar">
+        <van-checkbox :model-value="isAllSelected" @update:model-value="toggleSelectAll">
+          <span class="select-all-text">全选当前页（已选 {{ selectedProducts.length }} 项）</span>
+        </van-checkbox>
+      </div>
+
+      <!-- 卡片网格区域 -->
+      <div ref="cardGridWrapper" class="card-grid-wrapper" @scroll="handleScroll">
+        <!-- 空状态 -->
+        <div v-if="finishProductList.length === 0 && !loading" class="empty-state">
+          <i class="fas fa-box-open empty-icon" />
+          <p>暂无成品</p>
         </div>
 
-        <!-- 卡片列表区域  -->
-        <div class="card-list-wrapper">
-          <van-empty v-if="finishProductList.length === 0" description="暂无成品" />
+        <!-- 卡片网格 -->
+        <div v-else class="card-grid">
+          <div
+            v-for="(product, index) in finishProductList" :key="product.id"
+            class="inventory-card"
+            :class="{ 'selected': selectedProducts.includes(product.id) }"
+            @click="toggleSelect(product.id)"
+          >
+            <!-- 卡片序号 -->
+            <div class="card-index">{{ index + 1 }}</div>
+
+            <!-- 图片区域 -->
+            <div class="card-image">
+              <div class="image-placeholder">
+                <i class="fas fa-box" />
+              </div>
+            </div>
 
-          <!-- 卡片列表 -->
-          <div v-else class="card-list">
-            <div
-              v-for="product in finishProductList" :key="product.id"
-              :class="{ 'selected-card': selectedProducts.includes(product.id) }" class="inventory-card"
-              @click="toggleSelect(product.id)"
-            >
-              <div class="card-header">
-                <div class="card-header-left">
-                  <van-checkbox
-                    :model-value="selectedProducts.includes(product.id)" @click.stop
-                    @update:model-value="checked => handleCheckboxChange(checked, product.id)"
-                  />
-                  <div class="custom-avatar ml-3">
-                    <i class="fas fa-box" />
-                  </div>
-                  <div class="ml-4 card-title-info">
-                    <div class="card-name">{{ product.inventoryName }}</div>
-                    <div class="card-subtitle">编号: {{ product.inventoryNo }}</div>
-                  </div>
-                </div>
-                <div class="card-header-right">
-                  <div class="card-location">
-                    <i class="fas fa-map-marker-alt mr-2" />
-                    <span>{{ product.inventoryPosition }}</span>
-                    <span class="mx-2">/</span>
-                    <span>{{ product.inventoryWarehouse }}</span>
-                  </div>
-                </div>
+            <!-- 信息区域 -->
+            <div class="card-info">
+              <div class="info-row">
+                <span class="info-label">名称:</span>
+                <span class="info-value">{{ product.inventoryName || '-' }}</span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">编号:</span>
+                <span class="info-value">{{ product.inventoryNo || '-' }}</span>
+              </div>
+              <div class="info-row location-row">
+                <i class="fas fa-map-marker-alt location-icon" />
+                <span class="info-value">{{ product.inventoryPosition || '-' }} / {{ product.inventoryWarehouse || '-' }}</span>
               </div>
             </div>
+
+            <!-- 选中状态指示 -->
+            <div v-if="selectedProducts.includes(product.id)" class="selected-indicator">
+              <i class="fas fa-check" />
+            </div>
           </div>
         </div>
 
-        <!-- 分页区域（固定底部） -->
-        <div v-if="finishProductList.length > 0" class="pagination-wrapper">
-          <div class="pagination-info">
-            第{{ (pagination.current_page - 1) * pagination.per_page + 1 }}-{{ Math.min(pagination.current_page *
-              pagination.per_page, pagination.total) }}条，共{{ pagination.total }}条
-          </div>
-          <div class="pagination-controls">
-            <button
-              class="pagination-btn" :disabled="pagination.current_page === 1"
-              @click="handlePageChange(pagination.current_page - 1)"
-            >
-              &lt;
-            </button>
-            <template v-for="page in getPageNumbers()" :key="page">
-              <button
-                v-if="page !== '...'" class="pagination-btn" :class="{ active: page === pagination.current_page }"
-                @click="handlePageChange(page)"
-              >
-                {{ page }}
-              </button>
-              <span v-else class="pagination-ellipsis">...</span>
-            </template>
-            <button
-              class="pagination-btn"
-              :disabled="pagination.current_page === Math.ceil(pagination.total / pagination.per_page)"
-              @click="handlePageChange(pagination.current_page + 1)"
-            >
-              &gt;
-            </button>
-          </div>
-          <div class="pagination-size">
-            <v-select
-              v-model="pagination.per_page" :options="pageSizeOptions" :clearable="false" :searchable="false"
-              append-to-body :calculate-position="withPopper" class="size-select"
-              @update:model-value="handlePageSizeChange"
-            >
-              <template #selected-option="{ label }">
-                {{ label }}条/页
-              </template>
-              <template #option="{ label }">
-                {{ label }}条/页
-              </template>
-            </v-select>
-          </div>
+        <!-- 加载更多提示 -->
+        <div v-if="loadingMore" class="loading-more">
+          <div class="loading-more-spinner" />
+          <span>加载中...</span>
+        </div>
+        <div v-else-if="noMoreData && finishProductList.length > 0" class="no-more-data">
+          <span>没有更多数据了</span>
         </div>
       </div>
     </main>
 
     <!-- 底部操作按钮 -->
     <div class="bottom-actions">
-      <van-button
-        type="primary" size="large" :disabled="selectedProducts.length === 0" class="add-to-cart-btn"
-        @click="confirmOutbound"
-      >
-        <i class="fas fa-check-circle mr-2" />
+      <button class="submit-btn" :disabled="selectedProducts.length === 0" @click="confirmOutbound">
         确认出库
-      </van-button>
+      </button>
     </div>
 
     <!-- 确认出库弹窗 -->
-    <van-dialog
-      v-model:show="showConfirmModal" title="确认出库" show-cancel-button
-      confirm-button-text="确认出库" cancel-button-text="取消"
-      class-name="large-dialog"
-      @confirm="executeOutbound" @cancel="showConfirmModal = false"
-    >
-      <div class="dialog-content">
-        <p>
-          您确定要将选中的
-          <span class="font-semibold">{{ selectedProducts.length }}</span>
-          个成品进行出库操作吗？
-        </p>
+    <div v-if="showConfirmModal" class="tech-modal-overlay" @click.self="showConfirmModal = false">
+      <div class="tech-modal success-modal">
+        <!-- <button class="modal-close-btn" @click="showConfirmModal = false">
+          <i class="fas fa-times" />
+        </button> -->
+        <div class="modal-content-row">
+          <div class="modal-text">
+            <h3>确认出库</h3>
+            <p>您确定要将选中的 <span class="highlight">{{ selectedProducts.length }}</span> 个成品进行出库操作吗？</p>
+          </div>
+          <div class="modal-icon">
+            <div class="icon-box">
+              <i class="fas fa-box" />
+              <i class="fas fa-check-circle check-icon" />
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="modal-btn cancel" @click="showConfirmModal = false">取消</button>
+          <button class="modal-btn confirm" @click="executeOutbound">确认出库</button>
+        </div>
       </div>
-    </van-dialog>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading" class="loading-overlay">
+      <div class="loading-spinner" />
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, nextTick } from 'vue';
+import { useRouter } from 'vue-router';
 import { showNotify } from 'vant';
-import PageHeader from '../common/PageHeader.vue';
-import FilterPanel from '../common/FilterPanel.vue';
 import { getWarehouseList } from '../api/stock.js';
 import { queryFinishProduct, generateStockOut } from '../api/finishProduct.js';
 import vSelect from 'vue-select';
 import 'vue-select/dist/vue-select.css';
-import { createPopper } from '@popperjs/core';
+
+// 图片资源
+import bgImg from '../assets/images/bj.png';
+
+const router = useRouter();
+
+// 返回主页
+const goHome = () => {
+    router.push('/home');
+};
+
+// 滚动容器ref
+const cardGridWrapper = ref(null);
 
 // 加载状态
 const loading = ref(false);
+const loadingMore = ref(false);
+const noMoreData = ref(false);
 
 // 仓库列表
 const warehouseList = ref([]);
@@ -189,13 +195,10 @@ const searchForm = ref({
     warehouseId: undefined,
 });
 
-// 分页
-const pagination = ref({
-    total: 0,
-    current_page: 1,
-    per_page: 20,
-});
-const pageSizeOptions = [10, 20, 50, 100, 200, 500];
+// 无限滚动分页参数
+const pageSize = 20;
+const currentStart = ref(0);
+const total = ref(0);
 
 const finishProductList = ref([]);
 
@@ -211,84 +214,71 @@ const isAllSelected = computed(() => {
 // 弹窗与提示
 const showConfirmModal = ref(false);
 
-// 激活的筛选条件数量
-const activeFilterCount = computed(() => {
-    let count = 0;
-    if (searchForm.value.warehouseId) count++;
-    if (searchForm.value.inventoryName) count++;
-    if (searchForm.value.inventoryNo) count++;
-    return count;
-});
-
-// 分页改变
-const handlePageChange = page => {
-    pagination.value.current_page = page;
-    getList();
+// 滚动事件处理 - 无限滚动
+const handleScroll = e => {
+    const container = e.target;
+    const { scrollTop, scrollHeight, clientHeight } = container;
+    
+    // 距离底部100px时触发加载
+    if (scrollHeight - scrollTop - clientHeight < 100) {
+        loadMore();
+    }
 };
 
-// 每页大小改变
-const handlePageSizeChange = pageSize => {
-    pagination.value.per_page = pageSize;
-    pagination.value.current_page = 1;
-    getList();
+// 检查容器是否需要继续加载（当内容不足以产生滚动条时自动加载更多）
+const checkAndLoadMore = async () => {
+    await nextTick();
+    const container = cardGridWrapper.value;
+    if (!container) return;
+    
+    // 如果内容高度不足以产生滚动条，且还有更多数据，继续加载
+    if (container.scrollHeight <= container.clientHeight && !noMoreData.value && !loadingMore.value) {
+        loadMore();
+    }
 };
 
-// 获取分页页码数组
-const getPageNumbers = () => {
-    const totalPages = Math.ceil(pagination.value.total / pagination.value.per_page);
-    const current = pagination.value.current_page;
-    const pages = [];
+// 加载更多数据
+const loadMore = async () => {
+    if (loadingMore.value || noMoreData.value || loading.value) return;
+    
+    loadingMore.value = true;
+    
+    const params = {
+        ...searchForm.value,
+        range: {
+            start: currentStart.value,
+            length: pageSize,
+        },
+    };
 
-    if (totalPages <= 7) {
-        for (let i = 1; i <= totalPages; i++) {
-            pages.push(i);
-        }
-    } else {
-        if (current <= 3) {
-            for (let i = 1; i <= 5; i++) pages.push(i);
-            pages.push('...');
-            pages.push(totalPages);
-        } else if (current >= totalPages - 2) {
-            pages.push(1);
-            pages.push('...');
-            for (let i = totalPages - 4; i <= totalPages; i++) pages.push(i);
-        } else {
-            pages.push(1);
-            pages.push('...');
-            for (let i = current - 1; i <= current + 1; i++) pages.push(i);
-            pages.push('...');
-            pages.push(totalPages);
+    try {
+        const res = await queryFinishProduct(params);
+        if (res.errorCode === 0) {
+            if (res.datas && res.datas.length > 0) {
+                finishProductList.value = [...finishProductList.value, ...res.datas];
+                currentStart.value += res.datas.length;
+                total.value = res.total;
+                
+                // 检查是否还有更多数据
+                if (finishProductList.value.length >= res.total) {
+                    noMoreData.value = true;
+                } else {
+                    // 加载完成后检查是否需要继续加载
+                    checkAndLoadMore();
+                }
+            } else {
+                noMoreData.value = true;
+            }
         }
+    } catch (error) {
+        console.error('加载更多数据失败:', error);
+    } finally {
+        loadingMore.value = false;
     }
-    return pages;
-};
-
-// Popper 位置计算函数（用于 v-select 下拉菜单）
-const withPopper = (dropdownList, component, { width }) => {
-    dropdownList.style.width = width;
-    const popper = createPopper(component.$refs.toggle, dropdownList, {
-        placement: 'bottom',
-        modifiers: [
-            {
-                name: 'offset',
-                options: { offset: [0, -1] },
-            },
-            {
-                name: 'toggleClass',
-                enabled: true,
-                phase: 'write',
-                fn({ state }) {
-                    component.$el.classList.toggle('drop-up', state.placement === 'top');
-                },
-            },
-        ],
-    });
-    return () => popper.destroy();
 };
 
 // 搜索
 const handleSearch = () => {
-    pagination.value.current_page = 1;
     getList();
 };
 
@@ -299,7 +289,6 @@ const handleReset = () => {
         inventoryName: '',
         inventoryNo: '',
     };
-    pagination.value.current_page = 1;
     getList();
 };
 
@@ -358,14 +347,12 @@ const executeOutbound = async () => {
     if (selectedProducts.value.length === 0) return;
 
     loading.value = true;
-    const count = selectedProducts.value.length;
     try {
         const res = await generateStockOut(selectedProducts.value);
         if (res.errorCode === 0) {
             showNotify({ type: 'success', message: '出库成功' });
             selectedProducts.value = [];
-            pagination.value.current_page = 1;
-            getList();
+            getList(); // 重新加载列表
         } else {
             showNotify({ type: 'warning', message: res.errorMessage });
         }
@@ -377,34 +364,46 @@ const executeOutbound = async () => {
     }
 };
 
-// 获取成品列表
+// 初次加载成品列表
 const getList = async () => {
-
     loading.value = true;
+    currentStart.value = 0;
+    noMoreData.value = false;
+    
     const params = {
-        ...searchForm.value, range: {
-            start: (pagination.value.current_page - 1) * pagination.value.per_page,
-            length: pagination.value.per_page,
+        ...searchForm.value,
+        range: {
+            start: 0,
+            length: pageSize,
         },
     };
+    
     try {
         const res = await queryFinishProduct(params);
-
         if (res.errorCode === 0) {
             if (res.datas && res.datas.length > 0) {
                 finishProductList.value = res.datas;
-                pagination.value.total = res.total;
+                currentStart.value = res.datas.length;
+                total.value = res.total;
+                
+                if (finishProductList.value.length >= res.total) {
+                    noMoreData.value = true;
+                } else {
+                    // 初次加载完成后检查是否需要继续加载
+                    checkAndLoadMore();
+                }
             } else {
                 finishProductList.value = [];
-                pagination.value.total = 0;
+                total.value = 0;
+                noMoreData.value = true;
             }
         } else {
             finishProductList.value = [];
-            pagination.value.total = 0;
+            total.value = 0;
             showNotify({ type: 'danger', message: res.errorMessage });
         }
     } catch (error) {
-        console.error('获取成品列表API调用失败:', error);
+        console.error('获取成品列表失败:', error);
         showNotify({ type: 'danger', message: '获取成品列表失败' });
     } finally {
         loading.value = false;
@@ -439,575 +438,812 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* 页面容器 */
-.page-container {
-  display: flex;
-  flex-direction: column;
+/* ========== 基础样式 ========== */
+.stock-requisition-page {
+  width: 100%;
   height: 100vh;
-  background-color: #f9fafb;
+  max-height: 100vh;
+  position: relative;
+  font-family: 'Microsoft YaHei', sans-serif;
+  color: #fff;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
-/* 主内容区 - 可滚动 */
-.main-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1rem;
+/* 背景层 */
+.bg-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #041c3d;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  z-index: 0;
+}
+
+/* ========== 顶部标题区域 ========== */
+.header-section {
+  position: relative;
+  width: 100%;
+  padding: 20px 30px;
+  box-sizing: border-box;
+  z-index: 10;
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
-/* 筛选表单 */
-.filter-form {
+.logout-btn {
+  position: absolute;
+  left: 30px;
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
+  gap: 8px;
+  background: linear-gradient(90deg, #1a4a7a 0%, #0d3a6a 100%);
+  border: 1px solid #2a7fff;
+  border-radius: 8px;
+  padding: 10px 20px;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s;
 }
 
-.filter-form > * {
-  margin-right: 1rem;
-  margin-bottom: 0.4rem;
+.logout-btn:hover {
+  background: linear-gradient(90deg, #2a5a8a 0%, #1d4a7a 100%);
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.4);
 }
 
-.filter-item {
+.logout-btn i {
+  font-size: 18px;
+  color: #00bfff;
+}
+
+.page-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #ffffff;
+  letter-spacing: 2px;
+  margin: 0;
+  text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
+}
+
+/* ========== 主内容区域 ========== */
+.main-content {
+  flex: 1;
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  padding: 0 30px;
+  position: relative;
+  z-index: 10;
+  min-height: 0;
+  overflow: hidden;
 }
 
-.filter-item > * {
-  margin-right: 0.5rem;
+/* ========== 筛选区域 ========== */
+.filter-section {
+  background: rgba(9, 61, 140, 0.5);
+  border: 1px solid #049FD8;
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 15px;
+  flex-shrink: 0;
 }
 
-.filter-item > *:last-child {
-  margin-right: 0;
+.filter-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 20px;
+}
+
+.filter-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
 .filter-label {
-  font-size: 14px;
-  font-weight: 600;
+  font-size: 16px;
+  color: #7ec8ff;
   white-space: nowrap;
-  color: #374151;
+  font-weight: 500;
 }
 
 .filter-select {
   width: 200px;
-  position: relative;
-  z-index: 100;
 }
 
-.filter-input {
+.filter-input.dark-input {
   width: 200px;
+  padding: 10px 15px;
+  background: rgba(13, 58, 106, 0.8);
+  border: 1px solid #2a7fff;
+  border-radius: 6px;
+  color: #fff;
+  font-size: 14px;
+  outline: none;
+  transition: all 0.3s;
 }
 
-:deep(.filter-input .van-cell) {
-  padding: 8px 12px !important;
-  border: 1px solid #ccc !important;
-  border-radius: 4px !important;
-  background-color: white !important;
-  min-height: 32px !important;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+.filter-input.dark-input::placeholder {
+  color: #7ec8ff;
+  opacity: 0.7;
 }
 
-:deep(.filter-input .van-cell::after) {
-  display: none !important;
+.filter-input.dark-input:focus {
+  border-color: #00bfff;
+  box-shadow: 0 0 10px rgba(0, 191, 255, 0.3);
 }
 
-:deep(.filter-input .van-field__body) {
-  border: none !important;
+.filter-buttons {
+  display: flex;
+  gap: 15px;
+  margin-left: auto;
 }
 
-:deep(.filter-input .van-field__control) {
-  font-size: 14px;
+.search-btn,
+.reset-btn {
+  padding: 10px 30px;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+  border: none;
 }
 
-/* Vue Select 样式 */
-:deep(.v-select) {
-  font-size: 14px;
+.search-btn {
+  background: linear-gradient(90deg, #1e90ff 0%, #00bfff 100%);
+  color: #fff;
 }
 
-:deep(.v-select .vs__dropdown-toggle) {
-  border: 1px solid #d1d5db;
-  border-radius: 4px;
-  padding: 4px 8px;
-  min-height: 32px;
-  background: white;
+.search-btn:hover {
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.6);
+  transform: translateY(-2px);
 }
 
-:deep(.v-select .vs__dropdown-menu) {
-  z-index: 9999 !important;
-  border: 1px solid #d1d5db;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+.reset-btn {
+  background: rgba(13, 58, 106, 0.8);
+  border: 1px solid #2a7fff;
+  color: #fff;
 }
 
-:deep(.v-select .vs__selected) {
-  margin: 2px;
-  padding: 0 4px;
+.reset-btn:hover {
+  background: rgba(26, 74, 122, 0.8);
+  box-shadow: 0 0 10px rgba(30, 144, 255, 0.3);
 }
 
-:deep(.v-select .vs__search) {
-  padding: 0;
-  margin: 0;
+/* Vue Select 深色主题 */
+:deep(.dark-select .vs__dropdown-toggle) {
+  background: rgba(13, 58, 106, 0.8);
+  border: 1px solid #2a7fff;
+  border-radius: 6px;
+  padding: 6px 10px;
+  min-height: 40px;
 }
 
-:deep(.v-select .vs__actions) {
-  padding: 0 4px;
+:deep(.dark-select .vs__selected) {
+  color: #fff;
 }
 
-.filter-buttons {
-  display: flex;
+:deep(.dark-select .vs__search) {
+  color: #fff;
 }
 
-.filter-buttons > * {
-  margin-right: 0.5rem;
+:deep(.dark-select .vs__search::placeholder) {
+  color: #7ec8ff;
+  opacity: 0.7;
 }
 
-.filter-buttons > *:last-child {
-  margin-right: 0;
+:deep(.dark-select .vs__actions svg) {
+  fill: #7ec8ff;
 }
 
-/* 卡片容器 */
-.card-container {
-  flex: 1;
-  background-color: white;
-  border-radius: 0.5rem;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  min-height: 0;
+:deep(.dark-select .vs__dropdown-menu) {
+  background: rgba(13, 58, 106, 0.95);
+  border: 1px solid #2a7fff;
+  border-radius: 6px;
+  z-index: 9999;
+}
+
+:deep(.dark-select .vs__dropdown-option) {
+  color: #fff;
+  padding: 10px 15px;
 }
 
-/* 全选控制栏 */
+:deep(.dark-select .vs__dropdown-option--highlight) {
+  background: rgba(30, 144, 255, 0.3);
+}
+
+:deep(.filter-input .van-cell::after) {
+  display: none !important;
+}
+
+/* ========== 全选控制栏 ========== */
 .select-all-bar {
-  background-color: white;
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid #e5e7eb;
+  background: rgba(9, 61, 140, 0.3);
+  border: 1px solid #049FD8;
+  border-radius: 8px;
+  padding: 10px 20px;
+  margin-bottom: 10px;
   display: flex;
   align-items: center;
+  flex-shrink: 0;
 }
 
 .select-all-text {
-  font-size: 0.95rem;
-  color: #374151;
+  font-size: 14px;
+  color: #7ec8ff;
   font-weight: 500;
 }
 
-/* 卡片列表包装器（可滚动区域） */
-.card-list-wrapper {
+:deep(.select-all-bar .van-checkbox__label) {
+  color: #7ec8ff;
+}
+
+/* ========== 卡片网格区域 ========== */
+.card-grid-wrapper {
   flex: 1;
-  overflow-y: auto;
-  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
   min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-bottom: 10px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.card-grid-wrapper::-webkit-scrollbar {
+  display: none;
 }
 
-/* 卡片列表（单列布局） */
-.card-list {
+/* 空状态 */
+.empty-state {
+  flex: 1;
   display: flex;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #7ec8ff;
+  padding: 60px 0;
 }
 
-.card-list > * {
-  margin-bottom: 1rem;
+.empty-icon {
+  font-size: 80px;
+  margin-bottom: 20px;
+  opacity: 0.5;
 }
 
-.card-list > *:last-child {
-  margin-bottom: 0;
+.empty-state p {
+  font-size: 18px;
+  margin: 0;
+}
+
+/* 卡片网格 - 4列布局 */
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
 }
 
-/* 卡片样式 */
+/* ========== 设备卡片样式 ========== */
 .inventory-card {
+  background: rgba(5, 30, 60, 0.8);
+  border: 2px solid #0d4a8a;
+  border-radius: 12px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  position: relative;
   cursor: pointer;
-  transition: all 0.25s ease;
-  border: 2px solid #e5e7eb;
-  background-color: #ffffff;
-  border-radius: 0.5rem;
-  padding: 1rem 1.5rem;
 }
 
 .inventory-card:hover {
-  border-color: #93c5fd;
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
+  border-color: #1e90ff;
+  box-shadow: 0 0 20px rgba(30, 144, 255, 0.3);
+  transform: translateY(-3px);
 }
 
-.inventory-card.selected-card {
-  border-color: #3b82f6 !important;
-  background-color: #eff6ff;
-  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
+.inventory-card.selected {
+  border-color: #00bfff;
+  box-shadow: 0 0 25px rgba(0, 191, 255, 0.4);
 }
 
-/* 卡片标题区域 */
-.card-header {
+/* 卡片序号 - 左上角 */
+.card-index {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  width: 36px;
+  height: 36px;
+  background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%);
+  border-radius: 50%;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.card-header > * {
-  margin-right: 1.5rem;
-}
-
-.card-header > *:last-child {
-  margin-right: 0;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: #fff;
+  z-index: 2;
+  box-shadow: 0 2px 8px rgba(0, 191, 255, 0.4);
 }
 
-.card-header-left {
+/* 图片区域 */
+.card-image {
+  width: 100%;
+  aspect-ratio: 3 / 4;
   display: flex;
   align-items: center;
-  flex: 1;
-  min-width: 0;
+  justify-content: center;
+  overflow: hidden;
+  margin: 15px;
+  margin-bottom: 10px;
+  border-radius: 8px;
+  width: calc(100% - 30px);
 }
 
-.card-header-right {
+.image-placeholder {
   display: flex;
   align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+   background: linear-gradient(135deg, #f0f4f8 0%, #e8ecf0 100%);
+  color: #fff;
+  font-size: 48px;
 }
 
-.card-header-right > * {
-  margin-left: 1rem;
-}
-
-.card-header-right > *:first-child {
-  margin-left: 0;
+/* 信息区域 */
+.card-info {
+  padding: 10px 15px 15px;
 }
 
-/* 卡片标题信息 */
-.card-title-info {
+.info-row {
   display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.card-title-info > * {
-  margin-bottom: 0.25rem;
+  align-items: baseline;
+  margin-bottom: 6px;
+  font-size: 14px;
 }
 
-.card-title-info > *:last-child {
+.info-row:last-child {
   margin-bottom: 0;
 }
 
-.card-name {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: #111827;
-  line-height: 1.5;
+.info-label {
+  color: #7ec8ff;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  margin-right: 5px;
 }
 
-.card-subtitle {
-  font-size: 0.875rem;
-  color: #6b7280;
-  line-height: 1.4;
+.info-value {
+  color: #fff;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-/* 卡片位置信息 */
-.card-location {
+/* 位置行样式 */
+.location-row {
   display: flex;
   align-items: center;
-  padding: 0.5rem 1rem;
-  background-color: #f3f4f6;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  color: #374151;
-  white-space: nowrap;
-}
-
-.card-location i {
-  color: #3b82f6;
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid rgba(30, 144, 255, 0.2);
 }
 
-/* 卡片内容区域 */
-.card-body-content {
-  padding: 0 1.5rem 1rem 1.5rem;
+.location-icon {
+  color: #00bfff;
+  font-size: 12px;
+  margin-right: 6px;
 }
 
-.card-body-row {
+/* 选中状态指示 */
+.selected-indicator {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 36px;
+  height: 36px;
+  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
+  border-radius: 50%;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  font-size: 0.875rem;
-  color: #4b5563;
-  margin-top: 0.5rem;
-}
-
-.badge-category {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.25rem 0.75rem;
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  background-color: #dbeafe;
-  color: #1d4ed8;
+  justify-content: center;
+  color: #fff;
+  font-size: 18px;
+  z-index: 2;
+  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
 }
 
-/* 分页包装器（固定底部） */
-.pagination-wrapper {
-  padding: 0.5rem 1.5rem;
-  border-top: 1px solid #e5e7eb;
-  background-color: #fafafa;
+/* 加载更多样式 */
+.loading-more {
   display: flex;
-  justify-content: flex-end;
   align-items: center;
-  position: relative;
-  z-index: 100;
+  justify-content: center;
+  gap: 10px;
+  padding: 20px 0;
+  color: #7ec8ff;
+  font-size: 14px;
 }
 
-.pagination-wrapper > * {
-  margin-left: 1rem;
+.loading-more-spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(30, 144, 255, 0.3);
+  border-top-color: #00bfff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
 }
 
-.pagination-wrapper > *:first-child {
-  margin-left: 0;
+/* 没有更多数据 */
+.no-more-data {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 0;
+  color: #5a8cba;
+  font-size: 14px;
 }
 
-.pagination-info {
+/* 分页信息栏 */
+.pagination-info-bar {
+  background: rgba(9, 61, 140, 0.3);
+  border: 1px solid #049FD8;
+  border-radius: 8px;
+  padding: 10px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+  margin-top: 10px;
+  color: #7ec8ff;
   font-size: 14px;
-  color: #6b7280;
-  white-space: nowrap;
 }
 
 .pagination-controls {
   display: flex;
   align-items: center;
+  gap: 10px;
 }
 
-.pagination-controls > * {
-  margin-right: 0.25rem;
-}
-
-.pagination-controls > *:last-child {
-  margin-right: 0;
-}
-
-.pagination-btn {
-  min-width: 32px;
+.page-btn {
+  width: 32px;
   height: 32px;
-  padding: 0 8px;
-  border: 1px solid #d1d5db;
-  background: white;
-  color: #374151;
-  border-radius: 4px;
-  cursor: pointer;
+  background: rgba(13, 58, 106, 0.8);
+  border: 1px solid #2a7fff;
+  border-radius: 6px;
+  color: #7ec8ff;
   font-size: 14px;
-  transition: all 0.2s;
-}
-
-.pagination-btn:hover:not(:disabled) {
-  border-color: #3b82f6;
-  color: #3b82f6;
+  cursor: pointer;
+  transition: all 0.3s;
 }
 
-.pagination-btn.active {
-  background: #3b82f6;
-  border-color: #3b82f6;
-  color: white;
+.page-btn:hover:not(:disabled) {
+  background: rgba(30, 144, 255, 0.3);
+  border-color: #00bfff;
 }
 
-.pagination-btn:disabled {
+.page-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-.pagination-ellipsis {
-  padding: 0 4px;
-  color: #6b7280;
-}
-
-.pagination-size {
-  display: flex;
-  align-items: center;
+.page-current {
+  color: #00bfff;
+  font-weight: bold;
 }
 
-.pagination-size > * {
-  margin-right: 0.5rem;
+/* ========== 底部操作按钮 ========== */
+.bottom-actions {
+  width: 100%;
+  padding: 15px 30px;
+  box-sizing: border-box;
+  background: rgba(4, 28, 61, 0.95);
+  z-index: 20;
+  flex-shrink: 0;
 }
 
-.pagination-size > *:last-child {
-  margin-right: 0;
+.submit-btn {
+  width: 100%;
+  padding: 18px 0;
+  background: #4a99e2;
+  border: none;
+  border-radius: 12px;
+  font-size: 24px;
+  font-weight: bold;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.3s;
+  letter-spacing: 8px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
-.size-select {
-  width: 120px;
-  position: relative;
-  z-index: 50;
+.submit-btn:hover:not(:disabled) {
+  box-shadow: 0 0 30px rgba(74, 153, 226, 0.6);
+  transform: translateY(-2px);
 }
 
-:deep(.size-select .vs__dropdown-menu) {
-  z-index: 9999 !important;
+.submit-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-/* 底部操作按钮 */
-.bottom-actions {
-  position: sticky;
-  bottom: 0;
-  padding: 0 1rem 1rem 1rem;
-  background-color: #f9fafb;
+/* ========== 科技感弹窗样式 ========== */
+.tech-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(4, 28, 61, 0.9);
   display: flex;
-  justify-content: flex-end;
-  z-index: 10;
-}
-
-.add-to-cart-btn {
-  background-color: #10b981 !important;
-  border-color: #10b981 !important;
-  width: auto;
-  padding: 0 24px;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
 }
 
-:deep(.add-to-cart-btn.van-button--primary) {
-  background-color: #10b981 !important;
-  border-color: #10b981 !important;
+.tech-modal {
+  background: linear-gradient(135deg, #0a3d6d 0%, #041c3d 100%);
+  border: 1px solid #049FD8;
+  border-radius: 16px;
+  width: 90%;
+  max-width: 500px;
+  position: relative;
+  box-shadow: 0 0 40px rgba(4, 159, 216, 0.3);
 }
 
-:deep(.add-to-cart-btn.van-button--primary:active) {
-  background-color: #059669 !important;
-  border-color: #059669 !important;
+.modal-close-btn {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  width: 36px;
+  height: 36px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: 50%;
+  color: #7ec8ff;
+  font-size: 18px;
+  cursor: pointer;
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-/* 成功提示 */
-.success-alert {
-  position: fixed;
-  right: 1.5rem;
-  bottom: 1.5rem;
-  width: 320px;
-  z-index: 50;
+.modal-close-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: #fff;
 }
 
-/* Ant Design 样式统一 */
-:deep(.ant-card-head) {
-  border-bottom: none;
-  padding: 1rem 1.5rem;
-  min-height: auto;
+.modal-content-row {
+  padding: 30px;
+  display: flex;
+  align-items: center;
+  gap: 30px;
 }
 
-:deep(.ant-card-head-title) {
-  padding: 0;
+.modal-text {
+  flex: 1;
 }
 
-:deep(.ant-card-body) {
-  display: none;
+.modal-text h3 {
+  font-size: 22px;
+  font-weight: bold;
+  color: #fff;
+  margin: 0 0 12px 0;
 }
 
-:deep(.ant-btn-primary) {
-  background-color: #3b82f6;
-  border-color: #3b82f6;
+.modal-text p {
+  font-size: 15px;
+  color: #7ec8ff;
+  margin: 0;
+  line-height: 1.6;
 }
 
-:deep(.ant-btn-primary:hover) {
-  background-color: #2563eb;
-  border-color: #2563eb;
+.modal-text .highlight {
+  color: #00bfff;
+  font-weight: bold;
 }
 
-:deep(.ant-btn[disabled]) {
-  opacity: 0.5;
-  cursor: not-allowed;
+.modal-icon {
+  flex-shrink: 0;
 }
 
-/* 自定义头像 */
-.custom-avatar {
-  width: 42px;
-  height: 42px;
-  border-radius: 50%;
-  background-color: #3b82f6;
+.icon-box {
+  width: 80px;
+  height: 80px;
+  background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%);
+  border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
-  font-size: 20px;
-  flex-shrink: 0;
-}
-
-/* 大字体防误触弹窗样式 */
-:deep(.large-dialog) {
-  width: 85vw !important;
-  max-width: 600px !important;
-  border-radius: 16px !important;
-  z-index: 2000 !important;
-}
-
-:deep(.van-overlay) {
-  z-index: 1999 !important;
+  font-size: 36px;
+  color: #fff;
+  position: relative;
+  transform: perspective(100px) rotateY(-10deg);
+  box-shadow: 0 10px 30px rgba(0, 191, 255, 0.3);
 }
 
-:deep(.large-dialog .van-dialog__header) {
-  padding-top: 2rem !important;
-  padding-bottom: 1rem !important;
-  padding-left: 1.5rem !important;
-  padding-right: 1.5rem !important;
-  font-size: 1.5rem !important;
-  font-weight: 700 !important;
-  color: #111827 !important;
+.icon-box .check-icon {
+  position: absolute;
+  bottom: -5px;
+  right: -5px;
+  font-size: 24px;
+  color: #10b981;
+  background: #041c3d;
+  border-radius: 50%;
+  padding: 2px;
 }
 
-:deep(.large-dialog .van-dialog__footer) {
-  padding-top: 1rem !important;
-  padding-bottom: 1.5rem !important;
-  padding-left: 1.5rem !important;
-  padding-right: 1.5rem !important;
+.modal-footer {
+  padding: 20px 30px 30px;
   display: flex;
+  gap: 15px;
 }
 
-:deep(.large-dialog .van-dialog__footer > *) {
-  margin-right: 1rem;
-}
-
-:deep(.large-dialog .van-dialog__footer > *:last-child) {
-  margin-right: 0;
-}
-
-:deep(.large-dialog .van-dialog__cancel),
-:deep(.large-dialog .van-dialog__confirm) {
+.modal-btn {
   flex: 1;
-  height: 56px !important;
-  font-size: 1.125rem !important;
-  font-weight: 600 !important;
-  border-radius: 8px !important;
-  border: none !important;
-}
-
-:deep(.large-dialog .van-dialog__cancel) {
-  background-color: #f3f4f6 !important;
-  color: #374151 !important;
-}
-
-:deep(.large-dialog .van-dialog__cancel:active) {
-  background-color: #e5e7eb !important;
+  padding: 14px 0;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
 }
 
-:deep(.large-dialog .van-dialog__confirm) {
-  background-color: #10b981 !important;
-  color: white !important;
+.modal-btn.cancel {
+  background: transparent;
+  border: 1px solid #2a7fff;
+  color: #7ec8ff;
 }
 
-:deep(.large-dialog .van-dialog__confirm:active) {
-  background-color: #059669 !important;
+.modal-btn.cancel:hover {
+  background: rgba(42, 127, 255, 0.2);
 }
 
-:deep(.large-dialog .van-dialog__confirm:disabled) {
-  background-color: #d1d5db !important;
-  color: #9ca3af !important;
+.modal-btn.confirm {
+  background: linear-gradient(90deg, #1e90ff 0%, #00bfff 100%);
+  border: none;
+  color: #fff;
 }
 
-/* 弹窗内容样式 */
-.dialog-content {
-  padding: 1.5rem 2rem 2rem 2rem;
+.modal-btn.confirm:hover {
+  box-shadow: 0 0 20px rgba(30, 144, 255, 0.5);
 }
 
-.dialog-content p {
-  margin: 0;
-  font-size: 1.125rem;
-  line-height: 1.8;
-  color: #374151;
-  text-align: center;
+/* ========== Loading 遮罩 ========== */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(4, 28, 61, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
 }
 
-:deep(.van-cell) {
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  padding: 6px 8px !important;
+.loading-spinner {
+  width: 60px;
+  height: 60px;
+  border: 4px solid rgba(30, 144, 255, 0.3);
+  border-top-color: #00bfff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ========== 响应式 - 横屏 ========== */
+@media screen and (orientation: landscape) {
+  .header-section {
+    padding: 10px 20px;
+  }
+
+  .page-title {
+    font-size: 22px;
+  }
+
+  .logout-btn {
+    padding: 6px 14px;
+    font-size: 13px;
+    left: 20px;
+  }
+
+  .main-content {
+    padding: 0 20px;
+  }
+
+  .filter-section {
+    padding: 12px 15px;
+    margin-bottom: 10px;
+  }
+
+  .filter-label {
+    font-size: 13px;
+  }
+
+  .filter-input.dark-input {
+    width: 150px;
+    padding: 6px 10px;
+    font-size: 12px;
+  }
+
+  .filter-select {
+    width: 150px;
+  }
+
+  .search-btn,
+  .reset-btn {
+    padding: 6px 20px;
+    font-size: 13px;
+  }
+
+  .card-grid {
+    grid-template-columns: repeat(6, 1fr);
+    gap: 15px;
+  }
+
+  .card-index {
+    width: 24px;
+    height: 24px;
+    font-size: 11px;
+    top: 6px;
+    left: 6px;
+  }
+
+  .card-image {
+    margin: 10px;
+    margin-bottom: 8px;
+    width: calc(100% - 20px);
+  }
+
+  .image-placeholder {
+    font-size: 36px;
+  }
+
+  .card-info {
+    padding: 6px 10px 8px;
+  }
+
+  .info-row {
+    font-size: 11px;
+    margin-bottom: 3px;
+  }
+
+  .selected-indicator {
+    width: 24px;
+    height: 24px;
+    font-size: 12px;
+    top: 6px;
+    right: 6px;
+  }
+
+  .bottom-actions {
+    padding: 10px 20px;
+  }
+
+  .submit-btn {
+    padding: 12px 0;
+    font-size: 18px;
+    letter-spacing: 6px;
+    border-radius: 8px;
+  }
 }
 </style>
 

src/login/FingerprintLogin.vue

@@ -1,26 +1,19 @@
-<!-- 指纹登录 -->
+<!-- 指纹登录 - 深色科技风格 -->
 <template>
-  <div class="recognize-wrapper">
+  <div class="fingerprint-login-page">
+    <!-- 背景层 -->
+    <div class="bg-layer" :style="{ backgroundImage: `url(${bgImg})` }" />
+
     <!-- 操作按钮 - 右上角 -->
     <div class="action-buttons-top">
-      <van-button
-        type="default" size="small" round class="action-btn-top password-btn-top"
-        @click="goToPasswordLogin"
-      >
-        <!-- <template #icon>
-          <i class="fas fa-key" />
-        </template> -->
+      <button class="action-btn password-btn" @click="goToPasswordLogin">
+        <i class="fas fa-key" />
         密码登录
-      </van-button>
-      <van-button
-        type="default" size="small" round class="action-btn-top restart-btn-top"
-        @click="handleRestart"
-      >
-        <!-- <template #icon>
-          <i class="fas fa-redo-alt" />
-        </template> -->
+      </button>
+      <button class="action-btn restart-btn" @click="handleRestart">
+        <i class="fas fa-redo-alt" />
         重启识别
-      </van-button>
+      </button>
     </div>
 
     <div class="recognize-container">
@@ -112,17 +105,11 @@
       <div class="status-text">
         {{ isConnected ? statusText : '设备未连接' }}
       </div>
+    </div>
 
-      <!-- 用户信息（识别成功后显示） -->
-      <!-- <div v-if="status === 'success' && userInfo" class="user-info">
-        <div class="user-avatar">
-          <span class="avatar-text">{{ userInfo.name ? userInfo.name.charAt(0) : '?' }}</span>
-        </div>
-        <div class="user-details">
-          <div class="user-name">{{ userInfo.name || '未知用户' }}</div>
-          <div class="user-role">{{ userInfo.loginName || '' }}</div>
-        </div>
-      </div> -->
+    <!-- Loading -->
+    <div v-if="status === 'recognizing'" class="loading-indicator">
+      <span>识别中</span>
     </div>
   </div>
 </template>
@@ -132,6 +119,9 @@ import { useRouter, useRoute } from 'vue-router';
 import { ref, onMounted, onUnmounted } from 'vue';
 import { showNotify } from 'vant';
 
+// 图片资源
+import bgImg from '../assets/images/bj.png';
+
 const route = useRoute();
 const router = useRouter();
 
@@ -290,41 +280,53 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.recognize-wrapper {
+/* 指纹登录页面 - 深色科技风格 */
+.fingerprint-login-page {
     width: 100%;
-    height: 100vh;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    position: relative;
+    font-family: 'Microsoft YaHei', sans-serif;
+    color: #fff;
+    overflow: hidden;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    overflow: hidden;
-    position: relative;
 }
 
-/* 背景动画 */
-.recognize-wrapper::before {
+/* 背景层 */
+.bg-layer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #041c3d;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    z-index: 0;
+}
+
+/* 背景动画网格 */
+.fingerprint-login-page::before {
     content: '';
     position: absolute;
-    width: 200%;
-    height: 200%;
-    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: 
+        linear-gradient(rgba(30, 144, 255, 0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(30, 144, 255, 0.03) 1px, transparent 1px);
     background-size: 50px 50px;
-    animation: backgroundMove 20s linear infinite;
-}
-
-@keyframes backgroundMove {
-    0% {
-        transform: translate(0, 0);
-    }
-
-    100% {
-        transform: translate(50px, 50px);
-    }
+    z-index: 1;
+    pointer-events: none;
 }
 
 .recognize-container {
     position: relative;
-    z-index: 1;
+    z-index: 10;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -344,13 +346,14 @@ onUnmounted(() => {
     width: clamp(250px, 40vw, 350px);
     height: clamp(250px, 40vw, 350px);
     border-radius: 50%;
-    background: rgba(255, 255, 255, 0.95);
+    background: linear-gradient(135deg, rgba(9, 45, 82, 0.95) 0%, rgba(5, 30, 60, 0.95) 100%);
     display: flex;
     align-items: center;
     justify-content: center;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(30, 144, 255, 0.3);
     transition: all 0.5s ease;
     overflow: hidden;
+    border: 2px solid rgba(30, 144, 255, 0.3);
 }
 
 .circle-glow {
@@ -363,22 +366,22 @@ onUnmounted(() => {
 
 /* 等待状态 */
 .status-waiting {
-    border: 4px solid rgba(102, 126, 234, 0.3);
+    border: 2px solid rgba(30, 144, 255, 0.3);
 }
 
 .status-waiting .circle-glow {
-    background: radial-gradient(circle, rgba(102, 126, 234, 0.2) 0%, transparent 70%);
+    background: radial-gradient(circle, rgba(30, 144, 255, 0.2) 0%, transparent 70%);
     opacity: 0.5;
 }
 
 /* 识别中状态 */
 .status-recognizing {
-    border: 4px solid #667eea;
+    border: 2px solid #1e90ff;
     animation: circlePulse 2s infinite;
 }
 
 .status-recognizing .circle-glow {
-    background: radial-gradient(circle, rgba(102, 126, 234, 0.4) 0%, transparent 70%);
+    background: radial-gradient(circle, rgba(30, 144, 255, 0.4) 0%, transparent 70%);
     opacity: 1;
     animation: glowPulse 2s infinite;
 }
@@ -388,12 +391,12 @@ onUnmounted(() => {
     0%,
     100% {
         transform: scale(1);
-        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(30, 144, 255, 0.3);
     }
 
     50% {
         transform: scale(1.05);
-        box-shadow: 0 25px 70px rgba(102, 126, 234, 0.5);
+        box-shadow: 0 25px 70px rgba(30, 144, 255, 0.5), 0 0 60px rgba(30, 144, 255, 0.4);
     }
 }
 
@@ -480,11 +483,11 @@ onUnmounted(() => {
 }
 
 .status-waiting .fingerprint-svg {
-    color: #d1d5db;
+    color: rgba(30, 144, 255, 0.5);
 }
 
 .status-recognizing .fingerprint-svg {
-    color: #667eea;
+    color: #1e90ff;
 }
 
 .status-success .fingerprint-svg {
@@ -504,7 +507,7 @@ onUnmounted(() => {
     left: 0;
     right: 0;
     height: 3px;
-    background: linear-gradient(90deg, transparent, #667eea, transparent);
+    background: linear-gradient(90deg, transparent, #00bfff, transparent);
     animation: scanning 2s linear infinite;
 }
 
@@ -709,7 +712,7 @@ onUnmounted(() => {
     right: clamp(1rem, 2vw, 1.5rem);
     display: flex;
     flex-direction: row;
-    gap: 0.5rem;
+    gap: 0.75rem;
     z-index: 100;
     animation: textFadeIn 0.5s ease;
 }
@@ -717,8 +720,14 @@ onUnmounted(() => {
 .action-btn {
     font-size: 1rem;
     font-weight: 500;
-    height: 48px !important;
+    height: 44px;
+    padding: 0 20px;
+    border-radius: 22px;
+    cursor: pointer;
     transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .action-btn i {
@@ -726,71 +735,50 @@ onUnmounted(() => {
     font-size: 16px;
 }
 
-/* 右上角按钮样式 */
-.action-btn-top {
-    font-size:2rem;
-    font-weight: 600;
-    height: auto !important;
-    padding-top: 0.5rem !important;
-    padding-bottom: 0.5rem !important;
-    padding-left: 0.8rem !important;
-    padding-right: 0.8rem !important;
-    transition: all 0.3s ease;
-    white-space: nowrap;
-    margin-left: 1rem;
-}
-
-.action-btn-top i {
-    margin-right: 4px;
-    font-size: 12px;
-}
-
 /* 密码登录按钮样式 */
-:deep(.password-btn) {
-    background: rgba(255, 255, 255, 0.15) !important;
-    border: 2px solid rgba(255, 255, 255, 0.5) !important;
-    color: white !important;
-    backdrop-filter: blur(10px);
+.password-btn {
+    background: linear-gradient(90deg, #1e90ff 0%, #00bfff 100%);
+    border: none;
+    color: white;
 }
 
-:deep(.password-btn:active) {
-    background: rgba(255, 255, 255, 0.25) !important;
+.password-btn:hover {
+    box-shadow: 0 0 20px rgba(30, 144, 255, 0.5);
+    transform: translateY(-2px);
 }
 
 /* 重启按钮样式 */
-:deep(.restart-btn) {
-    background: rgba(255, 255, 255, 0.1) !important;
-    border: 2px solid rgba(255, 255, 255, 0.3) !important;
-    color: rgba(255, 255, 255, 0.9) !important;
-    backdrop-filter: blur(10px);
+.restart-btn {
+    background: transparent;
+    border: 1px solid rgba(30, 144, 255, 0.5);
+    color: #7ec8ff;
 }
 
-:deep(.restart-btn:active) {
-    background: rgba(255, 255, 255, 0.2) !important;
+.restart-btn:hover {
+    background: rgba(30, 144, 255, 0.1);
+    border-color: #1e90ff;
+    color: #00bfff;
 }
 
-/* 右上角密码登录按钮样式 */
-:deep(.password-btn-top) {
-    background: rgba(255, 255, 255, 0.2) !important;
-    border: 1px solid rgba(255, 255, 255, 0.6) !important;
-    color: white !important;
-    backdrop-filter: blur(10px);
-}
-
-:deep(.password-btn-top:active) {
-    background: rgba(255, 255, 255, 0.3) !important;
+/* Loading */
+.loading-indicator {
+    position: absolute;
+    bottom: 10%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
 }
 
-/* 右上角重启按钮样式 */
-:deep(.restart-btn-top) {
-    background: rgba(255, 255, 255, 0.15) !important;
-    border: 1px solid rgba(255, 255, 255, 0.4) !important;
-    color: rgba(255, 255, 255, 0.95) !important;
-    backdrop-filter: blur(10px);
+.loading-indicator span {
+    color: #7ec8ff;
+    font-size: 1.2rem;
+    animation: blink 1.5s infinite;
 }
 
-:deep(.restart-btn-top:active) {
-    background: rgba(255, 255, 255, 0.25) !important;
+@keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
 }
 
 /* 响应式设计 */

src/login/UserHome.vue

@@ -1,161 +1,201 @@
-<!-- 主页 -->
+<!-- 智能仓储管理系统 - 大屏首页 (1080x1920 竖屏优化，支持其他设备滚动) -->
 <template>
-  <div class="bg-gray-50 min-h-screen">
-    <!-- 顶部信息栏 -->
-    <PageHeader :show-back="false" />
-
-    <!-- 主内容区域 -->
-    <main class="container mx-auto px-6 py-12 pb-40">
-      <div class="text-center mb-16">
-        <h1 class="text-4xl font-bold text-gray-800 mb-4">智能仓储管理系统</h1>
-        <p class="text-xl text-gray-600 max-w-2xl mx-auto">高效管理物料流转，实时监控库存状态，优化仓储作业流程</p>
+  <div class="home-page">
+    <!-- 背景 -->
+    <div class="bg-layer" :style="{ backgroundImage: `url(${bgImg})` }" />
+
+    <!-- 飞机图片 - 作为背景层 -->
+    <div class="airplane-layer">
+      <img :src="airplaneImg" alt="飞机模型" class="airplane-img" />
+    </div>
+
+    <!-- 顶部标题区域 - 全宽 -->
+    <div class="header-section">
+      <img :src="headerImg" alt="" class="header-bg" />
+      <h1 class="title">智能仓储管理系统</h1>
+      <!-- 左侧用户信息 -->
+      <div class="user-badge">
+        <i class="fas fa-user user-icon" />
+        <span class="username">{{ username }}</span>
       </div>
+      <!-- 右侧操作按钮 -->
+      <div class="header-actions">
+        <div ref="settingsDropdown" class="settings-dropdown">
+          <button class="icon-btn" @click="toggleSettings">
+            <img :src="settingsIcon" alt="设置" class="settings-icon" />
+          </button>
+          <div v-if="showSettings" class="dropdown-menu">
+            <div class="dropdown-item" @click="goToFingerprintEnroll">
+              <i class="fas fa-fingerprint mr-2" />
+              <span>指纹录入</span>
+            </div>
+            <div v-if="isOut" class="dropdown-item" @click="toggleMenu">
+              <i class="fas fa-menu mr-2" />
+              <span>内侧菜单</span>
+            </div>
+            <div v-else class="dropdown-item" @click="toggleMenu">
+              <i class="fas fa-menu mr-2" />
+              <span>外侧菜单</span>
+            </div>
+          </div>
+        </div>
+        <button class="exit-btn" @click="handleLogout">退出</button>
+      </div>
+    </div>
 
-      <!-- 数据概览卡片 -->
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
+    <!-- 页面内容容器 -->
+    <div class="page-container">
+      <!-- 统计卡片区域 -->
+      <div class="stats-section">
         <div
-          v-for="stat in statistics" :key="stat.title" class="bg-white rounded-xl shadow-md p-6 border-l-4"
-          :class="getStatColorClasses(stat.color, 'border')"
+          v-for="stat in statistics" :key="stat.title" class="stat-card"
+          :style="{ backgroundImage: `url(${stat.bg})` }"
         >
-          <div class="flex justify-between items-start">
-            <div>
-              <p class="text-gray-500 text-sm">{{ stat.title }}</p>
-              <p class="text-3xl font-bold mt-2">{{ stat.value }}</p>
+          <div class="stat-info">
+            <div class="stat-label">{{ stat.title }}</div>
+            <div class="stat-value">{{ stat.value }}</div>
+            <div class="stat-trend" :class="stat.trend > 0 ? 'up' : 'down'">
+              <img :src="stat.trend > 0 ? arrowUpIcon : arrowDownIcon" alt="" class="trend-icon" />
+              {{ stat.changeText }}
             </div>
-            <div class="p-3 rounded-lg" :class="getStatColorClasses(stat.color, 'bg')">
-              <i class="text-xl" :class="['fas', stat.icon, getStatColorClasses(stat.color, 'text')]" />
-            </div>
-          </div>
-          <div class="mt-4">
-            <p class="text-sm" :class="stat.trend > 0 ? 'text-green-500' : 'text-red-500'">
-              <i class="mr-1" :class="stat.trend > 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'" />{{ stat.changeText }}
-            </p>
           </div>
         </div>
       </div>
 
-      <!-- 物料分类区域 -->
-      <div class="mb-16">
-        <h2 class="text-2xl font-bold text-gray-800 mb-6">物料分类</h2>
-        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
+      <!-- 操作按钮区域 -->
+      <div class="buttons-section">
+        <template v-if="isOut">
           <div
-            v-for="category in materialCategories" :key="category.name"
-            class="bg-white rounded-lg shadow-sm p-4 text-center cursor-pointer hover:shadow-md transition-shadow"
+            v-for="action in outButtons" :key="action.label" class="action-btn"
+            @click="handleAction(action.action)"
           >
-            <div class="w-full h-20 overflow-hidden mb-3 rounded-lg">
-              <img :src="category.image" :alt="category.name" class="w-full h-full object-cover object-top" />
-            </div>
-            <p class="font-medium">{{ category.name }}</p>
-            <p class="text-gray-500 text-sm">{{ category.count }} 种</p>
+            <img :src="buttonBg" alt="" class="btn-bg" />
+            <span class="btn-text">{{ action.label }}</span>
           </div>
-        </div>
+        </template>
+        <template v-else>
+          <div
+            v-for="action in inButtons" :key="action.label" class="action-btn"
+            @click="handleAction(action.action)"
+          >
+            <img :src="buttonBg" alt="" class="btn-bg" />
+            <span class="btn-text">{{ action.label }}</span>
+          </div>
+        </template>
       </div>
 
-      <!-- 最近操作记录 -->
-      <div>
-        <div class="flex justify-between items-center mb-6">
-          <h2 class="text-2xl font-bold text-gray-800">最近操作记录</h2>
-          <button class="text-blue-500 hover:text-blue-700 font-medium" @click="viewAllRecords">
-            查看全部 <i class="fas fa-chevron-right ml-1 text-xs" />
-          </button>
-        </div>
-        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
-          <div class="simple-table">
-            <div class="table-header">
-              <div class="table-row">
-                <div v-for="col in columns" :key="col.key" class="table-cell">
-                  {{ col.title }}
-                </div>
-              </div>
-            </div>
-            <div class="table-body">
-              <div v-for="(record, index) in recentRecords" :key="index" class="table-row">
-                <div class="table-cell">{{ record.time }}</div>
-                <div class="table-cell">{{ record.operator }}</div>
-                <div class="table-cell">
-                  <span class="px-3 py-1 rounded-full text-sm" :class="getOperationTypeClass(record.operationType)">
-                    {{ record.operationType }}
-                  </span>
-                </div>
-                <div class="table-cell">{{ record.material }}</div>
-                <div class="table-cell">{{ record.quantity }}</div>
-                <div class="table-cell">
-                  <span class="text-green-500">
-                    <i class="fas fa-check-circle mr-1" />{{ record.status }}
-                  </span>
-                </div>
-              </div>
+
+
+      <!-- 表格区域 -->
+      <div class="table-section">
+        <dv-scroll-board :config="config" style="width:1080px;height:780px" />
+      </div>
+    </div>
+
+    <!-- 底部装饰 -->
+    <div class="divider-section">
+      <img :src="bottomImg" alt="" class="divider-img" />
+    </div>
+    <!-- 拣货确认弹窗 - 科技感风格 -->
+    <div v-if="pickingConfirmVisible" class="tech-modal-overlay" @click.self="pickingConfirmVisible = false">
+      <div class="tech-modal">
+        <div class="modal-content-row">
+          <div class="modal-text">
+            <h3>请确认您要进行的操作</h3>
+            <p>您是否已经申请了领料？</p>
+          </div>
+          <div class="modal-icon">
+            <div class="icon-box">
+              <i class="fas fa-clipboard-check" />
             </div>
           </div>
         </div>
-      </div>
-    </main>
-
-    <!-- 底部圆形功能按钮 -->
-    <footer class="fixed bottom-0 left-0 right-0 bg-white shadow-lg py-6 z-50">
-      <div class="container mx-auto px-6">
-        <div class="flex justify-center space-x-12">
-          <template v-if="isOut">
-            <button
-              v-for="action in outButtons" :key="action.label" class="circle-button text-white"
-              :class="getButtonClass(action.color)" @click="handleAction(action.action)"
-            >
-              <i :class="`fas ${action.icon}`" />
-              <span>{{ action.label }}</span>
-            </button>
-          </template>
-          <template v-if="!isOut">
-            <button
-              v-for="action in inButtons" :key="action.label" class="circle-button text-white"
-              :class="getButtonClass(action.color)" @click="handleAction(action.action)"
-            >
-              <i :class="`fas ${action.icon}`" />
-              <span>{{ action.label }}</span>
-            </button>
-          </template>
+        <div class="modal-footer">
+          <button class="modal-btn cancel-btn" @click="handlePickingNo">否</button>
+          <button class="modal-btn confirm-btn" @click="handlePickingYes">是</button>
         </div>
       </div>
-    </footer>
-
-    <!-- 拣货确认弹窗 -->
-    <van-dialog
-      v-model:show="pickingModalVisible" title="请确认您要进行的操作" show-cancel-button class-name="large-dialog"
-      confirm-button-text="是" cancel-button-text="否" @confirm="handlePickingConfirm" @cancel="handlePickingCancel"
-    >
-      <div class="large-dialog-content">
-        <p>您是否已经申请了领料？</p>
-      </div>
-    </van-dialog>
+    </div>
   </div>
-  <Loading v-if="loading" />
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue';
+import { ref, reactive, onMounted, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
-import PageHeader from '../common/PageHeader.vue';
-import { cfStockInLeave } from '../api/stockIn.js';
-import { Dialog as VanDialog, showNotify } from 'vant';
 
-// 路由
+// 图片资源 - 从 assets/images 目录加载
+import cardIcon1 from '../assets/images/card1.png';
+import cardIcon2 from '../assets/images/card2.png';
+import cardIcon3 from '../assets/images/card3.png';
+import airplaneImg from '../assets/images/airplane.png';
+import buttonBg from '../assets/images/buttonBg.png';
+import bgImg from '../assets/images/bj.png';
+import settingsIcon from '../assets/images/setting.png';
+import arrowUpIcon from '../assets/images/up.png';
+import arrowDownIcon from '../assets/images/down.png';
+import headerImg from '../assets/images/header.png';
+import bottomImg from '../assets/images/bottom.png';
+
 const router = useRouter();
+const username = ref('admin');
 
+// 是否为外侧屏幕
+const isOut = ref(true);
 
-// 加载状态
-const loading = ref(false);
+// 设置下拉菜单状态
+const showSettings = ref(false);
 
-// 弹窗控制
-const pickingModalVisible = ref(false);
+// 拣货确认弹窗
+const pickingConfirmVisible = ref(false);
+const settingsDropdown = ref(null);
 
-// 是否为外侧屏幕
-const isOut = ref(false);
+const config = {
+    header: ['名称', '图号', '类型', '操作', '时间', '操作人员'],
+    data: [
+        ['我是一个测试名称', '2025001C10', '治物', '出库', '2025-11-26 11:15', '张三'],
+        ['我是一个测试名称', '2025001C10', '治物', '出库', '2025-11-26 11:15', '服务员'],
+        ['测试名称', '2025001C10', '芯角', '出库', '2025-11-26 11:15', '周世豪'],
+        ['测试名称', '2025001C10', '货物', '入库', '2025-11-26 11:15', '管理员'],
+        ['测试名称', '2025001C10', '治物', '入库', '2025-11-26 11:15', '陈静雅'],
+        ['测试名称', '2025001C10', '货物', '入库', '2025-11-26 11:15', '管理员'],
+        ['测试名称', '2025001C10', '治物', '出库', '2025-11-26 11:15', '管理员'],
+        ['测试名称', '2025001C10', '芯角', '出库', '2025-11-26 11:15', '管理员'],
+        ['测试名称', '2025001C10', '货物', '出库', '2025-11-26 11:15', '管理员'],
+        ['测试名称', '2025001C10', '治物', '出库', '2025-11-26 11:15', '周世豪'],
+        ['测试名称', '2025001C10', '货物', '出库', '2025-11-26 11:15', '管理员'],
+        ['测试名称', '2025001C10', '治物', '出库', '2025-11-26 11:15', '管理员'],
+        ['测试名称', '2025001C10', '芯角', '出库', '2025-11-26 11:15', '周世豪'],
+        ['测试名称', '2025001C10', '货物', '出库', '2025-11-26 11:15', '管理员'],
+    ],
+    index: true,
+    columnWidth: [50, 200, 200, 120, 100, 200, 120],
+    align: ['center', 'center', 'center', 'center', 'center','center','center'],
+    rowNum: 14,
+    headerBGC:'#0c5897',
+    oddRowBGC:'#0c3367',
+    evenRowBGC:'#153d75',
+};
 
-// 初始化时从localStorage读取isOut值
+// 从 localStorage 获取用户名和isOut状态
 onMounted(() => {
+    const storedUser = localStorage.getItem('username');
+    if (storedUser) {
+        username.value = storedUser;
+    }
+    
+    // 读取isOut状态
     const storedIsOut = localStorage.getItem('isOut');
     if (storedIsOut !== null) {
         isOut.value = storedIsOut === 'true';
     }
+    
+    // 添加点击外部关闭下拉菜单的事件监听
+    document.addEventListener('click', handleClickOutside);
+});
+
+onUnmounted(() => {
+    // 移除事件监听
+    document.removeEventListener('click', handleClickOutside);
 });
 
 // 统计数据
@@ -163,287 +203,119 @@ const statistics = reactive([
     {
         title: '总库存量',
         value: '12,847',
-        icon: 'fa-boxes',
-        color: 'blue',
+        bg: cardIcon1,
         trend: 1,
         changeText: '较昨日 +2.3%',
     },
     {
         title: '今日入库',
         value: '1,248',
-        icon: 'fa-truck-loading',
-        color: 'green',
+        bg: cardIcon2,
         trend: 1,
         changeText: '较昨日 +5.7%',
     },
     {
         title: '今日出库',
         value: '36',
-        icon: 'fa-tasks',
-        color: 'yellow',
+        bg: cardIcon3,
         trend: -1,
-        changeText: '较昨日 -1.2%',
-    },
-    {
-        title: '库存周转率',
-        value: '4.2',
-        icon: 'fa-sync-alt',
-        color: 'purple',
-        trend: 1,
-        changeText: '较上月 +0.8%',
+        changeText: '较昨日 +2.3%',
     },
 ]);
 
-// 物料分类
-const materialCategories = reactive([
-    {
-        name: '电子元件',
-        count: 248,
-        image: 'https://ai-public.mastergo.com/ai/img_res/b752a3a8cb35d2b915a23b12981693d8.jpg',
-    },
-    {
-        name: '机械零件',
-        count: 186,
-        image: 'https://ai-public.mastergo.com/ai/img_res/1d4cf39dc61dadac88754be3bd525e3c.jpg',
-    },
-    {
-        name: '化工原料',
-        count: 92,
-        image: 'https://ai-public.mastergo.com/ai/img_res/4f12a387c9413be821c1d203bda09622.jpg',
-    },
-    {
-        name: '包装材料',
-        count: 64,
-        image: 'https://ai-public.mastergo.com/ai/img_res/c2d2f76aebbef43067223fd11e120c49.jpg',
-    },
-    {
-        name: '办公用品',
-        count: 127,
-        image: 'https://ai-public.mastergo.com/ai/img_res/404ab042346c15d0722e9d2eae6bda99.jpg',
-    },
-    {
-        name: '维修工具',
-        count: 89,
-        image: 'https://ai-public.mastergo.com/ai/img_res/048d0b638d5cb1f1bd11916983979fed.jpg',
-    },
+// 外侧屏幕操作按钮
+const outButtons = reactive([
+    { label: '领料', action: 'materialOut' },
+    { label: '拣货', action: 'materialReturn' },
+    { label: '还料', action: 'materialIn' },
+    { label: 'AGV RFID\n校验', action: 'agvRfidRecognition' },
+    { label: '成品\n入库', action: 'finishedProductIn' },
 ]);
 
-// 表格列定义
-const columns = [
-    {
-        title: '时间',
-        dataIndex: 'time',
-        key: 'time',
-        width: 150,
-    },
-    {
-        title: '操作类型',
-        dataIndex: 'operationType',
-        key: 'operationType',
-        width: 120,
-    },
-    {
-        title: '物料名称',
-        dataIndex: 'materialName',
-        key: 'materialName',
-        width: 200,
-    },
-    {
-        title: '数量',
-        dataIndex: 'quantity',
-        key: 'quantity',
-        width: 100,
-    },
-    {
-        title: '操作员',
-        dataIndex: 'operator',
-        key: 'operator',
-        width: 100,
-    },
-    {
-        title: '状态',
-        dataIndex: 'status',
-        key: 'status',
-        width: 120,
-    },
-];
-
-// 最近操作记录
-const recentRecords = reactive([
-    {
-        key: '1',
-        time: '2023-12-15 14:32',
-        operationType: '入库',
-        materialName: '集成电路芯片 IC-2023',
-        quantity: '+500',
-        operator: '张伟',
-        status: '已完成',
-    },
-    {
-        key: '2',
-        time: '2023-12-15 13:45',
-        operationType: '领料',
-        materialName: '电阻 R-1KΩ 1/4W',
-        quantity: '-200',
-        operator: '李娜',
-        status: '已完成',
-    },
-    {
-        key: '3',
-        time: '2023-12-15 11:20',
-        operationType: '还料',
-        materialName: '电容 C-100μF 50V',
-        quantity: '+50',
-        operator: '王强',
-        status: '已完成',
-    },
-    {
-        key: '4',
-        time: '2023-12-15 09:15',
-        operationType: '出库',
-        materialName: '连接器 CONN-USB-C',
-        quantity: '-150',
-        operator: '赵敏',
-        status: '已完成',
-    },
-    {
-        key: '5',
-        time: '2023-12-14 16:40',
-        operationType: '入库',
-        materialName: '传感器 SHT-30',
-        quantity: '+300',
-        operator: '孙磊',
-        status: '已完成',
-    },
+// 内侧屏幕操作按钮
+const inButtons = reactive([
+    { label: '出库\n确认', action: 'materialOutLeave' },
+    { label: '还料\n离开', action: 'materialInLeave' },
+    { label: '成品\n出库', action: 'finishedProductOut' },
+    { label: '料箱\n上架', action: 'feedingArea' },
+    { label: '还料区\n管理', action: 'returnManagement' },
+    // { label: '取料区\n管理', action: 'deliverManagement' },
 ]);
 
-// 底部操作按钮
-const outButtons = reactive([
-    {
-        label: '领料',
-        icon: 'fa-hand-holding',
-        color: 'blue',
-        action: 'materialOut',
-    },
-    {
-        label: '拣货',
-        icon: 'fa-undo',
-        color: 'green',
-        action: 'materialReturn',
-    },
-    {
-        label: '还料',
-        icon: 'fa-arrow-up',
-        color: 'yellow',
-        action: 'materialIn',
-    },
-    {
-        label: 'AGV RFID校验',
-        icon: 'fa-wifi',
-        color: 'red',
-        action: 'agvRfidRecognition',
-    },
-    {
-        label: '成品入库',
-        icon: 'fa-boxes',
-        color: 'blue',
-        action: 'finishedProductIn',
-    },
 
-    //  测试待删除
-    // {
-    //     label: '还料区管理',
-    //     icon: 'fa-undo',
-    //     color: 'green',
-    //     action: 'returnManagement',
-    // },
-    // {
-    //     label: '取料区管理',
-    //     icon: 'fa-arrow-down',
-    //     color: 'red',
-    //     action: 'deliverManagement',
-    // },
-]);
-const inButtons = reactive([
-    {
-        label: '出库确认',
-        icon: 'fa-undo',
-        color: 'blue',
-        action: 'materialOutLeave',
-    },
-    {
-        label: '还料离开',
-        icon: 'fa-arrow-down',
-        color: 'green',
-        action: 'materialInLeave',
-    },
-    {
-        label: '成品出库',
-        icon: 'fa-boxes',
-        color: 'red',
-        action: 'finishedProductOut',
-    },
-]);
+// 切换设置下拉菜单
+const toggleSettings = event => {
+    event.stopPropagation();
+    showSettings.value = !showSettings.value;
+};
 
-// 查看全部记录逻辑
-const viewAllRecords = () => {
-    console.log('查看全部');
+// 点击外部关闭下拉菜单
+const handleClickOutside = event => {
+    if (settingsDropdown.value && !settingsDropdown.value.contains(event.target)) {
+        showSettings.value = false;
+    }
 };
 
-// 拣货确认弹窗处理
-const handlePickingConfirm = () => {
-    pickingModalVisible.value = false;
-    router.push('/order-picking');
+// 跳转到指纹录入页面
+const goToFingerprintEnroll = () => {
+    showSettings.value = false;
+    router.push('/fingerprint-enroll');
 };
 
-// 去领料
-const handlePickingCancel = () => {
-    pickingModalVisible.value = false;
-    router.push('/stock-requisition');
+// 切换菜单
+const toggleMenu = () => {
+    isOut.value = !isOut.value;
+    localStorage.setItem('isOut', isOut.value);
+};
+
+// 处理退出
+const handleLogout = () => {
+    localStorage.removeItem('#LoginInfo');
+    localStorage.removeItem('#token');
+    localStorage.removeItem('#accountId');
+    
+    // 检查localStorage中的isOut值，如果为true则在登录页面添加isOut参数
+    const isOutValue = localStorage.getItem('isOut') === 'true';
+    if (isOutValue) {
+        router.push({ path: '/fingerprint-login', query: { isOut: 'true' } });
+    } else {
+        router.push('/fingerprint-login');
+    }
 };
 
-// 根据不同的action执行不同的逻辑
+// 处理按钮操作
 const handleAction = action => {
     console.log('Action clicked:', action);
     switch (action) {
+    // 外侧屏幕操作
     case 'materialOut':
-        // 领料 - 跳转到领料界面
         router.push('/stock-requisition');
         break;
     case 'materialReturn':
-        // 拣货 - 显示确认弹窗
-        pickingModalVisible.value = true;
-        break;
-    case 'materialOutLeave':
-        // 领料出库离开
-        router.push('/outbound-confirm');
+        pickingConfirmVisible.value = true;
         break;
-    case 'materialReturnLeave':
-        // 还料出库离开
+    case 'materialIn':
+        router.push('/in-confirm');
         break;
     case 'agvRfidRecognition':
-        // RFID识别
         router.push('/agv-rfid-recognition');
         break;
-    case 'materialIn':
-        // 还料 - 跳转到还料界面
-        router.push('/in-confirm');
+    case 'finishedProductIn':
+        router.push('/finish-product-in');
+        break;
+    // 内侧屏幕操作
+    case 'materialOutLeave':
+        router.push('/outbound-confirm');
         break;
     case 'materialInLeave':
-        // 还料出库离开
-        // validateMaterialInLeave();
         router.push('/returned-leave');
         break;
-    case 'finishedProductIn':
-        // 成品入库
-        router.push('/finish-product-in');
-        break;
     case 'finishedProductOut':
-        // 成品出库
         router.push('/finish-product-out');
         break;
-
-    // 测试待删除
+    case 'feedingArea':
+        router.push('/feeding-area');
+        break;
     case 'returnManagement':
         router.push('/return-management');
         break;
@@ -451,235 +323,933 @@ const handleAction = action => {
         router.push('/delivery-management');
         break;
     }
-
-
-};
-
-// 校验还料离开时是否带有工装设备信息
-const validateMaterialInLeave = async () => {
-    loading.value = true;
-    try {
-        const res = await cfStockInLeave();
-        if (res.errorCode === 0) {
-            if (res.datas && res.datas.length > 0) {
-                router.push('/in-confirm?isLeave=true');
-            } else {
-                showNotify({ type: 'success', message: '您已完成还料操作，请在闸机开门后离开' });
-            }
-        } else {
-            showNotify({ type: 'danger', message: res.errorMessage });
-        }
-    } catch (error) {
-        console.error('校验还料离开时是否带有工装设备信息失败:', error);
-        showNotify({ type: 'danger', message: '校验还料离开时是否带有工装设备信息失败' });
-    } finally {
-        loading.value = false;
-    }
-};
-
-// 渲染样式
-const getOperationTypeClass = type => {
-    const classMap = {
-        '入库': 'bg-green-100 text-green-800',
-        '领料': 'bg-blue-100 text-blue-800',
-        '还料': 'bg-yellow-100 text-yellow-800',
-        '出库': 'bg-red-100 text-red-800',
-    };
-    return classMap[type] || 'bg-gray-100 text-gray-800';
 };
 
-// 按钮样式
-const getButtonClass = color => {
-    const colorMap = {
-        blue: 'bg-blue-500 hover:bg-blue-600',
-        green: 'bg-green-500 hover:bg-green-600',
-        yellow: 'bg-yellow-500 hover:bg-yellow-600',
-        red: 'bg-red-500 hover:bg-red-600',
-    };
-    return colorMap[color] || 'bg-gray-500 hover:bg-gray-600';
+// 拣货确认弹窗 - 点击"否"跳转到领料页
+const handlePickingNo = () => {
+    pickingConfirmVisible.value = false;
+    router.push('/stock-requisition');
 };
 
-// 统计样式
-const getStatColorClasses = (color, type) => {
-    const colorMap = {
-        blue: {
-            border: 'border-blue-500',
-            bg: 'bg-blue-100',
-            text: 'text-blue-500',
-        },
-        green: {
-            border: 'border-green-500',
-            bg: 'bg-green-100',
-            text: 'text-green-500',
-        },
-        yellow: {
-            border: 'border-yellow-500',
-            bg: 'bg-yellow-100',
-            text: 'text-yellow-500',
-        },
-        purple: {
-            border: 'border-purple-500',
-            bg: 'bg-purple-100',
-            text: 'text-purple-500',
-        },
-    };
-    return colorMap[color]?.[type] || '';
+// 拣货确认弹窗 - 点击"是"跳转到拣货页
+const handlePickingYes = () => {
+    pickingConfirmVisible.value = false;
+    router.push('/order-picking');
 };
 </script>
 
 <style scoped>
-/* 大弹窗样式，适合触摸屏 */
-:deep(.large-dialog) {
-  width: 85vw !important;
-  max-width: 600px !important;
-  border-radius: 16px !important;
-}
-
-:deep(.large-dialog .van-dialog__header) {
-  padding-top: 2rem !important;
-  padding-bottom: 1rem !important;
-  padding-left: 1.5rem !important;
-  padding-right: 1.5rem !important;
-  font-size: 1.5rem !important;
-  font-weight: 700 !important;
-  color: #111827 !important;
-}
-
-.large-dialog-content {
-  padding-top: 1.5rem !important;
-  padding-bottom: 2.5rem !important;
-  padding-left: 2rem !important;
-  padding-right: 2rem !important;
-}
-
-.large-dialog-content p {
-  margin-top: 0;
-  margin-bottom: 1rem;
-  margin-left: 0;
-  margin-right: 0;
-  font-size: 1.25rem !important;
-  line-height: 1.8 !important;
-  font-weight: 600;
-  color: #111827;
-  text-align: center;
+/* 基础样式 - 1080x1920 竖屏优化，支持横屏滚动 */
+.home-page {
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+  font-family: 'Microsoft YaHei', sans-serif;
+  color: #fff;
+  overflow-x: hidden;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 自定义滚动条样式 - WebKit */
+.home-page::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.home-page::-webkit-scrollbar-track {
+  background: rgba(4, 28, 61, 0.9);
+  border-radius: 5px;
+}
+
+.home-page::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #1e90ff 0%, #00bfff 100%);
+  border-radius: 5px;
+  border: 2px solid rgba(4, 28, 61, 0.9);
+}
+
+.home-page::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, #00bfff 0%, #1e90ff 100%);
+}
+
+/* 自定义滚动条样式 - Firefox */
+.home-page {
+  scrollbar-width: thin;
+  scrollbar-color: #1e90ff rgba(4, 28, 61, 0.9);
+}
+
+/* 背景层 */
+.bg-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #041c3d;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  z-index: 0;
+}
+
+/* 飞机图片 - 背景层，位于内容下方 */
+.airplane-layer {
+  position: fixed;
+  top: 100px;
+  left: 0;
+  width: 100%;
+  height: 55%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.airplane-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+/* ========== 顶部标题区域 - 全宽无边距 ========== */
+.header-section {
+  position: relative;
+  width: 100%;
+  flex-shrink: 0;
+  z-index: 10;
 }
 
-.large-dialog-content p:last-child {
-  margin-bottom: 0;
+.header-bg {
+  width: 100%;
+  height: 100px;
+  display: block;
+}
+
+.title {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 32px;
+  font-weight: bold;
+  color: #ffffff;
+  letter-spacing: 6px;
+  margin: 0;
+  white-space: nowrap;
+}
+
+.user-badge {
+  position: absolute;
+  top: 62px;
+  left: 22px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: linear-gradient(90deg, #1a4a7a 0%, #0d3a6a 100%);
+  border: 1px solid #2a7fff;
+  border-radius: 20px;
+  padding: 6px 15px;
 }
 
-.large-dialog-content .dialog-subtitle {
-  font-size: 1.125rem !important;
-  color: #6b7280 !important;
+.user-icon {
+  font-size: 14px;
+  color: #00bfff;
+}
+
+.username {
+  font-size: 14px;
+  color: #fff;
+  font-weight: 500;
+}
+
+.header-actions {
+  position: absolute;
+  top: 62px;
+  right: 22px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
-:deep(.large-dialog .van-dialog__footer) {
-  padding-top: 1rem !important;
-  padding-bottom: 1.5rem !important;
-  padding-left: 1.5rem !important;
-  padding-right: 1.5rem !important;
+.icon-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: transparent;
+  border: none;
+  cursor: pointer;
   display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+  padding: 0;
+}
+
+.icon-btn:hover {
+  transform: scale(1.1);
+}
+
+.settings-icon {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
 }
 
-:deep(.large-dialog .van-dialog__footer > *) {
-  margin-right: 1rem;
+/* 设置下拉菜单样式 */
+.settings-dropdown {
+  position: relative;
 }
 
-:deep(.large-dialog .van-dialog__footer > *:last-child) {
-  margin-right: 0;
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  right: 0;
+  background: linear-gradient(135deg, rgba(13, 58, 106, 0.95) 0%, rgba(9, 45, 82, 0.95) 100%);
+  border: 1px solid #2a7fff;
+  border-radius: 8px;
+  min-width: 160px;
+  z-index: 1000000;
+  overflow: hidden;
+  animation: dropdownFadeIn 0.2s ease;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
-:deep(.large-dialog .van-dialog__cancel),
-:deep(.large-dialog .van-dialog__confirm) {
+@keyframes dropdownFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.dropdown-item {
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.dropdown-item:hover {
+  background: rgba(30, 144, 255, 0.3);
+}
+
+.dropdown-item i {
+  color: #00bfff;
+  font-size: 16px;
+  margin-right: 8px;
+}
+
+.exit-btn {
+  padding: 6px 18px;
+  border-radius: 20px;
+  background: linear-gradient(90deg, #1e90ff 0%, #00bfff 100%);
+  border: none;
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.exit-btn:hover {
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.6);
+}
+
+/* 页面容器 - 内容区域 */
+.page-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 0 20px 0 30px;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 9;
+  margin-top: 66px;
+  gap: 20px;
+}
+
+/* ========== 统计卡片区域 ========== */
+.stats-section {
+  display: flex;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.stat-card {
   flex: 1;
-  height: 56px !important;
-  font-size: 1.125rem !important;
-  font-weight: 600 !important;
-  border-radius: 8px !important;
-  border: none !important;
+  display: flex;
+  align-items: center;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  height: 120px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.stat-info {
+  margin-left: clamp(80px, 15vw, 166px);
+}
+
+.stat-label {
+  font-family: 'Alibaba PuHuiTi 2.0', 'Microsoft YaHei', sans-serif;
+  font-weight: normal;
+  font-size: 14px;
+  color: #FFFFFF;
+}
+
+.stat-value {
+  font-family: Arial, sans-serif;
+  font-weight: 400;
+  font-size: 28px;
+  color: #FFFFFF;
+}
+
+.stat-trend {
+  font-size: 12px;
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.stat-label,
+.stat-value,
+.stat-trend {
+  margin-top: 0px;
+}
+
+.stat-trend.up {
+  color: #00ff88;
+}
+
+.stat-trend.down {
+  color: #ff6b6b;
+}
+
+.trend-icon {
+  width: 12px;
+  height: 12px;
+  margin-right: 4px;
+}
+
+/* ========== 操作按钮区域 ========== */
+.buttons-section {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 15px;
+  background: rgba(9, 61, 140, 0.5);
+  border-radius: 12px;
+  border: 1px solid #049FD8;
+  padding: 15px 20px;
+  flex-shrink: 0;
+  margin-top: 516px;
+}
+
+.action-btn {
+  width: clamp(100px, 12vw, 160px);
+  height: clamp(100px, 12vw, 160px);
+  cursor: pointer;
+  transition: all 0.3s;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
-:deep(.large-dialog .van-dialog__cancel) {
-  background-color: #f3f4f6 !important;
-  color: #374151 !important;
+.action-btn:hover {
+  transform: scale(1.05);
 }
 
-:deep(.large-dialog .van-dialog__cancel:active) {
-  background-color: #e5e7eb !important;
+.btn-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
 }
 
-:deep(.large-dialog .van-dialog__confirm) {
-  background-color: #10b981 !important;
-  color: white !important;
+.btn-text {
+  font-size: clamp(14px, 2vw, 24px);
+  font-weight: bold;
+  color: #ffffff;
+  text-align: center;
+  white-space: pre-line;
+  position: relative;
+  z-index: 1;
+  line-height: 1.3;
 }
 
-:deep(.large-dialog .van-dialog__confirm:active) {
-  background-color: #059669 !important;
+/* ========== 分隔装饰 ========== */
+.divider-section {
+  width: 100%;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 10;
+  margin-top: auto;
 }
 
-/* 简单表格样式 */
-.simple-table {
+.divider-img {
   width: 100%;
-  overflow-x: auto;
+  height: auto;
+  display: block;
+  max-height: 80px;
+  object-fit: contain;
+}
+
+/* ========== 表格区域 ========== */
+.table-section {
+  display: flex;
+  flex-direction: column;
+  background: rgba(5, 20, 50, 0.6);
+  border: 1px solid rgba(30, 144, 255, 0.2);
+  border-radius: 8px;
+  overflow: hidden;
 }
 
 .table-header {
-  background-color: #f9fafb;
-  border-bottom: 2px solid #e5e7eb;
+  display: flex;
+  background: rgba(30, 144, 255, 0.15);
+  border-bottom: 1px solid rgba(30, 144, 255, 0.3);
+  padding: 12px 10px;
+  flex-shrink: 0;
 }
 
-.table-header .table-row {
+.table-header .table-col {
+  font-size: 14px;
+  color: #7ec8ff;
   font-weight: 600;
-  color: #374151;
+  text-align: center;
+}
+
+.table-body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.table-body::-webkit-scrollbar {
+  width: 6px;
+}
+
+.table-body::-webkit-scrollbar-track {
+  background: rgba(30, 144, 255, 0.1);
+}
+
+.table-body::-webkit-scrollbar-thumb {
+  background: rgba(30, 144, 255, 0.3);
+  border-radius: 3px;
 }
 
 .table-row {
   display: flex;
-  min-width: 800px;
+  padding: 10px;
+  border-bottom: 1px solid rgba(30, 144, 255, 0.1);
+  transition: background 0.2s;
 }
 
-.table-header .table-row {
-  padding: 1rem;
+.table-row:nth-child(odd) {
+  background: rgba(0, 44, 81, 0.2);
 }
 
-.table-body .table-row {
-  padding: 1rem;
-  border-bottom: 1px solid #e5e7eb;
-  transition: background-color 0.2s;
+.table-row:hover {
+  background: rgba(30, 144, 255, 0.15);
+}
+
+.table-col {
+  flex: 1;
+  font-size: 13px;
+  color: #a0d2ff;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.table-body .table-row:hover {
-  background-color: #f9fafb;
+.table-col:nth-child(1) {
+  flex: 0.5;
 }
 
-.table-cell {
+.table-col:nth-child(2) {
+  flex: 1.8;
+}
+
+.cell-out {
+  color: #ff9500 !important;
+}
+
+.cell-in {
+  color: #00ff88 !important;
+}
+
+/* ========== 响应式 - 小屏幕手机 ========== */
+@media screen and (max-width: 480px) {
+  .page-container {
+    max-width: 100%;
+    padding: 0 10px 20px;
+    margin-top: 40px;
+  }
+
+  .title {
+    font-size: 18px;
+    letter-spacing: 2px;
+  }
+
+  .user-badge {
+    padding: 4px 8px;
+    top: 40px;
+    left: 5px;
+  }
+
+  .username {
+    font-size: 11px;
+  }
+
+  .header-actions {
+    top: 40px;
+    right: 5px;
+  }
+
+  .exit-btn {
+    padding: 4px 10px;
+    font-size: 11px;
+  }
+
+  .stats-section {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .stat-card {
+    height: 70px;
+  }
+
+  .stat-info {
+    margin-left: 80px;
+  }
+
+  .stat-value {
+    font-size: 20px;
+  }
+
+  .stat-label {
+    font-size: 11px;
+  }
+
+  .buttons-section {
+    margin-top: 280px;
+    gap: 8px;
+    padding: 10px;
+  }
+
+  .action-btn {
+    width: 56px;
+    height: 56px;
+  }
+
+  .btn-text {
+    font-size: 9px;
+  }
+
+  .table-col {
+    font-size: 10px;
+  }
+
+  .table-header .table-col {
+    font-size: 10px;
+  }
+
+  .airplane-layer {
+    height: 35%;
+    top: 120px;
+  }
+}
+
+/* ========== 响应式 - 中等屏幕 ========== */
+@media screen and (min-width: 481px) and (max-width: 768px) {
+  .page-container {
+    max-width: 100%;
+    padding: 0 15px 0 20px;
+    margin-top: 50px;
+  }
+
+  .title {
+    font-size: 24px;
+  }
+
+  .stat-card {
+    height: 90px;
+  }
+
+  .stat-info {
+    margin-left: 100px;
+  }
+
+  .stat-value {
+    font-size: 22px;
+  }
+
+  .buttons-section {
+    margin-top: 350px;
+    gap: 12px;
+    padding: 12px;
+  }
+
+  .action-btn {
+    width: 80px;
+    height: 80px;
+  }
+
+  .btn-text {
+    font-size: 12px;
+  }
+
+  .airplane-layer {
+    height: 40%;
+    top: 100px;
+  }
+}
+
+/* ========== 响应式 - 横屏模式 (如1920x1080) - 保持与1080x1920竖屏一致的布局 ========== */
+@media screen and (orientation: landscape) {
+  .home-page {
+    min-height: 100vh;
+    height: auto;
+  }
+
+  .header-section {
+    display: flex;
+    justify-content: center;
+  }
+
+  .header-bg {
+    max-width: 1080px;
+  }
+
+  .title {
+    left: 50%;
+  }
+
+  .user-badge {
+    left: calc(50% - 540px + 22px);
+  }
+
+  .header-actions {
+    right: calc(50% - 540px + 22px);
+  }
+
+  .page-container {
+    max-width: 1080px;
+    padding: 0 15px 0 30px;
+    margin: 0 auto;
+    margin-top: 66px;
+    gap: 20px;
+  }
+
+  .airplane-layer {
+    position: absolute;
+    width: 1080px;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 680px;
+    top: 216px;
+    opacity: 0.8;
+  }
+
+  .stats-section {
+    gap: 12px;
+  }
+
+  .stat-card {
+    height: 120px;
+    padding: 10px;
+  }
+
+  .stat-info {
+    margin-left: 166px;
+  }
+
+  .stat-value {
+    font-size: 28px;
+  }
+
+  .stat-label {
+    font-size: 14px;
+  }
+
+  .stat-trend {
+    font-size: 12px;
+  }
+
+  .buttons-section {
+    margin-top: 516px;
+    gap: 42px;
+    padding: 15px;
+  }
+
+  .action-btn {
+    width: 160px;
+    height: 160px;
+  }
+
+  .btn-text {
+    font-size: 24px;
+  }
+
+  .table-row {
+    padding: 10px;
+  }
+
+  .table-col {
+    font-size: 13px;
+  }
+
+  .table-header .table-col {
+    font-size: 14px;
+  }
+
+  .divider-section {
+    max-width: 1080px;
+    margin: 20px auto 0;
+  }
+}
+
+/* ========== 响应式 - 大屏竖屏 (1080x1920) ========== */
+@media screen and (orientation: portrait) and (min-width: 900px) {
+  .page-container {
+    max-width: 1080px;
+  }
+
+  .title {
+    font-size: 42px;
+    letter-spacing: 10px;
+  }
+
+  .user-badge {
+    padding: 12px 20px;
+    top: 62px;
+    left: 22px;
+  }
+
+  .username {
+    font-size: 18px;
+  }
+
+  .user-icon {
+    font-size: 18px;
+  }
+
+  .header-actions {
+    top: 62px;
+    right: 22px;
+    gap: 20px;
+  }
+
+  .exit-btn {
+    padding: 10px 25px;
+    font-size: 18px;
+  }
+
+  .settings-icon {
+    width: 32px;
+    height: 32px;
+  }
+
+  .stat-card {
+    height: 140px;
+  }
+
+  .stat-info {
+    margin-left: 150px;
+  }
+
+  .stat-value {
+    font-size: 36px;
+  }
+
+  .stat-label {
+    font-size: 16px;
+  }
+
+  .stat-trend {
+    font-size: 14px;
+  }
+
+  .airplane-layer {
+    height: 50%;
+  }
+
+  .buttons-section {
+    gap: 42px;
+    padding: 20px;
+  }
+
+  .action-btn {
+    width: 160px;
+    height: 160px;
+  }
+
+  .btn-text {
+    font-size: 24px;
+  }
+
+  .table-header .table-col {
+    font-size: 16px;
+  }
+
+  .table-col {
+    font-size: 14px;
+  }
+
+  .table-row {
+    padding: 12px 10px;
+  }
+}
+
+:deep(.dv-scroll-board .header) {
+  font-size: 22px !important;
+  color: #52dff5 !important;
+  background: linear-gradient(90deg, rgba(4,253,255,0) 0%, rgba(10,115,241,0.5) 50%, rgba(4,244,246,0) 100%)!important
+}
+
+:deep(.dv-scroll-board .rows .row-item) {
+  font-size: 17px !important;
+  color:#ffffff !important;
+}
+
+/* ========== 科技感弹窗样式 ========== */
+.tech-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(4, 28, 61, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.tech-modal {
+  background: linear-gradient(135deg, rgba(9, 45, 82, 0.98) 0%, rgba(5, 30, 60, 0.98) 100%);
+  border: 1px solid #2a7fff;
+  border-radius: 16px;
+  padding: 30px;
+  min-width: 450px;
+  max-width: 90%;
+  box-shadow: 0 0 40px rgba(30, 144, 255, 0.3), 0 20px 60px rgba(0, 0, 0, 0.5);
+  animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.modal-content-row {
+  display: flex;
+  align-items: center;
+  gap: 30px;
+  margin-bottom: 30px;
+}
+
+.modal-text {
   flex: 1;
-  padding: 0 0.5rem;
+}
+
+.modal-text h3 {
+  font-size: 24px;
+  font-weight: 700;
+  color: #fff;
+  margin: 0 0 15px 0;
+  text-shadow: 0 0 10px rgba(0, 191, 255, 0.3);
+}
+
+.modal-text p {
+  font-size: 18px;
+  color: #7ec8ff;
+  margin: 0;
+  line-height: 1.6;
+}
+
+.modal-icon {
+  flex-shrink: 0;
+}
+
+.icon-box {
+  width: 80px;
+  height: 80px;
+  background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%);
+  border-radius: 50%;
   display: flex;
   align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 30px rgba(30, 144, 255, 0.4);
 }
 
-.table-cell:first-child {
-  min-width: 150px;
+.icon-box i {
+  font-size: 36px;
+  color: #fff;
 }
 
-.table-cell:nth-child(2) {
-  min-width: 100px;
+.modal-footer {
+  display: flex;
+  gap: 20px;
+}
+
+.modal-btn {
+  flex: 1;
+  padding: 16px 0;
+  border-radius: 10px;
+  font-size: 20px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  border: none;
 }
 
-.table-cell:nth-child(3) {
-  min-width: 120px;
+.cancel-btn {
+  background: rgba(13, 58, 106, 0.8);
+  border: 1px solid #2a7fff;
+  color: #7ec8ff;
 }
 
-.table-cell:nth-child(4) {
-  min-width: 200px;
+.cancel-btn:hover {
+  background: rgba(26, 74, 122, 0.9);
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.3);
 }
 
-.table-cell:nth-child(5) {
-  min-width: 80px;
+.confirm-btn {
+  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
+  color: #fff;
 }
 
-.table-cell:last-child {
-  min-width: 100px;
+.confirm-btn:hover {
+  box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
+  transform: translateY(-2px);
 }
 </style>

src/login/UserLogin.vue

@@ -1,9 +1,9 @@
-<!-- 智能仓储管理系统登录页面 -->
+<!-- 智能仓储管理系统登录页面 - 深色科技风格 -->
 
 <template>
-  <div class="login-container">
-    <!-- 背景装饰 -->
-    <div class="background-decoration" />
+  <div class="login-page">
+    <!-- 背景层 -->
+    <div class="bg-layer" :style="{ backgroundImage: `url(${bgImg})` }" />
 
     <!-- 主内容区域 -->
     <div class="login-content">
@@ -11,6 +11,7 @@
       <div class="login-left">
         <div class="system-info">
           <h1 class="system-title">智能仓储管理系统</h1>
+          <p class="system-subtitle">Intelligent Warehouse Management System</p>
           <div class="feature-list">
             <div class="feature-item">
               <i class="fas fa-check-circle" />
@@ -32,6 +33,9 @@
       <div class="login-right">
         <div class="login-form-wrapper">
           <div class="form-header">
+            <div class="form-icon">
+              <i class="fas fa-user-circle" />
+            </div>
             <h2 class="form-title">欢迎登录</h2>
             <p class="form-subtitle">请输入您的账号信息</p>
           </div>
@@ -39,13 +43,14 @@
           <div class="form-content">
             <!-- 用户名输入框 -->
             <div class="form-item">
-              <div class="native-input-wrapper">
+              <label class="input-label">用户名</label>
+              <div class="input-wrapper">
                 <i class="fas fa-user input-icon" />
                 <input
                   v-model="username"
                   type="text"
                   placeholder="请输入用户名"
-                  class="native-input"
+                  class="dark-input"
                   @keyup.enter="handleLogin"
                 />
               </div>
@@ -53,46 +58,41 @@
 
             <!-- 密码输入框 -->
             <div class="form-item">
-              <div class="native-input-wrapper">
+              <label class="input-label">密码</label>
+              <div class="input-wrapper">
                 <i class="fas fa-lock input-icon" />
                 <input
                   v-model="password"
                   :type="showPassword ? 'text' : 'password'"
                   placeholder="请输入密码"
-                  class="native-input"
+                  class="dark-input"
                   @keyup.enter="handleLogin"
                 />
                 <i
                   :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"
-                  class="password-toggle-icon"
+                  class="password-toggle"
                   @click="showPassword = !showPassword"
                 />
               </div>
             </div>
 
             <!-- 登录按钮 -->
-            <van-button type="primary" block size="large" class="login-button" :loading="loading" @click="handleLogin">
-              登录
-            </van-button>
-            <van-button type="primary" block size="large" class="login-button" @click="handleFingerprintLogin">
+            <button class="login-btn" :disabled="loading" @click="handleLogin">
+              {{ loading ? '登录中...' : '登 录' }}
+            </button>
+            <button class="fingerprint-btn" @click="handleFingerprintLogin">
+              <i class="fas fa-fingerprint" />
               指纹登录
-            </van-button>
-
-            <!-- 忘记密码链接 -->
-            <!-- <div class="form-footer">
-              <a href="#" class="forgot-link" @click.prevent="handleForgotPassword">
-                忘记密码？
-              </a>
-            </div> -->
+            </button>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- 底部版权信息 -->
-    <!-- <footer class="login-footer">
-      © 2023 智能仓储管理系统. 保留所有权利.
-    </footer> -->
+    <!-- Loading -->
+    <div v-if="loading" class="loading-overlay">
+      <div class="loading-spinner" />
+    </div>
   </div>
 </template>
 
@@ -103,6 +103,9 @@ import { loginApi } from '../api/login.js';
 import { getFormattedDateTime } from '../common/Common.js';
 import { showNotify } from 'vant';
 
+// 图片资源
+import bgImg from '../assets/images/bj.png';
+
 const router = useRouter();
 const route = useRoute();
 
@@ -190,28 +193,45 @@ const handleForgotPassword = () => {
 </script>
 
 <style scoped>
-/* 登录容器 */
-.login-container {
+/* 登录页面 - 深色科技风格 */
+.login-page {
+  width: 100%;
   min-height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   position: relative;
+  font-family: 'Microsoft YaHei', sans-serif;
+  color: #fff;
   overflow: hidden;
   display: flex;
   flex-direction: column;
 }
 
-/* 背景装饰 */
-.background-decoration {
-  position: absolute;
+/* 背景层 */
+.bg-layer {
+  position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  /* background-image: url('./background.svg'); */
-  background-repeat: no-repeat;
-  background-position: center;
+  background-color: #041c3d;
   background-size: cover;
-  opacity: 0.1;
+  background-position: center;
+  background-repeat: no-repeat;
+  z-index: 0;
+}
+
+/* 背景动画网格 */
+.login-page::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: 
+    linear-gradient(rgba(30, 144, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(30, 144, 255, 0.03) 1px, transparent 1px);
+  background-size: 50px 50px;
+  z-index: 1;
   pointer-events: none;
 }
 
@@ -226,7 +246,7 @@ const handleForgotPassword = () => {
   padding-left: 20px;
   padding-right: 20px;
   position: relative;
-  z-index: 1;
+  z-index: 10;
 }
 
 /* 左侧信息区 */
@@ -249,7 +269,8 @@ const handleForgotPassword = () => {
   font-weight: 700;
   margin-bottom: 16px;
   line-height: 1.2;
-  color: #fff
+  color: #fff;
+  text-shadow: 0 0 20px rgba(30, 144, 255, 0.5);
 }
 
 .system-subtitle {
@@ -257,6 +278,7 @@ const handleForgotPassword = () => {
   opacity: 0.9;
   margin-bottom: 40px;
   font-weight: 300;
+  color: #7ec8ff;
 }
 
 .feature-list {
@@ -289,7 +311,7 @@ const handleForgotPassword = () => {
 
 .feature-item i {
   font-size: 20px;
-  color: #4ade80;
+  color: #00bfff;
 }
 
 /* 右侧登录表单 */
@@ -302,14 +324,15 @@ const handleForgotPassword = () => {
 }
 
 .login-form-wrapper {
-  background: white;
+  background: linear-gradient(135deg, rgba(9, 45, 82, 0.95) 0%, rgba(5, 30, 60, 0.95) 100%);
   border-radius: 16px;
   padding-top: 48px;
   padding-bottom: 48px;
   padding-left: 40px;
   padding-right: 40px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(30, 144, 255, 0.2);
   animation: fadeInRight 0.8s ease-out;
+  border: 1px solid rgba(30, 144, 255, 0.3);
 }
 
 .form-header {
@@ -317,16 +340,33 @@ const handleForgotPassword = () => {
   margin-bottom: 32px;
 }
 
+.form-icon {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 16px;
+  background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 30px rgba(30, 144, 255, 0.4);
+}
+
+.form-icon i {
+  font-size: 40px;
+  color: #fff;
+}
+
 .form-title {
   font-size: 28px;
   font-weight: 700;
-  color: #1f2937;
+  color: #fff;
   margin-bottom: 8px;
 }
 
 .form-subtitle {
   font-size: 14px;
-  color: #6b7280;
+  color: #7ec8ff;
 }
 
 .form-content {
@@ -343,28 +383,145 @@ const handleForgotPassword = () => {
 }
 
 .form-item {
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.input-label {
+  display: block;
+  font-size: 14px;
+  color: #7ec8ff;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: rgba(4, 28, 61, 0.8);
+  border: 1px solid rgba(30, 144, 255, 0.3);
+  border-radius: 8px;
+  padding: 12px 16px;
+  transition: all 0.3s ease;
+}
+
+.input-wrapper:focus-within {
+  border-color: #1e90ff;
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.3);
 }
 
 .input-icon {
-  color: #667eea;
+  color: #00bfff;
   font-size: 16px;
+  margin-right: 12px;
+}
+
+.dark-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 15px;
+  color: #fff;
+}
+
+.dark-input::placeholder {
+  color: rgba(126, 200, 255, 0.5);
+}
+
+.password-toggle {
+  color: #7ec8ff;
+  cursor: pointer;
+  transition: color 0.3s;
+  margin-left: 8px;
 }
 
-.login-button {
+.password-toggle:hover {
+  color: #00bfff;
+}
+
+/* 登录按钮 */
+.login-btn {
+  width: 100%;
   height: 48px;
   font-size: 16px;
   font-weight: 600;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(90deg, #1e90ff 0%, #00bfff 100%);
   border: none;
   border-radius: 8px;
   transition: all 0.3s ease;
   color: white;
+  cursor: pointer;
+  margin-top: 8px;
 }
 
-.login-button:hover {
+.login-btn:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 8px 20px rgba(30, 144, 255, 0.5);
+}
+
+.login-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* 指纹登录按钮 */
+.fingerprint-btn {
+  width: 100%;
+  height: 48px;
+  font-size: 16px;
+  font-weight: 500;
+  background: transparent;
+  border: 1px solid rgba(30, 144, 255, 0.5);
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  color: #7ec8ff;
+  cursor: pointer;
+  margin-top: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.fingerprint-btn:hover {
+  background: rgba(30, 144, 255, 0.1);
+  border-color: #1e90ff;
+  color: #00bfff;
+}
+
+.fingerprint-btn i {
+  font-size: 20px;
+}
+
+/* Loading 遮罩 */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(4, 28, 61, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.loading-spinner {
+  width: 50px;
+  height: 50px;
+  border: 3px solid rgba(30, 144, 255, 0.2);
+  border-top-color: #1e90ff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .form-footer {
@@ -373,14 +530,14 @@ const handleForgotPassword = () => {
 }
 
 .forgot-link {
-  color: #667eea;
+  color: #7ec8ff;
   font-size: 14px;
   text-decoration: none;
   transition: color 0.3s ease;
 }
 
 .forgot-link:hover {
-  color: #764ba2;
+  color: #00bfff;
   text-decoration: underline;
 }
 
@@ -435,6 +592,7 @@ const handleForgotPassword = () => {
 @media (max-width: 640px) {
   .login-form-wrapper {
     padding: 32px 24px;
+    background: linear-gradient(135deg, rgba(9, 45, 82, 0.98) 0%, rgba(5, 30, 60, 0.98) 100%);
   }
 
   .form-title {
@@ -444,58 +602,19 @@ const handleForgotPassword = () => {
   .login-right {
     padding: 0 16px;
   }
-}
 
-/* 原生输入框样式 */
-.native-input-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  padding-left: 16px;
-  padding-right: 16px;
-  background: white;
-  transition: all 0.3s ease;
-}
-
-.native-input-wrapper:focus-within {
-  border-color: #667eea;
-  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
-}
-
-.native-input {
-  flex: 1;
-  border: none;
-  outline: none;
-  font-size: 15px;
-  color: #1f2937;
-  background: transparent;
-  padding-left: 8px;
-}
-
-.native-input::placeholder {
-  color: #9ca3af;
-}
-
-.input-icon {
-  color: #667eea;
-  font-size: 16px;
-  flex-shrink: 0;
-}
+  .form-icon {
+    width: 60px;
+    height: 60px;
+  }
 
-.password-toggle-icon {
-  color: #9ca3af;
-  font-size: 16px;
-  cursor: pointer;
-  transition: color 0.3s ease;
-  flex-shrink: 0;
-  margin-left: 8px;
+  .form-icon i {
+    font-size: 30px;
+  }
 }
 
-.password-toggle-icon:hover {
-  color: #667eea;
+/* 特性列表文字颜色 */
+.feature-item span {
+  color: rgba(255, 255, 255, 0.9);
 }
 </style>

src/main.js

@@ -15,6 +15,8 @@ import $ from 'jquery';
 import Vant from 'vant';
 import 'vant/lib/index.css';
 
+import DataVVue3 from '@kjgl77/datav-vue3';
+
 window.$ = $;
 window.jQuery = $;
 window.PcComponentV3 = PcComponentV3;
@@ -45,6 +47,7 @@ function render(props = {}) {
     instance = createApp(App);
     // instance.use(Antd);
     instance.use(Vant);
+    instance.use(DataVVue3);
     instance.use(PcComponentV3);
     instance.use(router);
     instance.mount(container ? container.querySelector('#app') : '#app');

src/router/routes.js

@@ -37,6 +37,9 @@ const FingerprintEnroll = () => import('../Fingerprint/FingerprintEnroll.vue');
 // 指纹登录
 const FingerprintLogin = () => import('../login/FingerprintLogin.vue');
 
+// 上架区
+const FeedingArea = () => import('../box/FeedingArea.vue');
+
 const routes = [
     { path: '/', redirect: '/login' },
     { path: '/login', component: UserLogin, meta: { title: '用户登录' } },
@@ -55,5 +58,6 @@ const routes = [
     { path: '/finish-product-out', component: FinishProductOut, meta: { title: '成品出库管理' } },
     { path: '/fingerprint-enroll', component: FingerprintEnroll, meta: { title: '指纹录入' } },
     { path: '/fingerprint-login', component: FingerprintLogin, meta: { title: '指纹登录' } },
+    { path: '/feeding-area', component: FeedingArea, meta: { title: '上架区' } },
 ];
 export default routes;

src/stock-in/InConfirm.vue

@@ -1,83 +1,116 @@
-<!-- 还料入库 -->
+<!-- 还料入库 - 智能仓储风格 -->
 <template>
-  <div class="page-container">
-    <!-- 顶部信息栏 -->
-    <PageHeader title="还料入库" />
+  <div class="stock-requisition-page">
+    <!-- 背景层 -->
+    <div class="bg-layer" :style="{ backgroundImage: `url(${bgImg})` }" />
+
+    <!-- 顶部标题区域 -->
+    <div class="header-section">
+      <button class="logout-btn" @click="goHome">
+        <i class="fas fa-home" />
+        <span>主页</span>
+      </button>
+      <h1 class="page-title">还料入库</h1>
+      <!-- 右侧操作按钮 -->
+      <div class="header-actions">
+        <button class="action-btn refresh-btn" @click="verify">
+          <i class="fas fa-sync-alt" />
+          <span>重新校验</span>
+        </button>
+      </div>
+    </div>
 
     <!-- 主内容区域 -->
     <main class="main-content">
-      <!-- 页面标题 -->
-      <div class="page-header-row">
-        <van-button type="primary" @click="verify">
-          <i class="fas fa-sync-alt mr-1" /> 重新校验
-        </van-button>
+      <!-- 统计信息 -->
+      <div v-if="materialList.length > 0" class="stats-section">
+        <span class="stats-text">共 {{ materialList.length }} 条数据</span>
       </div>
 
-      <!-- 卡片容器 -->
-      <div class="card-container">
-        <!-- 卡片列表区域 -->
-        <div class="card-list-wrapper">
-          <van-empty v-if="materialList.length === 0" description="暂无数据" />
-
-          <!-- 卡片列表 -->
-          <div v-else class="card-list">
-            <div
-              v-for="(item, index) in materialList" :key="item.id || index" :class="getCardClass(item.remarks)"
-              class="inventory-card"
-            >
-              <div class="card-header">
-                <div class="card-header-left">
-                  <div class="custom-avatar">
-                    <!-- :style="{ backgroundColor: getStatusColor(item.remarks) }" -->
-                    <i :class="getInventoryIcon(item.inventoryType)" />
-                  </div>
-                  <div class="ml-4 card-title-info">
-                    <div class="card-name">{{ item.inventoryName }}</div>
-                    <div class="card-subtitle">编号: {{ item.inventoryNo }}</div>
-                  </div>
-                </div>
-                <div class="card-header-right">
-                  <div class="card-location">
-                    <i class="fas fa-map-marker-alt mr-2" />
-                    <span>{{ item.positionName || '-' }}</span>
-                    <span class="mx-2">/</span>
-                    <span>{{ item.remarks || '-' }}</span>
-                  </div>
-                </div>
+      <!-- 卡片网格区域 -->
+      <div class="card-grid-wrapper">
+        <!-- 空状态 -->
+        <div v-if="materialList.length === 0 && !loading" class="empty-state">
+          <i class="fas fa-inbox empty-icon" />
+          <p>暂无数据</p>
+        </div>
+
+        <!-- 卡片网格 -->
+        <div v-else class="card-grid">
+          <div
+            v-for="(item, index) in materialList"
+            :key="item.id || index"
+            class="inventory-card"
+            :class="getCardClass(item.remarks)"
+          >
+            <!-- 卡片序号 -->
+            <div class="card-index" :class="getCardClass(item.remarks)">{{ index + 1 }}</div>
+
+            <!-- 图片区域 -->
+            <div class="card-image">
+              <div class="image-placeholder" :class="getCardClass(item.remarks)">
+                <i :class="getInventoryIcon(item.inventoryType)" />
               </div>
             </div>
-          </div>
-        </div>
 
-        <!-- 分页区域（固定底部） -->
-        <div v-if="materialList.length > 0" class="pagination-wrapper">
-          <span class="text-gray-600">共 {{ materialList.length }} 条数据</span>
+            <!-- 信息区域 -->
+            <div class="card-info">
+              <div class="info-row">
+                <span class="info-label">名称:</span>
+                <span class="info-value">{{ item.inventoryName || '-' }}</span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">编号:</span>
+                <span class="info-value">{{ item.inventoryNo || '-' }}</span>
+              </div>
+              <div class="info-row location-row">
+                <i class="fas fa-map-marker-alt location-icon" />
+                <span class="info-value">{{ item.positionName || '-' }} / {{ item.warehouseName || '-' }}</span>
+              </div>
+            </div>
+
+            <!-- 状态区域（固定高度） -->
+            <div class="card-status-section">
+              <div class="status-badge" :class="getCardClass(item.remarks)">
+                <i class="fas fa-exclamation-circle" />
+                {{ item.remarks || '-' }}
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </main>
-    <!-- 底部完成按钮 -->
+
+    <!-- 底部操作按钮 -->
     <div class="bottom-actions">
-      <van-button
-        type="primary" size="large" :disabled="notInStockCount === 0" class="submit-btn"
-        @click="handleComplete"
-      >
-        <i class="fas fa-check-circle mr-2" />
+      <button class="submit-btn" :disabled="notInStockCount === 0" @click="handleComplete">
         还料入库
-      </van-button>
+      </button>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading" class="loading-overlay">
+      <div class="loading-spinner" />
     </div>
   </div>
-  <Loading v-if="loading" />
 </template>
 
 <script setup>
 import { useRouter } from 'vue-router';
 import { showNotify } from 'vant';
-import PageHeader from '../common/PageHeader.vue';
-import { ref, reactive, onMounted, computed } from 'vue';
-import { cfStockIn, createStockIn, cfStockInLeave } from '../api/stockIn.js';
+import { ref,reactive, onMounted, computed } from 'vue';
+import { cfStockIn, createStockIn } from '../api/stockIn.js';
+
+// 图片资源
+import bgImg from '../assets/images/bj.png';
 
 const router = useRouter();
 
+// 返回主页
+const goHome = () => {
+    router.push('/home');
+};
+
 // 表格加载状态
 const loading = ref(false);
 
@@ -178,30 +211,7 @@ const getList = async () => {
         loading.value = false;
     }
 };
-// 获取物料列表(内侧校验)
-const getInnerList = async () => {
-    loading.value = true;
-    try {
-        const res = await cfStockInLeave();
 
-        if (res.errorCode === 0) {
-            if (res.datas && res.datas.length > 0) {
-                materialList.value = res.datas;
-                pagination.total = materialList.value.length;
-                showNotify({ type: 'warning', message: '检测到您已携带工装设备，请将工装设备全部还料后，再次点击【重新校验】按钮，待校验通过后,请在闸机开门后离开', duration: 8000 });
-            } else {
-                showNotify({ type: 'success', message: '校验成功，请在闸机开门后离开' });
-            }
-        } else {
-            showNotify({ type: 'warning', message: res.errorMessage });
-        }
-    } catch (error) {
-        console.error('获取物料列表API调用失败:', error);
-        showNotify({ type: 'danger', message: '获取物料列表API调用失败' });
-    } finally {
-        loading.value = false;
-    }
-};
 // 生成CF入库单
 const generateCFStockIn = async params => {
     loading.value = true;
@@ -229,242 +239,528 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* 页面容器 - 固定高度布局 */
-.page-container {
-  display: flex;
-  flex-direction: column;
+/* ========== 基础样式 ========== */
+.stock-requisition-page {
+  width: 100%;
   height: 100vh;
-  background-color: #f9fafb;
+  max-height: 100vh;
+  position: relative;
+  font-family: 'Microsoft YaHei', sans-serif;
+  color: #fff;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
-/* 主内容区 - 可滚动 */
-.main-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1rem;
+/* 背景层 */
+.bg-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #041c3d;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  z-index: 0;
+}
+
+/* ========== 顶部标题区域 ========== */
+.header-section {
+  position: relative;
+  width: 100%;
+  padding: 20px 30px;
+  box-sizing: border-box;
+  z-index: 10;
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
-/* 操作按钮行 */
-.page-header-row {
+.logout-btn {
+  position: absolute;
+  left: 30px;
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
-  justify-content: flex-end;
   align-items: center;
-  margin-bottom: 1rem;
+  gap: 8px;
+  background: linear-gradient(90deg, #1a4a7a 0%, #0d3a6a 100%);
+  border: 1px solid #2a7fff;
+  border-radius: 8px;
+  padding: 10px 20px;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.logout-btn:hover {
+  background: linear-gradient(90deg, #2a5a8a 0%, #1d4a7a 100%);
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.4);
+}
+
+.logout-btn i {
+  font-size: 18px;
+  color: #00bfff;
+}
+
+.page-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #ffffff;
+  letter-spacing: 2px;
+  margin: 0;
+  text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
+}
+
+/* 右侧操作按钮 */
+.header-actions {
+  position: absolute;
+  right: 30px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: linear-gradient(90deg, #1a4a7a 0%, #0d3a6a 100%);
+  border: 1px solid #2a7fff;
+  border-radius: 8px;
+  padding: 10px 20px;
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.action-btn:hover {
+  background: linear-gradient(90deg, #2a5a8a 0%, #1d4a7a 100%);
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.4);
 }
 
-/* 卡片容器 */
-.card-container {
+.action-btn i {
+  font-size: 16px;
+  color: #00bfff;
+}
+
+/* ========== 主内容区域 ========== */
+.main-content {
   flex: 1;
-  background-color: white;
-  border-radius: 0.5rem;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  padding: 0 30px;
+  position: relative;
+  z-index: 10;
   min-height: 0;
+  overflow: hidden;
 }
 
-/* 卡片列表包装器（可滚动区域） */
-.card-list-wrapper {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.5rem;
-  min-height: 0;
+/* 统计信息 */
+.stats-section {
+  background: rgba(9, 61, 140, 0.5);
+  border: 1px solid #049FD8;
+  border-radius: 12px;
+  padding: 15px 20px;
+  margin-bottom: 15px;
+  flex-shrink: 0;
 }
 
-/* 卡片列表（单列布局） */
-.card-list {
-  display: flex;
-  flex-direction: column;
+.stats-text {
+  color: #7ec8ff;
+  font-size: 16px;
 }
 
-.card-list>* {
-  margin-bottom: 1rem;
+/* ========== 卡片网格区域 ========== */
+.card-grid-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-bottom: 10px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 
-.card-list>*:last-child {
-  margin-bottom: 0;
+.card-grid-wrapper::-webkit-scrollbar {
+  display: none;
 }
 
-/* 分页包装器（固定底部） */
-.pagination-wrapper {
-  padding: 0.5rem 1.5rem;
-  border-top: 1px solid #e5e7eb;
-  border-bottom: 1px solid #e5e7eb;
-  background-color: #fafafa;
+/* 空状态 */
+.empty-state {
+  flex: 1;
   display: flex;
-  justify-content: flex-end;
+  flex-direction: column;
   align-items: center;
+  justify-content: center;
+  color: #7ec8ff;
+  padding: 60px 0;
 }
 
-/* 底部操作按钮 */
-.bottom-actions {
-  position: sticky;
-  bottom: 0;
-  padding: 0 1rem 1rem 1rem;
-  background-color: #f9fafb;
-  display: flex;
-  justify-content: flex-end;
-  z-index: 10;
+.empty-icon {
+  font-size: 80px;
+  margin-bottom: 20px;
+  opacity: 0.5;
+}
+
+.empty-state p {
+  font-size: 18px;
+  margin: 0;
 }
 
-/* 库存卡片样式 */
+/* 卡片网格 - 4列布局 */
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+
+/* ========== 设备卡片样式 ========== */
 .inventory-card {
-  padding: 1rem 1.5rem;
-  transition: all 0.25s ease;
-  border: 2px solid #e5e7eb;
-  background-color: #ffffff;
-  border-radius: 0.5rem;
-  cursor: pointer;
+  background: rgba(5, 30, 60, 0.8);
+  border: 2px solid #0d4a8a;
+  border-radius: 12px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  position: relative;
 }
 
 .inventory-card:hover {
-  border-color: #93c5fd;
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
+  border-color: #1e90ff;
+  box-shadow: 0 0 20px rgba(30, 144, 255, 0.3);
+  transform: translateY(-3px);
 }
 
-/* 不在库卡片 */
-.not-in-stock-card {
-  background-color: #eff6ff !important;
-  border-color: #93c5fd !important;
+/* 不在库卡片 - 蓝色(需入库) */
+.inventory-card.not-in-stock-card {
+  border-color: #3b82f6;
 }
 
-/* 在库卡片 */
-.in-stock-card {
-  background-color: #f5f5f5 !important;
-  border-color: #d1d5db !important;
+/* 在库卡片 - 红色警告 */
+.inventory-card.in-stock-card {
+  border-color: #ef4444;
 }
 
-/* 卡片标题区域 */
-.card-header {
+/* 卡片序号 - 左上角 */
+.card-index {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  width: 36px;
+  height: 36px;
+  background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%);
+  border-radius: 50%;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  width: 100%;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: #fff;
+  z-index: 2;
+  box-shadow: 0 2px 8px rgba(0, 191, 255, 0.4);
 }
 
-.card-header>* {
-  margin-right: 1rem;
+.card-index.not-in-stock-card {
+  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
 }
 
-.card-header>*:last-child {
-  margin-right: 0;
+.card-index.in-stock-card {
+  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
+  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
 }
 
-.card-header-left {
+/* 图片区域 */
+.card-image {
+  width: 100%;
+  aspect-ratio: 3 / 4;
   display: flex;
   align-items: center;
-  flex: 1;
-  min-width: 0;
+  justify-content: center;
+  overflow: hidden;
+  margin: 15px;
+  margin-bottom: 10px;
+  border-radius: 8px;
+  width: calc(100% - 30px);
 }
 
-.card-header-right {
+.image-placeholder {
   display: flex;
   align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #f0f4f8 0%, #e8ecf0 100%);
+  color: #94a3b8;
+  font-size: 48px;
 }
 
-.card-header-right>* {
-  margin-left: 0.75rem;
+.image-placeholder.not-in-stock-card {
+  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
+  color: #fff;
 }
 
-.card-header-right>*:first-child {
-  margin-left: 0;
+.image-placeholder.in-stock-card {
+  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
+  color: #fff;
 }
 
-/* 卡片标题信息 */
-.card-title-info {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
+/* 信息区域 */
+.card-info {
+  padding: 10px 15px 15px;
 }
 
-.card-title-info>* {
-  margin-bottom: 0.25rem;
+.info-row {
+  display: flex;
+  align-items: baseline;
+  margin-bottom: 6px;
+  font-size: 14px;
 }
 
-.card-title-info>*:last-child {
+.info-row:last-child {
   margin-bottom: 0;
 }
 
-.card-name {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: #111827;
-  line-height: 1.5;
+.info-label {
+  color: #7ec8ff;
   white-space: nowrap;
+  margin-right: 5px;
+}
+
+.info-value {
+  color: #fff;
+  flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.card-subtitle {
-  font-size: 0.875rem;
-  color: #6b7280;
-  line-height: 1.4;
+/* 位置行样式 */
+.location-row {
+  display: flex;
+  align-items: center;
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid rgba(30, 144, 255, 0.2);
 }
 
-/* 卡片位置信息 */
-.card-location {
+.location-icon {
+  color: #00bfff;
+  font-size: 12px;
+  margin-right: 6px;
+}
+
+/* ========== 状态区域（固定高度） ========== */
+.card-status-section {
+  padding: 12px 15px;
+  border-top: 1px solid rgba(30, 144, 255, 0.3);
+  background: rgba(9, 61, 140, 0.3);
+  min-height: 50px;
   display: flex;
   align-items: center;
-  padding: 0.5rem 1rem;
-  background-color: #f3f4f6;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  color: #374151;
-  white-space: nowrap;
+  justify-content: center;
 }
 
-.card-location i {
-  color: #3b82f6;
+/* 状态标签 */
+.status-badge {
+  padding: 8px 20px;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
-/* 按钮样式 */
-:deep(.van-button--primary) {
-  background-color: #3b82f6;
-  border-color: #3b82f6;
+.status-badge.not-in-stock-card {
+  background: rgba(59, 130, 246, 0.3);
+  border: 1px solid #3b82f6;
+  color: #93c5fd;
 }
 
-:deep(.van-button--primary:active) {
-  background-color: #2563eb;
-  border-color: #2563eb;
+.status-badge.in-stock-card {
+  background: rgba(239, 68, 68, 0.3);
+  border: 1px solid #ef4444;
+  color: #fca5a5;
 }
 
-:deep(.van-button--disabled) {
-  opacity: 0.5;
-  cursor: not-allowed;
+/* ========== 底部操作按钮 ========== */
+.bottom-actions {
+  width: 100%;
+  padding: 15px 30px;
+  box-sizing: border-box;
+  background: rgba(4, 28, 61, 0.95);
+  z-index: 20;
+  flex-shrink: 0;
 }
 
 .submit-btn {
-  background-color: #10b981 !important;
-  border-color: #10b981 !important;
-  width: auto;
-  padding: 0 24px;
+  width: 100%;
+  padding: 18px 0;
+  background: #4a99e2;
+  border: none;
+  border-radius: 12px;
+  font-size: 24px;
+  font-weight: bold;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.3s;
+  letter-spacing: 8px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
-:deep(.submit-btn.van-button--primary) {
-  background-color: #10b981 !important;
-  border-color: #10b981 !important;
+.submit-btn:hover:not(:disabled) {
+  box-shadow: 0 0 30px rgba(16, 185, 129, 0.6);
+  transform: translateY(-2px);
 }
 
-:deep(.submit-btn.van-button--primary:active) {
-  background-color: #059669 !important;
-  border-color: #059669 !important;
+.submit-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: linear-gradient(90deg, #6b7280 0%, #9ca3af 100%);
 }
 
-/* 自定义头像 */
-.custom-avatar {
-  width: 42px;
-  height: 42px;
-  border-radius: 50%;
-  background-color: #3b82f6;
+/* ========== Loading 遮罩 ========== */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(4, 28, 61, 0.8);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
-  font-size: 20px;
-  flex-shrink: 0;
+  z-index: 1000;
+}
+
+.loading-spinner {
+  width: 60px;
+  height: 60px;
+  border: 4px solid rgba(30, 144, 255, 0.3);
+  border-top-color: #00bfff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ========== 响应式 - 横屏 ========== */
+@media screen and (orientation: landscape) {
+  .header-section {
+    padding: 10px 20px;
+  }
+
+  .page-title {
+    font-size: 22px;
+  }
+
+  .logout-btn {
+    padding: 6px 14px;
+    font-size: 13px;
+    left: 20px;
+  }
+
+  .logout-btn i {
+    font-size: 14px;
+  }
+
+  .header-actions {
+    right: 20px;
+  }
+
+  .action-btn {
+    padding: 6px 14px;
+    font-size: 13px;
+  }
+
+  .action-btn i {
+    font-size: 14px;
+  }
+
+  .main-content {
+    padding: 0 20px;
+  }
+
+  .stats-section {
+    padding: 10px 15px;
+    margin-bottom: 10px;
+  }
+
+  .stats-text {
+    font-size: 14px;
+  }
+
+  /* 卡片网格响应式 */
+  .card-grid {
+    grid-template-columns: repeat(6, 1fr);
+    gap: 15px;
+  }
+
+  .card-index {
+    width: 24px;
+    height: 24px;
+    font-size: 11px;
+    top: 6px;
+    left: 6px;
+  }
+
+  .card-image {
+    margin: 10px;
+    margin-bottom: 8px;
+    width: calc(100% - 20px);
+  }
+
+  .image-placeholder {
+    font-size: 36px;
+  }
+
+  .card-info {
+    padding: 6px 10px 8px;
+  }
+
+  .info-row {
+    font-size: 11px;
+    margin-bottom: 3px;
+  }
+
+  .location-icon {
+    font-size: 10px;
+  }
+
+  .card-status-section {
+    padding: 8px 10px;
+    min-height: 40px;
+  }
+
+  .status-badge {
+    padding: 5px 12px;
+    font-size: 11px;
+    gap: 4px;
+  }
+
+  .bottom-actions {
+    padding: 10px 20px;
+  }
+
+  .submit-btn {
+    padding: 12px 0;
+    font-size: 18px;
+    letter-spacing: 6px;
+    border-radius: 8px;
+  }
 }
 </style>

src/stock-in/ReturnedLeave.vue

@@ -1,106 +1,146 @@
-<!-- 还料离开 -->
+<!-- 还料离开 - 智能仓储风格 -->
 <template>
-  <div class="page-container">
-    <!-- 顶部信息栏 -->
-    <PageHeader title="还料离开" />
+  <div class="stock-requisition-page">
+    <!-- 背景层 -->
+    <div class="bg-layer" :style="{ backgroundImage: `url(${bgImg})` }" />
+
+    <!-- 顶部标题区域 -->
+    <div class="header-section">
+      <button class="logout-btn" @click="goHome">
+        <i class="fas fa-home" />
+        <span>主页</span>
+      </button>
+      <h1 class="page-title">还料离开</h1>
+      <!-- 右侧操作按钮 -->
+      <div class="header-actions">
+        <button class="action-btn refresh-btn" @click="verify">
+          <i class="fas fa-sync-alt" />
+          <span>重新校验</span>
+        </button>
+      </div>
+    </div>
 
     <!-- 主内容区域 -->
     <main class="main-content">
-      <!-- 页面标题 -->
-      <div class="page-header-row">
-        <van-button type="primary" @click="verify">
-          <i class="fas fa-sync-alt mr-1" /> 重新校验
-        </van-button>
+      <!-- 统计信息 -->
+      <div v-if="materialList.length > 0" class="stats-section">
+        <span class="stats-text">共 {{ materialList.length }} 条数据</span>
       </div>
 
-      <!-- 卡片容器 -->
-      <div class="card-container">
-        <!-- 卡片列表区域 -->
-        <div class="card-list-wrapper">
-          <van-empty v-if="materialList.length === 0" description="暂无数据" />
-
-          <!-- 卡片列表 -->
-          <div v-else class="card-list">
-            <div
-              v-for="(item, index) in materialList" :key="item.id || index" :class="getCardClass(item.remarks)"
-              class="inventory-card"
-            >
-              <div class="card-header">
-                <div class="card-header-left">
-                  <div class="custom-avatar">
-                    <!-- :style="{ backgroundColor: getStatusColor(item.remarks) }" -->
-                    <i :class="getInventoryIcon(item.inventoryType)" />
-                  </div>
-                  <div class="ml-4 card-title-info">
-                    <div class="card-name">{{ item.inventoryName }}</div>
-                    <div class="card-subtitle">编号: {{ item.inventoryNo }}</div>
-                  </div>
-                </div>
-                <div class="card-header-right">
-                  <div class="card-location">
-                    <i class="fas fa-map-marker-alt mr-2" />
-                    <span>{{ item.positionName || '-' }}</span>
-                    <span class="mx-2">/</span>
-                    <span>{{ item.remarks || '-' }}</span>
-                  </div>
-                </div>
+      <!-- 卡片网格区域 -->
+      <div class="card-grid-wrapper">
+        <!-- 空状态 -->
+        <div v-if="materialList.length === 0 && !loading" class="empty-state">
+          <i class="fas fa-inbox empty-icon" />
+          <p>暂无数据</p>
+        </div>
+
+        <!-- 卡片网格 -->
+        <div v-else class="card-grid">
+          <div
+            v-for="(item, index) in materialList"
+            :key="item.id || index"
+            class="inventory-card"
+            :class="getCardClass(item)"
+          >
+            <!-- 卡片序号 -->
+            <div class="card-index" :class="getCardClass(item)">{{ index + 1 }}</div>
+
+            <!-- 图片区域 -->
+            <div class="card-image">
+              <div class="image-placeholder" :class="getCardClass(item)">
+                <i :class="getInventoryIcon(item.inventoryType)" />
+              </div>
+            </div>
+
+            <!-- 信息区域 -->
+            <div class="card-info">
+              <div class="info-row">
+                <span class="info-label">类型:</span>
+                <span class="info-value">{{ item.inventoryType || '-' }}</span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">名称:</span>
+                <span class="info-value">{{ item.inventoryName || '-' }}</span>
+              </div>
+              <div class="info-row location-row">
+                <i class="fas fa-map-marker-alt location-icon" />
+                <span class="info-value">{{ item.positionName || '-' }}</span>
               </div>
             </div>
-          </div>
-        </div>
 
-        <!-- 分页区域（固定底部） -->
-        <div v-if="materialList.length > 0" class="pagination-wrapper">
-          <span class="text-gray-600">共 {{ materialList.length }} 条数据</span>
+            <!-- 状态区域（固定高度） -->
+            <div class="card-status-section">
+              <div class="status-badge" :class="getCardClass(item)">
+                <i class="fas fa-exclamation-circle" />
+                {{ item.remarks || '-' }}
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </main>
-    <!-- 底部完成按钮 -->
+
+    <!-- 底部操作按钮 -->
     <div class="bottom-actions">
-      <van-button
-        type="primary" size="large" :disabled="notInStockCount === 0" class="submit-btn"
-        @click="handleComplete"
-      >
-        <i class="fas fa-check-circle mr-2" />
+      <button class="submit-btn" :disabled="notInStockCount" @click="handleComplete">
         还料离开
-      </van-button>
+      </button>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading" class="loading-overlay">
+      <div class="loading-spinner" />
     </div>
   </div>
-  <Loading v-if="loading" />
 </template>
 
 <script setup>
 import { useRouter } from 'vue-router';
 import { showNotify } from 'vant';
-import PageHeader from '../common/PageHeader.vue';
-import { ref, reactive, onMounted, computed } from 'vue';
-import { cfStockIn, createStockIn, cfStockInLeave } from '../api/stockIn.js';
+import { ref, onMounted, computed } from 'vue';
+import { queryCFStockInByUser, backfillCFStockInTime, cfStockInLeave } from '../api/stockIn.js';
+
+// 图片资源
+import bgImg from '../assets/images/bj.png';
 
 const router = useRouter();
 
+// 返回主页
+const goHome = () => {
+    router.push('/home');
+};
+
 // 表格加载状态
 const loading = ref(false);
 
+const isCanLeave = ref(false);
+
 // 物料列表数据
 const materialList = ref([]);
 
-// 分页配置
-const pagination = reactive({
-    start: 1,
-    lang: 10,
-    total: 0,
-});
+// 人员对应的物料列表
+const inList = ref([]);
+
+// 校验列表
+const validateList = ref([]);
 
-// 计算不在库的数量
+// 是否可以还料离开
 const notInStockCount = computed(() => {
-    return materialList.value.filter(item => item.remarks === '不在库').length;
+    if (isCanLeave.value === true) {
+        return false;
+    }
+    // if (inList.value.length === 0) {
+    //     return false;
+    // }
+    return true;
 });
 
-// 根据 remarks 返回卡片样式类
-const getCardClass = remarks => {
-    if (remarks === '不在库') {
+// 根据 isValid 返回卡片样式类
+const getCardClass = card => {
+    if (card.isValid === true) {
         return 'not-in-stock-card';
-    } else if (remarks === '在库') {
+    } else if (card.isValid === false) {
         return 'in-stock-card';
     }
     return '';
@@ -116,33 +156,11 @@ const getInventoryIcon = type => {
     return iconMap[type] || 'fas fa-cube';
 };
 
-// 获取状态颜色
-// const getStatusColor = remarks => {
-//     if (remarks === '不在库') {
-//         return '#3b82f6'; // 蓝色 - 需要入库
-//     } else if (remarks === '在库') {
-//         return '#10b981'; // 绿色 - 已在库
-//     }
-//     return '#6b7280'; // 灰色 - 默认
-// };
-
-// 还料入库
+// 还料离开
 const handleComplete = async () => {
-    // 只处理不在库的数据
-    const notInStockItems = materialList.value.filter(item => item.remarks === '不在库');
-
-    if (notInStockItems.length === 0) {
-        showNotify({ type: 'warning', message: '没有需要入库的物料！' });
-        return;
-    }
+    const params = inList.value.map(item => {
+        return item.stockInId;
 
-    const params = [];
-    notInStockItems.forEach(item => {
-        if (item.remarks === '不在库') {
-            params.push({
-                inventoryId: item.inventoryId,
-            });
-        }
     });
 
     console.log('提交参数:', params);
@@ -151,7 +169,36 @@ const handleComplete = async () => {
 
 // 校验
 const verify = () => {
-    getInnerList();
+    inList.value = [];
+    validateList.value = [];
+    materialList.value = [];
+    getCFStockInByUser();
+};
+
+// 查询用户对应工装设备信息
+const getCFStockInByUser = async () => {
+    const info = localStorage.getItem('#LoginInfo');
+    const userId = JSON.parse(info).userId;
+    try {
+        const res = await queryCFStockInByUser(userId);
+
+        if (res.errorCode === 0) {
+            if (res.datas && res.datas.length > 0) {
+                materialList.value = res.datas;
+                inList.value = res.datas;
+                getInnerList();
+            } else {
+                materialList.value = [];
+                inList.value = [];
+            }
+        } else {
+            showNotify({ type: 'warning', message: res.errorMessage,zIndex: 99999999 });
+            getInnerList();
+        }
+    } catch (error) {
+        console.error('获取物料列表API调用失败:', error);
+        showNotify({ type: 'danger', message: '获取物料列表API调用失败' });
+    }
 };
 
 // 获取物料列表(内侧校验)
@@ -161,15 +208,20 @@ const getInnerList = async () => {
         const res = await cfStockInLeave();
 
         if (res.errorCode === 0) {
-            if (res.datas && res.datas.length > 0) {
-                materialList.value = res.datas;
-                pagination.total = materialList.value.length;
-                showNotify({ type: 'warning', message: '检测到您已携带工装设备，请将工装设备全部还料后，再次点击【重新校验】按钮，待校验通过后,请在闸机开门后离开', duration: 8000 });
+            isCanLeave.value = true;
+            showNotify({ type: 'success', message: '校验成功，请先点击【还料离开】按钮，待闸机开门后离开',duration: 6000  });
+        } else {
+            if (res.errorMessage === '识别到工装设备') {
+                isCanLeave.value = false;
+                res.datas.forEach(item => {
+                    item.isValid = true;
+                });
+                materialList.value = [...materialList.value, ...res.datas];
+                validateList.value = res.datas;
+                showNotify({ type: 'danger', message: '检测到您已携带工装设备，请将工装设备全部还料后，再次点击【重新校验】按钮，待校验通过后,请在闸机开门后离开', duration: 6000 });
             } else {
-                showNotify({ type: 'success', message: '校验成功，请在闸机开门后离开' });
+                showNotify({ type: 'warning', message: res.errorMessage });
             }
-        } else {
-            showNotify({ type: 'warning', message: res.errorMessage });
         }
     } catch (error) {
         console.error('获取物料列表API调用失败:', error);
@@ -178,269 +230,556 @@ const getInnerList = async () => {
         loading.value = false;
     }
 };
-// 生成CF入库单
+// 还料离开(回填归还入库单入库时间)
 const generateCFStockIn = async params => {
     loading.value = true;
     try {
-        const res = await createStockIn(params);
+        const res = await backfillCFStockInTime(params);
 
         if (res.errorCode === 0) {
-            showNotify({ type: 'success', message: '入库申请已完成，还料任务已创建！' });
+            showNotify({ type: 'success', message: '还料离开已完成！' });
             router.push('/home');
         } else {
             showNotify({ type: 'warning', message: res.errorMessage });
         }
 
     } catch (error) {
-        console.error('生成CF入库单API调用失败:', error);
-        showNotify({ type: 'danger', message: '生成CF入库单API调用失败' });
+        console.error('生成CF离开单API调用失败:', error);
+        showNotify({ type: 'danger', message: '生成CF离开单API调用失败' });
     } finally {
         loading.value = false;
     }
 };
 
+
 onMounted(() => {
-    getInnerList();
+    getCFStockInByUser();
 });
 </script>
 
 <style scoped>
-/* 页面容器 - 固定高度布局 */
-.page-container {
-  display: flex;
-  flex-direction: column;
+/* ========== 基础样式 ========== */
+.stock-requisition-page {
+  width: 100%;
   height: 100vh;
-  background-color: #f9fafb;
+  max-height: 100vh;
+  position: relative;
+  font-family: 'Microsoft YaHei', sans-serif;
+  color: #fff;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
-/* 主内容区 - 可滚动 */
-.main-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1rem;
+/* 背景层 */
+.bg-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #041c3d;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  z-index: 0;
+}
+
+/* ========== 顶部标题区域 ========== */
+.header-section {
+  position: relative;
+  width: 100%;
+  padding: 20px 30px;
+  box-sizing: border-box;
+  z-index: 10;
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
-/* 操作按钮行 */
-.page-header-row {
+.logout-btn {
+  position: absolute;
+  left: 30px;
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
-  justify-content: flex-end;
   align-items: center;
-  margin-bottom: 1rem;
+  gap: 8px;
+  background: linear-gradient(90deg, #1a4a7a 0%, #0d3a6a 100%);
+  border: 1px solid #2a7fff;
+  border-radius: 8px;
+  padding: 10px 20px;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.logout-btn:hover {
+  background: linear-gradient(90deg, #2a5a8a 0%, #1d4a7a 100%);
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.4);
 }
 
-/* 卡片容器 */
-.card-container {
+.logout-btn i {
+  font-size: 18px;
+  color: #00bfff;
+}
+
+.page-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #ffffff;
+  letter-spacing: 2px;
+  margin: 0;
+  text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
+}
+
+/* 右侧操作按钮 */
+.header-actions {
+  position: absolute;
+  right: 30px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: linear-gradient(90deg, #1a4a7a 0%, #0d3a6a 100%);
+  border: 1px solid #2a7fff;
+  border-radius: 8px;
+  padding: 10px 20px;
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.action-btn:hover {
+  background: linear-gradient(90deg, #2a5a8a 0%, #1d4a7a 100%);
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.4);
+}
+
+.action-btn i {
+  font-size: 16px;
+  color: #00bfff;
+}
+
+/* ========== 主内容区域 ========== */
+.main-content {
   flex: 1;
-  background-color: white;
-  border-radius: 0.5rem;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  padding: 0 30px;
+  position: relative;
+  z-index: 10;
   min-height: 0;
+  overflow: hidden;
 }
 
-/* 卡片列表包装器（可滚动区域） */
-.card-list-wrapper {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.5rem;
-  min-height: 0;
+/* 统计信息 */
+.stats-section {
+  background: rgba(9, 61, 140, 0.5);
+  border: 1px solid #049FD8;
+  border-radius: 12px;
+  padding: 15px 20px;
+  margin-bottom: 15px;
+  flex-shrink: 0;
 }
 
-/* 卡片列表（单列布局） */
-.card-list {
-  display: flex;
-  flex-direction: column;
+.stats-text {
+  color: #7ec8ff;
+  font-size: 16px;
 }
 
-.card-list>* {
-  margin-bottom: 1rem;
+/* ========== 卡片网格区域 ========== */
+.card-grid-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-bottom: 10px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 
-.card-list>*:last-child {
-  margin-bottom: 0;
+.card-grid-wrapper::-webkit-scrollbar {
+  display: none;
 }
 
-/* 分页包装器（固定底部） */
-.pagination-wrapper {
-  padding: 0.5rem 1.5rem;
-  border-top: 1px solid #e5e7eb;
-  border-bottom: 1px solid #e5e7eb;
-  background-color: #fafafa;
+/* 空状态 */
+.empty-state {
+  flex: 1;
   display: flex;
-  justify-content: flex-end;
+  flex-direction: column;
   align-items: center;
+  justify-content: center;
+  color: #7ec8ff;
+  padding: 60px 0;
 }
 
-/* 底部操作按钮 */
-.bottom-actions {
-  position: sticky;
-  bottom: 0;
-  padding: 0 1rem 1rem 1rem;
-  background-color: #f9fafb;
-  display: flex;
-  justify-content: flex-end;
-  z-index: 10;
+.empty-icon {
+  font-size: 80px;
+  margin-bottom: 20px;
+  opacity: 0.5;
 }
 
-/* 库存卡片样式 */
+.empty-state p {
+  font-size: 18px;
+  margin: 0;
+}
+
+/* 卡片网格 - 4列布局 */
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+
+/* ========== 设备卡片样式 ========== */
 .inventory-card {
-  padding: 1rem 1.5rem;
-  transition: all 0.25s ease;
-  border: 2px solid #e5e7eb;
-  background-color: #ffffff;
-  border-radius: 0.5rem;
-  cursor: pointer;
+  background: rgba(5, 30, 60, 0.8);
+  border: 2px solid #0d4a8a;
+  border-radius: 12px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  position: relative;
 }
 
 .inventory-card:hover {
-  border-color: #93c5fd;
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
+  border-color: #1e90ff;
+  box-shadow: 0 0 20px rgba(30, 144, 255, 0.3);
+  transform: translateY(-3px);
 }
 
-/* 不在库卡片 */
-.not-in-stock-card {
-  background-color: #eff6ff !important;
-  border-color: #93c5fd !important;
+/* 校验失败卡片 - 红色警告 */
+.inventory-card.not-in-stock-card {
+  border-color: #ef4444;
 }
 
-/* 在库卡片 */
-.in-stock-card {
-  background-color: #f5f5f5 !important;
-  border-color: #d1d5db !important;
+/* 校验通过卡片 - 绿色 */
+.inventory-card.in-stock-card {
+  border-color: #10b981;
 }
 
-/* 卡片标题区域 */
-.card-header {
+/* 卡片序号 - 左上角 */
+.card-index {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  width: 36px;
+  height: 36px;
+  background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%);
+  border-radius: 50%;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  width: 100%;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: #fff;
+  z-index: 2;
+  box-shadow: 0 2px 8px rgba(0, 191, 255, 0.4);
 }
 
-.card-header>* {
-  margin-right: 1rem;
+.card-index.not-in-stock-card {
+  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
+  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
 }
 
-.card-header>*:last-child {
-  margin-right: 0;
+.card-index.in-stock-card {
+  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
+  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
 }
 
-.card-header-left {
+/* 图片区域 */
+.card-image {
+  width: 100%;
+  aspect-ratio: 3 / 4;
   display: flex;
   align-items: center;
-  flex: 1;
-  min-width: 0;
+  justify-content: center;
+  overflow: hidden;
+  margin: 15px;
+  margin-bottom: 10px;
+  border-radius: 8px;
+  width: calc(100% - 30px);
 }
 
-.card-header-right {
+.image-placeholder {
   display: flex;
   align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #f0f4f8 0%, #e8ecf0 100%);
+  color: #94a3b8;
+  font-size: 48px;
 }
 
-.card-header-right>* {
-  margin-left: 0.75rem;
+.image-placeholder.not-in-stock-card {
+  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
+  color: #fff;
 }
 
-.card-header-right>*:first-child {
-  margin-left: 0;
+.image-placeholder.in-stock-card {
+  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
+  color: #fff;
 }
 
-/* 卡片标题信息 */
-.card-title-info {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
+/* 信息区域 */
+.card-info {
+  padding: 10px 15px 15px;
 }
 
-.card-title-info>* {
-  margin-bottom: 0.25rem;
+.info-row {
+  display: flex;
+  align-items: baseline;
+  margin-bottom: 6px;
+  font-size: 14px;
 }
 
-.card-title-info>*:last-child {
+.info-row:last-child {
   margin-bottom: 0;
 }
 
-.card-name {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: #111827;
-  line-height: 1.5;
+.info-label {
+  color: #7ec8ff;
   white-space: nowrap;
+  margin-right: 5px;
+}
+
+.info-value {
+  color: #fff;
+  flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 位置行样式 */
+.location-row {
+  display: flex;
+  align-items: center;
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid rgba(30, 144, 255, 0.2);
 }
 
-.card-subtitle {
-  font-size: 0.875rem;
-  color: #6b7280;
-  line-height: 1.4;
+.location-icon {
+  color: #00bfff;
+  font-size: 12px;
+  margin-right: 6px;
 }
 
-/* 卡片位置信息 */
-.card-location {
+/* ========== 状态区域（固定高度） ========== */
+.card-status-section {
+  padding: 12px 15px;
+  border-top: 1px solid rgba(30, 144, 255, 0.3);
+  background: rgba(9, 61, 140, 0.3);
+  min-height: 50px;
   display: flex;
   align-items: center;
-  padding: 0.5rem 1rem;
-  background-color: #f3f4f6;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  color: #374151;
-  white-space: nowrap;
+  justify-content: center;
 }
 
-.card-location i {
-  color: #3b82f6;
+/* 状态标签 */
+.status-badge {
+  padding: 8px 20px;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
-/* 按钮样式 */
-:deep(.van-button--primary) {
-  background-color: #3b82f6;
-  border-color: #3b82f6;
+.status-badge.not-in-stock-card {
+  background: rgba(239, 68, 68, 0.3);
+  border: 1px solid #ef4444;
+  color: #fca5a5;
 }
 
-:deep(.van-button--primary:active) {
-  background-color: #2563eb;
-  border-color: #2563eb;
+.status-badge.in-stock-card {
+  background: rgba(16, 185, 129, 0.3);
+  border: 1px solid #10b981;
+  color: #6ee7b7;
 }
 
-:deep(.van-button--disabled) {
-  opacity: 0.5;
-  cursor: not-allowed;
+/* ========== 底部操作按钮 ========== */
+.bottom-actions {
+  width: 100%;
+  padding: 15px 30px;
+  box-sizing: border-box;
+  background: rgba(4, 28, 61, 0.95);
+  z-index: 20;
+  flex-shrink: 0;
 }
 
 .submit-btn {
-  background-color: #10b981 !important;
-  border-color: #10b981 !important;
-  width: auto;
-  padding: 0 24px;
+  width: 100%;
+  padding: 18px 0;
+  background: #4a99e2;
+  border: none;
+  border-radius: 12px;
+  font-size: 24px;
+  font-weight: bold;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.3s;
+  letter-spacing: 8px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
-:deep(.submit-btn.van-button--primary) {
-  background-color: #10b981 !important;
-  border-color: #10b981 !important;
+.submit-btn:hover:not(:disabled) {
+  box-shadow: 0 0 30px rgba(16, 185, 129, 0.6);
+  transform: translateY(-2px);
 }
 
-:deep(.submit-btn.van-button--primary:active) {
-  background-color: #059669 !important;
-  border-color: #059669 !important;
+.submit-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: linear-gradient(90deg, #6b7280 0%, #9ca3af 100%);
 }
 
-/* 自定义头像 */
-.custom-avatar {
-  width: 42px;
-  height: 42px;
-  border-radius: 50%;
-  background-color: #3b82f6;
+/* ========== Loading 遮罩 ========== */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(4, 28, 61, 0.8);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
-  font-size: 20px;
-  flex-shrink: 0;
+  z-index: 1000;
+}
+
+.loading-spinner {
+  width: 60px;
+  height: 60px;
+  border: 4px solid rgba(30, 144, 255, 0.3);
+  border-top-color: #00bfff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ========== 响应式 - 横屏 ========== */
+@media screen and (orientation: landscape) {
+  .header-section {
+    padding: 10px 20px;
+  }
+
+  .page-title {
+    font-size: 22px;
+  }
+
+  .logout-btn {
+    padding: 6px 14px;
+    font-size: 13px;
+    left: 20px;
+  }
+
+  .logout-btn i {
+    font-size: 14px;
+  }
+
+  .header-actions {
+    right: 20px;
+  }
+
+  .action-btn {
+    padding: 6px 14px;
+    font-size: 13px;
+  }
+
+  .action-btn i {
+    font-size: 14px;
+  }
+
+  .main-content {
+    padding: 0 20px;
+  }
+
+  .stats-section {
+    padding: 10px 15px;
+    margin-bottom: 10px;
+  }
+
+  .stats-text {
+    font-size: 14px;
+  }
+
+  /* 卡片网格响应式 */
+  .card-grid {
+    grid-template-columns: repeat(6, 1fr);
+    gap: 15px;
+  }
+
+  .card-index {
+    width: 24px;
+    height: 24px;
+    font-size: 11px;
+    top: 6px;
+    left: 6px;
+  }
+
+  .card-image {
+    margin: 10px;
+    margin-bottom: 8px;
+    width: calc(100% - 20px);
+  }
+
+  .image-placeholder {
+    font-size: 36px;
+  }
+
+  .card-info {
+    padding: 6px 10px 8px;
+  }
+
+  .info-row {
+    font-size: 11px;
+    margin-bottom: 3px;
+  }
+
+  .location-icon {
+    font-size: 10px;
+  }
+
+  .card-status-section {
+    padding: 8px 10px;
+    min-height: 40px;
+  }
+
+  .status-badge {
+    padding: 5px 12px;
+    font-size: 11px;
+    gap: 4px;
+  }
+
+  .bottom-actions {
+    padding: 10px 20px;
+  }
+
+  .submit-btn {
+    padding: 12px 0;
+    font-size: 18px;
+    letter-spacing: 6px;
+    border-radius: 8px;
+  }
 }
 </style>

src/stock-out/AgvRfidRecognition.vue

@@ -1,185 +1,141 @@
-<!-- AGV RFID识别界面 -->
+<!-- AGV RFID识别界面 - 智能仓储风格 -->
 <template>
-  <div class="bg-gray-50 min-h-screen">
-    <!-- 顶部信息栏 -->
-    <PageHeader />
-
-    <div class="max-w-[1440px] mx-auto px-8 py-12" style="padding-top: 1rem;">
-      <!-- 任务状态区域 -->
-      <section class="mb-16">
-        <button
-          class="px-6 py-3 bg-primary text-white font-medium rounded hover:bg-indigo-700 transition duration-300 flex items-center"
-          style="margin-bottom: 1rem;background-color: #3c97e7;" @click="getAgvRfidLog"
-        >
-          <i class="fas fa-sync-alt mr-2" />刷新结果
+  <div class="stock-requisition-page">
+    <!-- 背景层 -->
+    <div class="bg-layer" :style="{ backgroundImage: `url(${bgImg})` }" />
+
+    <!-- 顶部标题区域 -->
+    <div class="header-section">
+      <button class="logout-btn" @click="handleBack">
+        <i class="fas fa-home" />
+        <span>主页</span>
+      </button>
+      <h1 class="page-title">AGV RFID识别</h1>
+      <!-- 右侧操作按钮 -->
+      <div class="header-actions">
+        <button class="action-btn refresh-btn" @click="getAgvRfidLog">
+          <i class="fas fa-sync-alt" />
+          <span>刷新结果</span>
         </button>
-        <div class="task-card bg-white rounded-xl p-8 border border-gray-200">
-          <div class="flex items-start justify-between mb-6">
-            <div>
-              <h2 class="text-2xl font-semibold mb-2">任务状态</h2>
-              <p class="text-gray-500">当前 AGV 执行任务的实时状态信息</p>
-            </div>
-            <span
-              class="px-4 py-2 rounded-full text-sm font-medium"
-              :class="taskStatus.success ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'"
-            >
-              <i class="fas mr-2" :class="taskStatus.success ? 'fa-check-circle' : 'fa-exclamation-circle'" />
-              {{ taskStatus.text }}
-            </span>
-          </div>
+      </div>
+    </div>
 
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
-            <div class="bg-gray-50 p-5 rounded-lg">
-              <p class="text-gray-500 text-sm mb-1">任务 ID</p>
-              <p class="text-lg font-mono">{{ taskInfo.taskId }}</p>
-            </div>
-            <div class="bg-gray-50 p-5 rounded-lg">
-              <p class="text-gray-500 text-sm mb-1">执行次数</p>
-              <p v-if="taskStatus.success" class="text-lg">第 {{ taskInfo.executionCount }} 次</p>
-              <p v-else class="text-lg" />
-            </div>
-            <div class="bg-gray-50 p-5 rounded-lg">
-              <p class="text-sm mb-1" :class="taskStatus.success ? 'text-green-500' : 'text-red-500'">
-                信息
-              </p>
-              <p class="text-lg" :class="taskStatus.success ? 'text-green-600' : 'text-red-600'">
-                {{ taskInfo.message }}
-              </p>
-            </div>
+    <!-- 主内容区域 -->
+    <main class="main-content">
+      <!-- 任务状态卡片 -->
+      <div class="task-status-card">
+        <div class="status-header">
+          <div class="status-title">
+            <i class="fas fa-tasks" />
+            <span>任务状态</span>
+          </div>
+          <div class="status-badge" :class="taskStatus.success ? 'success' : 'error'">
+            <i :class="taskStatus.success ? 'fas fa-check-circle' : 'fas fa-exclamation-circle'" />
+            {{ taskStatus.text }}
+          </div>
+        </div>
+        <div class="status-info-grid">
+          <div class="status-info-item">
+            <span class="info-label">任务 ID</span>
+            <span class="info-value font-mono">{{ taskInfo.taskId || '-' }}</span>
+          </div>
+          <div class="status-info-item">
+            <span class="info-label">执行次数</span>
+            <span class="info-value">{{ taskStatus.success ? `第 ${taskInfo.executionCount} 次` : '-' }}</span>
+          </div>
+          <div class="status-info-item">
+            <span class="info-label">信息</span>
+            <span class="info-value" :class="taskStatus.success ? 'text-success' : 'text-error'">{{ taskInfo.message || '-' }}</span>
           </div>
         </div>
-      </section>
+      </div>
 
       <!-- 设备信息区域 -->
-      <section class="mb-16">
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
-          <!-- 目标设备卡片 -->
-          <div class="task-card bg-white rounded-xl p-8 border border-gray-200 target-device-card">
-            <div class="flex items-center mb-6">
-              <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
-                <i class="fas fa-box-open text-xl" />
-              </div>
-              <div>
-                <h2 class="text-2xl font-semibold">目标搬运工装</h2>
-                <p class="text-gray-500">AGV 应当搬运的设备信息</p>
-              </div>
+      <div class="device-section">
+        <!-- 目标设备卡片 -->
+        <div class="device-card target-card">
+          <div class="card-header-icon">
+            <div class="icon-circle target">
+              <i class="fas fa-box-open" />
             </div>
-
-            <div class="mt-6 p-6 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-100">
-              <div class="flex justify-between items-center">
-                <div>
-                  <p class="text-gray-500 text-sm">工装名称</p>
-                  <p class="text-xl font-semibold mt-1">{{ targetDevice.name }}</p>
-                </div>
-                <span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">
-                  目标
-                </span>
+            <div class="card-title">
+              <h3>目标搬运工装</h3>
+              <p>AGV 应当搬运的设备信息</p>
+            </div>
+          </div>
+          <div class="target-device-list">
+            <div class="target-device-item">
+              <div class="device-info">
+                <span class="device-label">工装名称</span>
+                <span class="device-name">{{ targetDevice.name || '暂无' }}</span>
               </div>
+              <span class="device-tag target">目标</span>
             </div>
-            <div
-              v-if="targetDevice2.name"
-              class="mt-6 p-6 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-100"
-            >
-              <div class="flex justify-between items-center">
-                <div>
-                  <p class="text-gray-500 text-sm">工装名称</p>
-                  <p class="text-xl font-semibold mt-1">{{ targetDevice2.name }}</p>
-                </div>
-                <span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">
-                  目标
-                </span>
+            <div v-if="targetDevice2.name" class="target-device-item">
+              <div class="device-info">
+                <span class="device-label">工装名称</span>
+                <span class="device-name">{{ targetDevice2.name }}</span>
               </div>
+              <span class="device-tag target">目标</span>
             </div>
           </div>
+        </div>
 
-          <!-- 已识别设备列表卡片 -->
-          <div class="task-card bg-white rounded-xl p-8 border border-gray-200">
-            <div class="flex items-center mb-6">
-              <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-4">
-                <i class="fas fa-tags text-xl" />
-              </div>
-              <div>
-                <h2 class="text-2xl font-semibold">已识别工装列表</h2>
-                <p class="text-gray-500">RFID 实际扫描到的设备信息</p>
-              </div>
+        <!-- 已识别设备列表卡片 -->
+        <div class="device-card identified-card">
+          <div class="card-header-icon">
+            <div class="icon-circle identified">
+              <i class="fas fa-tags" />
             </div>
-
-            <div class="space-y-5 mt-6">
-              <div
-                v-for="(device) in identifiedDevices" :key="device.code"
-                class="device-item bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl p-6 border border-purple-100"
-              >
-                <div class="flex justify-between items-center">
-                  <div>
-                    <p class="text-gray-500 text-sm">工装编号</p>
-                    <p class="font-mono text-lg">{{ device.code }}</p>
+            <div class="card-title">
+              <h3>已识别工装列表</h3>
+              <p>RFID 实际扫描到的设备信息</p>
+            </div>
+          </div>
+          <div class="identified-device-list">
+            <div v-if="identifiedDevices.length === 0" class="empty-state-small">
+              <i class="fas fa-inbox" />
+              <p>暂无识别到的工装设备</p>
+            </div>
+            <div v-else>
+              <div v-for="device in identifiedDevices" :key="device.code" class="identified-device-item">
+                <div class="device-row">
+                  <div class="device-info">
+                    <span class="device-label">工装编号</span>
+                    <span class="device-code font-mono">{{ device.code }}</span>
                   </div>
-                  <span class="px-4 py-2 bg-purple-100 text-purple-800 rounded-full text-sm font-medium">
-                    已识别
-                  </span>
+                  <span class="device-tag identified">已识别</span>
                 </div>
-                <div class="mt-4 pt-4 border-t border-purple-100">
-                  <p class="text-gray-500 text-sm">工装名称</p>
-                  <p class="text-lg font-semibold">{{ device.name }}</p>
+                <div class="device-name-row">
+                  <span class="device-label">工装名称</span>
+                  <span class="device-name">{{ device.name }}</span>
                 </div>
               </div>
-
-              <!-- 空状态 -->
-              <div v-if="identifiedDevices.length === 0" class="text-center py-8 text-gray-400">
-                <i class="fas fa-inbox text-4xl mb-3" />
-                <p>暂无识别到的工装设备</p>
-              </div>
             </div>
           </div>
         </div>
-      </section>
-
-      <!-- 操作建议区域 -->
-      <!-- <section class="text-center py-12">
-        <h3 class="text-2xl font-semibold mb-4">操作建议</h3>
-        <p class="text-gray-600 max-w-2xl mx-auto mb-8">
-          {{ operationTip }}
-        </p>
-        <div class="flex justify-center space-x-4">
-          <button
-            class="px-6 py-3 bg-primary text-white font-medium rounded hover:bg-indigo-700 transition duration-300 flex items-center"
-            @click="handleReIdentify"
-          >
-            <i class="fas fa-sync-alt mr-2" />重新识别
-          </button>
-          <button
-            class="px-6 py-3 bg-secondary text-white font-medium rounded hover:bg-purple-700 transition duration-300 flex items-center"
-            @click="handleManualConfirm"
-          >
-            <i class="fas fa-check-circle mr-2" />手动确认
-          </button>
-          <button
-            class="px-6 py-3 bg-gray-200 text-gray-800 font-medium rounded hover:bg-gray-300 transition duration-300 flex items-center"
-            @click="handleCancelTask"
-          >
-            <i class="fas fa-times-circle mr-2" />取消任务
-          </button>
-        </div>
-      </section> -->
+      </div>
+    </main>
+
+    <!-- Loading -->
+    <div v-if="loading" class="loading-overlay">
+      <div class="loading-spinner" />
     </div>
   </div>
-  <Loading v-if="loading" />
 </template>
 
 <script setup>
 import { useRouter } from 'vue-router';
 import { ref, computed, onMounted } from 'vue';
-import PageHeader from '../common/PageHeader.vue';
 import { getAgvRfidLogByTaskId } from '../api/stockOut.js';
 import { showNotify } from 'vant';
 
+// 图片资源
+import bgImg from '../assets/images/bj.png';
+
 // 路由
 const router = useRouter();
 
-// 操作员信息
-const operatorName = ref('管理员');
-const operatorId = ref('lw001');
-
 // 加载状态
 const loading = ref(false);
 
@@ -334,39 +290,511 @@ const handleCancelTask = () => {
 </script>
 
 <style scoped>
-.task-card {
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+/* ========== 基础样式 ========== */
+.stock-requisition-page {
+  width: 100%;
+  height: 100vh;
+  max-height: 100vh;
+  position: relative;
+  font-family: 'Microsoft YaHei', sans-serif;
+  color: #fff;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 背景层 */
+.bg-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #041c3d;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  z-index: 0;
+}
+
+/* ========== 顶部标题区域 ========== */
+.header-section {
+  position: relative;
+  width: 100%;
+  padding: 20px 30px;
+  box-sizing: border-box;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
-.device-item {
-  transition: all 0.2s ease-in-out;
+.logout-btn {
+  position: absolute;
+  left: 30px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: linear-gradient(90deg, #1a4a7a 0%, #0d3a6a 100%);
+  border: 1px solid #2a7fff;
+  border-radius: 8px;
+  padding: 10px 20px;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s;
 }
 
-.device-item:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+.logout-btn:hover {
+  background: linear-gradient(90deg, #2a5a8a 0%, #1d4a7a 100%);
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.4);
 }
 
-.bg-primary {
-  background-color: #4F46E5;
+.logout-btn i {
+  font-size: 18px;
+  color: #00bfff;
 }
 
-.bg-secondary {
-  background-color: #7C3AED;
+.page-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #ffffff;
+  letter-spacing: 2px;
+  margin: 0;
+  text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
+}
+
+/* 右侧操作按钮 */
+.header-actions {
+  position: absolute;
+  right: 30px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 15px;
 }
 
 .action-btn {
-  padding: 0.5rem 1rem;
-  border-radius: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: linear-gradient(90deg, #1a4a7a 0%, #0d3a6a 100%);
+  border: 1px solid #2a7fff;
+  border-radius: 8px;
+  padding: 10px 20px;
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.action-btn:hover {
+  background: linear-gradient(90deg, #2a5a8a 0%, #1d4a7a 100%);
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.4);
+}
+
+.action-btn i {
+  font-size: 16px;
+  color: #00bfff;
+}
+
+/* ========== 主内容区域 ========== */
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 0 30px 20px;
+  position: relative;
+  z-index: 10;
+  min-height: 0;
+  overflow-y: auto;
+  gap: 20px;
+}
+
+/* ========== 任务状态卡片 ========== */
+.task-status-card {
+  background: rgba(9, 61, 140, 0.5);
+  border: 1px solid #049FD8;
+  border-radius: 12px;
+  padding: 20px;
+  flex-shrink: 0;
+}
+
+.status-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.status-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 20px;
+  font-weight: 600;
+  color: #fff;
+}
+
+.status-title i {
+  color: #00bfff;
+  font-size: 22px;
+}
+
+.status-badge {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 20px;
+  border-radius: 20px;
+  font-size: 14px;
   font-weight: 500;
-  transition: all 0.2s;
-  display: inline-flex;
+}
+
+.status-badge.success {
+  background: rgba(16, 185, 129, 0.3);
+  border: 1px solid #10b981;
+  color: #6ee7b7;
+}
+
+.status-badge.error {
+  background: rgba(239, 68, 68, 0.3);
+  border: 1px solid #ef4444;
+  color: #fca5a5;
+}
+
+.status-info-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+}
+
+.status-info-item {
+  background: rgba(13, 58, 106, 0.6);
+  border: 1px solid rgba(42, 127, 255, 0.3);
+  border-radius: 8px;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.status-info-item .info-label {
+  font-size: 13px;
+  color: #7ec8ff;
+}
+
+.status-info-item .info-value {
+  font-size: 16px;
+  color: #fff;
+  font-weight: 500;
+}
+
+.status-info-item .info-value.text-success {
+  color: #6ee7b7;
+}
+
+.status-info-item .info-value.text-error {
+  color: #fca5a5;
+}
+
+.font-mono {
+  font-family: 'Consolas', monospace;
+}
+
+/* ========== 设备信息区域 ========== */
+.device-section {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  flex: 1;
+  min-height: 0;
+}
+
+.device-card {
+  background: rgba(9, 61, 140, 0.5);
+  border: 1px solid #049FD8;
+  border-radius: 12px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.card-header-icon {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 20px;
+  flex-shrink: 0;
+}
+
+.icon-circle {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: flex;
   align-items: center;
+  justify-content: center;
+  font-size: 22px;
+}
+
+.icon-circle.target {
+  background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%);
+  color: #fff;
+}
+
+.icon-circle.identified {
+  background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
+  color: #fff;
+}
+
+.card-title h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: #fff;
+  margin: 0 0 5px 0;
+}
+
+.card-title p {
+  font-size: 13px;
+  color: #7ec8ff;
+  margin: 0;
+}
+
+/* 目标设备列表 */
+.target-device-list {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  flex: 1;
+}
+
+.target-device-item {
+  background: linear-gradient(135deg, rgba(30, 144, 255, 0.2) 0%, rgba(0, 191, 255, 0.1) 100%);
+  border: 1px solid rgba(30, 144, 255, 0.4);
+  border-radius: 10px;
+  padding: 15px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.device-info {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.device-label {
+  font-size: 12px;
+  color: #7ec8ff;
+}
+
+.device-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: #fff;
+}
+
+.device-code {
+  font-size: 16px;
+  color: #fff;
+}
+
+.device-tag {
+  padding: 6px 16px;
+  border-radius: 15px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.device-tag.target {
+  background: rgba(30, 144, 255, 0.3);
+  border: 1px solid #1e90ff;
+  color: #7ec8ff;
+}
+
+.device-tag.identified {
+  background: rgba(139, 92, 246, 0.3);
+  border: 1px solid #8b5cf6;
+  color: #c4b5fd;
+}
+
+/* 已识别设备列表 */
+.identified-device-list {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.identified-device-item {
+  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(167, 139, 250, 0.1) 100%);
+  border: 1px solid rgba(139, 92, 246, 0.4);
+  border-radius: 10px;
+  padding: 15px 20px;
+}
+
+.device-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.device-name-row {
+  padding-top: 10px;
+  border-top: 1px solid rgba(139, 92, 246, 0.3);
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+/* 空状态 */
+.empty-state-small {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  color: #5a8abf;
+}
+
+.empty-state-small i {
+  font-size: 48px;
+  margin-bottom: 15px;
+  opacity: 0.5;
+}
+
+.empty-state-small p {
+  font-size: 14px;
+  margin: 0;
+}
+
+/* ========== Loading 遮罩 ========== */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(4, 28, 61, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.loading-spinner {
+  width: 60px;
+  height: 60px;
+  border: 4px solid rgba(30, 144, 255, 0.3);
+  border-top-color: #00bfff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
-/* 目标设备卡片固定高度 */
-.target-device-card {
-  height: fit-content;
-  min-height: 250px;
+/* ========== 响应式 - 横屏 ========== */
+@media screen and (orientation: landscape) {
+  .header-section {
+    padding: 10px 20px;
+  }
+
+  .page-title {
+    font-size: 22px;
+  }
+
+  .logout-btn {
+    padding: 6px 14px;
+    font-size: 13px;
+    left: 20px;
+  }
+
+  .header-actions {
+    right: 20px;
+  }
+
+  .action-btn {
+    padding: 6px 14px;
+    font-size: 12px;
+  }
+
+  .main-content {
+    padding: 0 20px 15px;
+    gap: 15px;
+  }
+
+  .task-status-card {
+    padding: 15px;
+  }
+
+  .status-title {
+    font-size: 16px;
+  }
+
+  .status-badge {
+    padding: 5px 15px;
+    font-size: 12px;
+  }
+
+  .status-info-item {
+    padding: 10px;
+  }
+
+  .status-info-item .info-label {
+    font-size: 11px;
+  }
+
+  .status-info-item .info-value {
+    font-size: 14px;
+  }
+
+  .device-card {
+    padding: 15px;
+  }
+
+  .icon-circle {
+    width: 40px;
+    height: 40px;
+    font-size: 18px;
+  }
+
+  .card-title h3 {
+    font-size: 15px;
+  }
+
+  .card-title p {
+    font-size: 11px;
+  }
+
+  .target-device-item,
+  .identified-device-item {
+    padding: 12px 15px;
+  }
+
+  .device-name {
+    font-size: 15px;
+  }
+
+  .device-code {
+    font-size: 14px;
+  }
+
+  .device-tag {
+    padding: 4px 12px;
+    font-size: 11px;
+  }
 }
 </style>

src/stock-out/OutboundConfirm.vue

@@ -1,89 +1,129 @@
-<!-- 出库确认 -->
+<!-- 出库确认 - 智能仓储风格 -->
 <template>
-  <div class="page-container">
-    <!-- 顶部信息栏 -->
-    <PageHeader title="出库确认" />
-
-    <!-- 主内容区域 -->
-    <main class="main-content">
-      <!-- 操作按钮 -->
-      <div class="page-header-row">
-        <van-button type="primary" @click="getStockOutList(false)">
-          <i class="fas fa-sync-alt mr-1" /> 重新校验
-        </van-button>
+  <dv-border-box-8>
+    <div class="stock-requisition-page">
+      <!-- 背景层 -->
+      <div class="bg-layer" :style="{ backgroundImage: `url(${bgImg})` }" />
+
+      <!-- 顶部标题区域 -->
+      <div class="header-section">
+        <button class="logout-btn" @click="goHome">
+          <i class="fas fa-home" />
+          <span>主页</span>
+        </button>
+        <h1 class="page-title">出库确认</h1>
+        <!-- 右侧操作按钮 -->
+        <div class="header-actions">
+          <button class="action-btn refresh-btn" @click="getStockOutList(false)">
+            <i class="fas fa-sync-alt" />
+            <span>重新校验</span>
+          </button>
+        </div>
       </div>
 
-      <!-- 卡片容器 -->
-      <div class="card-container">
-        <!-- 卡片列表区域  -->
-        <div class="card-list-wrapper">
-          <van-empty v-if="materialList.length === 0" description="暂无数据" />
+      <!-- 主内容区域 -->
+      <main class="main-content">
+        <!-- 统计信息 -->
+        <div v-if="materialList.length > 0" class="stats-section">
+          <span class="stats-text">共 {{ materialList.length }} 条数据，已完成 {{ completedCount }} 条</span>
+        </div>
 
-          <!-- 卡片列表 -->
-          <div v-else class="card-list">
+        <!-- 卡片网格区域 -->
+        <div class="card-grid-wrapper">
+          <!-- 空状态 -->
+          <div v-if="materialList.length === 0 && !loading" class="empty-state">
+            <i class="fas fa-inbox empty-icon" />
+            <p>暂无数据</p>
+          </div>
+
+          <!-- 卡片网格 -->
+          <div v-else class="card-grid">
             <div
-              v-for="(item, index) in materialList" :key="item.inventoryId || index"
-              :class="{ 'status-card': true, 'completed-card': item.status === 1 }" class="inventory-card"
+              v-for="(item, index) in materialList"
+              :key="item.inventoryId || index"
+              class="inventory-card"
+              :class="{ 'completed': item.status === 1 }"
             >
-              <div class="card-header">
-                <div class="card-header-left">
-                  <div class="custom-avatar" :style="{ backgroundColor: getStatusColor(item.status) }">
-                    <i :class="getInventoryIcon(item.inventoryType)" />
-                  </div>
-                  <div class="ml-4 card-title-info">
-                    <div class="card-name">{{ item.inventoryName }}</div>
-                    <div class="card-subtitle">编号: {{ item.inventoryNo }}</div>
-                  </div>
+              <!-- 卡片序号 -->
+              <div class="card-index" :class="{ 'completed': item.status === 1 }">{{ index + 1 }}</div>
+
+              <!-- 图片区域 -->
+              <div class="card-image">
+                <div class="image-placeholder" :style="{ backgroundColor: getStatusColor(item.status) }">
+                  <i :class="getInventoryIcon(item.inventoryType)" />
+                </div>
+              </div>
+
+              <!-- 信息区域 -->
+              <div class="card-info">
+                <div class="info-row">
+                  <span class="info-label">名称:</span>
+                  <span class="info-value">{{ item.inventoryName || '-' }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="info-label">编号:</span>
+                  <span class="info-value">{{ item.inventoryNo || '-' }}</span>
                 </div>
-                <div class="card-header-right">
-                  <div class="card-location">
-                    <i class="fas fa-map-marker-alt mr-2" />
-                    <span>{{ item.positionName || '-' }}</span>
-                  </div>
-                  <template v-if="item.positionName !== '不在库' && item.inventoryName !== '未识别epc'">
-                    <van-button v-if="item.status === 1" type="primary" size="small" disabled class="btn-complete">
-                      领料完成
-                    </van-button>
-                    <van-button v-if="item.status === 2" type="primary" size="small" @click="handleStart(item)">
-                      开始领料
-                    </van-button>
-                    <van-button v-if="item.status === 3" type="primary" size="small" @click="handleApply(item)">
-                      申请领料
-                    </van-button>
-                  </template>
+                <div class="info-row location-row">
+                  <i class="fas fa-map-marker-alt location-icon" />
+                  <span class="info-value">{{ item.positionName || '-' }} / {{ item.warehouseName || '-' }}</span>
                 </div>
               </div>
+
+              <!-- 操作区域（固定高度） -->
+              <div class="card-action-section">
+                <template v-if="item.positionName !== '不在库' && item.inventoryName !== '未识别epc'">
+                  <button v-if="item.status === 1" class="status-btn completed-btn" disabled>
+                    <i class="fas fa-check" /> 领料完成
+                  </button>
+                  <button v-if="item.status === 2" class="status-btn start-btn" @click.stop="handleStart(item)">
+                    <i class="fas fa-play" /> 开始领料
+                  </button>
+                  <button v-if="item.status === 3" class="status-btn apply-btn" @click.stop="handleApply(item)">
+                    <i class="fas fa-hand-paper" /> 申请领料
+                  </button>
+                </template>
+                <template v-else>
+                  <span class="status-placeholder">无需操作</span>
+                </template>
+              </div>
             </div>
           </div>
         </div>
+      </main>
 
-        <!-- 统计信息（固定底部） -->
-        <div v-if="materialList.length > 0" class="pagination-wrapper">
-          <span class="text-gray-600">共 {{ materialList.length }} 条数据，已完成 {{ completedCount }} 条</span>
-        </div>
+      <!-- 底部操作按钮 -->
+      <div class="bottom-actions">
+        <button class="submit-btn" :disabled="!isCanLeave" @click="handleLeave">
+          领料离开
+        </button>
+      </div>
+
+      <!-- Loading -->
+      <div v-if="loading" class="loading-overlay">
+        <div class="loading-spinner" />
       </div>
-    </main>
-    <!-- 底部操作按钮 -->
-    <div class="bottom-actions">
-      <van-button type="primary" size="large" :disabled="!isCanLeave" class="btn-complete" @click="handleLeave">
-        <i class="fas fa-check-circle mr-2" />
-        领料离开
-      </van-button>
     </div>
-  </div>
-  <Loading v-if="loading" />
+  </dv-border-box-8>
 </template>
 
 <script setup>
 import { useRouter } from 'vue-router';
 import { ref, computed, onMounted } from 'vue';
 import { showNotify } from 'vant';
-import PageHeader from '../common/PageHeader.vue';
 import { cfStockOut, createStockOut, cfStockOutLeave } from '../api/stockOut.js';
 
+// 图片资源
+import bgImg from '../assets/images/bj.png';
+
 // 路由
 const router = useRouter();
 
+// 返回主页
+const goHome = () => {
+    router.push('/home');
+};
+
 // 表格加载状态
 const loading = ref(false);
 
@@ -240,234 +280,536 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* 页面容器 - 固定高度布局 */
-.page-container {
-  display: flex;
-  flex-direction: column;
+/* ========== 基础样式 ========== */
+.stock-requisition-page {
+  width: 100%;
   height: 100vh;
-  background-color: #f9fafb;
+  max-height: 100vh;
+  position: relative;
+  font-family: 'Microsoft YaHei', sans-serif;
+  color: #fff;
   overflow: hidden;
-}
-
-/* 主内容区 - 可滚动 */
-.main-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1rem;
   display: flex;
   flex-direction: column;
 }
 
-/* 操作按钮行 */
-.page-header-row {
+/* 背景层 */
+.bg-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #041c3d;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  z-index: 0;
+}
+
+/* ========== 顶部标题区域 ========== */
+.header-section {
+  position: relative;
+  width: 100%;
+  padding: 30px 30px 20px 30px;
+  box-sizing: border-box;
+  z-index: 10;
   display: flex;
-  justify-content: flex-end;
   align-items: center;
-  margin-bottom: 1rem;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
-/* 卡片容器 */
-.card-container {
-  flex: 1;
-  background-color: white;
-  border-radius: 0.5rem;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+.logout-btn {
+  position: absolute;
+  left: 30px;
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  min-height: 0;
+  align-items: center;
+  gap: 8px;
+  background: linear-gradient(90deg, #1a4a7a 0%, #0d3a6a 100%);
+  border: 1px solid #2a7fff;
+  border-radius: 8px;
+  padding: 10px 20px;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s;
 }
 
-/* 卡片列表包装器（可滚动区域） */
-.card-list-wrapper {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.5rem;
-  min-height: 0;
+.logout-btn:hover {
+  background: linear-gradient(90deg, #2a5a8a 0%, #1d4a7a 100%);
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.4);
 }
 
-/* 卡片列表（单列布局） */
-.card-list {
-  display: flex;
-  flex-direction: column;
+.logout-btn i {
+  font-size: 18px;
+  color: #00bfff;
 }
 
-.card-list>* {
-  margin-bottom: 1rem;
+.page-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #ffffff;
+  letter-spacing: 2px;
+  margin: 0;
+  text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
 }
 
-.card-list>*:last-child {
-  margin-bottom: 0;
+/* 右侧操作按钮 */
+.header-actions {
+  position: absolute;
+  right: 30px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 15px;
 }
 
-/* 分页包装器（固定底部） */
-.pagination-wrapper {
-  padding: 0.5rem 1.5rem;
-  border-top: 1px solid #e5e7eb;
-  border-bottom: 1px solid #e5e7eb;
-  background-color: #fafafa;
+.action-btn {
   display: flex;
-  justify-content: flex-end;
   align-items: center;
+  gap: 8px;
+  background: linear-gradient(90deg, #1a4a7a 0%, #0d3a6a 100%);
+  border: 1px solid #2a7fff;
+  border-radius: 8px;
+  padding: 10px 20px;
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
 }
 
-/* 底部操作按钮 */
-.bottom-actions {
-  position: sticky;
-  bottom: 0;
-  padding: 0 1rem 1rem 1rem;
-  background-color: #f9fafb;
+.action-btn:hover {
+  background: linear-gradient(90deg, #2a5a8a 0%, #1d4a7a 100%);
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.4);
+}
+
+.action-btn i {
+  font-size: 16px;
+  color: #00bfff;
+}
+
+/* ========== 主内容区域 ========== */
+.main-content {
+  flex: 1;
   display: flex;
-  justify-content: flex-end;
+  flex-direction: column;
+  padding: 0 30px;
+  position: relative;
   z-index: 10;
+  min-height: 0;
+  overflow: hidden;
 }
 
-/* 库存卡片样式 */
-.inventory-card {
-  padding: 1rem 1.5rem;
-  transition: all 0.25s ease;
-  border: 2px solid #e5e7eb;
-  background-color: #ffffff;
-  border-radius: 0.5rem;
-  cursor: pointer;
+/* 统计信息 */
+.stats-section {
+  background: rgba(9, 61, 140, 0.5);
+  border: 1px solid #049FD8;
+  border-radius: 12px;
+  padding: 15px 20px;
+  margin-bottom: 15px;
+  flex-shrink: 0;
 }
 
-.inventory-card:hover {
-  border-color: #93c5fd;
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
+.stats-text {
+  color: #7ec8ff;
+  font-size: 16px;
+}
+
+/* ========== 卡片网格区域 ========== */
+.card-grid-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-bottom: 10px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 
-.inventory-card.completed-card {
-  border-color: #10b981 !important;
-  background-color: #f0fdf4;
+.card-grid-wrapper::-webkit-scrollbar {
+  display: none;
 }
 
-/* 卡片标题区域 */
-.card-header {
+/* 空状态 */
+.empty-state {
+  flex: 1;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: space-between;
-  width: 100%;
+  justify-content: center;
+  color: #7ec8ff;
+  padding: 60px 0;
 }
 
-.card-header>* {
-  margin-right: 1rem;
+.empty-icon {
+  font-size: 80px;
+  margin-bottom: 20px;
+  opacity: 0.5;
 }
 
-.card-header>*:last-child {
-  margin-right: 0;
+.empty-state p {
+  font-size: 18px;
+  margin: 0;
 }
 
-.card-header-left {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-width: 0;
+/* 卡片网格 - 4列布局 */
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+
+/* ========== 设备卡片样式 ========== */
+.inventory-card {
+  background: rgba(5, 30, 60, 0.8);
+  border: 2px solid #0d4a8a;
+  border-radius: 12px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.inventory-card:hover {
+  border-color: #1e90ff;
+  box-shadow: 0 0 20px rgba(30, 144, 255, 0.3);
+  transform: translateY(-3px);
+}
+
+.inventory-card.completed {
+  border-color: #10b981;
+  box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
 }
 
-.card-header-right {
+/* 卡片序号 - 左上角 */
+.card-index {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  width: 36px;
+  height: 36px;
+  background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%);
+  border-radius: 50%;
   display: flex;
   align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: #fff;
+  z-index: 2;
+  box-shadow: 0 2px 8px rgba(0, 191, 255, 0.4);
 }
 
-.card-header-right>* {
-  margin-left: 0.75rem;
+.card-index.completed {
+  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
+  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
 }
 
-.card-header-right>*:first-child {
-  margin-left: 0;
+/* 图片区域 */
+.card-image {
+  width: 100%;
+  aspect-ratio: 3 / 4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  margin: 15px;
+  margin-bottom: 10px;
+  border-radius: 8px;
+  width: calc(100% - 30px);
 }
 
-/* 卡片标题信息 */
-.card-title-info {
+.image-placeholder {
   display: flex;
-  flex-direction: column;
-  min-width: 0;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #f0f4f8 0%, #e8ecf0 100%);
+  color: #fff;
+  font-size: 48px;
+}
+
+/* 信息区域 */
+.card-info {
+  padding: 10px 15px 15px;
 }
 
-.card-title-info>* {
-  margin-bottom: 0.25rem;
+.info-row {
+  display: flex;
+  align-items: baseline;
+  margin-bottom: 6px;
+  font-size: 14px;
 }
 
-.card-title-info>*:last-child {
+.info-row:last-child {
   margin-bottom: 0;
 }
 
-.card-name {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: #111827;
-  line-height: 1.5;
+.info-label {
+  color: #7ec8ff;
   white-space: nowrap;
+  margin-right: 5px;
+}
+
+.info-value {
+  color: #fff;
+  flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.card-subtitle {
-  font-size: 0.875rem;
-  color: #6b7280;
-  line-height: 1.4;
+/* 位置行样式 */
+.location-row {
+  display: flex;
+  align-items: center;
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid rgba(30, 144, 255, 0.2);
 }
 
-/* 卡片位置信息 */
-.card-location {
+.location-icon {
+  color: #00bfff;
+  font-size: 12px;
+  margin-right: 6px;
+}
+
+/* ========== 操作区域（固定高度） ========== */
+.card-action-section {
+  padding: 12px 15px;
+  border-top: 1px solid rgba(30, 144, 255, 0.3);
+  background: rgba(9, 61, 140, 0.3);
+  min-height: 50px;
   display: flex;
   align-items: center;
-  padding: 0.5rem 1rem;
-  background-color: #f3f4f6;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  color: #374151;
-  white-space: nowrap;
+  justify-content: center;
 }
 
-.card-location i {
-  color: #3b82f6;
+.status-placeholder {
+  color: #5a8abf;
+  font-size: 12px;
+  opacity: 0.7;
 }
 
-/* 自定义头像 */
-.custom-avatar {
-  width: 42px;
-  height: 42px;
-  border-radius: 50%;
+/* 状态按钮 */
+.status-btn {
+  width: 100%;
+  padding: 10px 15px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+  border: none;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
-  font-size: 20px;
-  flex-shrink: 0;
+  gap: 6px;
 }
 
-/* 按钮样式 */
-:deep(.van-button--primary) {
-  background-color: #3b82f6;
-  border-color: #3b82f6;
+.completed-btn {
+  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
+  color: #fff;
+  opacity: 0.7;
+  cursor: not-allowed;
 }
 
-:deep(.van-button--primary:active) {
-  background-color: #2563eb;
-  border-color: #2563eb;
+.start-btn {
+  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
+  color: #fff;
 }
 
-.btn-complete {
-  background-color: #10b981 !important;
-  border-color: #10b981 !important;
-  width: auto;
-  padding: 0 24px;
+.start-btn:hover {
+  box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
 }
 
-:deep(.btn-complete.van-button--primary) {
-  background-color: #10b981 !important;
-  border-color: #10b981 !important;
+.apply-btn {
+  background: linear-gradient(90deg, #1e90ff 0%, #00bfff 100%);
+  color: #fff;
 }
 
-:deep(.btn-complete.van-button--primary:active) {
-  background-color: #059669 !important;
-  border-color: #059669 !important;
+.apply-btn:hover {
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.5);
 }
 
-:deep(.van-button--disabled) {
+/* ========== 底部操作按钮 ========== */
+.bottom-actions {
+  width: 100%;
+  padding: 15px 30px;
+  box-sizing: border-box;
+  background: rgba(4, 28, 61, 0.95);
+  z-index: 20;
+  flex-shrink: 0;
+}
+
+.submit-btn {
+  width: 100%;
+  padding: 18px 0;
+   background: #4a99e2;
+  border: none;
+  border-radius: 12px;
+  font-size: 24px;
+  font-weight: bold;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.3s;
+  letter-spacing: 8px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.submit-btn:hover:not(:disabled) {
+  box-shadow: 0 0 30px rgba(16, 185, 129, 0.6);
+  transform: translateY(-2px);
+}
+
+.submit-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
+  background: linear-gradient(90deg, #6b7280 0%, #9ca3af 100%);
+}
+
+/* ========== Loading 遮罩 ========== */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(4, 28, 61, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.loading-spinner {
+  width: 60px;
+  height: 60px;
+  border: 4px solid rgba(30, 144, 255, 0.3);
+  border-top-color: #00bfff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ========== 响应式 - 横屏 ========== */
+@media screen and (orientation: landscape) {
+  .header-section {
+    padding: 30px 20px 10px 20px;
+  }
+
+  .page-title {
+    font-size: 22px;
+  }
+
+  .logout-btn {
+    padding: 6px 14px;
+    font-size: 13px;
+    left: 20px;
+  }
+
+  .logout-btn i {
+    font-size: 14px;
+  }
+
+  .header-actions {
+    right: 20px;
+  }
+
+  .action-btn {
+    padding: 6px 14px;
+    font-size: 13px;
+  }
+
+  .action-btn i {
+    font-size: 14px;
+  }
+
+  .main-content {
+    padding: 0 20px;
+  }
+
+  .stats-section {
+    padding: 10px 15px;
+    margin-bottom: 10px;
+  }
+
+  .stats-text {
+    font-size: 14px;
+  }
+
+  /* 卡片网格响应式 */
+  .card-grid {
+    grid-template-columns: repeat(6, 1fr);
+    gap: 15px;
+  }
+
+  .card-index {
+    width: 24px;
+    height: 24px;
+    font-size: 11px;
+    top: 6px;
+    left: 6px;
+  }
+
+  .card-image {
+    margin: 10px;
+    margin-bottom: 8px;
+    width: calc(100% - 20px);
+  }
+
+  .image-placeholder {
+    font-size: 36px;
+  }
+
+  .card-info {
+    padding: 6px 10px 8px;
+  }
+
+  .info-row {
+    font-size: 11px;
+    margin-bottom: 3px;
+  }
+
+  .location-icon {
+    font-size: 10px;
+  }
+
+  .card-action-section {
+    padding: 8px 10px;
+    min-height: 40px;
+  }
+
+  .status-btn {
+    padding: 6px 10px;
+    font-size: 11px;
+    gap: 4px;
+  }
+
+  .status-placeholder {
+    font-size: 10px;
+  }
+
+  .bottom-actions {
+    padding: 10px 20px;
+  }
+
+  .submit-btn {
+    padding: 12px 0;
+    font-size: 18px;
+    letter-spacing: 6px;
+    border-radius: 8px;
+  }
 }
 </style>

src/stock/RegularRequisition.vue

@@ -1,33 +1,43 @@
-<!-- 常用领料 -->
+<!-- 常用领料 - 智能仓储风格 -->
 <template>
-  <div class="page-container">
-    <!-- 顶部信息栏 -->
-    <PageHeader :is-go-home="false" title="常用领料">
-      <template #actions>
+  <div class="stock-requisition-page">
+    <!-- 背景层 -->
+    <div class="bg-layer" :style="{ backgroundImage: `url(${bgImg})` }" />
+
+    <!-- 顶部标题区域 -->
+    <div class="header-section">
+      <button class="logout-btn" @click="goBack">
+        <i class="fas fa-home" />
+        <span>返回领料</span>
+      </button>
+      <h1 class="page-title">常用领料</h1>
+      <!-- 右侧操作按钮 -->
+      <div class="header-actions">
         <button class="action-btn cart-btn" @click="openStockOutCar">
           <van-badge :content="count" :show-zero="true">
-            <i class="fas fa-shopping-cart text-xl" />
+            <i class="fas fa-shopping-cart" />
           </van-badge>
-          <span class="ml-2">领料车</span>
+          <span>领料车</span>
         </button>
-      </template>
-    </PageHeader>
+      </div>
+    </div>
 
     <!-- 主内容区域 -->
     <main class="main-content">
-      <!-- 页面标题 -->
-      <!-- <div class="page-title">
-        <h2>常用领料</h2>
-      </div> -->
-
       <!-- 筛选区域 -->
-      <FilterPanel :default-collapsed="false" :enable-collapse="false" :active-count="getActiveFilterCount()">
-        <div class="filter-form">
+      <div class="filter-section">
+        <div class="filter-row">
           <div class="filter-item">
-            <label class="filter-label">仓库</label>
+            <label class="filter-label">类型</label>
             <v-select
-              v-model="warehouseId" :options="warehouseList" :reduce="item => item.id" label="name"
-              placeholder="选择仓库" :clearable="true" :filterable="true" class="filter-select"
+              v-model="inventoryType"
+              :options="inventoryTypeList"
+              :reduce="item => item.value"
+              label="label"
+              placeholder="请选择类型"
+              :clearable="true"
+              :filterable="true"
+              class="filter-select dark-select"
               @update:model-value="getDatas"
             >
               <template #no-options>
@@ -37,199 +47,136 @@
           </div>
           <div class="filter-item">
             <label class="filter-label">名称</label>
-            <van-field v-model="inventoryName" placeholder="输入名称" class="filter-input" @keyup.enter="getDatas" />
-          </div>
-          <div class="filter-item">
-            <label class="filter-label">编号</label>
-            <van-field v-model="inventoryNo" placeholder="输入编号" class="filter-input" @keyup.enter="getDatas" />
+            <input
+              v-model="inventoryName"
+              type="text"
+              placeholder="请输入名称"
+              class="filter-input dark-input"
+              @keyup.enter="getDatas"
+            />
           </div>
-          <div class="filter-item">
-            <label class="filter-label">类型</label>
-            <v-select
-              v-model="inventoryType" :options="inventoryTypeList" :reduce="item => item.value" label="label"
-              placeholder="选择类型" :clearable="true" :filterable="true" class="filter-select"
-              @update:model-value="getDatas"
-            >
-              <template #no-options>
-                <span>无该选项数据</span>
-              </template>
-            </v-select>
-          </div>
-          <div class="filter-item filter-buttons">
-            <van-button type="primary" @click="getDatas">
-              <i class="fas fa-search mr-1" /> 搜索
-            </van-button>
-            <van-button class="ml-2" @click="handleReset">
-              <i class="fas fa-redo mr-1" /> 重置
-            </van-button>
+          <div class="filter-buttons">
+            <button class="search-btn" @click="getDatas">
+              搜索
+            </button>
+            <button class="reset-btn" @click="handleReset">
+              重置
+            </button>
           </div>
         </div>
-      </FilterPanel>
-
-      <!-- 卡片容器 -->
-      <div class="card-container">
-        <!-- 全选控制栏 -->
-        <div v-if="stockRequisitionList.length > 0" class="select-all-bar">
-          <van-checkbox :model-value="isAllSelected" @update:model-value="toggleSelectAll">
-            <span class="select-all-text">全选当前页（已选 {{ selectedIds.length }} 项）</span>
-          </van-checkbox>
+      </div>
+
+      <!-- 全选控制栏 -->
+      <div v-if="stockRequisitionList.length > 0" class="select-all-bar">
+        <van-checkbox :model-value="isAllSelected" @update:model-value="toggleSelectAll">
+          <span class="select-all-text">全选当前页（已选 {{ selectedIds.length }} 项）</span>
+        </van-checkbox>
+      </div>
+
+      <!-- 卡片网格区域 -->
+      <div ref="cardGridWrapper" class="card-grid-wrapper" @scroll="handleScroll">
+        <!-- 空状态 -->
+        <div v-if="stockRequisitionList.length === 0 && !loading" class="empty-state">
+          <i class="fas fa-inbox empty-icon" />
+          <p>暂无数据</p>
         </div>
 
-        <!-- 卡片列表区域  -->
-        <div class="card-list-wrapper">
-          <!-- 空状态 -->
-          <van-empty v-if="stockRequisitionList.length === 0" description="暂无数据" />
-
-          <!-- 卡片列表 -->
-          <div v-else class="card-list">
-            <div
-              v-for="(item, index) in stockRequisitionList" :key="item.id || index"
-              :class="{ 'selected-card': selectedIds.includes(item.id) }" class="inventory-card"
-              @click="toggleSelect(item.id)"
-            >
-              <div class="card-header">
-                <div class="card-header-left">
-                  <van-checkbox
-                    :model-value="selectedIds.includes(item.id)" @click.stop
-                    @update:model-value="checked => handleCheckboxChange(checked, item.id)"
-                  />
-                  <div class="custom-avatar ml-3">
-                    <i :class="getInventoryIcon(item.inventoryType)" />
-                  </div>
-                  <div class="ml-4 card-title-info">
-                    <div class="card-name">{{ item.inventoryName }}</div>
-                    <div class="card-subtitle">编号: {{ item.inventoryNo }}</div>
-                  </div>
-                </div>
-                <div class="card-header-center">
-                  <div class="card-stats">
-                    <div class="stat-item">
-                      <i class="fas fa-history" />
-                      <span class="stat-label">借用次数</span>
-                      <span class="stat-value">{{ item.borrowTotal || 0 }}次</span>
-                    </div>
-                    <div class="stat-item">
-                      <i class="fas fa-clock" />
-                      <span class="stat-label">上次借用</span>
-                      <span class="stat-value">{{ item.lastBorrowTime || '暂无记录' }}</span>
-                    </div>
-                  </div>
-                </div>
-                <div class="card-header-right">
-                  <div class="card-location">
-                    <i class="fas fa-map-marker-alt mr-2" />
-                    <span>{{ item.inventoryActulPosition || item.inventoryPosition || '-' }}</span>
-                    <span class="mx-2">/</span>
-                    <span>{{ item.inventoryWarehouse || '-' }}</span>
-                  </div>
-                </div>
+        <!-- 卡片网格 -->
+        <div v-else class="card-grid">
+          <div
+            v-for="(item, index) in stockRequisitionList"
+            :key="item.id || index"
+            class="inventory-card"
+            :class="{ 'selected': selectedIds.includes(item.id) }"
+            @click="toggleSelect(item.id)"
+          >
+            <!-- 卡片序号 -->
+            <div class="card-index">{{ index + 1 }}</div>
+            
+            <!-- 图片区域 -->
+            <div class="card-image">
+              <img v-if="item.imageUrl" :src="item.imageUrl" alt="设备图片" />
+              <div v-else class="image-placeholder">
+                <i :class="getInventoryIcon(item.inventoryType)" />
+              </div>
+            </div>
+            
+            <!-- 信息区域 -->
+            <div class="card-info">
+              <div class="info-row">
+                <span class="info-label">名称:</span>
+                <span class="info-value">{{ item.inventoryName || '-' }}</span>
+              </div>
+              <div class="info-row stats-row">
+                <span class="info-label">借用次数:</span>
+                <i class="fas fa-history stats-icon" />
+                <span class="info-value">{{ item.borrowTotal || 0 }}次</span>
+              </div>
+              <div class="info-row stats-row">
+                <span class="info-label">上次借用:</span>
+                <i class="fas fa-clock stats-icon" />
+                <span class="info-value"> {{ item.lastBorrowTime }}</span>
               </div>
+              <div class="info-row location-row">
+                <i class="fas fa-map-marker-alt location-icon" />
+                <span class="info-value">{{ item.inventoryActulPosition || item.inventoryPosition || '-' }} / {{ item.inventoryWarehouse || '-' }}</span>
+              </div>
+            </div>
+            
+            <!-- 选中状态指示 -->
+            <div v-if="selectedIds.includes(item.id)" class="selected-indicator">
+              <i class="fas fa-check" />
             </div>
           </div>
         </div>
 
-        <!-- 分页区域（固定底部） -->
-        <div v-if="stockRequisitionList.length > 0" class="pagination-wrapper">
-          <div class="pagination-info">
-            第{{ (pagination.current_page - 1) * pagination.per_page + 1 }}-{{ Math.min(pagination.current_page *
-              pagination.per_page, pagination.total) }}条，共{{ pagination.total }}条
-          </div>
-          <div class="pagination-controls">
-            <button
-              class="pagination-btn" :disabled="pagination.current_page === 1"
-              @click="handlePageChange(pagination.current_page - 1)"
-            >
-              &lt;
-            </button>
-            <template v-for="page in getPageNumbers()" :key="page">
-              <button
-                v-if="page !== '...'" class="pagination-btn" :class="{ active: page === pagination.current_page }"
-                @click="handlePageChange(page)"
-              >
-                {{ page }}
-              </button>
-              <span v-else class="pagination-ellipsis">...</span>
-            </template>
-            <button
-              class="pagination-btn"
-              :disabled="pagination.current_page === Math.ceil(pagination.total / pagination.per_page)"
-              @click="handlePageChange(pagination.current_page + 1)"
-            >
-              &gt;
-            </button>
-          </div>
-          <div class="pagination-size">
-            <v-select
-              v-model="pagination.per_page" :options="pageSizeOptions" :clearable="false" :searchable="false"
-              :append-to-body="true" :calculate-position="withPopper" class="size-select"
-              @update:model-value="handlePageSizeChange"
-            >
-              <template #selected-option="{ label }">
-                {{ label }}条/页
-              </template>
-              <template #option="{ label }">
-                {{ label }}条/页
-              </template>
-            </v-select>
-          </div>
+        <!-- 加载更多提示 -->
+        <div v-if="loadingMore" class="loading-more">
+          <div class="loading-more-spinner" />
+          <span>加载中...</span>
+        </div>
+        <div v-else-if="noMoreData && stockRequisitionList.length > 0" class="no-more-data">
+          <span>没有更多数据了</span>
         </div>
       </div>
     </main>
 
     <!-- 底部操作按钮 -->
     <div class="bottom-actions">
-      <van-button
-        type="primary" size="large" :disabled="selectedIds.length === 0" class="add-to-cart-btn"
+      <button
+        class="submit-btn"
+        :disabled="selectedIds.length === 0"
         @click="submitStock"
       >
-        <i class="fas fa-cart-plus mr-2" />
         加入领料车
-      </van-button>
+      </button>
     </div>
 
-    <Loading v-if="loading" />
+    <!-- Loading -->
+    <div v-if="loading" class="loading-overlay">
+      <div class="loading-spinner" />
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, onMounted, nextTick, computed } from 'vue';
 import { useRouter } from 'vue-router';
-import Common from '../common/Common.js';
 import { showNotify } from 'vant';
 import vSelect from 'vue-select';
 import 'vue-select/dist/vue-select.css';
-import { createPopper } from '@popperjs/core';
-
-// 为 vue-select 配置 popper
-const withPopper = (dropdownList, component, { width }) => {
-    dropdownList.style.width = width;
-    const popper = createPopper(component.$refs.toggle, dropdownList, {
-        placement: 'bottom',
-        modifiers: [
-            {
-                name: 'offset',
-                options: { offset: [0, -1] },
-            },
-            {
-                name: 'toggleClass',
-                enabled: true,
-                phase: 'write',
-                fn({ state }) {
-                    component.$el.classList.toggle('drop-up', state.placement === 'top');
-                },
-            },
-        ],
-    });
-    return () => popper.destroy();
-};
-import PageHeader from '../common/PageHeader.vue';
-import FilterPanel from '../common/FilterPanel.vue';
+
+// 图片资源
+import bgImg from '../assets/images/bj.png';
+
 import { getWarehouseList } from '../api/stock.js';
 import { queryCommonUse, createStockOutPrepareLine, queryPickingCarNumber } from '../api/stockOut.js';
 
-
 const router = useRouter();
 
+// 滚动容器ref
+const cardGridWrapper = ref(null);
+
 const warehouseId = ref(undefined);
 const inventoryName = ref('');
 const inventoryNo = ref('');
@@ -239,39 +186,32 @@ const warehouseList = ref([]);
 const stockRequisitionList = ref([]);
 const selectedIds = ref([]);
 
-// 计算是否全选
-const isAllSelected = computed(() => {
-    if (stockRequisitionList.value.length === 0) return false;
-    return stockRequisitionList.value.every(item => selectedIds.value.includes(item.id));
-});
 const loading = ref(false);
+const loadingMore = ref(false);
+const noMoreData = ref(false);
+
 const inventoryTypeList = ref([
     { value: 'Clamp', label: '工装' },
     { value: 'Instrument', label: '设备' },
     { value: 'FinishProduct', label: '成品' },
 ]);
-const pagination = ref({
-    total: 0,
-    current_page: 1,
-    per_page: 20,
-});
-const pageSizeOptions = [10, 20, 50, 100, 200, 500];
-
-// 计算激活的筛选条件数量
-const getActiveFilterCount = () => {
-    let count = 0;
-    if (warehouseId.value) count++;
-    if (inventoryName.value) count++;
-    if (inventoryNo.value) count++;
-    if (inventoryType.value) count++;
-    return count;
-};
+
+// 无限滚动参数
+const pageSize = 20;
+const currentStart = ref(0);
+const total = ref(0);
 
 // 打开领料车
 const openStockOutCar = () => {
     router.push('/stock-picking-car?isRegular=true');
 };
 
+// 计算是否全选
+const isAllSelected = computed(() => {
+    if (stockRequisitionList.value.length === 0) return false;
+    return stockRequisitionList.value.every(item => selectedIds.value.includes(item.id));
+});
+
 // 切换选择
 const toggleSelect = id => {
     const index = selectedIds.value.indexOf(id);
@@ -282,33 +222,17 @@ const toggleSelect = id => {
     }
 };
 
-// 处理复选框变化
-const handleCheckboxChange = (checked, id) => {
-    if (checked) {
-        if (!selectedIds.value.includes(id)) {
-            selectedIds.value.push(id);
-        }
-    } else {
-        const index = selectedIds.value.indexOf(id);
-        if (index > -1) {
-            selectedIds.value.splice(index, 1);
-        }
-    }
-};
-
 // 全选/取消全选
 const toggleSelectAll = checked => {
     if (checked) {
-    // 全选当前页所有项（累加模式）
         stockRequisitionList.value.forEach(item => {
             if (!selectedIds.value.includes(item.id)) {
                 selectedIds.value.push(item.id);
             }
         });
     } else {
-    // 取消全选当前页
-        const currentPageIds = stockRequisitionList.value.map(item => item.id);
-        selectedIds.value = selectedIds.value.filter(id => !currentPageIds.includes(id));
+        const currentListIds = stockRequisitionList.value.map(item => item.id);
+        selectedIds.value = selectedIds.value.filter(id => !currentListIds.includes(id));
     }
 };
 
@@ -322,61 +246,86 @@ const getInventoryIcon = type => {
     return iconMap[type] || 'fas fa-cube';
 };
 
-// 分页改变
-const handlePageChange = page => {
-    pagination.value.current_page = page;
-    getStockRequisitionList();
+// 滚动事件处理 - 无限滚动
+const handleScroll = e => {
+    const container = e.target;
+    const { scrollTop, scrollHeight, clientHeight } = container;
+    
+    // 距离底部100px时触发加载
+    if (scrollHeight - scrollTop - clientHeight < 100) {
+        loadMore();
+    }
 };
 
-// 每页大小改变
-const handlePageSizeChange = pageSize => {
-    pagination.value.per_page = pageSize;
-    pagination.value.current_page = 1;
-    getStockRequisitionList();
+// 检查容器是否需要继续加载（当内容不足以产生滚动条时自动加载更多）
+const checkAndLoadMore = async () => {
+    await nextTick();
+    const container = cardGridWrapper.value;
+    if (!container) return;
+    
+    // 如果内容高度不足以产生滚动条，且还有更多数据，继续加载
+    if (container.scrollHeight <= container.clientHeight && !noMoreData.value && !loadingMore.value) {
+        loadMore();
+    }
 };
 
-// 获取分页页码数组
-const getPageNumbers = () => {
-    const totalPages = Math.ceil(pagination.value.total / pagination.value.per_page);
-    const current = pagination.value.current_page;
-    const pages = [];
+// 加载更多数据
+const loadMore = async () => {
+    if (loadingMore.value || noMoreData.value || loading.value) return;
+    
+    loadingMore.value = true;
+    
+    const params = {
+        inventoryName: inventoryName.value,
+        inventoryNo: inventoryNo.value,
+        inventoryType: inventoryType.value,
+        warehouseId: warehouseId.value,
+        range: {
+            start: currentStart.value,
+            length: pageSize,
+        },
+    };
 
-    if (totalPages <= 7) {
-        for (let i = 1; i <= totalPages; i++) {
-            pages.push(i);
-        }
-    } else {
-        if (current <= 3) {
-            for (let i = 1; i <= 5; i++) pages.push(i);
-            pages.push('...');
-            pages.push(totalPages);
-        } else if (current >= totalPages - 2) {
-            pages.push(1);
-            pages.push('...');
-            for (let i = totalPages - 4; i <= totalPages; i++) pages.push(i);
-        } else {
-            pages.push(1);
-            pages.push('...');
-            for (let i = current - 1; i <= current + 1; i++) pages.push(i);
-            pages.push('...');
-            pages.push(totalPages);
+    try {
+        const res = await queryCommonUse(params);
+        if (res.errorCode == 0) {
+            if (res.datas && res.datas.length > 0) {
+                stockRequisitionList.value = [...stockRequisitionList.value, ...res.datas];
+                currentStart.value += res.datas.length;
+                total.value = res.total;
+                
+                // 检查是否还有更多数据
+                if (stockRequisitionList.value.length >= res.total) {
+                    noMoreData.value = true;
+                } else {
+                    // 加载完成后检查是否需要继续加载
+                    checkAndLoadMore();
+                }
+            } else {
+                noMoreData.value = true;
+            }
         }
+    } catch (error) {
+        console.error('加载更多数据失败:', error);
+    } finally {
+        loadingMore.value = false;
     }
-
-    return pages;
 };
 
-// 查询物料数据
+// 初次加载物料数据
 const getStockRequisitionList = async () => {
     loading.value = true;
+    currentStart.value = 0;
+    noMoreData.value = false;
+    
     const params = {
         inventoryName: inventoryName.value,
         inventoryNo: inventoryNo.value,
         inventoryType: inventoryType.value,
         warehouseId: warehouseId.value,
         range: {
-            start: (pagination.value.current_page - 1) * pagination.value.per_page,
-            length: pagination.value.per_page,
+            start: 0,
+            length: pageSize,
         },
     };
 
@@ -385,10 +334,19 @@ const getStockRequisitionList = async () => {
         if (res.errorCode == 0) {
             if (res.datas && res.datas.length > 0) {
                 stockRequisitionList.value = res.datas;
-                pagination.value.total = res.total;
+                currentStart.value = res.datas.length;
+                total.value = res.total;
+                
+                if (stockRequisitionList.value.length >= res.total) {
+                    noMoreData.value = true;
+                } else {
+                    // 初次加载完成后检查是否需要继续加载
+                    checkAndLoadMore();
+                }
             } else {
                 stockRequisitionList.value = [];
-                pagination.value.total = 0;
+                total.value = 0;
+                noMoreData.value = true;
             }
         }
     } catch (error) {
@@ -419,6 +377,11 @@ const getWarehouses = async () => {
 };
 
 
+// 返回领料
+const goBack = () => {
+    router.push('/stock-requisition');
+};
+
 // 重置筛选条件
 const handleReset = () => {
     warehouseId.value = undefined;
@@ -428,9 +391,12 @@ const handleReset = () => {
     getDatas();
 };
 
-// 查询
+// 查询（重新搜索时重置列表）
 const getDatas = () => {
-    pagination.value.current_page = 1;
+    // 滚动到顶部
+    if (cardGridWrapper.value) {
+        cardGridWrapper.value.scrollTop = 0;
+    }
     getStockRequisitionList();
 };
 
@@ -490,551 +456,815 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* 页面容器 - 固定高度布局 */
-.page-container {
-  display: flex;
-  flex-direction: column;
+/* ========== 基础样式 - 所有屏幕固定布局 ========== */
+.stock-requisition-page {
+  width: 100%;
   height: 100vh;
-  background-color: #f9fafb;
+  max-height: 100vh;
+  position: relative;
+  font-family: 'Microsoft YaHei', sans-serif;
+  color: #fff;
   overflow: hidden;
-}
-
-/* 主内容区 - 可滚动 */
-.main-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1rem;
   display: flex;
   flex-direction: column;
 }
 
-/* 页面标题 */
-.page-title {
-  margin-bottom: 1.5rem;
-}
-
-.page-title h2 {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #111827;
-  margin: 0;
-}
-
-/* 卡片容器 */
-.card-container {
-  flex: 1;
-  background-color: white;
-  border-radius: 0.5rem;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  min-height: 0;
-}
-
-/* 卡片列表包装器（可滚动区域） */
-.card-list-wrapper {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.5rem;
-  min-height: 0;
+/* 背景层 */
+.bg-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #041c3d;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  z-index: 0;
 }
 
-/* 卡片列表（单列布局） */
-.card-list {
+/* ========== 顶部标题区域 ========== */
+.header-section {
+  position: relative;
+  width: 100%;
+  padding: 20px 30px;
+  box-sizing: border-box;
+  z-index: 10;
   display: flex;
-  flex-direction: column;
-  font-weight: 600;
-}
-
-.card-list > * {
-  margin-bottom: 1rem;
-}
-
-.card-list > *:last-child {
-  margin-bottom: 0;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
-/* 分页包装器（固定底部） */
-.pagination-wrapper {
-  padding: 0.5rem 1.5rem;
-  border-top: 1px solid #e5e7eb;
-  background-color: #fafafa;
+.logout-btn {
+  position: absolute;
+  left: 30px;
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
-  justify-content: flex-end;
   align-items: center;
+  gap: 8px;
+  background: linear-gradient(90deg, #1a4a7a 0%, #0d3a6a 100%);
+  border: 1px solid #2a7fff;
+  border-radius: 8px;
+  padding: 10px 20px;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s;
 }
 
-.pagination-wrapper > * {
-  margin-left: 1rem;
+.logout-btn:hover {
+  background: linear-gradient(90deg, #2a5a8a 0%, #1d4a7a 100%);
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.4);
 }
 
-.pagination-wrapper > *:first-child {
-  margin-left: 0;
+.logout-btn i {
+  font-size: 18px;
+  color: #00bfff;
 }
 
-.pagination-info {
-  font-size: 14px;
-  color: #6b7280;
-  white-space: nowrap;
+.page-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #ffffff;
+  letter-spacing: 2px;
+  margin: 0;
+  text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
 }
 
-.pagination-controls {
+/* 右侧操作按钮 */
+.header-actions {
+  position: absolute;
+  right: 30px;
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
   align-items: center;
+  gap: 15px;
 }
 
-.pagination-controls > * {
-  margin-right: 0.25rem;
-}
-
-.pagination-controls > *:last-child {
-  margin-right: 0;
-}
-
-.pagination-btn {
-  min-width: 32px;
-  height: 32px;
-  padding: 0 8px;
-  border: 1px solid #d1d5db;
-  background: white;
-  color: #374151;
-  border-radius: 4px;
-  cursor: pointer;
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: linear-gradient(90deg, #1a4a7a 0%, #0d3a6a 100%);
+  border: 1px solid #2a7fff;
+  border-radius: 8px;
+  padding: 10px 20px;
+  color: #fff;
   font-size: 14px;
-  transition: all 0.2s;
-}
-
-.pagination-btn:hover:not(:disabled) {
-  border-color: #3b82f6;
-  color: #3b82f6;
-}
-
-.pagination-btn.active {
-  background: #3b82f6;
-  border-color: #3b82f6;
-  color: white;
-}
-
-.pagination-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+  cursor: pointer;
+  transition: all 0.3s;
 }
 
-.pagination-ellipsis {
-  padding: 0 4px;
-  color: #6b7280;
+.action-btn:hover {
+  background: linear-gradient(90deg, #2a5a8a 0%, #1d4a7a 100%);
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.4);
 }
 
-.pagination-size {
-  display: flex;
-  align-items: center;
+.action-btn i {
+  font-size: 16px;
+  color: #00bfff;
 }
 
-.pagination-size > * {
-  margin-right: 0.5rem;
-}
-
-.pagination-size > *:last-child {
-  margin-right: 0;
+.cart-btn {
+  background: linear-gradient(90deg, #1a6a5a 0%, #0d5a4a 100%);
+  border-color: #2affcf;
 }
 
-.size-select {
-  width: 150px;
-  position: relative;
-  z-index: 50;
+.cart-btn:hover {
+  background: linear-gradient(90deg, #2a7a6a 0%, #1d6a5a 100%);
+  box-shadow: 0 0 15px rgba(42, 255, 207, 0.4);
 }
 
-:deep(.size-select .vs__dropdown-menu) {
-  z-index: 9999 !important;
+.cart-btn i {
+  color: #2affcf;
 }
 
-/* 底部操作按钮 */
-.bottom-actions {
-  position: sticky;
-  bottom: 0;
-  padding: 0 1rem 1rem 1rem;
-  background-color: #f9fafb;
+/* ========== 主内容区域 ========== */
+.main-content {
+  flex: 1;
   display: flex;
-  justify-content: flex-end;
+  flex-direction: column;
+  padding: 0 30px;
+  position: relative;
   z-index: 10;
+  min-height: 0;
+  overflow: hidden;
 }
 
-/* 领料车按钮样式 */
-.cart-btn {
-  background-color: #d1fae5;
-  color: #065f46;
-  padding: 0.5rem 1rem;
-  border-radius: 0.5rem;
-  font-weight: 500;
-  transition: all 0.2s;
-  display: inline-flex;
-  align-items: center;
-  border: none;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.cart-btn:hover {
-  background-color: #a7f3d0;
+/* ========== 筛选区域 ========== */
+.filter-section {
+  background: rgba(9, 61, 140, 0.5);
+  border: 1px solid #049FD8;
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 20px;
+  flex-shrink: 0;
 }
 
-/* 筛选表单 */
-.filter-form {
+.filter-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-}
-
-.filter-form > * {
-  margin-right: 1rem;
-  margin-bottom: 0.4rem;
+  gap: 20px;
 }
 
 .filter-item {
   display: flex;
   align-items: center;
-}
-
-.filter-item > * {
-  margin-right: 0.5rem;
-}
-
-.filter-item > *:last-child {
-  margin-right: 0;
+  gap: 10px;
 }
 
 .filter-label {
-  font-size: 14px;
-  font-weight: 600;
+  font-size: 16px;
+  color: #7ec8ff;
   white-space: nowrap;
-  color: #374151;
+  font-weight: 500;
 }
 
 .filter-select {
   width: 200px;
-  position: relative;
-  z-index: 100;
 }
 
-.filter-input {
+.filter-input.dark-input {
   width: 200px;
+  padding: 10px 15px;
+  background: rgba(13, 58, 106, 0.8);
+  border: 1px solid #2a7fff;
+  border-radius: 6px;
+  color: #fff;
+  font-size: 14px;
+  outline: none;
+  transition: all 0.3s;
 }
 
-:deep(.filter-input .van-cell) {
-  padding: 8px 12px !important;
-  border: 1px solid #d1d5db !important;
-  border-radius: 4px !important;
-  background-color: white !important;
-  min-height: 32px !important;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+.filter-input.dark-input::placeholder {
+  color: #7ec8ff;
+  opacity: 0.7;
 }
 
-:deep(.filter-input .van-cell::after) {
-  display: none !important;
+.filter-input.dark-input:focus {
+  border-color: #00bfff;
+  box-shadow: 0 0 10px rgba(0, 191, 255, 0.3);
 }
 
-:deep(.filter-input .van-field__body) {
-  border: none !important;
+.filter-buttons {
+  display: flex;
+  gap: 15px;
+  margin-left: auto;
 }
 
-:deep(.filter-input .van-field__control) {
-  font-size: 14px;
+.search-btn,
+.reset-btn {
+  padding: 10px 30px;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+  border: none;
 }
 
-/* Vue Select 样式 */
-:deep(.v-select) {
-  font-size: 14px;
+.search-btn {
+  background: linear-gradient(90deg, #1e90ff 0%, #00bfff 100%);
+  color: #fff;
 }
 
-:deep(.v-select .vs__dropdown-toggle) {
-  border: 1px solid #d1d5db;
-  border-radius: 4px;
-  padding: 4px 8px;
-  min-height: 32px;
-  background: white;
+.search-btn:hover {
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.6);
+  transform: translateY(-2px);
 }
 
-:deep(.v-select .vs__dropdown-menu) {
-  z-index: 9999 !important;
-  border: 1px solid #d1d5db;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+.reset-btn {
+  background: rgba(13, 58, 106, 0.8);
+  border: 1px solid #2a7fff;
+  color: #fff;
 }
 
-:deep(.v-select .vs__selected) {
-  margin: 2px;
-  padding: 0 4px;
+.reset-btn:hover {
+  background: rgba(26, 74, 122, 0.8);
+  box-shadow: 0 0 10px rgba(30, 144, 255, 0.3);
 }
 
-:deep(.v-select .vs__search) {
-  padding: 0;
-  margin: 0;
+/* Vue Select 深色主题 */
+:deep(.dark-select .vs__dropdown-toggle) {
+  background: rgba(13, 58, 106, 0.8);
+  border: 1px solid #2a7fff;
+  border-radius: 6px;
+  padding: 6px 10px;
+  min-height: 40px;
 }
 
-:deep(.v-select .vs__actions) {
-  padding: 0 4px;
+:deep(.dark-select .vs__selected) {
+  color: #fff;
 }
 
-.filter-buttons {
-  display: flex;
+:deep(.dark-select .vs__search) {
+  color: #fff;
 }
 
-.filter-buttons > * {
-  margin-right: 0.5rem;
+:deep(.dark-select .vs__search::placeholder) {
+  color: #7ec8ff;
+  opacity: 0.7;
 }
 
-.filter-buttons > *:last-child {
-  margin-right: 0;
+:deep(.dark-select .vs__actions svg) {
+  fill: #7ec8ff;
 }
 
-/* 库存卡片样式 */
-.inventory-card {
-  cursor: pointer;
-  transition: all 0.25s ease;
-  border: 2px solid #e5e7eb;
-  background-color: #ffffff;
-  border-radius: 0.5rem;
+:deep(.dark-select .vs__dropdown-menu) {
+  background: rgba(13, 58, 106, 0.95);
+  border: 1px solid #2a7fff;
+  border-radius: 6px;
+  z-index: 9999;
 }
 
-.inventory-card:hover {
-  border-color: #93c5fd;
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
+:deep(.dark-select .vs__dropdown-option) {
+  color: #fff;
+  padding: 10px 15px;
+}
+
+:deep(.dark-select .vs__dropdown-option--highlight) {
+  background: rgba(30, 144, 255, 0.3);
 }
 
-.inventory-card.selected-card {
-  border-color: #3b82f6 !important;
-  background-color: #eff6ff;
-  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
+:deep(.dark-select .vs__clear svg) {
+  fill: #7ec8ff;
 }
 
-/* 卡片标题区域 */
-.card-header {
+/* ========== 全选控制栏 ========== */
+.select-all-bar {
+  background: rgba(9, 61, 140, 0.3);
+  border: 1px solid #049FD8;
+  border-radius: 8px;
+  padding: 10px 20px;
+  margin-bottom: 10px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  width: 100%;
+  flex-shrink: 0;
 }
 
-.card-header > * {
-  margin-right: 1.5rem;
+.select-all-text {
+  font-size: 14px;
+  color: #7ec8ff;
+  font-weight: 500;
 }
 
-.card-header > *:last-child {
-  margin-right: 0;
+:deep(.select-all-bar .van-checkbox__label) {
+  color: #7ec8ff;
 }
 
-.card-header-left {
-  display: flex;
-  align-items: center;
+/* ========== 卡片网格区域 ========== */
+.card-grid-wrapper {
   flex: 1;
-  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-bottom: 10px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 
-.card-header-center {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
+.card-grid-wrapper::-webkit-scrollbar {
+  display: none;
 }
 
-.card-header-right {
+/* 加载更多样式 */
+.loading-more {
   display: flex;
   align-items: center;
-  flex-shrink: 0;
+  justify-content: center;
+  gap: 10px;
+  padding: 20px 0;
+  color: #7ec8ff;
+  font-size: 14px;
 }
 
-.card-header-right > * {
-  margin-left: 1rem;
+.loading-more-spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(30, 144, 255, 0.3);
+  border-top-color: #00bfff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
 }
 
-.card-header-right > *:first-child {
-  margin-left: 0;
+.no-more-data {
+  text-align: center;
+  padding: 15px 0;
+  color: #5a8abf;
+  font-size: 13px;
 }
 
-/* 卡片标题信息 */
-.card-title-info {
+/* 空状态 */
+.empty-state {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  min-width: 0;
-}
-
-.card-title-info > * {
-  margin-bottom: 0.25rem;
+  align-items: center;
+  justify-content: center;
+  color: #7ec8ff;
+  padding: 60px 0;
 }
 
-.card-title-info > *:last-child {
-  margin-bottom: 0;
+.empty-icon {
+  font-size: 80px;
+  margin-bottom: 20px;
+  opacity: 0.5;
 }
 
-.card-name {
-  font-size: 1.2rem;
-  font-weight: 600;
-  color: #111827;
-  line-height: 1.5;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.empty-state p {
+  font-size: 18px;
+  margin: 0;
 }
 
-.card-subtitle {
-  font-size: 0.875rem;
-  color: #6b7280;
-  line-height: 1.4;
+/* 卡片网格 - 4列布局 */
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
 }
 
-/* 卡片位置信息 */
-.card-location {
-  display: flex;
-  align-items: center;
-  padding: 0.5rem 1rem;
-  background-color: #f3f4f6;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  color: #374151;
-  white-space: nowrap;
+/* ========== 设备卡片样式 ========== */
+.inventory-card {
+  background: rgba(5, 30, 60, 0.8);
+  border: 2px solid #0d4a8a;
+  border-radius: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
 }
 
-.card-location i {
-  color: #3b82f6;
+.inventory-card:hover {
+  border-color: #1e90ff;
+  box-shadow: 0 0 20px rgba(30, 144, 255, 0.3);
+  transform: translateY(-3px);
 }
 
-.card-location {
-  flex-shrink: 0;
+.inventory-card.selected {
+  border-color: #00bfff;
+  box-shadow: 0 0 25px rgba(0, 191, 255, 0.5);
+  background: rgba(10, 50, 100, 0.9);
 }
 
-/* 卡片统计信息 */
-.card-stats {
+/* 卡片序号 - 左上角 */
+.card-index {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  width: 36px;
+  height: 36px;
+  background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%);
+  border-radius: 50%;
   display: flex;
   align-items: center;
-  padding: 0.4rem 1.25rem;
-  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
-  border-radius: 0.5rem;
-  margin-top: 0.75rem;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: #fff;
+  z-index: 2;
+  box-shadow: 0 2px 8px rgba(0, 191, 255, 0.4);
 }
 
-.card-stats > * {
-  margin-right: 1.5rem;
+/* 图片区域 */
+.card-image {
+  width: 100%;
+  aspect-ratio: 3 / 4;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  margin: 15px;
+  margin-bottom: 10px;
+  border-radius: 8px;
+  width: calc(100% - 30px);
 }
 
-.card-stats > *:last-child {
-  margin-right: 0;
+.card-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
-.stat-item {
+.image-placeholder {
   display: flex;
   align-items: center;
-  color: #0369a1;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #f0f4f8 0%, #e8ecf0 100%);
+  color: #94a3b8;
+  font-size: 48px;
 }
 
-.stat-item > * {
-  margin-right: 0.5rem;
+/* 信息区域 */
+.card-info {
+  padding: 10px 15px 15px;
 }
 
-.stat-item > *:last-child {
-  margin-right: 0;
+.info-row {
+  display: flex;
+  align-items: baseline;
+  margin-bottom: 6px;
+  font-size: 14px;
 }
 
-.stat-item i {
-  font-size: 0.875rem;
-  color: #0284c7;
+.info-row:last-child {
+  margin-bottom: 0;
 }
 
-.stat-label {
-  font-size: 0.75rem;
-  color: #64748b;
-  font-weight: 500;
+.info-label {
+  color: #7ec8ff;
+  white-space: nowrap;
+  margin-right: 5px;
 }
 
-.stat-value {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: #0c4a6e;
+.info-value {
+  color: #fff;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-/* 自定义头像 */
-.custom-avatar {
-  width: 42px;
-  height: 42px;
-  border-radius: 50%;
-  background-color: #3b82f6;
+/* 统计行样式 */
+.stats-row {
   display: flex;
   align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 20px;
-  flex-shrink: 0;
-}
-
-/* 卡片内部样式 */
-.inventory-card .card-header {
-  padding: 1rem 1.5rem;
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid rgba(30, 144, 255, 0.2);
 }
 
-/* 按钮样式 */
-:deep(.van-button--primary) {
-  background-color: #3b82f6;
-  border-color: #3b82f6;
+.stats-icon {
+  color: #fbbf24;
+  margin-right: 6px;
+  font-size: 12px;
 }
 
-:deep(.van-button--primary:active) {
-  background-color: #2563eb;
-  border-color: #2563eb;
-}
-
-.add-to-cart-btn {
-  background-color: #10b981 !important;
-  border-color: #10b981 !important;
-  width: auto;
-  padding: 0 24px;
+/* 位置行样式 */
+.location-row {
+  display: flex;
+  align-items: center;
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid rgba(30, 144, 255, 0.2);
 }
 
-:deep(.add-to-cart-btn.van-button--primary) {
-  background-color: #10b981 !important;
-  border-color: #10b981 !important;
+.location-icon {
+  color: #00bfff;
+  margin-right: 6px;
+  font-size: 12px;
 }
 
-:deep(.add-to-cart-btn.van-button--primary:active) {
-  background-color: #059669 !important;
-  border-color: #059669 !important;
+/* 选中状态指示 - 右上角 */
+.selected-indicator {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 28px;
+  height: 28px;
+  background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #fff;
+  box-shadow: 0 2px 8px rgba(0, 255, 136, 0.4);
 }
 
-:deep(.van-button--disabled) {
-  opacity: 0.5;
-  cursor: not-allowed;
+/* ========== 底部操作按钮 ========== */
+.bottom-actions {
+  width: 100%;
+  padding: 15px 30px;
+  box-sizing: border-box;
+  background: rgba(4, 28, 61, 0.95);
+  z-index: 20;
+  flex-shrink: 0;
 }
 
-.action-btn {
-  padding: 0.5rem 1rem;
-  border-radius: 0.5rem;
-  font-weight: 500;
-  transition: all 0.2s;
-  display: inline-flex;
-  align-items: center;
+.submit-btn {
+  width: 100%;
+  padding: 18px 0;
+  background: #4a99e2;
   border: none;
+  border-radius: 12px;
+  font-size: 24px;
+  font-weight: bold;
+  color: #fff;
   cursor: pointer;
+  transition: all 0.3s;
+  letter-spacing: 8px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
-:deep(.van-cell) {
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  padding: 6px 8px !important;
+.submit-btn:hover:not(:disabled) {
+  box-shadow: 0 0 30px rgba(74, 153, 226, 0.6);
+  transform: translateY(-2px);
 }
 
-:deep(.v-select .vs__dropdown-toggle) {
-  padding: 6px 8px !important;
+.submit-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: linear-gradient(90deg, #6b7280 0%, #9ca3af 100%);
 }
 
-/* 全选控制栏 */
-.select-all-bar {
-  background-color: white;
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid #e5e7eb;
+/* ========== Loading 遮罩 ========== */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(4, 28, 61, 0.8);
   display: flex;
   align-items: center;
+  justify-content: center;
+  z-index: 1000;
 }
 
-.select-all-text {
-  font-size: 0.95rem;
-  color: #374151;
-  font-weight: 500;
+.loading-spinner {
+  width: 60px;
+  height: 60px;
+  border: 4px solid rgba(30, 144, 255, 0.3);
+  border-top-color: #00bfff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ========== 响应式 - 1920x1080 横屏 ========== */
+@media screen and (orientation: landscape) {
+  .stock-requisition-page {
+    height: 100vh;
+    min-height: 100vh;
+    max-height: 100vh;
+    overflow: hidden;
+  }
+
+  .header-section {
+    padding: 10px 20px;
+    flex-shrink: 0;
+  }
+
+  .page-title {
+    font-size: 22px;
+  }
+
+  .logout-btn {
+    padding: 6px 14px;
+    font-size: 13px;
+    left: 20px;
+  }
+
+  .logout-btn i {
+    font-size: 14px;
+  }
+
+  .header-actions {
+    right: 20px;
+    gap: 10px;
+  }
+
+  .action-btn {
+    padding: 6px 14px;
+    font-size: 13px;
+    gap: 6px;
+  }
+
+  .action-btn i {
+    font-size: 14px;
+  }
+
+  .main-content {
+    padding: 0 20px;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .filter-section {
+    padding: 10px 15px;
+    margin-bottom: 10px;
+    flex-shrink: 0;
+  }
+
+  .filter-row {
+    gap: 12px;
+  }
+
+  .filter-label {
+    font-size: 13px;
+  }
+
+  .filter-select {
+    width: 150px;
+  }
+
+  .filter-input.dark-input {
+    width: 150px;
+    padding: 6px 10px;
+    font-size: 12px;
+  }
+
+  :deep(.dark-select .vs__dropdown-toggle) {
+    min-height: 32px;
+    padding: 4px 8px;
+  }
+
+  .search-btn,
+  .reset-btn {
+    padding: 6px 20px;
+    font-size: 13px;
+  }
+
+  .card-grid-wrapper {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-bottom: 10px;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .card-grid-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+
+  .card-grid {
+    grid-template-columns: repeat(5, 1fr);
+    gap: 10px;
+  }
+
+  .inventory-card {
+    border-radius: 8px;
+    border-width: 1px;
+  }
+
+  .card-image {
+    margin: 8px;
+    width: calc(100% - 16px);
+    aspect-ratio: 4 / 3;
+  }
+
+  .card-index {
+    width: 24px;
+    height: 24px;
+    font-size: 12px;
+    top: 6px;
+    left: 6px;
+  }
+
+  .card-info {
+    padding: 6px 8px 8px;
+  }
+
+  .info-row {
+    font-size: 14px;
+    margin-bottom: 2px;
+  }
+
+  .stats-row,
+  .location-row {
+    margin-top: 2px;
+    padding-top: 2px;
+  }
+
+  .stats-icon,
+  .location-icon {
+    font-size: 10px;
+    margin-right: 4px;
+  }
+
+  .image-placeholder {
+    font-size: 28px;
+  }
+
+  .selected-indicator {
+    width: 20px;
+    height: 20px;
+    font-size: 10px;
+    top: 6px;
+    right: 6px;
+  }
+
+  .loading-more {
+    padding: 15px 0;
+    font-size: 12px;
+  }
+
+  .loading-more-spinner {
+    width: 16px;
+    height: 16px;
+  }
+
+  .no-more-data {
+    padding: 10px 0;
+    font-size: 11px;
+  }
+
+  .bottom-actions {
+    padding: 10px 20px;
+    flex-shrink: 0;
+    background: rgba(4, 28, 61, 0.95);
+  }
+
+  .submit-btn {
+    padding: 12px 0;
+    font-size: 18px;
+    letter-spacing: 6px;
+    border-radius: 8px;
+  }
+}
+
+/* ========== 响应式 - 中等屏幕 ========== */
+@media screen and (orientation: landscape) and (max-width: 1400px) {
+  .card-grid {
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+  }
+
+  .filter-select {
+    width: 130px;
+  }
+
+  .filter-input.dark-input {
+    width: 130px;
+  }
+}
+
+/* ========== 响应式 - 竖屏 ========== */
+@media screen and (orientation: portrait) and (max-width: 900px) {
+  .stock-requisition-page {
+    height: 100vh;
+    overflow: hidden;
+  }
+
+  .card-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 15px;
+  }
+
+  .card-grid-wrapper {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .card-grid-wrapper::-webkit-scrollbar {
+    display: none;
+  }
 }
 </style>

src/stock/StockRequisition.vue

@@ -1,37 +1,47 @@
-<!-- 领料管理 -->
+<!-- 领料管理 - 智能仓储风格 -->
 <template>
-  <div class="page-container">
-    <!-- 顶部信息栏 -->
-    <PageHeader title="领料管理">
-      <template #actions>
+  <div class="stock-requisition-page">
+    <!-- 背景层 -->
+    <div class="bg-layer" :style="{ backgroundImage: `url(${bgImg})` }" />
+
+    <!-- 顶部标题区域 -->
+    <div class="header-section">
+      <button class="logout-btn" @click="goHome">
+        <i class="fas fa-home" />
+        <span>主页</span>
+      </button>
+      <h1 class="page-title">领料</h1>
+      <!-- 右侧操作按钮 -->
+      <div class="header-actions">
         <button class="action-btn regular-btn" @click="openRegularRequisition">
-          <i class="fas fa-star text-xl" />
-          <span class="ml-2">常用领料</span>
+          <i class="fas fa-star" />
+          <span>常用领料</span>
         </button>
         <button class="action-btn cart-btn" @click="openStockOutCar">
           <van-badge :content="count" :show-zero="true">
-            <i class="fas fa-shopping-cart text-xl" />
+            <i class="fas fa-shopping-cart" />
           </van-badge>
-          <span class="ml-2">领料车</span>
+          <span>领料车</span>
         </button>
-      </template>
-    </PageHeader>
+      </div>
+    </div>
 
     <!-- 主内容区域 -->
     <main class="main-content">
-      <!-- 页面标题 -->
-      <!-- <div class="page-title">
-        <h2>领料管理</h2>
-      </div> -->
-
       <!-- 筛选区域 -->
-      <FilterPanel :default-collapsed="false" :enable-collapse="false" :active-count="getActiveFilterCount()">
-        <div class="filter-form">
+      <div class="filter-section">
+        <div class="filter-row">
           <div class="filter-item">
-            <label class="filter-label">仓库:</label>
+            <label class="filter-label">类型</label>
             <v-select
-              v-model="warehouseId" :options="warehouseList" :reduce="item => item.id" label="name"
-              placeholder="选择仓库" :clearable="true" :filterable="true" class="filter-select"
+              v-model="inventoryType"
+              :options="inventoryTypeList"
+              :reduce="item => item.value"
+              label="label"
+              placeholder="请输入类型"
+              :clearable="true"
+              :filterable="true"
+              class="filter-select dark-select"
               @update:model-value="getDatas"
             >
               <template #no-options>
@@ -40,185 +50,159 @@
             </v-select>
           </div>
           <div class="filter-item">
-            <label class="filter-label">名称:</label>
-            <van-field v-model="inventoryName" placeholder="输入名称" class="filter-input" @keyup.enter="getDatas" />
+            <label class="filter-label">名称</label>
+            <input
+              v-model="inventoryName"
+              type="text"
+              placeholder="请输入名称"
+              class="filter-input dark-input"
+              @keyup.enter="getDatas"
+            />
           </div>
-          <div class="filter-item">
-            <label class="filter-label">编号:</label>
-            <van-field v-model="inventoryNo" placeholder="输入编号" class="filter-input" @keyup.enter="getDatas" />
+          <!-- <div class="filter-item">
+            <label class="filter-label">编号</label>
+            <input
+              v-model="inventoryNo"
+              type="text"
+              placeholder="请输入编号"
+              class="filter-input dark-input"
+              @keyup.enter="getDatas"
+            />
           </div>
           <div class="filter-item">
-            <label class="filter-label">类型:</label>
+            <label class="filter-label">仓库</label>
             <v-select
-              v-model="inventoryType" :options="inventoryTypeList" :reduce="item => item.value" label="label"
-              placeholder="选择类型" :clearable="true" :filterable="true" class="filter-select"
+              v-model="warehouseId"
+              :options="warehouseList"
+              :reduce="item => item.id"
+              label="name"
+              placeholder="选择仓库"
+              :clearable="true"
+              :filterable="true"
+              class="filter-select dark-select"
               @update:model-value="getDatas"
             >
               <template #no-options>
                 <span>无该选项数据</span>
               </template>
             </v-select>
-          </div>
-          <div class="filter-item filter-buttons">
-            <van-button type="primary" @click="getDatas">
-              <i class="fas fa-search mr-1" /> 搜索
-            </van-button>
-            <van-button class="ml-2" @click="handleReset">
-              <i class="fas fa-redo mr-1" /> 重置
-            </van-button>
+          </div> -->
+          <div class="filter-buttons">
+            <button class="search-btn" @click="getDatas">
+              搜索
+            </button>
+            <button class="reset-btn" @click="handleReset">
+              重置
+            </button>
           </div>
         </div>
-      </FilterPanel>
-
-      <!-- 卡片容器 -->
-      <div class="card-container">
-        <!-- 全选控制栏 -->
-        <div v-if="stockRequisitionList.length > 0" class="select-all-bar">
-          <van-checkbox :model-value="isAllSelected" @update:model-value="toggleSelectAll">
-            <span class="select-all-text">全选当前页（已选 {{ selectedIds.length }} 项）</span>
-          </van-checkbox>
+      </div>
+
+      <!-- 全选控制栏 -->
+      <div v-if="stockRequisitionList.length > 0" class="select-all-bar">
+        <van-checkbox :model-value="isAllSelected" @update:model-value="toggleSelectAll">
+          <span class="select-all-text">全选当前页（已选 {{ selectedIds.length }} 项）</span>
+        </van-checkbox>
+      </div>
+
+      <!-- 卡片网格区域 -->
+      <div ref="cardGridWrapper" class="card-grid-wrapper" @scroll="handleScroll">
+        <!-- 空状态 -->
+        <div v-if="stockRequisitionList.length === 0 && !loading" class="empty-state">
+          <i class="fas fa-inbox empty-icon" />
+          <p>暂无数据</p>
         </div>
 
-        <!-- 卡片列表区域  -->
-        <div class="card-list-wrapper">
-          <!-- 空状态 -->
-          <van-empty v-if="stockRequisitionList.length === 0" description="暂无数据" />
-
-          <!-- 卡片列表 -->
-          <div v-else class="card-list">
-            <div
-              v-for="(item, index) in stockRequisitionList" :key="item.id || index"
-              :class="{ 'selected-card': selectedIds.includes(item.id) }" class="inventory-card"
-              @click="toggleSelect(item.id)"
-            >
-              <div class="card-header">
-                <div class="card-header-left">
-                  <van-checkbox
-                    :model-value="selectedIds.includes(item.id)" @click.stop
-                    @update:model-value="checked => handleCheckboxChange(checked, item.id)"
-                  />
-                  <div class="custom-avatar ml-3">
-                    <i :class="getInventoryIcon(item.inventoryType)" />
-                  </div>
-                  <div class="ml-4 card-title-info">
-                    <div class="card-name">{{ item.inventoryName }}</div>
-                    <div class="card-subtitle">编号: {{ item.inventoryNo }}</div>
-                  </div>
-                </div>
-                <div class="card-header-right">
-                  <div class="card-location">
-                    <i class="fas fa-map-marker-alt mr-2" />
-                    <span>{{ item.inventoryActulPosition || item.inventoryPosition || '-' }}</span>
-                    <span class="mx-2">/</span>
-                    <span>{{ item.inventoryWarehouse || '-' }}</span>
-                  </div>
-                </div>
+        <!-- 卡片网格 -->
+        <div v-else class="card-grid">
+          <div
+            v-for="(item, index) in stockRequisitionList"
+            :key="item.id || index"
+            class="inventory-card"
+            :class="{ 'selected': selectedIds.includes(item.id) }"
+            @click="toggleSelect(item.id)"
+          >
+            <!-- 卡片序号 -->
+            <div class="card-index">{{ index + 1 }}</div>
+            
+            <!-- 图片区域 -->
+            <div class="card-image">
+              <img v-if="item.imageUrl" :src="item.imageUrl" alt="设备图片" />
+              <div v-else class="image-placeholder">
+                <i :class="getInventoryIcon(item.inventoryType)" />
               </div>
             </div>
+            
+            <!-- 信息区域 -->
+            <div class="card-info">
+              <div class="info-row">
+                <span class="info-label">名称:</span>
+                <span class="info-value">{{ item.inventoryName || '-' }}</span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">编号:</span>
+                <span class="info-value">{{ item.inventoryNo || '-' }}</span>
+              </div>
+              <div class="info-row location-row">
+                <i class="fas fa-map-marker-alt location-icon" />
+                <span class="info-value">{{ item.inventoryActulPosition || item.inventoryPosition || '-' }} / {{ item.inventoryWarehouse || '-' }}</span>
+              </div>
+            </div>
+            
+            <!-- 选中状态指示 -->
+            <div v-if="selectedIds.includes(item.id)" class="selected-indicator">
+              <i class="fas fa-check" />
+            </div>
           </div>
         </div>
 
-        <!-- 分页区域（固定底部） -->
-        <div v-if="stockRequisitionList.length > 0" class="pagination-wrapper">
-          <div class="pagination-info">
-            第{{ (pagination.current_page - 1) * pagination.per_page + 1 }}-{{ Math.min(pagination.current_page *
-              pagination.per_page, pagination.total) }}条，共{{ pagination.total }}条
-          </div>
-          <div class="pagination-controls">
-            <button
-              class="pagination-btn" :disabled="pagination.current_page === 1"
-              @click="handlePageChange(pagination.current_page - 1)"
-            >
-              &lt;
-            </button>
-            <template v-for="page in getPageNumbers()" :key="page">
-              <button
-                v-if="page !== '...'" class="pagination-btn" :class="{ active: page === pagination.current_page }"
-                @click="handlePageChange(page)"
-              >
-                {{ page }}
-              </button>
-              <span v-else class="pagination-ellipsis">...</span>
-            </template>
-            <button
-              class="pagination-btn"
-              :disabled="pagination.current_page === Math.ceil(pagination.total / pagination.per_page)"
-              @click="handlePageChange(pagination.current_page + 1)"
-            >
-              &gt;
-            </button>
-          </div>
-          <div class="pagination-size">
-            <v-select
-              v-model="pagination.per_page" :options="pageSizeOptions" :clearable="false" :searchable="false"
-              :append-to-body="true" :calculate-position="withPopper" class="size-select"
-              @update:model-value="handlePageSizeChange"
-            >
-              <template #selected-option="{ label }">
-                {{ label }}条/页
-              </template>
-              <template #option="{ label }">
-                {{ label }}条/页
-              </template>
-            </v-select>
-          </div>
+        <!-- 加载更多提示 -->
+        <div v-if="loadingMore" class="loading-more">
+          <div class="loading-more-spinner" />
+          <span>加载中...</span>
+        </div>
+        <div v-else-if="noMoreData && stockRequisitionList.length > 0" class="no-more-data">
+          <span>没有更多数据了</span>
         </div>
       </div>
     </main>
 
     <!-- 底部操作按钮 -->
     <div class="bottom-actions">
-      <van-button
-        type="primary" size="large" :disabled="selectedIds.length === 0" class="add-to-cart-btn"
+      <button
+        class="submit-btn"
+        :disabled="selectedIds.length === 0"
         @click="submitStock"
       >
-        <i class="fas fa-cart-plus mr-2" />
         加入领料车
-      </van-button>
+      </button>
     </div>
 
-    <Loading v-if="loading" />
+    <!-- Loading -->
+    <div v-if="loading" class="loading-overlay">
+      <div class="loading-spinner" />
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, onMounted, nextTick, computed } from 'vue';
 import { useRouter } from 'vue-router';
-import Common from '../common/Common.js';
 import { showNotify } from 'vant';
 import vSelect from 'vue-select';
 import 'vue-select/dist/vue-select.css';
-import { createPopper } from '@popperjs/core';
-
-// 为 vue-select 配置 popper
-const withPopper = (dropdownList, component, { width }) => {
-    dropdownList.style.width = width;
-    const popper = createPopper(component.$refs.toggle, dropdownList, {
-        placement: 'bottom',
-        modifiers: [
-            {
-                name: 'offset',
-                options: { offset: [0, -1] },
-            },
-            {
-                name: 'toggleClass',
-                enabled: true,
-                phase: 'write',
-                fn({ state }) {
-                    component.$el.classList.toggle('drop-up', state.placement === 'top');
-                },
-            },
-        ],
-    });
-    return () => popper.destroy();
-};
-import PageHeader from '../common/PageHeader.vue';
-import FilterPanel from '../common/FilterPanel.vue';
+
+// 图片资源
+import bgImg from '../assets/images/bj.png';
+
 import { getWarehouseList } from '../api/stock.js';
 import { findInventory, createStockOutPrepareLine, queryPickingCarNumber } from '../api/stockOut.js';
 
 const router = useRouter();
 
+// 滚动容器ref
+const cardGridWrapper = ref(null);
+
 const warehouseId = ref(undefined);
 const inventoryName = ref('');
 const inventoryNo = ref('');
@@ -228,39 +212,24 @@ const warehouseList = ref([]);
 const stockRequisitionList = ref([]);
 const selectedIds = ref([]);
 
-// 计算是否全选
-const isAllSelected = computed(() => {
-    if (stockRequisitionList.value.length === 0) return false;
-    return stockRequisitionList.value.every(item => selectedIds.value.includes(item.id));
-});
 const loading = ref(false);
+const loadingMore = ref(false);
+const noMoreData = ref(false);
 
 const inventoryTypeList = ref([
     { value: 'Clamp', label: '工装' },
     { value: 'Instrument', label: '设备' },
     { value: 'FinishProduct', label: '成品' },
 ]);
-const pagination = ref({
-    total: 0,
-    current_page: 1,
-    per_page: 20,
-});
-const pageSizeOptions = [10, 20, 50, 100, 200, 500];
-
-// 计算激活的筛选条件数量
-const getActiveFilterCount = () => {
-    let count = 0;
-    if (warehouseId.value) count++;
-    if (inventoryName.value) count++;
-    if (inventoryNo.value) count++;
-    if (inventoryType.value) count++;
-    return count;
-};
+
+// 无限滚动参数
+const pageSize = 20;
+const currentStart = ref(0);
+const total = ref(0);
 
 // 打开常用领料
 const openRegularRequisition = () => {
     router.push('/regular-requisition');
-
 };
 
 // 打开领料车
@@ -268,6 +237,12 @@ const openStockOutCar = () => {
     router.push('/stock-picking-car?isRegular=false');
 };
 
+// 计算是否全选
+const isAllSelected = computed(() => {
+    if (stockRequisitionList.value.length === 0) return false;
+    return stockRequisitionList.value.every(item => selectedIds.value.includes(item.id));
+});
+
 // 切换选择
 const toggleSelect = id => {
     const index = selectedIds.value.indexOf(id);
@@ -278,33 +253,19 @@ const toggleSelect = id => {
     }
 };
 
-// 处理复选框变化
-const handleCheckboxChange = (checked, id) => {
-    if (checked) {
-        if (!selectedIds.value.includes(id)) {
-            selectedIds.value.push(id);
-        }
-    } else {
-        const index = selectedIds.value.indexOf(id);
-        if (index > -1) {
-            selectedIds.value.splice(index, 1);
-        }
-    }
-};
-
 // 全选/取消全选
 const toggleSelectAll = checked => {
     if (checked) {
-    // 全选当前页所有项（累加模式）
+        // 全选当前列表所有项
         stockRequisitionList.value.forEach(item => {
             if (!selectedIds.value.includes(item.id)) {
                 selectedIds.value.push(item.id);
             }
         });
     } else {
-    // 取消全选当前页
-        const currentPageIds = stockRequisitionList.value.map(item => item.id);
-        selectedIds.value = selectedIds.value.filter(id => !currentPageIds.includes(id));
+        // 取消全选当前列表
+        const currentListIds = stockRequisitionList.value.map(item => item.id);
+        selectedIds.value = selectedIds.value.filter(id => !currentListIds.includes(id));
     }
 };
 
@@ -318,61 +279,86 @@ const getInventoryIcon = type => {
     return iconMap[type] || 'fas fa-cube';
 };
 
-// 分页改变
-const handlePageChange = page => {
-    pagination.value.current_page = page;
-    getStockRequisitionList();
+// 滚动事件处理 - 无限滚动
+const handleScroll = e => {
+    const container = e.target;
+    const { scrollTop, scrollHeight, clientHeight } = container;
+    
+    // 距离底部100px时触发加载
+    if (scrollHeight - scrollTop - clientHeight < 100) {
+        loadMore();
+    }
 };
 
-// 每页大小改变
-const handlePageSizeChange = pageSize => {
-    pagination.value.per_page = pageSize;
-    pagination.value.current_page = 1;
-    getStockRequisitionList();
+// 检查容器是否需要继续加载（当内容不足以产生滚动条时自动加载更多）
+const checkAndLoadMore = async () => {
+    await nextTick();
+    const container = cardGridWrapper.value;
+    if (!container) return;
+    
+    // 如果内容高度不足以产生滚动条，且还有更多数据，继续加载
+    if (container.scrollHeight <= container.clientHeight && !noMoreData.value && !loadingMore.value) {
+        loadMore();
+    }
 };
 
-// 获取分页页码数组
-const getPageNumbers = () => {
-    const totalPages = Math.ceil(pagination.value.total / pagination.value.per_page);
-    const current = pagination.value.current_page;
-    const pages = [];
+// 加载更多数据
+const loadMore = async () => {
+    if (loadingMore.value || noMoreData.value || loading.value) return;
+    
+    loadingMore.value = true;
+    
+    const params = {
+        inventoryName: inventoryName.value,
+        inventoryNo: inventoryNo.value,
+        inventoryType: inventoryType.value,
+        warehouseId: warehouseId.value,
+        range: {
+            start: currentStart.value,
+            length: pageSize,
+        },
+    };
 
-    if (totalPages <= 7) {
-        for (let i = 1; i <= totalPages; i++) {
-            pages.push(i);
-        }
-    } else {
-        if (current <= 3) {
-            for (let i = 1; i <= 5; i++) pages.push(i);
-            pages.push('...');
-            pages.push(totalPages);
-        } else if (current >= totalPages - 2) {
-            pages.push(1);
-            pages.push('...');
-            for (let i = totalPages - 4; i <= totalPages; i++) pages.push(i);
-        } else {
-            pages.push(1);
-            pages.push('...');
-            for (let i = current - 1; i <= current + 1; i++) pages.push(i);
-            pages.push('...');
-            pages.push(totalPages);
+    try {
+        const res = await findInventory(params);
+        if (res.errorCode == 0) {
+            if (res.datas && res.datas.length > 0) {
+                stockRequisitionList.value = [...stockRequisitionList.value, ...res.datas];
+                currentStart.value += res.datas.length;
+                total.value = res.total;
+                
+                // 检查是否还有更多数据
+                if (stockRequisitionList.value.length >= res.total) {
+                    noMoreData.value = true;
+                } else {
+                    // 加载完成后检查是否需要继续加载
+                    checkAndLoadMore();
+                }
+            } else {
+                noMoreData.value = true;
+            }
         }
+    } catch (error) {
+        console.error('加载更多数据失败:', error);
+    } finally {
+        loadingMore.value = false;
     }
-
-    return pages;
 };
 
-// 查询物料数据
+// 初次加载物料数据
 const getStockRequisitionList = async () => {
     loading.value = true;
+    currentStart.value = 0;
+    noMoreData.value = false;
+    
     const params = {
         inventoryName: inventoryName.value,
         inventoryNo: inventoryNo.value,
         inventoryType: inventoryType.value,
         warehouseId: warehouseId.value,
         range: {
-            start: (pagination.value.current_page - 1) * pagination.value.per_page,
-            length: pagination.value.per_page,
+            start: 0,
+            length: pageSize,
         },
     };
 
@@ -381,13 +367,21 @@ const getStockRequisitionList = async () => {
         if (res.errorCode == 0) {
             if (res.datas && res.datas.length > 0) {
                 stockRequisitionList.value = res.datas;
-                pagination.value.total = res.total;
+                currentStart.value = res.datas.length;
+                total.value = res.total;
+                
+                if (stockRequisitionList.value.length >= res.total) {
+                    noMoreData.value = true;
+                } else {
+                    // 初次加载完成后检查是否需要继续加载
+                    checkAndLoadMore();
+                }
             } else {
                 stockRequisitionList.value = [];
-                pagination.value.total = 0;
+                total.value = 0;
+                noMoreData.value = true;
             }
         }
-
     } catch (error) {
         console.error('获取物料数据失败:', error);
         showNotify({ type: 'danger', message: '获取库存数据失败' });
@@ -416,10 +410,9 @@ const getWarehouses = async () => {
     }
 };
 
-// 登出
-const handleLogout = () => {
-    router.push('/login');
-    localStorage.clear();
+// 返回主页
+const goHome = () => {
+    router.push('/home');
 };
 
 // 重置筛选条件
@@ -431,9 +424,12 @@ const handleReset = () => {
     getDatas();
 };
 
-// 查询
+// 查询（重新搜索时重置列表）
 const getDatas = () => {
-    pagination.value.current_page = 1;
+    // 滚动到顶部
+    if (cardGridWrapper.value) {
+        cardGridWrapper.value.scrollTop = 0;
+    }
     getStockRequisitionList();
 };
 
@@ -493,500 +489,1108 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* 页面容器 - 固定高度布局 */
-.page-container {
-  display: flex;
-  flex-direction: column;
+/* ========== 基础样式 - 所有屏幕固定布局 ========== */
+.stock-requisition-page {
+  width: 100%;
   height: 100vh;
-  background-color: #f9fafb;
+  max-height: 100vh;
+  position: relative;
+  font-family: 'Microsoft YaHei', sans-serif;
+  color: #fff;
   overflow: hidden;
-}
-
-/* 主内容区 - 可滚动 */
-.main-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1rem;
   display: flex;
   flex-direction: column;
 }
 
-/* 页面标题 */
-.page-title {
-  margin-bottom: 1.5rem;
+/* 背景层 */
+.bg-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #041c3d;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  z-index: 0;
 }
 
-.page-title h2 {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #111827;
-  margin: 0;
+/* ========== 顶部标题区域 ========== */
+.header-section {
+  position: relative;
+  width: 100%;
+  padding: 20px 30px;
+  box-sizing: border-box;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
-/* 卡片容器 */
-.card-container {
-  flex: 1;
-  background-color: white;
-  border-radius: 0.5rem;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+.logout-btn {
+  position: absolute;
+  left: 30px;
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  min-height: 0;
+  align-items: center;
+  gap: 8px;
+  background: linear-gradient(90deg, #1a4a7a 0%, #0d3a6a 100%);
+  border: 1px solid #2a7fff;
+  border-radius: 8px;
+  padding: 10px 20px;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s;
 }
 
-/* 卡片列表包装器（可滚动区域） */
-.card-list-wrapper {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.5rem;
-  min-height: 0;
+.logout-btn:hover {
+  background: linear-gradient(90deg, #2a5a8a 0%, #1d4a7a 100%);
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.4);
 }
 
-/* 卡片列表（单列布局） */
-.card-list {
-  display: flex;
-  flex-direction: column;
-  font-weight: 600;
+.logout-btn i {
+  font-size: 18px;
+  color: #00bfff;
 }
 
-.card-list > * {
-  margin-bottom: 1rem;
+.page-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #ffffff;
+  letter-spacing: 2px;
+  margin: 0;
+  text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
 }
 
-.card-list > *:last-child {
-  margin-bottom: 0;
+/* 右侧操作按钮 */
+.header-actions {
+  position: absolute;
+  right: 30px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 15px;
 }
 
-/* 分页包装器（固定底部） */
-.pagination-wrapper {
-  padding: 0.5rem 1.5rem;
-  border-top: 1px solid #e5e7eb;
-  background-color: #fafafa;
+.action-btn {
   display: flex;
-  justify-content: flex-end;
   align-items: center;
-  position: relative;
-  z-index: 100;
+  gap: 8px;
+  background: linear-gradient(90deg, #1a4a7a 0%, #0d3a6a 100%);
+  border: 1px solid #2a7fff;
+  border-radius: 8px;
+  padding: 10px 20px;
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
 }
 
-.pagination-wrapper > * {
-  margin-left: 1rem;
+.action-btn:hover {
+  background: linear-gradient(90deg, #2a5a8a 0%, #1d4a7a 100%);
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.4);
 }
 
-.pagination-wrapper > *:first-child {
-  margin-left: 0;
+.action-btn i {
+  font-size: 16px;
+  color: #00bfff;
 }
 
-.pagination-info {
-  font-size: 14px;
-  color: #6b7280;
-  white-space: nowrap;
+.regular-btn {
+  background: linear-gradient(90deg, #5a3a7a 0%, #4a2a6a 100%);
+  border-color: #8a5fff;
 }
 
-.pagination-controls {
-  display: flex;
-  align-items: center;
+.regular-btn:hover {
+  background: linear-gradient(90deg, #6a4a8a 0%, #5a3a7a 100%);
+  box-shadow: 0 0 15px rgba(138, 95, 255, 0.4);
 }
 
-.pagination-controls > * {
-  margin-right: 0.25rem;
+.regular-btn i {
+  color: #d4a5ff;
 }
 
-.pagination-controls > *:last-child {
-  margin-right: 0;
+.cart-btn {
+  background: linear-gradient(90deg, #1a6a5a 0%, #0d5a4a 100%);
+  border-color: #2affcf;
 }
 
-.pagination-btn {
-  min-width: 32px;
-  height: 32px;
-  padding: 0 8px;
-  border: 1px solid #d1d5db;
-  background: white;
-  color: #374151;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: all 0.2s;
+.cart-btn:hover {
+  background: linear-gradient(90deg, #2a7a6a 0%, #1d6a5a 100%);
+  box-shadow: 0 0 15px rgba(42, 255, 207, 0.4);
 }
 
-.pagination-btn:hover:not(:disabled) {
-  border-color: #3b82f6;
-  color: #3b82f6;
+.cart-btn i {
+  color: #2affcf;
 }
 
-.pagination-btn.active {
-  background: #3b82f6;
-  border-color: #3b82f6;
-  color: white;
+/* ========== 主内容区域 ========== */
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 0 30px;
+  position: relative;
+  z-index: 10;
+  min-height: 0;
+  overflow: hidden;
 }
 
-.pagination-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+/* ========== 筛选区域 ========== */
+.filter-section {
+  background: rgba(9, 61, 140, 0.5);
+  border: 1px solid #049FD8;
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 20px;
+  flex-shrink: 0;
 }
 
-.pagination-ellipsis {
-  padding: 0 4px;
-  color: #6b7280;
+.filter-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 20px;
 }
 
-.pagination-size {
+.filter-item {
   display: flex;
   align-items: center;
+  gap: 10px;
 }
 
-.pagination-size > * {
-  margin-right: 0.5rem;
+.filter-label {
+  font-size: 16px;
+  color: #7ec8ff;
+  white-space: nowrap;
+  font-weight: 500;
 }
 
-.pagination-size > *:last-child {
-  margin-right: 0;
+.filter-select {
+  width: 200px;
 }
 
-.size-select {
-  width: 120px;
-  position: relative;
-  z-index: 50;
+.filter-input.dark-input {
+  width: 200px;
+  padding: 10px 15px;
+  background: rgba(13, 58, 106, 0.8);
+  border: 1px solid #2a7fff;
+  border-radius: 6px;
+  color: #fff;
+  font-size: 14px;
+  outline: none;
+  transition: all 0.3s;
 }
 
-:deep(.size-select .vs__dropdown-menu) {
-  z-index: 9999 !important;
+.filter-input.dark-input::placeholder {
+  color: #7ec8ff;
+  opacity: 0.7;
 }
 
-/* 底部操作按钮 */
-.bottom-actions {
-  position: sticky;
-  bottom: 0;
-  padding: 0 1rem 1rem 1rem;
-  background-color: #f9fafb;
+.filter-input.dark-input:focus {
+  border-color: #00bfff;
+  box-shadow: 0 0 10px rgba(0, 191, 255, 0.3);
+}
+
+.filter-buttons {
   display: flex;
-  justify-content: flex-end;
-  z-index: 10;
+  gap: 15px;
+  margin-left: auto;
 }
 
-/* 领料车按钮样式 */
-.regular-btn,
-.cart-btn {
-  background-color: #d1fae5;
-  color: #065f46;
-  padding: 0.5rem 1rem;
-  border-radius: 0.5rem;
+.search-btn,
+.reset-btn {
+  padding: 10px 30px;
+  border-radius: 6px;
+  font-size: 16px;
   font-weight: 500;
-  transition: all 0.2s;
-  display: inline-flex;
-  align-items: center;
-  border: none;
   cursor: pointer;
-  font-size: 14px;
+  transition: all 0.3s;
+  border: none;
 }
 
-.regular-btn {
-  padding: 1rem;
-  background-color: #f3e8ff !important;
+.search-btn {
+  background: linear-gradient(90deg, #1e90ff 0%, #00bfff 100%);
+  color: #fff;
 }
 
-.regular-btn,
-.cart-btn:hover {
-  background-color: #a7f3d0;
+.search-btn:hover {
+  box-shadow: 0 0 15px rgba(30, 144, 255, 0.6);
+  transform: translateY(-2px);
 }
 
-/* 筛选表单 */
-.filter-form {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
+.reset-btn {
+  background: rgba(13, 58, 106, 0.8);
+  border: 1px solid #2a7fff;
+  color: #fff;
 }
 
-.filter-form > * {
-  margin-right: 1rem;
-  margin-bottom: 0.4rem;
+.reset-btn:hover {
+  background: rgba(26, 74, 122, 0.8);
+  box-shadow: 0 0 10px rgba(30, 144, 255, 0.3);
 }
 
-.filter-item {
-  display: flex;
-  align-items: center;
+/* Vue Select 深色主题 */
+:deep(.dark-select .vs__dropdown-toggle) {
+  background: rgba(13, 58, 106, 0.8);
+  border: 1px solid #2a7fff;
+  border-radius: 6px;
+  padding: 6px 10px;
+  min-height: 40px;
 }
 
-.filter-item > * {
-  margin-right: 0.5rem;
+:deep(.dark-select .vs__selected) {
+  color: #fff;
 }
 
-.filter-item > *:last-child {
-  margin-right: 0;
+:deep(.dark-select .vs__search) {
+  color: #fff;
 }
 
-.filter-label {
-  font-size: 14px;
-  font-weight: 600;
-  white-space: nowrap;
-  color: #374151;
+:deep(.dark-select .vs__search::placeholder) {
+  color: #7ec8ff;
+  opacity: 0.7;
 }
 
-.filter-select {
-  width: 200px;
-  position: relative;
-  z-index: 100;
+:deep(.dark-select .vs__actions svg) {
+  fill: #7ec8ff;
 }
 
-.filter-input {
-  width: 200px;
+:deep(.dark-select .vs__dropdown-menu) {
+  background: rgba(13, 58, 106, 0.95);
+  border: 1px solid #2a7fff;
+  border-radius: 6px;
+  z-index: 9999;
 }
 
-:deep(.filter-input .van-cell) {
-  padding: 8px 12px !important;
-  border: 1px solid #ccc !important;
-  border-radius: 4px !important;
-  background-color: white !important;
-  min-height: 32px !important;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+:deep(.dark-select .vs__dropdown-option) {
+  color: #fff;
+  padding: 10px 15px;
 }
 
-:deep(.filter-input .van-cell::after) {
-  display: none !important;
+:deep(.dark-select .vs__dropdown-option--highlight) {
+  background: rgba(30, 144, 255, 0.3);
 }
 
-:deep(.filter-input .van-field__body) {
-  border: none !important;
+:deep(.dark-select .vs__clear svg) {
+  fill: #7ec8ff;
 }
 
-:deep(.filter-input .van-field__control) {
-  font-size: 14px;
+/* ========== 全选控制栏 ========== */
+.select-all-bar {
+  background: rgba(9, 61, 140, 0.3);
+  border: 1px solid #049FD8;
+  border-radius: 8px;
+  padding: 10px 20px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
 }
 
-/* Vue Select 样式 */
-:deep(.v-select) {
+.select-all-text {
   font-size: 14px;
+  color: #7ec8ff;
+  font-weight: 500;
+}
+
+:deep(.select-all-bar .van-checkbox__label) {
+  color: #7ec8ff;
 }
 
-:deep(.v-select .vs__dropdown-toggle) {
-  border: 1px solid #d1d5db;
-  border-radius: 4px;
-  padding: 4px 8px;
-  min-height: 32px;
-  background: white;
+/* ========== 卡片网格区域 ========== */
+.card-grid-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-bottom: 10px;
+  /* 隐藏滚动条 */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 
-:deep(.v-select .vs__dropdown-menu) {
-  z-index: 9999 !important;
-  border: 1px solid #d1d5db;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+.card-grid-wrapper::-webkit-scrollbar {
+  display: none;
 }
 
-:deep(.v-select .vs__selected) {
-  margin: 2px;
-  padding: 0 4px;
+/* 加载更多样式 */
+.loading-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 20px 0;
+  color: #7ec8ff;
+  font-size: 14px;
 }
 
-:deep(.v-select .vs__search) {
-  padding: 0;
-  margin: 0;
+.loading-more-spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(30, 144, 255, 0.3);
+  border-top-color: #00bfff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
 }
 
-:deep(.v-select .vs__actions) {
-  padding: 0 4px;
+.no-more-data {
+  text-align: center;
+  padding: 15px 0;
+  color: #5a8abf;
+  font-size: 13px;
 }
 
-.filter-buttons {
+/* 空状态 */
+.empty-state {
+  flex: 1;
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #7ec8ff;
+  padding: 60px 0;
 }
 
-.filter-buttons > * {
-  margin-right: 0.5rem;
+.empty-icon {
+  font-size: 80px;
+  margin-bottom: 20px;
+  opacity: 0.5;
 }
 
-.filter-buttons > *:last-child {
-  margin-right: 0;
+.empty-state p {
+  font-size: 18px;
+  margin: 0;
 }
 
-/* 库存卡片样式 */
+/* 卡片网格 - 4列布局 */
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+
+/* ========== 设备卡片样式 ========== */
 .inventory-card {
+  background: rgba(5, 30, 60, 0.8);
+  border: 2px solid #0d4a8a;
+  border-radius: 12px;
+  overflow: hidden;
   cursor: pointer;
-  transition: all 0.25s ease;
-  border: 2px solid #e5e7eb;
-  background-color: #ffffff;
-  border-radius: 0.5rem;
+  transition: all 0.3s ease;
+  position: relative;
 }
 
 .inventory-card:hover {
-  border-color: #93c5fd;
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
+  border-color: #1e90ff;
+  box-shadow: 0 0 20px rgba(30, 144, 255, 0.3);
+  transform: translateY(-3px);
 }
 
-.inventory-card.selected-card {
-  border-color: #3b82f6 !important;
-  background-color: #eff6ff;
-  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
+.inventory-card.selected {
+  border-color: #00bfff;
+  box-shadow: 0 0 25px rgba(0, 191, 255, 0.5);
+  background: rgba(10, 50, 100, 0.9);
 }
 
-/* 卡片标题区域 */
-.card-header {
+/* 卡片序号 - 左上角 */
+.card-index {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  width: 36px;
+  height: 36px;
+  background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%);
+  border-radius: 50%;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.card-header > * {
-  margin-right: 1.5rem;
-}
-
-.card-header > *:last-child {
-  margin-right: 0;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: #fff;
+  z-index: 2;
+  box-shadow: 0 2px 8px rgba(0, 191, 255, 0.4);
 }
 
-.card-header-left {
+/* 图片区域 */
+.card-image {
+  width: 100%;
+  aspect-ratio: 3 / 4;
+  background: #fff;
   display: flex;
   align-items: center;
-  flex: 1;
-  min-width: 0;
+  justify-content: center;
+  overflow: hidden;
+  margin: 15px;
+  margin-bottom: 10px;
+  border-radius: 8px;
+  width: calc(100% - 30px);
 }
 
-.card-header-right {
-  display: flex;
-  align-items: center;
+.card-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
-.card-header-right > * {
-  margin-left: 1rem;
+.image-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #f0f4f8 0%, #e8ecf0 100%);
+  color: #94a3b8;
+  font-size: 48px;
 }
 
-.card-header-right > *:first-child {
-  margin-left: 0;
+/* 信息区域 */
+.card-info {
+  padding: 10px 15px 15px;
 }
 
-/* 卡片标题信息 */
-.card-title-info {
+.info-row {
   display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.card-title-info > * {
-  margin-bottom: 0.25rem;
+  align-items: baseline;
+  margin-bottom: 6px;
+  font-size: 14px;
 }
 
-.card-title-info > *:last-child {
+.info-row:last-child {
   margin-bottom: 0;
 }
 
-.card-name {
-  font-size: 1.2rem;
-  font-weight: 600;
-  color: #111827;
-  line-height: 1.5;
+.info-label {
+  color: #7ec8ff;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  margin-right: 5px;
 }
 
-.card-subtitle {
-  font-size: 0.875rem;
-  color: #6b7280;
-  line-height: 1.4;
+.info-value {
+  color: #fff;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-/* 卡片位置信息 */
-.card-location {
+/* 位置行样式 */
+.location-row {
   display: flex;
   align-items: center;
-  padding: 0.5rem 1rem;
-  background-color: #f3f4f6;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  color: #374151;
-  white-space: nowrap;
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid rgba(30, 144, 255, 0.2);
 }
 
-.card-location i {
-  color: #3b82f6;
+.location-icon {
+  color: #00bfff;
+  margin-right: 6px;
+  font-size: 12px;
 }
 
-/* 自定义头像 */
-.custom-avatar {
-  width: 42px;
-  height: 42px;
+.separator {
+  color: #7ec8ff;
+  margin: 0 6px;
+}
+
+/* 选中状态指示 - 右上角 */
+.selected-indicator {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 28px;
+  height: 28px;
+  background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
   border-radius: 50%;
-  background-color: #3b82f6;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
-  font-size: 20px;
-  flex-shrink: 0;
-}
-
-/* 卡片内部样式 */
-.inventory-card .card-header {
-  padding: 1rem 1.5rem;
-}
-
-/* 按钮样式 */
-:deep(.van-button--primary) {
-  background-color: #3b82f6;
-  border-color: #3b82f6;
-}
-
-:deep(.van-button--primary:active) {
-  background-color: #2563eb;
-  border-color: #2563eb;
-}
-
-.add-to-cart-btn {
-  background-color: #10b981 !important;
-  border-color: #10b981 !important;
-  width: auto;
-  padding: 0 24px;
-}
-
-:deep(.add-to-cart-btn.van-button--primary) {
-  background-color: #10b981 !important;
-  border-color: #10b981 !important;
-}
-
-:deep(.add-to-cart-btn.van-button--primary:active) {
-  background-color: #059669 !important;
-  border-color: #059669 !important;
+  font-size: 14px;
+  color: #fff;
+  box-shadow: 0 2px 8px rgba(0, 255, 136, 0.4);
 }
 
-:deep(.van-button--disabled) {
-  opacity: 0.5;
-  cursor: not-allowed;
+/* ========== 底部操作按钮 ========== */
+.bottom-actions {
+  width: 100%;
+  padding: 15px 30px;
+  box-sizing: border-box;
+  background: rgba(4, 28, 61, 0.95);
+  z-index: 20;
+  flex-shrink: 0;
 }
 
-.action-btn {
-  padding: 0.5rem 1rem;
-  border-radius: 0.5rem;
-  font-weight: 500;
-  transition: all 0.2s;
-  display: inline-flex;
-  align-items: center;
+.submit-btn {
+  width: 100%;
+  padding: 18px 0;
+  /* background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%); */
+  background: #4a99e2;
   border: none;
+  border-radius: 12px;
+  font-size: 24px;
+  font-weight: bold;
+  color: #fff;
   cursor: pointer;
+  transition: all 0.3s;
+  letter-spacing: 8px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
-:deep(.van-cell) {
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  padding: 6px 8px !important;
+.submit-btn:hover:not(:disabled) {
+  box-shadow: 0 0 30px rgba(245, 158, 11, 0.6);
+  transform: translateY(-2px);
 }
 
-:deep(.v-select .vs__dropdown-toggle) {
-  padding: 6px 8px !important;
+.submit-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: linear-gradient(90deg, #6b7280 0%, #9ca3af 100%);
 }
 
-/* 全选控制栏 */
-.select-all-bar {
-  background-color: white;
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid #e5e7eb;
+/* ========== Loading 遮罩 ========== */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(4, 28, 61, 0.8);
   display: flex;
   align-items: center;
+  justify-content: center;
+  z-index: 1000;
 }
 
-.select-all-text {
-  font-size: 0.95rem;
-  color: #374151;
-  font-weight: 500;
+.loading-spinner {
+  width: 60px;
+  height: 60px;
+  border: 4px solid rgba(30, 144, 255, 0.3);
+  border-top-color: #00bfff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ========== 响应式 - 1920x1080 横屏 ========== */
+@media screen and (orientation: landscape) {
+  /* 横屏固定布局，不出现页面滚动条 */
+  .stock-requisition-page {
+    height: 100vh;
+    min-height: 100vh;
+    max-height: 100vh;
+    overflow: hidden;
+  }
+
+  .header-section {
+    padding: 10px 20px;
+    flex-shrink: 0;
+  }
+
+  .page-title {
+    font-size: 22px;
+  }
+
+  .logout-btn {
+    padding: 6px 14px;
+    font-size: 13px;
+    left: 20px;
+  }
+
+  .logout-btn i {
+    font-size: 14px;
+  }
+
+  .header-actions {
+    right: 20px;
+    gap: 10px;
+  }
+
+  .action-btn {
+    padding: 6px 14px;
+    font-size: 13px;
+    gap: 6px;
+  }
+
+  .action-btn i {
+    font-size: 14px;
+  }
+
+  .main-content {
+    padding: 0 20px;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .filter-section {
+    padding: 10px 15px;
+    margin-bottom: 10px;
+    flex-shrink: 0;
+  }
+
+  .filter-row {
+    gap: 12px;
+  }
+
+  .filter-label {
+    font-size: 13px;
+  }
+
+  .filter-select {
+    width: 150px;
+  }
+
+  .filter-input.dark-input {
+    width: 150px;
+    padding: 6px 10px;
+    font-size: 12px;
+  }
+
+  :deep(.dark-select .vs__dropdown-toggle) {
+    min-height: 32px;
+    padding: 4px 8px;
+  }
+
+  .search-btn,
+  .reset-btn {
+    padding: 6px 20px;
+    font-size: 13px;
+  }
+
+  /* 卡片区域可滚动，隐藏滚动条 */
+  .card-grid-wrapper {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-bottom: 10px;
+    /* 隐藏滚动条 */
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .card-grid-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* 横屏5列布局，显示20个卡片 */
+  .card-grid {
+    grid-template-columns: repeat(5, 1fr);
+    gap: 10px;
+  }
+
+  .inventory-card {
+    border-radius: 8px;
+    border-width: 1px;
+  }
+
+  .card-image {
+    margin: 8px;
+    width: calc(100% - 16px);
+    aspect-ratio: 4 / 3;
+  }
+
+  .card-index {
+    width: 24px;
+    height: 24px;
+    font-size: 12px;
+    top: 6px;
+    right: 6px;
+  }
+
+  .card-info {
+    padding: 6px 8px 8px;
+  }
+
+  .info-row {
+    font-size: 14px;
+    margin-bottom: 2px;
+  }
+
+  .location-row {
+    margin-top: 2px;
+    padding-top: 2px;
+  }
+
+  .location-icon {
+    font-size: 10px;
+    margin-right: 4px;
+  }
+
+  .separator {
+    margin: 0 4px;
+  }
+
+  .image-placeholder {
+    font-size: 28px;
+  }
+
+  .selected-indicator {
+    width: 20px;
+    height: 20px;
+    font-size: 10px;
+    top: 6px;
+    right: 6px;
+  }
+
+  .card-index {
+    width: 24px;
+    height: 24px;
+    font-size: 12px;
+    top: 6px;
+    left: 6px;
+  }
+
+  .loading-more {
+    padding: 15px 0;
+    font-size: 12px;
+  }
+
+  .loading-more-spinner {
+    width: 16px;
+    height: 16px;
+  }
+
+  .no-more-data {
+    padding: 10px 0;
+    font-size: 11px;
+  }
+
+  /* 底部按钮固定 */
+  .bottom-actions {
+    padding: 10px 20px;
+    flex-shrink: 0;
+    background: rgba(4, 28, 61, 0.95);
+  }
+
+  .submit-btn {
+    padding: 12px 0;
+    font-size: 18px;
+    letter-spacing: 6px;
+    border-radius: 8px;
+  }
+}
+
+/* ========== 响应式 - 中等屏幕（横屏但宽度较小） ========== */
+@media screen and (orientation: landscape) and (max-width: 1400px) {
+  .card-grid {
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+  }
+
+  .filter-select {
+    width: 130px;
+  }
+
+  .filter-input.dark-input {
+    width: 130px;
+  }
+}
+
+/* ========== 响应式 - 中等屏幕（竖屏） ========== */
+@media screen and (orientation: portrait) and (max-width: 900px) {
+  .stock-requisition-page {
+    height: 100vh;
+    overflow: hidden;
+  }
+
+  .card-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 15px;
+  }
+
+  .card-grid-wrapper {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .card-grid-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+
+  .filter-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 15px;
+  }
+
+  .filter-item {
+    width: 100%;
+  }
+
+  .filter-select,
+  .filter-input.dark-input {
+    flex: 1;
+  }
+
+  .filter-buttons {
+    margin-left: 0;
+    justify-content: center;
+  }
+
+  .header-actions {
+    position: static;
+    transform: none;
+    margin-top: 10px;
+  }
+
+  .header-section {
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+}
+
+/* ========== 响应式 - 小屏幕 ========== */
+@media screen and (max-width: 600px) {
+  .stock-requisition-page {
+    height: 100vh;
+    overflow: hidden;
+  }
+
+  .header-section {
+    padding: 15px 20px;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .logout-btn {
+    position: static;
+    transform: none;
+  }
+
+  .header-actions {
+    position: static;
+    transform: none;
+  }
+
+  .page-title {
+    font-size: 20px;
+  }
+
+  .main-content {
+    padding: 0 15px;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .card-grid-wrapper {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .card-grid-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+
+  .card-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+  }
+
+  .card-image {
+    margin: 8px;
+    width: calc(100% - 16px);
+  }
+
+  .card-index {
+    width: 26px;
+    height: 26px;
+    font-size: 12px;
+  }
+
+  .info-row {
+    font-size: 11px;
+  }
+
+  .image-placeholder {
+    font-size: 32px;
+  }
+
+  .bottom-actions {
+    padding: 15px;
+    flex-shrink: 0;
+    background: rgba(4, 28, 61, 0.95);
+  }
+
+  .submit-btn {
+    padding: 14px 0;
+    font-size: 18px;
+    letter-spacing: 4px;
+  }
+}
+
+/* ========== 响应式 - 大屏竖屏 (1080x1920) ========== */
+@media screen and (orientation: portrait) and (min-width: 900px) {
+  .header-section {
+    padding: 30px 40px;
+  }
+
+  .page-title {
+    font-size: 36px;
+    letter-spacing: 4px;
+  }
+
+  .logout-btn {
+    padding: 14px 28px;
+    font-size: 20px;
+    border-radius: 10px;
+    left: 40px;
+  }
+
+  .logout-btn i {
+    font-size: 22px;
+  }
+
+  .header-actions {
+    right: 40px;
+    gap: 20px;
+  }
+
+  .action-btn {
+    padding: 14px 24px;
+    font-size: 18px;
+    gap: 10px;
+    border-radius: 10px;
+  }
+
+  .action-btn i {
+    font-size: 20px;
+  }
+
+  .main-content {
+    padding: 0 40px;
+  }
+
+  .filter-section {
+    padding: 25px 30px;
+    margin-bottom: 25px;
+  }
+
+  .filter-label {
+    font-size: 20px;
+  }
+
+  .filter-input.dark-input {
+    width: 240px;
+    padding: 14px 18px;
+    font-size: 16px;
+  }
+
+  .search-btn,
+  .reset-btn {
+    padding: 14px 40px;
+    font-size: 18px;
+  }
+
+  .card-grid {
+    grid-template-columns: repeat(4, 1fr);
+    gap: 25px;
+  }
+
+  .card-index {
+    width: 42px;
+    height: 42px;
+    font-size: 18px;
+  }
+
+  .card-image {
+    margin: 18px;
+    width: calc(100% - 36px);
+  }
+
+  .card-info {
+    padding: 12px 18px 18px;
+  }
+
+  .info-row {
+    font-size: 16px;
+    margin-bottom: 8px;
+  }
+
+  .location-row {
+    margin-top: 6px;
+    padding-top: 6px;
+  }
+
+  .location-icon {
+    font-size: 14px;
+    margin-right: 8px;
+  }
+
+  .separator {
+    margin: 0 8px;
+  }
+
+  .image-placeholder {
+    font-size: 56px;
+  }
+
+  .selected-indicator {
+    width: 34px;
+    height: 34px;
+    font-size: 16px;
+    right: 12px;
+  }
+
+  .card-index {
+    width: 42px;
+    height: 42px;
+    font-size: 18px;
+    left: 12px;
+  }
+
+  .bottom-actions {
+    padding: 25px 40px;
+  }
+
+  .submit-btn {
+    padding: 22px 0;
+    font-size: 28px;
+    letter-spacing: 10px;
+    border-radius: 15px;
+  }
+
+  :deep(.dark-select .vs__dropdown-toggle) {
+    min-height: 48px;
+    padding: 8px 14px;
+  }
+
+  :deep(.dark-select .vs__dropdown-option) {
+    padding: 12px 18px;
+    font-size: 16px;
+  }
+
+  .filter-select {
+    width: 240px;
+  }
+
+  .loading-more {
+    padding: 30px 0;
+    font-size: 16px;
+  }
+
+  .loading-more-spinner {
+    width: 24px;
+    height: 24px;
+  }
+
+  .no-more-data {
+    padding: 20px 0;
+    font-size: 15px;
+  }
 }
 </style>