init

src/views/main.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div class="pda-container">
     <!-- 状态栏 -->
@@ -13,28 +12,21 @@
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
-      <div class="network" style="color: red;font-size: 15px" @click="logoutHandle()">{{ $t('home.logout') }}</div>
+      <div class="logout-button" @click="logoutHandle()">{{ $t('home.logout') }}</div>
     </div>
 
-    <!-- 可滚动按钮区 -->
-    <div class="button-scroll-container">
-      <div class="button-grid">
-        <button
+    <!-- 功能菜单 -->
+    <div class="menu-grid">
+      <div
+        class="menu-item"
         v-for="(btn, index) in buttons"
         :key="index"
-          class="pda-button"
-          :style="{
-            'background': btn.color,
-            'transform': activeIndex === index ? 'scale(0.95)' : 'none'
-          }"
-          @touchstart.passive="setActive(index)"
-          @touchend.passive="clearActive()"
-          @touchcancel.passive="clearActive()">
-          <router-link class="pda-button" :to="btn.to">
-            <span class="button-icon">{{ btn.icon }}</span>
-            <span class="button-label">{{ btn.label }}</span>
-          </router-link>
-        </button>
+        @click="$router.push(btn.to)"
+      >
+        <div class="menu-icon" :class="btn.iconClass">
+          <van-icon :name="btn.icon" size="24" />
+        </div>
+        <div class="menu-text">{{ btn.label }}</div>
       </div>
     </div>
   </div>
@@ -47,19 +39,18 @@ export default {
     return {
       languageList: [{languageName: '中文', languageCode: 'zh'}, {languageName: '英文', languageCode: 'en'}],
       currentTime: new Date().toTimeString().substr(0, 5),
-      activeIndex: null,
       buttons: [
-        { icon: '📦', label: this.$t('home.stockIn'), color: '#4CAF50', action: 'stockIn',to:'porecv' },
-        { icon: '📦', label: '生产发料', color: '#8BC34A', action: 'stockIn',to:'productionissue' },
-        { icon: '📥', label: '生产入库', color: '#2196F3', action: 'stockIn',to:'productionInbound' },
-        { icon: '🏷️', label: '单元管理', color: '#0097A7', action: 'stockOut',to:'handlingunit' },
-        { icon: '📤', label: '委外发料', color: '#8BC34A', action: 'stockIn',to:'outsource' },
-        { icon: '🚚', label: '销售发货', color: '#2196F3', action: 'stockOut',to:'saleshipping' },
-        { icon: '↩️', label: '销售退货', color: '#FF9800', action: 'transfer' ,to:'salereturn' },
-        { icon: '↔️', label: '其他出入库', color: '#607D8B', action: 'stockIn',to:'otherinout' },
-        { icon: '🚚', label: 'MR发料', color: '#2196F3', action: 'stockIn',to:'mrissue' },
-        { icon: '📋', label: '盘点', color: '#2196F3', action: 'inventory' ,to:'stocktaking' },
-        { icon: '🚚', label: '运输任务', color: '#3F51B5', action: 'label' ,to:'transportation' },
+        { icon: 'shopping-cart-o', label: this.$t('home.stockIn'), iconClass: 'purchase', to: 'porecv' },
+        { icon: 'send-gift-o', label: '生产发料', iconClass: 'production-issue', to: 'productionissue' },
+        { icon: 'cart', label: '生产入库', iconClass: 'production-inbound', to: 'productionInbound' },
+        { icon: 'cluster-o', label: '单元管理', iconClass: 'hu', to: 'handlingunit' },
+        { icon: 'logistics', label: '委外发料', iconClass: 'outsourcing', to: 'outsource' },
+        { icon: 'logistics', label: '销售发货', iconClass: 'sales-delivery', to: 'saleshipping' },
+        { icon: 'revoke', label: '销售退货', iconClass: 'sales-return', to: 'salereturn' },
+        { icon: 'exchange', label: '其他出入库', iconClass: 'other', to: 'otherinout' },
+        { icon: 'orders-o', label: 'MR发料', iconClass: 'mr', to: 'mrissue' },
+        { icon: 'records', label: '盘点', iconClass: 'inventory', to: 'stocktaking' },
+        { icon: 'guide-o', label: '运输任务', iconClass: 'transport', to: 'transportation' },
       ]
     }
   },
