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

gaoluyang

2 天以前 e7d45b61ad438bb96c0d0d7f17923f024a1e6aaf

 src/pages/works.vue

@@ -1,42 +1,5 @@
<template>
  <view class="content">
    <!--    <view class="header-section">-->
    <!--      <view class="currentFactory">-->
    <!--        <up-text type="primary"-->
    <!--                 :text="userStore.currentFactoryName"-->
    <!--                 @click="show = true"-->
    <!--                 size="18"-->
    <!--                 class="factoryName"-->
    <!--                 suffixIcon="arrow-right"-->
    <!--                 :iconStyle="iconStyle"></up-text>-->
    <!--      </view>-->
    <!--      <up-picker :show="show"-->
    <!--                 :columns="factoryList"-->
    <!--                 @confirm="changeFactory"-->
    <!--                 @cancel="show = false"></up-picker>-->
    <!--    </view>-->
<!--    <view class="hero-section">-->
<!--      <view class="bg-img">-->
<!--        <view class="hero-content">-->
<!--          &lt;!&ndash; 预留：如后续需要可在此放 logo 或简短提示 &ndash;&gt;-->
<!--        </view>-->
<!--        <view class="hero-wave"></view>-->
<!--      </view>-->
<!--    </view>-->
    <!--      <view class="notice-section">-->
    <!--         <view class="notice">-->
    <!--            <view class="notice-content">-->
    <!--               <view class="notice-left">-->
    <!--                  <text class="notice-status">通知</text>-->
    <!--               </view>-->
    <!--               <view class="notice-separator"></view>-->
    <!--               <view class="notice-right">-->
    <!--                  <text class="notice-label">{{currentStatus}}</text>-->
    <!--                  <text class="notice-text">当日销售设备数:<text class="notice-number">{{number}}<text class="notice-unit">个</text></text></text>-->
    <!--               </view>-->
    <!--            </view>-->
    <!--         </view>-->
    <!--      </view>-->
    <!-- 营销管理模块 -->
    <view class="common-module marketing-module"
          v-if="hasMarketingItems">
@@ -51,11 +14,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 +36,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 +58,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 +80,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 +102,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 +124,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 +146,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 +168,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 +212,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 +240,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/fukuandengji.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/guichengzizhi.svg",
      label: "规程与资质",
    },
    {
      icon: "/static/images/icon/caigoutaizhang@2x.png",
      icon: "/static/images/icon/weixianyuan.svg",
      label: "危险源台账",
    },
    {
      icon: "/static/images/icon/caigoutaizhang@2x.png",
      icon: "/static/images/icon/weixianzuoye.svg",
      label: "危险作业审批",
    },
    {
      icon: "/static/images/icon/guzhangfenxi@2x.png",
      icon: "/static/images/icon/yinhuanpaicha.svg",
      label: "隐患排查上报",
    },
    {
      icon: "/static/images/icon/guzhangfenxi@2x.png",
      icon: "/static/images/icon/weixianwuliao.svg",
      label: "危险物料管控",
    },
    {
      icon: "/static/images/icon/guzhangfenxi@2x.png",
      icon: "/static/images/icon/yingjiyuan.svg",
      label: "应急预案查阅",
    },
    {
      icon: "/static/images/icon/guzhangfenxi@2x.png",
      icon: "/static/images/icon/shigushangbao.svg",
      label: "事故上报记录",
    },
    {
      icon: "/static/images/icon/guzhangfenxi@2x.png",
      icon: "/static/images/icon/anquanpeixun.svg",
      label: "安全培训考核",
    },
  ]);
  // 协同办公功能数据
  const collaborationItems = reactive([
    {
      icon: "/static/images/icon/baoxiaoguanli.png",
      icon: "/static/images/icon/xietongshenpi.svg",
      label: "协同审批",
    },
    {
      icon: "/static/images/icon/huiyiliebiao@2x.png",
      icon: "/static/images/icon/huiyiguanli.svg",
      label: "会议管理",
    },
    {
      icon: "/static/images/icon/tongzhigonggao@2x.png",
      icon: "/static/images/icon/tongzhigonggao.svg",
      label: "通知公告",
    },
    {
      icon: "/static/images/icon/zhishiku@2x.png",
      icon: "/static/images/icon/zhishiku.svg",
      label: "知识库",
    },
    {
      icon: "/static/images/icon/yongyinguanli@2x.png",
      icon: "/static/images/icon/yongyinguanli.svg",
      label: "用印管理",
    },
    {
      icon: "/static/images/icon/guizhangzhidu@2x.png",
      icon: "/static/images/icon/guizhangzhidu.svg",
      label: "规章制度",
    },
    {
      icon: "/static/images/icon/kehubaifang@2x.png",
      icon: "/static/images/icon/kehubaifang.svg",
      label: "客户拜访",
    },
  ]);
