feat:添加tabbar图片

src/App.vue

@@ -39,8 +39,8 @@
               <img
                   :src="
                       props.active
-                          ? require('@/assets/img/tab_bar/message-active.png')
-                          : require('@/assets/img/tab_bar/message.png')
+                          ? require('@/assets/img/tab_bar/farm-active.png')
+                          : require('@/assets/img/tab_bar/farm.png')
                   "
               />
           </template>
@@ -51,8 +51,8 @@
               <img
                   :src="
                       props.active
-                          ? require('@/assets/img/tab_bar/message-active.png')
-                          : require('@/assets/img/tab_bar/message.png')
+                          ? require('@/assets/img/tab_bar/service-active.png')
+                          : require('@/assets/img/tab_bar/service.png')
                   "
               />
           </template>

src/components/weatherInfo.vue

@@ -1,28 +1,70 @@
 <template>
     <div class="weather-info">
-        <div class="weather-info-item">
-            <div class="weather-info-item-title">
-                
+        <!-- <div class="select-group">
+            <div class=""></div>
+        </div> -->
+        <div class="header flex-center">
+            <div class="header-left">
+                <div class="address flex-center">
+                    <el-icon class="address-icon"><Location /></el-icon>
+                    <span class="address-text">广州市番禺区</span>
+                </div>
+                <div class="temperature">
+                    <span>26°</span>
+                    <div class="temperature-text">
+                        <span>晴天</span>
+                        <span>10/22  周二</span>
+                        <span>展开更多天气</span>
+                    </div>
+                </div>
             </div>
+            <div class="header-right"></div>
         </div>
+        <weather-chart class="weather-chart"></weather-chart>
     </div>
 </template>
 
 <script setup>
 import { onMounted, ref } from "vue";
+import weatherChart from "./weatherChart.vue"
 
 
 onMounted(() => {
    
 });
 
-
 </script>
 
 <style lang="scss" scoped>
 .weather-info {
     width: 100%;
     height: 100%;
+    box-sizing: border-box;
+    .flex-center {
+        display: flex;
+        align-items: center;
+    }
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .header-left {
+           
+            .address {
+               
+            }
+            .temperature {
+                
+            }
+        }
+        .header-right {
+           
+        }
+    }
+    .weather-chart {
+        width: 100%;
+        height: 150px;
+    }
 }
 
 </style>

src/views/old_mini/home/index.vue

@@ -3,8 +3,7 @@
         <!-- 地图 -->
         <div class="map-container" id="map-container">
         </div>
-        <!-- <home-floating-panel></home-floating-panel> -->
-        <!-- <adopt-popup></adopt-popup> -->
+        <weather-info class="weather-info"></weather-info>
     </div>
 </template>
 
@@ -13,8 +12,7 @@ import IndexMap from "./map/index.js";
 import { onMounted, computed } from "vue";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
-// import homeFloatingPanel from "./components/homeFloatingPanel.vue"
-// import adoptPopup from "./components/adoptPopup.vue"
+import weatherInfo from "@/components/weatherInfo.vue";
 // import eventBus from "@/api/eventBus.js";
 const router = useRouter();
 
@@ -56,6 +54,17 @@ function mapClickPoint(){
         width: 100%;
         height: 100%;
     }
+    .weather-info {
+        position: absolute;
+        top: 12px;
+        left: 12px;
+        width: calc(100% - 24px);
+        height: 312px;
+        border-radius: 14px;
+        background-image: linear-gradient(90deg, #e2f1fe 0%, #FFFFFF 80%);
+        padding: 10px;
+        box-sizing: border-box;
+    }
 }
 
 </style>