进销存升级app 1.工作台图标替换

gaoluyang

11 小时以前 c899675f6cd2303dc802ee7d04d4bf5dc903ac02

 src/pages/works.vue

@@ -51,11 +51,8 @@
          <up-grid-item v-for="(item, index) in marketingItems"
                        :key="index"
                        @click="handleCommonItemClick(item)">
            <view class="icon-container"
                  :style="{ background: item.bgColor }">
              <up-icon :name="item.icon"
                       :size="58"
                       color="#ffffff"></up-icon>
            <view class="icon-container">
              <image :src="item.icon" class="item-icon"></image>
            </view>
            <text class="item-label">{{item.label}}</text>
          </up-grid-item>
@@ -76,11 +73,8 @@
          <up-grid-item v-for="(item, index) in purchaseItems"
                        :key="index"
                        @click="handleCommonItemClick(item)">
            <view class="icon-container"
                  :style="{ background: item.bgColor }">
              <up-icon :name="item.icon"
                       :size="58"
                       color="#ffffff"></up-icon>
            <view class="icon-container">
              <image :src="item.icon" class="item-icon"></image>
            </view>
            <text class="item-label">{{item.label}}</text>
          </up-grid-item>
@@ -101,11 +95,8 @@
          <up-grid-item v-for="(item, index) in collaborationItems"
                        :key="index"
                        @click="handleCommonItemClick(item)">
            <view class="icon-container"
                  :style="{ background: item.bgColor }">
              <up-icon :name="item.icon"
                       :size="58"
                       color="#ffffff"></up-icon>
            <view class="icon-container">
              <image :src="item.icon" class="item-icon"></image>
            </view>
            <text class="item-label">{{item.label}}</text>
          </up-grid-item>
@@ -126,11 +117,8 @@
          <up-grid-item v-for="(item, index) in safetyItems"
                        :key="index"
                        @click="handleCommonItemClick(item)">
            <view class="icon-container"
                  :style="{ background: item.bgColor }">
              <up-icon :name="item.icon"
                       :size="58"
                       color="#ffffff"></up-icon>
            <view class="icon-container">
              <image :src="item.icon" class="item-icon"></image>
            </view>
            <text class="item-label">{{item.label}}</text>
          </up-grid-item>
@@ -151,11 +139,8 @@
          <up-grid-item v-for="(item, index) in qualityItems"
                        :key="index"
                        @click="handleCommonItemClick(item)">
            <view class="icon-container"
                  :style="{ background: item.bgColor }">
              <up-icon :name="item.icon"
                       :size="58"
                       color="#ffffff"></up-icon>
            <view class="icon-container">
              <image :src="item.icon" class="item-icon"></image>
            </view>
            <text class="item-label">{{item.label}}</text>
          </up-grid-item>
@@ -176,11 +161,8 @@
          <up-grid-item v-for="(item, index) in humanResourcesItems"
                        :key="index"
                        @click="handleCommonItemClick(item)">
            <view class="icon-container"
                  :style="{ background: item.bgColor }">
              <up-icon :name="item.icon"
                       :size="58"
                       color="#ffffff"></up-icon>
            <view class="icon-container">
              <image :src="item.icon" class="item-icon"></image>
            </view>
            <text class="item-label">{{item.label}}</text>
          </up-grid-item>
@@ -201,11 +183,8 @@
          <up-grid-item v-for="(item, index) in productionItems"
                        :key="index"
                        @click="handleCommonItemClick(item)">
            <view class="icon-container"
                  :style="{ background: item.bgColor }">
              <up-icon :name="item.icon"
                       :size="58"
                       color="#ffffff"></up-icon>
            <view class="icon-container">
              <image :src="item.icon" class="item-icon"></image>
            </view>
            <text class="item-label">{{item.label}}</text>
          </up-grid-item>
