init

src/views/main.vue

@@ -1,91 +1,146 @@
 <template>
   <div class="pda-container">
-    <!-- 状态栏 -->
-    <div class="status-bar">
-      <div style="font-size: 18px">{{username}}</div>
+    <!-- 头部栏 -->
+    <div class="header-bar">
+      <div class="header-left">
+        <span class="warehouse-name">WMS平面仓</span>
+        <i class="el-icon-arrow-down"></i>
+      </div>
       <div class="logout-button" @click="logoutHandle()">
         <i class="el-icon-close"></i>
-        <span class="logout-text">{{ $t('home.logout') }}</span>
+        <span>退出</span>
       </div>
-
     </div>
 
-    <!-- 功能菜单 -->
-    <div class="menu-grid">
-      <div
-        class="menu-item"
-        v-for="(btn, index) in buttons"
-        :key="index"
-        @click="$router.push(btn.to)"
-      >
-        <div class="menu-icon" :class="btn.iconClass">
-          <van-icon :name="btn.icon" size="24" />
+    <!-- 功能区域 -->
+    <div class="content-area">
+      <!-- 收货入库 -->
+      <div class="section">
+        <div class="section-header">
+          <span class="bullet">•</span>
+          <span class="section-title">收货入库</span>
+        </div>
+        <div class="button-grid">
+          <div class="menu-item" @click="$router.push('porecv')">
+            <div class="menu-icon purchase">
+              <van-icon name="shopping-cart-o" size="24" />
+            </div>
+            <div class="menu-text">采购入库</div>
+          </div>
+          <div class="menu-item" @click="$router.push('productionreturn')">
+            <div class="menu-icon production-return">
+              <van-icon name="revoke" size="24" />
+            </div>
+            <div class="menu-text">生产退仓</div>
+          </div>
+          <div class="menu-item" @click="$router.push('productionInbound')">
+            <div class="menu-icon production-inbound">
+              <van-icon name="cart" size="24" />
+            </div>
+            <div class="menu-text">生产入库</div>
+          </div>
+          <div class="menu-item" @click="$router.push('salereturn')">
+            <div class="menu-icon sales-return">
+              <van-icon name="revoke" size="24" />
+            </div>
+            <div class="menu-text">销售退货</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 拣货出库 -->
+      <div class="section">
+        <div class="section-header">
+          <span class="bullet">•</span>
+          <span class="section-title">拣货出库</span>
+        </div>
+        <div class="button-grid">
+          <div class="menu-item" @click="$router.push('poreturn')">
+            <div class="menu-icon purchase-return">
+              <van-icon name="shopping-cart-o" size="24" />
+            </div>
+            <div class="menu-text">采购退库</div>
+          </div>
+          <div class="menu-item" @click="$router.push('productionissue')">
+            <div class="menu-icon production-issue">
+              <van-icon name="send-gift-o" size="24" />
+            </div>
+            <div class="menu-text">生产领料</div>
+          </div>
+          <div class="menu-item" @click="$router.push('mrissue')">
+            <div class="menu-icon mr">
+              <van-icon name="orders-o" size="24" />
+            </div>
+            <div class="menu-text">MR发料</div>
+          </div>
+          <div class="menu-item" @click="$router.push('outsource')">
+            <div class="menu-icon outsourcing">
+              <van-icon name="logistics" size="24" />
+            </div>
+            <div class="menu-text">委外发料</div>
+          </div>
+        </div>
+        <div class="button-grid" style="margin-top: 8px;">
+          <div class="menu-item" @click="$router.push('saleshipping')">
+            <div class="menu-icon sales-delivery">
+              <van-icon name="logistics" size="24" />
+            </div>
+            <div class="menu-text">销售出库</div>
+          </div>
+          <div class="menu-item" @click="$router.push('transportation')">
+            <div class="menu-icon transport">
+              <van-icon name="guide-o" size="24" />
+            </div>
+            <div class="menu-text">运输任务</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 库内管理 -->
+      <div class="section">
+        <div class="section-header">
+          <span class="bullet">•</span>
+          <span class="section-title">库内管理</span>
+        </div>
+        <div class="button-grid">
+          <div class="menu-item" @click="$router.push('attributechange')">
+            <div class="menu-icon attribute">
+              <van-icon name="setting-o" size="24" />
+            </div>
+            <div class="menu-text">属性变动</div>
+          </div>
+          <div class="menu-item" @click="$router.push('stocktaking')">
+            <div class="menu-icon inventory">
+              <van-icon name="records" size="24" />
+            </div>
+            <div class="menu-text">库内盘点</div>
+          </div>
+          <div class="menu-item" @click="$router.push('otherinout')">
+            <div class="menu-icon other">
+              <van-icon name="exchange" size="24" />
+            </div>
+            <div class="menu-text">其他出入库</div>
+          </div>
+          <div class="menu-item" @click="$router.push('handlingunit')">
+            <div class="menu-icon hu">
+              <van-icon name="cluster-o" size="24" />
+            </div>
+            <div class="menu-text">单元管理</div>
+          </div>
         </div>
