fix: 样式

src/views/warningHome/components/legend.vue

@@ -39,8 +39,8 @@ defineExpose({
     background: rgba(29, 29, 29, 0.86);
     border: 1px solid rgba(255, 212, 137, 0.3);
     border-radius: 8px;
-    padding: 16px;
-    // min-width: 170px;
+    padding: 16px 22px;
+    // min-width: 120px;
     max-height: 80vh;
     z-index: 10;
     color: #fff;
@@ -96,7 +96,7 @@ defineExpose({
         }
 
         .category-name {
-            font-size: 14px;
+            font-size: 24px;
             color: rgba(255, 212, 137, 0.9);
         }
     }
@@ -115,9 +115,9 @@ defineExpose({
         }
     }
     .color-dot {
-        width: 15px;
-        height: 15px;
-        margin-right: 6px;
+        width: 22px;
+        height: 22px;
+        margin-right: 10px;
         border-radius: 2px;
     }
 }

src/views/warningHome/index.vue

@@ -14,7 +14,10 @@
                     {{ tab }}
                 </div>
             </div>
-            <div class="btn-common smart-farm-btn yes-events" @click="handleSmartFarmClick">智慧农场</div>
+            <div class="right-btns">
+                <div class="btn-common pdf-btn yes-events" @click="showPdf">Export Report</div>
+                <div class="btn-common smart-farm-btn yes-events" @click="handleSmartFarmClick">Smart Farm</div>
+            </div>
             <!-- 地图图例 -->
             <!-- <map-legend></map-legend> -->
             <!-- <land-use-legend @change="handleLegendChange"></land-use-legend> -->
@@ -68,7 +71,7 @@ const currentYear = ref(2025);
 const currentQuarter = ref(1);
 
 // 顶部基础 tabs
-const baseTabs = ["Phenological Stage", "Crop Condition", "Hydrology", "Canals", "Resources", "Export Report"];
+const baseTabs = ["Phenological Stage", "Crop Condition", "Hydrology", "Canals", "Resources"];
 const activeBaseTab = ref("Phenological Stage");
 
 const legendKeys = {
@@ -103,11 +106,13 @@ const handleBaseTabClick = (tab) => {
         staticMapLayers.showSingle("Dongguan物候期", false);
     }else if (tab === "Hydrology") {
         waterLayer && waterLayer.toggleLayer(true)
-    }else {
-        eventBus.emit("homePage:gybg", { filename: '/东莞水稻平台8月报告.pdf', title: "果园报告" });
     }
 };
 
+const showPdf = () => {
+    eventBus.emit("homePage:gybg", { filename: '/东莞水稻平台8月报告.pdf', title: "果园报告" });
+}
+
 const handleSmartFarmClick = () => {
     window.open("https://feiniao-pc-gly.feiniaotech.com/#/login");
 };
@@ -513,7 +518,7 @@ const getTreeChecks = async (nodeData, data) => {
 
         .btn-common {
             color: #f7be5a;
-            font-size: 20px;
+            font-size: 24px;
             font-family: "PangMenZhengDao";
             margin-right: 15px;
             border: 2px solid rgba(255, 212, 137, 0.3);
@@ -523,11 +528,13 @@ const getTreeChecks = async (nodeData, data) => {
             cursor: pointer;
         }
 
-        .smart-farm-btn{
+        .right-btns {
+            display: flex;
+            align-items: center;
+            gap: 15px;
             position: fixed;
-            top: 35px;
-            right: 200px;
-            padding: 10px 45px 13px;
+            top: 85px;
+            right: 16px;
         }
         .warning-top {
             display: flex;
@@ -543,10 +550,12 @@ const getTreeChecks = async (nodeData, data) => {
 
             .tab-item {
                 border-radius: 6px;
-                padding: 6px 15px;
+                padding: 0 15px;
+                height: 40px;
+                line-height: 40px;
                 margin-right: 12px;
                 text-align: center;
-                font-size: 20px;
+                font-size: 26px;
                 font-family: "PangMenZhengDao";
                 color: #ffffff;
                 background: rgba(37, 50, 57, 0.6);