@@ -112,12 +103,6 @@ export default {
     handleClick(action) {
       console.log('执行操作:', action);
     },
-    setActive(index) {
-      this.activeIndex = index;
-    },
-    clearActive() {
-      this.activeIndex = null;
-    },
     // 退出
     logoutHandle() {
       this.$confirm('确定退出?', '提示', {
@@ -158,21 +143,113 @@ export default {
   overflow: auto;
 }
 
-.button-scroll-container {
-  flex: 1;
-  overflow-y: auto;
-  padding: 10px;
-  -webkit-overflow-scrolling: touch;
+.status-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+  background: #17B3A3;
+}
+
+.el-dropdown-link {
+  color: #ffffff;
+  font-size: 15px;
+}
+
+.logout-button {
+  color: #ffffff;
+  font-size: 15px;
+  padding: 5px 10px;
+  background: #ff4d4f;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.logout-button:hover {
+  background: #ff7875;
 }
 
-.button-grid {
+.menu-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--button-size), 1fr));
-  gap: 14px;
-  padding-bottom: 20px;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+  padding: 20px;
+}
+
+.menu-item {
+  background: white;
+  border-radius: 12px;
+  padding: 20px 10px;
+  text-align: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s;
+}
+
+.menu-item:active {
+  transform: scale(0.95);
+}
+
+.menu-icon {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 10px;
+  color: white;
+}
+
+.menu-icon.purchase {
+  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
 }
 
+.menu-icon.hu {
+  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
+}
+
+.menu-icon.production-issue {
+  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
+}
+
+.menu-icon.production-inbound {
+  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
+}
+
+.menu-icon.outsourcing {
+  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
+}
+
+.menu-icon.sales-delivery {
+  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
+}
+
+.menu-icon.sales-return {
+  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
+}
+
+.menu-icon.other {
+  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
+}
+
+.menu-icon.mr {
+  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
+}
 
+.menu-icon.inventory {
+  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
+}
+
+.menu-icon.transport {
+  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
+}
+
+.menu-text {
+  font-size: 13px;
+  color: #333;
+  font-weight: bold; /* 修改为加粗 */
+}
 
 .el-message-box .el-button{
   margin-left: 20px;

src/views/modules/recv/po-recv.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div class="pda-container">
     <!-- 状态栏 -->
@@ -8,26 +7,18 @@
       <div class="network" style="color: #fff" @click="$router.push({path: '/'})">🏠首页</div>
     </div>
 
-    <!-- 可滚动按钮区 -->
-    <div class="button-scroll-container">
-      <div class="button-grid">
-        <button
+    <!-- 功能菜单 -->
+    <div class="menu-grid">
+      <div
+        class="menu-item"
         v-for="(btn, index) in buttons"
         :key="index"
-          class="pda-button"
-          :style="{
-            'background': btn.color,
-            'transform': activeIndex === index ? 'scale(0.95)' : 'none'
-          }"
-          @touchstart.passive="setActive(index)"
-          @touchend.passive="clearActive()"
-          @touchcancel.passive="clearActive()">
-          <router-link class="pda-button" :style="{
-            'background': ';#4CAF50',}" :to="btn.to">
-            <span class="button-icon">{{ btn.icon }}</span>
-            <span class="button-label">{{ btn.label }}</span>
-          </router-link>
-        </button>
+        @click="$router.push(btn.to)"
+      >
+        <div class="menu-icon" :class="btn.iconClass">
+          <van-icon :name="btn.icon" size="24" />
+        </div>
+        <div class="menu-text">{{ btn.label }}</div>
       </div>
     </div>
   </div>
@@ -37,54 +28,20 @@
 export default {
   data() {
     return {
-      currentTime: new Date().toTimeString().substr(0, 5),
-      activeIndex: null,
       buttons: [
-        { icon: '📦', label: '采购订单接收', color: '#FF9800', action: 'stockIn',to:'recv' },
-        { icon: '📄', label: '登记检验结果', color: '#2196F3', action: 'stockOut',to:'inspectionResults' },
-        { icon: '✅', label: '检验合格入库', color: '#4CAF50', action: 'search' ,to:'qualifiedStorage' },
+        { icon: 'shopping-cart-o', label: '采购订单接收', iconClass: 'purchase', to: 'recv' },
+        { icon: 'orders-o', label: '登记检验结果', iconClass: 'inspection', to: 'inspectionResults' },
+        { icon: 'passed', label: '检验合格入库', iconClass: 'qualified', to: 'qualifiedStorage' },
       ]
     }
-  },
-  mounted() {
-    this.updateTime();
-    window.addEventListener('resize', this.adjustLayout);
-    this.$nextTick(this.adjustLayout);
-  },
-  beforeDestroy() {
-    clearInterval(this.timeInterval);
-    window.removeEventListener('resize', this.adjustLayout);
-  },
-  methods: {
-    updateTime() {
-      this.timeInterval = setInterval(() => {
-        this.currentTime = new Date().toTimeString().substr(0, 5);
-      }, 60000);
-    },
-    adjustLayout() {
-      const container = document.querySelector('.button-grid');
-      if (container) {
-        const width = container.clientWidth;
-        const columns = Math.max(3, Math.floor(width / 120));
-        document.documentElement.style.setProperty('--columns', columns);
-      }
-    },
-    handleClick(action) {
-      console.log('执行操作:', action);
-    },
-    setActive(index) {
-      this.activeIndex = index;
-    },
-    clearActive() {
-      this.activeIndex = null;
-    },
   }
 }
 </script>
 
 <style>
+/* filepath: D:\xjcode\wms-pda\src\views\modules\recv\po-recv.vue */
 :root {
-  --columns: 4;
+  --columns: 3;
   --button-size: calc(100vw / var(--columns) - 20px);
 }
 
@@ -95,22 +52,69 @@ export default {
   flex-direction: column;
   background: #f5f5f5;
   font-family: 'Arial', sans-serif;
-  overflow: hidden;
+  overflow: auto;
 }
 
-
-.button-scroll-container {
-  flex: 1;
-  overflow-y: auto;
-  padding: 10px;
-  -webkit-overflow-scrolling: touch;
+.status-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+  background: #17B3A3;
 }
 
-.button-grid {
+.menu-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--button-size), 1fr));
-  gap: 14px;
-  padding-bottom: 20px;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+  padding: 20px;
+  justify-content: center; /* 水平居中 */
+  align-content: center; /* 垂直居中 */
+  width: 100%; /* 确保占满容器宽度 */
 }
 
+.menu-item {
+  background: white;
+  border-radius: 12px;
+  padding: 20px 10px;
+  text-align: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s;
+}
+
+.menu-item:active {
+  transform: scale(0.95);
+}
+
+.menu-icon {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 10px;
+  color: white;
+}
+
+.menu-icon.purchase {
+  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
+}
+
+.menu-icon.inspection {
+  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
+}
+
+.menu-icon.qualified {
+  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
+}
+
+.menu-text {
+  font-size: 13px;
+  color: #333;
+  font-weight: bold; /* 加粗字体 */
+  white-space: nowrap; /* 防止文字换行 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>