Kaynağa Gözat

修改料箱上架风格

ZhangJunQuan 6 ay önce
ebeveyn
işleme
990f4a1cfc

+ 59 - 108
src/box/FeedingArea.vue

@@ -828,7 +828,7 @@ onUnmounted(() => {
   width: 100vw;
   height: 100vh;
   position: relative;
-  background: #0a0e27;
+  background: #041c3d;
   font-family: 'Microsoft YaHei', Arial, sans-serif;
   overflow: hidden;
   display: flex;
@@ -872,8 +872,8 @@ onUnmounted(() => {
   height: 100%;
   background: radial-gradient(ellipse at center,
       rgba(0, 100, 200, 0.2) 0%,
-      rgba(10, 14, 39, 0.8) 50%,
-      #0a0e27 100%);
+      rgba(9, 45, 82, 0.8) 50%,
+      #041c3d 100%);
 }
 
 .tech-particles {
@@ -885,13 +885,13 @@ onUnmounted(() => {
 
 .particle {
   position: absolute;
-  background: rgba(0, 255, 255, 0.8);
+  background: rgba(30, 144, 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);
+    0 0 10px rgba(30, 144, 255, 0.8),
+    0 0 20px rgba(0, 191, 255, 0.6);
 }
 
 @keyframes particleFloat {
@@ -923,9 +923,10 @@ onUnmounted(() => {
   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);
+  background: rgba(9, 45, 82, 0.9);
+  border-bottom: 1px solid rgba(30, 144, 255, 0.3);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 4px 20px rgba(30, 144, 255, 0.2);
 }
 
 .header-left {
@@ -938,34 +939,24 @@ onUnmounted(() => {
 .logo-box {
   width: 50px;
   height: 50px;
-  background: linear-gradient(135deg, #00ff88 0%, #0099ff 100%);
-  border-radius: 8px;
+  background: linear-gradient(135deg, rgba(30, 144, 255, 0.3), rgba(0, 191, 255, 0.3));
+  border: 1px solid rgba(30, 144, 255, 0.5);
+  border-radius: 10px;
   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;
+  font-size: 24px;
+  color: #00bfff;
+  box-shadow: 0 0 20px rgba(30, 144, 255, 0.2);
 }
 
-@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-size: 24px;
   font-weight: bold;
-  color: #00ff88;
-  text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
+  color: #fff;
+  text-shadow: 0 0 10px rgba(30, 144, 255, 0.5);
   letter-spacing: 2px;
 }
 
@@ -976,11 +967,11 @@ onUnmounted(() => {
 }
 
 .system-title {
-  font-size: 48px;
+  font-size: 32px;
   font-weight: bold;
   color: #fff;
-  text-shadow: 0 0 20px rgba(0, 153, 255, 0.8);
-  letter-spacing: 8px;
+  text-shadow: 0 0 15px rgba(30, 144, 255, 0.7);
+  letter-spacing: 3px;
 }
 
 .header-right {
@@ -990,14 +981,14 @@ onUnmounted(() => {
 }
 
 .date-display {
-  font-size: 24px;
-  color: #00ffff;
+  font-size: 14px;
+  color: #7ec8ff;
   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);
+  padding: 6px 12px;
+  background: rgba(30, 144, 255, 0.2);
+  border: 1px solid rgba(30, 144, 255, 0.3);
+  border-radius: 20px;
+  box-shadow: inset 0 0 10px rgba(30, 144, 255, 0.2);
 }
 
 /* ========== 主内容区域 ========== */
@@ -1095,115 +1086,75 @@ onUnmounted(() => {
 .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;
+  background: linear-gradient(135deg, rgba(9, 45, 82, 0.8) 0%, rgba(5, 30, 60, 0.8) 100%);
+  border-radius: 16px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 30px;
-  backdrop-filter: blur(15px);
+  gap: 40px;
+  backdrop-filter: blur(10px);
   overflow: hidden;
-  box-shadow: inset 0 0 50px rgba(0, 255, 255, 0.1), 0 15px 50px rgba(0, 0, 0, 0.6);
+  box-shadow: inset 0 0 50px rgba(30, 144, 255, 0.1), 0 15px 50px rgba(0, 0, 0, 0.6);
 }
 
 .card-icon {
-  width: 130px;
-  height: 130px;
+  width: 120px;
+  height: 120px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 80px;
+  font-size: 60px;
   color: #fff;
-  border: 4px solid;
-  transition: all 0.4s ease;
-  animation: iconPulse 2s ease-in-out infinite;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
+  position: relative;
+  overflow: hidden;
+  border: none;
 }
 
 .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);
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8));
+  border: 2px solid rgba(59, 130, 246, 0.6);
+  box-shadow: 0 0 30px rgba(59, 130, 246, 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);
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.8), rgba(52, 211, 153, 0.8));
+  border: 2px solid rgba(16, 185, 129, 0.6);
+  box-shadow: 0 0 30px rgba(16, 185, 129, 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);
+  background: linear-gradient(135deg, rgba(249, 115, 22, 0.8), rgba(234, 88, 12, 0.8));
+  border: 2px solid rgba(249, 115, 22, 0.6);
+  box-shadow: 0 0 30px rgba(249, 115, 22, 0.3);
 }
 
 .card-icon.purple {
-  background: linear-gradient(135deg, rgba(153, 51, 255, 0.3), rgba(102, 0, 204, 0.3));
-  border-color: rgba(153, 51, 255, 0.8);
-  box-shadow: 0 0 50px rgba(153, 51, 255, 1), inset 0 0 30px rgba(153, 51, 255, 0.3);
+  background: linear-gradient(135deg, rgba(168, 85, 247, 0.8), rgba(147, 51, 234, 0.8));
+  border: 2px solid rgba(168, 85, 247, 0.6);
+  box-shadow: 0 0 30px rgba(168, 85, 247, 0.3);
 }
 
 .card-icon.red {
-  background: linear-gradient(135deg, rgba(255, 71, 87, 0.3), rgba(220, 20, 60, 0.3));
-  border-color: rgba(255, 71, 87, 0.8);
-  box-shadow: 0 0 50px rgba(255, 71, 87, 1), inset 0 0 30px rgba(255, 71, 87, 0.3);
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.8));
+  border: 2px solid rgba(239, 68, 68, 0.6);
+  box-shadow: 0 0 30px rgba(239, 68, 68, 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-size: 28px;
   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;
+  text-shadow: 0 0 10px rgba(30, 144, 255, 0.5);
+  letter-spacing: 1px;
 }
 
-.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;

+ 10 - 0
src/login/UserHome.vue

@@ -33,6 +33,10 @@
               <i class="fas fa-box mr-2" />
               <span>还料区管理</span>
             </div>
+            <div class="dropdown-item" @click="goDeliveryManagement">
+              <i class="fas fa-box mr-2" />
+              <span>送料区管理</span>
+            </div>
             <div v-if="isOut" class="dropdown-item" @click="toggleMenu">
               <i class="fas fa-bars-staggered" />
               <span>内侧菜单</span>
@@ -309,6 +313,12 @@ const goReturnManagement = () => {
     router.push('/return-management');
 };
 
+// 跳转到送料区管理页面
+const goDeliveryManagement = () => {
+    showSettings.value = false;
+    router.push('/delivery-management');
+};
+
 // 切换菜单
 const toggleMenu = () => {
     isOut.value = !isOut.value;

+ 1 - 1
src/stock-out/AgvRfidRecognition.vue

@@ -15,7 +15,7 @@
       <div class="header-actions">
         <button class="action-btn refresh-btn" @click="getAgvRfidLog">
           <i class="fas fa-sync-alt" />
-          <span>重新校验</span>
+          <span>刷新</span>
         </button>
       </div>
     </div>