@@ -422,52 +361,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.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/yunxingguanli.svg",
      label: "运行管理",
    },
    {
      icon: "/static/images/icon/shbeibaoxiu@2x.png",
      icon: "/static/images/icon/shebeibaoxiu.svg",
      label: "设备报修",
    },
    {
      icon: "/static/images/icon/shbeibaoyang@2x.png",
      icon: "/static/images/icon/shebeibaoyang.svg",
      label: "设备保养",
    },
    {
      icon: "/static/images/icon/xunjianshangchuan@2x.png",
      icon: "/static/images/icon/xunjianshangchuan.svg",
      label: "设备巡检",
    },
  ]);
@@ -953,11 +887,9 @@
    const collectMenuTitles = routes => {
      if (!Array.isArray(routes)) return;
      routes.forEach(route => {
        // 收集当前路由的标题
        if (route.meta && route.meta.title) {
          allowedMenuTitles.add(route.meta.title);
        }
        // 递归处理子路由
        if (route.children && route.children.length > 0) {
          collectMenuTitles(route.children);
        }
@@ -965,131 +897,32 @@
    };
    collectMenuTitles(routers);

    // 过滤营销管理菜单
    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: "客户往来" },
    ];
    const filteredMarketing = originalMarketing.filter(item => {
      return allowedMenuTitles.has(item.label);
    });
    marketingItems.splice(0, marketingItems.length, ...filteredMarketing);
    // 定义菜单配置映射
    const menuMapping = {
      collaboration: { target: collaborationItems, specialMapping: { "规章制度": "规章制度管理" } },
    };

    // 过滤协同办公菜单
    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: "客户拜访" },
    ];
    const filteredCollaboration = originalCollaboration.filter(item => {
      // 处理标题不完全匹配的情况
      let matched = allowedMenuTitles.has(item.label);
      // 特殊处理：规章制度 -> 规章制度管理
      if (!matched && item.label === "规章制度") {
        matched = allowedMenuTitles.has("规章制度管理");
      }
      return matched;
    });
    collaborationItems.splice(
      0,
      collaborationItems.length,
      ...filteredCollaboration
    );
    // 通用过滤函数
    const filterArray = (targetArray, specialMapping) => {
      const filtered = targetArray.filter(item => {
        let matched = allowedMenuTitles.has(item.label);
        if (specialMapping && !matched && specialMapping[item.label]) {
          matched = allowedMenuTitles.has(specialMapping[item.label]);
        }
        return matched;
      });
      targetArray.splice(0, targetArray.length, ...filtered);
    };

    // 过滤采购管理菜单
    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/gongyingshangwanglai@2x.png",
        label: "供应商往来",
      },
    ];
    const filteredPurchase = originalPurchase.filter(item => {
      return allowedMenuTitles.has(item.label);
    });
    purchaseItems.splice(0, purchaseItems.length, ...filteredPurchase);

    // 过滤安全生产菜单
    const originalSafety = [
      { 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/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: "安全培训考核" },
    ];
    const filteredSafety = originalSafety.filter(item => {
      return allowedMenuTitles.has(item.label);
    });
    safetyItems.splice(0, safetyItems.length, ...filteredSafety);

    // 过滤人力资源菜单
    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: "合同管理" },
    ];
    const filteredHumanResources = originalHumanResources.filter(item => {
      return allowedMenuTitles.has(item.label);
    });
    humanResourcesItems.splice(
      0,
      humanResourcesItems.length,
      ...filteredHumanResources
    );

    // 过滤质量管理菜单
    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: "出厂检验" },
    ];
    const filteredQuality = originalQuality.filter(item => {
      return allowedMenuTitles.has(item.label);
    });
    qualityItems.splice(0, qualityItems.length, ...filteredQuality);

    // 过滤生产管控菜单
    const originalProduction = [
      {
        icon: "/static/images/icon/shengchanbaogong@2x.png",
        label: "生产报工",
        bgColor: "#673AB7",
      },
    ];
    const filteredProduction = originalProduction.filter(item => {
      return allowedMenuTitles.has(item.label);
    });
    productionItems.splice(0, productionItems.length, ...filteredProduction);

    // 过滤设备管理菜单
    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: "设备巡检" },
    ];
    const filteredEquipment = originalEquipment.filter(item => {
      return allowedMenuTitles.has(item.label);
    });
    equipmentItems.splice(0, equipmentItems.length, ...filteredEquipment);
    // 过滤各个模块
    filterArray(marketingItems);
    filterArray(purchaseItems);
    filterArray(collaborationItems, menuMapping.collaboration.specialMapping);
    filterArray(safetyItems);
    filterArray(humanResourcesItems);
    filterArray(qualityItems);
    filterArray(productionItems);
    filterArray(equipmentItems);
  };

  // 检查模块是否有菜单项需要显示
@@ -1207,7 +1040,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 +1341,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;
    }
  .item-icon {
    width: 36px;
    height: 36px;
    display: block;
  }

    &::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;
    }

    &: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 {
      transform: scale(0.97);
      box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.18);
    }
  .icon-container:active {
    transform: scale(0.97);
  }

  .item-label {
@@ -1785,51 +1577,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 {