Auto commit

src/App.vue

-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
+  <div id="app">
+    <demo-weather></demo-weather>
   </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-}
+<script>
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
+import DemoWeather from './components/DemoWeather.vue';
 
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
+export default {
+  name: 'App',
+  components: {
+    DemoWeather
+  },
+  data() {
+    return {
+      active:"vue-home"
     }
-
-  .logo {
-    margin: 0 2rem 0 0;
+  },
+  methods: {
+    changePage(name){
+      this.active = "vue-"+name
     }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
   }
 }
+</script>
+
+<style lang="scss">
+
 </style>
+

src/components/DemoWeather.vue

+<template>
+    <!-- 天气信息容器 -->
+    <div class="weather-container">
+      <!-- 天气标题 -->
+      <h1 class="weather-title">{{ cityName }}实时天气数据</h1>
+      <!-- 天气信息展示 -->
+      <div class="weather-info">
+        <!-- 天气信息项 -->
+        <div class="weather-item" v-for="(item, index) in weatherData" :key="index">
+          <!-- 天气信息标签 -->
+          <p class="weather-label">{{ item.label }}:</p>
+          <!-- 天气信息值 -->
+          <p class="weather-value">{{ item.value }}</p>
+        </div>
+      </div>
+      <!-- 城市输入框 -->
+      <div class="input-container">
+        <input type="text" v-model="locations" placeholder="请输入城市名" @change="getWeatherData">
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    data:function() {
+      return {
+        // 城市名
+        cityName: '',
+        // 天气信息
+        weatherData: [],
+        // 默认城市
+        locations:'杭州'
+      };
+    },
+    mounted() {
+      // 获取天气信息
+      this.getWeatherData();
+    },
+    methods: {
+      // 获取天气信息
+      getWeatherData() {
+        // 获取城市信息
+        fetch(`https://geoapi.qweather.com/v2/city/lookup?location=${this.locations}&key=b8eab9bbc51c4173b92519ae8c6dfde5`)
+          .then(response => response.json())
+          .then(data => {
+            const location = data.location[0];
+            // 更新城市名
+            this.cityName = location.name;
+            // 获取天气信息
+            fetch(`https://devapi.qweather.com/v7/weather/now?location=${location.id}&key=b8eab9bbc51c4173b92519ae8c6dfde5`)
+              .then(response => response.json())
+              .then(data => {
+                const now = data.now;
+                // 更新天气信息
+                this.weatherData = [
+                  { label: '实时温度', value: now.temp },
+                  { label: '体感温度', value: now.feelsLike },
+                  { label: '风力风向', value: `${now.windDir} ${now.windScale}级` },
+                  { label: '相对湿度', value: `${now.humidity}%` },
+                  { label: '大气压强', value: `${now.pressure}百帕` },
+                  { label: '降水量', value: `${now.precip}毫米` },
+                  { label: '能见度', value: `${now.vis}公里` },
+                  { label: '露点温度', value: `${now.dew}℃` },
+                  { label: '云量', value: `${now.cloud}%` }
+                ];
+              });
+          });
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  /* 天气信息容器 */
+  .weather-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+  
+  /* 天气标题 */
+  .weather-title {
+    font-size: 2rem;
+    margin-bottom: 2rem;
+  }
+  
+  /* 天气信息展示 */
+  .weather-info {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  
+  /* 天气信息项 */
+  .weather-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 1rem;
+    padding: 1rem;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    background-color: #fff;
+    color: #333;
+    font-size: 1.2rem;
+    text-align: center;
+    min-width: 150px;
+  }
+  
+  /* 天气信息标签 */
+  .weather-label {
+    font-weight: bold;
+  }
+  
+  /* 天气信息值 */
+  .weather-value {
+    margin-top: 0.5rem;
+  }
+  
+  /* 城市输入框 */
+  .input-container {
+    margin-top: 2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  /* 输入框样式 */
+  input[type="text"] {
+    padding: 0.5rem;
+    border-radius: 5px;
+    border: none;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    font-size: 1.2rem;
+    width: 300px;
+    text-align: center;
+  }
+  </style>
+  
+  
\ No newline at end of file