diff --git a/.reasonix/desktop-topic-created-at.json b/.reasonix/desktop-topic-created-at.json
new file mode 100644
index 0000000..2a69b5a
--- /dev/null
+++ b/.reasonix/desktop-topic-created-at.json
@@ -0,0 +1,3 @@
+{
+  "topic_20260623-080258_0085f19f09f740ca": 1782201778258
+}
\ No newline at end of file
diff --git a/.reasonix/desktop-topic-title-sources.json b/.reasonix/desktop-topic-title-sources.json
new file mode 100644
index 0000000..556cef3
--- /dev/null
+++ b/.reasonix/desktop-topic-title-sources.json
@@ -0,0 +1,3 @@
+{
+  "topic_20260623-080258_0085f19f09f740ca": "auto"
+}
\ No newline at end of file
diff --git a/.reasonix/desktop-topic-titles.json b/.reasonix/desktop-topic-titles.json
new file mode 100644
index 0000000..d9c003e
--- /dev/null
+++ b/.reasonix/desktop-topic-titles.json
@@ -0,0 +1,3 @@
+{
+  "topic_20260623-080258_0085f19f09f740ca": "这是一个自己简单写的天气项目，非常简…"
+}
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index bb131d6..4624df3 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,79 +1,44 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
   line-height: 1.5;
   font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
+  color-scheme: light;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
+  background: #0f0c29; /* fallback for loading */
 }
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+  width: 100%;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* 滚动条美化 */
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(255,255,255,0.15);
+  border-radius: 3px;
 }
diff --git a/src/utils/rem.ts b/src/utils/rem.ts
index f3915a3..5ad420c 100644
--- a/src/utils/rem.ts
+++ b/src/utils/rem.ts
@@ -1,13 +1,14 @@
-// rem 适配
+// rem适配 — 移动端缩放，PC端固定基准
 export const useREM = () => {
-  const baseSize = 75 // 基准大小，注意这里改为75
   function setRem() {
-    const scale = document.documentElement.clientWidth / 750 // 设计稿宽度改为750
-    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
+    const width = document.documentElement.clientWidth
+    // ≤768px 按375设计稿等比缩放，>768px 固定基准（不再放大）
+    if (width <= 768) {
+      document.documentElement.style.fontSize = (width / 375) * 37.5 + 'px'
+    } else {
+      document.documentElement.style.fontSize = '37.5px'
+    }
   }
-
-  setRem() // 初始化
-  window.onresize = () => {
-    setRem()
-  }
-} 
\ No newline at end of file
+  setRem()
+  window.addEventListener('resize', setRem)
+}
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 87d63b6..e00e30a 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,344 +1,892 @@
 <template>
-  <div class="weather-app">
-    <div class="weather-header">
-      <i class="fas fa-cloud-sun"></i>
-      <span class="weather-title">锋天气</span>
+  <div class="weather-app norem" :class="`theme-${activeTheme}`">
+    <!-- ===== 动态背景层 ===== -->
+    <div class="bg-layer">
+      <div class="bg-gradient"></div>
+      <div class="bg-particles">
+        <div
+          v-for="p in particles"
+          :key="p.id"
+          class="particle"
+          :style="p.style"
+        ></div>
+      </div>
+      <!-- 雨/雪效果 -->
+      <div v-if="isRain" class="weather-fx fx-rain" aria-hidden="true"></div>
+      <div v-if="isSnow" class="weather-fx fx-snow" aria-hidden="true"></div>
     </div>
-    
-    <div class="weather-grid">
-      <div v-for="city in cities" :key="city.prefix" class="weather-container">
-        <div class="weather-info">
-          <div class="primary-info">
-            <div class="weather-icon">
-              <i :class="getWeatherIcon(city.weatherData.condition)"></i>
+
+    <!-- ===== 顶部 ===== -->
+    <header class="app-header">
+      <div class="header-inner">
+        <div class="brand">
+          <span class="brand-icon">⛅</span>
+          <span class="brand-text">锋天气</span>
+        </div>
+        <div class="header-date">{{ currentDate }}</div>
+      </div>
+    </header>
+
+    <!-- ===== 主内容 ===== -->
+    <main class="app-main">
+      <!-- 加载中 -->
+      <div v-if="!activeData.location" class="hero-loading">
+        <div class="hl-spinner"></div>
+        <p class="hl-text">正在获取天气数据...</p>
+      </div>
+
+      <!-- 英雄区-当前城市 -->
+      <Transition name="hero-enter" v-else>
+        <section class="hero-section" :key="activeCity.prefix">
+          <div class="hero-glass">
+            <div class="hero-icon-wrap" :class="`icon-${activeTheme}`">
+              <span class="hero-icon">{{ getWeatherEmoji(activeData.condition) }}</span>
             </div>