@@ -226,11 +205,8 @@
          <up-grid-item v-for="(item, index) in equipmentItems"
                        :key="index"
                        @click="handleCommonItemClick(item)">
            <view class="icon-container"
                  :style="{ background: item.bgColor }">
              <up-icon :name="item.icon"
                       :size="58"
                       color="#ffffff"></up-icon>
            <view class="icon-container">
              <image :src="item.icon" class="item-icon"></image>
            </view>
            <text class="item-label">{{item.label}}</text>
          </up-grid-item>
@@ -273,27 +249,27 @@
  // 营销管理功能数据
  const marketingItems = reactive([
    {
      icon: "/static/images/icon/xiaoshoutaizhang@2x.png",
      icon: "/static/images/icon/xiaoshoutaizhang.svg",
      label: "销售台账",
    },
    {
      icon: "/static/images/icon/kaipiaodengji@2x.png",
      icon: "/static/images/icon/kaipiaodengji.svg",
      label: "开票登记",
    },
    {
      icon: "/static/images/icon/kaipiaotaizhang@2x.png",
      icon: "/static/images/icon/kaipiaotaizhang.svg",
      label: "开票台账",
    },
    {
      icon: "/static/images/icon/huikuandengji@2x.png",
      icon: "/static/images/icon/huikuandengji.svg",
      label: "回款登记",
    },
    {
      icon: "/static/images/icon/huikuanliushui@2x.png",
      icon: "/static/images/icon/huikuanliushui.svg",
      label: "回款流水",
    },
    {
      icon: "/static/images/icon/kehuwanglai@2x.png",
      icon: "/static/images/icon/kehuwanglai.svg",
      label: "客户往来",
    },
  ]);