-        <div class="menu-text">{{ btn.label }}</div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import {searchSysLanguage} from "@/api/sysLanguage.js"
 export default {
   data() {
     return {
-      username: localStorage.getItem('userName'),
-      currentTime: new Date().toTimeString().substr(0, 5),
-      buttons: [
-        { 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' },
-      ]
+      username: localStorage.getItem('userName')
     }
   },
-  created() {
-    let menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]').filter(item => item.menuId != 999)
-    /*for (let i = 0; i < menuList.length; i++) {
-      this.buttons.push({
-        icon: menuList[i].icon,
-        label: menuList[i].name,
-        color: '#4CAF50',
-        to:menuList[i].url
-      })
-    }*/
-  },
-  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);
-    },
     // 退出
     logoutHandle() {
       this.$confirm('确定退出?', '提示', {
@@ -99,23 +154,17 @@ export default {
           data: this.$http.adornData()
         }).then(({data}) => {
           if (data && data.code === 0) {
-            //clearLoginInfo()
             this.$router.push({name: 'login'})
           }
         })
       }).catch(() => {
       })
-    },
+    }
   }
 }
 </script>
 
 <style>
-:root {
-  --columns: 4;
-  --button-size: calc(100vw / var(--columns) - 20px);
-}
-
 .pda-container {
   width: 100vw;
   height: 100vh;
@@ -123,86 +172,102 @@ export default {
   flex-direction: column;
   background: #f5f5f5;
   font-family: 'Arial', sans-serif;
-  overflow-y: auto;
 }
 
-.status-bar {
+/* 头部栏 */
+.header-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 20px;
+  padding: 8px 20px;
   background: #17B3A3;
+  color: white;
 }
 
-.el-dropdown-link {
-  color: #ffffff;
-  font-size: 15px;
+.header-left {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.header-left .el-icon-arrow-down {
+  margin-left: 8px;
+  font-size: 16px;
 }
 
 .logout-button {
-  background: linear-gradient(135deg, #fd5659, #ff9c91);
-  color: #fff;
-  font-size: 15px;
-  font-weight: bold;
-  padding: 2px 16px;
+  background: #ff4c52;
+  color: white;
+  padding: 8px 16px;
   border-radius: 20px;
   cursor: pointer;
-  box-shadow: 0 2px 6px rgba(255, 77, 79, 0.4);
-  transition: all 0.3s ease;
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  justify-content: center;
-  height: 34px; /* 保证可点击性 */
+  font-size: 14px;
+  font-weight: bold;
+  transition: all 0.3s ease;
 }
 
 .logout-button:hover {
-  background: linear-gradient(135deg, #ff7875, #ff9c91);
-  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.5);
+  background: #ff6b6b;
   transform: scale(1.05);
 }
 
 .logout-button i {
+  margin-right: 6px;
   font-size: 14px;
-  margin-right: 8px;
-  display: flex;
-  align-items: center;
 }
 
-.logout-text {
-  display: inline-block;
-  line-height: 1;
+/* 内容区域 */
+.content-area {
+  flex: 1;
+  padding: 10px;
+  overflow-y: auto;
+}
+
+/* 功能区域 */
+.section {
+  margin-bottom: 15px;
 }
 
-/* === 小屏优化 === */
-@media screen and (max-width: 480px) {
-  .logout-button {
-    font-size: 14px;
-    padding: 2px 12px;
-    border-radius: 16px;
-    height: 34px;
-  }
+.section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 9px;
+  padding: 6px 0;
+  border-bottom: 1.5px solid #17B3A3;
+}
 
-  .logout-button i {
-    font-size: 16px;
-    margin-right: 6px;
-  }
+.bullet {
+  color: #17B3A3;
+  font-size: 16px;
+  margin-right: 8px;
+  font-weight: bold;
 }
 
+.section-title {
+  color: #17B3A3;
+  font-size: 15px;
+  font-weight: bold;
+}
 
-.menu-grid {
+/* 按钮网格 */
+.button-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 15px;
-  padding: 20px;
+  grid-template-columns: repeat(4, 1fr) !important;
+  gap: 8px;
 }
 
+/* 菜单项 */
 .menu-item {
   background: white;
   border-radius: 12px;
-  padding: 20px 10px;
+  padding: 12px 6px;
   text-align: center;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s;
+  cursor: pointer;
 }
 
 .menu-item:active {
@@ -210,13 +275,13 @@ export default {
 }
 
 .menu-icon {
-  width: 50px;
-  height: 50px;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 0 auto 10px;
+  margin: 0 auto 6px;
   color: white;
 }
 
@@ -224,7 +289,19 @@ export default {
   background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
 }
 
-.menu-icon.hu {
+.menu-icon.production-return {
+  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
+}
+
+.menu-icon.production-inbound {
+  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
+}
+
+.menu-icon.sales-return {
+  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
+}
+
+.menu-icon.purchase-return {
   background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
 }
 
@@ -232,7 +309,7 @@ export default {
   background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
 }
 
-.menu-icon.production-inbound {
+.menu-icon.mr {
   background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
 }
 
@@ -244,33 +321,82 @@ export default {
   background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
 }
 
-.menu-icon.sales-return {
+.menu-icon.transport {
   background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
 }
 
-.menu-icon.other {
+.menu-icon.attribute {
   background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
 }
 
-.menu-icon.mr {
+.menu-icon.inventory {
   background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
 }
 
-.menu-icon.inventory {
+.menu-icon.other {
   background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
 }
 
-.menu-icon.transport {
+.menu-icon.hu {
   background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
 }
 
 .menu-text {
-  font-size: 13px;
+  font-size: 11px;
   color: #333;
-  font-weight: bold; /* 修改为加粗 */
+  font-weight: bold;
 }
 
-.el-message-box .el-button{
-  margin-left: 20px;
+/* 响应式设计 */
+@media screen and (max-width: 480px) {
+  .header-bar {
+    padding: 12px 15px;
+  }
+
+  .header-left {
+    font-size: 16px;
+  }
+
+  .logout-button {
+    padding: 6px 12px;
+    font-size: 13px;
+  }
+
+  .content-area {
+    padding: 8px;
+  }
+
+  .section-header {
+    padding: 6px 10px;
+  }
+
+  .section-title {
+    font-size: 13px;
+  }
+
+  .button-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+  }
+
+  .menu-item {
+    padding: 10px 4px;
+  }
+
+  .menu-text {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 481px) and (max-width: 767px) {
+  .button-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .button-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
 }
 </style>

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

@@ -74,10 +74,11 @@ export default {
 .menu-item {
   background: white;
   border-radius: 12px;
-  padding: 20px 10px;
+  padding: 12px 6px;
   text-align: center;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s;
+  cursor: pointer;
 }
 
 .menu-item:active {
@@ -85,13 +86,13 @@ export default {
 }
 
 .menu-icon {
-  width: 50px;
-  height: 50px;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 0 auto 10px;
+  margin: 0 auto 6px;
   color: white;
 }
 
@@ -108,7 +109,7 @@ export default {
 }
 
 .menu-text {
-  font-size: 13px;
+  font-size: 11px;
   color: #333;
   font-weight: bold; /* 加粗字体 */
   white-space: nowrap; /* 防止文字换行 */

src/views/modules/sales-return/index.vue

@@ -75,10 +75,11 @@ export default {
 .menu-item {
   background: white;
   border-radius: 12px;
-  padding: 20px 10px;
+  padding: 12px 6px;
   text-align: center;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s;
+  cursor: pointer;
 }
 
 .menu-item:active {
@@ -86,13 +87,13 @@ export default {
 }
 
 .menu-icon {
-  width: 50px;
-  height: 50px;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 0 auto 10px;
+  margin: 0 auto 6px;
   color: white;
 }
 
@@ -109,7 +110,7 @@ export default {
 }
 
 .menu-text {
-  font-size: 13px;
+  font-size: 11px;
   color: #333;
   font-weight: bold; /* 加粗字体 */
   white-space: nowrap; /* 防止文字换行 */