-            <div class="temp-location">
-              <div class="temperature">{{ city.weatherData.temperature }}°</div>
-              <div class="location-group">
-                <div class="location">{{ city.weatherData.location }}</div>
-                <div class="condition">{{ city.weatherData.condition }}</div>
+            <div class="hero-temp-group">
+              <span class="hero-temp">{{ activeData.temperature }}</span>
+              <span class="hero-unit">°C</span>
+            </div>
+            <h2 class="hero-city">{{ activeData.location }}</h2>
+            <p class="hero-condition">{{ activeData.condition }}</p>
+            <div class="hero-meta">
+              <div class="meta-chip">
+                <svg class="chip-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
+                <span>{{ formatUpdateTime(activeData.lastUpdate) }}</span>
+              </div>
+              <div class="meta-chip">
+                <svg class="chip-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+                <span>{{ activeData.country || '中国' }}</span>
               </div>
             </div>
           </div>
-          <div class="secondary-info">
-            <div class="info-item">
-              <i class="fas fa-map-marker-alt"></i>
-              <span>{{ city.weatherData.country }}</span>
+        </section>
+      </Transition>
+
+      <!-- 城市网格 -->
+      <div class="section-divider" v-if="activeData.location">
+        <span class="divider-line"></span>
+        <span class="divider-text">其他城市</span>
+        <span class="divider-line"></span>
+      </div>
+
+      <div class="city-grid" :class="{ 'has-hero': activeData.location }">
+        <div
+          v-for="(city, idx) in cities"
+          :key="city.prefix"
+          class="city-card"
+          :class="{
+            'is-active': city.prefix === activeCity.prefix && activeData.location,
+            'is-loading': !city.weatherData.location
+          }"
+          :style="{ transitionDelay: `${idx * 0.04}s` }"
+          @click="switchCity(city)"
+        >
+          <!-- 加载骨架 -->
+          <template v-if="!city.weatherData.location">
+            <div class="sk-circle"></div>
+            <div class="sk-lines">
+              <div class="sk-line sk-line--1"></div>
+              <div class="sk-line sk-line--2"></div>
             </div>
-            <div class="info-item">
-              <i class="fas fa-clock"></i>
-              <span>更新于 {{ city.weatherData.lastUpdate }}</span>
+          </template>
+
+          <!-- 正常内容 -->
+          <template v-else>
+            <div class="card-left">
+              <span class="card-emoji">{{ getWeatherEmoji(city.weatherData.condition) }}</span>
             </div>
-          </div>
+            <div class="card-body">
+              <span class="card-city">{{ city.weatherData.location }}</span>
+              <span class="card-condition">{{ city.weatherData.condition }}</span>
+            </div>
+            <div class="card-temp">{{ city.weatherData.temperature }}°</div>
+            <div class="card-glow"></div>
+          </template>
         </div>
       </div>
-    </div>
+    </main>
+
+    <!-- ===== 底部 ===== -->
+    <footer class="app-footer">
+      <p>锋天气 · 知你冷暖</p>
+    </footer>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import axios from 'axios'
 