@@ -301,120 +277,120 @@
  // 采购管理功能数据
  const purchaseItems = reactive([
    {
      icon: "/static/images/icon/caigoutaizhang@2x.png",
      icon: "/static/images/icon/caigoutaizhang.svg",
      label: "采购台账",
    },
    {
      icon: "/static/images/icon/laipiaodengji@2x.png",
      icon: "/static/images/icon/laipiaodengji.svg",
      label: "来票登记",
    },
    {
      icon: "/static/images/icon/laipiaotaizhang@2x.png",
      icon: "/static/images/icon/laipiaotaizhang.svg",
      label: "来票台账",
    },
    {
      icon: "/static/images/icon/fukuanjingji@2x.png",
      icon: "/static/images/icon/fukuanjingji.svg",
      label: "付款登记",
    },
    {
      icon: "/static/images/icon/fukuanliushui@2x.png",
      icon: "/static/images/icon/fukuanliushui.svg",
      label: "付款流水",
    },
    {
      icon: "/static/images/icon/gongyingshangwanglai@2x.png",
      icon: "/static/images/icon/gongyingshangwanglai.svg",
      label: "供应商往来",
    },
  ]);
  const humanResourcesItems = reactive([
    {
      icon: "/static/images/icon/caigoutaizhang@2x.png",
      icon: "/static/images/icon/caigoutaizhang.svg",
      label: "打卡签到",
    },
    {
      icon: "/static/images/icon/caigoutaizhang@2x.png",
      icon: "/static/images/icon/caigoutaizhang.svg",
      label: "人员薪资",
    },
    {
      icon: "/static/images/icon/caigoutaizhang@2x.png",
      icon: "/static/images/icon/caigoutaizhang.svg",
      label: "合同管理",
    },
  ]);
  const qualityItems = reactive([
    {
      icon: "/static/images/icon/caigoutaizhang@2x.png",
      icon: "/static/images/icon/caigoutaizhang.svg",
      label: "原材料检验",
    },
    {
      icon: "/static/images/icon/caigoutaizhang@2x.png",
      icon: "/static/images/icon/caigoutaizhang.svg",
      label: "过程检验",
    },
    {
      icon: "/static/images/icon/caigoutaizhang@2x.png",
      icon: "/static/images/icon/caigoutaizhang.svg",
      label: "出厂检验",
    },
  ]);
  const safetyItems = reactive([
    {
      icon: "/static/images/icon/caigoutaizhang@2x.png",
      icon: "/static/images/icon/caigoutaizhang.svg",
      label: "规程与资质",
    },
    {
      icon: "/static/images/icon/caigoutaizhang@2x.png",
      icon: "/static/images/icon/caigoutaizhang.svg",
      label: "危险源台账",
    },
    {
      icon: "/static/images/icon/caigoutaizhang@2x.png",
      icon: "/static/images/icon/caigoutaizhang.svg",
      label: "危险作业审批",
    },
    {
      icon: "/static/images/icon/guzhangfenxi@2x.png",
      icon: "/static/images/icon/guzhangfenxi@2x.svg",
      label: "隐患排查上报",
    },
    {
      icon: "/static/images/icon/guzhangfenxi@2x.png",
      icon: "/static/images/icon/guzhangfenxi@2x.svg",
      label: "危险物料管控",
    },
    {
      icon: "/static/images/icon/guzhangfenxi@2x.png",
      icon: "/static/images/icon/guzhangfenxi@2x.svg",
      label: "应急预案查阅",
    },
    {
      icon: "/static/images/icon/guzhangfenxi@2x.png",
      icon: "/static/images/icon/guzhangfenxi@2x.svg",
      label: "事故上报记录",
    },
    {
      icon: "/static/images/icon/guzhangfenxi@2x.png",
      icon: "/static/images/icon/guzhangfenxi@2x.svg",
      label: "安全培训考核",
    },
  ]);
  // 协同办公功能数据
  const collaborationItems = reactive([
    {
      icon: "/static/images/icon/baoxiaoguanli.png",
      icon: "/static/images/icon/baoxiaoguanli.svg",
      label: "协同审批",
    },
    {
      icon: "/static/images/icon/huiyiliebiao@2x.png",
      icon: "/static/images/icon/huiyiliebiao@2x.svg",
      label: "会议管理",
    },
    {
      icon: "/static/images/icon/tongzhigonggao@2x.png",
      icon: "/static/images/icon/tongzhigonggao@2x.svg",
      label: "通知公告",
    },
    {
      icon: "/static/images/icon/zhishiku@2x.png",
      icon: "/static/images/icon/zhishiku@2x.svg",
      label: "知识库",
    },
    {
      icon: "/static/images/icon/yongyinguanli@2x.png",
      icon: "/static/images/icon/yongyinguanli@2x.svg",
      label: "用印管理",
    },
    {
      icon: "/static/images/icon/guizhangzhidu@2x.png",
      icon: "/static/images/icon/guizhangzhidu@2x.svg",
      label: "规章制度",
    },
    {
      icon: "/static/images/icon/kehubaifang@2x.png",
      icon: "/static/images/icon/kehubaifang@2x.svg",
      label: "客户拜访",
    },
  ]);
@@ -422,52 +398,47 @@
  // 生产管控功能数据
  const productionItems = reactive([
    // {
    //   icon: "/static/images/icon/shengchandingdan@2x.png",
    //   icon: "/static/images/icon/shengchandingdan@2x.svg",
    //   label: "生产订单",
    //   bgColor: "#FF9800",
    // },
    // {
    //   icon: "/static/images/icon/shengchanpaigong@2x.png",
    //   icon: "/static/images/icon/shengchanpaigong@2x.svg",
    //   label: "生产派工",
    //   bgColor: "#FF6B35",
    // },
    // {
    //   icon: "/static/images/icon/shengchanpaichan@2x.png",
    //   icon: "/static/images/icon/shengchanpaichan@2x.svg",
    //   label: "工序排产",
    //   bgColor: "#E91E63",
    // },
    {
      icon: "/static/images/icon/shengchanbaogong@2x.png",
      icon: "/static/images/icon/shengchanbaogong@2x.svg",
      label: "生产报工",
      bgColor: "#673AB7",
    },
    // {
    //   icon: "/static/images/icon/shengchanhesuan@2x.png",
    //   icon: "/static/images/icon/shengchanhesuan@2x.svg",
    //   label: "生产核算",
    //   bgColor: "#3F51B5",
    // },
  ]);

  // 设备管理功能数据
  const equipmentItems = reactive([
    // {
    //    icon: '/static/images/icon/shebeitaizhang@2x.png',
    //    icon: '/static/images/icon/shebeitaizhang@2x.svg',
    //    label: '设备台账',
    // },
    {
      icon: "/static/images/icon/shbeibaoxiu@2x.png",
      icon: "/static/images/icon/shbeibaoxiu@2x.svg",
      label: "运行管理",
    },
    {
      icon: "/static/images/icon/shbeibaoxiu@2x.png",
      icon: "/static/images/icon/shbeibaoxiu@2x.svg",
      label: "设备报修",
    },
    {
      icon: "/static/images/icon/shbeibaoyang@2x.png",
      icon: "/static/images/icon/shbeibaoyang@2x.svg",
      label: "设备保养",
    },
    {
      icon: "/static/images/icon/xunjianshangchuan@2x.png",
      icon: "/static/images/icon/xunjianshangchuan@2x.svg",
      label: "设备巡检",
    },
  ]);
