fix: 首页样式

src/views/warningHome/components/farmInfoGroup.vue

@@ -133,10 +133,10 @@ const handlePerceptionRecord = () => {
 <style lang="scss" scoped>
 .farm-info-group {
     position: absolute;
-    top: 30px;
+    top: 0px;
     right: 0;
     width: 376px;
-    height: calc(100% - 20px);
+    height: 100%;
     background: #232323;
     border-radius: 4px;
     box-sizing: border-box;

src/views/warningHome/index.vue

@@ -51,10 +51,14 @@
                     <time-line></time-line>
                 </div>
             </div>
-            <div class="warning-r right yes-events">
+            <!-- <div class="action-legend">1</div> -->
+            <div v-if="showDetail" class="warning-r right chart-wrap yes-events">
                 <chart-list></chart-list>
                 <!-- <farmInfoGroup></farmInfoGroup> -->
             </div>
+            <div v-else class="warning-r right yes-events">
+                <farmInfoGroup></farmInfoGroup>
+            </div>
             <!-- 地图图例 -->
             <map-legend></map-legend>
             <div class="warning-search yes-events">
@@ -143,6 +147,7 @@ const router = useRouter();
 
 const areaVal = ref(["3"]);
 const mapRef = ref();
+const showDetail = ref(false);
 
 // 顶部基础 tabs
 const baseTabs = ["作物分布", "物候期分布", "预警分布", "农场分布", "农服管理"];
@@ -327,16 +332,18 @@ const remoteMethod = async (keyword) => {
         .right {
             // width: 395px;
             width: 376px;
-            padding: 8px;
             overflow: auto;
             position: relative;
-            background: #101010;
-            border: 1px solid #444444;
             .list {
                 width: 100%;
                 height: 100%;
             }
         }
+        .chart-wrap {
+            padding: 8px;
+            background: #101010;
+            border: 1px solid #444444;
+        }
         .warning-r {
             .map-legend {
                 position: absolute;