<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>
  
  