@@ -967,12 +938,12 @@

    // 过滤营销管理菜单
    const originalMarketing = [
      { icon: "/static/images/icon/xiaoshoutaizhang@2x.png", label: "销售台账" },
      { icon: "/static/images/icon/kaipiaodengji@2x.png", label: "开票登记" },
      { icon: "/static/images/icon/kaipiaotaizhang@2x.png", label: "开票台账" },
      { icon: "/static/images/icon/huikuandengji@2x.png", label: "回款登记" },
      { icon: "/static/images/icon/huikuanliushui@2x.png", label: "回款流水" },
      { icon: "/static/images/icon/kehuwanglai@2x.png", label: "客户往来" },
      { icon: "/static/images/icon/xiaoshoutaizhang.svg", label: "销售台账" },
      { icon: "/static/images/icon/kaipiaodengji.svg", label: "开票登记" },
      { icon: "/static/images/icon/kaipiaotaizhang.svg", label: "开票台账" },
      { icon: "/static/images/icon/huikuandengji.svg", label: "回款登记" },
      { icon: "/static/images/icon/huikuanliushui.svg", label: "回款流水" },
      { icon: "/static/images/icon/kehuwanglai.svg", label: "客户往来" },
    ];
    const filteredMarketing = originalMarketing.filter(item => {
      return allowedMenuTitles.has(item.label);
@@ -981,13 +952,13 @@

    // 过滤协同办公菜单
    const originalCollaboration = [
      { icon: "/static/images/icon/baoxiaoguanli.png", label: "协同审批" },
      { icon: "/static/images/icon/huiyiliebiao@2x.png", label: "会议管理" },
      { icon: "/static/images/icon/tongzhigonggao@2x.png", label: "通知公告" },
      { icon: "/static/images/icon/zhishiku@2x.png", label: "知识库" },
      { icon: "/static/images/icon/yongyinguanli@2x.png", label: "用印管理" },
      { icon: "/static/images/icon/guizhangzhidu@2x.png", label: "规章制度" },
      { icon: "/static/images/icon/kehubaifang@2x.png", label: "客户拜访" },
      { icon: "/static/images/icon/baoxiaoguanli.svg", label: "协同审批" },
      { icon: "/static/images/icon/huiyiliebiao@2x.svg", label: "会议管理" },
      { icon: "/static/images/icon/tongzhigonggao@2x.svg", label: "通知公告" },
      { icon: "/static/images/icon/zhishiku@2x.svg", label: "知识库" },
      { icon: "/static/images/icon/yongyinguanli@2x.svg", label: "用印管理" },
      { icon: "/static/images/icon/guizhangzhidu@2x.svg", label: "规章制度" },
      { icon: "/static/images/icon/kehubaifang@2x.svg", label: "客户拜访" },
    ];
    const filteredCollaboration = originalCollaboration.filter(item => {
      // 处理标题不完全匹配的情况
@@ -1006,13 +977,13 @@

    // 过滤采购管理菜单
    const originalPurchase = [
      { icon: "/static/images/icon/caigoutaizhang@2x.png", label: "采购台账" },
      { icon: "/static/images/icon/laipiaodengji@2x.png", label: "来票登记" },
      { icon: "/static/images/icon/laipiaotaizhang@2x.png", label: "来票台账" },
      { icon: "/static/images/icon/fukuanjingji@2x.png", label: "付款登记" },
      { icon: "/static/images/icon/fukuanliushui@2x.png", label: "付款流水" },
      { icon: "/static/images/icon/caigoutaizhang.svg", label: "采购台账" },
      { icon: "/static/images/icon/laipiaodengji.svg", label: "来票登记" },
      { icon: "/static/images/icon/laipiaotaizhang.svg", label: "来票台账" },
      { icon: "/static/images/icon/fukuanjingji.svg", label: "付款登记" },
      { icon: "/static/images/icon/fukuanliushui.svg", label: "付款流水" },
      {
        icon: "/static/images/icon/gongyingshangwanglai@2x.png",
        icon: "/static/images/icon/gongyingshangwanglai@2x.svg",
        label: "供应商往来",
      },
    ];
@@ -1023,17 +994,17 @@

    // 过滤安全生产菜单
    const originalSafety = [
      { icon: "/static/images/icon/caigoutaizhang@2x.png", label: "规程与资质" },
      { icon: "/static/images/icon/caigoutaizhang@2x.png", label: "危险源台账" },
      { icon: "/static/images/icon/caigoutaizhang.svg", label: "规程与资质" },
      { icon: "/static/images/icon/caigoutaizhang.svg", label: "危险源台账" },
      {
        icon: "/static/images/icon/caigoutaizhang@2x.png",
        icon: "/static/images/icon/caigoutaizhang.svg",
        label: "危险作业审批",
      },
      { icon: "/static/images/icon/guzhangfenxi@2x.png", label: "隐患排查上报" },
      { icon: "/static/images/icon/guzhangfenxi@2x.png", label: "危险物料管控" },
      { icon: "/static/images/icon/guzhangfenxi@2x.png", label: "应急预案查阅" },
      { icon: "/static/images/icon/guzhangfenxi@2x.png", label: "事故上报记录" },
      { icon: "/static/images/icon/guzhangfenxi@2x.png", label: "安全培训考核" },
      { icon: "/static/images/icon/guzhangfenxi@2x.svg", label: "隐患排查上报" },
      { icon: "/static/images/icon/guzhangfenxi@2x.svg", label: "危险物料管控" },
      { icon: "/static/images/icon/guzhangfenxi@2x.svg", label: "应急预案查阅" },
      { icon: "/static/images/icon/guzhangfenxi@2x.svg", label: "事故上报记录" },
      { icon: "/static/images/icon/guzhangfenxi@2x.svg", label: "安全培训考核" },
    ];
    const filteredSafety = originalSafety.filter(item => {
      return allowedMenuTitles.has(item.label);
@@ -1042,9 +1013,9 @@

    // 过滤人力资源菜单
    const originalHumanResources = [
      { icon: "/static/images/icon/caigoutaizhang@2x.png", label: "打卡签到" },
      { icon: "/static/images/icon/caigoutaizhang@2x.png", label: "人员薪资" },
      { icon: "/static/images/icon/caigoutaizhang@2x.png", label: "合同管理" },
      { icon: "/static/images/icon/caigoutaizhang.svg", label: "打卡签到" },
      { icon: "/static/images/icon/caigoutaizhang.svg", label: "人员薪资" },
      { icon: "/static/images/icon/caigoutaizhang.svg", label: "合同管理" },
    ];
    const filteredHumanResources = originalHumanResources.filter(item => {
      return allowedMenuTitles.has(item.label);
@@ -1057,9 +1028,9 @@

    // 过滤质量管理菜单
    const originalQuality = [
      { icon: "/static/images/icon/caigoutaizhang@2x.png", label: "原材料检验" },
      { icon: "/static/images/icon/caigoutaizhang@2x.png", label: "过程检验" },
      { icon: "/static/images/icon/caigoutaizhang@2x.png", label: "出厂检验" },
      { icon: "/static/images/icon/caigoutaizhang.svg", label: "原材料检验" },
      { icon: "/static/images/icon/caigoutaizhang.svg", label: "过程检验" },
      { icon: "/static/images/icon/caigoutaizhang.svg", label: "出厂检验" },
    ];
    const filteredQuality = originalQuality.filter(item => {
      return allowedMenuTitles.has(item.label);
@@ -1069,9 +1040,8 @@
    // 过滤生产管控菜单
    const originalProduction = [
      {
        icon: "/static/images/icon/shengchanbaogong@2x.png",
        icon: "/static/images/icon/shengchanbaogong@2x.svg",
        label: "生产报工",
        bgColor: "#673AB7",
      },
    ];
    const filteredProduction = originalProduction.filter(item => {
@@ -1081,10 +1051,10 @@

    // 过滤设备管理菜单
    const originalEquipment = [
      { icon: "/static/images/icon/shbeibaoxiu@2x.png", label: "运行管理" },
      { icon: "/static/images/icon/shbeibaoxiu@2x.png", label: "设备报修" },
      { icon: "/static/images/icon/shbeibaoyang@2x.png", label: "设备保养" },
      { icon: "/static/images/icon/xunjianshangchuan@2x.png", label: "设备巡检" },
      { icon: "/static/images/icon/shbeibaoxiu@2x.svg", label: "运行管理" },
      { icon: "/static/images/icon/shbeibaoxiu@2x.svg", label: "设备报修" },
      { icon: "/static/images/icon/shbeibaoyang@2x.svg", label: "设备保养" },
      { icon: "/static/images/icon/xunjianshangchuan@2x.svg", label: "设备巡检" },
    ];
    const filteredEquipment = originalEquipment.filter(item => {
      return allowedMenuTitles.has(item.label);
@@ -1207,7 +1177,7 @@
  .bg-img {
    width: 100%;
    height: 9.25rem;
    background-image: url("../static/images/banner/backview.png");
    background-image: url("../static/images/banner/backview.svg");
    background-size: cover;
    border-radius: 14px;
    position: relative;
@@ -1508,68 +1478,27 @@
  }

  .icon-container {
    width: 46px;
    height: 46px;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.375rem;
    box-shadow: 0 10px 20px rgba(17, 24, 39, 0.12);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    animation: fadeInScale 0.5s ease both;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 50%,
        rgba(255, 255, 255, 0.05) 100%
      );
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 0.75rem;
      background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
      );
      opacity: 0;
      transition: opacity 0.3s ease;
  .item-icon {
    width: 36px;
    height: 36px;
    display: block;
    }

    &:hover {
      transform: translateY(-0.1875rem) scale(1.02);
      box-shadow: 0 0.5rem 1.5625rem rgba(0, 0, 0, 0.18);

      &::before,
      &::after {
        opacity: 1;
      }
    }

    &:active {
  .icon-container:active {
      transform: scale(0.97);
      box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.18);
    }
  }

  .item-label {
@@ -1785,51 +1714,27 @@
  }

  .icon-container {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18);
    transition: all 0.18s ease;
    position: relative;
    overflow: hidden;
    animation: fadeInScale 0.5s ease both;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
  }

  .marketing-module .icon-container {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
  }
  .purchase-module .icon-container {
    background: linear-gradient(135deg, #1d4ed8, #0f766e);
  }
  .collaboration-module .icon-container {
    background: linear-gradient(135deg, #22c55e, #16a34a);
  }
  .equipment-module .icon-container {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
  }

  .icon-container::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
      circle at 20% 20%,
      rgba(255, 255, 255, 0.26),
      transparent 55%
    );
    opacity: 0.8;
    pointer-events: none;
  .item-icon {
    width: 36px;
    height: 36px;
    display: block;
  }

  .icon-container:active {
    transform: scale(0.94);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
  }

  .item-label {