-const CACHE_DURATION = 15 * 60 * 1000 // 15 minutes in milliseconds
+/* ===== 数据 ===== */
+const CACHE_DURATION = 15 * 60 * 1000
 
 const cities = ref([
-  {
-    prefix: 'ningbo',
-    url: 'https://api.seniverse.com/v3/weather/now.json?key=SMaPuMVF4IicVWOpa&location=WTQ3VZQP879N&language=zh-Hans&unit=c',
-    weatherData: {}
-  },
-  {
-    prefix: 'shenzhen',
-    url: 'https://api.seniverse.com/v3/weather/now.json?key=SMaPuMVF4IicVWOpa&location=WS10730EM8EV&language=zh-Hans&unit=c',
-    weatherData: {}
-  },
-  {
-    prefix: 'shaoxing',
-    url: 'https://api.seniverse.com/v3/weather/now.json?key=SMaPuMVF4IicVWOpa&location=WTMDXTK6STK4&language=zh-Hans&unit=c',
-    weatherData: {}
-  },
-  {
-    prefix: 'hangzhou',
-    url: 'https://api.seniverse.com/v3/weather/now.json?key=SMaPuMVF4IicVWOpa&location=WTMKQ069CCJ7&language=zh-Hans&unit=c',
-    weatherData: {}
-  },
- 
-  {
-    prefix: 'jinhua',
-    url: 'https://api.seniverse.com/v3/weather/now.json?key=SMaPuMVF4IicVWOpa&location=WTJJ6TY7R0FK&language=zh-Hans&unit=c',
-    weatherData: {}
-  }
-
+  { prefix: 'ningbo', url: 'https://api.seniverse.com/v3/weather/now.json?key=SMaPuMVF4IicVWOpa&location=WTQ3VZQP879N&language=zh-Hans&unit=c', weatherData: {} },
+  { prefix: 'shenzhen', url: 'https://api.seniverse.com/v3/weather/now.json?key=SMaPuMVF4IicVWOpa&location=WS10730EM8EV&language=zh-Hans&unit=c', weatherData: {} },
+  { prefix: 'shaoxing', url: 'https://api.seniverse.com/v3/weather/now.json?key=SMaPuMVF4IicVWOpa&location=WTMDXTK6STK4&language=zh-Hans&unit=c', weatherData: {} },
+  { prefix: 'hangzhou', url: 'https://api.seniverse.com/v3/weather/now.json?key=SMaPuMVF4IicVWOpa&location=WTMKQ069CCJ7&language=zh-Hans&unit=c', weatherData: {} },
+  { prefix: 'jinhua', url: 'https://api.seniverse.com/v3/weather/now.json?key=SMaPuMVF4IicVWOpa&location=WTJJ6TY7R0FK&language=zh-Hans&unit=c', weatherData: {} }
 ])
 
