From c899675f6cd2303dc802ee7d04d4bf5dc903ac02 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 18 三月 2026 11:37:31 +0800
Subject: [PATCH] 进销存升级app 1.工作台图标替换
---
src/pages/works.vue | 325 +++++++++++++++++++-----------------------------------
1 files changed, 115 insertions(+), 210 deletions(-)
diff --git a/src/pages/works.vue b/src/pages/works.vue
index 8dfefad..a9b6939 100644
--- a/src/pages/works.vue
+++ b/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;
- }
+ .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 +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 {
--
Gitblit v1.9.3