样式

src/views/drive/index.vue

@@ -17,7 +17,12 @@
           class="drive-card"
           @click="openDrive(card)"
         >
-          <div class="drive-card__icon">
+          <div
+            class="drive-card__icon"
+            :style="{
+              backgroundColor: card.bgColor,
+            }"
+          >
             <Icon :icon="card.icon" />
           </div>
           <div class="drive-card__content">
@@ -51,6 +56,7 @@ type DriveCard = {
   description: string;
   icon: string;
   url: string;
+  bgColor: string;
 };
 
 const driveCards: DriveCard[] = [
@@ -59,18 +65,21 @@ const driveCards: DriveCard[] = [
     description: "查看经营分析、经营指标与执行情况。",
     icon: "mdi:business",
     url: "https://report.deepoil.cc/webroot/decision/v10/entry/access/9fb42908-894a-4373-a6be-ce046a42851d?preview=true&page_number=1",
+    bgColor: "#3876e0",
   },
   {
     title: "生产驾驶舱",
     description: "查看生产运营态势、核心指标与执行情况。",
     icon: "mdi:factory",
     url: "https://report.deepoil.cc/webroot/decision/v10/entry/access/dbc9cf73-81ce-43f1-9923-45cdfa5d5d3a?preview=true&page_number=1",
+    bgColor: "#0f766e",
   },
   {
     title: "财务驾驶舱",
     description: "查看财务分析、预算执行与经营数据表现。",
     icon: "mdi:finance",
     url: "https://report.deepoil.cc/webroot/decision/v10/entry/access/e836fb5b-092c-4d64-a324-3beeb4fac0cc?preview=true&page_number=1",
+    bgColor: "#ca8a04",
   },
 ];
 
@@ -169,7 +178,7 @@ const openDrive = async (option: DriveCard) => {
   width: 64px;
   height: 64px;
   border-radius: 18px;
-  background: linear-gradient(135deg, #2f6fdb 0%, #6ea2ff 100%);
+  /* background: linear-gradient(135deg, #2f6fdb 0%, #6ea2ff 100%); */
   color: #fff;
   font-size: 30px;
   flex-shrink: 0;