feat: 优化工作台样式并更新版本号

src/manifest.json

@@ -2,8 +2,8 @@
     "name" : "浩拓ERP",
     "appid" : "__UNI__F79F300",
     "description" : "浩拓ERP",
-    "versionName" : "1.1.5",
+    "versionName" : "1.1.6",
-    "versionCode" : 105,
+    "versionCode" : 106,
     "transformPx" : false,
     "app-plus" : {
         "optimization" : {

src/pages/sys/workbench/index.vue

@@ -1,37 +1,50 @@
 <template>
-  <view class="wrap">
+  <view class="workbench-page">
-    <common-navbar title="工作台" :showBack="false">
+    <common-navbar
+      title="应用中心"
+      :showBack="false"
+      backgroundColor="#f4f5e8"
+      :showShadow="false"
+    >
+      <template #left>
+        <text class="app-version">v{{ appVersion }}</text>
+      </template>
       <template #right>
-        <view class="scan_box">
+        <view class="settings-entry" @click="openSettings">
-          <u-icon name="scan" color="#333333" size="46" @click="handleScan"></u-icon>
+          <u-icon name="setting-fill" color="#242820" size="32"></u-icon>
+          <text class="settings-text">设置</text>
         </view>
       </template>
     </common-navbar>
-    <view v-for="group in visibleMenuGroups" :key="group.title">
+
-      <view class="workbench-title">{{ group.title }}</view>
+    <view class="menu-grid">
-      <view class="toolbar">
+      <view
-        <u-grid class="grid" :col="4" :border="false">
+        v-for="(item, index) in visibleMenuItems"
-          <u-grid-item
-            v-for="(item, index) in group.items"
         :key="item.router"
-            :index="index"
+        class="menu-card"
+        :class="`menu-card--${index % 6}`"
+        hover-class="menu-card--active"
         @click="navTo(item.url)"
       >
-            <view class="home-icon" :class="item.color">
+        <image class="card-background" :src="item.backgroundImage" mode="aspectFill"></image>
-              <i class="iconfont" :class="item.icon"></i>
+        <text class="card-mark">“</text>
+        <view class="card-content">
+          <view class="card-title">{{ item.name }}</view>
+          <view class="card-subtitle">{{ item.subtitle }}</view>
         </view>
-            <view class="grid-text">{{ item.name }}</view>
+        <view class="card-arrow">
-          </u-grid-item>
+          <u-icon name="arrow-right" color="#5b6257" size="22"></u-icon>
-        </u-grid>
         </view>
       </view>
-    <view v-if="!visibleMenuGroups.length" class="textCenter">暂无可用功能</view>
+      <view v-if="!visibleMenuItems.length" class="empty-state">暂无可用功能</view>
+    </view>
   </view>
 </template>
 <script>
 import CommonNavbar from "@/components/common-navbar/index";
 import scanMixin from '@/common/scanMixin.js';
 import { hasResourceRouter } from '@/common/userSession.js';
+import manifest from '@/manifest.json';
 /**
  * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
  */
@@ -56,6 +69,8 @@ export default {
           items: [
             {
               name: '成品配布',
+              subtitle: 'FINISHED GOODS',
+              backgroundImage: '/static/workbench/finished-goods.png',
               url: '/pages/saleship/salepickscan',
               router: 'CashCommodityClothOrder',
               icon: 'icon-hetongguanli',
@@ -68,6 +83,8 @@ export default {
           items: [
             {
               name: '加工进仓',
+              subtitle: 'PROCESSING IN',
+              backgroundImage: '/static/workbench/processing-in.png',
               url: '/pages/storegoods/storeGoodsProcessInList',
               router: 'FpProcessingEntryOrder',
               icon: 'icon-hetongguanli',
@@ -75,6 +92,8 @@ export default {
             },
             {
               name: '加工出仓',
+              subtitle: 'PROCESSING OUT',
+              backgroundImage: '/static/workbench/processing-out.png',
               url: '/pages/storegoods/storeGoodsProcessOutList',
               router: 'FpProcessingDeliverFromGodownOrder',
               icon: 'icon-hetongguanli',
@@ -82,6 +101,8 @@ export default {
             },
             {
               name: '加工退货进仓',
+              subtitle: 'RETURN ENTRY',
+              backgroundImage: '/static/workbench/return-entry.png',
               url: '/pages/storegoods/storeGoodsProcessReturnInList',
               router: 'FpProcessingReturnEntryOrder',
               icon: 'icon-hetongguanli',
@@ -89,6 +110,8 @@ export default {
             },
             {
               name: '采购进仓',
+              subtitle: 'PURCHASE ENTRY',
+              backgroundImage: '/static/workbench/purchase-entry.png',
               url: '/pages/storegoods/storeGoodsPurchaseInList',
               router: 'FinishPurchaseWarehouseEntry',
               icon: 'icon-hetongguanli',
@@ -106,11 +129,8 @@ export default {
   // onUnload, onHide, onShow 已由 scanMixin 自动处理
 
   computed: {
-    contentStyle() {
+    appVersion() {
-      const navHeight = getStatusBarHeight() + 44;
+      return manifest.versionName;
-      return {
-        height: `${navHeight}px`,
-      };
     },
     visibleMenuGroups() {
       return this.menuGroups
@@ -119,6 +139,11 @@ export default {
           items: group.items.filter((item) => hasResourceRouter(item.router))
         }))
         .filter((group) => group.items.length > 0);
+    },
+    visibleMenuItems() {
+      return this.visibleMenuGroups.reduce((items, group) => {
+        return items.concat(group.items);
+      }, []);
     }
   },
   methods: {
@@ -136,6 +161,11 @@ export default {
         url: url,
       });
     },
+    openSettings() {
+      uni.navigateTo({
+        url: '/pages/sys/user/setting'
+      });
+    },
     imgListClick(index) {
       console.log(`点击了第${index + 1}页图片`);
     },
@@ -205,63 +235,186 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "index.scss";
+page {
+  min-height: 100%;
+  background: #f4f5e8;
+}
 
-.scan_box {
+.workbench-page {
+  min-height: 100vh;
+  padding-bottom: 40rpx;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 220rpx),
+    #f4f5e8;
+}
+
+.workbench-page .navbar_left,
+.workbench-page .navbar_right {
+  min-width: 68px !important;
+}
+
+.workbench-page .navbar_center {
+  padding: 0 8px !important;
+}
+
+.app-version {
+  color: #444a40;
+  font-size: 24rpx;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.settings-entry {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  color: #242820;
+  font-size: 26rpx;
+  white-space: nowrap;
+}
+
+.settings-text {
+  margin-left: 8rpx;
+}
+
+.menu-grid {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 14rpx 19rpx 40rpx;
+}
+
+.menu-card {
+  position: relative;
+  box-sizing: border-box;
+  width: calc(50% - 30rpx);
+  height: 218rpx;
+  margin: 14rpx 15rpx;
+  overflow: hidden;
+  border-radius: 12rpx 28rpx 12rpx 28rpx;
+  color: #ffffff;
+  box-shadow: 0 12rpx 24rpx rgba(49, 58, 45, 0.14);
+  transition: transform 120ms ease, opacity 120ms ease;
+}
+
+.menu-card--active {
+  opacity: 0.88;
+  transform: scale(0.97);
+}
+
+.menu-card--0 {
+  background: linear-gradient(145deg, #ed4052, #cf263e);
+}
+
+.menu-card--1 {
+  background: linear-gradient(145deg, #1787f0, #1768d6);
+}
+
+.menu-card--2 {
+  background: linear-gradient(145deg, #6558eb, #4639c8);
+}
+
+.menu-card--3 {
+  background: linear-gradient(145deg, #ff6a2b, #ea3d19);
+}
+
+.menu-card--4 {
+  background: linear-gradient(145deg, #149de4, #1977d1);
+}
+
+.menu-card--5 {
+  background: linear-gradient(145deg, #20bea8, #0c9789);
+}
+
+.card-background {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.72;
+  pointer-events: none;
+}
+
+.card-mark {
+  position: absolute;
+  top: 10rpx;
+  left: 18rpx;
+  color: rgba(255, 255, 255, 0.2);
+  font-family: Georgia, serif;
+  font-size: 74rpx;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.card-content {
+  position: absolute;
+  z-index: 1;
+  right: 16rpx;
+  bottom: 42rpx;
+  left: 22rpx;
+}
+
+.card-title {
+  overflow: hidden;
+  font-size: 40rpx;
+  font-weight: 700;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-subtitle {
+  margin-top: 8rpx;
+  color: rgba(255, 255, 255, 0.76);
+  font-size: 22rpx;
+  font-weight: 500;
+  letter-spacing: 1rpx;
+  line-height: 1.2;
+}
+
+.card-arrow {
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  width: 48rpx;
+  height: 42rpx;
   align-items: center;
   justify-content: center;
-
+  border-radius: 8rpx 0 0 0;
-  .scan_text {
+  background: rgba(244, 245, 232, 0.94);
-    font-size: 12px;
-    color: #2979ff;
-  }
 }
 
-.banner-box {
+.empty-state {
-  padding: 0 2%;
-  width: 96%;
-  height: 170rpx;
-  margin: 30rpx 0 30rpx;
-}
-
-.u-swiper-wrap {
-  padding: 0 10px;
-}
-
-.banner-pic {
-  width: 47%;
-  float: left;
-  display: inline-block;
-  margin: 0 1.5%;
-}
-
-.banner-pic image {
   width: 100%;
-  height: 170rpx;
+  padding: 120rpx 0;
-  border-radius: 12rpx;
+  color: #7e8578;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+  font-size: 28rpx;
+  text-align: center;
 }
 
-.u-mode-light-info {
+@media screen and (max-width: 350px) {
-  background-color: #ffffff;
+  .menu-grid {
-  color: #666666;
+    padding-right: 15rpx;
-  border: 1px solid #e9ecf6;
+    padding-left: 15rpx;
-  font-size: 12px;
-  padding: 2px 8px;
-  position: relative;
-  top: -3px;
   }
 
-.workbench-title {
+  .menu-card {
-  font-size: 32rpx;
+    width: calc(50% - 22rpx);
-  font-weight: bold;
+    height: 206rpx;
-  color: #333333;
+    margin-right: 11rpx;
-  padding: 15px 30rpx;
+    margin-left: 11rpx;
   }
 
-.home-icon i.icon-tongzhi {
+  .card-title {
-  font-size: 22px;
+    font-size: 36rpx;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .menu-card {
+    transition: none;
+  }
 }
 </style>