+const activeCity = ref(cities.value[0])
+
+/* ===== 粒子系统 ===== */
+const particles = ref(Array.from({ length: 28 }, (_, i) => ({
+  id: i,
+  style: {
+    left: `${Math.random() * 100}%`,
+    width: `${Math.random() * 8 + 3}px`,
+    height: `${Math.random() * 8 + 3}px`,
+    animationDuration: `${Math.random() * 10 + 8}s`,
+    animationDelay: `${Math.random() * 12}s`,
+    opacity: Math.random() * 0.3 + 0.06
+  }
+})))
+
+/* ===== 计算属性 ===== */
+const activeData = computed(() => activeCity.value.weatherData)
+
+const activeTheme = computed(() => getWeatherTheme(activeData.value.condition))
+
+const isRain = computed(() => ['rain', 'storm'].includes(activeTheme.value))
+const isSnow = computed(() => activeTheme.value === 'snow')
+
+const currentDate = computed(() => {
+  const d = new Date()
+  const wd = ['日', '一', '二', '三', '四', '五', '六']
+  return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日 星期${wd[d.getDay()]}`
+})
+
+/* ===== 主题映射 ===== */
+const themeMap = {
+  '晴': 'sunny', '多云': 'cloudy', '阴': 'overcast',
+  '雨': 'rain', '雪': 'snow', '雷': 'storm',
+  '雾': 'fog', '霾': 'haze'
+}
+
+const emojiMap = {
+  '晴': '☀️', '多云': '⛅', '阴': '☁️',
+  '雨': '🌧️', '雪': '❄️', '雷': '⛈️',
+  '雾': '🌫️', '霾': '🌫️'
+}
+
+const getWeatherTheme = (c) => themeMap[c] || 'default'
+const getWeatherEmoji = (c) => emojiMap[c] || '🌤️'
+
+/* ===== 方法 ===== */
+const switchCity = (city) => {
+  if (city.weatherData.location) {
+    activeCity.value = city
+  }
+}
+
+const formatUpdateTime = (time) => {
+  if (!time) return '未知'
+  try {
+    const d = new Date(time)
+    return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`
+  } catch {
+    return time
+  }
+}
+
 const fetchWeather = async (city) => {
   try {
-    const response = await axios.get(city.url)
-    const weather = response.data.results[0]
-    const weatherData = {
-      location: weather.location.name,
-      country: weather.location.country,
-      condition: weather.now.text,
-      temperature: weather.now.temperature,
-      lastUpdate: new Date(weather.last_update).toLocaleString(),
+    const res = await axios.get(city.url)
+    const w = res.data.results[0]
+    const data = {
+      location: w.location.name,
+      country: w.location.country,
+      condition: w.now.text,
+      temperature: w.now.temperature,
+      lastUpdate: w.last_update, // ISO time string
       timestamp: Date.now()
     }
-    localStorage.setItem(city.prefix, JSON.stringify(weatherData))
-    city.weatherData = weatherData
-  } catch (error) {
-    console.error(`Error fetching ${city.prefix} weather data:`, error)
+    localStorage.setItem(city.prefix, JSON.stringify(data))
+    city.weatherData = data
+  } catch (e) {
+    console.error(`获取 ${city.prefix} 天气失败:`, e)
   }
 }
 
 const fetchWeatherWithDelay = () => {
-  cities.value.forEach((city, index) => {
-    const cachedData = localStorage.getItem(city.prefix)
-    if (cachedData) {
-      const weatherData = JSON.parse(cachedData)
-      if (Date.now() - weatherData.timestamp < CACHE_DURATION) {
-        city.weatherData = weatherData
+  cities.value.forEach((city, i) => {
+    const cached = localStorage.getItem(city.prefix)
+    if (cached) {
+      const data = JSON.parse(cached)
+      if (Date.now() - data.timestamp < CACHE_DURATION) {
+        city.weatherData = data
         return
       }
     }
-    setTimeout(() => {
-      fetchWeather(city)
-    }, index * 1000)
+    setTimeout(() => fetchWeather(city), i * 600)
   })
 }
 
-const getWeatherIcon = (condition) => {
-  const iconMap = {
-    '晴': 'fas fa-sun',
-    '多云': 'fas fa-cloud-sun',
-    '阴': 'fas fa-cloud',
-    '雨': 'fas fa-cloud-rain',
-    '雪': 'fas fa-snowflake',
-    '雷': 'fas fa-bolt',
-    // 可以根据需要添加更多天气状况映射
-  }
-  return iconMap[condition] || 'fas fa-cloud'
-}
-
-onMounted(() => {
-  fetchWeatherWithDelay()
-})
+onMounted(() => fetchWeatherWithDelay())
 </script>
 
 <style scoped>
-@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
+/* ============================================================
+   WEATHER APP — 全新玻璃拟态设计
+   ============================================================ */
 
-.weather-header {
+/* ---------- 全局 ---------- */
+.weather-app {
+  position: relative;
+  min-height: 100vh;
+  overflow-x: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
+  color: #fff;
+  transition: background 0.8s ease;
+}
+
+/* ---------- 天气主题背景 ---------- */
+.theme-sunny    { background: linear-gradient(145deg, #f093fb 0%, #f5576c 30%, #ffd93d 70%, #ff6b35 100%); }
+.theme-cloudy   { background: linear-gradient(145deg, #667eea 0%, #764ba2 30%, #4facfe 70%, #00f2fe 100%); }
+.theme-overcast { background: linear-gradient(145deg, #2c3e50 0%, #4ca1af 50%, #8e9eab 100%); }
+.theme-rain     { background: linear-gradient(145deg, #1a1a2e 0%, #16213e 40%, #0f3460 70%, #533483 100%); }
+.theme-snow     { background: linear-gradient(145deg, #e0eafc 0%, #cfdef3 40%, #a1c4fd 70%, #c2e9fb 100%); color: #2d3436; }
+.theme-storm    { background: linear-gradient(145deg, #0f0c29 0%, #302b63 40%, #24243e 70%, #4a3580 100%); }
+.theme-fog      { background: linear-gradient(145deg, #8e9eab 0%, #b2bec3 50%, #dfe6e9 100%); color: #2d3436; }
+.theme-haze     { background: linear-gradient(145deg, #a0785a 0%, #c4a882 40%, #e8d5b7 100%); }
+.theme-default  { background: linear-gradient(145deg, #667eea 0%, #764ba2 50%, #4facfe 100%); }
+
+/* ---------- 背景层 ---------- */
+.bg-layer {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.bg-gradient {
+  position: absolute;
+  inset: -50%;
+  background: radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 50%),
+              radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.05) 0%, transparent 50%),
+              radial-gradient(ellipse at 50% 80%, rgba(255,255,255,0.06) 0%, transparent 50%);
+  animation: bgDrift 20s ease-in-out infinite alternate;
+}
+
+@keyframes bgDrift {
+  0%   { transform: translate(0, 0) rotate(0deg); }
+  100% { transform: translate(2%, 1%) rotate(3deg); }
+}
+
+/* ---------- 粒子 ---------- */
+.bg-particles {
+  position: absolute;
+  inset: 0;
+}
+
+.particle {
+  position: absolute;
+  bottom: -20px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.15);
+  animation: particleFloat linear infinite;
+  will-change: transform;
+}
+
+@keyframes particleFloat {
+  0%   { transform: translateY(0) scale(1); opacity: 0; }
+  10%  { opacity: 1; }
+  90%  { opacity: 1; }
+  100% { transform: translateY(-110vh) scale(0.3); opacity: 0; }
+}
+
+/* ---------- 雨/雪效果 ---------- */
+.weather-fx {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.fx-rain {
+  background-image:
+    linear-gradient(transparent 0%, rgba(174, 214, 241, 0.15) 2%, transparent 3%);
+  background-size: 1px 18px;
+  animation: rainFall 0.6s linear infinite;
+}
+
+@keyframes rainFall {
+  0%   { transform: translateY(-18px); }
+  100% { transform: translateY(100vh); }
+}
+
+.fx-snow {
+  background-image:
+    radial-gradient(1px 1px at 10% 10%, rgba(255,255,255,0.8) 0%, transparent 100%),
+    radial-gradient(1.5px 1.5px at 30% 40%, rgba(255,255,255,0.7) 0%, transparent 100%),
+    radial-gradient(1px 1px at 50% 20%, rgba(255,255,255,0.9) 0%, transparent 100%),
+    radial-gradient(1.2px 1.2px at 70% 60%, rgba(255,255,255,0.6) 0%, transparent 100%),
+    radial-gradient(1px 1px at 90% 30%, rgba(255,255,255,0.8) 0%, transparent 100%);
+  background-size: 200px 200px;
+  animation: snowFall 4s linear infinite;
+}
+
+@keyframes snowFall {
+  0%   { transform: translateY(-200px) rotate(0deg); opacity: 0; }
+  10%  { opacity: 1; }
+  90%  { opacity: 1; }
+  100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
+}
+
+/* ============================================================
+   顶部
+   ============================================================ */
+.app-header {
+  position: relative;
+  z-index: 10;
+  padding: 16px 20px 8px;
+}
+
+.header-inner {
   display: flex;
-  justify-content: center;
   align-items: center;
-  gap: 12px;
-  margin-bottom: 30px;
-  padding-top: 20px;
+  justify-content: space-between;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
-.weather-header i {
-  font-size: 2rem;
-  color: #2c3e50;
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
-.weather-title {
-  font-size: 2.2rem;
-  font-weight: 600;
-  color: #2c3e50;
+.brand-icon {
+  font-size: 24px;
+  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
+  animation: brandFloat 3s ease-in-out infinite;
+}
+
+@keyframes brandFloat {
+  0%, 100% { transform: translateY(0); }
+  50%      { transform: translateY(-3px); }
+}
+
+.brand-text {
+  font-size: 20px;
+  font-weight: 800;
+  letter-spacing: 2px;
+  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.7) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-shadow: none;
+}
+
+.header-date {
+  font-size: 13px;
+  opacity: 0.75;
+  font-weight: 400;
+  letter-spacing: 0.5px;
+}
+
+/* ============================================================
+   主内容
+   ============================================================ */
+.app-main {
+  position: relative;
+  z-index: 5;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px 80px;
+}
+
+/* ---------- 加载动画 ---------- */
+.hero-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 50vh;
+  gap: 16px;
+}
+
+.hl-spinner {
+  width: 44px;
+  height: 44px;
+  border: 3px solid rgba(255,255,255,0.15);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.hl-text {
+  font-size: 14px;
+  opacity: 0.6;
+  margin: 0;
+  letter-spacing: 1px;
+}
+
+/* ---------- 英雄区进入动画 ---------- */
+.hero-enter-enter-active {
+  transition: all 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+.hero-enter-enter-from {
+  opacity: 0;
+  transform: translateY(30px) scale(0.95);
+}
+
+/* ---------- 英雄区 ---------- */
+.hero-section {
+  padding: 24px 0 16px;
+}
+
+.hero-glass {
+  position: relative;
+  background: rgba(255, 255, 255, 0.10);
+  backdrop-filter: blur(24px) saturate(1.4);
+  -webkit-backdrop-filter: blur(24px) saturate(1.4);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 28px;
+  padding: 32px 24px 28px;
+  text-align: center;
+  overflow: hidden;
+  box-shadow: 0 8px 48px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.2);
+}
+
+.hero-glass::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.06) 0%, transparent 50%);
+  pointer-events: none;
+}
+
+/* 图标容器 */
+.hero-icon-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 96px;
+  height: 96px;
+  margin-bottom: 8px;
+  border-radius: 50%;
+  background: rgba(255,255,255,0.10);
+  backdrop-filter: blur(4px);
+}
+
+.hero-icon {
+  font-size: 52px;
+  line-height: 1;
+  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.12));
+}
+
+/* 天气icon动画 */
+.icon-sunny .hero-icon {
+  animation: iconPulse 2s ease-in-out infinite, iconRotate 12s linear infinite;
+}
+.icon-cloudy .hero-icon {
+  animation: iconDrift 3s ease-in-out infinite;
+}
+.icon-overcast .hero-icon {
+  animation: iconBob 4s ease-in-out infinite;
+}
+.icon-rain .hero-icon {
+  animation: iconBounce 1.5s ease-in-out infinite;
+}
+.icon-snow .hero-icon {
+  animation: iconFloat 3s ease-in-out infinite;
+}
+.icon-storm .hero-icon {
+  animation: iconPulse 0.8s ease-in-out infinite, iconFlash 3s ease-in-out infinite;
+}
+.icon-fog .hero-icon,
+.icon-haze .hero-icon {
+  animation: iconFade 3s ease-in-out infinite;
+}
+.icon-default .hero-icon {
+  animation: iconPulse 2s ease-in-out infinite;
+}
+
+@keyframes iconPulse {
+  0%, 100% { transform: scale(1); }
+  50%      { transform: scale(1.08); }
+}
+@keyframes iconRotate {
+  0%   { transform: scale(1.08) rotate(0deg); }
+  100% { transform: scale(1.08) rotate(360deg); }
+}
+@keyframes iconDrift {
+  0%, 100% { transform: translateX(0); }
+  50%      { transform: translateX(8px); }
+}
+@keyframes iconBob {
+  0%, 100% { transform: translateY(0); }
+  50%      { transform: translateY(-6px); }
+}
+@keyframes iconBounce {
+  0%, 100% { transform: translateY(0); }
+  25%      { transform: translateY(-8px); }
+  50%      { transform: translateY(0); }
+  75%      { transform: translateY(-4px); }
+}
+@keyframes iconFloat {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  33%      { transform: translateY(-10px) rotate(-5deg); }
+  66%      { transform: translateY(-3px) rotate(3deg); }
+}
+@keyframes iconFlash {
+  0%, 90%, 100% { opacity: 1; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.12)); }
+  95%           { opacity: 0.4; filter: drop-shadow(0 0 40px rgba(255,255,255,0.6)); }
+}
+@keyframes iconFade {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.6; transform: scale(0.95); }
+}
+
+/* 温度 */
+.hero-temp-group {
+  margin: 4px 0 8px;
+}
+.hero-temp {
+  font-size: 72px;
+  font-weight: 200;
+  line-height: 1;
+  letter-spacing: -3px;
+}
+.hero-unit {
+  font-size: 28px;
+  font-weight: 300;
+  opacity: 0.7;
+  vertical-align: super;
+  margin-left: 2px;
+}
+
+.hero-city {
+  margin: 0 0 4px;
+  font-size: 22px;
+  font-weight: 700;
   letter-spacing: 2px;
 }
 
-.weather-grid {
-  max-width: 1200px;
-  margin: 0 auto;
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 20px;
-  padding: 16px;
+.hero-condition {
+  margin: 0 0 20px;
+  font-size: 15px;
+  opacity: 0.7;
+  letter-spacing: 3px;
 }
 
-.weather-container {
-  background: rgba(255, 255, 255, 0.95);
-  border-radius: 16px;
-  padding: 24px;
-  transition: all 0.3s ease;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  min-width: 0;
+/* 元信息 */
+.hero-meta {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
 }
 
-.weather-container:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
+.meta-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  background: rgba(255,255,255,0.10);
+  border: 1px solid rgba(255,255,255,0.12);
+  border-radius: 20px;
+  font-size: 12px;
+  opacity: 0.8;
+  backdrop-filter: blur(4px);
 }
 
-.primary-info {
+.chip-icon {
+  width: 14px;
+  height: 14px;
+  opacity: 0.6;
+}
+
+/* ---------- 分隔线 ---------- */
+.section-divider {
   display: flex;
   align-items: center;
-  gap: 20px;
-  margin-bottom: 16px;
-  padding-left: 60px;
+  gap: 12px;
+  margin: 8px 0 16px;
+  padding: 0 4px;
 }
 
-.weather-icon {
-  font-size: 2.5rem;
-  color: #4a90e2;
-  min-width: 60px;
-  width: 60px;
-  height: 60px;
+.divider-line {
+  flex: 1;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+}
+
+.divider-text {
+  font-size: 13px;
+  font-weight: 500;
+  opacity: 0.5;
+  letter-spacing: 2px;
+  white-space: nowrap;
+}
+
+/* ============================================================
+   城市卡片网格
+   ============================================================ */
+.city-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+/* ---------- 卡片 ---------- */
+.city-card {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 14px;
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(16px) saturate(1.3);
+  -webkit-backdrop-filter: blur(16px) saturate(1.3);
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  border-radius: 18px;
+  cursor: pointer;
+  transition: all 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
+  overflow: hidden;
+  animation: cardIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
+}
+
+.city-card:nth-child(1) { animation-delay: 0.00s; }
+.city-card:nth-child(2) { animation-delay: 0.06s; }
+.city-card:nth-child(3) { animation-delay: 0.12s; }
+.city-card:nth-child(4) { animation-delay: 0.18s; }
+.city-card:nth-child(5) { animation-delay: 0.24s; }
+
+@keyframes cardIn {
+  from { opacity: 0; transform: translateY(20px) scale(0.96); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.city-card:hover {
+  transform: translateY(-3px) scale(1.01);
+  background: rgba(255, 255, 255, 0.14);
+  border-color: rgba(255, 255, 255, 0.25);
+  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
+}
+
+.city-card:active {
+  transform: translateY(0) scale(0.98);
+}
+
+/* 活跃卡片 */
+.city-card.is-active {
+  background: rgba(255, 255, 255, 0.18);
+  border-color: rgba(255, 255, 255, 0.35);
+  box-shadow: 0 0 30px rgba(255,255,255,0.06), inset 0 0 30px rgba(255,255,255,0.04);
+}
+
+.city-card.is-active .card-glow {
+  opacity: 1;
+}
+
+/* 卡片光晕 */
+.card-glow {
+  position: absolute;
+  top: -50%;
+  right: -50%;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
+  opacity: 0;
+  transition: opacity 0.4s ease;
+  pointer-events: none;
+}
+
+.city-card:hover .card-glow {
+  opacity: 0.6;
+}
+
+/* 卡片左侧-图标 */
+.card-left {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
+  width: 42px;
+  height: 42px;
+  border-radius: 14px;
+  background: rgba(255,255,255,0.08);
 }
 
-.temp-location {
+.card-emoji {
+  font-size: 22px;
+  line-height: 1;
+  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.08));
+}
+
+/* 卡片主体 */
+.card-body {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  margin-left: 60px;
+  gap: 2px;
 }
 
-.temperature {
-  font-size: 2rem;
-  font-weight: 400;
-  color: #2c3e50;
-  line-height: 1.2;
-  margin-bottom: 8px;
-}
-
-.location-group {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.location {
-  font-size: 1.1rem;
-  font-weight: 500;
-  color: #2c3e50;
+.card-city {
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: 1px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: 1.2;
 }
 
-.condition {
-  font-size: 0.9rem;
-  color: #5d7290;
-  line-height: 1.2;
+.card-condition {
+  font-size: 12px;
+  opacity: 0.55;
+  letter-spacing: 1px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.secondary-info {
-  padding-top: 16px;
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
+/* 卡片温度 */
+.card-temp {
+  font-size: 22px;
+  font-weight: 300;
+  letter-spacing: -1px;
+  flex-shrink: 0;
+  opacity: 0.9;
+}
+
+/* ============================================================
+   加载骨架
+   ============================================================ */
+.city-card.is-loading {
+  cursor: default;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.sk-circle {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: rgba(255,255,255,0.06);
+  animation: shimmer 1.5s ease-in-out infinite;
+  flex-shrink: 0;
+}
+
+.sk-lines {
+  flex: 1;
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
-.info-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #7f8c8d;
-  font-size: 0.85rem;
-  line-height: 1.2;
+.sk-line {
+  height: 12px;
+  border-radius: 6px;
+  background: rgba(255,255,255,0.06);
+  animation: shimmer 1.5s ease-in-out infinite;
 }
 
-.info-item > span {
-  font-size: 20px;
+.sk-line--1 { width: 55%; }
+.sk-line--2 { width: 80%; }
+
+@keyframes shimmer {
+  0%, 100% { opacity: 0.3; }
+  50%      { opacity: 0.7; }
 }
 
-.info-item i {
-  min-width: 16px;
+/* ---------- 雪天文字颜色修正 ---------- */
+.theme-snow .city-card.is-active {
+  background: rgba(255, 255, 255, 0.45);
+  border-color: rgba(0,0,0,0.08);
+}
+.theme-snow .meta-chip {
+  background: rgba(0,0,0,0.04);
+  border-color: rgba(0,0,0,0.06);
+}
+
+/* ============================================================
+   底部
+   ============================================================ */
+.app-footer {
+  position: relative;
+  z-index: 5;
   text-align: center;
-  color: #95a5a6;
+  padding: 20px 0 32px;
+  margin-top: -40px;
 }
 
-@media (max-width: 992px) {
-  .weather-grid {
-    max-width: 900px;
-    padding: 12px;
+.app-footer p {
+  margin: 0;
+  font-size: 12px;
+  opacity: 0.3;
+  letter-spacing: 2px;
+}
+
+/* ============================================================
+   响应式
+   ============================================================ */
+
+/* 平板 */
+@media (min-width: 640px) {
+  .app-header { padding: 24px 32px 12px; }
+  .app-main { padding: 0 32px 100px; }
+  .brand-text { font-size: 24px; }
+  .header-date { font-size: 14px; }
+  .hero-glass { padding: 40px 32px 32px; border-radius: 32px; }
+  .hero-icon-wrap { width: 112px; height: 112px; }
+  .hero-icon { font-size: 60px; }
+  .hero-temp { font-size: 84px; }
+  .hero-unit { font-size: 32px; }
+  .hero-city { font-size: 26px; }
+  .city-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
+  .city-card { padding: 18px 16px; }
+  .card-city { font-size: 16px; }
+  .card-temp { font-size: 24px; }
+}
+
+/* 桌面 */
+@media (min-width: 960px) {
+  .app-header { padding: 30px 40px 16px; }
+  .app-main { padding: 0 40px 120px; }
+  .brand-icon { font-size: 28px; }
+  .brand-text { font-size: 26px; }
+  .header-date { font-size: 15px; }
+  .hero-section { padding: 28px 0 20px; }
+  .hero-glass { padding: 48px 40px 36px; border-radius: 36px; }
+  .hero-icon-wrap { width: 128px; height: 128px; }
+  .hero-icon { font-size: 68px; }
+  .hero-temp { font-size: 96px; }
+  .hero-unit { font-size: 36px; }
+  .hero-city { font-size: 30px; }
+  .hero-condition { font-size: 16px; }
+  .city-grid {
+    grid-template-columns: repeat(5, 1fr);
     gap: 16px;
   }
-
-  .weather-container {
-    padding: 20px;
-  }
-
-  .weather-icon {
-    min-width: 50px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .primary-info {
-    gap: 16px;
+  .city-card {
+    flex-direction: column;
+    text-align: center;
+    padding: 24px 16px 20px;
   }
+  .card-body { align-items: center; }
+  .card-temp { font-size: 28px; margin-top: 2px; }
+  .card-left { width: 52px; height: 52px; }
+  .card-emoji { font-size: 28px; }
 }
 
-@media (max-width: 768px) {
-  .weather-grid {
-    grid-template-columns: 1fr;
-    max-width: 600px;
-  }
-
-  .weather-container {
-    padding: 16px;
-  }
-
-  .weather-icon {
-    min-width: 45px;
-    width: 45px;
-    height: 45px;
-    font-size: 2rem;
-  }
-
-  .temperature {
-    font-size: 1.6rem;
-    margin-bottom: 6px;
-  }
-
-  .location {
-    font-size: 1rem;
-  }
+/* 大屏 */
+@media (min-width: 1280px) {
+  .hero-glass { padding: 56px 48px 40px; }
+  .hero-icon-wrap { width: 140px; height: 140px; }
+  .hero-icon { font-size: 76px; }
+  .hero-temp { font-size: 108px; }
+  .city-grid { gap: 18px; }
+  .city-card { padding: 28px 20px 22px; }
+  .card-temp { font-size: 30px; }
 }
-
-@media (max-width: 480px) {
-  .weather-grid {
-    padding: 10px;
-    gap: 12px;
-  }
-
-  .weather-container {
-    padding: 14px;
-  }
-
-  .primary-info {
-    gap: 12px;
-  }
-
-  .weather-icon {
-    min-width: 40px;
-    width: 40px;
-    height: 40px;
-    font-size: 1.8rem;
-  }
-
-  .temperature {
-    font-size: 1.4rem;
-    margin-bottom: 4px;
-  }
-
-  .location {
-    font-size: 0.95rem;
-  }
-
-  .condition {
-    font-size: 0.85rem;
-  }
-}
-</style>
\ No newline at end of file
+</style>